feat: minor ui changes

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):
@@ -25,7 +26,7 @@ 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 != "all":
+    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}")
@@ -65,6 +66,36 @@ def cache_clean_hit(url: str, refresh_mode: str = "none") -> 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,
     refresh_mode: str = "none",
@@ -117,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/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;
+    margin: 1.5em 1em;
-    padding: 0.5em 1em;
+    padding: 0.6em 1.2em;
-    border-left: 3px solid #ccc;
+    border-left: 3px solid #888;
-    color: #555;
+    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(
@@ -180,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_identifier(_slugify(book_title))
-    book.set_title(title)
+    book.set_title(book_title)
     book.set_language(language)
     book.add_author(author)
 
@@ -242,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(
@@ -257,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)
@@ -285,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/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,24 +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))
         refresh_mode = "all" if force_refresh else "none"
-    elif refresh_mode not in ("none", "llm", "all"):
+    elif refresh_mode not in ("none", "llm", "all", "fix"):
         refresh_mode = "none"
 
-    job_id = create_job(url, refresh_mode=refresh_mode, output_dir=str(OUTPUT_DIR))
+    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)
@@ -118,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)
+        q = subscribe_job_events(job_id)
-        if q is None:
+        try:
-            return
+            events = list(job.get("events", []))
-        last_idx = 0
+            for evt in events:
-        events = job.get("events", [])
-        for evt in events[last_idx:]:
                 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"
@@ -138,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",
@@ -154,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, refresh_mode: str = "none", 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,
         "refresh_mode": refresh_mode,
+        "fix": bool(fix),
         "output_dir": output_dir,
         "status": "queued",
         "stage": "queued",
@@ -57,12 +118,13 @@ def create_job(url: str, refresh_mode: str = "none", 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"]
     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,7 +179,7 @@ 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, refresh_mode)
+        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")
 
@@ -120,7 +188,7 @@ async def run_job(job_id: str):
         _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, refresh_mode)
+        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,6 +196,24 @@ 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")
 
@@ -137,7 +223,7 @@ async def run_job(job_id: str):
                 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,189 +3,214 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Silksoup — Novel to EPUB</title>
+<title>Silksoup: Novel to EPUB</title>
-<script src="https://cdn.tailwindcss.com"></script>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-<script>
+<link rel="icon" type="image/png" href="/static/icon.png">
-tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Inter','system-ui','sans-serif'] } } } }
+<link rel="apple-touch-icon" href="/static/icon.png">
-</script>
+<link rel="stylesheet" href="/static/app.css">
-<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>
 </head>
-<body class="bg-[#09090b] text-zinc-100 min-h-screen flex flex-col antialiased selection:bg-zinc-800">
+<body>
-<header class="border-b border-zinc-800/80 bg-zinc-950/80 backdrop-blur sticky top-0 z-30">
+<header class="app-header">
-  <div class="max-w-4xl mx-auto px-4 py-3.5 flex items-center justify-between">
+  <div class="header-inner">
-    <div class="flex items-center gap-3">
+    <div class="brand-wrap">
-      <div class="w-8 h-8 rounded-lg bg-white text-black font-black grid place-items-center text-sm shadow-sm">S</div>
+      <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">
+        <div class="brand-title-line">
-          Silksoup
+          <span class="brand-title">Silksoup</span>
-          <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>
+          <span id="headerBadge" class="header-badge hidden">Active</span>
-        </h1>
+        </div>
-        <p class="text-[11px] text-zinc-400 mt-0.5">Novel to EPUB pipeline</p>
+        <p class="brand-subtitle">Novel to EPUB pipeline</p>
       </div>
     </div>
-    <div class="flex items-center gap-3">
+    <div class="header-actions">
-      <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">
+      <button id="notifyBtn" onclick="toggleNotifications()" type="button" aria-label="Desktop notifications" class="btn-header">
-        <span id="notifyIcon">🔔</span>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <span id="notifyText" class="hidden sm:inline">Notify</span>
+          <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">
+<main class="app-main">
-  <!-- New Job Card -->
+  <section class="card" aria-labelledby="headingScrape">
-  <section class="rounded-2xl border border-zinc-800/80 bg-zinc-900/40 p-5 shadow-sm">
+    <h2 id="headingScrape" class="card-title">Scrape Novel</h2>
-    <div class="flex items-center justify-between mb-3">
+    <form id="jobForm">
-      <h2 class="text-xs font-semibold uppercase tracking-wider text-zinc-400">Scrape New Novel</h2>
+      <div class="form-group">
-      <button onclick="pasteClipboard()" class="text-[11px] text-zinc-400 hover:text-white flex items-center gap-1 transition">
+        <label for="urlInput" class="form-label">Novel URL</label>
-        <span>📋</span> Paste URL
+        <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="space-y-2 pt-1">
+      <div class="form-group">
-        <label class="text-[11px] uppercase tracking-wider text-zinc-400 font-semibold">Cache Mode</label>
+        <span class="form-label">Cache Mode</span>
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+        <div class="cache-grid" role="radiogroup" aria-label="Cache Mode">
-          <label class="flex items-start gap-2.5 p-2.5 rounded-xl border border-zinc-800 bg-zinc-950/60 hover:border-zinc-700 cursor-pointer select-none transition group">
+          <label class="cache-card">
-            <input type="radio" name="refreshMode" value="none" checked class="mt-0.5 text-white bg-zinc-900 border-zinc-700 focus:ring-0">
+            <input type="radio" name="refreshMode" value="none" checked>
-            <div class="flex flex-col">
+            <div>
-              <span class="text-xs font-medium text-zinc-200 group-hover:text-white">Full Cache</span>
+              <div class="cache-card-title">Full Cache</div>
-              <span class="text-[10px] text-zinc-500">Reuse HTML & AI results</span>
+              <div class="cache-card-desc">Reuse HTML and AI results</div>
             </div>
           </label>
-          <label class="flex items-start gap-2.5 p-2.5 rounded-xl border border-zinc-800 bg-zinc-950/60 hover:border-zinc-700 cursor-pointer select-none transition group">
+          <label class="cache-card">
-            <input type="radio" name="refreshMode" value="llm" class="mt-0.5 text-white bg-zinc-900 border-zinc-700 focus:ring-0">
+            <input type="radio" name="refreshMode" value="llm">
-            <div class="flex flex-col">
+            <div>
-              <span class="text-xs font-medium text-zinc-200 group-hover:text-white">Re-run AI</span>
+              <div class="cache-card-title">Re-run AI</div>
-              <span class="text-[10px] text-zinc-500">Reuse HTML, re-sanitize chapters</span>
+              <div class="cache-card-desc">Reuse HTML, re-sanitize chapters</div>
             </div>
           </label>
-          <label class="flex items-start gap-2.5 p-2.5 rounded-xl border border-zinc-800 bg-zinc-950/60 hover:border-zinc-700 cursor-pointer select-none transition group">
+          <label class="cache-card">
-            <input type="radio" name="refreshMode" value="all" class="mt-0.5 text-white bg-zinc-900 border-zinc-700 focus:ring-0">
+            <input type="radio" name="refreshMode" value="all">
-            <div class="flex flex-col">
+            <div>
-              <span class="text-xs font-medium text-zinc-200 group-hover:text-white">Full Refresh</span>
+              <div class="cache-card-title">Full Refresh</div>
-              <span class="text-[10px] text-zinc-500">Bypass cache & fetch fresh from web</span>
+              <div class="cache-card-desc">Bypass cache and fetch fresh</div>
             </div>
           </label>
         </div>
       </div>
-      <div class="flex justify-end pt-1">
+      <div class="form-group">
-        <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">
+        <label class="toggle-card">
-          <span id="btnSpinner" class="hidden inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin"></span>
+          <input id="fixCheck" type="checkbox">
-          <span id="btnText">Start Scraping → EPUB</span>
+          <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="card monitor-section hidden" aria-labelledby="headingMonitor" role="region">
-  <section id="activeJob" class="hidden rounded-2xl border border-zinc-800 bg-zinc-900/60 p-5 shadow-sm transition-all">
+    <div class="monitor-header">
-    <div class="flex items-center justify-between mb-3">
+      <div class="monitor-title-group">
-      <div class="flex items-center gap-2">
+        <span id="statusPulse" class="status-dot dot-emerald"></span>
-        <span id="statusPulse" class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-glow"></span>
+        <h2 id="headingMonitor" class="card-title" style="margin-bottom: 0;">Task Monitor</h2>
-        <h2 class="text-xs font-semibold uppercase tracking-wider text-zinc-400">Task Monitor</h2>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="monitor-actions">
-        <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>
+        <button id="cancelJobBtn" type="button" onclick="requestCancelJob()" class="btn-stop">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>
+        <span id="jobStatusBadge" class="badge-status">idle</span>
       </div>
     </div>
 
-    <div class="space-y-3.5">
+    <div>
-      <div class="flex items-center justify-between text-xs gap-3">
+      <div class="stage-row">
-        <div class="flex items-center gap-2 min-w-0">
+        <div style="display: flex; align-items: center; gap: 0.5rem; min-width: 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="jobStage" class="stage-pill">init</span>
-          <span id="jobMessage" class="text-zinc-300 truncate font-medium">Starting...</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 class="progress-track" role="progressbar" id="progressTrack" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-        <div id="jobProgress" class="h-full bg-white transition-all duration-300" style="width:0%"></div>
+        <div id="jobProgress" class="progress-fill"></div>
       </div>
 
-      <!-- Log Toolbar -->
+      <div class="log-meta-row">
-      <div class="flex items-center justify-between text-[11px] text-zinc-500 px-0.5 pt-1">
         <span>Execution Log</span>
-        <div class="flex items-center gap-3">
+        <div class="log-actions">
-          <label class="flex items-center gap-1.5 cursor-pointer select-none hover:text-zinc-300">
+          <label style="display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; user-select: none;">
-            <input id="autoScrollCheck" type="checkbox" checked class="rounded border-zinc-700 bg-zinc-950 text-white focus:ring-0">
+            <input id="autoScrollCheck" type="checkbox" checked style="accent-color: var(--primary);">
-            Auto-scroll
+            <span>Auto-scroll</span>
           </label>
-          <button onclick="clearLogs()" class="hover:text-zinc-300">Clear</button>
+          <button type="button" onclick="clearLogs()" class="log-action-btn">Clear</button>
-          <button onclick="toggleLogHeight()" id="expandLogBtn" class="hover:text-zinc-300">Expand</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">
+      <div id="jobResult" class="result-bar hidden">
-        <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">
+        <a id="downloadLink" href="#" class="btn-primary" style="text-decoration: none;">
-          <span>📥</span> Download EPUB
+          <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="card" aria-labelledby="headingLibrary">
-  <section class="rounded-2xl border border-zinc-800/80 bg-zinc-900/40 p-5 shadow-sm">
+    <div class="library-header">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
+      <div class="library-title-group">
-      <div class="flex items-center gap-2">
+        <h2 id="headingLibrary" class="card-title" style="margin-bottom: 0;">Library</h2>
-        <h2 class="text-xs font-semibold uppercase tracking-wider text-zinc-400">Library</h2>
+        <span id="epubCount" class="library-counter"></span>
-        <span id="epubCount" class="text-[11px] text-zinc-500 font-mono"></span>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="library-controls">
-        <div class="relative flex-1 sm:w-60">
+        <div class="search-wrap">
-          <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">
+          <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="epubList" class="book-shelf"></div>
-    <div id="epubEmpty" class="text-xs text-zinc-500 py-8 text-center hidden">
+    <div id="epubEmpty" class="empty-state hidden">
-      <div class="text-2xl mb-1">📚</div>
       No EPUBs found. Scrape a novel to populate your library.
     </div>
   </section>
 
-  <!-- How it works Footer -->
+  <details class="guide-details">
-  <section class="rounded-2xl border border-zinc-800/60 bg-zinc-900/20 p-4">
+    <summary class="guide-summary">
-    <h3 class="text-xs font-semibold text-zinc-400 mb-2">Workflow Pipeline</h3>
+      <span>Workflow Pipeline Guide</span>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-[11px] text-zinc-500 leading-normal">
+      <span style="font-size: 0.75rem; color: var(--text-muted);">Details</span>
-      <div class="p-2.5 rounded-xl bg-zinc-950/40 border border-zinc-800/50">
+    </summary>
-        <span class="font-semibold text-zinc-400 block mb-0.5">1. Ingest & Cache</span>
+    <div class="guide-grid">
-        Fetches novel HTML via anti-bot curl_cffi into Postgres/SQLite.
+      <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">
+      <div class="guide-step">
-        <span class="font-semibold text-zinc-400 block mb-0.5">2. Parse Index</span>
+        <div class="guide-step-title">2. Parse Index</div>
-        DeepSeek LLM extracts chronological volumes and chapter URLs.
+        LLM extracts chronological volumes and chapter URLs.
       </div>
-      <div class="p-2.5 rounded-xl bg-zinc-950/40 border border-zinc-800/50">
+      <div class="guide-step">
-        <span class="font-semibold text-zinc-400 block mb-0.5">3. Sanitize Content</span>
+        <div class="guide-step-title">3. Sanitize & APE</div>
-        Cleans site bloat, keeps translator notes, wraps semantic HTML.
+        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">
+      <div class="guide-step">
-        <span class="font-semibold text-zinc-400 block mb-0.5">4. Build EPUB</span>
+        <div class="guide-step-title">4. Build EPUB</div>
-        Downloads images with referers, compresses WEBP/JPG, compiles book.
+        Downloads images, compresses assets, and compiles book.
       </div>
     </div>
-  </section>
+  </details>
 </main>
 
-<!-- In-Page Toast Container -->
+<div id="toastContainer" class="toast-container" role="region" aria-live="polite"></div>
-<div id="toastContainer" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none"></div>
 
-<footer class="border-t border-zinc-800/80 py-4 text-center text-[11px] text-zinc-600">
+<footer class="app-footer">
-  Silksoup — Self-hosted EPUB Generator • Fast, headless, and cached.
+  Silksoup: Novel to EPUB Pipeline
 </footer>
 
 <script>
@@ -194,13 +219,10 @@ 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() {
   if (Notification.permission === 'granted') {
-    $('#notifyBtn').classList.add('text-emerald-400', 'border-emerald-500/30');
+    $('#notifyBtn').classList.add('active');
     $('#notifyText').textContent = 'Notifications on';
   }
 }
@@ -209,37 +231,36 @@ 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) {
   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') {
   const container = $('#toastContainer');
   const toast = document.createElement('div');
-  const bg = type === 'error' ? 'bg-rose-950/90 border-rose-800 text-rose-200' :
+  const typeClass = type === 'error' ? 'toast-error' :
-             type === 'success' ? 'bg-emerald-950/90 border-emerald-800 text-emerald-200' :
+                    type === 'success' ? 'toast-success' : 'toast-info';
-             'bg-zinc-900/90 border-zinc-800 text-zinc-200';
+  toast.className = `toast ${typeClass}`;
-  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.textContent = message;
-  toast.innerHTML = `<span>${type === 'error' ? '⚠️' : type === 'success' ? '✓' : 'ℹ️'}</span><span class="flex-1">${message}</span>`;
   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');
+    toast.classList.remove('show');
-    setTimeout(() => toast.remove(), 250);
+    setTimeout(() => toast.remove(), 150);
   }, 4000);
 }
 
@@ -266,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');
@@ -280,11 +309,18 @@ $('#startBtn').addEventListener('click', async () => {
   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, refresh_mode })
+      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');
@@ -300,19 +336,60 @@ $('#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' });
 }
 
@@ -324,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');
@@ -340,6 +418,7 @@ function dismissActiveJob(){
   if (evtSource) evtSource.close();
   $('#activeJob').classList.add('hidden');
   $('#headerBadge').classList.add('hidden');
+  setFormLocked(false);
   document.title = originalTitle;
 }
 
@@ -354,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;
@@ -361,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`;
+      setFormLocked(false);
-      showToast('Scraping stopped. Completed chapters are cached in database.', 'info');
+      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`;
+      setFormLocked(false);
-      notify('Silksoup EPUB Ready!', evt.message || 'Your book has been compiled successfully.');
+      loadEpubs();
-      showToast('EPUB compiled successfully!', 'success');
+      document.title = 'Completed: Silksoup';
+      notify('Silksoup EPUB Ready', evt.message || 'Book compiled successfully.');
+      showToast('EPUB compiled successfully', 'success');
     }
 
     if (evt.message && evt.message !== '__DONE__') {
@@ -398,9 +485,7 @@ function connectSSE(jobId){
     }
   };
 
-  evtSource.onerror = () => {
+  evtSource.onerror = () => {};
-    // Retry handled by browser EventSource
-  };
 }
 
 async function refreshJob() {
@@ -410,21 +495,21 @@ async function refreshJob(){
   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`;
   }
@@ -439,13 +524,11 @@ function toggleLogHeight(){
   const log = $('#jobLog');
   const btn = $('#expandLogBtn');
   if (isLogExpanded) {
-    log.classList.remove('h-96');
+    log.classList.remove('expanded');
-    log.classList.add('h-44');
     btn.textContent = 'Expand';
     isLogExpanded = false;
   } else {
-    log.classList.remove('h-44');
+    log.classList.add('expanded');
-    log.classList.add('h-96');
     btn.textContent = 'Collapse';
     isLogExpanded = true;
   }
@@ -470,39 +553,125 @@ function filterEpubs(){
     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');
+    const key = f.base_key || f.name.replace(/(-fixed)?\.epub$/i, '').trim().toLowerCase();
-    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';
+    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="book-info">
-      <div class="flex-1 min-w-0">
+          <svg class="book-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <div class="truncate text-zinc-200 text-xs font-medium capitalize" title="${cleanTitle}">${cleanTitle}</div>
+            <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"/>
-        <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>
+            <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">
+            <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>
-        <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>
-        <div class="relative inline-block" id="delWrap_${CSS.escape(f.name)}">
+        </div>
-          <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-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);
   }
 }
 
@@ -511,13 +680,22 @@ function confirmDelete(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">
+    <div class="delete-confirm-box">
-      <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 type="button" onclick="executeDelete('${encodeURIComponent(name)}')" class="btn-confirm-delete">Confirm</button>
-      <button onclick="loadEpubs()" class="text-[11px] px-2 py-1 text-zinc-400 hover:text-white">Cancel</button>
+      <button type="button" onclick="loadEpubs()" class="btn-cancel-delete">Cancel</button>
     </div>
   `;
 }
 
+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' });
@@ -529,36 +707,49 @@ async function executeDelete(encodedName){
   }
 }
 
-// Auto-restore active job on load if any
+async function syncActiveJob() {
-async function checkStoredJob(){
+  try {
-  if (!currentJobId) return;
+    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>