diff --git a/app/package-lock.json b/app/package-lock.json
index a254f0c..9087471 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -36,15 +36,14 @@
         "lodash.topairs": "^4.3.0",
         "lodash.values": "^4.3.0",
         "md5": "^2.3.0",
-        "mobx": "^6.9.0",
-        "mobx-react": "^7.6.0",
+        "mobx": "6.15.0",
+        "mobx-react": "9.2.1",
         "prop-types": "^15.8.1",
-        "react": "^16.14.0",
+        "react": "18.3.1",
+        "react-arborist": "3.5.0",
         "react-contexify": "^6.0.0",
-        "react-custom-scroll": "^5.0.0",
-        "react-dom": "^16.14.0",
+        "react-dom": "18.3.1",
         "react-router-dom": "^6.10.0",
-        "react-sortable-tree": "^2.8.0",
         "tinycolor2": "^1.6.0",
         "uuid": "^9.0.0"
       },
@@ -78,9 +77,8 @@
         "@types/lodash.topairs": "^4.3.7",
         "@types/lodash.values": "^4.3.7",
         "@types/md5": "^2.3.2",
-        "@types/react": "^16.14.0",
-        "@types/react-custom-scroll": "^4.2.0",
-        "@types/react-dom": "^16.9.8",
+        "@types/react": "17.0.90",
+        "@types/react-dom": "18.3.7",
         "@types/uuid": "^9.0.1",
         "@vitejs/plugin-react": "^6.0.1",
         "autoprefixer": "^8.6.5",
@@ -126,6 +124,7 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-3.2.2.tgz",
       "integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==",
+      "license": "MIT",
       "dependencies": {
         "tinycolor2": "^1.4.1"
       }
@@ -151,21 +150,7 @@
     "node_modules/@ant-design/icons": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-2.1.1.tgz",
-      "integrity": "sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w==",
-      "peer": true
-    },
-    "node_modules/@ant-design/icons-react": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-react/-/icons-react-2.0.1.tgz",
-      "integrity": "sha512-r1QfoltMuruJZqdiKcbPim3d8LNsVPB733U0gZEUSxBLuqilwsW28K2rCTWSMTjmFX7Mfpf+v/wdiFe/XCqThw==",
-      "dependencies": {
-        "@ant-design/colors": "^3.1.0",
-        "babel-runtime": "^6.26.0"
-      },
-      "peerDependencies": {
-        "@ant-design/icons": "^2.0.0",
-        "react": "16.x"
-      }
+      "integrity": "sha512-jCH+k2Vjlno4YWl6g535nHR09PwCEmTBKAG6VqF+rhkrSPRLfgpU2maagwbZPLjaHuU5Jd1DFQ2KJpQuI6uG8w=="
     },
     "node_modules/@babel/code-frame": {
       "version": "7.21.4",
@@ -193,7 +178,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.4.tgz",
       "integrity": "sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -3526,6 +3510,29 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -3574,6 +3581,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.2.tgz",
       "integrity": "sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==",
+      "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -3596,6 +3604,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3611,12 +3620,14 @@
     "node_modules/@eslint/eslintrc/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=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/@eslint/js": {
       "version": "8.38.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
       "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -3637,6 +3648,7 @@
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
       "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
+      "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
@@ -3650,6 +3662,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3665,12 +3678,14 @@
     "node_modules/@humanwhocodes/config-array/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=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -3682,7 +3697,8 @@
     "node_modules/@humanwhocodes/object-schema": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
@@ -3716,17 +3732,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
-      "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
@@ -3817,7 +3822,8 @@
     "node_modules/@react-dnd/shallowequal": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
-      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg=="
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "license": "MIT"
     },
     "node_modules/@remix-run/router": {
       "version": "1.5.0",
@@ -4177,23 +4183,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dependencies": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
-    "node_modules/@types/hoist-non-react-statics/node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -4371,7 +4360,6 @@
       "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.19.0"
       }
@@ -4382,31 +4370,24 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
-      "version": "16.14.39",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.39.tgz",
-      "integrity": "sha512-x7El4ktgDR1KhtMO/ytMvhGEdFt15nRiNcwKJL0rORvCNC9KDB242m6Lj/BqJ8/k4br1gmThdyHoz3fSUXZueQ==",
+      "version": "17.0.90",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.90.tgz",
+      "integrity": "sha512-P9beVR/x06U9rCJzSxtENnOr4BrbJ6VrsrDTc+73TtHv9XHhryXKbjGRB+6oooB2r0G/pQkD/S4dHo/7jUfwFw==",
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-custom-scroll": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@types/react-custom-scroll/-/react-custom-scroll-4.2.0.tgz",
-      "integrity": "sha512-3HzkCU/n/TDCXK+uIlNf17MP3n3U1q7N0aANjk52POLooqUHkRMSiB0thqToqKNM0ryk4a2MN73QrogsAJgyBQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
+        "@types/scheduler": "^0.16",
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "16.9.8",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
-      "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
-      "dependencies": {
-        "@types/react": "*"
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
       }
     },
     "node_modules/@types/react-slick": {
@@ -4428,9 +4409,10 @@
       }
     },
     "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "license": "MIT"
     },
     "node_modules/@types/semver": {
       "version": "7.3.13",
@@ -4547,7 +4529,6 @@
       "version": "5.57.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.57.1.tgz",
       "integrity": "sha512-hlA0BLeVSA/wBPKdPGxoVr9Pp6GutGoY380FEhbVi0Ph4WNe8kLvqIRx76RSQt1lynZKfrXKs0/XeEk4zZycuA==",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.57.1",
         "@typescript-eslint/types": "5.57.1",
@@ -5012,7 +4993,7 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "peer": true,
+      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5024,6 +5005,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -5077,6 +5059,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5091,7 +5074,8 @@
     "node_modules/ajv/node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "node_modules/ansi-align": {
       "version": "2.0.0",
@@ -5107,6 +5091,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5188,11 +5173,108 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/antd/node_modules/@ant-design/icons-react": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-react/-/icons-react-2.0.1.tgz",
+      "integrity": "sha512-r1QfoltMuruJZqdiKcbPim3d8LNsVPB733U0gZEUSxBLuqilwsW28K2rCTWSMTjmFX7Mfpf+v/wdiFe/XCqThw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^3.1.0",
+        "babel-runtime": "^6.26.0"
+      },
+      "peerDependencies": {
+        "@ant-design/icons": "^2.0.0",
+        "react": "16.x"
+      }
+    },
     "node_modules/antd/node_modules/classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
       "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
+    "node_modules/antd/node_modules/rc-resize-observer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-0.1.3.tgz",
+      "integrity": "sha512-uzOQEwx83xdQSFOkOAM7x7GHIQKYnrDV4dWxtCxyG1BS1pkfJ4EvDeMfsvAJHSYkQXVBu+sgRHGbRtLG3qiuUg==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.1",
+        "rc-util": "^4.13.0",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0"
+      }
+    },
+    "node_modules/antd/node_modules/rc-switch": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-1.9.2.tgz",
+      "integrity": "sha512-qaK7mY4FLDKy99Hq3A1tf8CcqfzKtHp9LPX8WTnZ0MzdHCTneSARb1XD7Eqeu8BactasYGsi2bF9p18Q+/5JEw==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.1",
+        "prop-types": "^15.5.6",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0"
+      }
+    },
+    "node_modules/antd/node_modules/rc-table": {
+      "version": "6.10.15",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-6.10.15.tgz",
+      "integrity": "sha512-LAr0M/gqt+irOjvPNBLApmQ0CUHNOfKsEBhu1uIuB3OlN1ynA9z+sdoTQyNd9+8NSl0MYnQOOfhtLChAY7nU0A==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "component-classes": "^1.2.6",
+        "lodash": "^4.17.5",
+        "mini-store": "^2.0.0",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.13.0",
+        "react-lifecycles-compat": "^3.0.2",
+        "shallowequal": "^1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0"
+      }
+    },
+    "node_modules/antd/node_modules/react-lazy-load": {
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/react-lazy-load/-/react-lazy-load-3.1.14.tgz",
+      "integrity": "sha512-7tsOItf2HmEwhEWMaA/a2XlShuya7rBxqWAR0TPMO1XSf6ybxSDI2bMV8M6vtWkveX9TlSpb0qLB7NMMpDHVDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "eventlistener": "0.0.1",
+        "lodash.debounce": "^4.0.0",
+        "lodash.throttle": "^4.0.0",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/antd/node_modules/react-slick": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.25.2.tgz",
+      "integrity": "sha512-8MNH/NFX/R7zF6W/w+FS5VXNyDusF+XDW1OU0SzODEU7wqYB+ZTGAiNJ++zVNAVqCAHdyCybScaUB+FCZOmBBw==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0"
+      }
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -5202,7 +5284,8 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
     },
     "node_modules/aria-query": {
       "version": "4.2.2",
@@ -5301,7 +5384,8 @@
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "license": "MIT"
     },
     "node_modules/assertion-error": {
       "version": "2.0.1",
@@ -5532,7 +5616,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/bluebird": {
       "version": "3.5.1",
@@ -5572,6 +5657,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -5603,7 +5689,6 @@
           "url": "https://tidelift.com/funding/github/npm/browserslist"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001449",
         "electron-to-chromium": "^1.4.284",
@@ -5626,13 +5711,6 @@
         "node": "*"
       }
     },
-    "node_modules/buffer-from": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz",
-      "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/cacheable-lookup": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
@@ -5648,7 +5726,6 @@
       "resolved": "https://registry.npmjs.org/calipers/-/calipers-2.0.1.tgz",
       "integrity": "sha512-AP4Ui2Z8fZf69d8Dx4cfJgPjQHY3m+QXGFCaAGu8pfNQjyajkosS+Kkf1n6pQDMZcelN5h3MdcjweUqxcsS4pg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "bluebird": "3.x.x"
       }
@@ -5847,7 +5924,8 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/component-classes": {
       "version": "1.2.6",
@@ -5865,7 +5943,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/configstore": {
       "version": "3.1.5",
@@ -6031,9 +6110,10 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -6059,7 +6139,8 @@
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
     },
     "node_modules/default-gateway": {
       "version": "6.0.3",
@@ -6286,16 +6367,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dnd-core": {
-      "version": "11.1.3",
-      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz",
-      "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==",
-      "dependencies": {
-        "@react-dnd/asap": "^4.0.0",
-        "@react-dnd/invariant": "^2.0.0",
-        "redux": "^4.0.4"
-      }
-    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -6321,15 +6392,6 @@
         "dom-matches": ">=1.0.1"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-matches": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-matches/-/dom-matches-2.0.0.tgz",
@@ -6353,20 +6415,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/draft-js": {
-      "version": "0.10.5",
-      "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.10.5.tgz",
-      "integrity": "sha512-LE6jSCV9nkPhfVX2ggcRLA4FKs6zWq9ceuO/88BpXdNCS7mjRTgs0NsV6piUCJX9YxMsB9An33wnkMmU2sD2Zg==",
-      "dependencies": {
-        "fbjs": "^0.8.15",
-        "immutable": "~3.7.4",
-        "object-assign": "^4.1.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0"
-      }
-    },
     "node_modules/duplexer3": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz",
@@ -6415,6 +6463,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "license": "MIT",
       "dependencies": {
         "iconv-lite": "^0.6.2"
       }
@@ -6574,7 +6623,7 @@
       "version": "8.38.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
       "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
-      "peer": true,
+      "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -6756,7 +6805,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -6827,7 +6875,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
       "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.16.3",
         "aria-query": "^4.2.2",
@@ -6854,7 +6901,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz",
       "integrity": "sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.4",
         "array.prototype.flatmap": "^1.2.5",
@@ -6883,7 +6929,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
       "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -6952,6 +6997,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -6966,6 +7012,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -6981,6 +7028,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -6992,6 +7040,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -7005,6 +7054,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -7021,6 +7071,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -7032,6 +7083,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -7043,6 +7095,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
       "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -7055,6 +7108,7 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
       "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==",
+      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -7066,6 +7120,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -7074,6 +7129,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7081,12 +7137,14 @@
     "node_modules/eslint/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=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/eslint/node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7095,6 +7153,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -7106,6 +7165,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7114,6 +7174,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -7125,6 +7186,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7139,6 +7201,7 @@
       "version": "9.5.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.1.tgz",
       "integrity": "sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==",
+      "dev": true,
       "dependencies": {
         "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
@@ -7155,6 +7218,7 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
       "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==",
+      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -7166,6 +7230,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
       "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "dev": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -7177,6 +7242,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -7229,6 +7295,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
       "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7236,7 +7303,8 @@
     "node_modules/eventlistener": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/eventlistener/-/eventlistener-0.0.1.tgz",
-      "integrity": "sha1-7Suqu4UiJ68rz4iRUscsY8pTLrg="
+      "integrity": "sha512-hXZ5N9hmp3n7ovmVgG+2vIO6KcjSU10/d0A1Ixcf0i29dxCwAGTNGrSJCfLmlvmgQD8FYzyp//S8+Hpq4Nd7uA==",
+      "license": "MIT"
     },
     "node_modules/expect-type": {
       "version": "1.3.0",
@@ -7344,12 +7412,14 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
     },
     "node_modules/fastq": {
       "version": "1.15.0",
@@ -7363,6 +7433,7 @@
       "version": "0.8.18",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
       "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "license": "MIT",
       "dependencies": {
         "core-js": "^1.0.0",
         "isomorphic-fetch": "^2.1.1",
@@ -7377,7 +7448,8 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
       "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "license": "MIT"
     },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
@@ -7392,6 +7464,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
       "dependencies": {
         "flat-cache": "^3.0.4"
       },
@@ -7414,6 +7487,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -7429,6 +7503,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
       "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
       "dependencies": {
         "flatted": "^3.1.0",
         "rimraf": "^3.0.2"
@@ -7441,6 +7516,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -7454,7 +7530,8 @@
     "node_modules/flatted": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
-      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true
     },
     "node_modules/for-each": {
       "version": "0.3.3",
@@ -7465,31 +7542,6 @@
         "is-callable": "^1.1.3"
       }
     },
