feat: profile stats, discover history, end-of-chapter sleep, rating-ranked deck

**Profile stats tab**
- New Stats tab on /profile page (Profile / Stats switcher)
- Reading overview: chapters read, completed, reading, plan-to-read counts
- Activity cards: day streak + avg rating given
- Favourite genres (top 3 by frequency across library/progress)
- getUserStats() in pocketbase.ts — computes streak, shelf counts, genre freq

**Discover history tab**
- New History tab on /discover with full voted-book list
- Per-entry: cover thumbnail, title link, author, action label (Liked/Skipped/etc.)
- Undo button: optimistic update + DELETE /api/discover/vote?slug=...
- Clear all history button; tab shows vote count badge
- getVotedBooks(), undoDiscoveryVote() in pocketbase.ts

**Rating-ranked discovery deck**
- getBooksForDiscovery now sorts by community avg rating before returning
- Tier-based shuffle: books within the same ±0.5 star bucket are still randomised
- Higher-rated books surface earlier without making the deck fully deterministic

**End-of-chapter sleep timer**
- New cycle option: Off → End of Chapter → 15m → 30m → 45m → 60m → Off
- sleepAfterChapter flag in AudioStore; layout handles it in onended (skips auto-next)
- Button shows "End Ch." label when active in this mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/lib/audio.svelte.ts

