feat: instrument analysis

frontend/src/components/InstrumentChart.tsx

@@ -38,6 +38,8 @@ interface Props {
   chartType?:   'candles' | 'line'
   onDateHover?: (date: string | null) => void
   theoryCurve?: TheoPoint[]
+  /** Called once the chart is ready with (dateToCoord, canvasPageLeft) — lets external components align with the chart's x-axis */
+  onChartReady?: (dateToCoord: (d: string) => number | null, canvasPageLeft: number) => void
 }
 
 export type { TheoPoint }
@@ -67,7 +69,7 @@ const CAT_LABELS: Record<string, string> = {
   technical:      'Tech.',
 }
 
-export default function InstrumentChart({ priceData, indicators, events = [], height = 420, chartType = 'candles', onDateHover, theoryCurve }: Props) {
+export default function InstrumentChart({ priceData, indicators, events = [], height = 420, chartType = 'candles', onDateHover, theoryCurve, onChartReady }: Props) {
   const containerRef    = useRef<HTMLDivElement>(null)
   const cleanupRef      = useRef<(() => void) | null>(null)
   const onHoverRef      = useRef(onDateHover)
@@ -208,6 +210,12 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
 
       chart.timeScale().fitContent()
 
+      // Expose coordinate mapping so siblings can align with the chart x-axis
+      if (onChartReady && containerRef.current) {
+        const canvasLeft = containerRef.current.getBoundingClientRect().left
+        onChartReady((d: string) => chart.timeScale().timeToCoordinate(d as any), canvasLeft)
+      }
+
       // ── Star overlay — ★ icons positioned via chart coordinate API ────────
       const candleMap: Record<string, number> = {}
       for (const c of priceData) candleMap[c.time] = c.high
@@ -318,6 +326,7 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
         chart.timeScale().unsubscribeVisibleLogicalRangeChange(renderStars)
         if (starsOverlay.parentNode) starsOverlay.parentNode.removeChild(starsOverlay)
         chart.remove()
+        onChartReady?.(null as any, 0)
       }
     })
 
@@ -326,7 +335,7 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
       cleanupRef.current?.()
       cleanupRef.current = null
     }
-  }, [priceData, indicators, events, height, chartType, theoryCurve])
+  }, [priceData, indicators, events, height, chartType, theoryCurve, onChartReady])
 
   return (
     <div className="bg-dark-900/60 rounded-xl border border-slate-700/40 overflow-hidden">