feat: add color support for line annotations

- Add color field to annotations schema with default blue (#3b82f6)
- Add color picker UI with 5 preset colors (red, green, blue, yellow, white)
- Pass selected color through component hierarchy (Page -> Toolbox, CandleChart -> SvgOverlay)
- Store color when creating line annotations
- Render lines with their stored color
- Update database with color column
- Preview lines show selected color during drawing

Phase 1 of LINE_DRAWING_IMPROVEMENTS.md complete

src/app/api/annotations/route.ts

@@ -26,7 +26,7 @@ export async function GET() {
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { timestamp, label_type, geometry } = body;
+    const { timestamp, label_type, geometry, color } = body;
 
     // Validate required fields
     if (!timestamp || !label_type) {
@@ -45,6 +45,7 @@ export async function POST(request: NextRequest) {
         timestamp,
         label_type,
         geometry: geometryString,
+        color: color || '#3b82f6',
         created_at: Math.floor(Date.now() / 1000),
       })
       .returning();

src/app/page.tsx

@@ -7,6 +7,7 @@ import CandleChart, { CandleChartHandle } from '@/components/CandleChart';
 
 export default function Home() {
   const [activeTool, setActiveTool] = useState<Tool>(null);
+  const [selectedColor, setSelectedColor] = useState('#3b82f6');
   const chartRef = useRef<CandleChartHandle>(null);
 
   const handleExport = () => {
@@ -37,6 +38,8 @@ export default function Home() {
           activeTool={activeTool}
           onToolChange={setActiveTool}
           onExport={handleExport}
+          selectedColor={selectedColor}
+          onColorChange={setSelectedColor}
         />
       </aside>
 
@@ -46,6 +49,7 @@ export default function Home() {
           ref={chartRef}
           activeTool={activeTool}
           onAnnotationChange={handleAnnotationChange}
+          selectedColor={selectedColor}
         />
       </main>
     </div>

src/components/CandleChart.tsx

@@ -28,6 +28,7 @@ interface Annotation {
 interface CandleChartProps {
   activeTool: string | null;
   onAnnotationChange?: () => void;
+  selectedColor: string;
 }
 
 export interface CandleChartHandle {
@@ -35,7 +36,7 @@ export interface CandleChartHandle {
 }
 
 const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
-  ({ activeTool, onAnnotationChange }, ref) => {
+  ({ activeTool, onAnnotationChange, selectedColor }, ref) => {
     const chartContainerRef = useRef<HTMLDivElement>(null);
     const chartRef = useRef<IChartApi | null>(null);
     const seriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
@@ -277,6 +278,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
           series={seriesRef.current}
           activeTool={activeTool}
           onAnnotationChange={onAnnotationChange}
+          selectedColor={selectedColor}
         />
       </div>
     );

src/components/SvgOverlay.tsx

@@ -13,6 +13,7 @@ interface Annotation {
     endTime?: number;
     endPrice?: number;
   } | null;
+  color?: string;
   created_at: number;
 }
 
@@ -21,6 +22,7 @@ interface SvgOverlayProps {
   series: ISeriesApi<'Candlestick'> | null;
   activeTool: string | null;
   onAnnotationChange?: () => void;
+  selectedColor: string;
 }
 
 interface Point {
@@ -33,6 +35,7 @@ export default function SvgOverlay({
   series,
   activeTool,
   onAnnotationChange,
+  selectedColor,
 }: SvgOverlayProps) {
   const svgRef = useRef<SVGSVGElement>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -169,6 +172,7 @@ export default function SvgOverlay({
             body: JSON.stringify({
               timestamp: drawingLine.start.time,
               label_type: 'line',
+              color: selectedColor,
               geometry: {
                 startTime: drawingLine.start.time,
                 startPrice: drawingLine.start.price,
@@ -299,7 +303,7 @@ export default function SvgOverlay({
           y1={start.y}
           x2={end.x}
           y2={end.y}
-          stroke="#3b82f6"
+          stroke={annotation.color || '#3b82f6'}
           strokeWidth="2"
           style={{ cursor: activeTool === 'delete' ? 'pointer' : 'default' }}
         />
@@ -322,7 +326,7 @@ export default function SvgOverlay({
         y1={start.y}
         x2={end.x}
         y2={end.y}
-        stroke="#3b82f6"
+        stroke={selectedColor}
         strokeWidth="2"
         strokeDasharray="5,5"
         opacity="0.6"

src/components/Toolbox.tsx

@@ -10,9 +10,11 @@ interface ToolboxProps {
   activeTool: Tool;
   onToolChange: (tool: Tool) => void;
   onExport: () => void;
+  selectedColor: string;
+  onColorChange: (color: string) => void;
 }
 
-export default function Toolbox({ activeTool, onToolChange, onExport }: ToolboxProps) {
+export default function Toolbox({ activeTool, onToolChange, onExport, selectedColor, onColorChange }: ToolboxProps) {
   const handleToolClick = (tool: Tool) => {
     // Toggle: if clicking the active tool, deactivate it
     if (activeTool === tool) {
@@ -54,6 +56,38 @@ export default function Toolbox({ activeTool, onToolChange, onExport }: ToolboxP
           Draw Line
         </Button>
 
+        {/* Color picker - shown when line tool is available */}
+        <div className="flex gap-1 px-1">
+          {[
+            { color: '#ef4444', name: 'Red' },
+            { color: '#22c55e', name: 'Green' },
+            { color: '#3b82f6', name: 'Blue' },
+            { color: '#eab308', name: 'Yellow' },
+            { color: '#ffffff', name: 'White' },
+          ].map((preset) => (
+            <Button
+              key={preset.color}
+              variant={selectedColor === preset.color ? 'default' : 'outline'}
+              size="sm"
+              className="w-8 h-8 p-0"
+              style={{
+                backgroundColor: selectedColor === preset.color ? preset.color : 'transparent',
+                borderColor: preset.color,
+                borderWidth: '2px',
+              }}
+              onClick={() => onColorChange(preset.color)}
+              title={preset.name}
+            >
+              {selectedColor === preset.color ? '' : (
+                <div
+                  className="w-4 h-4 rounded-sm"
+                  style={{ backgroundColor: preset.color }}
+                />
+              )}
+            </Button>
+          ))}
+        </div>
+
         <Button
           variant={activeTool === 'delete' ? 'destructive' : 'outline'}
           className="justify-start gap-2"

src/lib/db/schema.ts

@@ -14,5 +14,6 @@ export const annotations = sqliteTable('annotations', {
   timestamp: integer('timestamp').notNull(),
   label_type: text('label_type').notNull(),
   geometry: text('geometry'), // JSON string for line coordinates
+  color: text('color').default('#3b82f6'), // hex color code
   created_at: integer('created_at').notNull(),
 });