@agent-native/core 0.79.26 → 0.79.27

package/docs/content/locales/zh-TW/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ PR Visual Recap 是一個 GitHub 操作，它將每個 pull request 轉變為**
 7. 在互動式回顧的連結旁邊插入一條置頂 PR 評論，將螢幕截圖**行內**嵌入到 `<picture>` 元素（透過 GitHub 的camo 圖片代理提供）。
 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-141novq" 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-175407u" 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/docs/content/locales/zh-TW/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-nzwzrz" 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)。
 

package/docs/content/locales/zh-TW/progress.mdx

@@ -41,13 +41,55 @@ await completeRun(run.id, run.owner, "succeeded");
 | `failed`    | 錯誤終端                  |
 | `cancelled` | 使用者中斷                |
 
-```an-diagram title="執行生命週期" summary="startRun 開啟一個執行行； updateRunProgress 修補它； completeRun 將其移至一種終端狀態並標記 completed_at。"
-{
-  "html": "<div class=\"diagram-run\"><div class=\"diagram-box\" data-rough>startRun()</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel running\" data-rough><span class=\"diagram-pill accent\">running</span><small class=\"diagram-muted\">updateRunProgress() &#8635; percent + step</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col terminal\"><span class=\"diagram-pill ok\">succeeded</span><span class=\"diagram-pill warn\">failed</span><span class=\"diagram-pill\">cancelled</span><small class=\"diagram-muted\">completeRun() &rarr; sets completed_at</small></div></div>",
-  "css": ".diagram-run{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-run .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:12px 16px}.diagram-run .terminal{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.diagram-run .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-oube32" title={"執行生命週期"} summary={"startRun 開啟一個執行行； updateRunProgress 修補它； completeRun 將其移至一種終端狀態並標記 completed_at。"}>
+
+```html
+<div class="diagram-run">
+  <div class="diagram-box" data-rough>startRun()</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel running" data-rough>
+    <span class="diagram-pill accent">running</span
+    ><small class="diagram-muted"
+      >updateRunProgress() &#8635; percent + step</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col terminal">
+    <span class="diagram-pill ok">succeeded</span
+    ><span class="diagram-pill warn">failed</span
+    ><span class="diagram-pill">cancelled</span
+    ><small class="diagram-muted">completeRun() &rarr; sets completed_at</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-run {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-run .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 16px;
+}
+.diagram-run .terminal {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+}
+.diagram-run .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 終端狀態設定為 `completed_at`。 UI 托盤僅顯示 `running` 行；完成的行保留在資料庫中以供 `action=list` 查詢。
 
 ## API {#api}

package/docs/content/locales/zh-TW/pure-agent-apps.mdx

@@ -12,13 +12,55 @@ description: "代理是整個產品的應用程式：應用程式代理迴圈是
 屬於。它仍然是一個真實的應用程式：actions、工作階段、應用程式狀態、歷史紀錄，
 設定、憑證和共用紀錄均位於 SQL 中。
 
