fix news UI

app/components/news.py

@@ -373,120 +373,34 @@ def display_breaking_news_banner(df: pd.DataFrame):
             hours = time_diff.seconds // 3600
             time_ago = f"{hours}h ago" if hours < 24 else f"{time_diff.days}d ago"
 
-        # TradingView-style breaking news banner
-        banner_html = f"""
-        <style>
-        @keyframes pulse-glow {{
-            0%, 100% {{ box-shadow: 0 0 20px rgba(242, 54, 69, 0.6); }}
-            50% {{ box-shadow: 0 0 30px rgba(242, 54, 69, 0.9); }}
-        }}
-
-        @keyframes slide-in {{
-            from {{ transform: translateX(-10px); opacity: 0; }}
-            to {{ transform: translateX(0); opacity: 1; }}
-        }}
-        </style>
-
-        <div style="
-            background: linear-gradient(135deg, #F23645 0%, #C91B28 100%);
-            border: 2px solid #FF6B78;
-            border-radius: 12px;
-            padding: 20px 24px;
-            margin-bottom: 24px;
-            animation: pulse-glow 2s ease-in-out infinite;
-            position: relative;
-            overflow: hidden;
-        ">
-            <!-- Animated background pattern -->
-            <div style="
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: repeating-linear-gradient(
-                    45deg,
-                    transparent,
-                    transparent 10px,
-                    rgba(255, 255, 255, 0.03) 10px,
-                    rgba(255, 255, 255, 0.03) 20px
-                );
-                pointer-events: none;
-            "></div>
-
-            <!-- Content -->
-            <div style="position: relative; z-index: 1;">
-                <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;">
-                    <!-- Animated icon -->
-                    <div style="
-                        font-size: 32px;
-                        animation: pulse-glow 1s ease-in-out infinite;
-                        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
-                    ">🚨</div>
-
-                    <!-- Header -->
-                    <div style="flex: 1;">
-                        <div style="
-                            color: white;
-                            font-size: 14px;
-                            font-weight: 700;
-                            letter-spacing: 1.5px;
-                            text-transform: uppercase;
-                            margin-bottom: 4px;
-                            font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
-                            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-                        ">⚡ Breaking News</div>
-                        <div style="
-                            color: rgba(255, 255, 255, 0.9);
-                            font-size: 11px;
-                            display: flex;
-                            align-items: center;
-                            gap: 8px;
-                        ">
-                            <span style="
-                                background: rgba(255, 255, 255, 0.2);
-                                padding: 2px 8px;
-                                border-radius: 4px;
-                                font-weight: 600;
-                            ">{source}</span>
-                            <span style="opacity: 0.8;">•</span>
-                            <span style="opacity: 0.8;">{time_ago}</span>
-                        </div>
-                    </div>
-
-                    <!-- Read button -->
-                    <a href="{url}" target="_blank" style="
-                        background: white;
-                        color: #F23645;
-                        padding: 10px 20px;
-                        border-radius: 6px;
-                        font-size: 13px;
-                        font-weight: 700;
-                        text-decoration: none;
-                        display: inline-flex;
-                        align-items: center;
-                        gap: 6px;
-                        transition: all 0.2s ease;
-                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-                    " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0, 0, 0, 0.3)';"
-                       onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0, 0, 0, 0.2)';">
-                        READ NOW →
-                    </a>
-                </div>
-
-                <!-- News summary -->
-                <div style="
-                    color: white;
-                    font-size: 16px;
-                    font-weight: 500;
-                    line-height: 1.5;
-                    margin-left: 48px;
-                    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
-                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-                    animation: slide-in 0.5s ease-out;
-                ">{summary}</div>
-            </div>
-        </div>
-        """
+        # TradingView-style breaking news banner (no leading whitespace)
+        banner_html = f"""<style>
+@keyframes pulse-glow {{
+0%, 100% {{ box-shadow: 0 0 20px rgba(242, 54, 69, 0.6); }}
+50% {{ box-shadow: 0 0 30px rgba(242, 54, 69, 0.9); }}
+}}
+@keyframes slide-in {{
+from {{ transform: translateX(-10px); opacity: 0; }}
+to {{ transform: translateX(0); opacity: 1; }}
+}}
+</style>
+<div style="background: linear-gradient(135deg, #F23645 0%, #C91B28 100%); border: 2px solid #FF6B78; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; animation: pulse-glow 2s ease-in-out infinite; position: relative; overflow: hidden;">
+<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px); pointer-events: none;"></div>
+<div style="position: relative; z-index: 1;">
+<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;">
+<div style="font-size: 32px; animation: pulse-glow 1s ease-in-out infinite; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));">🚨</div>
+<div style="flex: 1;">
+<div style="color: white; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">⚡ Breaking News</div>
+<div style="color: rgba(255, 255, 255, 0.9); font-size: 11px; display: flex; align-items: center; gap: 8px;">
+<span style="background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 4px; font-weight: 600;">{source}</span>
+<span style="opacity: 0.8;">•</span>
+<span style="opacity: 0.8;">{time_ago}</span>
+</div>
+</div>
+<a href="{url}" target="_blank" style="background: white; color: #F23645; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0, 0, 0, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0, 0, 0, 0.2)';">READ NOW →</a>
+</div>
+<div style="color: white; font-size: 16px; font-weight: 500; line-height: 1.5; margin-left: 48px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); animation: slide-in 0.5s ease-out;">{summary}</div>
+</div>
+</div>"""
 
         st.markdown(banner_html, unsafe_allow_html=True)

