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

@@ -1,10 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import Toolbox, { Tool } from '@/components/Toolbox';
+import FileUpload from '@/components/FileUpload';
+
 export default function Home() {
+  const [activeTool, setActiveTool] = useState<Tool>(null);
+
+  const handleExport = () => {
+    window.location.href = '/api/export';
+  };
+
+  const handleUploadSuccess = () => {
+    // TODO: Trigger chart refresh
+    console.log('Upload successful - refresh chart');
+  };
+
   return (
-    <main className="min-h-screen p-8">
+    <div className="flex h-screen">
-      <h1 className="text-2xl font-bold">Candle Annotator</h1>
+      {/* Sidebar */}
-      <p className="mt-4 text-slate-400">
+      <aside className="flex flex-col">
-        Upload CSV data and annotate candlestick charts
+        <div className="p-4 border-b border-border">
-      </p>
+          <h1 className="text-xl font-bold">Candle Annotator</h1>
+        </div>
+        <div className="p-4">
+          <FileUpload onUploadSuccess={handleUploadSuccess} />
+        </div>
+        <Toolbox
+          activeTool={activeTool}
+          onToolChange={setActiveTool}
+          onExport={handleExport}
+        />
+      </aside>
+
+      {/* Main chart area */}
+      <main className="flex-1 flex items-center justify-center bg-background">
+        <div className="text-muted-foreground text-center">
+          <p className="text-lg">Upload a CSV file to view the candlestick chart</p>
+          <p className="text-sm mt-2">CSV format: time, open, high, low, close</p>
+        </div>
       </main>
+    </div>
   );
 }

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>
+  );
+}