From 81e5d015b4cabd93885c8c2a0feec77bf4e87bdf Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 1 Mar 2026 20:44:03 +0500
Subject: [PATCH] feat: server-side TTS audio generation, audio queue panel,
 and home screen fix

- Add POST /ui/audio/{slug}/{n} endpoint: calls Kokoro-FastAPI server-side,
  writes MP3 atomically to disk, deduplicates concurrent requests via
  in-flight channel map, wraps route with 10-min TimeoutHandler
- Add GET /ui/audio-file/{slug}/{n} endpoint: serves cached MP3 with 1-day
  cache headers
- Add AudioDir/AudioPath helpers to writer.go
- Rewrite JS TTS: remove all MSE/blob/stream code; use plain fetch to
  generate endpoint then set audio.src to returned URL
- Add AbortController to generateAudio; abort on stop() and navigation
- Keep voice/speed controls disabled until setPlaying() fires
- Reset prefetchFired on voice/speed change
- Upgrade prefetch from fire-and-forget to promise chain updating queue badge
- Add sticky bottom audio queue panel: always-visible scrubber with timestamps,
  expandable rows for Now/Next/Dbg with color-coded state badges
- Fix iOS Reader Mode: header->nav aria-hidden, audio outside nav, role=main,
  visible h1 in content area, hover-only paragraph highlight
- Fix home screen Available books hidden: stop hiding cards in #books-grid
  when they appear in Continue Reading; Available always shows all books
---
 scraper/internal/server/server.go | 230 +++++++-
 scraper/internal/server/ui.go     | 894 +++++++++++++-----------------
 scraper/internal/writer/writer.go |  20 +
 3 files changed, 641 insertions(+), 503 deletions(-)

diff --git a/scraper/internal/server/server.go b/scraper/internal/server/server.go
index 48f48d5..8b37107 100644
--- a/scraper/internal/server/server.go
+++ b/scraper/internal/server/server.go
@@ -8,11 +8,14 @@
 package server
 
 import (
+	"bytes"
 	"context"
 	"encoding/json"
 	"fmt"
+	"io"
 	"log/slog"
 	"net/http"
+	"os"
 	"strconv"
 	"sync"
 	"time"
@@ -34,18 +37,26 @@ type Server struct {
 	rankingRunning bool
 	kokoroURL      string // Kokoro-FastAPI base URL, e.g. http://kokoro:8880
 	kokoroVoice    string // default voice, e.g. af_bella
+
+	// audioMu guards audioInFlight.
+	// audioInFlight maps an audio cache key to a channel that is closed when
+	// the in-flight Kokoro request for that key finishes (successfully or not).
+	// This prevents duplicate concurrent TTS generation for the same file.
+	audioMu       sync.Mutex
+	audioInFlight map[string]chan struct{}
 }
 
 // New creates a new Server.
 func New(addr string, oCfg orchestrator.Config, novel scraper.NovelScraper, log *slog.Logger, kokoroURL, kokoroVoice string) *Server {
 	return &Server{
-		addr:        addr,
-		oCfg:        oCfg,
-		novel:       novel,
-		log:         log,
-		writer:      writer.New(oCfg.StaticRoot),
-		kokoroURL:   kokoroURL,
-		kokoroVoice: kokoroVoice,
+		addr:          addr,
+		oCfg:          oCfg,
+		novel:         novel,
+		log:           log,
+		writer:        writer.New(oCfg.StaticRoot),
+		kokoroURL:     kokoroURL,
+		kokoroVoice:   kokoroVoice,
+		audioInFlight: make(map[string]chan struct{}),
 	}
 }
 
@@ -69,6 +80,16 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	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)
+	// Server-side audio generation and serving.
+	// Audio generation can take several minutes for long chapters, so wrap it
+	// in its own timeout handler instead of relying on the server WriteTimeout.
+	audioGenHandler := http.TimeoutHandler(
+		http.HandlerFunc(s.handleAudioGenerate),
+		10*time.Minute,
+		`{"error":"audio generation timed out"}`,
+	)
+	mux.Handle("POST /ui/audio/{slug}/{n}", audioGenHandler)
+	mux.HandleFunc("GET /ui/audio-file/{slug}/{n}", s.handleAudioFile)
 
 	srv := &http.Server{
 		Addr:         s.addr,
@@ -117,6 +138,201 @@ func (s *Server) handleChapterText(w http.ResponseWriter, r *http.Request) {
 	fmt.Fprint(w, stripMarkdown(raw))
 }
 
+// handleAudioGenerate handles POST /ui/audio/{slug}/{n}.
+// It accepts an optional JSON body {voice, speed} (falling back to server
+// defaults).  If the MP3 is already cached on disk it returns immediately;
+// otherwise it calls Kokoro-FastAPI to generate and save the file.
+// Response: JSON {"url": "/ui/audio-file/{slug}/{n}?voice=…&speed=…"}
+//
+// Concurrent requests for the same (slug, n, voice, speed) are deduplicated:
+// the first caller does the work; subsequent callers block until it finishes
+// and then serve the cached file (or receive the same error).
+func (s *Server) handleAudioGenerate(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 {
+		http.Error(w, `{"error":"invalid chapter"}`, http.StatusBadRequest)
+		return
+	}
+
+	// Parse optional voice/speed from JSON body.
+	voice := s.kokoroVoice
+	speed := 1.0
+	var body struct {
+		Voice string  `json:"voice"`
+		Speed float64 `json:"speed"`
+	}
+	if r.Body != nil {
+		_ = json.NewDecoder(r.Body).Decode(&body)
+	}
+	if body.Voice != "" {
+		voice = body.Voice
+	}
+	if body.Speed > 0 {
+		speed = body.Speed
+	}
+
+	audioPath := s.writer.AudioPath(slug, n, voice, speed)
+
+	// Idempotent: return immediately if already cached.
+	if _, err := os.Stat(audioPath); err == nil {
+		s.writeAudioURL(w, slug, n, voice, speed)
+		return
+	}
+
+	// Deduplicate concurrent generation requests for the same file.
+	// If another goroutine is already generating this file, wait for it and
+	// then serve the (now-cached) result.
+	cacheKey := fmt.Sprintf("%s/%d/%s/%.2f", slug, n, voice, speed)
+
+	s.audioMu.Lock()
+	if ch, ok := s.audioInFlight[cacheKey]; ok {
+		// Someone else is already generating — wait for them.
+		s.audioMu.Unlock()
+		select {
+		case <-ch:
+		case <-r.Context().Done():
+			http.Error(w, `{"error":"request cancelled"}`, http.StatusServiceUnavailable)
+			return
+		}
+		// Serve the cached file (or 404 if generation failed).
+		if _, err := os.Stat(audioPath); err == nil {
+			s.writeAudioURL(w, slug, n, voice, speed)
+		} else {
+			http.Error(w, `{"error":"audio generation failed"}`, http.StatusInternalServerError)
+		}
+		return
+	}
+	// Register ourselves as the in-flight generator.
+	ch := make(chan struct{})
+	s.audioInFlight[cacheKey] = ch
+	s.audioMu.Unlock()
+
+	// Always close the channel (unblocking waiters) and remove our entry.
+	defer func() {
+		s.audioMu.Lock()
+		delete(s.audioInFlight, cacheKey)
+		s.audioMu.Unlock()
+		close(ch)
+	}()
+
+	// Load chapter text.
+	raw, err := s.writer.ReadChapter(slug, n)
+	if err != nil {
+		http.Error(w, `{"error":"chapter not found"}`, http.StatusNotFound)
+		return
+	}
+	text := stripMarkdown(raw)
+	if text == "" {
+		http.Error(w, `{"error":"chapter text is empty"}`, http.StatusUnprocessableEntity)
+		return
+	}
+
+	if s.kokoroURL == "" {
+		http.Error(w, `{"error":"kokoro not configured"}`, http.StatusServiceUnavailable)
+		return
+	}
+
+	// Call Kokoro-FastAPI.
+	reqBody, _ := json.Marshal(map[string]interface{}{
+		"model":           "kokoro",
+		"input":           text,
+		"voice":           voice,
+		"response_format": "mp3",
+		"speed":           speed,
+		"stream":          false,
+	})
+	kokoroReq, err := http.NewRequestWithContext(r.Context(), http.MethodPost,
+		s.kokoroURL+"/v1/audio/speech", bytes.NewReader(reqBody))
+	if err != nil {
+		http.Error(w, `{"error":"failed to build kokoro request"}`, http.StatusInternalServerError)
+		return
+	}
+	kokoroReq.Header.Set("Content-Type", "application/json")
+
+	resp, err := http.DefaultClient.Do(kokoroReq)
+	if err != nil {
+		s.log.Error("kokoro request failed", "err", err)
+		http.Error(w, `{"error":"kokoro unavailable"}`, http.StatusBadGateway)
+		return
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		body2, _ := io.ReadAll(resp.Body)
+		s.log.Error("kokoro returned error", "status", resp.StatusCode, "body", string(body2))
+		http.Error(w, fmt.Sprintf(`{"error":"kokoro error %d"}`, resp.StatusCode), http.StatusBadGateway)
+		return
+	}
+
+	// Ensure the audio directory exists.
+	if err := os.MkdirAll(s.writer.AudioDir(slug), 0o755); err != nil {
+		http.Error(w, `{"error":"failed to create audio dir"}`, http.StatusInternalServerError)
+		return
+	}
+
+	// Write to a temp file then rename atomically.
+	tmpPath := audioPath + ".tmp"
+	f, err := os.Create(tmpPath)
+	if err != nil {
+		http.Error(w, `{"error":"failed to create temp file"}`, http.StatusInternalServerError)
+		return
+	}
+	if _, err := io.Copy(f, resp.Body); err != nil {
+		f.Close()
+		os.Remove(tmpPath)
+		http.Error(w, `{"error":"failed to write audio"}`, http.StatusInternalServerError)
+		return
+	}
+	f.Close()
+	if err := os.Rename(tmpPath, audioPath); err != nil {
+		os.Remove(tmpPath)
+		http.Error(w, `{"error":"failed to save audio"}`, http.StatusInternalServerError)
+		return
+	}
+
+	s.log.Info("audio generated", "slug", slug, "chapter", n, "voice", voice, "speed", speed)
+	s.writeAudioURL(w, slug, n, voice, speed)
+}
+
+func (s *Server) writeAudioURL(w http.ResponseWriter, slug string, n int, voice string, speed float64) {
+	url := fmt.Sprintf("/ui/audio-file/%s/%d?voice=%s&speed=%.1f", slug, n, voice, speed)
+	w.Header().Set("Content-Type", "application/json")
+	_ = json.NewEncoder(w).Encode(map[string]string{"url": url})
+}
+
+// handleAudioFile handles GET /ui/audio-file/{slug}/{n}.
+// Serves the cached MP3 file identified by voice and speed query params.
+func (s *Server) handleAudioFile(w http.ResponseWriter, r *http.Request) {
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 {
+		http.NotFound(w, r)
+		return
+	}
+	voice := r.URL.Query().Get("voice")
+	if voice == "" {
+		voice = s.kokoroVoice
+	}
+	speedStr := r.URL.Query().Get("speed")
+	speed := 1.0
+	if speedStr != "" {
+		if v, err := strconv.ParseFloat(speedStr, 64); err == nil && v > 0 {
+			speed = v
+		}
+	}
+
+	audioPath := s.writer.AudioPath(slug, n, voice, speed)
+	if _, err := os.Stat(audioPath); err != nil {
+		http.NotFound(w, r)
+		return
+	}
+
+	w.Header().Set("Content-Type", "audio/mpeg")
+	w.Header().Set("Cache-Control", "public, max-age=86400")
+	http.ServeFile(w, r, audioPath)
+}
+
 func (s *Server) handleScrapeCatalogue(w http.ResponseWriter, r *http.Request) {
 	cfg := s.oCfg
 	cfg.SingleBookURL = "" // full catalogue
diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index 31f82bc..dd3e58a 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -162,7 +162,7 @@ const homeTmpl = `
 
   <!-- All books grid -->
   <div id="available-section">
-    <h2 id="available-heading" class="text-lg font-semibold text-zinc-200 mb-3 hidden">Available</h2>
+    <h2 id="available-heading" class="text-lg font-semibold text-zinc-200 mb-3{{if eq (len .Books) 0}} hidden{{end}}">Available</h2>
     <div id="books-grid" class="grid gap-4 sm:grid-cols-2">
       {{range .Books}}
       <a href="/books/{{.Slug}}"
@@ -203,7 +203,6 @@ const homeTmpl = `
   var inProgress = Object.keys(progress);
   var continueSection  = document.getElementById('continue-reading-section');
   var continueGrid     = document.getElementById('continue-reading-grid');
-  var availableHeading = document.getElementById('available-heading');
 
   // Always clear before re-populating so back-navigation never duplicates cards.
   if (continueGrid) continueGrid.innerHTML = '';
@@ -249,14 +248,12 @@ const homeTmpl = `
       }
       htmx.process(a);
       continueGrid.appendChild(a);
-      // Hide the original from the all-books grid (don't remove, just hide,
-      // so the DOM node stays available for future re-runs on the same page).
-      card.style.display = 'none';
+      // Keep the original card visible in #books-grid — do not hide it.
+      // Books should always appear in Available regardless of reading progress.
       moved++;
     });
     if (moved > 0) {
       continueSection.classList.remove('hidden');
-      availableHeading.classList.remove('hidden');
     }
   }
 
@@ -1043,8 +1040,10 @@ func (s *Server) handleBookChaptersPage(w http.ResponseWriter, r *http.Request)
 // ─── GET /books/{slug}/chapters/{n} — chapter reader ─────────────────────────
 
 const chapterTmpl = `
-<!-- ─── Sticky reader toolbar ──────────────────────────────────────────────── -->
-<header id="reader-header" style="position:sticky;top:0;z-index:50;background:#09090b;border-bottom:1px solid #27272a;">
+<!-- ─── Sticky reader toolbar (nav, not header, so Reader Mode ignores it) ─── -->
+<!-- aria-hidden keeps it out of accessibility trees / Reader Mode heuristics  -->
+<nav id="reader-header" aria-hidden="true"
+     style="position:sticky;top:0;z-index:50;background:#09090b;border-bottom:1px solid #27272a;">
   <div class="max-w-2xl mx-auto px-4 flex items-center gap-2 h-12">
 
     <!-- Back to book -->
@@ -1054,6 +1053,7 @@ const chapterTmpl = `
        hx-push-url="true"
        hx-swap="innerHTML"
        title="Chapter list"
+       aria-label="Back to chapter list"
        style="flex-shrink:0;padding:0.375rem 0.5rem;border-radius:0.5rem;color:#a1a1aa;font-size:0.875rem;text-decoration:none;transition:color 0.15s;"
        onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='#a1a1aa'">
       &#8592;
@@ -1067,21 +1067,23 @@ const chapterTmpl = `
        hx-push-url="true"
        hx-swap="innerHTML"
        title="Previous chapter"
+       aria-label="Previous chapter"
        style="flex-shrink:0;padding:0.375rem 0.625rem;border-radius:0.5rem;background:#27272a;color:#d4d4d8;font-size:0.8125rem;text-decoration:none;transition:background 0.15s;"
        onmouseover="this.style.background='#3f3f46'" onmouseout="this.style.background='#27272a'">
       &#8592; Prev
     </a>
     {{else}}
-    <span style="flex-shrink:0;padding:0.375rem 0.625rem;border-radius:0.5rem;color:#52525b;font-size:0.8125rem;cursor:default;">&#8592; Prev</span>
+    <span style="flex-shrink:0;padding:0.375rem 0.625rem;border-radius:0.5rem;color:#52525b;font-size:0.8125rem;cursor:default;" aria-hidden="true">&#8592; Prev</span>
     {{end}}
 
     <!-- Chapter title button — opens chapter list drawer -->
     <button id="chapter-list-btn"
             onclick="toggleChapterList()"
             title="Jump to chapter"
+            aria-label="Jump to chapter"
             style="flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:0.375rem;overflow:hidden;background:transparent;border:none;cursor:pointer;padding:0.375rem 0.25rem;">
       <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.8125rem;color:#a1a1aa;">{{.Title}}</span>
-      <span style="flex-shrink:0;font-size:0.625rem;color:#52525b;">&#9660;</span>
+      <span style="flex-shrink:0;font-size:0.625rem;color:#52525b;" aria-hidden="true">&#9660;</span>
     </button>
 
     <!-- Next chapter -->
@@ -1092,21 +1094,23 @@ const chapterTmpl = `
        hx-push-url="true"
        hx-swap="innerHTML"
        title="Next chapter"
+       aria-label="Next chapter"
        style="flex-shrink:0;padding:0.375rem 0.625rem;border-radius:0.5rem;background:#27272a;color:#d4d4d8;font-size:0.8125rem;text-decoration:none;transition:background 0.15s;"
        onmouseover="this.style.background='#3f3f46'" onmouseout="this.style.background='#27272a'">
       Next &#8594;
     </a>
     {{else}}
-    <span style="flex-shrink:0;padding:0.375rem 0.625rem;border-radius:0.5rem;color:#52525b;font-size:0.8125rem;cursor:default;">Next &#8594;</span>
+    <span style="flex-shrink:0;padding:0.375rem 0.625rem;border-radius:0.5rem;color:#52525b;font-size:0.8125rem;cursor:default;" aria-hidden="true">Next &#8594;</span>
     {{end}}
 
     <!-- TTS play/pause button -->
     <button id="tts-btn"
             onclick="ttsToggle()"
             title="Listen"
+            aria-label="Listen"
             style="flex-shrink:0;display:flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;border-radius:0.5rem;background:#d97706;color:#fff;font-size:0.8125rem;font-weight:500;border:none;cursor:pointer;transition:background 0.15s;"
             onmouseover="this.style.background='#b45309'" onmouseout="this.style.background='#d97706'">
-      <span id="tts-icon">&#9654;</span>
+      <span id="tts-icon" aria-hidden="true">&#9654;</span>
       <span id="tts-label">Listen</span>
     </button>
 
@@ -1114,14 +1118,15 @@ const chapterTmpl = `
     <button id="settings-btn"
             onclick="toggleSettings()"
             title="Settings"
+            aria-label="Settings"
             style="flex-shrink:0;padding:0.375rem 0.5rem;border-radius:0.5rem;background:transparent;color:#a1a1aa;font-size:1rem;border:none;cursor:pointer;transition:color 0.15s;"
             onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='#a1a1aa'">
       &#9881;
     </button>
   </div>
 
-  <!-- TTS status strip (shows Buffering / Playing / Error under the bar) -->
-  <div id="tts-status-bar" style="display:none;padding:0.125rem 1rem;background:#18181b;font-size:0.75rem;color:#71717a;text-align:center;">
+  <!-- TTS status strip -->
+  <div id="tts-status-bar" style="display:none;padding:0.125rem 1rem;background:#18181b;font-size:0.75rem;color:#71717a;text-align:center;" aria-live="polite">
     <span id="tts-status"></span>
   </div>
 
@@ -1139,9 +1144,9 @@ const chapterTmpl = `
          {{if eq .Number $.ChapterN}}data-current="1"{{end}}
          style="display:flex;align-items:baseline;gap:0.75rem;padding:0.5rem 1rem;text-decoration:none;transition:background 0.1s;{{if eq .Number $.ChapterN}}background:#27272a;{{end}}"
          onmouseover="this.style.background='#27272a'" onmouseout="this.style.background='{{if eq .Number $.ChapterN}}#27272a{{else}}transparent{{end}}'">
-        <span style="flex-shrink:0;font-size:0.75rem;color:#52525b;width:2.5rem;text-align:right;">{{.Number}}</span>
+        <span style="flex-shrink:0;font-size:0.75rem;color:#52525b;width:2.5rem;text-align:right;" aria-hidden="true">{{.Number}}</span>
         <span style="font-size:0.875rem;{{if eq .Number $.ChapterN}}color:#fbbf24;font-weight:500;{{else}}color:#d4d4d8;{{end}}">{{if .Title}}{{.Title}}{{else}}Chapter {{.Number}}{{end}}</span>
-        {{if eq .Number $.ChapterN}}<span style="flex-shrink:0;font-size:0.7rem;color:#f59e0b;margin-left:auto;">&#9654; now</span>{{end}}
+        {{if eq .Number $.ChapterN}}<span style="flex-shrink:0;font-size:0.7rem;color:#f59e0b;margin-left:auto;" aria-hidden="true">&#9654; now</span>{{end}}
       </a>
       {{end}}
     </div>
@@ -1173,14 +1178,18 @@ const chapterTmpl = `
       <span style="font-size:0.875rem;color:#d4d4d8;">Auto-play next chapter</span>
     </label>
   </div>
+</nav>
 
-  <audio id="tts-audio" style="display:none"></audio>
-</header>
+<!-- Audio element outside nav/header so Reader Mode never sees it -->
+<audio id="tts-audio" aria-hidden="true" style="display:none"></audio>
 
 <!-- ─── Chapter content ────────────────────────────────────────────────────── -->
-<div class="max-w-2xl mx-auto px-4 py-10">
+<!-- role="main" + <article> give Reader Mode a strong content anchor          -->
+<div role="main" class="max-w-2xl mx-auto px-4 py-10">
+
+  <!-- Visible h1 inside the content area — Reader Mode anchors on this title  -->
+  <h1 class="text-2xl font-bold text-zinc-100 mb-6 leading-snug">{{.Title}}</h1>
 
-  <!-- Paragraphs get data-para-idx injected by JS after render -->
   <article id="chapter-article" class="prose text-zinc-300 leading-relaxed text-[1.05rem]">
     {{.HTML}}
   </article>
@@ -1209,58 +1218,229 @@ const chapterTmpl = `
   </nav>
 </div>
 
+<!-- ─── Audio queue panel (sticky bottom) ───────────────────────────────────── -->
+<div id="audio-queue-bar"
+     role="region"
+     aria-label="Audio queue"
+     style="position:fixed;bottom:0;left:0;right:0;z-index:60;background:#09090b;border-top:1px solid #27272a;font-size:0.75rem;color:#a1a1aa;">
+
+  <!-- Toggle handle ─────────────────────────────────────────────────────────── -->
+  <button id="queue-toggle"
+          onclick="window.toggleQueuePanel()"
+          aria-expanded="false"
+          style="width:100%;display:flex;align-items:center;justify-content:between;gap:0.5rem;padding:0.4rem 1rem;background:transparent;border:none;cursor:pointer;color:#a1a1aa;font-size:0.7rem;text-align:left;">
+    <span style="flex:1;display:flex;align-items:center;gap:0.5rem;">
+      <span id="queue-toggle-icon" style="font-size:0.65rem;">&#9650;</span>
+      <span style="font-weight:600;letter-spacing:0.05em;text-transform:uppercase;">Audio Queue</span>
+      <span id="queue-now-badge" class="queue-badge queue-badge-idle">idle</span>
+    </span>
+    <!-- Mini scrubber always visible in the handle row -->
+    <span style="flex:2;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem;">
+      <span id="queue-time-cur" style="min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums;">0:00</span>
+      <span style="flex:1;position:relative;height:3px;background:#3f3f46;border-radius:2px;overflow:hidden;">
+        <span id="queue-scrubber-fill" style="position:absolute;left:0;top:0;height:100%;width:0%;background:#f59e0b;transition:width 0.3s linear;"></span>
+      </span>
+      <span id="queue-time-tot" style="min-width:2.5rem;font-variant-numeric:tabular-nums;">0:00</span>
+    </span>
+  </button>
+
+  <!-- Expanded panel ────────────────────────────────────────────────────────── -->
+  <div id="queue-panel-body" style="display:none;border-top:1px solid #27272a;">
+
+    <!-- Now playing row -->
+    <div class="queue-row" id="queue-row-current">
+      <span class="queue-row-label">Now</span>
+      <span class="queue-row-title" id="queue-cur-title">—</span>
+      <span class="queue-badge" id="queue-cur-badge">idle</span>
+    </div>
+
+    <!-- Up next row (hidden if no next chapter) -->
+    <div class="queue-row" id="queue-row-next" style="display:none;">
+      <span class="queue-row-label">Next</span>
+      <span class="queue-row-title" id="queue-next-title">—</span>
+      <span class="queue-badge" id="queue-next-badge">—</span>
+    </div>
+
+    <!-- Debug info row -->
+    <div class="queue-row queue-row-debug" id="queue-row-debug">
+      <span class="queue-row-label">dbg</span>
+      <span id="queue-debug-text" style="font-family:monospace;word-break:break-all;"></span>
+    </div>
+
+  </div>
+</div>
+
 <style>
-  /* Paragraph click-to-play affordance */
+  /* Paragraph TTS highlight — no cursor change so paragraphs look editorial   */
   #chapter-article p {
-    cursor: pointer;
     border-radius: 0.375rem;
     margin-left: -0.5rem;
     padding-left: 0.5rem;
     transition: background 0.15s;
   }
-  #chapter-article p:hover {
-    background: rgba(251,191,36,0.07);
+  /* Subtle tap affordance only on touch/pointer devices that support hover    */
+  @media (hover: hover) {
+    #chapter-article p:hover { background: rgba(251,191,36,0.07); }
   }
   #chapter-article p.tts-active {
     background: rgba(251,191,36,0.13);
     border-left: 2px solid #f59e0b;
     padding-left: calc(0.5rem - 2px);
   }
-  /* Prevent sticky header from covering anchor targets */
+  /* Prevent sticky nav from covering anchor targets */
   #main-content { scroll-padding-top: 3.5rem; }
+  /* Improve base reading typography */
+  #chapter-article { font-size: 1.0625rem; line-height: 1.8; }
+  #chapter-article p + p { margin-top: 0; }
+
+  /* ── Audio queue bar ─────────────────────────────────────────────────────── */
+  /* Extra bottom padding so chapter text is never hidden behind the sticky bar */
+  #main-content { padding-bottom: 4rem; }
+
+  .queue-badge {
+    display: inline-block;
+    padding: 0.1em 0.5em;
+    border-radius: 9999px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .queue-badge-idle    { background: #27272a; color: #71717a; }
+  .queue-badge-generating { background: #78350f; color: #fbbf24; }
+  .queue-badge-ready   { background: #14532d; color: #4ade80; }
+  .queue-badge-playing { background: #1e3a5f; color: #60a5fa; }
+  .queue-badge-paused  { background: #1c1917; color: #d6d3d1; }
+  .queue-badge-error   { background: #450a0a; color: #f87171; }
+
+  .queue-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 1rem;
+    border-bottom: 1px solid #18181b;
+  }
+  .queue-row-label {
+    width: 2.5rem;
+    flex-shrink: 0;
+    font-weight: 700;
+    font-size: 0.65rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #52525b;
+  }
+  .queue-row-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #d4d4d8;
+  }
+  .queue-row-debug {
+    background: #0c0c0e;
+    color: #52525b;
+    font-size: 0.65rem;
+  }
 </style>
 
 <script>
 (function () {
-  var KOKORO_URL = '{{.KokoroURL}}';
-  var NEXT_N     = {{.NextN}};
-  var SLUG       = '{{.Slug}}';
-  var CHAPTER_N  = {{.ChapterN}};
+  var NEXT_N    = {{.NextN}};
+  var SLUG      = '{{.Slug}}';
+  var CHAPTER_N = {{.ChapterN}};
 
   // ── reading progress ──────────────────────────────────────────────────────────
-  // Save current chapter to localStorage so the book page can show a resume button.
   (function saveProgress() {
-    var LS_KEY = 'reading_progress';
     try {
-      var progress = JSON.parse(localStorage.getItem(LS_KEY) || '{}');
-      progress[SLUG] = CHAPTER_N;
-      localStorage.setItem(LS_KEY, JSON.stringify(progress));
+      var p = JSON.parse(localStorage.getItem('reading_progress') || '{}');
+      p[SLUG] = CHAPTER_N;
+      localStorage.setItem('reading_progress', JSON.stringify(p));
     } catch(_) {}
   })();
 
-  var audio     = document.getElementById('tts-audio');
-  var btn       = document.getElementById('tts-btn');
-  var icon      = document.getElementById('tts-icon');
-  var label     = document.getElementById('tts-label');
-  var statusEl  = document.getElementById('tts-status');
-  var statusBar = document.getElementById('tts-status-bar');
-  var voiceSel  = document.getElementById('tts-voice');
+  var audio       = document.getElementById('tts-audio');
+  var btn         = document.getElementById('tts-btn');
+  var icon        = document.getElementById('tts-icon');
+  var label       = document.getElementById('tts-label');
+  var statusEl    = document.getElementById('tts-status');
+  var statusBar   = document.getElementById('tts-status-bar');
+  var voiceSel    = document.getElementById('tts-voice');
   var speedSlider = document.getElementById('tts-speed');
   var speedLabel  = document.getElementById('tts-speed-label');
   var autoplayChk = document.getElementById('tts-autoplay');
-  var article   = document.getElementById('chapter-article');
+  var article     = document.getElementById('chapter-article');
 
-  // ── settings panel toggle ─────────────────────────────────────────────────────
+  // ── audio queue bar DOM refs ───────────────────────────────────────────────────
+  var queuePanelBody  = document.getElementById('queue-panel-body');
+  var queueToggleBtn  = document.getElementById('queue-toggle');
+  var queueToggleIcon = document.getElementById('queue-toggle-icon');
+  var queueNowBadge   = document.getElementById('queue-now-badge');
+  var queueTimeCur    = document.getElementById('queue-time-cur');
+  var queueTimeTot    = document.getElementById('queue-time-tot');
+  var queueFill       = document.getElementById('queue-scrubber-fill');
+  var queueRowNext    = document.getElementById('queue-row-next');
+  var queueCurTitle   = document.getElementById('queue-cur-title');
+  var queueCurBadge   = document.getElementById('queue-cur-badge');
+  var queueNextTitle  = document.getElementById('queue-next-title');
+  var queueNextBadge  = document.getElementById('queue-next-badge');
+  var queueDebugText  = document.getElementById('queue-debug-text');
+
+  // ── audio queue helpers ────────────────────────────────────────────────────────
+  var BADGE_CLASSES = ['queue-badge-idle','queue-badge-generating','queue-badge-ready',
+                       'queue-badge-playing','queue-badge-paused','queue-badge-error'];
+
+  function setBadge(el, state) {
+    BADGE_CLASSES.forEach(function (c) { el.classList.remove(c); });
+    el.classList.add('queue-badge-' + state);
+    el.textContent = state;
+  }
+
+  function fmtTime(secs) {
+    if (!isFinite(secs) || secs < 0) return '0:00';
+    var m = Math.floor(secs / 60);
+    var s = Math.floor(secs % 60);
+    return m + ':' + (s < 10 ? '0' : '') + s;
+  }
+
+  function queueUpdateScrubber() {
+    var cur = audio.currentTime || 0;
+    var tot = audio.duration;
+    queueTimeCur.textContent = fmtTime(cur);
+    queueTimeTot.textContent = isFinite(tot) ? fmtTime(tot) : '0:00';
+    var pct = (isFinite(tot) && tot > 0) ? Math.min(100, (cur / tot) * 100) : 0;
+    queueFill.style.width = pct.toFixed(1) + '%';
+  }
+
+  function queueSetCurrent(state, debugMsg) {
+    setBadge(queueNowBadge, state);
+    setBadge(queueCurBadge, state);
+    queueCurTitle.textContent = 'Ch. ' + CHAPTER_N;
+    if (debugMsg !== undefined) {
+      queueDebugText.textContent = debugMsg;
+    }
+    queueUpdateScrubber();
+  }
+
+  function queueSetNext(state, debugMsg) {
+    if (!NEXT_N) { queueRowNext.style.display = 'none'; return; }
+    queueRowNext.style.display = '';
+    setBadge(queueNextBadge, state);
+    queueNextTitle.textContent = 'Ch. ' + NEXT_N;
+    if (debugMsg !== undefined) {
+      queueDebugText.textContent = debugMsg;
+    }
+  }
+
+  // Toggle expand/collapse.
+  window.toggleQueuePanel = function () {
+    var open = queuePanelBody.style.display !== 'none';
+    queuePanelBody.style.display = open ? 'none' : '';
+    queueToggleIcon.innerHTML    = open ? '&#9650;' : '&#9660;';
+    queueToggleBtn.setAttribute('aria-expanded', String(!open));
+  };
+
+  // ── panel toggles ─────────────────────────────────────────────────────────────
   var settingsPanel    = document.getElementById('settings-panel');
   var chapterListPanel = document.getElementById('chapter-list-panel');
   var chapterListBtn   = document.getElementById('chapter-list-btn');
@@ -1269,35 +1449,27 @@ const chapterTmpl = `
     chapterListPanel.style.display = 'none';
     chapterListBtn.querySelector('span:last-child').innerHTML = '&#9660;';
   };
-
   window.toggleChapterList = function () {
     var open = chapterListPanel.style.display !== 'none';
-    // Close settings if open
     settingsPanel.style.display = 'none';
     if (open) {
       closeChapterList();
     } else {
       chapterListPanel.style.display = 'block';
       chapterListBtn.querySelector('span:last-child').innerHTML = '&#9650;';
-      // Scroll the current chapter row into view inside the panel
-      var current = chapterListPanel.querySelector('[data-current="1"]');
-      if (current) current.scrollIntoView({ block: 'center' });
+      var cur = chapterListPanel.querySelector('[data-current="1"]');
+      if (cur) cur.scrollIntoView({ block: 'center' });
     }
   };
-
   window.toggleSettings = function () {
     var open = settingsPanel.style.display !== 'none';
-    // Close chapter list if open
     closeChapterList();
     settingsPanel.style.display = open ? 'none' : 'block';
   };
-
-  // Close both panels when clicking outside
   document.addEventListener('click', function (e) {
-    var settingsBtn = document.getElementById('settings-btn');
+    var sb = document.getElementById('settings-btn');
     if (settingsPanel.style.display !== 'none' &&
-        !settingsPanel.contains(e.target) &&
-        e.target !== settingsBtn && !settingsBtn.contains(e.target)) {
+        !settingsPanel.contains(e.target) && e.target !== sb && !sb.contains(e.target)) {
       settingsPanel.style.display = 'none';
     }
     if (chapterListPanel.style.display !== 'none' &&
@@ -1307,95 +1479,55 @@ const chapterTmpl = `
     }
   });
 
+  // ── status strip ──────────────────────────────────────────────────────────────
   function setStatus(text) {
     statusEl.textContent = text;
     statusBar.style.display = text ? '' : 'none';
   }
 
-  var abortCtrl  = null;
-  var mse        = null;
-  var srcBuf     = null;
-  var queue      = [];
-  var appending  = false;
-  var fetchDone  = false;
-  var activePara = null; // currently highlighted <p> element
-
-  // ── next-chapter prefetch state ───────────────────────────────────────────────
-  // When auto-play is on we begin fetching the next chapter's audio in the
-  // background as soon as Kokoro finishes streaming the current chapter.
-  // The result is held in a second <audio>/MSE pipeline so that when the
-  // current chapter ends we can play it without any buffering wait.
-
-  var prefetchAudio  = null; // hidden <audio> element used for prefetch
-  var prefetchMSE    = null;
-  var prefetchBuf    = null;
-  var prefetchQueue  = [];
-  var prefetchAppending = false;
-  var prefetchDone   = false;
-  var prefetchAbort  = null;
-  var prefetchReady  = false; // true once canplay fired on prefetchAudio
-
-  // ── localStorage persistence ─────────────────────────────────────────────────
-  // Settings saved: tts_speed, tts_voice, tts_autonext
-  // Loaded once on page init; written on every change.
-
+  // ── localStorage settings ─────────────────────────────────────────────────────
   var LS_SPEED   = 'tts_speed';
   var LS_VOICE   = 'tts_voice';
   var LS_AUTONEXT = 'tts_autonext';
 
   (function loadSettings() {
-    var savedSpeed = localStorage.getItem(LS_SPEED);
-    if (savedSpeed !== null) {
-      speedSlider.value = savedSpeed;
-      speedLabel.textContent = parseFloat(savedSpeed).toFixed(1) + '\u00D7';
+    var spd = localStorage.getItem(LS_SPEED);
+    if (spd !== null) {
+      speedSlider.value = spd;
+      speedLabel.textContent = parseFloat(spd).toFixed(1) + '\u00D7';
     }
-    var savedVoice = localStorage.getItem(LS_VOICE);
-    if (savedVoice !== null) {
-      var opt = voiceSel.querySelector('option[value="' + savedVoice + '"]');
-      if (opt) voiceSel.value = savedVoice;
-    }
-    var savedAutoNext = localStorage.getItem(LS_AUTONEXT);
-    if (savedAutoNext !== null) {
-      autoplayChk.checked = savedAutoNext === 'true';
+    var vc = localStorage.getItem(LS_VOICE);
+    if (vc !== null) {
+      var opt = voiceSel.querySelector('option[value="' + vc + '"]');
+      if (opt) voiceSel.value = vc;
     }
+    var an = localStorage.getItem(LS_AUTONEXT);
+    if (an !== null) autoplayChk.checked = an === 'true';
   })();
 
-  // ── speed slider ─────────────────────────────────────────────────────────────
-
   speedSlider.addEventListener('input', function () {
     speedLabel.textContent = parseFloat(speedSlider.value).toFixed(1) + '\u00D7';
     localStorage.setItem(LS_SPEED, speedSlider.value);
+    prefetchFired = false; // voice/speed changed — invalidate prefetch
   });
-
   voiceSel.addEventListener('change', function () {
     localStorage.setItem(LS_VOICE, voiceSel.value);
+    prefetchFired = false; // voice/speed changed — invalidate prefetch
   });
-
   autoplayChk.addEventListener('change', function () {
     localStorage.setItem(LS_AUTONEXT, autoplayChk.checked ? 'true' : 'false');
   });
 
   // ── paragraph indexing ───────────────────────────────────────────────────────
-  // Collect all <p> elements inside the article, assign data-para-idx,
-  // and wire click handlers so any paragraph starts TTS from that point.
+  // Clicking a paragraph seeks to the proportional position in the audio file.
+  var paras      = Array.prototype.slice.call(article.querySelectorAll('p'));
+  var activePara = null;
 
-  var paras = Array.prototype.slice.call(article.querySelectorAll('p'));
   paras.forEach(function (p, i) {
     p.dataset.paraIdx = i;
-    p.title = 'Click to read from here';
-    p.addEventListener('click', function () {
-      startFromPara(i);
-    });
+    p.addEventListener('click', function () { seekToPara(i); });
   });
 
-  function textFromPara(startIdx) {
-    return paras
-      .slice(startIdx)
-      .map(function (p) { return p.innerText.trim(); })
-      .filter(function (t) { return t.length > 0; })
-      .join('\n\n');
-  }
-
   function highlightPara(idx) {
     if (activePara) activePara.classList.remove('tts-active');
     activePara = (idx >= 0 && idx < paras.length) ? paras[idx] : null;
@@ -1405,417 +1537,159 @@ const chapterTmpl = `
     }
   }
 
-  // ── state helpers ─────────────────────────────────────────────────────────────
+  // Seek to the proportional position in the loaded audio corresponding to para idx.
+  function seekToPara(idx) {
+    if (!audio.src || !audio.duration || !isFinite(audio.duration)) {
+      // Audio not loaded yet — generate it first, then seek once ready.
+      generateAudio(CHAPTER_N, function (url) {
+        audio.src = url;
+        audio.addEventListener('loadedmetadata', function onMeta() {
+          audio.removeEventListener('loadedmetadata', onMeta);
+          doSeek(idx);
+        });
+        audio.load();
+      });
+      return;
+    }
+    doSeek(idx);
+  }
 
-  function setLoading(paraIdx) {
-    highlightPara(paraIdx);
-    icon.textContent   = '\u231B';
-    label.textContent  = 'Buffering';
-    setStatus('Fetching from Kokoro\u2026');
+  function doSeek(idx) {
+    if (!audio.duration || !isFinite(audio.duration)) return;
+    var ratio = paras.length > 1 ? idx / (paras.length - 1) : 0;
+    audio.currentTime = ratio * audio.duration;
+    highlightPara(idx);
+    if (audio.paused) audio.play().then(setPlaying).catch(function (e) { setError(e.message); });
+  }
+
+  // ── UI state helpers ──────────────────────────────────────────────────────────
+  function setGenerating() {
+    icon.textContent  = '\u231B';
+    label.textContent = 'Generating\u2026';
+    setStatus('Generating audio on server\u2026');
     btn.disabled = true;
     btn.style.opacity = '0.6';
     btn.style.cursor  = 'not-allowed';
-    voiceSel.disabled  = true;
+    voiceSel.disabled    = true;
     speedSlider.disabled = true;
+    queueSetCurrent('generating', 'POST /ui/audio/' + SLUG + '/' + CHAPTER_N);
   }
-
   function setPlaying() {
-    icon.innerHTML     = '&#9646;&#9646;';
-    label.textContent  = 'Pause';
+    icon.innerHTML    = '&#9646;&#9646;';
+    label.textContent = 'Pause';
     setStatus('Playing');
     btn.disabled = false;
     btn.style.opacity = '1';
     btn.style.cursor  = 'pointer';
+    voiceSel.disabled    = false;
+    speedSlider.disabled = false;
+    queueSetCurrent('playing', 'audio.src set, playing ch.' + CHAPTER_N);
   }
-
   function setPaused() {
-    icon.innerHTML     = '&#9654;';
-    label.textContent  = 'Resume';
+    icon.innerHTML    = '&#9654;';
+    label.textContent = 'Resume';
     setStatus('Paused');
+    queueSetCurrent('paused');
   }
-
   function setStopped() {
     highlightPara(-1);
-    icon.innerHTML     = '&#9654;';
-    label.textContent  = 'Listen';
+    icon.innerHTML    = '&#9654;';
+    label.textContent = 'Listen';
     setStatus('');
     btn.disabled = false;
     btn.style.opacity = '1';
     btn.style.cursor  = 'pointer';
     voiceSel.disabled    = false;
     speedSlider.disabled = false;
+    queueSetCurrent('idle', 'stopped');
+    queueSetNext('idle');
+    queueUpdateScrubber();
   }
-
   function setError(msg) {
     highlightPara(-1);
-    icon.innerHTML     = '&#9654;';
-    label.textContent  = 'Listen';
+    icon.innerHTML    = '&#9654;';
+    label.textContent = 'Listen';
     setStatus('Error: ' + msg);
     btn.disabled = false;
     btn.style.opacity = '1';
     btn.style.cursor  = 'pointer';
     voiceSel.disabled    = false;
     speedSlider.disabled = false;
+    queueSetCurrent('error', 'err: ' + msg);
   }
 
-  // ── capability detection ──────────────────────────────────────────────────────
-  // MSE streaming is not supported on iOS Safari (or is unreliable on older
-  // versions). Fall back to a full-download blob URL on those platforms so
-  // audio works on all devices. The downside is playback starts only after the
-  // full chapter audio has been downloaded, but it is universally compatible.
+  // ── server-side audio generation ─────────────────────────────────────────────
+  // POST /ui/audio/{slug}/{n} — idempotent; returns {url} immediately if cached.
+  // cb(url) is called with the audio-file URL on success.
+  // Returns the AbortController so the caller can cancel in-flight requests.
 
-  var USE_MSE = (function () {
-    if (typeof MediaSource === 'undefined') return false;
-    // iOS Safari reports MediaSource but does not support it reliably for audio/mpeg
-    var ua = navigator.userAgent;
-    var isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
-    if (isIOS) return false;
-    try { return MediaSource.isTypeSupported('audio/mpeg'); } catch(_) { return false; }
-  })();
+  var currentAudioCtrl = null; // AbortController for the active generateAudio fetch
 
-  // ── MSE helpers (desktop / non-iOS) ──────────────────────────────────────────
+  function generateAudio(chapterN, cb) {
+    // Cancel any previous in-flight generation.
+    if (currentAudioCtrl) { currentAudioCtrl.abort(); }
+    var ctrl = new AbortController();
+    currentAudioCtrl = ctrl;
 
-  function flushQueue() {
-    if (appending || !srcBuf || srcBuf.updating || queue.length === 0) return;
-    appending = true;
-    var chunk = queue.shift();
-    try {
-      srcBuf.appendBuffer(chunk);
-    } catch (e) {
-      appending = false;
+    fetch('/ui/audio/' + SLUG + '/' + chapterN, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        voice: voiceSel.value,
+        speed: parseFloat(speedSlider.value)
+      }),
+      signal: ctrl.signal
+    })
+    .then(function (res) {
+      if (!res.ok) return res.text().then(function (t) { throw new Error(res.status + ': ' + t); });
+      return res.json();
+    })
+    .then(function (data) {
+      if (data && data.url) cb(data.url);
+      else throw new Error('no url in response');
+    })
+    .catch(function (e) {
+      if (e.name === 'AbortError') return; // silently cancelled
       setError(e.message);
-    }
-  }
-
-  function endStream() {
-    if (mse && mse.readyState === 'open' && srcBuf && !srcBuf.updating) {
-      try { mse.endOfStream(); } catch(_) {}
-    }
-    // Current chapter audio is fully received — good time to start prefetching
-    // the next chapter so it's ready by the time playback ends.
-    if (autoplayChk.checked && NEXT_N && !prefetchAbort) {
-      startPrefetch();
-    }
+    });
   }
 
   // ── next-chapter prefetch ─────────────────────────────────────────────────────
+  // At 80 % playback we silently POST to generate the next chapter's audio so
+  // it is cached by the time the current chapter ends.
 
-  function stopPrefetch() {
-    if (prefetchAbort) { prefetchAbort.abort(); prefetchAbort = null; }
-    if (prefetchAudio) {
-      if (prefetchAudio.src && prefetchAudio.src.startsWith('blob:')) {
-        URL.revokeObjectURL(prefetchAudio.src);
-      }
-      prefetchAudio.src = '';
-      prefetchAudio = null;
-    }
-    prefetchMSE       = null;
-    prefetchBuf       = null;
-    prefetchQueue     = [];
-    prefetchAppending = false;
-    prefetchDone      = false;
-    prefetchReady     = false;
-  }
+  var prefetchFired = false; // ensure we only fire once per chapter
 
-  function flushPrefetchQueue() {
-    if (prefetchAppending || !prefetchBuf || prefetchBuf.updating || prefetchQueue.length === 0) return;
-    prefetchAppending = true;
-    var chunk = prefetchQueue.shift();
-    try {
-      prefetchBuf.appendBuffer(chunk);
-    } catch (e) {
-      prefetchAppending = false;
-    }
-  }
-
-  function startPrefetch() {
-    if (!KOKORO_URL || !NEXT_N) return;
-
-    fetch('/ui/chapter-text/' + SLUG + '/' + NEXT_N)
-      .then(function (res) { return res.ok ? res.text() : Promise.reject(res.status); })
-      .then(function (text) {
-        text = text.trim();
-        if (!text) return;
-
-        prefetchAbort = new AbortController();
-        prefetchAudio = document.createElement('audio');
-        prefetchAudio.style.display = 'none';
-        prefetchReady = false;
-
-        prefetchAudio.addEventListener('canplay', function () { prefetchReady = true; });
-
-        if (USE_MSE) {
-          // ── MSE prefetch path ────────────────────────────────────────────────
-          prefetchMSE   = new MediaSource();
-          prefetchQueue = [];
-          prefetchAppending = false;
-          prefetchDone  = false;
-
-          prefetchAudio.src = URL.createObjectURL(prefetchMSE);
-
-          prefetchMSE.addEventListener('sourceopen', function () {
-            try {
-              prefetchBuf = prefetchMSE.addSourceBuffer('audio/mpeg');
-            } catch (e) { return; }
-
-            prefetchBuf.addEventListener('updateend', function () {
-              prefetchAppending = false;
-              if (prefetchDone && prefetchQueue.length === 0) {
-                if (prefetchMSE.readyState === 'open' && !prefetchBuf.updating) {
-                  try { prefetchMSE.endOfStream(); } catch(_) {}
-                }
-              } else {
-                flushPrefetchQueue();
-              }
-            });
-
-            fetch(KOKORO_URL + '/v1/audio/speech', {
-              method:  'POST',
-              signal:  prefetchAbort.signal,
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                model: 'kokoro', input: text, voice: voiceSel.value,
-                response_format: 'mp3', speed: parseFloat(speedSlider.value), stream: true
-              })
-            })
-            .then(function (res) {
-              if (!res.ok) return;
-              var reader = res.body.getReader();
-              function pump() {
-                reader.read().then(function (ref) {
-                  if (ref.done) {
-                    prefetchDone = true;
-                    if (prefetchBuf && !prefetchBuf.updating && prefetchQueue.length === 0) {
-                      if (prefetchMSE && prefetchMSE.readyState === 'open') {
-                        try { prefetchMSE.endOfStream(); } catch(_) {}
-                      }
-                    }
-                    return;
-                  }
-                  prefetchQueue.push(ref.value);
-                  flushPrefetchQueue();
-                  pump();
-                }).catch(function () {});
-              }
-              pump();
-            })
-            .catch(function () {});
-          });
-
-          prefetchAudio.load();
-        } else {
-          // ── Blob prefetch path (iOS / no MSE) ────────────────────────────────
-          fetch(KOKORO_URL + '/v1/audio/speech', {
-            method:  'POST',
-            signal:  prefetchAbort.signal,
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              model: 'kokoro', input: text, voice: voiceSel.value,
-              response_format: 'mp3', speed: parseFloat(speedSlider.value), stream: false
-            })
-          })
-          .then(function (res) { return res.ok ? res.blob() : Promise.reject(res.status); })
-          .then(function (blob) {
-            prefetchAudio.src = URL.createObjectURL(blob);
-            prefetchDone = true;
-            prefetchAudio.load();
-          })
-          .catch(function () {});
-        }
+  audio.addEventListener('timeupdate', function () {
+    if (!NEXT_N || prefetchFired || !audio.duration || !isFinite(audio.duration)) return;
+    if (audio.currentTime / audio.duration >= 0.8) {
+      prefetchFired = true;
+      queueSetNext('generating', 'POST /ui/audio/' + SLUG + '/' + NEXT_N + ' (prefetch)');
+      // Fire-and-forget: idempotent on server.
+      fetch('/ui/audio/' + SLUG + '/' + NEXT_N, {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          voice: voiceSel.value,
+          speed: parseFloat(speedSlider.value)
+        })
       })
-      .catch(function () {});
-  }
-
-  // ── core stream logic ─────────────────────────────────────────────────────────
-
-  function stop() {
-    if (abortCtrl) { abortCtrl.abort(); abortCtrl = null; }
-    if (audio.src && audio.src.startsWith('blob:')) {
-      URL.revokeObjectURL(audio.src);
+      .then(function (res) { return res.ok ? res.json() : Promise.reject(res.status); })
+      .then(function () { queueSetNext('ready', 'prefetch complete: ch.' + NEXT_N + ' cached'); })
+      .catch(function (e) { queueSetNext('error', 'prefetch failed: ' + e); });
     }
-    audio.src  = '';
-    mse        = null;
-    srcBuf     = null;
-    queue      = [];
-    appending  = false;
-    fetchDone  = false;
-    stopPrefetch();
+  });
+
+  // ── stop / cleanup ────────────────────────────────────────────────────────────
+  function stop() {
+    if (currentAudioCtrl) { currentAudioCtrl.abort(); currentAudioCtrl = null; }
+    audio.pause();
+    audio.src = '';
+    prefetchFired = false;
     setStopped();
   }
 
-  function startStream(text, paraIdx) {
-    abortCtrl = new AbortController();
-
-    if (USE_MSE) {
-      // ── MSE streaming path (desktop) ─────────────────────────────────────────
-      mse       = new MediaSource();
-      queue     = [];
-      appending = false;
-      fetchDone = false;
-
-      audio.src = URL.createObjectURL(mse);
-
-      mse.addEventListener('sourceopen', function () {
-        try {
-          srcBuf = mse.addSourceBuffer('audio/mpeg');
-        } catch (e) {
-          setError('MSE: ' + e.message);
-          return;
-        }
-
-        srcBuf.addEventListener('updateend', function () {
-          appending = false;
-          if (fetchDone && queue.length === 0) {
-            endStream();
-          } else {
-            flushQueue();
-          }
-        });
-
-        fetch(KOKORO_URL + '/v1/audio/speech', {
-          method:  'POST',
-          signal:  abortCtrl.signal,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            model: 'kokoro', input: text, voice: voiceSel.value,
-            response_format: 'mp3', speed: parseFloat(speedSlider.value), stream: true
-          })
-        })
-        .then(function (res) {
-          if (!res.ok) {
-            return res.text().then(function (t) { throw new Error(res.status + ': ' + t); });
-          }
-          var reader = res.body.getReader();
-          function pump() {
-            reader.read().then(function (ref) {
-              if (ref.done) {
-                fetchDone = true;
-                if (!srcBuf.updating && queue.length === 0) { endStream(); }
-                return;
-              }
-              queue.push(ref.value);
-              flushQueue();
-              pump();
-            }).catch(function (e) {
-              if (e.name !== 'AbortError') setError(e.message);
-            });
-          }
-          pump();
-        })
-        .catch(function (e) {
-          if (e.name !== 'AbortError') setError(e.message);
-        });
-      });
-
-      audio.load();
-    } else {
-      // ── Blob path (iOS / no MSE) ──────────────────────────────────────────────
-      // Fetch the full audio as a single blob then hand it to the <audio> element.
-      // Playback begins only once the download is complete, but this is the only
-      // approach that works reliably on iOS Safari.
-      setStatus('Downloading\u2026');
-      fetch(KOKORO_URL + '/v1/audio/speech', {
-        method:  'POST',
-        signal:  abortCtrl.signal,
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          model: 'kokoro', input: text, voice: voiceSel.value,
-          response_format: 'mp3', speed: parseFloat(speedSlider.value), stream: false
-        })
-      })
-      .then(function (res) {
-        if (!res.ok) {
-          return res.text().then(function (t) { throw new Error(res.status + ': ' + t); });
-        }
-        return res.blob();
-      })
-      .then(function (blob) {
-        if (abortCtrl && abortCtrl.signal.aborted) return;
-        var url = URL.createObjectURL(blob);
-        audio.src = url;
-        audio.load();
-        // Trigger prefetch now that the main download is done.
-        if (autoplayChk.checked && NEXT_N && !prefetchAbort) {
-          startPrefetch();
-        }
-      })
-      .catch(function (e) {
-        if (e.name !== 'AbortError') setError(e.message);
-      });
-    }
-  }
-
-  // startFromPara stops any current stream and begins a new one from paraIdx.
-  function startFromPara(paraIdx) {
-    if (!KOKORO_URL) { setError('KOKORO_URL not configured on server'); return; }
-    stop();
-    var text = textFromPara(paraIdx);
-    if (!text) { setError('no text found'); return; }
-    setLoading(paraIdx);
-    startStream(text, paraIdx);
-  }
-
-  // ── auto-play next chapter ────────────────────────────────────────────────────
-  // When auto-play is on we try to hand off directly from the prefetched audio
-  // pipeline.  The page navigation still happens (so the URL and chapter title
-  // update correctly) but audio starts immediately from the prefetch buffer
-  // instead of waiting for a cold Kokoro request.
-
-  function goNextChapter() {
-    if (!NEXT_N) return;
-    var nextURL = '/books/' + SLUG + '/chapters/' + NEXT_N;
-
-    if (prefetchAudio && prefetchAbort) {
-      // We have a prefetch in progress (or complete).  Swap the prefetch audio
-      // element into the main player so it plays without delay.
-      var pa = prefetchAudio;
-      // Detach from prefetch state so stopPrefetch() called by htmx:beforeSwap
-      // doesn't destroy it before we hand it off.
-      prefetchAudio = null;
-      prefetchAbort = null;
-
-      // Navigate the page (URL + content swap) without the ?autoplay=1 flag
-      // because we are starting audio ourselves right here.
-      htmx.ajax('GET', nextURL, {
-        target:  '#main-content',
-        swap:    'innerHTML',
-        pushURL: nextURL
-      });
-
-      // Play prefetched audio immediately (or as soon as it can).
-      // The new page's script will take over its own audio element, so we
-      // drive this orphaned element directly until the user interacts.
-      // Use the main audio element to carry the blob URL across the swap.
-      if (pa.src && pa.src.startsWith('blob:')) {
-        audio.src = pa.src;
-        pa.src = '';       // transfer ownership so revokeObjectURL isn't called twice
-        if (prefetchReady || pa.readyState >= 3 /* HAVE_FUTURE_DATA */) {
-          audio.play().catch(function () {});
-        } else {
-          audio.addEventListener('canplay', function onCp() {
-            audio.removeEventListener('canplay', onCp);
-            audio.play().catch(function () {});
-          });
-        }
-      }
-
-      // Clean up the rest of the prefetch state (don't abort — the fetch
-      // may still be pumping chunks into the buffer we are now playing).
-      prefetchMSE = null; prefetchBuf = null;
-      prefetchQueue = []; prefetchAppending = false;
-      prefetchDone = false; prefetchReady = false;
-    } else {
-      // No prefetch available — fall back to cold navigation with ?autoplay=1.
-      htmx.ajax('GET', nextURL + '?autoplay=1', {
-        target:  '#main-content',
-        swap:    'innerHTML',
-        pushURL: nextURL
-      });
-    }
-  }
-
   // ── audio events ──────────────────────────────────────────────────────────────
-
   audio.addEventListener('canplay', function () {
     if (audio.paused) {
       audio.play().then(setPlaying).catch(function (e) { setError(e.message); });
@@ -1823,26 +1697,56 @@ const chapterTmpl = `
   });
   audio.addEventListener('waiting', function () { setStatus('Buffering\u2026'); });
   audio.addEventListener('playing', setPlaying);
+  audio.addEventListener('pause',   function () { if (!audio.ended) setPaused(); });
+  audio.addEventListener('play',    setPlaying);
+  audio.addEventListener('error',   function () { setError('audio error'); });
+
+  // Sync paragraph highlight and scrubber while playing (via timeupdate).
+  audio.addEventListener('timeupdate', function () {
+    queueUpdateScrubber();
+    if (!audio.duration || !isFinite(audio.duration) || paras.length === 0) return;
+    var idx = Math.min(
+      Math.floor((audio.currentTime / audio.duration) * paras.length),
+      paras.length - 1
+    );
+    if (!activePara || activePara !== paras[idx]) highlightPara(idx);
+  });
+
   audio.addEventListener('ended', function () {
-    // Cancel the main stream state but keep prefetch alive — goNextChapter needs it.
-    if (abortCtrl) { abortCtrl.abort(); abortCtrl = null; }
-    if (audio.src && audio.src.startsWith('blob:')) URL.revokeObjectURL(audio.src);
-    audio.src = ''; mse = null; srcBuf = null; queue = []; appending = false; fetchDone = false;
+    audio.src = '';
+    prefetchFired = false;
     if (autoplayChk.checked && NEXT_N) {
       goNextChapter();
     } else {
-      stopPrefetch();
       setStopped();
     }
   });
-  audio.addEventListener('error',   function () { setError('audio decode error'); });
-  audio.addEventListener('pause',   function () { if (!audio.ended) setPaused(); });
-  audio.addEventListener('play',    setPlaying);
 
-  // ── toolbar toggle (plays from paragraph 0) ───────────────────────────────────
+  // ── auto-next ────────────────────────────────────────────────────────────────
+  function goNextChapter() {
+    if (!NEXT_N) return;
+    var nextURL = '/books/' + SLUG + '/chapters/' + NEXT_N;
+    htmx.ajax('GET', nextURL + '?autoplay=1', {
+      target:  '#main-content',
+      swap:    'innerHTML',
+      pushURL: nextURL
+    });
+  }
+
+  // ── main entry point ─────────────────────────────────────────────────────────
+  function startAudio() {
+    setGenerating();
+    highlightPara(0);
+    generateAudio(CHAPTER_N, function (url) {
+      audio.src = url;
+      audio.load();
+      // canplay event triggers play(); setPlaying() re-enables controls.
+    });
+  }
 
   window.ttsToggle = function () {
-    if (audio.src && !audio.ended) {
+    // Already have audio loaded — just play/pause.
+    if (audio.src) {
       if (audio.paused) {
         audio.play().then(setPlaying).catch(function (e) { setError(e.message); });
       } else {
@@ -1850,21 +1754,21 @@ const chapterTmpl = `
       }
       return;
     }
-    startFromPara(0);
+    startAudio();
   };
 
-  // Stop when HTMX navigates away.
+  // Stop cleanly when HTMX navigates away.
   document.body.addEventListener('htmx:beforeSwap', stop);
 
-  // ── auto-start TTS when arriving via auto-play navigation ────────────────────
-  // The previous chapter's goNextChapter() appends ?autoplay=1. Detect it here
-  // and kick off playback from paragraph 0 once the page is ready.
-
+  // ── auto-start on ?autoplay=1 ─────────────────────────────────────────────────
   if (new URLSearchParams(window.location.search).get('autoplay') === '1') {
-    autoplayChk.checked = true; // keep the toggle on for the chain to continue
-    // Small delay to let the DOM settle before starting the stream.
-    setTimeout(function () { startFromPara(0); }, 150);
+    autoplayChk.checked = true;
+    setTimeout(startAudio, 100);
   }
+
+  // ── initialise queue bar on page load ────────────────────────────────────────
+  queueSetCurrent('idle', 'ready — ch.' + CHAPTER_N);
+  if (NEXT_N) { queueSetNext('idle', 'waiting — ch.' + NEXT_N); }
 }());
 </script>`
 
@@ -1903,7 +1807,6 @@ func (s *Server) handleChapter(w http.ResponseWriter, r *http.Request) {
 		ChapterN     int
 		Title        string
 		AllChapters  interface{}
-		KokoroURL    string
 		Voices       []string
 		DefaultVoice string
 	}{
@@ -1914,7 +1817,6 @@ func (s *Server) handleChapter(w http.ResponseWriter, r *http.Request) {
 		ChapterN:     n,
 		Title:        title,
 		AllChapters:  chapters,
-		KokoroURL:    s.kokoroURL,
 		Voices:       kokoroVoices,
 		DefaultVoice: s.kokoroVoice,
 	})
diff --git a/scraper/internal/writer/writer.go b/scraper/internal/writer/writer.go
index 167e0c2..b4f182e 100644
--- a/scraper/internal/writer/writer.go
+++ b/scraper/internal/writer/writer.go
@@ -408,6 +408,26 @@ func (w *Writer) bookDir(slug string) string {
 	return filepath.Join(w.root, slug)
 }
 
+// AudioDir returns the directory used to cache generated MP3 files for a book.
+func (w *Writer) AudioDir(slug string) string {
+	return filepath.Join(w.bookDir(slug), "audio")
+}
+
+// AudioPath returns the full path for a cached chapter audio file.
+// The filename is keyed by chapter number, voice, and speed so that different
+// settings never collide.  Speed is formatted to one decimal place (e.g. "1.0").
+func (w *Writer) AudioPath(slug string, n int, voice string, speed float64) string {
+	// Sanitise voice so it is safe as a filename component.
+	safeVoice := strings.Map(func(r rune) rune {
+		if (r >= 'a' && r <= 'z') || (r >= 'A' && r <= 'Z') || (r >= '0' && r <= '9') || r == '_' || r == '-' {
+			return r
+		}
+		return '_'
+	}, voice)
+	filename := fmt.Sprintf("ch%d-%s-%.1f.mp3", n, safeVoice, speed)
+	return filepath.Join(w.AudioDir(slug), filename)
+}
+
 // chapterPath computes the full file path for a chapter.
 //
 //	vol-{volume}/{folderRange}/chapter-{number}.md