fix: CSS via gr.Blocks(css=) + serve webagent as static files

Problem 1 - Ticker was empty (CSP blocked inline <style> in gr.HTML()):
- Moved CSS out of gr.HTML() into gr.Blocks(css=...) parameter
- Gradio injects this as a proper stylesheet, bypassing CSP
- Doubled ticker items for seamless infinite scroll loop

Problem 2 - Agent modal showed blank (iframe pointed to localhost:8099):
- Mounted webagent/ directory as FastAPI static files at /webagent/
- Changed iframe src from http://127.0.0.1:8099/index.html -> /webagent/index.html
- Now works on both local and HF Space (same origin)

Keyboard shortcuts:
e = toggle news ticker at top of page
a = open/close browser agent popup modal

app.py

@@ -394,5 +394,17 @@ _ui = _build_ui(
 )
 demo = _ui.build()
 
+# Mount the browser agent as static files at /webagent/ so the 'a' key modal works
+try:
+    import os
+    from pathlib import Path
+    from fastapi.staticfiles import StaticFiles
+
+    _webagent_dir = Path(__file__).parent / "webagent"
+    if _webagent_dir.exists():
+        demo.app.mount("/webagent", StaticFiles(directory=str(_webagent_dir)), name="webagent")
+except Exception:
+    pass
+
 if __name__ == "__main__":
     demo.launch()

hearthnet/ui/app.py

@@ -17,12 +17,8 @@ except ImportError:
     HAS_GRADIO = False
 
 
-# Easter egg ticker CSS (no script - will be injected via Blocks head parameter)
-_EASTER_EGG_CSS = """
-<style id="egg-ticker-style">
-    body {
-        position: relative;
-    }
+# Easter egg ticker — raw CSS for gr.Blocks(css=...) (no <style> tags, Gradio injects it)
+_EASTER_EGG_RAW_CSS = """
     .egg-ticker {
         position: fixed;
         top: -100px;
@@ -53,7 +49,7 @@ _EASTER_EGG_CSS = """
     }
     .egg-track {
         display: flex;
-        animation: scroll 20s linear infinite;
+        animation: hn-scroll 20s linear infinite;
         white-space: nowrap;
         gap: 40px;
     }
@@ -69,8 +65,6 @@ _EASTER_EGG_CSS = """
         color: #ff6b35;
         font-weight: bold;
     }
-    
-    /* Modal for agent page */
     .egg-modal-overlay {
         display: none;
         position: fixed;
@@ -80,7 +74,6 @@ _EASTER_EGG_CSS = """
         bottom: 0;
         background: rgba(0, 0, 0, 0.8);
         z-index: 10000;
-        animation: fadeIn 0.3s ease;
     }
     .egg-modal-overlay.active {
         display: flex;
@@ -94,7 +87,7 @@ _EASTER_EGG_CSS = """
         height: 90%;
         max-width: 1200px;
         max-height: 900px;
-        overflow: auto;
+        overflow: hidden;
         position: relative;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     }
@@ -104,7 +97,7 @@ _EASTER_EGG_CSS = """
         right: 15px;
         font-size: 28px;
         font-weight: bold;
-        color: #999;
+        color: #333;
         cursor: pointer;
         z-index: 10001;
         background: #fff;
@@ -115,27 +108,24 @@ _EASTER_EGG_CSS = """
         align-items: center;
         justify-content: center;
         border: 1px solid #ddd;
+        line-height: 1;
     }
     .egg-modal-close:hover {
-        color: #000;
         background: #f0f0f0;
     }
     .egg-modal-iframe {
         width: 100%;
         height: 100%;
         border: none;
-        border-radius: 8px;
     }
-    
-    @keyframes scroll {
+    @keyframes hn-scroll {
         0% { transform: translateX(0); }
-        100% { transform: translateX(-100%); }
-    }
-    @keyframes fadeIn {
-        from { opacity: 0; }
-        to { opacity: 1; }
+        100% { transform: translateX(-50%); }
     }
-</style>
+"""
+
+# Easter egg ticker HTML elements (no <style> — CSS handled by gr.Blocks(css=...))
+_EASTER_EGG_HTML = """
 <div id="egg-ticker" class="egg-ticker">
     <div class="egg-label">⚡ LIVE</div>
     <div id="egg-track" class="egg-track">
@@ -144,12 +134,17 @@ _EASTER_EGG_CSS = """
         <span class="etk"><b>TechCrunch</b> Latest</span>
         <span class="etk"><b>BBC</b> Breaking</span>
         <span class="etk"><b>AP News</b> Top Stories</span>
+        <span class="etk"><b>BleepingComputer</b> Security Updates</span>
+        <span class="etk"><b>Reuters</b> World News</span>
+        <span class="etk"><b>TechCrunch</b> Latest</span>
+        <span class="etk"><b>BBC</b> Breaking</span>
+        <span class="etk"><b>AP News</b> Top Stories</span>
     </div>
 </div>
 <div id="egg-modal-overlay" class="egg-modal-overlay">
     <div class="egg-modal-content">
         <span id="egg-modal-close" class="egg-modal-close">×</span>
-        <iframe id="egg-modal-iframe" class="egg-modal-iframe" src="http://127.0.0.1:8099/index.html"></iframe>
+        <iframe id="egg-modal-iframe" class="egg-modal-iframe" src="/webagent/index.html"></iframe>
     </div>
 </div>
 """
@@ -242,9 +237,9 @@ class UiApp:
         node_id_display = self._meta.get("node_id", "unknown")
         display_name = self._meta.get("display_name", node_id_display[:20])
 
-        with gr.Blocks(title=f"HearthNet — {display_name}", head=_EASTER_EGG_SCRIPT) as demo:
-            # Inject easter egg ticker CSS & HTML
-            gr.HTML(value=_EASTER_EGG_CSS)
+        with gr.Blocks(title=f"HearthNet — {display_name}", head=_EASTER_EGG_SCRIPT, css=_EASTER_EGG_RAW_CSS) as demo:
+            # Inject easter egg ticker HTML (CSS handled by gr.Blocks css= parameter above)
+            gr.HTML(value=_EASTER_EGG_HTML)
 
             gr.Markdown(f"# 🔥 HearthNet — {display_name}")
 

tests/test_easter_egg.py

@@ -6,62 +6,50 @@ import re
 
 
 def test_easter_egg_implementation():
-    """Verify easter egg ticker is properly implemented in app.py.
-    
-    Tests that:
-    1. Script is injected via head parameter (not innerHTML)
-    2. HTML/CSS is in gr.HTML() component
-    3. Event listener checks for 'e' key
-    4. Guards against INPUT/TEXTAREA elements
-    """
-    from hearthnet.ui.app import _EASTER_EGG_SCRIPT, _EASTER_EGG_CSS
-    
-    # Verify CSS contains the ticker styling
-    assert ".egg-ticker" in _EASTER_EGG_CSS, "CSS missing .egg-ticker class"
-    assert ".egg-ticker.active" in _EASTER_EGG_CSS, "CSS missing .egg-ticker.active state"
-    assert "@keyframes scroll" in _EASTER_EGG_CSS, "CSS missing scroll animation"
-    
-    # Verify HTML contains the ticker element
-    assert 'id="egg-ticker"' in _EASTER_EGG_CSS, "HTML missing egg-ticker id"
-    assert "⚡ LIVE" in _EASTER_EGG_CSS, "HTML missing LIVE label"
-    assert 'id="egg-track"' in _EASTER_EGG_CSS, "HTML missing egg-track id"
-    
+    """Verify easter egg ticker is properly implemented in app.py."""
+    from hearthnet.ui.app import _EASTER_EGG_SCRIPT, _EASTER_EGG_RAW_CSS, _EASTER_EGG_HTML
+
+    # Verify CSS contains the ticker styling (no <style> tags — goes to gr.Blocks css=)
+    assert ".egg-ticker" in _EASTER_EGG_RAW_CSS, "CSS missing .egg-ticker class"
+    assert ".egg-ticker.active" in _EASTER_EGG_RAW_CSS, "CSS missing .egg-ticker.active state"
+    assert "@keyframes" in _EASTER_EGG_RAW_CSS, "CSS missing scroll animation"
+    assert "<style>" not in _EASTER_EGG_RAW_CSS, "Raw CSS must not contain <style> tags (goes to gr.Blocks css=)"
+
+    # Verify HTML contains the ticker element (no style tags)
+    assert 'id="egg-ticker"' in _EASTER_EGG_HTML, "HTML missing egg-ticker id"
+    assert "⚡ LIVE" in _EASTER_EGG_HTML, "HTML missing LIVE label"
+    assert 'id="egg-track"' in _EASTER_EGG_HTML, "HTML missing egg-track id"
+    assert "<style>" not in _EASTER_EGG_HTML, "HTML component must not contain <style> tags"
+
     # Verify script is injected via head parameter (must contain <script> tag)
     assert "<script>" in _EASTER_EGG_SCRIPT, "Script must be wrapped in <script> tag for head parameter"
     assert "</script>" in _EASTER_EGG_SCRIPT, "Script must have closing </script> tag"
-    
+
     # Verify keydown listener
-    assert "evt.key === 'e'" in _EASTER_EGG_SCRIPT, "Script missing 'e' key check (lowercase)"
-    assert "evt.key === 'E'" in _EASTER_EGG_SCRIPT, "Script missing 'E' key check (uppercase)"
-    
+    assert "evt.key === 'e'" in _EASTER_EGG_SCRIPT, "Script missing 'e' key check"
+    assert "evt.key === 'a'" in _EASTER_EGG_SCRIPT, "Script missing 'a' key check for modal"
+
     # Verify input guard
     assert "'INPUT'" in _EASTER_EGG_SCRIPT, "Script missing INPUT guard"
     assert "'TEXTAREA'" in _EASTER_EGG_SCRIPT, "Script missing TEXTAREA guard"
-    
-    # Verify toggle function
+
+    # Verify toggle functions
     assert "toggleEasterEgg" in _EASTER_EGG_SCRIPT, "Script missing toggleEasterEgg function"
-    assert ".active" in _EASTER_EGG_SCRIPT, "Script not toggling .active class"
-    
-    # Verify retry logic for DOM element
-    assert "initEasterEgg" in _EASTER_EGG_SCRIPT, "Script missing initEasterEgg function"
-    assert "setTimeout(initEasterEgg" in _EASTER_EGG_SCRIPT, "Script missing retry logic for DOM"
-    
-    # Verify script is injected in Blocks head parameter
+    assert "toggleAgentModal" in _EASTER_EGG_SCRIPT, "Script missing toggleAgentModal function"
+
+    # Verify gr.Blocks uses css= parameter and gr.HTML uses HTML only
     from hearthnet.ui.app import UiApp
     import inspect
-    
     build_code = inspect.getsource(UiApp.build)
+    assert "css=_EASTER_EGG_RAW_CSS" in build_code, "Raw CSS not passed to gr.Blocks css= parameter"
     assert "head=_EASTER_EGG_SCRIPT" in build_code, "Script not injected via head parameter in Blocks"
-    assert "gr.HTML(value=_EASTER_EGG_CSS)" in build_code, "CSS not injected via gr.HTML()"
+    assert "gr.HTML(value=_EASTER_EGG_HTML)" in build_code, "HTML not injected via gr.HTML()"
 
 
 def test_easter_egg_no_script_in_html():
-    """Verify script is NOT embedded in gr.HTML() to avoid Gradio warning."""
-    from hearthnet.ui.app import _EASTER_EGG_CSS, _EASTER_EGG_SCRIPT
-    
-    # CSS should NOT contain script tags (they go to head parameter)
-    assert "<script>" not in _EASTER_EGG_CSS, "CSS component should not contain script (goes to head parameter)"
-    
-    # Script should be separate
-    assert len(_EASTER_EGG_SCRIPT) > 0, "Script must exist"
-    assert "<script>" in _EASTER_EGG_SCRIPT, "Script must be in _EASTER_EGG_SCRIPT constant"
+    """Verify script and style are NOT in gr.HTML() to avoid Gradio/CSP issues."""
+    from hearthnet.ui.app import _EASTER_EGG_HTML, _EASTER_EGG_RAW_CSS
+
+    assert "<script>" not in _EASTER_EGG_HTML, "HTML component must not contain scripts"
+    assert "<style>" not in _EASTER_EGG_HTML, "HTML component must not contain style tags (use gr.Blocks css=)"
+    assert "<style>" not in _EASTER_EGG_RAW_CSS, "Raw CSS must not be wrapped in style tags"