Agent Flow: Claude Code und Codex beim Arbeiten zusehen

Welches Problem der Knotengraph löst

Claude Code führt Werkzeuge aus, verzweigt und koordiniert Unteragenten, aber nach außen bleibt nur das Ergebnis sichtbar. Das README beschreibt genau diesen Zustand als Blackbox: Man sehe das Resultat, nicht den Weg dorthin. Agent Flow setzt an dieser Stelle an und zeichnet die Ausführung als interaktiven Knotengraph, in dem jeder Tool-Aufruf, jede Verzweigung und jeder Rückfluss als eigener Schritt erscheint. Der Autor nennt als Auslöser die Entwicklung von CraftMyGame, einer Plattform, die von KI-Agenten gesteuert wird. Debugging sei dort schmerzhaft gewesen, deshalb wurde die Beobachtung visuell gelöst.

Die Zielgruppe ist damit enger gefasst, als der Marketplace-Eintrag vermuten lässt. Angesprochen sind Entwickler, die bereits mit Claude Code oder Codex arbeiten und deren Verhalten analysieren wollen: welche Werkzeuge ein Agent wählt, wo Laufzeit verloren geht, welche Verzweigung überflüssig war. Wer Agenten nur gelegentlich startet, gewinnt wenig. Wer dagegen Prompts systematisch verbessert, bekommt ein Werkzeug, das die Wirkung einer Formulierung im Ausführungsverlauf zeigt.

Zwei Erfassungswege, ein gemeinsames Bild

Die Architektur unterscheidet klar zwischen den beiden Laufzeitumgebungen. Für Claude Code betreibt Agent Flow einen leichtgewichtigen HTTP-Hook-Server, der Ereignisse direkt aus Claude Code empfängt. Das README spricht von Streaming ohne Verzögerung, weil die Ereignisse nicht aus Dateien nachgelesen, sondern zugestellt werden. Der Preis dafür ist eine Konfiguration: Claude Code muss Hooks kennen, die auf diesen Server zeigen. Die Erweiterung richtet das beim ersten Öffnen des Panels automatisch ein, ein Kommando in der Befehlspalette erlaubt die manuelle Wiederholung.

Für Codex gibt es keinen Hook, sondern einen Tailer. Er liest Dateien unter `~/.codex/sessions/**/rollout-*.jsonl` und beachtet dabei die Umgebungsvariable `CODEX_HOME`, sodass auch abweichende Installationen erfasst werden. Aus diesem Ereignisstrom stammen laut README Tool-Aufrufe, Reasoning und die Token-Zahlen, die Codex selbst als verbindlich ausgibt. Das ist ein wichtiger Unterschied: Die Token-Zählung stammt nicht aus einer Schätzung von Agent Flow, sondern aus dem Ereignisstrom der Laufzeit.

Beide Quellen laufen standardmäßig parallel und werden nebeneinander mit einer Kennzeichnung der Laufzeit angezeigt. Wer nur eine Umgebung nutzt, muss nichts abschalten; die andere Quelle bleibt laut README ein wirkungsloser Leerlauf. Wer einschränken will, setzt `agentVisualizer.runtime` auf `"auto"`, `"claude"` oder `"codex"`, in den Kommandozeilen-Varianten stattdessen die Umgebungsvariable `AGENT_FLOW_RUNTIME`.

Drei Startwege mit unterschiedlichem Aufwand

Der schnellste Weg kommt ohne Editor aus. `npx agent-flow-app` startet den Visualisierer im Browser, ein Claude-Code-Prozess in einem zweiten Terminal liefert die Ereignisse. Der Server hört standardmäßig auf Port 3001; `--port` ändert das, `--no-open` unterdrückt das automatische Öffnen des Browsers, `--verbose` schaltet ausführliche Ereignisprotokolle zu.

Wer aus dem Quelltext bauen will, klont das Repository und führt `pnpm i`, `pnpm run setup` und `pnpm run dev` aus. Der Setup-Schritt konfiguriert die Claude-Code-Hooks einmalig, der Entwicklungslauf startet den Next.js-Server zusammen mit einem Relay, das eingehende Ereignisse per Server-Sent-Events an den Browser weiterreicht. Die Oberfläche läuft dann auf Port 3000. Für Demodaten ohne echte Session gibt es `pnpm run dev:demo`, für den Relay allein `pnpm run dev:relay`.

