diff --git a/.forgejo/workflows/publish-docker.yml b/.forgejo/workflows/publish-docker.yml
index 36cdc3e..7c73d42 100644
--- a/.forgejo/workflows/publish-docker.yml
+++ b/.forgejo/workflows/publish-docker.yml
@@ -84,6 +84,10 @@ jobs:
         working-directory: client
         run: npm run typecheck
 
+      - name: Client - lancer les tests
+        working-directory: client
+        run: npm test
+
       - name: Client - build
         working-directory: client
         run: npm run build
diff --git a/client/build.mjs b/client/build.mjs
index 05b4880..fae877e 100644
--- a/client/build.mjs
+++ b/client/build.mjs
@@ -36,7 +36,7 @@ const buildOptions = {
 	outfile: path.join(outdir, 'app.js'),
 	bundle: true,
 	format: 'esm',
-	target: 'es2020',
+	target: 'es2022',
 	sourcemap: true,
 	// Chaque vue importe son propre gabarit comme chaîne brute (`import html
 	// from './Vue.html'` - voir global.d.ts) et son propre style Sass ; les
diff --git a/client/package-lock.json b/client/package-lock.json
index f62b51a..e7deb0c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,7 +10,8 @@
 			"devDependencies": {
 				"esbuild": "^0.28.2",
 				"sass": "^1.83.4",
-				"typescript": "^5.7.3"
+				"typescript": "^5.7.3",
+				"vitest": "^5.0.1"
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
@@ -455,6 +456,52 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+			"integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
+			}
+		},
+		"node_modules/@napi-rs/lzma-linux-x64-gnu": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+			"integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": "^22.20 || ^24.12 || >=25"
+			}
+		},
 		"node_modules/@parcel/watcher": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz",
@@ -743,6 +790,464 @@
 				"url": "https://opencollective.com/parcel"
 			}
 		},
+		"node_modules/@rollup/rollup-android-arm-eabi": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.63.3.tgz",
+			"integrity": "sha512-w3Jnvi1ocaVm/c7yVPpfB98XeSRBMyzp6njL5MVVbGyXjpmUkN+s6Hp4t0PqhGCCaI1ZHMKXt/w0lA1RCaLVcw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-android-arm64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.63.3.tgz",
+			"integrity": "sha512-uI/ESiaIbbRYAEhzy8PCUWDp1hB0bjAqM06mW9flOoNO4Q8DQpeoREhBR5Hegfl+wpXiguyJv6XSPzEN7OxyHQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-darwin-arm64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.63.3.tgz",
+			"integrity": "sha512-oxhrd1jmXLwWZ83eQYDXxuqRdkqkzrjR3JobKeuUyfdNZo11FuQIvqEOZhyIT7OBHxXoGslDDjN0cQcM6T0TqQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-darwin-x64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.63.3.tgz",
+			"integrity": "sha512-7/YiIMghVE8DrxKvNdorAaJVdriOFgOIpdStnPx8ppx5zfTwC3jBCSEAIzB7JD5404m65THl6H93UTTVUvypmg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-freebsd-arm64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.63.3.tgz",
+			"integrity": "sha512-GXFZRRoMAytaI5z6N3Zhfw0WL18Q0M8r95D5hlC4GqE/lGk8pbSJNUBoOWDfbm6dTciqHj2nU87tI5f6XhQiOg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-freebsd-x64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.63.3.tgz",
+			"integrity": "sha512-77W+8X3ddYgPxUpB8nZFQs2Mq+wc4HVlcSRtApXLjYBcnPMkttrSnU8VwKQjeWYhMsITHFs5cWBQ8vz1Q+5RHQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.63.3.tgz",
+			"integrity": "sha512-FVkwK+iUC+mq+GipVK46rRVticfAPtvPUNlqlGXUDxdVk/UGjQiiiUVPUrEXdSpU2ufU0XxLGyTqDtBidDOVmg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.63.3.tgz",
+			"integrity": "sha512-+aGU1t3398yQOVj1Bz8o3e+KtswxAPvO+mtxtNdfXYMkXIHu7XhhkCD7/DEH9q8tF8uhDnMWvfpUKI8y1sZJsg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-arm64-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.63.3.tgz",
+			"integrity": "sha512-cR0kjpRXR2KJ2oQK8E2KTPtphs+b9hZ8IhTZubNryt/RsqgdOZBQ2Zq0q5UedtiIi0rs3jVhJh55RE1ZHUVGUA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-arm64-musl": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.63.3.tgz",
+			"integrity": "sha512-y1RYi4Q3/9ByVWSSt9kX2ustE0B7kFYbJ6zZdVZVyqopZs3yhCTwRfrjIX4vezUJInma/Gs6BOFDJg7yZmJ0IQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-loong64-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.63.3.tgz",
+			"integrity": "sha512-DNhEA5viIj3Z5bZLE4z4oV8N5ozWqDwyt7T6KG7VdLDJ0nW+rNOYlphBl4/3HQkK75qipPLsVOfStHHOwN9WSg==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-loong64-musl": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.63.3.tgz",
+			"integrity": "sha512-17gQCqrIpXBX2Cmi9/TygnVOqGbzsba/iaqcYSL8FY7lNugg+7AiYNs5c5nKWD+NRQha36Sa0CqkJqH4XVHwnQ==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.63.3.tgz",
+			"integrity": "sha512-6LwVnZRIyINpdku/yOcI8Tm9YqLmhHK5emmlOOnW9tO0SYEm1FmKPcsSAGp0NBlqR2P04xaND4jvN6sTHqhq8A==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-musl": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.63.3.tgz",
+			"integrity": "sha512-xMUqkTXlEUtI/p5AAukMwBRr1enU3efsTeF+bskeFfk8t1C9rcC8sLREcZXmTfAXEbvRdJVSonVJez3TMlbR3w==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.63.3.tgz",
+			"integrity": "sha512-S3E94co9F9WRRqEaUoQZ38K1gCz6KiM+nL7/3ijq7fDGF3OznjS5TasgYITlvl27GQKtu4lOAOsr5MFwkijvOA==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-musl": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.63.3.tgz",
+			"integrity": "sha512-1QtRDwG42x5BJI3s9mxu5rEjDnfbSnk20HQ9/ylTAYnSwYwxMVb+Vgu34wzzTQ7ogqBybebgQNUDAvZVQ38DbA==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-s390x-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.63.3.tgz",
+			"integrity": "sha512-BQhejF6ZXOpxbngiNTP12GCGQeaDVL2QXGeBVViKIYzFHM5RKxTxwUMB1fr1BeNFphFMpnRqC5QSXFSa4z6UQw==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-x64-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.63.3.tgz",
+			"integrity": "sha512-SXagRwnI2Wlwlitllu59UK/nGVbD1CKPcNqDplHwIC4BqJcpXFjD32d1R/RbuISa95HdQrZM3/7v4bKiowFaLA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-linux-x64-musl": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.63.3.tgz",
+			"integrity": "sha512-2IPozoEALRCziGqE8O9KMK60PMu5TS1huv4fwoeCexj+WjmcwFtX9CTOVbfXCUqcELAubEwRFPYlzb/WvwY2HQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-openbsd-x64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.63.3.tgz",
+			"integrity": "sha512-AoxqosUHT9IX54hFn2TiN6A7d6ZKTtE6pd2bqWtqkkNJ6HJGaU6FRouGX8L1O7R/ZwsnCnpQrHzb4pDEx+UHRQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-openharmony-arm64": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.63.3.tgz",
+			"integrity": "sha512-d+CaftKgmkFBzCwezMqqy1d0QNNYugqLCMcYVQWBy5SS2YfeMP8Q8ripkgx9O8IyBXXLHrJ+aaCV4U96usv6Yg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-win32-arm64-msvc": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.63.3.tgz",
+			"integrity": "sha512-xXlDF6nR1eOuXbdDy5Hl5fmtY7teUDevF/k0O7IPoZe4Tpmdv+lgdE5JRsnhQtt37ql9P0VF2kAN9a0OCZdo+Q==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-win32-ia32-msvc": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.63.3.tgz",
+			"integrity": "sha512-YtXAgLN+JP7Ay6qG3eWhc7IHMQPzLc8r3uvhAvlJIoCz/4Q32+Bl9Fmnywidh8v1GOIMmymjovfqY9ETAtysvA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-win32-x64-gnu": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.63.3.tgz",
+			"integrity": "sha512-WuWtSJRNo549vzcfZyEgfqb6zeSgn1F+UE5kQ+BCjzz0W4MGCjntUHkZVc1VRuAM7+ULaSyhiPxD1spyewFvkQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true
+		},
+		"node_modules/@rollup/rollup-win32-x64-msvc": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.63.3.tgz",
+			"integrity": "sha512-+lIKX7O0+IGe7WuhATaAMMeT7B76vfhXH/l9wLQL+nvyhbw2ohYCKIdWL56JfDu75CWt5oKRP4QFH/jkMtBquA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true
+		},
+		"node_modules/@types/chai": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+			"integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/deep-eql": "*",
+				"assertion-error": "^2.0.1"
+			}
+		},
+		"node_modules/@types/deep-eql": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+			"integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/estree": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+			"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@vitest/mocker": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-5.0.1.tgz",
+			"integrity": "sha512-6K1DoBNAPGvuOcSsGA4D6x+5zEEff/KmOOP3uetT2TrGpVfI+HRHRnJJfKi5ib/g1vx8IYHQD8s0pbJz8WQI7Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "0.3.31",
+				"@vitest/spy": "5.0.1",
+				"estree-walker": "^3.0.3",
+				"magic-string": "^1.2.3"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"msw": "^2.4.9",
+				"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"msw": {
+					"optional": true
+				},
+				"vite": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@vitest/spy": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-5.0.1.tgz",
+			"integrity": "sha512-rbto/mF/SGERxEgYOek7Xm6B9b+y+mVoo+f4b2LymYO8zM1b7uB5nHuhVMTP2hxdzgxvGiZYGxGIaMvL5y180Q==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://opencollective.com/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,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/chai": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+			"integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -770,6 +1275,13 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/es-module-lexer": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+			"integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/esbuild": {
 			"version": "0.28.2",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
@@ -812,6 +1324,60 @@
 				"@esbuild/win32-x64": "0.28.2"
 			}
 		},
