feat: merge Library + Player into single tab with click-to-play

- Remove separate Companion Player tab
- My Library tab now shows book grid on left, player panel on right
- Book card onclick triggers hidden gr.Radio → Python callback loads player
- Player auto-populates cover, title, synopsis, audio on book selection
- Drop/pause/resume/ask/Q&A state machine preserved as-is

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -9,17 +9,17 @@ from pathlib import Path
 # Create directories for sample audio files
 os.makedirs("sample_sounds", exist_ok=True)
 
-# Generate relaxing audio chime waveforms procedurally 
+# Generate relaxing audio chime waveforms procedurally
 # This runs fully client/server-side with standard Python, eliminating mock limits or Torch wait times
 def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
     sample_rate = 16000
     n_samples = int(duration * sample_rate)
-    
+
     with wave.open(filename, 'wb') as wav_file:
         wav_file.setnchannels(1)
         wav_file.setsampwidth(2)
         wav_file.setframerate(sample_rate)
-        
+
         # Pentatonic cozy scales
         if melody_type == "lullaby":
             notes = [261.63, 293.66, 329.63, 392.00, 440.00] # C4, D4, E4, G4, A4
@@ -33,7 +33,7 @@ def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
             note_speed = sample_rate * 1.5 if melody_type == "lullaby" else sample_rate * 1.2
             note_idx = int((i / note_speed) % len(notes))
             freq = notes[note_idx]
-            
+
             # envelope to prevent crackles
             sample_in_note = i % int(note_speed)
             envelope = 1.0
@@ -42,13 +42,13 @@ def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
             else: # decay
                 decay_length = note_speed - 1200
                 envelope = max(0.0, 1.0 - (sample_in_note - 1200) / decay_length)
-                
+
             # Synthesize voice-harmonic chime
             val = math.sin(2 * math.pi * freq * i / sample_rate)
             val += 0.45 * math.sin(2 * math.pi * (freq * 1.5) * i / sample_rate)
             val += 0.25 * math.sin(2 * math.pi * (freq * 2.0) * i / sample_rate)
             val = val / 1.7 * envelope
-            
+
             packed_val = struct.pack('<h', int(val * 16384))
             wav_file.writeframes(packed_val)
 
@@ -69,7 +69,6 @@ for key, (path, dur, mel) in create_sound_library.items():
 COVERS_DIR = Path("assets/covers")
 
 def cover_path(slug: str) -> str:
-    """로컬 커버 이미지를 Gradio file-serving URL로 반환."""
     p = COVERS_DIR / f"{slug}.png"
     return f"/gradio_api/file={p.as_posix()}"
 
@@ -82,7 +81,6 @@ def load_books_from_stories(stories_dir="stories"):
     for i, filename in enumerate(story_files):
         title = filename.replace(".txt", "").replace("_", " ")
         slug = filename.replace(".txt", "")
-        # Read first non-empty line as synopsis opener
         synopsis = ""
         try:
             with open(os.path.join(stories_dir, filename), encoding="utf-8") as f:
@@ -96,14 +94,14 @@ def load_books_from_stories(stories_dir="stories"):
             "title": title,
             "author": "Public Domain",
             "cover_url": cover_path(slug),
-            "voice_name": "Mom’s Voice",
+            "voice_name": "Mom's Voice",
             "duration": 0,
             "elapsed_time": 0,
             "synopsis": synopsis,
-            "category": "Children’s Story",
+            "category": "Children's Story",
             "is_cloned": False,
             "percentage": 0,
-            "audio_path": None,  # replaced by TTS at runtime
+            "audio_path": None,
             "story_path": os.path.join(stories_dir, filename),
         })
     return books
@@ -155,13 +153,13 @@ with open(os.path.join(os.path.dirname(__file__), "static", "style.css"), encodi
 def generate_dashboard_html(books_list):
     featured = books_list[0]
     others = books_list[1:]
-    
+
     html = f"""
     <div style="margin-bottom: 24px;">
         <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #f5841f; font-weight: 600;">Welcome Back, Sarah</span>
         <h2 class="serif-header" style="font-size: 28px; margin-top: 4px; margin-bottom: 16px;">Explore Your Warm Audiobook Shelves</h2>
     </div>
-    
+
     <!-- Hero Spotlight Section -->
     <div class="hero-spotlight" style="display: flex; flex-direction: row; gap: 32px; align-items: center; margin-bottom: 32px; flex-wrap: wrap;">
         <div style="flex: 1; min-width: 200px; max-width: 280px; text-align: center;">
@@ -174,7 +172,7 @@ def generate_dashboard_html(books_list):
                 <p style="color: #6f6257;">by <span style="font-style: italic; color: #ddc1b0;">{featured['author']}</span></p>
                 <p style="color: #cbd5e1; font-size: 13.5px; line-height: 1.6; margin-top: 8px;">{featured['synopsis']}</p>
             </div>
-            
+
             <div style="display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #e2e8f0;">
                 <span style="background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 8px;">⏱️ 20 Min Remaining</span>
                 <span style="background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 8px; font-weight: 600; color: #ffd3a6;">🎙️ Narrator: {featured['voice_name']}</span>
@@ -182,12 +180,12 @@ def generate_dashboard_html(books_list):
             </div>
         </div>
     </div>
-    
+
     <div>
         <h4 class="serif-header" style="font-size: 20px; margin-bottom: 16px;">Continue Reading with Channeled Voices</h4>
         <div class="book-shelf-grid">
     """
-    
+
     for bk in books_list:
         html += f"""
         <div class="shelf-card">
@@ -214,7 +212,7 @@ def generate_dashboard_html(books_list):
             </div>
         </div>
         """
-        
+
     html += """
         </div>
     </div>
@@ -224,7 +222,6 @@ def generate_dashboard_html(books_list):
 
 def generate_library_html(books_list, query="", category_filt="All", empty_mode=False):
     if empty_mode:
-        # Compliance state: Line View empty shelf visual specifications
         return """
         <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px; text-align: center; max-width: 440px; margin: 0 auto;">
             <div style="position: relative; width: 90px; height: 90px; border-radius: 50%; background: #ede8e3; border: 1px dashed #ddc1b0; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
@@ -245,12 +242,12 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
     for bk in books_list:
         match_query = (query.lower() in bk["title"].lower()) or (query.lower() in bk["author"].lower()) or (query.lower() in bk["voice_name"].lower())
         match_cat = True
-        
+
         if category_filt == "In Progress":
             match_cat = 0 < bk["percentage"] < 100
         elif category_filt == "Completed":
             match_cat = bk["percentage"] == 100
-            
+
         if match_query and match_cat:
             filtered.append(bk)
 
@@ -265,7 +262,10 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
     html = """<div class="book-shelf-grid">"""
     for bk in filtered:
         html += f"""
-        <div class="shelf-card group" style="flex-direction: column; gap: 0; padding: 0; overflow: hidden;">
+        <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(); }} }});
+        ">
             <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" />
                 <div style="position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.95); padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 11px; border: 1px solid #ebdccb; color: #1c1c19;">
@@ -284,9 +284,8 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
                 <div class="progress-bar-bg">
                     <div class="progress-bar-fill" style="width: {bk['percentage']}%"></div>
                 </div>
-                <div style="display: flex; justify-content: space-between; font-size: 11px; color: #6f6257; align-items: center; padding-top: 4px;">
-                    <span>{math.floor(bk['duration'] / 60)} mins length</span>
-                    <span style="font-weight: 700; color: #f5841f;">Select below to Listen 🎧</span>
+                <div style="text-align: center; padding: 6px 0; font-size: 12px; font-weight: 700; color: #944a00;">
+                    ▶️ Tap to Play
                 </div>
             </div>
         </div>
@@ -299,7 +298,7 @@ def render_cloned_voices_html(voices_list):
     for v in voices_list:
         status_color = "#16a34a" if v["status"] == "ready" else "#d97706"
         status_bg = "#f0fdf4" if v["status"] == "ready" else "#fef3c7"
-        
+
         html += 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;">
@@ -312,7 +311,7 @@ def render_cloned_voices_html(voices_list):
                         {v['status']}
                     </span>
                 </div>
-                <p style="font-size: 11.5px; color: #6f6257; margin: 4px 0 0 0; line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
+                <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']}
                 </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;">
@@ -328,12 +327,10 @@ def render_cloned_voices_html(voices_list):
 
 # Gradio Application Core setup
 with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
-    
-    # Internal variables mapping user-session states
+
     books_state = gr.State(mock_books)
     voices_state = gr.State(mock_voices)
-    
-    # Simple navigation bar custom markup
+
     gr.HTML("""
     <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #ebdccb; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;">
         <div style="display: flex; align-items: center; gap: 12px;">
@@ -342,7 +339,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
             <div>
                 <h1 class="serif-header" style="font-size: 22px; margin: 0; line-height: 1;">VoiceBook</h1>
-                <span style="font-size: 10px; color: #f5841f; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">AI Companion Companion</span>
+                <span style="font-size: 10px; color: #f5841f; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">AI Bedtime Story Narrator</span>
             </div>
         </div>
         <div style="display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6f6257; font-family: monospace;">
@@ -351,213 +348,172 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         </div>
     </div>
     """)
-    
-    # Core Application Tabs Layout (Dashboard, Library, Clone, Player, Settings)
+
     with gr.Tabs() as main_tabs:
-        
+
         # TAB 1: Explore Dashboard
         with gr.TabItem("🏛️ Explore Space") as explore_tab:
             dashboard_container = gr.HTML(value=generate_dashboard_html(mock_books))
-            
-            gr.HTML("""<div style="margin-top: 24px; text-align: center;"><span style="font-size: 12px; color:#6f6257;">🎧 Head over to the <b>My Bookshelf</b> or <b>Companion Player</b> tabs to stream these books with cloned pitch audio!</span></div>""")
-            
-        # TAB 2: My Bookshelf
-        with gr.TabItem("📚 My Bookshelf") as shelf_tab:
+            gr.HTML("""<div style="margin-top: 24px; text-align: center;"><span style="font-size: 12px; color:#6f6257;">🎧 Head over to <b>My Library</b> and tap any book to start listening!</span></div>""")
+
+        # TAB 2: Library + Player (통합)
+        with gr.TabItem("📚 My Library") as library_tab:
             with gr.Row():
+                # Left: book grid
                 with gr.Column(scale=3):
-                    search_input = gr.Textbox(placeholder="Search by title, author, or voice...", label="Filter Library bookshelf contents", show_label=False)
-                with gr.Column(scale=1):
-                    category_filter = gr.Radio(["All", "In Progress", "Completed"], value="All", label="Progress Segment", show_label=False)
-                with gr.Column(scale=1):
-                    empty_state_sim = gr.Checkbox(label="Simulate Empty State", value=False)
-            
-            shelf_grid = gr.HTML(value=generate_library_html(mock_books))
-            
-            gr.HTML("""<div style="margin-top: 16px; border-bottom: 1px solid #ebdccb; padding-bottom: 12px;"><h4 class="serif-header" style="font-size: 16px;">Quick Mount Audiobook to Companion Player:</h4></div>""")
-            
-            # Interactive launcher list so they can easily key into player
-            book_titles_list = [b["title"] for b in mock_books]
-            book_mount_selector = gr.Dropdown(choices=book_titles_list, value=book_titles_list[0], label="Choose an audiobook from your current inventory shelf", show_label=True)
-            mount_play_btn = gr.Button("🎧 Mount & Launch Inside Companion Player", variant="primary")
-            
-        # TAB 3: Clone Voice Studio Custom Page
-        with gr.TabItem("🎙️ Clone Voice Studio") as clone_tab:
-            with gr.Row():
-                with gr.Column(scale=1, elem_classes="card-container"):
-                    gr.HTML("""
-                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px;">🧙 Voice Details Form</h3>
-                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 20px;">Provide a comforting nickname and details below to prepare vocal weights matching.</p>
-                    """)
-                    
-                    new_voice_name = gr.Textbox(placeholder="Enter a descriptive nickname (e.g., Grandma Judy, Dad)...", label="Voice Nickname")
-                    new_voice_gender = gr.Radio(["Female", "Male"], value="Female", label="Voice Gender Avatar")
-                    
-                    gr.HTML("""
-                        <div style="margin: 16px 0; padding: 12px; background: white; border-radius: 12px; border: 1px solid #ebdccb; font-size: 12px;">
-                            <strong style="color: #6f6257; text-transform: uppercase; font-size: 10px; display: block; margin-bottom: 4px;">Story Script to read aloud:</strong>
-                            <p style="font-family: Georgia, serif; font-style: italic; color: #1c1c19; margin: 0; line-height: 1.4;">
-                                "Deep within the ancient forest, the giant oak tree stood. Its roots whispered stories of forgotten eras. 'Close your eyes,' the wind hummed softly, 'for our beautiful journey begins tonight.'"
-                            </p>
-                        </div>
-                    """)
-                    
-                    # Record mic audio natively inside Spaces container
-                    mic_recorder = gr.Audio(sources=["microphone"], type="filepath", label="Record speaking story prompt (Min 10 seconds sample)")
-                    
-                    extract_btn = gr.Button("🪄 Analyze & Synthesize Customized Vocal Profile", variant="primary")
-                    
-                with gr.Column(scale=1, elem_classes="card-container"):
-                    gr.HTML("""
-                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Status Pipeline Visualizer</h3>
-                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">Track extraction, de-noising, and pitch tuning.</p>
-                    """)
-                    
-                    # Simulated progres bars inside Gradio
-                    cloning_progress_msg = gr.HTML("""
-                        <div style="text-align: center; padding: 32px 0;">
-                            <span style="font-size: 42px;">🎙️</span>
-                            <p style="margin-top: 12px; font-size: 14px; color: #6f6257;">Fill parameters on the left and read the story script aloud to begin extraction.</p>
-                        </div>
-                    """)
-                    
-                    loading_spinner = gr.HTML(visible=False)
-                    voice_cloning_success_panel = gr.HTML(visible=False)
-                    
-                    # Mini test player for procedural sample generator preview
-                    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)
-                    
-            # Bottom section detailing installed models
-            gr.HTML("""
-                <div style="margin-top: 32px; border-top: 1px solid #ebdccb; padding-top: 24px;">
-                    <h4 class="serif-header" style="font-size: 18px; margin-bottom: 16px;">Currently Available Companion Voices</h4>
-                </div>
-            """)
-            cloned_voices_list_grid = gr.HTML(value=render_cloned_voices_html(mock_voices))
-
-        # TAB 4: Active Companion Player
-        with gr.TabItem("🎧 Companion Player", id="player") as player_tab:
+                    with gr.Row():
+                        with gr.Column(scale=3):
+                            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))
+
+                    # Hidden radio — book cards click this via JS onclick
+                    book_titles_list = [b["title"] for b in mock_books]
+                    book_selector = gr.Radio(
+                        choices=book_titles_list,
+                        value=None,
+                        label="",
+                        show_label=False,
+                        elem_classes="library-book-selector",
+                        visible=False,
+                    )
 
-            with gr.Row():
+                # Right: player panel
                 with gr.Column(scale=2, elem_classes="dark-card-container"):
                     gr.HTML("""
                         <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 12px; margin-bottom: 16px;">
-                            <span style="font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #f5841f; font-weight: 700;">Spatial Stream Receiver Active</span>
+                            <span style="font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #f5841f; font-weight: 700;">Now Playing</span>
                             <span style="background: rgba(22, 163, 74, 0.2); padding: 2px 6px; border-radius: 6px; font-size: 9px; font-family: monospace; color: #4ade80;">SYNCHRONIZED PITCH</span>
                         </div>
                     """)
 
-                    # Story selector inside player
-                    player_story_selector = gr.Dropdown(
-                        choices=book_titles_list,
-                        value=book_titles_list[0],
-                        label="📖 Select Story",
-                        show_label=True,
-                        container=True,
-                    )
-                    player_load_btn = gr.Button("Load Story", variant="secondary", size="sm")
-
-                    player_title_info = gr.HTML(f"""
-                        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px;">
-                            <img src="{cover_path('The_Adventures_of_Puss_in_Boots')}" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
-                            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; margin:0; color:#FAF7F2;">Select a Story</h3>
-                            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">Choose a story above and press Load</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: 8px;">Active Narrator: Mom's Voice</span>
+                    player_title_info = gr.HTML("""
+                        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px; padding: 32px 0;">
+                            <span style="font-size: 48px;">📖</span>
+                            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 18px; margin: 12px 0 4px; color:#FAF7F2;">Select a story</h3>
+                            <p style="font-size: 12px; color: #94a3b8; font-style: italic;">Tap any book on the left to begin</p>
                         </div>
                     """)
 
-                    player_audio_control = gr.Audio(visible=True, interactive=False, label="Audio Stream", value="sample_sounds/willow.wav", autoplay=False)
+                    player_audio_control = gr.Audio(
+                        visible=False, interactive=False,
+                        label="Audio Stream", value="sample_sounds/willow.wav", autoplay=False
+                    )
 
-                    # Playback status indicator
                     player_status_bar = gr.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: #94a3b8; display: inline-block;"></span>
-                            <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY</span>
+                            <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">SELECT A STORY</span>
                         </div>
                     """)
 
-                    # Play / Pause / Resume / Ask row
                     with gr.Row():
-                        play_btn  = gr.Button("▶️ Play",  variant="primary",   scale=1)
-                        pause_btn = gr.Button("⏸ Pause", variant="secondary",  scale=1, visible=False)
-                        resume_btn = gr.Button("↩️ Resume Story", variant="secondary", scale=2, visible=False)
+                        play_btn   = gr.Button("▶️ Play",          variant="primary",   scale=1, visible=False)
+                        pause_btn  = gr.Button("⏸ Pause",          variant="secondary",  scale=1, visible=False)
+                        resume_btn = gr.Button("↩️ Resume Story",   variant="secondary",  scale=2, visible=False)
 
                     with gr.Row():
                         ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2, visible=False)
 
-                    # Chunk progress indicator
                     chunk_status = gr.HTML("""
                         <div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">
                             Chunk 0 / 0
                         </div>
                     """)
 
-                    # Story-finished prompt
                     story_finished_panel = gr.HTML("""
                         <div style="margin-top: 12px; padding: 16px; background: rgba(245,132,31,0.1); border: 1px solid rgba(245,132,31,0.3); border-radius: 14px; text-align: center;">
                             <span style="font-size: 28px;">🎉</span>
                             <h4 style="font-family: 'Playfair Display', Georgia, serif; color: #ffd3a6; margin: 8px 0 4px;">Story Complete!</h4>
-                            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 12px;">Pick another story above or head to <b>My Bookshelf</b>.</p>
+                            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 12px;">Tap another book to start a new story.</p>
                         </div>
                     """, visible=False)
-                    
-                with gr.Column(scale=3, elem_classes="card-container"):
-                    gr.HTML("""
-                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Dynamic Synced Script Transcriptions</h3>
-                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">The synced transcript lines match progress in real-time. Use the timeline slider below to tick forward.</p>
-                    """)
-                    
-                    # Dialogue sync script box
+
+                    # Synced subtitle
                     synced_subtitle_ticker = gr.HTML("""
-                        <div class="dialog-synced">
-                            &ldquo;Deep within the heart of Whispering Woods stands an ancient willow tree...&rdquo;
+                        <div class="dialog-synced" style="margin-top: 16px; display: none;">
+                            &ldquo;&rdquo;
                         </div>
                     """)
-                    
-                    # Simulation scrub mechanism
-                    timeline_slider = gr.Slider(minimum=0, maximum=5, step=1, value=0, label="Synced Script Excerpt Position (Story timeline coordinate index)")
-                    
-                    gr.HTML("""
-                        <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #ebdccb;">
-                            <h4 class="serif-header" style="font-size: 14px; margin-bottom: 12px;">Active Audiobook Metadata Details</h4>
-                        </div>
-                    """)
-                    
-                    m_synopsis = gr.Textbox(interactive=False, label="Selected Story Synopsis", lines=4, value=mock_books[0]["synopsis"])
-                    m_category = gr.Label(label="Story Category Shelf Mapping", value="Fantasy")
+                    timeline_slider = gr.Slider(minimum=0, maximum=5, step=1, value=0, label="Story position", visible=False)
+
+                    m_synopsis = gr.Textbox(interactive=False, label="Synopsis", lines=3, value="", visible=False)
 
-                    # --- Q&A Panel (hidden while playing, shown after Ask) ---
+                    # Q&A Panel
                     qa_panel = gr.HTML("""
-                        <div style="margin-top: 20px; border-top: 1px solid #ebdccb; padding-top: 16px;">
-                            <h4 class="serif-header" style="font-size: 14px; margin-bottom: 12px;">❓ Ask About the Story</h4>
+                        <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px;">
+                            <h4 style="font-family: 'Playfair Display', Georgia, serif; font-size: 14px; margin-bottom: 12px; color: #FAF7F2;">❓ Ask About the Story</h4>
                         </div>
                     """, visible=False)
 
                     with gr.Group(visible=False) as qa_input_group:
                         question_text = gr.Textbox(
                             placeholder="Type your question about the story here...",
-                            label="Your Question",
-                            lines=2,
-                            show_label=False
+                            label="Your Question", lines=2, show_label=False
                         )
                         question_audio = gr.Audio(
-                            sources=["microphone"],
-                            type="filepath",
-                            label="Or speak your question",
-                            show_label=True
+                            sources=["microphone"], type="filepath",
+                            label="Or speak your question", show_label=True
                         )
                         submit_question_btn = gr.Button("🔍 Get Answer in Cloned Voice", variant="primary")
 
-                    # Answer output area
                     answer_display = gr.HTML(visible=False)
-                    answer_audio = gr.Audio(
-                        label="Answer in Narrator's Voice",
-                        interactive=False,
-                        visible=False
-                    )
+                    answer_audio = gr.Audio(label="Answer in Narrator's Voice", interactive=False, visible=False)
+
+        # TAB 3: Clone Voice Studio
+        with gr.TabItem("🎙️ Clone Voice Studio") as clone_tab:
+            with gr.Row():
+                with gr.Column(scale=1, elem_classes="card-container"):
+                    gr.HTML("""
+                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px;">🧙 Voice Details Form</h3>
+                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 20px;">Provide a comforting nickname and details below to prepare vocal weights matching.</p>
+                    """)
+
+                    new_voice_name = gr.Textbox(placeholder="Enter a descriptive nickname (e.g., Grandma Judy, Dad)...", label="Voice Nickname")
+                    new_voice_gender = gr.Radio(["Female", "Male"], value="Female", label="Voice Gender Avatar")
+
+                    gr.HTML("""
+                        <div style="margin: 16px 0; padding: 12px; background: white; border-radius: 12px; border: 1px solid #ebdccb; font-size: 12px;">
+                            <strong style="color: #6f6257; text-transform: uppercase; font-size: 10px; display: block; margin-bottom: 4px;">Story Script to read aloud:</strong>
+                            <p style="font-family: Georgia, serif; font-style: italic; color: #1c1c19; margin: 0; line-height: 1.4;">
+                                "Deep within the ancient forest, the giant oak tree stood. Its roots whispered stories of forgotten eras. 'Close your eyes,' the wind hummed softly, 'for our beautiful journey begins tonight.'"
+                            </p>
+                        </div>
+                    """)
+
+                    mic_recorder = gr.Audio(sources=["microphone"], type="filepath", label="Record speaking story prompt (Min 10 seconds sample)")
+                    extract_btn = gr.Button("🪄 Analyze & Synthesize Customized Vocal Profile", variant="primary")
+
+                with gr.Column(scale=1, elem_classes="card-container"):
+                    gr.HTML("""
+                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Status Pipeline Visualizer</h3>
+                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">Track extraction, de-noising, and pitch tuning.</p>
+                    """)
+
+                    cloning_progress_msg = gr.HTML("""
+                        <div style="text-align: center; padding: 32px 0;">
+                            <span style="font-size: 42px;">🎙️</span>
+                            <p style="margin-top: 12px; font-size: 14px; color: #6f6257;">Fill parameters on the left and read the story script aloud to begin extraction.</p>
+                        </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)
+
+            gr.HTML("""
+                <div style="margin-top: 32px; border-top: 1px solid #ebdccb; padding-top: 24px;">
+                    <h4 class="serif-header" style="font-size: 18px; margin-bottom: 16px;">Currently Available Voices</h4>
+                </div>
+            """)
+            cloned_voices_list_grid = gr.HTML(value=render_cloned_voices_html(mock_voices))
 
-        # TAB 5: Profile & Connection Sandbox
+        # TAB 4: Profile & Sandbox Settings
         with gr.TabItem("⚙️ Profile & Sandbox Settings") as profile_tab:
             with gr.Row():
                 with gr.Column(scale=1, elem_classes="card-container"):
@@ -570,7 +526,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             <p style="font-size: 11.5px; color: #6f6257; margin-top: 2px;">Premium Member since Summer 2026</p>
                         </div>
                     """)
-                    
+
                     gr.HTML("""
                         <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center;">
                             <div style="background: white; border: 1px solid #ebdccb; border-radius: 12px; padding: 10px;">
@@ -590,24 +546,20 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             </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.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>
                     """)
-                    
+
                     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>
@@ -617,7 +569,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             </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>
@@ -626,7 +578,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                         </div>
                     """, elem_id="error-sim-block")
 
-    # Offline outage container modal overlay representation
     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;">
@@ -641,20 +592,61 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     </div>
     """, visible=False)
 
-    # REACTIVE LOGIC TRIGGERS & Callbacks
-    
-    # 1. Search, filter & simulate empty state on shelf
+    # REACTIVE LOGIC
+
+    # 1. Search / filter shelf
     def filter_books_shelf(query, category, empty_mode_active, current_books):
         if empty_mode_active:
-            # Render special formatted zero-state visual
             return generate_library_html(current_books, empty_mode=True)
         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)
 
-    # 2. Extract vocal weights trigger (wizard pipeline progress bar matching)
+    # 2. Book card click → load into player
+    def handle_book_select(title_chosen, current_inventory):
+        if not title_chosen:
+            return [gr.update()] * 9
+        selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
+
+        player_html = f"""
+        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px;">
+            <img src="{selected['cover_url']}" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
+            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; 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: 8px;">Active Narrator: {selected['voice_name']}</span>
+        </div>
+        """
+        total_chunks = len(narrative_subtitles)
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">Chunk 0 / {total_chunks} — ready to play</div>"""
+        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: #94a3b8; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY</span>
+            </div>
+        """
+        audio = selected["audio_path"] or "sample_sounds/willow.wav"
+        return (
+            player_html,
+            gr.Audio(value=audio, visible=True),
+            status_html,
+            chunk_html,
+            gr.Button(visible=True),   # play_btn
+            gr.Button(visible=False),  # pause_btn
+            gr.Button(visible=False),  # ask_btn
+            gr.HTML(visible=False),    # story_finished_panel
+            gr.Textbox(value=selected["synopsis"], visible=True),
+        )
+
+    book_selector.change(
+        handle_book_select,
+        inputs=[book_selector, books_state],
+        outputs=[player_title_info, player_audio_control, player_status_bar, chunk_status,
+                 play_btn, pause_btn, ask_btn, story_finished_panel, m_synopsis]
+    )
+
+    # 3. Extract vocal weights trigger
     def animate_cloning_pipeline(v_name, v_gender, recorder_data, progress=gr.Progress()):
         if not v_name.strip():
             return (
@@ -676,7 +668,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                 gr.Audio(visible=False),
                 gr.Button(visible=False)
             )
-            
+
         progress(0, desc="Extracting speech samples patterns...")
         time.sleep(1.0)
         progress(0.3, desc="Filtering ambient air-con noise frequencies...")
@@ -685,11 +677,10 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         time.sleep(1.5)
         progress(0.9, desc="Validating speech prosody & standard conversational matching...")
         time.sleep(1.0)
-        
+
         preview_text = f"&ldquo;Hello! I have created my brand new clone under '{v_name}'. Ready to narrate any classical story inside your library shelves.&rdquo;"
-        
         avatar = "👩" if v_gender == "Female" else "👨"
-        
+
         cloned_card_html = f"""
         <div style="background: white; border: 1px solid #ebdccb; padding: 24px; border-radius: 16px; margin: 16px 0;">
             <div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
