feat: replace arrowDown markers with ★ stars overlay on chart, colored by category

- InstrumentChart: remove setMarkers arrowDown (level-colored)
  Add DOM overlay div with ★ HTML characters positioned via timeToCoordinate +
  priceToCoordinate(candle.high) - 52px; sized by impact_score; colored by category
  Label (title, 22 chars) rendered above each star; redrawn on scroll/zoom via
  subscribeVisibleLogicalRangeChange; cleaned up on unmount
  ChartEvent interface: add category, impact_score, end_date, description
  Header legend: replace ▼ LT/MT/CT with ★ category color legend
- InstrumentDashboard: remove EventStarsStrip (now internal to chart)
  Remove unused dateToMs helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/InstrumentChart.tsx

@@ -18,6 +18,10 @@ interface ChartEvent {
   date: string
   title: string
   level: string
+  category?: string
+  impact_score?: number
+  end_date?: string | null
+  description?: string
 }
 
 interface Props {
@@ -35,10 +39,22 @@ const MA_COLORS: Record<string, string> = {
   ma200: '#a855f7',
 }
 
-const LEVEL_COLORS: Record<string, string> = {
-  long:   '#7c3aed',
-  medium: '#3b82f6',
-  short:  '#10b981',
+const CAT_COLORS: Record<string, string> = {
+  event_calendar: '#f59e0b',
+  geopolitical:   '#ef4444',
+  fundamental:    '#10b981',
+  report:         '#3b82f6',
+  sentiment:      '#8b5cf6',
+  technical:      '#06b6d4',
+}
+
+const CAT_LABELS: Record<string, string> = {
+  event_calendar: 'Cal.',
+  geopolitical:   'Géo.',
+  fundamental:    'Fund.',
+  report:         'Report',
+  sentiment:      'Sent.',
+  technical:      'Tech.',
 }
 
 export default function InstrumentChart({ priceData, indicators, events = [], height = 420, onDateHover }: Props) {
@@ -142,23 +158,77 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
         chart.addLineSeries(bbOpts).setData(indicators.bb_lower)
       }
 
-      // Event markers
-      const timeSet = new Set(priceData.map(d => d.time))
-      const markers = events
-        .filter(ev => timeSet.has(ev.date))
-        .map(ev => ({
-          time:     ev.date,
-          position: 'aboveBar' as const,
-          color:    LEVEL_COLORS[ev.level] ?? '#f59e0b',
-          shape:    'arrowDown' as const,
-          text:     ev.title.slice(0, 18),
-        }))
-        .sort((a, b) => a.time.localeCompare(b.time))
-
-      if (markers.length) candleSeries.setMarkers(markers)
-
       chart.timeScale().fitContent()
 
+      // ── Star overlay — ★ icons positioned via chart coordinate API ────────
+      const candleMap: Record<string, number> = {}
+      for (const c of priceData) candleMap[c.time] = c.high
+
+      const starsOverlay = document.createElement('div')
+      starsOverlay.style.cssText = [
+        'position:absolute', 'top:0', 'left:0', 'width:100%', 'height:100%',
+        'pointer-events:none', 'overflow:hidden', 'z-index:10',
+      ].join(';')
+      containerRef.current!.appendChild(starsOverlay)
+
+      const renderStars = () => {
+        if (!active) return
+        starsOverlay.innerHTML = ''
+        const cw = containerRef.current?.clientWidth ?? 0
+        const ch = containerRef.current?.clientHeight ?? 0
+
+        for (const ev of events) {
+          const xCoord = chart.timeScale().timeToCoordinate(ev.date as any)
+          if (xCoord === null || xCoord < 0 || xCoord > cw) continue
+
+          const highPrice = candleMap[ev.date]
+          let yBase = ch * 0.15 // fallback: top 15%
+          if (highPrice !== undefined) {
+            const yHigh = candleSeries.priceToCoordinate(highPrice)
+            if (yHigh !== null) yBase = Math.max(20, yHigh - 52)
+          }
+
+          const cat   = ev.category ?? 'fundamental'
+          const color = CAT_COLORS[cat] ?? '#94a3b8'
+          const score = ev.impact_score ?? 0.5
+          const sz    = score >= 0.8 ? 15 : score >= 0.6 ? 12 : 10
+
+          const wrap = document.createElement('div')
+          wrap.style.cssText = [
+            `position:absolute`, `left:${xCoord}px`, `top:${yBase}px`,
+            `transform:translateX(-50%)`,
+            `display:flex`, `flex-direction:column`, `align-items:center`, `gap:1px`,
+            `pointer-events:auto`, `cursor:default`,
+          ].join(';')
+          wrap.title = `${ev.title}\n${ev.date}${ev.end_date ? ' → ' + ev.end_date : ''}`
+
+          const lbl = document.createElement('div')
+          lbl.style.cssText = [
+            `font-size:8px`, `font-family:ui-monospace,monospace`,
+            `color:${color}`, `white-space:nowrap`,
+            `text-shadow:0 1px 3px #000,0 0 6px #000`,
+            `line-height:1`, `max-width:90px`,
+            `overflow:hidden`, `text-overflow:ellipsis`,
+          ].join(';')
+          lbl.textContent = ev.title.slice(0, 22)
+
+          const star = document.createElement('div')
+          star.style.cssText = [
+            `font-size:${sz}px`, `color:${color}`, `line-height:1`,
+            `filter:drop-shadow(0 0 4px ${color}80)`,
+            `text-shadow:0 1px 3px #000`,
+          ].join(';')
+          star.textContent = '★'
+
+          wrap.appendChild(lbl)
+          wrap.appendChild(star)
+          starsOverlay.appendChild(wrap)
+        }
+      }
+
+      renderStars()
+      chart.timeScale().subscribeVisibleLogicalRangeChange(renderStars)
+
       // Crosshair → date callback
       chart.subscribeCrosshairMove((param: any) => {
         if (param?.time && typeof param.time === 'string') {
@@ -173,7 +243,12 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
       })
       ro.observe(containerRef.current)
 
-      cleanupRef.current = () => { ro.disconnect(); chart.remove() }
+      cleanupRef.current = () => {
+        ro.disconnect()
+        chart.timeScale().unsubscribeVisibleLogicalRangeChange(renderStars)
+        if (starsOverlay.parentNode) starsOverlay.parentNode.removeChild(starsOverlay)
+        chart.remove()
+      }
     })
 
     return () => {
@@ -195,11 +270,11 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
         <span className="flex items-center gap-1.5 opacity-40">
           <span className="inline-block w-5 border-t border-dashed border-slate-400" />BB(20,2)
         </span>
-        <span className="ml-auto flex items-center gap-3">
-          {Object.entries(LEVEL_COLORS).map(([l, c]) => (
-            <span key={l} className="flex items-center gap-1">
-              <span style={{ color: c }}>▼</span>
-              <span>{l === 'long' ? 'LT' : l === 'medium' ? 'MT' : 'CT'}</span>
+        <span className="ml-auto flex items-center gap-2.5">
+          {Object.entries(CAT_COLORS).map(([cat, c]) => (
+            <span key={cat} className="flex items-center gap-0.5" style={{ color: c }}>
+              <span style={{ fontSize: 10 }}>★</span>
+              <span style={{ fontSize: 9 }}>{CAT_LABELS[cat]}</span>
             </span>
           ))}
         </span>
@@ -209,7 +284,7 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
           <span className="text-slate-500 text-sm">Chargement...</span>
         </div>
       ) : (
-        <div ref={containerRef} style={{ height: `${height}px`, width: '100%' }} />
+        <div ref={containerRef} style={{ height: `${height}px`, width: '100%', position: 'relative' }} />
       )}
     </div>
   )