feat: implement label management with sidebar, hacker theme, and Docker support

- Add label selection on chart with visual highlight (size 2x, color change)
- Implement keyboard delete handler (Delete/Backspace keys)
- Add comprehensive label management sidebar with:
  - Collapsible label annotations section
  - Search by timestamp
  - Filter by type (Break Up, Break Down, All)
  - Individual delete buttons
  - Count display
  - Click to select/highlight on chart
- Transform UI with hacker theme:
  - Matrix green (#00ff41) on dark background (#0a0e0a)
  - Monospace font (JetBrains Mono)
  - Glow effects on button hover and active states
  - Custom scrollbar styling
  - Terminal-inspired aesthetic
- Add Docker deployment:
  - Multi-stage Dockerfile with standalone output
  - docker-compose.yml with volume persistence
  - Non-root user (nextjs) for security
  - Health check endpoint integration
- Tailwind and CSS enhancements:
  - Custom colors (matrix, matrixDim, neonRed, etc.)
  - Glow box shadows and animations
  - Selection and scrollbar styling

src/app/page.tsx

@@ -1,13 +1,23 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Toolbox, { Tool } from '@/components/Toolbox';
 import FileUpload from '@/components/FileUpload';
 import CandleChart, { CandleChartHandle } from '@/components/CandleChart';
 
+interface Annotation {
+  id: number;
+  timestamp: number;
+  label_type: string;
+  geometry: any;
+  created_at: number;
+}
+
 export default function Home() {
   const [activeTool, setActiveTool] = useState<Tool>(null);
   const [selectedColor, setSelectedColor] = useState('#3b82f6');
+  const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
   const chartRef = useRef<CandleChartHandle>(null);
 
   const handleExport = () => {
@@ -19,11 +29,63 @@ export default function Home() {
     chartRef.current?.refreshData();
   };
 
-  const handleAnnotationChange = () => {
+  const handleAnnotationChange = async () => {
     // Refresh chart when annotations change
-    chartRef.current?.refreshData();
+    await chartRef.current?.refreshData();
+    // Fetch annotations for sidebar
+    const response = await fetch('/api/annotations');
+    const data = await response.json();
+    setAnnotations(data);
   };
 
+  const handleLabelDelete = async (id: number) => {
+    // Remove from local state
+    setAnnotations(annotations.filter((a) => a.id !== id));
+    if (selectedLabelId === id) {
+      setSelectedLabelId(null);
+    }
+  };
+
+  const handleLabelSelect = (id: number) => {
+    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);
+      }
+    };
+    fetchAnnotations();
+  }, []);
+
+  // Keyboard handler for Delete/Backspace key
+  useEffect(() => {
+    const handleKeyDown = async (e: KeyboardEvent) => {
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedLabelId !== null) {
+        try {
+          const response = await fetch(`/api/annotations/${selectedLabelId}`, {
+            method: 'DELETE',
+          });
+          if (response.ok) {
+            setSelectedLabelId(null);
+            chartRef.current?.refreshData();
+          }
+        } catch (error) {
+          console.error('Failed to delete label:', error);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedLabelId]);
+
   return (
     <div className="flex h-screen">
       {/* Sidebar */}
@@ -40,6 +102,10 @@ export default function Home() {
           onExport={handleExport}
           selectedColor={selectedColor}
           onColorChange={setSelectedColor}
+          annotations={annotations}
+          selectedLabelId={selectedLabelId}
+          onLabelSelect={handleLabelSelect}
+          onLabelDelete={handleLabelDelete}
         />
       </aside>
 
@@ -50,6 +116,8 @@ export default function Home() {
           activeTool={activeTool}
           onAnnotationChange={handleAnnotationChange}
           selectedColor={selectedColor}
+          selectedLabelId={selectedLabelId}
+          onLabelSelect={handleLabelSelect}
         />
       </main>
     </div>