@agent-native/core 0.79.26 → 0.79.27

package/corpus/core/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/corpus/core/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/corpus/core/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/corpus/core/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/corpus/core/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 秒的標題卡。”代理編輯構圖。

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

@@ -19,13 +19,63 @@ track(
 );
 ```
 
-```an-diagram title="一次 track() 呼叫，每個提供者" summary="伺服器和用戶端呼叫者存取相同的註冊表，該註冊表將每個事件並行地分發給所有活動的提供者。"
-{
-  "html": "<div class=\"trk\"><div class=\"diagram-col\"><div class=\"diagram-node\">伺服器程式碼<br><small class=\"diagram-muted\">actions &middot; plugins &middot; routes</small></div><div class=\"diagram-node\">瀏覽器程式碼<br><small class=\"diagram-muted\">POST /_agent-native/track</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Provider registry</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-box\">PostHog</div><div class=\"diagram-box\">Mixpanel</div><div class=\"diagram-box\">Amplitude</div><div class=\"diagram-box\">Webhook</div></div></div>",
-  "css": ".trk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.trk .diagram-col{display:flex;flex-direction:column;gap:8px}.trk .diagram-arrow{font-size:22px;line-height:1}.trk .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-a23ocj" title={"一次 track() 呼叫，每個提供者"} summary={"伺服器和用戶端呼叫者存取相同的註冊表，該註冊表將每個事件並行地分發給所有活動的提供者。"}>
+
+```html
+<div class="trk">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      伺服器程式碼<br /><small class="diagram-muted"
+        >actions &middot; plugins &middot; routes</small
+      >
+    </div>
+    <div class="diagram-node">
+      瀏覽器程式碼<br /><small class="diagram-muted"
+        >POST /_agent-native/track</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Provider registry</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-box">PostHog</div>
+    <div class="diagram-box">Mixpanel</div>
+    <div class="diagram-box">Amplitude</div>
+    <div class="diagram-box">Webhook</div>
+  </div>
+</div>
+```
+
+```css
+.trk {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trk .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.trk .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.trk .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 內建提供者 {#built-in}
 
 設定環境變數，提供者會在伺服器啟動時自動註冊。無需更改程式碼。

package/corpus/core/docs/content/locales/zh-TW/using-your-agent.mdx

@@ -9,13 +9,60 @@ agent-native 背後的定義思想是，agent 和 UI 是**平等的伙伴** -
 
 有一條簡單的直通線。代理**看到**您正在檢視的內容，您**將其引導**到您想要的內容，您可以**嵌入**它在任何地方，您可以在更合適的情況下完全**輕 UI**，並且您可以同時**共同編輯**相同的檔案。其中每一個都是本節中的一個頁面。
 
-```an-diagram title="日複一日的迴圈" summary="使用對接代理的五種方式 - 每種方式都是本節中的一個頁面。"
-{
-  "html": "<div class=\"diagram-loop\"><div class=\"diagram-card\"><strong>Sees</strong><small class=\"diagram-muted\">your view &amp; selection</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Direct</strong><small class=\"diagram-muted\">@-mentions &amp; voice</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Embed</strong><small class=\"diagram-muted\">drop into any app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>輕 UI</strong><small class=\"diagram-muted\">chat is the product</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">協同編輯</span><small class=\"diagram-muted\">即時，並排</small></div></div>",
-  "css": ".diagram-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-loop .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px;flex:1}.diagram-loop .diagram-arrow{align-self:center;font-size:22px;line-height:1}"
+<Diagram id="doc-block-1pgg915" title={"日複一日的迴圈"} summary={"使用對接代理的五種方式 - 每種方式都是本節中的一個頁面。"}>
+
+```html
+<div class="diagram-loop">
+  <div class="diagram-card">
+    <strong>Sees</strong
+    ><small class="diagram-muted">your view &amp; selection</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Direct</strong
+    ><small class="diagram-muted">@-mentions &amp; voice</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Embed</strong><small class="diagram-muted">drop into any app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>輕 UI</strong
+    ><small class="diagram-muted">chat is the product</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">協同編輯</span
+    ><small class="diagram-muted">即時，並排</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-loop {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-loop .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+  flex: 1;
+}
+.diagram-loop .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 它能看到你在看什麼 {#it-sees}
 
 代理不會對您的螢幕視而不見。開啟一封電子郵件，它就知道是哪個對話串。選取一個圖表，它就知道是哪個圖表。突出顯示一個段落，它可以只作用於該範圍。這種共同的意識讓您可以說“回覆此內容”或“總結選取”，而無需每次都拼寫出脈絡。

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

@@ -19,13 +19,52 @@ description: "代理聊天編輯器中的語音聽寫 - Builder Gemini、BYOK
 
 提供者選取儲存在 `voice-transcription-prefs` 下的應用程式狀態中，因此使用者可以在側邊欄設定中強制使用 `"auto"`（預設 — 選取最佳的可用提供者）、`"builder-gemini"`、`"builder"`、`"gemini"`、`"groq"`、`"openai"` 或 `"browser"`。
 
-```an-diagram title="語音轉錄提供者後備方案" summary="撰寫器錄製音訊，然後按順序遍歷伺服器提供者，僅當沒有可用的伺服器提供者時才轉到瀏覽器 Web Speech API。"
-{
-  "html": "<div class=\"diagram-voice\"><div class=\"diagram-node\">麥克風按鈕<br><small class=\"diagram-muted\">錄製 webm/opus</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill accent\">1 &middot; Builder Gemini</div><small class=\"diagram-muted\">連線 Builder 後預設使用</small><div class=\"diagram-pill\">2 &middot; BYOK cloud</div><small class=\"diagram-muted\">Gemini &middot; Groq &middot; OpenAI Whisper</small></div><div class=\"diagram-arrow diagram-warn\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box diagram-warn\" data-rough>3 &middot; Browser Web Speech<br><small class=\"diagram-muted\">fallback on 400 &middot; streams live</small></div></div>",
-  "css": ".diagram-voice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-voice .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-voice .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-8mq9qb" title={"語音轉錄提供者後備方案"} summary={"撰寫器錄製音訊，然後按順序遍歷伺服器提供者，僅當沒有可用的伺服器提供者時才轉到瀏覽器 Web Speech API。"}>
+
+```html
+<div class="diagram-voice">
+  <div class="diagram-node">
+    麥克風按鈕<br /><small class="diagram-muted">錄製 webm/opus</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill accent">1 &middot; Builder Gemini</div>
+    <small class="diagram-muted">連線 Builder 後預設使用</small>
+    <div class="diagram-pill">2 &middot; BYOK cloud</div>
+    <small class="diagram-muted"
+      >Gemini &middot; Groq &middot; OpenAI Whisper</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-warn" aria-hidden="true">&darr;</div>
+  <div class="diagram-box diagram-warn" data-rough>
+    3 &middot; Browser Web Speech<br /><small class="diagram-muted"
+      >fallback on 400 &middot; streams live</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-voice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-voice .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-voice .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 該路由**僅限同來源** - 跨站點 POST 被拒絕，因此攻擊者無法從外部頁面燒毀轉錄積分。
 
 ## 啟用提供者 {#enabling-providers}