# 02 - ANALISIS

## Componentes a Crear

### 1. ErrorBoundary.tsx

**Proposito:** Capturar errores de React y mostrar UI de fallback

**Comportamiento:**
- Clase React (requirement de error boundaries)
- Captura errores en componentDidCatch
- Muestra stack trace en modo desarrollo
- Botones: Reintentar, Refrescar, Ir a inicio
- Copia stack trace al clipboard

**Interfaces:**
```typescript
interface ErrorBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
  showDetails?: boolean;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: ErrorInfo | null;
}
```

### 2. ConnectionStatus.tsx

**Proposito:** Mostrar estado de conexion WebSocket/API

**Variantes:**
- `badge`: Compacto con icono y texto
- `indicator`: Solo icono con tooltip
- `detailed`: Panel con metricas

**Estados:**
- connected (verde)
- connecting (amarillo)
- disconnected (rojo)
- error (rojo pulsante)

**Interfaces:**
```typescript
interface ConnectionState {
  status: 'connected' | 'connecting' | 'disconnected' | 'error';
  lastConnected?: string;
  reconnectAttempts?: number;
  error?: string;
}

interface ConnectionMetrics {
  latency?: number;
  uptime?: number;
  messagesReceived?: number;
  messagesSent?: number;
}
```

### 3. TokenUsageDisplay.tsx

**Proposito:** Visualizar consumo de tokens y costos

**Variantes:**
- `inline`: Minimo para header
- `compact`: Badge con metricas
- `detailed`: Panel completo

**Funcionalidades:**
- Barra de progreso de contexto
- Warnings al 75%/90% de contexto
- Desglose input/output tokens
- Estimacion de costos
- Estadisticas de sesion

**Interfaces:**
```typescript
interface TokenUsage {
  inputTokens: number;
  outputTokens: number;
  totalTokens: number;
  contextWindowSize: number;
  contextUsedTokens: number;
}

interface TokenCosts {
  inputCostPer1k: number;
  outputCostPer1k: number;
  currency?: string;
}
```

### 4. PromptLibrary.tsx

**Proposito:** Biblioteca de templates de prompts

**Funcionalidades:**
- Busqueda por titulo/descripcion/tags
- Filtro por categoria
- Favoritos
- Copiar prompt
- Vista compacta/normal

**Categorias:**
- analysis: Analisis de mercado
- strategy: Estrategias de trading
- education: Contenido educativo
- trading: Operaciones de trading
- risk: Gestion de riesgo
- custom: Personalizados

**Interfaces:**
```typescript
interface Prompt {
  id: string;
  title: string;
  description: string;
  template: string;
  category: PromptCategory;
  tags: string[];
  variables?: string[];
  isFavorite?: boolean;
  usageCount?: number;
}
```

## Dependencias

- React 18 (class components para error boundary)
- lucide-react icons
- Tailwind CSS
- Patron de dark theme existente

## Riesgos

| Riesgo | Mitigacion |
|--------|------------|
| Error boundary require clase | Usar class component solo para este caso |
| Metricas de tokens sin backend | Props opcionales, UI mock |