@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/docs/content/locales/zh-CN/key-concepts.mdx

@@ -17,13 +17,67 @@ description: "代理本机应用程序的工作原理：首先是 actions、SQL
 >
 > **计算机** — 数据库、浏览器、代码执行。代理直接使用SQL和内置工具进行工作； MCP 服务器是可选的附加组件，而不是基础。
 
-```an-diagram title="代理、应用程序和计算机" summary="三层在一个共享的 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\">读取和写入数据、运行 actions、修改代码</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React 界面</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}"
+<Diagram id="doc-block-sight" title={"代理、应用程序和计算机"} summary={"三层在一个共享的 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"
+        >读取和写入数据、运行 actions、修改代码</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Application</span
+      ><small class="diagram-muted"
+        >action-only, chat, control plane, or full React 界面</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;
 }
 ```
 
+</Diagram>
+
 无头应用程序可以使用 `pnpm agent` 从文件夹运行相同的生产应用程序代理循环，而 UI 应用程序则安装嵌入式代理面板并使用 `pnpm dev` 在本地运行。在云中，Builder.io 提供了一个托管框架（在您的应用旁边托管代理的环境），为团队提供协作、可视化编辑和托管基础架构。
 
 ## 代理构建块 {#agent-building-blocks}
@@ -271,13 +325,51 @@ useDbSync({ queryClient });
 4. `useActionQuery` 挂钩和源版本 `useQuery` 挂钩重新获取
 5. 组件无需重新加载页面即可呈现新数据
 
-```an-diagram title="实时同步流程" summary="代理写入变成 UI 渲染，无需手动刷新 - 首先是 SSE，轮询作为通用后备。"
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">Agent 操作<br><small class=\"diagram-muted\">写入数据库</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">变更事件<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\">重新获取查询<br><small class=\"diagram-muted\">渲染，无需重载</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}"
+<Diagram id="doc-block-i1vnmi" title={"实时同步流程"} summary={"代理写入变成 UI 渲染，无需手动刷新 - 首先是 SSE，轮询作为通用后备。"}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-node">
+    Agent 操作<br /><small class="diagram-muted">写入数据库</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    变更事件<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">
+    重新获取查询<br /><small class="diagram-muted">渲染，无需重载</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;
 }
 ```
 
+</Diagram>
+
 这适用于所有部署环境（包括无服务器和边缘），因为它使用数据库，而不是内存状态或文件系统观察器。
 
 ## 框架 {#frames}

package/corpus/core/docs/content/locales/zh-CN/local-file-mode.mdx

@@ -46,13 +46,65 @@ UI 和特工 actions 在两种模式下都应保持相同的形状。内容
 编辑器仍然编辑文档；区别在于这些文档是否解析
 到 SQL 行或本地文件。
 
-```an-diagram title="相同的行为，两个事实来源" summary="UI 和代理在两种模式下调用相同的操作。操作层决定每个调用是否解析为 SQL 行或存储库文件。"
-{
-  "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">内容 UI</div><div class=\"diagram-node\">代理 + 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\">数据库模式</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">托管 · 分享 · 评论 · 历史</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 评审 · 编码代理编辑</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}"
+<Diagram id="doc-block-bob9ei" title={"相同的行为，两个事实来源"} summary={"UI 和代理在两种模式下调用相同的操作。操作层决定每个调用是否解析为 SQL 行或存储库文件。"}>
+
+```html
+<div class="diagram-mode">
+  <div class="diagram-col entry">
+    <div class="diagram-node">内容 UI</div>
+    <div class="diagram-node">
+      代理 + 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">数据库模式</span
+      ><small class="diagram-muted">SQL rows via Drizzle</small
+      ><small class="diagram-muted">托管 · 分享 · 评论 · 历史</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 评审 · 编码代理编辑</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;
 }
 ```
 
+</Diagram>
+
 ## 示例存储库
 
 内容工作区可以像这样小：

package/corpus/core/docs/content/locales/zh-CN/mcp-apps.mdx

@@ -30,14 +30,70 @@ MCP 应用程序是官方的 `io.modelcontextprotocol/ui` 扩展，可让兼容
 
 请勿为产品 UI 手写一次性普通 HTML MCP 应用程序；如果操作需要自定义界面，请首先添加或重用真实的应用程序路由/组件并嵌入该路由。
 
-```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\">交换一次性 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\">真实 React 路由</span><small class=\"diagram-muted\">short-lived browser session</small></div><div class=\"diagram-fallback\"><span class=\"diagram-pill warn\">不支持 MCP Apps</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}"
-}
+<Diagram id="doc-block-8klu9n" 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">交换一次性 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">真实 React 路由</span
+    ><small class="diagram-muted">short-lived browser session</small>
+  </div>
+  <div class="diagram-fallback">
+    <span class="diagram-pill warn">不支持 MCP Apps</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;
+}
 ```
 
+</Diagram>
+
 ```ts
 import { embedApp } from "@agent-native/core";
 
@@ -93,14 +149,68 @@ MCP 服务器通告扩展 `io.modelcontextprotocol/ui`，将 `_meta.ui.resourceU
 
 MCP 应用嵌入是路线嵌入，而不是单独的迷你产品。 `embedApp()` 从操作的 `link` 目标开始，创建一个短暂的嵌入会话，并启动该签名的应用程序路由。当主机可以直接水合路线时，标准 MCP 应用程序主机可以自行导航 MCP 应用程序框架。
 
-```an-diagram title="两条主桥路径，一条签名路由" 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\">在 Claude iframe 中激活已签名的应用 HTML，然后使用直接 `ui/_` 主机桥</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\">普通路由 + React 组件</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}"
-}
+<Diagram id="doc-block-1unh51g" title={"两条主桥路径，一条签名路由"} 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"
+        >在 Claude iframe 中激活已签名的应用 HTML，然后使用直接 `ui/_`
+        主机桥</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"
+      >普通路由 + React 组件</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;
+}
 ```
 
+</Diagram>
+
 Claude Web 使用单框架移植路径：资源文档获取已签名的应用程序 HTML 并将其水合到 Claude 的 MCP 应用程序 iframe 中，因为 Claude 无法可靠地允许应用程序拥有的子 iframe 或外部框架导航。 ChatGPT Web 获得受控路由 iframe，因为它的 Apps 桥为我们提供了稳定的 `window.openai` 主机 API 和有界高度控制。所有路径都指向相同的签名应用程序路由并渲染正常路由和 React 组件。设计嵌入式路由，以便使用相同签名的 URL 重新加载可以重建相同的视图。
 
 对于同一应用程序 `open_app({ embed: true })`，框架在原始工具调用期间创建嵌入启动票证，并将签名的启动 URL 存储在隐藏的工具元数据中。定制actions可以返回`embedStartUrl`相同的快速路径； MCP 层将票证 URL 从模型可见的 `structuredContent` 和正常的开放链接元数据中剥离。当不存在嵌入启动 URL 时，资源将回退到仅应用程序的 `create_embed_session` 帮助程序。这使得生产主机能够在直接路由上限制 iframe 发起的工具调用，而不会将一次性应用程序会话 URL 泄漏到记录中。如果用户在一次性启动票过期后重新打开旧聊天，启动路由将返回一个小刷新页面并将 `agentNative.embedSessionExpired` 发布到包装器； `embedApp()` 清除陈旧的开始 URL，并在仍具有原始应用程序路由的情况下通过 `create_embed_session` 铸造新票。

package/corpus/core/docs/content/locales/zh-CN/mcp-clients.mdx

@@ -20,13 +20,82 @@ description: "将您的代理本机应用程序连接到本地 MCP 服务器（c
 
 每个源都会解析为一个运行时 **MCP 管理器**，并且它学习的每个工具都会以防碰撞 `mcp__<server-id>__<tool>` 前缀登录到代理的工具注册表中 - 可通过 `tool-search` 进行意图搜索。
 
-```an-diagram title="客户端方向：多种来源，一种工具注册表" 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\">跨应用共享</small></div><div class=\"diagram-box\" data-rough>应用根 <code>mcp.config.json</code><br><small class=\"diagram-muted\">每个应用覆盖</small></div><div class=\"diagram-box\" data-rough><code>MCP_SERVERS</code> env<br><small class=\"diagram-muted\">CI / 生产</small></div><div class=\"diagram-box\" data-rough>通过设置界面远程配置<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 管理器</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 工具 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\">按意图发现</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}"
+<Diagram id="doc-block-tho29x" title={"客户端方向：多种来源，一种工具注册表"} 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"
+        >跨应用共享</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      应用根 <code>mcp.config.json</code><br /><small class="diagram-muted"
+        >每个应用覆盖</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      <code>MCP_SERVERS</code> env<br /><small class="diagram-muted"
+        >CI / 生产</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      通过设置界面远程配置<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 管理器</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 工具 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"
+        >按意图发现</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: 0.85em;
 }
 ```
 
+</Diagram>
+
 > 相反的方向 - 使 _your_ 应用程序成为其他主机使用的 MCP 服务器 - 位于 [MCP Protocol](/docs/mcp-protocol) 和 [External Agents](/docs/external-agents) 中。
 
 ## 内置浏览器和计算机使用功能 {#built-in-capabilities}
@@ -216,13 +285,69 @@ Stdio 服务器在 Node 运行时之外仍然是无操作的，但远程 HTTP MC
 
 Dispatch 是传统的中心 - 它已经跨应用进行协调。
 
-```an-diagram title="中心模型：一个应用程序为组织范围的 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\">组织范围 MCP 服务器</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\">约每 60 秒 pull + merge</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}"
+<Diagram id="doc-block-x58r34" title={"中心模型：一个应用程序为组织范围的 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">组织范围 MCP 服务器</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">约每 60 秒 pull + merge</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: 0.85em;
+}
+.mcp-hub code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 对于新的工作区设置，首选\*\*在您
 想要工作区 skills 使用相同的全应用与选定应用授权模型，
 说明和参考资源。添加工作区资源：

package/corpus/core/docs/content/locales/zh-CN/mcp-protocol.mdx

@@ -30,13 +30,61 @@ MCP 是用于将 AI 工具连接到外部功能的标准协议。当您部署代
 - **标准远程 MCP OAuth** — OAuth 2.1 发现、动态客户端注册、授权代码 + PKCE、刷新令牌轮换
 - **承载身份验证回退** - 对于无法运行 OAuth 的客户端使用 `ACCESS_TOKEN`、`ACCESS_TOKENS` 或 connect-minted JWT
 
-```an-diagram title="您的应用程序作为 MCP 服务器" summary="外部主机通过 Streamable HTTP 连接。每个动作都是一个工具； 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}"
+<Diagram id="doc-block-jea5wu" title={"您的应用程序作为 MCP 服务器"} summary={"外部主机通过 Streamable HTTP 连接。每个动作都是一个工具； 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;
 }
 ```
 
+</Diagram>
+
 ## MCP vs A2A {#mcp-vs-a2a}
 
 两种协议都是自动安装的。使用适合您的用例的选项：
@@ -205,13 +253,62 @@ 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 发现流程" summary="401 启动发现、注册和 PKCE 授权 → 令牌交换。不记名令牌是受受众限制和范围的。"
-{
-  "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 · 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}"
+<Diagram id="doc-block-bp55uo" title={"OAuth 发现流程"} summary={"401 启动发现、注册和 PKCE 授权 → 令牌交换。不记名令牌是受受众限制和范围的。"}>
+
+```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 · 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;
 }
 ```
 
+</Diagram>
+
 访问令牌是经过签名的 JWT，其受众是确切的 MCP 资源 URL。服务器仅接受为其自身颁发的令牌，并在列出/调用工具之前应用范围：
 
 | 范围        | 允许                              |