El Dashboard de mi homelab: un panel que me hace actuar, no que me adorna
Serie Homelab · Parte 13 · ← Langfuse: ver qué piensa el agente · Claude Code con mis propios MCP → · Ver la serie
TL;DR: Un homelab con agentes necesita una cara. El mío es un Dashboard web con servicios, infraestructura, contenedores, chat con ARIA y aprobaciones. La regla de diseño es una: un panel que no me lleva a una acción es decoración. Aquí te muestro cómo se ve y qué decisiones hay detrás.
Por qué una interfaz
Con varios agentes y casi veinte MCP, sin interfaz el sistema era un conjunto de procesos que solo yo sabía que existían. Quería un solo lugar para ver qué corre, hablar con el asistente y aprobar lo que él me pida. Es el centro de control.
Lo armé con React y Vite, servido por nginx. Nginx hace de paso doble: también hace de proxy hacia los MCP y sirve las capturas que genera el asistente, para que el chat las muestre.
Servicios: ¿está todo bien?
La primera pantalla agrupa todo por capas: cómputo y almacenamiento, red y seguridad, monitoreo, plataforma agéntica y mensajería. Cada tarjeta es una luz verde o roja, con el dato clave que importa de ese servicio: consultas bloqueadas de AdGuard, monitores de Uptime Kuma, trazas de Langfuse, el modelo que está cargado.
Sí, hay rojos. En la captura, por ejemplo, Qdrant. Un panel donde todo es verde es un panel que miente o que no mira.
Infraestructura: de qué está hecha mi casa
La pantalla de Infraestructura muestra las alertas activas de Grafana (el resumen de la Parte 2), las sesiones de VSCode conectadas a mis VM, el estado de la red, los nodos con su temperatura y la PC de IA con su GPU, tokens por segundo y consumo.
Estos datos no salen del asistente. Los sirve una API de solo lectura (Agent-01), a propósito: lo que muestra y lo que actúa viven separados. El panel puede equivocarse sin romper nada.
Contenedores: el panel que más me incomoda
Esta pantalla muestra qué corre en cada máquina, desde cuándo, cuánta memoria usa y con qué versión. Un escáner pasa cada noche y marca las vulnerabilidades, y el panel resume cuántos contenedores tienen actualizaciones pendientes y cuántos tienen vulnerabilidades críticas.
Hoy me dice que 23 contenedores tienen vulnerabilidades críticas. Decidí mostrarlo, porque justamente de eso se trata: un panel que me señala exactamente lo que debería atender. Los que tienen candado son los protegidos, y piden mi aprobación en pantalla antes de tocarlos.
Y el chat, y las aprobaciones, y lo demás
El corazón de la interfaz es el chat con ARIA: ahí pregunto, veo las respuestas, el enlace «Trace» y las tarjetas de aprobación de la Parte 7. El resto de las pantallas son más pequeñas y más específicas: recordatorios, transcripciones, memoria, las reglas de permisos, acciones guardadas, la despensa y las noticias.
Y la tablet de pared de casa, que ARIA puede controlar (pantalla, página y audio) con su propio MCP, es mi ventana permanente al homelab.
Lo que aprendí diseñándolo
- Un panel debe llevar a una acción. Si miro una pantalla y no sé qué hacer con ella, la borro. Esta regla viene de la Parte 2: si no lo miro en una semana, sobra.
- Separa lo que muestra de lo que actúa. Una API de solo lectura para los paneles y una compuerta de aprobaciones para las acciones.
- Muestra lo malo primero. «Señales primero» es el orden por defecto de la lista de contenedores. Lo bonito puede esperar.
- El chat es una interfaz, no el producto. La gracia es lo que hay detrás: herramientas, permisos, trazas.
- Muéstralo todo, con juicio. Para escribir estos posts tuve que tapar IPs, dominios y un par de tarjetas. Que un panel sirva para operar no significa que sirva para enseñar tal cual.
Lo que sigue
Falta el cierre de la serie: cómo conecto estos mismos MCP a Claude Code, el asistente que uso mientras programo, y cómo este blog lo publicó una IA con las herramientas que ella misma usa. En la Parte 14.