From c82dbb397b4e98afac440ea1490bc0a78ac96adc Mon Sep 17 00:00:00 2001
From: caty21 <caty21@users.noreply.github.com>
Date: Sat, 27 Jun 2026 22:28:39 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20OIS=20toujours=20visible=20+=20R=C3=A9su?=
 =?UTF-8?q?m=C3=A9=20IA=20blanc=20+=20news=20s=C3=A9par=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CurrencyCard: OIS toujours dans sigTabs (plus conditionnel à ratePath)
  → affiche état 'indisponible' quand données absentes, au lieu de disparaître
- NarrativeButton: couleur 'Résumé IA' blanc (#ffffff) au lieu d'amber
- NewsTab: Inflation/Géopolitique/Emploi/Énergie toujours visibles comme filtres
  → séparation TOP NEWS (articles avec étiquette macro) vs 'Autres actualités'
     (articles boursiers sans tag FX) dans section repliable

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/CurrencyCard.tsx    |  17 +++-
 components/NarrativeButton.tsx |   6 +-
 components/NewsTab.tsx         | 151 +++++++++++++++++++++------------
 3 files changed, 115 insertions(+), 59 deletions(-)

diff --git a/components/CurrencyCard.tsx b/components/CurrencyCard.tsx
index 15ee642..4fd00dd 100644
--- a/components/CurrencyCard.tsx
+++ b/components/CurrencyCard.tsx
@@ -1500,11 +1500,12 @@ export default function CurrencyCard({
               <>
                 {/* ── Slider : OIS / COT / Sentiment ──────────────────────── */}
                 {(() => {
-                  const sigTabs: { id: SignauxSlide; label: string }[] = [];
-                  if (ratePath && ratePath.meetings.length > 0) sigTabs.push({ id: "ois",  label: "OIS" });
+                  // OIS est toujours présent (même si données indisponibles)
+                  const sigTabs: { id: SignauxSlide; label: string }[] = [
+                    { id: "ois", label: "OIS" },
+                  ];
                   if (cot)       sigTabs.push({ id: "cot",  label: "COT" });
                   if (sentiment) sigTabs.push({ id: "sent", label: "Sentiment" });
-                  if (!sigTabs.length) return <div className="text-center text-slate-600 text-[11px] py-4">Données insuffisantes</div>;
                   return (
                     <div className="space-y-1.5">
                       {sigTabs.length > 1 && (
@@ -1535,6 +1536,16 @@ export default function CurrencyCard({
                             {signauxSlide === "ois" && ratePath && ratePath.meetings.length > 0 && (
                               <OISEnhancedBlock ratePath={ratePath} />
                             )}
+                            {/* OIS — état indisponible */}
+                            {signauxSlide === "ois" && (!ratePath || !ratePath.meetings.length) && (
+                              <div className="flex flex-col items-center justify-center h-full gap-3 text-slate-700">
+                                <Target size={24} />
+                                <div className="text-center">
+                                  <p className="text-[11px] text-slate-500">Données OIS indisponibles</p>
+                                  <p className="text-[10px] text-slate-600 mt-1">Cache actualisé par GitHub Actions (24–48h)</p>
+                                </div>
+                              </div>
+                            )}
 
                             {/* COT */}
                             {signauxSlide === "cot" && cot && (() => {
diff --git a/components/NarrativeButton.tsx b/components/NarrativeButton.tsx
index 606f58d..8d18c04 100644
--- a/components/NarrativeButton.tsx
+++ b/components/NarrativeButton.tsx
@@ -45,9 +45,9 @@ export default function NarrativeButton({ currency, phase, macroScore }: Props)
       <button
         onClick={run}
         disabled={loading}
-        style={{ color: '#f59e0b' }}
-        onMouseEnter={e => (e.currentTarget.style.color = '#fcd34d')}
-        onMouseLeave={e => (e.currentTarget.style.color = '#f59e0b')}
+        style={{ color: '#ffffff' }}
+        onMouseEnter={e => (e.currentTarget.style.color = '#e2e8f0')}
+        onMouseLeave={e => (e.currentTarget.style.color = '#ffffff')}
         className="flex items-center gap-1 text-[10px] disabled:opacity-50 transition-colors px-2 py-1"
       >
         <Sparkles size={11} />
diff --git a/components/NewsTab.tsx b/components/NewsTab.tsx
index a858e9e..fa853c0 100644
--- a/components/NewsTab.tsx
+++ b/components/NewsTab.tsx
@@ -3,7 +3,7 @@
 import { useState, useMemo, useEffect, useRef } from "react";
 import {
   ExternalLink, RefreshCw, TrendingUp, TrendingDown, Minus,
-  Loader2, Radio, AlertTriangle, Landmark, Globe, BarChart2, Zap,
+  Loader2, Radio, AlertTriangle, Landmark, Globe, BarChart2, Zap, ChevronDown, ChevronUp,
 } from "lucide-react";
 import type { NewsItem } from "@/app/api/news/route";
 import type { Currency } from "@/lib/types";
@@ -34,6 +34,7 @@ const CATEGORY_META: Record<string, { icon: React.ReactNode; color: string; labe
   "Chine":             { icon: <Globe size={11} />,          color: "bg-red-600/20 text-red-400 border-red-600/30",          label: "Chine" },
 };
 
+// Catégories affichées comme boutons de filtre (ordre d'apparition)
 const PRIORITY_CATS = [
   "Discours BC", "Décision Taux", "Probabilités Taux",
   "Chef d'État", "Données Clés", "Emploi", "Inflation",
@@ -41,6 +42,12 @@ const PRIORITY_CATS = [
   "Énergie", "Commodités", "Chine",
 ];
 
+// Catégories toujours visibles dans la barre même sans articles correspondants
+const ALWAYS_VISIBLE = new Set(["Inflation", "Géopolitique", "Emploi", "Énergie"]);
+
+// Set pour la séparation top-news / autres
+const PRIORITY_CATS_SET = new Set(PRIORITY_CATS);
+
 // Catégories "haute priorité" : reçoivent un boost de tri
 const HIGH_PRIO = new Set([
   "Discours BC", "Décision Taux", "Crise", "Guerre", "Chef d'État", "Probabilités Taux",
@@ -65,9 +72,8 @@ function formatRelativeTime(isoDate: string): string {
 }
 
 // ── Tri ───────────────────────────────────────────────────────────────────────
-// Score plus élevé = apparaît en premier dans la liste.
-// Ordre : récence (primaire) → haute priorité (+3h) → article catégorisé (+1h)
-// Les articles sans catégorie ni impact (bruit boursier Yahoo etc.) restent en bas.
+// Score plus élevé = apparaît en premier.
+// Récence primaire → haute priorité (+3h) → catégorisé (+1h) → bruit sans catégorie (0)
 
 function scoreItem(item: NewsItem): number {
   const t      = new Date(item.publishedAt).getTime();
@@ -85,12 +91,12 @@ interface Props {
 }
 
 export default function NewsTab({ items, loading, onRefresh }: Props) {
-  // Multi-sélection : Set vide = "Toutes" (aucun filtre actif)
   const [selectedCats,  setSelectedCats]  = useState<Set<string>>(new Set());
   const [filterDir,     setFilterDir]     = useState<"all" | "bullish" | "bearish">("all");
   const [priorityOnly,  setPriorityOnly]  = useState(false);
   const [autoRefresh,   setAutoRefresh]   = useState(true);
   const [lastRefreshAt, setLastRefreshAt] = useState<Date | null>(null);
+  const [othersOpen,    setOthersOpen]    = useState(false);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   useEffect(() => {
@@ -99,7 +105,6 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
     return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
   }, [autoRefresh, onRefresh]);
 
-  // Bascule une catégorie dans la sélection (OR logic — plusieurs peuvent être actives)
   const toggleCat = (cat: string) => {
     setSelectedCats(prev => {
       const next = new Set(prev);
@@ -109,25 +114,38 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
     });
   };
 
-  // Filtre + tri client
-  const filtered = useMemo(() => {
-    const result = items.filter(item => {
-      // Filtre "Prioritaire"
-      if (priorityOnly && !item.categories.some(c => HIGH_PRIO.has(c))) return false;
-      // Filtre catégories multi-select (OR) : l'article doit matcher AU MOINS UNE cat sélectionnée
-      if (selectedCats.size > 0 && !item.categories.some(c => selectedCats.has(c))) return false;
-      // Filtre direction
-      if (filterDir !== "all" && !item.impacts.some(i => i.direction === filterDir)) return false;
-      return true;
-    });
-    // Tri côté client : récence → priorité → catégorie présente
-    return result.sort((a, b) => scoreItem(b) - scoreItem(a));
+  // Filtre + tri — articles avec catégories macro et articles sans
+  const { topFiltered, otherItems } = useMemo(() => {
+    const hasActiveFilter = selectedCats.size > 0 || filterDir !== "all" || priorityOnly;
+
+    // Articles filtrés (tous)
+    const allFiltered = items
+      .filter(item => {
+        if (priorityOnly && !item.categories.some(c => HIGH_PRIO.has(c))) return false;
+        if (selectedCats.size > 0 && !item.categories.some(c => selectedCats.has(c))) return false;
+        if (filterDir !== "all" && !item.impacts.some(i => i.direction === filterDir)) return false;
+        return true;
+      })
+      .sort((a, b) => scoreItem(b) - scoreItem(a));
+
+    // TOP NEWS : articles reconnus (≥1 catégorie macro)
+    const top = allFiltered.filter(item => item.categories.some(c => PRIORITY_CATS_SET.has(c)));
+
+    // AUTRES : articles sans étiquette macro — uniquement quand aucun filtre actif
+    const others = hasActiveFilter
+      ? []
+      : items
+          .filter(item => !item.categories.some(c => PRIORITY_CATS_SET.has(c)))
+          .sort((a, b) => scoreItem(b) - scoreItem(a));
+
+    return { topFiltered: top, otherItems: others };
   }, [items, selectedCats, filterDir, priorityOnly]);
 
-  // Catégories présentes dans les articles actuels (pour afficher les boutons pertinents)
+  // Boutons de catégories : dynamiques + catégories "toujours visibles"
   const activeCats = useMemo(() => {
     const set = new Set<string>();
     for (const item of items) item.categories.forEach(c => set.add(c));
+    ALWAYS_VISIBLE.forEach(c => set.add(c)); // toujours afficher ces catégories
     return PRIORITY_CATS.filter(c => set.has(c));
   }, [items]);
 
@@ -141,7 +159,6 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
 
         {/* Ligne 1 : contrôles + direction + prioritaire */}
         <div className="flex items-center gap-2 flex-wrap">
-          {/* Live 1min */}
           <button onClick={() => setAutoRefresh(a => !a)}
             className={`flex items-center gap-1.5 text-[9px] px-2 py-1 rounded-full border transition-colors shrink-0 ${
               autoRefresh
@@ -152,7 +169,6 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
             {autoRefresh ? "Live 1min" : "Pause"}
           </button>
 
-          {/* Actualiser */}
           <button onClick={() => { onRefresh(); setLastRefreshAt(new Date()); }} disabled={loading}
             className="flex items-center gap-1 text-[9px] text-slate-500 hover:text-slate-300 disabled:opacity-40 shrink-0 transition-colors">
             <RefreshCw size={9} className={loading ? "animate-spin" : ""} />
@@ -193,7 +209,7 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
 
           <div className="ml-auto flex items-center gap-2 shrink-0">
             <span className="text-[10px] text-slate-600">
-              {loading ? "…" : `${filtered.length} article${filtered.length !== 1 ? "s" : ""}`}
+              {loading ? "…" : `${topFiltered.length} article${topFiltered.length !== 1 ? "s" : ""}`}
             </span>
             {anyFilter && (
               <button onClick={clearFilters}
@@ -210,7 +226,6 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
             <span className="text-[9px] text-amber-400 uppercase tracking-wider font-semibold shrink-0">
               Catégorie
             </span>
-            {/* "Toutes" remet la sélection à zéro */}
             <button onClick={() => setSelectedCats(new Set())}
               className={`text-[10px] px-2 py-0.5 rounded-full font-semibold border transition-colors shrink-0 ${
                 selectedCats.size === 0
@@ -238,23 +253,50 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
         )}
       </div>
 
-      {/* ── Liste ───────────────────────────────────────────────────────────── */}
+      {/* ── TOP NEWS ────────────────────────────────────────────────────────── */}
       {loading && items.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-16 text-slate-600 gap-3">
           <Loader2 size={24} className="animate-spin" />
           <span className="text-sm">Chargement des actualités…</span>
           <span className="text-[11px] text-slate-700">InvestingLive · Reuters · Bloomberg</span>
         </div>
-      ) : filtered.length === 0 ? (
+      ) : topFiltered.length === 0 && otherItems.length === 0 ? (
         <div className="text-center py-12 text-slate-600 text-sm">
           Aucune actualité pour ce filtre.
         </div>
       ) : (
-        <div className="space-y-2">
-          {filtered.map(item => (
-            <NewsCard key={item.id} item={item} />
-          ))}
-        </div>
+        <>
+          {/* Articles macro / top news */}
+          {topFiltered.length > 0 && (
+            <div className="space-y-2">
+              {topFiltered.map(item => (
+                <NewsCard key={item.id} item={item} />
+              ))}
+            </div>
+          )}
+
+          {/* Section "Autres actualités" — articles sans étiquette macro */}
+          {otherItems.length > 0 && (
+            <div className="mt-1">
+              <button
+                onClick={() => setOthersOpen(o => !o)}
+                className="w-full flex items-center gap-2 px-3 py-2 rounded-xl border border-slate-800 bg-slate-900/50 text-slate-600 hover:text-slate-400 transition-colors text-[10px] font-medium"
+              >
+                {othersOpen ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+                <span>Autres actualités</span>
+                <span className="ml-auto text-slate-700">{otherItems.length} article{otherItems.length !== 1 ? "s" : ""} non reconnus</span>
+              </button>
+
+              {othersOpen && (
+                <div className="mt-2 space-y-2">
+                  {otherItems.map(item => (
+                    <NewsCard key={item.id} item={item} secondary />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </>
       )}
     </div>
   );
@@ -262,7 +304,7 @@ export default function NewsTab({ items, loading, onRefresh }: Props) {
 
 // ── NewsCard ──────────────────────────────────────────────────────────────────
 
-function NewsCard({ item }: { item: NewsItem }) {
+function NewsCard({ item, secondary = false }: { item: NewsItem; secondary?: boolean }) {
   const [expanded, setExpanded] = useState(false);
 
   const overallDir =
@@ -271,20 +313,22 @@ function NewsCard({ item }: { item: NewsItem }) {
     : item.impacts.some(i => i.direction === "bearish") ? "bearish"
     : "neutral";
 
-  const isPriority = item.categories.some(c =>
+  const isPriority = !secondary && item.categories.some(c =>
     ["Discours BC", "Décision Taux", "Crise", "Guerre", "Chef d'État"].includes(c)
   );
 
-  const borderCls =
-    overallDir === "bullish" ? "border-emerald-500/25" :
-    overallDir === "bearish" ? "border-red-500/25" :
-    overallDir === "mixed"   ? "border-amber-500/20" :
-    "border-slate-700/30";
+  const borderCls = secondary
+    ? "border-slate-800/50"
+    : overallDir === "bullish" ? "border-emerald-500/25"
+    : overallDir === "bearish" ? "border-red-500/25"
+    : overallDir === "mixed"   ? "border-amber-500/20"
+    : "border-slate-700/30";
 
-  const bgCls =
-    overallDir === "bullish" ? "bg-emerald-500/5" :
-    overallDir === "bearish" ? "bg-red-500/5" :
-    "bg-slate-800/30";
+  const bgCls = secondary
+    ? "bg-slate-900/30"
+    : overallDir === "bullish" ? "bg-emerald-500/5"
+    : overallDir === "bearish" ? "bg-red-500/5"
+    : "bg-slate-800/30";
 
   const topCat  = PRIORITY_CATS.find(p => item.categories.includes(p));
   const topMeta = topCat ? CATEGORY_META[topCat] : null;
@@ -292,7 +336,6 @@ function NewsCard({ item }: { item: NewsItem }) {
   return (
     <div className={`rounded-xl border ${borderCls} ${bgCls} overflow-hidden ${isPriority ? "ring-1 ring-offset-0 ring-amber-500/20" : ""}`}>
       <div className="p-3">
-        {/* Header */}
         <div className="flex items-center gap-2 mb-1.5 flex-wrap">
           <span className={`text-[9px] font-semibold px-2 py-0.5 rounded-full ${SOURCE_COLORS[item.source] ?? "bg-slate-700/40 text-slate-400"}`}>
             {item.source}
@@ -308,23 +351,20 @@ function NewsCard({ item }: { item: NewsItem }) {
           )}
         </div>
 
-        {/* Titre */}
         <a href={item.url} target="_blank" rel="noopener noreferrer"
           className="group flex items-start gap-1.5 mb-1.5">
-          <span className="text-[12px] text-slate-200 leading-snug font-medium group-hover:text-white transition-colors">
+          <span className={`text-[12px] leading-snug font-medium group-hover:text-white transition-colors ${secondary ? "text-slate-400" : "text-slate-200"}`}>
             {item.title}
           </span>
           <ExternalLink size={10} className="text-slate-600 group-hover:text-slate-400 shrink-0 mt-0.5" />
         </a>
 
-        {/* Résumé */}
-        {item.summary && (
+        {item.summary && !secondary && (
           <p className="text-[11px] text-slate-500 mb-1.5 leading-relaxed line-clamp-2">
             {item.summary}
           </p>
         )}
 
-        {/* Impact badges + heure + bouton analyse */}
         {item.impacts.length > 0 && (
           <div className="flex flex-wrap items-center gap-1.5">
             {item.impacts.map(imp => (
@@ -342,15 +382,20 @@ function NewsCard({ item }: { item: NewsItem }) {
             ))}
             <div className="ml-auto flex items-center gap-1.5 shrink-0">
               <span className="text-[10px] text-slate-600">{formatRelativeTime(item.publishedAt)}</span>
-              <button onClick={() => setExpanded(e => !e)}
-                className="text-[9px] text-slate-500 hover:text-slate-300 px-1.5 py-0.5 rounded-full border border-slate-700/30 transition-colors">
-                {expanded ? "▲" : "▼ Analyse"}
-              </button>
+              {!secondary && (
+                <button onClick={() => setExpanded(e => !e)}
+                  className="text-[9px] text-slate-500 hover:text-slate-300 px-1.5 py-0.5 rounded-full border border-slate-700/30 transition-colors">
+                  {expanded ? "▲" : "▼ Analyse"}
+                </button>
+              )}
             </div>
           </div>
         )}
 
-        {/* Détail des raisons */}
+        {!secondary && item.impacts.length === 0 && (
+          <span className="text-[10px] text-slate-600">{formatRelativeTime(item.publishedAt)}</span>
+        )}
+
         {expanded && item.impacts.length > 0 && (
           <div className="mt-2 space-y-1.5 border-t border-slate-700/30 pt-2">
             {item.impacts.map(imp => (