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.

DOM Explorer
Der DOM Explorer mit einem interaktiven Code-Abhängigkeitsgraphen.

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.