Adrian Flores Cortes 31b1846fea [TASK-009] refactor: Reorganize tasks to date folders

Moved loose tasks to date folders:
- 2026-01-25/: TASK-002-FRONTEND-COMPREHENSIVE-AUDIT, TASK-FRONTEND-MODULE-DOCS
- 2026-01-27/: TASK-BLOCKER-001-TOKEN-REFRESH, TASK-MASTER-ANALYSIS-PLAN

Moved utility files to _utils/:
- ARCHIVE-INFO.md
- ATOMIC-TASKS-INDEX.yml

Aligns with workspace-v2 orchestration standards.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-29 17:57:14 -06:00

23 KiB

Raw Permalink Blame History

DEPENDENCY-GRAPH.md

Grafo de Dependencias - Trading Platform Frontend

Proyecto: trading-platform Fecha: 2026-01-25 Total Componentes: 123 Total Epics: 9

Resumen Ejecutivo

Métrica	Valor	Criticidad
Dependencias Totales	~340	-
Componentes Aislados	8 (7%)	✅ Bajo riesgo
Componentes Hub	12 (10%)	⚠️ Alto impacto
Dependencias Circulares	0 detectadas	✅ Excelente
Profundidad Máxima	5 niveles	✅ Aceptable
Acoplamiento Promedio	2.8 deps/comp	✅ Moderado

1. Arquitectura de Capas

Jerarquía de Dependencias (Top-Down)

NIVEL 0: Base Layer (Sin dependencias internas)
  ├─ Shared Types (types/*)
  ├─ Constants (constants/*)
  └─ Utils (lib/utils)

NIVEL 1: Data Layer
  ├─ API Services (services/*)
  ├─ Zustand Stores (stores/*)
  └─ Custom Hooks (hooks/*)

NIVEL 2: Atom Components (Presentacionales)
  ├─ UI primitives (Button, Input, Card, etc.)
  ├─ Icons (Lucide React, Heroicons)
  └─ Micro-components (Badge, Avatar, etc.)

NIVEL 3: Molecule Components (Composiciones)
  ├─ Forms (LoginForm, OrderForm, etc.)
  ├─ Cards (CourseCard, PricingCard, etc.)
  └─ Panels (WatchlistSidebar, AlertsPanel, etc.)

NIVEL 4: Organism Components (Features)
  ├─ Charts (CandlestickChart, AllocationChart, etc.)
  ├─ Players (VideoProgressPlayer)
  └─ Dashboards (MLDashboard, AccountHealthDashboard)

NIVEL 5: Pages (Routers)
  ├─ Trading.tsx, Courses.tsx, Assistant.tsx, etc.
  └─ Layout wrappers (PrivateRoute, Layout)

2. Componentes Hub (Alto Impacto)

Componentes con ≥5 dependientes - Cambios aquí afectan múltiples módulos.

Componente	Ubicación	Dependientes	Uso	Riesgo
authStore	stores/auth.store.ts	~40	Gestión sesión global	🔴 CRÍTICO
Button	components/ui/Button.tsx	~35	UI base	🟠 ALTO
Card	components/ui/Card.tsx	~30	Container base	🟠 ALTO
MarkdownRenderer	components/MarkdownRenderer.tsx	3 (OQI-006, OQI-007)	Renderizado markdown	🟡 MEDIO
tradingStore	stores/trading.store.ts	~25	Estado trading	🟠 ALTO
mlStore	stores/ml.store.ts	~12	Estado ML signals	🟡 MEDIO
portfolioStore	stores/portfolio.store.ts	~9	Estado portfolio	🟡 MEDIO
CandlestickChart	modules/trading/components/CandlestickChart.tsx	3 (Trading, CandlestickChartWithML, MLDashboard)	Gráfico base	🟡 MEDIO
apiClient	lib/apiClient.ts	~90	HTTP requests	🔴 CRÍTICO
useAuth	hooks/useAuth.ts	~30	Hook autenticación	🟠 ALTO
useTradingData	hooks/useTradingData.ts	~15	Hook datos trading	🟡 MEDIO
Loader	components/ui/Loader.tsx	~20	Loading states	🟡 MEDIO

Recomendación: Antes de modificar componentes HUB, ejecutar análisis de impacto completo.

3. Dependencias Cross-Epic (Entre Módulos)

Tabla de Dependencias Cross-Módulo

Epic Origen	Epic Destino	Componente Compartido	Tipo Dependencia
OQI-003 (Trading)	OQI-006 (ML Signals)	CandlestickChartWithML	Composición
OQI-003 (Trading)	OQI-007 (LLM Agent)	SignalExecutionPanel	Integración
OQI-006 (ML Signals)	OQI-003 (Trading)	MLSignalsPanel	Display
OQI-007 (LLM Agent)	OQI-006 (ML Signals)	MarkdownRenderer	UI
OQI-008 (Portfolio)	OQI-003 (Trading)	tradingStore (lectura)	Estado
OQI-001 (Auth)	TODOS	authStore	Global
OQI-001 (Auth)	TODOS	PrivateRoute	Protección
OQI-005 (Pagos)	OQI-002 (Educación)	Pricing flow	Checkout

Total Cross-Epic: 18 dependencias identificadas

4. Dependencias Intra-Epic (Dentro del Módulo)

OQI-001: Fundamentos Auth (11 componentes)

authStore (hub)
  ├─ Login.tsx
  ├─ Register.tsx
  ├─ SecuritySettings.tsx
  │   ├─ SessionsList
  │   │   └─ DeviceCard
  │   └─ authStore.logoutAll()
  ├─ SocialLoginButtons
  ├─ PhoneLoginForm
  └─ useAuth (hook)
      └─ PrivateRoute (HOC)

Profundidad: 3 niveles Acoplamiento: Alto (authStore es hub global)

OQI-002: Educativo (14+ componentes)

educationStore
  ├─ Courses.tsx
  │   └─ CourseCard (×N)
  ├─ CourseDetail.tsx
  │   ├─ CourseProgressTracker
  │   └─ RecommendedCourses
  │       └─ CourseCard (reuso)
  ├─ Lesson.tsx
  │   ├─ VideoProgressPlayer ★ (554 líneas)
  │   │   ├─ HTML5 Video API
  │   │   ├─ bookmarksService
  │   │   └─ notesService
  │   └─ LessonNotes
  ├─ Quiz.tsx
  │   └─ QuizQuestion (×N)
  ├─ MyLearning.tsx
  │   └─ AchievementBadge (×N)
  ├─ Leaderboard.tsx
  └─ CertificatePreview

Profundidad: 4 niveles (Courses → CourseDetail → Lesson → VideoProgressPlayer) Acoplamiento: Moderado Componente Crítico: VideoProgressPlayer (554 líneas, 11 states, alto impacto)

OQI-003: Trading Charts (37 componentes)

tradingStore (hub)
  ├─ Trading.tsx (página principal)
  │   ├─ CandlestickChart ★
  │   │   └─ lightweight-charts (librería)
  │   ├─ CandlestickChartWithML
  │   │   ├─ CandlestickChart (reuso)
  │   │   ├─ mlStore
  │   │   └─ MLSignalsPanel (OQI-006 cross-epic)
  │   ├─ ChartToolbar
  │   ├─ ChartDrawingToolsPanel
  │   ├─ OrderForm
  │   │   └─ RiskBasedPositionSizer
  │   ├─ AdvancedOrderEntry
  │   ├─ QuickOrderPanel
  │   ├─ PositionsList
  │   │   ├─ LivePositionCard (×N)
  │   │   └─ PositionModifierDialog
  │   ├─ PaperTradingPanel
  │   │   ├─ AccountSummary
  │   │   └─ TradingMetricsCard
  │   ├─ OrderBookPanel
  │   ├─ AlertsPanel
  │   │   └─ TradeAlertsNotificationCenter
  │   ├─ TradeExecutionHistory
  │   ├─ TradesHistory
  │   ├─ TradeJournalPanel
  │   ├─ RiskMonitor
  │   │   └─ AccountHealthDashboard
  │   ├─ TradingStatsPanel
  │   ├─ WatchlistSidebar
  │   │   ├─ WatchlistItem (×N)
  │   │   └─ SymbolInfoPanel
  │   ├─ AddSymbolModal
  │   └─ ExportButton
  └─ useTradingData (hook)
      └─ TanStack Query (cache)

Profundidad: 5 niveles (Trading → OrderForm → RiskBasedPositionSizer → validation utils) Acoplamiento: ALTO (37 componentes, todos dependen de tradingStore) Componentes Críticos:

CandlestickChart (usado por 3+ componentes)
tradingStore (hub de 25+ componentes)

OQI-004: Cuentas Inversión (10 componentes)

investmentStore
  ├─ Investment.tsx
  ├─ Portfolio.tsx
  ├─ Products.tsx
  │   └─ (productCard assumed)
  ├─ ProductDetail.tsx
  ├─ AccountDetail.tsx
  ├─ Withdrawals.tsx
  │   └─ WithdrawForm
  ├─ Transactions.tsx
  ├─ Reports.tsx
  │   └─ Recharts (library)
  └─ DepositForm

Profundidad: 3 niveles Acoplamiento: Bajo-Moderado

OQI-005: Pagos Stripe (15 componentes)

paymentsStore
  ├─ Pricing.tsx
  │   └─ PricingCard (×N)
  ├─ Billing.tsx
  │   ├─ SubscriptionCard
  │   ├─ SubscriptionUpgradeFlow
  │   ├─ PaymentMethodsList
  │   │   └─ PaymentMethodForm
  │   └─ InvoiceList
  ├─ CheckoutSuccess.tsx
  ├─ CheckoutCancel.tsx
  ├─ BillingInfoForm
  ├─ CouponForm
  ├─ WalletCard
  │   ├─ WalletDepositModal
  │   └─ WalletWithdrawModal
  └─ stripeService
      └─ Stripe.js (library)

Profundidad: 4 niveles Acoplamiento: Moderado Dependencia Externa Crítica: Stripe.js (50% implementado, PCI-DSS blocker)

OQI-006: ML Signals (12 componentes)

mlStore (hub)
  ├─ MLDashboard.tsx
  │   ├─ PredictionCard (×N)
  │   ├─ AMDPhaseIndicator
  │   ├─ SignalsTimeline
  │   ├─ AccuracyMetrics
  │   ├─ SignalPerformanceTracker
  │   ├─ ConfidenceMeter
  │   ├─ ModelAccuracyDashboard
  │   ├─ BacktestResultsVisualization
  │   │   └─ Recharts (library)
  │   ├─ EnsembleSignalCard ★
  │   ├─ ICTAnalysisCard ★
  │   └─ MarkdownRenderer
  └─ mlApiService

Profundidad: 3 niveles Acoplamiento: Moderado Componentes Destacados:

EnsembleSignalCard (sin ET spec)
ICTAnalysisCard (sin ET spec)

OQI-007: LLM Strategy Agent (11 componentes)

llmStore
  ├─ Assistant.tsx
  │   ├─ ChatHeader
  │   ├─ MessageList
  │   │   └─ ChatMessage (×N)
  │   │       ├─ MarkdownRenderer (reuso OQI-006)
  │   │       ├─ MessageFeedback
  │   │       └─ ToolCallCard
  │   ├─ ChatInput
  │   ├─ ConversationHistory
  │   ├─ MessageSearch
  │   └─ SignalExecutionPanel (cross-epic con OQI-003)
  │       └─ tradingStore (escritura)
  └─ llmApiService
      └─ WebSocket (planned)

Profundidad: 4 niveles Acoplamiento: Moderado Dependencia Cross-Epic Crítica: SignalExecutionPanel depende de tradingStore

OQI-008: Portfolio Manager (9 componentes)

portfolioStore
  ├─ PortfolioDashboard.tsx
  │   ├─ AllocationChart ★ (Custom SVG)
  │   ├─ PerformanceChart ★ (Custom Canvas 2D)
  │   ├─ GoalCard (×N)
  │   └─ RebalanceCard
  ├─ CreatePortfolio.tsx
  ├─ CreateGoal.tsx
  ├─ EditAllocations.tsx
  │   └─ AllocationTable
  └─ portfolioApiService

Profundidad: 3 niveles Acoplamiento: Bajo Componentes Destacados:

AllocationChart (Custom SVG, sin deps externas)
PerformanceChart (Custom Canvas, sin deps externas)

OQI-009: MT4 Gateway (3 componentes)

mt4Store (stub)
  ├─ MT4ConnectionStatus (stub, 0% funcional)
  ├─ MT4LiveTradesPanel (NO EXISTE)
  └─ MT4PositionsManager (NO EXISTE)

Profundidad: 1 nivel (aislado) Acoplamiento: NINGUNO (módulo no funcional) Estado: 🔴 BLOCKER P0 - Epic completo sin implementar

5. Grafo Visual de Dependencias (Mermaid)

5.1 Dependencias Cross-Epic (Alto Nivel)

graph TD
    A[OQI-001: Auth] -->|authStore global| B[OQI-002: Educación]
    A -->|authStore global| C[OQI-003: Trading]
    A -->|authStore global| D[OQI-004: Inversión]
    A -->|authStore global| E[OQI-005: Pagos]
    A -->|authStore global| F[OQI-006: ML Signals]
    A -->|authStore global| G[OQI-007: LLM Agent]
    A -->|authStore global| H[OQI-008: Portfolio]
    A -->|authStore global| I[OQI-009: MT4]

    C -->|CandlestickChartWithML| F
    C -->|tradingStore read| F
    F -->|MLSignalsPanel| C

    C -->|tradingStore write| G
    G -->|SignalExecutionPanel| C

    F -->|MarkdownRenderer| G

    H -->|tradingStore read| C

    E -->|Checkout flow| B

    style A fill:#ff6b6b,stroke:#c92a2a,stroke-width:3px
    style C fill:#ffd43b,stroke:#fab005,stroke-width:2px
    style F fill:#51cf66,stroke:#37b24d,stroke-width:2px
    style G fill:#74c0fc,stroke:#339af0,stroke-width:2px
    style I fill:#e03131,stroke:#c92a2a,stroke-width:2px,stroke-dasharray: 5 5

Leyenda:

🔴 Rojo: Crítico (Auth) o Bloqueado (MT4)
🟡 Amarillo: Alto tráfico (Trading)
🟢 Verde: ML Signals
🔵 Azul: LLM Agent

5.2 Dependencias Intra-Epic: OQI-003 Trading (Detallado)

graph TD
    TS[tradingStore] -->|state| TP[Trading.tsx]

    TP --> CC[CandlestickChart]
    CC --> LWC[lightweight-charts lib]

    TP --> CCML[CandlestickChartWithML]
    CCML --> CC
    CCML --> MLS[mlStore]

    TP --> OF[OrderForm]
    OF --> RPS[RiskBasedPositionSizer]

    TP --> PL[PositionsList]
    PL --> LPC[LivePositionCard]
    PL --> PMD[PositionModifierDialog]

    TP --> PPP[PaperTradingPanel]
    PPP --> AS[AccountSummary]
    PPP --> TMC[TradingMetricsCard]

    TP --> RM[RiskMonitor]
    RM --> AHD[AccountHealthDashboard]

    TP --> WS[WatchlistSidebar]
    WS --> WI[WatchlistItem]
    WS --> SIP[SymbolInfoPanel]

    style TS fill:#ffd43b,stroke:#fab005,stroke-width:3px
    style CC fill:#51cf66,stroke:#37b24d,stroke-width:2px
    style LWC fill:#e9ecef,stroke:#adb5bd,stroke-width:1px

5.3 Componentes Hub (Impacto Radial)

graph LR
    AS[authStore] -.->|40 deps| C1[Login]
    AS -.->|40 deps| C2[Trading]
    AS -.->|40 deps| C3[Courses]
    AS -.->|40 deps| C4[...]

    AC[apiClient] -.->|90 deps| S1[services/*]
    AC -.->|90 deps| S2[hooks/useFetch]
    AC -.->|90 deps| S3[stores/*]

    TS[tradingStore] -.->|25 deps| T1[Trading.tsx]
    TS -.->|25 deps| T2[OrderForm]
    TS -.->|25 deps| T3[PositionsList]
    TS -.->|25 deps| T4[...]

    style AS fill:#ff6b6b,stroke:#c92a2a,stroke-width:4px
    style AC fill:#ff6b6b,stroke:#c92a2a,stroke-width:4px
    style TS fill:#ffd43b,stroke:#fab005,stroke-width:3px

6. Análisis de Circularidad

Resultado: ✅ NINGUNA CIRCULAR DETECTADA

Metodología:

Análisis estático de imports
Verificación de stores (Zustand no permite circular)
Análisis cross-epic

Patrón Arquitectónico Usado: Unidirectional Data Flow (Flux/Redux-like)

User Input → Actions → Stores → Components → UI
                ↑                              ↓
                └──────── Side Effects ────────┘
                          (API calls, etc.)

Garantía: La arquitectura Zustand + TanStack Query previene circulares por diseño.

7. Topological Order (Orden de Modificación Seguro)

Para Refactors o Breaking Changes

Orden de modificación de abajo hacia arriba (bottom-up):

NIVEL 0: Base Layer (sin dependencias)
- types/, constants/, lib/utils
- ⏱️ Impacto: GLOBAL (actualizar todo el stack)
NIVEL 1: Data Layer
- API Services (services/*)
- Zustand Stores (stores/*)
- Custom Hooks (hooks/*)
- ⏱️ Impacto: ALTO (todos los consumidores)
NIVEL 2: Atom Components
- UI primitives (Button, Input, Card)
- Icons
- ⏱️ Impacto: ALTO (30-40 dependientes)
NIVEL 3: Molecule Components
- Forms, Cards, Panels
- ⏱️ Impacto: MEDIO (5-10 dependientes)
NIVEL 4: Organism Components
- Charts, Players, Dashboards
- ⏱️ Impacto: BAJO-MEDIO (2-5 dependientes)
NIVEL 5: Pages
- Trading.tsx, Courses.tsx, etc.
- ⏱️ Impacto: NINGUNO (son hojas del grafo)

Regla de Oro: Si modificas NIVEL N, valida NIVEL N+1, N+2, ..., 5.

8. Análisis de Acoplamiento por Epic

Epic	Componentes	Deps Internas	Deps Externas	Acoplamiento	Riesgo Cambio
OQI-001 (Auth)	11	15	0 (es hub global)	🔴 CRÍTICO	MUY ALTO
OQI-002 (Educación)	14+	22	2 (auth, payments)	🟡 MEDIO	MEDIO
OQI-003 (Trading)	37	58	3 (auth, ml, llm)	🔴 ALTO	ALTO
OQI-004 (Inversión)	10	14	1 (auth)	🟢 BAJO	BAJO
OQI-005 (Pagos)	15	20	2 (auth, stripe)	🟡 MEDIO	MEDIO
OQI-006 (ML Signals)	12	16	2 (auth, trading)	🟡 MEDIO	MEDIO
OQI-007 (LLM Agent)	11	18	3 (auth, trading, ml)	🟠 MEDIO-ALTO	MEDIO-ALTO
OQI-008 (Portfolio)	9	12	2 (auth, trading-read)	🟢 BAJO	BAJO
OQI-009 (MT4)	3	0 (stub)	1 (auth)	⚪ N/A	N/A (no funcional)

Leyenda:

🔴 CRÍTICO/ALTO: ≥50 dependencias o hub global
🟠 MEDIO-ALTO: 30-49 dependencias
🟡 MEDIO: 15-29 dependencias
🟢 BAJO: <15 dependencias

9. Impacto de Cambios (Change Impact Matrix)

Si modificas authStore (hub global):

Componente Afectado	Epic	Tipo Impacto	Esfuerzo Validación
Login.tsx	OQI-001	🔴 CRÍTICO	4h
SecuritySettings.tsx	OQI-001	🔴 CRÍTICO	3h
PrivateRoute (HOC)	OQI-001	🔴 CRÍTICO	6h (afecta TODAS las rutas)
Trading.tsx	OQI-003	🟠 ALTO	2h
Courses.tsx	OQI-002	🟠 ALTO	1h
Pricing.tsx	OQI-005	🟠 ALTO	1h
... (40+ componentes)	TODOS	🟠 ALTO	~30h TOTAL

Total Esfuerzo: ~50 horas de validación + testing

Si modificas CandlestickChart:

Componente Afectado	Epic	Tipo Impacto	Esfuerzo Validación
Trading.tsx	OQI-003	🟠 ALTO	2h
CandlestickChartWithML	OQI-003	🔴 CRÍTICO	4h
MLDashboard.tsx	OQI-006	🟡 MEDIO	1h

Total Esfuerzo: ~7 horas de validación

Si modificas VideoProgressPlayer:

Componente Afectado	Epic	Tipo Impacto	Esfuerzo Validación
Lesson.tsx	OQI-002	🔴 CRÍTICO	4h (componente de 554 líneas)

Total Esfuerzo: ~4 horas de validación Riesgo: ALTO (componente complejo con 11 states, bookmarks, notas)

10. Dependencias Externas (Librerías)

Análisis de Librerías con Múltiples Consumidores

Librería	Versión	Consumidores	Epics Afectados	Bundle Size	Riesgo Actualización
lightweight-charts	4.1.1	CandlestickChart, CandlestickChartWithML	OQI-003, OQI-006	180 KB (gzip)	🟡 MEDIO
recharts	2.x	BacktestResults, Reports, StrategyComparison	OQI-004, OQI-006	95 KB (gzip)	🟢 BAJO
Zustand	4.4.7	9 stores	TODOS	3 KB (gzip)	🟢 BAJO
TanStack Query	5.14.0	~20 hooks	TODOS	45 KB (gzip)	🟡 MEDIO
Lucide React	latest	~50 icons	TODOS	8 KB (gzip, tree-shaken)	🟢 BAJO
React Router	6.x	Routing	TODOS	35 KB (gzip)	🟡 MEDIO
Stripe.js	latest	PaymentMethodForm, Checkout	OQI-005	50 KB (CDN)	🟠 MEDIO-ALTO (PCI-DSS)

Total Bundle Multimedia/Charts: ~283 KB (gzip) - Excelente

11. Recomendaciones de Refactoring

Prioridad Alta (Q1 2026)

Desacoplar authStore de componentes presentacionales (30h)
- Crear HOCs/hooks intermedios
- Reducir dependencias directas de 40 a ~10
- Facilitar testing unitario
Extraer lógica de VideoProgressPlayer a custom hook (12h)
- Separar UI de lógica (554 líneas → ~200 UI + hook)
- Mejorar reusabilidad
- Facilitar testing
Centralizar gestión de WebSocket (20h)
- Crear WebSocketProvider global
- Eliminar implementaciones ad-hoc (OrderBookPanel, MT4)
- Reducir código duplicado

Prioridad Media (Q2 2026)

Migrar de polling a WebSocket (40h)
- OrderBookPanel: polling → WebSocket
- Mejorar performance real-time
- Reducir carga servidor
Unificar chart components (25h)
- Crear ChartWrapper genérico
- Reducir duplicación entre lightweight-charts y recharts
- Abstraer configuración común
Implementar Error Boundaries (15h)
- Proteger cada epic con boundary
- Prevenir cascadas de errores
- Mejorar UX de fallos

Prioridad Baja (Q3-Q4 2026)

Lazy loading de epics completos (30h)
- Code-splitting por epic
- Reducir bundle inicial
- Mejorar FCP (First Contentful Paint)
Migrar a microfrontends (200h)
- Aislar epics en aplicaciones independientes
- Mejorar escalabilidad
- Permitir deploys independientes

12. Checklist de Modificación Segura

Antes de Modificar Cualquier Componente:

Identificar nivel en jerarquía (0-5)
- NIVEL 0-1: ⚠️ Revisar TODOS los consumidores
- NIVEL 2-3: ⚠️ Revisar componentes de niveles superiores
- NIVEL 4-5: ✅ Validar solo padres directos
Consultar tabla de impacto
- ¿Es componente Hub? → Análisis de impacto completo
- ¿Tiene deps cross-epic? → Validar epics afectados
- ¿Es hoja del grafo? → Cambio seguro
Verificar dependencias circulares
- Ejecutar: npx madge --circular apps/frontend/src/
- Resultado esperado: "No circular dependencies found"
Validar breaking changes
- ¿Cambios en props interface? → Actualizar TypeScript types
- ¿Cambios en store structure? → Actualizar consumidores
- ¿Cambios en API contracts? → Actualizar backend
Testing
- Unit tests del componente modificado
- Integration tests de consumidores directos
- E2E tests de flujos críticos afectados
Actualizar documentación
- README del módulo
- Storybook (si aplica)
- API docs (Swagger si es backend)

13. Métricas de Salud del Grafo

Métrica	Valor Actual	Target Q2 2026	Estado
Componentes aislados	8 (7%)	<5%	✅ BUENO
Componentes hub	12 (10%)	<8%	🟡 ACEPTABLE
Dependencias circulares	0	0	✅ EXCELENTE
Profundidad máxima	5 niveles	≤5 niveles	✅ ÓPTIMO
Acoplamiento promedio	2.8 deps/comp	<3.0	✅ BUENO
Deps cross-epic	18	<15	🟡 MEJORABLE
Bundle size (charts)	283 KB	<300 KB	✅ EXCELENTE

14. Herramientas de Análisis

Conclusiones

Fortalezas:

✅ Arquitectura limpia: Sin dependencias circulares ✅ Profundidad controlada: Máximo 5 niveles es aceptable ✅ Modularización: Epics bien definidos (OQI-001 a OQI-009) ✅ Bundle size: 283 KB para multimedia/charts es excelente

Debilidades:

⚠️ Hubs críticos: authStore (40 deps), apiClient (90 deps), tradingStore (25 deps) ⚠️ Acoplamiento OQI-003: 37 componentes con alto acoplamiento interno ⚠️ Cross-epic: 18 dependencias entre módulos (objetivo: <15) 🔴 OQI-009 MT4: Completamente aislado y no funcional (0% implementado)

Acciones Inmediatas:

P0: Desacoplar authStore (reduce riesgo de cambios en auth)
P1: Refactorizar VideoProgressPlayer (componente de 554 líneas)
P2: Implementar Error Boundaries (prevenir cascadas de fallos)
P3: Reducir dependencias cross-epic de 18 a <15

Grafo actualizado: 2026-01-25 Próxima actualización: Después de implementar refactors P0-P1 Responsable mantenimiento: Frontend Lead + Arquitecto

23 KiB Raw Permalink Blame History Unescape Escape