@agent-native/core 0.79.26 → 0.79.27

package/corpus/core/docs/content/locales/ja-JP/automations.mdx

@@ -9,13 +9,52 @@ description: "自然言語条件を使用したイベントトリガーおよび
 
 オートメーションは、`web-request` ツールを介して **イベント トリガー**、**自然言語条件**、**アウトバウンド HTTP** を使用して [recurring jobs](/docs/recurring-jobs) を拡張します。これらは、定期的なジョブとして同じ `jobs/<name>.md` ファイル形式、ストレージ、および「3 つの方法を作成」ワークフローを使用します。共有形式については、[Recurring Jobs](/docs/recurring-jobs#job-file) を参照してください。このページでは、イベント ドリブン オートメーションの新機能のみを説明します。
 
-```an-diagram title="Xが起こったらYをする" summary="イベントがバス上で発生し、オプションの自然言語条件によってイベントがゲートされ、エージェントが完全なツール アクセス権でオートメーション本体を実行します。"
-{
-  "html": "<div class=\"auto-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Event</span><small class=\"diagram-muted\"><code>calendar.booking.created</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Condition</span><small class=\"diagram-muted\">Haiku checks: &ldquo;email ends with @builder.io&rdquo;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">エージェントがbodyを実行</span><small class=\"diagram-muted\">actions &middot; web-request &middot; MCP &middot; sub-agents</small></div></div>",
-  "css": ".auto-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.auto-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:180px}.auto-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-1f6019n" title={"Xが起こったらYをする"} summary={"イベントがバス上で発生し、オプションの自然言語条件によってイベントがゲートされ、エージェントが完全なツール アクセス権でオートメーション本体を実行します。"}>
+
+```html
+<div class="auto-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Event</span
+    ><small class="diagram-muted"><code>calendar.booking.created</code></small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Condition</span
+    ><small class="diagram-muted"
+      >Haiku checks: &ldquo;email ends with @builder.io&rdquo;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">エージェントがbodyを実行</span
+    ><small class="diagram-muted"
+      >actions &middot; web-request &middot; MCP &middot; sub-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.auto-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.auto-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  min-width: 180px;
+}
+.auto-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## 2 つのトリガー タイプ {#trigger-types}
 
 | タイプ     | 次の場合に起動                                                 | キーフィールド      |
@@ -225,13 +264,76 @@ Confirm an automation's wiring and condition without waiting for a real provider
 
 ## 派遣の仕組み {#dispatch}
 
-```an-diagram title="ディスパッチパス" summary="起動されたイベントから完了したエージェントの実行まで、所有権の範囲と自然言語の条件によって制御されます。"
-{
-  "html": "<div class=\"disp\"><div class=\"diagram-box accent\">event fired on the bus</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">match</span><small class=\"diagram-muted\">load enabled automations subscribed to this event name</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">scope</span><small class=\"diagram-muted\">keep only those owned by the event's owner (or shared)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">condition</span><small class=\"diagram-muted\">Haiku yes/no on the payload &mdash; false &rarr; <code>skipped</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">run</span><small class=\"diagram-muted\"><code>runAgentLoop</code> bodyをプロンプト、payloadをコンテキストにして5分タイムアウト</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">record</span><small class=\"diagram-muted\">write <code>lastRun</code> / <code>lastStatus</code> / <code>lastError</code></small></div></div>",
-  "css": ".disp{display:flex;flex-direction:column;gap:6px;max-width:540px}.disp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.disp .diagram-box{align-self:flex-start}.disp .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-1p6nwla" title={"ディスパッチパス"} summary={"起動されたイベントから完了したエージェントの実行まで、所有権の範囲と自然言語の条件によって制御されます。"}>
+
+```html
+<div class="disp">
+  <div class="diagram-box accent">event fired on the bus</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">match</span
+    ><small class="diagram-muted"
+      >load enabled automations subscribed to this event name</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">scope</span
+    ><small class="diagram-muted"
+      >keep only those owned by the event's owner (or shared)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">condition</span
+    ><small class="diagram-muted"
+      >Haiku yes/no on the payload &mdash; false &rarr;
+      <code>skipped</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">run</span
+    ><small class="diagram-muted"
+      ><code>runAgentLoop</code>
+      bodyをプロンプト、payloadをコンテキストにして5分タイムアウト</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">record</span
+    ><small class="diagram-muted"
+      >write <code>lastRun</code> / <code>lastStatus</code> /
+      <code>lastError</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.disp {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 540px;
+}
+.disp .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.disp .diagram-box {
+  align-self: flex-start;
+}
+.disp .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 ## 例 {#example}
 
 **ユーザー:** 「誰かが @builder.io メールで予約したら、Slack でメッセージを送ってください。」

package/corpus/core/docs/content/locales/ja-JP/blueprint-installer.mdx

@@ -17,13 +17,53 @@ agent-native add provider stripe | claude
 agent-native add channel discord  | codex
 ```
 
-```an-diagram title="add はレシピを印刷します。コーディングエージェントがそれを適用します" summary="agent-native は、Markdown ブループリントを stdout に出力します (診断は stderr に出力されます)。それを Claude Code または Codex にパイプすると、フルコンテキストでライブ リポジトリが編集されます。"
-{
-  "html": "<div class=\"diagram-bp\"><div class=\"diagram-node\" data-rough>agent-native add<br><small class=\"diagram-muted\">&lt;kind&gt; &lt;name|URL&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Markdownブループリント<br><small class=\"diagram-muted\">stdout · 触るファイル · ルール · 検証</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>コーディングエージェント<br><small class=\"diagram-muted\">claude · codex</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">edits your live repo</div></div>",
-  "css": ".diagram-bp{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bp .diagram-arrow{font-size:22px;line-height:1}.diagram-bp .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1ttypmn" title={"add はレシピを印刷します。コーディングエージェントがそれを適用します"} summary={"agent-native は、Markdown ブループリントを stdout に出力します (診断は stderr に出力されます)。それを Claude Code または Codex にパイプすると、フルコンテキストでライブ リポジトリが編集されます。"}>
+
+```html
+<div class="diagram-bp">
+  <div class="diagram-node" data-rough>
+    agent-native add<br /><small class="diagram-muted"
+      >&lt;kind&gt; &lt;name|URL&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Markdownブループリント<br /><small class="diagram-muted"
+      >stdout · 触るファイル · ルール · 検証</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    コーディングエージェント<br /><small class="diagram-muted"
+      >claude · codex</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">edits your live repo</div>
+</div>
+```
+
+```css
+.diagram-bp {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bp .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-bp .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 使用法 {#usage}
 
 ```bash

package/corpus/core/docs/content/locales/ja-JP/cli-adapters.mdx

@@ -12,13 +12,53 @@ description: "標準アダプター インターフェイス (アダプター
 
 CLI アダプターは単一のコマンドライン ツール (`gh`、`ffmpeg`、`stripe`、`aws`) をラップするため、エージェントはアダプターを検出し、インストールされているかどうかを確認し、一貫した stdout/stderr/exit-code 結果で実行できます。この継ぎ目がない場合、すべてのスクリプトは、CLI を呼び出してその出力を解析する方法を再発明します。
 
-```an-diagram title="CLI アダプタ → レジストリ → アクション サーフェス" summary="ShellCliAdapter はバイナリをラップします。 CliRegistry は検出用のアダプターを収集します。 defineAction は、エージェント + UI アクション サーフェス上で 1 つの呼び出しを公開します。"
-{
-  "html": "<div class=\"diagram-cli\"><div class=\"diagram-node\" data-rough>gh · ffmpeg · stripe<br><small class=\"diagram-muted\">command-line tools</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>ShellCliAdapter<br><small class=\"diagram-muted\">isAvailable · execute</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>CliRegistry<br><small class=\"diagram-muted\">describe() for discovery</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">defineAction</div></div>",
-  "css": ".diagram-cli{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-cli .diagram-arrow{font-size:22px;line-height:1}.diagram-cli .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-tjhxpy" title={"CLI アダプタ → レジストリ → アクション サーフェス"} summary={"ShellCliAdapter はバイナリをラップします。 CliRegistry は検出用のアダプターを収集します。 defineAction は、エージェント + UI アクション サーフェス上で 1 つの呼び出しを公開します。"}>
+
+```html
+<div class="diagram-cli">
+  <div class="diagram-node" data-rough>
+    gh · ffmpeg · stripe<br /><small class="diagram-muted"
+      >command-line tools</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    ShellCliAdapter<br /><small class="diagram-muted"
+      >isAvailable · execute</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    CliRegistry<br /><small class="diagram-muted"
+      >describe() for discovery</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill accent">defineAction</div>
+</div>
+```
+
+```css
+.diagram-cli {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-cli .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-cli .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## インターフェース {#the-interface}
 
 すべての CLI アダプターは `CliAdapter` を実装します:

package/corpus/core/docs/content/locales/ja-JP/client.mdx

@@ -15,13 +15,51 @@ description: "エージェント ネイティブ アプリ用の React フック
 
 ブラウザからアプリ データを読み書きする主な方法は、アクション フックを使用することです。 `fetch` 呼び出しを `/_agent-native/*` ルートに手書きしないでください。代わりに名前付きヘルパーを使用してください ([Actions](/docs/actions) を参照)。
 
-```an-diagram title="ブラウザのデータループ" summary="フックはアクションを通じて読み取りと書き込みを行います。 useDbSync はデータベースを監視し、エージェントとバックグラウンドの書き込みが同じキャッシュを自動的に再取得するようにします。"
-{
-  "html": "<div class=\"diagram-client\"><div class=\"diagram-col\"><div class=\"diagram-node\">useActionQuery<br><small class=\"diagram-muted\">cached read</small></div><div class=\"diagram-node\">useActionMutation<br><small class=\"diagram-muted\">write + invalidate</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-box\" data-rough>Actions<br><small class=\"diagram-muted\">/_agent-native/actions/*</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQLデータベース</strong></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">useDbSync &rarr; refetch on change</div></div>",
-  "css": ".diagram-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-client .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-client .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-14hiq5q" title={"ブラウザのデータループ"} summary={"フックはアクションを通じて読み取りと書き込みを行います。 useDbSync はデータベースを監視し、エージェントとバックグラウンドの書き込みが同じキャッシュを自動的に再取得するようにします。"}>
+
+```html
+<div class="diagram-client">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useActionQuery<br /><small class="diagram-muted">cached read</small>
+    </div>
+    <div class="diagram-node">
+      useActionMutation<br /><small class="diagram-muted"
+        >write + invalidate</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-box" data-rough>
+    Actions<br /><small class="diagram-muted">/_agent-native/actions/*</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough><strong>SQLデータベース</strong></div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">useDbSync &rarr; refetch on change</div>
+</div>
+```
+
+```css
+.diagram-client {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-client .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-client .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```tsx
 import {
   useActionQuery,
@@ -376,13 +414,46 @@ function DashboardView({ id }) {
 - **UI によって開始されたミューテーション:** `useActionMutation` を使用して UI からアクションを実行すると、ミューテーションは成功するとすぐに `source: "action"` のローカル イベントを起動します。これにより、そのアクションに応じてすべてのクエリ キーの**即時の楽観的な再取得**がトリガーされ、視覚的な遅延が回避されます。
 - **バックグラウンドまたはエージェントの変更:** AI エージェント、Webhook、またはバックグラウンド ワーカーがデータを変更すると、更新がクライアントにブロードキャストされます。クライアントの `useDbSync` は、これを SSE (サーバー送信イベント) 経由で即座にキャプチャするか、**2 秒のポーリング ティック** にフォールバックします。その後、クエリ キーのバージョンが変化し、バックグラウンドでの再取得がトリガーされます。
 
-```an-diagram title="再フェッチへの 2 つのパス" summary="ローカルな突然変異は、それ自体のキャッシュを即座に無効にします。リモート書き込みは、SSE、またはフォールバックとしてのポーリング ティックを介してこのタブに到達します。"
-{
-  "html": "<div class=\"diagram-latency\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">このタブ</span><strong>useActionMutation</strong><small class=\"diagram-muted\">fires source: \"action\" on success &rarr; instant local refetch</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">エージェント · webhook · 別タブ</span><strong>リモート書き込み</strong><small class=\"diagram-muted\">SSE push, or the ~2s polling tick as fallback &rarr; version bumps &rarr; background refetch</small></div></div></div>",
-  "css": ".diagram-latency .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-latency .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px}"
+<Diagram id="doc-block-prwgbw" title={"再フェッチへの 2 つのパス"} summary={"ローカルな突然変異は、それ自体のキャッシュを即座に無効にします。リモート書き込みは、SSE、またはフォールバックとしてのポーリング ティックを介してこのタブに到達します。"}>
+
+```html
+<div class="diagram-latency">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill ok">このタブ</span
+      ><strong>useActionMutation</strong
+      ><small class="diagram-muted"
+        >fires source: "action" on success &rarr; instant local refetch</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">エージェント · webhook · 別タブ</span
+      ><strong>リモート書き込み</strong
+      ><small class="diagram-muted"
+        >SSE push, or the ~2s polling tick as fallback &rarr; version bumps
+        &rarr; background refetch</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-latency .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-latency .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## cn(...入力) {#cn}
 
 クラス名をマージするためのユーティリティ (clsx + tailwind-merge):

package/corpus/core/docs/content/locales/ja-JP/cloneable-saas.mdx

@@ -51,13 +51,54 @@ description: "動作する SaaS 製品をフォークして、エージェント
 
 「独自の SaaS が欲しい」から「独自の SaaS を持っている」までの道のりは短い:
 
-```an-diagram title="フォークしてカスタマイズする" summary="完成した製品を選択し、ブランド化し、平易な英語で進化させ、独自のドメインに出荷します。"
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><small class=\"diagram-muted\">名前、色、ロゴ、コピー</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-uhpr3b" title={"フォークしてカスタマイズする"} summary={"完成した製品を選択し、ブランド化し、平易な英語で進化させ、独自のドメインに出荷します。"}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-card">
+    <span class="diagram-pill">1</span><strong>Pick</strong
+    ><small class="diagram-muted">a complete template</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2</span><strong>Brand</strong
+    ><small class="diagram-muted">名前、色、ロゴ、コピー</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">3</span><strong>Customize</strong
+    ><small class="diagram-muted">ask the agent &#8635;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">4</span><strong>Ship</strong
+    ><small class="diagram-muted">your own domain</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **テンプレートを選択します。** CLI ピッカーを使用するか、ドキュメントを参照して開始するテンプレートを選択します。
 2. **ブランド化します。** 名前、色、ロゴ、コピーを変更します。ほとんどのテンプレートは、これを単一の構成ファイルで公開します。
 3. **カスタマイズします。** エージェントに、必要な列の追加、受信トレイのグループ方法の変更、内部 API への接続、新しいビューの追加を依頼します。エージェントはコードを編集します。差分を確認してください。
@@ -74,13 +115,49 @@ description: "動作する SaaS 製品をフォークして、エージェント
 
 結果: 通常の SaaS 導入の経済性を維持しながら、各ユーザーに Claude コード レベルの柔軟性をもたらします。
 
-```an-diagram title="ユーザーごとのフォークがスケーリングする理由" summary="フォークとカスタマイズのモデルは 2 つのアイデアによって実用的に保たれています。つまり、エージェントがメンテナンスを行い、ユーザーごとのカスタマイズはユーザーごとのコードではなく SQL で行われます。"
-{
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>共有d codebase</strong><small class=\"diagram-muted\">1つのアプリを1回デプロイ</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL内のユーザー別レイヤー</strong><small class=\"diagram-muted\">skills · メモリ · 指示 · MCP · サブエージェント</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
-  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+<Diagram id="doc-block-1m85zma" title={"ユーザーごとのフォークがスケーリングする理由"} summary={"フォークとカスタマイズのモデルは 2 つのアイデアによって実用的に保たれています。つまり、エージェントがメンテナンスを行い、ユーザーごとのカスタマイズはユーザーごとのコードではなく SQL で行われます。"}>
+
+```html
+<div class="diagram-why">
+  <div class="diagram-panel" data-rough>
+    <strong>共有d codebase</strong
+    ><small class="diagram-muted">1つのアプリを1回デプロイ</small>
+    <div class="diagram-pill accent">agent does the maintenance</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL内のユーザー別レイヤー</strong
+    ><small class="diagram-muted"
+      >skills · メモリ · 指示 · MCP · サブエージェント</small
+    >
+    <div class="diagram-pill ok">no per-user code</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-why {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-why .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 18px;
+  min-width: 240px;
+  flex: 1;
+}
+.diagram-why .diagram-arrow {
+  font-size: 24px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## フォークしたくないですか? {#hosted}
 
 その必要はありません。すべてのテンプレートは、`agent-native.com` — `mail.agent-native.com`、`calendar.agent-native.com` などでホストされるアプリとしても利用できます。ホストされたバージョンを無料または有料で使用します。ホストされたバージョンが公開していないものを変更したい場合にのみフォークしてください。

package/corpus/core/docs/content/locales/ja-JP/code-agents-ui.mdx

@@ -25,13 +25,73 @@ Agent-Native コードは、Agent-Native コーディング サーフェスで
 - **デスクトップ**: 左側のサイドバーの「コード」タブでは、同じ実行モデルを使用しながら、ネイティブ ターミナルの起動、アプリの Web ビュー、デスクトップのディープ リンクを追加します。
 - **共有 UI**: `@agent-native/code-agents-ui` は再利用可能な React サーフェスをレンダリングします。
 
-```an-diagram title="1 つの運営ストア上の 3 つのレイヤー" summary="CLI、Desktop、および共有 UI は、同じファイルベースの実行ストアおよびエグゼキューター上の異なるサーフェスです。ホストは CodeAgentsHost コントラクトを通じてそれを適応させます。"
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">開始 · 再開 · 状態 · 停止</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">ネイティブ端末 · webviews · ディープリンク</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">共有d UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>ファイルベースのrun store + 実行器<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-fghvxh" title={"1 つの運営ストア上の 3 つのレイヤー"} summary={"CLI、Desktop、および共有 UI は、同じファイルベースの実行ストアおよびエグゼキューター上の異なるサーフェスです。ホストは CodeAgentsHost コントラクトを通じてそれを適応させます。"}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted">開始 · 再開 · 状態 · 停止</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted"
+        >ネイティブ端末 · webviews · ディープリンク</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">共有d UI</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">host contract</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    ファイルベースのrun store + 実行器<br /><small class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 現在の分割は意図的に統合されています。標準のエージェント サイドバーとエージェント チームはコア `run-manager` ライフサイクルで実行されますが、Agent-Native コードはファイルベースのコード実行ストアと共有バックグラウンド実行コントローラー ボキャブラリに支えられたローカルの長時間実行セッションを使用します。
 
 共有 UI はホスト主導型です。 Electron で実行されているのか、ブラウザ テンプレートで実行されているのか、それとも将来ホストされるシェルで実行されているのかはわかりません。ホストは `CodeAgentsHost` 実装を提供します。
@@ -373,13 +433,45 @@ Agent-Native の残り:
 5. モバイルは Dispatch から `hosts`、`runs`、および `transcript` を読み取ります。決して話さない
    デスクトップに直接。
 
-```an-diagram title="リモート Dispatch は送信専用です" summary="モバイルがデスクトップと直接通信することはありません。 Desktop は Dispatch をロングポーリングし、コマンドを要求し、ローカル実行ストアを駆動し、結果をミラーリングします。"
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>モバイル / Telegram<br><small class=\"diagram-muted\">/code · セッション</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatchリレー<br><small class=\"diagram-muted\">ホスト · 実行 · トランスクリプト</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">ロングポーリング · クレーム · run storeを駆動</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1fqcjia" title={"リモート Dispatch は送信専用です"} summary={"モバイルがデスクトップと直接通信することはありません。 Desktop は Dispatch をロングポーリングし、コマンドを要求し、ローカル実行ストアを駆動し、結果をミラーリングします。"}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    モバイル / Telegram<br /><small class="diagram-muted"
+      >/code · セッション</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Dispatchリレー<br /><small class="diagram-muted"
+      >ホスト · 実行 · トランスクリプト</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >ロングポーリング · クレーム · run storeを駆動</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 正規のリモート リレー エンドポイントは次のとおりです。
 
 <Endpoint id="doc-block-1i1x5xz" title={"デスクトップのクレームキューにある作業"} method="POST" path="/_agent-native/integrations/remote/poll" summary={"デスクトップはリレーをロングポーリングして、キューに入れられたコマンドを要求します"} auth="Desktop device token" responses={[