refactor: remove dead UI elements, tighten model integration

Front-end cleanup:
- Remove narrative_subtitles (defined but never used)
- Remove loading_spinner (always hidden, never shown)
- Remove 5 unused chime WAV files (willow/sky/deep/baker/letters)
- Remove empty_state_sim debug checkbox from library tab
- Remove dead Profile tab checkboxes (denoising, sleep wave, transitions)
- Remove sandbox outage simulation (debug-only feature)
- Remove system_error_modal and offline_toggle handler
- Rename html variable to avoid shadowing html module
- Fix html.escape on voice names and book titles in library/clone cards
- Fix XSS in library card JS onclick (escape quotes in titles)

Integration tightening:
- Timeline slider now auto-advances during TTS playback
- Story text highlight syncs with current playback chunk
- Story-finished panel shown when last chunk completes
- Player shows 'Your Cloned Voice' when voice profile active
- Resume button now shows Play (ready state) instead of fake PLAYING
- Profile tab updated with actual model pipeline info

Net: -38 lines (1011 -> 973), 18 tests still pass

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app.py

@@ -56,19 +56,10 @@ def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
             packed_val = struct.pack('<h', int(val * 16384))
             wav_file.writeframes(packed_val)
 
-# Instantiate the audio files immediately so they are hot in HF Spaces cache
-create_sound_library = {
-    "willow": ("sample_sounds/willow.wav", 120, "lullaby"),
-    "sky": ("sample_sounds/sky.wav", 180, "adventure"),
-    "deep": ("sample_sounds/deep.wav", 240, "adventure"),
-    "baker": ("sample_sounds/baker.wav", 98, "lullaby"),
-    "letters": ("sample_sounds/letters.wav", 156, "classic"),
-    "cloned_preview": ("sample_sounds/cloned_preview.wav", 15, "lullaby")
-}
-
-for key, (path, dur, mel) in create_sound_library.items():
-    if not os.path.exists(path):
-        generate_chimes_wav(path, duration=dur, melody_type=mel)
+# Generate a short placeholder chime for the preview widget's initial value
+_preview_chime_path = "sample_sounds/cloned_preview.wav"
+if not os.path.exists(_preview_chime_path):
+    generate_chimes_wav(_preview_chime_path, duration=15, melody_type="lullaby")
 
 COVERS_DIR = Path(__file__).parent / "assets" / "covers"
 
@@ -142,15 +133,6 @@ mock_voices = [
     }
 ]
 
-narrative_subtitles = [
-    "Deep within the heart of Whispering Woods stands an ancient willow tree...",
-    "It was rumored to hold the forgotten memories of the valley.",
-    "When a young cartographer is sent to map the region...",
-    "She starts hearing a gentle, familiar voice whispering from the emerald leaves.",
-    "The voice seemed to know her name, calling softly in the early autumn breeze...",
-    "And that was when she realized, she was not alone in the valley."
-]
-
 with open(os.path.join(os.path.dirname(__file__), "static", "style.css"), encoding="utf-8") as _f:
     css_code = _f.read()
 
@@ -263,12 +245,14 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
         </div>
         """
 
-    html = """<div class="book-shelf-grid">"""
+    html_out = """<div class="book-shelf-grid">"""
     for bk in filtered:
-        html += f"""
+        safe_title = html.escape(bk['title'])
+        js_safe_title = bk['title'].replace("'", "\\'").replace('"', '\\"')
+        html_out += f"""
         <div class="shelf-card group" style="flex-direction: column; gap: 0; padding: 0; overflow: hidden; cursor: pointer;" onclick="
             var radios = document.querySelectorAll('.library-book-selector input[type=radio]');
-            radios.forEach(function(r) {{ if(r.value === '{bk['title']}') {{ r.click(); }} }});
+            radios.forEach(function(r) {{ if(r.value === '{js_safe_title}') {{ r.click(); }} }});
         ">
             <div style="position: relative; aspect-ratio: 3/4; overflow: hidden; height: 200px;">
                 <img src="{bk['cover_url']}" style="width: 100%; height: 100%; object-fit: cover;" referrerPolicy="no-referrer" />
@@ -277,7 +261,7 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
                 </div>
                 <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); padding: 12px; color: white;">
                     <span style="font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: #f5841f;">{bk['category']}</span>
-                    <h5 class="serif-header" style="color: white !important; font-size: 15px; margin: 2px 0 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{bk['title']}</h5>
+                    <h5 class="serif-header" style="color: white !important; font-size: 15px; margin: 2px 0 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{safe_title}</h5>
                 </div>
             </div>
             <div style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
@@ -294,8 +278,8 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
             </div>
         </div>
         """
