provenance

app.py

@@ -5,7 +5,7 @@ import gradio as gr
 import pymupdf4llm
 from pipeline import run_livestream_pipeline, extract_youtube_video_id, DEFAULT_HF_TOKEN
 
-def load_template_with_data(video_id: str, chat_data: list) -> str:
+def load_template_with_data(video_id: str, chat_data: list, selection: str) -> str:
     template_path = os.path.join(os.path.dirname(__file__), "theater_template.html")
     with open(template_path, "r", encoding="utf-8") as f:
         template = f.read()
@@ -14,12 +14,15 @@ def load_template_with_data(video_id: str, chat_data: list) -> str:
     inner_html = template.replace("{{VIDEO_ID}}", video_id)
     inner_html = inner_html.replace("{{CHAT_DATA_JSON}}", json.dumps(chat_data, ensure_ascii=False))
     
+    provenance_html = get_provenance_html(selection)
+    inner_html = inner_html.replace("{{PROVENANCE_HTML}}", provenance_html)
+    
     # Escape HTML to be safely embedded inside srcdoc attribute of an iframe
     escaped_inner_html = html.escape(inner_html)
     
     # Wrap in iframe to ensure scripts execute correctly in Gradio 6+ without innerHTML restrictions
     iframe_code = (
-        f'<iframe srcdoc="{escaped_inner_html}" style="width: 100%; height: 620px; '
+        f'<iframe srcdoc="{escaped_inner_html}" style="width: 100%; height: 650px; '
         f'border: none; border-radius: 12px; background-color: #0b0c10; box-shadow: 0 4px 12px rgba(0,0,0,0.45);"></iframe>'
     )
     return iframe_code
@@ -31,7 +34,7 @@ def get_demo_html() -> str:
             chat_data = json.load(f)
     else:
         chat_data = []
-    return load_template_with_data("xLljoibgUvk", chat_data)
+    return load_template_with_data("xLljoibgUvk", chat_data, "Steve Jobs 1983 Speech (Demo)")
 
 def get_demo_2_html() -> str:
     demo_json_path = os.path.join(os.path.dirname(__file__), "sample", "demo_chat_2.json")
@@ -40,7 +43,7 @@ def get_demo_2_html() -> str:
             chat_data = json.load(f)
     else:
         chat_data = []
-    return load_template_with_data("NtRf4icqE7o", chat_data)
+    return load_template_with_data("NtRf4icqE7o", chat_data, "Carl Sagan Demon-Haunted World (Demo)")
 
 def get_demo_3_html() -> str:
     demo_json_path = os.path.join(os.path.dirname(__file__), "sample", "demo_chat_3.json")
@@ -49,7 +52,7 @@ def get_demo_3_html() -> str:
             chat_data = json.load(f)
     else:
         chat_data = []
-    return load_template_with_data("g6eQMrA1_-I", chat_data)
+    return load_template_with_data("g6eQMrA1_-I", chat_data, "Edward Teller - Schrödinger's Cat (Demo)")
 
 def get_demo_4_html() -> str:
     demo_json_path = os.path.join(os.path.dirname(__file__), "sample", "demo_chat_4.json")
@@ -58,7 +61,7 @@ def get_demo_4_html() -> str:
             chat_data = json.load(f)
     else:
         chat_data = []
