@agent-native/core 0.79.26 → 0.79.27

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 に深くプッシュされている必要があります。以下のセクションとその他のセクションを目指してください:

package/docs/content/locales/ko-KR/a2a-protocol.mdx

@@ -20,13 +20,53 @@ A2A is the substrate for cross-app delegation in this framework — most promine
 - **작업** — 각 메시지는 수명 주기(제출됨, 작업 중, 완료됨, 실패, 취소됨)가 있는 작업을 생성합니다.
 - **JWT 전달자 인증** — 프로덕션 A2A에는 `A2A_SECRET` 또는 명시적인 레거시 `apiKeyEnv`가 필요합니다.
 
-```an-diagram title="한 상담원이 다른 상담원에게 일을 맡깁니다." summary="메일 에이전트는 분석 에이전트의 카드를 발견하고 JSON-RPC 메시지를 보낸 다음 완료된 작업을 돌려받습니다."
-{
-  "html": "<div class=\"diagram-handoff\"><div class=\"diagram-card\"><strong>Mail 에이전트</strong><small class=\"diagram-muted\">needs analytics</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">GET /.well-known/agent-card.json</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">POST /_agent-native/a2a<br><small class=\"diagram-muted\">message/send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-pill ok\">작업 · 완료</div></div><div class=\"diagram-card\" data-rough><strong>Analytics 에이전트</strong><small class=\"diagram-muted\">run-query를 실행하고 결과 반환</small></div></div>",
-  "css": ".diagram-handoff{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-handoff .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-handoff .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-l0qyn5" title={"한 상담원이 다른 상담원에게 일을 맡깁니다."} summary={"메일 에이전트는 분석 에이전트의 카드를 발견하고 JSON-RPC 메시지를 보낸 다음 완료된 작업을 돌려받습니다."}>
+
+```html
+<div class="diagram-handoff">
+  <div class="diagram-card">
+    <strong>Mail 에이전트</strong
+    ><small class="diagram-muted">needs analytics</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">GET /.well-known/agent-card.json</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">
+      POST /_agent-native/a2a<br /><small class="diagram-muted"
+        >message/send</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+    <div class="diagram-pill ok">작업 · 완료</div>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>Analytics 에이전트</strong
+    ><small class="diagram-muted">run-query를 실행하고 결과 반환</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-handoff {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-handoff .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-handoff .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 서버 설정 {#server-setup}
 
 대부분의 템플릿은 프레임워크 에이전트 채팅 플러그인을 통해 A2A를 얻습니다. 직접 마운트하는 경우 서버 플러그인에서 `mountA2A()`를 호출하세요:
@@ -176,14 +216,62 @@ JSON-RPC 2.0 endpoint for `message/send`, `message/stream`, `tasks/get`, and `ta
 
 `message/send`가 `async: true`와 함께 호출되면 JSON-RPC 핸들러는 작업을 대기열에 추가하고 POST를 내부 `/_agent-native/a2a/_process-task` 경로로 자체 실행하므로 핸들러는 자체 전체 시간 초과로 새로운 함수 실행에서 실행됩니다. 이 경로는 작업 ID(5분 수명, `A2A_SECRET`로 서명됨)에 바인딩된 HMAC 토큰으로 인증됩니다. `/_agent-native/a2a` JSON-RPC 경로 앞에 마운트되므로 h3의 접두사 일치가 이를 삼키지 않습니다.
 
-```an-diagram title="서버리스의 비동기 작업 수명 주기" summary="async:true는 밀리초 단위로 작업을 반환하고 호출자가 폴링하는 동안 새로 실행하면 에이전트 루프가 실행됩니다."
-{
-  "html": "<div class=\"diagram-async\"><div class=\"diagram-box\" data-rough>message/send<br><small class=\"diagram-muted\">async: true</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">enqueue task</span><span class=\"diagram-pill warn\">return working</span><small class=\"diagram-muted\">~밀리초</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>자체 실행 POST /_agent-native/a2a/_process-task<br><small class=\"diagram-muted\">HMAC token · 새 실행 · 전체 타임아웃</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">tasks/get (poll)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">completed</div></div></div>",
-  "css": ".diagram-async{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-async .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-arrow{font-size:20px;line-height:1}",
-  "caption": "A recurring sweeper re-claims any task left in flight if the function execution dies mid-run."
+<Diagram id="doc-block-19akova" title={"서버리스의 비동기 작업 수명 주기"} summary={"async:true는 밀리초 단위로 작업을 반환하고 호출자가 폴링하는 동안 새로 실행하면 에이전트 루프가 실행됩니다."} caption="A recurring sweeper re-claims any task left in flight if the function execution dies mid-run.">
+
+```html
+<div class="diagram-async">
+  <div class="diagram-box" data-rough>
+    message/send<br /><small class="diagram-muted">async: true</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel">
+    <span class="diagram-pill">enqueue task</span
+    ><span class="diagram-pill warn">return working</span
+    ><small class="diagram-muted">~밀리초</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    자체 실행 POST /_agent-native/a2a/_process-task<br /><small
+      class="diagram-muted"
+      >HMAC token · 새 실행 · 전체 타임아웃</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">tasks/get (poll)</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+    <div class="diagram-pill ok">completed</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-async {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-async .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!IMPORTANT]
 > **서버리스 웹훅 및 게이트웨이 시간 초과:**
 > 호스팅 환경 게이트웨이(예: Netlify, Vercel 또는 Cloudflare Pages)는 공용 HTTP 경로에 엄격한 실행 제한(보통 10~30초)을 적용합니다. 에이전트 루프는 쿼리를 실행하고, 컨텍스트를 가져오고, 도구를 실행하는 데 상당한 시간이 걸릴 수 있으므로 A2A 엔드포인트를 호출하거나 외부 webhooks를 처리할 때 **`async: true`**를 사용해야 합니다. 그러면 `working` 상태가 API 게이트웨이에 즉시 반환되어 몇 밀리초 동안만 연결이 열린 상태로 유지되는 반면, 자체 실행된 `/process-task` POST는 백그라운드에서 에이전트 루프를 실행합니다. 에이전트 루프가 완료되기를 기다리는 기본 HTTP 요청을 차단하지 마십시오.

package/docs/content/locales/ko-KR/actions.mdx

@@ -19,13 +19,72 @@ Actions는 앱이 수행하는 모든 작업에 대한 단일 정보 소스입
 작업을 헤드리스로 노출할지 여부를 결정하는 경우 채팅,
 embedded sidecar, or as a full app screen, see [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="하나의 정의, 7명의 소비자" summary="단일 defineAction()은 하나의 검증된 스키마와 하나의 run() 본문을 사용하여 에이전트, UI, HTTP, MCP, A2A 및 CLI 등 모든 표면으로 확장됩니다."
-{
-  "html": "<div class=\"diagram-fanout\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">defineAction()</span><small class=\"diagram-muted\">schema + run(), 한 번만 정의</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><div class=\"diagram-node\">에이전트 도구<br><small class=\"diagram-muted\">컨텍스트의 JSON Schema</small></div><div class=\"diagram-node\">React 훅<br><small class=\"diagram-muted\">useActionQuery/Mutation</small></div><div class=\"diagram-node\">callAction()<br><small class=\"diagram-muted\">명령형 클라이언트</small></div><div class=\"diagram-node\">HTTP<br><small class=\"diagram-muted\">/_agent-native/actions/:name</small></div><div class=\"diagram-node\">MCP 도구<br><small class=\"diagram-muted\">외부 호스트</small></div><div class=\"diagram-node\">A2A 도구<br><small class=\"diagram-muted\">다른 agent-native 앱</small></div><div class=\"diagram-node\">CLI<br><small class=\"diagram-muted\">pnpm action &lt;name&gt;</small></div></div></div>",
-  "css": ".diagram-fanout{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fanout .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-fanout .diagram-arrow{font-size:22px;line-height:1}.diagram-fanout .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-r6tbam" title={"하나의 정의, 7명의 소비자"} summary={"단일 defineAction()은 하나의 검증된 스키마와 하나의 run() 본문을 사용하여 에이전트, UI, HTTP, MCP, A2A 및 CLI 등 모든 표면으로 확장됩니다."}>
+
+```html
+<div class="diagram-fanout">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">defineAction()</span
+    ><small class="diagram-muted">schema + run(), 한 번만 정의</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <div class="diagram-node">
+      에이전트 도구<br /><small class="diagram-muted"
+        >컨텍스트의 JSON Schema</small
+      >
+    </div>
+    <div class="diagram-node">
+      React 훅<br /><small class="diagram-muted">useActionQuery/Mutation</small>
+    </div>
+    <div class="diagram-node">
+      callAction()<br /><small class="diagram-muted">명령형 클라이언트</small>
+    </div>
+    <div class="diagram-node">
+      HTTP<br /><small class="diagram-muted"
+        >/_agent-native/actions/:name</small
+      >
+    </div>
+    <div class="diagram-node">
+      MCP 도구<br /><small class="diagram-muted">외부 호스트</small>
+    </div>
+    <div class="diagram-node">
+      A2A 도구<br /><small class="diagram-muted">다른 agent-native 앱</small>
+    </div>
+    <div class="diagram-node">
+      CLI<br /><small class="diagram-muted">pnpm action &lt;name&gt;</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-fanout {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fanout .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-fanout .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-fanout .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 UI와 상담원 모두가 뭔가를 해야 하는 경우 맞춤 작업이 아닌 작업을 수행하세요.
 경로. 경로 형태의 프로토콜이 올바른 호출일 _is_ 경우에는 [Actions 선호
 앱 운영용](/docs/server#actions-first).