sistema A2S

ai/tasks/done/TASK-039-real-server-panel-data-density-pass.md

@@ -0,0 +1,67 @@
+# TASK-039-real-server-panel-data-density-pass
+
+## Goal
+Mejorar la densidad informativa y la claridad de las tarjetas de servidores reales, aprovechando mejor los datos ya disponibles sin recargar visualmente la landing.
+
+## Context
+Tras ocultar los placeholders cuando existen snapshots reales y preparar una CTA de conexión en español, el panel real ya tiene buena base. Sin embargo, todavía puede ganar valor mostrando mejor la información disponible y organizando mejor la jerarquía interna de las tarjetas.
+
+## Steps
+1. Revisar la composición actual de las tarjetas de servidores reales.
+2. Revisar qué datos ya están disponibles o pasarán a estar disponibles tras la task de resúmenes históricos.
+3. Mejorar la jerarquía interna de cada tarjeta:
+   - nombre
+   - estado
+   - mapa
+   - jugadores
+   - región
+   - última captura
+   - CTA
+   - métricas resumidas si existen
+4. Hacer que la tarjeta transmita más información útil sin volverse pesada.
+5. Mantener coherencia visual con la landing actual.
+6. Mejorar legibilidad en desktop y móvil.
+7. No rediseñar toda la página ni añadir nuevas secciones grandes.
+
+## Files to Read First
+- AGENTS.md
+- ai/repo-context.md
+- frontend/index.html
+- frontend/assets/js/main.js
+- frontend/assets/css/styles.css
+- backend/app/payloads.py
+- backend/app/routes.py
+
+## Expected Files to Modify
+- frontend/index.html
+- frontend/assets/js/main.js
+- frontend/assets/css/styles.css
+
+## Constraints
+- No tocar backend salvo si es estrictamente necesario por alineación menor con payloads ya existentes.
+- No añadir librerías nuevas.
+- No romper el fallback ni la CTA Conectar.
+- No hacer cambios destructivos.
+- Mantener la mejora centrada en claridad, jerarquía y densidad informativa.
+
+## Validation
+- Las tarjetas reales muestran mejor la información útil.
+- La jerarquía interna mejora.
+- La experiencia visual sigue siendo limpia.
+- El panel se entiende mejor en desktop y móvil.
+
+## Change Budget
+- Preferir menos de 3 archivos modificados.
+- Preferir menos de 180 líneas cambiadas.
+## Outcome
+- `frontend/assets/js/main.js` reorganiza la jerarquía interna de las tarjetas reales para destacar nombre, estado, población actual, mapa, región, última captura, CTA y métricas resumidas.
+- `frontend/assets/css/styles.css` refuerza la densidad informativa con una columna compacta de estado/población y una fila de quick facts legible en desktop y móvil.
+- La CTA `Conectar`, la tendencia reciente y el fallback existente se mantienen operativos.
+
+## Validation Result
+- Ejecutado: `node --check frontend/assets/js/main.js`.
+- Resultado: sintaxis JavaScript válida tras el ajuste de jerarquía y densidad visual.
+- Revisado en código: la versión enriquecida de la tarjeta conserva `steam://connect/<host>:<game_port>` para snapshots reales y mantiene el fallback cuando no hay datos reales utilizables.
+
+## Decision Notes
+- La mejora de densidad se concentró dentro de la tarjeta existente, sin añadir nuevas secciones grandes ni cambiar la arquitectura del panel.