-    html += "</div>"
-    return html
+    html_out += "</div>"
+    return html_out
 
 def load_paragraphs(story_path: str) -> list:
     try:
@@ -320,25 +304,27 @@ def render_story_text(paragraphs: list, current_idx: int) -> str:
     return result
 
 def render_cloned_voices_html(voices_list):
-    html = """<div class="book-shelf-grid">"""
+    markup = """<div class="book-shelf-grid">"""
     for v in voices_list:
         status_color = "#16a34a" if v["status"] == "ready" else "#d97706"
         status_bg = "#f0fdf4" if v["status"] == "ready" else "#fef3c7"
+        safe_name = html.escape(v['name'])
+        safe_desc = html.escape(v['description'])
 
-        html += f"""
+        markup += f"""
         <div class="shelf-card" style="align-items: center;">
             <div style="width: 48px; height: 48px; border-radius: 50%; background: #ede8e3; border: 1px solid #ddc1b0; font-size: 24px; display: flex; align-items: center; justify-content: center; shrink-0: 0;">
                 {v['avatar_url']}
             </div>
             <div style="min-width: 0; flex: 1;">
                 <div style="display: flex; justify-content: space-between; align-items: center; gap: 6px;">
-                    <h5 class="serif-header" style="font-size: 14.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{v['name']}</h5>
+                    <h5 class="serif-header" style="font-size: 14.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{safe_name}</h5>
                     <span style="font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: {status_color}; background: {status_bg};">
                         {v['status']}
                     </span>
                 </div>
                 <p style="font-size: 11.5px; color: #6f6257; margin: 4px 0 0 0; clamp: 2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
-                    {v['description']}
+                    {safe_desc}
                 </p>
                 <div style="border-top: 1px solid rgba(148,74,0,0.08); padding-top: 6px; margin-top: 6px; display: flex; justify-content: space-between; font-size: 10px; color: #6f6257;">
                     <span>Gender: {v['gender']}</span>
@@ -347,8 +333,8 @@ def render_cloned_voices_html(voices_list):
             </div>
         </div>
         """
-    html += "</div>"
-    return html
+    markup += "</div>"
+    return markup
 
 
 # Gradio Application Core setup
@@ -395,8 +381,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             search_input = gr.Textbox(placeholder="Search by title, author, or voice...", label="Filter", show_label=False)
                         with gr.Column(scale=1):
                             category_filter = gr.Radio(["All", "In Progress", "Completed"], value="All", label="Progress", show_label=False)
-                        with gr.Column(scale=1):
-                            empty_state_sim = gr.Checkbox(label="Simulate Empty", value=False)
 
                     shelf_grid = gr.HTML(value=generate_library_html(mock_books))
 
@@ -527,7 +511,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                         </div>
                     """)
 
-                    loading_spinner = gr.HTML(visible=False)
                     voice_cloning_success_panel = gr.HTML(visible=False)
                     voice_sample_preview_widget = gr.Audio(value="sample_sounds/cloned_preview.wav", visible=False, label="Pre-listening synthesized vocal pitch weights match preview", interactive=False)
                     add_to_library_btn = gr.Button("✨ Synced successfully! Bind Companion Voice to Inventory", visible=False)
@@ -539,8 +522,8 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             """)
             cloned_voices_list_grid = gr.HTML(value=render_cloned_voices_html(mock_voices))
 
-        # TAB 4: Profile & Sandbox Settings
-        with gr.TabItem("⚙️ Profile & Sandbox Settings") as profile_tab:
+        # TAB 4: Profile
+        with gr.TabItem("⚙️ Profile") as profile_tab:
             with gr.Row():
                 with gr.Column(scale=1, elem_classes="card-container"):
                     gr.HTML("""
@@ -548,8 +531,8 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             <div style="width: 72px; height: 72px; border-radius: 50%; background: #944a00; color: white; font-size: 36px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px auto;">
                                 👩‍💻
                             </div>
-                            <h3 class="serif-header" style="font-size: 18px; margin: 0;">Sarah Jenkins</h3>
-                            <p style="font-size: 11.5px; color: #6f6257; margin-top: 2px;">Premium Member since Summer 2026</p>
+                            <h3 class="serif-header" style="font-size: 18px; margin: 0;">Your Profile</h3>
+                            <p style="font-size: 11.5px; color: #6f6257; margin-top: 2px;">ReadBookMom — Hugging Face Hackathon 2026</p>
                         </div>
                     """)
 
@@ -558,90 +541,70 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             <div style="background: white; border: 1px solid #ebdccb; border-radius: 12px; padding: 10px;">
                                 <span style="font-size: 18px; display: block;">📚</span>
                                 <strong style="font-size: 15px; display: block; color: #1c1c19;">5</strong>
-                                <span style="font-size: 9px; text-transform: uppercase; color: #6f6257;">Bookshelf</span>
+                                <span style="font-size: 9px; text-transform: uppercase; color: #6f6257;">Stories</span>
                             </div>
                             <div style="background: white; border: 1px solid #ebdccb; border-radius: 12px; padding: 10px;">
-                                <span style="font-size: 18px; display: block;">⏱️</span>
-                                <strong style="font-size: 15px; display: block; color: #1c1c19;">14.6h</strong>
-                                <span style="font-size: 9px; text-transform: uppercase; color: #6f6257;">Listen Time</span>
+                                <span style="font-size: 18px; display: block;">🧠</span>
+                                <strong style="font-size: 15px; display: block; color: #1c1c19;">3</strong>
+                                <span style="font-size: 9px; text-transform: uppercase; color: #6f6257;">Models</span>
                             </div>
                             <div style="background: white; border: 1px solid #ebdccb; border-radius: 12px; padding: 10px;">
                                 <span style="font-size: 18px; display: block;">🎙️</span>
-                                <strong style="font-size: 15px; display: block; color: #1c1c19;">3</strong>
-                                <span style="font-size: 9px; text-transform: uppercase; color: #6f6257;">Cloned Cast</span>
+                                <strong style="font-size: 15px; display: block; color: #1c1c19;">Qwen3</strong>
+                                <span style="font-size: 9px; text-transform: uppercase; color: #6f6257;">TTS Engine</span>
                             </div>
                         </div>
                     """)
 
-                    gr.HTML("""<div style="margin-top: 24px;"><h4 class="serif-header" style="font-size: 14px; margin-bottom: 8px;">Acoustic Signal Processing Config</h4></div>""")
-                    gr.Checkbox(label="Enable Client Denoising Filter", value=True)
-                    gr.Checkbox(label="Enable Brownian Dynamic Sleep Wave", value=False)
-                    gr.Checkbox(label="Automatic Chapter Transitions", value=True)
-
                 with gr.Column(scale=1, elem_classes="card-container"):
                     gr.HTML("""
-                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Boundary Connection Error Diagnostics</h3>
-                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">Test robust offline error conditions gracefully.</p>
+                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Model Pipeline</h3>
+                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">Active AI models powering the app.</p>
                     """)
 
-                    offline_toggle = gr.Checkbox(label="Simulate Sandbox Connection Outage", value=False)
-
                     gr.HTML("""
-                        <div style="margin-top: 16px; padding: 12px; background: white; border-radius: 12px; border: 1px solid #ebdccb;">
-                            <span style="font-size:10px; font-weight:700; text-transform:uppercase; color:#6f6257; display:block; margin-bottom:6px;">Sandbox local metric stores:</span>
-                            <div style="font-size: 11.5px; color: #1c1c19;">
-                                💾 Voice Weights Space Cache: 24.8 MB / 512 MB<br>
-                                📦 Cached offline items: 182 MB (12%)
+                        <div style="padding: 12px; background: white; border-radius: 12px; border: 1px solid #ebdccb;">
+                            <div style="font-size: 11.5px; color: #1c1c19; line-height: 2;">
+                                🎙️ <strong>Voice Cloning:</strong> Qwen3-TTS-1.7B-Base (bfloat16)<br>
+                                🗣️ <strong>Fallback TTS:</strong> Supertonic ONNX<br>
+                                👂 <strong>ASR:</strong> Whisper-small<br>
+                                🧠 <strong>Q&A:</strong> Qwen2.5-3B-Instruct
                             </div>
                         </div>
                     """)
 
