Ich wollte ein Dashboard, das zeigt, was meine KI-Agenten tun. Kein Monitoring auf Grafana-Niveau mit Metriken und Warnungen — das habe ich schon. Ich wollte etwas, auf das ich auf meinem Handy einen Blick werfen kann, um zu wissen: Welche Agenten sind aktiv, woran arbeiten sie, wie viel sie heute ausgegeben haben und ob etwas meiner Aufmerksamkeit bedarf.
Also habe ich eines in React gebaut. Eine Single-Page-App, die sich mit den Daten von OpenClaw verbindet und diese als sauberes, mobilfreundliches Dashboard anzeigt. Ich habe ein Wochenende gebraucht, um es zu bauen, und es ist inzwischen das Erste, was ich jeden Morgen überprüfe.
Was das Dashboard Zeigt
Panel 1: Agentenstatus
Eine Liste aller konfigurierten Agenten mit ihrem aktuellen Status: aktiv (grün), untätig (gelb), Fehler (rot). Jeder Agent zeigt den Zeitstempel seiner letzten Aktivität und eine kurze Beschreibung dessen, was er zuletzt getan hat. Ich kann auf einen Blick sehen, dass der Agent für das Morgengespräch um 8:00 Uhr lief, der Überwachungsagent um 8:15 Uhr die Server überprüfte und der E-Mail-Agent untätig ist und auf neue Nachrichten wartet.
Panel 2: Aktivitäten von Heute
Eine Zeitstrahlansicht aller Agentenaktionen heute. Farbkodiert nach Typ: blau für KI-Modellanfragen, grün für Werkzeugausführungen, orange für Benutzerinteraktionen, rot für Fehler. Scrollbar. Zeigt die aktuellsten Aktivitäten zuerst an.
Hier entdecke ich Probleme. Ein Cluster roter Einträge bedeutet, dass etwas wiederholt fehlschlägt. Eine Lücke im Zeitstrahl bedeutet, dass ein erwarteter Job nicht ausgeführt wurde. Eine ungewöhnlich lange blaue Leiste bedeutet, dass eine API-Anfrage viel länger gedauert hat als normal.
Panel 3: Kostenverfolgung
Die heutige Gesamtsumme im Vergleich zum Tagesdurchschnitt. Aufgeschlüsselt nach Modell und nach Agenten. Ein Mini-Balkendiagramm, das die letzten 7 Tage für den Trendvergleich zeigt.
Panel 4: Aufmerksamkeit Erforderlich
Elemente, die meiner Eingabe bedürfen: E-Mail-Entwürfe, die auf Genehmigung warten, markierte Moderationselemente, fehlgeschlagene Aufgaben, die überprüft werden müssen, Budgetwarnungen. Jedes Element hat einen Aktionsbutton: genehmigen, ablehnen oder Details anzeigen.
Dieses Panel ist der Hauptgrund, warum das Dashboard existiert. Alles andere ist informativ. Dieses Panel ist handlungsorientiert.
Der Tech-Stack
Frontend: React mit Vite. Keine Komponentenbibliothek — nur Vanilla CSS mit Flexbox/Grid. Das gesamte Bundle ist unter 200KB. Lädt sofort, selbst mobil über das Mobilfunknetz.
Datenquelle: OpenClaw-Logdateien, geparst und bereitgestellt von einer kleinen Express-API. Die API liest die Logs, extrahiert die relevanten Datenpunkte und stellt sie als JSON bereit. Etwa 200 Zeilen Code.
Hosting: Läuft auf der gleichen Maschine wie OpenClaw. Der React-Build produziert statische Dateien, die von der Express-API bereitgestellt werden. Kein separater Webserver nötig.
Auth: Basisauthentifizierung mit einem einzelnen Benutzernamen/Passwort. Dies ist keine Mehrbenutzeranwendung — es ist mein persönliches Dashboard. Eine einfache Authentifizierung reicht aus.
Aufbau der Datenebene
Der schwierigste Teil war nicht das React-Frontend — es war, saubere Daten aus OpenClaw herauszubekommen.
Die OpenClaw-Logs sind textbasiert und semi-strukturiert. Ich habe einen Parser geschrieben, der extrahiert:
– Zeitstempel für alle Ereignisse
– Token-Zahlen aus API-Anfragen
– Werkzeugnamen und Ausführungszeiten
– Fehlermeldungen und Stack-Traces
– Sitzungs-IDs zur Gruppierung verwandter Ereignisse
Der Parser läuft alle 30 Sekunden, verarbeitet neue Logeinträge und speichert die extrahierten Daten in einer SQLite-Datenbank. Die API fragt SQLite ab, was schnell genug für ein Dashboard mit einem Benutzer ist.
Gesamtanzahl der Datenpipeline-Code: etwa 300 Zeilen JavaScript. Nicht elegant, aber es funktioniert zuverlässig.
Das Mobile Erlebnis
Ich habe dieses speziell für die mobile Ansicht entwickelt. Das Layout besteht aus einer einzelnen Spalte, die die vier Panels vertikal anordnet. Jedes Panel ist zusammenklappbar — ich lasse normalerweise Panel 1 und Panel 4 geöffnet und klappe Panels 2 und 3 zusammen, es sei denn, ich brauche sie.
Die entscheidenden Designentscheidungen:
– Große Touch-Ziele (keine kleinen Buttons)
– Hohe Kontrastfarben (lesbar im direkten Sonnenlicht)
– Minimale Daten pro Panel (nur die Zusammenfassung, nicht die Details anzeigen)
– Pull-to-Refresh (natürliche mobile Interaktion)
Funktionen, die ich später Hinzugefügt Habe
Schnellaktionen. Vom Dashboard aus kann ich: OpenClaw neu starten, bestimmte Agenten pausieren/wieder aufnehmen, anstehende Elemente genehmigen und manuelle Ausführungen geplanter Aufgaben auslösen. Diese Buttons haben mich davor bewahrt, mich über SSH ins Server einzuloggen, um Routineoperationen durchzuführen.
Historische Ansicht. Ein Datumswähler, der die Aktivitäten eines beliebigen vorherigen Tages anzeigt. Nützlich zur Untersuchung von „Was ist gestern passiert, während ich geschlafen habe?“ -Szenarien.
Kostenprognosen. Basierend auf den letzten 7 Tagen der Nutzung projiziert das Dashboard monatliche Kosten. Diese Prognose aktualisiert sich täglich und war innerhalb von 10% der tatsächlichen Kosten genau.
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 den Überkopf des Polling bereitstellen. Ich habe es nicht geändert, weil 30-Sekunden-Updates für meine Bedürfnisse ausreichend sind, aber es ist die offensichtliche Verbesserung.
Benachrichtigungsintegration hinzufügen. Derzeit laufen Warnungen über Grafana/Slack. Wenn das Dashboard Push-Benachrichtigungen direkt senden würde, würde es meine Alarmkanäle konsolidieren.
Einfacher anfangen. Ich habe die erste Version mit Funktionen überladen, die ich nicht brauchte (Kostenaufteilung pro Agent und Stunde, historische Trenddiagramme, Logsuche). Die Funktionen, die ich tatsächlich täglich nutze, sind: Statusübersicht, items, die Aufmerksamkeit erfordern, und Schnellaktionen. Ich hätte innerhalb von wenigen Stunden ein nützliches v1 anstelle eines Wochenendes bauen können.
🕒 Published: