@agent-native/core 0.79.26 → 0.79.27

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

@@ -7,13 +7,79 @@ description: "Nitro サーバー ルート、プラグイン、フレームワ
 
 エージェント ネイティブ アプリは、サーバー ルートとプラグインに [Nitro](https://nitro.build) を使用します。ほとんどの製品の動作は [Actions](/docs/actions) 内に存在する必要があります。カスタム ルートは、actions が適合しないプロトコル サーフェス (アップロード、ストリーミング、パブリック ページ、webhooks、OAuth コールバック、プロバイダー固有の API) 用です。
 
-```an-diagram title="サーバー上で実行されるもの" summary="アクションはデフォルトです。カスタム ファイル ルートとフレームワークにマウントされたルートは、同じ Nitro アプリと同じ SQL データベースを共有します。"
-{
-  "html": "<div class=\"diagram-server\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">ブラウザー / UI</div><div class=\"diagram-node\">エージェントループ</div><div class=\"diagram-node\">外部クライアント<br><small class=\"diagram-muted\">HTTP · MCP · A2A</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>Nitro サーバー</strong><div class=\"diagram-row\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">デフォルトのサーフェス</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">/_agent-native/*</span><small class=\"diagram-muted\">framework routes</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">/api/*</span><small class=\"diagram-muted\">custom file routes</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">plugins</span><small class=\"diagram-muted\">起動: マイグレーション、ジョブ</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQLデータベース<br><small class=\"diagram-muted\">Drizzle · 調整ポイント</small></div></div>",
-  "css": ".diagram-server{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-server .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-server .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.diagram-server .diagram-row{display:flex;align-items:center;gap:8px}.diagram-server .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1b26mt2" title={"サーバー上で実行されるもの"} summary={"アクションはデフォルトです。カスタム ファイル ルートとフレームワークにマウントされたルートは、同じ Nitro アプリと同じ SQL データベースを共有します。"}>
+
+```html
+<div class="diagram-server">
+  <div class="diagram-col entry">
+    <div class="diagram-node">ブラウザー / UI</div>
+    <div class="diagram-node">エージェントループ</div>
+    <div class="diagram-node">
+      外部クライアント<br /><small class="diagram-muted"
+        >HTTP · MCP · A2A</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Nitro サーバー</strong>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">Actions</span
+      ><small class="diagram-muted">デフォルトのサーフェス</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">/_agent-native/*</span
+      ><small class="diagram-muted">framework routes</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">/api/*</span
+      ><small class="diagram-muted">custom file routes</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">plugins</span
+      ><small class="diagram-muted">起動: マイグレーション、ジョブ</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQLデータベース<br /><small class="diagram-muted"
+      >Drizzle · 調整ポイント</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-server {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-server .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-server .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.diagram-server .diagram-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-server .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## ファイルベースのルート {#file-based-routes}
 
 ルートは `server/routes/` に存在し、Nitro はファイル名をメソッドとパスにマップします。
@@ -185,13 +251,51 @@ export default runMigrations(
 
 データベースが調整ポイントであるため、これはサーバーレスおよびマルチインスタンスの展開全体で機能します。 actions の外部でカスタムのミューテーションを作成する場合は、フレームワーク ヘルパーを使用するか、適切な同期無効化を発行して、UI を更新してください。
 
-```an-diagram title="SQL-backed 同期ループ" summary="ウォッチャーもスティッキー状態もありません。書き込みにより SQL のバージョンが上がります。すべてのクライアントがバージョンをポーリングし、再フェッチします。"
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-box\" data-rough>Action / ヘルパー<br><small class=\"diagram-muted\">mutates data</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>SQLデータベース</strong><small class=\"diagram-muted\">sync version increments</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">useDbSync()<br><small class=\"diagram-muted\">polls /_agent-native/poll</small></div><div class=\"diagram-pill ok\">invalidate caches &rarr; UI refreshes</div></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sync .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-oizi04" title={"SQL-backed 同期ループ"} summary={"ウォッチャーもスティッキー状態もありません。書き込みにより SQL のバージョンが上がります。すべてのクライアントがバージョンをポーリングし、再フェッチします。"}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-box" data-rough>
+    Action / ヘルパー<br /><small class="diagram-muted">mutates data</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQLデータベース</strong
+    ><small class="diagram-muted">sync version increments</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useDbSync()<br /><small class="diagram-muted"
+        >polls /_agent-native/poll</small
+      >
+    </div>
+    <div class="diagram-pill ok">invalidate caches &rarr; UI refreshes</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-1rmccq6" title={"投票エンドポイント"} method="GET" path="/_agent-native/poll" summary={"クライアントが変更を検出できるように、現在のソースごとのデータベース同期バージョンを返します。"} auth="Session cookie (request-scoped identity)" responses={[
   {
     "status": "200",
@@ -213,13 +317,68 @@ export default runMigrations(
 4. すぐに 200 を返します。
 5. 新しいプロセッサの実行でエージェント ループを実行し、結果をポストします。
 
-```an-diagram title="統合キューのパターン" summary="Webhook ハンドラーはミリ秒単位で戻ります。別の署名付き実行では、エージェントの作業が遅くなります。"
-{
-  "html": "<div class=\"diagram-webhook\"><div class=\"diagram-box\" data-rough>受信webhook<br><small class=\"diagram-muted\">Slack · Stripe · email</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>Handler</strong><div class=\"diagram-step\"><span class=\"diagram-pill\">1</span><small class=\"diagram-muted\">verify signature</small></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><small class=\"diagram-muted\">作業を SQL に挿入</small></div><div class=\"diagram-step\"><span class=\"diagram-pill\">3</span><small class=\"diagram-muted\">self-fire processor</small></div><div class=\"diagram-step\"><span class=\"diagram-pill ok\">4</span><small class=\"diagram-muted\">return 200 now</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Signed processor<br><small class=\"diagram-muted\">エージェントループを実行し結果を投稿</small></div></div>",
-  "css": ".diagram-webhook{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-webhook .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:14px 16px}.diagram-webhook .diagram-step{display:flex;align-items:center;gap:8px}.diagram-webhook .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-17fvm" title={"統合キューのパターン"} summary={"Webhook ハンドラーはミリ秒単位で戻ります。別の署名付き実行では、エージェントの作業が遅くなります。"}>
+
+```html
+<div class="diagram-webhook">
+  <div class="diagram-box" data-rough>
+    受信webhook<br /><small class="diagram-muted">Slack · Stripe · email</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Handler</strong>
+    <div class="diagram-step">
+      <span class="diagram-pill">1</span
+      ><small class="diagram-muted">verify signature</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span
+      ><small class="diagram-muted">作業を SQL に挿入</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">3</span
+      ><small class="diagram-muted">self-fire processor</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill ok">4</span
+      ><small class="diagram-muted">return 200 now</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Signed processor<br /><small class="diagram-muted"
+      >エージェントループを実行し結果を投稿</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-webhook {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-webhook .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+.diagram-webhook .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-webhook .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!WARNING]
 > 応答を返した後は、待機していない Promise に依存しないでください。サーバーレス ホストは実行をフリーズします。正規統合キューについては、[Messaging](/docs/messaging) を参照してください。
 

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

@@ -27,13 +27,54 @@ description: "フレームワークに組み込まれた Google ドキュメン
 
 `public` は意図的に静かなレベルです。公開リソースは直接リンクからアクセスできますが、他のユーザーのサイドバー、リスト、検索には**表示されません**。これにより、「URL を共有するためのパブリック」と「クロスユーザー検出のためのパブリック」が分離されます。クロスユーザー検出を本当に必要とするギャラリーとテンプレート カタログは、明示的にオプトインします。
 
-```an-diagram title="視界が外側に広がる" summary="リソースの大まかな可視性がフロアを設定します。コンパニオン テーブルで明示的に共有を許可すると、指定されたユーザーが先頭に追加されます。"
-{
-  "html": "<div class=\"share-tiers\"><div class=\"diagram-card\"><span class=\"diagram-pill\">private</span><small class=\"diagram-muted\">owner + explicit grants only &middot; <strong>default</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">org</span><small class=\"diagram-muted\">+ anyone in the same org (read-only)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">public</span><small class=\"diagram-muted\">+ anyone with the link (read-only) &middot; hidden from others' lists/search</small></div></div>",
-  "css": ".share-tiers{display:flex;flex-direction:column;align-items:stretch;gap:8px}.share-tiers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.share-tiers .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-5w1p9g" title={"視界が外側に広がる"} summary={"リソースの大まかな可視性がフロアを設定します。コンパニオン テーブルで明示的に共有を許可すると、指定されたユーザーが先頭に追加されます。"}>
+
+```html
+<div class="share-tiers">
+  <div class="diagram-card">
+    <span class="diagram-pill">private</span
+    ><small class="diagram-muted"
+      >owner + explicit grants only &middot; <strong>default</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">org</span
+    ><small class="diagram-muted">+ anyone in the same org (read-only)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">public</span
+    ><small class="diagram-muted"
+      >+ anyone with the link (read-only) &middot; hidden from others'
+      lists/search</small
+    >
+  </div>
+</div>
+```
+
+```css
+.share-tiers {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+.share-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.share-tiers .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 共有付与における役割 {#roles}
 
 特定のユーザーまたは組織と共有する場合は、役割を選択します。

package/docs/content/locales/ja-JP/skills-guide.mdx

@@ -13,13 +13,72 @@ Skills は `.agents/skills/<name>/SKILL.md` にあり、エージェント向け
 
 すべてのスキルのフロントマター `name` および `description` は常にシステム プロンプトの skills ブロックに挿入されるため、エージェントは skills が何であるかを認識します。エージェントがスキルがタスクに関連すると判断すると、完全なスキル本体がオンデマンドでロードされます (`docs-search` 経由でも表示されます)。これが、説明を短くし、トリガー固有にすることが重要である理由です。説明は、残りをロードするかどうかを決定する前にエージェントが読み取る唯一の内容です。
 
-```an-diagram title="段階的な開示" summary="すべてのスキルの名前と説明のみが常にコンテキストに含まれます。タスクが一致すると、ボディ全体がオンデマンドでロードされます。"
-{
-  "html": "<div class=\"sk-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">常にシステムプロンプト内</span><div class=\"sk-list\"><span class=\"diagram-pill\">storing-data &mdash; <small class=\"diagram-muted\">add data models&hellip;</small></span><span class=\"diagram-pill\">real-time-sync &mdash; <small class=\"diagram-muted\">wire polling&hellip;</small></span><span class=\"diagram-pill\">create-skill &mdash; <small class=\"diagram-muted\">add a skill&hellip;</small></span></div><small class=\"diagram-muted\">just name + description (cheap)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><small class=\"diagram-muted\">task matches a description</small><span class=\"diagram-pill accent\">load on demand</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Full <code>SKILL.md</code> body<br><small class=\"diagram-muted\">ルール、コード、やること/避けること</small></div></div>",
-  "css": ".sk-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.sk-flow .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:240px}.sk-flow .sk-list{display:flex;flex-direction:column;gap:6px}.sk-flow .center{display:flex;flex-direction:column;align-items:center;gap:6px}.sk-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-b44ilg" title={"段階的な開示"} summary={"すべてのスキルの名前と説明のみが常にコンテキストに含まれます。タスクが一致すると、ボディ全体がオンデマンドでロードされます。"}>
+
+```html
+<div class="sk-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">常にシステムプロンプト内</span>
+    <div class="sk-list">
+      <span class="diagram-pill"
+        >storing-data &mdash;
+        <small class="diagram-muted">add data models&hellip;</small></span
+      ><span class="diagram-pill"
+        >real-time-sync &mdash;
+        <small class="diagram-muted">wire polling&hellip;</small></span
+      ><span class="diagram-pill"
+        >create-skill &mdash;
+        <small class="diagram-muted">add a skill&hellip;</small></span
+      >
+    </div>
+    <small class="diagram-muted">just name + description (cheap)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <small class="diagram-muted">task matches a description</small
+    ><span class="diagram-pill accent">load on demand</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Full <code>SKILL.md</code> body<br /><small class="diagram-muted"
+      >ルール、コード、やること/避けること</small
+    >
+  </div>
+</div>
+```
+
+```css
+.sk-flow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.sk-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 240px;
+}
+.sk-flow .sk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sk-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.sk-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## フレームワーク skills {#framework-skills}
 
 これらは、**デフォルト テンプレート**にバンドルされている skills です。特定のアプリで使用できる正確なセットは、スキャフォールディング元のテンプレートによって異なります。実際に同梱されているものについては、そのテンプレートの `.agents/skills/` ディレクトリを確認してください。
@@ -148,14 +207,64 @@ scope: dev
 
 これは、`.claude/skills` を読み取るだけの Claude コードに依存する古いハックを置き換えます。`scope: dev` は、開発とランタイムの分割を第一級の明示的な選択にします。
 
-```an-diagram title="どのエージェントがどのスキルをロードするか" summary="スコープは、アプリ内ランタイム エージェントがスキルを認識するかどうかを決定します。dev スキルは、コーディング エージェントにのみ表示されます。"
-{
-"html": "<div class=\"sc-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill\">.agents/skills/</span><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: both</span><small class=\"diagram-muted\">default</small></div><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: runtime</span></div><div class=\"sc-row\"><span class=\"diagram-pill warn\">scope: dev</span></div></div><div class=\"sc-targets\"><div class=\"diagram-box\">Runtime agent<br><small class=\"diagram-muted\">reads <code>both</code> + <code>runtime</code></small></div><div class=\"diagram-box\">コーディングエージェント<br><small class=\"diagram-muted\">Claude Code reads <code>.claude/skills/</code> + <code>dev</code></small></div></div></div>",
-"css": ".sc-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.sc-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.sc-grid .sc-row{display:flex;align-items:center;gap:8px}.sc-grid .sc-targets{display:flex;flex-direction:column;gap:10px}"
-}
+<Diagram id="doc-block-amdqoz" title={"どのエージェントがどのスキルをロードするか"} summary={"スコープは、アプリ内ランタイム エージェントがスキルを認識するかどうかを決定します。dev スキルは、コーディング エージェントにのみ表示されます。"}>
+
+```html
+<div class="sc-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill">.agents/skills/</span>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: both</span
+      ><small class="diagram-muted">default</small>
+    </div>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: runtime</span>
+    </div>
+    <div class="sc-row"><span class="diagram-pill warn">scope: dev</span></div>
+  </div>
+  <div class="sc-targets">
+    <div class="diagram-box">
+      Runtime agent<br /><small class="diagram-muted"
+        >reads <code>both</code> + <code>runtime</code></small
+      >
+    </div>
+    <div class="diagram-box">
+      コーディングエージェント<br /><small class="diagram-muted"
+        >Claude Code reads <code>.claude/skills/</code> +
+        <code>dev</code></small
+      >
+    </div>
+  </div>
+</div>
+```
 
+```css
+.sc-grid {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.sc-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.sc-grid .sc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-grid .sc-targets {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 ```
 
+</Diagram>
+
 > **こちらも参照:** スキルの説明を言葉で表現する方法、段階的な開示を適用する方法、`AGENTS.md` を無駄のないものに保つ方法については、[Writing Agent Instructions](/docs/writing-agent-instructions) を参照してください。
 
 ## Skills 対 AGENTS.md {#skills-vs-agents-md}

package/docs/content/locales/ja-JP/template-analytics.mdx

@@ -18,13 +18,55 @@ description: "わかりやすい英語で分析に関する質問をし、グラ
 
 これは、コード、クエリ、データを所有したいチーム向けの、Amplitude、Mixpanel、Looker に代わるオープンソースです。
 
-```an-diagram title="チャートへの質問" summary="エージェントはデータ ディクショナリを参照し、SQL を書き込み、それをウェアハウスに対して検証してから、グラフをレンダリングするかパネルを保存します。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">平易な言葉<br>question</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads data dictionary</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL に書き込み</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">Dry-run検証</div><small class=\"diagram-muted\">BigQuery / ソース</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">チャート、テーブル、または<br>saved panel</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-x265my" title={"チャートへの質問"} summary={"エージェントはデータ ディクショナリを参照し、SQL を書き込み、それをウェアハウスに対して検証してから、グラフをレンダリングするかパネルを保存します。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">平易な言葉<br />question</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">reads data dictionary</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>SQL に書き込み</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">Dry-run検証</div>
+    <small class="diagram-muted">BigQuery / ソース</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">チャート、テーブル、または<br />saved panel</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## それを使って何ができるか
 
 - **わかりやすい英語でデータに関する質問をします。** 「先月のサインアップの何パーセントが有料に変換されましたか?」または「過去 6 か月間、毎週のアクティブ ユーザーを表示します。」エージェントは適切なソースを選択し、SQL を書き込み、グラフをレンダリングします。

package/docs/content/locales/ja-JP/template-assets.mdx

@@ -18,13 +18,73 @@ Assets は、ブランドと一貫したメディアを作成および管理す
 
 アプリを開くと、選択したライブラリ、プロンプト、参照、生成された候補が 1 つのワークスペースに残ります。エージェントは、UI が使用するのと同じ actions を通じて、すべてのアセットを参照、検索、生成、調整、エクスポートできます。
 
-```an-diagram title="生成、レビュー、再利用" summary="参照とプロンプトにより、セッションの生成と選択が行われます。選択したアセットはライブラリに配置され、ピッカーまたは A2A を介して他のアプリに流出します。"
-{
-  "html": "<div class=\"diagram-assets\"><div class=\"diagram-col\"><div class=\"diagram-node\">References<br><small class=\"diagram-muted\">ロゴ、製品画像、スタイル</small></div><div class=\"diagram-node\">プロンプト<br><small class=\"diagram-muted\">チャットまたは Generate コントロール</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">生成セッション</span><small class=\"diagram-muted\">image &amp; video candidates · audit log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Library</span><small class=\"diagram-muted\">選択済みでブランド一貫性のある assets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Picker<br><small class=\"diagram-muted\">iframe / MCP アプリ</small></div><div class=\"diagram-node\">A2A<br><small class=\"diagram-muted\">スライド · デザイン · コンテンツ</small></div></div></div>",
-  "css": ".diagram-assets{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-assets .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-assets .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-assets .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-o95vnt" title={"生成、レビュー、再利用"} summary={"参照とプロンプトにより、セッションの生成と選択が行われます。選択したアセットはライブラリに配置され、ピッカーまたは A2A を介して他のアプリに流出します。"}>
+
+```html
+<div class="diagram-assets">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      References<br /><small class="diagram-muted"
+        >ロゴ、製品画像、スタイル</small
+      >
+    </div>
+    <div class="diagram-node">
+      プロンプト<br /><small class="diagram-muted"
+        >チャットまたは Generate コントロール</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">生成セッション</span
+    ><small class="diagram-muted"
+      >image &amp; video candidates · audit log</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Library</span
+    ><small class="diagram-muted">選択済みでブランド一貫性のある assets</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Picker<br /><small class="diagram-muted">iframe / MCP アプリ</small>
+    </div>
+    <div class="diagram-node">
+      A2A<br /><small class="diagram-muted"
+        >スライド · デザイン · コンテンツ</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-assets {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-assets .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-assets .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-assets .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## いつ選択するか
 
 - **チームには、1 回限りの一般的なメディア プロンプトではなく、再利用可能なビジュアル ディレクションが必要です**。承認されたロゴ、製品ショット、スタイル例を収集して、何世代にもわたってブランドを維持できるようにします。