Die VS-Code-Erweiterung ist der komfortabelste Weg. Nach der Installation öffnet `Agent Flow: Open Agent Flow` das Panel, `Agent Flow: Open Agent Flow to Side` platziert es in einer seitlichen Spalte. Die Tastenkombination `Cmd+Alt+A` unter macOS beziehungsweise `Ctrl+Alt+A` unter Windows und Linux öffnet es ebenfalls. Vorausgesetzt wird ein VS-Code-kompatibler Editor ab Version 1.85, Node.js 20 oder neuer sowie pnpm.

Für Sonderfälle gibt es zwei Optionen. `agentVisualizer.eventLogPath` zeigt auf eine beliebige JSONL-Datei, die Agent Flow dann verfolgt, was die Visualisierung unabhängig von einer laufenden Laufzeit macht. `agentVisualizer.devServerPort` schaltet mit dem Standardwert `0` in den Produktionsmodus. Wer das Panel automatisch beim Start einer Session öffnen will, setzt `agentVisualizer.autoOpen` auf `true`.

Wo die Visualisierung an ihre Grenzen stößt

Der Hook-Weg für Claude Code ist eine Einbahnstraße mit Nebenwirkungen. Agent Flow schreibt Konfiguration in die Claude-Code-Umgebung, und zwar automatisch beim ersten Öffnen des Panels. Wer Hooks bereits selbst nutzt oder eine geteilte Konfiguration pflegt, muss mit dieser Änderung rechnen und sie im Zweifel über das Konfigurationskommando zurücksetzen. Das README beschreibt keinen Modus, in dem Agent Flow Ereignisse empfängt, ohne die Hook-Konfiguration anzufassen.

Der Codex-Weg hat die entgegengesetzte Schwäche. Er hängt an einem Dateiformat: `rollout-*.jsonl` unterhalb des Codex-Sitzungsverzeichnisses. Ändert Codex dieses Format oder den Ablageort, bricht die Erfassung, bis der Tailer nachzieht. Genau dieses Muster zeigt die Versionshistorie: v0.8.0 brachte die Codex-Laufzeit, v0.9.0 folgte mit Korrekturen an der Codex-Erkennung, v0.9.1 mit einem Fix für die Sitzungserkennung unter Windows. Die jüngsten Veröffentlichungen sind damit überwiegend Reparaturen an der Erfassungsschicht, nicht neue Analysefunktionen.

Ein dritter Punkt betrifft den Umfang. Agent Flow ist ein Beobachtungswerkzeug, kein Steuerungswerkzeug. Die Befehlsliste enthält ausschließlich Kommandos zum Öffnen, Verbinden und Konfigurieren. Wer einen laufenden Agenten unterbrechen, einen Werkzeugaufruf wiederholen oder einen Prompt im Nachhinein ändern will, braucht etwas anderes. Für das Verstehen eines abgeschlossenen Laufs ist das kein Mangel, für das Eingreifen in einen laufenden schon.

Was Agent Flow von generischen Tracing-Werkzeugen unterscheidet

Der naheliegende Vergleich sind allgemeine Tracing- und Observability-Werkzeuge für LLM-Anwendungen, etwa Langfuse oder Phoenix. Deren Modell ist grundsätzlich anders: Sie erwarten, dass die eigene Anwendung Spans und Traces über ein SDK oder eine API meldet, und sie sind auf die Auswertung vieler Läufe über Zeit ausgelegt, mit Dashboards, Auswertungen und Kostenverfolgung über Projekte hinweg.

Agent Flow instrumentiert dagegen nicht den eigenen Code, sondern fremde Kommandozeilenwerkzeuge. Die Ereignisse kommen aus Hooks, die Claude Code selbst aufruft, oder aus Dateien, die Codex selbst schreibt. Daraus folgt ein anderer Nutzen: kein SDK-Einbau, keine Änderung an der zu untersuchenden Anwendung, dafür aber eine feste Kopplung an die beiden unterstützten Laufzeiten und ihre jeweiligen Schnittstellen. Für eine einzelne, gerade laufende Session ist das der direktere Weg. Für den Vergleich hunderter Läufe über Wochen ist es der falsche.

Innerhalb dieser Nische gibt es kaum Alternativen mit demselben Ansatz. Wer Claude Code beobachten will, kann die JSONL-Protokolle selbst auswerten oder ein eigenes Hook-Skript schreiben. Agent Flow liefert dafür eine fertige Oberfläche mit Pan, Zoom, anklickbaren Knoten, Zeitachse, Datei-Heatmap und Nachrichtentranskript. Der Unterschied liegt im Aufwand, nicht im Prinzip.

Wartung, Telemetrie und Lizenz

Das Projekt steht unter Apache-2.0. Diese Lizenz erlaubt kommerzielle Nutzung, Veränderung und Weitergabe, verlangt aber, dass Lizenz- und Urheberrechtshinweise erhalten bleiben und Änderungen kenntlich gemacht werden. Sie enthält eine ausdrückliche Patentgewährung. Wer die Erweiterung in einem Unternehmen einsetzt, sollte die Hinweispflichten mit der eigenen Rechtsabteilung klären; eine rechtliche Bewertung kann dieser Text nicht leisten.

Ein Punkt, der bei der Einführung leicht übersehen wird: Das veröffentlichte `npx agent-flow-app`-Paket enthält standardmäßig aktivierte, abwählbare anonyme Nutzungstelemetrie. Laut README senden der Entwicklungslauf `pnpm run dev` und die VS-Code-Erweiterung nichts. Wer das Kommandozeilenpaket in einer Umgebung mit strengen Vorgaben einsetzt, muss die Telemetrie also aktiv prüfen und gegebenenfalls abschalten, bevor die erste Session läuft.

Die Wartungslast hängt an zwei fremden Formaten. Solange Claude Code seine Hook-Schnittstelle und Codex sein Rollout-Format beibehalten, ist der Pflegeaufwand gering. Beide Laufzeiten entwickeln sich schnell, und die Versionshistorie zeigt bereits drei Anpassungen an der Erfassungsschicht innerhalb weniger Monate. Wer Agent Flow produktiv einsetzt, sollte die Versionshinweise der beiden Laufzeiten mitlesen, weil ein Formatwechsel die Visualisierung still verstummen lässt.

Für wen sich der Einstieg lohnt

Der stärkste Anwendungsfall ist das Nachvollziehen eines Fehlers. Wenn ein Agent eine Datei an der falschen Stelle ändert oder einen Werkzeugaufruf wiederholt, zeigt der Graph die Kette bis zu diesem Punkt, und die Datei-Heatmap macht sichtbar, welchen Dateien der Agent wie viel Aufmerksamkeit gewidmet hat. Dasselbe gilt für das Lernen: Wer beobachtet, wie ein Modell eine Aufgabe zerlegt, schreibt anschließend präzisere Prompts.

Der schwächste Anwendungsfall ist die Dauerbeobachtung. Agent Flow zeigt eine laufende Session, nicht den Verlauf über viele Sessions. Es gibt keine Auswertung über Zeit, keine Aggregation, keinen Vergleich zwischen zwei Läufen. Wer solche Fragen stellt, ist bei einem Tracing-Backend mit SDK-Anbindung besser aufgehoben, auch wenn das den Einbau von Instrumentierung im eigenen Code bedeutet.

Vor dem ersten Einsatz lohnt ein kurzer Testlauf mit `pnpm run dev:demo`. Er zeigt die Oberfläche mit Beispieldaten, ohne dass eine echte Session laufen muss, und beantwortet die Frage, ob der Knotengraph überhaupt zum eigenen Arbeitsstil passt. Wer danach produktiv einsteigt, sollte die Telemetrieeinstellungen des npx-Pakets prüfen und die automatisch gesetzte Claude-Code-Hook-Konfiguration kennen, bevor sie mit einer bestehenden Konfiguration kollidiert.

Redaktionelles Fazit

Wer Claude Code oder Codex intensiv nutzt und Fehler in Tool-Aufrufketten bislang aus JSONL-Protokollen rekonstruiert, findet hier eine fertige Oberfläche mit drei Startwegen. Wer nur gelegentlich eine Session startet oder keine Node-20-Umgebung pflegen will, sollte beim Terminal bleiben. Vor dem ersten Einsatz lohnt ein Blick in die Telemetrie-Einstellungen, denn das veröffentlichte npx-Paket sendet anonyme Nutzungsdaten standardmäßig, während Entwicklungsserver und Erweiterung nichts senden.

Offizielle Quellen

1. License: Apache-2.0
2. patoles/agent-flow on GitHub
3. Project website
4. README
5. Releases