diff --git a/package-lock.json b/package-lock.json
index 2c32c7a..b8b0b03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,14 @@
             "name": "Hermione",
             "version": "4.0.0",
             "dependencies": {
+                "@dagrejs/dagre": "^1.1.4",
                 "@heroicons/vue": "^2.1.5",
                 "@primevue/themes": "^4.0.0",
                 "@vavt/v3-extension": "^1.2.4",
+                "@vue-flow/background": "^1.3.0",
+                "@vue-flow/controls": "^1.1.2",
+                "@vue-flow/core": "^1.41.2",
+                "@vue-flow/minimap": "^1.5.0",
                 "@websanova/vue-auth": "^4.2.1",
                 "axios": "^1.7.2",
                 "chart.js": "3.3.2",
@@ -21,10 +26,12 @@
                 "primevue": "^4.0.0",
                 "quill": "^1.3.7",
                 "showdown": "^2.1.0",
+                "v-code-diff": "^1.13.1",
                 "vue": "^3.4.34",
                 "vue-authenticate-2": "^2.2.0",
                 "vue-markdown-render": "^2.2.1",
-                "vue-router": "^4.4.0"
+                "vue-router": "^4.4.0",
+                "vue3-markdown": "^1.1.9"
             },
             "devDependencies": {
                 "@primevue/auto-import-resolver": "^4.0.1",
@@ -454,6 +461,22 @@
                 "w3c-keyname": "^2.2.4"
             }
         },
+        "node_modules/@dagrejs/dagre": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.1.4.tgz",
+            "integrity": "sha512-QUTc54Cg/wvmlEUxB+uvoPVKFazM1H18kVHBQNmK2NbrDR5ihOCR6CXLnDSZzMcSQKJtabPUWridBOlJM3WkDg==",
+            "dependencies": {
+                "@dagrejs/graphlib": "2.2.4"
+            }
+        },
+        "node_modules/@dagrejs/graphlib": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-2.2.4.tgz",
+            "integrity": "sha512-mepCf/e9+SKYy1d02/UkvSy6+6MoyXhVxP8lLDfA7BPE1X1d4dR0sZznmbM8/XVJ1GPM+Svnx7Xj6ZweByWUkw==",
+            "engines": {
+                "node": ">17.0.0"
+            }
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.21.5",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -1255,6 +1278,15 @@
                 "url": "https://opencollective.com/unts"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@primeuix/styled": {
             "version": "0.0.5",
             "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
@@ -1583,11 +1615,24 @@
             "resolved": "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
             "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
         },
+        "node_modules/@types/debug": {
+            "version": "4.1.12",
+            "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+            "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+            "dependencies": {
+                "@types/ms": "*"
+            }
+        },
         "node_modules/@types/estree": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
             "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
         },
+        "node_modules/@types/katex": {
+            "version": "0.16.7",
+            "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+            "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
+        },
         "node_modules/@types/linkify-it": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -1607,12 +1652,22 @@
             "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
             "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
         },
+        "node_modules/@types/ms": {
+            "version": "0.7.34",
+            "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+            "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+        },
         "node_modules/@types/raf": {
             "version": "3.4.3",
             "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
             "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
             "optional": true
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
         "node_modules/@ungap/structured-clone": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -1645,6 +1700,51 @@
                 "vue": "^3.2.25"
             }
         },
+        "node_modules/@vue-flow/background": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@vue-flow/background/-/background-1.3.0.tgz",
+            "integrity": "sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==",
+            "peerDependencies": {
+                "@vue-flow/core": "^1.23.0",
+                "vue": "^3.3.0"
+            }
+        },
+        "node_modules/@vue-flow/controls": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@vue-flow/controls/-/controls-1.1.2.tgz",
+            "integrity": "sha512-6dtl/JnwDBNau5h3pDBdOCK6tdxiVAOL3cyruRL61gItwq5E97Hmjmj2BIIqX2p7gU1ENg3z80Z4zlu58fGlsg==",
+            "peerDependencies": {
+                "@vue-flow/core": "^1.23.0",
+                "vue": "^3.3.0"
+            }
+        },
+        "node_modules/@vue-flow/core": {
+            "version": "1.41.2",
+            "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.41.2.tgz",
+            "integrity": "sha512-nRGMXPH4oOyC5I1W8HLqGarBFYZZMNhuHlLaai7+LkDmzvGark+c/ucnJfwYaI2ho/CzQQ8q1J3jMcr+Np2kFA==",
+            "dependencies": {
+                "@vueuse/core": "^10.5.0",
+                "d3-drag": "^3.0.0",
+                "d3-selection": "^3.0.0",
+                "d3-zoom": "^3.0.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.3.0"
+            }
+        },
+        "node_modules/@vue-flow/minimap": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@vue-flow/minimap/-/minimap-1.5.0.tgz",
+            "integrity": "sha512-JhxXDF+8uTc7sgkZHDIvFpHqSl4wsK9xp8Kz5OHwNcXlgGcwqj4yad6jcc1B6bGxm+huESpNmoPotQbpMn6rVw==",
+            "dependencies": {
+                "d3-selection": "^3.0.0",
+                "d3-zoom": "^3.0.0"
+            },
+            "peerDependencies": {
+                "@vue-flow/core": "^1.23.0",
+                "vue": "^3.3.0"
+            }
+        },
         "node_modules/@vue/compiler-core": {
             "version": "3.4.34",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.34.tgz",
@@ -1755,6 +1855,89 @@
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.34.tgz",
             "integrity": "sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A=="
         },
+        "node_modules/@vueuse/core": {
+            "version": "10.11.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+            "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "10.11.1",
+                "@vueuse/shared": "10.11.1",
+                "vue-demi": ">=0.14.8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "10.11.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+            "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "10.11.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+            "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+            "dependencies": {
+                "vue-demi": ">=0.14.8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@websanova/vue-auth": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/@websanova/vue-auth/-/vue-auth-4.2.1.tgz",
@@ -2120,6 +2303,15 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
+        "node_modules/character-entities": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+            "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/chart.js": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.2.tgz",
@@ -2341,11 +2533,106 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
         },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-dispatch": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+            "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-drag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+            "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+            "dependencies": {
+                "d3-dispatch": "1 - 3",
+                "d3-selection": "3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-ease": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+            "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-selection": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+            "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-timer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+            "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-transition": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+            "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+            "dependencies": {
+                "d3-color": "1 - 3",
+                "d3-dispatch": "1 - 3",
+                "d3-ease": "1 - 3",
+                "d3-interpolate": "1 - 3",
+                "d3-timer": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "d3-selection": "2 - 3"
+            }
+        },
+        "node_modules/d3-zoom": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+            "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+            "dependencies": {
+                "d3-dispatch": "1 - 3",
+                "d3-drag": "2 - 3",
+                "d3-interpolate": "1 - 3",
+                "d3-selection": "2 - 3",
+                "d3-transition": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/debug": {
             "version": "4.3.5",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
             "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-            "dev": true,
             "dependencies": {
                 "ms": "2.1.2"
             },
@@ -2358,6 +2645,18 @@
                 }
             }
         },
+        "node_modules/decode-named-character-reference": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+            "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+            "dependencies": {
+                "character-entities": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/deep-equal": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
@@ -2437,6 +2736,19 @@
             "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
             "dev": true
         },
+        "node_modules/diff": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+            "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
+            "engines": {
+                "node": ">=0.3.1"
+            }
+        },
+        "node_modules/diff-match-patch": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+            "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+        },
         "node_modules/diff-sequences": {
             "version": "29.6.3",
             "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -3181,6 +3493,14 @@
             "resolved": "",
             "link": true
         },
+        "node_modules/highlight.js": {
+            "version": "11.10.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+            "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
         "node_modules/html2canvas": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
@@ -3529,6 +3849,29 @@
                 "html2canvas": "^1.0.0-rc.5"
             }
         },
+        "node_modules/katex": {
+            "version": "0.16.11",
+            "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
+            "integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
+            "funding": [
+                "https://opencollective.com/katex",
+                "https://github.com/sponsors/katex"
+            ],
+            "dependencies": {
+                "commander": "^8.3.0"
+            },
+            "bin": {
+                "katex": "cli.js"
+            }
+        },
+        "node_modules/katex/node_modules/commander": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3538,6 +3881,14 @@
                 "json-buffer": "3.0.1"
             }
         },
