Volevo un cruscotto che mostrasse cosa stanno facendo i miei agenti AI. Non un monitoraggio a livello di Grafana con metriche e avvisi — quello ce l’ho già. Volevo qualcosa che potessi guardare rapidamente sul mio telefono e sapere: quali agenti sono attivi, su cosa stanno lavorando, quanto hanno speso oggi e se c’è qualcosa che richiede la mia attenzione.
Così ne ho costruito uno in React. Un’app a pagina singola che si connette ai dati di OpenClaw e li visualizza come un cruscotto pulito e adatto ai dispositivi mobili. Ci è voluto un fine settimana per costruirlo e è diventato la prima cosa che controllo ogni mattina.
Cosa Mostra il Cruscotto
Pannello 1: Stato degli Agenti
Un elenco di tutti gli agenti configurati con il loro stato attuale: attivo (verde), inattivo (giallo), errore (rosso). Ogni agente mostra il timestamp della sua ultima attività e una breve descrizione di cosa ha fatto di recente. Posso vedere a colpo d’occhio che l’agente del briefing mattutino è stato eseguito alle 8:00, l’agente di monitoraggio ha controllato i server alle 8:15 e l’agente email è inattivo in attesa di nuovi messaggi.
Pannello 2: Attività di Oggi
Una vista temporale di tutte le azioni degli agenti di oggi. Codificato a colori per tipo: blu per le chiamate ai modelli AI, verde per le esecuzioni degli strumenti, arancione per le interazioni degli utenti, rosso per gli errori. Scorrevole. Mostra prima l’attività più recente.
È qui che scopro i problemi. Un cluster di voci rosse significa che qualcosa sta fallendo ripetutamente. Un vuoto nella linea temporale significa che un lavoro previsto non è stato eseguito. Una barra blu insolitamente lunga significa che una chiamata API ha impiegato molto più tempo del normale.
Pannello 3: Controllo dei Costi
Il totale accumulato di oggi, confrontato con la media giornaliera. Suddiviso per modello e per agente. Un mini grafico a barre che mostra gli ultimi 7 giorni per un confronto delle tendenze.
Pannello 4: Attenzione Richiesta
Elementi che necessitano del mio intervento: bozze di email in attesa di approvazione, elementi di moderazione segnalati, compiti falliti che necessitano di revisione, avvisi di budget. Ogni elemento ha un pulsante di azione: approva, ignora o visualizza dettagli.
Questo pannello è l’intera ragione per cui esiste il cruscotto. Tutto il resto è informativo. Questo pannello è azionabile.
Il Stack Tecnologico
Frontend: React con Vite. Nessuna libreria di componenti — solo CSS puro con flexbox/grid. L’intero pacchetto è sotto i 200KB. Si carica istantaneamente, anche su mobile tramite cellulare.
Fonte di dati: File di log di OpenClaw, analizzati e serviti da una piccola API Express. L’API legge i log, estrae i punti dati rilevanti e li serve in formato JSON. Circa 200 righe di codice.
Hosting: In esecuzione sulla stessa macchina di OpenClaw. La build di React produce file statici serviti dall’API Express. Non è necessario alcun server web separato.
Autenticazione: Autenticazione di base con un unico nome utente/password. Questa non è un’applicazione multi-utente — è il mio cruscotto personale. Un’autenticazione semplice è sufficiente.
Costruire il Livello Dati
La parte più difficile non è stata il frontend di React — è stato ottenere dati puliti da OpenClaw.
I log di OpenClaw sono basati su testo e semi-strutturati. Ho scritto un parser che estrae:
– Timestamp per tutti gli eventi
– Conteggi dei token dalle chiamate API
– Nomi degli strumenti e tempi di esecuzione
– Messaggi di errore e tracce dello stack
– ID sessioni per raggruppare eventi correlati
Il parser si esegue ogni 30 secondi, elabora le nuove voci di log e memorizza i dati estratti in un database SQLite. L’API interroga SQLite, che è abbastanza veloce per un cruscotto a utente singolo.
Codice totale della pipeline di dati: circa 300 righe di JavaScript. Non elegante, ma funziona in modo affidabile.
L’Esperienza Mobile
Ho progettato specificamente questo per una visualizzazione mobile-first. Il layout è una singola colonna che impila i quattro pannelli verticalmente. Ogni pannello è collassabile — di solito tengo espansi il Pannello 1 e il Pannello 4, e collasso i Pannelli 2 e 3 a meno che non ne abbia bisogno.
Le decisioni di design chiave:
– Grandi target touch (niente bottoni piccoli)
– Colori ad alto contrasto (leggibili in piena luce solare)
– Dati minimi per pannello (mostra il riepilogo, non il dettaglio)
– Pull-to-refresh (interazione mobile naturale)
Caratteristiche Aggiunte Successivamente
Azioni rapide. Dal cruscotto, posso: riavviare OpenClaw, mettere in pausa/riprendere agenti specifici, approvare elementi in attesa e attivare esecuzioni manuali di compiti programmati. Questi pulsanti mi hanno salvato dall’accesso SSH al server per operazioni di routine.
Visualizzazione storica. Un selettore di date che mostra l’attività di qualsiasi giorno precedente. Utile per indagare su scenari tipo “cosa è successo ieri mentre dormivo?”.
Proiezioni dei costi. Basato sugli ultimi 7 giorni di utilizzo, il cruscotto proietta i costi mensili. Questa proiezione si aggiorna quotidianamente ed è stata precisa entro il 10% rispetto ai costi reali.
Cosa Farei Diversamente
Utilizzare WebSockets invece del polling. Il cruscotto interroga l’API ogni 30 secondi per aggiornamenti. I WebSockets fornirebbero aggiornamenti in tempo reale senza l’overhead del polling. Non mi sono preso la briga di cambiarlo perché gli aggiornamenti ogni 30 secondi sono sufficienti per le mie esigenze, ma è il miglioramento ovvio.
Aggiungere integrazione delle notifiche. Attualmente, gli avvisi passano attraverso Grafana/Slack. Avere il cruscotto che invia notifiche push direttamente consoliderebbe i miei canali di allerta.
Partire più semplici. Ho costruito troppo la prima versione con funzionalità di cui non avevo bisogno (ripartizione dei costi per agente per ora, grafici di tendenze storiche, ricerca nei log). Le funzionalità che uso effettivamente quotidianamente sono: panoramica dello stato, elementi che richiedono attenzione e azioni rapide. Avrei potuto costruire una versione utile v1 in poche ore invece di un fine settimana.
🕒 Published: