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/api/annotations/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { db } from '@/lib/db';
 import { annotations } from '@/lib/db/schema';
+import { eq, inArray } from 'drizzle-orm';
 
 // GET all annotations
 export async function GET() {
@@ -66,3 +67,42 @@ export async function POST(request: NextRequest) {
     );
   }
 }
+
+// DELETE annotations with bulk operations
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = request.nextUrl;
+    const type = searchParams.get('type');
+    const all = searchParams.get('all');
+
+    let result;
+
+    if (all === 'true') {
+      // Delete all annotations
+      result = await db.delete(annotations).returning();
+    } else if (type) {
+      // Delete by type(s)
+      const types = type.split(',').map((t) => t.trim());
+      result = await db
+        .delete(annotations)
+        .where(inArray(annotations.label_type, types))
+        .returning();
+    } else {
+      // No filter specified
+      return NextResponse.json(
+        { error: 'Specify type or all parameter for bulk delete' },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      deleted: result.length,
+    });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || 'Failed to delete annotations' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/health/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/lib/db';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = request.nextUrl;
+    const checkDb = searchParams.get('check');
+
+    const response: any = {
+      status: 'ok',
+      timestamp: Date.now(),
+    };
+
+    if (checkDb === 'db') {
+      try {
+        // Test database connectivity with a simple query
+        await db.execute('SELECT 1');
+        response.database = 'ok';
+      } catch (dbError: any) {
+        return NextResponse.json(
+          {
+            status: 'error',
+            database: 'failed',
+            message: dbError.message || 'Database check failed',
+          },
+          { status: 503 }
+        );
+      }
+    }
+
+    return NextResponse.json(response);
+  } catch (error: any) {
+    return NextResponse.json(
+      {
+        status: 'error',
+        message: error.message || 'Health check failed',
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/globals.css

@@ -4,25 +4,25 @@
 
 @layer base {
   :root {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --background: 120 100% 4%;
+    --foreground: 120 100% 50%;
+    --card: 120 100% 6%;
+    --card-foreground: 120 100% 50%;
+    --popover: 120 100% 4%;
+    --popover-foreground: 120 100% 50%;
+    --primary: 120 100% 50%;
+    --primary-foreground: 120 100% 4%;
+    --secondary: 120 100% 8%;
+    --secondary-foreground: 120 100% 50%;
+    --muted: 120 100% 10%;
+    --muted-foreground: 120 100% 40%;
+    --accent: 120 100% 50%;
+    --accent-foreground: 120 100% 4%;
+    --destructive: 348 100% 50%;
+    --destructive-foreground: 120 100% 4%;
+    --border: 120 100% 10%;
+    --input: 120 100% 8%;
+    --ring: 120 100% 50%;
     --radius: 0.5rem;
   }
 }
@@ -33,6 +33,24 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+  }
+}
+
+@layer base {
+  ::selection {
+    @apply bg-matrix/40 text-matrix;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    @apply bg-matrixDark;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    @apply bg-matrix rounded;
   }
 }

src/app/layout.tsx

@@ -13,6 +13,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
       <body className="antialiased">{children}</body>
     </html>
   );

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>