@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/zh-CN/cloneable-saas.mdx

@@ -51,13 +51,54 @@ description: "分叉一个可用的 SaaS 产品并使其成为您的产品 - 包
 
 从“我想要自己的 SaaS”到“我拥有自己的 SaaS”的路径很短：
 
-```an-diagram title="分叉并定制" summary="选择一个成品，对其进行品牌化，用简单的英语对其进行改进，然后将其发送到您自己的域。"
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><small class=\"diagram-muted\">名称、颜色、Logo、文案</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ah38lu" title={"分叉并定制"} summary={"选择一个成品，对其进行品牌化，用简单的英语对其进行改进，然后将其发送到您自己的域。"}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-card">
+    <span class="diagram-pill">1</span><strong>Pick</strong
+    ><small class="diagram-muted">a complete template</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2</span><strong>Brand</strong
+    ><small class="diagram-muted">名称、颜色、Logo、文案</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">3</span><strong>Customize</strong
+    ><small class="diagram-muted">ask the agent &#8635;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">4</span><strong>Ship</strong
+    ><small class="diagram-muted">your own domain</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **选择一个模板。**使用 CLI 选择器，或浏览文档并选择一个开始。
 2. **打造品牌。**更改名称、颜色、徽标和文案。大多数模板都将其公开在单个配置文件中。
 3. **自定义它。** 要求代理添加您需要的列，更改收件箱分组的方式，连接到您的内部 API，添加新视图。代理编辑代码；您查看差异。
@@ -74,13 +115,47 @@ description: "分叉一个可用的 SaaS 产品并使其成为您的产品 - 包
 
 结果：Claude - 每个用户的代码级灵活性，以及正常的 SaaS 部署经济性。
 
-```an-diagram title="为什么每用户分叉规模" summary="有两个想法使分叉和定制模型保持实用：代理进行维护，每个用户的定制位于 SQL 中，而不是每个用户的代码中。"
-{
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>分享d codebase</strong><small class=\"diagram-muted\">一个应用，一次部署</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL 中的用户层</strong><small class=\"diagram-muted\">skills · 记忆 · 指令 · MCP · 子代理</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
-  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+<Diagram id="doc-block-1v5me0v" title={"为什么每用户分叉规模"} summary={"有两个想法使分叉和定制模型保持实用：代理进行维护，每个用户的定制位于 SQL 中，而不是每个用户的代码中。"}>
+
+```html
+<div class="diagram-why">
+  <div class="diagram-panel" data-rough>
+    <strong>分享d codebase</strong
+    ><small class="diagram-muted">一个应用，一次部署</small>
+    <div class="diagram-pill accent">agent does the maintenance</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL 中的用户层</strong
+    ><small class="diagram-muted">skills · 记忆 · 指令 · MCP · 子代理</small>
+    <div class="diagram-pill ok">no per-user code</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-why {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-why .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 18px;
+  min-width: 240px;
+  flex: 1;
+}
+.diagram-why .diagram-arrow {
+  font-size: 24px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 不想分叉？ {#hosted}
 
 你不必这样做。每个模板还可以作为 `agent-native.com` 上的托管应用程序使用 - `mail.agent-native.com`、`calendar.agent-native.com` 等。免费或付费使用托管版本；仅当您想要更改托管版本未公开的内容时才进行分叉。

package/docs/content/locales/zh-CN/code-agents-ui.mdx

@@ -25,13 +25,71 @@ Agent-Native Code 是 Agent-Native 编码界面：本地 Claude Code/Codex 风
 - **桌面**：左侧边栏“代码”选项卡添加本机终端启动、应用程序 Web 视图和桌面深层链接，同时使用相同的运行模型。
 - **共享 UI**：`@agent-native/code-agents-ui` 渲染可重用的 React 表面。
 
-```an-diagram title="一间经营商店三层" summary="CLI、Desktop 和共享 UI 是同一文件支持的运行存储和执行器上的不同表面；主机通过 CodeAgentsHost 合约对其进行调整。"
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">启动 · 恢复 · 状态 · 停止</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">原生终端 · webviews · 深链接</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">分享d UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>文件支持的运行存储 + 执行器<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-bkcsek" title={"一间经营商店三层"} summary={"CLI、Desktop 和共享 UI 是同一文件支持的运行存储和执行器上的不同表面；主机通过 CodeAgentsHost 合约对其进行调整。"}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted">启动 · 恢复 · 状态 · 停止</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted">原生终端 · webviews · 深链接</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">分享d UI</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">host contract</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    文件支持的运行存储 + 执行器<br /><small class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 当前的拆分是有意融合的：标准代理侧边栏和代理团队在核心 `run-manager` 生命周期上运行，而 Agent-Native Code 使用由基于文件的代码运行存储和共享后台运行控制器词汇表支持的本地长时间运行会话。
 
 共享的 UI 是主机驱动的。它不知道自己是在 Electron、浏览器模板还是未来的托管 shell 中运行。主机提供 `CodeAgentsHost` 实现。
@@ -373,13 +431,41 @@ Agent-Native 的其余部分：
 5. 移动设备从 Dispatch 读取 `hosts`、`runs` 和 `transcript`；它从不说话
    直接到桌面。
 
-```an-diagram title="远程 Dispatch 仅限出站" summary="移动设备从不直接与桌面对话。 Desktop 长轮询 Dispatch，声明命令，驱动本地运行存储，并将结果镜像回来。"
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>移动端 / Telegram<br><small class=\"diagram-muted\">/code · 会话</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatch 中继<br><small class=\"diagram-muted\">主机 · 运行 · 转录</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">长轮询 · 领取 · 驱动运行存储</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-xtmvmh" title={"远程 Dispatch 仅限出站"} summary={"移动设备从不直接与桌面对话。 Desktop 长轮询 Dispatch，声明命令，驱动本地运行存储，并将结果镜像回来。"}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    移动端 / Telegram<br /><small class="diagram-muted">/code · 会话</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Dispatch 中继<br /><small class="diagram-muted">主机 · 运行 · 转录</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >长轮询 · 领取 · 驱动运行存储</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 规范的远程中继端点是：
 
 <Endpoint id="doc-block-1ocymjy" title={"桌面声明排队的工作"} method="POST" path="/_agent-native/integrations/remote/poll" summary={"桌面长轮询中继以声明排队的命令"} auth="Desktop device token" responses={[

package/docs/content/locales/zh-CN/components.mdx

@@ -25,13 +25,66 @@ import { ResourcesPanel } from "@agent-native/core/client/resources";
 `@agent-native/core/client` 或聚焦的 `@agent-native/core/client/*` 子路径
 因此捆绑商选择浏览器安全的条目。
 
-```an-diagram title="下拉一层，不脱离框架" summary="每个层都保持相同的运行时 - 操作、线程状态和 SQL-backed 同步 - 同时让您更好地控制镶边。"
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">围绕应用的完整侧边栏。80% 的常见场景。</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">你自己布局中的面板或聊天页。</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + runtime</span><small class=\"diagram-muted\">Own the chrome; optionally pass a BYO AgentChatRuntime.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span><small class=\"diagram-muted\">撰写r and transcript primitives only.</small></div><div class=\"diagram-rail\" data-rough>同一 runtime: actions &middot; thread state &middot; SQL-backed sync</div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-1tquzyh" title={"下拉一层，不脱离框架"} summary={"每个层都保持相同的运行时 - 操作、线程状态和 SQL-backed 同步 - 同时让您更好地控制镶边。"}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span
+    ><small class="diagram-muted">围绕应用的完整侧边栏。80% 的常见场景。</small>
+  </div>
+  <div class="diagram-card layer l2">
+    <span class="diagram-pill"
+      >&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span
+    ><small class="diagram-muted">你自己布局中的面板或聊天页。</small>
+  </div>
+  <div class="diagram-card layer l3">
+    <span class="diagram-pill">&lt;AssistantChat&gt; + runtime</span
+    ><small class="diagram-muted"
+      >Own the chrome; optionally pass a BYO AgentChatRuntime.</small
+    >
+  </div>
+  <div class="diagram-card layer l4">
+    <span class="diagram-pill"
+      >&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span
+    ><small class="diagram-muted">撰写r and transcript primitives only.</small>
+  </div>
+  <div class="diagram-rail" data-rough>
+    同一 runtime: actions &middot; thread state &middot; SQL-backed sync
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-layers .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-layers .l2 {
+  margin-inline-start: 24px;
+}
+.diagram-layers .l3 {
+  margin-inline-start: 48px;
+}
+.diagram-layers .l4 {
+  margin-inline-start: 72px;
+}
+.diagram-layers .diagram-rail {
+  margin-top: 6px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## 代理并聊天UI {#agent-chat-ui}
 
 | API                                  | 导入路径                                      | 何时使用                                                    |
@@ -178,13 +231,64 @@ import { PromptComposer } from "@agent-native/core/client/composer";
 | `useCollaborativeMap()` / `useCollaborativeArray()` | 当富文本正文协作不合适时，使用结构化 Y.Map/Y.Array 状态进行实验。 |
 | `dedupeCollabUsersByEmail()`                        | 为同一用户构建一个没有重复选项卡的自定义头像堆栈。                |
 
-```an-diagram title="存在：人类和智能体共享一个意识层" summary="useCollaborativeDoc 拥有感知实例；客户端挂钩发布光标和选择；服务器助手让代理操作显示为实时参与者。"
-{
-  "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">Humans<br><small class=\"diagram-muted\">usePresence &middot; cursors, selection</small></div><div class=\"diagram-node diagram-accent\">Agent 操作<br><small class=\"diagram-muted\">agentUpdateSelection()</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\">useCollaborativeDoc</span><small class=\"diagram-muted\">awareness layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">渲染所有人，包括代理</small></div></div>",
-  "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1ls1fjd" title={"存在：人类和智能体共享一个意识层"} summary={"useCollaborativeDoc 拥有感知实例；客户端挂钩发布光标和选择；服务器助手让代理操作显示为实时参与者。"}>
+
+```html
+<div class="diagram-presence">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Humans<br /><small class="diagram-muted"
+        >usePresence &middot; cursors, selection</small
+      >
+    </div>
+    <div class="diagram-node diagram-accent">
+      Agent 操作<br /><small class="diagram-muted"
+        >agentUpdateSelection()</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">useCollaborativeDoc</span
+    ><small class="diagram-muted">awareness layer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br /><small
+      class="diagram-muted"
+      >渲染所有人，包括代理</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-presence {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-presence .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-presence .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-presence .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 想要作为现场参与者出现的服务器端代理 actions 使用
 较低级别的 `@agent-native/core/collab` 代理存在助手：
 

package/docs/content/locales/zh-CN/context-awareness.mdx

@@ -24,13 +24,66 @@ description: "代理如何知道用户正在查看的内容：导航状态、选
 5. **提示切换** -- 当点击应成为代理轮次时，UI 控件调用 `sendToAgentChat()`
 6. **`navigate`**——来自代理的一次性命令，告诉 UI 去哪里
 
-```an-diagram title="代理如何看到您所看到的内容" summary="UI编写轻量级状态键；屏幕将它们转化为真实的记录；代理可以编写导航返回来移动 UI。"
-{
-  "html": "<div class=\"diagram-ctx\"><div class=\"diagram-card col\"><span class=\"diagram-pill\">UI 写入</span><div class=\"diagram-node\">navigation<br><small class=\"diagram-muted\">视图、打开的 ID</small></div><div class=\"diagram-node\">__url__<br><small class=\"diagram-muted\">shareable filters</small></div><div class=\"diagram-node\">selection<br><small class=\"diagram-muted\">行、块、形状</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\">view-screen</span><small class=\"diagram-muted\">reads state &middot; fetches records</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">代理执行<br><small class=\"diagram-muted\">on the real object</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box diagram-accent\">navigate<br><small class=\"diagram-muted\">代理移动 UI</small></div></div>",
-  "css": ".diagram-ctx{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-ctx .col{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-ctx .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-ctx .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ff3wqi" title={"代理如何看到您所看到的内容"} summary={"UI编写轻量级状态键；屏幕将它们转化为真实的记录；代理可以编写导航返回来移动 UI。"}>
+
+```html
+<div class="diagram-ctx">
+  <div class="diagram-card col">
+    <span class="diagram-pill">UI 写入</span>
+    <div class="diagram-node">
+      navigation<br /><small class="diagram-muted">视图、打开的 ID</small>
+    </div>
+    <div class="diagram-node">
+      __url__<br /><small class="diagram-muted">shareable filters</small>
+    </div>
+    <div class="diagram-node">
+      selection<br /><small class="diagram-muted">行、块、形状</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">view-screen</span
+    ><small class="diagram-muted">reads state &middot; fetches records</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    代理执行<br /><small class="diagram-muted">on the real object</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box diagram-accent">
+    navigate<br /><small class="diagram-muted">代理移动 UI</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-ctx {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-ctx .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-ctx .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-ctx .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 上下文层 {#context-layers}
 
 针对不同的作业使用不同的上下文通道：
@@ -382,9 +435,44 @@ useDbSync({
 - 处理同步事件时，UI 会过滤掉与其自己的 `ignoreSource` 值匹配的事件 - 因此它不会重新获取刚刚写入的数据
 - 来自代理、其他选项卡和 actions 的事件仍然正常进行
 
-```an-diagram title="源标记可阻止自重取抖动" summary="选项卡会忽略标有其自己的 TAB_ID 的同步事件，但仍会对代理和其他选项卡写入做出反应。"
-{
-  "html": "<div class=\"diagram-jitter\"><div class=\"diagram-node\">此标签页写入<br><small class=\"diagram-muted\">X-Request-Source: TAB_ID</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>服务器存储来源<br>on the event</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill warn\">source == TAB_ID &rarr; ignored</div><small class=\"diagram-muted\">无需重新拉取，无闪烁</small><div class=\"diagram-pill ok\">agent / other tab &rarr; applied</div><small class=\"diagram-muted\">界面实时更新</small></div></div>",
-  "css": ".diagram-jitter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jitter .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-jitter .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1pja6qg" title={"源标记可阻止自重取抖动"} summary={"选项卡会忽略标有其自己的 TAB_ID 的同步事件，但仍会对代理和其他选项卡写入做出反应。"}>
+
+```html
+<div class="diagram-jitter">
+  <div class="diagram-node">
+    此标签页写入<br /><small class="diagram-muted"
+      >X-Request-Source: TAB_ID</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>服务器存储来源<br />on the event</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill warn">source == TAB_ID &rarr; ignored</div>
+    <small class="diagram-muted">无需重新拉取，无闪烁</small>
+    <div class="diagram-pill ok">agent / other tab &rarr; applied</div>
+    <small class="diagram-muted">界面实时更新</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-jitter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jitter .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-jitter .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
+
+</Diagram>

package/docs/content/locales/zh-CN/creating-templates.mdx

@@ -112,13 +112,60 @@ npx @agent-native/core@latest create my-platform
 
 每个模板的四个区域通过一个共享操作界面和一个 SQL 数据库连接在一起 - 代理和 UI 是执行相同操作的平等合作伙伴：
 
-```an-diagram title="模板的四个区域如何连接" summary="UI 和代理都通过相同的操作到达 SQL；应用程序状态和轮询同步使它们保持一致。"
-{
-  "html": "<div class=\"diagram-tmpl\"><div class=\"diagram-col\"><div class=\"diagram-node\">React 界面<br><small class=\"diagram-muted\">app/routes · 组件</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">AGENTS.md · skills</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">行动</span><small class=\"diagram-muted\">defineAction()</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>通过 Drizzle 使用 SQL<br><small class=\"diagram-muted\">additive schema</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">轮询ing sync</div></div>",
-  "css": ".diagram-tmpl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-tmpl .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-tmpl .diagram-arrow{font-size:22px;line-height:1}.diagram-tmpl .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-w9lup6" title={"模板的四个区域如何连接"} summary={"UI 和代理都通过相同的操作到达 SQL；应用程序状态和轮询同步使它们保持一致。"}>
+
+```html
+<div class="diagram-tmpl">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      React 界面<br /><small class="diagram-muted">app/routes · 组件</small>
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">AGENTS.md · skills</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">行动</span
+    ><small class="diagram-muted">defineAction()</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    通过 Drizzle 使用 SQL<br /><small class="diagram-muted"
+      >additive schema</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">轮询ing sync</div>
+</div>
+```
+
+```css
+.diagram-tmpl {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-tmpl .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-tmpl .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-tmpl .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## SQL中的模型数据 {#data-models}
 
 使用框架 Drizzle 帮助程序定义域表，以便架构在 SQLite、Postgres、D1、Turso、Supabase、Neon 和其他支持的后端之间保持可移植性：