@syntropysoft/syntropyfront 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,120 +1,2355 @@
 /**
- * BreadcrumbManager - Gestiona breadcrumbs
- * Responsabilidad única: Almacenar y gestionar breadcrumbs
+ * BreadcrumbStore - Almacén de huellas del usuario
+ * Mantiene un historial de las últimas acciones del usuario
  */
-class BreadcrumbManager {
-  constructor() {
+class BreadcrumbStore {
+  constructor(maxBreadcrumbs = 25) {
+    this.maxBreadcrumbs = maxBreadcrumbs;
     this.breadcrumbs = [];
+    this.agent = null;
+  }
+
+  /**
+     * Configura el agent para envío automático
+     * @param {Object} agent - Instancia del agent
+     */
+  setAgent(agent) {
+    this.agent = agent;
+  }
+
+  /**
+     * Configura el tamaño máximo de breadcrumbs
+     * @param {number} maxBreadcrumbs - Nuevo tamaño máximo
+     */
+  setMaxBreadcrumbs(maxBreadcrumbs) {
+    this.maxBreadcrumbs = maxBreadcrumbs;
+        
+    // Si el nuevo tamaño es menor, eliminar breadcrumbs excedentes
+    if (this.breadcrumbs.length > this.maxBreadcrumbs) {
+      this.breadcrumbs = this.breadcrumbs.slice(-this.maxBreadcrumbs);
+    }
+  }
+
+  /**
+     * Obtiene el tamaño máximo actual
+     * @returns {number} Tamaño máximo de breadcrumbs
+     */
+  getMaxBreadcrumbs() {
+    return this.maxBreadcrumbs;
   }
 
-  add(category, message, data = {}) {
+  /**
+     * Añade un breadcrumb a la lista
+     * @param {Object} crumb - El breadcrumb a añadir
+     * @param {string} crumb.category - Categoría del evento (ui, network, error, etc.)
+     * @param {string} crumb.message - Mensaje descriptivo
+     * @param {Object} [crumb.data] - Datos adicionales opcionales
+     */
+  add(crumb) {
     const breadcrumb = {
-      category,
-      message,
-      data,
-      timestamp: new Date().toISOString()
+      ...crumb,
+      timestamp: new Date().toISOString(),
     };
+
+    if (this.breadcrumbs.length >= this.maxBreadcrumbs) {
+      this.breadcrumbs.shift(); // Elimina el más antiguo
+    }
         
     this.breadcrumbs.push(breadcrumb);
-    return breadcrumb;
+        
+    // Callback opcional para logging
+    if (this.onBreadcrumbAdded) {
+      this.onBreadcrumbAdded(breadcrumb);
+    }
+        
+    // Enviar al agent si está configurado y habilitado
+    if (this.agent && this.agent.isEnabled) {
+      try {
+        this.agent.sendBreadcrumbs([breadcrumb]);
+      } catch (error) {
+        console.warn('SyntropyFront: Error enviando breadcrumb al agent:', error);
+      }
+    }
+  }
+
+  /**
+     * Devuelve todos los breadcrumbs
+     * @returns {Array} Copia de todos los breadcrumbs
+     */
+  getAll() {
+    return [...this.breadcrumbs];
+  }
+
+  /**
+     * Limpia todos los breadcrumbs
+     */
+  clear() {
+    this.breadcrumbs = [];
+  }
+
+  /**
+     * Obtiene breadcrumbs por categoría
+     * @param {string} category - Categoría a filtrar
+     * @returns {Array} Breadcrumbs de la categoría especificada
+     */
+  getByCategory(category) {
+    return this.breadcrumbs.filter(b => b.category === category);
+  }
+}
+
+// Instancia singleton
+const breadcrumbStore = new BreadcrumbStore();
+
+/**
+ * ConfigurationManager - Maneja la configuración del Agent
+ * Responsabilidad única: Gestionar configuración y validación
+ */
+class ConfigurationManager {
+  constructor() {
+    this.endpoint = null;
+    this.headers = {
+      'Content-Type': 'application/json'
+    };
+    this.batchSize = 10;
+    this.batchTimeout = null;
+    this.isEnabled = false;
+    this.sendBreadcrumbs = false;
+    this.encrypt = null;
+    this.usePersistentBuffer = false;
+    this.maxRetries = 5;
+    this.baseDelay = 1000;
+    this.maxDelay = 30000;
+  }
+
+  /**
+     * Configura el manager
+     * @param {Object} config - Configuración
+     */
+  configure(config) {
+    this.endpoint = config.endpoint;
+    this.headers = { ...this.headers, ...config.headers };
+    this.batchSize = config.batchSize || this.batchSize;
+    this.batchTimeout = config.batchTimeout;
+    this.isEnabled = !!config.endpoint;
+    this.encrypt = config.encrypt || null;
+    this.usePersistentBuffer = config.usePersistentBuffer === true;
+    this.maxRetries = config.maxRetries || this.maxRetries;
+        
+    // Lógica simple: si hay batchTimeout = enviar breadcrumbs, sino = solo errores
+    this.sendBreadcrumbs = !!config.batchTimeout;
+  }
+
+  /**
+     * Verifica si el agent está habilitado
+     */
+  isAgentEnabled() {
+    return this.isEnabled;
+  }
+
+  /**
+     * Verifica si debe enviar breadcrumbs
+     */
+  shouldSendBreadcrumbs() {
+    return this.sendBreadcrumbs;
+  }
+
+  /**
+     * Obtiene la configuración actual
+     */
+  getConfig() {
+    return {
+      endpoint: this.endpoint,
+      headers: this.headers,
+      batchSize: this.batchSize,
+      batchTimeout: this.batchTimeout,
+      isEnabled: this.isEnabled,
+      sendBreadcrumbs: this.sendBreadcrumbs,
+      encrypt: this.encrypt,
+      usePersistentBuffer: this.usePersistentBuffer,
+      maxRetries: this.maxRetries,
+      baseDelay: this.baseDelay,
+      maxDelay: this.maxDelay
+    };
+  }
+}
+
+/**
+ * QueueManager - Maneja la cola de envío y batching
+ * Responsabilidad única: Gestionar cola de items y batching
+ */
+class QueueManager {
+  constructor(configManager) {
+    this.config = configManager;
+    this.queue = [];
+    this.batchTimer = null;
+    this.flushCallback = null; // Callback interno para flush automático
+  }
+
+  /**
+     * Añade un item a la cola
+     * @param {Object} item - Item a añadir
+     */
+  add(item) {
+    this.queue.push(item);
+
+    // Enviar inmediatamente si alcanza el tamaño del batch
+    if (this.queue.length >= this.config.batchSize) {
+      this.flush(this.flushCallback);
+    } else if (this.config.batchSize && this.config.batchTimeout && !this.batchTimer) {
+      // Solo programar timeout si batchTimeout está configurado
+      this.batchTimer = setTimeout(() => {
+        this.flush(this.flushCallback);
+      }, this.config.batchTimeout);
+    }
   }
 
+  /**
+     * Obtiene todos los items de la cola
+     */
   getAll() {
-    return this.breadcrumbs;
+    return [...this.queue];
+  }
+
+  /**
+     * Limpia la cola
+     */
+  clear() {
+    this.queue = [];
+    this.clearTimer();
+  }
+
+  /**
+     * Limpia el timer
+     */
+  clearTimer() {
+    if (this.batchTimer) {
+      clearTimeout(this.batchTimer);
+      this.batchTimer = null;
+    }
+  }
+
+  /**
+     * Obtiene el tamaño de la cola
+     */
+  getSize() {
+    return this.queue.length;
+  }
+
+  /**
+     * Verifica si la cola está vacía
+     */
+  isEmpty() {
+    return this.queue.length === 0;
+  }
+
+  /**
+     * Flush de la cola (método que será llamado por el Agent)
+     * @param {Function} flushCallback - Callback para procesar los items
+     */
+  async flush(flushCallback) {
+    if (this.queue.length === 0) return;
+
+    const itemsToSend = [...this.queue];
+    this.queue = [];
+    this.clearTimer();
+
+    if (flushCallback) {
+      await flushCallback(itemsToSend);
+    }
+  }
+}
+
+/**
+ * RetryManager - Maneja el sistema de reintentos
+ * Responsabilidad única: Gestionar reintentos con backoff exponencial
+ */
+class RetryManager {
+  constructor(configManager) {
+    this.config = configManager;
+    this.retryQueue = [];
+    this.retryTimer = null;
+  }
+
+  /**
+     * Añade items a la cola de reintentos
+     * @param {Array} items - Items a reintentar
+     * @param {number} retryCount - Número de reintento
+     * @param {number} persistentId - ID en buffer persistente (opcional)
+     */
+  addToRetryQueue(items, retryCount = 1, persistentId = null) {
+    const delay = Math.min(this.config.baseDelay * Math.pow(2, retryCount - 1), this.config.maxDelay);
+        
+    this.retryQueue.push({
+      items,
+      retryCount,
+      persistentId,
+      nextRetry: Date.now() + delay
+    });
+
+    this.scheduleRetry();
+  }
+
+  /**
+     * Programa el próximo reintento
+     */
+  scheduleRetry() {
+    if (this.retryTimer) return;
+
+    const nextItem = this.retryQueue.find(item => item.nextRetry <= Date.now());
+    if (!nextItem) return;
+
+    this.retryTimer = setTimeout(() => {
+      this.processRetryQueue();
+    }, Math.max(0, nextItem.nextRetry - Date.now()));
+  }
+
+  /**
+     * Procesa la cola de reintentos
+     * @param {Function} sendCallback - Callback para enviar items
+     * @param {Function} removePersistentCallback - Callback para remover del buffer persistente
+     */
+  async processRetryQueue(sendCallback, removePersistentCallback) {
+    this.retryTimer = null;
+
+    const now = Date.now();
+    const itemsToRetry = this.retryQueue.filter(item => item.nextRetry <= now);
+        
+    for (const item of itemsToRetry) {
+      try {
+        if (sendCallback) {
+          await sendCallback(item.items);
+        }
+                
+        // ✅ Éxito: remover de cola de reintentos
+        this.retryQueue = this.retryQueue.filter(q => q !== item);
+                
+        // Remover del buffer persistente si existe
+        if (item.persistentId && removePersistentCallback) {
+          await removePersistentCallback(item.persistentId);
+        }
+                
+        console.log(`SyntropyFront: Reintento exitoso después de ${item.retryCount} intentos`);
+      } catch (error) {
+        console.warn(`SyntropyFront: Reintento ${item.retryCount} falló:`, error);
+                
+        if (item.retryCount >= this.config.maxRetries) {
+          // ❌ Máximo de reintentos alcanzado
+          this.retryQueue = this.retryQueue.filter(q => q !== item);
+          console.error('SyntropyFront: Item excedió máximo de reintentos, datos perdidos');
+        } else {
+          // Programar próximo reintento
+          item.retryCount++;
+          item.nextRetry = Date.now() + Math.min(
+            this.config.baseDelay * Math.pow(2, item.retryCount - 1), 
+            this.config.maxDelay
+          );
+        }
+      }
+    }
+
+    // Programar próximo reintento si quedan items
+    if (this.retryQueue.length > 0) {
+      this.scheduleRetry();
+    }
+  }
+
+  /**
+     * Limpia la cola de reintentos
+     */
+  clear() {
+    this.retryQueue = [];
+    this.clearTimer();
+  }
+
+  /**
+     * Limpia el timer
+     */
+  clearTimer() {
+    if (this.retryTimer) {
+      clearTimeout(this.retryTimer);
+      this.retryTimer = null;
+    }
+  }
+
+  /**
+     * Obtiene el tamaño de la cola de reintentos
+     */
+  getSize() {
+    return this.retryQueue.length;
+  }
+
+  /**
+     * Verifica si la cola de reintentos está vacía
+     */
+  isEmpty() {
+    return this.retryQueue.length === 0;
+  }
+}
+
+/**
+ * RobustSerializer - Serializador robusto que maneja referencias circulares
+ * Implementa una solución similar a flatted pero sin dependencias externas
+ */
+class RobustSerializer {
+  constructor() {
+    this.seen = new WeakSet();
+    this.circularRefs = new Map();
+    this.refCounter = 0;
+  }
+
+  /**
+     * Serializa un objeto de forma segura, manejando referencias circulares
+     * @param {any} obj - Objeto a serializar
+     * @returns {string} JSON string seguro
+     */
+  serialize(obj) {
+    try {
+      // Reset state
+      this.seen = new WeakSet();
+      this.circularRefs = new Map();
+      this.refCounter = 0;
+
+      // Serializar con manejo de referencias circulares
+      const safeObj = this.makeSerializable(obj);
+            
+      // Convertir a JSON
+      return JSON.stringify(safeObj);
+    } catch (error) {
+      console.error('SyntropyFront: Error en serialización robusta:', error);
+            
+      // Fallback: intentar serialización básica con información de error
+      return JSON.stringify({
+        __serializationError: true,
+        error: error.message,
+        originalType: typeof obj,
+        isObject: obj !== null && typeof obj === 'object',
+        timestamp: new Date().toISOString()
+      });
+    }
+  }
+
+  /**
+     * Hace un objeto serializable, manejando referencias circulares
+     * @param {any} obj - Objeto a procesar
+     * @param {string} path - Ruta actual en el objeto
+     * @returns {any} Objeto serializable
+     */
+  makeSerializable(obj, path = '') {
+    // Casos primitivos
+    if (obj === null || obj === undefined) {
+      return obj;
+    }
+
+    if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean') {
+      return obj;
+    }
+
+    // Casos especiales
+    if (obj instanceof Date) {
+      return {
+        __type: 'Date',
+        value: obj.toISOString()
+      };
+    }
+
+    if (obj instanceof Error) {
+      return {
+        __type: 'Error',
+        name: obj.name,
+        message: obj.message,
+        stack: obj.stack,
+        cause: obj.cause ? this.makeSerializable(obj.cause, `${path}.cause`) : undefined
+      };
+    }
+
+    if (obj instanceof RegExp) {
+      return {
+        __type: 'RegExp',
+        source: obj.source,
+        flags: obj.flags
+      };
+    }
+
+    // Arrays
+    if (Array.isArray(obj)) {
+      // Verificar referencia circular
+      if (this.seen.has(obj)) {
+        const refId = this.circularRefs.get(obj);
+        return {
+          __circular: true,
+          refId
+        };
+      }
+
+      this.seen.add(obj);
+      const refId = `ref_${++this.refCounter}`;
+      this.circularRefs.set(obj, refId);
+
+      return obj.map((item, index) => 
+        this.makeSerializable(item, `${path}[${index}]`)
+      );
+    }
+
+    // Objetos
+    if (typeof obj === 'object') {
+      // Verificar referencia circular
+      if (this.seen.has(obj)) {
+        const refId = this.circularRefs.get(obj);
+        return {
+          __circular: true,
+          refId
+        };
+      }
+
+      this.seen.add(obj);
+      const refId = `ref_${++this.refCounter}`;
+      this.circularRefs.set(obj, refId);
+
+      const result = {};
+
+      // Procesar propiedades del objeto
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          try {
+            const value = obj[key];
+            const safeValue = this.makeSerializable(value, `${path}.${key}`);
+            result[key] = safeValue;
+          } catch (error) {
+            // Si falla la serialización de una propiedad, la omitimos
+            result[key] = {
+              __serializationError: true,
+              error: error.message,
+              propertyName: key
+            };
+          }
+        }
+      }
+
+      // Procesar símbolos si están disponibles
+      if (Object.getOwnPropertySymbols) {
+        const symbols = Object.getOwnPropertySymbols(obj);
+        for (const symbol of symbols) {
+          try {
+            const value = obj[symbol];
+            const safeValue = this.makeSerializable(value, `${path}[Symbol(${symbol.description})]`);
+            result[`__symbol_${symbol.description || 'anonymous'}`] = safeValue;
+          } catch (error) {
+            result[`__symbol_${symbol.description || 'anonymous'}`] = {
+              __serializationError: true,
+              error: error.message,
+              symbolName: symbol.description || 'anonymous'
+            };
+          }
+        }
+      }
+
+      return result;
+    }
+
+    // Funciones y otros tipos
+    if (typeof obj === 'function') {
+      return {
+        __type: 'Function',
+        name: obj.name || 'anonymous',
+        length: obj.length,
+        toString: `${obj.toString().substring(0, 200)  }...`
+      };
+    }
+
+    // Fallback para otros tipos
+    return {
+      __type: 'Unknown',
+      constructor: obj.constructor ? obj.constructor.name : 'Unknown',
+      toString: `${String(obj).substring(0, 200)  }...`
+    };
+  }
+
+  /**
+     * Deserializa un objeto serializado con referencias circulares
+     * @param {string} jsonString - JSON string a deserializar
+     * @returns {any} Objeto deserializado
+     */
+  deserialize(jsonString) {
+    try {
+      const parsed = JSON.parse(jsonString);
+      return this.restoreCircularRefs(parsed);
+    } catch (error) {
+      console.error('SyntropyFront: Error en deserialización:', error);
+      return null;
+    }
+  }
+
+  /**
+     * Restaura referencias circulares en un objeto deserializado
+     * @param {any} obj - Objeto a restaurar
+     * @param {Map} refs - Mapa de referencias
+     * @returns {any} Objeto con referencias restauradas
+     */
+  restoreCircularRefs(obj, refs = new Map()) {
+    if (obj === null || obj === undefined) {
+      return obj;
+    }
+
+    if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean') {
+      return obj;
+    }
+
+    // Restaurar tipos especiales
+    if (obj.__type === 'Date') {
+      return new Date(obj.value);
+    }
+
+    if (obj.__type === 'Error') {
+      const error = new Error(obj.message);
+      error.name = obj.name;
+      error.stack = obj.stack;
+      if (obj.cause) {
+        error.cause = this.restoreCircularRefs(obj.cause, refs);
+      }
+      return error;
+    }
+
+    if (obj.__type === 'RegExp') {
+      return new RegExp(obj.source, obj.flags);
+    }
+
+    if (obj.__type === 'Function') {
+      // No podemos restaurar funciones completamente, devolvemos info
+      return `[Function: ${obj.name}]`;
+    }
+
+    // Arrays
+    if (Array.isArray(obj)) {
+      const result = [];
+      refs.set(obj, result);
+
+      for (let i = 0; i < obj.length; i++) {
+        if (obj[i] && obj[i].__circular) {
+          const refId = obj[i].refId;
+          if (refs.has(refId)) {
+            result[i] = refs.get(refId);
+          } else {
+            result[i] = null; // Referencia no encontrada
+          }
+        } else {
+          result[i] = this.restoreCircularRefs(obj[i], refs);
+        }
+      }
+
+      return result;
+    }
+
+    // Objetos
+    if (typeof obj === 'object') {
+      const result = {};
+      refs.set(obj, result);
+
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          if (key.startsWith('__')) {
+            // Propiedades especiales
+            continue;
+          }
+
+          const value = obj[key];
+          if (value && value.__circular) {
+            const refId = value.refId;
+            if (refs.has(refId)) {
+              result[key] = refs.get(refId);
+            } else {
+              result[key] = null; // Referencia no encontrada
+            }
+          } else {
+            result[key] = this.restoreCircularRefs(value, refs);
+          }
+        }
+      }
+
+      return result;
+    }
+
+    return obj;
+  }
+
+  /**
+     * Serializa de forma segura para logging (versión simplificada)
+     * @param {any} obj - Objeto a serializar
+     * @returns {string} JSON string seguro para logs
+     */
+  serializeForLogging(obj) {
+    try {
+      return this.serialize(obj);
+    } catch (error) {
+      return JSON.stringify({
+        __logError: true,
+        message: 'Error serializando para logging',
+        originalError: error.message,
+        timestamp: new Date().toISOString()
+      });
+    }
+  }
+}
+
+// Instancia singleton
+const robustSerializer = new RobustSerializer();
+
+/**
+ * HttpTransport - Maneja el envío HTTP
+ * Responsabilidad única: Gestionar envío HTTP y serialización
+ */
+class HttpTransport {
+  constructor(configManager) {
+    this.config = configManager;
+  }
+
+  /**
+     * Envía datos al backend
+     * @param {Array} items - Items a enviar
+     */
+  async send(items) {
+    const payload = {
+      timestamp: new Date().toISOString(),
+      items
+    };
+
+    // ✅ SERIALIZACIÓN ROBUSTA: Usar serializador que maneja referencias circulares
+    let serializedPayload;
+    try {
+      serializedPayload = robustSerializer.serialize(payload);
+    } catch (error) {
+      console.error('SyntropyFront: Error en serialización del payload:', error);
+            
+      // Fallback: intentar serialización básica con información de error
+      serializedPayload = JSON.stringify({
+        __serializationError: true,
+        error: error.message,
+        timestamp: new Date().toISOString(),
+        itemsCount: items.length,
+        fallbackData: 'Serialización falló, datos no enviados'
+      });
+    }
+
+    const response = await fetch(this.config.endpoint, {
+      method: 'POST',
+      headers: this.config.headers,
+      body: serializedPayload
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    return response.json();
+  }
+
+  /**
+     * Aplica encriptación si está configurada
+     * @param {*} data - Datos a encriptar
+     */
+  applyEncryption(data) {
+    if (this.config.encrypt) {
+      return this.config.encrypt(data);
+    }
+    return data;
+  }
+
+  /**
+     * Verifica si el transport está configurado
+     */
+  isConfigured() {
+    return !!this.config.endpoint;
+  }
+}
+
+/**
+ * DatabaseConfigManager - Maneja la configuración de IndexedDB
+ * Responsabilidad única: Validar y gestionar la configuración de la base de datos
+ */
+class DatabaseConfigManager {
+  constructor(dbName, dbVersion, storeName) {
+    this.dbName = dbName;
+    this.dbVersion = dbVersion;
+    this.storeName = storeName;
+  }
+
+  /**
+     * Valida que la configuración sea correcta
+     * @returns {Object} Resultado de validación
+     */
+  validateConfig() {
+    const validationResult = {
+      isValid: true,
+      errors: [],
+      timestamp: new Date().toISOString()
+    };
+
+    if (!this.dbName || typeof this.dbName !== 'string') {
+      validationResult.isValid = false;
+      validationResult.errors.push('dbName debe ser un string no vacío');
+    }
+
+    if (!this.dbVersion || typeof this.dbVersion !== 'number' || this.dbVersion < 1) {
+      validationResult.isValid = false;
+      validationResult.errors.push('dbVersion debe ser un número mayor a 0');
+    }
+
+    if (!this.storeName || typeof this.storeName !== 'string') {
+      validationResult.isValid = false;
+      validationResult.errors.push('storeName debe ser un string no vacío');
+    }
+
+    return validationResult;
+  }
+
+  /**
+     * Verifica si IndexedDB está disponible en el entorno
+     * @returns {Object} Resultado de disponibilidad
+     */
+  checkIndexedDBAvailability() {
+    const availabilityResult = {
+      isAvailable: false,
+      reason: null,
+      timestamp: new Date().toISOString()
+    };
+
+    if (typeof window === 'undefined') {
+      availabilityResult.reason = 'No estamos en un entorno de browser';
+      return availabilityResult;
+    }
+
+    if (!window.indexedDB) {
+      availabilityResult.reason = 'IndexedDB no está disponible en este browser';
+      return availabilityResult;
+    }
+
+    availabilityResult.isAvailable = true;
+    return availabilityResult;
+  }
+
+  /**
+     * Obtiene la configuración actual
+     * @returns {Object} Configuración
+     */
+  getConfig() {
+    return {
+      dbName: this.dbName,
+      dbVersion: this.dbVersion,
+      storeName: this.storeName
+    };
+  }
+
+  /**
+     * Crea la configuración del object store
+     * @returns {Object} Configuración del store
+     */
+  getStoreConfig() {
+    return {
+      keyPath: 'id',
+      autoIncrement: true
+    };
+  }
+}
+
+/**
+ * DatabaseConnectionManager - Maneja la conexión con IndexedDB
+ * Responsabilidad única: Gestionar la apertura y cierre de conexiones
+ */
+class DatabaseConnectionManager {
+  constructor(configManager) {
+    this.configManager = configManager;
+    this.db = null;
+    this.isAvailable = false;
+  }
+
+  /**
+     * Inicializa la conexión con IndexedDB
+     * @returns {Promise<Object>} Resultado de la inicialización
+     */
+  async init() {
+    const initResult = {
+      success: false,
+      error: null,
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      // Validar configuración
+      const configValidation = this.configManager.validateConfig();
+      if (!configValidation.isValid) {
+        initResult.error = `Configuración inválida: ${configValidation.errors.join(', ')}`;
+        return initResult;
+      }
+
+      // Verificar disponibilidad de IndexedDB
+      const availabilityCheck = this.configManager.checkIndexedDBAvailability();
+      if (!availabilityCheck.isAvailable) {
+        initResult.error = availabilityCheck.reason;
+        return initResult;
+      }
+
+      // Abrir conexión
+      const connectionResult = await this.openConnection();
+      if (!connectionResult.success) {
+        initResult.error = connectionResult.error;
+        return initResult;
+      }
+
+      this.db = connectionResult.db;
+      this.isAvailable = true;
+      initResult.success = true;
+
+      return initResult;
+    } catch (error) {
+      initResult.error = `Error inesperado: ${error.message}`;
+      return initResult;
+    }
+  }
+
+  /**
+     * Abre la conexión con IndexedDB
+     * @returns {Promise<Object>} Resultado de la conexión
+     */
+  openConnection() {
+    return new Promise((resolve) => {
+      const config = this.configManager.getConfig();
+      const request = indexedDB.open(config.dbName, config.dbVersion);
+
+      request.onerror = () => {
+        resolve({
+          success: false,
+          error: 'Error abriendo IndexedDB',
+          db: null
+        });
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        const storeConfig = this.configManager.getStoreConfig();
+                
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, storeConfig);
+        }
+      };
+
+      request.onsuccess = () => {
+        resolve({
+          success: true,
+          error: null,
+          db: request.result
+        });
+      };
+    });
+  }
+
+  /**
+     * Cierra la conexión con la base de datos
+     * @returns {Object} Resultado del cierre
+     */
+  close() {
+    const closeResult = {
+      success: false,
+      error: null,
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      if (this.db) {
+        this.db.close();
+        this.db = null;
+        this.isAvailable = false;
+        closeResult.success = true;
+      } else {
+        closeResult.error = 'No hay conexión activa para cerrar';
+      }
+    } catch (error) {
+      closeResult.error = `Error cerrando conexión: ${error.message}`;
+    }
+
+    return closeResult;
+  }
+
+  /**
+     * Verifica si la base de datos está disponible
+     * @returns {boolean} True si está disponible
+     */
+  isDatabaseAvailable() {
+    return this.isAvailable && this.db !== null;
+  }
+
+  /**
+     * Obtiene la instancia de la base de datos
+     * @returns {IDBDatabase|null} Instancia de la base de datos
+     */
+  getDatabase() {
+    return this.isDatabaseAvailable() ? this.db : null;
+  }
+}
+
+/**
+ * DatabaseTransactionManager - Maneja las transacciones de IndexedDB
+ * Responsabilidad única: Gestionar transacciones de lectura y escritura
+ */
+class DatabaseTransactionManager {
+  constructor(connectionManager, configManager) {
+    this.connectionManager = connectionManager;
+    this.configManager = configManager;
+  }
+
+  /**
+     * Obtiene una transacción de lectura
+     * @returns {IDBTransaction} Transacción de lectura
+     * @throws {Error} Si la base de datos no está disponible
+     */
+  getReadTransaction() {
+    this.ensureDatabaseAvailable();
+        
+    const config = this.configManager.getConfig();
+    const db = this.connectionManager.getDatabase();
+        
+    return db.transaction([config.storeName], 'readonly');
+  }
+
+  /**
+     * Obtiene una transacción de escritura
+     * @returns {IDBTransaction} Transacción de escritura
+     * @throws {Error} Si la base de datos no está disponible
+     */
+  getWriteTransaction() {
+    this.ensureDatabaseAvailable();
+        
+    const config = this.configManager.getConfig();
+    const db = this.connectionManager.getDatabase();
+        
+    return db.transaction([config.storeName], 'readwrite');
+  }
+
+  /**
+     * Obtiene el object store para una transacción
+     * @param {IDBTransaction} transaction - Transacción activa
+     * @returns {IDBObjectStore} Object store
+     */
+  getObjectStore(transaction) {
+    const config = this.configManager.getConfig();
+    return transaction.objectStore(config.storeName);
+  }
+
+  /**
+     * Ejecuta una operación de lectura de manera segura
+     * @param {Function} operation - Operación a ejecutar
+     * @returns {Promise<Object>} Resultado de la operación
+     */
+  async executeReadOperation(operation) {
+    const operationResult = {
+      success: false,
+      data: null,
+      error: null,
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      const transaction = this.getReadTransaction();
+      const store = this.getObjectStore(transaction);
+            
+      const result = await operation(store);
+            
+      operationResult.success = true;
+      operationResult.data = result;
+            
+      return operationResult;
+    } catch (error) {
+      operationResult.error = `Error en operación de lectura: ${error.message}`;
+      return operationResult;
+    }
+  }
+
+  /**
+     * Ejecuta una operación de escritura de manera segura
+     * @param {Function} operation - Operación a ejecutar
+     * @returns {Promise<Object>} Resultado de la operación
+     */
+  async executeWriteOperation(operation) {
+    const operationResult = {
+      success: false,
+      data: null,
+      error: null,
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      const transaction = this.getWriteTransaction();
+      const store = this.getObjectStore(transaction);
+            
+      const result = await operation(store);
+            
+      operationResult.success = true;
+      operationResult.data = result;
+            
+      return operationResult;
+    } catch (error) {
+      operationResult.error = `Error en operación de escritura: ${error.message}`;
+      return operationResult;
+    }
+  }
+
+  /**
+     * Verifica que la base de datos esté disponible
+     * @throws {Error} Si la base de datos no está disponible
+     */
+  ensureDatabaseAvailable() {
+    if (!this.connectionManager.isDatabaseAvailable()) {
+      throw new Error('Database not available');
+    }
+  }
+
+  /**
+     * Obtiene información sobre el estado de las transacciones
+     * @returns {Object} Estado de las transacciones
+     */
+  getTransactionStatus() {
+    return {
+      isDatabaseAvailable: this.connectionManager.isDatabaseAvailable(),
+      storeName: this.configManager.getConfig().storeName,
+      timestamp: new Date().toISOString()
+    };
+  }
+}
+
+/**
+ * DatabaseManager - Coordinador de la gestión de IndexedDB
+ * Responsabilidad única: Coordinar los managers especializados
+ */
+class DatabaseManager {
+  constructor(dbName, dbVersion, storeName) {
+    this.configManager = new DatabaseConfigManager(dbName, dbVersion, storeName);
+    this.connectionManager = new DatabaseConnectionManager(this.configManager);
+    this.transactionManager = new DatabaseTransactionManager(this.connectionManager, this.configManager);
+  }
+
+  /**
+     * Inicializa la conexión con IndexedDB
+     */
+  async init() {
+    const initResult = await this.connectionManager.init();
+        
+    if (initResult.success) {
+      console.log('SyntropyFront: Base de datos inicializada');
+    } else {
+      console.warn('SyntropyFront: Error inicializando base de datos:', initResult.error);
+    }
+        
+    return initResult.success;
+  }
+
+  /**
+     * Obtiene una transacción de lectura
+     */
+  getReadTransaction() {
+    return this.transactionManager.getReadTransaction();
+  }
+
+  /**
+     * Obtiene una transacción de escritura
+     */
+  getWriteTransaction() {
+    return this.transactionManager.getWriteTransaction();
+  }
+
+  /**
+     * Cierra la conexión con la base de datos
+     */
+  close() {
+    const closeResult = this.connectionManager.close();
+        
+    if (!closeResult.success) {
+      console.warn('SyntropyFront: Error cerrando base de datos:', closeResult.error);
+    }
+        
+    return closeResult.success;
+  }
+
+  /**
+     * Verifica si la base de datos está disponible
+     */
+  isDatabaseAvailable() {
+    return this.connectionManager.isDatabaseAvailable();
+  }
+
+  // ===== Propiedades de compatibilidad =====
+    
+  /**
+     * @deprecated Usar configManager.getConfig().dbName
+     */
+  get dbName() {
+    return this.configManager.dbName;
+  }
+
+  /**
+     * @deprecated Usar configManager.getConfig().dbVersion
+     */
+  get dbVersion() {
+    return this.configManager.dbVersion;
+  }
+
+  /**
+     * @deprecated Usar configManager.getConfig().storeName
+     */
+  get storeName() {
+    return this.configManager.storeName;
+  }
+
+  /**
+     * @deprecated Usar connectionManager.getDatabase()
+     */
+  get db() {
+    return this.connectionManager.getDatabase();
+  }
+
+  /**
+     * @deprecated Usar connectionManager.isDatabaseAvailable()
+     */
+  get isAvailable() {
+    return this.connectionManager.isDatabaseAvailable();
+  }
+}
+
+/**
+ * StorageManager - Maneja las operaciones CRUD de IndexedDB
+ * Responsabilidad única: Gestionar operaciones de almacenamiento y recuperación
+ */
+class StorageManager {
+  constructor(databaseManager, serializationManager) {
+    this.databaseManager = databaseManager;
+    this.serializationManager = serializationManager;
+  }
+
+  /**
+     * Guarda items en el almacenamiento
+     * @param {Array} items - Items a guardar
+     * @returns {Promise<number>} ID del item guardado
+     */
+  async save(items) {
+    this.ensureDatabaseAvailable();
+
+    const serializationResult = this.serializationManager.serialize(items);
+    const serializedData = this.serializationManager.getData(serializationResult, '[]');
+
+    const item = {
+      items: serializedData,
+      timestamp: new Date().toISOString(),
+      retryCount: 0,
+      serializationError: serializationResult.error
+    };
+
+    return this.executeWriteOperation(store => store.add(item));
+  }
+
+  /**
+     * Obtiene todos los items del almacenamiento
+     * @returns {Promise<Array>} Items deserializados
+     */
+  async retrieve() {
+    if (!this.databaseManager.isDatabaseAvailable()) {
+      return [];
+    }
+
+    const rawItems = await this.executeReadOperation(store => store.getAll());
+    return this.deserializeItems(rawItems);
+  }
+
+  /**
+     * Obtiene un item específico por ID
+     * @param {number} id - ID del item
+     * @returns {Promise<Object|null>} Item deserializado o null
+     */
+  async retrieveById(id) {
+    if (!this.databaseManager.isDatabaseAvailable()) {
+      return null;
+    }
+
+    const rawItem = await this.executeReadOperation(store => store.get(id));
+    return rawItem ? this.deserializeItem(rawItem) : null;
+  }
+
+  /**
+     * Remueve un item del almacenamiento
+     * @param {number} id - ID del item a remover
+     * @returns {Promise<void>}
+     */
+  async remove(id) {
+    this.ensureDatabaseAvailable();
+    return this.executeWriteOperation(store => store.delete(id));
+  }
+
+  /**
+     * Actualiza un item en el almacenamiento
+     * @param {number} id - ID del item
+     * @param {Object} updates - Campos a actualizar
+     * @returns {Promise<number>} ID del item actualizado
+     */
+  async update(id, updates) {
+    this.ensureDatabaseAvailable();
+
+    const currentItem = await this.retrieveById(id);
+    if (!currentItem) {
+      throw new Error('Item not found');
+    }
+
+    const updatedItem = { ...currentItem, ...updates };
+    return this.executeWriteOperation(store => store.put(updatedItem));
+  }
+
+  /**
+     * Limpia todo el almacenamiento
+     * @returns {Promise<void>}
+     */
+  async clear() {
+    this.ensureDatabaseAvailable();
+    return this.executeWriteOperation(store => store.clear());
+  }
+
+  // ===== Métodos privados declarativos =====
+
+  /**
+     * Verifica que la base de datos esté disponible
+     * @throws {Error} Si la base de datos no está disponible
+     */
+  ensureDatabaseAvailable() {
+    if (!this.databaseManager.isDatabaseAvailable()) {
+      throw new Error('Database not available');
+    }
+  }
+
+  /**
+     * Ejecuta una operación de lectura de manera declarativa
+     * @param {Function} operation - Operación a ejecutar en el store
+     * @returns {Promise<*>} Resultado de la operación
+     */
+  executeReadOperation(operation) {
+    return new Promise((resolve, reject) => {
+      try {
+        const transaction = this.databaseManager.getReadTransaction();
+        const store = transaction.objectStore(this.databaseManager.storeName);
+        const request = operation(store);
+                
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  /**
+     * Ejecuta una operación de escritura de manera declarativa
+     * @param {Function} operation - Operación a ejecutar en el store
+     * @returns {Promise<*>} Resultado de la operación
+     */
+  executeWriteOperation(operation) {
+    return new Promise((resolve, reject) => {
+      try {
+        const transaction = this.databaseManager.getWriteTransaction();
+        const store = transaction.objectStore(this.databaseManager.storeName);
+        const request = operation(store);
+                
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  /**
+     * Deserializa un array de items
+     * @param {Array} rawItems - Items crudos de la base de datos
+     * @returns {Array} Items deserializados
+     */
+  deserializeItems(rawItems) {
+    return rawItems.map(item => this.deserializeItem(item));
+  }
+
+  /**
+     * Deserializa un item individual
+     * @param {Object} rawItem - Item crudo de la base de datos
+     * @returns {Object} Item deserializado
+     */
+  deserializeItem(rawItem) {
+    const deserializationResult = this.serializationManager.deserialize(rawItem.items);
+    const deserializedItems = this.serializationManager.getData(deserializationResult, []);
+
+    return {
+      ...rawItem,
+      items: deserializedItems,
+      deserializationError: deserializationResult.error
+    };
+  }
+}
+
+/**
+ * RetryLogicManager - Maneja la lógica de reintentos y limpieza
+ * Responsabilidad única: Gestionar reintentos y limpieza de items fallidos
+ */
+class RetryLogicManager {
+  constructor(storageManager, configManager) {
+    this.storageManager = storageManager;
+    this.config = configManager;
+  }
+
+  /**
+     * Intenta enviar items fallidos del buffer persistente
+     * @param {Function} sendCallback - Callback para enviar items
+     * @param {Function} removeCallback - Callback para remover items exitosos
+     */
+  async retryFailedItems(sendCallback, removeCallback) {
+    if (!this.storageManager) {
+      console.warn('SyntropyFront: Storage manager no disponible');
+      return;
+    }
+
+    try {
+      const failedItems = await this.storageManager.retrieve();
+            
+      for (const item of failedItems) {
+        if (item.retryCount < this.config.maxRetries) {
+          // Deserializar items del buffer
+          let deserializedItems;
+          try {
+            if (typeof item.items === 'string') {
+              deserializedItems = robustSerializer.deserialize(item.items);
+            } else {
+              deserializedItems = item.items;
+            }
+          } catch (error) {
+            console.error('SyntropyFront: Error deserializando items del buffer:', error);
+            await this.removeFailedItem(item.id);
+            continue;
+          }
+                    
+          if (sendCallback) {
+            try {
+              await sendCallback(deserializedItems, item.retryCount + 1, item.id);
+                            
+              // Si el envío fue exitoso, remover del buffer
+              if (removeCallback) {
+                await removeCallback(item.id);
+              } else {
+                await this.removeFailedItem(item.id);
+              }
+                            
+              console.log(`SyntropyFront: Reintento exitoso para item ${item.id}`);
+            } catch (error) {
+              console.warn(`SyntropyFront: Reintento falló para item ${item.id}:`, error);
+                            
+              // Incrementar contador de reintentos
+              await this.incrementRetryCount(item.id);
+            }
+          }
+        } else {
+          console.warn(`SyntropyFront: Item ${item.id} excedió máximo de reintentos, removiendo del buffer`);
+          await this.removeFailedItem(item.id);
+        }
+      }
+    } catch (error) {
+      console.error('SyntropyFront: Error procesando reintentos:', error);
+    }
+  }
+
+  /**
+     * Incrementa el contador de reintentos de un item
+     * @param {number} id - ID del item
+     */
+  async incrementRetryCount(id) {
+    try {
+      const currentItem = await this.storageManager.retrieveById(id);
+      if (currentItem) {
+        await this.storageManager.update(id, {
+          retryCount: currentItem.retryCount + 1
+        });
+      }
+    } catch (error) {
+      console.error('SyntropyFront: Error incrementando contador de reintentos:', error);
+    }
+  }
+
+  /**
+     * Remueve un item fallido del buffer
+     * @param {number} id - ID del item
+     */
+  async removeFailedItem(id) {
+    try {
+      await this.storageManager.remove(id);
+    } catch (error) {
+      console.error('SyntropyFront: Error removiendo item fallido:', error);
+    }
+  }
+
+  /**
+     * Limpia items que han excedido el máximo de reintentos
+     */
+  async cleanupExpiredItems() {
+    try {
+      const allItems = await this.storageManager.retrieve();
+      const expiredItems = allItems.filter(item => item.retryCount >= this.config.maxRetries);
+            
+      for (const item of expiredItems) {
+        await this.removeFailedItem(item.id);
+        console.warn(`SyntropyFront: Item ${item.id} removido por exceder máximo de reintentos`);
+      }
+            
+      if (expiredItems.length > 0) {
+        console.log(`SyntropyFront: Limpieza completada, ${expiredItems.length} items removidos`);
+      }
+    } catch (error) {
+      console.error('SyntropyFront: Error en limpieza de items expirados:', error);
+    }
+  }
+
+  /**
+     * Obtiene estadísticas de reintentos
+     */
+  async getRetryStats() {
+    try {
+      const allItems = await this.storageManager.retrieve();
+            
+      const stats = {
+        totalItems: allItems.length,
+        itemsByRetryCount: {},
+        averageRetryCount: 0
+      };
+
+      if (allItems.length > 0) {
+        const totalRetries = allItems.reduce((sum, item) => sum + item.retryCount, 0);
+        stats.averageRetryCount = totalRetries / allItems.length;
+                
+        allItems.forEach(item => {
+          const retryCount = item.retryCount;
+          stats.itemsByRetryCount[retryCount] = (stats.itemsByRetryCount[retryCount] || 0) + 1;
+        });
+      }
+
+      return stats;
+    } catch (error) {
+      console.error('SyntropyFront: Error obteniendo estadísticas de reintentos:', error);
+      return {
+        totalItems: 0,
+        itemsByRetryCount: {},
+        averageRetryCount: 0
+      };
+    }
+  }
+}
+
+/**
+ * SerializationManager - Maneja la serialización y deserialización de datos
+ * Responsabilidad única: Gestionar la transformación de datos para almacenamiento
+ */
+class SerializationManager {
+  constructor() {
+    this.serializer = robustSerializer;
+  }
+
+  /**
+     * Serializa items con manejo declarativo de errores
+     * @param {Array} items - Items a serializar
+     * @returns {Object} Resultado de serialización
+     */
+  serialize(items) {
+    const serializationResult = {
+      success: false,
+      data: null,
+      error: null,
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      const serializedData = this.serializer.serialize(items);
+      return {
+        ...serializationResult,
+        success: true,
+        data: serializedData
+      };
+    } catch (error) {
+      return {
+        ...serializationResult,
+        error: this.createSerializationError(error),
+        data: this.createFallbackData(error)
+      };
+    }
+  }
+
+  /**
+     * Deserializa datos con manejo declarativo de errores
+     * @param {string} serializedData - Datos serializados
+     * @returns {Object} Resultado de deserialización
+     */
+  deserialize(serializedData) {
+    const deserializationResult = {
+      success: false,
+      data: null,
+      error: null,
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      const deserializedData = this.serializer.deserialize(serializedData);
+      return {
+        ...deserializationResult,
+        success: true,
+        data: deserializedData
+      };
+    } catch (error) {
+      return {
+        ...deserializationResult,
+        error: this.createDeserializationError(error),
+        data: []
+      };
+    }
+  }
+
+  /**
+     * Crea un error de serialización estructurado
+     * @param {Error} error - Error original
+     * @returns {Object} Error estructurado
+     */
+  createSerializationError(error) {
+    return {
+      type: 'serialization_error',
+      message: error.message,
+      originalError: error,
+      timestamp: new Date().toISOString()
+    };
+  }
+
+  /**
+     * Crea un error de deserialización estructurado
+     * @param {Error} error - Error original
+     * @returns {Object} Error estructurado
+     */
+  createDeserializationError(error) {
+    return {
+      type: 'deserialization_error',
+      message: error.message,
+      originalError: error,
+      timestamp: new Date().toISOString()
+    };
+  }
+
+  /**
+     * Crea datos de fallback cuando falla la serialización
+     * @param {Error} error - Error que causó el fallback
+     * @returns {string} Datos de fallback serializados
+     */
+  createFallbackData(error) {
+    const fallbackPayload = {
+      __serializationError: true,
+      error: error.message,
+      timestamp: new Date().toISOString(),
+      fallbackData: 'Items no serializables - usando fallback'
+    };
+
+    return JSON.stringify(fallbackPayload);
+  }
+
+  /**
+     * Verifica si un resultado de serialización fue exitoso
+     * @param {Object} result - Resultado de serialización/deserialización
+     * @returns {boolean} True si fue exitoso
+     */
+  isSuccessful(result) {
+    return Boolean(result && result.success === true);
+  }
+
+  /**
+     * Obtiene los datos de un resultado, con fallback
+     * @param {Object} result - Resultado de serialización/deserialización
+     * @param {*} fallback - Valor por defecto si falla
+     * @returns {*} Datos o fallback
+     */
+  getData(result, fallback = null) {
+    return this.isSuccessful(result) ? result.data : fallback;
+  }
+}
+
+/**
+ * PersistentBufferManager - Coordinador del buffer persistente
+ * Responsabilidad única: Coordinar los componentes de almacenamiento persistente
+ */
+class PersistentBufferManager {
+  constructor(configManager) {
+    this.config = configManager;
+    this.usePersistentBuffer = false;
+        
+    // Inicializar componentes especializados
+    this.databaseManager = new DatabaseManager(
+      'SyntropyFrontBuffer',
+      1,
+      'failedItems'
+    );
+        
+    this.serializationManager = new SerializationManager();
+    this.storageManager = new StorageManager(this.databaseManager, this.serializationManager);
+    this.retryLogicManager = new RetryLogicManager(this.storageManager, this.config);
+        
+    // Inicializar buffer persistente si está disponible
+    this.initPersistentBuffer();
+  }
+
+  /**
+     * Inicializa el buffer persistente
+     */
+  async initPersistentBuffer() {
+    try {
+      const success = await this.databaseManager.init();
+      if (success) {
+        this.usePersistentBuffer = this.config.usePersistentBuffer;
+        console.log('SyntropyFront: Buffer persistente inicializado');
+      }
+    } catch (error) {
+      console.warn('SyntropyFront: Error inicializando buffer persistente:', error);
+    }
+  }
+
+  /**
+     * Guarda items fallidos en el buffer persistente
+     * @param {Array} items - Items a guardar
+     */
+  async save(items) {
+    if (!this.usePersistentBuffer) {
+      return;
+    }
+
+    try {
+      await this.storageManager.save(items);
+      console.log('SyntropyFront: Items guardados en buffer persistente');
+    } catch (error) {
+      console.error('SyntropyFront: Error guardando en buffer persistente:', error);
+    }
+  }
+
+  /**
+     * Obtiene items fallidos del buffer persistente
+     */
+  async retrieve() {
+    if (!this.usePersistentBuffer) {
+      return [];
+    }
+
+    try {
+      return await this.storageManager.retrieve();
+    } catch (error) {
+      console.error('SyntropyFront: Error obteniendo del buffer persistente:', error);
+      return [];
+    }
+  }
+
+  /**
+     * Remueve items del buffer persistente
+     * @param {number} id - ID del item a remover
+     */
+  async remove(id) {
+    if (!this.usePersistentBuffer) {
+      return;
+    }
+
+    try {
+      await this.storageManager.remove(id);
+    } catch (error) {
+      console.error('SyntropyFront: Error removiendo del buffer persistente:', error);
+    }
+  }
+
+  /**
+     * Intenta enviar items fallidos del buffer persistente
+     * @param {Function} sendCallback - Callback para enviar items
+     * @param {Function} removeCallback - Callback para remover items exitosos
+     */
+  async retryFailedItems(sendCallback, removeCallback) {
+    if (!this.usePersistentBuffer) {
+      return;
+    }
+
+    await this.retryLogicManager.retryFailedItems(sendCallback, removeCallback);
+  }
+
+  /**
+     * Limpia items que han excedido el máximo de reintentos
+     */
+  async cleanupExpiredItems() {
+    if (!this.usePersistentBuffer) {
+      return;
+    }
+
+    await this.retryLogicManager.cleanupExpiredItems();
+  }
+
+  /**
+     * Obtiene estadísticas del buffer persistente
+     */
+  async getStats() {
+    if (!this.usePersistentBuffer) {
+      return {
+        totalItems: 0,
+        itemsByRetryCount: {},
+        averageRetryCount: 0,
+        isAvailable: false
+      };
+    }
+
+    try {
+      const retryStats = await this.retryLogicManager.getRetryStats();
+      return {
+        ...retryStats,
+        isAvailable: this.isAvailable()
+      };
+    } catch (error) {
+      console.error('SyntropyFront: Error obteniendo estadísticas:', error);
+      return {
+        totalItems: 0,
+        itemsByRetryCount: {},
+        averageRetryCount: 0,
+        isAvailable: this.isAvailable()
+      };
+    }
+  }
+
+  /**
+     * Verifica si el buffer persistente está disponible
+     */
+  isAvailable() {
+    return this.usePersistentBuffer && this.databaseManager.isDatabaseAvailable();
+  }
+
+  /**
+     * Limpia todo el buffer persistente
+     */
+  async clear() {
+    if (!this.usePersistentBuffer) {
+      return;
+    }
+
+    try {
+      await this.storageManager.clear();
+      console.log('SyntropyFront: Buffer persistente limpiado');
+    } catch (error) {
+      console.error('SyntropyFront: Error limpiando buffer persistente:', error);
+    }
+  }
+
+  /**
+     * Cierra la conexión con la base de datos
+     */
+  close() {
+    this.databaseManager.close();
+    this.usePersistentBuffer = false;
+  }
+}
+
+/**
+ * Copyright 2024 Syntropysoft
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/**
+ * Agent - Envía datos de trazabilidad al backend
+ * Coordinador que usa componentes especializados para cada responsabilidad
+ */
+class Agent {
+  constructor() {
+    // Componentes especializados
+    this.config = new ConfigurationManager();
+    this.queue = new QueueManager(this.config);
+    this.retry = new RetryManager(this.config);
+    this.transport = new HttpTransport(this.config);
+    this.buffer = new PersistentBufferManager(this.config);
+        
+    // Configurar callbacks para coordinación
+    this.setupCallbacks();
+  }
+
+  /**
+     * Configura callbacks para coordinación entre componentes
+     */
+  setupCallbacks() {
+    // Callback para el QueueManager cuando hace flush
+    this.queue.flushCallback = async (items) => {
+      try {
+        await this.transport.send(items);
+        console.log('SyntropyFront: Datos enviados exitosamente');
+      } catch (error) {
+        console.error('SyntropyFront Agent: Error enviando datos:', error);
+                
+        // Agregar a cola de reintentos
+        this.retry.addToRetryQueue(items);
+                
+        // Guardar en buffer persistente
+        await this.buffer.save(items);
+      }
+    };
+
+    // Callback para el RetryManager cuando procesa reintentos
+    this.retry.sendCallback = async (items) => {
+      return await this.transport.send(items);
+    };
+
+    this.retry.removePersistentCallback = async (id) => {
+      await this.buffer.remove(id);
+    };
+
+    // Callback para el PersistentBufferManager cuando retry items
+    this.buffer.sendCallback = (items, retryCount, persistentId) => {
+      this.retry.addToRetryQueue(items, retryCount, persistentId);
+    };
+  }
+
+
+
+  /**
+     * Configura el agent
+     * @param {Object} config - Configuración del agent
+     */
+  configure(config) {
+    this.config.configure(config);
+  }
+
+  /**
+     * Envía un error al backend
+     * @param {Object} errorPayload - Payload del error
+     * @param {Object} context - Contexto adicional (opcional)
+     */
+  sendError(errorPayload, context = null) {
+    if (!this.config.isAgentEnabled()) {
+      console.warn('SyntropyFront Agent: No configurado, error no enviado');
+      return;
+    }
+
+    // Agregar contexto si está disponible
+    const payloadWithContext = context ? {
+      ...errorPayload,
+      context
+    } : errorPayload;
+
+    // Aplicar encriptación si está configurada
+    const dataToSend = this.transport.applyEncryption(payloadWithContext);
+
+    this.queue.add({
+      type: 'error',
+      data: dataToSend,
+      timestamp: new Date().toISOString()
+    });
+  }
+
+  /**
+     * Envía breadcrumbs al backend
+     * @param {Array} breadcrumbs - Lista de breadcrumbs
+     */
+  sendBreadcrumbs(breadcrumbs) {
+    // Solo enviar breadcrumbs si está habilitado (batchTimeout configurado)
+    if (!this.config.isAgentEnabled() || !this.config.shouldSendBreadcrumbs() || !breadcrumbs.length) {
+      return;
+    }
+
+    // Aplicar encriptación si está configurada
+    const dataToSend = this.transport.applyEncryption(breadcrumbs);
+
+    this.queue.add({
+      type: 'breadcrumbs',
+      data: dataToSend,
+      timestamp: new Date().toISOString()
+    });
+  }
+
+  /**
+     * Añade un item a la cola de envío (método público para compatibilidad)
+     * @param {Object} item - Item a añadir
+     */
+  addToQueue(item) {
+    this.queue.add(item);
+  }
+
+  /**
+     * Añade items a la cola de reintentos (método público para compatibilidad)
+     * @param {Array} items - Items a reintentar
+     * @param {number} retryCount - Número de reintento
+     * @param {number} persistentId - ID en buffer persistente (opcional)
+     */
+  addToRetryQueue(items, retryCount = 1, persistentId = null) {
+    this.retry.addToRetryQueue(items, retryCount, persistentId);
+  }
+
+  /**
+     * Procesa la cola de reintentos (método público para compatibilidad)
+     */
+  async processRetryQueue() {
+    await this.retry.processRetryQueue(
+      this.retry.sendCallback,
+      this.retry.removePersistentCallback
+    );
+  }
+
+  /**
+     * Envía todos los items en cola
+     */
+  async flush() {
+    await this.queue.flush(this.queue.flushCallback);
+  }
+
+  /**
+     * Fuerza el envío inmediato de todos los datos pendientes
+     */
+  async forceFlush() {
+    await this.flush();
+        
+    // También intentar enviar items en cola de reintentos
+    if (!this.retry.isEmpty()) {
+      console.log('SyntropyFront: Intentando enviar items en cola de reintentos...');
+      await this.processRetryQueue();
+    }
+  }
+
+  /**
+     * Obtiene estadísticas del agent
+     * @returns {Object} Estadísticas
+     */
+  getStats() {
+    const config = this.config.getConfig();
+    return {
+      queueLength: this.queue.getSize(),
+      retryQueueLength: this.retry.getSize(),
+      isEnabled: this.config.isAgentEnabled(),
+      usePersistentBuffer: config.usePersistentBuffer,
+      maxRetries: config.maxRetries
+    };
   }
 
-  clear() {
-    this.breadcrumbs = [];
+  /**
+     * Intenta enviar items fallidos del buffer persistente
+     */
+  async retryFailedItems() {
+    await this.buffer.retryFailedItems(this.buffer.sendCallback);
   }
 
-  getCount() {
-    return this.breadcrumbs.length;
+  /**
+     * Desactiva el agent
+     */
+  disable() {
+    this.config.configure({ endpoint: null }); // Deshabilitar
+    this.queue.clear();
+    this.retry.clear();
   }
 }
 
+// Instancia singleton
+const agent = new Agent();
+
 /**
- * ErrorManager - Gestiona errores
- * Responsabilidad única: Formatear y gestionar errores
+ * ContextCollector - Recolector dinámico de contexto
+ * Sistema elegante para recolectar datos según lo que pida el usuario
+ * Por defecto: Sets curados y seguros
+ * Configuración específica: El usuario elige exactamente qué quiere
  */
-class ErrorManager {
+class ContextCollector {
   constructor() {
-    this.errors = [];
-  }
+    // Sets curados por defecto (seguros y útiles)
+    this.defaultContexts = {
+      device: {
+        userAgent: () => navigator.userAgent,
+        language: () => navigator.language,
+        screen: () => ({
+          width: window.screen.width,
+          height: window.screen.height
+        }),
+        timezone: () => Intl.DateTimeFormat().resolvedOptions().timeZone
+      },
+      window: {
+        url: () => window.location.href,
+        viewport: () => ({
+          width: window.innerWidth,
+          height: window.innerHeight
+        }),
+        title: () => document.title
+      },
+      session: {
+        sessionId: () => this.generateSessionId(),
+        pageLoadTime: () => performance.now()
+      },
+      ui: {
+        visibility: () => document.visibilityState,
+        activeElement: () => document.activeElement ? {
+          tagName: document.activeElement.tagName
+        } : null
+      },
+      network: {
+        online: () => navigator.onLine,
+        connection: () => navigator.connection ? {
+          effectiveType: navigator.connection.effectiveType
+        } : null
+      }
+    };
 
-  send(error, context = {}) {
-    const errorData = {
-      message: error.message,
-      stack: error.stack,
-      context,
-      timestamp: new Date().toISOString()
+    // Mapeo completo de todos los campos disponibles
+    this.allFields = {
+      device: {
+        userAgent: () => navigator.userAgent,
+        language: () => navigator.language,
+        languages: () => navigator.languages,
+        screen: () => ({
+          width: window.screen.width,
+          height: window.screen.height,
+          availWidth: window.screen.availWidth,
+          availHeight: window.screen.availHeight,
+          colorDepth: window.screen.colorDepth,
+          pixelDepth: window.screen.pixelDepth
+        }),
+        timezone: () => Intl.DateTimeFormat().resolvedOptions().timeZone,
+        cookieEnabled: () => navigator.cookieEnabled,
+        doNotTrack: () => navigator.doNotTrack
+      },
+      window: {
+        url: () => window.location.href,
+        pathname: () => window.location.pathname,
+        search: () => window.location.search,
+        hash: () => window.location.hash,
+        referrer: () => document.referrer,
+        title: () => document.title,
+        viewport: () => ({
+          width: window.innerWidth,
+          height: window.innerHeight
+        })
+      },
+      storage: {
+        localStorage: () => {
+          const keys = Object.keys(localStorage);
+          return {
+            keys: keys.length,
+            size: JSON.stringify(localStorage).length,
+            keyNames: keys // Solo nombres, no valores
+          };
+        },
+        sessionStorage: () => {
+          const keys = Object.keys(sessionStorage);
+          return {
+            keys: keys.length,
+            size: JSON.stringify(sessionStorage).length,
+            keyNames: keys // Solo nombres, no valores
+          };
+        }
+      },
+      network: {
+        online: () => navigator.onLine,
+        connection: () => navigator.connection ? {
+          effectiveType: navigator.connection.effectiveType,
+          downlink: navigator.connection.downlink,
+          rtt: navigator.connection.rtt
+        } : null
+      },
+      ui: {
+        focused: () => document.hasFocus(),
+        visibility: () => document.visibilityState,
+        activeElement: () => document.activeElement ? {
+          tagName: document.activeElement.tagName,
+          id: document.activeElement.id,
+          className: document.activeElement.className
+        } : null
+      },
+      performance: {
+        memory: () => window.performance && window.performance.memory ? {
+          used: Math.round(window.performance.memory.usedJSHeapSize / 1048576),
+          total: Math.round(window.performance.memory.totalJSHeapSize / 1048576),
+          limit: Math.round(window.performance.memory.jsHeapSizeLimit / 1048576)
+        } : null,
+        timing: () => window.performance ? {
+          navigationStart: window.performance.timing.navigationStart,
+          loadEventEnd: window.performance.timing.loadEventEnd
+        } : null
+      },
+      session: {
+        sessionId: () => this.generateSessionId(),
+        startTime: () => new Date().toISOString(),
+        pageLoadTime: () => performance.now()
+      }
     };
-        
-    this.errors.push(errorData);
-    return errorData;
   }
 
-  getAll() {
-    return this.errors;
-  }
+  /**
+     * Recolecta contexto según la configuración
+     * @param {Object} contextConfig - Configuración de contexto
+     * @returns {Object} Contexto recolectado
+     */
+  collect(contextConfig = {}) {
+    const context = {};
 
-  clear() {
-    this.errors = [];
+    Object.entries(contextConfig).forEach(([contextType, config]) => {
+      try {
+        if (config === true) {
+          // Usar set curado por defecto
+          context[contextType] = this.collectDefaultContext(contextType);
+        } else if (Array.isArray(config)) {
+          // Configuración específica: array de campos
+          context[contextType] = this.collectSpecificFields(contextType, config);
+        } else if (config === false) {
+          // Explícitamente deshabilitado
+          // No hacer nada
+        } else {
+          console.warn(`SyntropyFront: Configuración de contexto inválida para ${contextType}:`, config);
+        }
+      } catch (error) {
+        console.warn(`SyntropyFront: Error recolectando contexto ${contextType}:`, error);
+        context[contextType] = { error: 'Failed to collect' };
+      }
+    });
+
+    return context;
   }
 
-  getCount() {
-    return this.errors.length;
+  /**
+     * Recolecta el set curado por defecto
+     * @param {string} contextType - Tipo de contexto
+     * @returns {Object} Contexto por defecto
+     */
+  collectDefaultContext(contextType) {
+    const defaultContext = this.defaultContexts[contextType];
+    if (!defaultContext) {
+      console.warn(`SyntropyFront: No hay set por defecto para ${contextType}`);
+      return {};
+    }
+
+    const result = {};
+    Object.entries(defaultContext).forEach(([field, getter]) => {
+      try {
+        result[field] = getter();
+      } catch (error) {
+        console.warn(`SyntropyFront: Error recolectando campo ${field} de ${contextType}:`, error);
+        result[field] = null;
+      }
+    });
+
+    return result;
   }
-}
 
-/**
- * Logger - Hace logging solo en errores
- * Responsabilidad única: Mostrar mensajes solo cuando hay errores
- */
-class Logger {
-  constructor() {
-    this.isSilent = true; // Por defecto silente
+  /**
+     * Recolecta campos específicos
+     * @param {string} contextType - Tipo de contexto
+     * @param {Array} fields - Campos específicos a recolectar
+     * @returns {Object} Contexto específico
+     */
+  collectSpecificFields(contextType, fields) {
+    const allFields = this.allFields[contextType];
+    if (!allFields) {
+      console.warn(`SyntropyFront: Tipo de contexto desconocido: ${contextType}`);
+      return {};
+    }
+
+    const result = {};
+    fields.forEach(field => {
+      try {
+        if (allFields[field]) {
+          result[field] = allFields[field]();
+        } else {
+          console.warn(`SyntropyFront: Campo ${field} no disponible en ${contextType}`);
+        }
+      } catch (error) {
+        console.warn(`SyntropyFront: Error recolectando campo ${field} de ${contextType}:`, error);
+        result[field] = null;
+      }
+    });
+
+    return result;
   }
 
-  log(message, data = null) {
-    // No loggear nada en modo silente
-    if (this.isSilent) return;
+  /**
+     * Genera un ID de sesión seguro usando crypto.randomUUID() cuando esté disponible
+     * @returns {string} ID de sesión seguro
+     */
+  generateSecureId() {
+    try {
+      // Intentar usar crypto.randomUUID() si está disponible (Node.js 14.17+, browsers modernos)
+      if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+      }
+      
+      // Fallback para navegadores más antiguos: usar crypto.getRandomValues()
+      if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
+        const array = new Uint8Array(16);
+        crypto.getRandomValues(array);
         
-    if (data) {
-      console.log(message, data);
-    } else {
-      console.log(message);
+        // Convertir a formato UUID v4
+        const hex = Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
+        return [
+          hex.slice(0, 8),
+          hex.slice(8, 12),
+          hex.slice(12, 16),
+          hex.slice(16, 20),
+          hex.slice(20, 32)
+        ].join('-');
+      }
+      
+      // Fallback final: timestamp + random (menos seguro pero funcional)
+      const timestamp = Date.now().toString(36);
+      const random = Math.random().toString(36).substring(2, 15);
+      return `${timestamp}-${random}`;
+    } catch (error) {
+      console.warn('SyntropyFront: Error generando ID seguro, usando fallback:', error);
+      // Fallback de emergencia
+      return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
     }
   }
 
-  error(message, data = null) {
-    // SIEMPRE loggear errores (ignora modo silencioso)
-    if (data) {
-      console.error(message, data);
-    } else {
-      console.error(message);
+  /**
+     * Genera un ID de sesión simple
+     */
+  generateSessionId() {
+    if (!this._sessionId) {
+      this._sessionId = `session_${this.generateSecureId()}`;
     }
+    return this._sessionId;
   }
 
-  warn(message, data = null) {
-    // Solo warnings importantes
-    if (data) {
-      console.warn(message, data);
-    } else {
-      console.warn(message);
-    }
+  /**
+     * Obtiene la lista de tipos de contexto disponibles
+     * @returns {Array} Tipos disponibles
+     */
+  getAvailableTypes() {
+    return Object.keys(this.allFields);
   }
 
-  // Método para activar logging (solo para debug)
-  enableLogging() {
-    this.isSilent = false;
+  /**
+     * Obtiene la lista de campos disponibles para un tipo de contexto
+     * @param {string} contextType - Tipo de contexto
+     * @returns {Array} Campos disponibles
+     */
+  getAvailableFields(contextType) {
+    const fields = this.allFields[contextType];
+    return fields ? Object.keys(fields) : [];
   }
 
-  // Método para desactivar logging
-  disableLogging() {
-    this.isSilent = true;
+  /**
+     * Obtiene información sobre los sets por defecto
+     * @returns {Object} Información de sets por defecto
+     */
+  getDefaultContextsInfo() {
+    const info = {};
+    Object.entries(this.defaultContexts).forEach(([type, fields]) => {
+      info[type] = Object.keys(fields);
+    });
+    return info;
   }
 }
 
+// Instancia singleton
+const contextCollector = new ContextCollector();
+
 /**
  * Copyright 2024 Syntropysoft
  *
@@ -132,307 +2367,519 @@ class Logger {
  */
 
 
-class SyntropyFront {
+/**
+ * Interceptors - Observadores que capturan eventos automáticamente
+ * Implementa Chaining Pattern para coexistir con otros APMs
+ */
+class Interceptors {
   constructor() {
-    // Basic managers
-    this.breadcrumbManager = new BreadcrumbManager();
-    this.errorManager = new ErrorManager();
-    this.logger = new Logger();
-        
-    // Default configuration
-    this.maxEvents = 50;
-    this.fetchConfig = null; // Complete fetch configuration
-    this.onErrorCallback = null; // User-defined error handler
-    this.isActive = false;
-        
-    // Automatic capture
-    this.originalHandlers = {};
-        
-    // Auto-initialize
-    this.init();
-  }
+    this.isInitialized = false;
+    this.config = {
+      captureClicks: true,
+      captureFetch: true,
+      captureErrors: true,
+      captureUnhandledRejections: true
+    };
+    this.contextTypes = [];
 
-  init() {
-    this.isActive = true;
-        
-    // Configure automatic capture immediately
-    this.setupAutomaticCapture();
-        
-    console.log('🚀 SyntropyFront: Initialized with automatic capture');
+    // Referencias originales para restaurar en destroy()
+    this.originalHandlers = {
+      fetch: null,
+      onerror: null,
+      onunhandledrejection: null
+    };
+
+    // Event listeners para limpiar
+    this.eventListeners = new Map();
   }
 
   /**
-     * Configure SyntropyFront
-     * @param {Object} config - Configuration
-     * @param {number} config.maxEvents - Maximum number of events to store
-     * @param {Object} config.fetch - Complete fetch configuration
-     * @param {string} config.fetch.url - Endpoint URL
-     * @param {Object} config.fetch.options - Fetch options (headers, method, etc.)
-     * @param {Function} config.onError - User-defined error handler callback
+     * Configura los interceptores
+     * @param {Object} config - Configuración de interceptores
      */
-  configure(config = {}) {
-    this.maxEvents = config.maxEvents || this.maxEvents;
-    this.fetchConfig = config.fetch;
-    this.onErrorCallback = config.onError;
-        
-    if (this.onErrorCallback) {
-      console.log(`✅ SyntropyFront: Configured - maxEvents: ${this.maxEvents}, custom error handler`);
-    } else if (this.fetchConfig) {
-      console.log(`✅ SyntropyFront: Configured - maxEvents: ${this.maxEvents}, endpoint: ${this.fetchConfig.url}`);
-    } else {
-      console.log(`✅ SyntropyFront: Configured - maxEvents: ${this.maxEvents}, console only`);
-    }
+  configure(config) {
+    this.config = { ...this.config, ...config };
+    this.contextTypes = config.context || [];
   }
 
   /**
-     * Configure automatic event capture
+     * Inicializa todos los interceptores
      */
-  setupAutomaticCapture() {
-    if (typeof window === 'undefined') return;
+  init() {
+    if (this.isInitialized) {
+      console.warn('SyntropyFront: Interceptors ya están inicializados');
+      return;
+    }
 
-    // Capture clicks
-    this.setupClickCapture();
-        
-    // Capture errors
-    this.setupErrorCapture();
-        
-    // Capture HTTP calls
-    this.setupHttpCapture();
-        
-    // Capture console logs
-    this.setupConsoleCapture();
+    if (this.config.captureClicks) {
+      this.setupClickInterceptor();
+    }
+
+    if (this.config.captureFetch) {
+      this.setupFetchInterceptor();
+    }
+
+    if (this.config.captureErrors || this.config.captureUnhandledRejections) {
+      this.setupErrorInterceptors();
+    }
+
+    this.isInitialized = true;
+    console.log('SyntropyFront: Interceptors inicializados con Chaining Pattern');
   }
 
   /**
-     * Capture user clicks
+     * Intercepta clics de usuario
      */
-  setupClickCapture() {
+  setupClickInterceptor() {
+    // Solo configurar en el browser
+    if (typeof document === 'undefined') {
+      console.log('SyntropyFront: Click interceptor no disponible (no browser)');
+      return;
+    }
+
+    let lastClickTime = 0;
+    const THROTTLE_MS = 500;
+
     const clickHandler = (event) => {
-      const element = event.target;
-      this.addBreadcrumb('user', 'click', {
-        element: element.tagName,
-        id: element.id,
-        className: element.className,
-        x: event.clientX,
-        y: event.clientY
-      });
-    };
+      const el = event.target;
+      if (!el) return;
 
-    document.addEventListener('click', clickHandler);
-  }
+      // ✅ THROTTLE: Evitar ráfagas de clicks (ej: double clicks accidentales)
+      const now = Date.now();
+      if (now - lastClickTime < THROTTLE_MS) return;
+      lastClickTime = now;
 
-  /**
-     * Automatically capture errors
-     */
-  setupErrorCapture() {
-    // Save original handlers
-    this.originalHandlers.onerror = window.onerror;
-    this.originalHandlers.onunhandledrejection = window.onunhandledrejection;
+      // ✅ FILTER: Solo capturar elementos potencialmente interactivos
+      const isInteractive = (element) => {
+        if (!element || element.nodeType !== 1) return false;
+        const interactiveTags = ['a', 'button', 'input', 'select', 'textarea', 'label', 'summary'];
+        const isClickableRole = ['button', 'link', 'checkbox', 'radio', 'menuitem'].includes(element.getAttribute?.('role'));
 
-    // Intercept errors
-    window.onerror = (message, source, lineno, colno, error) => {
-      const errorPayload = {
-        type: 'uncaught_exception',
-        error: { message, source, lineno, colno, stack: error?.stack },
-        breadcrumbs: this.getBreadcrumbs(),
-        timestamp: new Date().toISOString()
+        let hasPointerCursor = false;
+        try {
+          hasPointerCursor = window.getComputedStyle?.(element)?.cursor === 'pointer';
+        } catch (e) {
+          // Ignorar errores en entornos donde getComputedStyle falla (ej: JSDOM con mocks incompletos)
+        }
+
+        return interactiveTags.includes(element.tagName.toLowerCase()) || isClickableRole || hasPointerCursor;
       };
 
-      this.handleError(errorPayload);
-            
-      // Call original handler
-      if (this.originalHandlers.onerror) {
-        return this.originalHandlers.onerror(message, source, lineno, colno, error);
+      // Si el elemento no es interactivo, buscar hacia arriba en el DOM (bubbling)
+      let target = el;
+      while (target && target !== document.body) {
+        if (isInteractive(target)) break;
+        target = target.parentElement;
       }
-            
-      return false;
-    };
 
-    // Intercept rejected promises
-    window.onunhandledrejection = (event) => {
-      const errorPayload = {
-        type: 'unhandled_rejection',
-        error: {
-          message: event.reason?.message || 'Promise rejection without message',
-          stack: event.reason?.stack,
-        },
-        breadcrumbs: this.getBreadcrumbs(),
-        timestamp: new Date().toISOString()
-      };
+      // Si no encontramos un elemento interactivo, ignoramos el click (reduce ruido)
+      if (!target || target === document.body) return;
 
-      this.handleError(errorPayload);
-            
-      // Call original handler
-      if (this.originalHandlers.onunhandledrejection) {
-        this.originalHandlers.onunhandledrejection(event);
+      // Genera un selector CSS simple para identificar el elemento
+      let selector = target.tagName.toLowerCase();
+      if (target.id) {
+        selector += `#${target.id}`;
+      } else if (target.className && typeof target.className === 'string') {
+        selector += `.${target.className.split(' ').filter(Boolean).join('.')}`;
       }
+
+      breadcrumbStore.add({
+        category: 'ui',
+        message: `Usuario hizo click en '${selector}'`,
+        data: {
+          selector,
+          tagName: target.tagName,
+          id: target.id,
+          className: target.className,
+          text: target.innerText?.substring(0, 30).trim() || target.value?.substring(0, 30)
+        }
+      });
     };
+
+    // Guardar referencia para limpiar después
+    this.eventListeners.set('click', clickHandler);
+    document.addEventListener('click', clickHandler, true);
   }
 
   /**
-     * Capture HTTP calls
+     * Intercepta llamadas de red (fetch) con Chaining
      */
-  setupHttpCapture() {
-    // Intercept fetch
-    const originalFetch = window.fetch;
-    window.fetch = (...args) => {
-      const [url, options] = args;
-            
-      this.addBreadcrumb('http', 'fetch', {
-        url,
-        method: options?.method || 'GET'
-      });
+  setupFetchInterceptor() {
+    // Solo configurar en el browser
+    if (typeof window === 'undefined' || !window.fetch) {
+      console.log('SyntropyFront: Fetch interceptor no disponible (no browser/fetch)');
+      return;
+    }
 
-      return originalFetch(...args).then(response => {
-        this.addBreadcrumb('http', 'fetch_response', {
-          url,
-          status: response.status
-        });
-        return response;
-      }).catch(error => {
-        this.addBreadcrumb('http', 'fetch_error', {
+    // Guardar referencia original
+    this.originalHandlers.fetch = window.fetch;
+
+    // Crear nuevo handler que encadena con el original
+    const syntropyFetchHandler = (...args) => {
+      const url = args[0] instanceof Request ? args[0].url : args[0];
+      const method = args[0] instanceof Request ? args[0].method : (args[1]?.method || 'GET');
+
+      breadcrumbStore.add({
+        category: 'network',
+        message: `Request: ${method} ${url}`,
+        data: {
           url,
-          error: error.message
-        });
-        throw error;
+          method,
+          timestamp: Date.now()
+        }
       });
+
+      // ✅ CHAINING: Llamar al handler original
+      return this.originalHandlers.fetch.apply(window, args);
     };
+
+    // Sobrescribir con el nuevo handler
+    window.fetch = syntropyFetchHandler;
   }
 
   /**
-     * Capture console logs
+     * Intercepta errores globales con Chaining
      */
-  setupConsoleCapture() {
-    const originalLog = console.log;
-    const originalError = console.error;
-    const originalWarn = console.warn;
+  setupErrorInterceptors() {
+    // Solo configurar en el browser
+    if (typeof window === 'undefined') {
+      console.log('SyntropyFront: Error interceptors no disponibles (no browser)');
+      return;
+    }
 
-    console.log = (...args) => {
-      this.addBreadcrumb('console', 'log', { message: args.join(' ') });
-      originalLog.apply(console, args);
-    };
+    if (this.config.captureErrors) {
+      // Guardar referencia original
+      this.originalHandlers.onerror = window.onerror;
 
-    console.error = (...args) => {
-      this.addBreadcrumb('console', 'error', { message: args.join(' ') });
-      originalError.apply(console, args);
-    };
+      // Crear nuevo handler que encadena con el original
+      const syntropyErrorHandler = (message, source, lineno, colno, error) => {
+        const errorPayload = {
+          type: 'uncaught_exception',
+          error: {
+            message,
+            source,
+            lineno,
+            colno,
+            stack: error?.stack
+          },
+          breadcrumbs: breadcrumbStore.getAll(),
+          timestamp: new Date().toISOString()
+        };
 
-    console.warn = (...args) => {
-      this.addBreadcrumb('console', 'warn', { message: args.join(' ') });
-      originalWarn.apply(console, args);
-    };
+        this.handleError(errorPayload);
+
+        // ✅ CHAINING: Llamar al handler original si existe
+        if (this.originalHandlers.onerror) {
+          try {
+            return this.originalHandlers.onerror(message, source, lineno, colno, error);
+          } catch (originalError) {
+            console.warn('SyntropyFront: Error en handler original:', originalError);
+            return false;
+          }
+        }
+
+        return false; // No prevenir el error por defecto
+      };
+
+      // Sobrescribir con el nuevo handler
+      window.onerror = syntropyErrorHandler;
+    }
+
+    if (this.config.captureUnhandledRejections) {
+      // Guardar referencia original
+      this.originalHandlers.onunhandledrejection = window.onunhandledrejection;
+
+      // Crear nuevo handler que encadena con el original
+      const syntropyRejectionHandler = (event) => {
+        const errorPayload = {
+          type: 'unhandled_rejection',
+          error: {
+            message: event.reason?.message || 'Rechazo de promesa sin mensaje',
+            stack: event.reason?.stack,
+          },
+          breadcrumbs: breadcrumbStore.getAll(),
+          timestamp: new Date().toISOString()
+        };
+
+        this.handleError(errorPayload);
+
+        // ✅ CHAINING: Llamar al handler original si existe
+        if (this.originalHandlers.onunhandledrejection) {
+          try {
+            this.originalHandlers.onunhandledrejection(event);
+          } catch (originalError) {
+            console.warn('SyntropyFront: Error en handler original de rejection:', originalError);
+          }
+        }
+      };
+
+      // Sobrescribir con el nuevo handler
+      window.onunhandledrejection = syntropyRejectionHandler;
+    }
   }
 
   /**
-     * Handle errors - priority: onError callback > fetch > console
+     * Maneja los errores capturados
+     * @param {Object} errorPayload - Payload del error
      */
   handleError(errorPayload) {
-    // Default log
-    this.logger.error('❌ Error:', errorPayload);
-        
-    // Priority 1: User-defined callback (maximum flexibility)
-    if (this.onErrorCallback) {
-      try {
-        this.onErrorCallback(errorPayload);
-      } catch (callbackError) {
-        console.warn('SyntropyFront: Error in user callback:', callbackError);
-      }
-      return;
+    // Recolectar contexto si está configurado
+    const context = this.contextTypes.length > 0 ? contextCollector.collect(this.contextTypes) : null;
+
+    // Enviar al agent si está configurado
+    agent.sendError(errorPayload, context);
+
+    // Callback para manejo personalizado de errores
+    if (this.onError) {
+      this.onError(errorPayload);
+    } else {
+      // Comportamiento por defecto: log a consola
+      console.error('SyntropyFront - Error detectado:', errorPayload);
     }
-        
-    // Priority 2: Fetch to endpoint
-    if (this.fetchConfig) {
-      this.postToEndpoint(errorPayload);
-      return;
+  }
+
+  /**
+     * Desactiva todos los interceptores y restaura handlers originales
+     */
+  destroy() {
+    if (!this.isInitialized) return;
+
+    console.log('SyntropyFront: Limpiando interceptores...');
+
+    // ✅ RESTAURAR: Handlers originales
+    if (this.originalHandlers.fetch) {
+      window.fetch = this.originalHandlers.fetch;
+      console.log('SyntropyFront: fetch original restaurado');
     }
-        
-    // Priority 3: Console only (default)
-    // Already logged above
+
+    if (this.originalHandlers.onerror) {
+      window.onerror = this.originalHandlers.onerror;
+      console.log('SyntropyFront: onerror original restaurado');
+    }
+
+    if (this.originalHandlers.onunhandledrejection) {
+      window.onunhandledrejection = this.originalHandlers.onunhandledrejection;
+      console.log('SyntropyFront: onunhandledrejection original restaurado');
+    }
+
+    // ✅ LIMPIAR: Event listeners
+    if (typeof document !== 'undefined') {
+      this.eventListeners.forEach((handler, eventType) => {
+        document.removeEventListener(eventType, handler, true);
+        console.log(`SyntropyFront: Event listener ${eventType} removido`);
+      });
+    }
+
+    // Limpiar referencias
+    this.originalHandlers = {
+      fetch: null,
+      onerror: null,
+      onunhandledrejection: null
+    };
+    this.eventListeners.clear();
+    this.isInitialized = false;
+
+    console.log('SyntropyFront: Interceptors destruidos y handlers restaurados');
   }
 
   /**
-     * Post error object using fetch configuration
+     * Obtiene información sobre los handlers originales
+     * @returns {Object} Información de handlers
      */
-  postToEndpoint(errorPayload) {
-    const { url, options = {} } = this.fetchConfig;
-        
-    // Default configuration
-    const defaultOptions = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...options.headers
-      },
-      body: JSON.stringify(errorPayload),
-      ...options
+  getHandlerInfo() {
+    return {
+      isInitialized: this.isInitialized,
+      hasOriginalFetch: !!this.originalHandlers.fetch,
+      hasOriginalOnError: !!this.originalHandlers.onerror,
+      hasOriginalOnUnhandledRejection: !!this.originalHandlers.onunhandledrejection,
+      eventListenersCount: this.eventListeners.size
+    };
+  }
+}
+
+// Instancia singleton
+const interceptors = new Interceptors();
+
+/**
+ * Copyright 2024 Syntropysoft
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+class SyntropyFront {
+  constructor() {
+    this.isActive = false;
+    this.config = {
+      maxEvents: 50,
+      endpoint: null,
+      headers: {},
+      usePersistentBuffer: true,
+      captureClicks: true,
+      captureFetch: true,
+      captureErrors: true,
+      captureUnhandledRejections: true,
+      onError: null
     };
 
-    fetch(url, defaultOptions).catch(error => {
-      console.warn('SyntropyFront: Error posting to endpoint:', error);
+    // Auto-inicializar
+    this.init();
+  }
+
+  /**
+   * Inicializa la biblioteca y activa los interceptores
+   */
+  init() {
+    if (this.isActive) return;
+
+    // Configurar el agent por defecto
+    agent.configure({
+      endpoint: this.config.endpoint,
+      headers: this.config.headers,
+      usePersistentBuffer: this.config.usePersistentBuffer
+    });
+
+    // Inicializar interceptores
+    interceptors.configure({
+      captureClicks: this.config.captureClicks,
+      captureFetch: this.config.captureFetch,
+      captureErrors: this.config.captureErrors,
+      captureUnhandledRejections: this.config.captureUnhandledRejections
+    });
+
+    // Inyectar callback de error si existe
+    if (this.config.onError) {
+      interceptors.onError = this.config.onError;
+    }
+
+    interceptors.init();
+
+    // Intentar reintentar items fallidos de sesiones previas
+    agent.retryFailedItems().catch(err => {
+      console.warn('SyntropyFront: Error al intentar recuperar items persistentes:', err);
+    });
+
+    this.isActive = true;
+    console.log('🚀 SyntropyFront: Inicializado con arquitectura modular resiliente');
+  }
+
+  /**
+   * Configura SyntropyFront
+   * @param {Object} config - Configuración
+   */
+  configure(config = {}) {
+    // Actualizar configuración local
+    this.config = { ...this.config, ...config };
+
+    // Si se pasa 'fetch', extraer endpoint y headers por compatibilidad
+    if (config.fetch) {
+      this.config.endpoint = config.fetch.url;
+      this.config.headers = config.fetch.options?.headers || {};
+    }
+
+    // Re-configurar componentes internos
+    agent.configure({
+      endpoint: this.config.endpoint,
+      headers: this.config.headers,
+      usePersistentBuffer: this.config.usePersistentBuffer
+    });
+
+    interceptors.configure({
+      captureClicks: this.config.captureClicks,
+      captureFetch: this.config.captureFetch,
+      captureErrors: this.config.captureErrors,
+      captureUnhandledRejections: this.config.captureUnhandledRejections
     });
+
+    if (this.config.onError) {
+      interceptors.onError = this.config.onError;
+    }
+
+    const mode = this.config.endpoint ? `endpoint: ${this.config.endpoint}` : 'console only';
+    console.log(`✅ SyntropyFront: Configurado - ${mode}`);
   }
 
-  // Public API
+  /**
+   * Añade un breadcrumb manualmente
+   */
   addBreadcrumb(category, message, data = {}) {
-    if (!this.isActive) return;
-        
-    const breadcrumb = this.breadcrumbManager.add(category, message, data);
-        
-    // Keep only the last maxEvents
-    const breadcrumbs = this.breadcrumbManager.getAll();
-    if (breadcrumbs.length > this.maxEvents) {
-      this.breadcrumbManager.clear();
-      breadcrumbs.slice(-this.maxEvents).forEach(b => this.breadcrumbManager.add(b.category, b.message, b.data));
-    }
-        
-    return breadcrumb;
+    return breadcrumbStore.add({ category, message, data });
   }
 
+  /**
+   * Obtiene todos los breadcrumbs
+   */
   getBreadcrumbs() {
-    return this.breadcrumbManager.getAll();
+    return breadcrumbStore.getAll();
   }
 
+  /**
+   * Limpia los breadcrumbs
+   */
   clearBreadcrumbs() {
-    this.breadcrumbManager.clear();
+    breadcrumbStore.clear();
   }
 
+  /**
+   * Envía un error manualmente con contexto
+   */
   sendError(error, context = {}) {
-    if (!this.isActive) return;
-        
-    const errorData = this.errorManager.send(error, context);
     const errorPayload = {
-      ...errorData,
+      type: 'manual_error',
+      error: {
+        message: error.message || String(error),
+        name: error.name || 'Error',
+        stack: error.stack
+      },
       breadcrumbs: this.getBreadcrumbs(),
       timestamp: new Date().toISOString()
     };
-        
-    this.handleError(errorPayload);
-    return errorData;
-  }
 
-  getErrors() {
-    return this.errorManager.getAll();
+    agent.sendError(errorPayload, context);
+    return errorPayload;
   }
 
-  clearErrors() {
-    this.errorManager.clear();
+  /**
+   * Fuerza el envío de datos pendientes
+   */
+  async flush() {
+    await agent.forceFlush();
   }
 
-  // Utility methods
+  /**
+   * Obtiene estadísticas de uso
+   */
   getStats() {
     return {
-      breadcrumbs: this.breadcrumbManager.getCount(),
-      errors: this.errorManager.getCount(),
       isActive: this.isActive,
-      maxEvents: this.maxEvents,
-      hasFetchConfig: !!this.fetchConfig,
-      hasErrorCallback: !!this.onErrorCallback,
-      endpoint: this.fetchConfig?.url || 'console'
+      breadcrumbs: breadcrumbStore.count(),
+      agent: agent.getStats(),
+      config: { ...this.config }
     };
   }
+
+  /**
+   * Desactiva la biblioteca y restaura hooks originales
+   */
+  destroy() {
+    interceptors.destroy();
+    agent.disable();
+    this.isActive = false;
+    console.log('SyntropyFront: Desactivado');
+  }
 }
 
-// Single instance - auto-initializes
+// Instancia única (Singleton)
 const syntropyFront = new SyntropyFront();
 
 export { syntropyFront as default };