app/services/twitter_news_playwright.py

@@ -208,8 +208,8 @@ class TwitterFinanceMonitor:
         logger.warning("Chromium not found in standard paths")
         return '/usr/bin/chromium'  # Fallback
 
-    def _scrape_twitter_profile(self, source_name: str, source_info: Dict, timeout: int = 12) -> List[Dict]:
-        """Scrape tweets from a single Twitter profile using Playwright (optimized for speed)"""
+    def _scrape_twitter_profile(self, source_name: str, source_info: Dict, timeout: int = 30) -> List[Dict]:
+        """Scrape tweets from a single Twitter profile using Playwright"""
         if not PLAYWRIGHT_AVAILABLE:
             logger.warning("Playwright not available")
             return []
@@ -234,7 +234,7 @@ class TwitterFinanceMonitor:
                 )
                 page = context.new_page()
 
-                # Block images, fonts, css, and videos for maximum speed
+                # Block images, fonts, css, and videos for speed
                 def route_intercept(route):
                     if route.request.resource_type in ["image", "media", "font", "stylesheet", "video"]:
                         route.abort()
@@ -243,19 +243,19 @@ class TwitterFinanceMonitor:
 
                 page.route("**/*", route_intercept)
 
-                # Navigate to profile with reduced timeout
+                # Navigate to profile with increased timeout
                 logger.info(f"Scraping {source_name}...")
-                page.goto(source_info['url'], timeout=timeout * 1000, wait_until="domcontentloaded")  # Don't wait for full load
+                page.goto(source_info['url'], timeout=timeout * 1000, wait_until="domcontentloaded")
 
-                # Wait for tweets to load with reduced timeout
+                # Wait for tweets to load with increased timeout
                 try:
-                    page.wait_for_selector("article", timeout=8000)  # Fixed 8 second wait
+                    page.wait_for_selector("article", timeout=15000)  # Increased to 15 seconds
                 except PlaywrightTimeoutError:
                     logger.warning(f"Timeout waiting for tweets from {source_name}")
                     browser.close()
                     return []
 
-                # Extract tweet texts (limit to 15 for speed)
+                # Extract tweet texts (limit to 15)
                 tweet_elements = page.locator("article div[data-testid='tweetText']").all()
 
                 news_items = []
@@ -331,19 +331,19 @@ class TwitterFinanceMonitor:
             reverse=True
         )
 
-        # Scrape sources in parallel with higher concurrency
-        # 8 workers = 19 sources in 3 batches (~30-45 seconds total)
+        # Scrape sources in parallel with moderate concurrency
+        # 8 workers = 19 sources in 3 batches (~60-90 seconds total)
         with ThreadPoolExecutor(max_workers=8) as executor:
             futures = []
             for name, info in sorted_sources:
-                # Reduced timeout for faster failures
-                future = executor.submit(_self._scrape_twitter_profile, name, info, timeout=12)
+                # Increased timeout for better success rate
+                future = executor.submit(_self._scrape_twitter_profile, name, info, timeout=30)
                 futures.append((future, name))
 
             for future, source_name in futures:
                 try:
-                    # Wait max 15 seconds per source (down from 20)
-                    news_items = future.result(timeout=15)
+                    # Wait max 35 seconds per source (increased for reliability)
+                    news_items = future.result(timeout=35)
 
                     # Deduplicate based on text similarity
                     unique_items = []