Add Gradio frontend: 5-tab UI with full demo loop screens

- Build complete Gradio UI (Explore, Bookshelf, Clone Voice Studio, Companion Player, Settings)
- Implement Ask/Resume/Finish Q&A flow in Player tab (demo loop steps 4-8)
- Add procedural chime audio generation as audio placeholder
- Wire state callbacks: book mounting, shelf filter, voice cloning pipeline, subtitle sync, error sandbox
- Q&A panel: text + mic input, answer display, answer audio output widget
- Story-finished prompt triggered at timeline end; Resume restores PLAYING state

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

app.py

@@ -0,0 +1,1080 @@
+import os
+import math
+import struct
+import wave
+import gradio as gr
+import time
+
+# Create directories for sample audio files
+os.makedirs("sample_sounds", exist_ok=True)
+
+# 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
+        elif melody_type == "adventure":
+            notes = [196.00, 246.94, 293.63, 329.63, 392.00] # G3, B3, D4, E4, G4
+        else:
+            notes = [220.00, 261.63, 293.66, 329.63, 392.00] # A3, C4, D4, E4, G4
+
+        for i in range(n_samples):
+            # cycle notes based on melody speed
+            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
+            if sample_in_note < 1200: # attack
+                envelope = sample_in_note / 1200
+            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)
+
+# 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)
+
+# Initial dataset of audiobooks
+mock_books = [
+    {
+        "id": "1",
+        "title": "The Enchanted Willow",
+        "author": "Elena S. Thorne",
+        "cover_url": "https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400",
+        "voice_name": "Mom's Voice",
+        "duration": 1200,
+        "elapsed_time": 456,
+        "synopsis": "Deep within the heart of Whispering Woods stands an ancient willow tree, 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 rustling emerald leaves.",
+        "category": "Fantasy",
+        "is_cloned": True,
+        "percentage": 38,
+        "audio_path": "sample_sounds/willow.wav"
+    },
+    {
+        "id": "2",
+        "title": "The Clockwork Sky",
+        "author": "Arthur Pendelton",
+        "cover_url": "https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&q=80&w=400",
+        "voice_name": "Folk Storyteller",
+        "duration": 1800,
+        "elapsed_time": 0,
+        "synopsis": "In a world where the heavens are driven by complex brass gears and clockwork stars, a young apprentice discovers an unaccounted gear grinding in the midnight sky—a secret that the High Astrologers have hidden for a millennium.",
+        "category": "Sci-Fi & Steampunk",
+        "is_cloned": False,
+        "percentage": 0,
+        "audio_path": "sample_sounds/sky.wav"
+    },
+    {
+        "id": "3",
+        "title": "Echoes of the Deep",
+        "author": "Mariana Vance",
+        "cover_url": "https://images.unsplash.com/photo-1476275466078-4007374efbbe?auto=format&fit=crop&q=80&w=400",
+        "voice_name": "Grandpa Joseph",
+        "duration": 2400,
+        "elapsed_time": 1200,
+        "synopsis": "A quiet oceanographer working in a remote marine sanctuary begins to trace an unusual, rhythmic hum coming from the Marianas Trench. The signal grows stronger, mimicking a lullaby his grandfather used to whistle.",
+        "category": "Adventure",
+        "is_cloned": True,
+        "percentage": 50,
+        "audio_path": "sample_sounds/deep.wav"
+    },
+    {
+        "id": "4",
+        "title": "The Midnight Baker",
+        "author": "Clara Dupont",
+        "cover_url": "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?auto=format&fit=crop&q=80&w=400",
+        "voice_name": "Mom's Voice",
+        "duration": 980,
+        "elapsed_time": 980,
+        "synopsis": "Every night at midnight, Clara bakes bread that infuses the sleeping town with warmth. Customers don’t buy her pastries to satisfy hunger; they eat them to relive the comforting memories of childhood summers.",
+        "category": "Slice of Life",
+        "is_cloned": True,
+        "percentage": 100,
+        "audio_path": "sample_sounds/baker.wav"
+    },
+    {
+        "id": "5",
+        "title": "Letters from Paris",
+        "author": "Julian Mercer",
+        "cover_url": "https://images.unsplash.com/photo-1492052722242-2554d0e99e3a?auto=format&fit=crop&q=80&w=400",
+        "voice_name": "Grandpa Joseph",
+        "duration": 1560,
+        "elapsed_time": 0,
+        "synopsis": "A bundle of yellowed, ribbon-bound letters hidden inside an attic chest on Rue de l’Odeon unravels a heartbreaking secret of courage and hidden artwork dating back to the winter of 1944.",
+        "category": "Historical Fiction",
+        "is_cloned": True,
+        "percentage": 0,
+        "audio_path": "sample_sounds/letters.wav"
+    }
+]
+
+mock_voices = [
+    {
+        "id": "v1",
+        "name": "Mom's Voice",
+        "avatar_url": "👩‍🦳",
+        "description": "Warm, soft, with a natural soothing cadence. Best for bedtime stories.",
+        "gender": "Female",
+        "created_date": "2026-06-01",
+        "status": "ready"
+    },
+    {
+        "id": "v2",
+        "name": "Grandpa Joseph",
+        "avatar_url": "👴",
+        "description": "Deep, resonant, with an occasional comforting chuckle. Perfect for classic adventure stories.",
+        "gender": "Male",
+        "created_date": "2026-06-03",
+        "status": "ready"
+    },
+    {
+        "id": "v3",
+        "name": "Aunt Sarah",
+        "avatar_url": "👩",
+        "description": "Bubbly, expressive, brilliant at acting out funny character voices.",
+        "gender": "Female",
+        "created_date": "2026-06-06",
+        "status": "processing"
+    }
+]
+
+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."
+]
+
+css_code = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
+/* Main layouts and colors matching VoiceBook cream and amber theme */
+body, .gradio-container {
+    background-color: #FAF7F2 !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+}
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+}
+/* Serif headers */
+.serif-header {
+    font-family: 'Playfair Display', Georgia, serif !important;
+    color: #1c1c19 !important;
+    font-weight: 700 !important;
+}
+.cream-bg {
+    background-color: #FAF7F2 !important;
+}
+.card-container {
+    background-color: #f6f3ee !important;
+    border: 1px solid #ebdccb !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 2px 8px rgba(148, 74, 0, 0.03) !important;
+}
+.accent-border {
+    border-color: #ddc1b0 !important;
+}
+.highlight-orange {
+    color: #f5841f !important;
+}
+.highlight-amber {
+    color: #944a00 !important;
+}
+.dark-card-container {
+    background-color: #122116 !important;
+    color: #FAF7F2 !important;
+    border: 1px solid #1e3422 !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+}
+/* Customized HTML grids matching identical React typography */
+.hero-spotlight {
+    background: linear-gradient(135deg, #1e3422 0%, #121f15 100%) !important;
+    color: #FFFFFF !important;
+    border-radius: 24px !important;
+    padding: 32px !important;
+    position: relative;
+    overflow: hidden;
+}
+.badge-featured {
+    background: rgba(245, 132, 31, 0.2);
+    color: #f5841f;
+    border: 1px solid rgba(245, 132, 31, 0.3);
+    border-radius: 9999px;
+    padding: 4px 10px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    display: inline-block;
+}
+.book-shelf-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+}
+.shelf-card {
+    background: #f6f3ee;
+    border: 1px solid #eadacc;
+    border-radius: 16px;
+    padding: 16px;
+    display: flex;
+    gap: 16px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.shelf-card:hover {
+    border-color: #f5841f;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(148, 74, 0, 0.06);
+}
+.cover-image {
+    width: 80px;
+    height: 110px;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+.progress-bar-bg {
+    width: 100%;
+    height: 6px;
+    background: #ebdccb;
+    border-radius: 999px;
+    overflow: hidden;
+}
+.progress-bar-fill {
+    height: 100%;
+    background: #f5841f;
+}
+/* Pulsing rings for microphone recording */
+@keyframes pulse-ring {
+  0% { transform: scale(0.85); opacity: 0.6; }
+  50% { transform: scale(1.15); opacity: 0.25; }
+  100% { transform: scale(1.4); opacity: 0; }
+}
+.pulse-circle {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: #944a00;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.recording-active {
+    background: #ef4444 !important;
+}
+/* Subtitle dialog ticker */
+.dialog-synced {
+    background: rgba(0,0,0,0.15);
+    border: 1px solid rgba(255,166,0,0.1);
+    color: #ffd3a6;
+    font-family: 'Playfair Display', Georgia, serif;
+    font-size: 1.25rem;
+    font-style: italic;
+    padding: 24px;
+    border-radius: 16px;
+    text-align: center;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+/* Tab button custom styles */
+.tabs .tab-nav button {
+    border-bottom: 2px solid transparent !important;
+}
+.tabs .tab-nav button.selected {
+    color: #944a00 !important;
+    border-bottom-color: #944a00 !important;
+    font-weight: 700 !important;
+}
+"""
+
+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;">
+            <img src="{featured['cover_url']}" style="width: 180px; height: 260px; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); transform: rotate(-2deg);" referrerPolicy="no-referrer" />
+        </div>
+        <div style="flex: 2; min-width: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;">
+            <div>
+                <span class="badge-featured" style="margin-bottom: 8px;">Featured Clone</span>
+                <h3 class="serif-header" style="color: white !important; font-size: 28px; margin: 4px 0;">{featured['title']}</h3>
+                <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>
+                <span style="background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 8px;">⭐ Editorial Spotlight</span>
+            </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">
+            <div>
+                <img src="{bk['cover_url']}" class="cover-image" referrerPolicy="no-referrer" />
+            </div>
+            <div style="display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0;">
+                <div>
+                    <div style="display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: #f5841f;">
+                        <span>{bk['category']}</span>
+                        <span>{bk['percentage']}%</span>
+                    </div>
+                    <h5 class="serif-header" style="font-size: 14px; margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{bk['title']}</h5>
+                    <p style="font-size: 11.5px; color: #6f6257; margin-bottom: 8px;">by {bk['author']}</p>
+                </div>
+                <div>
+                    <div class="progress-bar-bg" style="margin-bottom: 6px;">
+                        <div class="progress-bar-fill" style="width: {bk['percentage']}%"></div>
+                    </div>
+                    <div style="display: flex; justify-content: space-between; font-size: 11px; color: #6f6257;">
+                        <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">🎙️ {bk['voice_name']}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        """
+        
+    html += """
+        </div>
+    </div>
+    """
+    return html
+
+
+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;">
+                <span style="font-size: 32px;">📚</span>
+                <span style="position: absolute; font-size: 20px; bottom: -4px; right: -4px;">🎙️</span>
+            </div>
+            <h3 class="serif-header" style="font-size: 22px; margin-bottom: 8px;">Your Bookshelf is Waiting to be Voiced</h3>
+            <p style="font-size: 13.5px; color: #6f6257; line-height: 1.5; margin-bottom: 24px;">
+                Choose a comforting companion, clone their warm voice, and hear any classical or modern tale come to life immediately.
+            </p>
+            <div style="display: flex; gap: 12px; width: 100%;">
+                <span style="flex: 1; padding: 12px; background: #944a00; color: white; border-radius: 12px; font-weight: 700; font-size: 13px;">Use 'Clone Voice' tab to craft a companion</span>
+            </div>
+        </div>
+        """
+
+    filtered = []
+    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)
+
+    if len(filtered) == 0:
+        return """
+        <div style="text-align: center; padding: 48px; border: 1px dashed #ebdccb; border-radius: 16px;">
+            <span style="font-size: 28px;">🔍</span>
+            <p style="font-size: 14px; color: #6f6257; margin-top: 8px;">No audiobooks match your search criteria.</p>
+        </div>
+        """
+
+    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 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;">
+                    {bk['percentage']}%
+                </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>
+                </div>
+            </div>
+            <div style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
+                <div style="display: flex; justify-content: space-between; font-size: 11px; align-items: center;">
+                    <span style="color: #6f6257;">Narrator:</span>
+                    <span style="font-weight: 600; color: #944a00;">🌟 {bk['voice_name']}</span>
+                </div>
+                <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>
+            </div>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+def render_cloned_voices_html(voices_list):
+    html = """<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"
+        
+        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;">
+                {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>
+                    <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; line-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;">
+                    <span>Gender: {v['gender']}</span>
+                    <span>Created: {v['created_date']}</span>
+                </div>
+            </div>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+
+# 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;">
+            <div style="width: 42px; height: 42px; background-color: #944a00; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 20px;">
+                💿
+            </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>
+            </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6f6257; font-family: monospace;">
+            <span>Hugging Face Space Node:</span>
+            <span style="color: #16a34a; font-weight: 700;">● Active</span>
+        </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:
+            with gr.Row():
+                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=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="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>
+                    """)
+                    
+                    player_title_info = gr.HTML("""
+                        <div style="text-align: center; margin-bottom: 24px;">
+                            <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400" 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;">The Enchanted Willow</h3>
+                            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by Elena S. Thorne</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>
+                        </div>
+                    """)
+                    
+                    player_audio_control = gr.Audio(visible=True, interactive=False, label="VoiceBook Audiobook Audio Stream Channel", value="sample_sounds/willow.wav", autoplay=False)
+
+                    gr.HTML("""
+                        <div style="margin-top: 16px; background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 12px; text-align: center; font-size: 11px; color:#cbd5e1;">
+                            💡 <b>Standard Player Controls:</b> Click the standard play trigger on the audio player block above to listen to custom generated pitch chimes.
+                        </div>
+                    """)
+
+                    # Ask / Resume / Finish controls
+                    player_status_bar = gr.HTML("""
+                        <div style="margin-top: 16px; 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: #94a3b8; font-family: monospace;">PLAYING</span>
+                        </div>
+                    """)
+
+                    with gr.Row():
+                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2)
+                        resume_btn = gr.Button("▶️ Resume Story", variant="secondary", scale=2, visible=False)
+
+                    # Story-finished prompt (hidden until playback ends)
+                    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;">Head to <b>My Bookshelf</b> to pick another adventure.</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_ticker = gr.HTML("""
+                        <div class="dialog-synced">
+                            &ldquo;Deep within the heart of Whispering Woods stands an ancient willow tree...&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")
+
+                    # --- Q&A Panel (hidden while playing, shown after Ask) ---
+                    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>
+                    """, 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
+                        )
+                        question_audio = gr.Audio(
+                            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
+                    )
+
+        # TAB 5: Profile & Connection Sandbox
+        with gr.TabItem("⚙️ Profile & Sandbox Settings") as profile_tab:
+            with gr.Row():
+                with gr.Column(scale=1, elem_classes="card-container"):
+                    gr.HTML("""
+                        <div style="text-align: center; margin-bottom: 24px;">
+                            <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>
+                        </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;">
+                                <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>
+                            </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>
+                            </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>
+                            </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>
+                    """)
+                    
+                    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>
+                        </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")
+
+    # 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;">
+            ⚠️
+        </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 TRIGGERS & Callbacks
+    
+    # 1. Search, filter & simulate empty state on 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)
+    def animate_cloning_pipeline(v_name, v_gender, recorder_data, progress=gr.Progress()):
+        if not v_name.strip():
+            return (
+                """<div style="padding: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 12px; font-size: 12px; font-weight: 600;">
+                    ⚠️ 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)
+            )
+        if recorder_data is None:
+            return (
+                """<div style="padding: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 12px; font-size: 12px; font-weight: 600;">
+                    ⚠�� 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)
+            )
+            
+        progress(0, desc="Extracting speech samples patterns...")
+        time.sleep(1.0)
+        progress(0.3, desc="Filtering ambient air-con noise frequencies...")
+        time.sleep(1.2)
+        progress(0.65, desc="Mapping vocal vocal tracts formant spaces & frequencies...")
+        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;">
+                <div style="width: 48px; height: 48px; border-radius: 50%; background: #944a00; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px;">
+                    {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>
+                    <p style="font-size: 11px; color:#6f6257; margin-top:2px;">Synthesized today • Calibrated for Classical Audiobooks</p>
+                </div>
+            </div>
+            <div style="background:#FAF7F2; border-left: 3px solid #f5841f; padding: 10px; font-family: Georgia, serif; font-style: italic; font-size: 12px; color: #1c1c19;">
+                {preview_text}
+            </div>
+        </div>
+        """
+        
+        return (
+            gr.HTML(visible=False),
+            gr.HTML(visible=False),
+            gr.HTML(value=cloned_card_html, visible=True),
+            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
+    def save_new_cloned_voice(v_name, v_gender, list_voices):
+        avatar = "👩" if v_gender == "Female" else "👨"
+        new_voice_item = {
+            "id": f"v-{time.time()}",
+            "name": v_name,
+            "avatar_url": avatar,
+            "description": f"Custom cloned {v_gender.lower()} companion voice. Highly optimized.",
+            "gender": v_gender,
+            "created_date": "2026-06-06",
+            "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=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>
+        """
+        
+        # update player tabs active
+        return (
+            player_html_markup,
+            selected["audio_path"],
+            selected["synopsis"],
+            selected["category"],
+            gr.Tabs(selected="player") # Select player tab
+        )
+        
+    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]
+    )
+
+    # 5. Playback timeline slider sync transcript subtitle lyrics
+    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]
+    )
+
+    # 6. Ask button — pauses story, reveals Q&A panel
+    def enter_asking_state():
+        status_html = """
+            <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; animation: pulse 1s infinite;"></span>
+                <span style="font-size: 11px; color: #f59e0b; font-family: monospace;">PAUSED — ASKING</span>
+            </div>
+        """
+        return (
+            status_html,               # player_status_bar
+            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
+        )
+
+    ask_btn.click(
+        enter_asking_state,
+        inputs=[],
+        outputs=[player_status_bar, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio]
+    )
+
+    # 7. Submit question — generate mock answer (placeholder for real Qwen call)
+    def handle_question_submit(question_txt, question_audio_path):
+        if not question_txt.strip() and question_audio_path is None:
+            answer_html = """
+                <div style="padding: 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; font-size: 12px; color: #991b1b;">
+                    ⚠️ Please type a question or record one with the microphone.
+                </div>
+            """
+            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."
+
+        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;">
+                    &ldquo;{mock_answer}&rdquo;
+                </div>
+                <div style="margin-top: 8px; font-size: 10px; color: #6f6257;">
+                    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(
+        handle_question_submit,
+        inputs=[question_text, question_audio],
+        outputs=[answer_display, answer_audio]
+    )
+
+    # 8. Resume button — restores playing state, hides Q&A panel
+    def enter_resume_state():
+        status_html = """
+            <div style="margin-top: 16px; 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: #94a3b8; font-family: monospace;">PLAYING</span>
+            </div>
+        """
+        return (
+            status_html,               # player_status_bar
+            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
+        )
+
+    resume_btn.click(
+        enter_resume_state,
+        inputs=[],
+        outputs=[player_status_bar, 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)
+    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]
+    )
+
+    # 10. Global Sandbox connection error boundary state 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
+            )
+        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]
+    )
+
+# Launch parameters configured for standard port and auto binding
+if __name__ == "__main__":
+    demo.queue().launch()