+		"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,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.0"
+			}
+		},
+		"node_modules/expect-type": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+			"integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"peer": true,
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
 		"node_modules/immutable": {
 			"version": "5.1.9",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
@@ -844,6 +1410,36 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/magic-string": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.1.tgz",
+			"integrity": "sha512-8lyCu36ErXR0J9uaGKlKQoiLZKmtI63YGLE8G2o9jyRPdr4X47LusSOwgOJOzcVtp81fTAAjxR7BwKz682Jhow==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.6.0"
+			}
+		},
+		"node_modules/nanoid": {
+			"version": "3.3.19",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+			"integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
 		"node_modules/node-addon-api": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -852,13 +1448,34 @@
 			"license": "MIT",
 			"optional": true
 		},
+		"node_modules/obug": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/obug/-/obug-2.2.1.tgz",
+			"integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/sxzz",
+				"https://opencollective.com/debug"
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/picocolors": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"dev": true,
+			"license": "ISC",
+			"peer": true
+		},
 		"node_modules/picomatch": {
 			"version": "4.0.7",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
 			"integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
 			"dev": true,
 			"license": "MIT",
-			"optional": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -866,6 +1483,36 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/postcss": {
+			"version": "8.5.28",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+			"integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"nanoid": "^3.3.18",
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
@@ -880,6 +1527,53 @@
 				"url": "https://paulmillr.com/funding/"
 			}
 		},
+		"node_modules/rollup": {
+			"version": "4.63.3",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.63.3.tgz",
+			"integrity": "sha512-1i2XreiAoMMXuPGD6Msj2xWrMMkHojNRKivInxGQcg7/1KuPuYlfUutLyh4drnOxUTHX9cHI4wFoat8D/NKaBw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@types/estree": "1.0.9"
+			},
+			"bin": {
+				"rollup": "dist/bin/rollup"
+			},
+			"engines": {
+				"node": ">=18.0.0",
+				"npm": ">=8.0.0"
+			},
+			"optionalDependencies": {
+				"@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+				"@rollup/rollup-android-arm-eabi": "4.63.3",
+				"@rollup/rollup-android-arm64": "4.63.3",
+				"@rollup/rollup-darwin-arm64": "4.63.3",
+				"@rollup/rollup-darwin-x64": "4.63.3",
+				"@rollup/rollup-freebsd-arm64": "4.63.3",
+				"@rollup/rollup-freebsd-x64": "4.63.3",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.63.3",
+				"@rollup/rollup-linux-arm-musleabihf": "4.63.3",
+				"@rollup/rollup-linux-arm64-gnu": "4.63.3",
+				"@rollup/rollup-linux-arm64-musl": "4.63.3",
+				"@rollup/rollup-linux-loong64-gnu": "4.63.3",
+				"@rollup/rollup-linux-loong64-musl": "4.63.3",
+				"@rollup/rollup-linux-ppc64-gnu": "4.63.3",
+				"@rollup/rollup-linux-ppc64-musl": "4.63.3",
+				"@rollup/rollup-linux-riscv64-gnu": "4.63.3",
+				"@rollup/rollup-linux-riscv64-musl": "4.63.3",
+				"@rollup/rollup-linux-s390x-gnu": "4.63.3",
+				"@rollup/rollup-linux-x64-gnu": "4.63.3",
+				"@rollup/rollup-linux-x64-musl": "4.63.3",
+				"@rollup/rollup-openbsd-x64": "4.63.3",
+				"@rollup/rollup-openharmony-arm64": "4.63.3",
+				"@rollup/rollup-win32-arm64-msvc": "4.63.3",
+				"@rollup/rollup-win32-ia32-msvc": "4.63.3",
+				"@rollup/rollup-win32-x64-gnu": "4.63.3",
+				"@rollup/rollup-win32-x64-msvc": "4.63.3",
+				"fsevents": "~2.3.2"
+			}
+		},
 		"node_modules/sass": {
 			"version": "1.104.1",
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.104.1.tgz",
@@ -901,6 +1595,13 @@
 				"@parcel/watcher": "^2.4.1"
 			}
 		},
+		"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,
+			"license": "ISC"
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -911,6 +1612,57 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"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,
+			"license": "MIT"
+		},
+		"node_modules/std-env": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+			"integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tinybench": {
+			"version": "6.1.4",
+			"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-6.1.4.tgz",
+			"integrity": "sha512-9APumHG7r4yOk4X4WlkmE71aZcv1gvin1czO3OQ1U9iJcFA5Ja/ygyb0vPOVHTthFozUYs8CLoLUlM8grb2lTQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
+		"node_modules/tinyexec": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
+			"integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.17",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+			"integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "5.9.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -924,6 +1676,693 @@
 			"engines": {
 				"node": ">=14.17"
 			}
+		},
+		"node_modules/vite": {
+			"version": "6.4.3",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
+			"integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
+				"postcss": "^8.5.3",
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
+			},
+			"bin": {
+				"vite": "bin/vite.js"
+			},
+			"engines": {
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/vitejs/vite?sponsor=1"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			},
+			"peerDependencies": {
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"jiti": ">=1.21.0",
+				"less": "*",
+				"lightningcss": "^1.21.0",
+				"sass": "*",
+				"sass-embedded": "*",
+				"stylus": "*",
+				"sugarss": "*",
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				},
+				"jiti": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"lightningcss": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"sass-embedded": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"terser": {
+					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+			"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/android-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+			"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/android-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+			"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/android-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+			"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+			"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/darwin-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+			"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+			"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+			"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+			"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+			"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-loong64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+			"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+			"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+			"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+			"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-s390x": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+			"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/linux-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+			"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+			"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/sunos-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+			"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/win32-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+			"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/win32-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+			"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/@esbuild/win32-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+			"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"peer": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vite/node_modules/esbuild": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+			"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"peer": true,
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.25.12",
+				"@esbuild/android-arm": "0.25.12",
+				"@esbuild/android-arm64": "0.25.12",
+				"@esbuild/android-x64": "0.25.12",
+				"@esbuild/darwin-arm64": "0.25.12",
+				"@esbuild/darwin-x64": "0.25.12",
+				"@esbuild/freebsd-arm64": "0.25.12",
+				"@esbuild/freebsd-x64": "0.25.12",
+				"@esbuild/linux-arm": "0.25.12",
+				"@esbuild/linux-arm64": "0.25.12",
+				"@esbuild/linux-ia32": "0.25.12",
+				"@esbuild/linux-loong64": "0.25.12",
+				"@esbuild/linux-mips64el": "0.25.12",
+				"@esbuild/linux-ppc64": "0.25.12",
+				"@esbuild/linux-riscv64": "0.25.12",
+				"@esbuild/linux-s390x": "0.25.12",
+				"@esbuild/linux-x64": "0.25.12",
+				"@esbuild/netbsd-arm64": "0.25.12",
+				"@esbuild/netbsd-x64": "0.25.12",
+				"@esbuild/openbsd-arm64": "0.25.12",
+				"@esbuild/openbsd-x64": "0.25.12",
+				"@esbuild/openharmony-arm64": "0.25.12",
+				"@esbuild/sunos-x64": "0.25.12",
+				"@esbuild/win32-arm64": "0.25.12",
+				"@esbuild/win32-ia32": "0.25.12",
+				"@esbuild/win32-x64": "0.25.12"
+			}
+		},
+		"node_modules/vitest": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-5.0.1.tgz",
+			"integrity": "sha512-iA95lQbKEkvrtTkdAgnWbXfbipWiiWe/hDl2P5tMi6WFwD76G0NxXAGp/M9EOcYupeGJRr6wppMc7CoA41TQjg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/chai": "^5.2.2",
+				"@vitest/mocker": "5.0.1",
+				"chai": "^6.2.2",
+				"es-module-lexer": "^2.3.2",
+				"expect-type": "^1.4.0",
+				"magic-string": "^1.2.3",
+				"obug": "^2.1.4",
+				"picomatch": "^4.0.7",
+				"std-env": "^4.2.0",
+				"tinybench": "6.1.4",
+				"tinyexec": "1.3.0",
+				"tinyglobby": "^0.2.17",
+				"why-is-node-running": "^2.3.0"
+			},
+			"bin": {
+				"vitest": "vitest.mjs"
+			},
+			"engines": {
+				"node": "^22.12.0 || ^24.0.0 || >=26.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"@edge-runtime/vm": "*",
+				"@opentelemetry/api": "^1.9.0",
+				"@types/node": "^22.0.0 || >=24.0.0",
+				"@vitest/browser-playwright": "5.0.1",
+				"@vitest/browser-preview": "5.0.1",
+				"@vitest/browser-webdriverio": "^5.0.0-beta.5 || >=5.0.0",
+				"@vitest/coverage-istanbul": "5.0.1",
+				"@vitest/coverage-v8": "5.0.1",
+				"@vitest/ui": "5.0.1",
+				"happy-dom": "*",
+				"jsdom": "*",
+				"vite": "^6.4.0 || ^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@edge-runtime/vm": {
+					"optional": true
+				},
+				"@opentelemetry/api": {
+					"optional": true
+				},
+				"@types/node": {
+					"optional": true
+				},
+				"@vitest/browser-playwright": {
+					"optional": true
+				},
+				"@vitest/browser-preview": {
+					"optional": true
+				},
+				"@vitest/browser-webdriverio": {
+					"optional": true
+				},
+				"@vitest/coverage-istanbul": {
+					"optional": true
+				},
+				"@vitest/coverage-v8": {
+					"optional": true
+				},
+				"@vitest/ui": {
+					"optional": true
+				},
+				"happy-dom": {
+					"optional": true
+				},
+				"jsdom": {
+					"optional": true
+				},
+				"vite": {
+					"optional": false
+				}
+			}
+		},
+		"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,
+			"license": "MIT",
+			"dependencies": {
+				"siginfo": "^2.0.0",
+				"stackback": "0.0.2"
+			},
+			"bin": {
+				"why-is-node-running": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		}
 	}
 }
