@agent-native/core 0.79.25 → 0.79.27

package/corpus/core/docs/content/locales/zh-TW/faq.mdx

@@ -28,13 +28,65 @@ Agent-Native 適合那些想要真正的應用程式和 AI 代理使用相同資
 
 大多數應用程式將人工智慧作為事後的想法，實際上無法在應用程式中*做*事情。在 Agent-Native 應用程式中，代理是一等公民，與 UI 共用相同的 actions、資料庫和狀態，因此它可以執行按鈕可以執行的任何操作 - 並修改應用程式自己的程式碼。參見[What Is Agent-Native?](/docs/what-is-agent-native#the-ladder)。
 
-```an-diagram title="附加人工智慧與 agent-native" summary="螺栓固定的聊天側邊欄有自己的世界。 agent-native 代理與 UI 共用相同的操作、資料庫和狀態。"
-{
-  "html": "<div class=\"diagram-vs\"><div class=\"diagram-col\"><span class=\"diagram-pill warn\">外掛式 AI</span><div class=\"diagram-node\">聊天側邊欄</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>獨立的 AI 世界<br><small class=\"diagram-muted\">無法操作應用</small></div><div class=\"diagram-box diagram-muted\">App UI &amp; data</div></div><div class=\"diagram-divider\" aria-hidden=\"true\"></div><div class=\"diagram-col\"><span class=\"diagram-pill ok\">Agent-Native</span><div class=\"diagram-row2\"><div class=\"diagram-node\">UI</div><div class=\"diagram-node\">Agent</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>shared actions, DB &amp; state</div></div></div>",
-  "css": ".diagram-vs{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}.diagram-vs .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:center;flex:1;min-width:200px}.diagram-vs .diagram-row2{display:flex;gap:8px}.diagram-vs .diagram-arrow{font-size:20px;line-height:1}.diagram-vs .diagram-divider{width:1px;align-self:stretch;background:currentColor;opacity:.15}"
+<Diagram id="doc-block-k43heh" title={"附加人工智慧與 agent-native"} summary={"螺栓固定的聊天側邊欄有自己的世界。 agent-native 代理與 UI 共用相同的操作、資料庫和狀態。"}>
+
+```html
+<div class="diagram-vs">
+  <div class="diagram-col">
+    <span class="diagram-pill warn">外掛式 AI</span>
+    <div class="diagram-node">聊天側邊欄</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      獨立的 AI 世界<br /><small class="diagram-muted">無法操作應用</small>
+    </div>
+    <div class="diagram-box diagram-muted">App UI &amp; data</div>
+  </div>
+  <div class="diagram-divider" aria-hidden="true"></div>
+  <div class="diagram-col">
+    <span class="diagram-pill ok">Agent-Native</span>
+    <div class="diagram-row2">
+      <div class="diagram-node">UI</div>
+      <div class="diagram-node">Agent</div>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>shared actions, DB &amp; state</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vs {
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+.diagram-vs .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+}
+.diagram-vs .diagram-row2 {
+  display: flex;
+  gap: 8px;
+}
+.diagram-vs .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-vs .diagram-divider {
+  width: 1px;
+  align-self: stretch;
+  background: currentColor;
+  opacity: 0.15;
 }
 ```
 
+</Diagram>
+
 ### 它是開放原始碼的嗎？ {#is-this-open-source}
 
 是的。此框架和所有範本都是開放原始碼的。您可以在本機執行所有內容、自行託管或使用 Builder.io 的雲端來實現託管、協作和團隊功能。
@@ -126,13 +178,49 @@ Anthropic Claude、OpenAI（GPT-5 系列）、Google Gemini 以及使用 OpenAI
 
 SSE 為同行程寫入提供了到瀏覽器的直接路徑，而輕量級版本計數器輪詢仍然是後備方案，因為它適用於每個部署環境 - 包括無伺服器和邊緣，其中持久 socket 可能不可用。參見[Key Concepts — 即時同步](/docs/key-concepts#polling-sync)。
 
-```an-diagram title="SSE 首先，輪詢後備" summary="同行程即時寫流；版本計數器輪詢使無伺服器、邊緣和跨行程寫入保持收斂。"
-{
-  "html": "<div class=\"diagram-transport\"><div class=\"diagram-box\" data-rough>資料庫寫入</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">SSE<br><small class=\"diagram-muted\">/_agent-native/events &middot; instant</small></div><div class=\"diagram-node\">輪詢<br><small class=\"diagram-muted\">/_agent-native/poll &middot; universal fallback</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>瀏覽器重新取得</div></div>",
-  "css": ".diagram-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-transport .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-transport .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-4ztuxl" title={"SSE 首先，輪詢後備"} summary={"同行程即時寫流；版本計數器輪詢使無伺服器、邊緣和跨行程寫入保持收斂。"}>
+
+```html
+<div class="diagram-transport">
+  <div class="diagram-box" data-rough>資料庫寫入</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      SSE<br /><small class="diagram-muted"
+        >/_agent-native/events &middot; instant</small
+      >
+    </div>
+    <div class="diagram-node">
+      輪詢<br /><small class="diagram-muted"
+        >/_agent-native/poll &middot; universal fallback</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>瀏覽器重新取得</div>
+</div>
+```
+
+```css
+.diagram-transport {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-transport .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-transport .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ### 為什麼 UI 不能直接呼叫 LLM？ {#why-no-inline-llm-calls}
 
 人工智慧是非確定性的，因此您需要對話流來提供意見回饋和迭代 - 而不是一次性按鈕 - 並且代理已經擁有行內呼叫所缺乏的程式碼庫、指令、skills 和歷史紀錄。透過代理路由所有內容還可以讓應用程式從 Slack、Telegram 或其他代理驅動。參見[Key Concepts — Agent chat bridge](/docs/key-concepts#agent-chat-bridge)。

package/corpus/core/docs/content/locales/zh-TW/file-uploads.mdx

@@ -17,13 +17,70 @@ description: "設定檔案上傳儲存 - 用於開發的 SQL 後備、Builder.io
 2. **Builder.io 提供者** — 內建，連線 Builder.io 時自動啟用
 3. **SQL 後備** - 將檔案作為 base64 儲存在資料庫中（適合開發，不適用於正式環境）
 
-```an-diagram title="提供者決議順序" summary="uploadFile() 按順序選取第一個設定的提供者。 SQL 後備始終存在，因此上傳可以零設定進行。"
-{
-  "html": "<div class=\"diagram-upload\"><div class=\"diagram-box\" data-rough>uploadFile()<br><small class=\"diagram-muted\">POST /_agent-native/file-upload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-step\"><span class=\"diagram-pill accent\">1</span><div class=\"diagram-node\">使用者註冊<br><small class=\"diagram-muted\">registerFileUploadProvider() — S3, R2, GCS…</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><div class=\"diagram-node\">Builder.io<br><small class=\"diagram-muted\">連線後自動啟用——由 CDN 提供</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill warn\">3</span><div class=\"diagram-node\">SQL 兜底<br><small class=\"diagram-muted\">資料庫中的 base64——僅開發使用</small></div></div></div></div>",
-  "css": ".diagram-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-upload .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-upload .diagram-step{display:flex;align-items:center;gap:8px}.diagram-upload .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-2q5re2" title={"提供者決議順序"} summary={"uploadFile() 按順序選取第一個設定的提供者。 SQL 後備始終存在，因此上傳可以零設定進行。"}>
+
+```html
+<div class="diagram-upload">
+  <div class="diagram-box" data-rough>
+    uploadFile()<br /><small class="diagram-muted"
+      >POST /_agent-native/file-upload</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-step">
+      <span class="diagram-pill accent">1</span>
+      <div class="diagram-node">
+        使用者註冊<br /><small class="diagram-muted"
+          >registerFileUploadProvider() — S3, R2, GCS…</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span>
+      <div class="diagram-node">
+        Builder.io<br /><small class="diagram-muted"
+          >連線後自動啟用——由 CDN 提供</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill warn">3</span>
+      <div class="diagram-node">
+        SQL 兜底<br /><small class="diagram-muted"
+          >資料庫中的 base64——僅開發使用</small
+        >
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-upload {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-upload .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-upload .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-upload .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-e4zqeh" title={"上傳端點"} method="POST" path="/_agent-native/file-upload" summary={"透過活動提供者上傳檔案並返回公開 URL。"} request={{
   "contentType": "multipart/form-data"
 }} responses={[

package/corpus/core/docs/content/locales/zh-TW/frames.mdx

@@ -20,13 +20,53 @@ description: "本機開發框架、嵌入式代理面板和雲端框架 - AI 代
 無論託管哪個框架，您的應用程式碼都是相同的。代理說話
 在每種情況下都透過相同的 actions 和應用程式狀態連線到您的應用程式。
 
-```an-diagram title="三幀，一個執行時間" summary="您的應用程式和代理面板在每一幀中都是相同的；只有它們週圍的包裝發生變化。"
-{
-  "html": "<div class=\"diagram-frames\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">嵌入面板</span><small class=\"diagram-muted\">隨每個應用提供 · 開發 + 正式環境</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">本機開發框架</span><small class=\"diagram-muted\">iframe 中的應用 + 面板 + CLI 終端</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Builder.io 雲端框架</span><small class=\"diagram-muted\">託管：協作 · 可視編輯 · 並行執行</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>同一 runtime<br><small class=\"diagram-muted\">你的應用 · 操作 · 應用狀態</small></div></div>",
-  "css": ".diagram-frames{display:flex;flex-direction:column;gap:10px;align-items:stretch}.diagram-frames .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-frames .diagram-arrow{font-size:22px;line-height:1;align-self:center}"
+<Diagram id="doc-block-luiz3l" title={"三幀，一個執行時間"} summary={"您的應用程式和代理面板在每一幀中都是相同的；只有它們週圍的包裝發生變化。"}>
+
+```html
+<div class="diagram-frames">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">嵌入面板</span
+    ><small class="diagram-muted">隨每個應用提供 · 開發 + 正式環境</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">本機開發框架</span
+    ><small class="diagram-muted">iframe 中的應用 + 面板 + CLI 終端</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">Builder.io 雲端框架</span
+    ><small class="diagram-muted">託管：協作 · 可視編輯 · 並行執行</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    同一 runtime<br /><small class="diagram-muted"
+      >你的應用 · 操作 · 應用狀態</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-frames {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: stretch;
+}
+.diagram-frames .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-frames .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 ## 嵌入式代理面板 {#embedded-agent}
 
 嵌入式面板是您的應用程式呈現的代理側邊欄。它附帶
@@ -57,13 +97,51 @@ description: "本機開發框架、嵌入式代理面板和雲端框架 - AI 代
   編碼工具清單和共用 UI 合約，參見
   [Agent-Native Code UI](/docs/code-agents-ui).
 
-```an-diagram title="程式碼請求門控" summary="程式碼型別訊息需要支援程式碼的幀。一旦連線，請求就會路由到那裡；如果沒有，面板會解釋程式碼更改需要 Desktop 或 Builder。"
-{
-  "html": "<div class=\"diagram-gate\"><div class=\"diagram-node\" data-rough>message<br><small class=\"diagram-muted\">type: \\\"code\\\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>code-capable frame connected?</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">yes &rarr; route to frame, show code-agent indicator</div><div class=\"diagram-pill warn\">no &rarr; dialog: needs Desktop or Builder</div></div></div>",
-  "css": ".diagram-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-gate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-gate .diagram-arrow{font-size:22px;line-height:1}.diagram-gate .center{text-align:center}"
+<Diagram id="doc-block-1bhsych" title={"程式碼請求門控"} summary={"程式碼型別訊息需要支援程式碼的幀。一旦連線，請求就會路由到那裡；如果沒有，面板會解釋程式碼更改需要 Desktop 或 Builder。"}>
+
+```html
+<div class="diagram-gate">
+  <div class="diagram-node" data-rough>
+    message<br /><small class="diagram-muted">type: \"code\"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    code-capable frame connected?
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">
+      yes &rarr; route to frame, show code-agent indicator
+    </div>
+    <div class="diagram-pill warn">
+      no &rarr; dialog: needs Desktop or Builder
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-gate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-gate .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-gate .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-gate .center {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 “程式碼模式”是代理功能切換 - 與環境開發模式不同
 （`NODE_ENV` / Vite）。用戶端鉤子是`useCodeMode()`。 （參見
 [Compatibility notes](#compatibility) 用於向後相容別名。）

package/corpus/core/docs/content/locales/zh-TW/getting-started.mdx

@@ -152,13 +152,43 @@ pnpm dev
 現在可以透過聊天 UI、CLI、HTTP、MCP、A2A 存取該操作
 計畫作業和 webhooks。定義一次，從任何地方呼叫。
 
-```an-diagram title="一個動作，每個表面" summary="單一 defineAction 檔案扇出到每個消費者，無需額外接線。"
-{
-  "html": "<div class=\"diagram-fan\"><div class=\"diagram-box\" data-rough>defineAction</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-surfaces\"><span class=\"diagram-pill\">聊天介面</span><span class=\"diagram-pill\">CLI</span><span class=\"diagram-pill\">HTTP</span><span class=\"diagram-pill\">MCP</span><span class=\"diagram-pill\">A2A</span><span class=\"diagram-pill\">計畫工作</span><span class=\"diagram-pill\">Webhooks</span></div></div>",
-  "css": ".diagram-fan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fan .diagram-surfaces{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}.diagram-fan .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-15mxp3c" title={"一個動作，每個表面"} summary={"單一 defineAction 檔案扇出到每個消費者，無需額外接線。"}>
+
+```html
+<div class="diagram-fan">
+  <div class="diagram-box" data-rough>defineAction</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-surfaces">
+    <span class="diagram-pill">聊天介面</span
+    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
+    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
+    ><span class="diagram-pill">計畫工作</span
+    ><span class="diagram-pill">Webhooks</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-fan {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fan .diagram-surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 420px;
+}
+.diagram-fan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 狀態是內建的
 
 無頭並不意味著無狀態。 Actions，工作階段，應用程式狀態，對話串，

package/corpus/core/docs/content/locales/zh-TW/harness-agents.mdx

@@ -23,13 +23,54 @@ search: "harness代理AgentHarness ai-sdk HarnessAgent Claude 程式碼Codex Pi
 自己的端對端迴圈，因此 Agent-Native 將其作為工作階段驅動，而不是單一
 模型呼叫。
 
-```an-diagram title="安全帶擁有它的環； Agent-Native 驅動工作階段" summary="AgentHarness 底層 creates/resumes 本機工作階段，將其事件流式傳輸到正常轉錄本中，並在輪次之間將恢復狀態保留在 SQL 中。"
-{
-  "html": "<div class=\"diagram-harness\"><div class=\"diagram-box\" data-rough><strong>AgentHarness substrate</strong><small class=\"diagram-muted\">@agent-native/core/agent/harness</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Native harness loop</strong><small class=\"diagram-muted\">Claude Code · Codex · Pi — own tools, sandbox, compaction</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">events &rarr; transcript</div><div class=\"diagram-pill ok\">resumeState &rarr; SQL session</div></div></div>",
-  "css": ".diagram-harness{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-harness .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-harness .diagram-arrow{font-size:22px;line-height:1}.diagram-harness .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1nk0jee" title={"安全帶擁有它的環； Agent-Native 驅動工作階段"} summary={"AgentHarness 底層 creates/resumes 本機工作階段，將其事件流式傳輸到正常轉錄本中，並在輪次之間將恢復狀態保留在 SQL 中。"}>
+
+```html
+<div class="diagram-harness">
+  <div class="diagram-box" data-rough>
+    <strong>AgentHarness substrate</strong
+    ><small class="diagram-muted">@agent-native/core/agent/harness</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Native harness loop</strong
+    ><small class="diagram-muted"
+      >Claude Code · Codex · Pi — own tools, sandbox, compaction</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">events &rarr; transcript</div>
+    <div class="diagram-pill ok">resumeState &rarr; SQL session</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-harness {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-harness .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-harness .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-harness .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 我需要哪個編碼檔案？ {#which-doc}
 
 | 你想要……                                                   | 使用                                         |
@@ -213,13 +254,43 @@ const run = startAgentHarnessRun({
 是**不透明** - Agent-Native 儲存它並將其返還，但從不檢查或
 解釋它。
 
-```an-diagram title="跨回合、流程和部署恢復" summary="每一輪都會將一個不透明的resumeState分離到 SQL 中；下一回合將其意見回饋到 createSession 而不是重播聊天紀錄。"
-{
-  "html": "<div class=\"diagram-resume\"><div class=\"diagram-node\" data-rough>第 N 輪<br><small class=\"diagram-muted\">streamTurn</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>detach &rarr; resumeState<br><small class=\"diagram-muted\">不透明 · SQL harness 工作階段</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>第 N+1 輪<br><small class=\"diagram-muted\">createSession.resumeState</small></div></div>",
-  "css": ".diagram-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-resume .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1i0bjcn" title={"跨回合、流程和部署恢復"} summary={"每一輪都會將一個不透明的resumeState分離到 SQL 中；下一回合將其意見回饋到 createSession 而不是重播聊天紀錄。"}>
+
+```html
+<div class="diagram-resume">
+  <div class="diagram-node" data-rough>
+    第 N 輪<br /><small class="diagram-muted">streamTurn</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    detach &rarr; resumeState<br /><small class="diagram-muted"
+      >不透明 · SQL harness 工作階段</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    第 N+1 輪<br /><small class="diagram-muted"
+      >createSession.resumeState</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-resume {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-resume .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```ts
 import {
   getLatestAgentHarnessSessionForThread,

package/corpus/core/docs/content/locales/zh-TW/human-approval.mdx

@@ -80,13 +80,59 @@ description: "在高後果操作執行之前暫停代理 - defineAction 的 need
 
 ## 端對端 {#flow}
 
-```an-diagram title="核准中斷" summary="門控呼叫會在 run() 觸發之前暫停回合。核准重新發出攜帶呼叫金鑰的回合；只有這樣，副作用才會發生。"
-{
-  "html": "<div class=\"diagram-approve\"><div class=\"diagram-box\" data-rough>代理呼叫 send-email</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel warn\" data-rough><strong>Gate 為真，呼叫尚未核准</strong><small class=\"diagram-muted\">loop emits tool_start + approval_required { tool, input, approvalKey }</small><span class=\"diagram-pill warn\">turn pauses &mdash; run() did NOT execute</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>人在聊天中點選核准<br><small class=\"diagram-muted\">用戶端用 approvedToolCalls: [approvalKey] 重新發起本輪</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel ok\" data-rough><span class=\"diagram-pill ok\">Gate sees the key &rarr; run() executes &rarr; email sends</span></div></div>",
-  "css": ".diagram-approve{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-approve .diagram-panel{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;text-align:center}.diagram-approve .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-fdle8z" title={"核准中斷"} summary={"門控呼叫會在 run() 觸發之前暫停回合。核准重新發出攜帶呼叫金鑰的回合；只有這樣，副作用才會發生。"}>
+
+```html
+<div class="diagram-approve">
+  <div class="diagram-box" data-rough>代理呼叫 send-email</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel warn" data-rough>
+    <strong>Gate 為真，呼叫尚未核准</strong
+    ><small class="diagram-muted"
+      >loop emits tool_start + approval_required { tool, input, approvalKey
+      }</small
+    ><span class="diagram-pill warn"
+      >turn pauses &mdash; run() did NOT execute</span
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    人在聊天中點選核准<br /><small class="diagram-muted"
+      >用戶端用 approvedToolCalls: [approvalKey] 重新發起本輪</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel ok" data-rough>
+    <span class="diagram-pill ok"
+      >Gate sees the key &rarr; run() executes &rarr; email sends</span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-approve {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-approve .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+}
+.diagram-approve .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 在框架中此門的典型（並且故意很少）使用是郵件範本的 `send-email` 操作，該操作設定 `needsApproval: true`，以便代理可以自由起草和排隊，但在沒有人工核准特定傳送的情況下永遠無法實際傳送訊息。
 
 ## 相關