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/app/page.tsx

@@ -1,12 +1,20 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import Toolbox, { Tool } from '@/components/Toolbox';
 import FileUpload from '@/components/FileUpload';
 import CandleChart, { CandleChartHandle } from '@/components/CandleChart';
+import ChartSelector from '@/components/ChartSelector';
+
+interface Chart {
+  id: number;
+  name: string;
+  created_at: number;
+}
 
 interface Annotation {
   id: number;
+  chart_id: number;
   timestamp: number;
   label_type: string;
   geometry: any;
@@ -18,28 +26,83 @@ export default function Home() {
   const [selectedColor, setSelectedColor] = useState('#3b82f6');
   const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null);
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [charts, setCharts] = useState<Chart[]>([]);
+  const [activeChartId, setActiveChartId] = useState<number | null>(null);
   const chartRef = useRef<CandleChartHandle>(null);
 
+  // Fetch charts list
+  const fetchCharts = useCallback(async () => {
+    try {
+      const response = await fetch('/api/charts');
+      const data = await response.json();
+      setCharts(data);
+      return data as Chart[];
+    } catch (error) {
+      console.error('Failed to fetch charts:', error);
+      return [];
+    }
+  }, []);
+
+  // Fetch annotations for active chart
+  const fetchAnnotations = useCallback(async (chartId: number | null) => {
+    if (!chartId) {
+      setAnnotations([]);
+      return;
+    }
+    try {
+      const response = await fetch(`/api/annotations?chartId=${chartId}`);
+      const data = await response.json();
+      setAnnotations(data);
+    } catch (error) {
+      console.error('Failed to fetch annotations:', error);
+    }
+  }, []);
+
+  // Fetch charts on mount, auto-select the most recent
+  useEffect(() => {
+    const init = async () => {
+      const chartList = await fetchCharts();
+      if (chartList.length > 0) {
+        setActiveChartId(chartList[0].id); // sorted by created_at desc
+      }
+    };
+    init();
+  }, [fetchCharts]);
+
+  // When activeChartId changes, refetch data
+  useEffect(() => {
+    if (activeChartId !== null) {
+      chartRef.current?.refreshData();
+      fetchAnnotations(activeChartId);
+      setSelectedLabelId(null);
+    }
+  }, [activeChartId, fetchAnnotations]);
+
   const handleExport = () => {
-    window.location.href = '/api/export';
+    if (activeChartId) {
+      window.location.href = `/api/export?chartId=${activeChartId}`;
+    } else {
+      window.location.href = '/api/export';
+    }
   };
 
-  const handleUploadSuccess = () => {
-    // Refresh chart data after successful upload
-    chartRef.current?.refreshData();
+  const handleUploadSuccess = (chart: { id: number; name: string }) => {
+    // Add new chart to list and select it
+    const newChart: Chart = {
+      id: chart.id,
+      name: chart.name,
+      created_at: Math.floor(Date.now() / 1000),
+    };
+    setCharts((prev) => [newChart, ...prev]);
+    setActiveChartId(chart.id);
   };
 
   const handleAnnotationChange = async () => {
-    // Refresh chart when annotations change
     await chartRef.current?.refreshData();
-    // Fetch annotations for sidebar
-    const response = await fetch('/api/annotations');
-    const data = await response.json();
-    setAnnotations(data);
+    await fetchAnnotations(activeChartId);
   };
 
   const handleLabelDelete = async (id: number) => {
-    // Remove from local state
     setAnnotations(annotations.filter((a) => a.id !== id));
     if (selectedLabelId === id) {
       setSelectedLabelId(null);
@@ -50,19 +113,24 @@ export default function Home() {
     setSelectedLabelId(id === -1 ? null : id);
   };
 
-  // Fetch annotations on mount
-  useEffect(() => {
-    const fetchAnnotations = async () => {
-      try {
-        const response = await fetch('/api/annotations');
-        const data = await response.json();
-        setAnnotations(data);
-      } catch (error) {
-        console.error('Failed to fetch annotations:', error);
+  const handleSelectChart = (chartId: number) => {
+    setActiveChartId(chartId);
+  };
+
+  const handleDeleteChart = async (chartId: number) => {
+    try {
+      const response = await fetch(`/api/charts/${chartId}`, { method: 'DELETE' });
+      if (response.ok) {
+        const remaining = charts.filter((c) => c.id !== chartId);
+        setCharts(remaining);
+        if (activeChartId === chartId) {
+          setActiveChartId(remaining.length > 0 ? remaining[0].id : null);
+        }
       }
-    };
-    fetchAnnotations();
-  }, []);
+    } catch (error) {
+      console.error('Failed to delete chart:', error);
+    }
+  };
 
   // Keyboard handler for Delete/Backspace key
   useEffect(() => {
@@ -100,7 +168,15 @@ export default function Home() {
             Manage Annotation Types
           </a>
         </div>
-        <div className="p-6">
+        <div className="p-6 pb-3">
+          <ChartSelector
+            charts={charts}
+            activeChartId={activeChartId}
+            onSelectChart={handleSelectChart}
+            onDeleteChart={handleDeleteChart}
+          />
+        </div>
+        <div className="px-6 pb-3">
           <FileUpload onUploadSuccess={handleUploadSuccess} />
         </div>
         <div className="px-6 pb-6">
@@ -114,6 +190,7 @@ export default function Home() {
             selectedLabelId={selectedLabelId}
             onLabelSelect={handleLabelSelect}
             onLabelDelete={handleLabelDelete}
+            activeChartId={activeChartId}
           />
         </div>
       </aside>
@@ -127,6 +204,7 @@ export default function Home() {
           selectedColor={selectedColor}
           selectedLabelId={selectedLabelId}
           onLabelSelect={handleLabelSelect}
+          activeChartId={activeChartId}
         />
       </main>
     </div>