diff --git a/components.d.ts b/components.d.ts
index 49ad7c9bc9..65afaf4310 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,7 +17,6 @@ declare module 'vue' {
     AppBtnGroup: typeof import('./src/components/ui/AppBtnGroup.vue')['default']
     AppBtnToolheadMove: typeof import('./src/components/ui/AppBtnToolheadMove.vue')['default']
     AppChart: typeof import('./src/components/ui/AppChart.vue')['default']
-    AppCodeView: typeof import('./src/components/ui/AppCodeView.vue')['default']
     AppColorPicker: typeof import('./src/components/ui/AppColorPicker.vue')['default']
     AppColumnPicker: typeof import('./src/components/ui/AppColumnPicker.vue')['default']
     AppDialog: typeof import('./src/components/ui/AppDialog.vue')['default']
@@ -40,6 +39,7 @@ declare module 'vue' {
     AppSetting: typeof import('./src/components/ui/AppSetting.vue')['default']
     AppSettingsNav: typeof import('./src/components/layout/AppSettingsNav.vue')['default']
     AppTextField: typeof import('./src/components/ui/AppTextField.vue')['default']
+    AppTextFieldWithCopy: typeof import('./src/components/ui/AppTextFieldWithCopy.vue')['default']
     AppThumbnailSize: typeof import('./src/components/ui/AppThumbnailSize.vue')['default']
     AppToolsDrawer: typeof import('./src/components/layout/AppToolsDrawer.vue')['default']
     AppUpDownBtnGroup: typeof import('./src/components/ui/AppUpDownBtnGroup.vue')['default']
@@ -51,6 +51,7 @@ declare module 'vue' {
     FlashMessage: typeof import('./src/components/common/FlashMessage.vue')['default']
     KlippyStatusCard: typeof import('./src/components/common/KlippyStatusCard.vue')['default']
     ManualProbeDialog: typeof import('./src/components/common/ManualProbeDialog.vue')['default']
+    PeripheralsDialog: typeof import('./src/components/common/PeripheralsDialog.vue')['default']
     PromiseWrapper: typeof import('./src/components/common/PromiseWrapper.vue')['default']
     RegisterServiceWorker: typeof import('./src/components/common/RegisterServiceWorker.vue')['default']
     RolloverLogsDialog: typeof import('./src/components/common/RolloverLogsDialog.vue')['default']
diff --git a/package-lock.json b/package-lock.json
index 70131433b6..651ccf4c38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,21 +10,23 @@
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.0.3",
-        "@fontsource/raleway": "^5.0.16",
-        "@fontsource/roboto": "^5.0.8",
+        "@fontsource/raleway": "^5.0.17",
+        "@fontsource/roboto": "^5.0.12",
         "@irojs/iro-core": "^1.2.1",
         "@jaames/iro": "^5.5.2",
-        "axios": "^1.6.7",
+        "axios": "^1.6.8",
         "consola": "^3.2.3",
         "deepmerge": "^4.3.1",
-        "dompurify": "^3.0.8",
-        "echarts": "^5.4.3",
+        "dompurify": "^3.0.9",
+        "echarts": "^5.5.0",
         "echarts-gl": "^2.0.9",
-        "hls.js": "^1.5.4",
+        "hls.js": "^1.5.7",
         "jwt-decode": "^4.0.0",
         "lodash-es": "^4.17.21",
+        "marked": "^12.0.1",
+        "marked-base-url": "^1.1.3",
         "md5": "^2.3.0",
-        "monaco-editor": "^0.46.0",
+        "monaco-editor": "^0.47.0",
         "monaco-editor-textmate": "^4.0.0",
         "monaco-textmate": "^3.0.1",
         "onigasm": "^2.2.5",
@@ -37,7 +39,7 @@
         "uuid": "^9.0.1",
         "vue": "^2.7.16",
         "vue-class-component": "^7.2.6",
-        "vue-echarts": "^6.6.8",
+        "vue-echarts": "^6.6.9",
         "vue-i18n": "^8.28.2",
         "vue-inline-svg": "^2.1.3",
         "vue-json-viewer": "^2.2.22",
@@ -46,7 +48,7 @@
         "vue-router": "^3.6.5",
         "vue-virtual-scroller": "^1.1.2",
         "vue2-touch-events": "^3.2.3",
-        "vuetify": "^2.7.1",
+        "vuetify": "^2.7.2",
         "vuetify-confirm": "^2.0.6",
         "vuex": "^3.6.2"
       },
@@ -57,35 +59,35 @@
         "@types/jsdom": "^21.1.6",
         "@types/lodash-es": "^4.17.12",
         "@types/md5": "^2.3.5",
-        "@types/node": "^20.11.17",
-        "@types/semver": "^7.5.7",
-        "@types/sortablejs": "^1.15.7",
+        "@types/node": "^20.11.28",
+        "@types/semver": "^7.5.8",
+        "@types/sortablejs": "^1.15.8",
         "@types/uuid": "^9.0.8",
-        "@typescript-eslint/eslint-plugin": "^6.21.0",
-        "@typescript-eslint/parser": "^6.21.0",
+        "@typescript-eslint/eslint-plugin": "^7.2.0",
+        "@typescript-eslint/parser": "^7.2.0",
         "@vitejs/plugin-vue2": "^2.3.1",
         "@vue/eslint-config-standard": "^8.0.1",
-        "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/test-utils": "^1.3.6",
         "@vue/tsconfig": "~0.1.3",
-        "eslint": "^8.56.0",
-        "eslint-plugin-vue": "^9.21.1",
-        "husky": "^9.0.10",
+        "eslint": "^8.57.0",
+        "eslint-plugin-vue": "^9.23.0",
+        "husky": "^9.0.11",
         "jsdom": "^24.0.0",
         "mockdate": "^3.0.5",
         "monaco-vscode-textmate-theme-converter": "^0.1.7",
-        "rollup": "^4.10.0",
+        "rollup": "^4.13.0",
         "sass": "~1.32.13",
         "shx": "^0.3.4",
-        "skott": "^0.32.1",
+        "skott": "^0.33.2",
         "standard-version": "^9.5.0",
-        "typescript": "^5.3.3",
+        "typescript": "^5.4.2",
         "unplugin-vue-components": "^0.26.0",
-        "vite": "^5.1.1",
+        "vite": "^5.1.6",
         "vite-plugin-checker": "^0.6.4",
         "vite-plugin-monaco-editor": "^1.1.0",
-        "vite-plugin-pwa": "^0.18.1",
-        "vitest": "^1.2.2",
+        "vite-plugin-pwa": "^0.19.4",
+        "vitest": "^1.4.0",
         "vue-debounce-decorator": "^1.0.1",
         "vue-i18n-extract": "^2.0.7",
         "vue-template-compiler": "^2.7.16",
@@ -2018,21 +2020,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@effect/data": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@effect/data/-/data-0.4.1.tgz",
-      "integrity": "sha512-FdQ0qbYL7t+GP5eWdAPC+oeN2w3zqnujrdDLp/sj58UtMxFSHg21crprmbmiAJAWsL5EdB9aZzcisBGn382xHg==",
-      "dev": true
-    },
-    "node_modules/@effect/io": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@effect/io/-/io-0.8.0.tgz",
-      "integrity": "sha512-JJUs05oiHzh/Eupf5mgeLRFA4RXJAJo2DNxPC4ZVXwhvgJeqJ/G0ftYo3znOO0vKLzXjw8WYrnXPBM1nYLPnfQ==",
-      "dev": true,
-      "dependencies": {
-        "@effect/data": "~0.4.1"
-      }
-    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.19.8",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz",
@@ -2433,32 +2420,32 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@fontsource/raleway": {
-      "version": "5.0.16",
-      "resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-5.0.16.tgz",
-      "integrity": "sha512-+VNqahWDG31fL4TyeShCfCu5HWyid/Pm2wXH75rjFjJeqWergmkPUAqUzBXjaMIcYqWmFkI6KYzDKWpe2VZiaA=="
+      "version": "5.0.17",
+      "resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-5.0.17.tgz",
+      "integrity": "sha512-JQ86C+y7jSnaxKaqhYX5i6suc7IgUvAkVnP+Z7iWvtrZRl94nXzUU89E84eMq6tCOmbBin/uvtAGfgdJGskT1A=="
     },
     "node_modules/@fontsource/roboto": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.8.tgz",
-      "integrity": "sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA=="
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.12.tgz",
+      "integrity": "sha512-x0o17jvgoSSbS9OZnUX2+xJmVRvVCfeaYJjkS7w62iN7CuJWtMf5vJj8LqgC7ibqIkitOHVW+XssRjgrcHn62g=="
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.13",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
-      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.1",
-        "debug": "^4.1.1",
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
       "engines": {
@@ -2479,9 +2466,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
-      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
+      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
     "node_modules/@hutson/parse-repository-url": {
@@ -3048,9 +3035,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.10.0.tgz",
-      "integrity": "sha512-/MeDQmcD96nVoRumKUljsYOLqfv1YFJps+0pTrb2Z9Nl/w5qNUysMaWQsrd1mvAlNT4yza1iVyIu4Q4AgF6V3A==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+      "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
       "cpu": [
         "arm"
       ],
@@ -3061,9 +3048,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.10.0.tgz",
-      "integrity": "sha512-lvu0jK97mZDJdpZKDnZI93I0Om8lSDaiPx3OiCk0RXn3E8CMPJNS/wxjAvSJJzhhZpfjXsjLWL8LnS6qET4VNQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+      "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
       "cpu": [
         "arm64"
       ],
@@ -3074,9 +3061,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.10.0.tgz",
-      "integrity": "sha512-uFpayx8I8tyOvDkD7X6n0PriDRWxcqEjqgtlxnUA/G9oS93ur9aZ8c8BEpzFmsed1TH5WZNG5IONB8IiW90TQg==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+      "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
       "cpu": [
         "arm64"
       ],
@@ -3087,9 +3074,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.10.0.tgz",
-      "integrity": "sha512-nIdCX03qFKoR/MwQegQBK+qZoSpO3LESurVAC6s6jazLA1Mpmgzo3Nj3H1vydXp/JM29bkCiuF7tDuToj4+U9Q==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+      "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
       "cpu": [
         "x64"
       ],
@@ -3100,9 +3087,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.10.0.tgz",
-      "integrity": "sha512-Fz7a+y5sYhYZMQFRkOyCs4PLhICAnxRX/GnWYReaAoruUzuRtcf+Qnw+T0CoAWbHCuz2gBUwmWnUgQ67fb3FYw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+      "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
       "cpu": [
         "arm"
       ],
@@ -3113,9 +3100,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.10.0.tgz",
-      "integrity": "sha512-yPtF9jIix88orwfTi0lJiqINnlWo6p93MtZEoaehZnmCzEmLL0eqjA3eGVeyQhMtxdV+Mlsgfwhh0+M/k1/V7Q==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+      "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
       "cpu": [
         "arm64"
       ],
@@ -3126,9 +3113,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.10.0.tgz",
-      "integrity": "sha512-9GW9yA30ib+vfFiwjX+N7PnjTnCMiUffhWj4vkG4ukYv1kJ4T9gHNg8zw+ChsOccM27G9yXrEtMScf1LaCuoWQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+      "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
       "cpu": [
         "arm64"
       ],
@@ -3139,9 +3126,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.10.0.tgz",
-      "integrity": "sha512-X1ES+V4bMq2ws5fF4zHornxebNxMXye0ZZjUrzOrf7UMx1d6wMQtfcchZ8SqUnQPPHdOyOLW6fTcUiFgHFadRA==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+      "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
       "cpu": [
         "riscv64"
       ],
@@ -3152,9 +3139,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.10.0.tgz",
-      "integrity": "sha512-w/5OpT2EnI/Xvypw4FIhV34jmNqU5PZjZue2l2Y3ty1Ootm3SqhI+AmfhlUYGBTd9JnpneZCDnt3uNOiOBkMyw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+      "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
       "cpu": [
         "x64"
       ],
@@ -3165,9 +3152,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.10.0.tgz",
-      "integrity": "sha512-q/meftEe3QlwQiGYxD9rWwB21DoKQ9Q8wA40of/of6yGHhZuGfZO0c3WYkN9dNlopHlNT3mf5BPsUSxoPuVQaw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+      "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
       "cpu": [
         "x64"
       ],
@@ -3178,9 +3165,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.10.0.tgz",
-      "integrity": "sha512-NrR6667wlUfP0BHaEIKgYM/2va+Oj+RjZSASbBMnszM9k+1AmliRjHc3lJIiOehtSSjqYiO7R6KLNrWOX+YNSQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+      "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
       "cpu": [
         "arm64"
       ],
@@ -3191,9 +3178,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.10.0.tgz",
-      "integrity": "sha512-FV0Tpt84LPYDduIDcXvEC7HKtyXxdvhdAOvOeWMWbQNulxViH2O07QXkT/FffX4FqEI02jEbCJbr+YcuKdyyMg==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+      "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
       "cpu": [
         "ia32"
       ],
@@ -3204,9 +3191,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.10.0.tgz",
-      "integrity": "sha512-OZoJd+o5TaTSQeFFQ6WjFCiltiYVjIdsXxwu/XZ8qRpsvMQr4UsVrE5UyT9RIvsnuF47DqkJKhhVZ2Q9YW9IpQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+      "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
       "cpu": [
         "x64"
       ],
@@ -3327,9 +3314,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.11.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.17.tgz",
-      "integrity": "sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==",
+      "version": "20.11.28",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.28.tgz",
+      "integrity": "sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -3362,15 +3349,15 @@
       }
     },
     "node_modules/@types/semver": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz",
-      "integrity": "sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==",
+      "version": "7.5.8",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
     "node_modules/@types/sortablejs": {
-      "version": "1.15.7",
-      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.7.tgz",
-      "integrity": "sha512-PvgWCx1Lbgm88FdQ6S7OGvLIjWS66mudKPlfdrWil0TjsO5zmoZmzoKiiwRShs1dwPgrlkr0N4ewuy0/+QUXYQ==",
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
@@ -3392,16 +3379,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
-      "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.2.0.tgz",
+      "integrity": "sha512-mdekAHOqS9UjlmyF/LSs6AIEvfceV749GFxoBAjwAv0nkevfKHWQFDMcBZWUiIC5ft6ePWivXoS36aKQ0Cy3sw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/type-utils": "6.21.0",
-        "@typescript-eslint/utils": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
+        "@typescript-eslint/scope-manager": "7.2.0",
+        "@typescript-eslint/type-utils": "7.2.0",
+        "@typescript-eslint/utils": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -3417,8 +3404,8 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
-        "eslint": "^7.0.0 || ^8.0.0"
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3427,15 +3414,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
-      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
+      "integrity": "sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
+        "@typescript-eslint/scope-manager": "7.2.0",
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/typescript-estree": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -3446,7 +3433,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3455,13 +3442,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
-      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.2.0.tgz",
+      "integrity": "sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0"
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -3472,13 +3459,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
-      "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.2.0.tgz",
+      "integrity": "sha512-xHi51adBHo9O9330J8GQYQwrKBqbIPJGZZVQTHHmy200hvkLZFWJIFtAG/7IYTWUyun6DE6w5InDReePJYJlJA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "@typescript-eslint/utils": "6.21.0",
+        "@typescript-eslint/typescript-estree": "7.2.0",
+        "@typescript-eslint/utils": "7.2.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -3490,7 +3477,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3499,9 +3486,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
-      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -3512,13 +3499,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
-      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.2.0.tgz",
+      "integrity": "sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/visitor-keys": "7.2.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -3564,17 +3551,17 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
-      "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.2.0.tgz",
+      "integrity": "sha512-YfHpnMAGb1Eekpm3XRK8hcMwGLGsnT6L+7b2XyRv6ouDuJU1tZir1GS2i0+VXRatMwSI1/UfcyPe53ADkU+IuA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/scope-manager": "7.2.0",
+        "@typescript-eslint/types": "7.2.0",
+        "@typescript-eslint/typescript-estree": "7.2.0",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -3585,16 +3572,16 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
-      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
+      "integrity": "sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/types": "7.2.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -3625,13 +3612,13 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.2.2.tgz",
-      "integrity": "sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.4.0.tgz",
+      "integrity": "sha512-Jths0sWCJZ8BxjKe+p+eKsoqev1/T8lYcrjavEaz8auEJ4jAVY0GwW3JKmdVU4mmNPLPHixh4GNXP7GFtAiDHA==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "1.2.2",
-        "@vitest/utils": "1.2.2",
+        "@vitest/spy": "1.4.0",
+        "@vitest/utils": "1.4.0",
         "chai": "^4.3.10"
       },
       "funding": {
@@ -3639,12 +3626,12 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.2.2.tgz",
-      "integrity": "sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.4.0.tgz",
+      "integrity": "sha512-EDYVSmesqlQ4RD2VvWo3hQgTJ7ZrFQ2VSJdfiJiArkCerDAGeyF1i6dHkmySqk573jLp6d/cfqCN+7wUB5tLgg==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "1.2.2",
+        "@vitest/utils": "1.4.0",
         "p-limit": "^5.0.0",
         "pathe": "^1.1.1"
       },
@@ -3680,9 +3667,9 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.2.2.tgz",
-      "integrity": "sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.4.0.tgz",
+      "integrity": "sha512-saAFnt5pPIA5qDGxOHxJ/XxhMFKkUSBJmVt5VgDsAqPTX6JP326r5C/c9UuCMPoXNzuudTPsYDZCoJ5ilpqG2A==",
       "dev": true,
       "dependencies": {
         "magic-string": "^0.30.5",
@@ -3694,9 +3681,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.2.2.tgz",
-      "integrity": "sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.4.0.tgz",
+      "integrity": "sha512-Ywau/Qs1DzM/8Uc+yA77CwSegizMlcgTJuYGAi0jujOteJOUf1ujunHThYo243KG9nAyWT3L9ifPYZ5+As/+6Q==",
       "dev": true,
       "dependencies": {
         "tinyspy": "^2.2.0"
@@ -3706,9 +3693,9 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.2.2.tgz",
-      "integrity": "sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-mx3Yd1/6e2Vt/PUC98DcqTirtfxUyAZ32uK82r8rZzbtBeBo+nqgnjx/LvqQdWsrvNtm14VmurNgcf4nqY5gJg==",
       "dev": true,
       "dependencies": {
         "diff-sequences": "^29.6.3",
@@ -3822,22 +3809,22 @@
       }
     },
     "node_modules/@vue/eslint-config-typescript": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-12.0.0.tgz",
-      "integrity": "sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-13.0.0.tgz",
+      "integrity": "sha512-MHh9SncG/sfqjVqjcuFLOLD6Ed4dRAis4HNt0dXASeAuLqIAx4YMB1/m2o4pUKK1vCt8fUvYG8KKX2Ot3BVZTg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.7.0",
-        "@typescript-eslint/parser": "^6.7.0",
+        "@typescript-eslint/eslint-plugin": "^7.1.1",
+        "@typescript-eslint/parser": "^7.1.1",
         "vue-eslint-parser": "^9.3.1"
       },
       "engines": {
-        "node": "^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
+        "eslint": "^8.56.0",
         "eslint-plugin-vue": "^9.0.0",
-        "typescript": "*"
+        "typescript": ">=4.7.4"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -4285,11 +4272,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -6273,9 +6260,9 @@
       "dev": true
     },
     "node_modules/dompurify": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.8.tgz",
-      "integrity": "sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ=="
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.9.tgz",
+      "integrity": "sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ=="
     },
     "node_modules/dot-object": {
       "version": "2.1.4",
@@ -6392,12 +6379,12 @@
       "dev": true
     },
     "node_modules/echarts": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
-      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.4.4"
+        "zrender": "5.5.0"
       }
     },
     "node_modules/echarts-gl": {
@@ -6463,6 +6450,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/effect": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/effect/-/effect-2.4.0.tgz",
+      "integrity": "sha512-HAtFVAbAGYDzfGbrSrX1gzMzXym15zk1+ps72X8W1wdZY0vxq+u23w8u9DhAZjiJPHT4W9ZYL7QWQqpP4t+dSg==",
+      "dev": true
+    },
     "node_modules/ejs": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
@@ -6663,16 +6656,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -6947,16 +6940,16 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.21.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.21.1.tgz",
-      "integrity": "sha512-XVtI7z39yOVBFJyi8Ljbn7kY9yHzznKXL02qQYn+ta63Iy4A9JFBw6o4OSB9hyD2++tVT+su9kQqetUyCCwhjw==",
+      "version": "9.23.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.23.0.tgz",
+      "integrity": "sha512-Bqd/b7hGYGrlV+wP/g77tjyFmp81lh5TMw0be9093X02SyelxRRfCI6/IsGq/J7Um0YwB9s0Ry0wlFyjPdmtUw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
         "nth-check": "^2.1.1",
-        "postcss-selector-parser": "^6.0.13",
-        "semver": "^7.5.4",
+        "postcss-selector-parser": "^6.0.15",
+        "semver": "^7.6.0",
         "vue-eslint-parser": "^9.4.2",
         "xml-name-validator": "^4.0.0"
       },
@@ -7415,9 +7408,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -8431,9 +8424,9 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.4.tgz",
-      "integrity": "sha512-MB+e+tcBl+A/EamWvsvx7d/3m9JOLi3wbLaXyZdHlscgXkhiX5zajJxnt7lzn/w9ONxs5qaFTp/kkIMI9fD4KA=="
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.7.tgz",
+      "integrity": "sha512-Hnyf7ojTBtXHeOW1/t6wCBJSiK1WpoKF9yg7juxldDx8u3iswrkPt2wbOA/1NiwU4j27DSIVoIEJRAhcdMef/A=="
     },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
@@ -8525,9 +8518,9 @@
       }
     },
     "node_modules/husky": {
-      "version": "9.0.10",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.10.tgz",
-      "integrity": "sha512-TQGNknoiy6bURzIO77pPRu+XHi6zI7T93rX+QnJsoYFf3xdjKOur+IlfqzJGMHIK/wXrLg+GsvMs8Op7vI2jVA==",
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
+      "integrity": "sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==",
       "dev": true,
       "bin": {
         "husky": "bin.mjs"
@@ -9691,6 +9684,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/marked": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.1.tgz",
+      "integrity": "sha512-Y1/V2yafOcOdWQCX0XpAKXzDakPOpn6U0YLxTJs3cww6VxOzZV1BTOOYWLvH3gX38cq+iLwljHHTnMtlDfg01Q==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/marked-base-url": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/marked-base-url/-/marked-base-url-1.1.3.tgz",
+      "integrity": "sha512-KuQV8EIR/RCdov4KPcw7hdMaugxoKGx8kYprsOhNMwLybX+OqZNRSOMwmjS9Bdyj+i+e/fg5/RkDMS6PMzG7rQ==",
+      "peerDependencies": {
+        "marked": ">= 4 < 13"
+      }
+    },
     "node_modules/matchit": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/matchit/-/matchit-1.1.0.tgz",
@@ -10081,9 +10093,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.46.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.46.0.tgz",
-      "integrity": "sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ=="
+      "version": "0.47.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.47.0.tgz",
+      "integrity": "sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw=="
     },
     "node_modules/monaco-editor-textmate": {
       "version": "4.0.0",
@@ -10799,9 +10811,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -11425,9 +11437,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.10.0.tgz",
-      "integrity": "sha512-t2v9G2AKxcQ8yrG+WGxctBes1AomT0M4ND7jTFBCVPXQ/WFTvNSefIrNSmLKhIKBrvN8SG+CZslimJcT3W2u2g==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+      "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -11440,19 +11452,19 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.10.0",
-        "@rollup/rollup-android-arm64": "4.10.0",
-        "@rollup/rollup-darwin-arm64": "4.10.0",
-        "@rollup/rollup-darwin-x64": "4.10.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.10.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.10.0",
-        "@rollup/rollup-linux-arm64-musl": "4.10.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.10.0",
-        "@rollup/rollup-linux-x64-gnu": "4.10.0",
-        "@rollup/rollup-linux-x64-musl": "4.10.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.10.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.10.0",
-        "@rollup/rollup-win32-x64-msvc": "4.10.0",
+        "@rollup/rollup-android-arm-eabi": "4.13.0",
+        "@rollup/rollup-android-arm64": "4.13.0",
+        "@rollup/rollup-darwin-arm64": "4.13.0",
+        "@rollup/rollup-darwin-x64": "4.13.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+        "@rollup/rollup-linux-arm64-musl": "4.13.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+        "@rollup/rollup-linux-x64-gnu": "4.13.0",
+        "@rollup/rollup-linux-x64-musl": "4.13.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+        "@rollup/rollup-win32-x64-msvc": "4.13.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -11766,19 +11778,18 @@
       "dev": true
     },
     "node_modules/skott": {
-      "version": "0.32.1",
-      "resolved": "https://registry.npmjs.org/skott/-/skott-0.32.1.tgz",
-      "integrity": "sha512-r1X49+6Xnf5ahzf0KwoezYvyU97mo/K0tcUaIIUPaNNCG5epYxllnMZmo+XdmWmuxfk4jKcY+C5jz6Uwq69iAA==",
+      "version": "0.33.2",
+      "resolved": "https://registry.npmjs.org/skott/-/skott-0.33.2.tgz",
+      "integrity": "sha512-rldgmK7z8jObQs+axbvfmhQpWQ754GSKoCB51qot/k+KP9GOVGHr3vkUv0py6PcH6EPN54YggxvaCHd8mojG1g==",
       "dev": true,
       "dependencies": {
-        "@effect/data": "^0.4.1",
-        "@effect/io": "^0.8.0",
         "@parcel/watcher": "^2.3.0",
-        "@typescript-eslint/typescript-estree": "^6.7.4",
+        "@typescript-eslint/typescript-estree": "7.2.0",
         "commander": "^11.0.0",
         "compression": "^1.7.4",
         "depcheck": "^1.4.3",
         "digraph-js": "^2.2.3",
+        "effect": "2.4.0",
         "estree-walker": "^3.0.3",
         "fp-ts": "2.5.0",
         "fs-tree-structure": "0.0.5",
@@ -11795,7 +11806,7 @@
         "polka": "^0.5.2",
         "sirv": "^2.0.3",
         "skott-webapp": "^2.1.1",
-        "typescript": "^5.2.2"
+        "typescript": "5.2.2"
       },
       "bin": {
         "skott": "dist/bin/cli.js"
@@ -11852,6 +11863,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/skott/node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -12303,17 +12327,23 @@
       }
     },
     "node_modules/strip-literal": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
-      "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.0.0.tgz",
+      "integrity": "sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.10.0"
+        "js-tokens": "^8.0.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-8.0.3.tgz",
+      "integrity": "sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==",
+      "dev": true
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12464,9 +12494,9 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.0.tgz",
-      "integrity": "sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -12702,9 +12732,9 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -13007,9 +13037,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.1.tgz",
-      "integrity": "sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz",
+      "integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
@@ -13062,9 +13092,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.2.2.tgz",
-      "integrity": "sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.4.0.tgz",
+      "integrity": "sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
@@ -13200,9 +13230,9 @@
       }
     },
     "node_modules/vite-plugin-pwa": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.18.1.tgz",
-      "integrity": "sha512-2A3BF52l9F8hCkdPy/VP2C+hA+fmBvzJGynCZc9XS6mHTcMvo9046FKc2NqlnkKwTOGtQEwXLEIduML/+eYtdw==",
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.19.4.tgz",
+      "integrity": "sha512-KiEFXaYEj2Hg1it+yECy75oqNmlXimI7BaLx7Sxl7Qsd9EIVxaf3GX1mZdLpHe83pDgHBNwm9USGQxSCNp5m7A==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -13218,24 +13248,29 @@
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
+        "@vite-pwa/assets-generator": "^0.2.4",
         "vite": "^3.1.0 || ^4.0.0 || ^5.0.0",
         "workbox-build": "^7.0.0",
         "workbox-window": "^7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vite-pwa/assets-generator": {
+          "optional": true
+        }
       }
     },
     "node_modules/vitest": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.2.2.tgz",
-      "integrity": "sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.4.0.tgz",
+      "integrity": "sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==",
       "dev": true,
       "dependencies": {
-        "@vitest/expect": "1.2.2",
-        "@vitest/runner": "1.2.2",
-        "@vitest/snapshot": "1.2.2",
-        "@vitest/spy": "1.2.2",
-        "@vitest/utils": "1.2.2",
+        "@vitest/expect": "1.4.0",
+        "@vitest/runner": "1.4.0",
+        "@vitest/snapshot": "1.4.0",
+        "@vitest/spy": "1.4.0",
+        "@vitest/utils": "1.4.0",
         "acorn-walk": "^8.3.2",
-        "cac": "^6.7.14",
         "chai": "^4.3.10",
         "debug": "^4.3.4",
         "execa": "^8.0.1",
@@ -13244,11 +13279,11 @@
         "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
         "std-env": "^3.5.0",
-        "strip-literal": "^1.3.0",
+        "strip-literal": "^2.0.0",
         "tinybench": "^2.5.1",
         "tinypool": "^0.8.2",
         "vite": "^5.0.0",
-        "vite-node": "1.2.2",
+        "vite-node": "1.4.0",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
@@ -13263,8 +13298,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "^1.0.0",
-        "@vitest/ui": "^1.0.0",
+        "@vitest/browser": "1.4.0",
+        "@vitest/ui": "1.4.0",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -13401,9 +13436,9 @@
       "dev": true
     },
     "node_modules/vue-echarts": {
-      "version": "6.6.8",
-      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.6.8.tgz",
-      "integrity": "sha512-3EGrxKGCGjHnkhudRQQ4fkK5iJxxXNQ1fXvSWA/7mzR/oV7BBSHYvC3gDbG/WIW0A/Fcx2H8k5H3NDyWgjyi8g==",
+      "version": "6.6.9",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.6.9.tgz",
+      "integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
       "hasInstallScript": true,
       "dependencies": {
         "resize-detector": "^0.3.0",
@@ -13631,9 +13666,9 @@
       "integrity": "sha512-WgVK0g3rgMuIh8s3WXJlR7jHEmHGpduwRvhSbCfgiN43wqBoHBJNk6oAeL+8FLz7wZVKAxl61RvJHJ4JvgFEfw=="
     },
     "node_modules/vuetify": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.7.1.tgz",
-      "integrity": "sha512-DVFmRsDtYrITw9yuGLwpFWngFYzEgk0KwloDCIV3+vhZw+NBFJOSzdbttbYmOwtqvQlhDxUyIRQolrRbSFAKlg==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.7.2.tgz",
+      "integrity": "sha512-qr04ww7uzAPQbpk751x4fSdjsJ+zREzjQ/rBlcQGuWS6MIMFMXcXcwvp4+/tnGsULZxPMWfQ0kmZmg5Yc/XzgQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/johnleider"
@@ -14458,9 +14493,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
-      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
       "dependencies": {
         "tslib": "2.3.0"
       }
diff --git a/package.json b/package.json
index b9c8bab12b..7436cdbfc1 100644
--- a/package.json
+++ b/package.json
@@ -35,21 +35,23 @@
   "main": "index.js",
   "dependencies": {
     "@ctrl/tinycolor": "^4.0.3",
-    "@fontsource/raleway": "^5.0.16",
-    "@fontsource/roboto": "^5.0.8",
+    "@fontsource/raleway": "^5.0.17",
+    "@fontsource/roboto": "^5.0.12",
     "@irojs/iro-core": "^1.2.1",
     "@jaames/iro": "^5.5.2",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "consola": "^3.2.3",
     "deepmerge": "^4.3.1",
-    "dompurify": "^3.0.8",
-    "echarts": "^5.4.3",
+    "dompurify": "^3.0.9",
+    "echarts": "^5.5.0",
     "echarts-gl": "^2.0.9",
-    "hls.js": "^1.5.4",
+    "hls.js": "^1.5.7",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
+    "marked": "^12.0.1",
+    "marked-base-url": "^1.1.3",
     "md5": "^2.3.0",
-    "monaco-editor": "^0.46.0",
+    "monaco-editor": "^0.47.0",
     "monaco-editor-textmate": "^4.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
@@ -62,7 +64,7 @@
     "uuid": "^9.0.1",
     "vue": "^2.7.16",
     "vue-class-component": "^7.2.6",
-    "vue-echarts": "^6.6.8",
+    "vue-echarts": "^6.6.9",
     "vue-i18n": "^8.28.2",
     "vue-inline-svg": "^2.1.3",
     "vue-json-viewer": "^2.2.22",
@@ -71,7 +73,7 @@
     "vue-router": "^3.6.5",
     "vue-virtual-scroller": "^1.1.2",
     "vue2-touch-events": "^3.2.3",
-    "vuetify": "^2.7.1",
+    "vuetify": "^2.7.2",
     "vuetify-confirm": "^2.0.6",
     "vuex": "^3.6.2"
   },
@@ -82,35 +84,35 @@
     "@types/jsdom": "^21.1.6",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.3.5",
-    "@types/node": "^20.11.17",
-    "@types/semver": "^7.5.7",
-    "@types/sortablejs": "^1.15.7",
+    "@types/node": "^20.11.28",
+    "@types/semver": "^7.5.8",
+    "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "~0.1.3",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.21.1",
-    "husky": "^9.0.10",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "mockdate": "^3.0.5",
     "monaco-vscode-textmate-theme-converter": "^0.1.7",
-    "rollup": "^4.10.0",
+    "rollup": "^4.13.0",
     "sass": "~1.32.13",
     "shx": "^0.3.4",
-    "skott": "^0.32.1",
+    "skott": "^0.33.2",
     "standard-version": "^9.5.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.1",
+    "vite": "^5.1.6",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-pwa": "^0.18.1",
-    "vitest": "^1.2.2",
+    "vite-plugin-pwa": "^0.19.4",
+    "vitest": "^1.4.0",
     "vue-debounce-decorator": "^1.0.1",
     "vue-i18n-extract": "^2.0.7",
     "vue-template-compiler": "^2.7.16",
diff --git a/src/api/httpClientActions.ts b/src/api/httpClientActions.ts
index e2bb6f38b7..6ea9bd3dde 100644
--- a/src/api/httpClientActions.ts
+++ b/src/api/httpClientActions.ts
@@ -170,6 +170,16 @@ export const httpClientActions = {
     }, options)
   },
 
+  serverDatabaseItemDelete<T = unknown> (namespace: string, key: string, options?: AxiosRequestConfig) {
+    return this.delete<{
+      result: {
+        namespace: string,
+        key: string,
+        value: T
+      }
+    }>(`/server/database/item?namespace=${namespace}&key=${key}`, options)
+  },
+
   serverFilesUploadPost (file: File, path: string, root: string, print?: boolean, options?: AxiosRequestConfig) {
     const formData = new FormData()
 
diff --git a/src/api/socketActions.ts b/src/api/socketActions.ts
index 594c63bbe4..31dd8b88cb 100644
--- a/src/api/socketActions.ts
+++ b/src/api/socketActions.ts
@@ -3,6 +3,7 @@ import { Globals, Waits } from '@/globals'
 import type { NotifyOptions } from '@/plugins/socketClient'
 import { consola } from 'consola'
 import type { TimelapseWritableSettings } from '@/store/timelapse/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 const baseEmit = (method: string, options: NotifyOptions) => {
   if (!Vue.$socket) {
@@ -189,6 +190,46 @@ export const SocketActions = {
     )
   },
 
+  async machinePeripheralsUsb () {
+    baseEmit(
+      'machine.peripherals.usb', {
+        dispatch: 'server/onMachinePeripherals',
+        wait: Waits.onMachinePeripheralsUsb
+      }
+    )
+  },
+
+  async machinePeripheralsSerial () {
+    baseEmit(
+      'machine.peripherals.serial', {
+        dispatch: 'server/onMachinePeripherals',
+        wait: Waits.onMachinePeripheralsSerial
+      }
+    )
+  },
+
+  async machinePeripheralsVideo () {
+    baseEmit(
+      'machine.peripherals.video', {
+        dispatch: 'server/onMachinePeripherals',
+        wait: Waits.onMachinePeripheralsVideo
+      }
+    )
+  },
+
+  async machinePeripheralsCanbus (canbusInterface: string) {
+    const wait = `${Waits.onMachinePeripheralsCanbus}/${canbusInterface}`
+    baseEmit(
+      'machine.peripherals.canbus', {
+        dispatch: 'server/onMachinePeripheralsCanbus',
+        params: {
+          interface: canbusInterface
+        },
+        wait
+      }
+    )
+  },
+
   async machineTimelapseSetSettings (settings: Partial<TimelapseWritableSettings>, wait?: string) {
     baseEmit(
       'machine.timelapse.post_settings', {
@@ -704,6 +745,24 @@ export const SocketActions = {
     )
   },
 
+  async serverWebcamsWrite (webcam: WebcamConfig) {
+    baseEmit(
+      'server.webcams.post_item', {
+        params: webcam
+      }
+    )
+  },
+
+  async serverWebcamsDelete (uid: string) {
+    baseEmit(
+      'server.webcams.delete_item', {
+        params: {
+          uid
+        }
+      }
+    )
+  },
+
   async serverSensorsList () {
     baseEmit(
       'server.sensors.list', {
diff --git a/src/components/common/AddInstanceDialog.vue b/src/components/common/AddInstanceDialog.vue
index fc69ac4040..6f9c43483f 100644
--- a/src/components/common/AddInstanceDialog.vue
+++ b/src/components/common/AddInstanceDialog.vue
@@ -4,17 +4,11 @@
     max-width="320"
     :save-button-disabled="!verified"
     :valid.sync="valid"
+    :title="$t('app.general.title.add_printer')"
+    :help-tooltip="$t('app.endpoint.tooltip.endpoint_examples')"
     persistent
     @save="addInstance"
   >
-    <template #title>
-      <span class="focus--text">{{ $t('app.general.title.add_printer') }}</span>
-      <v-spacer />
-      <app-inline-help bottom>
-        <span v-html="$t('app.endpoint.tooltip.endpoint_examples')" />
-      </app-inline-help>
-    </template>
-
     <v-card-text>
       <span v-html="helpTxt" />
 
diff --git a/src/components/common/PeripheralsDialog.vue b/src/components/common/PeripheralsDialog.vue
new file mode 100644
index 0000000000..a91ac538d0
--- /dev/null
+++ b/src/components/common/PeripheralsDialog.vue
@@ -0,0 +1,428 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.system_info.label.devices')"
+    max-width="550"
+    no-actions
+  >
+    <v-toolbar dense>
+      <v-tabs
+        v-model="tab"
+        show-arrows
+      >
+        <v-tab
+          v-for="peripheralGroup in peripheralGroups"
+          :key="peripheralGroup.type"
+        >
+          <div>
+            {{ $filters.startCase(peripheralGroup.type) }}
+            <v-chip
+              small
+              link
+              class="ml-2"
+            >
+              {{ peripheralGroup.count ?? '?' }}
+            </v-chip>
+          </div>
+        </v-tab>
+      </v-tabs>
+
+      <v-spacer />
+
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            fab
+            text
+            small
+            :disabled="!currentPeripheralGroup || hasWaitFor(currentPeripheralGroup)"
+            @click.prevent.stop="handleRefresh()"
+            v-on="on"
+          >
+            <v-icon
+              :class="{ 'spin-alt': currentPeripheralGroup && hasWaitFor(currentPeripheralGroup) }"
+            >
+              $refresh
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t('app.general.btn.refresh') }}</span>
+      </v-tooltip>
+    </v-toolbar>
+
+    <v-card-text class="fill-height">
+      <v-tabs-items
+        v-model="tab"
+        touchless
+      >
+        <v-tab-item
+          v-for="peripheralGroup in peripheralGroups"
+          :key="peripheralGroup.type"
+        >
+          <template v-if="peripheralGroup.count == null">
+            {{ $t('app.system_info.msg.no_devices_searched') }}
+          </template>
+
+          <template v-else-if="peripheralGroup.count == 0">
+            {{ $t('app.system_info.msg.no_devices_found') }}
+
+            <v-alert
+              v-if="peripheralGroup.type === 'can'"
+              type="info"
+              text
+              class="mt-4 mb-0"
+            >
+              <span v-html="$t('app.system_info.msg.canbus_warning')" />
+            </v-alert>
+          </template>
+
+          <template v-else-if="peripheralGroup.type === 'serial'">
+            <v-row
+              v-for="(device, index) in peripherals.serial_devices"
+              :key="index"
+            >
+              <v-col>
+                <v-card outlined>
+                  <v-card-title>{{ device.device_name }}</v-card-title>
+                  <v-card-subtitle>{{ $filters.startCase(device.device_type) }}</v-card-subtitle>
+
+                  <v-card-text>
+                    <v-row>
+                      <v-col>
+                        <app-text-field-with-copy
+                          :value="device.device_path"
+                          label="device_path"
+                          outlined
+                          dense
+                          readonly
+                          hide-details
+                        />
+                      </v-col>
+                    </v-row>
+
+                    <v-row v-if="device.path_by_id">
+                      <v-col>
+                        <app-text-field-with-copy
+                          :value="device.path_by_id"
+                          label="device_path"
+                          outlined
+                          dense
+                          readonly
+                          hide-details
+                        />
+                      </v-col>
+                    </v-row>
+
+                    <v-row v-if="device.path_by_hardware">
+                      <v-col>
+                        <app-text-field-with-copy
+                          :value="device.path_by_hardware"
+                          label="device_path"
+                          outlined
+                          dense
+                          readonly
+                          hide-details
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-card-text>
+
+                  <v-divider />
+
+                  <v-simple-table dense>
+                    <tbody>
+                      <tr>
+                        <th>driver_name</th>
+                        <td>{{ device.driver_name }}</td>
+                      </tr>
+                      <tr v-if="device.usb_location">
+                        <th>usb_location</th>
+                        <td>{{ device.usb_location }}</td>
+                      </tr>
+                    </tbody>
+                  </v-simple-table>
+                </v-card>
+              </v-col>
+            </v-row>
+          </template>
+
+          <template v-else-if="peripheralGroup.type === 'usb'">
+            <v-row
+              v-for="(device, index) in peripherals.usb_devices"
+              :key="index"
+            >
+              <v-col>
+                <v-card outlined>
+                  <v-card-title>{{ device.product ?? $t("app.general.label.unknown") }} ({{ device.vendor_id }}:{{ device.product_id }})</v-card-title>
+                  <v-card-subtitle>{{ device.description ?? $t("app.general.label.unknown") }}</v-card-subtitle>
+
+                  <v-divider />
+
+                  <v-simple-table dense>
+                    <tbody>
+                      <tr>
+                        <th>usb_location</th>
+                        <td>{{ device.usb_location }}</td>
+                      </tr>
+                      <tr v-if="device.manufacturer">
+                        <th>manufacturer</th>
+                        <td>{{ device.manufacturer }}</td>
+                      </tr>
+                      <tr v-if="device.protocol">
+                        <th>protocol</th>
+                        <td>{{ device.protocol }}</td>
+                      </tr>
+                      <tr v-if="device.serial">
+                        <th>serial</th>
+                        <td>{{ device.serial }}</td>
+                      </tr>
+                      <tr v-if="device.class">
+                        <th>class</th>
+                        <td>{{ device.subclass ? `${device.class}, ${device.subclass}` : device.class }}</td>
+                      </tr>
+                    </tbody>
+                  </v-simple-table>
+                </v-card>
+              </v-col>
+            </v-row>
+          </template>
+
+          <template v-else-if="peripheralGroup.type === 'video'">
+            <v-row
+              v-for="(device, index) in peripherals.v4l2_devices"
+              :key="index"
+            >
+              <v-col>
+                <v-card outlined>
+                  <v-card-title>{{ device.camera_name }}</v-card-title>
+                  <v-card-subtitle>{{ device.hardware_bus }}</v-card-subtitle>
+
+                  <v-divider />
+
+                  <v-simple-table dense>
+                    <tbody>
+                      <tr>
+                        <th>device_name</th>
+                        <td>{{ device.device_name }}</td>
+                      </tr>
+                      <tr>
+                        <th>device_path</th>
+                        <td>{{ device.device_path }}</td>
+                      </tr>
+                      <tr v-if="device.path_by_id">
+                        <th>path_by_id</th>
+                        <td>{{ device.path_by_id }}</td>
+                      </tr>
+                      <tr v-if="device.path_by_hardware">
+                        <th>path_by_hardware</th>
+                        <td>{{ device.path_by_hardware }}</td>
+                      </tr>
+                      <tr v-if="device.usb_location">
+                        <th>usb_location</th>
+                        <td>{{ device.usb_location }}</td>
+                      </tr>
+                      <tr
+                        v-for="mode in device.modes"
+                        :key="mode.format"
+                      >
+                        <th>{{ mode.format }} resoulutions</th>
+                        <td>{{ mode.resolutions.join(", ") }}</td>
+                      </tr>
+                    </tbody>
+                  </v-simple-table>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <v-row
+              v-for="(device, index) in peripherals.libcamera_devices"
+              :key="index"
+            >
+              <v-col>
+                <v-card outlined>
+                  <v-card-title>{{ device.model }}</v-card-title>
+                  <v-card-subtitle>Libcamera</v-card-subtitle>
+
+                  <v-divider />
+
+                  <v-simple-table dense>
+                    <tbody>
+                      <tr>
+                        <th>libcamera_id</th>
+                        <td>{{ device.libcamera_id }}</td>
+                      </tr>
+                      <tr
+                        v-for="mode in device.modes"
+                        :key="mode.format"
+                      >
+                        <th>{{ mode.format }} resoulutions</th>
+                        <td>{{ mode.resolutions.join(", ") }}</td>
+                      </tr>
+                    </tbody>
+                  </v-simple-table>
+                </v-card>
+              </v-col>
+            </v-row>
+          </template>
+
+          <template v-else-if="peripheralGroup.type === 'can'">
+            <v-row
+              v-for="(canUuids, canInterface, index) in canbusUuids"
+              :key="index"
+            >
+              <v-col>
+                <v-card outlined>
+                  <v-card-title>{{ canInterface }}</v-card-title>
+
+                  <v-divider />
+
+                  <v-card-text>
+                    <v-row
+                      v-for="(canUuid, index2) in canUuids"
+                      :key="index2"
+                    >
+                      <v-col>
+                        <app-text-field-with-copy
+                          :value="canUuid.uuid"
+                          :label="canUuid.application"
+                          outlined
+                          dense
+                          readonly
+                          hide-details
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+          </template>
+        </v-tab-item>
+      </v-tabs-items>
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, VModel, Mixins } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import { SocketActions } from '@/api/socketActions'
+import type { CanbusUuid, Peripherals, SystemInfo } from '@/store/server/types'
+
+type PeripheralType = 'serial' | 'usb' | 'video' | 'can'
+
+type PeripheralGroup = {
+  type: PeripheralType,
+  count?: number
+}
+
+@Component({})
+export default class ManualProbeDialog extends Mixins(StateMixin) {
+  @VModel({ type: Boolean })
+    open?: boolean
+
+  tab: number | null = null
+
+  get peripherals (): Peripherals {
+    return this.$store.state.server.peripherals as Peripherals
+  }
+
+  get canbusUuids (): Record<string, CanbusUuid[]> | null {
+    return this.$store.state.server.can_uuids as Record<string, CanbusUuid[]> | null
+  }
+
+  get systemInfo (): SystemInfo | null {
+    return this.$store.state.server.system_info as SystemInfo | null
+  }
+
+  get canbusInterfaces (): string[] {
+    return Object.keys(this.systemInfo?.canbus ?? {})
+  }
+
+  get peripheralGroups (): PeripheralGroup[] {
+    const peripheralGroups: PeripheralGroup[] = [
+      {
+        type: 'serial',
+        count: this.peripherals.serial_devices?.length
+      },
+      {
+        type: 'usb',
+        count: this.peripherals.usb_devices?.length
+      },
+      {
+        type: 'video',
+        count: (
+          this.peripherals.v4l2_devices && this.peripherals.libcamera_devices
+            ? this.peripherals.v4l2_devices.length + this.peripherals.libcamera_devices.length
+            : undefined
+        )
+      }
+    ]
+
+    if (this.canbusInterfaces.length > 0) {
+      peripheralGroups.push({
+        type: 'can',
+        count: this.canbusUuids
+          ? Object.values(this.canbusUuids)
+            .reduce((a, b) => a + b.length, 0)
+          : undefined
+      })
+    }
+
+    return peripheralGroups
+  }
+
+  get currentPeripheralGroup (): PeripheralGroup | false {
+    return this.tab != null && this.peripheralGroups[this.tab]
+  }
+
+  hasWaitFor (peripheralGroup: PeripheralGroup) {
+    switch (peripheralGroup.type) {
+      case 'serial':
+        return this.hasWait(this.$waits.onMachinePeripheralsSerial)
+
+      case 'usb':
+        return this.hasWait(this.$waits.onMachinePeripheralsUsb)
+
+      case 'video':
+        return this.hasWait(this.$waits.onMachinePeripheralsVideo)
+
+      case 'can':
+        return this.hasWaitsBy(`${this.$waits.onMachinePeripheralsCanbus}/`)
+    }
+  }
+
+  handleRefresh () {
+    const currentPeripheralGroup = this.currentPeripheralGroup
+
+    if (currentPeripheralGroup) {
+      switch (currentPeripheralGroup.type) {
+        case 'serial':
+          SocketActions.machinePeripheralsSerial()
+          break
+
+        case 'usb':
+          SocketActions.machinePeripheralsUsb()
+          break
+
+        case 'video':
+          SocketActions.machinePeripheralsVideo()
+          break
+
+        case 'can':
+          for (const canbusInterface in this.canbusInterfaces) {
+            SocketActions.machinePeripheralsCanbus(canbusInterface)
+          }
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  :deep(.v-expansion-panel::before) {
+    box-shadow: none;
+  }
+</style>
diff --git a/src/components/common/ScrewsTiltAdjustDialog.vue b/src/components/common/ScrewsTiltAdjustDialog.vue
index 7330207801..ab3af1c3d5 100644
--- a/src/components/common/ScrewsTiltAdjustDialog.vue
+++ b/src/components/common/ScrewsTiltAdjustDialog.vue
@@ -5,7 +5,7 @@
     max-width="500"
     @save="retry"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <v-simple-table>
         <thead>
           <tr>
@@ -54,7 +54,7 @@
           </tr>
         </tbody>
       </v-simple-table>
-    </div>
+    </v-card-text>
 
     <template #actions>
       <v-spacer />
diff --git a/src/components/settings/GeneralSettings.vue b/src/components/settings/GeneralSettings.vue
index 214f40d258..ae31ef875f 100644
--- a/src/components/settings/GeneralSettings.vue
+++ b/src/components/settings/GeneralSettings.vue
@@ -66,9 +66,7 @@
 
       <v-divider />
 
-      <app-setting
-        :title="$t('app.setting.label.confirm_on_estop')"
-      >
+      <app-setting :title="$t('app.setting.label.confirm_on_estop')">
         <v-switch
           v-model="confirmOnEstop"
           hide-details
@@ -79,9 +77,7 @@
 
       <v-divider />
 
-      <app-setting
-        :title="$t('app.setting.label.show_upload_and_print')"
-      >
+      <app-setting :title="$t('app.setting.label.show_upload_and_print')">
         <v-switch
           v-model="showUploadAndPrint"
           hide-details
@@ -92,9 +88,7 @@
 
       <v-divider />
 
-      <app-setting
-        :title="$t('app.setting.label.power_toggle_in_top_nav')"
-      >
+      <app-setting :title="$t('app.setting.label.power_toggle_in_top_nav')">
         <v-select
           v-model="topNavPowerToggle"
           filled
@@ -107,9 +101,7 @@
 
       <v-divider />
 
-      <app-setting
-        :title="$t('app.setting.label.confirm_on_power_device_change')"
-      >
+      <app-setting :title="$t('app.setting.label.confirm_on_power_device_change')">
         <v-switch
           v-model="confirmOnPowerDeviceChange"
           hide-details
@@ -120,9 +112,7 @@
 
       <v-divider />
 
-      <app-setting
-        :title="$t('app.setting.label.show_save_config_and_restart')"
-      >
+      <app-setting :title="$t('app.setting.label.show_save_config_and_restart')">
         <v-switch
           v-model="showSaveConfigAndRestart"
           hide-details
@@ -134,9 +124,7 @@
       <template v-if="showSaveConfigAndRestart">
         <v-divider />
 
-        <app-setting
-          :title="$t('app.setting.label.confirm_on_save_config_and_restart')"
-        >
+        <app-setting :title="$t('app.setting.label.confirm_on_save_config_and_restart')">
           <v-switch
             v-model="confirmOnSaveConfigAndRestart"
             hide-details
@@ -149,9 +137,7 @@
       <template v-if="showSaveConfigAndRestart && confirmOnSaveConfigAndRestart">
         <v-divider />
 
-        <app-setting
-          :title="$t('app.setting.label.sections_to_ignore_pending_configuration_changes')"
-        >
+        <app-setting :title="$t('app.setting.label.sections_to_ignore_pending_configuration_changes')">
           <v-combobox
             v-model="sectionsToIgnorePendingConfigurationChanges"
             :items="['bed_mesh default', 'bed_tilt']"
@@ -169,9 +155,7 @@
 
       <v-divider />
 
-      <app-setting
-        :title="$t('app.setting.label.print_in_progress_layout')"
-      >
+      <app-setting :title="$t('app.setting.label.print_in_progress_layout')">
         <v-select
           v-model="printInProgressLayout"
           filled
@@ -183,6 +167,44 @@
 
       <v-divider />
 
+      <app-setting
+        :title="$t('app.setting.label.print_progress_calculation')"
+        :sub-title="$t('app.setting.tooltip.average_calculation')"
+      >
+        <v-select
+          v-model="printProgressCalculation"
+          multiple
+          filled
+          dense
+          hide-details="auto"
+          :rules="[
+            $rules.lengthGreaterThanOrEqual(1),
+          ]"
+          :items="availablePrintProgressCalculation"
+        />
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.setting.label.print_eta_calculation')"
+        :sub-title="$t('app.setting.tooltip.average_calculation')"
+      >
+        <v-select
+          v-model="printEtaCalculation"
+          multiple
+          filled
+          dense
+          hide-details="auto"
+          :rules="[
+            $rules.lengthGreaterThanOrEqual(1),
+          ]"
+          :items="availablePrintEtaCalculation"
+        />
+      </app-setting>
+
+      <v-divider />
+
       <app-setting
         :title="$t('app.setting.label.enable_diagnostics')"
         :sub-title="$t('app.setting.tooltip.diagnostics_performance')"
@@ -204,7 +226,7 @@ import type { VInput } from '@/types'
 import { SupportedLocales, DateFormats, TimeFormats } from '@/globals'
 import type { OutputPin } from '@/store/printer/types'
 import type { Device } from '@/store/power/types'
-import type { PrintInProgressLayout } from '@/store/config/types'
+import type { PrintEtaCalculation, PrintInProgressLayout, PrintProgressCalculation } from '@/store/config/types'
 
 @Component({
   components: {}
@@ -412,6 +434,56 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     ]
   }
 
+  get availablePrintProgressCalculation () {
+    return [
+      {
+        value: 'file',
+        text: this.$t('app.setting.timer_options.file')
+      },
+      {
+        value: 'slicer',
+        text: this.$t('app.setting.timer_options.slicer_m73')
+      }
+    ]
+  }
+
+  get printProgressCalculation () {
+    return this.$store.state.config.uiSettings.general.printProgressCalculation as PrintProgressCalculation
+  }
+
+  set printProgressCalculation (value: string) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.printProgressCalculation',
+      value,
+      server: true
+    })
+  }
+
+  get availablePrintEtaCalculation () {
+    return [
+      {
+        value: 'file',
+        text: this.$t('app.setting.timer_options.file')
+      },
+      {
+        value: 'slicer',
+        text: this.$t('app.setting.timer_options.slicer')
+      }
+    ]
+  }
+
+  get printEtaCalculation () {
+    return this.$store.state.config.uiSettings.general.printEtaCalculation as PrintEtaCalculation[]
+  }
+
+  set printEtaCalculation (value: PrintEtaCalculation[]) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.printEtaCalculation',
+      value,
+      server: true
+    })
+  }
+
   get enableDiagnostics () {
     return this.$store.state.config.uiSettings.general.enableDiagnostics
   }
diff --git a/src/components/settings/SpoolmanSettings.vue b/src/components/settings/SpoolmanSettings.vue
index 71443d571d..708c7208b3 100644
--- a/src/components/settings/SpoolmanSettings.vue
+++ b/src/components/settings/SpoolmanSettings.vue
@@ -95,7 +95,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import { defaultState } from '@/store/config/state'
 import StateMixin from '@/mixins/state'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 @Component({
   components: {}
@@ -113,11 +113,22 @@ export default class SpoolmanSettings extends Mixins(StateMixin) {
     })
   }
 
