feat: cap headlines panel at 5 entries, add geo/macro category tags

- style.css: --headlines-max-height: 310px cap with smooth scroll and
thin custom scrollbar; --status-amber / --status-amber-glow variables;
.headline-item--geo/.headline-item--macro amber left-border modifiers;
.headline-tag amber pill badge; .headlines-scroll-hint fade-in hint
- app.js: category-aware li class assignment; Geopolitical/Macro tag
pill appended to meta row; scroll hint shown when list overflows
- index.html: .headlines-scroll-hint element added below ul; app.js
bumped to v=17, style.css to v=2

static/app.js

@@ -977,7 +977,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 const isLink      = /^https?:\/\//i.test(url);
 
                 const li = document.createElement('li');
-                li.className = 'headline-item' + (isLink ? '' : ' headline-item--no-url');
+                const category = String(typeof headline === 'string' ? 'financial' : (headline?.category || 'financial')).trim().toLowerCase();
+                const catClass  = category === 'geopolitical' ? ' headline-item--geo'
+                                : category === 'macro'         ? ' headline-item--macro'
+                                : '';
+                li.className = 'headline-item' + catClass + (isLink ? '' : ' headline-item--no-url');
 
                 // Title — clickable link or plain span
                 const titleEl = document.createElement(isLink ? 'a' : 'span');
@@ -1013,12 +1017,26 @@ document.addEventListener('DOMContentLoaded', () => {
                     metaEl.appendChild(srcSpan);
                 }
 
+                if (category === 'geopolitical' || category === 'macro') {
+                    const tagEl = document.createElement('span');
+                    tagEl.className = 'headline-tag';
+                    tagEl.textContent = category === 'macro' ? 'Macro' : 'Geopolitical';
+                    metaEl.appendChild(tagEl);
+                }
+
                 li.appendChild(titleEl);
                 if (metaEl.hasChildNodes()) li.appendChild(metaEl);
                 headlinesList.appendChild(li);
             });
         }
 
+        // Show scroll hint if list overflows its capped height
+        const hintEl = headlinesList.parentElement?.querySelector('.headlines-scroll-hint');
+        if (hintEl) {
+            const overflows = headlinesList.scrollHeight > headlinesList.clientHeight;
+            hintEl.classList.toggle('visible', overflows);
+        }
+
         if (!headlinesList.children.length) {
             const li = document.createElement('li');
             li.className = 'headline-item headline-item--empty';

static/style.css

@@ -22,6 +22,10 @@
     --status-red-glow: rgba(182, 78, 90, 0.24);
     --status-yellow: #b48c3a;
     --status-yellow-glow: rgba(180, 140, 58, 0.22);
+    --status-amber: #ba7517;
+    --status-amber-glow: rgba(186, 117, 23, 0.25);
+
+    --headlines-max-height: 310px;
 
     --logo-grad-start: #1f2838;
     --logo-grad-end: #71839c;
@@ -534,10 +538,6 @@ header {
 }
 
 .dash-col--right .headlines-card .headlines-list {
-  flex: 1;
-  min-height: 0;        /* essential for overflow:auto inside flex */
-  max-height: none;
-  overflow-y: auto;
   padding-right: 0.25rem;
 }
 
@@ -754,8 +754,19 @@ header {
     display: flex;
     flex-direction: column;
     gap: 0;
+    max-height: var(--headlines-max-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    scrollbar-color: rgba(209,212,220,0.2) transparent;
+}
+
+.headlines-list::-webkit-scrollbar { width: 4px; }
+.headlines-list::-webkit-scrollbar-track { background: transparent; }
+.headlines-list::-webkit-scrollbar-thumb {
+    background: rgba(209,212,220,0.2);
+    border-radius: 99px;
 }
 
 .headline-item {
@@ -779,6 +790,45 @@ header {
     opacity: 0.72;
 }
 
+.headline-item--geo {
+    border-left-color: var(--status-amber, #ba7517);
+}
+
+.headline-item--macro {
+    border-left-color: var(--status-amber, #ba7517);
+    opacity: 0.92;
+}
+
+.headline-tag {
+    display: inline-block;
+    font-size: 9px;
+    line-height: 1;
+    padding: 2px 5px;
+    border-radius: 3px;
+    background: rgba(186, 117, 23, 0.18);
+    color: #ba7517;
+    white-space: nowrap;
+    margin-left: auto;
+    flex-shrink: 0;
+    align-self: center;
+}
+
+.headlines-scroll-hint {
+    font-size: 10px;
+    color: var(--text-muted);
+    text-align: center;
+    padding-top: 6px;
+    border-top: 1px solid rgba(209,212,220,0.08);
+    margin-top: 4px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    pointer-events: none;
+}
+
+.headlines-scroll-hint.visible {
+    opacity: 1;
+}
+
 .headline-item--empty {
     font-style: italic;
     color: var(--text-muted);

templates/index.html

@@ -14,7 +14,7 @@
         })();
     </script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/style.css?v=2">
     <link rel="icon" type="image/svg+xml"
         href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22%233b82f6%22>IA</text></svg>">
 </head>
@@ -126,6 +126,7 @@
                 <div class="card glass-panel headlines-card">
                   <h3>Recent Headlines Analyzed</h3>
                   <ul id="headlines-list" class="headlines-list"></ul>
+                  <div class="headlines-scroll-hint">scroll for more</div>
                 </div>
 
               </div>
@@ -178,7 +179,7 @@
     <!-- TradingView Lightweight Charts -->
     <script
         src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js?v=4"></script>
-    <script src="/static/app.js?v=16"></script>
+    <script src="/static/app.js?v=17"></script>
 </body>
 
 </html>