本章は、AITMの2つのグラフビューを視覚的に解説するガイドです。Contract Explorer（プロジェクト内のすべてのBehavioral Contractsのマップ）とApp Flow（特定のアプリケーション要素がほかのすべてとどのように関係するかのマップ）です。各グラフが何を示すのか、ノード・色・接続線の読み方、凡例の意味、そして両ビューが実際に何のためにあるのかを説明します。

Contract Explorer & App Flow

Contractやナレッジグラフがまだよくわからない場合は、先に「Contracts, Knowledge Graph & Hints」をお読みください。本章はその内容を前提とし、2つの可視化の操作方法だけに焦点を当てます。

Contract Explorer — プロジェクトのContractマップ

用途:Contract Explorerは、プロジェクト内のすべてのBehavioral Contractsを表示するインタラクティブなグラフです。Contractとは、コードの各部分がどう動作するかについて保存された事実のことです。1つの画面で、AITMがプロジェクトについてどれだけの知識を持っているか、テストによってどの程度カバーされているか、どのモジュールが最大か、Contractがファイル・変数・ドキュメントとどう結び付いているかが一目でわかります。「AITMはプロジェクトの何を知っているのか」を確認する最速の手段であり、同時に弱点（テストのないContractや失敗しているContract）を見つける場所でもあります。

場所:プロジェクトパネルでContractsサブタブをクリックします（プロジェクトのサブタブは Develop、Testing、Archive、Setting、Optimize、Contracts、Graph、Multi Graph です）。隣のGraphサブタブはプロジェクトのコードグラフを描画し、Multi Graphはタブ内のすべてのプロジェクトをまとめて描画します（タブに複数のプロジェクトがある場合のみ表示されます）。

画面の構成

画面は4つの主要エリアで構成されています。

• 上部バー — データセットのタブ、集計統計、操作ボタン。
• 左サイドバー — 検索、モジュールフィルター、Contract一覧。
• メインのグラフ領域 — インタラクティブなグラフ（マウスホイールでズーム、ドラッグでパン、ノードも自由にドラッグ可能）。
• 凡例（グラフ左下のオーバーレイパネル） — ノードの色と線の種類を説明します。

上部バー — タブと統計

表示レベル — Module View と All Contracts

グラフの上には詳細レベルの切り替えがあります。

• Module View （大規模プロジェクト、Contractが500件を超える場合のデフォルト） — 各ノードはモジュール全体（例：「AI Chat」「Backup Service」）です。バブルの大きさはモジュール内のContract数を表し、モジュール間の線は両者がソースファイルを共有していることを意味します。これが「俯瞰図」であり、最初に見るのに最適です。
• モジュールをクリックするとModule Detailにドリルダウンし、選択したモジュールの個々のContractがグラフに表示されます。
• All Contracts — すべてのContractを一度に表示する完全なグラフです。大規模プロジェクトではパフォーマンスのため500ノードに制限されます（件数がバッジで表示され、「Show all」リンクで意図的に制限を解除できます）。

グラフの右上にはレンダラーの切り替えもあります：SVG、Sigma （デフォルト — WebGLで大規模グラフにも対応）、3D、Cosmo、deck.gl。機能は変わらず、グラフの描画方法だけが変わります。大規模プロジェクトでグラフがカクつく場合は、Sigmaを選んでください。

グラフの読み方 — ノード

各ノード（円）は1つのエンティティを表します。色で種類がわかり、Contractの場合は同時にテストの状態も示します。

ノードが大きいほど重要なエンティティです（Contractの多いモジュール、危険領域のContractなど）。

グラフの読み方 — 線（関係）

ノード間の線は「この2つは関連している」ことを意味します。関係の種類は線のスタイルで表されます。

実際の読み方:実線＝コード上の関係、破線＝ドキュメントを介した関係です。Contractから伸びる破線は、そのContractに書かれたドキュメントが存在することを意味します。オレンジのノードをクリックすると、アプリ内でそのまま開けます。

凡例

凡例（グラフ左下のパネル）は、上記で説明したノードの色と接続の種類をそのまま要約したものです。Contractの3つの状態については、さらにリアルタイムの件数と割合（例：Tested (passing) 4/2403 (0%)）が表示されます。現在表示されている集合のうち、各状態にあるContractの数です。数値はアクティブなフィルターに応じて再計算され、Module Viewでは画面上のモジュールが対象となり、モジュールにドリルダウンした後はそのContractが対象となります。

左サイドバー

• Search — Contract ID、動作説明、ファイル、変数を対象とした全文検索。
• Filters / Groups — モジュールフィルター（モジュール名のボタン。Allでフィルター解除）とグループ化ツリーを切り替えます。
• Contract一覧（下部） — 選択したモジュールのContractが表示されます。各行にはグラフのノードと同じ意味を持つ色付きの点（緑／赤／琥珀）があり、さらに危険領域（小さな変更が過去に不釣り合いな被害をもたらした箇所）にあるContractには アイコンが付きます。

Contractの詳細

Contractを（グラフまたは一覧で）クリックすると、Contract詳細ウィンドウが開きます。

詳細の上部には2つの重要なボタンがあります。

• Assembled doc — Contractの完全な統合ドキュメントを開きます。
• Flow — Contractの最初の変数を中心としたApp Flowビュー（後述）に直接移動します。これが2つの可視化をつなぐ橋渡しです。「何が成り立っているか」（Contract）から「アプリにどう組み込まれているか」（フロー）へと進めます。

App Flow — 1つの要素の関係マップ

用途:Contract Explorerがプロジェクトを上空から見せるのに対し、App Flowは「この特定の要素はアプリケーションの残りの部分とどう関係しているのか」に答えます。その要素の周囲にある共通言語の変数がすべて表示されます — 名前空間、共有されるContract、共有されるファイル、UIナビゲーションによる関係です。変更の影響（「これを触ったら、ほかに何が影響を受けるか」）を見積もるときや、正確なTaskプロンプトを書くときに最適なツールです。

場所:

1. Dev Panelから — 実行中のアプリケーションで要素をクリックすると、詳細ウィンドウがGraph | Guide & Flow | App Flowのタブとともに開きます。
2. Contract Explorerから — Contract詳細の Flowボタンから（上記参照）。

画面の構成

• 左列 — 調査対象の要素のデータ：名前、説明、レイヤー、そして何よりそれを規定するContractの一覧（ID、テスト状態、健全性、ファイル、スコア付き）。Contract Explorerと同じ情報を、1つの要素の視点から見たものです。
• 中央 — グラフ — 調査対象の要素を中心に、関連する変数を周囲に配置したインタラクティブなグラフ。
• 右パネル — 関係の種類のフィルター（チェックボックス）と関連変数の一覧。グラフの内容を読みやすい一覧として映したものです。

グラフの読み方 — ノード

グラフの読み方 — エッジの色（関係の種類）

すべての線は、変数がなぜ関連しているかによって色分けされています。

右パネル — フィルターと一覧

上部にはNamespace、Contract、File、Navigationの4つのチェックボックスがあり、グラフと一覧の両方をフィルターします。デフォルトではNamespace + Contractがオンです（最も有用でノイズの少ない関係）。コードやUIフローを介した接続をたどる必要があるときは、FileとNavigationを有効にしてください。

一覧の各行には、変数コード、名前、関係の種類のバッジが表示されます。（プロンプトに挿入）ボタンは、変数コードを作成中のTaskプロンプトに直接ピン留めします。典型的なワークフローは、アプリで要素を見つける → そのApp Flowを調べる → 関連する変数をピン留めする → 変更内容を記述するです。これにより、AI Agentは変更が関わる場所の正確な住所を受け取り、探し回る必要がなくなります。

凡例とヘルプ

グラフの左下には、ノードのスタイルとエッジの色を要約した凡例があります（上記の説明のとおり）。右上の(?)ボタンはヘルプのポップオーバーを開き、App Flowが何を示すのか、各関係の種類がどのように導出されるのかを説明します。

Guide & Flow — ビジネスロジックのフロー

App Flowの隣には、要素詳細のGuide & Flowタブがあります。選択した要素を、トップダウンで平易な手順として説明します。まずUI要素そのもの、続いてその動作を記述するビジネスContract（それぞれが関わる変数付き）です。Copy as Markdownボタンを押すと、説明全体がクリップボードにコピーされ、そのままTaskプロンプトに貼り付けられます。

AITM Dev Panel

概要:AITMが、管理対象プロジェクトのWebアプリケーションに注入できる小さなフローティングツールバーです。ブラウザでアプリケーションを使用している間、このパネルはアプリ内でのAITMの目として働きます。目にしたタグ付きUI要素を記録し（Contract ExplorerとApp Flowが描画の元にする、画面・ボタン・ダイアログのプロジェクトマップを構築します）、ブラウザコンソールのJavaScriptエラーを取得してAITMに送信します。エラーはプロジェクトに表示され、バグTaskに変換できます。

導入のしかた:パネルはAITMサーバーが配信する1つのスクリプトで、開発モードでアプリケーションのページに組み込まれます。New Project Wizardは、作成するWebプロジェクトに自動的にこれを追加します。AITM自身のDashboardにも組み込まれています。

表示内容:4つのタブがあります —

• Elements — クリックまたはピン留めした要素。それぞれに変数コード、背後にあるContractとファイル、危険領域のContractからの警告が表示されます。Overlayはページ上のタグ付き要素をすべてハイライトし、Pin / One Pinはプロンプト用に要素を収集します。各行のアイコンは、コードのコピー、要素の詳細（Graph、Guide & Flow、App Flow）の表示、ピンの削除を行います。Clear Pinsは一覧を空にします。
• Records — パネルがページから記録したUI要素。
• Errors — このブラウザで取得されたJavaScriptおよびコンソールのエラー。タブ名に件数が表示されます。
• Settings — パネル自体のオプション。

パネルは開発モードでのみ表示され、アプリケーションのエンドユーザーではなく、開発者とAI Agent向けです。完全なドキュメントはヘッダーメニューのHelp → AITM Dev Panelから開けます。パネルのフォントサイズはSettings → Font & Styleで調整できます。

実践的なワークフロー

モジュールの弱点を見つける:Contracts → Module View → モジュールをクリック → グラフ内の 琥珀（テストなし）と 赤（失敗）のノードを探します。凡例で割合が一目でわかります。

Taskを登録する前に変更の影響を見積もる:Dev Panelでアプリ内の要素を見つける（またはContract ExplorerでContractを開いてFlowボタンを押す） → App Flow → contractとfileの関係を有効にする → つながっているものはすべて変更の影響を受ける可能性があります。

正確なプロンプトを書く:App Flowで、関連する変数を ピン留めしてプロンプトに入れます。これによりTaskは、開発者とPipelineのAI Agentの双方が理解できる言葉（共通言語）で語られるようになります。

動作がドキュメント化されているか確認する:Contract Explorerで、Contractから伸びる破線をたどります。破線はドキュメント（オレンジのノード）につながっており、クリックするとアプリ内でそのまま開きます。