DOM Explorer i Code Graph pokazują całą bazę kodu jako interaktywny graf zależności, a w projektach webowych także rzeczywiste elementy DOM powiązane z zachowaniem, które wywołują.

DOM Explorer & Code Graph

Graf zależności kodu

Code Graph wizualizuje pliki projektu jako węzły połączone importami. Pliki są automatycznie grupowane w społeczności na podstawie wzorców importów, dzięki czemu naturalne granice modułów widać od razu, bez rysowania ich ręcznie.

• God nodes — pliki z nieproporcjonalnie dużą liczbą zależności, dobrzy kandydaci do podziału.
• Martwy kod — pliki bez krawędzi przychodzących (niezaimportowane przez nic), które prawdopodobnie można bezpiecznie usunąć.
• Zależności cykliczne — grupy plików importujących się nawzajem, co utrudnia refaktoryzację.

Czym są atrybuty data-aitm

W projektach webowych AITM dodatkowo mapuje rzeczywiste elementy DOM za pomocą atrybutu data-aitm="MODULE.ELEMENT" na każdym elemencie interaktywnym (przycisk, pole, kontener). Ten kod wiąże widoczny element z jego zachowaniem w kodzie — funkcją obsługi, docelową trasą lub wywołaniem API, które uruchamia — oraz z Behavioral Contract dokumentującym to zachowanie.

Łańcuchy kliknięcie-efekt

Gdy element z data-aitm ma też data-action, AITM śledzi, jaki efekt wywołuje jego kliknięcie — otwarcie modala, nawigację, wywołanie API lub emisję zdarzenia socket. Te łańcuchy „kliknięcie → efekt" tworzą osobną mapę obok grafu zależności plików, a AI czyta je przed dotknięciem elementu UI, aby zrozumieć zasięg zmiany, zanim ją wprowadzi.

Samonaprawiające się selektory E2E

Ponieważ każdy kod data-aitm jest przechowywany w bazie danych razem z aktualnym selektorem DOM, testy E2E mogą wyszukiwać element po stabilnym kodzie zamiast po kruchym selektorze CSS/XPath. Gdy struktura DOM się zmienia, mapa jest automatycznie ponownie rozwiązywana przy następnym uruchomieniu Pipeline, więc testy nie pozostają zepsute tylko dlatego, że zmieniono nazwę klasy lub przeniesiono tag.