surface audio-ready chapters: headphones badge on chapter list, instant-play prompt on reader

- getReadyChaptersForSlug(slug, preferredVoice) in pocketbase.ts: per-slug done jobs map, cached 60s, prefers user's voice
- GET /api/audio/chapters?slug=&voice= endpoint
- Chapter list (/books/[slug]/chapters): amber headphones icon on ready rows, play button for instant listen, banner showing ready count
- Chapter reader: audioReady + availableVoice from server load; 'Audio ready — Listen now' banner shown when audio exists and player is not yet active; sets voice preference before expanding player

ui/src/lib/components/AudioPlayer.svelte

@@ -995,9 +995,11 @@
 		// Only start moving if dragged > 6px to preserve tap detection
 		if (!floatMoved && Math.hypot(dx, dy) < 6) return;
 		floatMoved = true;
+		// right  = MARGIN - x  → drag right (dx>0) should decrease right → x increases → x = ox + dx
+		// bottom = MARGIN - y  → drag down  (dy>0) should decrease bottom → y increases → y = oy + dy
 		const raw = {
-			x: floatDragStart.ox - dx,  // x increases toward left (away from right edge)
-			y: floatDragStart.oy - dy,  // y increases toward top (away from bottom edge)
+			x: floatDragStart.ox + dx,
+			y: floatDragStart.oy + dy,
 		};
 		audioStore.floatPos = clampFloatPos(raw.x, raw.y);
 	}
@@ -1274,15 +1276,18 @@
 		</svg>
 	</button>
 
-	<!-- Seek bar -->
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div
-		role="none"
-		class="flex-1 h-1.5 bg-(--color-surface-3) rounded-full overflow-hidden cursor-pointer"
-		onclick={seekFromBar}
-	>
-		<div class="h-full bg-(--color-brand) rounded-full transition-none" style="width: {playPct}%"></div>
-	</div>
+	<!-- Seek bar — proper range input so drag works on iOS too -->
+	<input
+		type="range"
+		aria-label="Seek"
+		min="0"
+		max={audioStore.duration || 0}
+		value={audioStore.currentTime}
+		oninput={(e) => { audioStore.seekRequest = parseFloat((e.target as HTMLInputElement).value); }}
+		onchange={(e) => { audioStore.seekRequest = parseFloat((e.target as HTMLInputElement).value); }}
+		class="flex-1 h-1.5 cursor-pointer"
+		style="accent-color: var(--color-brand);"
+	/>
 
 	<!-- Time -->
 	<span class="flex-shrink-0 text-[11px] tabular-nums text-(--color-muted)">

ui/src/lib/server/pocketbase.ts

@@ -1165,6 +1165,101 @@ export async function getSlugsWithAudio(): Promise<Set<string>> {
 	return new Set(jobs.map((j) => j.slug));
 }
 
+/**
+ * Returns books that have at least one completed audio chapter, sorted by
+ * number of narrated chapters descending.
+ * Cached for 5 minutes (same TTL as the catalogue audio badge).
+ */
+const AUDIO_BOOKS_CACHE_KEY = 'audio:books_with_count';
+const AUDIO_BOOKS_CACHE_TTL = 5 * 60;
+
+export interface AudioBookEntry {
+	book: Book;
+	audioChapters: number;
+}
+
+export async function getBooksWithAudioCount(limit = 100): Promise<AudioBookEntry[]> {
+	const cached = await cache.get<AudioBookEntry[]>(AUDIO_BOOKS_CACHE_KEY);
+	if (cached) return cached.slice(0, limit);
+
+	// Count done jobs per slug
+	const jobs = await listAll<AudioJob>('audio_jobs', 'status="done"', 'slug');
+	const countBySlug = new Map<string, number>();
+	for (const j of jobs) {
+		// audio_jobs can have multiple voice variants for the same chapter — deduplicate
+		// by chapter number so we count chapters, not voice variants.
+		// cache_key format: "slug/chapter/voice"
+		const slug = j.slug;
+		if (!countBySlug.has(slug)) countBySlug.set(slug, 0);
+		// We'll use a Set per slug after this loop instead
+	}
+	// Build slug → Set<chapter> to deduplicate voice variants
+	const chapsBySlug = new Map<string, Set<number>>();
+	for (const j of jobs) {
+		if (!chapsBySlug.has(j.slug)) chapsBySlug.set(j.slug, new Set());
+		chapsBySlug.get(j.slug)!.add(j.chapter);
+	}
+
+	const slugs = [...chapsBySlug.keys()];
+	if (slugs.length === 0) return [];
+
+	const books = await getBooksBySlugs(slugs);
+	const bookMap = new Map(books.map((b) => [b.slug, b]));
+
+	const entries: AudioBookEntry[] = [];
+	for (const [slug, chapters] of chapsBySlug) {
+		const book = bookMap.get(slug);
+		if (!book) continue;
+		entries.push({ book, audioChapters: chapters.size });
+	}
+	// Sort by most chapters narrated first
+	entries.sort((a, b) => b.audioChapters - a.audioChapters);
+
+	await cache.set(AUDIO_BOOKS_CACHE_KEY, entries, AUDIO_BOOKS_CACHE_TTL);
+	return entries.slice(0, limit);
+}
+
+/**
+ * Returns a map of chapter number → best available voice for a given slug.
+ * "Best" means: prefer `preferredVoice` if a done job exists for it,
+ * otherwise fall back to any done voice for that chapter.
+ * Result is cached per slug for 60 seconds (audio jobs complete frequently).
+ */
+export async function getReadyChaptersForSlug(
+	slug: string,
+	preferredVoice = ''
+): Promise<Map<number, string>> {
+	const cacheKey = `audio:ready_chapters:${slug}`;
+	const cached = await cache.get<{ chapter: number; voice: string }[]>(cacheKey);
+	const raw = cached ?? await (async () => {
+		const filter = encodeURIComponent(`slug="${slug.replace(/"/g, '\\"')}"&&status="done"`);
+		const jobs = await listAll<AudioJob>('audio_jobs', filter, 'chapter');
+		const result: { chapter: number; voice: string }[] = jobs.map((j) => ({
+			chapter: j.chapter,
+			voice: j.voice ?? ''
+		}));
+		await cache.set(cacheKey, result, 60);
+		return result;
+	})();
+
+	// Build chapter → voices map
+	const byChapter = new Map<number, string[]>();
+	for (const { chapter, voice } of raw) {
+		if (!byChapter.has(chapter)) byChapter.set(chapter, []);
+		byChapter.get(chapter)!.push(voice);
+	}
+
+	// Resolve best voice per chapter
+	const result = new Map<number, string>();
+	for (const [chapter, voices] of byChapter) {
+		const best = preferredVoice && voices.includes(preferredVoice)
+			? preferredVoice
+			: voices[0] ?? '';
+		result.set(chapter, best);
+	}
+	return result;
+}
+
 // ─── Translation jobs ─────────────────────────────────────────────────────────
 
 export interface TranslationJob {

ui/src/routes/+layout.svelte

@@ -990,6 +990,7 @@
 					max={audioStore.duration || 0}
 					value={audioStore.currentTime}
 					oninput={seek}
+					onchange={seek}
 					class="w-full h-1 accent-[--color-brand] cursor-pointer block"
 					style="margin: 0; border-radius: 0; accent-color: var(--color-brand);"
 				/>

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

@@ -6,7 +6,8 @@ import {
 	getHomeStats,
 	getSubscriptionFeed,
 	getTrendingBooks,
-	getRecommendedBooks
+	getRecommendedBooks,
+	getBooksWithAudioCount
 } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 import type { Book, Progress } from '$lib/server/pocketbase';
@@ -87,8 +88,8 @@ export const load: PageServerLoad = async ({ locals }) => {
 	const inProgressSlugs = new Set(continueReading.map((c) => c.book.slug));
 	const recentlyUpdated = recentBooks.filter((b) => !inProgressSlugs.has(b.slug)).slice(0, 6);
 
-	// Fetch trending, recommendations, and subscription feed in parallel
-	const [trendingBooks, recommendedBooks, subscriptionFeed] = await Promise.all([
+	// Fetch trending, recommendations, subscription feed, and audio books in parallel
+	const [trendingBooks, recommendedBooks, subscriptionFeed, audioBooks] = await Promise.all([
 		getTrendingBooks(8).catch(() => [] as Book[]),
 		topGenres.length > 0
 			? getRecommendedBooks(topGenres, inProgressSlugs, 8).catch(() => [] as Book[])
@@ -98,12 +99,18 @@ export const load: PageServerLoad = async ({ locals }) => {
 					log.error('home', 'failed to load subscription feed', { err: String(e) });
 					return [] as Awaited<ReturnType<typeof getSubscriptionFeed>>;
 				})
-			: Promise.resolve([])
+			: Promise.resolve([]),
+		getBooksWithAudioCount(20).catch(() => [])
 	]);
 
 	// Strip books the user is already reading from trending (redundant)
 	const trendingFiltered = trendingBooks.filter((b) => !inProgressSlugs.has(b.slug));
 
+	// Strip already-reading books from audio shelf; cap at 8
+	const readyToListen = audioBooks
+		.filter((e) => !inProgressSlugs.has(e.book.slug))
+		.slice(0, 8);
+
 	return {
 		continueInProgress,
 		continueCompleted,
@@ -111,6 +118,7 @@ export const load: PageServerLoad = async ({ locals }) => {
 		subscriptionFeed,
 		trendingBooks: trendingFiltered,
 		recommendedBooks,
+		readyToListen,
 		topGenre: topGenres[0] ?? null,
 		stats: {
 			...stats,

ui/src/routes/+page.svelte

@@ -8,7 +8,7 @@
 	let { data }: { data: PageData } = $props();
 
 	// ── Section visibility ────────────────────────────────────────────────────────
-	type SectionId = 'recently-updated' | 'browse-genre' | 'from-following' | 'trending' | 'because-you-read';
+	type SectionId = 'recently-updated' | 'browse-genre' | 'from-following' | 'trending' | 'because-you-read' | 'ready-to-listen';
 	const SECTIONS_KEY = 'home_sections_v1';
 
 	function loadHidden(): Set<SectionId> {
@@ -40,6 +40,7 @@
 		'from-following':   'From Following',
 		'trending':         'Trending Now',
 		'because-you-read': data.topGenre ? `Because you read ${data.topGenre}` : 'Recommendations',
+		'ready-to-listen':  'Ready to Listen',
 	});
 
 	const hiddenList = $derived(
@@ -307,6 +308,69 @@
 </section>
 {/if}
 
+<!-- ── Ready to Listen shelf ──────────────────────────────────────────────────── -->
+{#if data.readyToListen.length > 0 && !hidden.has('ready-to-listen')}
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">Ready to Listen</h2>
+		<div class="flex items-center gap-3">
+			<a href="/listen" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">View all</a>
+			<button type="button" onclick={() => hide('ready-to-listen')} title="Hide section"
+				class="text-(--color-muted) hover:text-(--color-text) transition-colors">
+				<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+				</svg>
+			</button>
+		</div>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each data.readyToListen as { book, audioChapters }}
+			{@const genres = parseGenres(book.genres)}
+			<div class="group relative flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-36 sm:w-40">
+				<a href="/books/{book.slug}" class="block">
+					<div class="aspect-[2/3] overflow-hidden relative">
+						{#if book.cover}
+							<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+						{:else}
+							<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+								<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+							</div>
+						{/if}
+						<!-- Headphones badge -->
+						<span class="absolute bottom-1.5 left-1.5 inline-flex items-center gap-1 text-xs bg-(--color-brand)/90 text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
+							<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9v5a3 3 0 003 3h1a1 1 0 001-1v-4a1 1 0 00-1-1H5v-2a7 7 0 0114 0v2h-2a1 1 0 00-1 1v4a1 1 0 001 1h1a3 3 0 003-3v-5a9 9 0 00-9-9z"/></svg>
+							{audioChapters} ch
+						</span>
+					</div>
+				</a>
+				<div class="p-2 flex flex-col gap-1 flex-1">
+					<a href="/books/{book.slug}" class="block">
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					</a>
+					{#if genres.length > 0}
+						<div class="flex flex-wrap gap-1 mt-auto pt-0.5">
+							{#each genres.slice(0, 2) as genre}
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+				<!-- Listen Ch.1 button -->
+				<button
+					type="button"
+					onclick={() => playChapter(book.slug, 1)}
+					class="mx-2 mb-2 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md bg-(--color-brand)/15 hover:bg-(--color-brand)/30 text-(--color-brand) text-xs font-semibold transition-colors"
+					aria-label="Listen from chapter 1"
+				>
+					<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+					Listen
+				</button>
+			</div>
+		{/each}
+	</div>
+</section>
+{/if}
+
 <!-- ── Genre discovery strip ─────────────────────────────────────────────────── -->
 {#if !hidden.has('browse-genre')}
 <section class="mb-10">

ui/src/routes/api/audio/books/+server.ts

@@ -0,0 +1,17 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getBooksWithAudioCount } from '$lib/server/pocketbase';
+
+/**
+ * GET /api/audio/books
+ * Returns books that have at least one completed narrated chapter,
+ * sorted by number of narrated chapters descending.
+ * Cached 5 minutes at the CDN/proxy level.
+ */
+export const GET: RequestHandler = async () => {
+	const entries = await getBooksWithAudioCount(100).catch(() => []);
+	return json(
+		{ books: entries },
+		{ headers: { 'Cache-Control': 'public, max-age=300' } }
+	);
+};

ui/src/routes/api/audio/chapters/+server.ts

@@ -0,0 +1,18 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getReadyChaptersForSlug } from '$lib/server/pocketbase';
+
+export const GET: RequestHandler = async ({ url }) => {
+	const slug = url.searchParams.get('slug') ?? '';
+	if (!slug) error(400, 'slug is required');
+
+	const voice = url.searchParams.get('voice') ?? '';
+	const readyMap = await getReadyChaptersForSlug(slug, voice);
+
+	// Return array of { chapter, voice } pairs
+	const chapters = [...readyMap.entries()].map(([chapter, v]) => ({ chapter, voice: v }));
+
+	return json({ chapters }, {
+		headers: { 'Cache-Control': 'public, max-age=60' }
+	});
+};

ui/src/routes/books/[slug]/chapters/+page.server.ts

@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { getBook, listChapterIdx, getProgress } from '$lib/server/pocketbase';
+import { getBook, listChapterIdx, getProgress, getReadyChaptersForSlug } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 
 export const load: PageServerLoad = async ({ params, locals }) => {
@@ -13,20 +13,26 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 
 	if (!book) error(404, `Book "${slug}" not found`);
 
-	let chapters, progress;
+	let chapters, progress, readyMap;
 	try {
-		[chapters, progress] = await Promise.all([
+		[chapters, progress, readyMap] = await Promise.all([
 			listChapterIdx(slug),
-			getProgress(locals.sessionId, slug, locals.user?.id)
+			getProgress(locals.sessionId, slug, locals.user?.id),
+			getReadyChaptersForSlug(slug).catch(() => new Map<number, string>())
 		]);
 	} catch (e) {
 		log.error('chapters', 'failed to load chapters', { slug, err: String(e) });
 		throw error(500, 'Failed to load chapters');
 	}
 
+	// Serialize Map as plain object for SvelteKit data transfer
+	const readyChapters: Record<number, string> = {};
+	for (const [ch, voice] of readyMap) readyChapters[ch] = voice;
+
 	return {
 		book: { slug: book.slug, title: book.title, cover: book.cover ?? '', totalChapters: book.total_chapters },
 		chapters,
-		lastChapter: progress?.chapter ?? null
+		lastChapter: progress?.chapter ?? null,
+		readyChapters
 	};
 };

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { audioStore } from '$lib/audio.svelte';
 	import type { PageData } from './$types';
 	import type { ChapterIdx } from '$lib/server/pocketbase';
 	import * as m from '$lib/paraglide/messages.js';
@@ -7,6 +9,18 @@
 
 	const PAGE_SIZE = 100;
 
+	// ── Ready-to-listen map ──────────────────────────────────────────────────
+	// readyChapters is a Record<number, string> (chapter → voice) from server
+	const readySet = $derived(new Set(Object.keys(data.readyChapters).map(Number)));
+	const readyCount = $derived(readySet.size);
+
+	function listenChapter(chapterNum: number) {
+		const voice = data.readyChapters[chapterNum];
+		if (voice) audioStore.voice = voice;
+		audioStore.autoStartChapter = chapterNum;
+		goto(`/books/${data.book.slug}/chapters/${chapterNum}`);
+	}
+
 	// ── Search ──────────────────────────────────────────────────────────────────
 	let searchQuery = $state('');
 
@@ -76,6 +90,20 @@
 	<h1 class="text-base font-semibold text-(--color-text) truncate">{data.book.title}</h1>
 </div>
 
+<!-- ── Audio ready banner ────────────────────────────────────────────────── -->
+{#if readyCount > 0}
+<div class="flex items-center gap-2.5 mb-4 px-3 py-2.5 rounded-lg bg-(--color-brand)/10 border border-(--color-brand)/25">
+	<svg class="w-4 h-4 text-(--color-brand) shrink-0" fill="currentColor" viewBox="0 0 24 24">
+		<path d="M12 3a9 9 0 00-9 9v5a3 3 0 003 3h1a1 1 0 001-1v-4a1 1 0 00-1-1H5v-2a7 7 0 0114 0v2h-2a1 1 0 00-1 1v4a1 1 0 001 1h1a3 3 0 003-3v-5a9 9 0 00-9-9z"/>
+	</svg>
+	<p class="text-sm text-(--color-brand) font-medium">
+		{readyCount} chapter{readyCount !== 1 ? 's' : ''} ready to listen — tap
+		<svg class="w-3 h-3 inline-block" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+		to play instantly
+	</p>
+</div>
+{/if}
+
 <!-- ── Search bar ───────────────────────────────────────────────────────── -->
 <div class="relative mb-4">
 	<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted) pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -147,40 +175,65 @@
 	<div class="flex flex-col gap-0.5">
 		{#each visibleChapters as chapter}
 			{@const isCurrent = data.lastChapter === chapter.number}
-			<a
-				href="/books/{data.book.slug}/chapters/{chapter.number}"
-				id="ch-{chapter.number}"
-				class="flex items-center gap-3 px-3 py-2.5 rounded transition-colors group
+			{@const isReady = readySet.has(chapter.number)}
+			<div
+				class="flex items-center gap-1 rounded transition-colors group
 					{isCurrent ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)/60'}"
 			>
-				<!-- Number badge -->
-				<span
-					class="w-9 text-right text-sm font-mono flex-shrink-0
-						{isCurrent ? 'text-(--color-brand) font-semibold' : 'text-(--color-muted)'}"
+				<a
+					href="/books/{data.book.slug}/chapters/{chapter.number}"
+					id="ch-{chapter.number}"
+					class="flex items-center gap-3 px-3 py-2.5 flex-1 min-w-0"
 				>
-					{chapter.number}
-				</span>
-
-				<!-- Title -->
-				<span
-					class="flex-1 min-w-0 text-sm truncate transition-colors
-						{isCurrent ? 'text-(--color-brand-dim) font-medium' : 'text-(--color-text) group-hover:text-(--color-text)'}"
-				>
-					{chapter.title || m.reader_chapter_n({ n: String(chapter.number) })}
-				</span>
-
-				<!-- Date — desktop only -->
-				{#if chapter.date_label}
-					<span class="hidden sm:block text-xs text-(--color-muted) flex-shrink-0">
-						{chapter.date_label}
+					<!-- Number badge -->
+					<span
+						class="w-9 text-right text-sm font-mono flex-shrink-0
+							{isCurrent ? 'text-(--color-brand) font-semibold' : 'text-(--color-muted)'}"
+					>
+						{chapter.number}
 					</span>
-				{/if}
 
-				<!-- Reading indicator -->
-				{#if isCurrent}
-					<span class="text-xs text-(--color-brand) font-medium flex-shrink-0">{m.chapters_reading_indicator()}</span>
+					<!-- Title -->
+					<span
+						class="flex-1 min-w-0 text-sm truncate transition-colors
+							{isCurrent ? 'text-(--color-brand-dim) font-medium' : 'text-(--color-text) group-hover:text-(--color-text)'}"
+					>
+						{chapter.title || m.reader_chapter_n({ n: String(chapter.number) })}
+					</span>
+
+					<!-- Headphones icon for ready chapters -->
+					{#if isReady}
+						<svg class="w-3.5 h-3.5 text-(--color-brand) shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-label="Audio ready">
+							<path d="M12 3a9 9 0 00-9 9v5a3 3 0 003 3h1a1 1 0 001-1v-4a1 1 0 00-1-1H5v-2a7 7 0 0114 0v2h-2a1 1 0 00-1 1v4a1 1 0 001 1h1a3 3 0 003-3v-5a9 9 0 00-9-9z"/>
+						</svg>
+					{/if}
+
+					<!-- Date — desktop only -->
+					{#if chapter.date_label}
+						<span class="hidden sm:block text-xs text-(--color-muted) flex-shrink-0">
+							{chapter.date_label}
+						</span>
+					{/if}
+
+					<!-- Reading indicator -->
+					{#if isCurrent}
+						<span class="text-xs text-(--color-brand) font-medium flex-shrink-0">{m.chapters_reading_indicator()}</span>
+					{/if}
+				</a>
+
+				<!-- Instant-play button (only for ready chapters) -->
+				{#if isReady}
+					<button
+						type="button"
+						onclick={() => listenChapter(chapter.number)}
+						class="mr-2 flex items-center justify-center w-7 h-7 rounded-full bg-(--color-brand)/15 hover:bg-(--color-brand)/30 text-(--color-brand) transition-colors shrink-0"
+						title="Listen now"
+						aria-label="Listen to chapter {chapter.number} now"
+					>
+						<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+					</button>
 				{/if}
-			</a>
+			</div>
 		{/each}
 	</div>
 

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

@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit';
 import { marked } from 'marked';
 import type { PageServerLoad } from './$types';
-import { getBook, listChapterIdx } from '$lib/server/pocketbase';
+import { getBook, listChapterIdx, getReadyChaptersForSlug } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 import { backendFetch } from '$lib/server/scraper';
 import type { Voice } from '$lib/types';
@@ -87,18 +87,22 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 			lang: '',
 			translationStatus: 'unavailable' as string,
 			isPro: locals.isPro,
-			chapterImageUrl: null as string | null
+			chapterImageUrl: null as string | null,
+			audioReady: false,
+			availableVoice: null as string | null
 		};
 	}
 
 	// ── Normal path: fetch from PocketBase + MinIO ─────────────────────────
-	// Fetch book metadata, chapter index, voice list, and chapter image check in parallel.
+	// Fetch book metadata, chapter index, voice list, chapter image check, and
+	// audio-ready map in parallel.
 	// HEAD /api/chapter-image checks existence cheaply without downloading the image.
-	const [book, chapters, voicesRes, chapterImageRes] = await Promise.all([
+	const [book, chapters, voicesRes, chapterImageRes, readyMap] = await Promise.all([
 		getBook(slug),
 		listChapterIdx(slug),
 		backendFetch('/api/voices').catch(() => null),
-		backendFetch(`/api/chapter-image/novelfire.net/${encodeURIComponent(slug)}/${n}`, { method: 'HEAD' }).catch(() => null)
+		backendFetch(`/api/chapter-image/novelfire.net/${encodeURIComponent(slug)}/${n}`, { method: 'HEAD' }).catch(() => null),
+		getReadyChaptersForSlug(slug).catch(() => new Map<number, string>())
 	]);
 
 	if (!book) error(404, `Book "${slug}" not found`);
@@ -112,6 +116,10 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 			? `/api/chapter-image/novelfire.net/${encodeURIComponent(slug)}/${n}`
 			: null;
 
+	// Audio readiness for this specific chapter
+	const availableVoice = readyMap.get(n) ?? null;
+	const audioReady = availableVoice !== null;
+
 	// Parse voices — fall back to empty list on error
 	let voices: Voice[] = [];
 	try {
@@ -146,7 +154,9 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 			lang,
 			translationStatus: 'done',
 			isPro: locals.isPro,
-			chapterImageUrl
+			chapterImageUrl,
+			audioReady,
+			availableVoice
 				};
 			}
 			// 404 = not generated yet — fall through to original, UI can trigger generation
@@ -204,6 +214,8 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 		lang: useTranslation ? lang : '',
 		translationStatus,
 		isPro: locals.isPro,
-		chapterImageUrl
+		chapterImageUrl,
+		audioReady,
+		availableVoice
 	};
 };

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

@@ -427,6 +427,13 @@
 			audioExpanded = true;
 		}
 	});
+
+	// ── Audio-ready instant play ─────────────────────────────────────────────────
+	function listenNow() {
+		if (data.availableVoice) audioStore.voice = data.availableVoice;
+		audioStore.autoStartChapter = data.chapter.number;
+		audioExpanded = true;
+	}
 </script>
 
 <svelte:head>
@@ -600,6 +607,27 @@
 			</a>
 		</div>
 	{:else}
+		<!-- Audio ready prompt — shown when audio exists and player is not yet active -->
+		{#if data.audioReady && !(audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number && audioStore.active)}
+			<div class="mb-3 flex items-center gap-3 px-4 py-3 rounded-lg bg-(--color-brand)/10 border border-(--color-brand)/30">
+				<svg class="w-5 h-5 text-(--color-brand) shrink-0" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M12 3a9 9 0 00-9 9v5a3 3 0 003 3h1a1 1 0 001-1v-4a1 1 0 00-1-1H5v-2a7 7 0 0114 0v2h-2a1 1 0 00-1 1v4a1 1 0 001 1h1a3 3 0 003-3v-5a9 9 0 00-9-9z"/>
+				</svg>
+				<div class="flex-1 min-w-0">
+					<p class="text-sm font-semibold text-(--color-text)">Audio ready</p>
+					<p class="text-xs text-(--color-muted)">This chapter has been narrated — listen instantly</p>
+				</div>
+				<button
+					type="button"
+					onclick={listenNow}
+					class="shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
+				>
+					<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+					Listen now
+				</button>
+			</div>
+		{/if}
+
 		<!-- Collapsible audio panel -->
 		<div class="mb-6">
 			<button

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

@@ -0,0 +1,11 @@
+import type { PageServerLoad } from './$types';
+import { getBooksWithAudioCount } from '$lib/server/pocketbase';
+
+export const load: PageServerLoad = async ({ url }) => {
+	const sort = url.searchParams.get('sort') ?? 'chapters';
+	const q = url.searchParams.get('q') ?? '';
+
+	const audioBooks = await getBooksWithAudioCount(200).catch(() => []);
+
+	return { audioBooks, sort, q };
+};

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

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { audioStore } from '$lib/audio.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let q = $state(untrack(() => data.q));
+	let sort = $state(untrack(() => data.sort));
+
+	function parseGenres(genres: string[] | string | null | undefined): string[] {
+		if (!genres) return [];
+		if (Array.isArray(genres)) return genres;
+		try {
+			const parsed = JSON.parse(genres);
+			return Array.isArray(parsed) ? parsed : [];
+		} catch { return []; }
+	}
+
+	const filtered = $derived.by(() => {
+		let list = data.audioBooks;
+
+		// text filter
+		if (q.trim()) {
+			const needle = q.trim().toLowerCase();
+			list = list.filter(
+				({ book }) =>
+					book.title?.toLowerCase().includes(needle) ||
+					book.author?.toLowerCase().includes(needle)
+			);
+		}
+
+		// sort
+		if (sort === 'title') {
+			list = [...list].sort((a, b) => (a.book.title ?? '').localeCompare(b.book.title ?? ''));
+		} else if (sort === 'recent') {
+			list = [...list].sort((a, b) => {
+				const da = a.book.meta_updated ?? '';
+				const db = b.book.meta_updated ?? '';
+				return db.localeCompare(da);
+			});
+		}
+		// default: 'chapters' — already sorted by getBooksWithAudioCount
+
+		return list;
+	});
+
+	function playChapter(slug: string, chapter: number) {
+		audioStore.autoStartChapter = chapter;
+		goto(`/books/${slug}/chapters/${chapter}`);
+	}
+
+	function onSortChange(value: string) {
+		sort = value;
+		const params = new URLSearchParams();
+		if (value !== 'chapters') params.set('sort', value);
+		if (q.trim()) params.set('q', q.trim());
+		const qs = params.toString();
+		goto(`/listen${qs ? `?${qs}` : ''}`, { replaceState: true, noScroll: true });
+	}
+
+	function onSearch(e: Event) {
+		e.preventDefault();
+		const params = new URLSearchParams();
+		if (sort !== 'chapters') params.set('sort', sort);
+		if (q.trim()) params.set('q', q.trim());
+		const qs = params.toString();
+		goto(`/listen${qs ? `?${qs}` : ''}`, { replaceState: true, noScroll: true });
+	}
+</script>
+
+<svelte:head>
+	<title>Narrated Books — LibNovel</title>
+</svelte:head>
+
+<!-- Header -->
+<div class="mb-6">
+	<div class="flex items-center gap-2 mb-1">
+		<svg class="w-5 h-5 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M12 3a9 9 0 00-9 9v5a3 3 0 003 3h1a1 1 0 001-1v-4a1 1 0 00-1-1H5v-2a7 7 0 0114 0v2h-2a1 1 0 00-1 1v4a1 1 0 001 1h1a3 3 0 003-3v-5a9 9 0 00-9-9z"/>
+		</svg>
+		<h1 class="text-xl font-bold text-(--color-text)">Narrated Books</h1>
+	</div>
+	<p class="text-sm text-(--color-muted)">Books with generated TTS audio ready to listen</p>
+</div>
+
+<!-- Controls -->
+<div class="flex flex-col sm:flex-row gap-3 mb-6">
+	<!-- Search -->
+	<form onsubmit={onSearch} class="flex-1 flex gap-2">
+		<input
+			type="search"
+			bind:value={q}
+			placeholder="Search by title or author…"
+			class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-(--color-text) placeholder:text-(--color-muted) text-sm focus:outline-none focus:border-(--color-brand)/60 transition-colors"
+		/>
+		<button
+			type="submit"
+			class="px-4 py-2 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:border-(--color-brand)/40 text-sm transition-colors shrink-0"
+		>
+			Search
+		</button>
+	</form>
+
+	<!-- Sort -->
+	<div class="flex items-center gap-1 shrink-0">
+		{#each [['chapters', 'Most narrated'], ['title', 'A–Z'], ['recent', 'Recent']] as [val, label]}
+			<button
+				type="button"
+				onclick={() => onSortChange(val)}
+				class="px-3 py-2 rounded-lg text-xs font-medium transition-colors {sort === val
+					? 'bg-(--color-brand) text-(--color-surface)'
+					: 'bg-(--color-surface-2) border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:border-(--color-brand)/40'}"
+			>
+				{label}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<!-- Results count -->
+{#if filtered.length > 0}
+	<p class="text-xs text-(--color-muted) mb-4">{filtered.length} book{filtered.length !== 1 ? 's' : ''}</p>
+{/if}
+
+<!-- Grid -->
+{#if filtered.length === 0}
+	<div class="text-center py-20 text-(--color-muted)">
+		{#if q.trim()}
+			<p class="text-base font-semibold text-(--color-text) mb-2">No results for "{q}"</p>
+			<p class="text-sm">Try a different search term.</p>
+		{:else}
+			<p class="text-base font-semibold text-(--color-text) mb-2">No narrated books yet</p>
+			<p class="text-sm">Audio is generated as books are read. Check back soon.</p>
+		{/if}
+	</div>
+{:else}
+	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
+		{#each filtered as { book, audioChapters }}
+			{@const genres = parseGenres(book.genres)}
+			<div class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all">
+				<a href="/books/{book.slug}" class="block">
+					<div class="aspect-[2/3] overflow-hidden relative">
+						{#if book.cover}
+							<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+						{:else}
+							<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+								<svg class="w-10 h-10 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+								</svg>
+							</div>
+						{/if}
+						<!-- Headphones badge -->
+						<span class="absolute bottom-1.5 left-1.5 inline-flex items-center gap-1 text-xs bg-(--color-brand)/90 text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
+							<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9v5a3 3 0 003 3h1a1 1 0 001-1v-4a1 1 0 00-1-1H5v-2a7 7 0 0114 0v2h-2a1 1 0 00-1 1v4a1 1 0 001 1h1a3 3 0 003-3v-5a9 9 0 00-9-9z"/></svg>
+							{audioChapters} ch
+						</span>
+					</div>
+				</a>
+
+				<div class="p-2 flex flex-col gap-1 flex-1">
+					<a href="/books/{book.slug}" class="block">
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					</a>
+					{#if book.author}
+						<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
+					{/if}
+					{#if genres.length > 0}
+						<div class="flex flex-wrap gap-1 mt-auto pt-1">
+							{#each genres.slice(0, 2) as genre}
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Actions -->
+				<div class="px-2 pb-2 flex gap-1.5">
+					<button
+						type="button"
+						onclick={() => playChapter(book.slug, 1)}
+						class="flex-1 flex items-center justify-center gap-1 py-1.5 rounded-md bg-(--color-brand)/15 hover:bg-(--color-brand)/30 text-(--color-brand) text-xs font-semibold transition-colors"
+						aria-label="Listen from chapter 1"
+					>
+						<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+						Listen
+					</button>
+					<a
+						href="/books/{book.slug}"
+						class="flex items-center justify-center px-2 py-1.5 rounded-md bg-(--color-surface-3) hover:bg-(--color-surface) border border-(--color-border) hover:border-(--color-brand)/40 text-(--color-muted) hover:text-(--color-text) transition-colors"
+						title="Book info"
+						aria-label="Book info"
+					>
+						<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="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"/>
+						</svg>
+					</a>
+				</div>
+			</div>
+		{/each}
+	</div>
+{/if}