b50972ef9c
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>
144 lines
2.9 KiB
Markdown
144 lines
2.9 KiB
Markdown
# 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 |
|