fix: announce chapter reliability — timeout fallback + eager chapters sync

Two issues causing announce to silently fail or permanently block navigation:

1. No hard timeout fallback on speechSynthesis.speak():
   Chrome Android (and some desktop) silently drops utterances not triggered
   within a user-gesture window. If both onend and onerror fail to fire (a
   known browser bug), doNavigate() was never called and the chapter
   transition was permanently lost. Added an 8-second setTimeout fallback
   (safeNavigate) that forces navigation if the speech engine never resolves.
   safeNavigate is idempotent — guarded by a 'navigated' flag so it only
   fires once even if onend, onerror, and the timeout all fire.

2. audioStore.chapters only written inside startPlayback():
   The onended handler reads audioStore.chapters to build the utterance text
   (Chapter N — Title). If auto-next navigated to this chapter and the user
   never manually pressed play (startPlayback was never called), chapters
   held whatever the previous AudioPlayer had written — potentially stale or
   empty on a book switch. Added a reactive $effect that keeps chapters in
   sync whenever the prop changes, same pattern as nextChapter.

scripts/pb-init-v3.sh

@@ -245,12 +245,17 @@ create "user_library" '{
 
 create "user_settings" '{
   "name":"user_settings","type":"base","fields":[
-    {"name":"session_id","type":"text","required":true},
-    {"name":"user_id",  "type":"text"},
-    {"name":"auto_next","type":"bool"},
-    {"name":"voice",    "type":"text"},
-    {"name":"speed",    "type":"number"},
-    {"name":"updated",  "type":"text"}
+    {"name":"session_id",      "type":"text",  "required":true},
+    {"name":"user_id",         "type":"text"},
+    {"name":"auto_next",       "type":"bool"},
+    {"name":"voice",           "type":"text"},
+    {"name":"speed",           "type":"number"},
+    {"name":"theme",           "type":"text"},
+    {"name":"locale",          "type":"text"},
+    {"name":"font_family",     "type":"text"},
+    {"name":"font_size",       "type":"number"},
+    {"name":"announce_chapter","type":"bool"},
+    {"name":"updated",         "type":"text"}
   ]}'
 
 create "user_subscriptions" '{
@@ -345,6 +350,11 @@ add_field "app_users"      "polar_subscription_id"  "text"
 add_field "user_library"   "shelf"                  "text"
 add_field "user_sessions"  "device_fingerprint"     "text"
 add_field "chapters_idx"   "created"                "date"
+add_field "user_settings"  "theme"                  "text"
+add_field "user_settings"  "locale"                 "text"
+add_field "user_settings"  "font_family"            "text"
+add_field "user_settings"  "font_size"              "number"
+add_field "user_settings"  "announce_chapter"       "bool"
 
 # ── 6. Indexes ────────────────────────────────────────────────────────────────
 add_index "chapters_idx" "idx_chapters_idx_slug_number" \

ui/src/lib/audio.svelte.ts

