DOM Explorer и Code Graph показывают всю кодовую базу в виде интерактивного графа зависимостей, а для веб-проектов — реальные элементы DOM, связанные с поведением, которое они запускают.

DOM Explorer и Code Graph

Граф зависимостей кода

Code Graph визуализирует файлы проекта как узлы, соединённые импортами. Файлы автоматически объединяются в сообщества на основе шаблонов импорта, поэтому естественные границы модулей видны с первого взгляда, и рисовать их вручную не нужно.

• God nodes — файлы с непропорционально большим числом зависимостей, хорошие кандидаты на разделение.
• Мёртвый код — файлы без входящих рёбер (их ничто не импортирует), которые, скорее всего, можно безопасно удалить.
• Циклические зависимости — группы файлов, импортирующих друг друга, что усложняет рефакторинг.

Что такое атрибуты data-aitm

Для веб-проектов AITM дополнительно сопоставляет реальные элементы DOM через атрибут data-aitm="MODULE.ELEMENT" на каждом интерактивном элементе (кнопке, поле ввода, контейнере). Этот код связывает видимый элемент с его поведением в коде — функцией-обработчиком, целевым маршрутом или вызовом API, который он запускает, — и с Behavioral Contract, документирующим это поведение.

Цепочки «клик → эффект»

Если элемент с data-aitm имеет также data-action, AITM отслеживает, какой эффект вызывает щелчок по нему — открытие модального окна, переход, вызов API или отправку события сокета. Эти цепочки "click → effect" образуют отдельную карту наряду с графом зависимостей файлов, и AI читает их перед тем, как коснуться элемента UI, чтобы понимать радиус влияния изменения до его внесения.

Самовосстанавливающиеся селекторы E2E

Поскольку каждый код data-aitm хранится в базе данных вместе с текущим селектором DOM, тесты E2E могут находить элемент по стабильному коду, а не по хрупкому селектору CSS/XPath. При изменении структуры DOM карта автоматически пересчитывается при следующем запуске Pipeline, поэтому тесты не остаются сломанными только из-за переименованного класса или перемещённого тега.