feat: minor ui changes

.env.example

@@ -1,5 +1,5 @@
 LLM_API_KEY=your_api_key_here
 LLM_BASE_URL=https://api.openai.com/v1
-LLM_MODEL=ds/deepseek-v4-flash
+LLM_MODEL=your_llm_model_here
 DATABASE_URL=postgresql://user:password@localhost:5432/silksoup
 OUTPUT_DIR=output

.gitignore

@@ -4,4 +4,4 @@ __pycache__/
 *.pyc
 sqlite.db
 .env
-output/
+output/temp/

README.md

@@ -85,7 +85,7 @@ If you prefer working from the terminal, run `main.py` directly:
 
 ### CLI Syntax:
 ```bash
-python main.py <url> [-o OUTPUT] [--refresh]
+python main.py <url> [-o OUTPUT] [--refresh [{none,llm,all}]]
 ```
 
 ### Flags & Options:
@@ -94,7 +94,7 @@ python main.py <url> [-o OUTPUT] [--refresh]
 |---|---|---|
 | `url` | *Positional (Required)* | The main index / table-of-contents URL of the novel. |
 | `-o`, `--output` | *Optional* | Output directory for the compiled EPUB file (default: `./output`). |
-| `--refresh` | *Optional (Flag)* | Force refresh cached pages and metadata instead of using SQLite/PostgreSQL cache. |
+| `--refresh` | *Optional (Choice)* | Cache refresh mode: `none` (default, full cache), `llm` (reuse HTML, re-run AI), or `all` (full scrape anew). Providing `--refresh` without an argument defaults to `all`. |
 | `-h`, `--help` | *Optional (Flag)* | Show command-line help message and exit. |
 
 ---

main.py

@@ -26,8 +26,12 @@ def parse_args() -> argparse.Namespace:
     )
     parser.add_argument(
         "--refresh",
-        action="store_true",
-        help="Force refresh cached pages/metadata instead of using SQLite cache",
+        dest="refresh_mode",
+        choices=["none", "llm", "all"],
+        nargs="?",
+        const="all",
+        default="none",
+        help="Cache refresh mode: 'none' (use full cache), 'llm' (reuse HTML, re-run AI), 'all' (full fresh scrape)",
     )
     return parser.parse_args()
 
@@ -37,12 +41,13 @@ def main() -> None:
     init_db()
 
     html_content = clean_novel_html(
-        cache_hit(args.url, force_refresh=args.refresh)
+        cache_hit(args.url, refresh_mode=args.refresh_mode),
+        base_url=args.url,
     )
     metadata = extract_metadata_json(
-        html_content, args.url, force_refresh=args.refresh
+        html_content, args.url, refresh_mode=args.refresh_mode
     )
-    clean_chapters(metadata, force_refresh=args.refresh)
+    clean_chapters(metadata, refresh_mode=args.refresh_mode)
     create_epub(metadata, output_dir=args.output)
 
 

src/ape.py

@@ -0,0 +1,236 @@
+import json
+import re
+from bs4 import BeautifulSoup
+from .database import db_execute, db_fetch_one
+from .llm import generate_json, generate_text
+from .prompt import (
+    APE_SYSTEM_PROMPT,
+    CHAPTER_SUMMARY_SYSTEM_PROMPT,
+    LORE_EXTRACTION_SYSTEM_PROMPT,
+)
+
+
+def get_or_init_novel_lore(novel_url: str, metadata: dict, initial_sample_html: str = "") -> dict:
+    row = db_fetch_one("SELECT lore_json FROM novel_lore WHERE novel_url = ?", (novel_url,))
+    if row is not None and row[0]:
+        try:
+            return json.loads(row[0])
+        except Exception:
+            pass
+
+    series_meta = metadata.get("metadata", {})
+    description = series_meta.get("description") or ""
+    title = series_meta.get("title") or "Novel"
+
+    soup = BeautifulSoup(initial_sample_html, "lxml")
+    sample_text = soup.get_text(separator=" ", strip=True)[:4000]
+
+    input_text = f"Title: {title}\nDescription: {description}\n\nSample Chapter Content:\n{sample_text}"
+    try:
+        raw_json = generate_json(LORE_EXTRACTION_SYSTEM_PROMPT, input_text)
+        lore = json.loads(raw_json)
+    except Exception:
+        lore = {
+            "characters": [],
+            "terms": {},
+            "rules": {"keep_honorifics": False, "pov": "Third person limited"},
+        }
+
+    lore_str = json.dumps(lore, ensure_ascii=False)
+    db_execute(
+        "INSERT INTO novel_lore (novel_url, lore_json, rolling_summary_json) VALUES (?, ?, ?) ON CONFLICT(novel_url) DO UPDATE SET lore_json=excluded.lore_json, updated_at=CURRENT_TIMESTAMP",
+        (novel_url, lore_str, json.dumps([])),
+    )
+    return lore
+
+
+def get_rolling_summary(novel_url: str) -> list:
+    row = db_fetch_one("SELECT rolling_summary_json FROM novel_lore WHERE novel_url = ?", (novel_url,))
+    if row is not None and row[0]:
+        try:
+            return json.loads(row[0])
+        except Exception:
+            return []
+    return []
+
+
+def update_rolling_summary(novel_url: str, chapter_name: str, chapter_html: str) -> None:
+    soup = BeautifulSoup(chapter_html, "lxml")
+    plain_text = soup.get_text(separator=" ", strip=True)
+    if not plain_text:
+        return
+
+    sample = plain_text[:3500]
+    try:
+        summary_text = generate_text(CHAPTER_SUMMARY_SYSTEM_PROMPT, sample).strip()
+    except Exception:
+        summary_text = f"Events occurred in {chapter_name}."
+
+    existing = get_rolling_summary(novel_url)
+    existing.append({"title": chapter_name, "summary": summary_text})
+    recent = existing[-2:]
+
+    db_execute(
+        "INSERT INTO novel_lore (novel_url, rolling_summary_json) VALUES (?, ?) ON CONFLICT(novel_url) DO UPDATE SET rolling_summary_json=excluded.rolling_summary_json, updated_at=CURRENT_TIMESTAMP",
+        (novel_url, json.dumps(recent, ensure_ascii=False)),
+    )
+
+
+def strip_duplicate_chapter_title(html: str, chapter_title: str) -> str:
+    if not html or not html.strip():
+        return ""
+    soup = BeautifulSoup(html, "lxml")
+    body = soup.body if soup.body else soup
+
+    # Clean title for comparison
+    clean_target = re.sub(r"[^\w\s]", "", chapter_title.lower()).strip()
+    target_words = set(clean_target.split())
+
+    # Check top headings or paragraphs
+    for tag in list(body.find_all(["h1", "h2", "h3", "p", "div"], recursive=False))[:3]:
+        tag_text = tag.get_text(strip=True)
+        clean_tag = re.sub(r"[^\w\s]", "", tag_text.lower()).strip()
+        tag_words = set(clean_tag.split())
+
+        # Exact match or high overlap with chapter title / "chapter X"
+        if clean_target and (clean_tag == clean_target or (len(target_words) >= 2 and target_words.issubset(tag_words))):
+            tag.decompose()
+            continue
+        if re.match(r"^(chapter|episode|prologue|epilogue)\s*\d*", clean_tag, re.I) and len(clean_tag.split()) <= 4:
+            tag.decompose()
+            continue
+
+    return body.decode_contents().strip()
+
+
+def chunk_chapter_text(html: str, target_words: int = 800) -> list[str]:
+    if not html or not html.strip():
+        return []
+
+    soup = BeautifulSoup(html, "lxml")
+    body = soup.body if soup.body else soup
+
+    elements = list(body.find_all(["p", "hr", "img", "blockquote", "aside"], recursive=False))
+    if not elements:
+        # Fallback: split by paragraph or line breaks
+        paragraphs = [p.strip() for p in html.split("\n") if p.strip()]
+        chunks = []
+        curr = []
+        curr_words = 0
+        for p in paragraphs:
+            w_count = len(p.split())
+            if curr_words + w_count > target_words and curr:
+                chunks.append("\n".join(curr))
+                curr = [p]
+                curr_words = w_count
+            else:
+                curr.append(p)
+                curr_words += w_count
+        if curr:
+            chunks.append("\n".join(curr))
+        return chunks
+
+    chunks = []
+    curr_elements = []
+    curr_word_count = 0
+
+    for el in elements:
+        text = el.get_text(strip=True)
+        w_count = len(text.split())
+        if curr_word_count + w_count > target_words and curr_elements:
+            chunk_html = "".join(str(e) for e in curr_elements)
+            chunks.append(chunk_html)
+            curr_elements = [el]
+            curr_word_count = w_count
+        else:
+            curr_elements.append(el)
+            curr_word_count += w_count
+
+    if curr_elements:
+        chunk_html = "".join(str(e) for e in curr_elements)
+        chunks.append(chunk_html)
+
+    return chunks
+
+
+def filter_glossary_for_chunk(global_lore: dict, chunk_text: str) -> dict:
+    if not global_lore:
+        return {}
+
+    lowered_chunk = chunk_text.lower()
+    filtered_chars = []
+    for char in global_lore.get("characters", []):
+        names = [char.get("standard_name", ""), char.get("raw_name", "")] + char.get("mtl_variants", [])
+        if any(n and n.lower() in lowered_chunk for n in names):
+            filtered_chars.append(char)
+
+    filtered_terms = {}
+    for term, trans in global_lore.get("terms", {}).items():
+        if (term and term.lower() in lowered_chunk) or (trans and trans.lower() in lowered_chunk):
+            filtered_terms[term] = trans
+
+    # If no matches, retain top character or default to keep context active
+    if not filtered_chars and global_lore.get("characters"):
+        filtered_chars = global_lore["characters"][:2]
+
+    return {
+        "characters": filtered_chars,
+        "terms": filtered_terms,
+        "rules": global_lore.get("rules", {}),
+    }
+
+
+def clean_llm_html_output(raw_output: str) -> str:
+    cleaned = re.sub(r"^```(?:html)?\s*", "", raw_output.strip(), flags=re.I)
+    cleaned = re.sub(r"\s*```$", "", cleaned)
+    # Ensure any <aside class="tl-note"> is converted to <blockquote>
+    cleaned = re.sub(r"<aside\s+class=[\"']tl-note[\"']>(.*?)</aside>", r"<blockquote class=\"tl-note\"><p><strong>TL Note:</strong> \1</p></blockquote>", cleaned, flags=re.DOTALL | re.I)
+    return cleaned.strip()
+
+
+def fix_chapter(
+    raw_cleaned_html: str,
+    chapter_name: str,
+    novel_url: str,
+    global_lore: dict,
+) -> str:
+    # 1. Deduplicate title from start of body
+    html_without_title = strip_duplicate_chapter_title(raw_cleaned_html, chapter_name)
+
+    # 2. Chunk text
+    chunks = chunk_chapter_text(html_without_title, target_words=800)
+    if not chunks:
+        chunks = [html_without_title] if html_without_title else ["<p></p>"]
+
+    # 3. Format rolling scene context
+    rolling = get_rolling_summary(novel_url)
+    if rolling:
+        context_lines = [f"- {r.get('title', 'Previous')}: {r.get('summary', '')}" for r in rolling]
+        scene_context_str = "Recent Scene Context:\n" + "\n".join(context_lines)
+    else:
+        scene_context_str = f"Scene Context: Opening / early chapter ({chapter_name})."
+
+    fixed_chunks = []
+    for chunk in chunks:
+        active_glossary = filter_glossary_for_chunk(global_lore, chunk)
+        user_prompt = (
+            f"### Active Glossary & Lore\n```json\n{json.dumps(active_glossary, ensure_ascii=False, indent=2)}\n```\n\n"
+            f"### Scene Context\n{scene_context_str}\n\n"
+            f"### Raw MTL Text to Process\n{chunk}"
+        )
+
+        try:
+            polished = generate_text(APE_SYSTEM_PROMPT, user_prompt)
+            fixed_chunk = clean_llm_html_output(polished)
+        except Exception:
+            # Fallback to original chunk if LLM fails on a segment
+            fixed_chunk = clean_llm_html_output(chunk)
+
+        fixed_chunks.append(fixed_chunk)
+
+    final_fixed_html = "\n".join(fixed_chunks)
+
+    # 4. Update rolling summary for next chapters
+    update_rolling_summary(novel_url, chapter_name, final_fixed_html)
+
+    return final_fixed_html

src/chapter.py

@@ -4,6 +4,7 @@ from .parse import robust_fetch
 from .clean_html import clean_novel_html
 from .prompt import HTML_CHAPTER_SANITIZER
 from .llm import generate_text
+from .ape import get_or_init_novel_lore, fix_chapter
 
 
 def iter_chapters(metadata: dict):
@@ -21,8 +22,11 @@ def sanitize_chapter_html(html: str) -> str:
     return generate_text(HTML_CHAPTER_SANITIZER, html)
 
 
-def cache_chapter_hit(url: str, force_refresh: bool = False) -> str:
-    if not force_refresh:
+def cache_chapter_hit(url: str, refresh_mode: str = "none") -> str:
+    if isinstance(refresh_mode, bool):
+        refresh_mode = "all" if refresh_mode else "none"
+
+    if refresh_mode not in ("all", "all_refresh"):
         row = db_fetch_one("SELECT html_text FROM chapter_page WHERE url = ?", (url,))
         if row is not None and row[0] is not None:
             tqdm.write(f"Chapter cache hit: {url}")
@@ -40,14 +44,17 @@ def cache_chapter_hit(url: str, force_refresh: bool = False) -> str:
     return html
 
 
-def cache_clean_hit(url: str, force_refresh: bool = False) -> str:
-    if not force_refresh:
+def cache_clean_hit(url: str, refresh_mode: str = "none") -> str:
+    if isinstance(refresh_mode, bool):
+        refresh_mode = "all" if refresh_mode else "none"
+
+    if refresh_mode == "none":
         row = db_fetch_one("SELECT clean_html_text FROM chapter_page WHERE url = ?", (url,))
         if row is not None and row[0] is not None:
             tqdm.write(f"Clean HTML cache hit: {url}")
             return str(row[0])
 
