Mindwalk: Visualisiere deine gesamte Codebasis als 3D-Karte

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Seit zwei Jahren übergeben wir unsere Codebasen an KI-Agenten und lassen sie umschreiben,
00:00:05was immer sie wollen, um das danach durch Scrollen einer endlosen Codewand zu überprüfen.
00:00:09Jemand hatte schließlich genug davon und hat das genaue Gegenteil gebaut: eine Möglichkeit,
00:00:14einem Agenten in 3D durch den Code zu folgen.
00:00:17Das Tool heißt MindWalk.
00:00:18Das könnte sogar ein besserer Weg sein, unseren Code zu visualisieren und zum Leben zu erwecken.
00:00:23Wir haben zwar Tools wie Graphify, aber wie schneidet dieses hier im Vergleich ab?
00:00:30Hier ist das eigentliche Problem, das MindWalk lösen soll.
00:00:34Das Log des Agenten verrät uns, was er getan hat: dies ausgeführt, das bearbeitet.
00:00:38Was es uns nie verrät, ist, wie er die Aufgabe verstanden hat.
00:00:41Welche Dateien hielt er für relevant?
00:00:44Wo hat er sich umgesehen, bevor er auch nur eine einzige Zeile geändert hat?
00:00:47Blieb er im vorgesehenen Bereich oder durchsuchte er stillschweigend das halbe Repository?
00:00:51All diese Dinge.
00:00:52Der eigentliche Denkprozess des Agenten ist in einem Protokoll praktisch unsichtbar.
00:00:55Einfach nicht da.
00:00:56Wenn du Coding-Tools magst, die deinen Workflow beschleunigen, abonniere gerne den Kanal.
00:00:59Wir veröffentlichen laufend neue Videos.
00:01:01Ich zeige dir also, wie es aussieht, wenn diese Informationen nicht verloren gehen.
00:01:04Ich habe hier ein Projekt in einer Claude-Code-Sitzung, die ich vorhin ausgeführt habe.
00:01:08Ich kann es installieren – Wortspiel unbeabsichtigt – und dann aufbauen.
00:01:14Jetzt starte ich MindWalk mit diesem Befehl hier, und meine gesamte Codebasis wird als diese
00:01:20dunkle 3D-Stadt gerendert.
00:01:21Jede Datei ist ein Gebäude, und je mehr Code sie enthält, desto höher ragt sie auf.
00:01:26Dann drücke ich bei der Sitzung auf Play.
00:01:29Achte hier auf die Lichter.
00:01:31Eine Datei leuchtet grün – moosgrün –, wenn der Agent sie nur kurz ansieht.
00:01:36Blau, wenn er sich darin vertieft und sie liest, und bernsteinfarben, wenn er Änderungen vornimmt.
00:01:41Ich kann die Zeitleiste vor- und zurückziehen und buchstäblich den Pfad nachverfolgen, den der Agent durch diesen
00:01:46Code genommen hat.
00:01:48Es ist eine einzelne Go-Binary, die einfach die Sitzungsprotokolle liest, die Claude Code und Codex ohnehin schon
00:01:53auf der Festplatte speichern.
00:01:54Dazu kommt eine Three.js-Szene im Browser für die 3D-Darstellung.
00:01:58Die Farbsprache ist hier der eigentliche Clou.
00:02:01Kühle Farben bedeuten, dass der Agent nur geschaut hat.
00:02:03Warme Farben stehen für aktive Änderungen.
00:02:06Die Zeitleiste ist ebenfalls markiert.
00:02:07Kleine Symbole zeigen genau, wo ein Sub-Agent gestartet wurde, wo das Kontextfenster komprimiert wurde
00:02:14und wo du mit einer neuen Anweisung eingegriffen hast.
00:02:17So weißt du immer genau, wo du stehst.
00:02:20Aber hier kommt der Punkt, der meiner Meinung nach wirklich zählt.
00:02:22Wenn man über das reine “Das sieht cool aus” hinausgeht, richtig?
00:02:24Es gibt einen Analyse-Befehl, der einen Richter über die gesamte Sitzung laufen lässt – unter Nutzung deines lokalen
00:02:29Claude oder Codex –, und dieser bewertet den durchgeführten Lauf.
00:02:33Hat der Agent genug erkundet, bevor er mit dem Bearbeiten begann?
00:02:37Okay, bleib er im Rahmen der Vorgaben?
00:02:38Ist er vom Weg abgekommen?
00:02:40Hat er sich die Mühe gemacht, seine eigene Arbeit zu überprüfen?
00:02:42Und jede dieser Erkenntnisse ist ein anklickbarer Link direkt zu diesem Moment auf der Zeitleiste.
00:02:47Das ist quasi ein Code-Review für den Agenten.
00:02:49Und falls du überhaupt keine Sitzungsaufzeichnung hast, gibt es einen Map-Befehl, der jedes Repository
00:02:54ganz ohne Einrichtung als 3D-Stadt darstellt – was einfach ein ziemlich cooler Trick ist.
00:02:59Okay, und jetzt kommt es.
00:03:00Als das Ganze auf Hacker News veröffentlicht wurde, war der Top-Kommentar ziemlich ehrlich,
00:03:06denn genau das fragst du dich wahrscheinlich auch.
00:03:08“Das ist sehr cool, aber würde ich es wirklich nutzen?
00:03:10Wofür würde ich das tatsächlich einsetzen?”
00:03:12Manche haben dem gar nicht erst widersprochen.
00:03:14Sie meinten Dinge wie: Es dient keinem echten Zweck.
00:03:16Es macht Spaß, und nicht alles braucht einen tieferen Grund.
00:03:19Jemand anderes landete schließlich einen berechtigten Einwand bezüglich kleinerer Änderungen.
00:03:23Ein ganz normaler Git-Diff ist einfach schneller, als dem Agenten auf dieser 3D-Tour zuzusehen.
00:03:28Verstehe ich absolut.
00:03:29Das Ganze ist also noch extrem neu.
00:03:31Es ist Version 0.3.
00:03:32Es liest nur Logs von Claude Code und Codex.
00:03:34Wer hauptsächlich Cursor nutzt, kann seine Sitzungen noch nicht abspielen.
00:03:38Was mich zur Frage bringt: Für wen ist das wirklich gedacht?
00:03:41Ist es nur eine Spielerei?
00:03:42Nun, wenn man Modelle vergleicht und sehen will, wie Claude eine Aufgabe erkundet,
00:03:45im Vergleich dazu, wie Codex vorgeht,
00:03:48ist das ein wirklich cooler Blickwinkel, den man sonst nirgendwo bekommt.
00:03:51Wenn du vor einer riesigen, weitverzweigten Agenten-Änderung stehst und ein flacher Diff dir einfach kein Gefühl dafür gibt,
00:03:56was eigentlich passiert ist, ist dieser 3D-Rundflug zusammen mit dem Richter-Bericht ziemlich genial.
00:04:01Es schlüsselt genau das auf.
00:04:02Aber für einen Fix von zwei Zeilen? Bitte.
00:04:04Lies einfach den Diff.
00:04:05Ich glaube nicht, dass MindWalk unsere gewohnten Review-Tools ersetzen wird.
00:04:09Aber es dient vielleicht dazu, ein Gefühl für den Ablauf zu bekommen, das uns herkömmliche Tools nie vermitteln
00:04:14konnten.
00:04:15Und das ist der Aspekt, mit dem wir hier ein wenig herumprobieren können.
00:04:19Wir haben unseren Maschinen beigebracht, unseren Code viel schneller zu schreiben, als wir Wege entwickelt haben, um zu verstehen,
00:04:24was sie überhaupt geschrieben haben.
00:04:25MindWalk, genau wie Graphify – Graphify, Graphify.
00:04:29Okay, ich glaube, ich spreche es richtig aus.
00:04:31Das könnte ein erster ernsthafter Versuch sein, diese Lücke zu schließen und sichtbar zu machen, wie ein Agent tatsächlich
00:04:36über die Codebasis nachdenkt, und nicht nur die Tastenanschläge zeigt, die er beim Bauen hinterlassen hat.
00:04:40Es ist ungeschliffen, es ist ganz am Anfang, aber es packt genau das richtige Problem an.
00:04:43Probier es einfach mal aus und sieh selbst, ob es dir hilft.
00:04:46Wenn dir solche Coding-Tipps und Tricks gefallen, abonniere unbedingt den Kanal von BetterStack.
00:04:50Wir sehen uns im nächsten Video.

Key Takeaway

MindWalk schließt die Informationslücke zwischen KI-Codeänderungen und Entwicklerverständnis, indem es Log-Dateien von Claude Code und Codex als interaktive 3D-Stadtkarte mit Zeitleisten-Analyse aufbereitet.

Highlights

  • MindWalk visualisiert die gesamte Codebasis als dunkle 3D-Stadt, in der jedes Gebäude für eine Datei steht und dessen Höhe von der Zeilenanzahl abhängt.

  • Die Anwendung nutzt kühle Farben wie Moosgrün und Blau für reine Lesevorgänge des Agenten sowie warme Amber-Töne für aktive Codeänderungen.

  • Ein einzelnes Go-Binary liest lokal gespeicherte Sitzungsprotokolle von Claude Code sowie Codex und rendert die Szene im Browser mittels Three.js.

  • Der integrierte Analyse-Befehl bewertet den Durchlauf des KI-Agenten über ein lokales LLM und generiert anklickbare Links zu spezifischen Zeitpunkten der Zeitleiste.

  • Der Befehl 'Map' erstellt eine 3D-Stadtkarte jedes Repositories völlig ohne vorherigen Einrichtungsaufwand.

Timeline

Die unsichtbaren Denkprozesse von KI-Agenten

  • Herkömmliche Logs zeigen nur geänderte Dateien, aber nicht den Orientierungsprozess des KI-Agenten.
  • Entwickler verbringen viel Zeit damit, lange Code-Änderungen manuell durch Scrollen zu überprüfen.
  • Der tatsächliche Navigationspfad vor der ersten Codezeile bleibt in Standard-Protokollen verborgen.

KI-Agenten schreiben Codebasen autonom um. Das Überprüfen dieser Änderungen beschränkt sich meist auf das Scrollen durch lange Textwände. Standard-Logs dokumentieren zwar Bearbeitungen und Befehlsausführungen, lassen jedoch unklar, welche Dateien der Agent zur Kontextgewinnung las oder ob er den vorgesehenen Projektbereich verließ.

Funktionsweise und visuelle Farbsprache von MindWalk

  • MindWalk übersetzt Code-Dateien in 3D-Gebäude, deren Höhe der Menge des enthaltenen Codes entspricht.
  • Farbcodes signalisieren den Fokus des Agenten: Grün für kurze Blicke, Blau für tiefes Lesen und Amber für Modifikationen.
  • Die technische Basis bildet ein Go-Binary in Kombination mit Three.js für das Rendering im Browser.

Nach dem Start über die Kommandozeile rendert das Tool die Codebasis als 3D-Stadt. Die Anwendung greift direkt auf die Protokolle zu, die Claude Code und Codex auf der Festplatte ablegen. Über eine Zeitleiste lässt sich der genaue Weg der KI nachverfolgen. Symbole markieren zusätzlich den Start von Sub-Agenten, Kontext-Komprimierungen und manuelle Benutzereingriffe.

Automatisierte Code-Reviews für KI-Durchläufe

  • Der Analyse-Befehl nutzt lokale Modelle zur Bewertung der Agenten-Arbeit.
  • Das System prüft die Einhaltung der Vorgaben, die Exploration vor der Bearbeitung und die Selbstüberprüfung des Agenten.
  • Eine Option zur direkten Darstellung von Repositories als 3D-Karte existiert ohne Aufzeichnungsanforderung.

Ein Analyse-Befehl schaltet ein lokales Sprachmodell als Richter ein, um die Sitzung zu evaluieren. Das Modell prüft, ob der KI-Agent ausreichend recherchiert hat, im vorgegebenen Rahmen blieb oder eigene Fehler korrigierte. Jede Erkenntnis verlinkt direkt auf den entsprechenden Moment in der 3D-Zeitleiste. Unabhängig von Sitzungen wandelt der Map-Befehl jedes Repository direkt in eine 3D-Landschaft um.

Einsatzbereiche und Grenzen im Entwickleralltag

  • Für kleine Code-Änderungen von zwei Zeilen bleibt ein klassischer Git-Diff effizienter.
  • Das Tool befindet sich in Version 0.3 und unterstützt vorerst nur Claude Code sowie Codex.
  • MindWalk dient primär dem Modellvergleich und dem Verständnis komplexer, weitverzweigter Agenten-Eingriffe.

Die Anwendung ersetzt keine etablierten Review-Tools für alltägliche, kleine Anpassungen. Ihre Stärke liegt im Vergleich verschiedener KI-Modelle wie Claude und Codex sowie in der Nachvollziehbarkeit umfangreicher Refactorings. Standard-Diffs vermitteln bei tiefgreifenden KI-Eingriffen oft kein ausreichendes Gesamtbild. Tools dieser Art schließen die Lücke zwischen der Geschwindigkeit der Code-Generierung und der menschlichen Erfassungsgeschwindigkeit.

Community Posts

View all posts