@agent-native/core 0.79.26 → 0.80.0

package/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/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 — 而不是分層的畫布。
@@ -294,6 +348,44 @@ UI 中的路由位於 `templates/design/app/routes/` 下：`_index.tsx`（清單
 
 因為設計只是獨立的 HTML/JSX 檔案，所以代理編輯 iframe 渲染和每個匯出來自的相同來源 - 沒有單獨的“AI 模型”格式需要翻譯。連結設計系統提供代幣和代理在每一代通行證上兌現的 `custom_instructions`。在預覽中選取文字或區域，然後按 Cmd+I 將代理集中在該部分上。
 
+### 編輯器模型
+
+Design 對多畫面工作採用概覽優先。產生或進行大範圍更新後，編輯器會開啟
+畫面概覽：一個無限畫布，其中每個畫面都是可選取、移動、調整大小、拖放或
+複製的靜態框架。需要聚焦捲動或原型互動時，請使用框架的完整檢視按鈕。
+
+單畫面模式用於捲動、與原型行為互動，以及編輯一個已渲染檔案內的 DOM/程
+式碼圖層。圖層面板也反映這種分工：畫面是頂層框架，作用中畫面下嵌套
+DOM/程式碼圖層。
+
+若要取得穩定的圖層名稱，請在有意義的元素上加入
+`data-agent-native-layer-name`。Design 會優先使用它，然後才使用語意/文字
+後備，並且可以透過編輯該屬性來持久保存圖層重新命名。Inline HTML 支援本
+機程式碼圖層編輯，包括文字、class、style、attribute、來源順序和小型結構
+調整；視覺程式碼圖層編輯目前僅支援 HTML。Localhost source mode 可以註冊
+並解析本機路由 artboard，但本機檔案讀寫仍是橋接合約，直到明確權限控制
+完成加固。
+
+### Design 編輯器擴充功能
+
+編輯器在 **Tweaks** 之後包含一個 **Extensions** 檢查器標籤。它像 Design
+專屬的外掛通道：使用者可以點擊 **+ Extension** 讓代理建立擴充功能，也可
+以安裝宣告 `design.editor.inspector` slot 的擴充功能。
+
+Design 擴充功能會透過標準擴充 sandbox 內嵌渲染在 artboard 旁邊。host 會
+透過 `window.slotContext` 和 `window.onSlotContext(...)` 更新傳入目前的
+`designId`、作用中檔案、畫面清單、已選畫面 id、已選元素中繼資料、檢視模
+式、縮放、作用中工具和 tweak 值。這讓擴充功能可以顯示目前選取項目的資
+訊、提供樣式控制，或圍繞開啟的設計建立精簡工作流程。
+
+對於確定性的工作，擴充功能可以透過擴充橋接呼叫 app actions。對於 AI 驅
+動的變更，讓擴充功能呼叫 `agentNative.chat.send(...)`，並附上已選元素的
+selector/source id 和要求的變更。代理應先呼叫 `view-screen`，再用
+`apply-visual-edit` 處理元素 style、class、text 或 move 變更，或用帶有
+`canvasFrames` 的 `update-design` / `generate-design` 處理 artboard placement
+變更。關於 sandbox、持久狀態和橋接 API，請參閱
+[Extensions](/docs/extensions#what-an-extension-can-do)。
+
 ### 自訂它
 
 設計是一個完整的、可克隆的範本。一些實用的擴充功能想法：

package/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 連線到您的工作區。

package/docs/content/locales/zh-TW/template-forms.mdx

@@ -18,13 +18,67 @@ Forms 是一個 Agent-Native 表單建置器。描述您想要的表單，在編
 
 當您開啟應用程式時，您會看到表單、目前編輯器和即時預覽。代理可以根據提示建立表單、更新欄位標籤和選項、更改驗證以及使用 UI 使用的相同 actions 連線提交目的地。
 
-```an-diagram title="建置、發布、收集" summary="代理和視覺化編輯器編輯一個 SQL-backed 表單定義。公開填寫頁面未經驗證，提交內容將透過伺服器端路由到您的目的地。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">代理提示詞<br><small class=\"diagram-muted\">\"add an NPS question\"</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\">create-form · update-form</span><small class=\"diagram-muted\">欄位 JSON，設定 JSON</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">forms table<br><small class=\"diagram-muted\">透過 Drizzle 使用 SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">公開填寫頁面<br><small class=\"diagram-muted\">unauthenticated</small></div><div class=\"diagram-box\">responses<br><small class=\"diagram-muted\">+ Slack / webhook / 表格</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-128wfsc" title={"建置、發布、收集"} summary={"代理和視覺化編輯器編輯一個 SQL-backed 表單定義。公開填寫頁面未經驗證，提交內容將透過伺服器端路由到您的目的地。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      代理提示詞<br /><small class="diagram-muted">"add an NPS question"</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">create-form · update-form</span
+    ><small class="diagram-muted">欄位 JSON，設定 JSON</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    forms table<br /><small class="diagram-muted">透過 Drizzle 使用 SQL</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      公開填寫頁面<br /><small class="diagram-muted">unauthenticated</small>
+    </div>
+    <div class="diagram-box">
+      responses<br /><small class="diagram-muted"
+        >+ Slack / webhook / 表格</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>
+
 ## 你可以用它做什麼
 
 - **以對話方式建置表單。**“建立聯絡表單”、“新增 NPS 分數問題”、“將電子郵件欄位設為必填”。代理更新表單架構，並從 SQL 支援的狀態更新預覽。

package/docs/content/locales/zh-TW/template-mail.mdx

@@ -18,13 +18,69 @@ description: "代理驅動的電子郵件用戶端。連線您的 Gmail，代理
 
 當您開啟應用程式時，鍵盤優先的收件箱和對話串檢視將重點關注郵件本身。代理始終知道您處於哪個檢視以及您開啟了哪個對話串，因此您可以說“存檔此”或“起草友好拒絕”，而無需解釋“此”是什麼。
 
-```an-diagram title="郵件請求如何流動" summary="鍵盤快速鍵和代理提示執行相同的操作。電子郵件位於 Gmail； SQL 和 application_state 中的草稿、自動化和即時跟蹤。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">由你驅動<br><small class=\"diagram-muted\">J/K/E/R 快速鍵</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\">list-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">多帳戶，透過 OAuth</small></div><div class=\"diagram-box\">SQL + application_state<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-1izuwgk" title={"郵件請求如何流動"} summary={"鍵盤快速鍵和代理提示執行相同的操作。電子郵件位於 Gmail； SQL 和 application_state 中的草稿、自動化和即時跟蹤。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      由你驅動<br /><small class="diagram-muted">J/K/E/R 快速鍵</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"
+      >list-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">多帳戶，透過 OAuth</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<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>
+
 ## 你可以用它做什麼
 
 - **使用鍵盤快速鍵閱讀和分類電子郵件**（`J`/`K` 用於行動，`E` 用於存檔，`R` 用於回覆，`C` 用於撰寫）。

package/docs/content/locales/zh-TW/template-plan.mdx

@@ -23,13 +23,66 @@ Codex、Claude 程式碼、Markdown 或將實施計畫貼上到結構化中
 相同的審閱介面，因此您可以註解、評論並將意見回饋返回給
 以同樣的方式代理。
 
-```an-diagram title="兩個指令，一個檢視介面" summary="這兩個指令都透過託管的 Plan MCP 連線器發布到相同的註解和評論介面。"
-{
-  "html": "<div class=\"diagram-plan\"><div class=\"diagram-col\"><div class=\"diagram-node\"><span class=\"diagram-pill accent\">/visual-plan</span><small class=\"diagram-muted\">寫程式碼前 — 架構、UI、重構</small></div><div class=\"diagram-node\"><span class=\"diagram-pill\">/visual-recap</span><small class=\"diagram-muted\">寫程式碼後 — PR、提交、分支、diff</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Plan MCP 連線器<br><small class=\"diagram-muted\">plan.agent-native.com</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">審閱介面<br><small class=\"diagram-muted\">圖表 · 線框圖 · 帶註解的程式碼 · 評論</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-node\">編碼代理<br><small class=\"diagram-muted\">意見回饋已交回</small></div></div>",
-  "css": ".diagram-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-plan .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-plan .diagram-arrow{font-size:22px;line-height:1}.diagram-plan .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}"
+<Diagram id="doc-block-14bxxm9" title={"兩個指令，一個檢視介面"} summary={"這兩個指令都透過託管的 Plan MCP 連線器發布到相同的註解和評論介面。"}>
+
+```html
+<div class="diagram-plan">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      <span class="diagram-pill accent">/visual-plan</span
+      ><small class="diagram-muted">寫程式碼前 — 架構、UI、重構</small>
+    </div>
+    <div class="diagram-node">
+      <span class="diagram-pill">/visual-recap</span
+      ><small class="diagram-muted">寫程式碼後 — PR、提交、分支、diff</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Plan MCP 連線器<br /><small class="diagram-muted"
+      >plan.agent-native.com</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    審閱介面<br /><small class="diagram-muted"
+      >圖表 · 線框圖 · 帶註解的程式碼 · 評論</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-node">
+    編碼代理<br /><small class="diagram-muted">意見回饋已交回</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-plan {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-plan .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-plan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-plan .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-aglxh2">
   <Screen
     surface="desktop"

package/docs/content/locales/zh-TW/template-slides.mdx

@@ -18,13 +18,58 @@ description: "根據提示生成簡報、進行視覺化編輯並全螢幕呈現
 
 當您開啟幻燈片時，幻燈片畫布、大綱、註解和幻燈片保留在一個編輯器介面中，而代理仍然可以透過 actions 建立、修改和導覽幻燈片。
 
-```an-diagram title="提示到甲板" summary="請求一副牌，代理會透過您可以從 CLI 呼叫的相同操作一次滑入一張幻燈片。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">提示<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</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\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">並行、流式傳輸</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</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:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-16j4z6f" title={"提示到甲板"} summary={"請求一副牌，代理會透過您可以從 CLI 呼叫的相同操作一次滑入一張幻燈片。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">
+    提示<br /><small class="diagram-muted">"10-slide pitch deck"</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">create-deck</div>
+    <div class="diagram-pill">add-slide &#215; n</div>
+    <small class="diagram-muted">並行、流式傳輸</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>decks (SQL)</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: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什麼
 
 - **根據提示生成簡報。**“為咖啡訂閱服務生成 10 張幻燈片的宣傳簡報，受眾是投資者。”

package/docs/content/locales/zh-TW/template-videos.mdx

@@ -18,13 +18,60 @@ description: "用於動態圖形、產品示範和動態文字的程式化影片
 
 當您開啟工作室時，您將在主螢幕上看到作品清單。點選其中一個，您會在頂部看到一個播放器，在底部看到一個時間線，在右側看到一個屬性面板。代理始終知道您開啟了哪個組合。
 
-```an-diagram title="動畫作為資料" summary="組合物是 React 元件；每個動畫都從軌道讀取，因此代理和時間線編輯相同的資料。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">拖動、調整大小、拖動時間軸</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>React 合成<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</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 .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-gsf6kh" title={"動畫作為資料"} summary={"組合物是 React 元件；每個動畫都從軌道讀取，因此代理和時間線編輯相同的資料。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Timeline<br /><small class="diagram-muted"
+        >拖動、調整大小、拖動時間軸</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">"fade in at 2s"</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">AnimationTrack</span
+    ><small class="diagram-muted">startFrame / easing / animatedProps</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    React 合成<br /><small class="diagram-muted">Remotion &lt;Player&gt;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">MP4 / WebM</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 .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 你可以用它做什麼
 
 - **根據提示生成動畫。**“新增一張在 2 秒後淡入並保持到 5 秒的標題卡。”代理編輯構圖。