@@ -101,6 +101,13 @@ class AudioStore {
 	 */
 	autoNext = $state(false);
 
+	/**
+	 * When true, announces the upcoming chapter number and title via the
+	 * Web Speech API before auto-next navigation fires.
+	 * e.g. "Chapter 12 — The Final Battle"
+	 */
+	announceChapter = $state(false);
+
 	/**
 	 * The next chapter number for the currently playing chapter, or null if
 	 * there is no next chapter.  Written by the chapter page's AudioPlayer.

ui/src/lib/components/AudioPlayer.svelte

@@ -248,6 +248,12 @@
 		audioStore.nextChapter = nextChapter ?? null;
 	});
 
+	// Keep chapters list in store up to date so the layout's onended announce
+	// can find titles even if startPlayback() hasn't been called yet on this mount.
+	$effect(() => {
+		if (chapters.length > 0) audioStore.chapters = chapters;
+	});
+
 	// Keep voices in store up to date whenever prop changes.
 	$effect(() => {
 		if (voices.length > 0) audioStore.voices = voices;

ui/src/lib/components/ListeningMode.svelte

@@ -618,8 +618,8 @@
 			{/if}
 		</div>
 
-		<!-- Secondary controls: unified single row — Speed · Auto · Sleep -->
-		<div class="flex items-center justify-center gap-2 shrink-0">
+		<!-- Secondary controls: unified single row — Speed · Auto · Announce · Sleep -->
+		<div class="flex items-center justify-center gap-2 shrink-0 flex-wrap">
 			<!-- Speed — segmented pill -->
 			<div class="flex items-center gap-0.5 bg-(--color-surface-2) rounded-full px-1.5 py-1 border border-(--color-border)">
 				{#each SPEED_OPTIONS as s}
@@ -661,6 +661,25 @@
 				{/if}
 			</button>
 
+			<!-- Announce chapter pill (only meaningful when auto-next is on) -->
+			<button
+				type="button"
+				onclick={() => (audioStore.announceChapter = !audioStore.announceChapter)}
+				class={cn(
+					'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors',
+					audioStore.announceChapter
+						? 'border-(--color-brand) bg-(--color-brand)/15 text-(--color-brand)'
+						: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+				)}
+				aria-pressed={audioStore.announceChapter}
+				title={audioStore.announceChapter ? 'Chapter announcing on' : 'Chapter announcing off'}
+			>
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
+				</svg>
+				Announce
+			</button>
+
 			<!-- Sleep timer pill -->
 			<button
 				type="button"

ui/src/lib/server/pocketbase.ts

@@ -75,6 +75,7 @@ export interface PBUserSettings {
 	locale?: string;
 	font_family?: string;
 	font_size?: number;
+	announce_chapter?: boolean;
 	updated?: string;
 }
 
@@ -998,7 +999,7 @@ export async function getSettings(
 
 export async function saveSettings(
 	sessionId: string,
-	settings: { autoNext: boolean; voice: string; speed: number; theme?: string; locale?: string; fontFamily?: string; fontSize?: number },
+	settings: { autoNext: boolean; voice: string; speed: number; theme?: string; locale?: string; fontFamily?: string; fontSize?: number; announceChapter?: boolean },
 	userId?: string
 ): Promise<void> {
 	const existing = await listOne<PBUserSettings & { id: string }>(
@@ -1017,6 +1018,7 @@ export async function saveSettings(
 	if (settings.locale !== undefined) payload.locale = settings.locale;
 	if (settings.fontFamily !== undefined) payload.font_family = settings.fontFamily;
 	if (settings.fontSize !== undefined) payload.font_size = settings.fontSize;
+	if (settings.announceChapter !== undefined) payload.announce_chapter = settings.announceChapter;
 	if (userId) payload.user_id = userId;
 
 	if (existing) {

ui/src/routes/+layout.server.ts

@@ -17,7 +17,7 @@ export const load: LayoutServerLoad = async ({ locals, url, cookies }) => {
 		redirect(302, `/login`);
 	}
 
-	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0, theme: 'amber', locale: 'en', fontFamily: 'system', fontSize: 1.0 };
+	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0, theme: 'amber', locale: 'en', fontFamily: 'system', fontSize: 1.0, announceChapter: false };
 	try {
 		const row = await getSettings(locals.sessionId, locals.user?.id);
 		if (row) {
@@ -28,7 +28,8 @@ export const load: LayoutServerLoad = async ({ locals, url, cookies }) => {
 				theme: row.theme ?? 'amber',
 				locale: row.locale ?? 'en',
 				fontFamily: row.font_family ?? 'system',
-				fontSize: row.font_size || 1.0
+				fontSize: row.font_size || 1.0,
+				announceChapter: row.announce_chapter ?? false
 			};
 		}
 	} catch (e) {

ui/src/routes/+layout.svelte

@@ -107,6 +107,7 @@
 				audioStore.autoNext = data.settings.autoNext;
 				audioStore.voice = data.settings.voice;
 				audioStore.speed = data.settings.speed;
+				audioStore.announceChapter = data.settings.announceChapter ?? false;
 			}
 			// Always sync theme + font (profile page calls invalidateAll after saving)
 			currentTheme = data.settings.theme ?? 'amber';
@@ -128,6 +129,7 @@
 		const theme = currentTheme;
 		const fontFamily = currentFontFamily;
 		const fontSize = currentFontSize;
+		const announceChapter = audioStore.announceChapter;
 
 		// Skip saving until settings have been applied from the server AND
 		// at least one user-driven change has occurred after that.
@@ -138,7 +140,7 @@
 			fetch('/api/settings', {
 				method: 'PUT',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ autoNext, voice, speed, theme, fontFamily, fontSize })
+				body: JSON.stringify({ autoNext, voice, speed, theme, fontFamily, fontSize, announceChapter })
 			}).catch(() => {});
 		}, 800) as unknown as number;
 	});
@@ -361,7 +363,20 @@
 	}}
 	onended={() => {
 		audioStore.isPlaying = false;
-		saveAudioTime();
+		// Cancel any pending debounced save and reset the position to 0 for
+		// the chapter that just finished. Without this, the 2s debounce fires
+		// after navigation and saves currentTime≈duration, causing resume to
+		// start at the very end next time the user returns to this chapter.
+		clearTimeout(audioTimeSaveTimer);
+		if (audioStore.slug && audioStore.chapter) {
+			const slug = audioStore.slug;
+			const chapter = audioStore.chapter;
+			fetch('/api/progress/audio-time', {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slug, chapter, audioTime: 0 })
+			}).catch(() => {});
+		}
 		// If sleep-after-chapter is set, just pause instead of navigating
 		if (audioStore.sleepAfterChapter) {
 			audioStore.sleepAfterChapter = false;
@@ -377,9 +392,43 @@
 			// Store the target chapter number so only the newly-mounted AudioPlayer
 			// for that chapter reacts — not the outgoing chapter's component.
 			audioStore.autoStartChapter = targetChapter;
-			goto(`/books/${targetSlug}/chapters/${targetChapter}`).catch(() => {
-				audioStore.autoStartChapter = null;
-			});
+
+			// Announce the upcoming chapter via Web Speech API if enabled.
+			const doNavigate = () => {
+				goto(`/books/${targetSlug}/chapters/${targetChapter}`).catch(() => {
+					audioStore.autoStartChapter = null;
+				});
+			};
+
+			if (audioStore.announceChapter && typeof window !== 'undefined' && 'speechSynthesis' in window) {
+				const nextInfo = audioStore.chapters.find((c) => c.number === targetChapter);
+				const titlePart = nextInfo?.title ? ` — ${nextInfo.title}` : '';
+				const text = `Chapter ${targetChapter}${titlePart}`;
+				window.speechSynthesis.cancel();
+				const utterance = new SpeechSynthesisUtterance(text);
+
+				// Guard: ensure doNavigate can only fire once even if both
+				// onend and the timeout fire, or onerror fires after onend.
+				let navigated = false;
+				const safeNavigate = () => {
+					if (navigated) return;
+					navigated = true;
+					clearTimeout(announceTimeout);
+					doNavigate();
+				};
+
+				// Hard fallback: if speechSynthesis silently drops the utterance
+				// (common on Chrome Android due to gesture policy, or when the
+				// browser is busy fetching the next chapter's audio), navigate
+				// anyway after a generous 8-second window.
+				const announceTimeout = setTimeout(safeNavigate, 8000);
+
+				utterance.onend = safeNavigate;
+				utterance.onerror = safeNavigate;
+				window.speechSynthesis.speak(utterance);
+			} else {
+				doNavigate();
+			}
 		}
 	}}
 	preload="metadata"

ui/src/routes/admin/image-gen/+page.svelte

@@ -329,6 +329,12 @@
 		if (input) input.value = '';
 	}
 
+	function fmtBytes(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
 	// ── Selected model info ──────────────────────────────────────────────────────
 	let selectedModelInfo = $derived(models.find((m) => m.id === selectedModel) ?? null);
 	let refWarning = $derived(

ui/src/routes/api/settings/+server.ts

@@ -5,7 +5,7 @@ import { log } from '$lib/server/logger';
 
 /**
  * GET /api/settings
- * Returns the current user's settings (auto_next, voice, speed, theme, locale, fontFamily, fontSize).
+ * Returns the current user's settings (auto_next, voice, speed, theme, locale, fontFamily, fontSize, announceChapter).
  * Returns defaults if no settings record exists yet.
  */
 export const GET: RequestHandler = async ({ locals }) => {
@@ -18,7 +18,8 @@ export const GET: RequestHandler = async ({ locals }) => {
 			theme: settings?.theme ?? 'amber',
 			locale: settings?.locale ?? 'en',
 			fontFamily: settings?.font_family ?? 'system',
-			fontSize: settings?.font_size || 1.0
+			fontSize: settings?.font_size || 1.0,
+			announceChapter: settings?.announce_chapter ?? false
 		});
 	} catch (e) {
 		log.error('settings', 'GET failed', { err: String(e) });
@@ -28,7 +29,7 @@ export const GET: RequestHandler = async ({ locals }) => {
 
 /**
  * PUT /api/settings
- * Body: { autoNext: boolean, voice: string, speed: number, theme?: string, locale?: string, fontFamily?: string, fontSize?: number }
+ * Body: { autoNext: boolean, voice: string, speed: number, theme?: string, locale?: string, fontFamily?: string, fontSize?: number, announceChapter?: boolean }
  * Saves user preferences.
  */
 export const PUT: RequestHandler = async ({ request, locals }) => {
@@ -67,6 +68,11 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 		error(400, `Invalid fontSize — must be one of: ${validFontSizes.join(', ')}`);
 	}
 
+	// announceChapter is optional boolean
+	if (body.announceChapter !== undefined && typeof body.announceChapter !== 'boolean') {
+		error(400, 'Invalid announceChapter — must be boolean');
+	}
+
 	try {
 		await saveSettings(locals.sessionId, body, locals.user?.id);
 	} catch (e) {

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -311,14 +311,20 @@
 		return t || `Chapter ${data.chapter.number}`;
 	});
 
-	// Audio panel: auto-open if this chapter is already loaded/playing in the store
+	// Audio panel: auto-open if this chapter is already loaded/playing in the store,
+	// OR if auto-next is about to start it (autoStartChapter is set before navigation).
 	// svelte-ignore state_referenced_locally
 	let audioExpanded = $state(
-		audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number
+		(audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number) ||
+		audioStore.autoStartChapter === data.chapter.number
 	);
 	$effect(() => {
-		// Expand automatically when the store starts playing this chapter
-		if (audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number && audioStore.isPlaying) {
+		// Expand automatically when the store starts playing this chapter,
+		// or when auto-next targets this chapter (before startPlayback has run).
+		if (
+			(audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number && audioStore.isPlaying) ||
+			audioStore.autoStartChapter === data.chapter.number
+		) {
 			audioExpanded = true;
 		}
 	});

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

@@ -86,7 +86,7 @@
 	let transitioning = $state(false);
 	let showPreview = $state(false);
 	let voted = $state<{ slug: string; action: string } | null>(null); // last voted, for undo
-	let activeTab = $state<'discover' | 'history'>('discover');
+	let showHistory = $state(false);
 
 	// svelte-ignore state_referenced_locally
 	let votedBooks = $state<VotedBook[]>(data.votedBooks ?? []);
@@ -239,6 +239,16 @@
 			body: JSON.stringify({ slug: book.slug, action })
 		});
 
