Quería un panel que mostrara lo que están haciendo mis agentes de IA. No un monitoreo al nivel de Grafana con métricas y alertas; eso ya lo tengo. Quería algo que pudiera mirar rápidamente en mi teléfono y saber: qué agentes están activos, en qué están trabajando, cuánto han gastado hoy y si algo requiere mi atención.
Así que construí uno en React. Una aplicación de una sola página que se conecta a los datos de OpenClaw y los muestra como un panel limpio y amigable para móviles. Me tomó un fin de semana construirlo y se ha convertido en lo primero que reviso cada mañana.
Lo que Muestra el Panel
Panel 1: Estado del Agente
Una lista de todos los agentes configurados con su estado actual: activo (verde), inactivo (amarillo), error (rojo). Cada agente muestra la marca de tiempo de su última actividad y una descripción de una línea de lo que hizo más recientemente. Puedo ver de un vistazo que el agente de briefing matutino se ejecutó a las 8:00 AM, el agente de monitoreo revisó los servidores a las 8:15 AM y el agente de correo está inactivo esperando nuevos mensajes.
Panel 2: Actividad de Hoy
Una vista de línea de tiempo de todas las acciones de los agentes hoy. Codificado por colores: azul para llamadas de modelos de IA, verde para ejecuciones de herramientas, naranja para interacciones de usuarios, rojo para errores. Desplazable. Muestra la actividad más reciente primero.
Aquí es donde detecto problemas. Un grupo de entradas rojas significa que algo está fallando repetidamente. Un hueco en la línea de tiempo significa que un trabajo esperado no se ejecutó. Una barra azul inusualmente larga significa que una llamada a la API tomó mucho más tiempo de lo normal.
Panel 3: Rastreador de Costos
El total acumulado de hoy, comparado con el promedio diario. Desglosado por modelo y por agente. Un mini gráfico de barras que muestra los últimos 7 días para comparación de tendencias.
Panel 4: Atención Requerida
Elementos que necesitan mi entrada: borradores de correos esperando aprobación, elementos de moderación señalados, tareas fallidas que requieren revisión, alertas de presupuesto. Cada elemento tiene un botón de acción: aprobar, descartar o ver detalles.
Este panel es la razón principal por la que existe el panel. Todo lo demás es informativo. Este panel es accionable.
La Pilas Tecnológica
Frontend: React con Vite. Sin biblioteca de componentes, solo CSS puro con flexbox/grid. Todo el paquete pesa menos de 200KB. Se carga al instante, incluso en móvil a través de celular.
Fuente de datos: Archivos de registro de OpenClaw, analizados y servidos por una pequeña API de Express. La API lee los registros, extrae los puntos de datos relevantes y los sirve como JSON. Alrededor de 200 líneas de código.
Alojamiento: Ejecutándose en la misma máquina que OpenClaw. La compilación de React produce archivos estáticos servidos por la API de Express. No se necesita un servidor web separado.
Autenticación: Autenticación básica con un solo nombre de usuario/contraseña. Esta no es una aplicación mult usuario, es mi panel personal. La autenticación simple es suficiente.
Construyendo la Capa de Datos
La parte más difícil no fue el frontend de React, sino obtener datos limpios de OpenClaw.
Los registros de OpenClaw son basados en texto y semi-estructurados. Escribí un analizador que extrae:
– Marcas de tiempo para todos los eventos
– Conteos de tokens de las llamadas a la API
– Nombres de herramientas y tiempos de ejecución
– Mensajes de error y trazas de pila
– IDs de sesión para agrupar eventos relacionados
El analizador se ejecuta cada 30 segundos, procesa nuevas entradas de registro y almacena los datos extraídos en una base de datos SQLite. La API consulta SQLite, que es lo suficientemente rápida para un panel de un solo usuario.
Código total de la canalización de datos: alrededor de 300 líneas de JavaScript. No es elegante, pero funciona de manera confiable.
La Experiencia Móvil
Diseñé esto específicamente para una visualización móvil-primer. El diseño es de una sola columna que apila los cuatro paneles verticalmente. Cada panel es colapsable; normalmente mantengo el Panel 1 y el Panel 4 expandido, y colapso los Paneles 2 y 3 a menos que los necesite.
Las decisiones de diseño clave:
– Grandes áreas táctiles (sin botones pequeños)
– Colores de alto contraste (legibles a plena luz del sol)
– Datos mínimos por panel (mostrar el resumen, no el detalle)
– Deslizar para actualizar (interacción natural en móviles)
Características que Añadí Después
Acciones rápidas. Desde el panel, puedo: reiniciar OpenClaw, pausar/reanudar agentes específicos, aprobar elementos pendientes y activar ejecuciones manuales de tareas programadas. Estos botones me han ahorrado el tener que acceder por SSH al servidor para operaciones de rutina.
Vista histórica. Un selector de fecha que muestra la actividad de cualquier día anterior. Útil para investigar escenarios de “¿qué pasó ayer mientras dormía?”
Proyecciones de costos. Basado en los últimos 7 días de uso, el panel proyecta costos mensuales. Esta proyección se actualiza diariamente y ha sido precisa dentro de un 10% de los costos reales.
Lo que Haría Diferente
Usar WebSockets en lugar de polling. El panel consulta la API cada 30 segundos en busca de actualizaciones. WebSockets proporcionarían actualizaciones en tiempo real sin la sobrecarga del polling. No me he molestado en cambiarlo porque las actualizaciones de 30 segundos son suficientes para mis necesidades, pero es la mejora obvia.
Añadir integración de notificaciones. Actualmente, las alertas pasan a través de Grafana/Slack. Hacer que el panel envíe notificaciones push directamente consolidaría mis canales de alerta.
Comenzar más simple. Construí en exceso la primera versión con características que no necesitaba (desglose de costos por agente por hora, gráficos de tendencias históricas, búsqueda de registros). Las características que realmente uso a diario son: resumen de estado, elementos que requieren atención y acciones rápidas. Podría haber construido una versión útil en unas pocas horas en lugar de un fin de semana.
🕒 Published: