# 06-DOCUMENTACION.md - OQI-006 ML Utility Panels

## Documentación Técnica

### Componentes Creados

| Componente | LOC | Tipos | Descripción |
|------------|-----|-------|-------------|
| ModelSelector | 280 | 2 | Selector de modelos ML |
| EnsemblePanel | 320 | 3 | Config ensemble |
| ICTAnalysisPanel | 350 | 2 | Params ICT |
| **Total** | **950** | **7** | |

---

## API de Componentes

### ModelSelector

```typescript
interface MLModel {
  id: string;
  name: string;
  type: 'lstm' | 'xgboost' | 'random_forest' | 'svm' | 'ensemble' | 'transformer';
  accuracy: number;
  lastUpdated: string;
  status: 'active' | 'training' | 'inactive' | 'deprecated';
  description?: string;
  features?: string[];
}

interface ModelSelectorProps {
  models: MLModel[];
  selectedModelId: string;
  onModelChange: (modelId: string) => void;
  variant?: 'dropdown' | 'tabs' | 'cards';
  showMetrics?: boolean;
  disabled?: boolean;
  loading?: boolean;
}

// Uso
<ModelSelector
  models={availableModels}
  selectedModelId="xgboost-v2"
  onModelChange={handleModelChange}
  variant="dropdown"
  showMetrics={true}
/>
```

### EnsemblePanel

```typescript
interface ModelWeight {
  modelId: string;
  modelName: string;
  weight: number;
  accuracy: number;
  locked?: boolean;
}

interface EnsembleConfig {
  votingMethod: 'weighted' | 'majority' | 'unanimous';
  minimumAgreement: number;
  confidenceThreshold: number;
  weights: ModelWeight[];
}

interface EnsemblePanelProps {
  config: EnsembleConfig;
  onConfigChange: (config: EnsembleConfig) => void;
  onSave?: () => void;
  onReset?: () => void;
  isLoading?: boolean;
  readOnly?: boolean;
}

// Uso
<EnsemblePanel
  config={ensembleConfig}
  onConfigChange={setEnsembleConfig}
  onSave={handleSave}
  onReset={handleReset}
/>
```

### ICTAnalysisPanel

```typescript
interface ICTParams {
  timeframe: '1m' | '5m' | '15m' | '1h' | '4h' | '1d';
  htfBias: '15m' | '1h' | '4h' | '1d' | '1w';
  orderBlocks: {
    enabled: boolean;
    lookback: number;
    minImbalance: number;
    showMitigated: boolean;
  };
  fvg: {
    enabled: boolean;
    minSize: number;
    showFilled: boolean;
    filterByTrend: boolean;
  };
  marketStructure: {
    enabled: boolean;
    swingLookback: number;
    showBOS: boolean;
    showCHOCH: boolean;
  };
  liquidity: {
    enabled: boolean;
    showBSL: boolean;
    showSSL: boolean;
    equalHighsLows: boolean;
  };
  sessions: {
    showAsian: boolean;
    showLondon: boolean;
    showNewYork: boolean;
    highlightKillzones: boolean;
  };
}

interface ICTAnalysisPanelProps {
  params: ICTParams;
  onParamsChange: (params: ICTParams) => void;
  onSave?: () => void;
  onReset?: () => void;
  isLoading?: boolean;
  readOnly?: boolean;
}

// Uso
<ICTAnalysisPanel
  params={ictParams}
  onParamsChange={setIctParams}
  onSave={handleSave}
/>
```

---

## Integración con Store

### Ejemplo de uso con mlStore

```typescript
// stores/mlStore.ts
interface MLState {
  selectedModelId: string;
  ensembleConfig: EnsembleConfig;
  ictParams: ICTParams;
  setSelectedModel: (id: string) => void;
  setEnsembleConfig: (config: EnsembleConfig) => void;
  setIctParams: (params: ICTParams) => void;
}

// pages/MLSettings.tsx
import { ModelSelector, EnsemblePanel, ICTAnalysisPanel } from '@/modules/ml/components';
import { useMLStore } from '@/stores/mlStore';

export const MLSettings = () => {
  const {
    selectedModelId,
    ensembleConfig,
    ictParams,
    setSelectedModel,
    setEnsembleConfig,
    setIctParams,
  } = useMLStore();

  return (
    <div className="space-y-6">
      <ModelSelector
        models={models}
        selectedModelId={selectedModelId}
        onModelChange={setSelectedModel}
        variant="cards"
      />

      <EnsemblePanel
        config={ensembleConfig}
        onConfigChange={setEnsembleConfig}
      />

      <ICTAnalysisPanel
        params={ictParams}
        onParamsChange={setIctParams}
      />
    </div>
  );
};
```

---

## Próximos Pasos

1. **Integración con mlStore** - Conectar componentes con estado global
2. **Persistencia** - Guardar configuración en backend
3. **WebSocket** - Actualizar modelos en tiempo real
4. **Tests** - Agregar unit tests con jest/vitest