amayo/README/AEDITOR_NUEVAS_FUNCIONES.md

🚀 Nuevas Funcionalidades de AEditor

📋 Sistema de Registro de Actividad

Descripción

Un sistema completo de registro de operaciones que mantiene un historial detallado de todas las acciones realizadas en el editor, permitiendo auditar y revisar cambios.

Características

• ✅ Timeline de Actividad: Visualiza cronológicamente todas las operaciones
• ✅ Filtros por Tipo: Separar entre crear, editar, guardar, eliminar, abrir
• ✅ Detalles Completos: Archivo afectado, líneas modificadas, timestamp
• ✅ Exportación: Guarda el log completo en JSON
• ✅ Persistencia: Mantiene historial entre sesiones

Tipos de Eventos Rastreados

• 🟢 Crear - Nuevos archivos/comandos/eventos
• 🟡 Editar - Modificaciones de código
• 🔵 Guardar - Guardado de cambios
• 🔴 Eliminar - Borrado de archivos
• 📂 Abrir - Apertura de archivos

Uso en el Código

// En cualquier componente
import { invoke } from '@tauri-apps/api/core';

// Registrar una operación
await invoke('save_activity_log', {
  entry: {
    type: 'edit',
    action: 'Modificado comando de ayuda',
    file: 'src/commands/help.ts',
    lines: 45,
    details: 'Actualizada descripción del comando'
  }
});

// Obtener historial
const logs = await invoke('get_activity_logs');
console.log(logs);

---

🐛 Sistema de Diagnóstico de Errores

Descripción

Panel de detección de errores integrado que identifica problemas en tiempo real mientras editas, similar al panel de problemas de VS Code.

Características

• ✅ Detección en Tiempo Real: Analiza el código mientras escribes
• ✅ Tres Niveles de Severidad: Error, Advertencia, Información
• ✅ Sugerencias Inteligentes: Propone soluciones automáticas
• ✅ Quick Fixes: Correcciones con un clic
• ✅ Estadísticas: Conteo de errores por tipo
• ✅ Navegación: Click para ir directamente al error

Tipos de Errores Detectados

// ❌ Errores (Severity: error)
// - Sintaxis inválida
// - Variables no definidas
// - Imports faltantes

// ⚠️ Advertencias (Severity: warning)
// - Uso de 'var' en lugar de 'let/const'
// - Uso de '==' en lugar de '==='
// - console.log() en producción
// - Variables no usadas

// ℹ️ Información (Severity: info)
// - Falta punto y coma
// - Comentarios TODO/FIXME
// - Código no alcanzable

Reglas Implementadas

1. no-console - Detecta console.log() y sugiere usar un logger
2. no-var - Detecta var y sugiere const o let
3. eqeqeq - Detecta == y sugiere ===
4. semi - Detecta falta de punto y coma
5. no-warning-comments - Detecta TODO/FIXME

Uso del Panel

<template>
  <ErrorPanel 
    ref="errorPanelRef"
    @navigateToError="handleErrorNavigation"
  />
</template>

<script setup>
import ErrorPanel from '@/components/ErrorPanel.vue';

// Navegar al error
const handleErrorNavigation = (error) => {
  openFile(error.file);
  goToLine(error.line);
};

// Añadir error manualmente
errorPanelRef.value?.addError({
  severity: 'error',
  message: 'Variable "x" no está definida',
  file: 'src/commands/test.ts',
  line: 45,
  column: 10,
  code: 'no-undef',
  suggestion: 'Declara la variable antes de usarla',
  fixable: false
});
</script>

Integración con Monaco Editor

// En MonacoEditor.vue
import { invoke } from '@tauri-apps/api/core';

// Analizar archivo al cambiar
editor.onDidChangeModelContent(() => {
  const content = editor.getValue();
  const filePath = currentFile.value;
  
  invoke('analyze_file_diagnostics', { 
    filePath, 
    content 
  });
});

// Obtener errores
const errors = await invoke('get_diagnostics');

---

💾 Sistema de Respaldo Automático

Descripción

Sistema de snapshots automáticos que guarda versiones del proyecto, permitiendo recuperar código anterior y comparar cambios.

Características

• ✅ Auto-respaldo Configurable: 1, 5, 10 o 30 minutos
• ✅ Respaldos Manuales: Crear snapshot con nombre y descripción
• ✅ Comparación Visual: Ver diferencias entre versiones
• ✅ Restauración: Volver a cualquier punto anterior
• ✅ Gestión Inteligente: Limita cantidad de respaldos automáticos
• ✅ Metadatos: Muestra fecha, archivos, tamaño

Configuración

<template>
  <BackupManager />
</template>

<!-- Configuración del componente -->
<script>
// Intervalo de respaldo: 1, 5, 10, 30 minutos
const backupInterval = ref('5');

// Máximo de respaldos a mantener
const maxBackups = ref(20);

// Auto-respaldo activado
const autoBackupEnabled = ref(true);
</script>

Tipos de Respaldo

1. Manual 💾 - Creado por el usuario con nombre personalizado
2. Automático 🔄 - Creado según el intervalo configurado

API de Respaldos

// Crear respaldo manual
const backup = await invoke('create_backup', {
  name: 'Versión estable v1.0',
  description: 'Antes de refactorizar comandos',
  type: 'manual'
});

// Obtener lista de respaldos
const backups = await invoke('get_backups');

// Restaurar respaldo
await invoke('restore_backup', { 
  backupId: 'backup_1699234567890' 
});

// Comparar con versión actual
const { current, backup } = await invoke('compare_backup', { 
  backupId: 'backup_1699234567890' 
});

// Eliminar respaldo
await invoke('delete_backup', { 
  backupId: 'backup_1699234567890' 
});

Estructura de Backup

interface Backup {
  id: string;
  name?: string;
  description?: string;
  timestamp: number;
  type: 'manual' | 'auto';
  fileCount: number;
  size: number; // en bytes
  files: Array<{
    path: string;
    content: string;
    hash: string; // SHA-256
  }>;
}

Almacenamiento

Los respaldos se guardan en:

C:\Users\[TU_USUARIO]\AppData\Local\AEditor\backups\
  ├── backup_1699234567890.json
  ├── backup_1699234568123.json
  └── backup_1699234569456.json

Estrategia de Limpieza

• Respaldos manuales: Se mantienen siempre hasta eliminación manual
• Respaldos automáticos: Máximo 50% del límite configurado
  • Si maxBackups = 20, mantiene máximo 10 auto-respaldos
  • Elimina los más antiguos primero

---

📁 Estructura de Archivos

AEditor/
├── src/
│   ├── components/
│   │   ├── ActivityLog.vue      # Nuevo ✨
│   │   ├── ErrorPanel.vue       # Nuevo ✨
│   │   ├── BackupManager.vue    # Nuevo ✨
│   │   ├── MonacoEditor.vue
│   │   ├── Sidebar.vue
│   │   └── ...
│   ├── App.vue
│   └── main.ts
├── src-tauri/
│   ├── src/
│   │   ├── lib.rs
│   │   ├── activity_log.rs      # Nuevo ✨
│   │   ├── diagnostics.rs       # Nuevo ✨
│   │   ├── backup.rs            # Nuevo ✨
│   │   └── main.rs
│   └── Cargo.toml
└── package.json

---

🔧 Instalación y Configuración

1. Instalar Dependencias de Rust

Las dependencias ya están en Cargo.toml:

[dependencies]
sha2 = "0.10"
serde = { version = "1", features = ["derive"] }
serde_json = "1"

2. Inicializar Managers

En App.vue o al inicio de la aplicación:

import { invoke } from '@tauri-apps/api/core';
import { appDataDir } from '@tauri-apps/api/path';

// Al montar la aplicación
onMounted(async () => {
  const dataDir = await appDataDir();
  
  // Inicializar todos los managers
  await invoke('init_managers', { appDataDir: dataDir });
  
  console.log('✅ Managers inicializados');
});

3. Usar Componentes

<template>
  <div class="app">
    <!-- Sidebar con nuevas opciones -->
    <Sidebar @view-changed="handleViewChange" />
    
    <!-- Contenido principal -->
    <div class="main-content">
      <!-- Editor de código -->
      <MonacoEditor v-if="currentView === 'editor'" />
      
      <!-- Nuevo: Registro de Actividad -->
      <ActivityLog v-if="currentView === 'activity'" />
      
      <!-- Nuevo: Panel de Errores -->
      <ErrorPanel 
        v-if="currentView === 'errors'"
        @navigateToError="goToError"
      />
      
      <!-- Nuevo: Gestor de Respaldos -->
      <BackupManager v-if="currentView === 'backups'" />
    </div>
  </div>
</template>

---

🎨 Personalización de Estilos

Todos los componentes usan el tema oscuro de VS Code:

/* Variables de color */
:root {
  --bg-primary: #1e1e1e;
  --bg-secondary: #252525;
  --bg-tertiary: #2d2d2d;
  --border-color: #333;
  --text-primary: #d4d4d4;
  --text-secondary: #858585;
  --accent-blue: #007acc;
  --error-red: #d32f2f;
  --warning-orange: #ff9800;
  --success-green: #4caf50;
  --info-blue: #2196f3;
}

---

📊 Ejemplos de Uso Completos

Ejemplo 1: Rastrear Edición de Archivo

// En MonacoEditor.vue
const saveFile = async () => {
  const content = editor.getValue();
  const filePath = currentFile.value;
  
  // Guardar archivo
  await invoke('write_file_content', { filePath, content });
  
  // Registrar en Activity Log
  await invoke('save_activity_log', {
    entry: {
      type: 'save',
      action: 'Archivo guardado',
      file: filePath,
      lines: content.split('\n').length,
      details: `Guardado exitoso de ${filePath}`
    }
  });
  
  // Crear respaldo si es importante
  if (isImportantFile(filePath)) {
    await invoke('create_backup', {
      name: `Respaldo: ${fileName}`,
      description: 'Guardado automático de archivo importante',
      type: 'auto'
    });
  }
};

Ejemplo 2: Detectar y Corregir Errores

// En MonacoEditor.vue
const analyzeCode = async () => {
  const content = editor.getValue();
  const filePath = currentFile.value;
  
  // Analizar con backend
  await invoke('analyze_file_diagnostics', { filePath, content });
  
  // Obtener errores
  const errors = await invoke('get_diagnostics');
  
  // Mostrar en Monaco Editor
  const markers = errors.map(error => ({
    severity: error.severity === 'error' ? 8 : 
              error.severity === 'warning' ? 4 : 1,
    startLineNumber: error.line,
    startColumn: error.column,
    endLineNumber: error.line,
    endColumn: error.column + 10,
    message: error.message
  }));
  
  monaco.editor.setModelMarkers(model, 'aeditor', markers);
};

Ejemplo 3: Sistema de Recuperación

// En BackupManager.vue
const recoverFromCrash = async () => {
  // Obtener último respaldo
  const backups = await invoke('get_backups');
  const latest = backups.sort((a, b) => b.timestamp - a.timestamp)[0];
  
  if (latest) {
    const confirmed = confirm(
      `Se detectó un respaldo reciente de hace ${timeAgo(latest.timestamp)}.\n` +
      `¿Deseas restaurarlo?`
    );
    
    if (confirmed) {
      await invoke('restore_backup', { backupId: latest.id });
      alert('✅ Proyecto restaurado exitosamente');
      location.reload();
    }
  }
};

---

🚀 Próximas Mejoras

Registro de Actividad

• Filtrar por rango de fechas
• Buscar en el historial
• Ver diff de cambios específicos
• Agrupar por sesión de trabajo

Panel de Errores

• Integración con ESLint
• Integración con TypeScript compiler
• Reglas personalizables
• Quick fixes más sofisticados
• Soporte para Prettier

Respaldos

• Compresión de respaldos (gzip)
• Respaldo incremental (solo cambios)
• Sincronización con la nube
• Respaldo selectivo (solo ciertos archivos)
• Notificaciones de respaldo completado

---

📝 Notas Importantes

1. Rendimiento: Los respaldos pueden ser pesados si el proyecto es grande. Considera excluir node_modules, dist, build.

2. Privacidad: Los respaldos se almacenan localmente. No se envía nada a servidores externos.

3. Compatibilidad: Requiere Tauri 2.0+ y Rust 1.70+.

4. Límites: Por defecto, el sistema mantiene máximo 20 respaldos. Ajusta según tu espacio disponible.

---

🐛 Solución de Problemas

Error: "Backup manager no inicializado"

Solución: Llama a invoke('init_managers') al inicio de la app.

Error: "Permission denied"

Solución: Ejecuta AEditor como administrador en Windows.

Los respaldos no se crean automáticamente

Solución: Verifica que autoBackupEnabled esté en true y el intervalo configurado.

Panel de errores no muestra nada

Solución: Asegúrate de llamar a analyze_file_diagnostics después de cada cambio.

---

📞 Soporte

Si encuentras problemas o tienes sugerencias:

• 📧 Email: soporte@amayo.dev
• 🐛 Issues: GitHub Issues
• 💬 Discord: Servidor de Amayo

---

¡Disfruta de las nuevas funcionalidades de AEditor! 🎉