diff --git a/client/package.json b/client/package.json
index 985ee4e..58147b1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -5,11 +5,13 @@
 	"scripts": {
 		"build": "node build.mjs",
 		"watch": "node build.mjs --watch",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsc --noEmit",
+		"test": "vitest run"
 	},
 	"devDependencies": {
 		"esbuild": "^0.28.2",
 		"sass": "^1.83.4",
-		"typescript": "^5.7.3"
+		"typescript": "^5.7.3",
+		"vitest": "^5.0.1"
 	}
 }
diff --git a/client/src/api/channelApi.ts b/client/src/api/channelApi.ts
new file mode 100644
index 0000000..558703a
--- /dev/null
+++ b/client/src/api/channelApi.ts
@@ -0,0 +1,63 @@
+/** Vidéo/stream listé depuis une chaîne (miroir du DTO serveur). */
+export interface ChannelVideoDto {
+	/** Identifiant YouTube de la vidéo. */
+	id: string;
+	/** Titre de la vidéo. */
+	title: string;
+	/** URL complète de la vidéo. */
+	url: string;
+	/** URL de la miniature, si connue. */
+	thumbnailUrl: string | null;
+	/** Durée en secondes, si connue. */
+	durationSeconds: number | null;
+	/** Date de mise en ligne au format `YYYYMMDD`, si connue. */
+	uploadDate: string | null;
+}
+
+/** Section d'une chaîne YouTube à parcourir. */
+export type ChannelSection = 'videos' | 'streams';
+
+/**
+ * Interroge `GET /api/channel` pour lister les vidéos/streams d'une chaîne.
+ *
+ * @param channel - Handle (`@nom`) ou URL de la chaîne à parcourir.
+ * @param section - Section à parcourir.
+ * @param keywords - Mots-clés séparés par des virgules (optionnel).
+ * @returns La liste des vidéos correspondantes.
+ * @throws {Error} Si la requête échoue ou si le serveur répond une erreur.
+ */
+export async function searchChannel(
+	channel: string,
+	section: ChannelSection,
+	keywords: string,
+): Promise<ChannelVideoDto[]> {
+	const params = new URLSearchParams({ channel, section });
+	if (keywords.trim().length > 0) {
+		params.set('keywords', keywords.trim());
+	}
+
+	let response: Response;
+	try {
+		response = await fetch(`/api/channel?${params.toString()}`);
+	} catch (error) {
+		throw new Error('Impossible de contacter le serveur.', { cause: error });
+	}
+
+	if (!response.ok) {
+		let message = `Échec de la recherche (${response.status}).`;
+		try {
+			const body = (await response.json()) as { error?: string };
+			message = body.error ?? message;
+		} catch {
+			// Réponse d'erreur sans JSON exploitable : on garde le message par défaut.
+		}
+		throw new Error(message);
+	}
+
+	try {
+		const body = (await response.json()) as { videos: ChannelVideoDto[] };
+		return body.videos;
+	} catch (error) {
+		throw new Error('Réponse du serveur invalide.', { cause: error });
+	}
+}
diff --git a/client/src/api/queueApi.ts b/client/src/api/queueApi.ts
new file mode 100644
index 0000000..d841432
--- /dev/null
+++ b/client/src/api/queueApi.ts
@@ -0,0 +1,137 @@
+/** État d'avancement d'un élément de la file d'attente (miroir du DTO serveur). */
+export type QueueItemStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+
+/** Mode de téléchargement d'un élément (miroir du DTO serveur). */
+export type QueueItemMode =
+	| { kind: 'video'; options: { subtitles: boolean; embedThumbnail: boolean } }
+	| { kind: 'audio'; format: 'mp3' | 'm4a' | 'opus' }
+	| { kind: 'thumbnail' };
+
+/** Élément de la file d'attente, tel que renvoyé par le serveur. */
+export interface QueueItemDto {
+	id: string;
+	url: string;
+	title: string | null;
+	mode: QueueItemMode;
+	status: QueueItemStatus;
+	progress: number;
+	error: string | null;
+	fileName: string | null;
+	createdAt: string;
+}
+
+/** Entrée acceptée par {@link enqueueItem} pour choisir le mode et ses options. */
+export type EnqueueMode =
+	| { mode: 'video'; subtitles: boolean; embedThumbnail: boolean }
+	| { mode: 'audio'; audioFormat: 'mp3' | 'm4a' | 'opus' }
+	| { mode: 'thumbnail' };
+
+/**
+ * Extrait le message d'erreur d'une réponse HTTP en échec, avec un message
+ * de repli si le corps n'est pas un JSON exploitable.
+ *
+ * @param response - Réponse HTTP dont le statut n'est pas OK.
+ * @returns Le message d'erreur à afficher.
+ */
+async function readErrorMessage(response: Response): Promise<string> {
+	try {
+		const body = (await response.json()) as { error?: string };
+		return body.error ?? `Échec de la requête (${response.status}).`;
+	} catch {
+		return `Échec de la requête (${response.status}).`;
+	}
+}
+
+/**
+ * Ajoute un élément à la file d'attente via `POST /api/queue`.
+ *
+ * @param url - URL de la vidéo YouTube à télécharger.
+ * @param mode - Mode de téléchargement et ses options.
+ * @param title - Titre connu de la vidéo, s'il y en a un (affichage uniquement).
+ * @returns L'élément créé.
+ * @throws {Error} Si la requête échoue ou si le serveur refuse l'ajout.
+ */
+export async function enqueueItem(
+	url: string,
+	mode: EnqueueMode,
+	title: string | null,
+): Promise<QueueItemDto> {
+	let response: Response;
+	try {
+		response = await fetch('/api/queue', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ url, title: title ?? undefined, ...mode }),
+		});
+	} catch (error) {
+		throw new Error('Impossible de contacter le serveur.', { cause: error });
+	}
+
+	if (!response.ok) {
+		throw new Error(await readErrorMessage(response));
+	}
+
+	try {
+		const body = (await response.json()) as { item: QueueItemDto };
+		return body.item;
+	} catch (error) {
+		throw new Error('Réponse du serveur invalide.', { cause: error });
+	}
+}
+
+/**
+ * Liste tous les éléments de la file d'attente via `GET /api/queue`.
+ *
+ * @returns Les éléments de la file, dans leur ordre d'ajout.
+ * @throws {Error} Si la requête échoue.
+ */
+export async function listQueueItems(): Promise<QueueItemDto[]> {
+	let response: Response;
+	try {
+		response = await fetch('/api/queue');
+	} catch (error) {
+		throw new Error('Impossible de contacter le serveur.', { cause: error });
+	}
+
+	if (!response.ok) {
+		throw new Error(await readErrorMessage(response));
+	}
+
+	try {
+		const body = (await response.json()) as { items: QueueItemDto[] };
+		return body.items;
+	} catch (error) {
+		throw new Error('Réponse du serveur invalide.', { cause: error });
+	}
+}
+
+/**
+ * Annule un élément de la file d'attente via `DELETE /api/queue/:id`.
+ *
+ * @param id - Identifiant de l'élément à annuler.
+ * @throws {Error} Si la requête échoue ou si l'élément est introuvable.
+ */
+export async function cancelQueueItem(id: string): Promise<void> {
+	let response: Response;
+	try {
+		response = await fetch(`/api/queue/${encodeURIComponent(id)}`, { method: 'DELETE' });
+	} catch (error) {
+		throw new Error('Impossible de contacter le serveur.', { cause: error });
+	}
+
+	if (!response.ok && response.status !== 204) {
+		throw new Error(await readErrorMessage(response));
+	}
+}
+
+/**
+ * Construit l'URL de téléchargement du fichier produit par un élément
+ * terminé (`GET /api/queue/:id/file`) — destinée à un lien `<a>`, pas à un
+ * appel `fetch` : c'est le navigateur qui doit gérer le téléchargement.
+ *
+ * @param id - Identifiant de l'élément terminé.
+ * @returns L'URL à utiliser comme `href`.
+ */
+export function queueItemFileUrl(id: string): string {
+	return `/api/queue/${encodeURIComponent(id)}/file`;
+}
diff --git a/client/src/app.ts b/client/src/app.ts
index 0fa4d90..825b10b 100644
--- a/client/src/app.ts
+++ b/client/src/app.ts
@@ -1,15 +1,21 @@
 import { mountShell } from './shell/Shell';
