@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/ja-JP/pure-agent-apps.mdx

@@ -12,13 +12,57 @@ description: "エージェントが製品全体であるアプリ: アプリと
 に属します。これはまだ実際のアプリです: actions、セッション、アプリの状態、履歴
 設定、認証情報、共有レコードはすべて SQL に保存されます。
 
-```an-diagram title="アプリとエージェントのループが玄関口です" summary="多くのエントリ ポイントは、SQL-backed アクションと状態を介して 1 つのエージェント ループに到達します。結果はリクエストの送信元に返されます。 UIは人間が監視する必要がある場合にのみ追加されます。"
-{
-  "html": "<div class=\"diagram-pure\"><div class=\"diagram-col\"><div class=\"diagram-pill\">Terminal</div><div class=\"diagram-pill\">Slack · メール</div><div class=\"diagram-pill\">スケジュール済みジョブ</div><div class=\"diagram-pill\">Another agent (A2A)</div><div class=\"diagram-pill\">Chat</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">アプリエージェントループ</span><small class=\"diagram-muted\">アクション · セッション · SQL 内のアプリ状態</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>結果が返る<br><small class=\"diagram-muted\">to where it belongs</small></div></div>",
-  "css": ".diagram-pure{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-pure .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-pure .diagram-arrow{font-size:22px;line-height:1}.diagram-pure .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1evvzm8" title={"アプリとエージェントのループが玄関口です"} summary={"多くのエントリ ポイントは、SQL-backed アクションと状態を介して 1 つのエージェント ループに到達します。結果はリクエストの送信元に返されます。 UIは人間が監視する必要がある場合にのみ追加されます。"}>
+
+```html
+<div class="diagram-pure">
+  <div class="diagram-col">
+    <div class="diagram-pill">Terminal</div>
+    <div class="diagram-pill">Slack · メール</div>
+    <div class="diagram-pill">スケジュール済みジョブ</div>
+    <div class="diagram-pill">Another agent (A2A)</div>
+    <div class="diagram-pill">Chat</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">アプリエージェントループ</span
+    ><small class="diagram-muted"
+      >アクション · セッション · SQL 内のアプリ状態</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    結果が返る<br /><small class="diagram-muted">to where it belongs</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-pure {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-pure .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-pure .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-pure .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 作業がバックグラウンドで実行されているときにこの形状に到達すると、出力が残ります
 アプリ、ドメインはワンショットであるか、プロトタイピング中です。エージェントには依然として UI が必要です —
 ダッシュボードではなく、人間が管理、設定、操作するための場所です —

package/docs/content/locales/ja-JP/real-time-collaboration.mdx

@@ -36,13 +36,57 @@ description: "AI エージェントがファーストクラスのピアである
 
 コラボレーション システムには 5 つの連動レイヤーがあります。
 
-```an-diagram title="5つの連動層" summary="メモリ内の CRDT からピア間で更新を運ぶトランスポートまで、各層には 1 つのジョブがあります。"
-{
-  "html": "<div class=\"diagram-stack\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">1 &middot; Yjs Y.Doc</span><small class=\"diagram-muted\">CRDT &mdash; 競合なしマージ、調整役なし</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill\">2 &middot; SQL の正規コンテンツ</span><small class=\"diagram-muted\">_collab_docs &mdash; durable source of truth, versioned</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill\">3 &middot; updatedAt で制御する調整</span><small class=\"diagram-muted\">エージェント編集は SQL bump 経由で伝播</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill\">4 &middot; リードクライアント選出</span><small class=\"diagram-muted\">ちょうど 1 つのタブがスナップショットを適用</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill ok\">5 &middot; SSE 高速パス + ポーリング</span><small class=\"diagram-muted\">数十 ms 程度、どこでも 2 秒ポーリングへフォールバック</small></div></div>",
-  "css": ".diagram-stack{display:flex;flex-direction:column;gap:8px}.diagram-stack .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-nrdan4" title={"5つの連動層"} summary={"メモリ内の CRDT からピア間で更新を運ぶトランスポートまで、各層には 1 つのジョブがあります。"}>
+
+```html
+<div class="diagram-stack">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">1 &middot; Yjs Y.Doc</span
+    ><small class="diagram-muted"
+      >CRDT &mdash; 競合なしマージ、調整役なし</small
+    >
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill">2 &middot; SQL の正規コンテンツ</span
+    ><small class="diagram-muted"
+      >_collab_docs &mdash; durable source of truth, versioned</small
+    >
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill">3 &middot; updatedAt で制御する調整</span
+    ><small class="diagram-muted">エージェント編集は SQL bump 経由で伝播</small>
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill">4 &middot; リードクライアント選出</span
+    ><small class="diagram-muted"
+      >ちょうど 1 つのタブがスナップショットを適用</small
+    >
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill ok">5 &middot; SSE 高速パス + ポーリング</span
+    ><small class="diagram-muted"
+      >数十 ms 程度、どこでも 2 秒ポーリングへフォールバック</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-stack .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ### 1. Yjs Y.Doc (CRDT レイヤー)
 
 各共同ドキュメントは、共有タイプを含む `Y.Doc` です。通常は
@@ -100,13 +144,67 @@ Yjs 状態は、base64 でエンコードされたバイナリとして `_collab
 
 ネットワーク エラーでは、最大 15 秒のジッターを伴う指数バックオフが使用されます。
 
-```an-diagram title="2 つの編集パス、1 つのマージ" summary="人間のキーストロークは Y.Doc → サーバー → SSE という流れになります。エージェントの編集は SQL を通過します。アクションが updatedAt に達し、リード クライアントが調整され、変更が Yjs に再度入ります。"
-{
-  "html": "<div class=\"diagram-collab\"><div class=\"lane\"><span class=\"diagram-pill\">人による編集</span><div class=\"diagram-node\">Y.Doc update<br><small class=\"diagram-muted\">debounce 約80ms</small></div><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\" data-rough>POST /update<br><small class=\"diagram-muted\">apply + persist</small></div><span class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box diagram-accent\">SSE push<br><small class=\"diagram-muted\">to all peers</small></div></div><div class=\"lane\"><span class=\"diagram-pill warn\">エージェント編集</span><div class=\"diagram-node\">ActionがSQLを書き込む<br><small class=\"diagram-muted\">updatedAtを更新</small></div><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\" data-rough>リードクライアント<br><small class=\"diagram-muted\">setContentをY.Docへ</small></div><span class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box diagram-accent\">POST /update<br><small class=\"diagram-muted\">re-enters Yjs &middot; SSE push</small></div></div></div>",
-  "css": ".diagram-collab{display:flex;flex-direction:column;gap:14px}.diagram-collab .lane{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-collab .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ul9tw0" title={"2 つの編集パス、1 つのマージ"} summary={"人間のキーストロークは Y.Doc → サーバー → SSE という流れになります。エージェントの編集は SQL を通過します。アクションが updatedAt に達し、リード クライアントが調整され、変更が Yjs に再度入ります。"}>
+
+```html
+<div class="diagram-collab">
+  <div class="lane">
+    <span class="diagram-pill">人による編集</span>
+    <div class="diagram-node">
+      Y.Doc update<br /><small class="diagram-muted">debounce 約80ms</small>
+    </div>
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box" data-rough>
+      POST /update<br /><small class="diagram-muted">apply + persist</small>
+    </div>
+    <span class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box diagram-accent">
+      SSE push<br /><small class="diagram-muted">to all peers</small>
+    </div>
+  </div>
+  <div class="lane">
+    <span class="diagram-pill warn">エージェント編集</span>
+    <div class="diagram-node">
+      ActionがSQLを書き込む<br /><small class="diagram-muted"
+        >updatedAtを更新</small
+      >
+    </div>
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box" data-rough>
+      リードクライアント<br /><small class="diagram-muted"
+        >setContentをY.Docへ</small
+      >
+    </div>
+    <span class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box diagram-accent">
+      POST /update<br /><small class="diagram-muted"
+        >re-enters Yjs &middot; SSE push</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-collab {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-collab .lane {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-collab .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## クイックスタート {#quickstart}
 
 ### 1.パッケージをインストールする

package/docs/content/locales/ja-JP/recurring-jobs.mdx

@@ -113,13 +113,68 @@ Summarize overnight emails.`,
 
 スケジューラは、インプロセスで実行されるフレームワーク プラグイン (内部 `processRecurringJobs()` ルーチン) です。サーバーが実行されている場所に関係なく、エージェント チャット プラグイン内で `setInterval` が 60 秒ごとに起動します (起動遅延は 10 秒)。
 
-```an-diagram title="スケジューラの 1 つのティック" summary="60 秒ごとに、スケジューラは期限が切れたジョブを見つけ、それぞれを新しいエージェント スレッドとして実行し、結果をジョブ ファイルに書き込みます。"
-{
-  "html": "<div class=\"sched\"><div class=\"diagram-box accent\"><code>setInterval</code> &bull; 60s &#8635;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">1 &middot; scan</span><small class=\"diagram-muted\">list every enabled <code>jobs/*.md</code> across all owners</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2 &middot; due?</span><small class=\"diagram-muted\">compare <code>nextRun</code> to now</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">3 &middot; run</span><small class=\"diagram-muted\">fresh agent thread, job body as the user message &mdash; actions, SQL, A2A, email</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">4 &middot; record</span><small class=\"diagram-muted\">write <code>lastRun</code> / <code>lastStatus</code> / <code>lastError</code>, recompute <code>nextRun</code></small></div></div>",
-  "css": ".sched{display:flex;flex-direction:column;gap:6px;max-width:520px}.sched .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.sched .diagram-box{align-self:flex-start}.sched .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-5yulet" title={"スケジューラの 1 つのティック"} summary={"60 秒ごとに、スケジューラは期限が切れたジョブを見つけ、それぞれを新しいエージェント スレッドとして実行し、結果をジョブ ファイルに書き込みます。"}>
+
+```html
+<div class="sched">
+  <div class="diagram-box accent">
+    <code>setInterval</code> &bull; 60s &#8635;
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">1 &middot; scan</span
+    ><small class="diagram-muted"
+      >list every enabled <code>jobs/*.md</code> across all owners</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2 &middot; due?</span
+    ><small class="diagram-muted">compare <code>nextRun</code> to now</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">3 &middot; run</span
+    ><small class="diagram-muted"
+      >fresh agent thread, job body as the user message &mdash; actions, SQL,
+      A2A, email</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">4 &middot; record</span
+    ><small class="diagram-muted"
+      >write <code>lastRun</code> / <code>lastStatus</code> /
+      <code>lastError</code>, recompute <code>nextRun</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.sched {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 520px;
+}
+.sched .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.sched .diagram-box {
+  align-self: flex-start;
+}
+.sched .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 <Callout id="doc-block-j6yn07" tone="risk">
 
 **Scale-to-zero caveat.** The scheduler is in-process, so on serverless hosts jobs only fire while an instance is warm. If reliable scheduling matters, keep an instance warm with keep-alive pings or use an always-on host (Fly, Render, a VPS).

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

@@ -21,14 +21,53 @@ description: "React Router v8 を使用したエージェント ネイティブ
 
 動的パラメータのセグメントに `$` という接頭辞を付けます。パスレス レイアウト ルート (URL セグメントなし) にするには、`_` というプレフィックスを付けます。テンプレートは `flatRoutes()` を使用します。上記のドット表記ファイルがプライマリです。ネストされたフォルダー形式 `inbox/route.tsx` も機能します。
 
-```an-diagram title="パスレスレイアウトがページを包み込む" summary="_app.tsx レイアウト (URL セグメントなし) は、共有シェルを 1 回レンダリングします。一致したページは <Outlet/> 内でレンダリングされるため、エージェントのサイドバーがナビゲーションに再マウントされることはありません。"
-{
-"html": "<div class=\"diagram-layout\" data-rough><div class=\"diagram-shell\"><span class=\"diagram-pill accent\">_app.tsx</span><small class=\"diagram-muted\">パスなしレイアウト · 永続シェル + エージェントサイドバー</small><div class=\"diagram-outlet\" data-rough><small class=\"diagram-muted\">&lt;Outlet/&gt; — the matched page</small><div class=\"diagram-row\"><span class=\"diagram-pill\">_index.tsx &rarr; /</span><span class=\"diagram-pill\">settings.tsx &rarr; /settings</span><span class=\"diagram-pill\">inbox.$threadId.tsx &rarr; /inbox/:threadId</span></div></div></div></div>",
-"css": ".diagram-layout .diagram-shell{display:flex;flex-direction:column;gap:8px;padding:16px}.diagram-layout .diagram-outlet{display:flex;flex-direction:column;gap:8px;padding:14px;margin-top:6px}.diagram-layout .diagram-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}"
-}
+<Diagram id="doc-block-gw5atq" title={"パスレスレイアウトがページを包み込む"} summary={"_app.tsx レイアウト (URL セグメントなし) は、共有シェルを 1 回レンダリングします。一致したページは <Outlet/> 内でレンダリングされるため、エージェントのサイドバーがナビゲーションに再マウントされることはありません。"}>
+
+```html
+<div class="diagram-layout" data-rough>
+  <div class="diagram-shell">
+    <span class="diagram-pill accent">_app.tsx</span
+    ><small class="diagram-muted"
+      >パスなしレイアウト · 永続シェル + エージェントサイドバー</small
+    >
+    <div class="diagram-outlet" data-rough>
+      <small class="diagram-muted">&lt;Outlet/&gt; — the matched page</small>
+      <div class="diagram-row">
+        <span class="diagram-pill">_index.tsx &rarr; /</span
+        ><span class="diagram-pill">settings.tsx &rarr; /settings</span
+        ><span class="diagram-pill"
+          >inbox.$threadId.tsx &rarr; /inbox/:threadId</span
+        >
+      </div>
+    </div>
+  </div>
+</div>
+```
 
+```css
+.diagram-layout .diagram-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+.diagram-layout .diagram-outlet {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  margin-top: 6px;
+}
+.diagram-layout .diagram-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
 ```
 
+</Diagram>
+
 ## 新しいページを追加しています {#adding-a-page}
 
 ファイルを作成し、デフォルトのコンポーネントをエクスポートします。

package/docs/content/locales/ja-JP/sandbox-adapters.mdx

@@ -40,13 +40,52 @@ Agent-Native にはアダプターの継ぎ目が 2 つあり、狭い部分の
 
 コントラクトを狭く保つということは、リモート アダプタが同じセキュリティ体制を継承することを意味します。親プロセスは、秘密が含まれるすべての所有権を保持します。サンドボックス モジュールを構築し、localhost ブリッジ (リクエスト コンテキストを保持し、ホスト ホワイトリストと SSRF ガードを適用します) を実行し、env をスクラブし、出力をフォーマットします。アダプターは、すでに準備された **非シークレット** モジュール ソースとリソース制限のみを受け取ります。アダプターは、それを*実行*し、stdout/stderr/exit ステータスをキャプチャすることのみを担当します。
 
-```an-diagram title="親は秘密を守ります。アダプターはコードを実行するだけです" summary="run-code はモジュールを構築し、ループバック ブリッジを実行します。アダプターは非シークレット モジュール + 制限を受け取り、stdout/stderr/exit を返します。"
-{
-  "html": "<div class=\"diagram-sandbox\"><div class=\"diagram-box\" data-rough><strong>親プロセス</strong><small class=\"diagram-muted\">モジュール構築 · loopbackブリッジ · envクリーンアップ · 出力形式</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">non-secret module + limits &rarr;</div><div class=\"diagram-pill ok\">&larr; stdout / stderr / exitCode</div><div class=\"diagram-pill\">&harr; bridge calls (127.0.0.1)</div></div><div class=\"diagram-panel center\" data-rough><strong>SandboxAdapter.run</strong><small class=\"diagram-muted\">ローカル子プロセス · Docker · リモート · 永続</small></div></div>",
-  "css": ".diagram-sandbox{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sandbox .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-sandbox .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1w5e184" title={"親は秘密を守ります。アダプターはコードを実行するだけです"} summary={"run-code はモジュールを構築し、ループバック ブリッジを実行します。アダプターは非シークレット モジュール + 制限を受け取り、stdout/stderr/exit を返します。"}>
+
+```html
+<div class="diagram-sandbox">
+  <div class="diagram-box" data-rough>
+    <strong>親プロセス</strong
+    ><small class="diagram-muted"
+      >モジュール構築 · loopbackブリッジ · envクリーンアップ · 出力形式</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">non-secret module + limits &rarr;</div>
+    <div class="diagram-pill ok">&larr; stdout / stderr / exitCode</div>
+    <div class="diagram-pill">&harr; bridge calls (127.0.0.1)</div>
+  </div>
+  <div class="diagram-panel center" data-rough>
+    <strong>SandboxAdapter.run</strong
+    ><small class="diagram-muted"
+      >ローカル子プロセス · Docker · リモート · 永続</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-sandbox {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sandbox .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-sandbox .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## インターフェース {#interface}
 
 シームは `packages/core/src/coding-tools/sandbox/` のコア内に存在します — `adapter.ts` (コントラクト)、`index.ts` (選択: `getSandboxAdapter()` / `registerSandboxAdapter()`)、および `local-child-process-adapter.ts` (デフォルト)。 `run-code.ts` によってパッケージ内で配線されています。ホストは、`index.ts` 登録ヘルパーを介して (または、Docker バックエンドの場合は、これらのファイルを直接編集する [blueprint](/docs/blueprint-installer) を介して) 別のバックエンドに接続します。

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

@@ -9,13 +9,45 @@ description: "エージェント ネイティブ アプリのセキュリティ
 
 ## 無料で手に入るものとあなたが所有するもの {#what-you-own}
 
-```an-diagram title="多層防御" summary="フレームワークは脅威の表面の大部分を所有します。所有するものは 2 つあります。1 つは外部入力のスコープ設定と検証のためのテーブルのタグ付けです。"
-{
-  "html": "<div class=\"sec-layers\"><div class=\"diagram-card free\"><span class=\"diagram-pill ok\">フレームワークが所有</span><small class=\"diagram-muted\">SQL isolation &middot; parameterized queries &middot; XSS escaping &middot; auth guard &middot; CSRF cookies &middot; secret encryption</small></div><div class=\"diagram-card you\"><span class=\"diagram-pill warn\">自分で所有</span><small class=\"diagram-muted\">A. tag tables with ownableColumns() &amp; route through access guards<br>B. give every action a Zod schema &amp; send user URLs through the SSRF guard</small></div></div>",
-  "css": ".sec-layers{display:flex;flex-direction:column;gap:12px}.sec-layers .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}"
+<Diagram id="doc-block-ku3gn8" title={"多層防御"} summary={"フレームワークは脅威の表面の大部分を所有します。所有するものは 2 つあります。1 つは外部入力のスコープ設定と検証のためのテーブルのタグ付けです。"}>
+
+```html
+<div class="sec-layers">
+  <div class="diagram-card free">
+    <span class="diagram-pill ok">フレームワークが所有</span
+    ><small class="diagram-muted"
+      >SQL isolation &middot; parameterized queries &middot; XSS escaping
+      &middot; auth guard &middot; CSRF cookies &middot; secret
+      encryption</small
+    >
+  </div>
+  <div class="diagram-card you">
+    <span class="diagram-pill warn">自分で所有</span
+    ><small class="diagram-muted"
+      >A. tag tables with ownableColumns() &amp; route through access guards<br />B.
+      give every action a Zod schema &amp; send user URLs through the SSRF
+      guard</small
+    >
+  </div>
+</div>
+```
+
+```css
+.sec-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sec-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 標準パターンに基づいて構築すると、フレームワークはすでに脅威の表面のほとんどを処理します。
 
 - **データ分離** — エージェント SQL は、現在のユーザー (およびアクティブな組織) の行のみを表示できるように書き換えられます。 [Data Scoping](#data-scoping) を参照してください。
@@ -122,13 +154,55 @@ const res = await ssrfSafeFetch(userProvidedUrl, {}, { maxRedirects: 3 });
 session.orgId → AGENT_ORG_ID → SQL row scoping
 ```
 
-```an-diagram title="スコーピングパイプライン" summary="エージェント SQL はベース テーブルに直接触れることはありません。現在の ID をスコープとする一時ビューを介して読み取ります。そのため、ベア テーブル名は所有されている行のみを返すことができます。"
-{
-  "html": "<div class=\"scope-pipe\"><div class=\"diagram-node\">サインイン済みセッション<br><small class=\"diagram-muted\">email &middot; orgId</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Request context<br><small class=\"diagram-muted\">AGENT_ORG_ID</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Temporary VIEW<br><small class=\"diagram-muted\">WHERE owner_email = ? AND org_id = ?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">エージェントSQL<br><small class=\"diagram-muted\">bare table names only</small></div></div>",
-  "css": ".scope-pipe{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.scope-pipe .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.scope-pipe .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1hp97f6" title={"スコーピングパイプライン"} summary={"エージェント SQL はベース テーブルに直接触れることはありません。現在の ID をスコープとする一時ビューを介して読み取ります。そのため、ベア テーブル名は所有されている行のみを返すことができます。"}>
+
+```html
+<div class="scope-pipe">
+  <div class="diagram-node">
+    サインイン済みセッション<br /><small class="diagram-muted"
+      >email &middot; orgId</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Request context<br /><small class="diagram-muted">AGENT_ORG_ID</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Temporary VIEW<br /><small class="diagram-muted"
+      >WHERE owner_email = ? AND org_id = ?</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node ok">
+    エージェントSQL<br /><small class="diagram-muted"
+      >bare table names only</small
+    >
+  </div>
+</div>
+```
+
+```css
+.scope-pipe {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.scope-pipe .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.scope-pipe .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 サインインしたセッションには、`email` と (組織がアクティブな場合) `orgId` が含まれます。フレームワークは、そのセッションからリクエスト コンテキストを確立し、アクティブな組織を SQL エージェントに `AGENT_ORG_ID` として公開し、現在の ID が所有する行のみを表示できるようにすべてのクエリを書き換えます。クエリが UI、アクション、エージェントからのものであっても、同じパスが適用されます。エージェントは、ユーザーがメンバーではない組織のデータを読み取ることはできません。
 
 ### ユーザーごとのスコープ (`owner_email`)