sistema A2S

ai/tasks/done/TASK-023-server-stats-preview-panel.md

@@ -0,0 +1,68 @@
+# TASK-023-server-stats-preview-panel
+
+## Goal
+Anadir a la web una primera visualizacion de estadisticas de servidores basada en datos persistidos, mostrando una vista previa util y controlada del historico sin convertir todavia la landing en una aplicacion compleja.
+
+## Context
+La landing ya dispone de un panel provisional de servidores y el backend va a disponer de persistencia local y consultas historicas minimas. Esta task debe conectar ambos mundos con una primera visualizacion ligera que confirme que el pipeline completo funciona.
+
+## Steps
+1. Revisar el frontend actual, el panel de servidores existente y el plan de consumo de datos.
+2. Revisar los nuevos endpoints historicos del backend.
+3. Disenar una mejora progresiva en frontend que pueda mostrar una vista previa de estadisticas sin romper la landing actual.
+4. Mostrar como minimo algunos indicadores utiles, por ejemplo:
+   - ultimo snapshot por servidor
+   - hora de ultima actualizacion
+   - evolucion basica de poblacion o actividad reciente
+5. Mantener fallback seguro si el backend o los endpoints historicos no estan disponibles.
+6. Integrar visualmente el bloque con el diseno actual sin redisenar toda la pagina.
+7. No anadir todavia dashboards complejos, graficas pesadas ni navegacion nueva.
+
+## Files to Read First
+- AGENTS.md
+- ai/repo-context.md
+- docs/frontend-data-consumption-plan.md
+- docs/frontend-backend-contract.md
+- frontend/index.html
+- frontend/assets/js/main.js
+- frontend/assets/css/styles.css
+- backend/app/routes.py
+- backend/app/payloads.py
+- documentacion de endpoints historicos creada en la task anterior
+
+## Expected Files to Modify
+- frontend/index.html
+- frontend/assets/js/main.js
+- frontend/assets/css/styles.css
+- opcionalmente documentacion minima si fuera necesario reflejar el nuevo bloque o comportamiento
+
+## Constraints
+- No redisenar completamente la landing.
+- No anadir librerias nuevas.
+- No romper el fallback actual.
+- No introducir analitica visual compleja.
+- No hacer cambios destructivos.
+- Mantener la mejora contenida, clara y alineada con la fase actual.
+
+## Validation
+- La web puede mostrar una primera vista previa de estadisticas de servidores usando datos persistidos.
+- El frontend sigue funcionando si el backend no esta disponible.
+- La mejora visual se integra con la landing actual.
+- El resultado demuestra que el flujo captura -> persistencia -> consulta -> visualizacion ya funciona.
+
+## Change Budget
+- Preferir menos de 4 archivos modificados.
+- Preferir menos de 220 lineas cambiadas.
+
+## Outcome
+- El panel de servidores ahora puede mostrar una vista previa historica con resumen, ultima actualizacion y tendencia reciente por servidor.
+- `frontend/assets/js/main.js` mantiene el bloque estatico como fallback y solo sustituye el contenido cuando los endpoints historicos responden correctamente.
+- `frontend/index.html` anade un contenedor ligero para el resumen historico.
+- `frontend/assets/css/styles.css` integra la nueva vista previa con el lenguaje visual tactico existente.
+
+## Validation Result
+- Ejecutado: `node --check frontend/assets/js/main.js`
+- Resultado: sintaxis valida en el script principal del frontend.
+
+## Decision Notes
+- Se mantuvo la mejora dentro del panel de servidores ya existente para evitar una nueva seccion o un dashboard separado en esta fase.