@agent-native/core 0.79.26 → 0.79.27

package/docs/content/locales/zh-CN/template-calendar.mdx

@@ -18,13 +18,67 @@ description: "由代理支持的日历，具有 Google Calendar 同步和 Calend
 
 当您打开应用程序时，活动日历视图是主表面。客服人员仍然知道您正在查看哪一天、哪一周或哪一天的活动，因此您可以说“安排在这一天与 Alex 进行 30 分钟的通话”，而无需说明所有内容。
 
-```an-diagram title="调度请求如何流动" summary="无论您单击日历还是询问客服人员，相同的操作都会从 Google Calendar 实时读取并写回同一视图。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">你点击<br><small class=\"diagram-muted\">拖拽、工具栏、快捷键</small></div><div class=\"diagram-node\">你向代理请求<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">实时、多账户</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">预约 · 可用时间</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">日历视图实时更新</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-x7himh" title={"调度请求如何流动"} summary={"无论您单击日历还是询问客服人员，相同的操作都会从 Google Calendar 实时读取并写回同一视图。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      你点击<br /><small class="diagram-muted">拖拽、工具栏、快捷键</small>
+    </div>
+    <div class="diagram-node">
+      你向代理请求<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted">实时、多账户</small>
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">预约 · 可用时间</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">日历视图实时更新</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什么
 
 - **在日、周或月视图中查看您真实的 Google Calendar**，并叠加多个帐户。

package/docs/content/locales/zh-CN/template-chat.mdx

@@ -37,13 +37,66 @@ description: "一个最小的聊天优先代理本机应用程序：持久的聊
 
 这就是重点。聊天是您自己的代理的一个薄而有用的默认外壳，而不是一个假装通用的领域产品。
 
-```an-diagram title="Chat shell 中包含哪些内容" summary="框架标准运行时上的精简聊天界面（操作、持久线程、实时同步和身份验证），有空间添加您自己的 UI。"
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">线程列表<br><small class=\"diagram-muted\">创建 · 重新打开 · 固定 · 归档</small></div><div class=\"diagram-node\">整页聊天<br><small class=\"diagram-muted\">/ 上的框架聊天界面</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">核心 SQL 表<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">实时同步 &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">登录 · 组织 · 会话</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1nyi620" title={"Chat shell 中包含哪些内容"} summary={"框架标准运行时上的精简聊天界面（操作、持久线程、实时同步和身份验证），有空间添加您自己的 UI。"}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      线程列表<br /><small class="diagram-muted"
+        >创建 · 重新打开 · 固定 · 归档</small
+      >
+    </div>
+    <div class="diagram-node">
+      整页聊天<br /><small class="diagram-muted">/ 上的框架聊天界面</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      核心 SQL 表<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">实时同步 &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted">登录 · 组织 · 会话</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 何时采摘 {#when-to-pick}
 
 - **您想要一个用户可以立即交谈的基本应用程序**，然后使用 actions 和 UI 进行扩展。

package/docs/content/locales/zh-CN/template-clips.mdx

@@ -19,13 +19,61 @@ search: "Clips 浏览器日志 开发人员日志 控制台日志 网络日志
 
 沿着将 Loom + Granola + Wispr Flow 集成到一个应用程序中的思路来思考 — 但代理在每个界面上都是一流的编辑器，并且录音、会议和听写都是您的，而不是 SaaS 供应商的。 Clips 还使共享录音可供代理读取：将普通的 Clips 共享链接粘贴到代理中，它可以“听到”文本形式的文字记录，并“看到”带有时间戳的屏幕帧作为图像 - 无需原始视频。帧查看适用于任何具有图像功能的代理（ChatGPT、Claude 代码、光标、Codex）；纯文本网络聊天仍然可以获得完整的文字记录，并且可以拍摄您上传的帧。
 
-```an-diagram title="捕获、转录、重用" summary="三种捕获类型集中在一个库中；代理进行抄写、标题和总结，然后每个抄本都可以搜索和共享。"
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">屏幕录制</div><div class=\"diagram-node\">日历会议</div><div class=\"diagram-node\">按住 Fn 听写</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>一个库<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">标题 · 摘要 · 章节</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">搜索</div><div class=\"diagram-pill\">分享</div><div class=\"diagram-pill\">代理可读 links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-pkjyh1" title={"捕获、转录、重用"} summary={"三种捕获类型集中在一个库中；代理进行抄写、标题和总结，然后每个抄本都可以搜索和共享。"}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">屏幕录制</div>
+    <div class="diagram-node">日历会议</div>
+    <div class="diagram-node">按住 Fn 听写</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    一个库<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">标题 · 摘要 · 章节</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">搜索</div>
+    <div class="diagram-pill">分享</div>
+    <div class="diagram-pill">代理可读 links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什么
 
 - **使用内置录音机、网络摄像头覆盖、音频捕获和暂停/修剪来录制屏幕**。

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

@@ -22,13 +22,67 @@ description: "MDX 的开源 Obsidian：编辑本地 Markdown/MDX 文件，生成
 
 当您打开应用程序时，您将在编辑器旁边看到一个页面树。代理始终知道您正在查看哪个页面以及您选择了哪些文本，因此文档编辑可以保持在当前页面。
 
-```an-diagram title="一份文档，多名编辑" summary="您和代理都通过相同的 Yjs 管道进行写入。 SQL 是规范存储；本地文件和 Notion 是可选的同步表面。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">你输入<br><small class=\"diagram-muted\">slash 菜单、工具栏</small></div><div class=\"diagram-node\">代理编辑<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">实时、无冲突合并</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">规范 SQL 存储</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">本地 .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion 页面<br><small class=\"diagram-muted\">拉取 · 推送</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-19mhb7k" title={"一份文档，多名编辑"} summary={"您和代理都通过相同的 Yjs 管道进行写入。 SQL 是规范存储；本地文件和 Notion 是可选的同步表面。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      你输入<br /><small class="diagram-muted">slash 菜单、工具栏</small>
+    </div>
+    <div class="diagram-node">
+      代理编辑<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">实时、无冲突合并</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted">规范 SQL 存储</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      本地 .md / .mdx<br /><small class="diagram-muted">/local-files</small>
+    </div>
+    <div class="diagram-box">
+      Notion 页面<br /><small class="diagram-muted">拉取 · 推送</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什么
 
 - **编写包含标题、列表、表格、代码块、图像和链接的富文本**。斜线命令（`/`）插入块；选择文本会弹出格式工具栏。

package/docs/content/locales/zh-CN/template-design.mdx

@@ -18,13 +18,67 @@ Design 是一家代理原生 HTML 原型工作室。该代理不是分层绘图
 
 当您打开应用程序时，生成的原型位于工作区的中心，预览模式、提示修订和导出控件触手可及。代理生产的所有东西都是真实的 HTML，您可以精炼、导出或移交。
 
-```an-diagram title="一件神器，无需翻译" summary="代理生成独立的 Alpine/Tailwind HTML； iframe、可编辑源和每个导出都读取相同的文件。链接的设计系统将令牌输入到每个通道中。"
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">提示<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">设计系统</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">代理生成</span><small class=\"diagram-muted\">独立 HTML / JSX 文件</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">调整旋钮 · Cmd+I 优化</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · 交接</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1rwuo8n" title={"一件神器，无需翻译"} summary={"代理生成独立的 Alpine/Tailwind HTML； iframe、可编辑源和每个导出都读取相同的文件。链接的设计系统将令牌输入到每个通道中。"}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      提示<br /><small class="diagram-muted">describe screen / page</small>
+    </div>
+    <div class="diagram-pill">设计系统</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">代理生成</span
+    ><small class="diagram-muted">独立 HTML / JSX 文件</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >调整旋钮 · Cmd+I 优化</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · 交接</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 何时采摘
 
 - **您想要一个精美的登陆页面概念、产品 UI 方向或品牌探索**，可以让工具保持真实的 HTML — 而不是分层的画布。

package/docs/content/locales/zh-CN/template-dispatch.mdx

@@ -20,13 +20,66 @@ Dispatch 是**工作区控制平面**。其他模板是域应用程序（邮件
 
 如果您正在运行带有许多应用程序的 [multi-app workspace](/docs/multi-app-workspace)，Dispatch 就是粘合剂。
 
-```an-diagram title="统筹安排，不要专门化" summary="来自每个渠道的消息都会集中在一个收件箱中；编排器通过 A2A 对域工作进行分类和委托给正确的专业应用程序 — 秘密、资源和批准保持核心。"
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">A2A 请求</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">中央收件箱 · 分诊 · 路由</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">邮件 Agent</div><div class=\"diagram-node\">分析 Agent</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">密钥保险库</span><span class=\"diagram-pill\">工作区资源</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">计划任务</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-1io92sj" title={"统筹安排，不要专门化"} summary={"来自每个渠道的消息都会集中在一个收件箱中；编排器通过 A2A 对域工作进行分类和委托给正确的专业应用程序 — 秘密、资源和批准保持核心。"}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">A2A 请求</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">中央收件箱 · 分诊 · 路由</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">邮件 Agent</div>
+    <div class="diagram-node">分析 Agent</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">密钥保险库</span
+  ><span class="diagram-pill">工作区资源</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">计划任务</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## 它的作用 {#what-it-does}
 
 - **中央收件箱。** Slack 私信、电报消息、电子邮件通知、来自其他代理的 A2A 请求 — 全部集中在一个地方。 Dispatch 代理会进行分类并自行处理或委托处理。请参阅 [Messaging](/docs/messaging) 了解如何将 Slack、电子邮件和 Telegram 连接到您的工作区。

package/docs/content/locales/zh-CN/template-forms.mdx

@@ -18,13 +18,67 @@ Forms 是一个代理原生表单构建器。描述您想要的表单，在编
 
 当您打开应用程序时，您会看到表单、当前编辑器和实时预览。代理可以根据提示创建表单、更新字段标签和选项、更改验证以及使用 UI 使用的相同 actions 连接提交目的地。
 
-```an-diagram title="构建、发布、收集" summary="代理和可视化编辑器编辑一个 SQL-backed 表单定义。公共填写页面未经身份验证，提交内容将通过服务器端路由到您的目的地。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">代理提示词<br><small class=\"diagram-muted\">\"add an NPS question\"</small></div><div class=\"diagram-node\">可视化编辑器<br><small class=\"diagram-muted\">标签、校验、顺序</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-form · update-form</span><small class=\"diagram-muted\">字段 JSON，设置 JSON</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">forms table<br><small class=\"diagram-muted\">通过 Drizzle 使用 SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">公开填写页<br><small class=\"diagram-muted\">unauthenticated</small></div><div class=\"diagram-box\">responses<br><small class=\"diagram-muted\">+ Slack / webhook / 表格</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-ea4c07" title={"构建、发布、收集"} summary={"代理和可视化编辑器编辑一个 SQL-backed 表单定义。公共填写页面未经身份验证，提交内容将通过服务器端路由到您的目的地。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      代理提示词<br /><small class="diagram-muted">"add an NPS question"</small>
+    </div>
+    <div class="diagram-node">
+      可视化编辑器<br /><small class="diagram-muted">标签、校验、顺序</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-form · update-form</span
+    ><small class="diagram-muted">字段 JSON，设置 JSON</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    forms table<br /><small class="diagram-muted">通过 Drizzle 使用 SQL</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      公开填写页<br /><small class="diagram-muted">unauthenticated</small>
+    </div>
+    <div class="diagram-box">
+      responses<br /><small class="diagram-muted"
+        >+ Slack / webhook / 表格</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什么
 
 - **以对话方式构建表单。**“创建联系表单”、“添加 NPS 分数问题”、“将电子邮件字段设为必填”。代理更新表单架构，并从 SQL 支持的状态更新预览。

package/docs/content/locales/zh-CN/template-mail.mdx

@@ -18,13 +18,69 @@ description: "代理驱动的电子邮件客户端。连接您的 Gmail，客服
 
 当您打开应用程序时，键盘优先的收件箱和线程视图将重点关注邮件本身。代理始终知道您处于哪个视图以及您打开了哪个线程，因此您可以说“存档此”或“起草友好拒绝”，而无需解释“此”是什么。
 
-```an-diagram title="邮件请求如何流动" summary="键盘快捷键和代理提示运行相同的操作。电子邮件位于 Gmail； SQL 和 application_state 中的草稿、自动化和实时跟踪。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">由你驱动<br><small class=\"diagram-muted\">J/K/E/R 快捷键</small></div><div class=\"diagram-node\">你向代理请求<br><small class=\"diagram-muted\">“起草一封友好的拒绝”</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">多账户，通过 OAuth</small></div><div class=\"diagram-box\">SQL + application_state<br><small class=\"diagram-muted\">草稿 · 自动化 · 跟踪</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">收件箱实时刷新</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-8gievc" title={"邮件请求如何流动"} summary={"键盘快捷键和代理提示运行相同的操作。电子邮件位于 Gmail； SQL 和 application_state 中的草稿、自动化和实时跟踪。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      由你驱动<br /><small class="diagram-muted">J/K/E/R 快捷键</small>
+    </div>
+    <div class="diagram-node">
+      你向代理请求<br /><small class="diagram-muted"
+        >“起草一封友好的拒绝”</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">多账户，通过 OAuth</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<br /><small class="diagram-muted"
+        >草稿 · 自动化 · 跟踪</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">收件箱实时刷新</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什么
 
 - **使用键盘快捷键阅读和分类电子邮件**（`J`/`K` 用于移动，`E` 用于存档，`R` 用于回复，`C` 用于撰写）。