Der DOM Explorer und der Code Graph stellen die gesamte Codebasis als interaktiven Abhängigkeitsgraphen dar und zeigen bei Webprojekten die echten DOM-Elemente, verknüpft mit dem Verhalten, das sie auslösen.
DOM Explorer & Code Graph
Der Code-Abhängigkeitsgraph
Der Code Graph visualisiert die Dateien eines Projekts als Knoten, die durch Imports verbunden sind. Dateien werden anhand der Import-Muster automatisch zu Communities gruppiert, sodass sich natürliche Modulgrenzen auf einen Blick erkennen lassen, ohne sie von Hand einzuzeichnen.
- God nodes — Dateien mit einer unverhältnismäßig hohen Zahl von Abhängigkeiten, gute Kandidaten zum Aufteilen.
- Dead code — Dateien ohne eingehende Kanten (von nichts importiert), die sich voraussichtlich gefahrlos entfernen lassen.
- Zirkuläre Abhängigkeiten — Gruppen von Dateien, die sich gegenseitig importieren und das Refactoring erschweren.
Was data-aitm-Attribute sind
Bei Webprojekten ordnet AITM zusätzlich echte DOM-Elemente über ein Attribut data-aitm="MODULE.ELEMENT" an jedem interaktiven Element (Button, Eingabefeld, Container) zu. Dieser Code verknüpft das sichtbare Element mit seinem Verhalten im Code — der Handler-Funktion, der Zielroute oder dem API-Aufruf, die es auslöst — sowie mit dem Behavioral Contract, der dieses Verhalten dokumentiert.
Click-to-effect-Ketten
Trägt ein Element mit data-aitm auch data-action, verfolgt AITM, welche Wirkung ein Klick darauf hat — ein Modal öffnen, navigieren, eine API aufrufen oder ein Socket-Event senden. Diese „click → effect“-Ketten bilden neben dem Datei-Abhängigkeitsgraphen eine eigene Karte, und die KI liest sie, bevor sie ein UI-Element anfasst, um den Wirkungsbereich einer Änderung zu verstehen, bevor sie sie vornimmt.
Selbstheilende E2E-Selektoren
Da jeder data-aitm-Code zusammen mit seinem aktuellen DOM-Selektor in der Datenbank gespeichert ist, können E2E-Tests ein Element über seinen stabilen Code statt über einen fragilen CSS-/XPath-Selektor finden. Ändert sich die DOM-Struktur, wird die Karte beim nächsten Pipeline-Lauf automatisch neu aufgelöst, sodass Tests nicht kaputt bleiben, nur weil eine Klasse umbenannt oder ein Tag verschoben wurde.
Tipps
- Die Hervorhebung der God nodes nutzen, um Dateien zu finden, die sich gemäß den Regeln in CLAUDE.md zum Aufteilen lohnen.
- Elemente ohne
data-aitm-Attribut erscheinen nie in der Effekt-Karte — jedem neuen interaktiven Element eines hinzufügen. - Auf einen beliebigen Graphknoten klicken, um die Dateien zu sehen, die er importiert, und die Dateien, die ihn importieren.