Eu queria um painel que mostrasse o que meus agentes de IA estão fazendo. Não uma monitorização ao nível do Grafana com métricas e alertas — eu já tenho isso. Eu queria algo que pudesse consultar rapidamente no meu telefone e saber: quais agentes estão ativos, em que estão trabalhando, quanto eles gastaram hoje e se algo requer minha atenção.
Então, construí um em React. Uma aplicação de página única que se conecta aos dados do OpenClaw e os exibe em um painel claro e otimizado para dispositivos móveis. Demorou um final de semana para codificar e se tornou a primeira coisa que consulto toda manhã.
O que o painel exibe
Painel 1: Estado dos agentes
Uma lista de todos os agentes configurados com seu estado atual: ativo (verde), inativo (amarelo), erro (vermelho). Cada agente exibe a marcação temporal de sua última atividade e uma descrição em uma linha do que fez recentemente. Vejo de relance que o agente de briefing matinal funcionou às 8h, que o agente de monitoramento verificou os servidores às 8h15, e que o agente de e-mail está inativo aguardando novas mensagens.
Painel 2: Atividade do dia
Uma visão cronológica de todas as ações dos agentes hoje. Codificada por cor de acordo com o tipo: azul para chamadas aos modelos de IA, verde para execuções de ferramentas, laranja para interações de usuários, vermelho para erros. Rolável. Exibe as atividades mais recentes primeiro.
É onde identifico os problemas. Um agrupamento de entradas vermelhas significa que um erro está se repetindo. A ausência na linha do tempo indica que um trabalho esperado não ocorreu. Uma barra azul anormalmente longa significa que uma chamada API levou muito mais tempo do que o habitual.
Painel 3: Acompanhamento de custos
O total acumulado do dia, comparado à média diária. Detalhado por modelo e por agente. Um mini gráfico de barras mostra os últimos 7 dias para comparar as tendências.
Painel 4: Ações necessárias
Itens que exigem minha intervenção: rascunhos de e-mails aguardando aprovação, conteúdos sinalizados em moderação, tarefas falhadas a revisar, alertas orçamentários. Cada item tem um botão de ação: aprovar, rejeitar ou ver os detalhes.
Este painel é a razão de ser do painel. Todo o resto é informativo, este é interativo.
A stack técnica
Frontend: React com Vite. Sem biblioteca de componentes — apenas CSS puro com flexbox/grid. O bundle completo tem menos de 200KB. Carregamento instantâneo, mesmo em 4G no celular.
Fonte dos dados: arquivos de log do OpenClaw, analisados e disponibilizados por uma API Express leve. A API lê os logs, extrai os dados relevantes e os fornece em JSON. Cerca de 200 linhas de código.
Hospedagem: Na mesma máquina que o OpenClaw. A compilação do React produz arquivos estáticos servidos pela API Express. Não há necessidade de um servidor web separado.
Autenticação: Autenticação básica com um único nome de usuário/senha. Não é uma aplicação multiusuário — é meu painel pessoal. Uma autenticação simples é suficiente.
Construindo a camada de dados
O mais difícil não foi o frontend em React, mas extrair dados limpos do OpenClaw.
Os logs do OpenClaw são texto semi-estruturado. Eu escrevi um parser que extrai:
– As marcações temporais de todos os eventos
– O número de tokens das chamadas API
– Os nomes das ferramentas e seu tempo de execução
– As mensagens de erro e rastreamentos de pilha
– Os identificadores de sessão para agrupar eventos relacionados
O parser é executado a cada 30 segundos, processa as novas entradas do log e armazena os dados extraídos em um banco de dados SQLite. A API consulta o SQLite, que é rápido o suficiente para um painel de usuário único.
Código total do pipeline de dados: cerca de 300 linhas de JavaScript. Não muito elegante, mas confiável.
A experiência móvel
Projetei especificamente para uma consulta mobile-first. O layout é uma coluna única que empilha os quatro painéis verticalmente. Cada painel pode ser recolhido — geralmente deixo o painel 1 e o painel 4 abertos, e recolho os painéis 2 e 3, a menos que precise deles.
As escolhas-chave de design:
– Grandes áreas clicáveis (sem botões pequenos)
– Cores de alto contraste (legíveis sob luz solar direta)
– Dados mínimos por painel (mostrar o resumo, não o detalhe)
– Pull-to-refresh (interação móvel natural)
Funcionalidades adicionadas posteriormente
Ações rápidas. Desde o painel de controle, posso: reiniciar o OpenClaw, pausar/retomar agentes específicos, aprovar itens pendentes, lançar manualmente tarefas agendadas. Esses botões me evitam de me conectar via SSH para operações corriqueiras.
Visão histórica. Um seletor de data que exibe a atividade de qualquer dia anterior. Prático para saber “o que aconteceu ontem enquanto eu dormia?”
Projeções de custos. Baseadas nos últimos 7 dias de uso, o painel prevê os custos mensais. Essa estimativa se atualiza diariamente e tem se mostrado precisa em até 10%.
O que eu faria diferente
Usar WebSockets em vez de polling. O painel consulta a API a cada 30 segundos para atualizações. WebSockets permitiria atualizações em tempo real sem esse custo adicional. Eu não fiz isso porque 30 segundos são suficientes para minhas necessidades, mas é a melhoria óbvia.
Adicionar uma integração de notificações. Por enquanto, os alertas passam pelo Grafana/Slack. Fazer com que o painel envie notificações push diretamente centralizaria meus canais de alerta.
Começar mais simples. Construí demais a primeira versão com recursos dos quais eu não precisava (custo por agente e por hora, gráficos históricos, busca nos logs). As funções que realmente uso no dia a dia são: visão do status, itens que requerem ação, ações rápidas. Eu poderia ter feito uma v1 útil em poucas horas ao invés de um fim de semana.
🕒 Published: