diff --git a/bun.lock b/bun.lock
index 579a047cd..a2a16dfd0 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,8 +9,8 @@
         "xxhash-wasm": "^1.1.0",
       },
       "devDependencies": {
-        "@biomejs/biome": "^2.6.5",
-        "@celldl/editor": "^0.20261105.0",
+        "@biomejs/biome": "^2.6.6",
+        "@celldl/editor": "^0.20261109.0",
         "@celldl/rdf": "^1.20260822.0",
         "@electron-toolkit/tsconfig": "^2.0.0",
         "@electron-toolkit/utils": "^4.0.0",
@@ -18,8 +18,8 @@
         "@physiomelinks/bg2cellml": "^0.6.2",
         "@primeuix/themes": "2.0.3",
         "@primevue/auto-import-resolver": "4.5.5",
-        "@tailwindcss/postcss": "^4.3.4",
-        "@tailwindcss/vite": "^4.3.4",
+        "@tailwindcss/postcss": "^4.3.5",
+        "@tailwindcss/vite": "^4.3.5",
         "@types/bun": "^1.4.4",
         "@types/node": "^26.6.6",
         "@vitejs/plugin-vue": "^6.0.10",
@@ -39,10 +39,10 @@
         "postcss": "^8.5.32",
         "primeicons": "7.0.0",
         "primevue": "4.5.5",
-        "rollup-plugin-visualizer": "^7.1.2",
+        "rollup-plugin-visualizer": "^7.1.3",
         "stylelint": "^18.0.0",
         "stylelint-config-standard": "^41.0.0",
-        "tailwindcss": "^4.3.4",
+        "tailwindcss": "^4.3.5",
         "tailwindcss-primeui": "^0.6.1",
         "tar": "^7.5.22",
         "typescript": "^7.0.2",
@@ -96,29 +96,29 @@
 
     "@babel/types": ["@babel/types@7.29.11", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.11", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-WCsemW40Cpc6gouC1SrY6PBaZ+oLRlEVY9XBvZBI7il/HyUrb2nJ505wE1MHEFyDZNnrWDEuy4jL50WVHfTTSQ=="],
 
-    "@biomejs/biome": ["@biomejs/biome@2.6.5", "", { "optionalDependencies": { "@biomejs/cli-android-arm64": "2.6.5", "@biomejs/cli-android-x64": "2.6.5", "@biomejs/cli-darwin-arm64": "2.6.5", "@biomejs/cli-darwin-x64": "2.6.5", "@biomejs/cli-linux-arm64": "2.6.5", "@biomejs/cli-linux-arm64-musl": "2.6.5", "@biomejs/cli-linux-x64": "2.6.5", "@biomejs/cli-linux-x64-musl": "2.6.5", "@biomejs/cli-win32-arm64": "2.6.5", "@biomejs/cli-win32-x64": "2.6.5" }, "bin": { "biome": "bin/biome" } }, "sha512-n0sp74QbSVEkWXlH659TKv4oJNylwAvDeZ8K8vt/PbcF1xneuNWe57z/G0Bxfh00cufhWXF6DiStLM8+jcLUpg=="],
+    "@biomejs/biome": ["@biomejs/biome@2.6.6", "", { "optionalDependencies": { "@biomejs/cli-android-arm64": "2.6.6", "@biomejs/cli-android-x64": "2.6.6", "@biomejs/cli-darwin-arm64": "2.6.6", "@biomejs/cli-darwin-x64": "2.6.6", "@biomejs/cli-linux-arm64": "2.6.6", "@biomejs/cli-linux-arm64-musl": "2.6.6", "@biomejs/cli-linux-x64": "2.6.6", "@biomejs/cli-linux-x64-musl": "2.6.6", "@biomejs/cli-win32-arm64": "2.6.6", "@biomejs/cli-win32-x64": "2.6.6" }, "bin": { "biome": "bin/biome" } }, "sha512-NCgVJRyrU1+hsW1ILNaRqNAb9fRL4n49bwyef+wjVJQ488/bXbp0BfnNqTTExkiNQT3ugkgYKR1vK8NxsjlNSQ=="],
 
-    "@biomejs/cli-android-arm64": ["@biomejs/cli-android-arm64@2.6.5", "", { "os": "android", "cpu": "arm64" }, "sha512-fkLzc1WRU7wRIUNmAm7cxILb4dd6eESz/VycWvVFKVn6tXx0gFQKdUbPnwT42xys8AEvIJQpFGcK00kURwqorg=="],
+    "@biomejs/cli-android-arm64": ["@biomejs/cli-android-arm64@2.6.6", "", { "os": "android", "cpu": "arm64" }, "sha512-bicnqNNxEX7pjkDQaptYvPRIWDfgXJLl/Ok7iZjC+F1AhfReor3FSS7SgPYnOvUy/jf++5U/KYN4T8OKH5rrNA=="],
 
-    "@biomejs/cli-android-x64": ["@biomejs/cli-android-x64@2.6.5", "", { "os": "android", "cpu": "x64" }, "sha512-fkZ9dPnDAzAcaPtPCiwqtkub5C9FQK/oGCGaU9sq+DysTaq13pE9FxBIMcEZ3ydn8/FfcMdXi/DDzKDP+qyn2Q=="],
+    "@biomejs/cli-android-x64": ["@biomejs/cli-android-x64@2.6.6", "", { "os": "android", "cpu": "x64" }, "sha512-N443kDSElF4kDMKjarsL+ymj/ewLA5R9VAdawA7fJ7pwgN3JVDZp0K+xhKBglH8EwsKi2+K8xC6WxXSkgziFfw=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.6.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bKd0EOREgnVjeZm4s9knQ+WdPOkWS3JHB+eWGHlx+Pq66bqQA1/KybwU0O+zuyAyXiphSCBcrLruZt3YtnJoaQ=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.6.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/vSAqWx3by3p8w5ew+HVJDgguuaTK3U6Fb5gk/oDUH21iWOopm3gOlhT6tZfy5mTaM5R4CVc3uFWkxBtEDrKyw=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.6.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-UkT9BECNOXSiW6SGddjyaRACy362Sc9n3vDaTFkccL0bC2gW7JzM16i4+JKPbEaDn1Sa+oETHV8KungnI/y40Q=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.6.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-lLdOAJKbrAoDs+3GvTyVmMW345D9IhrIE3GgoL2eeHwO1boN4VhrSlALtFYsP0p+Jy4udUp4bTguij0qjKrH8w=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.6.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-H9cVMWBqW/lkFK9NHJdt0bpM2q7PacUDEjQoff9+m0dCV09H/jmBykfTCkbDthHf8+jCuWDJWiQFJ7bDkiGOcA=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.6.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-UzJdUCg9dbEGpZOuZRyehEPrnwKjx9z4Um7sWLG5x6txu7UjeWdJZuBXVGlyAdD39w2Hx0nZeK1jKC4NFUTCNQ=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.6.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-kfc3AePW1a0/d/gUpcIz95nf3Ce8YY2/xL0Fk3fLqAhKsotqUi6PN6BaVWss4p6ijWbiuacZ9NQ4NiQtpjbYpw=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.6.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-rw2Vsoi/WZGDyRjMXx9KZH9zsHe79LIzkdWHkLqsIkeKZm6qiGxtiIApxn7cmJSoEPaSvHaH5pRj1FhTcyL/XA=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.6.5", "", { "os": "linux", "cpu": "x64" }, "sha512-e6/WMSN/+FhH+ZOoBevps/euxFQmv6BXqYNuTn1+ITR6O4XYFjHF5PeVSNZnjkgSYmvhcDkfepSX5lXczMijGA=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.6.6", "", { "os": "linux", "cpu": "x64" }, "sha512-l8/aPXc1cz8VpUyd4hb5Pm5zx+X3voQBks4aLYbp5pC8KSchuHyvqDfY5xax39qCHomI/2xn6NKEot+zebG38g=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.6.5", "", { "os": "linux", "cpu": "x64" }, "sha512-0mHVpLNt7/FugfZ2VPugUIEIiooWIyHGGJUqU9StxamBln9hz+maXRFIECU50jaf5/ZB93veGIViN5VKgw2AEA=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.6.6", "", { "os": "linux", "cpu": "x64" }, "sha512-DiKejs+GnFbOVQsBnukUpiB+T13tqUDFGwwjsTq51vatAsaflzFzVD0BOgjVUGRrqKgE0K0Xf+wNtkcmdN2chw=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.6.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-uBbfpdR/cH5up1iRJFGAPP97xKMzrgMs685CSrY7NM+Q4Unw7chY0o3JulEvJdmU6c6hGQxwqotMq7DDH0DzxA=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.6.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-DjVXwQAQeHrO1JEZAEus54k40Tnh4glyU3VFLcDBKwoz0xnxCEnqw6TCMXoujcQMQynWd3AY8bLrbR1o0XNqow=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.6.5", "", { "os": "win32", "cpu": "x64" }, "sha512-07LaCeN9vvmbAAMOMsUjMfL5UbsCDkvVeyMJIgwNRc0xYqhizBGkjVzx05LYEwCXl2AiHcdzqVPR4IOYAsI1QQ=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.6.6", "", { "os": "win32", "cpu": "x64" }, "sha512-B7KMG26A4I9lAuxwBGMmiVcjMGAeJRoz+pzFt9brRvOAsIrgOu8ptJld5rUWui6tM1uiJwxeJhhDPuAiZtxXdw=="],
 
-    "@celldl/editor": ["@celldl/editor@0.20261105.0", "", { "dependencies": { "@atomic-ehr/ucum": "^0.2.5", "@celldl/metadata": "^1.20260822.0", "@celldl/rdf": "^1.20260822.0", "@ctrl/tinycolor": "^4.2.0", "@lucide/vue": "^1.39.0", "@mathjax/src": "^4.1.3", "@vueuse/core": "14.3.0", "buffer": "^6.0.3", "flatbush": "^4.5.0", "graphology": "^0.26.0", "isomorphic-fetch": "^3.0.0", "jsonschema": "^1.5.0", "mini-svg-data-uri": "^1.4.4", "primeicons": "^7.0.0", "primevue": "^4.5.5", "rbush": "^4.0.1", "svg-intersections": "github:dbrnz/svg-intersections#fix-numbers", "svg-path-commander": "^2.1.11", "systeminformation": "^5.27.11", "transformation-matrix": "^3.1.0", "tslog": "^5.4.0", "ua-parser-js": "^2.0.8", "vue": "^3.5.44", "vue-tippy": "^6.7.1" } }, "sha512-xTUm7r56Q9uNmJtRc/iyCzim1S0fKfFa6AH4VLzuKtWy3qAYapKeD/1iHV0U1YdmeG0icJDi6reUW2PB8cS8bg=="],
+    "@celldl/editor": ["@celldl/editor@0.20261109.0", "", { "dependencies": { "@atomic-ehr/ucum": "^0.2.5", "@celldl/metadata": "^1.20260822.0", "@celldl/rdf": "^1.20260822.0", "@ctrl/tinycolor": "^4.2.0", "@lucide/vue": "^1.39.0", "@mathjax/src": "^4.1.3", "@vueuse/core": "14.3.0", "buffer": "^6.0.3", "flatbush": "^4.5.0", "graphology": "^0.26.0", "isomorphic-fetch": "^3.0.0", "jsonschema": "^1.5.0", "mini-svg-data-uri": "^1.4.4", "primeicons": "^7.0.0", "primevue": "^4.5.5", "rbush": "^4.0.1", "svg-intersections": "github:dbrnz/svg-intersections#fix-numbers", "svg-path-commander": "^2.1.11", "systeminformation": "^5.27.11", "transformation-matrix": "^3.1.0", "tslog": "^5.4.0", "ua-parser-js": "^2.0.8", "vue": "^3.5.44", "vue-tippy": "^6.7.1" } }, "sha512-VyjG9Bp2JY//rlIwM1eu2LaxD4NIAaNiTI9mBcsxf04n5qlJhm3WN9siFoMMbWxqYWvzuJfdiPVESGyyd/NFKw=="],
 
     "@celldl/metadata": ["@celldl/metadata@1.20260822.0", "", { "dependencies": { "@celldl/rdf": "^1.20260822.0" } }, "sha512-xqew4gPCrE4JbkmHWhjS3+Khj70jx7i/L/qvFVf3CrdhVAUrH4Wi1Bodcbz4DQHsnEQUHDcBV8oXvJhXjSg1cg=="],
 
@@ -138,7 +138,7 @@
 
     "@csstools/selector-specificity": ["@csstools/selector-specificity@6.0.1", "", { "peerDependencies": { "postcss-selector-parser": "^7.1.1" } }, "sha512-MBuqFIIvqk4S593MGAskTkPpEUUzZNvGzh8mMxEwl3oHwjQlXmqHEDxNbN3Y0Tsh+xjmem4GZjeg7I0qkwBivg=="],
 
-    "@ctrl/tinycolor": ["@ctrl/tinycolor@4.2.2", "", {}, "sha512-9rQHijqB2Rq6qOEC/xHaA6aPlsKGi5kmCQW50O1asn9g63XFeD5NmBwysriistW5Xx0JPafyD/TA7yk2S3pXGQ=="],
+    "@ctrl/tinycolor": ["@ctrl/tinycolor@4.3.0", "", {}, "sha512-6V0+8vw/GmH92URQ/Ki12FPhoB3nqaQUJE+5xgbFbB5ok0OXYK5jCQsQQoyR3BzCddHsCpyCFRnIcI1PSOVYkQ=="],
 
     "@electron-internal/extract-zip": ["@electron-internal/extract-zip@1.0.8", "", {}, "sha512-8iajeLFbzNwM0m3AsQZSZgYREWglAImyGvvFSWU34FgMW8sHlzdwj9QKvv9dgN7jMP591EFUF/sLOC3Jl9YIjQ=="],
 
@@ -164,7 +164,7 @@
 
     "@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
 
-    "@isaacs/nonrecursive-glob-match": ["@isaacs/nonrecursive-glob-match@1.0.3", "", {}, "sha512-SI7kyKHq4XXDRozw+r9GlRZkia1ZkFrpLW98r2IC2Bpr8YkFGE3fvjzmxCG0x78A++69HmDNrDvSMYBZmHGpKA=="],
+    "@isaacs/nonrecursive-glob-match": ["@isaacs/nonrecursive-glob-match@1.1.0", "", {}, "sha512-GPm/Dbvk5RLmhRnxXIa7nTpK0xtl4E0wj0MslsuNiJ1FIROU+2+9lgUC/dgF7Ey4QCWhfEsgxilMRMCdHPfDfw=="],
 
     "@jeswr/pretty-turtle": ["@jeswr/pretty-turtle@1.8.2", "", { "dependencies": { "n3": "^1.25.2", "rdf-string-ttl": "^1.3.2" }, "peerDependencies": { "@rdfjs/types": "*" } }, "sha512-Os15rA6dAAxdnEqxwvcNZ8wX6fO+gKVgiXJsVmVQ3WDiu61Srf0H/nb4X475IKnDVGDMqmd0lGTL1Lk2uxtcVA=="],
 
@@ -178,7 +178,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@lucide/vue": ["@lucide/vue@1.69.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-uxR2FtureNe37HOQk/e92CZjlTjXVuNiYlD60Mgns0rmbs0wqDnHDgZPUooP6nvmFn/v7Ie6dKRKPzgR6HW5Tw=="],
+    "@lucide/vue": ["@lucide/vue@1.70.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-kutUu3oEtfQnyaP6hh76ShG2dxa8PiL6uY3rk3DqclQe0Vd2FtPlnclezR0XMQtlFMPiEaCOXDSuhehFHW5ErQ=="],
 
     "@malept/cross-spawn-promise": ["@malept/cross-spawn-promise@2.0.0", "", { "dependencies": { "cross-spawn": "^7.0.1" } }, "sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg=="],
 
@@ -284,43 +284,43 @@
 
     "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.2.16", "", { "os": "win32", "cpu": "x64" }, "sha512-1lv1KvX0Z871zfk7vw+dnXMMnHNyDwMzWG8Kv3HxDXMOhzCX4SHc7HK319fInP0i+0p9D8brkfzL7pJOaGl+tw=="],
 
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.1.0", "", {}, "sha512-K+NU2HDCEem4sClgHH4ZZXwdJeNFkJo+hRk479DIwdIviAPN2hFJH1KHHwg8CxHQXvi0M5XY4deTXINfIiSG6w=="],
 
     "@sindresorhus/is": ["@sindresorhus/is@4.6.0", "", {}, "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw=="],
 
     "@szmarczak/http-timer": ["@szmarczak/http-timer@4.0.6", "", { "dependencies": { "defer-to-connect": "^2.0.0" } }, "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.3.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.5", "jiti": "^2.7.0", "lightningcss": "1.33.0", "magic-string": "^1.1.0", "source-map-js": "^1.2.1", "tailwindcss": "4.3.4" } }, "sha512-b7QK/QG04v3j04NbpG82XLCedRyulnkuwUDwRa9oK/ypnJIzMapz2Wg+0TltVczjUzDaJJHIa1+jj9aMUOFMTQ=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.5", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.5", "jiti": "^2.7.0", "lightningcss": "1.33.0", "magic-string": "^1.1.0", "source-map-js": "^1.2.1", "tailwindcss": "4.3.5" } }, "sha512-yT53FzV4ke0cr/BguDxhWMpm5MJu1O2muzk+tKw6lKHjODAsYArBbWwFbJiaksfzFv1tpkO9QHGzmfs1hJT66g=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.4", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.4", "@tailwindcss/oxide-darwin-arm64": "4.3.4", "@tailwindcss/oxide-darwin-x64": "4.3.4", "@tailwindcss/oxide-freebsd-x64": "4.3.4", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.4", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.4", "@tailwindcss/oxide-linux-arm64-musl": "4.3.4", "@tailwindcss/oxide-linux-x64-gnu": "4.3.4", "@tailwindcss/oxide-linux-x64-musl": "4.3.4", "@tailwindcss/oxide-wasm32-wasi": "4.3.4", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.4", "@tailwindcss/oxide-win32-x64-msvc": "4.3.4" } }, "sha512-riqsRw2sLF7B1sNCCkTl3KYXEqvhTiABzZ/4oxxHfZ3c3Td60bCBfOrUuUGOiHagd3E7V+zG46c+XBDWZGFBcg=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.5", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.5", "@tailwindcss/oxide-darwin-arm64": "4.3.5", "@tailwindcss/oxide-darwin-x64": "4.3.5", "@tailwindcss/oxide-freebsd-x64": "4.3.5", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.5", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.5", "@tailwindcss/oxide-linux-arm64-musl": "4.3.5", "@tailwindcss/oxide-linux-x64-gnu": "4.3.5", "@tailwindcss/oxide-linux-x64-musl": "4.3.5", "@tailwindcss/oxide-wasm32-wasi": "4.3.5", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.5", "@tailwindcss/oxide-win32-x64-msvc": "4.3.5" } }, "sha512-PynqGLZsZvwM9tqD/CUxkOIfyd6K5elZ2MooauzJryP/UqXYgi3yYbtt3N0Xe+MHV/eFKPFQCEfIKAqlAS1CBg=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.4", "", { "os": "android", "cpu": "arm64" }, "sha512-qkjxt+EFocOi3mtsUS3ndlj6yj4SHubwBdvBynLnS8T4mvSzX0Enn0CpypJKmBEtczUAXOHVZKA2zTGzSNU2Sg=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.5", "", { "os": "android", "cpu": "arm64" }, "sha512-Se0z5xMqcSQanJD1IYmO0cGpK3iv0fp3ZsIT7xRJZ1Da5PghvNoc46zz4jIQn+aan3dV9T8AermFNN9QPmsh0Q=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-i/awUA/7mJQAbA3AzCW8aQtUh5goMieUdF1zOoclLaJUCxDvsXQ8VJqpQZY3dfcHS6PJjd3tw25nNneD/mEviQ=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-UPrgTDuUbvmqGMZuCnmI3FKee/tYKzKdp00/kuB4oSGB213VYg8QTdF7lVhnPoBXq/mIfJ+ILoBFqNOboWcMwQ=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-q56V9U6AnoYz/yj/alkDLhSQ9AZoXQSEl93f7WETa0+32CudbqM57BXdYXfMYPKudueXKaA+MG6L/0KRseF7Jg=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-E+p7HEtjI0b8D7kbbWxH067cGui6d4c79COGko9fAPVE3rwc1E7ld2HFCbaG86AOGWS5VKQYqZOaf38ya4uxTQ=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-r0W7A+Z9HTHh7bwihJl45E/zZKLjxD50/jToVF/E/RZHSl8+EWO+4yKKJpPMcUooT9hdoip3Zx1uWnbMg4N79g=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-yWEWcWyAG7rWOcTpJTjdhQ3pcaFY2h+0bqTRfgU3G2fz87ZU3AKdvdZKhslD+kyHnjBUWKvNdRYwIYC5dI1tIg=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.4", "", { "os": "linux", "cpu": "arm" }, "sha512-3aih/sRxzeYfi2Bkh+bGYNf2YU9Llamb2mpA7BNF1obYzdgEeWDAMQzK6BSwzLhs/eTdOaSur92qrGfchagUtQ=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.5", "", { "os": "linux", "cpu": "arm" }, "sha512-WmeVjtJhZlr+smpqcdR2kQkkn6arHIJnUIBxTO2EJcTLGY1ecVXNo2hbSn8xc0IH2aEtys936iMWKGyj0GaKnA=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-ktJSrPGQou4OqL88rDEx5CkeM9BjzrwZvYo8u7B7VL1zkBa2XBm351o4MQrek95qikb2M++26Y7w7vbH6Mgl8g=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-DTCSyucc6ShMp1QMqV5R94Z7xlgNgUzkGmFF1rL5HH2Qjy4eSmEqy+YLGkqqYvWa4sILtgrBt1JjRKbneQtiFQ=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-rt3hjUxT7utAtcB+df6wHyaXDyxhE7Zd1x7L/nvB5Jb2qBb8dZwFUoWqeRja1BaF5OlSqkKSjBmVXj9OsevmCQ=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-H9lsvO4x9E4nE4Hi8h7NHHw0O/kcVSu+iOyFHNGdYzazGgDjFHZbE6S3hQ8kMcbNXSBlMdNi67LV5EVqtpaJtw=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-XE3jO2yOOWjttpeGvpwf3/b274NMi3QapQSAI/EzsgrmYNan1Tw8dXT9JQkN7K0OgvuqiC8mcCyNvGzEkpVJPQ=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.5", "", { "os": "linux", "cpu": "x64" }, "sha512-4uxQvtBvPuIdl13WfUBj9xMZHH14PtHZ8OZdtLmdyDtG66sCa1t599NZT+jagkUzRtWhuul1qRZQ1nAJscXN5g=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-PaAZ2FjJaZk9SQLYtKIfQWiFm/xtl7pX2MKPgCzn0mS/VU54yu+vP457AJdB2XFLxU3gO2abLCt8N7Lg4EbKNg=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.5", "", { "os": "linux", "cpu": "x64" }, "sha512-0JQAzs7jwbA7O6+z/adU+Jk3AXwsu3npAhtr5escXS7TqEqWcaDV7qHuI+0Vy/KQRuVGnLQREcSJWYauyV3oqg=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.4", "", { "dependencies": { "@emnapi/core": "^1.11.3", "@emnapi/runtime": "^1.11.3", "@emnapi/wasi-threads": "^1.2.3", "@napi-rs/wasm-runtime": "^1.2.2", "@tybys/wasm-util": "^0.10.3", "tslib": "^2.8.1" } }, "sha512-bjO9WmoM687p8AoCIyw1DUqzpAs4JICLvNmIPxIWDmhw8IOsdubtWQLShyJmISnDKtRy1BBApHVOUl6sNFQQJA=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.5", "", { "dependencies": { "@emnapi/core": "^1.11.3", "@emnapi/runtime": "^1.11.3", "@emnapi/wasi-threads": "^1.2.3", "@napi-rs/wasm-runtime": "^1.2.2", "@tybys/wasm-util": "^0.10.3", "tslib": "^2.8.1" } }, "sha512-OJhFmlEfdzMr+avACdi40RPtnkW0B6hXyxL/8r+tnEHBWZji36CYRjEXrrvgBmaYsD3oEOBqwYFRKsYvzFe7Bw=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-jCrwCvWVtt7ruMXp6dFPd5KBNU8o1tWtEdZbTL/w/hvD3lUYZA0E2mmfvTzW4QLHIx5wGQU9HeY7997R1QTrEg=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-9o8jgthi+QE5eandnboiJT64VQfnIArfZzSTdgbhEK5aafdiu2jTW9Honi/mwYHxBZuH1vAC57IFyrh+0iK5Gg=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.4", "", { "os": "win32", "cpu": "x64" }, "sha512-cge1wcedn1FrRSXL22lF5sNDYr8c9+VImk7zFYLPs12jkDmchSrZNfzWqOKub+5Hb/aYRdDEqERGGDKONBlOzQ=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.5", "", { "os": "win32", "cpu": "x64" }, "sha512-XiKFfIy1RWe7qK4WqByxNW7Oz1/nkOy8o/BWhHminyV1PmpUd8Eedj5v2A8h2kpqeVlz6xRnwk9Fr/ZXNLcZfg=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.4", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.4", "@tailwindcss/oxide": "4.3.4", "postcss": "^8.5.25", "tailwindcss": "4.3.4" } }, "sha512-6O0QLY+1CseO8ivlYK2Y7IxNPaQ8D5ypxrV+ws34mbxknWH824J+gEWtJ0gyFiYAudmdEeXdF8kqwgXIaZRyHw=="],
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.5", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.5", "@tailwindcss/oxide": "4.3.5", "postcss": "^8.5.25", "tailwindcss": "4.3.5" } }, "sha512-FAV37Tlx9wBiT/hkfgVD0Q6CWsP2oUX3lf28nrfjW8+ksILjnpuFulUqWDfNR4/ZiEHHDRBX8DUTzD1Rys687A=="],
 
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.4", "", { "dependencies": { "@tailwindcss/node": "4.3.4", "@tailwindcss/oxide": "4.3.4", "tailwindcss": "4.3.4" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-wGukGWb8SVuN7+FJvSS7M5eSJWDIWwVSvUvj1q41eTIhGPsS2DAgFWjA7YURJNwjHSgty59Hz8iMUiyO+YMHBQ=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.5", "", { "dependencies": { "@tailwindcss/node": "4.3.5", "@tailwindcss/oxide": "4.3.5", "tailwindcss": "4.3.5" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-BCNiY0a1ZjdOHVqw7kyb7U72BwfMF3dfUuN+tQsLWky/J5JOI/r7abibglXfygrZhVO/3u3V+E25kkKTeMkXaQ=="],
 
     "@thednp/dommatrix": ["@thednp/dommatrix@3.1.2", "", {}, "sha512-wxRH2/Qdqd+JxFpjb5vw+ZMaij8Hqa/9Hgl41n2Jb+3WNRhdemrosK0FxEo/yEvhvHGW8D1tZ3oPH9N0m1QG+A=="],
 
@@ -496,7 +496,7 @@
 
     "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001820", "", {}, "sha512-gfWD6MxqVCqAOwmODfZf7DchWvlrA+SRdNX7ceLfg3xRqe5ssjjpF7EgslC/0tiLiNTajdaNN/q8c/5u/7Gz8w=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001823", "", {}, "sha512-TQ5s/djDjNk1axreUW+4rULH+BmdCMLiJkhaXnO5wqivG7tITkSUj4ItIdzqdZHKaXcHAV8dhH3JxOM7/7bwqw=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
@@ -518,7 +518,7 @@
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
 
-    "colord": ["colord@2.10.0", "", {}, "sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw=="],
+    "colord": ["colord@2.11.0", "", {}, "sha512-R7EZD9e+sWpUQFr3F6v747NAazZCD+OhsM0VnPkHGxSaQvw4ZvJoCVz51gemztBBoZaFvMP0qdKgFyBdBurfgA=="],
 
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
@@ -542,8 +542,6 @@
 
     "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="],
 
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
@@ -596,7 +594,7 @@
 
     "electron-publish": ["electron-publish@26.18.0", "", { "dependencies": { "@types/fs-extra": "^9.0.11", "aws4": "^1.13.2", "builder-util": "26.16.0", "builder-util-runtime": "9.7.0", "chalk": "^4.1.2", "form-data": "^4.0.5", "fs-extra": "^10.1.0", "lazy-val": "^1.0.5", "mime": "^2.5.2" } }, "sha512-MagnqaZSALSWjcdKu5HEVhYUZD/2BDL3q7XzrqWwub6gf/UfD3ItMgmthVDv9w5y9E0gH1C3JWqKaXwf6f4ROg=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.477", "", {}, "sha512-PN++F4zWZoVDGWinxMnSCpVqKhqFOJfLXxdU8bYJKudAEsHL/XKVITOKWVbfMt1r276Mi9RDLU9VHx9uKJ4RMQ=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.478", "", {}, "sha512-pftG+ma5Lm8O6/p45bhYT6StBN5ziQymaRzmCZwFl8DwWHKPPD93FdOmP1aqftcepolQYvrcyTLa17kE8Yf+jg=="],
 
     "electron-updater": ["electron-updater@6.8.11", "", { "dependencies": { "builder-util-runtime": "9.7.0", "fs-extra": "^10.1.0", "js-yaml": "^4.1.0", "lazy-val": "^1.0.5", "lodash.escaperegexp": "^4.1.2", "lodash.isequal": "^4.5.0", "semver": "~7.7.3", "tiny-typed-emitter": "^2.1.0" } }, "sha512-12U/mbzaIKQS3Q543aQ7DjyAZMXeVJy1Wpu0qdq5ne4RXpIQDpWYm25zRjgXngAoo6swMrm4C4owGyiIipelsg=="],
 
@@ -916,7 +914,7 @@
 
     "postcss-safe-parser": ["postcss-safe-parser@7.1.0", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-1WzZxRLaAFwEh6Do+zyGpjWV3nGJNxxhuh7Ubu/q1ICImMgZJnLwhoaEpRbG4pJppp2Y1ncL9ffA2f+LhrefQg=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.7", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-wWBro/7hJ40ye6TPiXkUQoXKCw23xSsjriUvqd7Uls9Sso3oLiON1flc18cCdnjgCRXw4fBVqUJJeOdDTh3P3g=="],
+    "postcss-selector-parser": ["postcss-selector-parser@7.2.0", "", { "dependencies": { "util-deprecate": "^1.0.2" } }, "sha512-Khh/tERVBn0I1499dvBSHY0pWJloMJWUxDsOBM0CCDPAcVZ10Jl2L1qy1f19uEX22spa8Mv7DCdEQJc0cGwBhQ=="],
 
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
@@ -984,13 +982,13 @@
 
     "rolldown": ["rolldown@1.2.16", "", { "dependencies": { "@oxc-project/types": "=0.156.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.16", "@rolldown/binding-android-arm64": "1.2.16", "@rolldown/binding-darwin-arm64": "1.2.16", "@rolldown/binding-darwin-x64": "1.2.16", "@rolldown/binding-freebsd-x64": "1.2.16", "@rolldown/binding-linux-arm-gnueabihf": "1.2.16", "@rolldown/binding-linux-arm64-gnu": "1.2.16", "@rolldown/binding-linux-arm64-musl": "1.2.16", "@rolldown/binding-linux-ppc64-gnu": "1.2.16", "@rolldown/binding-linux-s390x-gnu": "1.2.16", "@rolldown/binding-linux-x64-gnu": "1.2.16", "@rolldown/binding-linux-x64-musl": "1.2.16", "@rolldown/binding-openharmony-arm64": "1.2.16", "@rolldown/binding-win32-arm64-msvc": "1.2.16", "@rolldown/binding-win32-x64-msvc": "1.2.16" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-bWvlMpFKiTfDKfnK7FC2MPgPeWCf/Kpwsq49ApdW+FQaBZb6O6dZ4MAPbPUjp7hYQrw/RobqCzn64BRrQecGHw=="],
 
-    "rollup-plugin-visualizer": ["rollup-plugin-visualizer@7.1.2", "", { "dependencies": { "open": "^11.0.0", "picomatch": "^4.0.5", "source-map": "^0.8.0", "yargs": "^18.1.0" }, "peerDependencies": { "rolldown": "1.x || ^1.0.0-beta || ^1.0.0-rc", "rollup": "2.x || 3.x || 4.x" }, "optionalPeers": ["rolldown", "rollup"], "bin": { "rollup-plugin-visualizer": "dist/bin/cli.js" } }, "sha512-+yrEz9LJ7fxd7T0yj4GPvcKHKfJNzTzKT7FHiF3f/US+7EaWlgB8PoGbUOlobD4Al8v6TeCCl/Fgbov5FV/DaA=="],
+    "rollup-plugin-visualizer": ["rollup-plugin-visualizer@7.1.3", "", { "dependencies": { "open": "^11.0.0", "picomatch": "^4.0.5", "source-map": "^0.8.0", "yargs": "^18.1.0" }, "peerDependencies": { "rolldown": "1.x || ^1.0.0-beta || ^1.0.0-rc", "rollup": "2.x || 3.x || 4.x" }, "optionalPeers": ["rolldown", "rollup"], "bin": { "rollup-plugin-visualizer": "dist/bin/cli.js" } }, "sha512-P7G0p9RowDd0ahXXBtx4MOHlSVzclyW5pDeZ2Z0HensWSI9vJdu2bqdZDsD375g+0AxND8VJzWYuKD9yH38etw=="],
 
     "run-applescript": ["run-applescript@7.1.0", "", {}, "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q=="],
 
     "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
 
-    "sanitize-filename": ["sanitize-filename@1.6.4", "", { "dependencies": { "truncate-utf8-bytes": "^1.0.0" } }, "sha512-9ZyI08PsvdQl2r/bBIGubpVdR3RR9sY6RDiWFPreA21C/EFlQhmgo20UZlNjZMMZNubusLhAQozkA0Od5J21Eg=="],
+    "sanitize-filename": ["sanitize-filename@1.6.5", "", { "dependencies": { "truncate-utf8-bytes": "^1.0.0" } }, "sha512-+dVApt46/oAFWRP0KBSnYNLRw1peY7o/b12tmpllPNFpjfwkPuZut1+DiKaD9zYx5r2SHwc+XMLSBaDiyUJw3g=="],
 
     "sax": ["sax@1.6.1", "", {}, "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q=="],
 
@@ -1044,7 +1042,7 @@
 
     "systeminformation": ["systeminformation@5.33.19", "", { "os": "!aix", "bin": { "systeminformation": "lib/cli.js" } }, "sha512-Zm7wGeCG7PqfvzegMJIzrxICopWqYCeLATVmvxOOci1isLcNVKgY4Fr0hhYQzvc7cgtK3377jQVChTFAnznOiA=="],
 
-    "tailwindcss": ["tailwindcss@4.3.4", "", {}, "sha512-PCJZTFFdG+sL3gvnP1Do9o6GbkvH2q0p04xSs3f7cSvmAeK+sttG+/7ncK1fdRwKFfC7n+wDDJaOMBSefkI9ow=="],
+    "tailwindcss": ["tailwindcss@4.3.5", "", {}, "sha512-FcQk9BuffmEHJP2G0XmB2SplU1aLTI7j07Kunk+U74Ny+XiWOtzXz9aujFZ/avntw1e2cOv/3PkgzflQ7gX2vQ=="],
 
     "tailwindcss-primeui": ["tailwindcss-primeui@0.6.1", "", { "peerDependencies": { "tailwindcss": ">=3.1.0" } }, "sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A=="],
 
@@ -1262,7 +1260,7 @@
 
     "rdf-data-factory/@rdfjs/types": ["@rdfjs/types@1.1.2", "", { "dependencies": { "@types/node": "*" } }, "sha512-wqpOJK1QCbmsGNtyzYnojPU8gRDPid2JO0Q0kMtb4j65xhCK880cnKAfEOwC+dX85VJcCByQx5zOwyyfCjDJsg=="],
 
-    "rimraf/glob": ["glob@14.0.3", "", { "dependencies": { "minimatch": "^11.0.2", "minipass": "^7.1.3", "path-scurry": "^3.0.0" } }, "sha512-A1vjIwC3qpdCso45Iw127gnp7sPhqgY8lUQhDrArIs+GbmfaaVPFuoyy7WyLT9EPZCRZ7j7aLdwUhQmHWesEow=="],
+    "rimraf/glob": ["glob@14.0.4", "", { "dependencies": { "minimatch": "^11.0.5", "minipass": "^7.1.3", "path-scurry": "^3.0.0" } }, "sha512-mMiwNKoJZ4HAIRVJxotO6LsNRReA30gQwP9E2/p94tfLv+jygCNpKDjhhSL6OLY6LE371EZm5EAf7RpYuUqlsw=="],
 
     "rollup-plugin-visualizer/yargs": ["yargs@18.2.0", "", { "dependencies": { "cliui": "^9.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "string-width": "^8.2.1", "y18n": "^5.0.5", "yargs-parser": "^22.0.0" } }, "sha512-9OpKOLeaoNFecEp7P6iYbzze/5CqWoH7N3SMs/6y1XF4nMvFMspEGZzJ6uFi9MmQwXhyzqYoSEKO3tvA3Z/o2w=="],
 
@@ -1318,7 +1316,7 @@
 
     "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
 
-    "rimraf/glob/minimatch": ["minimatch@11.0.4", "", { "dependencies": { "@isaacs/nonrecursive-glob-match": "^1.0.3", "brace-expansion": "^5.0.12" } }, "sha512-/UJ1dEoVQTjPNDh6SGlUo+ueLMmoHTas4q+8yaAR/5t6nLAIiBDJtoYUh20IYleix7ehiQkgczb84PE3uzHkxg=="],
+    "rimraf/glob/minimatch": ["minimatch@11.0.5", "", { "dependencies": { "@isaacs/nonrecursive-glob-match": "^1.1.0", "brace-expansion": "^5.0.12" } }, "sha512-snPlVppFcYWfLLFQGhDxUyBcHNtMlWmn3jtj7pEaO+DP8pqL0IvAzXhMYmn1z9ASNtgmwLBdFxSf4tMUB0OTKA=="],
 
     "rollup-plugin-visualizer/yargs/cliui": ["cliui@9.0.1", "", { "dependencies": { "string-width": "^7.2.0", "strip-ansi": "^7.1.0", "wrap-ansi": "^9.0.0" } }, "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w=="],
 
@@ -1350,10 +1348,10 @@
 
     "rollup-plugin-visualizer/yargs/cliui/string-width/emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
 
-    "rollup-plugin-visualizer/yargs/cliui/strip-ansi/ansi-regex": ["ansi-regex@6.5.0", "", {}, "sha512-zhvbbbdt1kbw7EJ9OQoxmQcuaNR9P5kTj7e/YdmOSU10aHWbycofJxA6jKfoEy3vlLdctOF9ZHaxLtmSm998wQ=="],
+    "rollup-plugin-visualizer/yargs/cliui/strip-ansi/ansi-regex": ["ansi-regex@6.6.0", "", {}, "sha512-XZ5apbzreCbXSKwPjJstu8R0zOi247w3XYwWxtwBXgpZrCyc1Ka7p9/xY0A9/diMewmHbEKz+FIraWaEWjlN5g=="],
 
     "rollup-plugin-visualizer/yargs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
 
-    "rollup-plugin-visualizer/yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.5.0", "", {}, "sha512-zhvbbbdt1kbw7EJ9OQoxmQcuaNR9P5kTj7e/YdmOSU10aHWbycofJxA6jKfoEy3vlLdctOF9ZHaxLtmSm998wQ=="],
+    "rollup-plugin-visualizer/yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.6.0", "", {}, "sha512-XZ5apbzreCbXSKwPjJstu8R0zOi247w3XYwWxtwBXgpZrCyc1Ka7p9/xY0A9/diMewmHbEKz+FIraWaEWjlN5g=="],
   }
 }
diff --git a/package.json b/package.json
index fbcd63dda..8937cc15f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "1.20261106.0",
+  "version": "1.20261109.0",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -53,8 +53,8 @@
     "xxhash-wasm": "^1.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.6.5",
-    "@celldl/editor": "^0.20261105.0",
+    "@biomejs/biome": "^2.6.6",
+    "@celldl/editor": "^0.20261109.0",
     "@celldl/rdf": "^1.20260822.0",
     "@electron-toolkit/tsconfig": "^2.0.0",
     "@electron-toolkit/utils": "^4.0.0",
@@ -62,8 +62,8 @@
     "@physiomelinks/bg2cellml": "^0.6.2",
     "@primeuix/themes": "2.0.3",
     "@primevue/auto-import-resolver": "4.5.5",
-    "@tailwindcss/postcss": "^4.3.4",
-    "@tailwindcss/vite": "^4.3.4",
+    "@tailwindcss/postcss": "^4.3.5",
+    "@tailwindcss/vite": "^4.3.5",
     "@types/bun": "^1.4.4",
     "@types/node": "^26.6.6",
     "@vitejs/plugin-vue": "^6.0.10",
@@ -83,10 +83,10 @@
     "postcss": "^8.5.32",
     "primeicons": "7.0.0",
     "primevue": "4.5.5",
-    "rollup-plugin-visualizer": "^7.1.2",
+    "rollup-plugin-visualizer": "^7.1.3",
     "stylelint": "^18.0.0",
     "stylelint-config-standard": "^41.0.0",
-    "tailwindcss": "^4.3.4",
+    "tailwindcss": "^4.3.5",
     "tailwindcss-primeui": "^0.6.1",
     "tar": "^7.5.22",
     "typescript": "^7.0.2",
diff --git a/src/extern/corsProxy.js b/src/extern/corsProxy.js
index 5100601c4..51acd806d 100644
--- a/src/extern/corsProxy.js
+++ b/src/extern/corsProxy.js
@@ -1,6 +1,6 @@
 // A simple CORS proxy handler for Cloudflare Workers (see https://workers.cloudflare.com/).
-// Note: the proxy accepts any target URL, but it only returns content that is a CellML file, a SED-ML file, an OMEX file,
-//       or a CSV file (see isCsvFile()), and that is not too large (see MAX_SIZE). Such content is returned as an
+// Note: the proxy accepts any target URL, but it only returns content that is a CellML file, a SED-ML file, an OMEX
+//       file, or a CSV file (see isCsvFile()), and that is not too large (see MAX_SIZE). Such content is returned as an
 //       opaque, sandboxed download, so that a browser never renders or executes it.
 
 const CORS_HEADERS = {
@@ -97,9 +97,9 @@ const readBytes = async (reader, maxSize) => {
 const readRest = async (reader, head) => {
   // Read the rest of some content, the start of which we have already read, and return all of it, unless it is too
   // large, in which case return null.
-  // Note: we read (up to) one more byte than allowed, so that we know whether the content is too large, in which case we
-  //       reject it without concatenating its chunks. Otherwise, we concatenate the start of the content and the rest of
-  //       it in one go.
+  // Note: we read (up to) one more byte than allowed, so that we know whether the content is too large, in which case
+  //       we reject it without concatenating its chunks. Otherwise, we concatenate the start of the content and the
+  //       rest of it in one go.
 
   const all = await readChunks(reader, MAX_SIZE + 1, [head]);
 
diff --git a/src/main/ApplicationWindow.ts b/src/main/ApplicationWindow.ts
index 6367403d0..2c6ed663f 100644
--- a/src/main/ApplicationWindow.ts
+++ b/src/main/ApplicationWindow.ts
@@ -17,9 +17,13 @@ export class ApplicationWindow extends electron.BrowserWindow {
 
   constructor(options: electron.BrowserWindowConstructorOptions, usePreload = true) {
     // Add some common options and call our parent constructor.
-    // Note: we use backgroundColor to minimise the flickering that may occur when first showing a window.
+    // Note #1: we use backgroundColor to minimise the flickering that may occur when first showing a window.
+    // Note #2: a transparent window (e.g., our splash screen window) draws its own background, so it must keep a
+    //          transparent background.
 
-    options.backgroundColor = backgroundColor();
+    const transparent = !!options.transparent;
+
+    options.backgroundColor = transparent ? '#00000000' : backgroundColor();
     options.show = false;
     options.useContentSize = true;
 
@@ -43,19 +47,21 @@ export class ApplicationWindow extends electron.BrowserWindow {
     //       when our window gets resized), so it must match our theme, which may change while we are running (e.g., if
     //       the user changes our theme or the system one), or there would be some flickering.
 
-    const updateBackgroundColor = (): void => {
-      const color = backgroundColor();
+    if (!transparent) {
+      const updateBackgroundColor = (): void => {
+        const color = backgroundColor();
 
-      if (color && !this.isDestroyed()) {
-        this.setBackgroundColor(color);
-      }
-    };
+        if (color && !this.isDestroyed()) {
+          this.setBackgroundColor(color);
+        }
+      };
 
-    electron.nativeTheme.on('updated', updateBackgroundColor);
+      electron.nativeTheme.on('updated', updateBackgroundColor);
 
-    this.once('closed', () => {
-      electron.nativeTheme.removeListener('updated', updateBackgroundColor);
-    });
+      this.once('closed', () => {
+        electron.nativeTheme.removeListener('updated', updateBackgroundColor);
+      });
+    }
   }
 
   // Send a message to our renderer.
diff --git a/src/main/MainMenu.ts b/src/main/MainMenu.ts
index 69cafdb1b..fee9f6fb7 100644
--- a/src/main/MainMenu.ts
+++ b/src/main/MainMenu.ts
@@ -99,14 +99,14 @@ export const enableDisableMainMenu = (enable: boolean): void => {
       label: 'Open...',
       accelerator: 'CmdOrCtrl+O',
       click: () => {
-        mainWindow?.open();
+        mainWindow?.showOpenDialog();
       }
     });
     fileSubMenu.push({
-      label: 'Open Remote...',
+      label: 'Open Location...',
       accelerator: 'CmdOrCtrl+Shift+O',
       click: () => {
-        mainWindow?.send('open-remote');
+        mainWindow?.send('open-location');
       }
     });
     fileSubMenu.push({
diff --git a/src/main/MainWindow.ts b/src/main/MainWindow.ts
index 22e2742ab..f295f220b 100644
--- a/src/main/MainWindow.ts
+++ b/src/main/MainWindow.ts
@@ -39,7 +39,8 @@ export const canCheckForUpdates = (): boolean => {
   return _canCheckForUpdates;
 };
 
-// Keep track of the state of an update, i.e. whether it is being downloaded, has been downloaded, or is being installed.
+// Keep track of the state of an update, i.e. whether it is being downloaded, has been downloaded, or is being
+// installed.
 // Note: our renderer process may be reloaded while an update is being downloaded or installed (e.g., after it crashed),
 //       in which case we must not check for updates (e.g., at startup) since an issue with checking for updates could
 //       get forwarded as an issue with installing the update (see below) and the update could be offered (and
@@ -49,6 +50,8 @@ type UpdateState = 'idle' | 'downloading' | 'downloaded' | 'installing';
 
 let updateState: UpdateState = 'idle';
 let updateDownloadPercent = 0;
+let updateDownloadTransferred = 0;
+let updateDownloadTotal = 0;
 
 export const checkForUpdates = (atStartup: boolean): void => {
   // An update has already been downloaded, but the user cancelled its installation (when asked whether to save the
@@ -93,8 +96,10 @@ export const checkForUpdates = (atStartup: boolean): void => {
 autoUpdater.on('download-progress', (info: ProgressInfo) => {
   if (updateState === 'downloading') {
     updateDownloadPercent = info.percent;
+    updateDownloadTransferred = info.transferred;
+    updateDownloadTotal = info.total;
 
-    MainWindow.instance?.send('update-download-progress', info.percent);
+    MainWindow.instance?.send('update-download-progress', info.percent, info.transferred, info.total);
   }
 });
 
@@ -125,12 +130,15 @@ autoUpdater.on('error', (error: Error) => {
 export const downloadAndInstallUpdate = (): void => {
   updateState = 'downloading';
   updateDownloadPercent = 0;
+  updateDownloadTransferred = 0;
+  updateDownloadTotal = 0;
 
   autoUpdater
     .downloadUpdate()
     .then(() => {
       updateState = 'downloaded';
       updateDownloadPercent = 100;
+      updateDownloadTransferred = updateDownloadTotal;
 
       MainWindow.instance?.send('update-downloaded');
     })
@@ -172,17 +180,25 @@ export const installUpdateAndRestart = (): boolean => {
 const resendUpdateState = (): void => {
   // Let our renderer know about the update that is being downloaded or installed, if any.
   // Note: this is needed when our renderer has been reloaded (e.g., after it crashed), so that it can show the progress
-  //       of the update (and block its UI) and ask us to install the update once it has been downloaded (in case our
-  //       previous renderer didn't get a chance to do so).
+  //       of the update (and block its UI), ask us to install the update once it has been downloaded (in case our
+  //       previous renderer didn't get a chance to do so), or show that the update is being installed (and block its
+  //       UI) if we have already been asked to install it (in which case OpenCOR is about to be quit).
 
   if (updateState === 'idle') {
     return;
   }
 
-  MainWindow.instance?.send('update-download-progress', updateDownloadPercent);
+  MainWindow.instance?.send(
+    'update-download-progress',
+    updateDownloadPercent,
+    updateDownloadTransferred,
+    updateDownloadTotal
+  );
 
   if (updateState === 'downloaded') {
     MainWindow.instance?.send('update-downloaded');
+  } else if (updateState === 'installing') {
+    MainWindow.instance?.send('update-installing');
   }
 };
 
@@ -233,9 +249,18 @@ export const resetAll = (): void => {
 
 let recentFilePaths: string[] = [];
 
+const recentFilePathsUpdated = (): void => {
+  // Let our Reopen menu and our renderer (which lists our most recent files on its start screen, see
+  // mainProcessRecentFilePaths in OpenCOR.vue) know about our (updated) recent file paths.
+
+  updateReopenMenu(recentFilePaths);
+
+  MainWindow.instance?.send('recent-files', [...recentFilePaths]);
+};
+
 const removeRecentFilePath = (filePath: string): boolean => {
   // Remove the given file path from our recent file paths and return whether it was removed (in which case our Reopen
-  // menu needs to be updated).
+  // menu and our renderer need to be updated, see recentFilePathsUpdated()).
 
   let res = false;
 
@@ -253,7 +278,7 @@ const removeRecentFilePath = (filePath: string): boolean => {
 export const clearRecentFiles = (): void => {
   recentFilePaths = [];
 
-  updateReopenMenu(recentFilePaths);
+  recentFilePathsUpdated();
 
   // Let our renderer know that our recent files have been cleared, so that it can release the contents that it kept for
   // the files that were opened using a data URL and then closed (see OpenCOR.addRecentFile()).
@@ -276,7 +301,7 @@ const forgetDataUrlRecentFilePaths = (): void => {
   if (filePaths.length !== recentFilePaths.length) {
     recentFilePaths = filePaths;
 
-    updateReopenMenu(recentFilePaths);
+    recentFilePathsUpdated();
   }
 };
 
@@ -289,7 +314,18 @@ export const fileClosed = (filePath: string): void => {
     recentFilePaths.length = MAX_RECENT_FILES;
   }
 
-  updateReopenMenu(recentFilePaths);
+  recentFilePathsUpdated();
+};
+
+// Reopen the given recent file, i.e. as if it was reopened using our Reopen menu.
+// Note: we only reopen a file that is one of our recent files since our renderer (which asks us to reopen it, see
+//       onOpenRecentFileAction() in OpenCOR.vue) could otherwise use this to be allowed to save any file (see
+//       openFile()).
+
+export const reopenRecentFile = (filePath: string): void => {
+  if (recentFilePaths.includes(filePath)) {
+    MainWindow.instance?.openFile(filePath);
+  }
 };
 
 export const recentFilePathCanonicalised = (filePath: string, canonicalFilePath: string): void => {
@@ -323,7 +359,7 @@ export const recentFilePathCanonicalised = (filePath: string, canonicalFilePath:
     }
   }
 
-  updateReopenMenu(recentFilePaths);
+  recentFilePathsUpdated();
 };
 
 // Note: for fileIssue() and fileOpened(), filePath is the path that was used to (try to) open the file, which may be
@@ -340,15 +376,15 @@ const removeRecentFilePaths = (filePath: string, canonicalFilePath: string): voi
   const canonicalFilePathRemoved = removeRecentFilePath(canonicalFilePath);
 
   if (filePathRemoved || canonicalFilePathRemoved) {
-    updateReopenMenu(recentFilePaths);
+    recentFilePathsUpdated();
   }
 };
 
 export const fileIssue = (filePath: string, canonicalFilePath: string): void => {
   removeRecentFilePaths(filePath, canonicalFilePath);
 
-  // A file couldn't be opened, possibly while reopening files during OpenCOR startup, in which case we need to make sure
-  // that it doesn't get selected and reopen the next file.
+  // A file couldn't be opened, possibly while reopening files during OpenCOR startup, in which case we need to make
+  // sure that it doesn't get selected and reopen the next file.
 
   MainWindow.instance?.fileOpenedOrNot(filePath, false);
 };
@@ -692,6 +728,7 @@ export class MainWindow extends ApplicationWindow {
   private _notRespondingAbortController: AbortController | null = null;
   private _rendererGone = false;
   private _rendererGoneCount = 0;
+  private _openDialogShown = false;
   private _pendingArguments: string[] = [];
   private _recentFilePathsToCanonicalise: string[] = [];
   private _filesToReopen: IFilesToReopen | null = null;
@@ -803,7 +840,7 @@ export class MainWindow extends ApplicationWindow {
 
     recentFilePaths = electronConf.get('app.files.recent');
 
-    updateReopenMenu(recentFilePaths);
+    recentFilePathsUpdated();
 
     // Handle our command line, which will effectively be done once our renderer is ready (see rendererReady()).
 
@@ -1106,8 +1143,8 @@ export class MainWindow extends ApplicationWindow {
     forgetDataUrlRecentFilePaths();
 
     // Ignore our renderer being gone if we are being closed (e.g., because OpenCOR is being quit), whatever the reason.
-    // Indeed, our renderer will normally exit cleanly in that case, but it may also be killed (e.g., when logging off or
-    // shutting down the system) or crash while being torn down. Either way, there is nothing to recover since we are
+    // Indeed, our renderer will normally exit cleanly in that case, but it may also be killed (e.g., when logging off
+    // or shutting down the system) or crash while being torn down. Either way, there is nothing to recover since we are
     // going away, so we must not offer to reload OpenCOR.
     // Note: our renderer may also exit cleanly on its own (e.g., if the native libOpenCOR module calls exit(0)), in
     //       which case it is gone just as if it had crashed, so we handle it as such.
@@ -1186,9 +1223,9 @@ export class MainWindow extends ApplicationWindow {
     //          should OpenCOR be quit before any file gets opened, i.e. reopen the files that might have caused the
     //          crash the next time OpenCOR is started.
     // Note #2: similarly, our reloaded renderer has no files to start with, so our File|Save, File|Save As, File|Close,
-    //          and File|Close All menu items must be disabled (they will get enabled again once a file gets (re)opened).
-    //          Also, the changes that were made to the files that were open are lost, so there is no point in asking
-    //          our reloaded renderer to save them when we get closed (see the constructor).
+    //          and File|Close All menu items must be disabled (they will get enabled again once a file gets
+    //          (re)opened). Also, the changes that were made to the files that were open are lost, so there is no point
+    //          in asking our reloaded renderer to save them when we get closed (see the constructor).
 
     filesOpened([]);
     filesModified([]);
@@ -1252,9 +1289,9 @@ export class MainWindow extends ApplicationWindow {
       fileClosed(filesNotToReopen.selected);
     }
 
-    // Discard the files that we were going to reopen and the arguments that we were asked to handle, so that neither our
-    // reloaded renderer nor OpenCOR, the next time it is started, reopens the files that might have caused the crash
-    // or handles the arguments that our (crashed) renderer never handled.
+    // Discard the files that we were going to reopen and the arguments that we were asked to handle, so that neither
+    // our reloaded renderer nor OpenCOR, the next time it is started, reopens the files that might have caused the
+    // crash or handles the arguments that our (crashed) renderer never handled.
 
     this._filesToReopen = { opened: [], selected: '' };
     this._pendingArguments = [];
@@ -1263,9 +1300,13 @@ export class MainWindow extends ApplicationWindow {
   // Our renderer is ready, so reopen previously opened files, if any, select the previously selected file, and handle
   // any arguments that we were asked to handle until now (e.g., our command line).
   // Note: our renderer may get reloaded (e.g., during development), in which case it will let us know again that it is
-  //       ready, but there is nothing more for us to do then.
+  //       ready, but there is nothing more for us to do then, except let it know about our recent file paths.
 
   rendererReady(): void {
+    // Let our (possibly reloaded) renderer know about our recent file paths (see recentFilePathsUpdated()).
+
+    this.send('recent-files', [...recentFilePaths]);
+
     if (this._rendererReady) {
       return;
     }
@@ -1422,7 +1463,7 @@ export class MainWindow extends ApplicationWindow {
   openFile(filePath: string): void {
     allowSavingFile(filePath);
 
-    this.send('open', filePath);
+    this.send('open-file', filePath);
   }
 
   // Enable/disable our UI.
@@ -1439,13 +1480,23 @@ export class MainWindow extends ApplicationWindow {
   //       handleArguments()). Similarly, we must not enable our UI in that case since our reloaded renderer will enable
   //       it once it is ready (see onRenderProcessGone()). Otherwise, we must enable our UI, even if our renderer isn't
   //       ready, i.e. if its initialisation failed (in which case it never tells us that it is ready), or our UI would
-  //       remain disabled.
+  //       remain disabled. Also, our renderer may ask us to show our open dialog (see onOpenAction() in OpenCOR.vue)
+  //       while it is already shown (e.g., if the user double clicks on the Open... action of our start screen before
+  //       our UI gets disabled), in which case we ignore the request.
+
+  showOpenDialog(): void {
+    if (this._openDialogShown) {
+      return;
+    }
+
+    this._openDialogShown = true;
 
-  open(): void {
     this.enableDisableUi(false);
 
     const rendererGoneCount = this._rendererGoneCount;
-    const enableUiIfRendererNotGone = (): void => {
+    const openDialogClosed = (): void => {
+      this._openDialogShown = false;
+
       if (this._rendererGoneCount === rendererGoneCount) {
         this.enableDisableUi(true);
       }
@@ -1458,18 +1509,18 @@ export class MainWindow extends ApplicationWindow {
       .then(({ filePaths }) => {
         this.handleArguments(filePaths);
 
-        enableUiIfRendererNotGone();
+        openDialogClosed();
       })
       .catch((error: unknown) => {
         console.warn('OpenCOR: failed to open file(s):', formatError(error));
 
-        enableUiIfRendererNotGone();
+        openDialogClosed();
       });
   }
 
   // Handle our renderer's File|Save As menu, i.e. let the user choose where to save a file and return the chosen file
   // path, which our renderer may then save (see canSaveFile()), or null if the user cancelled.
-  // Note: same as for open() when it comes to the enabling of our UI.
+  // Note: same as for showOpenDialog() when it comes to the enabling of our UI.
 
   async saveAs(defaultFilePath: string): Promise<string | null> {
     this.enableDisableUi(false);
@@ -1543,8 +1594,8 @@ export class MainWindow extends ApplicationWindow {
   //          twice in a row).
   // Note #2: our message box gets closed if our renderer receives our request after all, since it then asks the user
   //          whether to save those files.
-  // Note #3: closing ourselves normally would require our renderer to respond (e.g., to handle beforeunload), so we kill
-  //          it first, making sure that we ignore it being gone (see onRenderProcessGone()).
+  // Note #3: closing ourselves normally would require our renderer to respond (e.g., to handle beforeunload), so we
+  //          kill it first, making sure that we ignore it being gone (see onRenderProcessGone()).
 
   private waitForCloseRequestReceived(): void {
     if (this._closeRequestTimeoutId !== null || this._notRespondingAbortController) {
diff --git a/src/main/SplashScreenWindow.ts b/src/main/SplashScreenWindow.ts
index 00b6e28ab..961727e15 100644
--- a/src/main/SplashScreenWindow.ts
+++ b/src/main/SplashScreenWindow.ts
@@ -9,9 +9,14 @@ import { formatError } from '../renderer/src/common/common';
 export class SplashScreenWindow extends ApplicationWindow {
   constructor() {
     // Initialise ourselves.
+    // Note: our window is transparent and has no shadow nor rounded corners, so that our splash screen can draw its own
+    //       rounded corners, border, and background, and therefore look the same on Windows, Linux, and macOS (see
+    //       splashscreen.css). Otherwise, our window would, for instance, have rounded corners and a border on macOS
+    //       and Windows 11, but not on Linux. That said, on Linux, a transparent window requires a compositing window
+    //       manager, without which the corners of our splash screen would be black rather than transparent.
 
-    const width = 413 + 24;
-    const height = 351 + 42;
+    const width = 360;
+    const height = 300;
     const state: IElectronConfState = electronConf.get('app.state');
 
     super(
@@ -25,6 +30,9 @@ export class SplashScreenWindow extends ApplicationWindow {
         maxWidth: width,
         maxHeight: height,
         frame: false,
+        transparent: true,
+        hasShadow: false,
+        roundedCorners: false,
         show: false,
         alwaysOnTop: true
       },
diff --git a/src/main/assets/splashscreen.css b/src/main/assets/splashscreen.css
index c17c15841..69bda084d 100644
--- a/src/main/assets/splashscreen.css
+++ b/src/main/assets/splashscreen.css
@@ -1,11 +1,19 @@
-/*
- * Note: our splash screen is not part of our app per se, which means that we don't have access to PrimeVue and must
- *       therefore hard-code colours.
+/**
+ * Note #1: our splash screen is not part of our app per se, which means that we don't have access to PrimeVue and must
+ *          therefore hard-code colours. It looks like our start screen (see BackgroundComponent.vue), i.e. our logo on
+ *          a subtle dot grid with our version and copyright below it.
+ * Note #2: our window is transparent (see SplashScreenWindow.ts), so we draw our own rounded corners, border, and
+ *          background, so that our splash screen looks the same on Windows, Linux, and macOS.
  */
 
+html,
 body {
-  background-color: #fff; /* Light version of --p-content-background. */
+  height: 100%;
   margin: 0;
+  background: transparent;
+}
+
+body {
   font-family:
     Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
     "Helvetica Neue", sans-serif;
@@ -13,50 +21,74 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   user-select: none;
-  line-height: 1.6;
   overflow: hidden;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #18181b; /* Dark version of --p-content-background. */
-  }
+.splash {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 100%;
+  border: 1px solid #e2e8f0; /* Light version of --p-content-border-color. */
+  border-radius: 0.75rem;
+  background-color: #fff; /* Light version of --p-content-background. */
+  overflow: hidden;
 }
 
-.contents {
-  border-collapse: collapse;
-  width: 100%;
-}
+/**
+ * A subtle dot grid, which fades out towards our edges.
+ */
 
-.copyright,
-.version {
-  border-top: 1px solid #33415522; /* Light variant version of --p-content-color. */
-  padding: 0 0.5rem;
-  background-color: #33415511; /* Light variant version of --p-content-color. */
-  color: #334155; /* Light version of --p-content-color. */
-}
+.pattern {
+  position: absolute;
+  inset: 0;
 
-@media (prefers-color-scheme: dark) {
-  .copyright,
-  .version {
-    border-top: 1px solid #fff2; /* Dark variant version of --p-content-color. */
-    background-color: #fff1; /* Dark variant version of --p-content-color. */
-    color: #fff; /* Dark version of --p-content-color. */
-  }
+  /**
+   * Light version of --p-text-color.
+   */
+  background-image: radial-gradient(rgb(51 65 85 / 18%) 1px, transparent 1px);
+  background-size: 1.25rem 1.25rem;
+  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
 }
 
-img.logo {
-  width: 413px;
-  height: 351px;
-  margin: 0.5rem;
+/**
+ * Note: our logo's original dimensions are 828.12px x 704.92px.
+ */
+
+.logo {
+  position: relative;
+  width: 200px;
+  -webkit-user-drag: none;
 }
 
-td.logo {
-  padding: 0;
-  line-height: 0;
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 0.625rem;
+  left: 0;
+  color: #64748b; /* Light version of --p-text-muted-color. */
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
   text-align: center;
 }
 
-.version {
-  text-align: right;
+@media (prefers-color-scheme: dark) {
+  .splash {
+    border-color: #3f3f46; /* Dark version of --p-content-border-color. */
+    background-color: #18181b; /* Dark version of --p-content-background. */
+  }
+
+  .pattern {
+    /**
+     * Dark version of --p-text-color.
+     */
+    background-image: radial-gradient(rgb(255 255 255 / 18%) 1px, transparent 1px);
+  }
+
+  .footer {
+    color: #a1a1aa; /* Dark version of --p-text-muted-color. */
+  }
 }
diff --git a/src/main/assets/splashscreen.html b/src/main/assets/splashscreen.html
index 7c81d487b..15c8295a9 100644
--- a/src/main/assets/splashscreen.html
+++ b/src/main/assets/splashscreen.html
@@ -10,17 +10,11 @@
     <link rel="stylesheet" href="./splashscreen.css" />
   </head>
   <body>
-    <table class="contents">
-      <tr>
-        <td class="logo" colspan="2">
-          <img class="logo" src="../../renderer/src/assets/logo.svg" alt="OpenCOR logo" />
-        </td>
-      </tr>
-      <tr>
-        <td class="copyright">Copyright<span id="copyright" /></td>
-        <td class="version">Version<span id="version" /></td>
-      </tr>
-    </table>
+    <div class="splash">
+      <div class="pattern"></div>
+      <img class="logo" src="../../renderer/src/assets/logo.svg" alt="OpenCOR logo" />
+      <div id="footer" class="footer"></div>
+    </div>
     <script src="./splashscreen.js"></script>
   </body>
 </html>
diff --git a/src/main/assets/splashscreen.js b/src/main/assets/splashscreen.js
index 58f679fa4..6e6e4777f 100644
--- a/src/main/assets/splashscreen.js
+++ b/src/main/assets/splashscreen.js
@@ -1,4 +1,4 @@
 const searchParams = new URLSearchParams(window.location.search);
 
-document.getElementById('copyright').textContent = searchParams.get('copyright') ?? '';
-document.getElementById('version').textContent = searchParams.get('version') ?? '';
+document.getElementById('footer').textContent =
+  `Version ${searchParams.get('version') ?? ''} · Copyright © ${searchParams.get('copyright') ?? ''}`;
diff --git a/src/main/index.ts b/src/main/index.ts
index d9ba631dc..1953b6595 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -47,6 +47,7 @@ import {
   MainWindow,
   normaliseCommandLine,
   recentFilePathCanonicalised,
+  reopenRecentFile,
   reportFatalErrorAndQuit,
   resetAll,
   saveFile,
@@ -553,6 +554,9 @@ electron.app
             recentFilePathCanonicalised(filePath, canonicalFilePath);
           }
         );
+        electron.ipcMain.handle('reopen-recent-file', (_event, filePath: string) => {
+          reopenRecentFile(filePath);
+        });
         electron.ipcMain.handle('renderer-ready', () => {
           MainWindow.instance?.rendererReady();
         });
@@ -571,6 +575,9 @@ electron.app
         electron.ipcMain.handle('save-settings', (_event, settings: ISettings) => {
           saveSettings(settings);
         });
+        electron.ipcMain.handle('show-open-dialog', () => {
+          MainWindow.instance?.showOpenDialog();
+        });
 
         // Create our main window and pass to it our command line arguments.
         // Note: if that fails (e.g., our renderer server couldn't be started), then OpenCOR cannot be used, so we
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 4f1558ec6..ce571384a 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,10 +1,11 @@
 import electron from 'electron';
 import { promises as fs } from 'node:fs';
+import os from 'node:os';
 
 import loc from '../../dist/libOpenCOR/Release/libOpenCOR.node';
 
 import type { OpenCORTheme } from '../renderer/index';
-import type { ISettings } from '../renderer/src/common/common';
+import type { ISettings, ISystemDetails } from '../renderer/src/common/common';
 
 // A helper function to listen to a channel from the main process.
 // Note: it returns a function to stop listening to that channel so that a listener can be removed (e.g., when the
@@ -72,7 +73,7 @@ retrieveOperatingSystem()
   });
 
 // Some bridging between our main process and renderer process.
-// Note: this must be in sync with src/electronApi.ts.
+// Note: this must be in sync with src/renderer/src/common/electronApi.ts.
 
 electron.contextBridge.exposeInMainWorld('electronApi', {
   // Some general methods.
@@ -82,6 +83,20 @@ electron.contextBridge.exposeInMainWorld('electronApi', {
 
     return _operatingSystem || defaultOperatingSystem;
   },
+  systemDetails: (): ISystemDetails => {
+    // Return some details about our system (see AboutDialog.vue).
+    // Note: os.cpus() may return an empty array (e.g., on some Linux systems where /proc is not available).
+
+    const cpus = os.cpus();
+
+    return {
+      cpuModel: cpus[0]?.model.trim() ?? '',
+      logicalCoreCount: cpus.length,
+      totalMemory: os.totalmem(),
+      electronVersion: process.versions.electron,
+      chromiumVersion: process.versions.chrome
+    };
+  },
 
   // Renderer process asking the main process to do something for it.
 
@@ -127,6 +142,7 @@ electron.contextBridge.exposeInMainWorld('electronApi', {
   recentFilePathCanonicalised: (filePath: string, canonicalFilePath: string) =>
     electron.ipcRenderer.invoke('recent-file-path-canonicalised', filePath, canonicalFilePath),
   rendererReady: () => electron.ipcRenderer.invoke('renderer-ready'),
+  reopenRecentFile: (filePath: string) => electron.ipcRenderer.invoke('reopen-recent-file', filePath),
   resetAll: () => electron.ipcRenderer.invoke('reset-all'),
   saveFile: (filePath: string, contents: Uint8Array): Promise<void> =>
     electron.ipcRenderer.invoke('save-file', filePath, contents),
@@ -135,6 +151,7 @@ electron.contextBridge.exposeInMainWorld('electronApi', {
   saveGitHubAccessToken: (token: string): Promise<boolean> =>
     electron.ipcRenderer.invoke('save-github-access-token', token),
   saveSettings: (settings: ISettings) => electron.ipcRenderer.invoke('save-settings', settings),
+  showOpenDialog: () => electron.ipcRenderer.invoke('show-open-dialog'),
 
   // Renderer process listening to the main process.
 
@@ -146,9 +163,10 @@ electron.contextBridge.exposeInMainWorld('electronApi', {
   onCheckForUpdates: (callback: () => void) => onIpc('check-for-updates', callback),
   onClearRecentFiles: (callback: () => void) => onIpc('clear-recent-files', callback),
   onEnableDisableUi: (callback: (enable: boolean) => void) => onIpc('enable-disable-ui', callback),
-  onOpen: (callback: (filePath: string) => void) => onIpc('open', callback),
-  onOpenRemote: (callback: () => void) => onIpc('open-remote', callback),
+  onOpenFile: (callback: (filePath: string) => void) => onIpc('open-file', callback),
+  onOpenLocation: (callback: () => void) => onIpc('open-location', callback),
   onOpenSampleLorenz: (callback: () => void) => onIpc('open-sample-lorenz', callback),
+  onRecentFiles: (callback: (filePaths: string[]) => void) => onIpc('recent-files', callback),
   onClose: (callback: () => void) => onIpc('close', callback),
   onCloseAll: (callback: () => void) => onIpc('close-all', callback),
   onConfirmClose: (callback: () => void) => onIpc('confirm-close', callback),
@@ -162,7 +180,9 @@ electron.contextBridge.exposeInMainWorld('electronApi', {
   onUpdateDownloaded: (callback: () => void) => onIpc('update-downloaded', callback),
   onUpdateDownloadError: (callback: (issue: string) => void) => onIpc('update-download-error', callback),
   onUpdateInstallError: (callback: (issue: string) => void) => onIpc('update-install-error', callback),
-  onUpdateDownloadProgress: (callback: (percent: number) => void) => onIpc('update-download-progress', callback),
+  onUpdateInstalling: (callback: () => void) => onIpc('update-installing', callback),
+  onUpdateDownloadProgress: (callback: (percent: number, transferred: number, total: number) => void) =>
+    onIpc('update-download-progress', callback),
   onUpdateNotAvailable: (callback: () => void) => onIpc('update-not-available', callback)
 });
 
diff --git a/src/renderer/bun.lock b/src/renderer/bun.lock
index 4bfc117aa..1f29cc471 100644
--- a/src/renderer/bun.lock
+++ b/src/renderer/bun.lock
@@ -5,15 +5,15 @@
     "": {
       "name": "@opencor/opencor",
       "devDependencies": {
-        "@biomejs/biome": "^2.6.5",
-        "@celldl/editor": "^0.20261105.0",
+        "@biomejs/biome": "^2.6.6",
+        "@celldl/editor": "^0.20261109.0",
         "@celldl/rdf": "^1.20260822.0",
         "@opencor/libopencor-types": "^1.20261029.0",
         "@physiomelinks/bg2cellml": "^0.6.2",
         "@primeuix/themes": "2.0.3",
         "@primevue/auto-import-resolver": "4.5.5",
-        "@tailwindcss/postcss": "^4.3.4",
-        "@tailwindcss/vite": "^4.3.4",
+        "@tailwindcss/postcss": "^4.3.5",
+        "@tailwindcss/vite": "^4.3.5",
         "@types/bun": "^1.4.4",
         "@types/node": "^26.6.6",
         "@vitejs/plugin-vue": "^6.0.10",
@@ -25,10 +25,10 @@
         "postcss": "^8.5.32",
         "primeicons": "7.0.0",
         "primevue": "4.5.5",
-        "rollup-plugin-visualizer": "^7.1.2",
+        "rollup-plugin-visualizer": "^7.1.3",
         "stylelint": "^18.0.0",
         "stylelint-config-standard": "^41.0.0",
-        "tailwindcss": "^4.3.4",
+        "tailwindcss": "^4.3.5",
         "tailwindcss-primeui": "^0.6.1",
         "tar": "^7.5.22",
         "typescript": "^7.0.2",
@@ -58,29 +58,29 @@
 
     "@babel/types": ["@babel/types@7.29.11", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.11", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-WCsemW40Cpc6gouC1SrY6PBaZ+oLRlEVY9XBvZBI7il/HyUrb2nJ505wE1MHEFyDZNnrWDEuy4jL50WVHfTTSQ=="],
 
-    "@biomejs/biome": ["@biomejs/biome@2.6.5", "", { "optionalDependencies": { "@biomejs/cli-android-arm64": "2.6.5", "@biomejs/cli-android-x64": "2.6.5", "@biomejs/cli-darwin-arm64": "2.6.5", "@biomejs/cli-darwin-x64": "2.6.5", "@biomejs/cli-linux-arm64": "2.6.5", "@biomejs/cli-linux-arm64-musl": "2.6.5", "@biomejs/cli-linux-x64": "2.6.5", "@biomejs/cli-linux-x64-musl": "2.6.5", "@biomejs/cli-win32-arm64": "2.6.5", "@biomejs/cli-win32-x64": "2.6.5" }, "bin": { "biome": "bin/biome" } }, "sha512-n0sp74QbSVEkWXlH659TKv4oJNylwAvDeZ8K8vt/PbcF1xneuNWe57z/G0Bxfh00cufhWXF6DiStLM8+jcLUpg=="],
+    "@biomejs/biome": ["@biomejs/biome@2.6.6", "", { "optionalDependencies": { "@biomejs/cli-android-arm64": "2.6.6", "@biomejs/cli-android-x64": "2.6.6", "@biomejs/cli-darwin-arm64": "2.6.6", "@biomejs/cli-darwin-x64": "2.6.6", "@biomejs/cli-linux-arm64": "2.6.6", "@biomejs/cli-linux-arm64-musl": "2.6.6", "@biomejs/cli-linux-x64": "2.6.6", "@biomejs/cli-linux-x64-musl": "2.6.6", "@biomejs/cli-win32-arm64": "2.6.6", "@biomejs/cli-win32-x64": "2.6.6" }, "bin": { "biome": "bin/biome" } }, "sha512-NCgVJRyrU1+hsW1ILNaRqNAb9fRL4n49bwyef+wjVJQ488/bXbp0BfnNqTTExkiNQT3ugkgYKR1vK8NxsjlNSQ=="],
 
-    "@biomejs/cli-android-arm64": ["@biomejs/cli-android-arm64@2.6.5", "", { "os": "android", "cpu": "arm64" }, "sha512-fkLzc1WRU7wRIUNmAm7cxILb4dd6eESz/VycWvVFKVn6tXx0gFQKdUbPnwT42xys8AEvIJQpFGcK00kURwqorg=="],
+    "@biomejs/cli-android-arm64": ["@biomejs/cli-android-arm64@2.6.6", "", { "os": "android", "cpu": "arm64" }, "sha512-bicnqNNxEX7pjkDQaptYvPRIWDfgXJLl/Ok7iZjC+F1AhfReor3FSS7SgPYnOvUy/jf++5U/KYN4T8OKH5rrNA=="],
 
-    "@biomejs/cli-android-x64": ["@biomejs/cli-android-x64@2.6.5", "", { "os": "android", "cpu": "x64" }, "sha512-fkZ9dPnDAzAcaPtPCiwqtkub5C9FQK/oGCGaU9sq+DysTaq13pE9FxBIMcEZ3ydn8/FfcMdXi/DDzKDP+qyn2Q=="],
+    "@biomejs/cli-android-x64": ["@biomejs/cli-android-x64@2.6.6", "", { "os": "android", "cpu": "x64" }, "sha512-N443kDSElF4kDMKjarsL+ymj/ewLA5R9VAdawA7fJ7pwgN3JVDZp0K+xhKBglH8EwsKi2+K8xC6WxXSkgziFfw=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.6.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bKd0EOREgnVjeZm4s9knQ+WdPOkWS3JHB+eWGHlx+Pq66bqQA1/KybwU0O+zuyAyXiphSCBcrLruZt3YtnJoaQ=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.6.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/vSAqWx3by3p8w5ew+HVJDgguuaTK3U6Fb5gk/oDUH21iWOopm3gOlhT6tZfy5mTaM5R4CVc3uFWkxBtEDrKyw=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.6.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-UkT9BECNOXSiW6SGddjyaRACy362Sc9n3vDaTFkccL0bC2gW7JzM16i4+JKPbEaDn1Sa+oETHV8KungnI/y40Q=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.6.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-lLdOAJKbrAoDs+3GvTyVmMW345D9IhrIE3GgoL2eeHwO1boN4VhrSlALtFYsP0p+Jy4udUp4bTguij0qjKrH8w=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.6.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-H9cVMWBqW/lkFK9NHJdt0bpM2q7PacUDEjQoff9+m0dCV09H/jmBykfTCkbDthHf8+jCuWDJWiQFJ7bDkiGOcA=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.6.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-UzJdUCg9dbEGpZOuZRyehEPrnwKjx9z4Um7sWLG5x6txu7UjeWdJZuBXVGlyAdD39w2Hx0nZeK1jKC4NFUTCNQ=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.6.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-kfc3AePW1a0/d/gUpcIz95nf3Ce8YY2/xL0Fk3fLqAhKsotqUi6PN6BaVWss4p6ijWbiuacZ9NQ4NiQtpjbYpw=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.6.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-rw2Vsoi/WZGDyRjMXx9KZH9zsHe79LIzkdWHkLqsIkeKZm6qiGxtiIApxn7cmJSoEPaSvHaH5pRj1FhTcyL/XA=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.6.5", "", { "os": "linux", "cpu": "x64" }, "sha512-e6/WMSN/+FhH+ZOoBevps/euxFQmv6BXqYNuTn1+ITR6O4XYFjHF5PeVSNZnjkgSYmvhcDkfepSX5lXczMijGA=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.6.6", "", { "os": "linux", "cpu": "x64" }, "sha512-l8/aPXc1cz8VpUyd4hb5Pm5zx+X3voQBks4aLYbp5pC8KSchuHyvqDfY5xax39qCHomI/2xn6NKEot+zebG38g=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.6.5", "", { "os": "linux", "cpu": "x64" }, "sha512-0mHVpLNt7/FugfZ2VPugUIEIiooWIyHGGJUqU9StxamBln9hz+maXRFIECU50jaf5/ZB93veGIViN5VKgw2AEA=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.6.6", "", { "os": "linux", "cpu": "x64" }, "sha512-DiKejs+GnFbOVQsBnukUpiB+T13tqUDFGwwjsTq51vatAsaflzFzVD0BOgjVUGRrqKgE0K0Xf+wNtkcmdN2chw=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.6.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-uBbfpdR/cH5up1iRJFGAPP97xKMzrgMs685CSrY7NM+Q4Unw7chY0o3JulEvJdmU6c6hGQxwqotMq7DDH0DzxA=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.6.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-DjVXwQAQeHrO1JEZAEus54k40Tnh4glyU3VFLcDBKwoz0xnxCEnqw6TCMXoujcQMQynWd3AY8bLrbR1o0XNqow=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.6.5", "", { "os": "win32", "cpu": "x64" }, "sha512-07LaCeN9vvmbAAMOMsUjMfL5UbsCDkvVeyMJIgwNRc0xYqhizBGkjVzx05LYEwCXl2AiHcdzqVPR4IOYAsI1QQ=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.6.6", "", { "os": "win32", "cpu": "x64" }, "sha512-B7KMG26A4I9lAuxwBGMmiVcjMGAeJRoz+pzFt9brRvOAsIrgOu8ptJld5rUWui6tM1uiJwxeJhhDPuAiZtxXdw=="],
 
-    "@celldl/editor": ["@celldl/editor@0.20261105.0", "", { "dependencies": { "@atomic-ehr/ucum": "^0.2.5", "@celldl/metadata": "^1.20260822.0", "@celldl/rdf": "^1.20260822.0", "@ctrl/tinycolor": "^4.2.0", "@lucide/vue": "^1.39.0", "@mathjax/src": "^4.1.3", "@vueuse/core": "14.3.0", "buffer": "^6.0.3", "flatbush": "^4.5.0", "graphology": "^0.26.0", "isomorphic-fetch": "^3.0.0", "jsonschema": "^1.5.0", "mini-svg-data-uri": "^1.4.4", "primeicons": "^7.0.0", "primevue": "^4.5.5", "rbush": "^4.0.1", "svg-intersections": "github:dbrnz/svg-intersections#fix-numbers", "svg-path-commander": "^2.1.11", "systeminformation": "^5.27.11", "transformation-matrix": "^3.1.0", "tslog": "^5.4.0", "ua-parser-js": "^2.0.8", "vue": "^3.5.44", "vue-tippy": "^6.7.1" } }, "sha512-xTUm7r56Q9uNmJtRc/iyCzim1S0fKfFa6AH4VLzuKtWy3qAYapKeD/1iHV0U1YdmeG0icJDi6reUW2PB8cS8bg=="],
+    "@celldl/editor": ["@celldl/editor@0.20261109.0", "", { "dependencies": { "@atomic-ehr/ucum": "^0.2.5", "@celldl/metadata": "^1.20260822.0", "@celldl/rdf": "^1.20260822.0", "@ctrl/tinycolor": "^4.2.0", "@lucide/vue": "^1.39.0", "@mathjax/src": "^4.1.3", "@vueuse/core": "14.3.0", "buffer": "^6.0.3", "flatbush": "^4.5.0", "graphology": "^0.26.0", "isomorphic-fetch": "^3.0.0", "jsonschema": "^1.5.0", "mini-svg-data-uri": "^1.4.4", "primeicons": "^7.0.0", "primevue": "^4.5.5", "rbush": "^4.0.1", "svg-intersections": "github:dbrnz/svg-intersections#fix-numbers", "svg-path-commander": "^2.1.11", "systeminformation": "^5.27.11", "transformation-matrix": "^3.1.0", "tslog": "^5.4.0", "ua-parser-js": "^2.0.8", "vue": "^3.5.44", "vue-tippy": "^6.7.1" } }, "sha512-VyjG9Bp2JY//rlIwM1eu2LaxD4NIAaNiTI9mBcsxf04n5qlJhm3WN9siFoMMbWxqYWvzuJfdiPVESGyyd/NFKw=="],
 
     "@celldl/metadata": ["@celldl/metadata@1.20260822.0", "", { "dependencies": { "@celldl/rdf": "^1.20260822.0" } }, "sha512-xqew4gPCrE4JbkmHWhjS3+Khj70jx7i/L/qvFVf3CrdhVAUrH4Wi1Bodcbz4DQHsnEQUHDcBV8oXvJhXjSg1cg=="],
 
@@ -100,11 +100,11 @@
 
     "@csstools/selector-specificity": ["@csstools/selector-specificity@6.0.1", "", { "peerDependencies": { "postcss-selector-parser": "^7.1.1" } }, "sha512-MBuqFIIvqk4S593MGAskTkPpEUUzZNvGzh8mMxEwl3oHwjQlXmqHEDxNbN3Y0Tsh+xjmem4GZjeg7I0qkwBivg=="],
 
-    "@ctrl/tinycolor": ["@ctrl/tinycolor@4.2.2", "", {}, "sha512-9rQHijqB2Rq6qOEC/xHaA6aPlsKGi5kmCQW50O1asn9g63XFeD5NmBwysriistW5Xx0JPafyD/TA7yk2S3pXGQ=="],
+    "@ctrl/tinycolor": ["@ctrl/tinycolor@4.3.0", "", {}, "sha512-6V0+8vw/GmH92URQ/Ki12FPhoB3nqaQUJE+5xgbFbB5ok0OXYK5jCQsQQoyR3BzCddHsCpyCFRnIcI1PSOVYkQ=="],
 
     "@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
 
-    "@isaacs/nonrecursive-glob-match": ["@isaacs/nonrecursive-glob-match@1.0.3", "", {}, "sha512-SI7kyKHq4XXDRozw+r9GlRZkia1ZkFrpLW98r2IC2Bpr8YkFGE3fvjzmxCG0x78A++69HmDNrDvSMYBZmHGpKA=="],
+    "@isaacs/nonrecursive-glob-match": ["@isaacs/nonrecursive-glob-match@1.1.0", "", {}, "sha512-GPm/Dbvk5RLmhRnxXIa7nTpK0xtl4E0wj0MslsuNiJ1FIROU+2+9lgUC/dgF7Ey4QCWhfEsgxilMRMCdHPfDfw=="],
 
     "@jeswr/pretty-turtle": ["@jeswr/pretty-turtle@1.8.2", "", { "dependencies": { "n3": "^1.25.2", "rdf-string-ttl": "^1.3.2" }, "peerDependencies": { "@rdfjs/types": "*" } }, "sha512-Os15rA6dAAxdnEqxwvcNZ8wX6fO+gKVgiXJsVmVQ3WDiu61Srf0H/nb4X475IKnDVGDMqmd0lGTL1Lk2uxtcVA=="],
 
@@ -118,7 +118,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@lucide/vue": ["@lucide/vue@1.69.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-uxR2FtureNe37HOQk/e92CZjlTjXVuNiYlD60Mgns0rmbs0wqDnHDgZPUooP6nvmFn/v7Ie6dKRKPzgR6HW5Tw=="],
+    "@lucide/vue": ["@lucide/vue@1.70.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-kutUu3oEtfQnyaP6hh76ShG2dxa8PiL6uY3rk3DqclQe0Vd2FtPlnclezR0XMQtlFMPiEaCOXDSuhehFHW5ErQ=="],
 
     "@mathjax/mathjax-newcm-font": ["@mathjax/mathjax-newcm-font@4.1.3", "", {}, "sha512-gzAB3dFHilHX1l5x2xUqRL+1jDQt3Fyza1DkEMVXWC4E8SvsGdlgEza47HYi2WhVcgfkvf4zgUGzuhbq3Pjlew=="],
 
@@ -184,39 +184,39 @@
 
     "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.2.16", "", { "os": "win32", "cpu": "x64" }, "sha512-1lv1KvX0Z871zfk7vw+dnXMMnHNyDwMzWG8Kv3HxDXMOhzCX4SHc7HK319fInP0i+0p9D8brkfzL7pJOaGl+tw=="],
 
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.1.0", "", {}, "sha512-K+NU2HDCEem4sClgHH4ZZXwdJeNFkJo+hRk479DIwdIviAPN2hFJH1KHHwg8CxHQXvi0M5XY4deTXINfIiSG6w=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.3.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.5", "jiti": "^2.7.0", "lightningcss": "1.33.0", "magic-string": "^1.1.0", "source-map-js": "^1.2.1", "tailwindcss": "4.3.4" } }, "sha512-b7QK/QG04v3j04NbpG82XLCedRyulnkuwUDwRa9oK/ypnJIzMapz2Wg+0TltVczjUzDaJJHIa1+jj9aMUOFMTQ=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.5", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.5", "jiti": "^2.7.0", "lightningcss": "1.33.0", "magic-string": "^1.1.0", "source-map-js": "^1.2.1", "tailwindcss": "4.3.5" } }, "sha512-yT53FzV4ke0cr/BguDxhWMpm5MJu1O2muzk+tKw6lKHjODAsYArBbWwFbJiaksfzFv1tpkO9QHGzmfs1hJT66g=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.4", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.4", "@tailwindcss/oxide-darwin-arm64": "4.3.4", "@tailwindcss/oxide-darwin-x64": "4.3.4", "@tailwindcss/oxide-freebsd-x64": "4.3.4", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.4", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.4", "@tailwindcss/oxide-linux-arm64-musl": "4.3.4", "@tailwindcss/oxide-linux-x64-gnu": "4.3.4", "@tailwindcss/oxide-linux-x64-musl": "4.3.4", "@tailwindcss/oxide-wasm32-wasi": "4.3.4", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.4", "@tailwindcss/oxide-win32-x64-msvc": "4.3.4" } }, "sha512-riqsRw2sLF7B1sNCCkTl3KYXEqvhTiABzZ/4oxxHfZ3c3Td60bCBfOrUuUGOiHagd3E7V+zG46c+XBDWZGFBcg=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.5", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.5", "@tailwindcss/oxide-darwin-arm64": "4.3.5", "@tailwindcss/oxide-darwin-x64": "4.3.5", "@tailwindcss/oxide-freebsd-x64": "4.3.5", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.5", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.5", "@tailwindcss/oxide-linux-arm64-musl": "4.3.5", "@tailwindcss/oxide-linux-x64-gnu": "4.3.5", "@tailwindcss/oxide-linux-x64-musl": "4.3.5", "@tailwindcss/oxide-wasm32-wasi": "4.3.5", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.5", "@tailwindcss/oxide-win32-x64-msvc": "4.3.5" } }, "sha512-PynqGLZsZvwM9tqD/CUxkOIfyd6K5elZ2MooauzJryP/UqXYgi3yYbtt3N0Xe+MHV/eFKPFQCEfIKAqlAS1CBg=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.4", "", { "os": "android", "cpu": "arm64" }, "sha512-qkjxt+EFocOi3mtsUS3ndlj6yj4SHubwBdvBynLnS8T4mvSzX0Enn0CpypJKmBEtczUAXOHVZKA2zTGzSNU2Sg=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.5", "", { "os": "android", "cpu": "arm64" }, "sha512-Se0z5xMqcSQanJD1IYmO0cGpK3iv0fp3ZsIT7xRJZ1Da5PghvNoc46zz4jIQn+aan3dV9T8AermFNN9QPmsh0Q=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-i/awUA/7mJQAbA3AzCW8aQtUh5goMieUdF1zOoclLaJUCxDvsXQ8VJqpQZY3dfcHS6PJjd3tw25nNneD/mEviQ=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-UPrgTDuUbvmqGMZuCnmI3FKee/tYKzKdp00/kuB4oSGB213VYg8QTdF7lVhnPoBXq/mIfJ+ILoBFqNOboWcMwQ=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-q56V9U6AnoYz/yj/alkDLhSQ9AZoXQSEl93f7WETa0+32CudbqM57BXdYXfMYPKudueXKaA+MG6L/0KRseF7Jg=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-E+p7HEtjI0b8D7kbbWxH067cGui6d4c79COGko9fAPVE3rwc1E7ld2HFCbaG86AOGWS5VKQYqZOaf38ya4uxTQ=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-r0W7A+Z9HTHh7bwihJl45E/zZKLjxD50/jToVF/E/RZHSl8+EWO+4yKKJpPMcUooT9hdoip3Zx1uWnbMg4N79g=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-yWEWcWyAG7rWOcTpJTjdhQ3pcaFY2h+0bqTRfgU3G2fz87ZU3AKdvdZKhslD+kyHnjBUWKvNdRYwIYC5dI1tIg=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.4", "", { "os": "linux", "cpu": "arm" }, "sha512-3aih/sRxzeYfi2Bkh+bGYNf2YU9Llamb2mpA7BNF1obYzdgEeWDAMQzK6BSwzLhs/eTdOaSur92qrGfchagUtQ=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.5", "", { "os": "linux", "cpu": "arm" }, "sha512-WmeVjtJhZlr+smpqcdR2kQkkn6arHIJnUIBxTO2EJcTLGY1ecVXNo2hbSn8xc0IH2aEtys936iMWKGyj0GaKnA=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-ktJSrPGQou4OqL88rDEx5CkeM9BjzrwZvYo8u7B7VL1zkBa2XBm351o4MQrek95qikb2M++26Y7w7vbH6Mgl8g=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-DTCSyucc6ShMp1QMqV5R94Z7xlgNgUzkGmFF1rL5HH2Qjy4eSmEqy+YLGkqqYvWa4sILtgrBt1JjRKbneQtiFQ=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-rt3hjUxT7utAtcB+df6wHyaXDyxhE7Zd1x7L/nvB5Jb2qBb8dZwFUoWqeRja1BaF5OlSqkKSjBmVXj9OsevmCQ=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-H9lsvO4x9E4nE4Hi8h7NHHw0O/kcVSu+iOyFHNGdYzazGgDjFHZbE6S3hQ8kMcbNXSBlMdNi67LV5EVqtpaJtw=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-XE3jO2yOOWjttpeGvpwf3/b274NMi3QapQSAI/EzsgrmYNan1Tw8dXT9JQkN7K0OgvuqiC8mcCyNvGzEkpVJPQ=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.5", "", { "os": "linux", "cpu": "x64" }, "sha512-4uxQvtBvPuIdl13WfUBj9xMZHH14PtHZ8OZdtLmdyDtG66sCa1t599NZT+jagkUzRtWhuul1qRZQ1nAJscXN5g=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-PaAZ2FjJaZk9SQLYtKIfQWiFm/xtl7pX2MKPgCzn0mS/VU54yu+vP457AJdB2XFLxU3gO2abLCt8N7Lg4EbKNg=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.5", "", { "os": "linux", "cpu": "x64" }, "sha512-0JQAzs7jwbA7O6+z/adU+Jk3AXwsu3npAhtr5escXS7TqEqWcaDV7qHuI+0Vy/KQRuVGnLQREcSJWYauyV3oqg=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.4", "", { "dependencies": { "@emnapi/core": "^1.11.3", "@emnapi/runtime": "^1.11.3", "@emnapi/wasi-threads": "^1.2.3", "@napi-rs/wasm-runtime": "^1.2.2", "@tybys/wasm-util": "^0.10.3", "tslib": "^2.8.1" } }, "sha512-bjO9WmoM687p8AoCIyw1DUqzpAs4JICLvNmIPxIWDmhw8IOsdubtWQLShyJmISnDKtRy1BBApHVOUl6sNFQQJA=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.5", "", { "dependencies": { "@emnapi/core": "^1.11.3", "@emnapi/runtime": "^1.11.3", "@emnapi/wasi-threads": "^1.2.3", "@napi-rs/wasm-runtime": "^1.2.2", "@tybys/wasm-util": "^0.10.3", "tslib": "^2.8.1" } }, "sha512-OJhFmlEfdzMr+avACdi40RPtnkW0B6hXyxL/8r+tnEHBWZji36CYRjEXrrvgBmaYsD3oEOBqwYFRKsYvzFe7Bw=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-jCrwCvWVtt7ruMXp6dFPd5KBNU8o1tWtEdZbTL/w/hvD3lUYZA0E2mmfvTzW4QLHIx5wGQU9HeY7997R1QTrEg=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-9o8jgthi+QE5eandnboiJT64VQfnIArfZzSTdgbhEK5aafdiu2jTW9Honi/mwYHxBZuH1vAC57IFyrh+0iK5Gg=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.4", "", { "os": "win32", "cpu": "x64" }, "sha512-cge1wcedn1FrRSXL22lF5sNDYr8c9+VImk7zFYLPs12jkDmchSrZNfzWqOKub+5Hb/aYRdDEqERGGDKONBlOzQ=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.5", "", { "os": "win32", "cpu": "x64" }, "sha512-XiKFfIy1RWe7qK4WqByxNW7Oz1/nkOy8o/BWhHminyV1PmpUd8Eedj5v2A8h2kpqeVlz6xRnwk9Fr/ZXNLcZfg=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.4", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.4", "@tailwindcss/oxide": "4.3.4", "postcss": "^8.5.25", "tailwindcss": "4.3.4" } }, "sha512-6O0QLY+1CseO8ivlYK2Y7IxNPaQ8D5ypxrV+ws34mbxknWH824J+gEWtJ0gyFiYAudmdEeXdF8kqwgXIaZRyHw=="],
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.5", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.3.5", "@tailwindcss/oxide": "4.3.5", "postcss": "^8.5.25", "tailwindcss": "4.3.5" } }, "sha512-FAV37Tlx9wBiT/hkfgVD0Q6CWsP2oUX3lf28nrfjW8+ksILjnpuFulUqWDfNR4/ZiEHHDRBX8DUTzD1Rys687A=="],
 
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.4", "", { "dependencies": { "@tailwindcss/node": "4.3.4", "@tailwindcss/oxide": "4.3.4", "tailwindcss": "4.3.4" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-wGukGWb8SVuN7+FJvSS7M5eSJWDIWwVSvUvj1q41eTIhGPsS2DAgFWjA7YURJNwjHSgty59Hz8iMUiyO+YMHBQ=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.5", "", { "dependencies": { "@tailwindcss/node": "4.3.5", "@tailwindcss/oxide": "4.3.5", "tailwindcss": "4.3.5" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-BCNiY0a1ZjdOHVqw7kyb7U72BwfMF3dfUuN+tQsLWky/J5JOI/r7abibglXfygrZhVO/3u3V+E25kkKTeMkXaQ=="],
 
     "@thednp/dommatrix": ["@thednp/dommatrix@3.1.2", "", {}, "sha512-wxRH2/Qdqd+JxFpjb5vw+ZMaij8Hqa/9Hgl41n2Jb+3WNRhdemrosK0FxEo/yEvhvHGW8D1tZ3oPH9N0m1QG+A=="],
 
@@ -312,7 +312,7 @@
 
     "alien-signals": ["alien-signals@3.2.1", "", {}, "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g=="],
 
-    "ansi-regex": ["ansi-regex@6.5.0", "", {}, "sha512-zhvbbbdt1kbw7EJ9OQoxmQcuaNR9P5kTj7e/YdmOSU10aHWbycofJxA6jKfoEy3vlLdctOF9ZHaxLtmSm998wQ=="],
+    "ansi-regex": ["ansi-regex@6.6.0", "", {}, "sha512-XZ5apbzreCbXSKwPjJstu8R0zOi247w3XYwWxtwBXgpZrCyc1Ka7p9/xY0A9/diMewmHbEKz+FIraWaEWjlN5g=="],
 
     "ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
 
@@ -336,7 +336,7 @@
 
     "bundle-name": ["bundle-name@4.1.1", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-DdH81/zPLVS11EUgWq3tEu/xn+EzljlMYooDNdzWEnFha3R3NBMpMV1UqYIpjYHV/SgpFKMIX1Oh7o06SjM/oA=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001820", "", {}, "sha512-gfWD6MxqVCqAOwmODfZf7DchWvlrA+SRdNX7ceLfg3xRqe5ssjjpF7EgslC/0tiLiNTajdaNN/q8c/5u/7Gz8w=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001823", "", {}, "sha512-TQ5s/djDjNk1axreUW+4rULH+BmdCMLiJkhaXnO5wqivG7tITkSUj4ItIdzqdZHKaXcHAV8dhH3JxOM7/7bwqw=="],
 
     "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
 
@@ -344,7 +344,7 @@
 
     "cliui": ["cliui@9.0.1", "", { "dependencies": { "string-width": "^7.2.0", "strip-ansi": "^7.1.0", "wrap-ansi": "^9.0.0" } }, "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w=="],
 
-    "colord": ["colord@2.10.0", "", {}, "sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw=="],
+    "colord": ["colord@2.11.0", "", {}, "sha512-R7EZD9e+sWpUQFr3F6v747NAazZCD+OhsM0VnPkHGxSaQvw4ZvJoCVz51gemztBBoZaFvMP0qdKgFyBdBurfgA=="],
 
     "commander": ["commander@14.0.3", "", {}, "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw=="],
 
@@ -354,8 +354,6 @@
 
     "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="],
 
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "default-browser": ["default-browser@5.5.1", "", { "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" } }, "sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw=="],
@@ -368,7 +366,7 @@
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.477", "", {}, "sha512-PN++F4zWZoVDGWinxMnSCpVqKhqFOJfLXxdU8bYJKudAEsHL/XKVITOKWVbfMt1r276Mi9RDLU9VHx9uKJ4RMQ=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.478", "", {}, "sha512-pftG+ma5Lm8O6/p45bhYT6StBN5ziQymaRzmCZwFl8DwWHKPPD93FdOmP1aqftcepolQYvrcyTLa17kE8Yf+jg=="],
 
     "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
 
@@ -402,7 +400,7 @@
 
     "get-east-asian-width": ["get-east-asian-width@1.7.0", "", {}, "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q=="],
 
-    "glob": ["glob@14.0.3", "", { "dependencies": { "minimatch": "^11.0.2", "minipass": "^7.1.3", "path-scurry": "^3.0.0" } }, "sha512-A1vjIwC3qpdCso45Iw127gnp7sPhqgY8lUQhDrArIs+GbmfaaVPFuoyy7WyLT9EPZCRZ7j7aLdwUhQmHWesEow=="],
+    "glob": ["glob@14.0.4", "", { "dependencies": { "minimatch": "^11.0.5", "minipass": "^7.1.3", "path-scurry": "^3.0.0" } }, "sha512-mMiwNKoJZ4HAIRVJxotO6LsNRReA30gQwP9E2/p94tfLv+jygCNpKDjhhSL6OLY6LE371EZm5EAf7RpYuUqlsw=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
@@ -476,7 +474,7 @@
 
     "mini-svg-data-uri": ["mini-svg-data-uri@1.4.4", "", { "bin": { "mini-svg-data-uri": "cli.js" } }, "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="],
 
-    "minimatch": ["minimatch@11.0.4", "", { "dependencies": { "@isaacs/nonrecursive-glob-match": "^1.0.3", "brace-expansion": "^5.0.12" } }, "sha512-/UJ1dEoVQTjPNDh6SGlUo+ueLMmoHTas4q+8yaAR/5t6nLAIiBDJtoYUh20IYleix7ehiQkgczb84PE3uzHkxg=="],
+    "minimatch": ["minimatch@11.0.5", "", { "dependencies": { "@isaacs/nonrecursive-glob-match": "^1.1.0", "brace-expansion": "^5.0.12" } }, "sha512-snPlVppFcYWfLLFQGhDxUyBcHNtMlWmn3jtj7pEaO+DP8pqL0IvAzXhMYmn1z9ASNtgmwLBdFxSf4tMUB0OTKA=="],
 
     "minipass": ["minipass@7.1.3", "", {}, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
 
@@ -520,7 +518,7 @@
 
     "postcss-safe-parser": ["postcss-safe-parser@7.1.0", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-1WzZxRLaAFwEh6Do+zyGpjWV3nGJNxxhuh7Ubu/q1ICImMgZJnLwhoaEpRbG4pJppp2Y1ncL9ffA2f+LhrefQg=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.7", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-wWBro/7hJ40ye6TPiXkUQoXKCw23xSsjriUvqd7Uls9Sso3oLiON1flc18cCdnjgCRXw4fBVqUJJeOdDTh3P3g=="],
+    "postcss-selector-parser": ["postcss-selector-parser@7.2.0", "", { "dependencies": { "util-deprecate": "^1.0.2" } }, "sha512-Khh/tERVBn0I1499dvBSHY0pWJloMJWUxDsOBM0CCDPAcVZ10Jl2L1qy1f19uEX22spa8Mv7DCdEQJc0cGwBhQ=="],
 
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
@@ -550,7 +548,7 @@
 
     "rolldown": ["rolldown@1.2.16", "", { "dependencies": { "@oxc-project/types": "=0.156.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.16", "@rolldown/binding-android-arm64": "1.2.16", "@rolldown/binding-darwin-arm64": "1.2.16", "@rolldown/binding-darwin-x64": "1.2.16", "@rolldown/binding-freebsd-x64": "1.2.16", "@rolldown/binding-linux-arm-gnueabihf": "1.2.16", "@rolldown/binding-linux-arm64-gnu": "1.2.16", "@rolldown/binding-linux-arm64-musl": "1.2.16", "@rolldown/binding-linux-ppc64-gnu": "1.2.16", "@rolldown/binding-linux-s390x-gnu": "1.2.16", "@rolldown/binding-linux-x64-gnu": "1.2.16", "@rolldown/binding-linux-x64-musl": "1.2.16", "@rolldown/binding-openharmony-arm64": "1.2.16", "@rolldown/binding-win32-arm64-msvc": "1.2.16", "@rolldown/binding-win32-x64-msvc": "1.2.16" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-bWvlMpFKiTfDKfnK7FC2MPgPeWCf/Kpwsq49ApdW+FQaBZb6O6dZ4MAPbPUjp7hYQrw/RobqCzn64BRrQecGHw=="],
 
-    "rollup-plugin-visualizer": ["rollup-plugin-visualizer@7.1.2", "", { "dependencies": { "open": "^11.0.0", "picomatch": "^4.0.5", "source-map": "^0.8.0", "yargs": "^18.1.0" }, "peerDependencies": { "rolldown": "1.x || ^1.0.0-beta || ^1.0.0-rc", "rollup": "2.x || 3.x || 4.x" }, "optionalPeers": ["rolldown", "rollup"], "bin": { "rollup-plugin-visualizer": "dist/bin/cli.js" } }, "sha512-+yrEz9LJ7fxd7T0yj4GPvcKHKfJNzTzKT7FHiF3f/US+7EaWlgB8PoGbUOlobD4Al8v6TeCCl/Fgbov5FV/DaA=="],
+    "rollup-plugin-visualizer": ["rollup-plugin-visualizer@7.1.3", "", { "dependencies": { "open": "^11.0.0", "picomatch": "^4.0.5", "source-map": "^0.8.0", "yargs": "^18.1.0" }, "peerDependencies": { "rolldown": "1.x || ^1.0.0-beta || ^1.0.0-rc", "rollup": "2.x || 3.x || 4.x" }, "optionalPeers": ["rolldown", "rollup"], "bin": { "rollup-plugin-visualizer": "dist/bin/cli.js" } }, "sha512-P7G0p9RowDd0ahXXBtx4MOHlSVzclyW5pDeZ2Z0HensWSI9vJdu2bqdZDsD375g+0AxND8VJzWYuKD9yH38etw=="],
 
     "run-applescript": ["run-applescript@7.1.0", "", {}, "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q=="],
 
@@ -582,7 +580,7 @@
 
     "systeminformation": ["systeminformation@5.33.19", "", { "os": "!aix", "bin": { "systeminformation": "lib/cli.js" } }, "sha512-Zm7wGeCG7PqfvzegMJIzrxICopWqYCeLATVmvxOOci1isLcNVKgY4Fr0hhYQzvc7cgtK3377jQVChTFAnznOiA=="],
 
-    "tailwindcss": ["tailwindcss@4.3.4", "", {}, "sha512-PCJZTFFdG+sL3gvnP1Do9o6GbkvH2q0p04xSs3f7cSvmAeK+sttG+/7ncK1fdRwKFfC7n+wDDJaOMBSefkI9ow=="],
+    "tailwindcss": ["tailwindcss@4.3.5", "", {}, "sha512-FcQk9BuffmEHJP2G0XmB2SplU1aLTI7j07Kunk+U74Ny+XiWOtzXz9aujFZ/avntw1e2cOv/3PkgzflQ7gX2vQ=="],
 
     "tailwindcss-primeui": ["tailwindcss-primeui@0.6.1", "", { "peerDependencies": { "tailwindcss": ">=3.1.0" } }, "sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A=="],
 
diff --git a/src/renderer/index.html b/src/renderer/index.html
index df3af1f42..dab2e08c2 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -25,10 +25,116 @@
       background-color: #18181b; /* Dark version of --p-content-background. */
       color: #ffffff; /* Dark version of --p-content-color. */
     }
+    /**
+     * What we show until OpenCOR has been loaded (and mounted, which replaces the contents of #app), i.e. the message
+     * that OpenCOR shows while it is being initialised (see BlockingMessageComponent.vue), at 0%, so that both look
+     * like a single step to the user.
+     * Note: OpenCOR is not loaded yet, so we don't have access to PrimeVue and must therefore hard-code colours.
+     */
+    .loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: flex;
+      flex-direction: column;
+      gap: 0.625rem;
+      box-sizing: border-box;
+      width: max-content;
+      min-width: min(16rem, calc(100% - 1rem));
+      max-width: min(24rem, calc(100% - 1rem));
+      padding: 0.75rem 1rem;
+      border: 1px solid #e2e8f0; /* Light version of --p-content-border-color. */
+      border-radius: 0.75rem;
+      background-color: #ffffff; /* Light version of --p-content-background. */
+      box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 12%);
+      font-family:
+        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+        "Droid Sans", "Helvetica Neue", sans-serif;
+      line-height: 1.5;
+      transform: translate(-50%, -50%);
+      -webkit-font-smoothing: antialiased;
+    }
+    .loading-header {
+      display: flex;
+      align-items: center;
+      gap: 0.625rem;
+    }
+    .loading-spinner {
+      flex-shrink: 0;
+      width: 1.125rem;
+      height: 1.125rem;
+      box-sizing: border-box;
+      border: 2px solid rgb(16 185 129 / 20%); /* Light version of --p-primary-color. */
+      border-top-color: #10b981; /* Light version of --p-primary-color. */
+      border-radius: 50%;
+      animation: loading-spin 0.8s linear infinite;
+    }
+    @keyframes loading-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .loading-text {
+      flex-grow: 1;
+      font-size: 0.875rem;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    .loading-progress {
+      color: #64748b; /* Light version of --p-text-muted-color. */
+      font-size: 0.75rem;
+      font-variant-numeric: tabular-nums;
+    }
+    .loading-progress-bar {
+      height: 0.25rem;
+      border-radius: 6px; /* --p-content-border-radius. */
+      background-color: #e2e8f0; /* Light version of --p-content-border-color. */
+    }
+    @media (prefers-color-scheme: dark) {
+      :root:not(.opencor-light-mode) .loading {
+        border-color: #3f3f46; /* Dark version of --p-content-border-color. */
+        background-color: #18181b; /* Dark version of --p-content-background. */
+        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 50%); /* Dark version of --opencor-card-shadow. */
+      }
+      :root:not(.opencor-light-mode) .loading-spinner {
+        border-color: rgb(52 211 153 / 20%); /* Dark version of --p-primary-color. */
+        border-top-color: #34d399; /* Dark version of --p-primary-color. */
+      }
+      :root:not(.opencor-light-mode) .loading-progress {
+        color: #a1a1aa; /* Dark version of --p-text-muted-color. */
+      }
+      :root:not(.opencor-light-mode) .loading-progress-bar {
+        background-color: #3f3f46; /* Dark version of --p-content-border-color. */
+      }
+    }
+    :root.opencor-dark-mode .loading {
+      border-color: #3f3f46; /* Dark version of --p-content-border-color. */
+      background-color: #18181b; /* Dark version of --p-content-background. */
+      box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 50%); /* Dark version of --opencor-card-shadow. */
+    }
+    :root.opencor-dark-mode .loading-spinner {
+      border-color: rgb(52 211 153 / 20%); /* Dark version of --p-primary-color. */
+      border-top-color: #34d399; /* Dark version of --p-primary-color. */
+    }
+    :root.opencor-dark-mode .loading-progress {
+      color: #a1a1aa; /* Dark version of --p-text-muted-color. */
+    }
+    :root.opencor-dark-mode .loading-progress-bar {
+      background-color: #3f3f46; /* Dark version of --p-content-border-color. */
+    }
     </style>
   </head>
   <body>
-    <div id="app" style="height: 100vh; height: 100dvh;"></div>
+    <div id="app" style="height: 100vh; height: 100dvh;">
+      <div class="loading">
+        <div class="loading-header">
+          <span class="loading-spinner"></span>
+          <span class="loading-text">Initialising OpenCOR...</span>
+          <span class="loading-progress">0%</span>
+        </div>
+        <div class="loading-progress-bar"></div>
+      </div>
+    </div>
     <script type="module" src="./src/main.ts"></script>
   </body>
 </html>
diff --git a/src/renderer/package.json b/src/renderer/package.json
index 497d65aea..66b48911d 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "1.20261106.0",
+  "version": "1.20261109.0",
   "libopencorVersion": "1.20261029.0",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.ts",
@@ -62,15 +62,15 @@
     "vue": "^3.5.45"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.6.5",
-    "@celldl/editor": "^0.20261105.0",
+    "@biomejs/biome": "^2.6.6",
+    "@celldl/editor": "^0.20261109.0",
     "@celldl/rdf": "^1.20260822.0",
     "@opencor/libopencor-types": "^1.20261029.0",
     "@physiomelinks/bg2cellml": "^0.6.2",
     "@primeuix/themes": "2.0.3",
     "@primevue/auto-import-resolver": "4.5.5",
-    "@tailwindcss/postcss": "^4.3.4",
-    "@tailwindcss/vite": "^4.3.4",
+    "@tailwindcss/postcss": "^4.3.5",
+    "@tailwindcss/vite": "^4.3.5",
     "@types/bun": "^1.4.4",
     "@types/node": "^26.6.6",
     "@vitejs/plugin-vue": "^6.0.10",
@@ -82,10 +82,10 @@
     "postcss": "^8.5.32",
     "primeicons": "7.0.0",
     "primevue": "4.5.5",
-    "rollup-plugin-visualizer": "^7.1.2",
+    "rollup-plugin-visualizer": "^7.1.3",
     "stylelint": "^18.0.0",
     "stylelint-config-standard": "^41.0.0",
-    "tailwindcss": "^4.3.4",
+    "tailwindcss": "^4.3.5",
     "tailwindcss-primeui": "^0.6.1",
     "tar": "^7.5.22",
     "typescript": "^7.0.2",
diff --git a/src/renderer/scripts/download.libopencor.js.ts b/src/renderer/scripts/download.libopencor.js.ts
index eb611a331..db50defc9 100644
--- a/src/renderer/scripts/download.libopencor.js.ts
+++ b/src/renderer/scripts/download.libopencor.js.ts
@@ -44,5 +44,5 @@ export const downloadLibopencorJsIfNeeded = async (destDir: string): Promise<voi
 
   const stats = fs.statSync(destFile);
 
-  console.log(`Downloaded libopencor.js (${(stats.size / 1024).toFixed(0)} KB) to ${destFile}.`);
+  console.log(`Downloaded libopencor.js (${(stats.size / 1000).toFixed(0)} kB) to ${destFile}.`);
 };
diff --git a/src/renderer/scripts/libopencor.ts b/src/renderer/scripts/libopencor.ts
index 46035b426..5e0628a28 100644
--- a/src/renderer/scripts/libopencor.ts
+++ b/src/renderer/scripts/libopencor.ts
@@ -3,9 +3,9 @@
 import * as bun from 'bun';
 
 // Filter out noisy linker warnings emitted when linking the prebuilt static version of libOpenCOR on a macOS ARM system
-// with a newer LLVM+Clang. Indeed, libOpenCOR was compiled with an older LLVM+Clang that uses stale target feature names
-// (`+zcm` and `+zcz`), which the current linker no longer recognises. These warnings are harmless (indeed, the linker
-// ignores them), but they are numerous enough to clutter our output.
+// with a newer LLVM+Clang. Indeed, libOpenCOR was compiled with an older LLVM+Clang that uses stale target feature
+// names (`+zcm` and `+zcz`), which the current linker no longer recognises. These warnings are harmless (indeed, the
+// linker ignores them), but they are numerous enough to clutter our output.
 
 const LINE_FILTER_PATTERN = /is not a recognized feature for this target/i;
 
diff --git a/src/renderer/src/assets/app.css b/src/renderer/src/assets/app.css
index 14128285b..79c32c725 100644
--- a/src/renderer/src/assets/app.css
+++ b/src/renderer/src/assets/app.css
@@ -29,6 +29,59 @@ body {
   .opencor {
     --border-color: var(--p-content-border-color);
 
+    /**
+     * The background of our masks (e.g., behind a dialog or while our UI is blocked), which is lighter than PrimeVue's
+     * (Aura theme) one.
+     */
+
+    --px-mask-background: rgb(0 0 0 / 25%);
+
+    /**
+     * The colour of our thin scrollbars, which are used where a scroll panel can't be (i.e. where the height of the
+     * scrollable area isn't fixed).
+     * Note: we can't use PrimeVue's scroll panel colour since it is only defined once a scroll panel is used.
+     */
+
+    --opencor-scrollbar-color: var(--p-surface-300);
+
+    /**
+     * The shadows of our overlays (e.g., the menus of our main menu, our context menus, our popovers, or our hints) and
+     * of our cards (e.g., our blocking message or our toasts).
+     */
+
+    --opencor-overlay-shadow: 0 8px 24px -4px rgb(0 0 0 / 12%), 0 2px 6px -2px rgb(0 0 0 / 8%);
+    --opencor-card-shadow: 0 0.25rem 1rem rgb(0 0 0 / 12%);
+
+    /**
+     * The colours of our hints (e.g., the tooltip of our toolbar buttons), which are those of PrimeVue's popovers, so
+     * that our hints look like our other overlays (e.g., our menus and popovers) in both light and dark modes.
+     */
+
+    --opencor-hint-background: var(--p-overlay-popover-background);
+    --opencor-hint-border-color: var(--p-overlay-popover-border-color);
+    --opencor-hint-color: var(--p-overlay-popover-color);
+    --opencor-hint-muted-color: var(--p-text-muted-color);
+    --opencor-hint-code-background: var(--p-content-hover-background);
+
+    /**
+     * Our severity colours, which are those of PrimeVue's Message component (Aura theme).
+     * Note: PrimeVue only defines the colours of a component (e.g., --p-message-error-color) once that component is
+     *       used, so we can't rely on them (and therefore have our own).
+     */
+
+    --opencor-success-background: color-mix(in sRGB, var(--p-green-50), transparent 5%);
+    --opencor-success-border-color: var(--p-green-200);
+    --opencor-success-color: var(--p-green-600);
+    --opencor-info-background: color-mix(in sRGB, var(--p-blue-50), transparent 5%);
+    --opencor-info-border-color: var(--p-blue-200);
+    --opencor-info-color: var(--p-blue-600);
+    --opencor-warn-background: color-mix(in sRGB, var(--p-yellow-50), transparent 5%);
+    --opencor-warn-border-color: var(--p-yellow-200);
+    --opencor-warn-color: var(--p-yellow-600);
+    --opencor-error-background: color-mix(in sRGB, var(--p-red-50), transparent 5%);
+    --opencor-error-border-color: var(--p-red-200);
+    --opencor-error-color: var(--p-red-600);
+
     *,
     ::before,
     ::after {
@@ -58,5 +111,296 @@ body {
     :focus {
       outline: none !important;
     }
+
+    /**
+     * Show a focus ring when a PrimeVue component (or a link) gets the keyboard focus.
+     * Note #1: PrimeVue's focus rings are outlines, which we remove above (so that the browser's focus outline doesn't
+     *          get shown on top of the focus rings that we draw for our own controls), so we draw them using a box
+     *          shadow instead. This is not needed for the components that draw their focus ring on an element that
+     *          doesn't itself get the focus (e.g., a checkbox or a toggle switch).
+     * Note #2: our focus ring is offset from the component (like PrimeVue's), so that it is visible on a filled
+     *          button (e.g., a primary button).
+     * Note #3: our focus ring is shown without any animation (PrimeVue would otherwise transition it in).
+     */
+
+    .p-button:focus-visible,
+    .p-slider-handle:focus-visible,
+    .p-splitter-gutter-handle:focus-visible,
+    a:focus-visible {
+      box-shadow:
+        0 0 0 2px var(--p-content-background),
+        0 0 0 4px var(--opencor-focus-ring-color, var(--p-primary-color));
+      transition: none;
+    }
+
+    /**
+     * Note: like a primary button (which focus ring has our primary colour, i.e. its background colour), a danger
+     *       button (e.g., the Reset All button of our Reset All dialog) has a focus ring of its background colour. We
+     *       fall back to our error colour, just in case PrimeVue hasn't defined the background colour of a danger
+     *       button (it only defines the colours of a component once that component is used).
+     */
+
+    .p-button-danger:focus-visible {
+      --opencor-focus-ring-color: var(--p-button-danger-background, var(--opencor-error-color));
+    }
+
+    a:focus-visible {
+      border-radius: 0.125rem;
+    }
+
+    /**
+     * Make the buttons in the footer of our dialogs small (like the rest of our dialogs' contents), but not so small
+     * that a short button (e.g., OK) becomes hard to click.
+     */
+
+    .p-dialog-footer .p-button:not(.p-button-icon-only) {
+      min-width: 4.5rem;
+      padding: var(--p-button-sm-padding-y) var(--p-button-sm-padding-x);
+      font-size: var(--p-button-sm-font-size);
+    }
+
+    /**
+     * Show and hide our masks without any animation (see also BaseDialog.vue).
+     */
+
+    .p-overlay-mask-enter-active,
+    .p-overlay-mask-leave-active {
+      animation: none;
+    }
+
+    /**
+     * Show and hide our anchored overlays (e.g., the options of a select, a popover, or a context menu) without any
+     * animation.
+     */
+
+    .p-anchored-overlay-enter-active,
+    .p-anchored-overlay-leave-active {
+      animation: none;
+      transition: none;
+    }
+
+    /**
+     * Make the options of our selects and our popovers look like the menus of our main menu.
+     */
+
+    .p-select-overlay {
+      --p-select-overlay-border-radius: 0.5rem;
+      --p-select-overlay-shadow: var(--opencor-overlay-shadow);
+      --p-select-list-padding: 0.25rem;
+      --p-select-list-gap: 0;
+      --p-select-option-padding: 0.375rem 0.5rem;
+      --p-select-list-header-padding: 0.25rem 0.25rem 0;
+
+      font-size: 0.875rem;
+
+      .p-select-filter {
+        padding: 0.25rem 2rem 0.25rem 0.5rem;
+        font-size: 0.875rem;
+      }
+
+      .p-select-list-container {
+        scrollbar-width: thin;
+        scrollbar-color: var(--opencor-scrollbar-color) transparent;
+      }
+    }
+
+    /**
+     * Our context menus (e.g., the one of our graph panels or of our file tabs), which look like the menus of our main
+     * menu (see MainMenu.vue).
+     * Note: our context menus use an item template (see ContextMenuWidget.vue), which shows an icon
+     *       (.context-menu-item-icon), a label, and, for an item that has a submenu, a chevron
+     *       (.context-menu-item-chevron).
+     */
+
+    .opencor-context-menu {
+      --p-contextmenu-list-padding: 0.25rem;
+      --p-contextmenu-list-gap: 0;
+      --p-contextmenu-item-padding: 0.375rem 0.5rem;
+      --p-contextmenu-border-radius: 0.5rem;
+      --p-contextmenu-shadow: var(--opencor-overlay-shadow);
+
+      min-width: 12rem;
+      font-size: 0.875rem;
+
+      .p-contextmenu-submenu {
+        min-width: 9rem;
+        margin-top: calc(-1 * var(--p-contextmenu-list-padding) - 1px);
+        margin-left: 0.25rem;
+      }
+
+      .p-contextmenu-separator {
+        margin: 0.125rem 0.5rem;
+      }
+
+      .context-menu-item-icon {
+        width: 1rem;
+        color: var(--p-text-muted-color);
+        font-size: 0.875rem;
+        text-align: center;
+      }
+
+      .context-menu-item-chevron {
+        margin-left: auto;
+        padding-left: 1.5rem;
+        color: var(--p-text-muted-color);
+        font-size: 0.75rem;
+      }
+
+      .p-contextmenu-item-active > .p-contextmenu-item-content,
+      .p-contextmenu-item.p-focus > .p-contextmenu-item-content {
+        .context-menu-item-icon,
+        .context-menu-item-chevron {
+          color: var(--p-text-color);
+        }
+      }
+    }
+
+    /**
+     * Note: the contents of our popovers (e.g., our issues view) have their own padding, so our popovers don't need
+     *       any.
+     */
+
+    .p-popover {
+      --p-popover-border-radius: 0.5rem;
+      --p-popover-shadow: var(--opencor-overlay-shadow);
+      --p-popover-content-padding: 0;
+    }
+  }
+}
+
+/**
+ * Our colours in dark mode (see above).
+ */
+
+.opencor-dark-mode .opencor {
+  --px-mask-background: rgb(0 0 0 / 50%);
+  --opencor-scrollbar-color: var(--p-surface-600);
+  --opencor-overlay-shadow: 0 8px 24px -4px rgb(0 0 0 / 50%), 0 2px 6px -2px rgb(0 0 0 / 40%);
+  --opencor-card-shadow: 0 0.25rem 1rem rgb(0 0 0 / 50%);
+  --opencor-success-background: color-mix(in sRGB, var(--p-green-500), transparent 84%);
+  --opencor-success-border-color: color-mix(in sRGB, var(--p-green-700), transparent 64%);
+  --opencor-success-color: var(--p-green-500);
+  --opencor-info-background: color-mix(in sRGB, var(--p-blue-500), transparent 84%);
+  --opencor-info-border-color: color-mix(in sRGB, var(--p-blue-700), transparent 64%);
+  --opencor-info-color: var(--p-blue-500);
+  --opencor-warn-background: color-mix(in sRGB, var(--p-yellow-500), transparent 84%);
+  --opencor-warn-border-color: color-mix(in sRGB, var(--p-yellow-700), transparent 64%);
+  --opencor-warn-color: var(--p-yellow-500);
+  --opencor-error-background: color-mix(in sRGB, var(--p-red-500), transparent 84%);
+  --opencor-error-border-color: color-mix(in sRGB, var(--p-red-700), transparent 64%);
+  --opencor-error-color: var(--p-red-500);
+}
+
+/**
+ * A spinner, i.e. a ring that is partly coloured using our primary colour, which size can be changed using
+ * --opencor-spinner-size.
+ */
+
+.opencor-spinner {
+  flex-shrink: 0;
+  width: var(--opencor-spinner-size, 1.125rem);
+  height: var(--opencor-spinner-size, 1.125rem);
+  border: 2px solid color-mix(in sRGB, var(--p-primary-color) 20%, transparent);
+  border-top-color: var(--p-primary-color);
+  border-radius: 50%;
+  animation: opencor-spinner-spin 0.8s linear infinite;
+}
+
+@keyframes opencor-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/**
+ * A section title (e.g., in a dialog), and a small one (e.g., in a side panel).
+ */
+
+.opencor-section-title {
+  margin: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.opencor-section-title-small {
+  font-size: 0.6875rem;
+}
+
+/**
+ * A panel, i.e. a bordered area with rounded corners.
+ */
+
+.opencor-panel {
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 0.5rem;
+  background-color: var(--p-content-background);
+}
+
+/**
+ * Our hints (see common/hint.ts), which look like the tooltip of our toolbar buttons (see ToolbarButtonWidget.vue).
+ * Note: a hint may be long (e.g., the path of a file), in which case it gets wrapped (preferably after a path
+ *       separator, see displayedText() in common/hint.ts).
+ */
+
+.opencor-hint {
+  position: fixed;
+  z-index: 100000;
+  max-width: min(40rem, calc(100vw - 0.5rem));
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--opencor-hint-border-color);
+  border-radius: 0.375rem;
+  background-color: var(--opencor-hint-background);
+  box-shadow: var(--opencor-overlay-shadow);
+  color: var(--opencor-hint-color);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  user-select: none;
+}
+
+/**
+ * Our rich hints, which may contain some paragraphs, some code, or a table (e.g., the values of the simulation inputs
+ * of a run).
+ */
+
+.opencor-hint-rich {
+  max-width: min(22rem, calc(100vw - 0.5rem));
+  padding: 0.375rem 0.625rem;
+  font-weight: 400;
+  line-height: 1.125rem;
+
+  code {
+    padding: 0 0.1875rem;
+    border-radius: 0.25rem;
+    background-color: var(--opencor-hint-code-background);
+    font-size: 0.6875rem;
+  }
+
+  table {
+    border: none;
+    border-collapse: collapse;
+    font-size: inherit;
+  }
+
+  th,
+  td {
+    padding: 0.125rem 0;
+    border: none;
+    vertical-align: top;
+  }
+
+  th {
+    font-weight: 600;
+    text-align: start;
+  }
+
+  th + td,
+  td + td {
+    padding-left: 0.5rem;
   }
 }
diff --git a/src/renderer/src/common/celldl.ts b/src/renderer/src/common/celldl.ts
index 1c82ac55b..931950941 100644
--- a/src/renderer/src/common/celldl.ts
+++ b/src/renderer/src/common/celldl.ts
@@ -11,8 +11,8 @@ import * as dependencies from './dependencies';
 // Note #2: this relies on the BG-RDF framework, which CellDL Editor only makes available once it has been initialised
 //          (otherwise, bgRdfStatements() returns no statement), hence it must only be called once CellDL Editor has
 //          been loaded.
-// Note #3: CellDL Editor comes with its own copy of Oxigraph (bundled from @celldl/rdf), but it doesn't expose it, hence
-//          we need our own copy (which @physiomelinks/bg2cellml expects as a peer dependency).
+// Note #3: CellDL Editor comes with its own copy of Oxigraph (bundled from @celldl/rdf), but it doesn't expose it,
+//          hence we need our own copy (which @physiomelinks/bg2cellml expects as a peer dependency).
 
 let converterInitialisation: Promise<bg2cellml.Converter> | null = null;
 let converterInitialised = false;
diff --git a/src/renderer/src/common/common.ts b/src/renderer/src/common/common.ts
index c80846498..b79e9a16d 100644
--- a/src/renderer/src/common/common.ts
+++ b/src/renderer/src/common/common.ts
@@ -14,13 +14,21 @@ export interface ISettings {
   general: ISettingsGeneral;
 }
 
+export interface ISystemDetails {
+  cpuModel: string;
+  logicalCoreCount: number;
+  totalMemory: number;
+  electronVersion: string;
+  chromiumVersion: string;
+}
+
 // Some methods to determine the operating system, whether the application is running on a mobile device, etc.
 // Note: the order of the checks in osName() is important. For instance, we need to check for "iPhone" before checking
 //       for "Mac" since the user agent of iPhones contains both "iPhone" and "Mac".
 
 let _osName: string | null = null;
 
-const osName = (): string => {
+export const osName = (): string => {
   if (_osName) {
     return _osName;
   }
@@ -72,6 +80,29 @@ export const isCtrlOrCmd = (event: KeyboardEvent): boolean => {
   return isMacOs() ? event.metaKey : event.ctrlKey;
 };
 
+// A method to determine whether a keydown event is processed by an input method editor (IME), e.g., for Chinese or
+// Japanese, in which case it is not for us to handle (e.g., Enter to confirm some text being composed).
+// Note: Safari ends a composition before dispatching the keydown event that confirms it, so that event isn't flagged as
+//       composing, but its key code is 229 (as for any keydown event that is processed by an IME).
+
+export const isImeKeyDown = (event: KeyboardEvent): boolean => {
+  return event.isComposing || event.keyCode === 229;
+};
+
+// Some methods to let OpenCOR own the title of its document (e.g., to show the name of the selected file in it, see
+// ContentsComponent.vue), which is only the case when OpenCOR is not used as a library (see main.ts) since the title
+// of a page that embeds OpenCOR is not ours to change.
+
+let _documentTitleOwned = false;
+
+export const ownDocumentTitle = (): void => {
+  _documentTitleOwned = true;
+};
+
+export const isDocumentTitleOwned = (): boolean => {
+  return _documentTitleOwned;
+};
+
 // A method to enable/disable the main menu.
 
 export const enableDisableMainMenu = (enable: boolean): void => {
@@ -343,6 +374,49 @@ export const waitForNextAnimationFrame = (): Promise<number> => {
   });
 };
 
+// A method to wait for our UI to be painted.
+// Note #1: we wait for two animation frames since the first one is just before the next paint while the second one is
+//          after it (i.e. just before the following paint).
+// Note #2: there is no need to wait for vue.nextTick() first since Vue updates the DOM in a microtask, i.e. before the
+//          next animation frame.
+// Note #3: no animation frames are run while our document is hidden (e.g., when our window is minimised), in which case
+//          there is nothing to paint for people to see, so we don't wait (or stop waiting) for our UI to be painted.
+//          Otherwise, we would wait until our document is visible again (e.g., a simulation run would only finish
+//          once our window is restored).
+
+const waitForNextAnimationFrameUnlessHidden = (): Promise<void> => {
+  return new Promise((resolve) => {
+    if (document.visibilityState === 'hidden') {
+      resolve();
+
+      return;
+    }
+
+    const onDone = (): void => {
+      cancelAnimationFrame(frame);
+
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+
+      resolve();
+    };
+
+    const onVisibilityChange = (): void => {
+      if (document.visibilityState === 'hidden') {
+        onDone();
+      }
+    };
+
+    const frame = requestAnimationFrame(onDone);
+
+    document.addEventListener('visibilitychange', onVisibilityChange);
+  });
+};
+
+export const waitForNextPaint = async (): Promise<void> => {
+  await waitForNextAnimationFrameUnlessHidden();
+  await waitForNextAnimationFrameUnlessHidden();
+};
+
 // Some constants related to simulation data values.
 
 export const EMPTY_FLOAT64_ARRAY = Object.freeze(new Float64Array(0));
diff --git a/src/renderer/src/common/constants.ts b/src/renderer/src/common/constants.ts
index 3680d12de..24807487e 100644
--- a/src/renderer/src/common/constants.ts
+++ b/src/renderer/src/common/constants.ts
@@ -7,10 +7,18 @@ export const SHORT_DELAY: number = 69;
 export const MEDIUM_DELAY: number = 169;
 export const LONG_DELAY: number = 369;
 
+export const STOP_RUN_TIMEOUT: number = 5000;
+
 export const TOAST_LIFE: number = 3000;
 
+export const COPY_FEEDBACK_LIFE: number = 2000;
+
 export const MAX_RECENT_FILES: number = 10;
 
+export const HINT_DELAY: number = 500;
+
+export const NARROW_LAYOUT_WIDTH: number = 640;
+
 export const SPIN_INITIAL_DELAY: number = 500;
 export const SPIN_REPEAT_DELAY: number = 40;
 export const SPIN_LARGE_STEP_FACTOR: number = 10;
diff --git a/src/renderer/src/common/dependencies.ts b/src/renderer/src/common/dependencies.ts
index 448464030..b704b8303 100644
--- a/src/renderer/src/common/dependencies.ts
+++ b/src/renderer/src/common/dependencies.ts
@@ -26,9 +26,9 @@ export const setUPlot = (module: Module): void => {
 };
 
 // Initialise xxHash.
-// Note: this compiles xxHash's WASM, so we only do it when asked to (i.e. by our renderer, see initialisation.ts) rather
-//       than when this module is imported. Indeed, this module is also (indirectly) imported by our main process, which
-//       doesn't need xxHash.
+// Note: this compiles xxHash's WASM, so we only do it when asked to (i.e. by our renderer, see initialisation.ts)
+//       rather than when this module is imported. Indeed, this module is also (indirectly) imported by our main
+//       process, which doesn't need xxHash.
 
 let xxhashInitialisation: Promise<Module> | null = null;
 
diff --git a/src/renderer/src/common/electronApi.ts b/src/renderer/src/common/electronApi.ts
index 8793cdf10..c307f5fec 100644
--- a/src/renderer/src/common/electronApi.ts
+++ b/src/renderer/src/common/electronApi.ts
@@ -1,6 +1,6 @@
 import type { OpenCORTheme } from '../../index';
 
-import type { ISettings } from './common';
+import type { ISettings, ISystemDetails } from './common';
 
 interface IElectronApi {
   // Note: this must be in sync with src/preload/index.ts.
@@ -8,6 +8,7 @@ interface IElectronApi {
   // Some general methods.
 
   operatingSystem: () => string;
+  systemDetails: () => ISystemDetails;
 
   // Renderer process asking the main process to do something for it.
 
@@ -35,11 +36,13 @@ interface IElectronApi {
   loadSettings: () => Promise<ISettings>;
   recentFilePathCanonicalised: (filePath: string, canonicalFilePath: string) => void;
   rendererReady: () => Promise<void>;
+  reopenRecentFile: (filePath: string) => void;
   resetAll: () => void;
   saveFile: (filePath: string, contents: Uint8Array) => Promise<void>;
   saveFileAs: (defaultFilePath: string) => Promise<string | null>;
   saveGitHubAccessToken: (token: string) => Promise<boolean>;
   saveSettings: (settings: ISettings) => void;
+  showOpenDialog: () => void;
 
   // Renderer process listening to the main process.
 
@@ -50,9 +53,10 @@ interface IElectronApi {
   onCheckForUpdates: (callback: () => void) => () => void;
   onClearRecentFiles: (callback: () => void) => () => void;
   onEnableDisableUi: (callback: (enable: boolean) => void) => () => void;
-  onOpen: (callback: (filePath: string) => void) => () => void;
-  onOpenRemote: (callback: () => void) => () => void;
+  onOpenFile: (callback: (filePath: string) => void) => () => void;
+  onOpenLocation: (callback: () => void) => () => void;
   onOpenSampleLorenz: (callback: () => void) => () => void;
+  onRecentFiles: (callback: (filePaths: string[]) => void) => () => void;
   onClose: (callback: () => void) => () => void;
   onCloseAll: (callback: () => void) => () => void;
   onConfirmClose: (callback: () => void) => () => void;
@@ -66,7 +70,8 @@ interface IElectronApi {
   onUpdateDownloaded: (callback: () => void) => () => void;
   onUpdateDownloadError: (callback: (issue: string) => void) => () => void;
   onUpdateInstallError: (callback: (issue: string) => void) => () => void;
-  onUpdateDownloadProgress: (callback: (percent: number) => void) => () => void;
+  onUpdateInstalling: (callback: () => void) => () => void;
+  onUpdateDownloadProgress: (callback: (percent: number, transferred: number, total: number) => void) => () => void;
   onUpdateNotAvailable: (callback: () => void) => () => void;
 }
 
diff --git a/src/renderer/src/common/hint.ts b/src/renderer/src/common/hint.ts
new file mode 100644
index 000000000..c9c56f932
--- /dev/null
+++ b/src/renderer/src/common/hint.ts
@@ -0,0 +1,529 @@
+import type * as vue from 'vue';
+
+import { HINT_DELAY } from './constants';
+
+// A directive that shows a hint for an element (e.g., v-hint="'Close'"), i.e. a replacement for the native tooltip of
+// an element (which we can't style and which is shown after a long delay), which looks like the tooltip of our toolbar
+// buttons (see ToolbarButtonWidget.vue).
+// Note #1: our hint is shown, without any animation, after a short delay when our element is hovered, and straightaway
+//          when our element (or an element within it, see Note #7) gets a focus ring (i.e. when it is focused using the
+//          keyboard or, for a text field, when it is focused in any way). It is hidden as soon as our element is left
+//          (unless it has a focus ring, so that our hint doesn't disappear while our element is focused, e.g., some
+//          help about an input field while the user is typing something in it), pressed (using a pointing device),
+//          blurred, or hidden (see Note #9), or Escape is pressed (see Note #10), and it isn't shown if our element is
+//          no longer visible by the time it is to be shown.
+// Note #2: our hint is shown below our element (or above it if there is not enough room below it) and is kept within
+//          the window. It has a fixed position and is appended to our OpenCOR instance (rather than to our element) so
+//          that it doesn't get clipped by an ancestor of our element (e.g., a scroll panel), while still being styled
+//          like the rest of our OpenCOR instance (see .opencor-hint in app.css).
+// Note #3: only one hint is shown at any given time.
+// Note #4: like a native tooltip, our hint isn't shown when hovering an element that ignores pointer events (e.g., the
+//          reset button of one of our input widgets when it is disabled), although it is still shown if that element
+//          gets a focus ring.
+// Note #5: our hint can contain some HTML (e.g., v-hint.html="'<em>Some</em> help'"), in which case it is a "rich" hint
+//          (e.g., some help about an input field or a table of values). A rich hint wraps sooner (to keep its lines
+//          easy to read) and, unlike a plain hint, it isn't hidden when our element is pressed (so that, for instance,
+//          some help about an input field doesn't disappear as soon as the user clicks in it to type something). The
+//          HTML of a rich hint is used as is, so any untrusted text in it (e.g., the name of a simulation input) must
+//          be escaped (see common.escapeHtml()).
+// Note #6: our element may contain an element that has its own hint (e.g., the close button of a file tab), in which
+//          case the hint of the inner element replaces ours while it is hovered, and ours is shown again (after the
+//          usual delay) when the inner element is left for our element. Similarly, only the hint of the inner element
+//          is shown when it (or an element within it) is focused using the keyboard.
+// Note #7: we listen to focusin/focusout (rather than focus/blur, which don't bubble) so that our hint is also shown
+//          when our element contains the focused element (e.g., a float label that contains an input field).
+// Note #8: our hint is hidden from assistive technologies (since it is a visual aid that isn't linked to our element),
+//          so a plain hint is also used as the accessible name of our element if our element has no accessible name of
+//          its own (e.g., an icon-only button), i.e. no text, no aria-label, aria-labelledby, title, or alt attribute,
+//          and no label (e.g., an input field with a <label for="...">).
+// Note #9: our element may get hidden (or removed from the DOM) while our hint is shown, without being left or blurred
+//          (e.g., if the user switches to another file tab using the keyboard while our element is hovered or focused,
+//          or if our element is activated using the keyboard and gets hidden once what it does has been done, like
+//          a recent file on our start screen once it has been opened), so we check our element on every animation
+//          frame while our hint is shown, and hide our hint if our element is no longer visible. Similarly, our element
+//          may move while our hint is shown (e.g., if the file tab bar is scrolled using the mouse wheel), in which
+//          case we reposition our hint.
+// Note #10: like a native tooltip, our hint can be dismissed by pressing Escape, be it shown or about to be shown, in
+//           which case it isn't shown again until our element is hovered (or focused) anew, i.e. after it has been left
+//           (or blurred) or after an inner element with its own hint has been left for it (see Note #6).
+//           Escape is otherwise left to do what it normally does (e.g., discard the value being edited in an input
+//           field or close a dialog).
+// Note #11: when our window loses the focus (e.g., when the user switches to another application), our hint gets
+//           hidden (and the hint that is about to be shown, if any, cancelled), be it shown because our element is
+//           hovered or focused. Our element may then get the focus back when our window regains the focus, but this is
+//           not the user focusing our element (using the keyboard), so we don't show our hint again (which we would
+//           otherwise do for a text field, see Note #1).
+
+const HINT_OFFSET = 6; // Distance between our element and our hint.
+const HINT_MARGIN = 4; // Minimum distance between our hint and the edges of the window.
+
+interface IHintState {
+  text: string;
+  html: boolean;
+  timer: number | undefined;
+  ariaLabel: string | null;
+  onPointerEnter: () => void;
+  onPointerLeave: (event: PointerEvent) => void;
+  onFocusIn: (event: FocusEvent) => void;
+  onFocusOut: (event: FocusEvent) => void;
+  onHide: () => void;
+}
+
+const states = new WeakMap<HTMLElement, IHintState>();
+
+let hintElement: HTMLElement | null = null; // The element that shows our hint, if any.
+let hintOwner: HTMLElement | null = null; // The element that our hint is about, if any.
+let pendingHintState: IHintState | null = null; // The state of the element which hint is about to be shown, if any.
+let visibilityCheckFrame: number | undefined; // The animation frame in which our element is to be checked, if any.
+let hintOwnerRect: DOMRect | null = null; // The position and size of our element when our hint was last positioned.
+
+// Keep track of whether our window has lost the focus (see Note #11 above).
+// Note #1: when our window regains the focus, our element may get the focus back before or after our window gets its
+//          focus event, so we only consider that our window has the focus again once the task that follows its focus
+//          event has run (unless our window has lost the focus again in the meantime).
+// Note #2: we only start tracking this when our directive is first used (so that no window listeners are added unless
+//          hints are used), at which point we check whether our window currently has the focus (it may not, e.g., if
+//          OpenCOR was started in the background).
+
+let windowFocusLost = false;
+let windowFocusTracked = false;
+let windowFocusTimer: number | undefined;
+
+const trackWindowFocus = (): void => {
+  if (windowFocusTracked) {
+    return;
+  }
+
+  windowFocusTracked = true;
+  windowFocusLost = !document.hasFocus();
+
+  window.addEventListener('blur', () => {
+    window.clearTimeout(windowFocusTimer);
+
+    windowFocusTimer = undefined;
+    windowFocusLost = true;
+
+    cancelPendingHint();
+    hideHint();
+  });
+
+  window.addEventListener('focus', () => {
+    window.clearTimeout(windowFocusTimer);
+
+    windowFocusTimer = window.setTimeout(() => {
+      windowFocusTimer = undefined;
+      windowFocusLost = false;
+    }, 0);
+  });
+};
+
+// The text of our hint as it is displayed.
+// Note: our hint may be the path or URL of a file, so we let it break after a path separator (by inserting a zero-width
+//       space after it), so that it doesn't get broken in the middle of a file name, if possible.
+
+const displayedText = (text: string): string => {
+  return text.replace(/[/\\]/g, '$&\u200b');
+};
+
+const hideHint = (): void => {
+  hintElement?.remove();
+
+  hintElement = null;
+  hintOwner = null;
+  hintOwnerRect = null;
+
+  window.cancelAnimationFrame(visibilityCheckFrame ?? 0);
+
+  visibilityCheckFrame = undefined;
+
+  updateKeyDownListener();
+};
+
+// Cancel the hint that is about to be shown, if any.
+
+const cancelPendingHint = (): void => {
+  if (pendingHintState) {
+    window.clearTimeout(pendingHintState.timer);
+
+    pendingHintState = null;
+
+    updateKeyDownListener();
+  }
+};
+
+// Whether the given element is in the DOM and visible (i.e. not transparent either, e.g., the reset button of one of
+// our input widgets once its value is its default value, while the pointer is still over it).
+// Note: checkVisibilityCSS is the original name of the visibilityProperty option of checkVisibility(), which is what
+//       some (older) Web browsers only know about.
+
+const isVisible = (element: HTMLElement): boolean => {
+  return (
+    element.isConnected &&
+    element.getClientRects().length > 0 &&
+    element.checkVisibility?.({ opacityProperty: true, visibilityProperty: true, checkVisibilityCSS: true }) !== false
+  );
+};
+
+// Hide our hint if our element is no longer visible, or reposition it if our element has moved or been resized (see
+// Note #9 above), and check our element again on the next animation frame.
+
+const checkHintOwnerVisibility = (): void => {
+  visibilityCheckFrame = undefined;
+
+  if (!hintOwner) {
+    return;
+  }
+
+  if (!isVisible(hintOwner)) {
+    hideHint();
+
+    return;
+  }
+
+  const rect = hintOwner.getBoundingClientRect();
+
+  if (
+    !hintOwnerRect ||
+    rect.left !== hintOwnerRect.left ||
+    rect.top !== hintOwnerRect.top ||
+    rect.width !== hintOwnerRect.width ||
+    rect.height !== hintOwnerRect.height
+  ) {
+    positionHint();
+  }
+
+  visibilityCheckFrame = window.requestAnimationFrame(checkHintOwnerVisibility);
+};
+
+// Dismiss our hint, be it shown or about to be shown, if Escape is pressed (see Note #10 above).
+// Note: we listen to key presses only while a hint is shown or about to be shown.
+
+const onKeyDown = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape') {
+    cancelPendingHint();
+    hideHint();
+  }
+};
+
+const updateKeyDownListener = (): void => {
+  if (hintElement || pendingHintState) {
+    window.addEventListener('keydown', onKeyDown, true);
+  } else {
+    window.removeEventListener('keydown', onKeyDown, true);
+  }
+};
+
+// The closest ancestor of the given element that has a hint, if any.
+
+const hintedAncestor = (element: HTMLElement): HTMLElement | null => {
+  for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    if (states.has(ancestor)) {
+      return ancestor;
+    }
+  }
+
+  return null;
+};
+
+// The closest element that has a hint and that is, or contains, the given node, if any.
+
+const closestHintedElement = (node: Node): HTMLElement | null => {
+  for (
+    let element = node instanceof HTMLElement ? node : node.parentElement;
+    element;
+    element = element.parentElement
+  ) {
+    if (states.has(element)) {
+      return element;
+    }
+  }
+
+  return null;
+};
+
+// Whether the given element has a focus ring, i.e. whether it (or an element within it, but not within an inner
+// element that has its own hint, see Note #6 above) has the focus and has been focused using the keyboard (or is a text
+// field, see Note #1 above).
+
+const hasFocusRing = (element: HTMLElement): boolean => {
+  const activeElement = document.activeElement;
+
+  return (
+    activeElement instanceof HTMLElement &&
+    element.contains(activeElement) &&
+    activeElement.matches(':focus-visible') &&
+    closestHintedElement(activeElement) === element
+  );
+};
+
+// Use our hint as the accessible name of our element, if needed (see Note #8 above).
+
+const ACCESSIBLE_NAME_ATTRIBUTES = ['aria-label', 'aria-labelledby', 'title', 'alt'];
+
+// Note #1: the aria-label that we have given to our element, if any, doesn't count as an accessible name of its own.
+// Note #2: our element may get an accessible name of its own after we have given it an aria-label (e.g., if it gets
+//          some text or if its own aria-label gets set, replacing ours), in which case we let go of ours (removing it
+//          only if it is still ours).
+
+const hasOwnAccessibleName = (element: HTMLElement, ourAriaLabel: string | null): boolean => {
+  return (
+    !!element.textContent?.trim() ||
+    ACCESSIBLE_NAME_ATTRIBUTES.some(
+      (attribute: string) =>
+        element.hasAttribute(attribute) &&
+        (attribute !== 'aria-label' || element.getAttribute(attribute) !== ourAriaLabel)
+    ) ||
+    ('labels' in element && !!(element as HTMLInputElement).labels?.length)
+  );
+};
+
+const removeOurAriaLabel = (element: HTMLElement, state: IHintState): void => {
+  if (state.ariaLabel !== null && element.getAttribute('aria-label') === state.ariaLabel) {
+    element.removeAttribute('aria-label');
+  }
+
+  state.ariaLabel = null;
+};
+
+const updateAriaLabel = (element: HTMLElement, state: IHintState): void => {
+  const ariaLabel = !state.html && state.text && !hasOwnAccessibleName(element, state.ariaLabel) ? state.text : null;
+
+  if (ariaLabel === state.ariaLabel) {
+    return;
+  }
+
+  if (ariaLabel === null) {
+    removeOurAriaLabel(element, state);
+  } else {
+    element.setAttribute('aria-label', ariaLabel);
+
+    state.ariaLabel = ariaLabel;
+  }
+};
+
+// Position our hint below its owner (or above it if there is not enough room below it, but there is above it or there
+// is more room above it than below it), within the window (see Note #2 above).
+// Note #1: if there is not enough room for our hint either below or above its owner, then it overlaps its owner (as
+//          little as possible) so that it remains within the window.
+// Note #2: we measure our hint at the top-left corner of the window, so that its width doesn't depend on where it would
+//          otherwise be laid out (e.g., if our OpenCOR instance is embedded in a page, away from the left edge of the
+//          window, or if our hint is being repositioned after its text has changed, see the updated() hook below).
+
+const positionHint = (): void => {
+  if (!hintElement || !hintOwner) {
+    return;
+  }
+
+  hintElement.style.left = '0px';
+  hintElement.style.top = '0px';
+
+  const elementRect = hintOwner.getBoundingClientRect();
+  const hintRect = hintElement.getBoundingClientRect();
+
+  hintOwnerRect = elementRect;
+
+  let left = elementRect.left;
+  let top = elementRect.bottom + HINT_OFFSET;
+
+  if (left + hintRect.width > window.innerWidth - HINT_MARGIN) {
+    left = window.innerWidth - HINT_MARGIN - hintRect.width;
+  }
+
+  if (top + hintRect.height > window.innerHeight - HINT_MARGIN) {
+    const topAbove = elementRect.top - HINT_OFFSET - hintRect.height;
+
+    if (topAbove >= HINT_MARGIN || elementRect.top > window.innerHeight - elementRect.bottom) {
+      top = topAbove;
+    } else {
+      top = window.innerHeight - HINT_MARGIN - hintRect.height;
+    }
+  }
+
+  hintElement.style.left = `${Math.max(left, HINT_MARGIN)}px`;
+  hintElement.style.top = `${Math.max(top, HINT_MARGIN)}px`;
+};
+
+const showHint = (element: HTMLElement, text: string, html: boolean): void => {
+  // Make sure that we have something to show and that our element is still in the DOM and visible.
+  // Note: our element may, for instance, be in the panel of a file tab that was hidden (using visibility: hidden) while
+  //       our hint was pending (e.g., if the user switched to another file tab using the keyboard).
+
+  hideHint();
+
+  if (!text || !isVisible(element)) {
+    return;
+  }
+
+  // Create our hint and position it.
+
+  hintElement = document.createElement('div');
+
+  hintElement.setAttribute('aria-hidden', 'true');
+
+  if (html) {
+    hintElement.className = 'opencor-hint opencor-hint-rich';
+    hintElement.innerHTML = text;
+  } else {
+    hintElement.className = 'opencor-hint';
+    hintElement.textContent = displayedText(text);
+  }
+
+  (element.closest('.opencor') ?? document.body).appendChild(hintElement);
+
+  hintOwner = element;
+
+  updateKeyDownListener();
+  positionHint();
+
+  visibilityCheckFrame = window.requestAnimationFrame(checkHintOwnerVisibility);
+};
+
+export const vHint: vue.Directive<HTMLElement, string | undefined> = {
+  mounted(element, binding) {
+    trackWindowFocus();
+
+    const state: IHintState = {
+      text: binding.value ?? '',
+      html: !!binding.modifiers.html,
+      timer: undefined,
+      ariaLabel: null,
+      onPointerEnter: () => {
+        // Hide the hint of our hinted ancestors, if any, since ours is to replace it (see Note #6 above), and cancel
+        // the hint that is about to be shown, if any (e.g., the hint of one of our hinted ancestors).
+
+        for (let ancestor = hintedAncestor(element); ancestor; ancestor = hintedAncestor(ancestor)) {
+          if (hintOwner === ancestor) {
+            hideHint();
+          }
+        }
+
+        cancelPendingHint();
+
+        state.timer = window.setTimeout(() => {
+          pendingHintState = null;
+
+          showHint(element, state.text, state.html);
+        }, HINT_DELAY);
+
+        pendingHintState = state;
+
+        updateKeyDownListener();
+      },
+      onPointerLeave: (event: PointerEvent) => {
+        // Keep our hint if our element has a focus ring since our hint is then also shown because our element is
+        // focused (see Note #1 above), but cancel it if it is only about to be shown (e.g., if it was dismissed using
+        // Escape and our element was then hovered, but left before our hint could be shown again).
+
+        if (hasFocusRing(element)) {
+          if (pendingHintState === state) {
+            cancelPendingHint();
+          }
+
+          return;
+        }
+
+        state.onHide();
+
+        // Show the hint of our hinted ancestor again if we are left for it (see Note #6 above).
+
+        const ancestor = hintedAncestor(element);
+
+        if (ancestor && event.relatedTarget instanceof Node && ancestor.contains(event.relatedTarget)) {
+          states.get(ancestor)?.onPointerEnter();
+        }
+      },
+      onFocusIn: (event: FocusEvent) => {
+        // Show our hint if the focus was set using the keyboard, unless the focused element is within an element that
+        // has its own hint (see Note #6 above) or the focus is only given back to our element because our window has
+        // regained the focus (see Note #11 above).
+
+        if (
+          !windowFocusLost &&
+          event.target instanceof Element &&
+          event.target.matches(':focus-visible') &&
+          closestHintedElement(event.target) === element
+        ) {
+          cancelPendingHint();
+          showHint(element, state.text, state.html);
+        }
+      },
+      onFocusOut: (event: FocusEvent) => {
+        // Hide our hint, unless the focus remains within our element.
+
+        if (!(event.relatedTarget instanceof Node && element.contains(event.relatedTarget))) {
+          state.onHide();
+        }
+      },
+      onHide: () => {
+        if (pendingHintState === state) {
+          cancelPendingHint();
+        }
+
+        if (hintOwner === element) {
+          hideHint();
+        }
+      }
+    };
+
+    states.set(element, state);
+
+    updateAriaLabel(element, state);
+
+    element.addEventListener('pointerenter', state.onPointerEnter);
+    element.addEventListener('pointerleave', state.onPointerLeave);
+
+    if (!state.html) {
+      element.addEventListener('pointerdown', state.onHide);
+    }
+
+    element.addEventListener('focusin', state.onFocusIn);
+    element.addEventListener('focusout', state.onFocusOut);
+  },
+  updated(element, binding) {
+    const state = states.get(element);
+
+    if (state) {
+      state.text = binding.value ?? '';
+
+      updateAriaLabel(element, state);
+
+      // Update our hint, if it is shown and its text has changed, and reposition it since its size may have changed.
+      // Note #1: we are called whenever the component that contains our element gets updated, not only when our hint
+      //          changes, hence we check that our hint has changed (e.g., so that a rich hint isn't rebuilt and
+      //          repositioned every time the user types something in the input field that it is about). A change in
+      //          the position of our element is otherwise handled by checkHintOwnerVisibility().
+      // Note #2: our hint is repositioned before the next paint, so it doesn't flicker.
+
+      if (hintOwner === element && hintElement && binding.value !== binding.oldValue) {
+        if (state.text && state.html) {
+          hintElement.innerHTML = state.text;
+        } else if (state.text) {
+          hintElement.textContent = displayedText(state.text);
+        } else {
+          hideHint();
+
+          return;
+        }
+
+        positionHint();
+      }
+    }
+  },
+  beforeUnmount(element) {
+    const state = states.get(element);
+
+    if (state) {
+      state.onHide();
+
+      element.removeEventListener('pointerenter', state.onPointerEnter);
+      element.removeEventListener('pointerleave', state.onPointerLeave);
+      element.removeEventListener('pointerdown', state.onHide);
+      element.removeEventListener('focusin', state.onFocusIn);
+      element.removeEventListener('focusout', state.onFocusOut);
+
+      removeOurAriaLabel(element, state);
+
+      states.delete(element);
+    }
+  }
+};
diff --git a/src/renderer/src/common/settings.ts b/src/renderer/src/common/settings.ts
index 822dc7b0b..681c319d7 100644
--- a/src/renderer/src/common/settings.ts
+++ b/src/renderer/src/common/settings.ts
@@ -16,8 +16,8 @@ const defaultSettings = (): ISettings => {
 // Note #1: the loaded settings may be incomplete (e.g., if they were saved by an older version of OpenCOR or edited by
 //          hand), have values of the wrong type (e.g., "false" rather than false), or not even be an object, in which
 //          case we use our default settings for whatever is missing or of the wrong type.
-// Note #2: we keep the settings, and settings sections, for which we don't have a default value (e.g., settings saved by
-//          a newer version of OpenCOR).
+// Note #2: we keep the settings, and settings sections, for which we don't have a default value (e.g., settings saved
+//          by a newer version of OpenCOR).
 
 const withDefaultSettings = (settings: unknown): ISettings => {
   const loadedSettings = isObject(settings) ? settings : {};
diff --git a/src/renderer/src/common/viewRegistry.ts b/src/renderer/src/common/viewRegistry.ts
index f80853d18..93f9d0826 100644
--- a/src/renderer/src/common/viewRegistry.ts
+++ b/src/renderer/src/common/viewRegistry.ts
@@ -140,8 +140,8 @@ export const useViewRegistry = vueusecore.createGlobalState(() => {
   // ContentsComponent.isModified()), clear that mark once those contents have been saved, and determine whether a file
   // has unsaved contents.
   // Note #1: same as for registerFileEditor() when it comes to using the raw file.
-  // Note #2: a WeakSet cannot be reactive, so we keep track of its changes so that whoever determines whether a file has
-  //          unsaved contents (e.g., a template) gets updated when that changes.
+  // Note #2: a WeakSet cannot be reactive, so we keep track of its changes so that whoever determines whether a file
+  //          has unsaved contents (e.g., a template) gets updated when that changes.
 
   const _unsavedContentsFilesVersion = vue.ref<number>(0);
 
diff --git a/src/renderer/src/common/vueCommon.ts b/src/renderer/src/common/vueCommon.ts
index 6735984d1..f246328b7 100644
--- a/src/renderer/src/common/vueCommon.ts
+++ b/src/renderer/src/common/vueCommon.ts
@@ -6,9 +6,30 @@ import type { OpenCORTheme } from '../../index';
 
 import * as locSedApi from '../libopencor/locSedApi';
 
-import { MEDIUM_DELAY, VERY_SHORT_DELAY } from './constants';
+import { COPY_FEEDBACK_LIFE, MEDIUM_DELAY, NARROW_LAYOUT_WIDTH, VERY_SHORT_DELAY } from './constants';
 import { electronApi } from './electronApi';
 
+// A composable to know whether the given element is narrow (i.e. narrower than NARROW_LAYOUT_WIDTH), in which case it
+// should use a narrow layout (e.g., a simulation experiment view stacks its side panel above its plots rather than
+// shows it to their left, so that its plots remain usable on a phone or when OpenCOR is embedded in a small container).
+// Note #1: we use the width of the given element (rather than that of the window), since OpenCOR may not take the whole
+//          window (e.g., when it is embedded in a page).
+// Note #2: we ignore a width of zero, which means that the given element is not shown (e.g., if it is in a view that
+//          is not currently shown), so that our layout doesn't change for nothing.
+
+export const useNarrowLayout = (elementRef: vue.Ref<HTMLElement | null>): vue.Ref<boolean> => {
+  const narrowLayout = vue.ref<boolean>(false);
+  const { width } = vueusecore.useElementSize(() => elementRef.value, undefined, { box: 'border-box' });
+
+  vue.watch(width, (newWidth: number) => {
+    if (newWidth > 0) {
+      narrowLayout.value = newWidth < NARROW_LAYOUT_WIDTH;
+    }
+  });
+
+  return narrowLayout;
+};
+
 // A constant to know the UID of the active instance of OpenCOR.
 
 export const activeInstanceUid = vueusecore.createGlobalState(() => vue.ref<string | null>(null));
@@ -230,6 +251,93 @@ export const useAppendTarget = (ancestorRef: vue.Ref<HTMLElement | null>) => {
   return appendTarget;
 };
 
+// The props of a toolbar button (see ToolbarButtonWidget.vue).
+// Note #1: they are defined here so that they can also be used by code that computes some of them (see
+//          useCopyToClipboard()).
+// Note #2: a shortcut is both shown in the tooltip of a toolbar button and used as the value of its aria-keyshortcuts
+//          attribute, so it must be valid for the latter (e.g., "F9" or "Control+Shift+O", see
+//          https://www.w3.org/TR/wai-aria-1.2/#aria-keyshortcuts). This is not the case for a shortcut as it is shown
+//          elsewhere (e.g., "⌘O" or "Ctrl+O" in our main menu), in which case a separate prop would be needed for
+//          aria-keyshortcuts (or our shortcut would need to be converted).
+
+export interface IToolbarButtonProps {
+  icon: string;
+  label?: string;
+  shortcut?: string;
+  accent?: 'primary' | 'warning' | 'danger';
+  disabled?: boolean;
+  small?: boolean;
+  tooltipAlign?: 'start' | 'end';
+  feedback?: boolean;
+  keepFocus?: boolean;
+}
+
+// A composable to copy some text to the clipboard and to let people know, for a short while, whether it was copied,
+// through the icon, label, and accent of the (toolbar) button that was used to copy it (see ToolbarButtonWidget.vue).
+// Note: copying is asynchronous, so we may get reset (e.g., if our dialog gets closed) or unmounted in the meantime, in
+//       which case we don't let people know whether the text was copied (since it would be out of context).
+
+export const useCopyToClipboard = () => {
+  const status = vue.ref<'idle' | 'copied' | 'failed'>('idle');
+  let statusTimer: number | undefined;
+  let copyNumber = 0;
+  let unmounted = false;
+
+  const copy = async (text: string): Promise<void> => {
+    const crtCopyNumber = ++copyNumber;
+    let copied = true;
+
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      copied = false;
+    }
+
+    if (unmounted || crtCopyNumber !== copyNumber) {
+      return;
+    }
+
+    status.value = copied ? 'copied' : 'failed';
+
+    window.clearTimeout(statusTimer);
+
+    statusTimer = window.setTimeout(() => {
+      status.value = 'idle';
+    }, COPY_FEEDBACK_LIFE);
+  };
+
+  const reset = (): void => {
+    ++copyNumber;
+
+    window.clearTimeout(statusTimer);
+
+    status.value = 'idle';
+  };
+
+  // Note: our feedback (i.e. "Copied" or "Could not copy") is shown in the tooltip of our button, which must therefore
+  //       be shown even though our button has just been pressed (see ToolbarButtonWidget.vue).
+
+  const buttonProps = (label: string): Pick<IToolbarButtonProps, 'icon' | 'label' | 'accent' | 'feedback'> => {
+    if (status.value === 'copied') {
+      return { icon: 'pi pi-check', label: 'Copied', accent: 'primary', feedback: true };
+    }
+
+    if (status.value === 'failed') {
+      return { icon: 'pi pi-times', label: 'Could not copy', accent: 'danger', feedback: true };
+    }
+
+    return { icon: 'pi pi-copy', label };
+  };
+
+  vue.onBeforeUnmount(() => {
+    unmounted = true;
+
+    window.clearTimeout(statusTimer);
+  });
+
+  return { copy, reset, buttonProps };
+};
+
 // Populate the parameters of the given instance task.
 // Note: we collect our parameters into a plain array (rather than push them one by one into our reactive array, which
 //       would go through Vue's reactivity for each of them), sort them using a collator (which is faster than
@@ -368,7 +476,7 @@ export const waitWhileRunning = (
           setTimeout(poll, VERY_SHORT_DELAY);
 
           break;
-        default: // locSedApi.ESedInstanceStatus.IDLE:
+        default: // locSedApi.ESedInstanceStatus.IDLE.
           if (onProgress && !runAbortedRef?.value) {
             callSafely(() => onProgress(100));
 
diff --git a/src/renderer/src/components/BackgroundComponent.vue b/src/renderer/src/components/BackgroundComponent.vue
index 5c5d2575e..8af555a72 100644
--- a/src/renderer/src/components/BackgroundComponent.vue
+++ b/src/renderer/src/components/BackgroundComponent.vue
@@ -1,24 +1,446 @@
 <template>
-  <div class="flex justify-center items-center h-full overflow-hidden">
-    <img
-      class="z-9 max-w-77.75 max-h-[266.92px] rounded-2xl p-2 bg-(--p-content-background) shadow-[0_0_0.75rem_0.375rem_var(--p-content-border-color)]"
-      src="../assets/logo.svg"
-    />
-    <div class="absolute bottom-1 left-2 text-xs text-neutral-400 dark:text-neutral-600">Copyright {{ COPYRIGHT }}</div>
-    <div class="absolute bottom-1 right-2 text-xs text-neutral-400 dark:text-neutral-600">Version {{ currentVersion }}</div>
+  <div class="background" :class="{ 'background-with-actions': actions, 'background-with-recent-files': actions && recentFiles.length }">
+    <div class="background-pattern" />
+    <div class="background-scroll">
+      <div class="background-contents" :style="{ '--recent-file-count': recentFiles.length }">
+        <img class="logo" src="../assets/logo.svg" alt="OpenCOR" />
+        <template v-if="actions">
+          <div class="actions opencor-panel">
+            <button v-for="action in ACTIONS" :key="action.label" class="action"
+              type="button"
+              @mousedown.prevent
+              @click="action.command"
+            >
+              <i :class="action.icon" class="action-icon" />
+              <span class="action-label">{{ action.label }}</span>
+              <kbd v-if="action.shortcut" class="action-shortcut">{{ action.shortcut }}</kbd>
+            </button>
+          </div>
+          <p class="drop-hint">
+            <i class="pi pi-upload" />
+            Files can also be dropped here.
+          </p>
+          <section v-if="recentFiles.length" class="recent-files">
+            <div class="opencor-section-title">Recent</div>
+            <div class="recent-files-list opencor-panel">
+              <button v-for="recentFile in recentFiles" :key="recentFile.path" class="recent-file"
+                type="button"
+                v-hint="recentFile.path"
+                @mousedown.prevent
+                @click="emit('openRecentFile', recentFile.path)"
+              >
+                <i class="pi pi-file recent-file-icon" />
+                <span class="recent-file-name">{{ recentFile.name }}</span>
+                <span class="recent-file-location">{{ recentFile.location }}</span>
+              </button>
+            </div>
+          </section>
+        </template>
+      </div>
+      <div class="footer">
+        <span>Version {{ currentVersion }}</span>
+        <span class="footer-copyright"> · Copyright © {{ COPYRIGHT }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-/* Original dimensions:
- *  - Width: 828.12px; and
- *  - Height: 704.92px.
- * Final dimensions:
- *  - Width: 303px + 8px = 311px; and
- *  - Height: 257.92px + 8px = 266.92px.
- */
+import * as vue from 'vue';
 
+import * as common from '../common/common';
+import { COPYRIGHT } from '../common/constants';
+import { electronApi } from '../common/electronApi';
+import { vHint } from '../common/hint';
 import { currentVersion } from '../common/version';
 
-import { COPYRIGHT } from '../common/constants';
+// Our background, i.e. what is shown when no file is open. It shows our logo and, if requested, some actions to get
+// started, as well as our most recent files, if any.
+
+const props = withDefaults(
+  defineProps<{
+    actions?: boolean;
+    recentFilePaths?: string[];
+  }>(),
+  {
+    recentFilePaths: () => []
+  }
+);
+
+const emit = defineEmits<{
+  open: [];
+  openRecentFile: [filePath: string];
+  openLocation: [];
+  openSampleLorenz: [];
+}>();
+
+// Our most recent files, i.e. their path, as well as their name and location (i.e. the path of their folder), which we
+// show separately.
+// Note: we only show a few of them since our Reopen menu lists all of them anyway.
+
+const MAX_SHOWN_RECENT_FILES = 5;
+
+const recentFiles = vue.computed<{ path: string; name: string; location: string }[]>(() => {
+  return props.recentFilePaths.slice(0, MAX_SHOWN_RECENT_FILES).map((path) => {
+    const name = common.fileName(path);
+
+    return {
+      path,
+      name,
+      location: path.slice(0, path.length - name.length).replace(/[/\\]$/, '')
+    };
+  });
+});
+
+// Our actions, along with their keyboard shortcut.
+// Note: our shortcuts must be in sync with those of our main menu, i.e. src/main/MainMenu.ts for OpenCOR and
+//       MainMenu.vue for OpenCOR's Web app.
+
+const isWindowsOrLinux = common.isWindows() || common.isLinux();
+const isMacOs = common.isMacOs();
+
+const shortcut = (windowsOrLinuxShortcut: string, macOsShortcut: string): string | undefined => {
+  return isWindowsOrLinux ? windowsOrLinuxShortcut : isMacOs ? macOsShortcut : undefined;
+};
+
+const ACTIONS: { label: string; icon: string; shortcut?: string; command: () => void }[] = [
+  {
+    label: 'Open...',
+    icon: 'pi pi-folder-open',
+    shortcut: electronApi ? shortcut('Ctrl+O', '⌘O') : shortcut('Ctrl+Alt+O', '⌘⌥O'),
+    command: () => {
+      emit('open');
+    }
+  },
+  {
+    label: 'Open Location...',
+    icon: 'pi pi-link',
+    shortcut: electronApi ? shortcut('Ctrl+Shift+O', '⇧⌘O') : shortcut('Ctrl+Shift+Alt+O', '⇧⌘⌥O'),
+    command: () => {
+      emit('openLocation');
+    }
+  },
+  {
+    label: 'Open the Lorenz Sample',
+    icon: 'pi pi-book',
+    command: () => {
+      emit('openSampleLorenz');
+    }
+  }
+];
 </script>
+
+<style scoped>
+/**
+ * Note: we may be shown in a small container (e.g., when OpenCOR is embedded in a page alongside other OpenCOR
+ *       instances), so we adapt our contents to the size of our container: our recent files get hidden, our logo gets
+ *       smaller and then gets hidden, followed by our footer and drop hint, and then our actions get shown on one row.
+ *       If our container is still too small, then our contents can be scrolled (rather than be clipped).
+ */
+
+.background {
+  --reserved-height: 4rem;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--p-content-background);
+  container-type: size;
+}
+
+.background-with-actions {
+  --reserved-height: 15rem;
+}
+
+/**
+ * Note: our recent files take some room (i.e. a title and a row, with its spacing, for each of them), which our logo
+ *       must leave for them (see .logo).
+ */
+
+.background-with-recent-files .background-contents {
+  --reserved-height: calc(18.75rem + var(--recent-file-count) * 2.3125rem);
+}
+
+/**
+ * A subtle dot grid, which fades out towards our edges.
+ */
+
+.background-pattern {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(color-mix(in srgb, var(--p-text-color) 18%, transparent) 1px, transparent 1px);
+  background-size: 1.25rem 1.25rem;
+  pointer-events: none;
+  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
+}
+
+/**
+ * Note: our contents are centred using an auto margin (rather than using justify-content), so that they can still be
+ *       scrolled to in full when they don't fit.
+ */
+
+.background-scroll {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.background-contents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 20rem;
+  margin: auto;
+  padding: 1rem;
+}
+
+/**
+ * Note: our logo's original dimensions are 828.12px x 704.92px, i.e. it has an aspect ratio of about 1.1748. Its width
+ *       is such that our logo, the rest of our contents (i.e. our reserved height), and our footer fit in our
+ *       container.
+ */
+
+.logo {
+  width: min(12rem, 100cqw - 2rem, (100cqh - var(--reserved-height)) * 1.1748);
+  min-width: 3rem;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/**
+ * Actions.
+ */
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  width: 100%;
+  padding: 0.25rem;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: var(--p-text-color);
+  font-size: 0.875rem;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.action:hover {
+  background-color: color-mix(in srgb, var(--p-text-color) 6%, transparent);
+}
+
+.action:active {
+  background-color: color-mix(in srgb, var(--p-text-color) 10%, transparent);
+}
+
+.action:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--p-primary-color);
+}
+
+.action-icon {
+  color: var(--p-primary-color);
+  font-size: 0.875rem;
+}
+
+.action-label {
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.action-shortcut {
+  color: var(--p-text-muted-color);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+/**
+ * Recent files.
+ */
+
+.recent-files {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.recent-files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.25rem;
+}
+
+.recent-file {
+  display: flex;
+  align-items: baseline;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: var(--p-text-color);
+  font-size: 0.875rem;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.recent-file:hover {
+  background-color: color-mix(in srgb, var(--p-text-color) 6%, transparent);
+}
+
+.recent-file:active {
+  background-color: color-mix(in srgb, var(--p-text-color) 10%, transparent);
+}
+
+.recent-file:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--p-primary-color);
+}
+
+.recent-file-icon {
+  align-self: center;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+
+/**
+ * Note: the location of a recent file only gets the room that its name doesn't need, so that its name gets truncated
+ *       only if it doesn't fit on its own (the full path of a recent file is shown in its hint anyway).
+ */
+
+.recent-file-name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.recent-file-location {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+}
+
+/**
+ * Drop hint.
+ */
+
+.drop-hint {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: -0.75rem 0 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.drop-hint .pi {
+  font-size: 0.75rem;
+}
+
+/**
+ * Footer.
+ */
+
+.footer {
+  flex-shrink: 0;
+  padding: 0 0.5rem 0.375rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/**
+ * Adapt our contents to the size of our container.
+ */
+
+@container (width < 24rem) {
+  .footer-copyright {
+    display: none;
+  }
+}
+
+@container (width < 16rem) {
+  .action-shortcut,
+  .drop-hint {
+    display: none;
+  }
+}
+
+@container (height < 33rem) {
+  .recent-files {
+    display: none;
+  }
+
+  .background-with-recent-files .background-contents {
+    --reserved-height: 15rem;
+  }
+}
+
+@container (height < 19rem) {
+  .background-with-actions .logo {
+    display: none;
+  }
+}
+
+@container (height < 14rem) {
+  .drop-hint,
+  .background-with-actions .footer {
+    display: none;
+  }
+}
+
+@container (height < 8rem) {
+  .footer {
+    display: none;
+  }
+}
+
+@container (height < 10rem) {
+  .background-with-actions .background-contents {
+    max-width: none;
+    padding: 0.5rem;
+  }
+
+  .actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: auto;
+  }
+
+  .action {
+    width: auto;
+  }
+
+  .action-shortcut {
+    display: none;
+  }
+}
+</style>
diff --git a/src/renderer/src/components/BlockingMessageComponent.vue b/src/renderer/src/components/BlockingMessageComponent.vue
index 3727d2853..cef20de63 100644
--- a/src/renderer/src/components/BlockingMessageComponent.vue
+++ b/src/renderer/src/components/BlockingMessageComponent.vue
@@ -1,16 +1,11 @@
 <template>
-  <Message class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 pt-6 pb-3 z-99999"
-    severity="secondary"
-    :pt="{
-      transition: {
-        css: false
-      }
-    }"
-  >
-    <i class="block! pi pi-cog pi-spin text-center! text-[3rem]!" />
-    <br />
-    <span class="block text-center text-[1.5rem]">{{ message }}</span>
-    <ProgressBar v-if="progress !== undefined" class="w-full h-1! mt-4"
+  <div class="blocking-message" role="status" aria-live="polite">
+    <div class="blocking-message-header">
+      <span class="opencor-spinner" />
+      <span class="blocking-message-text">{{ message }}</span>
+      <span v-if="progress !== undefined" class="blocking-message-progress" aria-hidden="true">{{ Math.round(progress) }}%</span>
+    </div>
+    <ProgressBar v-if="progress !== undefined" class="blocking-message-progress-bar"
       :value="progress"
       :showValue="false"
       :pt="{
@@ -19,12 +14,74 @@
         }
       }"
     />
-  </Message>
+  </div>
 </template>
 
 <script setup lang="ts">
+// A message that is shown while OpenCOR (or part of it) is blocked, e.g., while it is being initialised or while a
+// model is being loaded, with the progress made, if known.
+// Note: we are a live region, so that a change to our message gets announced by assistive technologies (whether the
+//       message we are first shown with gets announced depends on the assistive technology since a live region is only
+//       reliably announced when its contents change), but not our progress (which would otherwise get announced each
+//       time it changes), which is available through our progress bar.
+
 defineProps<{
   message: string;
   progress?: number;
 }>();
 </script>
+
+<style scoped>
+/**
+ * Note: we may be shown in a small container (e.g., when OpenCOR is embedded in a page alongside other OpenCOR
+ *       instances), so we never get wider than our container and our message gets truncated if needed.
+ */
+
+.blocking-message {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  width: max-content;
+  min-width: min(16rem, calc(100% - 1rem));
+  max-width: min(24rem, calc(100% - 1rem));
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 0.75rem;
+  background-color: var(--p-content-background);
+  box-shadow: var(--opencor-card-shadow);
+  color: var(--p-text-color);
+  transform: translate(-50%, -50%);
+}
+
+.blocking-message-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+.blocking-message-text {
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.blocking-message-progress {
+  flex-shrink: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.blocking-message-progress-bar {
+  height: 0.25rem;
+}
+</style>
diff --git a/src/renderer/src/components/CellDLEditorPoolComponent.vue b/src/renderer/src/components/CellDLEditorPoolComponent.vue
index a8f6e4545..e240c027d 100644
--- a/src/renderer/src/components/CellDLEditorPoolComponent.vue
+++ b/src/renderer/src/components/CellDLEditorPoolComponent.vue
@@ -52,8 +52,8 @@ const onEditorReady = (editor: IPooledCellDLEditor): void => {
 // Let our pool know if CellDL Editor fails to get ready.
 // Note: CellDL Editor initialises itself before loading its actual component (e.g., it instantiates Oxigraph from a
 //       data URL, which a host application's Content Security Policy may not allow), and if that fails then it will
-//       never be ready. Our pool only considers errors that occur before a CellDL Editor is ready (see setFailed()), and
-//       we let them propagate, so that they still get logged.
+//       never be ready. Our pool only considers errors that occur before a CellDL Editor is ready (see setFailed()),
+//       and we let them propagate, so that they still get logged.
 
 vue.onErrorCaptured((error: unknown) => {
   setFailed(error);
diff --git a/src/renderer/src/components/ChangelogComponent.vue b/src/renderer/src/components/ChangelogComponent.vue
index e8d53a4a5..6e893d577 100644
--- a/src/renderer/src/components/ChangelogComponent.vue
+++ b/src/renderer/src/components/ChangelogComponent.vue
@@ -1,24 +1,29 @@
 <template>
-  <div class="space-y-4">
-    <div v-for="entry in entries" :key="entry.version" class="space-y-1.5">
-      <div class="font-bold">Version {{ entry.version }}</div>
-      <ul class="space-y-1 ml-2">
-        <li v-for="(change, index) in entry.changes" :key="index" class="flex items-start gap-2">
-          <span class="change-type shrink-0 inline-flex items-center rounded-full" :class="`change-type-${change.type}`"
-            :title="CHANGE_TYPE_LABELS[change.type]"
-          >
+  <div class="changelog">
+    <section v-for="entry in entries" :key="entry.version" class="changelog-entry">
+      <div class="changelog-entry-header">
+        <span class="changelog-entry-version">Version {{ entry.version }}</span>
+        <span v-if="entry.version === currentVersion" class="changelog-entry-current">Current</span>
+        <span v-if="releaseDate(entry.version)" class="changelog-entry-date">{{ releaseDate(entry.version) }}</span>
+      </div>
+      <ul class="changelog-changes">
+        <li v-for="(change, index) in entry.changes" :key="index" class="changelog-change">
+          <span class="change-type" :class="`change-type-${change.type}`" role="img" v-hint="CHANGE_TYPE_LABELS[change.type]">
             <i :class="`pi ${CHANGE_TYPE_ICONS[change.type]}`" />
           </span>
-          <span>{{ change.description }}</span>
+          <span class="changelog-change-description">{{ change.description }}</span>
         </li>
       </ul>
-    </div>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { IOpenCORChangelogEntry, OpenCORChangelogChangeType } from '../../index';
 
+import { vHint } from '../common/hint';
+import { currentVersion } from '../common/version';
+
 defineProps<{
   entries: IOpenCORChangelogEntry[];
 }>();
@@ -36,15 +41,108 @@ const CHANGE_TYPE_ICONS: Record<OpenCORChangelogChangeType, string> = {
   improved: 'pi-arrow-circle-up',
   fixed: 'pi-wrench'
 };
+
+// The release date of the given version, if it can be determined.
+// Note: our versions are of the form 1.YYYYMMDD.N, where YYYYMMDD is the date of the release.
+
+const RELEASE_DATE_FORMAT = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
+
+const releaseDate = (version: string): string => {
+  const match = version.match(/^\d+\.(\d{4})(\d{2})(\d{2})\.\d+$/);
+
+  if (!match) {
+    return '';
+  }
+
+  // Note: an invalid month or day (e.g., 13 or 32) would roll over (e.g., to the following year or month), so we make
+  //       sure that our date is the one that was given to us.
+
+  const year = Number(match[1]);
+  const month = Number(match[2]) - 1;
+  const day = Number(match[3]);
+  const date = new Date(year, month, day);
+
+  return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day
+    ? RELEASE_DATE_FORMAT.format(date)
+    : '';
+};
 </script>
 
 <style scoped>
+.changelog {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.changelog-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.changelog-entry-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 0.5rem;
+}
+
+.changelog-entry-version {
+  color: var(--p-text-color);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.changelog-entry-current {
+  align-self: center;
+  padding: 0 0.4375rem;
+  border-radius: 9999px;
+  background-color: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
+  color: var(--p-primary-color);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+}
+
+.changelog-entry-date {
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+}
+
+.changelog-changes {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.changelog-change {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+}
+
+/**
+ * Note: our description has the same line height as the height of our change type, so that they are aligned.
+ */
+
+.changelog-change-description {
+  min-width: 0;
+  line-height: 1.375rem;
+}
+
 .change-type {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
   justify-content: center;
   width: 1.375rem;
   height: 1.375rem;
-  margin-top: 0.0625rem;
   border: 1px solid;
+  border-radius: 9999px;
 }
 
 .change-type .pi {
@@ -52,26 +150,26 @@ const CHANGE_TYPE_ICONS: Record<OpenCORChangelogChangeType, string> = {
 }
 
 .change-type-added {
-  background-color: var(--p-message-success-background);
-  border-color: var(--p-message-success-border-color);
-  color: var(--p-message-success-color);
+  background-color: var(--opencor-success-background);
+  border-color: var(--opencor-success-border-color);
+  color: var(--opencor-success-color);
 }
 
 .change-type-removed {
-  background-color: var(--p-message-error-background);
-  border-color: var(--p-message-error-border-color);
-  color: var(--p-message-error-color);
+  background-color: var(--opencor-error-background);
+  border-color: var(--opencor-error-border-color);
+  color: var(--opencor-error-color);
 }
 
 .change-type-improved {
-  background-color: var(--p-message-info-background);
-  border-color: var(--p-message-info-border-color);
-  color: var(--p-message-info-color);
+  background-color: var(--opencor-info-background);
+  border-color: var(--opencor-info-border-color);
+  color: var(--opencor-info-color);
 }
 
 .change-type-fixed {
-  background-color: var(--p-message-warn-background);
-  border-color: var(--p-message-warn-border-color);
-  color: var(--p-message-warn-color);
+  background-color: var(--opencor-warn-background);
+  border-color: var(--opencor-warn-border-color);
+  color: var(--opencor-warn-color);
 }
 </style>
diff --git a/src/renderer/src/components/ContentsComponent.vue b/src/renderer/src/components/ContentsComponent.vue
index c9fbce238..33be5fba8 100644
--- a/src/renderer/src/components/ContentsComponent.vue
+++ b/src/renderer/src/components/ContentsComponent.vue
@@ -16,29 +16,60 @@
     @dragover.prevent="onDragOver"
     @drop="onDrop"
   >
-    <BackgroundComponent v-show="!fileTabs.length" class="h-full" />
-    <div v-show="fileTabs.length" ref="fileTabBarRef" class="file-tab-bar shrink-0 border-b border-b-primary flex overflow-x-auto"
-      @wheel.prevent="onWheel"
-    >
-      <div v-show="dropIndicatorLeft !== null" class="file-tab-drop-indicator"
-        :style="{ left: `${dropIndicatorLeft}px` }"
-      />
-      <div v-for="fileTab in fileTabs" :key="`tab_${fileTab.file.path()}`" :ref="(element) => setFileTabRef(fileTab.file.path(), element as HTMLElement | null)"
-        class="file-tab"
-        :class="{
-          'file-tab-active': fileTab.file.path() === activeFile,
-          'file-tab-dragging': dragState?.filePath === fileTab.file.path()
-        }"
-        :draggable="true"
-        @click="selectFile(fileTab.file.path())"
-        @dragstart="onDragStart($event, fileTab.file.path())"
-        @dragend="onDragEnd"
+    <BackgroundComponent v-show="!fileTabs.length" actions
+      :recentFilePaths="recentFilePaths"
+      @open="$emit('open')"
+      @openRecentFile="$emit('openRecentFile', $event)"
+      @openLocation="$emit('openLocation')"
+      @openSampleLorenz="$emit('openSampleLorenz')"
+    />
+    <div v-show="fileTabs.length" class="file-tab-bar-container shrink-0">
+      <div ref="fileTabBarRef" class="file-tab-bar flex overflow-x-auto"
+        @wheel.prevent="onWheel"
+        @scroll="updateFileTabBarOverflow"
       >
-        <span class="file-tab-label">{{ common.fileName(fileTab.file.canonicalPath()) }}</span>
-        <div v-if="isModified(fileTab)" class="pi pi-circle-fill modified-indicator" title="Modified" />
-        <div class="pi pi-times remove-button" @mousedown.prevent @click.stop="closeFile(fileTab.file.path())" />
+        <div v-show="dropIndicatorLeft !== null" class="file-tab-drop-indicator"
+          :style="{ left: `${dropIndicatorLeft}px` }"
+        />
+        <div v-for="fileTab in fileTabs" :key="`tab_${fileTab.file.path()}`" :ref="(element) => setFileTabRef(fileTab.file.path(), element as HTMLElement | null)"
+          class="file-tab"
+          :class="{
+            'file-tab-active': fileTab.file.path() === activeFile,
+            'file-tab-modified': isModified(fileTab),
+            'file-tab-dragging': dragState?.filePath === fileTab.file.path()
+          }"
+          v-hint="fileTab.file.canonicalPath()"
+          :draggable="true"
+          @click="selectFile(fileTab.file.path())"
+          @mousedown.middle.prevent
+          @auxclick.middle.prevent="closeFile(fileTab.file.path())"
+          @contextmenu.prevent="onFileTabContextMenu($event, fileTab.file.path())"
+          @dragstart="onDragStart($event, fileTab.file.path())"
+          @dragend="onDragEnd"
+        >
+          <i :class="fileTabIcon(fileTab)" class="file-tab-icon" />
+          <span class="file-tab-label">{{ common.fileName(fileTab.file.canonicalPath()) }}</span>
+          <span class="file-tab-end">
+            <span v-if="isModified(fileTab)" class="file-tab-modified-indicator pi pi-circle-fill" role="img" aria-label="Modified" />
+            <!--
+            Note: our close button's hint is only "Close" (since it is shown next to the name of our file), but its
+                  accessible name says which file it closes, so that the close buttons of our file tabs can be told
+                  apart (e.g., by a screen reader).
+            -->
+            <button class="file-tab-close-button pi pi-times"
+              type="button"
+              :aria-label="`Close ${common.fileName(fileTab.file.canonicalPath())}`"
+              v-hint="'Close'"
+              @mousedown.prevent
+              @click.stop="onCloseButtonClick(fileTab.file.path())"
+            />
+          </span>
+        </div>
       </div>
+      <div v-show="fileTabBarOverflow.left" class="file-tab-bar-fade file-tab-bar-fade-left" />
+      <div v-show="fileTabBarOverflow.right" class="file-tab-bar-fade file-tab-bar-fade-right" />
     </div>
+    <ContextMenuWidget ref="fileTabContextMenuRef" :model="fileTabContextMenuItems" :appendTo="appendTarget" />
     <div class="grow min-h-0 relative">
       <template v-for="fileTab in fileTabs" :key="`panel_${fileTab.file.path()}`">
         <div class="absolute inset-0 flex h-full" :class="{ 'invisible pointer-events-none': fileTab.file.path() !== activeFile }">
@@ -62,6 +93,8 @@
     <YesNoQuestionDialog :visible="questionVisible && !questionCancellable"
       :title="questionTitle"
       :question="questionText"
+      :yesLabel="questionYesLabel"
+      :noLabel="questionNoLabel"
       @update:visible="onQuestionVisibilityUpdated"
       @yes="onQuestionAnswered('yes')"
       @no="onQuestionAnswered('no')"
@@ -69,6 +102,8 @@
     <YesNoCancelQuestionDialog :visible="questionVisible && questionCancellable"
       :title="questionTitle"
       :question="questionText"
+      :yesLabel="questionYesLabel"
+      :noLabel="questionNoLabel"
       @update:visible="onQuestionVisibilityUpdated"
       @yes="onQuestionAnswered('yes')"
       @no="onQuestionAnswered('no')"
@@ -78,18 +113,22 @@
 </template>
 
 <script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem';
 import * as vue from 'vue';
 
 import type { IOpenCORExternalDataEvent, IOpenCORSimulationDataEvent } from '../../index';
 
 import * as common from '../common/common';
 import { electronApi } from '../common/electronApi';
+import { vHint } from '../common/hint';
 import * as locCommon from '../common/locCommon';
-import { type IFileEditor, useViewRegistry } from '../common/viewRegistry';
+import { type IFileEditor, useViewRegistry, ViewCategory } from '../common/viewRegistry';
+import * as vueCommon from '../common/vueCommon';
 import * as locApi from '../libopencor/locApi';
 
 import SimulationExperimentInteractiveView from './views/SimulationExperimentInteractiveView.vue';
 import UnsupportedFileTypeView from './views/UnsupportedFileTypeView.vue';
+import ContextMenuWidget from './widgets/ContextMenuWidget.vue';
 import { useOpenCORContext, useOpenCORKeyStroke } from './OpenCORContext';
 
 interface IFileTab {
@@ -99,15 +138,28 @@ interface IFileTab {
   fileHandle?: FileSystemFileHandle; // Only used in OpenCOR's Web app, to save a file where it is (see saveFile()).
 }
 
+withDefaults(
+  defineProps<{
+    recentFilePaths?: string[];
+  }>(),
+  {
+    recentFilePaths: () => []
+  }
+);
+
 const emit = defineEmits<{
   error: [message: string];
   fileClosed: [filePath: string, fileHandle?: FileSystemFileHandle];
   fileOpened: [filePath: string];
+  open: [];
   openFile: [fileFilePathOrFileContents: string];
+  openRecentFile: [filePath: string];
+  openLocation: [];
+  openSampleLorenz: [];
   simulationData: [];
 }>();
 
-const { simulationOnly } = useOpenCORContext();
+const { simulationOnly, uiEnabled } = useOpenCORContext();
 
 const viewRegistry = useViewRegistry();
 const simulationExperimentInteractiveViewRef = vue.ref<InstanceType<typeof SimulationExperimentInteractiveView> | null>(
@@ -139,6 +191,19 @@ const dragState = vue.ref<IDragState | null>(null);
 const fileTabBarRef = vue.shallowRef<HTMLElement | null>(null);
 const dropIndicatorLeft = vue.ref<number | null>(null);
 
+// Icon of a file tab, based on the type of its file.
+
+const fileTabIcon = (fileTab: IFileTab): string => {
+  switch (fileTab.file.type()) {
+    case locApi.EFileType.COMBINE_ARCHIVE:
+      return 'pi pi-box';
+    case locApi.EFileType.SEDML_FILE:
+      return 'pi pi-list';
+    default:
+      return 'pi pi-file';
+  }
+};
+
 const captureSimulationExperimentInteractiveViewRef = (element: unknown): void => {
   simulationExperimentInteractiveViewRef.value = element as InstanceType<
     typeof SimulationExperimentInteractiveView
@@ -168,7 +233,13 @@ const view = (fileTab: IFileTab): IView => {
       component: UnsupportedFileTypeView,
       props: {
         viewName: viewDescriptor.label,
-        viewCategory: viewDescriptor.category
+        viewCategory: viewDescriptor.category,
+        supportingViews: Object.values(ViewCategory)
+          .flatMap((viewCategory) => viewRegistry.descriptors(viewCategory))
+          .filter((descriptor) => viewRegistry.isApplicable(descriptor, fileTab.file)),
+        onSelectView: (viewId: string) => {
+          onSelectView(fileTab, viewId);
+        }
       }
     };
   }
@@ -206,7 +277,15 @@ const view = (fileTab: IFileTab): IView => {
   }
 };
 
+// Note: our contents are only inert while our UI is blocked and no dialog is shown (see OpenCOR.vue), so the buttons of
+//       our file tabs, of our view switchers, and of our Unsupported file type view may still get activated while our
+//       UI is not enabled, in which case we ignore them (as for our keyboard shortcuts, see useOpenCORKeyStroke()).
+
 const onSelectView = (fileTab: IFileTab, viewId: string): void => {
+  if (!uiEnabled.value) {
+    return;
+  }
+
   fileTab.activeViewId = viewId;
 };
 
@@ -310,9 +389,9 @@ const openFile = async (file: locApi.File, wait: boolean = false, fileHandle?: F
 
   // Select the file and let people know that it has been opened.
   // Note: we let people know before waiting for our file tabs to be updated (see selectFile()) since the file may get
-  //       closed in the meantime (e.g., using File|Close), in which case people would otherwise be told that it has been
-  //       opened after having been told that it has been closed (and, in the case of Electron, it wouldn't be listed in
-  //       our recent files).
+  //       closed in the meantime (e.g., using File|Close), in which case people would otherwise be told that it has
+  //       been opened after having been told that it has been closed (and, in the case of Electron, it wouldn't be
+  //       listed in our recent files).
 
   const fileSelected = selectFile(filePath, wait);
 
@@ -423,10 +502,165 @@ const closeAllFiles = async (): Promise<void> => {
   }
 };
 
+const closeOtherFiles = async (filePath: string): Promise<void> => {
+  // Select the given file and then close the other files (from a snapshot of our file paths, see closeAllFiles()).
+  // Note #1: the given file may have been closed in the meantime (e.g., using a keyboard shortcut while our file tab
+  //          context menu was shown), in which case we do nothing (rather than close all our files).
+  // Note #2: we stop as soon as the user cancels the closing of a (modified) file.
+
+  if (!findFileTab(filePath)) {
+    return;
+  }
+
+  await selectFile(filePath);
+
+  for (const otherFilePath of filePaths.value.filter((path) => path !== filePath)) {
+    if (!(await closeFile(otherFilePath))) {
+      return;
+    }
+  }
+};
+
+// Context menu of our file tabs.
+
+const fileTabContextMenuRef = vue.ref<InstanceType<typeof ContextMenuWidget> | null>(null);
+const fileTabContextMenuFilePath = vue.ref<string>('');
+const appendTarget = vueCommon.useAppendTarget(fileTabBarRef);
+
+const fileTabContextMenuItems = vue.computed<MenuItem[]>(() => {
+  const filePath = fileTabContextMenuFilePath.value;
+
+  return [
+    {
+      label: 'Close',
+      icon: 'pi pi-times',
+      command: () => {
+        void closeFile(filePath);
+      }
+    },
+    {
+      label: 'Close Others',
+      icon: 'pi pi-clone',
+      disabled: fileTabs.value.length < 2,
+      command: () => {
+        void closeOtherFiles(filePath);
+      }
+    },
+    {
+      label: 'Close All',
+      icon: 'pi pi-times-circle',
+      command: () => {
+        void closeAllFiles();
+      }
+    },
+    {
+      separator: true
+    },
+    {
+      label: 'Copy Path',
+      icon: 'pi pi-copy',
+      command: () => {
+        const canonicalPath = findFileTab(filePath)?.file.canonicalPath();
+
+        // Note: navigator.clipboard is undefined in an insecure context (e.g., if we are embedded in a page served over
+        //       HTTP), in which case calling navigator.clipboard.writeText() would throw synchronously, hence we call
+        //       it from an async function.
+
+        if (canonicalPath) {
+          (async () => {
+            await navigator.clipboard.writeText(canonicalPath);
+          })().catch((error: unknown) => {
+            emit(
+              'error',
+              `The path of the file could not be copied (${common.formatMessage(common.formatError(error), false)}).`
+            );
+          });
+        }
+      }
+    }
+  ];
+});
+
+// Close the given file when the close button of its file tab is clicked, unless our UI is not enabled (see
+// onSelectView()).
+
+const onCloseButtonClick = (filePath: string): void => {
+  if (uiEnabled.value) {
+    void closeFile(filePath);
+  }
+};
+
+// Show the context menu of the given file tab, unless our UI is not enabled.
+// Note: the context menu may also be shown using the keyboard (e.g., using Shift+F10 when the close button of a file
+//       tab has the keyboard focus), hence we check that our UI is enabled (see onSelectView()).
+
+const onFileTabContextMenu = (event: MouseEvent, filePath: string): void => {
+  if (!uiEnabled.value) {
+    return;
+  }
+
+  fileTabContextMenuFilePath.value = filePath;
+
+  fileTabContextMenuRef.value?.show(event);
+};
+
+// Hide the context menu of our file tabs, if shown, when our UI gets disabled (e.g., when a file is opened from outside
+// of OpenCOR while it is shown).
+// Note: our context menu is appended to our overlay container, which is not part of our contents, so it is not made
+//       inert while our UI is blocked (see OpenCOR.vue) and its commands could otherwise still be used (e.g., using the
+//       keyboard) while our UI is not enabled.
+
+vue.watch(uiEnabled, (enabled: boolean) => {
+  if (!enabled) {
+    fileTabContextMenuRef.value?.hide();
+  }
+});
+
+// Fade the edges of our file tab bar when some file tabs are hidden past them (since our file tab bar has no visible
+// scrollbar), so that the user can tell that there are more file tabs.
+
+const fileTabBarOverflow = vue.reactive({ left: false, right: false });
+
+const updateFileTabBarOverflow = (): void => {
+  const fileTabBar = fileTabBarRef.value;
+
+  if (!fileTabBar) {
+    return;
+  }
+
+  fileTabBarOverflow.left = fileTabBar.scrollLeft > 1;
+  fileTabBarOverflow.right = fileTabBar.scrollLeft + fileTabBar.clientWidth < fileTabBar.scrollWidth - 1;
+};
+
+// Note: we observe both our file tab bar and our file tabs (see setFileTabRef()), since the width of a file tab may
+//       change without the size of our file tab bar or the number of our file tabs changing (e.g., when a file is
+//       saved under a longer name).
+
+const fileTabBarResizeObserver = new ResizeObserver(updateFileTabBarOverflow);
+
+vue.onMounted(() => {
+  if (fileTabBarRef.value) {
+    fileTabBarResizeObserver.observe(fileTabBarRef.value);
+  }
+});
+
+vue.onUnmounted(() => {
+  fileTabBarResizeObserver.disconnect();
+});
+
+vue.watch(
+  () => fileTabs.value.length,
+  () => {
+    void vue.nextTick().then(updateFileTabBarOverflow);
+  }
+);
+
 // Ask the user a (yes/no or yes/no/cancel) question and return their answer.
-// Note: BaseDialog emits a cancel event whenever it gets hidden, including after the user has answered our question, so
-//       rather than relying on such an event, we rely on our dialogs' visibility being updated to know when the user
-//       has dismissed our question (e.g., using the Escape key), in which case we consider that they have cancelled it.
+// Note #1: our yes and no buttons are labelled with what they do (see YesNoQuestionDialog.vue).
+// Note #2: BaseDialog emits a cancel event whenever it gets hidden, including after the user has answered our question,
+//          so rather than relying on such an event, we rely on our dialogs' visibility being updated to know when the
+//          user has dismissed our question (e.g., using the Escape key), in which case we consider that they have
+//          cancelled it.
 
 type QuestionAnswer = 'yes' | 'no' | 'cancel';
 
@@ -434,9 +668,17 @@ const questionVisible = vue.ref<boolean>(false);
 const questionTitle = vue.ref<string>('');
 const questionText = vue.ref<string>('');
 const questionCancellable = vue.ref<boolean>(false);
+const questionYesLabel = vue.ref<string>('');
+const questionNoLabel = vue.ref<string>('');
 let questionAnswered: ((answer: QuestionAnswer) => void) | null = null;
 
-const askQuestion = (title: string, question: string, cancellable: boolean = false): Promise<QuestionAnswer> => {
+const askQuestion = (
+  title: string,
+  question: string,
+  yesLabel: string,
+  noLabel: string,
+  cancellable: boolean = false
+): Promise<QuestionAnswer> => {
   // Cancel the question that we are already asking, if any (e.g., if the user tries to quit OpenCOR while we are asking
   // them whether to save a file that they are closing), since we can only ask one question at a time.
 
@@ -447,6 +689,8 @@ const askQuestion = (title: string, question: string, cancellable: boolean = fal
     questionTitle.value = title;
     questionText.value = question;
     questionCancellable.value = cancellable;
+    questionYesLabel.value = yesLabel;
+    questionNoLabel.value = noLabel;
     questionVisible.value = true;
   });
 };
@@ -716,10 +960,10 @@ const doSaveFile = async (fileTab: IFileTab): Promise<SaveOutcome> => {
     return doSaveFileAs(fileTab);
   }
 
-  // Note: we make sure that we can write to the file before retrieving its contents since a Web browser only lets us ask
-  //       the user for permission to write to it while handling one of their actions (e.g., a menu item being clicked),
-  //       i.e. not too long after it. The file may get an editor in the meantime (see isModified()), hence we retrieve
-  //       its editor again.
+  // Note: we make sure that we can write to the file before retrieving its contents since a Web browser only lets us
+  //       ask the user for permission to write to it while handling one of their actions (e.g., a menu item being
+  //       clicked), i.e. not too long after it. The file may get an editor in the meantime (see isModified()), hence we
+  //       retrieve its editor again.
 
   let contents: Uint8Array;
 
@@ -865,7 +1109,9 @@ const saveFileTo = async (
     if (
       (await askQuestion(
         'Save As',
-        `${common.escapeHtml(common.fileName(otherFileTab.file.canonicalPath()))} is already open. Do you want to replace it?`
+        `${common.escapeHtml(common.fileName(otherFileTab.file.canonicalPath()))} is already open. Do you want to replace it?`,
+        'Replace',
+        'Cancel'
       )) !== 'yes'
     ) {
       return 'notSaved';
@@ -937,7 +1183,8 @@ const saveFileTo = async (
   //          Electron, the old file gets added to our list of recent files).
   // Note #4: the reference to our file tab's element is keyed by the path of its file (see setFileTabRef()), which is
   //          only retrieved when Vue lets us know that the element has been unmounted, i.e. once our file tab has been
-  //          renamed. So, the reference for the old path would never be removed, hence we remove it ourselves.
+  //          renamed. So, the reference for the old path would never be removed (and its element would never stop being
+  //          observed by our file tab bar resize observer), hence we remove it (and stop observing it) ourselves.
 
   let newContents = contents;
 
@@ -989,6 +1236,12 @@ const saveFileTo = async (
 
   locApi.fileManager.unmanage(oldFilePath);
 
+  const oldFileTabElement = fileTabRefs[oldFilePath];
+
+  if (oldFileTabElement) {
+    fileTabBarResizeObserver.unobserve(oldFileTabElement);
+  }
+
   delete fileTabRefs[oldFilePath];
 
   fileTab.file = newFile;
@@ -1057,7 +1310,7 @@ const askToSaveFile = async (
   let question = `${fileName} has been modified. Do you want to save it?`;
 
   for (;;) {
-    const answer = await askQuestion(title, question, true);
+    const answer = await askQuestion(title, question, 'Save', "Don't Save", true);
 
     if (answer === 'cancel') {
       return null;
@@ -1141,8 +1394,16 @@ const canSaveCurrentFileAs = (): boolean => {
 };
 
 const setFileTabRef = (filePath: string, element: HTMLElement | null): void => {
+  const oldElement = fileTabRefs[filePath];
+
+  if (oldElement && oldElement !== element) {
+    fileTabBarResizeObserver.unobserve(oldElement);
+  }
+
   if (element) {
     fileTabRefs[filePath] = element;
+
+    fileTabBarResizeObserver.observe(element);
   } else {
     // The file tab has been unmounted, so remove the reference to avoid keeping stale keys (and elements) around.
 
@@ -1454,84 +1715,249 @@ useOpenCORKeyStroke((event: KeyboardEvent) => {
     selectPreviousFile();
   }
 });
+
+// Show the name of the selected file, if any, in our window's title (or our browser tab's title), so that the user can
+// tell which file is selected when switching between windows (or browser tabs).
+// Note #1: we only do this if the title of our document is ours to change (i.e. if OpenCOR is not used as a library,
+//          see common.ownDocumentTitle()), and only for full OpenCOR (i.e. not in simulation-only mode).
+// Note #2: OpenCOR's window title is that of its renderer's document (since our main process doesn't override it).
+
+if (common.isDocumentTitleOwned() && !simulationOnly.value) {
+  const originalTitle = document.title;
+
+  vue.watchEffect(() => {
+    const activeFileTab = fileTabs.value.find((fileTab) => fileTab.file.path() === activeFile.value);
+
+    document.title = activeFileTab
+      ? `${common.fileName(activeFileTab.file.canonicalPath())} — ${originalTitle}`
+      : originalTitle;
+  });
+
+  vue.onUnmounted(() => {
+    document.title = originalTitle;
+  });
+}
 </script>
 
 <style scoped>
+/**
+ * File tab bar, which bottom border is drawn using an inset box shadow (rather than a border) so that the active file
+ * tab can be drawn over it and therefore look like it is part of the view below it.
+ */
+
+.file-tab-bar-container {
+  --file-tab-bar-background: var(--p-surface-50);
+
+  position: relative;
+}
+
+.opencor-dark-mode .file-tab-bar-container {
+  --file-tab-bar-background: var(--p-surface-950);
+}
+
+.file-tab-bar {
+  position: relative;
+  padding: 0.25rem 0.375rem 0;
+  background-color: var(--file-tab-bar-background);
+  box-shadow: inset 0 -1px 0 var(--p-content-border-color);
+  scrollbar-width: none;
+}
+
+.file-tab-bar::-webkit-scrollbar {
+  display: none;
+}
+
+/**
+ * Fades at the edges of the file tab bar, to indicate that there are more tabs available.
+ * Note: our fades stop just above the bottom border of our file tab bar, so that it doesn't look faded.
+ */
+
+.file-tab-bar-fade {
+  position: absolute;
+  top: 0;
+  bottom: 1px;
+  z-index: 2;
+  width: 2rem;
+  pointer-events: none;
+}
+
+.file-tab-bar-fade-left {
+  left: 0;
+  background: linear-gradient(to right, var(--file-tab-bar-background), transparent);
+}
+
+.file-tab-bar-fade-right {
+  right: 0;
+  background: linear-gradient(to left, var(--file-tab-bar-background), transparent);
+}
+
 .file-tab {
+  position: relative;
   display: flex;
-  gap: 0.5rem;
+  gap: 0.375rem;
   align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-right: 1px solid var(--p-content-border-color);
+  flex-shrink: 0;
+  max-width: 16rem;
+  height: 1.875rem;
+  padding: 0 0.375rem 0 0.75rem;
+  border: 1px solid transparent;
+  border-top-width: 2px;
+  border-bottom: none;
+  border-radius: 0.5rem 0.5rem 0 0;
   color: var(--p-text-muted-color);
+  font-size: 0.875rem;
   cursor: pointer;
   white-space: nowrap;
   user-select: none;
-  flex-shrink: 0;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
-.file-tab:first-of-type {
-  border-left: 1px solid var(--p-content-border-color);
+.file-tab:not(.file-tab-active):hover {
+  background-color: color-mix(in srgb, var(--p-text-color) 6%, transparent);
+  color: var(--p-text-color);
 }
 
-.file-tab:hover {
-  background-color: var(--p-content-hover-background) !important;
+/**
+ * Divider between two inactive file tabs, unless one of them is hovered.
+ */
+
+.file-tab:not(.file-tab-active) + .file-tab:not(.file-tab-active)::before {
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  left: -1px;
+  width: 1px;
+  background-color: var(--p-content-border-color);
+  content: "";
 }
 
-.file-tab .remove-button {
-  visibility: hidden;
+.file-tab:hover::before,
+.file-tab:hover + .file-tab::before {
+  opacity: 0;
 }
 
-.file-tab:hover .remove-button,
-.file-tab-active .remove-button {
-  visibility: visible;
+/**
+ * Active file tab, which top border is used as an accent (rather than, say, a pseudo-element on top of it) so that it
+ * follows the rounded corners of the file tab and blends into its side borders.
+ */
+
+.file-tab-active {
+  border-color: var(--p-content-border-color);
+  border-top-color: var(--p-primary-color);
+  background-color: var(--p-content-background);
+  color: var(--p-text-color);
 }
 
-.file-tab-active,
-.file-tab-active:hover {
-  background-color: var(--p-primary-color) !important;
-  color: var(--p-primary-contrast-color);
+.file-tab-icon {
+  font-size: 0.8125rem;
 }
 
-.file-tab-bar {
-  position: relative;
-  scrollbar-width: none;
+.file-tab-active .file-tab-icon {
+  color: var(--p-primary-color);
 }
 
-.file-tab-bar::-webkit-scrollbar {
-  display: none;
+.file-tab-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.file-tab-dragging {
-  opacity: 0.4;
+/**
+ * The end of a file tab, which shows our close button and, if our file is modified, a modified indicator. The modified
+ * indicator takes the place of our close button, except when our file tab is hovered (or our close button has the
+ * keyboard focus), so that our file can still be closed.
+ */
+
+.file-tab-end {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
 }
 
-.file-tab-drop-indicator {
+.file-tab-modified-indicator {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--p-primary-color);
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.5rem;
   pointer-events: none;
-  z-index: 10;
 }
 
-.modified-indicator {
-  font-size: 0.5rem;
+.file-tab:hover .file-tab-modified-indicator,
+.file-tab-end:has(.file-tab-close-button:focus-visible) .file-tab-modified-indicator {
+  visibility: hidden;
+}
+
+.file-tab-close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  border-radius: 0.25rem;
+  background-color: transparent;
+  color: inherit;
+  font-size: 0.625rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: background-color 0.15s ease;
 }
 
-.remove-button {
-  padding: 0.15rem;
-  font-size: 0.75rem;
+.file-tab:hover .file-tab-close-button,
+.file-tab-active:not(.file-tab-modified) .file-tab-close-button,
+.file-tab-close-button:focus-visible {
+  opacity: 1;
 }
 
-.remove-button:hover {
-  border-radius: var(--p-border-radius-sm);
-  background-color: var(--p-red-500);
-  color: var(--p-red-50);
+.file-tab-close-button:hover {
+  background-color: color-mix(in srgb, var(--p-text-color) 12%, transparent);
+  color: var(--p-text-color);
 }
 
-.opencor-dark-mode .remove-button:hover {
-  background-color: var(--p-red-400);
+.file-tab-close-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--p-primary-color);
+}
+
+/**
+ * Note: on a device without hover (e.g., a tablet), our close button couldn't be revealed before being tapped, yet it
+ *       would still be tappable (since it is only transparent), i.e. tapping the end of a file tab could close its file
+ *       without our close button ever being seen. So, we always show our close button and, if our file is modified,
+ *       our modified indicator next to it (rather than in its place).
+ */
+
+@media (hover: none) {
+  .file-tab-modified-indicator {
+    position: static;
+    width: 0.75rem;
+  }
+
+  .file-tab:hover .file-tab-modified-indicator,
+  .file-tab-end:has(.file-tab-close-button:focus-visible) .file-tab-modified-indicator {
+    visibility: visible;
+  }
+
+  .file-tab-close-button {
+    opacity: 1;
+  }
+}
+
+.file-tab-dragging {
+  opacity: 0.4;
+}
+
+.file-tab-drop-indicator {
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0;
+  width: 2px;
+  border-radius: 1px;
+  background-color: var(--p-primary-color);
+  pointer-events: none;
+  z-index: 10;
 }
 </style>
diff --git a/src/renderer/src/components/DragNDropComponent.vue b/src/renderer/src/components/DragNDropComponent.vue
index 6648f1b37..524e4c9cd 100644
--- a/src/renderer/src/components/DragNDropComponent.vue
+++ b/src/renderer/src/components/DragNDropComponent.vue
@@ -1,19 +1,152 @@
 <template>
-  <div class="absolute w-full h-full border-[0.375rem] border-dashed border-primary z-99999 highlight">
-    <div
-      class="message absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[1.5rem] leading-tight text-center rounded-2xl p-[0.5rem_1rem] bg-primary text-primary-contrast whitespace-nowrap"
-    >
-      Files can be dropped here.
+  <div class="drop-zone" @dragleave.self="emit('leave')">
+    <div class="drop-zone-frame">
+      <div class="drop-zone-message">
+        <div class="drop-zone-icon">
+          <i class="pi pi-upload" />
+        </div>
+        <div class="drop-zone-title">{{ title }}</div>
+        <div class="drop-zone-text">{{ text }}</div>
+      </div>
     </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import * as vue from 'vue';
+
+// The drop zone that is shown when some files are being dragged over OpenCOR.
+// Note #1: we cover the whole of OpenCOR, including any overlay that is open (e.g., a popover), and our contents ignore
+//          pointer events, so that we are normally the only target of drag events (see the drag and drop section in
+//          OpenCOR.vue), which means that we normally only get left when the files being dragged leave OpenCOR or when
+//          the drag gets cancelled.
+// Note #2: the number of files being dragged may not be known (e.g., some browsers don't tell us until the files are
+//          dropped), in which case it is zero and we show a generic message.
+
+const props = defineProps<{
+  fileCount: number;
+}>();
+
+const emit = defineEmits<{
+  leave: [];
+}>();
+
+const title = vue.computed<string>(() => {
+  if (props.fileCount === 1) {
+    return 'Drop the file to open it';
+  }
+
+  if (props.fileCount > 1) {
+    return `Drop the ${props.fileCount} files to open them`;
+  }
+
+  return 'Drop the files to open them';
+});
+
+const text = vue.computed<string>(() => {
+  return props.fileCount === 1 ? 'It will be opened in a new tab.' : 'Each file will be opened in its own tab.';
+});
+</script>
+
 <style scoped>
-.highlight {
-  background-color: color-mix(in srgb, var(--p-primary-color) 7%, transparent);
+/**
+ * Note #1: we may be shown in a small container (e.g., when OpenCOR is embedded in a page alongside other OpenCOR
+ *          instances), so we adapt our frame and our message to our size, i.e. we are our own size container. Since a
+ *          container query cannot style its container, the space around our frame comes from our frame being inset
+ *          (which our container query can reduce) rather than from our padding.
+ * Note #2: we are above our overlay container (which has a z-index of 99999, see vueCommon.ts), so that we also cover
+ *          any overlay that is open (e.g., a popover or a context menu).
+ */
+
+.drop-zone {
+  position: absolute;
+  inset: 0;
+  z-index: 100000;
+  background-color: color-mix(in srgb, var(--p-content-background) 70%, transparent);
+  backdrop-filter: blur(2px);
+  container-type: size;
+}
+
+.drop-zone-frame {
+  position: absolute;
+  inset: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 2px dashed var(--p-primary-color);
+  border-radius: 0.75rem;
+  background-color: color-mix(in srgb, var(--p-primary-color) 6%, transparent);
+  pointer-events: none;
+}
+
+.drop-zone-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+.drop-zone-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
+  color: var(--p-primary-color);
 }
 
-.message {
-  box-shadow: 0 0 0.75rem 0.375rem var(--p-content-border-color);
+.drop-zone-icon .pi {
+  font-size: 1.25rem;
+}
+
+.drop-zone-title {
+  color: var(--p-text-color);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.drop-zone-text {
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+}
+
+/**
+ * Adapt our message to the size of our container.
+ */
+
+@container (height < 12rem) {
+  .drop-zone-icon {
+    display: none;
+  }
+}
+
+@container (height < 6rem) {
+  .drop-zone-frame {
+    inset: 0.25rem;
+  }
+
+  .drop-zone-message {
+    padding: 0.25rem 0.5rem;
+  }
+
+  .drop-zone-text {
+    display: none;
+  }
+}
+
+@container (width < 20rem) {
+  .drop-zone-title {
+    font-size: 0.875rem;
+  }
+
+  .drop-zone-text {
+    display: none;
+  }
 }
 </style>
diff --git a/src/renderer/src/components/MainMenu.vue b/src/renderer/src/components/MainMenu.vue
index 86775a0a1..c1dd163c6 100644
--- a/src/renderer/src/components/MainMenu.vue
+++ b/src/renderer/src/components/MainMenu.vue
@@ -1,31 +1,23 @@
 <template>
   <Menubar ref="menuBarRef" :id="props.id" :model="items">
-    <template #item="{ item, props }">
+    <template #item="{ item, props, root }">
       <a v-bind="props.action">
+        <i v-if="!root" :class="item.icon" class="menu-item-icon shrink-0" />
         <div class="p-menubar-item-label">{{ item.label }}</div>
-        <svg
-          v-if="item.items"
-          width="14"
-          height="14"
-          viewBox="0 0 14 14"
-          class="ml-auto p-icon p-menubar-submenu-icon"
-        >
-          <path
-            d="M5.25 11.1728C5.14929 11.1694 5.05033 11.1455 4.9592 11.1025C4.86806 11.0595 4.78666 10.9984 4.72 10.9228C4.57955 10.7822 4.50066 10.5916 4.50066 10.3928C4.50066 10.1941 4.57955 10.0035 4.72 9.86283L7.72 6.86283L4.72 3.86283C4.66067 3.71882 4.64765 3.55991 4.68275 3.40816C4.71785 3.25642 4.79932 3.11936 4.91585 3.01602C5.03238 2.91268 5.17819 2.84819 5.33305 2.83149C5.4879 2.81479 5.64411 2.84671 5.78 2.92283L9.28 6.42283C9.42045 6.56346 9.49934 6.75408 9.49934 6.95283C9.49934 7.15158 9.42045 7.34221 9.28 7.48283L5.78 10.9228C5.71333 10.9984 5.63193 11.0595 5.5408 11.1025C5.44966 11.1455 5.35071 11.1694 5.25 11.1728Z"
-            fill="currentColor"
-          />
-        </svg>
-        <div v-if="item.shortcut" class="ml-auto border rounded shortcut text-xs/3">
+        <i v-if="item.external" class="menu-item-external ml-auto pl-6 pi pi-external-link" />
+        <div v-if="item.shortcut" class="shortcut ml-auto pl-6 whitespace-nowrap">
           {{ item.shortcut }}
         </div>
+        <i v-if="item.items && !root" class="menu-item-chevron ml-auto pl-6 pi pi-angle-right" />
       </a>
     </template>
     <template #end>
-      <button v-if="updateAvailable" class="update-link absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center whitespace-nowrap px-1.5 py-0.5 text-xs cursor-pointer rounded-full transition-colors duration-150"
+      <button v-if="updateAvailable" class="update-link absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-1.5 whitespace-nowrap px-2.5 py-0.5 text-xs cursor-pointer rounded-full transition-colors duration-150"
         type="button"
         @click="emit('updateAvailable')"
       >
-        New version available!
+        <i class="pi pi-arrow-circle-up text-xs" />
+        New version available
       </button>
       <ThemeWidget v-if="themeCanBeChanged" :theme="theme.theme()" @switch="onThemeSwitch" />
     </template>
@@ -61,7 +53,7 @@ const emit = defineEmits<{
   closeAll: [];
   download: [];
   open: [];
-  openRemote: [];
+  openLocation: [];
   openSampleLorenz: [];
   reopen: [filePath: string];
   save: [];
@@ -109,23 +101,27 @@ const items = vue.computed(() => [
     items: [
       {
         label: 'Open...',
+        icon: 'pi pi-folder-open',
         shortcut: isWindowsOrLinux ? 'Ctrl+Alt+O' : isMacOs ? '⌘⌥O' : undefined,
         command: () => {
           emit('open');
         }
       },
       {
-        label: 'Open Remote...',
+        label: 'Open Location...',
+        icon: 'pi pi-link',
         shortcut: isWindowsOrLinux ? 'Ctrl+Shift+Alt+O' : isMacOs ? '⇧⌘⌥O' : undefined,
         command: () => {
-          emit('openRemote');
+          emit('openLocation');
         }
       },
       {
         label: 'Open Sample',
+        icon: 'pi pi-book',
         items: [
           {
             label: 'Lorenz',
+            icon: 'pi pi-file',
             command: () => {
               emit('openSampleLorenz');
             }
@@ -135,9 +131,11 @@ const items = vue.computed(() => [
       { separator: true },
       {
         label: 'Reopen',
+        icon: 'pi pi-replay',
         items: [
           {
             label: 'Most Recent',
+            icon: 'pi pi-clock',
             shortcut: isWindowsOrLinux ? 'Ctrl+Shift+Alt+T' : isMacOs ? '⇧⌘⌥T' : undefined,
             command: reopenMostRecentFile,
             disabled: () => !props.recentFilePaths.length
@@ -148,6 +146,7 @@ const items = vue.computed(() => [
                 ...props.recentFilePaths.map((filePath: string) => {
                   return {
                     label: filePath,
+                    icon: 'pi pi-file',
                     command: () => {
                       emit('reopen', filePath);
                     }
@@ -158,6 +157,7 @@ const items = vue.computed(() => [
           { separator: true },
           {
             label: 'Clear Menu',
+            icon: 'pi pi-trash',
             command: () => {
               emit('clearRecentFiles');
             },
@@ -171,6 +171,7 @@ const items = vue.computed(() => [
         ? [
             {
               label: 'Save',
+              icon: 'pi pi-save',
               shortcut: isWindowsOrLinux ? 'Ctrl+Alt+S' : isMacOs ? '⌘⌥S' : undefined,
               command: () => {
                 emit('save');
@@ -179,6 +180,7 @@ const items = vue.computed(() => [
             },
             {
               label: 'Save As...',
+              icon: 'pi pi-file-export',
               shortcut: isWindowsOrLinux ? 'Ctrl+Shift+Alt+S' : isMacOs ? '⇧⌘⌥S' : undefined,
               command: () => {
                 emit('saveAs');
@@ -189,6 +191,7 @@ const items = vue.computed(() => [
         : [
             {
               label: 'Download',
+              icon: 'pi pi-download',
               shortcut: isWindowsOrLinux ? 'Ctrl+Alt+S' : isMacOs ? '⌘⌥S' : undefined,
               command: () => {
                 emit('download');
@@ -199,6 +202,7 @@ const items = vue.computed(() => [
       { separator: true },
       {
         label: 'Close',
+        icon: 'pi pi-times',
         shortcut: isWindowsOrLinux ? 'Ctrl+Alt+W' : isMacOs ? '⌘⌥W' : undefined,
         command: () => {
           emit('close');
@@ -207,6 +211,7 @@ const items = vue.computed(() => [
       },
       {
         label: 'Close All',
+        icon: 'pi pi-times-circle',
         command: () => {
           emit('closeAll');
         },
@@ -220,6 +225,7 @@ const items = vue.computed(() => [
     items: [
       {
         label: 'Settings...',
+        icon: 'pi pi-cog',
         shortcut: isWindowsOrLinux ? 'Ctrl+Alt+,' : isMacOs ? '⌘⌥,' : undefined,
         command: () => {
           emit('settings');
@@ -233,6 +239,8 @@ const items = vue.computed(() => [
     items: [
       {
         label: 'Home Page',
+        icon: 'pi pi-home',
+        external: true,
         command: () => {
           window.open('https://opencor.ws/');
         }
@@ -240,6 +248,7 @@ const items = vue.computed(() => [
       { separator: true },
       {
         label: 'Changelog',
+        icon: 'pi pi-history',
         command: () => {
           emit('changelog');
         }
@@ -247,6 +256,8 @@ const items = vue.computed(() => [
       { separator: true },
       {
         label: 'Report Issue',
+        icon: 'pi pi-github',
+        external: true,
         command: () => {
           window.open('https://github.com/opencor/webapp/issues/new');
         }
@@ -254,6 +265,7 @@ const items = vue.computed(() => [
       { separator: true },
       {
         label: 'About OpenCOR',
+        icon: 'pi pi-info-circle',
         command: () => {
           emit('about');
         }
@@ -315,7 +327,7 @@ useOpenCORKeyStroke((event: KeyboardEvent) => {
   } else if (common.isCtrlOrCmd(event) && event.shiftKey && event.altKey && event.code === 'KeyO') {
     event.preventDefault();
 
-    emit('openRemote');
+    emit('openLocation');
   } else if (common.isCtrlOrCmd(event) && event.shiftKey && event.altKey && event.code === 'KeyT') {
     event.preventDefault();
 
@@ -369,74 +381,105 @@ useOpenCORKeyStroke((event: KeyboardEvent) => {
 
 <style scoped>
 .p-menubar {
+  --p-menubar-padding: 0.125rem 0.25rem;
+  --p-menubar-base-item-padding: 0.25rem 0.5rem;
+  --p-menubar-item-padding: 0.375rem 0.5rem;
+  --p-menubar-submenu-padding: 0.25rem;
+  --p-menubar-submenu-border-radius: 0.5rem;
+  --p-menubar-submenu-shadow: var(--opencor-overlay-shadow);
+
   position: relative;
-  padding: 0.1rem;
   border: none;
   border-radius: 0;
   border-bottom: 1px solid var(--border-color);
+  font-size: 0.875rem;
 }
 
-.p-menubar
-  > :deep(.p-menubar-root-list)
-  > .p-menubar-item
-  > .p-menubar-item-content
-  > .p-menubar-item-link
-  .p-menubar-submenu-icon {
-  display: none;
+:deep(.p-menubar-root-list) {
+  gap: 0.125rem;
 }
 
-:deep(.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link) {
-  transition: background-color 0.15s ease;
-  border-radius: var(--p-menubar-item-border-radius);
+:deep(.p-menubar-item-link) {
+  color: var(--p-menubar-item-color);
 }
 
-:deep(.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link:hover) {
-  background-color: var(--p-content-hover-background);
+/**
+ * Only highlight a root item when it is hovered, when its submenu is shown, or when it has the keyboard focus, i.e. not
+ * when it has the focus as a result of a mouse click (which would otherwise leave it highlighted after a menu item has
+ * been selected).
+ */
+
+:deep(
+  .p-menubar-root-list:not(:focus-visible)
+    > .p-menubar-item.p-focus:not(.p-menubar-item-active)
+    > .p-menubar-item-content:not(:hover)
+) {
+  background-color: transparent;
+  color: var(--p-menubar-item-color);
 }
 
-:deep(.p-menubar-submenu .p-menubar-item-link:hover:not(:has(.p-menubar-submenu))) {
-  border-radius: var(--p-menubar-item-border-radius);
-  background-color: var(--p-primary-color);
-  color: var(--p-primary-contrast-color);
+/**
+ * Submenus, which are slightly detached from their parent item.
+ */
+
+:deep(.p-menubar-submenu) {
+  min-width: 14rem;
+  z-index: 99;
 }
 
-:deep(.p-menubar-submenu .p-menubar-item-link:hover:not(:has(.p-menubar-submenu)) .shortcut) {
-  border-color: var(--p-primary-contrast-color);
-  background-color: var(--p-primary-color);
-  color: var(--p-primary-contrast-color);
+:deep(.p-menubar-root-list > .p-menubar-item > .p-menubar-submenu) {
+  margin-top: 0.25rem;
 }
 
-:deep(.p-menubar-submenu .p-menubar-item-link:hover:not(:has(.p-menubar-submenu)) > .p-menubar-submenu-icon) {
-  color: var(--p-primary-contrast-color) !important;
+:deep(.p-menubar-submenu .p-menubar-submenu) {
+  margin-top: calc(-1 * var(--p-menubar-submenu-padding) - 1px);
+  margin-left: 0.25rem;
 }
 
-.p-menubar-item-link {
-  padding: 0.25rem 0.5rem !important;
-  color: var(--p-menubar-item-color);
+:deep(.p-menubar-separator) {
+  margin: 0.125rem 0.5rem;
 }
 
-:deep(.p-menubar-root-list) {
-  gap: 0.1rem;
+.menu-item-icon {
+  width: 1rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  text-align: center;
 }
 
-:deep(.p-menubar-submenu) {
-  padding: 0.1rem;
-  z-index: 99;
+.menu-item-external {
+  color: var(--p-text-muted-color);
+  font-size: 0.625rem;
+  opacity: 0.7;
+}
+
+.menu-item-chevron {
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
 }
 
 .shortcut {
-  border-color: var(--p-content-border-color);
-  background-color: var(--p-content-hover-background);
   color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.05em;
+}
+
+:deep(.p-menubar-item.p-focus) > .p-menubar-item-content .menu-item-icon,
+:deep(.p-menubar-item-active) > .p-menubar-item-content .menu-item-icon,
+:deep(.p-menubar-item.p-focus) > .p-menubar-item-content .menu-item-chevron,
+:deep(.p-menubar-item-active) > .p-menubar-item-content .menu-item-chevron {
+  color: var(--p-text-color);
 }
 
 .update-link {
+  background-color: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
   color: var(--p-primary-color);
   font-weight: 500;
   font-size: 0.6875rem;
 }
 
 .update-link:hover {
-  background-color: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
+  background-color: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
 }
 </style>
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index 537fe7561..ad267bb4a 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -9,27 +9,23 @@
   >
     <Toast :id="toastId" :class="compIsActiveApp ? 'visible' : 'invisible'"
       :group="toastId"
-      :pt:root:style="{ position: 'absolute' }"
-    />
+      :pt="TOAST_PT"
+      :onMouseEnter="onToastHover"
+      :onMouseLeave="onToastHover"
+    >
+      <template #container="{ message, closeCallback }">
+        <ToastMessageWidget :message="message" @close="closeCallback" />
+      </template>
+    </Toast>
     <BackgroundComponent v-show="compBackgroundVisible" />
     <IssuesView v-if="compIssues.length" class="m-4" style="height: calc(100% - 2rem);" :issues="compIssues" />
     <div v-else class="h-full flex flex-col"
       @dragenter="onDragEnter"
-      @dragover.prevent
+      @dragover="onDragOver"
       @drop.prevent="onDrop"
-      @dragleave="onDragLeave"
     >
       <input ref="filesRef" type="file" multiple style="display: none;" @change="onChange" />
-      <Transition
-        enter-active-class="transition-opacity duration-200"
-        leave-active-class="transition-opacity duration-200"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <DragNDropComponent v-if="dragAndDropCounter" />
-      </Transition>
+      <DragNDropComponent v-if="dragAndDropVisible" :fileCount="dragAndDropFileCount" @leave="dragAndDropVisible = false" />
       <MainMenu ref="mainMenuRef" v-if="isFullWebApp"
         :hasFiles="hasFiles"
         :canSave="canSave"
@@ -38,7 +34,7 @@
         @about="onAboutMenu"
         @changelog="onChangelogMenu"
         @open="onOpenMenu"
-        @openRemote="onOpenRemoteMenu"
+        @openLocation="onOpenLocationMenu"
         @openSampleLorenz="onOpenSampleLorenzMenu"
         @reopen="onReopenMenu"
         @clearRecentFiles="onClearRecentFilesMenu"
@@ -57,8 +53,11 @@
         </div>
         <YesNoQuestionDialog
           v-model:visible="disconnectFromGitHubVisible"
-          title="Disconnect from GitHub..."
-          question="You are about to disconnect from GitHub. Do you want to proceed?"
+          title="Disconnect from GitHub"
+          question="You are about to disconnect from GitHub. Do you want to continue?"
+          severity="danger"
+          yesLabel="Disconnect"
+          noLabel="Cancel"
           @yes="onDisconnectFromGitHub"
           @no="disconnectFromGitHubVisible = false"
         />
@@ -68,16 +67,22 @@
         @error="onError"
         @fileClosed="onFileClosed"
         @fileOpened="onFileOpened"
+        :recentFilePaths="startScreenRecentFilePaths"
+        @open="onStartScreenOpen"
         @openFile="openFile"
+        @openRecentFile="onStartScreenOpenRecentFile"
+        @openLocation="onStartScreenOpenLocation"
+        @openSampleLorenz="onStartScreenOpenSampleLorenz"
         @simulationData="emitSimulationData"
       />
-      <BlockingMessageComponent v-show="initialisingOpencorMessageVisible" message="Initialising OpenCOR..." :progress="initialisation.progress.value" />
-      <BlockingMessageComponent v-if="loadingModelMessageVisible" message="Loading model..." />
-      <BlockingMessageComponent v-show="loadingExternalDataVisible" message="Loading external data..." />
-      <BlockingMessageComponent v-show="opencorMessageVisible" :message="opencorMessageMessage" :progress="opencorMessageProgress" />
+      <BlockingMessageComponent class="app-blocking-message initialising-opencor-message" v-show="initialisingOpencorMessageVisible" message="Initialising OpenCOR..." :progress="initialisation.progress.value" />
+      <BlockingMessageComponent class="app-blocking-message" v-if="loadingModelMessageVisible" message="Loading model..." />
+      <BlockingMessageComponent class="app-blocking-message" v-show="loadingExternalDataVisible" message="Loading external data..." />
+      <BlockingMessageComponent class="app-blocking-message" v-show="opencorMessageVisible" :message="opencorMessageMessage" :progress="opencorMessageProgress" />
       <OkMessageDialog v-model:visible="updateErrorVisible"
         :title="updateErrorTitle"
         :message="updateErrorIssue"
+        severity="danger"
         @ok="onUpdateErrorDialogClose"
       />
       <UpdateAvailableDialog v-model:visible="updateAvailableVisible"
@@ -88,24 +93,31 @@
         @close="updateAvailableVisible = false"
       />
       <UpdateDownloadProgressDialog v-model:visible="updateDownloadProgressVisible"
+        :version="updateVersion"
         :percent="updateDownloadPercent"
+        :transferred="updateDownloadTransferred"
+        :total="updateDownloadTotal"
+        :installing="updateInstalling"
       />
       <OkMessageDialog v-model:visible="updateNotAvailableVisible"
-        title="Check for Updates..."
-        message="No updates are available at this time."
+        title="Check for Updates"
+        message="You are using the latest version of OpenCOR."
+        severity="success"
         @ok="updateNotAvailableVisible = false"
       />
-      <OpenRemoteDialog v-model:visible="openRemoteVisible"
-        @openRemote="onOpenRemote"
-        @close="openRemoteVisible = false"
+      <OpenLocationDialog v-model:visible="openLocationVisible"
+        @openLocation="onOpenLocation"
+        @close="openLocationVisible = false"
       />
       <SettingsDialog v-model:visible="settingsVisible"
         @close="settingsVisible = false"
       />
       <YesNoQuestionDialog v-model:visible="resetAllVisible"
-        title="Reset All..."
-        question="You are about to reset all of your settings. Do you want to proceed?"
+        title="Reset All"
+        question="All of your settings will be reset and OpenCOR will restart. Do you want to continue?"
         severity="danger"
+        yesLabel="Reset All"
+        noLabel="Cancel"
         @yes="onResetAll"
         @no="resetAllVisible = false"
       />
@@ -460,6 +472,78 @@ const compUiEnabled = vue.computed<boolean>(() => {
   return !compBlockUiEnabled.value && !isDialogActive.value && !userInputBlocked.value;
 });
 
+// Make our main menu and our contents inert while our UI is blocked, so that they cannot be reached using the keyboard
+// (e.g., using Tab) since our BlockUI's overlay only blocks the mouse.
+// Note #1: our blocking messages are not made inert since they must remain visible to assistive technologies (so that
+//          they can get announced, see BlockingMessageComponent.vue), but they cannot be interacted with anyway.
+// Note #2: a dialog may be shown while our UI is blocked, in which case our main menu and our contents are not inert
+//          since a dialog may be rendered within our contents (see BaseDialog.vue) and the descendants of an inert
+//          element cannot be interacted with. A dialog is modal, so it keeps the keyboard focus within itself anyway.
+// Note #3: a dialog gets focused as soon as it is shown, i.e. before Vue would update the DOM, so we make our main menu
+//          and our contents inert (or not) synchronously (and therefore not through our template).
+// Note #4: an element that gets inert loses the keyboard focus, so we give it back to the element that had it before
+//          our UI got blocked (if that element is still there and visible, and the keyboard focus hasn't gone somewhere
+//          else in the meantime) once our UI is unblocked, unless a dialog is shown (since it then has the keyboard
+//          focus).
+
+let elementFocusedBeforeUiBlocked: HTMLElement | null = null;
+
+const inertElements = (): HTMLElement[] => {
+  return [mainMenuRef.value?.$el, contentsRef.value?.$el].filter((element): element is HTMLElement => {
+    return element instanceof HTMLElement;
+  });
+};
+
+const restoreFocusAfterUiUnblocked = async (element: HTMLElement): Promise<void> => {
+  await vue.nextTick();
+
+  const activeElement = document.activeElement;
+
+  if (
+    (!activeElement || activeElement === document.body) &&
+    element.isConnected &&
+    element.getClientRects().length > 0 &&
+    !element.matches(':disabled')
+  ) {
+    element.focus();
+  }
+};
+
+const updateInertElements = (): void => {
+  const elements = inertElements();
+  const inert = compBlockUiEnabled.value && !isDialogActive.value;
+
+  if (inert) {
+    const activeElement = document.activeElement;
+
+    if (
+      !elementFocusedBeforeUiBlocked &&
+      activeElement instanceof HTMLElement &&
+      elements.some((element: HTMLElement) => element.contains(activeElement))
+    ) {
+      elementFocusedBeforeUiBlocked = activeElement;
+    }
+  }
+
+  for (const element of elements) {
+    element.inert = inert;
+  }
+
+  if (!compBlockUiEnabled.value) {
+    const element = elementFocusedBeforeUiBlocked;
+
+    elementFocusedBeforeUiBlocked = null;
+
+    if (element && !isDialogActive.value) {
+      void restoreFocusAfterUiUnblocked(element);
+    }
+  }
+};
+
+vue.watch([compBlockUiEnabled, isDialogActive], updateInertElements, { flush: 'sync' });
+
+vue.onMounted(updateInertElements);
+
 // Enable/disable our main menu (in OpenCOR) whenever our UI gets enabled/disabled.
 // Note: our main menu must not be usable while our UI is blocked (e.g., while a remote model is being loaded) or while
 //       a dialog is open. Local files, however, don't block our UI while they are being opened, so a local file may get
@@ -572,6 +656,28 @@ const addToast = (options: Parameters<typeof toast.add>[0]) => {
 
 provideOpenCORToast(addToast);
 
+// Note: PrimeVue only pauses the life of a toast while it is hovered if it has some mouse enter and leave handlers, so
+//       we give it some (that don't need to do anything), so that the user has time to read a toast that they hover.
+
+const onToastHover = (): void => {};
+
+// Our toasts are positioned within OpenCOR (rather than within the page) and shown/hidden without any animation, and
+// their messages are rendered by ToastMessageWidget.vue, hence we remove the styling of PrimeVue's messages.
+// Note: we must use a pt object (rather than some pt: attributes) since PrimeVue's Toast component only passes its pt
+//       object to its messages.
+
+const TOAST_PT = {
+  root: {
+    style: { position: 'absolute', top: '0.75rem', right: '0.75rem', width: 'min(24rem, calc(100% - 1.5rem))' }
+  },
+  message: {
+    style: { margin: '0 0 0.5rem', border: 'none', background: 'none', boxShadow: 'none', backdropFilter: 'none' }
+  },
+  transition: {
+    css: false
+  }
+};
+
 // Finish initialising OpenCOR.
 
 let postInitialisationDone = false;
@@ -867,6 +973,64 @@ if (!electronApi) {
   });
 }
 
+// Remove the keyboard focus when the user presses the Escape key, so that whatever has it no longer looks focused
+// (e.g., with a focus ring), unless something is open (e.g., a menu or a popover), in which case the Escape key is for
+// closing it.
+// Note #1: we only do this for our instance of OpenCOR, and only if it is active and its UI is enabled (i.e. our UI is
+//          neither blocked nor showing a dialog, see compUiEnabled).
+// Note #2: we listen to the Escape key during the capture phase of our window, i.e. before PrimeVue components get it,
+//          since some of them (e.g., a select) stop its propagation even when they have nothing to close.
+// Note #3: a text entry (e.g., the input of an input widget or the range editor of a graph panel) and CellDL Editor may
+//          use the Escape key themselves (e.g., to discard a value being edited or to cancel what the user is doing),
+//          so we leave the keyboard focus alone if it is within one of them. Otherwise, blurring a text entry could,
+//          for instance, commit the value being edited rather than discard it.
+// Note #4: an open element may have a fixed position (in which case its offsetParent is null), so we check whether it
+//          is rendered using its client rects.
+
+const ESCAPE_KEY_OPEN_ELEMENTS = '.p-popover, .p-select-overlay, .p-contextmenu, .p-menubar-submenu';
+const ESCAPE_KEY_TEXT_ENTRIES =
+  'textarea, input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="radio"], [type="range"], [type="reset"], [type="submit"])';
+
+const onEscapeKeyDown = (event: KeyboardEvent): void => {
+  if (
+    event.key !== 'Escape' ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    !compIsActiveApp.value ||
+    !compUiEnabled.value
+  ) {
+    return;
+  }
+
+  const root = (safeBlockUiRef.value as unknown as { $el?: HTMLElement } | null)?.$el;
+  const focusedElement = document.activeElement;
+
+  if (
+    !root ||
+    !(focusedElement instanceof HTMLElement) ||
+    !root.contains(focusedElement) ||
+    !focusedElement.matches(':focus-visible') ||
+    focusedElement.isContentEditable ||
+    focusedElement.matches(ESCAPE_KEY_TEXT_ENTRIES) ||
+    focusedElement.closest('.celldl-editor-container') ||
+    Array.from(root.querySelectorAll<HTMLElement>(ESCAPE_KEY_OPEN_ELEMENTS)).some(
+      (element) => element.getClientRects().length
+    )
+  ) {
+    return;
+  }
+
+  focusedElement.blur();
+};
+
+window.addEventListener('keydown', onEscapeKeyDown, { capture: true });
+
+trackCleanup(() => {
+  window.removeEventListener('keydown', onEscapeKeyDown, { capture: true });
+});
+
 // Auto update.
 
 trackCleanup(
@@ -885,7 +1049,7 @@ const onUpdateErrorDialogClose = (): void => {
 };
 
 // Note: our update available dialog is used by both OpenCOR (when our main process lets us know that an update is
-//       available) and OpenCOR's Web app (when the user clicks on our main menu's "New version available!" button, see
+//       available) and OpenCOR's Web app (when the user clicks on our main menu's "New version available" button, see
 //       onUpdateAvailable() below). We keep track of the version to update to, so that it doesn't change while our
 //       dialog is shown (e.g., if an even newer version of OpenCOR's Web app gets released in the meantime), which
 //       means that it always matches the changes that our dialog lists.
@@ -894,6 +1058,9 @@ const updateAvailableVisible = vue.ref<boolean>(false);
 const updateDownloadProgressVisible = vue.ref<boolean>(false);
 const updateVersion = vue.ref<string>('');
 const updateDownloadPercent = vue.ref<number>(0);
+const updateDownloadTransferred = vue.ref<number>(0);
+const updateDownloadTotal = vue.ref<number>(0);
+const updateInstalling = vue.ref<boolean>(false);
 
 trackCleanup(
   electronApi?.onUpdateAvailable((version: string) => {
@@ -904,6 +1071,9 @@ trackCleanup(
 
 const onDownloadAndInstall = (): void => {
   updateDownloadPercent.value = 0; // Just to be on the safe side.
+  updateDownloadTransferred.value = 0;
+  updateDownloadTotal.value = 0;
+  updateInstalling.value = false;
   updateDownloadProgressVisible.value = true;
   updateAvailableVisible.value = false;
 
@@ -912,7 +1082,11 @@ const onDownloadAndInstall = (): void => {
 
 trackCleanup(
   electronApi?.onUpdateDownloadError((issue: string) => {
-    updateErrorTitle.value = 'Downloading Update...';
+    // Note: our update download progress dialog can't be closed by the user, so we must close it ourselves.
+
+    updateDownloadProgressVisible.value = false;
+
+    updateErrorTitle.value = 'Downloading Update';
     updateErrorIssue.value = `An error occurred while downloading the update (${common.formatMessage(issue, false)}).`;
     updateErrorVisible.value = true;
   })
@@ -921,8 +1095,10 @@ trackCleanup(
 trackCleanup(
   electronApi?.onUpdateInstallError((issue: string) => {
     userInputBlocked.value = false;
+    updateInstalling.value = false;
+    updateDownloadProgressVisible.value = false;
 
-    updateErrorTitle.value = 'Installing Update...';
+    updateErrorTitle.value = 'Installing Update';
     updateErrorIssue.value = `An error occurred while installing the update (${common.formatMessage(issue, false)}).`;
     updateErrorVisible.value = true;
   })
@@ -933,15 +1109,20 @@ trackCleanup(
 //       MainWindow.ts).
 
 trackCleanup(
-  electronApi?.onUpdateDownloadProgress((percent: number) => {
+  electronApi?.onUpdateDownloadProgress((percent: number, transferred: number, total: number) => {
     updateDownloadPercent.value = percent;
+    updateDownloadTransferred.value = transferred;
+    updateDownloadTotal.value = total;
     updateDownloadProgressVisible.value = true;
   })
 );
 
 trackCleanup(
   electronApi?.onUpdateDownloaded(async () => {
-    updateDownloadPercent.value = 100; // Just to be on the safe side.
+    // Just to be on the safe side, since the last download progress we were told about may not be for 100%.
+
+    updateDownloadPercent.value = 100;
+    updateDownloadTransferred.value = updateDownloadTotal.value;
 
     // Installing the update restarts OpenCOR, so ask the user whether to save the files that have been modified first.
     // If the user cancels, then the update will be installed when OpenCOR gets quit (see autoInstallOnAppQuit in
@@ -949,9 +1130,11 @@ trackCleanup(
 
     if ((await saveModifiedFiles('Install Update')) !== null) {
       userInputBlocked.value = true;
+      updateInstalling.value = true;
 
       if (!(await electronApi?.installUpdateAndRestart())) {
         userInputBlocked.value = false;
+        updateInstalling.value = false;
         updateDownloadProgressVisible.value = false;
       }
     } else {
@@ -960,6 +1143,20 @@ trackCleanup(
   })
 );
 
+// Note: we are told that an update is being installed if we have been reloaded (e.g., after a crash) after having asked
+//       for it to be installed (see resendUpdateState() in MainWindow.ts), in which case OpenCOR is about to be quit,
+//       so we only need to show it (and block our UI), as when we ask for an update to be installed (see above).
+
+trackCleanup(
+  electronApi?.onUpdateInstalling(() => {
+    updateDownloadPercent.value = 100;
+    updateDownloadTransferred.value = updateDownloadTotal.value;
+    userInputBlocked.value = true;
+    updateInstalling.value = true;
+    updateDownloadProgressVisible.value = true;
+  })
+);
+
 const updateNotAvailableVisible = vue.ref<boolean>(false);
 
 trackCleanup(
@@ -970,7 +1167,7 @@ trackCleanup(
 
 trackCleanup(
   electronApi?.onUpdateCheckError((issue: string) => {
-    updateErrorTitle.value = 'Checking For Updates...';
+    updateErrorTitle.value = 'Check for Updates';
     updateErrorIssue.value = `An error occurred while checking for updates (${common.formatMessage(issue, false)}).`;
     updateErrorVisible.value = true;
   })
@@ -1180,7 +1377,7 @@ const processFile = async (
 ): Promise<IFileInfo | null> => {
   // Check whether we were passed a ZIP-CellML data URL.
   // Note: we may also have been passed the contents of a file that was opened using a data URL and then closed, along
-  //       with its name, so that it can be reopened under that name (see onReopenMenu() and electronApi.onOpen()).
+  //       with its name, so that it can be reopened under that name (see onReopenMenu() and electronApi.onOpenFile()).
 
   let omexDataUrlCounter: number = 0;
 
@@ -1494,21 +1691,104 @@ const onChange = (event: Event): void => {
 };
 
 // Drag and drop.
+// Note #1: once our drop zone is shown, it covers the whole of OpenCOR (including any overlay that is open) and its
+//          contents ignore pointer events (see DragNDropComponent.vue), so it is normally the only target of our drag
+//          events. This means that we normally know that the files being dragged have left OpenCOR (or that the drag
+//          has been cancelled) as soon as our drop zone gets left, without having to keep track of the (nested)
+//          elements that are being entered and left.
+// Note #2: if the files being dragged leave OpenCOR straight after our drop zone has been shown (e.g., if they are
+//          quickly dragged across a corner of OpenCOR), then it is the element that was entered (rather than our drop
+//          zone) that gets left, meaning that our drop zone would remain shown (and block the mouse). So, we also hide
+//          our drop zone if we haven't been told for a while that files are still being dragged over us (a dragover
+//          event is normally fired every 350 ms ± 200 ms while files are being dragged over us, even if they are not
+//          moved).
+// Note #3: some browsers only fire a dragover event when the files being dragged are moved (e.g., Chromium on Linux),
+//          in which case our drop zone gets hidden if the files are held still for a while. So, we show our drop zone
+//          again as soon as the files are moved again, and we still open the files if they are dropped while our drop
+//          zone is hidden (as long as they could have been dropped onto our drop zone, see canDropFiles()).
+
+const DRAG_OVER_TIMEOUT = 1000;
+
+const dragAndDropVisible = vue.ref<boolean>(false);
+const dragAndDropFileCount = vue.ref<number>(0);
+let dragOverTimer: number | undefined;
+
+const restartDragOverTimer = (): void => {
+  window.clearTimeout(dragOverTimer);
+
+  dragOverTimer = window.setTimeout(() => {
+    dragOverTimer = undefined;
+
+    dragAndDropVisible.value = false;
+  }, DRAG_OVER_TIMEOUT);
+};
+
+vue.watch(dragAndDropVisible, (visible: boolean) => {
+  if (!visible) {
+    window.clearTimeout(dragOverTimer);
+
+    dragOverTimer = undefined;
+  }
+});
 
-const dragAndDropCounter = vue.ref<number>(0);
+trackCleanup(() => {
+  window.clearTimeout(dragOverTimer);
+});
+
+// Hide our drop zone if our UI gets disabled while files are being dragged (e.g., if a dialog gets opened), so that
+// they don't get opened if they are then dropped.
+
+vue.watch(compUiEnabled, (uiEnabled: boolean) => {
+  if (!uiEnabled) {
+    dragAndDropVisible.value = false;
+  }
+});
+
+// Whether the files being dragged can be dropped onto us, i.e. whether our UI is enabled and it is an external (file)
+// drag rather than an internal one (e.g., a tab reorder drag).
+
+const canDropFiles = (event: DragEvent): boolean => {
+  return compUiEnabled.value && !props.omex && !!event.dataTransfer?.types.includes('Files');
+};
+
+// Show our drop zone, keeping track of the number of files being dragged, if known (see DragNDropComponent.vue).
+
+const showDropZone = (event: DragEvent): void => {
+  dragAndDropFileCount.value = Array.from(event.dataTransfer?.items ?? []).filter(
+    (item) => item.kind === 'file'
+  ).length;
+  dragAndDropVisible.value = true;
+
+  restartDragOverTimer();
+};
 
 const onDragEnter = (event: DragEvent): void => {
-  if (!compUiEnabled.value || props.omex) {
-    return;
+  if (!dragAndDropVisible.value && canDropFiles(event)) {
+    showDropZone(event);
   }
+};
 
-  // Only react to external (file) drags, not internal ones (e.g., tab reorder drags).
+const onDragOver = (event: DragEvent): void => {
+  event.preventDefault();
 
-  if (!event.dataTransfer?.types.includes('Files')) {
-    return;
+  // Show our drop zone again if it got hidden while files are still being dragged over us (see Note #3 above).
+
+  if (!dragAndDropVisible.value && canDropFiles(event)) {
+    showDropZone(event);
   }
 
-  ++dragAndDropCounter.value;
+  // Let the user know whether the files being dragged would get opened if they were to be dropped, i.e. whether we are
+  // showing our drop zone (we are not if our UI is disabled, for instance).
+
+  if (event.dataTransfer?.types.includes('Files')) {
+    event.dataTransfer.dropEffect = dragAndDropVisible.value ? 'copy' : 'none';
+  }
+
+  // Our files are still being dragged over us, so make sure that our drop zone doesn't get hidden (see Note #2 above).
+
+  if (dragAndDropVisible.value) {
+    restartDragOverTimer();
+  }
 };
 
 // Retrieve the file handle of a dropped file, if possible, so that the file can be saved where it is (see
@@ -1542,11 +1822,14 @@ const droppedFileHandle = (item: DataTransferItem): Promise<FileSystemFileHandle
 };
 
 const onDrop = async (event: DragEvent): Promise<void> => {
-  if (!dragAndDropCounter.value) {
+  // Open the dropped files if our drop zone is shown or if it got hidden while the files were held still (see Note #3
+  // above).
+
+  if (!dragAndDropVisible.value && !canDropFiles(event)) {
     return;
   }
 
-  dragAndDropCounter.value = 0;
+  dragAndDropVisible.value = false;
 
   // Retrieve the dropped files and their file handle.
   // Note: this must be done before we await anything since the dropped items can only be accessed while the drop
@@ -1577,18 +1860,10 @@ const onDrop = async (event: DragEvent): Promise<void> => {
   openFiles(files);
 };
 
-const onDragLeave = (): void => {
-  if (!dragAndDropCounter.value) {
-    return;
-  }
-
-  dragAndDropCounter.value -= 1;
-};
-
 // Open.
 
 trackCleanup(
-  electronApi?.onOpen((filePath: string) => {
+  electronApi?.onOpenFile((filePath: string) => {
     handleExternalRequest(() => {
       // Note: our main process may ask us to reopen a file that was opened using a data URL (through its File|Reopen
       //       menu), in which case we reopen it using the contents that we kept for it (see addRecentFile()).
@@ -1635,25 +1910,37 @@ const onOpenMenu = (): void => {
   filesRef.value?.click();
 };
 
-// Open remote.
+// Open action, i.e. from our background (see BackgroundComponent.vue).
+// Note: OpenCOR shows its native open dialog (which allows it to keep track of the files that are opened), while
+//       OpenCOR's Web app does the same as when using our main menu.
 
-const openRemoteVisible = vue.ref<boolean>(false);
+const onOpenAction = (): void => {
+  if (electronApi) {
+    electronApi.showOpenDialog();
+  } else {
+    onOpenMenu();
+  }
+};
+
+// Open location.
+
+const openLocationVisible = vue.ref<boolean>(false);
 
 trackCleanup(
-  electronApi?.onOpenRemote(() => {
-    openRemoteVisible.value = true;
+  electronApi?.onOpenLocation(() => {
+    openLocationVisible.value = true;
   })
 );
 
-const onOpenRemoteMenu = (): void => {
+const onOpenLocationMenu = (): void => {
   if (props.omex) {
     return;
   }
 
-  openRemoteVisible.value = true;
+  openLocationVisible.value = true;
 };
 
-const onOpenRemote = (url: string): void => {
+const onOpenLocation = (url: string): void => {
   // Note: no matter whether this is OpenCOR or OpenCOR's Web app, we always retrieve the file contents of a remote
   //       file. We could, in OpenCOR, rely on libOpenCOR to retrieve it for us, but this would block the UI. To
   //       retrieve the file here means that it is done asynchronously, which in turn means that the UI is not blocked
@@ -1815,6 +2102,50 @@ const onClearRecentFilesMenu = (): void => {
   recentFiles.value = [];
 };
 
+// Recent files, as listed on our start screen (see BackgroundComponent.vue).
+// Note: in OpenCOR, our recent files are kept by our main process, which lets us know about them (see
+//       recentFilePathsUpdated() in MainWindow.ts) and which must be the one to reopen them (as if they were reopened
+//       using its Reopen menu, see reopenRecentFile() in MainWindow.ts). In OpenCOR's Web app, they are those of our
+//       Reopen menu.
+
+const mainProcessRecentFilePaths = vue.ref<string[]>([]);
+
+trackCleanup(
+  electronApi?.onRecentFiles((filePaths: string[]) => {
+    mainProcessRecentFilePaths.value = filePaths;
+  })
+);
+
+const startScreenRecentFilePaths = vue.computed<string[]>(() => {
+  return electronApi ? mainProcessRecentFilePaths.value : recentFilePaths.value;
+});
+
+const onOpenRecentFileAction = (filePath: string): void => {
+  if (electronApi) {
+    electronApi.reopenRecentFile(filePath);
+  } else {
+    void onReopenMenu(filePath);
+  }
+};
+
+// Actions of our start screen (see BackgroundComponent.vue).
+// Note: unlike our main menu, our start screen is not disabled while our UI is not enabled, and our contents are only
+//       inert while our UI is blocked and no dialog is shown (see updateInertElements()), so its actions may still get
+//       triggered while our UI is not enabled, in which case we ignore them.
+
+const startScreenAction = <T extends unknown[]>(action: (...args: T) => void): ((...args: T) => void) => {
+  return (...args: T): void => {
+    if (compUiEnabled.value) {
+      action(...args);
+    }
+  };
+};
+
+const onStartScreenOpen = startScreenAction(onOpenAction);
+const onStartScreenOpenRecentFile = startScreenAction(onOpenRecentFileAction);
+const onStartScreenOpenLocation = startScreenAction(onOpenLocationMenu);
+const onStartScreenOpenSampleLorenz = startScreenAction(onOpenSampleLorenzMenu);
+
 // Save.
 
 trackCleanup(
@@ -2318,8 +2649,18 @@ const onGitHubButtonClick = async (): Promise<void> => {
     padding-top: var(--main-menu-height) !important;
   }
 
-  :deep(.p-message) {
-    margin-top: calc(0.5 * var(--main-menu-height)) !important;
+  /**
+   * Note #1: only our own blocking messages are shifted down since they are centred over the whole of OpenCOR (i.e.
+   *          also over our main menu), unlike the blocking message of a view (e.g., CellDL Editor's loading message),
+   *          which is centred over the view itself (and therefore already below our main menu).
+   * Note #2: our initialising message is not shifted down since it replaces the message that is shown until OpenCOR has
+   *          been loaded (see index.html), which is centred over the whole window (since it cannot know whether there
+   *          will be a main menu and, if so, how tall it will be), so that both look like a single step (rather than
+   *          our message jumping down once OpenCOR has been loaded).
+   */
+
+  :deep(.app-blocking-message:not(.initialising-opencor-message)) {
+    margin-top: calc(0.5 * var(--main-menu-height));
   }
 }
 </style>
diff --git a/src/renderer/src/components/ViewSwitcherComponent.vue b/src/renderer/src/components/ViewSwitcherComponent.vue
index 7937e586f..b747d1502 100644
--- a/src/renderer/src/components/ViewSwitcherComponent.vue
+++ b/src/renderer/src/components/ViewSwitcherComponent.vue
@@ -1,33 +1,47 @@
 <template>
-  <nav class="w-14 h-full shrink-0 flex flex-col overflow-y-auto py-1"
-    :style="{ borderRight: '1px solid var(--p-content-border-color)' }"
-    @wheel.prevent="onWheel"
-  >
-    <template v-for="([category, views], categoryIndex) in categoriesWithViews" :key="category.id">
-      <div v-if="categoryIndex > 0" class="mx-2 my-1 border-t"
-        style="border-color: var(--p-content-border-color);"
-      />
-      <button v-for="view in views" :key="view.id"
-        type="button"
-        :ref="(element) => setViewButtonRef(view.id, element)"
-        :class="[
-          'view-icon flex items-center justify-center mx-1 my-0.5 rounded-r-md transition-colors duration-150',
-          { 'view-icon-active': view.id === activeViewId }
-        ]"
-        :style="{ '--view-category-color': category.color }"
-        :title="view.label"
-        @click="$emit('selectView', view.id)"
-      >
-        <i v-if="typeof view.icon === 'string'" :class="view.icon" class="text-lg" />
-        <span v-else class="view-icon-image" :style="viewIconImageStyle(view.icon.url)" />
-      </button>
-    </template>
-  </nav>
+  <div class="relative h-full shrink-0">
+    <nav ref="navRef" class="view-switcher relative w-12 h-full flex flex-col items-center gap-1 overflow-y-auto py-1.5"
+      @keydown="onKeyDown"
+      @scroll="hideTooltip"
+      @wheel.prevent="onWheel"
+    >
+      <template v-for="([category, views], categoryIndex) in categoriesWithViews" :key="category.id">
+        <div v-if="categoryIndex > 0" class="view-separator shrink-0" />
+        <button v-for="view in views" :key="view.id"
+          type="button"
+          :ref="(element) => setViewButtonRef(view.id, element)"
+          :class="[
+            'view-icon relative flex items-center justify-center shrink-0 w-9 h-9 rounded-md cursor-pointer',
+            { 'view-icon-active': view.id === activeViewId }
+          ]"
+          :style="{ '--view-category-color': category.color }"
+          :aria-label="view.label"
+          :aria-pressed="view.id === activeViewId"
+          @mousedown.prevent
+          @mouseenter="onMouseEnter(view.label, $event)"
+          @mouseleave="onMouseLeave"
+          @focus="onFocus(view.label, $event)"
+          @blur="hideTooltip"
+          @click="hideTooltip(); $emit('selectView', view.id)"
+        >
+          <i v-if="typeof view.icon === 'string'" :class="view.icon" class="view-icon-glyph" />
+          <span v-else class="view-icon-image" :style="viewIconImageStyle(view.icon.url)" />
+        </button>
+      </template>
+    </nav>
+    <div v-if="tooltip" class="view-tooltip absolute px-2 py-1 rounded-md text-xs whitespace-nowrap pointer-events-none"
+      :style="{ top: `${tooltip.top}px` }"
+      aria-hidden="true"
+    >
+      {{ tooltip.label }}
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import * as vue from 'vue';
 
+import { HINT_DELAY } from '../common/constants';
 import {
   type IViewDescriptor,
   useViewRegistry,
@@ -88,6 +102,145 @@ const setViewButtonRef = (viewId: string, element: unknown): void => {
   }
 };
 
+// Tooltip, which is shown to the right of a view button, after a short delay when the button is hovered, and
+// straightaway when the button is focused using the keyboard or when another tooltip was shown (or has just been
+// hidden), so that people can quickly go through our view buttons.
+// Note #1: our tooltip is not part of our nav element since it would otherwise get clipped by it (since our nav element
+//          can be scrolled), hence it is positioned relative to our root element.
+// Note #2: our tooltip remains shown while its view button has a focus ring, even if that view button gets hovered and
+//          then left, and it is shown again if another view button gets hovered and then left (since we only have one
+//          tooltip).
+// Note #3: like a hint (see hint.ts), our tooltip can be dismissed by pressing Escape, be it shown or about to be
+//          shown, in which case it isn't shown again until a view button is hovered or focused anew. Escape is
+//          otherwise left to do what it normally does (e.g., remove the keyboard focus, see OpenCOR.vue).
+
+const TOOLTIP_WARM_DELAY = 300;
+
+const navRef = vue.shallowRef<HTMLElement | null>(null);
+const tooltip = vue.ref<{ label: string; top: number } | null>(null);
+let tooltipTimer: number | undefined;
+let tooltipHiddenTime = 0;
+let tooltipDismissed = false;
+
+const showTooltip = (label: string, element: HTMLElement, immediately: boolean): void => {
+  window.clearTimeout(tooltipTimer);
+
+  const doShowTooltip = () => {
+    tooltip.value = {
+      label,
+      top: element.offsetTop - (navRef.value?.scrollTop ?? 0) + 0.5 * element.offsetHeight
+    };
+  };
+
+  if (immediately || tooltip.value || performance.now() - tooltipHiddenTime < TOOLTIP_WARM_DELAY) {
+    doShowTooltip();
+  } else {
+    tooltipTimer = window.setTimeout(doShowTooltip, HINT_DELAY);
+  }
+};
+
+const hideTooltip = (): void => {
+  window.clearTimeout(tooltipTimer);
+
+  if (tooltip.value) {
+    tooltip.value = null;
+    tooltipHiddenTime = performance.now();
+  }
+};
+
+// The view button that has a focus ring, if any.
+
+const viewButtonWithFocusRing = (): HTMLElement | null => {
+  const activeElement = document.activeElement;
+
+  return activeElement instanceof HTMLElement &&
+    navRef.value?.contains(activeElement) &&
+    activeElement.matches('.view-icon:focus-visible')
+    ? activeElement
+    : null;
+};
+
+const onMouseEnter = (label: string, event: MouseEvent): void => {
+  tooltipDismissed = false;
+
+  showTooltip(label, event.currentTarget as HTMLElement, false);
+};
+
+// Show the tooltip of the view button that has a focus ring, if any (unless our tooltip has been dismissed), or hide
+// our tooltip (see Notes #2 and #3 above).
+
+const onMouseLeave = (): void => {
+  const viewButton = tooltipDismissed ? null : viewButtonWithFocusRing();
+
+  if (viewButton) {
+    showTooltip(viewButton.getAttribute('aria-label') ?? '', viewButton, true);
+  } else {
+    hideTooltip();
+  }
+};
+
+const onFocus = (label: string, event: FocusEvent): void => {
+  const element = event.currentTarget as HTMLElement;
+
+  if (element.matches(':focus-visible')) {
+    tooltipDismissed = false;
+
+    showTooltip(label, element, true);
+  }
+};
+
+// Dismiss our tooltip, be it shown or about to be shown, if Escape is pressed (see Note #3 above).
+
+const onWindowKeyDown = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape') {
+    tooltipDismissed = true;
+
+    hideTooltip();
+  }
+};
+
+vue.onMounted(() => {
+  window.addEventListener('keydown', onWindowKeyDown, true);
+});
+
+vue.onBeforeUnmount(() => {
+  window.clearTimeout(tooltipTimer);
+  window.removeEventListener('keydown', onWindowKeyDown, true);
+});
+
+// Move the focus between our view buttons using the keyboard.
+// Note: our view buttons don't get the focus when clicked (see our template), so that they don't look focused when
+//       people use the mouse.
+
+const onKeyDown = (event: KeyboardEvent): void => {
+  const viewButtons = viewIds.value
+    .map((viewId) => viewButtonRefs.get(viewId))
+    .filter((viewButton): viewButton is HTMLElement => !!viewButton);
+  const viewButtonIndex = viewButtons.indexOf(document.activeElement as HTMLElement);
+
+  if (viewButtonIndex === -1) {
+    return;
+  }
+
+  let newViewButtonIndex: number;
+
+  if (event.key === 'ArrowDown') {
+    newViewButtonIndex = Math.min(viewButtonIndex + 1, viewButtons.length - 1);
+  } else if (event.key === 'ArrowUp') {
+    newViewButtonIndex = Math.max(viewButtonIndex - 1, 0);
+  } else if (event.key === 'Home') {
+    newViewButtonIndex = 0;
+  } else if (event.key === 'End') {
+    newViewButtonIndex = viewButtons.length - 1;
+  } else {
+    return;
+  }
+
+  event.preventDefault();
+
+  viewButtons[newViewButtonIndex]?.focus();
+};
+
 // Style of a view icon that is an image, i.e. use the image as a mask.
 // Note: Vite inlines an SVG file as a data URL which may contain single quotes (it replaces the SVG's double quotes
 //       with single quotes), so we must use double quotes in url().
@@ -153,26 +306,60 @@ vue.watch(
 </script>
 
 <style scoped>
+.view-switcher {
+  border-right: 1px solid var(--p-content-border-color);
+}
+
+.view-separator {
+  width: 1.25rem;
+  margin: 0.25rem 0;
+  border-top: 1px solid var(--p-content-border-color);
+}
+
+/**
+ * View buttons, which icon uses the colour of their category when hovered or active. Only an active view button has a
+ * background tinted with the colour of its category, as well as a marker on the left edge of our nav element.
+ */
+
 .view-icon {
-  width: 44px;
-  height: 44px;
-  border-left: 3px solid transparent;
-  background-color: color-mix(in srgb, var(--view-category-color) 8%, transparent);
+  border: none;
+  background-color: transparent;
   color: var(--p-text-muted-color);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .view-icon:hover {
-  background-color: color-mix(in srgb, var(--view-category-color) 15%, transparent);
-  color: var(--p-text-color);
+  background-color: var(--p-content-hover-background);
+  color: var(--view-category-color);
+}
+
+.view-icon:focus-visible {
+  box-shadow: 0 0 0 2px var(--p-primary-color);
 }
 
 .view-icon-active,
 .view-icon-active:hover {
-  background-color: color-mix(in srgb, var(--view-category-color) 20%, transparent);
-  border-left-color: var(--view-category-color);
+  background-color: color-mix(in srgb, var(--view-category-color) 14%, transparent);
   color: var(--view-category-color);
 }
 
+.view-icon-active::before {
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  left: -0.375rem;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background-color: var(--view-category-color);
+  content: "";
+}
+
+.view-icon-glyph {
+  font-size: 1.125rem;
+}
+
 .view-icon-image {
   width: 1.125rem;
   height: 1.125rem;
@@ -181,4 +368,19 @@ vue.watch(
   mask-repeat: no-repeat;
   mask-size: contain;
 }
+
+/**
+ * Tooltip, which looks like the tooltip of our toolbar buttons (see ToolbarButtonWidget.vue).
+ */
+
+.view-tooltip {
+  left: calc(100% + 0.375rem);
+  z-index: 1000;
+  border: 1px solid var(--opencor-hint-border-color);
+  background-color: var(--opencor-hint-background);
+  box-shadow: var(--opencor-overlay-shadow);
+  color: var(--opencor-hint-color);
+  font-weight: 500;
+  transform: translateY(-50%);
+}
 </style>
diff --git a/src/renderer/src/components/dialogs/AboutDialog.vue b/src/renderer/src/components/dialogs/AboutDialog.vue
index 455e308c0..53e61ddd7 100644
--- a/src/renderer/src/components/dialogs/AboutDialog.vue
+++ b/src/renderer/src/components/dialogs/AboutDialog.vue
@@ -1,54 +1,551 @@
 <template>
-  <BaseDialog header=" " class="w-169">
-    <div class="space-y-7">
-      <div class="text-center">
-        <div class="text-3xl font-bold">OpenCOR {{ currentVersion }}</div>
-        <div v-if="electronApi" class="text-xl italic font-bold">{{ electronApi.operatingSystem() }}</div>
-        <div class="text-sm italic">Copyright {{ COPYRIGHT }}</div>
-      </div>
-      <div class="space-y-2">
-        <div>
-          <a href="https://opencor.ws/" target="_blank" rel="noopener">OpenCOR</a> is a frontend to
-          <a href="https://opencor.ws/libopencor/" target="_blank" rel="noopener">libOpenCOR</a> {{ locApi.version() }},
-          a library that can be used to organise, edit, simulate, and analyse
-          <a href="https://cellml.org/" target="_blank" rel="noopener">CellML</a> files.
-        </div>
-        <div class="space-y-0">
-          <div>There are two versions of OpenCOR:</div>
-
-          <ol class="list-decimal list-inside ml-2">
-            <li>
-              <span class="font-bold"><a href="https://github.com/opencor/webapp/releases/latest" target="_blank" rel="noopener">OpenCOR</a>:</span> a desktop application that can be run on
-              <a href="https://en.wikipedia.org/wiki/List_of_Intel_processors" target="_blank" rel="noopener">Intel</a>-based and
-              <a href="https://en.wikipedia.org/wiki/ARM_architecture_family" target="_blank" rel="noopener">ARM</a>-based
-              <a href="https://en.wikipedia.org/wiki/Microsoft_Windows" target="_blank" rel="noopener">Windows</a>,
-              <a href="https://en.wikipedia.org/wiki/Linux" target="_blank" rel="noopener">Linux</a>, and
-              <a href="https://en.wikipedia.org/wiki/MacOS" target="_blank" rel="noopener">macOS</a> machines; and
-            </li>
-            <li>
-              <span class="font-bold"><a href="https://opencor.ws/app" target="_blank" rel="noopener">OpenCOR's Web app</a>:</span> a
-              <a href="https://en.wikipedia.org/wiki/Web_application" target="_blank" rel="noopener">Web app</a> that
-              can be run on a Web browser.
-            </li>
-          </ol>
+  <BaseDialog header="About OpenCOR" class="w-169" @cancel="copyToClipboard.reset">
+    <div class="flex flex-col gap-4 mb-1">
+      <!-- Logo, name, copyright, and description (our version being part of our system details) -->
+
+      <div class="flex items-center gap-5">
+        <img class="logo shrink-0" src="../../assets/logo.svg" alt="" />
+        <div class="min-w-0">
+          <div class="app-name">OpenCOR</div>
+          <div class="app-copyright">Copyright © {{ COPYRIGHT }}</div>
+          <p class="description">
+            <a href="https://opencor.ws/" target="_blank" rel="noopener">OpenCOR</a> is a frontend to
+            <a href="https://opencor.ws/libopencor/" target="_blank" rel="noopener">libOpenCOR</a>, a library that can be
+            used to organise, edit, simulate, and analyse <a href="https://cellml.org/" target="_blank" rel="noopener">CellML</a>
+            files.
+          </p>
         </div>
       </div>
+
+      <!-- System details, which can be copied (e.g., to report an issue) -->
+
+      <div class="details">
+        <dl class="details-list details-list-software">
+          <div v-for="detail in softwareDetails" :key="detail.label" class="detail">
+            <dt>{{ detail.label }}</dt>
+            <dd>{{ detail.value }}</dd>
+          </div>
+        </dl>
+        <template v-if="hardwareDetails.length">
+          <hr class="details-separator" />
+          <dl class="details-list details-list-hardware">
+            <div v-for="(detail, index) in hardwareDetails" :key="detail.label" class="detail"
+              :class="{ 'detail-wide': index === hardwareDetails.length - 1 && hardwareDetails.length % 2 === 1 }"
+            >
+              <dt>{{ detail.label }}</dt>
+              <dd>{{ detail.value }}</dd>
+            </div>
+          </dl>
+        </template>
+        <ToolbarButtonWidget class="copy-button"
+          v-bind="copyToClipboard.buttonProps('Copy system details')"
+          tooltipAlign="end"
+          @click="copyDetails"
+        />
+      </div>
+
+      <!-- The two versions of OpenCOR -->
+
+      <div class="flavours grid grid-cols-2 gap-3">
+        <a class="flavour" href="https://github.com/opencor/webapp/releases/latest" target="_blank" rel="noopener">
+          <i class="pi pi-desktop flavour-icon"></i>
+          <span class="min-w-0">
+            <span class="flavour-title">Desktop application <i class="pi pi-external-link flavour-link-icon"></i></span>
+            <span class="flavour-description">For Windows, Linux, and macOS, on Intel and ARM machines.</span>
+          </span>
+        </a>
+        <a class="flavour" href="https://opencor.ws/app" target="_blank" rel="noopener">
+          <i class="pi pi-globe flavour-icon"></i>
+          <span class="min-w-0">
+            <span class="flavour-title">Web app <i class="pi pi-external-link flavour-link-icon"></i></span>
+            <span class="flavour-description">Runs in your Web browser, with nothing to install.</span>
+          </span>
+        </a>
+      </div>
     </div>
     <template #footer>
-      <Button label="OK" autofocus @click="$emit('close')" />
+      <div class="w-full flex items-center justify-between gap-4">
+        <!-- Links -->
+
+        <div class="links">
+          <a href="https://opencor.ws/" target="_blank" rel="noopener"><i class="pi pi-home"></i>Website</a>
+          <a href="https://github.com/opencor/webapp" target="_blank" rel="noopener"><i class="pi pi-github"></i>Source code</a>
+          <a href="https://github.com/opencor/webapp/issues/new" target="_blank" rel="noopener"><i class="pi pi-exclamation-circle"></i>Report an issue</a>
+        </div>
+        <Button label="OK" autofocus @click="$emit('close')" />
+      </div>
     </template>
   </BaseDialog>
 </template>
 
 <script setup lang="ts">
-import { currentVersion } from '../../common/version';
+import * as vue from 'vue';
 
+import * as common from '../../common/common';
 import { COPYRIGHT } from '../../common/constants';
-
 import { electronApi } from '../../common/electronApi';
+import { currentVersion } from '../../common/version';
+import * as vueCommon from '../../common/vueCommon';
 import * as locApi from '../../libopencor/locApi';
 
+import ToolbarButtonWidget from '../widgets/ToolbarButtonWidget.vue';
+
 defineEmits<{
   close: [];
 }>();
+
+// Our system details, i.e. our software details (where OpenCOR runs, i.e. our platform and either our browser or
+// Electron, in the first column, and our versions, in the second column) and our hardware details (our CPU, memory, and
+// GPU), each of them being listed in the order in which it is shown.
+// Note #1: we are mounted when OpenCOR starts, i.e. possibly before libOpenCOR is initialised, so we must not retrieve
+//          libOpenCOR's version straightaway, hence we use computed properties, which are only evaluated when our
+//          contents first get rendered, i.e. when we are first shown (which can only be once OpenCOR is initialised).
+//          None of our details can change while OpenCOR is running, so they are then cached.
+// Note #2: a hardware detail that cannot be retrieved (e.g., the amount of memory in a browser that doesn't provide it,
+//          such as Safari or Firefox, see memoryDescription()) is not shown at all.
+
+interface IDetail {
+  label: string;
+  value: string;
+}
+
+// Our system details, which are only available in OpenCOR (i.e. not in OpenCOR's Web app).
+
+const systemDetails = vue.computed<common.ISystemDetails | undefined>(() => {
+  return electronApi?.systemDetails();
+});
+
+const softwareDetails = vue.computed<IDetail[]>(() => {
+  return [
+    { label: 'Platform', value: electronApi ? electronApi.operatingSystem() : common.osName() },
+    systemDetails.value
+      ? {
+          label: 'Electron',
+          value: `${systemDetails.value.electronVersion} (Chromium ${systemDetails.value.chromiumVersion})`
+        }
+      : { label: 'Browser', value: browserDescription() },
+    { label: 'OpenCOR', value: currentVersion },
+    { label: 'libOpenCOR', value: locApi.version() }
+  ];
+});
+
+const hardwareDetails = vue.computed<IDetail[]>(() => {
+  return [
+    { label: 'CPU', value: cpuDescription() },
+    { label: 'Memory', value: memoryDescription() },
+    { label: 'GPU', value: gpuDescription() }
+  ].filter((detail) => detail.value);
+});
+
+// Remove the trademark symbols that may be part of the name of a CPU or GPU (e.g., "Intel(R) Core(TM) i7-9750H").
+
+const withoutTrademarks = (name: string): string => {
+  return name
+    .replace(/\((R|TM)\)/gi, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+};
+
+// A description of our CPU, i.e. its model and number of logical cores in OpenCOR (e.g., "Apple M2 Pro, 12 logical
+// cores"), and only its number of logical cores in OpenCOR's Web app (since a browser doesn't tell us its model).
+
+const cpuDescription = (): string => {
+  const cpuModel = systemDetails.value ? withoutTrademarks(systemDetails.value.cpuModel) : '';
+  const logicalCoreCount = systemDetails.value
+    ? systemDetails.value.logicalCoreCount
+    : navigator.hardwareConcurrency || 0;
+  const logicalCores = logicalCoreCount ? `${logicalCoreCount} logical core${logicalCoreCount === 1 ? '' : 's'}` : '';
+
+  return [cpuModel, logicalCores].filter(Boolean).join(', ');
+};
+
+// The User-Agent Client Hints of the browser in which our Web app is running, if available (i.e. in Chromium-based
+// browsers).
+
+interface IUserAgentData {
+  brands: { brand: string; version: string }[];
+  platform: string;
+}
+
+const userAgentData = (): IUserAgentData | undefined => {
+  return (navigator as Navigator & { userAgentData?: IUserAgentData }).userAgentData;
+};
+
+// The lowest and highest values that navigator.deviceMemory can report, which depend on the version of Chromium and on
+// the platform.
+// Note #1: from Chromium 146, the values are 2, 4, 8, 16, and 32 on desktop, and 2, 4, and 8 on Android (see
+//          https://groups.google.com/a/chromium.org/g/blink-dev/c/vXtAmrVZeDk and https://crbug.com/454354290) while
+//          they used to be 0.25, 0.5, 1, 2, 4, and 8 on all platforms.
+// Note #2: Chromium's implementation may now report 1 on Android, but we still consider 2 as the lowest value there,
+//          so that a device reporting 2 is described as having about 2 GB "or less" (which is true either way).
+// Note #3: if we can't tell the version of Chromium, then we assume the old values.
+
+const UPDATED_DEVICE_MEMORY_LIMITS_CHROMIUM_VERSION = 146;
+
+const deviceMemoryBounds = (): [number, number] => {
+  const chromiumVersion = Number(
+    userAgentData()?.brands.find((brand) => brand.brand === 'Chromium')?.version ??
+      navigator.userAgent.match(/(?:Chrome|CriOS)\/(\d+)/)?.[1] ??
+      0
+  );
+
+  if (chromiumVersion >= UPDATED_DEVICE_MEMORY_LIMITS_CHROMIUM_VERSION) {
+    return userAgentData()?.platform === 'Android' || /Android/.test(navigator.userAgent) ? [2, 8] : [2, 32];
+  }
+
+  return [0.25, 8];
+};
+
+// A description of our amount of memory.
+// Note: in OpenCOR's Web app, we can only rely on navigator.deviceMemory, which is only available in Chromium-based
+//       browsers, and which is the amount of memory rounded to the nearest power of two (e.g., 16 GB for 14 GB), hence
+//       we say "about", and clamped (see deviceMemoryBounds()), hence we say "or more" (or "or less") when it is the
+//       highest (or lowest) value that can be reported.
+
+const memoryDescription = (): string => {
+  if (systemDetails.value) {
+    return systemDetails.value.totalMemory ? `${Math.round(systemDetails.value.totalMemory / 1024 ** 3)} GB` : '';
+  }
+
+  const deviceMemory = (navigator as Navigator & { deviceMemory?: number }).deviceMemory;
+
+  if (!deviceMemory) {
+    return '';
+  }
+
+  const [lowestDeviceMemory, highestDeviceMemory] = deviceMemoryBounds();
+
+  if (deviceMemory >= highestDeviceMemory) {
+    return `About ${deviceMemory} GB or more`;
+  }
+
+  if (deviceMemory <= lowestDeviceMemory) {
+    return `About ${deviceMemory} GB or less`;
+  }
+
+  return `About ${deviceMemory} GB`;
+};
+
+// A description of our GPU, i.e. the name of the renderer used by WebGL (which is the same in OpenCOR and in OpenCOR's
+// Web app since OpenCOR's renderer is Chromium-based).
+// Note #1: Chromium-based browsers and Safari report a generic renderer (i.e. "WebKit WebGL"), unless asked for the
+//          unmasked one, while Firefox reports a (sanitised) real one, followed by ", or similar", and deprecates
+//          asking for the unmasked one.
+// Note #2: Chromium-based browsers report a renderer through ANGLE, i.e. "ANGLE (<vendor>, <device>, <driver>)", from
+//          which we only keep the device, without its id or, on Windows, its Direct3D details (e.g., "ANGLE (NVIDIA,
+//          NVIDIA GeForce RTX 3070 (0x00002484) Direct3D11 vs_5_0 ps_5_0, D3D11)" becomes "NVIDIA GeForce RTX 3070").
+// Note #3: we release our WebGL context straightaway (even if we fail to retrieve our renderer) since browsers limit
+//          the number of active WebGL contexts.
+
+const gpuDescription = (): string => {
+  let renderer = '';
+  let webglContext: WebGLRenderingContext | null = null;
+
+  try {
+    webglContext = document.createElement('canvas').getContext('webgl');
+
+    if (!webglContext) {
+      return '';
+    }
+
+    renderer = String(webglContext.getParameter(webglContext.RENDERER) ?? '');
+
+    if (/^WebKit WebGL$/i.test(renderer)) {
+      const debugRendererInfo = webglContext.getExtension('WEBGL_debug_renderer_info');
+
+      renderer = debugRendererInfo
+        ? String(webglContext.getParameter(debugRendererInfo.UNMASKED_RENDERER_WEBGL) ?? '')
+        : '';
+    }
+  } catch {
+    return '';
+  } finally {
+    webglContext?.getExtension('WEBGL_lose_context')?.loseContext();
+  }
+
+  renderer = renderer.replace(/,\s*or similar$/i, '');
+
+  const angleMatch = renderer.match(/^ANGLE \((.*)\)$/);
+
+  if (angleMatch) {
+    const parts = (angleMatch[1] ?? '').split(', ');
+
+    renderer = (parts.length > 2 ? parts.slice(1, -1).join(', ') : (parts[1] ?? parts[0] ?? ''))
+      .replace(/^ANGLE Metal Renderer: /, '')
+      .replace(/\s*\(0x[\da-f]+\)/gi, '')
+      .replace(/\s+Direct3D.*$/, '');
+  }
+
+  return withoutTrademarks(renderer);
+};
+
+// A human-readable description of the browser in which our Web app is running (e.g., "Chrome 142").
+// Note: we use the browser's User-Agent Client Hints, if available (i.e. in Chromium-based browsers), and its user
+//       agent string otherwise.
+
+const browserDescription = (): string => {
+  const brands = userAgentData()?.brands;
+  const userAgent = navigator.userAgent;
+  let name = '';
+  let version = '';
+
+  if (brands) {
+    // Use the most specific brand (e.g., "Google Chrome"), i.e. neither Chromium itself nor a "GREASE" brand, which is
+    // a fake brand with some random punctuation (e.g., "Not)A;Brand" or "Not_A Brand") that Chromium-based browsers add
+    // on purpose so that websites don't rely on an exact list of brands.
+
+    const brand =
+      brands.find((brand) => !/chromium|not.a.brand/i.test(brand.brand)) ??
+      brands.find((brand) => /chromium/i.test(brand.brand));
+
+    if (brand) {
+      name = brand.brand.replace(/^Google /, '').replace(/^Microsoft /, '');
+      version = brand.version;
+    }
+  }
+
+  if (!name) {
+    const browsers: [string, RegExp][] = [
+      ['Edge', /Edg(?:e|A|iOS)?\/(\d+)/],
+      ['Opera', /OPR\/(\d+)/],
+      ['Firefox', /(?:Firefox|FxiOS)\/(\d+)/],
+      ['Chrome', /(?:Chrome|CriOS)\/(\d+)/],
+      ['Safari', /Version\/(\d+(?:\.\d+)?).*Safari/]
+    ];
+
+    for (const [browserName, browserRegExp] of browsers) {
+      const match = userAgent.match(browserRegExp);
+
+      if (match) {
+        name = browserName;
+        version = match[1] ?? '';
+
+        break;
+      }
+    }
+  }
+
+  return name ? `${name}${version ? ` ${version}` : ''}` : 'Unknown';
+};
+
+// Copy our system details, exactly as shown, to the clipboard, so that they can easily be included in an issue report,
+// for instance.
+
+const copyToClipboard = vueCommon.useCopyToClipboard();
+
+const copyDetails = (): void => {
+  void copyToClipboard.copy(
+    [...softwareDetails.value, ...hardwareDetails.value].map((detail) => `${detail.label}: ${detail.value}`).join('\n')
+  );
+};
 </script>
+
+<style scoped>
+.logo {
+  width: 5rem;
+}
+
+.app-name {
+  color: var(--p-text-color);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.app-copyright {
+  margin-top: 0.125rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.description {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/**
+ * System details.
+ * Note #1: our software and hardware details are each shown as a grid of label/value pairs (rather than as a list), so
+ *          that they fill our frame rather than leave most of it empty. Both grids have the same columns, so that they
+ *          are aligned. Our software details are listed column by column (i.e. where OpenCOR runs on the left and our
+ *          versions on the right), while our hardware details are listed row by row, with the last one taking the
+ *          whole row if it would otherwise be on its own (e.g., our GPU, which may have a long name).
+ * Note #2: our copy button is positioned in the top right corner of our frame (rather than next to our grids), so that
+ *          our separator can span the whole width of our frame. Our grids leave some room for it.
+ */
+
+.details {
+  --details-padding: 1rem;
+  --details-copy-button-room: 2.25rem;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 0.625rem var(--details-padding);
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 0.5rem;
+  background-color: color-mix(in srgb, var(--p-text-color) 3%, transparent);
+}
+
+.details-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.375rem 1.5rem;
+  margin: 0 var(--details-copy-button-room) 0 0;
+}
+
+.details-list-software {
+  grid-template-rows: repeat(2, auto);
+  grid-auto-flow: column;
+}
+
+.details-separator {
+  margin: 0 calc(-1 * var(--details-padding));
+  border: none;
+  border-top: 1px solid var(--p-content-border-color);
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.3125rem;
+  right: 0.5rem;
+}
+
+/**
+ * Note: a detail is shown on a single line, i.e. with its label next to (rather than above) its value, so that our
+ *       frame doesn't make our dialog too tall to fit in a small window.
+ */
+
+.detail {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.detail-wide {
+  grid-column: 1 / -1;
+}
+
+.detail dt {
+  flex-shrink: 0;
+  width: 4.75rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+}
+
+.detail dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  user-select: text;
+}
+
+/**
+ * The two versions of OpenCOR (i.e. its desktop version and its Web app).
+ */
+
+.flavour {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 0.5rem;
+  color: var(--p-text-color) !important;
+  text-decoration: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.flavour:hover {
+  border-color: color-mix(in srgb, var(--p-primary-color) 40%, var(--p-content-border-color));
+  background-color: color-mix(in srgb, var(--p-primary-color) 6%, transparent);
+}
+
+.flavour:focus-visible {
+  box-shadow: 0 0 0 2px var(--p-primary-color);
+}
+
+.flavour-icon {
+  margin-top: 0.125rem;
+  color: var(--p-primary-color);
+  font-size: 1.125rem;
+}
+
+.flavour-title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.flavour-link-icon {
+  color: var(--p-text-muted-color);
+  font-size: 0.625rem;
+}
+
+.flavour-description {
+  display: block;
+  margin-top: 0.125rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+/**
+ * Links.
+ */
+
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+  font-size: 0.8125rem;
+}
+
+.links a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  text-decoration: none;
+}
+
+.links a:hover {
+  text-decoration: underline;
+}
+
+.links .pi {
+  font-size: 0.8125rem;
+}
+
+/**
+ * Narrow layout, i.e. when OpenCOR is less than 40rem wide (see NARROW_LAYOUT_WIDTH in constants.ts), e.g., on a phone
+ * or when OpenCOR is embedded in a small container (see opencor-dialog in BaseDialog.vue). Our details and the two
+ * versions of OpenCOR are then shown in a single column, so that our details are not wrapped every few characters.
+ */
+
+@container opencor-dialog (width < 40rem) {
+  .details-list,
+  .flavours {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .details-list-software {
+    grid-template-rows: none;
+    grid-auto-flow: row;
+  }
+
+  .details-list-hardware {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/src/renderer/src/components/dialogs/BaseDialog.vue b/src/renderer/src/components/dialogs/BaseDialog.vue
index 77e9f196d..4b2d33106 100644
--- a/src/renderer/src/components/dialogs/BaseDialog.vue
+++ b/src/renderer/src/components/dialogs/BaseDialog.vue
@@ -1,7 +1,14 @@
 <template>
+  <!--
+  Note: our mask covers the whole of OpenCOR (which may not cover the whole window, e.g., if it is embedded in a page),
+        so it is a container (named opencor-dialog) that can be queried to know whether our dialog should use a narrow
+        layout (see, for instance, AboutDialog.vue).
+  -->
   <Dialog ref="dialogRef" :modal="true" appendTo="self"
     :pt:mask:style="{
-      position: 'absolute'
+      position: 'absolute',
+      containerType: 'inline-size',
+      containerName: 'opencor-dialog'
     }"
     :pt:content="{
       class: 'h-full',
@@ -10,6 +17,7 @@
     :pt:footer="{
       style: 'padding-top: 1.25rem'
     }"
+    :pt:transition="{ css: false }"
     @show="onShow"
     @hide="onHide"
   >
diff --git a/src/renderer/src/components/dialogs/ChangelogDialog.vue b/src/renderer/src/components/dialogs/ChangelogDialog.vue
index 34701c65d..9d407a5b0 100644
--- a/src/renderer/src/components/dialogs/ChangelogDialog.vue
+++ b/src/renderer/src/components/dialogs/ChangelogDialog.vue
@@ -1,7 +1,10 @@
 <template>
   <BaseDialog header="Changelog" class="w-169">
-    <ChangelogComponent v-if="entries.length" class="max-h-[60vh] overflow-y-auto" :entries="entries" />
-    <div v-else class="mt-2 mb-4">No changelog is available.</div>
+    <ChangelogComponent v-if="entries.length" class="changelog-list" :entries="entries" />
+    <div v-else class="changelog-empty">
+      <i class="pi pi-info-circle" />
+      <span>No changelog is available.</span>
+    </div>
     <template #footer>
       <Button label="OK" autofocus @click="$emit('close')" />
     </template>
@@ -17,3 +20,22 @@ defineEmits<{
 
 const entries = changelog();
 </script>
+
+<style scoped>
+.changelog-list {
+  max-height: 60vh;
+  overflow-y: auto;
+  font-size: 0.875rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--opencor-scrollbar-color) transparent;
+}
+
+.changelog-empty {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.25rem 0 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+</style>
diff --git a/src/renderer/src/components/dialogs/DisconnectFromGitHubDialog.vue b/src/renderer/src/components/dialogs/DisconnectFromGitHubDialog.vue
index ee7302522..104356fbf 100644
--- a/src/renderer/src/components/dialogs/DisconnectFromGitHubDialog.vue
+++ b/src/renderer/src/components/dialogs/DisconnectFromGitHubDialog.vue
@@ -1,9 +1,9 @@
 <template>
-  <BaseDialog header="Disconnect from GitHub...">
-    <div class="mt-2 mb-4">You are about to disconnect from GitHub. Do you want to proceed?</div>
+  <BaseDialog header="Disconnect from GitHub">
+    <div class="mt-2 mb-4">You are about to disconnect from GitHub. Do you want to continue?</div>
     <template #footer>
-      <Button autofocus label="Yes" severity="danger" @click="$emit('yes')" />
-      <Button label="No" severity="secondary" @click="$emit('no')" />
+      <Button autofocus label="Disconnect" severity="danger" @click="$emit('yes')" />
+      <Button label="Cancel" severity="secondary" @click="$emit('no')" />
     </template>
   </BaseDialog>
 </template>
diff --git a/src/renderer/src/components/dialogs/OkMessageDialog.vue b/src/renderer/src/components/dialogs/OkMessageDialog.vue
index 3a07191f1..e4a3ae257 100644
--- a/src/renderer/src/components/dialogs/OkMessageDialog.vue
+++ b/src/renderer/src/components/dialogs/OkMessageDialog.vue
@@ -1,6 +1,14 @@
 <template>
-  <BaseDialog :header="title">
-    <div class="mt-2 mb-4" v-html="message"></div>
+  <BaseDialog :header="title" class="w-120">
+    <div class="message-dialog" :class="`message-dialog-${severity}`">
+      <span class="message-dialog-icon">
+        <i :class="ICONS[severity]" />
+      </span>
+      <div v-if="$slots.default" class="message-dialog-text">
+        <slot />
+      </div>
+      <div v-else class="message-dialog-text" v-html="message"></div>
+    </div>
     <template #footer>
       <Button autofocus label="OK" @click="$emit('ok')" />
     </template>
@@ -8,12 +16,33 @@
 </template>
 
 <script setup lang="ts">
+import './message-dialog.css';
+
+type Severity = 'info' | 'success' | 'warning' | 'danger';
+
+// Note: our message is either given as some (HTML) text, using our message property, or as some content (e.g., a list),
+//       using our default slot, in which case our message property is ignored.
+
 defineEmits<{
   ok: [];
 }>();
 
-defineProps<{
-  title: string;
-  message: string;
-}>();
+withDefaults(
+  defineProps<{
+    title: string;
+    message?: string;
+    severity?: Severity;
+  }>(),
+  {
+    message: '',
+    severity: 'info'
+  }
+);
+
+const ICONS: Record<Severity, string> = {
+  info: 'pi pi-info-circle',
+  success: 'pi pi-check-circle',
+  warning: 'pi pi-exclamation-triangle',
+  danger: 'pi pi-times-circle'
+};
 </script>
diff --git a/src/renderer/src/components/dialogs/OpenLocationDialog.vue b/src/renderer/src/components/dialogs/OpenLocationDialog.vue
new file mode 100644
index 000000000..aedbc65ec
--- /dev/null
+++ b/src/renderer/src/components/dialogs/OpenLocationDialog.vue
@@ -0,0 +1,504 @@
+<template>
+  <BaseDialog header="Open Location" class="w-169" @cancel="reset">
+    <div class="flex flex-col gap-2 mt-1 mb-2">
+      <p class="description">Enter the {{ inputDescription }} of a CellML file, SED-ML file, or COMBINE archive.</p>
+      <IconField>
+        <InputIcon class="pi pi-link" />
+        <InputText ref="inputRef" v-model="url" autofocus fluid
+          :invalid="showIssue"
+          placeholder="https://example.com/model.omex"
+          spellcheck="false"
+          autocomplete="off"
+          autocapitalize="off"
+          inputmode="url"
+          @blur="onBlur"
+          @keydown.enter="onKeydownEnter"
+        />
+        <!--
+        Note: our clear button is a real button (rather than an input icon) so that it can be used with the keyboard,
+              but it is styled and positioned like an input icon (see .p-inputicon).
+        -->
+        <button v-if="url" ref="clearButtonRef" class="p-inputicon clear-button pi pi-times" type="button" v-hint="'Clear'"
+          @mousedown.prevent
+          @blur="onBlur"
+          @click="onClear"
+        />
+      </IconField>
+
+      <!--
+      Message, which always takes the same space (whether there is a message to show or not), so that the height of the
+      dialog doesn't change.
+      -->
+
+      <div class="message">
+        <p v-if="showIssue" class="issue" role="alert">
+          <i class="pi pi-exclamation-circle"></i>
+          <span>Please enter a valid {{ validInputDescription }} (e.g., <code>https://example.com/model.omex</code>).</span>
+        </p>
+        <p v-else-if="normalisedUrl && normalisedUrl !== url.trim() && !normalisedUrl.startsWith('data:')" class="hint"
+          v-hint="willOpenMessageTruncated ? `This will open ${normalisedUrl}.` : ''"
+          @pointerenter="onWillOpenMessagePointerEnter"
+        >
+          <i class="pi pi-info-circle"></i>
+          <span ref="willOpenMessageRef">This will open <code>{{ normalisedUrl }}</code>.</span>
+        </p>
+      </div>
+    </div>
+    <template #footer>
+      <Button label="Open" :disabled="!normalisedUrl" @click="emitOpenLocation" />
+      <Button ref="cancelButtonRef" label="Cancel" severity="secondary" @click="emitClose" />
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import * as vue from 'vue';
+
+import * as common from '../../common/common';
+import { electronApi } from '../../common/electronApi';
+import { vHint } from '../../common/hint';
+
+const emit = defineEmits<{
+  openLocation: [url: string];
+  close: [];
+}>();
+
+const url = vue.ref<string>('');
+const checked = vue.ref<boolean>(false);
+
+// The URL to open, if valid, i.e. the given URL without any leading/trailing whitespace, with a lowercase scheme (e.g.,
+// "Https://" becomes "https://", as some mobile keyboards capitalise the first letter of what is typed), and with an
+// https:// scheme if it has no scheme (e.g., "example.com/model.omex" becomes "https://example.com/model.omex"), and
+// with the dot segments of its path, if any, resolved (see Note #6).
+// Note #1: a scheme is followed by "//", so that, for instance, "localhost:8080/model.omex" is not considered as having
+//          a "localhost" scheme.
+// Note #2: a URL without a scheme must have a host that looks like one (i.e. a domain name, an IP address, or
+//          localhost), so that, for instance, some random text is not considered as a valid URL. A domain name or an
+//          IPv4 address is a host (as typed, i.e. before it gets normalised by the URL parser) with at least two
+//          dot-separated labels, none of which is empty (with an optional trailing dot), so that, for instance, a
+//          relative path (e.g., "./model.omex", which host would be ".") or a number (e.g., "42") is not considered as
+//          a valid URL. (A relative path which first segment looks like a domain name (e.g., "model.omex") is still
+//          considered as a valid URL (i.e. "https://model.omex"), hence we let people know which URL will be opened.)
+//          An IPv4 address must also be typed as the URL parser would normalise it (i.e. as four decimal numbers,
+//          without leading zeros and without a trailing dot), so that, for instance, a number with dot-separated parts
+//          (e.g., "3.14", which the URL parser would normalise to "3.0.0.14") or an address with leading zeros (e.g.,
+//          "192.168.010.001", which the URL parser would normalise to "192.168.8.1" since "010" is an octal number) is
+//          not considered as a valid URL. A URL with a scheme can have any host (e.g., an intranet host, such as
+//          "http://modelserver/model.omex").
+// Note #3: a data URL is also valid if it is a Base64-encoded COMBINE archive (i.e. "data:application/zip;base64,...")
+//          or zipped CellML file (i.e. "data:application/x.vnd.zip-cellml+zip;base64,..."), since it can then be opened
+//          like any other file (see OpenCOR.openFile() and locCommon.zipDataFromDataUrl()). It is used as is, apart
+//          from its scheme, media type, and ";base64" which are lowercased (since locCommon.zipDataFromDataUrl()
+//          expects them to be), so, unlike for other URLs, we don't let people know which URL will be opened since it
+//          would be (nearly) the same and it can be very long.
+// Note #4: a URL without a scheme must also have no user name and no password, so that, for instance, an email address
+//          (e.g., "user@example.com") or a mailto link (e.g., "mailto:user@example.com", which has no "//" after its
+//          scheme) is not considered as a valid URL, i.e. as "https://user@example.com" or as
+//          "https://mailto:user@example.com" (where "mailto" would be a user name and "user" a password). A URL with a
+//          scheme can have a user name and a password (e.g., "https://user@example.com/model.omex").
+// Note #5: in OpenCOR (i.e. not in OpenCOR's Web app), a local file can also be opened, be it using a "file" URL with
+//          no host or a "localhost" host (e.g., "file:///some/path/model.omex") or an absolute file path (e.g.,
+//          "/some/path/model.omex" or, on Windows, "C:\some\path\model.omex" or "\\server\share\model.omex"), since it
+//          can then be opened like any other file (see OpenCOR.openFile()). It is used as is, apart from the scheme of
+//          a "file" URL which is lowercased, and it is not decoded (see emitOpenLocation()). A "file" URL with another
+//          host (e.g., "file://server/share/model.omex") is not considered as valid since libOpenCOR would consider it
+//          as a remote file, which it would then retrieve synchronously (i.e. freezing our UI). A relative file path is
+//          not considered as valid either since it would be relative to the working directory of OpenCOR, which people
+//          cannot know. Neither is a "file" URL or a file path that doesn't end with a file name (e.g., "file:/",
+//          "file:///some/path/", "/", "/some/path/..", or "C:\"), since it cannot refer to a file. Note that the query
+//          and fragment of a "file" URL are ignored by libOpenCOR (e.g., "file:///some/path/model.omex?a=b#c" refers to
+//          "/some/path/model.omex"), hence we only check its path.
+// Note #6: the path of a Web address may contain dot segments (e.g., "https://example.com/some/path/../model.omex"),
+//          which we resolve (e.g., "https://example.com/some/model.omex"), so that people know which URL will really be
+//          opened, and so that the name of the file that gets opened is not "." or ".." (e.g., for
+//          "https://example.com/some/path/.."). A Web address need not end with a file name (e.g.,
+//          "https://example.com/some/path/download"), so a path that resolves to a "directory" (e.g.,
+//          "https://example.com/some/") is still valid. Only the path of the URL is changed (using the path, as
+//          percent-encoded by the URL parser), i.e. the rest of the URL is used as typed (e.g., its host is not
+//          lowercased or converted to Punycode).
+
+const DATA_URL_REGEX = /^data:(application\/(?:zip|x\.vnd\.zip-cellml\+zip);base64),/i;
+const DOTTED_HOST_REGEX = /^[^.]+(?:\.[^.]+)+\.?$/;
+const IPV4_ADDRESS_REGEX = /^\d+\.\d+\.\d+\.\d+$/;
+const FILE_URL_REGEX = /^file:\//i;
+const FILE_URL_HOST_REGEX = /^file:\/\/([^/?#]*)/i;
+const FILE_URL_WITHOUT_FILE_NAME_PATH_REGEX = /(?:^|\/)(?:[a-z]:)?$/i;
+const POSIX_ABSOLUTE_FILE_PATH_REGEX = /^\/.*[^/]$/;
+const WINDOWS_ABSOLUTE_FILE_PATH_REGEX = /^(?:[a-z]:[\\/]|\\\\[^\\/]+[\\/][^\\/]+[\\/]).*[^\\/]$/i;
+const DOT_SEGMENT_FILE_PATH_REGEX = /(?:^|[\\/])\.\.?$/;
+const DOT_SEGMENT_URL_PATH_REGEX = /(?:^|[\\/])(?:\.|%2e){1,2}(?=[\\/]|$)/i;
+
+// Resolve the dot segments of the path of the given Web address, if any, using the path of its parsed version (see
+// Note #6 above).
+// Note: the authority of a Web address starts after all the slashes that follow its scheme (the URL parser skips any
+//       number of them, e.g., "https:///example.com/model.omex" has "example.com" as its host) and ends with its path,
+//       query, or fragment, if any, while its path ends with its query or fragment, if any. A backslash is considered
+//       as a forward slash by the URL parser for a Web address.
+
+const resolvedDotSegmentsUrl = (urlWithScheme: string, parsedUrl: URL): string => {
+  const schemeEnd = urlWithScheme.indexOf(':') + 1;
+  const authorityOffset = urlWithScheme.slice(schemeEnd).search(/[^\\/]/);
+
+  if (authorityOffset === -1) {
+    return urlWithScheme;
+  }
+
+  const authorityStart = schemeEnd + authorityOffset;
+  const pathOffset = urlWithScheme.slice(authorityStart).search(/[\\/?#]/);
+
+  if (pathOffset === -1) {
+    return urlWithScheme;
+  }
+
+  const pathStart = authorityStart + pathOffset;
+  const pathAndRest = urlWithScheme.slice(pathStart);
+  const pathLength = pathAndRest.search(/[?#]/);
+  const path = pathLength === -1 ? pathAndRest : pathAndRest.slice(0, pathLength);
+
+  if (!DOT_SEGMENT_URL_PATH_REGEX.test(path)) {
+    return urlWithScheme;
+  }
+
+  return `${urlWithScheme.slice(0, pathStart)}${parsedUrl.pathname}${pathAndRest.slice(path.length)}`;
+};
+
+// What can be entered, depending on whether local files are supported (see Note #5 above).
+
+const localFilesSupported = !!electronApi;
+const inputDescription = localFilesSupported ? 'URL or path' : 'URL';
+const validInputDescription = localFilesSupported ? 'Web address or file path' : 'Web address';
+
+// The local file to open, if any (see Note #5 above).
+
+const localFile = vue.computed<string>(() => {
+  if (!localFilesSupported) {
+    return '';
+  }
+
+  const trimmedUrl = url.value.trim();
+
+  if (FILE_URL_REGEX.test(trimmedUrl)) {
+    // Note: we check the host of our "file" URL as typed (as libOpenCOR does) rather than as normalised by the URL
+    //       parser, which, for instance, considers that "file://C:/some/path/model.omex" has no host while libOpenCOR
+    //       considers that its host is "C:".
+
+    const fileUrlHost = FILE_URL_HOST_REGEX.exec(trimmedUrl)?.[1] ?? '';
+
+    if (fileUrlHost && fileUrlHost.toLowerCase() !== 'localhost') {
+      return '';
+    }
+
+    const fileUrl = `file:${trimmedUrl.slice(5)}`;
+
+    try {
+      return FILE_URL_WITHOUT_FILE_NAME_PATH_REGEX.test(new URL(fileUrl).pathname) ? '' : fileUrl;
+    } catch {
+      return '';
+    }
+  }
+
+  return (common.isWindows() ? WINDOWS_ABSOLUTE_FILE_PATH_REGEX : POSIX_ABSOLUTE_FILE_PATH_REGEX).test(trimmedUrl) &&
+    !DOT_SEGMENT_FILE_PATH_REGEX.test(trimmedUrl)
+    ? trimmedUrl
+    : '';
+});
+
+const normalisedUrl = vue.computed<string>(() => {
+  const trimmedUrl = url.value.trim();
+
+  if (!trimmedUrl) {
+    return '';
+  }
+
+  if (localFile.value) {
+    return localFile.value;
+  }
+
+  const dataUrlMediaType = DATA_URL_REGEX.exec(trimmedUrl)?.[1];
+
+  if (dataUrlMediaType) {
+    return `data:${dataUrlMediaType.toLowerCase()}${trimmedUrl.slice(5 + dataUrlMediaType.length)}`;
+  }
+
+  const scheme = /^([a-z][a-z\d+.-]*):\/\//i.exec(trimmedUrl)?.[1];
+  const urlWithScheme = scheme ? `${scheme.toLowerCase()}${trimmedUrl.slice(scheme.length)}` : `https://${trimmedUrl}`;
+
+  // The host of our URL, as typed, if it has no scheme (i.e. what comes before its path, query, or fragment, without
+  // its port, if any).
+
+  const typedHost = scheme ? '' : (trimmedUrl.split(/[/?#\\]/, 1)[0] ?? '').replace(/:\d*$/, '');
+
+  try {
+    const parsedUrl = new URL(urlWithScheme);
+
+    if (
+      (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') &&
+      (scheme ||
+        (!parsedUrl.username &&
+          !parsedUrl.password &&
+          ((DOTTED_HOST_REGEX.test(typedHost) &&
+            (!IPV4_ADDRESS_REGEX.test(parsedUrl.hostname) || parsedUrl.hostname === typedHost)) ||
+            parsedUrl.hostname.startsWith('[') ||
+            parsedUrl.hostname === 'localhost')))
+    ) {
+      return resolvedDotSegmentsUrl(urlWithScheme, parsedUrl);
+    }
+  } catch {
+    // The URL is not valid.
+  }
+
+  return '';
+});
+
+// Let people know that their URL is not valid, but only once they are done typing it (i.e. once they leave our input
+// field or try to open it, which doesn't count if there is no URL to open), so that they are not told off while still
+// typing it.
+// Note #1: once our URL is valid (or empty), it is no longer considered as checked, so that people are not told off
+//          (again) while editing it (or typing a new one). Similarly, we only consider our URL as checked when leaving
+//          our input field if it is not valid (e.g., not when people tab from a valid URL to our Open button and back
+//          to our URL to edit it).
+// Note #2: our input field is also blurred when our dialog gets hidden (i.e. after we have been reset since the
+//          keyboard focus is then given back to whatever had it before our dialog was shown), so we only consider our
+//          URL as checked when leaving our input field if there is a URL to check. Otherwise, our URL would be
+//          considered as checked the next time our dialog is shown and people would be told off while typing it.
+// Note #3: our issue is an alert, so that it gets announced by assistive technologies when it is shown.
+// Note #4: we don't consider our URL as checked when leaving our input field for our Cancel button or the close button
+//          of our dialog, since our dialog is then about to be closed. Otherwise, our issue would briefly be shown
+//          (and announced) before our dialog gets closed. Our input field is left either when the keyboard focus moves
+//          to one of those buttons (e.g., using Tab or, in some browsers, when clicking it), in which case we know
+//          which button gets the keyboard focus, or when one of those buttons is pressed (in browsers where clicking a
+//          button doesn't give it the keyboard focus, e.g., Safari), in which case we need to know which button is
+//          being pressed, hence we keep track of it (in the capture phase, i.e. before our input field gets blurred)
+//          until it has been clicked (rather than released since, with touch input, a button is released before our
+//          input field gets blurred).
+
+const showIssue = vue.computed<boolean>(() => {
+  return checked.value && !!url.value.trim() && !normalisedUrl.value;
+});
+
+vue.watch([normalisedUrl, url], ([newNormalisedUrl, newUrl]) => {
+  if (newNormalisedUrl || !newUrl.trim()) {
+    checked.value = false;
+  }
+});
+
+// Let people know which URL will be opened in full, using a hint, if our message about it is truncated (see .hint).
+// Note: we check whether our message is truncated when it gets hovered, i.e. before its hint gets shown (which happens
+//       after a delay, see hint.ts), rather than whenever our message or our dialog changes size.
+
+const willOpenMessageRef = vue.useTemplateRef<HTMLElement>('willOpenMessageRef');
+const willOpenMessageTruncated = vue.ref<boolean>(false);
+
+const onWillOpenMessagePointerEnter = (): void => {
+  const willOpenMessage = willOpenMessageRef.value;
+
+  willOpenMessageTruncated.value = !!willOpenMessage && willOpenMessage.scrollWidth > willOpenMessage.clientWidth;
+};
+
+const cancelButtonRef = vue.useTemplateRef<{ $el: HTMLElement }>('cancelButtonRef');
+
+let closeButtonPressed = false;
+
+const isCloseButton = (target: EventTarget | null): boolean => {
+  const cancelButton = cancelButtonRef.value?.$el;
+
+  if (!(target instanceof Element) || !cancelButton) {
+    return false;
+  }
+
+  return (
+    cancelButton.contains(target) ||
+    !!(target.closest('.p-dialog-close-button') && cancelButton.closest('.p-dialog')?.contains(target))
+  );
+};
+
+const onPointerDown = (event: PointerEvent): void => {
+  closeButtonPressed = isCloseButton(event.target);
+};
+
+const onClickOrPointerCancel = (): void => {
+  closeButtonPressed = false;
+};
+
+vue.onMounted(() => {
+  window.addEventListener('pointerdown', onPointerDown, true);
+  window.addEventListener('click', onClickOrPointerCancel, true);
+  window.addEventListener('pointercancel', onClickOrPointerCancel, true);
+});
+
+vue.onBeforeUnmount(() => {
+  window.removeEventListener('pointerdown', onPointerDown, true);
+  window.removeEventListener('click', onClickOrPointerCancel, true);
+  window.removeEventListener('pointercancel', onClickOrPointerCancel, true);
+});
+
+// Note: our input field and its clear button are considered as one, so moving the keyboard focus from one to the other
+//       doesn't count as leaving our input field (e.g., when tabbing to our clear button to clear an invalid URL, in
+//       which case our issue would otherwise briefly be shown (and announced) before our URL gets cleared), but leaving
+//       our clear button for anything else does.
+
+const clearButtonRef = vue.useTemplateRef<HTMLElement>('clearButtonRef');
+
+const isUrlField = (target: EventTarget | null): boolean => {
+  return target instanceof Node && (!!inputRef.value?.$el.contains(target) || !!clearButtonRef.value?.contains(target));
+};
+
+const onBlur = (event: FocusEvent): void => {
+  if (closeButtonPressed || isCloseButton(event.relatedTarget) || isUrlField(event.relatedTarget)) {
+    return;
+  }
+
+  checked.value = !!url.value.trim() && !normalisedUrl.value;
+};
+
+const reset = (): void => {
+  url.value = '';
+  checked.value = false;
+};
+
+// Clear our URL and give the keyboard focus back to our input field.
+// Note: our clear button disappears once our URL has been cleared, so if it has the keyboard focus (i.e. if it was used
+//       with the keyboard), then the keyboard focus would otherwise be lost.
+
+const inputRef = vue.useTemplateRef<{ $el: HTMLElement }>('inputRef');
+
+const onClear = (): void => {
+  reset();
+
+  inputRef.value?.$el.focus();
+};
+
+// Open our URL when Enter is pressed, unless it is to confirm some text being composed using an input method editor
+// (IME), e.g., for Chinese or Japanese (see common.isImeKeyDown()).
+
+const onKeydownEnter = (event: KeyboardEvent): void => {
+  if (common.isImeKeyDown(event)) {
+    return;
+  }
+
+  event.preventDefault();
+
+  emitOpenLocation();
+};
+
+const emitOpenLocation = (): void => {
+  checked.value = !!url.value.trim();
+
+  if (!normalisedUrl.value) {
+    return;
+  }
+
+  // Note #1: decodeURI() throws if the URL contains a malformed percent-encoded sequence (e.g., "%E0"), in which case
+  //          we use the URL as is.
+  // Note #2: a local file is not decoded since libOpenCOR decodes the path of a "file" URL itself, while a percent sign
+  //          is a valid character in a file path (e.g., "/some/path/my%20file.omex" and "/some/path/my file.omex" are
+  //          two different files).
+
+  let decodedUrl = normalisedUrl.value;
+
+  if (!localFile.value) {
+    try {
+      decodedUrl = decodeURI(decodedUrl);
+    } catch {
+      // The URL cannot be decoded, so use it as is.
+    }
+  }
+
+  emit('openLocation', decodedUrl);
+
+  emitClose();
+};
+
+const emitClose = (): void => {
+  reset();
+
+  emit('close');
+};
+</script>
+
+<style scoped>
+.description {
+  margin: 0 0 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+
+/**
+ * Note: PrimeVue's focus border takes precedence over its invalid border, so we make sure that an invalid URL is shown
+ *       as such even while being edited.
+ */
+
+.p-inputtext.p-invalid,
+.p-inputtext.p-invalid:focus {
+  border-color: var(--p-inputtext-invalid-border-color, var(--p-red-400));
+}
+
+/**
+ * Note: our clear button is a button that looks like an input icon, hence we reset the default styling of a button.
+ */
+
+.clear-button {
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: none;
+  color: var(--p-text-muted-color);
+  cursor: pointer;
+}
+
+.clear-button:hover {
+  color: var(--p-text-color);
+}
+
+.clear-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--p-primary-color);
+  color: var(--p-text-color);
+}
+
+.message {
+  height: 1.25rem;
+}
+
+/**
+ * Note: a message is shown on a single line (so that it never takes more space than we reserve for it), with an
+ *       ellipsis if it is too long. Our message about the URL that will be opened may be too long because of a long
+ *       URL, in which case it is shown in full in a hint (see onWillOpenMessagePointerEnter()). Our issue is only too
+ *       long if our dialog is very narrow, and it is announced in full by assistive technologies anyway.
+ */
+
+.hint,
+.issue {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+}
+
+.hint .pi,
+.issue .pi {
+  flex-shrink: 0;
+  line-height: inherit;
+}
+
+.hint span,
+.issue span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hint {
+  color: var(--p-text-muted-color);
+}
+
+.issue {
+  color: var(--p-red-500);
+}
+
+code {
+  font-size: 0.75rem;
+}
+</style>
diff --git a/src/renderer/src/components/dialogs/OpenRemoteDialog.vue b/src/renderer/src/components/dialogs/OpenRemoteDialog.vue
deleted file mode 100644
index 9b7fca5ff..000000000
--- a/src/renderer/src/components/dialogs/OpenRemoteDialog.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <BaseDialog header="Open Remote..." class="w-169">
-    <div class="items-center mt-2 mb-4">
-      <FloatLabel variant="on">
-        <InputText autofocus fluid v-model="url" @keyup.enter="emitOpenRemote" />
-        <label>URL</label>
-      </FloatLabel>
-    </div>
-    <template #footer>
-      <Button label="Open" :disabled="!url" @click="emitOpenRemote" />
-      <Button label="Cancel" severity="secondary" @click="emitClose" />
-    </template>
-  </BaseDialog>
-</template>
-
-<script setup lang="ts">
-import * as vue from 'vue';
-
-const emit = defineEmits<{
-  openRemote: [url: string];
-  close: [];
-}>();
-
-const url = vue.ref<string>('');
-
-const emitOpenRemote = (): void => {
-  if (!url.value) {
-    return;
-  }
-
-  emit('openRemote', decodeURI(url.value));
-
-  emitClose();
-};
-
-const emitClose = (): void => {
-  url.value = '';
-
-  emit('close');
-};
-</script>
diff --git a/src/renderer/src/components/dialogs/SettingsDialog.vue b/src/renderer/src/components/dialogs/SettingsDialog.vue
index d8237abb4..579c948d6 100644
--- a/src/renderer/src/components/dialogs/SettingsDialog.vue
+++ b/src/renderer/src/components/dialogs/SettingsDialog.vue
@@ -1,14 +1,39 @@
 <template>
-  <BaseDialog @hide="onHide">
-    <template #header>
-      <div class="flex grow gap-2 items-center">
-        <span class="p-dialog-title">Settings...</span>
-        <ThemeWidget v-if="themeCanBeChanged" class="ml-auto mr-2" :theme="theme" @mousedown.stop @switch="onThemeSwitch" />
-      </div>
-    </template>
-    <div class="flex gap-2 items-center">
-      <Checkbox inputId="checkForUpdatesAtStartup" :binary="true" v-model="checkForUpdatesAtStartup" />
-      <label for="checkForUpdatesAtStartup">Check for updates at startup</label>
+  <BaseDialog header="Settings" class="w-120" @hide="onHide">
+    <div class="settings">
+      <!-- Appearance -->
+
+      <section v-if="themeCanBeChanged" class="settings-section">
+        <div class="opencor-section-title">Appearance</div>
+        <div class="settings-row opencor-panel">
+          <div class="settings-row-label">Theme</div>
+          <div class="theme-options" role="group" aria-label="Theme">
+            <button v-for="themeOption in THEME_OPTIONS" :key="themeOption.theme" class="theme-option"
+              :class="{ 'theme-option-selected': themeOption.theme === theme }"
+              type="button"
+              :aria-pressed="themeOption.theme === theme"
+              @mousedown.prevent
+              @click="onThemeSwitch(themeOption.theme)"
+            >
+              <i :class="themeOption.icon" />
+              {{ themeOption.label }}
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <!-- Updates -->
+
+      <section class="settings-section">
+        <div class="opencor-section-title">Updates</div>
+        <label class="settings-row opencor-panel" for="checkForUpdatesAtStartup">
+          <span class="settings-row-text">
+            <span class="settings-row-label">Check for updates at startup</span>
+            <span class="settings-row-description">Get notified when a new version is available.</span>
+          </span>
+          <ToggleSwitch v-model="checkForUpdatesAtStartup" inputId="checkForUpdatesAtStartup" />
+        </label>
+      </section>
     </div>
     <template #footer>
       <Button autofocus label="OK" @click="onOk" />
@@ -33,13 +58,21 @@ const emit = defineEmits<{
 
 const { themeCanBeChanged } = useOpenCORContext();
 
+// Our theme options, in the same order as the themes of our theme button (see ThemeWidget.vue).
+
+const THEME_OPTIONS: { theme: OpenCORTheme; label: string; icon: string }[] = [
+  { theme: 'system', label: 'System', icon: 'pi pi-desktop' },
+  { theme: 'light', label: 'Light', icon: 'pi pi-sun' },
+  { theme: 'dark', label: 'Dark', icon: 'pi pi-moon' }
+];
+
 const checkForUpdatesAtStartup = vue.ref(settings.general.checkForUpdatesAtStartup);
 const theme = vue.ref<OpenCORTheme>(vueCommon.useTheme().theme());
 
 const initialiseDialog = () => {
   // Note #1: we can come here as a result of hiding the dialog and this in case the dialog gets opened multiple times.
-  //          We could do this when showing the dialog, but it might result in the UI flashing (e.g., a checkbox was
-  //          checked and then it gets unchecked), hence we do it when hiding the dialog.
+  //          We could do this when showing the dialog, but it might result in the UI flashing (e.g., a toggle switch
+  //          was on and then it gets turned off), hence we do it when hiding the dialog.
   // Note #2: we use our current theme rather than the one from our settings since the latter may not be valid (e.g., if
   //          our settings were edited by hand).
 
@@ -51,9 +84,19 @@ settings.onInitialised(() => {
   initialiseDialog();
 });
 
+// Keep track of our current theme, since it can also be changed using our theme button (see ThemeWidget.vue), in which
+// case we would otherwise show (and, if OK'ed, restore) the theme that was current when the dialog was last hidden.
+
+vue.watch(
+  () => vueCommon.useTheme().theme(),
+  (newTheme: OpenCORTheme) => {
+    theme.value = newTheme;
+  }
+);
+
 const onThemeSwitch = (newTheme: OpenCORTheme) => {
-  // Switch to the next theme and apply it straight away, so that the user can see what it looks like. It will be either
-  // confirmed (if the user clicks on OK) or reverted (otherwise) when the dialog gets hidden.
+  // Switch to the given theme and apply it straight away, so that the user can see what it looks like. It will be
+  // either confirmed (if the user clicks on OK) or reverted (otherwise) when the dialog gets hidden.
 
   theme.value = newTheme;
 
@@ -83,3 +126,112 @@ const onHide = () => {
   initialiseDialog();
 };
 </script>
+
+<style scoped>
+.settings {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0.875rem;
+}
+
+label.settings-row {
+  cursor: pointer;
+}
+
+.settings-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.settings-row-label {
+  color: var(--p-text-color);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.settings-row-description {
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+}
+
+/**
+ * Theme options, i.e. a segmented control.
+ */
+
+.theme-options {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.125rem;
+  padding: 0.1875rem;
+  border-radius: 0.5rem;
+  background-color: color-mix(in srgb, var(--p-text-color) 6%, transparent);
+}
+
+.theme-option {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.theme-option .pi {
+  font-size: 0.75rem;
+}
+
+.theme-option:hover {
+  color: var(--p-text-color);
+}
+
+.theme-option:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--p-primary-color);
+}
+
+.theme-option-selected {
+  background-color: var(--p-content-background);
+  box-shadow: 0 1px 2px color-mix(in srgb, #000 15%, transparent);
+  color: var(--p-text-color);
+}
+
+.theme-option-selected .pi {
+  color: var(--p-primary-color);
+}
+
+.theme-option-selected:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--p-primary-color),
+    0 1px 2px color-mix(in srgb, #000 15%, transparent);
+}
+
+/**
+ * Note: we don't want our toggle switch to be animated.
+ */
+
+:deep(.p-toggleswitch-slider),
+:deep(.p-toggleswitch-handle) {
+  transition: none;
+}
+</style>
diff --git a/src/renderer/src/components/dialogs/SimulationExperimentInteractiveViewSettingsDialog.vue b/src/renderer/src/components/dialogs/SimulationExperimentInteractiveViewSettingsDialog.vue
index 300448e70..000b4be7e 100644
--- a/src/renderer/src/components/dialogs/SimulationExperimentInteractiveViewSettingsDialog.vue
+++ b/src/renderer/src/components/dialogs/SimulationExperimentInteractiveViewSettingsDialog.vue
@@ -1,839 +1,628 @@
 <template>
-  <div ref="rootRef">
-    <BaseDialog v-bind="$attrs" header=" " class="w-270 h-210"
+  <div ref="rootRef" class="settings-dialog-root">
+    <BaseDialog v-bind="$attrs" header="Settings" class="settings-dialog w-270 h-210"
       :centreOn="centreOn"
-      @keydown.prevent.enter="onOk"
+      @keydown.enter="onKeydownEnter"
       @cancel="onCancel"
     >
-      <div class="h-full flex flex-col">
-        <Tabs v-model:value="activeTab" class="settings-tabs min-h-0">
-          <TabList class="mb-2">
-            <Tab value="simulation">
-              <i class="pi pi-clock mr-2"></i>Simulation
-            </Tab>
-            <Tab value="solvers">
-              <i class="pi pi-calculator mr-2"></i>Solvers
-            </Tab>
-            <Tab value="interactive">
-              <i class="pi pi-sliders-h mr-2"></i>Interactive
-            </Tab>
-          </TabList>
-          <TabPanels>
-            <!-- Simulation -->
-
-            <TabPanel value="simulation" class="h-full">
-              <div class="settings-section h-full flex flex-col">
-                <!-- Section description -->
-
-                <div class="section-header">
-                  <i class="pi pi-clock text-primary"></i>
-                  <div>
-                    <h3 class="section-title">Simulation</h3>
-                    <p class="section-description">Configure the initial, starting, and ending points of the simulation, as well as its point interval.</p>
+      <div class="settings-body h-full flex min-h-0">
+        <!-- Navigation -->
+
+        <nav class="settings-nav" aria-label="Settings sections">
+          <div v-for="navGroup in navGroups" :key="navGroup.label" class="settings-nav-group">
+            <div class="settings-nav-group-label opencor-section-title opencor-section-title-small">
+              <span>{{ navGroup.label }}</span>
+              <i v-if="navGroup.hasIssues" class="pi pi-exclamation-triangle settings-nav-issues" role="img" v-hint="'Some settings have issues'" />
+            </div>
+            <button v-for="navItem in navGroup.items" :key="navItem.label"
+              type="button"
+              class="settings-nav-item"
+              :class="{ 'settings-nav-item-active': isActiveSection(navItem) }"
+              :aria-current="isActiveSection(navItem) ? 'true' : undefined"
+              @click="selectSection(navItem)"
+            >
+              <i :class="navItem.icon" class="settings-nav-item-icon" />
+              <span class="flex-1 truncate">{{ navItem.label }}</span>
+              <i v-if="navItem.hasIssues" class="pi pi-exclamation-triangle settings-nav-issues" role="img" v-hint="'Some settings have issues'" />
+              <span v-if="navItem.count !== undefined" class="settings-nav-count">{{ navItem.count }}</span>
+            </button>
+          </div>
+        </nav>
+
+        <!-- Sections -->
+
+        <div class="settings-content">
+          <!-- Simulation -->
+
+          <section v-show="activeTab === 'simulation'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">Simulation</h3>
+                <p class="section-description">Configure the initial, starting, and ending points of the simulation, as well as its point interval.</p>
+              </div>
+            </header>
+            <div class="settings-form">
+              <div class="form-row">
+                <InputScientificNumberWidget v-model="localSettings.simulation.initialPoint" class="form-field"
+                  :label="`Initial point (${voiUnit})`"
+                  size="small"
+                />
+                <div class="form-field self-stretch">
+                  <div v-if="!simulationSettingsIssues.length" class="form-hint">
+                    <i class="pi pi-info-circle"></i>
+                    <span>Data points between the initial and starting points will not be tracked.</span>
+                  </div>
+                </div>
+              </div>
+              <div class="form-row">
+                <InputScientificNumberWidget v-model="localSettings.simulation.startingPoint" class="form-field"
+                  :label="`Starting point (${voiUnit})`"
+                  size="small"
+                />
+                <InputScientificNumberWidget v-model="localSettings.simulation.endingPoint" class="form-field"
+                  :label="`Ending point (${voiUnit})`"
+                  size="small"
+                />
+              </div>
+              <div class="form-row">
+                <InputScientificNumberWidget v-model="localSettings.simulation.pointInterval" class="form-field"
+                  :label="`Point interval (${voiUnit})`"
+                  size="small"
+                />
+                <div class="form-field self-stretch">
+                  <div v-if="!simulationSettingsIssues.length" class="form-hint">
+                    <i class="pi pi-info-circle"></i>
+                    <span>This will result in {{ numberOfDataPoints }} data points.</span>
                   </div>
                 </div>
+              </div>
+            </div>
+          </section>
 
-                <!-- Simulation settings -->
+          <!-- Solvers -->
 
-                <div class="settings-form">
-                  <div class="form-row">
-                    <InputScientificNumberWidget v-model="localSettings.simulation.initialPoint" class="form-field"
-                      :label="`Initial point (${voiUnit})`"
-                      size="small"
-                    />
-                    <div class="form-field self-stretch">
-                      <div v-if="!simulationSettingsIssues.length" class="form-field items-center text-muted-color text-sm">
-                        <i class="pi pi-info-circle mr-2"></i>
-                        <span>Data points between the initial and starting points will not be tracked.</span>
-                      </div>
-                    </div>
+          <section v-show="activeTab === 'solvers'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">Solvers</h3>
+                <p class="section-description">Configure CVODE's maximum step (additional settings will be added in the future).</p>
+              </div>
+            </header>
+            <div class="settings-form">
+              <div class="form-row">
+                <InputScientificNumberWidget v-model="localSettings.solvers.cvodeMaximumStep" class="form-field"
+                  :label="`CVODE's maximum step (${voiUnit})`"
+                  size="small"
+                />
+                <div class="form-field self-stretch">
+                  <div class="form-hint">
+                    <i class="pi pi-info-circle"></i>
+                    <span>Set to 0 to let CVODE choose a suitable step.</span>
                   </div>
-                  <div class="form-row">
-                    <InputScientificNumberWidget v-model="localSettings.simulation.startingPoint" class="form-field"
-                      :label="`Starting point (${voiUnit})`"
-                      size="small"
-                    />
-                    <InputScientificNumberWidget v-model="localSettings.simulation.endingPoint" class="form-field"
-                      :label="`Ending point (${voiUnit})`"
-                      size="small"
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Simulation inputs -->
+
+          <section v-show="activeTab === 'interactive' && activeInteractiveTab === 'simulationInputs'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">Simulation inputs</h3>
+                <p class="section-description">Configure the simulation inputs that a user can modify and that will be made available for setting model parameters.</p>
+              </div>
+              <Button class="shrink-0"
+                icon="pi pi-plus"
+                label="Add simulation input"
+                outlined
+                size="small"
+                @click="addInput"
+              />
+            </header>
+            <ScrollPanel class="min-h-0">
+              <div class="items-list">
+                <!-- Empty state -->
+
+                <div v-if="!localSettings.interactive.uiJson.input.length" class="empty-state">
+                  <i class="pi pi-sign-in empty-state-icon"></i>
+                  <p>No simulation inputs are configured.</p>
+                </div>
+
+                <!-- Simulation input cards -->
+
+                <div v-for="(input, inputIndex) in localSettings.interactive.uiJson.input" :key="`input_${inputIndex}`" class="card-item">
+                  <div class="card-header">
+                    <div class="card-title">
+                      <span class="item-index">{{ Number(inputIndex) + 1 }}</span>
+                      <span class="font-medium truncate">{{ input.name }}</span>
+                      <Tag :value="locApi.isDiscreteInput(input) ? 'Discrete' : 'Scalar'" severity="secondary" />
+                    </div>
+                    <ToolbarButtonWidget class="remove-button"
+                      icon="pi pi-trash"
+                      small
+                      label="Remove simulation input"
+                      tooltipAlign="end"
+                      @click="removeInput(inputIndex)"
                     />
                   </div>
-                  <div class="form-row">
-                    <InputScientificNumberWidget v-model="localSettings.simulation.pointInterval" class="form-field"
-                      :label="`Point interval (${voiUnit})`"
-                      size="small"
-                    />
-                    <div class="form-field self-stretch">
-                      <div v-if="!simulationSettingsIssues.length" class="form-field items-center text-muted-color text-sm">
-                        <i class="pi pi-info-circle mr-2"></i>
-                        <span>This will result in {{ numberOfDataPoints }} data points.</span>
+                  <div class="card-body">
+                    <!-- Common fields -->
+
+                    <div class="form-row">
+                      <FloatLabel variant="on" class="form-field">
+                        <InputText v-model="input.id" class="w-full" size="small" />
+                        <label>ID</label>
+                      </FloatLabel>
+                      <FloatLabel variant="on" class="form-field">
+                        <InputText v-model="input.name" class="w-full" size="small" />
+                        <label>Name</label>
+                      </FloatLabel>
+                      <FloatLabel variant="on" class="form-field">
+                        <Select
+                          :modelValue="locApi.isDiscreteInput(input) ? 'discrete' : 'scalar'"
+                          @update:modelValue="(val: string) => toggleInputType(inputIndex, val)"
+                          :options="[{label: 'Discrete', value: 'discrete'}, {label: 'Scalar', value: 'scalar'}]"
+                          optionLabel="label"
+                          optionValue="value"
+                          class="w-full"
+                          size="small"
+                          :appendTo="appendTarget"
+                        />
+                        <label>Type</label>
+                      </FloatLabel>
+                    </div>
+                    <div class="form-row">
+                      <InputScientificNumberWidget v-model="input.defaultValue" class="form-field"
+                        label="Default value"
+                        size="small"
+                      />
+                      <FloatLabel variant="on" class="form-field">
+                        <InputText v-model="input.visible" class="w-full" size="small" />
+                        <label>Visible (optional)</label>
+                      </FloatLabel>
+                    </div>
+
+                    <!-- Scalar model input fields -->
+
+                    <div v-if="locApi.isScalarInput(input)" class="form-row">
+                      <InputScientificNumberWidget v-model="input.minimumValue" class="form-field"
+                        label="Minimum value"
+                        size="small"
+                      />
+                      <InputScientificNumberWidget v-model="input.maximumValue" class="form-field"
+                        label="Maximum value"
+                        size="small"
+                      />
+                      <InputScientificNumberWidget v-model="input.stepValue" class="form-field"
+                        label="Step value (optional)"
+                        :allowEmpty="true"
+                        size="small"
+                      />
+                    </div>
+
+                    <!-- Discrete model input fields -->
+
+                    <div v-if="locApi.isDiscreteInput(input)" class="sub-list">
+                      <div class="sub-list-header">
+                        <span class="opencor-section-title opencor-section-title-small">Possible values</span>
+                        <Button
+                          icon="pi pi-plus"
+                          label="Add possible value"
+                          text
+                          size="small"
+                          @click="addPossibleValue(inputIndex)"
+                        />
+                      </div>
+                      <div v-if="!input.possibleValues.length" class="empty-state empty-state-tight">
+                        <p>No possible values are configured.</p>
+                      </div>
+                      <div v-else class="entries-list">
+                        <div v-for="(possibleValue, possibleValueIndex) in input.possibleValues" :key="`possible_value_${possibleValueIndex}`" class="entry-row">
+                          <span class="item-index">{{ Number(possibleValueIndex) + 1 }}</span>
+                          <FloatLabel variant="on" class="flex-1">
+                            <InputText v-model="possibleValue.name" class="w-full" size="small" />
+                            <label>Name</label>
+                          </FloatLabel>
+                          <InputScientificNumberWidget v-model="possibleValue.value" class="form-field"
+                            label="Value"
+                            size="small"
+                          />
+                          <ToolbarButtonWidget class="remove-button"
+                            icon="pi pi-times"
+                            small
+                            label="Remove possible value"
+                            tooltipAlign="end"
+                            @click="removePossibleValue(inputIndex, possibleValueIndex)"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </TabPanel>
+            </ScrollPanel>
+          </section>
 
-            <!-- Solvers -->
+          <!-- Model parameters -->
 
-            <TabPanel value="solvers" class="h-full">
-              <div class="settings-section h-full flex flex-col">
-                <!-- Section description -->
+          <section v-show="activeTab === 'interactive' && activeInteractiveTab === 'modelParameters'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">Model parameters</h3>
+                <p class="section-description">Configure the model parameters using the value of the simulation inputs.</p>
+              </div>
+              <Button class="shrink-0"
+                icon="pi pi-plus"
+                label="Add model parameter"
+                outlined
+                size="small"
+                @click="addParameter"
+              />
+            </header>
+            <ScrollPanel class="min-h-0">
+              <!-- Empty state -->
+
+              <div v-if="!localSettings.interactive.uiJson.parameters.length" class="empty-state">
+                <i class="pi pi-list empty-state-icon"></i>
+                <p>No model parameters are configured.</p>
+              </div>
 
-                <div class="section-header">
-                  <i class="pi pi-calculator text-primary"></i>
-                  <div>
-                    <h3 class="section-title">Solvers</h3>
-                    <p class="section-description">Configure CVODE's maximum step (additional settings will be added in the future).</p>
-                  </div>
+              <!-- Model parameter entries -->
+
+              <div v-else class="entries-list">
+                <div v-for="(parameter, parameterIndex) in localSettings.interactive.uiJson.parameters" :key="`param_${parameterIndex}`" class="entry-row">
+                  <span class="item-index">{{ Number(parameterIndex) + 1 }}</span>
+                  <FloatLabel variant="on" class="flex-1">
+                    <Select v-model="parameter.name"
+                      class="w-full" panelClass="item-filter"
+                      size="small"
+                      filter filterMode="lenient"
+                      :options="editableModelParameters"
+                      :appendTo="appendTarget"
+                    />
+                    <label>Model parameter</label>
+                  </FloatLabel>
+                  <FloatLabel v-hint.html="parameterValueTooltip()" variant="on" class="flex-1">
+                    <InputText v-model="parameter.value" class="w-full" size="small" />
+                    <label>Value</label>
+                  </FloatLabel>
+                  <ToolbarButtonWidget class="remove-button"
+                    icon="pi pi-times"
+                    small
+                    label="Remove model parameter"
+                    tooltipAlign="end"
+                    @click="removeParameter(parameterIndex)"
+                  />
                 </div>
+              </div>
+            </ScrollPanel>
+          </section>
 
-                <!-- Solvers settings -->
+          <!-- Simulation data -->
 
-                <div class="settings-form">
-                  <div class="form-row">
-                    <InputScientificNumberWidget v-model="localSettings.solvers.cvodeMaximumStep" class="form-field"
-                      :label="`CVODE's maximum step (${voiUnit})`"
+          <section v-show="activeTab === 'interactive' && activeInteractiveTab === 'simulationData'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">Simulation data</h3>
+                <p class="section-description">Configure the simulation data to be made available for plotting.</p>
+              </div>
+              <Button class="shrink-0"
+                icon="pi pi-plus"
+                label="Add simulation data"
+                outlined
+                size="small"
+                @click="addSimulationData"
+              />
+            </header>
+            <ScrollPanel class="min-h-0">
+              <!-- Empty state -->
+
+              <div v-if="!localSettings.interactive.uiJson.output.data.length" class="empty-state">
+                <i class="pi pi-database empty-state-icon"></i>
+                <p>No simulation data is configured.</p>
+              </div>
+
+              <!-- Simulation data entries -->
+
+              <div v-else class="entries-list">
+                <div v-for="(data, dataIndex) in localSettings.interactive.uiJson.output.data" :key="`data_${dataIndex}`" class="entry-row">
+                  <span class="item-index">{{ Number(dataIndex) + 1 }}</span>
+                  <FloatLabel variant="on" class="flex-1">
+                    <InputText v-model="data.id" class="w-full" size="small" />
+                    <label>ID</label>
+                  </FloatLabel>
+                  <FloatLabel variant="on" class="flex-1">
+                    <Select v-model="data.name"
+                      class="w-full" panelClass="item-filter"
                       size="small"
+                      filter filterMode="lenient"
+                      :options="allModelParameters"
+                      :appendTo="appendTarget"
                     />
-                    <div class="form-field self-stretch flex items-center">
-                      <div class="form-field items-center text-muted-color text-sm">
-                        <i class="pi pi-info-circle mr-2"></i>
-                        Set to 0 to let CVODE choose a suitable step.
-                      </div>
-                    </div>
-                  </div>
+                    <label>Model parameter</label>
+                  </FloatLabel>
+                  <ToolbarButtonWidget class="remove-button"
+                    icon="pi pi-times"
+                    small
+                    label="Remove simulation data"
+                    tooltipAlign="end"
+                    @click="removeSimulationData(dataIndex)"
+                  />
                 </div>
               </div>
-            </TabPanel>
-
-            <!-- Interactive -->
-
-            <TabPanel value="interactive" class="h-full">
-              <div class="h-full flex flex-col">
-                <Tabs v-model:value="activeInteractiveTab" class="min-h-0">
-                  <TabList class="mb-2">
-                    <Tab value="simulationInputs">
-                      <i class="pi pi-sign-in mr-2"></i>Simulation inputs
-                      <span class="ml-2 badge">{{ localSettings.interactive.uiJson.input.length }}</span>
-                    </Tab>
-                    <Tab value="modelParameters">
-                      <i class="pi pi-list mr-2"></i>Model parameters
-                      <span class="ml-2 badge">{{ localSettings.interactive.uiJson.parameters.length }}</span>
-                    </Tab>
-                    <Tab value="simulationData">
-                      <i class="pi pi-database mr-2"></i>Simulation data
-                      <span class="ml-2 badge">{{ localSettings.interactive.uiJson.output.data.length }}</span>
-                    </Tab>
-                    <Tab value="externalData">
-                      <i class="pi pi-download mr-2"></i>External data
-                      <span class="ml-2 badge">{{ externalDataCount }}</span>
-                    </Tab>
-                    <Tab value="plots">
-                      <i class="pi pi-chart-line mr-2"></i>Plots
-                      <span class="ml-2 badge">{{ localSettings.interactive.uiJson.output.plots.length }}</span>
-                    </Tab>
-                  </TabList>
-                  <TabPanels>
-                    <!-- Inputs -->
-
-                    <TabPanel value="simulationInputs" class="h-full">
-                      <div class="h-full flex flex-col">
-                        <div class="section-header section-header-interactive">
-                          <i class="pi pi-sliders-h text-primary"></i>
-                          <div>
-                            <h3 class="section-title">Simulation inputs</h3>
-                            <p class="section-description">
-                              Configure the simulation inputs that a user can modify and that will be made available for setting model parameters.
-                            </p>
-                          </div>
-                          <div class="flex-1"></div>
-                          <div class="flex-none">
-                            <Button
-                              icon="pi pi-plus"
-                              label="Add simulation input"
-                              outlined
-                              size="small"
-                              @click="addInput"
-                            />
-                          </div>
-                        </div>
-                        <ScrollPanel class="min-h-0">
-                          <div class="flex flex-col gap-4 mt-2">
-                            <!-- Empty state -->
-
-                            <div v-if="!localSettings.interactive.uiJson.input.length" class="empty-state">
-                              <i class="pi pi-info-circle empty-state-icon"></i>
-                              <p class="text-muted-color mb-2">No simulation inputs are configured.</p>
-                            </div>
-
-                            <!-- Simulation input cards -->
-
-                            <div v-for="(input, inputIndex) in localSettings.interactive.uiJson.input" :key="`input_${inputIndex}`">
-                              <div class="card-item">
-                                <div class="card-header">
-                                  <div class="flex items-center gap-2">
-                                    <span class="item-badge">{{ Number(inputIndex) + 1 }}</span>
-                                    <span class="font-medium">{{ input.name }}</span>
-                                    <Tag :value="locApi.isDiscreteInput(input) ? 'Discrete' : 'Scalar'" severity="info" size="small" />
-                                  </div>
-                                  <Button
-                                    icon="pi pi-trash"
-                                    severity="danger"
-                                    text rounded
-                                    size="small"
-                                    @click="removeInput(inputIndex)"
-                                  />
-                                </div>
-                                <div class="card-body">
-                                  <!-- Common fields -->
-
-                                  <div class="form-row">
-                                    <FloatLabel variant="on" class="form-field">
-                                      <InputText v-model="input.id" class="w-full" size="small" />
-                                      <label>ID</label>
-                                    </FloatLabel>
-                                    <FloatLabel variant="on" class="form-field">
-                                      <InputText v-model="input.name" class="w-full" size="small" />
-                                      <label>Name</label>
-                                    </FloatLabel>
-                                  </div>
-                                  <div class="form-row">
-                                    <InputScientificNumberWidget v-model="input.defaultValue" class="form-field"
-                                      label="Default value"
-                                      size="small"
-                                    />
-                                    <FloatLabel variant="on" class="form-field">
-                                      <InputText v-model="input.visible" class="w-full" size="small" />
-                                      <label>Visible (optional)</label>
-                                    </FloatLabel>
-                                  </div>
-
-                                  <!-- Type selector -->
-
-                                  <div class="form-row">
-                                    <FloatLabel variant="on" class="form-field">
-                                      <Select
-                                        :modelValue="locApi.isDiscreteInput(input) ? 'discrete' : 'scalar'"
-                                        @update:modelValue="(val: string) => toggleInputType(inputIndex, val)"
-                                        :options="[{label: 'Discrete', value: 'discrete'}, {label: 'Scalar', value: 'scalar'}]"
-                                        optionLabel="label"
-                                        optionValue="value"
-                                        class="w-full"
-                                        size="small"
-                                        :appendTo="appendTarget"
-                                      />
-                                      <label>Type</label>
-                                    </FloatLabel>
-                                  </div>
-
-                                  <!-- Scalar model input fields -->
-
-                                  <div v-if="locApi.isScalarInput(input)" class="form-row">
-                                    <InputScientificNumberWidget v-model="input.minimumValue" class="form-field"
-                                      label="Minimum value"
-                                      size="small"
-                                    />
-                                    <InputScientificNumberWidget v-model="input.maximumValue" class="form-field"
-                                      label="Maximum value"
-                                      size="small"
-                                    />
-                                    <InputScientificNumberWidget v-model="input.stepValue" class="form-field"
-                                      label="Step value (optional)"
-                                      :allowEmpty="true"
-                                      size="small"
-                                    />
-                                  </div>
-
-                                  <!-- Discrete model input fields -->
-
-                                  <div v-if="locApi.isDiscreteInput(input)">
-                                    <div class="flex items-center justify-between mb-2">
-                                      <label class="text-sm font-medium text-muted-color">Possible values</label>
-                                      <Button
-                                        icon="pi pi-plus"
-                                        label="Add possible value"
-                                        outlined
-                                        severity="info"
-                                        size="small"
-                                        @click="addPossibleValue(inputIndex)"
-                                      />
-                                    </div>
-                                    <div v-if="!input.possibleValues.length" class="empty-state empty-state-tight">
-                                      <i class="pi pi-info-circle empty-state-icon"></i>
-                                      <p class="text-muted-color mb-2">No possible values are configured.</p>
-                                    </div>
-                                    <div v-else class="possible-values-list">
-                                      <div v-for="(possibleValue, possibleValueIndex) in input.possibleValues" :key="`possible_value_${possibleValueIndex}`" class="entry-row">
-                                        <span class="index index-secondary">{{ Number(possibleValueIndex) + 1 }}</span>
-                                        <FloatLabel variant="on" class="flex-1">
-                                          <InputText v-model="possibleValue.name" class="w-full" size="small" />
-                                          <label>Name</label>
-                                        </FloatLabel>
-                                        <InputScientificNumberWidget v-model="possibleValue.value" class="form-field"
-                                          label="Value"
-                                          size="small"
-                                        />
-                                        <Button
-                                          icon="pi pi-times"
-                                          severity="secondary"
-                                          text rounded
-                                          size="small"
-                                          @click="removePossibleValue(inputIndex, possibleValueIndex)"
-                                        />
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </ScrollPanel>
-                      </div>
-                    </TabPanel>
-
-                    <!-- Model parameters -->
-
-                    <TabPanel value="modelParameters" class="h-full">
-                      <div class="h-full flex flex-col">
-                        <div class="section-header section-header-interactive">
-                          <!-- Section description -->
-
-                          <i class="pi pi-list text-primary"></i>
-                          <div>
-                            <h3 class="section-title">Model parameters</h3>
-                            <p class="section-description">
-                              Configure the model parameters using the value of the simulation inputs.
-                            </p>
-                          </div>
-                          <div class="flex-1"></div>
-
-                          <!-- Add button -->
-
-                          <div class="flex-none">
-                            <Button
-                              icon="pi pi-plus"
-                              label="Add model parameter"
-                              outlined
-                              size="small"
-                              @click="addParameter"
-                            />
-                          </div>
-                        </div>
+            </ScrollPanel>
+          </section>
 
-                        <!-- Model parameters scroll panel -->
-
-                        <ScrollPanel class="min-h-0">
-                          <div class="flex flex-col gap-4 mt-2">
-                            <!-- Empty state -->
-
-                            <div v-if="!localSettings.interactive.uiJson.parameters.length" class="empty-state">
-                              <i class="pi pi-info-circle empty-state-icon"></i>
-                              <p class="text-muted-color mb-2">No model parameters are configured.</p>
-                            </div>
-
-                            <!-- Model parameter entries -->
-
-                            <div v-else class="entries-list">
-                              <div v-for="(parameter, parameterIndex) in localSettings.interactive.uiJson.parameters" :key="`param_${parameterIndex}`" class="entry-row">
-                                <span class="index">{{ Number(parameterIndex) + 1 }}</span>
-                                <FloatLabel variant="on" class="flex-1">
-                                  <Select v-model="parameter.name"
-                                    class="w-full" panelClass="item-filter"
-                                    size="small"
-                                    filter filterMode="lenient"
-                                    :options="editableModelParameters"
-                                    :appendTo="appendTarget"
-                                  />
-                                  <label>Model parameter</label>
-                                </FloatLabel>
-                                <TooltipWidget :content="parameterValueTooltip()" class="flex-1">
-                                  <FloatLabel variant="on" class="w-full">
-                                    <InputText v-model="parameter.value" class="w-full" size="small" />
-                                    <label>Value</label>
-                                  </FloatLabel>
-                                </TooltipWidget>
-                                <Button
-                                  icon="pi pi-times"
-                                  text rounded
-                                  severity="secondary"
-                                  size="small"
-                                  @click="removeParameter(parameterIndex)"
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </ScrollPanel>
-                      </div>
-                    </TabPanel>
-
-                    <!-- Simulation data -->
-
-                    <TabPanel value="simulationData" class="h-full">
-                      <div class="h-full flex flex-col">
-                        <div class="section-header section-header-interactive">
-                          <i class="pi pi-database text-primary"></i>
-                          <div>
-                            <h3 class="section-title">Simulation data</h3>
-                            <p class="section-description">
-                              Configure the simulation data to be made available for plotting.
-                            </p>
-                          </div>
-                          <div class="flex-1"></div>
-                          <div class="flex-none">
-                            <Button
-                              icon="pi pi-plus"
-                              label="Add simulation data"
-                              outlined
-                              size="small"
-                              @click="addSimulationData"
-                            />
-                          </div>
-                        </div>
-                        <ScrollPanel class="min-h-0">
-                          <div class="flex flex-col gap-4 mt-2">
-                            <!-- Empty state -->
-
-                            <div v-if="!localSettings.interactive.uiJson.output.data.length" class="empty-state">
-                              <i class="pi pi-info-circle empty-state-icon"></i>
-                              <p class="text-muted-color mb-2">No simulation data is configured.</p>
-                            </div>
-
-                            <!-- Simulation data entries -->
-
-                            <div v-else class="entries-list">
-                              <div v-for="(data, dataIndex) in localSettings.interactive.uiJson.output.data" :key="`data_${dataIndex}`" class="entry-row">
-                                <span class="index">{{ Number(dataIndex) + 1 }}</span>
-                                <FloatLabel variant="on" class="flex-1">
-                                  <InputText v-model="data.id" class="w-full" size="small" />
-                                  <label>ID</label>
-                                </FloatLabel>
-                                <FloatLabel variant="on" class="flex-1">
-                                  <Select v-model="data.name"
-                                    class="w-full" panelClass="item-filter"
-                                    size="small"
-                                    filter filterMode="lenient"
-                                    :options="allModelParameters"
-                                    :appendTo="appendTarget"
-                                  />
-                                  <label>Model parameter</label>
-                                </FloatLabel>
-                                <Button
-                                  icon="pi pi-times"
-                                  text rounded
-                                  severity="secondary"
-                                  size="small"
-                                  @click="removeSimulationData(dataIndex)"
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </ScrollPanel>
-                      </div>
-                    </TabPanel>
-
-                    <!-- External data -->
-
-                    <TabPanel value="externalData" class="h-full">
-                      <div class="h-full flex flex-col">
-                        <div class="section-header section-header-interactive">
-                          <i class="pi pi-download text-primary"></i>
-                          <div>
-                            <h3 class="section-title">External data</h3>
-                            <p class="section-description">
-                              Import and configure the external data to be made available for plotting.
-                            </p>
-                          </div>
-                          <div class="flex-1"></div>
-                          <div class="external-data-drop-zone" :class="{ 'external-data-drop-zone-active': externalDataFileDragging }"
-                            @dragover.prevent="onExternalDataFileDragOver"
-                            @drop.prevent="onExternalDataFileDrop"
-                            @dragleave="onExternalDataFileDragLeave"
-                          >
-                            <input ref="externalDataFileRef" class="hidden"
-                              type="file" multiple
-                              accept=".csv,text/csv"
-                              @change="onExternalDataFileInputChange"
-                            />
-                            <Button class="m-2"
-                              icon="pi pi-folder-open"
-                              label="Import"
-                              outlined
-                              size="small"
-                              @click="importExternalDataFromFile"
-                            />
-                            <div class="external-data-url" :class="{ 'external-data-url-active': externalDataFileDragging }">
-                              <FloatLabel variant="on" class="flex-1">
-                                <InputText v-model="externalDataUrl" class="w-full" size="small" />
-                                <label>URL</label>
-                              </FloatLabel>
-                              <Button
-                                icon="pi pi-link"
-                                label="Import"
-                                outlined
-                                size="small"
-                                :disabled="!isExternalDataUrlValid"
-                                @click="importExternalDataFromUrl"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                        <ScrollPanel class="min-h-0 mt-1.25">
-                          <div class="flex flex-col gap-4">
-                            <!-- Empty state -->
-
-                            <div v-if="!(localSettings.interactive.uiJson.output.externalData ?? []).length" class="empty-state">
-                              <i class="pi pi-info-circle empty-state-icon"></i>
-                              <p class="text-muted-color mb-2">No external data is configured.</p>
-                            </div>
-
-                            <!-- External data files -->
-
-                            <div v-for="(externalDataFile, externalDataFileIndex) in (localSettings.interactive.uiJson.output.externalData ?? [])" :key="`external_data_file_${externalDataFileIndex}`">
-                              <div class="card-item">
-                                <div class="card-header">
-                                  <div class="flex items-center gap-2">
-                                    <span class="item-badge">{{ Number(externalDataFileIndex) + 1 }}</span>
-                                    <span class="font-medium">{{ externalDataDescription(externalDataFile, externalDataFileIndex) }}</span>
-                                    <Tag :value="`${externalDataSeries(externalDataFile).length} external data series`" severity="info" size="small" />
-                                  </div>
-                                  <div class="flex items-center gap-2">
-                                    <Button
-                                      icon="pi pi-plus"
-                                      label="Add external data"
-                                      outlined
-                                      severity="info"
-                                      size="small"
-                                      @click="addExternalData(externalDataFileIndex)"
-                                    />
-                                    <Button
-                                      icon="pi pi-trash"
-                                      severity="danger"
-                                      text rounded
-                                      size="small"
-                                      @click="removeExternalDataFile(externalDataFileIndex)"
-                                    />
-                                  </div>
-                                </div>
-                                <div class="card-body">
-                                <!-- Description and VOI expression -->
-
-                                  <div class="form-row">
-                                    <TooltipWidget :content="externalDataDescriptionTooltip()" class="flex-1">
-                                      <FloatLabel variant="on" class="w-full">
-                                        <InputText v-model="externalDataFile.description" class="w-full" size="small" />
-                                        <label>Description (optional)</label>
-                                      </FloatLabel>
-                                    </TooltipWidget>
-                                    <TooltipWidget :content="externalDataVoiExpressionTooltip()" class="flex-1">
-                                      <FloatLabel variant="on" class="w-full">
-                                        <InputText v-model="externalDataFile.voiExpression" class="w-full" size="small" />
-                                        <label>VOI expression (optional)</label>
-                                      </FloatLabel>
-                                    </TooltipWidget>
-                                  </div>
-
-                                  <!-- External data entries -->
-
-                                  <div v-if="!externalDataEntries(externalDataFile).length" class="empty-state empty-state-tight">
-                                    <i class="pi pi-info-circle empty-state-icon"></i>
-                                    <p class="text-muted-color mb-2">No external data is configured for this CSV file.</p>
-                                  </div>
-                                  <div v-else class="entries-list">
-                                    <div v-for="(externalData, externalDataIndex) in externalDataEntries(externalDataFile)" :key="`external_data_${externalDataFileIndex}_${externalDataIndex}`" class="entry-row">
-                                      <span class="index index-secondary">{{ Number(externalDataIndex) + 1 }}</span>
-                                      <FloatLabel variant="on" class="flex-1">
-                                        <InputText v-model="externalData.id" class="w-full" size="small" />
-                                        <label>ID</label>
-                                      </FloatLabel>
-                                      <FloatLabel variant="on" class="flex-1">
-                                        <Select v-model="externalData.name"
-                                          class="w-full" panelClass="item-filter"
-                                          size="small"
-                                          filter filterMode="lenient"
-                                          :options="externalDataSeries(externalDataFile)"
-                                          :appendTo="appendTarget"
-                                        />
-                                        <label>External data</label>
-                                      </FloatLabel>
-                                      <Button
-                                        icon="pi pi-times"
-                                        text rounded
-                                        severity="secondary"
-                                        size="small"
-                                        @click="removeExternalData(externalDataFileIndex, externalDataIndex)"
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </ScrollPanel>
-                      </div>
-                    </TabPanel>
-
-                    <!-- Plots -->
-
-                    <TabPanel value="plots" class="h-full">
-                      <div class="h-full flex flex-col">
-                        <div class="section-header section-header-interactive">
-                          <i class="pi pi-chart-line text-primary"></i>
-                          <div>
-                            <h3 class="section-title">Plots</h3>
-                            <p class="section-description">
-                              Configure the plots and the corresponding traces using the available simulation data.
-                            </p>
-                          </div>
-                          <div class="flex-1"></div>
-                          <div class="flex-none">
-                            <Button
-                              icon="pi pi-plus"
-                              label="Add plot"
-                              outlined
-                              size="small"
-                              @click="addPlot"
-                            />
-                          </div>
-                        </div>
-                        <ScrollPanel class="min-h-0">
-                          <div class="flex flex-col gap-4 mt-2">
-                            <!-- Empty state -->
-
-                            <div v-if="!localSettings.interactive.uiJson.output.plots.length" class="empty-state">
-                              <i class="pi pi-info-circle empty-state-icon"></i>
-                              <p class="text-muted-color mb-2">No plots are configured.</p>
-                            </div>
-
-                            <!-- Plot entries -->
-
-                            <div v-for="(plot, plotIndex) in localSettings.interactive.uiJson.output.plots" :key="`plot_${plotIndex}`" class="plot-item-row">
-                              <div class="card-item">
-                                <div class="plot-card-header">
-                                  <div class="flex items-center gap-2">
-                                    <span class="item-badge">{{ Number(plotIndex) + 1 }}</span>
-                                    <span class="font-medium text-sm">Plot #{{ Number(plotIndex) + 1 }}</span>
-                                    <Tag :value="plotTraceCount(plot) + ' trace' + (plotTraceCount(plot) !== 1 ? 's' : '')" severity="info" size="small" />
-                                  </div>
-                                  <div class="flex items-center gap-2">
-                                    <Button
-                                      icon="pi pi-plus"
-                                      label="Add trace"
-                                      outlined
-                                      severity="info"
-                                      size="small"
-                                      @click="addTrace(plotIndex)"
-                                    />
-                                    <Button
-                                      icon="pi pi-trash"
-                                      text rounded
-                                      severity="danger"
-                                      size="small"
-                                      @click="removePlot(plotIndex)"
-                                    />
-                                  </div>
-                                </div>
-                                <div class="plot-card-body">
-                                  <!-- Axes settings -->
-
-                                  <div class="form-row">
-                                    <FloatLabel variant="on" class="flex-1">
-                                      <InputText v-model="plot.xAxisTitle" class="w-full" size="small" />
-                                      <label>X axis title (optional)</label>
-                                    </FloatLabel>
-                                    <FloatLabel variant="on" class="flex-1">
-                                      <InputText v-model="plot.yAxisTitle" class="w-full" size="small" />
-                                      <label>Y axis title (optional)</label>
-                                    </FloatLabel>
-                                  </div>
-
-                                  <!-- Traces -->
-
-                                  <div class="traces-list">
-                                    <!-- Main trace -->
-
-                                    <Fieldset class="entry-row">
-                                      <template #legend="scope">
-                                        <span v-html="traceName(plot, -1)" />
-                                      </template>
-                                      <div class="entry-row entry-row-trace">
-                                        <div>
-                                          <span class="index index-secondary">1</span>
-                                        </div>
-                                        <div class="w-full">
-                                          <div class="mb-3">
-                                            <TooltipWidget :content="traceNameTooltip()" class="flex-1">
-                                              <FloatLabel variant="on" class="w-full">
-                                                <InputText v-model="plot.name" class="w-full" size="small" />
-                                                <label>Name (optional)</label>
-                                              </FloatLabel>
-                                            </TooltipWidget>
-                                          </div>
-                                          <div class="entry-row">
-                                            <TooltipWidget :content="xyValueTooltip(true)" class="flex-1">
-                                              <FloatLabel variant="on" class="w-full">
-                                                <InputText v-model="plot.xValue" class="w-full" size="small" />
-                                                <label>X value</label>
-                                              </FloatLabel>
-                                            </TooltipWidget>
-                                            <TooltipWidget :content="xyValueTooltip(false)" class="flex-1">
-                                              <FloatLabel variant="on" class="w-full">
-                                                <InputText v-model="plot.yValue" class="w-full" size="small" />
-                                                <label>Y value</label>
-                                              </FloatLabel>
-                                            </TooltipWidget>
-                                          </div>
-                                        </div>
-                                        <Button
-                                          icon="pi pi-times"
-                                          text rounded
-                                          severity="secondary"
-                                          size="small"
-                                          @click="removeTrace(plotIndex, -1)"
-                                        />
-                                      </div>
-                                    </Fieldset>
-
-                                    <!-- Additional traces -->
-
-                                    <div v-for="(trace, traceIndex) in plot.additionalTraces" :key="`trace_${traceIndex}`" class="entry-row">
-                                      <Fieldset class="entry-row">
-                                        <template #legend="scope">
-                                          <span v-html="traceName(plot, traceIndex)" />
-                                        </template>
-                                        <div class="entry-row entry-row-trace">
-                                          <div>
-                                            <span class="index index-secondary">{{ Number(traceIndex) + 2 }}</span>
-                                          </div>
-                                          <div class="w-full">
-                                            <div class="mb-3">
-                                              <TooltipWidget :content="traceNameTooltip()" class="flex-1">
-                                                <FloatLabel variant="on" class="w-full">
-                                                  <InputText v-model="trace.name" class="w-full" size="small" />
-                                                  <label>Name (optional)</label>
-                                                </FloatLabel>
-                                              </TooltipWidget>
-                                            </div>
-                                            <div class="entry-row">
-                                              <TooltipWidget :content="xyValueTooltip(true)" class="flex-1">
-                                                <FloatLabel variant="on" class="w-full">
-                                                  <InputText v-model="trace.xValue" class="w-full" size="small" />
-                                                  <label>X value</label>
-                                                </FloatLabel>
-                                              </TooltipWidget>
-                                              <TooltipWidget :content="xyValueTooltip(false)" class="flex-1">
-                                                <FloatLabel variant="on" class="w-full">
-                                                  <InputText v-model="trace.yValue" class="w-full" size="small" />
-                                                  <label>Y value</label>
-                                                </FloatLabel>
-                                              </TooltipWidget>
-                                            </div>
-                                          </div>
-                                          <Button
-                                            icon="pi pi-times"
-                                            text rounded
-                                            severity="secondary"
-                                            size="small"
-                                            @click="removeTrace(plotIndex, traceIndex)"
-                                          />
-                                        </div>
-                                      </Fieldset>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </ScrollPanel>
-                      </div>
-                    </TabPanel>
-                  </TabPanels>
-                </Tabs>
+          <!-- External data -->
+
+          <section v-show="activeTab === 'interactive' && activeInteractiveTab === 'externalData'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">External data</h3>
+                <p class="section-description">Import and configure the external data to be made available for plotting.</p>
               </div>
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </div>
+            </header>
+
+            <!-- Import bar, which accepts CSV files that are dropped on it -->
+
+            <div class="external-data-import" :class="{ 'external-data-import-active': externalDataFileDragging }"
+              @dragover.prevent="onExternalDataFileDragOver"
+              @drop.prevent="onExternalDataFileDrop"
+              @dragleave="onExternalDataFileDragLeave"
+            >
+              <input ref="externalDataFileRef" class="hidden"
+                type="file" multiple
+                accept=".csv,text/csv"
+                @change="onExternalDataFileInputChange"
+              />
+              <i class="pi pi-file-import external-data-import-icon"></i>
+              <span class="text-sm text-muted-color whitespace-nowrap">Drop CSV files here or</span>
+              <Button class="shrink-0"
+                icon="pi pi-folder-open"
+                label="Browse..."
+                outlined
+                size="small"
+                @click="importExternalDataFromFile"
+              />
+              <div class="external-data-import-url">
+                <div class="opencor-section-title opencor-section-title-small">or</div>
+                <FloatLabel variant="on" class="flex-1 min-w-0">
+                  <InputText v-model="externalDataUrl" class="w-full" size="small"
+                    @keydown.enter="onExternalDataUrlKeydownEnter"
+                  />
+                  <label>URL of a CSV file</label>
+                </FloatLabel>
+                <Button class="shrink-0"
+                  icon="pi pi-link"
+                  label="Import"
+                  outlined
+                  size="small"
+                  :disabled="!isExternalDataUrlValid"
+                  @click="importExternalDataFromUrl"
+                />
+              </div>
+            </div>
+            <ScrollPanel class="min-h-0">
+              <div class="items-list">
+                <!-- Empty state -->
 
-      <!-- Footer -->
+                <div v-if="!(localSettings.interactive.uiJson.output.externalData ?? []).length" class="empty-state">
+                  <i class="pi pi-download empty-state-icon"></i>
+                  <p>No external data is configured.</p>
+                </div>
 
-      <template #footer>
-        <div class="w-full flex flex-col gap-4">
+                <!-- External data files -->
 
-          <!-- Simulation issues -->
+                <div v-for="(externalDataFile, externalDataFileIndex) in (localSettings.interactive.uiJson.output.externalData ?? [])" :key="`external_data_file_${externalDataFileIndex}`" class="card-item">
+                  <div class="card-header">
+                    <div class="card-title">
+                      <span class="item-index">{{ Number(externalDataFileIndex) + 1 }}</span>
+                      <span class="font-medium truncate">{{ externalDataDescription(externalDataFile, externalDataFileIndex) }}</span>
+                      <Tag :value="`${externalDataSeries(externalDataFile).length} external data series`" severity="secondary" />
+                    </div>
+                    <div class="flex items-center gap-1 shrink-0">
+                      <Button
+                        icon="pi pi-plus"
+                        label="Add external data"
+                        text
+                        size="small"
+                        @click="addExternalData(externalDataFileIndex)"
+                      />
+                      <ToolbarButtonWidget class="remove-button"
+                        icon="pi pi-trash"
+                        small
+                        label="Remove external data file"
+                        tooltipAlign="end"
+                        @click="removeExternalDataFile(externalDataFileIndex)"
+                      />
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    <!-- Description and VOI expression -->
+
+                    <div class="form-row">
+                      <FloatLabel v-hint.html="externalDataDescriptionTooltip()" variant="on" class="flex-1">
+                        <InputText v-model="externalDataFile.description" class="w-full" size="small" />
+                        <label>Description (optional)</label>
+                      </FloatLabel>
+                      <FloatLabel v-hint.html="externalDataVoiExpressionTooltip()" variant="on" class="flex-1">
+                        <InputText v-model="externalDataFile.voiExpression" class="w-full" size="small" />
+                        <label>VOI expression (optional)</label>
+                      </FloatLabel>
+                    </div>
 
-          <template v-if="activeTab === 'simulation'">
-            <Popover ref="simulationSettingsIssuesPopoverRef" v-if="simulationSettingsIssues.length" :appendTo="appendTarget">
-              <div class="issues-popover-content">
-                <IssuesView class="border-none" :issues="simulationSettingsIssues" :extraSpace="false" />
+                    <!-- External data entries -->
+
+                    <div v-if="!externalDataEntries(externalDataFile).length" class="empty-state empty-state-tight">
+                      <p>No external data is configured for this CSV file.</p>
+                    </div>
+                    <div v-else class="entries-list">
+                      <div v-for="(externalData, externalDataIndex) in externalDataEntries(externalDataFile)" :key="`external_data_${externalDataFileIndex}_${externalDataIndex}`" class="entry-row">
+                        <span class="item-index">{{ Number(externalDataIndex) + 1 }}</span>
+                        <FloatLabel variant="on" class="flex-1">
+                          <InputText v-model="externalData.id" class="w-full" size="small" />
+                          <label>ID</label>
+                        </FloatLabel>
+                        <FloatLabel variant="on" class="flex-1">
+                          <Select v-model="externalData.name"
+                            class="w-full" panelClass="item-filter"
+                            size="small"
+                            filter filterMode="lenient"
+                            :options="externalDataSeries(externalDataFile)"
+                            :appendTo="appendTarget"
+                          />
+                          <label>External data</label>
+                        </FloatLabel>
+                        <ToolbarButtonWidget class="remove-button"
+                          icon="pi pi-times"
+                          small
+                          label="Remove external data"
+                          tooltipAlign="end"
+                          @click="removeExternalData(externalDataFileIndex, externalDataIndex)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-            </Popover>
-            <div :class="simulationSettingsIssues.length ? 'flex-row-reverse' : 'flex-row'" class="actions">
-              <span :class="{ 'invisible': simulationSettingsIssues.length }" class="status-valid">
-                <i class="pi pi-check-circle"></i>
-                <span>Simulation settings are valid!</span>
-              </span>
-              <Button :class="{ 'invisible': !simulationSettingsIssues.length }" outlined severity="warn" size="small"
-                @click="toggleSimulationSettingsIssues"
-              >
-                <i class="pi pi-exclamation-triangle mr-2"></i>
-                <span>{{ simulationSettingsIssues.length }} issue{{ simulationSettingsIssues.length !== 1 ? 's' : '' }}</span>
-                <i :class="showSimulationSettingsIssuesPanel ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center ml-2 text-xs!' : 'pi pi-arrow-up-right-and-arrow-down-left-from-center ml-2 text-xs!'"></i>
-              </Button>
-            </div>
-          </template>
+            </ScrollPanel>
+          </section>
 
-          <!-- Solvers issues -->
+          <!-- Plots -->
 
-          <template v-else-if="activeTab === 'solvers'">
-            <Popover ref="solversSettingsIssuesPopoverRef" v-if="solversSettingsIssues.length" :appendTo="appendTarget">
-              <div class="issues-popover-content">
-                <IssuesView class="border-none" :issues="solversSettingsIssues" :extraSpace="false" />
+          <section v-show="activeTab === 'interactive' && activeInteractiveTab === 'plots'" class="settings-section">
+            <header class="section-header">
+              <div class="min-w-0">
+                <h3 class="section-title">Plots</h3>
+                <p class="section-description">Configure the plots and the corresponding traces using the available simulation data.</p>
               </div>
-            </Popover>
-            <div :class="solversSettingsIssues.length ? 'flex-row-reverse' : 'flex-row'" class="actions">
-              <span :class="{ 'invisible': solversSettingsIssues.length }" class="status-valid">
-                <i class="pi pi-check-circle"></i>
-                <span>Solvers settings are valid!</span>
-              </span>
-              <Button :class="{ 'invisible': !solversSettingsIssues.length }" outlined severity="warn" size="small"
-                @click="toggleSolversSettingsIssues"
-              >
-                <i class="pi pi-exclamation-triangle mr-2"></i>
-                <span>{{ solversSettingsIssues.length }} issue{{ solversSettingsIssues.length !== 1 ? 's' : '' }}</span>
-                <i :class="showSolversSettingsIssuesPanel ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center ml-2 text-xs!' : 'pi pi-arrow-up-right-and-arrow-down-left-from-center ml-2 text-xs!'"></i>
-              </Button>
-            </div>
-          </template>
+              <Button class="shrink-0"
+                icon="pi pi-plus"
+                label="Add plot"
+                outlined
+                size="small"
+                @click="addPlot"
+              />
+            </header>
+            <ScrollPanel class="min-h-0">
+              <div class="items-list">
+                <!-- Empty state -->
+
+                <div v-if="!localSettings.interactive.uiJson.output.plots.length" class="empty-state">
+                  <i class="pi pi-chart-line empty-state-icon"></i>
+                  <p>No plots are configured.</p>
+                </div>
 
-          <!-- Interactive issues -->
+                <!-- Plot cards -->
 
-          <template v-else-if="activeTab === 'interactive'">
-            <Popover ref="uiJsonIssuesPopoverRef" v-if="uiJsonIssues.length" :appendTo="appendTarget">
-              <div class="issues-popover-content">
-                <IssuesView class="border-none" :issues="uiJsonIssues" :extraSpace="false" />
-              </div>
-            </Popover>
-            <div class="actions">
-              <div :class="uiJsonIssues.length ? 'flex-row-reverse' : 'flex-row'" class="actions">
-                <span :class="{ 'invisible': uiJsonIssues.length }" class="status-valid">
-                  <i class="pi pi-check-circle"></i>
-                  <span>Interactive settings are valid!</span>
-                </span>
-                <Button :class="{ 'invisible': !uiJsonIssues.length }" outlined severity="warn" size="small"
-                  @click="toggleUiJsonIssues"
-                >
-                  <i class="pi pi-exclamation-triangle mr-2"></i>
-                  <span>{{ uiJsonIssues.length }} issue{{ uiJsonIssues.length !== 1 ? 's' : '' }}</span>
-                  <i :class="showUiJsonIssuesPanel ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center ml-2 text-xs!' : 'pi pi-arrow-up-right-and-arrow-down-left-from-center ml-2 text-xs!'"></i>
-                </Button>
+                <div v-for="(plot, plotIndex) in localSettings.interactive.uiJson.output.plots" :key="`plot_${plotIndex}`" class="card-item">
+                  <div class="card-header">
+                    <div class="card-title">
+                      <span class="item-index">{{ Number(plotIndex) + 1 }}</span>
+                      <span class="font-medium">Plot #{{ Number(plotIndex) + 1 }}</span>
+                      <Tag :value="plotTraceCount(plot) + ' trace' + (plotTraceCount(plot) !== 1 ? 's' : '')" severity="secondary" />
+                    </div>
+                    <div class="flex items-center gap-1 shrink-0">
+                      <Button
+                        icon="pi pi-plus"
+                        label="Add trace"
+                        text
+                        size="small"
+                        @click="addTrace(plotIndex)"
+                      />
+                      <ToolbarButtonWidget class="remove-button"
+                        icon="pi pi-trash"
+                        small
+                        label="Remove plot"
+                        tooltipAlign="end"
+                        @click="removePlot(plotIndex)"
+                      />
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    <!-- Axes settings -->
+
+                    <div class="form-row">
+                      <FloatLabel variant="on" class="flex-1">
+                        <InputText v-model="plot.xAxisTitle" class="w-full" size="small" />
+                        <label>X axis title (optional)</label>
+                      </FloatLabel>
+                      <FloatLabel variant="on" class="flex-1">
+                        <InputText v-model="plot.yAxisTitle" class="w-full" size="small" />
+                        <label>Y axis title (optional)</label>
+                      </FloatLabel>
+                    </div>
+
+                    <!-- Traces, i.e. the plot's main trace followed by its additional traces -->
+
+                    <div class="sub-list">
+                      <span class="opencor-section-title opencor-section-title-small">Traces</span>
+                      <div v-for="(trace, traceIndex) in plotTraces(plot)" :key="`trace_${plotIndex}_${traceIndex}`" class="trace-item">
+                        <div class="trace-header">
+                          <span class="item-index">{{ Number(traceIndex) + 1 }}</span>
+                          <span class="trace-name truncate" v-html="traceName(plot, traceIndex - 1)" />
+                          <ToolbarButtonWidget class="remove-button ml-auto"
+                            icon="pi pi-times"
+                            small
+                            label="Remove trace"
+                            tooltipAlign="end"
+                            @click="removeTrace(plotIndex, traceIndex - 1)"
+                          />
+                        </div>
+                        <div class="form-row">
+                          <FloatLabel v-hint.html="traceNameTooltip()" variant="on" class="flex-1">
+                            <InputText v-model="trace.name" class="w-full" size="small" />
+                            <label>Name (optional)</label>
+                          </FloatLabel>
+                          <FloatLabel v-hint.html="xyValueTooltip(true)" variant="on" class="flex-1">
+                            <InputText v-model="trace.xValue" class="w-full" size="small" />
+                            <label>X value</label>
+                          </FloatLabel>
+                          <FloatLabel v-hint.html="xyValueTooltip(false)" variant="on" class="flex-1">
+                            <InputText v-model="trace.yValue" class="w-full" size="small" />
+                            <label>Y value</label>
+                          </FloatLabel>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-          </template>
+            </ScrollPanel>
+          </section>
+        </div>
+      </div>
 
-          <!-- OK/Cancel -->
+      <!--
+      Footer, i.e. the validation status of the active section's settings (or of our interactive settings as a whole)
+      and our OK/Cancel buttons.
+      -->
 
-          <div class="flex gap-4 justify-end">
+      <template #footer>
+        <div class="w-full flex items-center gap-4">
+          <Popover ref="issuesPopoverRef" :appendTo="appendTarget"
+            @show="issuesPopoverVisible = true"
+            @hide="issuesPopoverVisible = false"
+          >
+            <div class="issues-popover-content">
+              <IssuesView :issues="activeIssues" :extraSpace="false" />
+            </div>
+          </Popover>
+          <div class="flex-1 min-w-0 flex items-center">
+            <span v-if="!activeIssues.length" class="status-valid">
+              <i class="pi pi-check-circle"></i>
+              <span>{{ activeSettingsLabel }} settings are valid</span>
+            </span>
+            <Button v-else outlined severity="warn" size="small"
+              @click="toggleIssues"
+            >
+              <i class="pi pi-exclamation-triangle mr-2"></i>
+              <span>{{ activeIssues.length }} issue{{ activeIssues.length !== 1 ? 's' : '' }}</span>
+              <i :class="issuesPopoverVisible ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center ml-2 text-xs!' : 'pi pi-arrow-up-right-and-arrow-down-left-from-center ml-2 text-xs!'"></i>
+            </Button>
+          </div>
+          <div class="flex gap-2">
             <Button autofocus label="OK" @click="onOk" />
             <Button label="Cancel" severity="secondary" @click="onCancel" />
           </div>
@@ -850,6 +639,7 @@ import * as vue from 'vue';
 import * as common from '../../common/common';
 import { TOAST_LIFE } from '../../common/constants';
 import * as externalData from '../../common/externalData';
+import { vHint } from '../../common/hint';
 import * as vueCommon from '../../common/vueCommon';
 import * as locApi from '../../libopencor/locApi';
 import * as locUiJsonApi from '../../libopencor/locUiJsonApi';
@@ -928,16 +718,12 @@ vue.watch(
   { deep: true }
 );
 
-const simulationSettingsIssuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
-const solversSettingsIssuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
-const uiJsonIssuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
+const issuesPopoverRef = vue.ref<InstanceType<typeof Popover> | null>(null);
 const rootRef = vue.shallowRef<HTMLElement | null>(null);
 const appendTarget = vueCommon.useAppendTarget(rootRef as unknown as vue.Ref<HTMLElement | null>);
 const activeTab = vue.ref(DEFAULT_TAB);
 const activeInteractiveTab = vue.ref(DEFAULT_INTERACTIVE_TAB);
-const showSimulationSettingsIssuesPanel = vue.ref(false);
-const showSolversSettingsIssuesPanel = vue.ref(false);
-const showUiJsonIssuesPanel = vue.ref(false);
+const issuesPopoverVisible = vue.ref(false);
 const externalDataFileRef = vue.shallowRef<HTMLInputElement | null>(null);
 const externalDataFileDragging = vue.ref(false);
 const externalDataUrl = vue.ref('');
@@ -1115,10 +901,151 @@ const uiJsonIssues = vue.computed<locApi.IIssue[]>(() => {
   });
 });
 
+// The issues of the active section, i.e. of our simulation, solvers, or interactive settings, along with a label for
+// them.
+
+const activeIssues = vue.computed<locApi.IIssue[]>(() => {
+  if (activeTab.value === 'simulation') {
+    return simulationSettingsIssues.value;
+  }
+
+  if (activeTab.value === 'solvers') {
+    return solversSettingsIssues.value;
+  }
+
+  return uiJsonIssues.value;
+});
+
+const activeSettingsLabel = vue.computed<string>(() => {
+  return activeTab.value === 'simulation' ? 'Simulation' : activeTab.value === 'solvers' ? 'Solvers' : 'Interactive';
+});
+
+// Hide the issues popover if there are no longer any issues to show (since its toggle button is then hidden).
+
+vue.watch(
+  () => activeIssues.value.length,
+  (activeIssuesCount) => {
+    if (!activeIssuesCount) {
+      issuesPopoverRef.value?.hide();
+    }
+  }
+);
+
+// Our navigation, which groups our sections and lets people know about the number of items in a section and whether a
+// section (or group of sections) has issues.
+// Note: our interactive settings are validated as a whole, so we can only let people know that the group of interactive
+//       sections has issues, not which section(s) in particular.
+
+interface INavItem {
+  tab: string;
+  interactiveTab?: string;
+  label: string;
+  icon: string;
+  count?: number;
+  hasIssues?: boolean;
+}
+
+interface INavGroup {
+  label: string;
+  hasIssues: boolean;
+  items: INavItem[];
+}
+
+const navGroups = vue.computed<INavGroup[]>(() => {
+  const uiJson = localSettings.value.interactive.uiJson;
+
+  return [
+    {
+      label: 'General',
+      hasIssues: false,
+      items: [
+        {
+          tab: 'simulation',
+          label: 'Simulation',
+          icon: 'pi pi-clock',
+          hasIssues: simulationSettingsIssues.value.length > 0
+        },
+        {
+          tab: 'solvers',
+          label: 'Solvers',
+          icon: 'pi pi-calculator',
+          hasIssues: solversSettingsIssues.value.length > 0
+        }
+      ]
+    },
+    {
+      label: 'Interactive',
+      hasIssues: uiJsonIssues.value.length > 0,
+      items: [
+        {
+          tab: 'interactive',
+          interactiveTab: 'simulationInputs',
+          label: 'Simulation inputs',
+          icon: 'pi pi-sign-in',
+          count: uiJson.input.length
+        },
+        {
+          tab: 'interactive',
+          interactiveTab: 'modelParameters',
+          label: 'Model parameters',
+          icon: 'pi pi-list',
+          count: uiJson.parameters.length
+        },
+        {
+          tab: 'interactive',
+          interactiveTab: 'simulationData',
+          label: 'Simulation data',
+          icon: 'pi pi-database',
+          count: uiJson.output.data.length
+        },
+        {
+          tab: 'interactive',
+          interactiveTab: 'externalData',
+          label: 'External data',
+          icon: 'pi pi-download',
+          count: externalDataCount.value
+        },
+        {
+          tab: 'interactive',
+          interactiveTab: 'plots',
+          label: 'Plots',
+          icon: 'pi pi-chart-line',
+          count: uiJson.output.plots.length
+        }
+      ]
+    }
+  ];
+});
+
+const isActiveSection = (navItem: INavItem): boolean => {
+  return (
+    navItem.tab === activeTab.value &&
+    (navItem.interactiveTab === undefined || navItem.interactiveTab === activeInteractiveTab.value)
+  );
+};
+
+const selectSection = (navItem: INavItem): void => {
+  // Hide the issues popover since it may be about the issues of another section.
+
+  issuesPopoverRef.value?.hide();
+
+  activeTab.value = navItem.tab;
+
+  if (navItem.interactiveTab !== undefined) {
+    activeInteractiveTab.value = navItem.interactiveTab;
+  }
+};
+
 const plotTraceCount = (plot: locApi.IUiJsonOutputPlot): number => {
   return 1 + (plot.additionalTraces?.length ?? 0);
 };
 
+const plotTraces = (plot: locApi.IUiJsonOutputPlot): locApi.IUiJsonOutputPlotAdditionalTrace[] => {
+  // The traces of a plot, i.e. its main trace (i.e. the plot itself) followed by its additional traces, if any.
+
+  return [plot, ...(plot.additionalTraces ?? [])];
+};
+
 const externalDataDescriptionTooltip = (): string => {
   return `
     You can provide a description for the external data or leave it empty to have a description generated automatically as follows: <strong>External data #&lt;N&gt;</strong>.<br />
@@ -1193,10 +1120,14 @@ const removeInput = (index: number) => {
   localSettings.value.interactive.uiJson.input.splice(index, 1);
 };
 
+// Change the type of the given simulation input, which means recreating it (with some default values).
+// Note: a select lets us know about the selected value even if it was already selected, in which case there is nothing
+//       to do (otherwise, we would, for instance, lose the possible values of a discrete simulation input).
+
 const toggleInputType = (index: number, type: string) => {
   const input = localSettings.value.interactive.uiJson.input[index];
 
-  if (!input) {
+  if (!input || (type === 'discrete') === locApi.isDiscreteInput(input)) {
     return;
   }
 
@@ -1339,7 +1270,36 @@ const onExternalDataFileDragLeave = (): void => {
   externalDataFileDragging.value = false;
 };
 
+// Import some external data from our URL when Enter is pressed (rather than accept our settings, see onKeydownEnter()),
+// unless it is to confirm some text being composed using an input method (see common.isImeKeyDown()).
+
+const onExternalDataUrlKeydownEnter = (event: KeyboardEvent): void => {
+  if (common.isImeKeyDown(event)) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (isExternalDataUrlValid.value) {
+    void importExternalDataFromUrl();
+  }
+};
+
+// Import some external data from our URL.
+// Note: we may be asked to import some external data from our URL while we are already doing so (e.g., if Enter is
+//       pressed twice in a row, kept pressed, or if our Import button is double clicked), in which case we ignore the
+//       request since we would otherwise import the same external data several times.
+
+let importingExternalDataFromUrl = false;
+
 const importExternalDataFromUrl = async (): Promise<void> => {
+  if (importingExternalDataFromUrl) {
+    return;
+  }
+
+  importingExternalDataFromUrl = true;
+
   const url = externalDataUrl.value.trim();
 
   try {
@@ -1359,6 +1319,8 @@ const importExternalDataFromUrl = async (): Promise<void> => {
       detail: common.formatMessage(common.formatError(error)),
       life: TOAST_LIFE
     });
+  } finally {
+    importingExternalDataFromUrl = false;
   }
 };
 
@@ -1487,8 +1449,31 @@ const resetUxSettings = () => {
   activeTab.value = DEFAULT_TAB;
   activeInteractiveTab.value = DEFAULT_INTERACTIVE_TAB;
 
-  showSimulationSettingsIssuesPanel.value = false;
-  showUiJsonIssuesPanel.value = false;
+  issuesPopoverRef.value?.hide();
+};
+
+// Accept our settings when the user presses Enter in a text field (as in a native form), but not when, say, a button or
+// a select has the keyboard focus since Enter is then for it (e.g., to click a button, such as our Cancel button, or to
+// open a select), nor when Enter is used to confirm some text that is being composed (e.g., using an input method, see
+// common.isImeKeyDown()).
+
+const TEXT_FIELDS =
+  'input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="radio"], [type="range"], [type="reset"], [type="submit"])';
+
+const onKeydownEnter = (event: KeyboardEvent): void => {
+  if (
+    event.defaultPrevented ||
+    common.isImeKeyDown(event) ||
+    !(event.target instanceof HTMLInputElement) ||
+    !event.target.matches(TEXT_FIELDS) ||
+    event.target.closest('.p-select, .p-autocomplete')
+  ) {
+    return;
+  }
+
+  event.preventDefault();
+
+  onOk();
 };
 
 const onOk = () => {
@@ -1530,325 +1515,493 @@ const onCancel = () => {
   emit('close');
 };
 
-const toggleSimulationSettingsIssues = (event: Event) => {
-  simulationSettingsIssuesPopoverRef.value?.toggle(event);
+const toggleIssues = (event: Event) => {
+  // Note: whether our issues popover is visible is tracked using its show and hide events, so that it is also correct
+  //       when the popover gets hidden by clicking outside of it.
 
-  showSimulationSettingsIssuesPanel.value = !showSimulationSettingsIssuesPanel.value;
-};
-
-const toggleSolversSettingsIssues = (event: Event) => {
-  solversSettingsIssuesPopoverRef.value?.toggle(event);
-
-  showSolversSettingsIssuesPanel.value = !showSolversSettingsIssuesPanel.value;
-};
-
-const toggleUiJsonIssues = (event: Event) => {
-  uiJsonIssuesPopoverRef.value?.toggle(event);
-
-  showUiJsonIssuesPanel.value = !showUiJsonIssuesPanel.value;
+  issuesPopoverRef.value?.toggle(event);
 };
 </script>
 
 <style scoped>
-.actions {
-  display: flex;
-  justify-content: space-between;
+.settings-body {
+  gap: 1.25rem;
 }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.375rem;
-  font-size: 0.75rem;
-  font-weight: bold;
-  background-color: var(--p-button-primary-background);
-  color: var(--p-primary-contrast-color);
-  border-radius: 9999px;
-}
+/**
+ * Navigation.
+ */
 
-.card-body {
-  padding: 1rem;
+.settings-nav {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  flex-shrink: 0;
+  gap: 1rem;
+  width: 14.5rem;
+  padding-right: 1rem;
+  border-right: 1px solid var(--p-content-border-color);
+  overflow-y: auto;
 }
 
-.card-header {
+.settings-nav-group {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--p-content-border-color);
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
-.card-item {
-  border: 1px solid var(--p-content-border-color);
-  border-radius: 0.5rem;
-  overflow: hidden;
+.settings-nav-group-label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.625rem 0.25rem;
 }
 
-.empty-state {
+.settings-nav-item {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: var(--p-text-color);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
-.empty-state-icon {
-  font-size: 1.5rem;
+.settings-nav-item:hover {
+  background-color: var(--p-content-hover-background);
+}
+
+/**
+ * Note: our focus ring is drawn inside a nav item since our nav element can be scrolled, meaning that it would
+ *       otherwise get clipped by our nav element.
+ */
+
+.settings-nav-item:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--p-primary-color);
+}
+
+.settings-nav-item-active,
+.settings-nav-item-active:hover {
+  background-color: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+  color: var(--p-primary-color);
+  font-weight: 500;
+}
+
+.settings-nav-item-icon {
+  width: 1rem;
   color: var(--p-text-muted-color);
-  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  text-align: center;
 }
 
-.empty-state-tight {
-  padding: 0;
+.settings-nav-item-active .settings-nav-item-icon {
+  color: var(--p-primary-color);
 }
 
-.external-data-drop-zone {
-  border: 1px dashed var(--p-content-border-color);
-  border-radius: 0.5rem;
-  display: flex;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+.settings-nav-count {
+  min-width: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  background-color: color-mix(in srgb, var(--p-text-color) 8%, transparent);
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  line-height: 1.25rem;
+  text-align: center;
 }
 
-.external-data-drop-zone-active {
-  border-color: var(--p-primary-color);
-  background-color: color-mix(in srgb, var(--p-primary-color) 7%, transparent);
+.settings-nav-item-active .settings-nav-count {
+  background-color: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
+  color: var(--p-primary-color);
 }
 
-.external-data-url {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-left: 1px dashed var(--p-content-border-color);
-  padding: 0 0.5rem;
-  transition: border-left-color 0.2s ease;
+.settings-nav-issues {
+  color: var(--opencor-warn-color);
+  font-size: 0.75rem;
 }
 
-.external-data-url-active {
-  border-left-color: var(--p-primary-color);
+/**
+ * Sections.
+ */
+
+.settings-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
 }
 
-.entries-list {
+.settings-section {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  height: 100%;
+  min-height: 0;
 }
 
-.entry-row {
+.section-header {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
-.entry-row :deep(.p-fieldset-content-container),
-.entry-row :deep(.p-fieldset-content) {
-  width: 100%;
+.section-title {
+  margin: 0;
+  color: var(--p-text-color);
+  font-size: 1rem;
+  font-weight: 600;
 }
 
-.entry-row-trace {
-  align-items: stretch;
+.section-description {
+  margin: 0.25rem 0 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
 }
 
-.form-field {
-  flex: 1;
-  display: flex !important;
+/**
+ * Forms.
+ */
+
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 0.5rem;
 }
 
 .form-row {
   display: flex;
-  gap: 1rem;
   align-items: flex-start;
+  gap: 0.75rem;
 }
 
-.index {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.75rem;
-  font-weight: bold;
-  background-color: var(--p-button-primary-background);
-  color: var(--p-primary-contrast-color);
-  border-radius: 0.25rem;
+.form-field {
+  display: flex !important;
+  flex: 1;
+  min-width: 0;
 }
 
-.index-secondary {
-  background-color: var(--p-button-info-background);
-  border-radius: 9999px;
+/**
+ * Hint, which is vertically centred next to the field it is about, and whose icon is aligned with its first line (in
+ * case it spans several lines).
+ */
+
+.form-hint {
+  display: flex;
+  align-self: center;
+  align-items: flex-start;
+  gap: 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
 }
 
-.item-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.75rem;
-  font-weight: bold;
-  background-color: var(--p-button-primary-background);
-  color: var(--p-primary-contrast-color);
-  border-radius: 0.375rem;
+.form-hint .pi {
+  line-height: inherit;
 }
 
-.outputs-section {
+/**
+ * Lists, cards, and entries.
+ */
+
+.items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.card-item {
   border: 1px solid var(--p-content-border-color);
   border-radius: 0.5rem;
-  padding: 1rem;
+  overflow: hidden;
 }
 
-.outputs-section-header {
+.card-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.75rem;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+  border-bottom: 1px solid var(--p-content-border-color);
+  background-color: color-mix(in srgb, var(--p-text-color) 3%, transparent);
 }
 
-:global(.p-popover .issues-popover-content) {
-  width: max-content;
-  max-height: 30rem;
-  max-width: 50rem;
-  overflow-y: auto;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  font-size: 0.875rem;
 }
 
-:global(.p-select-overlay.item-filter .p-select-header > div > input) {
-  padding: 0.25rem;
-  padding-right: 0;
+.card-title .p-tag {
+  flex-shrink: 0;
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
 }
 
-:deep(.p-tabpanels) {
-  padding: 0;
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  padding: 1rem 0.75rem 0.75rem;
 }
 
-.plot-card-body {
-  padding: 0.75rem;
+.entries-list {
   display: flex;
   flex-direction: column;
+  gap: 0.625rem;
+  padding-top: 0.5rem;
 }
 
-.plot-card-header {
+.entry-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--p-content-border-color);
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.item-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 0.25rem;
+  border-radius: 0.375rem;
+  background-color: color-mix(in srgb, var(--p-text-color) 8%, transparent);
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+/**
+ * Note: our remove buttons are toolbar buttons (see ToolbarButtonWidget.vue) that turn red when hovered. They are
+ *       qualified with .toolbar-button so that our rule is more specific than the one that sets
+ *       --toolbar-button-hover-color in ToolbarButtonWidget.vue, rather than rely on the order of our stylesheets.
+ */
+
+.toolbar-button.remove-button {
+  --toolbar-button-hover-color: var(--opencor-error-color);
+  --p-content-hover-background: color-mix(in srgb, var(--opencor-error-color) 10%, transparent);
 }
 
-.possible-values-list {
+.sub-list {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.section-description {
-  margin: 0.25rem 0 0 0;
-  font-size: 0.875rem;
-  color: var(--p-text-muted-color);
+.sub-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.section-header {
+.trace-item {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
   gap: 0.75rem;
-  margin-bottom: 1.5rem;
+  padding: 0.375rem 0.5rem 0.75rem;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 0.375rem;
 }
 
-.section-header > i {
-  font-size: 1.5rem;
-  margin-top: 0.125rem;
+.trace-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  font-size: 0.875rem;
 }
 
-.section-header-interactive {
-  margin: 0.5rem 0 0.5rem 0;
+.trace-name {
+  min-width: 0;
 }
 
-.section-title {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: bold;
-  color: var(--p-text-color);
-}
-
-.settings-form {
+.empty-state {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1rem;
+  border: 1px dashed var(--p-content-border-color);
+  border-radius: 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  text-align: center;
 }
 
-.settings-section {
-  padding-top: 0.5rem;
+.empty-state p {
+  margin: 0;
 }
 
-.settings-tabs :deep(.p-button-sm.p-button-icon-only) {
-  width: var(--p-button-icon-only-width);
+.empty-state-icon {
+  font-size: 1.5rem;
 }
 
-.settings-tabs :deep(.p-button-sm.p-button-icon-only.p-button-rounded) {
-  height: var(--p-button-icon-only-width);
+.empty-state-tight {
+  padding: 0.75rem;
 }
 
-.settings-tabs :deep(.p-tab) {
+/**
+ * External data import bar.
+ */
+
+.external-data-import {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
   padding: 0.75rem 1rem;
-  font-weight: bold;
+  border: 1px dashed var(--p-content-border-color);
+  border-radius: 0.5rem;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
 }
 
-.settings-tabs :deep(.p-tablist) {
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--p-content-border-color);
+.external-data-import-active {
+  border-color: var(--p-primary-color);
+  background-color: color-mix(in srgb, var(--p-primary-color) 7%, transparent);
 }
 
-.settings-tabs :deep(.p-tabpanels) {
-  overflow: hidden;
+.external-data-import-icon {
+  color: var(--p-text-muted-color);
+  font-size: 1.125rem;
 }
 
-.status-valid {
+/**
+ * Note: our URL field and its Import button are grouped (with the "or" that precedes them), so that they can be shown
+ *       on their own line in our narrow layout (see below), rather than be squashed next to our Browse... button.
+ */
+
+.external-data-import-url {
   display: flex;
+  flex: 1;
   align-items: center;
-  gap: 0.375rem;
-  color: var(--p-message-success-color);
-  font-size: 0.875rem;
+  gap: 0.75rem;
+  min-width: 0;
 }
 
-.status-valid i {
-  font-size: 1rem;
+/**
+ * Footer.
+ */
+
+.status-valid {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--opencor-success-color);
+  font-size: 0.8125rem;
 }
 
 .text-muted-color {
   color: var(--p-text-muted-color);
 }
 
-.text-primary {
-  color: var(--p-primary-color);
+:global(.p-popover .issues-popover-content) {
+  width: max-content;
+  max-height: 30rem;
+  max-width: 50rem;
+  overflow-y: auto;
 }
 
-.traces-badge {
-  font-size: 0.625rem;
-  font-weight: bold;
-  padding: 0.125rem 0.375rem;
-  color: var(--p-text-muted-color);
-  border-radius: 0.25rem;
-}
+/**
+ * Note: our issues view is a size container (so that it can adapt to the width of its container, see IssuesView.vue),
+ *       which means that its contents wouldn't contribute to the width of our popover, so we make it a normal element
+ *       (our popover is wide enough for our issues view not to need to adapt to its width anyway).
+ */
 
-.traces-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+:global(.p-popover .issues-popover-content .issues) {
+  border: none;
+  container-type: normal;
 }
 
-.traces-list {
-  display: flex;
-  flex-direction: column;
+:global(.p-select-overlay.item-filter .p-select-header > div > input) {
+  padding: 0.25rem;
+  padding-right: 0;
 }
 
-.validation-status {
-  display: flex;
-  align-items: center;
+/**
+ * Narrow layout, i.e. when OpenCOR is less than 40rem wide (see NARROW_LAYOUT_WIDTH in constants.ts), e.g., on a phone
+ * or when OpenCOR is embedded in a small container (see opencor-dialog in BaseDialog.vue). Our dialog then takes all
+ * the room it can, our navigation becomes a row of tabs (above our sections) that can be scrolled horizontally, our
+ * form fields are stacked rather than shown side by side, and our URL field for external data (and its Import button)
+ * is shown on its own line.
+ * Note: the labels of our navigation groups are not shown since our navigation is a single row of tabs. The issues of a
+ *       navigation group are still shown, i.e. next to the navigation items that have issues.
+ */
+
+@container opencor-dialog (width < 40rem) {
+  .settings-dialog-root :deep(.settings-dialog) {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+
+  .settings-body {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .settings-nav {
+    flex-direction: row;
+    gap: 0.125rem;
+    width: auto;
+    padding: 0 0 0.5rem;
+    border-right: none;
+    border-bottom: 1px solid var(--p-content-border-color);
+    overflow: auto hidden;
+    scrollbar-width: thin;
+  }
+
+  .settings-nav-group {
+    flex-direction: row;
+  }
+
+  .settings-nav-group-label {
+    display: none;
+  }
+
+  .settings-nav-item {
+    flex: none;
+    width: auto;
+    white-space: nowrap;
+  }
+
+  .section-header {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .form-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .external-data-import {
+    flex-wrap: wrap;
+  }
+
+  .external-data-import-url {
+    flex-basis: 100%;
+  }
 }
 </style>
diff --git a/src/renderer/src/components/dialogs/UpdateAvailableDialog.vue b/src/renderer/src/components/dialogs/UpdateAvailableDialog.vue
index 8ac05e055..d322b879f 100644
--- a/src/renderer/src/components/dialogs/UpdateAvailableDialog.vue
+++ b/src/renderer/src/components/dialogs/UpdateAvailableDialog.vue
@@ -1,40 +1,56 @@
 <template>
-  <BaseDialog header=" " class="w-169"
+  <BaseDialog header="Update Available" class="w-160"
     :closeButtonProps="{ severity: 'secondary', text: true, rounded: true, disabled: reloading }"
     :closeOnEscape="!reloading"
     @show="onShow"
   >
-    <div class="space-y-7">
-      <div class="text-center">
-        <div class="text-3xl font-bold">OpenCOR <span class="highlight highlight-version">{{ version }}</span> is available!</div>
-      </div>
-      <div v-if="fetching || entries === null || entries.length" class="space-y-2">
-        <div class="text-lg font-bold">What's new:</div>
-        <div v-if="fetching" class="flex items-center gap-2 text-muted-color">
-          <i class="pi pi-cog pi-spin" />
-          <span>Retrieving the changes...</span>
-        </div>
-        <div v-else-if="entries === null" class="text-muted-color">The changes could not be retrieved.</div>
-        <ChangelogComponent v-else class="max-h-64 overflow-y-auto" :entries="entries" />
+    <div class="update">
+      <!-- Version -->
+
+      <div class="update-version">
+        <span class="update-version-icon">
+          <i class="pi pi-arrow-circle-up" />
+        </span>
+        <span class="min-w-0">
+          <span class="update-version-title">OpenCOR <span class="update-version-badge">{{ version }}</span> is available</span>
+          <span class="update-version-current">You are using version {{ currentVersion }}.</span>
+        </span>
       </div>
-      <div class="space-y-2">
-        <div v-if="electronApi" class="text-center">
-          <span class="text-lg">Do you want to download it and install it?</span>
-        </div>
-        <div v-else class="text-center">
-          <span class="text-lg">Feel free to reload OpenCOR whenever you are ready.</span><br />
-          <em >(You will be asked whether to save the files that have been modified, if any.)</em>
+
+      <!-- What's new -->
+
+      <section v-if="fetching || entries === null || entries.length" class="update-changes">
+        <div class="opencor-section-title">What's new</div>
+        <div class="update-changes-box opencor-panel">
+          <div v-if="fetching" class="update-changes-message">
+            <span class="opencor-spinner update-spinner" />
+            <span>Retrieving the changes...</span>
+          </div>
+          <div v-else-if="entries === null" class="update-changes-message">The changes could not be retrieved.</div>
+          <ChangelogComponent v-else :entries="entries" />
         </div>
+      </section>
+
+      <!-- Note -->
+
+      <div class="update-note">
+        <i class="pi pi-info-circle update-note-icon" />
+        <span v-if="electronApi">
+          OpenCOR will download and install the update, and then restart. Once the update has been downloaded, you will be asked whether to save the files that have been modified, if any.
+        </span>
+        <span v-else>
+          Reloading OpenCOR will apply the update. You will first be asked whether to save the files that have been modified, if any.
+        </span>
       </div>
     </div>
     <template #footer>
       <template v-if="electronApi">
-        <Button label="Yes" autofocus @click="$emit('downloadAndInstall')" />
-        <Button label="No" severity="secondary" @click="$emit('close')" />
+        <Button label="Download and Install" autofocus @click="$emit('downloadAndInstall')" />
+        <Button label="Later" severity="secondary" @click="$emit('close')" />
       </template>
       <template v-else>
-        <Button :label="reloading?'Reloading...':'Reload'" autofocus :loading="reloading" @click="$emit('reload')" />
-        <Button label="Cancel" severity="secondary" :disabled="reloading" @click="$emit('close')" />
+        <Button :label="reloading ? 'Reloading...' : 'Reload'" autofocus :loading="reloading" @click="$emit('reload')" />
+        <Button label="Later" severity="secondary" :disabled="reloading" @click="$emit('close')" />
       </template>
     </template>
   </BaseDialog>
@@ -47,6 +63,7 @@ import type { IOpenCORChangelogEntry } from '../../../index';
 
 import { fetchChangelog } from '../../common/changelog';
 import { electronApi } from '../../common/electronApi';
+import { currentVersion } from '../../common/version';
 
 // Note: in OpenCOR's Web app, we let OpenCOR know that the user wants to reload it, and OpenCOR lets us know whether it
 //       is reloading (e.g., it isn't if the user cancels saving the files that have been modified).
@@ -92,21 +109,119 @@ const onShow = (): void => {
 </script>
 
 <style scoped>
-.highlight {
-  display: inline-flex;
+.update {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+
+/**
+ * Version.
+ */
+
+.update-version {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+.update-version-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
+  color: var(--p-primary-color);
+}
+
+.update-version-icon .pi {
+  font-size: 1.25rem;
+}
+
+.update-version-title {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  height: 1em;
-  padding: 0.125em 0.25em;
-  border: 1px solid var(--p-content-border-color);
+  gap: 0.375rem;
+  color: var(--p-text-color);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.update-version-badge {
+  padding: 0.0625rem 0.5rem;
+  border: 1px solid var(--opencor-success-border-color);
   border-radius: 9999px;
-  background-color: var(--p-content-hover-background);
+  background-color: var(--opencor-success-background);
+  color: var(--opencor-success-color);
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.update-version-current {
+  display: block;
+  margin-top: 0.125rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/**
+ * What's new.
+ */
+
+.update-changes {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.update-changes-box {
+  max-height: 16rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--opencor-scrollbar-color) transparent;
+  padding: 0.75rem 0.875rem;
+  font-size: 0.875rem;
+}
+
+.update-changes-message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--p-text-muted-color);
+}
+
+.update-spinner {
+  --opencor-spinner-size: 0.875rem;
+}
+
+/**
+ * Note.
+ */
+
+.update-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
   color: var(--p-text-muted-color);
-  font-style: normal;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
 }
 
-.highlight-version {
-  background-color: var(--p-message-success-background);
-  border-color: var(--p-message-success-border-color);
-  color: var(--p-message-success-color);
+/**
+ * Note: our icon is as tall as the first line of our note, so that it is aligned with it.
+ */
+
+.update-note-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 1.25rem;
+  font-size: 0.8125rem;
 }
 </style>
diff --git a/src/renderer/src/components/dialogs/UpdateDownloadProgressDialog.vue b/src/renderer/src/components/dialogs/UpdateDownloadProgressDialog.vue
index c39bf95f2..a0cab1f83 100644
--- a/src/renderer/src/components/dialogs/UpdateDownloadProgressDialog.vue
+++ b/src/renderer/src/components/dialogs/UpdateDownloadProgressDialog.vue
@@ -1,19 +1,106 @@
 <template>
-  <BaseDialog header="Downloading Update..." :closable="false" :closeOnEscape="false" style="width: 39rem;">
-    <ProgressBar class="h-3! mb-5"
-      :showValue="false"
-      :value="percent"
-      :pt="{
-        value: {
-          style: 'transition: none'
-        }
-      }"
-    />
+  <BaseDialog :header="installing ? 'Installing Update' : 'Downloading Update'" class="w-120" :closable="false" :closeOnEscape="false">
+    <div class="download">
+      <div class="download-header">
+        <span class="opencor-spinner" />
+        <span class="download-text">{{ text }}</span>
+        <span v-if="!installing" class="download-percent">{{ Math.floor(percent) }}%</span>
+      </div>
+      <ProgressBar class="download-progress-bar"
+        :showValue="false"
+        :value="installing ? 100 : percent"
+        :pt="{
+          value: {
+            style: 'transition: none'
+          }
+        }"
+      />
+      <div class="download-details">{{ details }}</div>
+    </div>
   </BaseDialog>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import * as vue from 'vue';
+
+// The progress of the download of an update and then of its installation.
+// Note: the version of the update is not known if OpenCOR has been reloaded while the update was being downloaded (see
+//       onUpdateDownloadProgress() in OpenCOR.vue), and the size of the update is not known until we get the first
+//       progress report. We only mention them once they are known.
+
+const props = defineProps<{
+  version: string;
   percent: number;
+  transferred: number;
+  total: number;
+  installing: boolean;
 }>();
+
+const update = vue.computed<string>(() => {
+  return props.version ? `OpenCOR ${props.version}` : 'the update';
+});
+
+const text = vue.computed<string>(() => {
+  return props.installing ? `Installing ${update.value}...` : `Downloading ${update.value}...`;
+});
+
+// Format the given size (in bytes) in megabytes.
+// Note #1: a megabyte is 1,000,000 bytes (rather than 1,048,576 bytes, i.e. a mebibyte), as on macOS and on most
+//          download pages.
+// Note #2: the total size is that of what needs to be downloaded, which may be smaller than the size of the update
+//          (e.g., on its release page) if only the parts that have changed since our current version need to be
+//          downloaded (i.e. a differential download, which electron-updater may do on all platforms).
+
+const formatSize = (size: number): string => {
+  return `${(size / 1000 ** 2).toFixed(1)} MB`;
+};
+
+const details = vue.computed<string>(() => {
+  return !props.installing && props.total
+    ? `${formatSize(props.transferred)} of ${formatSize(props.total)}`
+    : 'OpenCOR will restart once the update has been installed.';
+});
 </script>
+
+<style scoped>
+.download {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin-bottom: 1.25rem;
+}
+
+.download-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+.download-text {
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.download-percent {
+  flex-shrink: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.download-progress-bar {
+  height: 0.375rem;
+}
+
+.download-details {
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/src/renderer/src/components/dialogs/YesNoCancelQuestionDialog.vue b/src/renderer/src/components/dialogs/YesNoCancelQuestionDialog.vue
index c62ecf12a..8e92c7622 100644
--- a/src/renderer/src/components/dialogs/YesNoCancelQuestionDialog.vue
+++ b/src/renderer/src/components/dialogs/YesNoCancelQuestionDialog.vue
@@ -1,23 +1,45 @@
 <template>
-  <BaseDialog :header="title">
-    <div class="mt-2 mb-4" v-html="question"></div>
+  <BaseDialog :header="title" class="w-120">
+    <div class="message-dialog" :class="`message-dialog-${severity}`">
+      <span class="message-dialog-icon">
+        <i :class="ICONS[severity]" />
+      </span>
+      <div class="message-dialog-text" v-html="question"></div>
+    </div>
     <template #footer>
-      <Button autofocus label="Yes" :severity="severity" @click="$emit('yes')" />
-      <Button label="No" severity="secondary" @click="$emit('no')" />
-      <Button label="Cancel" severity="secondary" @click="$emit('cancel')" />
+      <Button autofocus
+        :label="yesLabel"
+        :severity="severity === 'danger' ? 'danger' : undefined"
+        @click="$emit('yes')"
+      />
+      <Button :label="noLabel" severity="secondary" @click="$emit('no')" />
+      <Button :label="cancelLabel" severity="secondary" @click="$emit('cancel')" />
     </template>
   </BaseDialog>
 </template>
 
 <script setup lang="ts">
+import './message-dialog.css';
+
+type Severity = 'danger' | 'warning' | 'info';
+
+// Note: same as for YesNoQuestionDialog.vue when it comes to the labels of our buttons and the colour of our yes
+//       button.
+
 withDefaults(
   defineProps<{
     title: string;
     question: string;
-    severity?: 'danger' | 'warning' | 'info';
+    severity?: Severity;
+    yesLabel?: string;
+    noLabel?: string;
+    cancelLabel?: string;
   }>(),
   {
-    severity: 'warning'
+    severity: 'warning',
+    yesLabel: 'Yes',
+    noLabel: 'No',
+    cancelLabel: 'Cancel'
   }
 );
 
@@ -26,4 +48,10 @@ defineEmits<{
   no: [];
   cancel: [];
 }>();
+
+const ICONS: Record<Severity, string> = {
+  danger: 'pi pi-exclamation-triangle',
+  warning: 'pi pi-exclamation-triangle',
+  info: 'pi pi-question-circle'
+};
 </script>
diff --git a/src/renderer/src/components/dialogs/YesNoQuestionDialog.vue b/src/renderer/src/components/dialogs/YesNoQuestionDialog.vue
index bbaf22052..9854b5fa9 100644
--- a/src/renderer/src/components/dialogs/YesNoQuestionDialog.vue
+++ b/src/renderer/src/components/dialogs/YesNoQuestionDialog.vue
@@ -1,22 +1,45 @@
 <template>
-  <BaseDialog :header="title">
-    <div class="mt-2 mb-4" v-html="question"></div>
+  <BaseDialog :header="title" class="w-120">
+    <div class="message-dialog" :class="`message-dialog-${severity}`">
+      <span class="message-dialog-icon">
+        <i :class="ICONS[severity]" />
+      </span>
+      <div class="message-dialog-text" v-html="question"></div>
+    </div>
     <template #footer>
-      <Button autofocus label="Yes" :severity="severity" @click="$emit('yes')" />
-      <Button label="No" severity="secondary" @click="$emit('no')" />
+      <Button autofocus
+        :label="yesLabel"
+        :severity="severity === 'danger' ? 'danger' : undefined"
+        @click="$emit('yes')"
+      />
+      <Button :label="noLabel" severity="secondary" @click="$emit('no')" />
     </template>
   </BaseDialog>
 </template>
 
 <script setup lang="ts">
+import './message-dialog.css';
+
+type Severity = 'danger' | 'warning' | 'info';
+
+// Note #1: our buttons should preferably be labelled with what they do (e.g., "Reset All" and "Cancel") rather than
+//          with "Yes" and "No", so that the user doesn't have to read our question to know what they do.
+// Note #2: our yes button is only coloured (in red) if our question is about something dangerous (e.g., disconnecting
+//          from GitHub). Otherwise (i.e. for some information or a warning, such as being asked whether to save a
+//          modified file), it is a primary button since it is what the user is expected to do.
+
 withDefaults(
   defineProps<{
     title: string;
     question: string;
-    severity?: 'danger' | 'warning' | 'info';
+    severity?: Severity;
+    yesLabel?: string;
+    noLabel?: string;
   }>(),
   {
-    severity: 'warning'
+    severity: 'warning',
+    yesLabel: 'Yes',
+    noLabel: 'No'
   }
 );
 
@@ -24,4 +47,10 @@ defineEmits<{
   yes: [];
   no: [];
 }>();
+
+const ICONS: Record<Severity, string> = {
+  danger: 'pi pi-exclamation-triangle',
+  warning: 'pi pi-exclamation-triangle',
+  info: 'pi pi-question-circle'
+};
 </script>
diff --git a/src/renderer/src/components/dialogs/message-dialog.css b/src/renderer/src/components/dialogs/message-dialog.css
new file mode 100644
index 000000000..f41c29875
--- /dev/null
+++ b/src/renderer/src/components/dialogs/message-dialog.css
@@ -0,0 +1,56 @@
+/**
+ * Shared styles for our message and question dialogs (see OkMessageDialog.vue, YesNoQuestionDialog.vue, and
+ * YesNoCancelQuestionDialog.vue), as well as for the Limitations dialog of our CellDL Editor view (see
+ * CellDLEditorView.vue), i.e. a severity icon next to some text.
+ * Note: the rules are scoped under `.message-dialog` (applied to the contents of those dialogs) so that they do not
+ *       affect the rest of the application.
+ */
+
+.message-dialog {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  margin: 0.25rem 0 0.5rem;
+
+  .message-dialog-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    background-color: color-mix(in sRGB, var(--message-dialog-color) 15%, transparent);
+    color: var(--message-dialog-color);
+    font-size: 1rem;
+  }
+
+  /**
+   * Note: our text is vertically centred with our icon when it fits on one line, hence its top padding.
+   */
+
+  .message-dialog-text {
+    min-width: 0;
+    padding-top: 0.4375rem;
+    color: var(--p-text-color);
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    overflow-wrap: anywhere;
+  }
+}
+
+.message-dialog.message-dialog-info {
+  --message-dialog-color: var(--opencor-info-color);
+}
+
+.message-dialog.message-dialog-success {
+  --message-dialog-color: var(--opencor-success-color);
+}
+
+.message-dialog.message-dialog-warning {
+  --message-dialog-color: var(--opencor-warn-color);
+}
+
+.message-dialog.message-dialog-danger {
+  --message-dialog-color: var(--opencor-error-color);
+}
diff --git a/src/renderer/src/components/propertyEditors/PropertyEditor.vue b/src/renderer/src/components/propertyEditors/PropertyEditor.vue
index e6f7c2c04..6bd6ad1a8 100644
--- a/src/renderer/src/components/propertyEditors/PropertyEditor.vue
+++ b/src/renderer/src/components/propertyEditors/PropertyEditor.vue
@@ -1,30 +1,20 @@
 <template>
-  <Fieldset :legend="name">
-    <DataTable
-      :editMode="disabled ? undefined : 'cell'"
-      resizableColumns
-      showGridlines
-      size="small"
-      :value="properties"
-      @cell-edit-complete="onCellEditComplete"
-    >
-      <Column field="property" header="Property" :style="columnWidth" />
-      <Column field="value" header="Value" :style="columnWidth">
-        <template #body="{ data, field }">
-          {{ data[field as string] }}
-        </template>
-        <template v-if="!disabled" #editor="{ data, field }">
-          <InputNumber fluid :maxFractionDigits="15" v-model="data[field]" size="small" />
-        </template>
-      </Column>
-      <Column v-if="hasUnits" field="unit" header="Unit" :style="columnWidth" />
-    </DataTable>
-  </Fieldset>
+  <section class="property-editor">
+    <h3 class="opencor-section-title opencor-section-title-small">{{ name }}</h3>
+    <div class="property-editor-fields">
+      <InputScientificNumberWidget v-for="(property, index) in properties" :key="property.property"
+        :ref="(element: unknown) => (fieldRefs[index] = element as IInputScientificNumberWidget | null)"
+        :modelValue="property.value"
+        :label="hasUnits && property.unit ? `${property.property} (${property.unit})` : property.property"
+        :disabled="disabled"
+        size="small"
+        @update:modelValue="(newValue: number | undefined) => onValueUpdated(index, newValue)"
+      />
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
-import type { DataTableCellEditCompleteEvent } from 'primevue/datatable';
-
 const props = withDefaults(
   defineProps<{
     name: string;
@@ -46,33 +36,55 @@ const emit = defineEmits<{
   propertyUpdated: [index: number, newValue: number];
 }>();
 
-const columnWidth = `width: calc(100% / ${props.hasUnits ? '3' : '2'});`;
+// The input fields of our properties, which we use to have a property's input field show its current value again when
+// its new value is invalid.
+// Note: an input field shows the value that was entered (or spun to), even if it doesn't get accepted, so we need to
+//       ask it to show the current value of its property again, which it does without losing the keyboard focus (so
+//       that, for instance, the user can keep spinning its value).
+
+interface IInputScientificNumberWidget {
+  discardEdit: () => void;
+}
+
+const fieldRefs: (IInputScientificNumberWidget | null)[] = [];
+
+const onValueUpdated = (index: number, newValue: number | undefined): void => {
+  // Ignore an invalid new value for the property, i.e. keep its current value. A new value is invalid if it is not a
+  // finite number or if it is deemed invalid by our owner.
 
-const onCellEditComplete = (event: DataTableCellEditCompleteEvent): void => {
-  // Note: a property is edited using a copy of it, so we only need to ignore an invalid new value for the property to
-  //       keep its current value. A new value is invalid if it is not a finite number (e.g., the field was cleared,
-  //       giving a null value) or if it is deemed invalid by our owner.
+  const property = props.properties[index];
 
-  const { data, newValue, field, index } = event;
+  if (!property || newValue === property.value) {
+    return;
+  }
 
   if (
     typeof newValue !== 'number' ||
     !Number.isFinite(newValue) ||
     (props.isValid && !props.isValid(index, newValue))
   ) {
+    fieldRefs[index]?.discardEdit();
+
     return;
   }
 
-  data[field] = newValue;
+  property.value = newValue;
 
   emit('propertyUpdated', index, newValue);
 };
 </script>
 
 <style scoped>
-:deep(.p-inputnumber-input) {
-  padding: 0 2px !important;
-  margin: 0 !important;
-  line-height: 1.2px !important;
+.property-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.property-editor-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 0.375rem;
 }
 </style>
diff --git a/src/renderer/src/components/views/CellDLEditorView.vue b/src/renderer/src/components/views/CellDLEditorView.vue
index 368389bb6..aeff97f4f 100644
--- a/src/renderer/src/components/views/CellDLEditorView.vue
+++ b/src/renderer/src/components/views/CellDLEditorView.vue
@@ -1,27 +1,24 @@
 <template>
   <div class="toolbar-based-view relative h-full flex flex-col">
-    <Toolbar class="p-1! shrink-0">
+    <Toolbar class="shrink-0">
       <template #start>
-        <Button class="p-1! toolbar-button"
+        <ToolbarButtonWidget
           icon="pi pi-info-circle"
-          text severity="secondary"
-          title="Limitations"
+          label="Limitations"
           @click="limitationsVisible = true"
         />
       </template>
       <template #end>
         <div class="flex gap-1">
-          <Button class="p-1! toolbar-button"
+          <ToolbarButtonWidget
             icon="pi pi-chart-line"
-            text severity="secondary"
-            title="Standard simulation"
+            label="Standard simulation"
             :disabled="!client.loaded"
             @click="onExportCombineArchive(EXPORT_KIND_SIMULATE)"
           />
-          <Button class="p-1! toolbar-button"
+          <ToolbarButtonWidget
             icon="pi pi-download"
-            text severity="secondary"
-            title="Export COMBINE archive"
+            label="Export COMBINE archive"
             :disabled="!client.loaded"
             @click="onExportCombineArchive(EXPORT_KIND_DOWNLOAD)"
           />
@@ -30,26 +27,27 @@
     </Toolbar>
     <div class="grow min-h-0 relative">
       <IssuesView v-if="issues.length" class="m-4" style="height: calc(100% - 2rem);" :issues="issues" />
-      <div v-show="!issues.length" ref="containerRef" class="h-full" />
+      <div v-show="!issues.length" ref="containerRef" class="celldl-editor-container h-full" />
       <BlockingMessageComponent v-if="!client.loaded && !issues.length" message="Loading CellDL Editor..." />
     </div>
-    <BaseDialog v-model:visible="exportIssuesVisible" header="Generating CellML" style="width: 39rem">
-      <IssuesView :issues="exportIssues" />
-      <template #footer>
-        <Button autofocus label="OK" @click="exportIssuesVisible = false" />
-      </template>
-    </BaseDialog>
-    <BaseDialog v-model:visible="limitationsVisible" header="Limitations" style="width: 39rem">
-      <div class="mt-2 mb-4 space-y-2">
-        <div>The <strong>CellDL Editor view</strong> currently has the following limitations inherent to the <a href="https://github.com/CellDL/CellDLEditorComponent" target="_blank" rel="noopener noreferrer">CellDL Editor component</a>:</div>
-        <ul class="list-disc ml-6 space-y-1">
-          <li v-for="(limitation, index) in LIMITATIONS" :key="index">{{ limitation }}</li>
-        </ul>
+    <BaseDialog v-model:visible="exportIssuesVisible" :header="exportIssuesTitle" class="w-156">
+      <p class="export-issues-text">The diagram couldn't be converted to CellML, so it couldn't be {{ exportIssuesKind === EXPORT_KIND_SIMULATE ? 'simulated' : 'exported' }}.</p>
+      <div class="export-issues">
+        <IssuesView :issues="exportIssues" :extraSpace="false" />
       </div>
       <template #footer>
-        <Button autofocus label="OK" @click="limitationsVisible = false" />
+        <Button autofocus label="OK" @click="exportIssuesVisible = false" />
       </template>
     </BaseDialog>
+    <OkMessageDialog v-model:visible="limitationsVisible" title="Limitations" @ok="limitationsVisible = false">
+      <p class="m-0">
+        The CellDL Editor view has the following limitations, which come from the
+        <a href="https://github.com/CellDL/CellDLEditorComponent" target="_blank" rel="noopener noreferrer">CellDL Editor component</a>:
+      </p>
+      <ul class="limitations-list">
+        <li v-for="(limitation, index) in LIMITATIONS" :key="index">{{ limitation }}</li>
+      </ul>
+    </OkMessageDialog>
   </div>
 </template>
 
@@ -88,8 +86,7 @@ const emit = defineEmits<{
 
 const LIMITATIONS = [
   'Only adding, deleting, and moving can be undone.',
-  "Undoing all changes doesn't make a file unmodified.",
-  'Safari and Firefox draw diagrams differently.'
+  "Undoing all changes doesn't make a file unmodified."
 ];
 
 const opencorMessage = useOpenCORMessage();
@@ -97,6 +94,10 @@ const containerRef = vue.shallowRef<HTMLElement | null>(null);
 const issues = vue.ref<locApi.IIssue[]>([]);
 const editCount = vue.ref<number>(0);
 const exportIssues = vue.ref<locApi.IIssue[]>([]);
+const exportIssuesKind = vue.ref<string>(EXPORT_KIND_DOWNLOAD);
+const exportIssuesTitle = vue.computed<string>(() => {
+  return exportIssuesKind.value === EXPORT_KIND_SIMULATE ? 'Standard Simulation' : 'Export COMBINE Archive';
+});
 const exportIssuesVisible = vue.ref<boolean>(false);
 const limitationsVisible = vue.ref<boolean>(false);
 const celldlFileName = common.fileName(props.file.canonicalPath());
@@ -310,6 +311,7 @@ const onExportCombineArchive = async (kind: string): Promise<void> => {
           description: issue
         };
       });
+      exportIssuesKind.value = kind;
       exportIssuesVisible.value = true;
 
       return;
@@ -335,3 +337,34 @@ const onExportCombineArchive = async (kind: string): Promise<void> => {
   }
 };
 </script>
+
+<style scoped>
+.export-issues-text {
+  margin: 0 0 0.75rem;
+  color: var(--p-text-color);
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+
+/**
+ * Note: there may be many issues, in which case they scroll rather than making our dialog taller than our window. Our
+ *       issues view scrolls its issues when it is given a height, but not when it is only given a maximum height, so we
+ *       let a container scroll it instead (as for the issues popover of our settings dialog, see
+ *       SimulationExperimentInteractiveViewSettingsDialog.vue).
+ */
+
+.export-issues {
+  max-height: min(20rem, 40vh);
+  overflow-y: auto;
+}
+
+.limitations-list {
+  margin: 0.5rem 0 0;
+  padding-left: 1.25rem;
+  list-style: disc;
+}
+
+.limitations-list li + li {
+  margin-top: 0.25rem;
+}
+</style>
diff --git a/src/renderer/src/components/views/IssuesView.vue b/src/renderer/src/components/views/IssuesView.vue
index 50db00e14..65306b14e 100644
--- a/src/renderer/src/components/views/IssuesView.vue
+++ b/src/renderer/src/components/views/IssuesView.vue
@@ -1,54 +1,44 @@
 <template>
-  <div class="issues-container flex flex-col border rounded-lg">
+  <div class="issues opencor-panel">
     <!-- Header -->
 
-    <div class="issues-header flex items-center justify-between px-3.5 py-2.5 border-b">
-      <div class="header-title flex items-center gap-2 text-sm font-semibold">
-        <i class="pi pi-exclamation-circle"></i>
+    <div class="issues-header">
+      <div class="issues-title">
+        <i class="pi pi-exclamation-circle issues-title-icon" />
         <span>Issues</span>
-        <span v-if="issues.length" class="issue-count inline-flex items-center justify-center min-w-5 h-5 px-1.5 py-0 text-xs font-semibold rounded-full text-white" :class="severityClass">{{ issues.length }}</span>
       </div>
-      <div v-if="issues.length" class="flex items-center gap-3">
-        <span v-if="errorCount" class="summary-item error">
-          <i class="pi pi-times-circle"></i>{{ errorCount }}
-        </span>
-        <span v-if="warningCount" class="summary-item warning">
-          <i class="pi pi-exclamation-triangle"></i>{{ warningCount }}
-        </span>
-        <span v-if="informationCount" class="summary-item information">
-          <i class="pi pi-info-circle"></i>{{ informationCount }}
+      <div v-if="issues.length" class="issues-summary">
+        <span v-for="summaryItem in summaryItems" :key="summaryItem.type" class="issues-summary-item" :class="summaryItem.class">
+          <i :class="summaryItem.icon" aria-hidden="true" /><span class="sr-only">{{ summaryItem.label }}: </span>{{ summaryItem.count }}
         </span>
+        <ToolbarButtonWidget
+          v-bind="copyToClipboard.buttonProps('Copy issues')"
+          small
+          tooltipAlign="end"
+          @click="copyIssues"
+        />
       </div>
     </div>
 
     <!-- Content -->
 
-    <div class="min-h-0">
+    <div class="issues-content">
       <!-- Empty state -->
 
-      <div v-if="!issues.length" class="empty-state flex flex-col items-center justify-center h-full gap-1 text-sm">
-        <i class="pi pi-check-circle text-2xl!"></i>
-        <span>No issues found!</span>
+      <div v-if="!issues.length" class="issues-empty">
+        <i class="pi pi-check-circle" />
+        <span>No issues found.</span>
       </div>
 
       <!-- Issues -->
 
       <ScrollPanel v-else class="h-full">
-        <div class="flex flex-col gap-2 p-3">
-          <div
-            v-for="(issue, index) in issues"
-            :key="`issue_${index}`"
-            class="issue-item flex items-start gap-2 px-3 py-2 border-l-3 rounded-md"
-            :class="issueSeverityClass(issue.type)"
-          >
-            <div class="flex shrink-0 items-center justify-center w-5 h-5 mt-0.5">
-              <i :class="issueIcon(issue.type)"></i>
-            </div>
-            <div class="issue-content flex-1 min-w-0">
-              <span v-html="issue.description" class="issue-description text-[0.8125rem] select-text"></span>
-            </div>
+        <div class="issues-list" :class="{ 'issues-list-extra-space': extraSpace }">
+          <div v-for="(issue, index) in issues" :key="`issue_${index}`" class="issue" :class="ISSUE_TYPES[issue.type].class">
+            <i :class="ISSUE_TYPES[issue.type].icon" class="issue-icon" aria-hidden="true" />
+            <span class="sr-only">{{ ISSUE_TYPES[issue.type].label }}: </span>
+            <span class="issue-description" v-html="issue.description" />
           </div>
-          <div v-if="extraSpace" class="h-2"></div>
         </div>
       </ScrollPanel>
     </div>
@@ -58,6 +48,7 @@
 <script setup lang="ts">
 import * as vue from 'vue';
 
+import * as vueCommon from '../../common/vueCommon';
 import * as locApi from '../../libopencor/locApi';
 
 const props = withDefaults(
@@ -70,137 +61,255 @@ const props = withDefaults(
   }
 );
 
-const errorCount = vue.computed<number>(() => {
-  return props.issues.filter((i) => i.type === locApi.EIssueType.ERROR).length;
-});
-const warningCount = vue.computed<number>(() => {
-  return props.issues.filter((i) => i.type === locApi.EIssueType.WARNING).length;
-});
-const informationCount = vue.computed<number>(() => {
-  return props.issues.filter((i) => i.type === locApi.EIssueType.INFORMATION).length;
+// Our issue types, in order of severity.
+
+const ISSUE_TYPES: Record<locApi.EIssueType, { label: string; icon: string; class: string }> = {
+  [locApi.EIssueType.ERROR]: { label: 'Error', icon: 'pi pi-times-circle', class: 'issue-error' },
+  [locApi.EIssueType.WARNING]: { label: 'Warning', icon: 'pi pi-exclamation-triangle', class: 'issue-warning' },
+  [locApi.EIssueType.INFORMATION]: { label: 'Information', icon: 'pi pi-info-circle', class: 'issue-information' }
+};
+
+// The number of issues of each type, if any.
+// Note: the icon of a type is not visible to assistive technologies, so we use a visually hidden label instead (so
+//       that, for instance, "Errors: 2" rather than just "2" gets announced).
+
+const SUMMARY_LABELS: Record<locApi.EIssueType, string> = {
+  [locApi.EIssueType.ERROR]: 'Errors',
+  [locApi.EIssueType.WARNING]: 'Warnings',
+  [locApi.EIssueType.INFORMATION]: 'Information'
+};
+
+const summaryItems = vue.computed<
+  { type: locApi.EIssueType; icon: string; class: string; label: string; count: number }[]
+>(() => {
+  return [locApi.EIssueType.ERROR, locApi.EIssueType.WARNING, locApi.EIssueType.INFORMATION]
+    .map((type) => {
+      return {
+        type,
+        icon: ISSUE_TYPES[type].icon,
+        class: ISSUE_TYPES[type].class,
+        label: SUMMARY_LABELS[type],
+        count: props.issues.filter((issue) => issue.type === type).length
+      };
+    })
+    .filter((summaryItem) => summaryItem.count);
 });
 
-const severityClass = vue.computed<string>(() => {
-  if (errorCount.value > 0) {
-    return 'error';
-  }
+// Copy our issues, as plain text, to the clipboard, so that they can easily be included in an issue report, for
+// instance.
+// Note #1: the description of an issue may contain some HTML (e.g., to emphasise part of it), hence we only keep its
+//          text.
+// Note #2: our issues may change while our copy button lets people know whether they were copied (e.g., if a simulation
+//          input of an interactive simulation experiment view is changed straight after copying), in which case we
+//          reset our copy button since its feedback would no longer be about our (current) issues. We only do this if
+//          what would be copied has changed, i.e. not if our issues are recomputed and are the same as before.
 
-  if (warningCount.value > 0) {
-    return 'warning';
-  }
+const copyToClipboard = vueCommon.useCopyToClipboard();
+
+const issuesText = vue.computed<string>(() => {
+  const domParser = new DOMParser();
 
-  return 'information';
+  return props.issues
+    .map((issue) => {
+      const description = domParser.parseFromString(issue.description, 'text/html').body.textContent ?? '';
+
+      return `${ISSUE_TYPES[issue.type].label}: ${description}`;
+    })
+    .join('\n');
 });
 
-const issueSeverityClass = (type: locApi.EIssueType): string => {
-  switch (type) {
-    case locApi.EIssueType.ERROR:
-      return 'severity-error';
-    case locApi.EIssueType.WARNING:
-      return 'severity-warning';
-    default: // locApi.EIssueType.INFORMATION.
-      return 'severity-information';
-  }
+const copyIssues = (): void => {
+  void copyToClipboard.copy(issuesText.value);
 };
 
-const issueIcon = (type: locApi.EIssueType): string => {
-  switch (type) {
-    case locApi.EIssueType.ERROR:
-      return 'pi pi-times-circle';
-    case locApi.EIssueType.WARNING:
-      return 'pi pi-exclamation-triangle';
-    default: // locApi.EIssueType.INFORMATION.
-      return 'pi pi-info-circle';
-  }
-};
+vue.watch(issuesText, () => {
+  copyToClipboard.reset();
+});
 </script>
 
 <style scoped>
-.empty-state {
-  color: var(--p-message-success-color);
-}
+/**
+ * Note: we may be shown in a narrow container (e.g., when OpenCOR is embedded in a page alongside other OpenCOR
+ *       instances), so we adapt our layout to the width of our container: our header can wrap and, if really narrow,
+ *       the icon of an issue gets shown inline with its description, which can then use all of the available width.
+ */
 
-.header-title {
-  color: var(--p-text-color);
+.issues {
+  display: flex;
+  flex-direction: column;
+  container-type: inline-size;
 }
 
-.header-title > i {
-  color: var(--p-text-muted-color);
-}
+/**
+ * Header.
+ */
 
-.issues-container {
-  border-color: var(--p-content-border-color);
+.issues-header {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem 0.75rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.875rem;
+  border-bottom: 1px solid var(--p-content-border-color);
 }
 
-.issue-count.error {
-  background-color: var(--p-message-error-color);
+.issues-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--p-text-color);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
-.issue-count.information {
-  background-color: var(--p-message-info-color);
+.issues-title-icon {
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
 }
 
-.issue-count.warning {
-  background-color: var(--p-message-warn-color);
+.issues-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-left: auto;
 }
 
-.issue-description {
-  color: var(--p-text-color);
+.issues-summary-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
 }
 
-.issue-item.severity-error {
-  border-color: var(--p-message-error-color);
+.issues-summary-item .pi {
+  font-size: 0.75rem;
 }
 
-.issue-item.severity-information {
-  border-color: var(--p-message-info-color);
-}
+/**
+ * Content.
+ */
 
-.issue-item.severity-warning {
-  border-color: var(--p-message-warn-color);
+.issues-content {
+  flex-grow: 1;
+  min-height: 0;
 }
 
-.issues-header {
-  border-color: var(--p-content-border-color);
-}
+/**
+ * Note: PrimeVue makes the content of a scroll panel wider and taller than the scroll panel itself, and then pads it,
+ *       so that the native scrollbars are out of view. However, those scrollbars are hidden anyway, so we don't need
+ *       that trick, which would otherwise clip the right side of our issues and add some space below them.
+ */
 
 :deep(.p-scrollpanel-content) {
+  width: 100%;
+  height: 100%;
   padding: 0;
 }
 
-.severity-error {
-  color: var(--p-message-error-color);
+.issues-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 100%;
+  min-height: 4rem;
+  padding: 1rem;
+  color: var(--opencor-success-color);
+  font-size: 0.875rem;
+}
+
+.issues-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.625rem;
 }
 
-.severity-information {
-  color: var(--p-message-info-color);
+.issues-list-extra-space {
+  padding-bottom: 1.125rem;
 }
 
-.severity-warning {
-  color: var(--p-message-warn-color);
+.issue {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--issue-color) 25%, transparent);
+  border-radius: 0.375rem;
+  background-color: color-mix(in srgb, var(--issue-color) 6%, transparent);
 }
 
-.summary-item {
+/**
+ * Note: our icon is as tall as the first line of our description, so that it is aligned with it.
+ */
+
+.issue-icon {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  height: 1.25rem;
+  color: var(--issue-color);
+  font-size: 0.875rem;
 }
 
-.summary-item.error {
-  color: var(--p-message-error-color);
+.issue-description {
+  flex-grow: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--p-text-color);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  user-select: text;
 }
 
-.summary-item.information {
-  color: var(--p-message-info-color);
+/**
+ * Severities.
+ */
+
+.issue-error {
+  --issue-color: var(--opencor-error-color);
+
+  color: var(--issue-color);
 }
 
-.summary-item.warning {
-  color: var(--p-message-warn-color);
+.issue-warning {
+  --issue-color: var(--opencor-warn-color);
+
+  color: var(--issue-color);
 }
 
-.summary-item i {
-  font-size: 0.75rem;
+.issue-information {
+  --issue-color: var(--opencor-info-color);
+
+  color: var(--issue-color);
+}
+
+/**
+ * Adapt our layout to the width of our container.
+ */
+
+@container (width < 16rem) {
+  .issues-header {
+    padding-left: 0.625rem;
+  }
+
+  .issues-list {
+    padding: 0.375rem;
+  }
+
+  .issue {
+    display: block;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .issue-icon {
+    display: inline;
+    margin-right: 0.375rem;
+  }
 }
 </style>
diff --git a/src/renderer/src/components/views/SimulationExperimentInteractiveView.vue b/src/renderer/src/components/views/SimulationExperimentInteractiveView.vue
index e7e827717..50894f377 100644
--- a/src/renderer/src/components/views/SimulationExperimentInteractiveView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentInteractiveView.vue
@@ -2,29 +2,23 @@
   <div ref="rootRef" class="simulation-experiment-view toolbar-based-view h-full flex flex-col">
     <IssuesView v-if="issues.length" class="m-4 mb-0" style="height: calc(100% - 2rem);" :issues="issues" />
     <template v-else>
-      <Toolbar v-if="!simulationOnly" class="p-1! shrink-0">
+      <Toolbar v-if="!simulationOnly" class="shrink-0">
         <template #start>
           <div class="flex gap-1 invisible">
-            <Button class="p-1! toolbar-button"
-              icon="pi pi-play-circle"
-            />
-            <Button class="p-1! toolbar-button"
-              icon="pi pi-stop-circle"
-            />
+            <ToolbarButtonWidget icon="pi pi-play-circle" />
+            <ToolbarButtonWidget icon="pi pi-stop-circle" />
           </div>
         </template>
         <template #end>
           <div class="flex gap-1">
-            <Button class="p-1! toolbar-button"
+            <ToolbarButtonWidget
               icon="pi pi-download"
-              text severity="secondary"
-              title="Export COMBINE archive"
+              label="Export COMBINE archive"
               @click="onDownloadCombineArchive"
             />
-            <Button class="p-1! toolbar-button"
+            <ToolbarButtonWidget
               icon="pi pi-cog"
-              text severity="secondary"
-              title="Settings"
+              label="Settings"
               @click="settingsVisible = true"
             />
           </div>
@@ -32,135 +26,132 @@
       </Toolbar>
       <div class="grow min-h-0">
         <div class="flex h-full">
-          <div v-if="uiJsonEmpty" class="flex flex-col items-center justify-center grow">
-            <i class="pi pi-info-circle text-[1.5rem]! text-muted-color mb-3"></i>
-            <p class="text-muted-color text-center">
-              The view needs to be configured.
-              <template v-if="!simulationOnly">
-                <br />
-                Please click on the <i class="pi pi-cog"></i> icon in the top-right corner.
-              </template>
-            </p>
+          <div v-if="uiJsonEmpty" class="empty-view">
+            <i class="pi pi-sliders-h empty-view-icon"></i>
+            <p class="empty-view-title">The view needs to be configured.</p>
+            <template v-if="!simulationOnly">
+              <p class="empty-view-text">Its simulation inputs, simulation data, and plots can be configured in its settings.</p>
+              <!--
+              Note: like our toolbar buttons (see ToolbarButtonWidget.vue), this button doesn't get the focus when it is
+                    clicked, so that it doesn't look focused once our settings dialog has been closed.
+              -->
+              <Button icon="pi pi-cog" label="Open settings" size="small" @mousedown.prevent @click="settingsVisible = true" />
+            </template>
           </div>
           <IssuesView v-else-if="uiJsonIssues.length" class="w-full m-4" :issues="uiJsonIssues" />
-          <div v-else class="flex grow min-h-0">
-            <div class="ml-4 mr-4 mb-4">
+          <div v-else class="panels flex grow min-h-0" :class="{ 'narrow-layout': narrowLayout }">
+            <div class="side-panel-column">
               <ScrollPanel class="h-full">
-                <Fieldset :id="inputsFieldsetId" class="inputs-fieldset">
-                  <template #legend>
-                    <div class="relative flex items-center">
-                      <span :id="`${inputsFieldsetId}_header`" class="p-fieldset-legend-label">Simulation inputs</span>
-                      <span class="inputs-fieldset-line grow ms-3"></span>
-                      <div class="inputs-fieldset-reset"
-                        :class="{ 'inputs-fieldset-reset-hidden': allSimulationInputsAtDefaultValues }"
-                      >
-                        <Button class="p-0! w-5! h-5! reset-inputs-button"
-                          icon="pi pi-undo"
-                          text severity="secondary"
-                          size="small"
-                          title="Reset all simulation inputs to their default values"
-                          :disabled="allSimulationInputsAtDefaultValues"
-                          @mousedown.prevent
-                          @click="onResetInputs"
-                        />
-                      </div>
+                <div class="side-panel">
+                  <!-- Simulation inputs -->
+
+                  <section class="side-panel-section">
+                    <div class="side-panel-header">
+                      <h3 class="opencor-section-title opencor-section-title-small">Simulation inputs</h3>
+                      <ToolbarButtonWidget :class="{ invisible: allSimulationInputsAtDefaultValues }"
+                        icon="pi pi-undo"
+                        label="Reset all simulation inputs"
+                        small
+                        tooltipAlign="end"
+                        keepFocus
+                        :disabled="allSimulationInputsAtDefaultValues"
+                        @click="onResetInputs($event)"
+                      />
                     </div>
-                  </template>
-                  <InputWidget ref="inputWidgetsRef"
-                    v-for="(input, index) in actualUiJson.input"
-                    v-model="inputValues[index]!"
-                    v-show="showInput[index]"
-                    :key="`input_${index}`"
-                    :name="input.name"
-                    :defaultValue="input.defaultValue"
-                    :maximumValue="locApi.isScalarInput(input) ? input.maximumValue : undefined"
-                    :minimumValue="locApi.isScalarInput(input) ? input.minimumValue : undefined"
-                    :possibleValues="locApi.isDiscreteInput(input) ? input.possibleValues : undefined"
-                    :stepValue="locApi.isScalarInput(input) ? input.stepValue : undefined"
-                    :class="index !== 0 ? 'mt-6' : ''"
-                    @change="onInputChange()"
-                    @changeEnd="onInputChangeEnd()"
-                    @atDefaultValueChange="(_name: string, atDefaultValue: boolean) => onInputAtDefaultValueChange(index, atDefaultValue)"
-                  />
-                </Fieldset>
-                <Fieldset legend="Runs">
-                  <div class="flex flex-col gap-4">
-                    <div class="flex gap-2">
-                      <Button class="grow"
-                        icon="pi pi-plus"
-                        label="Track run"
-                        outlined
-                        size="small"
-                        title="Track current run"
-                        :disabled="isSimulating || simulationIssues.length > 0"
-                        @click="onTrackRun"
+                    <div ref="simulationInputsRef" class="side-panel-fields">
+                      <InputWidget ref="inputWidgetsRef"
+                        v-for="(input, index) in actualUiJson.input"
+                        v-model="inputValues[index]!"
+                        v-show="showInput[index]"
+                        :key="`input_${index}`"
+                        :name="input.name"
+                        :defaultValue="input.defaultValue"
+                        :maximumValue="locApi.isScalarInput(input) ? input.maximumValue : undefined"
+                        :minimumValue="locApi.isScalarInput(input) ? input.minimumValue : undefined"
+                        :possibleValues="locApi.isDiscreteInput(input) ? input.possibleValues : undefined"
+                        :stepValue="locApi.isScalarInput(input) ? input.stepValue : undefined"
+                        @change="onInputChange()"
+                        @changeEnd="onInputChangeEnd()"
+                        @atDefaultValueChange="(_name: string, atDefaultValue: boolean) => onInputAtDefaultValueChange(index, atDefaultValue)"
                       />
-                      <Button class="w-9!"
+                    </div>
+                  </section>
+
+                  <!-- Runs -->
+
+                  <section class="side-panel-section">
+                    <div class="side-panel-header">
+                      <h3 class="opencor-section-title opencor-section-title-small">Runs</h3>
+                      <ToolbarButtonWidget :class="{ invisible: runs.length === 1 }"
                         icon="pi pi-trash"
-                        outlined severity="danger"
-                        size="small"
-                        title="Remove all tracked runs"
-                        @click="onRemoveAllRuns"
+                        label="Remove all tracked runs"
+                        small
+                        tooltipAlign="end"
                         :disabled="runs.length === 1"
+                        @click="onRemoveAllRuns($event)"
                       />
                     </div>
-                    <div class="flex flex-col gap-2">
+                    <Button ref="trackRunButtonRef" class="w-full"
+                      icon="pi pi-plus"
+                      label="Track run"
+                      outlined
+                      size="small"
+                      :disabled="isSimulating || simulationIssues.length > 0"
+                      @click="onTrackRun"
+                    />
+                    <div ref="runsListRef" class="runs-list">
                       <div v-for="(run, index) in runs"
                         :key="run.id"
-                        class="run-card rounded-lg p-1 pl-2 opacity-75 hover:opacity-100"
-                        :class="{ 'run-card-live': run.isLiveRun, 'opacity-50': !run.isVisible }"
+                        class="run-row"
+                        :class="{ 'run-row-hidden': !run.isVisible }"
                       >
-                        <div class="flex items-center">
-                          <div class="w-1 h-6 rounded-xs mr-2" :style="`background-color: ${run.color};`"></div>
-                          <TooltipWidget :content="run.isLiveRun ? '' : run.tooltip"
-                            class="grow text-sm"
-                            :class="{ 'cursor-help': !run.isLiveRun, 'opacity-50': !run.isVisible }"
-                          >
-                            {{ run.isLiveRun ? 'Live run' : `Run #${index}` }}
-                          </TooltipWidget>
-                          <div class="flex items-center">
-                            <Button class="p-0! w-5! h-5! run-action-button"
-                              icon="pi pi-palette"
-                              text
-                              size="small"
-                              :style="`color: ${run.color};`"
-                              :title="`Change ${run.isLiveRun ? 'live run' : 'run'} colour`"
-                              @click="onToggleRunColorPopover(index, $event)"
-                            />
-                            <Button class="p-0! w-5! h-5! run-action-button"
-                              :icon="run.isVisible ? 'pi pi-eye' : 'pi pi-eye-slash'"
-                              text :severity="run.isVisible ? 'info' : 'secondary'"
-                              size="small"
-                              :title="`${run.isVisible ? 'Hide' : 'Show'} ${run.isLiveRun ? 'live run' : 'run'}`"
-                              @click="onToggleRun(index)"
-                            />
-                            <Button v-if="!run.isLiveRun" class="p-0! w-5! h-5! run-action-button"
-                              icon="pi pi-times"
-                              text severity="danger"
-                              size="small"
-                              title="Remove run"
-                              @click="onRemoveRun(index)"
-                            />
-                            <div v-else class="w-5 h-5"></div>
-                          </div>
+                        <ToolbarButtonWidget class="run-color-button"
+                          icon="pi pi-circle-fill"
+                          :label="`Change ${runName(run, index)} colour`"
+                          small
+                          :style="{ '--toolbar-button-color': run.color, '--toolbar-button-hover-color': run.color }"
+                          @click="onToggleRunColorPopover(index, $event)"
+                        />
+                        <div v-hint.html="run.isLiveRun ? '' : run.tooltip"
+                          class="run-name grow min-w-0"
+                          :class="{ 'cursor-help': !run.isLiveRun }"
+                        >
+                          {{ runName(run, index, true) }}
+                        </div>
+                        <div class="run-actions">
+                          <ToolbarButtonWidget class="run-visibility-button"
+                            :icon="run.isVisible ? 'pi pi-eye' : 'pi pi-eye-slash'"
+                            :label="`${run.isVisible ? 'Hide' : 'Show'} ${runName(run, index)}`"
+                            small
+                            tooltipAlign="end"
+                            @click="onToggleRun(index)"
+                          />
+                          <ToolbarButtonWidget v-if="!run.isLiveRun" class="run-remove-button"
+                            icon="pi pi-times"
+                            :label="`Remove ${runName(run, index)}`"
+                            small
+                            tooltipAlign="end"
+                            @click="onRemoveRun(index)"
+                          />
+                          <div v-else class="w-6 h-6"></div>
                         </div>
                       </div>
                     </div>
-                    <div v-if="runs.length === 1" class="empty-state p-2 text-center rounded-lg">
-                      <i class="pi pi-info-circle empty-state-icon mb-1.5 opacity-50"></i>
-                      <p class="text-xs">
-                        No runs are being tracked.
-                      </p>
+                    <div v-if="runs.length === 1" class="empty-state">
+                      No runs are being tracked.
                     </div>
-                  </div>
-                </Fieldset>
-                <Fieldset v-if="preSimulationDuration" legend="Note" class="note">
-                  The simulation was run for <br/>
-                  <strong>{{ preSimulationDuration }} {{ voiUnit }}</strong> prior to plotting.
-                </Fieldset>
+                  </section>
+
+                  <!-- Note -->
+
+                  <p v-if="preSimulationDuration" class="side-panel-hint">
+                    <i class="pi pi-info-circle"></i>
+                    <span>The simulation was run for <strong>{{ preSimulationDuration }} {{ voiUnit }}</strong> prior to plotting.</span>
+                  </p>
+                </div>
               </ScrollPanel>
             </div>
-            <div class="relative flex flex-col grow h-full min-h-0">
+            <div class="plots-column relative flex flex-col grow h-full min-h-0">
               <div class="flex flex-col grow gap-2 min-h-0" :class="{ 'invisible pointer-events-none': simulationIssues.length }">
                 <GraphPanelWidget
                   v-for="(_plot, index) in actualUiJson.output.plots"
@@ -172,7 +163,7 @@
                   @marginsUpdated="(newMargins: IGraphPanelMargins) => onMarginsUpdated(`plot_${index}`, newMargins)"
                 />
               </div>
-              <IssuesView v-show="simulationIssues.length" class="absolute inset-0 m-4 ml-0" :issues="simulationIssues" />
+              <IssuesView v-show="simulationIssues.length" class="absolute inset-0 m-4" :issues="simulationIssues" />
             </div>
           </div>
         </div>
@@ -191,13 +182,19 @@
           @close="settingsVisible = false"
         />
       </Teleport>
-      <Popover ref="runColorPopoverRef" :appendTo="appendTarget">
-        <div class="flex p-1.5 gap-2">
-          <button class="color-swatch cursor-pointer w-6 h-6 outline-2 outline-transparent rounded-md hover:scale-[1.15]"
+      <Popover ref="runColorPopoverRef" :appendTo="appendTarget"
+        @show="runColorPopoverVisible = true"
+        @hide="runColorPopoverVisible = false"
+      >
+        <div class="flex p-2 gap-2" tabindex="-1" :autofocus="!runColorPopoverOpenedUsingKeyboard" @keydown="onColorSwatchesKeyDown">
+          <button class="color-swatch cursor-pointer w-6 h-6 outline-2 outline-transparent rounded-md"
             v-for="(name, color) in colors.PALETTE" :key="color"
+            type="button"
             :style="`background-color: ${color};`"
-            :class="{ 'color-swatch-selected': color === runs[runColorPopoverIndex].color }"
-            :title="name"
+            :class="{ 'color-swatch-selected': color === runs[runColorPopoverIndex]?.color }"
+            :autofocus="runColorPopoverOpenedUsingKeyboard && color === runs[runColorPopoverIndex]?.color"
+            :aria-pressed="color === runs[runColorPopoverIndex]?.color"
+            v-hint="name"
             @click="onRunColorChange(runColorPopoverIndex, color)"
           />
         </div>
@@ -221,6 +218,7 @@ import * as colors from '../../common/colors';
 import * as common from '../../common/common';
 import * as dependencies from '../../common/dependencies';
 import * as externalData from '../../common/externalData';
+import { vHint } from '../../common/hint';
 import * as locCommon from '../../common/locCommon';
 import * as math from '../../common/math';
 import * as vueCommon from '../../common/vueCommon';
@@ -265,10 +263,10 @@ const { simulationOnly } = useOpenCORContext();
 
 const opencorElement = vue.shallowRef<HTMLElement | null>(null);
 const fileTabElement = vue.shallowRef<HTMLElement | null>(null);
-// Note: our settings dialog is rendered in our OpenCOR element (rather than in our file tab) so that, like all the other
-//       dialogs, it covers the whole of OpenCOR, including our main menu and file tabs. It still gets our styles since
-//       it is given our simulation-experiment-view class, and it is still centred over our file tab, i.e. the element
-//       in which we are laid out (our nearest positioned ancestor).
+// Note: our settings dialog is rendered in our OpenCOR element (rather than in our file tab) so that, like all the
+//       other dialogs, it covers the whole of OpenCOR, including our main menu and file tabs. It still gets our styles
+//       since it is given our simulation-experiment-view class, and it is still centred over our file tab, i.e. the
+//       element in which we are laid out (our nearest positioned ancestor).
 const rootRef = vue.shallowRef<HTMLElement | null>(null);
 const settingsVisible = vue.ref<boolean>(false);
 const document = props.file.document();
@@ -279,11 +277,9 @@ const cvode = uniformTimeCourse?.cvode() ?? null;
 const mathEval = new math.Float64ArrayMath();
 const model = isDocumentValid ? document.model(0) : null;
 
-// The ID of our simulation inputs' fieldset.
-// Note: we customise the legend of our simulation inputs' fieldset, so we need to give its label the ID that the
-//       fieldset expects (i.e. `<fieldset id>_header`) for its contents to still be labelled by it.
+// Whether we use a narrow layout, i.e. whether our side panel is stacked above our plots (see .narrow-layout below).
 
-const inputsFieldsetId = `simulationInputs${vue.getCurrentInstance()?.uid}`;
+const narrowLayout = vueCommon.useNarrowLayout(rootRef);
 
 // Some helper functions to evaluate and apply the model changes resulting from the given parameters and scope.
 
@@ -542,6 +538,8 @@ const runs = vue.ref<ISimulationRun[]>([
 let trackedRunId = 0;
 let simulationGeneration = 0;
 const runColorPopoverIndex = vue.ref<number>(-1);
+const runColorPopoverVisible = vue.ref<boolean>(false);
+const runColorPopoverOpenedUsingKeyboard = vue.ref<boolean>(false);
 const runColorPopoverRef = vue.ref<InstanceType<typeof Popover> | undefined>();
 const graphPanelRefs = vue.ref<Record<number, InstanceType<typeof GraphPanelWidget> | undefined>>({});
 const appendTarget = vueCommon.useAppendTarget(rootRef as unknown as vue.Ref<HTMLElement | null>);
@@ -1443,8 +1441,8 @@ const runSimulation = async (currentSimulationGeneration: number): Promise<void>
     return;
   }
 
-  // Use our instance as is if it has yet to be run and was instantiated with the same model changes (e.g., for our first
-  // simulation run), otherwise apply the model changes and create a fresh instance for the new simulation run.
+  // Use our instance as is if it has yet to be run and was instantiated with the same model changes (e.g., for our
+  // first simulation run), otherwise apply the model changes and create a fresh instance for the new simulation run.
   // Note: using a fresh instance ensures that it picks up the latest model changes and avoids reusing an instance which
   //       internal state may have been corrupted by a previous cancellation.
 
@@ -1935,6 +1933,8 @@ const onTrackRun = (): void => {
   }
 
   // Compute the tooltip for this run, keeping in mind that some simulation inputs may not be visible.
+  // Note: our tooltip is a rich hint (see common/hint.ts), so we escape the name and value of our simulation inputs,
+  //       which come from our UI JSON (i.e. from our file) and are shown as plain text elsewhere (see InputWidget.vue).
 
   const tooltipRows: string[] = [];
 
@@ -1963,14 +1963,9 @@ const onTrackRun = (): void => {
       }
     }
 
-    tooltipRows.push(`<tr style="vertical-align: top;">
-      <td style="font-weight: bold;">
-        ${input.name}:
-      </td>
-      <td style="padding-left: 8px;">
-        ${inputValue}
-      </td>
-    </tr>`);
+    tooltipRows.push(
+      `<tr><th>${common.escapeHtml(input.name)}:</th><td>${common.escapeHtml(String(inputValue ?? ''))}</td></tr>`
+    );
   }
 
   const tooltip = `<table>
@@ -2015,16 +2010,86 @@ const onTrackRun = (): void => {
   });
 };
 
+// The name of the given run (e.g., "live run" or "run #3"), which is used in the labels of the buttons of a run, so
+// that they say which run they are for (e.g., when read by a screen reader), and, capitalised, as the name of the run
+// itself.
+
+const runName = (run: ISimulationRun, index: number, capitalised = false): string => {
+  const res = run.isLiveRun ? 'live run' : `run #${index}`;
+
+  return capitalised ? res.charAt(0).toUpperCase() + res.slice(1) : res;
+};
+
+// Keep the keyboard focus within our runs when one (or all) of them gets removed while the keyboard focus is on its (or
+// their) remove button (or on another of its (or their) buttons) or on our Remove all tracked runs button since the
+// focused button would otherwise disappear (or get disabled) and the keyboard focus would be lost. The keyboard focus
+// goes to the remove button of the run that takes the place of the removed run or, if there is none, of the previous
+// run, or to our Track run button if there are no tracked runs anymore (or to the visibility button of our live run if
+// our Track run button is disabled, e.g., if our simulation has issues).
+// Note: a toolbar button doesn't get the focus when it is clicked (see ToolbarButtonWidget.vue), so a button only has
+//       the focus if it was focused using the keyboard (be it then activated using the keyboard or the mouse).
+
+const runsListRef = vue.useTemplateRef<HTMLElement>('runsListRef');
+const trackRunButtonRef = vue.useTemplateRef<{ $el: HTMLElement }>('trackRunButtonRef');
+
+// Whether the keyboard focus is on one of the buttons of the runs from the given index onwards (up to the given number
+// of runs).
+
+const runsHaveFocus = (index: number, count = Infinity): boolean => {
+  const activeElement = window.document.activeElement;
+
+  return Array.from(runsListRef.value?.children ?? [])
+    .slice(index, index + count)
+    .some((runRow: Element) => runRow.contains(activeElement));
+};
+
+const keepFocusAfterRunRemoval = async (index: number): Promise<void> => {
+  await vue.nextTick();
+
+  // Note: the live run has no remove button, so the remove button of the run at the given index is at index - 1.
+
+  const removeButtons = Array.from(runsListRef.value?.querySelectorAll<HTMLElement>('.run-remove-button') ?? []);
+  const removeButton = removeButtons[Math.min(index, removeButtons.length) - 1];
+
+  if (removeButton) {
+    removeButton.focus();
+
+    return;
+  }
+
+  const trackRunButton = trackRunButtonRef.value?.$el;
+
+  if (trackRunButton instanceof HTMLButtonElement && !trackRunButton.disabled) {
+    trackRunButton.focus();
+  } else {
+    runsListRef.value?.querySelector<HTMLElement>('.run-visibility-button')?.focus();
+  }
+};
+
 const onRemoveRun = (index: number): void => {
   // Remove the given run.
 
+  const hadFocus = runsHaveFocus(index, 1);
+
   runs.value.splice(index, 1);
+
+  if (hadFocus) {
+    void keepFocusAfterRunRemoval(index);
+  }
 };
 
-const onRemoveAllRuns = (): void => {
+const onRemoveAllRuns = (event?: Event): void => {
   // Remove all the runs except the live run.
+  // Note: we may also be called programmatically (e.g., when our settings get updated), in which case there is no
+  //       event.
+
+  const hadFocus = !!event && (event.currentTarget === window.document.activeElement || runsHaveFocus(1));
 
   runs.value.splice(1);
+
+  if (hadFocus) {
+    void keepFocusAfterRunRemoval(1);
+  }
 };
 
 const onToggleRun = (index: number): void => {
@@ -2045,10 +2110,98 @@ const onRunColorChange = (index: number, color: string): void => {
   }
 };
 
-const onToggleRunColorPopover = (index: number, event: MouseEvent): void => {
+// Show/hide our colour popover for the given run.
+// Note #1: when our popover is shown using the keyboard, the swatch of the current colour of our run is focused (see
+//          its autofocus attribute), so that our popover can be used with the keyboard straightaway. When it is shown
+//          using the mouse, our swatches are focused (and therefore get a focus ring and show their hint) only once the
+//          keyboard is used, so it is our swatches' container that is focused (see its autofocus attribute) and the
+//          swatch of the current colour of our run gets focused as soon as Tab or an arrow key is pressed (or the
+//          first/last swatch if Home/End is pressed, see onColorSwatchesKeyDown()). Otherwise, the swatch of the
+//          current colour of our run would be focused programmatically, in which case the browser decides whether it
+//          gets a focus ring (and therefore shows its hint) based on how the keyboard focus was last moved (e.g., not
+//          once a swatch has been clicked).
+// Note #2: a click event that is triggered using the keyboard (i.e. using Enter or Space) has no detail.
+// Note #3: our popover keeps the keyboard focus within itself (i.e. Tab goes from one swatch to another), and Escape
+//          hides it and gives the keyboard focus back to the colour button of our run.
+// Note #4: the left/right arrow keys also go from one swatch to another (wrapping around), and the Home/End keys go to
+//          the first/last swatch (see onColorSwatchesKeyDown()).
+// Note #5: our popover is toggled when the colour button of the run for which it is shown is pressed, but it is moved
+//          to another run when the colour button of that run is pressed, i.e. it is hidden and then shown again for
+//          that run (so that it gets aligned with, and focused for, that run). Our run is only updated once our popover
+//          has started hiding, so that it doesn't show the colour of the other run while hiding. Also, our popover is
+//          shown again for the colour button that was pressed, which we must therefore pass on explicitly since the
+//          current target of the event cannot be relied upon by then (e.g., it is null once the event has been
+//          dispatched, as is the case for a click that is triggered programmatically).
+
+const onToggleRunColorPopover = async (index: number, event: MouseEvent): Promise<void> => {
+  const popover = runColorPopoverRef.value;
+  const colorButton = event.currentTarget;
+  const openedUsingKeyboard = event.detail === 0;
+
+  if (!popover || !(colorButton instanceof HTMLElement)) {
+    return;
+  }
+
+  if (runColorPopoverVisible.value && runColorPopoverIndex.value !== index) {
+    popover.hide();
+
+    await vue.nextTick();
+
+    runColorPopoverIndex.value = index;
+    runColorPopoverOpenedUsingKeyboard.value = openedUsingKeyboard;
+
+    popover.show({ currentTarget: colorButton } as unknown as Event, colorButton);
+
+    return;
+  }
+
   runColorPopoverIndex.value = index;
+  runColorPopoverOpenedUsingKeyboard.value = openedUsingKeyboard;
 
-  runColorPopoverRef.value?.toggle(event);
+  popover.toggle(event);
+};
+
+const onColorSwatchesKeyDown = (event: KeyboardEvent): void => {
+  if (!['Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+    return;
+  }
+
+  const swatches = Array.from((event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('.color-swatch'));
+  const index = swatches.indexOf(window.document.activeElement as HTMLElement);
+
+  // Focus the swatch of the current colour of our run (or the first/last swatch) if no swatch has the focus yet, i.e.
+  // if our popover was shown using the mouse (see Note #1 above).
+
+  if (index === -1) {
+    event.preventDefault();
+
+    const selectedIndex = swatches.findIndex((swatch: HTMLElement) =>
+      swatch.classList.contains('color-swatch-selected')
+    );
+
+    swatches[
+      event.key === 'Home' ? 0 : event.key === 'End' ? swatches.length - 1 : Math.max(selectedIndex, 0)
+    ]?.focus();
+
+    return;
+  }
+
+  // Let our popover handle Tab (see Note #3 above).
+
+  if (event.key === 'Tab') {
+    return;
+  }
+
+  event.preventDefault();
+
+  const newIndex =
+    event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? swatches.length - 1
+        : (index + (event.key === 'ArrowRight' ? 1 : -1) + swatches.length) % swatches.length;
+
+  swatches[newIndex]?.focus();
 };
 
 // Download COMBINE archive.
@@ -2173,15 +2326,15 @@ const onSettingsOk = (updatedSettings: ISimulationExperimentInteractiveViewSetti
 
   // Make sure that our next simulation run doesn't use our current instance since it was instantiated using our old
   // settings.
-  // Note: this is only relevant if our current instance has yet to be run (e.g., if our previous simulation run couldn't
-  //       be started because of some issues).
+  // Note: this is only relevant if our current instance has yet to be run (e.g., if our previous simulation run
+  //       couldn't be started because of some issues).
 
   instanceIsPristine = false;
 
   // Remove the model changes from our previous simulation run if our new UI JSON is invalid.
   // Note: we don't run any simulation with an invalid UI JSON, so those model changes would otherwise be left in our
-  //       document and, therefore, be exported with it (see onDownloadCombineArchive()) even though they don't match our
-  //       new UI JSON.
+  //       document and, therefore, be exported with it (see onDownloadCombineArchive()) even though they don't match
+  //       our new UI JSON.
 
   if (uiJsonIssues.value.length > 0) {
     applyModelChanges([]);
@@ -2284,11 +2437,44 @@ const allSimulationInputsAtDefaultValues = vue.computed<boolean>(() => {
   });
 });
 
-const onResetInputs = (): void => {
+// Give the keyboard focus to our first visible simulation input, if our Reset all simulation inputs button had it,
+// since that button gets hidden (and disabled) once all our simulation inputs are at their default values, and the
+// keyboard focus would otherwise be lost (as when removing runs, see keepFocusAfterRunRemoval()).
+// Note #1: our reset button keeps the focus where it is when clicked (see its keepFocus property), so it only has the
+//          focus if it was focused using the keyboard.
+// Note #2: we look for the first element that can be tabbed to, i.e. the text field of a scalar input or the select of
+//          a discrete input, since it comes before the other elements of an input that can be tabbed to (e.g., the
+//          handle of the slider of a scalar input). We do this using the DOM since the order of our input widgets in
+//          inputWidgetsRef is not guaranteed to be the order in which they are shown.
+
+const simulationInputsRef = vue.useTemplateRef<HTMLElement>('simulationInputsRef');
+const TABBABLE_ELEMENTS = 'input:not([type="hidden"], [tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+
+const keepFocusAfterInputsReset = async (resetButton: Element): Promise<void> => {
+  await vue.nextTick();
+
+  // Don't move the keyboard focus if it has gone somewhere else in the meantime (i.e. somewhere else than <body> or our
+  // reset button, which may keep the keyboard focus once disabled, depending on the browser).
+
+  const activeElement = window.document.activeElement;
+
+  if (activeElement && activeElement !== window.document.body && activeElement !== resetButton) {
+    return;
+  }
+
+  Array.from(simulationInputsRef.value?.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS) ?? [])
+    .find((element: HTMLElement) => element.getClientRects().length > 0 && !element.matches(':disabled'))
+    ?.focus();
+};
+
+const onResetInputs = (event: Event): void => {
+  const resetButton = event.currentTarget instanceof Element ? event.currentTarget : null;
+  const hadFocus = !!resetButton && resetButton === window.document.activeElement;
+
   // Discard any value that is being edited, so that it doesn't get committed (and simulated) once its input loses the
   // focus.
-  // Note: our reset button doesn't take the focus when clicked, so that the input that has the focus (if any) doesn't
-  //       commit its value before we get here.
+  // Note: our reset button keeps the focus where it is when clicked (see its keepFocus property), so that the input
+  //       that has the focus (if any) doesn't commit its value before we get here.
 
   for (const inputWidget of inputWidgetsRef.value) {
     inputWidget.discardEdit();
@@ -2302,17 +2488,25 @@ const onResetInputs = (): void => {
   });
 
   if (
-    defaultInputValues.every((defaultInputValue: number, index: number) => {
+    !defaultInputValues.every((defaultInputValue: number, index: number) => {
       return inputValues.value[index] === defaultInputValue;
     })
   ) {
-    return;
+    inputValues.value = defaultInputValues;
+
+    onInputChange();
+    onInputChangeEnd();
   }
 
-  inputValues.value = defaultInputValues;
+  // Keep the keyboard focus, if our reset button had it.
+  // Note: we do this once our inputs have been reset, so that we wait for our UI to reflect it (e.g., for our reset
+  //       button to be hidden and for some of our inputs to be shown/hidden, see runSimulation()). Otherwise, we would
+  //       look for our first visible simulation input before our UI gets updated, i.e. we might give the keyboard focus
+  //       to an input that is about to be hidden.
 
-  onInputChange();
-  onInputChangeEnd();
+  if (hadFocus) {
+    void keepFocusAfterInputsReset(resetButton);
+  }
 };
 
 // Make sure that any pending simulation updates are discarded once we get unmounted.
@@ -2374,6 +2568,11 @@ vue.onMounted(() => {
   box-shadow: 0 2px 8px var(--p-shadow-color-dark, rgba(255, 255, 255, 0.15));
 }
 
+/**
+ * Note: focus outlines are removed (see app.css), which would also remove the outline of the selected swatch when it
+ *       gets the focus, so we restore it.
+ */
+
 .color-swatch-selected {
   outline-color: var(--p-text-color);
 }
@@ -2382,112 +2581,194 @@ vue.onMounted(() => {
   outline: 2px solid var(--p-text-color) !important;
 }
 
-.empty-state {
+/**
+ * Focus ring of a swatch, which is like that of our other buttons (see app.css), i.e. a ring in the primary colour that
+ * is offset from the swatch (or, for the selected swatch, that is right outside its outline).
+ * Note: it is also shown when the swatch is hovered, hence the :hover variant, which takes precedence over the box
+ *       shadow of a hovered swatch (in both light and dark modes).
+ */
+
+.color-swatch:focus-visible,
+.color-swatch:focus-visible:hover {
+  box-shadow:
+    0 0 0 2px var(--p-content-background),
+    0 0 0 4px var(--p-primary-color);
+}
+
+/**
+ * Empty view, i.e. when our view has not been configured yet.
+ */
+
+.empty-view {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+.empty-view-icon {
+  margin-bottom: 0.25rem;
   color: var(--p-text-muted-color);
-  border: 1px dashed var(--p-content-border-color);
+  font-size: 1.5rem;
 }
 
-.empty-state-icon {
-  font-size: 1.25rem;
+.empty-view-title {
+  margin: 0;
+  color: var(--p-text-color);
+  font-weight: 600;
+}
+
+.empty-view-text {
+  margin: 0 0 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+
+/**
+ * Side panel, i.e. our simulation inputs and runs.
+ * Note: an input field has an intrinsic width (of about 20 characters), which would otherwise make our side panel wider
+ *       than we want, so we let our number fields shrink to the width of our side panel. This means that a number field
+ *       with a reset button doesn't need the negative margin that keeps its intrinsic width the same (see
+ *       InputScientificNumberWidget.vue), and which would otherwise make it overflow our side panel.
+ */
+
+.side-panel-column {
+  flex-shrink: 0;
+  width: 16rem;
+  border-right: 1px solid var(--p-content-border-color);
 }
 
 /**
- * Our inputs' reset button is only shown when there is something to reset, in which case it hides the part of our line
- * where it is (using our legend's background). Our line always goes all the way to the end of our legend (i.e. our
- * legend has no end padding or border), so that it looks like our fieldset's top border is uninterrupted when our reset
- * button is hidden.
- * Note #1: our line is drawn as a whole (rather than, say, using a separate element for the part where our reset button
- *          is) since Chrome may otherwise render that part one device pixel off our line (e.g., with a device pixel
- *          ratio of 1.25 or 1.75).
- * Note #2: the minimum width of our line accounts for our reset button and the space around it (i.e. our legend's end
- *          padding and border, which are now part of our line), so that our legend (and therefore our fieldset) is as
- *          wide as it would be if our reset button was part of our legend's layout, i.e. it doesn't change width when
- *          our reset button gets shown or hidden.
+ * Narrow layout (see useNarrowLayout() in vueCommon.ts), i.e. our side panel is stacked above our plots (rather than
+ * shown to their left), so that our plots remain usable (e.g., on a phone or when OpenCOR is embedded in a small
+ * container). Our side panel then takes the whole width and part of the height of our view, and can be scrolled.
  */
 
-.inputs-fieldset :deep(.p-fieldset-legend) {
-  width: 100%;
-  padding-inline-end: 0;
-  border-inline-end-width: 0;
+.panels.narrow-layout {
+  flex-direction: column;
+}
+
+.narrow-layout .side-panel-column {
+  width: auto;
+  height: 40%;
+  border-right: none;
+  border-bottom: 1px solid var(--p-content-border-color);
+}
+
+.narrow-layout .plots-column {
+  flex: 1 1 0;
+  height: auto;
 }
 
-.inputs-fieldset-line {
-  min-width: calc(0.75rem + 1.25rem + 0.75rem + 1px);
-  border-top: 1px solid var(--p-fieldset-border-color);
+.side-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem;
 }
 
-.inputs-fieldset-reset {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: 1px;
+.side-panel :deep(.p-inputnumber .p-inputnumber-input) {
+  flex: 1 1 auto;
+  width: 0;
+  min-width: 0;
+  margin-right: 0;
+}
+
+.side-panel-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.side-panel-header {
   display: flex;
   align-items: center;
-  padding-inline: 0.75rem;
-  background: var(--p-fieldset-legend-background);
-  transition: opacity 0.15s;
+  justify-content: space-between;
+  min-height: 1.5rem;
 }
 
-.inputs-fieldset-reset-hidden {
-  opacity: 0;
+.side-panel-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding-top: 0.375rem;
 }
 
-.note {
+.side-panel-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
   color: var(--p-text-muted-color);
-  margin-top: 0.5rem;
-  border: 1px dashed var(--p-content-border-color);
-  padding: 0 0.5rem 0.5rem 0.5rem !important;
-  text-align: center;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
 }
 
-.note :deep(.p-fieldset-legend) {
-  font-size: 0.875rem;
-  padding-top: 0;
-  padding-bottom: 0;
+.side-panel-hint .pi {
+  line-height: inherit;
 }
 
-.reset-inputs-button {
-  transition:
-    opacity 0.15s,
-    transform 0.15s;
-}
+/**
+ * Runs, which actions are always shown (so that they can easily be discovered), but with small icons (the same size as
+ * that of our colour button), so that they don't stand out.
+ */
 
-.reset-inputs-button:not(:disabled) {
-  opacity: 0.75;
+.runs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
-.reset-inputs-button:not(:disabled):hover {
-  opacity: 1;
-  transform: scale(1.15);
+.run-row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.125rem 0.25rem 0.125rem 0.125rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.15s ease;
 }
 
-.reset-inputs-button:disabled {
-  opacity: 0;
-  transform: scale(0.5);
+.run-row:hover {
+  background-color: var(--p-content-hover-background);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .inputs-fieldset-reset,
-  .reset-inputs-button {
-    transition: none;
-  }
+.run-name {
+  overflow: hidden;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.run-action-button {
-  opacity: 0.75;
+/**
+ * Note: we only fade the icon of the colour button of a hidden run since fading the button itself would also fade its
+ *       tooltip (see ToolbarButtonWidget.vue).
+ */
+
+.run-row-hidden .run-name,
+.run-row-hidden .run-color-button :deep(.toolbar-button-icon) {
+  opacity: 0.45;
 }
 
-.run-action-button:hover {
-  opacity: 1;
-  transform: scale(1.15);
+.run-color-button :deep(.toolbar-button-icon),
+.run-actions :deep(.toolbar-button-icon) {
+  font-size: 0.75rem;
 }
 
-.run-card {
-  border: 1px solid var(--p-content-border-color);
+.run-actions {
+  display: flex;
+  align-items: center;
 }
 
-.run-card-live {
-  border-style: dashed;
-  border-color: var(--p-primary-color);
+.empty-state {
+  padding: 0.5rem;
+  border: 1px dashed var(--p-content-border-color);
+  border-radius: 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  text-align: center;
 }
 </style>
diff --git a/src/renderer/src/components/views/SimulationExperimentStandardView.vue b/src/renderer/src/components/views/SimulationExperimentStandardView.vue
index 29197f6c8..87d371dfa 100644
--- a/src/renderer/src/components/views/SimulationExperimentStandardView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentStandardView.vue
@@ -1,73 +1,101 @@
 <template>
-  <div ref="rootRef" class="simulation-experiment-view toolbar-based-view h-full flex flex-col">
+  <div ref="rootRef" class="simulation-experiment-view standard-view toolbar-based-view h-full flex flex-col">
     <IssuesView v-if="issues.length" class="m-4 mb-0" style="height: calc(100% - 2rem);" :issues="issues" />
     <template v-else>
-      <Toolbar class="p-1! shrink-0">
+      <Toolbar class="shrink-0">
         <template #start>
-          <Button class="p-1! toolbar-button"
-            :icon="simulationStatus !== locSedApi.ESedInstanceStatus.RUNNING ? 'pi pi-play-circle' : 'pi pi-pause-circle'"
-            text severity="secondary"
-            :title="(simulationStatus === locSedApi.ESedInstanceStatus.IDLE ? 'Run' : simulationStatus === locSedApi.ESedInstanceStatus.RUNNING ? 'Pause' : 'Resume') + ' simulation (F9)'"
-            @click="onRunPause"
-          />
-          <Button class="p-1! toolbar-button"
-            icon="pi pi-stop-circle"
-            text severity="secondary"
-            title="Stop simulation"
-            :disabled="simulationStatus === locSedApi.ESedInstanceStatus.IDLE"
-            @click="onStop"
-          />
+          <div class="flex gap-1">
+            <ToolbarButtonWidget ref="runPauseButtonRef"
+              :icon="simulationStatus !== locSedApi.ESedInstanceStatus.RUNNING ? 'pi pi-play-circle' : 'pi pi-pause-circle'"
+              :accent="simulationStatus !== locSedApi.ESedInstanceStatus.RUNNING ? 'primary' : 'warning'"
+              :label="(simulationStatus === locSedApi.ESedInstanceStatus.IDLE ? 'Run' : simulationStatus === locSedApi.ESedInstanceStatus.RUNNING ? 'Pause' : 'Resume') + ' simulation'"
+              shortcut="F9"
+              :disabled="isFinishing"
+              @click="onRunPause"
+            />
+            <ToolbarButtonWidget ref="stopButtonRef"
+              icon="pi pi-stop-circle"
+              accent="danger"
+              label="Stop simulation"
+              :disabled="isFinishing || simulationStatus === locSedApi.ESedInstanceStatus.IDLE"
+              @click="onStop"
+            />
+            <!--
+            Note: our run status is announced by assistive technologies through a visually hidden live region (which
+                  must exist before its contents change for them to get announced, and which doesn't affect our
+                  layout). That live region doesn't include the progress of a running simulation since it would
+                  otherwise get announced every time it changes (our progress bar already exposes it).
+            -->
+            <span v-if="runStatus" class="run-status" :class="`run-status-${runStatus.type}`" aria-hidden="true">
+              <i :class="runStatus.icon"></i>
+              <span>{{ runStatus.label }}</span>
+            </span>
+            <span class="sr-only" role="status">{{ runStatusAnnouncement }}</span>
+          </div>
         </template>
         <template #end>
           <div class="flex gap-1 invisible">
-            <Button class="p-1! toolbar-button"
-              icon="pi pi-download"
-            />
-            <Button class="p-1! toolbar-button"
-              icon="pi pi-cog"
-            />
+            <ToolbarButtonWidget icon="pi pi-download" />
+            <ToolbarButtonWidget icon="pi pi-cog" />
           </div>
         </template>
       </Toolbar>
+      <ProgressBar class="run-progress" :class="{ 'run-progress-visible': progress > 0 }" aria-label="Simulation progress" :showValue="false" :value="progress" />
       <div class="grow flex flex-col min-h-0">
         <Splitter class="border-none! flex-1 m-0 min-h-0" layout="vertical">
           <SplitterPanel :size="simulationOnly ? 100 : 89">
-            <Splitter>
-              <SplitterPanel class="ml-4 mr-4 mb-4 min-w-fit" :size="25">
+            <!--
+            Note: our side panel is stacked above our plot when we use a narrow layout (see narrowLayout), in which case
+                  we use a vertical splitter. A splitter only sizes its panels when it is mounted, hence we remount it
+                  when our layout changes.
+            -->
+            <Splitter :key="narrowLayout ? 'narrow' : 'wide'" :layout="narrowLayout ? 'vertical' : 'horizontal'">
+              <SplitterPanel :class="narrowLayout ? 'min-h-24' : 'min-w-56'" :size="narrowLayout ? 40 : 17">
                 <ScrollPanel class="h-full">
-                  <SimulationPropertyEditor v-if="instanceTask && uniformTimeCourse" :uniformTimeCourse="uniformTimeCourse" :instanceTask="instanceTask" :disabled="simulationSettingsDisabled" />
-                  <!-- <SolversPropertyEditor />
-                  <GraphsPropertyEditor />
-                  <ParametersPropertyEditor /> -->
-                  <Fieldset legend="X Axis">
-                    <Select
-                      v-model="xParameter"
-                      editable
-                      filter
-                      filterMode="lenient"
-                      :options="parameters"
-                      size="small"
-                      class="w-full"
-                      :appendTo="appendTarget"
-                      @change="onParameterChange"
-                    />
-                  </Fieldset>
-                  <Fieldset legend="Y Axis">
-                    <Select
-                      v-model="yParameter"
-                      editable
-                      filter
-                      filterMode="lenient"
-                      :options="parameters"
-                      size="small"
-                      class="w-full"
-                      :appendTo="appendTarget"
-                      @change="onParameterChange"
-                    />
-                  </Fieldset>
+                  <div class="side-panel">
+                    <SimulationPropertyEditor v-if="instanceTask && uniformTimeCourse" :uniformTimeCourse="uniformTimeCourse" :instanceTask="instanceTask" :disabled="simulationSettingsDisabled" />
+                    <!-- <SolversPropertyEditor />
+                    <GraphsPropertyEditor />
+                    <ParametersPropertyEditor /> -->
+                    <section class="side-panel-section">
+                      <h3 class="opencor-section-title opencor-section-title-small">Plot</h3>
+                      <div class="side-panel-fields">
+                        <FloatLabel variant="on">
+                          <Select
+                            v-model="xParameter"
+                            ariaLabel="X axis"
+                            editable
+                            filter
+                            filterMode="lenient"
+                            :options="parameters"
+                            size="small"
+                            class="w-full"
+                            :appendTo="appendTarget"
+                            @change="onParameterChange"
+                          />
+                          <label>X axis</label>
+                        </FloatLabel>
+                        <FloatLabel variant="on">
+                          <Select
+                            v-model="yParameter"
+                            ariaLabel="Y axis"
+                            editable
+                            filter
+                            filterMode="lenient"
+                            :options="parameters"
+                            size="small"
+                            class="w-full"
+                            :appendTo="appendTarget"
+                            @change="onParameterChange"
+                          />
+                          <label>Y axis</label>
+                        </FloatLabel>
+                      </div>
+                    </section>
+                  </div>
                 </ScrollPanel>
               </SplitterPanel>
-              <SplitterPanel :size="75">
+              <SplitterPanel :size="narrowLayout ? 60 : 83">
                 <GraphPanelWidget
                   :key="'standard-graph-panel'"
                   :data="data"
@@ -76,11 +104,28 @@
               </SplitterPanel>
             </Splitter>
           </SplitterPanel>
-          <SplitterPanel v-if="!simulationOnly" :size="11">
-            <div ref="editorRef" class="h-full console overflow-y-auto px-2 py-1 leading-[1.42] text-[13px]" v-html="consoleContents"></div>
+          <SplitterPanel v-if="!simulationOnly" class="console-panel flex flex-col" :size="11">
+            <div class="console-header">
+              <span class="opencor-section-title opencor-section-title-small">Console</span>
+              <div class="flex gap-0.5">
+                <ToolbarButtonWidget
+                  v-bind="copyToClipboard.buttonProps('Copy console')"
+                  small
+                  tooltipAlign="end"
+                  @click="copyConsole"
+                />
+                <ToolbarButtonWidget
+                  icon="pi pi-eraser"
+                  label="Clear console"
+                  small
+                  tooltipAlign="end"
+                  @click="clearConsole"
+                />
+              </div>
+            </div>
+            <div ref="editorRef" class="grow min-h-0 console overflow-y-auto px-3 pb-1.5 leading-[1.42] text-[13px] select-text" v-html="consoleContents"></div>
           </SplitterPanel>
         </Splitter>
-        <ProgressBar class="h-0.75!" :showValue="false" :value="progress" />
       </div>
     </template>
   </div>
@@ -91,7 +136,7 @@ import * as vue from 'vue';
 
 import * as colors from '../../common/colors';
 import * as common from '../../common/common';
-import { MEDIUM_DELAY } from '../../common/constants';
+import { MEDIUM_DELAY, STOP_RUN_TIMEOUT, TOAST_LIFE } from '../../common/constants';
 import * as locCommon from '../../common/locCommon';
 import * as vueCommon from '../../common/vueCommon';
 import * as locApi from '../../libopencor/locApi';
@@ -115,6 +160,8 @@ const { simulationOnly } = useOpenCORContext();
 
 const rootRef = vue.shallowRef<HTMLElement | null>(null);
 const editorRef = vue.shallowRef<HTMLElement | null>(null);
+const runPauseButtonRef = vue.useTemplateRef<{ $el: HTMLElement }>('runPauseButtonRef');
+const stopButtonRef = vue.useTemplateRef<{ $el: HTMLElement }>('stopButtonRef');
 const document = props.file.document();
 const documentIssues = document.issues();
 const isDocumentValid = documentIssues.length === 0;
@@ -132,17 +179,206 @@ const data = vue.ref<IGraphPanelData>({
   traces: []
 });
 
-const consoleContents = vue.ref<string>(`<b>${props.file.path()}</b>`);
+const initialConsoleContents = `<b>${props.file.path()}</b>`;
+const consoleContents = vue.ref<string>(initialConsoleContents);
 const progress = vue.ref<number>(0);
 const simulationStatus = vue.ref<locSedApi.ESedInstanceStatus>(instance?.status() ?? locSedApi.ESedInstanceStatus.IDLE);
 
+// Whether we use a narrow layout, i.e. whether our side panel is stacked above our plot (see our template).
+
+const narrowLayout = vueCommon.useNarrowLayout(rootRef);
+
+// The outcome of our last simulation run, if any, and the status of our simulation, which we show in our toolbar.
+
+interface ILastRun {
+  outcome: 'completed' | 'issues' | 'stopped' | 'failed';
+  time?: number;
+}
+
+const lastRun = vue.ref<ILastRun | null>(null);
+
+// Whether our simulation run is finishing, i.e. whether its run is over, but its results have yet to be plotted and our
+// UI to be painted with them (or, if it failed, while we try to stop our instance, for up to STOP_RUN_TIMEOUT, see
+// onRunPause()), during which a new run cannot be started (nor our current run be stopped).
+
+const isFinishing = vue.ref<boolean>(false);
+
+// Keep track of whether our Stop button had the keyboard focus when our simulation became idle, i.e. when our Stop
+// button got disabled (and therefore lost the keyboard focus), so that we can give the keyboard focus to our Run/Pause
+// button once our run is over (see onRunPause()).
+// Note: we need to check this synchronously, i.e. before our Stop button gets disabled.
+
+let stopButtonHadFocus = false;
+
+vue.watch(
+  simulationStatus,
+  (status) => {
+    if (status === locSedApi.ESedInstanceStatus.IDLE && stopButtonRef.value?.$el === window.document.activeElement) {
+      stopButtonHadFocus = true;
+    }
+  },
+  { flush: 'sync' }
+);
+
+// Give the keyboard focus to our Run/Pause button, unless the keyboard focus has gone somewhere else in the meantime
+// (i.e. somewhere else than <body> or one of our Run/Pause and Stop buttons, which may keep the keyboard focus once
+// disabled, depending on the browser).
+
+const focusRunPauseButton = async (): Promise<void> => {
+  await vue.nextTick();
+
+  if (isUnmounted) {
+    return;
+  }
+
+  const activeElement = window.document.activeElement;
+
+  if (
+    !activeElement ||
+    activeElement === window.document.body ||
+    activeElement === runPauseButtonRef.value?.$el ||
+    activeElement === stopButtonRef.value?.$el
+  ) {
+    runPauseButtonRef.value?.$el?.focus();
+  }
+};
+
+// Give the keyboard focus back to the simulation setting that was being edited when our run was started using F9, if
+// any, once our run is over, since it got blurred so that its value could be committed (see onRunPause()), unless the
+// keyboard focus has gone somewhere else in the meantime (i.e. somewhere else than <body>).
+
+let settingBlurredForRun: HTMLElement | null = null;
+
+const focusSettingBlurredForRun = async (): Promise<void> => {
+  const setting = settingBlurredForRun;
+
+  settingBlurredForRun = null;
+
+  if (!setting) {
+    return;
+  }
+
+  await vue.nextTick();
+
+  if (isUnmounted) {
+    return;
+  }
+
+  const activeElement = window.document.activeElement;
+
+  if (
+    (!activeElement || activeElement === window.document.body) &&
+    setting.isConnected &&
+    !setting.matches(':disabled')
+  ) {
+    setting.focus();
+  }
+};
+
+// The status of our simulation run.
+// Note: our console is not shown when we are in simulation-only mode, so we only refer to it when it is shown.
+
+const seeConsole = vue.computed<string>(() => {
+  return simulationOnly.value ? '' : ' (see console)';
+});
+
+const runStatus = vue.computed<{ type: string; icon: string; label: string } | null>(() => {
+  const percentage = Math.round(progress.value);
+
+  if (simulationStatus.value === locSedApi.ESedInstanceStatus.RUNNING || isFinishing.value) {
+    return { type: 'running', icon: 'pi pi-hourglass', label: `Running... ${percentage}%` };
+  }
+
+  if (simulationStatus.value === locSedApi.ESedInstanceStatus.PAUSED) {
+    return { type: 'paused', icon: 'pi pi-pause', label: `Paused at ${percentage}%` };
+  }
+
+  switch (lastRun.value?.outcome) {
+    case 'completed':
+      return {
+        type: 'completed',
+        icon: 'pi pi-check-circle',
+        label: `Completed in ${common.formatTime(lastRun.value.time ?? 0)}`
+      };
+    case 'issues':
+      return {
+        type: 'issues',
+        icon: 'pi pi-exclamation-triangle',
+        label: `Completed with issues${seeConsole.value}`
+      };
+    case 'stopped':
+      return { type: 'stopped', icon: 'pi pi-stop-circle', label: 'Stopped' };
+    case 'failed':
+      return { type: 'failed', icon: 'pi pi-times-circle', label: `Failed${seeConsole.value}` };
+    default:
+      return null;
+  }
+});
+
+// Our run status, as announced by assistive technologies (see our template).
+// Note: our run status may not change when it is reported (e.g., if our run fails to start after our previous run did
+//       too), in which case it wouldn't get announced, so we can clear it and only set it again a bit later (since
+//       assistive technologies may not notice a change that is undone straightaway), see reannounceRunStatus().
+
+const runStatusAnnouncementCleared = vue.ref<boolean>(false);
+let runStatusAnnouncementTimer: ReturnType<typeof setTimeout> | undefined;
+
+const runStatusAnnouncement = vue.computed<string>(() => {
+  if (runStatusAnnouncementCleared.value) {
+    return '';
+  }
+
+  return runStatus.value?.type === 'running' ? 'Running...' : (runStatus.value?.label ?? '');
+});
+
+const reannounceRunStatus = (): void => {
+  clearTimeout(runStatusAnnouncementTimer);
+
+  runStatusAnnouncementCleared.value = true;
+
+  runStatusAnnouncementTimer = setTimeout(() => {
+    runStatusAnnouncementTimer = undefined;
+
+    runStatusAnnouncementCleared.value = false;
+  }, MEDIUM_DELAY);
+};
+
+// Consider our run as having failed, making sure that it gets announced (see reannounceRunStatus()).
+
+const markRunAsFailed = (): void => {
+  lastRun.value = { outcome: 'failed' };
+
+  reannounceRunStatus();
+};
+
+// Hide the status of our last run after a while (i.e. as long as a toast would be shown) if it is only a confirmation
+// (i.e. our simulation has either completed or been stopped), but keep it if it requires people's attention (i.e. our
+// simulation has issues or has failed).
+
+let runStatusTimer: ReturnType<typeof setTimeout> | undefined;
+
+vue.watch(
+  () => runStatus.value?.type,
+  (type) => {
+    clearTimeout(runStatusTimer);
+
+    if (type === 'completed' || type === 'stopped') {
+      runStatusTimer = setTimeout(() => {
+        runStatusTimer = undefined;
+
+        lastRun.value = null;
+      }, TOAST_LIFE);
+    }
+  }
+);
+
 const simulationSettingsDisabled = vue.computed<boolean>(() => {
   return simulationStatus.value !== locSedApi.ESedInstanceStatus.IDLE;
 });
 
 const runAborted = vue.ref(false);
-let progressResetCancel: (() => void) | undefined;
-let abortProgressTimer: ReturnType<typeof setTimeout> | undefined;
+let cancelRunPolling: (() => void) | undefined;
+let progressResetTimer: ReturnType<typeof setTimeout> | undefined;
 const appendTarget = vueCommon.useAppendTarget(rootRef as unknown as vue.Ref<HTMLElement | null>);
 
 if (instanceTask) {
@@ -285,34 +521,75 @@ const updatePlot = (dataSize: number = 0): void => {
 };
 
 // Update the plot after the X or Y parameter has changed.
-// Note: while a simulation is running or paused, only part of its data has been computed (the rest is either zeros or
-//       the data of a previous run), so we only plot the data that has been computed so far (as we do while running,
-//       see onRunPause()).
+// Note #1: while a simulation is running or paused, only part of its data has been computed (the rest is either zeros
+//          or the data of a previous run), so we only plot the data that has been computed so far (as we do while
+//          running, see onRunPause()).
+// Note #2: retrieving the progress of our simulation may fail (e.g., if libOpenCOR throws an exception while a failed
+//          run is being stopped, see onRunPause()), in which case we plot all of our data, as if our simulation was
+//          idle.
 
 const onParameterChange = (): void => {
   if (instance && simulationStatus.value !== locSedApi.ESedInstanceStatus.IDLE) {
-    updatePlot(Math.round(instance.progress() * (uniformTimeCourse?.numberOfSteps() ?? 0)) + 1);
-  } else {
-    updatePlot();
+    let progress: number | undefined;
+
+    try {
+      progress = instance.progress();
+    } catch {
+      progress = undefined;
+    }
+
+    if (progress !== undefined) {
+      updatePlot(Math.round(progress * (uniformTimeCourse?.numberOfSteps() ?? 0)) + 1);
+
+      return;
+    }
+  }
+
+  updatePlot();
+};
+
+// Stop the given instance and wait for it to be idle, but only for up to STOP_RUN_TIMEOUT since it may never be (e.g.,
+// if it cannot be stopped after a run error), and return whether it is idle.
+// Note: this throws if stopping the instance or retrieving its status fails (e.g., if libOpenCOR throws an exception).
+
+const stopRunAndWait = async (sedInstance: locSedApi.SedInstance): Promise<boolean> => {
+  sedInstance.stopRun();
+
+  const { promise, cancel } = vueCommon.waitWhileRunning(sedInstance);
+  let timedOut = false;
+  const timer = setTimeout(() => {
+    timedOut = true;
+
+    cancel();
+  }, STOP_RUN_TIMEOUT);
+
+  try {
+    await promise;
+  } finally {
+    clearTimeout(timer);
   }
+
+  return !timedOut;
 };
 
 // Release our instance (once it is idle) and our document.
-// Note: an instance must not be released while it is running, hence we stop it and wait for it to be idle first.
+// Note: an instance must not be released while it is running, hence we stop it and wait for it to be idle first. If it
+//       is still not idle after a while (see stopRunAndWait()), then we don't release it (i.e. we leak it rather than
+//       release it while it is running, and rather than keep waiting on it forever).
 
 let isUnmounted = false;
 let isWaitingOnRun = false;
 
 const releaseResources = async (): Promise<void> => {
   // Note: we always release our document, even if something goes wrong with our instance (e.g., if libOpenCOR throws an
-  //       exception while we wait for it to be idle) since we would otherwise leak it.
+  //       exception while we wait for it to be idle, or if it cannot be stopped) since we would otherwise leak it.
 
   try {
     if (instance) {
-      if (instance.status() !== locSedApi.ESedInstanceStatus.IDLE) {
-        instance.stopRun();
+      if (instance.status() !== locSedApi.ESedInstanceStatus.IDLE && !(await stopRunAndWait(instance))) {
+        console.error('OpenCOR: a simulation instance could not be stopped, so it could not be released.');
 
-        await vueCommon.waitWhileRunning(instance).promise;
+        return;
       }
 
       instance.release();
@@ -324,6 +601,36 @@ const releaseResources = async (): Promise<void> => {
   }
 };
 
+// Copy the contents of our console, as plain text, to the clipboard, so that they can easily be included in an issue
+// report, for instance.
+// Note #1: our console uses non-breaking spaces to indent its messages, so we replace them with normal spaces.
+// Note #2: our console may change while our copy button lets people know whether it was copied (e.g., if it gets
+//          cleared or if a simulation run reports something), in which case we reset our copy button since its
+//          feedback would no longer be about our (current) console.
+
+const copyToClipboard = vueCommon.useCopyToClipboard();
+
+const copyConsole = (): void => {
+  // biome-ignore lint/performance/useDomNodeTextContent: we need the rendered text (e.g., <br /> as a line break)
+  void copyToClipboard.copy((editorRef.value?.innerText ?? '').replace(/\u00a0/g, ' '));
+};
+
+vue.watch(consoleContents, () => {
+  copyToClipboard.reset();
+});
+
+// Clear our console, i.e. only keep its initial contents (i.e. the path of our file).
+// Note: the status of our last run may refer to our console (i.e. if our simulation has issues or has failed), in which
+//       case we also hide it since our console doesn't contain the details of our last run anymore.
+
+const clearConsole = (): void => {
+  consoleContents.value = initialConsoleContents;
+
+  if (lastRun.value?.outcome === 'issues' || lastRun.value?.outcome === 'failed') {
+    lastRun.value = null;
+  }
+};
+
 // A helper function to scroll our console to the bottom.
 
 const scrollConsoleToBottom = (): void => {
@@ -340,12 +647,33 @@ const addConsoleError = (error: unknown): void => {
   scrollConsoleToBottom();
 };
 
+// A helper function to report the given issues (of our instance) in our console.
+
+const addConsoleIssues = (issues: locApi.IIssue[]): void => {
+  issues.forEach((issue: locApi.IIssue) => {
+    const color =
+      issue.type === locApi.EIssueType.ERROR
+        ? colors.REVERTED_PALETTE.Red
+        : issue.type === locApi.EIssueType.WARNING
+          ? colors.REVERTED_PALETTE.Orange
+          : colors.REVERTED_PALETTE.Blue;
+    const issueType =
+      issue.type === locApi.EIssueType.ERROR ? 'Error' : issue.type === locApi.EIssueType.WARNING ? 'Warning' : 'Info';
+    const issueDescription = issue.description.replace('Task | ', '');
+
+    consoleContents.value += `<br />&nbsp;&nbsp;<span style="color: ${color};"><strong>${issueType}:</strong> ${issueDescription}</span>`;
+  });
+
+  scrollConsoleToBottom();
+};
+
 // Event handlers.
 
 const onRunPause = async (): Promise<void> => {
-  // Make sure that we have an instance (we don't if our document has issues).
+  // Make sure that we have an instance (we don't if our document has issues) and that our previous run, if any, is not
+  // finishing (see isFinishing).
 
-  if (!instance) {
+  if (!instance || isFinishing.value) {
     return;
   }
 
@@ -363,6 +691,52 @@ const onRunPause = async (): Promise<void> => {
     return;
   }
 
+  // Stop our simulation if it is running (or paused) while we are not waiting on it, i.e. if it could not be stopped
+  // after a run error (see Note #4 of the handling of a run error below). Our UI then considers our simulation as idle,
+  // i.e. people want to start a new run, which we do once our simulation has been stopped. Otherwise, we would, for
+  // instance, pause our simulation, with nothing waiting on it (i.e. our UI would remain paused).
+  // Note: as for a run error, we consider our run as finishing while we wait for our simulation to be idle (see Note #3
+  //       of the handling of a run error below), and we let people know if it still cannot be stopped.
+
+  if (status !== locSedApi.ESedInstanceStatus.IDLE && !isWaitingOnRun) {
+    const runPauseButtonHadFocus = runPauseButtonRef.value?.$el === window.document.activeElement;
+    let simulationStopped = false;
+
+    isFinishing.value = true;
+    isWaitingOnRun = true;
+
+    try {
+      simulationStopped = await stopRunAndWait(instance);
+    } catch {
+      // Our instance cannot be relied upon, so there is nothing more that we can do, except let people know (see
+      // below).
+    } finally {
+      isWaitingOnRun = false;
+    }
+
+    if (isUnmounted) {
+      await releaseResources();
+
+      return;
+    }
+
+    isFinishing.value = false;
+
+    if (runPauseButtonHadFocus) {
+      void focusRunPauseButton();
+    }
+
+    if (!simulationStopped) {
+      markRunAsFailed();
+
+      addConsoleError('the simulation could not be stopped');
+
+      return;
+    }
+
+    status = locSedApi.ESedInstanceStatus.IDLE;
+  }
+
   switch (status) {
     case locSedApi.ESedInstanceStatus.RUNNING:
       // Pause the simulation.
@@ -381,33 +755,125 @@ const onRunPause = async (): Promise<void> => {
 
       break;
     default: {
-      // locSedApi.ESedInstanceStatus.IDLE:
-      // Reset our abort flag and our live data.
+      // locSedApi.ESedInstanceStatus.IDLE.
+
+      // Make sure that we are not still waiting on our previous run, if any.
+      // Note: our instance may be idle before waitWhileRunning() has noticed it (it polls our instance), in which case
+      //       starting a new run would have our previous run (which is still waiting) also wait on our new run, and
+      //       then report its outcome too.
+
+      if (isWaitingOnRun) {
+        return;
+      }
+
+      // Commit the value that is being edited in one of our simulation settings, if any, so that our simulation is run
+      // with it.
+      // Note #1: our simulation settings only commit their value when they lose the focus (or when Enter is pressed).
+      //          Our Run/Pause button takes care of this when it is pressed (see ToolbarButtonWidget.vue), but not when
+      //          our run is started using F9, in which case our simulation would otherwise be run with the previous
+      //          value, and the new value would get committed later on (e.g., while our simulation is running).
+      // Note #2: we only do this for our simulation settings (see PropertyEditor.vue), i.e. not for our other input
+      //          fields (e.g., the X and Y axis selects of our plot), since those commit their value as it is typed and
+      //          remain enabled while our simulation is running, so they would only lose the keyboard focus.
+      // Note #3: we give the keyboard focus back to our simulation setting once our run is over (see
+      //          focusSettingBlurredForRun()).
+
+      const activeElement = window.document.activeElement;
+
+      settingBlurredForRun = null;
+
+      if (
+        activeElement instanceof HTMLElement &&
+        activeElement.matches('.property-editor input') &&
+        rootRef.value?.contains(activeElement)
+      ) {
+        settingBlurredForRun = activeElement;
+
+        activeElement.blur();
+      }
+
+      // Reset our abort flag, our live data, the outcome of our last run, and whether our Stop button had the keyboard
+      // focus.
       // Note: our live data is normally reset at the end of a simulation run (see updatePlot()), but not if the run was
       //       aborted or failed, in which case we would otherwise end up plotting (some of) the data of that run.
 
       runAborted.value = false;
       liveData = null;
+      lastRun.value = null;
+      stopButtonHadFocus = false;
+
+      // Cancel the reset of our progress bar by our previous run, if any, so that it doesn't reset the progress bar of
+      // our new run, and reset it ourselves (in case our new run fails to start).
+
+      clearTimeout(progressResetTimer);
+
+      progressResetTimer = undefined;
+      progress.value = 0;
 
       // Start the simulation.
+      // Note: our simulation may fail to start (e.g., if its settings are not valid), in which case we consider our run
+      //       as having failed and we report why, i.e. the issues of our instance, if any, or the error thrown by
+      //       libOpenCOR, if any. Otherwise, the status of our previous run (which we have just reset) would disappear
+      //       without any explanation.
 
-      if (!instance?.startRun()) {
-        simulationStatus.value = instance?.status() ?? locSedApi.ESedInstanceStatus.IDLE;
+      try {
+        if (!instance.startRun()) {
+          const instanceIssues = instance.hasIssues() ? instance.issues() : [];
+
+          simulationStatus.value = locSedApi.ESedInstanceStatus.IDLE;
+
+          markRunAsFailed();
+
+          if (instanceIssues.length) {
+            addConsoleIssues(instanceIssues);
+          } else {
+            addConsoleError('the simulation could not be started');
+          }
+
+          void focusSettingBlurredForRun();
+
+          return;
+        }
+      } catch (error: unknown) {
+        simulationStatus.value = locSedApi.ESedInstanceStatus.IDLE;
+
+        markRunAsFailed();
+
+        addConsoleError(error);
+
+        void focusSettingBlurredForRun();
 
         return;
       }
 
-      simulationStatus.value = instance?.status() ?? locSedApi.ESedInstanceStatus.IDLE;
+      // Retrieve the status of our simulation.
+      // Note: this may fail (e.g., if libOpenCOR throws an exception), in which case we consider our simulation as
+      //       running since it has been started, and let waitWhileRunning() retrieve its status (and the error get
+      //       reported if its status still cannot be retrieved, see the handling of a run error below).
+
+      try {
+        simulationStatus.value = instance.status();
+      } catch {
+        simulationStatus.value = locSedApi.ESedInstanceStatus.RUNNING;
+      }
 
-      // Wait for the simulation to finish, handling pause/resume cycles asynchronously so that the UI remains responsive.
+      // Wait for the simulation to finish, handling pause/resume cycles asynchronously so that the UI remains
+      // responsive.
 
       const numberOfSteps = uniformTimeCourse?.numberOfSteps() ?? 0;
       let lastPlottingAreaUpdateTime = Date.now();
+      let runIsOver = false;
 
       const { promise: runPromise, cancel: runCancel } = vueCommon.waitWhileRunning(
         instance,
         (newProgress: number) => {
-          // Update the progress bar.
+          // Update the progress bar, unless our run is over, in which case we take care of it (see below), i.e. we
+          // ignore the (delayed) reset of the progress bar by waitWhileRunning(), which could otherwise reset the
+          // progress bar of our next run.
+
+          if (runIsOver) {
+            return;
+          }
 
           progress.value = newProgress;
 
@@ -432,10 +898,12 @@ const onRunPause = async (): Promise<void> => {
         runAborted
       );
 
-      // We store the cancel function in a variable so that we can call it on component unmount to avoid writing to
-      // stale references after the component is torn down.
+      // We keep the cancel function so that, on unmount, we can stop polling, i.e. stop waiting on our run and release
+      // our resources (see below).
+      // Note: the delayed reset of our progress bar by waitWhileRunning() is not cancelled on unmount since our cancel
+      //       function is forgotten as soon as our run is over, but it is ignored anyway (see runIsOver above).
 
-      progressResetCancel = runCancel;
+      cancelRunPolling = runCancel;
 
       isWaitingOnRun = true;
 
@@ -446,9 +914,10 @@ const onRunPause = async (): Promise<void> => {
       } catch (error: unknown) {
         runError = error;
       } finally {
+        runIsOver = true;
         isWaitingOnRun = false;
 
-        progressResetCancel = undefined;
+        cancelRunPolling = undefined;
       }
 
       // Release our resources if we got unmounted while the simulation was running (see onUnmounted() below).
@@ -467,16 +936,38 @@ const onRunPause = async (): Promise<void> => {
       //          RUNNING case above). If this fails too, then there is nothing more that we can do.
       // Note #2: the run is over either way, so we reset our progress bar and live data, but we keep our plot as is (as
       //          when a run is aborted) so that the user can see how far the simulation went.
+      // Note #3: we consider our run as finishing while we wait for our instance to be idle, so that our Run/Pause
+      //          button (and its F9 shortcut) cannot, in the meantime, start a new run, which we would otherwise end up
+      //          waiting for and then reporting as having failed, and so that our Stop button cannot be used to stop
+      //          our instance again.
+      // Note #4: our instance may never be idle (e.g., if it cannot be stopped), in which case our Run/Pause button
+      //          would remain disabled for good, so we only wait for so long. We then let people know that our
+      //          simulation could not be stopped since it may still be running (or be paused), in which case we try to
+      //          stop it again when people next try to start a new run (see the beginning of onRunPause()). We do the
+      //          same if stopping our simulation (or retrieving its status) fails since we cannot then know whether it
+      //          has been stopped.
+      // Note #5: our Stop button gets disabled (see Note #3) before our simulation status is set to idle, i.e. before
+      //          we would normally know whether it had the keyboard focus (see stopButtonHadFocus), hence we check it
+      //          here.
+
+      let runPauseButtonHadFocus = false;
 
       if (runError) {
+        runPauseButtonHadFocus = runPauseButtonRef.value?.$el === window.document.activeElement;
+        stopButtonHadFocus ||= stopButtonRef.value?.$el === window.document.activeElement;
+
+        isFinishing.value = true;
         isWaitingOnRun = true;
 
-        try {
-          instance.stopRun();
+        let simulationMayNotBeStopped = false;
 
-          await vueCommon.waitWhileRunning(instance).promise;
+        try {
+          simulationMayNotBeStopped = !(await stopRunAndWait(instance));
         } catch {
-          // Our instance cannot be relied upon anymore, so there is nothing more that we can do.
+          // Our instance cannot be relied upon anymore, so there is nothing more that we can do, except let people know
+          // (see Note #4).
+
+          simulationMayNotBeStopped = true;
         } finally {
           isWaitingOnRun = false;
         }
@@ -487,56 +978,148 @@ const onRunPause = async (): Promise<void> => {
           return;
         }
 
+        isFinishing.value = false;
         simulationStatus.value = locSedApi.ESedInstanceStatus.IDLE;
         progress.value = 0;
         liveData = null;
+        lastRun.value = { outcome: 'failed' };
 
         addConsoleError(runError);
 
+        if (simulationMayNotBeStopped) {
+          addConsoleError('the simulation could not be stopped');
+        }
+
+        if (runPauseButtonHadFocus || stopButtonHadFocus) {
+          void focusRunPauseButton();
+        }
+
+        void focusSettingBlurredForRun();
+
         return;
       }
 
-      // Update the console with any issues that occurred during the simulation, or display the simulation time if it
-      // completed successfully.
-
-      if (instance.hasIssues()) {
-        instance.issues().forEach((issue: locApi.IIssue) => {
-          const color =
-            issue.type === locApi.EIssueType.ERROR
-              ? colors.REVERTED_PALETTE.Red
-              : issue.type === locApi.EIssueType.WARNING
-                ? colors.REVERTED_PALETTE.Orange
-                : colors.REVERTED_PALETTE.Blue;
-          const issueType =
-            issue.type === locApi.EIssueType.ERROR
-              ? 'Error'
-              : issue.type === locApi.EIssueType.WARNING
-                ? 'Warning'
-                : 'Info';
-          const issueDescription = issue.description.replace('Task | ', '');
-
-          consoleContents.value += `<br />&nbsp;&nbsp;<span style="color: ${color};"><strong>${issueType}:</strong> ${issueDescription}</span>`;
-        });
-      } else {
-        const simulationTime = instance.waitForRun();
-
-        consoleContents.value += `<br />&nbsp;&nbsp;<strong>Simulation time:</strong> <span style="color: ${colors.REVERTED_PALETTE.Blue};">${common.formatTime(simulationTime)}</span>`;
+      // Let people see that our simulation has completed (i.e. that its progress is 100%) before we retrieve and plot
+      // its results, which may take a while (e.g., for a long simulation) and during which our UI cannot be updated.
+      // Note: we wait for our UI to be painted with a progress of 100%. We also need to be told if we get unmounted in
+      //       the meantime, in which case our resources have to be released by us (see onUnmounted() below).
+
+      if (!runAborted.value) {
+        runPauseButtonHadFocus = runPauseButtonRef.value?.$el === window.document.activeElement;
+        isFinishing.value = true;
+        progress.value = 100;
+        isWaitingOnRun = true;
+
+        await common.waitForNextPaint();
+
+        isWaitingOnRun = false;
+
+        if (isUnmounted) {
+          await releaseResources();
+
+          return;
+        }
+      }
+
+      // Retrieve and report the outcome of our simulation, and plot its results.
+      // Note: this may fail (e.g., if libOpenCOR throws an exception), in which case we report the error, and still
+      //       finish our run (see below), so that a new run can be started.
+
+      try {
+        // Update the console with any issues that occurred during the simulation, or display the simulation time if it
+        // completed successfully.
+        // Note: a simulation that was stopped may also have issues, in which case it is considered as having failed if
+        //       one of them is an error, and as having been stopped otherwise.
+
+        if (instance.hasIssues()) {
+          const instanceIssues = instance.issues();
+
+          lastRun.value = {
+            outcome: instanceIssues.some((issue: locApi.IIssue) => issue.type === locApi.EIssueType.ERROR)
+              ? 'failed'
+              : runAborted.value
+                ? 'stopped'
+                : 'issues'
+          };
+
+          addConsoleIssues(instanceIssues);
+        } else {
+          const simulationTime = instance.waitForRun();
+
+          lastRun.value = runAborted.value ? { outcome: 'stopped' } : { outcome: 'completed', time: simulationTime };
+
+          consoleContents.value += `<br />&nbsp;&nbsp;<strong>Simulation time:</strong> <span style="color: ${colors.REVERTED_PALETTE.Blue};">${common.formatTime(simulationTime)}</span>`;
+        }
 
         if (runAborted.value) {
           // Reset the progress bar after a short delay (mimicking the normal end of a simulation).
 
-          abortProgressTimer = setTimeout(() => {
-            abortProgressTimer = undefined;
+          progressResetTimer = setTimeout(() => {
+            progressResetTimer = undefined;
 
             progress.value = 0;
           }, MEDIUM_DELAY);
+        } else {
+          updatePlot();
+        }
+      } catch (error: unknown) {
+        // Reset our live data and, if our run was aborted (i.e. it is not finishing), our progress bar (otherwise, it
+        // gets reset below).
+
+        liveData = null;
+
+        if (!isFinishing.value) {
+          progress.value = 0;
         }
+
+        lastRun.value = { outcome: 'failed' };
+
+        addConsoleError(error);
       }
 
-      if (!runAborted.value) {
-        updatePlot();
+      // Our run is over and its results, if any, have been plotted, so reset our progress bar after a short delay, so
+      // that people can see that our simulation has completed.
+      // Note: our plot gets rendered after our UI has been updated, which may also take a while, so we wait for it to
+      //       be rendered before starting our delay (otherwise our delay may be over before our UI gets rendered
+      //       again).
+
+      if (isFinishing.value) {
+        await common.waitForNextPaint();
+
+        if (isUnmounted) {
+          return;
+        }
+
+        isFinishing.value = false;
+
+        // Give the keyboard focus (back) to our Run/Pause button if it or our Stop button had it before it got disabled
+        // (and therefore lost it).
+
+        if (runPauseButtonHadFocus || stopButtonHadFocus) {
+          await focusRunPauseButton();
+
+          if (isUnmounted) {
+            return;
+          }
+        }
+
+        progressResetTimer = setTimeout(() => {
+          progressResetTimer = undefined;
+
+          progress.value = 0;
+        }, MEDIUM_DELAY);
+      } else if (stopButtonHadFocus) {
+        // Our run was stopped, so give the keyboard focus to our Run/Pause button if our Stop button had it before it
+        // got disabled (and therefore lost it).
+
+        void focusRunPauseButton();
       }
 
+      // Give the keyboard focus back to the simulation setting that was being edited when our run was started using F9,
+      // if any (and if the keyboard focus hasn't been given to our Run/Pause button above).
+
+      void focusSettingBlurredForRun();
+
       scrollConsoleToBottom();
     }
   }
@@ -547,8 +1130,9 @@ const onStop = (): void => {
 
   instance?.stopRun();
 
-  // Note: the simulation status will be updated by the next poll cycle of waitWhileRunning(), so we don't set it here
-  //       to avoid a race window where the user could re-trigger a run before the C++ thread has fully stopped.
+  // Note: the simulation status will be updated by the next poll cycle of waitWhileRunning(), i.e. once our simulation
+  //       is actually idle. Setting it here would have our Run/Pause button say "Run" while pressing it would still
+  //       pause our (not yet stopped) simulation.
 };
 
 // Initialise the plot on mount.
@@ -557,18 +1141,20 @@ vue.onMounted(() => {
   updatePlot();
 });
 
-// Cancel any pending progress reset timers to avoid writing to stale refs after the component is torn down, and release
-// our resources.
+// Stop polling our simulation run, if any, cancel our pending timers (progress reset and run status), and release our
+// resources (unless a simulation run is still waiting on our instance, see below).
 
 vue.onUnmounted(() => {
   isUnmounted = true;
 
-  progressResetCancel?.();
+  cancelRunPolling?.();
 
-  clearTimeout(abortProgressTimer);
+  clearTimeout(progressResetTimer);
+  clearTimeout(runStatusTimer);
+  clearTimeout(runStatusAnnouncementTimer);
 
-  // Release our resources, unless a simulation run is still waiting on our instance, in which case they will be released
-  // by that simulation run once it is done with our instance.
+  // Release our resources, unless a simulation run is still waiting on our instance, in which case they will be
+  // released by that simulation run once it is done with our instance.
 
   if (!isWaitingOnRun) {
     releaseResources();
@@ -608,3 +1194,153 @@ useOpenCORKeyStroke((event: KeyboardEvent) => {
   }
 });
 </script>
+
+<style scoped>
+/**
+ * Console, which always shows a few lines (e.g., when our view is not very tall, like on a phone in landscape mode),
+ * and which wraps long lines (e.g., the URL of our file), so that it never needs to be scrolled horizontally.
+ */
+
+.console-panel {
+  min-height: 6rem;
+}
+
+.console {
+  overflow-wrap: anywhere;
+}
+
+/**
+ * Side panel, i.e. our simulation settings and the parameters to plot.
+ * Note: an input field has an intrinsic width (of about 20 characters), which would otherwise prevent our side panel
+ *       from being narrower than that, so we let our number fields shrink to the width of our side panel.
+ */
+
+.side-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem;
+}
+
+.side-panel :deep(.p-inputnumber-input) {
+  flex: 1 1 auto;
+  width: 0;
+  min-width: 0;
+}
+
+.side-panel-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.side-panel-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 0.375rem;
+}
+
+/**
+ * Status of our simulation, which is shown next to our run/pause and stop buttons.
+ */
+
+.run-status {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-left: 0.5rem;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.run-status .pi {
+  font-size: 0.8125rem;
+}
+
+.run-status-running .pi,
+.run-status-completed .pi {
+  color: var(--p-primary-color);
+}
+
+.run-status-paused .pi,
+.run-status-issues .pi {
+  color: var(--opencor-warn-color);
+}
+
+.run-status-stopped .pi,
+.run-status-failed .pi {
+  color: var(--opencor-error-color);
+}
+
+/**
+ * Progress of our simulation, which is shown as a thin line over the bottom border of our toolbar.
+ */
+
+.run-progress {
+  position: relative;
+  z-index: 11;
+  flex-shrink: 0;
+  height: 2px !important;
+  margin-top: -2px;
+  border-radius: 0;
+  background: transparent;
+  visibility: hidden;
+}
+
+.run-progress-visible {
+  visibility: visible;
+}
+
+/**
+ * Console.
+ */
+
+.console-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: 0.25rem 0.375rem 0.125rem 0.75rem;
+}
+
+/**
+ * Splitters, which gutters are shown as thin lines that get highlighted when hovered or dragged.
+ */
+
+.standard-view :deep(.p-splitter-gutter) {
+  position: relative;
+  background-color: var(--p-content-border-color);
+  transition: background-color 0.15s ease;
+}
+
+.standard-view :deep(.p-splitter-horizontal > .p-splitter-gutter) {
+  width: 1px !important;
+}
+
+.standard-view :deep(.p-splitter-vertical > .p-splitter-gutter) {
+  height: 1px !important;
+}
+
+.standard-view :deep(.p-splitter-gutter-handle) {
+  opacity: 0;
+}
+
+/**
+ * Note: a gutter is only 1px wide/high, so we make it easier to grab by extending its hit area.
+ */
+
+.standard-view :deep(.p-splitter-gutter)::after {
+  position: absolute;
+  inset: -3px;
+  z-index: 1;
+  content: "";
+}
+
+.standard-view :deep(.p-splitter-gutter:hover),
+.standard-view :deep(.p-splitter-gutter[data-p-gutter-resizing="true"]) {
+  background-color: var(--p-primary-color);
+}
+</style>
diff --git a/src/renderer/src/components/views/UnsupportedFileTypeView.vue b/src/renderer/src/components/views/UnsupportedFileTypeView.vue
index 5541702de..788392f8b 100644
--- a/src/renderer/src/components/views/UnsupportedFileTypeView.vue
+++ b/src/renderer/src/components/views/UnsupportedFileTypeView.vue
@@ -1,22 +1,117 @@
 <template>
-  <div class="h-full flex flex-col items-center justify-center gap-4 p-8">
-    <div class="opacity-50">
-      <i class="pi pi-file text-4xl!" :style="{ color: viewCategory.color }"></i>
-    </div>
-    <div class="text-center">
-      <h2 class="text-xl font-semibold mb-2">Unsupported File Type</h2>
-      <p class="text-sm">
-        The <span :style="{ color: viewCategory.color }">{{ viewName }}</span> view does not support this type of file.
-      </p>
-    </div>
+  <div class="unsupported-view">
+    <span class="unsupported-view-icon" :style="{ '--view-color': viewCategory.color }">
+      <i class="pi pi-file" />
+    </span>
+    <p class="unsupported-view-title">Unsupported file type</p>
+    <p class="unsupported-view-text">
+      The <span :style="{ color: viewCategory.color }">{{ viewName }}</span> view does not support this type of file.
+    </p>
+    <template v-if="supportingViews.length">
+      <p class="unsupported-view-text">It can be opened in:</p>
+      <div class="unsupported-view-actions">
+        <Button v-for="view in supportingViews" :key="view.id"
+          :label="view.label"
+          severity="secondary"
+          size="small"
+          @click="emit('selectView', view.id)"
+        >
+          <template #icon>
+            <i v-if="typeof view.icon === 'string'" :class="view.icon" class="unsupported-view-action-icon" :style="{ color: view.category.color }" />
+            <span v-else class="unsupported-view-action-icon unsupported-view-action-image"
+              :style="{ color: view.category.color, maskImage: `url(&quot;${view.icon.url}&quot;)` }"
+            />
+          </template>
+        </Button>
+      </div>
+    </template>
+    <p v-else class="unsupported-view-text">No view supports this type of file.</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ViewCategory } from '../../common/viewRegistry';
+import type { IViewDescriptor, ViewCategory } from '../../common/viewRegistry';
+
+// A view that is shown instead of the view that was chosen for a file when that view doesn't support the file, and
+// which lets the user switch to a view that does support it, if any.
+// Note: like in our view switcher (see ViewSwitcherComponent.vue), a view icon that is an image is used as a mask, and
+//       Vite inlines an SVG file as a data URL which may contain single quotes, hence we use double quotes in url().
 
 defineProps<{
   viewName: string;
   viewCategory: ViewCategory;
+  supportingViews: IViewDescriptor[];
+}>();
+
+const emit = defineEmits<{
+  selectView: [viewId: string];
 }>();
 </script>
+
+<style scoped>
+/**
+ * Note: we are laid out like the empty state of our interactive simulation experiment view (see
+ *       SimulationExperimentInteractiveView.vue), except that our icon is in a circle that is tinted with the colour of
+ *       the category of our view.
+ */
+
+.unsupported-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: 1rem;
+  text-align: center;
+}
+
+.unsupported-view-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: 0.25rem;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, var(--view-color) 12%, transparent);
+  color: var(--view-color);
+}
+
+.unsupported-view-icon .pi {
+  font-size: 1.25rem;
+}
+
+.unsupported-view-title {
+  margin: 0;
+  color: var(--p-text-color);
+  font-weight: 600;
+}
+
+.unsupported-view-text {
+  margin: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+
+.unsupported-view-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.unsupported-view-action-icon {
+  font-size: 0.875rem;
+}
+
+.unsupported-view-action-image {
+  width: 0.875rem;
+  height: 0.875rem;
+  background-color: currentColor;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+</style>
diff --git a/src/renderer/src/components/views/toolbar-based-view.css b/src/renderer/src/components/views/toolbar-based-view.css
index df71c113e..61d63867c 100644
--- a/src/renderer/src/components/views/toolbar-based-view.css
+++ b/src/renderer/src/components/views/toolbar-based-view.css
@@ -4,22 +4,19 @@
  *          do not affect the rest of the application.
  * Note #2: our CellDL Editor view hosts CellDL Editor (see CellDLEditorView.vue), which has its own toolbars and
  *          buttons, so our rules only target our view's toolbar (i.e. the one that is a direct child of our root
- *          element) and its buttons.
+ *          element). Our toolbar buttons are styled by ToolbarButtonWidget.vue.
+ * Note #3: our toolbar is stacked above the rest of the view so that the tooltip of a toolbar button can be shown on
+ *          top of the view's contents, including the layers of a graph panel (e.g., its legend), which have a z-index
+ *          of up to 4 (see GraphPanelWidget.vue).
  */
 
 .toolbar-based-view {
   > .p-toolbar {
+    position: relative;
+    z-index: 10;
+    padding: 0.125rem 0.25rem;
     border: none;
     border-radius: 0;
     border-bottom: 1px solid var(--p-content-border-color);
   }
-
-  .toolbar-button .p-button-icon {
-    font-size: 1.5rem;
-  }
-
-  .toolbar-button:not(:disabled):hover {
-    background-color: var(--p-surface-hover) !important;
-    transform: scale(1.15);
-  }
 }
diff --git a/src/renderer/src/components/widgets/ContextMenuWidget.vue b/src/renderer/src/components/widgets/ContextMenuWidget.vue
new file mode 100644
index 000000000..27972b740
--- /dev/null
+++ b/src/renderer/src/components/widgets/ContextMenuWidget.vue
@@ -0,0 +1,71 @@
+<template>
+  <ContextMenu ref="contextMenuRef" :model="model" :appendTo="appendTo" :pt="CONTEXT_MENU_PT">
+    <template #item="{ item, props: itemProps, hasSubmenu }">
+      <a v-bind="itemProps.action">
+        <i :class="item.icon" class="context-menu-item-icon" />
+        <span>{{ item.label }}</span>
+        <i v-if="hasSubmenu" class="context-menu-item-chevron pi pi-angle-right" />
+      </a>
+    </template>
+  </ContextMenu>
+</template>
+
+<script setup lang="ts">
+import ContextMenu from 'primevue/contextmenu';
+import type { MenuItem } from 'primevue/menuitem';
+import * as vue from 'vue';
+
+// A context menu, which looks like the menus of our main menu (see MainMenu.vue) and, like them, is shown without any
+// animation (see .opencor-context-menu and the anchored overlays in app.css).
+// Note: only one context menu should be shown at any given time, but PrimeVue only hides a context menu when the user
+//       clicks outside of it, so we let our other context menus know when we are about to be shown, and we hide
+//       ourselves when another context menu is about to be shown.
+
+defineProps<{
+  model: MenuItem[];
+  appendTo?: HTMLElement | string;
+}>();
+
+const CONTEXT_MENU_PT = {
+  root: {
+    class: 'opencor-context-menu'
+  }
+};
+
+const CONTEXT_MENU_SHOW_EVENT = 'opencor-context-menu-show';
+
+const contextMenuId = Symbol('ContextMenuWidget');
+const contextMenuRef = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
+
+const show = (event: MouseEvent): void => {
+  window.dispatchEvent(
+    new CustomEvent(CONTEXT_MENU_SHOW_EVENT, {
+      detail: {
+        sourceId: contextMenuId
+      }
+    })
+  );
+
+  contextMenuRef.value?.show(event);
+};
+
+const hide = (): void => {
+  contextMenuRef.value?.hide();
+};
+
+const onContextMenuShow = (event: Event): void => {
+  if ((event as CustomEvent<{ sourceId?: symbol }>).detail?.sourceId !== contextMenuId) {
+    hide();
+  }
+};
+
+vue.onMounted(() => {
+  window.addEventListener(CONTEXT_MENU_SHOW_EVENT, onContextMenuShow);
+});
+
+vue.onUnmounted(() => {
+  window.removeEventListener(CONTEXT_MENU_SHOW_EVENT, onContextMenuShow);
+});
+
+defineExpose({ hide, show });
+</script>
diff --git a/src/renderer/src/components/widgets/GraphPanelWidget.vue b/src/renderer/src/components/widgets/GraphPanelWidget.vue
index e7f8ef89c..5f99aa9ae 100644
--- a/src/renderer/src/components/widgets/GraphPanelWidget.vue
+++ b/src/renderer/src/components/widgets/GraphPanelWidget.vue
@@ -1,20 +1,32 @@
 <template>
   <div ref="rootRef" class="flex flex-row h-full">
     <div v-if="showMarker" class="w-0.75 bg-primary" />
-    <div ref="mainDivRef" class="grow h-full min-w-0 relative overflow-hidden"
+    <div ref="mainDivRef" class="plot-panel grow h-full min-w-0 relative overflow-hidden"
       :style="{
         backgroundColor: themeColors.background,
         color: themeColors.text
       }"
       @contextmenu="onContextMenu"
     >
-      <div ref="plotDivRef" class="absolute inset-0" />
+      <!--
+      Note: our plot can be focused, so that it can be used with the keyboard (see onPlotKeyDown()), in which case it is
+            described to assistive technologies as an image of our plot.
+      -->
+      <div ref="plotDivRef" class="plot-area absolute inset-0"
+        tabindex="0"
+        role="img"
+        aria-roledescription="plot"
+        :aria-label="plotLabel"
+        :aria-describedby="plotDescriptionId"
+        @keydown="onPlotKeyDown"
+      />
+      <span :id="plotDescriptionId" class="sr-only">Press + or − to zoom in or out, 0 to reset the zoom, the arrow keys to pan, and Shift+F10 for more options (e.g., to export the plotted data to CSV).</span>
       <svg v-if="zoomBox && plotRect" class="absolute z-2 pointer-events-none"
         :style="{ left: `${plotRect.left}px`, top: `${plotRect.top}px` }"
         :width="plotRect.width"
         :height="plotRect.height"
       >
-        <rect class="fade-in"
+        <rect
           :x="zoomBox.x"
           :y="zoomBox.y"
           :width="zoomBox.width"
@@ -24,7 +36,7 @@
         />
       </svg>
       <template v-if="plotRect">
-        <div v-for="dragger in draggers" :key="dragger.type" class="absolute z-1"
+        <div v-for="dragger in draggers" :key="dragger.type" class="dragger absolute z-1"
           :style="{
             left: `${dragger.left}px`,
             top: `${dragger.top}px`,
@@ -32,7 +44,8 @@
             height: `${dragger.height}px`,
             cursor: `${dragger.type}-resize`
           }"
-          @mousedown="onDragStart($event, dragger.type)"
+          @pointerdown="onDragStart($event, dragger.type)"
+          @mousedown="onPressMouseDown"
           @dblclick="onDoubleClick(dragger.type)"
           @wheel="onWheel($event, dragger.type)"
         />
@@ -93,20 +106,28 @@
           fontSize: `${LEGEND_FONT_SIZE}px`
         }"
       >
-        <div v-for="legendItem in legendItems" :key="legendItem.index" class="legend-item" :class="{ 'legend-item-hidden': !legendItem.visible }"
+        <!--
+        Note: our legend items are toggle buttons, which are pressed when their trace is shown, so that they can be used
+              with the keyboard and their state is known to assistive technologies.
+        -->
+        <button v-for="legendItem in legendItems" :key="legendItem.index" class="legend-item" :class="{ 'legend-item-hidden': !legendItem.visible }"
+          type="button"
+          :aria-pressed="legendItem.visible"
           @click="onLegendClick($event, legendItem.index)"
           @dblclick="onLegendDoubleClick(legendItem.index)"
           @pointerenter="onLegendPointerEnter($event, legendItem.index)"
           @pointerleave="highlightTrace(null)"
+          @focus="onLegendFocus($event, legendItem.index)"
+          @blur="highlightTrace(null)"
         >
           <span class="legend-swatch" :style="{ backgroundColor: legendItem.visible ? legendItem.color : themeColors.hiddenTrace }">
             <span v-if="legendItem.markers" class="legend-marker" />
           </span>
           <span v-html="legendItem.name" />
-        </div>
+        </button>
       </div>
     </div>
-    <ContextMenu ref="contextMenuRef" :model="contextMenuItems" :appendTo="appendTarget" />
+    <ContextMenuWidget ref="contextMenuRef" :model="contextMenuItems" :appendTo="appendTarget" @hide="onContextMenuHide" />
     <Teleport v-if="hover" :to="appendTarget ?? 'body'">
       <div ref="hoverTooltipRef" class="hover-tooltip">
         <div class="hover-tooltip-header">
@@ -130,7 +151,6 @@
 <script setup lang="ts">
 import * as vueusecore from '@vueuse/core';
 
-import ContextMenu from 'primevue/contextmenu';
 import type { MenuItem } from 'primevue/menuitem';
 import type uPlot from 'uplot';
 import * as vue from 'vue';
@@ -143,8 +163,7 @@ import * as math from '../../common/math';
 import * as vueCommon from '../../common/vueCommon';
 
 import { useOpenCORMessage } from '../OpenCORMessage';
-
-const CONTEXT_MENU_EVENT: string = 'graph-panel-context-menu-open';
+import ContextMenuWidget from './ContextMenuWidget.vue';
 
 export interface IGraphPanelPlotTrace {
   name: string;
@@ -200,7 +219,7 @@ const LEGEND_RIGHT_MARGIN = 8; // Margin between our legend (or last X tick labe
 const DEFAULT_LEGEND_RANK = 1000; // Like Plotly's default legend rank.
 const X_TICK_LABEL_BASELINE = TICK_FONT_SIZE + 1; // Like Plotly, the distance to the baseline of our X tick labels.
 const Y_TICK_LABEL_GAP = 1; // Like Plotly, the gap between our plotting area and our Y tick labels.
-const Y_TICK_LABEL_BASELINE = 0.35 * TICK_FONT_SIZE; // Like Plotly, the distance between a tick and its label's baseline.
+const Y_TICK_LABEL_BASELINE = 0.35 * TICK_FONT_SIZE; // Like Plotly, the distance from a tick to its label's baseline.
 const TICK_LABEL_HALF_HEIGHT = 6; // Used to hide a Y tick label that would (partly) be above our container.
 const X_AXIS_SIZE_WITH_TITLE = 18; // Size of our X axis (without its title) if it has a title.
 const X_AXIS_SIZE_WITHOUT_TITLE = 20; // Size of our X axis if it doesn't have a title.
@@ -277,7 +296,6 @@ defineExpose({
   resize
 });
 
-const instanceId = Symbol('GraphPanelWidget');
 const rootRef = vue.shallowRef<HTMLElement | null>(null);
 const mainDivRef = vue.shallowRef<HTMLElement | null>(null);
 const plotDivRef = vue.shallowRef<HTMLElement | null>(null);
@@ -287,7 +305,7 @@ const yAxisTitleRef = vue.shallowRef<HTMLElement | null>(null);
 const rangeEditorRef = vue.shallowRef<HTMLElement | null>(null);
 const hoverTooltipRef = vue.shallowRef<HTMLElement | null>(null);
 const theme = vueCommon.useTheme();
-const contextMenuRef = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
+const contextMenuRef = vue.ref<InstanceType<typeof ContextMenuWidget> | null>(null);
 const appendTarget = vueCommon.useAppendTarget(rootRef);
 const opencorMessage = useOpenCORMessage();
 let plot: uPlot | undefined;
@@ -413,6 +431,15 @@ const onLegendPointerEnter = (event: PointerEvent, index: number): void => {
   }
 };
 
+const onLegendFocus = (event: FocusEvent, index: number): void => {
+  // Highlight the trace of the given legend item, but only if it is focused using the keyboard (as if it was hovered),
+  // i.e. not if it is clicked (in which case it is already hovered, or touched, see onLegendPointerEnter()).
+
+  if (event.target instanceof Element && event.target.matches(':focus-visible')) {
+    highlightTrace(index);
+  }
+};
+
 vue.watch(
   () => props.data.traces,
   (traces: IGraphPanelPlotTrace[], oldTraces: IGraphPanelPlotTrace[] | undefined) => {
@@ -548,8 +575,8 @@ const setTraceVisibilities = (visibilities: boolean[]): void => {
 
   traceVisibilities.value = visibilities;
 
-  // Highlight the trace which legend item is hovered, if any, if it is now visible, or stop highlighting it if it is now
-  // hidden (see highlightTrace()).
+  // Highlight the trace which legend item is hovered, if any, if it is now visible, or stop highlighting it if it is
+  // now hidden (see highlightTrace()).
 
   highlightTrace(hoveredTrace);
 
@@ -561,8 +588,8 @@ const setTraceVisibilities = (visibilities: boolean[]): void => {
     return;
   }
 
-  // Determine the traces which visibility has changed in our plot, if any, and leave if there are none (so that we don't
-  // animate our axes for nothing).
+  // Determine the traces which visibility has changed in our plot, if any, and leave if there are none (so that we
+  // don't animate our axes for nothing).
 
   const seriesIndices: number[] = [];
 
@@ -700,23 +727,23 @@ const contextMenuItems = vue.computed<MenuItem[]>(() => [
     label: 'Export Plot',
     items: [
       {
-        icon: 'pi pi-file',
-        label: 'Export to JPEG',
+        icon: 'pi pi-image',
+        label: 'JPEG',
         command: () => exportToImage('jpeg')
       },
       {
-        icon: 'pi pi-file',
-        label: 'Export to PNG',
+        icon: 'pi pi-image',
+        label: 'PNG',
         command: () => exportToImage('png')
       },
       {
-        icon: 'pi pi-file',
-        label: 'Export to SVG',
+        icon: 'pi pi-image',
+        label: 'SVG',
         command: () => exportToImage('svg')
       },
       {
-        icon: 'pi pi-file',
-        label: 'Export to WebP',
+        icon: 'pi pi-image',
+        label: 'WebP',
         command: () => exportToImage('webp')
       }
     ]
@@ -731,7 +758,19 @@ const contextMenuItems = vue.computed<MenuItem[]>(() => [
   }
 ]);
 
+let contextMenuShownUsingKeyboard = false;
+
 const onContextMenu = (event: MouseEvent): void => {
+  // Leave a context menu that is requested from our range editor to the browser (e.g., to copy/paste some text), so
+  // that our range editor doesn't get closed by our context menu taking the keyboard focus away from it.
+  // Note: this also happens when our range editor gets opened using a tap, in which case it is opened under the finger,
+  //       with its text selected, so the tap is then considered as being on selected text, which gets a mobile browser
+  //       to show its text selection menu (and therefore to request a context menu).
+
+  if (event.target instanceof Node && rangeEditorRef.value?.contains(event.target)) {
+    return;
+  }
+
   // Prevent the default context menu from being shown.
 
   event.preventDefault();
@@ -740,6 +779,8 @@ const onContextMenu = (event: MouseEvent): void => {
 
   hover.value = null;
 
+  contextMenuShownUsingKeyboard = false;
+
   // Keep track of where our context menu was requested, so that we can zoom in/out around that position (see zoomIn()
   // and zoomOut()).
   // Note: we only consider the position along an axis if it is within our plotting area along that axis (e.g., not if
@@ -763,21 +804,59 @@ const onContextMenu = (event: MouseEvent): void => {
     }
   }
 
-  // Dispatch a custom event to notify other instances of GraphPanelWidget that our context menu is being shown.
-  // Note: this allows those other instances to hide their context menus if they are open, ensuring that only one
-  //       context menu is open at any given time.
+  // Show our context menu.
 
-  window.dispatchEvent(
-    new CustomEvent(CONTEXT_MENU_EVENT, {
-      detail: {
-        sourceId: instanceId
-      }
+  contextMenuRef.value?.show(event);
+};
+
+const showContextMenuUsingKeyboard = (): void => {
+  // Make sure that our plot has been laid out.
+
+  const rect = plotRect.value;
+  const mainDivRect = mainDivRef.value?.getBoundingClientRect();
+
+  if (!rect || !mainDivRect) {
+    return;
+  }
+
+  // Show our context menu at the centre of our plotting area, which is also where we zoom in/out (see zoomIn() and
+  // zoomOut()), and keep track of the fact that it was shown using the keyboard (see onContextMenuHide()).
+  // Note: our context menu gets the keyboard focus when it is shown, so that it can be used with the keyboard straight
+  //       away.
+
+  hover.value = null;
+  contextMenuCenterFractions = {};
+  contextMenuShownUsingKeyboard = true;
+
+  contextMenuRef.value?.show(
+    new MouseEvent('contextmenu', {
+      clientX: mainDivRect.left + rect.left + 0.5 * rect.width,
+      clientY: mainDivRect.top + rect.top + 0.5 * rect.height
     })
   );
+};
 
-  // Show our context menu.
+const onContextMenuHide = (): void => {
+  // Give the keyboard focus back to our plot if our context menu was shown using the keyboard, unless the keyboard
+  // focus has gone somewhere else in the meantime (i.e. somewhere else than <body> or our context menu, which may keep
+  // the keyboard focus while it is being hidden).
 
-  contextMenuRef.value?.show(event);
+  if (!contextMenuShownUsingKeyboard) {
+    return;
+  }
+
+  contextMenuShownUsingKeyboard = false;
+
+  void vue.nextTick().then(() => {
+    const activeElement = document.activeElement;
+
+    if (
+      !isUnmounted &&
+      (!activeElement || activeElement === document.body || activeElement.closest('.opencor-context-menu'))
+    ) {
+      plotDivRef.value?.focus();
+    }
+  });
 };
 
 // Copy and export, like Plotly, i.e. an image of our plot and of our legend (but not of what we show when hovering or
@@ -827,7 +906,8 @@ const svgPath = (): ISvgPath => {
       data.push(`L${svgNumber(x)} ${svgNumber(y)}`);
     },
     arc: (x: number, y: number, radius: number) => {
-      // Note: we only ever draw full circles from their rightmost point (see markerPath()), so we draw two half circles.
+      // Note: we only ever draw full circles from their rightmost point (see markerPath()), so we draw two half
+      //       circles.
 
       const r = svgNumber(radius);
 
@@ -845,8 +925,8 @@ const svgPathElement = (path: ISvgPath, attributes: string): string => {
 };
 
 const svgHtmlText = (element: HTMLElement | null, origin: DOMRect, vertical: boolean): string => {
-  // Return the text of the given (rendered) element as SVG text elements (one per text node), positioned relative to the
-  // given origin.
+  // Return the text of the given (rendered) element as SVG text elements (one per text node), positioned relative to
+  // the given origin.
   // Note: the client rectangle of a text node is the content area of its font, i.e. its alphabetic baseline is the
   //       font's ascent below its top. However, if our text is vertical (i.e. our Y axis title, which reads from bottom
   //       to top), then its baseline is the font's ascent to the right of its left.
@@ -945,8 +1025,8 @@ const svgLegend = (origin: DOMRect, scale: number): string => {
     '<g clip-path="url(#legend)">'
   ];
 
-  // Like the browser, we snap the swatch and marker of our legend items to whole (scaled) pixels, so that they are crisp
-  // and where the browser renders them.
+  // Like the browser, we snap the swatch and marker of our legend items to whole (scaled) pixels, so that they are
+  // crisp and where the browser renders them.
 
   const snap = (value: number): number => Math.round(scale * value) / scale;
 
@@ -1234,15 +1314,12 @@ const exportToCsv = async (): Promise<void> => {
 
   try {
     // Allow the UI to update before actually starting the export to CSV.
-    // Note: we do this by waiting for two animation frames. The first wait lands just before the next paint while the
-    //       second wait lands just after the next paint.
 
-    await common.waitForNextAnimationFrame();
-    await common.waitForNextAnimationFrame();
+    await common.waitForNextPaint();
 
     // Perform the export itself.
-    // Note: to efficiently export to CSV, we build an array of CSV lines and only join them together at the end. This is
-    //       much more efficient than concatenating strings together repeatedly.
+    // Note: to efficiently export to CSV, we build an array of CSV lines and only join them together at the end. This
+    //       is much more efficient than concatenating strings together repeatedly.
 
     const csvLines: string[] = [];
 
@@ -1858,22 +1935,36 @@ const resetZoom = (axisKeys: AxisKey[] = ['x', 'y']): void => {
   animateScales(ranges, ZOOM_ANIMATION_DURATION);
 };
 
-// Mouse interaction, like with Plotly:
+// Pointer interaction (i.e. using a mouse, a pen, or a finger), like with Plotly:
 //  - our plotting area ('nsew'): drag to zoom (along both axes or, for a mostly horizontal or vertical drag, along one
-//    of them), use the mouse wheel to zoom around the mouse pointer, and double-click to reset the zoom;
+//    of them), use the mouse wheel to zoom around the mouse pointer, and double-click (or double-tap) to reset the
+//    zoom;
 //  - the middle (80%) of our axes ('ew' and 'ns'): drag to pan along that axis;
 //  - the ends (10%) of our axes ('w', 'e', 'n', and 's') and the bottom corners of our plotting area ('sw' and 'se'):
-//    drag to move the corresponding end(s) of our axes, and click one end of an axis to edit its value (see
+//    drag to move the corresponding end(s) of our axes, and click (or tap) one end of an axis to edit its value (see
 //    openRangeEditor()); and
-//  - our axes: use the mouse wheel to zoom along that axis, while double-clicking the middle of an axis (or a corner)
-//    resets the zoom along the corresponding axes.
+//  - our axes: use the mouse wheel to zoom along that axis, while double-clicking (or double-tapping) the middle of an
+//    axis (or a corner) resets the zoom along the corresponding axes.
+// Unlike with Plotly, a drag that is done using a finger can also become a pinch, i.e. a second finger can be used to
+// zoom (by moving both fingers closer to or further from each other) and pan (by moving both fingers), along both axes
+// or, if the drag started on an axis, along that axis only (see startPinch()).
 // Note #1: unlike Plotly, we don't have top corners (i.e. 'nw' and 'ne') since they would be above our plotting area,
 //          i.e. outside of our container since we don't have a top margin (and having one, just for them, would waste
 //          some valuable vertical space, especially when we have several plots stacked on top of each other). So, they
 //          wouldn't be reachable (as is the case with Plotly when it doesn't have a top margin either).
-// Note #2: a drag can be cancelled by pressing the Escape key or another mouse button (e.g., the right one), or by our
-//          window losing the focus, in which case our ranges are restored (if they were changed while dragging). A zoom
-//          can also be cancelled by dragging back to where it started (like with Plotly).
+// Note #2: a drag (or a pinch) can be cancelled by pressing the Escape key or another mouse button (e.g., the right
+//          one), by the browser taking over its pointer, or by our window losing the focus, in which case our ranges
+//          are restored (if they were changed while dragging or pinching). A zoom can also be cancelled by dragging
+//          back to where it started (like with Plotly).
+// Note #3: we handle our drags using pointer events (so that they also work with a pen or a finger), but we don't
+//          prevent the browser from emulating mouse events (i.e. "compatibility" mouse events), so that a tap still
+//          gets uPlot to move its cursor (and therefore shows our hover tooltip, see updateHover()), and a double-tap
+//          still gets turned into a double-click. However, we prevent the default behaviour of a press of the main
+//          mouse button (see onPressMouseDown()), so that it doesn't move the keyboard focus or start selecting some
+//          text, and we use it to know how many times our mouse button was clicked (see onDragMouseDown()) since a
+//          pointer event doesn't tell us.
+// Note #4: a finger (or a pen) doesn't get to scroll or zoom the page when it is used on our plotting area or our axes
+//          since they don't allow the browser to handle touch gestures (see touch-action below).
 
 type DragType = 'nsew' | 'ew' | 'w' | 'e' | 'ns' | 'n' | 's' | 'sw' | 'se';
 
@@ -1945,10 +2036,29 @@ interface IBox {
   bottom: number;
 }
 
+interface IPinchPointer {
+  startX: number;
+  startY: number;
+  x: number;
+  y: number;
+}
+
+interface IPinch {
+  pointers: Map<number, IPinchPointer>;
+  axisKeys: AxisKey[];
+  xRange: Range;
+  yRange: Range;
+}
+
 interface IDrag {
   type: DragType;
+  pointerId: number;
+  pointerType: string;
+  clickCount: number | undefined;
   startX: number;
   startY: number;
+  x: number;
+  y: number;
   dx: number;
   dy: number;
   xRange: Range;
@@ -1956,6 +2066,7 @@ interface IDrag {
   zoomMode: ZoomMode;
   zoomRanges: Partial<Record<AxisKey, Range>>;
   box: IBox;
+  pinch: IPinch | undefined;
 }
 
 interface IWheelZoom {
@@ -1982,7 +2093,7 @@ const plotPosition = (
   x: number;
   y: number;
 } => {
-  // Return the position of the given mouse event relative to our plotting area.
+  // Return the position of the given mouse (or pointer) event relative to our plotting area.
 
   const mainDivRect = mainDivRef.value?.getBoundingClientRect();
 
@@ -2051,7 +2162,14 @@ const applyDrag = (currentDrag: IDrag): void => {
   zoomTo(ranges);
 };
 
-const onDragStart = (event: MouseEvent, type: DragType): void => {
+const onDragStart = (event: PointerEvent, type: DragType): void => {
+  // Only start dragging with the main button of a pointer (e.g., not with the right mouse button) and with a primary
+  // pointer (e.g., not with a second finger, which can only be used to pinch while dragging, see onDragPointerDown()).
+
+  if (event.button !== 0 || !event.isPrimary) {
+    return;
+  }
+
   // Apply our pending wheel zoom, if any, so that it doesn't get applied while dragging (in which case our drag would
   // be based on ranges that are not the ones that are shown anymore).
 
@@ -2067,33 +2185,39 @@ const onDragStart = (event: MouseEvent, type: DragType): void => {
 
   finishRangeAnimation();
 
-  // Start dragging, but only with the main mouse button and if our plot has been laid out.
+  // Start dragging, but only if our plot has been laid out.
 
   const rect = plotRect.value;
   const xRange = currentRange('x');
   const yRange = currentRange('y');
 
-  if (event.button !== 0 || !rect || !xRange || !yRange) {
+  if (!rect || !xRange || !yRange) {
     return;
   }
 
-  event.preventDefault();
-
   // Make sure that we are not already dragging.
-  // Note: this shouldn't be the case since we ignore any press of the main mouse button while dragging (see
-  //       onDragMouseDown()), but better be safe than sorry.
+  // Note: this shouldn't be the case since we ignore any press of another pointer while dragging (see
+  //       onDragPointerDown()), but better be safe than sorry.
 
   stopDrag();
 
-  // Keep track of what we are dragging, our starting position, our current ranges, a copy of our zoom ranges (so that
-  // cancelDrag() can restore them), and our zoom box.
+  // Keep track of what we are dragging, the pointer with which we are dragging, our starting (and current) position, our
+  // current ranges, a copy of our zoom ranges (so that cancelDrag() can restore them), and our zoom box.
+  // Note: we only know how many times a mouse (or a pen) has been clicked once its mouse press has been emulated (see
+  //       onDragMouseDown()), while a press using a finger is considered as a single click (since its mouse press is
+  //       only emulated once it has been released, if at all, i.e. after our drag is over).
 
   const position = plotPosition(event, rect);
 
   drag = {
     type,
+    pointerId: event.pointerId,
+    pointerType: event.pointerType,
+    clickCount: event.pointerType === 'touch' ? 1 : undefined,
     startX: position.x,
     startY: position.y,
+    x: position.x,
+    y: position.y,
     dx: 0,
     dy: 0,
     xRange,
@@ -2107,20 +2231,23 @@ const onDragStart = (event: MouseEvent, type: DragType): void => {
       right: 0,
       top: 0,
       bottom: 0
-    }
+    },
+    pinch: undefined
   };
 
-  // Listen for mouse and keyboard events on the window, as well as for it losing focus, so that we can continue to drag
-  // even if the mouse leaves our plotting area, and cancel our drag if needed.
+  // Listen for pointer, mouse, and keyboard events on the window, as well as for it losing focus, so that we can
+  // continue to drag even if our pointer leaves our plotting area, start pinching, and cancel our drag if needed.
 
+  window.addEventListener('pointerdown', onDragPointerDown, true);
+  window.addEventListener('pointermove', onDragMove);
+  window.addEventListener('pointerup', onDragEnd);
+  window.addEventListener('pointercancel', onDragPointerCancel);
   window.addEventListener('mousedown', onDragMouseDown, true);
-  window.addEventListener('mousemove', onDragMove);
-  window.addEventListener('mouseup', onDragEnd);
   window.addEventListener('keydown', onDragKeyDown, true);
   window.addEventListener('blur', cancelDrag);
 };
 
-const onDragMove = (event: MouseEvent): void => {
+const onDragMove = (event: PointerEvent): void => {
   // Make sure that we are dragging and that our plot has been laid out.
 
   const currentDrag = drag;
@@ -2130,10 +2257,27 @@ const onDragMove = (event: MouseEvent): void => {
     return;
   }
 
-  // Determine the position of our mouse relative to our plotting area.
+  // Let our pinch, if any, handle the move of one of its pointers.
+
+  if (currentDrag.pinch) {
+    movePinch(currentDrag.pinch, event, rect);
+
+    return;
+  }
+
+  // Make sure that it is the pointer with which we are dragging that has moved.
+
+  if (event.pointerId !== currentDrag.pointerId) {
+    return;
+  }
+
+  // Determine (and keep track of) the position of our pointer relative to our plotting area.
 
   const position = plotPosition(event, rect);
 
+  currentDrag.x = position.x;
+  currentDrag.y = position.y;
+
   // Use the cursor of our drag while dragging (see dragCursor), but only once our mouse has moved far enough from where
   // our drag started.
   // Note: a click (or a double-click) often comes with a bit of mouse movement, in which case our mouse button would be
@@ -2209,8 +2353,8 @@ const onDragMove = (event: MouseEvent): void => {
 
   // Update our zoom box, which is shown on top of our plot (unless we haven't dragged far enough to zoom yet).
   // Note: like our grid and zero lines (see linesPath()), our zoom box is snapped to whole device pixels and its border
-  //       is a whole number of device pixels wide (see lineWidth()), so that it is crisp whatever our pixel ratio (e.g.,
-  //       125%). Its border is also drawn inside our zoom box, which itself is kept within our plotting area.
+  //       is a whole number of device pixels wide (see lineWidth()), so that it is crisp whatever our pixel ratio
+  //       (e.g., 125%). Its border is also drawn inside our zoom box, which itself is kept within our plotting area.
 
   if (currentDrag.zoomMode) {
     const pxRatio = dependencies._uPlot.pxRatio as number;
@@ -2232,38 +2376,56 @@ const onDragMove = (event: MouseEvent): void => {
   }
 };
 
-const onDragEnd = (event: MouseEvent): void => {
-  // Finish our drag, but only if it is the main mouse button that has been released (see onDragMouseDown()).
+const onDragEnd = (event: PointerEvent): void => {
+  // Make sure that we are dragging.
+  // Note: this should always be the case since we only listen to pointerup events while dragging (see onDragStart()
+  //       and stopDrag()).
 
-  if (event.button !== 0) {
+  const currentDrag = drag;
+
+  if (!currentDrag) {
     return;
   }
 
-  // Stop dragging.
-  // Note: we must keep track of our drag (and of whether we actually dragged, see onDragMove()) before stopping it
-  //       since stopping it resets it.
+  // Finish our pinch, if any, once one of its pointers has been released, making sure that our axes reflect where we
+  // stopped pinching.
+  // Note: we don't go back to dragging with the pointer that is still pressed, if any, since its drag would have to
+  //       start from wherever it is now (rather than from where our original drag started), which could be confusing.
 
-  const currentDrag = drag;
-  const dragged = !!dragCursor.value;
+  const pinch = currentDrag.pinch;
 
-  stopDrag();
+  if (pinch) {
+    if (pinch.pointers.has(event.pointerId)) {
+      applyPinch(pinch);
+      stopDrag();
+    }
 
-  // Make sure that we were dragging.
-  // Note: this should always be the case since we only listen to mouseup events while dragging (see onDragStart() and
-  //       stopDrag()).
+    return;
+  }
 
-  if (!currentDrag) {
+  // Finish our drag, but only if it is the main button of the pointer with which we are dragging that has been
+  // released.
+
+  if (event.pointerId !== currentDrag.pointerId || event.button !== 0) {
     return;
   }
 
+  // Stop dragging.
+  // Note: we must keep track of whether we actually dragged (see onDragMove()) before stopping our drag since stopping
+  //       it resets it.
+
+  const dragged = !!dragCursor.value;
+
+  stopDrag();
+
   // If we were dragging an axis (or a corner), then make sure that our axes reflect where we stopped dragging or, like
-  // Plotly, open our range editor if we clicked one end of an axis (but not if it is the second click of a double-click,
-  // see onDoubleClick()).
+  // Plotly, open our range editor if we clicked one end of an axis (but not if it is the second click of a
+  // double-click, see onDoubleClick()).
 
   if (currentDrag.type !== 'nsew') {
     if (dragged) {
       applyDrag(currentDrag);
-    } else if (isAxisEnd(currentDrag.type) && event.detail <= 1) {
+    } else if (isAxisEnd(currentDrag.type) && (currentDrag.clickCount ?? 1) <= 1) {
       openRangeEditor(currentDrag.type);
     }
 
@@ -2321,20 +2483,66 @@ const onDragKeyDown = (event: KeyboardEvent): void => {
   }
 };
 
+const onDragPointerDown = (event: PointerEvent): void => {
+  // Make sure that it is another pointer than the one with which we are dragging that has been pressed.
+  // Note: this should always be the case since we start listening to pointer presses once our pointer has been pressed
+  //       (see onDragStart()), and a pointer can only be pressed again once it has been released (in which case our
+  //       drag is over), but better be safe than sorry.
+
+  const currentDrag = drag;
+
+  if (!currentDrag || event.pointerId === currentDrag.pointerId) {
+    return;
+  }
+
+  // Ignore the press of another pointer (so that it can't start another drag, e.g., of one of our axes while zooming
+  // into our plotting area, or trigger anything else), unless we are dragging using a finger and it is a second finger,
+  // in which case our drag becomes a pinch (see startPinch()).
+  // Note: we listen to pointer presses in the capture phase (see onDragStart()), so we get them before anything else.
+  //       We also prevent their default behaviour, so that their mouse presses don't get emulated (see Note #3 above).
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (event.pointerType === 'touch' && currentDrag.pointerType === 'touch' && !currentDrag.pinch) {
+    startPinch(currentDrag, event);
+  }
+};
+
+const onDragPointerCancel = (event: PointerEvent): void => {
+  // Cancel our drag (or pinch) if the browser has taken over (one of) its pointer(s) (see Note #2 above).
+
+  const currentDrag = drag;
+
+  if (currentDrag && (event.pointerId === currentDrag.pointerId || currentDrag.pinch?.pointers.has(event.pointerId))) {
+    cancelDrag();
+  }
+};
+
 const onDragMouseDown = (event: MouseEvent): void => {
-  // Ignore any other press of the main mouse button while dragging (e.g., using another pointing device), so that it
-  // can't start another drag (e.g., of one of our axes while zooming into our plotting area). Otherwise, cancel our
-  // drag if the user presses another mouse button (e.g., the right one), in which case we also prevent the context menu
-  // that would normally be shown as a result of that mouse button being pressed (see preventContextMenu()).
+  // Keep track of how many times our mouse button has been clicked when its press (with which our drag started) gets
+  // emulated (see Note #3 above), and prevent it from moving the keyboard focus or selecting some text (see
+  // onPressMouseDown()). Ignore any other press of the main mouse button while dragging (e.g., using another pointing
+  // device), so that it can't start another drag (e.g., of one of our axes while zooming into our plotting area).
+  // Otherwise, cancel our drag if the user presses another mouse button (e.g., the right one), in which case we also
+  // prevent the context menu that would normally be shown as a result of that mouse button being pressed (see
+  // preventContextMenu()).
   // Note #1: we listen to mouse presses in the capture phase (see onDragStart()), so we get them before anything else.
   // Note #2: a context menu is shown either when the right mouse button is pressed (e.g., on macOS) or released (e.g.,
   //          on Windows), so we prevent the next context menu from being shown, whenever that is. We also stop
   //          preventing it when another mouse button gets pressed (e.g., if the context menu event didn't get fired for
   //          some reason).
+  // Note #3: pressing another mouse button while our main mouse button is pressed doesn't result in a pointer press
+  //          (but in a pointer move), so we rely on its mouse press to cancel our drag.
 
   if (event.button === 0) {
     event.preventDefault();
-    event.stopPropagation();
+
+    if (drag && drag.clickCount === undefined) {
+      drag.clickCount = event.detail;
+    } else {
+      event.stopPropagation();
+    }
 
     return;
   }
@@ -2354,6 +2562,139 @@ const onDragMouseDown = (event: MouseEvent): void => {
   );
 };
 
+const onPressMouseDown = (event: MouseEvent): void => {
+  // Prevent a press of the main mouse button on our plotting area or one of our axes (be it a real one or one that is
+  // emulated, e.g., after a tap, see Note #3 above) from moving the keyboard focus (e.g., away from an input field that
+  // is being edited) or from selecting some text.
+
+  if (event.button === 0) {
+    event.preventDefault();
+  }
+};
+
+// Pinching, i.e. zooming (and panning) using two fingers, around the point between them (see the beginning of the
+// pointer interaction section above).
+// Note: we scale our ranges by how much closer to (or further from) each other our fingers have moved, and we pan them,
+//       so that what was originally between our fingers remains between them.
+
+const startPinch = (currentDrag: IDrag, event: PointerEvent): void => {
+  // Make sure that our plot has been laid out.
+
+  const rect = plotRect.value;
+  const xRange = currentRange('x');
+  const yRange = currentRange('y');
+
+  if (!rect || !xRange || !yRange) {
+    return;
+  }
+
+  // Stop dragging and start pinching using the finger with which we were dragging (from where it currently is) and the
+  // second finger, using our current ranges (which we may have changed while dragging, e.g., an axis).
+
+  if (dragRafId !== undefined) {
+    cancelAnimationFrame(dragRafId);
+
+    dragRafId = undefined;
+  }
+
+  const position = plotPosition(event, rect);
+
+  currentDrag.zoomMode = '';
+  currentDrag.pinch = {
+    pointers: new Map([
+      [currentDrag.pointerId, { startX: currentDrag.x, startY: currentDrag.y, x: currentDrag.x, y: currentDrag.y }],
+      [event.pointerId, { startX: position.x, startY: position.y, x: position.x, y: position.y }]
+    ]),
+    axisKeys: draggedAxes(currentDrag.type),
+    xRange,
+    yRange
+  };
+
+  zoomBox.value = null;
+  dragCursor.value = null;
+};
+
+const movePinch = (pinch: IPinch, event: PointerEvent, rect: IPlotRect): void => {
+  // Make sure that it is one of our fingers that has moved.
+
+  const pointer = pinch.pointers.get(event.pointerId);
+
+  if (!pointer) {
+    return;
+  }
+
+  // Keep track of where our finger is and pinch accordingly, coalescing our pinches into one per frame.
+
+  const position = plotPosition(event, rect);
+
+  pointer.x = position.x;
+  pointer.y = position.y;
+
+  if (dragRafId === undefined) {
+    dragRafId = requestAnimationFrame(() => {
+      dragRafId = undefined;
+
+      if (drag?.pinch) {
+        applyPinch(drag.pinch);
+      }
+    });
+  }
+};
+
+const pinchedRange = (range: Range, startFraction: number, fraction: number, factor: number): Range => {
+  // Return the given range, scaled by the given factor, so that the value that was at the given start fraction of the
+  // given range is now at the given fraction of the new range.
+
+  const value = range[0] + (range[1] - range[0]) * startFraction;
+  const length = (range[1] - range[0]) * factor;
+  const min = value - length * fraction;
+
+  return [min, min + length];
+};
+
+const applyPinch = (pinch: IPinch): void => {
+  // Make sure that our plot has been laid out and that we have two fingers that are far enough from each other for us
+  // to know how much closer to (or further from) each other they have moved.
+
+  const rect = plotRect.value;
+  const [pointer1, pointer2] = Array.from(pinch.pointers.values());
+
+  if (!rect || !pointer1 || !pointer2) {
+    return;
+  }
+
+  const startDistance = Math.hypot(pointer2.startX - pointer1.startX, pointer2.startY - pointer1.startY);
+  const distance = Math.hypot(pointer2.x - pointer1.x, pointer2.y - pointer1.y);
+
+  if (startDistance < MIN_DRAG || distance < MIN_DRAG) {
+    return;
+  }
+
+  // Determine the new ranges of our axes and zoom into them.
+
+  const factor = startDistance / distance;
+  const startX = 0.5 * (pointer1.startX + pointer2.startX);
+  const startY = 0.5 * (pointer1.startY + pointer2.startY);
+  const x = 0.5 * (pointer1.x + pointer2.x);
+  const y = 0.5 * (pointer1.y + pointer2.y);
+  const ranges: Partial<Record<AxisKey, Range>> = {};
+
+  if (pinch.axisKeys.includes('x')) {
+    ranges.x = pinchedRange(pinch.xRange, startX / rect.width, x / rect.width, factor);
+  }
+
+  if (pinch.axisKeys.includes('y')) {
+    ranges.y = pinchedRange(
+      pinch.yRange,
+      (rect.height - startY) / rect.height,
+      (rect.height - y) / rect.height,
+      factor
+    );
+  }
+
+  zoomTo(ranges);
+};
+
 const onDoubleClick = (type: DragType): void => {
   // Reset the zoom along the axes that correspond to what was double-clicked unless we are dragging (in which case only
   // our drag should have an effect).
@@ -2445,10 +2786,13 @@ const openRangeEditor = (type: AxisEnd): void => {
             : undefined
   };
 
-  // Select the text of our range editor once it has been rendered, and close it (applying its value) if the mouse is
+  // Select the text of our range editor once it has been rendered, and close it (applying its value) if a pointer is
   // pressed anywhere else.
-  // Note: we listen to mouse presses (in the capture phase) rather than rely on our range editor losing focus since
-  //       some of our mouse presses don't move the focus (e.g., see onDragStart()).
+  // Note #1: we listen to pointer presses (in the capture phase) rather than rely on our range editor losing focus
+  //          since some of our pointer presses don't move the focus (see onPressMouseDown()).
+  // Note #2: we listen to pointer presses rather than mouse presses since our range editor may have been opened using
+  //          a tap, in which case a mouse press gets emulated once our range editor has been opened (see Note #3 of
+  //          the pointer interaction section above), which would otherwise close it straight away.
 
   void vue.nextTick().then(() => {
     const element = rangeEditorRef.value;
@@ -2460,7 +2804,7 @@ const openRangeEditor = (type: AxisEnd): void => {
     }
   });
 
-  window.addEventListener('mousedown', onRangeEditorMouseDown, true);
+  window.addEventListener('pointerdown', onRangeEditorPointerDown, true);
 };
 
 const closeRangeEditor = (apply: boolean): void => {
@@ -2487,7 +2831,7 @@ const closeRangeEditor = (apply: boolean): void => {
 
   rangeEditor.value = null;
 
-  window.removeEventListener('mousedown', onRangeEditorMouseDown, true);
+  window.removeEventListener('pointerdown', onRangeEditorPointerDown, true);
 
   const range = currentRange(editor.axisKey);
 
@@ -2516,8 +2860,8 @@ const onRangeEditorKeyDown = (event: KeyboardEvent): void => {
   }
 };
 
-const onRangeEditorMouseDown = (event: MouseEvent): void => {
-  // Close our range editor (applying its value) if the mouse is pressed outside of it.
+const onRangeEditorPointerDown = (event: PointerEvent): void => {
+  // Close our range editor (applying its value) if a pointer is pressed outside of it.
 
   if (!rangeEditorRef.value?.contains(event.target as Node)) {
     closeRangeEditor(true);
@@ -2595,10 +2939,12 @@ const onWheel = (event: WheelEvent, type: DragType): void => {
 };
 
 const stopDrag = (): void => {
-  // Stop dragging, if we are.
+  // Stop dragging (or pinching), if we are.
 
-  window.removeEventListener('mousemove', onDragMove);
-  window.removeEventListener('mouseup', onDragEnd);
+  window.removeEventListener('pointerdown', onDragPointerDown, true);
+  window.removeEventListener('pointermove', onDragMove);
+  window.removeEventListener('pointerup', onDragEnd);
+  window.removeEventListener('pointercancel', onDragPointerCancel);
   window.removeEventListener('mousedown', onDragMouseDown, true);
   window.removeEventListener('keydown', onDragKeyDown, true);
   window.removeEventListener('blur', cancelDrag);
@@ -2616,14 +2962,15 @@ const stopDrag = (): void => {
 };
 
 const cancelDrag = (): void => {
-  // Cancel our drag, if any, restoring our ranges if we were dragging an axis (or a corner) since our ranges get
-  // updated while dragging an axis (or a corner) unlike while dragging our plotting area.
+  // Cancel our drag (or pinch), if any, restoring our ranges if we were dragging an axis (or a corner) or pinching
+  // since our ranges get updated while dragging an axis (or a corner) or pinching, unlike while dragging our plotting
+  // area.
 
   const currentDrag = drag;
 
   stopDrag();
 
-  if (currentDrag && currentDrag.type !== 'nsew') {
+  if (currentDrag && (currentDrag.type !== 'nsew' || currentDrag.pinch)) {
     zoomRanges = { ...currentDrag.zoomRanges };
 
     setScales({ x: zoomRanges.x ?? null, y: zoomRanges.y ?? null });
@@ -2639,6 +2986,122 @@ const preventContextMenu = (event: MouseEvent): void => {
   window.removeEventListener('contextmenu', preventContextMenu, true);
 };
 
+// Keyboard interaction, i.e. once our plot has the keyboard focus (see our template):
+//  - + (or =) and − (or _): zoom in and out, around the middle of our plotting area;
+//  - 0: reset the zoom;
+//  - the arrow keys: pan along the corresponding axis; and
+//  - Shift+F10 (or the context menu key): show our context menu (see showContextMenuUsingKeyboard()).
+// Note: we leave a key alone if it is used with Ctrl, Cmd, or Alt (e.g., Ctrl+− to zoom out the whole page), and we
+//       ignore our keys while dragging (in which case only our drag should have an effect, see onDragKeyDown()).
+
+const KEYBOARD_PAN_FRACTION = 0.1; // Fraction of the length of an axis by which it gets panned using an arrow key.
+
+const plotDescriptionId = `graph-panel-description-${vue.useId()}`;
+
+const plainText = (html: string | undefined): string => {
+  // Return the text of the given HTML (e.g., "<i>I<sub>K,r</sub></i>" becomes "IK,r").
+  // Note: we parse our HTML in a separate document, so that nothing in it gets loaded or run (e.g., an image).
+
+  return html ? (new DOMParser().parseFromString(html, 'text/html').body.textContent ?? '').trim() : '';
+};
+
+const plotLabel = vue.computed<string>(() => {
+  // Our plot, as described to assistive technologies, i.e. based on the titles of our axes, if any.
+
+  const xAxisTitle = plainText(props.data.xAxisTitle);
+  const yAxisTitle = plainText(props.data.yAxisTitle);
+
+  if (xAxisTitle && yAxisTitle) {
+    return `Plot of ${yAxisTitle} against ${xAxisTitle}`;
+  }
+
+  if (yAxisTitle) {
+    return `Plot of ${yAxisTitle}`;
+  }
+
+  return xAxisTitle ? `Plot against ${xAxisTitle}` : 'Plot';
+});
+
+const panBy = (axisKey: AxisKey, direction: 1 | -1): void => {
+  // Pan the given axis in the given direction by a fraction of its length, from the range that it will have once we
+  // are done animating it (so that panning several times in a row, e.g., by keeping an arrow key pressed, is not
+  // affected by our animation, see zoomBy()).
+
+  const range = targetRange(axisKey);
+
+  if (!range) {
+    return;
+  }
+
+  const delta = direction * KEYBOARD_PAN_FRACTION * (range[1] - range[0]);
+
+  zoomTo({ [axisKey]: [range[0] + delta, range[1] + delta] }, WHEEL_ZOOM_ANIMATION_DURATION);
+};
+
+const onPlotKeyDown = (event: KeyboardEvent): void => {
+  // Make sure that we are not dragging and that our plot has been laid out.
+
+  if (drag || !plotRect.value) {
+    return;
+  }
+
+  // Show our context menu.
+
+  if (
+    (event.key === 'F10' && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) ||
+    event.key === 'ContextMenu'
+  ) {
+    event.preventDefault();
+
+    showContextMenuUsingKeyboard();
+
+    return;
+  }
+
+  // Zoom, reset the zoom, or pan.
+
+  if (event.ctrlKey || event.metaKey || event.altKey) {
+    return;
+  }
+
+  switch (event.key) {
+    case '+':
+    case '=':
+      zoomBy(ZOOM_FACTOR, ['x', 'y'], {}, ZOOM_ANIMATION_DURATION);
+
+      break;
+    case '-':
+    case '_':
+      zoomBy(1 / ZOOM_FACTOR, ['x', 'y'], {}, ZOOM_ANIMATION_DURATION);
+
+      break;
+    case '0':
+      resetZoom();
+
+      break;
+    case 'ArrowLeft':
+      panBy('x', -1);
+
+      break;
+    case 'ArrowRight':
+      panBy('x', 1);
+
+      break;
+    case 'ArrowDown':
+      panBy('y', -1);
+
+      break;
+    case 'ArrowUp':
+      panBy('y', 1);
+
+      break;
+    default:
+      return;
+  }
+
+  event.preventDefault();
+};
+
 // Number formatting like in Plotly (with its default 'B' exponent format, i.e. SI prefixes except for 10^9 which is B).
 
 const MINUS_SIGN = '−';
@@ -2823,13 +3286,13 @@ const axisSplits = (axisKey: AxisKey): uPlot.Axis.Splits => {
     let ticks = ticksBetween(min, max, dtick);
     let format = numberFormat(dtick, maxEnd);
 
-    // Make sure that our tick labels don't overlap by increasing our tick spacing (to the next "nice" value) for as long
-    // as they would.
+    // Make sure that our tick labels don't overlap by increasing our tick spacing (to the next "nice" value) for as
+    // long as they would.
     // Note: this always ends since we end up with at most one tick once our tick spacing is bigger than our range.
 
     const tickLabelSize = (): number => {
-      // Return the size of our biggest tick label along our axis, i.e. its width for our X axis and its height for our Y
-      // axis.
+      // Return the size of our biggest tick label along our axis, i.e. its width for our X axis and its height for our
+      // Y axis.
 
       if (axisKey === 'y') {
         return TICK_FONT_SIZE;
@@ -3950,8 +4413,8 @@ const createPlot = (width: number, height: number): void => {
         show: false
       },
       cursor: {
-        // Note: we only use uPlot's cursor to keep track of the mouse pointer (see updateHover()), and we handle mouse
-        //       presses and double-clicks ourselves (see onDragStart() and onDoubleClick()).
+        // Note: we only use uPlot's cursor to keep track of the mouse pointer (see updateHover()), and we handle
+        //       pointer presses and double-clicks ourselves (see onDragStart() and onDoubleClick()).
 
         x: false,
         y: false,
@@ -4069,10 +4532,12 @@ const createPlot = (width: number, height: number): void => {
     plotDivRef.value as HTMLElement
   ) as uPlot;
 
-  // Handle mouse interaction with our plotting area.
-  // Note: uPlot's plotting area (i.e. its "over" element) gets destroyed with our plot, and its event listeners with it.
+  // Handle pointer interaction with our plotting area.
+  // Note: uPlot's plotting area (i.e. its "over" element) gets destroyed with our plot, and its event listeners with
+  //       it.
 
-  plot.over.addEventListener('mousedown', (event: MouseEvent) => onDragStart(event, 'nsew'));
+  plot.over.addEventListener('pointerdown', (event: PointerEvent) => onDragStart(event, 'nsew'));
+  plot.over.addEventListener('mousedown', onPressMouseDown);
   plot.over.addEventListener('dblclick', () => onDoubleClick('nsew'));
   plot.over.addEventListener('wheel', (event: WheelEvent) => onWheel(event, 'nsew'), {
     passive: false
@@ -4131,8 +4596,8 @@ const updatePlot = (): void => {
     createPlot(width, height);
   } else {
     // We already have a plot and its signature hasn't changed, so update the visibility of its series (since our traces
-    // may be different ones, e.g., when runs get tracked in interactive mode), its data, and its size (or layout, if the
-    // width of our legend has changed since it is part of our right margin), if needed.
+    // may be different ones, e.g., when runs get tracked in interactive mode), its data, and its size (or layout, if
+    // the width of our legend has changed since it is part of our right margin), if needed.
 
     const currentPlot = plot;
 
@@ -4154,28 +4619,9 @@ const updatePlot = (): void => {
   }
 };
 
-// Context menu handling.
-
-const handleContextMenu = (event: Event): void => {
-  // Hide our context menu if the event was dispatched by another instance of GraphPanelWidget.
-  // Note: this ensures that only one context menu is open at any given time.
-
-  const detail = (event as CustomEvent<{ sourceId?: symbol }>)?.detail;
-
-  if (!detail || detail.sourceId === instanceId) {
-    return;
-  }
-
-  contextMenuRef.value?.hide?.();
-};
-
 // Vue lifecycle hooks.
 
 vue.onMounted(() => {
-  // Listen for the custom event that is dispatched when another instance of GraphPanelWidget shows its context menu.
-
-  window.addEventListener(CONTEXT_MENU_EVENT, handleContextMenu);
-
   // Start tracking the size of our container so that we can update our plot when it changes.
   // Note #1: we pass a getter (i.e. mainDivRef.value) rather than our ref (i.e. mainDivRef) since VueUse uses its own
   //          version of Vue's types, which are not compatible with ours.
@@ -4249,11 +4695,6 @@ vue.onBeforeUnmount(() => {
 });
 
 vue.onUnmounted(() => {
-  // Stop listening for the custom event that is dispatched when another instance of GraphPanelWidget shows its context
-  // menu.
-
-  window.removeEventListener(CONTEXT_MENU_EVENT, handleContextMenu);
-
   stopTrackingContainerSize?.();
   stopTrackingLegendSize?.();
 });
@@ -4348,20 +4789,6 @@ vue.watch(
     vertical-align: super;
   }
 
-  .fade-in {
-    animation: fade-in 200ms;
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
   /**
    * Note: our hover tooltip is shown above our panels (so that it doesn't get clipped by short panels), but below
    *       PrimeVue's overlays (e.g., our context menu), which z-index is at least 1000.
@@ -4373,9 +4800,9 @@ vue.watch(
     max-width: 320px;
     padding: 6px 10px;
     border: 1px solid var(--p-overlay-popover-border-color);
-    border-radius: var(--p-overlay-popover-border-radius);
+    border-radius: 0.5rem;
     background-color: var(--p-overlay-popover-background);
-    box-shadow: var(--p-overlay-popover-shadow);
+    box-shadow: var(--opencor-overlay-shadow);
     color: var(--p-overlay-popover-color);
     font-size: 12px;
     line-height: 18px;
@@ -4435,13 +4862,26 @@ vue.watch(
     user-select: none;
   }
 
+  /**
+   * Note: our legend items are buttons (see our template), which we style like the rest of our legend (and which take
+   *       the whole width of our legend, so that their hover background is as wide as our legend). Their focus ring is
+   *       drawn inside them since our legend would otherwise clip it (since it can scroll).
+   */
+
   .legend-item {
     position: relative;
+    display: block;
+    width: calc(100% - 8px);
     min-height: 20px;
     margin: 0 4px;
     padding: 0 6px 0 30px;
+    border: none;
     border-radius: var(--p-border-radius-sm);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
     line-height: 20px;
+    text-align: start;
     white-space: nowrap;
     cursor: pointer;
     transition: background-color 0.15s;
@@ -4451,6 +4891,10 @@ vue.watch(
     background-color: var(--p-content-hover-background);
   }
 
+  .legend-item:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--opencor-focus-ring-color, var(--p-primary-color));
+  }
+
   .legend-item-hidden {
     color: var(--p-text-muted-color);
   }
@@ -4495,4 +4939,28 @@ vue.watch(
   :deep(.u-over) {
     cursor: crosshair;
   }
+
+  /**
+   * Note: a finger (or a pen) used on our plotting area or one of our axes is for us to handle (see Note #4 of the
+   *       pointer interaction section), i.e. not for the browser to scroll or zoom the page.
+   */
+
+  :deep(.u-over),
+  .dragger {
+    touch-action: none;
+  }
+
+  /**
+   * Focus ring of our plot, which is drawn on top of everything (e.g., our legend) and inside our panel (since our
+   * panel would otherwise clip it).
+   */
+
+  .plot-panel:has(> .plot-area:focus-visible)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    box-shadow: inset 0 0 0 2px var(--opencor-focus-ring-color, var(--p-primary-color));
+    pointer-events: none;
+  }
 </style>
diff --git a/src/renderer/src/components/widgets/InputScientificNumberWidget.vue b/src/renderer/src/components/widgets/InputScientificNumberWidget.vue
index ce2ffcf4b..581a40fbc 100644
--- a/src/renderer/src/components/widgets/InputScientificNumberWidget.vue
+++ b/src/renderer/src/components/widgets/InputScientificNumberWidget.vue
@@ -2,6 +2,7 @@
   <FloatLabel variant="on" :class="rootAttrs.class" :style="rootAttrs.style">
     <span :class="rootClass">
       <InputText ref="inputElement" :model-value="internalValue" class="p-inputnumber-input w-full"
+        :aria-label="label"
         v-bind="inputAttrs"
         v-keyfilter="{ pattern: /^[+-]?(\d*(\.\d*)?|\.\d*)([eE][+-]?\d*)?$/ }"
         @update:model-value="onUpdateModelValue"
@@ -16,7 +17,7 @@
         type="button"
         :disabled="disabled || readonly || atDefaultValue"
         :tabindex="-1"
-        :title="`Reset to ${defaultValue}`"
+        v-hint="`Reset to ${defaultValue}`"
         @mousedown.prevent
         @click="onResetButtonClick"
       >
@@ -27,7 +28,7 @@
           type="button"
           :disabled="disabled || readonly || maxBoundary"
           :tabindex="-1"
-          title="Increment (hold Shift for a larger step)"
+          v-hint="'Increment (hold Shift for a larger step)'"
           @mousedown="onSpinButtonMouseDown($event, 1)"
           @mouseleave="clearSpinTimerAndRemoveEventListeners"
           @mouseup="clearSpinTimerAndRemoveEventListeners"
@@ -43,7 +44,7 @@
           type="button"
           :disabled="disabled || readonly || minBoundary"
           :tabindex="-1"
-          title="Decrement (hold Shift for a larger step)"
+          v-hint="'Decrement (hold Shift for a larger step)'"
           @mousedown="onSpinButtonMouseDown($event, -1)"
           @mouseleave="clearSpinTimerAndRemoveEventListeners"
           @mouseup="clearSpinTimerAndRemoveEventListeners"
@@ -65,11 +66,15 @@
 import * as vue from 'vue';
 
 import * as constants from '../../common/constants';
+import { vHint } from '../../common/hint';
 
 defineOptions({
   inheritAttrs: false
 });
 
+// Note: our label is not associated with our input field (i.e. it has no `for` attribute), so it is also used as the
+//       accessible name of our input field (unless our owner gives it one).
+
 const props = defineProps<{
   modelValue: number | undefined;
   label: string;
@@ -579,9 +584,9 @@ vue.onBeforeUnmount(() => {
 }
 
 /**
- * Note: we use some of the class names of PrimeVue's InputNumber component, whose (global) styles get injected as soon
- *       as it is used somewhere (e.g., in our property editors), so we make sure that the properties that it sets and
- *       that matter to us are set here too.
+ * Note: we use some of the class names of PrimeVue's InputNumber component, whose (global) styles only get injected if
+ *       it is used somewhere (e.g., by a host application, if we are used as a library), so we make sure that the
+ *       properties that it sets and that matter to us are set here too.
  */
 
 .p-inputnumber-button {
diff --git a/src/renderer/src/components/widgets/InputWidget.vue b/src/renderer/src/components/widgets/InputWidget.vue
index 098f80ee0..33feed776 100644
--- a/src/renderer/src/components/widgets/InputWidget.vue
+++ b/src/renderer/src/components/widgets/InputWidget.vue
@@ -5,6 +5,7 @@
         v-model="discreteValue"
         :options="possibleValues"
         optionLabel="name"
+        :ariaLabel="name"
         @change="selectChange"
         :appendTo="appendTarget"
         class="w-full"
@@ -17,7 +18,7 @@
         type="button"
         :disabled="atDefaultValue"
         :tabindex="-1"
-        :title="`Reset to ${defaultPossibleValue.name}`"
+        v-hint="`Reset to ${defaultPossibleValue.name}`"
         @mousedown.prevent
         @click="selectReset"
       >
@@ -41,7 +42,11 @@
       @atDefaultValueChange="(atDefaultValue: boolean) => emit('atDefaultValueChange', name, atDefaultValue)"
     />
     <div class="slider relative mt-3"
+      :class="{ 'slider-handle-focused-using-pointer': sliderHandleFocusedUsingPointer }"
+      @pointerdown.capture="onSliderPointerDown"
       @mousedown.capture="onSliderMouseDown"
+      @keydown.capture="onSliderKeyDown"
+      @focusout="onSliderFocusOut"
       @dblclick="onSliderDoubleClick">
       <Slider v-model="value" class="w-full"
         :min="minimumValue" :max="maximumValue" :step="compStepValue"
@@ -59,6 +64,7 @@
 import * as vue from 'vue';
 
 import { LONG_DELAY } from '../../common/constants';
+import { vHint } from '../../common/hint';
 import * as vueCommon from '../../common/vueCommon';
 import type * as locApi from '../../libopencor/locApi';
 
@@ -331,16 +337,57 @@ const sliderChange = (newValue: number | number[]) => {
   }
 };
 
-// Reset our scalar value when double-clicking on our slider's handle.
-// Note: the first click of a double click on our slider's bar moves our slider's handle under the mouse pointer, so we
-//       only reset our scalar value if the double click started on our slider's handle.
+// Keep track of whether our slider's handle has been focused using a pointer, in which case it shouldn't get a focus
+// ring until a key that may be used with our slider is pressed (see onSliderKeyDown()).
+// Note: PrimeVue's Slider focuses its handle programmatically when it starts being dragged, i.e. from its mousedown (or
+//       touchstart) handler, in which case Chromium (and therefore Electron) considers that our handle has been focused
+//       using the keyboard, i.e. that it should get a focus ring. Focusing our handle ourselves beforehand using
+//       focus({ focusVisible: false }) would prevent this, but our handle would then never get a focus ring, even if a
+//       key was then pressed, hence we hide its focus ring ourselves (see .slider-handle-focused-using-pointer below).
 
-let sliderDoubleClickStartedOnHandle = false;
+const sliderHandleFocusedUsingPointer = vue.ref<boolean>(false);
 
 const isSliderHandle = (target: EventTarget | null): boolean => {
   return target instanceof Element && target.closest('.p-slider-handle') !== null;
 };
 
+const onSliderPointerDown = (event: PointerEvent): void => {
+  if (isSliderHandle(event.target)) {
+    sliderHandleFocusedUsingPointer.value = true;
+  }
+};
+
+// A key is pressed while our slider's handle has the focus, in which case it should get a focus ring, unless that key
+// is only a modifier key (e.g., Shift or Cmd) or is used with Cmd, Ctrl, or Alt (e.g., Cmd+C), i.e. unless it cannot be
+// used with our slider.
+// Note: this is unlike a Web browser, which gives a focus ring to an element that was focused using a pointer as soon
+//       as any key is pressed, including a modifier key, in which case our handle would, for instance, get a focus ring
+//       when people press Cmd to switch to another application using Cmd+Tab or press Shift while dragging our slider.
+
+const MODIFIER_KEYS = ['Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'FnLock', 'Hyper', 'Meta', 'Shift', 'Super'];
+
+const onSliderKeyDown = (event: KeyboardEvent): void => {
+  if (!MODIFIER_KEYS.includes(event.key) && !event.altKey && !event.ctrlKey && !event.metaKey) {
+    sliderHandleFocusedUsingPointer.value = false;
+  }
+};
+
+// Our slider's handle loses the focus, unless it is only because our window has lost the focus (in which case our
+// handle is still the active element), since it will then get the focus back (and, without us, a focus ring) once our
+// window regains the focus.
+
+const onSliderFocusOut = (event: FocusEvent): void => {
+  if (event.target !== document.activeElement) {
+    sliderHandleFocusedUsingPointer.value = false;
+  }
+};
+
+// Reset our scalar value when double-clicking on our slider's handle.
+// Note: the first click of a double click on our slider's bar moves our slider's handle under the mouse pointer, so we
+//       only reset our scalar value if the double click started on our slider's handle.
+
+let sliderDoubleClickStartedOnHandle = false;
+
 const onSliderMouseDown = (event: MouseEvent) => {
   if (event.detail === 1) {
     sliderDoubleClickStartedOnHandle = isSliderHandle(event.target);
@@ -360,6 +407,15 @@ const onSliderDoubleClick = (event: MouseEvent) => {
 </script>
 
 <style scoped>
+/**
+ * Our slider's handle when it has been focused using a pointer (see sliderHandleFocusedUsingPointer).
+ */
+
+.slider-handle-focused-using-pointer :deep(.p-slider-handle:focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
 /**
  * Our drop-down button is as wide as the spin buttons of InputScientificNumberWidget and, like them, is separated from
  * our value by a divider.
diff --git a/src/renderer/src/components/widgets/ThemeWidget.vue b/src/renderer/src/components/widgets/ThemeWidget.vue
index c08e72bd4..9bd13b71a 100644
--- a/src/renderer/src/components/widgets/ThemeWidget.vue
+++ b/src/renderer/src/components/widgets/ThemeWidget.vue
@@ -1,11 +1,10 @@
 <template>
-  <button class="theme-widget flex items-center justify-center w-6 h-6 cursor-pointer rounded transition-colors duration-150"
-    type="button"
-    :title="`${THEMES[props.theme].label} theme (click to switch to ${THEMES[nextTheme()].label} theme)`"
+  <ToolbarButtonWidget
+    :icon="`pi ${THEMES[props.theme].icon}`"
+    :label="`${THEMES[props.theme].label} theme (click to switch to ${THEMES[nextTheme()].label} theme)`"
+    small
     @click="emit('switch', nextTheme())"
-  >
-    <i :class="`pi ${THEMES[props.theme].icon} text-sm`"></i>
-  </button>
+  />
 </template>
 
 <script setup lang="ts">
@@ -35,9 +34,3 @@ const nextTheme = (): OpenCORTheme => {
   return THEME_ORDER[(THEME_ORDER.indexOf(props.theme) + 1) % THEME_ORDER.length] ?? 'system';
 };
 </script>
-
-<style scoped>
-.theme-widget:hover {
-  background-color: var(--p-content-hover-background);
-}
-</style>
diff --git a/src/renderer/src/components/widgets/ToastMessageWidget.vue b/src/renderer/src/components/widgets/ToastMessageWidget.vue
new file mode 100644
index 000000000..ce693e685
--- /dev/null
+++ b/src/renderer/src/components/widgets/ToastMessageWidget.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="toast" :class="`toast-${severity}`">
+    <span class="toast-icon">
+      <i :class="ICONS[severity]" />
+    </span>
+    <div class="toast-text">
+      <div v-if="message.summary" class="toast-summary">{{ message.summary }}</div>
+      <div v-if="message.detail" class="toast-detail">{{ message.detail }}</div>
+    </div>
+    <ToolbarButtonWidget v-if="message.closable !== false" class="toast-close-button"
+      icon="pi pi-times"
+      label="Close"
+      small
+      tooltipAlign="end"
+      @click="emit('close')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ToastMessageOptions } from 'primevue/toast';
+import * as vue from 'vue';
+
+// A toast message, which is shown using the container slot of PrimeVue's Toast component (see OpenCOR.vue), and which
+// looks like our message dialogs (see dialogs/message-dialog.css), i.e. a severity icon next to some text.
+
+type Severity = 'info' | 'success' | 'warn' | 'error';
+
+const props = defineProps<{
+  message: ToastMessageOptions;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const ICONS: Record<Severity, string> = {
+  info: 'pi pi-info-circle',
+  success: 'pi pi-check-circle',
+  warn: 'pi pi-exclamation-triangle',
+  error: 'pi pi-times-circle'
+};
+
+// Note: PrimeVue also has the secondary and contrast severities, which we don't use, so we show them as information.
+
+const severity = vue.computed<Severity>(() => {
+  const messageSeverity = props.message.severity;
+
+  return messageSeverity && Object.hasOwn(ICONS, messageSeverity) ? (messageSeverity as Severity) : 'info';
+});
+</script>
+
+<style scoped>
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 0.5rem 0.75rem 0.75rem;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 0.5rem;
+  background-color: var(--p-content-background);
+  box-shadow: var(--opencor-card-shadow);
+}
+
+.toast-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, var(--toast-color) 15%, transparent);
+  color: var(--toast-color);
+  font-size: 0.875rem;
+}
+
+/**
+ * Note: our text is vertically centred with our icon when our summary is on its own, hence its top padding.
+ */
+
+.toast-text {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 0.125rem;
+  min-width: 0;
+  padding-top: 0.25rem;
+}
+
+.toast-summary {
+  color: var(--p-text-color);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+/**
+ * Note: our detail may contain some line breaks (e.g., to separate a file path from an issue), hence we preserve them.
+ */
+
+.toast-detail {
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+.toast-close-button {
+  margin-top: 0.125rem;
+}
+
+/**
+ * Severities.
+ */
+
+.toast-info {
+  --toast-color: var(--opencor-info-color);
+}
+
+.toast-success {
+  --toast-color: var(--opencor-success-color);
+}
+
+.toast-warn {
+  --toast-color: var(--opencor-warn-color);
+}
+
+.toast-error {
+  --toast-color: var(--opencor-error-color);
+}
+</style>
diff --git a/src/renderer/src/components/widgets/ToolbarButtonWidget.vue b/src/renderer/src/components/widgets/ToolbarButtonWidget.vue
new file mode 100644
index 000000000..c754decbb
--- /dev/null
+++ b/src/renderer/src/components/widgets/ToolbarButtonWidget.vue
@@ -0,0 +1,280 @@
+<template>
+  <button ref="buttonRef" class="toolbar-button relative flex items-center justify-center shrink-0 rounded-md cursor-pointer"
+    :class="[
+      props.small ? 'toolbar-button-small w-6 h-6' : 'w-8 h-8',
+      props.accent ? `toolbar-button-${props.accent}` : '',
+      {
+        'toolbar-button-tooltip-end': props.tooltipAlign === 'end',
+        'toolbar-button-tooltip-above': tooltipAbove,
+        'toolbar-button-tooltip-suppressed': tooltipSuppressed,
+        'toolbar-button-tooltip-dismissed': tooltipDismissed,
+        'toolbar-button-tooltip-feedback': props.feedback
+      }
+    ]"
+    type="button"
+    :aria-label="props.label"
+    :aria-keyshortcuts="props.shortcut"
+    :disabled="props.disabled"
+    @mousedown.prevent="onMouseDown"
+    @mouseenter="onMouseEnter"
+    @mouseleave="tooltipSuppressed = false"
+    @focus="onFocus"
+    @click="tooltipDismissed = false"
+  >
+    <i :class="props.icon" class="toolbar-button-icon" />
+    <span v-if="props.label" ref="tooltipRef" class="toolbar-button-tooltip absolute flex items-center gap-2 px-2 py-1 rounded-md text-xs whitespace-nowrap pointer-events-none" aria-hidden="true">
+      {{ props.label }}
+      <kbd v-if="props.shortcut" class="toolbar-button-shortcut font-sans">{{ props.shortcut }}</kbd>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import * as vue from 'vue';
+
+import type { IToolbarButtonProps } from '../../common/vueCommon';
+
+// A toolbar button, which shows an icon and, when hovered or focused using the keyboard, a tooltip with the button's
+// label and, if any, keyboard shortcut.
+// Note #1: a button with no label has no tooltip, which is useful for placeholder buttons (i.e. invisible buttons that
+//          are only used to align the contents of a toolbar).
+// Note #2: a small button is meant for places where space is tight (e.g., our main menu, see ThemeWidget.vue).
+// Note #3: a tooltip is aligned with the start of its button, unless the button is in the end part of a toolbar or of
+//          our main menu, or unless it is explicitly aligned with the end of its button (e.g., for a button that is on
+//          the right edge of a dialog, see AboutDialog.vue).
+// Note #4: a button doesn't get the focus when it is clicked (it still can using the keyboard). Otherwise, a dialog
+//          opened by clicking the button would give the focus back to the button when closed, and the browser may then
+//          consider that the button has the keyboard focus, making it look highlighted (i.e. with a focus ring and its
+//          tooltip shown). However, a field that is being edited (e.g., one of our input widgets, which only commits
+//          its value when it loses the focus) is blurred when the button is pressed, so that its value is committed
+//          before the button does what it does (e.g., run a simulation with the value that was just entered), unless
+//          the button is to keep the focus where it is (e.g., a button that discards the value being edited, see
+//          SimulationExperimentInteractiveView.vue).
+// Note #5: a button's tooltip is hidden once the button has been pressed, until the mouse leaves the button (or the
+//          button gets the focus, i.e. using the keyboard, see Note #4), so that it doesn't get in the way of what the
+//          button may have shown (e.g., a popover). However, a button can give some feedback using its tooltip (e.g.,
+//          "Copied" for a button that copies something, see useCopyToClipboard() in vueCommon.ts), in which case its
+//          tooltip is shown straightaway while the button is hovered.
+// Note #6: a tooltip is shown below its button, unless there is not enough room below it, be it in the window or in an
+//          ancestor that clips its contents (e.g., for a button at the bottom of a long list of runs, see
+//          SimulationExperimentInteractiveView.vue), in which case it is shown above it (if there is enough room
+//          there).
+// Note #7: like a hint (see hint.ts), a tooltip can be dismissed by pressing Escape, be it shown or about to be shown
+//          (including when it gives some feedback, see Note #5), in which case it isn't shown again until its button
+//          is hovered, focused, or pressed anew (so that it can, for instance, give some feedback again). Escape is
+//          otherwise left to do what it normally does (e.g., remove the keyboard focus, see OpenCOR.vue).
+
+const TOOLTIP_OFFSET = 6; // Distance between our button and our tooltip (see .toolbar-button-tooltip below).
+const TOOLTIP_MARGIN = 4; // Minimum distance between our tooltip and the edges of the window.
+
+const props = defineProps<IToolbarButtonProps>();
+
+const buttonRef = vue.useTemplateRef<HTMLButtonElement>('buttonRef');
+const tooltipSuppressed = vue.ref<boolean>(false);
+const tooltipDismissed = vue.ref<boolean>(false);
+const tooltipAbove = vue.ref<boolean>(false);
+const tooltipRef = vue.useTemplateRef<HTMLElement>('tooltipRef');
+
+const onMouseDown = (): void => {
+  tooltipSuppressed.value = true;
+
+  // Blur the field that is being edited, if any, so that its value gets committed (see Note #4 above).
+
+  const activeElement = document.activeElement;
+
+  if (
+    !props.keepFocus &&
+    activeElement instanceof HTMLElement &&
+    activeElement.matches('input, textarea, [contenteditable]:not([contenteditable="false"])')
+  ) {
+    activeElement.blur();
+  }
+};
+
+const onMouseEnter = (event: MouseEvent): void => {
+  tooltipDismissed.value = false;
+
+  updateTooltipPosition(event);
+};
+
+const onFocus = (event: FocusEvent): void => {
+  tooltipSuppressed.value = false;
+  tooltipDismissed.value = false;
+
+  updateTooltipPosition(event);
+};
+
+// Dismiss our tooltip, if any, when Escape is pressed while it is shown or about to be shown, i.e. while our button is
+// hovered or has a focus ring (see Note #7 above).
+
+const onWindowKeyDown = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape' && buttonRef.value?.matches(':hover, :focus-visible')) {
+    tooltipDismissed.value = true;
+  }
+};
+
+vue.onMounted(() => {
+  window.addEventListener('keydown', onWindowKeyDown, true);
+});
+
+vue.onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onWindowKeyDown, true);
+});
+
+const updateTooltipPosition = (event: Event): void => {
+  const tooltip = tooltipRef.value;
+
+  if (!tooltip) {
+    return;
+  }
+
+  // Determine the area within which our tooltip can be seen, i.e. the window minus the parts that are clipped by any of
+  // our ancestors (e.g., a card with hidden overflow, a scroll panel, or a splitter panel, see Note #6 above).
+
+  const button = event.currentTarget as HTMLElement;
+  const buttonRect = button.getBoundingClientRect();
+  let visibleTop = TOOLTIP_MARGIN;
+  let visibleBottom = window.innerHeight - TOOLTIP_MARGIN;
+
+  for (let ancestor = button.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    if (getComputedStyle(ancestor).overflowY !== 'visible') {
+      const ancestorRect = ancestor.getBoundingClientRect();
+
+      visibleTop = Math.max(visibleTop, ancestorRect.top);
+      visibleBottom = Math.min(visibleBottom, ancestorRect.bottom);
+    }
+  }
+
+  tooltipAbove.value =
+    buttonRect.bottom + TOOLTIP_OFFSET + tooltip.offsetHeight > visibleBottom &&
+    buttonRect.top - TOOLTIP_OFFSET - tooltip.offsetHeight >= visibleTop;
+};
+</script>
+
+<style scoped>
+.toolbar-button {
+  --toolbar-button-color: var(--p-text-muted-color);
+  --toolbar-button-hover-color: var(--p-text-color);
+
+  border: none;
+  background-color: transparent;
+  color: var(--toolbar-button-color);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    transform 0.1s ease;
+}
+
+.toolbar-button-primary {
+  --toolbar-button-color: var(--p-primary-color);
+  --toolbar-button-hover-color: var(--p-primary-color);
+}
+
+.toolbar-button-warning {
+  --toolbar-button-color: var(--opencor-warn-color);
+  --toolbar-button-hover-color: var(--opencor-warn-color);
+}
+
+.toolbar-button-danger {
+  --toolbar-button-color: var(--opencor-error-color);
+  --toolbar-button-hover-color: var(--opencor-error-color);
+}
+
+.toolbar-button-icon {
+  font-size: 1.125rem;
+}
+
+.toolbar-button-small .toolbar-button-icon {
+  font-size: 0.875rem;
+}
+
+.toolbar-button:not(:disabled):hover {
+  background-color: var(--p-content-hover-background);
+  color: var(--toolbar-button-hover-color);
+}
+
+.toolbar-button-primary:not(:disabled):hover,
+.toolbar-button-warning:not(:disabled):hover,
+.toolbar-button-danger:not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--toolbar-button-color) 12%, transparent);
+}
+
+.toolbar-button:not(:disabled):active {
+  transform: scale(0.92);
+}
+
+.toolbar-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--p-primary-color);
+}
+
+/**
+ * Note: we only fade the icon of a disabled button since fading the button itself would also fade its tooltip.
+ */
+
+.toolbar-button:disabled {
+  color: var(--p-text-muted-color);
+  cursor: default;
+}
+
+.toolbar-button:disabled .toolbar-button-icon {
+  opacity: 0.4;
+}
+
+/**
+ * Tooltip, which is shown below the button (or above it, see Note #6 above), without any animation, after a short delay
+ * when the button is hovered, and straightaway when the button is focused using the keyboard. It is left-aligned with
+ * the button, except in the end part of a toolbar or of our main menu where it is right-aligned, so that it doesn't
+ * extend beyond the edges of the toolbar or main menu.
+ */
+
+.toolbar-button-tooltip {
+  top: calc(100% + 0.375rem);
+  left: 0;
+  z-index: 1000;
+  border: 1px solid var(--opencor-hint-border-color);
+  background-color: var(--opencor-hint-background);
+  box-shadow: var(--opencor-overlay-shadow);
+  color: var(--opencor-hint-color);
+  font-weight: 500;
+  visibility: hidden;
+}
+
+.toolbar-button-tooltip-above .toolbar-button-tooltip {
+  top: auto;
+  bottom: calc(100% + 0.375rem);
+}
+
+.p-toolbar-end .toolbar-button-tooltip,
+.p-menubar-end .toolbar-button-tooltip,
+.toolbar-button-tooltip-end .toolbar-button-tooltip {
+  right: 0;
+  left: auto;
+}
+
+.toolbar-button:hover .toolbar-button-tooltip {
+  visibility: visible;
+  transition: visibility 0s 0.5s;
+}
+
+.toolbar-button:focus-visible .toolbar-button-tooltip {
+  visibility: visible;
+  transition: none;
+}
+
+.toolbar-button:active .toolbar-button-tooltip,
+.toolbar-button.toolbar-button-tooltip-suppressed .toolbar-button-tooltip,
+.toolbar-button.toolbar-button-tooltip-dismissed .toolbar-button-tooltip {
+  visibility: hidden;
+  transition: none;
+}
+
+.toolbar-button.toolbar-button-tooltip-feedback:not(.toolbar-button-tooltip-dismissed):hover .toolbar-button-tooltip {
+  visibility: visible;
+  transition: none;
+}
+
+.toolbar-button-shortcut {
+  color: var(--opencor-hint-muted-color);
+  font-size: inherit;
+}
+</style>
diff --git a/src/renderer/src/components/widgets/TooltipWidget.vue b/src/renderer/src/components/widgets/TooltipWidget.vue
deleted file mode 100644
index 26dfd195f..000000000
--- a/src/renderer/src/components/widgets/TooltipWidget.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div ref="rootRef" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-    <slot />
-    <Popover ref="popoverRef" class="tooltip" :appendTo="appendTarget" :closeOnEscape="false">
-      <div class="tooltip-content" v-html="content" />
-    </Popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Popover from 'primevue/popover';
-import * as vue from 'vue';
-
-import * as vueCommon from '../../common/vueCommon';
-
-const props = defineProps<{
-  content: string;
-}>();
-
-const rootRef = vue.shallowRef<HTMLElement | null>(null);
-const popoverRef = vue.ref<InstanceType<typeof Popover> | undefined>();
-const appendTarget = vueCommon.useAppendTarget(rootRef);
-
-const onMouseEnter = (event: MouseEvent) => {
-  if (!props.content) {
-    return;
-  }
-
-  popoverRef.value?.show(event, rootRef.value);
-};
-
-const onMouseLeave = () => {
-  popoverRef.value?.hide();
-};
-
-vue.onBeforeUnmount(() => {
-  popoverRef.value?.hide();
-});
-</script>
-
-<style>
-.p-popover-content {
-  padding: 0 !important;
-}
-
-.tooltip-content {
-  padding: 0.375rem 0.625rem !important;
-  width: max-content !important;
-  max-width: 20rem !important;
-  font-size: 0.8rem !important;
-}
-
-.tooltip-content table {
-  border-collapse: collapse !important;
-  border: none !important;
-  font-size: inherit !important;
-}
-
-.tooltip-content th,
-.tooltip-content td {
-  padding: 0.125rem 0 !important;
-  vertical-align: top !important;
-  border: none !important;
-}
-
-.tooltip-content td + td {
-  padding-left: 0.25rem !important;
-}
-</style>
diff --git a/src/renderer/src/libopencor/locLoggerApi.ts b/src/renderer/src/libopencor/locLoggerApi.ts
index be793106f..098822ce7 100644
--- a/src/renderer/src/libopencor/locLoggerApi.ts
+++ b/src/renderer/src/libopencor/locLoggerApi.ts
@@ -14,8 +14,9 @@ export interface IIssue {
 }
 
 // Convert some WASM issues to our issues.
-// Note: we take ownership of the given WASM issues, i.e. we release them (and each of the WASM issues they contain) once
-//       converted since every access to a WASM vector (and to its elements) yields a new handle that must be deleted.
+// Note: we take ownership of the given WASM issues, i.e. we release them (and each of the WASM issues they contain)
+//       once converted since every access to a WASM vector (and to its elements) yields a new handle that must be
+//       deleted.
 
 export const wasmIssuesToIssues = (wasmIssues: IWasmIssues): IIssue[] => {
   const res: IIssue[] = [];
diff --git a/src/renderer/src/libopencor/locSedApi.ts b/src/renderer/src/libopencor/locSedApi.ts
index 69d5c2882..12fe76671 100644
--- a/src/renderer/src/libopencor/locSedApi.ts
+++ b/src/renderer/src/libopencor/locSedApi.ts
@@ -73,8 +73,8 @@ export class SedDocument {
       return;
     }
 
-    // TODO: we only support a limited subset of SED-ML for now, so we need to check a few more things. Might wnat to
-    // check https://github.com/opencor/opencor/blob/master/src/plugins/support/SEDMLSupport/src/sedmlfile.cpp#L579-L1492.
+    // TODO: we only support a limited subset of SED-ML for now, so we need to check a few more things. See
+    // https://github.com/opencor/opencor/blob/master/src/plugins/support/SEDMLSupport/src/sedmlfile.cpp#L579-L1492.
 
     // Make sure that there is only one model.
 
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
index 7fdf6f2d4..4f18cbe2f 100644
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -8,6 +8,14 @@ import App from './App.vue';
 // import App from './AppWithSimulationData.vue';
 // import App from './AppWithExternalData.vue';
 
+import { ownDocumentTitle } from './common/common';
+
+// We are not used as a library, so the title of our document is ours to change (see ownDocumentTitle()).
+
+ownDocumentTitle();
+
+// Create and mount our application.
+
 createApp(App).mount('#app');
 
 // Prevent a file that is dropped outside of the area where we handle drag and drop (e.g., on a dialog's mask or on our
diff --git a/src/renderer/vite.config.ts b/src/renderer/vite.config.ts
index 8a087aa5e..3293ba1d6 100644
--- a/src/renderer/vite.config.ts
+++ b/src/renderer/vite.config.ts
@@ -28,11 +28,11 @@ export default vite.defineConfig({
       output: {
         // Note: our file names include a hash of their contents, so that they can be cached for a long time (since a
         //       new version of a file will have a different name, see public/.htaccess). Only index.html,
-        //       assets/version.json, and assets/changelog.json have a fixed name, which is why they must never be cached
-        //       for long (see src/common/version.ts, src/common/changelog.ts, and public/.htaccess) and why index.html
-        //       and assets/version.json must be uploaded last when deploying our Web app (see .github/workflows/cd.yml
-        //       and cddev.yml). This also means that old files are left behind on our server, hence we prune them after
-        //       some time (see scripts/prune.web.ts).
+        //       assets/version.json, and assets/changelog.json have a fixed name, which is why they must never be
+        //       cached for long (see src/common/version.ts, src/common/changelog.ts, and public/.htaccess) and why
+        //       index.html and assets/version.json must be uploaded last when deploying our Web app (see
+        //       .github/workflows/cd.yml and cddev.yml). This also means that old files are left behind on our server,
+        //       hence we prune them after some time (see scripts/prune.web.ts).
 
         entryFileNames: `assets/[name]-[hash].js`,
         chunkFileNames: `assets/[name]-[hash].js`,