feat(tts): dual-engine voice list (kokoro + pocket-tts)

Expose all available voices from both TTS engines via the /api/voices
endpoint. AudioPlayer and profile voice-selector now group voices by
engine and show a labelled optgroup. Voice type carries an engine field
so the chapter-reader can route synthesis to the correct backend.

ui/src/lib/components/AudioPlayer.svelte

@@ -51,6 +51,7 @@
 	import { audioStore } from '$lib/audio.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
+	import type { Voice } from '$lib/types';
 
 	interface Props {
 		slug: string;
@@ -63,8 +64,8 @@
 		nextChapter?: number | null;
 		/** Full chapter list for the book (number + title). Written into the store. */
 		chapters?: { number: number; title: string }[];
-		/** List of available voices from the Kokoro API. */
-		voices?: string[];
+		/** List of available voices from the backend. */
+		voices?: Voice[];
 	}
 
 	let {
@@ -78,6 +79,10 @@
 		voices = []
 	}: Props = $props();
 
+	// ── Derived: voices grouped by engine ──────────────────────────────────
+	const kokoroVoices = $derived(voices.filter((v) => v.engine === 'kokoro'));
+	const pocketVoices = $derived(voices.filter((v) => v.engine === 'pocket-tts'));
+
 	// ── Voice selector state ────────────────────────────────────────────────
 	let showVoicePanel = $state(false);
 	/** Voice whose sample is currently being fetched or playing. */
@@ -86,10 +91,33 @@
 	let sampleAudio = $state<HTMLAudioElement | null>(null);
 
 	/**
-	 * Human-readable label for a voice ID.
-	 * e.g. "af_bella" → "Bella (US F)" | "bm_george" → "George (UK M)"
+	 * Human-readable label for a voice.
+	 * Kokoro: "af_bella" → "Bella (US F)"
+	 * Pocket-TTS: "alba" → "Alba (EN F)"
+	 * Falls back gracefully if called with a bare string (e.g. from the store default).
 	 */
