@agent-native/core 0.79.26 → 0.80.0

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

@@ -19,13 +19,68 @@ search: "Claude ChatGPT Claude 程式碼 Codex 游標 Claude Cowork MCP 應用
 
 外部代理網橋關閉環路。首先，您將自己的代理連線到**託管**應用程式 - 透過將應用程式的遠端 MCP URL 貼上到 Claude 或 ChatGPT 等聊天主機中，或者透過執行本機編碼代理的開發人員 CLI 流程。然後，代理透過 MCP 完成工作，並向使用者提供相容主機中的行內 **MCP 應用程式** UI 或單一 **“在 <app> 中開啟 →”** 連結，該連結開啟真正的應用程式，重點關注所產生的內容。它重用了現有的 `navigate` / `application_state` 合約，UI 已經每 2 秒耗盡一次（參見 [Context Awareness](/docs/context-awareness)）——沒有第二個導覽機制。
 
-```an-diagram title="外部代理往返" summary="外部主機透過 MCP 呼叫工具；該應用程式返回一個工件和一個開啟連結。點選它可以解析瀏覽器工作階段並將工件聚焦在正在執行的 UI 中 - 該連結不帶有特權狀態。"
-{
-  "html": "<div class=\"xa-trip\"><div class=\"diagram-box\" data-rough>外部主機<br><small class=\"diagram-muted\">Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">MCP 工具 call</span><small class=\"diagram-muted\">e.g. <code>manage-draft</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>應用生成產物<br><small class=\"diagram-muted\">+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>使用者點選連結</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill ok\"><code>/_agent-native/open</code></span><small class=\"diagram-muted\">resolves the <strong>browser</strong> session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Writes <code>navigate</code> app-state<br><small class=\"diagram-muted\">介面聚焦該產物</small></div></div>",
-  "css": ".xa-trip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.xa-trip .center{display:flex;flex-direction:column;align-items:center;gap:4px}.xa-trip .diagram-arrow{font-size:22px;line-height:1}.xa-trip code{font-size:.85em}"
+<Diagram id="doc-block-1axtmsd" title={"外部代理往返"} summary={"外部主機透過 MCP 呼叫工具；該應用程式返回一個工件和一個開啟連結。點選它可以解析瀏覽器工作階段並將工件聚焦在正在執行的 UI 中 - 該連結不帶有特權狀態。"}>
+
+```html
+<div class="xa-trip">
+  <div class="diagram-box" data-rough>
+    外部主機<br /><small class="diagram-muted"
+      >Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">MCP 工具 call</span
+    ><small class="diagram-muted">e.g. <code>manage-draft</code></small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    應用生成產物<br /><small class="diagram-muted"
+      >+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>使用者點選連結</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill ok"><code>/_agent-native/open</code></span
+    ><small class="diagram-muted"
+      >resolves the <strong>browser</strong> session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Writes <code>navigate</code> app-state<br /><small class="diagram-muted"
+      >介面聚焦該產物</small
+    >
+  </div>
+</div>
+```
+
+```css
+.xa-trip {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.xa-trip .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.xa-trip .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.xa-trip code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 身分規則是安全鉸鏈：連結只是 `view` + 紀錄 ID + 過濾器，並且以紀錄為中心的 `navigate` 寫入的範圍僅限於登入**瀏覽器**的任何人 - 而不是外部代理的 MCP 權杖。這就是為什麼該連結可以安全地貼上到終端或聊天紀錄中。
 
 ## 您需要哪個代理路徑？ {#which-agent-path}
@@ -247,13 +302,69 @@ OAuth 流程是授權程式碼 + PKCE 和重新整理權杖輪換。存取權杖
 
 MCP 伺服器預設為每個呼叫者提供一個**緊湊的目錄** — 託管連線器（ChatGPT、Claude）、程式碼用戶端（Claude Code、Cursor、Codex）以及本機 CLI/stdio 代理等。完整的操作介面僅在明確選取加入的情況下提供。目錄永遠不會從用戶端名稱或使用者代理推斷出來。
 
-```an-diagram title="兩個目錄層" summary="預設情況下，每個呼叫者都會獲得緊湊層；完整的約 105 個工具表面僅供選取加入。工具搜尋彌補了這一差距，因此沒有什麼是真正隱藏的。"
-{
-  "html": "<div class=\"xa-tiers\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">Compact / connector tier &middot; default</span><strong>~20&ndash;30 tools</strong><small class=\"diagram-muted\">Template-declared app actions + cross-app builtins (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>, <code>create_embed_session</code>) + always-present <code>tool-search</code>.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Full tier &middot; opt-in</span><strong>約 105 個工具</strong><small class=\"diagram-muted\">Explicit opt-in only: <code>--full-catalog</code> token or <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small></div></div><p class=\"diagram-muted note\"><code>tool-search</code> reaches any full-tier tool on demand &mdash; so the compact default keeps context small without hiding capability.</p>",
-  "css": ".xa-tiers{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}.xa-tiers .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1;min-width:240px}.xa-tiers .diagram-arrow{align-self:center;font-size:24px;line-height:1}.xa-tiers .note{flex-basis:100%;margin:4px 0 0;font-size:.85em}.xa-tiers code{font-size:.85em}"
+<Diagram id="doc-block-1ul8gq2" title={"兩個目錄層"} summary={"預設情況下，每個呼叫者都會獲得緊湊層；完整的約 105 個工具表面僅供選取加入。工具搜尋彌補了這一差距，因此沒有什麼是真正隱藏的。"}>
+
+```html
+<div class="xa-tiers">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill ok"
+      >Compact / connector tier &middot; default</span
+    ><strong>~20&ndash;30 tools</strong
+    ><small class="diagram-muted"
+      >Template-declared app actions + cross-app builtins
+      (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>,
+      <code>create_embed_session</code>) + always-present
+      <code>tool-search</code>.</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">Full tier &middot; opt-in</span
+    ><strong>約 105 個工具</strong
+    ><small class="diagram-muted"
+      >Explicit opt-in only: <code>--full-catalog</code> token or
+      <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small
+    >
+  </div>
+</div>
+<p class="diagram-muted note">
+  <code>tool-search</code> reaches any full-tier tool on demand &mdash; so the
+  compact default keeps context small without hiding capability.
+</p>
+```
+
+```css
+.xa-tiers {
+  display: flex;
+  align-items: stretch;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.xa-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 240px;
+}
+.xa-tiers .diagram-arrow {
+  align-self: center;
+  font-size: 24px;
+  line-height: 1;
+}
+.xa-tiers .note {
+  flex-basis: 100%;
+  margin: 4px 0 0;
+  font-size: 0.85em;
+}
+.xa-tiers code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 ### 緊湊/連線器層（預設） {#connector-tier}
 
 預設情況下，每個連線的代理都會看到一個小型的、精心策劃的目錄（約 20–30 個工具，而整個表面上約 105 個工具）：

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,