feat(scraper): remove HTMX UI — delete ui.go, extract helpers.go, drop goldmark dependency

.env.example

@@ -1,6 +1,26 @@
 # libnovel scraper — environment overrides
 # Copy to .env and adjust values; do NOT commit this file with real secrets.
 
+# ── Service ports (host-side) ─────────────────────────────────────────────────
+# Port the scraper HTTP API listens on (default 8080)
+SCRAPER_PORT=8080
+
+# Port PocketBase listens on (default 8090)
+POCKETBASE_PORT=8090
+
+# Port MinIO S3 API listens on (default 9000)
+MINIO_PORT=9000
+
+# Port MinIO web console listens on (default 9001)
+MINIO_CONSOLE_PORT=9001
+
+# Port Browserless Chrome listens on (default 3030)
+BROWSERLESS_PORT=3030
+
+# Port the SvelteKit UI listens on (default 3000)
+UI_PORT=3000
+
+# ── Browserless ───────────────────────────────────────────────────────────────
 # Browserless API token (leave empty to disable auth)
 BROWSERLESS_TOKEN=
 
@@ -23,6 +43,7 @@ BROWSERLESS_STRATEGY=direct
 # Set to direct to use plain HTTP, or content/scrape/cdp for browserless.
 BROWSERLESS_URL_STRATEGY=content
 
+# ── Scraper ───────────────────────────────────────────────────────────────────
 # Chapter worker goroutines (0 = NumCPU inside the container)
 SCRAPER_WORKERS=0
 
@@ -39,3 +60,28 @@ KOKORO_URL=http://kokoro:8880
 # Single voices: af_bella, af_sky, af_heart, am_adam, …
 # Mixed voices:  af_bella+af_sky  or  af_bella(2)+af_sky(1)  (weighted blend)
 KOKORO_VOICE=af_bella
+
+# ── MinIO / S3 object storage ─────────────────────────────────────────────────
+MINIO_ROOT_USER=admin
+MINIO_ROOT_PASSWORD=changeme123
+MINIO_BUCKET_CHAPTERS=libnovel-chapters
+MINIO_BUCKET_AUDIO=libnovel-audio
+
+# ── PocketBase ────────────────────────────────────────────────────────────────
+# Admin credentials (used by scraper + UI server-side)
+POCKETBASE_ADMIN_EMAIL=admin@libnovel.local
+POCKETBASE_ADMIN_PASSWORD=changeme123
+
+# ── SvelteKit UI ─────────────────────────────────────────────────────────────
+# Internal URL the SvelteKit server uses to reach the scraper API.
+# In docker-compose this is http://scraper:8080 (wired automatically).
+# Override here only if running the UI outside of docker-compose.
+SCRAPER_API_URL=http://localhost:8080
+
+# Internal URL the SvelteKit server uses to reach PocketBase.
+# In docker-compose this is http://pocketbase:8090 (wired automatically).
+POCKETBASE_URL=http://localhost:8090
+
+# Public MinIO URL reachable from the browser (for audio/presigned URLs).
+# In production, point this at your MinIO reverse-proxy or CDN domain.
+PUBLIC_MINIO_PUBLIC_URL=http://localhost:9000

docker-compose.yml

@@ -130,6 +130,32 @@ services:
       timeout: 5s
       retries: 3
 
+  # ─── SvelteKit UI ────────────────────────────────────────────────────────────
+  ui:
+    build:
+      context: ./ui
+      dockerfile: Dockerfile
+    container_name: libnovel-ui
+    restart: unless-stopped
+    depends_on:
+      scraper:
+        condition: service_healthy
+      pocketbase:
+        condition: service_healthy
+    environment:
+      SCRAPER_API_URL: "http://scraper:8080"
+      POCKETBASE_URL: "http://pocketbase:8090"
+      POCKETBASE_ADMIN_EMAIL: "${POCKETBASE_ADMIN_EMAIL:-admin@libnovel.local}"
+      POCKETBASE_ADMIN_PASSWORD: "${POCKETBASE_ADMIN_PASSWORD:-changeme123}"
+      PUBLIC_MINIO_PUBLIC_URL: "${PUBLIC_MINIO_PUBLIC_URL:-http://localhost:9000}"
+    ports:
+      - "${UI_PORT:-3000}:3000"
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3000/"]
+      interval: 15s
+      timeout: 5s
+      retries: 3
+
 volumes:
   static_books:
   minio_data:

scraper/go.mod

@@ -5,7 +5,6 @@ go 1.25.0
 require (
 	github.com/gorilla/websocket v1.5.3
 	github.com/minio/minio-go/v7 v7.0.98
-	github.com/yuin/goldmark v1.7.16
 	golang.org/x/net v0.51.0
 	gopkg.in/yaml.v3 v3.0.1
 )

scraper/go.sum

@@ -31,8 +31,6 @@ github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsT
 github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/tinylib/msgp v1.6.1 h1:ESRv8eL3u+DNHUoSAAQRE50Hm162zqAnBoGv9PzScPY=
 github.com/tinylib/msgp v1.6.1/go.mod h1:RSp0LW9oSxFut3KzESt5Voq4GVWyS+PSulT77roAqEA=
-github.com/yuin/goldmark v1.7.16 h1:n+CJdUxaFMiDUNnWC3dMWCIQJSkxH4uz3ZwQBkAlVNE=
-github.com/yuin/goldmark v1.7.16/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg=
 go.yaml.in/yaml/v3 v3.0.4 h1:tfq32ie2Jv2UxXFdLJdh3jXuOzWiL1fo0bu/FbuKpbc=
 go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
 golang.org/x/crypto v0.48.0 h1:/VRzVqiRSggnhY7gNRxPauEQ5Drw9haKdM0jqfcCFts=

scraper/internal/server/helpers.go

@@ -0,0 +1,62 @@
+package server
+
+import (
+	"regexp"
+	"strings"
+)
+
+// kokoroVoices is the built-in fallback list of voices shipped with Kokoro-FastAPI.
+// Used when the live GET /v1/audio/voices request to Kokoro fails.
+// Grouped by language prefix:
+//
+//	af_ / am_  American English female / male
+//	bf_ / bm_  British English female / male
+//	ef_ / em_  Spanish female / male
+//	ff_        French female
+//	hf_ / hm_  Hindi female / male
+//	if_ / im_  Italian female / male
+//	jf_ / jm_  Japanese female / male
+//	pf_ / pm_  Portuguese female / male
+//	zf_ / zm_  Chinese female / male
+var kokoroVoices = []string{
+	// American English
+	"af_alloy", "af_aoede", "af_bella", "af_heart", "af_jadzia",
+	"af_jessica", "af_kore", "af_nicole", "af_nova", "af_river",
+	"af_sarah", "af_sky",
+	"am_adam", "am_echo", "am_eric", "am_fenrir", "am_liam",
+	"am_michael", "am_onyx", "am_puck",
+	// British English
+	"bf_alice", "bf_emma", "bf_lily",
+	"bm_daniel", "bm_fable", "bm_george", "bm_lewis",
+	// Spanish
+	"ef_dora", "em_alex",
+	// French
+	"ff_siwis",
+	// Hindi
+	"hf_alpha", "hf_beta", "hm_omega", "hm_psi",
+	// Italian
+	"if_sara", "im_nicola",
+	// Japanese
+	"jf_alpha", "jf_gongitsune", "jf_nezumi", "jf_tebukuro", "jm_kumo",
+	// Portuguese
+	"pf_dora", "pm_alex",
+	// Chinese
+	"zf_xiaobei", "zf_xiaoni", "zf_xiaoxiao", "zf_xiaoyi",
+	"zm_yunjian", "zm_yunxi", "zm_yunxia", "zm_yunyang",
+}
+
+// stripMarkdown removes common markdown syntax from src, returning plain text
+// suitable for TTS or display. Not a full markdown parser — handles the most
+// common constructs (headings, bold/italic, code blocks, links, blockquotes).
+func stripMarkdown(src string) string {
+	src = regexp.MustCompile(`(?m)^#{1,6}\s+`).ReplaceAllString(src, "")
+	src = regexp.MustCompile(`\*{1,3}|_{1,3}`).ReplaceAllString(src, "")
+	src = regexp.MustCompile("(?s)```.*?```").ReplaceAllString(src, "")
+	src = regexp.MustCompile("`[^`]*`").ReplaceAllString(src, "")
+	src = regexp.MustCompile(`\[([^\]]+)\]\([^)]+\)`).ReplaceAllString(src, "$1")
+	src = regexp.MustCompile(`!\[[^\]]*\]\([^)]+\)`).ReplaceAllString(src, "")
+	src = regexp.MustCompile(`(?m)^>\s?`).ReplaceAllString(src, "")
+	src = regexp.MustCompile(`(?m)^[-*_]{3,}\s*$`).ReplaceAllString(src, "")
+	src = regexp.MustCompile(`\n{3,}`).ReplaceAllString(src, "\n\n")
+	return strings.TrimSpace(src)
+}

scraper/internal/server/server.go

@@ -1,10 +1,18 @@
-// Package server exposes the scraper as an HTTP service.
+// Package server exposes the scraper as an HTTP API service.
 //
 // Endpoints:
 //
-//	POST /scrape          — enqueue a full catalogue scrape
-//	POST /scrape/book     — enqueue a single-book scrape (JSON body: {"url":"..."})
-//	GET  /health          — liveness probe
+//	POST /scrape                          — enqueue a full catalogue scrape
+//	POST /scrape/book                     — enqueue a single-book scrape (JSON body: {"url":"..."})
+//	GET  /health                          — liveness probe
+//	GET  /api/progress                    — get reading progress map (session-scoped)
+//	POST /api/progress/{slug}             — set reading progress
+//	DELETE /api/progress/{slug}           — delete reading progress
+//	GET  /api/presign/chapter/{slug}/{n}  — presigned MinIO URL for chapter markdown
+//	GET  /api/presign/audio/{slug}/{n}    — presigned MinIO URL for chapter audio
+//	GET  /api/chapter-text/{slug}/{n}     — plain text of chapter (markdown stripped)
+//	POST /api/audio/{slug}/{n}            — trigger Kokoro audio generation
+//	GET  /api/audio-proxy/{slug}/{n}      — proxy generated audio from Kokoro
 package server
 
 import (
@@ -115,20 +123,11 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	mux.HandleFunc("GET /api/progress", s.handleGetProgress)
 	mux.HandleFunc("POST /api/progress/{slug}", s.handleSetProgress)
 	mux.HandleFunc("DELETE /api/progress/{slug}", s.handleDeleteProgress)
-	// UI routes
-	mux.HandleFunc("GET /", s.handleHome)
-	mux.HandleFunc("GET /scrape", s.handleScrape)
-	mux.HandleFunc("GET /ranking", s.handleRanking)
-	mux.HandleFunc("POST /ranking/refresh", s.handleRankingRefresh)
-	mux.HandleFunc("GET /ranking/view", s.handleRankingView)
-	mux.HandleFunc("GET /books/{slug}", s.handleBook)
-	mux.HandleFunc("GET /books/{slug}/chapters/{n}", s.handleChapter)
-	mux.HandleFunc("GET /books/{slug}/chapters-page", s.handleBookChaptersPage)
-	mux.HandleFunc("POST /ui/scrape/book", s.handleUIScrapeBook)
-	mux.HandleFunc("GET /ui/scrape/status", s.handleUIScrapeStatus)
-	mux.HandleFunc("GET /ui/ranking/status", s.handleRankingStatus)
-	// Plain-text chapter content for browser-side TTS
-	mux.HandleFunc("GET /ui/chapter-text/{slug}/{n}", s.handleChapterText)
+	// Presigned URL API (for SvelteKit UI)
+	mux.HandleFunc("GET /api/presign/chapter/{slug}/{n}", s.handlePresignChapter)
+	mux.HandleFunc("GET /api/presign/audio/{slug}/{n}", s.handlePresignAudio)
+	// Plain-text chapter content (used server-side for audio generation)
+	mux.HandleFunc("GET /api/chapter-text/{slug}/{n}", s.handleChapterText)
 	// Server-side audio generation via Kokoro /v1/audio/speech.
 	// Generation can take several minutes, so wrap in its own timeout handler.
 	audioGenHandler := http.TimeoutHandler(
@@ -136,9 +135,9 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 		10*time.Minute,
 		`{"error":"audio generation timed out"}`,
 	)
-	mux.Handle("POST /ui/audio/{slug}/{n}", audioGenHandler)
+	mux.Handle("POST /api/audio/{slug}/{n}", audioGenHandler)
 	// Proxy route: fetches the generated file from Kokoro /v1/download/{filename}.
-	mux.HandleFunc("GET /ui/audio-proxy/{slug}/{n}", s.handleAudioProxy)
+	mux.HandleFunc("GET /api/audio-proxy/{slug}/{n}", s.handleAudioProxy)
 
 	srv := &http.Server{
 		Addr:         s.addr,
@@ -286,7 +285,7 @@ func (s *Server) handleDeleteProgress(w http.ResponseWriter, r *http.Request) {
 }
 
 // handleChapterText returns the plain text of a chapter (markdown stripped)
-// for browser-side TTS. The browser POSTs this directly to Kokoro-FastAPI.
+// for server-side audio generation. Called by handleAudioGenerate internally.
 func (s *Server) handleChapterText(w http.ResponseWriter, r *http.Request) {
 	slug := r.PathValue("slug")
 	n, err := strconv.Atoi(r.PathValue("n"))
@@ -306,7 +305,7 @@ func (s *Server) handleChapterText(w http.ResponseWriter, r *http.Request) {
 
 // ─── Audio generation via Kokoro /v1/audio/speech ────────────────────────────
 //
-// handleAudioGenerate handles POST /ui/audio/{slug}/{n}.
+// handleAudioGenerate handles POST /api/audio/{slug}/{n}.
 //
 // It calls Kokoro's POST /v1/audio/speech with return_download_link=true.
 // Kokoro generates the audio, saves it to its own temp storage, and returns
@@ -460,9 +459,9 @@ func (s *Server) generateSpeech(ctx context.Context, text, voice string, speed f
 }
 
 // writeAudioResponse writes the JSON response for a generated audio chapter.
-// The URL points to our proxy handler which fetches from Kokoro on demand.
+// The URL points to our proxy handler GET /api/audio-proxy/{slug}/{n}.
 func (s *Server) writeAudioResponse(w http.ResponseWriter, slug string, n int, voice string, speed float64, filename string) {
-	proxyURL := fmt.Sprintf("/ui/audio-proxy/%s/%d?voice=%s&speed=%.1f", slug, n, voice, speed)
+	proxyURL := fmt.Sprintf("/api/audio-proxy/%s/%d?voice=%s&speed=%.1f", slug, n, voice, speed)
 	w.Header().Set("Content-Type", "application/json")
 	_ = json.NewEncoder(w).Encode(map[string]interface{}{
 		"url":      proxyURL,
@@ -470,7 +469,7 @@ func (s *Server) writeAudioResponse(w http.ResponseWriter, slug string, n int, v
 	})
 }
 
-// handleAudioProxy handles GET /ui/audio-proxy/{slug}/{n}.
+// handleAudioProxy handles GET /api/audio-proxy/{slug}/{n}.
 // It looks up the Kokoro download filename for this chapter (voice/speed) and
 // proxies GET /v1/download/{filename} from the Kokoro server back to the browser.
 func (s *Server) handleAudioProxy(w http.ResponseWriter, r *http.Request) {
@@ -526,6 +525,64 @@ func (s *Server) handleAudioProxy(w http.ResponseWriter, r *http.Request) {
 	_, _ = io.Copy(w, resp.Body)
 }
 
+// ─── Presigned URL handlers ───────────────────────────────────────────────────
+
+// handlePresignChapter handles GET /api/presign/chapter/{slug}/{n}.
+// Returns a short-lived presigned MinIO URL for the chapter markdown object.
+// The SvelteKit server uses this to fetch chapter content server-side.
+func (s *Server) handlePresignChapter(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 || slug == "" {
+		http.Error(w, `{"error":"invalid params"}`, http.StatusBadRequest)
+		return
+	}
+
+	url, err := s.store.PresignChapter(r.Context(), slug, n, 15*time.Minute)
+	if err != nil {
+		s.log.Error("presign chapter failed", "slug", slug, "n", n, "err", err)
+		http.Error(w, `{"error":"presign failed"}`, http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(map[string]string{"url": url})
+}
+
+// handlePresignAudio handles GET /api/presign/audio/{slug}/{n}.
+// Returns a presigned MinIO URL for the audio object (if it has been generated).
+// Query params: voice, speed (optional, defaults to server defaults).
+func (s *Server) handlePresignAudio(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 || slug == "" {
+		http.Error(w, `{"error":"invalid params"}`, http.StatusBadRequest)
+		return
+	}
+
+	voice := r.URL.Query().Get("voice")
+	if voice == "" {
+		voice = s.kokoroVoice
+	}
+	speed := 1.0
+	if sv := r.URL.Query().Get("speed"); sv != "" {
+		if v, err := strconv.ParseFloat(sv, 64); err == nil && v > 0 {
+			speed = v
+		}
+	}
+
+	key := s.store.AudioObjectKey(slug, n, voice, speed)
+	url, err := s.store.PresignAudio(r.Context(), key, 1*time.Hour)
+	if err != nil {
+		s.log.Error("presign audio failed", "slug", slug, "n", n, "err", err)
+		http.Error(w, `{"error":"presign failed"}`, http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(map[string]string{"url": url})
+}
+
 func (s *Server) handleScrapeCatalogue(w http.ResponseWriter, r *http.Request) {
 	cfg := s.oCfg
 	cfg.SingleBookURL = "" // full catalogue

scraper/internal/storage/hybrid.go

@@ -222,6 +222,16 @@ func (h *HybridStore) AudioObjectKey(slug string, n int, voice string, speed flo
 	return AudioObjectKey(slug, n, voice, speed)
 }
 
+// ─── Presigned URLs ───────────────────────────────────────────────────────────
+
+func (h *HybridStore) PresignChapter(ctx context.Context, slug string, n int, expires time.Duration) (string, error) {
+	return h.minio.PresignChapter(ctx, slug, 0, n, expires)
+}
+
+func (h *HybridStore) PresignAudio(ctx context.Context, key string, expires time.Duration) (string, error) {
+	return h.minio.PresignAudio(ctx, key, expires)
+}
+
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
 func recToBookMeta(rec map[string]interface{}) scraper.BookMeta {

scraper/internal/storage/minio.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"io"
 	"strings"
+	"time"
 
 	"github.com/minio/minio-go/v7"
 	"github.com/minio/minio-go/v7/pkg/credentials"
@@ -165,6 +166,29 @@ func (m *MinioClient) AudioExists(ctx context.Context, key string) bool {
 	return err == nil
 }
 
+// ─── Presigned URLs ───────────────────────────────────────────────────────────
+
+// PresignChapter returns a presigned GET URL for a chapter object, valid for
+// the given duration. The URL is signed with the MinIO credentials and can be
+// fetched directly by the browser without authentication.
+func (m *MinioClient) PresignChapter(ctx context.Context, slug string, vol, n int, expires time.Duration) (string, error) {
+	key := chapterKey(slug, vol, n)
+	u, err := m.c.PresignedGetObject(ctx, m.cfg.BucketChapters, key, expires, nil)
+	if err != nil {
+		return "", fmt.Errorf("minio: presign chapter %s: %w", key, err)
+	}
+	return u.String(), nil
+}
+
+// PresignAudio returns a presigned GET URL for an audio object.
+func (m *MinioClient) PresignAudio(ctx context.Context, key string, expires time.Duration) (string, error) {
+	u, err := m.c.PresignedGetObject(ctx, m.cfg.BucketAudio, key, expires, nil)
+	if err != nil {
+		return "", fmt.Errorf("minio: presign audio %s: %w", key, err)
+	}
+	return u.String(), nil
+}
+
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
 // sanitiseVoice converts a voice name to a filename-safe string.

scraper/internal/storage/store.go

@@ -121,4 +121,12 @@ type Store interface {
 
 	// AudioObjectKey returns the MinIO object key for a cached audio file.
 	AudioObjectKey(slug string, n int, voice string, speed float64) string
+
+	// ── Presigned URLs ─────────────────────────────────────────────────────
+
+	// PresignChapter returns a presigned GET URL for a chapter markdown object.
+	PresignChapter(ctx context.Context, slug string, n int, expires time.Duration) (string, error)
+
+	// PresignAudio returns a presigned GET URL for an audio object.
+	PresignAudio(ctx context.Context, key string, expires time.Duration) (string, error)
 }

ui/.env.example

@@ -0,0 +1,13 @@
+# libnovel UI — environment variables
+# Copy to .env and adjust; do NOT commit with real secrets.
+
+# Public URL of the scraper API (used by SvelteKit server-side load functions)
+# In docker-compose this is the internal service name
+SCRAPER_API_URL=http://localhost:8080
+
+# Public URL of PocketBase (used by SvelteKit server-side load functions)
+POCKETBASE_URL=http://localhost:8090
+
+# Public-facing MinIO URL (used to rewrite presigned URLs for the browser)
+# In dev this is localhost; in prod set to your MinIO public domain
+PUBLIC_MINIO_PUBLIC_URL=http://localhost:9000

ui/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

ui/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

ui/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# ── Runtime image ──────────────────────────────────────────────────────────────
+FROM node:22-alpine
+WORKDIR /app
+
+# adapter-node produces a standalone build/
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/package.json ./
+
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOST=0.0.0.0
+
+EXPOSE 3000
+CMD ["node", "build"]

ui/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.4 create --template minimal --types ts --install npm ui
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

ui/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "ui",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-node": "^5.5.4",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/vite": "^4.2.1",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.4.2",
+		"tailwindcss": "^4.2.1",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"marked": "^17.0.3",
+		"pocketbase": "^0.26.8"
+	}
+}

ui/src/app.css

@@ -0,0 +1,55 @@
+@import "tailwindcss";
+
+@theme {
+	--color-brand: #f59e0b;       /* amber-400 */
+	--color-brand-dim: #d97706;   /* amber-600 */
+	--color-surface: #18181b;     /* zinc-900 */
+	--color-surface-2: #27272a;   /* zinc-800 */
+	--color-surface-3: #3f3f46;   /* zinc-700 */
+	--color-muted: #a1a1aa;       /* zinc-400 */
+	--color-text: #f4f4f5;        /* zinc-100 */
+}
+
+html {
+	background-color: var(--color-surface);
+	color: var(--color-text);
+}
+
+/* ── Chapter prose ─────────────────────────────────────────────────── */
+.prose-chapter {
+	max-width: 72ch;
+	line-height: 1.85;
+	font-size: 1.05rem;
+	color: #d4d4d8; /* zinc-300 */
+}
+
+.prose-chapter h1,
+.prose-chapter h2,
+.prose-chapter h3 {
+	color: #f4f4f5;
+	font-weight: 700;
+	margin-top: 1.5em;
+	margin-bottom: 0.5em;
+}
+
+.prose-chapter h1 { font-size: 1.4rem; }
+.prose-chapter h2 { font-size: 1.2rem; }
+.prose-chapter h3 { font-size: 1.05rem; }
+
+.prose-chapter p {
+	margin-bottom: 1.2em;
+}
+
+.prose-chapter em {
+	color: #a1a1aa;
+}
+
+.prose-chapter strong {
+	color: #f4f4f5;
+}
+
+.prose-chapter hr {
+	border-color: #3f3f46;
+	margin: 2em 0;
+}
+

ui/src/app.d.ts

@@ -0,0 +1,15 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {
+			sessionId: string;
+		}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

ui/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

ui/src/hooks.server.ts

@@ -0,0 +1,23 @@
+import type { Handle } from '@sveltejs/kit';
+import { randomBytes } from 'node:crypto';
+
+const SESSION_COOKIE = 'libnovel_session';
+const ONE_YEAR = 60 * 60 * 24 * 365;
+
+export const handle: Handle = async ({ event, resolve }) => {
+	let sessionId = event.cookies.get(SESSION_COOKIE);
+
+	if (!sessionId) {
+		sessionId = randomBytes(16).toString('hex');
+		event.cookies.set(SESSION_COOKIE, sessionId, {
+			path: '/',
+			httpOnly: true,
+			sameSite: 'lax',
+			maxAge: ONE_YEAR
+		});
+	}
+
+	event.locals.sessionId = sessionId;
+
+	return resolve(event);
+};

ui/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

ui/src/lib/components/AudioPlayer.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	/**
+	 * AudioPlayer — fetches a presigned MinIO URL for the chapter audio
+	 * and renders a native <audio> element with custom controls.
+	 *
+	 * The audio is generated server-side by Kokoro and cached.
+	 * If no audio exists yet, the user can trigger generation via the scraper API.
+	 */
+
+	interface Props {
+		slug: string;
+		chapter: number;
+		voice?: string;
+		speed?: number;
+	}
+
+	let { slug, chapter, voice = 'af_bella', speed = 1.0 }: Props = $props();
+
+	type Status = 'idle' | 'loading' | 'ready' | 'error' | 'generating';
+
+	let status = $state<Status>('idle');
+	let audioUrl = $state('');
+	let errorMsg = $state('');
+	let audioEl = $state<HTMLAudioElement | null>(null);
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let isPlaying = $state(false);
+
+	async function loadAudio() {
+		status = 'loading';
+		errorMsg = '';
+		try {
+			const params = new URLSearchParams({
+				slug,
+				n: String(chapter),
+				voice,
+				speed: String(speed)
+			});
+			const res = await fetch(`/api/presign/audio?${params.toString()}`);
+			if (res.status === 404) {
+				status = 'idle';
+				return;
+			}
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const data = (await res.json()) as { url: string };
+			audioUrl = data.url;
+			status = 'ready';
+		} catch (e) {
+			status = 'error';
+			errorMsg = String(e);
+		}
+	}
+
+	async function generateAudio() {
+		status = 'generating';
+		errorMsg = '';
+		try {
+		const res = await fetch(`/api/audio/${slug}/${chapter}`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ voice, speed })
+		});
+			if (!res.ok) throw new Error(`Generation failed: ${res.status}`);
+			// After generation, fetch the presigned URL
+			await loadAudio();
+		} catch (e) {
+			status = 'error';
+			errorMsg = `Generation failed: ${e}`;
+		}
+	}
+
+	function formatTime(s: number): string {
+		const m = Math.floor(s / 60);
+		const sec = Math.floor(s % 60);
+		return `${m}:${sec.toString().padStart(2, '0')}`;
+	}
+
+	function togglePlay() {
+		if (!audioEl) return;
+		if (isPlaying) {
+			audioEl.pause();
+		} else {
+			audioEl.play();
+		}
+	}
+
+	function seek(e: Event) {
+		if (!audioEl) return;
+		const input = e.target as HTMLInputElement;
+		audioEl.currentTime = parseFloat(input.value);
+	}
+</script>
+
+<div class="mt-6 p-4 rounded-lg bg-zinc-800 border border-zinc-700">
+	<div class="flex items-center gap-2 mb-3">
+		<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+			<path d="M11.536 3.464a5 5 0 010 7.072L8 14H5v3H2V7h3l3.536-3.536a5 5 0 017.072 0l-4.072 4.072zM19 8a1 1 0 011 1v6a1 1 0 01-2 0V9a1 1 0 011-1zm-4-2a1 1 0 011 1v10a1 1 0 01-2 0V7a1 1 0 011-1z"/>
+		</svg>
+		<span class="text-sm text-zinc-300 font-medium">Audio Narration</span>
+	</div>
+
+	{#if status === 'idle'}
+		<div class="flex gap-2">
+			<button
+				onclick={loadAudio}
+				class="px-3 py-1.5 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors"
+			>
+				Check for audio
+			</button>
+			<button
+				onclick={generateAudio}
+				class="px-3 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+			>
+				Generate audio
+			</button>
+		</div>
+
+	{:else if status === 'loading' || status === 'generating'}
+		<div class="flex items-center gap-2 text-zinc-400 text-sm">
+			<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"></circle>
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+			</svg>
+			{status === 'generating' ? 'Generating audio (this may take a few minutes)…' : 'Loading…'}
+		</div>
+
+	{:else if status === 'error'}
+		<div class="text-red-400 text-sm">
+			<p>{errorMsg || 'Failed to load audio.'}</p>
+			<button
+				onclick={() => { status = 'idle'; }}
+				class="mt-1 text-xs underline text-zinc-400 hover:text-zinc-200"
+			>
+				Dismiss
+			</button>
+		</div>
+
+	{:else if status === 'ready' && audioUrl}
+		<!-- Native audio element (hidden, controlled by custom UI) -->
+		<audio
+			bind:this={audioEl}
+			src={audioUrl}
+			bind:currentTime
+			bind:duration
+			onplay={() => (isPlaying = true)}
+			onpause={() => (isPlaying = false)}
+			onended={() => (isPlaying = false)}
+			preload="metadata"
+		></audio>
+
+		<!-- Custom controls -->
+		<div class="flex flex-col gap-2">
+			<!-- Play/pause + time -->
+			<div class="flex items-center gap-3">
+				<button
+					onclick={togglePlay}
+					class="w-9 h-9 rounded-full bg-amber-400 text-zinc-900 flex items-center justify-center hover:bg-amber-300 transition-colors flex-shrink-0"
+					aria-label={isPlaying ? 'Pause' : 'Play'}
+				>
+					{#if isPlaying}
+						<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 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M8 5v14l11-7z"/>
+						</svg>
+					{/if}
+				</button>
+
+				<span class="text-xs text-zinc-400 w-20 flex-shrink-0">
+					{formatTime(currentTime)} / {formatTime(duration || 0)}
+				</span>
+
+				<!-- Seek bar -->
+				<input
+					type="range"
+					min="0"
+					max={duration || 0}
+					value={currentTime}
+					oninput={seek}
+					class="flex-1 accent-amber-400 h-1.5 rounded"
+				/>
+			</div>
+		</div>
+	{/if}
+</div>

ui/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

ui/src/lib/server/minio.ts

@@ -0,0 +1,67 @@
+/**
+ * Server-side MinIO presign helper.
+ * Calls the scraper API to get presigned URLs, then optionally rewrites
+ * the MinIO host to the public-facing URL for browser use.
+ *
+ * Never import this from client-side code.
+ */
+
+import { env } from '$env/dynamic/private';
+import { env as pubEnv } from '$env/dynamic/public';
+
+const SCRAPER_URL = env.SCRAPER_API_URL ?? 'http://localhost:8080';
+// Public MinIO URL — used to rewrite presigned URLs so the browser can reach MinIO directly.
+// In docker-compose this would differ from the internal endpoint.
+const MINIO_PUBLIC_URL = pubEnv.PUBLIC_MINIO_PUBLIC_URL ?? 'http://localhost:9000';
+
+/**
+ * Rewrites the MinIO host in a presigned URL to the public-facing URL.
+ * The presigned URL is signed against the internal endpoint (e.g. minio:9000),
+ * but the browser needs the public URL (e.g. localhost:9000 in dev, or a CDN in prod).
+ * Rewriting the host preserves all query params (signature, expiry, etc).
+ */
+function rewriteHost(presignedUrl: string): string {
+	try {
+		const u = new URL(presignedUrl);
+		const pub = new URL(MINIO_PUBLIC_URL);
+		u.protocol = pub.protocol;
+		u.hostname = pub.hostname;
+		u.port = pub.port;
+		return u.toString();
+	} catch {
+		return presignedUrl;
+	}
+}
+
+/**
+ * Returns a presigned URL for a chapter markdown file.
+ * URL is valid for ~15 minutes (set by the scraper).
+ * The returned URL points to the public MinIO endpoint and can be used
+ * server-side (in a +page.server.ts load function) to fetch the markdown content.
+ */
+export async function presignChapter(slug: string, n: number): Promise<string> {
+	const res = await fetch(`${SCRAPER_URL}/api/presign/chapter/${slug}/${n}`);
+	if (!res.ok) throw new Error(`presign chapter ${slug}/${n}: ${res.status}`);
+	const data = (await res.json()) as { url: string };
+	return rewriteHost(data.url);
+}
+
+/**
+ * Returns a presigned URL for an audio file.
+ * URL is valid for ~1 hour. The URL is returned to the browser for direct streaming.
+ */
+export async function presignAudio(
+	slug: string,
+	n: number,
+	voice?: string,
+	speed?: number
+): Promise<string> {
+	const params = new URLSearchParams();
+	if (voice) params.set('voice', voice);
+	if (speed) params.set('speed', String(speed));
+	const qs = params.toString() ? `?${params.toString()}` : '';
+	const res = await fetch(`${SCRAPER_URL}/api/presign/audio/${slug}/${n}${qs}`);
+	if (!res.ok) throw new Error(`presign audio ${slug}/${n}: ${res.status}`);
+	const data = (await res.json()) as { url: string };
+	return rewriteHost(data.url);
+}

ui/src/lib/server/pocketbase.ts

@@ -0,0 +1,169 @@
+/**
+ * Server-side PocketBase client.
+ * Uses admin credentials — never import this from client-side code.
+ * All methods talk directly to PocketBase REST API.
+ */
+
+import { env } from '$env/dynamic/private';
+
+const PB_URL = env.POCKETBASE_URL ?? 'http://localhost:8090';
+const PB_EMAIL = env.POCKETBASE_ADMIN_EMAIL ?? 'admin@libnovel.local';
+const PB_PASSWORD = env.POCKETBASE_ADMIN_PASSWORD ?? 'changeme123';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface Book {
+	id: string;
+	slug: string;
+	title: string;
+	author: string;
+	cover: string;
+	status: string;
+	genres: string[] | string;
+	summary: string;
+	total_chapters: number;
+	source_url: string;
+	ranking: number;
+	meta_updated: string;
+}
+
+export interface ChapterIdx {
+	id: string;
+	slug: string;
+	number: number;
+	title: string;
+	date_label: string;
+}
+
+export interface Progress {
+	session_id: string;
+	slug: string;
+	chapter: number;
+	updated: string;
+}
+
+// ─── Auth token cache ─────────────────────────────────────────────────────────
+
+let _token = '';
+let _tokenExp = 0;
+
+async function getToken(): Promise<string> {
+	if (_token && Date.now() < _tokenExp) return _token;
+
+	const res = await fetch(`${PB_URL}/api/admins/auth-with-password`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ identity: PB_EMAIL, password: PB_PASSWORD })
+	});
+
+	if (!res.ok) {
+		throw new Error(`PocketBase auth failed: ${res.status}`);
+	}
+
+	const data = await res.json();
+	_token = data.token as string;
+	_tokenExp = Date.now() + 12 * 60 * 60 * 1000; // 12 hours
+	return _token;
+}
+
+// ─── Generic helpers ──────────────────────────────────────────────────────────
+
+async function pbGet<T>(path: string): Promise<T> {
+	const token = await getToken();
+	const res = await fetch(`${PB_URL}${path}`, {
+		headers: { Authorization: token }
+	});
+	if (!res.ok) throw new Error(`PocketBase GET ${path} failed: ${res.status}`);
+	return res.json() as Promise<T>;
+}
+
+async function pbPost(path: string, body: unknown): Promise<Response> {
+	const token = await getToken();
+	return fetch(`${PB_URL}${path}`, {
+		method: 'POST',
+		headers: { Authorization: token, 'Content-Type': 'application/json' },
+		body: JSON.stringify(body)
+	});
+}
+
+async function pbPatch(path: string, body: unknown): Promise<Response> {
+	const token = await getToken();
+	return fetch(`${PB_URL}${path}`, {
+		method: 'PATCH',
+		headers: { Authorization: token, 'Content-Type': 'application/json' },
+		body: JSON.stringify(body)
+	});
+}
+
+function encodeFilter(filter: string) {
+	return encodeURIComponent(filter);
+}
+
+interface PBList<T> {
+	items: T[];
+	totalItems: number;
+}
+
+async function listAll<T>(collection: string, filter = '', sort = ''): Promise<T[]> {
+	const params = new URLSearchParams({ perPage: '500' });
+	if (filter) params.set('filter', filter);
+	if (sort) params.set('sort', sort);
+	const data = await pbGet<PBList<T>>(
+		`/api/collections/${collection}/records?${params.toString()}`
+	);
+	return data.items;
+}
+
+async function listOne<T>(collection: string, filter: string): Promise<T | null> {
+	const params = new URLSearchParams({ perPage: '1', filter });
+	const data = await pbGet<PBList<T>>(
+		`/api/collections/${collection}/records?${params.toString()}`
+	);
+	return data.items[0] ?? null;
+}
+
+// ─── Books ────────────────────────────────────────────────────────────────────
+
+export async function listBooks(): Promise<Book[]> {
+	return listAll<Book>('books', '', '+title');
+}
+
+export async function getBook(slug: string): Promise<Book | null> {
+	return listOne<Book>('books', `slug="${slug}"`);
+}
+
+// ─── Chapter index ────────────────────────────────────────────────────────────
+
+export async function listChapterIdx(slug: string): Promise<ChapterIdx[]> {
+	return listAll<ChapterIdx>('chapters_idx', `slug="${slug}"`, '+number');
+}
+
+// ─── Reading progress ─────────────────────────────────────────────────────────
+
+export async function getProgress(sessionId: string, slug: string): Promise<Progress | null> {
+	return listOne<Progress>('progress', `session_id="${sessionId}"&&slug="${slug}"`);
+}
+
+export async function allProgress(sessionId: string): Promise<Progress[]> {
+	return listAll<Progress>('progress', `session_id="${sessionId}"`, '-updated');
+}
+
+export async function setProgress(sessionId: string, slug: string, chapter: number): Promise<void> {
+	const existing = await listOne<Progress & { id: string }>(
+		'progress',
+		`session_id="${sessionId}"&&slug="${slug}"`
+	);
+
+	const payload = {
+		session_id: sessionId,
+		slug,
+		chapter,
+		updated: new Date().toISOString()
+	};
+
+	if (existing) {
+		await pbPatch(`/api/collections/progress/records/${existing.id}`, payload);
+	} else {
+		await pbPost('/api/collections/progress/records', payload);
+	}
+}

ui/src/routes/+layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>libnovel</title>
+</svelte:head>
+
+<div class="min-h-screen flex flex-col">
+	<header class="border-b border-zinc-700 bg-zinc-900 sticky top-0 z-50">
+		<nav class="max-w-6xl mx-auto px-4 h-14 flex items-center gap-6">
+			<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300">
+				libnovel
+			</a>
+			<a href="/books" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
+				Library
+			</a>
+		</nav>
+	</header>
+
+	<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
+		{@render children()}
+	</main>
+
+	<footer class="border-t border-zinc-800 text-zinc-600 text-xs text-center py-4">
+		libnovel
+	</footer>
+</div>

ui/src/routes/+page.svelte

@@ -0,0 +1,3 @@
+<a href="/books" class="inline-block mt-4 px-6 py-3 bg-amber-400 text-zinc-900 font-semibold rounded hover:bg-amber-300 transition-colors">
+	Browse Library
+</a>

ui/src/routes/api/audio/[slug]/[n]/+server.ts

@@ -0,0 +1,92 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { env } from '$env/dynamic/private';
+
+const SCRAPER_URL = env.SCRAPER_API_URL ?? 'http://localhost:8080';
+
+/**
+ * POST /api/audio/[slug]/[n]
+ * Proxies the audio generation request to the scraper's /api/audio endpoint.
+ * Keeps the scraper URL server-side — the browser never needs to know it.
+ *
+ * Body: { voice?: string, speed?: number }
+ * Response: { url: string, filename: string }
+ *   where `url` is a relative path to GET /api/audio/[slug]/[n]?voice=...&speed=...
+ */
+export const POST: RequestHandler = async ({ params, request }) => {
+	const { slug, n } = params;
+	const chapter = parseInt(n, 10);
+	if (!slug || !chapter || chapter < 1) {
+		error(400, 'Invalid slug or chapter number');
+	}
+
+	let body: { voice?: string; speed?: number } = {};
+	try {
+		body = await request.json();
+	} catch {
+		// empty body is fine — scraper will use defaults
+	}
+
+	const scraperRes = await fetch(`${SCRAPER_URL}/api/audio/${slug}/${chapter}`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(body)
+	});
+
+	if (!scraperRes.ok) {
+		const text = await scraperRes.text().catch(() => '');
+		error(scraperRes.status as Parameters<typeof error>[0], text || 'Audio generation failed');
+	}
+
+	const data = (await scraperRes.json()) as { url: string; filename: string };
+
+	// The scraper returns a proxy URL pointing to /api/audio-proxy/... — we rewrite
+	// it to our own /api/audio/[slug]/[n]?... so the browser never calls the scraper directly.
+	const voice = body.voice ?? '';
+	const speed = body.speed ?? 1.0;
+	const qs = new URLSearchParams();
+	if (voice) qs.set('voice', voice);
+	qs.set('speed', String(speed));
+
+	return new Response(
+		JSON.stringify({
+			url: `/api/audio/${slug}/${chapter}?${qs.toString()}`,
+			filename: data.filename
+		}),
+		{ headers: { 'Content-Type': 'application/json' } }
+	);
+};
+
+/**
+ * GET /api/audio/[slug]/[n]?voice=...&speed=...
+ * Proxies the audio stream from the scraper's /api/audio-proxy endpoint.
+ * This is the URL the browser's <audio> element uses as its src.
+ */
+export const GET: RequestHandler = async ({ params, url }) => {
+	const { slug, n } = params;
+	const chapter = parseInt(n, 10);
+	if (!slug || !chapter || chapter < 1) {
+		error(400, 'Invalid slug or chapter number');
+	}
+
+	const voice = url.searchParams.get('voice') ?? '';
+	const speed = url.searchParams.get('speed') ?? '1';
+	const qs = new URLSearchParams();
+	if (voice) qs.set('voice', voice);
+	qs.set('speed', speed);
+
+	const scraperRes = await fetch(`${SCRAPER_URL}/api/audio-proxy/${slug}/${chapter}?${qs.toString()}`);
+
+	if (!scraperRes.ok) {
+		error(scraperRes.status as Parameters<typeof error>[0], 'Audio not found');
+	}
+
+	// Stream the audio body through — preserve Content-Type and Content-Length.
+	const headers = new Headers();
+	headers.set('Content-Type', scraperRes.headers.get('Content-Type') ?? 'audio/mpeg');
+	headers.set('Cache-Control', 'public, max-age=3600');
+	const cl = scraperRes.headers.get('Content-Length');
+	if (cl) headers.set('Content-Length', cl);
+
+	return new Response(scraperRes.body, { headers });
+};

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

@@ -0,0 +1,26 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { presignAudio } from '$lib/server/minio';
+
+/**
+ * GET /api/presign/audio?slug=...&n=...&voice=...&speed=...
+ * Returns a presigned MinIO URL for the audio file so the browser
+ * can stream it directly without going through the server.
+ */
+export const GET: RequestHandler = async ({ url }) => {
+	const slug = url.searchParams.get('slug');
+	const n = parseInt(url.searchParams.get('n') ?? '', 10);
+	const voice = url.searchParams.get('voice') ?? undefined;
+	const speed = parseFloat(url.searchParams.get('speed') ?? '1') || 1;
+
+	if (!slug || !n || n < 1) {
+		error(400, 'Missing slug or n');
+	}
+
+	try {
+		const presignedUrl = await presignAudio(slug, n, voice, speed);
+		return json({ url: presignedUrl });
+	} catch (e) {
+		error(500, `Could not get presigned URL: ${e}`);
+	}
+};

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

@@ -0,0 +1,19 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { setProgress } from '$lib/server/pocketbase';
+
+/**
+ * POST /api/progress
+ * Body: { slug: string, chapter: number }
+ * Records the user's reading position for the current session.
+ */
+export const POST: RequestHandler = async ({ request, locals }) => {
+	const body = await request.json().catch(() => null);
+
+	if (!body || typeof body.slug !== 'string' || typeof body.chapter !== 'number') {
+		error(400, 'Invalid body — expected { slug, chapter }');
+	}
+
+	await setProgress(locals.sessionId, body.slug, body.chapter);
+	return json({ ok: true });
+};

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

@@ -0,0 +1,17 @@
+import type { PageServerLoad } from './$types';
+import { listBooks, allProgress } from '$lib/server/pocketbase';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	const [books, progressList] = await Promise.all([
+		listBooks(),
+		allProgress(locals.sessionId)
+	]);
+
+	// Build a quick lookup: slug → last chapter read
+	const progressMap: Record<string, number> = {};
+	for (const p of progressList) {
+		progressMap[p.slug] = p.chapter;
+	}
+
+	return { books, progressMap };
+};

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	function parseGenres(genres: string[] | string): string[] {
+		if (Array.isArray(genres)) return genres;
+		try {
+			return JSON.parse(genres);
+		} catch {
+			return [];
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Library — libnovel</title>
+</svelte:head>
+
+<div class="mb-6">
+	<h1 class="text-2xl font-bold text-zinc-100">Library</h1>
+	<p class="text-zinc-400 text-sm mt-1">{data.books.length} books</p>
+</div>
+
+{#if data.books.length === 0}
+	<div class="text-center py-20 text-zinc-500">
+		<p class="text-lg">No books scraped yet.</p>
+		<p class="text-sm mt-2">Use the scraper API to add books.</p>
+	</div>
+{:else}
+	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+		{#each data.books as book}
+			{@const lastChapter = data.progressMap[book.slug]}
+			{@const genres = parseGenres(book.genres)}
+			<a
+				href="/books/{book.slug}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+			>
+				<!-- Cover image -->
+				<div class="aspect-[2/3] bg-zinc-900 overflow-hidden">
+					{#if book.cover}
+						<img
+							src={book.cover}
+							alt={book.title}
+							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+							loading="lazy"
+						/>
+					{:else}
+						<div class="w-full h-full flex items-center justify-center text-zinc-600">
+							<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+									d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+							</svg>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Info -->
+				<div class="p-2 flex flex-col gap-1 flex-1">
+					<h2 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">
+						{book.title}
+					</h2>
+					{#if book.author}
+						<p class="text-xs text-zinc-400 truncate">{book.author}</p>
+					{/if}
+
+					<div class="mt-auto pt-1 flex items-center justify-between gap-1">
+						{#if book.status}
+							<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-700 text-zinc-300 truncate max-w-[60%]">
+								{book.status}
+							</span>
+						{/if}
+						{#if lastChapter}
+							<span class="text-xs text-amber-400 font-medium ml-auto whitespace-nowrap">
+								ch.{lastChapter}
+							</span>
+						{/if}
+					</div>
+
+					{#if genres.length > 0}
+						<div class="flex flex-wrap gap-1 mt-1">
+							{#each genres.slice(0, 2) as genre}
+								<span class="text-xs px-1 py-0.5 rounded bg-zinc-900 text-zinc-500">{genre}</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,23 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { getBook, listChapterIdx, getProgress } from '$lib/server/pocketbase';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	const { slug } = params;
+
+	const [book, chapters, progress] = await Promise.all([
+		getBook(slug),
+		listChapterIdx(slug),
+		getProgress(locals.sessionId, slug)
+	]);
+
+	if (!book) {
+		error(404, `Book "${slug}" not found`);
+	}
+
+	return {
+		book,
+		chapters,
+		lastChapter: progress?.chapter ?? null
+	};
+};

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

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	function parseGenres(genres: string[] | string): string[] {
+		if (Array.isArray(genres)) return genres;
+		try {
+			return JSON.parse(genres);
+		} catch {
+			return [];
+		}
+	}
+
+	const genres = $derived(parseGenres(data.book.genres));
+
+	// Paginate chapter list — show 100 at a time
+	let page = $state(0);
+	const PAGE_SIZE = 100;
+	const totalPages = $derived(Math.ceil(data.chapters.length / PAGE_SIZE));
+	const visibleChapters = $derived(
+		data.chapters.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
+	);
+</script>
+
+<svelte:head>
+	<title>{data.book.title} — libnovel</title>
+</svelte:head>
+
+<!-- Book header -->
+<div class="flex gap-6 mb-8">
+	{#if data.book.cover}
+		<img
+			src={data.book.cover}
+			alt={data.book.title}
+			class="w-32 sm:w-40 rounded-lg object-cover flex-shrink-0 border border-zinc-700"
+		/>
+	{/if}
+
+	<div class="flex flex-col gap-2 min-w-0">
+		<h1 class="text-2xl font-bold text-zinc-100 leading-tight">{data.book.title}</h1>
+
+		{#if data.book.author}
+			<p class="text-zinc-400 text-sm">{data.book.author}</p>
+		{/if}
+
+		<div class="flex flex-wrap gap-2 mt-1">
+			{#if data.book.status}
+				<span class="text-xs px-2 py-1 rounded bg-zinc-700 text-zinc-300">{data.book.status}</span>
+			{/if}
+			{#each genres as genre}
+				<span class="text-xs px-2 py-1 rounded bg-zinc-800 text-zinc-400">{genre}</span>
+			{/each}
+		</div>
+
+		{#if data.book.summary}
+			<p class="text-zinc-400 text-sm leading-relaxed line-clamp-4 mt-1">{data.book.summary}</p>
+		{/if}
+
+		<div class="flex gap-3 mt-2">
+			{#if data.lastChapter}
+				<a
+					href="/books/{data.book.slug}/chapters/{data.lastChapter}"
+					class="px-4 py-2 bg-amber-400 text-zinc-900 font-semibold rounded text-sm hover:bg-amber-300 transition-colors"
+				>
+					Continue ch.{data.lastChapter}
+				</a>
+			{/if}
+			{#if data.chapters.length > 0}
+				<a
+					href="/books/{data.book.slug}/chapters/1"
+					class="px-4 py-2 bg-zinc-700 text-zinc-100 font-semibold rounded text-sm hover:bg-zinc-600 transition-colors"
+				>
+					Start from ch.1
+				</a>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<!-- Chapter list -->
+<div class="mt-4">
+	<div class="flex items-center justify-between mb-3">
+		<h2 class="text-lg font-semibold text-zinc-100">
+			Chapters
+			<span class="text-zinc-500 font-normal text-sm ml-1">({data.chapters.length})</span>
+		</h2>
+
+		{#if totalPages > 1}
+			<div class="flex gap-2 items-center text-sm">
+				<button
+					onclick={() => (page = Math.max(0, page - 1))}
+					disabled={page === 0}
+					class="px-2 py-1 rounded bg-zinc-700 text-zinc-300 disabled:opacity-40 hover:bg-zinc-600 transition-colors"
+				>
+					&larr;
+				</button>
+				<span class="text-zinc-400">{page + 1} / {totalPages}</span>
+				<button
+					onclick={() => (page = Math.min(totalPages - 1, page + 1))}
+					disabled={page === totalPages - 1}
+					class="px-2 py-1 rounded bg-zinc-700 text-zinc-300 disabled:opacity-40 hover:bg-zinc-600 transition-colors"
+				>
+					&rarr;
+				</button>
+			</div>
+		{/if}
+	</div>
+
+	{#if data.chapters.length === 0}
+		<p class="text-zinc-500 text-sm">No chapters available yet.</p>
+	{:else}
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-1">
+			{#each visibleChapters as chapter}
+				{@const isCurrent = data.lastChapter === chapter.number}
+				<a
+					href="/books/{data.book.slug}/chapters/{chapter.number}"
+					class="flex items-center gap-3 px-3 py-2 rounded hover:bg-zinc-800 transition-colors group {isCurrent
+						? 'bg-zinc-800'
+						: ''}"
+				>
+					<span
+						class="text-xs font-mono w-10 text-right flex-shrink-0 {isCurrent
+							? 'text-amber-400'
+							: 'text-zinc-500'}"
+					>
+						{chapter.number}
+					</span>
+					<span class="text-sm text-zinc-300 group-hover:text-zinc-100 truncate flex-1">
+						{chapter.title || `Chapter ${chapter.number}`}
+					</span>
+					{#if isCurrent}
+						<span class="text-xs text-amber-400 flex-shrink-0">reading</span>
+					{/if}
+					{#if chapter.date_label}
+						<span class="text-xs text-zinc-600 flex-shrink-0 hidden sm:block">{chapter.date_label}</span>
+					{/if}
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,45 @@
+import { error } from '@sveltejs/kit';
+import { marked } from 'marked';
+import type { PageServerLoad } from './$types';
+import { getBook, listChapterIdx } from '$lib/server/pocketbase';
+import { presignChapter } from '$lib/server/minio';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	const { slug } = params;
+	const n = parseInt(params.n, 10);
+
+	if (!n || n < 1) error(400, 'Invalid chapter number');
+
+	// Fetch book metadata and chapter index in parallel
+	const [book, chapters] = await Promise.all([getBook(slug), listChapterIdx(slug)]);
+
+	if (!book) error(404, `Book "${slug}" not found`);
+
+	const chapterIdx = chapters.find((c) => c.number === n);
+	if (!chapterIdx) error(404, `Chapter ${n} not found`);
+
+	// Get presigned URL and fetch chapter markdown server-side
+	let html = '';
+	try {
+		const url = await presignChapter(slug, n);
+		const res = await fetch(url);
+		if (!res.ok) throw new Error(`MinIO returned ${res.status}`);
+		const markdown = await res.text();
+		html = await marked(markdown, { async: true });
+	} catch (e) {
+		// Don't hard-fail — show empty content with error message
+		console.error('Failed to fetch chapter content:', e);
+	}
+
+	const prevChapter = chapters.find((c) => c.number === n - 1) ?? null;
+	const nextChapter = chapters.find((c) => c.number === n + 1) ?? null;
+
+	return {
+		book: { slug: book.slug, title: book.title },
+		chapter: chapterIdx,
+		html,
+		prev: prevChapter ? prevChapter.number : null,
+		next: nextChapter ? nextChapter.number : null,
+		sessionId: locals.sessionId
+	};
+};

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import AudioPlayer from '$lib/components/AudioPlayer.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// Record reading progress when the chapter is opened
+	onMount(async () => {
+		try {
+			await fetch('/api/progress', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slug: data.book.slug, chapter: data.chapter.number })
+			});
+		} catch {
+			// Non-critical — silently ignore
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>{data.chapter.title || `Chapter ${data.chapter.number}`} — {data.book.title} — libnovel</title>
+</svelte:head>
+
+<!-- Top nav -->
+<div class="flex items-center justify-between mb-6 gap-4">
+	<a
+		href="/books/{data.book.slug}"
+		class="text-zinc-400 hover:text-zinc-100 text-sm flex items-center gap-1 transition-colors"
+	>
+		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+		</svg>
+		{data.book.title}
+	</a>
+
+	<div class="flex gap-2">
+		{#if data.prev}
+			<a
+				href="/books/{data.book.slug}/chapters/{data.prev}"
+				class="px-3 py-1.5 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors"
+			>
+				&larr; Ch.{data.prev}
+			</a>
+		{/if}
+		{#if data.next}
+			<a
+				href="/books/{data.book.slug}/chapters/{data.next}"
+				class="px-3 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+			>
+				Ch.{data.next} &rarr;
+			</a>
+		{/if}
+	</div>
+</div>
+
+<!-- Chapter heading -->
+<div class="mb-6">
+	<p class="text-zinc-500 text-sm mb-1">Chapter {data.chapter.number}</p>
+	<h1 class="text-xl font-bold text-zinc-100">
+		{data.chapter.title || `Chapter ${data.chapter.number}`}
+	</h1>
+	{#if data.chapter.date_label}
+		<p class="text-zinc-600 text-xs mt-1">{data.chapter.date_label}</p>
+	{/if}
+</div>
+
+<!-- Audio player -->
+<AudioPlayer slug={data.book.slug} chapter={data.chapter.number} />
+
+<!-- Chapter content -->
+{#if !data.html}
+	<div class="text-zinc-500 text-center py-16">
+		<p>Chapter content not available.</p>
+	</div>
+{:else}
+	<div class="prose-chapter mt-8">
+		{@html data.html}
+	</div>
+{/if}
+
+<!-- Bottom nav -->
+<div class="flex justify-between mt-12 pt-6 border-t border-zinc-800 gap-4">
+	{#if data.prev}
+		<a
+			href="/books/{data.book.slug}/chapters/{data.prev}"
+			class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors"
+		>
+			&larr; Previous chapter
+		</a>
+	{:else}
+		<div></div>
+	{/if}
+	{#if data.next}
+		<a
+			href="/books/{data.book.slug}/chapters/{data.next}"
+			class="px-4 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+		>
+			Next chapter &rarr;
+		</a>
+	{/if}
+</div>

ui/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

ui/svelte.config.js

@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

ui/vite.config.ts

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});