-                    error_sim_view = gr.HTML("""
-                        <div style="margin-top: 16px; padding: 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; display: none;" id="error-sim-panel">
-                            <span style="font-size: 20px; display: block; margin-bottom: 4px;">⚠️ Connection Interruption Layout</span>
-                            <strong style="color: #991b1b; font-size:14px; display:block;">Can't reach the story right now</strong>
-                            <p style="color: #7f1d1d; font-size: 11.5px; margin-top:4px; line-height:1.4;">The signal to Whispering Woods took a brief tumble. Verify your client network link or refresh the bookshelf items.</p>
-                        </div>
-                    """, elem_id="error-sim-block")
-
-    system_error_modal = gr.HTML("""
-    <div style="display: none; background-color: #FAF7F2; padding: 48px 16px; text-align: center; border-radius: 20px; border: 2px solid #fecaca; max-width: 460px; margin: 40px auto;" id="global-sandbox-error">
-        <div style="width: 72px; height: 72px; border-radius: 16px; background: #fff5f5; border: 1px solid #fecaca; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; font-size: 36px;">
-            ⚠️
-        </div>
-        <span style="font-size: 10px; font-weight: 700; color: #dc2626; text-transform: uppercase; letter-spacing: 2px;">Offline Connection Interruption</span>
-        <h2 class="serif-header" style="font-size: 24px; margin: 8px 0;">Can't reach the story right now</h2>
-        <p style="font-size: 13.5px; color: #6f6257; line-height: 1.5; margin-bottom: 24px;">The signal to Whispering Woods took a brief tumble. Verify your client network link or try refreshing.</p>
-        <div style="background: #ede8e3; padding: 10px; border-radius: 10px; font-size: 11px; color:#6f6257; font-family: monospace;">
-            Boundary Sandbox Mode Enabled. Uncheck settings switch to resume.
-        </div>
-    </div>
-    """, visible=False)
-
     # REACTIVE LOGIC
 
     # 1. Search / filter shelf
-    def filter_books_shelf(query, category, empty_mode_active, current_books):
-        if empty_mode_active:
-            return generate_library_html(current_books, empty_mode=True)
+    def filter_books_shelf(query, category, current_books):
         return generate_library_html(current_books, query=query, category_filt=category)
 
-    search_input.change(filter_books_shelf, inputs=[search_input, category_filter, empty_state_sim, books_state], outputs=shelf_grid)
-    category_filter.change(filter_books_shelf, inputs=[search_input, category_filter, empty_state_sim, books_state], outputs=shelf_grid)
-    empty_state_sim.change(filter_books_shelf, inputs=[search_input, category_filter, empty_state_sim, books_state], outputs=shelf_grid)
+    search_input.change(filter_books_shelf, inputs=[search_input, category_filter, books_state], outputs=shelf_grid)
+    category_filter.change(filter_books_shelf, inputs=[search_input, category_filter, books_state], outputs=shelf_grid)
 
     # 2. Book card click → load into player
-    def handle_book_select(title_chosen, current_inventory):
+    def handle_book_select(title_chosen, current_inventory, profile_id):
         if not title_chosen:
             return [gr.update()] * 12
         selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
 
+        # Show cloned voice name if profile exists
+        from voice_clone import has_profile
+        if profile_id and has_profile(profile_id):
+            narrator_label = "🎙️ Your Cloned Voice"
+            narrator_color = "#4ade80"
+        else:
+            narrator_label = f"🔊 {selected['voice_name']} (stock)"
+            narrator_color = "#ffd3a6"
+
+        safe_title = html.escape(selected['title'])
+        safe_author = html.escape(selected['author'])
         player_html = f"""
         <div style="text-align: center; margin-bottom: 16px; margin-top: 8px;">
             <img src="{selected['cover_url']}" style="width: 110px; height: 155px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 12px;" />
-            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 20px; margin:0; color:#FAF7F2;">{selected['title']}</h3>
-            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by {selected['author']}</p>
-            <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: #ffd3a6; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 6px;">Active Narrator: {selected['voice_name']}</span>
+            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 20px; margin:0; color:#FAF7F2;">{safe_title}</h3>
+            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by {safe_author}</p>
+            <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: {narrator_color}; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 6px;">Active Narrator: {narrator_label}</span>
         </div>
         """
         paras = load_paragraphs(selected["story_path"])
@@ -672,7 +635,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
 
     book_selector.change(
         handle_book_select,
-        inputs=[book_selector, books_state],
+        inputs=[book_selector, books_state, voice_profile_state],
         outputs=[player_title_info, player_audio_control, player_status_bar, chunk_status,
                  play_btn, pause_btn, ask_btn, story_finished_panel,
                  paragraphs_state, tts_chunks_state, story_text_display, timeline_slider]
@@ -686,7 +649,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                     Please provide a comforting nickname for your cloning candidate.
                    </div>""",
                 gr.HTML(visible=False),
-                gr.HTML(visible=False),
                 gr.Audio(visible=False),
                 gr.Button(visible=False),
                 None,
@@ -697,7 +659,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                     Microphone recording sample missing. Speak some script lines!
                    </div>""",
                 gr.HTML(visible=False),
-                gr.HTML(visible=False),
                 gr.Audio(visible=False),
                 gr.Button(visible=False),
                 None,
@@ -742,7 +703,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         """
 
         return (
-            gr.HTML(visible=False),
             gr.HTML(visible=False),
             gr.HTML(value=cloned_card_html, visible=True),
             gr.Audio(value=preview_path, visible=preview_path is not None),
@@ -753,7 +713,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     extract_btn.click(
         animate_cloning_pipeline,
         inputs=[new_voice_name, new_voice_gender, mic_recorder],
-        outputs=[cloning_progress_msg, loading_spinner, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn, voice_profile_state]
+        outputs=[cloning_progress_msg, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn, voice_profile_state]
     )
 
     # 4. Add cloned voice to inventory
@@ -774,7 +734,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             render_cloned_voices_html(updated),
             gr.HTML(visible=True, value="""<div style="text-align: center; padding: 32px 0;"><span style="font-size:42px;">🎙️</span><p style="margin-top:12px; font-size:14px; color:#6f6257;">Vocal profile saved successfully!</p></div>"""),
             gr.HTML(visible=False),
-            gr.HTML(visible=False),
             gr.Audio(visible=False),
             gr.Button(visible=False),
             gr.Textbox(value="")
@@ -783,7 +742,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     add_to_library_btn.click(
         save_new_cloned_voice,
         inputs=[new_voice_name, new_voice_gender, voices_state],
-        outputs=[voices_state, cloned_voices_list_grid, cloning_progress_msg, loading_spinner, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn, new_voice_name]
+        outputs=[voices_state, cloned_voices_list_grid, cloning_progress_msg, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn, new_voice_name]
     )
 
     # 5. Play button — streams TTS audio chunk by chunk
@@ -801,29 +760,50 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
         """
 
+        n_paras = len(paras) if paras else 1
+
         if not tts_chunks:
-            yield None, _status_done, "<div style='text-align:center;font-size:10px;color:#64748b;font-family:monospace;margin-top:8px;'>No content loaded</div>", gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False)
+            yield (None, _status_done,
+                   "<div style='text-align:center;font-size:10px;color:#64748b;font-family:monospace;margin-top:8px;'>No content loaded</div>",
+                   gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
+                   gr.Slider(value=0), render_story_text(paras, 0) if paras else "",
+                   gr.HTML(visible=False))
             return
 
         n = len(tts_chunks)
-        # Immediately show PLAYING state
-        yield None, _status_playing, f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>Generating chunk 1 / {n}…</div>", gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=False)
+        yield (None, _status_playing,
+               f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>Generating chunk 1 / {n}…</div>",
+               gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=False),
+               gr.Slider(value=0), render_story_text(paras, 0) if paras else "",
+               gr.HTML(visible=False))
 
         for sample_rate, wav, i, total, err in generate_audio_stream(tts_chunks, voice_profile_id=profile_id):
             if err:
-                yield None, f"<div style='color:#ef4444;font-size:11px;'>Error on chunk {i+1}: {err}</div>", "", gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False)
+                yield (None, f"<div style='color:#ef4444;font-size:11px;'>Error on chunk {i+1}: {err}</div>", "",
+                       gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
+                       gr.Slider(value=0), gr.update(), gr.HTML(visible=False))
                 return
+            # Map chunk index to paragraph index (approximate: chunks ≈ sentences, paragraphs ≈ groups)
+            para_idx = min(int(i * n_paras / total), n_paras - 1) if total > 0 else 0
             next_label = f"chunk {i+2} / {total}" if i + 1 < total else "last chunk"
             chunk_html = f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>▶ Playing chunk {i+1} / {total} — generating {next_label}</div>"
-            yield (sample_rate, wav), _status_playing, chunk_html, gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=True)
+            is_last = (i + 1 >= total)
+            yield ((sample_rate, wav), _status_playing, chunk_html,
+                   gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=True),
+                   gr.Slider(value=para_idx), render_story_text(paras, para_idx),
+                   gr.HTML(visible=is_last))
 
         done_html = f"<div style='text-align:center;font-size:10px;color:#94a3b8;font-family:monospace;margin-top:8px;'>✅ {n} chunks complete</div>"
-        yield None, _status_done, done_html, gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False)
+        yield (None, _status_done, done_html,
+               gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False),
+               gr.Slider(value=max(n_paras - 1, 0)), render_story_text(paras, max(n_paras - 1, 0)),
+               gr.HTML(visible=True))
 
     play_btn.click(
         stream_tts,
         inputs=[tts_chunks_state, paragraphs_state, voice_profile_state],
-        outputs=[player_audio_control, player_status_bar, chunk_status, play_btn, pause_btn, ask_btn]
+        outputs=[player_audio_control, player_status_bar, chunk_status, play_btn, pause_btn, ask_btn,
+                 timeline_slider, story_text_display, story_finished_panel]
     )
 
     # 6. Pause button — PAUSED state
@@ -962,25 +942,25 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[answer_display, answer_audio]
     )
 
-    # 10. Resume button — back to PLAYING
+    # 10. Resume button — dismiss Q&A panel, show Play to continue
     def enter_resume_state():
         status_html = """
             <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
-                <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
-                <span style="font-size: 11px; color: #4ade80; font-family: monospace;">PLAYING</span>
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY — Tap Play to continue</span>
             </div>
         """
         return (
             status_html,
-            gr.Button(visible=False),
-            gr.Button(visible=True),
-            gr.Button(visible=True),
-            gr.Button(visible=False),
-            gr.HTML(visible=False),
-            gr.Group(visible=False),
-            gr.HTML(visible=False),
-            gr.Audio(visible=False),
-            gr.Textbox(value=""),
+            gr.Button(visible=True),   # play_btn — user can tap Play to resume TTS
+            gr.Button(visible=False),  # pause_btn
+            gr.Button(visible=False),  # ask_btn
+            gr.Button(visible=False),  # resume_btn
+            gr.HTML(visible=False),    # qa_panel
+            gr.Group(visible=False),   # qa_input_group
+            gr.HTML(visible=False),    # answer_display
+            gr.Audio(visible=False),   # answer_audio
+            gr.Textbox(value=""),      # question_text
         )
 
     resume_btn.click(
@@ -989,22 +969,5 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text]
     )
 
-    # 11. Story-finished check
-    def check_story_finished(slider_val, paras):
-        if paras and int(slider_val) >= len(paras) - 1:
-            return gr.HTML(visible=True)
-        return gr.HTML(visible=False)
-
-    timeline_slider.change(check_story_finished, inputs=[timeline_slider, paragraphs_state], outputs=[story_finished_panel])
-
-    # 12. Sandbox outage toggle
-    def toggle_outage_sandbox(checked):
-        if checked:
-            return gr.HTML(visible=True), gr.Tabs(visible=False)
-        else:
-            return gr.HTML(visible=False), gr.Tabs(visible=True)
-
-    offline_toggle.change(toggle_outage_sandbox, inputs=[offline_toggle], outputs=[system_error_modal, main_tabs])
-
 if __name__ == "__main__":
     demo.queue().launch(allowed_paths=[str(Path(__file__).parent / "assets")])