+		// Optimistically add/update the history list so the drawer shows it immediately.
+		// If this slug was already voted (e.g. swiped twice via undo+re-swipe), replace it.
+		const existing = votedBooks.findIndex((v) => v.slug === book.slug);
+		const entry: VotedBook = { slug: book.slug, action, votedAt: new Date().toISOString(), book };
+		if (existing !== -1) {
+			votedBooks = [entry, ...votedBooks.filter((_, i) => i !== existing)];
+		} else {
+			votedBooks = [entry, ...votedBooks];
+		}
+
 		// Fly out
 		transitioning = true;
 		const target = flyTargets[action];
@@ -426,49 +436,125 @@
 </div>
 {/if}
 
+<!-- ── History drawer ─────────────────────────────────────────────────────────── -->
+{#if showHistory}
+<div
+	class="fixed inset-0 z-40 flex items-end sm:items-center justify-center p-4"
+	role="presentation"
+	onclick={() => (showHistory = false)}
+	onkeydown={(e) => { if (e.key === 'Escape') showHistory = false; }}
+>
+	<div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+	<div
+		class="relative w-full max-w-md bg-(--color-surface-2) rounded-2xl border border-(--color-border) shadow-2xl overflow-hidden max-h-[80vh] flex flex-col"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => e.stopPropagation()}
+	>
+		<div class="flex items-center justify-between p-5 border-b border-(--color-border) flex-shrink-0">
+			<h3 class="font-bold text-(--color-text)">History {#if votedBooks.length}<span class="text-(--color-muted) font-normal text-sm">({votedBooks.length})</span>{/if}</h3>
+			<button
+				type="button"
+				onclick={() => (showHistory = false)}
+				class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+				</svg>
+			</button>
+		</div>
+		<div class="overflow-y-auto flex-1 p-4 space-y-2">
+			{#if !votedBooks.length}
+				<p class="text-center text-(--color-muted) text-sm py-12">No votes yet — start swiping!</p>
+			{:else}
+				{#each votedBooks as v (v.slug)}
+					{@const actionColor = v.action === 'like' ? 'text-green-400' : v.action === 'read_now' ? 'text-blue-400' : 'text-(--color-muted)'}
+					{@const actionLabel = v.action === 'like' ? 'Liked' : v.action === 'read_now' ? 'Read Now' : v.action === 'skip' ? 'Skipped' : 'Noped'}
+					<div class="flex items-center gap-3 bg-(--color-surface-3) rounded-xl p-3">
+						{#if v.book?.cover}
+							<img src={v.book.cover} alt="" class="w-10 h-14 rounded-md object-cover flex-shrink-0" />
+						{:else}
+							<div class="w-10 h-14 rounded-md bg-(--color-surface-2) flex-shrink-0"></div>
+						{/if}
+						<div class="flex-1 min-w-0">
+							<a href="/books/{v.slug}" class="text-sm font-semibold text-(--color-text) hover:text-(--color-brand) transition-colors line-clamp-1">
+								{v.book?.title ?? v.slug}
+							</a>
+							{#if v.book?.author}
+								<p class="text-xs text-(--color-muted) truncate">{v.book.author}</p>
+							{/if}
+							<span class="text-xs font-medium {actionColor}">{actionLabel}</span>
+						</div>
+						<button
+							type="button"
+							onclick={() => undoVote(v.slug)}
+							title="Undo"
+							class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-danger) hover:bg-(--color-danger)/10 transition-colors flex-shrink-0"
+							aria-label="Undo vote for {v.book?.title ?? v.slug}"
+						>
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+							</svg>
+						</button>
+					</div>
+				{/each}
+				<button
+					type="button"
+					onclick={resetDeck}
+					class="w-full py-2 rounded-xl text-sm text-(--color-muted) hover:text-(--color-text) transition-colors mt-2"
+				>
+					Clear all history
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>
+{/if}
+
 <!-- ── Main layout ────────────────────────────────────────────────────────────── -->
-<div class="min-h-screen bg-(--color-surface) flex flex-col items-center px-4 pt-8 pb-6 select-none">
+<div class="min-h-screen bg-(--color-surface) flex flex-col items-center px-3 pt-6 pb-6 select-none">
+
 	<!-- Header -->
-	<div class="w-full max-w-sm flex items-center justify-between mb-6">
+	<div class="w-full max-w-sm flex items-center justify-between mb-4">
 		<div>
 			<h1 class="text-xl font-bold text-(--color-text)">Discover</h1>
 			{#if !deckEmpty}
 				<p class="text-xs text-(--color-muted)">{totalRemaining} books left</p>
 			{/if}
 		</div>
-		<button
-			type="button"
-			onclick={() => { showOnboarding = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
-			title="Preferences"
-			class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
-		>
-			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
-			</svg>
-		</button>
+		<div class="flex items-center gap-1">
+			<!-- History button -->
+			<button
+				type="button"
+				onclick={() => (showHistory = true)}
+				title="History"
+				class="relative w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+			>
+				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+				</svg>
+				{#if votedBooks.length}
+					<span class="absolute -top-0.5 -right-0.5 w-4 h-4 rounded-full bg-(--color-brand) text-(--color-surface) text-[9px] font-bold flex items-center justify-center leading-none">
+						{votedBooks.length > 9 ? '9+' : votedBooks.length}
+					</span>
+				{/if}
+			</button>
+			<!-- Preferences button -->
+			<button
+				type="button"
+				onclick={() => { showOnboarding = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
+				title="Preferences"
+				class="w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+			>
+				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
+				</svg>
+			</button>
+		</div>
 	</div>
 
-	<!-- Tab switcher -->
-	<div class="flex gap-1 bg-(--color-surface-2) rounded-xl p-1 w-full max-w-sm border border-(--color-border) mb-4">
-		<button
-			type="button"
-			onclick={() => (activeTab = 'discover')}
-			class="flex-1 py-2 rounded-lg text-sm font-medium transition-colors
-				{activeTab === 'discover' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
-		>
-			Discover
-		</button>
-		<button
-			type="button"
-			onclick={() => (activeTab = 'history')}
-			class="flex-1 py-2 rounded-lg text-sm font-medium transition-colors
-				{activeTab === 'history' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
-		>
-			History {#if votedBooks.length}({votedBooks.length}){/if}
-		</button>
-	</div>
-
-	{#if activeTab === 'discover'}
 	{#if deckEmpty}
 		<!-- Empty state -->
 		<div class="flex-1 flex flex-col items-center justify-center gap-6 text-center max-w-xs">
@@ -501,8 +587,9 @@
 		</div>
 	{:else}
 		{@const book = currentBook!}
-		<!-- Card stack -->
-		<div class="w-full max-w-sm relative" style="aspect-ratio: 3/4.2;">
+
+		<!-- Card stack — fills available width, taller ratio -->
+		<div class="w-full max-w-sm relative" style="aspect-ratio: 3/4.6;">
 
 			<!-- Back card 2 -->
 			{#if nextNextBook}
@@ -561,9 +648,9 @@
 				{/if}
 
 				<!-- Bottom gradient + info -->
-				<div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/25 to-transparent pointer-events-none"></div>
+				<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent pointer-events-none"></div>
 				<div class="absolute bottom-0 left-0 right-0 p-5 pointer-events-none">
-					<h2 class="text-white font-bold text-xl leading-snug line-clamp-2 mb-1">{book.title}</h2>
+					<h2 class="text-white font-bold text-2xl leading-snug line-clamp-2 mb-1">{book.title}</h2>
 					{#if book.author}
 						<p class="text-white/70 text-sm mb-2">{book.author}</p>
 					{/if}
@@ -582,164 +669,91 @@
 
 				<!-- LIKE indicator (right swipe) -->
 				<div
-					class="absolute top-8 right-6 px-3 py-1.5 rounded-lg border-2 border-green-400 rotate-[-15deg] pointer-events-none"
+					class="absolute top-8 right-6 px-4 py-2 rounded-xl border-[3px] border-green-400 rotate-[-15deg] pointer-events-none bg-green-400/10"
 					style="opacity: {indicator === 'like' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-green-400 font-black text-lg tracking-widest">LIKE</span>
+					<span class="text-green-400 font-black text-2xl tracking-widest">LIKE</span>
 				</div>
 
 				<!-- SKIP indicator (left swipe) -->
 				<div
-					class="absolute top-8 left-6 px-3 py-1.5 rounded-lg border-2 border-red-400 rotate-[15deg] pointer-events-none"
+					class="absolute top-8 left-6 px-4 py-2 rounded-xl border-[3px] border-red-400 rotate-[15deg] pointer-events-none bg-red-400/10"
 					style="opacity: {indicator === 'skip' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-red-400 font-black text-lg tracking-widest">SKIP</span>
+					<span class="text-red-400 font-black text-2xl tracking-widest">SKIP</span>
 				</div>
 
 				<!-- READ NOW indicator (swipe up) -->
 				<div
-					class="absolute top-8 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-lg border-2 border-blue-400 pointer-events-none"
+					class="absolute top-8 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl border-[3px] border-blue-400 pointer-events-none bg-blue-400/10"
 					style="opacity: {indicator === 'read_now' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-blue-400 font-black text-lg tracking-widest">READ NOW</span>
+					<span class="text-blue-400 font-black text-2xl tracking-widest">READ NOW</span>
 				</div>
 
 				<!-- NOPE indicator (swipe down) -->
 				<div
-					class="absolute bottom-28 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-lg border-2 border-(--color-muted) pointer-events-none"
+					class="absolute bottom-32 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl border-[3px] border-zinc-400 pointer-events-none bg-black/20"
 					style="opacity: {indicator === 'nope' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-(--color-muted) font-black text-lg tracking-widest">NOPE</span>
+					<span class="text-zinc-300 font-black text-2xl tracking-widest">NOPE</span>
 				</div>
 			</div>
 			{/if}
 		</div>
 
-		<!-- Action buttons -->
-		<div class="w-full max-w-sm flex items-center justify-center gap-4 mt-6">
-			<!-- Skip (left) -->
+		<!-- Action buttons — 3 prominent labeled buttons -->
+		<div class="w-full max-w-sm flex items-stretch gap-3 mt-5">
+			<!-- Skip -->
 			<button
 				type="button"
 				onclick={() => doAction('skip')}
 				disabled={animating}
 				title="Skip"
-				class="w-14 h-14 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-red-400 hover:bg-red-400/10 hover:border-red-400/40 hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
+				class="flex-1 flex flex-col items-center justify-center gap-1.5 py-3.5 rounded-2xl
+					bg-red-500/15 border border-red-500/30 text-red-400
+					hover:bg-red-500/25 hover:border-red-500/50
+					active:scale-95 transition-all disabled:opacity-40"
 			>
 				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
 				</svg>
+				<span class="text-xs font-bold tracking-wide">Skip</span>
 			</button>
 
-			<!-- Read Now (up) -->
+			<!-- Read Now — center, most prominent -->
 			<button
 				type="button"
 				onclick={() => doAction('read_now')}
 				disabled={animating}
 				title="Read Now"
-				class="w-12 h-12 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-blue-400 hover:bg-blue-400/10 hover:border-blue-400/40 hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
+				class="flex-[1.4] flex flex-col items-center justify-center gap-1.5 py-3.5 rounded-2xl
+					bg-blue-500 text-white
+					hover:bg-blue-400
+					active:scale-95 transition-all disabled:opacity-40 shadow-lg shadow-blue-500/25"
 			>
-				<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M8 5v14l11-7z"/>
 				</svg>
+				<span class="text-xs font-bold tracking-wide">Read Now</span>
 			</button>
 
-			<!-- Preview (center) -->
-			<button
-				type="button"
-				onclick={() => (showPreview = true)}
-				disabled={animating}
-				title="Details"
-				class="w-10 h-10 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3) hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
-			>
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-				</svg>
-			</button>
-
-			<!-- Like (right) -->
+			<!-- Like -->
 			<button
 				type="button"
 				onclick={() => doAction('like')}
 				disabled={animating}
 				title="Add to Library"
-				class="w-14 h-14 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-(--color-success) hover:bg-green-400/10 hover:border-green-400/40 hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
+				class="flex-1 flex flex-col items-center justify-center gap-1.5 py-3.5 rounded-2xl
+					bg-green-500/15 border border-green-500/30 text-green-400
+					hover:bg-green-500/25 hover:border-green-500/50
+					active:scale-95 transition-all disabled:opacity-40"
 			>
 				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
 				</svg>
-			</button>
-
-			<!-- Nope (down) -->
-			<button
-				type="button"
-				onclick={() => doAction('nope')}
-				disabled={animating}
-				title="Never show again"
-				class="w-12 h-12 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-(--color-muted) hover:text-(--color-muted)/60 hover:bg-(--color-surface-3) hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
-			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
-				</svg>
+				<span class="text-xs font-bold tracking-wide">Like</span>
 			</button>
 		</div>
-
-		<!-- Swipe hint (shown briefly) -->
-		<p class="mt-4 text-xs text-(--color-muted)/50 text-center">
-			Swipe or tap buttons · Tap card for details
-		</p>
-	{/if}
-	{/if}
-
-	{#if activeTab === 'history'}
-	<div class="w-full max-w-sm space-y-2">
-		{#if !votedBooks.length}
-			<p class="text-center text-(--color-muted) text-sm py-12">No votes yet — start swiping!</p>
-		{:else}
-			{#each votedBooks as v (v.slug)}
-				{@const actionColor = v.action === 'like' ? 'text-green-400' : v.action === 'read_now' ? 'text-blue-400' : 'text-(--color-muted)'}
-				{@const actionLabel = v.action === 'like' ? 'Liked' : v.action === 'read_now' ? 'Read Now' : v.action === 'skip' ? 'Skipped' : 'Noped'}
-				<div class="flex items-center gap-3 bg-(--color-surface-2) rounded-xl border border-(--color-border) p-3">
-					<!-- Cover thumbnail -->
-					{#if v.book?.cover}
-						<img src={v.book.cover} alt="" class="w-10 h-14 rounded-md object-cover flex-shrink-0" />
-					{:else}
-						<div class="w-10 h-14 rounded-md bg-(--color-surface-3) flex-shrink-0"></div>
-					{/if}
-
-					<!-- Info -->
-					<div class="flex-1 min-w-0">
-						<a href="/books/{v.slug}" class="text-sm font-semibold text-(--color-text) hover:text-(--color-brand) transition-colors line-clamp-1">
-							{v.book?.title ?? v.slug}
-						</a>
-						{#if v.book?.author}
-							<p class="text-xs text-(--color-muted) truncate">{v.book.author}</p>
-						{/if}
-						<span class="text-xs font-medium {actionColor}">{actionLabel}</span>
-					</div>
-
-					<!-- Undo button -->
-					<button
-						type="button"
-						onclick={() => undoVote(v.slug)}
-						title="Undo"
-						class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-danger) hover:bg-(--color-danger)/10 transition-colors flex-shrink-0"
-						aria-label="Undo vote for {v.book?.title ?? v.slug}"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
-						</svg>
-					</button>
-				</div>
-			{/each}
-
-			<button
-				type="button"
-				onclick={resetDeck}
-				class="w-full py-2 rounded-xl text-sm text-(--color-muted) hover:text-(--color-text) transition-colors mt-2"
-			>
-				Clear all history
-			</button>
-		{/if}
-	</div>
 	{/if}
 </div>