+import { mountDownloadForm } from './views/downloadForm/DownloadForm';
+import { mountQueuePanel } from './views/queuePanel/QueuePanel';
 
 /**
- * Point d'entrée du client : récupère l'élément racine et y monte le shell
- * initial de l'application.
+ * Point d'entrée du client : monte le shell puis les deux vues qu'il
+ * héberge (formulaire d'ajout et panneau de file d'attente), et les relie
+ * entre elles (un ajout réussi rafraîchit immédiatement la file).
  */
 function main(): void {
 	const root = document.getElementById('app');
 	if (!root) {
 		throw new Error("Élément racine '#app' introuvable dans le document.");
 	}
-	mountShell(root);
+
+	const { downloadFormRoot, queuePanelRoot } = mountShell(root);
+	const queuePanel = mountQueuePanel(queuePanelRoot);
+	mountDownloadForm(downloadFormRoot, { onItemQueued: () => queuePanel.refresh() });
 }
 
 main();
diff --git a/client/src/format.ts b/client/src/format.ts
new file mode 100644
index 0000000..6071820
--- /dev/null
+++ b/client/src/format.ts
@@ -0,0 +1,37 @@
+/**
+ * Formate une durée en secondes au format `m:ss` (ou `h:mm:ss` au-delà d'une heure).
+ *
+ * @param seconds - Durée en secondes, ou `null` si inconnue.
+ * @returns La durée formatée, ou une chaîne vide si inconnue.
+ */
+export function formatDuration(seconds: number | null): string {
+	if (seconds === null || !Number.isFinite(seconds)) {
+		return '';
+	}
+	const totalSeconds = Math.max(0, Math.round(seconds));
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+	const secs = totalSeconds % 60;
+
+	if (hours > 0) {
+		return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+	}
+	return `${minutes}:${String(secs).padStart(2, '0')}`;
+}
+
+/**
+ * Formate une date de mise en ligne au format `YYYYMMDD` (tel que renvoyé
+ * par yt-dlp) en `JJ/MM/AAAA`.
+ *
+ * @param uploadDate - Date au format `YYYYMMDD`, ou `null` si inconnue.
+ * @returns La date formatée, ou une chaîne vide si inconnue ou mal formée.
+ */
+export function formatUploadDate(uploadDate: string | null): string {
+	if (!uploadDate || !/^\d{8}$/.test(uploadDate)) {
+		return '';
+	}
+	const year = uploadDate.slice(0, 4);
+	const month = uploadDate.slice(4, 6);
+	const day = uploadDate.slice(6, 8);
+	return `${day}/${month}/${year}`;
+}
diff --git a/client/src/shell/Shell.html b/client/src/shell/Shell.html
index 580dc0e..f95df64 100644
--- a/client/src/shell/Shell.html
+++ b/client/src/shell/Shell.html
@@ -1,4 +1,9 @@
 <div class="shell">
-	<h1>youtubeDownloader</h1>
-	<p>L'interface arrive bientôt — pour l'instant, seul le serveur est en place.</p>
+	<header class="shell__header">
+		<h1>youtubeDownloader</h1>
+	</header>
+	<main class="shell__main">
+		<section class="shell__panel" id="download-form"></section>
+		<section class="shell__panel" id="queue-panel"></section>
+	</main>
 </div>
