@agent-native/core 0.79.26 → 0.79.27

package/docs/content/locales/zh-TW/what-is-agent-native.mdx

@@ -50,13 +50,56 @@ description: "為什麼大多數人工智慧應用感覺是半成品，是什麼
 
 這是第 3 級。這是 Agent-Native 的。
 
-```an-diagram title="階梯原理" summary="大多數團隊停在第 1 級或第 2 級。原生代理是第 3 級——一個真實的應用程式和一個共用操作介面上的真實代理。"
-{
-  "html": "<div class=\"diagram-ladder\"><div class=\"diagram-card rung rung-3\"><span class=\"diagram-pill accent\">第 3 階 · agent-native</span><strong>代理 + UI 作為平等伙伴</strong><small class=\"diagram-muted\">One action surface. Every agent tool is also a button; every button runs the same logic the agent uses.</small></div><div class=\"diagram-card rung rung-2\"><span class=\"diagram-pill\">第 2 階</span><strong>帶工具的聊天</strong><small class=\"diagram-muted\">代理可以行動，但它仍只是聊天視窗。沒有儀表板、清單或快速鍵。</small></div><div class=\"diagram-card rung rung-1\"><span class=\"diagram-pill warn\">第 1 階</span><strong>一次 LLM 呼叫</strong><small class=\"diagram-muted\">Prompt in, string out. Impressive in a demo; breaks the moment reality gets messy.</small></div></div>",
-  "css": ".diagram-ladder{display:flex;flex-direction:column;gap:14px}.diagram-ladder .rung{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.diagram-ladder .rung-2{margin-inline-end:48px}.diagram-ladder .rung-1{margin-inline-end:96px}"
+<Diagram id="doc-block-9u2tgq" title={"階梯原理"} summary={"大多數團隊停在第 1 級或第 2 級。原生代理是第 3 級——一個真實的應用程式和一個共用操作介面上的真實代理。"}>
+
+```html
+<div class="diagram-ladder">
+  <div class="diagram-card rung rung-3">
+    <span class="diagram-pill accent">第 3 階 · agent-native</span
+    ><strong>代理 + UI 作為平等伙伴</strong
+    ><small class="diagram-muted"
+      >One action surface. Every agent tool is also a button; every button runs
+      the same logic the agent uses.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-2">
+    <span class="diagram-pill">第 2 階</span><strong>帶工具的聊天</strong
+    ><small class="diagram-muted"
+      >代理可以行動，但它仍只是聊天視窗。沒有儀表板、清單或快速鍵。</small
+    >
+  </div>
+  <div class="diagram-card rung rung-1">
+    <span class="diagram-pill warn">第 1 階</span><strong>一次 LLM 呼叫</strong
+    ><small class="diagram-muted"
+      >Prompt in, string out. Impressive in a demo; breaks the moment reality
+      gets messy.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-ladder .rung {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+.diagram-ladder .rung-2 {
+  margin-inline-end: 48px;
+}
+.diagram-ladder .rung-1 {
+  margin-inline-end: 96px;
 }
 ```
 
+</Diagram>
+
 請參閱 [Key Concepts — Protocols](/docs/key-concepts#protocols)，了解所有這些如何掛在同一操作定義上。
 
 ## 為什麼每個代理都需要 UI {#why-every-agent-needs-a-ui}
@@ -89,13 +132,56 @@ Agent-Native 翻轉了這一點。由於應用程式中的每個操作都定義
 >
 > **來自代理** — 自然語言，其他代理透過 A2A、Slack、Telegram。代理寫入資料庫； UI 自動更新。
 
-```an-diagram title="一套系統，兩種方式" summary="代理和 UI 寫入相同的操作和相同的資料庫。無論一個人做什麼，另一個人都會看到。"
-{
-  "html": "<div class=\"diagram-parity\"><div class=\"diagram-col\"><div class=\"diagram-node\">Human<br><small class=\"diagram-muted\">點選、表單、快速鍵</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">自然語言 · A2A · Slack</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">defined once</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL 資料庫</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">介面即時更新</div></div>",
-  "css": ".diagram-parity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-parity .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-parity .diagram-arrow{font-size:22px;line-height:1}.diagram-parity .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-vfgx37" title={"一套系統，兩種方式"} summary={"代理和 UI 寫入相同的操作和相同的資料庫。無論一個人做什麼，另一個人都會看到。"}>
+
+```html
+<div class="diagram-parity">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Human<br /><small class="diagram-muted">點選、表單、快速鍵</small>
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">自然語言 · A2A · Slack</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">defined once</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">SQL 資料庫</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">介面即時更新</div>
+</div>
+```
+
+```css
+.diagram-parity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-parity .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-parity .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-parity .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 當代理建立電子郵件草稿時，它會顯示在 UI 中。當您點選“傳送”時，代理就知道它已傳送。沒有單獨的“代理世界”和“UI 世界”——它是一個系統。請參閱 [Key Concepts](/docs/key-concepts) 了解實現此功能的架構。
 
 ## 通常為電動工具保留定制 {#workspace-customization}

package/docs/content/locales/zh-TW/workspace-connections.mdx

@@ -16,13 +16,75 @@ description: "用於 connect-once-use-everywhere 整合的共用提供者中繼
 - **credentialRef** — 指向保管庫機密 (`{ key: "SLACK_BOT_TOKEN", scope: "org" }`) 的指針。連線表明權杖所在的位置；金庫儲存著價值。
 - **就緒** - 應用程式看到的組合狀態：`connected`（已授予 + 存在憑證）、`needs_grant`、`needs_credentials`、`needs_attention` 或 `not_configured`。
 
-```an-diagram title="連線一次、授予應用程式、重複使用憑證" summary="連線儲存提供者中繼資料（絕不是秘密）和指向保管庫的 credentialRefs。每個應用程式授予解鎖它。應用程式讀取單一就緒狀態。"
-{
-  "html": "<div class=\"diagram-conn\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Connection</span><div class=\"diagram-box\" data-rough>named provider account<br><small class=\"diagram-muted\">provider, label, 狀態、作用域、設定 &middot; never stores secret values</small></div><div class=\"diagram-muted\">credentialRef &rarr; pointer to a vault secret</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill\">Grant</span><div class=\"diagram-box\" data-rough>per-app permission<br><small class=\"diagram-muted\">no grant = no credential access</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Readiness</span><small class=\"diagram-muted\">what the app sees</small><div class=\"sev-row\"><span class=\"diagram-pill ok\">connected</span><span class=\"diagram-pill warn\">needs_grant</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">needs_credentials</span><span class=\"diagram-pill warn\">needs_attention</span></div><div class=\"sev-row\"><span class=\"diagram-pill\">not_configured</span></div></div></div>",
-  "css": ".diagram-conn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-conn .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-conn .diagram-arrow{font-size:22px;line-height:1}.diagram-conn .sev-row{display:flex;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-xk7e21" title={"連線一次、授予應用程式、重複使用憑證"} summary={"連線儲存提供者中繼資料（絕不是秘密）和指向保管庫的 credentialRefs。每個應用程式授予解鎖它。應用程式讀取單一就緒狀態。"}>
+
+```html
+<div class="diagram-conn">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">Connection</span>
+    <div class="diagram-box" data-rough>
+      named provider account<br /><small class="diagram-muted"
+        >provider, label, 狀態、作用域、設定 &middot; never stores secret
+        values</small
+      >
+    </div>
+    <div class="diagram-muted">
+      credentialRef &rarr; pointer to a vault secret
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill">Grant</span>
+    <div class="diagram-box" data-rough>
+      per-app permission<br /><small class="diagram-muted"
+        >no grant = no credential access</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Readiness</span
+    ><small class="diagram-muted">what the app sees</small>
+    <div class="sev-row">
+      <span class="diagram-pill ok">connected</span
+      ><span class="diagram-pill warn">needs_grant</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">needs_credentials</span
+      ><span class="diagram-pill warn">needs_attention</span>
+    </div>
+    <div class="sev-row"><span class="diagram-pill">not_configured</span></div>
+  </div>
+</div>
+```
+
+```css
+.diagram-conn {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-conn .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-conn .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-conn .sev-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 ### 工作範例：Slack
 
 連線 Slack 一次並將其授予 Brain and Analytics：
@@ -260,13 +322,69 @@ const brainCatalog = await listWorkspaceConnectionProviderCatalogForApp({
 
 工作區連線提供者中繼資料回答：“這是哪個提供者，它能做什麼，可能需要什麼憑證金鑰，以及哪些範本應提供它？”
 
-```an-diagram title="連線儲存與保管庫" summary="金庫擁有秘密價值。連線擁有提供者中繼資料和 credentialRefs（指針）。在執行時，應用程式透過授予的連線解析引用並從保管庫讀取值。"
-{
-  "html": "<div class=\"diagram-vault\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">連線儲存</span><div class=\"diagram-box\" data-rough>provider account + metadata<br><small class=\"diagram-muted\">狀態、作用域、設定</small></div><div class=\"diagram-box\" data-rough>credentialRef<br><small class=\"diagram-muted\">{ key: SLACK_BOT_TOKEN, scope: org }</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">應用 action</span><small class=\"diagram-muted\">resolves at execution time through a granted ref</small><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Vault</span><div class=\"diagram-box\" data-rough>secret value<br><small class=\"diagram-muted\">絕不返回給代理或 UI</small></div></div></div>",
-  "css": ".diagram-vault{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-vault .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-vault .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-vault .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1k7yh1a" title={"連線儲存與保管庫"} summary={"金庫擁有秘密價值。連線擁有提供者中繼資料和 credentialRefs（指針）。在執行時，應用程式透過授予的連線解析引用並從保管庫讀取值。"}>
+
+```html
+<div class="diagram-vault">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">連線儲存</span>
+    <div class="diagram-box" data-rough>
+      provider account + metadata<br /><small class="diagram-muted"
+        >狀態、作用域、設定</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      credentialRef<br /><small class="diagram-muted"
+        >{ key: SLACK_BOT_TOKEN, scope: org }</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">應用 action</span
+    ><small class="diagram-muted"
+      >resolves at execution time through a granted ref</small
+    >
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Vault</span>
+    <div class="diagram-box" data-rough>
+      secret value<br /><small class="diagram-muted">絕不返回給代理或 UI</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vault {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-vault .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-vault .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-vault .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 同時使用兩者：
 
 1. Dispatch（或其他工作區設定流程）建立底層保管庫機密或 OAuth 憑證引用。

package/docs/content/locales/zh-TW/workspace-management.mdx

@@ -9,13 +9,59 @@ description: "分支、CODEOWNERS、PR 審查以及 Dispatch 如何與 git 級
 
 本指南涵蓋了執行 Agent-Native 工作區的操作方面 - 如何分支、誰審查什麼、如何設定程式碼所有權以及 Dispatch 控制平面如何適應您的治理模型。
 
-```an-diagram title="兩個治理平面" summary="Git 管理程式碼； Dispatch 控制執行時。它們是互補的——不要將一個複製到另一個中。"
-{
-  "html": "<div class=\"gov\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Git 和 GitHub</span><strong>程式碼治理</strong><div class=\"gov-list\"><span class=\"diagram-pill\">CODEOWNERS</span><span class=\"diagram-pill\">branch protection</span><span class=\"diagram-pill\">PR 評審</span><span class=\"diagram-pill\">git log / blame</span></div></div><div class=\"diagram-pill diagram-muted\">+</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Dispatch</span><strong>Runtime governance</strong><div class=\"gov-list\"><span class=\"diagram-pill\">vault secrets &amp; grants</span><span class=\"diagram-pill\">workspace resources</span><span class=\"diagram-pill\">agent profiles</span><span class=\"diagram-pill\">approvals &amp; audit</span></div></div></div>",
-  "css": ".gov{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.gov .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.gov .gov-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}"
+<Diagram id="doc-block-166i88y" title={"兩個治理平面"} summary={"Git 管理程式碼； Dispatch 控制執行時。它們是互補的——不要將一個複製到另一個中。"}>
+
+```html
+<div class="gov">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Git 和 GitHub</span
+    ><strong>程式碼治理</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">CODEOWNERS</span
+      ><span class="diagram-pill">branch protection</span
+      ><span class="diagram-pill">PR 評審</span
+      ><span class="diagram-pill">git log / blame</span>
+    </div>
+  </div>
+  <div class="diagram-pill diagram-muted">+</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Dispatch</span
+    ><strong>Runtime governance</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">vault secrets &amp; grants</span
+      ><span class="diagram-pill">workspace resources</span
+      ><span class="diagram-pill">agent profiles</span
+      ><span class="diagram-pill">approvals &amp; audit</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.gov {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.gov .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.gov .gov-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## 分支
 
 ### 功能分支

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

@@ -11,13 +11,68 @@ description: "Claude - 每個使用者的程式碼級自訂 - skills、記憶、
 
 變化：**它是 SQL 行，而不是檔案系統檔案。**每個使用者都將自己的工作區儲存在資料庫中。沒有要啟動的開發盒，沒有每個使用者的容器，沒有要安裝的檔案。多租戶 SaaS 可以為每個使用者提供基本上免費的完全可自訂的代理，因為所有這些都是行——個人記憶、個人 MCP 伺服器、個人 skills、個人子代理——並且共用程式碼庫同時託管所有這些。
 
-```an-diagram title="Claude-Code 工作區，但儲存在 SQL 中" summary="相同的定制層——指令、技能、記憶、代理、作業、MCP——除了每個檔案都是共用多租戶資料庫中的一行。"
-{
-  "html": "<div class=\"ws-map\"><div class=\"diagram-card cc\"><span class=\"diagram-pill warn\">Claude Code / Codex</span><small class=\"diagram-muted\">~/.claude/ on a local disk</small><div class=\"ws-files\"><span class=\"diagram-box\">CLAUDE.md</span><span class=\"diagram-box\">skills/</span><span class=\"diagram-box\">memory</span><span class=\"diagram-box\">mcp.json</span></div><small class=\"diagram-muted\">one codebase per developer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card an\"><span class=\"diagram-pill accent\">Agent-Native 工作區</span><small class=\"diagram-muted\">rows in one SQL 資料庫</small><div class=\"ws-rows\"><span class=\"diagram-pill\">AGENTS.md</span><span class=\"diagram-pill\">skills/&hellip;</span><span class=\"diagram-pill\">memory/&hellip;</span><span class=\"diagram-pill\">mcp-servers/&hellip;</span></div><small class=\"diagram-muted\">一個程式碼庫，多使用者，有作用域 <code>u:&lt;email&gt;:&hellip;</code></small></div></div>",
-  "css": ".ws-map{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ws-map .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:220px}.ws-map .ws-files,.ws-map .ws-rows{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}.ws-map .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-13hq8ax" title={"Claude-Code 工作區，但儲存在 SQL 中"} summary={"相同的定制層——指令、技能、記憶、代理、作業、MCP——除了每個檔案都是共用多租戶資料庫中的一行。"}>
+
+```html
+<div class="ws-map">
+  <div class="diagram-card cc">
+    <span class="diagram-pill warn">Claude Code / Codex</span
+    ><small class="diagram-muted">~/.claude/ on a local disk</small>
+    <div class="ws-files">
+      <span class="diagram-box">CLAUDE.md</span
+      ><span class="diagram-box">skills/</span
+      ><span class="diagram-box">memory</span
+      ><span class="diagram-box">mcp.json</span>
+    </div>
+    <small class="diagram-muted">one codebase per developer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card an">
+    <span class="diagram-pill accent">Agent-Native 工作區</span
+    ><small class="diagram-muted">rows in one SQL 資料庫</small>
+    <div class="ws-rows">
+      <span class="diagram-pill">AGENTS.md</span
+      ><span class="diagram-pill">skills/&hellip;</span
+      ><span class="diagram-pill">memory/&hellip;</span
+      ><span class="diagram-pill">mcp-servers/&hellip;</span>
+    </div>
+    <small class="diagram-muted"
+      >一個程式碼庫，多使用者，有作用域
+      <code>u:&lt;email&gt;:&hellip;</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.ws-map {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ws-map .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 220px;
+}
+.ws-map .ws-files,
+.ws-map .ws-rows {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 4px 0;
+}
+.ws-map .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 | Claude 程式碼/Codex           | Agent-Native 工作區                     |
 | ----------------------------- | --------------------------------------- |
 | 本機磁盤上的檔案              | 共用 SQL 資料庫中的行                   |
@@ -51,13 +106,61 @@ description: "Claude - 每個使用者的程式碼級自訂 - skills、記憶、
 
 這些路徑適用於所有三個範圍 - 工作空間、組織/應用程式和個人。當同一路徑存在於多個層級時，後面的範圍獲勝。
 
-```an-diagram title="三個範圍，一個有效檔案" summary="執行時在讀取時解析跨工作區、應用程式和個人範圍的相同路徑 - 最具體的範圍獲勝。"
-{
-  "html": "<div class=\"ws-stack\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Workspace</span><small class=\"diagram-muted\">來自 Dispatch 的公司級預設值</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">組織 / 應用</span><small class=\"diagram-muted\">team override for one app</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Personal</span><small class=\"diagram-muted\">per-user override &mdash; wins</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Effective <code>context/brand.md</code></div></div>",
-  "css": ".ws-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ws-stack .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:280px}.ws-stack .diagram-arrow{font-size:20px;align-self:center}.ws-stack code{font-size:.85em}.ws-stack .diagram-box{align-self:center;margin-top:4px}"
+<Diagram id="doc-block-a03gk6" title={"三個範圍，一個有效檔案"} summary={"執行時在讀取時解析跨工作區、應用程式和個人範圍的相同路徑 - 最具體的範圍獲勝。"}>
+
+```html
+<div class="ws-stack">
+  <div class="diagram-card">
+    <span class="diagram-pill">Workspace</span
+    ><small class="diagram-muted">來自 Dispatch 的公司級預設值</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">組織 / 應用</span
+    ><small class="diagram-muted">team override for one app</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Personal</span
+    ><small class="diagram-muted">per-user override &mdash; wins</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">Effective <code>context/brand.md</code></div>
+</div>
+```
+
+```css
+.ws-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ws-stack .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  min-width: 280px;
+}
+.ws-stack .diagram-arrow {
+  font-size: 20px;
+  align-self: center;
+}
+.ws-stack code {
+  font-size: 0.85em;
+}
+.ws-stack .diagram-box {
+  align-self: center;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## 入門：1 分鐘演練 {#getting-started}
 
 在 60 秒內更改代理的行為方式。

package/docs/content/locales/zh-TW/writing-agent-instructions.mdx

@@ -7,13 +7,47 @@ description: "如何為 Agent-Native 應用或範本編寫出色的代理指令
 
 代理在 Agent-Native 應用程式中的行為僅與您給出的說明一樣好。三個表面承載該指導：`AGENTS.md`（地圖）、skills（深入研究）和操作/工具描述（代理如何選取正確的工具）。寫下每一篇都是為了快速檢索，而不是為了散文。
 
-```an-diagram title="三個創作表面 + 一個執行時表面" summary="AGENTS.md 和工具描述每回合都會載入；按需載入技能； application_state 由您的 UI 即時編寫。"
-{
-  "html": "<div class=\"diagram-surfaces\"><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">每一輪</span><strong>AGENTS.md</strong><small class=\"diagram-muted\">地圖：用途、核心規則、狀態鍵、action + skills 索引</small></div><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">每一輪</span><strong>工具描述</strong><small class=\"diagram-muted\">驅動工具選取 — 每個工具一句精確說明</small></div><div class=\"diagram-card ondemand\" data-rough><span class=\"diagram-pill\">按需</span><strong>技能</strong><small class=\"diagram-muted\">深度指南，在描述匹配時載入</small></div><div class=\"diagram-card runtime\" data-rough><span class=\"diagram-pill ok\">Live</span><strong>application_state</strong><small class=\"diagram-muted\">由你的 UI 寫入：導覽、選取、焦點</small></div></div>",
-  "css": ".diagram-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.diagram-surfaces .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}"
+<Diagram id="doc-block-6rv3bf" title={"三個創作表面 + 一個執行時表面"} summary={"AGENTS.md 和工具描述每回合都會載入；按需載入技能； application_state 由您的 UI 即時編寫。"}>
+
+```html
+<div class="diagram-surfaces">
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">每一輪</span><strong>AGENTS.md</strong
+    ><small class="diagram-muted"
+      >地圖：用途、核心規則、狀態鍵、action + skills 索引</small
+    >
+  </div>
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">每一輪</span><strong>工具描述</strong
+    ><small class="diagram-muted">驅動工具選取 — 每個工具一句精確說明</small>
+  </div>
+  <div class="diagram-card ondemand" data-rough>
+    <span class="diagram-pill">按需</span><strong>技能</strong
+    ><small class="diagram-muted">深度指南，在描述匹配時載入</small>
+  </div>
+  <div class="diagram-card runtime" data-rough>
+    <span class="diagram-pill ok">Live</span><strong>application_state</strong
+    ><small class="diagram-muted">由你的 UI 寫入：導覽、選取、焦點</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-surfaces {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.diagram-surfaces .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## 保持 AGENTS.md 小且可瀏覽 {#small-agents-md}
 
 `AGENTS.md` 作為方向載入。它應該是讓代理正確行動的最小事物，所有內容都深入到 skills 中。瞄準這些部分而不是其他部分：