Il DOM Explorer e il Code Graph mostrano l'intera codebase come grafo interattivo delle dipendenze e, per i progetti web, gli elementi DOM reali collegati al comportamento che attivano.

DOM Explorer e Code Graph

Il grafo delle dipendenze del codice

Il Code Graph visualizza i file del progetto come nodi collegati dagli import. I file vengono raggruppati automaticamente in community in base ai pattern di import, così i confini naturali dei moduli sono visibili a colpo d'occhio senza doverli tracciare a mano.

  • God node — file con un numero sproporzionatamente alto di dipendenze, buoni candidati alla suddivisione.
  • Dead code — file senza archi in ingresso (importati da nessuno), che probabilmente si possono rimuovere senza rischi.
  • Dipendenze circolari — gruppi di file che si importano a vicenda e complicano il refactoring.

Cosa sono gli attributi data-aitm

Per i progetti web, AITM mappa inoltre gli elementi DOM reali tramite un attributo data-aitm="MODULE.ELEMENT" su ogni elemento interattivo (pulsante, input, contenitore). Questo codice lega l'elemento visibile al suo comportamento nel codice — la funzione handler, la route di destinazione o la chiamata API che attiva — e al Behavioral Contract che documenta quel comportamento.

Catene click-to-effect

Quando un elemento con data-aitm ha anche data-action, AITM traccia quale effetto provoca il clic su di esso — aprire una finestra modale, navigare, chiamare un'API o emettere un evento socket. Queste catene "click → effect" formano una mappa separata accanto al grafo delle dipendenze tra file, e l'AI le legge prima di toccare un elemento UI, così comprende il raggio d'impatto di una modifica prima di farla.

Selettori E2E auto-riparanti

Poiché ogni codice data-aitm viene memorizzato nel database insieme al suo selettore DOM corrente, i test E2E possono cercare un elemento tramite il suo codice stabile invece di un fragile selettore CSS/XPath. Quando la struttura del DOM cambia, la mappa viene risolta di nuovo automaticamente alla successiva esecuzione della Pipeline, quindi i test non restano rotti solo perché una classe è stata rinominata o un tag spostato.

DOM Explorer
Il DOM Explorer con un grafo interattivo delle dipendenze del codice.

Suggerimenti

  • Usare l'evidenziazione dei god node per individuare i file da suddividere secondo le regole di CLAUDE.md.
  • Gli elementi senza attributo data-aitm non compaiono mai nella mappa degli effetti — aggiungerne uno a ogni nuovo elemento interattivo.
  • Fare clic su un nodo qualsiasi del grafo per vedere i file che importa e i file che lo importano.