feat(ui): avatar crop modal, health endpoint, leaner Dockerfile

- Add AvatarCropModal.svelte using cropperjs v1: 1:1 crop, 400×400 output,
  JPEG/WebP output, dark glassmorphic UI
- Rewrite profile page avatar upload to use presigned PUT flow (POST→PUT→PATCH)
  instead of sending raw FormData directly; crop modal opens on file select
- Add GET /health → {status:ok} for Docker healthcheck
- Simplify Dockerfile: drop runtime npm ci (adapter-node bundles all deps)
- Fix docker-compose UI healthcheck: /health route, 127.0.0.1 to avoid
  IPv6 localhost resolution failure in alpine busybox wget

ui/src/routes/profile/+page.svelte

@@ -3,6 +3,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import type { PageData, ActionData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
+	import AvatarCropModal from '$lib/components/AvatarCropModal.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -12,32 +13,71 @@
 	let avatarError = $state('');
 	let fileInput: HTMLInputElement | null = null;
 
-	async function handleAvatarChange(e: Event) {
+	// Crop modal state
+	let cropFile = $state<File | null>(null);
+
+	function handleAvatarChange(e: Event) {
 		const input = e.target as HTMLInputElement;
 		const file = input.files?.[0];
 		if (!file) return;
+		// Reset input so the same file can be re-selected after cancel
+		if (fileInput) fileInput.value = '';
+		cropFile = file;
+	}
 
+	async function handleCropConfirm(blob: Blob, mimeType: string) {
+		cropFile = null;
 		avatarUploading = true;
 		avatarError = '';
 		try {
-			const fd = new FormData();
-			fd.append('file', file);
-			const res = await fetch('/api/profile/avatar', { method: 'POST', body: fd });
-			if (!res.ok) {
-				const body = await res.json().catch(() => ({})) as { message?: string };
-				avatarError = body.message ?? `Upload failed (${res.status})`;
+			// Step 1: get presigned PUT URL
+			const presignRes = await fetch('/api/profile/avatar', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ mime_type: mimeType })
+			});
+			if (!presignRes.ok) {
+				const body = await presignRes.json().catch(() => ({})) as { message?: string };
+				avatarError = body.message ?? `Failed to prepare upload (${presignRes.status})`;
 				return;
 			}
-			const result = await res.json() as { avatar_url: string | null };
+			const { upload_url, key } = await presignRes.json() as { upload_url: string; key: string };
+
+			// Step 2: PUT blob directly to MinIO
+			const putRes = await fetch(upload_url, {
+				method: 'PUT',
+				headers: { 'Content-Type': mimeType },
+				body: blob
+			});
+			if (!putRes.ok) {
+				avatarError = `Upload failed (${putRes.status})`;
+				return;
+			}
+
+			// Step 3: record key in PocketBase and get fresh presigned GET URL
+			const patchRes = await fetch('/api/profile/avatar', {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ key })
+			});
+			if (!patchRes.ok) {
+				const body = await patchRes.json().catch(() => ({})) as { message?: string };
+				avatarError = body.message ?? `Failed to save avatar (${patchRes.status})`;
+				return;
+			}
+			const result = await patchRes.json() as { avatar_url: string | null };
 			avatarUrl = result.avatar_url;
 		} catch {
 			avatarError = 'Network error during upload';
 		} finally {
 			avatarUploading = false;
-			if (fileInput) fileInput.value = '';
 		}
 	}
 
+	function handleCropCancel() {
+		cropFile = null;
+	}
+
 	// ── Settings ────────────────────────────────────────────────────────────────
 	let voices = $state<string[]>([]);
 	let voicesLoaded = $state(false);
@@ -173,6 +213,14 @@
 	<title>Profile — libnovel</title>
 </svelte:head>
 
+{#if cropFile}
+	<AvatarCropModal
+		file={cropFile}
+		onconfirm={handleCropConfirm}
+		oncancel={handleCropCancel}
+	/>
+{/if}
+
 <!-- Hidden logout form used when user ends their own session -->
 <form id="logout-form" method="POST" action="/logout" class="hidden"></form>
 
@@ -210,14 +258,14 @@
 					{/if}
 				</div>
 			</button>
-			<input
-				bind:this={fileInput}
-				type="file"
-				accept="image/jpeg,image/png,image/webp,image/gif"
-				class="hidden"
-				onchange={handleAvatarChange}
-			/>
-		</div>
+		<input
+			bind:this={fileInput}
+			type="file"
+			accept="image/jpeg,image/png,image/webp"
+			class="hidden"
+			onchange={handleAvatarChange}
+		/>
+	</div>
 
 		<div>
 			<h1 class="text-2xl font-bold text-zinc-100">{data.user.username}</h1>