-    return load_template_with_data("hJP5GqnTrNo", chat_data)
+    return load_template_with_data("hJP5GqnTrNo", chat_data, "Sal Khan - Khanmigo AI Tutor (Demo)")
 
 # Global store for custom simulations
 custom_simulation_store = {
@@ -97,10 +100,8 @@ def get_provenance_html(selection: str) -> str:
     if selection in apa_citations:
         citation = apa_citations[selection]
         return (
-            f"<div style='margin-top: 16px; padding: 14px 18px; background-color: #161a23; "
-            f"border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; font-family: sans-serif; "
-            f"color: #94a1b2; font-size: 0.9rem; line-height: 1.5;'>"
-            f"<span style='color: #fffffe; font-weight: 600; display: block; margin-bottom: 4px;'>📄 Provenance</span>"
+            f"<div class='provenance-container'>"
+            f"<span class='provenance-title'>📄 Provenance</span>"
             f"Comments generated using AI from published works: {citation}"
             f"</div>"
         )
@@ -115,10 +116,8 @@ def get_provenance_html(selection: str) -> str:
 
         if source_info:
             return (
-                f"<div style='margin-top: 16px; padding: 14px 18px; background-color: #161a23; "
-                f"border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; font-family: sans-serif; "
-                f"color: #94a1b2; font-size: 0.9rem; line-height: 1.5;'>"
-                f"<span style='color: #fffffe; font-weight: 600; display: block; margin-bottom: 4px;'>📄 Provenance</span>"
+                f"<div class='provenance-container'>"
+                f"<span class='provenance-title'>📄 Provenance</span>"
                 f"Comments generated using AI from {source_info}."
                 f"</div>"
             )
@@ -126,23 +125,21 @@ def get_provenance_html(selection: str) -> str:
     return ""
 
 
-def play_simulation_selection(selection: str) -> tuple[str, str]:
-    provenance_html = get_provenance_html(selection)
+def play_simulation_selection(selection: str) -> str:
     if selection == "Steve Jobs 1983 Speech (Demo)":
-        return get_demo_html(), provenance_html
+        return get_demo_html()
     elif selection == "Carl Sagan Demon-Haunted World (Demo)":
-        return get_demo_2_html(), provenance_html
+        return get_demo_2_html()
     elif selection == "Edward Teller - Schrödinger's Cat (Demo)":
-        return get_demo_3_html(), provenance_html
+        return get_demo_3_html()
     elif selection == "Sal Khan - Khanmigo AI Tutor (Demo)":
-        return get_demo_4_html(), provenance_html
+        return get_demo_4_html()
     elif selection == "My Custom Simulation":
         if custom_simulation_store["video_id"] and custom_simulation_store["chat_data"]:
-            player_html = load_template_with_data(custom_simulation_store["video_id"], custom_simulation_store["chat_data"])
+            return load_template_with_data(custom_simulation_store["video_id"], custom_simulation_store["chat_data"], selection)
         else:
-            player_html = "<div style='color:#ff0055; text-align:center; padding:50px; font-family:sans-serif;'>No custom simulation has been generated yet. Please choose 'Configure Custom Solution'.</div>"
-        return player_html, provenance_html
-    return "", ""
+            return "<div style='color:#ff0055; text-align:center; padding:50px; font-family:sans-serif;'>No custom simulation has been generated yet. Please choose 'Configure Custom Solution'.</div>"
+    return ""
 
 
 def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_token: str, use_ocr: bool = False):
