Tato kapitola je vizuální průvodce dvěma grafovými pohledy AITM: Contract Explorerem (mapa všech behaviorálních kontraktů projektu) a App Flow (mapa vazeb jednoho konkrétního prvku aplikace). Vysvětluje, co jednotlivé grafy znázorňují, jak číst uzly, barvy a čáry mezi nimi, co znamená legenda a k čemu vám oba pohledy v praxi slouží.

Contract Explorer a App Flow

Pokud ještě nevíte, co je kontrakt nebo znalostní graf, přečtěte si nejdřív kapitolu Kontrakty, znalostní graf a hinty. Tato kapitola na ni navazuje a soustředí se čistě na to, jak se v obou vizualizacích orientovat.

Contract Explorer — mapa kontraktů projektu

K čemu slouží: Contract Explorer je interaktivní graf všech behaviorálních kontraktů projektu — tedy uložených faktů o tom, jak se která část vašeho kódu chová. Na jedné obrazovce vidíte, kolik znalostí AITM o projektu má, jak dobře jsou pokryté testy, které moduly jsou největší a jak jsou kontrakty provázané se soubory, proměnnými a dokumentací. Je to nejrychlejší způsob, jak zjistit "co všechno AITM o mém projektu ví" — a kde jsou slabá místa (netestované nebo padající kontrakty).

Kde ho najdete: v panelu projektu klikněte na sub-záložku Contracts (sub-záložky projektu jsou Develop, Testing, Archive, Setting, Optimize, Contracts, Graph a Multi Graph). Sousední sub-záložka Graph kreslí graf kódu projektu a Multi Graph ho kreslí pro všechny projekty tabu dohromady (zobrazuje se jen tehdy, má-li tab více projektů).

Co vidíte na obrazovce

Obrazovka má čtyři hlavní části:

• Horní lišta — záložky datových sad, souhrnné statistiky a akční tlačítka.
• Levý sidebar — vyhledávání, filtry podle modulů a seznam kontraktů.
• Hlavní plocha s grafem — interaktivní graf (zoom kolečkem, posun tažením, uzly lze přetahovat).
• Legenda (překryvný panel vlevo dole v grafu) — vysvětlivky barev uzlů a typů čar.

Horní lišta — záložky a statistiky

Úrovně zobrazení — Module View vs. All Contracts

Nad grafem je přepínač úrovně detailu:

• Module View (výchozí u velkých projektů, nad 500 kontraktů) — každý uzel je celý modul (např. "AI Chat", "Backup Service"). Velikost bubliny odpovídá počtu kontraktů v modulu; čáry mezi moduly znamenají, že moduly sdílejí zdrojové soubory. Je to "letecký pohled" — ideální start.
• Kliknutím na modul se zanoříte do Module Detail — graf ukáže jednotlivé kontrakty vybraného modulu.
• All Contracts — úplný graf všech kontraktů najednou. U velkých projektů je z výkonnostních důvodů omezen na 500 uzlů (odznak s počtem a odkazem "Show all" umožňuje limit vědomě obejít).

V pravém horním rohu grafu je navíc přepínač vykreslovacího enginu: SVG, Sigma (výchozí — WebGL, zvládá velké grafy), 3D, Cosmo a deck.gl. Na funkci nemá vliv, mění jen způsob vykreslení — pokud graf na velkém projektu "seká", zvolte Sigma.

Jak číst graf — uzly

Každý uzel (kolečko) je jedna entita. Typ poznáte podle barvy — a u kontraktů barva zároveň říká stav testů:

Větší uzel = významnější entita (modul s více kontrakty, kontrakt v danger zóně apod.).

Jak číst graf — čáry (vazby)

Čáry mezi uzly znamenají "tyto dvě věci spolu souvisejí". Typ vztahu poznáte podle stylu čáry:

Praktické čtení: plné čáry = vazby v kódu, čárkované čáry = vazby přes dokumentaci. Když od kontraktu vede čárkovaná čára, znamená to, že o něm existuje psaná dokumentace — kliknutím na oranžový uzel ji otevřete přímo v aplikaci.

Legenda

Legenda (panel vlevo dole v grafu) shrnuje přesně to, co je popsáno výše — barvy uzlů a typy spojení. Navíc u tří stavů kontraktů ukazuje živá čísla a procenta (např. Tested (passing) 4/2403 (0%)): kolik kontraktů z aktuálně zobrazené množiny je v jakém stavu. Čísla se přepočítávají podle aktivního filtru — v Module View se vztahují k modulům na obrazovce, po zanoření do modulu k jeho kontraktům.

Levý sidebar

• Search — fulltextové hledání podle ID kontraktu, popisu chování, souborů i proměnných.
• Filters / Groups — přepínač mezi filtrem podle modulů (tlačítka s názvy modulů; All zruší filtr) a seskupeným stromem.
• Seznam kontraktů (dole) — po výběru modulu se naplní jeho kontrakty. Každý řádek má barevnou tečku se stejnou sémantikou jako uzly grafu (zelená/červená/okrová) a případně ikonu pro kontrakty v danger zóně (místa, kde malá změna historicky způsobila velké škody).

Detail kontraktu

Kliknutím na kontrakt (v grafu nebo v seznamu) se otevře detailní okno kontraktu:

Nahoře v detailu jsou dvě důležitá tlačítka:

• Assembled doc — otevře kompletní sestavený dokument ke kontraktu.
• Flow — přeskočí rovnou do App Flow pohledu (viz níže) se středem v první proměnné kontraktu. To je můstek mezi oběma vizualizacemi: od "co platí" (kontrakt) k "jak to zapadá do aplikace" (flow).

App Flow — mapa vazeb jednoho prvku

K čemu slouží: zatímco Contract Explorer ukazuje projekt shora, App Flow odpovídá na otázku "jak tento jeden konkrétní prvek souvisí se zbytkem aplikace?". Uvidíte všechny proměnné komunikačního jazyka, které s prvkem sousedí — přes jmenný prostor, přes společné kontrakty, přes sdílené soubory i přes navigaci v UI. Je to ideální nástroj pro odhad dopadu změny ("když sáhnu sem, čeho se to dotkne?") a pro psaní přesných promptů do tasků.

Kde ho najdete:

1. Z Dev Panelu — v běžící aplikaci klikněte na prvek, otevře se okno detailu prvku se záložkami Graph | Guide & Flow | App Flow.
2. Z Contract Exploreru — tlačítkem Flow v detailu kontraktu (viz výše).

Co vidíte na obrazovce

• Levý sloupec — data zkoumaného prvku: název, popis, vrstva a hlavně seznam kontraktů, které jej řídí (s ID, stavem testů, zdravím, soubory a skóre). Je to stejná informace jako v Contract Exploreru, jen z pohledu jednoho prvku.
• Střed — graf — interaktivní graf se zkoumaným prvkem uprostřed a souvisejícími proměnnými okolo.
• Pravý panel — filtry typů vztahů (checkboxy) a seznam souvisejících proměnných se stejným obsahem jako graf, ale v podobě čitelného seznamu.

Jak číst graf — uzly

Jak číst graf — barvy hran (typy vztahů)

Každá čára má barvu podle toho, proč spolu proměnné souvisejí:

Pravý panel — filtry a seznam

Nahoře jsou čtyři checkboxy — Namespace, Contract, File, Navigation — které filtrují graf i seznam. Ve výchozím stavu jsou zapnuté Namespace + Contract (nejužitečnější a nejméně hlučné vztahy); File a Navigation si zapnete, když potřebujete stopovat vazby přes kód nebo tok UI.

Každý řádek seznamu ukazuje kód proměnné, název a odznaky typů vztahů, kterými s prvkem souvisí. Tlačítko (vložit do promptu) u řádku připne kód proměnné rovnou do rozepsaného promptu tasku — takže typický pracovní postup je: najdi prvek v aplikaci → prohlédni si jeho App Flow → připni související proměnné → popiš změnu. AI agent pak dostane přesné adresy míst, kterých se změna týká, a nemusí je hledat.

Legenda a nápověda

Vlevo dole v grafu je legenda shrnující styly uzlů a barvy hran (přesně jak je popsáno výše). Vpravo nahoře je tlačítko (?), které otevře nápovědu s vysvětlením, co App Flow zobrazuje a jak se jednotlivé typy vztahů odvozují:

Guide & Flow — tok business logiky

Vedle App Flow má detail prvku záložku Guide & Flow. Vysvětluje vybraný prvek shora dolů ve srozumitelných krocích — samotný prvek UI a poté business kontrakty, které popisují jeho chování (každý s proměnnými, kterých se týká) — a tlačítko Copy as Markdown celé vysvětlení zkopíruje do schránky, připravené k vložení do promptu tasku.

AITM Dev Panel

Co to je: malá plovoucí lišta, kterou AITM umí vložit do webové aplikace spravovaného projektu. Zatímco aplikaci používáte v prohlížeči, panel funguje jako oči AITM uvnitř ní: zaznamenává označené prvky UI, které vidí (a staví tak mapu obrazovek, tlačítek a dialogů projektu, ze které čerpá Contract Explorer i App Flow), a zachytává chyby JavaScriptu z konzole prohlížeče a posílá je do AITM, kde se u projektu zobrazí a lze z nich udělat bugové tasky.

Jak se tam dostane: panel je jeden skript, který poskytuje váš AITM server a který je ve vývojovém režimu vložen do stránky aplikace. Průvodce New Project Wizard ho do webových projektů, které vytváří, přidává automaticky; má ho i samotný dashboard AITM.

Co uvidíte: čtyři záložky —

• Elements — prvky, na které jste klikli nebo které jste připnuli, každý s kódem proměnné, kontrakty a soubory za ním a s varováními z danger-zone kontraktů. Overlay zvýrazní všechny označené prvky na stránce; Pin / One Pin sbírají prvky do promptu; ikony na řádku zkopírují kód, otevřou detail prvku (Graph, Guide & Flow, App Flow) a odstraní připnutí. Clear Pins seznam vyprázdní.
• Records — prvky UI, které panel ze stránky zaznamenal.
• Errors — chyby JavaScriptu a konzole zachycené v tomto prohlížeči, s počtem v názvu záložky.
• Settings — vlastní volby panelu.

Panel se zobrazuje jen ve vývojovém režimu a je určen vám a AI agentům, ne koncovým uživatelům vaší aplikace. Úplnou dokumentaci otevřete z menu hlavičky: Help → AITM Dev Panel. Velikosti písma panelu lze upravit v Settings → Font & Style.

Praktické postupy

Najít slabá místa modulu: Contracts → Module View → klik na modul → v grafu hledejte okrové (netestované) a červené (padající) uzly. Legenda vám řekne procenta na první pohled.

Odhadnout dopad změny před zadáním tasku: najděte prvek v aplikaci Dev Panelem (nebo kontrakt v Contract Exploreru a tlačítko Flow) → App Flow → zapněte vztahy contract a file → vše, co je propojené, se vaší změny může dotknout.

Napsat přesný prompt: v App Flow připněte relevantní proměnné do promptu — task pak mluví jazykem, kterému rozumí jak vy, tak AI agenti pipeline (komunikační jazyk).

Zjistit, jestli je chování zdokumentované: v Contract Exploreru sledujte čárkované čáry od kontraktu — vedou k dokumentům (oranžové uzly), které lze otevřít kliknutím přímo v aplikaci.