-    raw_html = cache_chapter_hit(url, force_refresh=force_refresh)
+    raw_html = cache_chapter_hit(url, refresh_mode=refresh_mode)
     pre_cleaned = clean_novel_html(raw_html, base_url=url)
     sanitized = sanitize_chapter_html(pre_cleaned)
 
@@ -59,9 +66,39 @@ def cache_clean_hit(url: str, force_refresh: bool = False) -> str:
     return sanitized
 
 
+def cache_fixed_hit(
+    url: str,
+    chapter_name: str,
+    novel_url: str,
+    global_lore: dict,
+    refresh_mode: str = "none",
+) -> str:
+    if refresh_mode == "none":
+        row = db_fetch_one("SELECT fixed_html_text FROM chapter_page WHERE url = ?", (url,))
+        if row is not None and row[0] is not None:
+            tqdm.write(f"Fixed HTML cache hit: {url}")
+            return str(row[0])
+
+    # Retrieve clean html first
+    clean_html = cache_clean_hit(url, refresh_mode="none" if refresh_mode != "all" else "all")
+    fixed_html = fix_chapter(
+        raw_cleaned_html=clean_html,
+        chapter_name=chapter_name,
+        novel_url=novel_url,
+        global_lore=global_lore,
+    )
+
+    db_execute(
+        "UPDATE chapter_page SET fixed_html_text = ? WHERE url = ?",
+        (fixed_html, url),
+    )
+
+    return fixed_html
+
+
 def scrape_chapters(
     metadata: dict,
-    force_refresh: bool = False,
+    refresh_mode: str = "none",
     progress_callback=None,
     cancel_event=None,
 ) -> None:
@@ -75,7 +112,7 @@ def scrape_chapters(
         if cancel_event is not None and cancel_event.is_set():
             raise InterruptedError("Scraping was cancelled by user")
         try:
-            cache_chapter_hit(chapter["url"], force_refresh=force_refresh)
+            cache_chapter_hit(chapter["url"], refresh_mode=refresh_mode)
             if progress_callback:
                 progress_callback(stage="scraping", current=idx, total=total, message=chapter.get("name") or chapter.get("url") or "")
         except InterruptedError:
@@ -88,7 +125,7 @@ def scrape_chapters(
 
 def clean_chapters(
     metadata: dict,
-    force_refresh: bool = False,
+    refresh_mode: str = "none",
     progress_callback=None,
     cancel_event=None,
 ) -> None:
@@ -102,7 +139,7 @@ def clean_chapters(
         if cancel_event is not None and cancel_event.is_set():
             raise InterruptedError("Cleaning was cancelled by user")
         try:
-            cache_clean_hit(chapter["url"], force_refresh=force_refresh)
+            cache_clean_hit(chapter["url"], refresh_mode=refresh_mode)
             if progress_callback:
                 progress_callback(stage="cleaning", current=idx, total=total, message=chapter.get("name") or chapter.get("url") or "")
         except InterruptedError:
@@ -111,3 +148,49 @@ def clean_chapters(
             tqdm.write(f"[SKIP] {chapter['name']}: {e}")
             if progress_callback:
                 progress_callback(stage="cleaning", current=idx, total=total, message=f"[SKIP] {chapter.get('name')}: {e}")
+
+
+def fix_chapters(
+    metadata: dict,
+    refresh_mode: str = "none",
+    progress_callback=None,
+    cancel_event=None,
+) -> None:
+    chapters = list(iter_chapters(metadata))
+    total = len(chapters)
+    novel_url = metadata.get("novel_url") or ""
+
+    # Sample the first chapter for initial lore extraction if needed
+    first_chapter_sample = ""
+    if chapters:
+        try:
+            first_raw = cache_chapter_hit(chapters[0]["url"], refresh_mode="none")
+            first_chapter_sample = clean_novel_html(first_raw, base_url=chapters[0]["url"])
+        except Exception:
+            pass
+
+    global_lore = get_or_init_novel_lore(novel_url, metadata, first_chapter_sample)
+
+    if progress_callback is None:
+        iterator = tqdm(chapters, desc="Fixing MTL chapters", unit="ch")
+    else:
+        iterator = chapters
+    for idx, chapter in enumerate(iterator, start=1):
+        if cancel_event is not None and cancel_event.is_set():
+            raise InterruptedError("Fixing was cancelled by user")
+        try:
+            cache_fixed_hit(
+                url=chapter["url"],
+                chapter_name=chapter.get("name") or f"Chapter {idx}",
+                novel_url=novel_url,
+                global_lore=global_lore,
+                refresh_mode=refresh_mode,
+            )
+            if progress_callback:
+                progress_callback(stage="fixing", current=idx, total=total, message=chapter.get("name") or chapter.get("url") or "")
+        except InterruptedError:
+            raise
+        except Exception as e:
+            tqdm.write(f"[SKIP] {chapter['name']}: {e}")
+            if progress_callback:
+                progress_callback(stage="fixing", current=idx, total=total, message=f"[SKIP] {chapter.get('name')}: {e}")

src/clean_html.py

@@ -13,7 +13,7 @@ def clean_novel_html(raw_html: str, base_url: str = "") -> str:
 
     soup = BeautifulSoup(raw_html, "lxml")
 
-    for comment in soup.find_all(text=lambda text: isinstance(text, Comment)):
+    for comment in soup.find_all(string=lambda text: isinstance(text, Comment)):
         comment.extract()
 
     invisible_tags = [
@@ -70,15 +70,17 @@ def clean_novel_html(raw_html: str, base_url: str = "") -> str:
                 tag.attrs = {}
         elif tag.name == "img":
             src = (
-                tag.get("src")
-                or tag.get("data-src")
+                tag.get("data-src")
+                or tag.get("data-orig-file")
                 or tag.get("data-original")
+                or tag.get("data-lazy-src")
+                or tag.get("src")
                 or ""
             ).strip()
             if src and not src.startswith("data:image"):
                 tag.attrs = {"src": urljoin(base_url, src) if base_url else src}
             else:
-                tag.attrs = {}
+                tag.decompose()
         else:
             tag.attrs = {}
 

src/database.py

@@ -83,9 +83,23 @@ def init_db() -> None:
                         status_code INTEGER,
                         html_text TEXT,
                         clean_html_text TEXT,
+                        fixed_html_text TEXT,
                         fetched_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
                     )
                 """)
+                cur.execute("""
+                    CREATE TABLE IF NOT EXISTS novel_lore (
+                        novel_url TEXT PRIMARY KEY,
+                        lore_json TEXT,
+                        rolling_summary_json TEXT,
+                        updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
+                    )
+                """)
+                # Handle existing tables missing columns
+                try:
+                    cur.execute("ALTER TABLE chapter_page ADD COLUMN IF NOT EXISTS fixed_html_text TEXT;")
+                except Exception:
+                    pass
             conn.commit()
         finally:
             conn.close()
@@ -108,6 +122,21 @@ def init_db() -> None:
                     status_code INTEGER,
                     html_text TEXT,
                     clean_html_text TEXT,
+                    fixed_html_text TEXT,
                     fetched_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
                 )
             """)
+            conn.execute("""
+                CREATE TABLE IF NOT EXISTS novel_lore (
+                    novel_url TEXT PRIMARY KEY,
+                    lore_json TEXT,
+                    rolling_summary_json TEXT,
+                    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+                )
+            """)
+            # Migration check for SQLite
+            cur = conn.cursor()
+            cur.execute("PRAGMA table_info(chapter_page);")
+            columns = [row[1] for row in cur.fetchall()]
+            if "fixed_html_text" not in columns:
+                conn.execute("ALTER TABLE chapter_page ADD COLUMN fixed_html_text TEXT;")

src/epub_creator.py

@@ -42,12 +42,17 @@ hr {
     border-top: 1px solid #ccc;
     margin: 2em 0;
 }
-aside.tl-note {
+aside.tl-note, blockquote.tl-note {
     font-size: 90%;
-    margin: 1em 2em;
-    padding: 0.5em 1em;
-    border-left: 3px solid #ccc;
-    color: #555;
+    margin: 1.5em 1em;
+    padding: 0.6em 1.2em;
+    border-left: 3px solid #888;
+    background-color: #f5f5f5;
+    color: #444;
+}
+blockquote.tl-note p {
+    margin: 0;
+    text-indent: 0;
 }
 """
 
@@ -58,7 +63,16 @@ def _slugify(text: str) -> str:
     return slug or "novel"
 
 
-def _get_clean_html(url: str) -> str:
+def _get_chapter_html(url: str, is_fixed: bool = False) -> str:
+    if is_fixed:
+        row = db_fetch_one("SELECT fixed_html_text, clean_html_text FROM chapter_page WHERE url = ?", (url,))
+        if row is not None:
+            if row[0]:
+                return str(row[0])
+            if row[1]:
+                return str(row[1])
+        raise RuntimeError(f"No fixed or cleaned HTML cached for {url}. Run fix_chapters first.")
+
     row = db_fetch_one("SELECT clean_html_text FROM chapter_page WHERE url = ?", (url,))
     if row is None or row[0] is None:
         raise RuntimeError(
@@ -74,27 +88,68 @@ def _download(url: str, referer: str | None = None) -> bytes:
     return content
 
 
+_MAX_IMAGE_WIDTH = int(os.environ.get("IMAGE_MAX_WIDTH", "1600"))
+_MAX_IMAGE_HEIGHT = int(os.environ.get("IMAGE_MAX_HEIGHT", "2400"))
+_JPEG_QUALITY = int(os.environ.get("IMAGE_JPEG_QUALITY", "85"))
+
+
+def _has_transparency(image: Image.Image) -> bool:
+    if image.mode in ("RGBA", "LA"):
+        alpha = image.getchannel("A") if "A" in image.getbands() else None
+        if alpha is not None:
+            min_alpha, _ = alpha.getextrema()
+            return min_alpha < 255
+    if image.mode == "P" and "transparency" in image.info:
+        return True
+    return False
+
+
 def _compress_image(data: bytes) -> tuple[bytes, str]:
+    try:
         with Image.open(BytesIO(data)) as image:
             image.load()
             fmt = (image.format or "").upper()
 
-        buffer = BytesIO()
-        if fmt in ("JPEG", "JPG"):
-            image.save(buffer, format="JPEG", quality="keep")
-            return buffer.getvalue(), "jpg"
-        if fmt == "WEBP":
-            image.save(buffer, format="WEBP", quality=85)
-            return buffer.getvalue(), "webp"
-        if fmt == "PNG":
-            image.save(buffer, format="PNG", optimize=True)
-            return buffer.getvalue(), "png"
-        if fmt == "GIF":
-            image.save(buffer, format="GIF", optimize=True)
-            return buffer.getvalue(), "gif"
+            if fmt == "GIF" and getattr(image, "is_animated", False):
+                return data, "gif"
 
+            was_resized = False
+            orig_w, orig_h = image.size
+            if orig_w > _MAX_IMAGE_WIDTH or orig_h > _MAX_IMAGE_HEIGHT:
+                image.thumbnail(
+                    (_MAX_IMAGE_WIDTH, _MAX_IMAGE_HEIGHT),
+                    Image.Resampling.LANCZOS,
+                )
+                was_resized = True
+
+            buffer = BytesIO()
+            has_alpha = _has_transparency(image)
+
+            if has_alpha:
                 image.save(buffer, format="PNG", optimize=True)
-        return buffer.getvalue(), "png"
+                compressed = buffer.getvalue()
+                if was_resized or len(compressed) < len(data):
+                    return compressed, "png"
+                return data, "png"
+
+            if image.mode != "RGB":
+                image = image.convert("RGB")
+            image.save(
+                buffer,
+                format="JPEG",
+                quality=_JPEG_QUALITY,
+                optimize=True,
+            )
+            compressed = buffer.getvalue()
+
+            if fmt in ("JPEG", "JPG"):
+                if was_resized or len(compressed) < len(data):
+                    return compressed, "jpg"
+                return data, "jpg"
+
+            return compressed, "jpg"
+    except Exception:
+        return data, "jpg"
 
 
 def _embed_images(
@@ -139,16 +194,22 @@ def create_epub(
     output_dir: str = "output",
     progress_callback=None,
     cancel_event=None,
+    is_fixed: bool = False,
 ) -> str:
     series = metadata.get("metadata", {})
     title = series.get("title") or "Untitled"
+    if is_fixed and not title.endswith(" [Fixed]"):
+        book_title = f"{title} [Fixed]"
+    else:
+        book_title = title
+
     author = series.get("author") or "Unknown"
     language = series.get("language") or "en"
     cover_url = series.get("cover_url")
 
     book = epub.EpubBook()
-    book.set_identifier(_slugify(title))
-    book.set_title(title)
+    book.set_identifier(_slugify(book_title))
+    book.set_title(book_title)
     book.set_language(language)
     book.add_author(author)
 
@@ -201,13 +262,13 @@ def create_epub(
                 continue
 
             try:
-                clean_html = _get_clean_html(url)
+                chapter_html = _get_chapter_html(url, is_fixed=is_fixed)
             except RuntimeError as e:
                 tqdm.write(f"[SKIP] {chapter_name}: {e}")
                 chapter_counter += 1
                 continue
 
-            clean_html = _embed_images(book, clean_html, image_cache, referer=url)
+            chapter_html = _embed_images(book, chapter_html, image_cache, referer=url)
 
             file_name = f"chapter_{chapter_counter}.xhtml"
             epub_chapter = epub.EpubHtml(
@@ -216,7 +277,7 @@ def create_epub(
                 lang=language,
             )
             epub_chapter.add_item(nav_css)
-            epub_chapter.content = f"<h1>{chapter_name}</h1>\n{clean_html}"
+            epub_chapter.content = f"<h1>{chapter_name}</h1>\n{chapter_html}"
 
             book.add_item(epub_chapter)
             sections.append(epub_chapter)
@@ -244,7 +305,9 @@ def create_epub(
     book.spine = spine_structure
 
     os.makedirs(output_dir, exist_ok=True)
-    output_path = os.path.join(output_dir, f"{_slugify(title)}.epub")
+    slug = _slugify(title)
+    filename = f"{slug}-fixed.epub" if is_fixed else f"{slug}.epub"
+    output_path = os.path.join(output_dir, filename)
 
     epub.write_epub(output_path, book, {})
     print(f"Successfully generated: {output_path}")

src/metadata.py

@@ -7,12 +7,17 @@ from .llm import generate_json
 
 
 def extract_metadata_json(
-    html_content: str, url: str, force_refresh: bool = False
+    html_content: str, url: str, refresh_mode: str = "none"
 ) -> dict:
-    if not force_refresh:
+    if isinstance(refresh_mode, bool):
+        refresh_mode = "all" if refresh_mode else "none"
+
+    if refresh_mode == "none":
         row = db_fetch_one("SELECT json_text FROM main_page WHERE url = ?", (url,))
         if row is not None and row[0] is not None:
-            return json.loads(row[0])
+            data = json.loads(row[0])
+            data["novel_url"] = url
+            return data
 
     raw_output = generate_json(INDEX_EXTRACTION_SYSTEM_PROMPT, html_content)
 
@@ -22,17 +27,19 @@ def extract_metadata_json(
             ON CONFLICT(url) DO UPDATE SET json_text = excluded.json_text
         """, (url, raw_output))
 
-    return json.loads(raw_output)
+    data = json.loads(raw_output)
+    data["novel_url"] = url
+    return data
 
 
 def write_json(
-    page_url: str, output_json_path: str, force_refresh: bool = False
+    page_url: str, output_json_path: str, refresh_mode: str = "none"
 ) -> None:
-    html_content = clean_novel_html(cache_hit(page_url, force_refresh=force_refresh))
+    html_content = clean_novel_html(cache_hit(page_url, refresh_mode=refresh_mode), base_url=page_url)
     print("Extracting metadata via LLM...")
 
     extracted_data = extract_metadata_json(
-        html_content, page_url, force_refresh=force_refresh
+        html_content, page_url, refresh_mode=refresh_mode
     )
     with open(output_json_path, "w", encoding="utf-8") as f:
         json.dump(extracted_data, f, indent=2, ensure_ascii=False)

src/parse.py

@@ -120,8 +120,11 @@ def _fetch_wp_manga_chapters(base_url: str, html: str) -> str:
     return ""
 
 
-def cache_hit(url: str, force_refresh: bool = False) -> str:
-    if not force_refresh:
+def cache_hit(url: str, refresh_mode: str = "none") -> str:
+    if isinstance(refresh_mode, bool):
+        refresh_mode = "all" if refresh_mode else "none"
+
+    if refresh_mode != "all":
         row = db_fetch_one("SELECT html_text FROM main_page WHERE url = ?", (url,))
         if row is not None and row[0] is not None:
             return str(row[0])

src/prompt.py

@@ -53,7 +53,7 @@ TAG & FORMATTING RULES:
 
 TRANSLATOR & CONTEXT NOTES:
 1. KEEP informative translator notes that explain cultural context, puns, lore, or honorifics. Format them cleanly as:
-   <aside class="tl-note"><strong>Note:</strong> [Context explanation here]</aside>
+   <blockquote class="tl-note"><p><strong>TL Note:</strong> [Context explanation here]</p></blockquote>
 2. REMOVE translator banter, jokes, meme bloopers, editor rants, or off-topic conversational commentary.
 
 STRICT REMOVAL RULES:
@@ -64,5 +64,84 @@ STRICT REMOVAL RULES:
 STRICT FIDELITY RULES:
 1. DO NOT summarize, paraphrase, rewrite, or correct the author's prose or character dialogue.
 2. DO NOT delete legitimate story paragraphs.
-3. Output ONLY the sanitized HTML body content (<p>, <hr />, <img>, <aside>). Do not include <html>, <head>, <body> wrappers, or markdown code fences (```html).
+3. Output ONLY the sanitized HTML body content (<p>, <hr />, <img>, <blockquote>). Do not include <html>, <head>, <body> wrappers, or markdown code fences (```html).
+"""
+
+
+LORE_EXTRACTION_SYSTEM_PROMPT = """
+You are an expert light novel entity extraction and lore analysis engine.
+
+YOUR TASK:
+Analyze the provided novel description and initial chapters to extract key characters, proper terminology, and narrative rules into a standardized JSON glossary.
+
+EXTRACTION SCHEMA:
+{
+  "characters": [
+    {
+      "raw_name": "Original Japanese or Romanized Name",
+      "mtl_variants": ["Variant1", "Variant2"],
+      "standard_name": "Standardized English Name",
+      "gender": "male | female | unknown",
+      "role": "Protagonist | Ally | Antagonist | Supporting",
+      "speech_style": "Brief description of dialogue tone"
+    }
+  ],
+  "terms": {
+    "Original Term or MTL Term": "Standardized English Term"
+  },
+  "rules": {
+    "keep_honorifics": false,
+    "pov": "First-person | Third-person limited | Third-person omniscient"
+  }
+}
+
+RULES:
+1. Identify true recurring character names vs generic nouns.
+2. Standardize spelling variants (e.g., "Arus", "Arce", "Ars" -> "Ars").
+3. Identify faction names, skill/magic names, and location names.
+4. Output ONLY valid raw JSON.
+"""
+
+
+APE_SYSTEM_PROMPT = """
+You are an expert Japanese-to-English literary translator and copyeditor specializing in light novels and web novels. Your goal is to transform raw Machine Translation (MTL) into fluent, natural, and immersive English narrative prose while maintaining 100% factual accuracy to the source material.
+
+CORE OPERATIONAL RULES:
+1. STRICT CONTEXT ALIGNMENT (Zero Hallucination):
+   - Do NOT invent, add, or alter plot points, actions, dialogue beats, or world-building elements.
+   - Do NOT insert extra prose, backstory, or commentary that was not present or implied in the raw MTL text.
+   - If a sentence is completely incomprehensible, reconstruct the most logical meaning using surrounding paragraph context and the provided Glossary/Lore sheet.
+
+2. FIDELITY-PRESERVING STYLISTIC POLISHING:
+   - Eliminate common MTL artifacts: awkward literal idioms, stiff sentence structures, repetitive word choices, and robotic cadence.
+   - Fix dropped or inverted pronouns (Japanese subject-dropping often causes MTL to confuse "he/she/they/it"). Cross-reference active characters in the scene to ensure correct pronoun usage.
+   - Smooth out dialogue to sound natural when spoken aloud, matching character voice and tone as defined in the Glossary.
+   - Preserve narrative perspective (1st-person POV vs. 3rd-person limited) consistently throughout the scene.
+
+3. GLOSSARY & ENTITY ENFORCEMENT:
+   - Always strictly honor the provided Active Glossary & Character Sheet.
+   - Do not translate proper names, places, or technique names literally if an official/standardized English equivalent is specified in the Glossary.
+
+4. TRANSLATOR NOTES:
+   - Format any informative translator/editor notes strictly as:
+     <blockquote class="tl-note"><p><strong>TL Note:</strong> [Context explanation]</p></blockquote>
+   - Strip out off-topic translator jokes, memes, or donation links.
+
+5. OUTPUT SPECIFICATION:
+   - Output ONLY the polished chapter prose wrapped in standard <p>...</p> tags, with <hr /> for scene breaks and intact <img> tags.
+   - Do NOT duplicate the chapter title at the beginning.
+   - Do NOT include markdown code block wrappers (```html) or introductory conversational text.
+"""
+
+
+CHAPTER_SUMMARY_SYSTEM_PROMPT = """
+You are an expert story summarization engine.
+
+YOUR TASK:
+Read the provided chapter prose and generate an extremely concise 2-sentence summary of the main plot points, current location, active characters, and ending state.
+
+CONSTRAINTS:
+- Maximum 150 words / 200 tokens.
+- Factual and direct. Focus on character actions and scene transitions.
+- Output ONLY the summary text, with no introductory text or labels.
 """

tests/test_frontend.py

@@ -0,0 +1,126 @@
+import pytest
+from fastapi.testclient import TestClient
+from web.app import app
+
+client = TestClient(app)
+
+def test_index_page_returns_200():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    assert "<!DOCTYPE html>" in html
+    assert "/static/app.css" in html
+    assert "Silksoup: Novel to EPUB" in html
+
+def test_dark_mode_only():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    assert '<html lang="en" class="dark">' in html
+    assert "themeBtn" not in html
+    assert "toggleTheme" not in html
+
+def test_no_external_cdn_dependencies():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    assert "cdn.tailwindcss.com" not in html
+    assert "googleapis" not in html
+    assert "cloudflare" not in html
+
+def test_no_em_dash_in_template():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    # Rule R-02 ban
+    assert "—" not in html
+
+def test_static_app_css_available_and_contains_azure_tokens():
+    response = client.get("/static/app.css")
+    assert response.status_code == 200
+    css = response.text
+    assert "--bg: #141517" in css
+    assert "--surface: #1C1E21" in css
+    assert "--primary: #0284C7" in css
+    assert "--primary-accent: #38BDF8" in css
+    assert ":focus-visible" in css
+    assert "ui-monospace" in css
+
+def test_required_dom_contract_elements_exist():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    required_ids = [
+        "jobForm",
+        "urlInput",
+        "startBtn",
+        "btnSpinner",
+        "btnText",
+        "fixCheck",
+        "activeJob",
+        "cancelJobBtn",
+        "statusPulse",
+        "jobStatusBadge",
+        "jobStage",
+        "jobMessage",
+        "jobCounter",
+        "jobProgress",
+        "jobLog",
+        "autoScrollCheck",
+        "expandLogBtn",
+        "jobResult",
+        "downloadLink",
+        "searchEpub",
+        "epubCount",
+        "epubList",
+        "epubEmpty",
+        "toastContainer",
+        "notifyBtn",
+    ]
+    for element_id in required_ids:
+        assert f'id="{element_id}"' in html, f"Missing required element id: {element_id}"
+
+def test_aria_accessibility_attributes_present():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    assert 'role="progressbar"' in html
+    assert 'aria-valuenow' in html
+    assert 'aria-live="polite"' in html
+    assert 'role="radiogroup"' in html
+
+def test_form_submits_on_submit_event():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    assert "submitJob()" in html
+    assert "addEventListener('submit'" in html
+    assert 'type="submit"' in html
+
+def test_guide_details_present():
+    response = client.get("/")
+    assert response.status_code == 200
+    html = response.text
+    assert "<details" in html
+    assert "Workflow Pipeline Guide" in html
+    assert "1. Ingest & Cache" in html
+    assert "4. Build EPUB" in html
+
+def test_api_epubs_endpoint_unmodified():
+    response = client.get("/api/epubs")
+    assert response.status_code == 200
+    data = response.json()
+    assert "epubs" in data
+    assert "output_dir" in data
+
+def test_api_jobs_validation_unmodified():
+    response = client.post("/api/jobs", json={"url": "not-a-valid-url"})
+    assert response.status_code == 400
+
+def test_api_cancel_missing_job_returns_404():
+    response = client.post("/api/jobs/nonexistent-id/cancel")
+    assert response.status_code == 404
+
+def test_api_download_missing_epub_returns_404():
+    response = client.get("/api/epubs/nonexistent-book.epub")
+    assert response.status_code == 404

tests/test_singleton_pipeline.py

@@ -0,0 +1,130 @@
+import asyncio
+import pytest
+from fastapi.testclient import TestClient
+from web.app import app
+import web.job_manager as jm
+
+client = TestClient(app)
+
+
+@pytest.fixture(autouse=True)
+def reset_job_manager():
+    jm.cancel_all_jobs()
+    jm.jobs.clear()
+    jm.subscribers.clear()
+    jm.cancel_events.clear()
+    jm.active_job_id = None
+    yield
+    jm.cancel_all_jobs()
+    jm.jobs.clear()
+    jm.subscribers.clear()
+    jm.cancel_events.clear()
+    jm.active_job_id = None
+
+
+def test_active_job_endpoint_returns_idle_when_empty():
+    res = client.get("/api/jobs/active")
+    assert res.status_code == 200
+    data = res.json()
+    assert data["active"] is False
+    assert data["job"] is None
+
+
+def test_active_job_endpoint_returns_running_job():
+    job_id = jm.create_job("https://example.com/novel-1")
+    jm.jobs[job_id]["status"] = "running"
+    jm.jobs[job_id]["stage"] = "scraping"
+    jm.jobs[job_id]["current"] = 5
+    jm.jobs[job_id]["total"] = 20
+    jm.jobs[job_id]["message"] = "Scraping chapter 5"
+
+    res = client.get("/api/jobs/active")
+    assert res.status_code == 200
+    data = res.json()
+    assert data["active"] is True
+    assert data["job"]["id"] == job_id
+    assert data["job"]["stage"] == "scraping"
+    assert data["job"]["current"] == 5
+    assert data["job"]["total"] == 20
+    assert data["job"]["percentage"] == 25
+    assert data["job"]["message"] == "Scraping chapter 5"
+
+
+def test_concurrent_job_submission_returns_409():
+    job_id = jm.create_job("https://example.com/active-novel")
+    jm.jobs[job_id]["status"] = "running"
+
+    res = client.post("/api/jobs", json={"url": "https://example.com/another-novel"})
+    assert res.status_code == 409
+    assert "Another novel conversion is currently in progress" in res.json()["detail"]
+
+
+def test_fix_job_submission_returns_409_when_busy(tmp_path, monkeypatch):
+    test_epub = tmp_path / "test.epub"
+    test_epub.write_text("dummy epub")
+    monkeypatch.setattr("web.app.OUTPUT_DIR", tmp_path)
+    monkeypatch.setattr("web.app._find_novel_url_for_epub", lambda f: "https://example.com/test-novel")
+
+    job_id = jm.create_job("https://example.com/active-novel")
+    jm.jobs[job_id]["status"] = "running"
+
+    res = client.post("/api/epubs/test.epub/fix")
+    assert res.status_code == 409
+    assert "Another novel conversion is currently in progress" in res.json()["detail"]
+
+
+def test_cancellation_frees_worker_lock():
+    job_id = jm.create_job("https://example.com/active-novel")
+    jm.jobs[job_id]["status"] = "running"
+
+    assert jm.is_worker_busy() is True
+
+    cancel_res = client.post(f"/api/jobs/{job_id}/cancel")
+    assert cancel_res.status_code == 200
+    assert cancel_res.json()["status"] == "cancelled"
+
+    assert jm.is_worker_busy() is False
+
+    active_res = client.get("/api/jobs/active")
+    assert active_res.status_code == 200
+    assert active_res.json()["active"] is False
+
+    # A subsequent job can now be submitted
+    new_job_id = jm.create_job("https://example.com/subsequent-novel")
+    assert new_job_id is not None
+    assert jm.active_job_id == new_job_id
+
+
+def test_sse_pubsub_fanout_multiple_subscribers():
+    job_id = jm.create_job("https://example.com/sse-test")
+
+    q1 = jm.subscribe_job_events(job_id)
+    q2 = jm.subscribe_job_events(job_id)
+
+    assert len(jm.subscribers[job_id]) == 2
+
+    test_event = {"stage": "scraping", "current": 1, "total": 10, "message": "Chapter 1"}
+    jm._push(job_id, test_event)
+
+    assert not q1.empty()
+    assert not q2.empty()
+    assert q1.get_nowait() == test_event
+    assert q2.get_nowait() == test_event
+
+    jm.unsubscribe_job_events(job_id, q1)
+    assert len(jm.subscribers[job_id]) == 1
+
+    jm.unsubscribe_job_events(job_id, q2)
+    assert job_id not in jm.subscribers
+
+
+def test_frontend_has_sync_active_job_and_reconnection():
+    res = client.get("/")
+    assert res.status_code == 200
+    html = res.text
+
+    assert "syncActiveJob()" in html
+    assert "/api/jobs/active" in html
+    assert "setFormLocked(true)" in html
+    assert "setFormLocked(false)" in html
+    assert "409" in html

web/app.py

@@ -1,6 +1,7 @@
 import asyncio
 import json
 import os
+import re
 from contextlib import asynccontextmanager
 from pathlib import Path
 
@@ -9,13 +10,18 @@ from fastapi.responses import HTMLResponse, FileResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
+from src.database import db_fetch_one, db_fetch_all, init_db
+from src.epub_creator import _slugify
 from .job_manager import (
     jobs,
-    job_queues,
     create_job,
     cancel_job,
     cancel_all_jobs,
     run_job,
+    get_active_job,
+    subscribe_job_events,
+    unsubscribe_job_events,
+    WorkerBusyError,
 )
 
 OUTPUT_DIR = Path(os.environ.get("OUTPUT_DIR", "output")).resolve()
@@ -24,6 +30,7 @@ OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
 
 @asynccontextmanager
 async def lifespan(app: FastAPI):
+    init_db()
     yield
     cancel_all_jobs()
 
@@ -42,17 +49,115 @@ async def index(request: Request):
     return templates.TemplateResponse(request, "index.html")
 
 
+def _find_novel_url_for_epub(filename: str) -> str | None:
+    base_slug = _slugify(re.sub(r"(-fixed)?\.epub$", "", filename, flags=re.I))
+    rows = db_fetch_all("SELECT url, json_text FROM main_page WHERE json_text IS NOT NULL")
+    for row in rows:
+        url, json_str = row[0], row[1]
+        try:
+            data = json.loads(json_str)
+            title = data.get("metadata", {}).get("title") or ""
+            if _slugify(title) == base_slug:
+                return url
+        except Exception:
+            continue
+    return None
+
+
+@app.get("/api/jobs/active")
+async def get_active_job_endpoint():
+    active = get_active_job()
+    if active is None:
+        return {"active": False, "job": None}
+    return {"active": True, "job": active}
+
+
 @app.post("/api/jobs")
 async def start_job(payload: dict):
     url = (payload.get("url") or "").strip()
     if not url or not (url.startswith("http://") or url.startswith("https://")):
         raise HTTPException(status_code=400, detail="Valid URL required")
+
+    active = get_active_job()
+    if active is not None:
+        raise HTTPException(
+            status_code=409,
+            detail=f"Another novel conversion is currently in progress: {active.get('url')}",
+        )
+
+    # Check if a fixed version of this novel already exists in the library
+    row = db_fetch_one("SELECT json_text FROM main_page WHERE url = ?", (url,))
+    if row is not None and row[0]:
+        try:
+            data = json.loads(row[0])
+            title = data.get("metadata", {}).get("title") or ""
+            slug = _slugify(title)
+            fixed_file = OUTPUT_DIR / f"{slug}-fixed.epub"
+            if fixed_file.exists():
+                raise HTTPException(
+                    status_code=409,
+                    detail="Novel already exists in library (Fixed version present).",
+                )
+        except HTTPException:
+            raise
+        except Exception:
+            pass
+
+    refresh_mode = payload.get("refresh_mode")
+    if refresh_mode is None:
         force_refresh = bool(payload.get("force_refresh", False))
-    job_id = create_job(url, force_refresh=force_refresh, output_dir=str(OUTPUT_DIR))
+        refresh_mode = "all" if force_refresh else "none"
+    elif refresh_mode not in ("none", "llm", "all", "fix"):
+        refresh_mode = "none"
+
+    fix = bool(payload.get("fix", False)) or (refresh_mode == "fix")
+
+    try:
+        job_id = create_job(url, refresh_mode=refresh_mode, fix=fix, output_dir=str(OUTPUT_DIR))
+    except WorkerBusyError as e:
+        raise HTTPException(
+            status_code=409,
+            detail=f"Another novel conversion is currently in progress: {e.active_job.get('url')}",
+        )
     asyncio.create_task(run_job(job_id))
     return {"job_id": job_id, "status": "queued"}
 
 
+@app.post("/api/epubs/{filename}/fix")
+async def fix_library_epub(filename: str):
+    safe = Path(filename).name
+    target = OUTPUT_DIR / safe
+    if not target.exists() or not target.is_file():
+        raise HTTPException(status_code=404, detail="EPUB file not found")
+
+    if "-fixed.epub" in safe.lower():
+        raise HTTPException(status_code=400, detail="This EPUB is already a fixed version.")
+
+    active = get_active_job()
+    if active is not None:
+        raise HTTPException(
+            status_code=409,
+            detail=f"Another novel conversion is currently in progress: {active.get('url')}",
+        )
+
+    novel_url = _find_novel_url_for_epub(safe)
+    if not novel_url:
+        raise HTTPException(
+            status_code=404,
+            detail="Source novel URL not found in cache. Re-scrape the novel to fix.",
+        )
+
+    try:
+        job_id = create_job(novel_url, refresh_mode="none", fix=True, output_dir=str(OUTPUT_DIR))
+    except WorkerBusyError as e:
+        raise HTTPException(
+            status_code=409,
+            detail=f"Another novel conversion is currently in progress: {e.active_job.get('url')}",
+        )
+    asyncio.create_task(run_job(job_id))
+    return {"job_id": job_id, "status": "queued", "novel_url": novel_url}
+
+
 @app.post("/api/jobs/{job_id}/cancel")
 async def stop_job(job_id: str):
     job = jobs.get(job_id)
@@ -71,6 +176,7 @@ async def list_jobs():
         items.append({
             "id": job["id"],
             "url": job["url"],
+            "refresh_mode": job.get("refresh_mode", "none"),
             "status": job["status"],
             "stage": job["stage"],
             "current": job["current"],
@@ -91,6 +197,7 @@ async def get_job(job_id: str):
     return {
         "id": job["id"],
         "url": job["url"],
+        "refresh_mode": job.get("refresh_mode", "none"),
         "status": job["status"],
         "stage": job["stage"],
         "current": job["current"],
@@ -109,19 +216,19 @@ async def job_events(job_id: str):
         raise HTTPException(status_code=404, detail="Job not found")
 
     async def event_gen():
-        q = job_queues.get(job_id)
-        if q is None:
-            return
-        last_idx = 0
-        events = job.get("events", [])
-        for evt in events[last_idx:]:
+        q = subscribe_job_events(job_id)
+        try:
+            events = list(job.get("events", []))
+            for evt in events:
                 yield f"data: {json.dumps(evt)}\n\n"
-            last_idx += 1
                 if evt.get("message") == "__DONE__":
                     return
+
+            if job.get("status") in ("completed", "failed", "cancelled"):
+                yield f"data: {json.dumps({'stage': 'done', 'message': '__DONE__'})}\n\n"
+                return
+
             while True:
-            if job["status"] in ("completed", "failed", "cancelled") and q.empty():
-                break
                 try:
                     evt = await asyncio.wait_for(q.get(), timeout=15.0)
                     yield f"data: {json.dumps(evt)}\n\n"
@@ -129,8 +236,10 @@ async def job_events(job_id: str):
                         break
                 except asyncio.TimeoutError:
                     yield ": keepalive\n\n"
-                if job["status"] in ("completed", "failed", "cancelled"):
+                    if job.get("status") in ("completed", "failed", "cancelled"):
                         break
+        finally:
+            unsubscribe_job_events(job_id, q)
 
     return StreamingResponse(event_gen(), media_type="text/event-stream", headers={
         "Cache-Control": "no-cache",
@@ -145,8 +254,13 @@ async def list_epubs():
     if OUTPUT_DIR.exists():
         for p in sorted(OUTPUT_DIR.glob("*.epub"), key=lambda x: x.stat().st_mtime, reverse=True):
             stat = p.stat()
+            name = p.name
+            is_fixed = "-fixed.epub" in name.lower() or " [fixed]" in name.lower()
+            base_key = re.sub(r"(-fixed)?\.epub$", "", name, flags=re.I).strip("-_")
             files.append({
-                "name": p.name,
+                "name": name,
+                "base_key": base_key,
+                "is_fixed": is_fixed,
                 "size": stat.st_size,
                 "size_human": _human_size(stat.st_size),
                 "mtime": stat.st_mtime,

web/job_manager.py

@@ -8,12 +8,65 @@ from src.database import init_db
 from src.parse import cache_hit
 from src.clean_html import clean_novel_html
 from src.metadata import extract_metadata_json
-from src.chapter import clean_chapters
+from src.chapter import clean_chapters, fix_chapters, scrape_chapters
 from src.epub_creator import create_epub
 
 jobs: dict[str, dict] = {}
-job_queues: dict[str, asyncio.Queue] = {}
+subscribers: dict[str, set[asyncio.Queue]] = {}
 cancel_events: dict[str, threading.Event] = {}
+active_job_id: str | None = None
+
+
+class WorkerBusyError(Exception):
+    def __init__(self, active_job: dict):
+        self.active_job = active_job
+        super().__init__("Worker is currently busy with another job")
+
+
+def get_active_job() -> dict | None:
+    if active_job_id is None:
+        return None
+    job = jobs.get(active_job_id)
+    if not job or job.get("status") not in ("queued", "running"):
+        return None
+    total = job.get("total") or 0
+    current = job.get("current") or 0
+    percentage = round(current / total * 100) if total else 0
+    return {
+        "id": job["id"],
+        "url": job["url"],
+        "refresh_mode": job.get("refresh_mode", "none"),
+        "fix": job.get("fix", False),
+        "status": job["status"],
+        "stage": job["stage"],
+        "current": current,
+        "total": total,
+        "percentage": percentage,
+        "message": job.get("message", ""),
+        "created_at": job.get("created_at"),
+        "result_path": job.get("result_path"),
+        "error": job.get("error"),
+        "logs": job.get("logs", [])[-200:],
+    }
+
+
+def is_worker_busy() -> bool:
+    return get_active_job() is not None
+
+
+def subscribe_job_events(job_id: str) -> asyncio.Queue:
+    q = asyncio.Queue(maxsize=1000)
+    if job_id not in subscribers:
+        subscribers[job_id] = set()
+    subscribers[job_id].add(q)
+    return q
+
+
+def unsubscribe_job_events(job_id: str, q: asyncio.Queue):
+    if job_id in subscribers:
+        subscribers[job_id].discard(q)
+        if not subscribers[job_id]:
+            subscribers.pop(job_id, None)
 
 
 def _push(job_id: str, event: dict):
@@ -30,20 +83,28 @@ def _push(job_id: str, event: dict):
         job["total"] = event["total"]
     if "message" in event:
         job["message"] = event["message"]
-    q = job_queues.get(job_id)
-    if q is not None:
+
+    queues = subscribers.get(job_id, set())
+    for q in list(queues):
         try:
             q.put_nowait(event)
         except asyncio.QueueFull:
             pass
 
 
-def create_job(url: str, force_refresh: bool = False, output_dir: str = "output") -> str:
+def create_job(url: str, refresh_mode: str = "none", fix: bool = False, output_dir: str = "output") -> str:
+    global active_job_id
+    active = get_active_job()
+    if active is not None:
+        raise WorkerBusyError(active)
+
     job_id = uuid.uuid4().hex[:12]
+    active_job_id = job_id
     jobs[job_id] = {
         "id": job_id,
         "url": url,
-        "force_refresh": force_refresh,
+        "refresh_mode": refresh_mode,
+        "fix": bool(fix),
         "output_dir": output_dir,
         "status": "queued",
         "stage": "queued",
@@ -57,12 +118,13 @@ def create_job(url: str, force_refresh: bool = False, output_dir: str = "output"
         "created_at": time.time(),
         "updated_at": time.time(),
     }
-    job_queues[job_id] = asyncio.Queue(maxsize=1000)
+    subscribers[job_id] = set()
     cancel_events[job_id] = threading.Event()
     return job_id
 
 
 def cancel_job(job_id: str) -> bool:
+    global active_job_id
     job = jobs.get(job_id)
     if not job:
         return False
@@ -75,24 +137,30 @@ def cancel_job(job_id: str) -> bool:
     job["logs"].append("[CANCEL] Process stopped by user. Cached chapters remain safe.")
     _push(job_id, {"stage": "cancelled", "current": job.get("current", 0), "total": job.get("total", 0), "message": "Process stopped by user"})
     _push(job_id, {"stage": "done", "current": job.get("current", 0), "total": job.get("total", 0), "message": "__DONE__"})
+    if active_job_id == job_id:
+        active_job_id = None
     return True
 
 
 def cancel_all_jobs():
+    global active_job_id
     for job_id, evt in cancel_events.items():
         job = jobs.get(job_id)
         if job and job.get("status") in ("running", "queued"):
             evt.set()
             job["status"] = "cancelled"
             job["stage"] = "cancelled"
+    active_job_id = None
 
 
 async def run_job(job_id: str):
+    global active_job_id
     job = jobs.get(job_id)
     if job is None:
         return
     url = job["url"]
-    force_refresh = job["force_refresh"]
+    refresh_mode = job.get("refresh_mode", "none")
+    is_fix_job = bool(job.get("fix") or refresh_mode == "fix")
     output_dir = job["output_dir"]
     cancel_evt = cancel_events.get(job_id)
     job["status"] = "running"
@@ -111,16 +179,16 @@ async def run_job(job_id: str):
         _push(job_id, {"stage": "fetching", "current": 0, "total": 1, "message": "Fetching index page..."})
         job["logs"].append(f"Fetching {url}")
 
-        html = await asyncio.to_thread(cache_hit, url, force_refresh)
+        html = await asyncio.to_thread(cache_hit, url, "none" if is_fix_job else refresh_mode)
         if cancel_evt and cancel_evt.is_set():
             raise InterruptedError("Cancelled after fetch")
 
-        cleaned = clean_novel_html(html)
+        cleaned = clean_novel_html(html, base_url=url)
 
         _push(job_id, {"stage": "metadata", "current": 0, "total": 1, "message": "Extracting metadata via LLM..."})
         job["logs"].append("Extracting metadata")
 
-        metadata = await asyncio.to_thread(extract_metadata_json, cleaned, url, force_refresh)
+        metadata = await asyncio.to_thread(extract_metadata_json, cleaned, url, "none" if is_fix_job else refresh_mode)
         metadata["novel_url"] = url
 
         if cancel_evt and cancel_evt.is_set():
@@ -128,16 +196,34 @@ async def run_job(job_id: str):
 
         volumes = metadata.get("volumes", [])
         total_chapters = sum(len(v.get("chapters", [])) for v in volumes)
+
+        if is_fix_job:
+            _push(job_id, {"stage": "scraping", "current": 0, "total": total_chapters, "message": f"Ensuring {total_chapters} chapters are cached"})
+            await asyncio.to_thread(scrape_chapters, metadata, refresh_mode if refresh_mode != "fix" else "none", _cb, cancel_evt)
+
+            if cancel_evt and cancel_evt.is_set():
+                raise InterruptedError("Cancelled before APE fix")
+
+            _push(job_id, {"stage": "fixing", "current": 0, "total": total_chapters, "message": f"Fixing MTL for {total_chapters} chapters"})
+            job["logs"].append(f"Starting APE MTL repair on {total_chapters} chapters")
+            await asyncio.to_thread(fix_chapters, metadata, "none", _cb, cancel_evt)
+
+            if cancel_evt and cancel_evt.is_set():
+                raise InterruptedError("Cancelled before EPUB building")
+
+            _push(job_id, {"stage": "epub", "current": 0, "total": total_chapters, "message": "Building Fixed EPUB..."})
+            output_path = await asyncio.to_thread(create_epub, metadata, output_dir, _cb, cancel_evt, is_fixed=True)
+        else:
             _push(job_id, {"stage": "cleaning", "current": 0, "total": total_chapters, "message": f"Cleaning {total_chapters} chapters"})
             job["logs"].append(f"Found {len(volumes)} volumes, {total_chapters} chapters")
 
-        await asyncio.to_thread(clean_chapters, metadata, force_refresh, _cb, cancel_evt)
+            await asyncio.to_thread(clean_chapters, metadata, refresh_mode, _cb, cancel_evt)
 
             if cancel_evt and cancel_evt.is_set():
                 raise InterruptedError("Cancelled before EPUB building")
 
             _push(job_id, {"stage": "epub", "current": 0, "total": total_chapters, "message": "Building EPUB..."})
-        output_path = await asyncio.to_thread(create_epub, metadata, output_dir, _cb, cancel_evt)
+            output_path = await asyncio.to_thread(create_epub, metadata, output_dir, _cb, cancel_evt, is_fixed=False)
 
         job["result_path"] = output_path
         job["status"] = "completed"
@@ -161,3 +247,6 @@ async def run_job(job_id: str):
         job["logs"].append(f"[ERROR] {e}")
         _push(job_id, {"stage": "failed", "current": job.get("current", 0), "total": job.get("total", 0), "message": str(e)})
         _push(job_id, {"stage": "done", "current": 0, "total": 0, "message": "__DONE__"})
+    finally:
+        if active_job_id == job_id:
+            active_job_id = None

web/static/app.css

@@ -0,0 +1,975 @@
+:root {
+  --bg: #141517;
+  --surface: #1C1E21;
+  --surface-subtle: #25282D;
+  --border: #2B2E33;
+  --border-strong: #3E434A;
+  --text: #EAEBED;
+  --text-muted: #909399;
+  --primary: #0284C7;
+  --primary-hover: #0369A1;
+  --primary-fg: #FFFFFF;
+  --primary-subtle: rgba(2, 132, 199, 0.15);
+  --primary-accent: #38BDF8;
+  --btn-blue: #075985;
+  --btn-blue-hover: #0C4A6E;
+  --btn-blue-border: #0369A1;
+  --success: #34D399;
+  --success-bg: rgba(52, 211, 153, 0.1);
+  --success-border: #065F46;
+  --warning: #FBBF24;
+  --warning-bg: rgba(251, 191, 36, 0.1);
+  --warning-border: #78350F;
+  --danger: #FB7185;
+  --danger-bg: rgba(251, 113, 133, 0.1);
+  --danger-border: #881337;
+  --danger-hover: #F43F5E;
+  --log-bg: #0F1012;
+  --log-border: #2B2E33;
+  --log-text: #EAEBED;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-pill: 9999px;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --transition-fast: 150ms ease;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background-color: var(--primary);
+  color: var(--primary-fg);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:focus-visible {
+  outline: 2px solid var(--primary-accent);
+  outline-offset: 2px;
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background-color: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.header-inner {
+  max-width: 56rem;
+  margin: 0 auto;
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.brand-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.brand-icon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-sm);
+  object-fit: contain;
+}
+
+.brand-title-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
+
+.brand-subtitle {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+.header-badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-pill);
+  background-color: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+}
+
+.header-badge.hidden {
+  display: none;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-header {
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background-color: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.375rem 0.625rem;
+  min-height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all var(--transition-fast);
+}
+
+.btn-header:hover {
+  color: var(--text);
+  background-color: var(--surface-subtle);
+  border-color: var(--border-strong);
+}
+
+.btn-header.active {
+  color: var(--success);
+  border-color: var(--success);
+}
+
+.app-main {
+  max-width: 56rem;
+  margin: 0 auto;
+  width: 100%;
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  flex: 1;
+}
+
+.card {
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.75rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text);
+  margin-bottom: 0.375rem;
+}
+
+.input-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.input-text {
+  flex: 1;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  background-color: var(--surface-subtle);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.625rem 0.875rem;
+  min-height: 2.75rem;
+  transition: border-color var(--transition-fast);
+}
+
+.input-text::placeholder {
+  color: var(--text-muted);
+  opacity: 0.8;
+}
+
+.input-text:hover {
+  border-color: var(--border-strong);
+}
+
+.input-text:focus {
+  border-color: var(--primary);
+  outline: none;
+}
+
+.btn-paste {
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background-color: var(--surface-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.625rem 0.875rem;
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn-paste:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.cache-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 0.625rem;
+}
+
+@media (min-width: 640px) {
+  .cache-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.cache-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  background-color: var(--surface-subtle);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--transition-fast);
+}
+
+.cache-card:hover {
+  border-color: var(--border-strong);
+}
+
+.cache-card:has(input:checked) {
+  border-color: var(--primary-accent);
+  background-color: var(--primary-subtle);
+}
+
+.cache-card input[type="radio"] {
+  margin-top: 0.1875rem;
+  accent-color: var(--primary);
+}
+
+.cache-card-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.cache-card-desc {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.125rem;
+}
+
+.toggle-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  background-color: var(--surface-subtle);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--transition-fast);
+}
+
+.toggle-card:hover {
+  border-color: var(--border-strong);
+}
+
+.toggle-card:has(input:checked) {
+  border-color: var(--primary-accent);
+  background-color: var(--primary-subtle);
+}
+
+.toggle-card input[type="checkbox"] {
+  margin-top: 0.1875rem;
+  accent-color: var(--primary);
+}
+
+.badge-ape {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background-color: var(--primary-subtle);
+  color: var(--primary-accent);
+  border: 1px solid var(--primary);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+}
+
+.btn-primary {
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--primary-fg);
+  background-color: var(--btn-blue);
+  border: 1px solid var(--btn-blue-border);
+  border-radius: var(--radius-md);
+  padding: 0.625rem 1.25rem;
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  box-shadow: var(--shadow-sm);
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .btn-primary {
+    width: auto;
+  }
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--btn-blue-hover);
+  border-color: var(--btn-blue);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.monitor-section.hidden {
+  display: none;
+}
+
+.monitor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.monitor-title-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background-color: var(--success);
+  flex-shrink: 0;
+}
+
+.status-dot.dot-emerald { background-color: var(--success); }
+.status-dot.dot-amber { background-color: var(--warning); }
+.status-dot.dot-rose { background-color: var(--danger); }
+
+.monitor-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-stop {
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--danger);
+  background-color: var(--danger-bg);
+  border: 1px solid var(--danger-border);
+  border-radius: var(--radius-md);
+  padding: 0.25rem 0.625rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn-stop:hover:not(:disabled) {
+  background-color: var(--danger);
+  color: #FFFFFF;
+}
+
+.btn-stop.hidden {
+  display: none;
+}
+
+.badge-status {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background-color: var(--surface-subtle);
+  color: var(--text);
+}
+
+.stage-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.stage-pill {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-subtle);
+  border: 1px solid var(--border);
+  color: var(--text);
+  flex-shrink: 0;
+}
+
+.stage-message {
+  color: var(--text);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stage-counter {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.progress-track {
+  height: 0.5rem;
+  border-radius: var(--radius-pill);
+  background-color: var(--surface-subtle);
+  border: 1px solid var(--border);
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: var(--primary);
+  width: 0%;
+  transition: width 200ms ease;
+}
+
+.log-meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  margin-bottom: 0.375rem;
+}
+
+.log-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.log-action-btn {
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.log-action-btn:hover {
+  color: var(--text);
+}
+
+.log-box {
+  height: 10rem;
+  overflow: auto;
+  border-radius: var(--radius-md);
+  background-color: var(--log-bg);
+  border: 1px solid var(--log-border);
+  padding: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--log-text);
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.log-box.expanded {
+  height: 24rem;
+}
+
+.result-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.result-bar.hidden {
+  display: none;
+}
+
+.btn-secondary {
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background-color: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.625rem 1rem;
+  min-height: 2.75rem;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn-secondary:hover {
+  color: var(--text);
+  background-color: var(--surface-subtle);
+  border-color: var(--border-strong);
+}
+
+.library-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 640px) {
+  .library-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+}
+
+.library-title-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.library-counter {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+.library-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.search-wrap {
+  position: relative;
+  flex: 1;
+  display: flex;
+}
+
+.search-wrap .input-text {
+  width: 100%;
+}
+
+.book-shelf {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.book-card {
+  border: 1px solid var(--border);
+  background-color: var(--surface-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: border-color var(--transition-fast);
+}
+
+.book-card:hover {
+  border-color: var(--border-strong);
+}
+
+.book-edition-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.book-edition-row + .book-edition-row {
+  border-top: 1px solid var(--border);
+}
+
+.book-edition-row.fixed-edition {
+  background-color: var(--primary-subtle);
+}
+
+.book-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.book-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.fixed-edition .book-icon {
+  color: var(--primary-accent);
+}
+
+.book-meta-block {
+  min-width: 0;
+  flex: 1;
+}
+
+.book-title-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.book-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+}
+
+.badge-fixed {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 0.0625rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background-color: var(--primary);
+  color: var(--primary-fg);
+}
+
+.book-specs {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.125rem;
+}
+
+.book-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.btn-book-action {
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0.375rem 0.625rem;
+  min-height: 2rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+}
+
+.btn-book-download {
+  color: var(--primary-fg);
+  background-color: var(--btn-blue);
+  border: 1px solid var(--btn-blue-border);
+}
+
+.btn-book-download:hover {
+  background-color: var(--btn-blue-hover);
+}
+
+.btn-book-fix {
+  color: var(--text-muted);
+  background-color: transparent;
+  border: 1px solid var(--border);
+}
+
+.btn-book-fix:hover {
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
+}
+
+.btn-book-delete {
+  color: var(--text-muted);
+  background-color: transparent;
+  border: 1px solid var(--border);
+}
+
+.btn-book-delete:hover {
+  color: var(--danger);
+  border-color: var(--danger-border);
+}
+
+.delete-confirm-box {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background-color: var(--danger-bg);
+  border: 1px solid var(--danger-border);
+  border-radius: var(--radius-sm);
+  padding: 0.125rem;
+}
+
+.btn-confirm-delete {
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background-color: var(--danger);
+  color: #FFFFFF;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-confirm-delete:hover {
+  background-color: var(--danger-hover);
+}
+
+.btn-cancel-delete {
+  font-family: inherit;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.375rem;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.btn-cancel-delete:hover {
+  color: var(--text);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.empty-state.hidden {
+  display: none;
+}
+
+.guide-details {
+  border: 1px solid var(--border);
+  background-color: var(--surface);
+  border-radius: var(--radius-lg);
+  padding: 0.75rem 1rem;
+}
+
+.guide-summary {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.guide-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 0.625rem;
+  margin-top: 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .guide-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .guide-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.guide-step {
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  background-color: var(--surface-subtle);
+  border: 1px solid var(--border);
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.guide-step-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.25rem;
+}
+
+.app-footer {
+  border-top: 1px solid var(--border);
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  margin-top: auto;
+}
+
+.toast-container {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background-color: var(--surface);
+  color: var(--text);
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  transition: opacity 150ms ease, transform 150ms ease;
+  opacity: 0;
+  transform: translateY(4px);
+}
+
+.toast.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.toast.toast-success {
+  border-color: var(--success);
+  background-color: var(--surface);
+  color: var(--success);
+}
+
+.toast.toast-error {
+  border-color: var(--danger);
+  background-color: var(--surface);
+  color: var(--danger);
+}
+
+.toast.toast-info {
+  border-color: var(--border-strong);
+}
+
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: spin 1s linear infinite;
+}
+
+.spinner.hidden {
+  display: none;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

web/templates/index.html

@@ -3,167 +3,214 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Silksoup — Novel to EPUB</title>
-<script src="https://cdn.tailwindcss.com"></script>
-<script>
-tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Inter','system-ui','sans-serif'] } } } }
-</script>
-<style>
-::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#27272a;border-radius:999px}::-webkit-scrollbar-track{background:transparent}
-@keyframes pulseGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
-.animate-glow { animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-</style>
+<title>Silksoup: Novel to EPUB</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<link rel="icon" type="image/png" href="/static/icon.png">
+<link rel="apple-touch-icon" href="/static/icon.png">
+<link rel="stylesheet" href="/static/app.css">
 </head>
-<body class="bg-[#09090b] text-zinc-100 min-h-screen flex flex-col antialiased selection:bg-zinc-800">
-<header class="border-b border-zinc-800/80 bg-zinc-950/80 backdrop-blur sticky top-0 z-30">
-  <div class="max-w-4xl mx-auto px-4 py-3.5 flex items-center justify-between">
-    <div class="flex items-center gap-3">
-      <div class="w-8 h-8 rounded-lg bg-white text-black font-black grid place-items-center text-sm shadow-sm">S</div>
+<body>
+<header class="app-header">
+  <div class="header-inner">
+    <div class="brand-wrap">
+      <img src="/static/icon.png" alt="Silksoup" class="brand-icon">
       <div>
-        <h1 class="font-semibold tracking-tight text-sm leading-none flex items-center gap-2">
-          Silksoup
-          <span id="headerBadge" class="hidden text-[10px] font-medium px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Active</span>
-        </h1>
-        <p class="text-[11px] text-zinc-400 mt-0.5">Novel to EPUB pipeline</p>
+        <div class="brand-title-line">
+          <span class="brand-title">Silksoup</span>
+          <span id="headerBadge" class="header-badge hidden">Active</span>
+        </div>
+        <p class="brand-subtitle">Novel to EPUB pipeline</p>
       </div>
     </div>
-    <div class="flex items-center gap-3">
-      <button id="notifyBtn" onclick="toggleNotifications()" title="Enable Desktop Notifications" class="text-xs text-zinc-400 hover:text-zinc-200 px-2.5 py-1.5 rounded-lg border border-zinc-800 hover:border-zinc-700 transition flex items-center gap-1.5">
-        <span id="notifyIcon">🔔</span>
-        <span id="notifyText" class="hidden sm:inline">Notify</span>
+    <div class="header-actions">
+      <button id="notifyBtn" onclick="toggleNotifications()" type="button" aria-label="Desktop notifications" class="btn-header">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
+          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
+        </svg>
+        <span id="notifyText">Notify</span>
       </button>
-      <a href="/api/epubs" target="_blank" class="text-xs text-zinc-400 hover:text-zinc-200 px-2.5 py-1.5 rounded-lg border border-zinc-800 hover:border-zinc-700 transition">API</a>
+      <a href="/api/epubs" target="_blank" rel="noopener" class="btn-header">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="16 18 22 12 16 6"/>
+          <polyline points="8 6 2 12 8 18"/>
+        </svg>
+        <span>API</span>
+      </a>
     </div>
   </div>
 </header>
 
-<main class="max-w-4xl mx-auto w-full px-4 py-6 flex flex-col gap-6 flex-1">
-  <!-- New Job Card -->
-  <section class="rounded-2xl border border-zinc-800/80 bg-zinc-900/40 p-5 shadow-sm">
-    <div class="flex items-center justify-between mb-3">
-      <h2 class="text-xs font-semibold uppercase tracking-wider text-zinc-400">Scrape New Novel</h2>
-      <button onclick="pasteClipboard()" class="text-[11px] text-zinc-400 hover:text-white flex items-center gap-1 transition">
-        <span>📋</span> Paste URL
+<main class="app-main">
+  <section class="card" aria-labelledby="headingScrape">
+    <h2 id="headingScrape" class="card-title">Scrape Novel</h2>
+    <form id="jobForm">
+      <div class="form-group">
+        <label for="urlInput" class="form-label">Novel URL</label>
+        <div class="input-row">
+          <input id="urlInput" type="url" required placeholder="https://kakuyomu.jp/works/... or novel index URL" class="input-text">
+          <button type="button" onclick="pasteClipboard()" class="btn-paste">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
+              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+            </svg>
+            <span>Paste</span>
           </button>
         </div>
-    <form id="jobForm" class="space-y-4" onsubmit="return false">
-      <div class="relative">
-        <input id="urlInput" type="url" required placeholder="https://kakuyomu.jp/works/... or novel index URL" class="w-full rounded-xl bg-zinc-950 border border-zinc-800 px-4 py-3.5 text-sm placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 transition shadow-inner">
       </div>
-      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-1">
-        <label class="flex items-center gap-2 text-xs text-zinc-400 cursor-pointer select-none">
-          <input id="refreshInput" type="checkbox" class="rounded border-zinc-700 bg-zinc-950 text-white focus:ring-0 focus:ring-offset-0">
-          Force refresh (bypass database cache)
+      <div class="form-group">
+        <span class="form-label">Cache Mode</span>
+        <div class="cache-grid" role="radiogroup" aria-label="Cache Mode">
+          <label class="cache-card">
+            <input type="radio" name="refreshMode" value="none" checked>
+            <div>
+              <div class="cache-card-title">Full Cache</div>
+              <div class="cache-card-desc">Reuse HTML and AI results</div>
+            </div>
           </label>
-        <button id="startBtn" class="sm:w-auto w-full rounded-xl bg-white text-black text-sm font-semibold px-7 py-3 hover:bg-zinc-200 active:scale-[0.99] transition shrink-0 flex items-center justify-center gap-2">
-          <span id="btnSpinner" class="hidden inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin"></span>
-          <span id="btnText">Start Scraping → EPUB</span>
+          <label class="cache-card">
+            <input type="radio" name="refreshMode" value="llm">
+            <div>
+              <div class="cache-card-title">Re-run AI</div>
+              <div class="cache-card-desc">Reuse HTML, re-sanitize chapters</div>
+            </div>
+          </label>
+          <label class="cache-card">
+            <input type="radio" name="refreshMode" value="all">
+            <div>
+              <div class="cache-card-title">Full Refresh</div>
+              <div class="cache-card-desc">Bypass cache and fetch fresh</div>
+            </div>
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="toggle-card">
+          <input id="fixCheck" type="checkbox">
+          <div>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <span class="cache-card-title">Polished Edition (Automated Post-Editing)</span>
+              <span class="badge-ape">APE</span>
+            </div>
+            <div class="cache-card-desc">Repair machine translation phrasing, pronoun confusion, and format translator notes</div>
+          </div>
+        </label>
+      </div>
+      <div class="form-actions">
+        <button id="startBtn" type="submit" class="btn-primary">
+          <svg id="btnSpinner" class="spinner hidden" viewBox="0 0 24 24" fill="none">
+            <circle opacity="0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path opacity="0.75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+          </svg>
+          <span id="btnText">Start Scraping</span>
         </button>
       </div>
     </form>
   </section>
 
-  <!-- Active / In-Progress Job Section -->
-  <section id="activeJob" class="hidden rounded-2xl border border-zinc-800 bg-zinc-900/60 p-5 shadow-sm transition-all">
-    <div class="flex items-center justify-between mb-3">
-      <div class="flex items-center gap-2">
-        <span id="statusPulse" class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-glow"></span>
-        <h2 class="text-xs font-semibold uppercase tracking-wider text-zinc-400">Task Monitor</h2>
+  <section id="activeJob" class="card monitor-section hidden" aria-labelledby="headingMonitor" role="region">
+    <div class="monitor-header">
+      <div class="monitor-title-group">
+        <span id="statusPulse" class="status-dot dot-emerald"></span>
+        <h2 id="headingMonitor" class="card-title" style="margin-bottom: 0;">Task Monitor</h2>
       </div>
-      <div class="flex items-center gap-2">
-        <button id="cancelJobBtn" onclick="requestCancelJob()" class="text-[11px] px-2.5 py-0.5 rounded-full border border-rose-900/60 bg-rose-950/40 text-rose-300 hover:bg-rose-900/60 transition">Stop Process</button>
-        <span id="jobStatusBadge" class="text-[11px] font-mono uppercase px-2.5 py-0.5 rounded-full bg-zinc-800 text-zinc-300 border border-zinc-700">idle</span>
+      <div class="monitor-actions">
+        <button id="cancelJobBtn" type="button" onclick="requestCancelJob()" class="btn-stop">Stop Process</button>
+        <span id="jobStatusBadge" class="badge-status">idle</span>
       </div>
     </div>
 
-    <div class="space-y-3.5">
-      <div class="flex items-center justify-between text-xs gap-3">
-        <div class="flex items-center gap-2 min-w-0">
-          <span id="jobStage" class="px-2 py-0.5 rounded bg-zinc-800/80 text-zinc-300 font-mono text-[10px] uppercase tracking-wider">init</span>
-          <span id="jobMessage" class="text-zinc-300 truncate font-medium">Starting...</span>
+    <div>
+      <div class="stage-row">
+        <div style="display: flex; align-items: center; gap: 0.5rem; min-width: 0;">
+          <span id="jobStage" class="stage-pill">init</span>
+          <span id="jobMessage" class="stage-message">Starting...</span>
         </div>
-        <span id="jobCounter" class="text-zinc-400 tabular-nums font-mono font-medium shrink-0">0 / 0</span>
+        <span id="jobCounter" class="stage-counter">0 / 0</span>
       </div>
 
-      <div class="h-2 rounded-full bg-zinc-950 border border-zinc-800 overflow-hidden relative">
-        <div id="jobProgress" class="h-full bg-white transition-all duration-300" style="width:0%"></div>
+      <div class="progress-track" role="progressbar" id="progressTrack" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+        <div id="jobProgress" class="progress-fill"></div>
       </div>
 
-      <!-- Log Toolbar -->
-      <div class="flex items-center justify-between text-[11px] text-zinc-500 px-0.5 pt-1">
+      <div class="log-meta-row">
         <span>Execution Log</span>
-        <div class="flex items-center gap-3">
-          <label class="flex items-center gap-1.5 cursor-pointer select-none hover:text-zinc-300">
-            <input id="autoScrollCheck" type="checkbox" checked class="rounded border-zinc-700 bg-zinc-950 text-white focus:ring-0">
-            Auto-scroll
+        <div class="log-actions">
+          <label style="display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; user-select: none;">
+            <input id="autoScrollCheck" type="checkbox" checked style="accent-color: var(--primary);">
+            <span>Auto-scroll</span>
           </label>
-          <button onclick="clearLogs()" class="hover:text-zinc-300">Clear</button>
-          <button onclick="toggleLogHeight()" id="expandLogBtn" class="hover:text-zinc-300">Expand</button>
+          <button type="button" onclick="clearLogs()" class="log-action-btn">Clear</button>
+          <button type="button" onclick="toggleLogHeight()" id="expandLogBtn" class="log-action-btn">Expand</button>
         </div>
       </div>
 
-      <div id="jobLog" class="h-44 overflow-auto rounded-xl bg-zinc-950 border border-zinc-800/90 p-3.5 font-mono text-[11px] leading-relaxed text-zinc-400 whitespace-pre-wrap transition-all"></div>
+      <div id="jobLog" class="log-box" role="log" aria-live="polite"></div>
 
-      <div id="jobResult" class="hidden pt-1 flex items-center gap-3">
-        <a id="downloadLink" href="#" class="inline-flex items-center gap-2 rounded-xl bg-white text-black text-xs font-semibold px-5 py-2.5 hover:bg-zinc-200 transition shadow-sm">
-          <span>📥</span> Download EPUB
+      <div id="jobResult" class="result-bar hidden">
+        <a id="downloadLink" href="#" class="btn-primary" style="text-decoration: none;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          <span>Download EPUB</span>
         </a>
-        <button onclick="dismissActiveJob()" class="text-xs text-zinc-400 hover:text-zinc-200 px-3 py-2 rounded-xl border border-zinc-800 hover:bg-zinc-800/50 transition">Dismiss</button>
+        <button type="button" onclick="dismissActiveJob()" class="btn-secondary">Dismiss</button>
       </div>
     </div>
   </section>
 
-  <!-- Library Section -->
-  <section class="rounded-2xl border border-zinc-800/80 bg-zinc-900/40 p-5 shadow-sm">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
-      <div class="flex items-center gap-2">
-        <h2 class="text-xs font-semibold uppercase tracking-wider text-zinc-400">Library</h2>
-        <span id="epubCount" class="text-[11px] text-zinc-500 font-mono"></span>
+  <section class="card" aria-labelledby="headingLibrary">
+    <div class="library-header">
+      <div class="library-title-group">
+        <h2 id="headingLibrary" class="card-title" style="margin-bottom: 0;">Library</h2>
+        <span id="epubCount" class="library-counter"></span>
       </div>
-      <div class="flex items-center gap-2">
-        <div class="relative flex-1 sm:w-60">
-          <input id="searchEpub" type="text" oninput="filterEpubs()" placeholder="Filter books..." class="w-full rounded-xl bg-zinc-950 border border-zinc-800 px-3 py-1.5 text-xs placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600">
+      <div class="library-controls">
+        <div class="search-wrap">
+          <input id="searchEpub" type="text" oninput="filterEpubs()" placeholder="Filter books..." class="input-text" style="min-height: 2.25rem; font-size: 0.875rem;">
         </div>
-        <button onclick="loadEpubs()" class="text-xs px-3 py-1.5 rounded-xl border border-zinc-800 hover:bg-zinc-800 hover:text-white text-zinc-400 transition shrink-0">Refresh</button>
+        <button type="button" onclick="loadEpubs()" class="btn-header" style="min-height: 2.25rem;">Refresh</button>
       </div>
     </div>
 
-    <div id="epubList" class="space-y-2.5"></div>
-    <div id="epubEmpty" class="text-xs text-zinc-500 py-8 text-center hidden">
-      <div class="text-2xl mb-1">📚</div>
+    <div id="epubList" class="book-shelf"></div>
+    <div id="epubEmpty" class="empty-state hidden">
       No EPUBs found. Scrape a novel to populate your library.
     </div>
   </section>
 
-  <!-- How it works Footer -->
-  <section class="rounded-2xl border border-zinc-800/60 bg-zinc-900/20 p-4">
-    <h3 class="text-xs font-semibold text-zinc-400 mb-2">Workflow Pipeline</h3>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-[11px] text-zinc-500 leading-normal">
-      <div class="p-2.5 rounded-xl bg-zinc-950/40 border border-zinc-800/50">
-        <span class="font-semibold text-zinc-400 block mb-0.5">1. Ingest & Cache</span>
-        Fetches novel HTML via anti-bot curl_cffi into Postgres/SQLite.
+  <details class="guide-details">
+    <summary class="guide-summary">
+      <span>Workflow Pipeline Guide</span>
+      <span style="font-size: 0.75rem; color: var(--text-muted);">Details</span>
+    </summary>
+    <div class="guide-grid">
+      <div class="guide-step">
+        <div class="guide-step-title">1. Ingest & Cache</div>
+        Fetches novel HTML via anti-bot client into local database.
       </div>
-      <div class="p-2.5 rounded-xl bg-zinc-950/40 border border-zinc-800/50">
-        <span class="font-semibold text-zinc-400 block mb-0.5">2. Parse Index</span>
-        DeepSeek LLM extracts chronological volumes and chapter URLs.
+      <div class="guide-step">
+        <div class="guide-step-title">2. Parse Index</div>
+        LLM extracts chronological volumes and chapter URLs.
       </div>
-      <div class="p-2.5 rounded-xl bg-zinc-950/40 border border-zinc-800/50">
-        <span class="font-semibold text-zinc-400 block mb-0.5">3. Sanitize Content</span>
-        Cleans site bloat, keeps translator notes, wraps semantic HTML.
+      <div class="guide-step">
+        <div class="guide-step-title">3. Sanitize & APE</div>
+        Fixes machine translation flaws, entities, and formats notes into blockquotes.
       </div>
-      <div class="p-2.5 rounded-xl bg-zinc-950/40 border border-zinc-800/50">
-        <span class="font-semibold text-zinc-400 block mb-0.5">4. Build EPUB</span>
-        Downloads images with referers, compresses WEBP/JPG, compiles book.
+      <div class="guide-step">
+        <div class="guide-step-title">4. Build EPUB</div>
+        Downloads images, compresses assets, and compiles book.
       </div>
     </div>
-  </section>
+  </details>
 </main>
 
-<!-- In-Page Toast Container -->
-<div id="toastContainer" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none"></div>
+<div id="toastContainer" class="toast-container" role="region" aria-live="polite"></div>
 
-<footer class="border-t border-zinc-800/80 py-4 text-center text-[11px] text-zinc-600">
-  Silksoup — Self-hosted EPUB Generator • Fast, headless, and cached.
+<footer class="app-footer">
+  Silksoup: Novel to EPUB Pipeline
 </footer>
 
 <script>
@@ -172,56 +219,52 @@ let currentJobId = localStorage.getItem('silksoup_active_job') || null;
 let evtSource = null;
 let allEpubs = [];
 let originalTitle = document.title;
-let notificationsAllowed = Notification.permission === 'granted';
 
-updateNotifyButton();
-
-function updateNotifyButton(){
+function updateNotifyButton() {
   if (Notification.permission === 'granted') {
-    $('#notifyBtn').classList.add('text-emerald-400', 'border-emerald-500/30');
+    $('#notifyBtn').classList.add('active');
     $('#notifyText').textContent = 'Notifications on';
   }
 }
 
-async function toggleNotifications(){
+async function toggleNotifications() {
   if (Notification.permission === 'default') {
     const res = await Notification.requestPermission();
     if (res === 'granted') {
-      showToast('Notifications enabled!', 'success');
+      showToast('Notifications enabled', 'success');
       updateNotifyButton();
     }
   } else if (Notification.permission === 'denied') {
-    showToast('Notifications are blocked in your browser settings.', 'error');
+    showToast('Notifications blocked in browser settings', 'error');
   } else {
-    showToast('Notifications are already enabled.', 'info');
+    showToast('Notifications already enabled', 'info');
   }
 }
 
-function notify(title, body){
+function notify(title, body) {
   if (Notification.permission === 'granted' && document.hidden) {
-    new Notification(title, { body, icon: '/static/favicon.ico' });
+    new Notification(title, { body, icon: '/static/icon.png' });
   }
 }
 
-function showToast(message, type = 'info'){
+function showToast(message, type = 'info') {
   const container = $('#toastContainer');
   const toast = document.createElement('div');
-  const bg = type === 'error' ? 'bg-rose-950/90 border-rose-800 text-rose-200' :
-             type === 'success' ? 'bg-emerald-950/90 border-emerald-800 text-emerald-200' :
-             'bg-zinc-900/90 border-zinc-800 text-zinc-200';
-  toast.className = `pointer-events-auto rounded-xl border px-4 py-3 text-xs shadow-lg backdrop-blur flex items-center gap-2 transition-all transform translate-y-2 opacity-0 duration-200 ${bg}`;
-  toast.innerHTML = `<span>${type === 'error' ? '⚠️' : type === 'success' ? '✓' : 'ℹ️'}</span><span class="flex-1">${message}</span>`;
+  const typeClass = type === 'error' ? 'toast-error' :
+                    type === 'success' ? 'toast-success' : 'toast-info';
+  toast.className = `toast ${typeClass}`;
+  toast.textContent = message;
   container.appendChild(toast);
   requestAnimationFrame(() => {
-    toast.classList.remove('translate-y-2', 'opacity-0');
+    toast.classList.add('show');
   });
   setTimeout(() => {
-    toast.classList.add('opacity-0', 'translate-y-2');
-    setTimeout(() => toast.remove(), 250);
+    toast.classList.remove('show');
+    setTimeout(() => toast.remove(), 150);
   }, 4000);
 }
 
-async function pasteClipboard(){
+async function pasteClipboard() {
   try {
     const text = await navigator.clipboard.readText();
     if (text) {
@@ -233,7 +276,7 @@ async function pasteClipboard(){
   }
 }
 
-function setBtnLoading(loading){
+function setBtnLoading(loading) {
   const btn = $('#startBtn');
   const spinner = $('#btnSpinner');
   const text = $('#btnText');
@@ -244,11 +287,19 @@ function setBtnLoading(loading){
   } else {
     btn.disabled = false;
     spinner.classList.add('hidden');
-    text.textContent = 'Start Scraping → EPUB';
+    text.textContent = 'Start Scraping';
   }
 }
 
-$('#startBtn').addEventListener('click', async () => {
+function setFormLocked(locked) {
+  $('#urlInput').disabled = locked;
+  document.querySelectorAll('input[name="refreshMode"]').forEach(r => r.disabled = locked);
+  const fixCheck = $('#fixCheck');
+  if (fixCheck) fixCheck.disabled = locked;
+  $('#startBtn').disabled = locked;
+}
+
+async function submitJob() {
   const url = $('#urlInput').value.trim();
   if (!url) {
     showToast('Please enter a novel URL', 'error');
@@ -256,11 +307,20 @@ $('#startBtn').addEventListener('click', async () => {
   }
   setBtnLoading(true);
   try {
+    const selectedMode = document.querySelector('input[name="refreshMode"]:checked');
+    const refresh_mode = selectedMode ? selectedMode.value : 'none';
+    const fix = $('#fixCheck') ? $('#fixCheck').checked : false;
     const res = await fetch('/api/jobs', {
       method: 'POST',
-      headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({ url, force_refresh: $('#refreshInput').checked })
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ url, refresh_mode, fix })
     });
+    if (res.status === 409) {
+      const j = await res.json();
+      showToast(j.detail || 'Another novel conversion is currently in progress', 'error');
+      await syncActiveJob();
+      return;
+    }
     if (!res.ok) {
       const j = await res.json();
       throw new Error(j.detail || 'Failed to submit job');
@@ -276,23 +336,64 @@ $('#startBtn').addEventListener('click', async () => {
   } finally {
     setBtnLoading(false);
   }
+}
+
+$('#jobForm').addEventListener('submit', (e) => {
+  e.preventDefault();
+  submitJob();
 });
 
-function showActive(){
+function showActive(jobData = null) {
+  setFormLocked(true);
   $('#activeJob').classList.remove('hidden');
   $('#headerBadge').classList.remove('hidden');
   $('#cancelJobBtn').classList.remove('hidden');
+  if (!jobData) {
     $('#jobLog').textContent = '';
     $('#jobProgress').style.width = '0%';
+    $('#progressTrack').setAttribute('aria-valuenow', '0');
     $('#jobCounter').textContent = '0 / 0';
     $('#jobStage').textContent = 'queued';
     $('#jobStatusBadge').textContent = 'running';
     $('#jobResult').classList.add('hidden');
-  $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-emerald-400 animate-glow';
+    $('#statusPulse').className = 'status-dot dot-emerald';
+  } else {
+    $('#jobStage').textContent = jobData.stage || 'running';
+    $('#jobMessage').textContent = jobData.message || '';
+    $('#jobCounter').textContent = `${jobData.current || 0} / ${jobData.total || 0}`;
+    const pct = jobData.percentage != null ? jobData.percentage :
+      (jobData.total ? Math.round((jobData.current / jobData.total) * 100) : 0);
+    $('#jobProgress').style.width = pct + '%';
+    $('#progressTrack').setAttribute('aria-valuenow', String(pct));
+    $('#jobStatusBadge').textContent = jobData.status || 'running';
+    $('#statusPulse').className = 'status-dot dot-emerald';
+    if (jobData.logs && jobData.logs.length) {
+      $('#jobLog').textContent = jobData.logs.join('\n') + '\n';
+      $('#jobLog').scrollTop = $('#jobLog').scrollHeight;
+    }
+    if (jobData.status === 'completed') {
+      setFormLocked(false);
+      $('#cancelJobBtn').classList.add('hidden');
+      if (jobData.result_path) {
+        const name = jobData.result_path.split(/[\\/]/).pop();
+        $('#downloadLink').href = `/api/epubs/${encodeURIComponent(name)}`;
+        $('#downloadLink').querySelector('span').textContent = `Download ${name}`;
+        $('#jobResult').classList.remove('hidden');
+      }
+    } else if (jobData.status === 'cancelled' || jobData.status === 'failed') {
+      setFormLocked(false);
+      $('#cancelJobBtn').classList.add('hidden');
+      if (jobData.status === 'cancelled') {
+        $('#statusPulse').className = 'status-dot dot-amber';
+      } else {
+        $('#statusPulse').className = 'status-dot dot-rose';
+      }
+    }
+  }
   $('#activeJob').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
 
-async function requestCancelJob(){
+async function requestCancelJob() {
   if (!currentJobId) return;
   const btn = $('#cancelJobBtn');
   btn.disabled = true;
@@ -300,7 +401,8 @@ async function requestCancelJob(){
   try {
     const res = await fetch(`/api/jobs/${currentJobId}/cancel`, { method: 'POST' });
     if (res.ok) {
-      showToast('Process cancellation requested. Cached chapters remain safe.', 'info');
+      showToast('Process cancellation requested', 'info');
+      setFormLocked(false);
     }
   } catch(e) {
     showToast('Failed to cancel job', 'error');
@@ -310,16 +412,17 @@ async function requestCancelJob(){
   }
 }
 
-function dismissActiveJob(){
+function dismissActiveJob() {
   localStorage.removeItem('silksoup_active_job');
   currentJobId = null;
   if (evtSource) evtSource.close();
   $('#activeJob').classList.add('hidden');
   $('#headerBadge').classList.add('hidden');
+  setFormLocked(false);
   document.title = originalTitle;
 }
 
-function connectSSE(jobId){
+function connectSSE(jobId) {
   if (evtSource) evtSource.close();
   evtSource = new EventSource(`/api/jobs/${jobId}/events`);
 
@@ -330,6 +433,7 @@ function connectSSE(jobId){
       evtSource.close();
       refreshJob();
       loadEpubs();
+      setFormLocked(false);
       return;
     }
     const pct = evt.total ? Math.round(evt.current / evt.total * 100) : 0;
@@ -337,32 +441,39 @@ function connectSSE(jobId){
     $('#jobMessage').textContent = evt.message || '';
     $('#jobCounter').textContent = `${evt.current} / ${evt.total}`;
     $('#jobProgress').style.width = pct + '%';
+    $('#progressTrack').setAttribute('aria-valuenow', String(pct));
 
-    if (evt.stage === 'scraping' || evt.stage === 'cleaning' || evt.stage === 'epub') {
+    if (evt.stage === 'scraping' || evt.stage === 'cleaning' || evt.stage === 'fixing' || evt.stage === 'epub') {
       document.title = `(${pct}%) Silksoup`;
     }
 
     if (evt.stage === 'failed') {
       $('#jobStatusBadge').textContent = 'failed';
-      $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-rose-500';
+      $('#statusPulse').className = 'status-dot dot-rose';
       $('#cancelJobBtn').classList.add('hidden');
-      document.title = `❌ Failed — Silksoup`;
+      setFormLocked(false);
+      loadEpubs();
+      document.title = 'Failed: Silksoup';
       showToast(`Job failed: ${evt.message}`, 'error');
     }
     if (evt.stage === 'cancelled') {
       $('#jobStatusBadge').textContent = 'cancelled';
-      $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-amber-500';
+      $('#statusPulse').className = 'status-dot dot-amber';
       $('#cancelJobBtn').classList.add('hidden');
-      document.title = `Silksoup`;
-      showToast('Scraping stopped. Completed chapters are cached in database.', 'info');
+      setFormLocked(false);
+      loadEpubs();
+      document.title = 'Silksoup';
+      showToast('Process stopped. Cached chapters remain safe.', 'info');
     }
     if (evt.stage === 'completed') {
       $('#jobStatusBadge').textContent = 'completed';
-      $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-emerald-400';
+      $('#statusPulse').className = 'status-dot dot-emerald';
       $('#cancelJobBtn').classList.add('hidden');
-      document.title = `✓ Completed — Silksoup`;
-      notify('Silksoup EPUB Ready!', evt.message || 'Your book has been compiled successfully.');
-      showToast('EPUB compiled successfully!', 'success');
+      setFormLocked(false);
+      loadEpubs();
+      document.title = 'Completed: Silksoup';
+      notify('Silksoup EPUB Ready', evt.message || 'Book compiled successfully.');
+      showToast('EPUB compiled successfully', 'success');
     }
 
     if (evt.message && evt.message !== '__DONE__') {
@@ -374,60 +485,56 @@ function connectSSE(jobId){
     }
   };
 
-  evtSource.onerror = () => {
-    // Retry handled by browser EventSource
-  };
+  evtSource.onerror = () => {};
 }
 
-async function refreshJob(){
+async function refreshJob() {
   if (!currentJobId) return;
   const res = await fetch(`/api/jobs/${currentJobId}`);
   if (!res.ok) return;
   const j = await res.json();
   $('#jobStatusBadge').textContent = j.status;
   if (j.status === 'completed') {
-    $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-emerald-400';
+    $('#statusPulse').className = 'status-dot dot-emerald';
     $('#cancelJobBtn').classList.add('hidden');
     if (j.result_path) {
       const name = j.result_path.split(/[\\/]/).pop();
       $('#downloadLink').href = `/api/epubs/${encodeURIComponent(name)}`;
-      $('#downloadLink').innerHTML = `<span>📥</span> Download ${name}`;
+      $('#downloadLink').querySelector('span').textContent = `Download ${name}`;
       $('#jobResult').classList.remove('hidden');
     }
   }
   if (j.status === 'cancelled') {
-    $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-amber-500';
+    $('#statusPulse').className = 'status-dot dot-amber';
     $('#cancelJobBtn').classList.add('hidden');
   }
   if (j.status === 'failed') {
-    $('#statusPulse').className = 'w-2.5 h-2.5 rounded-full bg-rose-500';
+    $('#statusPulse').className = 'status-dot dot-rose';
     $('#cancelJobBtn').classList.add('hidden');
     $('#jobLog').textContent += `\n[ERROR] ${j.error || j.message}\n`;
   }
 }
 
-function clearLogs(){
+function clearLogs() {
   $('#jobLog').textContent = '';
 }
 
 let isLogExpanded = false;
-function toggleLogHeight(){
+function toggleLogHeight() {
   const log = $('#jobLog');
   const btn = $('#expandLogBtn');
   if (isLogExpanded) {
-    log.classList.remove('h-96');
-    log.classList.add('h-44');
+    log.classList.remove('expanded');
     btn.textContent = 'Expand';
     isLogExpanded = false;
   } else {
-    log.classList.remove('h-44');
-    log.classList.add('h-96');
+    log.classList.add('expanded');
     btn.textContent = 'Collapse';
     isLogExpanded = true;
   }
 }
 
-async function loadEpubs(){
+async function loadEpubs() {
   try {
     const res = await fetch('/api/epubs');
     const data = await res.json();
@@ -439,62 +546,157 @@ async function loadEpubs(){
   }
 }
 
-function filterEpubs(){
+function filterEpubs() {
   const query = $('#searchEpub').value.toLowerCase().trim();
   if (!query) {
     renderEpubs(allEpubs);
     return;
   }
   const filtered = allEpubs.filter(f => f.name.toLowerCase().includes(query));
-  renderEpubs(filtered);
+  renderEpubs(filtered, true);
 }
 
-function renderEpubs(list){
+async function triggerFix(encodedName) {
+  const name = decodeURIComponent(encodedName);
+  try {
+    const res = await fetch(`/api/epubs/${encodeURIComponent(name)}/fix`, { method: 'POST' });
+    if (res.status === 409) {
+      const j = await res.json();
+      showToast(j.detail || 'Another novel conversion is currently in progress', 'error');
+      await syncActiveJob();
+      return;
+    }
+    if (!res.ok) {
+      const j = await res.json();
+      throw new Error(j.detail || 'Failed to start fix job');
+    }
+    const data = await res.json();
+    currentJobId = data.job_id;
+    localStorage.setItem('silksoup_active_job', currentJobId);
+    showActive();
+    connectSSE(currentJobId);
+    showToast('Fix process started for ' + name, 'success');
+  } catch(e) {
+    showToast(e.message, 'error');
+  }
+}
+
+function renderEpubs(list, isFiltered = false) {
   const container = $('#epubList');
   container.innerHTML = '';
   if (!list.length) {
+    $('#epubEmpty').textContent = isFiltered ?
+      'No books match your search filter.' :
+      'No EPUBs found. Scrape a novel to populate your library.';
     $('#epubEmpty').classList.remove('hidden');
     return;
   }
   $('#epubEmpty').classList.add('hidden');
 
+  const groups = {};
   for (const f of list) {
-    const row = document.createElement('div');
-    row.className = 'group flex items-center gap-3.5 rounded-xl border border-zinc-800/80 bg-zinc-950/80 px-4 py-3 hover:border-zinc-700 transition';
+    const key = f.base_key || f.name.replace(/(-fixed)?\.epub$/i, '').trim().toLowerCase();
+    if (!groups[key]) groups[key] = { regular: null, fixed: null };
+    if (f.is_fixed) {
+      groups[key].fixed = f;
+    } else {
+      groups[key].regular = f;
+    }
+  }
 
-    // Clean filename for nice display
+  for (const key of Object.keys(groups)) {
+    const g = groups[key];
+    const groupCard = document.createElement('div');
+    groupCard.className = 'book-card';
+
+    if (g.regular) {
+      const f = g.regular;
       const cleanTitle = f.name.replace(/\.epub$/i, '').replace(/[-_]/g, ' ');
+      const row = document.createElement('div');
+      row.className = 'book-edition-row';
 
       row.innerHTML = `
-      <div class="w-8 h-8 rounded-lg bg-zinc-900 border border-zinc-800 flex items-center justify-center text-xs shrink-0 text-zinc-400 group-hover:text-white transition">📖</div>
-      <div class="flex-1 min-w-0">
-        <div class="truncate text-zinc-200 text-xs font-medium capitalize" title="${cleanTitle}">${cleanTitle}</div>
-        <div class="text-[11px] text-zinc-400 font-mono mt-0.5">${f.size_human} • ${new Date(f.mtime*1000).toLocaleDateString()} ${new Date(f.mtime*1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
+        <div class="book-info">
+          <svg class="book-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/>
+            <path d="M6 6h10"/>
+            <path d="M6 10h10"/>
+          </svg>
+          <div class="book-meta-block">
+            <div class="book-title-line">
+              <span class="book-title" title="${cleanTitle}">${cleanTitle}</span>
             </div>
-      <div class="flex items-center gap-2 shrink-0">
-        <a href="/api/epubs/${encodeURIComponent(f.name)}" download class="text-xs px-3.5 py-1.5 rounded-xl bg-white text-black font-semibold hover:bg-zinc-200 transition">Download</a>
-        <div class="relative inline-block" id="delWrap_${CSS.escape(f.name)}">
-          <button onclick="confirmDelete('${encodeURIComponent(f.name)}')" class="text-xs px-2.5 py-1.5 rounded-xl border border-zinc-800 hover:border-rose-900/60 hover:text-rose-400 text-zinc-400 transition">Delete</button>
+            <div class="book-specs">${f.size_human} • ${new Date(f.mtime * 1000).toLocaleDateString()} ${new Date(f.mtime * 1000).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}</div>
+          </div>
+        </div>
+        <div class="book-actions">
+          <a href="/api/epubs/${encodeURIComponent(f.name)}" download class="btn-book-action btn-book-download">Download</a>
+          <button type="button" onclick="triggerFix('${encodeURIComponent(f.name)}')" class="btn-book-action btn-book-fix">Fix</button>
+          <div class="delete-wrap" id="delWrap_${CSS.escape(f.name)}">
+            <button type="button" onclick="confirmDelete('${encodeURIComponent(f.name)}')" class="btn-book-action btn-book-delete">Delete</button>
           </div>
         </div>
       `;
-    container.appendChild(row);
+      groupCard.appendChild(row);
+    }
+
+    if (g.fixed) {
+      const f = g.fixed;
+      const cleanTitle = f.name.replace(/\.epub$/i, '').replace(/[-_]/g, ' ');
+      const row = document.createElement('div');
+      row.className = 'book-edition-row fixed-edition';
+
+      row.innerHTML = `
+        <div class="book-info">
+          <svg class="book-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/>
+            <path d="M6 6h10"/>
+            <path d="M6 10h10"/>
+          </svg>
+          <div class="book-meta-block">
+            <div class="book-title-line">
+              <span class="book-title" title="${cleanTitle}">${cleanTitle}</span>
+              <span class="badge-fixed">Polished Edition</span>
+            </div>
+            <div class="book-specs">${f.size_human} • ${new Date(f.mtime * 1000).toLocaleDateString()} ${new Date(f.mtime * 1000).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}</div>
+          </div>
+        </div>
+        <div class="book-actions">
+          <a href="/api/epubs/${encodeURIComponent(f.name)}" download class="btn-book-action btn-book-download">Download</a>
+          <div class="delete-wrap" id="delWrap_${CSS.escape(f.name)}">
+            <button type="button" onclick="confirmDelete('${encodeURIComponent(f.name)}')" class="btn-book-action btn-book-delete">Delete</button>
+          </div>
+        </div>
+      `;
+      groupCard.appendChild(row);
+    }
+
+    container.appendChild(groupCard);
   }
 }
 
-function confirmDelete(encodedName){
+function confirmDelete(encodedName) {
   const name = decodeURIComponent(encodedName);
   const wrap = document.getElementById(`delWrap_${CSS.escape(name)}`);
   if (!wrap) return;
   wrap.innerHTML = `
-    <div class="flex items-center gap-1.5 bg-rose-950/60 border border-rose-800/80 rounded-xl p-0.5">
-      <button onclick="executeDelete('${encodeURIComponent(name)}')" class="text-[11px] px-2 py-1 bg-rose-600 text-white rounded-lg font-medium hover:bg-rose-500">Confirm</button>
-      <button onclick="loadEpubs()" class="text-[11px] px-2 py-1 text-zinc-400 hover:text-white">Cancel</button>
+    <div class="delete-confirm-box">
+      <button type="button" onclick="executeDelete('${encodeURIComponent(name)}')" class="btn-confirm-delete">Confirm</button>
+      <button type="button" onclick="loadEpubs()" class="btn-cancel-delete">Cancel</button>
     </div>
   `;
 }
 
-async function executeDelete(encodedName){
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    const confirmBoxes = document.querySelectorAll('.delete-confirm-box');
+    if (confirmBoxes.length > 0) {
+      loadEpubs();
+    }
+  }
+});
+
+async function executeDelete(encodedName) {
   try {
     const res = await fetch(`/api/epubs/${encodedName}`, { method: 'DELETE' });
     if (!res.ok) throw new Error('Delete failed');
@@ -505,36 +707,49 @@ async function executeDelete(encodedName){
   }
 }
 
-// Auto-restore active job on load if any
-async function checkStoredJob(){
-  if (!currentJobId) return;
+async function syncActiveJob() {
+  try {
+    const res = await fetch('/api/jobs/active');
+    if (res.ok) {
+      const data = await res.json();
+      if (data.active && data.job) {
+        currentJobId = data.job.id;
+        localStorage.setItem('silksoup_active_job', currentJobId);
+        showActive(data.job);
+        connectSSE(currentJobId);
+        return;
+      }
+    }
+  } catch(e) {}
+
+  if (currentJobId) {
     try {
       const res = await fetch(`/api/jobs/${currentJobId}`);
       if (res.ok) {
         const j = await res.json();
-      showActive();
-      $('#jobStage').textContent = j.stage;
-      $('#jobMessage').textContent = j.message || '';
-      $('#jobCounter').textContent = `${j.current} / ${j.total}`;
-      const pct = j.total ? Math.round(j.current / j.total * 100) : 0;
-      $('#jobProgress').style.width = pct + '%';
-      if (j.logs) {
-        $('#jobLog').textContent = j.logs.join('\n') + '\n';
-      }
         if (j.status === 'running' || j.status === 'queued') {
+          showActive(j);
           connectSSE(currentJobId);
         } else {
+          showActive(j);
           refreshJob();
+          setFormLocked(false);
         }
       } else {
         localStorage.removeItem('silksoup_active_job');
+        setFormLocked(false);
       }
     } catch(e) {
       localStorage.removeItem('silksoup_active_job');
+      setFormLocked(false);
+    }
+  } else {
+    setFormLocked(false);
   }
 }
 
-checkStoredJob();
+updateNotifyButton();
+syncActiveJob();
 loadEpubs();
 </script>
 </body>