Dieses Kapitel ist ein visueller Leitfaden zu den beiden Graphansichten von AITM: dem Contract Explorer (eine Karte aller Behavioral Contracts eines Projekts) und dem App Flow (eine Karte, die zeigt, wie ein bestimmtes Anwendungselement mit allem anderen zusammenhängt). Es erklärt, was jeder Graph zeigt, wie Knoten, Farben und Verbindungslinien zu lesen sind, was die Legende bedeutet und wofür beide Ansichten tatsächlich gedacht sind.

Contract Explorer & App Flow

Wer noch nicht weiß, was ein Contract oder der Knowledge Graph ist, liest zuerst „Contracts, Knowledge Graph & Hints“. Dieses Kapitel baut darauf auf und konzentriert sich ausschließlich auf die Navigation in den beiden Visualisierungen.

Contract Explorer — die Contract-Karte des Projekts

Wofür er gedacht ist: Der Contract Explorer ist ein interaktiver Graph aller Behavioral Contracts eines Projekts — der festgehaltenen Fakten darüber, wie sich jeder Teil des Codes verhält. Auf einem einzigen Bildschirm ist zu sehen, wie viel Wissen AITM über das Projekt besitzt, wie gut es durch Tests abgedeckt ist, welche Module am größten sind und wie Contracts mit Dateien, Variablen und Dokumentation verbunden sind. Er ist der schnellste Weg, die Frage „Was weiß AITM über mein Projekt?“ zu beantworten — und zu erkennen, wo die Schwachstellen liegen (ungetestete oder fehlschlagende Contracts).

Wo er zu finden ist: Im Projektbereich auf den Unter-Tab Contracts klicken (die Unter-Tabs des Projekts sind Develop, Testing, Archive, Setting, Optimize, Contracts, Graph und Multi Graph). Der benachbarte Unter-Tab Graph zeichnet den Code-Graphen des Projekts, und Multi Graph zeichnet ihn für alle Projekte des Tabs gemeinsam (er wird nur angezeigt, wenn der Tab mehr als ein Projekt enthält).

Was auf dem Bildschirm zu sehen ist

Der Bildschirm besteht aus vier Hauptbereichen:

• Obere Leiste — Datensatz-Tabs, zusammenfassende Statistiken und Aktionsschaltflächen.
• Linke Seitenleiste — Suche, Modulfilter und die Contract-Liste.
• Hauptbereich mit dem Graphen — der interaktive Graph (Zoomen mit dem Mausrad, Verschieben durch Ziehen, Knoten lassen sich frei verschieben).
• Legende (Overlay-Panel unten links im Graphen) — erklärt Knotenfarben und Linientypen.

Obere Leiste — Tabs und Statistiken

Darstellungsebenen — Module View vs. All Contracts

Über dem Graphen befindet sich ein Umschalter für die Detailebene:

• Module View (Standard bei großen Projekten, ab 500 Contracts) — jeder Knoten ist ein ganzes Modul (z. B. „AI Chat“, „Backup Service“). Die Blasengröße spiegelt die Anzahl der Contracts im Modul wider; Linien zwischen Modulen bedeuten, dass sie Quelldateien gemeinsam nutzen. Dies ist die „Vogelperspektive“ — der ideale Einstieg.
• Ein Klick auf ein Modul führt in die Module Detail-Ansicht — der Graph zeigt dann die einzelnen Contracts des gewählten Moduls.
• All Contracts — der vollständige Graph aller Contracts auf einmal. Bei großen Projekten ist er aus Performance-Gründen auf 500 Knoten begrenzt (ein Badge zeigt die Anzahl, mit einem Link „Show all“, um die Begrenzung bewusst aufzuheben).

Oben rechts im Graphen befindet sich außerdem ein Renderer-Umschalter: SVG, Sigma (Standard — WebGL, bewältigt große Graphen), 3D, Cosmo und deck.gl. Er ändert nicht die Funktionalität, sondern nur die Art, wie der Graph gezeichnet wird — ruckelt der Graph bei einem großen Projekt, empfiehlt sich Sigma.

Den Graphen lesen — Knoten

Jeder Knoten (Kreis) steht für eine Entität. Die Farbe verrät den Typ — und bei Contracts gleichzeitig den Teststatus:

Ein größerer Knoten = eine bedeutsamere Entität (ein Modul mit mehr Contracts, ein Danger-Zone-Contract usw.).

Den Graphen lesen — Linien (Beziehungen)

Linien zwischen Knoten bedeuten „diese beiden Dinge hängen zusammen“. Der Beziehungstyp ist im Linienstil kodiert:

Praktisches Lesen: Durchgezogene Linien = Beziehungen im Code, gestrichelte Linien = Beziehungen über die Dokumentation. Eine gestrichelte Linie, die von einem Contract wegführt, bedeutet, dass dazu geschriebene Dokumentation existiert — ein Klick auf den orangefarbenen Knoten öffnet sie direkt in der App.

Legende

Die Legende (Panel unten links im Graphen) fasst genau das oben Beschriebene zusammen — Knotenfarben und Verbindungstypen. Für die drei Contract-Zustände zeigt sie zusätzlich Live-Zähler und Prozentwerte (z. B. Tested (passing) 4/2403 (0%)): wie viele Contracts der aktuell angezeigten Menge sich in welchem Zustand befinden. Die Zahlen werden mit dem aktiven Filter neu berechnet — in der Module View beziehen sie sich auf die Module auf dem Bildschirm, nach dem Hineinzoomen in ein Modul auf dessen Contracts.

Linke Seitenleiste

• Search — Volltextsuche über Contract-IDs, Verhaltensbeschreibungen, Dateien und Variablen.
• Filters / Groups — wechselt zwischen dem Modulfilter (Schaltflächen mit Modulnamen; All hebt den Filter auf) und einem gruppierten Baum.
• Contract-Liste (unten) — füllt sich mit den Contracts des gewählten Moduls. Jede Zeile hat einen farbigen Punkt mit derselben Semantik wie die Graphknoten (grün/rot/bernsteinfarben) sowie ein Symbol für Contracts in einer Danger Zone (Stellen, an denen eine kleine Änderung in der Vergangenheit überproportionalen Schaden verursacht hat).

Contract-Detail

Ein Klick auf einen Contract (im Graphen oder in der Liste) öffnet das Contract-Detailfenster:

Am oberen Rand des Details befinden sich zwei wichtige Schaltflächen:

• Assembled doc — öffnet das vollständige zusammengesetzte Dokument zum Contract.
• Flow — springt direkt in die App Flow-Ansicht (siehe unten), zentriert auf die erste Variable des Contracts. Dies ist die Brücke zwischen den beiden Visualisierungen: von „was gilt“ (dem Contract) zu „wie es sich in die App einfügt“ (dem Flow).

App Flow — die Beziehungskarte eines Elements

Wofür er gedacht ist: Während der Contract Explorer das Projekt von oben zeigt, beantwortet der App Flow die Frage „Wie hängt dieses eine bestimmte Element mit dem Rest der Anwendung zusammen?“. Zu sehen ist jede Variable der Kommunikationssprache, die an das Element angrenzt — über ihren Namespace, über gemeinsame Contracts, über gemeinsame Dateien und über die UI-Navigation. Er ist das ideale Werkzeug, um die Auswirkung einer Änderung abzuschätzen („Wenn ich das anfasse, was ist noch betroffen?“) und um präzise Task-Prompts zu schreiben.

Wo er zu finden ist:

1. Aus dem Dev Panel — in der laufenden Anwendung ein Element anklicken; sein Detailfenster öffnet sich mit den Tabs Graph | Guide & Flow | App Flow.
2. Aus dem Contract Explorer — über die Schaltfläche Flow im Contract-Detail (siehe oben).

Was auf dem Bildschirm zu sehen ist

• Linke Spalte — die Daten des untersuchten Elements: Name, Beschreibung, Ebene und vor allem die Liste der Contracts, die es regeln (mit ID, Teststatus, Gesundheit, Dateien und Score). Es sind dieselben Informationen wie im Contract Explorer, nur aus der Sicht eines einzelnen Elements.
• Mitte — Graph — ein interaktiver Graph mit dem untersuchten Element in der Mitte und den verwandten Variablen darum herum.
• Rechtes Panel — Filter für Beziehungstypen (Kontrollkästchen) und die Liste der verwandten Variablen, die den Graphen als lesbare Liste widerspiegelt.

Den Graphen lesen — Knoten

Den Graphen lesen — Kantenfarben (Beziehungstypen)

Jede Linie ist danach eingefärbt, warum die Variablen zusammenhängen:

Rechtes Panel — Filter und Liste

Oben befinden sich vier Kontrollkästchen — Namespace, Contract, File, Navigation —, die sowohl den Graphen als auch die Liste filtern. Standardmäßig sind Namespace + Contract aktiviert (die nützlichsten und rauschärmsten Beziehungen); File und Navigation werden aktiviert, wenn Verbindungen über den Code oder über den UI-Ablauf nachverfolgt werden sollen.

Jede Listenzeile zeigt den Variablencode, den Namen und Badges für die Beziehungstypen. Die Schaltfläche (in Prompt einfügen) heftet den Variablencode direkt an den Task-Prompt an, der gerade geschrieben wird — der typische Ablauf lautet daher: das Element in der App finden → seinen App Flow untersuchen → die verwandten Variablen anheften → die Änderung beschreiben. Der KI-Agent erhält dann die exakten Adressen der von der Änderung betroffenen Stellen und muss sie nicht erst suchen.

Legende und Hilfe

Unten links im Graphen befindet sich die Legende, die Knotenstile und Kantenfarben zusammenfasst (genau wie oben beschrieben). Oben rechts liegt die Schaltfläche (?), die ein Hilfe-Popover öffnet, das erklärt, was der App Flow zeigt und wie jeder Beziehungstyp abgeleitet wird:

Guide & Flow — der Business-Logik-Ablauf

Neben dem App Flow hat das Elementdetail einen Tab Guide & Flow. Er erklärt das gewählte Element von oben nach unten in einfachen Schritten — zuerst das UI-Element selbst, dann die Business-Contracts, die sein Verhalten beschreiben (jeweils mit den Variablen, die sie betreffen) — und die Schaltfläche Copy as Markdown kopiert die gesamte Erklärung in die Zwischenablage, bereit zum Einfügen in einen Task-Prompt.

AITM Dev Panel

Was es ist: eine kleine schwebende Werkzeugleiste, die AITM in die Webanwendung eines verwalteten Projekts einschleusen kann. Während die Anwendung im Browser genutzt wird, fungiert das Panel als die Augen von AITM darin: Es erfasst die getaggten UI-Elemente, die es sieht (und baut so die Karte aus Bildschirmen, Schaltflächen und Dialogen des Projekts auf, aus der Contract Explorer und App Flow zeichnen), und es fängt JavaScript-Fehler aus der Browserkonsole ab und sendet sie an AITM, wo sie für das Projekt erscheinen und in Bug-Tasks überführt werden können.

Wie es dorthin gelangt: Das Panel ist ein einzelnes Skript, das vom AITM-Server ausgeliefert und im Entwicklungsmodus in die Seite der Anwendung eingebunden wird. Der New Project Wizard fügt es den von ihm erstellten Webprojekten automatisch hinzu; auch das Dashboard von AITM selbst besitzt es.

Was zu sehen ist: vier Tabs —

• Elements — die angeklickten oder angehefteten Elemente, jeweils mit ihrem Variablencode, den dahinterliegenden Contracts und Dateien sowie Warnungen aus Danger-Zone-Contracts. Overlay hebt alle getaggten Elemente auf der Seite hervor; Pin / One Pin sammeln Elemente für einen Prompt; die Symbole in jeder Zeile kopieren den Code, öffnen das Detail des Elements (Graph, Guide & Flow, App Flow) und entfernen den Pin. Clear Pins leert die Liste.
• Records — die UI-Elemente, die das Panel von der Seite aufgezeichnet hat.
• Errors — in diesem Browser erfasste JavaScript- und Konsolenfehler, mit der Anzahl im Tab-Namen.
• Settings — die eigenen Optionen des Panels.

Das Panel erscheint nur im Entwicklungsmodus und ist für Entwickler und die KI-Agenten gedacht, nicht für die Endnutzer der Anwendung. Die vollständige Dokumentation öffnet sich über das Header-Menü: Help → AITM Dev Panel. Die Schriftgrößen des Panels lassen sich unter Settings → Font & Style anpassen.

Praktische Arbeitsabläufe

Schwachstellen eines Moduls finden: Contracts → Module View → ein Modul anklicken → im Graphen nach bernsteinfarbenen (ungetesteten) und roten (fehlschlagenden) Knoten suchen. Die Legende liefert die Prozentwerte auf einen Blick.

Auswirkung einer Änderung vor dem Anlegen eines Tasks abschätzen: das Element in der App über das Dev Panel finden (oder einen Contract im Contract Explorer samt Schaltfläche Flow) → App Flow → die Beziehungen contract und file aktivieren → alles, was verbunden ist, kann von der Änderung betroffen sein.

Einen präzisen Prompt schreiben: im App Flow die relevanten Variablen mit in den Prompt anheften — der Task spricht dann eine Sprache, die sowohl der Nutzer als auch die KI-Agenten der Pipeline verstehen (die Kommunikationssprache).

Prüfen, ob ein Verhalten dokumentiert ist: im Contract Explorer den gestrichelten Linien eines Contracts folgen — sie führen zu Dokumenten (orangefarbene Knoten), die sich per Klick direkt in der App öffnen.