Ich wollte ein Dashboard, das zeigt, was meine KI-Agenten tun. Kein Monitoring auf Grafana-Niveau mit Metriken und Alerts — das habe ich bereits. Ich wollte etwas, das ich auf einen Blick auf meinem Telefon sehen und wissen kann: welche Agenten aktiv sind, woran sie arbeiten, wie viel sie heute ausgegeben haben und ob etwas meine Aufmerksamkeit erfordert.
Also habe ich eines in React gebaut. Eine Single-Page-Anwendung, die sich mit den Daten von OpenClaw verbindet und diese in einem klaren, mobiloptimierten Dashboard anzeigt. Es hat mich ein Wochenende gekostet, den Code zu schreiben, und es ist das Erste, was ich jeden Morgen abrufe.
Was das Dashboard anzeigt
Panel 1: Status der Agenten
Eine Liste aller konfigurierten Agenten mit ihrem aktuellen Status: aktiv (grün), inaktiv (gelb), Fehler (rot). Jeder Agent zeigt den Zeitstempel seiner letzten Aktivität und eine einzeilige Beschreibung dessen, was er kürzlich getan hat. Ich sehe auf einen Blick, dass der Morgen-Briefing-Agent um 8 Uhr aktiv war, dass der Monitoring-Agent die Server um 8:15 Uhr überprüft hat und dass der E-Mail-Agent inaktiv ist und auf neue Nachrichten wartet.
Panel 2: Aktivitäten des Tages
Eine zeitliche Übersicht aller Aktionen der Agenten heute. Farblich codiert nach Typ: Blau für API-Aufrufe, grün für Tool-Ausführungen, orange für Benutzerinteraktionen, rot für Fehler. Scrollbar. Zeigt die aktuellsten Aktivitäten zuerst an.
Hier erkenne ich Probleme. Eine Ansammlung von roten Einträgen bedeutet, dass ein Fehler sich wiederholt. Eine Lücke in der Zeitachse zeigt an, dass eine erwartete Arbeit nicht stattgefunden hat. Eine abnormal lange blaue Leiste bedeutet, dass ein API-Aufruf wesentlich länger gedauert hat als üblich.
Panel 3: Kostenverfolgung
Der kumulierte Gesamtbetrag für heute, verglichen mit dem täglichen Durchschnitt. Detailliert nach Modell und Agent. Ein Mini-Balkendiagramm zeigt die letzten 7 Tage, um die Trends zu vergleichen.
Panel 4: Erforderliche Aktionen
Elemente, die meine Intervention erfordern: Entwürfe von E-Mails, die auf Genehmigung warten, gemeldete Inhalte in der Moderation, fehlgeschlagene Aufgaben zur Überprüfung, Budgetwarnungen. Jedes Element hat einen Aktionsbutton: genehmigen, ablehnen oder Details anzeigen.
Dieses Panel ist der Zweck des Dashboards. Alles andere ist informativ, dieses ist interaktiv.
Der technische Stack
Frontend: React mit Vite. Keine Komponentenbibliothek — nur reines CSS mit Flexbox/Grid. Das komplette Bundle ist weniger als 200KB groß. Sofortiges Laden, selbst im 4G-Netz auf Mobilgeräten.
Datengrundlage: Logdateien von OpenClaw, analysiert und von einer leichten Express-API bereitgestellt. Die API liest die Logs, extrahiert die relevanten Daten und stellt sie im JSON-Format zur Verfügung. Ungefähr 200 Zeilen Code.
Hosting: Auf der gleichen Maschine wie OpenClaw. Die React-Build produziert statische Dateien, die von der Express-API bereitgestellt werden. Kein Bedarf an einem separaten Webserver.
Authentifizierung: Basis-Authentifizierung mit einem einzigen Benutzernamen/Passwort. Es ist keine Mehrbenutzeranwendung — es ist mein persönliches Dashboard. Eine einfache Authentifizierung reicht aus.
Aufbau der Datenschicht
Das Schwierigste war nicht das React-Frontend, sondern saubere Daten aus OpenClaw zu extrahieren.
Die Logs von OpenClaw sind semi-strukturiert. Ich habe einen Parser geschrieben, der Folgendes extrahiert:
– Die Zeitstempel aller Ereignisse
– Die Anzahl der Tokens der API-Aufrufe
– Die Namen der Tools und deren Ausführungszeiten
– Die Fehlermeldungen und Stack-Traces
– Die Sitzungs-IDs, um die verwandten Ereignisse zu gruppieren
Der Parser läuft alle 30 Sekunden, verarbeitet die neuen Log-Einträge und speichert die extrahierten Daten in einer SQLite-Datenbank. Die API fragt SQLite ab, was für ein Single-User-Dashboard ausreichend schnell ist.
Gesamter Code der Datenpipeline: etwa 300 Zeilen JavaScript. Nicht sehr elegant, aber zuverlässig.
Die mobile Erfahrung
Ich habe speziell für eine mobile-first Konsultation gestaltet. Das Layout ist eine einzelne Spalte, die die vier Panels vertikal stapelt. Jedes Panel kann eingeklappt werden — ich lasse normalerweise Panel 1 und Panel 4 offen und klappe Panel 2 und 3 ein, es sei denn, ich benötige sie.
Die entscheidenden Designwahl:
– Große Klickflächen (keine kleinen Buttons)
– Farben mit hohem Kontrast (bei voller Sonne lesbar)
– Minimale Daten pro Panel (Zusammenfassung anzeigen, nicht die Details)
– Pull-to-refresh (natürliche mobile Interaktion)
Nachträglich hinzugefügte Funktionen
Schnelle Aktionen. Vom Dashboard aus kann ich: OpenClaw neu starten, bestimmte Agenten pausieren/wieder aufnehmen, ausstehende Elemente genehmigen, manuell geplante Aufgaben starten. Diese Buttons ersparen mir die SSH-Anmeldung für gängige Operationen.
Historische Ansicht. Ein Datums-selector, der die Aktivität eines beliebigen vorherigen Tages anzeigt. Praktisch, um zu wissen: „Was ist gestern passiert, während ich geschlafen habe?“
Kostenprognosen. Basierend auf den letzten 7 Tagen Nutzung, prognostiziert das Dashboard die monatlichen Kosten. Diese Schätzung wird täglich aktualisiert und hat sich als mit 10 % Genauigkeit erwiesen.
Was ich anders machen würde
WebSockets anstelle von Polling verwenden. Das Dashboard fragt die API alle 30 Sekunden nach Updates. WebSockets würden Echtzeit-Updates ohne diesen Overhead ermöglichen. Ich habe es nicht gemacht, weil 30 Sekunden für meine Bedürfnisse ausreichen, aber das wäre eine offensichtliche Verbesserung.
Eine Benachrichtigungsintegration hinzufügen. Momentan gehen die Alerts über Grafana/Slack. Wenn das Dashboard direkt Push-Benachrichtigungen senden könnte, würde das meine Alarmkanäle zentralisieren.
Einfacher anfangen. Ich habe die erste Version mit Funktionen überschätzt, die ich nicht benötigte (Kosten pro Agent und Stunde, historische Grafiken, Log-Suche). Die Funktionen, die ich wirklich täglich nutze, sind: Statusübersicht, Elemente, die eine Aktion erfordern, schnelle Aktionen. Ich hätte eine nützliche v1 in ein paar Stunden anstelle eines Wochenendes machen können.
🕒 Published: