feat: implement section 9 - span annotation sidebar list

openspec/changes/span-annotation/tasks.md

@@ -63,13 +63,13 @@
 
 ## 9. Span Annotation Sidebar List
 
-- [ ] 9.1 Create `SpanAnnotationList.tsx` component: scrollable list of span annotations sorted by start_time desc, showing time range, label with colored badge, delete button
+- [x] 9.1 Create `SpanAnnotationList.tsx` component: scrollable list of span annotations sorted by start_time desc, showing time range, label with colored badge, delete button
-- [ ] 9.2 Add count summary grouped by label type (e.g., "Bull Flag: 3 | Bear Flag: 2")
+- [x] 9.2 Add count summary grouped by label type (e.g., "Bull Flag: 3 | Bear Flag: 2")
-- [ ] 9.3 Implement click-to-select in list: set selectedSpanId, highlight chart rectangle, scroll chart to center on span's time range
+- [x] 9.3 Implement click-to-select in list: set selectedSpanId, highlight chart rectangle, scroll chart to center on span's time range
-- [ ] 9.4 Highlight selected span entry in list (background/border)
+- [x] 9.4 Highlight selected span entry in list (background/border)
-- [ ] 9.5 Wire delete button per list item: DELETE API call, remove primitive, update state
+- [x] 9.5 Wire delete button per list item: DELETE API call, remove primitive, update state
-- [ ] 9.6 Show empty state message when no span annotations exist
+- [x] 9.6 Show empty state message when no span annotations exist
-- [ ] 9.7 Clear and reload span list when active chart changes
+- [x] 9.7 Clear and reload span list when active chart changes
 
 ## 10. Hotkey Label Assignment
 

src/app/page.tsx

@@ -169,6 +169,22 @@ export default function Home() {
     setSelectedSpanId(spanId);
   };
 
+  const handleDeleteSpan = async (spanId: number) => {
+    try {
+      const response = await fetch(`/api/span-annotations/${spanId}`, {
+        method: 'DELETE',
+      });
+      if (response.ok) {
+        await fetchSpanAnnotations(activeChartId);
+        if (selectedSpanId === spanId) {
+          setSelectedSpanId(null);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to delete span annotation:', error);
+    }
+  };
+
   const handleLabelDelete = async (id: number) => {
     setAnnotations(annotations.filter((a) => a.id !== id));
     if (selectedLabelId === id) {
@@ -258,6 +274,11 @@ export default function Home() {
             onLabelSelect={handleLabelSelect}
             onLabelDelete={handleLabelDelete}
             activeChartId={activeChartId}
+            spanAnnotations={spanAnnotations}
+            spanLabelTypes={spanLabelTypes}
+            selectedSpanId={selectedSpanId}
+            onSelectSpan={handleSelectedSpanChange}
+            onDeleteSpan={handleDeleteSpan}
           />
         </div>
       </aside>

src/components/SpanAnnotationList.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import { Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface SpanAnnotation {
+  id: number;
+  chart_id: number;
+  start_time: number;
+  end_time: number;
+  label: string;
+  confidence: number | null;
+  outcome: string | null;
+  notes: string | null;
+  sub_spans: any;
+  color: string;
+  created_at: number;
+}
+
+interface SpanLabelType {
+  id: number;
+  name: string;
+  display_name: string;
+  color: string;
+  hotkey: string | null;
+  is_active: number;
+  sort_order: number;
+  created_at: number;
+}
+
+interface SpanAnnotationListProps {
+  spanAnnotations: SpanAnnotation[];
+  spanLabelTypes: SpanLabelType[];
+  selectedSpanId: number | null;
+  onSelectSpan: (spanId: number) => void;
+  onDeleteSpan: (spanId: number) => void;
+}
+
+export default function SpanAnnotationList({
+  spanAnnotations,
+  spanLabelTypes,
+  selectedSpanId,
+  onSelectSpan,
+  onDeleteSpan,
+}: SpanAnnotationListProps) {
+  const [expanded, setExpanded] = useState(true);
+
+  // Format timestamp to readable date/time
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp * 1000).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  // Get display name and color for label
+  const getLabelInfo = (labelName: string) => {
+    const labelType = spanLabelTypes.find((t) => t.name === labelName);
+    return {
+      displayName: labelType?.display_name || labelName.replace(/_/g, ' ').toUpperCase(),
+      color: labelType?.color || '#2196F3',
+    };
+  };
+
+  // Calculate count per label type
+  const labelCounts = spanAnnotations.reduce((acc, span) => {
+    acc[span.label] = (acc[span.label] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  // Sort by start_time descending (most recent first)
+  const sortedSpans = [...spanAnnotations].sort((a, b) => b.start_time - a.start_time);
+
+  return (
+    <div className="flex flex-col">
+      {/* Header with collapse toggle */}
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between px-2 py-2 hover:bg-secondary/50 rounded"
+      >
+        <span className="text-sm font-semibold text-foreground">
+          Span Annotations ({spanAnnotations.length})
+        </span>
+        {expanded ? (
+          <ChevronUp className="w-4 h-4" />
+        ) : (
+          <ChevronDown className="w-4 h-4" />
+        )}
+      </button>
+
+      {expanded && (
+        <>
+          {/* Count summary */}
+          {spanAnnotations.length > 0 && (
+            <div className="text-xs text-muted-foreground px-2 mb-2">
+              {Object.entries(labelCounts).map(([labelName, count], idx) => {
+                const { displayName } = getLabelInfo(labelName);
+                return (
+                  <span key={labelName}>
+                    {idx > 0 && ' | '}
+                    {displayName}: {count}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Empty state */}
+          {spanAnnotations.length === 0 ? (
+            <div className="text-xs text-muted-foreground px-2 py-4 text-center">
+              No span annotations yet. Use the Span tool to select candle ranges.
+            </div>
+          ) : (
+            /* Span list */
+            <div className="flex flex-col gap-1 max-h-64 overflow-y-auto">
+              {sortedSpans.map((span) => {
+                const { displayName, color } = getLabelInfo(span.label);
+                const isSelected = span.id === selectedSpanId;
+
+                return (
+                  <div
+                    key={span.id}
+                    className={`
+                      flex items-start gap-2 p-2 rounded cursor-pointer
+                      transition-colors
+                      ${
+                        isSelected
+                          ? 'bg-primary/10 border border-primary'
+                          : 'hover:bg-secondary/50 border border-transparent'
+                      }
+                    `}
+                    onClick={() => onSelectSpan(span.id)}
+                  >
+                    <div className="flex-1 min-w-0">
+                      {/* Time range */}
+                      <div className="text-xs text-muted-foreground">
+                        {formatTime(span.start_time)} → {formatTime(span.end_time)}
+                      </div>
+
+                      {/* Label badge */}
+                      <div className="mt-1">
+                        <span
+                          className="px-2 py-0.5 rounded text-xs font-medium text-white"
+                          style={{ backgroundColor: color }}
+                        >
+                          {displayName}
+                        </span>
+                      </div>
+
+                      {/* Additional info */}
+                      {(span.confidence || span.outcome) && (
+                        <div className="mt-1 text-xs text-muted-foreground flex gap-2">
+                          {span.confidence && <span>Confidence: {span.confidence}</span>}
+                          {span.outcome && <span>Outcome: {span.outcome}</span>}
+                        </div>
+                      )}
+
+                      {/* Notes preview */}
+                      {span.notes && (
+                        <div className="mt-1 text-xs text-muted-foreground truncate">
+                          {span.notes}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Delete button */}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteSpan(span.id);
+                      }}
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

src/components/Toolbox.tsx

@@ -5,6 +5,7 @@ import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, Download, ChevronDo
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import SpanAnnotationList from '@/components/SpanAnnotationList';
 
 export type Tool = string | 'delete' | null;
 
@@ -26,6 +27,31 @@ interface Annotation {
   created_at: number;
 }
 
+interface SpanAnnotation {
+  id: number;
+  chart_id: number;
+  start_time: number;
+  end_time: number;
+  label: string;
+  confidence: number | null;
+  outcome: string | null;
+  notes: string | null;
+  sub_spans: any;
+  color: string;
+  created_at: number;
+}
+
+interface SpanLabelType {
+  id: number;
+  name: string;
+  display_name: string;
+  color: string;
+  hotkey: string | null;
+  is_active: number;
+  sort_order: number;
+  created_at: number;
+}
+
 interface ToolboxProps {
   activeTool: Tool;
   onToolChange: (tool: Tool) => void;
@@ -37,6 +63,11 @@ interface ToolboxProps {
   onLabelSelect?: (id: number) => void;
   onLabelDelete?: (id: number) => void;
   activeChartId?: number | null;
+  spanAnnotations?: SpanAnnotation[];
+  spanLabelTypes?: SpanLabelType[];
+  selectedSpanId?: number | null;
+  onSelectSpan?: (spanId: number) => void;
+  onDeleteSpan?: (spanId: number) => void;
 }
 
 export default function Toolbox({
@@ -50,6 +81,11 @@ export default function Toolbox({
   onLabelSelect,
   onLabelDelete,
   activeChartId,
+  spanAnnotations = [],
+  spanLabelTypes = [],
+  selectedSpanId = null,
+  onSelectSpan,
+  onDeleteSpan,
 }: ToolboxProps) {
   const [labelsExpanded, setLabelsExpanded] = useState(true);
   const [searchText, setSearchText] = useState('');
@@ -332,6 +368,17 @@ export default function Toolbox({
         )}
       </div>
 
+      {/* Span Annotations List */}
+      <div className="pt-4">
+        <SpanAnnotationList
+          spanAnnotations={spanAnnotations}
+          spanLabelTypes={spanLabelTypes}
+          selectedSpanId={selectedSpanId}
+          onSelectSpan={onSelectSpan || (() => {})}
+          onDeleteSpan={onDeleteSpan || (() => {})}
+        />
+      </div>
+
       {/* Export button */}
       <div className="mt-auto pt-4 border-t border-border">
         <Button