diff --git a/alfred/ci.py b/alfred/ci.py
index 2cda18aba..40fbd6c89 100644
--- a/alfred/ci.py
+++ b/alfred/ci.py
@@ -18,6 +18,7 @@ def ci(front, back, e2e, docs):
     if front or no_flags:
         alfred.invoke_command("npm.lint")
         alfred.invoke_command("npm.build")
+        alfred.invoke_command("npm.ui.test")
     if back or no_flags:
         alfred.invoke_command("ci.mypy")
         alfred.invoke_command("ci.ruff")
diff --git a/alfred/npm.py b/alfred/npm.py
index e6946dfcb..102646f62 100644
--- a/alfred/npm.py
+++ b/alfred/npm.py
@@ -26,6 +26,10 @@ def npm_build_custom_components():
 def npm_docs_test():
     alfred.run("npm run docs:test")
 
+@alfred.command("npm.ui.test", help="test against writer-ui")
+def npm_ui_test():
+    alfred.run("npm run -w writer-ui test")
+
 @alfred.command("npm.storybook", help="build storybook for continuous integration")
 def npm_storybook():
     os.chdir("src/ui")
diff --git a/package-lock.json b/package-lock.json
index b04d0d651..c00d352e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3899,8 +3899,9 @@
 			}
 		},
 		"node_modules/@jridgewell/sourcemap-codec": {
-			"version": "1.4.15",
-			"license": "MIT"
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.24",
@@ -7592,6 +7593,121 @@
 				"@types/estree": "^1.0.0"
 			}
 		},
+		"node_modules/@vitest/mocker": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.6.tgz",
+			"integrity": "sha512-MHZp2Z+Q/A3am5oD4WSH04f9B0T7UvwEb+v5W0kCYMhtXGYbdyl2NUk1wdSMqGthmhpiThPDp/hEoVwu16+u1A==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/spy": "2.1.6",
+				"estree-walker": "^3.0.3",
+				"magic-string": "^0.30.12"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"msw": "^2.4.9",
+				"vite": "^5.0.0 || ^6.0.0"
+			},
+			"peerDependenciesMeta": {
+				"msw": {
+					"optional": true
+				},
+				"vite": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@vitest/mocker/node_modules/@vitest/spy": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.6.tgz",
+			"integrity": "sha512-oTFObV8bd4SDdRka5O+mSh5w9irgx5IetrD5i+OsUUsk/shsBoHifwCzy45SAORzAhtNiprUVaK3hSCCzZh1jQ==",
+			"dev": true,
+			"dependencies": {
+				"tinyspy": "^3.0.2"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/mocker/node_modules/estree-walker": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "^1.0.0"
+			}
+		},
+		"node_modules/@vitest/mocker/node_modules/tinyspy": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+			"integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@vitest/pretty-format": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.6.tgz",
+			"integrity": "sha512-exZyLcEnHgDMKc54TtHca4McV4sKT+NKAe9ix/yhd/qkYb/TP8HTyXRFDijV19qKqTZM0hPL4753zU/U8L/gAA==",
+			"dev": true,
+			"dependencies": {
+				"tinyrainbow": "^1.2.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/runner": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.6.tgz",
+			"integrity": "sha512-SjkRGSFyrA82m5nz7To4CkRSEVWn/rwQISHoia/DB8c6IHIhaE/UNAo+7UfeaeJRE979XceGl00LNkIz09RFsA==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/utils": "2.1.6",
+				"pathe": "^1.1.2"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/runner/node_modules/@vitest/utils": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.6.tgz",
+			"integrity": "sha512-ixNkFy3k4vokOUTU2blIUvOgKq/N2PW8vKIjZZYsGJCMX69MRa9J2sKqX5hY/k5O5Gty3YJChepkqZ3KM9LyIQ==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/pretty-format": "2.1.6",
+				"loupe": "^3.1.2",
+				"tinyrainbow": "^1.2.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/runner/node_modules/loupe": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+			"integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
+			"dev": true
+		},
+		"node_modules/@vitest/snapshot": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.6.tgz",
+			"integrity": "sha512-5JTWHw8iS9l3v4/VSuthCndw1lN/hpPB+mlgn1BUhFbobeIUj1J1V/Bj2t2ovGEmkXLTckFjQddsxS5T6LuVWw==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/pretty-format": "2.1.6",
+				"magic-string": "^0.30.12",
+				"pathe": "^1.1.2"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
 		"node_modules/@vitest/spy": {
 			"version": "1.4.0",
 			"dev": true,
@@ -8633,6 +8749,15 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/cac": {
+			"version": "6.7.14",
+			"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+			"integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/cacheable-lookup": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
@@ -9723,10 +9848,11 @@
 			"license": "MIT"
 		},
 		"node_modules/debug": {
-			"version": "4.3.4",
-			"license": "MIT",
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
 			"dependencies": {
-				"ms": "2.1.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -11063,6 +11189,15 @@
 				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
+		"node_modules/expect-type": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.1.0.tgz",
+			"integrity": "sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/express": {
 			"version": "4.19.2",
 			"resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
@@ -15475,13 +15610,11 @@
 			}
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.8",
-			"license": "MIT",
+			"version": "0.30.14",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
+			"integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
 			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.15"
-			},
-			"engines": {
-				"node": ">=12"
+				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
 		"node_modules/make-dir": {
@@ -17175,8 +17308,9 @@
 			}
 		},
 		"node_modules/ms": {
-			"version": "2.1.2",
-			"license": "MIT"
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
 		},
 		"node_modules/muggle-string": {
 			"version": "0.4.1",
@@ -19982,10 +20116,6 @@
 			"version": "2.0.0",
 			"license": "MIT"
 		},
-		"node_modules/send/node_modules/ms": {
-			"version": "2.1.3",
-			"license": "MIT"
-		},
 		"node_modules/serialize-to-js": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
@@ -20131,6 +20261,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/siginfo": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+			"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+			"dev": true
+		},
 		"node_modules/signal-exit": {
 			"version": "3.0.7",
 			"license": "ISC"
@@ -20345,6 +20481,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/stackback": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+			"integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+			"dev": true
+		},
 		"node_modules/state-local": {
 			"version": "1.0.7",
 			"license": "MIT"
@@ -20356,6 +20498,12 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/std-env": {
+			"version": "3.8.0",
+			"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.8.0.tgz",
+			"integrity": "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==",
+			"dev": true
+		},
 		"node_modules/stdin-discarder": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
@@ -20884,10 +21032,40 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/tinybench": {
+			"version": "2.9.0",
+			"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+			"integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+			"dev": true
+		},
+		"node_modules/tinyexec": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+			"integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+			"dev": true
+		},
+		"node_modules/tinypool": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
+			"integrity": "sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==",
+			"dev": true,
+			"engines": {
+				"node": "^18.0.0 || >=20.0.0"
+			}
+		},
 		"node_modules/tinyqueue": {
 			"version": "2.0.3",
 			"license": "ISC"
 		},
+		"node_modules/tinyrainbow": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+			"integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/tinyspy": {
 			"version": "2.2.1",
 			"dev": true,
@@ -22265,6 +22443,207 @@
 				}
 			}
 		},
+		"node_modules/vite-node": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.6.tgz",
+			"integrity": "sha512-DBfJY0n9JUwnyLxPSSUmEePT21j8JZp/sR9n+/gBwQU6DcQOioPdb8/pibWfXForbirSagZCilseYIwaL3f95A==",
+			"dev": true,
+			"dependencies": {
+				"cac": "^6.7.14",
+				"debug": "^4.3.7",
+				"es-module-lexer": "^1.5.4",
+				"pathe": "^1.1.2",
+				"vite": "^5.0.0 || ^6.0.0"
+			},
+			"bin": {
+				"vite-node": "vite-node.mjs"
+			},
+			"engines": {
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/vite-node/node_modules/es-module-lexer": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
+			"integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
+			"dev": true
+		},
+		"node_modules/vitest": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.6.tgz",
+			"integrity": "sha512-isUCkvPL30J4c5O5hgONeFRsDmlw6kzFEdLQHLezmDdKQHy8Ke/B/dgdTMEgU0vm+iZ0TjW8GuK83DiahBoKWQ==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/expect": "2.1.6",
+				"@vitest/mocker": "2.1.6",
+				"@vitest/pretty-format": "^2.1.6",
+				"@vitest/runner": "2.1.6",
+				"@vitest/snapshot": "2.1.6",
+				"@vitest/spy": "2.1.6",
+				"@vitest/utils": "2.1.6",
+				"chai": "^5.1.2",
+				"debug": "^4.3.7",
+				"expect-type": "^1.1.0",
+				"magic-string": "^0.30.12",
+				"pathe": "^1.1.2",
+				"std-env": "^3.8.0",
+				"tinybench": "^2.9.0",
+				"tinyexec": "^0.3.1",
+				"tinypool": "^1.0.1",
+				"tinyrainbow": "^1.2.0",
+				"vite": "^5.0.0 || ^6.0.0",
+				"vite-node": "2.1.6",
+				"why-is-node-running": "^2.3.0"
+			},
+			"bin": {
+				"vitest": "vitest.mjs"
+			},
+			"engines": {
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"@edge-runtime/vm": "*",
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"@vitest/browser": "2.1.6",
+				"@vitest/ui": "2.1.6",
+				"happy-dom": "*",
+				"jsdom": "*"
+			},
+			"peerDependenciesMeta": {
+				"@edge-runtime/vm": {
+					"optional": true
+				},
+				"@types/node": {
+					"optional": true
+				},
+				"@vitest/browser": {
+					"optional": true
+				},
+				"@vitest/ui": {
+					"optional": true
+				},
+				"happy-dom": {
+					"optional": true
+				},
+				"jsdom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vitest/node_modules/@vitest/expect": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.6.tgz",
+			"integrity": "sha512-9M1UR9CAmrhJOMoSwVnPh2rELPKhYo0m/CSgqw9PyStpxtkwhmdM6XYlXGKeYyERY1N6EIuzkQ7e3Lm1WKCoUg==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/spy": "2.1.6",
+				"@vitest/utils": "2.1.6",
+				"chai": "^5.1.2",
+				"tinyrainbow": "^1.2.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/vitest/node_modules/@vitest/spy": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.6.tgz",
+			"integrity": "sha512-oTFObV8bd4SDdRka5O+mSh5w9irgx5IetrD5i+OsUUsk/shsBoHifwCzy45SAORzAhtNiprUVaK3hSCCzZh1jQ==",
+			"dev": true,
+			"dependencies": {
+				"tinyspy": "^3.0.2"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/vitest/node_modules/@vitest/utils": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.6.tgz",
+			"integrity": "sha512-ixNkFy3k4vokOUTU2blIUvOgKq/N2PW8vKIjZZYsGJCMX69MRa9J2sKqX5hY/k5O5Gty3YJChepkqZ3KM9LyIQ==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/pretty-format": "2.1.6",
+				"loupe": "^3.1.2",
+				"tinyrainbow": "^1.2.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/vitest/node_modules/assertion-error": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+			"integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/vitest/node_modules/chai": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
+			"integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==",
+			"dev": true,
+			"dependencies": {
+				"assertion-error": "^2.0.1",
+				"check-error": "^2.1.1",
+				"deep-eql": "^5.0.1",
+				"loupe": "^3.1.0",
+				"pathval": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/vitest/node_modules/check-error": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+			"integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 16"
+			}
+		},
+		"node_modules/vitest/node_modules/deep-eql": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+			"integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/vitest/node_modules/loupe": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+			"integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
+			"dev": true
+		},
+		"node_modules/vitest/node_modules/pathval": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+			"integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 14.16"
+			}
+		},
+		"node_modules/vitest/node_modules/tinyspy": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+			"integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/vls": {
 			"version": "0.8.5",
 			"dev": true,
@@ -22620,6 +22999,22 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/why-is-node-running": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+			"integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+			"dev": true,
+			"dependencies": {
+				"siginfo": "^2.0.0",
+				"stackback": "0.0.2"
+			},
+			"bin": {
+				"why-is-node-running": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -22946,6 +23341,7 @@
 				"prettier": "3.2.5",
 				"storybook": "8.0.5",
 				"vite": "^5.2.7",
+				"vitest": "^2.1.6",
 				"volar-service-vetur": "*"
 			}
 		},
diff --git a/src/ui/package.json b/src/ui/package.json
index aaffca429..1863cc719 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -13,7 +13,9 @@
 		"custom.build": "vite build --config vite.config.custom.ts",
 		"custom.check": "node tools/custom_check.mjs",
 		"storybook": "storybook dev -p 6006",
-		"storybook.build": "storybook build"
+		"storybook.build": "storybook build",
+		"test": "vitest run",
+		"test.watch": "vitest dev"
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^15.0.2",
@@ -60,6 +62,7 @@
 		"prettier": "3.2.5",
 		"storybook": "8.0.5",
 		"vite": "^5.2.7",
+		"vitest": "^2.1.6",
 		"volar-service-vetur": "*"
 	}
 }
diff --git a/src/ui/src/core/navigation.spec.ts b/src/ui/src/core/navigation.spec.ts
new file mode 100644
index 000000000..87b6701e4
--- /dev/null
+++ b/src/ui/src/core/navigation.spec.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect } from "vitest";
+import {
+	getParsedHash,
+	ParsedHash,
+	serializeParsedHashAsString,
+} from "./navigation";
+
+const sample: { hash: string; parsedHash: ParsedHash }[] = [
+	{
+		hash: "#main/var1=value1&var2=value2",
+		parsedHash: {
+			routeVars: new Map([
+				["var1", "value1"],
+				["var2", "value2"],
+			]),
+			pageKey: "main",
+		},
+	},
+	{
+		hash: "#main",
+		parsedHash: {
+			routeVars: new Map(),
+			pageKey: "main",
+		},
+	},
+	{
+		hash: "#",
+		parsedHash: {
+			routeVars: new Map(),
+			pageKey: undefined,
+		},
+	},
+	{
+		hash: "#/var1=value1&var2=value2",
+		parsedHash: {
+			routeVars: new Map([
+				["var1", "value1"],
+				["var2", "value2"],
+			]),
+			pageKey: undefined,
+		},
+	},
+];
+
+describe(getParsedHash.name, () => {
+	it.each(sample)("should parse $hash", ({ hash, parsedHash }) => {
+		expect(getParsedHash(hash)).toStrictEqual(parsedHash);
+	});
+});
+
+describe(serializeParsedHashAsString.name, () => {
+	it.each(sample)("should serialize $hash", ({ hash, parsedHash }) => {
+		expect(serializeParsedHashAsString(parsedHash)).toStrictEqual(
+			hash.substring(1),
+		);
+	});
+});
diff --git a/src/ui/src/core/navigation.ts b/src/ui/src/core/navigation.ts
index dd9b0dee7..b5177b668 100644
--- a/src/ui/src/core/navigation.ts
+++ b/src/ui/src/core/navigation.ts
@@ -1,46 +1,37 @@
-type ParsedHash = {
+export type ParsedHash = {
 	pageKey?: string;
 	routeVars: Map<string, string>; // Stored as Map to avoid injection e.g. prototype pollution
 };
 
 // Use to communicate with the backend
-type SerializedHash = {
+export type SerializedHash = {
 	pageKey?: string;
 	routeVars: Record<string, string>;
 };
 
 const hashRegex = /^((?<pageKey>[^/]*))?(\/(?<routeVars>.*))?$/;
-const routeVarRegex = /^(?<key>[^=]+)=(?<value>.*)$/;
 
 /**
  * Parses the current URL hash
  *
- * * http://x.x.x.x:5000/#main/var1=value1&var2=value2
- *
- * pageKey: "main"
- * routeVars: { var1: "value1", var2: "value2" }
+ * @example
+ * ```js
+ * getParsedHash('#main/var1=value1&var2=value2')
+ * // => { routeVars: new Map([ ["var1", "value1"], ["var2", "value2"], ]), pageKey: "main" }
+ * ```
  */
-export function getParsedHash(): ParsedHash {
-	const docHash = document.location.hash.substring(1);
+export function getParsedHash(hash = document.location.hash): ParsedHash {
+	const docHash = hash.substring(1);
 	const hashMatchGroups = docHash.match(hashRegex)?.groups;
-	const routeVars: Map<string, string> = new Map();
 	const pageKey = hashMatchGroups?.pageKey
 		? decodeURIComponent(hashMatchGroups.pageKey)
 		: undefined;
 
-	if (!hashMatchGroups) return { pageKey, routeVars };
+	if (!hashMatchGroups) return { pageKey, routeVars: new Map() };
 
-	const routeVarsSegments = hashMatchGroups.routeVars?.split("&") ?? [];
-	routeVarsSegments.forEach((routeVarSegment) => {
-		const matchGroups = routeVarSegment.match(routeVarRegex)?.groups;
-		if (!matchGroups) return;
-		const { key, value } = matchGroups;
-		const decodedKey = decodeURIComponent(key);
-		const decodedValue = decodeURIComponent(value);
-		routeVars.set(decodedKey, decodedValue);
-	});
+	const params = new URLSearchParams(hashMatchGroups.routeVars);
 
-	return { pageKey, routeVars };
+	return { pageKey, routeVars: new Map(params.entries()) };
 }
 
 /**
@@ -60,7 +51,7 @@ export function serializeParsedHash(): SerializedHash {
 	return { pageKey: parsedHash.pageKey, routeVars };
 }
 
-function setHash(parsedHash: ParsedHash) {
+export function serializeParsedHashAsString(parsedHash: ParsedHash) {
 	const { pageKey, routeVars } = parsedHash;
 
 	let hash = "";
@@ -68,21 +59,15 @@ function setHash(parsedHash: ParsedHash) {
 		hash += `${encodeURIComponent(pageKey)}`;
 	}
 
-	if (routeVars.keys.length > 0) {
-		hash += "/";
-		hash += Array.from(routeVars.entries())
-			.map(([key, value]) => {
-				// Vars set to null are excluded from the hash
-
-				if (value === null) return null;
-				return `${encodeURIComponent(key)}=${encodeURIComponent(
-					value,
-				)}`;
-			})
-			.filter((segment) => segment)
-			.join("&");
+	if (routeVars.size > 0) {
+		const params = new URLSearchParams([...routeVars.entries()]);
+		hash += `/${params.toString()}`;
 	}
-	document.location.hash = hash;
+	return hash;
+}
+
+function setHash(parsedHash: ParsedHash) {
+	document.location.hash = serializeParsedHashAsString(parsedHash);
 }
 
 export function changePageInHash(targetPageKey: string) {