-    "node_modules/frontend-collective-react-dnd-scrollzone": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/frontend-collective-react-dnd-scrollzone/-/frontend-collective-react-dnd-scrollzone-1.0.2.tgz",
-      "integrity": "sha512-me/D9PZJq9j/sjEjs/OPmm6V6nbaHbhgeQiwrWu0t35lhwAOKWc+QBzzKKcZQeboYTkgE8UvCD9el+5ANp+g5Q==",
-      "dependencies": {
-        "hoist-non-react-statics": "^3.1.0",
-        "lodash.throttle": "^4.0.1",
-        "prop-types": "^15.5.9",
-        "raf": "^3.2.0",
-        "react": "^16.3.0",
-        "react-display-name": "^0.2.0",
-        "react-dom": "^16.3.0"
-      },
-      "peerDependencies": {
-        "react-dnd": "^7.3.0"
-      }
-    },
-    "node_modules/frontend-collective-react-dnd-scrollzone/node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/fs-extra": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
@@ -7508,7 +7560,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -7584,7 +7637,8 @@
     "node_modules/get-node-dimensions": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz",
-      "integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ=="
+      "integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ==",
+      "license": "MIT"
     },
     "node_modules/get-symbol-description": {
       "version": "1.0.0",
@@ -7606,6 +7660,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -7625,6 +7680,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -7682,6 +7738,7 @@
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
       "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -7696,6 +7753,7 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -7899,6 +7957,7 @@
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
       "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.8.0"
       }
@@ -7907,6 +7966,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -7922,6 +7982,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7930,6 +7991,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -7938,6 +8000,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -7946,7 +8009,8 @@
     "node_modules/inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -8273,6 +8337,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8402,12 +8467,14 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
     },
     "node_modules/isomorphic-fetch": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
       "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "license": "MIT",
       "dependencies": {
         "node-fetch": "^1.0.1",
         "whatwg-fetch": ">=0.10.0"
@@ -8422,6 +8489,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
       "integrity": "sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==",
+      "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/js-sdsl"
@@ -8436,6 +8504,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -8455,7 +8524,8 @@
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
@@ -8469,6 +8539,7 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
       "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "license": "MIT",
       "dependencies": {
         "string-convert": "^0.2.0"
       }
@@ -8600,6 +8671,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -8873,6 +8945,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -8928,11 +9001,6 @@
       "resolved": "https://registry.npmjs.org/lodash.foreachright/-/lodash.foreachright-4.4.0.tgz",
       "integrity": "sha1-O1YsR30VvZBdKj/two6BqTqAlJI="
     },
-    "node_modules/lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
-    },
     "node_modules/lodash.keys": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-4.2.0.tgz",
@@ -8946,7 +9014,8 @@
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
     },
     "node_modules/lodash.pullall": {
       "version": "4.2.0",
@@ -9086,6 +9155,12 @@
         "is-buffer": "~1.1.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9149,6 +9224,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -9166,29 +9242,30 @@
       }
     },
     "node_modules/mobx": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.9.0.tgz",
-      "integrity": "sha512-HdKewQEREEJgsWnErClfbFoVebze6rGazxFLU/XUyrII8dORfVszN1V0BMRnQSzcgsNNtkX8DHj3nC6cdWE9YQ==",
-      "peer": true,
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.15.0.tgz",
+      "integrity": "sha512-UczzB+0nnwGotYSgllfARAqWCJ5e/skuV2K/l+Zyck/H6pJIhLXuBnz+6vn2i211o7DtbE78HQtsYEKICHGI+g==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mobx"
       }
     },
     "node_modules/mobx-react": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.6.0.tgz",
-      "integrity": "sha512-+HQUNuh7AoQ9ZnU6c4rvbiVVl+wEkb9WqYsVDzGLng+Dqj1XntHu79PvEWKtSMoMj67vFp/ZPXcElosuJO8ckA==",
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-9.2.1.tgz",
+      "integrity": "sha512-WJNNm0FB2n0Z0u+jS1QHmmWyV8l2WiAj8V8I/96kbUEN2YbYCoKW+hbbqKKRUBqElu0llxM7nWKehvRIkhBVJw==",
+      "license": "MIT",
       "dependencies": {
-        "mobx-react-lite": "^3.4.0"
+        "mobx-react-lite": "^4.1.1"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mobx"
       },
       "peerDependencies": {
-        "mobx": "^6.1.0",
-        "react": "^16.8.0 || ^17 || ^18"
+        "mobx": "^6.9.0",
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -9200,16 +9277,20 @@
       }
     },
     "node_modules/mobx-react-lite": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz",
-      "integrity": "sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.1.1.tgz",
+      "integrity": "sha512-iUxiMpsvNraCKXU+yPotsOncNNmyeS2B5DKL+TL6Tar/xm+wwNJAubJmtRSeAoYawdZqwv8Z/+5nPRHeQxTiXg==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.4.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mobx"
       },
       "peerDependencies": {
-        "mobx": "^6.1.0",
-        "react": "^16.8.0 || ^17 || ^18"
+        "mobx": "^6.9.0",
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -9231,7 +9312,8 @@
     "node_modules/mutationobserver-shim": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz",
-      "integrity": "sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ=="
+      "integrity": "sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ==",
+      "license": "MIT"
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
@@ -9255,7 +9337,8 @@
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
     },
     "node_modules/natural-compare-lite": {
       "version": "1.4.0",
@@ -9301,6 +9384,7 @@
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
       "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "license": "MIT",
       "dependencies": {
         "encoding": "^0.1.11",
         "is-stream": "^1.0.1"
@@ -9467,6 +9551,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -9475,6 +9560,7 @@
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
       "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -9500,6 +9586,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -9514,6 +9601,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -9577,6 +9665,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -9588,6 +9677,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -9605,6 +9695,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9613,6 +9704,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9704,7 +9796,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -9882,6 +9973,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -9909,6 +10001,7 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "license": "MIT",
       "dependencies": {
         "asap": "~2.0.3"
       }
@@ -9917,7 +10010,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -9952,6 +10044,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
       "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -10143,6 +10236,21 @@
         "react-dom": ">=15.0.0"
       }
     },
+    "node_modules/rc-editor-core/node_modules/draft-js": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.10.5.tgz",
+      "integrity": "sha512-LE6jSCV9nkPhfVX2ggcRLA4FKs6zWq9ceuO/88BpXdNCS7mjRTgs0NsV6piUCJX9YxMsB9An33wnkMmU2sD2Zg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "fbjs": "^0.8.15",
+        "immutable": "~3.7.4",
+        "object-assign": "^4.1.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0"
+      }
+    },
     "node_modules/rc-editor-mention": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/rc-editor-mention/-/rc-editor-mention-1.1.13.tgz",
@@ -10162,6 +10270,21 @@
         "react-dom": ">=15.x"
       }
     },
+    "node_modules/rc-editor-mention/node_modules/draft-js": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.10.5.tgz",
+      "integrity": "sha512-LE6jSCV9nkPhfVX2ggcRLA4FKs6zWq9ceuO/88BpXdNCS7mjRTgs0NsV6piUCJX9YxMsB9An33wnkMmU2sD2Zg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "fbjs": "^0.8.15",
+        "immutable": "~3.7.4",
+        "object-assign": "^4.1.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0"
+      }
+    },
     "node_modules/rc-form": {
       "version": "2.4.12",
       "resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.12.tgz",
@@ -10231,6 +10354,7 @@
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-7.5.5.tgz",
       "integrity": "sha512-4YJXJgrpUGEA1rMftXN7bDhrV5rPB8oBJoHqT+GVXtIWCanfQxEnM3fmhHQhatL59JoAFMZhJaNzhJIk4FUWCQ==",
+      "license": "MIT",
       "dependencies": {
         "classnames": "2.x",
         "dom-scroll-into-view": "1.x",
@@ -10290,20 +10414,6 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
-    "node_modules/rc-resize-observer": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-0.1.3.tgz",
-      "integrity": "sha512-uzOQEwx83xdQSFOkOAM7x7GHIQKYnrDV4dWxtCxyG1BS1pkfJ4EvDeMfsvAJHSYkQXVBu+sgRHGbRtLG3qiuUg==",
-      "dependencies": {
-        "classnames": "^2.2.1",
-        "rc-util": "^4.13.0",
-        "resize-observer-polyfill": "^1.5.1"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0",
-        "react-dom": "^16.0.0"
-      }
-    },
     "node_modules/rc-select": {
       "version": "9.2.3",
       "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-9.2.3.tgz",
@@ -10349,39 +10459,6 @@
         "prop-types": "^15.5.7"
       }
     },
-    "node_modules/rc-switch": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-1.9.2.tgz",
-      "integrity": "sha512-qaK7mY4FLDKy99Hq3A1tf8CcqfzKtHp9LPX8WTnZ0MzdHCTneSARb1XD7Eqeu8BactasYGsi2bF9p18Q+/5JEw==",
-      "dependencies": {
-        "classnames": "^2.2.1",
-        "prop-types": "^15.5.6",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0",
-        "react-dom": "^16.0.0"
-      }
-    },
-    "node_modules/rc-table": {
-      "version": "6.10.15",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-6.10.15.tgz",
-      "integrity": "sha512-LAr0M/gqt+irOjvPNBLApmQ0CUHNOfKsEBhu1uIuB3OlN1ynA9z+sdoTQyNd9+8NSl0MYnQOOfhtLChAY7nU0A==",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "component-classes": "^1.2.6",
-        "lodash": "^4.17.5",
-        "mini-store": "^2.0.0",
-        "prop-types": "^15.5.8",
-        "rc-util": "^4.13.0",
-        "react-lifecycles-compat": "^3.0.2",
-        "shallowequal": "^1.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0",
-        "react-dom": "^16.0.0"
-      }
-    },
     "node_modules/rc-tabs": {
       "version": "9.7.0",
       "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-9.7.0.tgz",
@@ -10430,6 +10507,7 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-2.1.4.tgz",
       "integrity": "sha512-Xey794Iavgs8YldFlXcZLOhfcIhlX5Oz/yfKufknBXf2AlZCOkc7aHqSM9uTF7fBPtTGPhPxNEfOqHfY7b7xng==",
+      "license": "MIT",
       "dependencies": {
         "@ant-design/create-react-context": "^0.2.4",
         "classnames": "2.x",
@@ -10535,19 +10613,108 @@
       }
     },
     "node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-      "peer": true,
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-arborist": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-arborist/-/react-arborist-3.5.0.tgz",
+      "integrity": "sha512-FdXOICSt7P2h+Pxin1ULN02b4qrXJznNcshgwwWVtuYMLWSJcD245PQ4HOSj/Lr2T1uEegmnEm5Lbns2hUUsqg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-dnd": "^14.0.3",
+        "react-dnd-html5-backend": "^14.0.3",
+        "react-window": "^1.8.11",
+        "redux": "^5.0.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14",
+        "react-dom": ">= 16.14"
+      }
+    },
+    "node_modules/react-arborist/node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
+    "node_modules/react-arborist/node_modules/dnd-core/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/react-arborist/node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/react-arborist/node_modules/react-dnd": {
+      "version": "14.0.5",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
+      "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-arborist/node_modules/react-dnd-html5-backend": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz",
+      "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==",
+      "license": "MIT",
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
+    "node_modules/react-arborist/node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
     "node_modules/react-contexify": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-6.0.0.tgz",
@@ -10560,15 +10727,6 @@
         "react-dom": ">=16"
       }
     },
-    "node_modules/react-custom-scroll": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/react-custom-scroll/-/react-custom-scroll-5.0.0.tgz",
-      "integrity": "sha512-WJ6xdw5lBNScAvYiDJQXtSXktZjaf8K9CMDfS/3UuCTU3MYSr7XSwDnYW1T0ZqxAaOnbvB5U1D922+0ZVVSJ8Q==",
-      "peerDependencies": {
-        "prop-types": "*",
-        "react": "*"
-      }
-    },
     "node_modules/react-devtools": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/react-devtools/-/react-devtools-7.0.1.tgz",
@@ -10620,56 +10778,17 @@
         }
       }
     },
-    "node_modules/react-display-name": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
-      "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg=="
-    },
-    "node_modules/react-dnd": {
-      "version": "11.1.3",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz",
-      "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==",
-      "peer": true,
-      "dependencies": {
-        "@react-dnd/shallowequal": "^2.0.0",
-        "@types/hoist-non-react-statics": "^3.3.1",
-        "dnd-core": "^11.1.3",
-        "hoist-non-react-statics": "^3.3.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.9.0",
-        "react-dom": ">= 16.9.0"
-      }
-    },
-    "node_modules/react-dnd-html5-backend": {
-      "version": "11.1.3",
-      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz",
-      "integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==",
-      "dependencies": {
-        "dnd-core": "^11.1.3"
-      }
-    },
-    "node_modules/react-dnd/node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
-      "peer": true,
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^16.14.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-is": {
@@ -10677,21 +10796,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-lazy-load": {
-      "version": "3.0.13",
-      "resolved": "https://registry.npmjs.org/react-lazy-load/-/react-lazy-load-3.0.13.tgz",
-      "integrity": "sha1-OwqS0zbUPT8Nc8vm81sXBQsIuCQ=",
-      "dependencies": {
-        "eventlistener": "0.0.1",
-        "lodash.debounce": "^4.0.0",
-        "lodash.throttle": "^4.0.0",
-        "prop-types": "^15.5.8"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
-      }
-    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -10701,6 +10805,7 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.5.2.tgz",
       "integrity": "sha512-M+rpbTLWJ3FD6FXvYV6YEGvQ5tMayQ3fGrZhRPHrE9bVlBYfDCLuDcgNttYfk8IqfOI03jz6cbpqMRTUclQnaA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.2.0",
         "get-node-dimensions": "^1.2.1",
@@ -10717,7 +10822,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10752,57 +10856,21 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-slick": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.25.2.tgz",
-      "integrity": "sha512-8MNH/NFX/R7zF6W/w+FS5VXNyDusF+XDW1OU0SzODEU7wqYB+ZTGAiNJ++zVNAVqCAHdyCybScaUB+FCZOmBBw==",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "enquire.js": "^2.1.6",
-        "json2mq": "^0.2.0",
-        "lodash.debounce": "^4.0.8",
-        "resize-observer-polyfill": "^1.5.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.1 || ^16.0.0",
-        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0"
-      }
-    },
-    "node_modules/react-sortable-tree": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/react-sortable-tree/-/react-sortable-tree-2.8.0.tgz",
-      "integrity": "sha512-gTjwxRNt7z0FC76KeNTnGqx1qUSlV3N78mMPRushBpSUXzZYhiFNsWHUIruyPnaAbw4SA7LgpItV7VieAuwDpw==",
-      "dependencies": {
-        "frontend-collective-react-dnd-scrollzone": "^1.0.2",
-        "lodash.isequal": "^4.5.0",
-        "prop-types": "^15.6.1",
-        "react-dnd": "^11.1.3",
-        "react-dnd-html5-backend": "^11.1.3",
-        "react-lifecycles-compat": "^3.0.4",
-        "react-virtualized": "^9.21.2"
-      },
-      "peerDependencies": {
-        "react": "^16.3.0",
-        "react-dnd": "^7.3.0",
-        "react-dom": "^16.3.0"
-      }
-    },
-    "node_modules/react-virtualized": {
-      "version": "9.22.6",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
-      "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
+    "node_modules/react-window": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "clsx": "^1.0.4",
-        "dom-helpers": "^5.1.3",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4"
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
       },
       "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/read-cache": {
@@ -10823,14 +10891,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/redux": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
-      }
-    },
     "node_modules/regenerate-unicode-properties": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
