ロードマップ

Vantage がこれから向かう方向。エージェントに「目」と「記憶」を与えるための検討中のアイデアと、意図的にやらないこと。

Vantage がこれから向かおうとしている方向をまとめたページです。すでに動くものについては変更履歴を、いま書けることについては各ガイドを参照してください。

前提 ― 誰のためのフレームワークか

Vantage は AI コーディングエージェントを一級市民として設計されています。人間が読みやすいことより、エージェントが間違えずに書けること・自分で検証できることを優先します。設定ファイルを禁止しているのも、UI キットとデータ層をフレームワークが所有しているのも、vantage docs / vantage search が CLI にあるのも、すべて同じ理由です ― エージェントの窓口は CLI であり、判断の余地は規約で潰す。

この視点で今の Vantage を眺めると、支援が厚いのは 2 箇所です。

書く前 ― vantage docs / vantage search / vantage add skill / AGENTS.md
静的に検証する ― vantage check / vantage routes

そして、大きな空白が 1 つあります。

エージェントは、自分が書いた画面を見られない。

vantage dev のブラウザ → ターミナル転送（console.warn / console.error / 未捕捉エラー）は、その穴に開いた最初の小さな窓です。以下のアイデアは、ほとんどがこの穴を埋めるためのものです。

設計中

要素インスペクタ ― 画面からエージェントへ

ブラウザ上の要素をホバー・クリックで選び、「これを直して」とエージェントに渡す仕組み。バイブコーディングツールでは定番の体験ですが、これをアプリ側の実装ではなく フレームワークの機能として持ちます。

構成は 3 つです。

開発時だけ JSX にソース位置を注入する ― data-vtg="src/sales/index.tsx:42:7" とコンポーネント名。Vantage は UI キットを自分で所有していて、その大半が {...props} をそのまま DOM へ渡すため、<DataTable /> のような要素に付けた属性も実際の DOM まで届きます。
開発時だけのオーバーレイ ― 要素の輪郭とラベルを描き、選択結果を送出する。
vantage select ― 選択されたものをエージェントが CLI から受け取る。 --json と、選択されるまで待つ --wait。

本番ビルドでは属性もオーバーレイも完全に落とします（ソースパスがバンドルに残るのは情報漏洩そのものなので）。

Squadbase Editor のようにプレビューを iframe で埋め込むツール向けには、選択結果を postMessage でも流し、オーバーレイの見た目自体をツール側が乗っ取れるようにする方針です。 Vantage が持つのは「位置情報の正しさ」と最小限の既定 UI までで、体験の作り込みはツール側に譲ります。

検討中 ― エージェントに「目」を与える

`vantage snap` ― ページの構造化スナップショット

各ルートをヘッドレスで描画し、画像ではなく構造化テキストで返すコマンド。

{
  "route": "/sales",
  "state": "ready",                    // loading | ready | error | empty
  "regions": [
    { "type": "kpi",   "labels": ["今月の売上", "前月比"], "values": ["¥12.4M", "+8.2%"] },
    { "type": "chart", "component": "EChart",   "series": ["売上", "目標"], "points": 12 },
    { "type": "table", "component": "DataTable", "columns": ["日付", "店舗", "金額"], "rows": 0 }
  ],
  "console": [{ "level": "warn", "text": "…" }],
  "network": [{ "url": "/api/sales", "status": 500 }]
}

エージェントにとっては、スクリーンショットの画像よりこの形のほうが桁違いに読めます。「表が 0 行」「API が 500 を返している」は、人間がスクリーンショットを貼るまで誰も気づかない 種類の失敗です。

regions に意味づけができるのは、Vantage が UI キット・ルーティング・データ層をすべて所有しているからです。汎用のブラウザ自動化ツールには出せない粒度で、ここが最大の勝ち筋だと考えています。

`vantage check --runtime` ― 描画して初めてわかる診断

いまの診断はソースを読むだけの静的なものです。実際に描画しないと分からない失敗を、同じコマンド・同じ終了コードに載せます。

クエリが pending のまま抜けず、ローディング表示から戻らない
データ取得は成功しているのに表やチャートが空
描画中に叩いた API が 4xx / 5xx を返した
未処理の Promise リジェクション
要素が親の幅をはみ出している

狙いは「エージェントの自己検証ループが終了コードで閉じる」ことです。vantage check が通れば出荷してよい、という一本の線を引きたい。

`vantage dev --agent` ― 構造化イベントストリーム

開発サーバーが、HMR の成否・描画エラー・API のレスポンス・遅いクエリを NDJSON で別チャネルへ出す案。人間向けのターミナル出力は今のままにして、エージェントは追記を読み続けることで 編集した直後に壊れたことを知れるようにします。いまのコンソール転送の自然な延長線です。

検討中 ― エージェントに「記憶」を与える

`definePage` の `intent`

そのページが何のためにあるかをフレームワークが構造として持つ案。

export const page = definePage({
  title: "売上ダッシュボード",
  intent: "店舗別の日次売上を見て、目標未達の店舗を早く見つける",
});

コメントは書き換えの過程で消えますが、これは vantage routes に出てマニフェストに載る構造です。読者は「30 ターン後の自分」や「引き継いだ別のエージェント」。 AGENTS.md や Agent Skills と同じ「フレームワークが記憶の置き場所を規定する」という考え方の、ページ単位版にあたります。

`vantage diff` ― コードの差分ではなくアプリの差分

routes    + /reports/monthly    - /legacy
api       ~ GET /api/sales      (POST が消えた)
render    /sales  表の列 5 → 4  ("担当者" が消えた)
bundle    +11.2 MB

エージェントは自分の変更の副作用を系統的に見落とします。「意図した変更」と「実際に起きた変更」の差を突きつけるためのコマンドです。

`vantage explain <route|file>`

既存のアプリを引き継いだエージェント向けの、逆向きのドキュメント。そのページのルート・使っているコンポーネント・叩いている API・依存している環境変数・親レイアウトを 1 画面にまとめます。 vantage routes --detail の延長ですが、狙いは「ソースを読む代わりになる粒度」で、コンテキストの消費を大きく減らすことです。

検討中 ― そもそも間違えさせない

エラーをドキュメントへの入口にする

Vantage は自分のスタック（TanStack Query・Base UI・ECharts・Hono）を全部知っています。ブラウザのエラーをターミナルへ転送するときに、次の一手を添えることができるはずです。

[console.error] Cannot read properties of undefined (reading 'map')
 > src/sales/index.tsx:42
   ↳ useApiQuery の data は初回 undefined です。`data?.map` にするか
     isLoading で分岐してください → vantage docs data-fetching

エージェントが最もつまずくのは「何を検索すればいいか分からない」場面なので、 エラーが自動的にドキュメントを引く形にします。

設定ファイルの導入 ― vantage.config は作りません。設定を足したくなったら、それは規約かフラグで解けないかをまず疑います。判断の余地はエージェントにとって負債です。
スタックの差し替えを可能にすること ― React・ルーター・データ層・UI キットは Vantage が固定します。差し替えを許した瞬間、ドキュメントも Skill も診断も「相手が何を使っているか分からない」前提になり、上に挙げたアイデアはほぼ全部成立しなくなります。
QueryClient の丸ごと差し替え ― カスタマイズの手段はクエリ単位の上書きです（データ取得を参照）。
汎用のアプリケーションフレームワーク化 ― Vantage はダッシュボードのためのフレームワークです。用途を広げるより、ダッシュボードで踏む地雷を全部踏み抜いておくことに投資します。

フィードバック

上のアイデアの優先順位は、実際に詰まった場所で決めたいと考えています。使っていて「エージェントがここで必ず間違える」「これが分からず手が止まった」という箇所があれば、ぜひ教えてください。