@@ -697,7 +688,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                     {avatar}
                 </div>
                 <div>
-                    <h4 class="serif-header" style="font-size: 16px; margin: 0;">{v_name} <span style="font-size: 9px; background: #f0fdf4; color: #16a34a; padding: 2px 6px; border-radius: 4px; uppercase: text-transform; font-weight:700;">Cloned successfully</span></h4>
+                    <h4 class="serif-header" style="font-size: 16px; margin: 0;">{v_name} <span style="font-size: 9px; background: #f0fdf4; color: #16a34a; padding: 2px 6px; border-radius: 4px; font-weight:700;">Cloned successfully</span></h4>
                     <p style="font-size: 11px; color:#6f6257; margin-top:2px;">Synthesized today • Calibrated for Classical Audiobooks</p>
                 </div>
             </div>
@@ -706,7 +697,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
         </div>
         """
-        
+
         return (
             gr.HTML(visible=False),
             gr.HTML(visible=False),
@@ -714,14 +705,14 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             gr.Audio(visible=True),
             gr.Button(visible=True)
         )
-        
+
     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]
     )
-    
-    # 3. Add successfully cloned voice to inventory
+
+    # 4. Add cloned voice to inventory
     def save_new_cloned_voice(v_name, v_gender, list_voices):
         avatar = "👩" if v_gender == "Female" else "👨"
         new_voice_item = {
@@ -734,95 +725,24 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             "status": "ready"
         }
         updated = [new_voice_item] + list_voices
-        
-        # We also need to map this voice option dynamically into the books dropdown so they can narrate books with it!
         return (
             updated,
             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! Synthesize another one on the left if you'd like.</p></div>"""),