+        "node_modules/kleur": {
+            "version": "4.1.5",
+            "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+            "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3762,6 +4113,538 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/micromark": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.2.0.tgz",
+            "integrity": "sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "@types/debug": "^4.0.0",
+                "debug": "^4.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-core-commonmark": "^1.0.1",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-combine-extensions": "^1.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-encode": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-subtokenize": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.1",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-core-commonmark": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz",
+            "integrity": "sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-factory-destination": "^1.0.0",
+                "micromark-factory-label": "^1.0.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-factory-title": "^1.0.0",
+                "micromark-factory-whitespace": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-classify-character": "^1.0.0",
+                "micromark-util-html-tag-name": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-subtokenize": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.1",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-extension-gfm": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.3.tgz",
+            "integrity": "sha512-vb9OoHqrhCmbRidQv/2+Bc6pkP0FrtlhurxZofvOEy5o8RtuuvTq+RQ1Vw5ZDNrVraQZu3HixESqbG+0iKk/MQ==",
+            "dependencies": {
+                "micromark-extension-gfm-autolink-literal": "^1.0.0",
+                "micromark-extension-gfm-footnote": "^1.0.0",
+                "micromark-extension-gfm-strikethrough": "^1.0.0",
+                "micromark-extension-gfm-table": "^1.0.0",
+                "micromark-extension-gfm-tagfilter": "^1.0.0",
+                "micromark-extension-gfm-task-list-item": "^1.0.0",
+                "micromark-util-combine-extensions": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-autolink-literal": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.5.tgz",
+            "integrity": "sha512-z3wJSLrDf8kRDOh2qBtoTRD53vJ+CWIyo7uyZuxf/JAbNJjiHsOpG1y5wxk8drtv3ETAHutCu6N3thkOOgueWg==",
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-footnote": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.1.2.tgz",
+            "integrity": "sha512-Yxn7z7SxgyGWRNa4wzf8AhYYWNrwl5q1Z8ii+CSTTIqVkmGZF1CElX2JI8g5yGoM3GAman9/PVCUFUSJ0kB/8Q==",
+            "dependencies": {
+                "micromark-core-commonmark": "^1.0.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-strikethrough": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.7.tgz",
+            "integrity": "sha512-sX0FawVE1o3abGk3vRjOH50L5TTLr3b5XMqnP9YDRb34M0v5OoZhG+OHFz1OffZ9dlwgpTBKaT4XW/AsUVnSDw==",
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-classify-character": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-table": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.7.tgz",
+            "integrity": "sha512-3ZORTHtcSnMQEKtAOsBQ9/oHp9096pI/UvdPtN7ehKvrmZZ2+bbWhi0ln+I9drmwXMt5boocn6OlwQzNXeVeqw==",
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-tagfilter": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.2.tgz",
+            "integrity": "sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==",
+            "dependencies": {
+                "micromark-util-types": "^1.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-gfm-task-list-item": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.5.tgz",
+            "integrity": "sha512-RMFXl2uQ0pNQy6Lun2YBYT9g9INXtWJULgbt01D/x8/6yJ2qpKyzdZD3pi6UIkzF++Da49xAelVKUeUMqd5eIQ==",
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-extension-math": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-2.1.2.tgz",
+            "integrity": "sha512-es0CcOV89VNS9wFmyn+wyFTKweXGW4CEvdaAca6SWRWPyYCbBisnjaHLjWO4Nszuiud84jCpkHsqAJoa768Pvg==",
+            "dependencies": {
+                "@types/katex": "^0.16.0",
+                "katex": "^0.16.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/micromark-factory-destination": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz",
+            "integrity": "sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-factory-label": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz",
+            "integrity": "sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-factory-space": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
+            "integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-factory-title": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz",
+            "integrity": "sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-factory-whitespace": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz",
+            "integrity": "sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-character": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz",
+            "integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-chunked": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz",
+            "integrity": "sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-classify-character": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz",
+            "integrity": "sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-combine-extensions": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz",
+            "integrity": "sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-decode-numeric-character-reference": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz",
+            "integrity": "sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-encode": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz",
+            "integrity": "sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/micromark-util-html-tag-name": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz",
+            "integrity": "sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/micromark-util-normalize-identifier": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz",
+            "integrity": "sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-resolve-all": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz",
+            "integrity": "sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-sanitize-uri": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz",
+            "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-encode": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/micromark-util-subtokenize": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz",
+            "integrity": "sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/micromark-util-symbol": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz",
+            "integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/micromark-util-types": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+            "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
         "node_modules/micromatch": {
             "version": "4.0.7",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
@@ -3827,11 +4710,18 @@
                 "ufo": "^1.5.3"
             }
         },
+        "node_modules/mri": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+            "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-            "dev": true
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
         "node_modules/mz": {
             "version": "2.7.0",
@@ -4610,6 +5500,17 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/sade": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+            "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+            "dependencies": {
+                "mri": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/sass": {
             "version": "1.77.8",
             "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
@@ -5268,6 +6169,69 @@
                 "base64-arraybuffer": "^1.0.2"
             }
         },
+        "node_modules/uvu": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
+            "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
+            "dependencies": {
+                "dequal": "^2.0.0",
+                "diff": "^5.0.0",
+                "kleur": "^4.0.3",
+                "sade": "^1.7.3"
+            },
+            "bin": {
+                "uvu": "bin.js"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/v-code-diff": {
+            "version": "1.13.1",
+            "resolved": "https://registry.npmjs.org/v-code-diff/-/v-code-diff-1.13.1.tgz",
+            "integrity": "sha512-9LTV1dZhC1oYTntyB94vfumGgsfIX5u0fEDSI2Txx4vCE5sI5LkgeLJRRy2SsTVZmDcV+R73sBr0GpPn0TJxMw==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "diff": "^5.2.0",
+                "diff-match-patch": "^1.0.5",
+                "highlight.js": "^11.10.0",
+                "vue-demi": "^0.14.6"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.4.9",
+                "vue": "^2.6.0 || >=3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/v-code-diff/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vanilla-jsoneditor": {
             "version": "0.23.8",
             "resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.23.8.tgz",
@@ -5464,6 +6428,24 @@
                 "vue": "^3.2.0"
             }
         },
+        "node_modules/vue3-markdown": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/vue3-markdown/-/vue3-markdown-1.1.9.tgz",
+            "integrity": "sha512-6EkA7+ZkBaOpdoiMFuI4bBuB+bGpEiW9MgJRApWZu5pUxU7eKrB5K48p8srfK/DUPubDIFuoK3TDGHUiiuL2oA==",
+            "dependencies": {
+                "@popperjs/core": "^2.11.7",
+                "dompurify": "^3.0.2",
+                "micromark": "^3.1.0",
+                "micromark-extension-gfm": "^2.0.1",
+                "micromark-extension-math": "^2.1.0",
+                "vue": "^3.2.47"
+            }
+        },
+        "node_modules/vue3-markdown/node_modules/dompurify": {
+            "version": "3.1.7",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+            "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ=="
+        },
         "node_modules/w3c-keyname": {
             "version": "2.2.8",
             "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 492cf0a..5760356 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,14 @@
         "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
     },
     "dependencies": {
+        "@dagrejs/dagre": "^1.1.4",
         "@heroicons/vue": "^2.1.5",
         "@primevue/themes": "^4.0.0",
         "@vavt/v3-extension": "^1.2.4",
+        "@vue-flow/background": "^1.3.0",
+        "@vue-flow/controls": "^1.1.2",
+        "@vue-flow/core": "^1.41.2",
+        "@vue-flow/minimap": "^1.5.0",
         "@websanova/vue-auth": "^4.2.1",
         "axios": "^1.7.2",
         "chart.js": "3.3.2",
@@ -21,10 +26,12 @@
         "primevue": "^4.0.0",
         "quill": "^1.3.7",
         "showdown": "^2.1.0",
+        "v-code-diff": "^1.13.1",
         "vue": "^3.4.34",
         "vue-authenticate-2": "^2.2.0",
         "vue-markdown-render": "^2.2.1",
-        "vue-router": "^4.4.0"
+        "vue-router": "^4.4.0",
+        "vue3-markdown": "^1.1.9"
     },
     "devDependencies": {
         "@primevue/auto-import-resolver": "^4.0.1",
diff --git a/src/components/ChangeImpactOutputViewer.vue b/src/components/ChangeImpactOutputViewer.vue
new file mode 100644
index 0000000..88ae0b0
--- /dev/null
+++ b/src/components/ChangeImpactOutputViewer.vue
@@ -0,0 +1,122 @@
+<template>
+    <div v-if="parsedOuput != null">
+        <h1>{{ parsedOuput.title }}</h1>
+        <p>{{ parsedOuput.description }}</p>
+        <CiaFlowCodeViewer :changes="parsedOuput.changes">
+        </CiaFlowCodeViewer>
+      <!--  <div v-for="change in parsedOuput.changes" >
+                
+            <CodeDiff
+            :old-string="change.previous_code"
+            :new-string="change.new_code"
+            output-format="side-by-side"
+            />
+            
+
+        </div>-->
+    </div>
+</template>
+
+<script setup>
+import { defineProps, onMounted, ref, toRefs } from 'vue';
+import CiaFlowCodeViewer from './CiaFlowCodeViewer.vue';
+
+const parsedOuput =ref(null);
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+    scenario_output: {
+        type: String,
+        required: true
+    }
+});
+
+const { scenario_output } = toRefs(props);
+
+onMounted(() => {
+    console.log(scenario_output.value.replace('```json', '').replace('```', ''));
+    var jsonParsed = JSON.parse(scenario_output.value.replace('```json', '').replace('```', ''));
+    console.log(jsonParsed);
+    parsedOuput.value = jsonParsed;
+
+});
+</script>
+
+<style>
+
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';
+
+
+
+.basic-flow{
+    height: 90vh;
+    width: 100%;
+  
+}
+
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
+
+.basic-flow.dark {
+    background:#2d3748;
+    color:#fffffb
+}
+
+.basic-flow.dark .vue-flow__node {
+    background:#4a5568;
+    color:#fffffb
+}
+
+.basic-flow.dark .vue-flow__node.selected {
+    background:#333;
+    box-shadow:0 0 0 2px #2563eb
+}
+
+.basic-flow .vue-flow__controls {
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center
+}
+
+.basic-flow.dark .vue-flow__controls {
+    border:1px solid #FFFFFB
+}
+
+.basic-flow .vue-flow__controls .vue-flow__controls-button {
+    border:none;
+    border-right:1px solid #eee
+}
+
+.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
+    background:#4d4d4d
+}
+
+.basic-flow.dark .vue-flow__edge-textbg {
+    fill:#292524
+}
+
+.basic-flow.dark .vue-flow__edge-text {
+    fill:#fffffb
+}
+
+
+.vue-flow__node-class-node {
+    border:1px solid #dc07bc;
+    padding:10px;
+    border-radius: 5px;
+    background:#f5f5f5;
+    display:flex;
+    flex-direction:column;
+    justify-content:space-between;
+    align-items:center;
+    gap:10px;
+    max-width:250px;
+    min-width: 200px;
+}
+
+</style>
diff --git a/src/components/CiaFlowCodeViewer.vue b/src/components/CiaFlowCodeViewer.vue
new file mode 100644
index 0000000..88ba2b9
--- /dev/null
+++ b/src/components/CiaFlowCodeViewer.vue
@@ -0,0 +1,160 @@
+<script setup>
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/minimap'
+import Dialog from 'primevue/dialog'
+import { CodeDiff } from 'v-code-diff'
+import { nextTick, onMounted, ref, toRefs } from 'vue'
+import ClassNode from './ClassNode.vue'
+import { useLayout } from './useLayout'
+
+import { defineProps } from 'vue'
+import 'vue3-markdown/dist/style.css'
+
+
+const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
+
+const nodes = ref(null)
+const edges = ref(null)
+const dark = ref(false)
+const selectionNode = ref({fullyQualifiedClassName: '', description: ''})
+const { graph, layout, previousDirection } = useLayout()
+
+const dialogCodeVisible = ref(false)
+
+
+//66f55e4b2894530b1c154f69
+const props = defineProps({
+    changes: {
+        type: Object,
+        required: true
+    }
+});
+const { changes } = toRefs(props);
+
+onMounted(() => {
+  defineNodes()
+})
+
+onInit((vueFlowInstance) => {
+  vueFlowInstance.fitView()
+})
+
+
+onNodeClick(({ event, nodes, node }) => {
+  console.log(node)
+  if(node.type == 'class-node') {
+    selectionNode.value = node.data.data
+    dialogCodeVisible.value = true
+  }
+
+})
+
+
+function layoutGraph(direction) {
+  nodes.value = layout(nodes.value, edges.value, direction)
+  nextTick(() => {
+    fitView()
+  })
+}
+
+function defineNodes() {
+
+  var tmpNode=[]
+    var tmpEdges=[]
+    var app = {'name':'Apollo'}
+
+    tmpNode.push({
+        id: app.name,
+        data: { label: app.name },
+        position: { x: 250, y: 0 },
+        class: 'light',
+    },) 
+
+    changes.value.forEach((change) => {
+        var label = change.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
+        tmpNode.push({
+            id: change.filename,
+            data: { label: label },
+            position: { x: 250, y: 0 },
+            class: 'light',
+        })
+
+        tmpEdges.push({
+            id: app.name + change.filename,
+            source: app.name,
+            target: change.filename,
+        })
+
+      
+        tmpNode.push({
+            id: change.classname,
+            data: { label: change.classname.split(".").slice(-1)[0] , data: change},
+            type: 'class-node', 
+            position: { x: 250, y: 0 },
+            dimension: { width: 200, height: 100 },
+
+          })
+        tmpEdges.push({
+            id: change.filename + change.classname,
+            source:  change.filename,
+            target: change.classname,
+        })
+  
+            
+    })
+
+    nodes.value = tmpNode
+    edges.value = tmpEdges
+}
+
+</script>
+
+<template>
+    <Dialog v-model:visible="dialogCodeVisible" modal :header="selectionNode.classname" :style="{ width: '70vw' }">
+        <h2>Change description: </h2>{{ selectionNode.change_description }}
+        <div class="flex items-center gap-4 mb-4">
+          <CodeDiff
+            :old-string="selectionNode.previous_code"
+            :new-string="selectionNode.new_code"
+            output-format="side-by-side"
+            />
+         </div>
+    </Dialog>
+
+    <div>
+            <VueFlow
+                :nodes="nodes"
+                :edges="edges"
+                :class="{ dark }"
+                class="basic-flow"
+                :default-viewport="{ zoom: 1.5 }"
+                :min-zoom="0.2"
+                :max-zoom="4"
+                @nodes-initialized="layoutGraph('LR')"
+            >
+
+
+              <template #node-class-node="props">
+                <ClassNode v-bind="props" />
+              </template>
+
+        <Background pattern-color="#aaa" :gap="16" />
+
+        <MiniMap />
+
+        <Controls position="top-left">
+
+        
+
+
+        </Controls>
+    </VueFlow>
+    </div>
+  
+</template>
+
+<style scoped>
+ 
+</style>
\ No newline at end of file
diff --git a/src/components/ClassNode.vue b/src/components/ClassNode.vue
new file mode 100644
index 0000000..384062f
--- /dev/null
+++ b/src/components/ClassNode.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+
+
+// props were passed from the slot using `v-bind="customNodeProps"`
+const props = defineProps(['label','targetPosition','sourcePosition','data'])
+</script>
+
+<template>
+  <div>
+    <Handle type="target" :position="targetPosition" />
+    <div>{{ data.label }}</div>
+   <!-- <Handle type="source" :position="sourcePosition" />-->
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/useLayout.js b/src/components/useLayout.js
new file mode 100644
index 0000000..652aced
--- /dev/null
+++ b/src/components/useLayout.js
@@ -0,0 +1,56 @@
+import dagre from '@dagrejs/dagre'
+import { Position, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+
+/**
+ * Composable to run the layout algorithm on the graph.
+ * It uses the `dagre` library to calculate the layout of the nodes and edges.
+ */
+export function useLayout() {
+  const { findNode } = useVueFlow()
+
+  const graph = ref(new dagre.graphlib.Graph())
+
+  const previousDirection = ref('LR')
+
+  function layout(nodes, edges, direction) {
+    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+    const dagreGraph = new dagre.graphlib.Graph()
+
+    graph.value = dagreGraph
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+    const isHorizontal = direction === 'LR'
+    dagreGraph.setGraph({ rankdir: direction })
+
+    previousDirection.value = direction
+
+    for (const node of nodes) {
+      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+      const graphNode = findNode(node.id)
+
+      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target)
+    }
+
+    dagre.layout(dagreGraph)
+
+    // set nodes with updated positions
+    return nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id)
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+      }
+    })
+  }
+
+  return { graph, layout, previousDirection }
+}
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 5a35268..8801a9d 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -2,6 +2,7 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed, ref, watch } from 'vue';
 import AppFooter from './AppFooter.vue';
+import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
 
 const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
@@ -20,8 +21,8 @@ const containerClass = computed(() => {
     return {
         'layout-theme-light': !layoutConfig.darkTheme,
         'layout-theme-dark': layoutConfig.darkTheme,
-       //'layout-overlay': layoutConfig.menuMode === 'overlay',
-       // 'layout-static': layoutConfig.menuMode === 'static',
+        'layout-overlay': layoutConfig.menuMode === 'overlay',
+        'layout-static': layoutConfig.menuMode === 'static',
         'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
         'layout-overlay-active': layoutState.overlayMenuActive,
         'layout-mobile-active': layoutState.staticMenuMobileActive
@@ -54,9 +55,9 @@ const isOutsideClicked = (event) => {
 <template>
     <div class="layout-wrapper" :class="containerClass">
         <app-topbar></app-topbar>
-       <!-- <div class="layout-sidebar">
+       <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
-        </div>-->
+        </div>
         <div class="layout-main-container">
             <div class="layout-main">
                 <router-view></router-view>
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 6d1ab21..ba84f29 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -6,10 +6,13 @@ import AppMenuItem from './AppMenuItem.vue';
 const model = ref([
     {
         label: 'Scenarios',
-        items: [{ label: 'Scenario List', icon: 'pi pi-fw pi-id-card', to: '/scenario-list' }]
+        items: [
+        { label: 'Scenarios', icon: 'pi pi-fw pi-id-card', to: '/' },
+        { label: 'CIA Scenario', icon: 'pi pi-fw pi-id-card', to: '/cia' },
+        { label: 'Executions', icon: 'pi pi-fw pi-id-card', to: '/exectutions' }]
     }, {
         label: 'Canvas',
-        items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/canvas' }]
+        items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
     } 
 ]);
 </script>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 7b1a5c6..8c751e6 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -38,10 +38,10 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
             </router-link>
         </div>
 
-       <!-- <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
+        <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
             <i class="pi pi-bars"></i>
         </button>
--->
+
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
                 <button  @click="router.push('/canvas')" class="layout-topbar-action" >
diff --git a/src/main.js b/src/main.js
index bb87e7e..2f63999 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,7 @@ import '@/assets/tailwind.css';
 import { config } from 'md-editor-v3';
 
 
+
 config({
     editorConfig: {
         renderDelay: 0,
@@ -46,7 +47,7 @@ var auth = createAuth({
     }
 });
 
-axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;
+axios.defaults.baseURL = 'http://localhost:8081'//import.meta.env.VITE_BACKEND_URL;
 
 const app = createApp(App);
 
diff --git a/src/router/index.js b/src/router/index.js
index 6320fc8..fd59fdb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,15 @@ const router = createRouter({
                     path: 'exec/:id',
                     name: 'scenario-exec',
                     component: () => import('@/views/pages/ScenarioExec.vue')
+                },{
+                    path: '/exectutions',
+                    name: 'exectutions',
+                    component: () => import('@/views/pages/OldScenarioExec.vue')
+                },
+                {
+                    path: '/cia',
+                    name: 'cia',
+                    component: () => import('@/views/pages/CiaScenarioExec.vue')
                 },
                 {
                     path: '/canvas',
diff --git a/src/views/pages/CiaScenarioExec.vue b/src/views/pages/CiaScenarioExec.vue
new file mode 100644
index 0000000..78d60c1
--- /dev/null
+++ b/src/views/pages/CiaScenarioExec.vue
@@ -0,0 +1,246 @@
+<template>
+        <div v-if="loading" class="flex justify-center">
+            <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
+        </div>
+        <div v-else>
+            <div class="flex items-center justify-between p-2">
+                <h1>
+                    {{ scenario.name }}
+                </h1>
+                <Button
+                    @click="back()" 
+                    label="Load" 
+                    class="flex items-center text-sm">
+                        <ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>        
+                        <span>Back to Scenarios</span>
+                    </Button> 
+            </div>
+            <div class="flex mt-6">
+                <div class="card flex flex-col gap-4 w-full">
+                    <template v-if="scenario.inputs && scenario.inputs.length === 1">
+                        <div class="input-container flex items-center">
+                            <div class="flex-grow">
+                                <label :for="scenario.inputs[0].name"><h2>{{ scenario.inputs[0].label }}</h2></label>
+                                <div class="input-wrapper">
+                                    <component
+                                        :is="getInputComponent(scenario.inputs[0].type)"
+                                        :id="scenario.inputs[0].name"
+                                        v-model="formData[scenario.inputs[0].name]"
+                                        :options="scenario.inputs[0].options"
+                                        class="full-width-input"
+                                    />
+                                </div>
+                            </div>
+                            <Button label="Send" @click="execScenario" class="mt-9 ml-4"/>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div v-for="input in scenario.inputs" :key="input.name" class="input-container">
+                                <label :for="input.name"><b>{{ input.label }}</b></label>
+                                <div class="input-wrapper">
+                                    <component
+                                        :is="getInputComponent(input.type)"
+                                        :id="input.name"
+                                        v-model="formData[input.name]"
+                                        :options="input.options"
+                                        class="full-width-input"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex justify-end">
+                            <Button label="Submit" @click="execScenario" class=""/>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="loading_data" class="flex justify-center">
+            <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
+        </div>
+        <div v-if="data_loaded">
+            <Panel class="mt-6">
+                <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-bold">Hermione Response</span>
+                </div>
+                </template>
+                <template #icons>
+                    <div class="flex justify-end">
+                    <Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
+                        <i class="pi pi-code"></i>
+                    </Button>
+                    </div>
+                </template>
+                
+                    <div class="card flex flex-col gap-4 w-full">
+                    <div v-if="scenario_output != null">
+                        <ChangeImpactOutputViewer :scenario_output="scenario_output" />
+                    </div>
+                </div>
+             </Panel>
+            <Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+                
+                <div class="flex">
+                <div class="card flex flex-col gap-4 w-full">
+                <JsonEditorVue
+                    v-model="exec_scenario"
+                />
+            </div>
+        </div>
+    
+            </Dialog>
+        </div>
+</template>
+
+<script setup>
+
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
+import axios from 'axios';
+import JsonEditorVue from 'json-editor-vue';
+import 'md-editor-v3/lib/style.css';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import Select from 'primevue/select';
+import Textarea from 'primevue/textarea';
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+
+const router = useRouter();
+const route = useRoute();
+const value = ref('');
+const scenario = ref({});
+const scenario_output = ref(null);
+const loading = ref(false);
+const data_loaded = ref(false);
+const loading_data = ref(false);
+const formData = ref({});
+const exec_id = ref(null);
+const exec_scenario = ref({});
+const debug_modal = ref(false)
+// Variable to hold the interval ID
+let pollingInterval = null;
+
+onMounted(() => {
+    loading.value = true
+    const id = '66f4ff309766132cadc97ebf' //TODO: Remove fixed scenario id route.params.id;  
+
+    axios.get('/scenarios/' + id )
+        .then(response => {
+            loading.value = false
+            scenario.value  = response.data
+        });
+});
+
+    const getInputComponent = (type) => {
+        switch (type) {
+            case 'text':
+                return InputText;
+            case 'textarea':
+                return Textarea;
+            case 'select':
+                return Select;
+            default:
+                return InputText;
+        }
+    };
+
+    const execScenario = () => {
+        loading_data.value = true;
+        data_loaded.value = false;
+
+        const data = {
+            scenario_id: scenario.value.id,
+            inputs: { ...formData.value }
+        };
+
+        axios.post('/scenarios/execute-async', data)
+            .then(response => {
+                scenario_output.value = response.data.stringOutput;
+                exec_id.value = response.data.scenarioExecution_id
+                // Start polling
+                startPolling();
+            })
+            .catch(error => {
+                console.error('Error executing scenario:', error);
+            });
+    };
+
+    const back = () => {
+        router.push({ name: 'scenario-list'});
+    }
+
+    const openDebug = () => {
+
+        axios.get('/scenarios/execute/'+ exec_id.value).then(resp =>{
+            exec_scenario.value = resp.data
+            debug_modal.value = true
+        })
+    }
+
+
+const pollBackendAPI = () => {
+
+        axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
+            if (response.data.status == 'OK' || response.data.status == 'ERROR') {
+                console.log("Condition met, stopping polling.");
+                stopPolling();
+
+                loading_data.value = false;
+                data_loaded.value = true;
+                scenario_output.value = response.data.stringOutput;
+                exec_id.value = response.data.scenarioExecution_id
+
+            } else {
+                console.log("Condition not met, polling continues.");
+            }
+        });
+}
+
+
+
+// Function to start polling
+function startPolling() {
+    // Set polling interval (every 5 seconds in this case)
+    pollingInterval = setInterval(pollBackendAPI, 2500);
+    console.log("Polling started.");
+}
+
+// Function to stop polling
+function stopPolling() {
+    clearInterval(pollingInterval);
+    console.log("Polling stopped.");
+}
+
+
+</script>
+
+<style scoped>
+    .input-container {
+        margin-bottom: 1em;
+    }
+
+    .input-wrapper {
+        display: flex;
+        align-items: center; 
+        gap: 0.5em; 
+        margin-top: 10px;
+    }
+
+    .full-width-input {
+        width: 100%;
+    }
+
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+ 
+</style>
\ No newline at end of file
diff --git a/src/views/pages/KsDocumentForm.vue b/src/views/pages/KsDocumentForm.vue
deleted file mode 100644
index 3624686..0000000
--- a/src/views/pages/KsDocumentForm.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <div className="card">        
-        <h5>Ks document</h5>
-        <form @submit.prevent="submitForm">
-            <div class="p-field">
-                <label for="description">Description</label>
-                <InputText id="description" v-model="ksdocument.description" />
-            </div>
-            <div class="p-field">
-                <label for="fileName">File Name</label>
-                <InputText id="fileName" v-model="ksdocument.fileName" />
-            </div>
-            <div class="p-field">
-                <label for="filePath">File Path</label>
-                <InputText id="filePath" v-model="ksdocument.filePath" />
-            </div>
-            <div class="p-field">
-                <label for="ingestionDate">Ingestion Date</label>
-                <InputText id="ingestionDate" v-model="ksdocument.ingestionDate" />
-            </div>
-            <div class="p-field">
-                <label for="defaultChunkSize">Default Chunk Size</label>
-                <InputNumber id="defaultChunkSize" v-model="ksdocument.ingestionInfo.defaultChunkSize" />
-            </div>
-            <div class="p-field">
-                <label for="maxNumberOfChunks">Max Number of Chunks</label>
-                <InputNumber id="maxNumberOfChunks" v-model="ksdocument.ingestionInfo.maxNumberOfChunks" />
-            </div>
-            <div class="p-field">
-                <label for="minChunkSize">Min Chunk Size</label>
-                <InputNumber id="minChunkSize" v-model="ksdocument.ingestionInfo.minChunkSize" />
-            </div>
-            <div class="p-field">
-                <label for="minChunkSizeToEmbed">Min Chunk Size To Embed</label>
-                <InputNumber id="minChunkSizeToEmbed" v-model="ksdocument.ingestionInfo.minChunkSizeToEmbed" />
-            </div>
-            <div class="p-field">
-                <label for="type">Type</label>
-                <InputText id="type" v-model="ksdocument.ingestionInfo.type" />
-            </div>
-            <div class="p-field">
-                <label for="ingestionStatus">Ingestion Status</label>
-                <InputText id="ingestionStatus" v-model="ksdocument.ingestionStatus" />
-            </div>
-            <div class="p-field">
-                <label for="name">Name</label>
-                <InputText id="name" v-model="ksdocument.name" />
-            </div>
-            <div class="p-field">
-                <label for="metadata">Metadata</label>
-                <InputTextarea id="metadata" v-model="ksdocument.ingestionInfo.metadata" />
-            </div>
-            <Button label="Submit" type="submit" />
-        </form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue'
-import axios from 'axios';
-
-import { useRoute, useRouter } from 'vue-router'
-import { data } from 'autoprefixer';
-
-const route = useRoute()
-
-const ksdocument = ref({ingestionInfo:{}});
-
-onMounted(() => {
-    axios.get('http://localhost:8082/ksdocuments/'+route.params.id)
-        .then(response => {
-            console.log(response.data);
-            ksdocument.value = response.data;
-        });
-});
-
-const getStatus = (data) => {
-    if (data.ingestionStatus === 'INGESTED') {
-        return 'success';
-    } else if (data.ingestionStatus === 'NEW') {
-        return 'danger';
-    } else {
-        return 'warning';
-    }
-}
-</script>
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
deleted file mode 100644
index 3c92d65..0000000
--- a/src/views/pages/KsDocuments.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-    <div className="card">        
-
-        <DataTable
-            :value="ksdocuments"
-            :paginator="true"
-            :rows="10"
-            dataKey="id"
-            :rowHover="true"
-            showGridlines
-        >
-        <template #header>
-            <div class="flex flex-wrap items-center justify-between gap-2">
-                <span class="text-xl font-bold">KS Documents</span>
-                <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" /> 
-            </div>
-        </template>
-        <Column field="name" header="Name"></Column>
-        <Column field="fileName" header="File Name"></Column>
-        <Column field="ingestionStatus" header="Status">
-            <template #body="slotProps">
-                <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
-            </template>
-        </Column>
-        <Column field="ingestionDate" header="Ingestion Date"></Column>
-        <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-            <template #body="slotProps">
-                <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
-            </template>
-        </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue'
-import axios from 'axios';
-
-import { useRoute, useRouter } from 'vue-router'
-
-const router = useRouter()
-const ksdocuments = ref(null);
-const scenario = ref([])
-
-onMounted(() => {
-    axios.get('http://localhost:8082/fe-api/ksdocuments')
-        .then(response => {
-            console.log(response.data);
-            ksdocuments.value = response.data;
-        });
-});
-
-const getStatus = (data) => {
-    if (data.ingestionStatus === 'INGESTED') {
-        return 'success';
-    } else if (data.ingestionStatus === 'NEW') {
-        return 'danger';
-    } else {
-        return 'warning';
-    }
-}
-
-const editKsDocument = (data) => {
-    console.log(data);
-    router.push({ name: 'ks-document-edit', params: { id: data.id } });
-}
-
-const newKsDocument = () => {
-    console.log('new');
-    router.push({ name: 'ks-document-new'});
-
-}
-</script>
diff --git a/src/views/pages/OldScenarioExec.vue b/src/views/pages/OldScenarioExec.vue
new file mode 100644
index 0000000..6e2e1ba
--- /dev/null
+++ b/src/views/pages/OldScenarioExec.vue
@@ -0,0 +1,154 @@
+<template>
+        <div v-if="loading" class="flex justify-center">
+            <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
+        </div>
+        <div v-else>
+            <div class="flex items-center justify-between p-2">
+            
+                <Button
+                    @click="back()" 
+                    label="Load" 
+                    class="flex items-center text-sm">
+                        <ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>        
+                        <span>Back to Scenarios</span>
+                    </Button> 
+            </div>
+            <div class="flex mt-6">
+                <div class="card flex flex-col gap-4 w-full">
+                    <div class="input-container flex items-center" v-if="!data_loaded">
+                        <div class="flex-grow">
+                            <label ><h2>Execution Id</h2></label>
+                            <div class="input-wrapper">
+                                <InputText v-model="execution_id" class="full-width-input" />
+                            </div>
+                        </div>
+                        <Button label="Find" @click="retrieveScenarioExec" class="mt-9 ml-4" />
+                    </div>
+                    <h1>
+                    {{ scenario.name }}
+                    </h1>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="loading_data" class="flex justify-center">
+            <ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
+        </div>
+        <div v-if="data_loaded">
+            <Panel class="mt-6">
+                <template #header>
+                <div class="flex items-center gap-2">
+                    <span class="font-bold">Hermione Response</span>
+                </div>
+                </template>
+                <template #icons>
+                    <div class="flex justify-end">
+                    <Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
+                        <i class="pi pi-code"></i>
+                    </Button>
+                    </div>
+                </template>
+                
+                    <div class="card flex flex-col gap-4 w-full">
+                    <div v-if="scenario_output != null">
+                        <!--<MdPreview class="editor" v-model="scenario_output" language="en-US"  />-->
+                        <ChangeImpactOutputViewer :scenario_output="scenario_output" />
+                        
+                    </div>
+                </div>
+            </Panel>
+            <Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+                
+                <div class="flex">
+                <div class="card flex flex-col gap-4 w-full">
+                <JsonEditorVue
+                    v-model="exec_scenario"
+                />
+            </div>
+        </div>
+    
+            </Dialog>
+        </div>
+</template>
+
+<script setup>
+
+import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
+import axios from 'axios';
+import JsonEditorVue from 'json-editor-vue';
+import 'md-editor-v3/lib/style.css';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+
+const router = useRouter();
+const route = useRoute();
+const value = ref('');
+const scenario = ref({});
+const scenario_output = ref(null);
+const loading = ref(false);
+const data_loaded = ref(false);
+const loading_data = ref(false);
+const formData = ref({});
+const exec_id = ref(null);
+const exec_scenario = ref({});
+const debug_modal = ref(false)
+const execution_id=ref("");
+
+
+const retrieveScenarioExec = () => {
+    const id = execution_id.value
+    loading.value = true
+
+    axios.get('/execution?id=' + id )
+        .then(response => {
+            loading.value = false
+            scenario.value  = response.data.scenario
+            exec_scenario.value = response.data
+            data_loaded.value = true;
+            scenario_output.value = response.data.execSharedMap.scenario_output;
+            exec_id.value = response.data.scenarioExecution_id      
+        });
+};
+
+   
+
+    
+const back = () => {
+    router.push({ name: 'scenario-list'});
+}
+
+const openDebug = () => {
+    debug_modal.value = true
+}
+</script>
+
+<style scoped>
+    .input-container {
+        margin-bottom: 1em;
+    }
+
+    .input-wrapper {
+        display: flex;
+        align-items: center; 
+        gap: 0.5em; 
+        margin-top: 10px;
+    }
+
+    .full-width-input {
+        width: 100%;
+    }
+
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+ 
+</style>
\ No newline at end of file