AITM no se limita a leer los archivos fuente — construye un modelo estructurado y consultable de lo que el código realmente hace, de modo que la IA deja de adivinar y empieza a comprobar.

Cómo AITM comprende un proyecto

Behavioral Contracts

Cada funcionalidad significativa de la base de código puede capturarse como un Behavioral Contract: una especificación legible por máquina con un id, el módulo al que pertenece, una descripción del comportamiento en una línea, los archivos exactos que toca, una advertencia de zona de peligro y una puntuación de confianza. Los Contracts se almacenan por proyecto en una base de datos SQLite local, y la IA los consulta mediante GraphQL antes de tocar una sola línea de código. Esa es, con diferencia, la razón principal por la que disminuyen las rutas de archivo alucinadas y los métodos inventados — la IA comprueba el Contract en lugar de adivinar.

Los Contracts tampoco se quedan obsoletos: tras cada fusión, el paso Docs del Pipeline vuelve a escanear automáticamente el cambio y actualiza cualquier Contract afectado.

Zonas de peligro

Cada Contract puede llevar una zona de peligro — una advertencia en lenguaje llano sobre el radio de impacto de tocar ese código (por ejemplo, "nunca llamar a esto sin comprobar antes el indicador skip"). La IA lee las zonas de peligro de antemano, de modo que sabe qué NO romper antes de empezar a editar, y no después de que falle una prueba.

El knowledge graph

Tras un único endpoint GraphQL se encuentran diez fuentes de verdad interconectadas sobre el proyecto:

• El árbol de variables (códigos de lógica de negocio BL.*, códigos de interfaz UI.*)
• Behavioral Contracts
• El mapa de elementos DOM
• El Hint Dictionary
• El índice de documentación
• El mapa de código — imports/exports, "god nodes" de alto acoplamiento y comunidades de módulos
• El mapa de pruebas — elemento de interfaz a localizador de Playwright
• Capturas de pantalla
• Errores
• Aristas entre módulos que vinculan todo lo anterior

Una sola consulta puede reunir contexto relacionado de las diez fuentes a la vez, en lugar de que la IA haga grep a ciegas por todo el repositorio.

Onboarding del proyecto

Cuando se importa un proyecto por primera vez, AITM ejecuta un pre-escaneo estático determinista antes de que ninguna IA lo toque: detección de lenguaje y stack, un mapa de código completo, extracción del DOM mediante atributos data-aitm, relleno de variables y referencias a la documentación. Solo después AITM ejecuta opcionalmente pasadas de IA — descubrimiento de arquitectura, minería del historial de git para el acoplamiento de módulos y una pasada profunda por módulo. En resumen: se importa un repositorio y AITM lo mapea antes de que se ejecute el primer Task.

Mapa DOM + Dev Panel

Los elementos reales de la interfaz de la aplicación se etiquetan con atributos data-aitm, cada uno con aristas de efecto de disparo y de disparado por, además de un mapa de rectángulos en píxeles de dónde se sitúa en pantalla. Ese mapa es lo que alimenta selectores E2E fiables y con autorreparación en lugar de frágiles localizadores CSS.

Qué hace el Dev Panel

El Dev Panel es una barra de herramientas JS autocontenida e inyectable (aitm-dev-panel.js) que cualquier proyecto gestionado por AITM puede cargar durante el desarrollo. Es una barra flotante y acoplable que superpone una insignia a cada elemento etiquetado con data-aitm en la aplicación en ejecución: un tooltip al pasar el cursor muestra el código, la etiqueta, la acción y el manejador del elemento, un contador de eventos en vivo sigue contando, un pequeño cuadro de chat/brainstorm permite enviar mensajes a la instancia de AITM directamente desde la aplicación en ejecución, y hay controles de tamaño de fuente y un indicador de estado en línea/fuera de línea del propio AITM. El panel registra las interacciones reales del usuario (click/change/input/mount/unmount) a medida que ocurren y las envía a AITM cada 2 segundos — así AITM mantiene actualizado su mapa de la interfaz.

El panel tiene cuatro pestañas: Elements (los elementos en los que se hizo clic o que se fijaron, con su código de variable, Contracts, archivos y advertencias de zona de peligro; los botones Overlay, Pin / One Pin y Clear Pins), Records (los elementos de interfaz registrados), Errors (errores de JavaScript y de consola capturados, que pueden convertirse en Tasks de error en AITM) y Settings. Su documentación completa se abre en AITM desde el menú de la cabecera: Help → AITM Dev Panel.

Si AITM se ejecuta en una máquina distinta de este sitio web, se establece AitmServer:PublicBaseUrl en la configuración (p. ej., http://192.168.1.50:3333) — la dirección desde la que el navegador carga aitm-dev-panel.js. Vacío significa http://<page host>:<Port>. La dirección de AITM también puede cambiarse más adelante en la pestaña Settings del panel.

Guide & Flow — el flujo de lógica de negocio de un elemento

Desde la fila de un elemento en el Dev Panel se abre su detalle con las pestañas Graph, Guide & Flow y App Flow. Guide & Flow explica el elemento seleccionado de arriba abajo en pasos sencillos — el propio elemento de la interfaz y después los Contracts de negocio que describen su comportamiento (cada uno con las variables que le conciernen). Copy as Markdown copia toda la explicación al portapapeles, lista para pegarla en el prompt de un Task. Más información en Contract Explorer & App Flow.

Habilitarlo y deshabilitarlo por proyecto

Es una única etiqueta <script> condicional añadida a la estructura HTML compartida del proyecto, mostrada solo fuera de Production, con un atributo data-project="<your-project-id>" para que el panel apunte automáticamente al proyecto correcto.

Blazor Server (.NET 8+)

En App.razor, se inyecta IWebHostEnvironment y se protege la etiqueta 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

El mismo patrón — @inject IWebHostEnvironment env más la misma protección IsProduction() — colocado en el _Layout.cshtml compartido, con el mismo bloque de código de arriba.

Node / Express / TypeScript

Se protege con process.env.NODE_ENV en la plantilla que renderiza la estructura HTML:

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

Para deshabilitarlo, se elimina la etiqueta script condicional, o simplemente se ejecuta la aplicación en Production — la protección lo oculta automáticamente sin necesidad de tocar la etiqueta.