@@ -11049,12 +11109,12 @@
       "optional": true
     },
     "node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/screenfull": {
@@ -11118,7 +11178,8 @@
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
     },
     "node_modules/shallow-equal": {
       "version": "1.2.1",
@@ -11241,7 +11302,8 @@
     "node_modules/string-convert": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
-      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
+      "license": "MIT"
     },
     "node_modules/string-width": {
       "version": "2.1.1",
@@ -11348,6 +11410,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11386,6 +11449,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -11497,47 +11561,11 @@
         "node": ">=4"
       }
     },
-    "node_modules/terser": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
-      "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@jridgewell/source-map": "^0.3.2",
-        "acorn": "^8.5.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/terser/node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
     },
     "node_modules/timed-out": {
       "version": "4.0.1",
@@ -11611,7 +11639,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11728,6 +11755,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -11767,8 +11795,8 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11778,9 +11806,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "0.7.35",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.35.tgz",
-      "integrity": "sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==",
+      "version": "0.7.41",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.41.tgz",
+      "integrity": "sha512-O3oYyCMPYgNNHuO7Jjk3uacJWZF8loBgwrfd/5LE/HyZ3lUIOdniQ7DNXJcIgZbwioZxk0fLfI4EVnetdiX5jg==",
       "funding": [
         {
           "type": "opencollective",
@@ -11789,8 +11817,16 @@
         {
           "type": "paypal",
           "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
         }
       ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
       "engines": {
         "node": "*"
       }
@@ -11952,6 +11988,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -11968,6 +12005,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11994,7 +12040,6 @@
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -12199,9 +12244,10 @@
       }
     },
     "node_modules/whatwg-fetch": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
+      "version": "3.6.20",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
+      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
+      "license": "MIT"
     },
     "node_modules/which": {
       "version": "1.3.0",
@@ -12285,6 +12331,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12292,7 +12339,8 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     },
     "node_modules/write-file-atomic": {
       "version": "2.4.3",
@@ -12345,6 +12393,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/app/package.json b/app/package.json
index 339f0ff..aef9b85 100644
--- a/app/package.json
+++ b/app/package.json
@@ -52,9 +52,8 @@
     "@types/lodash.topairs": "^4.3.7",
     "@types/lodash.values": "^4.3.7",
     "@types/md5": "^2.3.2",
-    "@types/react": "^16.14.0",
-    "@types/react-custom-scroll": "^4.2.0",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "17.0.90",
+    "@types/react-dom": "18.3.7",
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^8.6.5",
@@ -110,15 +109,14 @@
     "lodash.topairs": "^4.3.0",
     "lodash.values": "^4.3.0",
     "md5": "^2.3.0",
-    "mobx": "^6.9.0",
-    "mobx-react": "^7.6.0",
+    "mobx": "6.15.0",
+    "mobx-react": "9.2.1",
     "prop-types": "^15.8.1",
-    "react": "^16.14.0",
+    "react": "18.3.1",
+    "react-arborist": "3.5.0",
     "react-contexify": "^6.0.0",
-    "react-custom-scroll": "^5.0.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "18.3.1",
     "react-router-dom": "^6.10.0",
-    "react-sortable-tree": "^2.8.0",
     "tinycolor2": "^1.6.0",
     "uuid": "^9.0.0"
   }
diff --git a/app/src/components/AiDraftModal/AiDraftConversationTreePreview.tsx b/app/src/components/AiDraftModal/AiDraftConversationTreePreview.tsx
index e298713..3086370 100644
--- a/app/src/components/AiDraftModal/AiDraftConversationTreePreview.tsx
+++ b/app/src/components/AiDraftModal/AiDraftConversationTreePreview.tsx
@@ -1,12 +1,17 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from 'antd';
 import { useSize } from 'ahooks';
-import SortableTree from 'react-sortable-tree';
+import { Tree, NodeRendererProps, RowRendererProps, CursorProps, TreeApi } from 'react-arborist';
 
-import 'react-sortable-tree/style.css';
-
-import { ConverseTekNodeRenderer, ConversationTreeNodeStore, ConverseTekNodeRendererProps } from 'components/DialogEditor/ConverseTekNodeRenderer';
+import { ConverseTekNodeRenderer, ConversationTreeNodeStore } from 'components/DialogEditor/ConverseTekNodeRenderer';
 import type { OnNodeContextMenuProps } from 'components/DialogEditor/DialogEditor';
+import {
+  buildInitialOpenState,
+  findConversationTreeMaxRightEdge,
+  getConversationTreeNodeId,
+  getConversationTreePath,
+  getConversationTreeScaffoldLines,
+} from 'components/DialogEditor/conversation-tree-adapter';
 import { ScalableScrollbar } from 'components/ScalableScrollbar';
 import { useStore } from 'hooks/useStore';
 import { DataStore } from 'stores/dataStore/data-store';
@@ -16,6 +21,30 @@ import { getId } from 'utils/conversation-utils';
 
 import 'components/DialogEditor/DialogEditor.css';
 
