@agent-native/core 0.79.26 → 0.79.27

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

@@ -33,13 +33,61 @@ description: "代理跟踪、评估、反馈、A/B 实验和内置仪表板 -
 
 无需更改代码。仪器透明地挂接到 `production-agent.ts`。
 
-```an-diagram title="每次运行都会为循环提供动力" summary="一次代理运行会产生跟踪、自动评分和反馈挂钩 - 所有这些都存储在应用程序自己的 SQL 中并显示在仪表板上。实验将流量分配给配置变体。"
-{
-  "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">代理运行<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\">自动捕获</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}"
+<Diagram id="doc-block-x5yenj" title={"每次运行都会为循环提供动力"} summary={"一次代理运行会产生跟踪、自动评分和反馈挂钩 - 所有这些都存储在应用程序自己的 SQL 中并显示在仪表板上。实验将流量分配给配置变体。"}>
+
+```html
+<div class="obs-loop">
+  <div class="diagram-node">
+    代理运行<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">自动捕获</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;
 }
 ```
 
+</Diagram>
+
 ## 仪表板 {#dashboard}
 
 将仪表板添加到具有单个路由的任何模板：
@@ -147,13 +195,59 @@ PUT /_agent-native/observability/experiments/:id
 
 使用您的引擎接受的真实模型标识符来代替 `<your-model-id>` / `<other-model-id>`（模型名称经常更改 - 检查您的提供商/引擎的当前 ID）。代理循环自动解析用户的变体并应用配置覆盖。分配使用一致的散列——同一用户总是得到相同的变体。
 
-```an-diagram title="一致哈希变体分配" summary="每个用户散列到一个稳定的变体，循环应用该变体的配置覆盖，并且结果以置信区间汇总每个变体。"
-{
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">用户 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\">配置覆盖 A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">配置覆盖 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}"
+<Diagram id="doc-block-1ap5n7y" title={"一致哈希变体分配"} summary={"每个用户散列到一个稳定的变体，循环应用该变体的配置覆盖，并且结果以置信区间汇总每个变体。"}>
+
+```html
+<div class="exp">
+  <div class="diagram-node">
+    用户 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">配置覆盖 A</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill accent">treatment &middot; 50%</span
+      ><small class="diagram-muted">配置覆盖 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;
 }
 ```
 
+</Diagram>
+
 ## 配置 {#config}
 
 所有设置都存储在 `observability-config` 密钥中：

package/corpus/core/docs/content/locales/zh-CN/observational-memory.mdx

@@ -19,13 +19,51 @@ OM 将长线程表示为三层，从最精炼到最近：
 | **观察**           | 密集、过时的条目将一段原始消息折叠成所发生事件的紧凑记录。                  |
 | **最近的原始消息** | 最后 N 个回合，**逐字**保存 — 从未折叠 — 因此代理始终可以看到最新的上下文。 |
 
