@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/zh-TW/skills-guide.mdx

@@ -13,13 +13,72 @@ Skills 位於 `.agents/skills/<name>/SKILL.md`，包含針對代理的詳細指
 
 每個技能的 frontmatter `name` 和 `description` 總是被注入到系統提示符的 skills 塊中，以便代理知道 skills 存在什麼。當代理確定技能與工作相關時，會按需載入完整的技能主體（也透過 `docs-search` 顯示）。這就是為什麼保持描述簡短且特定於觸發器很重要：描述是代理在決定是否載入其餘部分之前讀取的唯一內容。
 
-```an-diagram title="漸進式披露" summary="只有每個技能的名稱+描述始終處於脈絡中。當工作匹配時，全身會按需載入。"
-{
-  "html": "<div class=\"sk-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">始終在系統提示中</span><div class=\"sk-list\"><span class=\"diagram-pill\">storing-data &mdash; <small class=\"diagram-muted\">add data models&hellip;</small></span><span class=\"diagram-pill\">real-time-sync &mdash; <small class=\"diagram-muted\">wire polling&hellip;</small></span><span class=\"diagram-pill\">create-skill &mdash; <small class=\"diagram-muted\">add a skill&hellip;</small></span></div><small class=\"diagram-muted\">just name + description (cheap)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><small class=\"diagram-muted\">task matches a description</small><span class=\"diagram-pill accent\">load on demand</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Full <code>SKILL.md</code> body<br><small class=\"diagram-muted\">規則、程式碼、應該做和不要做</small></div></div>",
-  "css": ".sk-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.sk-flow .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:240px}.sk-flow .sk-list{display:flex;flex-direction:column;gap:6px}.sk-flow .center{display:flex;flex-direction:column;align-items:center;gap:6px}.sk-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-ywt8ns" title={"漸進式披露"} summary={"只有每個技能的名稱+描述始終處於脈絡中。當工作匹配時，全身會按需載入。"}>
+
+```html
+<div class="sk-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">始終在系統提示中</span>
+    <div class="sk-list">
+      <span class="diagram-pill"
+        >storing-data &mdash;
+        <small class="diagram-muted">add data models&hellip;</small></span
+      ><span class="diagram-pill"
+        >real-time-sync &mdash;
+        <small class="diagram-muted">wire polling&hellip;</small></span
+      ><span class="diagram-pill"
+        >create-skill &mdash;
+        <small class="diagram-muted">add a skill&hellip;</small></span
+      >
+    </div>
+    <small class="diagram-muted">just name + description (cheap)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <small class="diagram-muted">task matches a description</small
+    ><span class="diagram-pill accent">load on demand</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Full <code>SKILL.md</code> body<br /><small class="diagram-muted"
+      >規則、程式碼、應該做和不要做</small
+    >
+  </div>
+</div>
+```
+
+```css
+.sk-flow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.sk-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 240px;
+}
+.sk-flow .sk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sk-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.sk-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## 框架skills {#framework-skills}
 
 這些是與 **預設範本** 捆綁在一起的 skills。任何給定應用程式中可用的確切集合取決於您建置的範本 - 檢查該範本的 `.agents/skills/` 目錄以了解它實際提供的內容。
@@ -148,14 +207,64 @@ Agent-Native 執行時從 `.agents/skills/` 讀取 skills。 Claude 程式碼獨
 
 這取代了依賴 Claude 程式碼僅讀取 `.claude/skills` 的舊技巧 - `scope: dev` 使開發與執行時分割成為一流的顯式選取。
 
-```an-diagram title="哪個代理載入哪個技能" summary="範圍決定應用程式內執行時代理是否看到技能。開發技能僅對您的編碼代理可見。"
-{
-"html": "<div class=\"sc-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill\">.agents/skills/</span><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: both</span><small class=\"diagram-muted\">default</small></div><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: runtime</span></div><div class=\"sc-row\"><span class=\"diagram-pill warn\">scope: dev</span></div></div><div class=\"sc-targets\"><div class=\"diagram-box\">Runtime agent<br><small class=\"diagram-muted\">reads <code>both</code> + <code>runtime</code></small></div><div class=\"diagram-box\">編碼 Agent<br><small class=\"diagram-muted\">Claude Code reads <code>.claude/skills/</code> + <code>dev</code></small></div></div></div>",
-"css": ".sc-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.sc-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.sc-grid .sc-row{display:flex;align-items:center;gap:8px}.sc-grid .sc-targets{display:flex;flex-direction:column;gap:10px}"
-}
+<Diagram id="doc-block-s7y4j6" title={"哪個代理載入哪個技能"} summary={"範圍決定應用程式內執行時代理是否看到技能。開發技能僅對您的編碼代理可見。"}>
+
+```html
+<div class="sc-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill">.agents/skills/</span>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: both</span
+      ><small class="diagram-muted">default</small>
+    </div>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: runtime</span>
+    </div>
+    <div class="sc-row"><span class="diagram-pill warn">scope: dev</span></div>
+  </div>
+  <div class="sc-targets">
+    <div class="diagram-box">
+      Runtime agent<br /><small class="diagram-muted"
+        >reads <code>both</code> + <code>runtime</code></small
+      >
+    </div>
+    <div class="diagram-box">
+      編碼 Agent<br /><small class="diagram-muted"
+        >Claude Code reads <code>.claude/skills/</code> +
+        <code>dev</code></small
+      >
+    </div>
+  </div>
+</div>
+```
 
+```css
+.sc-grid {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.sc-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.sc-grid .sc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-grid .sc-targets {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 ```
 
+</Diagram>
+
 > **另請參閱：** [Writing Agent Instructions](/docs/writing-agent-instructions) 了解如何措辭技能描述、應用漸進式披露以及保持 `AGENTS.md` 精簡。
 
 ## Skills vs AGENTS.md {#skills-vs-agents-md}

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

@@ -18,13 +18,55 @@ description: "用簡單的英語提出分析問題，取得圖表和儀表板。
 
 它是 Amplitude、Mixpanel 和 Looker 的開放原始碼替代品——適合想要擁有程式碼、查詢和資料的團隊。
 
-```an-diagram title="問題到圖表" summary="代理查閱資料字典，寫入 SQL，根據倉庫對其進行驗證，然後渲染圖表或儲存面板。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">簡明語言<br>question</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\">reads data dictionary</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>寫入 SQL</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">Dry-run 校驗</div><small class=\"diagram-muted\">BigQuery / 來源</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">圖表、表格或<br>saved panel</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-lt7t4q" title={"問題到圖表"} summary={"代理查閱資料字典，寫入 SQL，根據倉庫對其進行驗證，然後渲染圖表或儲存面板。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">簡明語言<br />question</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">reads data dictionary</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>寫入 SQL</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">Dry-run 校驗</div>
+    <small class="diagram-muted">BigQuery / 來源</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">圖表、表格或<br />saved panel</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>
+
 ## 你可以用它做什麼
 
 - **用簡單的英語詢問資料問題。**“上個月註冊轉化為付費的比例是多少？”或“顯示過去 6 個月的每週活躍使用者數”。代理選取正確的來源，寫入 SQL，並渲染圖表。

package/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/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/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/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/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>
+
 ## 你可以用它做什麼
 
 - **使用內建錄音機、網路攝影機覆蓋、音訊捕獲和暫停/修剪來錄製螢幕**。