@agent-native/core 0.76.7 → 0.76.8

package/docs/content/locales/ja-JP/key-concepts.md

@@ -17,9 +17,9 @@ description: "エージェント ネイティブ アプリの仕組み: 最初
 >
 > **コンピュータ** — データベース、ブラウザ、コード実行。エージェントは SQL および組み込みツールと直接連携します。 MCP サーバーはオプションのアドオンであり、基盤ではありません。
 
-```an-diagram title="Agent, application, and computer" summary="Three layers working together over one shared SQL store. The agent and the application both read and write the same data."
+```an-diagram title="エージェント、アプリケーション、およびコンピュータ" summary="3 つのレイヤーが 1 つの共有 SQL ストア上で連携します。エージェントとアプリケーションは両方とも同じデータの読み取りと書き込みを行います。"
 {
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads + writes data, runs actions, modifies code</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React UI</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQL database · browser · code execution</small></div></div>",
+  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads + writes data, runs actions, modifies code</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React UI</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQLデータベース · browser · code execution</small></div></div>",
   "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
 }
 ```
@@ -31,12 +31,12 @@ description: "エージェント ネイティブ アプリの仕組み: 最初
 すべてのエージェント ネイティブ アプリには、かどうかに関係なく、同じエージェント構成要素があります
 製品サーフェスはヘッドレス、チャットファースト、または完全な UI です:
 
-```an-file-tree title="Guidance and behavior"
+```an-file-tree title="ガイダンスと振る舞い"
 {
   "entries": [
-    { "path": "AGENTS.md", "note": "always-on instructions: purpose, core rules, state keys, action index, skills index" },
-    { "path": ".agents/skills/<name>/SKILL.md", "note": "reusable behavior: workflow steps, policies, examples, references, and do/don't lists" },
-    { "path": "actions/<name>.ts", "note": "executable capability: typed operation exposed to the agent, UI, CLI, HTTP, MCP, A2A, jobs, and webhooks" }
+    { "path": "AGENTS.md", "note": "常時有効な指示: 目的、基本ルール、状態キー、actions インデックス、skills インデックス" },
+    { "path": ".agents/skills/<name>/SKILL.md", "note": "再利用可能な振る舞い: workflow 手順、policy、例、参照、do/don’t リスト" },
+    { "path": "actions/<name>.ts", "note": "実行可能な能力: エージェント、UI、CLI、HTTP、MCP、A2A、jobs、webhooks に公開される型付き操作" }
   ]
 }
 ```
@@ -211,7 +211,7 @@ useDbSync({ queryClient });
 4. `useActionQuery` フックとソース バージョン対応の `useQuery` フックの再フェッチ
 5. コンポーネントはページをリロードせずに新しいデータをレンダリングします
 
-```an-diagram title="Live sync flow" summary="An agent write becomes a UI render with no manual refresh — SSE first, polling as the universal fallback."
+```an-diagram title="ライブ同期フロー" summary="エージェントの書き込みは、手動更新のない UI レンダリングになります。最初に SSE が行われ、ユニバーサル フォールバックとしてポーリングされます。"
 {
   "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">Agent action<br><small class=\"diagram-muted\">writes to DB</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Change event<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Query refetch<br><small class=\"diagram-muted\">render, no reload</small></div></div>",
   "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"

package/docs/content/locales/ja-JP/local-file-mode.md

@@ -46,7 +46,7 @@ UI とエージェント actions は、両方のモードで同じ形状のま
 エディターは引き続きドキュメントを編集します。違いは、それらの文書が解決されるかどうかです
 SQL 行またはローカル ファイルへ。
 
-```an-diagram title="Same actions, two sources of truth" summary="The UI and agent call identical actions in both modes. The action layer decides whether each call resolves to SQL rows or repo files."
+```an-diagram title="同じ行動、2 つの真実の情報源" summary="UI とエージェントは、両方のモードで同じアクションを呼び出します。アクション層は、各呼び出しが SQL 行またはリポジトリ ファイルのどちらに解決されるかを決定します。"
 {
   "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">Content UI</div><div class=\"diagram-node\">Agent + actions<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">Database mode</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">hosted · sharing · comments · history</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">Git review · coding-agent edits</small></div></div></div>",
   "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
@@ -57,21 +57,21 @@ SQL 行またはローカル ファイルへ。
 
 コンテンツ ワークスペースは次のように小さくすることができます:
 
-```an-file-tree title="A Content workspace repo"
+```an-file-tree title="Content workspace の repo"
 {
   "entries": [
-    { "path": "agent-native.json", "note": "declares which folders are content roots and their kinds" },
-    { "path": "docs/", "note": "content root — shows in the sidebar as pages" },
+    { "path": "agent-native.json", "note": "どのフォルダがコンテンツルートで、その種類は何かを宣言" },
+    { "path": "docs/", "note": "コンテンツルート: サイドバーにページとして表示" },
     { "path": "docs/getting-started.mdx" },
     { "path": "docs/guides/custom-components.mdx" },
-    { "path": "blog/", "note": "content root" },
+    { "path": "blog/", "note": "コンテンツルート" },
     { "path": "blog/launch-post.mdx" },
-    { "path": "resources/", "note": "content root" },
+    { "path": "resources/", "note": "コンテンツルート" },
     { "path": "resources/messaging/positioning.md" },
-    { "path": "components/", "note": "NOT a content root — preview component library MDX can import" },
+    { "path": "components/", "note": "コンテンツルートではない: MDX が import できる preview コンポーネントライブラリ" },
     { "path": "components/FrameworkTabs.tsx" },
     { "path": "components/Callout.tsx" },
-    { "path": "extensions/", "note": "NOT a content root — local extension library (sandboxed widgets)" },
+    { "path": "extensions/", "note": "コンテンツルートではない: ローカル extension ライブラリ（sandboxed widgets）" },
     { "path": "extensions/doc-status/extension.json" },
     { "path": "extensions/doc-status/index.html" }
   ]

package/docs/content/locales/ja-JP/mcp-apps.md

@@ -30,7 +30,7 @@ MCP アプリ拡張機能をサポートするホストの場合、アクショ
 
 製品 UI 用の 1 回限りのプレーン HTML MCP アプリを手書きしないでください。アクションにカスタム サーフェスが必要な場合は、最初に実際のアプリのルート/コンポーネントを追加または再利用し、そのルートを埋め込みます。
 
-```an-diagram title="MCP App embed round-trip" summary="The action's link target is also the embed target. Capable hosts load the same signed app route inline; everyone else falls back to the deep link."
+```an-diagram title="MCP アプリ埋め込みラウンドトリップ" summary="アクションのリンク ターゲットは埋め込みターゲットでもあります。有効なホストは、同じ署名済みアプリ ルートをインラインで読み込みます。他の人は全員ディープリンクに戻ります。"
 {
   "html": "<div class=\"diagram-embed\"><div class=\"diagram-card\" data-rough><strong>Action</strong><small class=\"diagram-muted\">`link` target = MCP App embed target</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>embedApp()</strong><span class=\"diagram-pill accent\">create_embed_session</span><small class=\"diagram-muted\">mints short-lived embed session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>/_agent-native/embed/start</strong><small class=\"diagram-muted\">exchanges one-time SQL ticket</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>Signed app route</strong><span class=\"diagram-pill ok\">real React route</span><small class=\"diagram-muted\">short-lived browser session</small></div><div class=\"diagram-fallback\"><span class=\"diagram-pill warn\">no MCP Apps support</span><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>&quot;Open in … &rarr;&quot; deep link</div></div></div>",
 "css": ".diagram-embed{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-embed .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:140px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .diagram-fallback{display:flex;flex-direction:column;align-items:center;gap:6px;margin-inline-start:8px}"
@@ -54,7 +54,7 @@ export default defineAction({
 });
 ```
 
-```an-annotated-code title="The mcpApp resource config"
+```an-annotated-code title="mcpApp リソース構成"
 {
   "filename": "actions/review-draft.ts",
   "language": "ts",
@@ -79,7 +79,7 @@ MCP サーバーは、拡張機能 `io.modelcontextprotocol/ui` をアドバタ
 
 MCP アプリの埋め込みはルートの埋め込みであり、個別のミニ製品ではありません。 `embedApp()` は、アクションの `link` ターゲットから開始され、短期間の埋め込みセッションを作成し、署名されたアプリ ルートを起動します。標準 MCP アプリ ホストは、ホストがルートを直接ハイドレートできる場合、MCP アプリ フレーム自体をナビゲートできます。
 
-```an-diagram title="Two host bridge paths, one signed route" summary="Claude transplants the hydrated route and uses the direct ui/_bridge; ChatGPT gets a controlled iframe via window.openai and relays host actions over postMessage. Both point at the same signed app route."
+```an-diagram title="2 つのホスト ブリッジ パス、1 つの署名済みルート" summary="クロードは水和ルートを移植し、直接 ui/_bridge を使用します。 ChatGPT は、window.openai 経由で制御された iframe を取得し、postMessage 経由でホスト アクションを中継します。どちらも同じ署名済みアプリ ルートを指します。"
 {
   "html": "<div class=\"diagram-bridge\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><strong>Claude web</strong><span class=\"diagram-pill accent\">single-frame transplant</span><small class=\"diagram-muted\">hydrates signed app HTML in Claude's iframe, then direct`ui/_` host bridge</small></div><div class=\"diagram-card\" data-rough><strong>ChatGPT web</strong><span class=\"diagram-pill accent\">controlled route iframe</span><small class=\"diagram-muted\">`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage relay</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Same signed app route<br><small class=\"diagram-muted\">normal route + React components</small></div></div>",
 "css": ".diagram-bridge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-bridge .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-bridge .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;max-width:300px}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}.diagram-bridge .diagram-box{padding:16px 18px;text-align:center}"

package/docs/content/locales/ja-JP/mcp-clients.md

@@ -20,7 +20,7 @@ description: "エージェント ネイティブ アプリをローカル MCP
 
 すべてのソースは 1 つのランタイム **MCP マネージャー**に解決され、学習したすべてのツールは、衝突防止の `mcp__<server-id>__<tool>` プレフィックスの下でエージェントのツール レジストリに配置されます。`tool-search` を通じて意図によって検索できます。
 
-```an-diagram title="Client direction: many sources, one tool registry" summary="Config files, env, and runtime UI all merge into the MCP manager; its tools appear prefixed and tool-searchable alongside your app's actions. This is the mirror of the server direction."
+```an-diagram title="クライアントの方向性: 多数のソース、1 つのツール レジストリ" summary="構成ファイル、環境、およびランタイム UI はすべて MCP マネージャーにマージされます。そのツールは接頭辞付きで表示され、アプリのアクションと一緒にツール検索可能です。これはサーバーの方向性を反映したものです。"
 {
   "html": "<div class=\"mcp-merge\"><div class=\"diagram-col sources\"><div class=\"diagram-box\" data-rough>Workspace <code>mcp.config.json</code><br><small class=\"diagram-muted\">shared across apps</small></div><div class=\"diagram-box\" data-rough>App-root <code>mcp.config.json</code><br><small class=\"diagram-muted\">per-app override</small></div><div class=\"diagram-box\" data-rough><code>MCP_SERVERS</code> env<br><small class=\"diagram-muted\">CI / production</small></div><div class=\"diagram-box\" data-rough>Remote via settings UI<br><small class=\"diagram-muted\">personal &amp; org scope</small></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\">MCP manager</span><small class=\"diagram-muted\">merge &middot; hot-reload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col out\"><div class=\"diagram-node\">Agent tool registry<br><small class=\"diagram-muted\"><code>mcp__&lt;server-id&gt;__&lt;tool&gt;</code></small></div><div class=\"diagram-node\"><code>tool-search</code><br><small class=\"diagram-muted\">discover by intent</small></div></div></div>",
   "css": ".mcp-merge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mcp-merge .diagram-col{display:flex;flex-direction:column;gap:8px}.mcp-merge .center{display:flex;flex-direction:column;align-items:center;gap:4px}.mcp-merge .diagram-arrow{font-size:22px;line-height:1}.mcp-merge code{font-size:.85em}"
@@ -102,7 +102,7 @@ Chrome DevTools はデフォルトで `--autoConnect` を使用します。こ
 
 形状は小さく、サーバー ID をキーとする `servers` マップで、各エントリは標準入出力ランチャー (`command` + `args` + オプションの `env`) またはリモート `{ "type": "http", "url", "headers" }` エントリのいずれかです。
 
-```an-annotated-code title="mcp.config.json, annotated"
+```an-annotated-code title="mcp.config.json、注釈付き"
 {
   "filename": "mcp.config.json",
   "language": "jsonc",
@@ -202,7 +202,7 @@ Stdio サーバーは Node ランタイム外では引き続き no-op ですが
 
 Dispatch は従来のハブであり、すでにアプリ間で調整されています。
 
-```an-diagram title="Hub model: one app serves org-scope MCP servers" summary="Dispatch holds the org-scope MCP servers; consumer apps pull and merge them as mcp__hub_<orgId>_<name>__*. Only org-scope rows are shared — personal credentials stay put."
+```an-diagram title="ハブ モデル: 1 つのアプリが組織スコープの MCP サーバーにサービスを提供します" summary="Dispatch は組織スコープの MCP サーバーを保持します。コンシューマ アプリは、それらを mcp__hub_<orgId>_<name>__* としてプルしてマージします。組織スコープの行のみが共有され、個人の認証情報は保持されます。"
 {
   "html": "<div class=\"mcp-hub\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Dispatch hub</span><small class=\"diagram-muted\">org-scope MCP servers</small><small class=\"diagram-muted\"><code>GET /mcp/hub/servers</code></small></div><div class=\"diagram-col arrows\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div></div><div class=\"diagram-col consumers\"><div class=\"diagram-box\" data-rough>Mail<br><small class=\"diagram-muted\"><code>mcp__hub_&lt;orgId&gt;_&lt;name&gt;__*</code></small></div><div class=\"diagram-box\" data-rough>Clips<br><small class=\"diagram-muted\">pull + merge each ~60s</small></div></div></div><p class=\"diagram-muted note\">Bearer-gated by <code>AGENT_NATIVE_MCP_HUB_TOKEN</code>. Personal (user-scope) servers are never re-exposed.</p>",
   "css": ".mcp-hub{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mcp-hub .center{display:flex;flex-direction:column;align-items:center;gap:4px}.mcp-hub .diagram-col{display:flex;flex-direction:column;gap:10px}.mcp-hub .arrows .diagram-arrow{font-size:22px;line-height:1}.mcp-hub .note{margin:8px 0 0;font-size:.85em}.mcp-hub code{font-size:.85em}"

package/docs/content/locales/ja-JP/mcp-protocol.md

@@ -30,7 +30,7 @@ MCP は、AI ツールを外部機能に接続するための標準プロトコ
 - **標準リモート MCP OAuth** — OAuth 2.1 検出、動的クライアント登録、認可コード + PKCE、リフレッシュ トークン ローテーション
 - **ベアラー認証フォールバック** — OAuth を実行できないクライアントには、`ACCESS_TOKEN`、`ACCESS_TOKENS`、または接続ミント JWT を使用します
 
-```an-diagram title="Your app as an MCP server" summary="External hosts connect over Streamable HTTP. Each action is one tool; ask-agent delegates to the full agent loop."
+```an-diagram title="MCP サーバーとしてのアプリ" summary="外部ホストは Streamable HTTP 経由で接続します。それぞれのアクションは 1 つのツールです。 ask-agent は完全なエージェント ループに委任します。"
 {
   "html": "<div class=\"diagram-mcp\"><div class=\"diagram-col\"><div class=\"diagram-node\">Claude</div><div class=\"diagram-node\">ChatGPT</div><div class=\"diagram-node\">Cursor · Codex</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill accent\">POST /_agent-native/mcp</span><small class=\"diagram-muted\">Streamable HTTP</small><small class=\"diagram-muted\">initialize &rarr; tools/list &rarr; tools/call</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>each action<br><small class=\"diagram-muted\">= one tool</small></div><div class=\"diagram-box\" data-rough>ask-agent<br><small class=\"diagram-muted\">&rarr; full agent loop</small></div></div></div>",
   "css": ".diagram-mcp{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-mcp .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-mcp .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-mcp .diagram-arrow{font-size:20px;line-height:1}"
@@ -194,7 +194,7 @@ WWW-Authenticate: Bearer resource_metadata="https://dispatch.agent-native.com/.w
 | `/_agent-native/mcp/oauth/authorize`      | ブラウザの承認 + 同意                   |
 | `/_agent-native/mcp/oauth/token`          | 認可コードとリフレッシュトークンの付与  |
 
-```an-diagram title="OAuth discovery flow" summary="A 401 kicks off discovery, registration, and a PKCE authorize → token exchange. The Bearer token is audience-bound and scoped."
+```an-diagram title="OAuth 検出フロー" summary="401 によって検出、登録、PKCE による承認→トークン交換が開始されます。 Bearer トークンは、対象者に限定され、スコープが設定されています。"
 {
   "html": "<div class=\"diagram-oauth\"><div class=\"diagram-box\" data-rough>first request<br><small class=\"diagram-muted\">no token</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill warn\">401 · WWW-Authenticate</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">/.well-known/oauth-protected-resource</span><span class=\"diagram-pill\">/.well-known/oauth-authorization-server</span><small class=\"diagram-muted\">discover</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">register</div><div class=\"diagram-pill\">authorize (PKCE)</div><div class=\"diagram-pill\">token</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Bearer access token<br><small class=\"diagram-muted\">audience-bound · mcp:read / write / apps</small></div></div>",
   "css": ".diagram-oauth{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-oauth .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-oauth .diagram-col{display:flex;flex-direction:column;gap:6px}.diagram-oauth .diagram-arrow{font-size:20px;line-height:1}"

package/docs/content/locales/ja-JP/messaging.md

@@ -18,7 +18,7 @@ description: "Slack、電子メール、テレグラム、または WhatsApp か
 - **同じエージェント、同じ記憶。** Slack で話した内容は、後で電子メールで送信したときに記憶されます。 Web チャットと外部メッセージは 1 つのスレッド履歴を共有します。
 - 一方向のアプリ内アラート (ベルのアイコン、webhooks) については、[Notifications](/docs/notifications) を参照してください。
 
-```an-diagram title="Many channels, one agent" summary="Every platform fans into the same agent loop and the same SQL thread history — so a Slack DM and an email continue the same conversation."
+```an-diagram title="多くのチャネル、1 人のエージェント" summary="すべてのプラットフォームは同じエージェント ループと同じ SQL スレッド履歴にファンインするため、Slack DM と電子メールは同じ会話を継続します。"
 {
   "html": "<div class=\"msg-fanin\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">Telegram</div><div class=\"diagram-node\">WhatsApp</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\">One agent loop</span><small class=\"diagram-muted\">same memory · same tools</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>One SQL thread history<br><small class=\"diagram-muted\">web chat + external messages share it</small></div></div>",
   "css": ".msg-fanin{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.msg-fanin .diagram-col{display:flex;flex-direction:column;gap:8px}.msg-fanin .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
@@ -231,7 +231,7 @@ Slack アプリには 1 つのイベント API リクエスト URL がありま
 3. プロセッサ エンドポイントは、独自のフル タイムアウト バジェットを使用して **新しい関数の実行** で実行されます。これはタスクをアトミックに要求し (`pending` → `claimPendingTask` 経由の `processing`)、エージェント ループを実行し、アダプターを通じて応答をポストし、タスク `completed` をマークします。
 4. 定期的な再試行ジョブ (`startPendingTasksRetryJob`、60 秒ごと) は、`pending` >90 秒または `processing` >5 分でスタックしたタスクをスイープし、プロセッサを再起動します。試行回数は 3 回に制限され、その後は `failed` とマークされました。
 
-```an-diagram title="Inbound webhook lifecycle" summary="The webhook only verifies, enqueues, and returns 200. A fresh function execution drains the queue and runs the agent loop, with a 60s retry job as the safety net."
+```an-diagram title="インバウンド Webhook ライフサイクル" summary="Webhook は検証し、キューに入れ、200 を返すだけです。新しい関数を実行するとキューが空になり、セーフティ ネットとして 60 秒の再試行ジョブを使用してエージェント ループが実行されます。"
 {
   "html": "<div class=\"msg-flow\"><div class=\"msg-row\"><div class=\"diagram-node\">Platform<br><small class=\"diagram-muted\">Slack · email · etc.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/webhook</strong><br><small class=\"diagram-muted\">verify signature + parse</small><br><span class=\"diagram-pill\">INSERT pending task</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">return 200</div></div><div class=\"msg-fire\"><span class=\"diagram-muted\">fire-and-forget</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</span></div><div class=\"msg-row\"><div class=\"diagram-box\" data-rough><strong>/process-task</strong><br><small class=\"diagram-muted\">fresh execution · own timeout</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">claim</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">agent loop</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">adapter.sendResponse</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">completed</div></div><div class=\"diagram-panel msg-retry\" data-rough><span class=\"diagram-pill warn\">every 60s</span> <span class=\"diagram-muted\">retry job sweeps stuck tasks (pending &gt;90s · processing &gt;5min) and re-fires /process-task &mdash; capped at 3 attempts, then <strong>failed</strong></span></div></div>",
   "css": ".msg-flow{display:flex;flex-direction:column;gap:12px}.msg-flow .msg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.msg-flow .msg-fire{display:flex;align-items:center;gap:8px;padding-inline-start:12px}.msg-flow .msg-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"

package/docs/content/locales/ja-JP/migration-workbench.md

@@ -9,7 +9,7 @@ description: "移行は、別個のアプリではなく、Agent-Native コー
 [Agent-Native Code](/docs/code-agents-ui) ワークスペース内の `/migrate` ゴール。
 通常のコード セッションとして実行され、再開、接続、検査、停止が可能です。
 
-```an-diagram title="/migrate is a Code session, not a separate app" summary="A path, URL, or description goes in; the run shares the same store, transcript, and controls as every other Code session, and can emit a portable dossier."
+```an-diagram title="/merge はコード セッションであり、別個のアプリではありません" summary="パス、URL、または説明が入ります。実行では、他のすべてのコード セッションと同じストア、トランスクリプト、およびコントロールを共有し、ポータブルなドシエを出力できます。"
 {
   "html": "<div class=\"diagram-migrate\"><div class=\"diagram-col\"><div class=\"diagram-pill\">./local-app</div><div class=\"diagram-pill\">https://example.com</div><div class=\"diagram-pill\">--describe \\\"...\\\"</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\">/migrate goal</span><small class=\"diagram-muted\">same store · transcript · run controls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>Migrated app</div><div class=\"diagram-pill ok\">--emit dossier</div></div></div>",
   "css": ".diagram-migrate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-migrate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-migrate .diagram-arrow{font-size:22px;line-height:1}.diagram-migrate .center{display:flex;flex-direction:column;align-items:center;gap:4px}"

package/docs/content/locales/ja-JP/multi-app-workspace.md

@@ -45,16 +45,16 @@ CLI には、すべてのファーストパーティ テンプレートの複数
 
 プライベート共有パッケージを含む pnpm モノリポジトリ、ワークスペース検出を接続するルート `package.json`、共有 `.env`、選択したアプリごとに 1 つのサブディレクトリを取得します。
 
-```an-file-tree title="A scaffolded workspace"
+```an-file-tree title="生成された workspace"
 {
   "entries": [
-    { "path": "package.json", "note": "declares agent-native.workspaceCore" },
+    { "path": "package.json", "note": "agent-native.workspaceCore を宣言" },
     { "path": "pnpm-workspace.yaml", "note": "packages: [\"packages/*\", \"apps/*\"]" },
-    { "path": ".env.example", "note": "shared ANTHROPIC_API_KEY, A2A_SECRET, DATABASE_URL, ..." },
+    { "path": ".env.example", "note": "共有の ANTHROPIC_API_KEY、A2A_SECRET、DATABASE_URL、..." },
     { "path": "packages/shared/", "note": "@my-company-platform/shared" },
-    { "path": "packages/shared/src/server/", "note": "plugin overrides only when needed" },
-    { "path": "packages/shared/src/client/", "note": "shared React code only when needed" },
-    { "path": "packages/shared/AGENTS.md", "note": "workspace-wide instructions" },
+    { "path": "packages/shared/src/server/", "note": "必要な場合のみ plugin overrides" },
+    { "path": "packages/shared/src/client/", "note": "必要な場合のみ共有 React コード" },
+    { "path": "packages/shared/AGENTS.md", "note": "workspace 全体の指示" },
     { "path": "apps/mail/" },
     { "path": "apps/calendar/" },
     { "path": "apps/forms/" }
@@ -115,7 +115,7 @@ pnpm dev
 
 マージはファイル名によって行われます。アプリが上流にも存在するローカル ファイルを提供する場合、ローカル ファイルが優先されます。そうでない場合は、ワークスペース共有バージョンが適用されます。共有でも提供されていない場合は、フレームワークのデフォルトが開始されます。これは、プラグイン skills、actions、および `AGENTS.md` に適用されます。
 
-```an-diagram title="Three layers, merged by file name" summary="Each app resolves plugins, skills, actions, and AGENTS.md from app-local first, then the shared package, then the framework default."
+```an-diagram title="3 つのレイヤー、ファイル名ごとに結合" summary="各アプリは、最初にアプリローカルからプラグイン、スキル、アクション、AGENTS.md を解決し、次に共有パッケージ、次にフレームワークのデフォルトを解決します。"
 {
   "html": "<div class=\"layer\"><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">1 &middot; App local</span><small class=\"diagram-muted\"><code>apps/&lt;name&gt;/</code> &mdash; highest priority</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2 &middot; Workspace shared</span><small class=\"diagram-muted\"><code>packages/shared/</code> &mdash; the mid-layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">3 &middot; Framework default</span><small class=\"diagram-muted\"><code>@agent-native/core</code> &mdash; lowest</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box ok\">first match wins</div></div>",
   "css": ".layer{display:flex;flex-direction:column;align-items:center;gap:6px}.layer .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 16px;width:320px}.layer .diagram-arrow{font-size:18px;line-height:1}.layer .diagram-box{margin-top:2px}"
@@ -225,7 +225,7 @@ npx @agent-native/core@latest deploy
 
 各アプリは `APP_BASE_PATH=/<name>` および `VITE_APP_BASE_PATH=/<name>` で構築され、選択した Nitro プリセットを通じて出力されます。 Cloudflare Pages がデフォルトのプリセットで、`dist/_worker.js` と `_routes.json` でディスパッチャー ワーカーを使用します。 Netlify は `npx @agent-native/core@latest deploy --preset netlify` でサポートされています。 `.netlify/functions-internal/<app>-server` の下でアプリ関数を発行し、静的アセットを強制されないままにするリダイレクトを生成するため、CDN が最初にファイルを提供します。 Vercel は `npx @agent-native/core@latest deploy --preset vercel` でサポートされています。 Vercel のビルド出力 API を使用して、ルート `.vercel/output` バンドルを書き込みます。
 
-```an-diagram title="Unified deploy: one origin, one path per app" summary="Every app ships behind a single origin, so login sessions and cross-app A2A are free."
+```an-diagram title="統合デプロイ: アプリごとに 1 つのオリジン、1 つのパス" summary="すべてのアプリは単一のオリジンで出荷されるため、ログイン セッションとアプリ間の A2A は無料です。"
 {
   "html": "<div class=\"deploy\"><div class=\"diagram-box accent\">your-agents.com<br><small class=\"diagram-muted\">one DNS record &middot; one cert &middot; one CDN</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"deploy-apps\"><div class=\"diagram-box\">/mail/*</div><div class=\"diagram-box\">/calendar/*</div><div class=\"diagram-box\">/forms/*</div></div><div class=\"diagram-pill ok\">shared login cookie on the apex &bull; same-origin A2A, no CORS</div></div>",
   "css": ".deploy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.deploy .deploy-apps{display:flex;flex-direction:column;gap:8px}.deploy .diagram-arrow{font-size:24px}.deploy .diagram-pill{flex-basis:100%}"

package/docs/content/locales/ja-JP/multi-tenancy.md

@@ -19,7 +19,7 @@ description: "すべてのエージェント ネイティブ アプリは、設
 
 CRM、プロジェクト トラッカー、サポート インボックス、またはその他のチーム ツールのエージェント ネイティブを評価している場合、マルチテナントの基盤はすでに存在しています。すべてのファーストパーティ テンプレートはマルチテナントです。リストについては、[Cloneable SaaS templates](/docs/cloneable-saas) を参照してください。
 
-```an-diagram title="Org membership and isolation" summary="Users join organizations as owner/admin/member. Every ownable row carries the org_id of the tenant that owns it, and no row leaks across the boundary."
+```an-diagram title="組織のメンバーシップと隔離" summary="ユーザーは owner/admin/member として組織に参加します。すべての所有可能な行には、それを所有するテナントの org_id が含まれており、境界を越えて行がリークすることはありません。"
 {
   "html": "<div class=\"mt-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org A</span><small class=\"diagram-muted\">members: alice (owner), bob (member)</small><div class=\"diagram-box\">rows where org_id = A</div></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org B</span><small class=\"diagram-muted\">members: carol (owner)</small><div class=\"diagram-box\">rows where org_id = B</div></div></div><div class=\"mt-wall\" aria-hidden=\"true\"><span class=\"diagram-pill warn\">no cross-org reads</span></div>",
   "css": ".mt-grid{display:flex;gap:16px;flex-wrap:wrap}.mt-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;flex:1;min-width:200px}.mt-wall{display:flex;justify-content:center;margin-top:12px}"
@@ -36,7 +36,7 @@ CRM、プロジェクト トラッカー、サポート インボックス、ま
 
 テナント データは `org_id` 列 (`ownableColumns()` によって追加) によって分離され、フレームワークはすべてのクエリのスコープをアクティブな組織に自動的に設定します: `session.orgId → AGENT_ORG_ID → SQL`。ユーザーが組織を切り替えると、UI、actions、エージェントはすべてその組織のデータのみを参照します。エージェントはユーザーがメンバーではない組織のデータにはアクセスできません。
 
-```an-diagram title="From session to scoped SQL" summary="The active org on the session becomes AGENT_ORG_ID, which the framework folds into the WHERE clause of every query."
+```an-diagram title="セッションからスコープ指定された SQL まで" summary="セッション上のアクティブな組織は AGENT_ORG_ID となり、フレームワークはすべてのクエリの WHERE 句に組み込みます。"
 {
   "html": "<div class=\"mt-pipe\"><div class=\"diagram-node\">session.orgId<br><small class=\"diagram-muted\">active org on session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">AGENT_ORG_ID<br><small class=\"diagram-muted\">request context</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL row scoping<br><small class=\"diagram-muted\">WHERE owner_email = ? AND org_id = ?</small></div></div>",
   "css": ".mt-pipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mt-pipe .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.mt-pipe .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ja-JP/native-chat-ui.md

@@ -17,7 +17,7 @@ description: "アクション宣言されたネイティブ チャット レン
 Claude、ChatGPT、Copilot、Cursor などの外部ホストがレンダリングする時期
 アプリからのインライン ルート。
 
-```an-diagram title="The native render path" summary="An action returns JSON; the runtime matches an explicit widget discriminant or chatUI.renderer; AssistantChat mounts a real React component. No iframe, no HTML execution."
+```an-diagram title="ネイティブのレンダーパス" summary="アクションは JSON を返します。ランタイムは明示的なウィジェット判別式または chatUI.renderer と一致します。 AssistantChat は実際の React コンポーネントをマウントします。 iframe も HTML 実行もありません。"
 {
   "html": "<div class=\"diagram-render\"><div class=\"diagram-node\">Action runs<br><small class=\"diagram-muted\">returns structured JSON</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Match</span><small class=\"diagram-muted\">explicit widget &middot; chatUI.renderer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;AssistantChat&gt;<br><small class=\"diagram-muted\">mounts a React widget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill ok\">DataTable</div><div class=\"diagram-pill ok\">DataChart</div><div class=\"diagram-pill ok\">DataInsights</div></div></div>",
   "css": ".diagram-render{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-render .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-render .col{display:flex;flex-direction:column;gap:6px;padding:12px}.diagram-render .diagram-arrow{font-size:22px;line-height:1}"
@@ -209,7 +209,7 @@ export default defineAction({
 各コネクタとアダプタとそのインポート パスをリストします。契約自体は
 以下で説明します。
 
-```an-diagram title="BYO runtime keeps the Agent-Native chat shell" summary="Your external agent streams normalized events through a connector; Agent-Native keeps the composer, transcript, tool cards, approvals, and native widgets."
+```an-diagram title="BYO ランタイムは Agent-Native チャット シェルを保持します" summary="外部エージェントは、コネクタを介して正規化されたイベントをストリーミングします。 Agent-Native は、コンポーザー、トランスクリプト、ツール カード、承認、およびネイティブ ウィジェットを保持します。"
 {
   "html": "<div class=\"diagram-byo\"><div class=\"diagram-box\" data-rough>Your agent<br><small class=\"diagram-muted\">OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot; HTTP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">connector</span><small class=\"diagram-muted\">normalized message-* / tool-* events</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill\">&lt;AssistantChat runtime=&hellip; /&gt;</div><small class=\"diagram-muted\">composer &middot; transcript &middot; tool cards</small><small class=\"diagram-muted\">approvals &middot; native widgets</small></div></div>",
   "css": ".diagram-byo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-byo .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-byo .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-byo .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ja-JP/notifications.md

@@ -18,7 +18,7 @@ await notify(
 );
 ```
 
-```an-diagram title="One call, many destinations" summary="notify() always writes the owner-scoped inbox row, fans out to every registered channel in parallel (best-effort), then emits notification.sent on the event bus."
+```an-diagram title="1 つの電話でさまざまな宛先へ" summary="Notice() は常に所有者スコープの受信ボックス行を書き込み、登録されているすべてのチャネルに並行してファンアウトし (ベストエフォート)、イベント バス上で notification.sent を発行します。"
 {
   "html": "<div class=\"diagram-notify\"><div class=\"diagram-node\">notify(input, { owner })<br><small class=\"diagram-muted\">any server code &middot; action, automation, plugin</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel fan\" data-rough><div class=\"fan-row\"><span class=\"diagram-pill accent\">inbox</span><div class=\"diagram-box\" data-rough>notifications table &rarr; bell UI<br><small class=\"diagram-muted\">always on &middot; owner-scoped</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">webhook</span><div class=\"diagram-box\" data-rough>POST JSON to NOTIFICATIONS_WEBHOOK_URL<br><small class=\"diagram-muted\">best-effort</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">custom</span><div class=\"diagram-box\" data-rough>registerNotificationChannel(...)<br><small class=\"diagram-muted\">best-effort &middot; runs in parallel</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">notification.sent</span><small class=\"diagram-muted\">event bus &middot; automations can chain</small></div></div>",
   "css": ".diagram-notify{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-notify .fan{display:flex;flex-direction:column;gap:10px;padding:14px}.diagram-notify .fan-row{display:flex;align-items:center;gap:10px}.diagram-notify .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-notify .diagram-arrow{font-size:22px;line-height:1}"
@@ -44,7 +44,7 @@ await notify(
 
 Webhook チャネルは、所有者のアドホック [secrets](/docs/security) に対して URL と `NOTIFICATIONS_WEBHOOK_AUTH` の両方の `${keys.NAME}` 参照を解決するため、生の値がエージェントのコンテキストに入ることはありません。キーごとの URL ホワイトリストが適用されます。自動化 `web-request` ツールが使用するのと同じルールです。
 
-```an-diagram title="Channels and severity" summary="inbox is always on; webhook needs an env var; custom channels register at startup. Severity drives badge styling and is passed through to every channel."
+```an-diagram title="チャネルと重大度" summary="受信トレイは常にオンになっています。 Webhook には環境変数が必要です。カスタム チャネルは起動時に登録されます。重大度はバッジのスタイルを決定し、すべてのチャネルに渡されます。"
 {
   "html": "<div class=\"diagram-channels\"><div class=\"diagram-panel col\" data-rough><strong>Channels</strong><div class=\"diagram-box\" data-rough>inbox<br><small class=\"diagram-muted\">always on &mdash; part of the primitive</small></div><div class=\"diagram-box\" data-rough>webhook<br><small class=\"diagram-muted\">needs NOTIFICATIONS_WEBHOOK_URL</small></div><div class=\"diagram-box\" data-rough>custom<br><small class=\"diagram-muted\">registerNotificationChannel()</small></div></div><div class=\"diagram-panel col\" data-rough><strong>Severity drives the badge</strong><div class=\"sev-row\"><span class=\"diagram-pill\">info</span><span class=\"diagram-muted\">confirmations, FYI</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">warning</span><span class=\"diagram-muted\">look at soon</span></div><div class=\"sev-row\"><span class=\"diagram-pill accent\">critical</span><span class=\"diagram-muted\">needs immediate attention</span></div></div></div>",
   "css": ".diagram-channels{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.diagram-channels .col{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:240px}.diagram-channels .sev-row{display:flex;align-items:center;gap:10px}"

package/docs/content/locales/ja-JP/observability.md

@@ -33,7 +33,7 @@ description: "エージェント トレース、評価、フィードバック
 
 コードを変更する必要はありません。インストルメンテーションは透過的に `production-agent.ts` にフックします。
 
-```an-diagram title="Every run feeds the loop" summary="One agent run produces a trace, automated scores, and a feedback hook — all stored in the app's own SQL and surfaced on the dashboard. Experiments split traffic across config variants."
+```an-diagram title="すべての実行がループにフィードされます" summary="エージェントを 1 回実行すると、トレース、自動スコア、フィードバック フックが生成され、これらはすべてアプリ独自の SQL に保存され、ダッシュボードに表示されます。実験では、構成バリアント間でトラフィックを分割しました。"
 {
   "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">Agent run<br><small class=\"diagram-muted\">production-agent.ts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Captured automatically</span><small class=\"diagram-muted\">tokens &middot; cost &middot; latency &middot; tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Traces &amp; spans</div><div class=\"diagram-box\">Evals (5 scorers + LLM judge)</div><div class=\"diagram-box\">Feedback &amp; frustration index</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">Dashboard<br><small class=\"diagram-muted\">scoped to the signed-in user</small></div></div>",
   "css": ".obs-loop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.obs-loop .diagram-col{display:flex;flex-direction:column;gap:8px}.obs-loop .diagram-arrow{font-size:22px;line-height:1}.obs-loop .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
@@ -147,9 +147,9 @@ PUT /_agent-native/observability/experiments/:id
 
 `<your-model-id>` / `<other-model-id>` の代わりに、エンジンが受け入れる実際のモデル識別子を使用します (モデル名は頻繁に変更されます。現在の ID についてはプロバイダー/エンジンを確認してください)。エージェント ループはユーザーのバリアントを自動的に解決し、構成のオーバーライドを適用します。割り当てでは一貫したハッシュが使用されます。同じユーザーは常に同じバリアントを取得します。
 
-```an-diagram title="Consistent-hash variant assignment" summary="Each user hashes to a stable variant, the loop applies that variant's config override, and results roll up per variant with confidence intervals."
+```an-diagram title="一貫したハッシュバリアントの割り当て" summary="各ユーザーは安定したバリアントにハッシュし、ループはそのバリアントの設定オーバーライドを適用し、結果は信頼区間を使用してバリアントごとにロールアップされます。"
 {
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">User id<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">config override A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">config override B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Results per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
+  "html": "<div class=\"exp\"><div class=\"diagram-node\">User id<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">config override A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">config override B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">結果 per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
   "css": ".exp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.exp .diagram-col{display:flex;flex-direction:column;gap:8px}.exp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.exp .diagram-arrow{font-size:22px;line-height:1}"
 }
 ```

package/docs/content/locales/ja-JP/observational-memory.md

@@ -19,7 +19,7 @@ OM は、最も蒸留されたスレッドから最新のスレッドまでの 3
 | **観察結果**             | 一連の生のメッセージを、何が起こったかをコンパクトに記録した、高密度で日付の入ったエントリ。                                        |
 | **最近の生のメッセージ** | 最後の N ターンは **逐語** 維持され、折りたたまれることはありません。そのため、エージェントは常に最新のコンテキストを確認できます。 |
 
-```an-diagram title="Three tiers, distilled to recent" summary="The older prefix folds into dated observations and a long-arc reflection; only the most recent turns stay verbatim."
+```an-diagram title="3 層、最新のものまで蒸留" summary="古いプレフィックスは、日付の付いた観測と長い円弧の反射に折りたたまれます。最新のターンのみがそのまま残ります。"
 {
   "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Reflections</span><small class=\"diagram-muted\">long-arc summary, condensed from the observation log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observations</span><small class=\"diagram-muted\">dense, dated entries folding stretches of raw messages</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Recent raw messages</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — never folded</small></div></div>",
   "css": ".om{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.om .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.om .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
@@ -35,7 +35,7 @@ OM は、最も蒸留されたスレッドから最新のスレッドまでの 3
 1. **Observer** — スレッドの _unobserved_ メッセージが監視トークンのしきい値を超えると、それらのメッセージは 1 つの高密度の監視エントリに折りたたまれます。
 2. **リフレクター** — 永続化された観測ログ自体がリフレクション トークンのしきい値を超えると、観測結果がより高いレベルのリフレクションに凝縮されます。
 
-```an-diagram title="Two best-effort passes after a clean turn" summary="Each pass no-ops below its threshold, so running the compactor every turn is cheap. Failures are swallowed and never add latency."
+```an-diagram title="クリーンターン後のベストエフォートパス2本" summary="各パスはしきい値以下で no-op を実行するため、コンパクターを毎ターン実行するのは低コストです。失敗は無視され、レイテンシが追加されることはありません。"
 {
   "html": "<div class=\"om-pass\"><div class=\"diagram-node\">Clean turn ends<br><small class=\"diagram-muted\">fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observer</span><small class=\"diagram-muted\">unobserved tokens &gt; 30k? &rarr; fold into one observation</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Reflector</span><small class=\"diagram-muted\">observation log &gt; 40k? &rarr; condense into a reflection</small></div></div>",
   "css": ".om-pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.om-pass .diagram-node,.om-pass .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.om-pass .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ja-JP/onboarding.md

@@ -10,7 +10,7 @@ description: "初回実行構成のセットアップ チェックリスト —
 エージェント チャットに: AI エンジンを接続し、オプションでアプリを共有に向けます
 インフラストラクチャを構築し、必要な場合にのみプロバイダを追加します。
 
-```an-diagram title="The setup checklist" summary="Only Connect an AI engine is required. The panel tracks completion and auto-hides once everything required is done."
+```an-diagram title="セットアップチェックリスト" summary="AI エンジンの接続のみが必要です。パネルは完了を追跡し、必要な作業がすべて完了すると自動的に非表示になります。"
 {
   "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>Connect an AI engine</strong><small class=\"diagram-muted\">Connect Builder (one click) or paste an LLM key</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Database</strong><small class=\"diagram-muted\">set <code>DATABASE_URL</code></small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Authentication</strong><small class=\"diagram-muted\">OAuth / access token</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Email delivery</strong><small class=\"diagram-muted\">Resend / SendGrid</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">all required done &rarr; panel auto-hides</div></div>",
   "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}"
@@ -114,7 +114,7 @@ steps (Gmail, Slack, Notion, etc.), call `registerOnboardingStep()` from a
 
 ### テンプレートからステップを追加する
 
-```an-annotated-code title="Registering a custom onboarding step"
+```an-annotated-code title="カスタムオンボーディングステップの登録"
 {
   "filename": "server/plugins/my-onboarding.ts",
   "language": "ts",

package/docs/content/locales/ja-JP/plan-plugin.md

@@ -14,7 +14,7 @@ Agent-Native **プラン** アプリは、1 つのインストール可能なバ
 - **2 つの skills** — `/visual-plan` (正規のエントリ ポイント) と `/visual-recap`。
 - **プラン MCP コネクタ** — `https://plan.agent-native.com` (MCP エンドポイント `https://plan.agent-native.com/_agent-native/mcp`、サーバー名 `plan`) でホストされているアプリに対して登録されています。
 
-```an-diagram title="Three routes, one bundle" summary="The universal CLI, Claude Code plugin, and Codex plugin all install the same two skills plus the hosted Plan connector."
+```an-diagram title="3つのルート、1つのバンドル" summary="ユニバーサル CLI、Claude Code プラグイン、および Codex プラグインはすべて、同じ 2 つのスキルとホストされたプラン コネクタをインストールします。"
 {
   "html": "<div class=\"diagram-routes\"><div class=\"diagram-col\"><div class=\"diagram-node\">Universal CLI<br><small class=\"diagram-muted\">skills add visual-plan</small></div><div class=\"diagram-node\">Claude Code plugin<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Codex plugin<br><small class=\"diagram-muted\">codex plugin add</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">/visual-plan</span><span class=\"diagram-pill accent\">/visual-recap</span><small class=\"diagram-muted\">two skills</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Plan MCP connector<br><small class=\"diagram-muted\">plan.agent-native.com/_agent-native/mcp</small></div></div>",
   "css": ".diagram-routes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-routes .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-routes .diagram-arrow{font-size:22px;line-height:1}.diagram-routes .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-routes .center .diagram-pill{margin:2px}"
@@ -82,7 +82,7 @@ npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind plan --
 コメント、スクリーンショット、プラン履歴は、明示的にユーザーが指定するまで利用できません
 後で公開します。
 
-```an-diagram title="Hosted vs. local-files mode" summary="By default skills publish through the connector; local-files mode writes MDX to disk and previews via a localhost bridge instead."
+```an-diagram title="ホスト ファイル モードとローカル ファイル モード" summary="デフォルトでは、スキルはコネクタを通じて公開されます。ローカル ファイル モードは、MDX をディスクに書き込み、代わりにローカルホスト ブリッジ経由でプレビューします。"
 {
   "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Default · hosted</span><strong>Publish to the Plan app</strong><small class=\"diagram-muted\">MCP connector &rarr; hosted DB &rarr; share links, comments, history, screenshots</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Local-files privacy</span><strong>Write MDX to disk</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No DB writes until <code>publish-visual-plan</code>.</small></div></div>",
   "css": ".diagram-modes{display:flex;gap:14px;flex-wrap:wrap}.diagram-modes .diagram-card{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:16px 18px}"

package/docs/content/locales/ja-JP/pr-visual-recap.md

@@ -24,7 +24,7 @@ PR Visual Recap は、すべてのプル リクエストを **ビジュアル
 7. インタラクティブな要約へのリンクの隣に、`<picture>` 要素 (GitHub の迷彩画像プロキシを通じて提供される) を含むスクリーンショットを**インライン**で埋め込む単一のスティッキー PR コメントをアップサートします。
 8. `Visual Recap` チェックを成功、スキップ、または中立として完了します。
 
-```an-diagram title="What happens on each PR push" summary="A bounded diff feeds a real coding agent, which authors a recap; the workflow screenshots it and upserts one sticky comment."
+```an-diagram title="各 PR プッシュで何が起こるか" summary="有界差分は実際のコーディング エージェントにフィードされ、要約が作成されます。ワークフローはそれをスクリーンショットし、1 つの付箋コメントを更新挿入します。"
 {
   "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">PR push<br><small class=\"diagram-muted\">bounded base&hellip;head diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Coding agent<br><small class=\"diagram-muted\">Claude Code / Codex reads diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-visual-recap</span><small class=\"diagram-muted\">publishes recap plan</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Headless Chrome<br><small class=\"diagram-muted\">light + dark screenshots</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">One sticky PR comment<br><small class=\"diagram-muted\">inline screenshot + plan link</small></div></div><div class=\"diagram-foot diagram-muted\">Plus an informational <span class=\"diagram-pill\">Visual Recap</span> check &mdash; non-blocking, never required.</div>",
   "css": ".diagram-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-recap .diagram-arrow{font-size:20px;line-height:1}.diagram-recap .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-recap .diagram-foot{flex-basis:100%;margin-top:10px;font-size:13px}"
@@ -157,7 +157,7 @@ npx @agent-native/core@latest recap setup
 
 これをインストールするには、[BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml) からリポジトリの `.github/workflows/` ディレクトリに、既存の `pr-visual-recap.yml` と一緒にファイルをコピーします。同じシークレット (`PLAN_RECAP_TOKEN`、`ANTHROPIC_API_KEY`) が適用されます。
 
-```an-diagram title="Fork PR consent gate" summary="Fork PRs get no secrets by default; trusted authors run automatically, and outside contributors require a fresh maintainer recap label."
+```an-diagram title="フォーク PR 同意ゲート" summary="フォーク PR はデフォルトではシークレットを取得しません。信頼できる作成者は自動的に実行され、外部の寄稿者は新しいメンテナの要約ラベルを必要とします。"
 {
   "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">Fork PR opened<br><small class=\"diagram-muted\">main workflow has no secrets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Trusted author</span><small class=\"diagram-muted\">OWNER, MEMBER, or COLLABORATOR runs automatically</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Outside contributor</span><small class=\"diagram-muted\">maintainer reviews diff, then applies <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Gate checks<br><small class=\"diagram-muted\">fork PR? &amp; trusted or fresh label?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Recap runs<br><small class=\"diagram-muted\">base-repo code only · fork diff is text input</small></div></div>",
   "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-arrow{font-size:20px;line-height:1}.diagram-fork .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}"

package/docs/content/locales/ja-JP/processors.md

@@ -7,7 +7,7 @@ description: "ループ内部のオブザーバー/ガードレール フック
 
 `Processor` は、エージェント実行のためのループ内部 **オブザーバー/ガードレール** です。モデルのストリーミング出力を監視し、ツールは実行の進行に応じてリクエストを呼び出し、独自のスクラッチ状態を維持し、「完了」が要求される前に実行を**中止**できます。これは、リアルタイム ガードレール (許可されていない出力を途中でブロックする) と、Proof-of-Done/カバレッジ ゲート (モデルが実行しようとしていることを検査して停止する) の構造的な前提条件です。
 
-```an-diagram title="Where the three hooks fire in the run" summary="processOutputStream watches every chunk, processOutputStep gates tool calls per response, processOutputResult records a verdict at the end. Any hook can abort with a TripWire."
+```an-diagram title="ラン中に 3 つのフックが発射される場所" summary="processOutputStream はすべてのチャンクを監視し、processOutputStep は応答ごとにツール呼び出しをゲートし、processOutputResult は最後に判定を記録します。どのフックも TripWire で中止できます。"
 {
   "html": "<div class=\"diagram-proc\"><div class=\"diagram-node\" data-rough>stream chunks<br><small class=\"diagram-muted\">processOutputStream</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>per model response<br><small class=\"diagram-muted\">processOutputStep — gate tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>run end<br><small class=\"diagram-muted\">processOutputResult — verdict</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-pill warn\">abort() &rarr; TripWire &rarr; tripwire event</div></div>",
   "css": ".diagram-proc{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-proc .diagram-arrow{font-size:22px;line-height:1}.diagram-proc .diagram-pill{flex-basis:100%}"

package/docs/content/locales/ja-JP/progress.md

@@ -41,7 +41,7 @@ await completeRun(run.id, run.owner, "succeeded");
 | `failed`    | エラー端子                       |
 | `cancelled` | ユーザーが中断しました           |
 
-```an-diagram title="Run lifecycle" summary="startRun opens a running row; updateRunProgress patches it; completeRun moves it to one terminal status and stamps completed_at."
+```an-diagram title="ライフサイクルの実行" summary="startRun は実行中の行を開きます。 updateRunProgress はパッチを適用します。 completeRun はそれを 1 つの端末ステータスに移動し、completed_at をスタンプします。"
 {
   "html": "<div class=\"diagram-run\"><div class=\"diagram-box\" data-rough>startRun()</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel running\" data-rough><span class=\"diagram-pill accent\">running</span><small class=\"diagram-muted\">updateRunProgress() &#8635; percent + step</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col terminal\"><span class=\"diagram-pill ok\">succeeded</span><span class=\"diagram-pill warn\">failed</span><span class=\"diagram-pill\">cancelled</span><small class=\"diagram-muted\">completeRun() &rarr; sets completed_at</small></div></div>",
   "css": ".diagram-run{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-run .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:12px 16px}.diagram-run .terminal{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.diagram-run .diagram-arrow{font-size:22px;line-height:1}"

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

@@ -12,7 +12,7 @@ description: "エージェントが製品全体であるアプリ: アプリと
 に属します。これはまだ実際のアプリです: actions、セッション、アプリの状態、履歴
 設定、認証情報、共有レコードはすべて SQL に保存されます。
 
-```an-diagram title="The app-agent loop is the front door" summary="Many entry points reach one agent loop over SQL-backed actions and state; results return to wherever the request came from. UI is added only when humans need to supervise."
+```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 · email</div><div class=\"diagram-pill\">Scheduled job</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\">App-agent loop</span><small class=\"diagram-muted\">actions · sessions · app state in SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Result returns<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}"