fix: source maps — ship pre-built artifact with injected debug IDs to Docker

The docker-ui job was rebuilding the UI from scratch inside Docker, producing
chunk hashes and JS files that didn't match the source maps uploaded to
GlitchTip, causing all stack traces to appear minified.

Fix:
- ui/Dockerfile: add PREBUILT=1 ARG; skip npm run build when set
- release.yaml upload-sourcemaps: re-upload artifact after sentry-cli inject
- release.yaml docker-ui: download injected artifact into ui/build/ and pass
  PREBUILT=1 so Docker reuses the exact same JS files whose debug IDs are in
  GlitchTip

.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
@@ -136,60 +143,102 @@ jobs:
           cache-to: type=inline
 
   # ── ui: source map upload ─────────────────────────────────────────────────────
-  # Commented out: GlitchTip project/auth token needs to be recreated after
-  # the GlitchTip DB wipe. Re-enable once GLITCHTIP_AUTH_TOKEN is updated.
-  # upload-sourcemaps:
-  #   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: Build with source maps
-  #       run: npm run build
-  #
-  #     - name: Download glitchtip-cli
-  #       run: |
-  #         curl -L "https://gitlab.com/glitchtip/glitchtip-cli/-/jobs/artifacts/v0.1.0/raw/artifacts/glitchtip-cli-linux-x86_64?job=build-linux-x86_64" \
-  #           -o /usr/local/bin/glitchtip-cli
-  #         chmod +x /usr/local/bin/glitchtip-cli
-  #
-  #     - name: Inject debug IDs into build artifacts
-  #       run: glitchtip-cli sourcemaps inject ./build
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc/
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: libnovel-ui
-  #
-  #     - name: Upload source maps to GlitchTip
-  #       run: glitchtip-cli sourcemaps upload ./build --release ${{ gitea.ref_name }}
-  #       env:
-  #         SENTRY_URL: https://errors.libnovel.cc/
-  #         SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
-  #         SENTRY_ORG: libnovel
-  #         SENTRY_PROJECT: libnovel-ui
+  upload-sourcemaps:
+    name: Upload source maps
+    runs-on: ubuntu-latest
+    needs: [check-ui]
+    steps:
+      - name: Compute release version (strip leading v)
+        id: ver
+        run: |
+          V="${{ gitea.ref_name }}"
+          echo "version=${V#v}" >> "$GITHUB_OUTPUT"
+
+      - 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
+
+      - name: Inject debug IDs into build artifacts
+        run: sentry-cli sourcemaps inject ./build
+        env:
+          SENTRY_URL: https://errors.libnovel.cc/
+          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+          SENTRY_ORG: libnovel
+          SENTRY_PROJECT: ui
+
+      - name: Upload injected build (for docker-ui)
+        uses: actions/upload-artifact@v3
+        with:
+          name: ui-build-injected
+          path: build
+          retention-days: 1
+
+      - name: Create GlitchTip release
+        run: sentry-cli releases new ${{ steps.ver.outputs.version }}
+        env:
+          SENTRY_URL: https://errors.libnovel.cc/
+          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+          SENTRY_ORG: libnovel
+          SENTRY_PROJECT: ui
+
+      - name: Upload source maps to GlitchTip
+        run: sentry-cli sourcemaps upload ./build --release ${{ steps.ver.outputs.version }}
+        env:
+          SENTRY_URL: https://errors.libnovel.cc/
+          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+          SENTRY_ORG: libnovel
+          SENTRY_PROJECT: ui
+
+      - name: Finalize GlitchTip release
+        run: sentry-cli releases finalize ${{ steps.ver.outputs.version }}
+        env:
+          SENTRY_URL: https://errors.libnovel.cc/
+          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+          SENTRY_ORG: libnovel
+          SENTRY_PROJECT: ui
+
+      - name: Prune old GlitchTip releases (keep latest 10)
+        run: |
+          set -euo pipefail
+          KEEP=10
+          OLD=$(curl -sf \
+            -H "Authorization: Bearer $SENTRY_AUTH_TOKEN" \
+            "$SENTRY_URL/api/0/organizations/$SENTRY_ORG/releases/?project=$SENTRY_PROJECT&per_page=100" \
+            | python3 -c "
+          import sys, json
+          releases = json.load(sys.stdin)
+          for r in releases[$KEEP:]:
+              print(r['version'])
+          " KEEP=$KEEP)
+          for ver in $OLD; do
+            echo "Deleting old release: $ver"
+            sentry-cli releases delete "$ver" || true
+          done
+        env:
+          SENTRY_URL: https://errors.libnovel.cc
+          SENTRY_AUTH_TOKEN: ${{ secrets.GLITCHTIP_AUTH_TOKEN }}
+          SENTRY_ORG: libnovel
+          SENTRY_PROJECT: ui
 
   # ── docker: ui ────────────────────────────────────────────────────────────────
   docker-ui:
     name: Docker / ui
     runs-on: ubuntu-latest
-    needs: [check-ui]
+    needs: [check-ui, upload-sourcemaps]
     steps:
       - uses: actions/checkout@v4
 
+      - name: Download injected build (debug IDs already embedded)
+        uses: actions/download-artifact@v3
+        with:
+          name: ui-build-injected
+          path: ui/build
+
       - uses: docker/setup-buildx-action@v3
 
       - name: Log in to Docker Hub
@@ -219,6 +268,7 @@ jobs:
             BUILD_VERSION=${{ steps.meta.outputs.version }}
             BUILD_COMMIT=${{ gitea.sha }}
             BUILD_TIME=${{ gitea.event.head_commit.timestamp }}
+            PREBUILT=1
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-ui:latest
           cache-to: type=inline
 
@@ -261,7 +311,7 @@ jobs:
   release:
     name: Gitea Release
     runs-on: ubuntu-latest
-    needs: [docker-backend, docker-runner, docker-ui, docker-caddy]
+    needs: [docker-backend, docker-runner, docker-ui, docker-caddy, upload-sourcemaps]
     steps:
       - uses: actions/checkout@v4
         with:

.opencode/skills/ios-ux/SKILL.md

@@ -1,156 +0,0 @@
----
-name: ios-ux
-description: iOS/SwiftUI UI & UX review and implementation guidelines for LibNovel. Enforces Apple HIG, iOS 17+ APIs, spring animations, haptics, accessibility, performance, and offline handling. Load this skill for any iOS view work.
-compatibility: opencode
----
-
-# iOS UI/UX Skill — LibNovel
-
-Load this skill whenever working on SwiftUI views in `ios/`. It defines design standards, review process for screenshots, and implementation rules.
-
----
-
-## Screenshot Review Process
-
-When the user provides a screenshot of the app:
-
-1. **Analyze first** — identify specific UI/UX issues across these categories:
-   - Visual hierarchy and spacing
-   - Typography (size, weight, contrast)
-   - Color and material usage
-   - Animation and interactivity gaps
-   - Accessibility problems
-   - Deprecated or non-native patterns
-2. **Present a numbered list** of suggested improvements with brief rationale for each.
-3. **Ask for confirmation** before writing any code: "Should I apply all of these, or only specific ones?"
-4. Apply only what the user confirms.
-
----
-
-## Design System
-
-### Colors & Materials
-- **Accent**: `Color.amber` (project-defined). Use for active state, selection indicators, progress fills, and CTAs.
-- **Backgrounds**: Prefer `.regularMaterial`, `.ultraThinMaterial`, or `.thinMaterial` over hard-coded `Color.black.opacity(x)` or `Color(.systemBackground)`.
-- **Dark overlays** (e.g. full-screen players): Use `KFImage` blurred background + `Color.black.opacity(0.5–0.6)` overlay. Never use a flat solid black background.
-- **Semantic colors**: Use `.primary`, `.secondary`, `.tertiary` foreground styles. Avoid hard-coded `Color.white` except on dark material contexts (full-screen player).
-- **No hardcoded color literals** — use `Color+App.swift` extensions or system semantic colors.
-
-### Typography
-- Use the SF Pro system font via `.font(.title)`, `.font(.body)`, etc. — never hardcode font names except for intentional stylistic accents (e.g. "Snell Roundhand" for voice watermark).
-- Apply `.fontWeight()` and `.fontDesign()` modifiers rather than custom font families.
-- Support Dynamic Type — never hardcode a fixed font size as the sole option without a `.minimumScaleFactor` or system font size modifier.
-- Hierarchy: title3.bold for primary labels, subheadline for secondary, caption/caption2 for metadata.
-
-### Spacing & Layout
-- Minimum touch target: **44×44 pt**. Use `.frame(minWidth: 44, minHeight: 44)` or `.contentShape(Rectangle())` on small icons.
-- Prefer 16–20 pt horizontal padding on full-width containers; 12 pt for compact inner elements.
-- Use `VStack(spacing:)` and `HStack(spacing:)` explicitly — never rely on default spacing for production UI.
-- Corner radii: 12–14 pt for cards/chips, 10 pt for small badges, 20–24 pt for large cover art.
-
----
-
-## Animation Rules
-
-### Spring Animations (default for all interactive transitions)
-- Use `.spring(response:dampingFraction:)` for state-driven layout changes, selection feedback, and appear/disappear transitions.
-- Recommended defaults:
-  - Interactive elements: `response: 0.3, dampingFraction: 0.7`
-  - Entrance animations: `response: 0.45–0.5, dampingFraction: 0.7`
-  - Quick snappy feedback: `response: 0.2, dampingFraction: 0.6`
-- Reserve `.easeInOut` only for non-interactive, ambient animations (e.g. opacity pulses, generating overlays).
-
-### SF Symbol Transitions
-- Always use `contentTransition(.symbolEffect(.replace.downUp))` when a symbol name changes based on state (play/pause, checkmark/circle, etc.).
-- Use `.symbolEffect(.variableColor.cumulative)` for continuous animations (waveform, loading indicators).
-- Use `.symbolEffect(.bounce)` for one-shot entrance emphasis (e.g. completion checkmark appearing).
-- Use `.symbolEffect(.pulse)` for error/warning states that need attention.
-
-### Repeating Animations
-- Use `phaseAnimator` for any looping animation that previously used manual `@State` + `withAnimation` chains.
-- Do not use `Timer` publishers for UI animation — prefer `phaseAnimator` or `TimelineView`.
-
----
-
-## Haptic Feedback
-
-Add `UIImpactFeedbackGenerator` to every user-initiated interactive control:
-- `.light` — toggle switches, selection chips, secondary actions, slider drag start.
-- `.medium` — primary transport buttons (play/pause, chapter skip), significant confirmations.
-- `.heavy` — destructive actions (only if no confirmation dialog).
-
-Pattern:
-```swift
-Button {
-    UIImpactFeedbackGenerator(style: .light).impactOccurred()
-    // action
-} label: { ... }
-```
-
-Do **not** add haptics to:
-- Programmatic state changes not directly triggered by a tap.
-- Buttons inside `List` rows that already use swipe actions.
-- Scroll events.
-
----
-
-## iOS 17+ API Usage
-
-Flag and replace any of the following deprecated patterns:
-
-| Deprecated | Replace with |
-|---|---|
-| `NavigationView` | `NavigationStack` |
-| `@StateObject` / `ObservableObject` (new types only) | `@Observable` macro |
-| `DispatchQueue.main.async` | `await MainActor.run` or `@MainActor` |
-| Manual `@State` animation chains for repeating loops | `phaseAnimator` |
-| `.animation(_:)` without `value:` | `.animation(_:value:)` |
-| `AnyView` wrapping for conditional content | `@ViewBuilder` + `Group` |
-
-Do **not** refactor existing `ObservableObject` types to `@Observable` unless explicitly asked — only apply `@Observable` to new types.
-
----
-
-## Accessibility
-
-Every view must:
-- Support VoiceOver: add `.accessibilityLabel()` to icon-only buttons and image views.
-- Support Dynamic Type: test that text doesn't truncate at xxxLarge without a layout adjustment.
-- Meet contrast ratio: text on tinted backgrounds must be legible — avoid `.opacity(0.25)` or lower for any user-readable text.
-- Touch targets ≥ 44pt (see Spacing above).
-- Interactive controls must have `.accessibilityAddTraits(.isButton)` if not using `Button`.
-- Do not rely solely on color to convey state — pair color with icon or label.
-
----
-
-## Performance
-
-- **Isolate high-frequency observers**: Any view that observes a `PlaybackProgress` (timer-tick updates) must be a separate sub-view that `@ObservedObject`-observes only the progress object — not the parent view. This prevents the entire parent from re-rendering every 0.5 seconds.
-- **Avoid `id()` overuse**: Only use `.id()` to force view recreation when necessary (e.g. background image on track change). Prefer `onChange(of:)` for side effects.
-- **Lazy containers**: Use `LazyVStack` / `LazyHStack` inside `ScrollView` for lists of 20+ items. `List` is inherently lazy and does not need this.
-- **Image loading**: Always use `KFImage` (Kingfisher) with `.placeholder` for remote images. Never use `AsyncImage` for cover art — it has no disk cache.
-- **Avoid `AnyView`**: It breaks structural identity and hurts diffing. Use `@ViewBuilder` or `Group { }` instead.
-
----
-
-## Offline & Error States
-
-Every view that makes network calls must:
-1. Wrap the body in a `VStack` with `OfflineBanner` at the top, gated on `networkMonitor.isConnected`.
-2. Suppress network errors silently when offline via `ErrorAlertModifier` — do not show an alert when the device is offline.
-3. Gate `.task` / `.onAppear` network calls: `guard networkMonitor.isConnected else { return }`.
-4. Show a non-blocking inline empty state (not a full-screen error) for failed loads when online.
-
----
-
-## Component Checklist (before submitting any view change)
-
-- [ ] All interactive elements ≥ 44pt touch target
-- [ ] SF Symbol state changes use `contentTransition(.symbolEffect(...))`
-- [ ] State-driven layout transitions use `.spring(response:dampingFraction:)`
-- [ ] Tappable controls have haptic feedback
-- [ ] No `NavigationView`, no `DispatchQueue.main.async`, no `.animation(_:)` without `value:`
-- [ ] High-frequency observers are isolated sub-views
-- [ ] Offline state handled with `OfflineBanner` + `NetworkMonitor`
-- [ ] VoiceOver labels on icon-only buttons
-- [ ] No hardcoded `Color.black` / `Color.white` / `Color(.systemBackground)` where a material applies

AGENTS.md

@@ -0,0 +1,150 @@
+# LibNovel v2 — Agent Context
+
+This file is the root-level knowledge base for LLM coding agents (OpenCode, Claude, Cursor, Copilot, etc.).
+Sub-directories have their own `AGENTS.md` with deeper context (e.g. `ios/AGENTS.md`).
+
+---
+
+## Stack
+
+| Layer | Technology |
+|---|---|
+| UI | SvelteKit 2 + Svelte 5, TypeScript, TailwindCSS |
+| Backend / Runner | Go (single repo, two binaries: `backend`, `runner`) |
+| iOS app | SwiftUI, iOS 17+, Swift 5.9+ |
+| Database | PocketBase (SQLite) + MinIO (object storage) |
+| Search | Meilisearch |
+| Queue | Asynq over Redis (local) / Valkey (prod) |
+| Scraping | Novelfire scraper in `backend/novelfire/` |
+
+---
+
+## Repository Layout
+
+```
+.
+├── .gitea/workflows/     # CI/CD — Gitea Actions (NOT .github/)
+├── .opencode/            # OpenCode agent config (memory, skills)
+├── backend/              # Go backend + runner (single module)
+├── caddy/                # Caddy reverse proxy Dockerfile
+├── homelab/              # Homelab docker-compose + observability stack
+├── ios/                  # SwiftUI iOS app (see ios/AGENTS.md)
+├── scripts/              # Utility scripts
+├── ui/                   # SvelteKit UI
+├── docker-compose.yml    # Prod compose (all services)
+├── AGENTS.md             # This file
+└── opencode.json         # OpenCode config
+```
+
+---
+
+## CI/CD — Gitea Actions
+
+- Workflows live in `.gitea/workflows/` — **not** `.github/workflows/`
+- Self-hosted Gitea instance; use `gitea.ref_name` / `gitea.sha` (not `github.*`)
+- Two workflows:
+  - `ci.yaml` — runs on every push to `main` (test + type-check)
+  - `release.yaml` — runs on `v*` tags (build Docker images, upload source maps, create Gitea release)
+- Secrets: `DOCKER_USER`, `DOCKER_TOKEN`, `GITEA_TOKEN`, `GLITCHTIP_AUTH_TOKEN`
+
+### Releasing a new version
+
+```bash
+git tag v2.5.X -m "Short title\n\nOptional longer body"
+git push origin v2.5.X
+```
+
+CI will build all Docker images, upload source maps to GlitchTip, and create a Gitea release automatically.
+
+---
+
+## GlitchTip Error Tracking
+
+- Instance: `https://errors.libnovel.cc/`
+- Org: `libnovel`
+- Projects: `ui` (id/1), `backend` (id/2), `runner` (id/3)
+- Tool: `glitchtip-cli` v0.1.0
+
+### Per-service DSNs (stored in Doppler)
+
+| Service | Doppler key | GlitchTip project |
+|---|---|---|
+| UI (SvelteKit) | `PUBLIC_GLITCHTIP_DSN` | ui (1) |
+| Backend (Go) | `GLITCHTIP_DSN_BACKEND` | backend (2) |
+| Runner (Go) | `GLITCHTIP_DSN_RUNNER` | runner (3) |
+
+### Source map upload flow (release.yaml)
+
+The correct order is **critical** — uploading before `releases new` results in 0 files shown in GlitchTip UI:
+
+```
+glitchtip-cli sourcemaps inject ./build          # inject debug IDs
+glitchtip-cli releases new <version>             # MUST come before upload
+glitchtip-cli sourcemaps upload ./build \
+  --release <version>                            # associate files with release
+glitchtip-cli releases finalize <version>        # mark release complete
+```
+
+---
+
+## Infrastructure
+
+| Environment | Host | Path | Doppler config |
+|---|---|---|---|
+| Prod | `165.22.70.138` | `/opt/libnovel/` | `prd` |
+| Homelab runner | `192.168.0.109` | `/opt/libnovel-runner/` | `prd_homelab` |
+
+### Docker Compose — always use Doppler
+
+```bash
+# Prod
+doppler run --project libnovel --config prd -- docker compose <cmd>
+
+# Homelab full-stack (runs from .bak file on server)
+doppler run --project libnovel --config prd_homelab -- docker compose -f homelab/docker-compose.yml.bak <cmd>
+
+# Homelab runner only
+doppler run --project libnovel --config prd_homelab -- docker compose -f homelab/runner/docker-compose.yml <cmd>
+```
+
+- Prod runner has `profiles: [runner]` — `docker compose up -d` will NOT accidentally start it
+- When deploying, always sync `docker-compose.yml` to the server before running `up -d`
+
+---
+
+## Observability
+
+| Tool | Purpose |
+|---|---|
+| GlitchTip | Error tracking (UI + backend + runner) |
+| Grafana Faro | RUM / Web Vitals (collector at `faro.libnovel.cc/collect`) |
+| OpenTelemetry | Distributed tracing (OTLP → collector → Tempo) |
+| Grafana | Dashboards at `/admin/grafana` |
+
+Grafana dashboards: `homelab/otel/grafana/provisioning/dashboards/`
+
+---
+
+## Go Backend
+
+- Primary files: `orchestrator.go`, `server/handlers_*.go`, `novelfire/scraper.go`, `storage/hybrid.go`, `storage/pocketbase.go`
+- Store interface: `store.go` — never touch MinIO/PocketBase clients directly outside `storage/`
+- Two binaries built from the same module: `backend` (HTTP API) and `runner` (Asynq worker)
+
+---
+
+## SvelteKit UI
+
+- Source: `ui/src/`
+- i18n: Paraglide — translation files in `ui/messages/*.json` (5 locales)
+- Auth debug bypass: `GET /api/auth/debug-login?token=<DEBUG_LOGIN_TOKEN>&username=<username>&next=<path>`
+
+---
+
+## iOS App
+
+Full context in `ios/AGENTS.md`. Quick notes:
+- SwiftUI, iOS 17+, `@Observable` for new types
+- Download key separator: `::` (not `-`)
+- Voice fallback: book override → global default → `"af_bella"`
+- Offline pattern: `NetworkMonitor` env object + `OfflineBanner` + `ErrorAlertModifier`

backend/cmd/backend/main.go

@@ -133,6 +133,15 @@ func run() error {
 		log.Info("CFAI_ACCOUNT_ID/CFAI_API_TOKEN not set — image generation unavailable")
 	}
 
+	// ── Cloudflare Workers AI Text Generation ─────────────────────────────────
+	var textGenClient cfai.TextGenClient
+	if cfg.CFAI.AccountID != "" && cfg.CFAI.APIToken != "" {
+		textGenClient = cfai.NewTextGen(cfg.CFAI.AccountID, cfg.CFAI.APIToken)
+		log.Info("cloudflare AI text generation enabled")
+	} else {
+		log.Info("CFAI_ACCOUNT_ID/CFAI_API_TOKEN not set — text generation unavailable")
+	}
+
 	// ── Meilisearch (search reads only; indexing is the runner's job) ────────
 	var searchIndex meili.Client
 	if cfg.Meilisearch.URL != "" {
@@ -184,6 +193,9 @@ func run() error {
 			PocketTTS:        pocketTTSClient,
 			CFAI:             cfaiClient,
 			ImageGen:         imageGenClient,
+			TextGen:          textGenClient,
+			BookWriter:       store,
+			AIJobStore:       store,
 			Log:              log,
 		},
 	)

backend/internal/backend/handlers.go

@@ -569,6 +569,30 @@ func (s *Server) handleReindex(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 0, map[string]any{"slug": slug, "indexed": count})
 }
 
+// handleDedupChapters handles POST /api/admin/dedup-chapters/{slug}.
+// Removes duplicate chapters_idx records for a book, keeping the latest record
+// per chapter number. Returns the number of duplicate records deleted.
+func (s *Server) handleDedupChapters(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	if slug == "" {
+		jsonError(w, http.StatusBadRequest, "missing slug")
+		return
+	}
+
+	deleted, err := s.deps.BookWriter.DeduplicateChapters(r.Context(), slug)
+	if err != nil {
+		s.deps.Log.Error("dedup-chapters failed", "slug", slug, "err", err)
+		writeJSON(w, http.StatusInternalServerError, map[string]any{
+			"error":   err.Error(),
+			"deleted": deleted,
+		})
+		return
+	}
+
+	s.deps.Log.Info("dedup-chapters complete", "slug", slug, "deleted", deleted)
+	writeJSON(w, 0, map[string]any{"slug": slug, "deleted": deleted})
+}
+
 // ── Audio ──────────────────────────────────────────────────────────────────────
 
 // handleAudioGenerate handles POST /api/audio/{slug}/{n}.

backend/internal/backend/handlers_aijobs.go

@@ -0,0 +1,233 @@
+package backend
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/libnovel/backend/internal/cfai"
+	"github.com/libnovel/backend/internal/domain"
+)
+
+// ── Cancel registry ────────────────────────────────────────────────────────────
+// cancelJobsMu guards cancelJobs.
+var cancelJobsMu sync.Mutex
+
+// cancelJobs maps a job ID to its CancelFunc. Entries are added when a batch
+// job starts and removed when it finishes or is cancelled.
+var cancelJobs = map[string]context.CancelFunc{}
+
+func registerCancelJob(id string, cancel context.CancelFunc) {
+	cancelJobsMu.Lock()
+	cancelJobs[id] = cancel
+	cancelJobsMu.Unlock()
+}
+
+func deregisterCancelJob(id string) {
+	cancelJobsMu.Lock()
+	delete(cancelJobs, id)
+	cancelJobsMu.Unlock()
+}
+
+// ── AI Job list / get / cancel ─────────────────────────────────────────────────
+
+// handleAdminListAIJobs handles GET /api/admin/ai-jobs.
+// Returns all ai_job records sorted by started descending.
+func (s *Server) handleAdminListAIJobs(w http.ResponseWriter, r *http.Request) {
+	if s.deps.AIJobStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "ai job store not configured")
+		return
+	}
+	jobs, err := s.deps.AIJobStore.ListAIJobs(r.Context())
+	if err != nil {
+		s.deps.Log.Error("admin: list ai jobs failed", "err", err)
+		jsonError(w, http.StatusInternalServerError, "list ai jobs: "+err.Error())
+		return
+	}
+	writeJSON(w, 0, map[string]any{"jobs": jobs})
+}
+
+// handleAdminGetAIJob handles GET /api/admin/ai-jobs/{id}.
+func (s *Server) handleAdminGetAIJob(w http.ResponseWriter, r *http.Request) {
+	if s.deps.AIJobStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "ai job store not configured")
+		return
+	}
+	id := r.PathValue("id")
+	job, ok, err := s.deps.AIJobStore.GetAIJob(r.Context(), id)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("job %q not found", id))
+		return
+	}
+	writeJSON(w, 0, job)
+}
+
+// handleAdminCancelAIJob handles POST /api/admin/ai-jobs/{id}/cancel.
+// Marks the job as cancelled in PB and cancels the in-memory context if present.
+func (s *Server) handleAdminCancelAIJob(w http.ResponseWriter, r *http.Request) {
+	if s.deps.AIJobStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "ai job store not configured")
+		return
+	}
+	id := r.PathValue("id")
+
+	// Cancel in-memory context if the job is still running in this process.
+	cancelJobsMu.Lock()
+	if cancel, ok := cancelJobs[id]; ok {
+		cancel()
+	}
+	cancelJobsMu.Unlock()
+
+	// Mark as cancelled in PB.
+	if err := s.deps.AIJobStore.UpdateAIJob(r.Context(), id, map[string]any{
+		"status":   string(domain.TaskStatusCancelled),
+		"finished": time.Now().Format(time.RFC3339),
+	}); err != nil {
+		s.deps.Log.Error("admin: cancel ai job failed", "id", id, "err", err)
+		jsonError(w, http.StatusInternalServerError, "cancel ai job: "+err.Error())
+		return
+	}
+
+	s.deps.Log.Info("admin: ai job cancelled", "id", id)
+	writeJSON(w, 0, map[string]any{"cancelled": true})
+}
+
+// ── Auto-prompt ────────────────────────────────────────────────────────────────
+
+// autoPromptRequest is the JSON body for POST /api/admin/image-gen/auto-prompt.
+type autoPromptRequest struct {
+	// Slug is the book slug.
+	Slug string `json:"slug"`
+	// Type is "cover" or "chapter".
+	Type string `json:"type"`
+	// Chapter number (required when type == "chapter").
+	Chapter int `json:"chapter"`
+	// Model is the text-gen model to use. Defaults to DefaultTextModel.
+	Model string `json:"model"`
+}
+
+// autoPromptResponse is returned by POST /api/admin/image-gen/auto-prompt.
+type autoPromptResponse struct {
+	Prompt string `json:"prompt"`
+	Model  string `json:"model"`
+}
+
+// handleAdminImageGenAutoPrompt handles POST /api/admin/image-gen/auto-prompt.
+//
+// Uses the text generation model to create a vivid image generation prompt
+// based on the book's description (for covers) or chapter title/content (for chapters).
+func (s *Server) handleAdminImageGenAutoPrompt(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured")
+		return
+	}
+
+	var req autoPromptRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if req.Type != "cover" && req.Type != "chapter" {
+		jsonError(w, http.StatusBadRequest, `type must be "cover" or "chapter"`)
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	model := req.Model
+	if model == "" {
+		model = string(cfai.DefaultTextModel)
+	}
+
+	var userPrompt string
+	if req.Type == "cover" {
+		userPrompt = fmt.Sprintf(
+			"Book: \"%s\"\nAuthor: %s\nGenres: %s\n\nDescription:\n%s",
+			meta.Title,
+			meta.Author,
+			strings.Join(meta.Genres, ", "),
+			meta.Summary,
+		)
+	} else {
+		// For chapter images, use chapter title if available.
+		chapterTitle := fmt.Sprintf("Chapter %d", req.Chapter)
+		if req.Chapter > 0 {
+			chapters, listErr := s.deps.BookReader.ListChapters(r.Context(), req.Slug)
+			if listErr == nil {
+				for _, ch := range chapters {
+					if ch.Number == req.Chapter {
+						chapterTitle = ch.Title
+						break
+					}
+				}
+			}
+		}
+		userPrompt = fmt.Sprintf(
+			"Book: \"%s\"\nGenres: %s\nChapter: %s\n\nBook description:\n%s",
+			meta.Title,
+			strings.Join(meta.Genres, ", "),
+			chapterTitle,
+			meta.Summary,
+		)
+	}
+
+	systemPrompt := buildAutoPromptSystem(req.Type)
+
+	s.deps.Log.Info("admin: image auto-prompt requested",
+		"slug", req.Slug, "type", req.Type, "chapter", req.Chapter, "model", model)
+
+	result, genErr := s.deps.TextGen.Generate(r.Context(), cfai.TextRequest{
+		Model: cfai.TextModel(model),
+		Messages: []cfai.TextMessage{
+			{Role: "system", Content: systemPrompt},
+			{Role: "user", Content: userPrompt},
+		},
+		MaxTokens: 256,
+	})
+	if genErr != nil {
+		s.deps.Log.Error("admin: auto-prompt failed", "err", genErr)
+		jsonError(w, http.StatusBadGateway, "text generation failed: "+genErr.Error())
+		return
+	}
+
+	writeJSON(w, 0, autoPromptResponse{
+		Prompt: strings.TrimSpace(result),
+		Model:  model,
+	})
+}
+
+func buildAutoPromptSystem(imageType string) string {
+	if imageType == "cover" {
+		return `You are a professional prompt engineer for AI image generation (Stable Diffusion / FLUX models). ` +
+			`Given a book's title, genres, and description, write a single vivid image generation prompt ` +
+			`for a book cover. The prompt should describe the visual composition, art style, lighting, ` +
+			`and mood without mentioning text or typography. ` +
+			`Format: comma-separated visual descriptors, 30–60 words. ` +
+			`Output ONLY the prompt — no explanation, no quotes, no labels.`
+	}
+	return `You are a professional prompt engineer for AI image generation (Stable Diffusion / FLUX models). ` +
+		`Given a book's title, genres, and a specific chapter title, write a single vivid scene illustration prompt. ` +
+		`Describe the scene, characters, setting, lighting, and art style. ` +
+		`Format: comma-separated visual descriptors, 30–60 words. ` +
+		`Output ONLY the prompt — no explanation, no quotes, no labels.`
+}

backend/internal/backend/handlers_catalogue.go

@@ -0,0 +1,792 @@
+package backend
+
+// Catalogue enrichment handlers: tagline, genre tagging, content warnings,
+// quality scoring, batch cover regeneration, and per-book metadata refresh.
+//
+// All generation endpoints are admin-only (enforced by the SvelteKit proxy layer).
+// All long-running operations support cancellation via r.Context().Done().
+// Batch operations use an in-memory cancel registry (cancelJobs map) so the
+// frontend can send a cancel request by job ID.
+
+import (
+	"context"
+	"crypto/rand"
+	"encoding/hex"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/libnovel/backend/internal/cfai"
+	"github.com/libnovel/backend/internal/domain"
+)
+
+
+// ── Tagline ───────────────────────────────────────────────────────────────
+
+// textGenTaglineRequest is the JSON body for POST /api/admin/text-gen/tagline.
+type textGenTaglineRequest struct {
+	Slug      string `json:"slug"`
+	Model     string `json:"model"`
+	MaxTokens int    `json:"max_tokens"`
+}
+
+// textGenTaglineResponse is returned by POST /api/admin/text-gen/tagline.
+type textGenTaglineResponse struct {
+	OldTagline string `json:"old_tagline"`
+	NewTagline string `json:"new_tagline"`
+	Model      string `json:"model"`
+}
+
+// handleAdminTextGenTagline handles POST /api/admin/text-gen/tagline.
+// Generates a 1-sentence marketing hook for a book.
+func (s *Server) handleAdminTextGenTagline(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured")
+		return
+	}
+
+	var req textGenTaglineRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+
+	system := `You are a copywriter for a web novel platform. ` +
+		`Given a book's title, genres, and description, write a single punchy tagline ` +
+		`(one sentence, under 20 words) that hooks a reader. ` +
+		`Output ONLY the tagline — no quotes, no labels, no explanation.`
+
+	user := fmt.Sprintf("Title: %s\nGenres: %s\n\nDescription:\n%s",
+		meta.Title,
+		strings.Join(meta.Genres, ", "),
+		meta.Summary,
+	)
+
+	s.deps.Log.Info("admin: text-gen tagline requested", "slug", req.Slug, "model", model)
+
+	result, genErr := s.deps.TextGen.Generate(r.Context(), cfai.TextRequest{
+		Model:     model,
+		Messages:  []cfai.TextMessage{{Role: "system", Content: system}, {Role: "user", Content: user}},
+		MaxTokens: 64,
+	})
+	if genErr != nil {
+		s.deps.Log.Error("admin: text-gen tagline failed", "err", genErr)
+		jsonError(w, http.StatusBadGateway, "text generation failed: "+genErr.Error())
+		return
+	}
+
+	writeJSON(w, 0, textGenTaglineResponse{
+		OldTagline: "", // BookMeta has no tagline field yet — always empty
+		NewTagline: strings.TrimSpace(result),
+		Model:      string(model),
+	})
+}
+
+// ── Genres ────────────────────────────────────────────────────────────────
+
+// textGenGenresRequest is the JSON body for POST /api/admin/text-gen/genres.
+type textGenGenresRequest struct {
+	Slug      string `json:"slug"`
+	Model     string `json:"model"`
+	MaxTokens int    `json:"max_tokens"`
+}
+
+// textGenGenresResponse is returned by POST /api/admin/text-gen/genres.
+type textGenGenresResponse struct {
+	CurrentGenres  []string `json:"current_genres"`
+	ProposedGenres []string `json:"proposed_genres"`
+	Model          string   `json:"model"`
+}
+
+// handleAdminTextGenGenres handles POST /api/admin/text-gen/genres.
+// Suggests a refined genre list based on the book's description.
+func (s *Server) handleAdminTextGenGenres(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured")
+		return
+	}
+
+	var req textGenGenresRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+
+	system := `You are a genre classification expert for a web novel platform. ` +
+		`Given a book's title and description, return a JSON array of 2–6 genre tags. ` +
+		`Use only well-known web novel genres such as: ` +
+		`Action, Adventure, Comedy, Drama, Fantasy, Historical, Horror, Isekai, Josei, ` +
+		`Martial Arts, Mature, Mecha, Mystery, Psychological, Romance, School Life, ` +
+		`Sci-fi, Seinen, Shoujo, Shounen, Slice of Life, Supernatural, System, Tragedy, Wuxia, Xianxia. ` +
+		`Output ONLY a raw JSON array of strings — no prose, no markdown, no explanation. ` +
+		`Example: ["Fantasy","Adventure","Action"]`
+
+	user := fmt.Sprintf("Title: %s\nCurrent genres: %s\n\nDescription:\n%s",
+		meta.Title,
+		strings.Join(meta.Genres, ", "),
+		meta.Summary,
+	)
+
+	s.deps.Log.Info("admin: text-gen genres requested", "slug", req.Slug, "model", model)
+
+	raw, genErr := s.deps.TextGen.Generate(r.Context(), cfai.TextRequest{
+		Model:     model,
+		Messages:  []cfai.TextMessage{{Role: "system", Content: system}, {Role: "user", Content: user}},
+		MaxTokens: 128,
+	})
+	if genErr != nil {
+		s.deps.Log.Error("admin: text-gen genres failed", "err", genErr)
+		jsonError(w, http.StatusBadGateway, "text generation failed: "+genErr.Error())
+		return
+	}
+
+	proposed := parseStringArrayJSON(raw)
+
+	writeJSON(w, 0, textGenGenresResponse{
+		CurrentGenres:  meta.Genres,
+		ProposedGenres: proposed,
+		Model:          string(model),
+	})
+}
+
+// handleAdminTextGenApplyGenres handles POST /api/admin/text-gen/genres/apply.
+// Persists the confirmed genre list to PocketBase.
+func (s *Server) handleAdminTextGenApplyGenres(w http.ResponseWriter, r *http.Request) {
+	if s.deps.BookWriter == nil {
+		jsonError(w, http.StatusServiceUnavailable, "book writer not configured")
+		return
+	}
+
+	var req struct {
+		Slug   string   `json:"slug"`
+		Genres []string `json:"genres"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	meta.Genres = req.Genres
+	if err := s.deps.BookWriter.WriteMetadata(r.Context(), meta); err != nil {
+		s.deps.Log.Error("admin: apply genres failed", "slug", req.Slug, "err", err)
+		jsonError(w, http.StatusInternalServerError, "write metadata: "+err.Error())
+		return
+	}
+
+	s.deps.Log.Info("admin: genres applied", "slug", req.Slug, "genres", req.Genres)
+	writeJSON(w, 0, map[string]any{"updated": true})
+}
+
+// ── Content warnings ──────────────────────────────────────────────────────
+
+// textGenContentWarningsRequest is the JSON body for POST /api/admin/text-gen/content-warnings.
+type textGenContentWarningsRequest struct {
+	Slug      string `json:"slug"`
+	Model     string `json:"model"`
+	MaxTokens int    `json:"max_tokens"`
+}
+
+// textGenContentWarningsResponse is returned by POST /api/admin/text-gen/content-warnings.
+type textGenContentWarningsResponse struct {
+	Warnings []string `json:"warnings"`
+	Model    string   `json:"model"`
+}
+
+// handleAdminTextGenContentWarnings handles POST /api/admin/text-gen/content-warnings.
+// Detects mature or sensitive themes in a book's description.
+func (s *Server) handleAdminTextGenContentWarnings(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured")
+		return
+	}
+
+	var req textGenContentWarningsRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+
+	system := `You are a content moderation assistant for a web novel platform. ` +
+		`Given a book's title, genres, and description, detect any content warnings that should be shown to readers. ` +
+		`Choose only relevant warnings from: Violence, Strong Language, Sexual Content, Mature Themes, ` +
+		`Dark Themes, Gore, Torture, Abuse, Drug Use, Suicide/Self-Harm. ` +
+		`If the book is clean, return an empty array. ` +
+		`Output ONLY a raw JSON array of strings — no prose, no markdown. ` +
+		`Example: ["Violence","Dark Themes"]`
+
+	user := fmt.Sprintf("Title: %s\nGenres: %s\n\nDescription:\n%s",
+		meta.Title,
+		strings.Join(meta.Genres, ", "),
+		meta.Summary,
+	)
+
+	s.deps.Log.Info("admin: text-gen content-warnings requested", "slug", req.Slug, "model", model)
+
+	raw, genErr := s.deps.TextGen.Generate(r.Context(), cfai.TextRequest{
+		Model:     model,
+		Messages:  []cfai.TextMessage{{Role: "system", Content: system}, {Role: "user", Content: user}},
+		MaxTokens: 128,
+	})
+	if genErr != nil {
+		s.deps.Log.Error("admin: text-gen content-warnings failed", "err", genErr)
+		jsonError(w, http.StatusBadGateway, "text generation failed: "+genErr.Error())
+		return
+	}
+
+	warnings := parseStringArrayJSON(raw)
+
+	writeJSON(w, 0, textGenContentWarningsResponse{
+		Warnings: warnings,
+		Model:    string(model),
+	})
+}
+
+// ── Quality score ─────────────────────────────────────────────────────────
+
+// textGenQualityScoreRequest is the JSON body for POST /api/admin/text-gen/quality-score.
+type textGenQualityScoreRequest struct {
+	Slug      string `json:"slug"`
+	Model     string `json:"model"`
+	MaxTokens int    `json:"max_tokens"`
+}
+
+// textGenQualityScoreResponse is returned by POST /api/admin/text-gen/quality-score.
+type textGenQualityScoreResponse struct {
+	Score    int    `json:"score"`    // 1–5
+	Feedback string `json:"feedback"` // brief reasoning
+	Model    string `json:"model"`
+}
+
+// handleAdminTextGenQualityScore handles POST /api/admin/text-gen/quality-score.
+// Rates the book description quality on a 1–5 scale with brief feedback.
+func (s *Server) handleAdminTextGenQualityScore(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured")
+		return
+	}
+
+	var req textGenQualityScoreRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+
+	system := `You are a book description quality reviewer for a web novel platform. ` +
+		`Rate the provided description on a scale of 1–5 where: ` +
+		`1=poor (vague/too short), 2=below average, 3=average, 4=good, 5=excellent (engaging/detailed). ` +
+		`Respond with ONLY a JSON object: {"score": <1-5>, "feedback": "<one sentence explanation>"}. ` +
+		`No markdown, no extra text.`
+
+	user := fmt.Sprintf("Title: %s\nGenres: %s\n\nDescription:\n%s",
+		meta.Title,
+		strings.Join(meta.Genres, ", "),
+		meta.Summary,
+	)
+
+	s.deps.Log.Info("admin: text-gen quality-score requested", "slug", req.Slug, "model", model)
+
+	raw, genErr := s.deps.TextGen.Generate(r.Context(), cfai.TextRequest{
+		Model:     model,
+		Messages:  []cfai.TextMessage{{Role: "system", Content: system}, {Role: "user", Content: user}},
+		MaxTokens: 128,
+	})
+	if genErr != nil {
+		s.deps.Log.Error("admin: text-gen quality-score failed", "err", genErr)
+		jsonError(w, http.StatusBadGateway, "text generation failed: "+genErr.Error())
+		return
+	}
+
+	var parsed struct {
+		Score    int    `json:"score"`
+		Feedback string `json:"feedback"`
+	}
+	// Strip markdown fences if any.
+	clean := extractJSONObject(raw)
+	if err := json.Unmarshal([]byte(clean), &parsed); err != nil {
+		// Fallback: try to extract a digit.
+		parsed.Score = 0
+		for _, ch := range raw {
+			if ch >= '1' && ch <= '5' {
+				parsed.Score = int(ch - '0')
+				break
+			}
+		}
+		parsed.Feedback = strings.TrimSpace(raw)
+	}
+
+	writeJSON(w, 0, textGenQualityScoreResponse{
+		Score:    parsed.Score,
+		Feedback: parsed.Feedback,
+		Model:    string(model),
+	})
+}
+
+// ── Batch cover regeneration ──────────────────────────────────────────────
+
+// batchCoverEvent is one SSE event emitted during batch cover regeneration.
+type batchCoverEvent struct {
+	// JobID is the opaque identifier clients use to cancel this job.
+	JobID   string `json:"job_id,omitempty"`
+	Done    int    `json:"done"`
+	Total   int    `json:"total"`
+	Slug    string `json:"slug,omitempty"`
+	Error   string `json:"error,omitempty"`
+	Skipped bool   `json:"skipped,omitempty"`
+	Finish  bool   `json:"finish,omitempty"`
+}
+
+// handleAdminBatchCovers handles POST /api/admin/catalogue/batch-covers.
+//
+// Streams SSE events as it generates covers for every book that has no cover
+// stored in MinIO. Each event carries progress info. The final event has Finish=true.
+//
+// Supports from_item/to_item to process a sub-range of the catalogue (0-based indices).
+// Supports job_id to resume a previously interrupted job.
+// The job can be cancelled by calling POST /api/admin/ai-jobs/{id}/cancel.
+func (s *Server) handleAdminBatchCovers(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil || s.deps.ImageGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "image/text generation not configured")
+		return
+	}
+	if s.deps.CoverStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "cover store not configured")
+		return
+	}
+
+	var reqBody struct {
+		Model    string `json:"model"`
+		NumSteps int    `json:"num_steps"`
+		Width    int    `json:"width"`
+		Height   int    `json:"height"`
+		FromItem int    `json:"from_item"`
+		ToItem   int    `json:"to_item"`
+		JobID    string `json:"job_id"`
+	}
+	// Body is optional — defaults used if absent.
+	json.NewDecoder(r.Body).Decode(&reqBody) //nolint:errcheck
+
+	allBooks, err := s.deps.BookReader.ListBooks(r.Context())
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "list books: "+err.Error())
+		return
+	}
+
+	// Apply range filter.
+	books := allBooks
+	if reqBody.FromItem > 0 || reqBody.ToItem > 0 {
+		from := reqBody.FromItem
+		to := reqBody.ToItem
+		if to == 0 || to >= len(allBooks) {
+			to = len(allBooks) - 1
+		}
+		if from < 0 {
+			from = 0
+		}
+		if from <= to && from < len(allBooks) {
+			books = allBooks[from : to+1]
+		}
+	}
+
+	// SSE headers.
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("X-Accel-Buffering", "no")
+	flusher, canFlush := w.(http.Flusher)
+
+	sseWrite := func(evt batchCoverEvent) {
+		b, _ := json.Marshal(evt)
+		fmt.Fprintf(w, "data: %s\n\n", b)
+		if canFlush {
+			flusher.Flush()
+		}
+	}
+
+	total := len(books)
+	done := 0
+
+	// Create or resume PB ai_job and register cancel context.
+	var pbJobID string
+	resumeFrom := 0
+	ctx, cancel := context.WithCancel(r.Context())
+	defer cancel()
+
+	if s.deps.AIJobStore != nil {
+		if reqBody.JobID != "" {
+			if existing, ok, _ := s.deps.AIJobStore.GetAIJob(r.Context(), reqBody.JobID); ok {
+				pbJobID = reqBody.JobID
+				resumeFrom = existing.ItemsDone
+				done = resumeFrom
+				_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), pbJobID, map[string]any{
+					"status":      string(domain.TaskStatusRunning),
+					"items_total": total,
+				})
+			}
+		}
+		if pbJobID == "" {
+			id, createErr := s.deps.AIJobStore.CreateAIJob(r.Context(), domain.AIJob{
+				Kind:       "batch-covers",
+				Status:     domain.TaskStatusRunning,
+				FromItem:   reqBody.FromItem,
+				ToItem:     reqBody.ToItem,
+				ItemsTotal: total,
+				Started:    time.Now(),
+			})
+			if createErr == nil {
+				pbJobID = id
+			}
+		}
+		if pbJobID != "" {
+			registerCancelJob(pbJobID, cancel)
+			defer deregisterCancelJob(pbJobID)
+		}
+	}
+
+	// Use pbJobID as the SSE job_id when available, else a random hex fallback.
+	sseJobID := pbJobID
+	if sseJobID == "" {
+		sseJobID = randomHex(8)
+		ctx2, cancel2 := context.WithCancel(r.Context())
+		registerCancelJob(sseJobID, cancel2)
+		defer deregisterCancelJob(sseJobID)
+		defer cancel2()
+		cancel() // replace ctx with ctx2
+		ctx = ctx2
+	}
+
+	// Send initial event with jobID so frontend can store it for cancellation.
+	sseWrite(batchCoverEvent{JobID: sseJobID, Done: done, Total: total})
+
+	for i, book := range books {
+		if ctx.Err() != nil {
+			break
+		}
+		// Skip already-processed items when resuming.
+		if i < resumeFrom {
+			continue
+		}
+
+		// Check if cover already exists.
+		hasCover := s.deps.CoverStore.CoverExists(ctx, book.Slug)
+		if hasCover {
+			done++
+			sseWrite(batchCoverEvent{Done: done, Total: total, Slug: book.Slug, Skipped: true})
+			if pbJobID != "" && s.deps.AIJobStore != nil {
+				_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), pbJobID, map[string]any{"items_done": done})
+			}
+			continue
+		}
+
+		// Build a prompt from the book metadata.
+		prompt := buildCoverPrompt(book)
+
+		// Generate the image via CF AI.
+		imgBytes, genErr := s.deps.ImageGen.GenerateImage(ctx, cfai.ImageRequest{
+			Prompt:   prompt,
+			NumSteps: reqBody.NumSteps,
+			Width:    reqBody.Width,
+			Height:   reqBody.Height,
+		})
+		if genErr != nil {
+			done++
+			s.deps.Log.Error("batch-covers: image gen failed", "slug", book.Slug, "err", genErr)
+			sseWrite(batchCoverEvent{Done: done, Total: total, Slug: book.Slug, Error: genErr.Error()})
+			continue
+		}
+
+		// Save to CoverStore.
+		if saveErr := s.deps.CoverStore.PutCover(ctx, book.Slug, imgBytes, "image/png"); saveErr != nil {
+			done++
+			s.deps.Log.Error("batch-covers: save failed", "slug", book.Slug, "err", saveErr)
+			sseWrite(batchCoverEvent{Done: done, Total: total, Slug: book.Slug, Error: saveErr.Error()})
+			continue
+		}
+
+		done++
+		s.deps.Log.Info("batch-covers: cover generated", "slug", book.Slug)
+		sseWrite(batchCoverEvent{Done: done, Total: total, Slug: book.Slug})
+		if pbJobID != "" && s.deps.AIJobStore != nil {
+			_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), pbJobID, map[string]any{"items_done": done})
+		}
+	}
+
+	if pbJobID != "" && s.deps.AIJobStore != nil {
+		status := domain.TaskStatusDone
+		if ctx.Err() != nil {
+			status = domain.TaskStatusCancelled
+		}
+		_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), pbJobID, map[string]any{
+			"status":     string(status),
+			"items_done": done,
+			"finished":   time.Now().Format(time.RFC3339),
+		})
+	}
+
+	sseWrite(batchCoverEvent{Done: done, Total: total, Finish: true})
+}
+
+// handleAdminBatchCoversCancel handles POST /api/admin/catalogue/batch-covers/cancel.
+// Cancels an in-progress batch cover job by its job ID.
+func (s *Server) handleAdminBatchCoversCancel(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		JobID string `json:"job_id"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || req.JobID == "" {
+		jsonError(w, http.StatusBadRequest, "job_id is required")
+		return
+	}
+
+	cancelJobsMu.Lock()
+	cancel, ok := cancelJobs[req.JobID]
+	cancelJobsMu.Unlock()
+
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("job %q not found", req.JobID))
+		return
+	}
+	cancel()
+	s.deps.Log.Info("batch-covers: job cancelled", "job_id", req.JobID)
+	writeJSON(w, 0, map[string]any{"cancelled": true})
+}
+
+// ── Refresh metadata (per-book) ────────────────────────────────────────────
+
+// refreshMetadataEvent is one SSE event during per-book metadata refresh.
+type refreshMetadataEvent struct {
+	Step  string `json:"step"`  // "description" | "tagline" | "cover"
+	Done  bool   `json:"done"`
+	Error string `json:"error,omitempty"`
+}
+
+// handleAdminRefreshMetadata handles POST /api/admin/catalogue/refresh-metadata/{slug}.
+//
+// Runs description → tagline → cover generation in sequence for a single book
+// and streams SSE progress. Interruptable via client disconnect (r.Context()).
+func (s *Server) handleAdminRefreshMetadata(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	if slug == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", slug))
+		return
+	}
+
+	// SSE headers.
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("X-Accel-Buffering", "no")
+	flusher, canFlush := w.(http.Flusher)
+
+	sseWrite := func(evt refreshMetadataEvent) {
+		b, _ := json.Marshal(evt)
+		fmt.Fprintf(w, "data: %s\n\n", b)
+		if canFlush {
+			flusher.Flush()
+		}
+	}
+
+	ctx := r.Context()
+
+	// Step 1 — description.
+	if s.deps.TextGen != nil {
+		if ctx.Err() == nil {
+			newDesc, genErr := s.deps.TextGen.Generate(ctx, cfai.TextRequest{
+				Model: cfai.DefaultTextModel,
+				Messages: []cfai.TextMessage{
+					{Role: "system", Content: `You are a book description writer for a web novel platform. Write an improved description. Respond with ONLY the new description text — no title, no labels, no markdown.`},
+					{Role: "user", Content: fmt.Sprintf("Title: %s\nGenres: %s\n\nCurrent description:\n%s\n\nInstructions: Write a compelling 2–4 sentence description. Keep it spoiler-free and engaging.", meta.Title, strings.Join(meta.Genres, ", "), meta.Summary)},
+				},
+				MaxTokens: 512,
+			})
+			if genErr == nil && strings.TrimSpace(newDesc) != "" && s.deps.BookWriter != nil {
+				meta.Summary = strings.TrimSpace(newDesc)
+				if writeErr := s.deps.BookWriter.WriteMetadata(ctx, meta); writeErr != nil {
+					sseWrite(refreshMetadataEvent{Step: "description", Error: writeErr.Error()})
+				} else {
+					sseWrite(refreshMetadataEvent{Step: "description"})
+				}
+			} else if genErr != nil {
+				sseWrite(refreshMetadataEvent{Step: "description", Error: genErr.Error()})
+			}
+		}
+	}
+
+	// Step 2 — cover.
+	if s.deps.ImageGen != nil && s.deps.CoverStore != nil {
+		if ctx.Err() == nil {
+			prompt := buildCoverPrompt(meta)
+			imgBytes, genErr := s.deps.ImageGen.GenerateImage(ctx, cfai.ImageRequest{Prompt: prompt})
+			if genErr == nil {
+				if saveErr := s.deps.CoverStore.PutCover(ctx, slug, imgBytes, "image/png"); saveErr != nil {
+					sseWrite(refreshMetadataEvent{Step: "cover", Error: saveErr.Error()})
+				} else {
+					sseWrite(refreshMetadataEvent{Step: "cover"})
+				}
+			} else {
+				sseWrite(refreshMetadataEvent{Step: "cover", Error: genErr.Error()})
+			}
+		}
+	}
+
+	sseWrite(refreshMetadataEvent{Step: "done", Done: true})
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────
+
+// parseStringArrayJSON extracts a JSON string array from model output,
+// tolerating markdown fences and surrounding prose.
+func parseStringArrayJSON(raw string) []string {
+	s := raw
+	if idx := strings.Index(s, "```json"); idx >= 0 {
+		s = s[idx+7:]
+	} else if idx := strings.Index(s, "```"); idx >= 0 {
+		s = s[idx+3:]
+	}
+	if idx := strings.LastIndex(s, "```"); idx >= 0 {
+		s = s[:idx]
+	}
+	start := strings.Index(s, "[")
+	end := strings.LastIndex(s, "]")
+	if start < 0 || end <= start {
+		return nil
+	}
+	s = s[start : end+1]
+	var out []string
+	json.Unmarshal([]byte(s), &out) //nolint:errcheck
+	return out
+}
+
+// extractJSONObject finds the first {...} object in a string.
+func extractJSONObject(raw string) string {
+	start := strings.Index(raw, "{")
+	end := strings.LastIndex(raw, "}")
+	if start < 0 || end <= start {
+		return raw
+	}
+	return raw[start : end+1]
+}
+
+// buildCoverPrompt constructs a prompt string for cover generation from a book.
+func buildCoverPrompt(meta domain.BookMeta) string {
+	parts := []string{"book cover art"}
+	if meta.Title != "" {
+		parts = append(parts, "titled \""+meta.Title+"\"")
+	}
+	if len(meta.Genres) > 0 {
+		parts = append(parts, strings.Join(meta.Genres, ", ")+" genre")
+	}
+	if meta.Summary != "" {
+		summary := meta.Summary
+		if len(summary) > 200 {
+			summary = summary[:200]
+		}
+		parts = append(parts, summary)
+	}
+	return strings.Join(parts, ", ")
+}
+
+// randomHex returns a random hex string of n bytes.
+func randomHex(n int) string {
+	b := make([]byte, n)
+	_, _ = rand.Read(b)
+	return hex.EncodeToString(b)
+}

backend/internal/backend/handlers_textgen.go

@@ -0,0 +1,594 @@
+package backend
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/libnovel/backend/internal/cfai"
+	"github.com/libnovel/backend/internal/domain"
+)
+
+// chapterNamesBatchSize is the number of chapters sent per LLM request.
+// Keeps output well within the 4096-token response limit (~30 tokens/title).
+const chapterNamesBatchSize = 100
+
+// handleAdminTextGenModels handles GET /api/admin/text-gen/models.
+// Returns the list of supported Cloudflare AI text generation models.
+func (s *Server) handleAdminTextGenModels(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured (CFAI_ACCOUNT_ID/CFAI_API_TOKEN missing)")
+		return
+	}
+	models := s.deps.TextGen.Models()
+	writeJSON(w, 0, map[string]any{"models": models})
+}
+
+// ── Chapter names ─────────────────────────────────────────────────────────────
+
+// textGenChapterNamesRequest is the JSON body for POST /api/admin/text-gen/chapter-names.
+type textGenChapterNamesRequest struct {
+	// Slug is the book slug whose chapters to process.
+	Slug string `json:"slug"`
+	// Pattern is a free-text description of the desired naming convention,
+	// e.g. "Chapter {n}: {brief scene description}".
+	Pattern string `json:"pattern"`
+	// Model is the CF Workers AI model ID. Defaults to the recommended model when empty.
+	Model string `json:"model"`
+	// MaxTokens limits response length (0 = model default).
+	MaxTokens int `json:"max_tokens"`
+	// FromChapter is the first chapter to process (1-based). 0 = start from chapter 1.
+	FromChapter int `json:"from_chapter"`
+	// ToChapter is the last chapter to process (inclusive). 0 = process all.
+	ToChapter int `json:"to_chapter"`
+	// JobID is an optional existing ai_job ID for resuming a previous run.
+	// If set, the handler resumes from items_done instead of starting from scratch.
+	JobID string `json:"job_id"`
+}
+
+// proposedChapterTitle is a single chapter with its AI-proposed title.
+type proposedChapterTitle struct {
+	Number int `json:"number"`
+	// OldTitle is the current title stored in the database.
+	OldTitle string `json:"old_title"`
+	// NewTitle is the AI-proposed replacement.
+	NewTitle string `json:"new_title"`
+}
+
+// chapterNamesBatchEvent is one SSE event emitted per processed batch.
+type chapterNamesBatchEvent struct {
+	// JobID is the PB ai_job ID for this run (emitted on the first event only).
+	JobID string `json:"job_id,omitempty"`
+	// Batch is the 1-based batch index.
+	Batch int `json:"batch"`
+	// TotalBatches is the total number of batches.
+	TotalBatches int `json:"total_batches"`
+	// ChaptersDone is the cumulative count of chapters processed so far.
+	ChaptersDone int `json:"chapters_done"`
+	// TotalChapters is the total chapter count for this book.
+	TotalChapters int `json:"total_chapters"`
+	// Model is the CF AI model used.
+	Model string `json:"model"`
+	// Chapters contains the proposed titles for this batch.
+	Chapters []proposedChapterTitle `json:"chapters"`
+	// Error is non-empty if this batch failed.
+	Error string `json:"error,omitempty"`
+	// Done is true on the final sentinel event (no Chapters).
+	Done bool `json:"done,omitempty"`
+}
+
+// handleAdminTextGenChapterNames handles POST /api/admin/text-gen/chapter-names.
+//
+// Splits all chapters into batches of chapterNamesBatchSize, sends each batch
+// to the LLM sequentially, and streams results back as Server-Sent Events so
+// the frontend can show live progress. Each SSE data line is a JSON-encoded
+// chapterNamesBatchEvent. The final event has Done=true.
+//
+// Does NOT persist anything — the frontend shows a diff and the user must
+// confirm via POST /api/admin/text-gen/chapter-names/apply.
+func (s *Server) handleAdminTextGenChapterNames(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured (CFAI_ACCOUNT_ID/CFAI_API_TOKEN missing)")
+		return
+	}
+
+	var req textGenChapterNamesRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if strings.TrimSpace(req.Pattern) == "" {
+		jsonError(w, http.StatusBadRequest, "pattern is required")
+		return
+	}
+
+	// Load existing chapter list.
+	allChapters, err := s.deps.BookReader.ListChapters(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "list chapters: "+err.Error())
+		return
+	}
+	if len(allChapters) == 0 {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("no chapters found for slug %q", req.Slug))
+		return
+	}
+
+	// Apply chapter range filter.
+	chapters := allChapters
+	if req.FromChapter > 0 || req.ToChapter > 0 {
+		filtered := chapters[:0]
+		for _, ch := range allChapters {
+			if req.FromChapter > 0 && ch.Number < req.FromChapter {
+				continue
+			}
+			if req.ToChapter > 0 && ch.Number > req.ToChapter {
+				break
+			}
+			filtered = append(filtered, ch)
+		}
+		chapters = filtered
+	}
+	if len(chapters) == 0 {
+		jsonError(w, http.StatusBadRequest, "no chapters in the specified range")
+		return
+	}
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+	// 4096 tokens comfortably fits 100 chapter titles (~30 tokens each).
+	maxTokens := req.MaxTokens
+	if maxTokens <= 0 {
+		maxTokens = 4096
+	}
+
+	// Index existing titles for old/new diff.
+	existing := make(map[int]string, len(chapters))
+	for _, ch := range chapters {
+		existing[ch.Number] = ch.Title
+	}
+
+	// Partition chapters into batches.
+	batches := chunkChapters(chapters, chapterNamesBatchSize)
+	totalBatches := len(batches)
+
+	s.deps.Log.Info("admin: text-gen chapter-names requested",
+		"slug", req.Slug, "chapters", len(chapters),
+		"batches", totalBatches, "model", model, "max_tokens", maxTokens)
+
+	systemPrompt := `You are a chapter title editor for a web novel platform. ` +
+		`The user provides a list of chapter numbers with their current titles, ` +
+		`and a naming pattern template. ` +
+		`Your job: produce one new title for every chapter, following the pattern exactly. ` +
+		`Pattern placeholders: {n} = the chapter number (integer), {scene} = a very short (2–5 word) scene hint derived from the existing title. ` +
+		`RULES: ` +
+		`1. Do NOT include the chapter number inside the title text — the {n} placeholder is already in the pattern. ` +
+		`2. Do NOT include any prefix like "Chapter X -" or "Chapter X:" inside the title field itself. ` +
+		`3. The "title" field in your JSON must be the fully-rendered string (e.g. if pattern is "Chapter {n}: {scene}", output "Chapter 3: The Bet"). ` +
+		`4. Respond ONLY with a raw JSON array — no prose, no markdown fences, no explanation. ` +
+		`5. Each element: {"number": <int>, "title": <string>}. ` +
+		`6. Output every chapter in the input list, in order. Do not skip any.`
+
+	// Switch to SSE before writing anything.
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("X-Accel-Buffering", "no") // disable nginx/caddy buffering
+	flusher, canFlush := w.(http.Flusher)
+
+	sseWrite := func(evt chapterNamesBatchEvent) {
+		b, _ := json.Marshal(evt)
+		fmt.Fprintf(w, "data: %s\n\n", b)
+		if canFlush {
+			flusher.Flush()
+		}
+	}
+
+	// Create or resume an ai_job record for tracking.
+	var jobID string
+	resumeFrom := 0
+	jobCtx := r.Context()
+	var jobCancel context.CancelFunc
+
+	if s.deps.AIJobStore != nil {
+		if req.JobID != "" {
+			if existingJob, ok, _ := s.deps.AIJobStore.GetAIJob(r.Context(), req.JobID); ok {
+				jobID = req.JobID
+				resumeFrom = existingJob.ItemsDone
+				_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), jobID, map[string]any{
+					"status":      string(domain.TaskStatusRunning),
+					"items_total": len(chapters),
+				})
+			}
+		}
+		if jobID == "" {
+			jobPayload := fmt.Sprintf(`{"pattern":%q}`, req.Pattern)
+			id, createErr := s.deps.AIJobStore.CreateAIJob(r.Context(), domain.AIJob{
+				Kind:       "chapter-names",
+				Slug:       req.Slug,
+				Status:     domain.TaskStatusRunning,
+				FromItem:   req.FromChapter,
+				ToItem:     req.ToChapter,
+				ItemsTotal: len(chapters),
+				Model:      string(model),
+				Payload:    jobPayload,
+				Started:    time.Now(),
+			})
+			if createErr == nil {
+				jobID = id
+			}
+		}
+		if jobID != "" {
+			jobCtx, jobCancel = context.WithCancel(r.Context())
+			registerCancelJob(jobID, jobCancel)
+			defer deregisterCancelJob(jobID)
+			defer jobCancel()
+		}
+	}
+
+	chaptersDone := resumeFrom
+	firstEvent := true
+	for i, batch := range batches {
+		if jobCtx.Err() != nil {
+			return // client disconnected or cancelled
+		}
+		// Skip batches already processed in a previous run.
+		batchEnd := (i + 1) * chapterNamesBatchSize
+		if batchEnd <= resumeFrom {
+			continue
+		}
+
+		var chapterListSB strings.Builder
+		for _, ch := range batch {
+			chapterListSB.WriteString(fmt.Sprintf("%d: %s\n", ch.Number, ch.Title))
+		}
+		userPrompt := fmt.Sprintf("Naming pattern: %s\n\nChapters:\n%s", req.Pattern, chapterListSB.String())
+
+		raw, genErr := s.deps.TextGen.Generate(jobCtx, cfai.TextRequest{
+			Model: model,
+			Messages: []cfai.TextMessage{
+				{Role: "system", Content: systemPrompt},
+				{Role: "user", Content: userPrompt},
+			},
+			MaxTokens: maxTokens,
+		})
+		if genErr != nil {
+			s.deps.Log.Error("admin: text-gen chapter-names batch failed",
+				"batch", i+1, "err", genErr)
+			evt := chapterNamesBatchEvent{
+				Batch:         i + 1,
+				TotalBatches:  totalBatches,
+				ChaptersDone:  chaptersDone,
+				TotalChapters: len(chapters),
+				Model:         string(model),
+				Error:         genErr.Error(),
+			}
+			if firstEvent {
+				evt.JobID = jobID
+				firstEvent = false
+			}
+			sseWrite(evt)
+			continue
+		}
+
+		proposed := parseChapterTitlesJSON(raw)
+		result := make([]proposedChapterTitle, 0, len(proposed))
+		for _, p := range proposed {
+			result = append(result, proposedChapterTitle{
+				Number:   p.Number,
+				OldTitle: existing[p.Number],
+				NewTitle: p.Title,
+			})
+		}
+		chaptersDone += len(batch)
+
+		if jobID != "" && s.deps.AIJobStore != nil {
+			_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), jobID, map[string]any{
+				"items_done": chaptersDone,
+			})
+		}
+
+		evt := chapterNamesBatchEvent{
+			Batch:         i + 1,
+			TotalBatches:  totalBatches,
+			ChaptersDone:  chaptersDone,
+			TotalChapters: len(chapters),
+			Model:         string(model),
+			Chapters:      result,
+		}
+		if firstEvent {
+			evt.JobID = jobID
+			firstEvent = false
+		}
+		sseWrite(evt)
+	}
+
+	// Mark job as done in PB.
+	if jobID != "" && s.deps.AIJobStore != nil {
+		status := domain.TaskStatusDone
+		if jobCtx.Err() != nil {
+			status = domain.TaskStatusCancelled
+		}
+		_ = s.deps.AIJobStore.UpdateAIJob(r.Context(), jobID, map[string]any{
+			"status":     string(status),
+			"items_done": chaptersDone,
+			"finished":   time.Now().Format(time.RFC3339),
+		})
+	}
+
+	// Final sentinel event.
+	sseWrite(chapterNamesBatchEvent{Done: true, TotalChapters: len(chapters), Model: string(model)})
+}
+
+// chunkChapters splits a chapter slice into batches of at most size n.
+func chunkChapters(chapters []domain.ChapterInfo, n int) [][]domain.ChapterInfo {
+	var batches [][]domain.ChapterInfo
+	for len(chapters) > 0 {
+		end := n
+		if end > len(chapters) {
+			end = len(chapters)
+		}
+		batches = append(batches, chapters[:end])
+		chapters = chapters[end:]
+	}
+	return batches
+}
+
+// parseChapterTitlesJSON extracts the JSON array from a model response.
+// It tolerates markdown fences and surrounding prose.
+type rawChapterTitle struct {
+	Number int    `json:"number"`
+	Title  string `json:"title"`
+}
+
+func parseChapterTitlesJSON(raw string) []rawChapterTitle {
+	// Strip markdown fences if present.
+	s := raw
+	if idx := strings.Index(s, "```json"); idx >= 0 {
+		s = s[idx+7:]
+	} else if idx := strings.Index(s, "```"); idx >= 0 {
+		s = s[idx+3:]
+	}
+	if idx := strings.LastIndex(s, "```"); idx >= 0 {
+		s = s[:idx]
+	}
+	// Find the JSON array boundaries.
+	start := strings.Index(s, "[")
+	end := strings.LastIndex(s, "]")
+	if start < 0 || end <= start {
+		return nil
+	}
+	s = s[start : end+1]
+	var out []rawChapterTitle
+	json.Unmarshal([]byte(s), &out) //nolint:errcheck
+	return out
+}
+
+// ── Apply chapter names ───────────────────────────────────────────────────────
+
+// applyChapterNamesRequest is the JSON body for POST /api/admin/text-gen/chapter-names/apply.
+type applyChapterNamesRequest struct {
+	// Slug is the book slug to update.
+	Slug string `json:"slug"`
+	// Chapters is the list of chapters to save (number + new_title pairs).
+	// The UI may modify individual titles before confirming.
+	Chapters []applyChapterEntry `json:"chapters"`
+}
+
+type applyChapterEntry struct {
+	Number int    `json:"number"`
+	Title  string `json:"title"`
+}
+
+// handleAdminTextGenApplyChapterNames handles POST /api/admin/text-gen/chapter-names/apply.
+//
+// Persists the confirmed chapter titles to PocketBase chapters_idx.
+func (s *Server) handleAdminTextGenApplyChapterNames(w http.ResponseWriter, r *http.Request) {
+	if s.deps.BookWriter == nil {
+		jsonError(w, http.StatusServiceUnavailable, "book writer not configured")
+		return
+	}
+
+	var req applyChapterNamesRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if len(req.Chapters) == 0 {
+		jsonError(w, http.StatusBadRequest, "chapters is required")
+		return
+	}
+
+	refs := make([]domain.ChapterRef, 0, len(req.Chapters))
+	for _, ch := range req.Chapters {
+		if ch.Number <= 0 {
+			continue
+		}
+		refs = append(refs, domain.ChapterRef{
+			Number: ch.Number,
+			Title:  strings.TrimSpace(ch.Title),
+		})
+	}
+
+	if err := s.deps.BookWriter.WriteChapterRefs(r.Context(), req.Slug, refs); err != nil {
+		s.deps.Log.Error("admin: apply chapter names failed", "slug", req.Slug, "err", err)
+		jsonError(w, http.StatusInternalServerError, "write chapter refs: "+err.Error())
+		return
+	}
+
+	s.deps.Log.Info("admin: chapter names applied", "slug", req.Slug, "count", len(refs))
+	writeJSON(w, 0, map[string]any{"updated": len(refs)})
+}
+
+// ── Book description ──────────────────────────────────────────────────────────
+
+// textGenDescriptionRequest is the JSON body for POST /api/admin/text-gen/description.
+type textGenDescriptionRequest struct {
+	// Slug is the book slug whose description to regenerate.
+	Slug string `json:"slug"`
+	// Instructions is an optional free-text hint for the AI,
+	// e.g. "Write a 3-sentence blurb, avoid spoilers, dramatic tone."
+	Instructions string `json:"instructions"`
+	// Model is the CF Workers AI model ID. Defaults to recommended when empty.
+	Model string `json:"model"`
+	// MaxTokens limits response length (0 = model default).
+	MaxTokens int `json:"max_tokens"`
+}
+
+// textGenDescriptionResponse is the JSON body returned by POST /api/admin/text-gen/description.
+type textGenDescriptionResponse struct {
+	// OldDescription is the current summary stored in the database.
+	OldDescription string `json:"old_description"`
+	// NewDescription is the AI-proposed replacement.
+	NewDescription string `json:"new_description"`
+	// Model is the model that was used.
+	Model string `json:"model"`
+}
+
+// handleAdminTextGenDescription handles POST /api/admin/text-gen/description.
+//
+// Reads the current book metadata, sends it to the LLM, and returns a proposed
+// new description. Does NOT persist anything — the user must confirm via
+// POST /api/admin/text-gen/description/apply.
+func (s *Server) handleAdminTextGenDescription(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TextGen == nil {
+		jsonError(w, http.StatusServiceUnavailable, "text generation not configured (CFAI_ACCOUNT_ID/CFAI_API_TOKEN missing)")
+		return
+	}
+
+	var req textGenDescriptionRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+
+	// Load current book metadata.
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	systemPrompt := `You are a book description writer for a web novel platform. ` +
+		`Given a book's title, author, genres, and current description, write an improved ` +
+		`description that accurately captures the story. ` +
+		`Respond with ONLY the new description text — no title, no labels, no markdown, no quotes.`
+
+	instructions := strings.TrimSpace(req.Instructions)
+	if instructions == "" {
+		instructions = "Write a compelling 2–4 sentence description. Keep it spoiler-free and engaging."
+	}
+
+	userPrompt := fmt.Sprintf(
+		"Title: %s\nAuthor: %s\nGenres: %s\nStatus: %s\n\nCurrent description:\n%s\n\nInstructions: %s",
+		meta.Title,
+		meta.Author,
+		strings.Join(meta.Genres, ", "),
+		meta.Status,
+		meta.Summary,
+		instructions,
+	)
+
+	model := cfai.TextModel(req.Model)
+	if model == "" {
+		model = cfai.DefaultTextModel
+	}
+
+	s.deps.Log.Info("admin: text-gen description requested",
+		"slug", req.Slug, "model", model)
+
+	newDesc, genErr := s.deps.TextGen.Generate(r.Context(), cfai.TextRequest{
+		Model: model,
+		Messages: []cfai.TextMessage{
+			{Role: "system", Content: systemPrompt},
+			{Role: "user", Content: userPrompt},
+		},
+		MaxTokens: req.MaxTokens,
+	})
+	if genErr != nil {
+		s.deps.Log.Error("admin: text-gen description failed", "err", genErr)
+		jsonError(w, http.StatusBadGateway, "text generation failed: "+genErr.Error())
+		return
+	}
+
+	writeJSON(w, 0, textGenDescriptionResponse{
+		OldDescription: meta.Summary,
+		NewDescription: strings.TrimSpace(newDesc),
+		Model:          string(model),
+	})
+}
+
+// ── Apply description ─────────────────────────────────────────────────────────
+
+// applyDescriptionRequest is the JSON body for POST /api/admin/text-gen/description/apply.
+type applyDescriptionRequest struct {
+	// Slug is the book slug to update.
+	Slug string `json:"slug"`
+	// Description is the new summary text to persist.
+	Description string `json:"description"`
+}
+
+// handleAdminTextGenApplyDescription handles POST /api/admin/text-gen/description/apply.
+//
+// Updates only the summary field in PocketBase, leaving all other book metadata
+// unchanged.
+func (s *Server) handleAdminTextGenApplyDescription(w http.ResponseWriter, r *http.Request) {
+	if s.deps.BookWriter == nil {
+		jsonError(w, http.StatusServiceUnavailable, "book writer not configured")
+		return
+	}
+
+	var req applyDescriptionRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		jsonError(w, http.StatusBadRequest, "parse body: "+err.Error())
+		return
+	}
+	if strings.TrimSpace(req.Slug) == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if strings.TrimSpace(req.Description) == "" {
+		jsonError(w, http.StatusBadRequest, "description is required")
+		return
+	}
+
+	// Read existing metadata so we can write it back with only summary changed.
+	meta, ok, err := s.deps.BookReader.ReadMetadata(r.Context(), req.Slug)
+	if err != nil {
+		jsonError(w, http.StatusInternalServerError, "read metadata: "+err.Error())
+		return
+	}
+	if !ok {
+		jsonError(w, http.StatusNotFound, fmt.Sprintf("book %q not found", req.Slug))
+		return
+	}
+
+	meta.Summary = strings.TrimSpace(req.Description)
+	if err := s.deps.BookWriter.WriteMetadata(r.Context(), meta); err != nil {
+		s.deps.Log.Error("admin: apply description failed", "slug", req.Slug, "err", err)
+		jsonError(w, http.StatusInternalServerError, "write metadata: "+err.Error())
+		return
+	}
+
+	s.deps.Log.Info("admin: book description applied", "slug", req.Slug)
+	writeJSON(w, 0, map[string]any{"updated": true})
+}

backend/internal/backend/server.go

@@ -76,6 +76,15 @@ type Dependencies struct {
 	// ImageGen is the Cloudflare Workers AI image generation client.
 	// If nil, image generation endpoints return 503.
 	ImageGen cfai.ImageGenClient
+	// TextGen is the Cloudflare Workers AI text generation client.
+	// If nil, text generation endpoints return 503.
+	TextGen cfai.TextGenClient
+	// BookWriter writes book metadata and chapter refs to PocketBase.
+	// Used by admin text-gen apply endpoints.
+	BookWriter bookstore.BookWriter
+	// AIJobStore tracks long-running AI generation jobs in PocketBase.
+	// If nil, job persistence is disabled (jobs still run but are not recorded).
+	AIJobStore bookstore.AIJobStore
 	// Log is the structured logger.
 	Log *slog.Logger
 }
@@ -191,6 +200,34 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	mux.HandleFunc("POST /api/admin/image-gen", s.handleAdminImageGen)
 	mux.HandleFunc("POST /api/admin/image-gen/save-cover", s.handleAdminImageGenSaveCover)
 
+	// Admin text generation endpoints (chapter names + book description)
+	mux.HandleFunc("GET /api/admin/text-gen/models", s.handleAdminTextGenModels)
+	mux.HandleFunc("POST /api/admin/text-gen/chapter-names", s.handleAdminTextGenChapterNames)
+	mux.HandleFunc("POST /api/admin/text-gen/chapter-names/apply", s.handleAdminTextGenApplyChapterNames)
+	mux.HandleFunc("POST /api/admin/text-gen/description", s.handleAdminTextGenDescription)
+	mux.HandleFunc("POST /api/admin/text-gen/description/apply", s.handleAdminTextGenApplyDescription)
+
+	// Admin catalogue enrichment endpoints
+	mux.HandleFunc("POST /api/admin/text-gen/tagline", s.handleAdminTextGenTagline)
+	mux.HandleFunc("POST /api/admin/text-gen/genres", s.handleAdminTextGenGenres)
+	mux.HandleFunc("POST /api/admin/text-gen/genres/apply", s.handleAdminTextGenApplyGenres)
+	mux.HandleFunc("POST /api/admin/text-gen/content-warnings", s.handleAdminTextGenContentWarnings)
+	mux.HandleFunc("POST /api/admin/text-gen/quality-score", s.handleAdminTextGenQualityScore)
+	mux.HandleFunc("POST /api/admin/catalogue/batch-covers", s.handleAdminBatchCovers)
+	mux.HandleFunc("POST /api/admin/catalogue/batch-covers/cancel", s.handleAdminBatchCoversCancel)
+	mux.HandleFunc("POST /api/admin/catalogue/refresh-metadata/{slug}", s.handleAdminRefreshMetadata)
+
+	// Admin AI job tracking endpoints
+	mux.HandleFunc("GET /api/admin/ai-jobs", s.handleAdminListAIJobs)
+	mux.HandleFunc("GET /api/admin/ai-jobs/{id}", s.handleAdminGetAIJob)
+	mux.HandleFunc("POST /api/admin/ai-jobs/{id}/cancel", s.handleAdminCancelAIJob)
+
+	// Auto-prompt generation from book/chapter content
+	mux.HandleFunc("POST /api/admin/image-gen/auto-prompt", s.handleAdminImageGenAutoPrompt)
+
+	// Admin data repair endpoints
+	mux.HandleFunc("POST /api/admin/dedup-chapters/{slug}", s.handleDedupChapters)
+
 	// Voices list
 	mux.HandleFunc("GET /api/voices", s.handleVoices)
 

backend/internal/bookstore/bookstore.go

@@ -35,6 +35,11 @@ type BookWriter interface {
 
 	// ChapterExists returns true if the markdown object for ref already exists.
 	ChapterExists(ctx context.Context, slug string, ref domain.ChapterRef) bool
+
+	// DeduplicateChapters removes duplicate chapters_idx records for slug,
+	// keeping only one record per chapter number (the one with the latest
+	// updated timestamp). Returns the number of duplicate records deleted.
+	DeduplicateChapters(ctx context.Context, slug string) (int, error)
 }
 
 // BookReader is the read side used by the backend to serve content.
@@ -153,6 +158,19 @@ type CoverStore interface {
 	CoverExists(ctx context.Context, slug string) bool
 }
 
+// AIJobStore manages AI generation jobs tracked in PocketBase.
+type AIJobStore interface {
+	// CreateAIJob inserts a new ai_job record with status=running and returns its ID.
+	CreateAIJob(ctx context.Context, job domain.AIJob) (string, error)
+	// GetAIJob retrieves a single ai_job by ID.
+	// Returns (zero, false, nil) when not found.
+	GetAIJob(ctx context.Context, id string) (domain.AIJob, bool, error)
+	// UpdateAIJob patches an existing ai_job record with the given fields.
+	UpdateAIJob(ctx context.Context, id string, fields map[string]any) error
+	// ListAIJobs returns all ai_job records sorted by started descending.
+	ListAIJobs(ctx context.Context) ([]domain.AIJob, error)
+}
+
 // TranslationStore covers machine-translated chapter storage in MinIO.
 // The runner writes translations; the backend reads them.
 type TranslationStore interface {

backend/internal/bookstore/bookstore_test.go

@@ -39,8 +39,9 @@ func (m *mockStore) ReadChapter(_ context.Context, _ string, _ int) (string, err
 func (m *mockStore) ListChapters(_ context.Context, _ string) ([]domain.ChapterInfo, error) {
 	return nil, nil
 }
-func (m *mockStore) CountChapters(_ context.Context, _ string) int            { return 0 }
-func (m *mockStore) ReindexChapters(_ context.Context, _ string) (int, error) { return 0, nil }
+func (m *mockStore) CountChapters(_ context.Context, _ string) int                { return 0 }
+func (m *mockStore) ReindexChapters(_ context.Context, _ string) (int, error)     { return 0, nil }
+func (m *mockStore) DeduplicateChapters(_ context.Context, _ string) (int, error) { return 0, nil }
 
 // RankingStore
 func (m *mockStore) WriteRankingItem(_ context.Context, _ domain.RankingItem) error { return nil }
@@ -52,10 +53,10 @@ func (m *mockStore) RankingFreshEnough(_ context.Context, _ time.Duration) (bool
 }
 
 // AudioStore
-func (m *mockStore) AudioObjectKey(_ string, _ int, _ string) string          { return "" }
-func (m *mockStore) AudioObjectKeyExt(_ string, _ int, _, _ string) string    { return "" }
-func (m *mockStore) AudioExists(_ context.Context, _ string) bool             { return false }
-func (m *mockStore) PutAudio(_ context.Context, _ string, _ []byte) error     { return nil }
+func (m *mockStore) AudioObjectKey(_ string, _ int, _ string) string       { return "" }
+func (m *mockStore) AudioObjectKeyExt(_ string, _ int, _, _ string) string { return "" }
+func (m *mockStore) AudioExists(_ context.Context, _ string) bool          { return false }
+func (m *mockStore) PutAudio(_ context.Context, _ string, _ []byte) error  { return nil }
 func (m *mockStore) PutAudioStream(_ context.Context, _ string, _ io.Reader, _ int64, _ string) error {
 	return nil
 }

backend/internal/cfai/client.go

@@ -17,6 +17,10 @@
 // response. There is no 100-second Cloudflare proxy timeout because we are
 // calling the Cloudflare API directly, not routing through a Cloudflare-proxied
 // homelab tunnel.
+//
+// The aura-2-en model enforces a hard 2 000-character limit per request.
+// GenerateAudio transparently splits longer texts into sentence-boundary chunks
+// and concatenates the resulting MP3 frames.
 package cfai
 
 import (
@@ -145,6 +149,8 @@ func New(accountID, apiToken, model string) Client {
 }
 
 // GenerateAudio calls the Cloudflare Workers AI TTS endpoint and returns MP3 bytes.
+// The aura-2-en model rejects inputs longer than 2 000 characters, so this method
+// splits the text into sentence-bounded chunks and concatenates the MP3 responses.
 func (c *httpClient) GenerateAudio(ctx context.Context, text, voice string) ([]byte, error) {
 	if text == "" {
 		return nil, fmt.Errorf("cfai: empty text")
@@ -154,6 +160,20 @@ func (c *httpClient) GenerateAudio(ctx context.Context, text, voice string) ([]b
 		speaker = "luna"
 	}
 
+	chunks := splitText(text, 1800) // stay comfortably under the 2 000-char limit
+	var combined []byte
+	for _, chunk := range chunks {
+		part, err := c.generateChunk(ctx, chunk, speaker)
+		if err != nil {
+			return nil, err
+		}
+		combined = append(combined, part...)
+	}
+	return combined, nil
+}
+
+// generateChunk sends a single ≤2 000-character request and returns MP3 bytes.
+func (c *httpClient) generateChunk(ctx context.Context, text, speaker string) ([]byte, error) {
 	body, err := json.Marshal(map[string]any{
 		"text":    text,
 		"speaker": speaker,
@@ -189,6 +209,87 @@ func (c *httpClient) GenerateAudio(ctx context.Context, text, voice string) ([]b
 	return mp3, nil
 }
 
+// splitText splits src into chunks of at most maxChars characters each.
+// It tries to break at paragraph boundaries first, then at sentence-ending
+// punctuation (. ! ?), and falls back to the nearest space.
+func splitText(src string, maxChars int) []string {
+	if len(src) <= maxChars {
+		return []string{src}
+	}
+
+	var chunks []string
+	remaining := src
+
+	for len(remaining) > 0 {
+		if len(remaining) <= maxChars {
+			chunks = append(chunks, strings.TrimSpace(remaining))
+			break
+		}
+
+		// Search window: the first maxChars bytes of remaining.
+		// Use byte length here because the API limit is in bytes/chars for ASCII;
+		// for safety we operate on rune-aware slices.
+		window := remaining
+		if len(window) > maxChars {
+			// Trim to maxChars runes (not bytes), ensuring we don't split a multi-byte char.
+			window = runeSlice(remaining, maxChars)
+		}
+
+		cut := -1
+
+		// 1. Prefer paragraph break (\n\n or \n).
+		if i := strings.LastIndex(window, "\n\n"); i > 0 {
+			cut = i + 2
+		} else if i := strings.LastIndex(window, "\n"); i > 0 {
+			cut = i + 1
+		}
+
+		// 2. Fall back to sentence-ending punctuation followed by a space.
+		if cut < 0 {
+			for _, punct := range []string{". ", "! ", "? ", ".\n", "!\n", "?\n"} {
+				if i := strings.LastIndex(window, punct); i > 0 {
+					candidate := i + len(punct)
+					if cut < 0 || candidate > cut {
+						cut = candidate
+					}
+				}
+			}
+		}
+
+		// 3. Last resort: nearest space.
+		if cut < 0 {
+			if i := strings.LastIndex(window, " "); i > 0 {
+				cut = i + 1
+			}
+		}
+
+		// 4. Hard cut at maxChars runes if no boundary found.
+		if cut < 0 {
+			cut = len(window)
+		}
+
+		chunk := strings.TrimSpace(remaining[:cut])
+		if chunk != "" {
+			chunks = append(chunks, chunk)
+		}
+		remaining = remaining[cut:]
+	}
+
+	return chunks
+}
+
+// runeSlice returns the first n runes of s as a string.
+func runeSlice(s string, n int) string {
+	count := 0
+	for i := range s {
+		if count == n {
+			return s[:i]
+		}
+		count++
+	}
+	return s
+}
+
 // StreamAudioMP3 generates audio and wraps the MP3 bytes as an io.ReadCloser.
 func (c *httpClient) StreamAudioMP3(ctx context.Context, text, voice string) (io.ReadCloser, error) {
 	mp3, err := c.GenerateAudio(ctx, text, voice)

backend/internal/cfai/image.go

@@ -29,8 +29,11 @@ import (
 	"encoding/json"
 	"fmt"
 	"image"
+	"image/draw"
+	"image/jpeg"
 	_ "image/jpeg" // register JPEG decoder
-	_ "image/png"  // register PNG decoder
+	"image/png"
+	_ "image/png" // register PNG decoder
 	"io"
 	"net/http"
 	"time"
@@ -189,6 +192,11 @@ func (c *imageGenHTTPClient) GenerateImage(ctx context.Context, req ImageRequest
 	return c.callImageAPI(ctx, req.Model, body)
 }
 
+// refImageMaxDim is the maximum dimension (width or height) for reference images
+// sent to Cloudflare Workers AI. CF's JSON body limit is ~4 MB; a 768px JPEG
+// stays well under that while preserving enough detail for img2img guidance.
+const refImageMaxDim = 768
+
 // GenerateImageFromReference generates an image from a text prompt + reference image.
 func (c *imageGenHTTPClient) GenerateImageFromReference(ctx context.Context, req ImageRequest, refImage []byte) ([]byte, error) {
 	if len(refImage) == 0 {
@@ -196,6 +204,10 @@ func (c *imageGenHTTPClient) GenerateImageFromReference(ctx context.Context, req
 	}
 	req = applyImageDefaults(req)
 
+	// Shrink the reference image if it exceeds the safe payload size.
+	// This avoids CF's 4 MB JSON body limit and reduces latency.
+	refImage = resizeRefImage(refImage, refImageMaxDim)
+
 	var body map[string]any
 	if req.Model == ImageModelSD15Img2Img {
 		pixels, err := decodeImageToRGBA(refImage)
@@ -286,6 +298,60 @@ func applyImageDefaults(req ImageRequest) ImageRequest {
 	return req
 }
 
+// resizeRefImage down-scales an image so that its longest side is at most maxDim
+// pixels, then re-encodes it as JPEG (quality 85). If the image is already small
+// enough, or if decoding fails, the original bytes are returned unchanged.
+// This keeps the JSON payload well under Cloudflare Workers AI's 4 MB body limit.
+func resizeRefImage(data []byte, maxDim int) []byte {
+	src, format, err := image.Decode(bytes.NewReader(data))
+	if err != nil {
+		return data
+	}
+	b := src.Bounds()
+	w, h := b.Dx(), b.Dy()
+
+	longest := w
+	if h > longest {
+		longest = h
+	}
+	if longest <= maxDim {
+		return data // already fits
+	}
+
+	// Compute target dimensions preserving aspect ratio.
+	scale := float64(maxDim) / float64(longest)
+	newW := int(float64(w)*scale + 0.5)
+	newH := int(float64(h)*scale + 0.5)
+	if newW < 1 {
+		newW = 1
+	}
+	if newH < 1 {
+		newH = 1
+	}
+
+	// Nearest-neighbour downsample (no extra deps, sufficient for reference guidance).
+	dst := image.NewRGBA(image.Rect(0, 0, newW, newH))
+	for y := 0; y < newH; y++ {
+		for x := 0; x < newW; x++ {
+			srcX := b.Min.X + int(float64(x)/scale)
+			srcY := b.Min.Y + int(float64(y)/scale)
+			draw.Draw(dst, image.Rect(x, y, x+1, y+1), src, image.Pt(srcX, srcY), draw.Src)
+		}
+	}
+
+	var buf bytes.Buffer
+	if format == "jpeg" {
+		if encErr := jpeg.Encode(&buf, dst, &jpeg.Options{Quality: 85}); encErr != nil {
+			return data
+		}
+	} else {
+		if encErr := png.Encode(&buf, dst); encErr != nil {
+			return data
+		}
+	}
+	return buf.Bytes()
+}
+
 // decodeImageToRGBA decodes PNG/JPEG bytes to a flat []uint8 RGBA pixel array
 // required by the stable-diffusion-v1-5-img2img model.
 func decodeImageToRGBA(data []byte) ([]uint8, error) {

backend/internal/cfai/text.go

@@ -0,0 +1,253 @@
+// Text generation via Cloudflare Workers AI LLM models.
+//
+// API reference:
+//
+//	POST https://api.cloudflare.com/client/v4/accounts/{accountID}/ai/run/{model}
+//	Authorization: Bearer {apiToken}
+//	Content-Type:  application/json
+//
+// Request body (all models):
+//
+//	{ "messages": [{"role":"system","content":"..."},{"role":"user","content":"..."}] }
+//
+// Response (wrapped):
+//
+//	{ "result": { "response": "..." }, "success": true }
+package cfai
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"time"
+)
+
+// TextModel identifies a Cloudflare Workers AI text generation model.
+type TextModel string
+
+const (
+	// TextModelGemma4          — Google Gemma 4, 256k context.
+	TextModelGemma4 TextModel = "@cf/google/gemma-4-26b-a4b-it"
+	// TextModelLlama4Scout     — Meta Llama 4 Scout 17B, multimodal.
+	TextModelLlama4Scout TextModel = "@cf/meta/llama-4-scout-17b-16e-instruct"
+	// TextModelLlama33_70B     — Meta Llama 3.3 70B, fast fp8.
+	TextModelLlama33_70B TextModel = "@cf/meta/llama-3.3-70b-instruct-fp8-fast"
+	// TextModelQwen3_30B       — Qwen3 30B MoE, function calling.
+	TextModelQwen3_30B TextModel = "@cf/qwen/qwen3-30b-a3b-fp8"
+	// TextModelMistralSmall    — Mistral Small 3.1 24B, 128k context.
+	TextModelMistralSmall TextModel = "@cf/mistralai/mistral-small-3.1-24b-instruct"
+	// TextModelQwQ32B          — Qwen QwQ 32B reasoning model.
+	TextModelQwQ32B TextModel = "@cf/qwen/qwq-32b"
+	// TextModelDeepSeekR1      — DeepSeek R1 distill Qwen 32B.
+	TextModelDeepSeekR1 TextModel = "@cf/deepseek-ai/deepseek-r1-distill-qwen-32b"
+	// TextModelGemma3_12B      — Google Gemma 3 12B, 80k context.
+	TextModelGemma3_12B TextModel = "@cf/google/gemma-3-12b-it"
+	// TextModelGPTOSS120B      — OpenAI gpt-oss-120b, high reasoning.
+	TextModelGPTOSS120B TextModel = "@cf/openai/gpt-oss-120b"
+	// TextModelGPTOSS20B       — OpenAI gpt-oss-20b, lower latency.
+	TextModelGPTOSS20B TextModel = "@cf/openai/gpt-oss-20b"
+	// TextModelNemotron3       — NVIDIA Nemotron 3 120B, agentic.
+	TextModelNemotron3 TextModel = "@cf/nvidia/nemotron-3-120b-a12b"
+	// TextModelLlama32_3B      — Meta Llama 3.2 3B, lightweight.
+	TextModelLlama32_3B TextModel = "@cf/meta/llama-3.2-3b-instruct"
+
+	// DefaultTextModel is the default model used when none is specified.
+	DefaultTextModel = TextModelLlama4Scout
+)
+
+// TextModelInfo describes a single text generation model.
+type TextModelInfo struct {
+	ID          string `json:"id"`
+	Label       string `json:"label"`
+	Provider    string `json:"provider"`
+	ContextSize int    `json:"context_size"` // max context in tokens
+	Description string `json:"description"`
+}
+
+// AllTextModels returns metadata about every supported text generation model.
+func AllTextModels() []TextModelInfo {
+	return []TextModelInfo{
+		{
+			ID: string(TextModelGemma4), Label: "Gemma 4 26B", Provider: "Google",
+			ContextSize: 256000,
+			Description: "Google's most intelligent open model family. 256k context, function calling.",
+		},
+		{
+			ID: string(TextModelLlama4Scout), Label: "Llama 4 Scout 17B", Provider: "Meta",
+			ContextSize: 131000,
+			Description: "Natively multimodal, 16 experts. Good all-purpose model with function calling.",
+		},
+		{
+			ID: string(TextModelLlama33_70B), Label: "Llama 3.3 70B (fp8 fast)", Provider: "Meta",
+			ContextSize: 24000,
+			Description: "Llama 3.3 70B quantized to fp8 for speed. Excellent instruction following.",
+		},
+		{
+			ID: string(TextModelQwen3_30B), Label: "Qwen3 30B MoE", Provider: "Qwen",
+			ContextSize: 32768,
+			Description: "MoE architecture with strong reasoning and instruction following.",
+		},
+		{
+			ID: string(TextModelMistralSmall), Label: "Mistral Small 3.1 24B", Provider: "MistralAI",
+			ContextSize: 128000,
+			Description: "Strong text performance with 128k context and function calling.",
+		},
+		{
+			ID: string(TextModelQwQ32B), Label: "QwQ 32B (reasoning)", Provider: "Qwen",
+			ContextSize: 24000,
+			Description: "Reasoning model — thinks before answering. Slower but more accurate.",
+		},
+		{
+			ID: string(TextModelDeepSeekR1), Label: "DeepSeek R1 32B", Provider: "DeepSeek",
+			ContextSize: 80000,
+			Description: "R1-distilled reasoning model. Outperforms o1-mini on many benchmarks.",
+		},
+		{
+			ID: string(TextModelGemma3_12B), Label: "Gemma 3 12B", Provider: "Google",
+			ContextSize: 80000,
+			Description: "Multimodal, 128k context, multilingual (140+ languages).",
+		},
+		{
+			ID: string(TextModelGPTOSS120B), Label: "GPT-OSS 120B", Provider: "OpenAI",
+			ContextSize: 128000,
+			Description: "OpenAI open-weight model for production, general purpose, high reasoning.",
+		},
+		{
+			ID: string(TextModelGPTOSS20B), Label: "GPT-OSS 20B", Provider: "OpenAI",
+			ContextSize: 128000,
+			Description: "OpenAI open-weight model for lower latency and specialized use cases.",
+		},
+		{
+			ID: string(TextModelNemotron3), Label: "Nemotron 3 120B", Provider: "NVIDIA",
+			ContextSize: 256000,
+			Description: "Hybrid MoE with leading accuracy for multi-agent applications.",
+		},
+		{
+			ID: string(TextModelLlama32_3B), Label: "Llama 3.2 3B", Provider: "Meta",
+			ContextSize: 80000,
+			Description: "Lightweight model for simple tasks. Fast and cheap.",
+		},
+	}
+}
+
+// TextMessage is a single message in a chat conversation.
+type TextMessage struct {
+	Role    string `json:"role"`    // "system" or "user"
+	Content string `json:"content"` // message text
+}
+
+// TextRequest is the input to Generate.
+type TextRequest struct {
+	// Model is the CF Workers AI model ID. Defaults to DefaultTextModel when empty.
+	Model TextModel
+	// Messages is the conversation history (system + user messages).
+	Messages []TextMessage
+	// MaxTokens limits the output length (0 = model default).
+	MaxTokens int
+}
+
+// TextGenClient generates text via Cloudflare Workers AI LLM models.
+type TextGenClient interface {
+	// Generate sends a chat-style request and returns the model's response text.
+	Generate(ctx context.Context, req TextRequest) (string, error)
+
+	// Models returns metadata about all supported text generation models.
+	Models() []TextModelInfo
+}
+
+// textGenHTTPClient is the concrete CF AI text generation client.
+type textGenHTTPClient struct {
+	accountID string
+	apiToken  string
+	http      *http.Client
+}
+
+// NewTextGen returns a TextGenClient for the given Cloudflare account.
+func NewTextGen(accountID, apiToken string) TextGenClient {
+	return &textGenHTTPClient{
+		accountID: accountID,
+		apiToken:  apiToken,
+		http:      &http.Client{Timeout: 5 * time.Minute},
+	}
+}
+
+// Generate sends messages to the model and returns the response text.
+func (c *textGenHTTPClient) Generate(ctx context.Context, req TextRequest) (string, error) {
+	if req.Model == "" {
+		req.Model = DefaultTextModel
+	}
+
+	body := map[string]any{
+		"messages": req.Messages,
+	}
+	if req.MaxTokens > 0 {
+		body["max_tokens"] = req.MaxTokens
+	}
+
+	encoded, err := json.Marshal(body)
+	if err != nil {
+		return "", fmt.Errorf("cfai/text: marshal: %w", err)
+	}
+
+	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/accounts/%s/ai/run/%s",
+		c.accountID, string(req.Model))
+	httpReq, err := http.NewRequestWithContext(ctx, http.MethodPost, url, bytes.NewReader(encoded))
+	if err != nil {
+		return "", fmt.Errorf("cfai/text: build request: %w", err)
+	}
+	httpReq.Header.Set("Authorization", "Bearer "+c.apiToken)
+	httpReq.Header.Set("Content-Type", "application/json")
+
+	resp, err := c.http.Do(httpReq)
+	if err != nil {
+		return "", fmt.Errorf("cfai/text: http: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		errBody, _ := io.ReadAll(resp.Body)
+		msg := string(errBody)
+		if len(msg) > 300 {
+			msg = msg[:300]
+		}
+		return "", fmt.Errorf("cfai/text: model %s returned %d: %s", req.Model, resp.StatusCode, msg)
+	}
+
+	// CF AI wraps responses: { "result": { "response": "..." }, "success": true }
+	// Some models (e.g. Llama 4 Scout) return response as an array:
+	// { "result": { "response": [{"generated_text":"..."}] } }
+	var wrapper struct {
+		Result struct {
+			Response json.RawMessage `json:"response"`
+		} `json:"result"`
+		Success bool     `json:"success"`
+		Errors  []string `json:"errors"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&wrapper); err != nil {
+		return "", fmt.Errorf("cfai/text: decode response: %w", err)
+	}
+	if !wrapper.Success {
+		return "", fmt.Errorf("cfai/text: model %s error: %v", req.Model, wrapper.Errors)
+	}
+	// Try plain string first.
+	var text string
+	if err := json.Unmarshal(wrapper.Result.Response, &text); err == nil {
+		return text, nil
+	}
+	// Fall back: array of objects with a "generated_text" field.
+	var arr []struct {
+		GeneratedText string `json:"generated_text"`
+	}
+	if err := json.Unmarshal(wrapper.Result.Response, &arr); err == nil && len(arr) > 0 {
+		return arr[0].GeneratedText, nil
+	}
+	return "", fmt.Errorf("cfai/text: model %s: unrecognised response shape: %s", req.Model, wrapper.Result.Response)
+}
+
+// Models returns all supported text generation model metadata.
+func (c *textGenHTTPClient) Models() []TextModelInfo {
+	return AllTextModels()
+}

backend/internal/domain/domain.go

@@ -169,3 +169,30 @@ type TranslationResult struct {
 	ObjectKey    string `json:"object_key,omitempty"`
 	ErrorMessage string `json:"error_message,omitempty"`
 }
+
+// AIJob represents an AI generation task tracked in PocketBase (ai_jobs collection).
+type AIJob struct {
+	ID string `json:"id"`
+	// Kind is one of: "chapter-names", "batch-covers", "chapter-covers", "refresh-metadata".
+	Kind string `json:"kind"`
+	// Slug is the book slug for per-book jobs; empty for catalogue-wide jobs.
+	Slug   string     `json:"slug"`
+	Status TaskStatus `json:"status"`
+	// FromItem is the first item to process (chapter number, or 0-based book index).
+	// 0 = start from the beginning.
+	FromItem int `json:"from_item"`
+	// ToItem is the last item to process (inclusive). 0 = process all.
+	ToItem int `json:"to_item"`
+	// ItemsDone is the cumulative count of successfully processed items.
+	ItemsDone int `json:"items_done"`
+	// ItemsTotal is the total number of items in this job.
+	ItemsTotal int `json:"items_total"`
+	Model      string `json:"model"`
+	// Payload is a JSON-encoded string with job-specific parameters
+	// (e.g. naming pattern for chapter-names, num_steps for batch-covers).
+	Payload      string    `json:"payload"`
+	ErrorMessage string    `json:"error_message,omitempty"`
+	Started      time.Time `json:"started,omitempty"`
+	Finished     time.Time `json:"finished,omitempty"`
+	HeartbeatAt  time.Time `json:"heartbeat_at,omitempty"`
+}

backend/internal/orchestrator/orchestrator_test.go

@@ -89,6 +89,8 @@ func (s *stubStore) WriteChapterRefs(_ context.Context, _ string, _ []domain.Cha
 	return nil
 }
 
+func (s *stubStore) DeduplicateChapters(_ context.Context, _ string) (int, error) { return 0, nil }
+
 func (s *stubStore) ChapterExists(_ context.Context, slug string, ref domain.ChapterRef) bool {
 	s.mu.Lock()
 	defer s.mu.Unlock()

backend/internal/runner/runner_test.go

@@ -94,6 +94,10 @@ func (s *stubBookWriter) ChapterExists(_ context.Context, _ string, _ domain.Cha
 	return false
 }
 
+func (s *stubBookWriter) DeduplicateChapters(_ context.Context, _ string) (int, error) {
+	return 0, nil
+}
+
 // stubBookReader satisfies bookstore.BookReader — returns a single chapter.
 type stubBookReader struct {
 	text    string

backend/internal/storage/store.go

@@ -53,6 +53,7 @@ var _ bookstore.PresignStore = (*Store)(nil)
 var _ bookstore.ProgressStore = (*Store)(nil)
 var _ bookstore.CoverStore = (*Store)(nil)
 var _ bookstore.TranslationStore = (*Store)(nil)
+var _ bookstore.AIJobStore = (*Store)(nil)
 var _ taskqueue.Producer = (*Store)(nil)
 var _ taskqueue.Consumer = (*Store)(nil)
 var _ taskqueue.Reader = (*Store)(nil)
@@ -130,7 +131,23 @@ func (s *Store) upsertChapterIdx(ctx context.Context, slug string, ref domain.Ch
 		return err
 	}
 	if len(items) == 0 {
-		return s.pb.post(ctx, "/api/collections/chapters_idx/records", payload, nil)
+		// Set created timestamp on first insert so recentlyUpdatedBooks can sort by it.
+		insertPayload := map[string]any{
+			"slug":    slug,
+			"number":  ref.Number,
+			"title":   ref.Title,
+			"created": time.Now().UTC().Format(time.RFC3339),
+		}
+		postErr := s.pb.post(ctx, "/api/collections/chapters_idx/records", insertPayload, nil)
+		if postErr == nil {
+			return nil
+		}
+		// POST failed — a concurrent writer may have inserted the same slug+number.
+		// Re-fetch and fall through to PATCH (mirrors WriteMetadata retry pattern).
+		items, err = s.pb.listAll(ctx, "chapters_idx", filter, "")
+		if err != nil || len(items) == 0 {
+			return postErr // original POST error is more informative
+		}
 	}
 	var rec struct {
 		ID string `json:"id"`
@@ -139,6 +156,59 @@ func (s *Store) upsertChapterIdx(ctx context.Context, slug string, ref domain.Ch
 	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/chapters_idx/records/%s", rec.ID), payload)
 }
 
+// DeduplicateChapters removes duplicate chapters_idx records for slug.
+// For each chapter number that has more than one record, it keeps the record
+// with the latest "updated" timestamp and deletes the rest.
+// Returns the number of records deleted.
+func (s *Store) DeduplicateChapters(ctx context.Context, slug string) (int, error) {
+	filter := fmt.Sprintf(`slug=%q`, slug)
+	items, err := s.pb.listAll(ctx, "chapters_idx", filter, "number")
+	if err != nil {
+		return 0, fmt.Errorf("DeduplicateChapters: list: %w", err)
+	}
+
+	type record struct {
+		ID      string `json:"id"`
+		Number  int    `json:"number"`
+		Updated string `json:"updated"`
+	}
+
+	// Group records by chapter number.
+	byNumber := make(map[int][]record)
+	for _, raw := range items {
+		var rec record
+		if err := json.Unmarshal(raw, &rec); err != nil || rec.ID == "" {
+			continue
+		}
+		byNumber[rec.Number] = append(byNumber[rec.Number], rec)
+	}
+
+	deleted := 0
+	for _, recs := range byNumber {
+		if len(recs) <= 1 {
+			continue
+		}
+		// Keep the record with the latest Updated timestamp; delete the rest.
+		keep := 0
+		for i := 1; i < len(recs); i++ {
+			if recs[i].Updated > recs[keep].Updated {
+				keep = i
+			}
+		}
+		for i, rec := range recs {
+			if i == keep {
+				continue
+			}
+			if delErr := s.pb.delete(ctx, fmt.Sprintf("/api/collections/chapters_idx/records/%s", rec.ID)); delErr != nil {
+				s.log.Warn("DeduplicateChapters: delete failed", "slug", slug, "number", rec.Number, "id", rec.ID, "err", delErr)
+				continue
+			}
+			deleted++
+		}
+	}
+	return deleted, nil
+}
+
 // ── BookReader ────────────────────────────────────────────────────────────────
 
 type pbBook struct {
@@ -994,3 +1064,107 @@ func (s *Store) GetTranslation(ctx context.Context, key string) (string, error)
 	}
 	return string(data), nil
 }
+
+// ── AIJobStore ────────────────────────────────────────────────────────────────
+
+func (s *Store) CreateAIJob(ctx context.Context, job domain.AIJob) (string, error) {
+	payload := map[string]any{
+		"kind":        job.Kind,
+		"slug":        job.Slug,
+		"status":      string(job.Status),
+		"from_item":   job.FromItem,
+		"to_item":     job.ToItem,
+		"items_done":  job.ItemsDone,
+		"items_total": job.ItemsTotal,
+		"model":       job.Model,
+		"payload":     job.Payload,
+		"started":     job.Started.Format(time.RFC3339),
+	}
+	var out struct {
+		ID string `json:"id"`
+	}
+	if err := s.pb.post(ctx, "/api/collections/ai_jobs/records", payload, &out); err != nil {
+		return "", fmt.Errorf("CreateAIJob: %w", err)
+	}
+	return out.ID, nil
+}
+
+func (s *Store) GetAIJob(ctx context.Context, id string) (domain.AIJob, bool, error) {
+	var raw json.RawMessage
+	if err := s.pb.get(ctx, fmt.Sprintf("/api/collections/ai_jobs/records/%s", id), &raw); err != nil {
+		if strings.Contains(err.Error(), "404") {
+			return domain.AIJob{}, false, nil
+		}
+		return domain.AIJob{}, false, fmt.Errorf("GetAIJob: %w", err)
+	}
+	job, err := parseAIJob(raw)
+	if err != nil {
+		return domain.AIJob{}, false, err
+	}
+	return job, true, nil
+}
+
+func (s *Store) UpdateAIJob(ctx context.Context, id string, fields map[string]any) error {
+	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/ai_jobs/records/%s", id), fields)
+}
+
+func (s *Store) ListAIJobs(ctx context.Context) ([]domain.AIJob, error) {
+	items, err := s.pb.listAll(ctx, "ai_jobs", "", "-started")
+	if err != nil {
+		return nil, fmt.Errorf("ListAIJobs: %w", err)
+	}
+	out := make([]domain.AIJob, 0, len(items))
+	for _, raw := range items {
+		j, err := parseAIJob(raw)
+		if err != nil {
+			continue
+		}
+		out = append(out, j)
+	}
+	return out, nil
+}
+
+func parseAIJob(raw json.RawMessage) (domain.AIJob, error) {
+	var r struct {
+		ID           string `json:"id"`
+		Kind         string `json:"kind"`
+		Slug         string `json:"slug"`
+		Status       string `json:"status"`
+		FromItem     int    `json:"from_item"`
+		ToItem       int    `json:"to_item"`
+		ItemsDone    int    `json:"items_done"`
+		ItemsTotal   int    `json:"items_total"`
+		Model        string `json:"model"`
+		Payload      string `json:"payload"`
+		ErrorMessage string `json:"error_message"`
+		Started      string `json:"started"`
+		Finished     string `json:"finished"`
+		HeartbeatAt  string `json:"heartbeat_at"`
+	}
+	if err := json.Unmarshal(raw, &r); err != nil {
+		return domain.AIJob{}, fmt.Errorf("parseAIJob: %w", err)
+	}
+	parseT := func(s string) time.Time {
+		if s == "" {
+			return time.Time{}
+		}
+		t, _ := time.Parse(time.RFC3339, s)
+		return t
+	}
+	return domain.AIJob{
+		ID:           r.ID,
+		Kind:         r.Kind,
+		Slug:         r.Slug,
+		Status:       domain.TaskStatus(r.Status),
+		FromItem:     r.FromItem,
+		ToItem:       r.ToItem,
+		ItemsDone:    r.ItemsDone,
+		ItemsTotal:   r.ItemsTotal,
+		Model:        r.Model,
+		Payload:      r.Payload,
+		ErrorMessage: r.ErrorMessage,
+		Started:      parseT(r.Started),
+		Finished:     parseT(r.Finished),
+		HeartbeatAt:  parseT(r.HeartbeatAt),
+	}, nil
+}

docker-compose.yml

@@ -19,6 +19,9 @@ x-infra-env: &infra-env
   MEILI_API_KEY: "${MEILI_MASTER_KEY}"
   # Valkey
   VALKEY_ADDR: "valkey:6379"
+  # Cloudflare AI (TTS + image generation)
+  CFAI_ACCOUNT_ID: "${CFAI_ACCOUNT_ID}"
+  CFAI_API_TOKEN: "${CFAI_API_TOKEN}"
 
 services:
   # ─── MinIO (object storage: chapters, audio, avatars, browse) ────────────────
@@ -183,7 +186,7 @@ services:
       KOKORO_URL: "${KOKORO_URL}"
       KOKORO_VOICE: "${KOKORO_VOICE}"
       POCKET_TTS_URL: "${POCKET_TTS_URL}"
-      GLITCHTIP_DSN: "${GLITCHTIP_DSN}"
+      GLITCHTIP_DSN: "${GLITCHTIP_DSN_BACKEND}"
       OTEL_EXPORTER_OTLP_ENDPOINT: "${OTEL_EXPORTER_OTLP_ENDPOINT}"
       OTEL_SERVICE_NAME: "backend"
       # Asynq task queue — backend enqueues jobs to local Redis sidecar.
@@ -246,7 +249,7 @@ services:
       KOKORO_URL: "${KOKORO_URL}"
       KOKORO_VOICE: "${KOKORO_VOICE}"
       POCKET_TTS_URL: "${POCKET_TTS_URL}"
-      GLITCHTIP_DSN: "${GLITCHTIP_DSN}"
+      GLITCHTIP_DSN: "${GLITCHTIP_DSN_RUNNER}"
       OTEL_EXPORTER_OTLP_ENDPOINT: "${OTEL_EXPORTER_OTLP_ENDPOINT}"
       OTEL_SERVICE_NAME: "runner"
     healthcheck:
@@ -299,6 +302,8 @@ services:
       PUBLIC_UMAMI_SCRIPT_URL: "${PUBLIC_UMAMI_SCRIPT_URL}"
       # GlitchTip client + server-side error tracking
       PUBLIC_GLITCHTIP_DSN: "${PUBLIC_GLITCHTIP_DSN}"
+      # Grafana Faro RUM (browser Web Vitals, traces, errors)
+      PUBLIC_FARO_COLLECTOR_URL: "${PUBLIC_FARO_COLLECTOR_URL}"
       # OpenTelemetry tracing
       OTEL_EXPORTER_OTLP_ENDPOINT: "${OTEL_EXPORTER_OTLP_ENDPOINT}"
       OTEL_SERVICE_NAME: "ui"
@@ -307,6 +312,9 @@ services:
       GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET}"
       GITHUB_CLIENT_ID: "${GITHUB_CLIENT_ID}"
       GITHUB_CLIENT_SECRET: "${GITHUB_CLIENT_SECRET}"
+      # Polar (subscriptions)
+      POLAR_API_TOKEN: "${POLAR_API_TOKEN}"
+      POLAR_WEBHOOK_SECRET: "${POLAR_WEBHOOK_SECRET}"
     healthcheck:
       test: ["CMD", "wget", "-qO-", "http://127.0.0.1:3000/health"]
       interval: 15s

homelab/docker-compose.yml

@@ -18,6 +18,7 @@
 #   uptime.libnovel.cc    → uptime-kuma:3001
 #   push.libnovel.cc      → gotify:80
 #   grafana.libnovel.cc   → grafana:3000
+#   faro.libnovel.cc      → alloy:12347
 
 services:
 
@@ -81,7 +82,7 @@ services:
       RUNNER_SKIP_INITIAL_CATALOGUE_REFRESH: "true"
 
       LOG_LEVEL: "${LOG_LEVEL}"
-      GLITCHTIP_DSN: "${GLITCHTIP_DSN}"
+      GLITCHTIP_DSN: "${GLITCHTIP_DSN_RUNNER}"
 
       # OTel — send runner traces/metrics to the local collector (HTTP)
       OTEL_EXPORTER_OTLP_ENDPOINT: "http://otel-collector:4318"
@@ -168,6 +169,11 @@ services:
       VALKEY_URL: "redis://valkey:6379/1"
       PORT: "8000"
       ENABLE_USER_REGISTRATION: "false"
+      MEDIA_ROOT: "/code/uploads"
+    volumes:
+      - glitchtip_uploads:/code/uploads
+      # Patch: GzipChunk fallback for sentry-cli 3.x raw zip uploads (GlitchTip bug)
+      - ./glitchtip/files_api.py:/code/apps/files/api.py:ro
     healthcheck:
       test: ["CMD", "python3", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8000/api/0/')"]
       interval: 15s
@@ -189,6 +195,11 @@ services:
       DEFAULT_FROM_EMAIL: "noreply@libnovel.cc"
       VALKEY_URL: "redis://valkey:6379/1"
       SERVER_ROLE: "worker"
+      MEDIA_ROOT: "/code/uploads"
+    volumes:
+      - glitchtip_uploads:/code/uploads
+      # Patch: GzipChunk fallback for sentry-cli 3.x raw zip uploads (GlitchTip bug)
+      - ./glitchtip/files_api.py:/code/apps/files/api.py:ro
 
   # ── Umami ───────────────────────────────────────────────────────────────────
   umami:
@@ -346,6 +357,23 @@ services:
       timeout: 5s
       retries: 5
 
+  # ── Grafana Alloy (Faro RUM receiver) ───────────────────────────────────────
+  # Receives browser telemetry from @grafana/faro-web-sdk (Web Vitals, traces,
+  # errors). Exposes POST /collect at faro.libnovel.cc via cloudflared.
+  # Forwards traces to otel-collector (→ Tempo) and logs to Loki directly.
+  alloy:
+    image: grafana/alloy:latest
+    restart: unless-stopped
+    command: ["run", "--server.http.listen-addr=0.0.0.0:12348", "/etc/alloy/alloy.river"]
+    volumes:
+      - ./otel/alloy.river:/etc/alloy/alloy.river:ro
+    expose:
+      - "12347"  # Faro HTTP receiver (POST /collect)
+      - "12348"  # Alloy UI / health endpoint
+    depends_on:
+      - otel-collector
+      - loki
+
   # ── OTel Collector ──────────────────────────────────────────────────────────
   # Receives OTLP from backend/ui/runner, fans out to Tempo + Prometheus + Loki.
   otel-collector:
@@ -522,3 +550,4 @@ volumes:
   grafana_data:
   pocket_tts_cache:
   hf_cache:
+  glitchtip_uploads:

homelab/glitchtip/files_api.py

@@ -0,0 +1,127 @@
+"""Port of sentry.api.endpoints.chunk.ChunkUploadEndpoint"""
+
+import logging
+from gzip import GzipFile
+from io import BytesIO
+
+from django.conf import settings
+from django.shortcuts import aget_object_or_404
+from django.urls import reverse
+from ninja import File, Router
+from ninja.errors import HttpError
+from ninja.files import UploadedFile
+
+from apps.organizations_ext.models import Organization
+from glitchtip.api.authentication import AuthHttpRequest
+from glitchtip.api.decorators import optional_slash
+from glitchtip.api.permissions import has_permission
+
+from .models import FileBlob
+
+# Force just one blob
+CHUNK_UPLOAD_BLOB_SIZE = 32 * 1024 * 1024  # 32MB
+MAX_CHUNKS_PER_REQUEST = 1
+MAX_REQUEST_SIZE = CHUNK_UPLOAD_BLOB_SIZE
+MAX_CONCURRENCY = 1
+HASH_ALGORITHM = "sha1"
+
+CHUNK_UPLOAD_ACCEPT = (
+    "debug_files",  # DIF assemble
+    "release_files",  # Release files assemble
+    "pdbs",  # PDB upload and debug id override
+    "sources",  # Source artifact bundle upload
+    "artifact_bundles",  # Artifact bundles contain debug ids to link source to sourcemaps
+    "proguard",
+)
+
+
+class GzipChunk(BytesIO):
+    def __init__(self, file):
+        raw = file.read()
+        try:
+            data = GzipFile(fileobj=BytesIO(raw), mode="rb").read()
+        except Exception:
+            # sentry-cli 3.x sends raw (uncompressed) zip data despite gzip being
+            # advertised by the server — fall back to using the raw bytes as-is.
+            data = raw
+        self.size = len(data)
+        self.name = file.name
+        super().__init__(data)
+
+
+router = Router()
+
+
+@optional_slash(router, "get", "organizations/{slug:organization_slug}/chunk-upload/")
+async def get_chunk_upload_info(request: AuthHttpRequest, organization_slug: str):
+    """Get server settings for chunk file upload"""
+    path = reverse("api:get_chunk_upload_info", args=[organization_slug])
+    url = (
+        path
+        if settings.GLITCHTIP_CHUNK_UPLOAD_USE_RELATIVE_URL
+        else settings.GLITCHTIP_URL.geturl() + path
+    )
+    return {
+        "url": url,
+        "chunkSize": CHUNK_UPLOAD_BLOB_SIZE,
+        "chunksPerRequest": MAX_CHUNKS_PER_REQUEST,
+        "maxFileSize": 2147483648,
+        "maxRequestSize": MAX_REQUEST_SIZE,
+        "concurrency": MAX_CONCURRENCY,
+        "hashAlgorithm": HASH_ALGORITHM,
+        "compression": ["gzip"],
+        "accept": CHUNK_UPLOAD_ACCEPT,
+    }
+
+
+@optional_slash(router, "post", "organizations/{slug:organization_slug}/chunk-upload/")
+@has_permission(["project:write", "project:admin", "project:releases"])
+async def chunk_upload(
+    request: AuthHttpRequest,
+    organization_slug: str,
+    file_gzip: list[UploadedFile] = File(...),
+):
+    """Upload one more more gzipped files to save"""
+    logger = logging.getLogger("glitchtip.files")
+    logger.info("chunkupload.start")
+
+    organization = await aget_object_or_404(
+        Organization, slug=organization_slug.lower(), users=request.auth.user_id
+    )
+
+    files = [GzipChunk(chunk) for chunk in file_gzip]
+
+    if len(files) == 0:
+        # No files uploaded is ok
+        logger.info("chunkupload.end", extra={"status": 200})
+        return
+
+    logger.info("chunkupload.post.files", extra={"len": len(files)})
+
+    # Validate file size
+    checksums = []
+    size = 0
+    for chunk in files:
+        size += chunk.size
+        if chunk.size > CHUNK_UPLOAD_BLOB_SIZE:
+            logger.info("chunkupload.end", extra={"status": 400})
+            raise HttpError(400, "Chunk size too large")
+        checksums.append(chunk.name)
+
+    if size > MAX_REQUEST_SIZE:
+        logger.info("chunkupload.end", extra={"status": 400})
+        raise HttpError(400, "Request too large")
+
+    if len(files) > MAX_CHUNKS_PER_REQUEST:
+        logger.info("chunkupload.end", extra={"status": 400})
+        raise HttpError(400, "Too many chunks")
+
+    try:
+        await FileBlob.from_files(
+            zip(files, checksums), organization=organization, logger=logger
+        )
+    except IOError as err:
+        logger.info("chunkupload.end", extra={"status": 400})
+        raise HttpError(400, str(err)) from err
+
+    logger.info("chunkupload.end", extra={"status": 200})

homelab/otel/alloy.river

@@ -0,0 +1,43 @@
+// Grafana Alloy — Faro RUM receiver
+//
+// Receives browser telemetry (Web Vitals, traces, logs, exceptions) from the
+// LibNovel SvelteKit frontend via the @grafana/faro-web-sdk.
+//
+// Pipeline:
+//   faro.receiver  → receives HTTP POST /collect from browsers
+//   otelcol.exporter.otlphttp → forwards traces to OTel Collector → Tempo
+//   loki.write                → forwards logs/exceptions to Loki
+//
+// The Faro endpoint is exposed publicly at faro.libnovel.cc via cloudflared.
+// CORS is configured to allow requests from libnovel.cc.
+
+faro.receiver "faro" {
+  server {
+    listen_address = "0.0.0.0"
+    listen_port    = 12347
+
+    cors_allowed_origins = ["https://libnovel.cc", "https://www.libnovel.cc"]
+  }
+
+  output {
+    logs   = [loki.write.faro.receiver]
+    traces = [otelcol.exporter.otlphttp.faro.input]
+  }
+}
+
+// Forward Faro traces to the OTel Collector (which routes to Tempo)
+otelcol.exporter.otlphttp "faro" {
+  client {
+    endpoint = "http://otel-collector:4318"
+    tls {
+      insecure = true
+    }
+  }
+}
+
+// Forward Faro logs/exceptions directly to Loki
+loki.write "faro" {
+  endpoint {
+    url = "http://loki:3100/loki/api/v1/push"
+  }
+}

homelab/otel/collector.yaml

@@ -53,6 +53,9 @@ extensions:
 
 service:
   extensions: [health_check, pprof]
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
   pipelines:
     traces:
       receivers: [otlp]

homelab/otel/grafana/provisioning/dashboards/backend.json

@@ -1,7 +1,7 @@
 {
   "uid": "libnovel-backend",
   "title": "Backend API",
-  "description": "Request rate, error rate, and latency for the LibNovel backend. Powered by Tempo span metrics and UI OTel instrumentation.",
+  "description": "Request rate, error rate, and latency for the LibNovel backend. Powered by Tempo span metrics.",
   "tags": ["libnovel", "backend", "api"],
   "timezone": "browser",
   "refresh": "30s",
@@ -173,7 +173,7 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "sum(rate(http_client_request_duration_seconds_count{job=\"ui\", server_address=\"backend\", http_response_status_code=~\"5..\"}[5m])) * 60",
+          "expr": "sum(rate(traces_spanmetrics_calls_total{service=\"backend\", status_code=\"STATUS_CODE_ERROR\"}[5m])) * 60",
           "legendFormat": "5xx/min",
           "instant": true
         }
@@ -182,7 +182,7 @@
     {
       "id": 10,
       "type": "timeseries",
-      "title": "Request Rate by Status",
+      "title": "Request Rate (total vs errors)",
       "gridPos": { "x": 0, "y": 4, "w": 12, "h": 8 },
       "options": {
         "tooltip": { "mode": "multi" },
@@ -191,27 +191,21 @@
       "fieldConfig": {
         "defaults": { "unit": "reqps", "custom": { "lineWidth": 2, "fillOpacity": 10 } },
         "overrides": [
-          { "matcher": { "id": "byFrameRefID", "options": "errors" }, "properties": [{ "id": "color", "value": { "fixedColor": "red", "mode": "fixed" } }] }
+          { "matcher": { "id": "byName", "options": "errors" }, "properties": [{ "id": "color", "value": { "fixedColor": "red", "mode": "fixed" } }] }
         ]
       },
       "targets": [
         {
-          "refId": "success",
+          "refId": "total",
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "sum(rate(http_client_request_duration_seconds_count{job=\"ui\", server_address=\"backend\", http_response_status_code=~\"2..\"}[5m]))",
-          "legendFormat": "2xx"
-        },
-        {
-          "refId": "notfound",
-          "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "sum(rate(http_client_request_duration_seconds_count{job=\"ui\", server_address=\"backend\", http_response_status_code=~\"4..\"}[5m]))",
-          "legendFormat": "4xx"
+          "expr": "sum(rate(traces_spanmetrics_calls_total{service=\"backend\"}[5m]))",
+          "legendFormat": "total"
         },
         {
           "refId": "errors",
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "sum(rate(http_client_request_duration_seconds_count{job=\"ui\", server_address=\"backend\", http_response_status_code=~\"5..\"}[5m]))",
-          "legendFormat": "5xx"
+          "expr": "sum(rate(traces_spanmetrics_calls_total{service=\"backend\", status_code=\"STATUS_CODE_ERROR\"}[5m]))",
+          "legendFormat": "errors"
         }
       ]
     },
@@ -248,50 +242,30 @@
     {
       "id": 12,
       "type": "timeseries",
-      "title": "Requests / min by HTTP method (UI → Backend)",
+      "title": "Request Rate by Span Name (top operations)",
       "gridPos": { "x": 0, "y": 12, "w": 12, "h": 8 },
+      "description": "Throughput broken down by HTTP route / span name from Tempo span metrics.",
       "options": {
         "tooltip": { "mode": "multi" },
         "legend": { "displayMode": "list", "placement": "bottom" }
       },
       "fieldConfig": {
-        "defaults": { "unit": "short", "custom": { "lineWidth": 2, "fillOpacity": 5 } }
+        "defaults": { "unit": "reqps", "custom": { "lineWidth": 2, "fillOpacity": 5 } }
       },
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "sum(rate(http_client_request_duration_seconds_count{job=\"ui\", server_address=\"backend\"}[5m])) by (http_request_method) * 60",
-          "legendFormat": "{{http_request_method}}"
+          "expr": "topk(10, sum(rate(traces_spanmetrics_calls_total{service=\"backend\"}[5m])) by (span_name))",
+          "legendFormat": "{{span_name}}"
         }
       ]
     },
     {
       "id": 13,
       "type": "timeseries",
-      "title": "Requests / min — UI → PocketBase",
+      "title": "Latency by Span Name (p95)",
       "gridPos": { "x": 12, "y": 12, "w": 12, "h": 8 },
-      "description": "Traffic from SvelteKit server to PocketBase (auth, collections, etc.).",
-      "options": {
-        "tooltip": { "mode": "multi" },
-        "legend": { "displayMode": "list", "placement": "bottom" }
-      },
-      "fieldConfig": {
-        "defaults": { "unit": "short", "custom": { "lineWidth": 2, "fillOpacity": 5 } }
-      },
-      "targets": [
-        {
-          "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "sum(rate(http_client_request_duration_seconds_count{job=\"ui\", server_address=\"pocketbase\"}[5m])) by (http_request_method, http_response_status_code) * 60",
-          "legendFormat": "{{http_request_method}} {{http_response_status_code}}"
-        }
-      ]
-    },
-    {
-      "id": 14,
-      "type": "timeseries",
-      "title": "UI → Backend Latency (p50 / p95)",
-      "gridPos": { "x": 0, "y": 20, "w": 12, "h": 8 },
-      "description": "HTTP client latency as seen from the SvelteKit SSR layer calling backend.",
+      "description": "p95 latency per operation — helps identify slow endpoints.",
       "options": {
         "tooltip": { "mode": "multi" },
         "legend": { "displayMode": "list", "placement": "bottom" }
@@ -302,13 +276,8 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "histogram_quantile(0.50, sum(rate(http_client_request_duration_seconds_bucket{job=\"ui\", server_address=\"backend\"}[5m])) by (le))",
-          "legendFormat": "p50"
-        },
-        {
-          "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "histogram_quantile(0.95, sum(rate(http_client_request_duration_seconds_bucket{job=\"ui\", server_address=\"backend\"}[5m])) by (le))",
-          "legendFormat": "p95"
+          "expr": "topk(10, histogram_quantile(0.95, sum(rate(traces_spanmetrics_latency_bucket{service=\"backend\"}[5m])) by (le, span_name)))",
+          "legendFormat": "{{span_name}}"
         }
       ]
     },
@@ -316,7 +285,7 @@
       "id": 20,
       "type": "logs",
       "title": "Backend Errors",
-      "gridPos": { "x": 0, "y": 28, "w": 24, "h": 10 },
+      "gridPos": { "x": 0, "y": 20, "w": 24, "h": 10 },
       "options": {
         "showTime": true,
         "showLabels": false,

homelab/otel/grafana/provisioning/dashboards/runner.json

@@ -35,7 +35,7 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "libnovel_runner_tasks_running",
+          "expr": "runner_tasks_running",
           "legendFormat": "running",
           "instant": true
         }
@@ -61,7 +61,7 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "libnovel_runner_tasks_completed_total",
+          "expr": "runner_tasks_completed_total",
           "legendFormat": "completed",
           "instant": true
         }
@@ -93,7 +93,7 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "libnovel_runner_tasks_failed_total",
+          "expr": "runner_tasks_failed_total",
           "legendFormat": "failed",
           "instant": true
         }
@@ -126,7 +126,7 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "libnovel_runner_uptime_seconds",
+          "expr": "runner_uptime_seconds",
           "legendFormat": "uptime",
           "instant": true
         }
@@ -159,7 +159,7 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "libnovel_runner_tasks_failed_total / clamp_min(libnovel_runner_tasks_completed_total + libnovel_runner_tasks_failed_total, 1)",
+          "expr": "runner_tasks_failed_total / clamp_min(runner_tasks_completed_total + runner_tasks_failed_total, 1)",
           "legendFormat": "failure rate",
           "instant": true
         }
@@ -215,17 +215,17 @@
       "targets": [
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "rate(libnovel_runner_tasks_completed_total[5m]) * 60",
+          "expr": "rate(runner_tasks_completed_total[5m]) * 60",
           "legendFormat": "completed"
         },
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "rate(libnovel_runner_tasks_failed_total[5m]) * 60",
+          "expr": "rate(runner_tasks_failed_total[5m]) * 60",
           "legendFormat": "failed"
         },
         {
           "datasource": { "type": "prometheus", "uid": "prometheus" },
-          "expr": "libnovel_runner_tasks_running",
+          "expr": "runner_tasks_running",
           "legendFormat": "running"
         }
       ]

homelab/otel/grafana/provisioning/dashboards/web-vitals.json

@@ -0,0 +1,284 @@
+{
+  "uid": "libnovel-web-vitals",
+  "title": "Web Vitals (RUM)",
+  "description": "Real User Monitoring — Core Web Vitals (LCP, CLS, INP, TTFB, FCP) from @grafana/faro-web-sdk. Data flows: browser → Alloy faro.receiver → Tempo (traces) + Loki (logs).",
+  "tags": ["libnovel", "frontend", "rum", "web-vitals"],
+  "timezone": "browser",
+  "refresh": "1m",
+  "time": { "from": "now-24h", "to": "now" },
+  "schemaVersion": 39,
+  "panels": [
+    {
+      "id": 1,
+      "type": "stat",
+      "title": "LCP — p75 (Largest Contentful Paint)",
+      "description": "Good < 2.5 s, needs improvement < 4 s, poor ≥ 4 s.",
+      "gridPos": { "x": 0, "y": 0, "w": 4, "h": 4 },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background", "graphMode": "none" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ms",
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "green", "value": null },
+              { "color": "yellow", "value": 2500 },
+              { "color": "red", "value": 4000 }
+            ]
+          }
+        }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*lcp|LCP\"}[1h])) by (le)) * 1000",
+          "legendFormat": "LCP p75",
+          "instant": true
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "type": "stat",
+      "title": "INP — p75 (Interaction to Next Paint)",
+      "description": "Good < 200 ms, needs improvement < 500 ms, poor ≥ 500 ms.",
+      "gridPos": { "x": 4, "y": 0, "w": 4, "h": 4 },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background", "graphMode": "none" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ms",
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "green", "value": null },
+              { "color": "yellow", "value": 200 },
+              { "color": "red", "value": 500 }
+            ]
+          }
+        }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*inp|INP\"}[1h])) by (le)) * 1000",
+          "legendFormat": "INP p75",
+          "instant": true
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "type": "stat",
+      "title": "CLS — p75 (Cumulative Layout Shift)",
+      "description": "Good < 0.1, needs improvement < 0.25, poor ≥ 0.25.",
+      "gridPos": { "x": 8, "y": 0, "w": 4, "h": 4 },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background", "graphMode": "none" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short",
+          "decimals": 3,
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "green", "value": null },
+              { "color": "yellow", "value": 0.1 },
+              { "color": "red", "value": 0.25 }
+            ]
+          }
+        }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*cls|CLS\"}[1h])) by (le))",
+          "legendFormat": "CLS p75",
+          "instant": true
+        }
+      ]
+    },
+    {
+      "id": 4,
+      "type": "stat",
+      "title": "TTFB — p75 (Time to First Byte)",
+      "description": "Good < 800 ms, needs improvement < 1800 ms, poor ≥ 1800 ms.",
+      "gridPos": { "x": 12, "y": 0, "w": 4, "h": 4 },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background", "graphMode": "none" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ms",
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "green", "value": null },
+              { "color": "yellow", "value": 800 },
+              { "color": "red", "value": 1800 }
+            ]
+          }
+        }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*ttfb|TTFB\"}[1h])) by (le)) * 1000",
+          "legendFormat": "TTFB p75",
+          "instant": true
+        }
+      ]
+    },
+    {
+      "id": 5,
+      "type": "stat",
+      "title": "FCP — p75 (First Contentful Paint)",
+      "description": "Good < 1.8 s, needs improvement < 3 s, poor ≥ 3 s.",
+      "gridPos": { "x": 16, "y": 0, "w": 4, "h": 4 },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background", "graphMode": "none" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ms",
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              { "color": "green", "value": null },
+              { "color": "yellow", "value": 1800 },
+              { "color": "red", "value": 3000 }
+            ]
+          }
+        }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*fcp|FCP\"}[1h])) by (le)) * 1000",
+          "legendFormat": "FCP p75",
+          "instant": true
+        }
+      ]
+    },
+    {
+      "id": 6,
+      "type": "stat",
+      "title": "Active Sessions (30 min)",
+      "gridPos": { "x": 20, "y": 0, "w": 4, "h": 4 },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "value", "graphMode": "area" },
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short",
+          "thresholds": { "mode": "absolute", "steps": [{ "color": "green", "value": null }] }
+        }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "sum(rate(traces_spanmetrics_calls_total{service=\"libnovel-ui\"}[30m]))",
+          "legendFormat": "sessions",
+          "instant": true
+        }
+      ]
+    },
+    {
+      "id": 10,
+      "type": "timeseries",
+      "title": "LCP over time (p50 / p75 / p95)",
+      "gridPos": { "x": 0, "y": 4, "w": 12, "h": 8 },
+      "options": { "tooltip": { "mode": "multi" }, "legend": { "displayMode": "list", "placement": "bottom" } },
+      "fieldConfig": {
+        "defaults": { "unit": "ms", "custom": { "lineWidth": 2, "fillOpacity": 10 } },
+        "overrides": [
+          { "matcher": { "id": "byName", "options": "Good (2.5s)" }, "properties": [{ "id": "color", "value": { "fixedColor": "green", "mode": "fixed" } }, { "id": "custom.lineStyle", "value": { "fill": "dash", "dash": [4, 4] } }] },
+          { "matcher": { "id": "byName", "options": "Poor (4s)" }, "properties": [{ "id": "color", "value": { "fixedColor": "red", "mode": "fixed" } }, { "id": "custom.lineStyle", "value": { "fill": "dash", "dash": [4, 4] } }] }
+        ]
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.50, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*lcp|LCP\"}[5m])) by (le)) * 1000",
+          "legendFormat": "p50"
+        },
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*lcp|LCP\"}[5m])) by (le)) * 1000",
+          "legendFormat": "p75"
+        },
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.95, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*lcp|LCP\"}[5m])) by (le)) * 1000",
+          "legendFormat": "p95"
+        },
+        { "datasource": { "type": "prometheus", "uid": "prometheus" }, "expr": "2500", "legendFormat": "Good (2.5s)" },
+        { "datasource": { "type": "prometheus", "uid": "prometheus" }, "expr": "4000", "legendFormat": "Poor (4s)" }
+      ]
+    },
+    {
+      "id": 11,
+      "type": "timeseries",
+      "title": "TTFB over time (p50 / p75 / p95)",
+      "gridPos": { "x": 12, "y": 4, "w": 12, "h": 8 },
+      "options": { "tooltip": { "mode": "multi" }, "legend": { "displayMode": "list", "placement": "bottom" } },
+      "fieldConfig": {
+        "defaults": { "unit": "ms", "custom": { "lineWidth": 2, "fillOpacity": 10 } }
+      },
+      "targets": [
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.50, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*ttfb|TTFB\"}[5m])) by (le)) * 1000",
+          "legendFormat": "p50"
+        },
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.75, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*ttfb|TTFB\"}[5m])) by (le)) * 1000",
+          "legendFormat": "p75"
+        },
+        {
+          "datasource": { "type": "prometheus", "uid": "prometheus" },
+          "expr": "histogram_quantile(0.95, sum(rate(traces_spanmetrics_latency_bucket{service=\"libnovel-ui\", span_name=~\"faro.*ttfb|TTFB\"}[5m])) by (le)) * 1000",
+          "legendFormat": "p95"
+        }
+      ]
+    },
+    {
+      "id": 20,
+      "type": "logs",
+      "title": "Frontend Errors & Exceptions",
+      "description": "JS exceptions and console errors captured by Faro and shipped to Loki.",
+      "gridPos": { "x": 0, "y": 12, "w": 24, "h": 10 },
+      "options": {
+        "showTime": true,
+        "showLabels": true,
+        "wrapLogMessage": true,
+        "prettifyLogMessage": true,
+        "enableLogDetails": true,
+        "sortOrder": "Descending",
+        "dedupStrategy": "none"
+      },
+      "targets": [
+        {
+          "datasource": { "type": "loki", "uid": "loki" },
+          "expr": "{service_name=\"libnovel-ui\"} | json | kind =~ `(exception|error)`",
+          "legendFormat": ""
+        }
+      ]
+    },
+    {
+      "id": 21,
+      "type": "logs",
+      "title": "Frontend Logs (all Faro events)",
+      "gridPos": { "x": 0, "y": 22, "w": 24, "h": 10 },
+      "options": {
+        "showTime": true,
+        "showLabels": false,
+        "wrapLogMessage": true,
+        "prettifyLogMessage": true,
+        "enableLogDetails": true,
+        "sortOrder": "Descending",
+        "dedupStrategy": "none"
+      },
+      "targets": [
+        {
+          "datasource": { "type": "loki", "uid": "loki" },
+          "expr": "{service_name=\"libnovel-ui\"}",
+          "legendFormat": ""
+        }
+      ]
+    }
+  ]
+}

homelab/runner/docker-compose.yml

@@ -38,6 +38,8 @@ services:
     image: kalekber/libnovel-runner:latest
     restart: unless-stopped
     stop_grace_period: 135s
+    labels:
+      - "com.centurylinklabs.watchtower.enable=true"
     depends_on:
       - libretranslate
     # Pin prod subdomains to the prod server IP to bypass Cloudflare's 100s
@@ -100,7 +102,7 @@ services:
 
       # ── Observability ───────────────────────────────────────────────────────
       LOG_LEVEL: "${LOG_LEVEL}"
-      GLITCHTIP_DSN: "${GLITCHTIP_DSN}"
+      GLITCHTIP_DSN: "${GLITCHTIP_DSN_RUNNER}"
 
     healthcheck:
       test: ["CMD", "/healthcheck", "file", "/tmp/runner.alive", "120"]

scripts/pb-init-v3.sh

@@ -62,6 +62,39 @@ create() {
   esac
 }
 
+# add_index COLLECTION INDEX_NAME SQL_EXPR
+# Fetches current schema, adds index if absent by name, PATCHes collection.
+add_index() {
+  COLL="$1"; INAME="$2"; ISQL="$3"
+  SCHEMA=$(curl -sf -H "Authorization: Bearer $TOK" "$PB/api/collections/$COLL" 2>/dev/null)
+  PARSED=$(echo "$SCHEMA" | python3 -c "
+import sys, json
+d = json.load(sys.stdin)
+indexes = d.get('indexes', [])
+exists = any('$INAME' in idx for idx in indexes)
+print('exists=' + str(exists))
+print('id=' + d.get('id', ''))
+if not exists:
+    indexes.append('$ISQL')
+    print('indexes=' + json.dumps(indexes))
+" 2>/dev/null)
+  if echo "$PARSED" | grep -q "^exists=True"; then
+    log "index exists (skip): $COLL.$INAME"; return
+  fi
+  COLL_ID=$(echo "$PARSED" | grep "^id=" | sed 's/^id=//')
+  [ -z "$COLL_ID" ] && { log "WARNING: cannot resolve id for $COLL"; return; }
+  NEW_INDEXES=$(echo "$PARSED" | grep "^indexes=" | sed 's/^indexes=//')
+  STATUS=$(curl -s -o /dev/null -w "%{http_code}" \
+    -X PATCH "$PB/api/collections/$COLL_ID" \
+    -H "Content-Type: application/json" \
+    -H "Authorization: Bearer $TOK" \
+    -d "{\"indexes\":${NEW_INDEXES}}")
+  case "$STATUS" in
+    200|201) log "added index: $COLL.$INAME" ;;
+    *)       log "WARNING: add_index $COLL.$INAME returned $STATUS" ;;
+  esac
+}
+
 # add_field COLLECTION FIELD_NAME FIELD_TYPE
 # Fetches current schema, appends field if absent, PATCHes collection.
 # Requires python3 for safe JSON manipulation.
@@ -116,9 +149,10 @@ create "books" '{
 
 create "chapters_idx" '{
   "name":"chapters_idx","type":"base","fields":[
-    {"name":"slug",  "type":"text",   "required":true},
-    {"name":"number","type":"number", "required":true},
-    {"name":"title", "type":"text"}
+    {"name":"slug",    "type":"text",   "required":true},
+    {"name":"number",  "type":"number", "required":true},
+    {"name":"title",   "type":"text"},
+    {"name":"created", "type":"date"}
   ]}'
 
 create "ranking" '{
@@ -260,6 +294,23 @@ create "translation_jobs" '{
     {"name":"heartbeat_at", "type":"date"}
   ]}'
 
+create "ai_jobs" '{
+  "name":"ai_jobs","type":"base","fields":[
+    {"name":"kind",          "type":"text",  "required":true},
+    {"name":"slug",          "type":"text"},
+    {"name":"status",        "type":"text",  "required":true},
+    {"name":"from_item",     "type":"number"},
+    {"name":"to_item",       "type":"number"},
+    {"name":"items_done",    "type":"number"},
+    {"name":"items_total",   "type":"number"},
+    {"name":"model",         "type":"text"},
+    {"name":"payload",       "type":"text"},
+    {"name":"error_message", "type":"text"},
+    {"name":"started",       "type":"date"},
+    {"name":"finished",      "type":"date"},
+    {"name":"heartbeat_at",  "type":"date"}
+  ]}'
+
 create "discovery_votes" '{
   "name":"discovery_votes","type":"base","fields":[
     {"name":"session_id","type":"text","required":true},
@@ -293,5 +344,12 @@ add_field "app_users"      "polar_customer_id"      "text"
 add_field "app_users"      "polar_subscription_id"  "text"
 add_field "user_library"   "shelf"                  "text"
 add_field "user_sessions"  "device_fingerprint"     "text"
+add_field "chapters_idx"   "created"                "date"
+
+# ── 6. Indexes ────────────────────────────────────────────────────────────────
+add_index "chapters_idx" "idx_chapters_idx_slug_number" \
+  "CREATE UNIQUE INDEX idx_chapters_idx_slug_number ON chapters_idx (slug, number)"
+add_index "chapters_idx" "idx_chapters_idx_created" \
+  "CREATE INDEX idx_chapters_idx_created ON chapters_idx (created)"
 
 log "done"

ui/Dockerfile

@@ -21,7 +21,11 @@ ENV PUBLIC_BUILD_VERSION=$BUILD_VERSION
 ENV PUBLIC_BUILD_COMMIT=$BUILD_COMMIT
 ENV PUBLIC_BUILD_TIME=$BUILD_TIME
 
-RUN npm run build
+# PREBUILT=1 skips npm run build — used in CI when the build/ directory has
+# already been compiled (and debug IDs injected) by a prior job.  The caller
+# must copy the pre-built build/ into the Docker context before building.
+ARG PREBUILT=0
+RUN [ "$PREBUILT" = "1" ] || npm run build
 
 # ── Runtime image ──────────────────────────────────────────────────────────────
 # adapter-node bundles most server-side code, but packages with dynamic

ui/messages/en.json

@@ -302,6 +302,24 @@
   "book_detail_range_queuing": "Queuing\u2026",
   "book_detail_scrape_range": "Scrape range",
   "book_detail_admin": "Admin",
+  "book_detail_admin_book_cover": "Book Cover",
+  "book_detail_admin_chapter_cover": "Chapter Cover",
+  "book_detail_admin_chapter_n": "Chapter #",
+  "book_detail_admin_description": "Description",
+  "book_detail_admin_chapter_names": "Chapter Names",
+  "book_detail_admin_audio_tts": "Audio TTS",
+  "book_detail_admin_voice": "Voice",
+  "book_detail_admin_generate": "Generate",
+  "book_detail_admin_save_cover": "Save Cover",
+  "book_detail_admin_saving": "Saving…",
+  "book_detail_admin_saved": "Saved",
+  "book_detail_admin_apply": "Apply",
+  "book_detail_admin_applying": "Applying…",
+  "book_detail_admin_applied": "Applied",
+  "book_detail_admin_discard": "Discard",
+  "book_detail_admin_enqueue_audio": "Enqueue Audio",
+  "book_detail_admin_cancel_audio": "Cancel",
+  "book_detail_admin_enqueued": "Enqueued {enqueued}, skipped {skipped}",
   "book_detail_scraping_progress": "Fetching the first 20 chapters. This page will refresh automatically.",
   "book_detail_scraping_home": "\u2190 Home",
   "book_detail_rescrape_book": "Rescrape book",
@@ -348,6 +366,26 @@
   "profile_upgrade_monthly": "Monthly \u2014 $6 / mo",
   "profile_upgrade_annual": "Annual \u2014 $48 / yr",
   "profile_free_limits": "Free plan: 3 audio chapters per day, English reading only.",
+  "subscribe_page_title": "Go Pro \u2014 libnovel",
+  "subscribe_heading": "Read more. Listen more.",
+  "subscribe_subheading": "Upgrade to Pro and unlock the full libnovel experience.",
+  "subscribe_monthly_label": "Monthly",
+  "subscribe_monthly_price": "$6",
+  "subscribe_monthly_period": "per month",
+  "subscribe_annual_label": "Annual",
+  "subscribe_annual_price": "$48",
+  "subscribe_annual_period": "per year",
+  "subscribe_annual_save": "Save 33%",
+  "subscribe_cta_monthly": "Start monthly plan",
+  "subscribe_cta_annual": "Start annual plan",
+  "subscribe_already_pro": "You already have a Pro subscription.",
+  "subscribe_manage": "Manage subscription",
+  "subscribe_benefit_audio": "Unlimited audio chapters per day",
+  "subscribe_benefit_voices": "Voice selection across all TTS engines",
+  "subscribe_benefit_translation": "Read in French, Indonesian, Portuguese, and Russian",
+  "subscribe_benefit_downloads": "Download chapters for offline listening",
+  "subscribe_login_prompt": "Sign in to subscribe",
+  "subscribe_login_cta": "Sign in",
 
   "user_currently_reading": "Currently Reading",
   "user_library_count": "Library ({n})",
@@ -363,6 +401,9 @@
   "admin_nav_translation": "Translation",
   "admin_nav_changelog": "Changelog",
   "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",
@@ -370,6 +411,7 @@
   "admin_nav_uptime": "Uptime",
   "admin_nav_push": "Push",
   "admin_nav_gitea": "Gitea",
+  "admin_nav_grafana": "Grafana",
 
   "admin_scrape_status_idle": "Idle",
   "admin_scrape_status_running": "Running",

ui/messages/fr.json

@@ -302,6 +302,24 @@
   "book_detail_range_queuing": "En file d'attente…",
   "book_detail_scrape_range": "Plage d'extraction",
   "book_detail_admin": "Admin",
+  "book_detail_admin_book_cover": "Couverture du livre",
+  "book_detail_admin_chapter_cover": "Couverture du chapitre",
+  "book_detail_admin_chapter_n": "Chapitre n°",
+  "book_detail_admin_description": "Description",
+  "book_detail_admin_chapter_names": "Noms des chapitres",
+  "book_detail_admin_audio_tts": "Audio TTS",
+  "book_detail_admin_voice": "Voix",
+  "book_detail_admin_generate": "Générer",
+  "book_detail_admin_save_cover": "Enregistrer la couverture",
+  "book_detail_admin_saving": "Enregistrement…",
+  "book_detail_admin_saved": "Enregistré",
+  "book_detail_admin_apply": "Appliquer",
+  "book_detail_admin_applying": "Application…",
+  "book_detail_admin_applied": "Appliqué",
+  "book_detail_admin_discard": "Ignorer",
+  "book_detail_admin_enqueue_audio": "Mettre en file audio",
+  "book_detail_admin_cancel_audio": "Annuler",
+  "book_detail_admin_enqueued": "{enqueued} en file, {skipped} ignorés",
   "book_detail_scraping_progress": "Récupération des 20 premiers chapitres. Cette page sera actualisée automatiquement.",
   "book_detail_scraping_home": "← Accueil",
   "book_detail_rescrape_book": "Réextraire le livre",
@@ -348,6 +366,26 @@
   "profile_upgrade_monthly": "Mensuel — 6 $ / mois",
   "profile_upgrade_annual": "Annuel — 48 $ / an",
   "profile_free_limits": "Plan gratuit : 3 chapitres audio par jour, lecture en anglais uniquement.",
+  "subscribe_page_title": "Passer Pro \u2014 libnovel",
+  "subscribe_heading": "Lisez plus. Écoutez plus.",
+  "subscribe_subheading": "Passez Pro et débloquez l'expérience libnovel complète.",
+  "subscribe_monthly_label": "Mensuel",
+  "subscribe_monthly_price": "6 $",
+  "subscribe_monthly_period": "par mois",
+  "subscribe_annual_label": "Annuel",
+  "subscribe_annual_price": "48 $",
+  "subscribe_annual_period": "par an",
+  "subscribe_annual_save": "Économisez 33 %",
+  "subscribe_cta_monthly": "Commencer le plan mensuel",
+  "subscribe_cta_annual": "Commencer le plan annuel",
+  "subscribe_already_pro": "Vous avez déjà un abonnement Pro.",
+  "subscribe_manage": "Gérer l'abonnement",
+  "subscribe_benefit_audio": "Chapitres audio illimités par jour",
+  "subscribe_benefit_voices": "Sélection de voix pour tous les moteurs TTS",
+  "subscribe_benefit_translation": "Lire en français, indonésien, portugais et russe",
+  "subscribe_benefit_downloads": "Télécharger des chapitres pour une écoute hors ligne",
+  "subscribe_login_prompt": "Connectez-vous pour vous abonner",
+  "subscribe_login_cta": "Se connecter",
 
   "user_currently_reading": "En cours de lecture",
   "user_library_count": "Bibliothèque ({n})",
@@ -363,7 +401,9 @@
   "admin_nav_translation": "Traduction",
   "admin_nav_changelog": "Modifications",
   "admin_nav_image_gen": "Image Gen",
-  "admin_nav_feedback": "Retours",
+  "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",
@@ -432,5 +472,6 @@
   "feed_chapters_label": "{n} chapitres",
   "feed_browse_cta": "Parcourir le catalogue",
   "feed_find_users_cta": "Trouver des lecteurs",
-  "admin_nav_gitea": "Gitea"
+  "admin_nav_gitea": "Gitea",
+  "admin_nav_grafana": "Grafana"
 }

ui/messages/id.json

@@ -302,6 +302,24 @@
   "book_detail_range_queuing": "Mengantri…",
   "book_detail_scrape_range": "Rentang scrape",
   "book_detail_admin": "Admin",
+  "book_detail_admin_book_cover": "Sampul Buku",
+  "book_detail_admin_chapter_cover": "Sampul Bab",
+  "book_detail_admin_chapter_n": "Bab #",
+  "book_detail_admin_description": "Deskripsi",
+  "book_detail_admin_chapter_names": "Nama Bab",
+  "book_detail_admin_audio_tts": "Audio TTS",
+  "book_detail_admin_voice": "Suara",
+  "book_detail_admin_generate": "Buat",
+  "book_detail_admin_save_cover": "Simpan Sampul",
+  "book_detail_admin_saving": "Menyimpan…",
+  "book_detail_admin_saved": "Tersimpan",
+  "book_detail_admin_apply": "Terapkan",
+  "book_detail_admin_applying": "Menerapkan…",
+  "book_detail_admin_applied": "Diterapkan",
+  "book_detail_admin_discard": "Buang",
+  "book_detail_admin_enqueue_audio": "Antre Audio",
+  "book_detail_admin_cancel_audio": "Batal",
+  "book_detail_admin_enqueued": "Diantre {enqueued}, dilewati {skipped}",
   "book_detail_scraping_progress": "Mengambil 20 bab pertama. Halaman ini akan dimuat ulang otomatis.",
   "book_detail_scraping_home": "← Beranda",
   "book_detail_rescrape_book": "Scrape ulang buku",
@@ -348,6 +366,26 @@
   "profile_upgrade_monthly": "Bulanan — $6 / bln",
   "profile_upgrade_annual": "Tahunan — $48 / thn",
   "profile_free_limits": "Paket gratis: 3 bab audio per hari, hanya bahasa Inggris.",
+  "subscribe_page_title": "Jadi Pro \u2014 libnovel",
+  "subscribe_heading": "Baca lebih. Dengarkan lebih.",
+  "subscribe_subheading": "Tingkatkan ke Pro dan buka pengalaman libnovel sepenuhnya.",
+  "subscribe_monthly_label": "Bulanan",
+  "subscribe_monthly_price": "$6",
+  "subscribe_monthly_period": "per bulan",
+  "subscribe_annual_label": "Tahunan",
+  "subscribe_annual_price": "$48",
+  "subscribe_annual_period": "per tahun",
+  "subscribe_annual_save": "Hemat 33%",
+  "subscribe_cta_monthly": "Mulai paket bulanan",
+  "subscribe_cta_annual": "Mulai paket tahunan",
+  "subscribe_already_pro": "Anda sudah berlangganan Pro.",
+  "subscribe_manage": "Kelola langganan",
+  "subscribe_benefit_audio": "Bab audio tak terbatas per hari",
+  "subscribe_benefit_voices": "Pilihan suara untuk semua mesin TTS",
+  "subscribe_benefit_translation": "Baca dalam bahasa Prancis, Indonesia, Portugis, dan Rusia",
+  "subscribe_benefit_downloads": "Unduh bab untuk didengarkan secara offline",
+  "subscribe_login_prompt": "Masuk untuk berlangganan",
+  "subscribe_login_cta": "Masuk",
 
   "user_currently_reading": "Sedang Dibaca",
   "user_library_count": "Perpustakaan ({n})",
@@ -363,7 +401,9 @@
   "admin_nav_translation": "Terjemahan",
   "admin_nav_changelog": "Perubahan",
   "admin_nav_image_gen": "Image Gen",
-  "admin_nav_feedback": "Masukan",
+  "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",
@@ -432,5 +472,6 @@
   "feed_chapters_label": "{n} bab",
   "feed_browse_cta": "Jelajahi katalog",
   "feed_find_users_cta": "Temukan pembaca",
-  "admin_nav_gitea": "Gitea"
+  "admin_nav_gitea": "Gitea",
+  "admin_nav_grafana": "Grafana"
 }

ui/messages/pt.json

@@ -302,6 +302,24 @@
   "book_detail_range_queuing": "Na fila…",
   "book_detail_scrape_range": "Intervalo de extração",
   "book_detail_admin": "Admin",
+  "book_detail_admin_book_cover": "Capa do Livro",
+  "book_detail_admin_chapter_cover": "Capa do Capítulo",
+  "book_detail_admin_chapter_n": "Capítulo nº",
+  "book_detail_admin_description": "Descrição",
+  "book_detail_admin_chapter_names": "Nomes dos Capítulos",
+  "book_detail_admin_audio_tts": "Áudio TTS",
+  "book_detail_admin_voice": "Voz",
+  "book_detail_admin_generate": "Gerar",
+  "book_detail_admin_save_cover": "Salvar Capa",
+  "book_detail_admin_saving": "Salvando…",
+  "book_detail_admin_saved": "Salvo",
+  "book_detail_admin_apply": "Aplicar",
+  "book_detail_admin_applying": "Aplicando…",
+  "book_detail_admin_applied": "Aplicado",
+  "book_detail_admin_discard": "Descartar",
+  "book_detail_admin_enqueue_audio": "Enfileirar Áudio",
+  "book_detail_admin_cancel_audio": "Cancelar",
+  "book_detail_admin_enqueued": "{enqueued} enfileirados, {skipped} ignorados",
   "book_detail_scraping_progress": "Buscando os primeiros 20 capítulos. Esta página será atualizada automaticamente.",
   "book_detail_scraping_home": "← Início",
   "book_detail_rescrape_book": "Reextrair livro",
@@ -348,6 +366,26 @@
   "profile_upgrade_monthly": "Mensal — $6 / mês",
   "profile_upgrade_annual": "Anual — $48 / ano",
   "profile_free_limits": "Plano gratuito: 3 capítulos de áudio por dia, somente inglês.",
+  "subscribe_page_title": "Seja Pro \u2014 libnovel",
+  "subscribe_heading": "Leia mais. Ouça mais.",
+  "subscribe_subheading": "Torne-se Pro e desbloqueie a experiência completa do libnovel.",
+  "subscribe_monthly_label": "Mensal",
+  "subscribe_monthly_price": "$6",
+  "subscribe_monthly_period": "por mês",
+  "subscribe_annual_label": "Anual",
+  "subscribe_annual_price": "$48",
+  "subscribe_annual_period": "por ano",
+  "subscribe_annual_save": "Economize 33%",
+  "subscribe_cta_monthly": "Começar plano mensal",
+  "subscribe_cta_annual": "Começar plano anual",
+  "subscribe_already_pro": "Você já tem uma assinatura Pro.",
+  "subscribe_manage": "Gerenciar assinatura",
+  "subscribe_benefit_audio": "Capítulos de áudio ilimitados por dia",
+  "subscribe_benefit_voices": "Seleção de voz para todos os mecanismos TTS",
+  "subscribe_benefit_translation": "Leia em francês, indonésio, português e russo",
+  "subscribe_benefit_downloads": "Baixe capítulos para ouvir offline",
+  "subscribe_login_prompt": "Entre para assinar",
+  "subscribe_login_cta": "Entrar",
 
   "user_currently_reading": "Lendo Agora",
   "user_library_count": "Biblioteca ({n})",
@@ -363,7 +401,9 @@
   "admin_nav_translation": "Tradução",
   "admin_nav_changelog": "Alterações",
   "admin_nav_image_gen": "Image Gen",
-  "admin_nav_feedback": "Feedback",
+  "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",
@@ -432,5 +472,6 @@
   "feed_chapters_label": "{n} capítulos",
   "feed_browse_cta": "Ver catálogo",
   "feed_find_users_cta": "Encontrar leitores",
-  "admin_nav_gitea": "Gitea"
+  "admin_nav_gitea": "Gitea",
+  "admin_nav_grafana": "Grafana"
 }

ui/messages/ru.json

@@ -302,6 +302,24 @@
   "book_detail_range_queuing": "В очереди…",
   "book_detail_scrape_range": "Диапазон глав",
   "book_detail_admin": "Администрирование",
+  "book_detail_admin_book_cover": "Обложка книги",
+  "book_detail_admin_chapter_cover": "Обложка главы",
+  "book_detail_admin_chapter_n": "Глава №",
+  "book_detail_admin_description": "Описание",
+  "book_detail_admin_chapter_names": "Названия глав",
+  "book_detail_admin_audio_tts": "Аудио TTS",
+  "book_detail_admin_voice": "Голос",
+  "book_detail_admin_generate": "Сгенерировать",
+  "book_detail_admin_save_cover": "Сохранить обложку",
+  "book_detail_admin_saving": "Сохранение…",
+  "book_detail_admin_saved": "Сохранено",
+  "book_detail_admin_apply": "Применить",
+  "book_detail_admin_applying": "Применение…",
+  "book_detail_admin_applied": "Применено",
+  "book_detail_admin_discard": "Отменить",
+  "book_detail_admin_enqueue_audio": "Поставить в очередь",
+  "book_detail_admin_cancel_audio": "Отмена",
+  "book_detail_admin_enqueued": "В очереди {enqueued}, пропущено {skipped}",
   "book_detail_scraping_progress": "Загружаются первые 20 глав. Страница обновится автоматически.",
   "book_detail_scraping_home": "← На главную",
   "book_detail_rescrape_book": "Перепарсить книгу",
@@ -348,6 +366,26 @@
   "profile_upgrade_monthly": "Ежемесячно — $6 / мес",
   "profile_upgrade_annual": "Ежегодно — $48 / год",
   "profile_free_limits": "Бесплатный план: 3 аудиоглавы в день, только английский.",
+  "subscribe_page_title": "Перейти на Pro \u2014 libnovel",
+  "subscribe_heading": "Читайте больше. Слушайте больше.",
+  "subscribe_subheading": "Перейдите на Pro и откройте полный опыт libnovel.",
+  "subscribe_monthly_label": "Ежемесячно",
+  "subscribe_monthly_price": "$6",
+  "subscribe_monthly_period": "в месяц",
+  "subscribe_annual_label": "Ежегодно",
+  "subscribe_annual_price": "$48",
+  "subscribe_annual_period": "в год",
+  "subscribe_annual_save": "Сэкономьте 33%",
+  "subscribe_cta_monthly": "Начать месячный план",
+  "subscribe_cta_annual": "Начать годовой план",
+  "subscribe_already_pro": "У вас уже есть подписка Pro.",
+  "subscribe_manage": "Управление подпиской",
+  "subscribe_benefit_audio": "Неограниченные аудиоглавы в день",
+  "subscribe_benefit_voices": "Выбор голоса для всех TTS-движков",
+  "subscribe_benefit_translation": "Читайте на французском, индонезийском, португальском и русском",
+  "subscribe_benefit_downloads": "Скачивайте главы для прослушивания офлайн",
+  "subscribe_login_prompt": "Войдите, чтобы оформить подписку",
+  "subscribe_login_cta": "Войти",
 
   "user_currently_reading": "Сейчас читает",
   "user_library_count": "Библиотека ({n})",
@@ -363,7 +401,9 @@
   "admin_nav_translation": "Перевод",
   "admin_nav_changelog": "Изменения",
   "admin_nav_image_gen": "Image Gen",
-  "admin_nav_feedback": "Отзывы",
+  "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": "Логи",
@@ -432,5 +472,6 @@
   "feed_chapters_label": "{n} глав",
   "feed_browse_cta": "Каталог",
   "feed_find_users_cta": "Найти читателей",
-  "admin_nav_gitea": "Gitea"
+  "admin_nav_gitea": "Gitea",
+  "admin_nav_grafana": "Grafana"
 }

ui/package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@aws-sdk/client-s3": "^3.1005.0",
 				"@aws-sdk/s3-request-presigner": "^3.1005.0",
+				"@grafana/faro-web-sdk": "^2.3.1",
 				"@inlang/paraglide-js": "^2.15.1",
 				"@opentelemetry/exporter-logs-otlp-http": "^0.214.0",
 				"@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
@@ -1689,6 +1690,115 @@
 				"module-details-from-path": "^1.0.4"
 			}
 		},
+		"node_modules/@grafana/faro-core": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/@grafana/faro-core/-/faro-core-2.3.1.tgz",
+			"integrity": "sha512-htDKO0YFKr0tfntrPoM151vOPSZzmP6oE0+0MDvbI1WDaBW4erXmYi3feGJLWDXt5/vZBg9iQRmZoRzTLTTcOA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@opentelemetry/api": "^1.9.0",
+				"@opentelemetry/otlp-transformer": "^0.213.0"
+			}
+		},
+		"node_modules/@grafana/faro-core/node_modules/@opentelemetry/otlp-transformer": {
+			"version": "0.213.0",
+			"resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.213.0.tgz",
+			"integrity": "sha512-RSuAlxFFPjeK4d5Y6ps8L2WhaQI6CXWllIjvo5nkAlBpmq2XdYWEBGiAbOF4nDs8CX4QblJDv5BbMUft3sEfDw==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@opentelemetry/api-logs": "0.213.0",
+				"@opentelemetry/core": "2.6.0",
+				"@opentelemetry/resources": "2.6.0",
+				"@opentelemetry/sdk-logs": "0.213.0",
+				"@opentelemetry/sdk-metrics": "2.6.0",
+				"@opentelemetry/sdk-trace-base": "2.6.0",
+				"protobufjs": "^7.0.0"
+			},
+			"engines": {
+				"node": "^18.19.0 || >=20.6.0"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": "^1.3.0"
+			}
+		},
+		"node_modules/@grafana/faro-core/node_modules/@opentelemetry/resources": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.6.0.tgz",
+			"integrity": "sha512-D4y/+OGe3JSuYUCBxtH5T9DSAWNcvCb/nQWIga8HNtXTVPQn59j0nTBAgaAXxUVBDl40mG3Tc76b46wPlZaiJQ==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@opentelemetry/core": "2.6.0",
+				"@opentelemetry/semantic-conventions": "^1.29.0"
+			},
+			"engines": {
+				"node": "^18.19.0 || >=20.6.0"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": ">=1.3.0 <1.10.0"
+			}
+		},
+		"node_modules/@grafana/faro-core/node_modules/@opentelemetry/sdk-logs": {
+			"version": "0.213.0",
+			"resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.213.0.tgz",
+			"integrity": "sha512-00xlU3GZXo3kXKve4DLdrAL0NAFUaZ9appU/mn00S/5kSUdAvyYsORaDUfR04Mp2CLagAOhrzfUvYozY/EZX2g==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@opentelemetry/api-logs": "0.213.0",
+				"@opentelemetry/core": "2.6.0",
+				"@opentelemetry/resources": "2.6.0",
+				"@opentelemetry/semantic-conventions": "^1.29.0"
+			},
+			"engines": {
+				"node": "^18.19.0 || >=20.6.0"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": ">=1.4.0 <1.10.0"
+			}
+		},
+		"node_modules/@grafana/faro-core/node_modules/@opentelemetry/sdk-metrics": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-2.6.0.tgz",
+			"integrity": "sha512-CicxWZxX6z35HR83jl+PLgtFgUrKRQ9LCXyxgenMnz5A1lgYWfAog7VtdOvGkJYyQgMNPhXQwkYrDLujk7z1Iw==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@opentelemetry/core": "2.6.0",
+				"@opentelemetry/resources": "2.6.0"
+			},
+			"engines": {
+				"node": "^18.19.0 || >=20.6.0"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": ">=1.9.0 <1.10.0"
+			}
+		},
+		"node_modules/@grafana/faro-core/node_modules/@opentelemetry/sdk-trace-base": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.6.0.tgz",
+			"integrity": "sha512-g/OZVkqlxllgFM7qMKqbPV9c1DUPhQ7d4n3pgZFcrnrNft9eJXZM2TNHTPYREJBrtNdRytYyvwjgL5geDKl3EQ==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@opentelemetry/core": "2.6.0",
+				"@opentelemetry/resources": "2.6.0",
+				"@opentelemetry/semantic-conventions": "^1.29.0"
+			},
+			"engines": {
+				"node": "^18.19.0 || >=20.6.0"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": ">=1.3.0 <1.10.0"
+			}
+		},
+		"node_modules/@grafana/faro-web-sdk": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/@grafana/faro-web-sdk/-/faro-web-sdk-2.3.1.tgz",
+			"integrity": "sha512-WMfErl2YSP+CcfcobMpCdK6apX86hc8bymMXsvYLQpBBkQ0KJjIilEQS/YXd+g/cg6F1kwbeweisBKluNNy5sA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@grafana/faro-core": "^2.3.1",
+				"ua-parser-js": "1.0.41",
+				"web-vitals": "^5.1.0"
+			}
+		},
 		"node_modules/@grpc/grpc-js": {
 			"version": "1.14.3",
 			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.3.tgz",
@@ -7377,6 +7487,32 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/ua-parser-js": {
+			"version": "1.0.41",
+			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+			"integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/ua-parser-js"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/faisalman"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/faisalman"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"ua-parser-js": "script/cli.js"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/undici-types": {
 			"version": "7.18.2",
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
@@ -7540,6 +7676,12 @@
 				}
 			}
 		},
+		"node_modules/web-vitals": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.2.0.tgz",
+			"integrity": "sha512-i2z98bEmaCqSDiHEDu+gHl/dmR4Q+TxFmG3/13KkMO+o8UxQzCqWaDRCiLgEa41nlO4VpXSI0ASa1xWmO9sBlA==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/webidl-conversions": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

ui/package.json

@@ -31,6 +31,7 @@
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.1005.0",
 		"@aws-sdk/s3-request-presigner": "^3.1005.0",
+		"@grafana/faro-web-sdk": "^2.3.1",
 		"@inlang/paraglide-js": "^2.15.1",
 		"@opentelemetry/exporter-logs-otlp-http": "^0.214.0",
 		"@opentelemetry/exporter-trace-otlp-http": "^0.214.0",

ui/src/hooks.client.ts

@@ -1,5 +1,6 @@
 import * as Sentry from '@sentry/sveltekit';
 import { env } from '$env/dynamic/public';
+import { initializeFaro, getWebInstrumentations } from '@grafana/faro-web-sdk';
 
 // Sentry / GlitchTip client-side error tracking.
 // No-op when PUBLIC_GLITCHTIP_DSN is unset (e.g. local dev).
@@ -13,4 +14,21 @@ if (env.PUBLIC_GLITCHTIP_DSN) {
 	});
 }
 
+// Grafana Faro RUM — browser performance monitoring (Web Vitals, traces, errors).
+// No-op when PUBLIC_FARO_COLLECTOR_URL is unset (e.g. local dev).
+if (env.PUBLIC_FARO_COLLECTOR_URL) {
+	initializeFaro({
+		url: env.PUBLIC_FARO_COLLECTOR_URL,
+		app: {
+			name: 'libnovel-ui',
+			version: env.PUBLIC_BUILD_VERSION || 'dev',
+			environment: 'production'
+		},
+		instrumentations: [
+			// Core Web Vitals (LCP, CLS, INP, TTFB, FCP) + JS errors + console
+			...getWebInstrumentations({ captureConsole: false })
+		]
+	});
+}
+
 export const handleError = Sentry.handleErrorWithSentry();

ui/src/lib/audio.svelte.ts

@@ -32,6 +32,8 @@
  * It only runs once per chapter (guarded by nextStatus !== 'none').
  */
 
+import type { Voice } from '$lib/types';
+
 export type AudioStatus = 'idle' | 'loading' | 'generating' | 'ready' | 'error';
 export type NextStatus = 'none' | 'prefetching' | 'prefetched' | 'failed';
 
@@ -50,6 +52,9 @@ class AudioStore {
 	/** Full chapter list for the currently loaded book (number + title). */
 	chapters = $state<{ number: number; title: string }[]>([]);
 
+	/** Available voices (populated by the chapter AudioPlayer on mount). */
+	voices = $state<Voice[]>([]);
+
 	// ── Loading/generation state ────────────────────────────────────────────
 	status = $state<AudioStatus>('idle');
 	audioUrl = $state('');

ui/src/lib/components/AudioPlayer.svelte

@@ -69,6 +69,8 @@
 		voices?: Voice[];
 		/** Called when the server returns 402 (free daily limit reached). */
 		onProRequired?: () => void;
+		/** Visual style of the player card. 'standard' = full controls; 'compact' = slim seekable player. */
+		playerStyle?: 'standard' | 'compact';
 	}
 
 	let {
@@ -80,7 +82,8 @@
 		nextChapter = null,
 		chapters = [],
 		voices = [],
-		onProRequired = undefined
+		onProRequired = undefined,
+		playerStyle = 'standard'
 	}: Props = $props();
 
 	// ── Derived: voices grouped by engine ──────────────────────────────────
@@ -223,6 +226,11 @@
 		audioStore.nextChapter = nextChapter ?? null;
 	});
 
+	// Keep voices in store up to date whenever prop changes.
+	$effect(() => {
+		if (voices.length > 0) audioStore.voices = voices;
+	});
+
 	// Auto-start: if the layout navigated here via auto-next, kick off playback.
 	// We match against the chapter prop so the outgoing chapter's AudioPlayer
 	// (still mounted during the brief navigation window) never reacts to this.
@@ -527,6 +535,7 @@
 		audioStore.bookTitle = bookTitle;
 		audioStore.cover = cover;
 		audioStore.chapters = chapters;
+		if (voices.length > 0) audioStore.voices = voices;
 
 		// Update OS media session (lock screen / notification center).
 		setMediaSession();
@@ -564,7 +573,38 @@
 				return;
 			}
 
-			// Slow path: trigger Kokoro generation (non-blocking POST), then poll.
+			// Slow path: audio not yet in MinIO.
+			//
+			// For Kokoro / PocketTTS: always use the streaming endpoint so audio
+			// starts playing within seconds. The stream handler checks MinIO first
+			// (fast redirect if already cached) and otherwise generates + uploads
+			// concurrently. Even if the async runner is already working on this
+			// chapter, the stream will redirect to MinIO the moment the runner
+			// finishes — no harmful double-generation occurs because the backend
+			// deduplications via AudioExists on the next request.
+			if (!voice.startsWith('cfai:')) {
+				// PocketTTS outputs raw WAV — skip the ffmpeg transcode entirely.
+				// WAV (PCM) is natively supported on all platforms including iOS Safari.
+				// Kokoro and CF AI output MP3 natively, so keep mp3 for those.
+				const isPocketTTS = voices.some((v) => v.id === voice && v.engine === 'pocket-tts');
+				const format = isPocketTTS ? 'wav' : 'mp3';
+				const qs = new URLSearchParams({ voice, format });
+				const streamUrl = `/api/audio-stream/${slug}/${chapter}?${qs}`;
+				// HEAD probe: check paywall without triggering generation.
+				const headRes = await fetch(streamUrl, { method: 'HEAD' }).catch(() => null);
+				if (headRes?.status === 402) {
+					audioStore.status = 'idle';
+					onProRequired?.();
+					return;
+				}
+				audioStore.audioUrl = streamUrl;
+				audioStore.status = 'ready';
+				maybeStartPrefetch();
+				return;
+			}
+
+			// CF AI (batch-only) or already enqueued by presign: keep the traditional
+			// POST → poll → presign flow. For enqueued, we skip the POST and poll.
 			audioStore.status = 'generating';
 			startProgress();
 
@@ -738,6 +778,24 @@
 		if (m > 0) return `${m}m`;
 		return `${s}s`;
 	}
+
+	// ── Compact player helpers ─────────────────────────────────────────────────
+	const playPct = $derived(
+		audioStore.duration > 0 ? (audioStore.currentTime / audioStore.duration) * 100 : 0
+	);
+
+	const SPEED_OPTIONS = [0.75, 1, 1.25, 1.5, 2] as const;
+	function cycleSpeed() {
+		const idx = SPEED_OPTIONS.indexOf(audioStore.speed as (typeof SPEED_OPTIONS)[number]);
+		audioStore.speed = SPEED_OPTIONS[(idx + 1) % SPEED_OPTIONS.length];
+	}
+
+	function seekFromCompactBar(e: MouseEvent) {
+		if (audioStore.duration <= 0) return;
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		audioStore.seekRequest = pct * audioStore.duration;
+	}
 </script>
 
 <svelte:window onkeydown={handleKeyDown} />
@@ -788,6 +846,122 @@
 	</div>
 {/snippet}
 
+{#if playerStyle === 'compact'}
+<!-- ── Compact player ──────────────────────────────────────────────────────── -->
+<div class="mt-4 p-3 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
+	{#if audioStore.isCurrentChapter(slug, chapter)}
+		{#if audioStore.status === 'idle' || audioStore.status === 'error'}
+			{#if audioStore.status === 'error'}
+				<p class="text-(--color-danger) text-xs mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
+			{/if}
+			<Button variant="default" size="sm" onclick={handlePlay}>
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+				{m.reader_play_narration()}
+			</Button>
+
+		{:else if audioStore.status === 'loading'}
+			<div class="flex items-center gap-2 text-xs text-(--color-muted)">
+				<svg class="w-3.5 h-3.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"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+				</svg>
+				{m.player_loading()}
+			</div>
+
+		{:else if audioStore.status === 'generating'}
+			<div class="space-y-1.5">
+				<div class="flex items-center justify-between text-xs text-(--color-muted)">
+					<span>{m.reader_generating_narration()}</span>
+					<span class="tabular-nums">{Math.round(audioStore.progress)}%</span>
+				</div>
+				<div class="w-full h-1 bg-(--color-surface-3) rounded-full overflow-hidden">
+					<div class="h-full bg-(--color-brand) rounded-full transition-none" style="width: {audioStore.progress}%"></div>
+				</div>
+			</div>
+
+		{:else if audioStore.status === 'ready'}
+			<div class="space-y-2">
+				<!-- Seekable progress bar -->
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<div
+					role="none"
+					class="w-full h-1.5 bg-(--color-surface-3) rounded-full overflow-hidden cursor-pointer group"
+					onclick={seekFromCompactBar}
+				>
+					<div class="h-full bg-(--color-brand) rounded-full transition-none" style="width: {playPct}%"></div>
+				</div>
+				<!-- Controls row -->
+				<div class="flex items-center gap-2">
+					<!-- Skip back 15s -->
+					<button
+						type="button"
+						onclick={() => { audioStore.seekRequest = Math.max(0, audioStore.currentTime - 15); }}
+						class="text-(--color-muted) hover:text-(--color-text) transition-colors flex-shrink-0"
+						title="-15s"
+					>
+						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+						</svg>
+					</button>
+					<!-- Play/pause -->
+					<button
+						type="button"
+						onclick={() => { audioStore.toggleRequest++; }}
+						class="w-8 h-8 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) transition-colors flex-shrink-0"
+					>
+						{#if audioStore.isPlaying}
+							<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+						{:else}
+							<svg class="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+						{/if}
+					</button>
+					<!-- Skip forward 30s -->
+					<button
+						type="button"
+						onclick={() => { audioStore.seekRequest = Math.min(audioStore.duration || 0, audioStore.currentTime + 30); }}
+						class="text-(--color-muted) hover:text-(--color-text) transition-colors flex-shrink-0"
+						title="+30s"
+					>
+						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6v4l5-5-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8h-2z"/>
+						</svg>
+					</button>
+					<!-- Time display -->
+					<span class="flex-1 text-xs text-center tabular-nums text-(--color-muted)">
+						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
+					</span>
+					<!-- Speed cycle -->
+					<button
+						type="button"
+						onclick={cycleSpeed}
+						class="text-xs font-medium text-(--color-muted) hover:text-(--color-text) flex-shrink-0 tabular-nums transition-colors"
+						title="Playback speed"
+					>
+						{audioStore.speed}×
+					</button>
+				</div>
+			</div>
+		{/if}
+
+	{:else if audioStore.active}
+		<div class="flex items-center justify-between gap-3">
+			<p class="text-xs text-(--color-muted)">
+				{m.reader_now_playing({ title: audioStore.chapterTitle || `Ch.${audioStore.chapter}` })}
+			</p>
+			<Button variant="secondary" size="sm" class="flex-shrink-0" onclick={startPlayback}>
+				{m.reader_load_this_chapter()}
+			</Button>
+		</div>
+
+	{:else}
+		<Button variant="default" size="sm" onclick={handlePlay}>
+			<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+			{m.reader_play_narration()}
+		</Button>
+	{/if}
+</div>
+{:else}
+<!-- ── Standard player ─────────────────────────────────────────────────────── -->
 <div class="mt-6 p-4 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
 	<div class="flex items-center justify-between gap-2 mb-3">
 		<div class="flex items-center gap-2">
@@ -937,72 +1111,7 @@
 						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
 					</span>
 				</div>
-
-				<!-- Auto-next toggle (keep here as useful context) -->
-				{#if nextChapter !== null && nextChapter !== undefined}
-					<Button
-						variant="ghost"
-						size="sm"
-						class={cn('gap-1.5 text-xs flex-shrink-0', audioStore.autoNext ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : 'text-(--color-muted)')}
-				onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
-					title={audioStore.autoNext ? m.player_auto_next_on() : m.player_auto_next_off()}
-					aria-pressed={audioStore.autoNext}
-				>
-					<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
-					</svg>
-					{m.reader_auto_next()}
-				</Button>
-				{/if}
-
-				<!-- Sleep timer -->
-				<Button
-					variant="ghost"
-					size="sm"
-					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.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.sleepAfterChapter}
-						End Ch.
-					{:else if audioStore.sleepUntil}
-						{formatSleepRemaining(sleepRemainingSec)}
-					{:else}
-						Sleep
-					{/if}
-				</Button>
 			</div>
-
-			<!-- Next chapter pre-fetch status (only when auto-next is on) -->
-			{#if audioStore.autoNext && nextChapter !== null && nextChapter !== undefined}
-				<div class="mt-2">
-			{#if audioStore.nextStatus === 'prefetching'}
-				<div class="flex items-center gap-2 text-xs text-(--color-muted)">
-					<svg class="w-3 h-3 animate-spin flex-shrink-0" 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>
-					<span>{m.reader_ch_preparing({ n: String(nextChapter), percent: String(Math.round(audioStore.nextProgress)) })}</span>
-				</div>
-			{:else if audioStore.nextStatus === 'prefetched'}
-				<p class="text-xs text-(--color-muted) flex items-center gap-1">
-					<svg class="w-3 h-3 text-(--color-brand) flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
-					</svg>
-					{m.reader_ch_ready({ n: String(nextChapter) })}
-				</p>
-			{:else if audioStore.nextStatus === 'failed'}
-				<p class="text-xs text-(--color-muted) opacity-60">{m.reader_ch_generate_on_nav({ n: String(nextChapter) })}</p>
-			{/if}
-				</div>
-			{/if}
 		{/if}
 
 	{:else if audioStore.active}
@@ -1026,3 +1135,4 @@
 		</Button>
 	{/if}
 </div>
+{/if}

ui/src/lib/components/CommentsSection.svelte

@@ -241,311 +241,321 @@
 	const totalCount = $derived(
 		comments.reduce((n, c) => n + 1 + (c.replies?.length ?? 0), 0)
 	);
+
+	// ── Collapsed state ───────────────────────────────────────────────────────
+	// Hidden by default when there are no comments; expand on user tap.
+	let expanded = $state(false);
+	const hasComments = $derived(!loading && comments.length > 0);
+	// Auto-expand once comments load in
+	$effect(() => {
+		if (hasComments) expanded = true;
+	});
 </script>
 
 <div class="mt-10">
-	<!-- Header + sort controls -->
-	<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
-		<h2 class="text-base font-semibold text-(--color-text)">
+	{#if !expanded && !hasComments && !loading}
+		<!-- Collapsed: just a subtle link — no wasted real-estate for empty chapters -->
+		<button
+			type="button"
+			onclick={() => (expanded = true)}
+			class="flex items-center gap-1.5 text-sm text-(--color-muted) hover:text-(--color-text) transition-colors"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/>
+			</svg>
 			{m.comments_heading()}
-			{#if !loading && totalCount > 0}
-				<span class="text-(--color-muted) font-normal text-sm ml-1">({totalCount})</span>
-			{/if}
-		</h2>
-
-	<!-- Sort tabs -->
-	{#if !loading && comments.length > 0}
-		<div class="flex items-center gap-1 text-xs rounded-lg bg-(--color-surface-2)/60 p-1">
-			<Button
-				variant="ghost"
-				size="sm"
-				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'top' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
-				onclick={() => (sort = 'top')}
-			>{m.comments_top()}</Button>
-			<Button
-				variant="ghost"
-				size="sm"
-				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'new' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
-				onclick={() => (sort = 'new')}
-			>{m.comments_new()}</Button>
-		</div>
-	{/if}
-	</div>
-
-	<!-- Post form -->
-	<div class="mb-6">
-		{#if isLoggedIn}
-			<div class="flex flex-col gap-2">
-				<Textarea
-					bind:value={newBody}
-					placeholder={m.comments_placeholder()}
-					rows={3}
-				/>
-				<div class="flex items-center justify-between gap-3">
-					<span class={cn('text-xs tabular-nums', charOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
-						{charCount}/2000
-					</span>
-					<div class="flex items-center gap-3">
-						{#if postError}
-							<span class="text-xs text-(--color-danger)">{postError}</span>
-						{/if}
-						<Button
-							variant="default"
-							size="sm"
-							disabled={posting || !newBody.trim() || charOver}
-							onclick={postComment}
-						>
-							{posting ? m.comments_posting() : m.comments_submit()}
-						</Button>
-					</div>
-				</div>
-			</div>
-		{:else}
-		<p class="text-sm text-(--color-muted)">
-			<a href="/login" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.comments_login_link()}</a>
-				{m.comments_login_suffix()}
-			</p>
-		{/if}
-	</div>
-
-	<!-- Comment list -->
-	{#if loading}
-		<div class="flex flex-col gap-3">
-			{#each Array(3) as _}
-				<div class="rounded-lg bg-(--color-surface-2)/50 p-4 animate-pulse">
-					<div class="h-3 w-24 bg-(--color-surface-3) rounded mb-3"></div>
-					<div class="h-3 w-full bg-(--color-surface-3)/60 rounded mb-2"></div>
-					<div class="h-3 w-3/4 bg-(--color-surface-3)/60 rounded"></div>
-				</div>
-			{/each}
-		</div>
-	{:else if loadError}
-		<p class="text-sm text-(--color-danger)">{loadError}</p>
-	{:else if comments.length === 0}
-		<p class="text-sm text-(--color-muted)">{m.comments_empty()}</p>
+		</button>
 	{:else}
-		<div class="flex flex-col gap-3">
-			{#each comments as comment (comment.id)}
-				{@const myVote = myVotes[comment.id]}
-				{@const voting = votingIds.has(comment.id)}
-				{@const deleting = deletingIds.has(comment.id)}
-				{@const isOwner = isLoggedIn && currentUserId === comment.user_id}
+		<!-- Expanded: full comments section -->
 
-			<div class="rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/50 px-4 py-3 flex flex-col gap-2 {deleting ? 'opacity-50' : ''}">
-				<!-- Header -->
-				<div class="flex items-center gap-2 flex-wrap">
-					{#if avatarUrls[comment.user_id]}
-						<img src={avatarUrls[comment.user_id]} alt={comment.username} class="w-6 h-6 rounded-full object-cover flex-shrink-0" />
-					{:else}
-						<div class="w-6 h-6 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
-							<span class="text-[9px] font-semibold text-(--color-text) leading-none">{initials(comment.username)}</span>
-						</div>
-					{/if}
-					{#if comment.username}
-					<a href="/users/{comment.username}" class="text-sm font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{comment.username}</a>
-				{:else}
-					<span class="text-sm font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+		<!-- Header + sort controls -->
+		<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
+			<h2 class="text-base font-semibold text-(--color-text)">
+				{m.comments_heading()}
+				{#if !loading && totalCount > 0}
+					<span class="text-(--color-muted) font-normal text-sm ml-1">({totalCount})</span>
 				{/if}
-					<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
-					<span class="text-xs text-(--color-muted)">{formatDate(comment.created)}</span>
-				</div>
-
-				<!-- Body -->
-				<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
-
-				<!-- Actions row: votes + reply + delete -->
-				<div class="flex items-center gap-3 pt-1 flex-wrap">
-					<!-- Upvote -->
-				<Button
-					variant="ghost"
-					size="sm"
-					class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
-					disabled={voting}
-					onclick={() => vote(comment.id, 'up')}
-					title={m.comments_vote_up()}
-				>
-						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
-						</svg>
-						<span class="tabular-nums">{comment.upvotes ?? 0}</span>
-					</Button>
-
-					<!-- Downvote -->
-				<Button
-					variant="ghost"
-					size="sm"
-					class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
-					disabled={voting}
-					onclick={() => vote(comment.id, 'down')}
-					title={m.comments_vote_down()}
-				>
-						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
-						</svg>
-						<span class="tabular-nums">{comment.downvotes ?? 0}</span>
-					</Button>
-
-					<!-- Reply button -->
-					{#if isLoggedIn}
+			</h2>
+			{#if !loading && comments.length > 0}
+				<div class="flex items-center gap-1 text-xs rounded-lg bg-(--color-surface-2)/60 p-1">
 					<Button
 						variant="ghost"
 						size="sm"
-						class={cn('h-auto px-1 py-0 gap-1 text-xs', replyingTo === comment.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
-						onclick={() => {
-								if (replyingTo === comment.id) {
-									replyingTo = null;
-									replyBody = '';
-									replyError = '';
-								} else {
-									replyingTo = comment.id;
-									replyBody = '';
-									replyError = '';
-								}
-							}}
-						>
-							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
-							</svg>
-							{m.comments_reply()}
-						</Button>
-					{/if}
-
-					<!-- Delete (owner only) -->
-					{#if isOwner}
+						class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'top' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
+						onclick={() => (sort = 'top')}
+					>{m.comments_top()}</Button>
 					<Button
 						variant="ghost"
 						size="sm"
-						class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
-						disabled={deleting}
-						onclick={() => deleteComment(comment.id)}
-						title="Delete comment"
-					>
-							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-							</svg>
-							{m.comments_delete()}
-						</Button>
-					{/if}
+						class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'new' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
+						onclick={() => (sort = 'new')}
+					>{m.comments_new()}</Button>
 				</div>
+			{/if}
+		</div>
 
-				<!-- Inline reply form -->
-				{#if replyingTo === comment.id}
-			<div class="mt-1 flex flex-col gap-2 pl-2 border-l-2 border-(--color-border)">
+		<!-- Post form -->
+		<div class="mb-6">
+			{#if isLoggedIn}
+				<div class="flex flex-col gap-2">
 					<Textarea
-						bind:value={replyBody}
+						bind:value={newBody}
 						placeholder={m.comments_placeholder()}
-						rows={2}
+						rows={3}
 					/>
-					<div class="flex items-center justify-between gap-2">
-						<span class={cn('text-xs tabular-nums', replyCharOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
-							{replyCharCount}/2000
+					<div class="flex items-center justify-between gap-3">
+						<span class={cn('text-xs tabular-nums', charOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
+							{charCount}/2000
 						</span>
-						<div class="flex items-center gap-2">
-							{#if replyError}
-								<span class="text-xs text-(--color-danger)">{replyError}</span>
+						<div class="flex items-center gap-3">
+							{#if postError}
+								<span class="text-xs text-(--color-danger)">{postError}</span>
 							{/if}
 							<Button
-								variant="ghost"
+								variant="default"
 								size="sm"
-								class="text-(--color-muted) hover:text-(--color-text)"
-								onclick={() => { replyingTo = null; replyBody = ''; replyError = ''; }}
-							>{m.common_cancel()}</Button>
-								<Button
-									variant="default"
-									size="sm"
-									disabled={replyPosting || !replyBody.trim() || replyCharOver}
-									onclick={() => postReply(comment.id)}
-								>
-									{replyPosting ? m.comments_posting() : m.comments_reply()}
-								</Button>
-							</div>
+								disabled={posting || !newBody.trim() || charOver}
+								onclick={postComment}
+							>
+								{posting ? m.comments_posting() : m.comments_submit()}
+							</Button>
 						</div>
 					</div>
-				{/if}
+				</div>
+			{:else}
+				<p class="text-sm text-(--color-muted)">
+					<a href="/login" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.comments_login_link()}</a>
+					{m.comments_login_suffix()}
+				</p>
+			{/if}
+		</div>
 
-					<!-- Replies -->
-					{#if comment.replies && comment.replies.length > 0}
-				<div class="mt-1 flex flex-col gap-2 pl-3 border-l-2 border-(--color-border)/60">
-						{#each comment.replies as reply (reply.id)}
-							{@const replyVote = myVotes[reply.id]}
-							{@const replyVoting = votingIds.has(reply.id)}
-							{@const replyDeleting = deletingIds.has(reply.id)}
-							{@const replyIsOwner = isLoggedIn && currentUserId === reply.user_id}
+		<!-- Comment list -->
+		{#if loading}
+			<div class="flex flex-col gap-3">
+				{#each Array(3) as _}
+					<div class="rounded-lg bg-(--color-surface-2)/50 p-4 animate-pulse">
+						<div class="h-3 w-24 bg-(--color-surface-3) rounded mb-3"></div>
+						<div class="h-3 w-full bg-(--color-surface-3)/60 rounded mb-2"></div>
+						<div class="h-3 w-3/4 bg-(--color-surface-3)/60 rounded"></div>
+					</div>
+				{/each}
+			</div>
+		{:else if loadError}
+			<p class="text-sm text-(--color-danger)">{loadError}</p>
+		{:else}
+			<div class="flex flex-col gap-3">
+				{#each comments as comment (comment.id)}
+					{@const myVote = myVotes[comment.id]}
+					{@const voting = votingIds.has(comment.id)}
+					{@const deleting = deletingIds.has(comment.id)}
+					{@const isOwner = isLoggedIn && currentUserId === comment.user_id}
 
-							<div class="rounded-md bg-(--color-surface-2)/30 px-3 py-2.5 flex flex-col gap-1.5 {replyDeleting ? 'opacity-50' : ''}">
-								<!-- Reply header -->
-								<div class="flex items-center gap-2 flex-wrap">
-									{#if avatarUrls[reply.user_id]}
-										<img src={avatarUrls[reply.user_id]} alt={reply.username} class="w-5 h-5 rounded-full object-cover flex-shrink-0" />
-									{:else}
-										<div class="w-5 h-5 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
-											<span class="text-[8px] font-semibold text-(--color-text) leading-none">{initials(reply.username)}</span>
-										</div>
-									{/if}
-									{#if reply.username}
-									<a href="/users/{reply.username}" class="text-xs font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{reply.username}</a>
-								{:else}
-									<span class="text-xs font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
-								{/if}
-									<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
-									<span class="text-xs text-(--color-muted)">{formatDate(reply.created)}</span>
+					<div class={cn('rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/50 px-4 py-3 flex flex-col gap-2', deleting && 'opacity-50')}>
+						<!-- Header -->
+						<div class="flex items-center gap-2 flex-wrap">
+							{#if avatarUrls[comment.user_id]}
+								<img src={avatarUrls[comment.user_id]} alt={comment.username} class="w-6 h-6 rounded-full object-cover flex-shrink-0" />
+							{:else}
+								<div class="w-6 h-6 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
+									<span class="text-[9px] font-semibold text-(--color-text) leading-none">{initials(comment.username)}</span>
 								</div>
+							{/if}
+							{#if comment.username}
+								<a href="/users/{comment.username}" class="text-sm font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{comment.username}</a>
+							{:else}
+								<span class="text-sm font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+							{/if}
+							<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
+							<span class="text-xs text-(--color-muted)">{formatDate(comment.created)}</span>
+						</div>
 
-								<!-- Reply body -->
-								<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{reply.body}</p>
+						<!-- Body -->
+						<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
 
-								<!-- Reply actions -->
-								<div class="flex items-center gap-3 pt-0.5">
+						<!-- Actions row: votes + reply + delete -->
+						<div class="flex items-center gap-3 pt-1 flex-wrap">
 							<Button
 								variant="ghost"
 								size="sm"
-								class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
-								disabled={replyVoting}
-								onclick={() => vote(reply.id, 'up', comment.id)}
+								class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+								disabled={voting}
+								onclick={() => vote(comment.id, 'up')}
 								title={m.comments_vote_up()}
 							>
-										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
-										</svg>
-										<span class="tabular-nums">{reply.upvotes ?? 0}</span>
-									</Button>
+								<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
+								</svg>
+								<span class="tabular-nums">{comment.upvotes ?? 0}</span>
+							</Button>
 
 							<Button
 								variant="ghost"
 								size="sm"
-								class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
-								disabled={replyVoting}
-								onclick={() => vote(reply.id, 'down', comment.id)}
+								class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
+								disabled={voting}
+								onclick={() => vote(comment.id, 'down')}
 								title={m.comments_vote_down()}
 							>
-										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
-										</svg>
-										<span class="tabular-nums">{reply.downvotes ?? 0}</span>
-									</Button>
+								<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
+								</svg>
+								<span class="tabular-nums">{comment.downvotes ?? 0}</span>
+							</Button>
 
-									{#if replyIsOwner}
+							{#if isLoggedIn}
 								<Button
-										variant="ghost"
-										size="sm"
-										class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
-								disabled={replyDeleting}
-									onclick={() => deleteComment(reply.id, comment.id)}
-									title="Delete reply"
+									variant="ghost"
+									size="sm"
+									class={cn('h-auto px-1 py-0 gap-1 text-xs', replyingTo === comment.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+									onclick={() => {
+										if (replyingTo === comment.id) {
+											replyingTo = null; replyBody = ''; replyError = '';
+										} else {
+											replyingTo = comment.id; replyBody = ''; replyError = '';
+										}
+									}}
 								>
-										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-										</svg>
-										{m.comments_delete()}
-									</Button>
-									{/if}
-								</div>
-								</div>
-							{/each}
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+									</svg>
+									{m.comments_reply()}
+								</Button>
+							{/if}
+
+							{#if isOwner}
+								<Button
+									variant="ghost"
+									size="sm"
+									class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
+									disabled={deleting}
+									onclick={() => deleteComment(comment.id)}
+									title="Delete comment"
+								>
+									<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+									</svg>
+									{m.comments_delete()}
+								</Button>
+							{/if}
 						</div>
-					{/if}
-				</div>
-			{/each}
-		</div>
+
+						<!-- Inline reply form -->
+						{#if replyingTo === comment.id}
+							<div class="mt-1 flex flex-col gap-2 pl-2 border-l-2 border-(--color-border)">
+								<Textarea
+									bind:value={replyBody}
+									placeholder={m.comments_placeholder()}
+									rows={2}
+								/>
+								<div class="flex items-center justify-between gap-2">
+									<span class={cn('text-xs tabular-nums', replyCharOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
+										{replyCharCount}/2000
+									</span>
+									<div class="flex items-center gap-2">
+										{#if replyError}
+											<span class="text-xs text-(--color-danger)">{replyError}</span>
+										{/if}
+										<Button
+											variant="ghost"
+											size="sm"
+											class="text-(--color-muted) hover:text-(--color-text)"
+											onclick={() => { replyingTo = null; replyBody = ''; replyError = ''; }}
+										>{m.common_cancel()}</Button>
+										<Button
+											variant="default"
+											size="sm"
+											disabled={replyPosting || !replyBody.trim() || replyCharOver}
+											onclick={() => postReply(comment.id)}
+										>
+											{replyPosting ? m.comments_posting() : m.comments_reply()}
+										</Button>
+									</div>
+								</div>
+							</div>
+						{/if}
+
+						<!-- Replies -->
+						{#if comment.replies && comment.replies.length > 0}
+							<div class="mt-1 flex flex-col gap-2 pl-3 border-l-2 border-(--color-border)/60">
+								{#each comment.replies as reply (reply.id)}
+									{@const replyVote = myVotes[reply.id]}
+									{@const replyVoting = votingIds.has(reply.id)}
+									{@const replyDeleting = deletingIds.has(reply.id)}
+									{@const replyIsOwner = isLoggedIn && currentUserId === reply.user_id}
+
+									<div class={cn('rounded-md bg-(--color-surface-2)/30 px-3 py-2.5 flex flex-col gap-1.5', replyDeleting && 'opacity-50')}>
+										<div class="flex items-center gap-2 flex-wrap">
+											{#if avatarUrls[reply.user_id]}
+												<img src={avatarUrls[reply.user_id]} alt={reply.username} class="w-5 h-5 rounded-full object-cover flex-shrink-0" />
+											{:else}
+												<div class="w-5 h-5 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
+													<span class="text-[8px] font-semibold text-(--color-text) leading-none">{initials(reply.username)}</span>
+												</div>
+											{/if}
+											{#if reply.username}
+												<a href="/users/{reply.username}" class="text-xs font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{reply.username}</a>
+											{:else}
+												<span class="text-xs font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+											{/if}
+											<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
+											<span class="text-xs text-(--color-muted)">{formatDate(reply.created)}</span>
+										</div>
+
+										<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{reply.body}</p>
+
+										<div class="flex items-center gap-3 pt-0.5">
+											<Button
+												variant="ghost"
+												size="sm"
+												class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+												disabled={replyVoting}
+												onclick={() => vote(reply.id, 'up', comment.id)}
+												title={m.comments_vote_up()}
+											>
+												<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+													<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
+												</svg>
+												<span class="tabular-nums">{reply.upvotes ?? 0}</span>
+											</Button>
+
+											<Button
+												variant="ghost"
+												size="sm"
+												class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
+												disabled={replyVoting}
+												onclick={() => vote(reply.id, 'down', comment.id)}
+												title={m.comments_vote_down()}
+											>
+												<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+													<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
+												</svg>
+												<span class="tabular-nums">{reply.downvotes ?? 0}</span>
+											</Button>
+
+											{#if replyIsOwner}
+												<Button
+													variant="ghost"
+													size="sm"
+													class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
+													disabled={replyDeleting}
+													onclick={() => deleteComment(reply.id, comment.id)}
+													title="Delete reply"
+												>
+													<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+														<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+													</svg>
+													{m.comments_delete()}
+												</Button>
+											{/if}
+										</div>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
 	{/if}
 </div>

ui/src/lib/components/ListeningMode.svelte

@@ -0,0 +1,559 @@
+<script lang="ts">
+	import { audioStore } from '$lib/audio.svelte';
+	import { cn } from '$lib/utils';
+	import { goto } from '$app/navigation';
+	import type { Voice } from '$lib/types';
+
+	interface Props {
+		/** Called when the user closes the overlay. */
+		onclose: () => void;
+	}
+
+	let { onclose }: Props = $props();
+
+	// Voices come from the store (populated by AudioPlayer on mount/play)
+	const voices = $derived(audioStore.voices);
+	const kokoroVoices = $derived(voices.filter((v) => v.engine === 'kokoro'));
+	const pocketVoices = $derived(voices.filter((v) => v.engine === 'pocket-tts'));
+	const cfaiVoices   = $derived(voices.filter((v) => v.engine === 'cfai'));
+
+	let showVoiceModal = $state(false);
+	let voiceSearch = $state('');
+	let samplePlayingVoice = $state<string | null>(null);
+	let sampleAudio: HTMLAudioElement | null = null;
+
+	// ── Voice search filtering ────────────────────────────────────────────────
+	const voiceSearchLower = $derived(voiceSearch.toLowerCase());
+	const filteredKokoro = $derived(kokoroVoices.filter((v) => voiceLabel(v).toLowerCase().includes(voiceSearchLower)));
+	const filteredPocket = $derived(pocketVoices.filter((v) => voiceLabel(v).toLowerCase().includes(voiceSearchLower)));
+	const filteredCfai   = $derived(cfaiVoices.filter((v) => voiceLabel(v).toLowerCase().includes(voiceSearchLower)));
+
+	// ── Chapter search ────────────────────────────────────────────────────────
+	let chapterSearch = $state('');
+	const filteredChapters = $derived(
+		chapterSearch.trim() === ''
+			? audioStore.chapters
+			: audioStore.chapters.filter((ch) =>
+					(ch.title || `Chapter ${ch.number}`)
+						.toLowerCase()
+						.includes(chapterSearch.toLowerCase()) ||
+					String(ch.number).includes(chapterSearch)
+			  )
+	);
+
+	function voiceLabel(v: Voice | string): string {
+		if (typeof v === 'string') {
+			const found = voices.find((x) => x.id === v);
+			if (found) return voiceLabel(found);
+			const id = v as string;
+			return id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+		}
+		const base = v.id.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+		return v.lang !== 'en-us' ? `${base} (${v.lang})` : base;
+	}
+
+	function stopSample() {
+		if (sampleAudio) {
+			sampleAudio.pause();
+			sampleAudio.src = '';
+			sampleAudio = null;
+		}
+		samplePlayingVoice = null;
+	}
+
+	async function playSample(voiceId: string) {
+		if (samplePlayingVoice === voiceId) { stopSample(); return; }
+		stopSample();
+		samplePlayingVoice = voiceId;
+		try {
+			const res = await fetch(`/api/presign/voice-sample?voice=${encodeURIComponent(voiceId)}`);
+			if (!res.ok) { samplePlayingVoice = null; return; }
+			const { url } = (await res.json()) as { url: string };
+			sampleAudio = new Audio(url);
+			sampleAudio.onended = () => stopSample();
+			sampleAudio.onerror = () => stopSample();
+			sampleAudio.play().catch(() => stopSample());
+		} catch {
+			samplePlayingVoice = null;
+		}
+	}
+
+	function selectVoice(voiceId: string) {
+		stopSample();
+		audioStore.voice = voiceId;
+		showVoiceModal = false;
+		voiceSearch = '';
+	}
+
+	// ── Chapter click-to-play ─────────────────────────────────────────────────
+	function playChapter(chapterNumber: number) {
+		audioStore.autoStartChapter = chapterNumber;
+		onclose();
+		goto(`/books/${audioStore.slug}/chapters/${chapterNumber}`);
+	}
+
+	// ── Speed ────────────────────────────────────────────────────────────────
+	const SPEED_OPTIONS = [0.75, 1, 1.25, 1.5, 2] as const;
+
+	// ── Sleep timer ──────────────────────────────────────────────────────────
+	const SLEEP_OPTIONS = [15, 30, 45, 60]; // minutes
+
+	let sleepRemainingSec = $derived.by(() => {
+		void audioStore.currentTime; // re-run every second while playing
+		if (!audioStore.sleepUntil) return 0;
+		return Math.max(0, Math.floor((audioStore.sleepUntil - Date.now()) / 1000));
+	});
+
+	function cycleSleepTimer() {
+		if (!audioStore.sleepUntil && !audioStore.sleepAfterChapter) {
+			audioStore.sleepAfterChapter = true;
+		} else if (audioStore.sleepAfterChapter) {
+			audioStore.sleepAfterChapter = false;
+			audioStore.sleepUntil = Date.now() + SLEEP_OPTIONS[0] * 60 * 1000;
+		} else {
+			const remaining = audioStore.sleepUntil - Date.now();
+			const currentMin = Math.round(remaining / 60000);
+			const idx = SLEEP_OPTIONS.findIndex((m) => m >= currentMin);
+			if (idx === -1 || idx === SLEEP_OPTIONS.length - 1) {
+				audioStore.sleepUntil = 0;
+			} else {
+				audioStore.sleepUntil = Date.now() + SLEEP_OPTIONS[idx + 1] * 60 * 1000;
+			}
+		}
+	}
+
+	function formatSleepRemaining(secs: number): string {
+		if (secs <= 0) return 'Off';
+		const m = Math.floor(secs / 60);
+		const s = secs % 60;
+		return m > 0 ? `${m}m${s > 0 ? ` ${s}s` : ''}` : `${s}s`;
+	}
+
+	const sleepLabel = $derived(
+		audioStore.sleepAfterChapter
+			? 'End Ch.'
+			: audioStore.sleepUntil > Date.now()
+				? formatSleepRemaining(sleepRemainingSec)
+				: 'Sleep'
+	);
+
+	// ── Format time ──────────────────────────────────────────────────────────
+	function formatTime(s: number): string {
+		if (!isFinite(s) || s < 0) return '0:00';
+		const m = Math.floor(s / 60);
+		const sec = Math.floor(s % 60);
+		return `${m}:${sec.toString().padStart(2, '0')}`;
+	}
+
+	// ── Playback controls ────────────────────────────────────────────────────
+	function seek(e: Event) {
+		audioStore.seekRequest = Number((e.currentTarget as HTMLInputElement).value);
+	}
+	function skipBack() {
+		audioStore.seekRequest = Math.max(0, audioStore.currentTime - 15);
+	}
+	function skipForward() {
+		audioStore.seekRequest = Math.min(audioStore.duration || 0, audioStore.currentTime + 30);
+	}
+	function togglePlay() {
+		audioStore.toggleRequest++;
+	}
+
+	// Close on Escape
+	$effect(() => {
+		function onKey(e: KeyboardEvent) {
+			if (e.key === 'Escape') {
+				if (showVoiceModal) { showVoiceModal = false; voiceSearch = ''; }
+				else { onclose(); }
+			}
+		}
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	});
+</script>
+
+<!-- Full-screen listening mode overlay -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0 z-60 flex flex-col overflow-hidden"
+	style="background: var(--color-surface);"
+>
+	<!-- Blurred cover background -->
+	{#if audioStore.cover}
+		<div
+			class="absolute inset-0 bg-cover bg-center opacity-10 blur-2xl scale-110"
+			style="background-image: url('{audioStore.cover}');"
+			aria-hidden="true"
+		></div>
+	{/if}
+
+	<!-- Header bar -->
+	<div class="relative flex items-center justify-between px-4 py-3 shrink-0">
+		<button
+			type="button"
+			onclick={onclose}
+			class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+			aria-label="Close listening mode"
+		>
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+			</svg>
+		</button>
+		<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Now Playing</span>
+		<!-- Voice selector button -->
+		<button
+			type="button"
+			onclick={() => (showVoiceModal = !showVoiceModal)}
+			class={cn(
+				'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
+				showVoiceModal
+					? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+					: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+			)}
+		>
+			<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="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
+			</svg>
+			<span class="max-w-[80px] truncate">{voiceLabel(audioStore.voice)}</span>
+		</button>
+	</div>
+
+	<!-- Voice modal (full-screen overlay) -->
+	{#if showVoiceModal && voices.length > 0}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 z-70 flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<!-- Modal header -->
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+				<button
+					type="button"
+					onclick={() => { stopSample(); showVoiceModal = false; voiceSearch = ''; }}
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					aria-label="Close voice picker"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+					</svg>
+				</button>
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Select Voice</span>
+			</div>
+
+			<!-- Search input -->
+			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+				<div class="relative">
+					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+					</svg>
+					<input
+						type="search"
+						placeholder="Search voices…"
+						bind:value={voiceSearch}
+						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+					/>
+				</div>
+			</div>
+
+			<!-- Voice list -->
+			<div class="flex-1 overflow-y-auto">
+				{#each ([['Kokoro', filteredKokoro], ['Pocket TTS', filteredPocket], ['CF AI', filteredCfai]] as [string, Voice[]][]) as [label, group]}
+					{#if group.length > 0}
+						<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider px-4 py-2 sticky top-0 bg-(--color-surface) border-b border-(--color-border)/50">{label}</p>
+						{#each group as v (v.id)}
+							<div
+								class={cn(
+									'flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors',
+									audioStore.voice === v.id
+										? 'bg-(--color-brand)/8'
+										: 'hover:bg-(--color-surface-2)'
+								)}
+							>
+								<!-- Select voice -->
+								<button
+									type="button"
+									onclick={() => selectVoice(v.id)}
+									class="flex-1 flex items-center gap-3 text-left"
+								>
+									<!-- Selected indicator -->
+									<span class={cn(
+										'w-4 h-4 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors',
+										audioStore.voice === v.id
+											? 'border-(--color-brand) bg-(--color-brand)'
+											: 'border-(--color-border)'
+									)}>
+										{#if audioStore.voice === v.id}
+											<svg class="w-2 h-2 text-(--color-surface)" fill="currentColor" viewBox="0 0 24 24">
+												<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+											</svg>
+										{/if}
+									</span>
+									<span class={cn(
+										'text-sm',
+										audioStore.voice === v.id ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)'
+									)}>{voiceLabel(v)}</span>
+								</button>
+								<!-- Sample play button -->
+								<button
+									type="button"
+									onclick={() => playSample(v.id)}
+									class={cn(
+										'shrink-0 p-2 rounded-full transition-colors',
+										samplePlayingVoice === v.id
+											? 'text-(--color-brand) bg-(--color-brand)/10'
+											: 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)'
+									)}
+									title={samplePlayingVoice === v.id ? 'Stop sample' : 'Play sample'}
+									aria-label={samplePlayingVoice === v.id ? 'Stop sample' : 'Play sample'}
+								>
+									{#if samplePlayingVoice === v.id}
+										<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+									{:else}
+										<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+									{/if}
+								</button>
+							</div>
+						{/each}
+					{/if}
+				{/each}
+				{#if filteredKokoro.length === 0 && filteredPocket.length === 0 && filteredCfai.length === 0}
+					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No voices match "{voiceSearch}"</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Scrollable body -->
+	<div class="relative flex-1 overflow-y-auto flex flex-col">
+
+		<!-- Cover art + track info -->
+		<div class="flex flex-col items-center px-8 pt-4 pb-6 shrink-0">
+			{#if audioStore.cover}
+				<img
+					src={audioStore.cover}
+					alt=""
+					class="w-40 h-56 object-cover rounded-xl shadow-2xl mb-5"
+				/>
+			{:else}
+				<div class="w-40 h-56 flex items-center justify-center bg-(--color-surface-2) rounded-xl shadow-2xl mb-5 border border-(--color-border)">
+					<svg class="w-16 h-16 text-(--color-muted)/40" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V6h8v2z"/>
+					</svg>
+				</div>
+			{/if}
+
+			<p class="text-base font-bold text-(--color-text) text-center leading-snug">
+				{audioStore.chapterTitle || (audioStore.chapter > 0 ? `Chapter ${audioStore.chapter}` : '')}
+			</p>
+			<p class="text-sm text-(--color-muted) text-center mt-0.5 truncate max-w-full">{audioStore.bookTitle}</p>
+		</div>
+
+		<!-- Seek bar -->
+		<div class="px-6 shrink-0">
+			<input
+				type="range"
+				aria-label="Seek"
+				min="0"
+				max={audioStore.duration || 0}
+				value={audioStore.currentTime}
+				oninput={seek}
+				class="w-full h-1.5 accent-[--color-brand] cursor-pointer block"
+				style="accent-color: var(--color-brand);"
+			/>
+			<div class="flex justify-between text-xs text-(--color-muted) tabular-nums mt-1">
+				<span>{formatTime(audioStore.currentTime)}</span>
+				<span>{formatTime(audioStore.duration)}</span>
+			</div>
+		</div>
+
+		<!-- Transport controls -->
+		<div class="flex items-center justify-center gap-4 px-6 pt-5 pb-2 shrink-0">
+			<!-- Prev chapter -->
+			{#if audioStore.chapter > 1 && audioStore.slug}
+				<a
+					href="/books/{audioStore.slug}/chapters/{audioStore.chapter - 1}"
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					title="Previous chapter"
+					aria-label="Previous chapter"
+				>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+					</svg>
+				</a>
+			{:else}
+				<div class="w-9 h-9"></div>
+			{/if}
+
+			<!-- Skip back 15s -->
+			<button
+				type="button"
+				onclick={skipBack}
+				class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+				aria-label="Skip back 15 seconds"
+				title="Back 15s"
+			>
+				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
+					<text x="8.5" y="14.5" font-size="5" font-family="sans-serif" font-weight="bold" fill="currentColor">15</text>
+				</svg>
+			</button>
+
+			<!-- Play / Pause -->
+			<button
+				type="button"
+				onclick={togglePlay}
+				class="w-16 h-16 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) transition-colors shadow-lg"
+				aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
+			>
+				{#if audioStore.isPlaying}
+					<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+					</svg>
+				{:else}
+					<svg class="w-7 h-7 ml-1" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M8 5v14l11-7z"/>
+					</svg>
+				{/if}
+			</button>
+
+			<!-- Skip forward 30s -->
+			<button
+				type="button"
+				onclick={skipForward}
+				class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+				aria-label="Skip forward 30 seconds"
+				title="Forward 30s"
+			>
+				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/>
+					<text x="8.5" y="14.5" font-size="5" font-family="sans-serif" font-weight="bold" fill="currentColor">30</text>
+				</svg>
+			</button>
+
+			<!-- Next chapter -->
+			{#if audioStore.nextChapter !== null && audioStore.slug}
+				<a
+					href="/books/{audioStore.slug}/chapters/{audioStore.nextChapter}"
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					title="Next chapter"
+					aria-label="Next chapter"
+				>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
+					</svg>
+				</a>
+			{:else}
+				<div class="w-9 h-9"></div>
+			{/if}
+		</div>
+
+		<!-- Secondary controls: Speed · Auto-next · Sleep -->
+		<div class="flex items-center justify-center gap-3 px-6 py-3 shrink-0">
+			<!-- Speed -->
+			<div class="flex items-center gap-1 bg-(--color-surface-2) rounded-full px-2 py-1 border border-(--color-border)">
+				{#each SPEED_OPTIONS as s}
+					<button
+						type="button"
+						onclick={() => (audioStore.speed = s)}
+						class={cn(
+							'px-2 py-0.5 rounded-full text-xs font-semibold transition-colors',
+							audioStore.speed === s
+								? 'bg-(--color-brand) text-(--color-surface)'
+								: 'text-(--color-muted) hover:text-(--color-text)'
+						)}
+						aria-pressed={audioStore.speed === s}
+					>{s}×</button>
+				{/each}
+			</div>
+
+			<!-- Auto-next -->
+			<button
+				type="button"
+				onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
+				class={cn(
+					'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors',
+					audioStore.autoNext
+						? 'border-(--color-brand) bg-(--color-brand)/15 text-(--color-brand)'
+						: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+				)}
+				aria-pressed={audioStore.autoNext}
+				title={audioStore.autoNext ? 'Auto-next on' : 'Auto-next off'}
+			>
+				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+					<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
+				</svg>
+				Auto
+				{#if audioStore.autoNext && audioStore.nextStatus === 'prefetching'}
+					<span class="w-1.5 h-1.5 rounded-full bg-(--color-brand) animate-pulse"></span>
+				{:else if audioStore.autoNext && audioStore.nextStatus === 'prefetched'}
+					<span class="w-1.5 h-1.5 rounded-full bg-green-400"></span>
+				{/if}
+			</button>
+
+			<!-- Sleep timer -->
+			<button
+				type="button"
+				onclick={cycleSleepTimer}
+				class={cn(
+					'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors',
+					audioStore.sleepUntil || audioStore.sleepAfterChapter
+						? 'border-(--color-brand) bg-(--color-brand)/15 text-(--color-brand)'
+						: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+				)}
+				title="Sleep timer"
+			>
+				<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>
+				{sleepLabel}
+			</button>
+		</div>
+
+		<!-- Chapter list -->
+		{#if audioStore.chapters.length > 0}
+			<div class="mx-4 mb-6 bg-(--color-surface-2) rounded-xl border border-(--color-border) overflow-hidden shrink-0">
+				<!-- Header + search -->
+				<div class="flex items-center gap-2 px-3 py-2 border-b border-(--color-border)">
+					<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider shrink-0">Chapters</p>
+					{#if audioStore.chapters.length > 6}
+						<div class="relative flex-1">
+							<svg class="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+							</svg>
+							<input
+								type="search"
+								placeholder="Search…"
+								bind:value={chapterSearch}
+								class="w-full pl-6 pr-2 py-0.5 text-xs bg-(--color-surface-3) border border-(--color-border) rounded-md text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+							/>
+						</div>
+					{/if}
+				</div>
+				<div class="overflow-y-auto max-h-64">
+					{#each filteredChapters as ch (ch.number)}
+						<button
+							type="button"
+							onclick={() => playChapter(ch.number)}
+							class={cn(
+								'w-full flex items-center gap-3 px-4 py-2.5 text-xs transition-colors hover:bg-(--color-surface-3) text-left',
+								ch.number === audioStore.chapter ? 'text-(--color-brand) font-semibold bg-(--color-brand)/5' : 'text-(--color-muted)'
+							)}
+						>
+							<span class="tabular-nums w-7 shrink-0 text-right opacity-50">{ch.number}</span>
+							<span class="flex-1 truncate">{ch.title || `Chapter ${ch.number}`}</span>
+							{#if ch.number === audioStore.chapter}
+								<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+									<path d="M8 5v14l11-7z"/>
+								</svg>
+							{/if}
+						</button>
+					{/each}
+					{#if filteredChapters.length === 0}
+						<p class="px-4 py-4 text-xs text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+	</div>
+</div>

ui/src/lib/components/ui/dialog/Dialog.svelte

@@ -18,6 +18,13 @@
 		}
 	}
 
+	function handleBackdropKeyDown(e: KeyboardEvent) {
+		if ((e.key === 'Enter' || e.key === ' ') && e.target === e.currentTarget) {
+			open = false;
+			onclose?.();
+		}
+	}
+
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			open = false;
@@ -34,7 +41,9 @@
 		class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
 		role="dialog"
 		aria-modal="true"
+		tabindex="-1"
 		onclick={handleBackdropClick}
+		onkeydown={handleBackdropKeyDown}
 	>
 		<div class={cn('bg-(--color-surface) rounded-2xl border border-(--color-border) shadow-2xl w-full max-w-sm', className)}>
 			{@render children?.()}

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

@@ -279,6 +279,24 @@ export * from './book_detail_to_chapter.js'
 export * from './book_detail_range_queuing.js'
 export * from './book_detail_scrape_range.js'
 export * from './book_detail_admin.js'
+export * from './book_detail_admin_book_cover.js'
+export * from './book_detail_admin_chapter_cover.js'
+export * from './book_detail_admin_chapter_n.js'
+export * from './book_detail_admin_description.js'
+export * from './book_detail_admin_chapter_names.js'
+export * from './book_detail_admin_audio_tts.js'
+export * from './book_detail_admin_voice.js'
+export * from './book_detail_admin_generate.js'
+export * from './book_detail_admin_save_cover.js'
+export * from './book_detail_admin_saving.js'
+export * from './book_detail_admin_saved.js'
+export * from './book_detail_admin_apply.js'
+export * from './book_detail_admin_applying.js'
+export * from './book_detail_admin_applied.js'
+export * from './book_detail_admin_discard.js'
+export * from './book_detail_admin_enqueue_audio.js'
+export * from './book_detail_admin_cancel_audio.js'
+export * from './book_detail_admin_enqueued.js'
 export * from './book_detail_scraping_progress.js'
 export * from './book_detail_scraping_home.js'
 export * from './book_detail_rescrape_book.js'
@@ -321,6 +339,26 @@ export * from './profile_upgrade_desc.js'
 export * from './profile_upgrade_monthly.js'
 export * from './profile_upgrade_annual.js'
 export * from './profile_free_limits.js'
+export * from './subscribe_page_title.js'
+export * from './subscribe_heading.js'
+export * from './subscribe_subheading.js'
+export * from './subscribe_monthly_label.js'
+export * from './subscribe_monthly_price.js'
+export * from './subscribe_monthly_period.js'
+export * from './subscribe_annual_label.js'
+export * from './subscribe_annual_price.js'
+export * from './subscribe_annual_period.js'
+export * from './subscribe_annual_save.js'
+export * from './subscribe_cta_monthly.js'
+export * from './subscribe_cta_annual.js'
+export * from './subscribe_already_pro.js'
+export * from './subscribe_manage.js'
+export * from './subscribe_benefit_audio.js'
+export * from './subscribe_benefit_voices.js'
+export * from './subscribe_benefit_translation.js'
+export * from './subscribe_benefit_downloads.js'
+export * from './subscribe_login_prompt.js'
+export * from './subscribe_login_cta.js'
 export * from './user_currently_reading.js'
 export * from './user_library_count.js'
 export * from './user_joined.js'
@@ -334,6 +372,9 @@ export * from './admin_nav_audio.js'
 export * from './admin_nav_translation.js'
 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'
@@ -341,6 +382,7 @@ export * from './admin_nav_logs.js'
 export * from './admin_nav_uptime.js'
 export * from './admin_nav_push.js'
 export * from './admin_nav_gitea.js'
+export * from './admin_nav_grafana.js'
 export * from './admin_scrape_status_idle.js'
 export * from './admin_scrape_full_catalogue.js'
 export * from './admin_scrape_single_book.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/paraglide/messages/admin_nav_catalogue_tools.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Admin_Nav_Catalogue_ToolsInputs */
+
+const en_admin_nav_catalogue_tools = /** @type {(inputs: Admin_Nav_Catalogue_ToolsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Catalogue Tools`)
+};
+
+const ru_admin_nav_catalogue_tools = /** @type {(inputs: Admin_Nav_Catalogue_ToolsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Catalogue Tools`)
+};
+
+const id_admin_nav_catalogue_tools = /** @type {(inputs: Admin_Nav_Catalogue_ToolsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Catalogue Tools`)
+};
+
+const pt_admin_nav_catalogue_tools = /** @type {(inputs: Admin_Nav_Catalogue_ToolsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Catalogue Tools`)
+};
+
+const fr_admin_nav_catalogue_tools = /** @type {(inputs: Admin_Nav_Catalogue_ToolsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Catalogue Tools`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Catalogue Tools" |
+*
+* @param {Admin_Nav_Catalogue_ToolsInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const admin_nav_catalogue_tools = /** @type {((inputs?: Admin_Nav_Catalogue_ToolsInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Admin_Nav_Catalogue_ToolsInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_admin_nav_catalogue_tools(inputs)
+	if (locale === "ru") return ru_admin_nav_catalogue_tools(inputs)
+	if (locale === "id") return id_admin_nav_catalogue_tools(inputs)
+	if (locale === "pt") return pt_admin_nav_catalogue_tools(inputs)
+	return fr_admin_nav_catalogue_tools(inputs)
+});

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

@@ -9,21 +9,17 @@ const en_admin_nav_feedback = /** @type {(inputs: Admin_Nav_FeedbackInputs) => L
 	return /** @type {LocalizedString} */ (`Feedback`)
 };
 
-const ru_admin_nav_feedback = /** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */ () => {
-	return /** @type {LocalizedString} */ (`Отзывы`)
-};
+/** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */
+const ru_admin_nav_feedback = en_admin_nav_feedback;
 
-const id_admin_nav_feedback = /** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */ () => {
-	return /** @type {LocalizedString} */ (`Masukan`)
-};
+/** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */
+const id_admin_nav_feedback = en_admin_nav_feedback;
 
-const pt_admin_nav_feedback = /** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */ () => {
-	return /** @type {LocalizedString} */ (`Feedback`)
-};
+/** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */
+const pt_admin_nav_feedback = en_admin_nav_feedback;
 
-const fr_admin_nav_feedback = /** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */ () => {
-	return /** @type {LocalizedString} */ (`Retours`)
-};
+/** @type {(inputs: Admin_Nav_FeedbackInputs) => LocalizedString} */
+const fr_admin_nav_feedback = en_admin_nav_feedback;
 
 /**
 * | output |

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Admin_Nav_GrafanaInputs */
+
+const en_admin_nav_grafana = /** @type {(inputs: Admin_Nav_GrafanaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Grafana`)
+};
+
+const ru_admin_nav_grafana = /** @type {(inputs: Admin_Nav_GrafanaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Grafana`)
+};
+
+const id_admin_nav_grafana = /** @type {(inputs: Admin_Nav_GrafanaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Grafana`)
+};
+
+const pt_admin_nav_grafana = /** @type {(inputs: Admin_Nav_GrafanaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Grafana`)
+};
+
+const fr_admin_nav_grafana = /** @type {(inputs: Admin_Nav_GrafanaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Grafana`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Grafana" |
+*
+* @param {Admin_Nav_GrafanaInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const admin_nav_grafana = /** @type {((inputs?: Admin_Nav_GrafanaInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Admin_Nav_GrafanaInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_admin_nav_grafana(inputs)
+	if (locale === "ru") return ru_admin_nav_grafana(inputs)
+	if (locale === "id") return id_admin_nav_grafana(inputs)
+	if (locale === "pt") return pt_admin_nav_grafana(inputs)
+	return fr_admin_nav_grafana(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Admin_Nav_Text_GenInputs */
+
+const en_admin_nav_text_gen = /** @type {(inputs: Admin_Nav_Text_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Text Gen`)
+};
+
+const ru_admin_nav_text_gen = /** @type {(inputs: Admin_Nav_Text_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Text Gen`)
+};
+
+const id_admin_nav_text_gen = /** @type {(inputs: Admin_Nav_Text_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Text Gen`)
+};
+
+const pt_admin_nav_text_gen = /** @type {(inputs: Admin_Nav_Text_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Text Gen`)
+};
+
+const fr_admin_nav_text_gen = /** @type {(inputs: Admin_Nav_Text_GenInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Text Gen`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Text Gen" |
+*
+* @param {Admin_Nav_Text_GenInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const admin_nav_text_gen = /** @type {((inputs?: Admin_Nav_Text_GenInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Admin_Nav_Text_GenInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_admin_nav_text_gen(inputs)
+	if (locale === "ru") return ru_admin_nav_text_gen(inputs)
+	if (locale === "id") return id_admin_nav_text_gen(inputs)
+	if (locale === "pt") return pt_admin_nav_text_gen(inputs)
+	return fr_admin_nav_text_gen(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_AppliedInputs */
+
+const en_book_detail_admin_applied = /** @type {(inputs: Book_Detail_Admin_AppliedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Applied`)
+};
+
+const ru_book_detail_admin_applied = /** @type {(inputs: Book_Detail_Admin_AppliedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Применено`)
+};
+
+const id_book_detail_admin_applied = /** @type {(inputs: Book_Detail_Admin_AppliedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Diterapkan`)
+};
+
+const pt_book_detail_admin_applied = /** @type {(inputs: Book_Detail_Admin_AppliedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Aplicado`)
+};
+
+const fr_book_detail_admin_applied = /** @type {(inputs: Book_Detail_Admin_AppliedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Appliqué`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Applied" |
+*
+* @param {Book_Detail_Admin_AppliedInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_applied = /** @type {((inputs?: Book_Detail_Admin_AppliedInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_AppliedInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_applied(inputs)
+	if (locale === "ru") return ru_book_detail_admin_applied(inputs)
+	if (locale === "id") return id_book_detail_admin_applied(inputs)
+	if (locale === "pt") return pt_book_detail_admin_applied(inputs)
+	return fr_book_detail_admin_applied(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_ApplyInputs */
+
+const en_book_detail_admin_apply = /** @type {(inputs: Book_Detail_Admin_ApplyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Apply`)
+};
+
+const ru_book_detail_admin_apply = /** @type {(inputs: Book_Detail_Admin_ApplyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Применить`)
+};
+
+const id_book_detail_admin_apply = /** @type {(inputs: Book_Detail_Admin_ApplyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Terapkan`)
+};
+
+const pt_book_detail_admin_apply = /** @type {(inputs: Book_Detail_Admin_ApplyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Aplicar`)
+};
+
+const fr_book_detail_admin_apply = /** @type {(inputs: Book_Detail_Admin_ApplyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Appliquer`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Apply" |
+*
+* @param {Book_Detail_Admin_ApplyInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_apply = /** @type {((inputs?: Book_Detail_Admin_ApplyInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_ApplyInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_apply(inputs)
+	if (locale === "ru") return ru_book_detail_admin_apply(inputs)
+	if (locale === "id") return id_book_detail_admin_apply(inputs)
+	if (locale === "pt") return pt_book_detail_admin_apply(inputs)
+	return fr_book_detail_admin_apply(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_ApplyingInputs */
+
+const en_book_detail_admin_applying = /** @type {(inputs: Book_Detail_Admin_ApplyingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Applying…`)
+};
+
+const ru_book_detail_admin_applying = /** @type {(inputs: Book_Detail_Admin_ApplyingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Применение…`)
+};
+
+const id_book_detail_admin_applying = /** @type {(inputs: Book_Detail_Admin_ApplyingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Menerapkan…`)
+};
+
+const pt_book_detail_admin_applying = /** @type {(inputs: Book_Detail_Admin_ApplyingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Aplicando…`)
+};
+
+const fr_book_detail_admin_applying = /** @type {(inputs: Book_Detail_Admin_ApplyingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Application…`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Applying…" |
+*
+* @param {Book_Detail_Admin_ApplyingInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_applying = /** @type {((inputs?: Book_Detail_Admin_ApplyingInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_ApplyingInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_applying(inputs)
+	if (locale === "ru") return ru_book_detail_admin_applying(inputs)
+	if (locale === "id") return id_book_detail_admin_applying(inputs)
+	if (locale === "pt") return pt_book_detail_admin_applying(inputs)
+	return fr_book_detail_admin_applying(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Audio_TtsInputs */
+
+const en_book_detail_admin_audio_tts = /** @type {(inputs: Book_Detail_Admin_Audio_TtsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Audio TTS`)
+};
+
+const ru_book_detail_admin_audio_tts = /** @type {(inputs: Book_Detail_Admin_Audio_TtsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Аудио TTS`)
+};
+
+const id_book_detail_admin_audio_tts = /** @type {(inputs: Book_Detail_Admin_Audio_TtsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Audio TTS`)
+};
+
+const pt_book_detail_admin_audio_tts = /** @type {(inputs: Book_Detail_Admin_Audio_TtsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Áudio TTS`)
+};
+
+const fr_book_detail_admin_audio_tts = /** @type {(inputs: Book_Detail_Admin_Audio_TtsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Audio TTS`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Audio TTS" |
+*
+* @param {Book_Detail_Admin_Audio_TtsInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_audio_tts = /** @type {((inputs?: Book_Detail_Admin_Audio_TtsInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Audio_TtsInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_audio_tts(inputs)
+	if (locale === "ru") return ru_book_detail_admin_audio_tts(inputs)
+	if (locale === "id") return id_book_detail_admin_audio_tts(inputs)
+	if (locale === "pt") return pt_book_detail_admin_audio_tts(inputs)
+	return fr_book_detail_admin_audio_tts(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Book_CoverInputs */
+
+const en_book_detail_admin_book_cover = /** @type {(inputs: Book_Detail_Admin_Book_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Book Cover`)
+};
+
+const ru_book_detail_admin_book_cover = /** @type {(inputs: Book_Detail_Admin_Book_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Обложка книги`)
+};
+
+const id_book_detail_admin_book_cover = /** @type {(inputs: Book_Detail_Admin_Book_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Sampul Buku`)
+};
+
+const pt_book_detail_admin_book_cover = /** @type {(inputs: Book_Detail_Admin_Book_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Capa do Livro`)
+};
+
+const fr_book_detail_admin_book_cover = /** @type {(inputs: Book_Detail_Admin_Book_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Couverture du livre`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Book Cover" |
+*
+* @param {Book_Detail_Admin_Book_CoverInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_book_cover = /** @type {((inputs?: Book_Detail_Admin_Book_CoverInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Book_CoverInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_book_cover(inputs)
+	if (locale === "ru") return ru_book_detail_admin_book_cover(inputs)
+	if (locale === "id") return id_book_detail_admin_book_cover(inputs)
+	if (locale === "pt") return pt_book_detail_admin_book_cover(inputs)
+	return fr_book_detail_admin_book_cover(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Cancel_AudioInputs */
+
+const en_book_detail_admin_cancel_audio = /** @type {(inputs: Book_Detail_Admin_Cancel_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Cancel`)
+};
+
+const ru_book_detail_admin_cancel_audio = /** @type {(inputs: Book_Detail_Admin_Cancel_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Отмена`)
+};
+
+const id_book_detail_admin_cancel_audio = /** @type {(inputs: Book_Detail_Admin_Cancel_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Batal`)
+};
+
+const pt_book_detail_admin_cancel_audio = /** @type {(inputs: Book_Detail_Admin_Cancel_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Cancelar`)
+};
+
+const fr_book_detail_admin_cancel_audio = /** @type {(inputs: Book_Detail_Admin_Cancel_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Annuler`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Cancel" |
+*
+* @param {Book_Detail_Admin_Cancel_AudioInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_cancel_audio = /** @type {((inputs?: Book_Detail_Admin_Cancel_AudioInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Cancel_AudioInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_cancel_audio(inputs)
+	if (locale === "ru") return ru_book_detail_admin_cancel_audio(inputs)
+	if (locale === "id") return id_book_detail_admin_cancel_audio(inputs)
+	if (locale === "pt") return pt_book_detail_admin_cancel_audio(inputs)
+	return fr_book_detail_admin_cancel_audio(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Chapter_CoverInputs */
+
+const en_book_detail_admin_chapter_cover = /** @type {(inputs: Book_Detail_Admin_Chapter_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Chapter Cover`)
+};
+
+const ru_book_detail_admin_chapter_cover = /** @type {(inputs: Book_Detail_Admin_Chapter_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Обложка главы`)
+};
+
+const id_book_detail_admin_chapter_cover = /** @type {(inputs: Book_Detail_Admin_Chapter_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Sampul Bab`)
+};
+
+const pt_book_detail_admin_chapter_cover = /** @type {(inputs: Book_Detail_Admin_Chapter_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Capa do Capítulo`)
+};
+
+const fr_book_detail_admin_chapter_cover = /** @type {(inputs: Book_Detail_Admin_Chapter_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Couverture du chapitre`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Chapter Cover" |
+*
+* @param {Book_Detail_Admin_Chapter_CoverInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_chapter_cover = /** @type {((inputs?: Book_Detail_Admin_Chapter_CoverInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Chapter_CoverInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_chapter_cover(inputs)
+	if (locale === "ru") return ru_book_detail_admin_chapter_cover(inputs)
+	if (locale === "id") return id_book_detail_admin_chapter_cover(inputs)
+	if (locale === "pt") return pt_book_detail_admin_chapter_cover(inputs)
+	return fr_book_detail_admin_chapter_cover(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Chapter_NInputs */
+
+const en_book_detail_admin_chapter_n = /** @type {(inputs: Book_Detail_Admin_Chapter_NInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Chapter #`)
+};
+
+const ru_book_detail_admin_chapter_n = /** @type {(inputs: Book_Detail_Admin_Chapter_NInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Глава №`)
+};
+
+const id_book_detail_admin_chapter_n = /** @type {(inputs: Book_Detail_Admin_Chapter_NInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Bab #`)
+};
+
+const pt_book_detail_admin_chapter_n = /** @type {(inputs: Book_Detail_Admin_Chapter_NInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Capítulo nº`)
+};
+
+const fr_book_detail_admin_chapter_n = /** @type {(inputs: Book_Detail_Admin_Chapter_NInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Chapitre n°`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Chapter #" |
+*
+* @param {Book_Detail_Admin_Chapter_NInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_chapter_n = /** @type {((inputs?: Book_Detail_Admin_Chapter_NInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Chapter_NInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_chapter_n(inputs)
+	if (locale === "ru") return ru_book_detail_admin_chapter_n(inputs)
+	if (locale === "id") return id_book_detail_admin_chapter_n(inputs)
+	if (locale === "pt") return pt_book_detail_admin_chapter_n(inputs)
+	return fr_book_detail_admin_chapter_n(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Chapter_NamesInputs */
+
+const en_book_detail_admin_chapter_names = /** @type {(inputs: Book_Detail_Admin_Chapter_NamesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Chapter Names`)
+};
+
+const ru_book_detail_admin_chapter_names = /** @type {(inputs: Book_Detail_Admin_Chapter_NamesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Названия глав`)
+};
+
+const id_book_detail_admin_chapter_names = /** @type {(inputs: Book_Detail_Admin_Chapter_NamesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Nama Bab`)
+};
+
+const pt_book_detail_admin_chapter_names = /** @type {(inputs: Book_Detail_Admin_Chapter_NamesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Nomes dos Capítulos`)
+};
+
+const fr_book_detail_admin_chapter_names = /** @type {(inputs: Book_Detail_Admin_Chapter_NamesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Noms des chapitres`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Chapter Names" |
+*
+* @param {Book_Detail_Admin_Chapter_NamesInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_chapter_names = /** @type {((inputs?: Book_Detail_Admin_Chapter_NamesInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Chapter_NamesInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_chapter_names(inputs)
+	if (locale === "ru") return ru_book_detail_admin_chapter_names(inputs)
+	if (locale === "id") return id_book_detail_admin_chapter_names(inputs)
+	if (locale === "pt") return pt_book_detail_admin_chapter_names(inputs)
+	return fr_book_detail_admin_chapter_names(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_DescriptionInputs */
+
+const en_book_detail_admin_description = /** @type {(inputs: Book_Detail_Admin_DescriptionInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Description`)
+};
+
+const ru_book_detail_admin_description = /** @type {(inputs: Book_Detail_Admin_DescriptionInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Описание`)
+};
+
+const id_book_detail_admin_description = /** @type {(inputs: Book_Detail_Admin_DescriptionInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Deskripsi`)
+};
+
+const pt_book_detail_admin_description = /** @type {(inputs: Book_Detail_Admin_DescriptionInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Descrição`)
+};
+
+const fr_book_detail_admin_description = /** @type {(inputs: Book_Detail_Admin_DescriptionInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Description`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Description" |
+*
+* @param {Book_Detail_Admin_DescriptionInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_description = /** @type {((inputs?: Book_Detail_Admin_DescriptionInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_DescriptionInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_description(inputs)
+	if (locale === "ru") return ru_book_detail_admin_description(inputs)
+	if (locale === "id") return id_book_detail_admin_description(inputs)
+	if (locale === "pt") return pt_book_detail_admin_description(inputs)
+	return fr_book_detail_admin_description(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_DiscardInputs */
+
+const en_book_detail_admin_discard = /** @type {(inputs: Book_Detail_Admin_DiscardInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Discard`)
+};
+
+const ru_book_detail_admin_discard = /** @type {(inputs: Book_Detail_Admin_DiscardInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Отменить`)
+};
+
+const id_book_detail_admin_discard = /** @type {(inputs: Book_Detail_Admin_DiscardInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Buang`)
+};
+
+const pt_book_detail_admin_discard = /** @type {(inputs: Book_Detail_Admin_DiscardInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Descartar`)
+};
+
+const fr_book_detail_admin_discard = /** @type {(inputs: Book_Detail_Admin_DiscardInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Ignorer`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Discard" |
+*
+* @param {Book_Detail_Admin_DiscardInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_discard = /** @type {((inputs?: Book_Detail_Admin_DiscardInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_DiscardInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_discard(inputs)
+	if (locale === "ru") return ru_book_detail_admin_discard(inputs)
+	if (locale === "id") return id_book_detail_admin_discard(inputs)
+	if (locale === "pt") return pt_book_detail_admin_discard(inputs)
+	return fr_book_detail_admin_discard(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Enqueue_AudioInputs */
+
+const en_book_detail_admin_enqueue_audio = /** @type {(inputs: Book_Detail_Admin_Enqueue_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Enqueue Audio`)
+};
+
+const ru_book_detail_admin_enqueue_audio = /** @type {(inputs: Book_Detail_Admin_Enqueue_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Поставить в очередь`)
+};
+
+const id_book_detail_admin_enqueue_audio = /** @type {(inputs: Book_Detail_Admin_Enqueue_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Antre Audio`)
+};
+
+const pt_book_detail_admin_enqueue_audio = /** @type {(inputs: Book_Detail_Admin_Enqueue_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Enfileirar Áudio`)
+};
+
+const fr_book_detail_admin_enqueue_audio = /** @type {(inputs: Book_Detail_Admin_Enqueue_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mettre en file audio`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Enqueue Audio" |
+*
+* @param {Book_Detail_Admin_Enqueue_AudioInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_enqueue_audio = /** @type {((inputs?: Book_Detail_Admin_Enqueue_AudioInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Enqueue_AudioInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_enqueue_audio(inputs)
+	if (locale === "ru") return ru_book_detail_admin_enqueue_audio(inputs)
+	if (locale === "id") return id_book_detail_admin_enqueue_audio(inputs)
+	if (locale === "pt") return pt_book_detail_admin_enqueue_audio(inputs)
+	return fr_book_detail_admin_enqueue_audio(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{ enqueued: NonNullable<unknown>, skipped: NonNullable<unknown> }} Book_Detail_Admin_EnqueuedInputs */
+
+const en_book_detail_admin_enqueued = /** @type {(inputs: Book_Detail_Admin_EnqueuedInputs) => LocalizedString} */ (i) => {
+	return /** @type {LocalizedString} */ (`Enqueued ${i?.enqueued}, skipped ${i?.skipped}`)
+};
+
+const ru_book_detail_admin_enqueued = /** @type {(inputs: Book_Detail_Admin_EnqueuedInputs) => LocalizedString} */ (i) => {
+	return /** @type {LocalizedString} */ (`В очереди ${i?.enqueued}, пропущено ${i?.skipped}`)
+};
+
+const id_book_detail_admin_enqueued = /** @type {(inputs: Book_Detail_Admin_EnqueuedInputs) => LocalizedString} */ (i) => {
+	return /** @type {LocalizedString} */ (`Diantre ${i?.enqueued}, dilewati ${i?.skipped}`)
+};
+
+const pt_book_detail_admin_enqueued = /** @type {(inputs: Book_Detail_Admin_EnqueuedInputs) => LocalizedString} */ (i) => {
+	return /** @type {LocalizedString} */ (`${i?.enqueued} enfileirados, ${i?.skipped} ignorados`)
+};
+
+const fr_book_detail_admin_enqueued = /** @type {(inputs: Book_Detail_Admin_EnqueuedInputs) => LocalizedString} */ (i) => {
+	return /** @type {LocalizedString} */ (`${i?.enqueued} en file, ${i?.skipped} ignorés`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Enqueued {enqueued}, skipped {skipped}" |
+*
+* @param {Book_Detail_Admin_EnqueuedInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_enqueued = /** @type {((inputs: Book_Detail_Admin_EnqueuedInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_EnqueuedInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_enqueued(inputs)
+	if (locale === "ru") return ru_book_detail_admin_enqueued(inputs)
+	if (locale === "id") return id_book_detail_admin_enqueued(inputs)
+	if (locale === "pt") return pt_book_detail_admin_enqueued(inputs)
+	return fr_book_detail_admin_enqueued(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_GenerateInputs */
+
+const en_book_detail_admin_generate = /** @type {(inputs: Book_Detail_Admin_GenerateInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Generate`)
+};
+
+const ru_book_detail_admin_generate = /** @type {(inputs: Book_Detail_Admin_GenerateInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Сгенерировать`)
+};
+
+const id_book_detail_admin_generate = /** @type {(inputs: Book_Detail_Admin_GenerateInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Buat`)
+};
+
+const pt_book_detail_admin_generate = /** @type {(inputs: Book_Detail_Admin_GenerateInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Gerar`)
+};
+
+const fr_book_detail_admin_generate = /** @type {(inputs: Book_Detail_Admin_GenerateInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Générer`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Generate" |
+*
+* @param {Book_Detail_Admin_GenerateInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_generate = /** @type {((inputs?: Book_Detail_Admin_GenerateInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_GenerateInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_generate(inputs)
+	if (locale === "ru") return ru_book_detail_admin_generate(inputs)
+	if (locale === "id") return id_book_detail_admin_generate(inputs)
+	if (locale === "pt") return pt_book_detail_admin_generate(inputs)
+	return fr_book_detail_admin_generate(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_Save_CoverInputs */
+
+const en_book_detail_admin_save_cover = /** @type {(inputs: Book_Detail_Admin_Save_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Save Cover`)
+};
+
+const ru_book_detail_admin_save_cover = /** @type {(inputs: Book_Detail_Admin_Save_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Сохранить обложку`)
+};
+
+const id_book_detail_admin_save_cover = /** @type {(inputs: Book_Detail_Admin_Save_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Simpan Sampul`)
+};
+
+const pt_book_detail_admin_save_cover = /** @type {(inputs: Book_Detail_Admin_Save_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Salvar Capa`)
+};
+
+const fr_book_detail_admin_save_cover = /** @type {(inputs: Book_Detail_Admin_Save_CoverInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Enregistrer la couverture`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Save Cover" |
+*
+* @param {Book_Detail_Admin_Save_CoverInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_save_cover = /** @type {((inputs?: Book_Detail_Admin_Save_CoverInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_Save_CoverInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_save_cover(inputs)
+	if (locale === "ru") return ru_book_detail_admin_save_cover(inputs)
+	if (locale === "id") return id_book_detail_admin_save_cover(inputs)
+	if (locale === "pt") return pt_book_detail_admin_save_cover(inputs)
+	return fr_book_detail_admin_save_cover(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_SavedInputs */
+
+const en_book_detail_admin_saved = /** @type {(inputs: Book_Detail_Admin_SavedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Saved`)
+};
+
+const ru_book_detail_admin_saved = /** @type {(inputs: Book_Detail_Admin_SavedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Сохранено`)
+};
+
+const id_book_detail_admin_saved = /** @type {(inputs: Book_Detail_Admin_SavedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Tersimpan`)
+};
+
+const pt_book_detail_admin_saved = /** @type {(inputs: Book_Detail_Admin_SavedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Salvo`)
+};
+
+const fr_book_detail_admin_saved = /** @type {(inputs: Book_Detail_Admin_SavedInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Enregistré`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Saved" |
+*
+* @param {Book_Detail_Admin_SavedInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_saved = /** @type {((inputs?: Book_Detail_Admin_SavedInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_SavedInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_saved(inputs)
+	if (locale === "ru") return ru_book_detail_admin_saved(inputs)
+	if (locale === "id") return id_book_detail_admin_saved(inputs)
+	if (locale === "pt") return pt_book_detail_admin_saved(inputs)
+	return fr_book_detail_admin_saved(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_SavingInputs */
+
+const en_book_detail_admin_saving = /** @type {(inputs: Book_Detail_Admin_SavingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Saving…`)
+};
+
+const ru_book_detail_admin_saving = /** @type {(inputs: Book_Detail_Admin_SavingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Сохранение…`)
+};
+
+const id_book_detail_admin_saving = /** @type {(inputs: Book_Detail_Admin_SavingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Menyimpan…`)
+};
+
+const pt_book_detail_admin_saving = /** @type {(inputs: Book_Detail_Admin_SavingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Salvando…`)
+};
+
+const fr_book_detail_admin_saving = /** @type {(inputs: Book_Detail_Admin_SavingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Enregistrement…`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Saving…" |
+*
+* @param {Book_Detail_Admin_SavingInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_saving = /** @type {((inputs?: Book_Detail_Admin_SavingInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_SavingInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_saving(inputs)
+	if (locale === "ru") return ru_book_detail_admin_saving(inputs)
+	if (locale === "id") return id_book_detail_admin_saving(inputs)
+	if (locale === "pt") return pt_book_detail_admin_saving(inputs)
+	return fr_book_detail_admin_saving(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Book_Detail_Admin_VoiceInputs */
+
+const en_book_detail_admin_voice = /** @type {(inputs: Book_Detail_Admin_VoiceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Voice`)
+};
+
+const ru_book_detail_admin_voice = /** @type {(inputs: Book_Detail_Admin_VoiceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Голос`)
+};
+
+const id_book_detail_admin_voice = /** @type {(inputs: Book_Detail_Admin_VoiceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Suara`)
+};
+
+const pt_book_detail_admin_voice = /** @type {(inputs: Book_Detail_Admin_VoiceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Voz`)
+};
+
+const fr_book_detail_admin_voice = /** @type {(inputs: Book_Detail_Admin_VoiceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Voix`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Voice" |
+*
+* @param {Book_Detail_Admin_VoiceInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const book_detail_admin_voice = /** @type {((inputs?: Book_Detail_Admin_VoiceInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Book_Detail_Admin_VoiceInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_book_detail_admin_voice(inputs)
+	if (locale === "ru") return ru_book_detail_admin_voice(inputs)
+	if (locale === "id") return id_book_detail_admin_voice(inputs)
+	if (locale === "pt") return pt_book_detail_admin_voice(inputs)
+	return fr_book_detail_admin_voice(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Already_ProInputs */
+
+const en_subscribe_already_pro = /** @type {(inputs: Subscribe_Already_ProInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`You already have a Pro subscription.`)
+};
+
+const ru_subscribe_already_pro = /** @type {(inputs: Subscribe_Already_ProInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`У вас уже есть подписка Pro.`)
+};
+
+const id_subscribe_already_pro = /** @type {(inputs: Subscribe_Already_ProInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Anda sudah berlangganan Pro.`)
+};
+
+const pt_subscribe_already_pro = /** @type {(inputs: Subscribe_Already_ProInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Você já tem uma assinatura Pro.`)
+};
+
+const fr_subscribe_already_pro = /** @type {(inputs: Subscribe_Already_ProInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Vous avez déjà un abonnement Pro.`)
+};
+
+/**
+* | output |
+* | --- |
+* | "You already have a Pro subscription." |
+*
+* @param {Subscribe_Already_ProInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_already_pro = /** @type {((inputs?: Subscribe_Already_ProInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Already_ProInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_already_pro(inputs)
+	if (locale === "ru") return ru_subscribe_already_pro(inputs)
+	if (locale === "id") return id_subscribe_already_pro(inputs)
+	if (locale === "pt") return pt_subscribe_already_pro(inputs)
+	return fr_subscribe_already_pro(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Annual_LabelInputs */
+
+const en_subscribe_annual_label = /** @type {(inputs: Subscribe_Annual_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Annual`)
+};
+
+const ru_subscribe_annual_label = /** @type {(inputs: Subscribe_Annual_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Ежегодно`)
+};
+
+const id_subscribe_annual_label = /** @type {(inputs: Subscribe_Annual_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Tahunan`)
+};
+
+const pt_subscribe_annual_label = /** @type {(inputs: Subscribe_Annual_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Anual`)
+};
+
+const fr_subscribe_annual_label = /** @type {(inputs: Subscribe_Annual_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Annuel`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Annual" |
+*
+* @param {Subscribe_Annual_LabelInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_annual_label = /** @type {((inputs?: Subscribe_Annual_LabelInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Annual_LabelInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_annual_label(inputs)
+	if (locale === "ru") return ru_subscribe_annual_label(inputs)
+	if (locale === "id") return id_subscribe_annual_label(inputs)
+	if (locale === "pt") return pt_subscribe_annual_label(inputs)
+	return fr_subscribe_annual_label(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Annual_PeriodInputs */
+
+const en_subscribe_annual_period = /** @type {(inputs: Subscribe_Annual_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`per year`)
+};
+
+const ru_subscribe_annual_period = /** @type {(inputs: Subscribe_Annual_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`в год`)
+};
+
+const id_subscribe_annual_period = /** @type {(inputs: Subscribe_Annual_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`per tahun`)
+};
+
+const pt_subscribe_annual_period = /** @type {(inputs: Subscribe_Annual_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`por ano`)
+};
+
+const fr_subscribe_annual_period = /** @type {(inputs: Subscribe_Annual_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`par an`)
+};
+
+/**
+* | output |
+* | --- |
+* | "per year" |
+*
+* @param {Subscribe_Annual_PeriodInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_annual_period = /** @type {((inputs?: Subscribe_Annual_PeriodInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Annual_PeriodInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_annual_period(inputs)
+	if (locale === "ru") return ru_subscribe_annual_period(inputs)
+	if (locale === "id") return id_subscribe_annual_period(inputs)
+	if (locale === "pt") return pt_subscribe_annual_period(inputs)
+	return fr_subscribe_annual_period(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Annual_PriceInputs */
+
+const en_subscribe_annual_price = /** @type {(inputs: Subscribe_Annual_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$48`)
+};
+
+const ru_subscribe_annual_price = /** @type {(inputs: Subscribe_Annual_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$48`)
+};
+
+const id_subscribe_annual_price = /** @type {(inputs: Subscribe_Annual_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$48`)
+};
+
+const pt_subscribe_annual_price = /** @type {(inputs: Subscribe_Annual_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$48`)
+};
+
+const fr_subscribe_annual_price = /** @type {(inputs: Subscribe_Annual_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`48 $`)
+};
+
+/**
+* | output |
+* | --- |
+* | "$48" |
+*
+* @param {Subscribe_Annual_PriceInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_annual_price = /** @type {((inputs?: Subscribe_Annual_PriceInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Annual_PriceInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_annual_price(inputs)
+	if (locale === "ru") return ru_subscribe_annual_price(inputs)
+	if (locale === "id") return id_subscribe_annual_price(inputs)
+	if (locale === "pt") return pt_subscribe_annual_price(inputs)
+	return fr_subscribe_annual_price(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Annual_SaveInputs */
+
+const en_subscribe_annual_save = /** @type {(inputs: Subscribe_Annual_SaveInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Save 33%`)
+};
+
+const ru_subscribe_annual_save = /** @type {(inputs: Subscribe_Annual_SaveInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Сэкономьте 33%`)
+};
+
+const id_subscribe_annual_save = /** @type {(inputs: Subscribe_Annual_SaveInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Hemat 33%`)
+};
+
+const pt_subscribe_annual_save = /** @type {(inputs: Subscribe_Annual_SaveInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Economize 33%`)
+};
+
+const fr_subscribe_annual_save = /** @type {(inputs: Subscribe_Annual_SaveInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Économisez 33 %`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Save 33%" |
+*
+* @param {Subscribe_Annual_SaveInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_annual_save = /** @type {((inputs?: Subscribe_Annual_SaveInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Annual_SaveInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_annual_save(inputs)
+	if (locale === "ru") return ru_subscribe_annual_save(inputs)
+	if (locale === "id") return id_subscribe_annual_save(inputs)
+	if (locale === "pt") return pt_subscribe_annual_save(inputs)
+	return fr_subscribe_annual_save(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Benefit_AudioInputs */
+
+const en_subscribe_benefit_audio = /** @type {(inputs: Subscribe_Benefit_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Unlimited audio chapters per day`)
+};
+
+const ru_subscribe_benefit_audio = /** @type {(inputs: Subscribe_Benefit_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Неограниченные аудиоглавы в день`)
+};
+
+const id_subscribe_benefit_audio = /** @type {(inputs: Subscribe_Benefit_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Bab audio tak terbatas per hari`)
+};
+
+const pt_subscribe_benefit_audio = /** @type {(inputs: Subscribe_Benefit_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Capítulos de áudio ilimitados por dia`)
+};
+
+const fr_subscribe_benefit_audio = /** @type {(inputs: Subscribe_Benefit_AudioInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Chapitres audio illimités par jour`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Unlimited audio chapters per day" |
+*
+* @param {Subscribe_Benefit_AudioInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_benefit_audio = /** @type {((inputs?: Subscribe_Benefit_AudioInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Benefit_AudioInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_benefit_audio(inputs)
+	if (locale === "ru") return ru_subscribe_benefit_audio(inputs)
+	if (locale === "id") return id_subscribe_benefit_audio(inputs)
+	if (locale === "pt") return pt_subscribe_benefit_audio(inputs)
+	return fr_subscribe_benefit_audio(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Benefit_DownloadsInputs */
+
+const en_subscribe_benefit_downloads = /** @type {(inputs: Subscribe_Benefit_DownloadsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Download chapters for offline listening`)
+};
+
+const ru_subscribe_benefit_downloads = /** @type {(inputs: Subscribe_Benefit_DownloadsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Скачивайте главы для прослушивания офлайн`)
+};
+
+const id_subscribe_benefit_downloads = /** @type {(inputs: Subscribe_Benefit_DownloadsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Unduh bab untuk didengarkan secara offline`)
+};
+
+const pt_subscribe_benefit_downloads = /** @type {(inputs: Subscribe_Benefit_DownloadsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Baixe capítulos para ouvir offline`)
+};
+
+const fr_subscribe_benefit_downloads = /** @type {(inputs: Subscribe_Benefit_DownloadsInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Télécharger des chapitres pour une écoute hors ligne`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Download chapters for offline listening" |
+*
+* @param {Subscribe_Benefit_DownloadsInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_benefit_downloads = /** @type {((inputs?: Subscribe_Benefit_DownloadsInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Benefit_DownloadsInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_benefit_downloads(inputs)
+	if (locale === "ru") return ru_subscribe_benefit_downloads(inputs)
+	if (locale === "id") return id_subscribe_benefit_downloads(inputs)
+	if (locale === "pt") return pt_subscribe_benefit_downloads(inputs)
+	return fr_subscribe_benefit_downloads(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Benefit_TranslationInputs */
+
+const en_subscribe_benefit_translation = /** @type {(inputs: Subscribe_Benefit_TranslationInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Read in French, Indonesian, Portuguese, and Russian`)
+};
+
+const ru_subscribe_benefit_translation = /** @type {(inputs: Subscribe_Benefit_TranslationInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Читайте на французском, индонезийском, португальском и русском`)
+};
+
+const id_subscribe_benefit_translation = /** @type {(inputs: Subscribe_Benefit_TranslationInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Baca dalam bahasa Prancis, Indonesia, Portugis, dan Rusia`)
+};
+
+const pt_subscribe_benefit_translation = /** @type {(inputs: Subscribe_Benefit_TranslationInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Leia em francês, indonésio, português e russo`)
+};
+
+const fr_subscribe_benefit_translation = /** @type {(inputs: Subscribe_Benefit_TranslationInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Lire en français, indonésien, portugais et russe`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Read in French, Indonesian, Portuguese, and Russian" |
+*
+* @param {Subscribe_Benefit_TranslationInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_benefit_translation = /** @type {((inputs?: Subscribe_Benefit_TranslationInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Benefit_TranslationInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_benefit_translation(inputs)
+	if (locale === "ru") return ru_subscribe_benefit_translation(inputs)
+	if (locale === "id") return id_subscribe_benefit_translation(inputs)
+	if (locale === "pt") return pt_subscribe_benefit_translation(inputs)
+	return fr_subscribe_benefit_translation(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Benefit_VoicesInputs */
+
+const en_subscribe_benefit_voices = /** @type {(inputs: Subscribe_Benefit_VoicesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Voice selection across all TTS engines`)
+};
+
+const ru_subscribe_benefit_voices = /** @type {(inputs: Subscribe_Benefit_VoicesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Выбор голоса для всех TTS-движков`)
+};
+
+const id_subscribe_benefit_voices = /** @type {(inputs: Subscribe_Benefit_VoicesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Pilihan suara untuk semua mesin TTS`)
+};
+
+const pt_subscribe_benefit_voices = /** @type {(inputs: Subscribe_Benefit_VoicesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Seleção de voz para todos os mecanismos TTS`)
+};
+
+const fr_subscribe_benefit_voices = /** @type {(inputs: Subscribe_Benefit_VoicesInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Sélection de voix pour tous les moteurs TTS`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Voice selection across all TTS engines" |
+*
+* @param {Subscribe_Benefit_VoicesInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_benefit_voices = /** @type {((inputs?: Subscribe_Benefit_VoicesInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Benefit_VoicesInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_benefit_voices(inputs)
+	if (locale === "ru") return ru_subscribe_benefit_voices(inputs)
+	if (locale === "id") return id_subscribe_benefit_voices(inputs)
+	if (locale === "pt") return pt_subscribe_benefit_voices(inputs)
+	return fr_subscribe_benefit_voices(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Cta_AnnualInputs */
+
+const en_subscribe_cta_annual = /** @type {(inputs: Subscribe_Cta_AnnualInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Start annual plan`)
+};
+
+const ru_subscribe_cta_annual = /** @type {(inputs: Subscribe_Cta_AnnualInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Начать годовой план`)
+};
+
+const id_subscribe_cta_annual = /** @type {(inputs: Subscribe_Cta_AnnualInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mulai paket tahunan`)
+};
+
+const pt_subscribe_cta_annual = /** @type {(inputs: Subscribe_Cta_AnnualInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Começar plano anual`)
+};
+
+const fr_subscribe_cta_annual = /** @type {(inputs: Subscribe_Cta_AnnualInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Commencer le plan annuel`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Start annual plan" |
+*
+* @param {Subscribe_Cta_AnnualInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_cta_annual = /** @type {((inputs?: Subscribe_Cta_AnnualInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Cta_AnnualInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_cta_annual(inputs)
+	if (locale === "ru") return ru_subscribe_cta_annual(inputs)
+	if (locale === "id") return id_subscribe_cta_annual(inputs)
+	if (locale === "pt") return pt_subscribe_cta_annual(inputs)
+	return fr_subscribe_cta_annual(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Cta_MonthlyInputs */
+
+const en_subscribe_cta_monthly = /** @type {(inputs: Subscribe_Cta_MonthlyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Start monthly plan`)
+};
+
+const ru_subscribe_cta_monthly = /** @type {(inputs: Subscribe_Cta_MonthlyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Начать месячный план`)
+};
+
+const id_subscribe_cta_monthly = /** @type {(inputs: Subscribe_Cta_MonthlyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mulai paket bulanan`)
+};
+
+const pt_subscribe_cta_monthly = /** @type {(inputs: Subscribe_Cta_MonthlyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Começar plano mensal`)
+};
+
+const fr_subscribe_cta_monthly = /** @type {(inputs: Subscribe_Cta_MonthlyInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Commencer le plan mensuel`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Start monthly plan" |
+*
+* @param {Subscribe_Cta_MonthlyInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_cta_monthly = /** @type {((inputs?: Subscribe_Cta_MonthlyInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Cta_MonthlyInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_cta_monthly(inputs)
+	if (locale === "ru") return ru_subscribe_cta_monthly(inputs)
+	if (locale === "id") return id_subscribe_cta_monthly(inputs)
+	if (locale === "pt") return pt_subscribe_cta_monthly(inputs)
+	return fr_subscribe_cta_monthly(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_HeadingInputs */
+
+const en_subscribe_heading = /** @type {(inputs: Subscribe_HeadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Read more. Listen more.`)
+};
+
+const ru_subscribe_heading = /** @type {(inputs: Subscribe_HeadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Читайте больше. Слушайте больше.`)
+};
+
+const id_subscribe_heading = /** @type {(inputs: Subscribe_HeadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Baca lebih. Dengarkan lebih.`)
+};
+
+const pt_subscribe_heading = /** @type {(inputs: Subscribe_HeadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Leia mais. Ouça mais.`)
+};
+
+const fr_subscribe_heading = /** @type {(inputs: Subscribe_HeadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Lisez plus. Écoutez plus.`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Read more. Listen more." |
+*
+* @param {Subscribe_HeadingInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_heading = /** @type {((inputs?: Subscribe_HeadingInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_HeadingInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_heading(inputs)
+	if (locale === "ru") return ru_subscribe_heading(inputs)
+	if (locale === "id") return id_subscribe_heading(inputs)
+	if (locale === "pt") return pt_subscribe_heading(inputs)
+	return fr_subscribe_heading(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Login_CtaInputs */
+
+const en_subscribe_login_cta = /** @type {(inputs: Subscribe_Login_CtaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Sign in`)
+};
+
+const ru_subscribe_login_cta = /** @type {(inputs: Subscribe_Login_CtaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Войти`)
+};
+
+const id_subscribe_login_cta = /** @type {(inputs: Subscribe_Login_CtaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Masuk`)
+};
+
+const pt_subscribe_login_cta = /** @type {(inputs: Subscribe_Login_CtaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Entrar`)
+};
+
+const fr_subscribe_login_cta = /** @type {(inputs: Subscribe_Login_CtaInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Se connecter`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Sign in" |
+*
+* @param {Subscribe_Login_CtaInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_login_cta = /** @type {((inputs?: Subscribe_Login_CtaInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Login_CtaInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_login_cta(inputs)
+	if (locale === "ru") return ru_subscribe_login_cta(inputs)
+	if (locale === "id") return id_subscribe_login_cta(inputs)
+	if (locale === "pt") return pt_subscribe_login_cta(inputs)
+	return fr_subscribe_login_cta(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Login_PromptInputs */
+
+const en_subscribe_login_prompt = /** @type {(inputs: Subscribe_Login_PromptInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Sign in to subscribe`)
+};
+
+const ru_subscribe_login_prompt = /** @type {(inputs: Subscribe_Login_PromptInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Войдите, чтобы оформить подписку`)
+};
+
+const id_subscribe_login_prompt = /** @type {(inputs: Subscribe_Login_PromptInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Masuk untuk berlangganan`)
+};
+
+const pt_subscribe_login_prompt = /** @type {(inputs: Subscribe_Login_PromptInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Entre para assinar`)
+};
+
+const fr_subscribe_login_prompt = /** @type {(inputs: Subscribe_Login_PromptInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Connectez-vous pour vous abonner`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Sign in to subscribe" |
+*
+* @param {Subscribe_Login_PromptInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_login_prompt = /** @type {((inputs?: Subscribe_Login_PromptInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Login_PromptInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_login_prompt(inputs)
+	if (locale === "ru") return ru_subscribe_login_prompt(inputs)
+	if (locale === "id") return id_subscribe_login_prompt(inputs)
+	if (locale === "pt") return pt_subscribe_login_prompt(inputs)
+	return fr_subscribe_login_prompt(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_ManageInputs */
+
+const en_subscribe_manage = /** @type {(inputs: Subscribe_ManageInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Manage subscription`)
+};
+
+const ru_subscribe_manage = /** @type {(inputs: Subscribe_ManageInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Управление подпиской`)
+};
+
+const id_subscribe_manage = /** @type {(inputs: Subscribe_ManageInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Kelola langganan`)
+};
+
+const pt_subscribe_manage = /** @type {(inputs: Subscribe_ManageInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Gerenciar assinatura`)
+};
+
+const fr_subscribe_manage = /** @type {(inputs: Subscribe_ManageInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Gérer l'abonnement`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Manage subscription" |
+*
+* @param {Subscribe_ManageInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_manage = /** @type {((inputs?: Subscribe_ManageInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_ManageInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_manage(inputs)
+	if (locale === "ru") return ru_subscribe_manage(inputs)
+	if (locale === "id") return id_subscribe_manage(inputs)
+	if (locale === "pt") return pt_subscribe_manage(inputs)
+	return fr_subscribe_manage(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Monthly_LabelInputs */
+
+const en_subscribe_monthly_label = /** @type {(inputs: Subscribe_Monthly_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Monthly`)
+};
+
+const ru_subscribe_monthly_label = /** @type {(inputs: Subscribe_Monthly_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Ежемесячно`)
+};
+
+const id_subscribe_monthly_label = /** @type {(inputs: Subscribe_Monthly_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Bulanan`)
+};
+
+const pt_subscribe_monthly_label = /** @type {(inputs: Subscribe_Monthly_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mensal`)
+};
+
+const fr_subscribe_monthly_label = /** @type {(inputs: Subscribe_Monthly_LabelInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Mensuel`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Monthly" |
+*
+* @param {Subscribe_Monthly_LabelInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_monthly_label = /** @type {((inputs?: Subscribe_Monthly_LabelInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Monthly_LabelInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_monthly_label(inputs)
+	if (locale === "ru") return ru_subscribe_monthly_label(inputs)
+	if (locale === "id") return id_subscribe_monthly_label(inputs)
+	if (locale === "pt") return pt_subscribe_monthly_label(inputs)
+	return fr_subscribe_monthly_label(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Monthly_PeriodInputs */
+
+const en_subscribe_monthly_period = /** @type {(inputs: Subscribe_Monthly_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`per month`)
+};
+
+const ru_subscribe_monthly_period = /** @type {(inputs: Subscribe_Monthly_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`в месяц`)
+};
+
+const id_subscribe_monthly_period = /** @type {(inputs: Subscribe_Monthly_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`per bulan`)
+};
+
+const pt_subscribe_monthly_period = /** @type {(inputs: Subscribe_Monthly_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`por mês`)
+};
+
+const fr_subscribe_monthly_period = /** @type {(inputs: Subscribe_Monthly_PeriodInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`par mois`)
+};
+
+/**
+* | output |
+* | --- |
+* | "per month" |
+*
+* @param {Subscribe_Monthly_PeriodInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_monthly_period = /** @type {((inputs?: Subscribe_Monthly_PeriodInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Monthly_PeriodInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_monthly_period(inputs)
+	if (locale === "ru") return ru_subscribe_monthly_period(inputs)
+	if (locale === "id") return id_subscribe_monthly_period(inputs)
+	if (locale === "pt") return pt_subscribe_monthly_period(inputs)
+	return fr_subscribe_monthly_period(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Monthly_PriceInputs */
+
+const en_subscribe_monthly_price = /** @type {(inputs: Subscribe_Monthly_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$6`)
+};
+
+const ru_subscribe_monthly_price = /** @type {(inputs: Subscribe_Monthly_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$6`)
+};
+
+const id_subscribe_monthly_price = /** @type {(inputs: Subscribe_Monthly_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$6`)
+};
+
+const pt_subscribe_monthly_price = /** @type {(inputs: Subscribe_Monthly_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`$6`)
+};
+
+const fr_subscribe_monthly_price = /** @type {(inputs: Subscribe_Monthly_PriceInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`6 $`)
+};
+
+/**
+* | output |
+* | --- |
+* | "$6" |
+*
+* @param {Subscribe_Monthly_PriceInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_monthly_price = /** @type {((inputs?: Subscribe_Monthly_PriceInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Monthly_PriceInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_monthly_price(inputs)
+	if (locale === "ru") return ru_subscribe_monthly_price(inputs)
+	if (locale === "id") return id_subscribe_monthly_price(inputs)
+	if (locale === "pt") return pt_subscribe_monthly_price(inputs)
+	return fr_subscribe_monthly_price(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_Page_TitleInputs */
+
+const en_subscribe_page_title = /** @type {(inputs: Subscribe_Page_TitleInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Go Pro — libnovel`)
+};
+
+const ru_subscribe_page_title = /** @type {(inputs: Subscribe_Page_TitleInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Перейти на Pro — libnovel`)
+};
+
+const id_subscribe_page_title = /** @type {(inputs: Subscribe_Page_TitleInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Jadi Pro — libnovel`)
+};
+
+const pt_subscribe_page_title = /** @type {(inputs: Subscribe_Page_TitleInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Seja Pro — libnovel`)
+};
+
+const fr_subscribe_page_title = /** @type {(inputs: Subscribe_Page_TitleInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Passer Pro — libnovel`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Go Pro — libnovel" |
+*
+* @param {Subscribe_Page_TitleInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_page_title = /** @type {((inputs?: Subscribe_Page_TitleInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_Page_TitleInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_page_title(inputs)
+	if (locale === "ru") return ru_subscribe_page_title(inputs)
+	if (locale === "id") return id_subscribe_page_title(inputs)
+	if (locale === "pt") return pt_subscribe_page_title(inputs)
+	return fr_subscribe_page_title(inputs)
+});

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

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { getLocale, experimentalStaticLocale } from '../runtime.js';
+
+/** @typedef {import('../runtime.js').LocalizedString} LocalizedString */
+
+/** @typedef {{}} Subscribe_SubheadingInputs */
+
+const en_subscribe_subheading = /** @type {(inputs: Subscribe_SubheadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Upgrade to Pro and unlock the full libnovel experience.`)
+};
+
+const ru_subscribe_subheading = /** @type {(inputs: Subscribe_SubheadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Перейдите на Pro и откройте полный опыт libnovel.`)
+};
+
+const id_subscribe_subheading = /** @type {(inputs: Subscribe_SubheadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Tingkatkan ke Pro dan buka pengalaman libnovel sepenuhnya.`)
+};
+
+const pt_subscribe_subheading = /** @type {(inputs: Subscribe_SubheadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Torne-se Pro e desbloqueie a experiência completa do libnovel.`)
+};
+
+const fr_subscribe_subheading = /** @type {(inputs: Subscribe_SubheadingInputs) => LocalizedString} */ () => {
+	return /** @type {LocalizedString} */ (`Passez Pro et débloquez l'expérience libnovel complète.`)
+};
+
+/**
+* | output |
+* | --- |
+* | "Upgrade to Pro and unlock the full libnovel experience." |
+*
+* @param {Subscribe_SubheadingInputs} inputs
+* @param {{ locale?: "en" | "ru" | "id" | "pt" | "fr" }} options
+* @returns {LocalizedString}
+*/
+export const subscribe_subheading = /** @type {((inputs?: Subscribe_SubheadingInputs, options?: { locale?: "en" | "ru" | "id" | "pt" | "fr" }) => LocalizedString) & import('../runtime.js').MessageMetadata<Subscribe_SubheadingInputs, { locale?: "en" | "ru" | "id" | "pt" | "fr" }, {}>} */ ((inputs = {}, options = {}) => {
+	const locale = experimentalStaticLocale ?? options.locale ?? getLocale()
+	if (locale === "en") return en_subscribe_subheading(inputs)
+	if (locale === "ru") return ru_subscribe_subheading(inputs)
+	if (locale === "id") return id_subscribe_subheading(inputs)
+	if (locale === "pt") return pt_subscribe_subheading(inputs)
+	return fr_subscribe_subheading(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/+layout.server.ts

@@ -28,7 +28,7 @@ export const load: LayoutServerLoad = async ({ locals, url, cookies }) => {
 				theme: row.theme ?? 'amber',
 				locale: row.locale ?? 'en',
 				fontFamily: row.font_family ?? 'system',
-				fontSize: row.font_size ?? 1.0
+				fontSize: row.font_size || 1.0
 			};
 		}
 	} catch (e) {

ui/src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 	import { cn } from '$lib/utils';
 	import * as m from '$lib/paraglide/messages.js';
 	import { locales, getLocale } from '$lib/paraglide/runtime.js';
+	import ListeningMode from '$lib/components/ListeningMode.svelte';
 
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 
@@ -34,6 +35,7 @@
 	// Chapter list drawer state for the mini-player
 	let chapterDrawerOpen = $state(false);
 	let activeChapterEl = $state<HTMLElement | null>(null);
+	let listeningModeOpen = $state(false);
 
 	function setIfActive(node: HTMLElement, isActive: boolean) {
 		if (isActive) activeChapterEl = node;
@@ -54,8 +56,11 @@
 	let audioEl = $state<HTMLAudioElement | null>(null);
 
 	// ── Theme ──────────────────────────────────────────────────────────────
+	// svelte-ignore state_referenced_locally
 	let currentTheme = $state(data.settings?.theme ?? 'amber');
+	// svelte-ignore state_referenced_locally
 	let currentFontFamily = $state(data.settings?.fontFamily ?? 'system');
+	// svelte-ignore state_referenced_locally
 	let currentFontSize = $state(data.settings?.fontSize ?? 1.0);
 
 	// Expose theme + font state to child pages (e.g. profile picker)
@@ -100,7 +105,7 @@
 			// Always sync theme + font (profile page calls invalidateAll after saving)
 			currentTheme = data.settings.theme ?? 'amber';
 			currentFontFamily = data.settings.fontFamily ?? 'system';
-			currentFontSize = data.settings.fontSize ?? 1.0;
+			currentFontSize = data.settings.fontSize || 1.0;
 			// Mark dirty only after the synchronous apply is done so the save
 			// effect doesn't fire for this initial load.
 			setTimeout(() => { settingsDirty = true; }, 0);
@@ -192,6 +197,50 @@
 		return () => clearTimeout(id);
 	});
 
+	// ── MediaSession action handlers ────────────────────────────────────────────
+	// Without explicit handlers, iOS Safari loses lock-screen resume ability after
+	// ~1 minute of pause because it falls back to its own default which doesn't
+	// satisfy the user-gesture requirement for <audio>.play().
+	// Handlers registered here call audioEl directly so iOS trusts the gesture.
+	$effect(() => {
+		if (typeof navigator === 'undefined' || !('mediaSession' in navigator) || !audioEl) return;
+		const el = audioEl; // capture for closure
+
+		navigator.mediaSession.setActionHandler('play', () => {
+			el.play().catch(() => {});
+		});
+		navigator.mediaSession.setActionHandler('pause', () => {
+			el.pause();
+		});
+		navigator.mediaSession.setActionHandler('seekbackward', (d) => {
+			el.currentTime = Math.max(0, el.currentTime - (d.seekOffset ?? 15));
+		});
+		navigator.mediaSession.setActionHandler('seekforward', (d) => {
+			el.currentTime = Math.min(el.duration || 0, el.currentTime + (d.seekOffset ?? 30));
+		});
+		// previoustrack / nexttrack fall back to skip ±30s if no chapter nav available
+		try {
+			navigator.mediaSession.setActionHandler('previoustrack', () => {
+				el.currentTime = Math.max(0, el.currentTime - 30);
+			});
+			navigator.mediaSession.setActionHandler('nexttrack', () => {
+				el.currentTime = Math.min(el.duration || 0, el.currentTime + 30);
+			});
+		} catch { /* some browsers don't support these */ }
+
+		return () => {
+			(['play', 'pause', 'seekbackward', 'seekforward'] as MediaSessionAction[]).forEach((a) => {
+				try { navigator.mediaSession.setActionHandler(a, null); } catch { /* ignore */ }
+			});
+		};
+	});
+
+	// Keep playbackState in sync so iOS lock screen shows the right button state
+	$effect(() => {
+		if (typeof navigator === 'undefined' || !('mediaSession' in navigator)) return;
+		navigator.mediaSession.playbackState = audioStore.isPlaying ? 'playing' : 'paused';
+	});
+
 	// ── Save audio time on pause/end (debounced 2s) ─────────────────────────
 	let audioTimeSaveTimer = 0;
 	function saveAudioTime() {
@@ -240,7 +289,7 @@
 		audioEl.currentTime = Math.min(audioEl.duration || 0, audioEl.currentTime + 30);
 	}
 
-	const speedSteps = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0];
+	const speedSteps = [0.75, 1.0, 1.25, 1.5, 2.0];
 
 	function cycleSpeed() {
 		const idx = speedSteps.indexOf(audioStore.speed);
@@ -363,6 +412,15 @@
 		>
 			{m.nav_catalogue()}
 		</a>
+		{#if !data.isPro}
+		<a
+			href="/subscribe"
+			class="hidden sm:inline-flex items-center gap-1 text-sm font-semibold transition-colors {page.url.pathname.startsWith('/subscribe') ? 'text-(--color-brand)' : 'text-(--color-brand) opacity-70 hover:opacity-100'}"
+		>
+			<svg class="w-3.5 h-3.5 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/></svg>
+			Pro
+		</a>
+		{/if}
 			<div class="ml-auto flex items-center gap-2">
 				<!-- Theme dropdown (desktop) -->
 				<div class="hidden sm:block relative">
@@ -722,9 +780,10 @@
 
 		<!-- Chapter list drawer (slides up above the mini-bar) -->
 		{#if chapterDrawerOpen && audioStore.chapters.length > 0}
-			<div class="border-b border-(--color-border) bg-(--color-surface) max-h-[32rem] overflow-y-auto">
-				<div class="max-w-6xl mx-auto px-4">
-					<div class="flex items-center justify-between py-2 border-b border-(--color-border) sticky top-0 bg-(--color-surface)">
+			<div class="border-b border-(--color-border) bg-(--color-surface) flex justify-center md:justify-end md:pr-4">
+				<div class="w-full md:w-80 flex flex-col max-h-72">
+					<!-- Sticky header -->
+					<div class="flex items-center justify-between px-4 py-2 border-b border-(--color-border) shrink-0">
 						<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">{m.player_chapters()}</span>
 						<Button
 							variant="ghost"
@@ -738,26 +797,29 @@
 							</svg>
 						</Button>
 					</div>
-					{#each audioStore.chapters as ch (ch.number)}
-						<a
-							use:setIfActive={ch.number === audioStore.chapter}
-							href="/books/{audioStore.slug}/chapters/{ch.number}"
-							onclick={() => (chapterDrawerOpen = false)}
-							class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-(--color-text) {ch.number === audioStore.chapter
-								? 'text-(--color-brand) font-semibold'
-								: 'text-(--color-muted)'}"
-						>
-							<span class="tabular-nums text-(--color-muted) opacity-60 w-8 shrink-0 text-right">
-								{ch.number}
-							</span>
-							<span class="truncate">{ch.title || m.player_chapter_n({ n: String(ch.number) })}</span>
-							{#if ch.number === audioStore.chapter}
-								<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M8 5v14l11-7z"/>
-								</svg>
-							{/if}
-						</a>
-					{/each}
+					<!-- Scrollable list -->
+					<div class="overflow-y-auto px-4">
+						{#each audioStore.chapters as ch (ch.number)}
+							<a
+								use:setIfActive={ch.number === audioStore.chapter}
+								href="/books/{audioStore.slug}/chapters/{ch.number}"
+								onclick={() => (chapterDrawerOpen = false)}
+								class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-(--color-text) {ch.number === audioStore.chapter
+									? 'text-(--color-brand) font-semibold'
+									: 'text-(--color-muted)'}"
+							>
+								<span class="tabular-nums text-(--color-muted) opacity-60 w-8 shrink-0 text-right">
+									{ch.number}
+								</span>
+								<span class="truncate">{ch.title || m.player_chapter_n({ n: String(ch.number) })}</span>
+								{#if ch.number === audioStore.chapter}
+									<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+										<path d="M8 5v14l11-7z"/>
+									</svg>
+								{/if}
+							</a>
+						{/each}
+					</div>
 				</div>
 			</div>
 		{/if}
@@ -933,6 +995,21 @@
 				</a>
 			{/if}
 
+			<!-- Headphones: open listening mode -->
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={() => (listeningModeOpen = true)}
+				title="Listening mode"
+				aria-label="Open listening mode"
+				class="text-(--color-muted) hover:text-(--color-text) flex-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="M3 18v-6a9 9 0 0118 0v6"/>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3z"/>
+				</svg>
+			</Button>
+
 			<!-- Dismiss -->
 			<Button
 				variant="ghost"
@@ -948,4 +1025,9 @@
 			</Button>
 		</div>
 	</div>
+
+	<!-- Listening mode full-screen overlay -->
+	{#if listeningModeOpen}
+		<ListeningMode onclose={() => (listeningModeOpen = false)} />
+	{/if}
 {/if}

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

@@ -7,7 +7,10 @@
 		{ href: '/admin/audio', label: () => m.admin_nav_audio() },
 		{ href: '/admin/translation', label: () => m.admin_nav_translation() },
 		{ href: '/admin/changelog', label: () => m.admin_nav_changelog() },
-		{ href: '/admin/image-gen', label: () => m.admin_nav_image_gen() }
+		{ 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/ai-jobs', label: () => m.admin_nav_ai_jobs() }
 	];
 
 	const externalLinks = [
@@ -17,6 +20,7 @@
 		{ href: 'https://logs.libnovel.cc', label: () => m.admin_nav_logs() },
 		{ href: 'https://uptime.libnovel.cc', label: () => m.admin_nav_uptime() },
 		{ href: 'https://push.libnovel.cc', label: () => m.admin_nav_push() },
+		{ href: 'https://grafana.libnovel.cc', label: () => m.admin_nav_grafana() },
 		{ href: 'https://gitea.kalekber.cc/kamil/libnovel', label: () => m.admin_nav_gitea() }
 	];
 

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

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { listImageModels } from '$lib/server/scraper';
+import { log } from '$lib/server/logger';
+
+export interface ImageModelInfo {
+	id: string;
+	label: string;
+	provider: string;
+}
+
+export const load: PageServerLoad = async () => {
+	// Parent layout already guards admin role.
+	let imgModels: ImageModelInfo[] = [];
+	try {
+		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/catalogue-tools/+page.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// svelte-ignore state_referenced_locally
+	const imgModels = data.imgModels ?? [];
+
+	// ── Config persistence ────────────────────────────────────────────────────────
+	const CONFIG_KEY = 'admin_catalogue_tools_v1';
+
+	interface SavedConfig {
+		imgModel: string;
+		numSteps: number;
+		width: number;
+		height: number;
+	}
+
+	function loadConfig(): Partial<SavedConfig> {
+		if (!browser) return {};
+		try {
+			const raw = localStorage.getItem(CONFIG_KEY);
+			return raw ? (JSON.parse(raw) as Partial<SavedConfig>) : {};
+		} catch { return {}; }
+	}
+	function saveConfig() {
+		if (!browser) return;
+		localStorage.setItem(CONFIG_KEY, JSON.stringify({ imgModel, numSteps, width, height }));
+	}
+
+	const saved = loadConfig();
+
+	let imgModel = $state(saved.imgModel ?? (imgModels[0]?.id ?? ''));
+	let numSteps = $state(saved.numSteps ?? 20);
+	let width = $state(saved.width ?? 0);
+	let height = $state(saved.height ?? 0);
+
+	$effect(() => { void imgModel; void numSteps; void width; void height; saveConfig(); });
+
+	// ── Batch covers ──────────────────────────────────────────────────────────────
+	let fromItem = $state(0);
+	let toItem = $state(0);
+	let resumeJobID = $state('');
+	let running = $state(false);
+	let jobID = $state('');
+	let done = $state(0);
+	let total = $state(0);
+	let events = $state<{ slug: string; skipped?: boolean; error?: string }[]>([]);
+	let finished = $state(false);
+	let error = $state('');
+	let cancelling = $state(false);
+
+	let progress = $derived(total > 0 ? Math.round((done / total) * 100) : 0);
+
+	async function startBatch() {
+		running = true; finished = false; error = ''; done = 0; total = 0; events = []; jobID = ''; cancelling = false;
+
+		try {
+			const res = await fetch('/api/admin/catalogue/batch-covers', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					model: imgModel || undefined,
+					num_steps: numSteps || undefined,
+					width: width || undefined,
+					height: height || undefined,
+					from_item: fromItem || undefined,
+					to_item: toItem || undefined,
+					job_id: resumeJobID.trim() || undefined,
+				})
+			});
+			if (!res.ok) {
+				const body = await res.json().catch(() => ({}));
+				error = body.error ?? `Error ${res.status}`;
+				return;
+			}
+
+			const reader = res.body!.getReader();
+			const decoder = new TextDecoder();
+			let buf = '';
+
+			outer: while (true) {
+				const { value, done: streamDone } = await reader.read();
+				if (streamDone) break;
+				buf += decoder.decode(value, { stream: true });
+				const lines = buf.split('\n');
+				buf = lines.pop() ?? '';
+				for (const line of lines) {
+					if (!line.startsWith('data: ')) continue;
+					const payload = line.slice(6).trim();
+					if (!payload) continue;
+					let evt: {
+						job_id?: string;
+						done?: number;
+						total?: number;
+						slug?: string;
+						skipped?: boolean;
+						error?: string;
+						finish?: boolean;
+					};
+					try { evt = JSON.parse(payload); } catch { continue; }
+
+					if (evt.job_id) jobID = evt.job_id;
+					if (evt.total != null) total = evt.total;
+					if (evt.done != null) done = evt.done;
+					if (evt.finish) { finished = true; running = false; break outer; }
+					if (evt.slug) {
+						events = [{ slug: evt.slug, skipped: evt.skipped, error: evt.error }, ...events].slice(0, 200);
+					}
+				}
+			}
+		} catch (e) {
+			error = String(e);
+		} finally {
+			running = false;
+		}
+	}
+
+	async function cancelBatch() {
+		if (!jobID) return;
+		cancelling = true;
+		try {
+			await fetch('/api/admin/catalogue/batch-covers/cancel', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ job_id: jobID })
+			});
+		} catch { /* ignore */ } finally {
+			cancelling = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Catalogue Tools — Admin</title>
+</svelte:head>
+
+<div class="space-y-8 max-w-4xl">
+	<div>
+		<h1 class="text-2xl font-bold text-(--color-text)">Catalogue Tools</h1>
+		<p class="text-(--color-muted) text-sm mt-1">Bulk AI operations for your book catalogue.</p>
+	</div>
+
+	<!-- Batch cover generation -->
+	<div class="space-y-4">
+		<h2 class="text-lg font-semibold text-(--color-text)">Batch Cover Generation</h2>
+		<p class="text-sm text-(--color-muted)">
+			Generates AI covers for every book that has no cover stored in MinIO.
+			Books with existing covers are skipped. The job can be cancelled at any time.
+		</p>
+
+		<!-- Config -->
+		<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 bg-(--color-surface) border border-(--color-border) rounded-xl p-4">
+			{#if imgModels.length > 0}
+				<div class="col-span-2 sm:col-span-4 space-y-1">
+					<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="img-model">Image model</label>
+					<select id="img-model" bind:value={imgModel}
+						class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)">
+						{#each imgModels as m}
+							<option value={m.id}>{m.label} — {m.provider}</option>
+						{/each}
+					</select>
+				</div>
+			{/if}
+			<div class="space-y-1">
+				<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="steps">Steps</label>
+				<input id="steps" type="number" bind:value={numSteps} min="1" max="50"
+					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)" />
+			</div>
+			<div class="space-y-1">
+				<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="width">Width <span class="font-normal">(0=default)</span></label>
+				<input id="width" type="number" bind:value={width} min="0" step="64"
+					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)" />
+			</div>
+			<div class="space-y-1">
+				<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="height">Height <span class="font-normal">(0=default)</span></label>
+				<input id="height" type="number" bind:value={height} min="0" step="64"
+					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)" />
+			</div>
+			<div class="space-y-1">
+				<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="from-item">From <span class="font-normal">(0=start)</span></label>
+				<input id="from-item" type="number" bind:value={fromItem} min="0"
+					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)" />
+			</div>
+			<div class="space-y-1">
+				<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="to-item">To <span class="font-normal">(0=end)</span></label>
+				<input id="to-item" type="number" bind:value={toItem} min="0"
+					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)" />
+			</div>
+			<div class="col-span-2 sm:col-span-4 space-y-1">
+				<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="resume-job">Resume job ID <span class="font-normal">(leave blank to start fresh)</span></label>
+				<input id="resume-job" type="text" bind:value={resumeJobID} placeholder="optional PB job ID"
+					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)" />
+			</div>
+		</div>
+
+		<!-- Controls -->
+		<div class="flex gap-3">
+			<button
+				onclick={startBatch}
+				disabled={running}
+				class="px-6 py-2.5 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm
+					hover:bg-(--color-brand-dim) transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+			>
+				{#if running}
+					<svg class="w-4 h-4 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-8v8H4z" />
+					</svg>
+					Running…
+				{:else}
+					Start batch
+				{/if}
+			</button>
+			{#if running && jobID}
+				<button
+					onclick={cancelBatch}
+					disabled={cancelling}
+					class="px-5 py-2.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-(--color-muted) text-sm
+						hover:text-(--color-text) transition-colors disabled:opacity-50"
+				>
+					{cancelling ? 'Cancelling…' : 'Cancel'}
+				</button>
+			{/if}
+		</div>
+
+		{#if error}
+			<p class="text-sm text-(--color-danger) bg-(--color-danger)/10 rounded-lg px-3 py-2">{error}</p>
+		{/if}
+
+		<!-- Progress -->
+		{#if total > 0 || running}
+			<div class="space-y-2">
+				<div class="flex items-center justify-between text-sm">
+					<span class="text-(--color-muted)">
+						{done} / {total} books processed
+						{#if finished} — done{/if}
+					</span>
+					<span class="text-(--color-muted)">{progress}%</span>
+				</div>
+				<div class="w-full h-2 bg-(--color-surface-2) rounded-full overflow-hidden">
+					<div
+						class="h-full rounded-full transition-all duration-300 {finished ? 'bg-green-500' : 'bg-(--color-brand)'}"
+						style="width: {progress}%"
+					></div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Event log -->
+		{#if events.length > 0}
+			<div class="bg-(--color-surface) border border-(--color-border) rounded-xl overflow-hidden">
+				<div class="px-4 py-2 border-b border-(--color-border)">
+					<p class="text-xs font-semibold text-(--color-muted) uppercase tracking-widest">Activity log (newest first)</p>
+				</div>
+				<div class="max-h-80 overflow-y-auto divide-y divide-(--color-border)">
+					{#each events as evt}
+						<div class="px-4 py-2 flex items-center gap-3 text-sm">
+							{#if evt.error}
+								<span class="w-2 h-2 rounded-full bg-(--color-danger) shrink-0"></span>
+								<span class="font-mono text-(--color-muted)">{evt.slug}</span>
+								<span class="text-(--color-danger) text-xs truncate">{evt.error}</span>
+							{:else if evt.skipped}
+								<span class="w-2 h-2 rounded-full bg-(--color-surface-2) shrink-0"></span>
+								<span class="font-mono text-(--color-muted)">{evt.slug}</span>
+								<span class="text-xs text-(--color-muted)">skipped (has cover)</span>
+							{:else}
+								<span class="w-2 h-2 rounded-full bg-green-500 shrink-0"></span>
+								<span class="font-mono text-(--color-text)">{evt.slug}</span>
+								<span class="text-xs text-green-400">generated</span>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

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,6 +1,7 @@
 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';
 
 export interface ImageModelInfo {
 	id: string;
@@ -11,18 +12,31 @@ export interface ImageModelInfo {
 	description: string;
 }
 
+export interface BookSummary {
+	slug: string;
+	title: string;
+	summary: string;
+	cover: string;
+}
+
 export const load: PageServerLoad = async () => {
 	// parent layout already guards admin role
-	try {
-		const res = await backendFetch('/api/admin/image-gen/models');
-		if (!res.ok) {
-			log.warn('admin/image-gen', 'failed to load models', { status: res.status });
-			return { models: [] as ImageModelInfo[] };
-		}
-		const data = await res.json();
-		return { models: (data.models ?? []) as ImageModelInfo[] };
-	} catch (e) {
-		log.warn('admin/image-gen', 'backend unreachable', { err: String(e) });
-		return { models: [] as ImageModelInfo[] };
+	const [models, booksResult] = await Promise.allSettled([
+		listImageModels<ImageModelInfo>(),
+		listBooks()
+	]);
+
+	if (models.status === 'rejected') {
+		log.warn('admin/image-gen', 'failed to load models', { err: String(models.reason) });
 	}
+
+	return {
+		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 ?? '',
+			cover: b.cover ?? ''
+		})) as BookSummary[]
+	};
 };

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

@@ -1,26 +1,121 @@
 <script lang="ts">
+	import { browser } from '$app/environment';
 	import type { PageData } from './$types';
-	import type { ImageModelInfo } from './+page.server';
+	import type { ImageModelInfo, BookSummary } from './+page.server';
 
 	let { data }: { data: PageData } = $props();
 
 	// ── Form state ───────────────────────────────────────────────────────────────
 	type ImageType = 'cover' | 'chapter';
+
+	const CONFIG_KEY = 'admin_image_gen_config_v1';
+
+	interface SavedConfig {
+		selectedModel: string;
+		numSteps: number;
+		guidance: number;
+		strength: number;
+		width: number;
+		height: number;
+		showAdvanced: boolean;
+	}
+
+	function loadConfig(): Partial<SavedConfig> {
+		if (!browser) return {};
+		try {
+			const raw = localStorage.getItem(CONFIG_KEY);
+			return raw ? (JSON.parse(raw) as Partial<SavedConfig>) : {};
+		} catch { return {}; }
+	}
+
+	function saveConfig() {
+		if (!browser) return;
+		const cfg: SavedConfig = { selectedModel, numSteps, guidance, strength, width, height, showAdvanced };
+		localStorage.setItem(CONFIG_KEY, JSON.stringify(cfg));
+	}
+
+	const saved = loadConfig();
+
 	let imageType = $state<ImageType>('cover');
 	let slug = $state('');
 	let chapter = $state<number>(1);
-	let selectedModel = $state('');
+	let selectedModel = $state(saved.selectedModel ?? '');
 	let prompt = $state('');
 	let referenceFile = $state<File | null>(null);
 	let referencePreviewUrl = $state('');
+	let useCoverAsRef = $state(false);
 
 	// Advanced
-	let showAdvanced = $state(false);
-	let numSteps = $state(20);
-	let guidance = $state(7.5);
-	let strength = $state(0.75);
-	let width = $state(1024);
-	let height = $state(1024);
+	let showAdvanced = $state(saved.showAdvanced ?? false);
+	let numSteps = $state(saved.numSteps ?? 20);
+	let guidance = $state(saved.guidance ?? 7.5);
+	let strength = $state(saved.strength ?? 0.75);
+	let width = $state(saved.width ?? 1024);
+	let height = $state(saved.height ?? 1024);
+
+	// Persist config on change
+	$effect(() => {
+		void selectedModel; void numSteps; void guidance; void strength;
+		void width; void height; void showAdvanced;
+		saveConfig();
+	});
+
+	// ── Book autocomplete ────────────────────────────────────────────────────────
+	// svelte-ignore state_referenced_locally
+	const books: BookSummary[] = data.books ?? [];
+	let slugInput = $state('');
+	let slugFocused = $state(false);
+	let selectedBook = $state<BookSummary | null>(null);
+
+	let bookSuggestions = $derived(
+		slugInput.trim().length === 0
+			? []
+			: books
+				.filter((b) =>
+					b.slug.includes(slugInput.toLowerCase()) ||
+					b.title.toLowerCase().includes(slugInput.toLowerCase())
+				)
+				.slice(0, 8)
+	);
+
+	function selectBook(b: BookSummary) {
+		selectedBook = b;
+		slug = b.slug;
+		slugInput = b.slug;
+		slugFocused = false;
+		// Reset cover-as-ref if no cover
+		if (!b.cover) useCoverAsRef = false;
+	}
+
+	function onSlugInput() {
+		slug = slugInput;
+		// If user edits away from selected book slug, deselect
+		if (selectedBook && slugInput !== selectedBook.slug) {
+			selectedBook = null;
+			useCoverAsRef = false;
+		}
+	}
+
+	// When useCoverAsRef toggled on, load the book cover as reference
+	$effect(() => {
+		if (!browser) return;
+		if (!useCoverAsRef || !selectedBook?.cover) {
+			if (useCoverAsRef) useCoverAsRef = false;
+			return;
+		}
+		// Fetch the cover image and set as referenceFile
+		(async () => {
+			try {
+				const res = await fetch(selectedBook!.cover);
+				const blob = await res.blob();
+				const ext = blob.type === 'image/jpeg' ? 'jpg' : blob.type === 'image/webp' ? 'webp' : 'png';
+				const file = new File([blob], `${selectedBook!.slug}-cover.${ext}`, { type: blob.type });
+				handleReferenceFile(file);
+			} catch {
+				useCoverAsRef = false;
+			}
+		})();
+	});
 
 	// ── Generation state ─────────────────────────────────────────────────────────
 	let generating = $state(false);
@@ -50,18 +145,13 @@
 	let saveSuccess = $state(false);
 
 	// ── Model helpers ────────────────────────────────────────────────────────────
-	const models = data.models as ImageModelInfo[];
+	// svelte-ignore state_referenced_locally
+	const models: ImageModelInfo[] = data.models ?? [];
 
-	let filteredModels = $derived(
-		referenceFile
-			? models // show all; warn on ones without ref support
-			: models
-	);
-
-	let coverModels = $derived(filteredModels.filter((m) => m.recommended_for.includes('cover')));
-	let chapterModels = $derived(filteredModels.filter((m) => m.recommended_for.includes('chapter')));
+	let coverModels = $derived(models.filter((m) => m.recommended_for.includes('cover')));
+	let chapterModels = $derived(models.filter((m) => m.recommended_for.includes('chapter')));
 	let otherModels = $derived(
-		filteredModels.filter(
+		models.filter(
 			(m) => !m.recommended_for.includes('cover') && !m.recommended_for.includes('chapter')
 		)
 	);
@@ -74,12 +164,10 @@
 		}
 	});
 
-	// Reset model selection when type changes if current selection no longer fits
 	$effect(() => {
-		void imageType; // track
+		void imageType;
 		const preferred = imageType === 'cover' ? coverModels : chapterModels;
 		if (preferred.length > 0) {
-			// only auto-switch if current model isn't in preferred list for this type
 			const current = models.find((m) => m.id === selectedModel);
 			if (!current || !current.recommended_for.includes(imageType)) {
 				selectedModel = preferred[0].id;
@@ -90,14 +178,96 @@
 	// ── Prompt templates ────────────────────────────────────────────────────────
 	let promptTemplate = $derived(
 		imageType === 'cover'
-			? `Book cover for "${slug || 'untitled novel'}", a fantasy adventure novel. Epic scene with dramatic lighting, professional book cover art, cinematic composition, highly detailed, 4K.`
-			: `Illustration for chapter ${chapter} of "${slug || 'untitled novel'}". Dramatic moment, vivid colors, anime-inspired style, detailed background, cinematic lighting.`
+			? `Book cover for "${slugInput || 'untitled novel'}", a fantasy adventure novel. Epic scene with dramatic lighting, professional book cover art, cinematic composition, highly detailed, 4K.`
+			: `Illustration for chapter ${chapter} of "${slugInput || 'untitled novel'}". Dramatic moment, vivid colors, anime-inspired style, detailed background, cinematic lighting.`
 	);
 
 	function applyTemplate() {
 		prompt = promptTemplate;
 	}
 
+	function injectDescription() {
+		const desc = selectedBook?.summary?.trim();
+		if (!desc) return;
+		const snippet = desc.length > 300 ? desc.slice(0, 300) + '…' : desc;
+		prompt = prompt ? `${prompt}\n\nBook description: ${snippet}` : `Book description: ${snippet}`;
+	}
+
+	// ── Auto-prompt ──────────────────────────────────────────────────────────────
+	let autoPrompting = $state(false);
+	let autoPromptError = $state('');
+
+	async function autoGeneratePrompt() {
+		if (!slug.trim() || autoPrompting) return;
+		autoPrompting = true;
+		autoPromptError = '';
+		try {
+			const res = await fetch('/api/admin/image-gen/auto-prompt', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slug: slug.trim(), type: imageType, chapter: imageType === 'chapter' ? chapter : 0 })
+			});
+			const body = await res.json().catch(() => ({}));
+			if (!res.ok) {
+				autoPromptError = body.error ?? `Error ${res.status}`;
+				return;
+			}
+			prompt = body.prompt ?? '';
+		} catch {
+			autoPromptError = 'Network error.';
+		} finally {
+			autoPrompting = false;
+		}
+	}
+
+	// ── Style presets ────────────────────────────────────────────────────────────
+	const PRESETS_KEY = 'admin_image_gen_presets_v1';
+
+	interface StylePreset {
+		name: string;
+		prompt: string;
+	}
+
+	function loadPresets(): StylePreset[] {
+		if (!browser) return [];
+		try {
+			const raw = localStorage.getItem(PRESETS_KEY);
+			return raw ? (JSON.parse(raw) as StylePreset[]) : [];
+		} catch { return []; }
+	}
+
+	function savePresets(p: StylePreset[]) {
+		if (!browser) return;
+		localStorage.setItem(PRESETS_KEY, JSON.stringify(p));
+	}
+
+	let presets = $state<StylePreset[]>(loadPresets());
+	let newPresetName = $state('');
+	let showPresets = $state(false);
+
+	function saveCurrentAsPreset() {
+		const name = newPresetName.trim();
+		if (!name || !prompt.trim()) return;
+		const existing = presets.findIndex((p) => p.name === name);
+		const updated = [...presets];
+		if (existing >= 0) updated[existing] = { name, prompt };
+		else updated.push({ name, prompt });
+		presets = updated;
+		savePresets(updated);
+		newPresetName = '';
+	}
+
+	function applyPreset(p: StylePreset) {
+		prompt = p.prompt;
+		showPresets = false;
+	}
+
+	function deletePreset(name: string) {
+		const updated = presets.filter((p) => p.name !== name);
+		presets = updated;
+		savePresets(updated);
+	}
+
 	// ── Reference image handling ─────────────────────────────────────────────────
 	let dragOver = $state(false);
 
@@ -110,17 +280,22 @@
 	function onFileInput(e: Event) {
 		const input = e.target as HTMLInputElement;
 		handleReferenceFile(input.files?.[0] ?? null);
+		useCoverAsRef = false;
 	}
 
 	function onDrop(e: DragEvent) {
 		e.preventDefault();
 		dragOver = false;
 		const file = e.dataTransfer?.files[0];
-		if (file && file.type.startsWith('image/')) handleReferenceFile(file);
+		if (file && file.type.startsWith('image/')) {
+			handleReferenceFile(file);
+			useCoverAsRef = false;
+		}
 	}
 
 	function clearReference() {
 		handleReferenceFile(null);
+		useCoverAsRef = false;
 		const input = document.getElementById('ref-file-input') as HTMLInputElement | null;
 		if (input) input.value = '';
 	}
@@ -180,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;
 			}
 
@@ -219,7 +400,6 @@
 		saveSuccess = false;
 
 		try {
-			// Extract the raw base64 from the data URL (data:<mime>;base64,<b64>)
 			const b64 = result.imageSrc.split(',')[1];
 			const res = await fetch('/api/admin/image-gen/save-cover', {
 				method: 'POST',
@@ -308,13 +488,63 @@
 					<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="slug-input">
 						Book slug
 					</label>
-					<input
-						id="slug-input"
-						type="text"
-						bind:value={slug}
-						placeholder="e.g. shadow-slave"
-						class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
-					/>
+					<!-- Autocomplete wrapper -->
+					<div class="relative">
+						<input
+							id="slug-input"
+							type="text"
+							bind:value={slugInput}
+							oninput={onSlugInput}
+							onfocus={() => (slugFocused = true)}
+							onblur={() => setTimeout(() => { slugFocused = false; }, 150)}
+							placeholder="e.g. shadow-slave"
+							autocomplete="off"
+							class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
+						/>
+						{#if slugFocused && bookSuggestions.length > 0}
+							<ul class="absolute z-50 top-full left-0 right-0 mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl overflow-hidden max-h-56 overflow-y-auto">
+								{#each bookSuggestions as b}
+									<!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+									<li
+										role="option"
+										aria-selected={selectedBook?.slug === b.slug}
+										onmousedown={() => selectBook(b)}
+										class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-(--color-surface-3) transition-colors"
+									>
+										{#if b.cover}
+											<img src={b.cover} alt="" class="w-8 h-10 object-cover rounded shrink-0" />
+										{:else}
+											<div class="w-8 h-10 rounded bg-(--color-surface-3) shrink-0"></div>
+										{/if}
+										<div class="min-w-0">
+											<p class="text-sm text-(--color-text) truncate">{b.title}</p>
+											<p class="text-xs text-(--color-muted) truncate font-mono">{b.slug}</p>
+										</div>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</div>
+					<!-- Book info pill when a book is selected -->
+					{#if selectedBook}
+						<div class="flex items-center gap-2 mt-1">
+							<span class="text-xs text-(--color-success) flex items-center gap-1">
+								<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+									<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+								</svg>
+								{selectedBook.title}
+							</span>
+							{#if selectedBook.summary}
+								<button
+									onclick={injectDescription}
+									class="text-xs text-(--color-brand) hover:text-(--color-brand-dim) transition-colors"
+									title="Append book description to prompt"
+								>
+									+ inject description
+								</button>
+							{/if}
+						</div>
+					{/if}
 				</div>
 
 				{#if imageType === 'chapter'}
@@ -380,18 +610,45 @@
 			</div>
 
 			<!-- Prompt -->
-			<div class="space-y-1">
+			<div class="space-y-2">
 				<div class="flex items-center justify-between">
 					<label class="text-xs font-medium text-(--color-muted) uppercase tracking-wide" for="prompt-input">
 						Prompt
 					</label>
-					<button
-						onclick={applyTemplate}
-						class="text-xs text-(--color-brand) hover:text-(--color-brand-dim) transition-colors"
-					>
-						Use template
-					</button>
+					<div class="flex flex-wrap items-center gap-3">
+						{#if slug.trim()}
+							<button onclick={autoGeneratePrompt} disabled={autoPrompting}
+								class="text-xs text-(--color-brand) hover:text-(--color-brand-dim) transition-colors disabled:opacity-50">
+								{autoPrompting ? 'Generating…' : 'Auto-prompt'}
+							</button>
+						{/if}
+						{#if selectedBook?.summary}
+							<button onclick={injectDescription} class="text-xs text-(--color-muted) hover:text-(--color-text) transition-colors">
+								Inject description
+							</button>
+						{/if}
+						<button onclick={applyTemplate} class="text-xs text-(--color-muted) hover:text-(--color-text) transition-colors">
+							Use template
+						</button>
+						{#if presets.length > 0}
+							<button onclick={() => (showPresets = !showPresets)} class="text-xs text-(--color-muted) hover:text-(--color-text) transition-colors">
+								Presets ({presets.length})
+							</button>
+						{/if}
+					</div>
 				</div>
+
+				{#if showPresets && presets.length > 0}
+					<div class="bg-(--color-surface) border border-(--color-border) rounded-lg p-3 space-y-1.5">
+						{#each presets as p}
+							<div class="flex items-center gap-2 group">
+								<button onclick={() => applyPreset(p)} class="flex-1 text-left text-sm text-(--color-text) hover:text-(--color-brand) transition-colors truncate" title={p.prompt}>{p.name}</button>
+								<button onclick={() => deletePreset(p.name)} class="text-xs text-(--color-muted) hover:text-(--color-danger) transition-colors opacity-0 group-hover:opacity-100">delete</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
 				<textarea
 					id="prompt-input"
 					bind:value={prompt}
@@ -399,13 +656,42 @@
 					placeholder="Describe the image to generate…"
 					class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand) resize-y"
 				></textarea>
+				{#if autoPromptError}
+					<p class="text-xs text-(--color-danger)">{autoPromptError}</p>
+				{/if}
+
+				<div class="flex gap-2">
+					<input type="text" bind:value={newPresetName} placeholder="Preset name…"
+						class="flex-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-1.5 text-(--color-text) text-xs placeholder-zinc-500 focus:outline-none focus:ring-1 focus:ring-(--color-brand)" />
+					<button onclick={saveCurrentAsPreset} disabled={!newPresetName.trim() || !prompt.trim()}
+						class="px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-xs text-(--color-muted) hover:text-(--color-text) transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
+						Save preset
+					</button>
+				</div>
 			</div>
 
 			<!-- Reference image drop zone -->
 			<div class="space-y-1">
-				<p class="text-xs font-medium text-(--color-muted) uppercase tracking-wide">
-					Reference image <span class="normal-case font-normal text-(--color-muted)">(optional, img2img)</span>
-				</p>
+				<div class="flex items-center justify-between">
+					<p class="text-xs font-medium text-(--color-muted) uppercase tracking-wide">
+						Reference image <span class="normal-case font-normal text-(--color-muted)">(optional, img2img)</span>
+					</p>
+					{#if selectedBook?.cover && selectedModelInfo?.supports_ref}
+						<div class="flex items-center gap-1.5 cursor-pointer select-none">
+							<button
+								type="button"
+								role="switch"
+								aria-checked={useCoverAsRef}
+								aria-label="Use book cover as reference"
+								onclick={() => (useCoverAsRef = !useCoverAsRef)}
+								class="w-8 h-4 rounded-full transition-colors relative focus:outline-none focus:ring-1 focus:ring-(--color-brand) {useCoverAsRef ? 'bg-(--color-brand)' : 'bg-(--color-surface-3)'}"
+							>
+								<span class="absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white transition-transform {useCoverAsRef ? 'translate-x-4' : ''}"></span>
+							</button>
+							<span class="text-xs text-(--color-muted)">Use book cover</span>
+						</div>
+					{/if}
+				</div>
 				{#if referenceFile && referencePreviewUrl}
 					<div class="flex items-start gap-3 p-3 bg-(--color-surface-2) rounded-lg border border-(--color-border)">
 						<img
@@ -416,6 +702,9 @@
 						<div class="min-w-0 flex-1 space-y-0.5">
 							<p class="text-sm text-(--color-text) truncate">{referenceFile.name}</p>
 							<p class="text-xs text-(--color-muted)">{fmtBytes(referenceFile.size)}</p>
+							{#if useCoverAsRef}
+								<p class="text-xs text-(--color-brand)">Current book cover</p>
+							{/if}
 						</div>
 						<button
 							onclick={clearReference}
@@ -471,23 +760,30 @@
 
 				{#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">
-								<label class="text-xs text-(--color-muted)">Steps</label>
+								<label for="img-steps" class="text-xs text-(--color-muted)">Steps</label>
 								<span class="text-xs text-(--color-text) font-mono">{numSteps}</span>
 							</div>
-							<input type="range" min="1" max="20" step="1" bind:value={numSteps}
+							<input id="img-steps" type="range" min="1" max="20" step="1" bind:value={numSteps}
 								class="w-full accent-(--color-brand)" />
 						</div>
 
 						<!-- guidance -->
 						<div class="space-y-1">
 							<div class="flex justify-between">
-								<label class="text-xs text-(--color-muted)">Guidance</label>
+								<label for="img-guidance" class="text-xs text-(--color-muted)">Guidance</label>
 								<span class="text-xs text-(--color-text) font-mono">{guidance.toFixed(1)}</span>
 							</div>
-							<input type="range" min="1" max="20" step="0.5" bind:value={guidance}
+							<input id="img-guidance" type="range" min="1" max="20" step="0.5" bind:value={guidance}
 								class="w-full accent-(--color-brand)" />
 						</div>
 
@@ -495,10 +791,10 @@
 						{#if referenceFile}
 							<div class="space-y-1">
 								<div class="flex justify-between">
-									<label class="text-xs text-(--color-muted)">Strength</label>
+									<label for="img-strength" class="text-xs text-(--color-muted)">Strength</label>
 									<span class="text-xs text-(--color-text) font-mono">{strength.toFixed(2)}</span>
 								</div>
-								<input type="range" min="0" max="1" step="0.05" bind:value={strength}
+								<input id="img-strength" type="range" min="0" max="1" step="0.05" bind:value={strength}
 									class="w-full accent-(--color-brand)" />
 								<p class="text-xs text-(--color-muted)">0 = copy reference · 1 = ignore reference</p>
 							</div>
@@ -530,7 +826,6 @@
 					flex items-center justify-center gap-2"
 			>
 				{#if generating}
-					<!-- Spinner -->
 					<svg class="w-4 h-4 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-8v8H4z" />
@@ -553,7 +848,8 @@
 					<!-- Image -->
 					<img
 						src={result.imageSrc}
-						alt="Generated image"
+						alt=""
+						aria-label="Generated cover"
 						class="w-full object-contain max-h-[36rem] bg-zinc-950"
 					/>
 

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

@@ -0,0 +1,37 @@
+import type { PageServerLoad } from './$types';
+import { listTextModels } from '$lib/server/scraper';
+import { log } from '$lib/server/logger';
+import { listBooks } from '$lib/server/pocketbase';
+
+export interface BookSummary {
+	slug: string;
+	title: string;
+}
+
+export interface TextModelInfo {
+	id: string;
+	label: string;
+	provider: string;
+	context_size: number;
+	description: string;
+}
+
+export const load: PageServerLoad = async () => {
+	// Parent layout already guards admin role.
+	const [models, booksResult] = await Promise.allSettled([
+		listTextModels<TextModelInfo>(),
+		listBooks()
+	]);
+
+	if (models.status === 'rejected') {
+		log.warn('admin/text-gen', 'failed to load models', { err: String(models.reason) });
+	}
+
+	return {
+		models: models.status === 'fulfilled' ? models.value : ([] as TextModelInfo[]),
+		books: (booksResult.status === 'fulfilled' ? booksResult.value : []).map((b) => ({
+			slug: b.slug,
+			title: b.title
+		})) as BookSummary[]
+	};
+};