+const scaffoldBlockPxWidth = 44;
+const rootScaffoldOffsetPx = scaffoldBlockPxWidth;
+
+function getPreviewNodeLayoutStyle(style: React.CSSProperties): React.CSSProperties {
+  const paddingLeft = typeof style.paddingLeft === 'number' ? style.paddingLeft : parseFloat(String(style.paddingLeft || 0));
+
+  return {
+    ...style,
+    paddingLeft: (Number.isNaN(paddingLeft) ? 0 : paddingLeft) + rootScaffoldOffsetPx,
+  };
+}
+
+function PreviewTreeRow({ attrs, innerRef, children }: RowRendererProps<PreviewTreeNode>) {
+  return (
+    <div {...attrs} ref={innerRef} className={`${attrs.className || ''} conversation-tree__row`} onFocus={(event) => event.stopPropagation()}>
+      {children}
+    </div>
+  );
+}
+
+function PreviewTreeCursor({ top, left }: CursorProps) {
+  return <div className="conversation-tree__drop-cursor" style={{ top, left }} />;
+}
+
 type PreviewNodeStore = ConversationTreeNodeStore & {
   buildTreeData: () => PreviewTreeNode[];
   recordTreeIndex: (nodeId: string | undefined, treeIndex: number) => void;
@@ -33,6 +62,7 @@ export function AiDraftConversationTreePreview({ conversationAsset }: Props) {
   const dataStore = useStore<DataStore>('data');
   const defStore = useStore<DefStore>('def');
   const treeContainerRef = useRef<HTMLDivElement>(null);
+  const arboristTreeRef = useRef<TreeApi<PreviewTreeNode> | null>(null);
   const treeContainerSize = useSize(treeContainerRef);
   const expansionByNodeId = useRef(new Map<string, boolean>());
   const maxHorizontalNodePositionRef = useRef(0);
@@ -55,7 +85,7 @@ export function AiDraftConversationTreePreview({ conversationAsset }: Props) {
 
   useEffect(() => {
     const animationFrameId = requestAnimationFrame(() => {
-      const nextMaxPosition = findMaxRightEdge(treeContainerRef.current);
+      const nextMaxPosition = findConversationTreeMaxRightEdge(treeContainerRef.current);
       setMaxHorizontalNodePosition((previousMaxPosition) => {
         const measuredMaxPosition = Math.max(previousMaxPosition, nextMaxPosition);
         maxHorizontalNodePositionRef.current = measuredMaxPosition;
@@ -73,6 +103,64 @@ export function AiDraftConversationTreePreview({ conversationAsset }: Props) {
   const ignoreContextMenu = ({ event }: OnNodeContextMenuProps) => {
     event.preventDefault();
   };
+  const getPreviewTreeNodeId = (node: PreviewTreeNode) => node.previewTreeKey || getConversationTreeNodeId(node);
+  const initialOpenState = buildInitialOpenState(treeData, getPreviewTreeNodeId);
+  const PreviewNodeRenderer = (props: NodeRendererProps<PreviewTreeNode>) => {
+    const { node, tree, style } = props;
+    const treeNode = node.data;
+    const treeIndex = node.rowIndex ?? 0;
+    previewNodeStore.recordTreeIndex(treeNode.id, treeIndex);
+
+    const comment = getPreviewNodeComment(treeNode, previewNodeStore);
+
+    return (
+      <ConverseTekNodeRenderer
+        dataStore={dataStore}
+        nodeStore={previewNodeStore}
+        activeNodeId={activeNodeId}
+        previousNodeId={null}
+        onNodeContextMenu={ignoreContextMenu}
+        isContextMenuVisible={false}
+        scaffoldBlockPxWidth={scaffoldBlockPxWidth}
+        toggleChildrenVisibility={
+          treeNode.children && treeNode.children.length > 0
+            ? ({ node: currentNode }: { node: RSTNode; path: RSTPath; treeIndex: number }) => {
+                const arboristNode = tree.get(getPreviewTreeNodeId(currentNode as PreviewTreeNode));
+                if (arboristNode == null) return;
+
+                arboristNode.toggle();
+                previewNodeStore.setNodeExpansion(currentNode.id, !arboristNode.isOpen);
+              }
+            : null
+        }
+        connectDragPreview={(element: JSX.Element) => element}
+        connectDragSource={(element: JSX.Element) => element}
+        isDragging={false}
+        canDrop={false}
+        canDrag={false}
+        node={{ ...treeNode, expanded: node.isOpen }}
+        title={treeNode.title}
+        subtitle={treeNode.subtitle || null}
+        draggedNode={null}
+        path={getConversationTreePath(node)}
+        treeIndex={treeIndex}
+        isSearchMatch={false}
+        isSearchFocus={false}
+        buttons={[]}
+        className={comment ? 'ai-draft-preview-tree__row--has-comment' : ''}
+        style={getPreviewNodeLayoutStyle(style)}
+        didDrop={false}
+        treeId="ai-draft-preview-tree"
+        isOver={false}
+        parentNode={node.parent == null || node.parent.isRoot ? null : node.parent.data}
+        rowDirection="ltr"
+        scaffoldLines={getConversationTreeScaffoldLines(node, scaffoldBlockPxWidth)}
+        rowCommentTooltip={comment}
+        zoomLevel={1}
+        operationDefinitions={defStore.operations}
+      />
+    );
+  };
 
   return (
     <div className="ai-draft-preview-tree">
@@ -85,38 +173,26 @@ export function AiDraftConversationTreePreview({ conversationAsset }: Props) {
       <div ref={treeContainerRef} className="ai-draft-preview-tree__canvas dialog-editor">
         {treeData.length > 0 && treeWidth > 0 && (
           <ScalableScrollbar activeNodeId={activeNodeId} width={10} hideScrollOnScale={false}>
-            <SortableTree
-              treeData={treeData}
-              onChange={(nextTreeData: PreviewTreeNode[]) => setTreeData(nextTreeData)}
-              getNodeKey={({ node, treeIndex }: { node: PreviewTreeNode; treeIndex: number }) => {
-                previewNodeStore.recordTreeIndex(node.id, treeIndex);
-                return node.previewTreeKey || node.id || treeIndex;
-              }}
+            <Tree<PreviewTreeNode>
+              ref={arboristTreeRef}
+              data={treeData}
+              idAccessor={getPreviewTreeNodeId}
+              childrenAccessor={(node) => (node.children || null) as readonly PreviewTreeNode[] | null}
+              initialOpenState={initialOpenState}
               rowHeight={40}
-              canDrag={() => false}
-              canDrop={() => false}
-              generateNodeProps={({ node }: { node: PreviewTreeNode }) => {
-                const comment = getPreviewNodeComment(node, previewNodeStore);
-                return {
-                  dataStore,
-                  nodeStore: previewNodeStore,
-                  activeNodeId,
-                  previousNodeId: null,
-                  onNodeContextMenu: ignoreContextMenu,
-                  isContextMenuVisible: false,
-                  buttons: [],
-                  className: comment ? 'ai-draft-preview-tree__row--has-comment' : '',
-                  rowCommentTooltip: comment,
-                  zoomLevel: 1,
-                  operationDefinitions: defStore.operations,
-                };
-              }}
-              nodeContentRenderer={(rendererProps: ConverseTekNodeRendererProps) => <ConverseTekNodeRenderer {...rendererProps} />}
-              reactVirtualizedListProps={{
-                width: treeWidth,
-              }}
-              slideRegionSize={100}
-            />
+              indent={scaffoldBlockPxWidth}
+              width={treeWidth}
+              height={treeContainerSize?.height || 0}
+              disableDrag
+              disableDrop
+              disableMultiSelection
+              renderRow={PreviewTreeRow}
+              renderCursor={PreviewTreeCursor}
+              className="conversation-tree__list"
+              dndRootElement={treeContainerRef.current}
+            >
+              {PreviewNodeRenderer}
+            </Tree>
           </ScalableScrollbar>
         )}
       </div>
@@ -196,26 +272,6 @@ function createPreviewNodeStore(
   return previewNodeStore;
 }
 
-function findMaxRightEdge(node: HTMLElement | null): number {
-  let maxRight = 0;
-  if (node == null) return maxRight;
-
-  node.childNodes.forEach((child) => {
-    if (!(child instanceof HTMLElement)) return;
-
-    if (child.classList.contains('rst__rowWrapper')) {
-      const rect = child.getBoundingClientRect();
-      const left = child.parentElement?.parentElement?.style.left;
-      const leftValue = left ? parseFloat(left) : 0;
-      maxRight = Math.max(maxRight, rect.width + leftValue);
-    }
-
-    maxRight = Math.max(maxRight, findMaxRightEdge(child));
-  });
-
-  return maxRight;
-}
-
 function buildElementTreeNode(
   elementNode: ElementNodeType,
   type: 'root' | 'response',
diff --git a/app/src/components/AiDraftModal/AiDraftModal.css b/app/src/components/AiDraftModal/AiDraftModal.css
index 92f954d..eabcfea 100644
--- a/app/src/components/AiDraftModal/AiDraftModal.css
+++ b/app/src/components/AiDraftModal/AiDraftModal.css
@@ -653,7 +653,7 @@
   cursor: default;
 }
 
-.ai-draft-preview-tree__canvas .ReactVirtualized__Grid {
+.ai-draft-preview-tree__canvas .conversation-tree__list {
   overflow-x: scroll !important;
   overflow-y: auto !important;
   scrollbar-gutter: stable;
@@ -663,6 +663,13 @@
   position: relative;
 }
 
+.ai-draft-preview-tree__canvas .conversation-node-renderer:has(.node-renderer__comment-handle:hover),
+.ai-draft-preview-tree__canvas .conversation-node-renderer__node-content:has(.node-renderer__comment-handle:hover),
+.ai-draft-preview-tree__canvas .rst__rowWrapper:has(.node-renderer__comment-handle:hover),
+.ai-draft-preview-tree__canvas .ai-draft-preview-tree__row--has-comment:has(.node-renderer__comment-handle:hover) {
+  z-index: 200;
+}
+
 .ai-draft-preview-tree__canvas .node-renderer__comment-handle {
   position: relative;
   overflow: visible;
@@ -713,7 +720,7 @@
   position: absolute;
   top: 100%;
   left: 4px;
-  z-index: 40;
+  z-index: 220;
   width: max-content;
   max-width: min(560px, 60vw);
   height: auto;
diff --git a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css
index 12c2067..977f5f9 100644
--- a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css
+++ b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css
@@ -8,9 +8,16 @@
   &__row-contents {
     cursor: pointer;
 
+    > section {
+      display: inline-flex;
+      align-items: center;
+    }
+
     &-logic {
-      display: inline-block;
-      vertical-align: sub;
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      line-height: 1;
     }
   }
 
@@ -125,6 +132,7 @@
     font-weight: 700;
     line-height: 16px;
     text-transform: uppercase;
+    transform: translateY(1px);
     white-space: nowrap;
 
     &--multiple {
@@ -149,6 +157,7 @@
     font-weight: 700;
     line-height: 16px;
     text-transform: uppercase;
+    transform: translateY(1px);
     white-space: nowrap;
     box-sizing: border-box;
 
@@ -182,6 +191,19 @@
     vertical-align: middle;
   }
 
+  &__continue-icon {
+    width: 21px;
+    margin-left: 3px;
+    margin-right: 5px;
+    font-size: 19px;
+    line-height: 1;
+
+    &--before-badge {
+      margin-left: 0;
+      margin-right: 8px;
+    }
+  }
+
   &__logic-tooltip {
     display: grid;
     gap: 7px;
@@ -315,10 +337,52 @@
   }
 }
 
+.conversation-node-renderer {
+  box-sizing: border-box;
+}
+
+.conversation-node-renderer__node-content {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+}
+
+.conversation-node-renderer__scaffold-line,
+.conversation-node-renderer__scaffold-horizontal {
+  position: absolute;
+  z-index: 0;
+  display: block;
+  background-color: gold;
+  pointer-events: none;
+}
+
+.conversation-node-renderer__scaffold-line {
+  width: 1px;
+}
+
+.conversation-node-renderer__scaffold-line--full,
+.conversation-node-renderer__scaffold-line--branch {
+  top: 0;
+  bottom: 0;
+}
+
+.conversation-node-renderer__scaffold-line--terminal {
+  top: 0;
+  height: 50%;
+}
+
+.conversation-node-renderer__scaffold-horizontal {
+  top: 50%;
+  width: 22px;
+  height: 1px;
+}
+
 .rst__rowWrapper {
   padding: 10px 10px 10px 0;
   height: 100%;
   box-sizing: border-box;
+  position: relative;
+  z-index: 1;
 }
 
 .rst__rtl.rst__rowWrapper {
@@ -328,7 +392,18 @@
 .rst__row {
   height: 100%;
   white-space: nowrap;
-  display: flex;
+  display: inline-flex;
+  width: max-content;
+  position: relative;
+}
+
+.conversation-node-renderer__row--drop-target {
+  outline: 2px dashed rgba(173, 229, 246, 0.95);
+  outline-offset: 2px;
+}
+
+.conversation-node-renderer__row--drop-target-invalid {
+  outline-color: rgba(230, 120, 129, 0.95);
 }
 .rst__row > * {
   box-sizing: border-box;
@@ -357,7 +432,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: -1;
+  z-index: 0;
 }
 
 /**
@@ -397,7 +472,8 @@
   border-left: none;
   box-shadow: 0 2px 2px -2px;
   padding: 0 5px 0 10px;
-  border-radius: 2px;
+  border-radius: 0 2px 2px 0;
+  margin-left: -1px;
   min-width: 230px;
   flex: 1 0 auto;
   display: flex;
@@ -414,6 +490,8 @@
 
 .rst__rowContentsDragDisabled {
   border-left: solid #bbb 1px;
+  border-radius: 2px;
+  margin-left: 0;
 }
 
 .rst__rtl.rst__rowContentsDragDisabled {
@@ -423,9 +501,15 @@
 
 .rst__rowLabel {
   flex: 0 1 auto;
+  display: inline-flex;
+  align-items: center;
   padding-right: 20px;
 }
 
+.conversation-node-renderer__row-label.rst__rowLabel {
+  margin-bottom: 0;
+}
+
 .node-renderer__logic-popover .ant-popover-inner {
   overflow: hidden;
   border-radius: 4px;
@@ -464,9 +548,10 @@
   no-repeat center;
   */
   border: solid #aaa 1px;
+  border-right-color: #bbb;
   box-shadow: 0 2px 2px -2px;
   cursor: move;
-  border-radius: 1px;
+  border-radius: 1px 0 0 1px;
   z-index: 1;
 }
 
@@ -651,6 +736,7 @@
   height: 100%;
   display: inline-block;
   position: absolute;
+  z-index: 0;
 }
 .rst__lineChildren::after {
   content: '';
diff --git a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx
index 77f9a7c..7828d88 100644
--- a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx
+++ b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable function-paren-newline */
 /* eslint-disable indent */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { Icon, Popover, Tooltip } from 'antd';
@@ -8,6 +8,7 @@ import defer from 'lodash.defer';
 import tinycolor from 'tinycolor2';
 
 import type { OnNodeContextMenuProps } from '../DialogEditor';
+import type { ConversationTreeScaffoldLine } from '../conversation-tree-adapter';
 import type { PromptNodeType, ElementNodeType, ColourConfigType, OperationArgType, OperationCallType, OperationDefinitionType } from 'types';
 
 import { isDescendant } from 'utils/tree-data-utils';
@@ -52,14 +53,14 @@ export type ConverseTekNodeRendererProps = {
   isContextMenuVisible: boolean;
   scaffoldBlockPxWidth: number;
   toggleChildrenVisibility: (({ node, path, treeIndex }: NodeStateProps) => void) | null;
-  connectDragPreview: (element: JSX.Element) => void;
-  connectDragSource: (element: JSX.Element, effect: { dropEffect: string }) => void;
+  connectDragPreview: (element: JSX.Element) => JSX.Element;
+  connectDragSource: (element: JSX.Element, effect: { dropEffect: string }) => JSX.Element;
   isDragging: boolean;
   canDrop: boolean;
   canDrag: boolean;
   node: RSTNode;
-  title: ((nodeState: NodeStateProps) => string | JSX.Element) | JSX.Element | null;
-  subtitle: ((nodeState: NodeStateProps) => string | JSX.Element) | JSX.Element | null;
+  title: ((nodeState: NodeStateProps) => string | JSX.Element) | string | JSX.Element | null;
+  subtitle: ((nodeState: NodeStateProps) => string | JSX.Element) | string | JSX.Element | null;
   draggedNode: RSTNode | null;
   path: RSTPath;
   treeIndex: number;
@@ -67,13 +68,14 @@ export type ConverseTekNodeRendererProps = {
   isSearchFocus: boolean;
   buttons: JSX.Element[];
   className: string;
-  style: object;
+  style: CSSProperties;
   didDrop: boolean;
   treeId: string;
   isOver: boolean;
   parentNode: RSTNode | null;
   rowDirection: string;
   zoomLevel: number;
+  scaffoldLines?: ConversationTreeScaffoldLine[];
   speakerProjectionByNodeId?: Map<string, SpeakerProjection>;
   cameraProjectionByNodeId?: Map<string, CameraProjection>;
   rowCommentTooltip?: string;
@@ -292,6 +294,7 @@ export const ConverseTekNodeRenderer = observer(
     parentNode = null, // Needed for dndManager
     rowDirection = 'ltr',
     zoomLevel,
+    scaffoldLines = [],
     speakerProjectionByNodeId,
     cameraProjectionByNodeId,
     rowCommentTooltip = '',
@@ -319,9 +322,11 @@ export const ConverseTekNodeRenderer = observer(
 
     const { hasActions, hasConditions } = hasActionsAndConditions(storedNode);
     const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
-    const isLandingPadActive = !didDrop && isDragging;
+    const isLandingPadActive = !didDrop && isDragging && isOver;
 
     const { isCore, isBaseCore, isIsolatedCore, isRoot, isNode, isResponse, isLink } = detectType(nodeType);
+    const hasVisibleChildren = node.children && (node.children.length > 0 || typeof node.children === 'function');
+    const showRootConnector = isCore && !!toggleChildrenVisibility && !!hasVisibleChildren;
 
     const contextMenuId = node.id || Math.random().toString();
     const { parentId } = node;
@@ -347,14 +352,14 @@ export const ConverseTekNodeRenderer = observer(
                                         2px 0px 10px ${highlightColour.toRgbString()},
                                         -2px 0px 10px ${highlightColour.toRgbString()}`;
 
-    const moveHandleClasses = classnames('rst__moveHandle', {
+    const moveHandleClasses = classnames('conversation-node-renderer__move-handle', 'rst__moveHandle', {
       'node-renderer__root-handle': isRoot,
       'node-renderer__node-handle': isNode,
       'node-renderer__response-handle': isResponse,
       'node-renderer__comment-handle': !!rowCommentTooltip,
     });
 
-    const labelClasses = classnames('rst__rowLabel', rowDirectionClass, {
+    const labelClasses = classnames('conversation-node-renderer__row-label', 'rst__rowLabel', rowDirectionClass, {
       'node-renderer__root-label': isRoot,
       'node-renderer__node-label': isNode,
       'node-renderer__response-label': isResponse,
@@ -362,7 +367,7 @@ export const ConverseTekNodeRenderer = observer(
       'node-renderer__core-label': isCore,
     });
 
-    const titleClasses = classnames('rst__rowTitle', node.subtitle && 'rst__rowTitleWithSubtitle', {
+    const titleClasses = classnames('conversation-node-renderer__row-title', 'rst__rowTitle', node.subtitle && 'rst__rowTitleWithSubtitle', {
       'node-renderer__root-title': isRoot,
       'node-renderer__node-title': isNode,
       'node-renderer__response-title': isResponse,
@@ -370,6 +375,7 @@ export const ConverseTekNodeRenderer = observer(
     });
 
     const rowContentsClasses = classnames(
+      'conversation-node-renderer__row-contents',
       'rst__rowContents',
       'node-renderer__row-contents',
       {
@@ -383,6 +389,7 @@ export const ConverseTekNodeRenderer = observer(
     );
 
     const rowClasses = classnames(
+      'conversation-node-renderer__row',
       'rst__row',
       'node-renderer__row',
       {
@@ -397,8 +404,8 @@ export const ConverseTekNodeRenderer = observer(
         'node-renderer__response-row--active': isResponse,
         'node-renderer__link-row--active': isLink,
       },
-      isLandingPadActive && 'rst__rowLandingPad',
-      isLandingPadActive && !canDrop && 'rst__rowCancelPad',
+      isLandingPadActive && 'conversation-node-renderer__row--drop-target',
+      isLandingPadActive && !canDrop && 'conversation-node-renderer__row--drop-target-invalid',
       isSearchMatch && 'rst__rowSearchMatch',
       isSearchFocus && 'rst__rowSearchFocus',
       rowDirectionClass,
@@ -470,8 +477,6 @@ export const ConverseTekNodeRenderer = observer(
     const responseContinueStyle = {
       ...logicStyle,
       transform: 'rotate(270deg)',
-      fontSize: 22,
-      paddingRight: 4,
     };
 
     if ((!nodeTitle || (typeof nodeTitle === 'string' && nodeTitle.length <= 0)) && hasActions) {
@@ -557,6 +562,8 @@ export const ConverseTekNodeRenderer = observer(
                   overlayClassName="node-renderer__logic-popover"
                   content={getConditionsTooltip(storedNode, operationDefinitions)}
                   mouseEnterDelay={0.35}
+                  transitionName=""
+                  destroyTooltipOnHide
                   trigger="hover"
                 >
                   <Icon type="question-circle" theme="filled" style={logicStyle} />
@@ -567,12 +574,22 @@ export const ConverseTekNodeRenderer = observer(
                   overlayClassName="node-renderer__logic-popover"
                   content={getActionsTooltipTitle(storedNode, isRoot, isNode, isResponse, operationDefinitions)}
                   mouseEnterDelay={0.35}
+                  transitionName=""
+                  destroyTooltipOnHide
                   trigger="hover"
                 >
                   <Icon type="right-circle" theme="filled" style={actionsIconStyle} />
                 </Popover>
               )}
-              {!hasNodeTitle && <Icon type="enter" style={responseContinueStyle} />}
+              {!hasNodeTitle && (
+                <Icon
+                  type="enter"
+                  className={classnames('node-renderer__continue-icon', {
+                    'node-renderer__continue-icon--before-badge': speakerBadge || cameraBadge,
+                  })}
+                  style={responseContinueStyle}
+                />
+              )}
             </div>
 
             <div className={labelClasses}>
@@ -628,19 +645,47 @@ export const ConverseTekNodeRenderer = observer(
       if (nodeRef.current) {
         const parentElement = nodeRef.current.parentElement;
         if (parentElement) {
-          setSpacerLeftPosition(nodeStore.getMaxTreeHorizontalNodePosition() - parseFloat(nodeRef.current.parentElement.style.left));
+          setSpacerLeftPosition(nodeStore.getMaxTreeHorizontalNodePosition() - nodeRef.current.offsetLeft);
         }
       }
     }, [maxTreeHorPos, nodeRef.current]);
 
     return (
-      <div ref={nodeRef} style={{ height: '100%' }} data-node-id={node.id} {...otherProps}>
-        {toggleChildrenVisibility && node.children && (node.children.length > 0 || typeof node.children === 'function') && (
-          <div>
+      <div
+        ref={nodeRef}
+        className="conversation-node-renderer"
+        style={{
+          height: '100%',
+          ...style,
+        }}
+        data-node-id={node.id}
+        {...otherProps}
+      >
+        <div className="conversation-node-renderer__node-content">
+          {scaffoldLines.map((line) => (
+            <span
+              key={line.key}
+              className={classnames(
+                'conversation-node-renderer__scaffold-line',
+                `conversation-node-renderer__scaffold-line--${line.kind}`,
+              )}
+              style={{ left: line.left }}
+            />
+          ))}
+          {(scaffoldLines.length > 0 || showRootConnector) && (
+            <span className="conversation-node-renderer__scaffold-horizontal" style={{ left: -0.5 * scaffoldBlockPxWidth }} />
+          )}
+
+          {toggleChildrenVisibility && hasVisibleChildren && (
+            <div>
             <button
               type="button"
               aria-label={node.expanded ? 'Collapse' : 'Expand'}
-              className={classnames(node.expanded ? 'rst__collapseButton' : 'rst__expandButton', rowDirectionClass)}
+              className={classnames(
+                'conversation-node-renderer__toggle-button',
+                node.expanded ? 'rst__collapseButton' : 'rst__expandButton',
+                rowDirectionClass,
+              )}
               style={buttonStyle}
               onClick={() => {
                 const isNodeExpanded = nodeStore.isNodeExpanded(node.id);
@@ -656,12 +701,15 @@ export const ConverseTekNodeRenderer = observer(
             />
 
             {node.expanded && !isDragging && (
-              <div style={{ width: scaffoldBlockPxWidth }} className={classnames('rst__lineChildren', rowDirectionClass)} />
+              <div
+                style={{ width: scaffoldBlockPxWidth }}
+                className={classnames('conversation-node-renderer__line-children', 'rst__lineChildren', rowDirectionClass)}
+              />
             )}
-          </div>
-        )}
+            </div>
+          )}
 
-        <div className={classnames('rst__rowWrapper', rowDirectionClass)} style={{ display: 'inline-block' }}>
+          <div className={classnames('conversation-node-renderer__row-wrapper', 'rst__rowWrapper', rowDirectionClass)} style={{ display: 'inline-block' }}>
           {/* Set the row preview to be used during drag and drop */}
           {connectDragPreview(
             <div
@@ -673,7 +721,6 @@ export const ConverseTekNodeRenderer = observer(
                   ? 1
                   : colourConfig.dialogueNodeTree.nonActiveOpacity,
                 boxShadow: isActiveNode || (!isAnyNodeActive && wasPreviousActiveNode) || isHoveringOver ? hoverActiveBoxShadowStyle : undefined,
-                ...style,
               }}
               onMouseEnter={() => setIsHoveringOver(true)}
               onMouseLeave={() => setIsHoveringOver(false)}
@@ -683,10 +730,11 @@ export const ConverseTekNodeRenderer = observer(
               {rowContents}
             </div>,
           )}
-        </div>
+          </div>
 
-        <div className="faker" style={{ position: 'absolute', display: 'inline-block', visibility: 'hidden', left: spacerLeftPosition }}>
+          <div className="faker" style={{ position: 'absolute', display: 'inline-block', visibility: 'hidden', left: spacerLeftPosition }}>
           spacer
+          </div>
         </div>
       </div>
     );
diff --git a/app/src/components/DialogEditor/DialogEditor.css b/app/src/components/DialogEditor/DialogEditor.css
index 419a53f..f73335a 100644
--- a/app/src/components/DialogEditor/DialogEditor.css
+++ b/app/src/components/DialogEditor/DialogEditor.css
@@ -19,12 +19,112 @@
     overflow: auto;
   }
 
+  .conversation-tree__list {
+    overflow-x: scroll !important;
+    overflow-y: auto !important;
+    scrollbar-gutter: stable;
+  }
+
+  .conversation-tree__row {
+    outline: none;
+  }
+
+  .conversation-tree__drop-cursor {
+    position: absolute;
+    z-index: 20;
+    width: 220px;
+    max-width: calc(100% - 20px);
+    height: 0;
+    margin-top: -1px;
+    border-top: 2px dashed rgba(173, 229, 246, 0.95);
+    background-color: transparent;
+    pointer-events: none;
+  }
+
+  .conversation-tree__drag-preview-layer {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .conversation-tree__drag-preview {
+    display: inline-flex;
+    align-items: center;
+    max-width: 620px;
+    height: 24px;
+    opacity: 0.68;
+    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.38));
+  }
+
+  .conversation-tree__drag-preview-handle {
+    flex: 0 0 34px;
+    align-self: stretch;
+    border: solid #aaa 1px;
+    background-color: #2f71d4;
+    background-image: url('../../assets/images/node-icon.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 43%;
+  }
+
+  .conversation-tree__drag-preview--response .conversation-tree__drag-preview-handle {
+    background-color: #ceae04;
+    background-image: url('../../assets/images/response-icon.svg');
+    background-size: 55%;
+  }
+
+  .conversation-tree__drag-preview--link .conversation-tree__drag-preview-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f3f3f3;
+    background-image: none;
+  }
+
+  .conversation-tree__drag-preview--link .conversation-tree__drag-preview-handle svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .conversation-tree__drag-preview--link .conversation-tree__drag-preview-handle path {
+    fill: #2f71d4;
+  }
+
+  .conversation-tree__drag-preview-title {
+    overflow: hidden;
+    min-width: 90px;
+    max-width: 560px;
+    height: 24px;
+    padding: 0 9px;
+    border: solid #bbb 1px;
+    border-left: 0;
+    border-radius: 0 2px 2px 0;
+    background-color: white;
+    color: #0049b7;
+    font-size: $fontSizeSmall;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .conversation-tree__drag-preview--response .conversation-tree__drag-preview-title {
+    background-color: #545454;
+    color: gold;
+  }
+
   &--isolated {
     .rst__lineHalfHorizontalRight::before,
     .rst__lineFullVertical::after,
     .rst__lineHalfVerticalTop::after,
     .rst__lineHalfVerticalBottom::after,
-    .rst__lineChildren::after {
+    .rst__lineChildren::after,
+    .conversation-node-renderer__line-children::after,
+    .conversation-node-renderer__scaffold-line,
+    .conversation-node-renderer__scaffold-horizontal {
       background-color: #ff8d00 !important;
     }
   }
@@ -33,7 +133,10 @@
   .rst__lineFullVertical::after,
   .rst__lineHalfVerticalTop::after,
   .rst__lineHalfVerticalBottom::after,
-  .rst__lineChildren::after {
+  .rst__lineChildren::after,
+  .conversation-node-renderer__line-children::after,
+  .conversation-node-renderer__scaffold-line,
+  .conversation-node-renderer__scaffold-horizontal {
     background-color: gold;
   }
 
diff --git a/app/src/components/DialogEditor/DialogEditor.tsx b/app/src/components/DialogEditor/DialogEditor.tsx
index 6f3e8ca..d1ba354 100644
--- a/app/src/components/DialogEditor/DialogEditor.tsx
+++ b/app/src/components/DialogEditor/DialogEditor.tsx
@@ -2,15 +2,13 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useEffect, useRef, useMemo, MouseEvent } from 'react';
 import { observer } from 'mobx-react';
-import SortableTree from 'react-sortable-tree';
+import { Tree, NodeApi, NodeRendererProps, RowRendererProps, CursorProps, DragPreviewProps, TreeApi } from 'react-arborist';
 import { useContextMenu } from 'react-contexify';
 import { useSize } from 'ahooks';
 import throttle from 'lodash/throttle';
 import classnames from 'classnames';
 import defer from 'lodash.defer';
 
-import 'react-sortable-tree/style.css';
-
 import { DataStore } from 'stores/dataStore/data-store';
 import { DefStore } from 'stores/defStore/def-store';
 import { NodeStore } from 'stores/nodeStore/node-store';
@@ -27,9 +25,18 @@ import { buildPromptSpeakerProjectionMap } from 'utils/speaker-projection-utils'
 import { buildPromptCameraProjectionMap } from 'utils/camera-projection-utils';
 
 import { ScalableScrollbar } from 'components/ScalableScrollbar';
+import { LinkIcon } from 'components/Svg';
 
-import { ConverseTekNodeRenderer, ConverseTekNodeRendererProps } from './ConverseTekNodeRenderer';
+import { ConverseTekNodeRenderer } from './ConverseTekNodeRenderer';
 import { DialogEditorContextMenu } from '../ContextMenus/DialogEditorContextMenu';
+import {
+  buildInitialOpenState,
+  findConversationTreeMaxRightEdge,
+  getConversationTreeNodeId,
+  getConversationTreePath,
+  getConversationTreeScaffoldLines,
+  moveConversationTreeNode,
+} from './conversation-tree-adapter';
 
 import './DialogEditor.css';
 
@@ -83,6 +90,40 @@ function buildTreeDataFromNode(nodeStore: NodeStore, node: PromptNodeType | Elem
 }
 
 const zoomLevelIncrement = 0.05;
+const scaffoldBlockPxWidth = 44;
+const rootScaffoldOffsetPx = scaffoldBlockPxWidth;
+const dragPreviewHandleAnchorX = 17;
+const dragPreviewHandleAnchorY = 12;
+
+function getNodeLayoutStyle(style: React.CSSProperties): React.CSSProperties {
+  const paddingLeft = typeof style.paddingLeft === 'number' ? style.paddingLeft : parseFloat(String(style.paddingLeft || 0));
+
+  return {
+    ...style,
+    paddingLeft: (Number.isNaN(paddingLeft) ? 0 : paddingLeft) + rootScaffoldOffsetPx,
+  };
+}
+
+function ConversationTreeRow({ attrs, innerRef, children }: RowRendererProps<RSTNode>) {
+  return (
+    <div
+      {...attrs}
+      ref={innerRef}
+      className={classnames(attrs.className, 'conversation-tree__row')}
+      onFocus={(event) => event.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
+
+function ConversationTreeCursor({ top, left }: CursorProps) {
+  return <div className="conversation-tree__drop-cursor" style={{ top, left: left + rootScaffoldOffsetPx }} />;
+}
+
+function getNodePathNode(node: NodeApi<RSTNode> | null): RSTNode | null {
+  return node == null || node.isRoot ? null : node.data;
+}
 
 function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationAsset: ConversationAssetType; rebuild: boolean; expandAll: boolean }) {
   const dataStore = useStore<DataStore>('data');
@@ -97,10 +138,12 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
   const activeIsolateOnNodeId = useRef<string | null>(null);
 
   const [treeData, setTreeData] = useState<RSTNode[] | null>(null);
+  const [treeVersion, setTreeVersion] = useState(0);
   const [treeWidth, setTreeWidth] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
   const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
   const treeElement = useRef<HTMLDivElement>(null);
+  const arboristTreeRef = useRef<TreeApi<RSTNode> | null>(null);
   const { show } = useContextMenu({
     id: 'dialog-context-menu',
   });
@@ -122,27 +165,50 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
     [conversationAsset, rebuild, dataStore.conversationMutationRevision],
   );
 
-  const onMove = (nodeContainer: RSTNodeOnMoveContainer) => {
-    const { node, nextParentNode } = nodeContainer;
-    const { id: nodeId, type: nodeType, parentId: nodeParentId } = node;
+  const replaceTreeData = (nextTreeData: RSTNode[] | null) => {
+    setTreeData(nextTreeData);
+    setTreeVersion((currentVersion) => currentVersion + 1);
+  };
+
+  const commitMove = (node: RSTNode, nextParentNode: RSTNode, previousParentId: string | null) => {
+    const { id: nodeId, type: nodeType } = node;
     const { id: nextParentNodeId, children: parentChildren } = nextParentNode;
 
     const { isRoot, isNode, isResponse } = detectType(nodeType);
 
     if (isRoot) {
-      const rootIds = parentChildren.map((child) => child.id);
+      const rootIds = (parentChildren || []).map((child) => child.id).filter((id): id is string => id != null);
       nodeStore.setRootNodesByIds(rootIds);
     } else if (isNode) {
-      if (nodeId == null || nodeParentId == null) return;
+      if (nodeId == null || previousParentId == null || nextParentNodeId == null) return;
 
-      nodeStore.movePromptNode(nodeId, nextParentNodeId, nodeParentId);
+      nodeStore.movePromptNode(nodeId, nextParentNodeId, previousParentId);
     } else if (isResponse) {
-      if (nodeId == null) return;
+      if (nodeId == null || nextParentNodeId == null) return;
 
-      nodeStore.moveResponseNode(nodeId, nextParentNodeId, parentChildren);
+      nodeStore.moveResponseNode(
+        nodeId,
+        nextParentNodeId,
+        (parentChildren || []).filter((child): child is RSTNode & { id: string } => child.id != null),
+      );
     }
   };
 
+  const onMove = ({ dragIds, parentId, index }: { dragIds: string[]; parentId: string | null; index: number }) => {
+    const dragId = dragIds[0];
+    if (dragId == null) return;
+
+    setTreeData((currentTreeData) => {
+      if (currentTreeData == null) return currentTreeData;
+
+      const moveResult = moveConversationTreeNode(currentTreeData, dragId, parentId, index);
+      if (moveResult == null) return currentTreeData;
+
+      commitMove(moveResult.movedNode, moveResult.nextParentNode, moveResult.previousParentId);
+      return moveResult.treeData;
+    });
+  };
+
   const resize = () => {
     if (treeElement.current) {
       const calculatedTreeWidth = treeElement.current.clientWidth;
@@ -150,11 +216,8 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
     }
   };
 
-  const canDrop = (nodeContainer: RSTNodeCanDropContainer) => {
-    const { nextParent, node } = nodeContainer;
-
-    // GUARD - Don't allow drop at the very top of the tree
-    if (nextParent === null) return false;
+  const canDrop = (node: RSTNode, nextParent: RSTNode | null) => {
+    if (nextParent == null) return false;
 
     const { type: nodeType } = node;
     const { isRoot, isNode, isResponse } = detectType(nodeType);
@@ -197,13 +260,18 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
     return allowDrop;
   };
 
+  const disableDrop = ({ parentNode, dragNodes }: { parentNode: NodeApi<RSTNode>; dragNodes: NodeApi<RSTNode>[]; index: number }) => {
+    const dragNode = dragNodes[0];
+    if (dragNode == null || parentNode == null || parentNode.isRoot) return true;
+
+    return !canDrop(dragNode.data, parentNode.data);
+  };
+
   const onClicked = (event: MouseEvent<HTMLElement>) => {
     const target = event.target as HTMLElement;
-    if (
-      target.className === 'rst__node' ||
-      target.className === 'rst__lineBlock' ||
-      (target.className.includes && target.className.includes('ReactVirtualized__Grid'))
-    ) {
+    if (target.closest('.conversation-node-renderer__toggle-button')) return;
+
+    if (!target.closest('.conversation-node-renderer__row-contents')) {
       nodeStore.clearActiveNode();
     }
   };
@@ -232,37 +300,6 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
 
   const windowSize = useWindowSize();
 
-  const findMaxRightEdge = (node: HTMLElement | null): number => {
-    let maxRight = 0;
-    if (node) {
-      node.childNodes.forEach((child) => {
-        if (child instanceof HTMLElement) {
-          if (child.classList.contains('rst__rowWrapper')) {
-            const rect = child.getBoundingClientRect();
-            const left = child.parentElement?.parentElement?.style.left;
-            let leftValue = 0;
-
-            if (left) {
-              leftValue = parseFloat(left);
-            }
-
-            const rightEdge = rect.width + leftValue;
-            if (rightEdge > maxRight) {
-              maxRight = rightEdge;
-            }
-          }
-
-          // handle the child's children
-          const childMaxRight = findMaxRightEdge(child);
-          if (childMaxRight > maxRight) {
-            maxRight = childMaxRight;
-          }
-        }
-      });
-    }
-    return maxRight;
-  };
-
   const reset = () => {
     activeIsolateOnNodeId.current = null;
     defer(() => nodeStore.scrollToTop());
@@ -270,21 +307,21 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
 
   useEffect(() => {
     if (treeElement.current) {
-      const maxWidth = findMaxRightEdge(treeElement.current);
+      const maxWidth = findConversationTreeMaxRightEdge(treeElement.current);
       nodeStore.setMaxTreeHorizontalNodePosition(maxWidth);
     }
   });
 
   const handleScroll = throttle(() => {
     if (treeElement.current) {
-      const maxWidth = findMaxRightEdge(treeElement.current);
+      const maxWidth = findConversationTreeMaxRightEdge(treeElement.current);
       nodeStore.setMaxTreeHorizontalNodePosition(maxWidth);
     }
   }, 100);
 
   useEffect(() => {
     if (treeElement.current) {
-      const scrollList = document.querySelector('.ReactVirtualized__List');
+      const scrollList = treeElement.current.querySelector('.conversation-tree__list');
 
       if (scrollList) {
         scrollList.addEventListener('scroll', handleScroll);
@@ -304,7 +341,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
     activeIsolateOnNodeId.current = null;
     nodeStore.resetMaxTreeHorizontalNodePosition();
     nodeStore.init(conversationAsset);
-    setTreeData(buildTreeDataFromConversation(nodeStore, conversationAsset));
+    replaceTreeData(buildTreeDataFromConversation(nodeStore, conversationAsset));
   }, []);
 
   // OnConversationChange or rebuild
@@ -319,9 +356,9 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       if (activeIsolateOnNodeId.current) {
         wholeTreeData.current = buildTreeDataFromConversation(nodeStore, conversationAsset);
         const node = nodeStore.getNode(activeIsolateOnNodeId.current);
-        setTreeData(buildTreeDataFromNode(nodeStore, node));
+        replaceTreeData(buildTreeDataFromNode(nodeStore, node));
       } else {
-        setTreeData(buildTreeDataFromConversation(nodeStore, conversationAsset));
+        replaceTreeData(buildTreeDataFromConversation(nodeStore, conversationAsset));
       }
 
       setIsContextMenuVisible(false);
@@ -335,9 +372,9 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
     // in isolation mode
     if (wholeTreeData.current && activeIsolateOnNodeId.current) {
       const node = nodeStore.getNode(activeIsolateOnNodeId.current);
-      setTreeData(buildTreeDataFromNode(nodeStore, node));
+      replaceTreeData(buildTreeDataFromNode(nodeStore, node));
     } else {
-      setTreeData(buildTreeDataFromConversation(nodeStore, conversationAsset));
+      replaceTreeData(buildTreeDataFromConversation(nodeStore, conversationAsset));
     }
 
     setIsContextMenuVisible(false);
@@ -365,7 +402,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       expanded: expandAll,
     }) as RSTNode[];
 
-    setTreeData(updatedTreeData);
+    replaceTreeData(updatedTreeData);
   }, [expandAll]);
 
   // To collapse all other branches except the provided branch starting at the node id
@@ -377,7 +414,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       nodeStore.setNodeExpansion(node.id, false);
     });
 
-    setTreeData(updatedTreeData);
+    replaceTreeData(updatedTreeData);
     nodeStore.setCollapseOthersOnNodeId(null);
   }, [collapseOthersOnNodeId]);
 
@@ -395,7 +432,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       false,
     );
 
-    setTreeData(updatedTreeData);
+    replaceTreeData(updatedTreeData);
     nodeStore.setCollapseOnNodeId(null);
   }, [collapseOnNodeId]);
 
@@ -413,7 +450,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       true,
     );
 
-    setTreeData(updatedTreeData);
+    replaceTreeData(updatedTreeData);
     nodeStore.setExpandOnNodeId(null);
   }, [expandOnNodeId]);
 
@@ -426,7 +463,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       nodeStore.setNodeExpansion(node.id, true);
     });
 
-    setTreeData(updatedTreeData);
+    replaceTreeData(updatedTreeData);
     nodeStore.setExpandFromCoreToNodeId(null);
   }, [expandFromCoreToNodeId]);
 
@@ -436,7 +473,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
 
     if (isolateOnNodeId === 'exit') {
       // Restore the whole tree
-      setTreeData(wholeTreeData.current);
+      replaceTreeData(wholeTreeData.current);
       wholeTreeData.current = null;
       activeIsolateOnNodeId.current = null;
 
@@ -453,7 +490,7 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
       }
 
       // Set the tree data starting from the selected node
-      setTreeData(buildTreeDataFromNode(nodeStore, node));
+      replaceTreeData(buildTreeDataFromNode(nodeStore, node));
     }
 
     nodeStore.setIsolateOnNodeId(null);
@@ -466,6 +503,103 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
   const dialogeEditorClasses = classnames('dialog-editor', {
     'dialog-editor--isolated': wholeTreeData.current,
   });
+  const treeHeight = (dialogEditorSize ? dialogEditorSize.height / zoomLevel : 0) - 1;
+  const measuredTreeWidth = dialogEditorSize ? dialogEditorSize.width / zoomLevel : 0;
+  const arboristTreeWidth = treeWidth || measuredTreeWidth;
+  const initialOpenState = buildInitialOpenState(treeData);
+  const TreeNodeRenderer = (props: NodeRendererProps<RSTNode>) => {
+    const { node, tree, style, dragHandle } = props;
+    const treeNode = node.data;
+    const treeIndex = node.rowIndex ?? 0;
+    if (treeNode.id) nodeStore.addNodeIdAndTreeIndexPair(treeNode.id, treeIndex);
+
+    const draggedNode = tree.dragNode?.data || null;
+    const nodeParent = getNodePathNode(node.parent);
+    const dragSource = (element: JSX.Element) => React.cloneElement(element, { ref: dragHandle });
+    const toggleChildrenVisibility = ({ node: currentNode }: { node: RSTNode; path: RSTPath; treeIndex: number }) => {
+      const arboristNode = tree.get(getConversationTreeNodeId(currentNode));
+      if (arboristNode == null) return;
+
+      arboristNode.toggle();
+      nodeStore.setNodeExpansion(currentNode.id, !arboristNode.isOpen);
+    };
+
+    return (
+      <ConverseTekNodeRenderer
+        dataStore={dataStore}
+        nodeStore={nodeStore}
+        activeNodeId={activeNodeId}
+        previousNodeId={previousNodeId}
+        onNodeContextMenu={onNodeContextMenu}
+        isContextMenuVisible={isContextMenuVisible}
+        scaffoldBlockPxWidth={scaffoldBlockPxWidth}
+        toggleChildrenVisibility={treeNode.children && treeNode.children.length > 0 ? toggleChildrenVisibility : null}
+        connectDragPreview={(element: JSX.Element) => element}
+        connectDragSource={dragSource}
+        isDragging={draggedNode != null}
+        canDrop={node.willReceiveDrop ? tree.canDrop() : true}
+        canDrag={treeNode.canDrag !== false && treeNode.id !== '0'}
+        node={{ ...treeNode, expanded: node.isOpen }}
+        title={treeNode.title}
+        subtitle={treeNode.subtitle || null}
+        draggedNode={draggedNode}
+        path={getConversationTreePath(node)}
+        treeIndex={treeIndex}
+        isSearchMatch={false}
+        isSearchFocus={false}
+        buttons={[]}
+        className=""
+        style={getNodeLayoutStyle(style)}
+        didDrop={false}
+        treeId="conversation-tree"
+        isOver={node.willReceiveDrop}
+        parentNode={nodeParent}
+        rowDirection="ltr"
+        zoomLevel={zoomLevel}
+        scaffoldLines={getConversationTreeScaffoldLines(node, scaffoldBlockPxWidth)}
+        speakerProjectionByNodeId={speakerProjectionByNodeId}
+        cameraProjectionByNodeId={cameraProjectionByNodeId}
+        operationDefinitions={defStore.operations}
+      />
+    );
+  };
+  const TreeDragPreview = ({ mouse, id, isDragging }: DragPreviewProps) => {
+    if (!isDragging || mouse == null || id == null) return null;
+
+    const treeNode = arboristTreeRef.current?.get(id)?.data;
+    if (treeNode == null) return null;
+    const treeRect = treeElement.current?.getBoundingClientRect();
+    if (treeRect == null) return null;
+
+    const storedNode = treeNode.id ? nodeStore.getNode(treeNode.id) : null;
+    const { isRoot, isNode, isResponse, isLink } = detectType(treeNode.type);
+    const anchorX = isLink ? 0 : dragPreviewHandleAnchorX;
+    const previewX = (mouse.x - treeRect.left) / zoomLevel - anchorX;
+    const previewY = (mouse.y - treeRect.top) / zoomLevel - dragPreviewHandleAnchorY;
+    const previewTitle =
+      storedNode == null
+        ? treeNode.title
+        : storedNode.type === 'node'
+        ? storedNode.text
+        : storedNode.responseText;
+
+    return (
+      <div className="conversation-tree__drag-preview-layer">
+        <div
+          className={classnames('conversation-tree__drag-preview', {
+            'conversation-tree__drag-preview--root': isRoot,
+            'conversation-tree__drag-preview--node': isNode,
+            'conversation-tree__drag-preview--response': isResponse,
+            'conversation-tree__drag-preview--link': isLink,
+          })}
+          style={{ transform: `translate(${previewX}px, ${previewY}px)` }}
+        >
+          <span className="conversation-tree__drag-preview-handle">{isLink && <LinkIcon />}</span>
+          <span className="conversation-tree__drag-preview-title">{previewTitle}</span>
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div ref={dialogEditorRef} className={dialogeEditorClasses}>
@@ -482,41 +616,34 @@ function DialogEditor({ conversationAsset, rebuild, expandAll }: { conversationA
         }}
       >
         <ScalableScrollbar activeNodeId={activeNodeId} width={10 / zoomLevel}>
-          <SortableTree
-            treeData={treeData}
-            onChange={(data: RSTNode[]) => setTreeData(data)}
-            getNodeKey={({ node, treeIndex }: { node: RSTNode; treeIndex: number }) => {
-              if (node.treeIndex !== treeIndex) {
-                // eslint-disable-next-line no-param-reassign
-                node.treeIndex = treeIndex;
-              }
-              if (!node.id) return treeIndex;
-
-              nodeStore.addNodeIdAndTreeIndexPair(node.id, treeIndex);
-              return node.id;
-            }}
+          <Tree<RSTNode>
+            key={treeVersion}
+            ref={arboristTreeRef}
+            data={treeData}
+            idAccessor={getConversationTreeNodeId}
+            childrenAccessor={(node) => node.children || null}
+            initialOpenState={initialOpenState}
             rowHeight={40}
-            canDrag={(nodeContainer: RSTNodeCanDragContainer) => !(nodeContainer.node.id === '0')}
-            canDrop={canDrop}
-            onMoveNode={onMove}
-            generateNodeProps={() => ({
-              dataStore,
-              nodeStore,
-              activeNodeId,
-              previousNodeId,
-              onNodeContextMenu,
-              isContextMenuVisible,
-              zoomLevel,
-              speakerProjectionByNodeId,
-              cameraProjectionByNodeId,
-              operationDefinitions: defStore.operations,
-            })}
-            nodeContentRenderer={(props: ConverseTekNodeRendererProps) => <ConverseTekNodeRenderer {...props} />}
-            reactVirtualizedListProps={{
-              width: treeWidth,
+            indent={scaffoldBlockPxWidth}
+            width={arboristTreeWidth}
+            height={treeHeight}
+            disableMultiSelection
+            selection={activeNodeId || undefined}
+            disableDrag={(node) => node.id === '0' || node.canDrag === false}
+            disableDrop={disableDrop}
+            onMove={onMove}
+            onToggle={(nodeId) => {
+              const node = arboristTreeRef.current?.get(nodeId);
+              if (node) nodeStore.setNodeExpansion(node.data.id, node.isOpen);
             }}
-            slideRegionSize={100 / zoomLevel}
-          />
+            renderRow={ConversationTreeRow}
+            renderDragPreview={TreeDragPreview}
+            renderCursor={ConversationTreeCursor}
+            className="conversation-tree__list"
+            dndRootElement={treeElement.current}
+          >
+            {TreeNodeRenderer}
+          </Tree>
         </ScalableScrollbar>
       </div>
     </div>
diff --git a/app/src/components/DialogEditor/conversation-tree-adapter.ts b/app/src/components/DialogEditor/conversation-tree-adapter.ts
new file mode 100644
index 0000000..294cc27
--- /dev/null
+++ b/app/src/components/DialogEditor/conversation-tree-adapter.ts
@@ -0,0 +1,178 @@
+import type { NodeApi } from 'react-arborist';
+
+export type ConversationTreeScaffoldLine = {
+  key: string;
+  left: number;
+  kind: 'full' | 'branch' | 'terminal';
+};
+
+export type ConversationTreeMoveResult = {
+  treeData: RSTNode[];
+  movedNode: RSTNode;
+  previousParentId: string | null;
+  nextParentNode: RSTNode;
+};
+
+export function getConversationTreeNodeId(node: RSTNode): string {
+  if (node.id) return node.id;
+
+  const linkIndex = node.linkIndex == null ? 'unknown' : node.linkIndex;
+  return `${node.type}-${node.parentId || 'root'}-${linkIndex}`;
+}
+
+export function buildInitialOpenState<T extends RSTNode>(
+  treeData: T[],
+  getNodeId: (node: T) => string = getConversationTreeNodeId as (node: T) => string,
+): Record<string, boolean> {
+  const openState: Record<string, boolean> = {};
+
+  const visit = (nodes: readonly RSTNode[] | null | undefined) => {
+    if (nodes == null) return;
+
+    nodes.forEach((node) => {
+      const children = node.children;
+      if (children != null && children.length > 0) {
+        openState[getNodeId(node as T)] = node.expanded !== false;
+        visit(children);
+      }
+    });
+  };
+
+  visit(treeData);
+  return openState;
+}
+
+export function getConversationTreePath<T extends RSTNode>(node: NodeApi<T>): RSTPath {
+  const path: string[] = [];
+  let current: NodeApi<T> | null = node;
+
+  while (current != null && !current.isRoot) {
+    path.unshift(getConversationTreeNodeId(current.data));
+    current = current.parent;
+  }
+
+  return path;
+}
+
+export function getConversationTreeScaffoldLines<T extends RSTNode>(
+  node: NodeApi<T>,
+  scaffoldBlockPxWidth = 44,
+): ConversationTreeScaffoldLine[] {
+  if (node.level <= 0) return [];
+
+  const halfScaffoldBlockPxWidth = scaffoldBlockPxWidth / 2;
+  const lines: ConversationTreeScaffoldLine[] = [
+    {
+      key: `${node.id}-self`,
+      left: -halfScaffoldBlockPxWidth,
+      kind: node.nextSibling == null ? 'terminal' : 'branch',
+    },
+  ];
+
+  let ancestor = node.parent;
+  let ancestorDistance = 1;
+
+  while (ancestor != null && !ancestor.isRoot) {
+    if (ancestor.nextSibling != null) {
+      lines.push({
+        key: `${node.id}-${ancestor.id}`,
+        left: -(ancestorDistance * scaffoldBlockPxWidth + halfScaffoldBlockPxWidth),
+        kind: 'full',
+      });
+    }
+
+    ancestor = ancestor.parent;
+    ancestorDistance += 1;
+  }
+
+  return lines;
+}
+
+export function findConversationTreeMaxRightEdge(node: HTMLElement | null): number {
+  let maxRight = 0;
+  if (node == null) return maxRight;
+
+  const nodeRect = node.getBoundingClientRect();
+  const scrollContainer = node.matches('.conversation-tree__list') ? node : node.querySelector<HTMLElement>('.conversation-tree__list');
+  const scrollLeft = scrollContainer?.scrollLeft || node.scrollLeft;
+
+  node.querySelectorAll<HTMLElement>('.conversation-node-renderer__row-wrapper').forEach((rowWrapper) => {
+    const rect = rowWrapper.getBoundingClientRect();
+    maxRight = Math.max(maxRight, rect.right - nodeRect.left + scrollLeft);
+  });
+
+  return maxRight;
+}
+
+export function moveConversationTreeNode(treeData: RSTNode[], nodeId: string, nextParentId: string | null, nextIndex: number): ConversationTreeMoveResult | null {
+  const removed = removeNode(treeData, nodeId);
+  if (removed == null) return null;
+
+  const insertion = insertNode(removed.treeData, { ...removed.node, parentId: nextParentId }, nextParentId, nextIndex);
+  if (insertion == null) return null;
+
+  return {
+    treeData: insertion.treeData,
+    movedNode: { ...removed.node, parentId: nextParentId },
+    previousParentId: removed.previousParentId,
+    nextParentNode: insertion.parentNode,
+  };
+}
+
+function removeNode(treeData: RSTNode[], nodeId: string): { treeData: RSTNode[]; node: RSTNode; previousParentId: string | null } | null {
+  for (let index = 0; index < treeData.length; index += 1) {
+    const node = treeData[index];
+    if (getConversationTreeNodeId(node) === nodeId) {
+      return {
+        treeData: [...treeData.slice(0, index), ...treeData.slice(index + 1)],
+        node,
+        previousParentId: node.parentId,
+      };
+    }
+
+    if (node.children == null) continue;
+
+    const childResult = removeNode(node.children, nodeId);
+    if (childResult != null) {
+      const nextNode = { ...node, children: childResult.treeData };
+      return {
+        treeData: [...treeData.slice(0, index), nextNode, ...treeData.slice(index + 1)],
+        node: childResult.node,
+        previousParentId: childResult.previousParentId,
+      };
+    }
+  }
+
+  return null;
+}
+
+function insertNode(treeData: RSTNode[], nodeToInsert: RSTNode, nextParentId: string | null, nextIndex: number): { treeData: RSTNode[]; parentNode: RSTNode } | null {
+  if (nextParentId == null) return null;
+
+  for (let index = 0; index < treeData.length; index += 1) {
+    const node = treeData[index];
+    if (getConversationTreeNodeId(node) === nextParentId) {
+      const currentChildren = node.children || [];
+      const nextChildren = [...currentChildren.slice(0, nextIndex), nodeToInsert, ...currentChildren.slice(nextIndex)];
+      const nextParentNode = { ...node, children: nextChildren };
+
+      return {
+        treeData: [...treeData.slice(0, index), nextParentNode, ...treeData.slice(index + 1)],
+        parentNode: nextParentNode,
+      };
+    }
+
+    if (node.children == null) continue;
+
+    const childResult = insertNode(node.children, nodeToInsert, nextParentId, nextIndex);
+    if (childResult != null) {
+      const nextNode = { ...node, children: childResult.treeData };
+      return {
+        treeData: [...treeData.slice(0, index), nextNode, ...treeData.slice(index + 1)],
+        parentNode: childResult.parentNode,
+      };
+    }
+  }
+
+  return null;
+}
diff --git a/app/src/components/FileSystemPicker/FileSystemPicker.tsx b/app/src/components/FileSystemPicker/FileSystemPicker.tsx
index 6f14d7a..37a6311 100644
--- a/app/src/components/FileSystemPicker/FileSystemPicker.tsx
+++ b/app/src/components/FileSystemPicker/FileSystemPicker.tsx
@@ -45,6 +45,7 @@ export function FileSystemPicker() {
   const [files, setFiles] = useState<FileItemSystemType[]>([]);
   const [quickLinks, setQuickLinks] = useState<QuickLinkType[]>([]);
   const listItemRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const pendingScrollItemPath = useRef<string | null>(null);
 
   const { show } = useContextMenu({
     id: 'filesystempicker-context-menu',
@@ -164,7 +165,7 @@ export function FileSystemPicker() {
               fileSystemItem.active = true;
               setSelectedItem(fileSystemItem);
               modalStore.setDisableOk(false, globalModalId);
-              scrollToSelectedItem(fileSystemItem.path);
+              queueScrollToSelectedItem(fileSystemItem.path);
             }
           });
         },
@@ -172,9 +173,15 @@ export function FileSystemPicker() {
     }
   };
 
+  const queueScrollToSelectedItem = (key: string) => {
+    pendingScrollItemPath.current = key;
+    scrollToSelectedItem(key);
+  };
+
   const scrollToSelectedItem = (key: string) => {
     if (listItemRefs.current[key]) {
-      listItemRefs.current[key]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      listItemRefs.current[key]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      pendingScrollItemPath.current = null;
     }
   };
 
@@ -211,8 +218,11 @@ export function FileSystemPicker() {
   });
 
   useEffect(() => {
-    listItemRefs.current = {};
-  }, [directories, files]);
+    const pendingPath = pendingScrollItemPath.current;
+    if (pendingPath == null) return;
+
+    scrollToSelectedItem(pendingPath);
+  });
 
   const items = [...directories, ...files];
 
diff --git a/app/src/components/FileTree/FileTree.css b/app/src/components/FileTree/FileTree.css
index bf00470..6ab3d54 100644
--- a/app/src/components/FileTree/FileTree.css
+++ b/app/src/components/FileTree/FileTree.css
@@ -11,6 +11,11 @@
   &__tree {
     height: 97%;
 
+    .file-tree__scroll {
+      height: calc(100% - 1px);
+      overflow: auto;
+    }
+
     &__conversation {
       .anticon {
         color: gold !important;
diff --git a/app/src/components/FileTree/FileTree.tsx b/app/src/components/FileTree/FileTree.tsx
index 046e303..a446904 100644
--- a/app/src/components/FileTree/FileTree.tsx
+++ b/app/src/components/FileTree/FileTree.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable function-paren-newline */
 import React, { CSSProperties } from 'react';
 import { Tree } from 'antd';
-import CustomScroll from 'react-custom-scroll';
 import classnames from 'classnames';
 import { useContextMenu } from 'react-contexify';
 import { useStore } from 'hooks/useStore';
@@ -11,8 +10,6 @@ import { observer } from 'mobx-react';
 
 import type { AntTreeNodeMouseEvent, AntTreeNodeSelectedEvent } from 'antd/lib/tree';
 
-import 'react-custom-scroll/dist/customScroll.css';
-
 import './FileTree.css';
 
 type Props = {
@@ -74,13 +71,13 @@ const FileTree = ({ title, data = null, onSelected = () => {}, selectedKeys = []
     <div className="file-tree">
       {title && <h4 className="file-tree__title">{title}</h4>}
       <div className="file-tree__tree">
-        <CustomScroll heightRelativeToParent="calc(100% - 1px)">
+        <div className="file-tree__scroll">
           <Tree showIcon showLine defaultExpandedKeys={['0']} onSelect={onSelected} selectedKeys={selectedKeys} onRightClick={onRightClickTree}>
             <TreeNode className={headerClasses} title={data && data.length ? selectedDirectoryName : 'No Conversations'} key="0">
               {renderTreeNodes(dataStore, data)}
             </TreeNode>
           </Tree>
-        </CustomScroll>
+        </div>
       </div>
     </div>
   );
diff --git a/app/src/containers/ConversationActions/ConversationActions.tsx b/app/src/containers/ConversationActions/ConversationActions.tsx
index 4db224a..b1171fe 100644
--- a/app/src/containers/ConversationActions/ConversationActions.tsx
+++ b/app/src/containers/ConversationActions/ConversationActions.tsx
@@ -5,8 +5,6 @@ import { Button, Icon, Collapse, Popconfirm } from 'antd';
 import classnames from 'classnames';
 import { useUpdate } from 'ahooks';
 
-import 'react-custom-scroll/dist/customScroll.css';
-
 import { ViewableLogic } from 'components/ViewableLogic';
 import { EditableLogic } from 'components/EditableLogic';
 import { useStore } from 'hooks/useStore';
diff --git a/app/src/containers/ConversationConditions/ConversationConditions.tsx b/app/src/containers/ConversationConditions/ConversationConditions.tsx
index c71e423..7202924 100644
--- a/app/src/containers/ConversationConditions/ConversationConditions.tsx
+++ b/app/src/containers/ConversationConditions/ConversationConditions.tsx
@@ -4,8 +4,6 @@ import { Button, Icon, Collapse, Popconfirm } from 'antd';
 import classnames from 'classnames';
 import { useUpdate } from 'ahooks';
 
-import 'react-custom-scroll/dist/customScroll.css';
-
 import { ViewableLogic } from 'components/ViewableLogic';
 import { EditableLogic } from 'components/EditableLogic';
 import { useStore } from 'hooks/useStore';
diff --git a/app/src/containers/GlobalModal/GlobalModal.tsx b/app/src/containers/GlobalModal/GlobalModal.tsx
index 36c3601..7eeb636 100644
--- a/app/src/containers/GlobalModal/GlobalModal.tsx
+++ b/app/src/containers/GlobalModal/GlobalModal.tsx
@@ -63,6 +63,8 @@ function GlobalModal({ id }: { id: string }) {
       closable={closable}
       maskClosable={maskClosable}
       centered={centered}
+      transitionName=""
+      maskTransitionName=""
     >
       {content}
     </Modal>
diff --git a/app/src/css/styles.css b/app/src/css/styles.css
index c244069..efd4cb1 100644
--- a/app/src/css/styles.css
+++ b/app/src/css/styles.css
@@ -120,6 +120,6 @@ h3[type='secondary'] {
   background: $backgroundTertiary;
 }
 
-.ReactVirtualized__Grid {
+.conversation-tree__list {
   overflow-x: scroll !important;
 }
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 066eba5..390641f 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -1,12 +1,15 @@
 /* global document */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
 import 'core-js';
 
 const render = () => {
-  ReactDOM.render(<App />, document.getElementById('root'));
+  const rootElement = document.getElementById('root');
+  if (rootElement == null) throw new Error('Application root element was not found.');
+
+  createRoot(rootElement).render(<App />);
 };
 
 render();
diff --git a/app/src/stores/nodeStore/node-store.ts b/app/src/stores/nodeStore/node-store.ts
index 3d42392..7a34bd7 100644
--- a/app/src/stores/nodeStore/node-store.ts
+++ b/app/src/stores/nodeStore/node-store.ts
@@ -303,7 +303,7 @@ class NodeStore {
   }
 
   public scrollToTop(): void {
-    const tree = window.document.querySelector('.ReactVirtualized__Grid');
+    const tree = window.document.querySelector('.conversation-tree__list');
     if (tree) tree.scrollTop = 0;
   }
 
@@ -313,19 +313,20 @@ class NodeStore {
     // Quickly scroll in the given direction to force the virtual tree to load
     // At the same time check for the required node
     requestAnimationFrame(() => {
-      const tree = cachedTree || window.document.querySelector('.ReactVirtualized__Grid');
+      const tree = cachedTree || window.document.querySelector('.conversation-tree__list');
       const element = window.document.querySelector(`[data-node-id="${nodeId}"]`) as HTMLElement;
 
       if (tree == null) throw Error('Tree not found for autoscroll to node. This should not happen.');
 
       if (element) {
-        const offsetTop = ((element.offsetParent as HTMLElement)?.offsetParent as HTMLElement)?.offsetTop;
+        const rowElement = element.closest<HTMLElement>('.conversation-tree__row');
+        const offsetTop = rowElement?.offsetTop ?? element.offsetTop;
         let scrollTop = offsetTop;
         if (direction === 'down') {
           scrollTop = offsetTop - tree.clientHeight + horizontalScrollBarHeight + element.getBoundingClientRect().height;
         }
 
-        const scrollLeft = (element.offsetParent as HTMLElement)?.offsetLeft - 50;
+        const scrollLeft = element.offsetLeft - 50;
         tree.scrollTop = scrollTop;
         if (!skipHorizontalScroll) tree.scrollLeft = scrollLeft;
       } else if (!element) {
diff --git a/app/src/types/Vendor.d.ts b/app/src/types/Vendor.d.ts
index 7df53f1..1867e86 100644
--- a/app/src/types/Vendor.d.ts
+++ b/app/src/types/Vendor.d.ts
@@ -1,5 +1,3 @@
-declare module 'react-sortable-tree';
-
 declare module '*.css';
 
 declare module '@ungap/structured-clone' {
diff --git a/app/src/utils/__tests__/speaker-projection-utils.test.ts b/app/src/utils/__tests__/speaker-projection-utils.test.ts
index e6f19cc..5ff1a10 100644
--- a/app/src/utils/__tests__/speaker-projection-utils.test.ts
+++ b/app/src/utils/__tests__/speaker-projection-utils.test.ts
@@ -41,6 +41,24 @@ describe('speaker projection utilities', () => {
     });
   });
 
+  it('shows known speaker ids as trimmed speaker names without changing the source id', () => {
+    const conversationAsset = createConversation('K:/Mods/Test/conversations');
+    const darius = createPromptNode(0);
+    darius.sourceInSceneRef = null;
+    darius.speakerOverrideId = '598cd3f26230355c18000069';
+
+    conversationAsset.conversation.nodes = [darius];
+    conversationAsset.conversation.roots = [makeRoot(0)];
+
+    const projections = buildPromptSpeakerProjectionMap(conversationAsset);
+
+    expect(projections.get(getId(darius))).toMatchObject({
+      label: 'Darius',
+      title: 'speakerName DariusDefault, speakerId 598cd3f26230355c18000069',
+      variant: 'default',
+    });
+  });
+
   it('projects a single inherited speaker through response branches', () => {
     const conversationAsset = createConversation('K:/Mods/Test/conversations');
     const yang = createPromptNode(0);
diff --git a/app/src/utils/known-speakers.ts b/app/src/utils/known-speakers.ts
new file mode 100644
index 0000000..091d492
--- /dev/null
+++ b/app/src/utils/known-speakers.ts
@@ -0,0 +1,78 @@
+export type KnownSpeaker = {
+  id: string;
+  speakerName: string;
+};
+
+const vanillaSpeakers: KnownSpeaker[] = [
+  { id: '598cd3a06230355c18000067', speakerName: 'SumireDefault' },
+  { id: '598cd3f26230355c18000069', speakerName: 'DariusDefault' },
+  { id: '598cd3f36230355c1800006a', speakerName: 'YangDefault' },
+  { id: '59b2d103623035d017000033', speakerName: 'MastiffDefault' },
+  { id: '59b2d120623035d017000034', speakerName: 'KameaPrologue' },
+  { id: '59b97d11623035ac14005365', speakerName: 'CentrellaDefault' },
+  { id: '59b97f45623035ac140054ca', speakerName: 'MadeiraDefault' },
+  { id: '59b98a97623035ac140056c6', speakerName: 'FarahDefault' },
+  { id: '59b98aac623035ac140056cf', speakerName: 'VictoriaDefault' },
+  { id: '59b98ab9623035ac140056d9', speakerName: 'EspinosaDefault' },
+  { id: '59b98acf623035ac140056da', speakerName: 'TaurianRepDefault' },
+  { id: '59b9920b623035ac140058c6', speakerName: 'KarosasDefault' },
+  { id: '59baac916230356416000354', speakerName: 'KameaDefault' },
+  { id: '59f8f0296230359c2100082c', speakerName: 'ViewscreenDefault' },
+  { id: '5a3ab9236230353c12005e2b', speakerName: 'GallasDefault' },
+  { id: '5a6aa38b623035a020000d9d', speakerName: 'MadeiraViewScreen' },
+  { id: '5a6aa41a623035a020000e2a', speakerName: 'KameaViewScreen' },
+  { id: '5a6aa4a8623035a020000ea9', speakerName: 'YangViewScreen' },
+  { id: '5a7de7f0623035101200090e', speakerName: 'FarahViewScreen' },
+  { id: '5b3425306230357423000065', speakerName: 'LiaoRepDefault' },
+  { id: '5b3425ad623035742300007a', speakerName: 'KuritaRepDefault' },
+  { id: '5b3425ad623035742300007b', speakerName: 'SteinerRepDefault' },
+  { id: '5b3425ad623035742300007c', speakerName: 'DavionRepDefault' },
+  { id: '5b3425ae623035742300007d', speakerName: 'MarikRepDefault' },
+  { id: '5b7ee936623035fc0500005f', speakerName: 'FP_theDefector_GakuDefault' },
+  { id: '5b8730c0623035181e000163', speakerName: 'FP_Greed_BorisDefault' },
+  { id: '5b98058a623035c01b000bf4', speakerName: 'FP_justinAllard_GarrilacDefault' },
+  { id: '5b98058a623035c01b000bf5', speakerName: 'FP_justinAllard_AllardDefault' },
+  { id: '5b98652e623035c01b0015a7', speakerName: 'FP_longHunt_LeesDefault' },
+  { id: '5b9aa4d6623035500b0000d8', speakerName: 'FP_morganKell_KellDefault' },
+  { id: '5ba03003623035740a00048b', speakerName: 'FP_gladiator_announcerDefault' },
+  { id: '5ba03003623035740a00048c', speakerName: 'FP_gladiator_SteelBeastDefault' },
+  { id: '5ba185ff623035641e000769', speakerName: 'FP_scoundrel_AyashaDefault' },
+  { id: '5ba51e22623035e81d00004b', speakerName: 'FP_shadowOrg_ContactDefault' },
+  { id: '5ba97256623035400a00009d', speakerName: 'FP_flattenedEarth_SigynDefault' },
+  { id: '5bbfc6c6623035cc1e000137', speakerName: 'FP_morganKell_AelwydDefault' },
+  { id: '5c523bfd623035cc1f000114', speakerName: 'UW_sentinel_InsurgentDefault' },
+  { id: '5c523bff623035cc1f000115', speakerName: 'UW_sentinel_InsurgentWifeDefault' },
+  { id: '5c523c00623035cc1f000116', speakerName: 'UW_succession_DignitaryDefault' },
+  { id: '5c523c01623035cc1f000117', speakerName: 'UW_succession_RedHareDefault' },
+  { id: '5c523c1c623035cc1f000118', speakerName: 'UW_succession_DaughterDefault' },
+  { id: '5c523c23623035cc1f000119', speakerName: 'UW_succession_SonDefault' },
+  { id: '5c524129623035cc1f00016e', speakerName: 'UW_siegebreaker_DamestroirDefault' },
+  { id: '5c524129623035cc1f00016f', speakerName: 'UW_siegebreaker_SteinerOfficerDefault' },
+  { id: '5c524129623035cc1f000170', speakerName: 'UW_redHunter_CarlyleDefault' },
+  { id: '5c524129623035cc1f000171', speakerName: 'UW_redHunter_DESTDefault' },
+  { id: '5c52412a623035cc1f000172', speakerName: 'UW_collateralDamage_LocalRepDefault' },
+  { id: '5c6dde28623035f0190006ee', speakerName: 'UW_urbieDerby_HorvatDefault' },
+  { id: '5c74647d623035583a000190', speakerName: 'UW_urbieDerby_JackhammerDefault' },
+  { id: '5c9580e331663080180000bd', speakerName: 'UW_lastChance_LadyNakanoDefault' },
+  { id: '5c990a9f623035bc1500009e', speakerName: 'UW_thePrize_CorbuDefault' },
+  { id: '5c9d0cf7623035903f000145', speakerName: 'UW_siegebreaker_JailbirdDefault' },
+  { id: '5c9e9af2623035703000015b', speakerName: 'UW_bigScore_WalloDefault' },
+  { id: '5ca24415623035bc1b000060', speakerName: 'UW_lastChance_MariDefault' },
+  { id: '5ca7da12623035f8500001c2', speakerName: 'UW_newJakobstad_ConquerorDefault' },
+  { id: '5ca7da13623035f8500001c3', speakerName: 'UW_newJakobstad_ViscachaDefault' },
+  { id: '5ca7da13623035f8500001c4', speakerName: 'UW_newJakobstad_PeregrineDefault' },
+  { id: '5ca7da13623035f8500001c5', speakerName: 'UW_newJakobstad_OmbraDefault' },
+  { id: '5ca7dd51623035f85000021c', speakerName: 'UW_newJakobstad_DameCatherineDefault' },
+  { id: '5cbe7e0b623035c8450000a6', speakerName: 'UW_urbieDerby_GiganteDefault' },
+  { id: '5cddb94a623035cc110000a8', speakerName: 'HM_SLDFCompDefault' },
+  { id: '5ce599dc623035982f0000da', speakerName: 'HM_BountyHunterDefault' },
+  { id: '5d080458623035f447000128', speakerName: 'HM_BlackWidowDefault' },
+  { id: '5d114cb5623035e45a0002cd', speakerName: 'HM_DronePlatformDefault' },
+  { id: '5d83f3316334363c49000568', speakerName: 'HM_CrimeBossDefault' },
+];
+
+const vanillaSpeakersById = new Map(vanillaSpeakers.map((speaker) => [speaker.id, speaker]));
+
+export function getKnownSpeaker(id: string): KnownSpeaker | null {
+  return vanillaSpeakersById.get(id) || null;
+}
diff --git a/app/src/utils/speaker-projection-utils.ts b/app/src/utils/speaker-projection-utils.ts
index aef4b81..55bf7a8 100644
--- a/app/src/utils/speaker-projection-utils.ts
+++ b/app/src/utils/speaker-projection-utils.ts
@@ -1,5 +1,6 @@
 import type { ConversationAssetType, ElementNodeType, PromptNodeType } from 'types';
 import { getId } from './conversation-utils';
+import { getKnownSpeaker } from './known-speakers';
 
 export type SpeakerProjectionVariant = 'default' | 'multiple';
 
@@ -44,16 +45,34 @@ export function formatSpeakerIdLabel(speakerId: string): string {
   );
 }
 
+function getSpeakerDisplayName(speaker: SpeakerReference): string {
+  if (speaker.type === 'speakerId') {
+    const knownSpeaker = getKnownSpeaker(speaker.id);
+    if (knownSpeaker != null) return formatSpeakerIdLabel(knownSpeaker.speakerName);
+  }
+
+  return formatSpeakerIdLabel(speaker.id);
+}
+
+function getSpeakerSourceLabel(speaker: SpeakerReference): string {
+  if (speaker.type === 'speakerId') {
+    const knownSpeaker = getKnownSpeaker(speaker.id);
+    if (knownSpeaker != null) return `speakerName ${knownSpeaker.speakerName}, speakerId ${speaker.id}`;
+  }
+
+  return `${speaker.type} ${speaker.id}`;
+}
+
 function formatSpeakerName(speaker: SpeakerReference | null): string {
   if (speaker == null) return 'unknown inherited speaker';
 
-  return formatSpeakerIdLabel(speaker.id);
+  return getSpeakerDisplayName(speaker);
 }
 
 function formatSpeakerTitle(speaker: SpeakerReference | null): string {
   if (speaker == null) return 'unknown inherited speaker';
 
-  return `${formatSpeakerName(speaker)} (${speaker.type} ${speaker.id})`;
+  return `${formatSpeakerName(speaker)} (${getSpeakerSourceLabel(speaker)})`;
 }
 
 function getExplicitSpeaker(node: PromptNodeType): SpeakerReference | null {
@@ -84,7 +103,7 @@ function buildSingleProjection(speaker: SpeakerReference | null, isExplicit: boo
   const label = formatSpeakerName(speaker);
   return {
     label,
-    title: isExplicit ? `${speaker.type} ${speaker.id}` : `Projected speaker: ${formatSpeakerTitle(speaker)}`,
+    title: isExplicit ? getSpeakerSourceLabel(speaker) : `Projected speaker: ${formatSpeakerTitle(speaker)}`,
     variant: 'default',
   };
 }
diff --git a/app/tsconfig.json b/app/tsconfig.json
index 3d6dab2..23e171e 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -13,7 +13,7 @@
        "allowJs": true,
        "isolatedModules": true,
        "noEmit": true,
-       "jsx": "react", // change to "react-jsx" when upgrading to React 18
+       "jsx": "react-jsx",
        "paths": {
          "components/*": ["./src/components/*"],
          "containers/*": ["./src/containers/*"],
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 05ea673..5253579 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -64,24 +64,16 @@ export default defineConfig({
     global: 'globalThis',
   },
   resolve: {
-    alias: [
-      {
-        find: /^react-sortable-tree$/,
-        replacement: path.resolve(__dirname, 'node_modules/react-sortable-tree/dist/index.cjs.js'),
-      },
-      {
-        find: /^react-virtualized$/,
-        replacement: path.resolve(__dirname, 'node_modules/react-virtualized/dist/commonjs/index.js'),
-      },
-      { find: 'components', replacement: path.resolve(__dirname, 'src/components/') },
-      { find: 'containers', replacement: path.resolve(__dirname, 'src/containers/') },
-      { find: 'services', replacement: path.resolve(__dirname, 'src/services/') },
-      { find: 'hooks', replacement: path.resolve(__dirname, 'src/hooks/') },
-      { find: 'stores', replacement: path.resolve(__dirname, 'src/stores/') },
-      { find: 'utils', replacement: path.resolve(__dirname, 'src/utils/') },
-      { find: 'types', replacement: path.resolve(__dirname, 'src/types/') },
-      { find: 'package.json', replacement: path.resolve(__dirname, 'package.json') },
-    ],
+    alias: {
+      components: path.resolve(__dirname, 'src/components'),
+      containers: path.resolve(__dirname, 'src/containers'),
+      services: path.resolve(__dirname, 'src/services'),
+      hooks: path.resolve(__dirname, 'src/hooks'),
+      stores: path.resolve(__dirname, 'src/stores'),
+      utils: path.resolve(__dirname, 'src/utils'),
+      types: path.resolve(__dirname, 'src/types'),
+      'package.json': path.resolve(__dirname, 'package.json'),
+    },
   },
   server: {
     host: '127.0.0.1',