-  get supportedCameras () {
+  get enabledWebcams (): WebcamConfig[] {
+    return this.$store.getters['webcams/getEnabledWebcams'] as WebcamConfig[]
+  }
+
+  get supportedCameras (): Array<{ text?: string, value: string | null, disabled?: boolean }> {
     return [
-      { text: this.$tc('app.setting.label.none', 0), value: null },
-      ...this.$store.getters['cameras/getEnabledCameras']
-        .map((camera: CameraConfig) => ({ text: camera.name, value: camera.id, disabled: !camera.enabled || camera.service === 'iframe' }))
+      {
+        text: this.$tc('app.setting.label.none'),
+        value: null
+      },
+      ...this.enabledWebcams
+        .map(camera => ({
+          text: camera.name,
+          value: camera.uid,
+          disabled: camera.service === 'iframe'
+        }))
     ]
   }
 
diff --git a/src/components/settings/ThemeSettings.vue b/src/components/settings/ThemeSettings.vue
index f169780fad..710eaf8411 100644
--- a/src/components/settings/ThemeSettings.vue
+++ b/src/components/settings/ThemeSettings.vue
@@ -45,9 +45,8 @@
 
         <app-color-picker
           v-if="theme"
-          :primary="themeColor"
+          v-model="themeColor"
           :title="$t('app.setting.btn.select_theme')"
-          @change="handleChangeThemeColor"
         />
       </app-setting>
 
@@ -79,7 +78,6 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import { IroColor } from '@irojs/iro-core'
 import type { ThemePreset, ThemeConfig } from '@/store/config/types'
 import ThemePicker from '../ui/AppColorPicker.vue'
 
@@ -116,12 +114,10 @@ export default class ThemeSettings extends Mixins(StateMixin) {
     return this.theme.color
   }
 
-  handleChangeThemeColor (value: { channel: string; color: IroColor }) {
-    const color = value.color.hexString
-
-    if (this.theme.color.toLowerCase() !== color.toLowerCase()) {
+  set themeColor (value: string) {
+    if (this.theme.color.toLowerCase() !== value.toLowerCase()) {
       this.updateTheme({
-        color
+        color: value
       })
     }
   }
diff --git a/src/components/settings/VersionSettings.vue b/src/components/settings/VersionSettings.vue
index 7e78a1b5b5..8f323ac59b 100644
--- a/src/components/settings/VersionSettings.vue
+++ b/src/components/settings/VersionSettings.vue
@@ -28,7 +28,7 @@
           outlined
           small
           color="primary"
-          :disabled="isRefreshing"
+          :disabled="isRefreshing || printerPrinting"
           @click="forceCheck()"
         >
           <v-icon
diff --git a/src/components/settings/auth/UserConfigDialog.vue b/src/components/settings/auth/UserConfigDialog.vue
index acad853913..d60e0862b2 100644
--- a/src/components/settings/auth/UserConfigDialog.vue
+++ b/src/components/settings/auth/UserConfigDialog.vue
@@ -6,7 +6,7 @@
     max-width="500"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting :title="$t('app.general.label.name')">
         <v-text-field
           v-model="user.username"
@@ -42,7 +42,7 @@
           ]"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
diff --git a/src/components/settings/auth/UserPasswordDialog.vue b/src/components/settings/auth/UserPasswordDialog.vue
index d3bcbaf33d..5ee1c87b6d 100644
--- a/src/components/settings/auth/UserPasswordDialog.vue
+++ b/src/components/settings/auth/UserPasswordDialog.vue
@@ -7,19 +7,18 @@
     max-width="500"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
-      <v-card-text
-        v-if="error"
-        class="mb-0"
-      >
+    <v-card-text class="pa-0">
+      <template v-if="error">
         <v-alert
           type="error"
           text
-          class="mb-0"
+          class="mx-4 mt-4"
         >
           {{ $t('app.general.msg.wrong_password') }}
         </v-alert>
-      </v-card-text>
+
+        <v-divider />
+      </template>
 
       <app-setting :title="$t('app.general.label.current_password')">
         <v-text-field
@@ -54,7 +53,7 @@
           ]"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
diff --git a/src/components/settings/cameras/CameraConfigDialog.vue b/src/components/settings/cameras/CameraConfigDialog.vue
index 771a30c162..76d8e9df7a 100644
--- a/src/components/settings/cameras/CameraConfigDialog.vue
+++ b/src/components/settings/cameras/CameraConfigDialog.vue
@@ -1,14 +1,14 @@
 <template>
   <app-dialog
     v-model="open"
-    :title="(camera.id != '') ? $t('app.general.label.edit_camera') : $t('app.general.label.add_camera')"
-    :cancel-button-text="camera.source === 'config' ? $t('app.general.btn.close') : $t('app.general.btn.cancel')"
-    :save-button-text="(camera.id !== '') ? $t('app.general.btn.save') : $t('app.general.btn.add')"
+    :title="camera.uid ? $t('app.general.label.edit_camera') : $t('app.general.label.add_camera')"
+    :save-button-text="camera.uid ? $t('app.general.btn.save') : $t('app.general.btn.add')"
     max-width="600"
     :disabled="camera.source === 'config'"
+    :no-actions="camera.source === 'config'"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting :title="$t('app.setting.label.enable')">
         <v-switch
           v-model="camera.enabled"
@@ -36,7 +36,7 @@
 
       <app-setting :title="$t('app.setting.label.camera_flip_x')">
         <v-switch
-          v-model="camera.flipX"
+          v-model="camera.flip_horizontal"
           hide-details
         />
       </app-setting>
@@ -45,7 +45,7 @@
 
       <app-setting :title="$t('app.setting.label.camera_flip_y')">
         <v-switch
-          v-model="camera.flipY"
+          v-model="camera.flip_vertical"
           class="mb-4"
           hide-details
         />
@@ -101,7 +101,7 @@
           :title="$t('app.setting.label.fps_target')"
         >
           <v-text-field
-            v-model.number="camera.targetFps"
+            v-model.number="camera.target_fps"
             class="mt-5"
             filled
             dense
@@ -119,7 +119,7 @@
           :title="$t('app.setting.label.fps_idle_target')"
         >
           <v-text-field
-            v-model.number="camera.targetFpsIdle"
+            v-model.number="camera.target_fps_idle"
             class="mt-5"
             filled
             dense
@@ -133,7 +133,7 @@
 
       <app-setting :title="$t('app.setting.label.camera_url_stream')">
         <v-text-field
-          v-model="camera.urlStream"
+          v-model="camera.stream_url"
           type="url"
           spellcheck="false"
           class="mt-5"
@@ -151,7 +151,7 @@
 
       <app-setting :title="$t('app.setting.label.camera_url_snapshot')">
         <v-text-field
-          v-model="camera.urlSnapshot"
+          v-model="camera.snapshot_url"
           type="url"
           spellcheck="false"
           class="mt-5"
@@ -173,7 +173,7 @@
           :sub-title="$t('app.setting.label.aspect_ratio_format')"
         >
           <v-text-field
-            v-model="camera.aspectRatio"
+            v-model="camera.aspect_ratio"
             spellcheck="false"
             class="mt-5"
             filled
@@ -187,13 +187,13 @@
           />
         </app-setting>
       </template>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop, VModel } from 'vue-property-decorator'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 @Component({})
 export default class CameraConfigDialog extends Vue {
@@ -201,7 +201,7 @@ export default class CameraConfigDialog extends Vue {
     open?: boolean
 
   @Prop({ type: Object, required: true })
-  readonly camera!: CameraConfig
+  readonly camera!: WebcamConfig
 
   handleSave () {
     this.$emit('save', this.camera)
diff --git a/src/components/settings/cameras/CameraSettings.vue b/src/components/settings/cameras/CameraSettings.vue
index c9f0fbce8d..c4524fc9ec 100644
--- a/src/components/settings/cameras/CameraSettings.vue
+++ b/src/components/settings/cameras/CameraSettings.vue
@@ -26,10 +26,10 @@
       </app-setting>
 
       <template v-for="camera in cameras">
-        <v-divider :key="camera.id + '_divider'" />
+        <v-divider :key="`divider-${camera.uid}`" />
 
         <app-setting
-          :key="camera.id"
+          :key="`camera-${camera.uid}`"
           :r-cols="2"
           :sub-title="camera.source === 'config' ? $t('app.general.tooltip.managed_by_moonraker') : undefined"
           @click="handleEditDialog(camera)"
@@ -91,7 +91,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig, NewWebcamConfig } from '@/store/webcams/types'
 import CameraConfigDialog from './CameraConfigDialog.vue'
 import { Globals } from '@/globals'
 
@@ -106,11 +106,11 @@ export default class CameraSettings extends Vue {
     camera: null
   }
 
-  get cameras (): CameraConfig[] {
-    return this.$store.getters['cameras/getCameras']
+  get cameras (): WebcamConfig[] {
+    return this.$store.getters['webcams/getWebcams'] as WebcamConfig[]
   }
 
-  handleEditDialog (camera: CameraConfig) {
+  handleEditDialog (camera: WebcamConfig) {
     this.dialogState = {
       active: true,
       camera: { ...camera }
@@ -118,18 +118,17 @@ export default class CameraSettings extends Vue {
   }
 
   handleAddDialog () {
-    const camera: CameraConfig = {
-      id: '',
+    const camera: NewWebcamConfig = {
       enabled: true,
-      flipX: false,
-      flipY: false,
+      flip_horizontal: false,
+      flip_vertical: false,
       name: '',
       rotation: 0,
       service: 'mjpegstreamer-adaptive',
-      targetFps: 15,
-      targetFpsIdle: 5,
-      urlStream: Globals.DEFAULTS.CAMERA_URL_STREAM,
-      urlSnapshot: Globals.DEFAULTS.CAMERA_URL_SNAPSHOT
+      target_fps: 15,
+      target_fps_idle: 5,
+      stream_url: Globals.DEFAULTS.CAMERA_URL_STREAM,
+      snapshot_url: Globals.DEFAULTS.CAMERA_URL_SNAPSHOT
     }
 
     this.dialogState = {
@@ -138,12 +137,12 @@ export default class CameraSettings extends Vue {
     }
   }
 
-  handleSaveCamera (camera: CameraConfig) {
-    this.$store.dispatch('cameras/updateCamera', camera)
+  handleSaveCamera (camera: WebcamConfig) {
+    this.$store.dispatch('webcams/updateWebcam', camera)
   }
 
-  handleRemoveCamera (camera: CameraConfig) {
-    this.$store.dispatch('cameras/removeCamera', camera)
+  handleRemoveCamera (camera: WebcamConfig) {
+    this.$store.dispatch('webcams/removeWebcam', camera.uid)
   }
 
   get defaultFullscreenAction (): string {
diff --git a/src/components/settings/console/ConsoleFilterDialog.vue b/src/components/settings/console/ConsoleFilterDialog.vue
index 8a18b3d3df..82fbb0e9b4 100644
--- a/src/components/settings/console/ConsoleFilterDialog.vue
+++ b/src/components/settings/console/ConsoleFilterDialog.vue
@@ -5,7 +5,7 @@
     max-width="500"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting
         :title="$t('app.setting.label.enable')"
         :r-cols="8"
@@ -73,7 +73,7 @@
           ]"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
diff --git a/src/components/settings/macros/MacroSettingsDialog.vue b/src/components/settings/macros/MacroSettingsDialog.vue
index cbe87395e4..0a3431c103 100644
--- a/src/components/settings/macros/MacroSettingsDialog.vue
+++ b/src/components/settings/macros/MacroSettingsDialog.vue
@@ -7,7 +7,7 @@
     max-width="480"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting
         :title="$t('app.general.label.alias')"
       >
@@ -50,9 +50,8 @@
           {{ $t('app.setting.btn.reset') }}
         </app-btn>
         <app-color-picker
+          v-model="color"
           :title="$t('app.general.btn.set_color')"
-          :primary="color"
-          @change="handleColorChange"
         />
       </app-setting>
 
@@ -96,14 +95,13 @@
           hide-details
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
 <script lang="ts">
 import type { Macro } from '@/store/macros/types'
 import { Component, Vue, Prop, VModel } from 'vue-property-decorator'
-import type { IroColor } from '@irojs/iro-core'
 
 @Component({})
 export default class MacroMoveDialog extends Vue {
@@ -131,11 +129,11 @@ export default class MacroMoveDialog extends Vue {
     if (this.newMacro && this.newMacro.color !== '') {
       return this.newMacro.color
     }
-    return this.$vuetify.theme.currentTheme.secondary
+    return this.$vuetify.theme.currentTheme.secondary?.toString()
   }
 
-  handleColorChange (color: { channel: string, color: IroColor }) {
-    if (this.newMacro) this.newMacro.color = color.color.hexString
+  set color (value: string | undefined) {
+    if (this.newMacro) this.newMacro.color = value
   }
 
   handleResetColor () {
diff --git a/src/components/settings/presets/PresetDialog.vue b/src/components/settings/presets/PresetDialog.vue
index 22cc3dbcb2..161c2950b4 100644
--- a/src/components/settings/presets/PresetDialog.vue
+++ b/src/components/settings/presets/PresetDialog.vue
@@ -6,7 +6,7 @@
     :save-button-text="(preset.id !== -1) ? $t('app.general.btn.save') : $t('app.general.btn.add')"
     @save="handleSave"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting :title="$t('app.setting.label.thermal_preset_name')">
         <v-text-field
           v-model="preset.name"
@@ -21,12 +21,10 @@
 
       <v-divider />
 
-      <template
-        v-for="(item, i) in heaters"
-      >
+      <template v-for="(item, i) in heaters">
         <app-setting
           :key="`${i}heater`"
-          :title="item.name"
+          :title="$filters.startCase(item.name)"
         >
           <v-checkbox
             v-model="preset.values[item.name].active"
@@ -52,12 +50,10 @@
         <v-divider :key="i + 'heaterd'" />
       </template>
 
-      <template
-        v-for="(item, i) in fans"
-      >
+      <template v-for="(item, i) in fans">
         <app-setting
           :key="`${i}fan`"
-          :title="item.name"
+          :title="$filters.startCase(item.name)"
         >
           <v-checkbox
             v-model="preset.values[item.name].active"
@@ -93,7 +89,7 @@
           class="console-command"
         />
       </app-setting>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
diff --git a/src/components/settings/timelapse/TimelapseSettings.vue b/src/components/settings/timelapse/TimelapseSettings.vue
index f61da78a95..1435cff5b6 100644
--- a/src/components/settings/timelapse/TimelapseSettings.vue
+++ b/src/components/settings/timelapse/TimelapseSettings.vue
@@ -124,7 +124,7 @@ import StateMixin from '@/mixins/state'
 import type { TimelapseMode, TimelapseSettings as TimelapseSettingsType } from '@/store/timelapse/types'
 import { SocketActions } from '@/api/socketActions'
 import HyperlapseSettings from '@/components/settings/timelapse/subsettings/modes/HyperlapseSettings.vue'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 import ToolheadParkingSettings from '@/components/settings/timelapse/subsettings/ToolheadParkingSettings.vue'
 import { defaultWritableSettings } from '@/store/timelapse/state'
 import TimelapseRenderSettingsDialog from '@/components/widgets/timelapse/TimelapseRenderSettingsDialog.vue'
@@ -153,9 +153,15 @@ export default class TimelapseSettings extends Mixins(StateMixin) {
     }]
   }
 
-  get cameras (): {text: string, value: string, disabled: boolean} {
-    return this.$store.getters['cameras/getCameras']
-      .map((camera: CameraConfig) => ({ text: camera.name, value: camera.id, disabled: !camera.enabled }))
+  get cameras (): Array<{text?: string, value: string, disabled: boolean}> {
+    const cameras = this.$store.getters['webcams/getWebcams'] as WebcamConfig[]
+
+    return cameras
+      .map(camera => ({
+        text: camera.name,
+        value: camera.uid,
+        disabled: !camera.enabled
+      }))
   }
 
   get cameraBlocked (): boolean {
diff --git a/src/components/ui/AppCodeView.vue b/src/components/ui/AppCodeView.vue
deleted file mode 100644
index 67f4d06164..0000000000
--- a/src/components/ui/AppCodeView.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="code-view">
-    <pre>{{ value }}</pre>
-
-    <v-btn
-      v-blur
-      small
-      fab
-      text
-      absolute
-      @click="handleCopyClick"
-    >
-      <v-fade-transition
-        mode="in-out"
-        leave-absolute
-      >
-        <v-icon
-          v-show="!copied"
-          dense
-          color="grey"
-        >
-          $contentCopy
-        </v-icon>
-      </v-fade-transition>
-      <v-fade-transition
-        mode="in-out"
-        leave-absolute
-      >
-        <v-icon
-          v-show="copied"
-          dense
-          color="grey"
-        >
-          $check
-        </v-icon>
-      </v-fade-transition>
-    </v-btn>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
-
-@Component({
-  components: {}
-})
-export default class AppCodeView extends Vue {
-  @Prop({ type: String, required: true })
-  readonly value!: string
-
-  copied = false
-
-  handleCopyClick () {
-    if (
-      navigator.clipboard &&
-      this.value
-    ) {
-      navigator.clipboard.writeText(this.value)
-      this.copied = true
-      setTimeout(() => { this.copied = false }, 1200)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  @import 'vuetify/src/styles/styles.sass';
-
-  .theme--light .code-view {
-    background-color: rgba(map-get($material-light, 'bg-color'), 0.08);
-    border: solid thin rgba(map-get($material-light, 'bg-color'), 0.14);
-  }
-
-  .theme--dark .code-view {
-    background-color: rgba(map-get($material-dark, 'bg-color'), 0.08);
-    border: solid thin rgba(map-get($material-dark, 'bg-color'), 0.14);
-  }
-
-  .code-view {
-    position: relative;
-    border-radius: 6px;
-    min-height: 48px;
-
-    pre {
-      font-size: 1rem;
-      white-space: pre-wrap;
-      padding: 14px 16px;
-      margin-right: 38px;
-    }
-
-    .v-btn {
-      top: 6px;
-      right: 6px;
-    }
-  }
-</style>
diff --git a/src/components/ui/AppColorPicker.vue b/src/components/ui/AppColorPicker.vue
index cb68b68eeb..a634d3d927 100644
--- a/src/components/ui/AppColorPicker.vue
+++ b/src/components/ui/AppColorPicker.vue
@@ -1,6 +1,5 @@
 <template>
   <v-menu
-    v-model="menu"
     bottom
     left
     max-width="260"
@@ -10,7 +9,7 @@
       <v-btn
         v-if="!dot"
         v-bind="attrs"
-        :color="controlColor.hexString"
+        :color="controlColor"
         outlined
         small
         v-on="on"
@@ -21,7 +20,7 @@
       <v-icon
         v-else
         v-bind="attrs"
-        :color="controlColor.hexString"
+        :color="controlColor"
         v-on="on"
       >
         $circle
@@ -41,7 +40,7 @@
       <v-card-text>
         <v-icon
           v-if="supportedChannels !== 'W'"
-          :color="primaryColor.hexString"
+          :color="currentPrimaryColor.hexString"
           large
         >
           $circle
@@ -49,7 +48,7 @@
 
         <v-icon
           v-if="supportedChannels.includes('W')"
-          :color="whiteColor.hexString"
+          :color="currentWhiteColor.hexString"
           large
         >
           $circle
@@ -59,26 +58,44 @@
           align-center
           column
         >
-          <!-- standard full color picker -->
           <app-iro-color-picker
             v-if="supportedChannels !== 'W'"
-            :color="primaryColor.hexString"
+            v-model="currentPrimaryColor.hexString"
             :options="primaryOptions"
-            @color:change="handleColorChange('primary', $event)"
+            @input="handleSubmitPrimary"
           />
 
-          <!-- white channel color picker -->
           <app-iro-color-picker
             v-if="supportedChannels.includes('W')"
+            v-model="currentWhiteColor.hexString"
             class="mt-4"
-            :color="whiteColor.hexString"
             :options="whiteOptions"
-            @color:change="handleColorChange('white', $event)"
+            @input="handleSubmitWhite"
           />
         </v-layout>
 
+        <div class="text-right mt-4 mr-1">
+          <v-btn-toggle
+            v-model="valueRange"
+            mandatory
+          >
+            <app-btn
+              x-small
+              value="absolute"
+            >
+              0..255
+            </app-btn>
+            <app-btn
+              x-small
+              value="percentage"
+            >
+              0..1
+            </app-btn>
+          </v-btn-toggle>
+        </div>
+
         <v-layout
-          class="mt-4"
+          class="mt-2"
           justify-space-between
         >
           <div
@@ -86,10 +103,12 @@
             class="color-input"
           >
             <v-text-field
-              v-model.number="primaryColor.rgb.r"
+              v-model.number="currentRed"
               dense
               hide-details
               outlined
+              @blur="handleReset"
+              @keyup.enter.exact="handleSubmitPrimary"
             />
             <div>R</div>
           </div>
@@ -98,10 +117,12 @@
             class="color-input"
           >
             <v-text-field
-              v-model.number="primaryColor.rgb.g"
+              v-model.number="currentGreen"
               dense
               hide-details
               outlined
+              @blur="handleReset"
+              @keyup.enter.exact="handleSubmitPrimary"
             />
             <div>G</div>
           </div>
@@ -110,10 +131,12 @@
             class="color-input"
           >
             <v-text-field
-              v-model.number="primaryColor.rgb.b"
+              v-model.number="currentBlue"
               dense
               hide-details
               outlined
+              @blur="handleReset"
+              @keyup.enter.exact="handleSubmitPrimary"
             />
             <div>B</div>
           </div>
@@ -122,10 +145,12 @@
             class="color-input"
           >
             <v-text-field
-              v-model.number="whiteColor.rgb.r"
+              v-model.number="currentWhite"
               dense
               hide-details
               outlined
+              @blur="handleReset"
+              @keyup.enter.exact="handleSubmitWhite"
             />
             <div>W</div>
           </div>
@@ -136,37 +161,24 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
+import { Component, Vue, Prop, Ref, VModel, PropSync, Watch } from 'vue-property-decorator'
 import iro from '@jaames/iro'
 import { IroColor } from '@irojs/iro-core'
-
-interface RgbwColor {
-    r: number;
-    g: number;
-    b: number;
-}
-
-interface AppColor {
-  hexString: string;
-  rgb: RgbwColor;
-}
+import type { ColorPickerProps } from '@jaames/iro/dist/ColorPicker'
+import type { ColorPickerValueRange } from '@/store/config/types'
 
 interface PointerPosition {
   x: number;
   y: number;
 }
 
-@Component({
-  components: {}
-})
+@Component({})
 export default class AppColorPicker extends Vue {
-  // Expected color input. Can be a hex, rgbw etc.
-  @Prop({ type: String, required: true })
-  readonly primary!: string
+  @VModel({ type: String, required: true })
+    inputPrimaryColor!: string
 
-  @Prop({ type: String })
-  readonly white?: string
+  @PropSync('white', { type: Number, default: 0 })
+    inputWhiteValue!: number
 
   @Prop({ type: String, default: '' })
   readonly title!: string
@@ -177,123 +189,139 @@ export default class AppColorPicker extends Vue {
   @Prop({ type: String, default: 'RGB' })
   readonly supportedChannels!: string
 
-  menu = false
-
   @Ref('card')
   readonly card!: Vue
 
   lastPointerPosition: PointerPosition = { x: 0, y: 0 }
 
-  primaryColor: AppColor = {
-    hexString: '#ffffff',
-    rgb: { r: 255, g: 255, b: 255 }
+  get primaryOptions (): Partial<ColorPickerProps> {
+    return {
+      color: this.inputPrimaryColor,
+      width: 208,
+      layout: [
+        {
+          component: iro.ui.Wheel,
+          options: {
+            wheelLightness: false,
+            wheelAngle: 270,
+            wheelDirection: 'clockwise'
+          }
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            sliderType: 'value'
+          }
+        }
+      ]
+    }
   }
 
-  whiteColor: AppColor = {
-    hexString: '#ffffff',
-    rgb: { r: 255, g: 255, b: 255 }
+  get whiteOptions (): Partial<ColorPickerProps> {
+    return {
+      color: this.inputWhiteColor,
+      width: 208,
+      layout: [
+        {
+          component: iro.ui.Slider,
+          options: {
+            sliderType: 'value'
+          }
+        }
+      ]
+    }
   }
 
-  primaryOptions = {
-    color: this.primaryColor,
-    width: 208,
-    layout: [
-      {
-        component: iro.ui.Wheel,
-        options: {
-          wheelLightness: false,
-          wheelAngle: 270,
-          wheelDirection: 'clockwise'
-        }
-      },
-      {
-        component: iro.ui.Slider,
-        options: {
-          sliderType: 'value'
-        }
-      }
-    ]
-  }
-
-  whiteOptions = {
-    color: this.whiteColor,
-    width: 208,
-    layout: [
-      {
-        component: iro.ui.Slider,
-        options: {
-          sliderType: 'value'
-        }
-      }
-    ]
+  currentPrimaryColor = new IroColor()
+  currentWhiteColor = new IroColor()
+
+  @Watch('value')
+  onValue (value: string) {
+    this.currentPrimaryColor.set(value)
   }
 
-  get controlColor () {
-    return this.supportedChannels === 'W' ? this.whiteColor : this.primaryColor
+  @Watch('white')
+  onWhite (value: number) {
+    this.currentWhiteColor.set(this.valueToHexColor(value))
   }
 
-  @Watch('primaryColor', { deep: true })
-  onPrimaryColorChange (value: AppColor) {
-    // Update the hex to reflect changes. This covers off users adjusting
-    // the rgb values independently.
-    const c = new IroColor(value.rgb)
-    if (c.hexString !== value.hexString) this.primaryColor.hexString = c.hexString
+  get currentRed (): number {
+    return this.convertValueRange(this.currentPrimaryColor.red, 'out')
   }
 
-  @Watch('whiteColor', { deep: true })
-  onWhiteColorChange (value: AppColor) {
-    // Update the hex to reflect changes. This covers off users adjusting
-    // the rgb values independently.
-    const c = new IroColor({ r: value.rgb.r, g: value.rgb.r, b: value.rgb.r })
-    if (c.hexString !== value.hexString) this.whiteColor.hexString = c.hexString
+  set currentRed (value: number) {
+    this.currentPrimaryColor.red = this.convertValueRange(value, 'in')
   }
 
-  @Watch('primary')
-  onPrimaryChange (value: string) {
-    if (value) {
-      this.primaryColor = this.getColor(value)
-    }
+  get currentGreen (): number {
+    return this.convertValueRange(this.currentPrimaryColor.green, 'out')
   }
 
-  @Watch('white')
-  onWhiteChange (value: string) {
-    if (value) {
-      this.whiteColor = this.getColor(value)
-    }
+  set currentGreen (value: number) {
+    this.currentPrimaryColor.green = this.convertValueRange(value, 'in')
   }
 
-  created () {
-    this.primaryColor = this.getColor(this.primary)
-    if (this.supportedChannels.includes('W') && this.white) this.whiteColor = this.getColor(this.white)
+  get currentBlue (): number {
+    return this.convertValueRange(this.currentPrimaryColor.blue, 'out')
   }
 
-  getColor (color: string) {
-    const base = new iro.Color(color)
-    return {
-      hexString: base.hexString,
-      rgb: {
-        r: base.rgb.r,
-        g: base.rgb.g,
-        b: base.rgb.b
-      }
-    }
+  set currentBlue (value: number) {
+    this.currentPrimaryColor.blue = this.convertValueRange(value, 'in')
   }
 
-  handleColorChange (channel: string, color: IroColor) {
-    const c = this.getColor(color.hexString)
-    if (channel === 'primary') {
-      this.primaryColor = c
-    } else {
-      this.whiteColor = c
-    }
+  get currentWhite (): number {
+    return this.convertValueRange(this.currentWhiteColor.red, 'out')
+  }
+
+  set currentWhite (value: number) {
+    this.currentWhiteColor.set(this.valueToHexColor(this.convertValueRange(value, 'in')))
+  }
+
+  get inputWhiteColor (): string {
+    return this.valueToHexColor(this.inputWhiteValue)
+  }
+
+  get controlColor (): string {
+    return (
+      this.supportedChannels === 'W'
+        ? this.inputWhiteColor
+        : this.inputPrimaryColor
+    )
+  }
+
+  get valueRange (): ColorPickerValueRange {
+    return this.$store.state.config.uiSettings.general.colorPickerValueRange
+  }
+
+  set valueRange (value: ColorPickerValueRange) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.colorPickerValueRange',
+      value,
+      server: true
+    })
+  }
 
-    this.$emit(`update:${channel}`, color)
-    this.debouncedChange(channel, color)
+  handleSubmitPrimary () {
+    this.inputPrimaryColor = this.currentPrimaryColor.hexString
   }
 
-  @Debounce(500)
-  debouncedChange (channel: string, color: IroColor) {
-    this.$emit('change', { channel, color })
+  handleSubmitWhite () {
+    this.inputWhiteValue = this.currentWhiteColor.red
+  }
+
+  handleReset () {
+    this.currentPrimaryColor.set(this.inputPrimaryColor)
+    this.currentWhiteColor.set(this.inputWhiteColor)
+  }
+
+  valueToHexColor (value: number): string {
+    value = Math.round(Math.min(Math.max(value, 0), 255))
+
+    return `#${value.toString(16).padStart(2, '0').repeat(3)}`
+  }
+
+  created () {
+    this.handleReset()
   }
 
   startMouseDrag (event: MouseEvent) {
@@ -332,6 +360,16 @@ export default class AppColorPicker extends Vue {
     this.relativeMove(newPosition)
     this.lastPointerPosition = newPosition
   }
+
+  convertValueRange (value: number, direction: 'in' | 'out') {
+    if (this.valueRange === 'absolute') return value
+
+    let factor = 1
+    if (this.valueRange === 'percentage') factor = 255
+    if (direction === 'out') factor = 1 / factor
+
+    return Math.round(value * factor * 1000) / 1000
+  }
 }
 </script>
 
diff --git a/src/components/ui/AppDialog.vue b/src/components/ui/AppDialog.vue
index 2fb15c00f2..a924f58bb2 100644
--- a/src/components/ui/AppDialog.vue
+++ b/src/components/ui/AppDialog.vue
@@ -3,6 +3,8 @@
     v-model="open"
     :scrollable="scrollable"
     v-bind="$attrs"
+    :fullscreen="isMobileViewport"
+    :transition="isMobileViewport ? 'dialog-bottom-transition' : undefined"
   >
     <v-form
       ref="form"
@@ -21,9 +23,49 @@
             'collapsable-card-title': titleShadow
           }"
         >
-          <slot name="title">
-            <span class="focus--text">{{ title }}</span>
-          </slot>
+          <v-row
+            no-gutters
+            class="flex-nowrap"
+          >
+            <v-col
+              align-self="center"
+              class="text-no-wrap"
+            >
+              <slot name="title">
+                <span class="focus--text">{{ title }}</span>
+                <app-inline-help
+                  v-if="helpTooltip"
+                  bottom
+                  small
+                  :tooltip="helpTooltip"
+                />
+              </slot>
+            </v-col>
+
+            <v-col
+              cols="auto"
+              align-self="center"
+            >
+              <slot name="menu" />
+            </v-col>
+
+            <v-col
+              cols="auto"
+              align-self="center"
+            >
+              <v-btn
+                fab
+                text
+                x-small
+                class="ml-1"
+                @click="open = false"
+              >
+                <v-icon>
+                  $close
+                </v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
         </v-card-title>
 
         <v-card-subtitle
@@ -71,11 +113,12 @@
 </template>
 
 <script lang="ts">
+import BrowserMixin from '@/mixins/browser'
 import type { VForm } from '@/types'
-import { Component, Vue, Prop, VModel, Ref, PropSync } from 'vue-property-decorator'
+import { Component, Prop, VModel, Ref, PropSync, Mixins } from 'vue-property-decorator'
 
 @Component({})
-export default class AppDialog extends Vue {
+export default class AppDialog extends Mixins(BrowserMixin) {
   @VModel({ type: Boolean })
     open?: boolean
 
@@ -85,6 +128,9 @@ export default class AppDialog extends Vue {
   @Prop({ type: String })
   readonly title?: string
 
+  @Prop({ type: String })
+  readonly helpTooltip?: string
+
   @Prop({ type: String })
   readonly subTitle?: string
 
diff --git a/src/components/ui/AppIroColorPicker.vue b/src/components/ui/AppIroColorPicker.vue
index 405cdf2b21..14e4449984 100644
--- a/src/components/ui/AppIroColorPicker.vue
+++ b/src/components/ui/AppIroColorPicker.vue
@@ -5,78 +5,51 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Ref, Watch } from 'vue-property-decorator'
+import { Component, Vue, Prop, Ref, Watch, VModel } from 'vue-property-decorator'
 import iro from '@jaames/iro'
 import { IroColor } from '@irojs/iro-core'
 import type { ColorPickerProps, IroColorPicker } from '@jaames/iro/dist/ColorPicker'
 
-@Component({
-  components: {}
-})
+@Component({})
 export default class AppColorPicker extends Vue {
-  @Prop({ type: [Object, String], default: '#ffffff' })
-  readonly color!: IroColor
+  @VModel({ type: String, default: '#ffffff' })
+    inputValue!: string
 
-  @Prop({ type: Object, default: () => {} })
-  readonly options!: ColorPickerProps
+  @Prop({ type: Object })
+  readonly options?: Partial<ColorPickerProps>
 
   @Ref('picker')
   readonly picker!: HTMLElement
 
-  colorPicker: null | IroColorPicker = null
-  supportedEvents = [
-    'mount',
-    'color:init',
-    // 'color:setActive',
-    'color:change'
-    // 'color:remove',
-    // 'input:change',
-    // 'input:start',
-    // 'input:move',
-    // 'input:end'
-  ]
+  colorPicker: IroColorPicker | null = null
 
-  @Watch('color', { deep: true })
-  onColorChange (value: string) {
-    if (this.colorPicker) this.colorPicker.color.hexString = value
+  @Watch('value')
+  onValue (value: string) {
+    if (value && this.colorPicker) {
+      this.colorPicker.color.set(value)
+    }
   }
 
-  get opts () {
-    const opts: ColorPickerProps = {
+  mounted () {
+    const options: Partial<ColorPickerProps> = {
       ...this.options,
-      color: this.color,
+      color: this.inputValue,
       sliderSize: 14
     }
-    return opts
-  }
 
-  mounted () {
-    // Create the picker
-    this.colorPicker = iro.ColorPicker(this.picker, this.opts)
+    this.colorPicker = iro.ColorPicker(this.picker, options)
 
-    // Bind events.
-    this.supportedEvents.forEach((name) => {
-      if (this.colorPicker) {
-        this.colorPicker.on(name, (color: IroColor) => {
-          this.eventHandler(name, color)
-        })
-      }
-    })
+    this.colorPicker.on('input:end', this.handleColorChange)
   }
 
   beforeUnmount () {
     if (this.colorPicker) {
-      this.colorPicker.off(this.supportedEvents, this.eventHandler)
+      this.colorPicker.off('input:end', this.handleColorChange)
     }
   }
 
   handleColorChange (color: IroColor) {
-    this.$emit('change', color)
-    this.$emit('update:color', color)
-  }
-
-  eventHandler (e: string, c: IroColor) {
-    this.$emit(e, c)
+    this.inputValue = color.hexString
   }
 }
 </script>
diff --git a/src/components/ui/AppSetting.vue b/src/components/ui/AppSetting.vue
index 799b1f6961..c788bf0d13 100644
--- a/src/components/ui/AppSetting.vue
+++ b/src/components/ui/AppSetting.vue
@@ -2,18 +2,24 @@
   <v-row
     no-gutters
     v-bind="$attrs"
-    :class="classes"
-    class="setting"
+    :class="{
+      'sc-link': hasClick
+    }"
+    class="app-setting-control"
     v-on="$listeners"
   >
     <div
-      v-if="accentColor && accentColor !== ''"
-      :style="`background-color: ${accentColor};`"
-      class="setting__accent-color"
+      v-if="accentColor"
+      :style="{
+        'background-color': accentColor
+      }"
+      class="sc-color"
     />
+
     <v-col
-      :cols="cols[0]"
-      class="setting-title"
+      cols="12"
+      :sm="cols[0]"
+      class="sc-label text-body-1 pr-0 pr-sm-3 pb-0 pb-sm-3"
       align-self="center"
     >
       <slot name="title">
@@ -21,16 +27,18 @@
       </slot>
       <div
         v-if="hasSubTitle"
-        class="setting-sub-title secondary--text"
+        class="text-body-2 secondary--text"
       >
         <slot name="sub-title">
           {{ subTitle }}
         </slot>
       </div>
     </v-col>
+
     <v-col
-      :cols="cols[1]"
-      class="setting-controls"
+      cols="12"
+      :sm="cols[1]"
+      class="sc-content py-3"
       align-self="center"
     >
       <slot />
@@ -73,85 +81,62 @@ export default class AppSetting extends Vue {
       this.subTitle
     )
   }
-
-  get classes () {
-    return {
-      setting__link: this.hasClick
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-  .setting {
-    // align-items: center;
+  .app-setting-control {
     display: flex;
     flex: 1 1 100%;
-    letter-spacing: normal;
     min-height: 48px;
     outline: none;
     padding: 0 16px;
     position: relative;
     text-decoration: none;
-  }
 
-  .setting > .col {
-    padding: 12px 0;
-  }
-
-  .col.setting-title {
-    // display: flex;
-    // flex: 0 1 auto;
-    // justify-content: space-between;
-    // align-items: center;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    padding-right: 12px;
-  }
+    &.sc-link {
+      cursor: pointer;
+      user-select: none;
+    }
 
-  .col.setting-title > .setting-sub-title {
-    font-size: 0.875rem;
-  }
+    &.sc-link:hover::before {
+      opacity: 0.08;
+    }
 
-  .setting__link {
-    cursor: pointer;
-    user-select: none;
-  }
+    &.sc-link::before {
+      background-color: currentColor;
+      bottom: 0;
+      content: "";
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+    }
 
-  .setting__link:hover::before {
-    opacity: 0.08;
-  }
+    .sc-accent {
+      display: block;
+      position: absolute;
+      left: 0;
+      width: 3px;
+      height: 100%;
+    }
 
-  .setting__link::before {
-    background-color: currentColor;
-    bottom: 0;
-    content: "";
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-  }
+    .sc-label {
+      padding: 12px 0;
+    }
 
-  .setting__accent-color {
-    display: block;
-    position: absolute;
-    left: 0;
-    width: 3px;
-    height: 100%;
-    // border-radius: 6px 0 0 6px;
- }
-
-  .setting-controls {
-    display: inline-flex;
-    align-self: center;
-    justify-content: flex-end;
-    align-items: center;
-  }
+    .sc-content {
+      display: inline-flex;
+      align-self: center;
+      justify-content: flex-end;
+      align-items: center;
+    }
 
-  .setting-controls .v-input {
-    margin: 0 !important;
+    .sc-content .v-input {
+      margin: 0 !important;
+    }
   }
 </style>
diff --git a/src/components/ui/AppTextFieldWithCopy.vue b/src/components/ui/AppTextFieldWithCopy.vue
new file mode 100644
index 0000000000..a1f9d779d8
--- /dev/null
+++ b/src/components/ui/AppTextFieldWithCopy.vue
@@ -0,0 +1,77 @@
+<template>
+  <v-text-field
+    v-model="inputValue"
+    v-bind="$attrs"
+    class="app-text-field"
+    v-on="$listeners"
+  >
+    <template #append-outer>
+      <v-tooltip
+        :close-delay="hasCopied ? 2000 : undefined"
+        :open-on-focus="false"
+        bottom
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            icon
+            text
+            class="btn-copy"
+            @click="handleCopy"
+            v-on="on"
+          >
+            <v-fade-transition leave-absolute>
+              <v-icon
+                :key="hasCopied"
+                class="icon-copy"
+              >
+                {{ hasCopied ? '$check' : '$contentCopy' }}
+              </v-icon>
+            </v-fade-transition>
+          </v-btn>
+        </template>
+        <span>{{ hasCopied ? $t('app.general.btn.copied') : $t('app.general.btn.copy') }}</span>
+      </v-tooltip>
+    </template>
+  </v-text-field>
+</template>
+
+<script lang="ts">
+import { Component, VModel, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class AppTextFieldWithCopy extends Vue {
+  @VModel()
+    inputValue!: unknown
+
+  hasCopied = false
+
+  handleCopy () {
+    if (
+      this.inputValue &&
+      navigator.clipboard
+    ) {
+      navigator.clipboard.writeText(this.inputValue.toString())
+
+      this.hasCopied = true
+
+      setTimeout(() => {
+        this.hasCopied = false
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .app-text-field {
+    .btn-copy {
+      margin-top: -8px;
+      margin-right: -2px;
+    }
+
+    .icon-copy {
+      position: absolute;
+    }
+  }
+</style>
diff --git a/src/components/widgets/bedmesh/BedMeshChart.vue b/src/components/widgets/bedmesh/BedMeshChart.vue
index 8d42556c16..ce498921cb 100644
--- a/src/components/widgets/bedmesh/BedMeshChart.vue
+++ b/src/components/widgets/bedmesh/BedMeshChart.vue
@@ -71,20 +71,16 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
     // If options includes series data, rip it out so we can merge it with
     // the given series in our initial options.
     const darkMode = this.$store.state.config.uiSettings.theme.isDark
+
+    const fontColor = (darkMode) ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,0.45)'
     const fontSize = (this.isMobileViewport) ? 14 : 16
-    let labelBackground = 'rgba(10,10,10,0.90)'
+    const labelBackground = (darkMode) ? 'rgba(10,10,10,0.90)' : 'rgba(255,255,255,0.90)'
     const opacity = 0.10
-    let fontColor = 'rgba(255,255,255,0.25)'
-    let lineColor = '#ffffff'
+    const lineColor = (darkMode) ? '#ffffff' : '#000000'
     const visualMap = {
       itemWidth: (this.isMobileViewport) ? 15 : 25,
       itemHeight: (this.isMobileViewport) ? 140 : 280
     }
-    if (!darkMode) {
-      labelBackground = 'rgba(255,255,255,0.90)'
-      fontColor = 'rgba(0,0,0,0.45)'
-      lineColor = '#000000'
-    }
 
     const axisCommon = {
       nameTextStyle: {
@@ -159,7 +155,33 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
           color: fontColor,
           fontSize: 18
         },
-        formatter: this.tooltipFormatter
+        formatter: (params: any) => {
+          let text = ''
+          if (params.value && Array.isArray(params.value)) {
+            text += `
+              <div>
+                <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  ${this.$filters.startCase(params.seriesName)}
+                </span>
+                <div style="clear: both"></div>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  x: ${params.value[0].toFixed(4)}
+                </span>
+                <div style="clear: both"></div>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  y: ${params.value[1].toFixed(4)}
+                </span>
+                <div style="clear: both"></div>
+                <span style="font-size:16px;color:${fontColor};font-weight:400;margin-left:2px">
+                  z: ${params.value[2].toFixed(4)}
+                </span>
+                <div style="clear: both"></div>
+              </div>
+              `
+          }
+          return text
+        }
       },
       visualMap: {
         type: 'continuous',
@@ -217,34 +239,6 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
     return opts
   }
 
-  tooltipFormatter (params: any) {
-    let text = ''
-    if (params.value && Array.isArray(params.value)) {
-      text += `
-        <div>
-          <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            ${this.$filters.startCase(params.seriesName)}
-          </span>
-          <div style="clear: both"></div>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            x: ${params.value[0].toFixed(4)}
-          </span>
-          <div style="clear: both"></div>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            y: ${params.value[1].toFixed(4)}
-          </span>
-          <div style="clear: both"></div>
-          <span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
-            z: ${params.value[2].toFixed(4)}
-          </span>
-          <div style="clear: both"></div>
-        </div>
-        `
-    }
-    return text
-  }
-
   async copyImage () {
     const image = await fetch(this.chart.getDataURL({ type: 'png', backgroundColor: '#262629' }))
 
diff --git a/src/components/widgets/camera/CameraCard.vue b/src/components/widgets/camera/CameraCard.vue
index d4124d5b89..8e690c6fcb 100644
--- a/src/components/widgets/camera/CameraCard.vue
+++ b/src/components/widgets/camera/CameraCard.vue
@@ -21,7 +21,7 @@
       <template v-for="camera in cameras">
         <v-col
           v-if="!collapsed"
-          :key="camera.id"
+          :key="camera.uid"
           cols="12"
           :sm="cols"
         >
@@ -44,7 +44,7 @@ import { Component, Mixins } from 'vue-property-decorator'
 import CameraItem from '@/components/widgets/camera/CameraItem.vue'
 import CameraMenu from './CameraMenu.vue'
 import StateMixin from '@/mixins/state'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 @Component({
   components: {
@@ -61,12 +61,12 @@ export default class CameraCard extends Mixins(StateMixin) {
     if (this.cameras.length > 2) return 4
   }
 
-  get cameras (): CameraConfig[] {
-    return this.$store.getters['cameras/getVisibleCameras'] as CameraConfig[]
+  get cameras (): WebcamConfig[] {
+    return this.$store.getters['webcams/getVisibleWebcams'] as WebcamConfig[]
   }
 
-  handleCameraSelect (cam: string) {
-    this.$store.dispatch('cameras/updateActiveCamera', cam)
+  handleCameraSelect (id: string) {
+    this.$store.dispatch('webcams/updateActiveWebcam', id)
   }
 }
 </script>
diff --git a/src/components/widgets/camera/CameraDialog.vue b/src/components/widgets/camera/CameraDialog.vue
deleted file mode 100644
index bf896cfac4..0000000000
--- a/src/components/widgets/camera/CameraDialog.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <v-dialog
-    v-model="open"
-    max-width="90vh"
-  >
-    <camera-item
-      :camera="camera"
-    />
-  </v-dialog>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop, VModel } from 'vue-property-decorator'
-import CameraItem from '@/components/widgets/camera/CameraItem.vue'
-import type { CameraConfig } from '@/store/cameras/types'
-
-@Component({
-  components: {
-    CameraItem
-  }
-})
-export default class CameraDialog extends Vue {
-  @VModel({ type: Boolean })
-    open?: boolean
-
-  @Prop({ type: Object, required: true })
-  readonly camera!: CameraConfig
-}
-</script>
-
-<style lang="scss" scoped>
-  .config-editor-overlay div.v-card {
-    position: relative;
-    header {
-      position: sticky;
-      top: 0;
-      width: 100%;
-      z-index: 1;
-    }
-  }
-</style>
diff --git a/src/components/widgets/camera/CameraItem.vue b/src/components/widgets/camera/CameraItem.vue
index e9e201006f..e2adf09b7c 100644
--- a/src/components/widgets/camera/CameraItem.vue
+++ b/src/components/widgets/camera/CameraItem.vue
@@ -37,7 +37,7 @@
       v-if="!fullscreen && (fullscreenMode === 'embed' || !rawCameraUrl) && camera.service !== 'device'"
       class="camera-fullscreen"
     >
-      <a :href="`/#/camera/${camera.id}`">
+      <a :href="`/#/camera/${encodeURI(camera.uid)}`">
         <v-icon>$fullScreen</v-icon>
       </a>
     </div>
@@ -57,7 +57,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 import type { CameraFullscreenAction } from '@/store/config/types'
 import { CameraComponents } from '@/dynamicImports'
 import CameraMixin from '@/mixins/camera'
@@ -65,7 +65,7 @@ import CameraMixin from '@/mixins/camera'
 @Component({})
 export default class CameraItem extends Vue {
   @Prop({ type: Object, required: true })
-  readonly camera!: CameraConfig
+  readonly camera!: WebcamConfig
 
   @Prop({ type: Boolean })
   readonly fullscreen?: boolean
diff --git a/src/components/widgets/camera/CameraMenu.vue b/src/components/widgets/camera/CameraMenu.vue
index 09dfc12b92..88c6072973 100644
--- a/src/components/widgets/camera/CameraMenu.vue
+++ b/src/components/widgets/camera/CameraMenu.vue
@@ -30,7 +30,11 @@
       </app-btn>
     </template>
     <v-list dense>
-      <v-list-item @click="$emit('select', 'all')">
+      <v-list-item
+        v-for="camera of availableCameras"
+        :key="camera.uid"
+        @click="$emit('select', camera.uid)"
+      >
         <v-list-item-icon>
           <v-icon>
             $camera
@@ -38,28 +42,10 @@
         </v-list-item-icon>
         <v-list-item-content>
           <v-list-item-title>
-            {{ $t('app.general.btn.all') }}
+            {{ camera.name }}
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-
-      <template v-for="item of cameras">
-        <v-list-item
-          :key="item.id"
-          @click="$emit('select', item.id)"
-        >
-          <v-list-item-icon>
-            <v-icon>
-              $camera
-            </v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title>
-              {{ item.name }}
-            </v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </template>
     </v-list>
   </v-menu>
 </template>
@@ -67,24 +53,31 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 @Component({})
 export default class CamerasMenu extends Mixins(StateMixin) {
   get activeCamera () {
-    let id = this.$store.getters['cameras/getActiveCamera']
-    const camera = this.$store.getters['cameras/getCameraById'](id)
+    const activeWebcam = this.$store.state.webcams.activeWebcam as string
+    const camera = this.$store.getters['webcams/getWebcamById'](activeWebcam) as WebcamConfig | undefined
 
-    // If no cam was found, the active id probably no longer exists - so
-    // we'll set it to all.
-    if (!camera) id = 'all'
-
-    return (id === 'all')
+    return !camera
       ? this.$t('app.general.btn.all')
       : camera.name
   }
 
-  get cameras () {
-    return this.$store.getters['cameras/getEnabledCameras']
+  get enabledWebcams (): WebcamConfig[] {
+    return this.$store.getters['webcams/getEnabledWebcams'] as WebcamConfig[]
+  }
+
+  get availableCameras (): Pick<WebcamConfig, 'uid' | 'name'>[] {
+    return [
+      {
+        uid: 'all',
+        name: this.$t('app.general.btn.all').toString()
+      },
+      ...this.enabledWebcams
+    ]
   }
 }
 </script>
diff --git a/src/components/widgets/camera/services/HlsstreamCamera.vue b/src/components/widgets/camera/services/HlsstreamCamera.vue
index d0cd904cf8..1ed283d767 100644
--- a/src/components/widgets/camera/services/HlsstreamCamera.vue
+++ b/src/components/widgets/camera/services/HlsstreamCamera.vue
@@ -21,7 +21,7 @@ export default class HlsstreamCamera extends Mixins(CameraMixin) {
   hls: Hls | null = null
 
   startPlayback () {
-    const url = this.buildAbsoluteUrl(this.camera.urlStream || '').toString()
+    const url = this.buildAbsoluteUrl(this.camera.stream_url || '').toString()
 
     if (Hls.isSupported()) {
       this.hls?.destroy()
diff --git a/src/components/widgets/camera/services/IframeCamera.vue b/src/components/widgets/camera/services/IframeCamera.vue
index 95755bace4..7830f13082 100644
--- a/src/components/widgets/camera/services/IframeCamera.vue
+++ b/src/components/widgets/camera/services/IframeCamera.vue
@@ -4,7 +4,7 @@
     :src="cameraIFrameSource"
     style="border: none; width: 100%"
     :style="{
-      'aspect-ratio': (camera.aspectRatio || '16:9').replace(':', '/'),
+      'aspect-ratio': (camera.aspect_ratio || '16:9').replace(':', '/'),
       ...cameraStyle
     }"
   />
@@ -22,7 +22,7 @@ export default class IframeCamera extends Mixins(CameraMixin) {
   cameraIFrameSource = ''
 
   startPlayback () {
-    const url = this.buildAbsoluteUrl(this.camera.urlStream || '').toString()
+    const url = this.buildAbsoluteUrl(this.camera.stream_url || '').toString()
 
     this.cameraIFrameSource = url
 
diff --git a/src/components/widgets/camera/services/IpstreamCamera.vue b/src/components/widgets/camera/services/IpstreamCamera.vue
index cd4ee31046..e7c4a2aafc 100644
--- a/src/components/widgets/camera/services/IpstreamCamera.vue
+++ b/src/components/widgets/camera/services/IpstreamCamera.vue
@@ -21,7 +21,7 @@ export default class IpstreamCamera extends Mixins(CameraMixin) {
   cameraVideoSource = ''
 
   startPlayback () {
-    const url = this.buildAbsoluteUrl(this.camera.urlStream || '').toString()
+    const url = this.buildAbsoluteUrl(this.camera.stream_url || '').toString()
 
     this.cameraVideoSource = url
 
diff --git a/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue b/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue
index 7ef08088e2..1d78b33d52 100644
--- a/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue
+++ b/src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue
@@ -27,7 +27,7 @@ export default class MjpegstreamerAdaptiveCamera extends Mixins(CameraMixin) {
   requestTimeSmoothing = 0.1
 
   handleImageLoad () {
-    const fpsTarget = (!document.hasFocus() && this.camera.targetFpsIdle) || this.camera.targetFps || 10
+    const fpsTarget = (!document.hasFocus() && this.camera.target_fps_idle) || this.camera.target_fps || 10
     const endTime = performance.now()
     const currentTime = endTime - this.startTime
 
@@ -73,11 +73,11 @@ export default class MjpegstreamerAdaptiveCamera extends Mixins(CameraMixin) {
   }
 
   startPlayback () {
-    this.cameraImageSourceUrl = this.buildAbsoluteUrl(this.camera.urlSnapshot || '')
+    this.cameraImageSourceUrl = this.buildAbsoluteUrl(this.camera.snapshot_url || '')
 
     this.updateCameraImageSource()
 
-    const rawUrl = this.buildAbsoluteUrl(this.camera.urlStream || '')
+    const rawUrl = this.buildAbsoluteUrl(this.camera.stream_url || '')
 
     rawUrl.searchParams.set('cacheBust', Date.now().toString())
 
diff --git a/src/components/widgets/camera/services/MjpegstreamerCamera.vue b/src/components/widgets/camera/services/MjpegstreamerCamera.vue
index 10476ac36c..27c2c240e3 100644
--- a/src/components/widgets/camera/services/MjpegstreamerCamera.vue
+++ b/src/components/widgets/camera/services/MjpegstreamerCamera.vue
@@ -19,7 +19,7 @@ export default class MjpegstreamerCamera extends Mixins(CameraMixin) {
   cameraImageSource = ''
 
   startPlayback () {
-    const url = this.buildAbsoluteUrl(this.camera.urlStream || '')
+    const url = this.buildAbsoluteUrl(this.camera.stream_url || '')
 
     url.searchParams.set('cacheBust', Date.now().toString())
 
diff --git a/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue b/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue
index d5caded2c8..f377ceb132 100644
--- a/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue
+++ b/src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue
@@ -27,7 +27,7 @@ export default class WebrtcCamerastreamerCamera extends Mixins(CameraMixin) {
   remoteId: string | null = null
 
   startPlayback () {
-    const url = this.buildAbsoluteUrl(this.camera.urlStream || '')
+    const url = this.buildAbsoluteUrl(this.camera.stream_url || '')
 
     this.pc?.close()
 
diff --git a/src/components/widgets/camera/services/WebrtcGo2RtcCamera.vue b/src/components/widgets/camera/services/WebrtcGo2RtcCamera.vue
index 0c700c9dff..c6a9de0e61 100644
--- a/src/components/widgets/camera/services/WebrtcGo2RtcCamera.vue
+++ b/src/components/widgets/camera/services/WebrtcGo2RtcCamera.vue
@@ -45,7 +45,7 @@ export default class WebrtcGo2RtcCamera extends Mixins(CameraMixin) {
 
     this.abortController = new AbortController()
 
-    const url = this.buildAbsoluteUrl(this.camera.urlStream || '')
+    const url = this.buildAbsoluteUrl(this.camera.stream_url || '')
 
     const socketUrl = new URL('api/ws' + url.search, url)
 
diff --git a/src/components/widgets/console/Console.vue b/src/components/widgets/console/Console.vue
index 792866beba..be43cc7135 100644
--- a/src/components/widgets/console/Console.vue
+++ b/src/components/widgets/console/Console.vue
@@ -5,7 +5,8 @@
     <console-command
       v-if="!readonly && flipLayout"
       v-model="currentCommand"
-      :disabled="!klippyReady"
+      :disabled="!klippyConnected"
+      :autofocus="fullscreen"
       @send="sendCommand"
     />
     <v-card
@@ -47,7 +48,7 @@
     <console-command
       v-if="!readonly && !flipLayout"
       v-model="currentCommand"
-      :disabled="!klippyReady"
+      :disabled="!klippyConnected"
       :autofocus="fullscreen"
       @send="sendCommand"
     />
diff --git a/src/components/widgets/diagnostics/DiagnosticsCardConfigDialog.vue b/src/components/widgets/diagnostics/DiagnosticsCardConfigDialog.vue
index aca3b50b95..35e76bde02 100644
--- a/src/components/widgets/diagnostics/DiagnosticsCardConfigDialog.vue
+++ b/src/components/widgets/diagnostics/DiagnosticsCardConfigDialog.vue
@@ -45,6 +45,8 @@
     </v-card-text>
 
     <template #actions>
+      <v-spacer v-if="isMobileViewport" />
+
       <app-btn
         v-if="config.id !== ''"
         color="error"
@@ -54,7 +56,7 @@
         {{ $t('app.general.btn.remove') }}
       </app-btn>
 
-      <v-spacer />
+      <v-spacer v-if="!isMobileViewport" />
 
       <app-btn
         color="warning"
@@ -74,14 +76,15 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, VModel } from 'vue-property-decorator'
+import { Component, Prop, VModel, Mixins } from 'vue-property-decorator'
 import type { DiagnosticsCardConfig } from '@/store/diagnostics/types'
 import CardConfigStep from './config/CardConfigStep.vue'
 import AxesConfigStep from './config/AxesConfigStep.vue'
 import MetricsConfigStep from './config/MetricsConfigStep.vue'
+import BrowserMixin from '@/mixins/browser'
 
 @Component({})
-export default class DiagnosticsCardConfigDialog extends Vue {
+export default class DiagnosticsCardConfigDialog extends Mixins(BrowserMixin) {
   @VModel({ type: Boolean })
     open?: boolean
 
diff --git a/src/components/widgets/diagnostics/config/MetricsConfigStep.vue b/src/components/widgets/diagnostics/config/MetricsConfigStep.vue
index 7c750cd8ef..40e6aaded5 100644
--- a/src/components/widgets/diagnostics/config/MetricsConfigStep.vue
+++ b/src/components/widgets/diagnostics/config/MetricsConfigStep.vue
@@ -75,10 +75,10 @@
 
               <app-setting :title="$t('app.setting.label.line_color')">
                 <app-color-picker
-                  :primary="metric.style.lineColor"
+                  :value="metric.style.lineColor"
                   :title="metric.name"
                   dot
-                  @change="handleColorChange('lineColor', metric, $event)"
+                  @input="metric.style.lineColor = $event"
                 />
               </app-setting>
 
@@ -99,10 +99,10 @@
 
               <app-setting :title="$t('app.setting.label.fill_color')">
                 <app-color-picker
-                  :primary="metric.style.fillColor ?? metric.style.lineColor"
+                  :value="metric.style.fillColor ?? metric.style.lineColor"
                   :title="metric.name"
                   dot
-                  @change="handleColorChange('fillColor', metric, $event)"
+                  @input="metric.style.fillColor = $event"
                 />
               </app-setting>
 
@@ -158,7 +158,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import type { DiagnosticsCardConfig, Metric } from '@/store/diagnostics/types'
+import type { DiagnosticsCardConfig } from '@/store/diagnostics/types'
 import MetricsCollectorConfig from './MetricsCollectorConfig.vue'
 import { defaultState } from '@/store/layout/state'
 
@@ -180,10 +180,6 @@ export default class MetricsConfigStep extends Vue {
     { text: this.$t('app.setting.label.dashed'), value: 'dashed' }
   ]
 
-  handleColorChange (prop: 'lineColor' | 'fillColor', metric: Metric, event: any) {
-    metric.style[prop] = event.color.hexString
-  }
-
   addMetric (axis: number) {
     const defaultCard = defaultState().layouts.diagnostics.container1[0] as DiagnosticsCardConfig
     const defaultMetric = defaultCard.axes[0].metrics[0]
diff --git a/src/components/widgets/filesystem/FileEditorDialog.vue b/src/components/widgets/filesystem/FileEditorDialog.vue
index ece613fcb4..a84566949c 100644
--- a/src/components/widgets/filesystem/FileEditorDialog.vue
+++ b/src/components/widgets/filesystem/FileEditorDialog.vue
@@ -44,8 +44,22 @@
             $circle
           </v-icon>
         </v-toolbar-title>
+
         <v-spacer />
+
         <v-toolbar-items>
+          <app-btn
+            v-if="!$vuetify.breakpoint.smAndDown"
+            @click="peripheralsDialogOpen = true"
+          >
+            <v-icon
+              small
+              left
+            >
+              $devices
+            </v-icon>
+            <span>{{ $t('app.file_system.title.devices') }}</span>
+          </app-btn>
           <app-btn
             v-if="!useTextOnlyEditor"
             @click="handleCommandPalette"
@@ -130,6 +144,11 @@
         :readonly="readonly"
         @ready="editorReady = true"
       />
+
+      <peripherals-dialog
+        v-if="peripheralsDialogOpen"
+        v-model="peripheralsDialogOpen"
+      />
     </v-card>
   </v-dialog>
 </template>
@@ -176,6 +195,7 @@ export default class FileEditorDialog extends Mixins(StateMixin, BrowserMixin) {
   updatedContent: string | null = null
   lastSavedContent: string | null = null
   editorReady = false
+  peripheralsDialogOpen = false
 
   get ready () {
     return (
diff --git a/src/components/widgets/filesystem/FilePreviewDialog.vue b/src/components/widgets/filesystem/FilePreviewDialog.vue
index c57e14c707..79739601b3 100644
--- a/src/components/widgets/filesystem/FilePreviewDialog.vue
+++ b/src/components/widgets/filesystem/FilePreviewDialog.vue
@@ -6,7 +6,10 @@
     no-actions
   >
     <v-card-text class="py-4">
-      <v-layout justify-center>
+      <v-layout
+        v-if="!isMarkdown"
+        justify-center
+      >
         <video
           v-if="isVideo"
           controls
@@ -26,6 +29,17 @@
           {{ $t('app.general.simple_form.msg.no_file_preview', { name: (extension ? `.${extension} files` : filename) }) }}
         </div>
       </v-layout>
+
+      <template v-else-if="isMarkdown">
+        <promise-wrapper :promise="resultPromise">
+          <template #default="{result}">
+            <div
+              class="markdown-container"
+              v-html="result"
+            />
+          </template>
+        </promise-wrapper>
+      </template>
     </v-card-text>
 
     <template v-if="file">
@@ -58,12 +72,18 @@
 import { Component, Prop, Mixins, VModel } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import type { AppFile } from '@/store/files/types'
+import { Marked, type MarkedExtension } from 'marked'
+import { baseUrl } from 'marked-base-url'
+import { consola } from 'consola'
 
 @Component({})
 export default class FilePreviewDialog extends Mixins(StateMixin) {
   @VModel({ type: Boolean })
     open?: boolean
 
+  @Prop({ type: String })
+  readonly path?: string
+
   @Prop({ type: Object })
   readonly file?: AppFile
 
@@ -85,6 +105,8 @@ export default class FilePreviewDialog extends Mixins(StateMixin) {
   @Prop({ type: Boolean })
   readonly readonly?: boolean
 
+  resultPromise: Promise<string> | null = null
+
   get calculatedWidth () {
     const defaultWidth = window.innerWidth * (this.$vuetify.breakpoint.mdAndDown ? 1 : 0.75)
     return Math.min(window.innerWidth * 0.9, Math.max(this.width ?? defaultWidth, defaultWidth / 2))
@@ -97,6 +119,51 @@ export default class FilePreviewDialog extends Mixins(StateMixin) {
   get isImage () {
     return this.type.startsWith('image/')
   }
+
+  get isMarkdown () {
+    return this.type.startsWith('text/markdown')
+  }
+
+  get apiUrl (): string {
+    return this.$store.state.config.apiUrl as string
+  }
+
+  async LoadMarkdown () {
+    if (!this.path) {
+      // refuse rendering markdown if no base path has been supplied
+      consola.error('[FilePreviewDialog] missing path property in markdown viewer')
+      return
+    }
+
+    const response = await fetch(this.src)
+    const data = await response.text()
+
+    const apiFileUrl = `${this.apiUrl}/server/files/${this.path}/`
+
+    const baseUrlExtension = baseUrl(apiFileUrl)
+
+    const customExtension: MarkedExtension = {
+      renderer: {
+        link (...args) {
+          const html = this.constructor.prototype.link.call(this, ...args)
+
+          return html.replace(/^<a /, '<a target="_blank" ')
+        }
+      }
+    }
+
+    const marked = new Marked(baseUrlExtension, customExtension)
+
+    this.resultPromise = marked.parse(data, {
+      async: true
+    }) as Promise<string>
+  }
+
+  mounted () {
+    if (this.isMarkdown) {
+      this.LoadMarkdown()
+    }
+  }
 }
 </script>
 
@@ -105,4 +172,27 @@ video, img {
   max-width: 100%;
   max-height: calc(90vh - 144px);
 }
+
+:deep(.markdown-container) {
+  img {
+    max-width: 100% !important;
+  }
+
+  table {
+    border-collapse: collapse;
+
+    th, td {
+      border: 1px solid;
+      padding: 2px 6px;
+    }
+  }
+
+  pre > code {
+    display: block;
+  }
+
+  * {
+    margin-bottom: 1em;
+  }
+}
 </style>
diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
index 5aa98c5713..28fc82bc98 100644
--- a/src/components/widgets/filesystem/FileSystem.vue
+++ b/src/components/widgets/filesystem/FileSystem.vue
@@ -125,6 +125,7 @@
       :type="filePreviewState.type"
       :width="filePreviewState.width"
       :readonly="filePreviewState.readonly"
+      :path="currentPath"
       @remove="handleRemove"
       @download="handleDownload"
     />
diff --git a/src/components/widgets/filesystem/FileSystemFilterMenu.vue b/src/components/widgets/filesystem/FileSystemFilterMenu.vue
index e49eda76cc..b867ec62e9 100644
--- a/src/components/widgets/filesystem/FileSystemFilterMenu.vue
+++ b/src/components/widgets/filesystem/FileSystemFilterMenu.vue
@@ -139,7 +139,12 @@ export default class FileSystemFilterMenu extends Vue {
   }
 
   get selectedFilterTypes (): FileFilterType[] {
-    return this.$store.state.config.uiSettings.fileSystem.activeFilters[this.root] ?? []
+    const selectedFilters = this.$store.state.config.uiSettings.fileSystem.activeFilters[this.root] as FileFilterType[] ?? []
+    const filters = new Set(this.filters
+      .map(filter => filter.type))
+
+    return selectedFilters
+      .filter(selectedFilter => filters.has(selectedFilter))
   }
 
   set selectedFilterTypes (value: FileFilterType[]) {
diff --git a/src/components/widgets/filesystem/FileSystemGoToFileDialog.vue b/src/components/widgets/filesystem/FileSystemGoToFileDialog.vue
index d543750b75..4266cd73d8 100644
--- a/src/components/widgets/filesystem/FileSystemGoToFileDialog.vue
+++ b/src/components/widgets/filesystem/FileSystemGoToFileDialog.vue
@@ -5,7 +5,7 @@
     no-actions
     max-width="800"
   >
-    <v-card-actions>
+    <v-toolbar dense>
       <v-text-field
         v-model="search"
         :loading="loading"
@@ -13,18 +13,15 @@
         hide-details
         dense
         autofocus
-        class="mx-2"
       />
-    </v-card-actions>
-
-    <v-divider />
+    </v-toolbar>
 
     <v-virtual-scroll
       :items="matchedFiles"
       bench="30"
       item-height="40"
     >
-      <template #default="{ item }">
+      <template #default="{ index, item }">
         <v-list-item
           :key="item.path"
           dense
@@ -38,7 +35,7 @@
           </v-list-item-content>
         </v-list-item>
 
-        <v-divider />
+        <v-divider v-if="index !== matchedFiles.length - 1" />
       </template>
     </v-virtual-scroll>
   </app-dialog>
diff --git a/src/components/widgets/filesystem/FileSystemToolbar.vue b/src/components/widgets/filesystem/FileSystemToolbar.vue
index 81c6906e8e..c2390cdab9 100644
--- a/src/components/widgets/filesystem/FileSystemToolbar.vue
+++ b/src/components/widgets/filesystem/FileSystemToolbar.vue
@@ -140,7 +140,7 @@
       v-if="roots && roots.length > 1"
       #extension
     >
-      <v-tabs>
+      <v-tabs show-arrows>
         <v-tab
           v-for="(root, index) in roots"
           :key="index"
diff --git a/src/components/widgets/outputs/OutputLed.vue b/src/components/widgets/outputs/OutputLed.vue
index 7765d1a5b5..b33d886cd0 100644
--- a/src/components/widgets/outputs/OutputLed.vue
+++ b/src/components/widgets/outputs/OutputLed.vue
@@ -12,12 +12,11 @@
     </v-col>
     <v-col class="ml-auto py-0 text-right">
       <app-color-picker
-        :primary="primaryColor"
-        :white="whiteColor"
+        v-model="primaryColor"
+        :white.sync="whiteValue"
         :title="led.prettyName"
         :supported-channels="supportedChannels"
         dot
-        @change="handleColorChange"
       />
     </v-col>
   </v-row>
@@ -29,14 +28,24 @@ import { IroColor } from '@irojs/iro-core'
 import StateMixin from '@/mixins/state'
 import type { Led } from '@/store/printer/types'
 
-type Channel = 'r' | 'g' | 'b' | 'w'
+type Rgbw = {
+  r: number,
+  g: number,
+  b: number,
+  w: number
+}
 
 @Component({})
 export default class OutputLed extends Mixins(StateMixin) {
   @Prop({ type: Object, required: true })
   readonly led!: Led
 
-  channelLookup: Record<Channel, string> = { r: 'RED', g: 'GREEN', b: 'BLUE', w: 'WHITE' }
+  channelLookup: Record<keyof Rgbw, string> = {
+    r: 'RED',
+    g: 'GREEN',
+    b: 'BLUE',
+    w: 'WHITE'
+  }
 
   get supportedChannels (): string {
     const { type, config } = this.led
@@ -49,8 +58,7 @@ export default class OutputLed extends Mixins(StateMixin) {
       case 'dotstar':
         return 'RGB'
 
-      case 'led':
-      {
+      case 'led': {
         const channels = []
 
         if ('red_pin' in config) channels.push('R')
@@ -65,54 +73,58 @@ export default class OutputLed extends Mixins(StateMixin) {
     return 'RBGW'
   }
 
-  get currentColor () {
-    return this.convertFromNumberArray(this.led.color_data[0])
+  get color (): Rgbw {
+    const [r, g, b, w] = this.led.color_data[0]
+      .map(value => Math.round(value * 255))
+
+    return {
+      r,
+      g,
+      b,
+      w
+    }
   }
 
-  get primaryColor () {
-    const color = new IroColor(this.currentColor)
+  get primaryColor (): string {
+    const color = new IroColor(this.color)
 
     return color.hexString
   }
 
-  get whiteColor () {
-    if (!this.supportedChannels.includes('W')) {
-      return undefined
-    }
+  set primaryColor (value: string) {
+    const { r, g, b } = new IroColor(value).rgb
 
-    const currentColor = this.currentColor
-    const color = new IroColor({
-      r: currentColor.w,
-      g: currentColor.w,
-      b: currentColor.w
-    })
+    const newColor: Rgbw = {
+      ...this.color,
+      r,
+      g,
+      b
+    }
 
-    return color.hexString
+    this.sendColor(newColor)
   }
 
-  handleColorChange (value: { channel: string; color: IroColor }) {
-    const selectedColor = value.color.rgb
+  get whiteValue () {
+    return this.color.w
+  }
 
-    const newColor: Record<Channel, number> = {
-      ...this.currentColor,
-      ...(value.channel === 'primary' ? selectedColor : { w: selectedColor.r })
+  set whiteValue (value: number) {
+    const newColor: Rgbw = {
+      ...this.color,
+      w: value
     }
 
-    const supportedChannels = this.supportedChannels.toLowerCase().split('') as Channel[]
-    const colorsString = supportedChannels.map(channel => `${this.channelLookup[channel]}=${Math.round(newColor[channel] * 1000 / 255) / 1000}`).join(' ')
-
-    this.sendGcode(`SET_LED LED=${this.led.name} ${colorsString}`)
+    this.sendColor(newColor)
   }
 
-  convertFromNumberArray (colorData: number[]) : Record<Channel, number> {
-    const [r, g, b, w] = colorData.map(value => value * 255)
+  sendColor (color: Rgbw) {
+    const supportedChannels = this.supportedChannels.toLowerCase().split('') as (keyof Rgbw)[]
 
-    return {
-      r,
-      g,
-      b,
-      w
-    }
+    const colorsString = supportedChannels
+      .map(channel => ` ${this.channelLookup[channel]}=${Math.round(color[channel] * 1000 / 255) / 1000}`)
+      .join('')
+
+    this.sendGcode(`SET_LED LED=${this.led.name}${colorsString}`)
   }
 }
 </script>
diff --git a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
index 4f8becd12f..f2346cf952 100644
--- a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
+++ b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
@@ -2,7 +2,24 @@
   <collapsable-card
     :title="$t('app.general.title.runout_sensors')"
     icon="$printer3dNozzleAlert"
+    :draggable="!fullscreen"
+    :collapsable="!fullscreen"
+    layout-path="dashboard.runout-sensors-card"
   >
+    <template #menu>
+      <app-btn
+        v-if="!fullscreen"
+        color=""
+        fab
+        x-small
+        text
+        class="ms-1 my-1"
+        @click="$filters.routeTo($router, '/tune')"
+      >
+        <v-icon>$fullScreen</v-icon>
+      </app-btn>
+    </template>
+
     <v-card-text>
       <v-layout
         v-for="item in sensors"
@@ -31,12 +48,15 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import type { RunoutSensor } from '@/store/printer/types'
 
 @Component({})
 export default class RunoutSensorsCard extends Mixins(StateMixin) {
+  @Prop({ type: Boolean })
+  readonly fullscreen?: boolean
+
   get sensors () {
     return this.$store.getters['printer/getRunoutSensors']
   }
diff --git a/src/components/widgets/spoolman/QRReader.vue b/src/components/widgets/spoolman/QRReader.vue
index 288dd1e995..bb1e75c710 100644
--- a/src/components/widgets/spoolman/QRReader.vue
+++ b/src/components/widgets/spoolman/QRReader.vue
@@ -53,9 +53,13 @@ export default class QRReader extends Mixins(StateMixin, BrowserMixin) {
 
   get camera () {
     if (this.source === 'device') {
-      return { name: this.$t('app.spoolman.label.device_camera'), service: 'device' }
+      return {
+        name: this.$t('app.spoolman.label.device_camera').toString(),
+        service: 'device'
+      }
     }
-    return this.$store.getters['cameras/getCameraById'](this.source)
+
+    return this.$store.getters['webcams/getWebcamById'](this.source)
   }
 
   get open () {
diff --git a/src/components/widgets/spoolman/SpoolSelectionDialog.vue b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
index 52b3170710..5455102e37 100644
--- a/src/components/widgets/spoolman/SpoolSelectionDialog.vue
+++ b/src/components/widgets/spoolman/SpoolSelectionDialog.vue
@@ -3,17 +3,12 @@
     v-model="open"
     scrollable
     :max-width="isMobileViewport ? '90vw' : '75vw'"
+    :title="$tc('app.spoolman.title.spool_selection', targetMacro ? 2 : 1, { macro: targetMacro })"
     title-shadow
   >
-    <template #title>
-      <span class="focus--text">
-        {{ $tc('app.spoolman.title.spool_selection', targetMacro ? 2 : 1, { macro: targetMacro }) }}
-      </span>
-
-      <v-spacer />
-
+    <template #menu>
       <v-menu
-        v-if="cameras.length > 1"
+        v-if="availableCameras.length > 1"
         left
         offset-y
         transition="slide-y-transition"
@@ -43,9 +38,9 @@
         </template>
         <v-list dense>
           <v-list-item
-            v-for="camera in cameras"
-            :key="camera.id"
-            @click="scanSource = camera.id"
+            v-for="camera in availableCameras"
+            :key="camera.uid"
+            @click="cameraScanSource = camera.uid"
           >
             <v-list-item-icon>
               <v-icon>
@@ -62,10 +57,10 @@
       </v-menu>
 
       <app-btn
-        v-else-if="cameras.length"
+        v-else-if="availableCameras.length"
         small
         class="ms-1 my-1"
-        @click="cameraScanSource = cameras[0].id"
+        @click="cameraScanSource = availableCameras[0].uid"
       >
         <v-icon
           class="mr-1"
@@ -97,7 +92,7 @@
       />
     </v-toolbar>
 
-    <v-card-text class="pt-0">
+    <v-card-text class="fill-height pt-0">
       <v-data-table
         :items="availableSpools"
         :headers="visibleHeaders"
@@ -160,21 +155,20 @@
     </v-card-text>
 
     <template #actions>
+      <v-spacer v-if="isMobileViewport" />
+
       <app-btn
         v-if="spoolmanURL"
         :href="spoolmanURL"
         target="_blank"
+        color="primary"
+        text
+        type="button"
       >
-        <v-icon
-          small
-          class="mr-2"
-        >
-          $edit
-        </v-icon>
-        {{ isMobileViewport ? '' : $tc('app.spoolman.btn.manage_spools') }}
+        {{ $t('app.spoolman.btn.manage_spools') }}
       </app-btn>
 
-      <v-spacer />
+      <v-spacer v-if="!isMobileViewport" />
 
       <app-btn
         text
@@ -187,16 +181,13 @@
         color="primary"
         @click="handleSelectSpool"
       >
-        <v-icon class="mr-2">
-          {{ filename ? '$printer' : '$send' }}
-        </v-icon>
         {{ filename ? $t('app.general.btn.print') : $tc('app.spoolman.btn.select', targetMacro ? 2 : 1, { macro: targetMacro }) }}
       </app-btn>
     </template>
 
     <QRReader
-      v-if="scanSource"
-      v-model="scanSource"
+      v-if="cameraScanSource"
+      v-model="cameraScanSource"
       @detected="handleQRCodeDetected"
     />
   </app-dialog>
@@ -209,7 +200,7 @@ import { SocketActions } from '@/api/socketActions'
 import type { MacroWithSpoolId, Spool } from '@/store/spoolman/types'
 import BrowserMixin from '@/mixins/browser'
 import QRReader from '@/components/widgets/spoolman/QRReader.vue'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 import QrScanner from 'qr-scanner'
 import type { AppTableHeader } from '@/types'
 
@@ -246,7 +237,7 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
         this.$nextTick(() => (this.cameraScanSource = 'device'))
       } else {
         const autoOpenCameraId = this.autoOpenQRDetectionCamera
-        if (this.$store.getters['cameras/getCameraById'](autoOpenCameraId)) {
+        if (this.$store.getters['webcams/getWebcamById'](autoOpenCameraId)) {
           this.$nextTick(() => (this.cameraScanSource = autoOpenCameraId))
         }
       }
@@ -279,7 +270,7 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
       spools.push({
         ...spool,
         filament_name: filamentName,
-        filament_material: spool.filament.material
+        material: spool.filament.material
       })
     }
 
@@ -342,26 +333,25 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
     return this.$store.state.spoolman.dialog.targetMacro
   }
 
-  get cameras () {
-    const cameras = this.$store.getters['cameras/getEnabledCameras']
-      .filter((camera: CameraConfig) => camera.service !== 'iframe')
+  get enabledWebcams (): WebcamConfig[] {
+    return this.$store.getters['webcams/getEnabledWebcams'] as WebcamConfig[]
+  }
+
+  get availableCameras (): Pick<WebcamConfig, 'uid' | 'name'>[] {
+    const cameras: Pick<WebcamConfig, 'uid' | 'name'>[] = this.enabledWebcams
+      .filter(camera => camera.service !== 'iframe')
 
     if (this.hasDeviceCamera) {
       // always show device camera first
-      cameras.unshift({ name: this.$t('app.spoolman.label.device_camera'), id: 'device' })
+      cameras.unshift({
+        name: this.$t('app.spoolman.label.device_camera').toString(),
+        uid: 'device'
+      })
     }
 
     return cameras
   }
 
-  get scanSource () {
-    return this.cameraScanSource
-  }
-
-  set scanSource (source) {
-    this.cameraScanSource = source
-  }
-
   handleQRCodeDetected (id: number) {
     this.cameraScanSource = null
     this.selectedSpoolId = id
diff --git a/src/components/widgets/status/PauseAtLayerDialog.vue b/src/components/widgets/status/PauseAtLayerDialog.vue
index 7aa5e81719..9288768769 100644
--- a/src/components/widgets/status/PauseAtLayerDialog.vue
+++ b/src/components/widgets/status/PauseAtLayerDialog.vue
@@ -6,7 +6,7 @@
     :save-button-text="$t('app.general.btn.accept')"
     @save="sendAccept"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <template v-if="setPauseNextLayerMacro">
         <app-setting :title="$t('app.general.label.pause_at_next_layer')">
           <v-switch
@@ -74,7 +74,7 @@
           </app-setting>
         </template>
       </template>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
diff --git a/src/components/widgets/system/McuInformationDialog.vue b/src/components/widgets/system/McuInformationDialog.vue
index 3e1904e55e..df2f83e439 100644
--- a/src/components/widgets/system/McuInformationDialog.vue
+++ b/src/components/widgets/system/McuInformationDialog.vue
@@ -5,7 +5,7 @@
     max-width="500"
     no-actions
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <v-card flat>
         <v-card-title>{{ $t('app.system_info.label.constants') }}</v-card-title>
 
@@ -37,7 +37,7 @@
           </tbody>
         </v-simple-table>
       </v-card>
-    </div>
+    </v-card-text>
   </app-dialog>
 </template>
 
diff --git a/src/components/widgets/system/SystemOverviewCard.vue b/src/components/widgets/system/SystemOverviewCard.vue
index 00b851dbdf..d6bc3afbad 100644
--- a/src/components/widgets/system/SystemOverviewCard.vue
+++ b/src/components/widgets/system/SystemOverviewCard.vue
@@ -4,6 +4,24 @@
     icon="$desktopTower"
   >
     <template #menu>
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <app-btn
+            v-bind="attrs"
+            color=""
+            fab
+            x-small
+            text
+            class="ms-1 my-1"
+            v-on="on"
+            @click="peripheralsDialogOpen = true"
+          >
+            <v-icon>$devices</v-icon>
+          </app-btn>
+        </template>
+        <span>{{ $t('app.system_info.label.devices') }}</span>
+      </v-tooltip>
+
       <v-tooltip
         v-if="canRolloverLogs"
         bottom
@@ -58,10 +76,10 @@
               <th>{{ $t('app.system_info.label.operating_system') }}</th>
               <td>{{ distribution.name }}</td>
             </tr>
-            <tr v-if="distribution.release_info?.name">
+            <tr v-if="distributionName">
               <th>{{ $t('app.system_info.label.distribution_name') }}</th>
               <td>
-                {{ distribution.release_info.name }} {{ distribution.release_info.version_id }}
+                {{ distributionName }}
               </td>
             </tr>
             <tr v-if="distribution.like">
@@ -94,6 +112,11 @@
       v-if="rolloverLogsDialogOpen"
       v-model="rolloverLogsDialogOpen"
     />
+
+    <peripherals-dialog
+      v-if="peripheralsDialogOpen"
+      v-model="peripheralsDialogOpen"
+    />
   </collapsable-card>
 </template>
 
@@ -105,6 +128,7 @@ import StateMixin from '@/mixins/state'
 @Component({})
 export default class PrinterStatsCard extends Mixins(StateMixin) {
   rolloverLogsDialogOpen = false
+  peripheralsDialogOpen = false
 
   get systemInfo (): SystemInfo | null {
     return this.$store.getters['server/getSystemInfo']
@@ -118,6 +142,22 @@ export default class PrinterStatsCard extends Mixins(StateMixin) {
     return this.systemInfo?.distribution || {} as DistroInfo
   }
 
+  get distributionName (): string | undefined {
+    const { name, id } = this.distribution
+
+    if (name) {
+      if (name.startsWith('0.')) {
+        return undefined
+      }
+
+      return `${(
+        name.startsWith('#')
+          ? id
+          : name
+      )} ${this.distribution.release_info?.version_id} ?? ''`
+    }
+  }
+
   get virtualization () {
     return this.systemInfo?.virtualization || {} as Virtualization
   }
diff --git a/src/components/widgets/timelapse/TimelapseRenderSettingsDialog.vue b/src/components/widgets/timelapse/TimelapseRenderSettingsDialog.vue
index cd668fb92f..7dd5055205 100644
--- a/src/components/widgets/timelapse/TimelapseRenderSettingsDialog.vue
+++ b/src/components/widgets/timelapse/TimelapseRenderSettingsDialog.vue
@@ -5,7 +5,7 @@
     max-width="640"
     :no-actions="!renderable"
   >
-    <div class="overflow-y-auto">
+    <v-card-text class="pa-0">
       <app-setting
         :title="$t('app.timelapse.setting.variable_fps')"
         :sub-title="subtitleIfBlocked(variableFpsBlocked)"
@@ -180,7 +180,7 @@
           @click.native.stop
         />
       </app-setting>
-    </div>
+    </v-card-text>
 
     <template #actions>
       <v-spacer />
diff --git a/src/components/widgets/timelapse/TimelapseStatusCard.vue b/src/components/widgets/timelapse/TimelapseStatusCard.vue
index 833d33bf70..97ff053d78 100644
--- a/src/components/widgets/timelapse/TimelapseStatusCard.vue
+++ b/src/components/widgets/timelapse/TimelapseStatusCard.vue
@@ -79,6 +79,7 @@ import type { RenderStatus, TimelapseLastFrame, TimelapseSettings } from '@/stor
 import { SocketActions } from '@/api/socketActions'
 import CameraItem from '@/components/widgets/camera/CameraItem.vue'
 import FilesMixin from '@/mixins/files'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 @Component({
   components: {
@@ -125,8 +126,8 @@ export default class StatusCard extends Mixins(StateMixin, FilesMixin) {
     return this.lastFrame?.uniqueCount
   }
 
-  get camera () {
-    return this.$store.getters['cameras/getCameraById'](this.settings.camera)
+  get camera (): WebcamConfig | undefined {
+    return this.$store.getters['webcams/getWebcamById'](this.settings.camera) as WebcamConfig | undefined
   }
 
   get settings (): TimelapseSettings {
diff --git a/src/globals.ts b/src/globals.ts
index cfaf2d3a4a..da65f2be51 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -151,7 +151,8 @@ import {
   mdiMonitorScreenshot,
   mdiRotateLeft,
   mdiRotateRight,
-  mdiToothbrush
+  mdiToothbrush,
+  mdiUsb
 } from '@mdi/js'
 
 const mdiFilament = 'M 12 2 C 11.811244 2.0027 11.62182 2.01009 11.433594 2.0234375 C 11.245368 2.0367892 11.058338 2.0560871 10.871094 2.0800781 C 10.528376 2.1223311 10.188076 2.1823072 9.8515625 2.2597656 C 9.4050859 2.3584685 8.9659029 2.4876777 8.5371094 2.6464844 C 8.2433457 2.7507726 7.9546177 2.8687402 7.671875 3 L 7.6699219 3 C 7.2200923 3.2179359 6.7872406 3.4692919 6.375 3.7519531 C 6.1149723 3.9281592 5.8633915 4.1165194 5.6210938 4.3164062 C 5.2734281 4.6063526 4.9458497 4.9195737 4.640625 5.2539062 C 4.4299712 5.4884886 4.2305306 5.7329027 4.0429688 5.9863281 C 4.0007188 6.0418801 3.9590487 6.0978726 3.9179688 6.1542969 C 3.7241339 6.4206091 3.543575 6.6963363 3.3769531 6.9804688 C 3.3651531 7.0019097 3.3534369 7.0233949 3.3417969 7.0449219 C 2.9828732 7.6642764 2.691488 8.3203821 2.4726562 9.0019531 C 2.3383154 9.4325109 2.233258 9.8716656 2.1582031 10.316406 C 2.1085032 10.625133 2.0733024 10.936022 2.0527344 11.248047 L 2.0527344 11.25 L 2.0527344 11.251953 L 2.0527344 11.253906 L 2.0527344 11.255859 C 2.0258944 11.502973 2.00832 11.751383 2 12 C 2.000879 12.252257 2.0113 12.504391 2.03125 12.755859 L 2.0332031 12.767578 C 2.0566631 13.076458 2.0944624 13.384082 2.1464844 13.689453 C 2.2214943 14.129536 2.3258985 14.564103 2.4589844 14.990234 C 2.5675343 15.334756 2.6946769 15.673142 2.8398438 16.003906 L 2.8457031 16.017578 L 2.8535156 16.03125 C 2.9986205 16.362102 3.1616911 16.684839 3.3417969 16.998047 L 3.34375 17 C 3.5265728 17.317394 3.7267926 17.624495 3.9433594 17.919922 C 4.1600882 18.215026 4.3928602 18.498004 4.640625 18.767578 C 4.9426097 19.096141 5.2662503 19.404121 5.609375 19.689453 C 5.8509948 19.889955 6.1019244 20.078968 6.3613281 20.255859 C 6.7778367 20.540458 7.2152833 20.793132 7.6699219 21.011719 L 7.671875 21.011719 C 7.9543247 21.147608 8.2431027 21.27014 8.5371094 21.378906 C 8.956542 21.533797 9.3858911 21.660384 9.8222656 21.757812 L 9.8242188 21.757812 C 10.165943 21.833832 10.511518 21.891861 10.859375 21.931641 C 10.885405 21.935041 10.91144 21.938206 10.9375 21.941406 C 11.290376 21.979776 11.645044 21.99934 12 22 C 12.188756 21.9973 12.37818 21.98991 12.566406 21.976562 C 12.754632 21.963215 12.941662 21.943912 13.128906 21.919922 C 13.471624 21.877672 13.811924 21.817693 14.148438 21.740234 C 14.594914 21.641534 15.034096 21.512323 15.462891 21.353516 C 15.756653 21.249229 16.045381 21.131261 16.328125 21 L 16.330078 21 C 16.779908 20.782064 17.21276 20.530708 17.625 20.248047 C 17.885029 20.07184 18.136608 19.883481 18.378906 19.683594 C 18.726573 19.393647 19.054149 19.080425 19.359375 18.746094 C 19.570029 18.511511 19.76947 18.267097 19.957031 18.013672 C 19.999281 17.958122 20.040951 17.902127 20.082031 17.845703 C 20.275866 17.57939 20.456425 17.303665 20.623047 17.019531 C 20.634847 16.998091 20.646563 16.976598 20.658203 16.955078 C 21.017127 16.335724 21.308511 15.679617 21.527344 14.998047 C 21.661685 14.567489 21.766742 14.128334 21.841797 13.683594 C 21.891497 13.374867 21.926698 13.063978 21.947266 12.751953 L 21.947266 12.75 L 21.947266 12.748047 L 21.947266 12.746094 L 21.947266 12.744141 C 21.974096 12.496824 21.99169 12.248617 22 12 C 21.999121 11.747743 21.9887 11.495609 21.96875 11.244141 L 21.966797 11.232422 C 21.943337 10.923542 21.905537 10.615918 21.853516 10.310547 C 21.778506 9.8704641 21.6741 9.4358974 21.541016 9.0097656 C 21.432464 8.6652447 21.305324 8.3268573 21.160156 7.9960938 L 21.154297 7.9824219 L 21.146484 7.96875 C 21.001384 7.6379017 20.838309 7.315161 20.658203 7.0019531 L 20.65625 7 C 20.47338 6.6826091 20.273207 6.375505 20.056641 6.0800781 C 19.839912 5.7849746 19.60714 5.5019958 19.359375 5.2324219 C 19.05739 4.903859 18.73375 4.5958783 18.390625 4.3105469 C 18.149005 4.1100449 17.898076 3.921033 17.638672 3.7441406 C 17.222163 3.459542 16.784717 3.2068671 16.330078 2.9882812 L 16.328125 2.9882812 C 16.045675 2.8523915 15.756897 2.72986 15.462891 2.6210938 C 15.043458 2.4662029 14.614109 2.3396166 14.177734 2.2421875 L 14.175781 2.2421875 C 13.834058 2.1661636 13.488482 2.1081404 13.140625 2.0683594 C 13.114595 2.0649994 13.08856 2.0617537 13.0625 2.0585938 C 12.709629 2.0202237 12.354956 2.0006604 12 2 z M 10.701172 4.25 L 10.957031 4.3984375 L 11.066406 4.4609375 L 11.132812 4.5 L 11.566406 4.75 L 11.566406 5.75 L 11.132812 6 L 10.875 6.1484375 C 10.874877 6.1490598 10.875123 6.1497684 10.875 6.1503906 L 10.701172 6.25 L 10.267578 6 L 9.8359375 5.75 L 9.8359375 4.75 L 10.103516 4.5957031 L 10.701172 4.25 z M 13.298828 4.25 L 14.164062 4.75 L 14.164062 5.75 L 13.298828 6.25 L 12.433594 5.75 L 12.433594 4.75 L 13.298828 4.25 z M 8.8398438 4.6757812 L 8.96875 4.75 L 8.96875 5.75 L 8.5371094 6 L 8.1035156 6.25 L 7.2382812 5.75 L 7.2382812 5.578125 C 7.7356888 5.2168041 8.2730923 4.9140239 8.8398438 4.6757812 z M 15.160156 4.6757812 C 15.726909 4.914025 16.264309 5.2168044 16.761719 5.578125 L 16.761719 5.75 L 16.103516 6.1308594 L 15.896484 6.25 L 15.03125 5.75 L 15.03125 4.75 L 15.160156 4.6757812 z M 6.8046875 6.5 L 7.6699219 7 L 7.6699219 8 L 6.8046875 8.5 L 6.7011719 8.4394531 L 5.9394531 8 L 5.9394531 7.75 L 5.9394531 7 L 6.8046875 6.5 z M 9.4023438 6.5 L 10.267578 7 L 10.267578 7.8398438 L 10.267578 8 L 10.140625 8.0742188 L 9.8339844 8.25 L 9.4023438 8.5 L 8.9707031 8.25 L 8.5371094 8 L 8.5371094 7 L 8.96875 6.75 L 9.4023438 6.5 z M 12 6.5 L 12.865234 7 L 12.865234 7.75 L 12.865234 8 L 12.744141 8.0703125 C 12.743508 8.0701923 12.74282 8.0704324 12.742188 8.0703125 C 12.497492 8.0239396 12.249054 8.0001594 12 8 C 11.754037 8.00282 11.508857 8.0283149 11.267578 8.0761719 L 11.134766 8 L 11.134766 7.25 L 11.134766 7 L 11.896484 6.5605469 L 12 6.5 z M 14.597656 6.5 L 15.029297 6.75 L 15.462891 7 L 15.462891 8 L 14.597656 8.5 L 14.166016 8.25 L 13.732422 8 L 13.732422 7 L 14.166016 6.75 L 14.597656 6.5 z M 17.195312 6.5 L 17.298828 6.5605469 L 18.060547 7 L 18.060547 7.25 L 18.060547 8 L 17.298828 8.4394531 L 17.195312 8.5 L 16.330078 8 L 16.330078 7 L 17.195312 6.5 z M 5.5058594 8.75 L 6.3710938 9.25 L 6.3710938 10.25 L 5.5058594 10.75 L 4.640625 10.25 L 4.640625 9.25 L 5.5058594 8.75 z M 8.1035156 8.75 L 8.96875 9.25 L 8.96875 9.390625 C 8.6470443 9.7691664 8.398667 10.204324 8.2363281 10.673828 L 8.1035156 10.75 L 7.5449219 10.427734 L 7.2382812 10.25 L 7.2382812 9.25 L 8.1035156 8.75 z M 15.896484 8.75 L 16.761719 9.25 L 16.761719 10.25 L 16.328125 10.5 L 15.896484 10.75 L 15.775391 10.679688 C 15.6258 10.253096 15.401287 9.8581752 15.119141 9.5058594 C 15.089259 9.4685462 15.062498 9.4288507 15.03125 9.3925781 L 15.03125 9.390625 L 15.03125 9.25 L 15.462891 9 L 15.896484 8.75 z M 18.494141 8.75 L 19.359375 9.25 L 19.359375 10.25 L 18.494141 10.75 L 18.287109 10.630859 L 17.628906 10.25 L 17.628906 9.25 L 18.494141 8.75 z M 12 10 C 13.104568 10 14 10.895432 14 12 C 14 13.035532 13.213589 13.887814 12.205078 13.990234 C 12.137844 13.997062 12.069035 14 12 14 C 11.792894 14 11.592174 13.968592 11.404297 13.910156 C 11.028542 13.793284 10.701584 13.567814 10.457031 13.271484 C 10.416272 13.222096 10.377738 13.172341 10.341797 13.119141 C 10.126148 12.799939 10 12.414213 10 12 C 10 11.930965 10.002938 11.862156 10.009766 11.794922 C 10.037078 11.525986 10.119032 11.273584 10.242188 11.046875 C 10.396132 10.763489 10.614858 10.521504 10.880859 10.341797 C 10.93406 10.305855 10.990198 10.272976 11.046875 10.242188 C 11.330261 10.088243 11.654823 10 12 10 z M 4.2070312 11 L 5.0722656 11.5 L 5.0722656 11.75 L 5.0722656 12.5 L 4.2070312 13 L 4.0722656 12.921875 C 4.0304257 12.616234 4.0063 12.308428 4 12 C 4.00315 11.845786 4.0113888 11.690819 4.0234375 11.537109 C 4.0354862 11.383399 4.0513406 11.230945 4.0722656 11.078125 L 4.2070312 11 z M 6.8046875 11 L 7.2363281 11.25 L 7.6699219 11.5 L 7.6699219 12.5 L 6.8046875 13 L 6.7011719 12.939453 L 5.9394531 12.5 L 5.9394531 11.5 L 6.7011719 11.060547 L 6.8046875 11 z M 17.195312 11 L 17.298828 11.060547 L 18.060547 11.5 L 18.060547 12.5 L 17.298828 12.939453 L 17.195312 13 L 16.763672 12.75 L 16.330078 12.5 L 16.330078 11.5 L 17.195312 11 z M 19.792969 11 L 19.927734 11.078125 C 19.969574 11.383766 19.9937 11.691572 20 12 C 19.9937 12.308428 19.969584 12.616234 19.927734 12.921875 L 19.792969 13 L 18.927734 12.5 L 18.927734 12.25 L 18.927734 11.5 L 19.792969 11 z M 5.5058594 13.25 L 5.7128906 13.369141 L 6.3710938 13.75 L 6.3710938 14.75 L 5.5058594 15.25 L 4.640625 14.75 L 4.640625 13.75 L 5.5058594 13.25 z M 8.1035156 13.25 L 8.2246094 13.320312 C 8.3742003 13.746904 8.5987134 14.141825 8.8808594 14.494141 C 8.9107409 14.531454 8.9375015 14.571149 8.96875 14.607422 C 8.9690848 14.607816 8.968415 14.608981 8.96875 14.609375 L 8.96875 14.75 L 8.5371094 15 L 8.1035156 15.25 L 7.2382812 14.75 L 7.2382812 13.75 L 7.671875 13.5 L 8.1035156 13.25 z M 15.896484 13.25 L 16.455078 13.572266 L 16.761719 13.75 L 16.761719 14.75 L 15.896484 15.25 L 15.03125 14.75 L 15.03125 14.609375 C 15.288819 14.306302 15.495308 13.965789 15.652344 13.601562 C 15.6928 13.511265 15.729958 13.419415 15.763672 13.326172 L 15.896484 13.25 z M 18.494141 13.25 L 19.359375 13.75 L 19.359375 14.75 L 18.494141 15.25 L 17.628906 14.75 L 17.628906 13.75 L 18.494141 13.25 z M 6.8046875 15.5 L 7.6699219 16 L 7.6699219 17 L 6.8046875 17.5 L 6.7011719 17.439453 L 5.9394531 17 L 5.9394531 16.75 L 5.9394531 16 L 6.7011719 15.560547 L 6.8046875 15.5 z M 9.4023438 15.5 L 9.8339844 15.75 L 10.267578 16 L 10.267578 17 L 9.8339844 17.25 L 9.4023438 17.5 L 8.9707031 17.25 L 8.5371094 17 L 8.5371094 16.25 L 8.5371094 16 L 8.96875 15.75 L 8.9707031 15.75 L 9.4023438 15.5 z M 14.597656 15.5 L 15.029297 15.75 L 15.462891 16 L 15.462891 17 L 15.03125 17.25 L 14.597656 17.5 L 13.732422 17 L 13.732422 16.160156 L 13.732422 16 L 13.859375 15.925781 L 14.166016 15.75 L 14.597656 15.5 z M 17.195312 15.5 L 17.298828 15.560547 L 18.060547 16 L 18.060547 16.25 L 18.060547 17 L 17.195312 17.5 L 16.330078 17 L 16.330078 16 L 17.195312 15.5 z M 12.732422 15.923828 L 12.865234 16 L 12.865234 16.75 L 12.865234 17 L 12.103516 17.439453 L 12 17.5 L 11.134766 17 L 11.134766 16 L 11.255859 15.929688 C 11.256492 15.929808 11.25718 15.929568 11.257812 15.929688 C 11.502508 15.976059 11.750946 15.99984 12 16 C 12.122981 15.9986 12.244987 15.991227 12.367188 15.978516 C 12.489388 15.965806 12.611782 15.947758 12.732422 15.923828 z M 8.1035156 17.75 L 8.96875 18.25 L 8.96875 19.25 L 8.8398438 19.324219 C 8.2730923 19.085975 7.7356888 18.783196 7.2382812 18.421875 L 7.2382812 18.25 L 7.8964844 17.869141 L 8.1035156 17.75 z M 10.701172 17.75 L 11.566406 18.25 L 11.566406 19.25 L 10.701172 19.75 L 9.8359375 19.25 L 9.8359375 18.25 L 10.701172 17.75 z M 13.298828 17.75 L 13.732422 18 L 14.164062 18.25 L 14.164062 19.25 L 13.896484 19.404297 L 13.298828 19.75 L 13.042969 19.601562 L 12.867188 19.5 L 12.433594 19.25 L 12.433594 18.25 L 12.867188 18 L 13.125 17.851562 C 13.125123 17.85094 13.124877 17.850232 13.125 17.849609 L 13.298828 17.75 z M 15.896484 17.75 L 16.761719 18.25 L 16.761719 18.421875 C 16.264309 18.783196 15.726909 19.085977 15.160156 19.324219 L 15.03125 19.25 L 15.03125 18.25 L 15.462891 18 L 15.896484 17.75 z'
@@ -184,6 +185,8 @@ export const Globals = Object.freeze({
   LOCAL_CARDSTATE_STORAGE_KEY: 'cardState', // collapsed or not
   LOCAL_CARDLAYOUT_STORAGE_KEY: 'cardLayout2', // Specific layout / enabled / disabled
   LOCAL_INSTANCES_STORAGE_KEY: 'appInstances',
+  KLIPPER_MIN_VERSION: 'v0.11.0-257',
+  MOONRAKER_MIN_VERSION: 'v0.8.0-309',
   MOONRAKER_DB: {
     fluidd: {
       NAMESPACE: 'fluidd',
@@ -192,15 +195,14 @@ export const Globals = Object.freeze({
         macros: { name: 'macros', dispatch: 'macros/initMacros' },
         console: { name: 'console', dispatch: 'console/initConsole' },
         charts: { name: 'charts', dispatch: 'charts/initCharts' },
-        cameras: { name: 'cameras', dispatch: 'cameras/initLegacyCameras' },
+        cameras: { name: 'cameras', dispatch: 'webcams/initLegacyCameras', migrate_only: true },
+        webcams: { name: 'webcams', dispatch: 'webcams/initWebcams' },
         layout: { name: 'layout', dispatch: 'layout/initLayout' }
       }
     },
     webcams: {
       NAMESPACE: 'webcams',
-      ROOTS: {
-        webcams: { dispatch: 'cameras/initCameras' }
-      }
+      ROOTS: []
     }
   },
   MOONRAKER_COMPONENTS: {
@@ -406,7 +408,8 @@ export const Icons = Object.freeze({
   sensors: mdiGauge,
   screenshot: mdiMonitorScreenshot,
   zRotateClockwise: mdiRotateRight,
-  zRotateCounterclockwise: mdiRotateLeft
+  zRotateCounterclockwise: mdiRotateLeft,
+  devices: mdiUsb
 })
 
 export const Waits = Object.freeze({
@@ -464,7 +467,11 @@ export const Waits = Object.freeze({
   onQueryProbe: 'onQueryProbe',
   onVersionRefresh: 'onVersionRefresh',
   onSyncExtruder: 'onSyncExtruder',
-  onStepperEnable: 'onStepperEnable'
+  onStepperEnable: 'onStepperEnable',
+  onMachinePeripheralsUsb: 'onMachinePeripheralsUsb',
+  onMachinePeripheralsSerial: 'onMachinePeripheralsSerial',
+  onMachinePeripheralsVideo: 'onMachinePeripheralsVideo',
+  onMachinePeripheralsCanbus: 'onMachinePeripheralsCanbus'
 })
 
 export const SupportedLocales = Object.freeze([
@@ -502,6 +509,12 @@ export const SupportedImageFormats = Object.freeze([
   '.webp'
 ])
 
+export const SupportedMarkdownFormats = Object.freeze([
+  '.markdown',
+  '.md',
+  '.mdown'
+])
+
 export const SupportedVideoFormats = Object.freeze([
   '.mp4',
   '.mpeg',
diff --git a/src/init.ts b/src/init.ts
index d67055a22e..6d1add72e1 100644
--- a/src/init.ts
+++ b/src/init.ts
@@ -181,6 +181,10 @@ export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): P
       break
     }
 
+    if (Object.keys(ROOTS).length === 0) {
+      continue
+    }
+
     const result = await getMoorakerDatabase(apiConfig, NAMESPACE)
 
     apiAuthenticated = result.apiAuthenticated
diff --git a/src/locales/de.yaml b/src/locales/de.yaml
index cbac182267..9ba9760b40 100644
--- a/src/locales/de.yaml
+++ b/src/locales/de.yaml
@@ -115,6 +115,7 @@ app:
       duplicate_dir: Doppelter Ordner
       duplicate_file: Doppelte Datei
       go_to_file: Zur Datei gehen
+      devices: Geräte
     tooltip:
       low_on_space: Wenig Speicherplatz auf der Festplatte
       root_disabled: '{root} ist nicht verfügbar. Bitte überprüfen Sie Ihre Logdateien.'
@@ -229,6 +230,8 @@ app:
       select_columns: Spalten auswählen
       retry: Wiederholen
       multiply: Vermehren
+      copied: Kopiert
+      copy: Kopieren
     error:
       app_setup_link: >-
         Die Anforderungen für die Einrichtung von Fluidd finden Sie <a
@@ -350,6 +353,7 @@ app:
       circle: Kreis
       minimum_cruise_ratio: Minimales Konstantfahrtverhältnis
       compact: Kompakt
+      unknown: Unbekannt
     msg:
       password_changed: Passwort geändert
       wrong_password: Ups, etwas ist schiefgelaufen. Ist Ihr Passwort korrekt?
@@ -655,11 +659,14 @@ app:
       enable_xy_homing: XY-Homing aktivieren
       show_logo_on_background: Logo auf dem Hintergrund anzeigen
       print_in_progress_layout: Druckfortschritt-Layout
+      print_eta_calculation: Druckendzeit-Berechnung
+      print_progress_calculation: Druckfortschritt-Berechnung
     timer_options:
       duration: Nur Dauer
       filament: Filament-Schätzung
       file: Datei-Schätzung
       slicer: Slicer
+      slicer_m73: Slicer (M73)
     title:
       authentication: Authentifizierung
       camera: Kamera | Kameras
@@ -693,6 +700,8 @@ app:
         gerichtet werden.<br> Die Verwendung der Markennamen und Logos dient ausschließlich
         zu dekorativen und ästhetischen Zwecken und stellt keine offizielle Verbindung
         zu den Firmen oder eine Billigung dieser dar.
+      average_calculation: Wenn mehr als eine Option gewählt ist, wird ein Durchschnittswert
+        berechnet
   socket:
     msg:
       connecting: Verbinde mit Moonraker...
@@ -733,6 +742,17 @@ app:
       load: Last
       awake_time: Wachzeit
       memory_used: Genutzter Speicher
+      constants: Konstanten
+      last_stats: Letzte Statistiken
+      devices: Geräte
+    msg:
+      no_devices_found: Keine Geräte gefunden
+      no_devices_searched: Nutzen Sie den Aktualisieren-Knopf, um nach Geräten zu
+        suchen
+      canbus_warning: Nur unzugewiesene CAN-Bus-Knoten werden erkannt.<br>Es ist empfohlen,
+        nur ein unzugewiesenes Gerät an den CAN-Bus anzuschließen, um Kommunikationsprobleme
+        zu vermeiden.<br>Mehr Informationen finden Sie <a target="_blank" 
+        href="https://moonraker.readthedocs.io/en/latest/web_api/#query-unassigned-canbus-uuids">hier.</a>
   tool:
     btn:
       home_x: X
@@ -784,6 +804,9 @@ app:
       package_list: Paketliste
       up_to_date: AKTUELL
       updates_available: Updates sind verfügbar
+      old_component_version: Sie verwenden eine veraltete Version von %{name}, welche
+        nicht alle Features von Fluidd unterstützt.<b>Aktualisieren Sie %{name} auf
+        mindestens %{version}.
     status:
       finished: Aktualisierung abgeschlossen
       updating: Aktualisieren...
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 1da70bc033..bbd7f82a43 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -98,6 +98,7 @@ app:
       add_dir: Add Directory
       add_file: Add File
       command_palette: Command Palette
+      devices: Devices
       download_file: Retrieving file
       duplicate_dir: Duplicate Directory
       duplicate_file: Duplicate File
@@ -156,6 +157,8 @@ app:
       clear_profile: Clear Profile
       close: Close
       config_reference: Config Reference
+      copied: Copied
+      copy: Copy
       create_zip_archive: Create ZIP Archive
       delete: Delete
       download: Download
@@ -324,6 +327,7 @@ app:
       turn_device_on: Turn %{device} on
       turn_device_off: Turn %{device} off
       uncategorized: Uncategorized
+      unknown: Unknown
       unretract_extra_length: Unretract Extra Length
       unretract_speed: Unretract Speed
       upload_and_print: Upload and Print
@@ -586,7 +590,9 @@ app:
       optional: Optional
       power_toggle_in_top_nav: Power toggle in top navigation
       primary_color: Primary color
+      print_eta_calculation: Print ETA calculation
       print_in_progress_layout: Print in Progress layout
+      print_progress_calculation: Print Progress calculation
       printer_name: Printer Name
       reset: Reset settings
       retraction_icon_size: Retraction Icon Size
@@ -631,6 +637,7 @@ app:
       filament: Filament Estimation
       file: File Estimation
       slicer: Slicer
+      slicer_m73: Slicer (M73)
     title:
       authentication: Authentication
       console: Console
@@ -644,6 +651,7 @@ app:
       thermal_presets: Thermal Presets
       tool: Tool
     tooltip:
+      average_calculation: If more than one option is select, an average will be calculated
       diagnostics_performance: '[BETA] Logging diagnostics info may impact performance'
       gcode_coords: Use GCode position instead of toolhead position on dashboard
       show_manual_probe_dialog_automatically: Automatically shows helper dialog if running a Manual Probe tool
@@ -665,6 +673,7 @@ app:
       capacity: Capacity
       constants: Constants
       cpu_desc: CPU Description
+      devices: Devices
       distribution_codename: Codename
       distribution_like: Distribution Like
       distribution_name: Distribution
@@ -695,6 +704,13 @@ app:
       operating_system: Operating System
       version: Version
       virtualization: Virtualization
+    msg:
+      canbus_warning: >-
+        Only unassigned CAN bus nodes can be detected.<br>
+        It is recommended to have only one unassigned device connected to the CAN bus to avoid communication issues.<br>
+        More information can be found <a target="_blank" href="https://moonraker.readthedocs.io/en/latest/web_api/#query-unassigned-canbus-uuids">here.</a>
+      no_devices_found: No devices found
+      no_devices_searched: Use the refresh button to search for devices
   tool:
     btn:
       home_x: X
@@ -750,6 +766,8 @@ app:
       package_list: Package List
       up_to_date: UP TO DATE
       updates_available: Updates are available
+      old_component_version: >-
+        You are using an old version of %{name} that does not support all features of Fluidd.<br>Update %{name} to at least %{version}.
     status:
       finished: Updates finished
       updating: Updating...
diff --git a/src/locales/hu.yaml b/src/locales/hu.yaml
index 1242e88e16..e059e1467c 100644
--- a/src/locales/hu.yaml
+++ b/src/locales/hu.yaml
@@ -571,6 +571,7 @@ app:
       fps_target: FPS Cél
       fps_idle_target: FPS Cél, ha nincs fókuszban
       height: Magasság
+      hide_single_part_bounding_box: Alkatrészhatároló doboz elrejtése egyetlen tárgy nyomtatásakor
       gcode_coords: G-Kód koordináták használata
       icon: Ikon
       invert_x_control: Fordított (X) vezérlés
@@ -680,6 +681,7 @@ app:
         és/vagy frissítsd.
   system_info:
     label:
+      awake_time: Ébrenléti idő
       capacity: Kapacitás
       cpu_desc: CPU leírása
       distribution_codename: Kódnév
@@ -689,8 +691,10 @@ app:
       hardware_desc: Hardver leírás
       hostname: Gazdanév
       klipper_load: Klipper Terheltsége
+      load: Töltés
       manufactured: Gyártva
       manufacturer: Gyártó
+      memory_used: Memóriahasználat
       mcu_awake: '{mcu} Ébredés ideje'
       mcu_bandwidth: '{mcu} Sávszélesség'
       mcu_information: '{mcu} Információ'
@@ -867,6 +871,7 @@ app:
       tracking_inactive: >-
         A szálkövetés inaktív.
         A kezdéshez kérjük, válassz egy orsót.
+      not_connected: Spoolman szerver nem elérhető.
       info:
         howto: >-
           Mutasd meg az orsó QR-kódját a kamerának.
diff --git a/src/locales/it.yaml b/src/locales/it.yaml
index 87946811cc..bc794f29a7 100644
--- a/src/locales/it.yaml
+++ b/src/locales/it.yaml
@@ -9,6 +9,8 @@ app:
       remove_profile: Rimuovi il profilo %{name}
       scale: Riscala in min / max
       wireframe: Wireframe
+      active: Attiva
+      base: Base
     msg:
       hint: >-
         Se salvi come qualcosa di diverso da %{name}, puoi scegliere di
@@ -20,25 +22,31 @@ app:
       delete: Elimina profilo
       load: Carica profilo
       save: Salva il profilo calibrato in printer.cfg
+      copy_image: Copia immagine mesh
   chart:
     label:
       current: Effettivo
       item: Nome
       power: Energia
       target: Target
+      rate_of_change: Cambio
     tooltip:
       help: >-
-        Tieni premuto MAIUSC per ingrandire. <br /> Fai clic su un elemento per
-        attivare / disattivare il grafico. <br /> Fai clic su un valore
-        energetico per attivare / disattivare il grafico.
+        Tieni premuto MAIUSC per ingrandire. <br /> Fai clic su un elemento per attivare
+        / disattivare il grafico. <br /> Fai clic su un valore per attivare / disattivare
+        il grafico.
   console:
     label:
       auto_scroll: Scorrimento automatico
       hide_temp_waits: Nascondi i wait di temperatura
+      flip_layout: Specchia layout
     placeholder:
       command: >-
         "scheda" per il completamento automatico, "aiuto" per i comandi "frecce"
         per la cronologia
+    tooltip:
+      help: Scrivi "help" per l'elenco comandi<br />Usa<kbd>Tab</kbd> per l'autocompletamento<br
+        />Usa<kbd>&uarr;</kbd> e <kbd>&darr;</kbd> per la cronologia dei comandi
   endpoint:
     error:
       cant_connect: >-
@@ -78,6 +86,8 @@ app:
       label:
         print_start_time: Filtra per inizio di stampa
         print_start_time_desc: Non mostrare gli elementi che hai già stampato.
+        klipper_backup_files: Filtra backup di Klipper
+        hidden_files_folders: Filtra cartelle e file nascosti
     label:
       dir_name: Nome della directory
       disk_usage: Utilizzo del disco
@@ -86,6 +96,7 @@ app:
       file_name: Nome del file
       transfer_rate: Rateo di trasferimento
       uploaded: Caricato
+      view_section_documentation: Vedi documentazione per '%{section}'
     msg:
       not_found: Nessun file trovato
       processing: Calcolando
@@ -98,8 +109,16 @@ app:
       upload_file: |-
         Caricamento file |
         Caricamento files
+      go_to_file: Vai a file
+      duplicate_file: Duplica File
+      duplicate_dir: Duplica Cartella
     tooltip:
       low_on_space: Spazio su disco insufficiente
+      items_count: '{count} oggetto | {count} oggetti'
+    overlay:
+      drag_files_folders_upload: <strong>Trascina qui</strong> file e cartelle per
+        caricarli
+      drag_files_enqueue: <strong>Trascina qui</strong> file da accodare
   gcode:
     btn:
       load_current_file: Carica file attuale
@@ -114,10 +133,15 @@ app:
       show_next_layer: Mostra il prossimo Layer
       show_previous_layer: Mostra il Layer precedente
       show_retractions: Mostra ritrazioni
+      exclude_object: Escludi Oggetto
+      show_parts: Mostra parti
+      show_current_layer: Vedi layer corrente
     msg:
       confirm: >-
         Il file "%{filename}" è di %{size}, potrebbe essere intensivo sulle
         risorse del tuo sistema. Sei sicuro?
+    overlay:
+      drag_file_load: <strong>Trascina qui</strong> un file gcode per caricarlo
   general:
     btn:
       add: Aggiungi
@@ -167,6 +191,13 @@ app:
       upload: Carica
       upload_print: Carica & Stampa
       view: Visualizza
+      delete: Elimina
+      filter: Filtra
+      add_to_queue: Aggiungi alla coda
+      create_zip_archive: Crea Archivio ZIP
+      duplicate: Duplica
+      abort: Annulla
+      accept: Accetta
     error:
       app_setup_link: >-
         Puoi trovare i requisiti di configurazione di Fluidd <a target="_blank"
diff --git a/src/locales/ja.yaml b/src/locales/ja.yaml
index b6529cb0c6..b29a876db9 100644
--- a/src/locales/ja.yaml
+++ b/src/locales/ja.yaml
@@ -2,6 +2,7 @@ app:
   bedmesh:
     label:
       active: アクティブ
+      base: ベース
       box_scale: ボックススケール
       flat_surface: 平面を表示する
       mesh_matrix: メッシュマトリックス
@@ -16,6 +17,7 @@ app:
       not_loaded: メッシュを読込しない
     tooltip:
       calibrate: 新しいキャリブレーションを開始し、プロファイル'default'として保存します
+      copy_image: ベッドメッシュ画像をコピー
       delete: プロファイルを削除します。
       load: プロファイルを読込み
       save: キャリブレーションされたプロファイルをprinter.cfgに書込みします。
@@ -35,8 +37,10 @@ app:
       auto_scroll: オートスクロール
       flip_layout: レイアウト上下変更
       hide_temp_waits: 待機中を隠す
-    placeholder:
-      command: タブでオートコンプリート、helpと入力でコマンド一覧表示 矢印で履歴ーを表示
+    tooltip:
+      help: >-
+        コマンドに「help」と入力します<br />オートコンプリートには <kbd>タブ</kbd> を使用します<br />履歴には
+        <kbd>&uarr;</kbd> と <kbd>&darr;</kbd> を使用します
   endpoint:
     error:
       cant_connect: 何か問題が発生し、fluiddがアドレスに接続できません。このアドレスで間違いないですか？
@@ -61,8 +65,10 @@ app:
   file_system:
     filters:
       label:
+        crowsnest_backup_files: Crowsnest バックアップ ファイルのフィルタリング
         hidden_files_folders: 隠しファイル・隠しフォルダの非表示
         klipper_backup_files: バックアップファイルを非表示
+        moonraker_backup_files: Moonraker バックアップ ファイルをフィルタリングする
         print_start_time: 印刷済みを隠す
         print_start_time_desc: すでに印刷したものをフィルタリングします。
         rolled_log_files: ロールされたログファイルを非表示
@@ -93,9 +99,11 @@ app:
       rename_file: ファイル名変更
       upload_file: ファイルをアップロードする｜ファイルをアップロードする
     tooltip:
+      items_count: '{count} アイテム | {count} 個のアイテム'
       low_on_space: ディスク容量が少なくなりました。
       root_disabled: '{root} rootは使用できません。ログを確認してください。'
     url:
+      crowsnest_config: 'https://crowsnest.mainsail.xyz/configuration/%{hash}-section'
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'
       moonraker_config: 'https://moonraker.readthedocs.io/en/latest/configuration/#%{hash}'
       moonraker_telegram_bot_config: >-
@@ -120,6 +128,8 @@ app:
       show_retractions: リトラクションの表示
     msg:
       confirm: '"%{filename}"は %{size}です。これは、システムにとってリソースを大量に消費する可能性があります。よろしいですか？'
+    overlay:
+      drag_file_load: <strong>ここに gcode ファイルをドラッグ</strong> して読み込みます
   general:
     btn:
       abort: アボート
@@ -154,6 +164,7 @@ app:
       login: ログイン
       logout: ログアウト
       more_information: 詳細はこちら
+      multiply: 増やす
       pause: 一時停止
       preheat: プレヒート
       presets: プリセット
@@ -163,6 +174,7 @@ app:
       reboot: 再起動
       recover: 回復する
       refresh: リフレッシュ
+      refresh_metadata: メタデータを更新する
       reload: 再読み込み
       remove: 削除
       remove_all: すべて削除
@@ -178,6 +190,7 @@ app:
       restart_service_moonraker: Moonrakerを再起動する
       resume: 再始動
       retract: リトラクト
+      retry: リトライ
       return_dashboard: ダッシュボードに戻る
       save: 保存
       save_as: 名前を付けて保存
@@ -218,12 +231,16 @@ app:
       api_url: API URL
       apply_z_offset: Z_Offsetの適用と保存
       auth_source: 認証元
+      bars: バー
       category: カテゴリー
       change_password: パスワードの変更
+      circle: サークル
       clear_all: すべてクリア
       color: カラー
       command: コマンド
+      compact: コンパクト
       confirm: 確認
+      cross: クロス
       current_password: 現在のパスワード
       current_user: 現在の使用者
       default: デフォルト
@@ -251,6 +268,7 @@ app:
       low: 低い
       m117: M117
       manage_accounts: アカウントの管理
+      minimum_cruise_ratio: 最小巡航比
       moonraker: Moonraker
       name: 名前
       new_password: 新しいパスワード
@@ -267,6 +285,7 @@ app:
       pressure_advance: 圧力上昇
       printers: プリンター
       progress: 進捗
+      range: 範囲
       requested_speed: スピード
       retract_length: リトラクト長
       retract_speed: リトラクト速度
@@ -331,11 +350,16 @@ app:
         required: 必須
       msg:
         confirm: よろしいですか？
+        confirm_cancel_print: 現在の印刷をキャンセルしてもよろしいですか?
+        confirm_clear_mesh: プリンターは現在稼働中です。ベッドのメッシュをクリアしてもよろしいですか?
         confirm_delete: 'いいですか？選択した項目が削除されます。| 本当によろしいですか？選択されている {count} 個の項目を削除します。'
+        confirm_emergency_stop: プリンターを緊急停止してもよろしいですか?
         confirm_exclude_object: このオブジェクトを印刷から除外してもよろしいですか?
         confirm_forcemove_toggle: これにより、プリンターが損傷する可能性があります。よろしいですか？
+        confirm_load_bedmesh_profile: 'プリンターは現在稼働中です。プロファイル %{name}をロードしてもよろしいですか?'
         confirm_power_device_toggle: このデバイスの電源が切り替わります。よろしいですか？
         confirm_reboot_host: ホストシステムが再起動されます。よろしいですか？
+        confirm_remove_user: 'ユーザー %{username}を削除してもよろしいですか?'
         confirm_service_restart: '%{name} サービスを再起動してよろしいですか？'
         confirm_service_start: ' %{name} サービスを開始しますか?'
         confirm_service_stop: ' %{name} サービスを停止してよろしいですか？'
@@ -409,6 +433,10 @@ app:
     tooltip:
       browse_metrics: 利用可能なメトリックを閲覧する
       estop: 緊急停止
+      file_browser_configuration_help: ファイルとフォルダーをここからドラッグ＆ドロップすることで、構成ファイルにコピーします。
+      file_browser_help: >-
+        ブラウザの外部からファイルやフォルダをドラッグ＆ドロップして、ここにアップロードします。<br>ファイルやフォルダをサブフォルダまたは「..」にドラッグ
+        ＆ドロップして移動します。
       managed_by_moonraker: Moonraker 構成によって管理されます
       notifications: 通知
       reload_klipper: klipper の設定を再読み込みする。
@@ -422,8 +450,15 @@ app:
       confirm_jobs: これですべてのジョブがクリアされます。よろしいですか？
       confirm_stats: これですべての統計情報がクリアされます。よろしいですか？
   job_queue:
+    label:
+      number_of_copies: 部数
     msg:
       confirm: これでプリンターキュー全体がクリアされます。よろしいですか？
+    title:
+      multiply_job: ジョブを乗算する |ジョブを増やす
+    tooltip:
+      help: >-
+        ジョブからファイルをドラッグしてここにドロップして、ジョブをキューに入れます。<br>キューに入れられたジョブの順序を上下にドラッグして調整します。
   printer:
     state:
       busy: 印刷中
@@ -435,6 +470,11 @@ app:
       printing: 印刷中
       ready: 準備完了
       standby: スタンバイ
+    title:
+      printer_status: プリンターのステータス
+  sensors:
+    title:
+      sensors: センサー
   setting:
     btn:
       add_camera: カメラを追加
@@ -456,6 +496,8 @@ app:
       mjpegadaptive: MJPEG Adaptive
       mjpegstream: MJPEG Stream
       video: IP Camera
+      webrtc_camera_streamer: WebRTC (カメラストリーマー)
+      webrtc_gortc: WebRTC (go2rtc)
     label:
       all_off: すべてオフ
       all_on: すべてオン
@@ -474,6 +516,8 @@ app:
         title: フルスクリーンアクション
       camera_rotate_by: 回転させる
       camera_stream_type: ストリームタイプ
+      camera_url_snapshot: 'カメラのスナップショット URL '
+      camera_url_stream: カメラのストリームURL
       card: カード
       collector: コレクタ
       confirm_dirty_editor_close: 保存されていない変更内容でエディタを閉じる場合、確認を表示する。
@@ -492,9 +536,11 @@ app:
       default_toolhead_z_speed: デフォルトのツールヘッドZ速度
       dotted: 点在
       draw_background: 背景を描く
+      draw_origin: 描画原点
       enable: 有効化
       enable_diagnostics: 診断を有効にする
       enable_notifications: 通知を有効にする
+      enable_xy_homing: XY ホーミングを有効にする
       expression: 表現方法
       extrusion_line_width: 押し出し線幅
       fill_color: 塗りつぶしの色
@@ -507,6 +553,7 @@ app:
       fps_target: FPSターゲット
       gcode_coords: GCode座標を使用する
       height: 高さ
+      hide_single_part_bounding_box: 単一パーツを印刷するときにパーツの境界ボックスを非表示にする
       icon: アイコン
       invert_x_control: Xコントロールを反転
       invert_y_control: Yコントロールを反転
@@ -521,24 +568,31 @@ app:
       min: 最小
       move_line_width: 線幅の移動
       name: 名称
+      never: しない
       none: 無し
       optional: オプション
       power_toggle_in_top_nav: 上部ナビゲーションの電源切り替え
       primary_color: 現在の色
+      print_in_progress_layout: 印刷中のレイアウト
       printer_name: プリンター名
       reset: 設定をリセット
       retraction_icon_size: 引き込みアイコンのサイズ
       right_y: 右 Y 軸
+      save_and_restore_view_state: ビューステートの保存と復元
+      sections_to_ignore_pending_configuration_changes: 保留中のセクション構成変更を無視する
       show_animations: アニメーションを表示する
       show_barometric_pressure: 気圧を表示
       show_bed_screws_adjust_dialog_automatically: ベッドスクリュー調整ダイアログを自動的に表示
+      show_chart: チャートを表示
       show_code_lens: CodeLens を表示
       show_gas_resistance: 耐ガス性を示す
       show_legend: 凡例を表示
+      show_logo_on_background: 背景にロゴを表示
       show_manual_probe_dialog_automatically: 手動プローブ ダイアログを自動的に表示
       show_rate_of_change: 温度変化率を表示する
       show_relative_humidity: 相対湿度を表示
       show_save_config_and_restart: '上部ナビゲーションに [設定を保存して再起動] ボタン'
+      show_screws_tilt_adjust_dialog_automatically: ネジの傾き調整ダイアログを自動的に表示
       show_upload_and_print: '上部のナビゲーションに [アップロードと印刷] ボタンを表示する'
       solid: ソリッド
       starts_with: で始まる
@@ -548,7 +602,12 @@ app:
       thermal_preset_name: プリセット名
       time_format: 時間表示方法
       title: タイトル
+      to_browser_local_storage: ブラウザのローカルストレージへ
+      to_browser_session_storage: ブラウザセッションストレージへ
+      toolhead_control_style: ツールヘッドの制御スタイル
       toolhead_move_distances: ツールヘッド距離値
+      toolhead_xy_move_distances: ツールヘッドの XY 距離値
+      toolhead_z_move_distances: ツールヘッドの Z 距離の値
       type: タイプ
       unit: 単位
       z_adjust_values: Z値を調整します
@@ -561,6 +620,7 @@ app:
       authentication: 認証
       camera: カメラ｜カメラ
       console: コンソール
+      file_browser: ファイルブラウザ
       file_editor: ファイルエディタ
       gcode_preview: Gコードプレビュー
       general: 全般
@@ -573,13 +633,68 @@ app:
       gcode_coords: ダッシュボードのツールヘッド位置の代わりにGCode位置を使用する
       show_bed_screws_adjust_dialog_automatically: BED_SCREWS_ADJUST ツールを実行している場合、自動的にヘルパー ダイアログを表示します
       show_manual_probe_dialog_automatically: Manual Probe ツールを実行している場合、自動的にヘルパー ダイアログを表示します
+      show_screws_tilt_adjust_dialog_automatically: SCREWS_TILT_CALCULATE ツールを実行している場合、ヘルパー ダイアログが自動的に表示されます
+      theme_disclaimer: >-
+        これらのテーマには、それぞれの所有者の知的財産であるブランド名とロゴが使用されています。<br>
+        これらの名前とロゴの掲載は、ブランドの許可を得て行われています。<br>
+        ただし、これらのテーマはそれぞれのブランドによって正式に管理されているわけではないことに注意してください。<br>
+        テーマに関連する問題や問い合わせは、Fluidd チームに送信してください。<br>
+        ブランド名とロゴの使用は、装飾と美観のみを目的としており、ブランドとの正式な関係やブランドによる承認を意味するものではありません。
   socket:
     msg:
       connecting: moonrakerに接続しています...
       no_connection: moonraker接続はありません。moonrakerのステータスを確認するか、更新してください。
+  spoolman:
+    btn:
+      manage_spools: スプールの管理
+      scan_code: コードをスキャン
+      select: '選択 | {macro}を選択してください'
+    label:
+      active_spool: アクティブスプール
+      change_spool: スプール変更
+      comment: コメント
+      device_camera: デバイス
+      filament_name: フィラメント
+      first_used: 最初の使用
+      id: ID
+      last_used: 最後に使用した
+      location: ロケーション
+      lot_nr: ロット番号
+      material: 素材
+      remaining_weight: 残り
+      vendor: ベンダー
+    msg:
+      error:
+        cors: カメラ フィードへのアクセス中にエラーが発生しました。 Web カメラサーバーが CORS アクセスを許可していることを確認してください。
+        no_image_data: カメラ フィードへのアクセス中にエラーが発生しました。カメラの構成を確認するか、別のカメラ ソースを試してください。
+        spool_not_existant: スキャンしたスプールはデータベースに存在しません。
+      info:
+        howto: スプールの QR コードをカメラに見せてください。このウィンドウは、スプールが検出されるとすぐに閉じます。
+      mismatched_filament: 選択したフィラメントの材質がスライサーで選択した材質と一致しません。続行してもよろしいですか?
+      no_filament: 選択したスプールには、印刷ジョブを正常に完了するのに十分なフィラメントが残っていない可能性があります。続行してもよろしいですか?
+      no_required_length: 選択したファイルを印刷するために必要なフィラメントの量は不明です。続行しますか?
+      no_spool: スプールが選択されていません。フィラメントトラッキングなしで印刷してもよろしいですか?
+      not_connected: Spoolman サーバーが利用できません。
+      tracking_inactive: フィラメント追跡は非アクティブです。まず、スプールを選択してください。
+      warning:
+        code_not_recognized: このコードは互換性のある QR コードではないようです。
+        invalid_spool_id: この QR コードに含まれるスプール ID は無効です。
+    setting:
+      auto_open_qr_camera: QRコード検出のためにカメラを自動的に開きます
+      auto_select_spool_on_match: QRコード一致時にスプール選択を自動的にコミット
+      prefer_device_camera: 可能な場合はデバイスのカメラを QR コード検出に使用します
+      show_spool_selection_dialog_on_print_start: 印刷開始時にスプール選択ダイアログを表示する
+      warn_on_filament_type_mismatch: スプールのフィラメント タイプとスライサーで選択したフィラメント タイプが一致しない場合に警告を表示します。
+      warn_on_not_enough_filament: 選択したスプールに印刷を完了するのに十分なフィラメントが残っていない場合に警告を表示します。
+    title:
+      scan_spool: スプールのスキャン
+      spool_selection: 'スプールの選択 |マクロ {macro}のスプール選択'
+      spoolman: Spoolman
   system_info:
     label:
+      awake_time: 起動時間
       capacity: 容量
+      constants: 定数
       cpu_desc: CPUの説明
       distribution_codename: コード名
       distribution_like: 参照ディストリビューション
@@ -588,12 +703,15 @@ app:
       hardware_desc: ハードウェアの説明
       hostname: ホスト名
       klipper_load: Klipper 稼働状況
+      last_stats: 最新の統計
+      load: 負荷
       manufactured: 製造日
       manufacturer: メーカー
       mcu_awake: '{mcu} アウェイクタイム'
       mcu_bandwidth: '{mcu} 帯域幅'
       mcu_information: '{mcu} 情報'
       mcu_load: '{mcu} 稼働状況'
+      memory_used: 使用メモリ
       micro_controller: マイクロコントローラー
       model: CPUモデル
       moonraker_load: Moonraker稼働状況
@@ -680,6 +798,7 @@ app:
     title:
       bed_screws_adjust: ベッドスクリューの調整
       manual_probe: マニュアルプローブ
+      screws_tilt_adjust: ネジ 傾き調整
     tooltip:
       absolute_positioning: 相対位置
       extruder_disabled: '最小温度未満（%{min}<small>°C</small>）のためホットエンドが無効です。'
@@ -688,6 +807,7 @@ app:
       manual_probe: マニュアルプローブ
       motors_off: モーターオフ
       relative_positioning: 相対位置
+      select_tool: 'ツール %{tool}を選択してください'
       tools: ツール
   version:
     btn:
diff --git a/src/locales/pt.yaml b/src/locales/pt.yaml
index 2e70fe8689..84905c3eb6 100644
--- a/src/locales/pt.yaml
+++ b/src/locales/pt.yaml
@@ -76,7 +76,7 @@ app:
     filters:
       label:
         print_start_time: Filtrar já impresso
-        print_start_time_desc: Filtrar os itens que  já imprimiu.
+        print_start_time_desc: Filtrar os itens que já imprimiu.
         hidden_files_folders: Filtrar ficheiros e pastas escondidas
         klipper_backup_files: Filtrar cópias de segurança do Klipper
         moonraker_backup_files: Filtrar ficheiros de cópia de segurança do Moonraker
@@ -93,7 +93,7 @@ app:
       diskinfo: Informações sobre o Disco
     msg:
       not_found: Não foram encontrados ficheiros
-      processing: A processar...
+      processing: A processar
     overlay:
       drag_files_enqueue: <strong>Arrastar</strong> para aqui ficheiros para juntar
         à fila
@@ -110,6 +110,7 @@ app:
       duplicate_dir: Duplicar directório
       go_to_file: Ir para ficheiro
       duplicate_file: Duplicar ficheiro
+      devices: Dispositivos
     tooltip:
       low_on_space: Pouco espaço em disco
       root_disabled: A raiz {root} não está disponível. Por favor verifique os seus
@@ -200,6 +201,8 @@ app:
       multiply: Multiplicar
       snooze: Suspender
       reset_stats: Redefinir estatísticas
+      copy: Copiar
+      copied: Copiado
     error:
       app_setup_link: >-
         Os requisitos de configuração do Fluidd podem ser encontrados <a
@@ -403,7 +406,7 @@ app:
       default_extrude_speed: Velocidade de extrusão padrão
       default_toolhead_move_length: Comprimento de movimento do toolhead padrão
       default_toolhead_xy_speed: Velocidade XY do toolhead padrão
-      default_toolhead_z_speed: Velocidade Z do toolhead  padrão
+      default_toolhead_z_speed: Velocidade Z do toolhead padrão
       enable: Habilitar
       enable_notifications: Ativar notificações
       fps_target: Frames por segundo
@@ -419,7 +422,7 @@ app:
       z_adjust_values: Ajustar valores Z
     timer_options:
       duration: Só duração
-      filament: Estimativas filamento.
+      filament: Estimativas filamento
       file: Estimativa do ficheiro
       slicer: Slicer
     title:
@@ -462,8 +465,7 @@ app:
     title: Atualizações de software
     tooltip:
       dirty: >-
-        indicação de erro no cabeçalho, não existente na fonte ou fonte
-        inválida.
+        indicação de erro no cabeçalho, não existente na fonte ou fonte inválida
       invalid: indicação de alteração do local da repo
       packages: Pacotes
       release_notes: Notas de lançamento
diff --git a/src/mixins/camera.ts b/src/mixins/camera.ts
index 6206df435b..e273abebcd 100644
--- a/src/mixins/camera.ts
+++ b/src/mixins/camera.ts
@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import { Component, Prop, Ref, Watch } from 'vue-property-decorator'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 
 @Component
 export default class CameraMixin extends Vue {
   @Prop({ type: Object, required: true })
-  readonly camera!: CameraConfig
+  readonly camera!: WebcamConfig
 
   @Prop({ type: String })
   readonly crossorigin?: 'anonymous' | 'use-credentials' | ''
@@ -34,7 +34,7 @@ export default class CameraMixin extends Vue {
 
   createTransform (): string {
     const element = this.streamingElement
-    const { rotation, flipX, flipY } = this.camera
+    const { rotation, flip_horizontal, flip_vertical } = this.camera
     const transformsArray: string[] = []
 
     const { clientWidth, clientHeight } = element
@@ -50,12 +50,12 @@ export default class CameraMixin extends Vue {
         ? clientHeight / clientWidth
         : clientWidth / clientHeight
 
-    if (scale !== 1 || flipX) {
-      transformsArray.push(`scaleX(${flipX ? -scale : scale})`)
+    if (scale !== 1 || flip_horizontal) {
+      transformsArray.push(`scaleX(${flip_horizontal ? -scale : scale})`)
     }
 
-    if (scale !== 1 || flipY) {
-      transformsArray.push(`scaleY(${flipY ? -scale : scale})`)
+    if (scale !== 1 || flip_vertical) {
+      transformsArray.push(`scaleY(${flip_vertical ? -scale : scale})`)
     }
 
     if (rotation !== 0) {
diff --git a/src/mixins/state.ts b/src/mixins/state.ts
index 923011f107..719e97bc5e 100644
--- a/src/mixins/state.ts
+++ b/src/mixins/state.ts
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import { SocketActions } from '@/api/socketActions'
 import { Component } from 'vue-property-decorator'
-import type { ServerInfo } from '@/store/server/types'
 
 @Component
 export default class StateMixin extends Vue {
@@ -22,13 +21,11 @@ export default class StateMixin extends Vue {
   }
 
   get klippyReady (): boolean {
-    return this.$store.getters['printer/getklippyReady'] as boolean
+    return this.$store.getters['printer/getKlippyReady'] as boolean
   }
 
   get klippyConnected (): boolean {
-    const server = this.$store.getters['server/getInfo'] as ServerInfo
-
-    return server.klippy_connected
+    return this.$store.getters['printer/getKlippyConnected'] as boolean
   }
 
   get hasWarnings (): boolean {
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index a095ef501e..df014a1d07 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -11,23 +11,26 @@
 }
 
 // Apply a common scrollbar application to all elements inside the app
-.v-application--wrap ::-webkit-scrollbar {
-  transition: all .5s;
-  width: 5px;
-  height: 8px;
-  z-index: 10;
-}
+.v-application--wrap,
+.v-dialog__content {
+  ::-webkit-scrollbar {
+    transition: all .5s;
+    width: 5px;
+    height: 8px;
+    z-index: 10;
+  }
 
-.v-application--wrap ::-webkit-scrollbar-track {
-  background: transparent;
-}
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-.v-application--wrap ::-webkit-scrollbar-thumb {
-  background: #b3ada7;
-}
+  ::-webkit-scrollbar-thumb {
+    background: #b3ada7;
+  }
 
-.v-application--wrap ::-webkit-scrollbar-corner {
-  background: transparent;
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }
 
 // Ensure the number arrows don't appear on text inputs.
diff --git a/src/store/cameras/actions.ts b/src/store/cameras/actions.ts
deleted file mode 100644
index 8a4b951c1d..0000000000
--- a/src/store/cameras/actions.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import type { ActionTree } from 'vuex'
-import type { CamerasState, CameraConfigWithoutId, CameraConfig, CameraService, LegacyCamerasState, LegacyCameraType, MoonrakerWebcamRotation } from './types'
-import type { RootState } from '../types'
-import { SocketActions } from '@/api/socketActions'
-import { Globals } from '@/globals'
-import { v4 as uuidv4 } from 'uuid'
-import setUrlQueryParam from '@/util/set-url-query-param'
-import { httpClientActions } from '@/api/httpClientActions'
-
-const legacyCameraTypeToCameraService: Record<LegacyCameraType, CameraService> = {
-  mjpgstream: 'mjpegstreamer',
-  mjpgadaptive: 'mjpegstreamer-adaptive',
-  iframe: 'iframe',
-  ipstream: 'ipstream'
-}
-
-const mjpegstreamerServices: CameraService[] = [
-  'mjpegstreamer',
-  'mjpegstreamer-adaptive'
-]
-
-export const actions: ActionTree<CamerasState, RootState> = {
-  /**
-   * Reset our store
-   */
-  async reset ({ commit }) {
-    commit('setReset')
-  },
-
-  async initLegacyCameras ({ commit }, payload: LegacyCamerasState) {
-    const { cameras: legacyCameras, activeCamera } = payload
-
-    if (legacyCameras) {
-      for (const legacyCamera of legacyCameras) {
-        const service = legacyCameraTypeToCameraService[legacyCamera.type]
-        const isMjpegStreamer = mjpegstreamerServices.includes(service)
-
-        const camera: CameraConfigWithoutId = {
-          name: legacyCamera.name,
-          service,
-          enabled: legacyCamera.enabled,
-          targetFps: legacyCamera.fpstarget,
-          targetFpsIdle: legacyCamera.fpsidletarget,
-          urlStream: isMjpegStreamer ? setUrlQueryParam(legacyCamera.url, 'action', 'stream') : legacyCamera.url,
-          urlSnapshot: isMjpegStreamer ? setUrlQueryParam(legacyCamera.url, 'action', 'snapshot') : legacyCamera.url,
-          flipX: legacyCamera.flipX,
-          flipY: legacyCamera.flipY,
-          rotation: legacyCamera.rotate ? +legacyCamera.rotate as MoonrakerWebcamRotation : 0
-        }
-
-        await httpClientActions.serverDatabaseItemPost(Globals.MOONRAKER_DB.webcams.NAMESPACE, legacyCamera.id, camera)
-      }
-
-      await httpClientActions.serverDatabaseItemPost(Globals.MOONRAKER_DB.fluidd.NAMESPACE, Globals.MOONRAKER_DB.fluidd.ROOTS.cameras.name, {
-        activeCamera: activeCamera || 'all'
-      })
-    }
-
-    commit('setActiveCamera', activeCamera || 'all')
-  },
-
-  /**
-   * Init any file configs we may have.
-   */
-  async initCameras ({ commit }, payload: Record<string, CameraConfigWithoutId>) {
-    const cameras = Object.entries(payload)
-      .map(([id, value]): CameraConfig => {
-        // Cameras created by Fluidd will provide `enabled`; otherwise,  assume `false`.
-        if (value.enabled === undefined) {
-          value.enabled = false
-        }
-
-        // Moonraker and Fluidd provide `rotation`, but Mainsail has `rotate`, so convert between then if property found.
-        if (value.rotation === undefined) {
-          if ('rotate' in value) {
-            value.rotation = value.rotate as MoonrakerWebcamRotation || 0
-            delete value.rotate
-          } else {
-            value.rotation = 0
-          }
-        }
-
-        return {
-          id,
-          ...value
-        }
-      })
-
-    commit('setInitCameras', { cameras })
-  },
-
-  /**
-   * Add or update a given camera
-   */
-  async updateCamera ({ commit }, payload: CameraConfig) {
-    if (payload.id === '') {
-      payload.id = uuidv4()
-    }
-
-    commit('setCamera', payload)
-
-    const { id, ...camera } = payload
-
-    SocketActions.serverWrite(id, camera, Globals.MOONRAKER_DB.webcams.NAMESPACE)
-  },
-
-  /**
-   * Remove a camera
-   */
-  async removeCamera ({ commit, state }, payload: CameraConfig) {
-    commit('setRemoveCamera', payload)
-
-    const { id } = payload
-
-    SocketActions.serverDelete(id, Globals.MOONRAKER_DB.webcams.NAMESPACE)
-    SocketActions.serverWrite(Globals.MOONRAKER_DB.fluidd.ROOTS.cameras.name + '.activeCamera', state.activeCamera)
-  },
-
-  /**
-   * Sets active camera
-   */
-  async updateActiveCamera ({ commit, state }, payload: string) {
-    commit('setActiveCamera', payload || 'all')
-
-    SocketActions.serverWrite(Globals.MOONRAKER_DB.fluidd.ROOTS.cameras.name + '.activeCamera', state.activeCamera)
-  },
-
-  async reloadMoonrakerWebcamsNamespace () {
-    SocketActions.serverRead(undefined, Globals.MOONRAKER_DB.webcams.NAMESPACE)
-  }
-}
diff --git a/src/store/cameras/getters.ts b/src/store/cameras/getters.ts
deleted file mode 100644
index 91dd013757..0000000000
--- a/src/store/cameras/getters.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { GetterTree } from 'vuex'
-import type { CameraConfig, CameraService, CamerasState, MoonrakerWebcamRotation } from './types'
-import type { RootState } from '../types'
-import type { WebcamConfig } from '../webcams/types'
-
-export const getters: GetterTree<CamerasState, RootState> = {
-  /**
-   * Return all cameras.
-   */
-  getCameras: (state, getters) => {
-    const camerasInConfig = getters.getCamerasInConfig as CameraConfig[]
-
-    return [
-      ...state.cameras,
-      ...camerasInConfig
-    ].sort((a, b) => a.name.localeCompare(b.name))
-  },
-
-  getCamerasInConfig: (state, getters, rootState, rootGetters) => {
-    const webcamsInConfig = rootGetters['webcams/getWebcamsInConfig'] as WebcamConfig[]
-
-    return webcamsInConfig
-      .map((webcam): CameraConfig => ({
-        name: webcam.name,
-        location: webcam.location,
-        service: webcam.service as CameraService,
-        enabled: webcam.enabled ?? true,
-        icon: webcam.icon,
-        targetFps: webcam.target_fps,
-        targetFpsIdle: webcam.target_fps_idle,
-        urlStream: webcam.stream_url,
-        urlSnapshot: webcam.snapshot_url,
-        flipX: webcam.flip_horizontal,
-        flipY: webcam.flip_vertical,
-        rotation: webcam.rotation as MoonrakerWebcamRotation ?? 0,
-        aspectRatio: webcam.aspect_ratio,
-        extraData: webcam.extra_data,
-        source: webcam.source,
-        id: `config-${webcam.name}`
-      }))
-  },
-
-  /**
-   * Return all enabled cameras,
-   */
-  getEnabledCameras: (state, getters) => {
-    return [...getters.getCameras]
-      .filter(camera => camera.enabled)
-  },
-
-  /**
-   * Return visible cameras. I.e., return cameras dependent on them being
-   * 1. enabled and 2. filtered by the currently active state.
-   */
-  getVisibleCameras: (state, getters) => {
-    if (getters.getActiveCamera === 'all') return [...getters.getEnabledCameras]
-    return [...getters.getEnabledCameras]
-      .filter(camera => camera.id === getters.getActiveCamera)
-  },
-
-  /**
-   * Return a camera by its id.
-   */
-  getCameraById: (state) => (id: string) => {
-    return state.cameras.find(camera => camera.id === id)
-  },
-
-  /**
-   * Return the set active camera, being all or a specific id.
-   */
-  getActiveCamera: (state) => {
-    return state.activeCamera
-  }
-}
diff --git a/src/store/cameras/index.ts b/src/store/cameras/index.ts
deleted file mode 100644
index 6629e38260..0000000000
--- a/src/store/cameras/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Module } from 'vuex'
-import { state } from './state'
-import { getters } from './getters'
-import { actions } from './actions'
-import { mutations } from './mutations'
-import type { CamerasState } from './types'
-import type { RootState } from '../types'
-
-const namespaced = true
-
-export const cameras: Module<CamerasState, RootState> = {
-  namespaced,
-  state,
-  getters,
-  actions,
-  mutations
-}
diff --git a/src/store/cameras/mutations.ts b/src/store/cameras/mutations.ts
deleted file mode 100644
index 48590f47e4..0000000000
--- a/src/store/cameras/mutations.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import Vue from 'vue'
-import type { MutationTree } from 'vuex'
-import type { CameraConfig, CamerasState } from './types'
-import { defaultState } from './state'
-
-export const mutations: MutationTree<CamerasState> = {
-  /**
-   * Reset state
-   */
-  setReset (state) {
-    Object.assign(state, defaultState())
-  },
-
-  /**
-   * Inits UI settings from the db
-   */
-  setInitCameras (state, payload: CameraConfig[]) {
-    if (payload) {
-      Object.assign(state, payload)
-    }
-  },
-
-  /**
-   * Update / Add a camera
-   */
-  setCamera (state, payload: CameraConfig) {
-    const index = state.cameras.findIndex(camera => camera.id === payload.id)
-
-    if (index >= 0) {
-      Vue.set(state.cameras, index, payload)
-    } else {
-      state.cameras.push(payload)
-    }
-  },
-
-  /**
-   * Remove a camera
-   */
-  setRemoveCamera (state, payload: CameraConfig) {
-    const index = state.cameras.findIndex(camera => camera.id === payload.id)
-
-    if (index >= 0) {
-      state.cameras.splice(index, 1)
-    }
-
-    if (state.activeCamera === payload.id) state.activeCamera = 'all'
-  },
-
-  /**
-   * Sets active camera
-   */
-  setActiveCamera (state, payload: string) {
-    state.activeCamera = payload
-  }
-}
diff --git a/src/store/cameras/state.ts b/src/store/cameras/state.ts
deleted file mode 100644
index e8366d2898..0000000000
--- a/src/store/cameras/state.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { CamerasState } from './types'
-import { v4 as uuidv4 } from 'uuid'
-
-export const defaultState = (): CamerasState => {
-  return {
-    activeCamera: 'all',
-    cameras: [
-      {
-        id: uuidv4(),
-        enabled: false,
-        name: 'Default',
-        service: 'mjpegstreamer-adaptive',
-        targetFps: 15,
-        targetFpsIdle: 5,
-        urlStream: '/webcam/?action=stream',
-        urlSnapshot: '/webcam/?action=snapshot',
-        flipX: false,
-        flipY: false,
-        rotation: 0,
-        aspectRatio: '16:9'
-      }
-    ]
-  }
-}
-
-export const state = defaultState()
diff --git a/src/store/cameras/types.ts b/src/store/cameras/types.ts
deleted file mode 100644
index aedbe9634a..0000000000
--- a/src/store/cameras/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export interface CamerasState {
-  activeCamera: string;
-  cameras: CameraConfig[];
-}
-
-export interface MoonrakerWebcamConfig
-{
-  name: string,
-  location?: string,
-  service?: string;
-  enabled?: boolean,
-  icon?: string,
-  targetFps?: number,
-  targetFpsIdle?: number,
-  urlStream?: string,
-  urlSnapshot?: string,
-  flipX?: boolean,
-  flipY?: boolean,
-  rotation: MoonrakerWebcamRotation,
-  aspectRatio?: string;
-  extraData?: any,
-  source?: MoonrakerWebcamSource
-}
-
-export type MoonrakerWebcamRotation = 0 | 90 | 180 | 270
-export type MoonrakerWebcamSource = 'config' | 'database'
-
-export interface CameraConfigWithoutId extends MoonrakerWebcamConfig {
-  service?: CameraService;
-}
-
-export interface CameraConfig extends CameraConfigWithoutId {
-  id: string;
-}
-
-export type CameraService = 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'ipstream' | 'iframe' | 'hlsstream' | 'webrtc-camerastreamer' | 'device' | 'webrtc-go2rtc'
-
-export interface LegacyCamerasState {
-  activeCamera: string;
-  cameras: LegacyCameraConfig[];
-}
-
-export interface LegacyCameraConfig {
-  id: string;
-  enabled: boolean;
-  name: string;
-  type: LegacyCameraType;
-  url: string;
-  fpstarget?: number;
-  fpsidletarget?: number;
-  flipX: boolean;
-  flipY: boolean;
-  rotate?: LegacyCameraRotation;
-  height?: number;
-}
-
-export type LegacyCameraRotation = '90' | '180' | '270'
-export type LegacyCameraType = 'mjpgstream' | 'mjpgadaptive' | 'ipstream' | 'iframe'
diff --git a/src/store/config/state.ts b/src/store/config/state.ts
index 5df42bd273..7fffb92ac0 100644
--- a/src/store/config/state.ts
+++ b/src/store/config/state.ts
@@ -61,8 +61,11 @@ export const defaultState = (): ConfigState => {
         showScrewsTiltAdjustDialogAutomatically: true,
         forceMoveToggleWarning: true,
         printInProgressLayout: 'default',
+        printProgressCalculation: ['file'],
+        printEtaCalculation: ['file'],
         enableDiagnostics: false,
-        thumbnailSize: 32
+        thumbnailSize: 32,
+        colorPickerValueRange: 'absolute'
       },
       theme: {
         isDark: true,
@@ -74,7 +77,7 @@ export const defaultState = (): ConfigState => {
       },
       editor: {
         confirmDirtyEditorClose: true,
-        autoEditExtensions: ['.cfg', '.conf', '.ini', '.log', '.md', '.sh', '.txt'],
+        autoEditExtensions: ['.cfg', '.conf', '.ini', '.log', '.sh', '.txt'],
         restoreViewState: 'session',
         codeLens: true
       },
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
index c5ab5e4bb1..410b15dd2f 100644
--- a/src/store/config/types.ts
+++ b/src/store/config/types.ts
@@ -97,8 +97,11 @@ export interface GeneralConfig {
   showScrewsTiltAdjustDialogAutomatically: boolean;
   forceMoveToggleWarning: boolean;
   printInProgressLayout: PrintInProgressLayout;
+  printProgressCalculation: PrintProgressCalculation[];
+  printEtaCalculation: PrintEtaCalculation[];
   enableDiagnostics: boolean;
   thumbnailSize: number;
+  colorPickerValueRange: ColorPickerValueRange;
 }
 
 export type ToolheadControlStyle = 'cross' | 'bars' | 'circle'
@@ -109,6 +112,12 @@ export type CameraFullscreenAction = 'embed' | 'rawstream';
 
 export type PrintInProgressLayout = 'default' | 'compact'
 
+export type ColorPickerValueRange = 'absolute' | 'percentage'
+
+export type PrintProgressCalculation = 'file' | 'slicer'
+
+export type PrintEtaCalculation = 'file' | 'slicer'
+
 // Config stored in moonraker db
 export interface ThemeConfig {
   color: string;
diff --git a/src/store/console/getters.ts b/src/store/console/getters.ts
index a548b780db..d969ca5534 100644
--- a/src/store/console/getters.ts
+++ b/src/store/console/getters.ts
@@ -25,12 +25,12 @@ export const getters: GetterTree<ConsoleState, RootState> = {
   },
 
   getAllKnownCommands: (state): GcodeHelp => {
-    const commands = state.gcodeHelp
-
-    for (const extraCommand of ['TESTZ', 'ABORT', 'ACCEPT', 'ADJUSTED']) {
-      if (extraCommand in commands !== true) {
-        commands[extraCommand] = ''
-      }
+    const commands: GcodeHelp = {
+      TESTZ: '',
+      ABORT: '',
+      ACCEPT: '',
+      ADJUSTED: '',
+      ...state.gcodeHelp
     }
 
     return commands
diff --git a/src/store/diagnostics/types.ts b/src/store/diagnostics/types.ts
index d7265408b9..70e38c991d 100644
--- a/src/store/diagnostics/types.ts
+++ b/src/store/diagnostics/types.ts
@@ -31,7 +31,7 @@ export interface Metric {
 export interface MetricStyle {
   lineColor: string
   lineStyle: 'solid' | 'dashed' | 'dotted'
-  fillColor?: string
+  fillColor: string | null
   fillOpacity: number
   displayLegend: boolean
 }
diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
index 1c7b25c2ec..e07dd2b9bb 100644
--- a/src/store/files/getters.ts
+++ b/src/store/files/getters.ts
@@ -2,7 +2,7 @@ import type { GetterTree } from 'vuex'
 import type { AppDirectory, AppFileWithMeta, FileBrowserEntry, FilesState, RootProperties } from './types'
 import type { RootState } from '../types'
 import type { HistoryItem } from '../history/types'
-import { SupportedImageFormats, SupportedVideoFormats } from '@/globals'
+import { SupportedImageFormats, SupportedMarkdownFormats, SupportedVideoFormats } from '@/globals'
 
 export const getters: GetterTree<FilesState, RootState> = {
   /**
@@ -101,6 +101,7 @@ export const getters: GetterTree<FilesState, RootState> = {
   getRootProperties: () => (root: string): RootProperties => {
     const canView = [
       ...SupportedImageFormats,
+      ...SupportedMarkdownFormats,
       ...SupportedVideoFormats
     ]
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 083f8c543a..b8827085cd 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -18,7 +18,6 @@ import { macros } from './macros'
 import { power } from './power'
 import { history } from './history'
 import { version } from './version'
-import { cameras } from './cameras'
 import { mesh } from './mesh'
 import { notifications } from './notifications'
 import { announcements } from './announcements'
@@ -49,7 +48,6 @@ export default new Vuex.Store<RootState>({
     power,
     history,
     version,
-    cameras,
     mesh,
     notifications,
     announcements,
diff --git a/src/store/layout/actions.ts b/src/store/layout/actions.ts
index a47085023b..ca772285f0 100644
--- a/src/store/layout/actions.ts
+++ b/src/store/layout/actions.ts
@@ -12,7 +12,7 @@ export const actions: ActionTree<LayoutState, RootState> = {
     commit('setReset')
   },
 
-  async initLayout ({ commit }, payload) {
+  async initLayout ({ commit }, payload: LayoutState) {
     commit('setInitLayout', payload)
   },
 
diff --git a/src/store/layout/mutations.ts b/src/store/layout/mutations.ts
index 96fba973ed..a81fb4553f 100644
--- a/src/store/layout/mutations.ts
+++ b/src/store/layout/mutations.ts
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import type { MutationTree } from 'vuex'
 import { defaultState as getDefaultState } from './state'
 import type { LayoutConfig, LayoutState, Layouts } from './types'
+import type { DiagnosticsCardContainer } from '../diagnostics/types'
 
 export const mutations: MutationTree<LayoutState> = {
   /**
@@ -22,30 +23,48 @@ export const mutations: MutationTree<LayoutState> = {
       const defaultState = getDefaultState()
 
       // add new layouts
-      for (const [layout, defaultComponents] of Object.entries(defaultState.layouts)) {
-        if (!payload.layouts[layout]) {
-          payload.layouts[layout] = defaultComponents
+      for (const [layoutKey, defaultLayout] of Object.entries(defaultState.layouts)) {
+        if (!payload.layouts[layoutKey]) {
+          payload.layouts[layoutKey] = defaultLayout
         }
       }
 
       // migrate existing layouts
-      const migratableLayouts = ['dashboard']
-      for (const layout of Object.keys(payload.layouts)) {
-        const migratableLayout = migratableLayouts.find(migration => layout.startsWith(migration))
-        if (migratableLayout) {
-          const defaultComponents = defaultState.layouts[migratableLayout]
-          const defaultComponentIds = Object.values(defaultComponents).flat().map(card => card.id)
-          const currentComponentIds = Object.values(payload.layouts[layout]).flat().map(card => card.id)
+      const migratableLayoutKeys = ['dashboard']
 
-          for (const [container, defaultContainerComponents] of Object.entries(defaultComponents)) {
-            const currentContainerComponents = payload.layouts[layout][container] || []
+      for (const layoutKey of Object.keys(payload.layouts)) {
+        const migratableLayoutKey = migratableLayoutKeys.find(key => layoutKey.startsWith(key))
 
-            payload.layouts[layout][container] = [
+        if (migratableLayoutKey) {
+          const defaultLayout = defaultState.layouts[migratableLayoutKey]
+          const defaultComponentIds = Object.values(defaultLayout).flat().map(card => card.id)
+          const currentLayout = payload.layouts[layoutKey]
+          const currentComponentIds = Object.values(currentLayout).flat().map(card => card.id)
+
+          for (const [containerKey, defaultContainerComponents] of Object.entries(defaultLayout)) {
+            const currentContainerComponents = currentLayout[containerKey] || []
+
+            currentLayout[containerKey] = [
               ...currentContainerComponents.filter(component => defaultComponentIds.includes(component.id)),
               ...defaultContainerComponents.filter(component => !currentComponentIds.includes(component.id))
             ]
           }
         }
+
+        // diagnostics specific layout updates
+        if (layoutKey.startsWith('diagnostics')) {
+          const diagnostics = payload.layouts[layoutKey] as DiagnosticsCardContainer
+
+          for (const diagnosticsCardConfigs of Object.values(diagnostics)) {
+            for (const diagnosticsCardConfig of diagnosticsCardConfigs) {
+              for (const axis of diagnosticsCardConfig.axes) {
+                for (const metric of axis.metrics) {
+                  metric.style.fillColor = metric.style.fillColor ?? null
+                }
+              }
+            }
+          }
+        }
       }
 
       Object.assign(state, payload)
diff --git a/src/store/layout/state.ts b/src/store/layout/state.ts
index dda4ed0f0b..50e5786a93 100644
--- a/src/store/layout/state.ts
+++ b/src/store/layout/state.ts
@@ -20,6 +20,7 @@ export const defaultState = (): LayoutState => {
           { id: 'toolhead-card', enabled: true, collapsed: false },
           { id: 'macros-card', enabled: true, collapsed: false },
           { id: 'outputs-card', enabled: true, collapsed: false },
+          { id: 'runout-sensors-card', enabled: false, collapsed: false },
           { id: 'printer-limits-card', enabled: true, collapsed: false },
           { id: 'retract-card', enabled: true, collapsed: false }
         ],
@@ -48,11 +49,11 @@ export const defaultState = (): LayoutState => {
             metrics: [{
               collector: 'printer.motion_report.live_velocity',
               name: 'Velocity',
-              style: { lineStyle: 'solid', lineColor: '#2196f3', fillOpacity: 0, displayLegend: true }
+              style: { lineStyle: 'solid', lineColor: '#2196f3', fillColor: null, fillOpacity: 0, displayLegend: true }
             }, {
               collector: 'printer.toolhead.max_velocity',
               name: 'Max Velocity',
-              style: { lineStyle: 'dotted', lineColor: '#0075d2', fillOpacity: 0, displayLegend: false }
+              style: { lineStyle: 'dotted', lineColor: '#0075d2', fillColor: null, fillOpacity: 0, displayLegend: false }
             }]
           }, {
             enabled: true,
@@ -63,11 +64,11 @@ export const defaultState = (): LayoutState => {
               collector: 'printer.motion_report.live_extruder_velocity * Math.PI * ' +
                 '(printer.configfile.settings.extruder.filament_diameter / 2) ** 2',
               name: 'Flow',
-              style: { lineStyle: 'solid', lineColor: '#b12f36', fillOpacity: 5, displayLegend: true }
+              style: { lineStyle: 'solid', lineColor: '#b12f36', fillColor: null, fillOpacity: 5, displayLegend: true }
             }, {
               collector: '12',
               name: 'Max Flow',
-              style: { lineStyle: 'dashed', lineColor: '#820007', fillOpacity: 0, displayLegend: false }
+              style: { lineStyle: 'dashed', lineColor: '#820007', fillColor: null, fillOpacity: 0, displayLegend: false }
             }]
           }]
         }]
diff --git a/src/store/printer/actions.ts b/src/store/printer/actions.ts
index ea04366013..6e5995c908 100644
--- a/src/store/printer/actions.ts
+++ b/src/store/printer/actions.ts
@@ -92,7 +92,7 @@ export const actions: ActionTree<PrinterState, RootState> = {
       }
       let key = k
       if (k.includes(' ')) key = key.replace(' ', '.')
-      commit('printer/setPrinterObjectList', key, { root: true })
+      commit('setPrinterObjectList', key)
     })
 
     SocketActions.printerObjectsSubscribe(intendedSubscriptions)
@@ -154,7 +154,7 @@ export const actions: ActionTree<PrinterState, RootState> = {
       for (const key in payload) {
         const val = payload[key]
         // Commit the value.
-        commit('printer/setSocketNotify', { key, payload: val }, { root: true })
+        commit('setSocketNotify', { key, payload: val })
       }
 
       // Add a temp chart entry
@@ -173,7 +173,7 @@ export const actions: ActionTree<PrinterState, RootState> = {
     // This is because moonraker currently sends notification updates
     // prior to subscribing on browser refresh.
     if (payload && rootState.socket.acceptingNotifications) {
-      commit('printer/setSocketNotify', payload, { root: true })
+      commit('setSocketNotify', payload)
       dispatch('onDiagnosticsMetricsUpdate')
     }
   },
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index ed359519b6..aebb5bd685 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -6,48 +6,41 @@ import { get } from 'lodash-es'
 import getKlipperType from '@/util/get-klipper-type'
 import i18n from '@/plugins/i18n'
 import type { GcodeHelp } from '../console/types'
+import type { ServerInfo } from '../server/types'
 
 export const getters: GetterTree<PrinterState, RootState> = {
 
   /**
    * Indicates if klippy is connected or not.
    */
-  getklippyReady: (state, getters, rootState, rootGetters): boolean => {
+  getKlippyReady: (state, getters, rootState, rootGetters): boolean => {
     // Valid states are;
     // ready, startup, shutdown, error
-    const serverInfo = rootGetters['server/getInfo']
-    const server_klippy_state = serverInfo.klippy_state || ''
-    const connected = serverInfo.klippy_connected || false
-    if (
-      server_klippy_state !== 'ready' ||
-      !connected
-    ) {
-      return false
-    }
-    return true
+    const serverInfo = rootGetters['server/getInfo'] as ServerInfo
+
+    return (
+      serverInfo.klippy_state === 'ready' &&
+      serverInfo.klippy_connected
+    )
+  },
+
+  getKlippyConnected: (state, getters, rootState, rootGetters): boolean => {
+    const serverInfo = rootGetters['server/getInfo'] as ServerInfo
+
+    return serverInfo.klippy_connected
   },
 
   getKlippyState: (state, getters, rootState, rootGetters): string => {
-    const serverInfo = rootGetters['server/getInfo']
-    const server_klippy_state = serverInfo.klippy_state || ''
-    return Vue.$filters.capitalize(server_klippy_state)
-    // if (state1 === state2) {
-    //   return Vue.$filters.capitalize(state1)
-    // }
-    // if (state1 !== 'ready' && state1 !== '') {
-    //   return Vue.$filters.capitalize(state1)
-    // }
-    // if (state2 !== 'ready' && state1 !== '') {
-    //   return Vue.$filters.capitalize(state2)
-    // }
-    // return state1
+    const serverInfo = rootGetters['server/getInfo'] as ServerInfo
+
+    return Vue.$filters.capitalize(serverInfo.klippy_state || '')
   },
 
   getKlippyStateMessage: (state, getters, rootState, rootGetters): string => {
     const regex = /(?:\r\n|\r|\n)/g
     // If there's absolutely no connection to klipper, then
     // say so.
-    const serverInfo = rootGetters['server/getInfo']
+    const serverInfo = rootGetters['server/getInfo'] as ServerInfo
     if (serverInfo.klippy_connected === false) {
       return 'Klippy not connected.'
     }
@@ -102,7 +95,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
     }
   },
 
-  getPrintProgress: (state): number => {
+  getFilePrintProgress: (state): number => {
     const { gcode_start_byte, gcode_end_byte, path, filename } = state.printer.current_file ?? {}
     const { file_position } = state.printer.virtual_sdcard ?? {}
 
@@ -121,6 +114,34 @@ export const getters: GetterTree<PrinterState, RootState> = {
     return state.printer.display_status.progress || 0
   },
 
+  getSlicerPrintProgress: (state): number => {
+    return state.printer.display_status.progress || 0
+  },
+
+  getPrintProgress: (state, getters, rootState): number => {
+    const printProgressCalculation = rootState.config.uiSettings.general.printProgressCalculation
+
+    const printProgressCalculationResults = printProgressCalculation
+      .map(type => {
+        switch (type) {
+          case 'file':
+            return getters.getFilePrintProgress
+
+          case 'slicer':
+            return getters.getSlicerPrintProgress
+
+          default:
+            return 0
+        }
+      })
+      .filter(result => result > 0)
+
+    const printProgress = printProgressCalculationResults
+      .reduce((a, b) => a + b, 0) / printProgressCalculationResults.length
+
+    return printProgress
+  },
+
   getPrintLayers: (state): number => {
     const layersFromPrintStats = state.printer.print_stats.info?.total_layer
     if (typeof layersFromPrintStats === 'number') {
@@ -163,14 +184,15 @@ export const getters: GetterTree<PrinterState, RootState> = {
     return 0
   },
 
-  getTimeEstimates: (state, getters): TimeEstimates => {
+  getTimeEstimates: (state, getters, rootGetters): TimeEstimates => {
     const progress = getters.getPrintProgress as number
+    const fileProgress = getters.getFilePrintProgress as number
 
     const totalDuration = state.printer.print_stats?.total_duration as number | undefined ?? 0
     const printDuration = state.printer.print_stats?.print_duration as number | undefined ?? 0
 
-    const fileLeft = printDuration > 0 && progress > 0
-      ? printDuration / progress - printDuration
+    const fileLeft = printDuration > 0 && fileProgress > 0
+      ? printDuration / fileProgress - printDuration
       : 0
 
     const currentFileStatus = state.printer.current_file?.history?.status as string | undefined
@@ -186,11 +208,31 @@ export const getters: GetterTree<PrinterState, RootState> = {
       ? slicerTotal - printDuration
       : 0
 
-    const eta = Date.now() + (
-      actualLeft > 0
-        ? actualLeft
-        : fileLeft
-    ) * 1000
+    const printEtaCalculation = rootGetters.config.uiSettings.general.printEtaCalculation
+
+    const printEtaCalculationResults = printEtaCalculation
+      .map(type => {
+        switch (type) {
+          case 'file':
+            return (
+              actualLeft > 0
+                ? actualLeft
+                : fileLeft
+            )
+
+          case 'slicer':
+            return slicerLeft
+
+          default:
+            return 0
+        }
+      })
+      .filter(result => result > 0)
+
+    const etaLeft = printEtaCalculationResults
+      .reduce((a, b) => a + b, 0) / printEtaCalculationResults.length
+
+    const eta = Date.now() + etaLeft * 1000
 
     return {
       progress: Math.floor(progress * 100),
@@ -861,11 +903,15 @@ export const getters: GetterTree<PrinterState, RootState> = {
   },
 
   getMoonrakerFailedComponents: (state, getters, rootState, rootGetters) => {
-    return rootGetters['server/getInfo'].failed_components || []
+    const serverInfo = rootGetters['server/getInfo'] as ServerInfo
+
+    return serverInfo.failed_components || []
   },
 
   getMoonrakerWarnings: (state, getters, rootState, rootGetters) => {
-    return rootGetters['server/getInfo'].warnings || []
+    const serverInfo = rootGetters['server/getInfo'] as ServerInfo
+
+    return serverInfo.warnings || []
   },
 
   getSaveConfigPending: (state): boolean => {
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index 868e39accd..984539ce9e 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -1,12 +1,13 @@
 import Vue from 'vue'
 import type { ActionTree } from 'vuex'
-import type { ServerState, ServerThrottledState, ServiceState } from './types'
+import type { CanbusUuid, Peripherals, ServerInfo, ServerState, ServerThrottledState, ServiceState, SystemInfo } from './types'
 import type { RootState } from '../types'
 import { SocketActions } from '@/api/socketActions'
 import { Globals } from '@/globals'
 import type { AppPushNotification } from '../notifications/types'
 import { EventBus } from '@/eventBus'
 import i18n from '@/plugins/i18n'
+import { gte, valid } from 'semver'
 
 let retryTimeout: number
 
@@ -43,10 +44,58 @@ export const actions: ActionTree<ServerState, RootState> = {
     }
   },
 
+  async checkMoonrakerMinVersion ({ state, dispatch }) {
+    const moonrakerVersion = state.info.moonraker_version ?? '?'
+
+    const fullMoonrakerVersion = moonrakerVersion.includes('-')
+      ? moonrakerVersion
+      : `${moonrakerVersion}-0`
+
+    if (
+      valid(fullMoonrakerVersion) &&
+      valid(Globals.MOONRAKER_MIN_VERSION) &&
+      !gte(fullMoonrakerVersion, Globals.MOONRAKER_MIN_VERSION)
+    ) {
+      dispatch('notifications/pushNotification', {
+        id: `old-moonraker-${moonrakerVersion}`,
+        title: 'Moonraker',
+        description: i18n.t('app.version.label.old_component_version', { name: 'Moonraker', version: Globals.MOONRAKER_MIN_VERSION }),
+        to: '/settings#versions',
+        btnText: i18n.t('app.version.btn.view_versions'),
+        type: 'warning',
+        merge: true
+      }, { root: true })
+    }
+  },
+
+  async checkKlipperMinVersion ({ state, dispatch }) {
+    const klipperVersion = state.system_info?.software_version ?? '?'
+
+    const fullKlipperVersion = klipperVersion.includes('-')
+      ? klipperVersion
+      : `${klipperVersion}-0`
+
+    if (
+      valid(klipperVersion) &&
+      valid(Globals.KLIPPER_MIN_VERSION) &&
+      !gte(fullKlipperVersion, Globals.KLIPPER_MIN_VERSION)
+    ) {
+      dispatch('notifications/pushNotification', {
+        id: `old-klipper-${klipperVersion}`,
+        title: 'Klipper',
+        description: i18n.t('app.version.label.old_component_version', { name: 'Klipper', version: Globals.KLIPPER_MIN_VERSION }),
+        to: '/settings#versions',
+        btnText: i18n.t('app.version.btn.view_versions'),
+        type: 'warning',
+        merge: true
+      }, { root: true })
+    }
+  },
+
   /**
    * On server info
    */
-  async onServerInfo ({ commit, dispatch, state }, payload) {
+  async onServerInfo ({ commit, dispatch, state }, payload: ServerInfo) {
     // This payload should return a list of enabled components
     // and root directories that are available.
     SocketActions.printerInfo()
@@ -56,6 +105,8 @@ export const actions: ActionTree<ServerState, RootState> = {
 
     commit('setServerInfo', payload)
 
+    dispatch('checkMoonrakerMinVersion')
+
     if (payload.klippy_state !== 'ready') {
       // If klippy is not connected, we'll continue to
       // retry the init process.
@@ -124,8 +175,20 @@ export const actions: ActionTree<ServerState, RootState> = {
     }
   },
 
-  async onMachineSystemInfo ({ commit }, payload) {
+  async onMachineSystemInfo ({ commit, dispatch }, payload: { system_info?: SystemInfo }) {
     commit('setSystemInfo', payload)
+
+    dispatch('checkKlipperMinVersion')
+  },
+
+  async onMachinePeripherals ({ commit }, payload: Partial<Peripherals>) {
+    commit('setMachinePeripherals', payload)
+  },
+
+  async onMachinePeripheralsCanbus ({ commit }, payload: { can_uuids: CanbusUuid[], __request__: any }) {
+    const { interface: canbusInterface } = payload.__request__.params
+
+    commit('setMachinePeripheralsCanbus', { canbusInterface, can_uuids: payload.can_uuids })
   },
 
   async onServiceStateChanged ({ commit }, payload: ServiceState) {
diff --git a/src/store/server/mutations.ts b/src/store/server/mutations.ts
index ecfb91daea..ec8cb29080 100644
--- a/src/store/server/mutations.ts
+++ b/src/store/server/mutations.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import type { MutationTree } from 'vuex'
 import { defaultState } from './state'
-import type { ServerState, ServiceState } from './types'
+import type { CanbusUuid, Peripherals, ServerInfo, ServerState, ServiceState, SystemInfo } from './types'
 
 export const mutations: MutationTree<ServerState> = {
   /**
@@ -20,16 +20,30 @@ export const mutations: MutationTree<ServerState> = {
     })
   },
 
-  setServerInfo (state, payload) {
+  setServerInfo (state, payload: ServerInfo) {
     Vue.set(state, 'info', payload)
   },
 
-  setSystemInfo (state, payload) {
+  setSystemInfo (state, payload: { system_info?: SystemInfo }) {
     if (payload.system_info) {
       Vue.set(state, 'system_info', payload.system_info)
     }
   },
 
+  setMachinePeripherals (state, payload: Partial<Peripherals>) {
+    state.peripherals = {
+      ...state.peripherals,
+      ...payload
+    }
+  },
+
+  setMachinePeripheralsCanbus (state, payload: { canbusInterface: string, canUuids: CanbusUuid[] }) {
+    state.can_uuids = {
+      ...state.can_uuids,
+      [payload.canbusInterface]: payload.canUuids
+    }
+  },
+
   setServiceState (state, payload: ServiceState) {
     if (payload && state.system_info?.service_state) {
       Object.assign(state.system_info.service_state, payload)
diff --git a/src/store/server/state.ts b/src/store/server/state.ts
index e61277a986..29e7b3d906 100644
--- a/src/store/server/state.ts
+++ b/src/store/server/state.ts
@@ -12,6 +12,13 @@ export const defaultState = (): ServerState => {
       warnings: []
     },
     system_info: null,
+    peripherals: {
+      usb_devices: null,
+      serial_devices: null,
+      v4l2_devices: null,
+      libcamera_devices: null
+    },
+    can_uuids: null,
     config: {
       authorization: {
         enabled: true
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index ca66e0ee69..5aef15d15a 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -2,6 +2,8 @@ export interface ServerState {
   klippy_retries: number;
   info: ServerInfo;
   system_info: SystemInfo | null;
+  peripherals: Peripherals;
+  can_uuids: Record<string, CanbusUuid[]> | null;
   config: ServerConfig;
   moonraker_stats: ServerSystemStat[];
   throttled_state: ServerThrottledState | null;
@@ -37,6 +39,7 @@ export interface ServerInfo {
   components: string[];
   registered_directories: string[];
   warnings: string[];
+  moonraker_version?: string;
   api_version?: number[]
   api_version_string?: string
 }
@@ -51,6 +54,7 @@ export interface SystemInfo {
   network?: NetworkState;
   canbus?: CanBusState;
   instance_ids: InstanceIds;
+  software_version?: string;
 }
 
 export interface ServiceState {
@@ -148,6 +152,76 @@ export interface InstanceIds {
   klipper: string;
 }
 
+export interface Peripherals {
+  usb_devices: UsbDevice[] | null;
+  serial_devices: SerialDevice[] | null;
+  v4l2_devices: V4l2Device[] | null;
+  libcamera_devices: LibcameraDevice[] | null;
+}
+
+export interface UsbDevice {
+  bus_num: number;
+  device_num: number;
+  usb_location: string;
+  vendor_id: string;
+  product_id: string;
+  manufacturer?: string | null;
+  product?: string | null;
+  class?: string | null;
+  subclass?: string | null;
+  protocol?: string | null;
+  description?: string | null;
+  serial?: string | null;
+}
+
+export interface SerialDevice {
+  device_type: string;
+  device_path: string;
+  device_name: string;
+  driver_name: string;
+  path_by_hardware?: string | null;
+  path_by_id?: string | null;
+  usb_location?: string | null;
+}
+
+export interface V4l2Device {
+  device_name: string;
+  device_path: string;
+  camera_name: string;
+  driver_name: string;
+  alt_name?: string | null;
+  hardware_bus: string;
+  capabilities: string[];
+  version: string;
+  path_by_hardware?: string | null;
+  path_by_id?: string | null;
+  usb_location?: string | null;
+  modes: V4l2DeviceMode[];
+}
+
+export interface V4l2DeviceMode {
+  format: string;
+  description?: string | null;
+  flags: string[];
+  resolutions: string[];
+}
+
+export interface LibcameraDevice {
+  libcamera_id: string;
+  model: string;
+  modes: LibcameraDeviceMode[];
+}
+
+export interface LibcameraDeviceMode {
+  format: string;
+  resolutions: string[];
+}
+
+export interface CanbusUuid {
+  uuid: string;
+  application: string;
+}
+
 export interface ServerConfig {
   authorization: ServerAuthorization;
   server: ServerConfiguration;
diff --git a/src/store/types.ts b/src/store/types.ts
index 4806f4872e..1ccc18aca4 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -17,7 +17,6 @@ import type { NotificationsState } from './notifications/types'
 import type { AnnouncementsState } from './announcements/types'
 import type { AuthState } from './auth/types'
 import type { TimelapseState } from '@/store/timelapse/types'
-import type { CamerasState } from './cameras/types'
 import type { WaitState } from './wait/types'
 import type { WebcamsState } from './webcams/types'
 import type { JobQueueState } from './jobQueue/types'
@@ -38,7 +37,6 @@ export interface RootState {
   power: DevicePowerState;
   history: HistoryState;
   version: VersionState;
-  cameras: CamerasState;
   mesh: MeshState;
   notifications: NotificationsState;
   announcements: AnnouncementsState;
diff --git a/src/store/webcams/actions.ts b/src/store/webcams/actions.ts
index 2d31457701..1fbfae71e2 100644
--- a/src/store/webcams/actions.ts
+++ b/src/store/webcams/actions.ts
@@ -1,7 +1,22 @@
 import type { ActionTree } from 'vuex'
-import type { WebcamConfig, WebcamsState } from './types'
+import type { WebcamsState, WebcamConfig, WebcamService, WebcamRotation, LegacyCamerasState, LegacyCameraType, DatabaseWebcamConfig } from './types'
 import type { RootState } from '../types'
 import { SocketActions } from '@/api/socketActions'
+import setUrlQueryParam from '@/util/set-url-query-param'
+import { httpClientActions } from '@/api/httpClientActions'
+import { Globals } from '@/globals'
+
+const legacyCameraTypeToWebcamService: Record<LegacyCameraType, WebcamService> = {
+  mjpgstream: 'mjpegstreamer',
+  mjpgadaptive: 'mjpegstreamer-adaptive',
+  iframe: 'iframe',
+  ipstream: 'ipstream'
+}
+
+const mjpegstreamerServices: WebcamService[] = [
+  'mjpegstreamer',
+  'mjpegstreamer-adaptive'
+]
 
 export const actions: ActionTree<WebcamsState, RootState> = {
   async reset ({ commit }) {
@@ -12,13 +27,67 @@ export const actions: ActionTree<WebcamsState, RootState> = {
     SocketActions.serverWebcamsList()
   },
 
+  async initWebcams ({ commit }, payload) {
+    commit('setInitWebcams', payload)
+  },
+
+  async initLegacyCameras (_, payload: LegacyCamerasState) {
+    if (payload.cameras) {
+      for (const legacyCamera of payload.cameras) {
+        const service = legacyCameraTypeToWebcamService[legacyCamera.type]
+        const isMjpegStreamer = mjpegstreamerServices.includes(service)
+
+        const webcam: DatabaseWebcamConfig = {
+          name: legacyCamera.name,
+          location: 'printer',
+          service,
+          icon: 'mdiWebcam',
+          enabled: legacyCamera.enabled ?? true,
+          targetFps: legacyCamera.fpstarget || 15,
+          targetFpsIdle: legacyCamera.fpsidletarget || 5,
+          urlStream: isMjpegStreamer && legacyCamera.url ? setUrlQueryParam(legacyCamera.url, 'action', 'stream') : legacyCamera.url,
+          urlSnapshot: isMjpegStreamer && legacyCamera.url ? setUrlQueryParam(legacyCamera.url, 'action', 'snapshot') : legacyCamera.url,
+          flipX: legacyCamera.flipX ?? false,
+          flipY: legacyCamera.flipY ?? false,
+          rotation: legacyCamera.rotate ? +legacyCamera.rotate as WebcamRotation : 0,
+          aspectRatio: '4:3',
+          extraData: {}
+        }
+
+        await httpClientActions.serverDatabaseItemPost(Globals.MOONRAKER_DB.webcams.NAMESPACE, legacyCamera.id, webcam)
+      }
+
+      await httpClientActions.serverDatabaseItemDelete(Globals.MOONRAKER_DB.fluidd.NAMESPACE, Globals.MOONRAKER_DB.fluidd.ROOTS.cameras.name)
+    }
+  },
+
+  async updateWebcam ({ commit }, payload: WebcamConfig) {
+    commit('setUpdateWebcam', payload)
+
+    SocketActions.serverWebcamsWrite(payload)
+  },
+
+  async removeWebcam ({ commit }, payload: string) {
+    commit('setRemoveWebcam', payload)
+
+    SocketActions.serverWebcamsDelete(payload)
+  },
+
+  async updateActiveWebcam ({ commit, state }, payload: string) {
+    commit('setActiveWebcam', payload)
+
+    SocketActions.serverWrite(Globals.MOONRAKER_DB.fluidd.ROOTS.webcams.name + '.activeWebcam', state.activeWebcam)
+  },
+
   async onWebcamsList ({ commit }, payload: { webcams: WebcamConfig[] }) {
     if (payload) {
       commit('setWebcamsList', payload)
     }
   },
 
-  async onWebcamsChanged ({ dispatch }) {
-    dispatch('cameras/reloadMoonrakerWebcamsNamespace', undefined, { root: true })
+  async onWebcamsChanged ({ commit }, payload: { webcams: WebcamConfig[] }) {
+    if (payload) {
+      commit('setWebcamsList', payload)
+    }
   }
 }
diff --git a/src/store/webcams/getters.ts b/src/store/webcams/getters.ts
index 4f6e88a0f0..d9c8802ccc 100644
--- a/src/store/webcams/getters.ts
+++ b/src/store/webcams/getters.ts
@@ -1,10 +1,30 @@
 import type { GetterTree } from 'vuex'
-import type { WebcamsState } from './types'
+import type { WebcamConfig, WebcamsState } from './types'
 import type { RootState } from '../types'
 
 export const getters: GetterTree<WebcamsState, RootState> = {
-  getWebcamsInConfig: (state) => {
-    return state.webcams
-      .filter(webcam => webcam.source === 'config')
+  getWebcams: (state) => {
+    return [...state.webcams]
+      .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''))
+  },
+
+  getEnabledWebcams: (state, getters) => {
+    const webcams = getters.getWebcams as WebcamConfig[]
+
+    return webcams
+      .filter(webcam => webcam.enabled)
+  },
+
+  getVisibleWebcams: (state, getters) => {
+    const enabledWebcams = getters.getEnabledWebcams as WebcamConfig[]
+
+    return state.activeWebcam === 'all'
+      ? enabledWebcams
+      : enabledWebcams
+        .filter(webcam => webcam.uid === state.activeWebcam)
+  },
+
+  getWebcamById: (state) => (id: string) => {
+    return state.webcams.find(webcam => webcam.uid === id)
   }
 }
diff --git a/src/store/webcams/mutations.ts b/src/store/webcams/mutations.ts
index 9c069a8b97..3e2896a256 100644
--- a/src/store/webcams/mutations.ts
+++ b/src/store/webcams/mutations.ts
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import type { MutationTree } from 'vuex'
 import type { WebcamConfig, WebcamsState } from './types'
 import { defaultState } from './state'
@@ -7,7 +8,35 @@ export const mutations: MutationTree<WebcamsState> = {
     Object.assign(state, defaultState())
   },
 
+  setInitWebcams (state, payload: { activeWebcam?: string }) {
+    state.activeWebcam = payload.activeWebcam || 'all'
+  },
+
   setWebcamsList (state, payload: { webcams: WebcamConfig[] }) {
     state.webcams = payload.webcams || []
+  },
+
+  setUpdateWebcam (state, payload: WebcamConfig) {
+    const index = state.webcams.findIndex(webcam => webcam.uid === payload.uid)
+
+    if (index >= 0) {
+      Vue.set(state.webcams, index, payload)
+    } else {
+      state.webcams.push(payload)
+    }
+  },
+
+  setRemoveWebcam (state, payload: string) {
+    const index = state.webcams.findIndex(webcam => webcam.uid === payload)
+
+    if (index >= 0) {
+      state.webcams.splice(index, 1)
+    }
+
+    if (state.activeWebcam === payload) state.activeWebcam = 'all'
+  },
+
+  setActiveWebcam (state, payload: string) {
+    state.activeWebcam = payload
   }
 }
diff --git a/src/store/webcams/state.ts b/src/store/webcams/state.ts
index b186f2ca1e..14af925f8c 100644
--- a/src/store/webcams/state.ts
+++ b/src/store/webcams/state.ts
@@ -2,7 +2,8 @@ import type { WebcamsState } from './types'
 
 export const defaultState = (): WebcamsState => {
   return {
-    webcams: []
+    webcams: [],
+    activeWebcam: 'all'
   }
 }
 
diff --git a/src/store/webcams/types.ts b/src/store/webcams/types.ts
index ddf5a10562..6f1787ad16 100644
--- a/src/store/webcams/types.ts
+++ b/src/store/webcams/types.ts
@@ -1,25 +1,74 @@
 export interface WebcamsState {
   webcams: WebcamConfig[];
+  activeWebcam: string;
 }
 
-export interface WebcamConfig
+export interface NewWebcamConfig
 {
-  name: string,
-  location?: string,
-  service?: string;
+  name?: string;
+  location?: string;
+  service?: WebcamService;
   enabled?: boolean;
   icon?: string;
-  target_fps?: number,
-  target_fps_idle?: number,
-  stream_url?: string,
-  snapshot_url?: string,
-  flip_horizontal?: boolean,
-  flip_vertical?: boolean,
-  rotation?: WebcamRotation,
-  aspect_ratio?: string,
-  extra_data?: Record<string, unknown>,
-  source?: WebcamSource
+  target_fps?: number;
+  target_fps_idle?: number;
+  stream_url?: string;
+  snapshot_url?: string;
+  flip_horizontal?: boolean;
+  flip_vertical?: boolean;
+  rotation?: WebcamRotation;
+  aspect_ratio?: string;
+  extra_data?: Record<string, unknown>;
 }
 
+export interface WebcamConfig extends NewWebcamConfig
+{
+  uid: string;
+  source: WebcamSource;
+}
+
+export type WebcamService = 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'ipstream' | 'iframe' | 'hlsstream' | 'webrtc-camerastreamer' | 'webrtc-go2rtc' | 'device'
+
 export type WebcamRotation = 0 | 90 | 180 | 270
+
 export type WebcamSource = 'config' | 'database'
+
+export interface LegacyCamerasState {
+  activeCamera: string;
+  cameras: LegacyCameraConfig[];
+}
+
+export interface LegacyCameraConfig {
+  id: string;
+  enabled: boolean;
+  name: string;
+  type: LegacyCameraType;
+  url: string;
+  fpstarget?: number;
+  fpsidletarget?: number;
+  flipX: boolean;
+  flipY: boolean;
+  rotate?: LegacyCameraRotation;
+  height?: number;
+}
+
+export type LegacyCameraRotation = '0' | '90' | '180' | '270'
+
+export type LegacyCameraType = 'mjpgstream' | 'mjpgadaptive' | 'ipstream' | 'iframe'
+
+export interface DatabaseWebcamConfig {
+  name: string;
+  location: string;
+  icon: string;
+  enabled: boolean;
+  service: WebcamService;
+  targetFps: number;
+  targetFpsIdle: number;
+  urlStream: string;
+  urlSnapshot: string;
+  flipX: boolean;
+  flipY: boolean;
+  rotation: WebcamRotation;
+  aspectRatio: string;
+  extraData: Record<string, unknown>;
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 10f5ce0aef..5a20b869e4 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -61,6 +61,7 @@ import GcodePreviewCard from '@/components/widgets/gcode-preview/GcodePreviewCar
 import JobQueueCard from '@/components/widgets/job-queue/JobQueueCard.vue'
 import SpoolmanCard from '@/components/widgets/spoolman/SpoolmanCard.vue'
 import SensorsCard from '@/components/widgets/sensors/SensorsCard.vue'
+import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensorsCard.vue'
 
 @Component({
   components: {
@@ -78,7 +79,8 @@ import SensorsCard from '@/components/widgets/sensors/SensorsCard.vue'
     GcodePreviewCard,
     JobQueueCard,
     SpoolmanCard,
-    SensorsCard
+    SensorsCard,
+    RunoutSensorsCard
   }
 })
 export default class Dashboard extends Mixins(StateMixin) {
@@ -115,7 +117,7 @@ export default class Dashboard extends Mixins(StateMixin) {
   }
 
   get hasCameras (): boolean {
-    return this.$store.getters['cameras/getEnabledCameras'].length > 0
+    return this.$store.getters['webcams/getEnabledWebcams'].length > 0
   }
 
   get hasHeatersOrTemperatureSensors () {
@@ -142,6 +144,10 @@ export default class Dashboard extends Mixins(StateMixin) {
     return this.$store.getters['mesh/getSupportsBedMesh']
   }
 
+  get supportsRunoutSensors () {
+    return this.$store.getters['printer/getRunoutSensors'].length > 0
+  }
+
   get supportsSpoolman () {
     return this.$store.getters['server/componentSupport']('spoolman')
   }
@@ -216,6 +222,7 @@ export default class Dashboard extends Mixins(StateMixin) {
     if (item.id === 'job-queue-card' && !this.supportsJobQueue) return true
     if (item.id === 'retract-card' && !this.firmwareRetractionEnabled) return true
     if (item.id === 'bed-mesh-card' && !this.supportsBedMesh) return true
+    if (item.id === 'runout-sensors-card' && !this.supportsRunoutSensors) return true
     if (item.id === 'spoolman-card' && !this.supportsSpoolman) return true
     if (item.id === 'sensors-card' && !this.hasSensors) return true
     if (item.id === 'temperature-card' && !this.hasHeatersOrTemperatureSensors) return true
diff --git a/src/views/FullscreenCamera.vue b/src/views/FullscreenCamera.vue
index c06cff5e1e..c27ee6e6df 100644
--- a/src/views/FullscreenCamera.vue
+++ b/src/views/FullscreenCamera.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import type { CameraConfig } from '@/store/cameras/types'
+import type { WebcamConfig } from '@/store/webcams/types'
 import CameraItem from '@/components/widgets/camera/CameraItem.vue'
 
 @Component({
@@ -21,12 +21,13 @@ import CameraItem from '@/components/widgets/camera/CameraItem.vue'
   }
 })
 export default class FullscreenCamera extends Vue {
-  cameraId: string | null = null
-  camera: CameraConfig | null = null
+  camera: WebcamConfig | null = null
 
   created () {
-    this.cameraId = this.$route.params.cameraId
-    this.camera = this.$store.getters['cameras/getCameras'].find((camera: CameraConfig) => camera.id === this.cameraId)
+    const cameraId = this.$route.params.cameraId
+    const camera = this.$store.getters['webcams/getWebcamById'](cameraId) as WebcamConfig | undefined
+
+    this.camera = camera ?? null
   }
 }
 </script>
diff --git a/src/views/Tune.vue b/src/views/Tune.vue
index aaa3e049c3..b383d16218 100644
--- a/src/views/Tune.vue
+++ b/src/views/Tune.vue
@@ -19,7 +19,10 @@
         class="mb-2 mb-sm-4"
       />
       <end-stops-card class="mb-2 mb-sm-4" />
-      <runout-sensors-card v-if="supportsRunoutSensors" />
+      <runout-sensors-card
+        v-if="supportsRunoutSensors"
+        fullscreen
+      />
     </v-col>
   </v-row>
 </template>