-```an-diagram title="應用程式代理迴圈是前門" summary="許多入口點透過 SQL-backed 操作和狀態到達一個代理迴圈；結果返回到請求來自的地方。僅當需要人類監督時才新增 UI。"
-{
-  "html": "<div class=\"diagram-pure\"><div class=\"diagram-col\"><div class=\"diagram-pill\">Terminal</div><div class=\"diagram-pill\">Slack · 郵件</div><div class=\"diagram-pill\">定時工作</div><div class=\"diagram-pill\">Another agent (A2A)</div><div class=\"diagram-pill\">Chat</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">應用代理迴圈</span><small class=\"diagram-muted\">操作 · 工作階段 · SQL 中的應用狀態</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>結果返回<br><small class=\"diagram-muted\">to where it belongs</small></div></div>",
-  "css": ".diagram-pure{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-pure .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-pure .diagram-arrow{font-size:22px;line-height:1}.diagram-pure .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1yekfb" title={"應用程式代理迴圈是前門"} summary={"許多入口點透過 SQL-backed 操作和狀態到達一個代理迴圈；結果返回到請求來自的地方。僅當需要人類監督時才新增 UI。"}>
+
+```html
+<div class="diagram-pure">
+  <div class="diagram-col">
+    <div class="diagram-pill">Terminal</div>
+    <div class="diagram-pill">Slack · 郵件</div>
+    <div class="diagram-pill">定時工作</div>
+    <div class="diagram-pill">Another agent (A2A)</div>
+    <div class="diagram-pill">Chat</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">應用代理迴圈</span
+    ><small class="diagram-muted">操作 · 工作階段 · SQL 中的應用狀態</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    結果返回<br /><small class="diagram-muted">to where it belongs</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-pure {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-pure .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-pure .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-pure .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 當工作在背景執行時，達到此形狀，輸出離開
 應用程式，域是一次性的，或者您正在製作原型。代理仍然需要 UI —
 不是儀表板，而是人類監督、設定和引導它的地方 -

package/docs/content/locales/zh-TW/real-time-collaboration.mdx

@@ -36,13 +36,53 @@ description: "多使用者協作編輯，其中 AI 代理是一流的同行：CR
 
 協作系統有五個互鎖層。
 
-```an-diagram title="五層互鎖" summary="從記憶中的 CRDT 到在對等點之間傳送更新的傳輸 — 每一層都有一項工作。"
-{
-  "html": "<div class=\"diagram-stack\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">1 &middot; Yjs Y.Doc</span><small class=\"diagram-muted\">CRDT &mdash; 無衝突合併，無協調器</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill\">2 &middot; SQL 規範內容</span><small class=\"diagram-muted\">_collab_docs &mdash; durable source of truth, versioned</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill\">3 &middot; 由 updatedAt 門控的對帳</span><small class=\"diagram-muted\">代理編輯透過 SQL 更新時間傳播</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill\">4 &middot; 主用戶端選舉</span><small class=\"diagram-muted\">恰好一個標籤頁面應用快照</small></div><div class=\"diagram-card layer\"><span class=\"diagram-pill ok\">5 &middot; SSE 快速路徑 + 輪詢</span><small class=\"diagram-muted\">約幾十毫秒，任何地方都可降級為 2 秒輪詢</small></div></div>",
-  "css": ".diagram-stack{display:flex;flex-direction:column;gap:8px}.diagram-stack .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-5oaucp" title={"五層互鎖"} summary={"從記憶中的 CRDT 到在對等點之間傳送更新的傳輸 — 每一層都有一項工作。"}>
+
+```html
+<div class="diagram-stack">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">1 &middot; Yjs Y.Doc</span
+    ><small class="diagram-muted">CRDT &mdash; 無衝突合併，無協調器</small>
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill">2 &middot; SQL 規範內容</span
+    ><small class="diagram-muted"
+      >_collab_docs &mdash; durable source of truth, versioned</small
+    >
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill">3 &middot; 由 updatedAt 門控的對帳</span
+    ><small class="diagram-muted">代理編輯透過 SQL 更新時間傳播</small>
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill">4 &middot; 主用戶端選舉</span
+    ><small class="diagram-muted">恰好一個標籤頁面應用快照</small>
+  </div>
+  <div class="diagram-card layer">
+    <span class="diagram-pill ok">5 &middot; SSE 快速路徑 + 輪詢</span
+    ><small class="diagram-muted"
+      >約幾十毫秒，任何地方都可降級為 2 秒輪詢</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-stack .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ### 1。 Yjs Y.Doc（CRDT層）
 
 每個協作檔案都是一個包含共用型別的 `Y.Doc` — 通常是
@@ -100,13 +140,63 @@ gate 確保僅采用真正較新的內容 - 滯後的民意調查回應
 
 網路錯誤使用帶抖動的指數退避，上限約為 15 秒。
 
-```an-diagram title="兩條編輯路徑，一條合併" summary="人類擊鍵流程 Y.Doc → 伺服器 → SSE。代理編輯經過 SQL：操作在更新時發生碰撞，主要客戶進行協調，然後更改重新進入 Yjs。"
-{
-  "html": "<div class=\"diagram-collab\"><div class=\"lane\"><span class=\"diagram-pill\">人工編輯</span><div class=\"diagram-node\">Y.Doc update<br><small class=\"diagram-muted\">debounce 約 80ms</small></div><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\" data-rough>POST /update<br><small class=\"diagram-muted\">apply + persist</small></div><span class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box diagram-accent\">SSE push<br><small class=\"diagram-muted\">to all peers</small></div></div><div class=\"lane\"><span class=\"diagram-pill warn\">代理編輯</span><div class=\"diagram-node\">Action 寫入 SQL<br><small class=\"diagram-muted\">更新 updatedAt</small></div><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\" data-rough>主用戶端<br><small class=\"diagram-muted\">setContent 寫入 Y.Doc</small></div><span class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box diagram-accent\">POST /update<br><small class=\"diagram-muted\">re-enters Yjs &middot; SSE push</small></div></div></div>",
-  "css": ".diagram-collab{display:flex;flex-direction:column;gap:14px}.diagram-collab .lane{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-collab .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1tcgdg9" title={"兩條編輯路徑，一條合併"} summary={"人類擊鍵流程 Y.Doc → 伺服器 → SSE。代理編輯經過 SQL：操作在更新時發生碰撞，主要客戶進行協調，然後更改重新進入 Yjs。"}>
+
+```html
+<div class="diagram-collab">
+  <div class="lane">
+    <span class="diagram-pill">人工編輯</span>
+    <div class="diagram-node">
+      Y.Doc update<br /><small class="diagram-muted">debounce 約 80ms</small>
+    </div>
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box" data-rough>
+      POST /update<br /><small class="diagram-muted">apply + persist</small>
+    </div>
+    <span class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box diagram-accent">
+      SSE push<br /><small class="diagram-muted">to all peers</small>
+    </div>
+  </div>
+  <div class="lane">
+    <span class="diagram-pill warn">代理編輯</span>
+    <div class="diagram-node">
+      Action 寫入 SQL<br /><small class="diagram-muted">更新 updatedAt</small>
+    </div>
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box" data-rough>
+      主用戶端<br /><small class="diagram-muted">setContent 寫入 Y.Doc</small>
+    </div>
+    <span class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</span>
+    <div class="diagram-box diagram-accent">
+      POST /update<br /><small class="diagram-muted"
+        >re-enters Yjs &middot; SSE push</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-collab {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-collab .lane {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-collab .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 快速入門 {#quickstart}
 
 ### 1。安裝包

package/docs/content/locales/zh-TW/recurring-jobs.mdx

@@ -113,13 +113,68 @@ Summarize overnight emails.`,
 
 調度程式是一個在行程中執行的框架外掛（內部 `processRecurringJobs()` 例程）：無論伺服器在何處執行，代理聊天外掛內的 `setInterval` 每 60 秒觸發一次（有 10 秒的啟動延遲）。
 
-```an-diagram title="一個調度程式勾選" summary="每 60 秒，調度程式就會找到到期的作業，將每個作業作為新的代理對話串執行，並將結果寫回作業檔案。"
-{
-  "html": "<div class=\"sched\"><div class=\"diagram-box accent\"><code>setInterval</code> &bull; 60s &#8635;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">1 &middot; scan</span><small class=\"diagram-muted\">list every enabled <code>jobs/*.md</code> across all owners</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2 &middot; due?</span><small class=\"diagram-muted\">compare <code>nextRun</code> to now</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">3 &middot; run</span><small class=\"diagram-muted\">fresh agent thread, job body as the user message &mdash; actions, SQL, A2A, email</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">4 &middot; record</span><small class=\"diagram-muted\">write <code>lastRun</code> / <code>lastStatus</code> / <code>lastError</code>, recompute <code>nextRun</code></small></div></div>",
-  "css": ".sched{display:flex;flex-direction:column;gap:6px;max-width:520px}.sched .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.sched .diagram-box{align-self:flex-start}.sched .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-ixllnx" title={"一個調度程式勾選"} summary={"每 60 秒，調度程式就會找到到期的作業，將每個作業作為新的代理對話串執行，並將結果寫回作業檔案。"}>
+
+```html
+<div class="sched">
+  <div class="diagram-box accent">
+    <code>setInterval</code> &bull; 60s &#8635;
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">1 &middot; scan</span
+    ><small class="diagram-muted"
+      >list every enabled <code>jobs/*.md</code> across all owners</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2 &middot; due?</span
+    ><small class="diagram-muted">compare <code>nextRun</code> to now</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">3 &middot; run</span
+    ><small class="diagram-muted"
+      >fresh agent thread, job body as the user message &mdash; actions, SQL,
+      A2A, email</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">4 &middot; record</span
+    ><small class="diagram-muted"
+      >write <code>lastRun</code> / <code>lastStatus</code> /
+      <code>lastError</code>, recompute <code>nextRun</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.sched {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 520px;
+}
+.sched .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.sched .diagram-box {
+  align-self: flex-start;
+}
+.sched .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 <Callout id="doc-block-j6yn07" tone="risk">
 
 **Scale-to-zero caveat.** The scheduler is in-process, so on serverless hosts jobs only fire while an instance is warm. If reliable scheduling matters, keep an instance warm with keep-alive pings or use an always-on host (Fly, Render, a VPS).

package/docs/content/locales/zh-TW/routing.mdx

@@ -21,14 +21,51 @@ Agent-Native 應用程式使用 **React Router v8** 以及透過來自 `@react-r
 
 為動態參數新增 `$` 前綴。以 `_` 為前綴，使其成為無路徑布局路由（無 URL 段）。範本使用 `flatRoutes()` — 上面的點符號檔案是主要的；嵌套資料夾形式 `inbox/route.tsx` 也適用。
 
-```an-diagram title="無路徑布局包裹頁面" summary="_app.tsx 布局（無 URL 段）渲染共用 shell 一次；匹配的頁面在其 <Outlet/> 內呈現，因此代理側邊欄永遠不會在導覽時重新安裝。"
-{
-"html": "<div class=\"diagram-layout\" data-rough><div class=\"diagram-shell\"><span class=\"diagram-pill accent\">_app.tsx</span><small class=\"diagram-muted\">無路徑布局 · 持久外殼 + Agent 側邊欄</small><div class=\"diagram-outlet\" data-rough><small class=\"diagram-muted\">&lt;Outlet/&gt; — the matched page</small><div class=\"diagram-row\"><span class=\"diagram-pill\">_index.tsx &rarr; /</span><span class=\"diagram-pill\">settings.tsx &rarr; /settings</span><span class=\"diagram-pill\">inbox.$threadId.tsx &rarr; /inbox/:threadId</span></div></div></div></div>",
-"css": ".diagram-layout .diagram-shell{display:flex;flex-direction:column;gap:8px;padding:16px}.diagram-layout .diagram-outlet{display:flex;flex-direction:column;gap:8px;padding:14px;margin-top:6px}.diagram-layout .diagram-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}"
-}
+<Diagram id="doc-block-oj35e8" title={"無路徑布局包裹頁面"} summary={"_app.tsx 布局（無 URL 段）渲染共用 shell 一次；匹配的頁面在其 <Outlet/> 內呈現，因此代理側邊欄永遠不會在導覽時重新安裝。"}>
+
+```html
+<div class="diagram-layout" data-rough>
+  <div class="diagram-shell">
+    <span class="diagram-pill accent">_app.tsx</span
+    ><small class="diagram-muted">無路徑布局 · 持久外殼 + Agent 側邊欄</small>
+    <div class="diagram-outlet" data-rough>
+      <small class="diagram-muted">&lt;Outlet/&gt; — the matched page</small>
+      <div class="diagram-row">
+        <span class="diagram-pill">_index.tsx &rarr; /</span
+        ><span class="diagram-pill">settings.tsx &rarr; /settings</span
+        ><span class="diagram-pill"
+          >inbox.$threadId.tsx &rarr; /inbox/:threadId</span
+        >
+      </div>
+    </div>
+  </div>
+</div>
+```
 
+```css
+.diagram-layout .diagram-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+.diagram-layout .diagram-outlet {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  margin-top: 6px;
+}
+.diagram-layout .diagram-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
 ```
 
+</Diagram>
+
 ## 新增新頁面 {#adding-a-page}
 
 建立檔案並匯出預設元件：