+            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="")
         )
-        
+
     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]
     )
 
-    # 4. Mount audiobook metadata details into player layout
-    def handle_book_mounting(title_chosen, current_inventory):
-        # find book
-        selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
-        
-        player_html_markup = f"""
-        <div style="text-align: center; margin-bottom: 24px;">
-            <img src="{selected['cover_url']}" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
-            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; 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: 8px;">Active Narrator: {selected['voice_name']}</span>
-        </div>
-        """
-        
-        audio = selected["audio_path"] or "sample_sounds/willow.wav"
-        return (
-            player_html_markup,
-            audio,
-            selected["synopsis"],
-            selected["category"],
-            gr.Tabs(selected="player")
-        )
-        
-    mount_play_btn.click(
-        handle_book_mounting,
-        inputs=[book_mount_selector, books_state],
-        outputs=[player_title_info, player_audio_control, m_synopsis, m_category, main_tabs]
-    )
-
-    # 4b. Player-tab story selector (same logic, no tab switch)
-    def handle_player_load(title_chosen, current_inventory):
-        selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
-        player_html_markup = f"""
-        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px;">
-            <img src="{selected['cover_url']}" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
-            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; 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: 8px;">Active Narrator: {selected['voice_name']}</span>
-        </div>
-        """
-        total_chunks = len(narrative_subtitles)
-        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">Chunk 0 / {total_chunks} — ready to play</div>"""
-        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: #94a3b8; display: inline-block;"></span>
-                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY</span>
-            </div>
-        """
-        audio = selected["audio_path"] or "sample_sounds/willow.wav"
-        return (
-            player_html_markup,
-            audio,
-            selected["synopsis"],
-            selected["category"],
-            status_html,
-            chunk_html,
-            gr.Button(visible=True),   # play_btn
-            gr.Button(visible=False),  # pause_btn
-            gr.Button(visible=False),  # ask_btn
-            gr.HTML(visible=False),    # story_finished_panel
-        )
-
-    player_load_btn.click(
-        handle_player_load,
-        inputs=[player_story_selector, books_state],
-        outputs=[player_title_info, player_audio_control, m_synopsis, m_category,
-                 player_status_bar, chunk_status, play_btn, pause_btn, ask_btn, story_finished_panel]
-    )
-
-    # 4c. Play button — transition to PLAYING state
+    # 5. Play button — PLAYING state
     def enter_playing_state(slider_val):
         total_chunks = len(narrative_subtitles)
         chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #4ade80; font-family: monospace; text-align: center;">Chunk {int(slider_val) + 1} / {total_chunks} — streaming</div>"""
