@agent-native/core 0.84.35 → 0.84.36

package/docs/content/locales/zh-TW/getting-started.mdx

@@ -1,259 +1,205 @@
 ---
-title: "開始使用"
-description: "建立代理應用，了解說明、skills 和 actions，然後觀看代理呼叫其第一個操作。"
+title: "入門"
+description: "建立聊天優先的 agentic app，新增 action，內嵌渲染結構化結果，然後擴展成 agent 可以開啟的持久頁面。"
 ---
 
-# 開始使用
-
-Agent-Native 應用程式為 AI 代理和您的 UI 提供相同的 actions、資料和
-狀態。基本代理是由指導它的指令（skills 進行教學）組成的
-可重複的行為，以及讓它做實際工作的 actions。
-
-**想要一個完整的應用程式開始嗎？**克隆我們豐富的範本之一 -
-[Chat](/docs/template-chat), [Mail](/docs/template-mail),
-[Calendar](/docs/template-calendar), [Content](/docs/template-content),
-[Analytics](/docs/template-analytics) 和 [many more](/docs/cloneable-saas) —
-每個都是您自訂的全功能應用程式。
-
-從頭開始建置？唯一的選取是您是否想要 UI —
-之後的一切（編寫指令、新增 skills、定義 actions、執行
-代理）無論哪種方式都是相同的。
-
-<FileTree
-  id="doc-block-15hdkha"
-  title={"一個基礎 Agent-Native 代理"}
-  entries={[
-    {
-      path: "AGENTS.md",
-      note: "始終生效的指令：目的、規則、語氣以及代理能力地圖",
-    },
-    {
-      path: ".agents/skills/customer-research/SKILL.md",
-      note: "工作匹配時代理會載入的可複用 playbook",
-    },
-    {
-      path: "actions/summarize-week.ts",
-      note: "代理、UI、CLI、HTTP、MCP、A2A、jobs 和 webhooks 都能執行的型別化程式碼",
-    },
-  ]}
-/>
-
-無論您是從聊天 UI、無頭代理還是完整應用程式開始，都是如此。
-UI 改變表面；指令、skills 和 actions 為代理提供
-指導和行為。
-
-## 1。建立您的應用
-
-您需要 [Node.js 22+](https://nodejs.org) 和 [pnpm](https://pnpm.io)。
-
-在沒有標誌的情況下執行 `create`，它會詢問您要如何開始（完整的範本，
-聊天，或無頭）先於其他：
+# 入門
 
-```bash
-npx @agent-native/core@latest create my-app
-```
+Agent-Native 用來建置 agentic applications：AI agent 和 UI 共享同一組
+[actions](/docs/actions)、SQL 資料與 application state。預設路徑不是先做
+headless agent，而是先有一個使用者能立即對話的 Chat app，然後逐步增加應用介面。
 
-或者傳遞一個標誌來跳過提示：
+建議流程：
 
-**想要 UI？** 從聊天範本開始。您將獲得一名工作代理以及
-可自訂的聊天 UI，您新增的每個操作都會自動顯示在其中：
+1. 建立 Chat app。
+2. 新增一個 action。
+3. 在聊天中用原生 inline UI 渲染 action 結果。
+4. 將資料持久化到 SQL。
+5. 新增一個頁面，讓 agent 在需要視覺化檢查時開啟。
 
-```bash
-npx @agent-native/core@latest create my-app --template chat
-```
+## 1. 建立 Chat app {#create-your-app}
 
-**只是無頭原語？**開始無頭 - 相同的 actions 和代理
-迴圈，無 UI shell：
+需要 [Node.js 22+](https://nodejs.org) 和 [pnpm](https://pnpm.io)。
 
 ```bash
-npx @agent-native/core@latest create my-agent --headless
+npx @agent-native/core@latest create my-app --template chat
+cd my-app
+pnpm install
+pnpm dev
 ```
 
-然後從您建立的資料夾安裝：
+這個模板已包含 durable chat threads、auth、live sync、`actions/` 目錄、標準的 `view-screen` 與 `navigate` actions，以及可繼續擴充的 React app。
+
+若想使用完整模板選擇器，也可以執行：
 
 ```bash
-cd my-agent # 或 my-app（如果您選取聊天範本）
-pnpm install
+npx @agent-native/core@latest create my-app
 ```
 
-從現在開始，兩者是相同的。
-
-## 2。新增操作
-
-操作是您的代理（以及您的 UI）可以呼叫的一項操作。兩個腳手架
-附帶此範例：
-
-<AnnotatedCode
-  id="doc-block-qfy4rq"
-  title={"你的第一個 action"}
-  filename="actions/hello.ts"
-  language="ts"
-  code={
-    'import { defineAction } from "@agent-native/core/action";\nimport { z } from "zod";\n\nexport default defineAction({\n  description: "從本機代理問好。",\n  schema: z.object({\n    name: z.string().default("world"),\n  }),\n  http: { method: "GET" },\n  readOnly: true,\n  run: async ({ name }) => {\n    return { message: `Hello, ${name}!` };\n  },\n});'
-  }
-  annotations={[
-    {
-      lines: "5",
-      label: "工具描述",
-      note: "代理會讀取 `description`，判斷何時把它作為工具呼叫。",
-    },
-    {
-      lines: "6-8",
-      label: "型別化契約",
-      note: "一個 zod `schema` 會校驗來自每個入口的輸入：代理、UI、HTTP、MCP 和 A2A。",
-    },
-    {
-      lines: "9",
-      label: "HTTP 動詞",
-      note: "將此操作接入自動掛載的 HTTP 端點。",
-    },
-    {
-      lines: "10",
-      label: "唯讀",
-      note: "`readOnly` 表示該操作無需核准即可安全呼叫，並且可作為查詢快取。",
-    },
-    {
-      lines: "11-13",
-      label: "單一實現",
-      note: "`run` 主體是所有介面都會執行的唯一真實來源。",
-    },
-  ]}
-/>
-
-將 `hello` 替換為您域中的第一個實際操作。您定義一次；
-每個表面都會吸收它。
-
-使用 `AGENTS.md` 作為每回合都適用的指導。使用技能時
-代理需要可重用的工作流程或域過程。在以下情況下使用操作
-代理需要一種型別化、可測試的方式來讀取資料、寫入資料、呼叫 API 或
-執行核准。
-
-## 3。執行它
-
-直接呼叫操作：
-
-```bash
-pnpm action hello --name Steve
+## 2. 新增 action {#add-an-action}
+
+Action 是 agent 與 UI 共同呼叫的一個 typed operation。可將入門範例換成 `actions/analyze-responses.ts`：它分析表單回覆並返回自訂聊天圖表的已驗證資料形狀。
+
+{/* prettier-ignore */}
+```ts
+// actions/analyze-responses.ts
+import { defineAction } from "@agent-native/core/action";
+import { z } from "zod";
+
+const responseChartResultSchema = z.object({
+  title: z.string(),
+  points: z.array(z.object({ day: z.string(), responses: z.number() })),
+});
+
+export default defineAction({
+  description: "Analyze recent form responses and render a custom chart.",
+  schema: z.object({ 
+    formId: z.string().default("demo") 
+  }),
+  outputSchema: responseChartResultSchema,
+  chatUI: { 
+    renderer: "responses.response-chart", 
+    title: "回覆圖表" 
+  },
+  readOnly: true,
+  run: async ({ formId }) => ({
+    title: `Responses for ${formId}`,
+    points: [{ day: "Mon", responses: 12 }, { day: "Tue", responses: 18 }, { day: "Wed", responses: 24 }, { day: "Thu", responses: 21 }],
+  }),
+});
 ```
 
-或請代理為您致電：
+直接執行：
 
 ```bash
-pnpm agent "Call the hello action for Steve and explain what happened."
+pnpm action analyze-responses --formId demo
 ```
 
-如果您從聊天範本開始，請執行該應用並在
-瀏覽器 - 它已經可以呼叫您定義的每個操作：
+或在瀏覽器中詢問 agent：
 
-```bash
-pnpm dev
-```
+> 分析示範表單的最新回覆。
 
-現在可以透過聊天 UI、CLI、HTTP、MCP、A2A 存取該操作
-計畫作業和 webhooks。定義一次，從任何地方呼叫。
-
-<Diagram id="doc-block-15mxp3c" title={"一個動作，每個表面"} summary={"單一 defineAction 檔案扇出到每個消費者，無需額外接線。"}>
-
-```html
-<div class="diagram-fan">
-  <div class="diagram-box" data-rough>defineAction</div>
-  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
-  <div class="diagram-surfaces">
-    <span class="diagram-pill">聊天介面</span
-    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
-    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
-    ><span class="diagram-pill">計畫工作</span
-    ><span class="diagram-pill">Webhooks</span>
-  </div>
-</div>
-```
+## 3. 內嵌渲染結果 {#render-inline}
 
-```css
-.diagram-fan {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-.diagram-fan .diagram-surfaces {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  max-width: 420px;
-}
-.diagram-fan .diagram-arrow {
-  font-size: 22px;
-  line-height: 1;
+因為 action 宣告了 `outputSchema` 與產品專屬的 `chatUI.renderer`，聊天紀錄不必把結構化資料壓成文字。然後在 app 啟動時為這個完全相同的 renderer id 註冊 React 元件，例如從 `app/root.tsx` 匯入一次 `app/chat-renderers.tsx`：
+
+{/* prettier-ignore */}
+```tsx
+import { registerActionChatRenderer, type ToolRendererProps,} from "@agent-native/core/client/chat";
+
+type ResponseChartResult = {
+  title: string;
+  points: Array<{ day: string; responses: number }>;
+};
+
+function ResponseChart({ context }: ToolRendererProps) {
+  const result = context.resultJson as ResponseChartResult;
+  const max = Math.max(...result.points.map((point) => point.responses), 1);
+  return (
+    <section className="rounded-lg border bg-card p-4">
+      <h3 className="text-sm font-medium">{result.title}</h3>
+      <div className="mt-4 flex h-32 items-end gap-2">
+        {result.points.map((point) => (
+          <div key={point.day} className="flex flex-1 flex-col items-center gap-2">
+            <div className="w-full rounded-t bg-primary" style={{ height: `${(point.responses / max) * 100}%` }} />
+            <span className="text-xs text-muted-foreground">{point.day}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
 }
+
+registerActionChatRenderer({
+  id: "responses.response-chart",
+  renderer: "responses.response-chart",
+  Component: ResponseChart,
+});
 ```
 
-</Diagram>
+對於可重用的通用輸出，framework 也提供內建 `data-chart` 與 `data-table` renderers，以及用於組合摘要/圖表/表格卡片的 `data-insights`。更多模式請見 [Native Chat UI](/docs/native-chat-ui)。
 
-## 狀態是內建的
+<WireframeBlock id="doc-block-inline-result-wireframe-zh-tw">
+  <Screen
+    surface="desktop"
+    html={
+      "<div style='min-height:340px;box-sizing:border-box;padding:24px;display:flex;justify-content:center;align-items:center;background:var(--wf-bg)'><div style='width:min(530px,100%);display:flex;flex-direction:column;gap:14px'><div class='wf-card' data-rough style='align-self:flex-end;max-width:70%;padding:12px 14px'><strong>User</strong><p style='margin:6px 0 0'>分析示範回覆。</p></div><div class='wf-card' data-rough style='align-self:flex-start;width:min(370px,100%);padding:14px'><strong>Agent</strong><p class='wf-muted' style='margin:6px 0 12px'>由 responses.response-chart 渲染。</p><section class='wf-card' data-rough style='padding:14px'><h3 style='margin:0 0 12px;font-size:14px'>回覆圖表</h3><div data-rough='line:bottom' style='height:104px;display:flex;align-items:end;gap:8px;border-bottom:1.4px solid var(--wf-line);padding-bottom:4px'><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:38px;width:100%;background:color-mix(in srgb, var(--wf-accent) 24%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>週一</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:62px;width:100%;background:color-mix(in srgb, var(--wf-accent) 30%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>週二</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:86px;width:100%;background:color-mix(in srgb, var(--wf-accent) 36%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>週三</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:54px;width:100%;background:color-mix(in srgb, var(--wf-accent) 42%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>週四</span></div></div></section></div></div></div>"
+    }
+  />
+</WireframeBlock>
 
-無頭並不意味著無狀態。 Actions，工作階段，應用程式狀態，對話串，
-執行歷史紀錄和憑證均位於 SQL 中。本機地址為 SQLite
-`data/app.db`；在正式環境中您設定 `DATABASE_URL`。請參閱
-[Deployment](/docs/deployment).
+## 4. 持久化資料 {#persist-data}
 
-<Callout id="doc-block-18zpg29" tone="info">
+當結果需要回看、比較或更新時，將資料寫入 SQL。為 回覆洞察 新增 schema，並把讀寫都放在 actions 後面：
 
-**Headless 仍然是一個真正的應用程式。**應用程式代理迴圈在 SQL 中保留工作階段、對話串、執行、設定和憑證 - 它不是無狀態提示。您可以稍後新增 UI，而無需更改操作或狀態。
+用 framework 的可移植 helpers 定義資料表，不要直接從 `drizzle-orm/sqlite-core` 或 `drizzle-orm/pg-core` 匯入：
 
-</Callout>
+```ts
+// server/db/schema.ts
+import { integer, now, table, text } from "@agent-native/core/db/schema";
 
-## 自訂 UI
+export const responseInsights = table("response_insights", {
+  id: text("id").primaryKey(),
+  formId: text("form_id").notNull(),
+  title: text("title").notNull(),
+  summary: text("summary").notNull(),
+  responseCount: integer("response_count").notNull(),
+  createdAt: text("created_at").notNull().default(now()),
+  updatedAt: text("updated_at").notNull().default(now()),
+});
+```
 
-如果您從聊天範本開始，則可以編輯 UI。聊天本身
-是基於 `<AgentChatSurface>` 元件建置的一條小路由：
+這些 helpers 會選擇目前設定的 SQL backend，因此同一份 schema 可以在本機 SQLite 上執行，也可以在 production 的 Postgres、Turso/libSQL、D1 或其他支援的 SQL provider 上執行。
 
-```tsx
-// app/routes/_index.tsx
-import { AgentChatSurface } from "@agent-native/core/client";
+- `create-response-insight` 寫入新的 insight。
+- `list-response-insights` 為頁面讀取資料。
+- `update-response-insight` 在 agent 學到更多後更新記錄。
+- `analyze-responses` 繼續返回聊天中的原生 widget。
 
-export default function ChatRoute() {
-  return <AgentChatSurface mode="page" className="h-full" />;
-}
-```
+不要為瀏覽器另外寫一條重複的 REST route；UI 和 agent 應共享 actions。
+
+## 5. 新增 agent 可以開啟的頁面 {#add-a-page}
+
+新增 `/response-insights` route，用 `useActionQuery("list-response-insights")` 讀取資料，用 `useActionMutation("create-response-insight")` 觸發分析。這個頁面只是 SQL state 的投影；資料仍由同一組 actions 寫入。
 
-- **`app/routes/_index.tsx`** — 聊天頁面。更改建議，空
-  狀態和布局。
-- **`app/root.tsx`** — 應用程式外殼。在週圍新增您自己的路由和螢幕
-  代理。
-- 使用 `<AgentSidebar>` 將代理放入任何螢幕，從 a 手動操作它
-  使用 `sendToAgentChat()` 按鈕，或直接使用
-  `useActionMutation()`.
+<WireframeBlock id="doc-block-response-insights-page-wireframe-zh-tw">
+  <Screen
+    surface="desktop"
+    html={
+      "<main style='min-height:440px;box-sizing:border-box;padding:28px;background:var(--wf-bg)'><section style='max-width:960px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch'><section class='wf-card' data-rough style='display:flex;flex-direction:column;gap:16px'><header><h2 style='margin:0 0 4px;font-size:28px'>回覆洞察</h2><p class='wf-muted' style='margin:0'>Agent 從表單回覆建立的洞察。</p></header><button class='primary' data-rough style='align-self:flex-start'>分析示範表單</button><section style='display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px'><article class='wf-box' data-rough style='padding:12px'><strong>定價主題</strong><p class='wf-muted' style='margin:8px 0 0'>使用者想要團隊方案。</p></article><article class='wf-box' data-rough style='padding:12px'><strong>導入流程流失</strong><p class='wf-muted' style='margin:8px 0 0'>三個步驟需要更清楚的文案。</p></article></section><section class='wf-card' data-rough style='display:flex;flex-direction:column;gap:10px'><div class='wf-row wf-box' data-rough style='padding:10px 12px;gap:12px;justify-content:space-between'><strong>示範表單</strong><span class='wf-muted'>已分析 42 則回覆</span></div><div class='wf-row wf-box' data-rough style='padding:10px 12px;gap:12px;justify-content:space-between'><strong>下一步</strong><span class='wf-muted'>檢視兩個洞察草稿</span></div></section></section><aside class='wf-card' data-rough style='height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:12px'><strong>聊天</strong><div class='wf-box' data-rough style='align-self:flex-end;max-width:210px;padding:10px 12px'><span class='wf-muted'>你</span><p style='margin:4px 0 0'>開啟回覆洞察。</p></div><div class='wf-box' data-rough style='align-self:flex-start;max-width:210px;padding:10px 12px'><span class='wf-muted'>Agent</span><p style='margin:4px 0 0'>已開啟回覆洞察。</p></div></aside></section></main>"
+    }
+  />
+</WireframeBlock>
 
-請參閱 [Drop-in Agent](/docs/drop-in-agent) 了解完整的元件集，並且
-[Native 聊天介面](/docs/native-chat-ui) 將操作結果呈現為表格，
-圖表和打字卡片而不是純文字。
+擴充 `view-screen` 和 `navigate`：
 
-**開始無頭，稍後想要 UI？** 聊天範本*是* UI 入口 -
-它的`app/`層（React Router + Vite）正是無頭腳手架
-省略。最幹淨的舉動是從聊天開始（或重新搭建支架）
-範本；您的 `actions/`、代理和 SQL 狀態保持不變。請參閱
-[Agent Surfaces](/docs/agent-surfaces) 代表其間的每個表面。
+- `view-screen` 返回目前 route、選中的 insight 和頁面上下文。
+- `navigate` 寫入 `/response-insights` 這類同源 path。
+- action 結果可以包含 `href: "/response-insights"`，讓聊天顯示「開啟回覆洞察」按鈕。
 
-## 專案結構
+當完整聊天頁開啟 app 頁面時，使用 [Agent Surfaces](/docs/agent-surfaces#rich-chat) 中的 `AgentChatSurface`、`AgentSidebar`、`useAgentChatHomeHandoff`、`useAgentChatHomeHandoffLinks` 和 `chatViewTransition`，讓聊天滑到側邊欄並保留同一個 thread。
+
+## 專案結構 {#project-structure}
 
 ```text
 my-app/
-  actions/         # 代理可呼叫的操作
-  app/             # React 前端（僅 UI 範本；無頭模式會省略）
-  server/          # Nitro API 伺服器（路由、外掛）
-  AGENTS.md        # 始終生效的代理指令
-  .agents/         # 代理可按需引入的技能
+  actions/         # Agent 和介面都可呼叫的操作
+  app/             # React 路由、頁面與聊天介面
+  server/          # Nitro 伺服器與 SQL 架構
+  AGENTS.md        # 應用 Agent 的常駐指令
+  .agents/         # Agent 在相關情境載入的技能
   data/app.db      # 未設定 DATABASE_URL 時的本機 SQLite 狀態
 ```
 
-## 下一步去哪裡
-
-- **[Key Concepts](/docs/key-concepts)** — 核心架構：SQL、actions，
-  同步和脈絡感知。
-- **[Actions](/docs/actions)** — 完整操作 API：架構、HTTP、驗證和
-  核准。
-- **[Agent Surfaces](/docs/agent-surfaces)** — 無頭、聊天、嵌入式 sidecar，
-  和完整的應用程式。
-- **[Drop-in Agent](/docs/drop-in-agent)** — 將代理聊天新增到任何 React 應用程式。
-- **[Deployment](/docs/deployment)** — 將您的應用放在您自己的域中。
-- **[FAQ](/docs/faq)** — 設定和產品問題。
+## 想要完整的 Analytics 起點？ {#analytics-starting-point}
+
+上面的 回覆洞察 範例刻意保持很小，方便你看清框架部件。如果你要建置真正的 analytics 產品，請從 [Analytics](/docs/template-analytics) 開始。它是更強健的起點：連接 providers，使用現有 dashboards 與 agent actions，然後繼續自訂。
+
+## 下一步 {#next}
+
+- **[Actions](/docs/actions)** — schemas、auth、approvals、hooks 與 transport。
+- **[Native Chat UI](/docs/native-chat-ui)** — 將 action 結果渲染成表格、圖表與 typed cards。
+- **[Chat Template](/docs/template-chat)** — 最小聊天優先 app。
+- **[Analytics Template](/docs/template-analytics)** — 強健的 analytics app 起點；連接 providers 後繼續自訂。
+- **[Context Awareness](/docs/context-awareness)** — `view-screen`、`navigate`、route state 與選中物件。
+- **[Agent Surfaces](/docs/agent-surfaces)** — chat、inline UI、app pages、embedded sidecars、automation 與外部 agent。

package/docs/content/locales/zh-TW/pure-agent-apps.mdx

@@ -1,16 +1,11 @@
 ---
-title: "純代理應用"
-description: "代理是整個產品的應用程式：應用程式代理迴圈是前門，僅在人們需要時才新增 UI。"
+title: "Automation-First Apps"
+description: "用於 scheduled jobs、queues、scripts、integration workers 和外部 agents 的無瀏覽器 Agent-Native apps。"
 ---
 
-# 純代理應用
+# Automation-First Apps
 
-純代理應用程式是 Agent-Native 的最小端：應用程式代理迴圈是
-產品，而不是儀表板。您從終端、Slack、電子郵件、
-預定的工作、另一個代理或聊天 - “總結我未讀的電子郵件”、“發布
-每日指標為 Slack” - 代理會在任何地方執行操作並返回結果
-屬於。它仍然是一個真實的應用程式：actions、工作階段、應用程式狀態、歷史紀錄，
-設定、憑證和共用紀錄均位於 SQL 中。
+Automation-first app 是無瀏覽器的 Agent-Native app，用於 scheduled jobs、queues、scripts、integration workers 和外部 agents。它不是預設入門路徑，但在工作流程暫時不需要頁面時很有用。它仍然是一個真實的應用程式：actions、sessions、application state、run history、settings、credentials 和共享紀錄均位於 SQL 中。
 
 <Diagram id="doc-block-1yekfb" title={"應用程式代理迴圈是前門"} summary={"許多入口點透過 SQL-backed 操作和狀態到達一個代理迴圈；結果返回到請求來自的地方。僅當需要人類監督時才新增 UI。"}>
 

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

@@ -7,7 +7,7 @@ description: "一個最小的聊天優先 Agent-Native 應用程式：持久的
 
 聊天是基本的 Agent-Native 應用程式起點。它為您提供了一個幹淨的 ChatGPT 風格的 shell，聊天位於中心，對話串清單位於左側，標準應用程式導覽、驗證、即時同步、actions 和一個範例操作。當您想要一個無需提交域範本即可建置的真正的瀏覽器應用程式時，請從這裡開始。
 
-如果您想要最小的僅操作執行時且沒有瀏覽器 UI，請從 [Pure-Agent Apps](/docs/pure-agent-apps) 開始。如果您想要成品域產品形狀，請從 [Calendar](/docs/template-calendar)、[Mail](/docs/template-mail)、[Content](/docs/template-content)、[Forms](/docs/template-forms)、[Analytics](/docs/template-analytics) 或其他域範本開始。
+如果您想要沒有瀏覽器 UI 的 automation-first runtime，請從 [Automation-First Apps](/docs/pure-agent-apps) 開始。如果您想要成品域產品形狀，請從 [Calendar](/docs/template-calendar)、[Mail](/docs/template-mail)、[Content](/docs/template-content)、[Forms](/docs/template-forms)、[Analytics](/docs/template-analytics) 或其他域範本開始。
 
 <WireframeBlock id="doc-block-osxhcg">
   <Screen
@@ -198,4 +198,4 @@ export default function ChatRoute() {
 - [**Agent Surfaces**](/docs/agent-surfaces) — 無頭、聊天、嵌入式和完整應用模式
 - [**Actions**](/docs/actions) - 操作系統聊天和 UI 都呼叫
 - [**Native 聊天介面**](/docs/native-chat-ui) — 聊天介面基元和執行時選項
-- [**Pure-Agent Apps**](/docs/pure-agent-apps) - 僅限操作的應用程式，稍後可以發展為聊天
+- [**Automation-First Apps**](/docs/pure-agent-apps) - 沒有瀏覽器 UI 的自動化、佇列、腳本和外部 agent 工作流程

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

@@ -99,7 +99,7 @@ agent-native 背後的定義思想是，agent 和 UI 是**平等的伙伴** -
 
 並非每個應用程式都需要完整的儀表板。當代理*是*產品時，您可以跳過大部分自訂 UI：開啟應用程式，詢問您想要的內容，然後讓代理完成其餘的工作。代理仍然有其管理介面——歷史紀錄、工作區、設定——但主要互動是對話而不是點選。
 
-→ [**Pure-Agent Apps**](/docs/pure-agent-apps) — 代理是整個產品的應用。
+→ [**Automation-First Apps**](/docs/pure-agent-apps) — 用於 jobs、queues、scripts 和外部 agents 的無瀏覽器應用。
 
 ## 您與它共同編輯 {#you-co-edit}
 
@@ -113,5 +113,5 @@ agent-native 背後的定義思想是，agent 和 UI 是**平等的伙伴** -
 - [**Agent Mentions**](/docs/agent-mentions) — 使用 `@` 提及來引導
 - [**Voice Input**](/docs/voice-input) — 透過說話進行指導
 - [**Drop-in Agent**](/docs/drop-in-agent) — 將其嵌入任何 React 應用
-- [**Pure-Agent Apps**](/docs/pure-agent-apps) — 當代理是產品時，采用 輕 UI
+- [**Automation-First Apps**](/docs/pure-agent-apps) — 用於 jobs、queues、scripts 和外部 agents 的無瀏覽器應用
 - [**Real-Time Collaboration**](/docs/real-time-collaboration) — 共同編輯同一檔案

package/docs/content/native-chat-ui.mdx

@@ -45,7 +45,7 @@ Copilot, or Cursor should render an inline route from your app.
   <div class="diagram-card col">
     <div class="diagram-pill ok">DataTable</div>
     <div class="diagram-pill ok">DataChart</div>
-    <div class="diagram-pill ok">DataInsights</div>
+    <div class="diagram-pill ok">Combined card</div>
   </div>
 </div>
 ```
@@ -90,9 +90,9 @@ matching payload:
 
 | Widget            | Required payload             | Renders as                                      |
 | ----------------- | ---------------------------- | ----------------------------------------------- |
-| `"data-table"`    | `table`                      | A native, reusable data table                   |
 | `"data-chart"`    | `chartSeries`                | A native bar, line, or area chart               |
-| `"data-insights"` | `table` and/or `chartSeries` | A combined insight card with chart/table output |
+| `"data-table"`    | `table`                      | A native, reusable data table for SQL/list rows |
+| `"data-insights"` | `table` and/or `chartSeries` | A combined insight card for summary dashboards  |
 
 Server actions should import the server-safe helpers and schemas from
 `@agent-native/core/data-widgets`; client code can import the same types from
@@ -100,31 +100,22 @@ Server actions should import the server-safe helpers and schemas from
 
 ```ts
 import { defineAction } from "@agent-native/core/action";
-import { ACTION_CHAT_UI_DATA_INSIGHTS_RENDERER } from "@agent-native/core/action-ui";
+import { ACTION_CHAT_UI_DATA_CHART_RENDERER } from "@agent-native/core/action-ui";
 import {
-  createDataInsightsWidgetResult,
-  dataInsightsWidgetResultSchema,
+  createDataChartWidgetResult,
+  dataChartWidgetResultSchema,
 } from "@agent-native/core/data-widgets";
 
 export default defineAction({
-  description: "Analyze form responses.",
+  description: "Chart form responses.",
   readOnly: true,
-  outputSchema: dataInsightsWidgetResultSchema,
+  outputSchema: dataChartWidgetResultSchema,
   chatUI: {
-    renderer: ACTION_CHAT_UI_DATA_INSIGHTS_RENDERER,
-    title: "Response insights",
+    renderer: ACTION_CHAT_UI_DATA_CHART_RENDERER,
+    title: "Response chart",
   },
   run: async () =>
-    createDataInsightsWidgetResult({
-      title: "Response insights",
-      display: {
-        title: "42 responses",
-        description: "Completion rate rose this week.",
-        primaryAction: {
-          label: "Open response insights",
-          href: "/response-insights",
-        },
-      },
+    createDataChartWidgetResult({
       chartSeries: {
         type: "bar",
         title: "Responses by day",
@@ -135,22 +126,16 @@ export default defineAction({
           { day: "Tue", responses: 13 },
         ],
       },
-      table: {
-        title: "Top answers",
-        columns: [
-          { key: "answer", label: "Answer" },
-          { key: "count", label: "Count", align: "right" },
-        ],
-        rows: [
-          { answer: "Yes", count: 31 },
-          { answer: "No", count: 11 },
-        ],
-        totalRows: 2,
-      },
     }),
 });
 ```
 
+Use the same pattern with `ACTION_CHAT_UI_DATA_TABLE_RENDERER`,
+`createDataTableWidgetResult`, and `dataTableWidgetResultSchema` when an action
+returns SQL or list rows. Use `ACTION_CHAT_UI_DATA_INSIGHTS_RENDERER` and
+`createDataInsightsWidgetResult` for a deliberate combined summary card that may
+include scalar `summary` values, a chart, a table, and `display.primaryAction`.
+
 <Callout id="doc-block-1f4si4a" tone="success">
 
 The renderer only takes over when the action declares `chatUI` **or** the result carries an explicit known `widget` discriminant. It never shape-infers arbitrary objects and never executes HTML or JavaScript from tool results — so a native widget can't become an injection vector.