Eu queria um painel que mostrasse o que meus agentes de IA estão fazendo. Não uma monitoração no nível do Grafana com métricas e alertas — eu já tenho isso. Eu queria algo que eu pudesse olhar no meu telefone e saber: quais agentes estão ativos, no que estão trabalhando, quanto eles gastaram hoje e se algo precisa da minha atenção.
Então, eu construí um em React. Um aplicativo de página única que se conecta aos dados do OpenClaw e os exibe como um painel limpo e amigável para dispositivos móveis. Levou um fim de semana para construir e se tornou a primeira coisa que verifico todas as manhãs.
O que o Painel Mostra
Painel 1: Status do Agente
Uma lista de todos os agentes configurados com seu estado atual: ativo (verde), ocioso (amarelo), erro (vermelho). Cada agente mostra seu último timestamp de atividade e uma descrição em uma linha do que fez mais recentemente. Posso ver de relance que o agente de briefing matinal rodou às 8:00, o agente de monitoramento verificou os servidores às 8:15, e o agente de e-mail está ocioso esperando novas mensagens.
Painel 2: Atividade de Hoje
Uma visão de linha do tempo de todas as ações dos agentes hoje. Codificado por cores: azul para chamadas de modelos de IA, verde para execuções de ferramentas, laranja para interações dos usuários, vermelho para erros. Rolável. Mostra a atividade mais recente primeiro.
É aqui que eu identifico problemas. Um aglomerado de entradas vermelhas significa que algo está falhando repetidamente. Um intervalo na linha do tempo significa que um trabalho esperado não foi executado. Uma barra azul anormalmente longa significa que uma chamada de API levou muito mais tempo do que o normal.
Painel 3: Rastreador de Custos
Total acumulado de hoje, comparado à média diária. Dividido por modelo e por agente. Um mini gráfico de barras mostrando os últimos 7 dias para comparação de tendências.
Painel 4: Atenção Necessária
Itens que precisam da minha entrada: rascunhos de e-mail aguardando aprovação, itens de moderação sinalizados, tarefas falhadas que precisam de revisão, alertas de orçamento. Cada item tem um botão de ação: aprovar, descartar ou ver detalhes.
Este painel é toda a razão pela qual o painel existe. Todo o resto é informativo. Este painel é acionável.
A Pilha Tecnológica
Frontend: React com Vite. Sem biblioteca de componentes — apenas CSS puro com flexbox/grid. O pacote inteiro tem menos de 200KB. Carrega instantaneamente, mesmo em dispositivos móveis via celular.
Fonte de dados: Arquivos de log do OpenClaw, analisados e servidos por uma pequena API Express. A API lê os logs, extrai os pontos de dados relevantes e os serve como JSON. Cerca de 200 linhas de código.
Hospedagem: Executando na mesma máquina que o OpenClaw. O build do React produz arquivos estáticos servidos pela API Express. Nenhum servidor web separado é necessário.
Auth: Autenticação básica com um único nome de usuário/senha. Esta não é uma aplicação multiusuário — é meu painel pessoal. Autenticação simples é suficiente.
Construindo a Camada de Dados
A parte mais difícil não foi o frontend em React — foi obter dados limpos do OpenClaw.
Os logs do OpenClaw são baseados em texto e semi-estruturados. Eu escrevi um analisador que extrai:
– Timestamps para todos os eventos
– Contagens de tokens de chamadas de API
– Nomes de ferramentas e tempos de execução
– Mensagens de erro e rastreamentos de pilha
– IDs de sessão para agrupar eventos relacionados
O analisador é executado a cada 30 segundos, processa novas entradas de 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 único usuário.
Código total do pipeline de dados: cerca de 300 linhas de JavaScript. Não é elegante, mas funciona de forma confiável.
A Experiência Móvel
Eu projetei isso especificamente para visualização primeiro em dispositivos móveis. O layout é uma única coluna que empilha os quatro painéis verticalmente. Cada painel é dobrável — eu geralmente mantenho o Painel 1 e o Painel 4 expandidos e colapso os Painéis 2 e 3, a menos que eu precise deles.
As principais decisões de design:
– Alvos de toque grandes (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)
– Puxar para atualizar (interação natural em dispositivos móveis)
Recursos que Adicionei Depois
Ações rápidas. A partir do painel, posso: reiniciar o OpenClaw, pausar/retomar agentes específicos, aprovar itens pendentes e acionar execuções manuais de tarefas programadas. Esses botões me salvaram de ter que entrar no servidor via SSH para operações rotineiras.
Visão histórica. Um seletor de data que mostra a atividade de qualquer dia anterior. Útil para investigar cenários do tipo “o que aconteceu ontem enquanto eu dormia?”.
Projeções de custo. Com base nos últimos 7 dias de uso, o painel projeta custos mensais. Esta projeção é atualizada diariamente e tem sido precisa em até 10% dos custos reais.
O que Eu Faria Diferente
Use WebSockets em vez de polling. O painel faz polling na API a cada 30 segundos em busca de atualizações. WebSockets forneceriam atualizações em tempo real sem a sobrecarga do polling. Eu não me preocupei em mudar isso porque atualizações a cada 30 segundos são boas o suficiente para as minhas necessidades, mas essa é a melhoria óbvia.
Adicione integração de notificações. Atualmente, os alertas passam pelo Grafana/Slack. Fazer com que o painel envie notificações push diretamente consolidaria meus canais de alerta.
Comece de forma mais simples. Eu superdesenvolvi a primeira versão com recursos que não precisava (quebra de custo por agente por hora, gráficos de tendência histórica, busca em logs). Os recursos que realmente uso diariamente são: visão geral de status, itens que requerem atenção e ações rápidas. Eu poderia ter construído um v1 útil em algumas horas em vez de um fim de semana.
🕒 Published: