AITM non si limita a leggere i file sorgente — costruisce un modello strutturato e interrogabile di ciò che il codice fa realmente, così l'AI smette di indovinare e inizia a verificare.

Come AITM comprende il progetto

Behavioral Contracts

Ogni funzionalità significativa della codebase può essere catturata come Behavioral Contract: una specifica leggibile dalle macchine con un id, il modulo a cui appartiene, una descrizione del comportamento in una riga, i file esatti che coinvolge, un avviso di danger zone e un punteggio di confidenza. I Contract sono memorizzati per progetto in un database SQLite locale e l'AI li interroga tramite GraphQL prima di toccare una sola riga di codice. È questo il motivo principale per cui calano i percorsi di file allucinati e i metodi inventati — l'AI consulta il Contract invece di indovinare.

Neppure i Contract diventano obsoleti: dopo ogni merge, lo step Docs della Pipeline riesamina automaticamente la modifica e aggiorna ogni Contract interessato.

Danger zone

Ogni Contract può riportare una danger zone — un avviso in linguaggio semplice sul raggio d'impatto di una modifica a quel codice (ad esempio "non chiamare mai questo senza aver prima controllato il flag di skip"). L'AI legge le danger zone in anticipo, quindi sa cosa NON rompere prima di iniziare a modificare, non dopo il fallimento di un test.

Il knowledge graph

Dietro un unico endpoint GraphQL si trovano dieci fonti di verità interconnesse sul progetto:

• L'albero delle variabili (codici di business logic BL.*, codici di interfaccia UI.*)
• I Behavioral Contracts
• La mappa degli elementi DOM
• L'Hint Dictionary
• L'indice della documentazione
• La mappa del codice — import/export, "god node" ad alto accoppiamento e community di moduli
• La mappa dei test — dall'elemento UI al locator di Playwright
• Gli screenshot
• I bug
• Gli archi tra moduli che collegano tutto quanto sopra

Una sola query può recuperare contesto correlato da tutte e dieci le fonti contemporaneamente, invece di far cercare all'AI alla cieca con grep nell'intero repository.

Onboarding del progetto

Quando si importa un progetto per la prima volta, AITM esegue una pre-scansione statica deterministica prima che qualsiasi AI lo tocchi: rilevamento di linguaggio e stack, una mappa completa del codice, estrazione del DOM tramite attributi data-aitm, riempimento delle variabili e puntatori alla documentazione. Solo dopo AITM esegue facoltativamente passaggi AI — individuazione dell'architettura, analisi della cronologia git per l'accoppiamento dei moduli e un passaggio approfondito per modulo. In breve: si importa un repository e AITM lo mappa prima ancora che venga eseguito il primo Task.

Mappa DOM + Dev Panel

Gli elementi UI reali dell'applicazione sono marcati con attributi data-aitm, ciascuno con archi di effetto "trigger" e "triggered-by" e una mappa di rettangoli in pixel della posizione sullo schermo. È questa mappa ad alimentare selettori E2E affidabili e auto-riparanti, al posto di fragili locator CSS.

Cosa fa il Dev Panel

Il Dev Panel è una barra degli strumenti JS autonoma e iniettabile (aitm-dev-panel.js) che qualsiasi progetto gestito da AITM può caricare durante lo sviluppo. È una barra flottante e agganciabile che sovrappone un badge a ogni elemento marcato con data-aitm nell'applicazione in esecuzione: un tooltip al passaggio del mouse mostra codice, tag, azione e handler dell'elemento, un contatore di eventi live resta in funzione, un piccolo riquadro chat/brainstorm permette di scrivere all'istanza AITM direttamente dall'applicazione in esecuzione, e sono presenti controlli della dimensione del carattere e un indicatore di stato online/offline di AITM stesso. Il pannello traccia le interazioni reali dell'utente (click/change/input/mount/unmount) man mano che avvengono e le invia ad AITM ogni 2 secondi — è così che AITM mantiene aggiornata la mappa dell'interfaccia.

Il pannello ha quattro tab: Elements (gli elementi su cui si è fatto clic o che sono stati fissati, con codice variabile, Contract, file e avvisi di danger zone; i pulsanti Overlay, Pin / One Pin e Clear Pins), Records (gli elementi UI registrati), Errors (errori JavaScript e di console catturati, che possono essere trasformati in Task di bug in AITM) e Settings. La documentazione completa si apre in AITM dal menu dell'intestazione: Help → AITM Dev Panel.

Se AITM gira su una macchina diversa da quella di questo sito web, impostare AitmServer:PublicBaseUrl nella configurazione (ad es. http://192.168.1.50:3333) — l'indirizzo da cui il browser carica aitm-dev-panel.js. Se vuoto, equivale a http://<page host>:<Port>. L'indirizzo di AITM può anche essere modificato in seguito nella tab Settings del pannello.

Guide & Flow — il flusso di business logic di un elemento

Dalla riga di un elemento nel Dev Panel si apre il suo dettaglio con le tab Graph, Guide & Flow e App Flow. Guide & Flow spiega l'elemento selezionato dall'alto verso il basso in passaggi semplici — l'elemento UI stesso e poi i Contract di business che ne descrivono il comportamento (ciascuno con le variabili che riguarda). Copy as Markdown copia l'intera spiegazione negli appunti, pronta da incollare in un prompt di Task. Maggiori informazioni in Contract Explorer & App Flow.

Abilitarlo e disabilitarlo per progetto

Si tratta di un unico tag <script> condizionale aggiunto alla shell HTML condivisa del progetto, mostrato solo al di fuori di Production, con un attributo data-project="<your-project-id>" affinché il pannello punti automaticamente al progetto giusto.

Blazor Server (.NET 8+)

In App.razor, iniettare IWebHostEnvironment e proteggere il tag script con IsProduction():

@inject IWebHostEnvironment env

@if (!env.IsProduction())
{
    <script src="http://localhost:3333/aitm-dev-panel.js" data-project="your-project-id"></script>
}

ASP.NET Core Razor Pages

Stesso schema — @inject IWebHostEnvironment env più la stessa protezione IsProduction() — collocato nel _Layout.cshtml condiviso, usando lo stesso blocco di codice riportato sopra.

Node / Express / TypeScript

Proteggerlo con process.env.NODE_ENV nel template che genera la shell HTML:

{process.env.NODE_ENV !== 'production' &&
  '<script src="http://localhost:3333/aitm-dev-panel.js" data-project="your-project-id"></script>'}

Per disabilitarlo, rimuovere il tag script condizionale oppure eseguire semplicemente l'applicazione in Production — la protezione lo nasconde automaticamente senza dover toccare il tag.