@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/ja-JP/getting-started.mdx

@@ -152,13 +152,43 @@ pnpm dev
 その 1 つのアクションは、チャット UI、CLI、HTTP、MCP、A2A からアクセスできるようになりました。
 スケジュールされたジョブ、および webhooks。一度定義すれば、どこからでも呼び出すことができます。
 
-```an-diagram title="1 つのアクションであらゆる面に対応" summary="単一の defineAction ファイルは、追加の配線なしですべてのコンシューマに展開されます。"
-{
-  "html": "<div class=\"diagram-fan\"><div class=\"diagram-box\" data-rough>defineAction</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-surfaces\"><span class=\"diagram-pill\">チャット UI</span><span class=\"diagram-pill\">CLI</span><span class=\"diagram-pill\">HTTP</span><span class=\"diagram-pill\">MCP</span><span class=\"diagram-pill\">A2A</span><span class=\"diagram-pill\">スケジュール済みジョブ</span><span class=\"diagram-pill\">Webhooks</span></div></div>",
-  "css": ".diagram-fan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fan .diagram-surfaces{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}.diagram-fan .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1e9l236" title={"1 つのアクションであらゆる面に対応"} summary={"単一の defineAction ファイルは、追加の配線なしですべてのコンシューマに展開されます。"}>
+
+```html
+<div class="diagram-fan">
+  <div class="diagram-box" data-rough>defineAction</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-surfaces">
+    <span class="diagram-pill">チャット UI</span
+    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
+    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
+    ><span class="diagram-pill">スケジュール済みジョブ</span
+    ><span class="diagram-pill">Webhooks</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-fan {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fan .diagram-surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 420px;
+}
+.diagram-fan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 状態は組み込まれています
 
 ヘッドレスはステートレスを意味するものではありません。 Actions、セッション、アプリケーションの状態、スレッド、

package/docs/content/locales/ja-JP/harness-agents.mdx

@@ -23,13 +23,54 @@ search: "ハーネス エージェント AgentHarness ai-sdk HarnessAgent Claude
 独自のループをエンドツーエンドで実行するため、Agent-Native はそれを単一ではなくセッションとして駆動します
 モデル呼び出し。
 
-```an-diagram title="ハーネスはそのループを所有します。 Agent-Native がセッションを駆動します" summary="AgentHarness 基板 creates/resumes はネイティブ セッションであり、そのイベントを通常のトランスクリプトにストリーミングし、ターン間で SQL のresumeState を保持します。"
-{
-  "html": "<div class=\"diagram-harness\"><div class=\"diagram-box\" data-rough><strong>AgentHarness substrate</strong><small class=\"diagram-muted\">@agent-native/core/agent/harness</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Native harness loop</strong><small class=\"diagram-muted\">Claude Code · Codex · Pi — own tools, sandbox, compaction</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">events &rarr; transcript</div><div class=\"diagram-pill ok\">resumeState &rarr; SQL session</div></div></div>",
-  "css": ".diagram-harness{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-harness .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-harness .diagram-arrow{font-size:22px;line-height:1}.diagram-harness .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1hwvd6l" title={"ハーネスはそのループを所有します。 Agent-Native がセッションを駆動します"} summary={"AgentHarness 基板 creates/resumes はネイティブ セッションであり、そのイベントを通常のトランスクリプトにストリーミングし、ターン間で SQL のresumeState を保持します。"}>
+
+```html
+<div class="diagram-harness">
+  <div class="diagram-box" data-rough>
+    <strong>AgentHarness substrate</strong
+    ><small class="diagram-muted">@agent-native/core/agent/harness</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Native harness loop</strong
+    ><small class="diagram-muted"
+      >Claude Code · Codex · Pi — own tools, sandbox, compaction</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">events &rarr; transcript</div>
+    <div class="diagram-pill ok">resumeState &rarr; SQL session</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-harness {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-harness .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-harness .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-harness .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## どのコーディング ドキュメントが必要ですか? {#which-doc}
 
 | あなたがしたいのは…                                                                             | 使用                                         |
@@ -213,13 +254,43 @@ const run = startAgentHarnessRun({
 は **不透明** — Agent-Native は保管して返却しますが、検査や
 それを解釈します。
 
-```an-diagram title="ターン、プロセス、デプロイをまたいで再開" summary="各ターンは、不透明なresumeStateをSQLに切り離します。次のターンでは、チャット履歴を再生する代わりに、それが createSession にフィードバックされます。"
-{
-  "html": "<div class=\"diagram-resume\"><div class=\"diagram-node\" data-rough>ターンN<br><small class=\"diagram-muted\">streamTurn</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>detach &rarr; resumeState<br><small class=\"diagram-muted\">不透明 · SQL harnessセッション</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>ターンN+1<br><small class=\"diagram-muted\">createSession.resumeState</small></div></div>",
-  "css": ".diagram-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-resume .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-17mj1y9" title={"ターン、プロセス、デプロイをまたいで再開"} summary={"各ターンは、不透明なresumeStateをSQLに切り離します。次のターンでは、チャット履歴を再生する代わりに、それが createSession にフィードバックされます。"}>
+
+```html
+<div class="diagram-resume">
+  <div class="diagram-node" data-rough>
+    ターンN<br /><small class="diagram-muted">streamTurn</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    detach &rarr; resumeState<br /><small class="diagram-muted"
+      >不透明 · SQL harnessセッション</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    ターンN+1<br /><small class="diagram-muted"
+      >createSession.resumeState</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-resume {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-resume .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```ts
 import {
   getLatestAgentHarnessSessionForThread,

package/docs/content/locales/ja-JP/human-approval.mdx

@@ -80,13 +80,59 @@ description: "重要なアクションが実行される前にエージェント
 
 ## エンドツーエンド {#flow}
 
-```an-diagram title="承認の中断" summary="ゲート呼び出しは、run() が起動される前にターンを一時停止します。承認により、コールのキーを保持するターンが再発行されます。そうして初めて副作用が起こります。"
-{
-  "html": "<div class=\"diagram-approve\"><div class=\"diagram-box\" data-rough>エージェントがsend-emailを呼び出す</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel warn\" data-rough><strong>Gateはtrue、呼び出しは未承認</strong><small class=\"diagram-muted\">loop emits tool_start + approval_required { tool, input, approvalKey }</small><span class=\"diagram-pill warn\">turn pauses &mdash; run() did NOT execute</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>人がチャットで承認をクリック<br><small class=\"diagram-muted\">クライアントがapprovedToolCalls: [approvalKey]でターンを再発行</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel ok\" data-rough><span class=\"diagram-pill ok\">Gate sees the key &rarr; run() executes &rarr; email sends</span></div></div>",
-  "css": ".diagram-approve{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-approve .diagram-panel{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;text-align:center}.diagram-approve .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-184e1ec" title={"承認の中断"} summary={"ゲート呼び出しは、run() が起動される前にターンを一時停止します。承認により、コールのキーを保持するターンが再発行されます。そうして初めて副作用が起こります。"}>
+
+```html
+<div class="diagram-approve">
+  <div class="diagram-box" data-rough>エージェントがsend-emailを呼び出す</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel warn" data-rough>
+    <strong>Gateはtrue、呼び出しは未承認</strong
+    ><small class="diagram-muted"
+      >loop emits tool_start + approval_required { tool, input, approvalKey
+      }</small
+    ><span class="diagram-pill warn"
+      >turn pauses &mdash; run() did NOT execute</span
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    人がチャットで承認をクリック<br /><small class="diagram-muted"
+      >クライアントがapprovedToolCalls: [approvalKey]でターンを再発行</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel ok" data-rough>
+    <span class="diagram-pill ok"
+      >Gate sees the key &rarr; run() executes &rarr; email sends</span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-approve {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-approve .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+}
+.diagram-approve .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 フレームワークにおけるこのゲートの標準的な (そして意図的にまれな) 使用法は、メール テンプレートの `send-email` アクションです。これにより、`needsApproval: true` が設定されるため、エージェントは自由にドラフトしてキューに入れることができますが、特定の送信を人間が承認しないと実際にメッセージを送信することはできません。
 
 ## 関連

package/docs/content/locales/ja-JP/key-concepts.mdx

@@ -17,13 +17,68 @@ description: "エージェント ネイティブ アプリの仕組み: 最初
 >
 > **コンピュータ** — データベース、ブラウザ、コード実行。エージェントは SQL および組み込みツールと直接連携します。 MCP サーバーはオプションのアドオンであり、基盤ではありません。
 
-```an-diagram title="エージェント、アプリケーション、およびコンピュータ" summary="3 つのレイヤーが 1 つの共有 SQL ストア上で連携します。エージェントとアプリケーションは両方とも同じデータの読み取りと書き込みを行います。"
-{
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">データを読み書きし、actionsを実行し、コードを変更</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">actionのみ、チャット、コントロールプレーン、または完全なReact UI画面</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQLデータベース · browser · code execution</small></div></div>",
-  "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
+<Diagram id="doc-block-1ngou9i" title={"エージェント、アプリケーション、およびコンピュータ"} summary={"3 つのレイヤーが 1 つの共有 SQL ストア上で連携します。エージェントとアプリケーションは両方とも同じデータの読み取りと書き込みを行います。"}>
+
+```html
+<div class="diagram-arch">
+  <div class="diagram-row">
+    <div class="diagram-card">
+      <span class="diagram-pill accent">Agent</span
+      ><small class="diagram-muted"
+        >データを読み書きし、actionsを実行し、コードを変更</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Application</span
+      ><small class="diagram-muted"
+        >actionのみ、チャット、コントロールプレーン、または完全なReact
+        UI画面</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">
+    &darr;&nbsp;&uarr;
+  </div>
+  <div class="diagram-box" data-rough>
+    Computer<br /><small class="diagram-muted"
+      >SQLデータベース · browser · code execution</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-arch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-arch .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-arch .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 220px;
+}
+.diagram-arch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-arch .diagram-box {
+  text-align: center;
+  padding: 12px 18px;
 }
 ```
 
+</Diagram>
+
 ヘッドレス アプリは、`pnpm agent` を使用してフォルダーから同じ本番アプリ エージェント ループを実行できますが、UI アプリは埋め込みエージェント パネルをマウントし、`pnpm dev` を使用してローカルで実行します。クラウドでは、Builder.io はマネージド フレーム (アプリの隣にエージェントをホストする環境) を提供し、チーム向けのコラボレーション、ビジュアル編集、マネージド インフラストラクチャを備えています。
 
 ## エージェントの構成要素 {#agent-building-blocks}
@@ -273,13 +328,55 @@ useDbSync({ queryClient });
 4. `useActionQuery` フックとソース バージョン対応の `useQuery` フックの再フェッチ
 5. コンポーネントはページをリロードせずに新しいデータをレンダリングします
 
-```an-diagram title="ライブ同期フロー" summary="エージェントの書き込みは、手動更新のない UI レンダリングになります。最初に SSE が行われ、ユニバーサル フォールバックとしてポーリングされます。"
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">エージェントアクション<br><small class=\"diagram-muted\">DB に書き込み</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">変更イベント<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">クエリ再取得<br><small class=\"diagram-muted\">再読み込みなしで描画</small></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"
+<Diagram id="doc-block-49t58o" title={"ライブ同期フロー"} summary={"エージェントの書き込みは、手動更新のない UI レンダリングになります。最初に SSE が行われ、ユニバーサル フォールバックとしてポーリングされます。"}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-node">
+    エージェントアクション<br /><small class="diagram-muted"
+      >DB に書き込み</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    変更イベント<br /><small class="diagram-muted"
+      >source: action / settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">useDbSync</span
+    ><small class="diagram-muted">SSE &middot; poll fallback</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    クエリ再取得<br /><small class="diagram-muted">再読み込みなしで描画</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-sync .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
 }
 ```
 
+</Diagram>
+
 これは、メモリ内の状態やファイル システム ウォッチャーではなくデータベースを使用するため、サーバーレスやエッジを含むすべての導入環境で機能します。
 
 ## フレーム {#frames}

package/docs/content/locales/ja-JP/local-file-mode.mdx

@@ -46,13 +46,67 @@ UI とエージェント actions は、両方のモードで同じ形状のま
 エディターは引き続きドキュメントを編集します。違いは、それらの文書が解決されるかどうかです
 SQL 行またはローカル ファイルへ。
 
-```an-diagram title="同じ行動、2 つの真実の情報源" summary="UI とエージェントは、両方のモードで同じアクションを呼び出します。アクション層は、各呼び出しが SQL 行またはリポジトリ ファイルのどちらに解決されるかを決定します。"
-{
-  "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">コンテンツUI</div><div class=\"diagram-node\">エージェント + actions<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">データベースモード</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">ホスト版 · 共有 · コメント · 履歴</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">Gitレビュー · コーディングエージェント編集</small></div></div></div>",
-  "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-8zsefu" title={"同じ行動、2 つの真実の情報源"} summary={"UI とエージェントは、両方のモードで同じアクションを呼び出します。アクション層は、各呼び出しが SQL 行またはリポジトリ ファイルのどちらに解決されるかを決定します。"}>
+
+```html
+<div class="diagram-mode">
+  <div class="diagram-col entry">
+    <div class="diagram-node">コンテンツUI</div>
+    <div class="diagram-node">
+      エージェント + actions<br /><small class="diagram-muted"
+        >list/get/update-document</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-row resolve">
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill accent">データベースモード</span
+      ><small class="diagram-muted">SQL rows via Drizzle</small
+      ><small class="diagram-muted">ホスト版 · 共有 · コメント · 履歴</small>
+    </div>
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill ok">Local File Mode</span
+      ><small class="diagram-muted">repo files via agent-native.json</small
+      ><small class="diagram-muted"
+        >Gitレビュー · コーディングエージェント編集</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-mode {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mode .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-mode .resolve {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ## リポジトリの例
 
 コンテンツ ワークスペースは次のように小さくすることができます:

package/docs/content/locales/ja-JP/mcp-apps.mdx

@@ -30,14 +30,70 @@ MCP アプリ拡張機能をサポートするホストの場合、アクショ
 
 製品 UI 用の 1 回限りのプレーン HTML MCP アプリを手書きしないでください。アクションにカスタム サーフェスが必要な場合は、最初に実際のアプリのルート/コンポーネントを追加または再利用し、そのルートを埋め込みます。
 
-```an-diagram title="MCP アプリ埋め込みラウンドトリップ" summary="アクションのリンク ターゲットは埋め込みターゲットでもあります。有効なホストは、同じ署名済みアプリ ルートをインラインで読み込みます。他の人は全員ディープリンクに戻ります。"
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-card\" data-rough><strong>Action</strong><small class=\"diagram-muted\">`link` target = MCP App embed target</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>embedApp()</strong><span class=\"diagram-pill accent\">create_embed_session</span><small class=\"diagram-muted\">mints short-lived embed session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>/_agent-native/embed/start</strong><small class=\"diagram-muted\">一回限りのSQL ticketを交換</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>Signed app route</strong><span class=\"diagram-pill ok\">実際のReactルート</span><small class=\"diagram-muted\">short-lived browser session</small></div><div class=\"diagram-fallback\"><span class=\"diagram-pill warn\">MCP Apps 非対応</span><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>&quot;Open in … &rarr;&quot; deep link</div></div></div>",
-"css": ".diagram-embed{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-embed .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:140px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .diagram-fallback{display:flex;flex-direction:column;align-items:center;gap:6px;margin-inline-start:8px}"
-}
+<Diagram id="doc-block-cswmc0" title={"MCP アプリ埋め込みラウンドトリップ"} summary={"アクションのリンク ターゲットは埋め込みターゲットでもあります。有効なホストは、同じ署名済みアプリ ルートをインラインで読み込みます。他の人は全員ディープリンクに戻ります。"}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-card" data-rough>
+    <strong>Action</strong
+    ><small class="diagram-muted">`link` target = MCP App embed target</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>embedApp()</strong
+    ><span class="diagram-pill accent">create_embed_session</span
+    ><small class="diagram-muted">mints short-lived embed session</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>/_agent-native/embed/start</strong
+    ><small class="diagram-muted">一回限りのSQL ticketを交換</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>Signed app route</strong
+    ><span class="diagram-pill ok">実際のReactルート</span
+    ><small class="diagram-muted">short-lived browser session</small>
+  </div>
+  <div class="diagram-fallback">
+    <span class="diagram-pill warn">MCP Apps 非対応</span>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      &quot;Open in … &rarr;&quot; deep link
+    </div>
+  </div>
+</div>
+```
 
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 140px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .diagram-fallback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 8px;
+}
 ```
 
+</Diagram>
+
 ```ts
 import { embedApp } from "@agent-native/core";
 
@@ -93,14 +149,67 @@ MCP サーバーは、拡張機能 `io.modelcontextprotocol/ui` をアドバタ
 
 MCP アプリの埋め込みはルートの埋め込みであり、個別のミニ製品ではありません。 `embedApp()` は、アクションの `link` ターゲットから開始され、短期間の埋め込みセッションを作成し、署名されたアプリ ルートを起動します。標準 MCP アプリ ホストは、ホストがルートを直接ハイドレートできる場合、MCP アプリ フレーム自体をナビゲートできます。
 
-```an-diagram title="2 つのホスト ブリッジ パス、1 つの署名済みルート" summary="クロードは水和ルートを移植し、直接 ui/_bridge を使用します。 ChatGPT は、window.openai 経由で制御された iframe を取得し、postMessage 経由でホスト アクションを中継します。どちらも同じ署名済みアプリ ルートを指します。"
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><strong>Claude web</strong><span class=\"diagram-pill accent\">single-frame transplant</span><small class=\"diagram-muted\">Claudeのiframeで署名済みアプリHTMLをhydrateし、その後直接`ui/_`ホストブリッジ</small></div><div class=\"diagram-card\" data-rough><strong>ChatGPT web</strong><span class=\"diagram-pill accent\">controlled route iframe</span><small class=\"diagram-muted\">`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage relay</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Same signed app route<br><small class=\"diagram-muted\">通常ルート + React コンポーネント</small></div></div>",
-"css": ".diagram-bridge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-bridge .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-bridge .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;max-width:300px}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}.diagram-bridge .diagram-box{padding:16px 18px;text-align:center}"
-}
+<Diagram id="doc-block-16zmvo8" title={"2 つのホスト ブリッジ パス、1 つの署名済みルート"} summary={"クロードは水和ルートを移植し、直接 ui/_bridge を使用します。 ChatGPT は、window.openai 経由で制御された iframe を取得し、postMessage 経由でホスト アクションを中継します。どちらも同じ署名済みアプリ ルートを指します。"}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <strong>Claude web</strong
+      ><span class="diagram-pill accent">single-frame transplant</span
+      ><small class="diagram-muted"
+        >Claudeのiframeで署名済みアプリHTMLをhydrateし、その後直接`ui/_`ホストブリッジ</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <strong>ChatGPT web</strong
+      ><span class="diagram-pill accent">controlled route iframe</span
+      ><small class="diagram-muted"
+        >`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage
+        relay</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Same signed app route<br /><small class="diagram-muted"
+      >通常ルート + React コンポーネント</small
+    >
+  </div>
+</div>
+```
 
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-bridge .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  max-width: 300px;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-bridge .diagram-box {
+  padding: 16px 18px;
+  text-align: center;
+}
 ```
 
+</Diagram>
+
 Claude Web は単一フレーム移植パスを使用します。リソース ドキュメントは署名済みアプリ HTML を取得し、それを Claude の MCP アプリ iframe 内にハイドレートします。これは、Claude がアプリ所有の子 iframe または外部フレーム ナビゲーションを確実に許可しないためです。 ChatGPT Web は、アプリ ブリッジが安定した `window.openai` ホスト API と制限された高さ制御を提供するため、制御されたルート iframe を取得します。すべてのパスは同じ署名済みアプリ ルートを指し、通常のルートと React コンポーネントをレンダリングします。同じ署名付き URL でリロードすると同じビューが再構築されるように、埋め込みルートを設計します。
 
 同じアプリ `open_app({ embed: true })` の場合、フレームワークは元のツール呼び出し中に埋め込み開始チケットを作成し、署名された開始 URL を非表示のツール メタデータに保存します。カスタム actions は、同じ高速パスに対して `embedStartUrl` を返すことができます。 MCP レイヤーは、チケットを含む URL をモデルに表示される `structuredContent` および通常のオープンリンク メタデータから削除します。埋め込み開始 URL が存在しない場合、リソースはアプリ専用の `create_embed_session` ヘルパーにフォールバックします。これにより、実稼働ホストは、ワンタイム アプリ セッション URL をトランスクリプトに漏らすことなく、iframe によって開始されるツール呼び出しを直接ルートで制限するようになります。 1 回限りの開始チケットの有効期限が切れた後にユーザーが古いチャットを再度開くと、開始ルートは小さな更新ページを返し、`agentNative.embedSessionExpired` をラッパーにポストします。 `embedApp()` は、古い開始 URL をクリアし、元のアプリ ルートがまだ残っている場合に、`create_embed_session` を通じて新しいチケットを作成します。