@@ -835,9 +755,9 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         return (
             status_html,
             chunk_html,
-            gr.Button(visible=False),  # play_btn hide
-            gr.Button(visible=True),   # pause_btn show
-            gr.Button(visible=True),   # ask_btn show
+            gr.Button(visible=False),
+            gr.Button(visible=True),
+            gr.Button(visible=True),
         )
 
     play_btn.click(
@@ -846,7 +766,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[player_status_bar, chunk_status, play_btn, pause_btn, ask_btn]
     )
 
-    # 4d. Pause button — transition to PAUSED state
+    # 6. Pause button — PAUSED state
     def enter_paused_state(slider_val):
         total_chunks = len(narrative_subtitles)
         chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #f59e0b; font-family: monospace; text-align: center;">Chunk {int(slider_val) + 1} / {total_chunks} — paused</div>"""
@@ -859,8 +779,8 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         return (
             status_html,
             chunk_html,
-            gr.Button(visible=True),   # play_btn show (acts as resume)
-            gr.Button(visible=False),  # pause_btn hide
+            gr.Button(visible=True),
+            gr.Button(visible=False),
         )
 
     pause_btn.click(
@@ -869,24 +789,15 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[player_status_bar, chunk_status, play_btn, pause_btn]
     )
 
-    # 5. Playback timeline slider sync transcript subtitle lyrics
+    # 7. Timeline slider → subtitle sync
     def update_synced_subtitles(percentage_index_choice):
         idx = int(percentage_index_choice)
         txt_excerpt = narrative_subtitles[idx % len(narrative_subtitles)]