@@ -150,7 +147,6 @@ def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_to
     video_id = extract_youtube_video_id(yt_url)
     if not video_id:
         return (
-            gr.update(),
             gr.update(),
             "### ❌ Error\nInvalid YouTube URL. Please provide a valid YouTube link or 11-character Video ID.",
             gr.update()
@@ -169,7 +165,6 @@ def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_to
         has_pasted_text = True
     else:
         return (
-            gr.update(),
             gr.update(),
             "### ❌ Error\nPlease upload a PDF/text file or paste some reference document text.",
             gr.update()
@@ -179,7 +174,6 @@ def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_to
     manual_transcript = srt_text.strip() if srt_text.strip() else None
     if not manual_transcript:
         return (
-            gr.update(),
             gr.update(),
             "### ❌ Error\nPlease paste the timestamped video transcript. (Auto-fetching is disabled due to server IP blocks).",
             gr.update()
@@ -219,12 +213,10 @@ def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_to
         )
         
         # Create updated HTML player
-        new_html = load_template_with_data(video_id, chat_data)
-        provenance_html = get_provenance_html("My Custom Simulation")
+        new_html = load_template_with_data(video_id, chat_data, "My Custom Simulation")
         
         return (
             new_html,
-            provenance_html,
             success_msg,
             gr.update(choices=["Steve Jobs 1983 Speech (Demo)", "Carl Sagan Demon-Haunted World (Demo)", "Edward Teller - Schrödinger's Cat (Demo)", "Sal Khan - Khanmigo AI Tutor (Demo)", "My Custom Simulation"], value="My Custom Simulation")
         )
@@ -237,13 +229,13 @@ def handle_generation(yt_url: str, pdf_file, doc_text: str, srt_text: str, hf_to
                 "document or a different video."
             )
         return (
-            gr.update(),
             gr.update(),
             error_msg,
             gr.update()
         )
 
 
+
 # Gradio Theme
 custom_theme = gr.themes.Default(
     primary_hue="purple",
@@ -365,14 +357,11 @@ with gr.Blocks(title="ReadStream") as demo:
             # The player frame
             player_frame = gr.HTML(value=get_demo_html())
             
-            # The provenance/citation frame
-            provenance_frame = gr.HTML(value=get_provenance_html("Steve Jobs 1983 Speech (Demo)"))
-            
             # Trigger updates when selection changes
             sim_selector.change(
                 fn=play_simulation_selection,
                 inputs=[sim_selector],
-                outputs=[player_frame, provenance_frame]
+                outputs=[player_frame]
             )
             
         # Tab 2: Generator Config
@@ -437,7 +426,6 @@ with gr.Blocks(title="ReadStream") as demo:
                 ],
                 outputs=[
                     player_frame,
-                    provenance_frame,
                     status_output,
                     sim_selector
                 ]

sample/demo_chat_33.json

@@ -0,0 +1,472 @@
+[
+  {
+    "id": "m7",
+    "username": "PhysicsNerd",
+    "text": "Whoa, Teller himself—the father of the H‑bomb.",
+    "anchor_id": "anc_0",
+    "displayTime": 1.7044073470653067
+  },
+  {
+    "id": "m5",
+    "username": "HistoryBuff",
+    "text": "Web of Stories uploads are pure gold.",
+    "anchor_id": "anc_0",
+    "displayTime": 1.7560328159750458
+  },
+  {
+    "id": "m1",
+    "username": "StreamStart",
+    "text": "Hey all! Just getting settled.",
+    "anchor_id": "anc_0",
+    "displayTime": 1.8508130510712666
+  },
+  {
+    "id": "m9",
+    "username": "NewViewer",
+    "text": "First time catching this live—excited!",
+    "anchor_id": "anc_0",
+    "displayTime": 5.426041785860398
+  },
+  {
+    "id": "m2",
+    "username": "QuantumFan",
+    "text": "Is that Edward Teller? Title says so!",
+    "anchor_id": "anc_0",
+    "displayTime": 7.287732397946086
+  },
+  {
+    "id": "m6",
+    "username": "JustJoining",
+    "text": "Checking in—let's roll!",
+    "anchor_id": "anc_1",
+    "displayTime": 11.560509043329397
+  },
+  {
+    "id": "m8",
+    "username": "CasualVibe",
+    "text": "Here for the vibes + science.",
+    "anchor_id": "anc_1",
+    "displayTime": 12.18646232115536
+  },
+  {
+    "id": "m4",
+    "username": "AudioCheck",
+    "text": "Audio's a bit low, can anyone hear?",
+    "anchor_id": "anc_1",
+    "displayTime": 14.393131422360284
+  },
+  {
+    "id": "m10",
+    "username": "Bot01",
+    "text": "Stream started at 0s.",
+    "anchor_id": "anc_1",
+    "displayTime": 14.670082545828391
+  },
+  {
+    "id": "m3",
+    "username": "ChatNormie",
+    "text": "What are we watching today? 🤔",
+    "anchor_id": "anc_1",
+    "displayTime": 16.30379060401677
+  },
+  {
+    "id": "m12",
+    "username": "SkepticSam",
+    "text": "Probabilities are the only certainty, lol 😂",
+    "anchor_id": "anc_2",
+    "displayTime": 36.45109351519112
+  },
+  {
+    "id": "m11",
+    "username": "ParticleMan",
+    "text": "So we can only predict probabilities? Classic QM vibes 🤔",
+    "anchor_id": "anc_2",
+    "displayTime": 37.0899897925436
+  },
+  {
+    "id": "m18",
+    "username": "Student101",
+    "text": "Wait, weren’t we told the future’s unknowable? 🤯",
+    "anchor_id": "anc_2",
+    "displayTime": 37.33139184788705
+  },
+  {
+    "id": "m17",
+    "username": "HeisenbergFan",
+    "text": "Heisenberg strikes again! 😎",
+    "anchor_id": "anc_2",
+    "displayTime": 37.40101850077151
+  },
+  {
+    "id": "m14",
+    "username": "CuriousMind",
+    "text": "Where's the particle headed? That's the million‑dollar question 🤷",
+    "anchor_id": "anc_3",
+    "displayTime": 53.25153527417958
+  },
+  {
+    "id": "m13",
+    "username": "ScienceTeacher",
+    "text": "He’s nailing the basics of position here! 👍",
+    "anchor_id": "anc_3",
+    "displayTime": 57.776361860010795
+  },
+  {
+    "id": "m15",
+    "username": "MemeLord",
+    "text": "Did he just say 'place' AND 'position'? Redundant much? 🤔",
+    "anchor_id": "anc_4",
+    "displayTime": 62.56361385264804
+  },
+  {
+    "id": "m16",
+    "username": "WaveFunction",
+    "text": "We need to know both where it is AND where it’s going! 🔍",
+    "anchor_id": "anc_4",
+    "displayTime": 65.98394598622109
+  },
+  {
+    "id": "m23",
+    "username": "DeepThinker",
+    "text": "Formalism of front mechanisms? 🤔 That's new to me.",
+    "anchor_id": "anc_5",
+    "displayTime": 73.60726208836788
+  },
+  {
+    "id": "m21",
+    "username": "PhysicsGeek",
+    "text": "Here comes the Uncertainty Principle! 🔬",
+    "anchor_id": "anc_6",
+    "displayTime": 81.14965317486786
+  },
+  {
+    "id": "m27",
+    "username": "ObserverEffect",
+    "text": "All about the wave behavior, folks.",
+    "anchor_id": "anc_6",
+    "displayTime": 81.40064237332483
+  },
+  {
+    "id": "m25",
+    "username": "WaveWatcher",
+    "text": "Wave‑particle duality strikes! ⚡",
+    "anchor_id": "anc_6",
+    "displayTime": 83.05429321499436
+  },
+  {
+    "id": "m26",
+    "username": "MathNerd",
+    "text": "Momentum & position? Pick one, please!",
+    "anchor_id": "anc_7",
+    "displayTime": 89.12294537206856
+  },
+  {
+    "id": "m22",
+    "username": "MomentumMover",
+    "text": "You can't know both at once—classic!",
+    "anchor_id": "anc_7",
+    "displayTime": 89.35757327197463
+  },
+  {
+    "id": "m28",
+    "username": "TheoryCrafter",
+    "text": "The idea hasn't been generally accepted? By whom?",
+    "anchor_id": "anc_8",
+    "displayTime": 95.28519694025123
+  },
+  {
+    "id": "m24",
+    "username": "ConfusedViewer",
+    "text": "Please explain in detail, I get confused easily 😅",
+    "anchor_id": "anc_8",
+    "displayTime": 96.78080347453259
+  },
+  {
+    "id": "m31",
+    "username": "EinsteinLover",
+    "text": "Einstein was never happy—God doesn’t play dice. 🤔",
+    "anchor_id": "anc_9",
+    "displayTime": 108.7847471511717
+  },
+  {
+    "id": "m35",
+    "username": "QuantumCat",
+    "text": "Einstein loathed that QM piece.",
+    "anchor_id": "anc_9",
+    "displayTime": 110.86567959369393
+  },
+  {
+    "id": "m38",
+    "username": "ScienceFan",
+    "text": "Vigdan? Definitely Wigner. :)",
+    "anchor_id": "anc_10",
+    "displayTime": 117.6248017653613
+  },
+  {
+    "id": "m36",
+    "username": "HistorianBuff",
+    "text": "Teller surrounded himself with great minds.",
+    "anchor_id": "anc_10",
+    "displayTime": 118.83227697903055
+  },
+  {
+    "id": "m32",
+    "username": "HungarianHistory",
+    "text": "Hungarian friends? You mean Wigner?",
+    "anchor_id": "anc_10",
+    "displayTime": 119.27222982289787
+  },
+  {
+    "id": "m33",
+    "username": "Objector",
+    "text": "The objection usually targets the observer, right?",
+    "anchor_id": "anc_11",
+    "displayTime": 126.74444970089813
+  },
+  {
+    "id": "m37",
+    "username": "SkepticalEye",
+    "text": "Is the observer really the culprit? 🤔",
+    "anchor_id": "anc_12",
+    "displayTime": 133.8760741718684
+  },
+  {
+    "id": "m34",
+    "username": "PhD_Student",
+    "text": "Observer disturbance = the key. 🔬",
+    "anchor_id": "anc_12",
+    "displayTime": 137.67091362080828
+  },
+  {
+    "id": "m42",
+    "username": "TranscriptPolice",
+    "text": "Is 'Viklav' actually Wigner? Audio’s a mess.",
+    "anchor_id": "anc_14",
+    "displayTime": 154.06959799738488
+  },
+  {
+    "id": "m47",
+    "username": "MetaPhysicist",
+    "text": "If I don’t know myself, can I even be an observer? 🤯",
+    "anchor_id": "anc_15",
+    "displayTime": 160.04850612940567
+  },
+  {
+    "id": "m49",
+    "username": "AudioFixer",
+    "text": "Yep, definitely Wigner. 👍",
+    "anchor_id": "anc_14",
+    "reply_to": "m42",
+    "displayTime": 161.13860733944296
+  },
+  {
+    "id": "m41",
+    "username": "PhilosopherKing",
+    "text": "What even is an observer? 🤔 Deep.",
+    "anchor_id": "anc_15",
+    "displayTime": 162.11222951445424
+  },
+  {
+    "id": "m44",
+    "username": "GossipGirl",
+    "text": "Tea time: gossip on Eugene Wigner 😂",
+    "anchor_id": "anc_16",
+    "displayTime": 176.259440186899
+  },
+  {
+    "id": "m45",
+    "username": "DeepThought",
+    "text": "Sharp objection incoming… brace yourselves.",
+    "anchor_id": "anc_18",
+    "displayTime": 197.88219601893857
+  },
+  {
+    "id": "m46",
+    "username": "CatLover99",
+    "text": "Everyone knows the cat 😼",
+    "anchor_id": "anc_20",
+    "displayTime": 215.4792674271316
+  },
+  {
+    "id": "m43",
+    "username": "SchrodingerFan",
+    "text": "Schrödinger’s cat—finally! 🎉",
+    "anchor_id": "anc_20",
+    "displayTime": 217.0800292542282
+  },
+  {
+    "id": "m48",
+    "username": "ScienceComms",
+    "text": "The cat’s the real star of the show, for sure.",
+    "anchor_id": "anc_20",
+    "displayTime": 217.7914877999608
+  },
+  {
+    "id": "m51",
+    "username": "MadScientist",
+    "text": "Setting the scene! 🎬",
+    "anchor_id": "anc_21",
+    "displayTime": 230.28898388768386
+  },
+  {
+    "id": "m52",
+    "username": "RadioactiveRalph",
+    "text": "Radioactive stuff—dangerous! ☢️",
+    "anchor_id": "anc_22",
+    "displayTime": 237.69146661505562
+  },
+  {
+    "id": "m57",
+    "username": "ParticlePhysicist",
+    "text": "Alpha particles??",
+    "anchor_id": "anc_22",
+    "displayTime": 242.5563821294065
+  },
+  {
+    "id": "m55",
+    "username": "LabRat",
+    "text": "Why close the counter? 🤔",
+    "anchor_id": "anc_23",
+    "displayTime": 250.3788946697037
+  },
+  {
+    "id": "m54",
+    "username": "StatsGuy",
+    "text": "50/50 chance, folks.",
+    "anchor_id": "anc_24",
+    "displayTime": 257.8528758912121
+  },
+  {
+    "id": "m58",
+    "username": "Gambler",
+    "text": "1/2 chance—quantum roulette! 🎲",
+    "anchor_id": "anc_24",
+    "displayTime": 261.07468852972573
+  },
+  {
+    "id": "m56",
+    "username": "AnimalControl",
+    "text": "Aw, poor cat! 😿",
+    "anchor_id": "anc_25",
+    "displayTime": 271.08823857839616
+  },
+  {
+    "id": "m53",
+    "username": "DangerZone",
+    "text": "A nasty poison door? Classic move. 😆",
+    "anchor_id": "anc_25",
+    "displayTime": 272.1478990220569
+  },
+  {
+    "id": "m68",
+    "username": "ProbabilityPro",
+    "text": "Just a probability distro, folks.",
+    "anchor_id": "anc_27",
+    "displayTime": 288.0731226736326
+  },
+  {
+    "id": "m61",
+    "username": "WaveFunctionFan",
+    "text": "The cat's wavefunction, lol 🤔",
+    "anchor_id": "anc_27",
+    "displayTime": 288.5014844760779
+  },
+  {
+    "id": "m62",
+    "username": "DeadOrAlive",
+    "text": "50% alive, 50% dead 😅",
+    "anchor_id": "anc_28",
+    "displayTime": 296.0870052113439
+  },
+  {
+    "id": "m66",
+    "username": "TranscriptChecker",
+    "text": "Big debt half? Probably a transcript slip—means 50%.",
+    "anchor_id": "anc_28",
+    "displayTime": 296.5118867595247
+  },
+  {
+    "id": "m63",
+    "username": "Realist",
+    "text": "Accurate: I have no clue. That's the point.",
+    "anchor_id": "anc_29",
+    "displayTime": 303.04106823107577
+  },
+  {
+    "id": "m65",
+    "username": "ObserverEffect",
+    "text": "Observer = wavefunction collapse 👀",
+    "anchor_id": "anc_29",
+    "displayTime": 306.91754865296963
+  },
+  {
+    "id": "m78",
+    "username": "EndingCredits",
+    "text": "And that wraps up the cat. 🐱",
+    "anchor_id": "anc_30",
+    "displayTime": 312.55215484797293
+  },
+  {
+    "id": "m64",
+    "username": "MagicTrick",
+    "text": "Reviving it? That's not the usual trick.",
+    "anchor_id": "anc_30",
+    "displayTime": 315.884434339336
+  },
+  {
+    "id": "m67",
+    "username": "ColdHearted",
+    "text": "Just kill the cat, end of story 😈",
+    "anchor_id": "anc_30",
+    "displayTime": 318.4129909973275
+  },
+  {
+    "id": "m75",
+    "username": "CritiqueMaster",
+    "text": "Teller's roasting the thought experiment. 🔥",
+    "anchor_id": "anc_31",
+    "displayTime": 322.9903872565834
+  },
+  {
+    "id": "m72",
+    "username": "SkepticalViewer",
+    "text": "He can't believe that was a serious objection. 🤨",
+    "anchor_id": "anc_31",
+    "displayTime": 326.75891442169757
+  },
+  {
+    "id": "m73",
+    "username": "OldSchoolPhysicist",
+    "text": "Age‑old indeed. 🕰️",
+    "anchor_id": "anc_32",
+    "displayTime": 333.34605285350625
+  },
+  {
+    "id": "m74",
+    "username": "BoldStatement",
+    "text": "That's his take? Just ignoring the observer? 🤔",
+    "anchor_id": "anc_33",
+    "displayTime": 343.00763121136214
+  },
+  {
+    "id": "m76",
+    "username": "FinalThought",
+    "text": "I don't need to look… interesting perspective. 🤔",
+    "anchor_id": "anc_33",
+    "displayTime": 343.59067613724466
+  },
+  {
+    "id": "m77",
+    "username": "ScienceHistory",
+    "text": "He really disagrees with Copenhagen here. 🤷‍♂️",
+    "anchor_id": "anc_33",
+    "displayTime": 345.21474456628954
+  },
+  {
+    "id": "m71",
+    "username": "MicDrop",
+    "text": "I don't need to look—mic drop. 🎤",
+    "anchor_id": "anc_33",
+    "displayTime": 345.7304280552546
+  }
+]

theater_template.html

@@ -33,10 +33,10 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
       width: 100%;
       height: 100vh;
-      overflow: hidden;
+      overflow-y: auto;
       padding: 10px;
     }
 
@@ -45,7 +45,7 @@
       grid-template-columns: 1.8fr 1fr;
       width: 100%;
       max-width: 1350px;
-      height: 90vh;
+      height: 480px;
       gap: 16px;
       background: rgba(15, 15, 20, 0.4);
       border-radius: 16px;
@@ -284,6 +284,29 @@
       cursor: not-allowed;
       opacity: 0.6;
     }
+
+    .provenance-container {
+      width: 100%;
+      max-width: 1350px;
+      margin-top: 12px;
+      padding: 10px 14px;
+      background: rgba(22, 26, 35, 0.65);
+      border: 1px solid var(--border-color);
+      border-radius: 10px;
+      font-size: 12px;
+      color: var(--text-muted);
+      line-height: 1.5;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+    }
+    .provenance-title {
+      color: var(--text-color);
+      font-weight: 600;
+      display: block;
+      margin-bottom: 4px;
+      text-transform: uppercase;
+      font-size: 10px;
+      letter-spacing: 0.8px;
+    }
   </style>
 </head>
 <body>
@@ -317,6 +340,8 @@
     </div>
   </div>
 
+  {{PROVENANCE_HTML}}
+
   <script>
     // Embedded Chat Data Placeholder (Replaced by Python script)
     const chatData = {{CHAT_DATA_JSON}};