-	function voiceLabel(v: string): string {
+	function voiceLabel(v: Voice | string): string {
+		// Handle plain string IDs stored in audioStore.voice
+		if (typeof v === 'string') {
+			// Try to match against the voices list
+			const found = voices.find((x) => x.id === v);
+			if (found) return voiceLabel(found);
+			// Bare kokoro ID fallback (legacy / default "af_bella")
+			return kokoroLabelFromId(v);
+		}
+
+		if (v.engine === 'pocket-tts') {
+			const langLabel = v.lang.toUpperCase().replace('-', '');
+			const genderLabel = v.gender.toUpperCase();
+			const name = v.id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+			return `${name} (${langLabel} ${genderLabel})`;
+		}
+
+		// Kokoro
+		return kokoroLabelFromId(v.id);
+	}
+
+	function kokoroLabelFromId(id: string): string {
 		const langMap: Record<string, string> = {
 			af: 'US', am: 'US',
 			bf: 'UK', bm: 'UK',
@@ -112,9 +140,8 @@
 			pf: 'F', pm: 'M',
 			zf: 'F', zm: 'M',
 		};
-		const prefix = v.slice(0, 2);
-		const name = v.slice(3);
-		// Capitalise and strip legacy v0 prefix.
+		const prefix = id.slice(0, 2);
+		const name = id.slice(3);
 		const displayName = name
 			.replace(/^v0/, '')
 			.replace(/^([a-z])/, (c: string) => c.toUpperCase());
@@ -627,6 +654,52 @@
 
 <svelte:window onkeydown={handleKeyDown} />
 
+<!-- ── Voice row snippet (reused in both engine sections) ──────────────── -->
+{#snippet voiceRow(v: import('$lib/types').Voice)}
+	<div
+		class={cn('flex items-center gap-2 px-3 py-2 hover:bg-zinc-800 transition-colors cursor-pointer', audioStore.voice === v.id && 'bg-amber-400/10')}
+		role="button"
+		tabindex="0"
+		onclick={() => selectVoice(v.id)}
+		onkeydown={(e) => e.key === 'Enter' && selectVoice(v.id)}
+	>
+		<!-- Selected indicator -->
+		<div class="w-4 flex-shrink-0">
+			{#if audioStore.voice === v.id}
+				<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+				</svg>
+			{/if}
+		</div>
+
+		<!-- Voice name -->
+		<span class={cn('flex-1 text-xs', audioStore.voice === v.id ? 'text-amber-400 font-medium' : 'text-zinc-300')}>
+			{voiceLabel(v)}
+		</span>
+		<span class="text-zinc-600 text-xs font-mono">{v.id}</span>
+
+		<!-- Sample play button -->
+		<Button
+			variant="ghost"
+			size="icon"
+			class={cn('h-6 w-6 flex-shrink-0', samplePlayingVoice === v.id ? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25' : 'text-zinc-500 hover:text-zinc-200')}
+			onclick={(e) => { e.stopPropagation(); playSample(v.id); }}
+			title={samplePlayingVoice === v.id ? 'Stop sample' : 'Play sample'}
+			aria-label={samplePlayingVoice === v.id ? `Stop ${v.id} sample` : `Play ${v.id} sample`}
+		>
+			{#if samplePlayingVoice === v.id}
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M6 6h12v12H6z"/>
+				</svg>
+			{:else}
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M8 5v14l11-7z"/>
+				</svg>
+			{/if}
+		</Button>
+	</div>
+{/snippet}
+
 <div class="mt-6 p-4 rounded-lg bg-zinc-800 border border-zinc-700">
 	<div class="flex items-center justify-between gap-2 mb-3">
 		<div class="flex items-center gap-2">
@@ -674,50 +747,25 @@
 				</Button>
 			</div>
 			<div class="max-h-64 overflow-y-auto">
-				{#each voices as v (v)}
-					<div
-						class={cn('flex items-center gap-2 px-3 py-2 hover:bg-zinc-800 transition-colors cursor-pointer', audioStore.voice === v && 'bg-amber-400/10')}
-						role="button"
-						tabindex="0"
-						onclick={() => selectVoice(v)}
-						onkeydown={(e) => e.key === 'Enter' && selectVoice(v)}
-					>
-						<!-- Selected indicator -->
-						<div class="w-4 flex-shrink-0">
-							{#if audioStore.voice === v}
-								<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
-								</svg>
-							{/if}
-						</div>
-
-						<!-- Voice name -->
-						<span class={cn('flex-1 text-xs', audioStore.voice === v ? 'text-amber-400 font-medium' : 'text-zinc-300')}>
-							{voiceLabel(v)}
-						</span>
-						<span class="text-zinc-600 text-xs font-mono">{v}</span>
-
-						<!-- Sample play button (stop propagation so click doesn't select) -->
-						<Button
-							variant="ghost"
-							size="icon"
-							class={cn('h-6 w-6 flex-shrink-0', samplePlayingVoice === v ? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25' : 'text-zinc-500 hover:text-zinc-200')}
-							onclick={(e) => { e.stopPropagation(); playSample(v); }}
-							title={samplePlayingVoice === v ? 'Stop sample' : 'Play sample'}
-							aria-label={samplePlayingVoice === v ? `Stop ${v} sample` : `Play ${v} sample`}
-						>
-							{#if samplePlayingVoice === v}
-								<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M6 6h12v12H6z"/>
-								</svg>
-							{:else}
-								<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M8 5v14l11-7z"/>
-								</svg>
-							{/if}
-						</Button>
+				<!-- Kokoro (GPU) section -->
+				{#if kokoroVoices.length > 0}
+					<div class="px-3 py-1.5 bg-zinc-800/70 border-b border-zinc-700/50">
+						<span class="text-[10px] font-semibold text-zinc-500 uppercase tracking-widest">Kokoro (GPU)</span>
 					</div>
-				{/each}
+					{#each kokoroVoices as v (v.id)}
+						{@render voiceRow(v)}
+					{/each}
+				{/if}
+
+				<!-- Pocket TTS (CPU) section -->
+				{#if pocketVoices.length > 0}
+					<div class="px-3 py-1.5 bg-zinc-800/70 border-b border-zinc-700/50 {kokoroVoices.length > 0 ? 'border-t border-zinc-700' : ''}">
+						<span class="text-[10px] font-semibold text-zinc-500 uppercase tracking-widest">Pocket TTS (CPU)</span>
+					</div>
+					{#each pocketVoices as v (v.id)}
+						{@render voiceRow(v)}
+					{/each}
+				{/if}
 			</div>
 			<div class="px-3 py-2 border-t border-zinc-700 bg-zinc-800/50">
 				<p class="text-xs text-zinc-500">