Update brief.py

brief.py

@@ -167,7 +167,7 @@ def _fallback_brief(raw_text: str) -> ThreatBrief:
 
 
 # ---------------------------------------------------------------------------
-# HTML Renderer
+# HTML Renderer — system dark mode aware via CSS custom properties
 # ---------------------------------------------------------------------------
 
 def render_brief_html(brief: ThreatBrief) -> str:
@@ -192,128 +192,254 @@ def render_brief_html(brief: ThreatBrief) -> str:
     )
     sources_str = ", ".join(brief.source_types_used) if brief.source_types_used else "N/A"
 
-    # Build notable news section
-    news_html = ""
+    # Build notable news cards
     if brief.notable_news:
         cards = []
         for item in brief.notable_news:
-            source_badge = (
-                f'<span style="background:#EBF5FB;color:#2E86C1;padding:2px 8px;'
-                f'border-radius:8px;font-size:0.78em;font-weight:600">{item.source}</span>'
-            )
-            date_str = (
-                f'<span style="color:#888;font-size:0.8em;margin-left:8px">{item.published[:25] if item.published else ""}</span>'
-            )
             link_html = (
-                f'<a href="{item.url}" target="_blank" style="color:#2E86C1;font-size:0.82em;'
-                f'text-decoration:none">Read full article →</a>'
+                f'<a href="{item.url}" target="_blank" class="news-link">Read full article →</a>'
                 if item.url else ""
             )
             cards.append(f"""
-            <div style="border:1px solid #D5E8F5;border-radius:6px;padding:12px 16px;
-                        margin-bottom:10px;background:#FAFCFF">
-              <div style="margin-bottom:6px">{source_badge}{date_str}</div>
-              <div style="font-weight:600;color:#1a1a2e;margin-bottom:5px;line-height:1.4">
-                {item.title}
-              </div>
-              <div style="color:#444;font-size:0.9em;line-height:1.6;margin-bottom:6px">
-                {item.summary}
+            <div class="news-card">
+              <div class="news-meta">
+                <span class="news-source-badge">{item.source}</span>
+                <span class="news-date">{item.published[:25] if item.published else ""}</span>
               </div>
+              <div class="news-title">{item.title}</div>
+              <div class="news-summary">{item.summary}</div>
               {link_html}
-            </div>
-            """)
-        news_html = f"""
-  <div style="background:white;padding:20px 24px;border:1px solid #dee2e6;border-top:none">
-    <h3 style="color:#1a1a2e;margin-top:0;margin-bottom:14px">
-      📰 Notable News
-      <span style="font-size:0.7em;font-weight:normal;color:#666;margin-left:8px">
-        {len(brief.notable_news)} articles
-      </span>
+            </div>""")
+        news_section = f"""
+  <div class="section">
+    <h3 class="section-title">📰 Notable News
+      <span class="section-count">{len(brief.notable_news)} articles</span>
     </h3>
     {"".join(cards)}
-  </div>
-"""
+  </div>"""
     else:
-        news_html = """
-  <div style="background:#f8f9fa;padding:14px 24px;border:1px solid #dee2e6;border-top:none">
-    <p style="margin:0;color:#888;font-style:italic">No notable news articles retrieved.</p>
-  </div>
-"""
+        news_section = """
+  <div class="section muted-section">
+    <p class="muted-text">No notable news articles retrieved.</p>
+  </div>"""
 
     html = f"""
