@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/ja-JP/what-is-agent-native.mdx

@@ -50,13 +50,56 @@ AI が*できるようになりました*。 「メールの下書き」、「
 
 それは 3 番です。これはエージェントネイティブです。
 
-```an-diagram title="はしごの原理" summary="ほとんどのチームはラング 1 または 2 で停止します。エージェントネイティブはラング 3、つまり 1 つの共有アクション サーフェス上の実際のアプリと実際のエージェントです。"
-{
-  "html": "<div class=\"diagram-ladder\"><div class=\"diagram-card rung rung-3\"><span class=\"diagram-pill accent\">段 3 · agent-native</span><strong>エージェント + UI が対等なパートナー</strong><small class=\"diagram-muted\">One action surface. Every agent tool is also a button; every button runs the same logic the agent uses.</small></div><div class=\"diagram-card rung rung-2\"><span class=\"diagram-pill\">段 2</span><strong>ツール付きチャット</strong><small class=\"diagram-muted\">エージェントは行動できますが、まだチャットウィンドウにすぎません。ダッシュボード、リスト、ショートカットはありません。</small></div><div class=\"diagram-card rung rung-1\"><span class=\"diagram-pill warn\">段 1</span><strong>単一のLLM呼び出し</strong><small class=\"diagram-muted\">Prompt in, string out. Impressive in a demo; breaks the moment reality gets messy.</small></div></div>",
-  "css": ".diagram-ladder{display:flex;flex-direction:column;gap:14px}.diagram-ladder .rung{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.diagram-ladder .rung-2{margin-inline-end:48px}.diagram-ladder .rung-1{margin-inline-end:96px}"
+<Diagram id="doc-block-w17dys" title={"はしごの原理"} summary={"ほとんどのチームはラング 1 または 2 で停止します。エージェントネイティブはラング 3、つまり 1 つの共有アクション サーフェス上の実際のアプリと実際のエージェントです。"}>
+
+```html
+<div class="diagram-ladder">
+  <div class="diagram-card rung rung-3">
+    <span class="diagram-pill accent">段 3 · agent-native</span
+    ><strong>エージェント + UI が対等なパートナー</strong
+    ><small class="diagram-muted"
+      >One action surface. Every agent tool is also a button; every button runs
+      the same logic the agent uses.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-2">
+    <span class="diagram-pill">段 2</span><strong>ツール付きチャット</strong
+    ><small class="diagram-muted"
+      >エージェントは行動できますが、まだチャットウィンドウにすぎません。ダッシュボード、リスト、ショートカットはありません。</small
+    >
+  </div>
+  <div class="diagram-card rung rung-1">
+    <span class="diagram-pill warn">段 1</span><strong>単一のLLM呼び出し</strong
+    ><small class="diagram-muted"
+      >Prompt in, string out. Impressive in a demo; breaks the moment reality
+      gets messy.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-ladder .rung {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+.diagram-ladder .rung-2 {
+  margin-inline-end: 48px;
+}
+.diagram-ladder .rung-1 {
+  margin-inline-end: 96px;
 }
 ```
 
+</Diagram>
+
 これらすべてが同じアクション定義にどのように影響するかについては、[Key Concepts — Protocols](/docs/key-concepts#protocols) を参照してください。
 
 ## すべてのエージェントに UI が必要な理由 {#why-every-agent-needs-a-ui}
@@ -89,13 +132,58 @@ AI が*できるようになりました*。 「メールの下書き」、「
 >
 > **エージェントから** — 自然言語、A2A、Slack、テレグラム経由の他のエージェント。エージェントはデータベースに書き込みます。 UI は自動的に更新されます。
 
-```an-diagram title="1 つのシステムで 2 つの方法で" summary="エージェントと UI は、同じアクションと同じデータベースに書き込みます。どちらかが何をしても、もう一方はそれを見ます。"
-{
-  "html": "<div class=\"diagram-parity\"><div class=\"diagram-col\"><div class=\"diagram-node\">Human<br><small class=\"diagram-muted\">クリック、フォーム、ショートカット</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">自然言語 · A2A · Slack</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">defined once</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQLデータベース</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">UI がライブ更新</div></div>",
-  "css": ".diagram-parity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-parity .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-parity .diagram-arrow{font-size:22px;line-height:1}.diagram-parity .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-4x1q4z" title={"1 つのシステムで 2 つの方法で"} summary={"エージェントと UI は、同じアクションと同じデータベースに書き込みます。どちらかが何をしても、もう一方はそれを見ます。"}>
+
+```html
+<div class="diagram-parity">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Human<br /><small class="diagram-muted"
+        >クリック、フォーム、ショートカット</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">自然言語 · A2A · Slack</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">defined once</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">SQLデータベース</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">UI がライブ更新</div>
+</div>
+```
+
+```css
+.diagram-parity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-parity .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-parity .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-parity .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 エージェントが下書きメールを作成すると、UI に表示されます。 「送信」をクリックすると、エージェントは送信されたことを認識します。個別の「エージェント ワールド」と「UI ワールド」は存在せず、それは 1 つのシステムです。これを機能させるアーキテクチャについては、[Key Concepts](/docs/key-concepts) を参照してください。
 
 ## カスタマイズは通常電動工具用に予約されています {#workspace-customization}

package/docs/content/locales/ja-JP/workspace-connections.mdx

@@ -16,13 +16,75 @@ description: "どこでも接続できる統合のための共有プロバイダ
 - **credentialRef** — ボールト シークレット (`{ key: "SLACK_BOT_TOKEN", scope: "org" }`) へのポインター。接続は、トークンがどこに存在するかを示します。金庫には価値が保持されます。
 - **Readiness** — アプリに表示されるステータスを組み合わせたもの: `connected` (付与 + 資格情報存在)、`needs_grant`、`needs_credentials`、`needs_attention`、または `not_configured`。
 
-```an-diagram title="一度接続すれば、アプリに許可を与え、資格情報を再利用できます" summary="Connection はプロバイダーのメタデータ (シークレットではありません) とボールトを指す credentialRef を保持します。アプリごとの付与によりロックが解除されます。アプリは単一の Readiness ステータスを読み取ります。"
-{
-  "html": "<div class=\"diagram-conn\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Connection</span><div class=\"diagram-box\" data-rough>named provider account<br><small class=\"diagram-muted\">provider, label, ステータス、スコープ、設定 &middot; never stores secret values</small></div><div class=\"diagram-muted\">credentialRef &rarr; pointer to a vault secret</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill\">Grant</span><div class=\"diagram-box\" data-rough>per-app permission<br><small class=\"diagram-muted\">no grant = no credential access</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Readiness</span><small class=\"diagram-muted\">what the app sees</small><div class=\"sev-row\"><span class=\"diagram-pill ok\">connected</span><span class=\"diagram-pill warn\">needs_grant</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">needs_credentials</span><span class=\"diagram-pill warn\">needs_attention</span></div><div class=\"sev-row\"><span class=\"diagram-pill\">not_configured</span></div></div></div>",
-  "css": ".diagram-conn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-conn .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-conn .diagram-arrow{font-size:22px;line-height:1}.diagram-conn .sev-row{display:flex;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-1s9vhuv" title={"一度接続すれば、アプリに許可を与え、資格情報を再利用できます"} summary={"Connection はプロバイダーのメタデータ (シークレットではありません) とボールトを指す credentialRef を保持します。アプリごとの付与によりロックが解除されます。アプリは単一の Readiness ステータスを読み取ります。"}>
+
+```html
+<div class="diagram-conn">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">Connection</span>
+    <div class="diagram-box" data-rough>
+      named provider account<br /><small class="diagram-muted"
+        >provider, label, ステータス、スコープ、設定 &middot; never stores
+        secret values</small
+      >
+    </div>
+    <div class="diagram-muted">
+      credentialRef &rarr; pointer to a vault secret
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill">Grant</span>
+    <div class="diagram-box" data-rough>
+      per-app permission<br /><small class="diagram-muted"
+        >no grant = no credential access</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Readiness</span
+    ><small class="diagram-muted">what the app sees</small>
+    <div class="sev-row">
+      <span class="diagram-pill ok">connected</span
+      ><span class="diagram-pill warn">needs_grant</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">needs_credentials</span
+      ><span class="diagram-pill warn">needs_attention</span>
+    </div>
+    <div class="sev-row"><span class="diagram-pill">not_configured</span></div>
+  </div>
+</div>
+```
+
+```css
+.diagram-conn {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-conn .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-conn .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-conn .sev-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 ### 実際の例: Slack
 
 Slack を 1 回接続し、Brain と Analytics に許可します:
@@ -260,13 +322,71 @@ Credential Vault は、「シークレットはどこに保存されているの
 
 ワークスペース接続プロバイダーのメタデータは、「これはどのプロバイダーで、何ができるのか、どのような資格情報キーが必要になるのか、どのテンプレートがそれを提供する必要があるのか?」と答えます。
 
-```an-diagram title="接続ストアとコンテナーの比較" summary="ボールトはシークレット値を所有します。接続はプロバイダーのメタデータと credentialRefs (ポインター) を所有します。実行時に、アプリは許可された接続を通じて参照を解決し、ボールトから値を読み取ります。"
-{
-  "html": "<div class=\"diagram-vault\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">接続ストア</span><div class=\"diagram-box\" data-rough>provider account + metadata<br><small class=\"diagram-muted\">ステータス、スコープ、設定</small></div><div class=\"diagram-box\" data-rough>credentialRef<br><small class=\"diagram-muted\">{ key: SLACK_BOT_TOKEN, scope: org }</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">アプリアクション</span><small class=\"diagram-muted\">resolves at execution time through a granted ref</small><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Vault</span><div class=\"diagram-box\" data-rough>secret value<br><small class=\"diagram-muted\">エージェントやUIには返さない</small></div></div></div>",
-  "css": ".diagram-vault{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-vault .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-vault .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-vault .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-14dautt" title={"接続ストアとコンテナーの比較"} summary={"ボールトはシークレット値を所有します。接続はプロバイダーのメタデータと credentialRefs (ポインター) を所有します。実行時に、アプリは許可された接続を通じて参照を解決し、ボールトから値を読み取ります。"}>
+
+```html
+<div class="diagram-vault">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">接続ストア</span>
+    <div class="diagram-box" data-rough>
+      provider account + metadata<br /><small class="diagram-muted"
+        >ステータス、スコープ、設定</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      credentialRef<br /><small class="diagram-muted"
+        >{ key: SLACK_BOT_TOKEN, scope: org }</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">アプリアクション</span
+    ><small class="diagram-muted"
+      >resolves at execution time through a granted ref</small
+    >
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Vault</span>
+    <div class="diagram-box" data-rough>
+      secret value<br /><small class="diagram-muted"
+        >エージェントやUIには返さない</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vault {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-vault .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-vault .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-vault .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 両方を一緒に使用します:
 
 1. ディスパッチ (または別のワークスペース設定フロー) は、基礎となるボールト シークレットまたは OAuth 資格情報参照を作成します。

package/docs/content/locales/ja-JP/workspace-management.mdx

@@ -9,13 +9,59 @@ description: "分岐、CODEOWNERS、PR レビュー、Dispatch が git レベル
 
 このガイドでは、エージェント ネイティブ ワークスペースの実行の運用面、つまり分岐方法、誰が何をレビューするか、コード所有権の設定方法、ディスパッチ コントロール プレーンをガバナンス モデルにどのように適合させるかについて説明します。
 
-```an-diagram title="2 つのガバナンス プレーン" summary="Git はコードを管理します。 Dispatch は実行時間を管理します。これらは補完的であり、一方の内部で他方を複製しないでください。"
-{
-  "html": "<div class=\"gov\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Git と GitHub</span><strong>コードガバナンス</strong><div class=\"gov-list\"><span class=\"diagram-pill\">CODEOWNERS</span><span class=\"diagram-pill\">branch protection</span><span class=\"diagram-pill\">PR レビュー</span><span class=\"diagram-pill\">git log / blame</span></div></div><div class=\"diagram-pill diagram-muted\">+</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Dispatch</span><strong>Runtime governance</strong><div class=\"gov-list\"><span class=\"diagram-pill\">vault secrets &amp; grants</span><span class=\"diagram-pill\">workspace resources</span><span class=\"diagram-pill\">agent profiles</span><span class=\"diagram-pill\">approvals &amp; audit</span></div></div></div>",
-  "css": ".gov{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.gov .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.gov .gov-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}"
+<Diagram id="doc-block-8gnief" title={"2 つのガバナンス プレーン"} summary={"Git はコードを管理します。 Dispatch は実行時間を管理します。これらは補完的であり、一方の内部で他方を複製しないでください。"}>
+
+```html
+<div class="gov">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Git と GitHub</span
+    ><strong>コードガバナンス</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">CODEOWNERS</span
+      ><span class="diagram-pill">branch protection</span
+      ><span class="diagram-pill">PR レビュー</span
+      ><span class="diagram-pill">git log / blame</span>
+    </div>
+  </div>
+  <div class="diagram-pill diagram-muted">+</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Dispatch</span
+    ><strong>Runtime governance</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">vault secrets &amp; grants</span
+      ><span class="diagram-pill">workspace resources</span
+      ><span class="diagram-pill">agent profiles</span
+      ><span class="diagram-pill">approvals &amp; audit</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.gov {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.gov .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.gov .gov-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## 分岐
 
 ### 機能ブランチ

package/docs/content/locales/ja-JP/workspace.mdx

@@ -11,13 +11,68 @@ description: "Claude ユーザーごとのコード レベルのカスタマイ
 
 工夫: **ファイルシステム ファイルではなく、SQL 行です。** 各ユーザーは、データベースに保存された独自のワークスペースを取得します。起動する開発ボックスも、ユーザーごとのコンテナも、マウントするファイルもありません。マルチテナント SaaS は、完全にカスタマイズ可能なエージェントをすべてのユーザーに実質的に無料で提供できます。これは、すべてが行 (個人メモリ、個人 MCP サーバー、個人 skills、個人サブエージェント) であり、共有コードベースがそれらすべてを一度にホストするためです。
 
-```an-diagram title="Claude-Code ワークスペースですが、SQL に保存されます" summary="同じカスタマイズ層 (命令、スキル、メモリ、エージェント、ジョブ、MCP) ですが、すべてのファイルが共有マルチテナント データベース内の行である点が異なります。"
-{
-  "html": "<div class=\"ws-map\"><div class=\"diagram-card cc\"><span class=\"diagram-pill warn\">Claude Code / Codex</span><small class=\"diagram-muted\">~/.claude/ on a local disk</small><div class=\"ws-files\"><span class=\"diagram-box\">CLAUDE.md</span><span class=\"diagram-box\">skills/</span><span class=\"diagram-box\">memory</span><span class=\"diagram-box\">mcp.json</span></div><small class=\"diagram-muted\">one codebase per developer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card an\"><span class=\"diagram-pill accent\">Agent-nativeワークスペース</span><small class=\"diagram-muted\">rows in one SQLデータベース</small><div class=\"ws-rows\"><span class=\"diagram-pill\">AGENTS.md</span><span class=\"diagram-pill\">skills/&hellip;</span><span class=\"diagram-pill\">memory/&hellip;</span><span class=\"diagram-pill\">mcp-servers/&hellip;</span></div><small class=\"diagram-muted\">1つのコードベース、多数のユーザー、スコープ付き <code>u:&lt;email&gt;:&hellip;</code></small></div></div>",
-  "css": ".ws-map{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ws-map .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:220px}.ws-map .ws-files,.ws-map .ws-rows{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}.ws-map .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-xco4gl" title={"Claude-Code ワークスペースですが、SQL に保存されます"} summary={"同じカスタマイズ層 (命令、スキル、メモリ、エージェント、ジョブ、MCP) ですが、すべてのファイルが共有マルチテナント データベース内の行である点が異なります。"}>
+
+```html
+<div class="ws-map">
+  <div class="diagram-card cc">
+    <span class="diagram-pill warn">Claude Code / Codex</span
+    ><small class="diagram-muted">~/.claude/ on a local disk</small>
+    <div class="ws-files">
+      <span class="diagram-box">CLAUDE.md</span
+      ><span class="diagram-box">skills/</span
+      ><span class="diagram-box">memory</span
+      ><span class="diagram-box">mcp.json</span>
+    </div>
+    <small class="diagram-muted">one codebase per developer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card an">
+    <span class="diagram-pill accent">Agent-nativeワークスペース</span
+    ><small class="diagram-muted">rows in one SQLデータベース</small>
+    <div class="ws-rows">
+      <span class="diagram-pill">AGENTS.md</span
+      ><span class="diagram-pill">skills/&hellip;</span
+      ><span class="diagram-pill">memory/&hellip;</span
+      ><span class="diagram-pill">mcp-servers/&hellip;</span>
+    </div>
+    <small class="diagram-muted"
+      >1つのコードベース、多数のユーザー、スコープ付き
+      <code>u:&lt;email&gt;:&hellip;</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.ws-map {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ws-map .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 220px;
+}
+.ws-map .ws-files,
+.ws-map .ws-rows {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 4px 0;
+}
+.ws-map .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 | Claude コード / Codex                 | エージェントネイティブのワークスペース                       |
 | ------------------------------------- | ------------------------------------------------------------ |
 | ローカル ディスク上のファイル         | 共有 SQL データベース内の行                                  |
@@ -51,13 +106,61 @@ description: "Claude ユーザーごとのコード レベルのカスタマイ
 
 これらのパスは、ワークスペース、組織/アプリ、個人の 3 つのスコープすべてに適用されます。同じパスが複数のレベルに存在する場合、後のスコープが優先されます。
 
-```an-diagram title="3 つのスコープ、1 つの有効なファイル" summary="ランタイムは、読み取り時にワークスペース、アプリ、および個人のスコープにわたる同じパスを解決します。最も具体的なスコープが優先されます。"
-{
-  "html": "<div class=\"ws-stack\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Workspace</span><small class=\"diagram-muted\">Dispatchからの全社デフォルト</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">組織 / アプリ</span><small class=\"diagram-muted\">team override for one app</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Personal</span><small class=\"diagram-muted\">per-user override &mdash; wins</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Effective <code>context/brand.md</code></div></div>",
-  "css": ".ws-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ws-stack .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:280px}.ws-stack .diagram-arrow{font-size:20px;align-self:center}.ws-stack code{font-size:.85em}.ws-stack .diagram-box{align-self:center;margin-top:4px}"
+<Diagram id="doc-block-1sc0rx4" title={"3 つのスコープ、1 つの有効なファイル"} summary={"ランタイムは、読み取り時にワークスペース、アプリ、および個人のスコープにわたる同じパスを解決します。最も具体的なスコープが優先されます。"}>
+
+```html
+<div class="ws-stack">
+  <div class="diagram-card">
+    <span class="diagram-pill">Workspace</span
+    ><small class="diagram-muted">Dispatchからの全社デフォルト</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">組織 / アプリ</span
+    ><small class="diagram-muted">team override for one app</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Personal</span
+    ><small class="diagram-muted">per-user override &mdash; wins</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">Effective <code>context/brand.md</code></div>
+</div>
+```
+
+```css
+.ws-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ws-stack .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  min-width: 280px;
+}
+.ws-stack .diagram-arrow {
+  font-size: 20px;
+  align-self: center;
+}
+.ws-stack code {
+  font-size: 0.85em;
+}
+.ws-stack .diagram-box {
+  align-self: center;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## はじめに: 1 分間のウォークスルー {#getting-started}
 
 エージェントの動作を 60 秒以内に変更します。

package/docs/content/locales/ja-JP/writing-agent-instructions.mdx

@@ -7,13 +7,53 @@ description: "エージェント ネイティブ アプリまたはテンプレ
 
 エージェント ネイティブ アプリにおけるエージェントの動作は、ユーザーが与えた指示によって決まります。 `AGENTS.md` (マップ)、skills (詳細)、およびアクション/ツールの説明 (エージェントが適切なツールを選択する方法) の 3 つのサーフェスでそのガイダンスが伝えられます。散文ではなく、迅速に検索できるようにそれぞれを書きます。
 
-```an-diagram title="3 つの作成済みサーフェス + 1 つのランタイム サーフェス" summary="AGENTS.md とツールの説明は毎ターンロードされます。スキルはオンデマンドでロードされます。 application_state は UI によってライブで書き込まれます。"
-{
-  "html": "<div class=\"diagram-surfaces\"><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">毎ターン</span><strong>AGENTS.md</strong><small class=\"diagram-muted\">地図: 目的、基本ルール、状態キー、action + skills索引</small></div><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">毎ターン</span><strong>ツール説明</strong><small class=\"diagram-muted\">ツール選択を導く — それぞれ1つの正確な文</small></div><div class=\"diagram-card ondemand\" data-rough><span class=\"diagram-pill\">オンデマンド</span><strong>スキル</strong><small class=\"diagram-muted\">詳細な手順、説明が一致したときに読み込み</small></div><div class=\"diagram-card runtime\" data-rough><span class=\"diagram-pill ok\">Live</span><strong>application_state</strong><small class=\"diagram-muted\">UIが書き込む: ナビゲーション、選択、フォーカス</small></div></div>",
-  "css": ".diagram-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.diagram-surfaces .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}"
+<Diagram id="doc-block-1aqsfxk" title={"3 つの作成済みサーフェス + 1 つのランタイム サーフェス"} summary={"AGENTS.md とツールの説明は毎ターンロードされます。スキルはオンデマンドでロードされます。 application_state は UI によってライブで書き込まれます。"}>
+
+```html
+<div class="diagram-surfaces">
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">毎ターン</span><strong>AGENTS.md</strong
+    ><small class="diagram-muted"
+      >地図: 目的、基本ルール、状態キー、action + skills索引</small
+    >
+  </div>
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">毎ターン</span><strong>ツール説明</strong
+    ><small class="diagram-muted"
+      >ツール選択を導く — それぞれ1つの正確な文</small
+    >
+  </div>
+  <div class="diagram-card ondemand" data-rough>
+    <span class="diagram-pill">オンデマンド</span><strong>スキル</strong
+    ><small class="diagram-muted"
+      >詳細な手順、説明が一致したときに読み込み</small
+    >
+  </div>
+  <div class="diagram-card runtime" data-rough>
+    <span class="diagram-pill ok">Live</span><strong>application_state</strong
+    ><small class="diagram-muted"
+      >UIが書き込む: ナビゲーション、選択、フォーカス</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-surfaces {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.diagram-surfaces .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## AGENTS.md は小さく、スキミングできるようにしてください {#small-agents-md}
 
 `AGENTS.md` が方向としてロードされます。これは、エージェントが正しく動作するための最小のものであり、すべてが skills に深くプッシュされている必要があります。以下のセクションとその他のセクションを目指してください: