+
+ {/* ── Header ── */}
+
+ {/* Instrument selector */}
+
+
+
+ {selectorOpen && (
+
+ {grouped.map(g => (
+
+
{g.label}
+
+ {g.items.map(inst => (
+
+ ))}
+
+
+ ))}
+
+ )}
+
+
+ {/* Category badge */}
+ {selected && (
+
+ {CATEGORY_LABELS[selected.category] ?? selected.category}
+
+ )}
+
+ {/* Current price */}
+ {snapshot && (
+
+
+ {snapshot.current_price?.toLocaleString('fr-FR', { maximumFractionDigits: 4 })}
+
+ = 0 ? 'text-emerald-400' : 'text-red-400')}>
+ {(changePct ?? 0) >= 0 ? '+' : ''}{changeAbs?.toFixed(2)} ({(changePct ?? 0) >= 0 ? '+' : ''}{changePct?.toFixed(2)}%)
+
+
+ )}
+
+ {/* Period selector */}
+
+ {PERIODS.map(p => (
+
+ ))}
+
+
+ {/* Description */}
+ {selected && (
+
{selected.description}
+ )}
+
+
+ {/* ── Loading state ── */}
+ {loading && (
+
+
+
+ {[1, 2, 3].map(i => (
+
+ ))}
+
+
+ )}
+
+ {/* ── Chart ── */}
+ {!loading && snapshot && (
+ <>
+
+
+ {/* ── 3-column grid ── */}
+
+
+
+
+
+
+ {/* ── AI Narrative ── */}
+
+ >
+ )}
+
+ {/* ── Empty/error state ── */}
+ {!loading && !snapshot && (
+
+
+
Aucune donnée disponible pour {instrumentId}
+
+ )}
+
+ {/* Close dropdown on outside click */}
+ {selectorOpen && (
+
setSelectorOpen(false)} />
+ )}
+
+ )
+}