task 9.7: replace duplicate interfaces with @/types imports

Replace locally-defined duplicate interfaces in page.tsx,
CandleChart.tsx, SpanAnnotationManager.tsx, Toolbox.tsx,
SpanAnnotationList.tsx, and SpanPopover.tsx with imports from @/types.

- SpanAnnotation, SpanLabelType: replaced in all 6 files
- Candle, AnnotationType: replaced in CandleChart.tsx, SpanAnnotationManager.tsx, Toolbox.tsx
- Annotation (with geometry): replaced in CandleChart.tsx and Toolbox.tsx
- Chart: kept local in page.tsx (shared type has created_at: Date|number vs local number)
- Annotation in page.tsx: kept local (geometry: any) but added missing color field for compatibility

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

src/app/page.tsx

@@ -14,6 +14,7 @@ import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
 import { useTheme } from 'next-themes';
 import { Settings, Tag, Layers } from 'lucide-react';
 import type { PredictionState, PredictionSpan, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
+import type { SpanAnnotation, SpanLabelType } from '@/types';
 
 /**
  * Calculate overlap between two time ranges
@@ -120,46 +121,25 @@ function detectDisagreements(
   };
 }
 
+// SpanAnnotation, SpanLabelType are imported from @/types above.
+// Chart: kept local because shared Chart.created_at is Date|number but local usage expects number.
 interface Chart {
   id: number;
   name: string;
   created_at: number;
 }
 
+// Annotation: kept local because shared Annotation has geometry: Geometry|null but local usage passes geometry: any.
 interface Annotation {
   id: number;
   chart_id: number;
   timestamp: number;
   label_type: string;
+  color: string | null;
   geometry: any;
   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: boolean;
-  sort_order: number;
-  created_at: number;
-}
-
 export default function Home() {
   const { theme, setTheme } = useTheme();
   const [settingsOpen, setSettingsOpen] = useState(false);

src/components/CandleChart.tsx

@@ -7,6 +7,7 @@ import SpanAnnotationManager from './SpanAnnotationManager';
 import { TrendLine } from '@/plugins/trend-line';
 import { RectangleDrawingPrimitive, RectanglePoint } from '@/plugins/rectangle-drawing';
 import type { PerCandlePrediction, PredictionSpan, ModelInfoResponse, PredictionSummary } from '@/types/predictions';
+import type { Candle, Annotation, AnnotationType, SpanAnnotation, SpanLabelType } from '@/types';
 
 // === Magic Number Constants ===
 const ENDPOINT_CLICK_TOLERANCE_PX = 8;
@@ -72,62 +73,7 @@ interface Point {
   price: number;
 }
 
-interface Candle {
+// Candle, Annotation, AnnotationType, SpanAnnotation, SpanLabelType are imported from @/types above.
-  time: number;
-  open: number;
-  high: number;
-  low: number;
-  close: number;
-}
-
-interface Annotation {
-  id: number;
-  timestamp: number;
-  label_type: string;
-  color: string | null;
-  geometry: {
-    startTime?: number;
-    startPrice?: number;
-    endTime?: number;
-    endPrice?: number;
-  } | null;
-  created_at: number;
-}
-
-type AnnotationType = {
-  id: number;
-  name: string;
-  display_name: string;
-  color: string;
-  category: string;
-  icon: string | null;
-  is_active: boolean;
-};
-
-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: boolean;
-  sort_order: number;
-  created_at: number;
-}
 
 interface CandleChartProps {
   activeTool: string | null;

src/components/SpanAnnotationList.tsx

@@ -2,31 +2,9 @@
 
 import { useState } from 'react';
 import { Trash2, ChevronDown } from 'lucide-react';
+import type { SpanAnnotation, SpanLabelType } from '@/types';
 
-interface SpanAnnotation {
+// SpanAnnotation, SpanLabelType are imported from @/types above.
-  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: boolean;
-  sort_order: number;
-  created_at: number;
-}
 
 interface SpanAnnotationListProps {
   spanAnnotations: SpanAnnotation[];

src/components/SpanAnnotationManager.tsx

@@ -4,39 +4,9 @@ import { useEffect, useState, useRef, useCallback } from 'react';
 import { IChartApi, ISeriesApi, Time } from 'lightweight-charts';
 import { SpanRectanglePrimitive, SpanData } from './SpanRectanglePrimitive';
 import SpanPopover from './SpanPopover';
+import type { Candle, SpanAnnotation, SpanLabelType } from '@/types';
 
-interface Candle {
+// Candle, SpanAnnotation, SpanLabelType are imported from @/types above.
-  time: number;
-  open: number;
-  high: number;
-  low: number;
-  close: 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: boolean;
-  sort_order: number;
-  created_at: number;
-}
 
 interface SpanAnnotationManagerProps {
   chart: IChartApi | null;

src/components/SpanPopover.tsx

@@ -21,17 +21,9 @@ import {
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { Slider } from '@/components/ui/slider';
+import type { SpanLabelType } from '@/types';
 
-interface SpanLabelType {
+// SpanLabelType is imported from @/types above.
-  id: number;
-  name: string;
-  display_name: string;
-  color: string;
-  hotkey: string | null;
-  is_active: boolean;
-  sort_order: number;
-  created_at: number;
-}
 
 interface SpanData {
   start_time: number;

src/components/Toolbox.tsx

@@ -3,52 +3,12 @@
 import { useState, useEffect } from 'react';
 import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, ChevronDown, ChevronUp, RectangleHorizontal, Layers, Minus } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import type { AnnotationType, Annotation, SpanAnnotation, SpanLabelType } from '@/types';
+
+// AnnotationType, Annotation, SpanAnnotation, SpanLabelType are imported from @/types above.
 
 export type Tool = string | 'delete' | null;
 
-type AnnotationType = {
-  id: number;
-  name: string;
-  display_name: string;
-  color: string;
-  category: string;
-  icon: string | null;
-  is_active: boolean;
-};
-
-interface Annotation {
-  id: number;
-  timestamp: number;
-  label_type: string;
-  geometry: any;
-  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: boolean;
-  sort_order: number;
-  created_at: number;
-}
-
 interface ToolboxProps {
   activeTool: Tool;
   onToolChange: (tool: Tool) => void;