feat: implement sections 6-7 - span selection, preview, and label assignment popover

src/components/CandleChart.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 're
 import { createChart, IChartApi, ISeriesApi, CandlestickData, Time } from 'lightweight-charts';
 import { useTheme } from 'next-themes';
 import SvgOverlay from './SvgOverlay';
+import SpanAnnotationManager from './SpanAnnotationManager';
 
 interface Candle {
   time: number;
@@ -36,6 +37,31 @@ type AnnotationType = {
   is_active: number;
 };
 
+interface SpanAnnotation {
+  id: number;
+  chart_id: number;
+  start_time: number;
+  end_time: number;
+  label: string;
+  confidence: number | null;
+  outcome: string | null;
+  notes: string | null;
+  sub_spans: any;
+  color: string;
+  created_at: number;
+}
+
+interface SpanLabelType {
+  id: number;
+  name: string;
+  display_name: string;
+  color: string;
+  hotkey: string | null;
+  is_active: number;
+  sort_order: number;
+  created_at: number;
+}
+
 interface CandleChartProps {
   activeTool: string | null;
   onAnnotationChange?: () => void;
@@ -43,6 +69,11 @@ interface CandleChartProps {
   selectedLabelId?: number | null;
   onLabelSelect?: (id: number) => void;
   activeChartId?: number | null;
+  spanAnnotations?: SpanAnnotation[];
+  spanLabelTypes?: SpanLabelType[];
+  selectedSpanId?: number | null;
+  onSpanAnnotationsChange?: () => void;
+  onSelectedSpanChange?: (spanId: number | null) => void;
 }
 
 export interface CandleChartHandle {
@@ -50,7 +81,19 @@ export interface CandleChartHandle {
 }
 
 const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
-  ({ activeTool, onAnnotationChange, selectedColor, selectedLabelId, onLabelSelect, activeChartId }, ref) => {
+  ({ 
+    activeTool, 
+    onAnnotationChange, 
+    selectedColor, 
+    selectedLabelId, 
+    onLabelSelect, 
+    activeChartId,
+    spanAnnotations = [],
+    spanLabelTypes = [],
+    selectedSpanId = null,
+    onSpanAnnotationsChange,
+    onSelectedSpanChange,
+  }, ref) => {
     const chartContainerRef = useRef<HTMLDivElement>(null);
     const chartRef = useRef<IChartApi | null>(null);
     const seriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
@@ -416,6 +459,18 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
           selectedColor={selectedColor}
           activeChartId={activeChartId}
         />
+        <SpanAnnotationManager
+          chart={chartRef.current}
+          series={seriesRef.current}
+          activeTool={activeTool}
+          candles={candles}
+          spanAnnotations={spanAnnotations}
+          spanLabelTypes={spanLabelTypes}
+          selectedSpanId={selectedSpanId}
+          onSpanAnnotationsChange={onSpanAnnotationsChange || (() => {})}
+          onSelectedSpanChange={onSelectedSpanChange || (() => {})}
+          activeChartId={activeChartId}
+        />
       </div>
     );
   }