feat: implement Section 5 - Span Tool State & Integration

- Add SpanAnnotation and SpanLabelType interfaces to page.tsx
- Add span-related state: spanAnnotations, selectedSpanId, spanLabelTypes
- Add fetchSpanAnnotations() and fetchSpanLabelTypes() data fetching functions
- Load span annotations and label types when chart changes
- Add "Span" tool button to Toolbox component with RectangleHorizontal icon
- Mark Section 5 tasks (5.1-5.5) as complete in tasks.md

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/Toolbox.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, Download, ChevronDown, ChevronUp } from 'lucide-react';
+import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, Download, ChevronDown, ChevronUp, RectangleHorizontal } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ThemeToggle } from '@/components/ThemeToggle';
@@ -168,6 +168,16 @@ export default function Toolbox({
             </Button>
           ))}
 
+        {/* Span tool button */}
+        <Button
+          variant={activeTool === 'span' ? 'default' : 'outline'}
+          className="justify-start gap-2"
+          onClick={() => handleToolClick('span')}
+        >
+          <RectangleHorizontal className="w-5 h-5" />
+          Span
+        </Button>
+
         {/* Color picker */}
         <div className="flex gap-1 px-1">
           {[