@agent-native/core 0.79.26 → 0.79.27

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

@@ -18,13 +18,67 @@ Assets 是一個 Agent-Native 工作區，用於建立和管理品牌一致的
 
 當您開啟應用程式時，選定的庫、提示、參考文獻和產生的候選項將保留在一個工作區中。代理可以透過 UI 使用的同一個 actions 瀏覽、搜尋、生成、最佳化和匯出每個資產。
 
-```an-diagram title="生成、審查、重用" summary="參考和提示為生成和選取工作階段提供資訊；選定的資產進入庫並透過選取器或 A2A 流出到其他應用程式。"
-{
-  "html": "<div class=\"diagram-assets\"><div class=\"diagram-col\"><div class=\"diagram-node\">References<br><small class=\"diagram-muted\">logo、產品截圖、風格</small></div><div class=\"diagram-node\">提示<br><small class=\"diagram-muted\">聊天或 Generate 控制項</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">生成工作階段</span><small class=\"diagram-muted\">image &amp; video candidates · audit log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Library</span><small class=\"diagram-muted\">已選、符合品牌的 assets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Picker<br><small class=\"diagram-muted\">iframe / MCP 應用</small></div><div class=\"diagram-node\">A2A<br><small class=\"diagram-muted\">幻燈片 · 設計 · 內容</small></div></div></div>",
-  "css": ".diagram-assets{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-assets .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-assets .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-assets .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-1fyv2jl" title={"生成、審查、重用"} summary={"參考和提示為生成和選取工作階段提供資訊；選定的資產進入庫並透過選取器或 A2A 流出到其他應用程式。"}>
+
+```html
+<div class="diagram-assets">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      References<br /><small class="diagram-muted">logo、產品截圖、風格</small>
+    </div>
+    <div class="diagram-node">
+      提示<br /><small class="diagram-muted">聊天或 Generate 控制項</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">生成工作階段</span
+    ><small class="diagram-muted"
+      >image &amp; video candidates · audit log</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Library</span
+    ><small class="diagram-muted">已選、符合品牌的 assets</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Picker<br /><small class="diagram-muted">iframe / MCP 應用</small>
+    </div>
+    <div class="diagram-node">
+      A2A<br /><small class="diagram-muted">幻燈片 · 設計 · 內容</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-assets {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-assets .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-assets .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-assets .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 何時采摘
 
 - **您的團隊需要可重複使用的視覺指導**，而不是一次性的通用媒體提示 - 收集經過核准的徽標、產品照片和風格範例，以便幾代人都能堅持品牌。

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

@@ -19,13 +19,74 @@ description: "由引用的機構記憶、可審查的來源程式碼攝取和可
 經驗，而**來源**、**評論**和**知識**是管理/支援
 用於連線資料、核准提案和檢查引用記憶的介面。
 
-```an-diagram title="從來源到引用的答案" summary="大腦將經過核准的來源攝取到原始捕獲中，擷取持久記憶，透過審查對其進行門控，然後才透過引用進行回答。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Sources</span><small class=\"diagram-muted\">Slack · Granola · GitHub · Clips · webhooks</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>原始捕獲<br><small class=\"diagram-muted\">已去重、已脫敏</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Distill<br><small class=\"diagram-muted\">事實 · 決策 · 流程</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Review</span><small class=\"diagram-muted\">sensitive / low-confidence queue</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Knowledge</span><small class=\"diagram-muted\">已核准、原子化</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Ask</span><small class=\"diagram-muted\">cited answer</small></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.diagram-flow .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-flow .diagram-arrow{font-size:20px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1flwjg8" title={"從來源到引用的答案"} summary={"大腦將經過核准的來源攝取到原始捕獲中，擷取持久記憶，透過審查對其進行門控，然後才透過引用進行回答。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Sources</span
+    ><small class="diagram-muted"
+      >Slack · Granola · GitHub · Clips · webhooks</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    原始捕獲<br /><small class="diagram-muted">已去重、已脫敏</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Distill<br /><small class="diagram-muted">事實 · 決策 · 流程</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Review</span
+    ><small class="diagram-muted">sensitive / low-confidence queue</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Knowledge</span
+    ><small class="diagram-muted">已核准、原子化</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Ask</span
+    ><small class="diagram-muted">cited answer</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.diagram-flow .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-tvgymf">
   <Screen
     surface="desktop"

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

@@ -18,13 +18,67 @@ description: "由代理支援的行事曆，具有 Google Calendar 同步和 Cal
 
 當您開啟應用程式時，活動行事曆檢視是主表面。代理仍然知道您正在檢視哪一天、哪一週或哪一天的活動，因此您可以說“安排在這一天與 Alex 進行 30 分鐘的通話”，而無需說明所有內容。
 
-```an-diagram title="調度請求如何流動" summary="無論您點選行事曆還是詢問代理，相同的操作都會從 Google Calendar 即時讀取並寫回同一檢視。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">你點選<br><small class=\"diagram-muted\">拖放、工具列、快速鍵</small></div><div class=\"diagram-node\">你向代理請求<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</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\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">即時、多帳戶</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">預約 · 可用時間</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">行事曆檢視即時更新</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1qbldig" title={"調度請求如何流動"} summary={"無論您點選行事曆還是詢問代理，相同的操作都會從 Google Calendar 即時讀取並寫回同一檢視。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      你點選<br /><small class="diagram-muted">拖放、工具列、快速鍵</small>
+    </div>
+    <div class="diagram-node">
+      你向代理請求<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</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"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted">即時、多帳戶</small>
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">預約 · 可用時間</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">行事曆檢視即時更新</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什麼
 
 - **在日、週或月檢視中檢視您真實的 Google Calendar**，並疊加多個帳戶。

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

@@ -37,13 +37,68 @@ description: "一個最小的聊天優先 Agent-Native 應用程式：持久的
 
 這就是重點。聊天是您自己的代理的一個薄而有用的預設外殼，而不是一個假裝通用的領域產品。
 
-```an-diagram title="Chat shell 中包含哪些內容" summary="框架標準執行時上的精簡聊天介面（操作、持久對話串、即時同步和驗證），有空間新增您自己的 UI。"
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">對話串清單<br><small class=\"diagram-muted\">建立 · 重新開啟 · 固定 · 封存</small></div><div class=\"diagram-node\">整頁面聊天<br><small class=\"diagram-muted\">/ 上的框架聊天介面</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\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">核心 SQL 表<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">即時同步 &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">登入 · 組織 · 工作階段</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1u5pxeq" title={"Chat shell 中包含哪些內容"} summary={"框架標準執行時上的精簡聊天介面（操作、持久對話串、即時同步和驗證），有空間新增您自己的 UI。"}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      對話串清單<br /><small class="diagram-muted"
+        >建立 · 重新開啟 · 固定 · 封存</small
+      >
+    </div>
+    <div class="diagram-node">
+      整頁面聊天<br /><small class="diagram-muted">/ 上的框架聊天介面</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">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      核心 SQL 表<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">即時同步 &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted"
+        >登入 · 組織 · 工作階段</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 何時采摘 {#when-to-pick}
 
 - **您想要一個使用者可以立即交談的基本應用程式**，然後使用 actions 和 UI 進行擴充功能。

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

@@ -19,13 +19,61 @@ search: "Clips 瀏覽器記錄 開發人員記錄 主控台記錄 網路記錄
 
 沿著將 Loom + Granola + Wispr Flow 整合到一個應用程式中的思路來思考 — 但代理在每個介面上都是一流的編輯器，並且錄音、會議和聽寫都是您的，而不是 SaaS 供應商的。 Clips 還使共用錄音可供代理讀取：將普通的 Clips 共用連結貼上到代理中，它可以“聽到”文字形式的文字紀錄，並“看到”帶有時間戳的螢幕幀作為圖片 - 無需原始影片。幀檢視適用於任何具有圖片功能的代理（ChatGPT、Claude 程式碼、游標、Codex）；純文字網頁聊天仍然可以獲得完整的文字紀錄，並且可以拍攝您上傳的幀。
 
-```an-diagram title="捕獲、轉錄、重用" summary="三種捕獲型別集中在一個庫中；代理進行抄寫、標題和總結，然後每個抄本都可以搜尋和共用。"
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">螢幕錄製</div><div class=\"diagram-node\">行事曆會議</div><div class=\"diagram-node\">按住 Fn 聽寫</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>一個庫<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">標題 · 摘要 · 章節</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">搜尋</div><div class=\"diagram-pill\">分享</div><div class=\"diagram-pill\">代理可讀 links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-11lg5ws" title={"捕獲、轉錄、重用"} summary={"三種捕獲型別集中在一個庫中；代理進行抄寫、標題和總結，然後每個抄本都可以搜尋和共用。"}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">螢幕錄製</div>
+    <div class="diagram-node">行事曆會議</div>
+    <div class="diagram-node">按住 Fn 聽寫</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    一個庫<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">標題 · 摘要 · 章節</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">搜尋</div>
+    <div class="diagram-pill">分享</div>
+    <div class="diagram-pill">代理可讀 links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什麼
 
 - **使用內建錄音機、網路攝影機覆蓋、音訊捕獲和暫停/修剪來錄製螢幕**。

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

@@ -22,13 +22,67 @@ description: "MDX 的開放原始碼 Obsidian：編輯本機 Markdown/MDX 檔案
 
 當您開啟應用程式時，您將在編輯器旁邊看到一個頁面樹。代理始終知道您正在檢視哪個頁面以及您選取了哪些文字，因此檔案編輯可以保持在目前頁面。
 
-```an-diagram title="一份檔案，多名編輯" summary="您和代理都透過相同的 Yjs 管道進行寫入。 SQL 是規範儲存；本機檔案和 Notion 是可選的同步表面。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">你輸入<br><small class=\"diagram-muted\">slash 選單、工具列</small></div><div class=\"diagram-node\">代理編輯<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">即時、無衝突合併</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">規範 SQL 儲存</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">本機 .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion 頁面<br><small class=\"diagram-muted\">拉取 · 推送</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-qaocg3" title={"一份檔案，多名編輯"} summary={"您和代理都透過相同的 Yjs 管道進行寫入。 SQL 是規範儲存；本機檔案和 Notion 是可選的同步表面。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      你輸入<br /><small class="diagram-muted">slash 選單、工具列</small>
+    </div>
+    <div class="diagram-node">
+      代理編輯<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">即時、無衝突合併</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted">規範 SQL 儲存</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      本機 .md / .mdx<br /><small class="diagram-muted">/local-files</small>
+    </div>
+    <div class="diagram-box">
+      Notion 頁面<br /><small class="diagram-muted">拉取 · 推送</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什麼
 
 - **編寫包含標題、清單、表格、程式碼塊、圖片和連結的富文字**。斜線指令（`/`）插入塊；選取文字會快顯格式工具列。

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

@@ -18,13 +18,67 @@ Design 是一家 Agent-Native HTML 原型工作室。該代理不是分層繪圖
 
 當您開啟應用程式時，產生的原型位於工作區的中心，預覽模式、提示修訂和匯出控制項觸手可及。代理正式環境的所有東西都是真實的 HTML，您可以精煉、匯出或移交。
 
-```an-diagram title="一件神器，無需翻譯" summary="代理生成獨立的 Alpine/Tailwind HTML； iframe、可編輯來源和每個匯出都讀取相同的檔案。連結的設計系統將權杖輸入到每個通道中。"
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">提示<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">設計系統</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">代理生成</span><small class=\"diagram-muted\">獨立 HTML / JSX 檔案</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">調整旋鈕 · Cmd+I 最佳化</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · 交接</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-rutvb4" title={"一件神器，無需翻譯"} summary={"代理生成獨立的 Alpine/Tailwind HTML； iframe、可編輯來源和每個匯出都讀取相同的檔案。連結的設計系統將權杖輸入到每個通道中。"}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      提示<br /><small class="diagram-muted">describe screen / page</small>
+    </div>
+    <div class="diagram-pill">設計系統</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">代理生成</span
+    ><small class="diagram-muted">獨立 HTML / JSX 檔案</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >調整旋鈕 · Cmd+I 最佳化</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · 交接</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 何時采摘
 
 - **您想要一個精美的到達頁面概念、產品 UI 方向或品牌探索**，可以讓工具保持真實的 HTML — 而不是分層的畫布。

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

@@ -20,13 +20,66 @@ Dispatch 是**工作區控制平面**。其他範本是域應用程式（郵件
 
 如果您正在執行帶有許多應用程式的 [multi-app workspace](/docs/multi-app-workspace)，Dispatch 就是粘合劑。
 
-```an-diagram title="統筹安排，不要專門化" summary="來自每個管道的訊息都會集中在一個收件箱中；編排器透過 A2A 對域工作進行分類和委托給正確的專業應用程式 — 秘密、資源和核准保持核心。"
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">A2A 請求</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">中央收件箱 · 分診 · 路由</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">郵件 Agent</div><div class=\"diagram-node\">分析 Agent</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">金鑰保險庫</span><span class=\"diagram-pill\">工作區資源</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">計畫工作</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-wti6i1" title={"統筹安排，不要專門化"} summary={"來自每個管道的訊息都會集中在一個收件箱中；編排器透過 A2A 對域工作進行分類和委托給正確的專業應用程式 — 秘密、資源和核准保持核心。"}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">A2A 請求</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">中央收件箱 · 分診 · 路由</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">郵件 Agent</div>
+    <div class="diagram-node">分析 Agent</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">金鑰保險庫</span
+  ><span class="diagram-pill">工作區資源</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">計畫工作</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## 它的作用 {#what-it-does}
 
 - **中央收件箱。** Slack 私信、電報訊息、電子郵件通知、來自其他代理的 A2A 請求 — 全部集中在一個地方。 Dispatch 代理會進行分類並自行處理或委托處理。請參閱 [Messaging](/docs/messaging) 了解如何將 Slack、電子郵件和 Telegram 連線到您的工作區。