-```an-diagram title="三层，提炼到最近" summary="较旧的前缀折叠成过时的观察结果和长弧反射；只有最近的轮次才保留原样。"
-{
-  "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">反思</span><small class=\"diagram-muted\">从观察日志浓缩出的长期摘要</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">观察</span><small class=\"diagram-muted\">带日期的密集条目，折叠多段原始消息</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">最近的原始消息</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — 永不折叠</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}"
+<Diagram id="doc-block-3lgvfm" title={"三层，提炼到最近"} summary={"较旧的前缀折叠成过时的观察结果和长弧反射；只有最近的轮次才保留原样。"}>
+
+```html
+<div class="om">
+  <div class="diagram-card">
+    <span class="diagram-pill">反思</span
+    ><small class="diagram-muted">从观察日志浓缩出的长期摘要</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">观察</span
+    ><small class="diagram-muted">带日期的密集条目，折叠多段原始消息</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">最近的原始消息</span
+    ><small class="diagram-muted"
+      >last N turns, kept <strong>verbatim</strong> — 永不折叠</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;
 }
 ```
 
+</Diagram>
+
 在每一轮中，读取端将它们组装成一个自标记的 `[Observational Memory]` 块，该块替换原始的较旧前缀，保持最近原始窗口完整，并告诉模型将压缩记录视为权威（不要重做已完成的工作，信任记录的决策、名称、日期和状态）。
 
 ## 压缩如何运行 {#compaction}
@@ -35,13 +73,52 @@ OM 将长线程表示为三层，从最精炼到最近：
 1. **观察者** - 一旦线程的*unobserved*消息超过观察标记阈值，将它们折叠成单个密集观察条目。
 2. **Reflector** — 一旦持久观察日志本身超过反射令牌阈值，就会将观察结果压缩为更高级别的反射。
 
-```an-diagram title="干净利落的转弯后两次尽力传球" summary="每次传递都不会低于其阈值，因此每轮运行压缩器都很便宜。故障会被吞掉，并且不会增加延迟。"
-{
-  "html": "<div class=\"om-pass\"><div class=\"diagram-node\">干净回合结束<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}"
+<Diagram id="doc-block-1jqjn58" title={"干净利落的转弯后两次尽力传球"} summary={"每次传递都不会低于其阈值，因此每轮运行压缩器都很便宜。故障会被吞掉，并且不会增加延迟。"}>
+
+```html
+<div class="om-pass">
+  <div class="diagram-node">
+    干净回合结束<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;
 }
 ```
 
+</Diagram>
+
 两者都通过低于其阈值的无操作，因此在每轮之后调用压缩器是便宜的。由于 OM 用稳定的压缩文本替换了易失的原始前缀，因此它还可以在长线程的轮流中保持提示**缓存稳定**。
 
 OM 数据存在于应用程序自己的 SQL 数据库中，其范围仅限于所有者（以及存在的组织）——与框架的其余部分具有相同的范围模型。它永远不会在用户之间共享。

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

@@ -10,13 +10,53 @@ description: "首次运行配置的设置清单 - API 密钥、OAuth 和提供
 到代理聊天：连接人工智能引擎，可选择将应用程序指向共享
 基础设施，仅在需要时添加提供程序。
 
-```an-diagram title="设置清单" summary="只需要连接一个AI引擎。该面板会跟踪完成情况，并在完成所需的所有操作后自动隐藏。"
-{
-  "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>连接 AI 引擎</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>邮件投递</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}"
+<Diagram id="doc-block-2y4gqt" title={"设置清单"} summary={"只需要连接一个AI引擎。该面板会跟踪完成情况，并在完成所需的所有操作后自动隐藏。"}>
+
+```html
+<div class="ob">
+  <div class="diagram-card">
+    <span class="diagram-pill warn">required</span><strong>连接 AI 引擎</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>邮件投递</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;
 }
 ```
 
+</Diagram>
+
 ## 对于最终用户
 
 ### 您将看到什么

package/corpus/core/docs/content/locales/zh-CN/plan-plugin.mdx

@@ -14,13 +14,68 @@ Agent-Native **Plan** 应用程序作为一个可安装的捆绑包提供。一
 - **两个 skills** — `/visual-plan`（规范入口点）和 `/visual-recap`。
 - **计划 MCP 连接器** — 针对 `https://plan.agent-native.com` 上的托管应用程序进行注册（MCP 端点 `https://plan.agent-native.com/_agent-native/mcp`，服务器名称 `plan`）。
 
-```an-diagram title="三条路线，一揽子" summary="通用 CLI、Claude Code 插件和 Codex 插件都安装相同的两个技能以及托管计划连接器。"
-{
-  "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 插件<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Codex 插件<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}"
+<Diagram id="doc-block-xt4mmz" title={"三条路线，一揽子"} summary={"通用 CLI、Claude Code 插件和 Codex 插件都安装相同的两个技能以及托管计划连接器。"}>
+
+```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 插件<br /><small class="diagram-muted">/plugin install</small>
+    </div>
+    <div class="diagram-node">
+      Codex 插件<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;
 }
 ```
 
+</Diagram>
+
 默认情况下，skills 都会发布到托管的计划应用 - 他们通过
 MCP 连接器并向您提供链接或内联计划以供审核。他们从不倾倒
 内嵌 Markdown/ASCII 计划作为可交付成果放入聊天中。如果计划工具
@@ -82,13 +137,47 @@ npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind plan --
 除非您明确表示，评论、屏幕截图和计划历史记录均不可用
 稍后发布。
 
-```an-diagram title="托管模式与本地文件模式" summary="默认情况下技能通过连接器发布；本地文件模式将 MDX 写入磁盘并通过本地主机桥进行预览。"
-{
-  "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">默认 · 托管</span><strong>发布到 Plan 应用</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\">本地文件隐私</span><strong>将 MDX 写入磁盘</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No 数据库写入s 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}"
+<Diagram id="doc-block-1kkwg5h" title={"托管模式与本地文件模式"} summary={"默认情况下技能通过连接器发布；本地文件模式将 MDX 写入磁盘并通过本地主机桥进行预览。"}>
+
+```html
+<div class="diagram-modes">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">默认 · 托管</span
+    ><strong>发布到 Plan 应用</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">本地文件隐私</span
+    ><strong>将 MDX 写入磁盘</strong
+    ><small class="diagram-muted"
+      >plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr;
+      hosted Plan UI reads local source. No 数据库写入s 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;
 }
 ```
 
+</Diagram>
+
 Agent Native 桌面有一个单独的托管计划本地文件同步路径：
 桌面应用程序可以将托管计划镜像到本地 MDX 文件并将编辑内容导入回来
 无需克隆 Plan 应用程序或运行 CLI。该工作流程保持托管

package/corpus/core/docs/content/locales/zh-CN/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ PR Visual Recap 是一个 GitHub 操作，它将每个拉取请求转变为**可
 7. 在交互式回顾的链接旁边插入一条粘性公关评论，将屏幕截图**内联**嵌入到 `<picture>` 元素（通过 GitHub 的迷彩图像代理提供）。
 8. 以成功、跳过或中立的方式完成 `Visual Recap` 检查。
 
-```an-diagram title="每次 PR 推送都会发生什么" summary="有界差异为真正的编码代理提供信息，该代理编写了回顾；工作流程会对其进行屏幕截图并插入一条粘性评论。"
-{
-  "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">PR 推送<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\">编码 Agent<br><small class=\"diagram-muted\">Claude Code / Codex 读取 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\">无头 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\">一条置顶 PR 评论<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}"
+<Diagram id="doc-block-wztleo" title={"每次 PR 推送都会发生什么"} summary={"有界差异为真正的编码代理提供信息，该代理编写了回顾；工作流程会对其进行屏幕截图并插入一条粘性评论。"}>
+
+```html
+<div class="diagram-recap">
+  <div class="diagram-node">
+    PR 推送<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">
+    编码 Agent<br /><small class="diagram-muted"
+      >Claude Code / Codex 读取 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">
+    无头 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">
+    一条置顶 PR 评论<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;
 }
 ```
 
+</Diagram>
+
 重新推送会更新相同的计划和相同的粘性评论 - 没有孤立的计划，没有垃圾评论。
 
 ## 安装
@@ -157,13 +216,69 @@ 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) 与现有的 `pr-visual-recap.yml` 一起复制到存储库的 `.github/workflows/` 目录中。相同的秘密（`PLAN_RECAP_TOKEN`、`ANTHROPIC_API_KEY`）适用。
 
-```an-diagram title="分叉 PR 同意门" summary="默认情况下，分叉 PR 没有任何秘密；受信任的作者自动运行，外部贡献者需要新的维护者回顾标签。"
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">Fork PR 已打开<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\">可信作者</span><small class=\"diagram-muted\">OWNER、MEMBER 或 COLLABORATOR 自动运行</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">外部贡献者</span><small class=\"diagram-muted\">维护者审核 diff 后再应用 <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">门禁检查<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\">回顾运行<br><small class=\"diagram-muted\">仅基础 repo 代码 · fork diff 作为文本输入</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}"
+<Diagram id="doc-block-1n6pvin" title={"分叉 PR 同意门"} summary={"默认情况下，分叉 PR 没有任何秘密；受信任的作者自动运行，外部贡献者需要新的维护者回顾标签。"}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-node">
+    Fork PR 已打开<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">可信作者</span
+    ><small class="diagram-muted">OWNER、MEMBER 或 COLLABORATOR 自动运行</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">外部贡献者</span
+    ><small class="diagram-muted"
+      >维护者审核 diff 后再应用 <code>recap</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    门禁检查<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">
+    回顾运行<br /><small class="diagram-muted"
+      >仅基础 repo 代码 · fork diff 作为文本输入</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;
 }
 ```
 
+</Diagram>
+
 ### 标签门如何工作
 
 1. 分叉贡献者创建了一个 PR。由于 GitHub 保留了分叉运行的秘密，因此会跳过正常的 `pull_request` 工作流程。

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

@@ -7,13 +7,48 @@ description: "循环内部观察者/护栏挂钩，用于监视模型的流输
 
 `Processor` 是代理运行的循环内部**观察者/护栏**。它监视模型的流式输出，工具在运行过程中调用它的请求，保持其自己的临时状态，并且可以在声明“完成”之前**中止**运行。这是实时护栏（阻止中流不允许的输出）和完成证明/覆盖门（检查模型将要做什么并停止它）的结构先决条件。
 
-```an-diagram title="三个钩子在奔跑中开火的地方" 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 — 拦截工具调用</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 — 判定</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%}"
+<Diagram id="doc-block-1zox12" title={"三个钩子在奔跑中开火的地方"} 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 — 拦截工具调用</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 — 判定</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%;
 }
 ```
 
+</Diagram>
+
 > [!WARNING]
 > 处理器是**配置**，不是工具，不是操作，也不是创作 DSL。处理器仅观察、改变它们自己的流范围状态和 `abort()`。它们从不定义应用程序行为、替换 actions 或出现在模型中。应用程序操作属于[actions](/docs/actions)。