feat: add AI Jobs admin page, cache model lists, improve image-gen 502 UX

- Add /admin/ai-jobs page with live-polling jobs table, status badges, progress bars, and cancel action
- Add listAIJobs() helper in pocketbase.ts; AIJob type
- Add POST /api/admin/ai-jobs/[id]/cancel SvelteKit proxy
- Add ai-jobs link to admin sidebar nav (all 5 locales)
- Cache image-gen and text-gen model lists in Valkey (10 min TTL) via scraper.ts helpers
- Cache changelog Gitea API response (5 min TTL)
- Improve 502/504 error message on image-gen page with CF AI timeout hint
- Show CF AI timeout warning in advanced options when a Cloudflare/FLUX model is selected

.gitea/workflows/release.yaml

@@ -55,6 +55,13 @@ jobs:
       - name: Build
         run: npm run build
 
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: ui-build
+          path: ui/build
+          retention-days: 1
+
   # ── docker: backend ───────────────────────────────────────────────────────────
   docker-backend:
     name: Docker / backend
@@ -140,29 +147,18 @@ jobs:
     name: Upload source maps
     runs-on: ubuntu-latest
     needs: [check-ui]
-    defaults:
-      run:
-        working-directory: ui
     steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "22"
-          cache: npm
-          cache-dependency-path: ui/package-lock.json
-
-      - name: Install dependencies
-        run: npm ci
-
       - name: Compute release version (strip leading v)
         id: ver
         run: |
           V="${{ gitea.ref_name }}"
           echo "version=${V#v}" >> "$GITHUB_OUTPUT"
 
-      - name: Build with source maps
-        run: npm run build
+      - name: Download build artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: ui-build
+          path: build
 
       - name: Install sentry-cli
         run: npm install -g @sentry/cli

ui/messages/en.json

@@ -403,6 +403,7 @@
   "admin_nav_image_gen": "Image Gen",
   "admin_nav_text_gen": "Text Gen",
   "admin_nav_catalogue_tools": "Catalogue Tools",
+  "admin_nav_ai_jobs": "AI Jobs",
   "admin_nav_feedback": "Feedback",
   "admin_nav_errors": "Errors",
   "admin_nav_analytics": "Analytics",

ui/messages/fr.json

@@ -403,6 +403,7 @@
   "admin_nav_image_gen": "Image Gen",
   "admin_nav_text_gen": "Text Gen",
   "admin_nav_catalogue_tools": "Catalogue Tools",
+  "admin_nav_ai_jobs": "Tâches IA",
   "admin_nav_errors": "Erreurs",
   "admin_nav_analytics": "Analytique",
   "admin_nav_logs": "Journaux",

ui/messages/id.json

@@ -403,6 +403,7 @@
   "admin_nav_image_gen": "Image Gen",
   "admin_nav_text_gen": "Text Gen",
   "admin_nav_catalogue_tools": "Catalogue Tools",
+  "admin_nav_ai_jobs": "Tugas AI",
   "admin_nav_errors": "Kesalahan",
   "admin_nav_analytics": "Analitik",
   "admin_nav_logs": "Log",

ui/messages/pt.json

@@ -403,6 +403,7 @@
   "admin_nav_image_gen": "Image Gen",
   "admin_nav_text_gen": "Text Gen",
   "admin_nav_catalogue_tools": "Catalogue Tools",
+  "admin_nav_ai_jobs": "Tarefas de IA",
   "admin_nav_errors": "Erros",
   "admin_nav_analytics": "Análise",
   "admin_nav_logs": "Logs",

ui/messages/ru.json

@@ -403,6 +403,7 @@
   "admin_nav_image_gen": "Image Gen",
   "admin_nav_text_gen": "Text Gen",
   "admin_nav_catalogue_tools": "Catalogue Tools",
+  "admin_nav_ai_jobs": "Задачи ИИ",
   "admin_nav_errors": "Ошибки",
   "admin_nav_analytics": "Аналитика",
   "admin_nav_logs": "Логи",

ui/src/lib/paraglide/messages/_index.js

@@ -374,6 +374,7 @@ export * from './admin_nav_changelog.js'
 export * from './admin_nav_image_gen.js'
 export * from './admin_nav_text_gen.js'
 export * from './admin_nav_catalogue_tools.js'
+export * from './admin_nav_ai_jobs.js'
 export * from './admin_nav_feedback.js'
 export * from './admin_nav_errors.js'
 export * from './admin_nav_analytics.js'

ui/src/lib/paraglide/messages/admin_nav_ai_jobs.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Admin_Nav_Ai_JobsInputs */
+
+const en_admin_nav_ai_jobs = /** @type {(inputs: Admin_Nav_Ai_JobsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`AI Jobs`)
+};
+
+const ru_admin_nav_ai_jobs = /** @type {(inputs: Admin_Nav_Ai_JobsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Задачи ИИ`)
+};
+
+const id_admin_nav_ai_jobs = /** @type {(inputs: Admin_Nav_Ai_JobsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Tugas AI`)
+};
+
+const pt_admin_nav_ai_jobs = /** @type {(inputs: Admin_Nav_Ai_JobsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Tarefas de IA`)
+};
+
+const fr_admin_nav_ai_jobs = /** @type {(inputs: Admin_Nav_Ai_JobsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Tâches IA`)
+};
+
+/**
+* | output |
+* | --- |
+* | "AI Jobs" |
+*
+* @param {Admin_Nav_Ai_JobsInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const admin_nav_ai_jobs = /** @type {((inputs?: Admin_Nav_Ai_JobsInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Admin_Nav_Ai_JobsInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_admin_nav_ai_jobs(inputs)
+	if (locale === "ru") return ru_admin_nav_ai_jobs(inputs)
+	if (locale === "id") return id_admin_nav_ai_jobs(inputs)
+	if (locale === "pt") return pt_admin_nav_ai_jobs(inputs)
+	return fr_admin_nav_ai_jobs(inputs)
+});

ui/src/lib/server/pocketbase.ts

@@ -14,6 +14,23 @@ const PB_PASSWORD = env.POCKETBASE_ADMIN_PASSWORD ?? 'changeme123';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
+export interface AIJob {
+	id: string;
+	kind: string;
+	slug: string;
+	status: 'pending' | 'running' | 'done' | 'failed' | 'cancelled';
+	from_item: number;
+	to_item: number;
+	items_done: number;
+	items_total: number;
+	model: string;
+	payload: string;
+	error_message?: string;
+	started?: string;
+	finished?: string;
+	heartbeat_at?: string;
+}
+
 export interface Book {
 	id: string;
 	slug: string;
@@ -2162,3 +2179,13 @@ export async function getUserStats(
 		streak
 	};
 }
+
+// ─── AI Jobs ──────────────────────────────────────────────────────────────────
+
+/**
+ * List all AI jobs from PocketBase, sorted by started descending.
+ * No caching — admin views always want fresh data.
+ */
+export async function listAIJobs(): Promise<AIJob[]> {
+	return listAll<AIJob>('ai_jobs', '', '-started');
+}

