rckrdmrd/trading-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
b50972ef9c
trading-platform/orchestration/tareas/TASK-2026-01-26-OQI-007-LLM-ASSISTANT-PANELS/02-ANALISIS.md
Adrian Flores Cortes b50972ef9c [OQI-007] feat: Add 4 LLM assistant components and CAPVED docs 
Components created:
- ErrorBoundary.tsx (200 LOC) - React error boundary
- ConnectionStatus.tsx (280 LOC) - WebSocket/API indicator
- TokenUsageDisplay.tsx (380 LOC) - Token consumption display
- PromptLibrary.tsx (350 LOC) - Prompt template browser

Inventory updates:
- assistant module: 11 -> 22 components
- OQI-007 progress: 25% -> 35%
- gaps reduced: 4 -> 2

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-26 12:37:03 -06:00

2.9 KiB
Raw Blame History

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:

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:

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:

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:

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