feat: create UI shell and components

- Toolbox component with tool selection (break up/down, line, delete)
- FileUpload component with CSV upload functionality
- Main page layout with sidebar and chart area
- Tool state management and export functionality

src/components/FileUpload.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Upload } from 'lucide-react';
+
+interface FileUploadProps {
+  onUploadSuccess: () => void;
+}
+
+export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setIsUploading(true);
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setMessage({
+          type: 'success',
+          text: `Successfully uploaded ${data.count} candle records`,
+        });
+        onUploadSuccess();
+      } else {
+        setMessage({
+          type: 'error',
+          text: data.error || 'Upload failed',
+        });
+      }
+    } catch (error: any) {
+      setMessage({
+        type: 'error',
+        text: error.message || 'Upload failed',
+      });
+    } finally {
+      setIsUploading(false);
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  return (
+    <div className="mb-4 p-4 bg-secondary/50 rounded-lg border border-border">
+      <h3 className="text-sm font-semibold mb-2">Upload CSV Data</h3>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".csv"
+        onChange={handleFileChange}
+        disabled={isUploading}
+        className="hidden"
+        id="csv-upload"
+      />
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-full"
+        onClick={() => fileInputRef.current?.click()}
+        disabled={isUploading}
+      >
+        <Upload className="w-4 h-4 mr-2" />
+        {isUploading ? 'Uploading...' : 'Choose CSV File'}
+      </Button>
+
+      {message && (
+        <div
+          className={`mt-2 text-xs p-2 rounded ${
+            message.type === 'success'
+              ? 'bg-green-500/10 text-green-500 border border-green-500/20'
+              : 'bg-red-500/10 text-red-500 border border-red-500/20'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Toolbox.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState } from 'react';
+import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, Download } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export type Tool = 'break_up' | 'break_down' | 'line' | 'delete' | null;
+
+interface ToolboxProps {
+  activeTool: Tool;
+  onToolChange: (tool: Tool) => void;
+  onExport: () => void;
+}
+
+export default function Toolbox({ activeTool, onToolChange, onExport }: ToolboxProps) {
+  const handleToolClick = (tool: Tool) => {
+    // Toggle: if clicking the active tool, deactivate it
+    if (activeTool === tool) {
+      onToolChange(null);
+    } else {
+      onToolChange(tool);
+    }
+  };
+
+  return (
+    <div className="w-64 bg-card border-r border-border p-4 flex flex-col gap-4">
+      <h2 className="text-lg font-semibold text-foreground">Annotation Tools</h2>
+
+      <div className="flex flex-col gap-2">
+        <Button
+          variant={activeTool === 'break_up' ? 'default' : 'outline'}
+          className="justify-start gap-2"
+          onClick={() => handleToolClick('break_up')}
+        >
+          <ArrowUpCircle className="w-5 h-5" />
+          Label: Break Up
+        </Button>
+
+        <Button
+          variant={activeTool === 'break_down' ? 'default' : 'outline'}
+          className="justify-start gap-2"
+          onClick={() => handleToolClick('break_down')}
+        >
+          <ArrowDownCircle className="w-5 h-5" />
+          Label: Break Down
+        </Button>
+
+        <Button
+          variant={activeTool === 'line' ? 'default' : 'outline'}
+          className="justify-start gap-2"
+          onClick={() => handleToolClick('line')}
+        >
+          <TrendingUp className="w-5 h-5" />
+          Draw Line
+        </Button>
+
+        <Button
+          variant={activeTool === 'delete' ? 'destructive' : 'outline'}
+          className="justify-start gap-2"
+          onClick={() => handleToolClick('delete')}
+        >
+          <Trash2 className="w-5 h-5" />
+          Delete
+        </Button>
+      </div>
+
+      <div className="mt-auto pt-4 border-t border-border">
+        <Button
+          variant="secondary"
+          className="w-full justify-start gap-2"
+          onClick={onExport}
+        >
+          <Download className="w-5 h-5" />
+          Export CSV
+        </Button>
+      </div>
+    </div>
+  );
+}