feat: wire frontend state and data flow for multi-chart support

- Add activeChartId/charts state to page.tsx with chart fetching on mount
- ChartSelector integrated in sidebar between header and file upload
- CandleChart and SvgOverlay fetch data scoped by activeChartId
- FileUpload returns chart info, auto-selects new chart after upload
- Annotation create/delete flows include chart_id
- Export scoped by activeChartId
- Toolbox receives activeChartId prop

src/components/CandleChart.tsx

@@ -42,6 +42,7 @@ interface CandleChartProps {
   selectedColor: string;
   selectedLabelId?: number | null;
   onLabelSelect?: (id: number) => void;
+  activeChartId?: number | null;
 }
 
 export interface CandleChartHandle {
@@ -49,7 +50,7 @@ export interface CandleChartHandle {
 }
 
 const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
-  ({ activeTool, onAnnotationChange, selectedColor, selectedLabelId, onLabelSelect }, ref) => {
+  ({ activeTool, onAnnotationChange, selectedColor, selectedLabelId, onLabelSelect, activeChartId }, ref) => {
     const chartContainerRef = useRef<HTMLDivElement>(null);
     const chartRef = useRef<IChartApi | null>(null);
     const seriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
@@ -68,7 +69,8 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
     // Fetch candles from API
     const fetchCandles = async () => {
       try {
-        const response = await fetch('/api/candles');
+        const url = activeChartId ? `/api/candles?chartId=${activeChartId}` : '/api/candles';
+        const response = await fetch(url);
         const data = await response.json();
         setCandles(data);
         setIsEmpty(data.length === 0);
@@ -82,7 +84,8 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
     // Fetch annotations from API
     const fetchAnnotations = async () => {
       try {
-        const response = await fetch('/api/annotations');
+        const url = activeChartId ? `/api/annotations?chartId=${activeChartId}` : '/api/annotations';
+        const response = await fetch(url);
         const data = await response.json();
         setAnnotations(data);
         return data;
@@ -308,6 +311,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
               body: JSON.stringify({
                 timestamp: nearestCandle.time,
                 label_type: activeTool,
+                chart_id: activeChartId,
               }),
             });
 
@@ -410,6 +414,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
           activeTool={activeTool}
           onAnnotationChange={onAnnotationChange}
           selectedColor={selectedColor}
+          activeChartId={activeChartId}
         />
       </div>
     );

src/components/FileUpload.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { Upload } from 'lucide-react';
 
 interface FileUploadProps {
-  onUploadSuccess: () => void;
+  onUploadSuccess: (chart: { id: number; name: string }) => void;
 }
 
 export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
@@ -36,7 +36,7 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
           type: 'success',
           text: `Successfully uploaded ${data.count} candle records`,
         });
-        onUploadSuccess();
+        onUploadSuccess(data.chart);
       } else {
         setMessage({
           type: 'error',

src/components/SvgOverlay.tsx

@@ -23,6 +23,7 @@ interface SvgOverlayProps {
   activeTool: string | null;
   onAnnotationChange?: () => void;
   selectedColor: string;
+  activeChartId?: number | null;
 }
 
 interface Point {
@@ -42,6 +43,7 @@ export default function SvgOverlay({
   activeTool,
   onAnnotationChange,
   selectedColor,
+  activeChartId,
 }: SvgOverlayProps) {
   const svgRef = useRef<SVGSVGElement>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -54,7 +56,8 @@ export default function SvgOverlay({
   // Fetch annotations
   const fetchAnnotations = async () => {
     try {
-      const response = await fetch('/api/annotations');
+      const url = activeChartId ? `/api/annotations?chartId=${activeChartId}` : '/api/annotations';
+      const response = await fetch(url);
       const data = await response.json();
       setAnnotations(data);
     } catch (error) {
@@ -232,6 +235,7 @@ export default function SvgOverlay({
             body: JSON.stringify({
               timestamp: drawingLine.start.time,
               label_type: 'line',
+              chart_id: activeChartId,
               color: selectedColor,
               geometry: {
                 startTime: drawingLine.start.time,

src/components/Toolbox.tsx

@@ -36,6 +36,7 @@ interface ToolboxProps {
   selectedLabelId?: number | null;
   onLabelSelect?: (id: number) => void;
   onLabelDelete?: (id: number) => void;
+  activeChartId?: number | null;
 }
 
 export default function Toolbox({
@@ -48,6 +49,7 @@ export default function Toolbox({
   selectedLabelId = null,
   onLabelSelect,
   onLabelDelete,
+  activeChartId,
 }: ToolboxProps) {
   const [labelsExpanded, setLabelsExpanded] = useState(true);
   const [searchText, setSearchText] = useState('');