ui/src/lib/server/scraper.ts

@@ -12,6 +12,7 @@
 
 import { error } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
+import * as cache from '$lib/server/cache';
 
 export const BACKEND_URL = env.BACKEND_API_URL ?? 'http://localhost:8080';
 
@@ -33,6 +34,50 @@ export async function backendFetch(path: string, init?: RequestInit): Promise<Re
 	}
 }
 
+// ─── Cached admin model lists ─────────────────────────────────────────────────
+
+const MODELS_CACHE_TTL = 10 * 60; // 10 minutes — model lists rarely change
+
+/**
+ * Fetch image-gen model list from the Go backend with a 10-minute cache.
+ * Returns an empty array on error (callers should surface a warning).
+ */
+export async function listImageModels<T>(): Promise<T[]> {
+	const key = 'backend:models:image-gen';
+	const cached = await cache.get<T[]>(key);
+	if (cached) return cached;
+	try {
+		const res = await backendFetch('/api/admin/image-gen/models');
+		if (!res.ok) return [];
+		const data = await res.json();
+		const models = (data.models ?? []) as T[];
+		await cache.set(key, models, MODELS_CACHE_TTL);
+		return models;
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Fetch text-gen model list from the Go backend with a 10-minute cache.
+ * Returns an empty array on error.
+ */
+export async function listTextModels<T>(): Promise<T[]> {
+	const key = 'backend:models:text-gen';
+	const cached = await cache.get<T[]>(key);
+	if (cached) return cached;
+	try {
+		const res = await backendFetch('/api/admin/text-gen/models');
+		if (!res.ok) return [];
+		const data = await res.json();
+		const models = (data.models ?? []) as T[];
+		await cache.set(key, models, MODELS_CACHE_TTL);
+		return models;
+	} catch {
+		return [];
+	}
+}
+
 // ─── Response types ───────────────────────────────────────────────────────────
 
 /**

ui/src/routes/admin/+layout.svelte

@@ -9,7 +9,8 @@
 		{ href: '/admin/changelog', label: () => m.admin_nav_changelog() },
 		{ href: '/admin/image-gen', label: () => m.admin_nav_image_gen() },
 		{ href: '/admin/text-gen', label: () => m.admin_nav_text_gen() },
-		{ href: '/admin/catalogue-tools', label: () => m.admin_nav_catalogue_tools() }
+		{ href: '/admin/catalogue-tools', label: () => m.admin_nav_catalogue_tools() },
+		{ href: '/admin/ai-jobs', label: () => m.admin_nav_ai_jobs() }
 	];
 
 	const externalLinks = [

ui/src/routes/admin/ai-jobs/+page.server.ts

@@ -0,0 +1,14 @@
+import type { PageServerLoad } from './$types';
+import { listAIJobs, type AIJob } from '$lib/server/pocketbase';
+import { log } from '$lib/server/logger';
+
+export type { AIJob };
+
+export const load: PageServerLoad = async () => {
+	// Parent layout already guards admin role.
+	const jobs = await listAIJobs().catch((e): AIJob[] => {
+		log.warn('admin/ai-jobs', 'failed to load ai jobs', { err: String(e) });
+		return [];
+	});
+	return { jobs };
+};

ui/src/routes/admin/ai-jobs/+page.svelte

@@ -0,0 +1,326 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { invalidateAll } from '$app/navigation';
+	import type { PageData } from './$types';
+	import type { AIJob } from '$lib/server/pocketbase';
+	import { cn } from '$lib/utils';
+
+	let { data }: { data: PageData } = $props();
+
+	let jobs = $state<AIJob[]>(untrack(() => data.jobs));
+
+	// Keep in sync on server reloads
+	$effect(() => {
+		jobs = data.jobs;
+	});
+
+	// ── Live-poll while any job is in-flight ─────────────────────────────────────
+	let hasInFlight = $derived(jobs.some((j) => j.status === 'pending' || j.status === 'running'));
+
+	$effect(() => {
+		if (!hasInFlight) return;
+		const id = setInterval(() => {
+			invalidateAll();
+		}, 3000);
+		return () => clearInterval(id);
+	});
+
+	// ── Filter / search ───────────────────────────────────────────────────────────
+	let query = $state('');
+	let statusFilter = $state<string>('all');
+
+	const STATUS_OPTIONS = ['all', 'pending', 'running', 'done', 'failed', 'cancelled'] as const;
+
+	let filteredJobs = $derived(
+		jobs.filter((j) => {
+			const q = query.trim().toLowerCase();
+			const matchesQ =
+				!q ||
+				j.slug.toLowerCase().includes(q) ||
+				j.kind.toLowerCase().includes(q) ||
+				j.model.toLowerCase().includes(q) ||
+				(j.error_message ?? '').toLowerCase().includes(q);
+			const matchesStatus = statusFilter === 'all' || j.status === statusFilter;
+			return matchesQ && matchesStatus;
+		})
+	);
+
+	// ── Stats ────────────────────────────────────────────────────────────────────
+	let stats = $derived({
+		total: jobs.length,
+		running: jobs.filter((j) => j.status === 'running').length,
+		pending: jobs.filter((j) => j.status === 'pending').length,
+		done: jobs.filter((j) => j.status === 'done').length,
+		failed: jobs.filter((j) => j.status === 'failed').length
+	});
+
+	// ── Cancel ────────────────────────────────────────────────────────────────────
+	let cancellingId = $state<string | null>(null);
+	let cancelError = $state('');
+
+	async function cancelJob(id: string) {
+		if (cancellingId) return;
+		cancellingId = id;
+		cancelError = '';
+		try {
+			const res = await fetch(`/api/admin/ai-jobs/${id}/cancel`, { method: 'POST' });
+			if (!res.ok) {
+				const body = await res.json().catch(() => ({}));
+				cancelError = body.error ?? `Error ${res.status}`;
+			} else {
+				await invalidateAll();
+			}
+		} catch {
+			cancelError = 'Network error.';
+		} finally {
+			cancellingId = null;
+		}
+	}
+
+	// ── Helpers ───────────────────────────────────────────────────────────────────
+	function statusColor(status: string) {
+		if (status === 'done') return 'text-green-400';
+		if (status === 'running') return 'text-(--color-brand) animate-pulse';
+		if (status === 'pending') return 'text-sky-400 animate-pulse';
+		if (status === 'failed') return 'text-(--color-danger)';
+		if (status === 'cancelled') return 'text-(--color-muted)';
+		return 'text-(--color-text)';
+	}
+
+	function statusBg(status: string) {
+		if (status === 'done') return 'bg-green-400/10 text-green-400';
+		if (status === 'running') return 'bg-(--color-brand)/10 text-(--color-brand)';
+		if (status === 'pending') return 'bg-sky-400/10 text-sky-400';
+		if (status === 'failed') return 'bg-(--color-danger)/10 text-(--color-danger)';
+		if (status === 'cancelled') return 'bg-zinc-700/50 text-(--color-muted)';
+		return 'bg-zinc-700/50 text-(--color-text)';
+	}
+
+	function kindLabel(kind: string) {
+		const labels: Record<string, string> = {
+			'chapter-names': 'Chapter Names',
+			'batch-covers': 'Batch Covers',
+			'chapter-covers': 'Chapter Covers',
+			'refresh-metadata': 'Refresh Metadata'
+		};
+		return labels[kind] ?? kind;
+	}
+
+	function fmtDate(s: string | undefined) {
+		if (!s) return '—';
+		return new Date(s).toLocaleString(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	function duration(started: string | undefined, finished: string | undefined) {
+		if (!started || !finished) return '—';
+		const ms = new Date(finished).getTime() - new Date(started).getTime();
+		if (ms < 0) return '—';
+		const s = Math.floor(ms / 1000);
+		if (s < 60) return `${s}s`;
+		const m = Math.floor(s / 60);
+		return `${m}m ${s % 60}s`;
+	}
+
+	function progress(job: AIJob) {
+		if (!job.items_total) return null;
+		return Math.round((job.items_done / job.items_total) * 100);
+	}
+</script>
+
+<div class="max-w-6xl mx-auto space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between gap-4">
+		<div>
+			<h1 class="text-2xl font-bold text-(--color-text)">AI Jobs</h1>
+			<p class="text-sm text-(--color-muted) mt-0.5">Background AI generation tasks</p>
+		</div>
+		<button
+			onclick={() => invalidateAll()}
+			class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+			</svg>
+			Refresh
+		</button>
+	</div>
+
+	<!-- Stats bar -->
+	<div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
+		{#each [
+			{ label: 'Total', value: stats.total, color: 'text-(--color-text)' },
+			{ label: 'Running', value: stats.running, color: 'text-(--color-brand)' },
+			{ label: 'Pending', value: stats.pending, color: 'text-sky-400' },
+			{ label: 'Done', value: stats.done, color: 'text-green-400' },
+			{ label: 'Failed', value: stats.failed, color: 'text-(--color-danger)' }
+		] as stat}
+			<div class="rounded-lg border border-(--color-border) bg-(--color-surface-2) px-4 py-3">
+				<p class="text-xs text-(--color-muted) mb-1">{stat.label}</p>
+				<p class={cn('text-xl font-bold tabular-nums', stat.color)}>{stat.value}</p>
+			</div>
+		{/each}
+	</div>
+
+	<!-- Filters -->
+	<div class="flex flex-wrap gap-3 items-center">
+		<input
+			type="search"
+			placeholder="Search slug, kind, model…"
+			bind:value={query}
+			class="flex-1 min-w-48 px-3 py-1.5 rounded-md bg-(--color-surface-2) border border-(--color-border) text-sm text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:ring-1 focus:ring-(--color-brand)"
+		/>
+		<div class="flex gap-1 flex-wrap">
+			{#each STATUS_OPTIONS as s}
+				<button
+					onclick={() => (statusFilter = s)}
+					class={cn(
+						'px-2.5 py-1 rounded-md text-xs font-medium transition-colors capitalize',
+						statusFilter === s
+							? 'bg-(--color-brand) text-black'
+							: 'bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+					)}
+				>
+					{s}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Cancel error -->
+	{#if cancelError}
+		<p class="text-sm text-(--color-danger) bg-(--color-danger)/10 rounded-lg px-3 py-2">{cancelError}</p>
+	{/if}
+
+	<!-- Jobs table -->
+	{#if filteredJobs.length === 0}
+		<div class="rounded-lg border border-(--color-border) bg-(--color-surface-2) px-6 py-12 text-center">
+			<p class="text-(--color-muted) text-sm">
+				{jobs.length === 0 ? 'No AI jobs found.' : 'No jobs match your filters.'}
+			</p>
+		</div>
+	{:else}
+		<div class="rounded-lg border border-(--color-border) overflow-hidden">
+			<table class="w-full text-sm">
+				<thead>
+					<tr class="border-b border-(--color-border) bg-(--color-surface-2)">
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Status</th>
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Kind</th>
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Slug</th>
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider hidden sm:table-cell">Model</th>
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider hidden md:table-cell">Progress</th>
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider hidden lg:table-cell">Started</th>
+						<th class="px-4 py-2.5 text-left text-xs font-semibold text-(--color-muted) uppercase tracking-wider hidden lg:table-cell">Duration</th>
+						<th class="px-4 py-2.5 text-right text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Actions</th>
+					</tr>
+				</thead>
+				<tbody class="divide-y divide-(--color-border)">
+					{#each filteredJobs as job (job.id)}
+						<tr class="bg-(--color-surface) hover:bg-(--color-surface-2)/40 transition-colors">
+							<!-- Status badge -->
+							<td class="px-4 py-3">
+								<span class={cn('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', statusBg(job.status))}>
+									{job.status}
+								</span>
+							</td>
+
+							<!-- Kind -->
+							<td class="px-4 py-3 font-medium text-(--color-text)">
+								{kindLabel(job.kind)}
+							</td>
+
+							<!-- Slug -->
+							<td class="px-4 py-3 max-w-[12rem]">
+								{#if job.slug}
+									<a
+										href="/admin/image-gen?slug={job.slug}"
+										class="text-(--color-brand) hover:underline truncate block font-mono text-xs"
+									>
+										{job.slug}
+									</a>
+								{:else}
+									<span class="text-(--color-muted) text-xs">—</span>
+								{/if}
+							</td>
+
+							<!-- Model -->
+							<td class="px-4 py-3 hidden sm:table-cell">
+								<span class="font-mono text-xs text-(--color-muted) truncate block max-w-[10rem]" title={job.model}>
+									{job.model || '—'}
+								</span>
+							</td>
+
+							<!-- Progress -->
+							<td class="px-4 py-3 hidden md:table-cell">
+								{#if job.items_total > 0}
+									{@const pct = progress(job)}
+									<div class="flex items-center gap-2">
+										<div class="w-20 h-1.5 rounded-full bg-(--color-border) overflow-hidden">
+											<div
+												class={cn(
+													'h-full rounded-full transition-all',
+													job.status === 'done' ? 'bg-green-400' :
+													job.status === 'failed' ? 'bg-(--color-danger)' :
+													'bg-(--color-brand)'
+												)}
+												style="width: {pct}%"
+											></div>
+										</div>
+										<span class="text-xs text-(--color-muted) tabular-nums whitespace-nowrap">
+											{job.items_done}/{job.items_total}
+										</span>
+									</div>
+								{:else}
+									<span class="text-(--color-muted) text-xs">—</span>
+								{/if}
+							</td>
+
+							<!-- Started -->
+							<td class="px-4 py-3 hidden lg:table-cell">
+								<span class="text-xs text-(--color-muted) whitespace-nowrap">{fmtDate(job.started)}</span>
+							</td>
+
+							<!-- Duration -->
+							<td class="px-4 py-3 hidden lg:table-cell">
+								<span class="text-xs text-(--color-muted) whitespace-nowrap tabular-nums">
+									{duration(job.started, job.finished)}
+								</span>
+							</td>
+
+							<!-- Actions -->
+							<td class="px-4 py-3 text-right">
+								<div class="flex items-center justify-end gap-2">
+									{#if job.status === 'pending' || job.status === 'running'}
+										<button
+											onclick={() => cancelJob(job.id)}
+											disabled={cancellingId === job.id}
+											class="px-2 py-1 rounded text-xs font-medium bg-(--color-danger)/10 text-(--color-danger) hover:bg-(--color-danger)/20 disabled:opacity-50 transition-colors"
+										>
+											{cancellingId === job.id ? 'Cancelling…' : 'Cancel'}
+										</button>
+									{/if}
+									{#if job.error_message}
+										<span
+											class="text-xs text-(--color-danger) max-w-[12rem] truncate"
+											title={job.error_message}
+										>
+											{job.error_message}
+										</span>
+									{/if}
+								</div>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+		<p class="text-xs text-(--color-muted)">
+			Showing {filteredJobs.length} of {jobs.length} jobs
+		</p>
+	{/if}
+</div>

ui/src/routes/admin/catalogue-tools/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from './$types';
-import { backendFetch } from '$lib/server/scraper';
+import { listImageModels } from '$lib/server/scraper';
 import { log } from '$lib/server/logger';
 
 export interface ImageModelInfo {
@@ -12,13 +12,10 @@ export const load: PageServerLoad = async () => {
 	// Parent layout already guards admin role.
 	let imgModels: ImageModelInfo[] = [];
 	try {
-		const res = await backendFetch('/api/admin/image-gen/models');
-		if (res.ok) {
-			const data = await res.json();
-			imgModels = (data.models ?? []) as ImageModelInfo[];
-		}
+		imgModels = await listImageModels<ImageModelInfo>();
 	} catch (e) {
 		log.warn('admin/catalogue-tools', 'failed to load image models', { err: String(e) });
 	}
 	return { imgModels };
 };
+

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

@@ -1,4 +1,5 @@
 import type { PageServerLoad } from './$types';
+import * as cache from '$lib/server/cache';
 
 export interface Release {
 	id: number;
@@ -13,7 +14,15 @@ export interface Release {
 const GITEA_RELEASES_URL =
 	'https://gitea.kalekber.cc/api/v1/repos/kamil/libnovel/releases?limit=50&page=1';
 
+const CACHE_KEY = 'admin:changelog:releases';
+const CACHE_TTL = 5 * 60; // 5 minutes
+
 export const load: PageServerLoad = async ({ fetch }) => {
+	const cached = await cache.get<Release[]>(CACHE_KEY);
+	if (cached) {
+		return { releases: cached };
+	}
+
 	try {
 		const res = await fetch(GITEA_RELEASES_URL, {
 			headers: { Accept: 'application/json' }
@@ -22,7 +31,9 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			return { releases: [], error: `Gitea API returned ${res.status}` };
 		}
 		const releases: Release[] = await res.json();
-		return { releases: releases.filter((r) => !r.draft) };
+		const filtered = releases.filter((r) => !r.draft);
+		await cache.set(CACHE_KEY, filtered, CACHE_TTL);
+		return { releases: filtered };
 	} catch (e) {
 		return { releases: [], error: String(e) };
 	}

ui/src/routes/admin/image-gen/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from './$types';
-import { backendFetch } from '$lib/server/scraper';
+import { listImageModels } from '$lib/server/scraper';
 import { log } from '$lib/server/logger';
 import { listBooks } from '$lib/server/pocketbase';
 
@@ -21,23 +21,18 @@ export interface BookSummary {
 
 export const load: PageServerLoad = async () => {
 	// parent layout already guards admin role
-	const [modelsResult, books] = await Promise.allSettled([
-		(async () => {
-			const res = await backendFetch('/api/admin/image-gen/models');
-			if (!res.ok) throw new Error(`status ${res.status}`);
-			const data = await res.json();
-			return (data.models ?? []) as ImageModelInfo[];
-		})(),
+	const [models, booksResult] = await Promise.allSettled([
+		listImageModels<ImageModelInfo>(),
 		listBooks()
 	]);
 
-	if (modelsResult.status === 'rejected') {
-		log.warn('admin/image-gen', 'failed to load models', { err: String(modelsResult.reason) });
+	if (models.status === 'rejected') {
+		log.warn('admin/image-gen', 'failed to load models', { err: String(models.reason) });
 	}
 
 	return {
-		models: modelsResult.status === 'fulfilled' ? modelsResult.value : ([] as ImageModelInfo[]),
-		books: (books.status === 'fulfilled' ? books.value : []).map((b) => ({
+		models: models.status === 'fulfilled' ? models.value : ([] as ImageModelInfo[]),
+		books: (booksResult.status === 'fulfilled' ? booksResult.value : []).map((b) => ({
 			slug: b.slug,
 			title: b.title,
 			summary: b.summary ?? '',

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

@@ -355,7 +355,13 @@
 
 			const body = await res.json().catch(() => ({}));
 			if (!res.ok) {
-				genError = body.error ?? body.message ?? `Error ${res.status}`;
+				if (res.status === 502 || res.status === 504) {
+					genError =
+						body.error ??
+						`Generation timed out (${res.status}). FLUX models can take 60–120 s on Cloudflare Workers AI — try reducing steps or switching to a faster model.`;
+				} else {
+					genError = body.error ?? body.message ?? `Error ${res.status}`;
+				}
 				return;
 			}
 
@@ -754,6 +760,13 @@
 
 				{#if showAdvanced}
 					<div class="px-4 py-4 bg-(--color-surface) space-y-4">
+						<!-- Cloudflare AI timeout warning -->
+						{#if selectedModelInfo?.provider === 'cloudflare' || selectedModelInfo?.id.toLowerCase().includes('flux')}
+							<p class="text-xs text-amber-400/80 bg-amber-400/10 rounded px-2.5 py-1.5">
+								Cloudflare Workers AI has a ~100 s timeout. High step counts on FLUX models may result in a 502 error. Keep steps ≤ 20 to stay within limits.
+							</p>
+						{/if}
+
 						<!-- num_steps -->
 						<div class="space-y-1">
 							<div class="flex justify-between">

ui/src/routes/admin/text-gen/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from './$types';
-import { backendFetch } from '$lib/server/scraper';
+import { listTextModels } from '$lib/server/scraper';
 import { log } from '$lib/server/logger';
 import { listBooks } from '$lib/server/pocketbase';
 
@@ -18,23 +18,18 @@ export interface TextModelInfo {
 
 export const load: PageServerLoad = async () => {
 	// Parent layout already guards admin role.
-	const [modelsResult, books] = await Promise.allSettled([
-		(async () => {
-			const res = await backendFetch('/api/admin/text-gen/models');
-			if (!res.ok) throw new Error(`status ${res.status}`);
-			const data = await res.json();
-			return (data.models ?? []) as TextModelInfo[];
-		})(),
+	const [models, booksResult] = await Promise.allSettled([
+		listTextModels<TextModelInfo>(),
 		listBooks()
 	]);
 
-	if (modelsResult.status === 'rejected') {
-		log.warn('admin/text-gen', 'failed to load models', { err: String(modelsResult.reason) });
+	if (models.status === 'rejected') {
+		log.warn('admin/text-gen', 'failed to load models', { err: String(models.reason) });
 	}
 
 	return {
-		models: modelsResult.status === 'fulfilled' ? modelsResult.value : ([] as TextModelInfo[]),
-		books: (books.status === 'fulfilled' ? books.value : []).map((b) => ({
+		models: models.status === 'fulfilled' ? models.value : ([] as TextModelInfo[]),
+		books: (booksResult.status === 'fulfilled' ? booksResult.value : []).map((b) => ({
 			slug: b.slug,
 			title: b.title
 		})) as BookSummary[]

ui/src/routes/api/admin/ai-jobs/[id]/cancel/+server.ts

@@ -0,0 +1,29 @@
+/**
+ * POST /api/admin/ai-jobs/[id]/cancel
+ *
+ * Admin-only proxy to the Go backend's AI job cancel endpoint.
+ */
+
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { log } from '$lib/server/logger';
+import { backendFetch } from '$lib/server/scraper';
+
+export const POST: RequestHandler = async ({ params, locals }) => {
+	if (!locals.user || locals.user.role !== 'admin') {
+		throw error(403, 'Forbidden');
+	}
+
+	const { id } = params;
+
+	let res: Response;
+	try {
+		res = await backendFetch(`/api/admin/ai-jobs/${id}/cancel`, { method: 'POST' });
+	} catch (e) {
+		log.error('admin/ai-jobs/cancel', 'backend proxy error', { id, err: String(e) });
+		throw error(502, 'Could not reach backend');
+	}
+
+	const data = await res.json().catch(() => ({}));
+	return json(data, { status: res.status });
+};

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

@@ -286,23 +286,36 @@
 	const wordCount = $derived(
 		html ? (html.replace(/<[^>]*>/g, '').match(/\S+/g)?.length ?? 0) : 0
 	);
+
+	// Audio panel: auto-open if this chapter is already loaded/playing in the store
+	// svelte-ignore state_referenced_locally
+	let audioExpanded = $state(
+		audioStore.slug === data.book.slug && audioStore.chapter === 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) {
+			audioExpanded = true;
+		}
+	});
 </script>
 
 <svelte:head>
 	<title>{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })} — {data.book.title} — libnovel</title>
 </svelte:head>
 
-<!-- Reading progress bar (scroll mode) -->
+<!-- Reading progress bar (scroll mode, fixed at top of viewport) -->
 {#if layout.readMode === 'scroll'}
 <div class="reading-progress" style="width: {scrollProgress * 100}%"></div>
 {/if}
 
-<!-- Top nav (hidden in focus mode) -->
+<!-- ── Top navigation (hidden in focus mode) ─────────────────────────────── -->
 {#if !layout.focusMode}
-<div class="flex items-center justify-between mb-6 gap-4">
+<div class="flex items-center justify-between mb-8 gap-2">
+	<!-- Left: back to chapters list -->
 	<a
 		href="/books/{data.book.slug}/chapters"
-		class="text-(--color-muted) hover:text-(--color-text) text-sm flex items-center gap-1 transition-colors"
+		class="flex items-center gap-1 text-(--color-muted) hover:text-(--color-text) text-sm transition-colors shrink-0"
 	>
 		<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="M15 19l-7-7 7-7" />
@@ -310,148 +323,177 @@
 		{m.reader_back_to_chapters()}
 	</a>
 
-	<div class="flex gap-2">
+	<!-- Right: prev/next chapter arrows + settings -->
+	<div class="flex items-center gap-1">
 		{#if data.prev}
 			<a
 				href="/books/{data.book.slug}/chapters/{data.prev}"
-				class="px-3 py-1.5 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-2) transition-colors"
+				title="{m.reader_chapter_n({ n: String(data.prev) })}"
+				class="p-2 rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
 			>
-				&larr; {m.reader_chapter_n({ n: String(data.prev) })}
+				<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="M15 19l-7-7 7-7" />
+				</svg>
 			</a>
 		{/if}
 		{#if data.next}
 			<a
 				href="/books/{data.book.slug}/chapters/{data.next}"
-				class="px-3 py-1.5 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-2) transition-colors"
+				title="{m.reader_chapter_n({ n: String(data.next) })}"
+				class="p-2 rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
 			>
-				{m.reader_chapter_n({ n: String(data.next) })} &rarr;
+				<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="M9 5l7 7-7 7" />
+				</svg>
 			</a>
 		{/if}
+		{#if settingsCtx}
+			<button
+				type="button"
+				onclick={() => { settingsPanelOpen = !settingsPanelOpen; settingsTab = 'reading'; }}
+				aria-label="Reader settings"
+				class="p-2 rounded-lg transition-colors hover:bg-(--color-surface-2) {settingsPanelOpen ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)'}"
+			>
+				<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>
+		{/if}
 	</div>
 </div>
 
-<!-- Chapter heading -->
-<div class="mb-4">
-	<h1 class="text-xl font-bold text-(--color-text)">
+<!-- Chapter heading + meta + language switcher -->
+<div class="mb-6">
+	<h1 class="text-xl font-bold text-(--color-text) leading-snug">
 		{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
 	</h1>
-	{#if wordCount > 0}
-		<p class="text-(--color-muted) text-xs mt-1">
-			{m.reader_words({ n: wordCount.toLocaleString() })}
-			<span class="opacity-50 mx-1">·</span>
-			~{Math.max(1, Math.round(wordCount / 200))} min read
-		</p>
-	{/if}
-</div>
-{/if}
-
-<!-- Language switcher (not shown for preview chapters or focus mode) -->
-{#if !data.isPreview && !layout.focusMode}
-<div class="flex items-center gap-2 mb-6 flex-wrap">
-	<span class="text-(--color-muted) text-xs">Read in:</span>
-
-	<!-- English (original) -->
-	<a
-		href={langUrl('')}
-		class="px-2 py-0.5 rounded text-xs font-medium transition-colors {currentLang() === '' ? 'bg-(--color-brand) text-(--color-surface)' : 'bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'}"
-	>
-		EN
-	</a>
-
-	{#each SUPPORTED_LANGS as { code, label }}
-		{#if !data.isPro}
-			<!-- Locked for free users -->
-			<a
-				href="/profile"
-				title="Upgrade to Pro to read in {label}"
-				class="flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted) opacity-60 cursor-pointer hover:opacity-80 transition-opacity"
-			>
-				<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-					<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
-				</svg>
-				{label}
-			</a>
-		{:else if currentLang() === code && (translationStatus === 'pending' || translationStatus === 'running')}
-			<!-- Spinning indicator while translating -->
-			<span class="flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted)">
-				<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
-					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-				</svg>
-				{label}
-			</span>
-		{:else if currentLang() === code}
-			<!-- Active translated lang -->
-			<a
-				href={langUrl(code)}
-				class="px-2 py-0.5 rounded text-xs font-medium bg-(--color-brand) text-(--color-surface)"
-			>{label}</a>
-		{:else}
-			<!-- Inactive lang: click to request/navigate -->
-			<button
-				onclick={() => requestTranslation(code)}
-				disabled={translatingLang !== '' && translatingLang !== code && (translationStatus === 'pending' || translationStatus === 'running')}
-				class="px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-			>{label}</button>
+	<div class="flex items-center flex-wrap gap-x-3 gap-y-1.5 mt-2">
+		{#if wordCount > 0}
+			<p class="text-(--color-muted) text-xs">
+				{m.reader_words({ n: wordCount.toLocaleString() })}
+				<span class="opacity-40 mx-0.5">·</span>
+				~{Math.max(1, Math.round(wordCount / 200))} min
+			</p>
 		{/if}
-	{/each}
 
-	{#if !data.isPro}
-		<a href="/profile" class="text-xs text-(--color-brand) hover:underline ml-1">Upgrade to Pro</a>
-	{/if}
+		<!-- Language switcher (inline, compact) -->
+		{#if !data.isPreview}
+		<div class="flex items-center gap-1">
+			<a
+				href={langUrl('')}
+				class="px-2 py-0.5 rounded text-xs font-medium transition-colors
+					{currentLang() === '' ? 'bg-(--color-brand) text-(--color-surface)' : 'bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'}"
+			>EN</a>
+			{#each SUPPORTED_LANGS as { code, label }}
+				{#if !data.isPro}
+					<a
+						href="/profile"
+						title="Upgrade to Pro to read in {label}"
+						class="flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted)/50 cursor-pointer"
+					>
+						<svg class="w-2.5 h-2.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+							<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+						</svg>
+						{label}
+					</a>
+				{:else if currentLang() === code && (translationStatus === 'pending' || translationStatus === 'running')}
+					<span class="flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted)">
+						<svg class="w-2.5 h-2.5 animate-spin" fill="none" viewBox="0 0 24 24">
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+						</svg>
+						{label}
+					</span>
+				{:else if currentLang() === code}
+					<a href={langUrl(code)} class="px-2 py-0.5 rounded text-xs font-medium bg-(--color-brand) text-(--color-surface)">{label}</a>
+				{:else}
+					<button
+						type="button"
+						onclick={() => requestTranslation(code)}
+						disabled={translatingLang !== '' && translatingLang !== code && (translationStatus === 'pending' || translationStatus === 'running')}
+						class="px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+					>{label}</button>
+				{/if}
+			{/each}
+			{#if !data.isPro}
+				<a href="/profile" class="text-xs text-(--color-brand) hover:underline ml-0.5">Pro</a>
+			{/if}
+		</div>
+		{/if}
+	</div>
 </div>
 {/if}
 
-<!-- Audio player (hidden in focus mode) -->
+<!-- ── Audio section (collapsible, hidden in focus/preview mode) ──────────── -->
 {#if !data.isPreview && !layout.focusMode}
-{#if !page.data.user}
-	<!-- Unauthenticated: sign-in prompt -->
-	<div class="mb-6 px-4 py-3 rounded-lg bg-(--color-surface-2) border border-(--color-border) flex items-center justify-between gap-4">
-		<div>
-			<p class="text-(--color-text) text-sm font-medium">{m.reader_signin_for_audio()}</p>
-			<p class="text-(--color-muted) text-xs mt-0.5">{m.reader_signin_audio_desc()}</p>
+	{#if !page.data.user}
+		<!-- Unauthenticated -->
+		<div class="mb-6 px-4 py-3 rounded-lg bg-(--color-surface-2) border border-(--color-border) flex items-center justify-between gap-4">
+			<div>
+				<p class="text-(--color-text) text-sm font-medium">{m.reader_signin_for_audio()}</p>
+				<p class="text-(--color-muted) text-xs mt-0.5">{m.reader_signin_audio_desc()}</p>
+			</div>
+			<a href="/login" class="shrink-0 px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors">
+				{m.nav_sign_in()}
+			</a>
 		</div>
-		<a
-			href="/login"
-			class="shrink-0 px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
-		>
-			{m.nav_sign_in()}
-		</a>
-	</div>
-{:else if audioProRequired}
-	<div class="mb-6 px-4 py-3 rounded-lg bg-(--color-surface-2) border border-(--color-brand)/30 flex items-center justify-between gap-4">
-		<div>
-			<p class="text-(--color-text) text-sm font-medium">Daily audio limit reached</p>
-			<p class="text-(--color-muted) text-xs mt-0.5">Free users can listen to 3 chapters per day. Upgrade to Pro for unlimited audio.</p>
+	{:else if audioProRequired}
+		<div class="mb-6 px-4 py-2.5 rounded-lg bg-(--color-surface-2) border border-(--color-brand)/30 flex items-center justify-between gap-4">
+			<div>
+				<p class="text-(--color-text) text-sm font-medium">Daily audio limit reached</p>
+				<p class="text-(--color-muted) text-xs mt-0.5">Upgrade to Pro for unlimited audio.</p>
+			</div>
+			<a href="/profile" class="shrink-0 px-3 py-1.5 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors">
+				Upgrade
+			</a>
 		</div>
-		<a
-			href="/profile"
-			class="shrink-0 px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
-		>
-			Upgrade
-		</a>
+	{:else}
+		<!-- Collapsible audio panel -->
+		<div class="mb-6">
+			<button
+				type="button"
+				onclick={() => { audioExpanded = !audioExpanded; }}
+				class="w-full flex items-center justify-between px-4 py-2.5 bg-(--color-surface-2) border border-(--color-border) text-sm text-(--color-text) transition-colors hover:border-(--color-brand)/40
+					{audioExpanded ? 'rounded-t-lg' : 'rounded-lg'}"
+			>
+				<span class="flex items-center gap-2">
+					<svg class="w-4 h-4 text-(--color-brand)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M12 18.364a8 8 0 010-12.728M8.464 15.536a5 5 0 010-7.072" />
+					</svg>
+					<span class="font-medium">Listen to this chapter</span>
+					{#if audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number && audioStore.isPlaying}
+						<span class="text-xs text-(--color-brand)">● Playing</span>
+					{/if}
+				</span>
+				<svg class="w-4 h-4 text-(--color-muted) transition-transform duration-200 {audioExpanded ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+				</svg>
+			</button>
+			{#if audioExpanded}
+				<div class="border border-t-0 border-(--color-border) rounded-b-lg overflow-hidden">
+					<AudioPlayer
+						slug={data.book.slug}
+						chapter={data.chapter.number}
+						chapterTitle={data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
+						bookTitle={data.book.title}
+						cover={data.book.cover}
+						nextChapter={data.next}
+						chapters={data.chapters}
+						voices={data.voices}
+						playerStyle={layout.playerStyle}
+						onProRequired={() => { audioProRequired = true; }}
+					/>
+				</div>
+			{/if}
+		</div>
+	{/if}
+{:else if data.isPreview}
+	<div class="mb-6 px-4 py-2 rounded bg-(--color-surface-2)/60 border border-(--color-border) text-(--color-muted) text-sm">
+		{m.reader_preview_audio_notice()}
 	</div>
-{:else}
-<AudioPlayer
-	slug={data.book.slug}
-	chapter={data.chapter.number}
-	chapterTitle={data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
-	bookTitle={data.book.title}
-	cover={data.book.cover}
-	nextChapter={data.next}
-	chapters={data.chapters}
-	voices={data.voices}
-	playerStyle={layout.playerStyle}
-	onProRequired={() => { audioProRequired = true; }}
-/>
-{/if}
-{:else}
-<div class="mb-6 px-4 py-3 rounded bg-(--color-surface-2)/60 border border-(--color-border) text-(--color-muted) text-sm">
-	{m.reader_preview_audio_notice()}
-</div>
 {/if}
 
-<!-- Chapter content -->
+<!-- ── Chapter content ───────────────────────────────────────────────────── -->
 {#if fetchingContent}
 	<div class="flex flex-col items-center gap-3 py-16 text-(--color-muted) text-sm">
 		<svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -465,7 +507,7 @@
 		<p>{fetchError || m.reader_audio_error()}</p>
 	</div>
 {:else if layout.readMode === 'paginated'}
-	<!-- ── Paginated reader ─────────────────────────────────────────────── -->
+	<!-- ── Paginated reader ───────────────────────────────────────────── -->
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
 		role="none"
@@ -496,11 +538,9 @@
 			</svg>
 			Prev
 		</button>
-
 		<span class="text-sm text-(--color-muted) tabular-nums">
 			{pageIndex + 1} <span class="opacity-40">/</span> {totalPages}
 		</span>
-
 		<button
 			type="button"
 			onclick={() => { if (pageIndex < totalPages - 1) pageIndex++; }}
@@ -513,50 +553,59 @@
 			</svg>
 		</button>
 	</div>
-
-	<!-- Tap hint -->
 	<p class="text-center text-xs text-(--color-muted)/40 mt-2">Tap left/right · Arrow keys · Space</p>
 {:else}
-	<!-- ── Scroll reader ────────────────────────────────────────────────── -->
+	<!-- ── Scroll reader ──────────────────────────────────────────────── -->
 	<div class="prose-chapter mt-8 {layout.paraStyle === 'indented' ? 'para-indented' : ''}">
 		{@html html}
 	</div>
 {/if}
 
-<!-- Bottom nav + comments (hidden in focus mode) -->
+<!-- ── Bottom navigation + comments (hidden in focus mode) ───────────────── -->
 {#if !layout.focusMode}
-<div class="flex justify-between mt-12 pt-6 border-t border-(--color-border) gap-4">
-	{#if data.prev}
-		<a
-			href="/books/{data.book.slug}/chapters/{data.prev}"
-			class="px-4 py-2 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-2) transition-colors"
-		>
-			&larr; {m.reader_prev_chapter()}
-		</a>
-	{:else}
-		<span></span>
-	{/if}
-	{#if data.next}
-		<a
-			href="/books/{data.book.slug}/chapters/{data.next}"
-			class="px-4 py-2 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-2) transition-colors"
-		>
-			{m.reader_next_chapter()} &rarr;
-		</a>
-	{/if}
-</div>
+	<div class="mt-14 pt-6 border-t border-(--color-border)">
+		<!-- Next chapter: prominent full-width CTA -->
+		{#if data.next}
+			<a
+				href="/books/{data.book.slug}/chapters/{data.next}"
+				class="group flex items-center justify-between px-5 py-4 rounded-xl bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-colors"
+			>
+				<div>
+					<p class="text-xs text-(--color-muted) mb-0.5">{m.reader_next_chapter()}</p>
+					<p class="text-(--color-text) font-semibold group-hover:text-(--color-brand) transition-colors">
+						{m.reader_chapter_n({ n: String(data.next) })}
+					</p>
+				</div>
+				<svg class="w-5 h-5 text-(--color-muted) group-hover:text-(--color-brand) group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+			</a>
+		{/if}
+		<!-- Previous chapter: small secondary link -->
+		{#if data.prev}
+			<a
+				href="/books/{data.book.slug}/chapters/{data.prev}"
+				class="mt-3 inline-flex items-center gap-1 text-sm 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="M15 19l-7-7 7-7" />
+				</svg>
+				{m.reader_prev_chapter()}
+			</a>
+		{/if}
+	</div>
 
-<div class="mt-12">
-	<CommentsSection
-		slug={data.book.slug}
-		chapter={data.chapter.number}
-		isLoggedIn={!!page.data.user}
-		currentUserId={page.data.user?.id ?? ''}
-	/>
-</div>
+	<div class="mt-12">
+		<CommentsSection
+			slug={data.book.slug}
+			chapter={data.chapter.number}
+			isLoggedIn={!!page.data.user}
+			currentUserId={page.data.user?.id ?? ''}
+		/>
+	</div>
 {/if}
 
-<!-- Focus mode floating nav (shown only in focus mode) -->
+<!-- ── Focus mode floating nav ───────────────────────────────────────────── -->
 {#if layout.focusMode}
 <div class="fixed bottom-[4.5rem] left-1/2 -translate-x-1/2 z-50 flex items-center gap-2">
 	{#if data.prev}
@@ -595,22 +644,8 @@
 </div>
 {/if}
 
-<!-- ── Reader settings bottom sheet ──────────────────────────────────────── -->
+<!-- ── Reader settings bottom sheet ─────────────────────────────────────── -->
 {#if settingsCtx}
-
-<!-- Gear button — sits just above the mini-player (bottom-[4.5rem]) -->
-<button
-	onclick={() => { settingsPanelOpen = !settingsPanelOpen; settingsTab = 'reading'; }}
-	aria-label="Reader settings"
-	class="fixed bottom-[4.5rem] right-4 z-50 w-11 h-11 rounded-full bg-(--color-surface-2) border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:border-zinc-500 transition-colors flex items-center justify-center shadow-lg"
->
-	<svg class="w-5 h-5 {settingsPanelOpen ? 'text-(--color-brand)' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-	</svg>
-</button>
-
-<!-- Bottom sheet -->
 {#if settingsPanelOpen}
 <!-- Backdrop -->
 <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
@@ -648,12 +683,11 @@
 
 		{#if settingsTab === 'reading'}
 
-		<!-- ── Typography group ──────────────────────────────────────── -->
+		<!-- ── Typography ──────────────────────────────────────────────── -->
 		<div class="mb-1">
 			<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Typography</p>
 			<div class="bg-(--color-surface-3) rounded-xl overflow-hidden divide-y divide-(--color-border)">
 
-				<!-- Font -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-10 shrink-0">Font</span>
 					<div class="flex gap-1.5 flex-1">
@@ -670,7 +704,6 @@
 					</div>
 				</div>
 
-				<!-- Size -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-10 shrink-0">Size</span>
 					<div class="flex gap-1.5 flex-1">
@@ -690,12 +723,11 @@
 			</div>
 		</div>
 
-		<!-- ── Layout group ──────────────────────────────────────────── -->
+		<!-- ── Layout ──────────────────────────────────────────────────── -->
 		<div class="mt-4 mb-1">
 			<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Layout</p>
 			<div class="bg-(--color-surface-3) rounded-xl overflow-hidden divide-y divide-(--color-border)">
 
-				<!-- Read mode -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-16 shrink-0">Mode</span>
 					<div class="flex gap-1.5 flex-1">
@@ -713,7 +745,6 @@
 					</div>
 				</div>
 
-				<!-- Line spacing -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-16 shrink-0">Spacing</span>
 					<div class="flex gap-1.5 flex-1">
@@ -731,7 +762,6 @@
 					</div>
 				</div>
 
-				<!-- Width -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-16 shrink-0">Width</span>
 					<div class="flex gap-1.5 flex-1">
@@ -749,7 +779,6 @@
 					</div>
 				</div>
 
-				<!-- Paragraphs -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-16 shrink-0">Paragraphs</span>
 					<div class="flex gap-1.5 flex-1">
@@ -767,7 +796,6 @@
 					</div>
 				</div>
 
-				<!-- Focus mode -->
 				<button
 					type="button"
 					onclick={() => setLayout('focusMode', !layout.focusMode)}
@@ -784,12 +812,11 @@
 
 		{:else}
 
-		<!-- ── Listening tab ──────────────────────────────────────────── -->
+		<!-- ── Listening tab ───────────────────────────────────────────── -->
 		<div class="mb-1">
 			<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Player</p>
 			<div class="bg-(--color-surface-3) rounded-xl overflow-hidden divide-y divide-(--color-border)">
 
-				<!-- Player style -->
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-14 shrink-0">Style</span>
 					<div class="flex gap-1.5 flex-1">