-        html_markup = f"""
-        <div class="dialog-synced">
-            &ldquo;{txt_excerpt}&rdquo;
-        </div>
-        """
-        return html_markup
-        
-    timeline_slider.change(
-        update_synced_subtitles,
-        inputs=[timeline_slider],
-        outputs=[synced_subtitle_ticker]
-    )
+        return f"""<div class="dialog-synced" style="margin-top: 16px;">&ldquo;{txt_excerpt}&rdquo;</div>"""
+
+    timeline_slider.change(update_synced_subtitles, inputs=[timeline_slider], outputs=[synced_subtitle_ticker])
 
-    # 6. Ask button — pauses story, reveals Q&A panel
+    # 8. Ask button — PAUSED-ASKING state
     def enter_asking_state():
         status_html = """
             <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
@@ -895,15 +806,15 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
         """
         return (
-            status_html,               # player_status_bar
-            gr.Button(visible=False),  # play_btn hide
-            gr.Button(visible=False),  # pause_btn hide
-            gr.Button(visible=False),  # ask_btn hide
-            gr.Button(visible=True),   # resume_btn show
-            gr.HTML(visible=True),     # qa_panel show
-            gr.Group(visible=True),    # qa_input_group show
-            gr.HTML(visible=False),    # answer_display reset
-            gr.Audio(visible=False),   # answer_audio reset
+            status_html,
+            gr.Button(visible=False),
+            gr.Button(visible=False),
+            gr.Button(visible=False),
+            gr.Button(visible=True),
+            gr.HTML(visible=True),
+            gr.Group(visible=True),
+            gr.HTML(visible=False),
+            gr.Audio(visible=False),
         )
 
     ask_btn.click(
@@ -912,7 +823,7 @@ 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]
     )
 
-    # 7. Submit question — generate mock answer (placeholder for real Qwen call)
+    # 9. Submit question
     def handle_question_submit(question_txt, question_audio_path):
         if not question_txt.strip() and question_audio_path is None:
             answer_html = """
@@ -923,22 +834,19 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             return answer_html, gr.Audio(visible=False)
 
         q_text = question_txt.strip() if question_txt.strip() else "(spoken question)"
-
-        # Placeholder: real Qwen2.5-3B-Instruct call goes here
-        mock_answer = f"That's a great question! The story tells us something very special about that. Keep listening to discover the full answer as the adventure unfolds."
+        mock_answer = "That's a great question! The story tells us something very special about that. Keep listening to discover the full answer as the adventure unfolds."
 
         answer_html = f"""
-            <div style="margin-top: 12px; padding: 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px;">
-                <div style="font-size: 10px; font-weight: 700; text-transform: uppercase; color: #16a34a; margin-bottom: 6px;">Answer in Narrator's Voice</div>
-                <div style="font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #1c1c19; font-size: 13px; line-height: 1.6;">
+            <div style="margin-top: 12px; padding: 16px; background: rgba(240,253,244,0.1); border: 1px solid rgba(187,247,208,0.3); border-radius: 14px;">
+                <div style="font-size: 10px; font-weight: 700; text-transform: uppercase; color: #4ade80; margin-bottom: 6px;">Answer in Narrator's Voice</div>
+                <div style="font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #FAF7F2; font-size: 13px; line-height: 1.6;">
                     &ldquo;{mock_answer}&rdquo;
                 </div>
-                <div style="margin-top: 8px; font-size: 10px; color: #6f6257;">
+                <div style="margin-top: 8px; font-size: 10px; color: #94a3b8;">
                     Q: <em>{q_text}</em>
                 </div>
             </div>
         """
-        # answer_audio will be wired to real TTS output; for now surfaces the preview chime
         return answer_html, gr.Audio(value="sample_sounds/cloned_preview.wav", visible=True)
 
     submit_question_btn.click(
@@ -947,7 +855,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[answer_display, answer_audio]
     )
 
-    # 8. Resume button — restores playing state, hides Q&A panel
+    # 10. Resume button — back to PLAYING
     def enter_resume_state():
         status_html = """
             <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
@@ -956,16 +864,16 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
         """
         return (
-            status_html,               # player_status_bar
-            gr.Button(visible=False),  # play_btn hide
-            gr.Button(visible=True),   # pause_btn show
-            gr.Button(visible=True),   # ask_btn show
-            gr.Button(visible=False),  # resume_btn hide
-            gr.HTML(visible=False),    # qa_panel hide
-            gr.Group(visible=False),   # qa_input_group hide
-            gr.HTML(visible=False),    # answer_display hide
-            gr.Audio(visible=False),   # answer_audio hide
-            gr.Textbox(value=""),      # question_text clear
+            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=""),
         )
 
     resume_btn.click(
@@ -974,37 +882,22 @@ 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]
     )
 
-    # 9. Story-finished trigger — slider reaches end (index 5 = last subtitle)
+    # 11. Story-finished check
     def check_story_finished(slider_val):
         if int(slider_val) >= 5:
             return gr.HTML(visible=True)
         return gr.HTML(visible=False)
 
-    timeline_slider.change(
-        check_story_finished,
-        inputs=[timeline_slider],
-        outputs=[story_finished_panel]
-    )
+    timeline_slider.change(check_story_finished, inputs=[timeline_slider], outputs=[story_finished_panel])
 
-    # 10. Global Sandbox connection error boundary state toggle
+    # 12. Sandbox outage toggle
     def toggle_outage_sandbox(checked):
         if checked:
-            return (
-                gr.HTML(visible=True), # Show error simulated overlay
-                gr.Tabs(visible=False) # Hide whole actual menu tab structure
-            )
+            return gr.HTML(visible=True), gr.Tabs(visible=False)
         else:
-            return (
-                gr.HTML(visible=False), # Hide
-                gr.Tabs(visible=True) # Full tabs display
-            )
-            
-    offline_toggle.change(
-        toggle_outage_sandbox,
-        inputs=[offline_toggle],
-        outputs=[system_error_modal, main_tabs]
-    )
+            return gr.HTML(visible=False), gr.Tabs(visible=True)
+
+    offline_toggle.change(toggle_outage_sandbox, inputs=[offline_toggle], outputs=[system_error_modal, main_tabs])
 
-# Launch parameters configured for standard port and auto binding
 if __name__ == "__main__":
-    demo.queue().launch(allowed_paths=["assets"])
+    demo.queue().launch(allowed_paths=["assets"])