-<div style="font-family:system-ui,sans-serif;max-width:920px;margin:auto">
-
-  <!-- Header -->
-  <div style="background:#1a1a2e;color:white;padding:16px 24px;border-radius:8px 8px 0 0">
-    <h2 style="margin:0 0 4px 0">🛡️ OSINT Threat Brief</h2>
-    <p style="margin:0;opacity:0.7;font-size:0.9em">
-      {brief.country or 'Unknown'} &nbsp;|&nbsp;
-      {brief.region} &nbsp;|&nbsp;
-      {brief.assessment_date}
-    </p>
+<style>
+  .brief-wrap {{
+    font-family: system-ui, -apple-system, sans-serif;
+    max-width: 920px;
+    margin: auto;
+
+    /* Light mode tokens */
+    --bg-primary:    #ffffff;
+    --bg-secondary:  #f4f6f9;
+    --bg-accent:     #f0f3f8;
+    --bg-warn:       #fff8e1;
+    --bg-news-card:  #f8fbff;
+    --border:        #d0d7e2;
+    --text-primary:  #1a1a2e;
+    --text-body:     #2c3444;
+    --text-muted:    #6b7280;
+    --text-link:     #2563eb;
+    --news-badge-bg: #dbeafe;
+    --news-badge-fg: #1d4ed8;
+    --header-bg:     #1a1a2e;
+    --header-text:   #ffffff;
+  }}
+
+  @media (prefers-color-scheme: dark) {{
+    .brief-wrap {{
+      --bg-primary:    #1e2130;
+      --bg-secondary:  #252836;
+      --bg-accent:     #2a2d3e;
+      --bg-warn:       #2d2a1a;
+      --bg-news-card:  #232638;
+      --border:        #3a3f55;
+      --text-primary:  #e8eaf6;
+      --text-body:     #c5c9db;
+      --text-muted:    #8b91a8;
+      --text-link:     #7eb3f8;
+      --news-badge-bg: #1e3a5f;
+      --news-badge-fg: #7eb3f8;
+      --header-bg:     #111527;
+      --header-text:   #ffffff;
+    }}
+  }}
+
+  .brief-wrap * {{ box-sizing: border-box; }}
+
+  .brief-header {{
+    background: var(--header-bg);
+    color: var(--header-text);
+    padding: 18px 24px;
+    border-radius: 8px 8px 0 0;
+  }}
+  .brief-header h2 {{ margin: 0 0 4px 0; font-size: 1.3em; }}
+  .brief-header p  {{ margin: 0; opacity: 0.7; font-size: 0.88em; }}
+
+  .status-bar {{
+    background: var(--bg-accent);
+    border: 1px solid var(--border);
+    padding: 12px 24px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    color: var(--text-body);
+    font-size: 0.9em;
+  }}
+  .status-bar strong {{ color: var(--text-primary); }}
+
+  .section {{
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-top: none;
+    padding: 18px 24px;
+    color: var(--text-body);
+  }}
+  .section h3, .section h4 {{
+    color: var(--text-primary);
+    margin-top: 0;
+  }}
+  .section p  {{ line-height: 1.8; margin: 0; }}
+  .section ul {{ padding-left: 20px; line-height: 1.9; margin: 0; }}
+
+  .section-title {{ margin-bottom: 14px; font-size: 1.05em; }}
+  .section-count {{
+    font-size: 0.68em;
+    font-weight: normal;
+    color: var(--text-muted);
+    margin-left: 8px;
+  }}
+
+  .grid-2 {{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    border: 1px solid var(--border);
+    border-top: none;
+  }}
+  .grid-cell {{
+    background: var(--bg-primary);
+    padding: 16px 20px;
+    color: var(--text-body);
+  }}
+  .grid-cell h4 {{ color: var(--text-primary); margin-top: 0; }}
+  .grid-cell ul {{ padding-left: 18px; line-height: 1.9; margin: 0; }}
+  .grid-cell-border {{ border-right: 1px solid var(--border); }}
+
+  .muted-section {{ background: var(--bg-secondary); }}
+  .muted-text {{ color: var(--text-muted); font-style: italic; margin: 0; }}
+
+  .news-card {{
+    background: var(--bg-news-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 12px 16px;
+    margin-bottom: 10px;
+  }}
+  .news-meta {{ margin-bottom: 6px; }}
+  .news-source-badge {{
+    background: var(--news-badge-bg);
+    color: var(--news-badge-fg);
+    padding: 2px 8px;
+    border-radius: 8px;
+    font-size: 0.78em;
+    font-weight: 600;
+  }}
+  .news-date {{
+    color: var(--text-muted);
+    font-size: 0.8em;
+    margin-left: 8px;
+  }}
+  .news-title {{
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 5px;
+    line-height: 1.4;
+  }}
+  .news-summary {{
+    color: var(--text-body);
+    font-size: 0.9em;
+    line-height: 1.6;
+    margin-bottom: 6px;
+  }}
+  .news-link {{
+    color: var(--text-link);
+    font-size: 0.82em;
+    text-decoration: none;
+  }}
+  .news-link:hover {{ text-decoration: underline; }}
+
+  .warn-section {{
+    background: var(--bg-warn);
+    border: 1px solid var(--border);
+    border-top: none;
+    padding: 16px 24px;
+    color: var(--text-body);
+  }}
+  .warn-section h4 {{ color: var(--text-primary); margin-top: 0; }}
+  .warn-section ul {{ padding-left: 18px; line-height: 1.9; margin: 0; }}
+
+  .brief-footer {{
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    padding: 10px 24px;
+    font-size: 0.78em;
+    color: var(--text-muted);
+  }}
+</style>
+
+<div class="brief-wrap">
+
+  <div class="brief-header">
+    <h2>🛡️ OSINT Threat Brief</h2>
+    <p>{brief.country or 'Unknown'} &nbsp;|&nbsp; {brief.region} &nbsp;|&nbsp; {brief.assessment_date}</p>
   </div>
 
-  <!-- Status bar -->
-  <div style="background:#f0f3f8;padding:14px 24px;border:1px solid #dee2e6;
-              display:flex;align-items:center;gap:16px;flex-wrap:wrap">
+  <div class="status-bar">
     <span><strong>Severity:</strong> &nbsp;{badge(brief.severity, sev_color)}</span>
     <span><strong>Confidence:</strong> &nbsp;{badge(brief.confidence, conf_color)}</span>
-    <span style="color:#666;font-size:0.9em"><strong>Sources:</strong> {sources_str}</span>
-    <span style="color:#666;font-size:0.9em"><strong>Fatalities:</strong> {fatalities_str}</span>
+    <span><strong>Sources:</strong> {sources_str}</span>
+    <span><strong>Fatalities:</strong> {fatalities_str}</span>
   </div>
 
-  <!-- Narrative -->
-  <div style="background:white;padding:20px 24px;border:1px solid #dee2e6;border-top:none">
-    <h3 style="color:#1a1a2e;margin-top:0">Analytical Summary</h3>
-    <p style="line-height:1.8;color:#333">{brief.narrative_summary or '<em>Not available</em>'}</p>
+  <div class="section">
+    <h3>Analytical Summary</h3>
+    <p>{brief.narrative_summary or '<em>Not available</em>'}</p>
   </div>
 
-  <!-- Key findings + escalation -->
-  <div style="display:grid;grid-template-columns:1fr 1fr;border:1px solid #dee2e6;border-top:none">
-    <div style="padding:16px 20px;border-right:1px solid #dee2e6">
-      <h4 style="color:#1a1a2e;margin-top:0">🔍 Key Findings</h4>
-      <ul style="padding-left:18px;line-height:1.9;margin:0">
-        {bullet_list(brief.key_findings)}
-      </ul>
+  <div class="grid-2">
+    <div class="grid-cell grid-cell-border">
+      <h4>🔍 Key Findings</h4>
+      <ul>{bullet_list(brief.key_findings)}</ul>
     </div>
-    <div style="padding:16px 20px">
-      <h4 style="color:#1a1a2e;margin-top:0">⚠️ Escalation Indicators</h4>
-      <ul style="padding-left:18px;line-height:1.9;margin:0">
-        {bullet_list(brief.indicators_of_escalation)}
-      </ul>
+    <div class="grid-cell">
+      <h4>⚠️ Escalation Indicators</h4>
+      <ul>{bullet_list(brief.indicators_of_escalation)}</ul>
     </div>
   </div>
 
-  <!-- Actors + locations -->
-  <div style="display:grid;grid-template-columns:1fr 1fr;border:1px solid #dee2e6;border-top:none">
-    <div style="padding:16px 20px;border-right:1px solid #dee2e6">
-      <h4 style="color:#1a1a2e;margin-top:0">🎭 Primary Actors</h4>
-      <ul style="padding-left:18px;line-height:1.9;margin:0">
-        {bullet_list(brief.primary_actors)}
-      </ul>
+  <div class="grid-2">
+    <div class="grid-cell grid-cell-border" style="border-top:1px solid var(--border)">
+      <h4>🎭 Primary Actors</h4>
+      <ul>{bullet_list(brief.primary_actors)}</ul>
     </div>
-    <div style="padding:16px 20px">
-      <h4 style="color:#1a1a2e;margin-top:0">📍 Key Locations</h4>
-      <ul style="padding-left:18px;line-height:1.9;margin:0">
-        {bullet_list(brief.key_locations)}
-      </ul>
+    <div class="grid-cell" style="border-top:1px solid var(--border)">
+      <h4>📍 Key Locations</h4>
+      <ul>{bullet_list(brief.key_locations)}</ul>
     </div>
   </div>
 
-  <!-- Notable news -->
-  {news_html}
+  {news_section}
 
-  <!-- Watch items -->
-  <div style="background:#fff8e1;padding:16px 24px;border:1px solid #dee2e6;border-top:none">
-    <h4 style="color:#1a1a2e;margin-top:0">📡 Recommended Watch Items</h4>
-    <ul style="padding-left:18px;line-height:1.9;margin:0">
-      {bullet_list(brief.recommended_watch_items)}
-    </ul>
+  <div class="warn-section">
+    <h4>📡 Recommended Watch Items</h4>
+    <ul>{bullet_list(brief.recommended_watch_items)}</ul>
   </div>
 
-  <!-- Footer -->
-  <div style="background:#f8f9fa;padding:10px 24px;border:1px solid #dee2e6;border-top:none;
-              border-radius:0 0 8px 8px;font-size:0.78em;color:#6c757d">
+  <div class="brief-footer">
     Event types: {', '.join(brief.event_types) or 'N/A'} &nbsp;|&nbsp;
     <em>AI-generated from open sources. Verify before operational use.</em>
   </div>