diff --git a/client/src/shell/Shell.scss b/client/src/shell/Shell.scss
index c0930b0..43f0f06 100644
--- a/client/src/shell/Shell.scss
+++ b/client/src/shell/Shell.scss
@@ -1,19 +1,41 @@
 .shell {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
+	min-height: 100vh;
 	margin: 0;
 	font-family: system-ui, sans-serif;
-	text-align: center;
+	color: #222;
 
-	h1 {
-		font-size: 1.5rem;
-		margin-bottom: 0.5rem;
+	&__header {
+		padding: 1rem 1.5rem;
+		border-bottom: 1px solid #eee;
+
+		h1 {
+			font-size: 1.25rem;
+			margin: 0;
+		}
 	}
 
-	p {
-		color: #666;
+	&__main {
+		flex: 1;
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 1.5rem;
+		padding: 1.5rem;
+		max-width: 960px;
+		margin: 0 auto;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	@media (min-width: 800px) {
+		&__main {
+			grid-template-columns: 3fr 2fr;
+			align-items: start;
+		}
+	}
+
+	&__panel {
+		min-width: 0;
 	}
 }
diff --git a/client/src/shell/Shell.ts b/client/src/shell/Shell.ts
index 8f02ad4..9bc801c 100644
--- a/client/src/shell/Shell.ts
+++ b/client/src/shell/Shell.ts
@@ -1,11 +1,29 @@
 import shellTemplate from './Shell.html';
 import './Shell.scss';
 
+/** Points de montage exposés par le shell pour les vues qu'il héberge. */
+export interface ShellMounts {
+	/** Racine du formulaire d'ajout (URL directe + recherche de chaîne). */
+	downloadFormRoot: HTMLElement;
+	/** Racine du panneau de file d'attente. */
+	queuePanelRoot: HTMLElement;
+}
+
 /**
  * Monte la coquille (shell) de l'application dans l'élément racine fourni.
  *
  * @param root - Élément DOM dans lequel injecter le gabarit du shell.
+ * @returns Les points de montage des vues hébergées par le shell.
+ * @throws {Error} Si le gabarit ne contient pas les points de montage attendus.
  */
-export function mountShell(root: HTMLElement): void {
+export function mountShell(root: HTMLElement): ShellMounts {
 	root.innerHTML = shellTemplate;
+
+	const downloadFormRoot = root.querySelector<HTMLElement>('#download-form');
+	const queuePanelRoot = root.querySelector<HTMLElement>('#queue-panel');
+	if (!downloadFormRoot || !queuePanelRoot) {
+		throw new Error('Gabarit du shell invalide : points de montage introuvables.');
+	}
+
+	return { downloadFormRoot, queuePanelRoot };
 }
diff --git a/client/src/views/downloadForm/DownloadForm.html b/client/src/views/downloadForm/DownloadForm.html
new file mode 100644
index 0000000..461c838
--- /dev/null
+++ b/client/src/views/downloadForm/DownloadForm.html
@@ -0,0 +1,59 @@
+<div class="download-form">
+	<h2>Ajouter des vidéos</h2>
+
+	<fieldset class="download-form__mode">
+		<legend>Mode</legend>
+		<label><input type="radio" name="mode" value="video" checked /> Vidéo</label>
+		<label><input type="radio" name="mode" value="audio" /> Audio</label>
+		<label><input type="radio" name="mode" value="thumbnail" /> Miniature seule</label>
+	</fieldset>
+
+	<div class="download-form__options" data-mode-options="video">
+		<label><input type="checkbox" data-field="subtitles" /> Sous-titres (fr/en)</label>
+		<label><input type="checkbox" data-field="embedThumbnail" /> Miniature embarquée</label>
+	</div>
+	<div class="download-form__options" data-mode-options="audio" hidden>
+		<label>
+			Format
+			<select data-field="audioFormat">
+				<option value="mp3">MP3</option>
+				<option value="m4a">M4A</option>
+				<option value="opus">Opus</option>
+			</select>
+		</label>
+	</div>
+
+	<form class="download-form__form" data-form="url">
+		<label class="download-form__field">
+			URL directe
+			<input type="url" name="url" placeholder="https://www.youtube.com/watch?v=..." required />
+		</label>
+		<button type="submit">Ajouter à la file</button>
+	</form>
+	<p class="download-form__error" data-role="url-error" hidden></p>
+
+	<hr />
+
+	<form class="download-form__form" data-form="channel">
+		<label class="download-form__field">
+			Chaîne (@handle ou URL)
+			<input type="text" name="channel" placeholder="@worldclimbing" required />
+		</label>
+		<label class="download-form__field">
+			Section
+			<select name="section">
+				<option value="videos">Vidéos</option>
+				<option value="streams">Streams</option>
+			</select>
+		</label>
+		<label class="download-form__field">
+			Mots-clés (optionnel, séparés par des virgules)
+			<input type="text" name="keywords" placeholder="speed, 2026" />
+		</label>
+		<button type="submit">Rechercher</button>
+	</form>
+	<p class="download-form__error" data-role="channel-error" hidden></p>
+	<p class="download-form__status" data-role="channel-status" hidden></p>
+
+	<ul class="download-form__results" data-role="results"></ul>
+</div>
diff --git a/client/src/views/downloadForm/DownloadForm.scss b/client/src/views/downloadForm/DownloadForm.scss
new file mode 100644
index 0000000..e3d58eb
--- /dev/null
+++ b/client/src/views/downloadForm/DownloadForm.scss
@@ -0,0 +1,120 @@
+.download-form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+
+	h2 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
+
+	&__mode {
+		display: flex;
+		gap: 1rem;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+		padding: 0.5rem 0.75rem;
+
+		label {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			font-weight: normal;
+		}
+	}
+
+	&__options {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+
+		&[hidden] {
+			display: none;
+		}
+
+		label {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+		}
+	}
+
+	&__form {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		align-items: end;
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-size: 0.85rem;
+		flex: 1 1 160px;
+
+		input,
+		select {
+			padding: 0.4rem;
+		}
+	}
+
+	&__error {
+		color: #b00020;
+		font-size: 0.85rem;
+		margin: 0;
+	}
+
+	&__status {
+		color: #555;
+		font-size: 0.85rem;
+		margin: 0;
+	}
+
+	&__results {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		max-height: 320px;
+		overflow-y: auto;
+	}
+
+	&__result {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		border: 1px solid #eee;
+		border-radius: 4px;
+		padding: 0.4rem;
+	}
+
+	&__result-thumb {
+		width: 96px;
+		height: 54px;
+		object-fit: cover;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	&__result-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__result-title {
+		margin: 0;
+		font-size: 0.9rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__result-meta {
+		margin: 0;
+		font-size: 0.75rem;
+		color: #666;
+	}
+}
diff --git a/client/src/views/downloadForm/DownloadForm.ts b/client/src/views/downloadForm/DownloadForm.ts
new file mode 100644
index 0000000..2ec3bd2
--- /dev/null
+++ b/client/src/views/downloadForm/DownloadForm.ts
@@ -0,0 +1,281 @@
+import { type ChannelSection, type ChannelVideoDto, searchChannel } from '../../api/channelApi';
+import { type EnqueueMode, enqueueItem } from '../../api/queueApi';
+import { formatDuration, formatUploadDate } from '../../format';
+import downloadFormTemplate from './DownloadForm.html';
+import './DownloadForm.scss';
+
+/** Rappels fournis par l'appelant pour réagir aux actions du formulaire. */
+export interface DownloadFormCallbacks {
+	/** Appelé juste après l'ajout réussi d'un élément à la file d'attente. */
+	onItemQueued: () => void;
+}
+
+/**
+ * Affiche ou efface un message dans un élément de statut/erreur.
+ *
+ * @param el - Élément cible, ou `null` s'il n'a pas été trouvé dans le gabarit.
+ * @param message - Message à afficher, ou `null` pour masquer l'élément.
+ */
+function setMessage(el: HTMLElement | null, message: string | null): void {
+	if (!el) {
+		return;
+	}
+	el.hidden = message === null;
+	el.textContent = message ?? '';
+}
+
+/**
+ * Lit le mode de téléchargement et ses options depuis les contrôles
+ * actuellement sélectionnés dans le formulaire.
+ *
+ * @param root - Racine du formulaire monté.
+ * @returns Le mode à utiliser pour le prochain élément ajouté.
+ */
+function readCurrentMode(root: HTMLElement): EnqueueMode {
+	const selected =
+		root.querySelector<HTMLInputElement>('input[name="mode"]:checked')?.value ?? 'video';
+
+	if (selected === 'audio') {
+		const audioFormat =
+			(root.querySelector<HTMLSelectElement>('[data-field="audioFormat"]')?.value as
+				| 'mp3'
+				| 'm4a'
+				| 'opus'
+				| undefined) ?? 'mp3';
+		return { mode: 'audio', audioFormat };
+	}
+	if (selected === 'thumbnail') {
+		return { mode: 'thumbnail' };
+	}
+	return {
+		mode: 'video',
+		subtitles: root.querySelector<HTMLInputElement>('[data-field="subtitles"]')?.checked ?? false,
+		embedThumbnail:
+			root.querySelector<HTMLInputElement>('[data-field="embedThumbnail"]')?.checked ?? false,
+	};
+}
+
+/**
+ * Affiche/masque les panneaux d'options quand le mode sélectionné change.
+ *
+ * @param root - Racine du formulaire monté.
+ */
+function wireModeToggle(root: HTMLElement): void {
+	const fieldset = root.querySelector<HTMLFieldSetElement>('.download-form__mode');
+	const optionPanels = root.querySelectorAll<HTMLElement>('[data-mode-options]');
+
+	fieldset?.addEventListener('change', () => {
+		const selected = root.querySelector<HTMLInputElement>('input[name="mode"]:checked')?.value;
+		for (const panel of optionPanels) {
+			panel.hidden = panel.dataset.modeOptions !== selected;
+		}
+	});
+}
+
+/**
+ * Ajoute un résultat de recherche de chaîne à la file d'attente, avec
+ * retour visuel sur le bouton concerné.
+ *
+ * @param video - Vidéo à ajouter.
+ * @param formRoot - Racine du formulaire (pour lire le mode courant).
+ * @param button - Bouton "Ajouter" cliqué, pour le désactiver pendant la requête.
+ * @param errorEl - Élément où afficher une éventuelle erreur.
+ * @param callbacks - Rappels du formulaire.
+ */
+async function handleAddResult(
+	video: ChannelVideoDto,
+	formRoot: HTMLElement,
+	button: HTMLButtonElement,
+	errorEl: HTMLElement | null,
+	callbacks: DownloadFormCallbacks,
+): Promise<void> {
+	button.disabled = true;
+	setMessage(errorEl, null);
+
+	try {
+		await enqueueItem(video.url, readCurrentMode(formRoot), video.title);
+		button.textContent = 'Ajouté ✓';
+		callbacks.onItemQueued();
+	} catch (error) {
+		button.disabled = false;
+		setMessage(errorEl, error instanceof Error ? error.message : "Échec de l'ajout.");
+	}
+}
+
+/**
+ * Affiche la liste des résultats d'une recherche de chaîne.
+ *
+ * @param container - Élément `<ul>` dans lequel rendre les résultats.
+ * @param videos - Vidéos à afficher.
+ * @param formRoot - Racine du formulaire (pour lire le mode courant lors d'un ajout).
+ * @param errorEl - Élément où afficher une éventuelle erreur d'ajout.
+ * @param callbacks - Rappels du formulaire.
+ */
+function renderResults(
+	container: HTMLElement,
+	videos: readonly ChannelVideoDto[],
+	formRoot: HTMLElement,
+	errorEl: HTMLElement | null,
+	callbacks: DownloadFormCallbacks,
+): void {
+	container.replaceChildren();
+
+	for (const video of videos) {
+		const item = document.createElement('li');
+		item.className = 'download-form__result';
+
+		if (video.thumbnailUrl) {
+			const img = document.createElement('img');
+			img.src = video.thumbnailUrl;
+			img.alt = '';
+			img.className = 'download-form__result-thumb';
+			item.append(img);
+		}
+
+		const info = document.createElement('div');
+		info.className = 'download-form__result-info';
+
+		const title = document.createElement('p');
+		title.className = 'download-form__result-title';
+		title.textContent = video.title;
+		info.append(title);
+
+		const meta = document.createElement('p');
+		meta.className = 'download-form__result-meta';
+		meta.textContent = [formatDuration(video.durationSeconds), formatUploadDate(video.uploadDate)]
+			.filter((part) => part.length > 0)
+			.join(' · ');
+		info.append(meta);
+
+		item.append(info);
+
+		const addButton = document.createElement('button');
+		addButton.type = 'button';
+		addButton.textContent = 'Ajouter';
+		addButton.addEventListener('click', () => {
+			handleAddResult(video, formRoot, addButton, errorEl, callbacks).catch((error: unknown) => {
+				console.error('Erreur inattendue lors de l’ajout depuis la recherche', error);
+			});
+		});
+		item.append(addButton);
+
+		container.append(item);
+	}
+}
+
+/**
+ * Câble le formulaire d'ajout direct par URL.
+ *
+ * @param root - Racine du formulaire monté.
+ * @param callbacks - Rappels du formulaire.
+ */
+function wireUrlForm(root: HTMLElement, callbacks: DownloadFormCallbacks): void {
+	const form = root.querySelector<HTMLFormElement>('form[data-form="url"]');
+	const errorEl = root.querySelector<HTMLElement>('[data-role="url-error"]');
+	if (!form) {
+		return;
+	}
+
+	const handleSubmit = async (event: SubmitEvent): Promise<void> => {
+		event.preventDefault();
+		const url = form.querySelector<HTMLInputElement>('input[name="url"]')?.value.trim() ?? '';
+		if (!url) {
+			return;
+		}
+
+		setMessage(errorEl, null);
+		const submitButton = form.querySelector<HTMLButtonElement>('button[type="submit"]');
+		if (submitButton) {
+			submitButton.disabled = true;
+		}
+
+		try {
+			await enqueueItem(url, readCurrentMode(root), null);
+			form.reset();
+			callbacks.onItemQueued();
+		} catch (error) {
+			setMessage(errorEl, error instanceof Error ? error.message : "Échec de l'ajout à la file.");
+		} finally {
+			if (submitButton) {
+				submitButton.disabled = false;
+			}
+		}
+	};
+
+	form.addEventListener('submit', (event) => {
+		handleSubmit(event).catch((error: unknown) => {
+			console.error('Erreur inattendue lors de l’ajout par URL', error);
+		});
+	});
+}
+
+/**
+ * Câble le formulaire de recherche de chaîne.
+ *
+ * @param root - Racine du formulaire monté.
+ * @param callbacks - Rappels du formulaire.
+ */
+function wireChannelForm(root: HTMLElement, callbacks: DownloadFormCallbacks): void {
+	const form = root.querySelector<HTMLFormElement>('form[data-form="channel"]');
+	const errorEl = root.querySelector<HTMLElement>('[data-role="channel-error"]');
+	const statusEl = root.querySelector<HTMLElement>('[data-role="channel-status"]');
+	const resultsEl = root.querySelector<HTMLElement>('[data-role="results"]');
+	if (!form || !resultsEl) {
+		return;
+	}
+
+	const handleSubmit = async (event: SubmitEvent): Promise<void> => {
+		event.preventDefault();
+		const formData = new FormData(form);
+		const channel = String(formData.get('channel') ?? '').trim();
+		const section = String(formData.get('section') ?? 'videos') as ChannelSection;
+		const keywords = String(formData.get('keywords') ?? '');
+		if (!channel) {
+			return;
+		}
+
+		setMessage(errorEl, null);
+		setMessage(statusEl, 'Recherche en cours...');
+		resultsEl.replaceChildren();
+		const submitButton = form.querySelector<HTMLButtonElement>('button[type="submit"]');
+		if (submitButton) {
+			submitButton.disabled = true;
+		}
+
+		try {
+			const videos = await searchChannel(channel, section, keywords);
+			setMessage(
+				statusEl,
+				videos.length === 0 ? 'Aucun résultat.' : `${videos.length} résultat(s).`,
+			);
+			renderResults(resultsEl, videos, root, errorEl, callbacks);
+		} catch (error) {
+			setMessage(statusEl, null);
+			setMessage(errorEl, error instanceof Error ? error.message : 'Échec de la recherche.');
+		} finally {
+			if (submitButton) {
+				submitButton.disabled = false;
+			}
+		}
+	};
+
+	form.addEventListener('submit', (event) => {
+		handleSubmit(event).catch((error: unknown) => {
+			console.error('Erreur inattendue lors de la recherche de chaîne', error);
+		});
+	});
+}
+
+/**
+ * Monte le formulaire d'ajout (URL directe + recherche de chaîne) dans
+ * l'élément racine fourni.
+ *
+ * @param root - Élément DOM dans lequel injecter le formulaire.
+ * @param callbacks - Rappels invoqués sur les actions du formulaire.
+ */
+export function mountDownloadForm(root: HTMLElement, callbacks: DownloadFormCallbacks): void {
+	root.innerHTML = downloadFormTemplate;
+	wireModeToggle(root);
+	wireUrlForm(root, callbacks);
+	wireChannelForm(root, callbacks);
+}
diff --git a/client/src/views/queuePanel/QueuePanel.html b/client/src/views/queuePanel/QueuePanel.html
new file mode 100644
index 0000000..93546ad
--- /dev/null
+++ b/client/src/views/queuePanel/QueuePanel.html
@@ -0,0 +1,5 @@
+<div class="queue-panel">
+	<h2>File d'attente</h2>
+	<p class="queue-panel__empty" data-role="empty">Aucun élément pour l'instant.</p>
+	<ul class="queue-panel__list" data-role="list"></ul>
+</div>
diff --git a/client/src/views/queuePanel/QueuePanel.scss b/client/src/views/queuePanel/QueuePanel.scss
new file mode 100644
index 0000000..4256cc0
--- /dev/null
+++ b/client/src/views/queuePanel/QueuePanel.scss
@@ -0,0 +1,82 @@
+.queue-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+
+	h2 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
+
+	&__empty {
+		color: #666;
+		font-size: 0.85rem;
+	}
+
+	&__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	&__item {
+		border: 1px solid #eee;
+		border-left-width: 4px;
+		border-radius: 4px;
+		padding: 0.5rem 0.75rem;
+
+		&--completed {
+			border-left-color: #2e7d32;
+		}
+		&--failed {
+			border-left-color: #b00020;
+		}
+		&--running {
+			border-left-color: #1565c0;
+		}
+		&--cancelled {
+			border-left-color: #999;
+		}
+		&--pending {
+			border-left-color: #999;
+		}
+	}
+
+	&__item-title {
+		margin: 0;
+		font-size: 0.9rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__item-meta {
+		margin: 0.15rem 0 0;
+		font-size: 0.75rem;
+		color: #666;
+	}
+
+	&__item-progress {
+		width: 100%;
+		margin-top: 0.35rem;
+	}
+
+	&__item-error {
+		margin: 0.35rem 0 0;
+		font-size: 0.75rem;
+		color: #b00020;
+	}
+
+	&__item-actions {
+		margin-top: 0.35rem;
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	&__item-download {
+		font-size: 0.85rem;
+	}
+}
diff --git a/client/src/views/queuePanel/QueuePanel.ts b/client/src/views/queuePanel/QueuePanel.ts
new file mode 100644
index 0000000..2fec7e2
--- /dev/null
+++ b/client/src/views/queuePanel/QueuePanel.ts
@@ -0,0 +1,168 @@
+import {
+	type QueueItemDto,
+	cancelQueueItem,
+	listQueueItems,
+	queueItemFileUrl,
+} from '../../api/queueApi';
+import queuePanelTemplate from './QueuePanel.html';
+import './QueuePanel.scss';
+
+/** Intervalle de sondage de `GET /api/queue`, en l'absence de push temps réel (à venir). */
+const POLL_INTERVAL_MS = 1500;
+
+const STATUS_LABELS: Record<QueueItemDto['status'], string> = {
+	pending: 'En attente',
+	running: 'En cours',
+	completed: 'Terminé',
+	failed: 'Échec',
+	cancelled: 'Annulé',
+};
+
+const MODE_LABELS: Record<QueueItemDto['mode']['kind'], string> = {
+	video: 'Vidéo',
+	audio: 'Audio',
+	thumbnail: 'Miniature',
+};
+
+/** Contrôleur exposé par {@link mountQueuePanel}. */
+export interface QueuePanelController {
+	/** Recharge immédiatement la liste, sans attendre le prochain sondage. */
+	refresh: () => void;
+}
+
+/**
+ * Annule un élément de la file au clic sur son bouton "Annuler".
+ *
+ * @param id - Identifiant de l'élément à annuler.
+ * @param button - Bouton cliqué, désactivé pendant la requête.
+ * @param onDone - Rappelé après la requête (succès ou échec) pour rafraîchir la liste.
+ */
+async function handleCancel(
+	id: string,
+	button: HTMLButtonElement,
+	onDone: () => void,
+): Promise<void> {
+	button.disabled = true;
+	try {
+		await cancelQueueItem(id);
+	} catch (error) {
+		console.error("Échec de l'annulation", error);
+	} finally {
+		onDone();
+	}
+}
+
+/**
+ * Construit la ligne d'affichage d'un élément de la file.
+ *
+ * @param item - Élément à afficher.
+ * @param onChanged - Rappelé après une action (annulation) pour rafraîchir la liste.
+ * @returns L'élément `<li>` prêt à être inséré dans la liste.
+ */
+function renderItem(item: QueueItemDto, onChanged: () => void): HTMLLIElement {
+	const li = document.createElement('li');
+	li.className = `queue-panel__item queue-panel__item--${item.status}`;
+
+	const title = document.createElement('p');
+	title.className = 'queue-panel__item-title';
+	title.textContent = item.title ?? item.url;
+	li.append(title);
+
+	const meta = document.createElement('p');
+	meta.className = 'queue-panel__item-meta';
+	meta.textContent = `${MODE_LABELS[item.mode.kind]} · ${STATUS_LABELS[item.status]}`;
+	li.append(meta);
+
+	if (item.status === 'running' || item.status === 'pending') {
+		const progress = document.createElement('progress');
+		progress.className = 'queue-panel__item-progress';
+		progress.max = 100;
+		progress.value = item.progress;
+		li.append(progress);
+	}
+
+	if (item.status === 'failed' && item.error) {
+		const error = document.createElement('p');
+		error.className = 'queue-panel__item-error';
+		error.textContent = item.error;
+		li.append(error);
+	}
+
+	const actions = document.createElement('div');
+	actions.className = 'queue-panel__item-actions';
+
+	if (item.status === 'pending' || item.status === 'running') {
+		const cancelButton = document.createElement('button');
+		cancelButton.type = 'button';
+		cancelButton.textContent = 'Annuler';
+		cancelButton.addEventListener('click', () => {
+			handleCancel(item.id, cancelButton, onChanged).catch((error: unknown) => {
+				console.error("Erreur inattendue lors de l'annulation", error);
+			});
+		});
+		actions.append(cancelButton);
+	}
+
+	if (item.status === 'completed') {
+		const link = document.createElement('a');
+		link.href = queueItemFileUrl(item.id);
+		link.textContent = 'Télécharger';
+		link.className = 'queue-panel__item-download';
+		actions.append(link);
+	}
+
+	li.append(actions);
+	return li;
+}
+
+/**
+ * Rend la liste des éléments dans le panneau.
+ *
+ * @param root - Racine du panneau monté.
+ * @param items - Éléments à afficher.
+ * @param onChanged - Rappelé après une action sur un élément (pour rafraîchir la liste).
+ */
+function render(root: HTMLElement, items: readonly QueueItemDto[], onChanged: () => void): void {
+	const list = root.querySelector<HTMLElement>('[data-role="list"]');
+	const empty = root.querySelector<HTMLElement>('[data-role="empty"]');
+	if (!list || !empty) {
+		return;
+	}
+
+	empty.hidden = items.length > 0;
+	list.replaceChildren(...items.map((item) => renderItem(item, onChanged)));
+}
+
+/**
+ * Monte le panneau de file d'attente dans l'élément racine fourni, et
+ * démarre le sondage périodique de `GET /api/queue`.
+ *
+ * @param root - Élément DOM dans lequel injecter le panneau.
+ * @returns Un contrôleur permettant de déclencher un rafraîchissement immédiat.
+ */
+export function mountQueuePanel(root: HTMLElement): QueuePanelController {
+	root.innerHTML = queuePanelTemplate;
+	let isRefreshing = false;
+
+	const refresh = (): void => {
+		if (isRefreshing) {
+			return;
+		}
+		isRefreshing = true;
+		listQueueItems()
+			.then((items) => {
+				render(root, items, refresh);
+			})
+			.catch((error: unknown) => {
+				console.error('Échec du chargement de la file d’attente', error);
+			})
+			.finally(() => {
+				isRefreshing = false;
+			});
+	};
+
+	refresh();
+	setInterval(refresh, POLL_INTERVAL_MS);
+
+	return { refresh };
+}
diff --git a/client/test/format.test.ts b/client/test/format.test.ts
new file mode 100644
index 0000000..d176636
--- /dev/null
+++ b/client/test/format.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { formatDuration, formatUploadDate } from '../src/format';
+
+describe('formatDuration', () => {
+	it('formate en m:ss sous une heure', () => {
+		expect(formatDuration(65)).toBe('1:05');
+	});
+
+	it('complète les secondes avec un zéro', () => {
+		expect(formatDuration(60)).toBe('1:00');
+	});
+
+	it('formate en h:mm:ss au-delà d’une heure', () => {
+		expect(formatDuration(3725)).toBe('1:02:05');
+	});
+
+	it('retourne une chaîne vide si inconnue', () => {
+		expect(formatDuration(null)).toBe('');
+	});
+});
+
+describe('formatUploadDate', () => {
+	it('formate YYYYMMDD en JJ/MM/AAAA', () => {
+		expect(formatUploadDate('20260315')).toBe('15/03/2026');
+	});
+
+	it('retourne une chaîne vide si inconnue', () => {
+		expect(formatUploadDate(null)).toBe('');
+	});
+
+	it('retourne une chaîne vide si mal formée', () => {
+		expect(formatUploadDate('abc')).toBe('');
+		expect(formatUploadDate('2026-03-15')).toBe('');
+	});
+});
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 1b81c34..e2ddba6 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
-		"target": "ES2020",
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"target": "ES2022",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
 		"module": "ESNext",
 		"moduleResolution": "bundler",
 		"strict": true,
@@ -12,5 +12,5 @@
 		"noEmit": true,
 		"isolatedModules": true
 	},
-	"include": ["src/**/*.ts"]
+	"include": ["src/**/*.ts", "test/**/*.ts"]
 }
diff --git a/server/src/routes/channel.ts b/server/src/routes/channel.ts
index 653df5e..a7fb17d 100644
--- a/server/src/routes/channel.ts
+++ b/server/src/routes/channel.ts
@@ -4,7 +4,6 @@ import {
 	type ChannelSection,
 	InvalidChannelError,
 } from '../services/ChannelDiscoveryService.js';
-import { YtDlpError } from '../services/ytDlpRunner.js';
 
 /** Paramètres de requête acceptés par `GET /api/channel`. */
 interface ListChannelQuerystring {
@@ -72,12 +71,14 @@ export const channelRoutes: FastifyPluginAsync = async (app: FastifyInstance): P
 				if (error instanceof InvalidChannelError) {
 					return reply.status(400).send({ error: error.message });
 				}
-				if (error instanceof YtDlpError) {
-					return reply
-						.status(502)
-						.send({ error: 'Échec de la récupération depuis YouTube (yt-dlp).' });
-				}
-				throw error;
+				// buildChannelUrl() lève InvalidChannelError de façon synchrone,
+				// avant tout appel à yt-dlp : toute autre erreur ici vient donc
+				// forcément de runYtDlp (binaire introuvable, code de sortie non
+				// nul, etc.), qu'elle soit une YtDlpError ou une erreur brute de
+				// spawn (ex. ENOENT) - les deux sont un échec côté yt-dlp/YouTube.
+				return reply
+					.status(502)
+					.send({ error: 'Échec de la récupération depuis YouTube (yt-dlp).' });
 			}
 		},
 	);
diff --git a/server/src/routes/queue.ts b/server/src/routes/queue.ts
index fbfad15..6ae5435 100644
--- a/server/src/routes/queue.ts
+++ b/server/src/routes/queue.ts
@@ -9,6 +9,8 @@ import { InvalidVideoUrlError, assertValidVideoUrl } from '../services/videoUrl.
 interface CreateQueueItemBody {
 	/** URL de la vidéo YouTube à télécharger. */
 	url: string;
+	/** Titre de la vidéo, si déjà connu (ex. depuis une recherche de chaîne), pour l'affichage uniquement. */
+	title?: string;
 	/** Mode de téléchargement demandé. */
 	mode: 'video' | 'audio' | 'thumbnail';
 	/** Mode vidéo uniquement : récupérer et embarquer les sous-titres fr/en. */
@@ -24,6 +26,7 @@ const createQueueItemSchema = {
 	required: ['url', 'mode'],
 	properties: {
 		url: { type: 'string', minLength: 1, maxLength: 500 },
+		title: { type: 'string', maxLength: 300 },
 		mode: { type: 'string', enum: ['video', 'audio', 'thumbnail'] },
 		subtitles: { type: 'boolean' },
 		embedThumbnail: { type: 'boolean' },
@@ -97,7 +100,11 @@ export function createQueueRoutes(
 					throw error;
 				}
 
-				const item = queueService.enqueue(url, toDownloadMode(request.body));
+				const item = queueService.enqueue(
+					url,
+					toDownloadMode(request.body),
+					request.body.title ?? null,
+				);
 				return reply.status(201).send({ item });
 			},
 		);
diff --git a/server/src/services/QueueService.ts b/server/src/services/QueueService.ts
index f8ac01e..9ad9c69 100644
--- a/server/src/services/QueueService.ts
+++ b/server/src/services/QueueService.ts
@@ -19,6 +19,8 @@ export interface QueueItem {
 	readonly id: string;
 	/** URL de la vidéo source. */
 	readonly url: string;
+	/** Titre de la vidéo, si connu au moment de l'ajout (purement informatif, pour l'affichage). */
+	readonly title: string | null;
 	/** Mode de téléchargement demandé. */
 	readonly mode: DownloadMode;
 	/** État d'avancement courant. */
@@ -39,6 +41,7 @@ const DOWNLOAD_TIMEOUT_MS = 30 * 60_000;
 interface InternalQueueItem {
 	id: string;
 	url: string;
+	title: string | null;
 	mode: DownloadMode;
 	status: QueueItemStatus;
 	progress: number;
@@ -96,13 +99,15 @@ export class QueueService {
 	 *
 	 * @param url - URL de la vidéo à télécharger (déjà validée par l'appelant).
 	 * @param mode - Mode de téléchargement demandé.
+	 * @param title - Titre de la vidéo, si déjà connu (ex. depuis une recherche de chaîne), pour l'affichage uniquement.
 	 * @returns L'élément créé, à l'état `"pending"`.
 	 */
-	public enqueue(url: string, mode: DownloadMode): QueueItem {
+	public enqueue(url: string, mode: DownloadMode, title: string | null = null): QueueItem {
 		const id = randomUUID();
 		const item: InternalQueueItem = {
 			id,
 			url,
+			title,
 			mode,
 			status: 'pending',
 			progress: 0,
@@ -310,6 +315,7 @@ export class QueueService {
 		return {
 			id: item.id,
 			url: item.url,
+			title: item.title,
 			mode: item.mode,
 			status: item.status,
 			progress: item.progress,
diff --git a/server/test/channelRoute.test.ts b/server/test/channelRoute.test.ts
index 06cad34..849e5f6 100644
--- a/server/test/channelRoute.test.ts
+++ b/server/test/channelRoute.test.ts
@@ -56,7 +56,7 @@ describe('GET /api/channel', () => {
 		expect(response.statusCode).toBe(400);
 	});
 
-	it('renvoie 502 quand yt-dlp échoue', async () => {
+	it('renvoie 502 quand yt-dlp échoue avec un code de sortie non nul', async () => {
 		vi.mocked(runYtDlp).mockRejectedValue(new YtDlpError(1, 'network error'));
 
 		const app = Fastify();
@@ -66,4 +66,18 @@ describe('GET /api/channel', () => {
 
 		expect(response.statusCode).toBe(502);
 	});
+
+	it('renvoie 502 (pas 500) quand le binaire yt-dlp est introuvable (ENOENT)', async () => {
+		// Node rejette avec une Error brute (pas une YtDlpError) quand le spawn
+		// lui-même échoue - voir ytDlpRunner.ts, l'événement 'error' du child.
+		const spawnError = Object.assign(new Error('spawn yt-dlp ENOENT'), { code: 'ENOENT' });
+		vi.mocked(runYtDlp).mockRejectedValue(spawnError);
+
+		const app = Fastify();
+		await app.register(channelRoutes);
+
+		const response = await app.inject({ method: 'GET', url: '/api/channel?channel=@test' });
+
+		expect(response.statusCode).toBe(502);
+	});
 });
diff --git a/spec/architecture.md b/spec/architecture.md
index 43fbb67..5d48641 100644
--- a/spec/architecture.md
+++ b/spec/architecture.md
@@ -31,15 +31,20 @@ Pas de `docker-compose.yml` pour l'instant (une seule image, pas encore de dépe
 
 ## Frontend (`client/`)
 
-- TypeScript vanilla, pas de framework. Chaque vue = un dossier avec `Vue.ts` / `Vue.html` / `Vue.scss` (gabarit importé comme chaîne brute, style Sass importé et compilé). Voir `src/shell/` pour l'exemple actuel (placeholder).
-- Build via `build.mjs` (esbuild), pas d'outil de build plus lourd (Vite, webpack) : le script compile `src/app.ts` en bundle ESM, copie `src/index.html`, et compile/regroupe les `.scss` importés en un `app.css` voisin (plugin esbuild maison qui délègue au paquet `sass`).
-- Pas encore de router : une seule vue (shell) pour l'instant. Un routeur sera introduit avec la première vraie vue (parcours de chaîne).
+- TypeScript vanilla, pas de framework. Chaque vue = un dossier avec `Vue.ts` / `Vue.html` / `Vue.scss` (gabarit importé comme chaîne brute, style Sass importé et compilé).
+- Build via `build.mjs` (esbuild), pas d'outil de build plus lourd (Vite, webpack) : le script compile `src/app.ts` en bundle ESM, copie `src/index.html`, et compile/regroupe les `.scss` importés en un `app.css` voisin (plugin esbuild maison qui délègue au paquet `sass`). Cible ES2022 (nécessaire pour `Error.cause`, utilisé dans `api/`).
+- Pas de router : `src/shell/Shell.ts` monte deux vues fixes côte à côte (`views/downloadForm/`, `views/queuePanel/`), reliées par un callback simple (`onItemQueued`) plutôt qu'un bus d'événements généraliste - au-delà de deux vues qui coexistent sur un seul écran, un vrai routeur deviendrait nécessaire.
+- `src/api/` : clients fetch vers le backend (`channelApi.ts`, `queueApi.ts`), avec leurs propres types DTO - pas de paquet de types partagé avec `server/` (monorepo simple, pas de workspace npm).
+- `src/views/downloadForm/` : formulaire d'ajout, deux entrées possibles (URL directe, ou recherche de chaîne via `GET /api/channel` puis ajout par résultat) partageant un même sélecteur de mode (vidéo/audio/miniature + options). Le mode courant est lu depuis le DOM à l'ajout, pas stocké en état séparé.
+- `src/views/queuePanel/` : sonde `GET /api/queue` toutes les 1,5s (pas de push temps réel pour l'instant, voir Statut) et affiche chaque élément (titre ou URL à défaut, statut, barre de progression, erreur, bouton annuler/lien de téléchargement selon le statut). Expose `refresh()` pour un rafraîchissement immédiat après un ajout.
+- Piège CSS relevé en testant dans un vrai navigateur (pas seulement les tests) : un attribut `hidden` combiné à une règle `display: flex` sur le même sélecteur se fait écraser par cette règle (même spécificité, la feuille de l'auteur gagne sur celle du user-agent) - toujours ajouter `&[hidden] { display: none; }` quand un conteneur togglé porte aussi un `display` explicite.
+- Tests : Vitest (`client/test/`), uniquement sur les fonctions pures (`format.ts`) pour l'instant - pas de configuration jsdom, le câblage DOM (formulaires, rendu de liste) est vérifié manuellement dans le navigateur plutôt que testé automatiquement.
 
 ## API
 
 - `GET /health` : statut du service (utilisé par le `HEALTHCHECK` Docker).
 - `GET /api/channel?channel=<@handle|URL>&section=<videos|streams>&keywords=<a,b>` : liste les vidéos/streams d'une chaîne, filtrés par mots-clés (ET, insensible à la casse) sur le titre. `section` par défaut `videos`. Réponses : `200 { videos: [...] }`, `400` si `channel` est absent/invalide, `502` si yt-dlp échoue.
-- `POST /api/queue` : ajoute un élément (`{ url, mode: "video"|"audio"|"thumbnail", subtitles?, embedThumbnail?, audioFormat? }`). `201 { item }`, `400` si l'URL n'est pas une URL de vidéo YouTube reconnue.
+- `POST /api/queue` : ajoute un élément (`{ url, title?, mode: "video"|"audio"|"thumbnail", subtitles?, embedThumbnail?, audioFormat? }`). `title` est purement informatif (affichage), jamais utilisé pour construire la commande yt-dlp. `201 { item }`, `400` si l'URL n'est pas une URL de vidéo YouTube reconnue.
 - `GET /api/queue` : liste tous les éléments (`{ items: [...] }`), avec leur `status` (`pending`/`running`/`completed`/`failed`/`cancelled`), `progress` (0-100, best-effort) et `error`.
 - `DELETE /api/queue/:id` : annule un élément (`204`) - retiré de la file s'il était en attente, processus yt-dlp arrêté s'il était en cours. `404` si inconnu ou déjà terminé.
 - `GET /api/queue/:id/file` : télécharge le fichier produit par un élément `completed` (`Content-Disposition: attachment`). Le dossier de sortie de l'élément est supprimé juste après l'envoi. `404` tant que l'élément n'est pas `completed`.
@@ -52,9 +57,9 @@ Biome.js à la racine (`biome.json`), applique aux deux paquets (`server/src`, `
 
 - `server/Dockerfile` : image multi-étapes construite avec pour contexte la racine du dépôt (`docker build -f server/Dockerfile .`), car elle a besoin à la fois de `server/` et `client/`. Étapes : build client (esbuild) → build serveur (tsc) → image runtime (Node 22 Alpine + `ffmpeg` + binaire autonome `yt-dlp`, utilisateur non-root `node`).
 - `yt-dlp` et `ffmpeg` sont installés dans l'image (pas vendorisés dans le dépôt, contrairement aux scripts `.cmd` d'origine qui embarquaient `yt-dlp.exe` et un build ffmpeg complet).
-- `.forgejo/workflows/publish-docker.yml` : job `test` (lint racine, typecheck/tests/build serveur, typecheck/build client) puis job `publish` (build + push de l'image vers `git.dev.kyuno.fr/kyuno/youtubedownloader`, seulement si `test` passe et hors PR). Tags : `latest` + sha court sur push `main`, `X.Y.Z`/`X.Y`/`latest` sur tag `vX.Y.Z`. Nécessite le secret de dépôt `REGISTRY_TOKEN` (à créer manuellement, voir l'en-tête du workflow - un jeton d'API n'a pas le droit d'écrire dans le registre de paquets).
+- `.forgejo/workflows/publish-docker.yml` : job `test` (lint racine, typecheck/tests/build serveur, typecheck/tests/build client) puis job `publish` (build + push de l'image vers `git.dev.kyuno.fr/kyuno/youtubedownloader`, seulement si `test` passe et hors PR). Tags : `latest` + sha court sur push `main`, `X.Y.Z`/`X.Y`/`latest` sur tag `vX.Y.Z`. Nécessite le secret de dépôt `REGISTRY_TOKEN` (à créer manuellement, voir l'en-tête du workflow - un jeton d'API n'a pas le droit d'écrire dans le registre de paquets).
 
 ## Statut
 
-- Fait : infrastructure (serveur qui répond, client placeholder, Docker, CI), découverte de chaîne (`GET /api/channel`), file d'attente + téléchargement vidéo/audio/miniature avec concurrence bornée (`/api/queue*`).
-- À venir (PR successives) : notifications temps réel (WebSocket, progression poussée plutôt que sondage de `GET /api/queue`), vues frontend (parcours de chaîne, file d'attente).
+- Fait : infrastructure (serveur, Docker, CI), découverte de chaîne (`GET /api/channel`), file d'attente + téléchargement vidéo/audio/miniature avec concurrence bornée (`/api/queue*`), frontend complet (formulaire d'ajout + file d'attente, sondage 1,5s).
+- À venir (PR successives) : notifications temps réel (WebSocket, progression poussée plutôt que sondage), tests client sur le câblage DOM (jsdom), sélection de qualité vidéo (actuellement fixe : meilleur mp4 disponible).