@@ -79,6 +79,9 @@ class AudioStore {
 	/** Epoch ms when sleep timer should fire. 0 = off. */
 	sleepUntil = $state(0);
 
+	/** When true, pause after the current chapter ends instead of navigating. */
+	sleepAfterChapter = $state(false);
+
 	// ── Auto-next ────────────────────────────────────────────────────────────
 	/**
 	 * When true, navigates to the next chapter when the current one ends

ui/src/lib/components/AudioPlayer.svelte

@@ -699,16 +699,22 @@
 	});
 
 	function cycleSleepTimer() {
-		if (!audioStore.sleepUntil) {
-			// Start at first option (15 min)
+		// Currently: no timer active at all
+		if (!audioStore.sleepUntil && !audioStore.sleepAfterChapter) {
+			audioStore.sleepAfterChapter = true;
+			return;
+		}
+		// Currently: end-of-chapter mode — move to 15m
+		if (audioStore.sleepAfterChapter) {
+			audioStore.sleepAfterChapter = false;
 			audioStore.sleepUntil = Date.now() + SLEEP_OPTIONS[0] * 60 * 1000;
 			return;
 		}
+		// Currently: timed mode — cycle to next or turn off
 		const remaining = audioStore.sleepUntil - Date.now();
 		const currentMin = Math.round(remaining / 60000);
-		const idx = SLEEP_OPTIONS.findIndex(m => m >= currentMin);
+		const idx = SLEEP_OPTIONS.findIndex((m) => m >= currentMin);
 		if (idx === -1 || idx === SLEEP_OPTIONS.length - 1) {
-			// Was at max or past last — turn off
 			audioStore.sleepUntil = 0;
 		} else {
 			audioStore.sleepUntil = Date.now() + SLEEP_OPTIONS[idx + 1] * 60 * 1000;
@@ -933,14 +939,20 @@
 				<Button
 					variant="ghost"
 					size="sm"
-					class={cn('gap-1 text-xs flex-shrink-0', audioStore.sleepUntil ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : 'text-(--color-muted)')}
+					class={cn('gap-1 text-xs flex-shrink-0', audioStore.sleepUntil || audioStore.sleepAfterChapter ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : 'text-(--color-muted)')}
 					onclick={cycleSleepTimer}
-					title={audioStore.sleepUntil ? `Sleep timer: ${formatSleepRemaining(sleepRemainingSec)} remaining` : 'Sleep timer off'}
+					title={audioStore.sleepAfterChapter
+						? 'Stop after this chapter'
+						: audioStore.sleepUntil
+							? `Sleep timer: ${formatSleepRemaining(sleepRemainingSec)} remaining`
+							: 'Sleep timer off'}
 				>
 					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
 					</svg>
-					{#if audioStore.sleepUntil}
+					{#if audioStore.sleepAfterChapter}
+						End Ch.
+					{:else if audioStore.sleepUntil}
 						{formatSleepRemaining(sleepRemainingSec)}
 					{:else}
 						Sleep

ui/src/lib/server/pocketbase.ts

@@ -542,7 +542,7 @@ export async function unsaveBook(
 
 // ─── Users ────────────────────────────────────────────────────────────────────
 
-import { scryptSync, randomBytes, timingSafeEqual } from 'node:crypto';
+import { scryptSync, randomBytes, timingSafeEqual, createHash } from 'node:crypto';
 
 function hashPassword(password: string): string {
 	const salt = randomBytes(16).toString('hex');
@@ -1003,12 +1003,79 @@ export interface UserSession {
 	session_id: string; // the auth session ID embedded in the token
 	user_agent: string;
 	ip: string;
+	device_fingerprint: string;
 	created_at: string;
 	last_seen: string;
 }
 
 /**
- * Create a new session record on login. Returns the record ID.
+ * Generate a short device fingerprint from user-agent + IP.
+ * SHA-256 of the concatenation, first 16 hex chars.
+ */
+function deviceFingerprint(userAgent: string, ip: string): string {
+	return createHash('sha256')
+		.update(`${userAgent}::${ip}`)
+		.digest('hex')
+		.slice(0, 16);
+}
+
+/**
+ * Upsert a session record on login.
+ * - If a session already exists for this user + device fingerprint, touch it and
+ *   return the existing authSessionId (so the caller can reuse the same token).
+ * - Otherwise create a new record.
+ * Returns `{ authSessionId, recordId }`.
+ */
+export async function upsertUserSession(
+	userId: string,
+	authSessionId: string,
+	userAgent: string,
+	ip: string
+): Promise<{ authSessionId: string; recordId: string }> {
+	const fp = deviceFingerprint(userAgent, ip);
+
+	// Look for an existing session from the same device
+	const existing = await listOne<UserSession>(
+		'user_sessions',
+		`user_id="${userId}" && device_fingerprint="${fp}"`
+	);
+
+	if (existing) {
+		// Touch last_seen and return the existing authSessionId
+		const token = await getToken();
+		await fetch(`${PB_URL}/api/collections/user_sessions/records/${existing.id}`, {
+			method: 'PATCH',
+			headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+			body: JSON.stringify({ last_seen: new Date().toISOString() })
+		}).catch(() => {});
+		return { authSessionId: existing.session_id, recordId: existing.id };
+	}
+
+	// Create a new session record
+	const now = new Date().toISOString();
+	const res = await pbPost('/api/collections/user_sessions/records', {
+		user_id: userId,
+		session_id: authSessionId,
+		user_agent: userAgent,
+		ip,
+		device_fingerprint: fp,
+		created_at: now,
+		last_seen: now
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		log.error('pocketbase', 'upsertUserSession POST failed', { userId, status: res.status, body });
+		throw new Error(`Failed to create session: ${res.status}`);
+	}
+	const rec = (await res.json()) as { id: string };
+	// Best-effort: prune stale/excess sessions in the background
+	pruneStaleUserSessions(userId).catch(() => {});
+	return { authSessionId, recordId: rec.id };
+}
+
+/**
+ * @deprecated Use upsertUserSession instead.
+ * Kept temporarily so callers can be migrated incrementally.
  */
 export async function createUserSession(
 	userId: string,
@@ -1016,24 +1083,8 @@ export async function createUserSession(
 	userAgent: string,
 	ip: string
 ): Promise<string> {
-	const now = new Date().toISOString();
-	const res = await pbPost('/api/collections/user_sessions/records', {
-		user_id: userId,
-		session_id: authSessionId,
-		user_agent: userAgent,
-		ip,
-		created_at: now,
-		last_seen: now
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		log.error('pocketbase', 'createUserSession POST failed', { userId, status: res.status, body });
-		throw new Error(`Failed to create session: ${res.status}`);
-	}
-	const rec = (await res.json()) as { id: string };
-	// Best-effort: prune stale sessions in the background so the list doesn't grow forever
-	pruneStaleUserSessions(userId).catch(() => {});
-	return rec.id;
+	const { recordId } = await upsertUserSession(userId, authSessionId, userAgent, ip);
+	return recordId;
 }
 
 /**
@@ -1070,20 +1121,37 @@ export async function listUserSessions(userId: string): Promise<UserSession[]> {
 }
 
 /**
- * Delete sessions for a user that haven't been seen in the last `days` days.
+ * Delete sessions for a user that haven't been seen in the last `days` days,
+ * and cap the total number of sessions at `maxSessions` (pruning oldest first).
  * Called on login so the list self-cleans without a separate cron job.
  */
-async function pruneStaleUserSessions(userId: string, days = 30): Promise<void> {
-	const cutoff = new Date(Date.now() - days * 24 * 60 * 60 * 1000).toISOString();
-	const stale = await listAll<UserSession>(
-		'user_sessions',
-		`user_id="${userId}" && last_seen<"${cutoff}"`
-	);
-	if (stale.length === 0) return;
+async function pruneStaleUserSessions(
+	userId: string,
+	days = 30,
+	maxSessions = 10
+): Promise<void> {
 	const token = await getToken();
+	const all = await listAll<UserSession>('user_sessions', `user_id="${userId}"`, '-last_seen');
+
+	const cutoff = new Date(Date.now() - days * 24 * 60 * 60 * 1000).toISOString();
+	const toDelete = new Set<string>();
+
+	// Mark stale sessions
+	for (const s of all) {
+		if (s.last_seen < cutoff) toDelete.add(s.id);
+	}
+
+	// Mark excess sessions beyond the cap (oldest first — list is sorted -last_seen)
+	const remaining = all.filter((s) => !toDelete.has(s.id));
+	if (remaining.length > maxSessions) {
+		remaining.slice(maxSessions).forEach((s) => toDelete.add(s.id));
+	}
+
+	if (toDelete.size === 0) return;
+
 	await Promise.all(
-		stale.map((s) =>
-			fetch(`${PB_URL}/api/collections/user_sessions/records/${s.id}`, {
+		[...toDelete].map((id) =>
+			fetch(`${PB_URL}/api/collections/user_sessions/records/${id}`, {
 				method: 'DELETE',
 				headers: { Authorization: `Bearer ${token}` }
 			}).catch(() => {})
@@ -1847,11 +1915,167 @@ export async function getBooksForDiscovery(
 		if (sf.length >= 3) candidates = sf;
 	}
 
-	// Fisher-Yates shuffle
-	for (let i = candidates.length - 1; i > 0; i--) {
-		const j = Math.floor(Math.random() * (i + 1));
-		[candidates[i], candidates[j]] = [candidates[j], candidates[i]];
+	// Fetch avg ratings for candidates, weight top-rated books to surface earlier.
+	// Fetch in one shot for all candidate slugs. Low-rated / unrated books still
+	// appear — they're just pushed further back via a stable sort before shuffle.
+	const ratingRows = await listAll<BookRating>('book_ratings', '').catch(() => [] as BookRating[]);
+	const ratingMap = new Map<string, { sum: number; count: number }>();
+	for (const r of ratingRows) {
+		const cur = ratingMap.get(r.slug) ?? { sum: 0, count: 0 };
+		cur.sum += r.rating;
+		cur.count += 1;
+		ratingMap.set(r.slug, cur);
+	}
+	const avgRating = (slug: string) => {
+		const e = ratingMap.get(slug);
+		return e && e.count > 0 ? e.sum / e.count : 0;
+	};
+
+	// Sort by avg desc (unrated = 0, treated as unknown → middle of pack after rated)
+	// Then apply Fisher-Yates only within each rating tier so ordering feels natural.
+	candidates.sort((a, b) => avgRating(b.slug) - avgRating(a.slug));
+
+	// Shuffle within rating tiers (±0.5 star buckets) to avoid pure determinism
+	const tierOf = (slug: string) => Math.round(avgRating(slug) * 2); // 0–10
+	let start = 0;
+	while (start < candidates.length) {
+		let end = start + 1;
+		while (end < candidates.length && tierOf(candidates[end].slug) === tierOf(candidates[start].slug)) end++;
+		for (let i = end - 1; i > start; i--) {
+			const j = start + Math.floor(Math.random() * (i - start + 1));
+			[candidates[i], candidates[j]] = [candidates[j], candidates[i]];
+		}
+		start = end;
 	}
 
 	return candidates.slice(0, 50);
 }
+
+// ─── Discovery history ─────────────────────────────────────────────────────────
+
+export interface VotedBook {
+	slug: string;
+	action: DiscoveryVote['action'];
+	votedAt: string;
+	book?: Book;
+}
+
+export async function getVotedBooks(
+	sessionId: string,
+	userId?: string
+): Promise<VotedBook[]> {
+	const votes = await listAll<DiscoveryVote & { id: string; created: string }>(
+		'discovery_votes',
+		discoveryFilter(sessionId, userId),
+		'-created'
+	).catch(() => []);
+
+	if (!votes.length) return [];
+
+	const slugs = [...new Set(votes.map((v) => v.slug))];
+	const books = await getBooksBySlugs(new Set(slugs)).catch(() => [] as Book[]);
+	const bookMap = new Map(books.map((b) => [b.slug, b]));
+
+	return votes.map((v) => ({
+		slug: v.slug,
+		action: v.action,
+		votedAt: v.created,
+		book: bookMap.get(v.slug)
+	}));
+}
+
+export async function undoDiscoveryVote(
+	sessionId: string,
+	slug: string,
+	userId?: string
+): Promise<void> {
+	const filter = `${discoveryFilter(sessionId, userId)}&&slug="${slug}"`;
+	const row = await listOne<{ id: string }>('discovery_votes', filter).catch(() => null);
+	if (row) {
+		await pbDelete(`/api/collections/discovery_votes/records/${row.id}`).catch(() => {});
+	}
+}
+
+// ─── User stats ────────────────────────────────────────────────────────────────
+
+export interface UserStats {
+	totalChaptersRead: number;
+	booksReading: number;
+	booksCompleted: number;
+	booksPlanToRead: number;
+	booksDropped: number;
+	topGenres: string[];       // top 3 by frequency
+	avgRatingGiven: number;    // 0 if no ratings
+	streak: number;            // consecutive days with progress
+}
+
+export async function getUserStats(
+	sessionId: string,
+	userId?: string
+): Promise<UserStats> {
+	const filter = userId ? `user_id="${userId}"` : `session_id="${sessionId}"`;
+
+	const [progressRows, libraryRows, ratingRows, allBooks] = await Promise.all([
+		listAll<Progress & { updated: string }>('progress', filter, '-updated').catch(() => []),
+		listAll<{ slug: string; shelf: string }>('user_library', filter).catch(() => []),
+		listAll<BookRating>('book_ratings', filter).catch(() => []),
+		listBooks().catch(() => [] as Book[])
+	]);
+
+	// shelf counts
+	const shelfCounts = { reading: 0, completed: 0, plan_to_read: 0, dropped: 0 };
+	for (const r of libraryRows) {
+		const s = r.shelf || 'reading';
+		if (s in shelfCounts) shelfCounts[s as keyof typeof shelfCounts]++;
+	}
+
+	// top genres from books in progress/library
+	const libSlugs = new Set(libraryRows.map((r) => r.slug));
+	const progSlugs = new Set(progressRows.map((r) => r.slug));
+	const allSlugs = new Set([...libSlugs, ...progSlugs]);
+	const bookMap = new Map(allBooks.map((b) => [b.slug, b]));
+	const genreFreq = new Map<string, number>();
+	for (const slug of allSlugs) {
+		const book = bookMap.get(slug);
+		if (!book) continue;
+		for (const g of parseGenresLocal(book.genres)) {
+			genreFreq.set(g, (genreFreq.get(g) ?? 0) + 1);
+		}
+	}
+	const topGenres = [...genreFreq.entries()]
+		.sort((a, b) => b[1] - a[1])
+		.slice(0, 3)
+		.map(([g]) => g);
+
+	// avg rating given
+	const avgRatingGiven =
+		ratingRows.length > 0
+			? Math.round((ratingRows.reduce((s, r) => s + r.rating, 0) / ratingRows.length) * 10) / 10
+			: 0;
+
+	// reading streak: count consecutive calendar days (UTC) with a progress update
+	const days = new Set(
+		progressRows
+			.filter((r) => r.updated)
+			.map((r) => r.updated.slice(0, 10))
+	);
+	let streak = 0;
+	const today = new Date();
+	for (let i = 0; i < 365; i++) {
+		const d = new Date(today);
+		d.setUTCDate(d.getUTCDate() - i);
+		if (days.has(d.toISOString().slice(0, 10))) streak++;
+		else if (i > 0) break; // gap — stop
+	}
+
+	return {
+		totalChaptersRead: progressRows.length,
+		booksReading: shelfCounts.reading,
+		booksCompleted: shelfCounts.completed,
+		booksPlanToRead: shelfCounts.plan_to_read,
+		booksDropped: shelfCounts.dropped,
+		topGenres,
+		avgRatingGiven,
+		streak
+	};
+}

ui/src/routes/+layout.svelte

@@ -289,6 +289,12 @@
 	onended={() => {
 		audioStore.isPlaying = false;
 		saveAudioTime();
+		// If sleep-after-chapter is set, just pause instead of navigating
+		if (audioStore.sleepAfterChapter) {
+			audioStore.sleepAfterChapter = false;
+			// Don't navigate — just let it end. Audio is already stopped (ended).
+			return;
+		}
 		if (audioStore.autoNext && audioStore.nextChapter !== null && audioStore.slug) {
 			// Capture values synchronously before any async work — the AudioPlayer
 			// component will unmount during navigation, but we've already read what

ui/src/routes/api/auth/login/+server.ts

@@ -1,6 +1,6 @@
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { loginUser, mergeSessionProgress, createUserSession } from '$lib/server/pocketbase';
+import { loginUser, mergeSessionProgress, upsertUserSession } from '$lib/server/pocketbase';
 import { createAuthToken } from '../../../../hooks.server';
 import { log } from '$lib/server/logger';
 import { randomBytes } from 'node:crypto';
@@ -48,16 +48,20 @@ export const POST: RequestHandler = async ({ request, cookies, locals }) => {
 		log.warn('api/auth/login', 'mergeSessionProgress failed (non-fatal)', { err: String(e) })
 	);
 
-	const authSessionId = randomBytes(16).toString('hex');
+	const candidateSessionId = randomBytes(16).toString('hex');
 
 	const userAgent = request.headers.get('user-agent') ?? '';
 	const ip =
 		request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??
 		request.headers.get('x-real-ip') ??
 		'';
-	createUserSession(user.id, authSessionId, userAgent, ip).catch((e) =>
-		log.warn('api/auth/login', 'createUserSession failed (non-fatal)', { err: String(e) })
-	);
+
+	let authSessionId = candidateSessionId;
+	try {
+		({ authSessionId } = await upsertUserSession(user.id, candidateSessionId, userAgent, ip));
+	} catch (e) {
+		log.warn('api/auth/login', 'upsertUserSession failed (non-fatal)', { err: String(e) });
+	}
 
 	const token = createAuthToken(user.id, user.username, user.role ?? 'user', authSessionId);
 

ui/src/routes/api/discover/vote/+server.ts

@@ -1,6 +1,6 @@
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { upsertDiscoveryVote, clearDiscoveryVotes, saveBook } from '$lib/server/pocketbase';
+import { upsertDiscoveryVote, clearDiscoveryVotes, undoDiscoveryVote, saveBook } from '$lib/server/pocketbase';
 
 const VALID_ACTIONS = ['like', 'skip', 'nope', 'read_now'] as const;
 type Action = (typeof VALID_ACTIONS)[number];
@@ -22,9 +22,16 @@ export const POST: RequestHandler = async ({ request, locals }) => {
 	return json({ ok: true });
 };
 
-export const DELETE: RequestHandler = async ({ locals }) => {
+// DELETE /api/discover/vote          → clear all (deck reset)
+// DELETE /api/discover/vote?slug=... → undo single vote
+export const DELETE: RequestHandler = async ({ url, locals }) => {
+	const slug = url.searchParams.get('slug');
 	try {
-		await clearDiscoveryVotes(locals.sessionId, locals.user?.id);
+		if (slug) {
+			await undoDiscoveryVote(locals.sessionId, slug, locals.user?.id);
+		} else {
+			await clearDiscoveryVotes(locals.sessionId, locals.user?.id);
+		}
 	} catch {
 		error(500, 'Failed to clear votes');
 	}

ui/src/routes/auth/[provider]/callback/+server.ts

@@ -25,7 +25,7 @@ import {
 	linkOAuthToUser
 } from '$lib/server/pocketbase';
 import { createAuthToken } from '../../../../hooks.server';
-import { createUserSession, touchUserSession, mergeSessionProgress } from '$lib/server/pocketbase';
+import { upsertUserSession, mergeSessionProgress } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 
 type Provider = 'google' | 'github';
@@ -159,7 +159,7 @@ function deriveUsername(name: string, email: string): string {
 
 // ─── Handler ──────────────────────────────────────────────────────────────────
 
-export const GET: RequestHandler = async ({ params, url, cookies, locals }) => {
+export const GET: RequestHandler = async ({ params, url, cookies, locals, request }) => {
 	const provider = params.provider as Provider;
 	if (provider !== 'google' && provider !== 'github') {
 		error(404, 'Unknown OAuth provider');
@@ -226,21 +226,19 @@ export const GET: RequestHandler = async ({ params, url, cookies, locals }) => {
 		log.warn('oauth', 'mergeSessionProgress failed (non-fatal)', { err: String(err) })
 	);
 
-	// ── Create session + auth cookie ──────────────────────────────────────────
+	// ── Create / reuse session + auth cookie ─────────────────────────────────
+	const userAgent = request.headers.get('user-agent') ?? '';
+	const ip =
+		request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??
+		request.headers.get('x-real-ip') ??
+		'';
+	const candidateSessionId = randomBytes(16).toString('hex');
 	let authSessionId: string;
-
-	// Reuse existing session if the user is already logged in as the same user
-	if (locals.user?.id === user.id && locals.user?.authSessionId) {
-		authSessionId = locals.user.authSessionId;
-		// Just touch the existing session to update last_seen
-		touchUserSession(authSessionId).catch(() => {});
-	} else {
-		authSessionId = randomBytes(16).toString('hex');
-		const userAgent = ''; // not available in RequestHandler — omit
-		const ip = '';
-		createUserSession(user.id, authSessionId, userAgent, ip).catch((err) =>
-			log.warn('oauth', 'createUserSession failed (non-fatal)', { err: String(err) })
-		);
+	try {
+		({ authSessionId } = await upsertUserSession(user.id, candidateSessionId, userAgent, ip));
+	} catch (err) {
+		log.warn('oauth', 'upsertUserSession failed (non-fatal)', { err: String(err) });
+		authSessionId = candidateSessionId;
 	}
 
 	const token = createAuthToken(user.id, user.username, user.role ?? 'user', authSessionId);

ui/src/routes/discover/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from './$types';
-import { getBooksForDiscovery } from '$lib/server/pocketbase';
+import { getBooksForDiscovery, getVotedBooks } from '$lib/server/pocketbase';
 import type { DiscoveryPrefs } from '$lib/server/pocketbase';
 
 export const load: PageServerLoad = async ({ locals, url }) => {
@@ -9,6 +9,9 @@ export const load: PageServerLoad = async ({ locals, url }) => {
 		try { prefs = JSON.parse(prefsParam) as DiscoveryPrefs; } catch { /* ignore */ }
 	}
 
-	const books = await getBooksForDiscovery(locals.sessionId, locals.user?.id, prefs).catch(() => []);
-	return { books };
+	const [books, votedBooks] = await Promise.all([
+		getBooksForDiscovery(locals.sessionId, locals.user?.id, prefs).catch(() => []),
+		getVotedBooks(locals.sessionId, locals.user?.id).catch(() => [])
+	]);
+	return { books, votedBooks };
 };

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

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import type { PageData } from './$types';
-	import type { Book } from '$lib/server/pocketbase';
+	import type { Book, VotedBook } from '$lib/server/pocketbase';
 
 	let { data }: { data: PageData } = $props();
 
@@ -83,6 +83,20 @@
 	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 votedBooks = $state<VotedBook[]>(data.votedBooks ?? []);
+
+	// Keep in sync if server data refreshes
+	$effect(() => {
+		votedBooks = data.votedBooks ?? [];
+	});
+
+	async function undoVote(slug: string) {
+		// Optimistic update
+		votedBooks = votedBooks.filter((v) => v.slug !== slug);
+		await fetch(`/api/discover/vote?slug=${encodeURIComponent(slug)}`, { method: 'DELETE' });
+	}
 
 	let startX = 0, startY = 0, hasMoved = false;
 
@@ -207,8 +221,8 @@
 
 	async function resetDeck() {
 		await fetch('/api/discover/vote', { method: 'DELETE' });
+		votedBooks = [];
 		idx = 0;
-		// Reload page to get fresh server data
 		window.location.reload();
 	}
 </script>
@@ -389,6 +403,27 @@
 		</button>
 	</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">
@@ -606,4 +641,58 @@
 			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>

ui/src/routes/profile/+page.server.ts

@@ -1,6 +1,6 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { listUserSessions, getUserByUsername } from '$lib/server/pocketbase';
+import { listUserSessions, getUserByUsername, getUserStats } from '$lib/server/pocketbase';
 import { resolveAvatarUrl } from '$lib/server/minio';
 import { log } from '$lib/server/logger';
 
@@ -12,6 +12,7 @@ export const load: PageServerLoad = async ({ locals }) => {
 	let sessions: Awaited<ReturnType<typeof listUserSessions>> = [];
 	let email: string | null = null;
 	let polarCustomerId: string | null = null;
+	let stats: Awaited<ReturnType<typeof getUserStats>> | null = null;
 
 	// Fetch avatar — MinIO first, fall back to OAuth provider picture
 	let avatarUrl: string | null = null;
@@ -25,9 +26,12 @@ export const load: PageServerLoad = async ({ locals }) => {
 	}
 
 	try {
-		sessions = await listUserSessions(locals.user.id);
+		[sessions, stats] = await Promise.all([
+			listUserSessions(locals.user.id),
+			getUserStats(locals.sessionId, locals.user.id)
+		]);
 	} catch (e) {
-		log.warn('profile', 'listUserSessions failed (non-fatal)', { err: String(e) });
+		log.warn('profile', 'load failed (non-fatal)', { err: String(e) });
 	}
 
 	return {
@@ -35,6 +39,11 @@ export const load: PageServerLoad = async ({ locals }) => {
 		avatarUrl,
 		email,
 		polarCustomerId,
+		stats: stats ?? {
+			totalChaptersRead: 0, booksReading: 0, booksCompleted: 0,
+			booksPlanToRead: 0, booksDropped: 0, topGenres: [],
+			avgRatingGiven: 0, streak: 0
+		},
 		sessions: sessions.map((s) => ({
 			id: s.id,
 			user_agent: s.user_agent,

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

@@ -184,6 +184,9 @@
 		}, 800) as unknown as number;
 	});
 
+	// ── Tab ──────────────────────────────────────────────────────────────────────
+	let activeTab = $state<'profile' | 'stats'>('profile');
+
 	// ── Sessions ─────────────────────────────────────────────────────────────────
 	type Session = {
 		id: string;
@@ -317,6 +320,23 @@
 		</div>
 	</div>
 
+	<!-- Tabs -->
+	<div class="flex gap-1 bg-(--color-surface-2) rounded-xl p-1 border border-(--color-border)">
+		{#each (['profile', 'stats'] as const) as tab}
+			<button
+				type="button"
+				onclick={() => (activeTab = tab)}
+				class="flex-1 py-2 rounded-lg text-sm font-medium transition-colors
+					{activeTab === tab
+						? 'bg-(--color-surface-3) text-(--color-text) shadow-sm'
+						: 'text-(--color-muted) hover:text-(--color-text)'}"
+			>
+				{tab === 'profile' ? 'Profile' : 'Stats'}
+			</button>
+		{/each}
+	</div>
+
+	{#if activeTab === 'profile'}
 	<!-- ── Subscription ─────────────────────────────────────────────────────────── -->
 	{#if !data.isPro}
 	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6">
@@ -565,5 +585,77 @@
 			</ul>
 		{/if}
 	</section>
+	{/if}
+
+	{#if activeTab === 'stats'}
+	<div class="space-y-4">
+
+		<!-- Reading overview -->
+		<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-5">
+			<h2 class="text-sm font-semibold text-(--color-muted) uppercase tracking-wider mb-4">Reading Overview</h2>
+			<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+				{#each [
+					{ label: 'Chapters Read', value: data.stats.totalChaptersRead, icon: '📖' },
+					{ label: 'Completed', value: data.stats.booksCompleted, icon: '✅' },
+					{ label: 'Reading', value: data.stats.booksReading, icon: '📚' },
+					{ label: 'Plan to Read', value: data.stats.booksPlanToRead, icon: '🔖' },
+				] as stat}
+					<div class="bg-(--color-surface-3) rounded-lg p-3 text-center">
+						<p class="text-2xl font-bold text-(--color-text) tabular-nums">{stat.value}</p>
+						<p class="text-xs text-(--color-muted) mt-0.5">{stat.label}</p>
+					</div>
+				{/each}
+			</div>
+		</section>
+
+		<!-- Streak + rating -->
+		<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-5">
+			<h2 class="text-sm font-semibold text-(--color-muted) uppercase tracking-wider mb-4">Activity</h2>
+			<div class="grid grid-cols-2 gap-3">
+				<div class="flex items-center gap-3 bg-(--color-surface-3) rounded-lg p-3">
+					<div class="w-9 h-9 rounded-full bg-orange-500/15 flex items-center justify-center text-lg flex-shrink-0">🔥</div>
+					<div>
+						<p class="text-xl font-bold text-(--color-text) tabular-nums">{data.stats.streak}</p>
+						<p class="text-xs text-(--color-muted)">day streak</p>
+					</div>
+				</div>
+				<div class="flex items-center gap-3 bg-(--color-surface-3) rounded-lg p-3">
+					<div class="w-9 h-9 rounded-full bg-yellow-500/15 flex items-center justify-center text-lg flex-shrink-0">⭐</div>
+					<div>
+						<p class="text-xl font-bold text-(--color-text) tabular-nums">
+							{data.stats.avgRatingGiven > 0 ? data.stats.avgRatingGiven.toFixed(1) : '—'}
+						</p>
+						<p class="text-xs text-(--color-muted)">avg rating given</p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<!-- Top genres -->
+		{#if data.stats.topGenres.length > 0}
+		<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-5">
+			<h2 class="text-sm font-semibold text-(--color-muted) uppercase tracking-wider mb-3">Favourite Genres</h2>
+			<div class="flex flex-wrap gap-2">
+				{#each data.stats.topGenres as genre, i}
+					<span class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium
+						{i === 0 ? 'bg-(--color-brand)/20 text-(--color-brand) border border-(--color-brand)/30' : 'bg-(--color-surface-3) text-(--color-text) border border-(--color-border)'}">
+						{#if i === 0}<span class="text-xs">🏆</span>{/if}
+						{genre}
+					</span>
+				{/each}
+			</div>
+		</section>
+		{/if}
+
+		<!-- Dropped books (only if any) -->
+		{#if data.stats.booksDropped > 0}
+		<p class="text-xs text-(--color-muted) text-center">
+			{data.stats.booksDropped} dropped book{data.stats.booksDropped !== 1 ? 's' : ''} —
+			<a href="/books" class="text-(--color-brand) hover:underline">revisit your library</a>
+		</p>
+		{/if}
+
+	</div>
+	{/if}
 
 </div>