diff --git a/.changeset/clear-weapp-preview.md b/.changeset/clear-weapp-preview.md
new file mode 100644
index 00000000..ec5f737e
--- /dev/null
+++ b/.changeset/clear-weapp-preview.md
@@ -0,0 +1,7 @@
+---
+"@varo-ui/weapp": patch
+"@varo-ui/cli": patch
+"@varo-ui/theme": patch
+---
+
+Upgrade Wevu 7 and weapp-vite 7 without pinning patch versions, restyle Weapp Agent UI status variants with class modifiers, add a private Web preview for compiled mini-program artifacts, and keep Weapp theme variables out of weapp-vite sidecar JavaScript wrappers.
diff --git a/.changeset/spotty-geckos-flow.md b/.changeset/spotty-geckos-flow.md
new file mode 100644
index 00000000..85802d16
--- /dev/null
+++ b/.changeset/spotty-geckos-flow.md
@@ -0,0 +1,5 @@
+---
+"@varo-ui/cli": patch
+---
+
+Fix native input length defaults and recursive Markdown layout and accessibility.
diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts
index 76d70ebc..dfd4750d 100644
--- a/apps/docs/.vitepress/config.ts
+++ b/apps/docs/.vitepress/config.ts
@@ -195,6 +195,7 @@ export default defineConfig({
                   { text: 'AgentAttachmentList', link: '/ai/attachments' },
                   { text: 'AgentSourceList', link: '/ai/sources' },
                   { text: 'AgentCitations', link: '/ai/citations' },
+                  { text: 'AgentRagPipeline', link: '/ai/rag-pipeline' },
                   { text: 'AgentContextCard', link: '/ai/context-card' },
                   { text: 'AgentCodeBlock', link: '/ai/code-block' },
                   { text: 'AgentFileDiff', link: '/ai/file-diff' },
@@ -407,6 +408,7 @@ export default defineConfig({
                   { text: 'AgentAttachmentList', link: '/en/ai/attachments' },
                   { text: 'AgentSourceList', link: '/en/ai/sources' },
                   { text: 'AgentCitations', link: '/en/ai/citations' },
+                  { text: 'AgentRagPipeline', link: '/en/ai/rag-pipeline' },
                   { text: 'AgentContextCard', link: '/en/ai/context-card' },
                   { text: 'AgentCodeBlock', link: '/en/ai/code-block' },
                   { text: 'AgentFileDiff', link: '/en/ai/file-diff' },
diff --git a/apps/docs/.vitepress/theme/agent-docs.css b/apps/docs/.vitepress/theme/agent-docs.css
index eadfb681..a58f45ae 100644
--- a/apps/docs/.vitepress/theme/agent-docs.css
+++ b/apps/docs/.vitepress/theme/agent-docs.css
@@ -28,11 +28,9 @@
 
 .dark .agent-component-demo .agent-message-scroller,
 .dark .agent-component-demo .agent-file-diff,
-.dark .agent-component-demo .agent-tool-result,
 .dark .agent-component-demo .agent-citations,
 .dark .agent-component-demo .agent-activity,
 .dark .agent-component-demo .agent-context-card,
-.dark .agent-component-demo .agent-insight-card,
 .dark .agent-component-demo .agent-tool-approval,
 .dark .agent-component-demo .agent-fine-tune,
 .dark .agent-component-demo .agent-sidebar,
@@ -45,13 +43,13 @@
   border-color: var(--varo-border) !important;
 }
 
-.dark .agent-component-demo .agent-sidebar > header,
-.dark .agent-component-demo .agent-flowchart > header,
-.dark .agent-component-demo .agent-command-search > label,
+.dark .agent-component-demo .agent-sidebar__header,
+.dark .agent-component-demo .agent-flowchart__header,
+.dark .agent-component-demo .agent-command-search__field,
 .dark .agent-component-demo .agent-activity > header,
 .dark .agent-component-demo .agent-context-card > header,
 .dark .agent-component-demo .agent-insight-card > header,
-.dark .agent-component-demo .agent-fine-tune > header {
+.dark .agent-component-demo .agent-fine-tune__header {
   color: var(--varo-foreground) !important;
   background: var(--varo-surface-strong) !important;
   border-color: var(--varo-border) !important;
@@ -77,12 +75,10 @@
 
 .dark .agent-component-demo .agent-radio-group__item,
 .dark .agent-component-demo .agent-file-diff__header,
-.dark .agent-component-demo .agent-tool-result__header,
 .dark .agent-component-demo .agent-citations__trigger,
-.dark .agent-component-demo .agent-context-card article,
 .dark .agent-component-demo .agent-sidebar__item[data-active='true'],
 .dark .agent-component-demo .agent-flowchart__node,
-.dark .agent-component-demo .agent-command-search > div button:hover {
+.dark .agent-component-demo .agent-command-search__item:hover {
   color: var(--varo-foreground);
   background: var(--varo-surface-strong);
   border-color: var(--varo-border);
diff --git a/apps/docs/.vitepress/theme/index.ts b/apps/docs/.vitepress/theme/index.ts
index 6cb44581..a33519e5 100644
--- a/apps/docs/.vitepress/theme/index.ts
+++ b/apps/docs/.vitepress/theme/index.ts
@@ -31,14 +31,15 @@ import AgentComponentsDemo from '../../src/components/AgentComponentsDemo.vue'
 import ComponentCatalog from '../../src/components/ComponentCatalog.vue'
 import FormComponentDemo from '../../src/components/FormComponentDemo.vue'
 import InteractivePreview from '../../src/components/InteractivePreview.vue'
+import MapDemo from '../../src/components/MapDemo.vue'
 import MiniProgramBlocksGallery from '../../src/components/MiniProgramBlocksGallery.vue'
 import PlatformTabsDemo from '../../src/components/PlatformTabsDemo.vue'
 import PrimitiveCatalog from '../../src/components/PrimitiveCatalog.vue'
 import PrimitiveExample from '../../src/components/PrimitiveExample.vue'
 import PrimitiveInteractionDemo from '../../src/components/PrimitiveInteractionDemo.vue'
-import RegionPickerDemo from '../../src/components/RegionPickerDemo.vue'
 import RegistryCoverageEvidence from '../../src/components/RegistryCoverageEvidence.vue'
 import RegistryInstallStrip from '../../src/components/RegistryInstallStrip.vue'
+import RobotChatDemo from '../../src/components/RobotChatDemo.vue'
 import DocsLayout from './DocsLayout.vue'
 import '@varo-ui/h5/source/style.css'
 import './tailwind.css'
@@ -55,8 +56,9 @@ const theme: Theme = {
     app.component('InteractivePreview', InteractivePreview)
     app.component('ComponentCatalog', ComponentCatalog)
     app.component('MiniProgramBlocksGallery', MiniProgramBlocksGallery)
+    app.component('MapDemo', MapDemo)
+    app.component('RobotChatDemo', RobotChatDemo)
     app.component('PlatformTabsDemo', PlatformTabsDemo)
-    app.component('RegionPickerDemo', RegionPickerDemo)
     app.component('PrimitiveCatalog', PrimitiveCatalog)
     app.component('PrimitiveExample', PrimitiveExample)
     app.component('RegistryInstallStrip', RegistryInstallStrip)
diff --git a/apps/docs/ai/index.md b/apps/docs/ai/index.md
index 8b96fa04..0d4c19b8 100644
--- a/apps/docs/ai/index.md
+++ b/apps/docs/ai/index.md
@@ -71,7 +71,7 @@ pnpm dlx @varo-ui/cli add --target weapp blocks/agent-workspace
 | [AgentSourceList](./sources)               | 来源列表                             |
 | [AgentCitations](./citations)              | 可折叠引用集合                       |
 | `AgentRetrievalProgress`                   | 可见检索队列与失败重试               |
-| `AgentRagPipeline`                         | 五阶段 RAG、上下文组装与流式引用联动 |
+| [AgentRagPipeline](./rag-pipeline)         | 五阶段 RAG、上下文组装与流式引用联动 |
 | `AgentSourceReceipt`                       | 回答完成后的来源读取回执             |
 | [AgentContextCard](./context-card)         | 检索知识块                           |
 | [AgentCodeBlock](./code-block)             | 独立流式代码块                       |
@@ -119,7 +119,7 @@ pnpm dlx @varo-ui/cli add --target weapp blocks/agent-workspace
 
 H5 自动遵循 `prefers-reduced-motion`，小程序同时提供 `reducedMotion` 属性与媒体查询样式。动效使用主题中的 `--varo-agent-motion-*` 变量以及 transform/opacity，不引入动画运行时依赖。
 
-`AgentWorkspace` 的 `execution` 插槽可放入此组件，替换默认的对话、检索、任务与回执区域；来源授权、版本与输入区仍由 Workspace 组合。Weapp 的 `weapp-vite` 配置应设置 `weapp.vue.template.scopedSlotsRequireProps: true`，让没有插槽参数的 `#execution` 保持普通命名插槽，避免 7.0.4 的泛型插槽自动 `setData.pick` 遗漏父级状态。两端 playground 提供可取消、重播的演示数据流程。
+`AgentWorkspace` 的 `execution` 插槽可放入此组件，替换默认的对话、检索、任务与回执区域；来源授权、版本与输入区仍由 Workspace 组合。Weapp 的 `weapp-vite` 配置应设置 `weapp.vue.template.scopedSlotsRequireProps: true`，让没有插槽参数的 `#execution` 保持普通命名插槽，避免泛型插槽自动 `setData.pick` 遗漏父级状态。两端 playground 提供可取消、重播的演示数据流程。
 
 ## 完整 Block
 
diff --git a/apps/docs/ai/rag-pipeline.md b/apps/docs/ai/rag-pipeline.md
new file mode 100644
index 00000000..7c51fed4
--- /dev/null
+++ b/apps/docs/ai/rag-pipeline.md
@@ -0,0 +1,66 @@
+# AgentRagPipeline
+
+五阶段检索增强生成：进度、来源卡片，以及可追溯到来源的引用回答。
+
+## 案例
+
+<AgentComponentDemo component="rag-pipeline" locale="zh" />
+
+## 安装
+
+```bash
+pnpm add @varo-ui/ai
+pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
+pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
+```
+
+UI 组件由 Registry 安装到项目本地，因此从 `@/components/agent-ui` 导入；`@varo-ui/ai` 只提供事件协议、流控制和 Markdown 能力，不导出 Vue/Wevu UI 组件。`AgentRagPipeline` 只投影受控快照，不执行检索、模型请求或来源授权。
+
+## 基础用法
+
+```vue
+<script setup lang="ts">
+import { AgentRagPipeline } from '@/components/agent-ui'
+</script>
+
+<template>
+  <AgentRagPipeline
+    :query="query"
+    :steps="steps"
+    :sources="sources"
+    :answer="answer"
+    @run="run"
+    @cancel="cancel"
+    @select-source="selectSource"
+  />
+</template>
+```
+
+## Props
+
+| Prop            | Type                   | Default        | 说明               |
+| --------------- | ---------------------- | -------------- | ------------------ |
+| `query`         | `string`               | `''`           | 当前查询           |
+| `steps`         | `AgentRagStep[]`       | `[]`           | 五阶段进度         |
+| `sources`       | `AgentRagSource[]`     | `[]`           | 检索来源           |
+| `answer`        | `AgentRagAnswerPart[]` | `[]`           | 文本片段与引用来源 |
+| `title`         | `string`               | `检索增强生成` | 标题               |
+| `elapsedMs`     | `number`               | `undefined`    | 总耗时             |
+| `reducedMotion` | `boolean`              | `false`        | 关闭非必要动效     |
+
+## Events
+
+| Event          | Payload          | 说明         |
+| -------------- | ---------------- | ------------ |
+| `run`          | `void`           | 开始或重跑   |
+| `cancel`       | `void`           | 停止当前流程 |
+| `selectSource` | `AgentRagSource` | 选中某个来源 |
+
+## 平台差异
+
+| Target | Import                                                  |
+| ------ | ------------------------------------------------------- |
+| H5     | Named export from `@/components/agent-ui`               |
+| weapp  | 默认导出自 `@/components/agent-ui/AgentRagPipeline.vue` |
+
+组件 API 在两个目标保持一致；DOM/WXML、调度和原生事件由目标实现负责。文档演示使用本地快照，不调用模型或检索服务。
diff --git a/apps/docs/components/map.md b/apps/docs/components/map.md
index 32298f71..ce42c344 100644
--- a/apps/docs/components/map.md
+++ b/apps/docs/components/map.md
@@ -2,7 +2,11 @@
 
 `VMap` 是微信小程序原生 `<map>` 的类型化 Wevu 封装，统一尺寸、地图能力和事件命名。该组件仅支持 `weapp` target；业务接口、位置权限和地图 Context 仍由页面负责。
 
-<RegistryInstallStrip item="components/map" :targets="['weapp']" :wrapper-targets="[]" locale="zh" />
+## 演示
+
+<MapDemo locale="zh" />
+
+文档站不能跑微信客户端同层地图。演示用腾讯地图 JS API GL 展示同一套 VMap 契约：中心点、标记和 `regionchange`。定位权限和 Map Context 仍只在小程序运行时可用。
 
 ## 使用
 
diff --git a/apps/docs/components/robot-chat.md b/apps/docs/components/robot-chat.md
index 02694cea..dac2d7a0 100644
--- a/apps/docs/components/robot-chat.md
+++ b/apps/docs/components/robot-chat.md
@@ -4,6 +4,12 @@
 
 <RegistryInstallStrip item="components/robot-chat" :targets="['weapp']" :wrapper-targets="[]" locale="zh" />
 
+## 演示
+
+<RobotChatDemo locale="zh" />
+
+文档站不能加载 chatbotwidget。演示画出欢迎语、operateCard、发送和 `queryCallback`。这是 Web Preview 的可见宿主，不是微信对话开放平台。
+
 ## 前置配置
 
 小程序需先开通插件，并在 `app.json` 中使用固定别名 `varoRobot`：
diff --git a/apps/docs/en/ai/index.md b/apps/docs/en/ai/index.md
index 601af693..9d95699f 100644
--- a/apps/docs/en/ai/index.md
+++ b/apps/docs/en/ai/index.md
@@ -71,7 +71,7 @@ pnpm dlx @varo-ui/cli add --target weapp blocks/agent-workspace
 | [AgentSourceList](./sources)               | Source list                                                      |
 | [AgentCitations](./citations)              | Collapsible citations                                            |
 | `AgentRetrievalProgress`                   | Visible retrieval queue and failed-item retry                    |
-| `AgentRagPipeline`                         | Five-stage RAG, context assembly, and linked streaming citations |
+| [AgentRagPipeline](./rag-pipeline)         | Five-stage RAG, context assembly, and linked streaming citations |
 | `AgentSourceReceipt`                       | Post-answer source read receipt                                  |
 | [AgentContextCard](./context-card)         | Retrieved knowledge chunks                                       |
 | [AgentCodeBlock](./code-block)             | Standalone streaming code block                                  |
@@ -119,7 +119,7 @@ A newly arriving citation briefly highlights its source and context segment. H5
 
 H5 follows `prefers-reduced-motion` automatically. Weapp provides the `reducedMotion` prop and media-query styles. Motion uses theme `--varo-agent-motion-*` variables with transform/opacity and adds no animation runtime dependency.
 
-Place the component in the `AgentWorkspace` `execution` slot to replace its default conversation, retrieval, task, and receipt region while retaining source permissions, thread versions, and input. In Weapp, set `weapp.vue.template.scopedSlotsRequireProps: true` in the `weapp-vite` configuration so a `#execution` slot without scope parameters remains an ordinary named slot. This avoids version 7.0.4's generic-slot automatic `setData.pick` omitting parent state. Both playgrounds provide a cancellable, replayable demo-data flow.
+Place the component in the `AgentWorkspace` `execution` slot to replace its default conversation, retrieval, task, and receipt region while retaining source permissions, thread versions, and input. In Weapp, set `weapp.vue.template.scopedSlotsRequireProps: true` in the `weapp-vite` configuration so a `#execution` slot without scope parameters remains an ordinary named slot. This avoids generic-slot automatic `setData.pick` omitting parent state. Both playgrounds provide a cancellable, replayable demo-data flow.
 
 ## Complete Block
 
diff --git a/apps/docs/en/ai/rag-pipeline.md b/apps/docs/en/ai/rag-pipeline.md
new file mode 100644
index 00000000..4975e129
--- /dev/null
+++ b/apps/docs/en/ai/rag-pipeline.md
@@ -0,0 +1,66 @@
+# AgentRagPipeline
+
+Five-stage retrieval-augmented generation: progress, source cards, and citations that point back to sources.
+
+## Demo
+
+<AgentComponentDemo component="rag-pipeline" locale="en" />
+
+## Install
+
+```bash
+pnpm add @varo-ui/ai
+pnpm dlx @varo-ui/cli add --target h5 components/agent-ui
+pnpm dlx @varo-ui/cli add --target weapp components/agent-ui
+```
+
+Registry installs the UI component into your project, so import it from `@/components/agent-ui`; `@varo-ui/ai` provides the event protocol, stream controller, and Markdown primitives—not Vue/Wevu UI components. `AgentRagPipeline` projects a controlled snapshot; it does not retrieve, call a model, or authorize sources.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { AgentRagPipeline } from '@/components/agent-ui'
+</script>
+
+<template>
+  <AgentRagPipeline
+    :query="query"
+    :steps="steps"
+    :sources="sources"
+    :answer="answer"
+    @run="run"
+    @cancel="cancel"
+    @select-source="selectSource"
+  />
+</template>
+```
+
+## Props
+
+| Prop            | Type                   | Default        | Description                         |
+| --------------- | ---------------------- | -------------- | ----------------------------------- |
+| `query`         | `string`               | `''`           | Current query                       |
+| `steps`         | `AgentRagStep[]`       | `[]`           | Five-stage progress                 |
+| `sources`       | `AgentRagSource[]`     | `[]`           | Retrieved sources                   |
+| `answer`        | `AgentRagAnswerPart[]` | `[]`           | Text fragments and source citations |
+| `title`         | `string`               | `检索增强生成` | Title                               |
+| `elapsedMs`     | `number`               | `undefined`    | Elapsed time                        |
+| `reducedMotion` | `boolean`              | `false`        | Disable non-essential motion        |
+
+## Events
+
+| Event          | Payload          | Description          |
+| -------------- | ---------------- | -------------------- |
+| `run`          | `void`           | Start or replay      |
+| `cancel`       | `void`           | Stop the current run |
+| `selectSource` | `AgentRagSource` | Select a source      |
+
+## Target Notes
+
+| Target | Import                                                           |
+| ------ | ---------------------------------------------------------------- |
+| H5     | Named export from `@/components/agent-ui`                        |
+| weapp  | Default export from `@/components/agent-ui/AgentRagPipeline.vue` |
+
+The public API stays aligned across targets; DOM/WXML, scheduling, and native events are target-owned. The docs demo uses a local snapshot and does not call a model or retrieval service.
diff --git a/apps/docs/en/components/map.md b/apps/docs/en/components/map.md
index 935a324e..0d441a83 100644
--- a/apps/docs/en/components/map.md
+++ b/apps/docs/en/components/map.md
@@ -2,7 +2,11 @@
 
 `VMap` is a typed Wevu wrapper around the native WeChat mini-program `<map>`. It normalizes sizing, capabilities, and event names. The component only supports the `weapp` target; application code still owns remote APIs, permission flows, and Map Context usage.
 
-<RegistryInstallStrip item="components/map" :targets="['weapp']" :wrapper-targets="[]" locale="en" />
+## Demo
+
+<MapDemo locale="en" />
+
+The docs site cannot run WeChat's native map view. This demo uses Tencent Map JS API GL to show the same VMap contract: center, marker count, and `regionchange`. Location permission and Map Context remain mini-program-only.
 
 ## Usage
 
diff --git a/apps/docs/en/components/robot-chat.md b/apps/docs/en/components/robot-chat.md
index 655c0e9d..43abf7e3 100644
--- a/apps/docs/en/components/robot-chat.md
+++ b/apps/docs/en/components/robot-chat.md
@@ -4,6 +4,12 @@
 
 <RegistryInstallStrip item="components/robot-chat" :targets="['weapp']" :wrapper-targets="[]" locale="en" />
 
+## Demo
+
+<RobotChatDemo locale="en" />
+
+The docs site cannot load chatbotwidget. This demo shows welcome text, the operate card, send, and `queryCallback`. It is the Web Preview host, not WeChat Dialog Open Platform.
+
 ## App configuration
 
 Enable the plugin for the Mini Program, then declare it under the fixed `varoRobot` alias in `app.json`:
diff --git a/apps/docs/en/guide/installation.md b/apps/docs/en/guide/installation.md
index 94e50e8b..ada98b36 100644
--- a/apps/docs/en/guide/installation.md
+++ b/apps/docs/en/guide/installation.md
@@ -73,6 +73,31 @@ Copy-owned mini-program Registry components use native Wevu SFCs and consume Tai
 
 `@varo-ui/cli` only copies Registry files and prints `Dependencies:` / `Dev dependencies:`; it does not install npm packages. After each `add`, install every reported dependency that the project does not already contain. See the [one-time Wevu Registry setup](/en/guide/shadcn-mode) for managed registration of `src/styles.css` and the Registry theme at `src/styles/varo.css`, plus the complete Tailwind options.
 
+## Preview mini-program artifacts in a browser
+
+Start the standalone Web compatibility preview from the Varo repository root:
+
+```bash
+pnpm --filter @varo/playground-weapp-preview dev
+```
+
+The development command builds the mini program first, then serves button, controlled-input, slot/lifecycle, and Agent scenarios at `http://127.0.0.1:5182`. After changing native examples, run `pnpm --filter @varo/playground-weapp-preview prepare:artifacts` to refresh their compiled artifacts.
+
+The wx runtime now lives in the private `@varo/weapp-web` package: a Vite plugin compiles Wevu artifacts into `virtual:varo-native-artifacts`, and a replaceable harness owns `wx` APIs and native elements. The playground is only a sandbox consumer; the package is not published yet. The host runs Wevu-generated JS, JSON, WXML, and WXSS through glass-easel's DOM backend rather than substituting H5 business components. Narrow windows scale the presentation while preserving the selected native viewport width. **This is not a WeChat-client or device emulator.** Unsupported capabilities such as login and payment fail explicitly instead of returning fabricated success.
+
+Build and verify the production surface:
+
+```bash
+pnpm exec turbo run build --filter=@varo/playground-weapp-preview
+pnpm --filter @varo/playground-weapp-preview preview
+# Run in another terminal; a local Chrome installation is required
+pnpm --filter @varo/playground-weapp-preview smoke:browser
+```
+
+The production preview defaults to `http://127.0.0.1:4182`; deployable files are in `apps/playground-weapp-preview/dist`. The browser smoke exercises native interaction, event counts, context, stream stop/resume, layout boundaries, and error recovery, and writes screenshots to a temporary directory. Set `PREVIEW_URL` to test another running preview.
+
+The repository lockfile records the SDK versions required by this pipeline. The CLI does not automatically install those dependencies into external consumer projects. WeChat-specific capabilities, device performance, and final native visuals still require validation in WeChat.
+
 ## Engineering notes
 
 - Keep docs, playgrounds, and packages in the monorepo
diff --git a/apps/docs/guide/installation.md b/apps/docs/guide/installation.md
index 105add75..11fde709 100644
--- a/apps/docs/guide/installation.md
+++ b/apps/docs/guide/installation.md
@@ -73,6 +73,31 @@ copy-owned 小程序 Registry 组件使用真正的 Wevu SFC，并通过 `styleI
 
 `@varo-ui/cli` 只复制 Registry 文件并输出 `Dependencies:` / `Dev dependencies:`，不会安装 npm 包；每次执行 `add` 后都要安装它报告且工程尚未包含的依赖。`src/styles.css`、Registry 主题 `src/styles/varo.css` 的托管注册和完整 Tailwind 选项见 [Wevu Registry 一次性接入](/guide/shadcn-mode)。
 
+## 在浏览器预览小程序产物
+
+在 Varo 仓库根目录启动独立的 Web 兼容预览：
+
+```bash
+pnpm --filter @varo/playground-weapp-preview dev
+```
+
+开发服务先构建小程序，再在 `http://127.0.0.1:5182` 提供按钮、受控输入、插槽生命周期和 Agent 内容场景。修改原生示例后，可运行 `pnpm --filter @varo/playground-weapp-preview prepare:artifacts` 更新编译产物。
+
+wx 运行时已抽到私有包 `@varo/weapp-web`：Vite 插件负责把 Wevu 产物编进 `virtual:varo-native-artifacts`，运行时 harness 可替换 `wx` API 和原生元素。当前 playground 只是这个包的沙盒消费者；包暂不对外发布。该宿主使用 glass-easel 的 DOM 后端运行 Wevu 生成的 JS、JSON、WXML 和 WXSS，不会换成 H5 业务组件。窄窗口会缩放预览画面，但保留选定的原生视口宽度。**这不是微信客户端或真机模拟器**；登录、支付等未支持能力会失败，不会伪造成功结果。
+
+生产构建与真实浏览器回归：
+
+```bash
+pnpm exec turbo run build --filter=@varo/playground-weapp-preview
+pnpm --filter @varo/playground-weapp-preview preview
+# 在另一个终端运行；需要本机安装 Chrome
+pnpm --filter @varo/playground-weapp-preview smoke:browser
+```
+
+生产预览默认使用 `http://127.0.0.1:4182`，可部署产物位于 `apps/playground-weapp-preview/dist`。浏览器回归覆盖原生交互、事件次数、上下文、流式取消/继续、样式边界与错误恢复，并将截图写入临时目录。可用 `PREVIEW_URL` 指定其他已启动的预览地址。
+
+仓库 lockfile 记录该运行链需要的 SDK 版本；CLI 不会把这些依赖安装到外部业务项目。微信专属能力、真机性能与最终视觉仍需在微信环境验收。
+
 ## 工程化建议
 
 - 文档站、playground 与组件包统一放在 monorepo 内维护
diff --git a/apps/docs/src/agent-component-catalog.ts b/apps/docs/src/agent-component-catalog.ts
index f1caf3ed..3b6a9c97 100644
--- a/apps/docs/src/agent-component-catalog.ts
+++ b/apps/docs/src/agent-component-catalog.ts
@@ -114,6 +114,12 @@ const markdownContent = '## Result\\n\\n**Ready**'
     example: '<AgentSourceList title="来源" :sources="sources" />',
     code: '<script setup lang="ts">\nimport { AgentSourceList } from \'@/components/agent-ui\'\n</script>\n\n<template>\n  <AgentSourceList title="来源" :sources="sources" />\n</template>',
   },
+  'rag-pipeline': {
+    name: 'AgentRagPipeline',
+    importPath: '@/components/agent-ui',
+    example: '<AgentRagPipeline :query="query" :steps="steps" :sources="sources" :answer="answer" @run="run" @cancel="cancel" @select-source="selectSource" />',
+    code: '<script setup lang="ts">\nimport { AgentRagPipeline } from \'@/components/agent-ui\'\n</script>\n\n<template>\n  <AgentRagPipeline :query="query" :steps="steps" :sources="sources" :answer="answer" @run="run" @cancel="cancel" @select-source="selectSource" />\n</template>',
+  },
   'attachments': {
     name: 'AgentAttachmentList',
     importPath: '@/components/agent-ui',
diff --git a/apps/docs/src/components/AgentComponentDemo.test.ts b/apps/docs/src/components/AgentComponentDemo.test.ts
index 9f289553..b9a3a5a6 100644
--- a/apps/docs/src/components/AgentComponentDemo.test.ts
+++ b/apps/docs/src/components/AgentComponentDemo.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { agentDemoCatalog } from '../agent-component-catalog'
 import AgentComponentDemo from './AgentComponentDemo.vue'
@@ -20,6 +20,7 @@ const components = [
   'response-actions',
   'artifact',
   'sources',
+  'rag-pipeline',
   'attachments',
   'event-renderer',
   'message-scroller',
@@ -90,6 +91,19 @@ describe('AgentComponentDemo', () => {
     expect(wrapper.get('.agent-component-demo__source').text()).toContain(':suggestions=\"suggestions\"')
   })
 
+  it('reruns a completed RAG pipeline from the footer action', async () => {
+    const wrapper = mount(AgentComponentDemo, { props: { component: 'rag-pipeline' } })
+    expect(wrapper.get('[data-rag-stage="generate"]').attributes('data-status')).toBe('completed')
+    expect(wrapper.get('[data-rag-source="support"]').text()).toContain('客服工单')
+    await wrapper.get('[data-rag-citation="support"]').trigger('click')
+    expect(wrapper.get('output').text()).toBe('客服工单')
+
+    await wrapper.get('.agent-rag__action').trigger('click')
+    await flushPromises()
+    expect(wrapper.get('[data-rag-stage="query"]').attributes('data-status')).not.toBe('completed')
+    expect(wrapper.get('.agent-rag__action').text()).not.toBe('重新运行')
+  })
+
   it('renders a neutral approval surface with explicit selected and decision states', async () => {
     const wrapper = mount(AgentComponentDemo, { props: { component: 'approval' } })
 
diff --git a/apps/docs/src/components/AgentComponentDemo.vue b/apps/docs/src/components/AgentComponentDemo.vue
index 26940e57..a44b6c72 100644
--- a/apps/docs/src/components/AgentComponentDemo.vue
+++ b/apps/docs/src/components/AgentComponentDemo.vue
@@ -2,6 +2,7 @@
 import type { AgentStreamSnapshot } from '@varo-ui/ai'
 import { computed, nextTick, shallowRef } from 'vue'
 import { agentDemoCatalog } from '../agent-component-catalog'
+import { useRagPipelineDemo } from '../composables/useRagPipelineDemo'
 import {
   AgentActivity,
   AgentApproval,
@@ -27,6 +28,7 @@ import {
   AgentMessageScroller,
   AgentPromptSuggestions,
   AgentRadioGroup,
+  AgentRagPipeline,
   AgentRecommendation,
   AgentRecordsTable,
   AgentResponseActions,
@@ -89,6 +91,7 @@ const radioValue = shallowRef('balanced')
 const approvalValue = shallowRef('verify')
 const prompt = shallowRef('')
 const feedback = shallowRef('')
+const { snapshot: ragSnapshot, run: runRag, cancel: cancelRag } = useRagPipelineDemo(props.locale)
 const sidebarActive = shallowRef('release')
 const sidebarCollapsed = shallowRef(false)
 const insightCurrent = shallowRef(0)
@@ -115,9 +118,9 @@ const tools = [
   { id: 'publish', name: 'npm.publish', status: 'waiting' as const, summary: '等待审批' },
 ]
 const tasks = [
-  { id: 'typecheck', title: '类型检查', status: 'completed' as const, progress: 100, meta: '16/16' },
-  { id: 'test', title: '行为测试', status: 'completed' as const, progress: 100, meta: 'passed' },
-  { id: 'build', title: '双端构建', status: 'running' as const, progress: 72, meta: '2 targets' },
+  { id: 'typecheck', title: '类型检查', status: 'completed' as const, progress: 100, meta: '16/16', description: 'workspace typecheck 已通过。' },
+  { id: 'test', title: '行为测试', status: 'completed' as const, progress: 100, meta: 'passed', description: 'Vitest 覆盖双端组件行为。' },
+  { id: 'build', title: '双端构建', status: 'running' as const, progress: 72, meta: '2 targets', description: 'H5 与 Weapp 产物正在打包。' },
 ]
 const choices = [
   { label: '仅验证', value: 'verify', description: '不产生外部副作用' },
@@ -186,6 +189,7 @@ const contextChunks = [
   { content: 'Cold-chain certification must be verified before a new supplier can be approved.', id: 'policy', label: 'Supplier policy', source: 'Onboarding SOP.pdf', sourceType: 'PDF' },
   { content: 'H5 and weapp-vite builds both completed successfully.', id: 'build', label: 'Build report', source: 'CI report.json', sourceType: 'JSON' },
 ]
+
 const insights = [
   { action: 'Rebalance', description: '小程序首屏包体比上次降低 6%。', id: 'bundle', label: 'Bundle insight', tone: 'success' as const, value: '−6%' },
   { action: 'Inspect', description: '两个工具调用仍在等待用户审批。', id: 'approval', label: 'Workflow insight', tone: 'warning' as const, value: '2' },
@@ -319,6 +323,7 @@ function handleDemoTabKeydown(event: KeyboardEvent) {
         <AgentResponseActions v-else-if="component === 'response-actions'" content="双端组件已经通过。" @copy="done('已复制')" @retry="done('重新生成')" @like="done('有帮助')" @dislike="done('需改进')" />
         <AgentArtifact v-else-if="component === 'artifact'" :artifact="artifact" @open="done('打开产物')" />
         <AgentSourceList v-else-if="component === 'sources'" :sources="sources" title="参考来源" @open="done($event.title)" />
+        <AgentRagPipeline v-else-if="component === 'rag-pipeline'" :query="ragSnapshot.query" :steps="ragSnapshot.steps" :sources="ragSnapshot.sources" :answer="ragSnapshot.answer" :elapsed-ms="ragSnapshot.elapsedMs" reduced-motion @run="runRag" @cancel="cancelRag" @select-source="done($event.title)" />
         <AgentAttachmentList v-else-if="component === 'attachments'" :attachments="attachments" @remove="done(`移除 ${$event.name}`)" />
         <AgentEventRenderer v-else-if="component === 'event-renderer'" :snapshot="eventSnapshot" @approve="done(`批准 ${$event}`)" @reject="done('拒绝')" @retry="done('重试')" />
         <AgentMessageScroller v-else-if="component === 'message-scroller'" :at-live-edge="false" @follow="done('跳到最新消息')">
@@ -637,11 +642,9 @@ function handleDemoTabKeydown(event: KeyboardEvent) {
   :deep(
     .agent-message-scroller,
     .agent-file-diff,
-    .agent-tool-result,
     .agent-citations,
     .agent-activity,
     .agent-context-card,
-    .agent-insight-card,
     .agent-tool-approval,
     .agent-fine-tune,
     .agent-sidebar,
@@ -659,19 +662,20 @@ function handleDemoTabKeydown(event: KeyboardEvent) {
   .agent-component-demo__stage
   :deep(
     .agent-file-diff__header,
-    .agent-tool-result__header,
     .agent-citations__trigger,
-    .agent-sidebar > header,
-    .agent-command-search > label,
-    .agent-table th,
-    .agent-context-card article
+    .agent-sidebar__header,
+    .agent-command-search__field,
+    .agent-table th
   ) {
   color: var(--varo-foreground);
   background: var(--varo-surface-strong);
   border-color: var(--varo-border);
 }
 
-:global(.dark) .agent-component-demo__stage :deep(button:not(.agent-code-block button)) {
+:global(.dark)
+  .agent-component-demo__stage
+  :deep(
+    button:not(.agent-code-block button, .agent-rag__source, .agent-tool-result__header, .agent-tool-result__retry, .agent-artifact__open, .agent-insight-card__action, .agent-insight-card__nav-btn, .agent-selection-actions__action, .agent-sidebar__item, .agent-sidebar__create, .agent-command-search__item)) {
   color: inherit;
 }
 
diff --git a/apps/docs/src/components/AgentComponentsDemo.test.ts b/apps/docs/src/components/AgentComponentsDemo.test.ts
index cab55d03..5125691c 100644
--- a/apps/docs/src/components/AgentComponentsDemo.test.ts
+++ b/apps/docs/src/components/AgentComponentsDemo.test.ts
@@ -27,6 +27,9 @@ describe('AgentComponentsDemo', () => {
     await wrapper.get('.ai-docs-demo__follow').trigger('click')
     await vi.advanceTimersByTimeAsync(20)
     expect(transcriptElement.scrollTop).toBe(900)
+    expect(wrapper.get('[data-rag-stage="generate"]').attributes('data-status')).toBe('completed')
+    expect(wrapper.get('[data-rag-source="support"]').text()).toContain('客服工单')
+
     wrapper.unmount()
   })
 })
diff --git a/apps/docs/src/components/AgentComponentsDemo.vue b/apps/docs/src/components/AgentComponentsDemo.vue
index 3f0a260f..aea7a584 100644
--- a/apps/docs/src/components/AgentComponentsDemo.vue
+++ b/apps/docs/src/components/AgentComponentsDemo.vue
@@ -2,12 +2,14 @@
 import { nextTick, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
 import { agentInventory } from '../agent-component-catalog'
 import { useAgentDocsDemo } from '../composables/useAgentDocsDemo'
+import { useRagPipelineDemo } from '../composables/useRagPipelineDemo'
 import {
   AgentArtifact,
   AgentAttachmentList,
   AgentComposer,
   AgentConversation,
   AgentEventRenderer,
+  AgentRagPipeline,
   AgentRecommendation,
   AgentResponseActions,
   AgentSourceList,
@@ -18,6 +20,7 @@ type Locale = 'en' | 'zh'
 
 const props = withDefaults(defineProps<{ locale?: Locale }>(), { locale: 'zh' })
 const { approve, busy, messages, prompt, reject, retry, run, snapshot } = useAgentDocsDemo()
+const { snapshot: ragSnapshot, run: runRag, cancel: cancelRag } = useRagPipelineDemo(props.locale)
 
 const transcript = useTemplateRef<HTMLElement>('transcript')
 const followsLatest = shallowRef(true)
@@ -75,9 +78,9 @@ onBeforeUnmount(() => {
 })
 
 const tasks = [
-  { id: 'protocol', title: '统一事件协议', status: 'completed' as const, progress: 100 },
-  { id: 'renderer', title: '双端增量渲染', status: 'completed' as const, progress: 100 },
-  { id: 'approval', title: '人工审批门禁', status: 'running' as const, progress: 72 },
+  { id: 'protocol', title: '统一事件协议', status: 'completed' as const, progress: 100, description: '业务只提供事件来源。' },
+  { id: 'renderer', title: '双端增量渲染', status: 'completed' as const, progress: 100, description: 'H5 与 Weapp 共用状态投影。' },
+  { id: 'approval', title: '人工审批门禁', status: 'running' as const, progress: 72, description: '等待发布动作确认。' },
 ]
 const artifact = {
   content: `const controller = createAgentStreamController()\nawait controller.connect(events)`,
@@ -175,6 +178,16 @@ function t(zh: string, en: string) {
         <AgentTaskList :tasks="tasks" :title="t('实现进度', 'Implementation progress')" />
         <AgentArtifact :artifact="artifact" />
         <AgentSourceList :sources="sources" :title="t('参考来源', 'Sources')" />
+        <AgentRagPipeline
+          :query="ragSnapshot.query"
+          :steps="ragSnapshot.steps"
+          :sources="ragSnapshot.sources"
+          :answer="ragSnapshot.answer"
+          :elapsed-ms="ragSnapshot.elapsedMs"
+          reduced-motion
+          @run="runRag"
+          @cancel="cancelRag"
+        />
         <AgentAttachmentList :attachments="attachments" />
       </aside>
     </div>
diff --git a/apps/docs/src/components/MapDemo.test.ts b/apps/docs/src/components/MapDemo.test.ts
new file mode 100644
index 00000000..97bbbdd4
--- /dev/null
+++ b/apps/docs/src/components/MapDemo.test.ts
@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import MapDemo from './MapDemo.vue'
+
+describe('MapDemo', () => {
+  it('exposes map center, markers, and regionchange as observable state', async () => {
+    const wrapper = mount(MapDemo, { props: { locale: 'zh' } })
+    expect(wrapper.get('[data-preview-field="map-center"]').text()).toContain('杭州西湖')
+    expect(wrapper.get('[data-preview-field="map-coordinates"]').text()).toContain('30.274')
+    expect(wrapper.get('[data-preview-field="map-marker-count"]').text()).toBe('1')
+    expect(wrapper.get('[data-preview-field="map-state"]').attributes('data-preview-value')).toContain('region=0')
+
+    await wrapper.get('.map-demo__surface').trigger('click')
+    expect(wrapper.get('[data-preview-field="map-region-count"]').text()).toBe('1')
+    expect(wrapper.get('[data-preview-field="map-last-event"]').text()).toContain('regionchange #1')
+
+    await wrapper.get('.map-demo__actions button').trigger('click')
+    expect(wrapper.get('[data-preview-field="map-center"]').text()).toContain('上海外滩')
+    expect(wrapper.get('[data-preview-field="map-coordinates"]').text()).toContain('31.23')
+    expect(wrapper.get('[data-preview-field="map-state"]').attributes('data-preview-value')).toContain('center=上海外滩')
+  })
+})
diff --git a/apps/docs/src/components/MapDemo.vue b/apps/docs/src/components/MapDemo.vue
new file mode 100644
index 00000000..34c9fc7f
--- /dev/null
+++ b/apps/docs/src/components/MapDemo.vue
@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import type { TencentMap, TencentMapApi, TencentMultiMarker } from './tencent-map'
+import { computed, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+import { loadTencentMapApi, tencentRasterTileUrl } from './tencent-map'
+
+type Locale = 'en' | 'zh'
+
+const props = withDefaults(defineProps<{ locale?: Locale }>(), { locale: 'zh' })
+
+const hangzhou = { latitude: 30.274, longitude: 120.155, label: props.locale === 'en' ? 'West Lake, Hangzhou' : '杭州西湖' }
+const shanghai = { latitude: 31.23, longitude: 121.47, label: props.locale === 'en' ? 'The Bund, Shanghai' : '上海外滩' }
+const center = shallowRef(hangzhou)
+const regionChangeCount = shallowRef(0)
+const lastEvent = shallowRef(props.locale === 'en' ? 'No regionchange yet' : '尚未收到 regionchange')
+const canvas = useTemplateRef<HTMLElement>('canvas')
+const tiles = shallowRef<Array<{ key: string, src: string, left: number, top: number }>>([])
+let api: TencentMapApi | undefined
+let map: TencentMap | undefined
+let markerLayer: TencentMultiMarker | undefined
+
+const copy = computed(() => props.locale === 'en'
+  ? {
+      eyebrow: 'Weapp-only native map',
+      title: 'VMap observable preview',
+      body: 'Docs cannot run WeChat’s native map view. This surface uses Tencent Map JS API GL to show the same VMap contract: center, markers, and regionchange.',
+      relocate: center.value.label === hangzhou.label ? 'Move to Shanghai' : 'Move to Hangzhou',
+      tap: 'Emit regionchange',
+      note: 'Tencent Map GL is the docs/Web Preview host. Location permission and Map Context stay on the mini-program runtime.',
+    }
+  : {
+      eyebrow: '仅 weapp 的原生地图',
+      title: 'VMap 可观察预览',
+      body: '文档站不能跑微信客户端同层地图。这里用腾讯地图 JS API GL 展示同一套 VMap 契约：中心点、标记和 regionchange。',
+      relocate: center.value.label === hangzhou.label ? '切换到上海' : '切换到杭州',
+      tap: '发出 regionchange',
+      note: '腾讯地图 GL 是文档/Web Preview 的可见宿主。定位权限和 Map Context 仍只在小程序运行时可用。',
+    })
+
+const markers = computed(() => [{
+  id: 1,
+  latitude: center.value.latitude,
+  longitude: center.value.longitude,
+  title: center.value.label,
+}])
+const diagnostic = computed(() =>
+  `center=${center.value.label};lat=${center.value.latitude};lng=${center.value.longitude};markers=${markers.value.length};region=${regionChangeCount.value}`,
+)
+
+function relocate() {
+  center.value = center.value.label === hangzhou.label ? shanghai : hangzhou
+}
+
+function emitRegionChange() {
+  regionChangeCount.value += 1
+  lastEvent.value = props.locale === 'en'
+    ? `regionchange #${regionChangeCount.value}`
+    : `收到 regionchange #${regionChangeCount.value}`
+}
+
+function clampNumber(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function projectWebMercator(latitude: number, longitude: number, zoom: number) {
+  const clampedLatitude = clampNumber(latitude, -85.05112878, 85.05112878)
+  const world = 256 * (2 ** zoom)
+  const x = ((longitude + 180) / 360) * world
+  const sine = Math.sin((clampedLatitude * Math.PI) / 180)
+  const y = (0.5 - Math.log((1 + sine) / (1 - sine)) / (4 * Math.PI)) * world
+  return { x, y }
+}
+
+function renderTiles() {
+  const host = canvas.value?.parentElement
+  const width = Math.max(host?.clientWidth ?? 390, 256)
+  const height = Math.max(host?.clientHeight ?? 240, 160)
+  const zoom = 14
+  const tileSize = 256
+  const projection = projectWebMercator(center.value.latitude, center.value.longitude, zoom)
+  const originX = Math.floor(projection.x / tileSize)
+  const originY = Math.floor(projection.y / tileSize)
+  const offsetX = Math.round(width / 2 - (projection.x - originX * tileSize))
+  const offsetY = Math.round(height / 2 - (projection.y - originY * tileSize))
+  const columns = Math.ceil(width / tileSize) + 2
+  const rows = Math.ceil(height / tileSize) + 2
+  const next: Array<{ key: string, src: string, left: number, top: number }> = []
+  const size = 2 ** zoom
+  for (let row = -1; row < rows; row += 1) {
+    for (let column = -1; column < columns; column += 1) {
+      const tileY = originY + row
+      if (tileY < 0 || tileY >= size) { continue }
+      const tileX = originX + column
+      next.push({
+        key: `${zoom}/${tileX}/${tileY}`,
+        src: tencentRasterTileUrl(tileX, tileY, zoom),
+        left: offsetX + column * tileSize,
+        top: offsetY + row * tileSize,
+      })
+    }
+  }
+  tiles.value = next
+}
+
+function syncMap() {
+  renderTiles()
+  if (!api || !map) { return }
+  map.setCenter(new api.LatLng(center.value.latitude, center.value.longitude))
+  map.setZoom(14)
+  markerLayer?.setGeometries([{
+    id: '1',
+    position: new api.LatLng(center.value.latitude, center.value.longitude),
+    properties: { title: center.value.label },
+  }])
+}
+
+onMounted(() => {
+  renderTiles()
+  window.addEventListener('resize', renderTiles)
+  const host = canvas.value
+  if (!host) { return }
+  void loadTencentMapApi().then((loaded) => {
+    if (canvas.value !== host) { return }
+    api = loaded
+    map = new loaded.Map(host, {
+      center: new loaded.LatLng(center.value.latitude, center.value.longitude),
+      zoom: 14,
+    })
+    markerLayer = new loaded.MultiMarker({
+      geometries: [{
+        id: '1',
+        position: new loaded.LatLng(center.value.latitude, center.value.longitude),
+        properties: { title: center.value.label },
+      }],
+      map,
+    })
+    map.on('idle', emitRegionChange)
+  })
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', renderTiles)
+  markerLayer?.destroy?.()
+  map?.destroy()
+  api = undefined
+  map = undefined
+  markerLayer = undefined
+})
+watch(center, syncMap)
+</script>
+
+<template>
+  <section class="map-demo" :data-locale="props.locale">
+    <header>
+      <small>{{ copy.eyebrow }}</small>
+      <strong>{{ copy.title }}</strong>
+      <p>{{ copy.body }}</p>
+    </header>
+
+    <div
+      class="map-demo__surface"
+      role="application"
+      :aria-label="center.label"
+      :data-native-latitude="String(center.latitude)"
+      :data-native-longitude="String(center.longitude)"
+      :data-native-marker-count="String(markers.length)"
+      :data-native-map-label="`${center.label}\n${center.latitude}, ${center.longitude}`"
+      @click="emitRegionChange"
+    >
+      <img
+        v-for="tile in tiles"
+        :key="tile.key"
+        class="map-demo__tile"
+        :src="tile.src"
+        alt=""
+        decoding="async"
+        referrerpolicy="no-referrer"
+        :style="{ left: `${tile.left}px`, top: `${tile.top}px` }"
+      >
+      <div ref="canvas" class="map-demo__canvas" />
+      <output>{{ center.label }}</output>
+    </div>
+
+    <dl data-preview-field="map-state" :data-preview-value="diagnostic">
+      <div>
+        <dt>{{ props.locale === 'en' ? 'Center' : '中心' }}</dt>
+        <dd data-preview-field="map-center">
+          {{ center.label }}
+        </dd>
+      </div>
+      <div>
+        <dt>{{ props.locale === 'en' ? 'Coordinates' : '坐标' }}</dt>
+        <dd data-preview-field="map-coordinates">
+          {{ center.latitude }}, {{ center.longitude }}
+        </dd>
+      </div>
+      <div>
+        <dt>{{ props.locale === 'en' ? 'Markers' : '标记' }}</dt>
+        <dd data-preview-field="map-marker-count">
+          {{ markers.length }}
+        </dd>
+      </div>
+      <div>
+        <dt>regionchange</dt>
+        <dd data-preview-field="map-region-count">
+          {{ regionChangeCount }}
+        </dd>
+      </div>
+    </dl>
+
+    <p data-preview-field="map-last-event">
+      {{ lastEvent }}
+    </p>
+    <p class="map-demo__note">
+      {{ copy.note }}
+    </p>
+
+    <div class="map-demo__actions">
+      <button type="button" @click="relocate">
+        {{ copy.relocate }}
+      </button>
+      <button type="button" @click="emitRegionChange">
+        {{ copy.tap }}
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.map-demo {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+  margin: 24px 0 32px;
+  color: var(--varo-foreground);
+  background: var(--varo-demo-surface);
+  border: 1px solid var(--varo-demo-border);
+  border-radius: 20px;
+}
+
+.map-demo header {
+  display: grid;
+  gap: 6px;
+}
+
+.map-demo small {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--varo-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.map-demo strong {
+  font-size: 18px;
+  letter-spacing: -0.03em;
+}
+
+.map-demo p,
+.map-demo dd,
+.map-demo dt {
+  margin: 0;
+  font-size: 13px;
+}
+
+.map-demo__surface {
+  position: relative;
+  min-height: 240px;
+  overflow: hidden;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--varo-foreground) 6%, var(--varo-demo-surface));
+  border: 1px solid color-mix(in srgb, var(--varo-foreground) 16%, var(--varo-demo-border));
+  border-radius: 16px;
+}
+
+.map-demo__tile {
+  position: absolute;
+  z-index: 0;
+  width: 256px;
+  max-width: none;
+  height: 256px;
+  pointer-events: none;
+}
+
+.map-demo__canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: transparent;
+}
+
+.map-demo__surface output {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 2;
+  max-width: max-content;
+  padding: 8px 10px;
+  font-size: 12px;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--varo-demo-surface) 88%, transparent);
+  border: 1px solid color-mix(in srgb, var(--varo-foreground) 16%, var(--varo-demo-border));
+  border-radius: 10px;
+}
+
+.map-demo dl {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.map-demo dt {
+  color: var(--varo-muted);
+}
+
+.map-demo__note,
+.map-demo p[data-preview-field] {
+  color: var(--varo-muted);
+}
+
+.map-demo__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.map-demo__actions button {
+  min-height: 36px;
+  padding: 0 12px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-foreground);
+  cursor: pointer;
+  background: var(--varo-surface);
+  border: 1px solid var(--varo-demo-border);
+  border-radius: 10px;
+}
+</style>
diff --git a/apps/docs/src/components/RobotChatDemo.test.ts b/apps/docs/src/components/RobotChatDemo.test.ts
new file mode 100644
index 00000000..f8ed3061
--- /dev/null
+++ b/apps/docs/src/components/RobotChatDemo.test.ts
@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import RobotChatDemo from './RobotChatDemo.vue'
+
+describe('RobotChatDemo', () => {
+  it('shows a visible conversation and queryCallback after send', async () => {
+    const wrapper = mount(RobotChatDemo, { props: { locale: 'zh' } })
+    expect(wrapper.get('[data-preview-field="robot-status"]').text()).toContain('机器人已连接')
+    expect(wrapper.get('[data-preview-field="robot-message-count"]').text()).toBe('1')
+    expect(wrapper.get('[data-role="assistant"]').text()).toContain('你好')
+
+    await wrapper.get('input').setValue('查订单')
+    await wrapper.get('form').trigger('submit')
+
+    expect(wrapper.get('[data-preview-field="robot-last-query"]').text()).toContain('查订单')
+    expect(wrapper.get('[data-preview-field="robot-query-count"]').text()).toBe('1')
+    expect(wrapper.get('[data-preview-field="robot-message-count"]').text()).toBe('3')
+    expect(wrapper.get('[data-role="user"]').text()).toBe('查订单')
+  })
+})
diff --git a/apps/docs/src/components/RobotChatDemo.vue b/apps/docs/src/components/RobotChatDemo.vue
new file mode 100644
index 00000000..5e849615
--- /dev/null
+++ b/apps/docs/src/components/RobotChatDemo.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+
+type Locale = 'en' | 'zh'
+interface Message { role: 'assistant' | 'user', text: string }
+
+const props = withDefaults(defineProps<{ locale?: Locale }>(), { locale: 'zh' })
+
+const draft = shallowRef('')
+const queryCount = shallowRef(0)
+const lastQuery = shallowRef(props.locale === 'en' ? 'No query yet' : '尚未发送')
+const status = shallowRef(props.locale === 'en' ? 'Robot connected' : '机器人已连接')
+const messages = shallowRef<Message[]>([{
+  role: 'assistant',
+  text: props.locale === 'en' ? 'Hello, how can I help?' : '你好，请问需要什么帮助？',
+}])
+
+const copy = computed(() => props.locale === 'en'
+  ? {
+      eyebrow: 'Weapp-only plugin host',
+      title: 'VRobotChat observable preview',
+      body: 'Docs cannot load chatbotwidget. This surface shows the same session: welcome, operateCard, send, and queryCallback.',
+      placeholder: 'Ask about an order',
+      send: 'Send',
+      back: 'Back',
+      note: 'This is the docs/Web Preview host, not WeChat Dialog Open Platform.',
+    }
+  : {
+      eyebrow: '仅 weapp 的插件宿主',
+      title: 'VRobotChat 可观察预览',
+      body: '文档站不能加载 chatbotwidget。这里画出同一套会话面：欢迎语、operateCard、发送和 queryCallback。',
+      placeholder: '请输入问题',
+      send: '发送',
+      back: '返回',
+      note: '这是文档/Web Preview 的可见宿主，不是微信对话开放平台。',
+    })
+
+const canSend = computed(() => draft.value.trim().length > 0)
+const diagnostic = computed(() =>
+  `status=${status.value};query=${lastQuery.value};count=${queryCount.value};messages=${messages.value.length}`,
+)
+
+function send() {
+  const query = draft.value.trim()
+  if (!query) { return }
+  draft.value = ''
+  lastQuery.value = query
+  queryCount.value += 1
+  status.value = props.locale === 'en'
+    ? `queryCallback #${queryCount.value}`
+    : `已收到查询回调 #${queryCount.value}`
+  messages.value = [
+    ...messages.value,
+    { role: 'user', text: query },
+    {
+      role: 'assistant',
+      text: props.locale === 'en'
+        ? `Received “${query}”. This is the docs host for chatbotwidget, not WeChat Dialog Open Platform.`
+        : `已收到「${query}」。这是文档对 chatbotwidget 会话面的可见宿主，不是微信对话开放平台。`,
+    },
+  ]
+}
+
+function backHome() {
+  status.value = props.locale === 'en' ? 'Left the robot session' : '已退出机器人会话'
+}
+</script>
+
+<template>
+  <section class="robot-demo" :data-locale="props.locale">
+    <header>
+      <small>{{ copy.eyebrow }}</small>
+      <strong>{{ copy.title }}</strong>
+      <p>{{ copy.body }}</p>
+    </header>
+
+    <div class="robot-demo__surface" role="log" aria-live="polite" data-preview-field="robot-surface">
+      <p
+        v-for="(message, index) in messages"
+        :key="`${message.role}-${index}`"
+        class="robot-demo__message"
+        :data-role="message.role"
+      >
+        {{ message.text }}
+      </p>
+    </div>
+
+    <form class="robot-demo__operate" @submit.prevent="send">
+      <input
+        v-model="draft"
+        :placeholder="copy.placeholder"
+        aria-label="对话内容"
+      >
+      <button type="button" @click="backHome">
+        {{ copy.back }}
+      </button>
+      <button type="submit" :disabled="!canSend">
+        {{ copy.send }}
+      </button>
+    </form>
+
+    <dl data-preview-field="robot-state" :data-preview-value="diagnostic">
+      <div>
+        <dt>{{ props.locale === 'en' ? 'Status' : '状态' }}</dt>
+        <dd data-preview-field="robot-status">
+          {{ status }}
+        </dd>
+      </div>
+      <div>
+        <dt>{{ props.locale === 'en' ? 'Last query' : '最近查询' }}</dt>
+        <dd data-preview-field="robot-last-query">
+          {{ lastQuery }}
+        </dd>
+      </div>
+      <div>
+        <dt>queryCallback</dt>
+        <dd data-preview-field="robot-query-count">
+          {{ queryCount }}
+        </dd>
+      </div>
+      <div>
+        <dt>{{ props.locale === 'en' ? 'Messages' : '消息数' }}</dt>
+        <dd data-preview-field="robot-message-count">
+          {{ messages.length }}
+        </dd>
+      </div>
+    </dl>
+
+    <p class="robot-demo__note">
+      {{ copy.note }}
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.robot-demo {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+  margin: 24px 0 32px;
+  color: var(--varo-foreground);
+  background: var(--varo-demo-surface);
+  border: 1px solid var(--varo-demo-border);
+  border-radius: 20px;
+}
+
+.robot-demo header {
+  display: grid;
+  gap: 6px;
+}
+
+.robot-demo small {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--varo-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.robot-demo strong {
+  font-size: 18px;
+  letter-spacing: -0.03em;
+}
+
+.robot-demo p,
+.robot-demo dd,
+.robot-demo dt {
+  margin: 0;
+  font-size: 13px;
+}
+
+.robot-demo__surface {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+  min-height: 240px;
+  padding: 12px;
+  overflow: auto;
+  background: color-mix(in srgb, var(--varo-foreground) 4%, var(--varo-demo-surface));
+  border: 1px solid var(--varo-demo-border);
+  border-radius: 16px;
+}
+
+.robot-demo__message {
+  max-width: 86%;
+  padding: 8px 12px;
+  border-radius: 16px;
+}
+
+.robot-demo__message[data-role='assistant'] {
+  justify-self: start;
+  background: var(--varo-surface);
+  border: 1px solid var(--varo-demo-border);
+}
+
+.robot-demo__message[data-role='user'] {
+  justify-self: end;
+  color: #fff;
+  background: color-mix(in srgb, var(--varo-foreground) 78%, transparent);
+}
+
+.robot-demo__operate {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.robot-demo__operate input {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 40px;
+  padding: 0 12px;
+  font: inherit;
+  color: var(--varo-foreground);
+  background: var(--varo-surface);
+  border: 1px solid var(--varo-demo-border);
+  border-radius: 12px;
+}
+
+.robot-demo__operate button {
+  min-height: 40px;
+  padding: 0 12px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-foreground);
+  cursor: pointer;
+  background: var(--varo-surface);
+  border: 1px solid var(--varo-demo-border);
+  border-radius: 12px;
+}
+
+.robot-demo__operate button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.robot-demo dl {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.robot-demo dt,
+.robot-demo__note {
+  color: var(--varo-muted);
+}
+</style>
diff --git a/apps/docs/src/components/agent-ui/AgentRagPipeline.vue b/apps/docs/src/components/agent-ui/AgentRagPipeline.vue
new file mode 100644
index 00000000..83179b2d
--- /dev/null
+++ b/apps/docs/src/components/agent-ui/AgentRagPipeline.vue
@@ -0,0 +1,1094 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type {
+  AgentRagAnswerPart,
+  AgentRagPipelineProps,
+  AgentRagSource,
+  AgentRagStageId,
+} from './rag-pipeline'
+import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { cn } from '../../lib/cn'
+import { agentRagIcons } from './rag-icons'
+import { getRagSourceTone, resolveRagSteps } from './rag-pipeline'
+
+const props = withDefaults(defineProps<AgentRagPipelineProps>(), {
+  answer: () => [],
+  query: '',
+  reducedMotion: false,
+  sources: () => [],
+  steps: () => [],
+  title: '检索增强生成',
+})
+
+const emit = defineEmits<{
+  cancel: []
+  run: []
+  selectSource: [source: AgentRagSource]
+}>()
+
+type OverallStatus = 'waiting' | 'running' | 'completed' | 'failed'
+
+interface SourceEntry {
+  number: number
+  scorePercent: number | undefined
+  scoreStyle: CSSProperties | undefined
+  segmentStyle: CSSProperties
+  selectLabel: string
+  source: AgentRagSource
+  toneClass: string
+}
+
+type AnswerEntry
+  = | { id: string, text: string, type: 'text' }
+    | {
+      displayLabel: string
+      id: string
+      selectLabel: string
+      source: SourceEntry | undefined
+      sourceId: string
+      type: 'citation'
+    }
+
+const vectorCells = Array.from({ length: 24 }, (_, index) => `vector-${index + 1}`)
+const PING_CLEAR_MS = 400
+
+const hoveredSourceId = shallowRef<string | null>(null)
+const focusedSourceId = shallowRef<string | null>(null)
+const selectedSourceId = shallowRef<string | null>(null)
+const pingingSourceIds = shallowRef<ReadonlySet<string>>(new Set())
+const pingTimers = new Map<string, () => void>()
+
+const resolvedSteps = computed(() => resolveRagSteps(props.steps))
+const completedCount = computed(() =>
+  resolvedSteps.value.filter(step => step.status === 'completed').length,
+)
+const isRunning = computed(() => resolvedSteps.value.some(step => step.status === 'running'))
+const isCompleted = computed(() => resolvedSteps.value.every(step => step.status === 'completed'))
+const hasFailed = computed(() => resolvedSteps.value.some(step => step.status === 'failed'))
+const hasProgress = computed(() => completedCount.value > 0)
+
+const overallStatus = computed<OverallStatus>(() => {
+  if (isRunning.value) { return 'running' }
+  if (hasFailed.value) { return 'failed' }
+  if (isCompleted.value) { return 'completed' }
+  return 'waiting'
+})
+
+const activeSourceId = computed(() =>
+  hoveredSourceId.value ?? focusedSourceId.value ?? selectedSourceId.value,
+)
+
+const rootClass = computed(() =>
+  cn(
+    'agent-rag w-full min-w-0 overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] text-[var(--varo-agent-foreground)] shadow-sm',
+    props.reducedMotion && 'is-reduced-motion',
+    props.className,
+  ),
+)
+
+function stageStatusClass(status: OverallStatus) {
+  if (status === 'running') {
+    return 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]'
+  }
+  if (status === 'completed') {
+    return 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]'
+  }
+  if (status === 'failed') {
+    return 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]'
+  }
+  return 'bg-[var(--varo-agent-fill)] text-[var(--varo-agent-muted)]'
+}
+
+function stageIconStyle(id: AgentRagStageId): CSSProperties {
+  const mask = `url("${agentRagIcons[id]}")`
+  return {
+    WebkitMaskImage: mask,
+    maskImage: mask,
+  }
+}
+
+const stageEntries = computed(() =>
+  resolvedSteps.value.map((step, index) => ({
+    ...step,
+    iconStyle: stageIconStyle(step.id),
+    isLast: index === resolvedSteps.value.length - 1,
+    statusClass: stageStatusClass(step.status),
+  })),
+)
+
+const useTokenWeights = computed(() => props.sources.length > 0 && props.sources.every((source) => {
+  return typeof source.tokens === 'number' && Number.isFinite(source.tokens) && source.tokens > 0
+}))
+
+const sourceEntries = computed<readonly SourceEntry[]>(() =>
+  props.sources.map((source, index) => {
+    const tone = getRagSourceTone(source)
+    const normalizedScore = source.score === undefined
+      ? undefined
+      : Math.min(1, Math.max(0, source.score))
+    const scorePercent = normalizedScore === undefined
+      ? undefined
+      : Math.round(normalizedScore * 100)
+    const segmentWeight = useTokenWeights.value ? source.tokens as number : 1
+
+    return {
+      number: index + 1,
+      scorePercent,
+      scoreStyle: normalizedScore === undefined
+        ? undefined
+        : { transform: `scaleX(${normalizedScore})` },
+      segmentStyle: { flexBasis: '0%', flexGrow: segmentWeight },
+      selectLabel: `选择来源 ${index + 1}：${source.title}`,
+      source,
+      toneClass: `agent-rag--tone-${tone}`,
+    }
+  }),
+)
+
+const sourceById = computed(() => {
+  const entries = new Map<string, SourceEntry>()
+  for (const entry of sourceEntries.value) {
+    entries.set(entry.source.id, entry)
+  }
+  return entries
+})
+
+const answerEntries = computed<readonly AnswerEntry[]>(() =>
+  props.answer.map((part) => {
+    if (part.type === 'text') {
+      return { id: part.id, text: part.text, type: 'text' }
+    }
+
+    const source = sourceById.value.get(part.sourceId)
+    return {
+      displayLabel: source ? `[${source.number}]` : '[?]',
+      id: part.id,
+      selectLabel: source ? `选择来源 ${source.number}：${source.source.title}` : `未找到引用来源：${part.sourceId}`,
+      source,
+      sourceId: part.sourceId,
+      type: 'citation',
+    }
+  }),
+)
+
+const generateStatus = computed(() => resolvedSteps.value[resolvedSteps.value.length - 1]!.status)
+const emptyAnswerLabel = computed(() => {
+  if (generateStatus.value === 'running') { return '正在生成回答' }
+  if (generateStatus.value === 'failed') { return '回答生成失败' }
+  if (generateStatus.value === 'completed') { return '本次流程没有返回回答' }
+  return '等待生成回答'
+})
+
+const elapsedLabel = computed(() => {
+  if (props.elapsedMs === undefined) { return '' }
+  const elapsed = Math.max(0, props.elapsedMs)
+  if (elapsed < 1000) { return `${Math.round(elapsed)} ms` }
+  return `${(elapsed / 1000).toFixed(1)} s`
+})
+
+const actionLabel = computed(() => {
+  if (isRunning.value) { return '停止' }
+  if (hasFailed.value) { return '重试流程' }
+  if (isCompleted.value) { return '重新运行' }
+  return '运行流程'
+})
+
+const actionClass = computed(() =>
+  cn(
+    'agent-rag__action inline-flex min-h-10 flex-none items-center justify-center rounded-xl border px-3.5 text-xs font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--varo-agent-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--varo-agent-surface)]',
+    isRunning.value
+      ? 'border-[var(--varo-agent-danger)] bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)] hover:bg-[var(--varo-agent-surface-strong)]'
+      : 'border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] text-[var(--varo-agent-primary-foreground)] hover:opacity-90',
+  ),
+)
+
+const footerStatusLabel = computed(() => {
+  if (isRunning.value) { return `处理中，${completedCount.value}/5 已完成` }
+  if (hasFailed.value) { return '流程失败，可重试' }
+  if (isCompleted.value) { return '流程已完成' }
+  if (hasProgress.value) { return `流程已停止，${completedCount.value}/5 已完成` }
+  return '等待运行'
+})
+
+const liveStatus = computed(() => {
+  if (isRunning.value) { return `检索增强生成流程处理中，${completedCount.value} 个阶段已完成` }
+  if (hasFailed.value) { return '检索增强生成流程失败，可以重试' }
+  if (isCompleted.value) { return '检索增强生成流程已完成' }
+  if (hasProgress.value) { return '检索增强生成流程已停止' }
+  return '检索增强生成流程等待运行'
+})
+
+const footerDotClass = computed(() => {
+  if (overallStatus.value === 'running') { return 'bg-[var(--varo-agent-primary)]' }
+  if (overallStatus.value === 'failed') { return 'bg-[var(--varo-agent-danger)]' }
+  if (overallStatus.value === 'completed') { return 'bg-[var(--varo-agent-success)]' }
+  return 'bg-[var(--varo-agent-border-strong)]'
+})
+
+function collectCitationMappings(answer: readonly AgentRagAnswerPart[]) {
+  const mappings = new Map<string, string>()
+  for (const part of answer) {
+    if (part.type === 'citation') { mappings.set(part.id, part.sourceId) }
+  }
+  return mappings
+}
+
+let seenCitationMappings = collectCitationMappings(props.answer)
+
+function clearAllPings() {
+  for (const cancel of pingTimers.values()) {
+    cancel()
+  }
+  pingTimers.clear()
+  if (pingingSourceIds.value.size > 0) {
+    pingingSourceIds.value = new Set()
+  }
+}
+
+function removeSourcePing(sourceId: string) {
+  const cancel = pingTimers.get(sourceId)
+  if (cancel) {
+    cancel()
+    pingTimers.delete(sourceId)
+  }
+  if (!pingingSourceIds.value.has(sourceId)) { return }
+  const next = new Set(pingingSourceIds.value)
+  next.delete(sourceId)
+  pingingSourceIds.value = next
+}
+
+function pingSource(sourceId: string) {
+  if (props.reducedMotion || !sourceById.value.has(sourceId)) { return }
+  pingTimers.get(sourceId)?.()
+
+  if (!pingingSourceIds.value.has(sourceId)) {
+    const next = new Set(pingingSourceIds.value)
+    next.add(sourceId)
+    pingingSourceIds.value = next
+  }
+
+  const timer = setTimeout(() => {
+    pingTimers.delete(sourceId)
+    if (!pingingSourceIds.value.has(sourceId)) { return }
+    const next = new Set(pingingSourceIds.value)
+    next.delete(sourceId)
+    pingingSourceIds.value = next
+  }, PING_CLEAR_MS)
+  pingTimers.set(sourceId, () => clearTimeout(timer))
+}
+
+function clearInteractionState() {
+  hoveredSourceId.value = null
+  focusedSourceId.value = null
+  selectedSourceId.value = null
+}
+
+function resetEphemeralState() {
+  clearAllPings()
+  clearInteractionState()
+  seenCitationMappings = collectCitationMappings(props.answer)
+}
+
+function setHoveredSource(sourceId: string) {
+  if (!sourceById.value.has(sourceId)) { return }
+  hoveredSourceId.value = sourceId
+}
+
+function clearHoveredSource(sourceId: string) {
+  if (hoveredSourceId.value === sourceId) { hoveredSourceId.value = null }
+}
+
+function setFocusedSource(sourceId: string) {
+  hoveredSourceId.value = null
+  focusedSourceId.value = sourceId
+}
+
+function clearFocusedSource(sourceId: string) {
+  if (focusedSourceId.value === sourceId) { focusedSourceId.value = null }
+}
+
+function selectSource(entry: SourceEntry | undefined) {
+  if (!entry) { return }
+  hoveredSourceId.value = null
+  focusedSourceId.value = null
+  selectedSourceId.value = entry.source.id
+  emit('selectSource', entry.source)
+}
+
+function handleAction() {
+  resetEphemeralState()
+  if (isRunning.value) {
+    emit('cancel')
+    return
+  }
+  emit('run')
+}
+
+watch(
+  () => props.answer,
+  (answer) => {
+    const nextCitationMappings = collectCitationMappings(answer)
+    const nextSourceIds = new Set<string>()
+    const newlyMappedSourceIds = new Set<string>()
+
+    for (const [partId, sourceId] of nextCitationMappings) {
+      nextSourceIds.add(sourceId)
+      if (seenCitationMappings.get(partId) !== sourceId) {
+        newlyMappedSourceIds.add(sourceId)
+      }
+    }
+
+    if (answer.length === 0) {
+      clearAllPings()
+    }
+    else {
+      for (const [partId, sourceId] of seenCitationMappings) {
+        if (nextCitationMappings.get(partId) === sourceId) { continue }
+        if (!nextSourceIds.has(sourceId)) { removeSourcePing(sourceId) }
+      }
+    }
+    seenCitationMappings = nextCitationMappings
+
+    for (const sourceId of newlyMappedSourceIds) {
+      pingSource(sourceId)
+    }
+  },
+  { deep: true },
+)
+
+watch(
+  () => props.sources,
+  (sources) => {
+    const availableSourceIds = new Set(sources.map(source => source.id))
+    if (hoveredSourceId.value !== null && !availableSourceIds.has(hoveredSourceId.value)) {
+      hoveredSourceId.value = null
+    }
+    if (focusedSourceId.value !== null && !availableSourceIds.has(focusedSourceId.value)) {
+      focusedSourceId.value = null
+    }
+    if (selectedSourceId.value !== null && !availableSourceIds.has(selectedSourceId.value)) {
+      selectedSourceId.value = null
+    }
+    for (const sourceId of pingTimers.keys()) {
+      if (!availableSourceIds.has(sourceId)) { removeSourcePing(sourceId) }
+    }
+  },
+  { deep: true },
+)
+
+watch(overallStatus, (status, previousStatus) => {
+  if (status === 'waiting' && previousStatus !== 'waiting') {
+    resetEphemeralState()
+  }
+})
+
+watch(() => props.reducedMotion, (reduced) => {
+  if (reduced) { clearAllPings() }
+})
+
+onBeforeUnmount(clearAllPings)
+</script>
+
+<template>
+  <section
+    :class="rootClass"
+    :data-status="overallStatus"
+    :aria-busy="isRunning"
+    :aria-label="title"
+  >
+    <header class="flex min-h-14 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-4 py-3">
+      <h3 class="m-0 min-w-0 text-[13px] font-bold leading-5 text-[var(--varo-agent-foreground)]">
+        {{ title }}
+      </h3>
+      <span
+        v-if="elapsedLabel"
+        class="flex-none text-[11px] font-semibold tabular-nums text-[var(--varo-agent-muted)]"
+        :aria-label="`总耗时 ${elapsedLabel}`"
+      >
+        {{ elapsedLabel }}
+      </span>
+      <p class="sr-only" aria-atomic="true" aria-live="polite">
+        {{ liveStatus }}
+      </p>
+    </header>
+
+    <ol class="m-0 grid list-none p-4">
+      <li
+        v-for="stage in stageEntries"
+        :key="stage.id"
+        class="agent-rag__stage relative grid min-w-0 grid-cols-[34px_minmax(0,1fr)] gap-x-3 pb-4 last:pb-0"
+        :data-rag-stage="stage.id"
+        :data-status="stage.status"
+      >
+        <span class="agent-rag__rail relative flex justify-center" aria-hidden="true">
+          <span v-if="!stage.isLast" class="agent-rag__connector">
+            <span class="agent-rag__connector-fill" />
+          </span>
+          <span class="agent-rag__marker">
+            <span class="agent-rag__stage-icon" :style="stage.iconStyle" />
+          </span>
+        </span>
+
+        <section class="min-w-0 pb-0.5" :aria-label="stage.label">
+          <div class="flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1">
+            <strong class="min-w-0 text-[12px] font-bold leading-[18px] text-[var(--varo-agent-foreground)]">
+              {{ stage.label }}
+            </strong>
+            <span class="flex flex-none items-center gap-2">
+              <small
+                v-if="stage.durationLabel"
+                class="text-[10px] tabular-nums text-[var(--varo-agent-muted)]"
+              >
+                {{ stage.durationLabel }}
+              </small>
+              <span class="rounded-full px-2 py-0.5 text-[10px] font-bold leading-4" :class="stage.statusClass">
+                {{ stage.statusLabel }}
+              </span>
+            </span>
+          </div>
+          <p class="m-0 mt-0.5 text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+            {{ stage.detail }}
+          </p>
+
+          <div v-if="stage.id === 'query'" class="agent-rag__panel mt-2.5">
+            <p
+              v-if="query"
+              class="agent-rag__query m-0 whitespace-pre-wrap break-words text-[14px] leading-6 text-[var(--varo-agent-text)]"
+            >
+              {{ query }}
+            </p>
+            <p v-else class="m-0 text-[11px] text-[var(--varo-agent-muted)]">
+              尚未提供查询
+            </p>
+          </div>
+
+          <div v-else-if="stage.id === 'embed'" class="agent-rag__panel mt-2.5">
+            <span
+              class="agent-rag__vector"
+              :class="{ 'is-running': stage.status === 'running' }"
+              aria-hidden="true"
+            >
+              <span v-for="cell in vectorCells" :key="cell" class="agent-rag__vector-cell" />
+              <span class="agent-rag__vector-scan" />
+            </span>
+          </div>
+
+          <div v-else-if="stage.id === 'retrieve'" class="mt-2.5">
+            <ul v-if="sourceEntries.length" class="m-0 grid list-none gap-2 p-0">
+              <li v-for="entry in sourceEntries" :key="entry.source.id" class="min-w-0">
+                <button
+                  class="agent-rag__source w-full min-w-0 rounded-xl border border-transparent bg-transparent p-2 text-left"
+                  :class="[
+                    entry.toneClass,
+                    {
+                      'is-highlighted': activeSourceId === entry.source.id,
+                      'is-pinging': pingingSourceIds.has(entry.source.id),
+                    },
+                  ]"
+                  type="button"
+                  :aria-label="entry.selectLabel"
+                  :aria-pressed="selectedSourceId === entry.source.id"
+                  :data-rag-source="entry.source.id"
+                  @mouseenter="setHoveredSource(entry.source.id)"
+                  @mousemove="setHoveredSource(entry.source.id)"
+                  @mouseleave="clearHoveredSource(entry.source.id)"
+                  @focus="setFocusedSource(entry.source.id)"
+                  @blur="clearFocusedSource(entry.source.id)"
+                  @click="selectSource(entry)"
+                >
+                  <span class="agent-rag__source-layout">
+                    <span class="agent-rag__source-number">{{ entry.number }}</span>
+                    <span class="grid min-w-0 gap-1">
+                      <span class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
+                        <strong class="agent-rag__source-title min-w-0 flex-1 text-[12px] font-semibold leading-[18px]">
+                          {{ entry.source.title }}
+                        </strong>
+                        <small
+                          v-if="selectedSourceId === entry.source.id"
+                          class="agent-rag__selected-label flex-none text-[10px] font-bold"
+                        >
+                          已选
+                        </small>
+                      </span>
+                      <span
+                        v-if="entry.source.excerpt"
+                        class="agent-rag__source-excerpt text-[11px] leading-4"
+                      >
+                        {{ entry.source.excerpt }}
+                      </span>
+                      <span v-if="entry.scorePercent !== undefined" class="mt-0.5 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                        <span
+                          class="agent-rag__score-track"
+                          role="progressbar"
+                          aria-label="来源相关度"
+                          aria-valuemin="0"
+                          aria-valuemax="100"
+                          :aria-valuenow="entry.scorePercent"
+                        >
+                          <span class="agent-rag__score-fill" :style="entry.scoreStyle" />
+                        </span>
+                        <span class="text-[10px] font-semibold tabular-nums text-[var(--varo-agent-muted)]">{{ entry.scorePercent }}%</span>
+                      </span>
+                    </span>
+                  </span>
+                  <span class="agent-rag__ping-ring" aria-hidden="true" />
+                </button>
+              </li>
+            </ul>
+            <p v-else class="agent-rag__panel m-0 text-[11px] text-[var(--varo-agent-muted)]">
+              暂无检索来源
+            </p>
+          </div>
+
+          <div v-else-if="stage.id === 'assemble'" class="mt-2.5">
+            <ol
+              v-if="sourceEntries.length"
+              class="agent-rag__segments m-0 flex list-none p-0"
+              aria-label="来源上下文构成"
+            >
+              <li
+                v-for="entry in sourceEntries"
+                :key="entry.source.id"
+                class="agent-rag__segment"
+                :class="[
+                  entry.toneClass,
+                  {
+                    'is-highlighted': activeSourceId === entry.source.id,
+                    'is-pinging': pingingSourceIds.has(entry.source.id),
+                  },
+                ]"
+                :style="entry.segmentStyle"
+                :title="`来源 ${entry.number}：${entry.source.title}`"
+              >
+                <span class="agent-rag__segment-number" aria-hidden="true">{{ entry.number }}</span>
+                <span class="sr-only">来源 {{ entry.number }}：{{ entry.source.title }}</span>
+                <span class="agent-rag__ping-ring" aria-hidden="true" />
+              </li>
+            </ol>
+            <p v-else class="agent-rag__panel m-0 text-[11px] text-[var(--varo-agent-muted)]">
+              暂无可组装来源
+            </p>
+          </div>
+
+          <div v-else class="agent-rag__panel mt-2.5">
+            <p
+              v-if="answerEntries.length"
+              class="agent-rag__answer m-0 text-[14px] leading-6 text-[var(--varo-agent-foreground)]"
+              aria-label="生成回答"
+            >
+              <template v-for="part in answerEntries" :key="part.id">
+                <span v-if="part.type === 'text'" class="agent-rag__answer-text">{{ part.text }}</span>
+                <button
+                  v-else
+                  class="agent-rag__citation"
+                  :class="[
+                    part.source?.toneClass ?? 'agent-rag__citation--missing',
+                    { 'is-highlighted': activeSourceId === part.sourceId },
+                  ]"
+                  type="button"
+                  :disabled="!part.source"
+                  :aria-label="part.selectLabel"
+                  :aria-pressed="selectedSourceId === part.sourceId"
+                  :data-rag-citation="part.sourceId"
+                  @mouseenter="setHoveredSource(part.sourceId)"
+                  @mousemove="setHoveredSource(part.sourceId)"
+                  @mouseleave="clearHoveredSource(part.sourceId)"
+                  @focus="setFocusedSource(part.sourceId)"
+                  @blur="clearFocusedSource(part.sourceId)"
+                  @click="selectSource(part.source)"
+                >
+                  {{ part.displayLabel }}
+                </button>
+              </template>
+              <span v-if="stage.status === 'running'" class="agent-rag__cursor" aria-hidden="true" />
+            </p>
+            <p v-else class="m-0 text-[11px] text-[var(--varo-agent-muted)]">
+              {{ emptyAnswerLabel }}<span v-if="stage.status === 'running'" class="agent-rag__cursor" aria-hidden="true" />
+            </p>
+          </div>
+        </section>
+      </li>
+    </ol>
+
+    <footer class="flex min-h-14 flex-wrap items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-4 py-2.5">
+      <span class="inline-flex min-w-0 items-center gap-2 text-[11px] font-semibold text-[var(--varo-agent-text)]">
+        <span class="h-2 w-2 flex-none rounded-full" :class="footerDotClass" aria-hidden="true" />
+        <span>{{ footerStatusLabel }}</span>
+      </span>
+      <button :class="actionClass" type="button" @click="handleAction">
+        {{ actionLabel }}
+      </button>
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.agent-rag__action {
+  transition:
+    background-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    border-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease);
+}
+
+.agent-rag__stage {
+  isolation: isolate;
+}
+
+.agent-rag__rail {
+  align-self: stretch;
+}
+
+.agent-rag__connector {
+  position: absolute;
+  top: 32px;
+  bottom: -16px;
+  left: 50%;
+  z-index: -1;
+  width: 2px;
+  overflow: hidden;
+  background: var(--varo-agent-border);
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.agent-rag__connector-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--varo-agent-success);
+  border-radius: inherit;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform var(--varo-agent-motion-enter) var(--varo-agent-motion-ease);
+}
+
+.agent-rag__stage[data-status='completed'] .agent-rag__connector-fill {
+  transform: scaleY(1);
+}
+
+.agent-rag__marker {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  color: var(--varo-agent-muted);
+  background: var(--varo-agent-surface);
+  border: 1px solid var(--varo-agent-border);
+  border-radius: 10px;
+  transition:
+    color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    background-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    border-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    box-shadow var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease);
+}
+
+.agent-rag__stage[data-status='running'] .agent-rag__marker {
+  color: var(--varo-agent-primary);
+  background: var(--varo-agent-primary-soft);
+  border-color: var(--varo-agent-primary);
+  animation: varo-agent-rag-active var(--varo-agent-motion-loop) var(--varo-agent-motion-ease) infinite;
+}
+
+.agent-rag__stage[data-status='completed'] .agent-rag__marker {
+  color: var(--varo-agent-success);
+  background: var(--varo-agent-success-soft);
+  border-color: var(--varo-agent-success);
+}
+
+.agent-rag__stage[data-status='failed'] .agent-rag__marker {
+  color: var(--varo-agent-danger);
+  background: var(--varo-agent-danger-soft);
+  border-color: var(--varo-agent-danger);
+}
+
+.agent-rag__stage-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: currentcolor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.agent-rag__panel {
+  min-width: 0;
+  padding: 4px 0;
+}
+
+.agent-rag__query,
+.agent-rag__source-title,
+.agent-rag__source-excerpt,
+.agent-rag__answer {
+  overflow-wrap: anywhere;
+}
+
+.agent-rag__vector {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.agent-rag__vector-cell {
+  display: block;
+  height: 10px;
+  background: var(--varo-agent-border-strong);
+  border-radius: 2px;
+}
+
+.agent-rag__vector-scan {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 18%;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--varo-agent-primary) 45%, transparent);
+  opacity: 0;
+  transform: translateX(-120%);
+}
+
+.agent-rag__vector.is-running .agent-rag__vector-scan {
+  opacity: 1;
+  animation: varo-agent-rag-scan var(--varo-agent-motion-loop) linear infinite;
+}
+
+.agent-rag--tone-blue {
+  --agent-rag-tone: var(--varo-agent-source-blue);
+  --agent-rag-tone-soft: var(--varo-agent-source-blue-soft);
+}
+
+.agent-rag--tone-violet {
+  --agent-rag-tone: var(--varo-agent-source-violet);
+  --agent-rag-tone-soft: var(--varo-agent-source-violet-soft);
+}
+
+.agent-rag--tone-rose {
+  --agent-rag-tone: var(--varo-agent-source-rose);
+  --agent-rag-tone-soft: var(--varo-agent-source-rose-soft);
+}
+
+.agent-rag__source {
+  position: relative;
+  color: inherit;
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    border-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    box-shadow var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease);
+  animation: varo-agent-rag-enter var(--varo-agent-motion-enter) var(--varo-agent-motion-ease) both;
+}
+
+.agent-rag__source-layout {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.agent-rag__source-number {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  font-size: 10px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--agent-rag-tone);
+  background: var(--agent-rag-tone-soft);
+  border: 1px solid color-mix(in srgb, var(--agent-rag-tone) 30%, transparent);
+  border-radius: 8px;
+}
+
+.agent-rag__selected-label {
+  color: var(--agent-rag-tone);
+}
+
+.agent-rag__source.is-highlighted,
+.agent-rag__source.is-pinging {
+  color: #172033;
+  background: var(--agent-rag-tone-soft);
+  border-color: var(--agent-rag-tone);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-rag-tone) 18%, transparent);
+}
+
+.agent-rag__source-title {
+  color: var(--varo-agent-foreground);
+}
+
+.agent-rag__source-excerpt {
+  color: var(--varo-agent-muted);
+}
+
+.agent-rag__source.is-highlighted strong.agent-rag__source-title,
+.agent-rag__source.is-pinging strong.agent-rag__source-title {
+  color: #172033;
+}
+
+.agent-rag__source.is-highlighted .agent-rag__source-excerpt,
+.agent-rag__source.is-pinging .agent-rag__source-excerpt {
+  color: #475569;
+}
+
+.agent-rag__source:focus-visible,
+.agent-rag__citation:focus-visible {
+  outline: 2px solid var(--agent-rag-tone);
+  outline-offset: 2px;
+}
+
+.agent-rag__score-track {
+  display: block;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill);
+  border-radius: 999px;
+}
+
+.agent-rag__score-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--agent-rag-tone);
+  border-radius: inherit;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--varo-agent-motion-enter) var(--varo-agent-motion-ease);
+  animation: varo-agent-rag-score-enter var(--varo-agent-motion-enter) var(--varo-agent-motion-ease) backwards;
+}
+
+.agent-rag__segments {
+  gap: 3px;
+  min-width: 0;
+  padding: 3px;
+  overflow: hidden;
+  background: var(--varo-agent-fill);
+  border: 1px solid var(--varo-agent-border);
+  border-radius: 12px;
+}
+
+.agent-rag__segment {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-width: 20px;
+  height: 32px;
+  color: var(--agent-rag-tone);
+  background: var(--agent-rag-tone-soft);
+  border: 1px solid color-mix(in srgb, var(--agent-rag-tone) 28%, transparent);
+  border-radius: 8px;
+  transition:
+    border-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    box-shadow var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease);
+  animation: varo-agent-rag-segment-enter var(--varo-agent-motion-enter) var(--varo-agent-motion-ease) both;
+}
+
+.agent-rag__segment.is-highlighted,
+.agent-rag__segment.is-pinging {
+  border-color: var(--agent-rag-tone);
+  box-shadow: inset 0 0 0 1px var(--agent-rag-tone);
+}
+
+.agent-rag__segment-number {
+  overflow: hidden;
+  text-overflow: clip;
+  font-size: 10px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.agent-rag__answer {
+  white-space: pre-wrap;
+}
+
+.agent-rag__answer-text {
+  animation: varo-agent-rag-text-enter var(--varo-agent-motion-enter) var(--varo-agent-motion-ease) both;
+}
+
+.agent-rag__citation {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  min-height: 22px;
+  padding: 0 5px;
+  margin-inline: 2px;
+  font: inherit;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 18px;
+  vertical-align: baseline;
+  color: var(--agent-rag-tone);
+  appearance: none;
+  cursor: pointer;
+  background: var(--agent-rag-tone-soft);
+  border: 1px solid color-mix(in srgb, var(--agent-rag-tone) 30%, transparent);
+  border-radius: 6px;
+  transition:
+    background-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    border-color var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease),
+    box-shadow var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease);
+}
+
+.agent-rag__citation--missing {
+  color: var(--varo-agent-muted);
+  cursor: default;
+  background: var(--varo-agent-fill);
+  border-color: var(--varo-agent-border);
+}
+
+.agent-rag__citation.is-highlighted {
+  border-color: var(--agent-rag-tone);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-rag-tone) 18%, transparent);
+}
+
+.agent-rag__cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.05em;
+  margin-left: 3px;
+  vertical-align: -0.16em;
+  background: var(--varo-agent-primary);
+  border-radius: 999px;
+  animation: varo-agent-rag-cursor var(--varo-agent-motion-loop) steps(1) infinite;
+}
+
+.agent-rag__ping-ring {
+  position: absolute;
+  inset: -2px;
+  pointer-events: none;
+  border: 2px solid var(--agent-rag-tone);
+  border-radius: inherit;
+  opacity: 0;
+}
+
+.is-pinging > .agent-rag__ping-ring {
+  animation: varo-agent-rag-ping var(--varo-agent-motion-feedback) var(--varo-agent-motion-ease) 2;
+}
+
+@keyframes varo-agent-rag-active {
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--varo-agent-primary) 12%, transparent);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--varo-agent-primary) 22%, transparent);
+  }
+}
+
+@keyframes varo-agent-rag-score-enter {
+  from {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes varo-agent-rag-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+@keyframes varo-agent-rag-segment-enter {
+  from {
+    opacity: 0.35;
+    transform: scaleX(0.25);
+  }
+}
+
+@keyframes varo-agent-rag-text-enter {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes varo-agent-rag-scan {
+  from {
+    transform: translateX(-120%);
+  }
+
+  to {
+    transform: translateX(660%);
+  }
+}
+
+@keyframes varo-agent-rag-cursor {
+  0%,
+  48% {
+    opacity: 1;
+  }
+
+  49%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes varo-agent-rag-ping {
+  0% {
+    opacity: 0.85;
+    transform: scale(0.98);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.04);
+  }
+}
+
+.agent-rag.is-reduced-motion .agent-rag__connector-fill,
+.agent-rag.is-reduced-motion .agent-rag__marker,
+.agent-rag.is-reduced-motion .agent-rag__score-fill,
+.agent-rag.is-reduced-motion .agent-rag__source,
+.agent-rag.is-reduced-motion .agent-rag__action,
+.agent-rag.is-reduced-motion .agent-rag__segment,
+.agent-rag.is-reduced-motion .agent-rag__answer-text,
+.agent-rag.is-reduced-motion .agent-rag__citation,
+.agent-rag.is-reduced-motion .agent-rag__ping-ring {
+  transition: none;
+  animation: none;
+}
+
+.agent-rag.is-reduced-motion .agent-rag__vector-scan,
+.agent-rag.is-reduced-motion .agent-rag__cursor {
+  display: none;
+}
+
+.agent-rag.is-reduced-motion .is-pinging > .agent-rag__ping-ring {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-rag__connector-fill,
+  .agent-rag__marker,
+  .agent-rag__score-fill,
+  .agent-rag__source,
+  .agent-rag__action,
+  .agent-rag__segment,
+  .agent-rag__answer-text,
+  .agent-rag__citation,
+  .agent-rag__ping-ring {
+    transition: none;
+    animation: none;
+  }
+
+  .agent-rag__vector-scan,
+  .agent-rag__cursor {
+    display: none;
+  }
+
+  .is-pinging > .agent-rag__ping-ring {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>
diff --git a/apps/docs/src/components/agent-ui/advanced.ts b/apps/docs/src/components/agent-ui/advanced.ts
index cd3e25d1..77980eab 100644
--- a/apps/docs/src/components/agent-ui/advanced.ts
+++ b/apps/docs/src/components/agent-ui/advanced.ts
@@ -78,6 +78,39 @@ function renderStatus(status: AgentAdvancedStatus) {
   ])
 }
 
+function activityKindLabel(kind: AgentActivityItem['kind']) {
+  if (kind === 'reasoning') { return '推理' }
+  if (kind === 'search') { return '检索' }
+  if (kind === 'tool') { return '工具' }
+  return '轨迹'
+}
+
+function renderActivityKindIcon(kind: AgentActivityItem['kind']) {
+  const children = kind === 'search'
+    ? [h('circle', { cx: '11', cy: '11', r: '6' }), h('path', { d: 'm16 16 4 4' })]
+    : [h('path', {
+        d: kind === 'reasoning'
+          ? 'M12 3.5 13.4 8 18 9.2 13.4 10.5 12 15l-1.4-4.5L6 9.2 10.6 8 12 3.5zM18 13.5l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8.8-2.4z'
+          : kind === 'tool'
+            ? 'M8 7h8M8 12h8M8 17h5'
+            : 'M7 7h10M7 12h10M7 17h6',
+      })]
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, children)
+}
+
+function citationMark(item: AgentCitationItem) {
+  const source = item.domain || item.title
+  return source.trim().charAt(0).toUpperCase() || '#'
+}
+
 function renderPlusIcon() {
   return h('svg', {
     'fill': 'none',
@@ -91,6 +124,30 @@ function renderPlusIcon() {
   }, [h('path', { d: 'M12 5v14M5 12h14' })])
 }
 
+function renderChatIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, [h('path', { d: 'M5 6h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3v-3H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z' })])
+}
+
+function renderSearchIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, [h('circle', { cx: '11', cy: '11', r: '6' }), h('path', { d: 'm16 16 4 4' })])
+}
+
 export const AgentRadioGroup = defineComponent({
   name: 'AgentRadioGroup',
   props: {
@@ -488,7 +545,8 @@ export const AgentToolResult = defineComponent({
   emits: { 'retry': () => true, 'update:open': (_value: boolean) => true },
   setup(props, { emit, slots }) {
     const open = shallowRef(props.defaultOpen || props.status === 'running' || props.status === 'failed')
-    return () => h('section', { 'class': 'agent-tool-result', 'data-status': props.status }, [
+    const meta = computed(() => [props.duration, props.summary].filter(Boolean).join(' · '))
+    return () => h('section', { 'class': 'agent-tool-result', 'data-open': String(open.value), 'data-status': props.status }, [
       h('button', {
         'class': 'agent-tool-result__header',
         'type': 'button',
@@ -498,8 +556,14 @@ export const AgentToolResult = defineComponent({
           emit('update:open', open.value)
         },
       }, [
-        h('span', [renderStatus(props.status), h('strong', props.name)]),
-        h('small', props.duration || props.summary),
+        h('span', { class: 'agent-tool-result__command' }, [
+          h('span', { 'class': 'agent-tool-result__prompt', 'aria-hidden': 'true' }, '$'),
+          h('strong', props.name),
+        ]),
+        h('span', { class: 'agent-tool-result__meta' }, [
+          renderStatus(props.status),
+          meta.value ? h('small', meta.value) : null,
+        ]),
       ]),
       open.value
         ? h('div', { class: 'agent-tool-result__body' }, slots.default?.() ?? [h('pre', props.output)])
@@ -688,12 +752,22 @@ export const AgentCitations = defineComponent({
           open.value = !open.value
           emit('update:open', open.value)
         },
-      }, [h('strong', props.title), h('span', `${props.items.length}`)]),
+      }, [
+        h('span', { class: 'agent-citations__heading' }, [
+          h('strong', props.title),
+          h('small', open.value ? '点击来源打开原文' : '展开查看引用来源'),
+        ]),
+        h('span', { class: 'agent-citations__count' }, `${props.items.length}`),
+      ]),
       open.value
-        ? h('ol', props.items.map((item, index) => h('li', { key: item.id }, [
-            h('button', { type: 'button', onClick: () => emit('open', item) }, [
-              h('span', String(index + 1)),
-              h('span', [h('strong', item.title), h('small', item.domain || item.description || item.url)]),
+        ? h('ol', { class: 'agent-citations__list' }, props.items.map(item => h('li', { key: item.id }, [
+            h('button', { class: 'agent-citations__item', type: 'button', onClick: () => emit('open', item) }, [
+              h('span', { 'class': 'agent-citations__mark', 'aria-hidden': 'true' }, citationMark(item)),
+              h('span', { class: 'agent-citations__copy' }, [
+                h('strong', item.title),
+                h('small', item.domain || item.url || ''),
+                item.description ? h('p', item.description) : null,
+              ]),
             ]),
           ])))
         : null,
@@ -708,12 +782,39 @@ export const AgentActivity = defineComponent({
     title: { type: String, default: 'Agent activity' },
   },
   setup(props) {
+    const completed = computed(() => props.items.filter(item => item.status === 'completed').length)
+    const current = computed(() => props.items.find(item => item.status === 'running' || item.status === 'failed'))
     return () => h('section', { 'class': 'agent-activity', 'aria-live': 'polite' }, [
-      h('header', [h('strong', props.title), h('span', `${props.items.filter(item => item.status === 'completed').length}/${props.items.length}`)]),
-      h('ol', props.items.map(item => h('li', { 'data-kind': item.kind, 'data-status': item.status, 'key': item.id }, [
-        h('i', { 'aria-hidden': 'true' }),
-        h('div', [h('span', [h('strong', item.title), item.duration ? h('small', item.duration) : null]), item.detail ? h('p', item.detail) : null]),
-        renderStatus(item.status),
+      h('header', { class: 'agent-activity__header' }, [
+        h('span', { class: 'agent-activity__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.items.length && props.items.length ? '全部完成' : '等待开始'),
+        ]),
+        h('span', { class: 'agent-activity__count' }, `${completed.value}/${props.items.length}`),
+      ]),
+      h('ol', { class: 'agent-activity__body' }, props.items.map(item => h('li', {
+        'class': 'agent-activity__item',
+        'data-kind': item.kind,
+        'data-status': item.status,
+        'aria-current': item.status === 'running' ? 'step' : undefined,
+        'key': item.id,
+      }, [
+        h('span', { 'class': 'agent-activity__kind', 'aria-hidden': 'true' }, [
+          renderActivityKindIcon(item.kind),
+        ]),
+        h('span', { class: 'agent-activity__copy' }, [
+          h('span', { class: 'agent-activity__row' }, [
+            h('strong', item.title),
+            renderStatus(item.status),
+          ]),
+          h('span', { class: 'agent-activity__meta' }, [
+            h('small', { class: 'agent-activity__kind-label' }, activityKindLabel(item.kind)),
+            item.duration ? h('small', item.duration) : null,
+          ]),
+          item.detail ? h('p', item.detail) : null,
+        ]),
       ]))),
     ])
   },
@@ -735,13 +836,26 @@ export const AgentSidebar = defineComponent({
   },
   setup(props, { emit, slots }) {
     return () => h('aside', { 'class': 'agent-sidebar', 'data-collapsed': String(props.collapsed) }, [
-      h('header', [
-        h('strong', props.collapsed ? 'AI' : props.title),
-        h('button', { 'type': 'button', 'aria-label': 'Toggle sidebar', 'onClick': () => emit('update:collapsed', !props.collapsed) }, props.collapsed ? '›' : '‹'),
+      h('header', { class: 'agent-sidebar__header' }, [
+        h('span', { class: 'agent-sidebar__heading' }, [
+          h('span', { 'class': 'agent-sidebar__brand', 'aria-hidden': 'true' }, [renderChatIcon()]),
+          !props.collapsed ? h('strong', props.title) : null,
+        ]),
+        h('button', {
+          'class': 'agent-sidebar__toggle',
+          'type': 'button',
+          'aria-label': 'Toggle sidebar',
+          'onClick': () => emit('update:collapsed', !props.collapsed),
+        }, props.collapsed ? '›' : '‹'),
       ]),
-      !props.collapsed ? h('button', { class: 'agent-sidebar__create', type: 'button', onClick: () => emit('create') }, '+ New chat') : null,
-      h('nav', props.groups.map(group => h('section', { key: group.id }, [
-        !props.collapsed ? h('small', group.label) : null,
+      !props.collapsed
+        ? h('button', { class: 'agent-sidebar__create', type: 'button', onClick: () => emit('create') }, [
+            renderPlusIcon(),
+            'New chat',
+          ])
+        : null,
+      h('nav', { class: 'agent-sidebar__nav', role: 'navigation' }, props.groups.map(group => h('section', { class: 'agent-sidebar__group', key: group.id }, [
+        !props.collapsed ? h('small', { class: 'agent-sidebar__group-label' }, group.label) : null,
         ...group.items.map(item => h('button', {
           'class': 'agent-sidebar__item',
           'data-active': String(item.id === props.activeId),
@@ -753,9 +867,14 @@ export const AgentSidebar = defineComponent({
             emit('select', item)
           },
         }, [
-          h('i', { 'aria-hidden': 'true' }, item.label.charAt(0).toUpperCase()),
-          !props.collapsed ? h('span', [h('strong', item.label), item.meta ? h('small', item.meta) : null]) : null,
-          !props.collapsed && item.badge !== undefined ? h('b', String(item.badge)) : null,
+          h('span', { 'class': 'agent-sidebar__mark', 'aria-hidden': 'true' }, [renderChatIcon()]),
+          !props.collapsed
+            ? h('span', { class: 'agent-sidebar__copy' }, [
+                h('strong', item.label),
+                item.meta ? h('small', item.meta) : null,
+              ])
+            : null,
+          !props.collapsed && item.badge !== undefined ? h('b', { class: 'agent-sidebar__badge' }, String(item.badge)) : null,
         ])),
       ]))),
       slots.footer?.(),
@@ -772,11 +891,28 @@ export const AgentContextCard = defineComponent({
   emits: { open: (_chunk: AgentContextChunk) => true },
   setup(props, { emit }) {
     return () => h('section', { class: 'agent-context-card' }, [
-      h('header', [h('strong', props.title), h('span', `${props.chunks.length} chunks`)]),
-      h('div', props.chunks.map(chunk => h('article', { key: chunk.id }, [
-        h('header', [h('strong', chunk.label || chunk.source || 'Context'), chunk.content.length ? h('small', `${chunk.content.length} chars`) : null]),
-        h('p', chunk.content),
-        h('footer', [h('span', chunk.sourceType || 'Source'), h('button', { type: 'button', onClick: () => emit('open', chunk) }, chunk.source || 'Open')]),
+      h('header', { class: 'agent-context-card__header' }, [
+        h('span', { class: 'agent-context-card__heading' }, [
+          h('strong', props.title),
+          h('small', props.chunks.length ? '来自检索结果的上下文片段' : '暂无检索上下文'),
+        ]),
+        h('span', { class: 'agent-context-card__count' }, `${props.chunks.length}`),
+      ]),
+      h('ol', { class: 'agent-context-card__list' }, props.chunks.map((chunk, index) => h('li', { key: chunk.id }, [
+        h('article', { class: 'agent-context-card__chunk' }, [
+          h('header', { class: 'agent-context-card__chunk-head' }, [
+            h('span', { 'class': 'agent-context-card__index', 'aria-hidden': 'true' }, String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-context-card__chunk-copy' }, [
+              h('strong', chunk.label || chunk.source || 'Context'),
+              chunk.sourceType ? h('small', { class: 'agent-context-card__type' }, chunk.sourceType) : null,
+            ]),
+          ]),
+          h('p', { class: 'agent-context-card__quote' }, chunk.content),
+          h('footer', { class: 'agent-context-card__chunk-foot' }, [
+            h('small', chunk.source || 'Source'),
+            h('button', { class: 'agent-context-card__open', type: 'button', onClick: () => emit('open', chunk) }, '打开'),
+          ]),
+        ]),
       ]))),
     ])
   },
@@ -797,11 +933,27 @@ export const AgentInsightCard = defineComponent({
       emit('update:current', (props.current + delta + props.insights.length) % props.insights.length)
     }
     return () => h('article', { 'class': 'agent-insight-card', 'data-tone': active.value?.tone || 'default' }, [
-      h('header', [h('strong', props.title), h('span', `${props.current + 1}/${props.insights.length}`)]),
-      active.value ? h('div', [active.value.label ? h('small', active.value.label) : null, h('h3', active.value.description), active.value.value ? h('b', active.value.value) : null]) : h('p', 'No insights'),
-      h('footer', [
-        h('span', [h('button', { type: 'button', onClick: () => move(-1) }, '‹'), h('button', { type: 'button', onClick: () => move(1) }, '›')]),
-        active.value?.action ? h('button', { type: 'button', onClick: () => emit('action', active.value!) }, active.value.action) : null,
+      h('header', { class: 'agent-insight-card__header' }, [
+        h('span', { class: 'agent-insight-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value?.label || '运行指标'),
+        ]),
+        h('span', { class: 'agent-insight-card__count' }, `${props.insights.length ? props.current + 1 : 0}/${props.insights.length}`),
+      ]),
+      active.value
+        ? h('div', { class: 'agent-insight-card__body' }, [
+            active.value.value ? h('b', { class: 'agent-insight-card__value' }, active.value.value) : null,
+            h('p', { class: 'agent-insight-card__copy' }, active.value.description),
+          ])
+        : h('p', { class: 'agent-insight-card__empty' }, '暂无洞察'),
+      h('footer', { class: 'agent-insight-card__footer' }, [
+        h('span', { class: 'agent-insight-card__nav' }, [
+          h('button', { 'class': 'agent-insight-card__nav-btn', 'type': 'button', 'aria-label': 'Previous insight', 'onClick': () => move(-1) }, '‹'),
+          h('button', { 'class': 'agent-insight-card__nav-btn', 'type': 'button', 'aria-label': 'Next insight', 'onClick': () => move(1) }, '›'),
+        ]),
+        active.value?.action
+          ? h('button', { class: 'agent-insight-card__action', type: 'button', onClick: () => emit('action', active.value!) }, active.value.action)
+          : null,
       ]),
     ])
   },
@@ -816,8 +968,9 @@ export const AgentSelectionActions = defineComponent({
   emits: { select: (_payload: { action: AgentSelectionAction, text: string }) => true },
   setup(props, { emit }) {
     return () => h('section', { class: 'agent-selection-actions' }, [
-      h('blockquote', props.text),
-      h('div', props.actions.map(action => h('button', {
+      h('p', { class: 'agent-selection-actions__quote' }, props.text),
+      h('div', { class: 'agent-selection-actions__toolbar' }, props.actions.map(action => h('button', {
+        class: 'agent-selection-actions__action',
         key: action.id,
         type: 'button',
         onClick: () => emit('select', { action, text: props.text }),
@@ -937,14 +1090,38 @@ export const AgentCommandSearch = defineComponent({
       const query = props.modelValue.trim().toLowerCase()
       return query ? props.items.filter(item => `${item.label} ${item.description ?? ''} ${item.group ?? ''}`.toLowerCase().includes(query)) : props.items
     })
+    const groupedItems = computed(() => {
+      const groups = new Map<string, AgentSearchItem[]>()
+      for (const item of visibleItems.value) {
+        const key = item.group || 'Commands'
+        const list = groups.get(key)
+        if (list) { list.push(item) }
+        else { groups.set(key, [item]) }
+      }
+      return [...groups.entries()].map(([label, items]) => ({ label, items }))
+    })
     return () => h('section', { class: 'agent-command-search' }, [
-      h('label', [h('span', '⌕'), h('input', { value: props.modelValue, placeholder: props.placeholder, onInput: (event: Event) => emit('update:modelValue', eventValue(event)) })]),
-      visibleItems.value.length
-        ? h('div', visibleItems.value.map(item => h('button', { key: item.id, type: 'button', onClick: () => emit('select', item) }, [
-            h('span', [h('strong', item.label), item.description ? h('small', item.description) : null]),
-            item.shortcut ? h('kbd', item.shortcut) : null,
-          ])))
-        : h('p', props.emptyText),
+      h('label', { class: 'agent-command-search__field' }, [
+        h('span', { 'class': 'agent-command-search__icon', 'aria-hidden': 'true' }, [renderSearchIcon()]),
+        h('input', { value: props.modelValue, placeholder: props.placeholder, onInput: (event: Event) => emit('update:modelValue', eventValue(event)) }),
+      ]),
+      groupedItems.value.length
+        ? h('div', { class: 'agent-command-search__list' }, groupedItems.value.flatMap(group => [
+            h('small', { class: 'agent-command-search__group', key: `group-${group.label}` }, group.label),
+            ...group.items.map(item => h('button', {
+              class: 'agent-command-search__item',
+              key: item.id,
+              type: 'button',
+              onClick: () => emit('select', item),
+            }, [
+              h('span', { class: 'agent-command-search__copy' }, [
+                h('strong', item.label),
+                item.description ? h('small', item.description) : null,
+              ]),
+              item.shortcut ? h('kbd', item.shortcut) : null,
+            ])),
+          ]))
+        : h('p', { class: 'agent-command-search__empty' }, props.emptyText),
     ])
   },
 })
@@ -957,17 +1134,36 @@ export const AgentFlowchart = defineComponent({
   },
   emits: { add: (_afterId?: string) => true, select: (_node: AgentFlowNode) => true },
   setup(props, { emit }) {
+    const typeLabel = (type: AgentFlowNode['type']) => {
+      if (type === 'trigger') { return '触发' }
+      if (type === 'condition') { return '条件' }
+      if (type === 'action') { return '动作' }
+      return '结果'
+    }
     return () => h('section', { class: 'agent-flowchart' }, [
-      h('header', [
-        h('strong', props.title),
-        h('button', { type: 'button', onClick: () => emit('add', undefined) }, [renderPlusIcon(), ' Step']),
+      h('header', { class: 'agent-flowchart__header' }, [
+        h('span', { class: 'agent-flowchart__heading' }, [
+          h('strong', props.title),
+          h('small', `${props.nodes.length} 个步骤`),
+        ]),
+        h('button', { class: 'agent-flowchart__add', type: 'button', onClick: () => emit('add', undefined) }, [renderPlusIcon(), 'Step']),
       ]),
-      h('div', props.nodes.flatMap((node, index): VNodeChild[] => [
-        h('button', { 'class': 'agent-flowchart__node', 'data-type': node.type, 'key': node.id, 'type': 'button', 'onClick': () => emit('select', node) }, [
-          h('small', node.type),
+      h('div', { class: 'agent-flowchart__canvas' }, props.nodes.flatMap((node, index): VNodeChild[] => [
+        h('button', {
+          'class': 'agent-flowchart__node',
+          'data-type': node.type,
+          'data-status': node.status || 'waiting',
+          'key': node.id,
+          'type': 'button',
+          'onClick': () => emit('select', node),
+        }, [
+          h('span', { class: 'agent-flowchart__node-head' }, [
+            h('span', { 'class': 'agent-flowchart__index', 'aria-hidden': 'true' }, String(index + 1).padStart(2, '0')),
+            h('small', { class: 'agent-flowchart__type' }, typeLabel(node.type)),
+            node.status ? renderStatus(node.status) : null,
+          ]),
           h('strong', node.label),
-          node.detail ? h('span', node.detail) : null,
-          node.status ? renderStatus(node.status) : null,
+          node.detail ? h('span', { class: 'agent-flowchart__detail' }, node.detail) : null,
         ]),
         index < props.nodes.length - 1
           ? h('button', {
@@ -1039,9 +1235,17 @@ export const AgentFineTune = defineComponent({
     }
 
     return () => h('section', { class: 'agent-fine-tune' }, [
-      h('header', [h('strong', props.title), h('span', 'Adjust')]),
-      h('div', props.controls.map(renderControl)),
-      h('footer', [h('button', { type: 'button', onClick: () => emit('apply', props.controls) }, 'Apply changes')]),
+      h('header', { class: 'agent-fine-tune__header' }, [
+        h('span', { class: 'agent-fine-tune__heading' }, [
+          h('strong', props.title),
+          h('small', '调整生成参数后立即生效'),
+        ]),
+        h('span', { class: 'agent-fine-tune__count' }, `${props.controls.length} 项`),
+      ]),
+      h('div', { class: 'agent-fine-tune__grid' }, props.controls.map(renderControl)),
+      h('footer', { class: 'agent-fine-tune__footer' }, [
+        h('button', { class: 'agent-fine-tune__apply', type: 'button', onClick: () => emit('apply', props.controls) }, 'Apply changes'),
+      ]),
     ])
   },
 })
diff --git a/apps/docs/src/components/agent-ui/agent-advanced.css b/apps/docs/src/components/agent-ui/agent-advanced.css
index 1716ae61..84e5799f 100644
--- a/apps/docs/src/components/agent-ui/agent-advanced.css
+++ b/apps/docs/src/components/agent-ui/agent-advanced.css
@@ -161,10 +161,88 @@
 .agent-code-block__cursor { position: absolute; right: 12px; bottom: 12px; width: 6px; height: 14px; background: #2dd4bf; animation: varo-agent-code-cursor .75s steps(1) infinite; }
 
 @keyframes varo-agent-code-cursor { 50% { opacity: 0; } }
-.agent-tool-result, .agent-citations, .agent-activity, .agent-context-card, .agent-insight-card, .agent-tool-approval, .agent-fine-tune { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; }
-.agent-tool-result__header, .agent-citations__trigger { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 13px; text-align: left; background: var(--agent-surface); border: 0; }
-.agent-tool-result__header > span { display: flex; gap: 9px; align-items: center; min-width: 0; }
-.agent-tool-result__header strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--agent-text); white-space: nowrap; }
+.agent-citations, .agent-activity, .agent-context-card, .agent-insight-card, .agent-tool-approval, .agent-fine-tune { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; }
+
+
+.agent-tool-result {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-tool-result__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  background: #111c30;
+  border: 0;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-tool-result[data-open='false'] .agent-tool-result__header {
+  border-bottom-color: transparent;
+}
+
+.agent-tool-result__command {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agent-tool-result__prompt {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2dd4bf;
+}
+
+.agent-tool-result__command strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-tool-result__meta {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-tool-result__meta .agent-advanced__status {
+  padding: 3px 8px;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 12%);
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 999px;
+}
+
+.agent-tool-result__meta .agent-advanced__status[data-status='completed'],
+.agent-tool-result__meta .agent-advanced__status[data-status='running'] {
+  color: #5eead4;
+  background: rgb(45 212 191 / 12%);
+  border-color: rgb(45 212 191 / 24%);
+}
+
+.agent-tool-result__meta .agent-advanced__status[data-status='failed'] {
+  color: #fca5a5;
+  background: rgb(248 113 113 / 12%);
+  border-color: rgb(248 113 113 / 24%);
+}
 
 .agent-file-diff {
   --agent-diff-surface: var(--varo-agent-surface, #fff);
@@ -397,9 +475,9 @@
 .agent-file-diff__action:hover { color: var(--agent-diff-text); border-color: #99a7b6; }
 .agent-file-diff__action:last-child { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); box-shadow: 0 5px 12px rgb(15 118 110 / 20%); }
 .agent-file-diff__action:disabled { cursor: not-allowed; opacity: .5; }
-.agent-tool-approval > footer, .agent-insight-card > footer, .agent-fine-tune > footer, .agent-image-generation > footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid var(--agent-border); }
-.agent-tool-approval button, .agent-insight-card button, .agent-fine-tune button, .agent-image-generation button { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-text-regular); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 10px; }
-.agent-tool-approval > footer button:last-child, .agent-fine-tune > footer button { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); }
+.agent-tool-approval > footer, .agent-image-generation > footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid var(--agent-border); }
+.agent-tool-approval button, .agent-image-generation button { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-text-regular); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 10px; }
+.agent-tool-approval > footer button:last-child { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); }
 
 @media (max-width: 600px) {
   .agent-file-diff__header { gap: 7px; padding-inline: 9px; }
@@ -411,10 +489,10 @@
   .agent-file-diff__hunk-count { display: none; }
   .agent-file-diff__footer { padding-inline: 9px; }
 }
-.agent-tool-result__header small { font-size: 11px; color: var(--agent-muted); }
-.agent-tool-result__body { padding: 12px; color: #cbd5e1; background: #0f172a; border-top: 1px solid var(--agent-border); }
-.agent-tool-result__body pre { margin: 0; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 11px; white-space: pre-wrap; }
-.agent-tool-result__retry { min-height: 32px; padding: 0 10px; margin: 0 12px 12px; font-size: 11px; color: #dc2626; background: var(--agent-surface); border: 1px solid #fecaca; border-radius: 9px; }
+.agent-tool-result__header small { font-size: 11px; font-variant-numeric: tabular-nums; color: #94a3b8; }
+.agent-tool-result__body { padding: 12px; color: #cbd5e1; background: #0f172a; }
+.agent-tool-result__body pre { margin: 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
+.agent-tool-result__retry { min-height: 32px; padding: 0 10px; margin: 0 12px 12px; font-size: 11px; font-weight: 750; color: #fecaca; background: rgb(248 113 113 / 10%); border: 1px solid rgb(248 113 113 / 28%); border-radius: 9px; }
 .agent-image-generation { margin: 0; }
 
 .agent-image-generation__canvas {
@@ -471,65 +549,747 @@
 .agent-tool-approval dt { color: var(--agent-muted); }
 .agent-tool-approval dd { margin: 0; font-weight: 650; color: var(--agent-text); text-align: right; }
 .agent-tool-approval > label { display: flex; gap: 7px; align-items: center; padding: 0 14px 12px; font-size: 11px; color: var(--agent-text-regular); }
-.agent-citations__trigger strong { font-size: 12px; }
-.agent-citations__trigger span { display: grid; place-items: center; width: 24px; height: 24px; font-size: 11px; color: var(--agent-muted); background: var(--agent-fill); border-radius: 999px; }
-.agent-citations ol { display: grid; gap: 7px; padding: 0 12px 12px; margin: 0; list-style: none; }
-.agent-citations li button { display: flex; gap: 9px; align-items: center; width: 100%; min-height: 42px; padding: 6px 9px; text-align: left; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 11px; }
-.agent-citations li button > span:first-child { display: grid; flex: none; place-items: center; width: 22px; height: 22px; font-size: 10px; color: var(--agent-muted); background: var(--agent-surface); border-radius: 999px; }
-.agent-citations li button > span:last-child { display: grid; min-width: 0; }
-.agent-citations li strong, .agent-citations li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-citations li strong { font-size: 11px; color: var(--agent-text); }
-.agent-citations li small { font-size: 10px; color: var(--agent-muted); }
-.agent-activity > header, .agent-context-card > header, .agent-insight-card > header, .agent-fine-tune > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border-bottom: 1px solid var(--agent-border); }
-.agent-activity > header strong, .agent-context-card > header strong, .agent-insight-card > header strong, .agent-fine-tune > header strong { font-size: 12px; }
-.agent-activity > header span, .agent-context-card > header span, .agent-insight-card > header span, .agent-fine-tune > header span { font-size: 11px; color: var(--agent-muted); }
-.agent-activity ol { display: grid; gap: 0; padding: 10px 13px 13px; margin: 0; list-style: none; }
-.agent-activity li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; padding: 8px 0; }
-.agent-activity li > i { width: 9px; height: 9px; margin-top: 4px; background: var(--agent-muted); border: 2px solid var(--agent-surface); border-radius: 999px; box-shadow: 0 0 0 1px var(--agent-border-strong); }
-.agent-activity li[data-status='running'] > i { background: var(--agent-primary); }
-.agent-activity li[data-status='completed'] > i { background: var(--agent-success); }
-.agent-activity li > div { display: grid; min-width: 0; }
-.agent-activity li > div > span { display: flex; gap: 8px; justify-content: space-between; }
-.agent-activity li strong { font-size: 11px; color: var(--agent-text); }
-.agent-activity li small, .agent-activity li p { font-size: 10px; color: var(--agent-muted); }
-.agent-activity li p { margin: 2px 0 0; }
-.agent-sidebar { display: grid; align-content: start; width: 248px; min-height: 360px; overflow: hidden; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 18px; transition: width .2s ease; }
+
+.agent-citations__trigger {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  text-align: left;
+  background: var(--agent-surface);
+  border: 0;
+}
+
+.agent-citations__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-citations__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-citations__heading small,
+.agent-citations__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-citations__count {
+  display: grid;
+  flex: none;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 7px;
+  font-variant-numeric: tabular-nums;
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-citations__list {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-citations__list > li {
+  display: block;
+  list-style: none;
+}
+
+.agent-citations__list > li::marker {
+  content: none;
+}
+
+.agent-citations__item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  width: 100%;
+  min-height: 58px;
+  padding: 9px 10px;
+  text-align: left;
+  background: var(--agent-surface-strong);
+  border: 1px solid var(--agent-border);
+  border-radius: 12px;
+}
+
+.agent-citations__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-radius: 9px;
+}
+
+.agent-citations__copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-citations__copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--agent-text);
+  white-space: nowrap;
+}
+
+.agent-citations__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+  white-space: nowrap;
+}
+
+.agent-citations__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+.agent-fine-tune__header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; min-height: 52px; padding: 12px 14px 11px; border-bottom: 1px solid var(--agent-border); }
+.agent-fine-tune__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-fine-tune__heading strong { font-size: 13px; font-weight: 760; line-height: 18px; }
+
+.agent-fine-tune__heading small,
+.agent-fine-tune__count { font-size: 11px; line-height: 16px; color: var(--agent-muted); }
+.agent-fine-tune__count { flex: none; font-variant-numeric: tabular-nums; }
+
+.agent-activity__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-activity__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-activity__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-activity__heading small,
+.agent-activity__count,
+.agent-activity__meta small {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-activity__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-activity__body {
+  display: grid;
+  padding: 8px 10px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-activity__item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 58px;
+  padding: 9px 10px;
+  list-style: none;
+  border-radius: 12px;
+}
+
+.agent-activity__item::marker {
+  content: none;
+}
+
+.agent-activity__item[data-status='running'] {
+  background: color-mix(in srgb, var(--agent-primary-soft) 70%, transparent);
+}
+
+.agent-activity__item[data-status='failed'] {
+  background: color-mix(in srgb, var(--agent-danger-soft) 70%, transparent);
+}
+
+.agent-activity__kind {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border: 1px solid var(--agent-border);
+  border-radius: 9px;
+}
+
+.agent-activity__kind svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.agent-activity__item[data-kind='reasoning'] .agent-activity__kind {
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-color: color-mix(in srgb, var(--agent-primary) 28%, transparent);
+}
+
+.agent-activity__item[data-kind='search'] .agent-activity__kind {
+  color: var(--varo-agent-source-blue, #2563eb);
+  background: var(--varo-agent-source-blue-soft, #eff6ff);
+  border-color: color-mix(in srgb, var(--varo-agent-source-blue, #2563eb) 28%, transparent);
+}
+
+.agent-activity__item[data-kind='tool'] .agent-activity__kind {
+  color: var(--varo-agent-source-violet, #7c3aed);
+  background: var(--varo-agent-source-violet-soft, #f5f3ff);
+  border-color: color-mix(in srgb, var(--varo-agent-source-violet, #7c3aed) 28%, transparent);
+}
+
+.agent-activity__item[data-status='running'] .agent-activity__kind {
+  animation: varo-agent-advanced-pulse 1s ease-in-out infinite;
+}
+
+.agent-activity__copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-activity__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-activity__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-activity__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-activity__kind-label {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-activity__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-activity__item[data-status='running'] .agent-activity__kind {
+    animation: none;
+  }
+}
+
+.agent-sidebar {
+  display: grid;
+  align-content: start;
+  width: 248px;
+  min-height: 360px;
+  overflow: hidden;
+  background: var(--agent-surface-strong);
+  border: 1px solid var(--agent-border);
+  border-radius: 18px;
+  transition: width .2s ease;
+}
 .agent-sidebar[data-collapsed='true'] { width: 64px; }
-.agent-sidebar > header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 12px; background: var(--agent-surface); border-bottom: 1px solid var(--agent-border); }
-.agent-sidebar > header strong { font-size: 12px; }
-.agent-sidebar > header button { display: grid; place-items: center; width: 28px; height: 28px; color: var(--agent-muted); background: var(--agent-fill); border: 0; border-radius: 9px; }
-.agent-sidebar__create { min-height: 36px; margin: 10px 10px 5px; font-size: 11px; font-weight: 750; color: var(--agent-primary); background: var(--agent-primary-soft); border: 1px solid #99f6e4; border-radius: 10px; }
-.agent-sidebar nav { display: grid; gap: 10px; padding: 7px; }
-.agent-sidebar nav section { display: grid; gap: 3px; }
-.agent-sidebar nav section > small { padding: 2px 7px; font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: uppercase; }
-.agent-sidebar__item { display: flex; gap: 8px; align-items: center; width: 100%; min-height: 38px; padding: 0 7px; color: var(--agent-muted); text-align: left; background: transparent; border: 0; border-radius: 10px; }
-.agent-sidebar__item[data-active='true'] { color: var(--agent-primary); background: var(--agent-surface); box-shadow: 0 3px 12px rgb(15 23 42 / 6%); }
-.agent-sidebar__item > i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; font-size: 10px; font-style: normal; font-weight: 800; background: var(--agent-border); border-radius: 8px; }
-.agent-sidebar__item > span { display: grid; flex: 1; min-width: 0; }
-.agent-sidebar__item strong, .agent-sidebar__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-sidebar__item strong { font-size: 11px; }
-.agent-sidebar__item small { font-size: 10px; color: var(--agent-muted); }
-.agent-sidebar__item > b { font-size: 10px; }
-.agent-context-card > div { display: grid; gap: 9px; padding: 11px; }
-.agent-context-card article { overflow: hidden; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 12px; }
-.agent-context-card article > header, .agent-context-card article > footer { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; }
-.agent-context-card article strong { font-size: 11px; }
-.agent-context-card article small { font-size: 10px; color: var(--agent-muted); }
-.agent-context-card article p { padding: 9px 10px; margin: 0; font-size: 11px; line-height: 1.55; color: var(--agent-text-regular); border-top: 1px solid var(--agent-border); border-bottom: 1px solid var(--agent-border); }
-.agent-context-card article footer { font-size: 10px; color: var(--agent-muted); }
-.agent-context-card article footer button { font-size: 10px; font-weight: 750; color: var(--agent-primary); background: transparent; border: 0; }
-.agent-insight-card > div { display: grid; gap: 8px; align-content: center; min-height: 150px; padding: 16px; background: linear-gradient(145deg, var(--agent-surface), var(--agent-surface-strong)); }
-.agent-insight-card[data-tone='danger'] > div { background: linear-gradient(145deg, var(--agent-surface), var(--agent-danger-soft)); }
-.agent-insight-card[data-tone='success'] > div { background: linear-gradient(145deg, var(--agent-surface), var(--agent-success-soft)); }
-.agent-insight-card > div small { font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: uppercase; }
-.agent-insight-card > div h3 { margin: 0; font-size: 16px; line-height: 1.4; color: var(--agent-text); }
-.agent-insight-card > div b { font-size: 24px; color: var(--agent-primary); }
-.agent-insight-card > footer { justify-content: space-between; }
-.agent-insight-card > footer span { display: flex; gap: 5px; }
-.agent-selection-actions { display: grid; gap: 10px; }
-.agent-selection-actions blockquote { padding: 12px 14px; margin: 0; font-size: 12px; line-height: 1.65; color: var(--agent-text); background: var(--agent-primary-soft); border-left: 3px solid #14b8a6; border-radius: 0 12px 12px 0; }
-.agent-selection-actions > div { display: flex; flex-wrap: wrap; gap: 7px; }
-.agent-selection-actions button { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-text-regular); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 999px; }
+
+.agent-sidebar__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  padding: 0 12px;
+  background: var(--agent-surface);
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-sidebar__heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-sidebar__brand,
+.agent-sidebar__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-radius: 8px;
+}
+
+.agent-sidebar__brand svg,
+.agent-sidebar__mark svg {
+  display: block;
+  width: 13px;
+  height: 13px;
+}
+.agent-sidebar__heading strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 760; white-space: nowrap; }
+
+.agent-sidebar__toggle {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-sidebar__create {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  margin: 10px 10px 5px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border: 1px solid color-mix(in srgb, var(--agent-primary) 28%, transparent);
+  border-radius: 10px;
+}
+.agent-sidebar__create svg { width: 13px; height: 13px; }
+.agent-sidebar__nav { display: grid; gap: 10px; padding: 7px; }
+.agent-sidebar__group { display: grid; gap: 3px; }
+.agent-sidebar__group-label { padding: 2px 7px; font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: uppercase; }
+
+.agent-sidebar__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 7px;
+  color: var(--agent-muted);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-sidebar__item[data-active='true'] {
+  color: var(--agent-primary);
+  background: var(--agent-surface);
+  box-shadow: 0 3px 12px rgb(15 23 42 / 6%);
+}
+
+.agent-sidebar__item[data-active='true'] .agent-sidebar__mark {
+  color: var(--agent-primary-foreground);
+  background: var(--agent-primary);
+}
+.agent-sidebar__copy { display: grid; flex: 1; min-width: 0; }
+
+.agent-sidebar__copy strong,
+.agent-sidebar__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-sidebar__copy strong { font-size: 11px; }
+.agent-sidebar__copy small { font-size: 10px; color: var(--agent-muted); }
+
+.agent-sidebar__badge {
+  display: grid;
+  flex: none;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-text);
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-sidebar[data-collapsed='true'] .agent-sidebar__header,
+.agent-sidebar[data-collapsed='true'] .agent-sidebar__item { justify-content: center; }
+
+.agent-context-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-context-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-context-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-context-card__heading small,
+.agent-context-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-context-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-context-card__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-context-card__list > li {
+  display: block;
+  list-style: none;
+}
+
+.agent-context-card__list > li::marker {
+  content: none;
+}
+
+.agent-context-card__chunk {
+  overflow: hidden;
+  background: var(--agent-surface-strong);
+  border: 1px solid var(--agent-border);
+  border-radius: 12px;
+}
+
+.agent-context-card__chunk-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 10px 0;
+}
+
+.agent-context-card__index {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-radius: 9px;
+}
+
+.agent-context-card__chunk-copy {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-context-card__chunk-copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.agent-context-card__type {
+  flex: none;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-context-card__quote {
+  padding: 8px 10px;
+  margin: 8px 10px 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--agent-text-regular);
+  background: var(--agent-surface);
+  border-left: 2px solid var(--agent-primary);
+  border-radius: 0 10px 10px 0;
+}
+
+.agent-context-card__chunk-foot {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  padding: 0 10px 8px;
+}
+
+.agent-context-card__chunk-foot small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--agent-muted);
+  white-space: nowrap;
+}
+
+.agent-context-card__open {
+  flex: none;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-primary);
+  background: transparent;
+  border: 0;
+}
+
+.agent-insight-card {
+  overflow: hidden;
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 16px;
+}
+
+.agent-insight-card[data-tone='success'] {
+  border-color: color-mix(in srgb, var(--agent-success) 42%, var(--agent-border));
+}
+
+.agent-insight-card[data-tone='warning'] {
+  border-color: color-mix(in srgb, var(--agent-warning) 42%, var(--agent-border));
+}
+
+.agent-insight-card[data-tone='danger'] {
+  border-color: color-mix(in srgb, var(--agent-danger) 42%, var(--agent-border));
+}
+
+.agent-insight-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-insight-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-insight-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-insight-card__heading small,
+.agent-insight-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-insight-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-insight-card__body {
+  display: grid;
+  gap: 8px;
+  min-height: 132px;
+  padding: 18px 16px 16px;
+}
+
+.agent-insight-card[data-tone='success'] .agent-insight-card__body {
+  background: color-mix(in srgb, var(--agent-success-soft) 70%, transparent);
+}
+
+.agent-insight-card[data-tone='warning'] .agent-insight-card__body {
+  background: color-mix(in srgb, var(--agent-warning-soft) 70%, transparent);
+}
+
+.agent-insight-card[data-tone='danger'] .agent-insight-card__body {
+  background: color-mix(in srgb, var(--agent-danger-soft) 70%, transparent);
+}
+
+.agent-insight-card__value {
+  font-size: 32px;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--agent-primary);
+}
+
+.agent-insight-card[data-tone='success'] .agent-insight-card__value {
+  color: var(--agent-success);
+}
+
+.agent-insight-card[data-tone='warning'] .agent-insight-card__value {
+  color: var(--agent-warning);
+}
+
+.agent-insight-card[data-tone='danger'] .agent-insight-card__value {
+  color: var(--agent-danger);
+}
+
+.agent-insight-card__copy,
+.agent-insight-card__empty {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--agent-text);
+}
+
+.agent-insight-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 132px;
+  color: var(--agent-muted);
+}
+
+.agent-insight-card__footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--agent-border);
+}
+
+.agent-insight-card__nav {
+  display: flex;
+  gap: 6px;
+}
+
+.agent-insight-card__nav-btn {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  color: var(--agent-muted);
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 9px;
+}
+
+.agent-insight-card__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-primary-foreground);
+  background: var(--agent-primary);
+  border: 1px solid var(--agent-primary);
+  border-radius: 9px;
+}
+
+.agent-selection-actions {
+  display: grid;
+  gap: 0;
+  overflow: hidden;
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 16px;
+}
+
+.agent-selection-actions__quote {
+  padding: 14px 16px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--agent-text);
+  background: var(--agent-surface-strong);
+  border-left: 3px solid var(--agent-primary);
+}
+
+.agent-selection-actions__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  padding: 10px 12px 12px;
+}
+
+.agent-selection-actions__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-text-regular);
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 999px;
+}
+
+.agent-selection-actions__action:hover {
+  color: var(--agent-primary);
+  border-color: var(--agent-primary);
+}
 .agent-table { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 15px; }
 .agent-table > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border-bottom: 1px solid var(--agent-border); }
 .agent-table > header strong { font-size: 12px; }
@@ -548,33 +1308,78 @@
 .agent-diff-table > footer button { min-height: 34px; padding: 0 10px; font-size: 11px; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 9px; }
 .agent-diff-table > footer button:last-child { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); }
 .agent-command-search { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; box-shadow: 0 18px 50px rgb(15 23 42 / 10%); }
-.agent-command-search > label { display: flex; gap: 9px; align-items: center; min-height: 50px; padding: 0 13px; border-bottom: 1px solid var(--agent-border); }
-.agent-command-search > label > span { font-size: 18px; color: var(--agent-muted); }
+
+.agent-command-search__field {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  min-height: 50px;
+  padding: 0 13px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-command-search__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  color: var(--agent-muted);
+}
+.agent-command-search__icon svg { display: block; width: 16px; height: 16px; }
 .agent-command-search input { flex: 1; min-width: 0; font: inherit; color: var(--agent-text); outline: 0; background: transparent; border: 0; }
-.agent-command-search > div { display: grid; max-height: 280px; padding: 7px; overflow-y: auto; }
-.agent-command-search > div button { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 44px; padding: 6px 8px; text-align: left; background: transparent; border: 0; border-radius: 10px; }
-.agent-command-search > div button:hover { background: var(--agent-fill); }
-.agent-command-search > div button > span { display: grid; }
-.agent-command-search > div strong { font-size: 11px; color: var(--agent-text); }
-.agent-command-search > div small { font-size: 10px; color: var(--agent-muted); }
+.agent-command-search__list { display: grid; max-height: 280px; padding: 8px; overflow-y: auto; }
+
+.agent-command-search__group {
+  padding: 8px 8px 4px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-muted);
+  text-transform: uppercase;
+}
+
+.agent-command-search__item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 6px 8px;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+.agent-command-search__item:hover { background: var(--agent-fill); }
+.agent-command-search__copy { display: grid; min-width: 0; }
+.agent-command-search__copy strong { font-size: 12px; color: var(--agent-text); }
+.agent-command-search__copy small { font-size: 11px; color: var(--agent-muted); }
 .agent-command-search kbd { padding: 2px 6px; font-size: 10px; color: var(--agent-muted); background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 6px; }
-.agent-command-search > p { padding: 22px; margin: 0; font-size: 11px; color: var(--agent-muted); text-align: center; }
+.agent-command-search__empty { padding: 22px; margin: 0; font-size: 11px; color: var(--agent-muted); text-align: center; }
 .agent-flowchart { overflow: hidden; background: radial-gradient(var(--agent-border) 1px, transparent 1px); background-size: 14px 14px; border: 1px solid var(--agent-border); border-radius: 18px; }
-.agent-flowchart > header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 13px; background: var(--agent-surface); border-bottom: 1px solid var(--agent-border); }
-.agent-flowchart > header strong { font-size: 12px; }
-.agent-flowchart > header button { min-height: 32px; padding: 0 9px; font-size: 10px; color: var(--agent-primary); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 9px; }
-.agent-flowchart > div { display: grid; justify-items: center; padding: 24px; }
-.agent-flowchart__node { display: grid; gap: 4px; width: min(300px, 100%); padding: 12px 14px; text-align: left; background: var(--agent-surface); border: 1px solid var(--agent-border-strong); border-radius: 14px; box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
-.agent-flowchart__node[data-type='trigger'] { border-color: #99f6e4; }
-.agent-flowchart__node[data-type='condition'] { border-color: #fde68a; }
-.agent-flowchart__node[data-type='result'] { border-color: #bbf7d0; }
-.agent-flowchart__node small { font-size: 10px; font-weight: 800; color: var(--agent-muted); text-transform: uppercase; }
-.agent-flowchart__node strong { font-size: 11px; color: var(--agent-text); }
-.agent-flowchart__node > span { font-size: 10px; color: var(--agent-muted); }
-.agent-flowchart__connector { display: grid; place-items: center; width: 24px; height: 36px; font-weight: 900; color: var(--agent-primary); background: linear-gradient(#cbd5e1,#cbd5e1) center/1px 100% no-repeat; border: 0; }
-.agent-fine-tune > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
+.agent-flowchart__header { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; background: var(--agent-surface); border-bottom: 1px solid var(--agent-border); }
+.agent-flowchart__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-flowchart__heading strong { font-size: 13px; font-weight: 760; }
+.agent-flowchart__heading small { font-size: 11px; color: var(--agent-muted); }
+.agent-flowchart__add { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 9px; font-size: 11px; font-weight: 750; color: var(--agent-primary); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 9px; }
+.agent-flowchart__add svg { width: 13px; height: 13px; }
+.agent-flowchart__canvas { display: grid; justify-items: center; padding: 24px; }
+.agent-flowchart__node { display: grid; gap: 6px; width: min(320px, 100%); padding: 12px 14px; text-align: left; background: var(--agent-surface); border: 1px solid var(--agent-border-strong); border-radius: 14px; box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
+.agent-flowchart__node[data-type='trigger'] { border-color: color-mix(in srgb, var(--agent-primary) 40%, var(--agent-border)); }
+.agent-flowchart__node[data-type='condition'] { border-color: color-mix(in srgb, var(--agent-warning) 50%, var(--agent-border)); }
+.agent-flowchart__node[data-type='action'] { border-color: color-mix(in srgb, var(--varo-agent-source-violet, #7c3aed) 40%, var(--agent-border)); }
+.agent-flowchart__node[data-type='result'] { border-color: color-mix(in srgb, var(--agent-success) 50%, var(--agent-border)); }
+.agent-flowchart__node[data-status='running'] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-primary) 18%, transparent); }
+.agent-flowchart__node-head { display: flex; gap: 8px; align-items: center; }
+.agent-flowchart__index { display: grid; place-items: center; width: 22px; height: 22px; font-size: 10px; font-weight: 800; color: var(--agent-primary); background: var(--agent-primary-soft); border-radius: 7px; }
+.agent-flowchart__type { padding: 1px 7px; font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: none; background: var(--agent-fill); border-radius: 999px; }
+.agent-flowchart__node strong { font-size: 13px; font-weight: 760; color: var(--agent-text); }
+.agent-flowchart__detail { font-size: 11px; line-height: 16px; color: var(--agent-muted); }
+.agent-flowchart__connector { display: grid; place-items: center; width: 24px; height: 36px; color: var(--agent-primary); background: linear-gradient(var(--agent-border), var(--agent-border)) center/1px 100% no-repeat; border: 0; }
+.agent-fine-tune { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; }
+.agent-fine-tune__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
 .agent-fine-tune__field { display: grid; gap: 6px; min-width: 0; padding: 0; margin: 0; border: 0; }
-.agent-fine-tune__label { padding: 0; font-size: 10px; font-weight: 650; color: var(--agent-muted); }
+.agent-fine-tune__label { padding: 0; font-size: 11px; font-weight: 650; color: var(--agent-muted); }
 .agent-fine-tune__field > input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 10px; font: inherit; color: var(--agent-text); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 10px; }
 .agent-fine-tune__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
 .agent-fine-tune__choice { position: relative; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 11px; color: var(--agent-text-regular); cursor: pointer; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 10px; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
@@ -583,6 +1388,8 @@
 .agent-fine-tune__choice:focus-within { outline: 2px solid var(--agent-primary); outline-offset: 2px; }
 .agent-fine-tune__choice-check { min-width: 12px; font-size: 12px; font-weight: 850; text-align: center; }
 .agent-fine-tune__empty { display: grid; place-items: center; min-height: 40px; font-size: 11px; color: var(--agent-muted); background: var(--agent-surface-strong); border: 1px dashed var(--agent-border); border-radius: 10px; }
+.agent-fine-tune__footer { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid var(--agent-border); }
+.agent-fine-tune__apply { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-primary-foreground); background: var(--agent-primary); border: 1px solid var(--agent-primary); border-radius: 10px; }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-advanced__status i,
@@ -610,4 +1417,4 @@
   }
 }
 
-@media (max-width: 600px) { .agent-sidebar { width: 100%; } .agent-sidebar[data-collapsed='true'] { width: 64px; } .agent-fine-tune > div { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 600px) { .agent-sidebar { width: 100%; } .agent-sidebar[data-collapsed='true'] { width: 64px; } .agent-fine-tune__grid { grid-template-columns: minmax(0, 1fr); } }
diff --git a/apps/docs/src/components/agent-ui/agent-ui.css b/apps/docs/src/components/agent-ui/agent-ui.css
index 969bc70d..97a20b58 100644
--- a/apps/docs/src/components/agent-ui/agent-ui.css
+++ b/apps/docs/src/components/agent-ui/agent-ui.css
@@ -1,15 +1,37 @@
 @keyframes varo-agent-pulse {
-  0%, 100% { opacity: .35; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+
+  50% {
+    opacity: 1;
+  }
 }
 
 @keyframes varo-agent-cursor {
-  0%, 48% { opacity: 1; }
-  49%, 100% { opacity: 0; }
+  0%,
+  48% {
+    opacity: 1;
+  }
+
+  49%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.agent-ui__loading i {
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-ui__pulse {
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-ui__cursor {
+  animation: varo-agent-cursor 0.72s steps(1) infinite;
 }
-.agent-ui__loading i { animation: varo-agent-pulse 1s ease-in-out infinite; }
-.agent-ui__pulse { animation: varo-agent-pulse 1s ease-in-out infinite; }
-.agent-ui__cursor { animation: varo-agent-cursor .72s steps(1) infinite; }
 
 .agent-thinking {
   --agent-thinking-surface: var(--varo-agent-surface, #fff);
@@ -52,10 +74,35 @@
   border-radius: 11px;
   box-shadow: 0 4px 12px color-mix(in srgb, var(--varo-agent-primary, #0f766e) 10%, transparent);
 }
-.agent-thinking__icon svg { display: block; width: 19px; height: 19px; }
-.agent-thinking__copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
-.agent-thinking__title { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 760; line-height: 18px; color: var(--agent-thinking-text); white-space: nowrap; }
-.agent-thinking__summary { font-size: 11px; line-height: 16px; color: var(--agent-thinking-muted); }
+
+.agent-thinking__icon svg {
+  display: block;
+  width: 19px;
+  height: 19px;
+}
+
+.agent-thinking__copy {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-thinking__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--agent-thinking-text);
+  white-space: nowrap;
+}
+
+.agent-thinking__summary {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-thinking-muted);
+}
 
 .agent-thinking__chevron {
   display: block;
@@ -65,7 +112,10 @@
   color: var(--agent-thinking-muted);
   transition: transform 200ms ease;
 }
-.agent-thinking[data-open='true'] .agent-thinking__chevron { transform: rotate(180deg); }
+
+.agent-thinking[data-open='true'] .agent-thinking__chevron {
+  transform: rotate(180deg);
+}
 
 .agent-thinking__body {
   display: grid;
@@ -94,17 +144,57 @@
   border: 2px solid var(--agent-thinking-surface-strong);
   border-radius: 999px;
 }
-.agent-thinking__step[data-status='completed'] .agent-thinking__dot { background: var(--varo-agent-success, #16a34a); }
-.agent-thinking__step[data-status='running'] .agent-thinking__dot { background: var(--varo-agent-primary, #0f766e); }
-.agent-thinking__step[data-status='failed'] .agent-thinking__dot { background: var(--varo-agent-danger, #dc2626); }
-.agent-thinking__step-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
-.agent-thinking__step-header { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
-.agent-thinking__step-header strong { font-size: 12px; font-weight: 680; line-height: 17px; color: var(--agent-thinking-text); }
-.agent-thinking__step-header small, .agent-thinking__detail { font-size: 11px; line-height: 16px; color: var(--agent-thinking-muted); }
+
+.agent-thinking__step[data-status='completed'] .agent-thinking__dot {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-thinking__step[data-status='running'] .agent-thinking__dot {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-thinking__step[data-status='failed'] .agent-thinking__dot {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-thinking__step-copy {
+  display: grid;
+  flex: 1;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-thinking__step-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.agent-thinking__step-header strong {
+  font-size: 12px;
+  font-weight: 680;
+  line-height: 17px;
+  color: var(--agent-thinking-text);
+}
+
+.agent-thinking__step-header small,
+.agent-thinking__detail {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-thinking-muted);
+}
 
 @media (max-width: 640px) {
-  .agent-thinking .agent-thinking__trigger { min-height: 60px; padding-inline: 12px; }
-  .agent-thinking__body { padding-right: 12px; padding-left: 27px; }
+  .agent-thinking .agent-thinking__trigger {
+    min-height: 60px;
+    padding-inline: 12px;
+  }
+
+  .agent-thinking__body {
+    padding-right: 12px;
+    padding-left: 27px;
+  }
 }
 
 .agent-approval {
@@ -290,7 +380,9 @@
 }
 
 .agent-composer__shell {
-  transition: border-color 160ms ease, box-shadow 160ms ease;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease;
 }
 
 .agent-composer__shell:focus-within {
@@ -305,11 +397,632 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .agent-thinking__chevron { transition: none; }
+  .agent-thinking__chevron {
+    transition: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-ui__loading i,
   .agent-ui__pulse,
-  .agent-ui__cursor { animation: none; }
+  .agent-ui__cursor,
+  .agent-task-list__item[data-status='running'] .agent-task-list__marker i,
+  .agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
+    animation: none;
+  }
+}
+
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__heading small,
+.agent-task-list__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-task-list__item {
+  position: relative;
+  display: block;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  list-style: none;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__item::marker {
+  content: none;
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.agent-task-list__item[data-status='waiting'] .agent-task-list__copy strong,
+.agent-task-list__item[data-status='idle'] .agent-task-list__copy strong {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip,
+.agent-task-list__meta > small {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-weight: 750;
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-task-list__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__track {
+  display: block;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__track i {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__track i {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+.agent-composer-scope,
+.agent-retrieval,
+.agent-source-receipt,
+.agent-thread-versions,
+.agent-task-runner__controls {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__heading small,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta,
+.agent-task-runner__cancel span {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row[data-status='reading'],
+.agent-workspace-card__row[data-status='connecting'],
+.agent-workspace-card__row[data-enabled='true'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__copy strong,
+.agent-workspace-card__row-main strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='skipped'] .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+  margin: 0;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action:hover {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--primary:hover {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__action--danger:hover {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.agent-composer-scope__meter {
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-composer-scope__meter strong {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  display: block;
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.agent-thread-versions__card {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-thread-versions__card[data-active='true'] {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__body {
+  max-height: 288px;
+  padding: 14px 16px;
+  margin: 0;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+  background: #0f172a;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: contain;
+  background: #0b1220;
 }
diff --git a/apps/docs/src/components/agent-ui/index.ts b/apps/docs/src/components/agent-ui/index.ts
index a2f7e050..31fcbb24 100644
--- a/apps/docs/src/components/agent-ui/index.ts
+++ b/apps/docs/src/components/agent-ui/index.ts
@@ -102,6 +102,30 @@ function partMark(status: AgentPartStatus) {
   return 'bg-[var(--varo-agent-border-strong)]'
 }
 
+function taskStatusLabel(status: AgentPartStatus) {
+  if (status === 'completed') { return '已完成' }
+  if (status === 'failed') { return '失败' }
+  if (status === 'running') { return '进行中' }
+  if (status === 'waiting') { return '等待中' }
+  return '待开始'
+}
+
+function renderCloseMiniIcon() {
+  return h('svg', {
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 2.2,
+    'viewBox': '0 0 24 24',
+    'width': 12,
+    'height': 12,
+    'aria-hidden': 'true',
+  }, [
+    h('path', { d: 'M6 6l12 12M18 6 6 18' }),
+  ])
+}
+
 function renderCheckIcon() {
   return h('svg', {
     'fill': 'none',
@@ -292,37 +316,101 @@ export const AgentTaskList = defineComponent({
   },
   setup(props) {
     const completed = computed(() => props.tasks.filter(task => task.status === 'completed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[12px] tabular-nums text-[var(--varo-agent-muted)]' }, `${completed.value}/${props.tasks.length}`),
-      ]),
-      ...props.tasks.map((task, index) => h('div', { class: 'flex min-h-[50px] items-center gap-2.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2 last:border-0', key: task.id }, [
-        h('span', { class: ['grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold', task.status === 'completed' ? 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' : 'border-[var(--varo-agent-border)] text-[var(--varo-agent-text)]'] }, task.status === 'completed' ? renderCheckIcon() : String(index + 1)),
-        h('span', { class: 'grid min-w-0 flex-1 gap-1' }, [
-          h('span', { class: 'flex justify-between gap-2 text-xs font-semibold text-[var(--varo-agent-foreground)]' }, [task.title, task.meta ? h('small', { class: 'text-[var(--varo-agent-muted)]' }, task.meta) : null]),
-          task.progress === undefined ? null : h('span', { class: 'h-1 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]' }, [h('i', { class: 'block h-full bg-[var(--varo-agent-primary)]', style: { width: `${Math.min(100, Math.max(0, task.progress))}%` } })]),
+    const current = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+    return () => h('section', { 'class': 'agent-task-list', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-task-list__header' }, [
+        h('span', { class: 'agent-task-list__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.tasks.length && props.tasks.length ? '全部完成' : '等待开始'),
         ]),
-      ])),
+        h('span', { class: 'agent-task-list__count' }, `${completed.value}/${props.tasks.length}`),
+      ]),
+      h('ol', { class: 'agent-task-list__body' }, props.tasks.map((task, index) => {
+        const progress = task.progress === undefined ? undefined : Math.min(100, Math.max(0, task.progress))
+        return h('li', {
+          'class': 'agent-task-list__item',
+          'data-status': task.status,
+          'aria-current': task.status === 'running' ? 'step' : undefined,
+          'key': task.id,
+        }, [
+          h('span', { 'class': 'agent-task-list__marker', 'aria-hidden': 'true' }, [
+            task.status === 'completed'
+              ? renderCheckIcon()
+              : task.status === 'failed'
+                ? renderCloseMiniIcon()
+                : task.status === 'running'
+                  ? h('i')
+                  : String(index + 1),
+          ]),
+          h('span', { class: 'agent-task-list__copy' }, [
+            h('span', { class: 'agent-task-list__row' }, [
+              h('strong', task.title),
+              h('span', { class: 'agent-task-list__meta' }, [
+                h('small', { class: 'agent-task-list__chip' }, taskStatusLabel(task.status)),
+                task.meta ? h('small', task.meta) : null,
+              ]),
+            ]),
+            task.description ? h('p', task.description) : null,
+            progress === undefined
+              ? null
+              : h('span', { 'class': 'agent-task-list__track', 'aria-hidden': 'true' }, [
+                  h('i', { style: { width: `${progress}%` } }),
+                ]),
+          ]),
+        ])
+      })),
     ])
   },
 })
 
-const workspaceActionButton = 'relative m-0 inline-flex min-h-9 min-w-12 items-center justify-center rounded-lg px-2.5 text-[11px] font-bold transition-colors before:absolute before:-inset-1 before:content-[\'\'] motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-45'
-const workspacePrimaryTextButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-primary)] hover:bg-[var(--varo-agent-primary-soft)]`
-const workspaceQuietButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-foreground)] hover:bg-[var(--varo-agent-fill)]`
-const workspaceDangerTextButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-danger)] hover:bg-[var(--varo-agent-danger-soft)]`
+function renderWorkspaceIcon(kind: 'plug' | 'receipt' | 'branch') {
+  const common = {
+    'aria-hidden': 'true' as const,
+    'fill': 'none',
+    'height': 14,
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+    'width': 14,
+  }
+  if (kind === 'receipt') {
+    return h('svg', common, [
+      h('path', { d: 'M7 3h8l4 4v14H7V3Z' }),
+      h('path', { d: 'M15 3v4h4M9 12h6M9 16h4' }),
+    ])
+  }
+  if (kind === 'branch') {
+    return h('svg', common, [
+      h('circle', { cx: '6', cy: '6', r: '2.2' }),
+      h('circle', { cx: '18', cy: '12', r: '2.2' }),
+      h('circle', { cx: '6', cy: '18', r: '2.2' }),
+      h('path', { d: 'M8.1 7.6v8.8M8.2 12H16' }),
+    ])
+  }
+  return h('svg', common, [
+    h('path', { d: 'M9 7V3M15 7V3' }),
+    h('path', { d: 'M8 7h8v4a4 4 0 0 1-4 4h0a4 4 0 0 1-4-4V7Z' }),
+    h('path', { d: 'M12 15v6' }),
+  ])
+}
+
+function workspaceActionClass(kind: 'quiet' | 'primary' | 'danger' = 'quiet') {
+  return cn(
+    'agent-workspace-card__action',
+    kind === 'primary' && 'agent-workspace-card__action--primary',
+    kind === 'danger' && 'agent-workspace-card__action--danger',
+  )
+}
 
 const contextSourceStatusLabels = {
   available: '可用',
   connecting: '连接中',
   unavailable: '不可用',
 } as const
-const contextSourceStatusClasses = {
-  available: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  connecting: 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]',
-  unavailable: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-} as const
 const retrievalStatusLabels = {
   failed: '读取失败',
   queued: '排队中',
@@ -330,23 +418,11 @@ const retrievalStatusLabels = {
   reading: '读取中',
   skipped: '已跳过',
 } as const
-const retrievalStatusClasses = {
-  failed: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-  queued: 'bg-[var(--varo-agent-fill)] text-[var(--varo-agent-muted)]',
-  read: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  reading: 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]',
-  skipped: 'bg-[var(--varo-agent-warning-soft)] text-[var(--varo-agent-warning)]',
-} as const
 const receiptStatusLabels = {
   failed: '读取失败',
   read: '已读取',
   skipped: '已跳过',
 } as const
-const receiptStatusClasses = {
-  failed: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-  read: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  skipped: 'bg-[var(--varo-agent-warning-soft)] text-[var(--varo-agent-warning)]',
-} as const
 
 function renderCloseIcon() {
   return h('svg', {
@@ -381,30 +457,38 @@ export const AgentComposerScope = defineComponent({
       return Math.min(100, Math.max(0, value))
     })
     const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${enabledCount.value} 个已启用`),
+    const headingHint = computed(() => {
+      if (!props.sources.length) { return '暂无可用来源' }
+      if (enabledCount.value === 0) { return '尚未授权任何来源' }
+      return `${enabledCount.value} 个来源已加入上下文`
+    })
+    return () => h('section', { 'class': 'agent-composer-scope', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${enabledCount.value}/${props.sources.length}`),
       ]),
       props.sources.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.sources.map((source) => {
+        ? h('div', { class: 'agent-workspace-card__body' }, props.sources.map((source) => {
             const status = source.status ?? 'available'
-            return h('div', { 'class': 'flex min-h-[58px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', 'data-status': status, 'key': source.id }, [
-              h('i', { 'class': ['h-3 w-3 flex-none rounded-full', contextSourceStatusClasses[status]], 'aria-hidden': 'true' }),
-              h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-                h('span', { class: 'flex min-w-0 items-center gap-2' }, [
-                  h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, source.label),
-                  h('small', { class: 'flex-none text-[10px] font-semibold text-[var(--varo-agent-muted)]' }, contextSourceStatusLabels[status]),
+            return h('article', { 'class': 'agent-workspace-card__row', 'data-status': status, 'data-enabled': String(source.enabled), 'key': source.id }, [
+              h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('plug')),
+              h('span', { class: 'agent-workspace-card__copy' }, [
+                h('span', { class: 'agent-workspace-card__row-main' }, [
+                  h('strong', source.label),
+                  h('small', { class: 'agent-workspace-card__chip' }, contextSourceStatusLabels[status]),
                 ]),
                 source.description || source.meta
-                  ? h('small', { class: 'truncate text-[11px] text-[var(--varo-agent-muted)]' }, source.description || source.meta)
+                  ? h('small', { class: 'agent-workspace-card__detail' }, source.description || source.meta)
                   : null,
               ]),
               status === 'available'
                 ? h('button', {
                     'aria-label': `${source.enabled ? '停用' : '启用'}${source.label}`,
                     'aria-pressed': source.enabled,
-                    'class': workspaceQuietButton,
+                    'class': workspaceActionClass(source.enabled ? 'quiet' : 'primary'),
                     'disabled': props.disabled,
                     'type': 'button',
                     'onClick': () => emit('toggle', source, !source.enabled),
@@ -412,29 +496,29 @@ export const AgentComposerScope = defineComponent({
                 : status === 'unavailable'
                   ? h('button', {
                       'aria-label': `连接${source.label}`,
-                      'class': workspacePrimaryTextButton,
+                      'class': workspaceActionClass('primary'),
                       'disabled': props.disabled,
                       'type': 'button',
                       'onClick': () => emit('connect', source),
                     }, '连接')
-                  : null,
+                  : h('small', { class: 'agent-workspace-card__chip' }, '连接中'),
             ])
           }))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无来源'),
-      h('footer', { class: 'grid gap-2 border-t border-[var(--varo-agent-border)] px-3.5 py-3' }, [
-        h('span', { class: 'flex items-center justify-between gap-3' }, [
-          h('span', { class: 'text-[11px] font-semibold text-[var(--varo-agent-text)]' }, '上下文使用'),
-          h('strong', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-primary)]' }, `${usage.value}%`),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源'),
+      h('footer', { class: 'agent-composer-scope__meter' }, [
+        h('span', { class: 'agent-workspace-card__row-main' }, [
+          h('span', '上下文使用'),
+          h('strong', `${usage.value}%`),
         ]),
         h('span', {
-          'class': 'block h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]',
+          'class': 'agent-composer-scope__track',
           'role': 'progressbar',
           'aria-label': '上下文使用量',
           'aria-valuemax': 100,
           'aria-valuemin': 0,
           'aria-valuenow': usage.value,
         }, [
-          h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${usage.value}%` } }),
+          h('i', { style: { width: `${usage.value}%` } }),
         ]),
       ]),
     ])
@@ -452,31 +536,41 @@ export const AgentRetrievalProgress = defineComponent({
   },
   setup(props, { emit }) {
     const settled = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${settled.value}/${props.items.length} 已处理`),
+    const current = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+    const headingHint = computed(() => {
+      if (current.value?.status === 'failed') { return `阻塞于 ${current.value.title}` }
+      if (current.value) { return `正在读取 ${current.value.title}` }
+      if (props.items.length && settled.value === props.items.length) { return '检索已完成' }
+      return '等待检索'
+    })
+    return () => h('section', { 'class': 'agent-retrieval', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${settled.value}/${props.items.length}`),
       ]),
       props.items.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.items.map(item => h('div', { 'class': 'flex min-h-[56px] items-center gap-2.5 rounded-xl px-2.5 py-2', 'data-status': item.status, 'key': item.id }, [
-            h('i', { 'class': ['h-3 w-3 flex-none rounded-full', retrievalStatusClasses[item.status]], 'aria-hidden': 'true' }),
-            h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-              h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, item.title),
-              item.detail ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, item.detail) : null,
-            ]),
-            h('span', { class: 'flex flex-none items-center gap-2' }, [
-              h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, retrievalStatusLabels[item.status]),
-              item.status === 'failed' && item.retryable
-                ? h('button', {
-                    'aria-label': `重试${item.title}`,
-                    'class': workspaceQuietButton,
-                    'type': 'button',
-                    'onClick': () => emit('retry', item),
-                  }, '重试')
-                : null,
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map((item, index) => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, item.status === 'reading' ? h('i') : String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.title),
+                h('small', { class: 'agent-workspace-card__chip' }, retrievalStatusLabels[item.status]),
+              ]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
             ]),
+            item.status === 'failed' && item.retryable
+              ? h('button', {
+                  'aria-label': `重试${item.title}`,
+                  'class': workspaceActionClass('primary'),
+                  'type': 'button',
+                  'onClick': () => emit('retry', item),
+                }, '重试')
+              : null,
           ])))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无检索项'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无检索项'),
     ])
   },
 })
@@ -494,44 +588,49 @@ export const AgentSourceReceipt = defineComponent({
   },
   setup(props, { emit }) {
     const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'grid min-h-12 gap-0.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2.5' }, [
-        h('span', { class: 'flex items-center justify-between gap-3' }, [
-          h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-          h('small', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${readCount.value}/${props.items.length} 已读取`),
+    const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+    const headingHint = computed(() => {
+      if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+      if (props.summary) { return props.summary }
+      if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+      return '回答完成后核对来源'
+    })
+    return () => h('section', { 'class': 'agent-source-receipt', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
         ]),
-        props.summary ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, props.summary) : null,
+        h('span', { class: 'agent-workspace-card__count' }, `${readCount.value}/${props.items.length}`),
       ]),
       props.items.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.items.map(item => h('div', { 'class': 'flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', 'data-status': item.status, 'key': item.id }, [
-            h('i', { 'class': ['h-3 w-3 flex-none rounded-full', receiptStatusClasses[item.status]], 'aria-hidden': 'true' }),
-            h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-              h('span', { class: 'flex min-w-0 items-baseline gap-2' }, [
-                h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, item.label),
-                item.itemCount === undefined
-                  ? null
-                  : h('small', { class: 'flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]' }, `${item.itemCount} 项`),
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map(item => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('receipt')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.label),
+                item.itemCount === undefined ? null : h('small', { class: 'agent-workspace-card__meta' }, `${item.itemCount} 项`),
               ]),
-              item.detail ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, item.detail) : null,
-              h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, receiptStatusLabels[item.status]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
+              h('small', { class: 'agent-workspace-card__chip' }, receiptStatusLabels[item.status]),
             ]),
             item.status === 'read'
               ? h('button', {
                   'aria-label': `查看${item.label}`,
-                  'class': workspaceQuietButton,
+                  'class': workspaceActionClass(),
                   'type': 'button',
                   'onClick': () => emit('open', item),
                 }, '查看')
               : item.status === 'failed'
                 ? h('button', {
                     'aria-label': `连接${item.label}`,
-                    'class': workspacePrimaryTextButton,
+                    'class': workspaceActionClass('primary'),
                     'type': 'button',
                     'onClick': () => emit('connect', item),
                   }, '连接')
                 : null,
           ])))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无来源回执'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源回执'),
     ])
   },
 })
@@ -557,38 +656,38 @@ export const AgentTaskRunner = defineComponent({
       )
     })
     const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
-    return () => h('section', { class: 'grid gap-2.5' }, [
+    return () => h('section', { class: 'agent-task-runner' }, [
       h(AgentTaskList, { tasks: props.tasks, title: props.title }),
       actionableTasks.value.length || canCancel.value
-        ? h('div', { class: 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]' }, [
+        ? h('div', { class: 'agent-task-runner__controls' }, [
             actionableTasks.value.length
-              ? h('div', { class: 'grid gap-1 p-2' }, actionableTasks.value.map(task => h('div', { class: 'flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', key: task.id }, [
-                  h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-                    h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, task.title),
-                    task.description ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, task.description) : null,
-                    h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, task.status === 'failed' ? '执行失败' : '等待确认'),
+              ? h('div', { class: 'agent-workspace-card__body' }, actionableTasks.value.map(task => h('article', { 'class': 'agent-workspace-card__row', 'data-status': task.status, 'key': task.id }, [
+                  h('span', { class: 'agent-workspace-card__copy' }, [
+                    h('strong', task.title),
+                    task.description ? h('small', { class: 'agent-workspace-card__detail' }, task.description) : null,
+                    h('small', { class: 'agent-workspace-card__chip' }, task.status === 'failed' ? '执行失败' : '等待确认'),
                   ]),
                   task.status === 'failed'
                     ? h('button', {
                         'aria-label': `重试${task.title}`,
-                        'class': workspaceQuietButton,
+                        'class': workspaceActionClass('primary'),
                         'type': 'button',
                         'onClick': () => emit('retry', task),
                       }, '重试')
                     : h('button', {
                         'aria-label': `批准${task.title}`,
-                        'class': workspacePrimaryTextButton,
+                        'class': workspaceActionClass('primary'),
                         'type': 'button',
                         'onClick': () => emit('approve', task),
                       }, '批准'),
                 ])))
               : null,
             canCancel.value
-              ? h('div', { class: 'flex min-h-[60px] items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-3.5 py-2' }, [
-                  h('span', { class: 'text-[11px] text-[var(--varo-agent-muted)]' }, '任务正在执行'),
+              ? h('div', { class: 'agent-task-runner__cancel' }, [
+                  h('span', '任务正在执行'),
                   h('button', {
                     'aria-label': '取消当前任务',
-                    'class': workspaceDangerTextButton,
+                    'class': workspaceActionClass('danger'),
                     'type': 'button',
                     'onClick': () => emit('cancel'),
                   }, '取消'),
@@ -625,52 +724,49 @@ export const AgentThreadVersions = defineComponent({
         version,
       }))
     })
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${props.versions.length} 个版本`),
+    const active = computed(() => displayVersions.value.find(entry => entry.active))
+    return () => h('section', { 'class': 'agent-thread-versions', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value ? `当前 ${active.value.label}` : '选择一个会话版本'),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${props.versions.length} 个版本`),
       ]),
       displayVersions.value.length
-        ? h('div', { 'class': 'flex max-w-full gap-2 overflow-x-auto p-2.5', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
+        ? h('div', { 'class': 'agent-thread-versions__list', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
             h('article', {
-              'class': [
-                'grid w-[252px] flex-none gap-2 rounded-xl border bg-[var(--varo-agent-surface-strong)] p-3',
-                entry.active
-                  ? 'border-[var(--varo-agent-primary)] shadow-[0_0_0_2px_var(--varo-agent-primary-soft)]'
-                  : 'border-[var(--varo-agent-border)]',
-              ],
+              'class': 'agent-thread-versions__card',
               'data-active': String(entry.active),
               'key': entry.version.id,
               'role': 'listitem',
             }, [
-              h('span', { class: 'flex min-w-0 items-center justify-between gap-2' }, [
-                h('span', { class: 'flex min-w-0 items-center gap-2' }, [
-                  h('i', { 'class': ['h-2 w-2 flex-none rounded-full', entry.active ? 'bg-[var(--varo-agent-primary)]' : 'bg-[var(--varo-agent-border-strong)]'], 'aria-hidden': 'true' }),
-                  h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, entry.label),
-                ]),
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('branch')),
+                h('strong', entry.label),
                 entry.active
-                  ? h('small', { class: 'flex-none text-[10px] font-bold text-[var(--varo-agent-primary)]' }, '当前')
+                  ? h('small', { class: 'agent-workspace-card__chip' }, '当前')
                   : entry.version.pinned
-                    ? h('small', { class: 'flex-none text-[10px] font-bold text-[var(--varo-agent-text)]' }, '已固定')
+                    ? h('small', { class: 'agent-workspace-card__chip' }, '已固定')
                     : null,
               ]),
-              h('p', { class: 'm-0 min-h-8 text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, entry.version.summary || '暂无版本摘要'),
-              h('span', { class: 'grid gap-0.5 text-[10px] text-[var(--varo-agent-muted)]' }, [
-                h('small', { class: 'truncate' }, `来源：${entry.parentLabel}`),
-                entry.version.createdAt ? h('time', { class: 'truncate' }, `创建：${entry.version.createdAt}`) : null,
+              h('p', { class: 'agent-workspace-card__detail' }, entry.version.summary || '暂无版本摘要'),
+              h('span', { class: 'agent-thread-versions__meta' }, [
+                h('small', `来源：${entry.parentLabel}`),
+                entry.version.createdAt ? h('time', `创建：${entry.version.createdAt}`) : null,
               ]),
-              h('footer', { class: 'flex flex-wrap gap-2 border-t border-[var(--varo-agent-border)] pt-2' }, [
+              h('footer', { class: 'agent-thread-versions__actions' }, [
                 entry.active
                   ? null
                   : h('button', {
                       'aria-label': `选择${entry.label}`,
-                      'class': workspacePrimaryTextButton,
+                      'class': workspaceActionClass('primary'),
                       'type': 'button',
                       'onClick': () => emit('select', entry.version),
                     }, '选择'),
                 h('button', {
                   'aria-label': `从${entry.label}创建分支`,
-                  'class': workspaceQuietButton,
+                  'class': workspaceActionClass(),
                   'type': 'button',
                   'onClick': () => emit('branch', entry.version),
                 }, '分支'),
@@ -678,14 +774,14 @@ export const AgentThreadVersions = defineComponent({
                   ? null
                   : h('button', {
                       'aria-label': `固定${entry.label}`,
-                      'class': workspaceQuietButton,
+                      'class': workspaceActionClass(),
                       'type': 'button',
                       'onClick': () => emit('pin', entry.version),
                     }, '固定'),
               ]),
             ]),
           ))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无会话版本'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无会话版本'),
     ])
   },
 })
@@ -949,11 +1045,19 @@ export const AgentRecommendation = defineComponent({
   emits: { accept: () => true },
   setup(props, { emit, slots }) {
     const confidence = computed(() => Math.min(100, Math.max(0, props.confidence)))
+    const confidenceLabel = computed(() => (
+      confidence.value >= 80 ? '高置信度' : confidence.value >= 55 ? '中等置信度' : '需要复核'
+    ))
     return () => h('section', { class: 'agent-recommendation grid gap-3 rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] p-4 shadow-[var(--varo-agent-shadow)]' }, [
-      h('header', { class: 'flex justify-between text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [h('span', 'AGENT 建议'), h('span', `${confidence.value}%`)]),
+      h('header', { class: 'flex justify-between gap-3 text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [
+        h('span', 'AGENT 建议'),
+        h('span', { class: 'tabular-nums' }, `${confidenceLabel.value} · ${confidence.value}%`),
+      ]),
       h('strong', { class: 'text-[15px] text-[var(--varo-agent-foreground)]' }, props.title),
       props.description ? h('p', { class: 'm-0 text-xs leading-5 text-[var(--varo-agent-text)]' }, props.description) : null,
-      h('span', { class: 'h-1.5 overflow-hidden rounded-full bg-blue-100' }, [h('i', { class: 'block h-full rounded-full bg-blue-600', style: { width: `${confidence.value}%` } })]),
+      h('span', { 'class': 'h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-primary-soft)]', 'aria-hidden': 'true' }, [
+        h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${confidence.value}%` } }),
+      ]),
       slots.default?.(),
       h('footer', { class: 'flex justify-end gap-2' }, [slots.secondary?.(), h('button', { class: primaryButton, type: 'button', onClick: () => emit('accept') }, props.acceptText)]),
     ])
@@ -1105,32 +1209,31 @@ export const AgentArtifact = defineComponent({
   props: { artifact: { type: Object as PropType<AgentArtifactItem>, required: true } },
   emits: { open: (_artifact: AgentArtifactItem) => true },
   setup(props, { emit }) {
+    const kindLabel = computed(() => {
+      if (props.artifact.kind === 'code') { return '代码产物' }
+      if (props.artifact.kind === 'image') { return '图像产物' }
+      if (props.artifact.kind === 'file') { return '文件产物' }
+      return '文档产物'
+    })
     return () =>
-      h('article', { class: 'overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 shadow-lg' }, [
-        h('header', { class: 'flex min-h-14 items-center justify-between gap-3 border-b border-slate-800 bg-slate-900 px-4' }, [
-          h('span', { class: 'grid min-w-0 gap-0.5' }, [
-            h('small', { class: 'text-[10px] font-black uppercase tracking-[0.16em] text-teal-300' }, props.artifact.kind || 'artifact'),
-            h('strong', { class: 'truncate text-xs text-slate-100' }, props.artifact.title),
+      h('article', { 'class': 'agent-artifact', 'data-kind': props.artifact.kind || 'document' }, [
+        h('header', { class: 'agent-artifact__header' }, [
+          h('span', { class: 'agent-artifact__heading' }, [
+            h('small', { class: 'agent-artifact__kind' }, kindLabel.value),
+            h('strong', { class: 'agent-artifact__title' }, props.artifact.title),
+            props.artifact.language ? h('span', { class: 'agent-artifact__lang' }, props.artifact.language) : null,
           ]),
-          h(
-            'button',
-            {
-              class: 'min-h-8 flex-none rounded-lg border border-slate-700 bg-slate-800 px-3 text-[11px] font-bold text-slate-200 transition-colors hover:border-teal-500 hover:text-white',
-              type: 'button',
-              onClick: () => emit('open', props.artifact),
-            },
-            '打开',
-          ),
+          h('button', {
+            class: 'agent-artifact__open',
+            type: 'button',
+            onClick: () => emit('open', props.artifact),
+          }, '打开'),
         ]),
         props.artifact.content
-          ? h(
-              'pre',
-              { class: 'm-0 max-h-72 overflow-auto whitespace-pre-wrap break-words bg-slate-950 px-4 py-3.5 font-mono text-[12px] leading-5 text-slate-200' },
-              props.artifact.content,
-            )
+          ? h('pre', { class: 'agent-artifact__body' }, props.artifact.content)
           : null,
         props.artifact.previewUrl
-          ? h('img', { alt: props.artifact.title, class: 'block max-h-80 w-full bg-slate-950 object-contain', src: props.artifact.previewUrl })
+          ? h('img', { alt: props.artifact.title, class: 'agent-artifact__preview', src: props.artifact.previewUrl })
           : null,
       ])
   },
@@ -1275,4 +1378,13 @@ export const AgentEventRenderer = defineComponent({
 
 export { AgentMarkdown }
 export * from './advanced'
+export { default as AgentRagPipeline } from './AgentRagPipeline.vue'
+export type {
+  AgentRagAnswerPart,
+  AgentRagPipelineProps,
+  AgentRagSource,
+  AgentRagSourceTone,
+  AgentRagStageId,
+  AgentRagStep,
+} from './rag-pipeline'
 export type { AgentStreamSnapshot, AgentStreamStatus, AgentToolPart } from '@varo-ui/ai'
diff --git a/apps/docs/src/components/agent-ui/rag-icons.ts b/apps/docs/src/components/agent-ui/rag-icons.ts
new file mode 100644
index 00000000..d7336904
--- /dev/null
+++ b/apps/docs/src/components/agent-ui/rag-icons.ts
@@ -0,0 +1,9 @@
+import type { AgentRagStageId } from './rag-pipeline'
+
+export const agentRagIcons: Record<AgentRagStageId, string> = {
+  query: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgNGgxMGEzIDMgMCAwIDEgMyAzdjdhMyAzIDAgMCAxLTMgM2gtNmwtNCAzdi0zYTMgMyAwIDAgMS0zLTNWN2EzIDMgMCAwIDEgMy0zWiIvPjxwYXRoIGQ9Ik05LjUgOWEyLjUgMi41IDAgMCAxIDUgLjVjMCAxLjUtMi41IDEuNS0yLjUgM00xMiAxNC41aC4wMSIvPjwvc3ZnPg==',
+  embed: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgOGgxNk00IDE2aDE2TTkgNCA3IDIwTTE3IDRsLTIgMTYiLz48L3N2Zz4=',
+  retrieve: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjYuNSIvPjxwYXRoIGQ9Im0xNiAxNiA0IDQiLz48L3N2Zz4=',
+  assemble: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgM2g3bDUgNXYxM0g1VjNoMlpNMTQgM3Y2aDVNOCAxM2g4TTggMTdoNiIvPjwvc3ZnPg==',
+  generate: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTEyIDMgMi4zIDYuN0wyMSAxMmwtNi43IDIuM0wxMiAyMWwtMi4zLTYuN0wzIDEybDYuNy0yLjNMMTIgM1pNMjAgMnY0TTE4IDRoNCIvPjwvc3ZnPg==',
+}
diff --git a/apps/docs/src/components/agent-ui/rag-pipeline.ts b/apps/docs/src/components/agent-ui/rag-pipeline.ts
new file mode 100644
index 00000000..c5be7a0e
--- /dev/null
+++ b/apps/docs/src/components/agent-ui/rag-pipeline.ts
@@ -0,0 +1,81 @@
+import type { ClassValue } from '../../lib/cn'
+import type { AgentAdvancedStatus } from './advanced-types'
+
+export type AgentRagStageId = 'query' | 'embed' | 'retrieve' | 'assemble' | 'generate'
+export type AgentRagSourceTone = 'blue' | 'violet' | 'rose'
+
+export interface AgentRagStep {
+  id: AgentRagStageId
+  status: AgentAdvancedStatus
+  detail?: string
+  durationMs?: number
+}
+
+export interface AgentRagSource {
+  id: string
+  title: string
+  excerpt?: string
+  score?: number
+  tokens?: number
+  tone?: AgentRagSourceTone
+}
+
+export type AgentRagAnswerPart
+  = | { id: string, type: 'text', text: string }
+    | { id: string, type: 'citation', sourceId: string }
+
+export interface AgentRagPipelineProps {
+  className?: ClassValue
+  title?: string
+  query?: string
+  steps?: readonly AgentRagStep[]
+  sources?: readonly AgentRagSource[]
+  answer?: readonly AgentRagAnswerPart[]
+  elapsedMs?: number
+  reducedMotion?: boolean
+}
+
+export const agentRagStages = [
+  { id: 'query', label: '理解问题', description: '确认本次查询与来源范围' },
+  { id: 'embed', label: '向量编码', description: '将问题转换为检索表示' },
+  { id: 'retrieve', label: '检索来源', description: '查找与问题相关的片段' },
+  { id: 'assemble', label: '组装上下文', description: '将来源片段组织为上下文' },
+  { id: 'generate', label: '引用回答', description: '生成可追溯到来源的回答' },
+] as const
+
+const statusLabels: Record<AgentAdvancedStatus, string> = {
+  waiting: '等待',
+  running: '处理中',
+  completed: '已完成',
+  failed: '失败',
+}
+
+export function resolveRagSteps(steps: readonly AgentRagStep[]) {
+  const byId = new Map<AgentRagStageId, AgentRagStep>()
+  for (const step of steps) {
+    if (byId.has(step.id)) { throw new Error(`Duplicate RAG stage: ${step.id}`) }
+    byId.set(step.id, step)
+  }
+  return agentRagStages.map((definition) => {
+    const step = byId.get(definition.id)
+    const status = step?.status ?? 'waiting'
+    return {
+      ...definition,
+      status,
+      detail: step?.detail ?? definition.description,
+      statusLabel: statusLabels[status],
+      durationLabel: step?.durationMs === undefined ? '' : `${Math.round(step.durationMs)} ms`,
+    }
+  })
+}
+
+const sourceTones = ['blue', 'violet', 'rose'] as const
+
+export function getRagSourceTone(source: AgentRagSource): AgentRagSourceTone {
+  if (source.tone) { return source.tone }
+  let hash = 0
+  for (let index = 0; index < source.id.length; index += 1) {
+    hash = (Math.imul(hash, 31) + source.id.charCodeAt(index)) | 0
+  }
+  return sourceTones[(hash >>> 0) % 3]!
+}
diff --git a/apps/docs/src/components/tencent-map.ts b/apps/docs/src/components/tencent-map.ts
new file mode 100644
index 00000000..9fb07f77
--- /dev/null
+++ b/apps/docs/src/components/tencent-map.ts
@@ -0,0 +1,78 @@
+export const tencentMapDemoKey = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
+
+export interface TencentLatLng {
+  getLat: () => number
+  getLng: () => number
+}
+
+export interface TencentMap {
+  destroy: () => void
+  on: (event: string, listener: (event?: unknown) => void) => void
+  setCenter: (center: TencentLatLng) => void
+  setZoom: (zoom: number) => void
+}
+
+export interface TencentMultiMarker {
+  destroy?: () => void
+  setGeometries: (geometries: unknown[]) => void
+}
+
+export interface TencentMapApi {
+  LatLng: new (latitude: number, longitude: number) => TencentLatLng
+  Map: new (container: HTMLElement, options: {
+    center: TencentLatLng
+    pitch?: number
+    rotation?: number
+    zoom: number
+  }) => TencentMap
+  MultiMarker: new (options: { geometries?: unknown[], map: TencentMap }) => TencentMultiMarker
+}
+
+let pending: Promise<TencentMapApi> | undefined
+
+function tencentMapApi(): TencentMapApi | undefined {
+  const api = Reflect.get(globalThis, 'TMap')
+  if (!api || typeof api !== 'object') { return undefined }
+  const candidate = api as TencentMapApi
+  if (typeof candidate.LatLng !== 'function' || typeof candidate.Map !== 'function' || typeof candidate.MultiMarker !== 'function') {
+    return undefined
+  }
+  return candidate
+}
+
+export function tencentRasterTileUrl(x: number, y: number, z: number) {
+  const size = 2 ** z
+  const tmsY = size - 1 - y
+  const server = Math.abs(x + tmsY) % 4
+  return `https://rt${server}.map.gtimg.com/tile?z=${z}&x=${x}&y=${tmsY}&type=vector&styleid=3`
+}
+
+export function loadTencentMapApi(key = tencentMapDemoKey): Promise<TencentMapApi> {
+  const loaded = tencentMapApi()
+  if (loaded) { return Promise.resolve(loaded) }
+  if (pending) { return pending }
+  pending = new Promise<TencentMapApi>((resolve, reject) => {
+    const callback = `__varoTencentMapReady_${Math.random().toString(36).slice(2)}`
+    const script = document.createElement('script')
+    const fail = (error: Error) => {
+      pending = undefined
+      Reflect.deleteProperty(globalThis, callback)
+      script.remove()
+      reject(error)
+    }
+    Reflect.set(globalThis, callback, () => {
+      Reflect.deleteProperty(globalThis, callback)
+      const api = tencentMapApi()
+      if (!api) {
+        fail(new Error('Tencent Map GL loaded without TMap'))
+        return
+      }
+      resolve(api)
+    })
+    script.async = true
+    script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${encodeURIComponent(key)}&callback=${callback}`
+    script.addEventListener('error', () => fail(new Error('Tencent Map GL script failed to load')))
+    document.head.append(script)
+  })
+  return pending
+}
diff --git a/apps/docs/src/composables/useRagPipelineDemo.ts b/apps/docs/src/composables/useRagPipelineDemo.ts
new file mode 100644
index 00000000..b5d638ac
--- /dev/null
+++ b/apps/docs/src/composables/useRagPipelineDemo.ts
@@ -0,0 +1,126 @@
+import type { AgentRagAnswerPart, AgentRagSource, AgentRagStageId, AgentRagStep } from '../components/agent-ui/rag-pipeline'
+import { onBeforeUnmount, shallowRef } from 'vue'
+import { agentRagStages } from '../components/agent-ui/rag-pipeline'
+
+export interface RagPipelineDemoSnapshot {
+  answer: AgentRagAnswerPart[]
+  elapsedMs: number
+  query: string
+  sources: AgentRagSource[]
+  steps: AgentRagStep[]
+}
+
+const demoSources: AgentRagSource[] = [
+  { excerpt: '验证链接过期是反复出现的失败原因。', id: 'support', score: 0.94, title: '客服工单', tokens: 126, tone: 'blue' },
+  { excerpt: '用户反复重试，却找不到明确的恢复入口。', id: 'replay', score: 0.88, title: '会话回放', tokens: 98, tone: 'violet' },
+]
+
+const completedDurations: Record<AgentRagStageId, number> = {
+  query: 380,
+  embed: 650,
+  retrieve: 540,
+  assemble: 580,
+  generate: 720,
+}
+
+function completedSteps(): AgentRagStep[] {
+  return agentRagStages.map(stage => ({
+    id: stage.id,
+    status: 'completed',
+    durationMs: completedDurations[stage.id],
+  }))
+}
+
+function waitingSteps(): AgentRagStep[] {
+  return agentRagStages.map(stage => ({ id: stage.id, status: 'waiting' }))
+}
+
+function completedAnswer(): AgentRagAnswerPart[] {
+  return [
+    { id: 'text-a', type: 'text', text: '验证链接过期后应提供新链接。' },
+    { id: 'citation-a', type: 'citation', sourceId: 'support' },
+    { id: 'text-b', type: 'text', text: ' 会话回放也显示缺少恢复入口。' },
+    { id: 'citation-b', type: 'citation', sourceId: 'replay' },
+  ]
+}
+
+export function useRagPipelineDemo(locale: 'en' | 'zh' = 'zh') {
+  const query = locale === 'en'
+    ? 'How can we make signup failures recoverable?'
+    : '如何让注册失败的用户顺利恢复流程？'
+  const snapshot = shallowRef<RagPipelineDemoSnapshot>({
+    answer: completedAnswer(),
+    elapsedMs: 2870,
+    query,
+    sources: demoSources,
+    steps: completedSteps(),
+  })
+  let runId = 0
+  let cancelDelay: (() => void) | undefined
+  let startedAt = 0
+
+  function invalidate() {
+    runId += 1
+    cancelDelay?.()
+    cancelDelay = undefined
+  }
+
+  function delay(milliseconds: number, currentRun: number) {
+    return new Promise<boolean>((resolve) => {
+      const timer = setTimeout(() => {
+        cancelDelay = undefined
+        resolve(currentRun === runId)
+      }, milliseconds)
+      cancelDelay = () => {
+        clearTimeout(timer)
+        resolve(false)
+      }
+    })
+  }
+
+  function setStep(id: AgentRagStageId, status: AgentRagStep['status'], durationMs?: number) {
+    snapshot.value = {
+      ...snapshot.value,
+      elapsedMs: Date.now() - startedAt,
+      steps: snapshot.value.steps.map(item => item.id === id ? { id, status, durationMs } : item),
+    }
+  }
+
+  function cancel() {
+    invalidate()
+    snapshot.value = {
+      ...snapshot.value,
+      steps: snapshot.value.steps.map(item => item.status === 'running'
+        ? { ...item, status: 'waiting' }
+        : item),
+    }
+  }
+
+  async function run() {
+    invalidate()
+    const currentRun = runId
+    startedAt = Date.now()
+    snapshot.value = {
+      answer: [],
+      elapsedMs: 0,
+      query,
+      sources: [],
+      steps: waitingSteps(),
+    }
+
+    for (const stage of agentRagStages) {
+      setStep(stage.id, 'running')
+      if (stage.id === 'retrieve') {
+        snapshot.value = { ...snapshot.value, sources: demoSources }
+      }
+      if (stage.id === 'generate') {
+        snapshot.value = { ...snapshot.value, answer: completedAnswer() }
+      }
+      if (!await delay(completedDurations[stage.id], currentRun)) { return }
+      setStep(stage.id, 'completed', completedDurations[stage.id])
+    }
+  }
+
+  onBeforeUnmount(invalidate)
+  return { snapshot, run, cancel }
+}
diff --git a/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue b/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue
index 6bd149f3..83179b2d 100644
--- a/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue
+++ b/apps/playground-h5/src/components/agent-ui/AgentRagPipeline.vue
@@ -500,7 +500,7 @@ onBeforeUnmount(clearAllPings)
                     <span class="agent-rag__source-number">{{ entry.number }}</span>
                     <span class="grid min-w-0 gap-1">
                       <span class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
-                        <strong class="agent-rag__source-title min-w-0 flex-1 text-[12px] font-semibold leading-[18px] text-[var(--varo-agent-foreground)]">
+                        <strong class="agent-rag__source-title min-w-0 flex-1 text-[12px] font-semibold leading-[18px]">
                           {{ entry.source.title }}
                         </strong>
                         <small
@@ -512,7 +512,7 @@ onBeforeUnmount(clearAllPings)
                       </span>
                       <span
                         v-if="entry.source.excerpt"
-                        class="agent-rag__source-excerpt text-[11px] leading-4 text-[var(--varo-agent-muted)]"
+                        class="agent-rag__source-excerpt text-[11px] leading-4"
                       >
                         {{ entry.source.excerpt }}
                       </span>
@@ -708,11 +708,8 @@ onBeforeUnmount(clearAllPings)
   height: 16px;
   background: currentcolor;
   mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  mask-position: center;
   mask-position: center;
   mask-size: contain;
-  mask-size: contain;
 }
 
 .agent-rag__panel {
@@ -816,11 +813,30 @@ onBeforeUnmount(clearAllPings)
 
 .agent-rag__source.is-highlighted,
 .agent-rag__source.is-pinging {
+  color: #172033;
   background: var(--agent-rag-tone-soft);
   border-color: var(--agent-rag-tone);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-rag-tone) 18%, transparent);
 }
 
+.agent-rag__source-title {
+  color: var(--varo-agent-foreground);
+}
+
+.agent-rag__source-excerpt {
+  color: var(--varo-agent-muted);
+}
+
+.agent-rag__source.is-highlighted strong.agent-rag__source-title,
+.agent-rag__source.is-pinging strong.agent-rag__source-title {
+  color: #172033;
+}
+
+.agent-rag__source.is-highlighted .agent-rag__source-excerpt,
+.agent-rag__source.is-pinging .agent-rag__source-excerpt {
+  color: #475569;
+}
+
 .agent-rag__source:focus-visible,
 .agent-rag__citation:focus-visible {
   outline: 2px solid var(--agent-rag-tone);
diff --git a/apps/playground-h5/src/components/agent-ui/advanced.ts b/apps/playground-h5/src/components/agent-ui/advanced.ts
index ece5f632..fed091f8 100644
--- a/apps/playground-h5/src/components/agent-ui/advanced.ts
+++ b/apps/playground-h5/src/components/agent-ui/advanced.ts
@@ -78,6 +78,75 @@ function renderStatus(status: AgentAdvancedStatus) {
   ])
 }
 
+function activityKindLabel(kind: AgentActivityItem['kind']) {
+  if (kind === 'reasoning') { return '推理' }
+  if (kind === 'search') { return '检索' }
+  if (kind === 'tool') { return '工具' }
+  return '轨迹'
+}
+
+function renderActivityKindIcon(kind: AgentActivityItem['kind']) {
+  const children = kind === 'search'
+    ? [h('circle', { cx: '11', cy: '11', r: '6' }), h('path', { d: 'm16 16 4 4' })]
+    : [h('path', {
+        d: kind === 'reasoning'
+          ? 'M12 3.5 13.4 8 18 9.2 13.4 10.5 12 15l-1.4-4.5L6 9.2 10.6 8 12 3.5zM18 13.5l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8.8-2.4z'
+          : kind === 'tool'
+            ? 'M8 7h8M8 12h8M8 17h5'
+            : 'M7 7h10M7 12h10M7 17h6',
+      })]
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, children)
+}
+
+function citationMark(item: AgentCitationItem) {
+  const source = item.domain || item.title
+  return source.trim().charAt(0).toUpperCase() || '#'
+}
+
+function renderPlusIcon() {
+  return h('svg', {
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-width': 2,
+    'viewBox': '0 0 24 24',
+    'width': 15,
+    'height': 15,
+    'aria-hidden': 'true',
+  }, [h('path', { d: 'M12 5v14M5 12h14' })])
+}
+function renderChatIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, [h('path', { d: 'M5 6h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3v-3H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z' })])
+}
+
+function renderSearchIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, [h('circle', { cx: '11', cy: '11', r: '6' }), h('path', { d: 'm16 16 4 4' })])
+}
+
 export const AgentRadioGroup = defineComponent({
   name: 'AgentRadioGroup',
   props: {
@@ -475,7 +544,8 @@ export const AgentToolResult = defineComponent({
   emits: { 'retry': () => true, 'update:open': (_value: boolean) => true },
   setup(props, { emit, slots }) {
     const open = shallowRef(props.defaultOpen || props.status === 'running' || props.status === 'failed')
-    return () => h('section', { 'class': 'agent-tool-result', 'data-status': props.status }, [
+    const meta = computed(() => [props.duration, props.summary].filter(Boolean).join(' · '))
+    return () => h('section', { 'class': 'agent-tool-result', 'data-open': String(open.value), 'data-status': props.status }, [
       h('button', {
         'class': 'agent-tool-result__header',
         'type': 'button',
@@ -485,8 +555,14 @@ export const AgentToolResult = defineComponent({
           emit('update:open', open.value)
         },
       }, [
-        h('span', [renderStatus(props.status), h('strong', props.name)]),
-        h('small', props.duration || props.summary),
+        h('span', { class: 'agent-tool-result__command' }, [
+          h('span', { 'class': 'agent-tool-result__prompt', 'aria-hidden': 'true' }, '$'),
+          h('strong', props.name),
+        ]),
+        h('span', { class: 'agent-tool-result__meta' }, [
+          renderStatus(props.status),
+          meta.value ? h('small', meta.value) : null,
+        ]),
       ]),
       open.value
         ? h('div', { class: 'agent-tool-result__body' }, slots.default?.() ?? [h('pre', props.output)])
@@ -658,12 +734,22 @@ export const AgentCitations = defineComponent({
           open.value = !open.value
           emit('update:open', open.value)
         },
-      }, [h('strong', props.title), h('span', `${props.items.length}`)]),
+      }, [
+        h('span', { class: 'agent-citations__heading' }, [
+          h('strong', props.title),
+          h('small', open.value ? '点击来源打开原文' : '展开查看引用来源'),
+        ]),
+        h('span', { class: 'agent-citations__count' }, `${props.items.length}`),
+      ]),
       open.value
-        ? h('ol', props.items.map((item, index) => h('li', { key: item.id }, [
-            h('button', { type: 'button', onClick: () => emit('open', item) }, [
-              h('span', String(index + 1)),
-              h('span', [h('strong', item.title), h('small', item.domain || item.description || item.url)]),
+        ? h('ol', { class: 'agent-citations__list' }, props.items.map(item => h('li', { key: item.id }, [
+            h('button', { class: 'agent-citations__item', type: 'button', onClick: () => emit('open', item) }, [
+              h('span', { 'class': 'agent-citations__mark', 'aria-hidden': 'true' }, citationMark(item)),
+              h('span', { class: 'agent-citations__copy' }, [
+                h('strong', item.title),
+                h('small', item.domain || item.url || ''),
+                item.description ? h('p', item.description) : null,
+              ]),
             ]),
           ])))
         : null,
@@ -678,12 +764,39 @@ export const AgentActivity = defineComponent({
     title: { type: String, default: 'Agent activity' },
   },
   setup(props) {
+    const completed = computed(() => props.items.filter(item => item.status === 'completed').length)
+    const current = computed(() => props.items.find(item => item.status === 'running' || item.status === 'failed'))
     return () => h('section', { 'class': 'agent-activity', 'aria-live': 'polite' }, [
-      h('header', [h('strong', props.title), h('span', `${props.items.filter(item => item.status === 'completed').length}/${props.items.length}`)]),
-      h('ol', props.items.map(item => h('li', { 'data-kind': item.kind, 'data-status': item.status, 'key': item.id }, [
-        h('i', { 'aria-hidden': 'true' }),
-        h('div', [h('span', [h('strong', item.title), item.duration ? h('small', item.duration) : null]), item.detail ? h('p', item.detail) : null]),
-        renderStatus(item.status),
+      h('header', { class: 'agent-activity__header' }, [
+        h('span', { class: 'agent-activity__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.items.length && props.items.length ? '全部完成' : '等待开始'),
+        ]),
+        h('span', { class: 'agent-activity__count' }, `${completed.value}/${props.items.length}`),
+      ]),
+      h('ol', { class: 'agent-activity__body' }, props.items.map(item => h('li', {
+        'class': 'agent-activity__item',
+        'data-kind': item.kind,
+        'data-status': item.status,
+        'aria-current': item.status === 'running' ? 'step' : undefined,
+        'key': item.id,
+      }, [
+        h('span', { 'class': 'agent-activity__kind', 'aria-hidden': 'true' }, [
+          renderActivityKindIcon(item.kind),
+        ]),
+        h('span', { class: 'agent-activity__copy' }, [
+          h('span', { class: 'agent-activity__row' }, [
+            h('strong', item.title),
+            renderStatus(item.status),
+          ]),
+          h('span', { class: 'agent-activity__meta' }, [
+            h('small', { class: 'agent-activity__kind-label' }, activityKindLabel(item.kind)),
+            item.duration ? h('small', item.duration) : null,
+          ]),
+          item.detail ? h('p', item.detail) : null,
+        ]),
       ]))),
     ])
   },
@@ -705,13 +818,26 @@ export const AgentSidebar = defineComponent({
   },
   setup(props, { emit, slots }) {
     return () => h('aside', { 'class': 'agent-sidebar', 'data-collapsed': String(props.collapsed) }, [
-      h('header', [
-        h('strong', props.collapsed ? 'AI' : props.title),
-        h('button', { 'type': 'button', 'aria-label': 'Toggle sidebar', 'onClick': () => emit('update:collapsed', !props.collapsed) }, props.collapsed ? '›' : '‹'),
+      h('header', { class: 'agent-sidebar__header' }, [
+        h('span', { class: 'agent-sidebar__heading' }, [
+          h('span', { 'class': 'agent-sidebar__brand', 'aria-hidden': 'true' }, [renderChatIcon()]),
+          !props.collapsed ? h('strong', props.title) : null,
+        ]),
+        h('button', {
+          'class': 'agent-sidebar__toggle',
+          'type': 'button',
+          'aria-label': 'Toggle sidebar',
+          'onClick': () => emit('update:collapsed', !props.collapsed),
+        }, props.collapsed ? '›' : '‹'),
       ]),
-      !props.collapsed ? h('button', { class: 'agent-sidebar__create', type: 'button', onClick: () => emit('create') }, '+ New chat') : null,
-      h('nav', props.groups.map(group => h('section', { key: group.id }, [
-        !props.collapsed ? h('small', group.label) : null,
+      !props.collapsed
+        ? h('button', { class: 'agent-sidebar__create', type: 'button', onClick: () => emit('create') }, [
+            renderPlusIcon(),
+            'New chat',
+          ])
+        : null,
+      h('nav', { class: 'agent-sidebar__nav', role: 'navigation' }, props.groups.map(group => h('section', { class: 'agent-sidebar__group', key: group.id }, [
+        !props.collapsed ? h('small', { class: 'agent-sidebar__group-label' }, group.label) : null,
         ...group.items.map(item => h('button', {
           'class': 'agent-sidebar__item',
           'data-active': String(item.id === props.activeId),
@@ -723,9 +849,14 @@ export const AgentSidebar = defineComponent({
             emit('select', item)
           },
         }, [
-          h('i', { 'aria-hidden': 'true' }, item.label.charAt(0).toUpperCase()),
-          !props.collapsed ? h('span', [h('strong', item.label), item.meta ? h('small', item.meta) : null]) : null,
-          !props.collapsed && item.badge !== undefined ? h('b', String(item.badge)) : null,
+          h('span', { 'class': 'agent-sidebar__mark', 'aria-hidden': 'true' }, [renderChatIcon()]),
+          !props.collapsed
+            ? h('span', { class: 'agent-sidebar__copy' }, [
+                h('strong', item.label),
+                item.meta ? h('small', item.meta) : null,
+              ])
+            : null,
+          !props.collapsed && item.badge !== undefined ? h('b', { class: 'agent-sidebar__badge' }, String(item.badge)) : null,
         ])),
       ]))),
       slots.footer?.(),
@@ -742,11 +873,28 @@ export const AgentContextCard = defineComponent({
   emits: { open: (_chunk: AgentContextChunk) => true },
   setup(props, { emit }) {
     return () => h('section', { class: 'agent-context-card' }, [
-      h('header', [h('strong', props.title), h('span', `${props.chunks.length} chunks`)]),
-      h('div', props.chunks.map(chunk => h('article', { key: chunk.id }, [
-        h('header', [h('strong', chunk.label || chunk.source || 'Context'), chunk.content.length ? h('small', `${chunk.content.length} chars`) : null]),
-        h('p', chunk.content),
-        h('footer', [h('span', chunk.sourceType || 'Source'), h('button', { type: 'button', onClick: () => emit('open', chunk) }, chunk.source || 'Open')]),
+      h('header', { class: 'agent-context-card__header' }, [
+        h('span', { class: 'agent-context-card__heading' }, [
+          h('strong', props.title),
+          h('small', props.chunks.length ? '来自检索结果的上下文片段' : '暂无检索上下文'),
+        ]),
+        h('span', { class: 'agent-context-card__count' }, `${props.chunks.length}`),
+      ]),
+      h('ol', { class: 'agent-context-card__list' }, props.chunks.map((chunk, index) => h('li', { key: chunk.id }, [
+        h('article', { class: 'agent-context-card__chunk' }, [
+          h('header', { class: 'agent-context-card__chunk-head' }, [
+            h('span', { 'class': 'agent-context-card__index', 'aria-hidden': 'true' }, String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-context-card__chunk-copy' }, [
+              h('strong', chunk.label || chunk.source || 'Context'),
+              chunk.sourceType ? h('small', { class: 'agent-context-card__type' }, chunk.sourceType) : null,
+            ]),
+          ]),
+          h('p', { class: 'agent-context-card__quote' }, chunk.content),
+          h('footer', { class: 'agent-context-card__chunk-foot' }, [
+            h('small', chunk.source || 'Source'),
+            h('button', { class: 'agent-context-card__open', type: 'button', onClick: () => emit('open', chunk) }, '打开'),
+          ]),
+        ]),
       ]))),
     ])
   },
@@ -767,11 +915,27 @@ export const AgentInsightCard = defineComponent({
       emit('update:current', (props.current + delta + props.insights.length) % props.insights.length)
     }
     return () => h('article', { 'class': 'agent-insight-card', 'data-tone': active.value?.tone || 'default' }, [
-      h('header', [h('strong', props.title), h('span', `${props.current + 1}/${props.insights.length}`)]),
-      active.value ? h('div', [active.value.label ? h('small', active.value.label) : null, h('h3', active.value.description), active.value.value ? h('b', active.value.value) : null]) : h('p', 'No insights'),
-      h('footer', [
-        h('span', [h('button', { type: 'button', onClick: () => move(-1) }, '‹'), h('button', { type: 'button', onClick: () => move(1) }, '›')]),
-        active.value?.action ? h('button', { type: 'button', onClick: () => emit('action', active.value!) }, active.value.action) : null,
+      h('header', { class: 'agent-insight-card__header' }, [
+        h('span', { class: 'agent-insight-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value?.label || '运行指标'),
+        ]),
+        h('span', { class: 'agent-insight-card__count' }, `${props.insights.length ? props.current + 1 : 0}/${props.insights.length}`),
+      ]),
+      active.value
+        ? h('div', { class: 'agent-insight-card__body' }, [
+            active.value.value ? h('b', { class: 'agent-insight-card__value' }, active.value.value) : null,
+            h('p', { class: 'agent-insight-card__copy' }, active.value.description),
+          ])
+        : h('p', { class: 'agent-insight-card__empty' }, '暂无洞察'),
+      h('footer', { class: 'agent-insight-card__footer' }, [
+        h('span', { class: 'agent-insight-card__nav' }, [
+          h('button', { 'class': 'agent-insight-card__nav-btn', 'type': 'button', 'aria-label': 'Previous insight', 'onClick': () => move(-1) }, '‹'),
+          h('button', { 'class': 'agent-insight-card__nav-btn', 'type': 'button', 'aria-label': 'Next insight', 'onClick': () => move(1) }, '›'),
+        ]),
+        active.value?.action
+          ? h('button', { class: 'agent-insight-card__action', type: 'button', onClick: () => emit('action', active.value!) }, active.value.action)
+          : null,
       ]),
     ])
   },
@@ -786,8 +950,9 @@ export const AgentSelectionActions = defineComponent({
   emits: { select: (_payload: { action: AgentSelectionAction, text: string }) => true },
   setup(props, { emit }) {
     return () => h('section', { class: 'agent-selection-actions' }, [
-      h('blockquote', props.text),
-      h('div', props.actions.map(action => h('button', {
+      h('p', { class: 'agent-selection-actions__quote' }, props.text),
+      h('div', { class: 'agent-selection-actions__toolbar' }, props.actions.map(action => h('button', {
+        class: 'agent-selection-actions__action',
         key: action.id,
         type: 'button',
         onClick: () => emit('select', { action, text: props.text }),
@@ -907,14 +1072,38 @@ export const AgentCommandSearch = defineComponent({
       const query = props.modelValue.trim().toLowerCase()
       return query ? props.items.filter(item => `${item.label} ${item.description ?? ''} ${item.group ?? ''}`.toLowerCase().includes(query)) : props.items
     })
+    const groupedItems = computed(() => {
+      const groups = new Map<string, AgentSearchItem[]>()
+      for (const item of visibleItems.value) {
+        const key = item.group || 'Commands'
+        const list = groups.get(key)
+        if (list) { list.push(item) }
+        else { groups.set(key, [item]) }
+      }
+      return [...groups.entries()].map(([label, items]) => ({ label, items }))
+    })
     return () => h('section', { class: 'agent-command-search' }, [
-      h('label', [h('span', '⌕'), h('input', { value: props.modelValue, placeholder: props.placeholder, onInput: (event: Event) => emit('update:modelValue', eventValue(event)) })]),
-      visibleItems.value.length
-        ? h('div', visibleItems.value.map(item => h('button', { key: item.id, type: 'button', onClick: () => emit('select', item) }, [
-            h('span', [h('strong', item.label), item.description ? h('small', item.description) : null]),
-            item.shortcut ? h('kbd', item.shortcut) : null,
-          ])))
-        : h('p', props.emptyText),
+      h('label', { class: 'agent-command-search__field' }, [
+        h('span', { 'class': 'agent-command-search__icon', 'aria-hidden': 'true' }, [renderSearchIcon()]),
+        h('input', { value: props.modelValue, placeholder: props.placeholder, onInput: (event: Event) => emit('update:modelValue', eventValue(event)) }),
+      ]),
+      groupedItems.value.length
+        ? h('div', { class: 'agent-command-search__list' }, groupedItems.value.flatMap(group => [
+            h('small', { class: 'agent-command-search__group', key: `group-${group.label}` }, group.label),
+            ...group.items.map(item => h('button', {
+              class: 'agent-command-search__item',
+              key: item.id,
+              type: 'button',
+              onClick: () => emit('select', item),
+            }, [
+              h('span', { class: 'agent-command-search__copy' }, [
+                h('strong', item.label),
+                item.description ? h('small', item.description) : null,
+              ]),
+              item.shortcut ? h('kbd', item.shortcut) : null,
+            ])),
+          ]))
+        : h('p', { class: 'agent-command-search__empty' }, props.emptyText),
     ])
   },
 })
@@ -927,16 +1116,46 @@ export const AgentFlowchart = defineComponent({
   },
   emits: { add: (_afterId?: string) => true, select: (_node: AgentFlowNode) => true },
   setup(props, { emit }) {
+    const typeLabel = (type: AgentFlowNode['type']) => {
+      if (type === 'trigger') { return '触发' }
+      if (type === 'condition') { return '条件' }
+      if (type === 'action') { return '动作' }
+      return '结果'
+    }
     return () => h('section', { class: 'agent-flowchart' }, [
-      h('header', [h('strong', props.title), h('button', { type: 'button', onClick: () => emit('add', undefined) }, '+ Step')]),
-      h('div', props.nodes.flatMap((node, index): VNodeChild[] => [
-        h('button', { 'class': 'agent-flowchart__node', 'data-type': node.type, 'key': node.id, 'type': 'button', 'onClick': () => emit('select', node) }, [
-          h('small', node.type),
+      h('header', { class: 'agent-flowchart__header' }, [
+        h('span', { class: 'agent-flowchart__heading' }, [
+          h('strong', props.title),
+          h('small', `${props.nodes.length} 个步骤`),
+        ]),
+        h('button', { class: 'agent-flowchart__add', type: 'button', onClick: () => emit('add', undefined) }, [renderPlusIcon(), 'Step']),
+      ]),
+      h('div', { class: 'agent-flowchart__canvas' }, props.nodes.flatMap((node, index): VNodeChild[] => [
+        h('button', {
+          'class': 'agent-flowchart__node',
+          'data-type': node.type,
+          'data-status': node.status || 'waiting',
+          'key': node.id,
+          'type': 'button',
+          'onClick': () => emit('select', node),
+        }, [
+          h('span', { class: 'agent-flowchart__node-head' }, [
+            h('span', { 'class': 'agent-flowchart__index', 'aria-hidden': 'true' }, String(index + 1).padStart(2, '0')),
+            h('small', { class: 'agent-flowchart__type' }, typeLabel(node.type)),
+            node.status ? renderStatus(node.status) : null,
+          ]),
           h('strong', node.label),
-          node.detail ? h('span', node.detail) : null,
-          node.status ? renderStatus(node.status) : null,
+          node.detail ? h('span', { class: 'agent-flowchart__detail' }, node.detail) : null,
         ]),
-        index < props.nodes.length - 1 ? h('button', { 'class': 'agent-flowchart__connector', 'key': `${node.id}-connector`, 'type': 'button', 'aria-label': `Add after ${node.label}`, 'onClick': () => emit('add', node.id) }, '+') : null,
+        index < props.nodes.length - 1
+          ? h('button', {
+              'class': 'agent-flowchart__connector',
+              'key': `${node.id}-connector`,
+              'type': 'button',
+              'aria-label': `Add after ${node.label}`,
+              'onClick': () => emit('add', node.id),
+            }, renderPlusIcon())
+          : null,
       ])),
     ])
   },
@@ -998,9 +1217,17 @@ export const AgentFineTune = defineComponent({
     }
 
     return () => h('section', { class: 'agent-fine-tune' }, [
-      h('header', [h('strong', props.title), h('span', 'Adjust')]),
-      h('div', props.controls.map(renderControl)),
-      h('footer', [h('button', { type: 'button', onClick: () => emit('apply', props.controls) }, 'Apply changes')]),
+      h('header', { class: 'agent-fine-tune__header' }, [
+        h('span', { class: 'agent-fine-tune__heading' }, [
+          h('strong', props.title),
+          h('small', '调整生成参数后立即生效'),
+        ]),
+        h('span', { class: 'agent-fine-tune__count' }, `${props.controls.length} 项`),
+      ]),
+      h('div', { class: 'agent-fine-tune__grid' }, props.controls.map(renderControl)),
+      h('footer', { class: 'agent-fine-tune__footer' }, [
+        h('button', { class: 'agent-fine-tune__apply', type: 'button', onClick: () => emit('apply', props.controls) }, 'Apply changes'),
+      ]),
     ])
   },
 })
diff --git a/apps/playground-h5/src/components/agent-ui/agent-advanced.css b/apps/playground-h5/src/components/agent-ui/agent-advanced.css
index 14ac3dd3..f70a46f6 100644
--- a/apps/playground-h5/src/components/agent-ui/agent-advanced.css
+++ b/apps/playground-h5/src/components/agent-ui/agent-advanced.css
@@ -97,10 +97,88 @@
 .agent-code-block__cursor { position: absolute; right: 12px; bottom: 12px; width: 6px; height: 14px; background: #2dd4bf; animation: varo-agent-code-cursor .75s steps(1) infinite; }
 
 @keyframes varo-agent-code-cursor { 50% { opacity: 0; } }
-.agent-tool-result, .agent-citations, .agent-activity, .agent-context-card, .agent-insight-card, .agent-tool-approval, .agent-fine-tune { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
-.agent-tool-result__header, .agent-citations__trigger { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 13px; text-align: left; background: #fff; border: 0; }
-.agent-tool-result__header > span { display: flex; gap: 9px; align-items: center; min-width: 0; }
-.agent-tool-result__header strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #1e293b; white-space: nowrap; }
+.agent-citations, .agent-activity, .agent-context-card, .agent-insight-card, .agent-tool-approval, .agent-fine-tune { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
+
+
+.agent-tool-result {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-tool-result__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  background: #111c30;
+  border: 0;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-tool-result[data-open='false'] .agent-tool-result__header {
+  border-bottom-color: transparent;
+}
+
+.agent-tool-result__command {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agent-tool-result__prompt {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2dd4bf;
+}
+
+.agent-tool-result__command strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-tool-result__meta {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-tool-result__meta .agent-advanced__status {
+  padding: 3px 8px;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 12%);
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 999px;
+}
+
+.agent-tool-result__meta .agent-advanced__status[data-status='completed'],
+.agent-tool-result__meta .agent-advanced__status[data-status='running'] {
+  color: #5eead4;
+  background: rgb(45 212 191 / 12%);
+  border-color: rgb(45 212 191 / 24%);
+}
+
+.agent-tool-result__meta .agent-advanced__status[data-status='failed'] {
+  color: #fca5a5;
+  background: rgb(248 113 113 / 12%);
+  border-color: rgb(248 113 113 / 24%);
+}
 
 .agent-file-diff {
   --agent-diff-surface: var(--varo-surface, #fff);
@@ -333,9 +411,9 @@
 .agent-file-diff__action:hover { color: var(--agent-diff-text); border-color: #99a7b6; }
 .agent-file-diff__action:last-child { color: #fff; background: #0f766e; border-color: #0f766e; box-shadow: 0 5px 12px rgb(15 118 110 / 20%); }
 .agent-file-diff__action:disabled { cursor: not-allowed; opacity: .5; }
-.agent-tool-approval > footer, .agent-insight-card > footer, .agent-fine-tune > footer, .agent-image-generation > footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid #f1f5f9; }
-.agent-tool-approval button, .agent-insight-card button, .agent-fine-tune button, .agent-image-generation button { min-height: 34px; padding: 0 11px; font-size: 10px; font-weight: 750; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
-.agent-tool-approval > footer button:last-child, .agent-fine-tune > footer button { color: #fff; background: #0f766e; border-color: #0f766e; }
+.agent-tool-approval > footer, .agent-image-generation > footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid #f1f5f9; }
+.agent-tool-approval button, .agent-image-generation button { min-height: 34px; padding: 0 11px; font-size: 10px; font-weight: 750; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
+.agent-tool-approval > footer button:last-child { color: #fff; background: #0f766e; border-color: #0f766e; }
 
 @media (max-width: 600px) {
   .agent-file-diff__header { gap: 7px; padding-inline: 9px; }
@@ -347,10 +425,10 @@
   .agent-file-diff__hunk-count { display: none; }
   .agent-file-diff__footer { padding-inline: 9px; }
 }
-.agent-tool-result__header small { font-size: 10px; color: #94a3b8; }
-.agent-tool-result__body { padding: 12px; color: #cbd5e1; background: #0f172a; border-top: 1px solid #f1f5f9; }
-.agent-tool-result__body pre { margin: 0; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 10px; white-space: pre-wrap; }
-.agent-tool-result__retry { min-height: 32px; padding: 0 10px; margin: 0 12px 12px; font-size: 10px; color: #dc2626; background: #fff; border: 1px solid #fecaca; border-radius: 9px; }
+.agent-tool-result__header small { font-size: 10px; font-variant-numeric: tabular-nums; color: #94a3b8; }
+.agent-tool-result__body { padding: 12px; color: #cbd5e1; background: #0f172a; }
+.agent-tool-result__body pre { margin: 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.7; white-space: pre-wrap; }
+.agent-tool-result__retry { min-height: 32px; padding: 0 10px; margin: 0 12px 12px; font-size: 10px; font-weight: 750; color: #fecaca; background: rgb(248 113 113 / 10%); border: 1px solid rgb(248 113 113 / 28%); border-radius: 9px; }
 .agent-image-generation { margin: 0; }
 
 .agent-image-generation__canvas {
@@ -407,65 +485,508 @@
 .agent-tool-approval dt { color: #92400e; }
 .agent-tool-approval dd { margin: 0; font-weight: 650; color: #451a03; text-align: right; }
 .agent-tool-approval > label { display: flex; gap: 7px; align-items: center; padding: 0 14px 12px; font-size: 10px; color: #92400e; }
-.agent-citations__trigger strong { font-size: 12px; }
-.agent-citations__trigger span { display: grid; place-items: center; width: 24px; height: 24px; font-size: 10px; color: #64748b; background: #f1f5f9; border-radius: 999px; }
-.agent-citations ol { display: grid; gap: 7px; padding: 0 12px 12px; margin: 0; list-style: none; }
-.agent-citations li button { display: flex; gap: 9px; align-items: center; width: 100%; min-height: 42px; padding: 6px 9px; text-align: left; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 11px; }
-.agent-citations li button > span:first-child { display: grid; flex: none; place-items: center; width: 22px; height: 22px; font-size: 9px; color: #64748b; background: #fff; border-radius: 999px; }
-.agent-citations li button > span:last-child { display: grid; min-width: 0; }
-.agent-citations li strong, .agent-citations li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-citations li strong { font-size: 10px; color: #334155; }
-.agent-citations li small { font-size: 9px; color: #94a3b8; }
-.agent-activity > header, .agent-context-card > header, .agent-insight-card > header, .agent-fine-tune > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border-bottom: 1px solid #f1f5f9; }
-.agent-activity > header strong, .agent-context-card > header strong, .agent-insight-card > header strong, .agent-fine-tune > header strong { font-size: 12px; }
-.agent-activity > header span, .agent-context-card > header span, .agent-insight-card > header span, .agent-fine-tune > header span { font-size: 10px; color: #64748b; }
-.agent-activity ol { display: grid; gap: 0; padding: 10px 13px 13px; margin: 0; list-style: none; }
-.agent-activity li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; padding: 8px 0; }
-.agent-activity li > i { width: 9px; height: 9px; margin-top: 4px; background: #94a3b8; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px #cbd5e1; }
-.agent-activity li[data-status='running'] > i { background: #0f766e; }
-.agent-activity li[data-status='completed'] > i { background: #22c55e; }
-.agent-activity li > div { display: grid; min-width: 0; }
-.agent-activity li > div > span { display: flex; gap: 8px; justify-content: space-between; }
-.agent-activity li strong { font-size: 11px; color: #334155; }
-.agent-activity li small, .agent-activity li p { font-size: 9px; color: #94a3b8; }
-.agent-activity li p { margin: 2px 0 0; }
+
+.agent-citations__trigger {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  text-align: left;
+  background: #fff;
+  border: 0;
+}
+
+.agent-citations__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-citations__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-citations__heading small,
+.agent-citations__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: #64748b;
+}
+
+.agent-citations__count {
+  display: grid;
+  flex: none;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 7px;
+  font-variant-numeric: tabular-nums;
+  background: #f1f5f9;
+  border-radius: 999px;
+}
+
+.agent-citations__list {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-citations__list > li {
+  display: block;
+  list-style: none;
+}
+
+.agent-citations__list > li::marker {
+  content: none;
+}
+
+.agent-citations__item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  width: 100%;
+  min-height: 58px;
+  padding: 9px 10px;
+  text-align: left;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+}
+
+.agent-citations__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  font-weight: 800;
+  color: #0f766e;
+  background: #ccfbf1;
+  border-radius: 9px;
+}
+
+.agent-citations__copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-citations__copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: #1e293b;
+  white-space: nowrap;
+}
+
+.agent-citations__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  line-height: 16px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.agent-citations__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: #64748b;
+}
+.agent-fine-tune__header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; min-height: 52px; padding: 12px 14px 11px; border-bottom: 1px solid #e2e8f0; }
+.agent-fine-tune__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-fine-tune__heading strong { font-size: 13px; font-weight: 760; line-height: 18px; }
+
+.agent-fine-tune__heading small,
+.agent-fine-tune__count { font-size: 11px; line-height: 16px; color: #64748b; }
+.agent-fine-tune__count { flex: none; font-variant-numeric: tabular-nums; }
+
+.agent-activity__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.agent-activity__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-activity__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-activity__heading small,
+.agent-activity__count,
+.agent-activity__meta small {
+  font-size: 11px;
+  line-height: 16px;
+  color: #64748b;
+}
+
+.agent-activity__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-activity__body {
+  display: grid;
+  padding: 8px 10px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-activity__item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 58px;
+  padding: 9px 10px;
+  list-style: none;
+  border-radius: 12px;
+}
+
+.agent-activity__item::marker {
+  content: none;
+}
+
+.agent-activity__item[data-status='running'] {
+  background: #f0fdfa;
+}
+
+.agent-activity__item[data-status='failed'] {
+  background: #fef2f2;
+}
+
+.agent-activity__kind {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  color: #64748b;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 9px;
+}
+
+.agent-activity__kind svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.agent-activity__item[data-kind='reasoning'] .agent-activity__kind {
+  color: #0f766e;
+  background: #ccfbf1;
+  border-color: #99f6e4;
+}
+
+.agent-activity__item[data-kind='search'] .agent-activity__kind {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.agent-activity__item[data-kind='tool'] .agent-activity__kind {
+  color: #7c3aed;
+  background: #f5f3ff;
+  border-color: #ddd6fe;
+}
+
+.agent-activity__item[data-status='running'] .agent-activity__kind {
+  animation: varo-agent-advanced-pulse 1s ease-in-out infinite;
+}
+
+.agent-activity__copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-activity__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-activity__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-activity__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-activity__kind-label {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #64748b;
+  background: #f1f5f9;
+  border-radius: 999px;
+}
+
+.agent-activity__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: #64748b;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-activity__item[data-status='running'] .agent-activity__kind {
+    animation: none;
+  }
+}
 .agent-sidebar { display: grid; align-content: start; width: 248px; min-height: 360px; overflow: hidden; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; transition: width .2s ease; }
 .agent-sidebar[data-collapsed='true'] { width: 64px; }
-.agent-sidebar > header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e2e8f0; }
-.agent-sidebar > header strong { font-size: 12px; }
-.agent-sidebar > header button { display: grid; place-items: center; width: 28px; height: 28px; color: #64748b; background: #f1f5f9; border: 0; border-radius: 9px; }
-.agent-sidebar__create { min-height: 36px; margin: 10px 10px 5px; font-size: 10px; font-weight: 750; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; }
-.agent-sidebar nav { display: grid; gap: 10px; padding: 7px; }
-.agent-sidebar nav section { display: grid; gap: 3px; }
-.agent-sidebar nav section > small { padding: 2px 7px; font-size: 9px; font-weight: 750; color: #94a3b8; text-transform: uppercase; }
-.agent-sidebar__item { display: flex; gap: 8px; align-items: center; width: 100%; min-height: 38px; padding: 0 7px; color: #64748b; text-align: left; background: transparent; border: 0; border-radius: 10px; }
+.agent-sidebar__header { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e2e8f0; }
+.agent-sidebar__heading { display: flex; gap: 8px; align-items: center; min-width: 0; }
+
+.agent-sidebar__brand,
+.agent-sidebar__mark { display: grid; flex: none; place-items: center; width: 24px; height: 24px; color: #0f766e; background: #ccfbf1; border-radius: 8px; }
+
+.agent-sidebar__brand svg,
+.agent-sidebar__mark svg { display: block; width: 13px; height: 13px; }
+.agent-sidebar__heading strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 760; white-space: nowrap; }
+.agent-sidebar__toggle { display: grid; place-items: center; width: 28px; height: 28px; color: #64748b; background: #f1f5f9; border: 0; border-radius: 9px; }
+.agent-sidebar__create { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 36px; margin: 10px 10px 5px; font-size: 11px; font-weight: 750; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; }
+.agent-sidebar__create svg { width: 13px; height: 13px; }
+.agent-sidebar__nav { display: grid; gap: 10px; padding: 7px; }
+.agent-sidebar__group { display: grid; gap: 3px; }
+.agent-sidebar__group-label { padding: 2px 7px; font-size: 10px; font-weight: 750; color: #94a3b8; text-transform: uppercase; }
+.agent-sidebar__item { display: flex; gap: 8px; align-items: center; width: 100%; min-height: 42px; padding: 0 7px; color: #64748b; text-align: left; background: transparent; border: 0; border-radius: 10px; }
 .agent-sidebar__item[data-active='true'] { color: #0f766e; background: #fff; box-shadow: 0 3px 12px rgb(15 23 42 / 6%); }
-.agent-sidebar__item > i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; font-size: 9px; font-style: normal; font-weight: 800; background: #e2e8f0; border-radius: 8px; }
-.agent-sidebar__item > span { display: grid; flex: 1; min-width: 0; }
-.agent-sidebar__item strong, .agent-sidebar__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-sidebar__item strong { font-size: 10px; }
-.agent-sidebar__item small { font-size: 8px; color: #94a3b8; }
-.agent-sidebar__item > b { font-size: 9px; }
-.agent-context-card > div { display: grid; gap: 9px; padding: 11px; }
-.agent-context-card article { overflow: hidden; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
-.agent-context-card article > header, .agent-context-card article > footer { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; }
-.agent-context-card article strong { font-size: 10px; }
-.agent-context-card article small { font-size: 8px; color: #94a3b8; }
-.agent-context-card article p { padding: 9px 10px; margin: 0; font-size: 10px; line-height: 1.55; color: #475569; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
-.agent-context-card article footer { font-size: 8px; color: #64748b; }
-.agent-context-card article footer button { font-size: 9px; font-weight: 750; color: #0f766e; background: transparent; border: 0; }
-.agent-insight-card > div { display: grid; gap: 8px; align-content: center; min-height: 150px; padding: 16px; background: linear-gradient(145deg, #fff, #f8fafc); }
-.agent-insight-card[data-tone='danger'] > div { background: linear-gradient(145deg, #fff, #fef2f2); }
-.agent-insight-card[data-tone='success'] > div { background: linear-gradient(145deg, #fff, #f0fdf4); }
-.agent-insight-card > div small { font-size: 9px; font-weight: 750; color: #64748b; text-transform: uppercase; }
-.agent-insight-card > div h3 { margin: 0; font-size: 16px; line-height: 1.4; color: #0f172a; }
-.agent-insight-card > div b { font-size: 24px; color: #0f766e; }
-.agent-insight-card > footer { justify-content: space-between; }
-.agent-insight-card > footer span { display: flex; gap: 5px; }
-.agent-selection-actions { display: grid; gap: 10px; }
-.agent-selection-actions blockquote { padding: 12px 14px; margin: 0; font-size: 12px; line-height: 1.65; color: #334155; background: #f0fdfa; border-left: 3px solid #14b8a6; border-radius: 0 12px 12px 0; }
-.agent-selection-actions > div { display: flex; flex-wrap: wrap; gap: 7px; }
-.agent-selection-actions button { min-height: 34px; padding: 0 11px; font-size: 10px; font-weight: 750; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; }
+.agent-sidebar__item[data-active='true'] .agent-sidebar__mark { color: #fff; background: #0f766e; }
+.agent-sidebar__copy { display: grid; flex: 1; min-width: 0; }
+
+.agent-sidebar__copy strong,
+.agent-sidebar__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-sidebar__copy strong { font-size: 11px; }
+.agent-sidebar__copy small { font-size: 10px; color: #94a3b8; }
+.agent-sidebar__badge { display: grid; flex: none; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; font-weight: 750; color: #334155; background: #f1f5f9; border-radius: 999px; }
+
+.agent-sidebar[data-collapsed='true'] .agent-sidebar__header,
+.agent-sidebar[data-collapsed='true'] .agent-sidebar__item { justify-content: center; }
+
+.agent-context-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.agent-context-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-context-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-context-card__heading small,
+.agent-context-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: #64748b;
+}
+
+.agent-context-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-context-card__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-context-card__list > li {
+  display: block;
+  list-style: none;
+}
+
+.agent-context-card__list > li::marker {
+  content: none;
+}
+
+.agent-context-card__chunk {
+  overflow: hidden;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+}
+
+.agent-context-card__chunk-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 10px 0;
+}
+
+.agent-context-card__index {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: #0f766e;
+  background: #ccfbf1;
+  border-radius: 9px;
+}
+
+.agent-context-card__chunk-copy {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-context-card__chunk-copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.agent-context-card__type {
+  flex: none;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #64748b;
+  background: #f1f5f9;
+  border-radius: 999px;
+}
+
+.agent-context-card__quote {
+  padding: 8px 10px;
+  margin: 8px 10px 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: #475569;
+  background: #fff;
+  border-left: 2px solid #0f766e;
+  border-radius: 0 10px 10px 0;
+}
+
+.agent-context-card__chunk-foot {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  padding: 0 10px 8px;
+}
+
+.agent-context-card__chunk-foot small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.agent-context-card__open {
+  flex: none;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #0f766e;
+  background: transparent;
+  border: 0;
+}
+
+.agent-insight-card {
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+}
+.agent-insight-card[data-tone='success'] { border-color: #86efac; }
+.agent-insight-card[data-tone='warning'] { border-color: #fcd34d; }
+.agent-insight-card[data-tone='danger'] { border-color: #fca5a5; }
+
+.agent-insight-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid #e2e8f0;
+}
+.agent-insight-card__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-insight-card__heading strong { font-size: 13px; font-weight: 760; line-height: 18px; }
+
+.agent-insight-card__heading small,
+.agent-insight-card__count { font-size: 11px; line-height: 16px; color: #64748b; }
+.agent-insight-card__count { flex: none; font-variant-numeric: tabular-nums; }
+.agent-insight-card__body { display: grid; gap: 8px; min-height: 132px; padding: 18px 16px 16px; }
+.agent-insight-card[data-tone='success'] .agent-insight-card__body { background: #f0fdf4; }
+.agent-insight-card[data-tone='warning'] .agent-insight-card__body { background: #fffbeb; }
+.agent-insight-card[data-tone='danger'] .agent-insight-card__body { background: #fef2f2; }
+.agent-insight-card__value { font-size: 32px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; color: #0f766e; }
+.agent-insight-card[data-tone='success'] .agent-insight-card__value { color: #16a34a; }
+.agent-insight-card[data-tone='warning'] .agent-insight-card__value { color: #d97706; }
+.agent-insight-card[data-tone='danger'] .agent-insight-card__value { color: #dc2626; }
+
+.agent-insight-card__copy,
+.agent-insight-card__empty { margin: 0; font-size: 13px; line-height: 1.5; color: #1e293b; }
+.agent-insight-card__empty { display: grid; place-items: center; min-height: 132px; color: #64748b; }
+.agent-insight-card__footer { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; border-top: 1px solid #e2e8f0; }
+.agent-insight-card__nav { display: flex; gap: 6px; }
+.agent-insight-card__nav-btn { display: grid; place-items: center; width: 32px; height: 32px; font-size: 16px; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; }
+.agent-insight-card__action { min-height: 32px; padding: 0 11px; font-size: 11px; font-weight: 750; color: #fff; background: #0f766e; border: 1px solid #0f766e; border-radius: 9px; }
+.agent-selection-actions { display: grid; gap: 0; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
+.agent-selection-actions__quote { padding: 14px 16px; margin: 0; font-size: 13px; line-height: 1.65; color: #334155; background: #f8fafc; border-left: 3px solid #0f766e; }
+.agent-selection-actions__toolbar { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 12px; }
+.agent-selection-actions__action { min-height: 32px; padding: 0 11px; font-size: 11px; font-weight: 750; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; }
+.agent-selection-actions__action:hover { color: #0f766e; border-color: #0f766e; }
 .agent-table { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 15px; }
 .agent-table > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border-bottom: 1px solid #f1f5f9; }
 .agent-table > header strong { font-size: 12px; }
@@ -484,41 +1005,53 @@
 .agent-diff-table > footer button { min-height: 34px; padding: 0 10px; font-size: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; }
 .agent-diff-table > footer button:last-child { color: #fff; background: #0f766e; border-color: #0f766e; }
 .agent-command-search { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 50px rgb(15 23 42 / 10%); }
-.agent-command-search > label { display: flex; gap: 9px; align-items: center; min-height: 50px; padding: 0 13px; border-bottom: 1px solid #e2e8f0; }
-.agent-command-search > label > span { font-size: 18px; color: #64748b; }
+.agent-command-search__field { display: flex; gap: 9px; align-items: center; min-height: 50px; padding: 0 13px; border-bottom: 1px solid #e2e8f0; }
+.agent-command-search__icon { display: grid; flex: none; place-items: center; width: 18px; height: 18px; color: #64748b; }
+.agent-command-search__icon svg { display: block; width: 16px; height: 16px; }
 .agent-command-search input { flex: 1; min-width: 0; font: inherit; color: #172033; outline: 0; background: transparent; border: 0; }
-.agent-command-search > div { display: grid; max-height: 280px; padding: 7px; overflow-y: auto; }
-.agent-command-search > div button { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 44px; padding: 6px 8px; text-align: left; background: transparent; border: 0; border-radius: 10px; }
-.agent-command-search > div button:hover { background: #f1f5f9; }
-.agent-command-search > div button > span { display: grid; }
-.agent-command-search > div strong { font-size: 11px; color: #334155; }
-.agent-command-search > div small { font-size: 9px; color: #94a3b8; }
-.agent-command-search kbd { padding: 2px 6px; font-size: 8px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
-.agent-command-search > p { padding: 22px; margin: 0; font-size: 11px; color: #94a3b8; text-align: center; }
+.agent-command-search__list { display: grid; max-height: 280px; padding: 8px; overflow-y: auto; }
+.agent-command-search__group { padding: 8px 8px 4px; font-size: 10px; font-weight: 750; color: #94a3b8; text-transform: uppercase; }
+.agent-command-search__item { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 44px; padding: 6px 8px; text-align: left; background: transparent; border: 0; border-radius: 10px; }
+.agent-command-search__item:hover { background: #f1f5f9; }
+.agent-command-search__copy { display: grid; min-width: 0; }
+.agent-command-search__copy strong { font-size: 12px; color: #334155; }
+.agent-command-search__copy small { font-size: 11px; color: #94a3b8; }
+.agent-command-search kbd { padding: 2px 6px; font-size: 10px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
+.agent-command-search__empty { padding: 22px; margin: 0; font-size: 11px; color: #94a3b8; text-align: center; }
 .agent-flowchart { overflow: hidden; background: radial-gradient(#dbe4ee 1px, transparent 1px); background-size: 14px 14px; border: 1px solid #e2e8f0; border-radius: 18px; }
-.agent-flowchart > header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 13px; background: rgb(255 255 255 / 92%); border-bottom: 1px solid #e2e8f0; }
-.agent-flowchart > header strong { font-size: 12px; }
-.agent-flowchart > header button { min-height: 32px; padding: 0 9px; font-size: 9px; color: #0f766e; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; }
-.agent-flowchart > div { display: grid; justify-items: center; padding: 24px; }
-.agent-flowchart__node { display: grid; gap: 4px; width: min(300px, 100%); padding: 12px 14px; text-align: left; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
+.agent-flowchart__header { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; background: #fff; border-bottom: 1px solid #e2e8f0; }
+.agent-flowchart__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-flowchart__heading strong { font-size: 13px; font-weight: 760; }
+.agent-flowchart__heading small { font-size: 11px; color: #64748b; }
+.agent-flowchart__add { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 9px; font-size: 11px; font-weight: 750; color: #0f766e; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; }
+.agent-flowchart__add svg { width: 13px; height: 13px; }
+.agent-flowchart__canvas { display: grid; justify-items: center; padding: 24px; }
+.agent-flowchart__node { display: grid; gap: 6px; width: min(320px, 100%); padding: 12px 14px; text-align: left; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
 .agent-flowchart__node[data-type='trigger'] { border-color: #99f6e4; }
 .agent-flowchart__node[data-type='condition'] { border-color: #fde68a; }
+.agent-flowchart__node[data-type='action'] { border-color: #ddd6fe; }
 .agent-flowchart__node[data-type='result'] { border-color: #bbf7d0; }
-.agent-flowchart__node small { font-size: 8px; font-weight: 800; color: #64748b; text-transform: uppercase; }
-.agent-flowchart__node strong { font-size: 11px; color: #172033; }
-.agent-flowchart__node > span { font-size: 9px; color: #64748b; }
-.agent-flowchart__connector { display: grid; place-items: center; width: 24px; height: 36px; font-weight: 900; color: #0f766e; background: linear-gradient(#cbd5e1,#cbd5e1) center/1px 100% no-repeat; border: 0; }
-.agent-fine-tune > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
+.agent-flowchart__node[data-status='running'] { box-shadow: 0 0 0 2px rgb(15 118 110 / 18%); }
+.agent-flowchart__node-head { display: flex; gap: 8px; align-items: center; }
+.agent-flowchart__index { display: grid; place-items: center; width: 22px; height: 22px; font-size: 10px; font-weight: 800; color: #0f766e; background: #ccfbf1; border-radius: 7px; }
+.agent-flowchart__type { padding: 1px 7px; font-size: 10px; font-weight: 750; color: #64748b; text-transform: none; background: #f1f5f9; border-radius: 999px; }
+.agent-flowchart__node strong { font-size: 13px; font-weight: 760; color: #172033; }
+.agent-flowchart__detail { font-size: 11px; line-height: 16px; color: #64748b; }
+.agent-flowchart__connector { display: grid; place-items: center; width: 24px; height: 36px; color: #0f766e; background: linear-gradient(#cbd5e1,#cbd5e1) center/1px 100% no-repeat; border: 0; }
+.agent-fine-tune { overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
+.agent-fine-tune__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
 .agent-fine-tune__field { display: grid; gap: 6px; min-width: 0; padding: 0; margin: 0; border: 0; }
-.agent-fine-tune__label { padding: 0; font-size: 10px; font-weight: 650; color: var(--varo-agent-muted, #64748b); }
-.agent-fine-tune__field > input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 10px; font: inherit; color: var(--varo-agent-text, #172033); background: var(--varo-agent-surface, #fff); border: 1px solid var(--varo-agent-border, #e2e8f0); border-radius: 10px; }
+.agent-fine-tune__label { padding: 0; font-size: 11px; font-weight: 650; color: #64748b; }
+.agent-fine-tune__field > input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 10px; font: inherit; color: #172033; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
 .agent-fine-tune__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
-.agent-fine-tune__choice { position: relative; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 11px; color: var(--varo-agent-text, #475569); cursor: pointer; background: var(--varo-agent-surface-strong, #f8fafc); border: 1px solid var(--varo-agent-border, #e2e8f0); border-radius: 10px; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
-.agent-fine-tune__choice[data-selected='true'] { color: var(--varo-agent-primary, #0f766e); background: var(--varo-agent-primary-soft, #f0fdfa); border-color: var(--varo-agent-primary, #0f766e); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--varo-agent-primary, #0f766e) 18%, transparent); }
+.agent-fine-tune__choice { position: relative; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 11px; color: #475569; cursor: pointer; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
+.agent-fine-tune__choice[data-selected='true'] { color: #0f766e; background: #f0fdfa; border-color: #0f766e; box-shadow: inset 0 0 0 1px rgb(15 118 110 / 18%); }
 .agent-fine-tune__choice input { position: absolute; inset: 0; z-index: 1; margin: 0; cursor: pointer; opacity: 0; }
-.agent-fine-tune__choice:focus-within { outline: 2px solid var(--varo-agent-primary, #0f766e); outline-offset: 2px; }
+.agent-fine-tune__choice:focus-within { outline: 2px solid #0f766e; outline-offset: 2px; }
 .agent-fine-tune__choice-check { min-width: 12px; font-size: 12px; font-weight: 850; text-align: center; }
-.agent-fine-tune__empty { display: grid; place-items: center; min-height: 40px; font-size: 11px; color: var(--varo-agent-muted, #64748b); background: var(--varo-agent-surface-strong, #f8fafc); border: 1px dashed var(--varo-agent-border, #e2e8f0); border-radius: 10px; }
+.agent-fine-tune__empty { display: grid; place-items: center; min-height: 40px; font-size: 11px; color: #64748b; background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 10px; }
+.agent-fine-tune__footer { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid #e2e8f0; }
+.agent-fine-tune__apply { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: #fff; background: #0f766e; border: 1px solid #0f766e; border-radius: 10px; }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-advanced__status i,
@@ -546,4 +1079,4 @@
   }
 }
 
-@media (max-width: 600px) { .agent-sidebar { width: 100%; } .agent-sidebar[data-collapsed='true'] { width: 64px; } .agent-fine-tune > div { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 600px) { .agent-sidebar { width: 100%; } .agent-sidebar[data-collapsed='true'] { width: 64px; } .agent-fine-tune__grid { grid-template-columns: minmax(0, 1fr); } }
diff --git a/apps/playground-h5/src/components/agent-ui/agent-ui.css b/apps/playground-h5/src/components/agent-ui/agent-ui.css
index f3958133..97a20b58 100644
--- a/apps/playground-h5/src/components/agent-ui/agent-ui.css
+++ b/apps/playground-h5/src/components/agent-ui/agent-ui.css
@@ -405,7 +405,624 @@
 @media (prefers-reduced-motion: reduce) {
   .agent-ui__loading i,
   .agent-ui__pulse,
-  .agent-ui__cursor {
+  .agent-ui__cursor,
+  .agent-task-list__item[data-status='running'] .agent-task-list__marker i,
+  .agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
     animation: none;
   }
 }
+
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__heading small,
+.agent-task-list__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-task-list__item {
+  position: relative;
+  display: block;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  list-style: none;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__item::marker {
+  content: none;
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.agent-task-list__item[data-status='waiting'] .agent-task-list__copy strong,
+.agent-task-list__item[data-status='idle'] .agent-task-list__copy strong {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip,
+.agent-task-list__meta > small {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-weight: 750;
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-task-list__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__track {
+  display: block;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__track i {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__track i {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+.agent-composer-scope,
+.agent-retrieval,
+.agent-source-receipt,
+.agent-thread-versions,
+.agent-task-runner__controls {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__heading small,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta,
+.agent-task-runner__cancel span {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row[data-status='reading'],
+.agent-workspace-card__row[data-status='connecting'],
+.agent-workspace-card__row[data-enabled='true'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__copy strong,
+.agent-workspace-card__row-main strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='skipped'] .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+  margin: 0;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action:hover {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--primary:hover {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__action--danger:hover {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.agent-composer-scope__meter {
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-composer-scope__meter strong {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  display: block;
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.agent-thread-versions__card {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-thread-versions__card[data-active='true'] {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__body {
+  max-height: 288px;
+  padding: 14px 16px;
+  margin: 0;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+  background: #0f172a;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: contain;
+  background: #0b1220;
+}
diff --git a/apps/playground-h5/src/components/agent-ui/index.ts b/apps/playground-h5/src/components/agent-ui/index.ts
index 59e6df17..31fcbb24 100644
--- a/apps/playground-h5/src/components/agent-ui/index.ts
+++ b/apps/playground-h5/src/components/agent-ui/index.ts
@@ -102,6 +102,30 @@ function partMark(status: AgentPartStatus) {
   return 'bg-[var(--varo-agent-border-strong)]'
 }
 
+function taskStatusLabel(status: AgentPartStatus) {
+  if (status === 'completed') { return '已完成' }
+  if (status === 'failed') { return '失败' }
+  if (status === 'running') { return '进行中' }
+  if (status === 'waiting') { return '等待中' }
+  return '待开始'
+}
+
+function renderCloseMiniIcon() {
+  return h('svg', {
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 2.2,
+    'viewBox': '0 0 24 24',
+    'width': 12,
+    'height': 12,
+    'aria-hidden': 'true',
+  }, [
+    h('path', { d: 'M6 6l12 12M18 6 6 18' }),
+  ])
+}
+
 function renderCheckIcon() {
   return h('svg', {
     'fill': 'none',
@@ -292,37 +316,101 @@ export const AgentTaskList = defineComponent({
   },
   setup(props) {
     const completed = computed(() => props.tasks.filter(task => task.status === 'completed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[12px] tabular-nums text-[var(--varo-agent-muted)]' }, `${completed.value}/${props.tasks.length}`),
-      ]),
-      ...props.tasks.map((task, index) => h('div', { class: 'flex min-h-[50px] items-center gap-2.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2 last:border-0', key: task.id }, [
-        h('span', { class: ['grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold', task.status === 'completed' ? 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' : 'border-[var(--varo-agent-border)] text-[var(--varo-agent-text)]'] }, task.status === 'completed' ? renderCheckIcon() : String(index + 1)),
-        h('span', { class: 'grid min-w-0 flex-1 gap-1' }, [
-          h('span', { class: 'flex justify-between gap-2 text-xs font-semibold text-[var(--varo-agent-foreground)]' }, [task.title, task.meta ? h('small', { class: 'text-[var(--varo-agent-muted)]' }, task.meta) : null]),
-          task.progress === undefined ? null : h('span', { class: 'h-1 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]' }, [h('i', { class: 'block h-full bg-[var(--varo-agent-primary)]', style: { width: `${Math.min(100, Math.max(0, task.progress))}%` } })]),
+    const current = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+    return () => h('section', { 'class': 'agent-task-list', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-task-list__header' }, [
+        h('span', { class: 'agent-task-list__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.tasks.length && props.tasks.length ? '全部完成' : '等待开始'),
         ]),
-      ])),
+        h('span', { class: 'agent-task-list__count' }, `${completed.value}/${props.tasks.length}`),
+      ]),
+      h('ol', { class: 'agent-task-list__body' }, props.tasks.map((task, index) => {
+        const progress = task.progress === undefined ? undefined : Math.min(100, Math.max(0, task.progress))
+        return h('li', {
+          'class': 'agent-task-list__item',
+          'data-status': task.status,
+          'aria-current': task.status === 'running' ? 'step' : undefined,
+          'key': task.id,
+        }, [
+          h('span', { 'class': 'agent-task-list__marker', 'aria-hidden': 'true' }, [
+            task.status === 'completed'
+              ? renderCheckIcon()
+              : task.status === 'failed'
+                ? renderCloseMiniIcon()
+                : task.status === 'running'
+                  ? h('i')
+                  : String(index + 1),
+          ]),
+          h('span', { class: 'agent-task-list__copy' }, [
+            h('span', { class: 'agent-task-list__row' }, [
+              h('strong', task.title),
+              h('span', { class: 'agent-task-list__meta' }, [
+                h('small', { class: 'agent-task-list__chip' }, taskStatusLabel(task.status)),
+                task.meta ? h('small', task.meta) : null,
+              ]),
+            ]),
+            task.description ? h('p', task.description) : null,
+            progress === undefined
+              ? null
+              : h('span', { 'class': 'agent-task-list__track', 'aria-hidden': 'true' }, [
+                  h('i', { style: { width: `${progress}%` } }),
+                ]),
+          ]),
+        ])
+      })),
     ])
   },
 })
 
-const workspaceActionButton = 'relative m-0 inline-flex min-h-9 min-w-12 items-center justify-center rounded-lg px-2.5 text-[11px] font-bold transition-colors before:absolute before:-inset-1 before:content-[\'\'] motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-45'
-const workspacePrimaryTextButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-primary)] hover:bg-[var(--varo-agent-primary-soft)]`
-const workspaceQuietButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-foreground)] hover:bg-[var(--varo-agent-fill)]`
-const workspaceDangerTextButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-danger)] hover:bg-[var(--varo-agent-danger-soft)]`
+function renderWorkspaceIcon(kind: 'plug' | 'receipt' | 'branch') {
+  const common = {
+    'aria-hidden': 'true' as const,
+    'fill': 'none',
+    'height': 14,
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+    'width': 14,
+  }
+  if (kind === 'receipt') {
+    return h('svg', common, [
+      h('path', { d: 'M7 3h8l4 4v14H7V3Z' }),
+      h('path', { d: 'M15 3v4h4M9 12h6M9 16h4' }),
+    ])
+  }
+  if (kind === 'branch') {
+    return h('svg', common, [
+      h('circle', { cx: '6', cy: '6', r: '2.2' }),
+      h('circle', { cx: '18', cy: '12', r: '2.2' }),
+      h('circle', { cx: '6', cy: '18', r: '2.2' }),
+      h('path', { d: 'M8.1 7.6v8.8M8.2 12H16' }),
+    ])
+  }
+  return h('svg', common, [
+    h('path', { d: 'M9 7V3M15 7V3' }),
+    h('path', { d: 'M8 7h8v4a4 4 0 0 1-4 4h0a4 4 0 0 1-4-4V7Z' }),
+    h('path', { d: 'M12 15v6' }),
+  ])
+}
+
+function workspaceActionClass(kind: 'quiet' | 'primary' | 'danger' = 'quiet') {
+  return cn(
+    'agent-workspace-card__action',
+    kind === 'primary' && 'agent-workspace-card__action--primary',
+    kind === 'danger' && 'agent-workspace-card__action--danger',
+  )
+}
 
 const contextSourceStatusLabels = {
   available: '可用',
   connecting: '连接中',
   unavailable: '不可用',
 } as const
-const contextSourceStatusClasses = {
-  available: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  connecting: 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]',
-  unavailable: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-} as const
 const retrievalStatusLabels = {
   failed: '读取失败',
   queued: '排队中',
@@ -330,23 +418,11 @@ const retrievalStatusLabels = {
   reading: '读取中',
   skipped: '已跳过',
 } as const
-const retrievalStatusClasses = {
-  failed: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-  queued: 'bg-[var(--varo-agent-fill)] text-[var(--varo-agent-muted)]',
-  read: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  reading: 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]',
-  skipped: 'bg-[var(--varo-agent-warning-soft)] text-[var(--varo-agent-warning)]',
-} as const
 const receiptStatusLabels = {
   failed: '读取失败',
   read: '已读取',
   skipped: '已跳过',
 } as const
-const receiptStatusClasses = {
-  failed: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-  read: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  skipped: 'bg-[var(--varo-agent-warning-soft)] text-[var(--varo-agent-warning)]',
-} as const
 
 function renderCloseIcon() {
   return h('svg', {
@@ -381,30 +457,38 @@ export const AgentComposerScope = defineComponent({
       return Math.min(100, Math.max(0, value))
     })
     const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${enabledCount.value} 个已启用`),
+    const headingHint = computed(() => {
+      if (!props.sources.length) { return '暂无可用来源' }
+      if (enabledCount.value === 0) { return '尚未授权任何来源' }
+      return `${enabledCount.value} 个来源已加入上下文`
+    })
+    return () => h('section', { 'class': 'agent-composer-scope', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${enabledCount.value}/${props.sources.length}`),
       ]),
       props.sources.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.sources.map((source) => {
+        ? h('div', { class: 'agent-workspace-card__body' }, props.sources.map((source) => {
             const status = source.status ?? 'available'
-            return h('div', { 'class': 'flex min-h-[58px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', 'data-status': status, 'key': source.id }, [
-              h('i', { 'class': ['h-3 w-3 flex-none rounded-full', contextSourceStatusClasses[status]], 'aria-hidden': 'true' }),
-              h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-                h('span', { class: 'flex min-w-0 items-center gap-2' }, [
-                  h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, source.label),
-                  h('small', { class: 'flex-none text-[10px] font-semibold text-[var(--varo-agent-muted)]' }, contextSourceStatusLabels[status]),
+            return h('article', { 'class': 'agent-workspace-card__row', 'data-status': status, 'data-enabled': String(source.enabled), 'key': source.id }, [
+              h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('plug')),
+              h('span', { class: 'agent-workspace-card__copy' }, [
+                h('span', { class: 'agent-workspace-card__row-main' }, [
+                  h('strong', source.label),
+                  h('small', { class: 'agent-workspace-card__chip' }, contextSourceStatusLabels[status]),
                 ]),
                 source.description || source.meta
-                  ? h('small', { class: 'truncate text-[11px] text-[var(--varo-agent-muted)]' }, source.description || source.meta)
+                  ? h('small', { class: 'agent-workspace-card__detail' }, source.description || source.meta)
                   : null,
               ]),
               status === 'available'
                 ? h('button', {
                     'aria-label': `${source.enabled ? '停用' : '启用'}${source.label}`,
                     'aria-pressed': source.enabled,
-                    'class': workspaceQuietButton,
+                    'class': workspaceActionClass(source.enabled ? 'quiet' : 'primary'),
                     'disabled': props.disabled,
                     'type': 'button',
                     'onClick': () => emit('toggle', source, !source.enabled),
@@ -412,29 +496,29 @@ export const AgentComposerScope = defineComponent({
                 : status === 'unavailable'
                   ? h('button', {
                       'aria-label': `连接${source.label}`,
-                      'class': workspacePrimaryTextButton,
+                      'class': workspaceActionClass('primary'),
                       'disabled': props.disabled,
                       'type': 'button',
                       'onClick': () => emit('connect', source),
                     }, '连接')
-                  : null,
+                  : h('small', { class: 'agent-workspace-card__chip' }, '连接中'),
             ])
           }))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无来源'),
-      h('footer', { class: 'grid gap-2 border-t border-[var(--varo-agent-border)] px-3.5 py-3' }, [
-        h('span', { class: 'flex items-center justify-between gap-3' }, [
-          h('span', { class: 'text-[11px] font-semibold text-[var(--varo-agent-text)]' }, '上下文使用'),
-          h('strong', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-primary)]' }, `${usage.value}%`),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源'),
+      h('footer', { class: 'agent-composer-scope__meter' }, [
+        h('span', { class: 'agent-workspace-card__row-main' }, [
+          h('span', '上下文使用'),
+          h('strong', `${usage.value}%`),
         ]),
         h('span', {
-          'class': 'block h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]',
+          'class': 'agent-composer-scope__track',
           'role': 'progressbar',
           'aria-label': '上下文使用量',
           'aria-valuemax': 100,
           'aria-valuemin': 0,
           'aria-valuenow': usage.value,
         }, [
-          h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${usage.value}%` } }),
+          h('i', { style: { width: `${usage.value}%` } }),
         ]),
       ]),
     ])
@@ -452,31 +536,41 @@ export const AgentRetrievalProgress = defineComponent({
   },
   setup(props, { emit }) {
     const settled = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${settled.value}/${props.items.length} 已处理`),
+    const current = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+    const headingHint = computed(() => {
+      if (current.value?.status === 'failed') { return `阻塞于 ${current.value.title}` }
+      if (current.value) { return `正在读取 ${current.value.title}` }
+      if (props.items.length && settled.value === props.items.length) { return '检索已完成' }
+      return '等待检索'
+    })
+    return () => h('section', { 'class': 'agent-retrieval', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${settled.value}/${props.items.length}`),
       ]),
       props.items.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.items.map(item => h('div', { 'class': 'flex min-h-[56px] items-center gap-2.5 rounded-xl px-2.5 py-2', 'data-status': item.status, 'key': item.id }, [
-            h('i', { 'class': ['h-3 w-3 flex-none rounded-full', retrievalStatusClasses[item.status]], 'aria-hidden': 'true' }),
-            h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-              h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, item.title),
-              item.detail ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, item.detail) : null,
-            ]),
-            h('span', { class: 'flex flex-none items-center gap-2' }, [
-              h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, retrievalStatusLabels[item.status]),
-              item.status === 'failed' && item.retryable
-                ? h('button', {
-                    'aria-label': `重试${item.title}`,
-                    'class': workspaceQuietButton,
-                    'type': 'button',
-                    'onClick': () => emit('retry', item),
-                  }, '重试')
-                : null,
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map((item, index) => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, item.status === 'reading' ? h('i') : String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.title),
+                h('small', { class: 'agent-workspace-card__chip' }, retrievalStatusLabels[item.status]),
+              ]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
             ]),
+            item.status === 'failed' && item.retryable
+              ? h('button', {
+                  'aria-label': `重试${item.title}`,
+                  'class': workspaceActionClass('primary'),
+                  'type': 'button',
+                  'onClick': () => emit('retry', item),
+                }, '重试')
+              : null,
           ])))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无检索项'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无检索项'),
     ])
   },
 })
@@ -494,44 +588,49 @@ export const AgentSourceReceipt = defineComponent({
   },
   setup(props, { emit }) {
     const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'grid min-h-12 gap-0.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2.5' }, [
-        h('span', { class: 'flex items-center justify-between gap-3' }, [
-          h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-          h('small', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${readCount.value}/${props.items.length} 已读取`),
+    const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+    const headingHint = computed(() => {
+      if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+      if (props.summary) { return props.summary }
+      if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+      return '回答完成后核对来源'
+    })
+    return () => h('section', { 'class': 'agent-source-receipt', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
         ]),
-        props.summary ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, props.summary) : null,
+        h('span', { class: 'agent-workspace-card__count' }, `${readCount.value}/${props.items.length}`),
       ]),
       props.items.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.items.map(item => h('div', { 'class': 'flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', 'data-status': item.status, 'key': item.id }, [
-            h('i', { 'class': ['h-3 w-3 flex-none rounded-full', receiptStatusClasses[item.status]], 'aria-hidden': 'true' }),
-            h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-              h('span', { class: 'flex min-w-0 items-baseline gap-2' }, [
-                h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, item.label),
-                item.itemCount === undefined
-                  ? null
-                  : h('small', { class: 'flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]' }, `${item.itemCount} 项`),
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map(item => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('receipt')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.label),
+                item.itemCount === undefined ? null : h('small', { class: 'agent-workspace-card__meta' }, `${item.itemCount} 项`),
               ]),
-              item.detail ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, item.detail) : null,
-              h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, receiptStatusLabels[item.status]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
+              h('small', { class: 'agent-workspace-card__chip' }, receiptStatusLabels[item.status]),
             ]),
             item.status === 'read'
               ? h('button', {
                   'aria-label': `查看${item.label}`,
-                  'class': workspaceQuietButton,
+                  'class': workspaceActionClass(),
                   'type': 'button',
                   'onClick': () => emit('open', item),
                 }, '查看')
               : item.status === 'failed'
                 ? h('button', {
                     'aria-label': `连接${item.label}`,
-                    'class': workspacePrimaryTextButton,
+                    'class': workspaceActionClass('primary'),
                     'type': 'button',
                     'onClick': () => emit('connect', item),
                   }, '连接')
                 : null,
           ])))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无来源回执'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源回执'),
     ])
   },
 })
@@ -557,38 +656,38 @@ export const AgentTaskRunner = defineComponent({
       )
     })
     const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
-    return () => h('section', { class: 'grid gap-2.5' }, [
+    return () => h('section', { class: 'agent-task-runner' }, [
       h(AgentTaskList, { tasks: props.tasks, title: props.title }),
       actionableTasks.value.length || canCancel.value
-        ? h('div', { class: 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]' }, [
+        ? h('div', { class: 'agent-task-runner__controls' }, [
             actionableTasks.value.length
-              ? h('div', { class: 'grid gap-1 p-2' }, actionableTasks.value.map(task => h('div', { class: 'flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', key: task.id }, [
-                  h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-                    h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, task.title),
-                    task.description ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, task.description) : null,
-                    h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, task.status === 'failed' ? '执行失败' : '等待确认'),
+              ? h('div', { class: 'agent-workspace-card__body' }, actionableTasks.value.map(task => h('article', { 'class': 'agent-workspace-card__row', 'data-status': task.status, 'key': task.id }, [
+                  h('span', { class: 'agent-workspace-card__copy' }, [
+                    h('strong', task.title),
+                    task.description ? h('small', { class: 'agent-workspace-card__detail' }, task.description) : null,
+                    h('small', { class: 'agent-workspace-card__chip' }, task.status === 'failed' ? '执行失败' : '等待确认'),
                   ]),
                   task.status === 'failed'
                     ? h('button', {
                         'aria-label': `重试${task.title}`,
-                        'class': workspaceQuietButton,
+                        'class': workspaceActionClass('primary'),
                         'type': 'button',
                         'onClick': () => emit('retry', task),
                       }, '重试')
                     : h('button', {
                         'aria-label': `批准${task.title}`,
-                        'class': workspacePrimaryTextButton,
+                        'class': workspaceActionClass('primary'),
                         'type': 'button',
                         'onClick': () => emit('approve', task),
                       }, '批准'),
                 ])))
               : null,
             canCancel.value
-              ? h('div', { class: 'flex min-h-[60px] items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-3.5 py-2' }, [
-                  h('span', { class: 'text-[11px] text-[var(--varo-agent-muted)]' }, '任务正在执行'),
+              ? h('div', { class: 'agent-task-runner__cancel' }, [
+                  h('span', '任务正在执行'),
                   h('button', {
                     'aria-label': '取消当前任务',
-                    'class': workspaceDangerTextButton,
+                    'class': workspaceActionClass('danger'),
                     'type': 'button',
                     'onClick': () => emit('cancel'),
                   }, '取消'),
@@ -625,52 +724,49 @@ export const AgentThreadVersions = defineComponent({
         version,
       }))
     })
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${props.versions.length} 个版本`),
+    const active = computed(() => displayVersions.value.find(entry => entry.active))
+    return () => h('section', { 'class': 'agent-thread-versions', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value ? `当前 ${active.value.label}` : '选择一个会话版本'),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${props.versions.length} 个版本`),
       ]),
       displayVersions.value.length
-        ? h('div', { 'class': 'flex max-w-full gap-2 overflow-x-auto p-2.5', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
+        ? h('div', { 'class': 'agent-thread-versions__list', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
             h('article', {
-              'class': [
-                'grid w-[252px] flex-none gap-2 rounded-xl border bg-[var(--varo-agent-surface-strong)] p-3',
-                entry.active
-                  ? 'border-[var(--varo-agent-primary)] shadow-[0_0_0_2px_var(--varo-agent-primary-soft)]'
-                  : 'border-[var(--varo-agent-border)]',
-              ],
+              'class': 'agent-thread-versions__card',
               'data-active': String(entry.active),
               'key': entry.version.id,
               'role': 'listitem',
             }, [
-              h('span', { class: 'flex min-w-0 items-center justify-between gap-2' }, [
-                h('span', { class: 'flex min-w-0 items-center gap-2' }, [
-                  h('i', { 'class': ['h-2 w-2 flex-none rounded-full', entry.active ? 'bg-[var(--varo-agent-primary)]' : 'bg-[var(--varo-agent-border-strong)]'], 'aria-hidden': 'true' }),
-                  h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, entry.label),
-                ]),
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('branch')),
+                h('strong', entry.label),
                 entry.active
-                  ? h('small', { class: 'flex-none text-[10px] font-bold text-[var(--varo-agent-primary)]' }, '当前')
+                  ? h('small', { class: 'agent-workspace-card__chip' }, '当前')
                   : entry.version.pinned
-                    ? h('small', { class: 'flex-none text-[10px] font-bold text-[var(--varo-agent-text)]' }, '已固定')
+                    ? h('small', { class: 'agent-workspace-card__chip' }, '已固定')
                     : null,
               ]),
-              h('p', { class: 'm-0 min-h-8 text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, entry.version.summary || '暂无版本摘要'),
-              h('span', { class: 'grid gap-0.5 text-[10px] text-[var(--varo-agent-muted)]' }, [
-                h('small', { class: 'truncate' }, `来源：${entry.parentLabel}`),
-                entry.version.createdAt ? h('time', { class: 'truncate' }, `创建：${entry.version.createdAt}`) : null,
+              h('p', { class: 'agent-workspace-card__detail' }, entry.version.summary || '暂无版本摘要'),
+              h('span', { class: 'agent-thread-versions__meta' }, [
+                h('small', `来源：${entry.parentLabel}`),
+                entry.version.createdAt ? h('time', `创建：${entry.version.createdAt}`) : null,
               ]),
-              h('footer', { class: 'flex flex-wrap gap-2 border-t border-[var(--varo-agent-border)] pt-2' }, [
+              h('footer', { class: 'agent-thread-versions__actions' }, [
                 entry.active
                   ? null
                   : h('button', {
                       'aria-label': `选择${entry.label}`,
-                      'class': workspacePrimaryTextButton,
+                      'class': workspaceActionClass('primary'),
                       'type': 'button',
                       'onClick': () => emit('select', entry.version),
                     }, '选择'),
                 h('button', {
                   'aria-label': `从${entry.label}创建分支`,
-                  'class': workspaceQuietButton,
+                  'class': workspaceActionClass(),
                   'type': 'button',
                   'onClick': () => emit('branch', entry.version),
                 }, '分支'),
@@ -678,14 +774,14 @@ export const AgentThreadVersions = defineComponent({
                   ? null
                   : h('button', {
                       'aria-label': `固定${entry.label}`,
-                      'class': workspaceQuietButton,
+                      'class': workspaceActionClass(),
                       'type': 'button',
                       'onClick': () => emit('pin', entry.version),
                     }, '固定'),
               ]),
             ]),
           ))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无会话版本'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无会话版本'),
     ])
   },
 })
@@ -949,11 +1045,19 @@ export const AgentRecommendation = defineComponent({
   emits: { accept: () => true },
   setup(props, { emit, slots }) {
     const confidence = computed(() => Math.min(100, Math.max(0, props.confidence)))
+    const confidenceLabel = computed(() => (
+      confidence.value >= 80 ? '高置信度' : confidence.value >= 55 ? '中等置信度' : '需要复核'
+    ))
     return () => h('section', { class: 'agent-recommendation grid gap-3 rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] p-4 shadow-[var(--varo-agent-shadow)]' }, [
-      h('header', { class: 'flex justify-between text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [h('span', 'AGENT 建议'), h('span', `${confidence.value}%`)]),
+      h('header', { class: 'flex justify-between gap-3 text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [
+        h('span', 'AGENT 建议'),
+        h('span', { class: 'tabular-nums' }, `${confidenceLabel.value} · ${confidence.value}%`),
+      ]),
       h('strong', { class: 'text-[15px] text-[var(--varo-agent-foreground)]' }, props.title),
       props.description ? h('p', { class: 'm-0 text-xs leading-5 text-[var(--varo-agent-text)]' }, props.description) : null,
-      h('span', { class: 'h-1.5 overflow-hidden rounded-full bg-blue-100' }, [h('i', { class: 'block h-full rounded-full bg-blue-600', style: { width: `${confidence.value}%` } })]),
+      h('span', { 'class': 'h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-primary-soft)]', 'aria-hidden': 'true' }, [
+        h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${confidence.value}%` } }),
+      ]),
       slots.default?.(),
       h('footer', { class: 'flex justify-end gap-2' }, [slots.secondary?.(), h('button', { class: primaryButton, type: 'button', onClick: () => emit('accept') }, props.acceptText)]),
     ])
@@ -1105,32 +1209,31 @@ export const AgentArtifact = defineComponent({
   props: { artifact: { type: Object as PropType<AgentArtifactItem>, required: true } },
   emits: { open: (_artifact: AgentArtifactItem) => true },
   setup(props, { emit }) {
+    const kindLabel = computed(() => {
+      if (props.artifact.kind === 'code') { return '代码产物' }
+      if (props.artifact.kind === 'image') { return '图像产物' }
+      if (props.artifact.kind === 'file') { return '文件产物' }
+      return '文档产物'
+    })
     return () =>
-      h('article', { class: 'overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 shadow-lg' }, [
-        h('header', { class: 'flex min-h-14 items-center justify-between gap-3 border-b border-slate-800 bg-slate-900 px-4' }, [
-          h('span', { class: 'grid min-w-0 gap-0.5' }, [
-            h('small', { class: 'text-[10px] font-black uppercase tracking-[0.16em] text-teal-300' }, props.artifact.kind || 'artifact'),
-            h('strong', { class: 'truncate text-xs text-slate-100' }, props.artifact.title),
+      h('article', { 'class': 'agent-artifact', 'data-kind': props.artifact.kind || 'document' }, [
+        h('header', { class: 'agent-artifact__header' }, [
+          h('span', { class: 'agent-artifact__heading' }, [
+            h('small', { class: 'agent-artifact__kind' }, kindLabel.value),
+            h('strong', { class: 'agent-artifact__title' }, props.artifact.title),
+            props.artifact.language ? h('span', { class: 'agent-artifact__lang' }, props.artifact.language) : null,
           ]),
-          h(
-            'button',
-            {
-              class: 'min-h-8 flex-none rounded-lg border border-slate-700 bg-slate-800 px-3 text-[11px] font-bold text-slate-200 transition-colors hover:border-teal-500 hover:text-white',
-              type: 'button',
-              onClick: () => emit('open', props.artifact),
-            },
-            '打开',
-          ),
+          h('button', {
+            class: 'agent-artifact__open',
+            type: 'button',
+            onClick: () => emit('open', props.artifact),
+          }, '打开'),
         ]),
         props.artifact.content
-          ? h(
-              'pre',
-              { class: 'm-0 max-h-72 overflow-auto whitespace-pre-wrap break-words bg-slate-950 px-4 py-3.5 font-mono text-[12px] leading-5 text-slate-200' },
-              props.artifact.content,
-            )
+          ? h('pre', { class: 'agent-artifact__body' }, props.artifact.content)
           : null,
         props.artifact.previewUrl
-          ? h('img', { alt: props.artifact.title, class: 'block max-h-80 w-full bg-slate-950 object-contain', src: props.artifact.previewUrl })
+          ? h('img', { alt: props.artifact.title, class: 'agent-artifact__preview', src: props.artifact.previewUrl })
           : null,
       ])
   },
diff --git a/apps/playground-weapp-preview/index.html b/apps/playground-weapp-preview/index.html
new file mode 100644
index 00000000..5c4509a7
--- /dev/null
+++ b/apps/playground-weapp-preview/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="运行 Wevu 原生构建产物的 Web 兼容预览；这不是微信客户端模拟器。" />
+    <title>Varo 小程序 Web 兼容预览</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <noscript>此预览需要启用 JavaScript 才能运行。</noscript>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/playground-weapp-preview/package.json b/apps/playground-weapp-preview/package.json
new file mode 100644
index 00000000..7c3fe10f
--- /dev/null
+++ b/apps/playground-weapp-preview/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@varo/playground-weapp-preview",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "prepare:artifacts": "pnpm exec turbo run build --filter=@varo/playground-weapp",
+    "dev": "pnpm run prepare:artifacts && vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "smoke:browser": "node scripts/smoke-preview.mjs",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@varo-ui/h5": "workspace:*",
+    "@varo/weapp-web": "workspace:*",
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1",
+    "@varo/playground-weapp": "workspace:*",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2",
+    "vue-tsc": "^3.3.11"
+  }
+}
diff --git a/apps/playground-weapp-preview/runtime.html b/apps/playground-weapp-preview/runtime.html
new file mode 100644
index 00000000..f998b828
--- /dev/null
+++ b/apps/playground-weapp-preview/runtime.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Varo 小程序 Web 兼容预览</title>
+  </head>
+  <body>
+    <div id="runtime-status" role="status">正在加载小程序编译产物…</div>
+    <div id="runtime-root"></div>
+    <script type="module" src="/src/runtime/entry.ts"></script>
+  </body>
+</html>
diff --git a/apps/playground-weapp-preview/scripts/smoke-preview.mjs b/apps/playground-weapp-preview/scripts/smoke-preview.mjs
new file mode 100644
index 00000000..0e5d984a
--- /dev/null
+++ b/apps/playground-weapp-preview/scripts/smoke-preview.mjs
@@ -0,0 +1,179 @@
+import assert from 'node:assert/strict'
+import { mkdtemp } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { chromium, expect } from '@playwright/test'
+
+const baseUrl = process.env.PREVIEW_URL ?? 'http://127.0.0.1:4182/'
+const artifacts = await mkdtemp(join(tmpdir(), 'varo-preview-smoke-'))
+const browser = await chromium.launch({ channel: 'chrome', headless: true })
+const errors = []
+const checks = []
+const field = (root, name) => root.locator(`[data-preview-field="${name}"]`)
+async function selectRadio(page, name) {
+  const radio = page.getByRole('radio', { name })
+  await page.locator('label').filter({ has: radio }).click()
+  await expect(radio).toBeChecked()
+}
+
+try {
+  const context = await browser.newContext({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 })
+  const page = await context.newPage()
+  page.on('pageerror', error => errors.push(error.message))
+  await page.goto(baseUrl)
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  let runtime = page.frameLocator('iframe')
+
+  const testButton = runtime.getByRole('button', { name: /^测试按钮：/ })
+  await testButton.click()
+  await expect(field(runtime, 'button-state')).toHaveAttribute('data-preview-value', 'state=enabled;clicks=1;events=1')
+  await testButton.focus()
+  await page.keyboard.press('Enter')
+  await expect(field(runtime, 'button-state')).toHaveAttribute('data-preview-value', 'state=enabled;clicks=2;events=2')
+  await runtime.getByRole('button', { name: '禁用测试按钮', exact: true }).click()
+  await expect(testButton).toBeDisabled()
+  const disabledPoint = await page.evaluate(() => {
+    const frame = document.querySelector('iframe')
+    const button = [...frame.contentDocument.querySelectorAll('wx-button > button')].find(node => node.textContent.includes('测试按钮：'))
+    const child = button.getBoundingClientRect()
+    const bounds = frame.getBoundingClientRect()
+    const scale = bounds.width / frame.contentWindow.innerWidth
+    return { x: bounds.left + (child.left + child.width / 2) * scale, y: bounds.top + (child.top + child.height / 2) * scale }
+  })
+  await page.mouse.click(disabledPoint.x, disabledPoint.y)
+  await expect(field(runtime, 'button-state')).toHaveAttribute('data-preview-value', 'state=disabled;clicks=2;events=2')
+  await expect(field(runtime, 'disabled-button-event-count')).toHaveText(/：0$/)
+  await runtime.getByRole('button', { name: '启用测试按钮', exact: true }).click()
+  checks.push('button pointer, keyboard, disabled state and single emitted events')
+
+  const input = runtime.getByRole('textbox', { name: 'Web 预览受控输入' })
+  await input.fill('Preview')
+  await input.pressSequentially('123')
+  await expect(input).toHaveValue('Preview123')
+  await expect(field(runtime, 'input-value')).toHaveText('受控值：Preview123')
+  await expect(field(runtime, 'input-state')).toContainText('focus / blur 事件：1 / 0')
+  await runtime.getByRole('button', { name: '外部重置值', exact: true }).click()
+  await expect(input).toHaveValue('外部重置值 #1')
+  await expect(field(runtime, 'input-state')).toContainText('focus / blur 事件：1 / 1')
+  await runtime.getByRole('button', { name: '请求聚焦', exact: true }).click()
+  await expect(input).toBeFocused()
+  await runtime.getByRole('button', { name: '移除焦点', exact: true }).click()
+  await expect(input).not.toBeFocused()
+  await expect(field(runtime, 'input-state')).toContainText('focus / blur 事件：2 / 2')
+  checks.push('controlled typing, external replacement and exact focus/blur delivery')
+
+  await expect(field(runtime, 'context-lifecycle')).toHaveAttribute('data-preview-value', 'tree=mounted;provider=1/0;consumer=1/0')
+  await runtime.getByRole('button', { name: '更新注入值', exact: true }).click()
+  await expect(field(runtime, 'injected-context')).toHaveAttribute('data-preview-value', 'revision=2;value=来自 Provider 的值 #2')
+  await runtime.getByRole('button', { name: '卸载 Provider / Consumer', exact: true }).click()
+  await expect(field(runtime, 'injected-context')).toHaveCount(0)
+  await expect(field(runtime, 'context-lifecycle')).toHaveAttribute('data-preview-value', 'tree=unmounted;provider=1/1;consumer=1/1')
+  await runtime.getByRole('button', { name: '重新挂载 Provider / Consumer', exact: true }).click()
+  await expect(field(runtime, 'context-lifecycle')).toHaveAttribute('data-preview-value', 'tree=mounted;provider=2/1;consumer=2/1')
+  await expect(field(runtime, 'injected-context')).toHaveAttribute('data-preview-value', 'revision=2;value=来自 Provider 的值 #2')
+  checks.push('slot context propagation and exact detach/remount lifetimes')
+  await page.screenshot({ path: join(artifacts, 'desktop.png'), fullPage: true })
+
+  await page.setViewportSize({ width: 320, height: 844 })
+  await selectRadio(page, /宽屏.*430 px/)
+  await expect.poll(() => page.evaluate(() => document.querySelector('iframe').contentWindow.innerWidth)).toBe(430)
+  const fit = await page.evaluate(() => {
+    const frame = document.querySelector('iframe').getBoundingClientRect()
+    const stage = document.querySelector('.preview-frame__stage').getBoundingClientRect()
+    return { width: innerWidth, scroll: document.documentElement.scrollWidth, frameLeft: frame.left, frameRight: frame.right, stageLeft: stage.left, stageRight: stage.right }
+  })
+  assert.ok(fit.scroll <= fit.width && fit.frameLeft >= fit.stageLeft - 1 && fit.frameRight <= fit.stageRight + 1)
+  await expect(field(runtime, 'button-state')).toHaveAttribute('data-preview-value', 'state=enabled;clicks=2;events=2')
+  await page.screenshot({ path: join(artifacts, 'mobile.png'), fullPage: true })
+  checks.push('narrow layout fits while device width changes preserve native state')
+
+  await page.evaluate(() => {
+    const frame = document.querySelector('iframe')
+    const query = new URL(frame.src).searchParams
+    window.postMessage({ channel: 'varo-weapp-preview', type: 'error', scenario: 'controls', session: query.get('session'), message: 'foreign-window-message' }, location.origin)
+  })
+  const currentFrame = page.frames().find(frame => frame.url().includes('runtime.html'))
+  assert.ok(currentFrame)
+  await currentFrame.evaluate(() => window.parent.postMessage({ channel: 'varo-weapp-preview', type: 'error', scenario: 'controls', session: 'stale-session', message: 'stale-message' }, location.origin))
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  await currentFrame.evaluate(() => window.dispatchEvent(new ErrorEvent('error', { message: 'preview-smoke-intentional', error: new Error('preview-smoke-intentional') })))
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'error')
+  await page.getByRole('button', { name: '重置并重试', exact: true }).click()
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  runtime = page.frameLocator('iframe')
+  await expect(field(runtime, 'button-state')).toHaveAttribute('data-preview-value', 'state=enabled;clicks=0;events=0')
+  checks.push('foreign/stale messages rejected and real runtime error boundary recovers on reset')
+
+  await page.setViewportSize({ width: 1440, height: 1000 })
+  await selectRadio(page, /^Agent 内容/)
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  runtime = page.frameLocator('iframe')
+  await runtime.getByRole('link', { name: 'Varo 预览链接', exact: true }).focus()
+  await page.keyboard.press('Enter')
+  await expect(field(runtime, 'markdown-link-output')).toContainText('https://example.com/varo-preview')
+  await expect(field(runtime, 'markdown-link-count')).toHaveText(/：1$/)
+  await runtime.getByRole('button', { name: '开始流式内容', exact: true }).click()
+  await expect(field(runtime, 'stream-phase')).toHaveText(/streaming/)
+  await runtime.getByRole('button', { name: '停止', exact: true }).click()
+  await expect(field(runtime, 'stream-phase')).toHaveText(/stopped/)
+  const stopped = await runtime.locator('.agent-stream').textContent()
+  await new Promise(resolve => setTimeout(resolve, 350))
+  assert.equal(await runtime.locator('.agent-stream').textContent(), stopped)
+  await runtime.getByRole('button', { name: '继续流式内容', exact: true }).click()
+  await expect(field(runtime, 'stream-state')).toHaveAttribute('data-preview-value', 'phase=completed;chunks=14/14;pending=0;final=true')
+  await expect(runtime.locator('.agent-stream')).toContainText('controller.finish()')
+  await runtime.getByRole('button', { name: '从头重播', exact: true }).click()
+  await expect(field(runtime, 'stream-state')).toHaveAttribute('data-preview-value', 'phase=completed;chunks=14/14;pending=0;final=true')
+  checks.push('native Markdown link, stream stop/continue/replay and final Markdown content')
+
+  const native = await context.newPage()
+  native.on('pageerror', error => errors.push(error.message))
+  await native.setViewportSize({ width: 390, height: 844 })
+  await native.goto(new URL('runtime.html?scenario=agent', baseUrl).href)
+  await expect(native.locator('#runtime-status')).toBeHidden()
+  const presentation = await native.evaluate(() => {
+    const cards = [...document.querySelectorAll('wx-view.varo-card')].map(node => ({ width: node.clientWidth, scroll: node.scrollWidth }))
+    const headers = [...document.querySelectorAll('wx-view')].filter(node => ['Surface', 'Runtime'].includes(node.textContent.trim())).map(node => ({ color: getComputedStyle(node).color, background: getComputedStyle(node).backgroundColor }))
+    return { cards, headers, width: innerWidth, scroll: document.documentElement.scrollWidth }
+  })
+  assert.ok(presentation.cards.length === 2 && presentation.cards.every(card => card.scroll <= card.width + 1))
+  assert.ok(presentation.headers.length === 2 && presentation.headers.every(header => header.color !== header.background))
+  assert.ok(presentation.scroll <= presentation.width)
+  await expect(native.getByText('Surface', { exact: true })).toBeVisible()
+  await expect(native.getByText('Wevu 原生组件树', { exact: true })).toBeVisible()
+  await native.screenshot({ path: join(artifacts, 'native-agent.png'), fullPage: true })
+  checks.push('native Markdown table contrast and contained horizontal scrolling')
+
+  await selectRadio(page, /^原生地图/)
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  runtime = page.frameLocator('iframe')
+  await expect(runtime.locator('wx-map img.varo-native-map__tile').first()).toBeVisible({ timeout: 15000 })
+  await expect(runtime.locator('wx-map img.varo-native-map__tile').first()).toHaveAttribute('src', /rt\d\.map\.gtimg\.com\/tile/)
+  await expect(field(runtime, 'map-center')).toContainText('杭州西湖')
+  await runtime.locator('wx-map').click()
+  await expect(field(runtime, 'map-region-count')).toContainText('1')
+  await runtime.getByRole('button', { name: '切换到上海' }).click()
+  await expect(field(runtime, 'map-center')).toContainText('上海外滩')
+  await page.screenshot({ path: join(artifacts, 'native-map.png'), fullPage: true })
+  checks.push('native map Tencent raster tiles, GL controls, marker center and regionchange')
+
+  await selectRadio(page, /^机器人对话/)
+  await expect(page.locator('.preview-frame')).toHaveAttribute('data-state', 'ready')
+  runtime = page.frameLocator('iframe')
+  await expect(runtime.locator('wx-wechat-robot-chat .varo-native-robot-chat__message--assistant').first()).toContainText('你好')
+  await expect(field(runtime, 'robot-status')).toContainText('机器人已连接')
+  await runtime.getByRole('textbox', { name: '对话内容' }).fill('查订单')
+  await runtime.getByRole('button', { name: '发送', exact: true }).click()
+  await expect(runtime.locator('wx-wechat-robot-chat .varo-native-robot-chat__message--user')).toContainText('查订单')
+  await expect(field(runtime, 'robot-last-query')).toContainText('查订单')
+  await expect(field(runtime, 'robot-query-count')).toContainText('1')
+  await page.screenshot({ path: join(artifacts, 'native-robot-chat.png'), fullPage: true })
+  checks.push('native robot chat welcome, operateCard send and queryCallback')
+
+  assert.deepEqual(errors.filter(message => !message.includes('preview-smoke-intentional')), [])
+  console.log(JSON.stringify({ status: 'passed', url: baseUrl, browser: browser.version(), checks, artifacts }, null, 2))
+  await context.close()
+}
+finally {
+  await browser.close()
+}
diff --git a/apps/playground-weapp-preview/src/App.vue b/apps/playground-weapp-preview/src/App.vue
new file mode 100644
index 00000000..fbe29f19
--- /dev/null
+++ b/apps/playground-weapp-preview/src/App.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import type { PreviewScenarioId } from './protocol'
+import { computed, shallowRef } from 'vue'
+import PreviewFrame from './components/PreviewFrame.vue'
+import PreviewToolbar from './components/PreviewToolbar.vue'
+import { previewScenarios } from './protocol'
+
+type PreviewWidth = 320 | 390 | 430
+
+const scenario = shallowRef<PreviewScenarioId>('controls')
+const width = shallowRef<PreviewWidth>(390)
+const session = shallowRef(globalThis.crypto.randomUUID())
+
+const activeScenario = computed(() =>
+  previewScenarios.find(item => item.id === scenario.value) ?? previewScenarios[0],
+)
+
+function renewSession() {
+  session.value = globalThis.crypto.randomUUID()
+}
+
+function selectScenario(nextScenario: PreviewScenarioId) {
+  if (nextScenario === scenario.value) {
+    return
+  }
+
+  scenario.value = nextScenario
+  renewSession()
+}
+
+function selectWidth(nextWidth: PreviewWidth) {
+  width.value = nextWidth
+}
+</script>
+
+<template>
+  <div class="preview-app">
+    <header class="preview-app__header">
+      <div class="preview-app__heading">
+        <p class="preview-app__eyebrow">
+          Varo · Weapp artifact lab
+        </p>
+        <h1>小程序 Web 兼容预览</h1>
+        <p class="preview-app__intro">
+          直接装载 Wevu 原生构建产物，在浏览器中检查组件交互与 Agent 内容表现。
+        </p>
+      </div>
+
+      <dl class="preview-app__facts" aria-label="预览运行信息">
+        <div>
+          <dt>构建来源</dt>
+          <dd>Wevu native</dd>
+        </div>
+        <div>
+          <dt>渲染框架</dt>
+          <dd>glass-easel</dd>
+        </div>
+        <div>
+          <dt>当前页面</dt>
+          <dd><code>{{ activeScenario.page }}</code></dd>
+        </div>
+      </dl>
+    </header>
+
+    <section class="preview-app__notice" role="note" aria-labelledby="compatibility-heading">
+      <p class="preview-app__notice-label">
+        使用边界
+      </p>
+      <div>
+        <h2 id="compatibility-heading">
+          这是 Web 兼容预览，不是真实微信客户端模拟器
+        </h2>
+        <p>
+          页面使用官方 glass-easel 框架运行实际 Wevu 构建产物。微信专属 API、登录、支付与扫码能力不会在这里伪造；外层 Vue 工具栏也不会替代预览中的原生交互。
+        </p>
+      </div>
+    </section>
+
+    <main class="preview-app__workspace">
+      <aside class="preview-app__controls" aria-label="预览控制台">
+        <PreviewToolbar
+          :scenario="scenario"
+          :width="width"
+          @reset="renewSession"
+          @select-scenario="selectScenario"
+          @select-width="selectWidth"
+        />
+      </aside>
+
+      <section class="preview-app__surface" aria-labelledby="preview-surface-heading">
+        <header class="preview-app__surface-heading">
+          <div>
+            <p class="preview-app__eyebrow">
+              Native runtime
+            </p>
+            <h2 id="preview-surface-heading">
+              {{ activeScenario.title }}
+            </h2>
+          </div>
+          <p>{{ activeScenario.description }}</p>
+        </header>
+
+        <PreviewFrame
+          :scenario="scenario"
+          :session="session"
+          :width="width"
+          @reset="renewSession"
+        />
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.preview-app {
+  width: min(1240px, calc(100% - 40px));
+  min-width: 0;
+  padding: 36px 0 56px;
+  margin: 0 auto;
+}
+
+.preview-app__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
+  gap: 32px;
+  align-items: end;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--varo-ui-border);
+}
+
+.preview-app__heading {
+  min-width: 0;
+}
+
+.preview-app__eyebrow,
+.preview-app__notice-label {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--varo-ui-primary-text);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.preview-app__heading h1 {
+  margin: 0;
+  font-size: clamp(32px, 5vw, 54px);
+  line-height: 1.04;
+  letter-spacing: -0.045em;
+}
+
+.preview-app__intro {
+  max-width: 620px;
+  margin: 16px 0 0;
+  font-size: 17px;
+  line-height: 1.7;
+  color: var(--varo-ui-text-regular);
+}
+
+.preview-app__facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  background: var(--varo-ui-border-light);
+  border: 1px solid var(--varo-ui-border-light);
+  border-radius: calc(var(--varo-ui-radius) + 4px);
+}
+
+.preview-app__facts div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 13px 14px;
+  background: var(--varo-ui-surface);
+}
+
+.preview-app__facts div:last-child {
+  grid-column: 1 / -1;
+}
+
+.preview-app__facts dt {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--varo-ui-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.preview-app__facts dd {
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--varo-ui-text);
+  overflow-wrap: anywhere;
+}
+
+.preview-app__facts code {
+  font: inherit;
+}
+
+.preview-app__notice {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 24px;
+  padding: 20px 22px;
+  margin: 24px 0 30px;
+  color: var(--varo-ui-warning-text);
+  background: var(--varo-ui-warning-soft);
+  border: 1px solid var(--varo-ui-warning);
+  border-left-width: 5px;
+  border-radius: var(--varo-ui-radius);
+}
+
+.preview-app__notice-label {
+  margin: 3px 0 0;
+  color: inherit;
+}
+
+.preview-app__notice h2 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+}
+
+.preview-app__notice p:last-child {
+  max-width: 84ch;
+  margin: 8px 0 0;
+  line-height: 1.65;
+}
+
+.preview-app__workspace {
+  display: grid;
+  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+  min-width: 0;
+}
+
+.preview-app__controls {
+  position: sticky;
+  top: 20px;
+  min-width: 0;
+}
+
+.preview-app__surface {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+}
+
+.preview-app__surface-heading {
+  display: flex;
+  gap: 24px;
+  align-items: end;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.preview-app__surface-heading > div {
+  min-width: 0;
+}
+
+.preview-app__surface-heading h2 {
+  margin: 0;
+  font-size: clamp(24px, 3vw, 32px);
+  letter-spacing: -0.03em;
+}
+
+.preview-app__surface-heading > p {
+  max-width: 400px;
+  margin: 0;
+  line-height: 1.55;
+  color: var(--varo-ui-text-regular);
+  text-align: right;
+}
+
+@media (max-width: 900px) {
+  .preview-app__header,
+  .preview-app__workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .preview-app__header {
+    align-items: start;
+  }
+
+  .preview-app__facts {
+    max-width: 520px;
+  }
+
+  .preview-app__controls {
+    position: static;
+  }
+}
+
+@media (max-width: 620px) {
+  .preview-app {
+    width: min(100% - 24px, 1240px);
+    padding: 22px 0 36px;
+  }
+
+  .preview-app__header {
+    gap: 22px;
+    padding-bottom: 22px;
+  }
+
+  .preview-app__heading h1 {
+    font-size: clamp(30px, 11vw, 42px);
+  }
+
+  .preview-app__intro {
+    font-size: 15px;
+  }
+
+  .preview-app__notice {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+    padding: 18px;
+    margin: 18px 0 24px;
+  }
+
+  .preview-app__notice-label {
+    margin: 0 0 5px;
+  }
+
+  .preview-app__workspace {
+    gap: 26px;
+  }
+
+  .preview-app__surface-heading {
+    display: grid;
+    gap: 8px;
+  }
+
+  .preview-app__surface-heading > p {
+    text-align: left;
+  }
+}
+</style>
diff --git a/apps/playground-weapp-preview/src/components/PreviewFrame.vue b/apps/playground-weapp-preview/src/components/PreviewFrame.vue
new file mode 100644
index 00000000..d5003bcd
--- /dev/null
+++ b/apps/playground-weapp-preview/src/components/PreviewFrame.vue
@@ -0,0 +1,395 @@
+<script setup lang="ts">
+import type { PreviewScenarioId } from '../protocol'
+import { VButton } from '@varo-ui/h5'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+import { isPreviewFrameMessage, previewScenarios } from '../protocol'
+
+type PreviewState = 'loading' | 'ready' | 'error'
+type PreviewWidth = 320 | 390 | 430
+
+interface Props {
+  scenario: PreviewScenarioId
+  session: string
+  width: PreviewWidth
+}
+
+interface Emits {
+  reset: []
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const runtimeFrame = useTemplateRef<HTMLIFrameElement>('runtimeFrame')
+const frameStage = useTemplateRef<HTMLDivElement>('frameStage')
+const frameDevice = useTemplateRef<HTMLDivElement>('frameDevice')
+const availableWidth = shallowRef(0)
+const deviceHeight = shallowRef(0)
+let resizeObserver: ResizeObserver | undefined
+const state = shallowRef<PreviewState>('loading')
+const artifact = shallowRef('')
+const errorMessage = shallowRef('')
+
+const scenarioDetails = computed(() =>
+  previewScenarios.find(item => item.id === props.scenario) ?? previewScenarios[0],
+)
+const frameUrl = computed(
+  () => `./runtime.html?scenario=${props.scenario}&session=${encodeURIComponent(props.session)}`,
+)
+const scale = computed(() => availableWidth.value > 0 ? Math.min(1, availableWidth.value / (props.width + 2)) : 1)
+const frameStyle = computed(() => ({ inlineSize: `${props.width}px`, transform: `scale(${scale.value})` }))
+const fitStyle = computed(() => ({ inlineSize: `${(props.width + 2) * scale.value}px`, blockSize: `${deviceHeight.value * scale.value}px` }))
+const scaleLabel = computed(() => `${Math.round(scale.value * 100)}%`)
+const frameTitle = computed(() => `${scenarioDetails.value.title} Wevu Web 兼容预览`)
+const stateLabel = computed(() => {
+  if (state.value === 'ready') {
+    return '已就绪'
+  }
+
+  if (state.value === 'error') {
+    return '载入失败'
+  }
+
+  return '正在加载'
+})
+
+watch(
+  [() => props.session, () => props.scenario],
+  () => {
+    state.value = 'loading'
+    artifact.value = ''
+    errorMessage.value = ''
+  },
+  { immediate: true },
+)
+
+function receiveFrameMessage(event: MessageEvent<unknown>) {
+  if (event.origin !== window.location.origin) {
+    return
+  }
+
+  if (event.source !== runtimeFrame.value?.contentWindow) {
+    return
+  }
+
+  if (!isPreviewFrameMessage(event.data)) {
+    return
+  }
+
+  if (event.data.session !== props.session || event.data.scenario !== props.scenario) {
+    return
+  }
+
+  if (event.data.type === 'ready') {
+    artifact.value = event.data.artifact
+    errorMessage.value = ''
+    state.value = 'ready'
+    return
+  }
+
+  artifact.value = ''
+  errorMessage.value = event.data.message
+  state.value = 'error'
+}
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.target === frameStage.value) { availableWidth.value = entry.contentRect.width }
+      if (entry.target === frameDevice.value) { deviceHeight.value = entry.contentRect.height + 2 }
+    }
+  })
+  if (frameStage.value) { resizeObserver.observe(frameStage.value) }
+  if (frameDevice.value) { resizeObserver.observe(frameDevice.value) }
+})
+
+onBeforeMount(() => {
+  window.addEventListener('message', receiveFrameMessage)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('message', receiveFrameMessage)
+})
+</script>
+
+<template>
+  <article class="preview-frame" :data-state="state">
+    <header class="preview-frame__header">
+      <div class="preview-frame__route">
+        <span>Native page</span>
+        <code>{{ scenarioDetails.page }}</code>
+      </div>
+
+      <div class="preview-frame__status" :data-state="state">
+        <span class="preview-frame__status-dot" aria-hidden="true" />
+        <span>{{ stateLabel }}</span>
+      </div>
+    </header>
+
+    <div ref="frameStage" class="preview-frame__stage">
+      <div class="preview-frame__fit" :style="fitStyle">
+        <div ref="frameDevice" class="preview-frame__device" :style="frameStyle">
+          <div class="preview-frame__device-bar" aria-hidden="true">
+            <span>{{ scenarioDetails.title }}</span>
+            <span>{{ props.width }} px · {{ scaleLabel }}</span>
+          </div>
+
+          <div class="preview-frame__canvas" :aria-busy="state === 'loading'">
+            <iframe
+              :key="props.session"
+              ref="runtimeFrame"
+              class="preview-frame__iframe"
+              :src="frameUrl"
+              :title="frameTitle"
+              :tabindex="state === 'ready' ? 0 : -1"
+              :aria-hidden="state !== 'ready'"
+            />
+
+            <div v-if="state === 'loading'" class="preview-frame__overlay" role="status" aria-live="polite">
+              <span class="preview-frame__state-mark" aria-hidden="true" />
+              <strong>正在启动 Web 兼容运行时</strong>
+              <p>等待 glass-easel 装载当前 Wevu 原生构建产物。</p>
+            </div>
+
+            <div v-else-if="state === 'error'" class="preview-frame__overlay" role="alert">
+              <span class="preview-frame__state-mark" aria-hidden="true" />
+              <strong>预览无法启动</strong>
+              <p>{{ errorMessage }}</p>
+              <VButton native-type="button" tone="danger" @click="emit('reset')">
+                重置并重试
+              </VButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="preview-frame__artifact" aria-live="polite">
+      <span>运行产物</span>
+      <output v-if="state === 'ready'">{{ artifact }}</output>
+      <p v-else-if="state === 'error'">
+        未载入产物；可使用上方操作重置。
+      </p>
+      <p v-else>
+        等待运行时报告产物标识。
+      </p>
+    </footer>
+  </article>
+</template>
+
+<style scoped>
+.preview-frame {
+  min-width: 0;
+  overflow: hidden;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: calc(var(--varo-ui-radius) + 8px);
+  box-shadow: var(--varo-ui-shadow-md);
+}
+
+.preview-frame__header,
+.preview-frame__artifact {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 14px 16px;
+  background: var(--varo-ui-surface);
+}
+
+.preview-frame__header {
+  border-bottom: 1px solid var(--varo-ui-border-light);
+}
+
+.preview-frame__route {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.preview-frame__route > span,
+.preview-frame__artifact > span {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-ui-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+}
+
+.preview-frame__route code,
+.preview-frame__artifact output,
+.preview-frame__artifact p {
+  min-width: 0;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--varo-ui-text-regular);
+  overflow-wrap: anywhere;
+}
+
+.preview-frame__status {
+  display: inline-flex;
+  flex: none;
+  gap: 7px;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 750;
+  color: var(--varo-ui-info-text);
+  background: var(--varo-ui-info-soft);
+  border-radius: 999px;
+}
+
+.preview-frame__status[data-state='ready'] {
+  color: var(--varo-ui-success-text);
+  background: var(--varo-ui-success-soft);
+}
+
+.preview-frame__status[data-state='error'] {
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
+}
+
+.preview-frame__status-dot {
+  width: 8px;
+  height: 8px;
+  background: currentcolor;
+  border-radius: 999px;
+}
+
+.preview-frame__stage {
+  display: flex;
+  min-width: 0;
+  padding: 22px;
+  overflow: hidden;
+  background: var(--varo-ui-bg);
+}
+
+.preview-frame__fit {
+  position: relative;
+  flex: none;
+  margin: 0 auto;
+}
+
+.preview-frame__device {
+  position: absolute;
+  inset: 0 auto auto 0;
+  box-sizing: content-box;
+  max-width: none;
+  overflow: hidden;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border-strong);
+  border-radius: calc(var(--varo-ui-radius) + 12px);
+  box-shadow: var(--varo-ui-shadow-sm);
+  transform-origin: top left;
+}
+
+.preview-frame__device-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 42px;
+  padding: 0 14px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-ui-text-regular);
+  background: var(--varo-ui-surface-muted);
+  border-bottom: 1px solid var(--varo-ui-border-light);
+}
+
+.preview-frame__device-bar span:last-child {
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-ui-text-muted);
+}
+
+.preview-frame__canvas {
+  position: relative;
+  height: clamp(568px, 72dvh, 760px);
+  min-height: 0;
+  overflow: hidden;
+  background: var(--varo-ui-surface);
+}
+
+.preview-frame__iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--varo-ui-surface);
+  border: 0;
+}
+
+.preview-frame__overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  gap: 10px;
+  place-content: center;
+  justify-items: center;
+  padding: 28px;
+  color: var(--varo-ui-text-regular);
+  text-align: center;
+  background: var(--varo-ui-surface);
+}
+
+.preview-frame__overlay strong {
+  font-size: 17px;
+  color: var(--varo-ui-text);
+}
+
+.preview-frame__overlay p {
+  max-width: 30ch;
+  margin: 0 0 4px;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.preview-frame__state-mark {
+  width: 28px;
+  height: 6px;
+  background: var(--varo-ui-info);
+  border-radius: 999px;
+}
+
+.preview-frame[data-state='error'] .preview-frame__state-mark {
+  background: var(--varo-ui-danger);
+}
+
+.preview-frame__artifact {
+  align-items: start;
+  border-top: 1px solid var(--varo-ui-border-light);
+}
+
+.preview-frame__artifact > span {
+  flex: none;
+  padding-top: 1px;
+}
+
+.preview-frame__artifact output {
+  color: var(--varo-ui-success-text);
+  text-align: right;
+}
+
+.preview-frame__artifact p {
+  text-align: right;
+}
+
+@media (max-width: 620px) {
+  .preview-frame__header,
+  .preview-frame__artifact {
+    align-items: start;
+  }
+
+  .preview-frame__stage {
+    justify-content: flex-start;
+    padding: 12px;
+  }
+
+  .preview-frame__canvas {
+    height: 660px;
+  }
+}
+</style>
diff --git a/apps/playground-weapp-preview/src/components/PreviewToolbar.vue b/apps/playground-weapp-preview/src/components/PreviewToolbar.vue
new file mode 100644
index 00000000..6a0caaa2
--- /dev/null
+++ b/apps/playground-weapp-preview/src/components/PreviewToolbar.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import type { PreviewScenarioId } from '../protocol'
+import { VButton } from '@varo-ui/h5'
+import { previewScenarios } from '../protocol'
+
+type PreviewWidth = 320 | 390 | 430
+
+interface Props {
+  scenario: PreviewScenarioId
+  width: PreviewWidth
+}
+
+interface Emits {
+  reset: []
+  selectScenario: [scenario: PreviewScenarioId]
+  selectWidth: [width: PreviewWidth]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const deviceWidths = [
+  { value: 320, label: '紧凑', detail: '320 px' },
+  { value: 390, label: '标准', detail: '390 px' },
+  { value: 430, label: '宽屏', detail: '430 px' },
+] as const
+</script>
+
+<template>
+  <div class="preview-toolbar">
+    <header class="preview-toolbar__header">
+      <p>Preview controls</p>
+      <h2>预览设置</h2>
+      <span>使用 Tab 与方向键可完成全部选择。</span>
+    </header>
+
+    <fieldset class="preview-toolbar__group" aria-describedby="scenario-help">
+      <legend>场景</legend>
+      <p id="scenario-help">
+        切换场景会启动全新的运行会话。
+      </p>
+
+      <div class="preview-toolbar__scenario-list">
+        <label v-for="item in previewScenarios" :key="item.id" class="preview-toolbar__scenario">
+          <input
+            class="preview-toolbar__control"
+            type="radio"
+            name="preview-scenario"
+            :value="item.id"
+            :checked="props.scenario === item.id"
+            @change="emit('selectScenario', item.id)"
+          >
+          <span class="preview-toolbar__scenario-surface">
+            <strong>{{ item.title }}</strong>
+            <span>{{ item.description }}</span>
+          </span>
+        </label>
+      </div>
+    </fieldset>
+
+    <fieldset class="preview-toolbar__group" aria-describedby="width-help">
+      <legend>设备宽度</legend>
+      <p id="width-help">
+        仅改变预览视口，不重置当前会话。
+      </p>
+
+      <div class="preview-toolbar__width-list">
+        <label v-for="option in deviceWidths" :key="option.value" class="preview-toolbar__width">
+          <input
+            class="preview-toolbar__control"
+            type="radio"
+            name="preview-width"
+            :value="option.value"
+            :checked="props.width === option.value"
+            @change="emit('selectWidth', option.value)"
+          >
+          <span class="preview-toolbar__width-surface">
+            <strong>{{ option.label }}</strong>
+            <span>{{ option.detail }}</span>
+          </span>
+        </label>
+      </div>
+    </fieldset>
+
+    <div class="preview-toolbar__reset">
+      <VButton block native-type="button" tone="default" variant="outline" @click="emit('reset')">
+        重置当前预览
+      </VButton>
+      <p>重新创建 iframe 与会话，当前原生页面状态会被清除。</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.preview-toolbar {
+  display: grid;
+  gap: 22px;
+  min-width: 0;
+  padding: 20px;
+  background: var(--varo-ui-surface);
+  border: 1px solid var(--varo-ui-border);
+  border-radius: calc(var(--varo-ui-radius) + 6px);
+  box-shadow: var(--varo-ui-shadow-sm);
+}
+
+.preview-toolbar__header {
+  display: grid;
+  gap: 5px;
+}
+
+.preview-toolbar__header p {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--varo-ui-primary-text);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.preview-toolbar__header h2 {
+  margin: 0;
+  font-size: 22px;
+  letter-spacing: -0.025em;
+}
+
+.preview-toolbar__header span,
+.preview-toolbar__group > p,
+.preview-toolbar__reset p {
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--varo-ui-text-muted);
+}
+
+.preview-toolbar__group {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.preview-toolbar__group legend {
+  padding: 0;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--varo-ui-text);
+}
+
+.preview-toolbar__group > p {
+  margin: 5px 0 10px;
+}
+
+.preview-toolbar__scenario-list {
+  display: grid;
+  gap: 8px;
+}
+
+.preview-toolbar__scenario,
+.preview-toolbar__width {
+  position: relative;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.preview-toolbar__control {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.preview-toolbar__scenario-surface,
+.preview-toolbar__width-surface {
+  display: grid;
+  min-width: 0;
+  color: var(--varo-ui-text-regular);
+  background: var(--varo-ui-surface-muted);
+  border: 1px solid var(--varo-ui-border-light);
+}
+
+.preview-toolbar__scenario-surface {
+  gap: 4px;
+  min-height: 76px;
+  padding: 13px 14px;
+  border-radius: var(--varo-ui-radius);
+}
+
+.preview-toolbar__scenario-surface strong {
+  font-size: 14px;
+  color: var(--varo-ui-text);
+}
+
+.preview-toolbar__scenario-surface > span {
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.preview-toolbar__control:checked + .preview-toolbar__scenario-surface,
+.preview-toolbar__control:checked + .preview-toolbar__width-surface {
+  color: var(--varo-ui-primary-text);
+  background: var(--varo-ui-primary-soft);
+  border-color: var(--varo-ui-primary);
+}
+
+.preview-toolbar__control:checked + .preview-toolbar__scenario-surface strong,
+.preview-toolbar__control:checked + .preview-toolbar__width-surface strong {
+  color: var(--varo-ui-primary-text);
+}
+
+.preview-toolbar__control:focus-visible + .preview-toolbar__scenario-surface,
+.preview-toolbar__control:focus-visible + .preview-toolbar__width-surface {
+  outline: 2px solid var(--varo-ui-focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 3px var(--varo-ui-ring);
+}
+
+@media (hover: hover) {
+  .preview-toolbar__scenario:hover .preview-toolbar__scenario-surface,
+  .preview-toolbar__width:hover .preview-toolbar__width-surface {
+    border-color: var(--varo-ui-border-strong);
+  }
+
+  .preview-toolbar__scenario:hover .preview-toolbar__control:checked + .preview-toolbar__scenario-surface,
+  .preview-toolbar__width:hover .preview-toolbar__control:checked + .preview-toolbar__width-surface {
+    border-color: var(--varo-ui-primary-dark);
+  }
+}
+
+.preview-toolbar__width-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.preview-toolbar__width-surface {
+  gap: 3px;
+  min-height: 61px;
+  padding: 10px 6px;
+  text-align: center;
+  border-radius: var(--varo-ui-radius-sm);
+}
+
+.preview-toolbar__width-surface strong {
+  font-size: 12px;
+  color: var(--varo-ui-text);
+}
+
+.preview-toolbar__width-surface span {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.preview-toolbar__reset {
+  display: grid;
+  gap: 8px;
+  padding-top: 18px;
+  border-top: 1px solid var(--varo-ui-border-light);
+}
+
+.preview-toolbar__reset p {
+  margin: 0;
+}
+</style>
diff --git a/apps/playground-weapp-preview/src/env.d.ts b/apps/playground-weapp-preview/src/env.d.ts
new file mode 100644
index 00000000..cd9530a0
--- /dev/null
+++ b/apps/playground-weapp-preview/src/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference path="../../../packages/weapp-web/src/virtual.d.ts" />
diff --git a/apps/playground-weapp-preview/src/main.ts b/apps/playground-weapp-preview/src/main.ts
new file mode 100644
index 00000000..6068768c
--- /dev/null
+++ b/apps/playground-weapp-preview/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@varo-ui/h5/source/style.css'
+import './styles.css'
+
+createApp(App).mount('#app')
diff --git a/apps/playground-weapp-preview/src/protocol.ts b/apps/playground-weapp-preview/src/protocol.ts
new file mode 100644
index 00000000..a4c48435
--- /dev/null
+++ b/apps/playground-weapp-preview/src/protocol.ts
@@ -0,0 +1,52 @@
+export const previewChannel = 'varo-weapp-preview'
+
+export const previewScenarios = [
+  {
+    id: 'controls',
+    title: '基础交互',
+    page: 'pages/web-preview/index',
+    description: '按钮、受控输入、插槽与组件生命周期',
+  },
+  {
+    id: 'agent',
+    title: 'Agent 内容',
+    page: 'pages/web-preview-agent/index',
+    description: '原生 Markdown 与可取消的流式内容',
+  },
+  {
+    id: 'map',
+    title: '原生地图',
+    page: 'pages/web-preview-map/index',
+    description: 'VMap 坐标、标记与 regionchange',
+  },
+  {
+    id: 'robot-chat',
+    title: '机器人对话',
+    page: 'pages/web-preview-robot-chat/index',
+    description: 'chatbotwidget 插件会话面、operateCard 与 queryCallback',
+  },
+  {
+    id: 'rag',
+    title: 'RAG 流程',
+    page: 'pages/web-preview-rag/index',
+    description: '五阶段检索增强生成与来源引用',
+  },
+] as const
+
+export type PreviewScenarioId = (typeof previewScenarios)[number]['id']
+
+export type PreviewFrameMessage
+  = | { channel: typeof previewChannel, type: 'ready', session: string, scenario: PreviewScenarioId, artifact: string }
+    | { channel: typeof previewChannel, type: 'error', session: string, scenario: PreviewScenarioId, message: string }
+
+export function isPreviewScenario(value: unknown): value is PreviewScenarioId {
+  return previewScenarios.some(scenario => scenario.id === value)
+}
+
+export function isPreviewFrameMessage(value: unknown): value is PreviewFrameMessage {
+  if (!value || typeof value !== 'object') { return false }
+  const candidate = value as Record<string, unknown>
+  if (candidate.channel !== previewChannel || typeof candidate.session !== 'string' || !isPreviewScenario(candidate.scenario)) { return false }
+  return (candidate.type === 'ready' && typeof candidate.artifact === 'string')
+    || (candidate.type === 'error' && typeof candidate.message === 'string')
+}
diff --git a/apps/playground-weapp-preview/src/runtime/entry.ts b/apps/playground-weapp-preview/src/runtime/entry.ts
new file mode 100644
index 00000000..20cd6252
--- /dev/null
+++ b/apps/playground-weapp-preview/src/runtime/entry.ts
@@ -0,0 +1,74 @@
+import type { PreviewFrameMessage, PreviewScenarioId } from '../protocol'
+import { isPreviewScenario, previewChannel } from '../protocol'
+import './runtime.css'
+
+export interface RuntimeSession {
+  scenario: PreviewScenarioId
+  signal: AbortSignal
+  ready: (artifact: string) => void
+  fail: (error: unknown) => void
+}
+
+const parameters = new URLSearchParams(window.location.search)
+const scenarioValue = parameters.get('scenario') ?? 'controls'
+const session = parameters.get('session') ?? crypto.randomUUID()
+const status = document.getElementById('runtime-status')
+const abortController = new AbortController()
+let phase: 'loading' | 'ready' | 'error' | 'closed' = 'loading'
+let dispose: (() => void) | undefined
+
+function send(message: PreviewFrameMessage) {
+  if (window.parent !== window) { window.parent.postMessage(message, window.location.origin) }
+}
+
+function fail(error: unknown) {
+  if (phase === 'error' || phase === 'closed') { return }
+  phase = 'error'
+  const message = error instanceof Error ? error.message : String(error)
+  if (status) {
+    status.hidden = false
+    status.setAttribute('role', 'alert')
+    status.textContent = `小程序 Web 预览无法继续：${message}`
+  }
+  abortController.abort()
+  if (isPreviewScenario(scenarioValue)) {
+    send({ channel: previewChannel, type: 'error', session, scenario: scenarioValue, message })
+  }
+}
+
+const onError = (event: ErrorEvent) => fail(event.error ?? event.message)
+const onRejection = (event: PromiseRejectionEvent) => fail(event.reason)
+function onPageHide() {
+  if (phase === 'closed') { return }
+  phase = 'closed'
+  abortController.abort()
+  dispose?.()
+  window.removeEventListener('error', onError)
+  window.removeEventListener('unhandledrejection', onRejection)
+  window.removeEventListener('pagehide', onPageHide)
+}
+window.addEventListener('error', onError)
+window.addEventListener('unhandledrejection', onRejection)
+window.addEventListener('pagehide', onPageHide)
+
+if (!isPreviewScenario(scenarioValue)) {
+  fail(new Error('未注册的小程序预览场景'))
+}
+else {
+  const scenario = scenarioValue
+  void import('./index').then(async ({ mountPreview }) => {
+    if (abortController.signal.aborted) { return }
+    dispose = await mountPreview({
+      scenario,
+      signal: abortController.signal,
+      fail,
+      ready(artifact) {
+        if (abortController.signal.aborted || phase !== 'loading') { return }
+        phase = 'ready'
+        if (status) { status.hidden = true }
+        send({ channel: previewChannel, type: 'ready', session, scenario, artifact })
+      },
+    })
+    if (abortController.signal.aborted) { dispose() }
+  }).catch(fail)
+}
diff --git a/apps/playground-weapp-preview/src/runtime/index.ts b/apps/playground-weapp-preview/src/runtime/index.ts
new file mode 100644
index 00000000..5f611d24
--- /dev/null
+++ b/apps/playground-weapp-preview/src/runtime/index.ts
@@ -0,0 +1,27 @@
+import type { RuntimeSession } from './entry'
+import { mountWeappWebPreview } from '@varo/weapp-web/runtime'
+import artifacts from 'virtual:varo-native-artifacts'
+import { previewScenarios } from '../protocol'
+
+export async function mountPreview(session: RuntimeSession): Promise<() => void> {
+  const mount = document.getElementById('runtime-root')
+  if (!mount) { throw new Error('找不到小程序预览挂载点') }
+  const pagePath = artifacts.pages[session.scenario]
+  if (!pagePath) {
+    throw new Error(`未注册的小程序预览场景：${session.scenario}`)
+  }
+  const scenario = previewScenarios.find(item => item.id === session.scenario)
+  if (scenario && scenario.page !== pagePath) {
+    throw new Error(`小程序预览场景 ${session.scenario} 的产物路径与协议不一致`)
+  }
+  return mountWeappWebPreview({
+    mount,
+    artifacts,
+    session: {
+      pagePath,
+      signal: session.signal,
+      ready: session.ready,
+      fail: session.fail,
+    },
+  })
+}
diff --git a/apps/playground-weapp-preview/src/runtime/runtime.css b/apps/playground-weapp-preview/src/runtime/runtime.css
new file mode 100644
index 00000000..caed4c7f
--- /dev/null
+++ b/apps/playground-weapp-preview/src/runtime/runtime.css
@@ -0,0 +1,37 @@
+html,
+body {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+
+#runtime-root {
+  min-height: 100vh;
+}
+
+#runtime-status {
+  box-sizing: border-box;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: CanvasText;
+  overflow-wrap: anywhere;
+  background: Canvas;
+}
+
+#runtime-status[hidden] {
+  display: none;
+}
+
+wx-page {
+  display: block;
+  min-height: 100vh;
+}
diff --git a/apps/playground-weapp-preview/src/styles.css b/apps/playground-weapp-preview/src/styles.css
new file mode 100644
index 00000000..09f43dfd
--- /dev/null
+++ b/apps/playground-weapp-preview/src/styles.css
@@ -0,0 +1,55 @@
+:root {
+  font-family:
+    'IBM Plex Sans',
+    'SF Pro Text',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-synthesis: none;
+  color: var(--varo-ui-text);
+  background: var(--varo-ui-bg);
+  text-rendering: optimizelegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: var(--varo-ui-bg);
+}
+
+body {
+  min-width: 0;
+  min-height: 100vh;
+  margin: 0;
+  background: var(--varo-ui-bg);
+}
+
+button,
+input {
+  font: inherit;
+}
+
+code,
+output {
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+}
+
+#app {
+  min-width: 0;
+  min-height: 100vh;
+}
+
+noscript {
+  display: block;
+  max-width: 680px;
+  padding: 20px;
+  margin: 40px auto;
+  color: var(--varo-ui-danger-text);
+  background: var(--varo-ui-danger-soft);
+  border: 1px solid var(--varo-ui-danger);
+  border-radius: var(--varo-ui-radius);
+}
diff --git a/apps/playground-weapp-preview/tsconfig.json b/apps/playground-weapp-preview/tsconfig.json
new file mode 100644
index 00000000..7f7e0bbf
--- /dev/null
+++ b/apps/playground-weapp-preview/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "types": ["vite/client", "node"],
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"]
+}
diff --git a/apps/playground-weapp-preview/vite.config.ts b/apps/playground-weapp-preview/vite.config.ts
new file mode 100644
index 00000000..fbe0832f
--- /dev/null
+++ b/apps/playground-weapp-preview/vite.config.ts
@@ -0,0 +1,44 @@
+import { resolve } from 'node:path'
+import { weappWebPlugin } from '@varo/weapp-web/plugin'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import { previewScenarios } from './src/protocol.ts'
+
+const root = import.meta.dirname
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    vue(),
+    weappWebPlugin({
+      nativeBuildRoot: resolve(root, '../playground-weapp/devtools/build/mp-weixin'),
+      pages: Object.fromEntries(previewScenarios.map(scenario => [scenario.id, scenario.page])),
+    }),
+  ],
+  server: { host: '127.0.0.1', port: 5182, strictPort: true },
+  preview: { host: '127.0.0.1', port: 4182, strictPort: true },
+  build: {
+    rolldownOptions: {
+      input: {
+        index: resolve(root, 'index.html'),
+        runtime: resolve(root, 'runtime.html'),
+      },
+    },
+  },
+  resolve: {
+    alias: [
+      { find: '@varo-ui/h5/source/style.css', replacement: resolve(root, '../../packages/ui-h5/src/style.css') },
+      { find: '@varo-ui/h5/primitives', replacement: resolve(root, '../../packages/ui-h5/src/primitives.ts') },
+      { find: '@varo-ui/h5', replacement: resolve(root, '../../packages/ui-h5/src/index.ts') },
+      { find: '@varo-ui/headless', replacement: resolve(root, '../../packages/primitives-core/src/index.ts') },
+      { find: '@varo/primitives-h5', replacement: resolve(root, '../../packages/primitives-h5/src/index.ts') },
+      { find: '@varo-ui/theme', replacement: resolve(root, '../../packages/theme/src/index.ts') },
+      { find: '@varo/shared', replacement: resolve(root, '../../packages/shared/src/index.ts') },
+      { find: '@varo/utils', replacement: resolve(root, '../../packages/utils/src/index.ts') },
+      { find: '@varo/hooks', replacement: resolve(root, '../../packages/hooks/src/index.ts') },
+      { find: /^@varo\/weapp-web$/, replacement: resolve(root, '../../packages/weapp-web/src/index.ts') },
+      { find: /^@varo\/weapp-web\/plugin$/, replacement: resolve(root, '../../packages/weapp-web/src/plugin/index.ts') },
+      { find: /^@varo\/weapp-web\/runtime$/, replacement: resolve(root, '../../packages/weapp-web/src/runtime/index.ts') },
+    ],
+  },
+})
diff --git a/apps/playground-weapp/package.json b/apps/playground-weapp/package.json
index 8b39e016..0df600ce 100644
--- a/apps/playground-weapp/package.json
+++ b/apps/playground-weapp/package.json
@@ -27,17 +27,17 @@
     "@varo-ui/weapp": "workspace:*",
     "@weapp-tailwindcss/merge": "^2.2.3",
     "clsx": "^2.1.1",
-    "wevu": "7.0.4"
+    "wevu": "^7.1.0"
   },
   "devDependencies": {
     "@varo/primitives-weapp": "workspace:*",
     "@vitejs/plugin-vue": "^6.0.8",
-    "@weapp-vite/miniprogram-automator": "1.2.16",
+    "@weapp-vite/miniprogram-automator": "^1.2.17",
     "postcss-selector-parser": "7.1.6",
     "tailwindcss": "^4.3.3",
     "vite": "8.2.2",
     "vue": "^3.5.42",
-    "weapp-tailwindcss": "^5.5.1",
-    "weapp-vite": "7.0.4"
+    "weapp-tailwindcss": "^5.5.3",
+    "weapp-vite": "^7.1.0"
   }
 }
diff --git a/apps/playground-weapp/src/app.vue b/apps/playground-weapp/src/app.vue
index 1381ee82..2c184a91 100644
--- a/apps/playground-weapp/src/app.vue
+++ b/apps/playground-weapp/src/app.vue
@@ -149,6 +149,11 @@ page {
     "pages/form-showcase/index",
     "pages/robot-chat-showcase/index",
     "pages/agent-workspace/index",
+    "pages/web-preview/index",
+    "pages/web-preview-agent/index",
+    "pages/web-preview-map/index",
+    "pages/web-preview-robot-chat/index",
+    "pages/web-preview-rag/index",
     "pages/index/index"
   ],
   "subPackages": [
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentActivity.vue b/apps/playground-weapp/src/components/agent-ui/AgentActivity.vue
index a178548c..7d0ded9c 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentActivity.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentActivity.vue
@@ -3,6 +3,7 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentActivityItem, AgentAdvancedStatus } from './advanced-types'
 import { computed } from 'wevu'
 import { cn } from '../../lib/cn'
+import { agentSearchIcon, agentSparklesIcon, agentToolIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -16,65 +17,283 @@ const props = withDefaults(
   },
 )
 
-const rootClass = computed(() =>
-  cn('agent-activity overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-activity', props.className))
 const completedCount = computed(() => props.items.filter(item => item.status === 'completed').length)
+const currentItem = computed(() => props.items.find(item => item.status === 'running' || item.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentItem.value?.status === 'failed') {
+    return `阻塞于 ${currentItem.value.title}`
+  }
+  if (currentItem.value) {
+    return `正在执行 ${currentItem.value.title}`
+  }
+  if (props.items.length && completedCount.value === props.items.length) {
+    return '全部完成'
+  }
+  return '等待开始'
+})
+const displayItems = computed(() =>
+  props.items.map((item) => {
+    const ariaCurrent: 'step' | undefined = item.status === 'running' ? 'step' : undefined
+    return {
+      ...item,
+      ariaCurrent,
+      itemClass: `agent-activity__item is-${item.status} is-${item.kind}`,
+      kindLabel: item.kind === 'reasoning'
+        ? '推理'
+        : item.kind === 'search'
+          ? '检索'
+          : item.kind === 'tool'
+            ? '工具'
+            : '轨迹',
+      kindIcon: item.kind === 'search'
+        ? agentSearchIcon
+        : item.kind === 'tool'
+          ? agentToolIcon
+          : agentSparklesIcon,
+      statusChipClass: `agent-advanced__status is-${item.status}`,
+      statusLabel: item.status === 'completed'
+        ? 'Completed'
+        : item.status === 'failed'
+          ? 'Failed'
+          : item.status === 'running'
+            ? 'Running'
+            : 'Waiting',
+    }
+  }),
+)
 
-function statusClass(status: AgentAdvancedStatus) {
+function statusDotClass(status: AgentAdvancedStatus) {
   return cn(
-    'h-2 w-2 flex-none rounded-full',
-    status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    status === 'running' && 'agent-activity__running bg-[var(--varo-agent-primary)] shadow-[0_0_0_3px_#ccfbf1]',
-    status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    status === 'waiting' && 'bg-[var(--varo-agent-border-strong)]',
+    'agent-activity__status-dot',
+    `is-${status}`,
+    status === 'running' && 'agent-activity__running',
   )
 }
-
-function kindLabel(kind: AgentActivityItem['kind']) {
-  if (kind === 'reasoning') { return 'R' }
-  if (kind === 'search') { return 'S' }
-  if (kind === 'tool') { return 'T' }
-  return '·'
-}
 </script>
 
 <template>
   <view :class="rootClass" aria-live="polite">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
+    <view class="agent-activity__header">
+      <view class="agent-activity__heading">
+        <text class="agent-activity__title">
+          {{ title }}
+        </text>
+        <text class="agent-activity__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-activity__count">
         {{ completedCount }}/{{ items.length }}
       </text>
     </view>
-
-    <view class="grid p-2">
-      <view v-for="item in items" :key="item.id" class="grid min-h-[54px] grid-cols-[28px_minmax(0,1fr)_auto] items-start gap-2.5 rounded-xl px-2 py-2" :data-kind="item.kind" :data-status="item.status">
-        <text class="grid h-7 w-7 place-items-center rounded-lg bg-[var(--varo-agent-fill)] text-[10px] font-bold text-[var(--varo-agent-text)]" aria-hidden="true">
-          {{ kindLabel(item.kind) }}
-        </text>
-        <view class="grid min-w-0 gap-0.5">
-          <view class="flex items-baseline justify-between gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+    <view class="agent-activity__body">
+      <view
+        v-for="item in displayItems"
+        :key="item.id"
+        :class="item.itemClass"
+        :data-kind="item.kind"
+        :data-status="item.status"
+        :aria-current="item.ariaCurrent"
+      >
+        <view class="agent-activity__kind" aria-hidden="true">
+          <image class="agent-activity__kind-icon" :src="item.kindIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-activity__copy">
+          <view class="agent-activity__row">
+            <text class="agent-activity__name">
               {{ item.title }}
             </text>
-            <text v-if="item.duration" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
+            <view :class="item.statusChipClass" :data-status="item.status">
+              <view :class="statusDotClass(item.status)" aria-hidden="true" />
+              <text>{{ item.statusLabel }}</text>
+            </view>
+          </view>
+          <view class="agent-activity__meta">
+            <text class="agent-activity__kind-label">
+              {{ item.kindLabel }}
+            </text>
+            <text v-if="item.duration" class="agent-activity__duration">
               {{ item.duration }}
             </text>
           </view>
-          <text v-if="item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="item.detail" class="agent-activity__detail">
             {{ item.detail }}
           </text>
         </view>
-        <text :class="statusClass(item.status)" aria-hidden="true" />
       </view>
     </view>
   </view>
 </template>
 
 <style>
+.agent-activity {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-activity__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-activity__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-activity__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-activity__hint,
+.agent-activity__count,
+.agent-activity__duration,
+.agent-activity__detail {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-activity__count,
+.agent-activity__duration {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-activity__body {
+  display: grid;
+  padding: 8px 10px 12px;
+}
+
+.agent-activity__item {
+  display: flex;
+  gap: 10px;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-activity__item.is-running {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-activity__item.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-activity__kind {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-activity__kind-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-activity__item.is-reasoning .agent-activity__kind {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-activity__item.is-search .agent-activity__kind {
+  background: var(--varo-agent-source-blue-soft, #eff6ff);
+  border-color: var(--varo-agent-source-blue, #2563eb);
+}
+
+.agent-activity__item.is-tool .agent-activity__kind {
+  background: var(--varo-agent-source-violet-soft, #f5f3ff);
+  border-color: var(--varo-agent-source-violet, #7c3aed);
+}
+
+.agent-activity__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-activity__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-activity__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-advanced__status {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-activity__status-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--varo-agent-border-strong, #cbd5e1);
+  border-radius: 999px;
+}
+
+.agent-activity__status-dot.is-completed {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-activity__status-dot.is-running {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-activity__status-dot.is-failed {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-activity__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-activity__kind-label {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
 .agent-activity__running {
   animation: agent-activity-pulse 1s ease-in-out infinite;
 }
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentArtifact.vue b/apps/playground-weapp/src/components/agent-ui/AgentArtifact.vue
index b9deb8d8..d8becbb5 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentArtifact.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentArtifact.vue
@@ -16,32 +16,131 @@ defineProps<{
 const emit = defineEmits<{
   open: [artifact: AgentArtifactItem]
 }>()
+
+function kindLabel(kind?: AgentArtifactItem['kind']) {
+  if (kind === 'code') { return '代码产物' }
+  if (kind === 'image') { return '图像产物' }
+  if (kind === 'file') { return '文件产物' }
+  return '文档产物'
+}
 </script>
 
 <template>
-  <view class="agent-artifact overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm">
-    <view class="flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5">
-      <view class="grid min-w-0">
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view class="agent-artifact" :data-kind="artifact.kind || 'document'">
+    <view class="agent-artifact__header">
+      <view class="agent-artifact__heading">
+        <text class="agent-artifact__kind">
+          {{ kindLabel(artifact.kind) }}
+        </text>
+        <text class="agent-artifact__title">
           {{ artifact.title }}
         </text>
-        <text class="text-[10px] uppercase tracking-wider text-[var(--varo-agent-muted)]">
-          {{ artifact.kind || 'document' }}
+        <text v-if="artifact.language" class="agent-artifact__lang">
+          {{ artifact.language }}
         </text>
       </view>
-      <button class="agent-native-button min-h-9 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[12px] font-semibold text-[var(--varo-agent-text)]" type="button" @click="emit('open', artifact)">
+      <button class="agent-native-button agent-artifact__open" type="button" @click="emit('open', artifact)">
         打开
       </button>
     </view>
-    <scroll-view v-if="artifact.content" class="max-h-72 bg-slate-950" scroll-x scroll-y>
-      <text class="block whitespace-pre p-3.5 font-mono text-[12px] leading-5 text-slate-200">
+    <scroll-view v-if="artifact.content" class="agent-artifact__scroll" scroll-x scroll-y>
+      <text class="agent-artifact__body">
         {{ artifact.content }}
       </text>
     </scroll-view>
-    <image v-if="artifact.previewUrl" class="block h-60 w-full" :src="artifact.previewUrl" :alt="artifact.title" mode="aspectFit" />
+    <image v-if="artifact.previewUrl" class="agent-artifact__preview" :src="artifact.previewUrl" :alt="artifact.title" mode="aspectFit" />
   </view>
 </template>
 
+<style>
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__scroll {
+  max-height: 288px;
+  background: #0f172a;
+}
+
+.agent-artifact__body {
+  display: block;
+  padding: 14px 16px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  height: 240px;
+  background: #0b1220;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentCitations.vue b/apps/playground-weapp/src/components/agent-ui/AgentCitations.vue
index 1db686d0..3418faf4 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentCitations.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentCitations.vue
@@ -25,41 +25,69 @@ const emit = defineEmits<{
 }>()
 
 const open = shallowRef(props.defaultOpen)
-const rootClass = computed(() =>
-  cn('agent-citations overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const openAttr = computed(() => String(open.value))
+const hint = computed(() => open.value ? '点击来源打开原文' : '展开查看引用来源')
+const rootClass = computed(() => cn('agent-citations', props.className))
+const displayItems = computed(() =>
+  props.items.map(item => ({
+    ...item,
+    mark: (item.domain || item.title).trim().charAt(0).toUpperCase() || '#',
+    meta: item.domain || item.url || '',
+  })),
 )
 
 function toggle() {
   open.value = !open.value
   emit('update:open', open.value)
 }
+
+function openItem(id: string) {
+  const item = props.items.find(entry => entry.id === id)
+  if (item) {
+    emit('open', item)
+  }
+}
 </script>
 
 <template>
-  <view :class="rootClass" :data-open="String(open)">
-    <button class="agent-native-button agent-native-button--block flex min-h-12 items-center justify-between gap-3 border-0 bg-[var(--varo-agent-surface)] px-[13px] text-left" type="button" :aria-expanded="open" @click="toggle">
-      <view class="flex min-w-0 items-center gap-2">
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view :class="rootClass" :data-open="openAttr">
+    <button class="agent-native-button agent-native-button--block agent-citations__trigger" type="button" :aria-expanded="open" @click="toggle">
+      <view class="agent-citations__heading">
+        <text class="agent-citations__title">
           {{ title }}
         </text>
-        <text class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[var(--varo-agent-fill)] px-1 text-[10px] leading-none tabular-nums text-[var(--varo-agent-text)]">
+        <text class="agent-citations__hint">
+          {{ hint }}
+        </text>
+      </view>
+      <view class="agent-citations__count-wrap">
+        <text class="agent-citations__count">
           {{ items.length }}
         </text>
+        <image class="agent-citations__chevron" :class="[open && 'is-open']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </view>
-      <image class="h-4 w-4 transition-transform" :class="[open && 'rotate-180']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
     </button>
 
-    <view v-if="open" class="grid gap-1 border-t border-[var(--varo-agent-border)] p-2">
-      <button v-for="(item, index) in items" :key="item.id" class="agent-native-button agent-native-button--block flex min-h-11 items-center gap-2.5 rounded-xl border-0 bg-[var(--varo-agent-surface-strong)] px-2.5 py-2 text-left" hover-class="bg-[var(--varo-agent-fill)]" :hover-start-time="20" :hover-stay-time="70" type="button" @click="emit('open', item)">
-        <text class="grid h-6 w-6 flex-none place-items-center rounded-lg bg-[var(--varo-agent-surface)] text-[10px] font-bold tabular-nums text-[var(--varo-agent-primary)] shadow-sm">
-          {{ index + 1 }}
+    <view v-if="open" class="agent-citations__list">
+      <button
+        v-for="item in displayItems"
+        :key="item.id"
+        class="agent-native-button agent-native-button--block agent-citations__item"
+        type="button"
+        @click="openItem(item.id)"
+      >
+        <text class="agent-citations__mark" aria-hidden="true">
+          {{ item.mark }}
         </text>
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-citations__copy">
+          <text class="agent-citations__name">
             {{ item.title }}
           </text>
-          <text class="truncate text-[11px] text-[var(--varo-agent-muted)]">
-            {{ item.domain || item.description || item.url }}
+          <text v-if="item.meta" class="agent-citations__meta">
+            {{ item.meta }}
+          </text>
+          <text v-if="item.description" class="agent-citations__description">
+            {{ item.description }}
           </text>
         </view>
       </button>
@@ -67,6 +95,133 @@ function toggle() {
   </view>
 </template>
 
+<style>
+.agent-citations {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-citations__trigger {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  text-align: left;
+  background: var(--varo-agent-surface, #fff);
+  border: 0;
+}
+
+.agent-citations__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-citations__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-citations__hint,
+.agent-citations__meta,
+.agent-citations__description {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-citations__count-wrap {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-citations__count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 7px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-citations__chevron {
+  width: 16px;
+  height: 16px;
+}
+
+.agent-citations__chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.agent-citations__list {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+
+.agent-citations__item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 58px;
+  padding: 9px 10px;
+  text-align: left;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 12px;
+}
+
+.agent-citations__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 9px;
+}
+
+.agent-citations__copy {
+  display: grid;
+  flex: 1;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-citations__name,
+.agent-citations__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-citations__name {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentCommandSearch.vue b/apps/playground-weapp/src/components/agent-ui/AgentCommandSearch.vue
index 342c1a94..2fd5ba7c 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentCommandSearch.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentCommandSearch.vue
@@ -26,51 +26,192 @@ const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-command-search overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-xl', props.className),
-)
+const rootClass = computed(() => cn('agent-command-search', props.className))
 const visibleItems = computed(() => {
   const query = props.modelValue.trim().toLowerCase()
   return query
     ? props.items.filter(item => `${item.label} ${item.description ?? ''} ${item.group ?? ''}`.toLowerCase().includes(query))
     : props.items
 })
+const groupedItems = computed(() => {
+  const groups = new Map<string, AgentSearchItem[]>()
+  for (const item of visibleItems.value) {
+    const key = item.group || 'Commands'
+    const list = groups.get(key)
+    if (list) {
+      list.push(item)
+    }
+    else {
+      groups.set(key, [item])
+    }
+  }
+  return [...groups.entries()].map(([label, items]) => ({ label, items }))
+})
 
 function inputValue(event: Event) {
   const miniEvent = event as Event & { detail?: { value?: string } }
   const target = event.target as HTMLInputElement | null
   emit('update:modelValue', miniEvent.detail?.value ?? target?.value ?? '')
 }
+
+function selectItem(id: string) {
+  const item = props.items.find(entry => entry.id === id)
+  if (item) {
+    emit('select', item)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-[50px] items-center gap-2.5 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <image class="h-[18px] w-[18px] flex-none" :src="agentSearchIcon" mode="aspectFit" aria-hidden="true" />
-      <input class="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[var(--varo-agent-foreground)] outline-none" :value="modelValue" :placeholder="placeholder" @input="inputValue">
+    <view class="agent-command-search__field">
+      <image class="agent-command-search__icon" :src="agentSearchIcon" mode="aspectFit" aria-hidden="true" />
+      <input class="agent-command-search__input" :value="modelValue" :placeholder="placeholder" @input="inputValue">
     </view>
 
-    <scroll-view v-if="visibleItems.length" class="max-h-[280px] p-2" scroll-y :show-scrollbar="false">
-      <button v-for="item in visibleItems" :key="item.id" class="agent-native-button agent-native-button--block flex min-h-12 items-center justify-between gap-3 rounded-xl border-0 bg-[var(--varo-agent-surface)] px-2.5 py-2 text-left" hover-class="bg-[var(--varo-agent-surface-strong)]" :hover-start-time="20" :hover-stay-time="70" type="button" @click="emit('select', item)">
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-            {{ item.label }}
-          </text>
-          <text v-if="item.description" class="truncate text-[11px] text-[var(--varo-agent-muted)]">
-            {{ item.description }}
-          </text>
-        </view>
-        <text v-if="item.shortcut" class="rounded-md border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-1.5 py-1 font-mono text-[10px] text-[var(--varo-agent-muted)]">
-          {{ item.shortcut }}
+    <scroll-view v-if="groupedItems.length" class="agent-command-search__list" scroll-y :show-scrollbar="false">
+      <view v-for="group in groupedItems" :key="group.label">
+        <text class="agent-command-search__group">
+          {{ group.label }}
         </text>
-      </button>
+        <button
+          v-for="item in group.items"
+          :key="item.id"
+          class="agent-native-button agent-native-button--block agent-command-search__item"
+          hover-class="bg-[var(--varo-agent-surface-strong)]"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          type="button"
+          @click="selectItem(item.id)"
+        >
+          <view class="agent-command-search__copy">
+            <text class="agent-command-search__label">
+              {{ item.label }}
+            </text>
+            <text v-if="item.description" class="agent-command-search__description">
+              {{ item.description }}
+            </text>
+          </view>
+          <text v-if="item.shortcut" class="agent-command-search__shortcut">
+            {{ item.shortcut }}
+          </text>
+        </button>
+      </view>
     </scroll-view>
-    <view v-else class="grid min-h-24 place-items-center text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-command-search__empty">
       {{ emptyText }}
     </view>
   </view>
 </template>
 
+<style>
+.agent-command-search {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-command-search__field {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  min-height: 50px;
+  padding: 0 13px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-command-search__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.agent-command-search__input {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+}
+
+.agent-command-search__list {
+  max-height: 280px;
+  padding: 8px;
+}
+
+.agent-command-search__section {
+  display: grid;
+  gap: 2px;
+}
+
+.agent-command-search__group {
+  padding: 8px 8px 4px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-command-search__item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 6px 8px;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-command-search__item--hover {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-command-search__copy {
+  display: grid;
+  min-width: 0;
+}
+
+.agent-command-search__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-command-search__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--varo-agent-muted, #667085);
+  white-space: nowrap;
+}
+
+.agent-command-search__shortcut {
+  flex: none;
+  padding: 2px 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 6px;
+}
+
+.agent-command-search__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 96px;
+  font-size: 12px;
+  color: var(--varo-agent-muted, #667085);
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentComposerScope.vue b/apps/playground-weapp/src/components/agent-ui/AgentComposerScope.vue
index 74a2fd7a..51eb1bb8 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentComposerScope.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentComposerScope.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentContextSource, AgentContextSourceStatus } from './advanced-types'
 import { computed } from 'wevu'
+import { agentPlugIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -26,142 +27,301 @@ const clampedUsage = computed(() => {
   const usage = Number.isFinite(props.usagePercent) ? props.usagePercent : 0
   return Math.min(100, Math.max(0, usage))
 })
-const usageTransform = computed(() => `scaleX(${clampedUsage.value / 100})`)
+const usageWidth = computed(() => `${clampedUsage.value}%`)
 const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
+const headingHint = computed(() => {
+  if (!props.sources.length) { return '暂无可用来源' }
+  if (enabledCount.value === 0) { return '尚未授权任何来源' }
+  return `${enabledCount.value} 个来源已加入上下文`
+})
+const countLabel = computed(() => `${enabledCount.value}/${props.sources.length}`)
 const disabledActionClass = computed(() =>
-  props.disabled ? 'agent-composer-scope__action--disabled' : '',
+  props.disabled ? 'agent-workspace-card__action--disabled' : '',
 )
 const displaySources = computed(() => props.sources.map((source) => {
   const status: AgentContextSourceStatus = source.status ?? 'available'
   const statusLabel = status === 'available' ? '可用' : status === 'connecting' ? '连接中' : '不可用'
   return {
+    actionClass: source.enabled ? '' : 'agent-workspace-card__action--primary',
     canConnect: status === 'unavailable',
     canToggle: status === 'available',
-    enabledLabel: source.enabled ? '已启用' : '未启用',
+    connectLabel: `连接${source.label}`,
+    enabledAttr: String(source.enabled),
+    rowClass: `agent-workspace-card__row is-${status}${source.enabled ? ' is-enabled' : ''}`,
     source,
     status,
     statusLabel,
-    statusClass: `agent-composer-scope__status-dot--${status}`,
     toggleLabel: `${source.enabled ? '停用' : '启用'}${source.label}`,
+    toggleText: source.enabled ? '停用' : '启用',
   }
 }))
 </script>
 
 <template>
-  <view class="agent-composer-scope box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ enabledCount }} 个已启用
+  <view class="agent-composer-scope" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displaySources.length" class="grid gap-1 p-2">
+    <view v-if="displaySources.length" class="agent-workspace-card__body">
       <view
         v-for="item in displaySources"
         :key="item.source.id"
-        class="flex min-h-[58px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2"
+        :class="item.rowClass"
         :data-status="item.status"
+        :data-enabled="item.enabledAttr"
       >
-        <view class="agent-composer-scope__status-dot" :class="item.statusClass" aria-hidden="true" />
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <view class="flex min-w-0 items-center gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <image class="agent-workspace-card__icon" :src="agentPlugIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
               {{ item.source.label }}
             </text>
-            <text class="flex-none text-[10px] font-semibold text-[var(--varo-agent-text)]">
-              {{ item.enabledLabel }}
-            </text>
-            <text class="flex-none text-[10px] font-semibold text-[var(--varo-agent-muted)]">
+            <text class="agent-workspace-card__chip">
               {{ item.statusLabel }}
             </text>
           </view>
-          <text v-if="item.source.description || item.source.meta" class="truncate text-[11px] text-[var(--varo-agent-muted)]">
+          <text v-if="item.source.description || item.source.meta" class="agent-workspace-card__detail">
             {{ item.source.description || item.source.meta }}
           </text>
         </view>
         <button
           v-if="item.canToggle"
-          class="agent-native-button agent-composer-scope__action"
-          :class="disabledActionClass"
+          class="agent-native-button agent-workspace-card__action"
+          :class="[item.actionClass, disabledActionClass]"
           type="button"
           :disabled="disabled"
           :aria-label="item.toggleLabel"
           :aria-pressed="item.source.enabled"
-          hover-class="agent-composer-scope__action--pressed"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('toggle', item.source, !item.source.enabled)"
         >
-          {{ item.source.enabled ? '停用' : '启用' }}
+          {{ item.toggleText }}
         </button>
         <button
           v-else-if="item.canConnect"
-          class="agent-native-button agent-composer-scope__action agent-composer-scope__action--primary"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
           :class="disabledActionClass"
           type="button"
           :disabled="disabled"
-          :aria-label="`连接${item.source.label}`"
-          hover-class="agent-composer-scope__action--pressed"
+          :aria-label="item.connectLabel"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('connect', item.source)"
         >
           连接
         </button>
+        <text v-else class="agent-workspace-card__chip">
+          连接中
+        </text>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无来源</text>
     </view>
 
-    <view class="grid gap-2 border-t border-[var(--varo-agent-border)] px-[13px] py-3">
-      <view class="flex items-center justify-between gap-3">
-        <text class="text-[11px] font-semibold text-[var(--varo-agent-text)]">
+    <view class="agent-composer-scope__meter">
+      <view class="agent-workspace-card__row-main">
+        <text class="agent-workspace-card__hint">
           上下文使用
         </text>
-        <text class="text-[11px] font-bold tabular-nums text-[var(--varo-agent-primary)]">
+        <text class="agent-composer-scope__usage">
           {{ clampedUsage }}%
         </text>
       </view>
       <view
-        class="h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]"
+        class="agent-composer-scope__track"
         role="progressbar"
         aria-label="上下文使用量"
         :aria-valuemin="0"
         :aria-valuemax="100"
         :aria-valuenow="clampedUsage"
       >
-        <view class="agent-composer-scope__meter h-full w-full rounded-full bg-[var(--varo-agent-primary)]" :style="{ transform: usageTransform }" />
+        <view class="agent-composer-scope__fill" :style="`width:${usageWidth}`" />
       </view>
     </view>
   </view>
 </template>
 
 <style>
-.agent-composer-scope__status-dot {
+.agent-composer-scope {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-connecting,
+.agent-workspace-card__row.is-enabled {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row.is-failed,
+.agent-workspace-card__row.is-unavailable {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__row.is-available .agent-workspace-card__mark {
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-connecting .agent-workspace-card__mark {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row.is-unavailable .agent-workspace-card__mark {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
   flex: none;
-  width: 8px;
-  height: 8px;
-  background: var(--varo-agent-success);
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
   border-radius: 999px;
 }
 
-.agent-composer-scope__status-dot--connecting {
-  background: var(--varo-agent-primary);
-  box-shadow: 0 0 0 3px var(--varo-agent-primary-soft);
+.agent-workspace-card__row.is-available .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-workspace-card__row.is-connecting .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__row.is-unavailable .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
 }
 
-.agent-composer-scope__status-dot--unavailable {
-  background: var(--varo-agent-danger);
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
 }
 
-.agent-composer-scope__action {
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -169,41 +329,57 @@ const displaySources = computed(() => props.sources.map((source) => {
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-composer-scope__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-composer-scope__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-composer-scope__action--pressed {
-  background: var(--varo-agent-fill);
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
 }
 
-.agent-composer-scope__action--disabled {
+.agent-workspace-card__action--disabled {
   opacity: 0.45;
 }
 
 .agent-composer-scope__meter {
-  transform-origin: left center;
-  transition: transform 180ms ease-out;
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .agent-composer-scope__meter {
-    transition: none;
-  }
+.agent-composer-scope__usage {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__fill {
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
 }
 </style>
 
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentContextCard.vue b/apps/playground-weapp/src/components/agent-ui/AgentContextCard.vue
index f5ccb951..d324312a 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentContextCard.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentContextCard.vue
@@ -20,41 +20,63 @@ const emit = defineEmits<{
   open: [chunk: AgentContextChunk]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-context-card overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const rootClass = computed(() => cn('agent-context-card', props.className))
+const hint = computed(() => props.chunks.length ? '来自检索结果的上下文片段' : '暂无检索上下文')
+const displayChunks = computed(() =>
+  props.chunks.map((chunk, index) => ({
+    ...chunk,
+    indexLabel: String(index + 1).padStart(2, '0'),
+    heading: chunk.label || chunk.source || 'Context',
+  })),
 )
+
+function openChunk(id: string) {
+  const chunk = props.chunks.find(entry => entry.id === id)
+  if (chunk) {
+    emit('open', chunk)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ chunks.length }} chunks
+    <view class="agent-context-card__header">
+      <view class="agent-context-card__heading">
+        <text class="agent-context-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-context-card__hint">
+          {{ hint }}
+        </text>
+      </view>
+      <text class="agent-context-card__count">
+        {{ chunks.length }}
       </text>
     </view>
-
-    <view class="grid gap-2 p-2.5">
-      <view v-for="chunk in chunks" :key="chunk.id" class="overflow-hidden rounded-xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-        <view class="flex min-h-9 items-center justify-between gap-2 border-b border-[var(--varo-agent-border)] px-3">
-          <text class="truncate text-[12px] font-bold text-[var(--varo-agent-foreground)]">
-            {{ chunk.label || chunk.source || 'Context' }}
-          </text>
-          <text v-if="chunk.content.length" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
-            {{ chunk.content.length }} chars
+    <view class="agent-context-card__list">
+      <view v-for="chunk in displayChunks" :key="chunk.id" class="agent-context-card__chunk">
+        <view class="agent-context-card__chunk-head">
+          <text class="agent-context-card__index" aria-hidden="true">
+            {{ chunk.indexLabel }}
           </text>
+          <view class="agent-context-card__chunk-copy">
+            <text class="agent-context-card__name">
+              {{ chunk.heading }}
+            </text>
+            <text v-if="chunk.sourceType" class="agent-context-card__type">
+              {{ chunk.sourceType }}
+            </text>
+          </view>
         </view>
-        <text class="block px-3 py-2.5 text-[12px] leading-[18px] text-[var(--varo-agent-text)]">
+        <text class="agent-context-card__quote">
           {{ chunk.content }}
         </text>
-        <view class="flex min-h-9 items-center justify-between gap-2 border-t border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-3">
-          <text class="text-[10px] font-bold uppercase tracking-[.08em] text-[var(--varo-agent-muted)]">
-            {{ chunk.sourceType || 'Source' }}
+        <view class="agent-context-card__chunk-foot">
+          <text class="agent-context-card__source">
+            {{ chunk.source || 'Source' }}
           </text>
-          <button class="agent-native-button max-w-[65%] truncate border-0 bg-transparent p-0 text-[11px] font-semibold text-[var(--varo-agent-primary)]" type="button" @click="emit('open', chunk)">
-            {{ chunk.source || 'Open' }}
+          <button class="agent-native-button agent-context-card__open" type="button" @click="openChunk(chunk.id)">
+            打开
           </button>
         </view>
       </view>
@@ -62,6 +84,149 @@ const rootClass = computed(() =>
   </view>
 </template>
 
+<style>
+.agent-context-card {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-context-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-context-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-context-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-context-card__hint,
+.agent-context-card__count,
+.agent-context-card__source {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-context-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-context-card__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+}
+
+.agent-context-card__chunk {
+  overflow: hidden;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 12px;
+}
+
+.agent-context-card__chunk-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 10px 0;
+}
+
+.agent-context-card__index {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 9px;
+}
+
+.agent-context-card__chunk-copy {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-context-card__name,
+.agent-context-card__source {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-context-card__name {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-context-card__type {
+  flex: none;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-context-card__quote {
+  display: block;
+  padding: 8px 10px;
+  margin: 8px 10px 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-surface, #fff);
+  border-left: 2px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 0 10px 10px 0;
+}
+
+.agent-context-card__chunk-foot {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  padding: 0 10px 8px;
+}
+
+.agent-context-card__open {
+  flex: none;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: transparent;
+  border: 0;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentFineTune.vue b/apps/playground-weapp/src/components/agent-ui/AgentFineTune.vue
index c17a0626..7aecadad 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentFineTune.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentFineTune.vue
@@ -21,9 +21,8 @@ const emit = defineEmits<{
   'update:controls': [value: AgentFineTuneControl[]]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-fine-tune overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-fine-tune', props.className))
+const countLabel = computed(() => `${props.controls.length} 项`)
 const fields = computed(() =>
   props.controls.map((control, index) => ({
     control,
@@ -35,10 +34,8 @@ const fields = computed(() =>
         ...option,
         ariaChecked: selected,
         className: cn(
-          'agent-native-button flex min-h-10 items-center justify-between gap-2 rounded-[10px] border px-2.5 text-left text-[12px] font-semibold',
-          selected
-            ? 'border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]'
-            : 'border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] text-[var(--varo-agent-text)]',
+          'agent-native-button agent-fine-tune__choice',
+          selected && 'is-selected',
         ),
         selected,
       }
@@ -64,21 +61,28 @@ function update(index: number, value: string) {
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[10px] font-bold uppercase tracking-[.08em] text-[var(--varo-agent-muted)]">
-        Adjust
+    <view class="agent-fine-tune__header">
+      <view class="agent-fine-tune__heading">
+        <text class="agent-fine-tune__title">
+          {{ title }}
+        </text>
+        <text class="agent-fine-tune__hint">
+          调整生成参数后立即生效
+        </text>
+      </view>
+      <text class="agent-fine-tune__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view class="grid grid-cols-2 gap-2.5 p-3 max-[600px]:grid-cols-1">
-      <view v-for="field in fields" :key="field.control.label" class="grid gap-1.5 text-[10px] font-semibold text-[var(--varo-agent-text)]">
-        <text>{{ field.control.label }}</text>
+    <view class="agent-fine-tune__grid">
+      <view v-for="field in fields" :key="field.control.label" class="agent-fine-tune__field">
+        <text class="agent-fine-tune__label">
+          {{ field.control.label }}
+        </text>
         <view
           v-if="field.control.type === 'select'"
-          class="grid grid-cols-2 gap-1.5"
+          class="agent-fine-tune__choices"
           role="radiogroup"
           :aria-label="field.control.label"
         >
@@ -95,14 +99,14 @@ function update(index: number, value: string) {
             @click="update(field.index, option.value)"
           >
             <text>{{ option.label }}</text>
-            <text v-if="option.selected" class="text-[12px] font-black" aria-hidden="true">
+            <text v-if="option.selected" class="agent-fine-tune__choice-check" aria-hidden="true">
               ✓
             </text>
           </button>
         </view>
         <input
           v-else
-          class="box-border min-h-10 w-full rounded-[10px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[12px] text-[var(--varo-agent-foreground)]"
+          class="agent-fine-tune__input"
           :aria-label="field.control.label"
           :max="field.control.max"
           :min="field.control.min"
@@ -114,14 +118,143 @@ function update(index: number, value: string) {
       </view>
     </view>
 
-    <view class="flex min-h-12 items-center justify-end border-t border-[var(--varo-agent-border)] px-3">
-      <button class="agent-native-button min-h-9 rounded-[10px] border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]" type="button" @click="emit('apply', controls)">
+    <view class="agent-fine-tune__footer">
+      <button class="agent-native-button agent-fine-tune__apply" type="button" @click="emit('apply', controls)">
         Apply changes
       </button>
     </view>
   </view>
 </template>
 
+<style>
+.agent-fine-tune {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-fine-tune__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-fine-tune__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-fine-tune__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-fine-tune__hint,
+.agent-fine-tune__count,
+.agent-fine-tune__label {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-fine-tune__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-fine-tune__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 12px;
+}
+
+.agent-fine-tune__field {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.agent-fine-tune__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 10px;
+  font-size: 12px;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 10px;
+}
+
+.agent-fine-tune__choices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.agent-fine-tune__choice {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 11px;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--varo-agent-text, #475569);
+  text-align: left;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 10px;
+}
+
+.agent-fine-tune__choice.is-selected {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-fine-tune__choice-check {
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.agent-fine-tune__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-fine-tune__apply {
+  min-height: 34px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary-foreground, #fff);
+  background: var(--varo-agent-primary, #0f766e);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 10px;
+}
+
+@media (max-width: 600px) {
+  .agent-fine-tune__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentFlowchart.vue b/apps/playground-weapp/src/components/agent-ui/AgentFlowchart.vue
index 587a3130..ea83f516 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentFlowchart.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentFlowchart.vue
@@ -22,61 +22,103 @@ const emit = defineEmits<{
   select: [node: AgentFlowNode]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-flowchart overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const rootClass = computed(() => cn('agent-flowchart', props.className))
+const countLabel = computed(() => `${props.nodes.length} 个步骤`)
+const displayNodes = computed(() =>
+  props.nodes.map((node, index) => ({
+    ...node,
+    indexLabel: String(index + 1).padStart(2, '0'),
+    typeLabel: node.type === 'trigger'
+      ? '触发'
+      : node.type === 'condition'
+        ? '条件'
+        : node.type === 'action'
+          ? '动作'
+          : '结果',
+    statusLabel: node.status === 'completed'
+      ? 'Completed'
+      : node.status === 'running'
+        ? 'Running'
+        : node.status === 'failed'
+          ? 'Failed'
+          : 'Waiting',
+  })),
 )
 
 function nodeClass(type: AgentFlowNode['type']) {
-  return cn(
-    'agent-native-button--block agent-flowchart__node grid min-h-[72px] gap-1 rounded-[14px] border bg-[var(--varo-agent-surface)] p-3 text-left shadow-sm',
-    type === 'trigger' && 'border-[var(--varo-agent-border-strong)]',
-    type === 'condition' && 'border-[var(--varo-agent-warning)]',
-    type === 'action' && 'border-[var(--varo-agent-primary)]',
-    type === 'result' && 'border-[var(--varo-agent-success)]',
-  )
+  return cn('agent-native-button agent-native-button--block agent-flowchart__node', `is-${type}`)
 }
 
 function statusClass(status?: AgentAdvancedStatus) {
   return cn(
-    'h-2 w-2 rounded-full',
-    status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    status === 'running' && 'bg-[var(--varo-agent-primary)]',
-    status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    (!status || status === 'waiting') && 'bg-[var(--varo-agent-border-strong)]',
+    'agent-flowchart__status-dot',
+    status === 'completed' && 'is-completed',
+    status === 'running' && 'is-running',
+    status === 'failed' && 'is-failed',
   )
 }
+
+function selectNode(id: string) {
+  const node = props.nodes.find(entry => entry.id === id)
+  if (node) {
+    emit('select', node)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <button class="agent-native-button inline-flex min-h-9 items-center gap-1.5 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[11px] font-bold text-[var(--varo-agent-text)]" type="button" @click="emit('add', undefined)">
-        <image class="h-3.5 w-3.5" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
-        Step
+    <view class="agent-flowchart__header">
+      <view class="agent-flowchart__heading">
+        <text class="agent-flowchart__title">
+          {{ title }}
+        </text>
+        <text class="agent-flowchart__count">
+          {{ countLabel }}
+        </text>
+      </view>
+      <button class="agent-native-button agent-flowchart__add" type="button" @click="emit('add', undefined)">
+        <image class="agent-flowchart__add-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+        <text>Step</text>
       </button>
     </view>
 
-    <view class="grid p-3">
-      <template v-for="(node, index) in nodes" :key="node.id">
-        <button class="agent-native-button" :class="nodeClass(node.type)" type="button" :data-type="node.type" @click="emit('select', node)">
-          <view class="flex items-center justify-between gap-2">
-            <text class="text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
-              {{ node.type }}
+    <view class="agent-flowchart__canvas">
+      <template v-for="(node, index) in displayNodes" :key="node.id">
+        <button
+          :class="nodeClass(node.type)"
+          type="button"
+          :data-type="node.type"
+          :data-status="node.status || 'waiting'"
+          @click="selectNode(node.id)"
+        >
+          <view class="agent-flowchart__node-head">
+            <text class="agent-flowchart__index" aria-hidden="true">
+              {{ node.indexLabel }}
             </text>
-            <text :class="statusClass(node.status)" aria-hidden="true" />
+            <text class="agent-flowchart__type">
+              {{ node.typeLabel }}
+            </text>
+            <view v-if="node.status" class="agent-advanced__status" :data-status="node.status">
+              <view :class="statusClass(node.status)" aria-hidden="true" />
+              <text>{{ node.statusLabel }}</text>
+            </view>
           </view>
-          <text class="text-[12px] font-bold text-[var(--varo-agent-foreground)]">
+          <text class="agent-flowchart__name">
             {{ node.label }}
           </text>
-          <text v-if="node.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="node.detail" class="agent-flowchart__detail">
             {{ node.detail }}
           </text>
         </button>
-        <button v-if="index < nodes.length - 1" class="agent-native-button agent-flowchart__connector mx-auto grid place-items-center border-0 bg-transparent" type="button" :aria-label="`Add after ${node.label}`" @click="emit('add', node.id)">
-          <image class="h-3.5 w-3.5" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+        <button
+          v-if="index < displayNodes.length - 1"
+          class="agent-native-button agent-flowchart__connector"
+          type="button"
+          :aria-label="`Add after ${node.label}`"
+          @click="emit('add', node.id)"
+        >
+          <image class="agent-flowchart__add-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
         </button>
       </template>
     </view>
@@ -84,8 +126,166 @@ function statusClass(status?: AgentAdvancedStatus) {
 </template>
 
 <style>
+.agent-flowchart {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 18px;
+}
+
+.agent-flowchart__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-flowchart__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-flowchart__title {
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-flowchart__count,
+.agent-flowchart__detail {
+  font-size: 11px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-flowchart__add {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 9px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-flowchart__add-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.agent-flowchart__canvas {
+  display: grid;
+  justify-items: center;
+  padding: 24px;
+}
+
+.agent-flowchart__node {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  max-width: 320px;
+  padding: 12px 14px;
+  text-align: left;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-flowchart__node.is-trigger {
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-flowchart__node.is-condition {
+  border-color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-flowchart__node.is-action {
+  border-color: var(--varo-agent-source-violet, #7c3aed);
+}
+
+.agent-flowchart__node.is-result {
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-flowchart__node-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-flowchart__index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 7px;
+}
+
+.agent-flowchart__type {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-advanced__status {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-flowchart__status-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--varo-agent-border-strong, #cbd5e1);
+  border-radius: 999px;
+}
+
+.agent-flowchart__status-dot.is-completed {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-flowchart__status-dot.is-running {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-flowchart__status-dot.is-failed {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-flowchart__name {
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+}
+
 .agent-flowchart__connector {
-  background: linear-gradient(#cbd5e1, #cbd5e1) center / 1px 100% no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 36px;
+  background: linear-gradient(var(--varo-agent-border, #dbe3ea), var(--varo-agent-border, #dbe3ea)) center / 1px 100%
+    no-repeat;
+  border: 0;
 }
 </style>
 
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentInsightCard.vue b/apps/playground-weapp/src/components/agent-ui/AgentInsightCard.vue
index 69faa179..14060f7a 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentInsightCard.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentInsightCard.vue
@@ -27,66 +27,228 @@ const emit = defineEmits<{
 const active = computed(() =>
   props.insights[Math.min(Math.max(0, props.current), Math.max(0, props.insights.length - 1))],
 )
+const activeTone = computed(() => active.value?.tone || 'default')
+const countLabel = computed(() => `${props.insights.length ? props.current + 1 : 0}/${props.insights.length}`)
 const rootClass = computed(() =>
-  cn(
-    'agent-insight-card overflow-hidden rounded-2xl border bg-[var(--varo-agent-surface)] shadow-sm',
-    active.value?.tone === 'success' && 'border-[var(--varo-agent-success)]',
-    active.value?.tone === 'warning' && 'border-[var(--varo-agent-warning)]',
-    active.value?.tone === 'danger' && 'border-[var(--varo-agent-danger)]',
-    (!active.value?.tone || active.value.tone === 'default') && 'border-[var(--varo-agent-border)]',
-    props.className,
-  ),
+  cn('agent-insight-card', `is-${activeTone.value}`, props.className),
 )
-const activeTone = computed(() => active.value?.tone || 'default')
 
 function move(delta: number) {
   if (!props.insights.length) { return }
   emit('update:current', (props.current + delta + props.insights.length) % props.insights.length)
 }
+
+function emitAction() {
+  if (active.value) {
+    emit('action', active.value)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass" :data-tone="activeTone">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ insights.length ? current + 1 : 0 }}/{{ insights.length }}
+    <view class="agent-insight-card__header">
+      <view class="agent-insight-card__heading">
+        <text class="agent-insight-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-insight-card__label">
+          {{ active?.label || '运行指标' }}
+        </text>
+      </view>
+      <text class="agent-insight-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="active" class="relative grid min-h-32 place-content-center gap-2 px-5 py-5 text-center">
-      <text v-if="active.label" class="text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
-        {{ active.label }}
+    <view v-if="active" class="agent-insight-card__body">
+      <text v-if="active.value" class="agent-insight-card__value">
+        {{ active.value }}
       </text>
-      <text class="max-w-[520px] text-[15px] font-bold leading-6 text-[var(--varo-agent-foreground)]">
+      <text class="agent-insight-card__copy">
         {{ active.description }}
       </text>
-      <text v-if="active.value" class="text-2xl font-black tabular-nums text-[var(--varo-agent-primary)]">
-        {{ active.value }}
-      </text>
     </view>
-    <view v-else class="grid min-h-32 place-items-center text-[12px] text-[var(--varo-agent-muted)]">
-      No insights
+    <view v-else class="agent-insight-card__empty">
+      暂无洞察
     </view>
 
-    <view class="flex min-h-12 items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-3">
-      <view class="flex gap-1.5">
-        <button class="agent-native-button agent-insight-card__nav grid place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Previous insight" @click="move(-1)">
-          <image class="h-3.5 w-3.5 rotate-90" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+    <view class="agent-insight-card__footer">
+      <view class="agent-insight-card__nav">
+        <button class="agent-native-button agent-insight-card__nav-btn" type="button" aria-label="Previous insight" @click="move(-1)">
+          <image class="agent-insight-card__nav-icon is-prev" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
         </button>
-        <button class="agent-native-button agent-insight-card__nav grid place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Next insight" @click="move(1)">
-          <image class="h-3.5 w-3.5 -rotate-90" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+        <button class="agent-native-button agent-insight-card__nav-btn" type="button" aria-label="Next insight" @click="move(1)">
+          <image class="agent-insight-card__nav-icon is-next" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
         </button>
       </view>
-      <button v-if="active?.action" class="agent-native-button min-h-8 rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]" type="button" @click="emit('action', active)">
+      <button v-if="active?.action" class="agent-native-button agent-insight-card__action" type="button" @click="emitAction">
         {{ active.action }}
       </button>
     </view>
   </view>
 </template>
 
+<style>
+.agent-insight-card {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-insight-card.is-success {
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-insight-card.is-warning {
+  border-color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-insight-card.is-danger {
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-insight-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-insight-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-insight-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-insight-card__label,
+.agent-insight-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-insight-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-insight-card__body {
+  display: grid;
+  gap: 8px;
+  min-height: 132px;
+  padding: 18px 16px 16px;
+}
+
+.agent-insight-card.is-success .agent-insight-card__body {
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-insight-card.is-warning .agent-insight-card__body {
+  background: var(--varo-agent-warning-soft, #fffbeb);
+}
+
+.agent-insight-card.is-danger .agent-insight-card__body {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-insight-card__value {
+  font-size: 32px;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-insight-card.is-success .agent-insight-card__value {
+  color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-insight-card.is-warning .agent-insight-card__value {
+  color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-insight-card.is-danger .agent-insight-card__value {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-insight-card__copy,
+.agent-insight-card__empty {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-insight-card__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 132px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-insight-card__footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-insight-card__nav {
+  display: flex;
+  gap: 6px;
+}
+
+.agent-insight-card__nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-insight-card__nav-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-insight-card__nav-icon.is-prev {
+  transform: rotate(90deg);
+}
+
+.agent-insight-card__nav-icon.is-next {
+  transform: rotate(-90deg);
+}
+
+.agent-insight-card__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary-foreground, #fff);
+  background: var(--varo-agent-primary, #0f766e);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 9px;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentMarkdownNode.vue b/apps/playground-weapp/src/components/agent-ui/AgentMarkdownNode.vue
index 41c6d960..a5d21f59 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentMarkdownNode.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentMarkdownNode.vue
@@ -3,6 +3,10 @@ import type { AgentMarkdownViewNode } from '@varo-ui/ai'
 import { toAgentRichTextNodes } from '@varo-ui/ai'
 import { computed } from 'wevu'
 
+defineOptions({
+  options: { virtualHost: true },
+})
+
 const props = defineProps<{
   node: AgentMarkdownViewNode
 }>()
@@ -72,11 +76,11 @@ function headingClass(level?: number) {
     </scroll-view>
   </view>
 
-  <text v-else-if="node.kind === 'inline-code' || node.kind === 'math-inline'" class="rounded-md border border-current/25 bg-current/10 px-1 py-0.5 font-mono text-[12px] text-inherit">
+  <text v-else-if="node.kind === 'inline-code' || node.kind === 'math-inline'" class="rounded-md border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-1 py-0.5 font-mono text-[12px] text-inherit">
     {{ node.text }}
   </text>
 
-  <text v-else-if="node.kind === 'link'" class="font-semibold text-inherit underline" role="link" @click="node.href && emit('link', node.href)">
+  <text v-else-if="node.kind === 'link'" class="font-semibold text-inherit underline" role="link" tabindex="0" @click="node.href && emit('link', node.href)">
     <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
     <text v-if="!hasChildren">
       {{ node.text }}
@@ -86,7 +90,7 @@ function headingClass(level?: number) {
   <image v-else-if="node.kind === 'image' && node.href" class="my-2 h-48 w-full rounded-xl bg-[var(--varo-agent-fill)]" :src="node.href" :alt="node.alt" mode="aspectFit" />
   <view v-else-if="node.kind === 'thematic-break'" class="my-3 h-px bg-[var(--varo-agent-border)]" />
 
-  <view v-else-if="node.kind === 'blockquote'" class="my-2 border-l-[3px] border-current/50 pl-3 text-inherit">
+  <view v-else-if="node.kind === 'blockquote'" class="my-2 border-l-[3px] border-[var(--varo-agent-border-strong)] pl-3 text-inherit">
     <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
   </view>
 
@@ -100,7 +104,7 @@ function headingClass(level?: number) {
     <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
   </view>
 
-  <view v-else-if="node.kind === 'table-cell'" class="min-w-32 flex-1 border-r border-current/20 px-2.5 py-2 text-xs last:border-0" :class="[node.header && 'bg-current/5 font-bold text-inherit']">
+  <view v-else-if="node.kind === 'table-cell'" class="min-w-32 flex-1 border-r border-[var(--varo-agent-border)] px-2.5 py-2 text-xs last:border-0" :class="[node.header && 'bg-[var(--varo-agent-surface-strong)] font-bold text-inherit']">
     <rich-text v-if="richTextNodes" :nodes="richTextNodes" />
     <template v-else>
       <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
@@ -152,6 +156,9 @@ function headingClass(level?: number) {
 <json lang="jsonc">
 {
   "component": true,
-  "styleIsolation": "apply-shared"
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "agent-markdown-node": "./AgentMarkdownNode"
+  }
 }
 </json>
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentRetrievalProgress.vue b/apps/playground-weapp/src/components/agent-ui/AgentRetrievalProgress.vue
index 793f8ff2..132e6fdb 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentRetrievalProgress.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentRetrievalProgress.vue
@@ -26,127 +26,302 @@ function statusLabel(status: AgentRetrievalStatus) {
 }
 
 const settledCount = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
-const displayItems = computed(() => props.items.map(item => ({
+const currentItem = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentItem.value?.status === 'failed') { return `阻塞于 ${currentItem.value.title}` }
+  if (currentItem.value) { return `正在读取 ${currentItem.value.title}` }
+  if (props.items.length && settledCount.value === props.items.length) { return '检索已完成' }
+  return '等待检索'
+})
+const countLabel = computed(() => `${settledCount.value}/${props.items.length}`)
+const displayItems = computed(() => props.items.map((item, index) => ({
   canRetry: item.status === 'failed' && Boolean(item.retryable),
+  indexLabel: String(index + 1).padStart(2, '0'),
   item,
-  statusIconClass: `agent-retrieval__status-icon--${item.status}`,
+  retryLabel: `重试${item.title}`,
+  rowClass: `agent-workspace-card__row is-${item.status}`,
+  showPulse: item.status === 'reading',
   statusLabel: statusLabel(item.status),
 })))
 </script>
 
 <template>
-  <view class="agent-retrieval box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" aria-live="polite" aria-atomic="false">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ settledCount }}/{{ items.length }} 已处理
+  <view class="agent-retrieval" aria-live="polite" aria-atomic="false">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displayItems.length" class="grid gap-1 p-2">
+    <view v-if="displayItems.length" class="agent-workspace-card__body">
       <view
         v-for="entry in displayItems"
         :key="entry.item.id"
-        class="flex min-h-[56px] items-center gap-2.5 rounded-xl px-2.5 py-2"
+        :class="entry.rowClass"
         :data-status="entry.item.status"
       >
-        <view class="agent-retrieval__status-icon" :class="entry.statusIconClass" aria-hidden="true" />
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-            {{ entry.item.title }}
-          </text>
-          <text v-if="entry.item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-            {{ entry.item.detail }}
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <view v-if="entry.showPulse" class="agent-retrieval__pulse" />
+          <text v-else>
+            {{ entry.indexLabel }}
           </text>
         </view>
-        <view class="grid flex-none justify-items-end gap-0">
-          <text class="text-[10px] font-semibold text-[var(--varo-agent-text)]">
-            {{ entry.statusLabel }}
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
+              {{ entry.item.title }}
+            </text>
+            <text class="agent-workspace-card__chip">
+              {{ entry.statusLabel }}
+            </text>
+          </view>
+          <text v-if="entry.item.detail" class="agent-workspace-card__detail">
+            {{ entry.item.detail }}
           </text>
-          <button
-            v-if="entry.canRetry"
-            class="agent-native-button agent-retrieval__action"
-            type="button"
-            :aria-label="`重试${entry.item.title}`"
-            hover-class="agent-retrieval__action--pressed"
-            :hover-start-time="20"
-            :hover-stay-time="70"
-            @click="emit('retry', entry.item)"
-          >
-            重试
-          </button>
         </view>
+        <button
+          v-if="entry.canRetry"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+          type="button"
+          :aria-label="entry.retryLabel"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('retry', entry.item)"
+        >
+          重试
+        </button>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无检索项</text>
     </view>
   </view>
 </template>
 
 <style>
-.agent-retrieval__status-icon {
-  box-sizing: border-box;
+.agent-retrieval {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-reading {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-reading .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-retrieval__pulse {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: agent-retrieval-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
   flex: none;
-  width: 12px;
-  height: 12px;
-  background: var(--varo-agent-surface);
-  border: 2px solid var(--varo-agent-border-strong);
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
   border-radius: 999px;
 }
 
-.agent-retrieval__status-icon--reading {
-  background: var(--varo-agent-primary);
-  border-color: var(--varo-agent-primary);
-  box-shadow: 0 0 0 3px var(--varo-agent-primary-soft);
+.agent-workspace-card__row.is-read .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
 }
 
-.agent-retrieval__status-icon--read {
-  background: var(--varo-agent-success);
-  border-color: var(--varo-agent-success);
+.agent-workspace-card__row.is-reading .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
 }
 
-.agent-retrieval__status-icon--skipped {
-  height: 4px;
-  background: var(--varo-agent-border-strong);
-  border: 0;
-  border-radius: 2px;
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-skipped .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
 }
 
-.agent-retrieval__status-icon--failed {
-  background: var(--varo-agent-danger);
-  border-color: var(--varo-agent-danger);
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
 }
 
-.agent-retrieval__action {
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
-  height: 24px;
-  padding: 0 4px;
+  height: 36px;
+  padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-primary);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-retrieval__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
-  inset: -10px -4px;
+  inset: -4px;
   content: '';
 }
 
-.agent-retrieval__action--pressed {
-  background: var(--varo-agent-primary-soft);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+@keyframes agent-retrieval-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-retrieval__pulse {
+    animation: none;
+  }
 }
 </style>
 
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentSelectionActions.vue b/apps/playground-weapp/src/components/agent-ui/AgentSelectionActions.vue
index 252d1441..b5bf3669 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentSelectionActions.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentSelectionActions.vue
@@ -19,26 +19,72 @@ const emit = defineEmits<{
   select: [payload: { action: AgentSelectionAction, text: string }]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-selection-actions overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-selection-actions', props.className))
+
+function selectAction(id: string) {
+  const action = props.actions.find(entry => entry.id === id)
+  if (action) {
+    emit('select', { action, text: props.text })
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-3.5 py-3">
-      <text class="block border-l-[3px] border-[var(--varo-agent-primary)] pl-3 text-[12px] leading-5 text-[var(--varo-agent-text)]">
-        {{ text }}
-      </text>
-    </view>
-    <view class="flex flex-wrap gap-2 p-2.5">
-      <button v-for="action in actions" :key="action.id" class="agent-native-button min-h-8 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-3 text-[11px] font-bold text-[var(--varo-agent-text)]" hover-class="border-[var(--varo-agent-primary)] text-[var(--varo-agent-primary)]" :hover-start-time="20" :hover-stay-time="70" type="button" @click="emit('select', { action, text })">
+    <text class="agent-selection-actions__quote">
+      {{ text }}
+    </text>
+    <view class="agent-selection-actions__toolbar">
+      <button
+        v-for="action in actions"
+        :key="action.id"
+        class="agent-native-button agent-selection-actions__action"
+        type="button"
+        @click="selectAction(action.id)"
+      >
         {{ action.label }}
       </button>
     </view>
   </view>
 </template>
 
+<style>
+.agent-selection-actions {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-selection-actions__quote {
+  display: block;
+  padding: 14px 16px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border-left: 3px solid var(--varo-agent-primary, #0f766e);
+}
+
+.agent-selection-actions__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  padding: 10px 12px 12px;
+}
+
+.agent-selection-actions__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentSidebar.vue b/apps/playground-weapp/src/components/agent-ui/AgentSidebar.vue
index e662e5aa..937c8ea2 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentSidebar.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentSidebar.vue
@@ -3,7 +3,7 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentSidebarGroup, AgentSidebarItem } from './advanced-types'
 import { computed } from 'wevu'
 import { cn } from '../../lib/cn'
-import { agentChevronDownIcon } from './agent-icons'
+import { agentChatIcon, agentChevronDownIcon, agentPlusIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -29,21 +29,14 @@ const emit = defineEmits<{
 }>()
 
 const rootClass = computed(() =>
-  cn(
-    'agent-sidebar overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm transition-[width] duration-200',
-    props.collapsed ? 'w-16' : 'w-60',
-    props.className,
-  ),
+  cn('agent-sidebar', props.collapsed && 'is-collapsed', props.className),
 )
-const headerTitle = computed(() => props.collapsed ? 'AI' : props.title)
 const toggleIconClass = computed(() => props.collapsed ? '-rotate-90' : 'rotate-90')
 
 function itemClass(item: AgentSidebarItem) {
-  const active = item.id === props.activeId
   return cn(
-    'flex min-h-10 items-center gap-2 rounded-xl border-0 px-2 text-left',
-    active && 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-primary)]',
-    !active && 'bg-transparent text-[var(--varo-agent-text)]',
+    'agent-native-button agent-native-button--block agent-sidebar__item',
+    item.id === props.activeId && 'is-active',
   )
 }
 
@@ -55,46 +48,51 @@ function select(item: AgentSidebarItem) {
 
 <template>
   <view :class="rootClass" :data-collapsed="String(collapsed)">
-    <view class="flex min-h-12 items-center justify-between gap-2 border-b border-[var(--varo-agent-border)] px-3">
-      <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ headerTitle }}
-      </text>
-      <button class="agent-native-button agent-sidebar__toggle grid flex-none place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Toggle sidebar" @click="emit('update:collapsed', !collapsed)">
-        <image class="h-3.5 w-3.5" :class="toggleIconClass" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+    <view class="agent-sidebar__header">
+      <view class="agent-sidebar__heading">
+        <view class="agent-sidebar__brand" aria-hidden="true">
+          <image class="agent-sidebar__icon" :src="agentChatIcon" mode="aspectFit" />
+        </view>
+        <text v-if="!collapsed" class="agent-sidebar__title">
+          {{ title }}
+        </text>
+      </view>
+      <button class="agent-native-button agent-sidebar__toggle" type="button" aria-label="Toggle sidebar" @click="emit('update:collapsed', !collapsed)">
+        <image class="agent-sidebar__toggle-icon" :class="toggleIconClass" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </button>
     </view>
 
-    <button v-if="!collapsed" class="agent-native-button agent-sidebar__create mx-2.5 mt-2.5 flex min-h-9 items-center justify-center rounded-xl border border-[var(--varo-agent-border-strong)] bg-[var(--varo-agent-success-soft)] text-[12px] font-bold text-[var(--varo-agent-primary)]" type="button" @click="emit('create')">
-      + New chat
+    <button v-if="!collapsed" class="agent-native-button agent-sidebar__create" type="button" @click="emit('create')">
+      <image class="agent-sidebar__create-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+      <text>New chat</text>
     </button>
 
-    <view class="grid gap-3 p-2.5" role="navigation">
-      <view v-for="group in groups" :key="group.id" class="grid gap-1">
-        <text v-if="!collapsed" class="px-2 text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
+    <view class="agent-sidebar__nav" role="navigation">
+      <view v-for="group in groups" :key="group.id" class="agent-sidebar__group">
+        <text v-if="!collapsed" class="agent-sidebar__group-label">
           {{ group.label }}
         </text>
         <button
           v-for="item in group.items"
           :key="item.id"
           :class="itemClass(item)"
-          class="agent-native-button agent-native-button--block"
           type="button"
           :title="item.label"
           :data-active="String(item.id === activeId)"
           @click="select(item)"
         >
-          <text class="grid h-7 w-7 flex-none place-items-center rounded-lg bg-[var(--varo-agent-fill)] text-[10px] font-bold text-[var(--varo-agent-text)]" aria-hidden="true">
-            {{ item.label.charAt(0).toUpperCase() }}
-          </text>
-          <view v-if="!collapsed" class="grid min-w-0 flex-1 gap-px">
-            <text class="truncate text-[12px] font-semibold">
+          <view class="agent-sidebar__mark" aria-hidden="true">
+            <image class="agent-sidebar__icon" :src="agentChatIcon" mode="aspectFit" />
+          </view>
+          <view v-if="!collapsed" class="agent-sidebar__copy">
+            <text class="agent-sidebar__name">
               {{ item.label }}
             </text>
-            <text v-if="item.meta" class="truncate text-[10px] text-[var(--varo-agent-muted)]">
+            <text v-if="item.meta" class="agent-sidebar__meta">
               {{ item.meta }}
             </text>
           </view>
-          <text v-if="!collapsed && item.badge !== undefined" class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[var(--varo-agent-surface)] px-1 text-[10px] leading-none tabular-nums text-[var(--varo-agent-text)]">
+          <text v-if="!collapsed && item.badge !== undefined" class="agent-sidebar__badge">
             {{ item.badge }}
           </text>
         </button>
@@ -106,6 +104,168 @@ function select(item: AgentSidebarItem) {
 </template>
 
 <style>
+.agent-sidebar {
+  display: grid;
+  align-content: start;
+  width: 248px;
+  min-height: 360px;
+  overflow: hidden;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 18px;
+}
+
+.agent-sidebar.is-collapsed {
+  width: 64px;
+}
+
+.agent-sidebar__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  padding: 0 12px;
+  background: var(--varo-agent-surface, #fff);
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-sidebar__heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-sidebar__brand,
+.agent-sidebar__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 8px;
+}
+
+.agent-sidebar__icon,
+.agent-sidebar__create-icon,
+.agent-sidebar__toggle-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.agent-sidebar__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-sidebar__create {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  margin: 10px 10px 5px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 10px;
+}
+
+.agent-sidebar__nav {
+  display: grid;
+  gap: 10px;
+  padding: 7px;
+}
+
+.agent-sidebar__group {
+  display: grid;
+  gap: 3px;
+}
+
+.agent-sidebar__group-label {
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-sidebar__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 7px;
+  color: var(--varo-agent-muted, #667085);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-sidebar__item.is-active {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+}
+
+.agent-sidebar__copy {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-sidebar__name,
+.agent-sidebar__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-sidebar__name {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.agent-sidebar__meta {
+  font-size: 10px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-sidebar__badge {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .agent-sidebar {
     transition: none;
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentSourceReceipt.vue b/apps/playground-weapp/src/components/agent-ui/AgentSourceReceipt.vue
index dd501adf..ea6b5f29 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentSourceReceipt.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentSourceReceipt.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentSourceReceiptItem } from './advanced-types'
 import { computed } from 'wevu'
+import { agentReceiptIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -20,65 +21,78 @@ const emit = defineEmits<{
   open: [item: AgentSourceReceiptItem]
 }>()
 
+const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
+const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+const headingHint = computed(() => {
+  if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+  if (props.summary) { return props.summary }
+  if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+  return '回答完成后核对来源'
+})
+const countLabel = computed(() => `${readCount.value}/${props.items.length}`)
 const displayItems = computed(() => props.items.map((item) => {
   const statusLabel = item.status === 'read' ? '已读取' : item.status === 'skipped' ? '已跳过' : '读取失败'
   return {
     canConnect: item.status === 'failed',
     canOpen: item.status === 'read',
+    connectLabel: `连接${item.label}`,
+    countLabel: item.itemCount === undefined ? '' : `${item.itemCount} 项`,
     item,
-    statusIconClass: `agent-source-receipt__status-icon--${item.status}`,
+    openLabel: `查看${item.label}`,
+    rowClass: `agent-workspace-card__row is-${item.status}`,
     statusLabel,
   }
 }))
-const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
 </script>
 
 <template>
-  <view class="agent-source-receipt box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-    <view class="grid min-h-12 gap-0.5 border-b border-[var(--varo-agent-border)] px-[13px] py-2.5">
-      <view class="flex items-center justify-between gap-3">
-        <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view class="agent-source-receipt" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
           {{ title }}
         </text>
-        <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-          {{ readCount }}/{{ items.length }} 已读取
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
         </text>
       </view>
-      <text v-if="summary" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-        {{ summary }}
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displayItems.length" class="grid gap-1 p-2">
+    <view v-if="displayItems.length" class="agent-workspace-card__body">
       <view
         v-for="entry in displayItems"
         :key="entry.item.id"
-        class="flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2"
+        :class="entry.rowClass"
         :data-status="entry.item.status"
       >
-        <view class="agent-source-receipt__status-icon" :class="entry.statusIconClass" aria-hidden="true" />
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <view class="flex min-w-0 items-baseline gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <image class="agent-workspace-card__icon" :src="agentReceiptIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
               {{ entry.item.label }}
             </text>
-            <text v-if="entry.item.itemCount !== undefined" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
-              {{ entry.item.itemCount }} 项
+            <text v-if="entry.countLabel" class="agent-workspace-card__meta">
+              {{ entry.countLabel }}
             </text>
           </view>
-          <text v-if="entry.item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="entry.item.detail" class="agent-workspace-card__detail">
             {{ entry.item.detail }}
           </text>
-          <text class="text-[10px] font-semibold text-[var(--varo-agent-text)]">
+          <text class="agent-workspace-card__chip">
             {{ entry.statusLabel }}
           </text>
         </view>
         <button
           v-if="entry.canOpen"
-          class="agent-native-button agent-source-receipt__action"
+          class="agent-native-button agent-workspace-card__action"
           type="button"
-          :aria-label="`查看${entry.item.label}`"
-          hover-class="agent-source-receipt__action--pressed"
+          :aria-label="entry.openLabel"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('open', entry.item)"
@@ -87,10 +101,10 @@ const readCount = computed(() => props.items.filter(item => item.status === 'rea
         </button>
         <button
           v-else-if="entry.canConnect"
-          class="agent-native-button agent-source-receipt__action agent-source-receipt__action--primary"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
           type="button"
-          :aria-label="`连接${entry.item.label}`"
-          hover-class="agent-source-receipt__action--pressed"
+          :aria-label="entry.connectLabel"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('connect', entry.item)"
@@ -99,39 +113,167 @@ const readCount = computed(() => props.items.filter(item => item.status === 'rea
         </button>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无来源回执</text>
     </view>
   </view>
 </template>
 
 <style>
-.agent-source-receipt__status-icon {
-  box-sizing: border-box;
+.agent-source-receipt {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
   flex: none;
-  width: 12px;
-  height: 12px;
-  background: var(--varo-agent-success);
-  border: 2px solid var(--varo-agent-success);
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__mark {
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__mark {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  width: fit-content;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
   border-radius: 999px;
 }
 
-.agent-source-receipt__status-icon--skipped {
-  height: 4px;
-  background: var(--varo-agent-border-strong);
-  border: 0;
-  border-radius: 2px;
+.agent-workspace-card__row.is-read .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
 }
 
-.agent-source-receipt__status-icon--failed {
-  background: var(--varo-agent-danger);
-  border-color: var(--varo-agent-danger);
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
 }
 
-.agent-source-receipt__action {
+.agent-workspace-card__row.is-skipped .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -139,26 +281,26 @@ const readCount = computed(() => props.items.filter(item => item.status === 'rea
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-source-receipt__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-source-receipt__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-source-receipt__action--pressed {
-  background: var(--varo-agent-fill);
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
 }
 </style>
 
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentTaskList.vue b/apps/playground-weapp/src/components/agent-ui/AgentTaskList.vue
index 4404aaef..392930e8 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentTaskList.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentTaskList.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { AgentTask } from './types'
 import { computed } from 'wevu'
-import VProgress from '../ui/v-progress.vue'
-import { agentCheckIcon } from './agent-icons'
+import { agentCheckIcon, agentCloseIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -15,63 +14,307 @@ const props = withDefaults(
   },
 )
 
-function indexClass(status: AgentTask['status']) {
-  if (status === 'completed') { return 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' }
-  if (status === 'running') { return 'border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]' }
-  if (status === 'failed') { return 'border-[var(--varo-agent-danger)] bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]' }
-  return 'border-[var(--varo-agent-border-strong)] text-[var(--varo-agent-text)]'
-}
-
 const completedCount = computed(() => props.tasks.filter(task => task.status === 'completed').length)
+const currentTask = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentTask.value?.status === 'failed') {
+    return `阻塞于 ${currentTask.value.title}`
+  }
+  if (currentTask.value) {
+    return `正在执行 ${currentTask.value.title}`
+  }
+  if (props.tasks.length && completedCount.value === props.tasks.length) {
+    return '全部完成'
+  }
+  return '等待开始'
+})
 const displayTasks = computed(() =>
-  props.tasks.map(task => ({
-    ...task,
-    progressStatus: task.status === 'failed' ? 'danger' as const : task.status === 'completed' ? 'success' as const : 'active' as const,
-  })),
+  props.tasks.map((task, index) => {
+    const ariaCurrent: 'step' | undefined = task.status === 'running' ? 'step' : undefined
+    return {
+      ...task,
+      ariaCurrent,
+      indexLabel: String(index + 1),
+      itemClass: `agent-task-list__item is-${task.status}`,
+      progressWidth: task.progress === undefined ? '' : `${Math.min(100, Math.max(0, task.progress))}%`,
+      statusLabel: task.status === 'completed'
+        ? '已完成'
+        : task.status === 'failed'
+          ? '失败'
+          : task.status === 'running'
+            ? '进行中'
+            : task.status === 'waiting'
+              ? '等待中'
+              : '待开始',
+    }
+  }),
 )
 </script>
 
 <template>
-  <view class="agent-tasks box-border w-full min-w-0 max-w-full overflow-hidden rounded-[14px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" aria-live="polite">
-    <view class="flex min-h-11 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-[13px] font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[12px] tabular-nums text-[var(--varo-agent-muted)]">
+  <view class="agent-task-list" aria-live="polite">
+    <view class="agent-task-list__header">
+      <view class="agent-task-list__heading">
+        <text class="agent-task-list__title">
+          {{ title }}
+        </text>
+        <text class="agent-task-list__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-task-list__count">
         {{ completedCount }}/{{ tasks.length }}
       </text>
     </view>
-    <view class="grid divide-y divide-slate-50">
-      <view v-for="(task, index) in displayTasks" :key="task.id" class="flex min-h-[50px] items-center gap-2.5 px-[13px] py-2">
-        <view class="grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold" :class="[indexClass(task.status)]" aria-hidden="true">
-          <image v-if="task.status === 'completed'" class="h-3.5 w-3.5" :src="agentCheckIcon" mode="aspectFit" />
+    <view class="agent-task-list__body">
+      <view
+        v-for="task in displayTasks"
+        :key="task.id"
+        :class="task.itemClass"
+        :data-status="task.status"
+        :aria-current="task.ariaCurrent"
+      >
+        <view class="agent-task-list__marker" aria-hidden="true">
+          <image v-if="task.status === 'completed'" class="agent-task-list__icon" :src="agentCheckIcon" mode="aspectFit" />
+          <image v-else-if="task.status === 'failed'" class="agent-task-list__icon" :src="agentCloseIcon" mode="aspectFit" />
+          <view v-else-if="task.status === 'running'" class="agent-task-list__pulse" />
           <text v-else>
-            {{ index + 1 }}
+            {{ task.indexLabel }}
           </text>
         </view>
-        <view class="grid min-w-0 flex-1 gap-1.5">
-          <view class="flex items-baseline justify-between gap-2.5">
-            <text class="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-task-list__copy">
+          <view class="agent-task-list__row">
+            <text class="agent-task-list__name">
               {{ task.title }}
             </text>
-            <text v-if="task.meta" class="flex-none text-[11px] text-[var(--varo-agent-muted)]">
-              {{ task.meta }}
-            </text>
+            <view class="agent-task-list__meta">
+              <text class="agent-task-list__chip">
+                {{ task.statusLabel }}
+              </text>
+              <text v-if="task.meta" class="agent-task-list__duration">
+                {{ task.meta }}
+              </text>
+            </view>
+          </view>
+          <text v-if="task.description" class="agent-task-list__description">
+            {{ task.description }}
+          </text>
+          <view v-if="task.progressWidth" class="agent-task-list__track" aria-hidden="true">
+            <view class="agent-task-list__fill" :style="`width:${task.progressWidth}`" />
           </view>
-          <VProgress
-            class="block w-full min-w-0 max-w-full overflow-hidden"
-            v-if="task.progress !== undefined"
-            :percentage="task.progress"
-            :show-text="false"
-            :stroke-width="4"
-            :status="task.progressStatus"
-          />
         </view>
       </view>
     </view>
   </view>
 </template>
 
+<style>
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__hint,
+.agent-task-list__count,
+.agent-task-list__duration,
+.agent-task-list__description {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count,
+.agent-task-list__duration {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+}
+
+.agent-task-list__item {
+  position: relative;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item.is-running .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.agent-task-list__pulse {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: agent-task-list-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  flex: 1;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-task-list__item.is-waiting .agent-task-list__name,
+.agent-task-list__item.is-idle .agent-task-list__name {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-task-list__item.is-running .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-task-list__track {
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__fill {
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__fill {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__fill {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item.is-running {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+@keyframes agent-task-list-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-task-list__pulse {
+    animation: none;
+  }
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentTaskRunner.vue b/apps/playground-weapp/src/components/agent-ui/AgentTaskRunner.vue
index 8e702801..1b1e43cd 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentTaskRunner.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentTaskRunner.vue
@@ -27,69 +27,77 @@ const actionableTasks = computed(() => {
   return props.tasks.filter(task =>
     (task.status === 'failed' && task.retryable)
     || (task.status === 'waiting' && task.requiresApproval),
-  )
+  ).map(task => ({
+    approveLabel: `批准${task.title}`,
+    retryLabel: `重试${task.title}`,
+    rowClass: `agent-workspace-card__row is-${task.status}`,
+    statusLabel: task.status === 'failed' ? '执行失败' : '等待确认',
+    task,
+  }))
 })
 const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
+const showControls = computed(() => actionableTasks.value.length > 0 || canCancel.value)
 </script>
 
 <template>
-  <view class="agent-task-runner box-border grid w-full min-w-0 max-w-full gap-2.5 overflow-hidden">
+  <view class="agent-task-runner">
     <AgentTaskList class="block w-full min-w-0 max-w-full overflow-hidden" :tasks="tasks" :title="title" />
 
-    <view v-if="actionableTasks.length || canCancel" class="overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-      <view v-if="actionableTasks.length" class="grid gap-1 p-2">
+    <view v-if="showControls" class="agent-task-runner__controls">
+      <view v-if="actionableTasks.length" class="agent-workspace-card__body">
         <view
-          v-for="task in actionableTasks"
-          :key="task.id"
-          class="flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2"
+          v-for="entry in actionableTasks"
+          :key="entry.task.id"
+          :class="entry.rowClass"
+          :data-status="entry.task.status"
         >
-          <view class="grid min-w-0 flex-1 gap-0.5">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-              {{ task.title }}
+          <view class="agent-workspace-card__copy">
+            <text class="agent-workspace-card__name">
+              {{ entry.task.title }}
             </text>
-            <text v-if="task.description" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-              {{ task.description }}
+            <text v-if="entry.task.description" class="agent-workspace-card__detail">
+              {{ entry.task.description }}
             </text>
-            <text class="text-[10px] font-semibold text-[var(--varo-agent-text)]">
-              {{ task.status === 'failed' ? '执行失败' : '等待确认' }}
+            <text class="agent-workspace-card__chip">
+              {{ entry.statusLabel }}
             </text>
           </view>
           <button
-            v-if="task.status === 'failed'"
-            class="agent-native-button agent-task-runner__action"
+            v-if="entry.task.status === 'failed'"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
             type="button"
-            :aria-label="`重试${task.title}`"
-            hover-class="agent-task-runner__action--pressed"
+            :aria-label="entry.retryLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
-            @click="emit('retry', task)"
+            @click="emit('retry', entry.task)"
           >
             重试
           </button>
           <button
             v-else
-            class="agent-native-button agent-task-runner__action agent-task-runner__action--primary"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
             type="button"
-            :aria-label="`批准${task.title}`"
-            hover-class="agent-task-runner__action--pressed"
+            :aria-label="entry.approveLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
-            @click="emit('approve', task)"
+            @click="emit('approve', entry.task)"
           >
             批准
           </button>
         </view>
       </view>
 
-      <view v-if="canCancel" class="flex min-h-[60px] items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-[13px] py-2">
-        <text class="text-[11px] text-[var(--varo-agent-muted)]">
+      <view v-if="canCancel" class="agent-task-runner__cancel">
+        <text class="agent-workspace-card__hint">
           任务正在执行
         </text>
         <button
-          class="agent-native-button agent-task-runner__action agent-task-runner__action--danger"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--danger"
           type="button"
           aria-label="取消当前任务"
-          hover-class="agent-task-runner__action--pressed"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('cancel')"
@@ -102,10 +110,98 @@ const canCancel = computed(() => props.busy || props.tasks.some(task => task.sta
 </template>
 
 <style>
-.agent-task-runner__action {
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.agent-task-runner__controls {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__detail,
+.agent-workspace-card__hint {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__chip {
+  width: fit-content;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-waiting .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -113,30 +209,29 @@ const canCancel = computed(() => props.busy || props.tasks.some(task => task.sta
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-task-runner__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-task-runner__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-task-runner__action--danger {
-  color: var(--varo-agent-danger);
-  background: transparent;
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
 }
 
-.agent-task-runner__action--pressed {
+.agent-workspace-card__action--pressed {
   opacity: 0.82;
 }
 </style>
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentThreadVersions.vue b/apps/playground-weapp/src/components/agent-ui/AgentThreadVersions.vue
index b8e09d11..e567c9bd 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentThreadVersions.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentThreadVersions.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentThreadVersion } from '@varo-ui/ai'
 import { computed } from 'wevu'
+import { agentBranchIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -28,76 +29,83 @@ const displayVersions = computed(() => {
   })
   return props.versions.map((version, index) => {
     const active = version.id === props.activeId
+    const label = version.label || `版本 ${index + 1}`
     return {
       active,
+      activeAttr: String(active),
+      branchLabel: `从${label}创建分支`,
       cardStateClass: active ? 'agent-thread-versions__card--active' : '',
-      label: version.label || `版本 ${index + 1}`,
+      label,
       parentLabel: version.parentId ? labels.get(version.parentId) || version.parentId : '起始版本',
-      statusDotStateClass: active ? 'agent-thread-versions__status-dot--active' : '',
+      pinLabel: `固定${label}`,
+      selectLabel: `选择${label}`,
+      summary: version.summary || '暂无版本摘要',
       version,
     }
   })
 })
+const headingHint = computed(() => {
+  const active = displayVersions.value.find(entry => entry.active)
+  return active ? `当前 ${active.label}` : '选择一个会话版本'
+})
+const countLabel = computed(() => `${props.versions.length} 个版本`)
 </script>
 
 <template>
-  <view class="agent-thread-versions box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ versions.length }} 个版本
+  <view class="agent-thread-versions" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displayVersions.length" class="box-border grid w-full min-w-0 max-w-full gap-2 p-2.5" role="list" aria-label="会话版本列表">
+    <view v-if="displayVersions.length" class="agent-thread-versions__list" role="list" aria-label="会话版本列表">
       <view
         v-for="entry in displayVersions"
         :key="entry.version.id"
-        class="agent-thread-versions__card box-border grid w-full min-w-0 max-w-full gap-2 rounded-xl border bg-[var(--varo-agent-surface-strong)] p-3"
+        class="agent-thread-versions__card box-border grid w-full min-w-0 max-w-full gap-2"
         :class="entry.cardStateClass"
-        :data-active="String(entry.active)"
+        :data-active="entry.activeAttr"
         role="listitem"
       >
-        <view class="flex min-w-0 items-center justify-between gap-2">
-          <view class="flex min-w-0 items-center gap-2">
-            <view class="agent-thread-versions__status-dot" :class="entry.statusDotStateClass" aria-hidden="true" />
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-              {{ entry.label }}
-            </text>
+        <view class="agent-workspace-card__row-main">
+          <view class="agent-workspace-card__mark" aria-hidden="true">
+            <image class="agent-workspace-card__icon" :src="agentBranchIcon" mode="aspectFit" />
           </view>
-          <text v-if="entry.active" class="flex-none text-[10px] font-bold text-[var(--varo-agent-primary)]">
+          <text class="agent-workspace-card__name">
+            {{ entry.label }}
+          </text>
+          <text v-if="entry.active" class="agent-workspace-card__chip">
             当前
           </text>
-          <text v-else-if="entry.version.pinned" class="flex-none text-[10px] font-bold text-[var(--varo-agent-text)]">
+          <text v-else-if="entry.version.pinned" class="agent-workspace-card__chip">
             已固定
           </text>
         </view>
-
-        <text v-if="entry.version.summary" class="block min-h-8 whitespace-normal text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-          {{ entry.version.summary }}
-        </text>
-        <text v-else class="block min-h-8 whitespace-normal text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-          暂无版本摘要
+        <text class="agent-workspace-card__detail">
+          {{ entry.summary }}
         </text>
-
-        <view class="grid gap-0.5 text-[10px] text-[var(--varo-agent-muted)]">
-          <text class="truncate">
-            来源：{{ entry.parentLabel }}
-          </text>
-          <text v-if="entry.version.createdAt" class="truncate">
+        <view class="agent-thread-versions__meta">
+          <text>来源：{{ entry.parentLabel }}</text>
+          <text v-if="entry.version.createdAt">
             创建：{{ entry.version.createdAt }}
           </text>
         </view>
-
-        <view class="flex flex-wrap gap-2 border-t border-[var(--varo-agent-border)] pt-2">
+        <view class="agent-thread-versions__actions">
           <button
             v-if="!entry.active"
-            class="agent-native-button agent-thread-versions__action agent-thread-versions__action--primary"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
             type="button"
-            :aria-label="`选择${entry.label}`"
-            hover-class="agent-thread-versions__action--pressed"
+            :aria-label="entry.selectLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
             @click="emit('select', entry.version)"
@@ -105,10 +113,10 @@ const displayVersions = computed(() => {
             选择
           </button>
           <button
-            class="agent-native-button agent-thread-versions__action"
+            class="agent-native-button agent-workspace-card__action"
             type="button"
-            :aria-label="`从${entry.label}创建分支`"
-            hover-class="agent-thread-versions__action--pressed"
+            :aria-label="entry.branchLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
             @click="emit('branch', entry.version)"
@@ -117,10 +125,10 @@ const displayVersions = computed(() => {
           </button>
           <button
             v-if="!entry.version.pinned"
-            class="agent-native-button agent-thread-versions__action"
+            class="agent-native-button agent-workspace-card__action"
             type="button"
-            :aria-label="`固定${entry.label}`"
-            hover-class="agent-thread-versions__action--pressed"
+            :aria-label="entry.pinLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
             @click="emit('pin', entry.version)"
@@ -130,38 +138,147 @@ const displayVersions = computed(() => {
         </view>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无会话版本</text>
     </view>
   </view>
 </template>
 
 <style>
+.agent-thread-versions {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
 .agent-thread-versions__card {
-  border-color: var(--varo-agent-border);
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
 }
 
 .agent-thread-versions__card--active {
-  border-color: var(--varo-agent-primary);
-  box-shadow: 0 0 0 2px var(--varo-agent-primary-soft);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
 }
 
-.agent-thread-versions__status-dot {
+.agent-workspace-card__mark {
+  display: flex;
   flex: none;
-  width: 8px;
-  height: 8px;
-  background: var(--varo-agent-border-strong);
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
   border-radius: 999px;
 }
 
-.agent-thread-versions__status-dot--active {
-  background: var(--varo-agent-primary);
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
 }
 
-.agent-thread-versions__action {
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -169,26 +286,26 @@ const displayVersions = computed(() => {
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-thread-versions__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-thread-versions__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-thread-versions__action--pressed {
-  background: var(--varo-agent-fill);
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
 }
 </style>
 
diff --git a/apps/playground-weapp/src/components/agent-ui/AgentToolResult.vue b/apps/playground-weapp/src/components/agent-ui/AgentToolResult.vue
index 5174d6a7..ba6703fe 100644
--- a/apps/playground-weapp/src/components/agent-ui/AgentToolResult.vue
+++ b/apps/playground-weapp/src/components/agent-ui/AgentToolResult.vue
@@ -3,7 +3,6 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentAdvancedStatus } from './advanced-types'
 import { computed, shallowRef } from 'wevu'
 import { cn } from '../../lib/cn'
-import { agentChevronDownIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -28,58 +27,211 @@ const emit = defineEmits<{
 }>()
 
 const open = shallowRef(props.defaultOpen || props.status === 'running' || props.status === 'failed')
-const rootClass = computed(() =>
-  cn('agent-tool-result overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const meta = computed(() => [props.duration, props.summary].filter(Boolean).join(' · '))
+const openAttr = computed(() => String(open.value))
+const statusText = computed(() => {
+  if (props.status === 'completed') {
+    return 'Completed'
+  }
+  if (props.status === 'failed') {
+    return 'Failed'
+  }
+  if (props.status === 'running') {
+    return 'Running'
+  }
+  return 'Waiting'
+})
+const rootClass = computed(() => cn('agent-tool-result', !open.value && 'is-closed', props.className))
+const headerClass = computed(() =>
+  cn('agent-native-button agent-native-button--block agent-tool-result__header'),
+)
+const statusChipClass = computed(() =>
+  cn('agent-tool-result__status', `is-${props.status}`),
+)
+const dotClass = computed(() =>
+  cn(
+    'agent-tool-result__status-dot',
+    props.status === 'running' && 'agent-tool-result__running',
+  ),
 )
 
 function toggle() {
   open.value = !open.value
   emit('update:open', open.value)
 }
-
-function dotClass() {
-  return cn(
-    'h-2 w-2 flex-none rounded-full',
-    props.status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    props.status === 'running' && 'agent-tool-result__running bg-[var(--varo-agent-primary)] shadow-[0_0_0_3px_#ccfbf1]',
-    props.status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    props.status === 'waiting' && 'bg-[var(--varo-agent-border-strong)]',
-  )
-}
 </script>
 
 <template>
-  <view :class="rootClass" :data-status="status">
-    <button class="agent-native-button agent-native-button--block flex min-h-12 items-center justify-between gap-3 border-0 bg-[var(--varo-agent-surface)] px-[13px] text-left" type="button" :aria-expanded="open" @click="toggle">
-      <view class="flex min-w-0 items-center gap-2.5">
-        <text :class="dotClass()" aria-hidden="true" />
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view :class="rootClass" :data-open="openAttr" :data-status="status">
+    <button :class="headerClass" type="button" :aria-expanded="open" @click="toggle">
+      <view class="agent-tool-result__command">
+        <text class="agent-tool-result__prompt" aria-hidden="true">
+          $
+        </text>
+        <text class="agent-tool-result__name">
           {{ name }}
         </text>
       </view>
-      <view class="flex flex-none items-center gap-2">
-        <text class="text-[11px] text-[var(--varo-agent-muted)]">
-          {{ duration || summary }}
+      <view class="agent-tool-result__meta">
+        <view :class="statusChipClass">
+          <view :class="dotClass" aria-hidden="true" />
+          <text>{{ statusText }}</text>
+        </view>
+        <text v-if="meta" class="agent-tool-result__duration">
+          {{ meta }}
         </text>
-        <image class="h-4 w-4 transition-transform" :class="[open && 'rotate-180']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </view>
     </button>
 
-    <view v-if="open" class="border-t border-slate-800 bg-slate-950 p-3 text-slate-300">
+    <view v-if="open" class="agent-tool-result__body">
       <slot>
-        <text class="block whitespace-pre-wrap font-mono text-[11px] leading-[17px]">
+        <text class="agent-tool-result__output">
           {{ output }}
         </text>
       </slot>
     </view>
 
-    <button v-if="status === 'failed' && open" class="agent-native-button m-3 min-h-8 rounded-lg border border-[var(--varo-agent-danger)] bg-[var(--varo-agent-surface)] px-2.5 text-[11px] font-bold text-[var(--varo-agent-danger)]" type="button" @click="emit('retry')">
+    <button v-if="status === 'failed' && open" class="agent-native-button agent-tool-result__retry" type="button" @click="emit('retry')">
       Retry
     </button>
   </view>
 </template>
 
 <style>
+.agent-tool-result {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-tool-result__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  background: #111c30;
+  border: 0;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-tool-result.is-closed .agent-tool-result__header {
+  border-bottom-color: transparent;
+}
+
+.agent-tool-result__command {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agent-tool-result__prompt {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2dd4bf;
+}
+
+.agent-tool-result__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-tool-result__meta {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-tool-result__status {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 12%);
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 999px;
+}
+
+.agent-tool-result__status.is-completed,
+.agent-tool-result__status.is-running {
+  color: #5eead4;
+  background: rgb(45 212 191 / 12%);
+  border-color: rgb(45 212 191 / 24%);
+}
+
+.agent-tool-result__status.is-failed {
+  color: #fca5a5;
+  background: rgb(248 113 113 / 12%);
+  border-color: rgb(248 113 113 / 24%);
+}
+
+.agent-tool-result__status-dot {
+  width: 7px;
+  height: 7px;
+  background: #94a3b8;
+  border-radius: 999px;
+}
+
+.agent-tool-result__status.is-completed .agent-tool-result__status-dot,
+.agent-tool-result__status.is-running .agent-tool-result__status-dot {
+  background: #2dd4bf;
+}
+
+.agent-tool-result__status.is-failed .agent-tool-result__status-dot {
+  background: #f87171;
+}
+
+.agent-tool-result__duration {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: #94a3b8;
+}
+
+.agent-tool-result__body {
+  padding: 12px;
+  color: #cbd5e1;
+  background: #0f172a;
+}
+
+.agent-tool-result__output {
+  display: block;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.agent-tool-result__retry {
+  min-height: 32px;
+  padding: 0 10px;
+  margin: 0 12px 12px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #fecaca;
+  background: rgb(248 113 113 / 10%);
+  border: 1px solid rgb(248 113 113 / 28%);
+  border-radius: 9px;
+}
+
 .agent-tool-result__running {
   animation: agent-tool-result-pulse 1s ease-in-out infinite;
 }
diff --git a/apps/playground-weapp/src/components/agent-ui/agent-icons.ts b/apps/playground-weapp/src/components/agent-ui/agent-icons.ts
index c6579f7b..2432a947 100644
--- a/apps/playground-weapp/src/components/agent-ui/agent-icons.ts
+++ b/apps/playground-weapp/src/components/agent-ui/agent-icons.ts
@@ -14,6 +14,16 @@ export const agentCheckIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo
 
 export const agentPlusIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDdjMTYwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEyIDV2MTRNNSAxMmgxNCIvPjwvc3ZnPg=='
 
+export const agentToolIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2MzYWVkIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48cGF0aCBkPSJNOCA3aDhNOCAxMmg4TTggMTdoNSIvPjwvc3ZnPg=='
+
+export const agentChatIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY3MDg1IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA2aDE0YTIgMiAwIDAgMSAyIDJ2N2EyIDIgMCAwIDEtMiAySDlsLTQgM3YtM0g1YTIgMiAwIDAgMS0yLTJWOGEyIDIgMCAwIDEgMi0yeiIvPjwvc3ZnPg=='
+
+export const agentPlugIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSA3VjNNMTUgN1YzIi8+PHBhdGggZD0iTTggN2g4djRhNCA0IDAgMCAxLTQgNGgwYTQgNCAwIDAgMS00LTRWN1oiLz48cGF0aCBkPSJNMTIgMTV2NiIvPjwvc3ZnPg=='
+
+export const agentReceiptIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAzaDhsNCA0djE0SDdWM1oiLz48cGF0aCBkPSJNMTUgM3Y0aDRNOSAxMmg2TTkgMTZoNCIvPjwvc3ZnPg=='
+
+export const agentBranchIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iMTgiIGN5PSIxMiIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iNiIgY3k9IjE4IiByPSIyLjIiLz48cGF0aCBkPSJNOC4xIDcuNnY4LjhNOC4yIDEySDE2Ii8+PC9zdmc+'
+
 const agentSendMask = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNCAxMiAxNi04LTUgMTYtMy41LTYuNUw0IDEyWiIvPjxwYXRoIGQ9Ik0xMS41IDEzLjUgMjAgNCIvPjwvc3ZnPg==")'
 
 export const agentSendIconStyle = {
diff --git a/apps/playground-weapp/src/components/ui/v-input.vue b/apps/playground-weapp/src/components/ui/v-input.vue
index cfb23543..6abfdd75 100644
--- a/apps/playground-weapp/src/components/ui/v-input.vue
+++ b/apps/playground-weapp/src/components/ui/v-input.vue
@@ -132,6 +132,7 @@ const props = withDefaults(
     ignoreCompositionEvent: true,
     invalid: false,
     labelWidth: '',
+    maxLength: -1,
     nickNameReview: false,
     randomNumber: false,
     readonly: false,
@@ -251,6 +252,15 @@ const nativeType = computed(() => {
 
   return 'text'
 })
+
+function normalizeRows(value: number | string | undefined) {
+  if (value === undefined || value === '') {
+    return undefined
+  }
+
+  const rows = Number(value)
+  return Number.isFinite(rows) && rows > 0 ? Math.trunc(rows) : undefined
+}
 const autosizeEnabled = computed(() => Boolean(props.autosize))
 const controlStyle = computed(() => {
   const declarations = [`text-align:${props.align}`]
@@ -325,15 +335,6 @@ const dataInvalid = computed(() => String(field.state.invalid.value))
 const dataReadonly = computed(() => String(props.readonly))
 const resolvedFocus = computed(() => focusRequested.value || props.focus)
 
-function normalizeRows(value: number | string | undefined) {
-  if (value === undefined || value === '') {
-    return undefined
-  }
-
-  const rows = Number(value)
-  return Number.isFinite(rows) && rows > 0 ? Math.trunc(rows) : undefined
-}
-
 function eventValue(event: unknown, fallback: string) {
   if (typeof event !== 'object' || event === null) {
     return fallback
diff --git a/apps/playground-weapp/src/components/ui/v-textarea.vue b/apps/playground-weapp/src/components/ui/v-textarea.vue
index bcb7c26a..e3804185 100644
--- a/apps/playground-weapp/src/components/ui/v-textarea.vue
+++ b/apps/playground-weapp/src/components/ui/v-textarea.vue
@@ -90,6 +90,7 @@ const props = withDefaults(
     holdKeyboard: false,
     ignoreCompositionEvent: true,
     invalid: false,
+    maxLength: -1,
     readonly: false,
     selectionEnd: -1,
     selectionStart: -1,
diff --git a/apps/playground-weapp/src/pages/web-preview-agent/index.vue b/apps/playground-weapp/src/pages/web-preview-agent/index.vue
new file mode 100644
index 00000000..cae6d4bc
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview-agent/index.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import type { TextStreamSnapshot } from '@varo-ui/ai'
+import { createTextStream } from '@varo-ui/ai'
+import { computed, onUnload, onUnmounted, shallowRef } from 'wevu'
+import AgentMarkdown from '../../components/agent-ui/AgentMarkdown.vue'
+import AgentStream from '../../components/agent-ui/AgentStream.vue'
+import VButton from '../../components/ui/v-button.vue'
+import VCard from '../../components/ui/v-card.vue'
+
+type StreamPhase = 'idle' | 'streaming' | 'stopped' | 'completed'
+
+const markdownSample = [
+  '# AgentMarkdown 静态样例',
+  '',
+  '这段内容由现有的 **AgentMarkdown** 原生组件解析。点击 [Varo 预览链接](https://example.com/varo-preview) 会在下方显示真实 link 事件。',
+  '',
+  '## 覆盖内容',
+  '',
+  '- Wevu 原生组件树',
+  '- 无业务接口的本地数据',
+  '- 列表、表格与代码块',
+  '',
+  '| Surface | Runtime |',
+  '| --- | --- |',
+  '| Controls | glass-easel |',
+  '| Agent | AgentMarkdown |',
+  '',
+  '```ts',
+  'const runtime = \'wevu\'',
+  'const framework = \'glass-easel\'',
+  '```',
+].join('\n')
+
+const streamChunks = [
+  '## 流式结论\n\n',
+  '当前内容由 ',
+  '`@varo-ui/ai` ',
+  '的真实 text stream controller 分段提交。\n\n',
+  '- “停止”会暂停控制器并保留已显示内容。\n',
+  '- “继续”从剩余生产分片恢复。\n',
+  '- “从头重播”会重置内容和节奏。\n\n',
+  '| 阶段 | 可观察结果 |\n',
+  '| --- | --- |\n',
+  '| streaming | AgentStream 显示逐步增长的文本 |\n',
+  '| completed | AgentStream 切换到现有 Markdown 渲染 |\n\n',
+  '```ts\n',
+  'controller.finish()\n',
+  '```\n',
+] as const
+
+const markdownLinkCount = shallowRef(0)
+const markdownLinkOutput = shallowRef('最近链接：尚未点击')
+const markdownErrorOutput = shallowRef('Markdown 状态：ready')
+const streamPhase = shallowRef<StreamPhase>('idle')
+const producerChunkIndex = shallowRef(0)
+const lastStreamAction = shallowRef('等待点击“开始流式内容”')
+
+const textStream = createTextStream({
+  maxCharsPerCommit: 5,
+  maxCharsPerSecond: 120,
+  maxCommitFps: 20,
+  minCharsPerSecond: 24,
+  startDelayMs: 80,
+  targetLatencyMs: 1200,
+})
+const streamSnapshot = shallowRef<TextStreamSnapshot>(textStream.getSnapshot())
+let producerTimer: ReturnType<typeof setTimeout> | undefined
+let cleanedUp = false
+
+const unsubscribeStream = textStream.subscribe(() => {
+  const snapshot = textStream.getSnapshot()
+  streamSnapshot.value = snapshot
+  if (snapshot.final && streamPhase.value === 'streaming') {
+    streamPhase.value = 'completed'
+    lastStreamAction.value = '流式内容播放完成'
+  }
+})
+
+const agentStreamStatus = computed(() => {
+  if (streamPhase.value === 'streaming') {
+    return 'streaming' as const
+  }
+  if (streamPhase.value === 'completed') {
+    return 'completed' as const
+  }
+  return 'idle' as const
+})
+const startButtonLabel = computed(() => streamPhase.value === 'stopped' ? '继续流式内容' : '开始流式内容')
+const startButtonDisabled = computed(() => streamPhase.value === 'streaming')
+const stopButtonDisabled = computed(() => streamPhase.value !== 'streaming')
+const streamProgressLabel = computed(() => `生产分片：${producerChunkIndex.value} / ${streamChunks.length}`)
+const streamBufferLabel = computed(() => `待显示字符：${streamSnapshot.value.pendingChars}`)
+const streamFinalLabel = computed(() => `final：${String(streamSnapshot.value.final)}`)
+const streamDiagnostic = computed(() => `phase=${streamPhase.value};chunks=${producerChunkIndex.value}/${streamChunks.length};pending=${streamSnapshot.value.pendingChars};final=${String(streamSnapshot.value.final)}`)
+
+function recordMarkdownLink(href: string) {
+  markdownLinkCount.value += 1
+  markdownLinkOutput.value = `最近链接 #${markdownLinkCount.value}：${href}`
+}
+
+function recordMarkdownError(message: string) {
+  markdownErrorOutput.value = `Markdown 错误：${message}`
+}
+
+function clearProducerTimer() {
+  clearTimeout(producerTimer)
+  producerTimer = undefined
+}
+
+function produceNextChunk() {
+  producerTimer = undefined
+  if (streamPhase.value !== 'streaming') {
+    return
+  }
+
+  const chunk = streamChunks[producerChunkIndex.value]
+  if (chunk === undefined) {
+    textStream.finish()
+    return
+  }
+
+  textStream.enqueue(chunk)
+  producerChunkIndex.value += 1
+  if (producerChunkIndex.value >= streamChunks.length) {
+    textStream.finish()
+  }
+  else if (streamPhase.value === 'streaming') {
+    producerTimer = setTimeout(produceNextChunk, 110)
+  }
+}
+
+function beginStream(action: string) {
+  clearProducerTimer()
+  textStream.reset()
+  producerChunkIndex.value = 0
+  streamPhase.value = 'streaming'
+  lastStreamAction.value = action
+  produceNextChunk()
+}
+
+function startStream() {
+  if (streamPhase.value === 'streaming') {
+    return
+  }
+  if (streamPhase.value === 'stopped') {
+    streamPhase.value = 'streaming'
+    lastStreamAction.value = '继续播放剩余流式内容'
+    textStream.resume()
+    produceNextChunk()
+    return
+  }
+  beginStream('开始新的流式内容')
+}
+
+function stopStream() {
+  if (streamPhase.value !== 'streaming') {
+    return
+  }
+  streamPhase.value = 'stopped'
+  lastStreamAction.value = '已停止；内容和生产进度已保留'
+  clearProducerTimer()
+  textStream.pause()
+}
+
+function replayStream() {
+  beginStream('从头重播流式内容')
+}
+
+function cleanup() {
+  if (cleanedUp) {
+    return
+  }
+  cleanedUp = true
+  clearProducerTimer()
+  unsubscribeStream()
+  textStream.destroy()
+}
+
+onUnload(cleanup)
+onUnmounted(cleanup)
+</script>
+
+<template>
+  <view class="box-border min-h-screen bg-[var(--varo-ui-bg)] px-3 py-4 text-[var(--varo-ui-text)]">
+    <view class="mb-3 grid gap-1 rounded-2xl bg-slate-950 p-4 text-white">
+      <text class="text-lg font-black">
+        Wevu 原生 Agent 预览
+      </text>
+      <text class="text-xs leading-5 text-slate-300">
+        使用现有 AgentMarkdown、AgentStream 与 @varo-ui/ai；这不是微信客户端模拟器，也不调用登录、支付或业务 API。
+      </text>
+    </view>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        AgentMarkdown 静态内容
+      </template>
+      <template #description>
+        标题、链接、列表、表格和代码块均由当前原生渲染器处理。
+      </template>
+
+      <view class="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3">
+        <AgentMarkdown
+          :content="markdownSample"
+          final
+          @error="recordMarkdownError"
+          @link="recordMarkdownLink"
+        />
+        <view class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs">
+          <text data-preview-field="markdown-link-output">
+            {{ markdownLinkOutput }}
+          </text>
+          <text data-preview-field="markdown-link-count">
+            link 事件计数：{{ markdownLinkCount }}
+          </text>
+          <text data-preview-field="markdown-status">
+            {{ markdownErrorOutput }}
+          </text>
+        </view>
+      </view>
+    </VCard>
+
+    <VCard variant="outline">
+      <template #title>
+        AgentStream 真实节奏
+      </template>
+      <template #description>
+        本地生产器分片送入 text stream controller；完成后沿用 AgentStream 当前的 Markdown 切换行为。
+      </template>
+
+      <view class="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3">
+        <view class="min-h-40 rounded-xl border border-[var(--varo-ui-border)] bg-[var(--varo-ui-fill)] p-3">
+          <AgentStream
+            :content="streamSnapshot.visible"
+            :final="streamSnapshot.final"
+            :status="agentStreamStatus"
+          />
+        </view>
+
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="stream-state"
+          :data-preview-value="streamDiagnostic"
+        >
+          <text data-preview-field="stream-phase">
+            流式状态：{{ streamPhase }}
+          </text>
+          <text data-preview-field="stream-progress">
+            {{ streamProgressLabel }}
+          </text>
+          <text data-preview-field="stream-buffer">
+            {{ streamBufferLabel }}
+          </text>
+          <text data-preview-field="stream-final">
+            {{ streamFinalLabel }}
+          </text>
+          <text data-preview-field="stream-last-action">
+            最近操作：{{ lastStreamAction }}
+          </text>
+        </view>
+
+        <view class="grid grid-cols-3 gap-2">
+          <VButton size="sm" :disabled="startButtonDisabled" @click="startStream">
+            {{ startButtonLabel }}
+          </VButton>
+          <VButton size="sm" :disabled="stopButtonDisabled" tone="default" variant="outline" @click="stopStream">
+            停止
+          </VButton>
+          <VButton size="sm" tone="default" variant="outline" @click="replayStream">
+            从头重播
+          </VButton>
+        </view>
+      </view>
+    </VCard>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "$schema": "https://vite.icebreaker.top/page.json",
+  "navigationBarTitleText": "Wevu Agent 预览",
+  "usingComponents": {}
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview-map/index.vue b/apps/playground-weapp/src/pages/web-preview-map/index.vue
new file mode 100644
index 00000000..f26e6e27
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview-map/index.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'wevu'
+import VButton from '../../components/ui/v-button.vue'
+import VCard from '../../components/ui/v-card.vue'
+import VMap from '../../components/ui/v-map.vue'
+
+const hangzhou = { latitude: 30.274, longitude: 120.155, label: '杭州西湖' }
+const shanghai = { latitude: 31.23, longitude: 121.47, label: '上海外滩' }
+const center = shallowRef(hangzhou)
+const regionChangeCount = shallowRef(0)
+const lastRegionEvent = shallowRef('尚未收到 regionchange')
+
+const markers = computed(() => [{
+  id: 1,
+  latitude: center.value.latitude,
+  longitude: center.value.longitude,
+  iconPath: '/varo-link-kwctvy95.jpg',
+  title: center.value.label,
+  width: 32,
+  height: 32,
+}])
+const centerLabel = computed(() => `中心：${center.value.label}`)
+const coordinateLabel = computed(() => `坐标：${center.value.latitude}, ${center.value.longitude}`)
+const markerCountLabel = computed(() => `标记数：${markers.value.length}`)
+const mapDiagnostic = computed(() =>
+  `center=${center.value.label};lat=${center.value.latitude};lng=${center.value.longitude};markers=${markers.value.length};region=${regionChangeCount.value}`,
+)
+const relocateLabel = computed(() => center.value.label === hangzhou.label ? '切换到上海' : '切换到杭州')
+
+function relocateMap() {
+  center.value = center.value.label === hangzhou.label ? shanghai : hangzhou
+}
+
+function recordRegionChange() {
+  regionChangeCount.value += 1
+  lastRegionEvent.value = `收到 regionchange #${regionChangeCount.value}`
+}
+</script>
+
+<template>
+  <view class="box-border min-h-screen bg-[var(--varo-ui-bg)] px-3 py-4 text-[var(--varo-ui-text)]">
+    <view class="mb-3 grid gap-1 rounded-2xl bg-slate-950 p-4 text-white">
+      <text class="text-lg font-black">
+        Wevu 原生地图预览
+      </text>
+      <text class="text-xs leading-5 text-slate-300">
+        VMap 只在 weapp 目标存在。浏览器预览用腾讯地图 JS API GL 画出中心点、标记和 regionchange，不是微信客户端同层地图。
+      </text>
+    </view>
+
+    <VCard variant="outline">
+      <template #title>
+        VMap 可观察状态
+      </template>
+      <template #description>
+        切换中心会更新 latitude / longitude / markers；点击地图表面会发出 regionchange。
+      </template>
+
+      <view class="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3">
+        <VMap
+          map-id="webPreviewMap"
+          aria-label="Web 预览活动地图"
+          :latitude="center.latitude"
+          :longitude="center.longitude"
+          :markers="markers"
+          :enable-scroll="false"
+          :enable-zoom="false"
+          :show-location="false"
+          :scale="14"
+          height="240px"
+          @region-change="recordRegionChange"
+        />
+
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="map-state"
+          :data-preview-value="mapDiagnostic"
+        >
+          <text data-preview-field="map-center">
+            {{ centerLabel }}
+          </text>
+          <text data-preview-field="map-coordinates">
+            {{ coordinateLabel }}
+          </text>
+          <text data-preview-field="map-marker-count">
+            {{ markerCountLabel }}
+          </text>
+          <text data-preview-field="map-region-count">
+            regionchange：{{ regionChangeCount }}
+          </text>
+          <text data-preview-field="map-last-event">
+            {{ lastRegionEvent }}
+          </text>
+        </view>
+
+        <VButton block @click="relocateMap">
+          {{ relocateLabel }}
+        </VButton>
+      </view>
+    </VCard>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "$schema": "https://vite.icebreaker.top/page.json",
+  "navigationBarTitleText": "Wevu 地图预览",
+  "usingComponents": {}
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview-rag/index.vue b/apps/playground-weapp/src/pages/web-preview-rag/index.vue
new file mode 100644
index 00000000..a4fa5b7c
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview-rag/index.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { AgentContextSource } from '../../components/agent-ui/advanced-types'
+import { computed, onUnmounted, shallowRef } from 'wevu'
+import AgentRagPipeline from '../../components/agent-ui/AgentRagPipeline.vue'
+import VButton from '../../components/ui/v-button.vue'
+import VCard from '../../components/ui/v-card.vue'
+import { useRagDemo } from '../../features/useRagDemo'
+
+const previewSources: AgentContextSource[] = [
+  { id: 'support', label: '客服工单', enabled: true, status: 'available' },
+  { id: 'replay', label: '会话回放', enabled: true, status: 'available' },
+  { id: 'drive', label: '产品文档', enabled: true, status: 'available' },
+]
+
+const selectedSourceId = shallowRef('')
+const lastSourceAction = shallowRef('尚未选择来源')
+const demo = useRagDemo(() => previewSources, 'zh')
+
+const runningCount = computed(() => demo.snapshot.value.steps.filter(step => step.status === 'running').length)
+const completedCount = computed(() => demo.snapshot.value.steps.filter(step => step.status === 'completed').length)
+const sourceCount = computed(() => demo.snapshot.value.sources.length)
+const citationCount = computed(() => demo.snapshot.value.answer.filter(part => part.type === 'citation').length)
+const actionLabel = computed(() => demo.busy.value ? '停止检索' : '运行 RAG 演示')
+const ragDiagnostic = computed(() =>
+  `busy=${String(demo.busy.value)};running=${runningCount.value};completed=${completedCount.value};sources=${sourceCount.value};citations=${citationCount.value};selected=${selectedSourceId.value || 'none'}`,
+)
+
+function toggleRag() {
+  if (demo.busy.value) {
+    demo.cancel()
+    return
+  }
+  selectedSourceId.value = ''
+  lastSourceAction.value = '开始本地 RAG 演示'
+  void demo.run()
+}
+
+function recordSelectedSource(source: { id: string, title: string }) {
+  selectedSourceId.value = source.id
+  lastSourceAction.value = `选中来源：${source.title}`
+}
+
+onUnmounted(() => {
+  demo.cancel()
+})
+</script>
+
+<template>
+  <view class="box-border min-h-screen bg-[var(--varo-ui-bg)] px-3 py-4 text-[var(--varo-ui-text)]">
+    <view class="mb-3 grid gap-1 rounded-2xl bg-slate-950 p-4 text-white">
+      <text class="text-lg font-black">
+        Wevu 原生 RAG 预览
+      </text>
+      <text class="text-xs leading-5 text-slate-300">
+        AgentRagPipeline 只投影本地快照：五阶段进度、来源卡片和带引用的回答。这里不调用模型或检索服务。
+      </text>
+    </view>
+
+    <VCard variant="outline">
+      <template #title>
+        AgentRagPipeline 可观察流程
+      </template>
+      <template #description>
+        运行后可看到 query → generate；点引用会高亮对应来源。停止会保留当前查询。
+      </template>
+
+      <view class="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3">
+        <AgentRagPipeline
+          :query="demo.snapshot.value.query"
+          :steps="demo.snapshot.value.steps"
+          :sources="demo.snapshot.value.sources"
+          :answer="demo.snapshot.value.answer"
+          :elapsed-ms="demo.snapshot.value.elapsedMs"
+          reduced-motion
+          @run="toggleRag"
+          @cancel="toggleRag"
+          @select-source="recordSelectedSource"
+        />
+
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="rag-state"
+          :data-preview-value="ragDiagnostic"
+        >
+          <text data-preview-field="rag-query">
+            查询：{{ demo.snapshot.value.query }}
+          </text>
+          <text data-preview-field="rag-busy">
+            运行中：{{ demo.busy.value ? 'yes' : 'no' }}
+          </text>
+          <text data-preview-field="rag-progress">
+            阶段：{{ completedCount }}/5 完成，{{ runningCount }} 运行
+          </text>
+          <text data-preview-field="rag-sources">
+            来源：{{ sourceCount }}，引用：{{ citationCount }}
+          </text>
+          <text data-preview-field="rag-selected">
+            当前来源：{{ selectedSourceId || '尚未选择' }}
+          </text>
+          <text data-preview-field="rag-last-action">
+            {{ lastSourceAction }}
+          </text>
+        </view>
+
+        <VButton block @click="toggleRag">
+          {{ actionLabel }}
+        </VButton>
+      </view>
+    </VCard>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "$schema": "https://vite.icebreaker.top/page.json",
+  "navigationBarTitleText": "Wevu RAG 预览",
+  "usingComponents": {}
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview-robot-chat/index.vue b/apps/playground-weapp/src/pages/web-preview-robot-chat/index.vue
new file mode 100644
index 00000000..441e3cbf
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview-robot-chat/index.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { VaroRobotChatOptions } from '../../components/ui/robot-chat.types'
+import { computed, shallowRef } from 'wevu'
+import VRobotChat from '../../components/ui/v-robot-chat.vue'
+
+const options: VaroRobotChatOptions = {
+  appid: 'preview-robot',
+  history: true,
+  operateCardHeight: 72,
+  welcome: '你好，请问需要什么帮助？',
+}
+
+const status = shallowRef('正在连接机器人…')
+const lastQuery = shallowRef('尚未发送')
+const queryCount = shallowRef(0)
+const diagnostic = computed(() =>
+  `status=${status.value};query=${lastQuery.value};count=${queryCount.value}`,
+)
+
+function ready() {
+  status.value = '机器人已连接'
+}
+
+function failed() {
+  status.value = '机器人连接失败'
+}
+
+function queryCallback(event: unknown) {
+  const record = event && typeof event === 'object' ? event as Record<string, unknown> : undefined
+  const nested = record?.detail && typeof record.detail === 'object' ? record.detail as Record<string, unknown> : undefined
+  const query = [record?.query, nested?.query, nested?.detail].find(value => typeof value === 'string' && value.trim())
+  lastQuery.value = typeof query === 'string' ? query.trim() : '已收到查询回调'
+  queryCount.value += 1
+  status.value = `已收到查询回调 #${queryCount.value}`
+}
+
+function backHome() {
+  status.value = '已退出机器人会话'
+}
+</script>
+
+<template>
+  <view class="box-border min-h-screen bg-[var(--varo-ui-bg)] px-3 py-4 text-[var(--varo-ui-text)]">
+    <view class="mb-3 grid gap-1 rounded-2xl bg-slate-950 p-4 text-white">
+      <text class="text-lg font-black">
+        Wevu 机器人对话预览
+      </text>
+      <text class="text-xs leading-5 text-slate-300">
+        VRobotChat 只在 weapp 目标存在。浏览器预览画出 chatbotwidget 会话面和 operateCard，不是微信对话开放平台。
+      </text>
+    </view>
+
+    <VRobotChat
+      :options="options"
+      @ready="ready"
+      @error="failed"
+      @query-callback="queryCallback"
+      @back-home="backHome"
+    />
+
+    <view
+      class="mt-3 grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+      data-preview-field="robot-state"
+      :data-preview-value="diagnostic"
+    >
+      <text data-preview-field="robot-status">
+        {{ status }}
+      </text>
+      <text data-preview-field="robot-last-query">
+        最近查询：{{ lastQuery }}
+      </text>
+      <text data-preview-field="robot-query-count">
+        queryCallback：{{ queryCount }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "$schema": "https://vite.icebreaker.top/page.json",
+  "navigationBarTitleText": "Wevu 机器人预览",
+  "usingComponents": {}
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview/PreviewContextConsumer.vue b/apps/playground-weapp/src/pages/web-preview/PreviewContextConsumer.vue
new file mode 100644
index 00000000..a3837c71
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview/PreviewContextConsumer.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PreviewContextState } from './preview-context'
+import { computed, inject, onMounted, onUnmounted } from 'wevu'
+import { previewContextKey } from './preview-context'
+
+const emit = defineEmits<{
+  mounted: []
+  unmounted: []
+}>()
+
+const context = inject<PreviewContextState>(previewContextKey)
+if (!context) {
+  throw new Error('PreviewContextConsumer requires PreviewContextProvider')
+}
+
+const injectedRevision = computed(() => context.revision.value)
+const injectedValue = computed(() => context.value.value)
+const contextDiagnostic = computed(() => `revision=${injectedRevision.value};value=${injectedValue.value}`)
+
+onMounted(() => emit('mounted'))
+onUnmounted(() => emit('unmounted'))
+</script>
+
+<template>
+  <view
+    class="grid gap-1.5 rounded-xl bg-[var(--varo-ui-primary-soft)] p-3 text-[var(--varo-ui-primary-text)]"
+    data-preview-field="injected-context"
+    :data-preview-value="contextDiagnostic"
+  >
+    <text class="text-xs font-bold">
+      Consumer 已注入
+    </text>
+    <text class="break-words text-sm" data-preview-field="context-value">
+      注入值：{{ injectedValue }}
+    </text>
+    <text class="text-xs tabular-nums" data-preview-field="context-revision">
+      注入版本：{{ injectedRevision }}
+    </text>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview/PreviewContextProvider.vue b/apps/playground-weapp/src/pages/web-preview/PreviewContextProvider.vue
new file mode 100644
index 00000000..9c9044fe
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview/PreviewContextProvider.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PreviewContextState } from './preview-context'
+import { computed, onMounted, onUnmounted, provide } from 'wevu'
+import { previewContextKey } from './preview-context'
+import PreviewContextConsumer from './PreviewContextConsumer.vue'
+
+const props = defineProps<{
+  revision: number
+  value: string
+}>()
+
+const emit = defineEmits<{
+  consumerMounted: []
+  consumerUnmounted: []
+  mounted: []
+  unmounted: []
+}>()
+
+const revision = computed(() => props.revision)
+const value = computed(() => props.value)
+
+provide<PreviewContextState>(previewContextKey, { revision, value })
+
+onMounted(() => emit('mounted'))
+onUnmounted(() => emit('unmounted'))
+</script>
+
+<template>
+  <PreviewContextConsumer
+    @mounted="emit('consumerMounted')"
+    @unmounted="emit('consumerUnmounted')"
+  />
+</template>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview/index.vue b/apps/playground-weapp/src/pages/web-preview/index.vue
new file mode 100644
index 00000000..5ad977ca
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview/index.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'wevu'
+import VButton from '../../components/ui/v-button.vue'
+import VCard from '../../components/ui/v-card.vue'
+import VInput from '../../components/ui/v-input.vue'
+import PreviewContextProvider from './PreviewContextProvider.vue'
+
+const buttonDisabled = shallowRef(false)
+const buttonClickCount = shallowRef(0)
+const buttonEventCount = shallowRef(0)
+const disabledButtonEventCount = shallowRef(0)
+const lastButtonEvent = shallowRef('尚未收到 click 事件')
+
+const inputValue = shallowRef('Varo controlled value')
+const inputFocused = shallowRef(false)
+const inputFocusRequested = shallowRef(false)
+const inputResetCount = shallowRef(0)
+const inputUpdateEventCount = shallowRef(0)
+const inputFocusEventCount = shallowRef(0)
+const inputBlurEventCount = shallowRef(0)
+const lastInputEvent = shallowRef('等待输入、聚焦或失焦')
+
+const contextMounted = shallowRef(true)
+const contextRevision = shallowRef(1)
+const contextValue = shallowRef('来自 Provider 的值 #1')
+const providerMountedCount = shallowRef(0)
+const providerUnmountedCount = shallowRef(0)
+const consumerMountedCount = shallowRef(0)
+const consumerUnmountedCount = shallowRef(0)
+
+const buttonStateLabel = computed(() => buttonDisabled.value ? 'disabled' : 'enabled')
+const trackedButtonLabel = computed(() => `测试按钮：已点击 ${buttonClickCount.value} 次`)
+const toggleButtonLabel = computed(() => buttonDisabled.value ? '启用测试按钮' : '禁用测试按钮')
+const buttonDiagnostic = computed(() => `state=${buttonStateLabel.value};clicks=${buttonClickCount.value};events=${buttonEventCount.value}`)
+const inputFocusState = computed(() => inputFocused.value ? 'focused' : inputFocusRequested.value ? 'requested' : 'blurred')
+const inputDiagnostic = computed(() => `value=${inputValue.value};focus=${inputFocusState.value};updates=${inputUpdateEventCount.value}`)
+const contextTreeState = computed(() => contextMounted.value ? 'mounted' : 'unmounted')
+const contextTreeToggleLabel = computed(() => contextMounted.value ? '卸载 Provider / Consumer' : '重新挂载 Provider / Consumer')
+const contextUpdateDisabled = computed(() => !contextMounted.value)
+const contextLifecycleDiagnostic = computed(() => `tree=${contextTreeState.value};provider=${providerMountedCount.value}/${providerUnmountedCount.value};consumer=${consumerMountedCount.value}/${consumerUnmountedCount.value}`)
+
+function recordTrackedButtonClick() {
+  buttonClickCount.value += 1
+  buttonEventCount.value += 1
+  lastButtonEvent.value = `收到 click 事件 #${buttonEventCount.value}`
+}
+
+function toggleTrackedButton() {
+  buttonDisabled.value = !buttonDisabled.value
+  lastButtonEvent.value = `测试按钮切换为 ${buttonStateLabel.value}`
+}
+
+function recordUnexpectedDisabledClick() {
+  disabledButtonEventCount.value += 1
+  lastButtonEvent.value = `错误：禁用按钮发出了 click #${disabledButtonEventCount.value}`
+}
+
+function updateInputValue(value: string) {
+  inputValue.value = value
+  inputUpdateEventCount.value += 1
+  lastInputEvent.value = `收到 update:value #${inputUpdateEventCount.value}`
+}
+
+function resetInputValue() {
+  inputResetCount.value += 1
+  inputValue.value = `外部重置值 #${inputResetCount.value}`
+  lastInputEvent.value = `父级写入受控值 #${inputResetCount.value}`
+}
+
+function requestInputFocus() {
+  inputFocusRequested.value = true
+  lastInputEvent.value = '父级请求 focus=true'
+}
+
+function requestInputBlur() {
+  inputFocusRequested.value = false
+  lastInputEvent.value = '父级请求 focus=false'
+}
+
+function recordInputFocus() {
+  inputFocused.value = true
+  inputFocusEventCount.value += 1
+  lastInputEvent.value = `收到 focus 事件 #${inputFocusEventCount.value}`
+}
+
+function recordInputBlur() {
+  inputFocused.value = false
+  inputFocusRequested.value = false
+  inputBlurEventCount.value += 1
+  lastInputEvent.value = `收到 blur 事件 #${inputBlurEventCount.value}`
+}
+
+function updateContextValue() {
+  contextRevision.value += 1
+  contextValue.value = `来自 Provider 的值 #${contextRevision.value}`
+}
+
+function toggleContextTree() {
+  contextMounted.value = !contextMounted.value
+}
+
+function recordProviderMounted() {
+  providerMountedCount.value += 1
+}
+
+function recordProviderUnmounted() {
+  providerUnmountedCount.value += 1
+}
+
+function recordConsumerMounted() {
+  consumerMountedCount.value += 1
+}
+
+function recordConsumerUnmounted() {
+  consumerUnmountedCount.value += 1
+}
+</script>
+
+<template>
+  <view class="box-border min-h-screen bg-[var(--varo-ui-bg)] px-3 py-4 text-[var(--varo-ui-text)]">
+    <view class="mb-3 grid gap-1 rounded-2xl bg-slate-950 p-4 text-white">
+      <text class="text-lg font-black">
+        Wevu 原生控件预览
+      </text>
+      <text class="text-xs leading-5 text-slate-300">
+        使用真实 Wevu / glass-easel 构建产物；这不是微信客户端模拟器，未伪造微信专属能力。
+      </text>
+    </view>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        VButton 事件与禁用态
+      </template>
+      <template #description>
+        动态禁用后，同一个 VButton 不再发出 click；固定禁用按钮的事件数应始终为 0。
+      </template>
+
+      <view class="grid gap-3">
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="button-state"
+          :data-preview-value="buttonDiagnostic"
+        >
+          <text>按钮状态：{{ buttonStateLabel }}</text>
+          <text data-preview-field="button-click-count">
+            按钮点击计数：{{ buttonClickCount }}
+          </text>
+          <text data-preview-field="button-event-count">
+            click 事件计数：{{ buttonEventCount }}
+          </text>
+          <text data-preview-field="disabled-button-event-count">
+            禁用按钮事件计数：{{ disabledButtonEventCount }}
+          </text>
+          <text data-preview-field="button-last-event">
+            最后事件：{{ lastButtonEvent }}
+          </text>
+        </view>
+
+        <VButton block :disabled="buttonDisabled" @click="recordTrackedButtonClick">
+          {{ trackedButtonLabel }}
+        </VButton>
+        <view class="grid grid-cols-2 gap-2">
+          <VButton block variant="outline" @click="toggleTrackedButton">
+            {{ toggleButtonLabel }}
+          </VButton>
+          <VButton block disabled variant="outline" @click="recordUnexpectedDisabledClick">
+            固定禁用按钮
+          </VButton>
+        </view>
+      </view>
+    </VCard>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        VInput 受控值与焦点
+      </template>
+      <template #description>
+        输入事件只请求父级更新；重置、focus 与 blur 都有可观察状态。
+      </template>
+
+      <view class="grid gap-3">
+        <VInput
+          aria-label="Web 预览受控输入"
+          clearable
+          :focus="inputFocusRequested"
+          input-id="web-preview-controlled-input"
+          label="受控输入"
+          placeholder="输入任意本地文本"
+          :value="inputValue"
+          @blur="recordInputBlur"
+          @focus="recordInputFocus"
+          @update:value="updateInputValue"
+        />
+        <view
+          class="grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+          data-preview-field="input-state"
+          :data-preview-value="inputDiagnostic"
+        >
+          <text class="break-words" data-preview-field="input-value">
+            受控值：{{ inputValue }}
+          </text>
+          <text data-preview-field="input-focus-state">
+            焦点状态：{{ inputFocusState }}
+          </text>
+          <text>update:value 事件：{{ inputUpdateEventCount }}</text>
+          <text>focus / blur 事件：{{ inputFocusEventCount }} / {{ inputBlurEventCount }}</text>
+          <text data-preview-field="input-last-event">
+            最后事件：{{ lastInputEvent }}
+          </text>
+        </view>
+        <view class="grid grid-cols-3 gap-2">
+          <VButton size="sm" variant="outline" @click="resetInputValue">
+            外部重置值
+          </VButton>
+          <VButton size="sm" :disabled="inputFocused" variant="outline" @click="requestInputFocus">
+            请求聚焦
+          </VButton>
+          <VButton size="sm" :disabled="!inputFocused" variant="outline" @click="requestInputBlur">
+            移除焦点
+          </VButton>
+        </view>
+      </view>
+    </VCard>
+
+    <view
+      class="mb-3 grid gap-1 rounded-xl bg-[var(--varo-ui-fill)] p-3 text-xs"
+      data-preview-field="context-lifecycle"
+      :data-preview-value="contextLifecycleDiagnostic"
+    >
+      <text data-preview-field="context-tree-state">
+        Context 树状态：{{ contextTreeState }}
+      </text>
+      <text data-preview-field="provider-lifecycle">
+        Provider 挂载 / 卸载：{{ providerMountedCount }} / {{ providerUnmountedCount }}
+      </text>
+      <text data-preview-field="consumer-lifecycle">
+        Consumer 挂载 / 卸载：{{ consumerMountedCount }} / {{ consumerUnmountedCount }}
+      </text>
+    </view>
+
+    <VCard class-name="mb-3" variant="outline">
+      <template #title>
+        VCard 插槽中的注入树
+      </template>
+      <template #description>
+        Provider / Consumer 树位于 VCard 默认插槽；缺少 Provider 会直接抛错。
+      </template>
+
+      <PreviewContextProvider
+        v-if="contextMounted"
+        :revision="contextRevision"
+        :value="contextValue"
+        @consumer-mounted="recordConsumerMounted"
+        @consumer-unmounted="recordConsumerUnmounted"
+        @mounted="recordProviderMounted"
+        @unmounted="recordProviderUnmounted"
+      />
+      <view v-else class="rounded-xl border border-dashed border-[var(--varo-ui-border)] p-4 text-center text-xs text-[var(--varo-ui-text-regular)]">
+        Provider / Consumer 已卸载；重新挂载会增加两者的 mounted 计数。
+      </view>
+
+      <template #footer>
+        <view class="grid gap-2">
+          <VButton block :disabled="contextUpdateDisabled" variant="outline" @click="updateContextValue">
+            更新注入值
+          </VButton>
+          <VButton block tone="default" variant="outline" @click="toggleContextTree">
+            {{ contextTreeToggleLabel }}
+          </VButton>
+        </view>
+      </template>
+    </VCard>
+  </view>
+</template>
+
+<json lang="jsonc">
+{
+  "$schema": "https://vite.icebreaker.top/page.json",
+  "navigationBarTitleText": "Wevu 控件预览",
+  "usingComponents": {}
+}
+</json>
diff --git a/apps/playground-weapp/src/pages/web-preview/preview-context.ts b/apps/playground-weapp/src/pages/web-preview/preview-context.ts
new file mode 100644
index 00000000..c9c25e42
--- /dev/null
+++ b/apps/playground-weapp/src/pages/web-preview/preview-context.ts
@@ -0,0 +1,10 @@
+interface ReadonlyValue<T> {
+  readonly value: T
+}
+
+export interface PreviewContextState {
+  revision: ReadonlyValue<number>
+  value: ReadonlyValue<string>
+}
+
+export const previewContextKey = Symbol('varo-web-preview-context')
diff --git a/apps/realworld-weapp/package.json b/apps/realworld-weapp/package.json
index 906c888c..59428967 100644
--- a/apps/realworld-weapp/package.json
+++ b/apps/realworld-weapp/package.json
@@ -22,7 +22,7 @@
     "dayjs": "^1.11.23",
     "es-toolkit": "^1.51.0",
     "mitt": "^3.0.0",
-    "wevu": "7.0.4"
+    "wevu": "^7.1.0"
   },
   "devDependencies": {
     "cross-env": "^10.1.0",
@@ -33,7 +33,7 @@
     "vite": "8.2.2",
     "vitest": "^4.1.11",
     "vue-tsc": "^3.3.11",
-    "weapp-tailwindcss": "^5.5.1",
-    "weapp-vite": "7.0.4"
+    "weapp-tailwindcss": "^5.5.3",
+    "weapp-vite": "^7.1.0"
   }
 }
diff --git a/apps/realworld-weapp/pnpm-workspace.yaml b/apps/realworld-weapp/pnpm-workspace.yaml
index 1379297a..23c8262e 100644
--- a/apps/realworld-weapp/pnpm-workspace.yaml
+++ b/apps/realworld-weapp/pnpm-workspace.yaml
@@ -12,23 +12,23 @@ allowBuilds:
   esbuild: true
 
 minimumReleaseAgeExclude:
-  - '@weapp-core/api@0.3.0'
-  - '@weapp-core/init@6.0.17'
+  - '@weapp-core/api@0.3.1'
+  - '@weapp-core/init@6.0.18'
   - '@weapp-core/schematics@6.2.2'
-  - '@weapp-vite/ast@7.0.4'
+  - '@weapp-vite/ast@7.1.0'
   - '@weapp-vite/devtools-runtime@0.4.17'
   - '@weapp-vite/eslint@0.2.3'
-  - '@weapp-vite/mcp@1.5.1'
-  - '@weapp-vite/miniprogram-automator@1.2.16'
+  - '@weapp-vite/mcp@1.5.2'
+  - '@weapp-vite/miniprogram-automator@1.2.17'
   - '@weapp-vite/qr@1.1.2'
   - '@weapp-vite/volar@2.1.6'
-  - '@weapp-vite/web@1.4.21'
-  - '@wevu/api@0.3.0'
-  - '@wevu/compiler@7.0.4'
-  - '@wevu/web-apis@1.2.40'
+  - '@weapp-vite/web@1.5.0'
+  - '@wevu/api@0.3.1'
+  - '@wevu/compiler@7.1.0'
+  - '@wevu/web-apis@1.2.41'
   - rolldown-require@2.0.28
-  - weapp-ide-cli@6.1.2
-  - weapp-tailwindcss@5.5.1
-  - weapp-vite@7.0.4
-  - wevu@7.0.4
+  - weapp-ide-cli@6.1.3
+  - weapp-tailwindcss@5.5.3
+  - weapp-vite@7.1.0
+  - wevu@7.1.0
   - '@weapp-tailwindcss/postcss@3.3.2'
diff --git a/package.json b/package.json
index 43f3347a..ebda2e4d 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,8 @@
     "vitest": "^4.1.11",
     "vue": "^3.5.42",
     "vue-tsc": "^3.3.11",
-    "weapp-tailwindcss": "^5.5.1",
-    "weapp-vite": "7.0.4",
-    "wevu": "7.0.4"
+    "weapp-tailwindcss": "^5.5.3",
+    "weapp-vite": "^7.1.0",
+    "wevu": "^7.1.0"
   }
 }
diff --git a/packages/cli/registry/components/agent-ui/AgentActivity.vue b/packages/cli/registry/components/agent-ui/AgentActivity.vue
index f8f3d339..7d0ded9c 100644
--- a/packages/cli/registry/components/agent-ui/AgentActivity.vue
+++ b/packages/cli/registry/components/agent-ui/AgentActivity.vue
@@ -3,6 +3,7 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentActivityItem, AgentAdvancedStatus } from './advanced-types'
 import { computed } from 'wevu'
 import { cn } from '../../lib/cn'
+import { agentSearchIcon, agentSparklesIcon, agentToolIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -16,65 +17,283 @@ const props = withDefaults(
   },
 )
 
-const rootClass = computed(() =>
-  cn('agent-activity overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-activity', props.className))
 const completedCount = computed(() => props.items.filter(item => item.status === 'completed').length)
+const currentItem = computed(() => props.items.find(item => item.status === 'running' || item.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentItem.value?.status === 'failed') {
+    return `阻塞于 ${currentItem.value.title}`
+  }
+  if (currentItem.value) {
+    return `正在执行 ${currentItem.value.title}`
+  }
+  if (props.items.length && completedCount.value === props.items.length) {
+    return '全部完成'
+  }
+  return '等待开始'
+})
+const displayItems = computed(() =>
+  props.items.map((item) => {
+    const ariaCurrent: 'step' | undefined = item.status === 'running' ? 'step' : undefined
+    return {
+      ...item,
+      ariaCurrent,
+      itemClass: `agent-activity__item is-${item.status} is-${item.kind}`,
+      kindLabel: item.kind === 'reasoning'
+        ? '推理'
+        : item.kind === 'search'
+          ? '检索'
+          : item.kind === 'tool'
+            ? '工具'
+            : '轨迹',
+      kindIcon: item.kind === 'search'
+        ? agentSearchIcon
+        : item.kind === 'tool'
+          ? agentToolIcon
+          : agentSparklesIcon,
+      statusChipClass: `agent-advanced__status is-${item.status}`,
+      statusLabel: item.status === 'completed'
+        ? 'Completed'
+        : item.status === 'failed'
+          ? 'Failed'
+          : item.status === 'running'
+            ? 'Running'
+            : 'Waiting',
+    }
+  }),
+)
 
-function statusClass(status: AgentAdvancedStatus) {
+function statusDotClass(status: AgentAdvancedStatus) {
   return cn(
-    'h-2 w-2 flex-none rounded-full',
-    status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    status === 'running' && 'agent-activity__running bg-[var(--varo-agent-primary)] shadow-[0_0_0_3px_#ccfbf1]',
-    status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    status === 'waiting' && 'bg-[var(--varo-agent-border-strong)]',
+    'agent-activity__status-dot',
+    `is-${status}`,
+    status === 'running' && 'agent-activity__running',
   )
 }
-
-function kindLabel(kind: AgentActivityItem['kind']) {
-  if (kind === 'reasoning') { return 'R' }
-  if (kind === 'search') { return 'S' }
-  if (kind === 'tool') { return 'T' }
-  return '·'
-}
 </script>
 
 <template>
   <view :class="rootClass" aria-live="polite">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
+    <view class="agent-activity__header">
+      <view class="agent-activity__heading">
+        <text class="agent-activity__title">
+          {{ title }}
+        </text>
+        <text class="agent-activity__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-activity__count">
         {{ completedCount }}/{{ items.length }}
       </text>
     </view>
-
-    <view class="grid p-2">
-      <view v-for="item in items" :key="item.id" class="grid min-h-[54px] grid-cols-[28px_minmax(0,1fr)_auto] items-start gap-2.5 rounded-xl px-2 py-2" :data-kind="item.kind" :data-status="item.status">
-        <text class="grid h-7 w-7 place-items-center rounded-lg bg-[var(--varo-agent-fill)] text-[10px] font-bold text-[var(--varo-agent-text)]" aria-hidden="true">
-          {{ kindLabel(item.kind) }}
-        </text>
-        <view class="grid min-w-0 gap-0.5">
-          <view class="flex items-baseline justify-between gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+    <view class="agent-activity__body">
+      <view
+        v-for="item in displayItems"
+        :key="item.id"
+        :class="item.itemClass"
+        :data-kind="item.kind"
+        :data-status="item.status"
+        :aria-current="item.ariaCurrent"
+      >
+        <view class="agent-activity__kind" aria-hidden="true">
+          <image class="agent-activity__kind-icon" :src="item.kindIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-activity__copy">
+          <view class="agent-activity__row">
+            <text class="agent-activity__name">
               {{ item.title }}
             </text>
-            <text v-if="item.duration" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
+            <view :class="item.statusChipClass" :data-status="item.status">
+              <view :class="statusDotClass(item.status)" aria-hidden="true" />
+              <text>{{ item.statusLabel }}</text>
+            </view>
+          </view>
+          <view class="agent-activity__meta">
+            <text class="agent-activity__kind-label">
+              {{ item.kindLabel }}
+            </text>
+            <text v-if="item.duration" class="agent-activity__duration">
               {{ item.duration }}
             </text>
           </view>
-          <text v-if="item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="item.detail" class="agent-activity__detail">
             {{ item.detail }}
           </text>
         </view>
-        <text :class="statusClass(item.status)" aria-hidden="true" />
       </view>
     </view>
   </view>
 </template>
 
-<style scoped>
+<style>
+.agent-activity {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-activity__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-activity__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-activity__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-activity__hint,
+.agent-activity__count,
+.agent-activity__duration,
+.agent-activity__detail {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-activity__count,
+.agent-activity__duration {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-activity__body {
+  display: grid;
+  padding: 8px 10px 12px;
+}
+
+.agent-activity__item {
+  display: flex;
+  gap: 10px;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-activity__item.is-running {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-activity__item.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-activity__kind {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-activity__kind-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-activity__item.is-reasoning .agent-activity__kind {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-activity__item.is-search .agent-activity__kind {
+  background: var(--varo-agent-source-blue-soft, #eff6ff);
+  border-color: var(--varo-agent-source-blue, #2563eb);
+}
+
+.agent-activity__item.is-tool .agent-activity__kind {
+  background: var(--varo-agent-source-violet-soft, #f5f3ff);
+  border-color: var(--varo-agent-source-violet, #7c3aed);
+}
+
+.agent-activity__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-activity__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-activity__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-advanced__status {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-activity__status-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--varo-agent-border-strong, #cbd5e1);
+  border-radius: 999px;
+}
+
+.agent-activity__status-dot.is-completed {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-activity__status-dot.is-running {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-activity__status-dot.is-failed {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-activity__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-activity__kind-label {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
 .agent-activity__running {
   animation: agent-activity-pulse 1s ease-in-out infinite;
 }
diff --git a/packages/cli/registry/components/agent-ui/AgentApproval.vue b/packages/cli/registry/components/agent-ui/AgentApproval.vue
index 4afed1fe..4111940b 100644
--- a/packages/cli/registry/components/agent-ui/AgentApproval.vue
+++ b/packages/cli/registry/components/agent-ui/AgentApproval.vue
@@ -35,6 +35,23 @@ const emit = defineEmits<{
 
 const internalValue = shallowRef(props.value ?? props.defaultValue)
 const currentValue = computed(() => props.value ?? internalValue.value)
+const renderedChoices = computed(() =>
+  props.choices.map((choice) => {
+    const disabled = Boolean(choice.disabled)
+    const selected = choice.value === currentValue.value
+    let stateClass = ''
+    if (selected) { stateClass = 'agent-approval__choice--selected' }
+    if (disabled) { stateClass += `${stateClass ? ' ' : ''}agent-approval__choice--disabled` }
+    return {
+      ...choice,
+      ariaChecked: selected,
+      stateClass,
+      disabled,
+      disabledData: String(disabled),
+      selectedData: String(selected),
+    }
+  }),
+)
 
 function select(value: string) {
   internalValue.value = value
@@ -51,7 +68,7 @@ function approve() {
     <view class="agent-approval__body">
       <view class="agent-approval__header">
         <view class="agent-approval__icon" aria-hidden="true">
-          <image :src="agentShieldAlertIcon" mode="aspectFit" />
+          <image class="agent-approval__icon-image" :src="agentShieldAlertIcon" mode="aspectFit" />
         </view>
         <view class="agent-approval__heading">
           <text class="agent-approval__eyebrow">
@@ -68,15 +85,16 @@ function approve() {
 
       <view v-if="choices.length" class="agent-approval__choices" role="radiogroup">
         <button
-          v-for="choice in choices"
+          v-for="choice in renderedChoices"
           :key="choice.value"
-          class="agent-approval__choice"
+          class="agent-native-button agent-approval__choice"
+          :class="choice.stateClass"
           type="button"
           role="radio"
           :disabled="choice.disabled"
-          :aria-checked="choice.value === currentValue"
-          :data-disabled="String(Boolean(choice.disabled))"
-          :data-selected="String(choice.value === currentValue)"
+          :aria-checked="choice.ariaChecked"
+          :data-disabled="choice.disabledData"
+          :data-selected="choice.selectedData"
           hover-class="agent-approval__choice--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
@@ -111,7 +129,7 @@ function approve() {
   </VCard>
 </template>
 
-<style scoped>
+<style>
 .agent-approval {
   color: var(--varo-ui-text);
   background: var(--varo-ui-surface);
@@ -143,7 +161,7 @@ function approve() {
   border-radius: 9px;
 }
 
-.agent-approval__icon image {
+.agent-approval__icon-image {
   width: 20px;
   height: 20px;
 }
@@ -196,12 +214,12 @@ function approve() {
   border-radius: 10px;
 }
 
-.agent-approval__choice[data-selected='true'] {
+.agent-approval__choice--selected {
   background: var(--varo-ui-primary-soft);
   border-color: var(--varo-ui-primary);
 }
 
-.agent-approval__choice[data-disabled='true'] {
+.agent-approval__choice--disabled {
   opacity: 0.5;
 }
 
@@ -218,7 +236,7 @@ function approve() {
   border-radius: 999px;
 }
 
-.agent-approval__choice[data-selected='true'] .agent-approval__radio {
+.agent-approval__choice--selected .agent-approval__radio {
   background: var(--varo-ui-primary);
   border: 4px solid var(--varo-ui-surface);
   box-shadow: 0 0 0 1px var(--varo-ui-primary);
diff --git a/packages/cli/registry/components/agent-ui/AgentArtifact.vue b/packages/cli/registry/components/agent-ui/AgentArtifact.vue
index 14a57e73..d8becbb5 100644
--- a/packages/cli/registry/components/agent-ui/AgentArtifact.vue
+++ b/packages/cli/registry/components/agent-ui/AgentArtifact.vue
@@ -16,32 +16,131 @@ defineProps<{
 const emit = defineEmits<{
   open: [artifact: AgentArtifactItem]
 }>()
+
+function kindLabel(kind?: AgentArtifactItem['kind']) {
+  if (kind === 'code') { return '代码产物' }
+  if (kind === 'image') { return '图像产物' }
+  if (kind === 'file') { return '文件产物' }
+  return '文档产物'
+}
 </script>
 
 <template>
-  <view class="agent-artifact overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm">
-    <view class="flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5">
-      <view class="grid min-w-0">
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view class="agent-artifact" :data-kind="artifact.kind || 'document'">
+    <view class="agent-artifact__header">
+      <view class="agent-artifact__heading">
+        <text class="agent-artifact__kind">
+          {{ kindLabel(artifact.kind) }}
+        </text>
+        <text class="agent-artifact__title">
           {{ artifact.title }}
         </text>
-        <text class="text-[10px] uppercase tracking-wider text-[var(--varo-agent-muted)]">
-          {{ artifact.kind || 'document' }}
+        <text v-if="artifact.language" class="agent-artifact__lang">
+          {{ artifact.language }}
         </text>
       </view>
-      <button class="min-h-9 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[12px] font-semibold text-[var(--varo-agent-text)]" type="button" @click="emit('open', artifact)">
+      <button class="agent-native-button agent-artifact__open" type="button" @click="emit('open', artifact)">
         打开
       </button>
     </view>
-    <scroll-view v-if="artifact.content" class="max-h-72 bg-slate-950" scroll-x scroll-y>
-      <text class="block whitespace-pre p-3.5 font-mono text-[12px] leading-5 text-slate-200">
+    <scroll-view v-if="artifact.content" class="agent-artifact__scroll" scroll-x scroll-y>
+      <text class="agent-artifact__body">
         {{ artifact.content }}
       </text>
     </scroll-view>
-    <image v-if="artifact.previewUrl" class="block h-60 w-full" :src="artifact.previewUrl" :alt="artifact.title" mode="aspectFit" />
+    <image v-if="artifact.previewUrl" class="agent-artifact__preview" :src="artifact.previewUrl" :alt="artifact.title" mode="aspectFit" />
   </view>
 </template>
 
+<style>
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__scroll {
+  max-height: 288px;
+  background: #0f172a;
+}
+
+.agent-artifact__body {
+  display: block;
+  padding: 14px 16px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  height: 240px;
+  background: #0b1220;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/packages/cli/registry/components/agent-ui/AgentComposerScope.vue b/packages/cli/registry/components/agent-ui/AgentComposerScope.vue
new file mode 100644
index 00000000..51eb1bb8
--- /dev/null
+++ b/packages/cli/registry/components/agent-ui/AgentComposerScope.vue
@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import type { AgentContextSource, AgentContextSourceStatus } from './advanced-types'
+import { computed } from 'wevu'
+import { agentPlugIcon } from './agent-icons'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    sources?: AgentContextSource[]
+    title?: string
+    usagePercent?: number
+  }>(),
+  {
+    disabled: false,
+    sources: () => [],
+    title: '可访问来源',
+    usagePercent: 0,
+  },
+)
+
+const emit = defineEmits<{
+  connect: [source: AgentContextSource]
+  toggle: [source: AgentContextSource, enabled: boolean]
+}>()
+
+const clampedUsage = computed(() => {
+  const usage = Number.isFinite(props.usagePercent) ? props.usagePercent : 0
+  return Math.min(100, Math.max(0, usage))
+})
+const usageWidth = computed(() => `${clampedUsage.value}%`)
+const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
+const headingHint = computed(() => {
+  if (!props.sources.length) { return '暂无可用来源' }
+  if (enabledCount.value === 0) { return '尚未授权任何来源' }
+  return `${enabledCount.value} 个来源已加入上下文`
+})
+const countLabel = computed(() => `${enabledCount.value}/${props.sources.length}`)
+const disabledActionClass = computed(() =>
+  props.disabled ? 'agent-workspace-card__action--disabled' : '',
+)
+const displaySources = computed(() => props.sources.map((source) => {
+  const status: AgentContextSourceStatus = source.status ?? 'available'
+  const statusLabel = status === 'available' ? '可用' : status === 'connecting' ? '连接中' : '不可用'
+  return {
+    actionClass: source.enabled ? '' : 'agent-workspace-card__action--primary',
+    canConnect: status === 'unavailable',
+    canToggle: status === 'available',
+    connectLabel: `连接${source.label}`,
+    enabledAttr: String(source.enabled),
+    rowClass: `agent-workspace-card__row is-${status}${source.enabled ? ' is-enabled' : ''}`,
+    source,
+    status,
+    statusLabel,
+    toggleLabel: `${source.enabled ? '停用' : '启用'}${source.label}`,
+    toggleText: source.enabled ? '停用' : '启用',
+  }
+}))
+</script>
+
+<template>
+  <view class="agent-composer-scope" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
+      </text>
+    </view>
+
+    <view v-if="displaySources.length" class="agent-workspace-card__body">
+      <view
+        v-for="item in displaySources"
+        :key="item.source.id"
+        :class="item.rowClass"
+        :data-status="item.status"
+        :data-enabled="item.enabledAttr"
+      >
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <image class="agent-workspace-card__icon" :src="agentPlugIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
+              {{ item.source.label }}
+            </text>
+            <text class="agent-workspace-card__chip">
+              {{ item.statusLabel }}
+            </text>
+          </view>
+          <text v-if="item.source.description || item.source.meta" class="agent-workspace-card__detail">
+            {{ item.source.description || item.source.meta }}
+          </text>
+        </view>
+        <button
+          v-if="item.canToggle"
+          class="agent-native-button agent-workspace-card__action"
+          :class="[item.actionClass, disabledActionClass]"
+          type="button"
+          :disabled="disabled"
+          :aria-label="item.toggleLabel"
+          :aria-pressed="item.source.enabled"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('toggle', item.source, !item.source.enabled)"
+        >
+          {{ item.toggleText }}
+        </button>
+        <button
+          v-else-if="item.canConnect"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+          :class="disabledActionClass"
+          type="button"
+          :disabled="disabled"
+          :aria-label="item.connectLabel"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('connect', item.source)"
+        >
+          连接
+        </button>
+        <text v-else class="agent-workspace-card__chip">
+          连接中
+        </text>
+      </view>
+    </view>
+    <view v-else class="agent-workspace-card__empty">
+      <text>暂无来源</text>
+    </view>
+
+    <view class="agent-composer-scope__meter">
+      <view class="agent-workspace-card__row-main">
+        <text class="agent-workspace-card__hint">
+          上下文使用
+        </text>
+        <text class="agent-composer-scope__usage">
+          {{ clampedUsage }}%
+        </text>
+      </view>
+      <view
+        class="agent-composer-scope__track"
+        role="progressbar"
+        aria-label="上下文使用量"
+        :aria-valuemin="0"
+        :aria-valuemax="100"
+        :aria-valuenow="clampedUsage"
+      >
+        <view class="agent-composer-scope__fill" :style="`width:${usageWidth}`" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.agent-composer-scope {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-connecting,
+.agent-workspace-card__row.is-enabled {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row.is-failed,
+.agent-workspace-card__row.is-unavailable {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__row.is-available .agent-workspace-card__mark {
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-connecting .agent-workspace-card__mark {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row.is-unavailable .agent-workspace-card__mark {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row.is-available .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-workspace-card__row.is-connecting .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__row.is-unavailable .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-workspace-card__action--disabled {
+  opacity: 0.45;
+}
+
+.agent-composer-scope__meter {
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-composer-scope__usage {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__fill {
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+</style>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/packages/cli/registry/components/agent-ui/AgentFileDiff.vue b/packages/cli/registry/components/agent-ui/AgentFileDiff.vue
index 9032ba59..63a563ef 100644
--- a/packages/cli/registry/components/agent-ui/AgentFileDiff.vue
+++ b/packages/cli/registry/components/agent-ui/AgentFileDiff.vue
@@ -76,14 +76,36 @@ const localOpen = shallowRef(props.defaultOpen)
 const localView = shallowRef<AgentDiffView>(props.defaultView)
 const localWrap = shallowRef(props.defaultWrap)
 const selectedKey = shallowRef('')
-const rootClass = computed(() =>
-  cn('agent-file-diff overflow-hidden rounded-[14px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
 
 const currentLineNumbers = computed(() => props.lineNumbers ?? localLineNumbers.value)
 const currentOpen = computed(() => props.open ?? localOpen.value)
 const currentView = computed(() => props.view ?? localView.value)
 const currentWrap = computed(() => props.wrap ?? localWrap.value)
+const rootClass = computed(() =>
+  cn(
+    'agent-file-diff overflow-hidden rounded-[14px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm',
+    currentOpen.value && 'agent-file-diff--open',
+    `agent-file-diff--indicators-${props.indicators}`,
+    !currentLineNumbers.value && 'agent-file-diff--line-numbers-hidden',
+    currentWrap.value && 'agent-file-diff--wrap',
+    props.className,
+  ),
+)
+const unifiedControlStateClass = computed(() =>
+  currentView.value === 'unified' ? 'agent-file-diff__control--active' : '',
+)
+const splitControlStateClass = computed(() =>
+  currentView.value === 'split' ? 'agent-file-diff__control--active' : '',
+)
+const wrapControlStateClass = computed(() =>
+  currentWrap.value ? 'agent-file-diff__control--active' : '',
+)
+const lineNumbersControlStateClass = computed(() =>
+  currentLineNumbers.value ? 'agent-file-diff__control--active' : '',
+)
+const disabledActionClass = computed(() =>
+  props.disabled ? 'agent-file-diff__action--disabled' : '',
+)
 const resolvedLabels = computed(() => ({ ...defaultAgentFileDiffLabels, ...props.labels }))
 const splitRows = computed(() => createAgentDiffSplitRows(props.lines))
 const inlinePairs = computed(() => createAgentDiffInlinePairs(splitRows.value))
@@ -143,6 +165,58 @@ const splitAriaLabels = computed(() =>
       : '',
   })),
 )
+const unifiedLineKeys = computed(() =>
+  props.lines.map((line, index) => line.id ?? index),
+)
+const unifiedLineStates = computed(() =>
+  props.lines.map((line, index) => {
+    const key = line.id ?? index
+    const selected = selectedKey.value === `${key}:unified`
+    return {
+      className: cn(
+        line.type === 'add' && 'agent-file-diff__line--addition',
+        line.type === 'remove' && 'agent-file-diff__line--deletion',
+        selected && 'agent-file-diff__line--selected',
+      ),
+      hunkClass: line.type === 'hunk' && !line.collapsedLines
+        ? 'agent-file-diff__hunk--disabled'
+        : '',
+      selected: String(selected),
+    }
+  }),
+)
+const splitRowKeys = computed(() =>
+  splitRows.value.map((row, index) => row.hunk?.line.id ?? `row:${index}`),
+)
+const splitRowStates = computed(() =>
+  splitRows.value.map((row) => {
+    const additionSelected = Boolean(
+      row.addition
+      && selectedKey.value === `${row.addition.line.id ?? row.addition.index}:new`,
+    )
+    const deletionSelected = Boolean(
+      row.deletion
+      && selectedKey.value === `${row.deletion.line.id ?? row.deletion.index}:old`,
+    )
+    return {
+      additionClass: cn(
+        row.addition?.line.type === 'add' && 'agent-file-diff__side--addition',
+        row.addition?.line.type === 'remove' && 'agent-file-diff__side--deletion',
+        additionSelected && 'agent-file-diff__side--selected',
+      ),
+      additionSelected: String(additionSelected),
+      deletionClass: cn(
+        row.deletion?.line.type === 'add' && 'agent-file-diff__side--addition',
+        row.deletion?.line.type === 'remove' && 'agent-file-diff__side--deletion',
+        deletionSelected && 'agent-file-diff__side--selected',
+      ),
+      deletionSelected: String(deletionSelected),
+      hunkClass: row.hunk && !row.hunk.line.collapsedLines
+        ? 'agent-file-diff__hunk--disabled'
+        : '',
+    }
+  }),
+)
 
 function statusLabel(status: AgentFileDiffStatus) {
   if (status === 'completed') { return 'Completed' }
@@ -222,15 +296,15 @@ function statusDotClass(status: AgentFileDiffStatus) {
       </view>
       <view class="agent-file-diff__header-actions">
         <view class="agent-file-diff__counts">
-          <text data-kind="addition" :aria-label="`${counts.additions} ${resolvedLabels.additions}`">
+          <text class="agent-file-diff__count agent-file-diff__count--addition" data-kind="addition" :aria-label="`${counts.additions} ${resolvedLabels.additions}`">
             +{{ counts.additions }}
           </text>
-          <text data-kind="deletion" :aria-label="`${counts.deletions} ${resolvedLabels.deletions}`">
+          <text class="agent-file-diff__count agent-file-diff__count--deletion" data-kind="deletion" :aria-label="`${counts.deletions} ${resolvedLabels.deletions}`">
             −{{ counts.deletions }}
           </text>
         </view>
         <button
-          class="agent-file-diff__control agent-file-diff__collapse"
+          class="agent-native-button agent-file-diff__control agent-file-diff__collapse"
           type="button"
           :aria-controls="bodyId"
           :aria-expanded="currentOpen"
@@ -246,7 +320,8 @@ function statusDotClass(status: AgentFileDiffStatus) {
       <view v-if="showToolbar" class="agent-file-diff__toolbar" :aria-label="resolvedLabels.display">
         <view class="agent-file-diff__segmented" role="group">
           <button
-            class="agent-file-diff__control"
+            class="agent-native-button agent-file-diff__control"
+            :class="unifiedControlStateClass"
             type="button"
             :aria-pressed="currentView === 'unified'"
             :data-active="String(currentView === 'unified')"
@@ -255,7 +330,8 @@ function statusDotClass(status: AgentFileDiffStatus) {
             {{ resolvedLabels.unified }}
           </button>
           <button
-            class="agent-file-diff__control"
+            class="agent-native-button agent-file-diff__control"
+            :class="splitControlStateClass"
             type="button"
             :aria-pressed="currentView === 'split'"
             :data-active="String(currentView === 'split')"
@@ -266,7 +342,8 @@ function statusDotClass(status: AgentFileDiffStatus) {
         </view>
         <view class="agent-file-diff__settings">
           <button
-            class="agent-file-diff__control"
+            class="agent-native-button agent-file-diff__control"
+            :class="wrapControlStateClass"
             type="button"
             :aria-pressed="currentWrap"
             :data-active="String(currentWrap)"
@@ -275,7 +352,8 @@ function statusDotClass(status: AgentFileDiffStatus) {
             {{ resolvedLabels.wrap }}
           </button>
           <button
-            class="agent-file-diff__control"
+            class="agent-native-button agent-file-diff__control"
+            :class="lineNumbersControlStateClass"
             type="button"
             :aria-pressed="currentLineNumbers"
             :data-active="String(currentLineNumbers)"
@@ -292,10 +370,11 @@ function statusDotClass(status: AgentFileDiffStatus) {
         </view>
 
         <view v-else-if="currentView === 'unified'" class="agent-file-diff__unified">
-          <template v-for="(line, index) in lines" :key="line.id ?? index">
+          <template v-for="(line, index) in lines" :key="unifiedLineKeys[index]">
             <button
               v-if="line.type === 'hunk'"
-              class="agent-file-diff__hunk"
+              class="agent-native-button agent-native-button--block agent-file-diff__hunk"
+              :class="unifiedLineStates[index].hunkClass"
               type="button"
               :disabled="!line.collapsedLines"
               :aria-label="hunkAriaLabels[index]"
@@ -311,10 +390,11 @@ function statusDotClass(status: AgentFileDiffStatus) {
             </button>
             <button
               v-else
-              class="agent-file-diff__line"
+              class="agent-native-button agent-native-button--block agent-file-diff__line"
+              :class="unifiedLineStates[index].className"
               type="button"
               :aria-label="unifiedAriaLabels[index]"
-              :data-selected="String(selectedKey === `${line.id ?? index}:unified`)"
+              :data-selected="unifiedLineStates[index].selected"
               :data-type="line.type"
               @click="selectLine(index, line, 'unified')"
             >
@@ -341,10 +421,11 @@ function statusDotClass(status: AgentFileDiffStatus) {
         </view>
 
         <view v-else class="agent-file-diff__split">
-          <template v-for="(row, rowIndex) in splitRows" :key="row.hunk?.line.id ?? `row:${rowIndex}`">
+          <template v-for="(row, rowIndex) in splitRows" :key="splitRowKeys[rowIndex]">
             <button
               v-if="row.hunk"
-              class="agent-file-diff__hunk"
+              class="agent-native-button agent-native-button--block agent-file-diff__hunk"
+              :class="splitRowStates[rowIndex].hunkClass"
               type="button"
               :disabled="!row.hunk.line.collapsedLines"
               :aria-label="splitAriaLabels[rowIndex].hunk"
@@ -361,10 +442,11 @@ function statusDotClass(status: AgentFileDiffStatus) {
             <view v-else class="agent-file-diff__split-row">
               <button
                 v-if="row.deletion"
-                class="agent-file-diff__side"
+                class="agent-native-button agent-native-button--block agent-file-diff__side"
+                :class="splitRowStates[rowIndex].deletionClass"
                 type="button"
                 :aria-label="splitAriaLabels[rowIndex].deletion"
-                :data-selected="String(selectedKey === `${row.deletion.line.id ?? row.deletion.index}:old`)"
+                :data-selected="splitRowStates[rowIndex].deletionSelected"
                 :data-type="row.deletion.line.type"
                 @click="selectLine(row.deletion.index, row.deletion.line, 'old')"
               >
@@ -388,10 +470,11 @@ function statusDotClass(status: AgentFileDiffStatus) {
 
               <button
                 v-if="row.addition"
-                class="agent-file-diff__side"
+                class="agent-native-button agent-native-button--block agent-file-diff__side"
+                :class="splitRowStates[rowIndex].additionClass"
                 type="button"
                 :aria-label="splitAriaLabels[rowIndex].addition"
-                :data-selected="String(selectedKey === `${row.addition.line.id ?? row.addition.index}:new`)"
+                :data-selected="splitRowStates[rowIndex].additionSelected"
                 :data-type="row.addition.line.type"
                 @click="selectLine(row.addition.index, row.addition.line, 'new')"
               >
@@ -419,16 +502,16 @@ function statusDotClass(status: AgentFileDiffStatus) {
     </view>
 
     <view v-if="currentOpen && showActions" class="agent-file-diff__footer">
-      <text>
+      <text class="agent-file-diff__footer-summary">
         <text class="agent-file-diff__changed-count">
           {{ counts.additions + counts.deletions }}
         </text> {{ resolvedLabels.changed }}
       </text>
-      <view>
-        <button class="agent-file-diff__action" type="button" :disabled="disabled" @click="emit('reject')">
+      <view class="agent-file-diff__footer-actions">
+        <button class="agent-native-button agent-file-diff__action" :class="disabledActionClass" type="button" :disabled="disabled" @click="emit('reject')">
           {{ resolvedLabels.reject }}
         </button>
-        <button class="agent-file-diff__action" type="button" :disabled="disabled" @click="emit('accept')">
+        <button class="agent-native-button agent-file-diff__action agent-file-diff__action--primary" :class="disabledActionClass" type="button" :disabled="disabled" @click="emit('accept')">
           {{ resolvedLabels.accept }}
         </button>
       </view>
@@ -438,7 +521,7 @@ function statusDotClass(status: AgentFileDiffStatus) {
 
 <style src="./agent-file-diff.css"></style>
 
-<style scoped>
+<style>
 .agent-file-diff__directory {
   flex: 0 1 auto;
   overflow: hidden;
@@ -474,16 +557,16 @@ function statusDotClass(status: AgentFileDiffStatus) {
   grid-template-columns: 380px 380px;
 }
 
-.agent-file-diff[data-wrap='true'] .agent-file-diff__split {
+.agent-file-diff--wrap .agent-file-diff__split {
   width: 640px;
   min-width: 640px;
 }
 
-.agent-file-diff[data-wrap='true'] .agent-file-diff__split-row {
+.agent-file-diff--wrap .agent-file-diff__split-row {
   grid-template-columns: 320px 320px;
 }
 
-.agent-file-diff__hunk:disabled {
+.agent-file-diff__hunk--disabled {
   opacity: 1;
 }
 
diff --git a/packages/cli/registry/components/agent-ui/AgentFlowchart.vue b/packages/cli/registry/components/agent-ui/AgentFlowchart.vue
index e4bb0fe6..ea83f516 100644
--- a/packages/cli/registry/components/agent-ui/AgentFlowchart.vue
+++ b/packages/cli/registry/components/agent-ui/AgentFlowchart.vue
@@ -22,74 +22,270 @@ const emit = defineEmits<{
   select: [node: AgentFlowNode]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-flowchart overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const rootClass = computed(() => cn('agent-flowchart', props.className))
+const countLabel = computed(() => `${props.nodes.length} 个步骤`)
+const displayNodes = computed(() =>
+  props.nodes.map((node, index) => ({
+    ...node,
+    indexLabel: String(index + 1).padStart(2, '0'),
+    typeLabel: node.type === 'trigger'
+      ? '触发'
+      : node.type === 'condition'
+        ? '条件'
+        : node.type === 'action'
+          ? '动作'
+          : '结果',
+    statusLabel: node.status === 'completed'
+      ? 'Completed'
+      : node.status === 'running'
+        ? 'Running'
+        : node.status === 'failed'
+          ? 'Failed'
+          : 'Waiting',
+  })),
 )
 
 function nodeClass(type: AgentFlowNode['type']) {
-  return cn(
-    'agent-flowchart__node grid min-h-[72px] w-full gap-1 rounded-[14px] border bg-[var(--varo-agent-surface)] p-3 text-left shadow-sm',
-    type === 'trigger' && 'border-[var(--varo-agent-border-strong)]',
-    type === 'condition' && 'border-[var(--varo-agent-warning)]',
-    type === 'action' && 'border-[var(--varo-agent-primary)]',
-    type === 'result' && 'border-[var(--varo-agent-success)]',
-  )
+  return cn('agent-native-button agent-native-button--block agent-flowchart__node', `is-${type}`)
 }
 
 function statusClass(status?: AgentAdvancedStatus) {
   return cn(
-    'h-2 w-2 rounded-full',
-    status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    status === 'running' && 'bg-[var(--varo-agent-primary)]',
-    status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    (!status || status === 'waiting') && 'bg-[var(--varo-agent-border-strong)]',
+    'agent-flowchart__status-dot',
+    status === 'completed' && 'is-completed',
+    status === 'running' && 'is-running',
+    status === 'failed' && 'is-failed',
   )
 }
+
+function selectNode(id: string) {
+  const node = props.nodes.find(entry => entry.id === id)
+  if (node) {
+    emit('select', node)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <button class="inline-flex min-h-9 items-center gap-1.5 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[11px] font-bold text-[var(--varo-agent-text)]" type="button" @click="emit('add', undefined)">
-        <image class="h-3.5 w-3.5" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
-        Step
+    <view class="agent-flowchart__header">
+      <view class="agent-flowchart__heading">
+        <text class="agent-flowchart__title">
+          {{ title }}
+        </text>
+        <text class="agent-flowchart__count">
+          {{ countLabel }}
+        </text>
+      </view>
+      <button class="agent-native-button agent-flowchart__add" type="button" @click="emit('add', undefined)">
+        <image class="agent-flowchart__add-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+        <text>Step</text>
       </button>
     </view>
 
-    <view class="grid p-3">
-      <template v-for="(node, index) in nodes" :key="node.id">
-        <button :class="nodeClass(node.type)" type="button" :data-type="node.type" @click="emit('select', node)">
-          <view class="flex items-center justify-between gap-2">
-            <text class="text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
-              {{ node.type }}
+    <view class="agent-flowchart__canvas">
+      <template v-for="(node, index) in displayNodes" :key="node.id">
+        <button
+          :class="nodeClass(node.type)"
+          type="button"
+          :data-type="node.type"
+          :data-status="node.status || 'waiting'"
+          @click="selectNode(node.id)"
+        >
+          <view class="agent-flowchart__node-head">
+            <text class="agent-flowchart__index" aria-hidden="true">
+              {{ node.indexLabel }}
             </text>
-            <text :class="statusClass(node.status)" aria-hidden="true" />
+            <text class="agent-flowchart__type">
+              {{ node.typeLabel }}
+            </text>
+            <view v-if="node.status" class="agent-advanced__status" :data-status="node.status">
+              <view :class="statusClass(node.status)" aria-hidden="true" />
+              <text>{{ node.statusLabel }}</text>
+            </view>
           </view>
-          <text class="text-[12px] font-bold text-[var(--varo-agent-foreground)]">
+          <text class="agent-flowchart__name">
             {{ node.label }}
           </text>
-          <text v-if="node.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="node.detail" class="agent-flowchart__detail">
             {{ node.detail }}
           </text>
         </button>
-        <button v-if="index < nodes.length - 1" class="agent-flowchart__connector mx-auto grid h-9 w-7 place-items-center border-0 bg-transparent" type="button" :aria-label="`Add after ${node.label}`" @click="emit('add', node.id)">
-          <image class="h-3.5 w-3.5" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+        <button
+          v-if="index < displayNodes.length - 1"
+          class="agent-native-button agent-flowchart__connector"
+          type="button"
+          :aria-label="`Add after ${node.label}`"
+          @click="emit('add', node.id)"
+        >
+          <image class="agent-flowchart__add-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
         </button>
       </template>
     </view>
   </view>
 </template>
 
-<style scoped>
-.agent-flowchart button::after {
-  border: 0;
+<style>
+.agent-flowchart {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 18px;
+}
+
+.agent-flowchart__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-flowchart__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-flowchart__title {
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-flowchart__count,
+.agent-flowchart__detail {
+  font-size: 11px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-flowchart__add {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 9px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-flowchart__add-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.agent-flowchart__canvas {
+  display: grid;
+  justify-items: center;
+  padding: 24px;
+}
+
+.agent-flowchart__node {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  max-width: 320px;
+  padding: 12px 14px;
+  text-align: left;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-flowchart__node.is-trigger {
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-flowchart__node.is-condition {
+  border-color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-flowchart__node.is-action {
+  border-color: var(--varo-agent-source-violet, #7c3aed);
+}
+
+.agent-flowchart__node.is-result {
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-flowchart__node-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-flowchart__index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 7px;
+}
+
+.agent-flowchart__type {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-advanced__status {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-flowchart__status-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--varo-agent-border-strong, #cbd5e1);
+  border-radius: 999px;
+}
+
+.agent-flowchart__status-dot.is-completed {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-flowchart__status-dot.is-running {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-flowchart__status-dot.is-failed {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-flowchart__name {
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
 }
 
 .agent-flowchart__connector {
-  background: linear-gradient(#cbd5e1, #cbd5e1) center / 1px 100% no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 36px;
+  background: linear-gradient(var(--varo-agent-border, #dbe3ea), var(--varo-agent-border, #dbe3ea)) center / 1px 100%
+    no-repeat;
+  border: 0;
 }
 </style>
 
diff --git a/packages/cli/registry/components/agent-ui/AgentInsightCard.vue b/packages/cli/registry/components/agent-ui/AgentInsightCard.vue
index 4566814e..14060f7a 100644
--- a/packages/cli/registry/components/agent-ui/AgentInsightCard.vue
+++ b/packages/cli/registry/components/agent-ui/AgentInsightCard.vue
@@ -27,69 +27,225 @@ const emit = defineEmits<{
 const active = computed(() =>
   props.insights[Math.min(Math.max(0, props.current), Math.max(0, props.insights.length - 1))],
 )
+const activeTone = computed(() => active.value?.tone || 'default')
+const countLabel = computed(() => `${props.insights.length ? props.current + 1 : 0}/${props.insights.length}`)
 const rootClass = computed(() =>
-  cn(
-    'agent-insight-card overflow-hidden rounded-2xl border bg-[var(--varo-agent-surface)] shadow-sm',
-    active.value?.tone === 'success' && 'border-[var(--varo-agent-success)]',
-    active.value?.tone === 'warning' && 'border-[var(--varo-agent-warning)]',
-    active.value?.tone === 'danger' && 'border-[var(--varo-agent-danger)]',
-    (!active.value?.tone || active.value.tone === 'default') && 'border-[var(--varo-agent-border)]',
-    props.className,
-  ),
+  cn('agent-insight-card', `is-${activeTone.value}`, props.className),
 )
-const activeTone = computed(() => active.value?.tone || 'default')
 
 function move(delta: number) {
   if (!props.insights.length) { return }
   emit('update:current', (props.current + delta + props.insights.length) % props.insights.length)
 }
+
+function emitAction() {
+  if (active.value) {
+    emit('action', active.value)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass" :data-tone="activeTone">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ insights.length ? current + 1 : 0 }}/{{ insights.length }}
+    <view class="agent-insight-card__header">
+      <view class="agent-insight-card__heading">
+        <text class="agent-insight-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-insight-card__label">
+          {{ active?.label || '运行指标' }}
+        </text>
+      </view>
+      <text class="agent-insight-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="active" class="relative grid min-h-32 place-content-center gap-2 px-5 py-5 text-center">
-      <text v-if="active.label" class="text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
-        {{ active.label }}
+    <view v-if="active" class="agent-insight-card__body">
+      <text v-if="active.value" class="agent-insight-card__value">
+        {{ active.value }}
       </text>
-      <text class="max-w-[520px] text-[15px] font-bold leading-6 text-[var(--varo-agent-foreground)]">
+      <text class="agent-insight-card__copy">
         {{ active.description }}
       </text>
-      <text v-if="active.value" class="text-2xl font-black tabular-nums text-[var(--varo-agent-primary)]">
-        {{ active.value }}
-      </text>
     </view>
-    <view v-else class="grid min-h-32 place-items-center text-[12px] text-[var(--varo-agent-muted)]">
-      No insights
+    <view v-else class="agent-insight-card__empty">
+      暂无洞察
     </view>
 
-    <view class="flex min-h-12 items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-3">
-      <view class="flex gap-1.5">
-        <button class="grid h-8 w-8 place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Previous insight" @click="move(-1)">
-          <image class="h-3.5 w-3.5 rotate-90" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+    <view class="agent-insight-card__footer">
+      <view class="agent-insight-card__nav">
+        <button class="agent-native-button agent-insight-card__nav-btn" type="button" aria-label="Previous insight" @click="move(-1)">
+          <image class="agent-insight-card__nav-icon is-prev" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
         </button>
-        <button class="grid h-8 w-8 place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Next insight" @click="move(1)">
-          <image class="h-3.5 w-3.5 -rotate-90" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+        <button class="agent-native-button agent-insight-card__nav-btn" type="button" aria-label="Next insight" @click="move(1)">
+          <image class="agent-insight-card__nav-icon is-next" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
         </button>
       </view>
-      <button v-if="active?.action" class="min-h-8 rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-white" type="button" @click="emit('action', active)">
+      <button v-if="active?.action" class="agent-native-button agent-insight-card__action" type="button" @click="emitAction">
         {{ active.action }}
       </button>
     </view>
   </view>
 </template>
 
-<style scoped>
-.agent-insight-card button::after {
-  border: 0;
+<style>
+.agent-insight-card {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-insight-card.is-success {
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-insight-card.is-warning {
+  border-color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-insight-card.is-danger {
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-insight-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-insight-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-insight-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-insight-card__label,
+.agent-insight-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-insight-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-insight-card__body {
+  display: grid;
+  gap: 8px;
+  min-height: 132px;
+  padding: 18px 16px 16px;
+}
+
+.agent-insight-card.is-success .agent-insight-card__body {
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-insight-card.is-warning .agent-insight-card__body {
+  background: var(--varo-agent-warning-soft, #fffbeb);
+}
+
+.agent-insight-card.is-danger .agent-insight-card__body {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-insight-card__value {
+  font-size: 32px;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-insight-card.is-success .agent-insight-card__value {
+  color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-insight-card.is-warning .agent-insight-card__value {
+  color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-insight-card.is-danger .agent-insight-card__value {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-insight-card__copy,
+.agent-insight-card__empty {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-insight-card__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 132px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-insight-card__footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-insight-card__nav {
+  display: flex;
+  gap: 6px;
+}
+
+.agent-insight-card__nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-insight-card__nav-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-insight-card__nav-icon.is-prev {
+  transform: rotate(90deg);
+}
+
+.agent-insight-card__nav-icon.is-next {
+  transform: rotate(-90deg);
+}
+
+.agent-insight-card__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary-foreground, #fff);
+  background: var(--varo-agent-primary, #0f766e);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 9px;
 }
 </style>
 
diff --git a/packages/cli/registry/components/agent-ui/AgentRetrievalProgress.vue b/packages/cli/registry/components/agent-ui/AgentRetrievalProgress.vue
new file mode 100644
index 00000000..132e6fdb
--- /dev/null
+++ b/packages/cli/registry/components/agent-ui/AgentRetrievalProgress.vue
@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import type { AgentRetrievalItem, AgentRetrievalStatus } from './advanced-types'
+import { computed } from 'wevu'
+
+const props = withDefaults(
+  defineProps<{
+    items?: AgentRetrievalItem[]
+    title?: string
+  }>(),
+  {
+    items: () => [],
+    title: '检索进度',
+  },
+)
+
+const emit = defineEmits<{
+  retry: [item: AgentRetrievalItem]
+}>()
+
+function statusLabel(status: AgentRetrievalStatus) {
+  if (status === 'queued') { return '排队中' }
+  if (status === 'reading') { return '读取中' }
+  if (status === 'read') { return '已读取' }
+  if (status === 'skipped') { return '已跳过' }
+  return '读取失败'
+}
+
+const settledCount = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
+const currentItem = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentItem.value?.status === 'failed') { return `阻塞于 ${currentItem.value.title}` }
+  if (currentItem.value) { return `正在读取 ${currentItem.value.title}` }
+  if (props.items.length && settledCount.value === props.items.length) { return '检索已完成' }
+  return '等待检索'
+})
+const countLabel = computed(() => `${settledCount.value}/${props.items.length}`)
+const displayItems = computed(() => props.items.map((item, index) => ({
+  canRetry: item.status === 'failed' && Boolean(item.retryable),
+  indexLabel: String(index + 1).padStart(2, '0'),
+  item,
+  retryLabel: `重试${item.title}`,
+  rowClass: `agent-workspace-card__row is-${item.status}`,
+  showPulse: item.status === 'reading',
+  statusLabel: statusLabel(item.status),
+})))
+</script>
+
+<template>
+  <view class="agent-retrieval" aria-live="polite" aria-atomic="false">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
+      </text>
+    </view>
+
+    <view v-if="displayItems.length" class="agent-workspace-card__body">
+      <view
+        v-for="entry in displayItems"
+        :key="entry.item.id"
+        :class="entry.rowClass"
+        :data-status="entry.item.status"
+      >
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <view v-if="entry.showPulse" class="agent-retrieval__pulse" />
+          <text v-else>
+            {{ entry.indexLabel }}
+          </text>
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
+              {{ entry.item.title }}
+            </text>
+            <text class="agent-workspace-card__chip">
+              {{ entry.statusLabel }}
+            </text>
+          </view>
+          <text v-if="entry.item.detail" class="agent-workspace-card__detail">
+            {{ entry.item.detail }}
+          </text>
+        </view>
+        <button
+          v-if="entry.canRetry"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+          type="button"
+          :aria-label="entry.retryLabel"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('retry', entry.item)"
+        >
+          重试
+        </button>
+      </view>
+    </view>
+    <view v-else class="agent-workspace-card__empty">
+      <text>暂无检索项</text>
+    </view>
+  </view>
+</template>
+
+<style>
+.agent-retrieval {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-reading {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-reading .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-retrieval__pulse {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: agent-retrieval-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-workspace-card__row.is-reading .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-skipped .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+@keyframes agent-retrieval-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-retrieval__pulse {
+    animation: none;
+  }
+}
+</style>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/packages/cli/registry/components/agent-ui/AgentSidebar.vue b/packages/cli/registry/components/agent-ui/AgentSidebar.vue
index ca2e333a..937c8ea2 100644
--- a/packages/cli/registry/components/agent-ui/AgentSidebar.vue
+++ b/packages/cli/registry/components/agent-ui/AgentSidebar.vue
@@ -3,7 +3,7 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentSidebarGroup, AgentSidebarItem } from './advanced-types'
 import { computed } from 'wevu'
 import { cn } from '../../lib/cn'
-import { agentChevronDownIcon } from './agent-icons'
+import { agentChatIcon, agentChevronDownIcon, agentPlusIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -29,12 +29,16 @@ const emit = defineEmits<{
 }>()
 
 const rootClass = computed(() =>
-  cn(
-    'agent-sidebar overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm transition-[width] duration-200',
-    props.collapsed ? 'w-16' : 'w-60',
-    props.className,
-  ),
+  cn('agent-sidebar', props.collapsed && 'is-collapsed', props.className),
 )
+const toggleIconClass = computed(() => props.collapsed ? '-rotate-90' : 'rotate-90')
+
+function itemClass(item: AgentSidebarItem) {
+  return cn(
+    'agent-native-button agent-native-button--block agent-sidebar__item',
+    item.id === props.activeId && 'is-active',
+  )
+}
 
 function select(item: AgentSidebarItem) {
   emit('update:activeId', item.id)
@@ -44,45 +48,51 @@ function select(item: AgentSidebarItem) {
 
 <template>
   <view :class="rootClass" :data-collapsed="String(collapsed)">
-    <view class="flex min-h-12 items-center justify-between gap-2 border-b border-[var(--varo-agent-border)] px-3">
-      <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ collapsed ? 'AI' : title }}
-      </text>
-      <button class="grid h-7 w-7 flex-none place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Toggle sidebar" @click="emit('update:collapsed', !collapsed)">
-        <image class="h-3.5 w-3.5" :class="[collapsed ? '-rotate-90' : 'rotate-90']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+    <view class="agent-sidebar__header">
+      <view class="agent-sidebar__heading">
+        <view class="agent-sidebar__brand" aria-hidden="true">
+          <image class="agent-sidebar__icon" :src="agentChatIcon" mode="aspectFit" />
+        </view>
+        <text v-if="!collapsed" class="agent-sidebar__title">
+          {{ title }}
+        </text>
+      </view>
+      <button class="agent-native-button agent-sidebar__toggle" type="button" aria-label="Toggle sidebar" @click="emit('update:collapsed', !collapsed)">
+        <image class="agent-sidebar__toggle-icon" :class="toggleIconClass" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </button>
     </view>
 
-    <button v-if="!collapsed" class="mx-2.5 mt-2.5 flex min-h-9 w-[calc(100%_-_20px)] items-center justify-center rounded-xl border border-[var(--varo-agent-border-strong)] bg-[var(--varo-agent-success-soft)] text-[12px] font-bold text-[var(--varo-agent-primary)]" type="button" @click="emit('create')">
-      + New chat
+    <button v-if="!collapsed" class="agent-native-button agent-sidebar__create" type="button" @click="emit('create')">
+      <image class="agent-sidebar__create-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+      <text>New chat</text>
     </button>
 
-    <view class="grid gap-3 p-2.5" role="navigation">
-      <view v-for="group in groups" :key="group.id" class="grid gap-1">
-        <text v-if="!collapsed" class="px-2 text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
+    <view class="agent-sidebar__nav" role="navigation">
+      <view v-for="group in groups" :key="group.id" class="agent-sidebar__group">
+        <text v-if="!collapsed" class="agent-sidebar__group-label">
           {{ group.label }}
         </text>
         <button
           v-for="item in group.items"
           :key="item.id"
-          :class="cn('flex min-h-10 w-full items-center gap-2 rounded-xl border-0 px-2 text-left', item.id === activeId ? 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-primary)]' : 'bg-transparent text-[var(--varo-agent-text)]')"
+          :class="itemClass(item)"
           type="button"
           :title="item.label"
           :data-active="String(item.id === activeId)"
           @click="select(item)"
         >
-          <text class="grid h-7 w-7 flex-none place-items-center rounded-lg bg-[var(--varo-agent-fill)] text-[10px] font-bold text-[var(--varo-agent-text)]" aria-hidden="true">
-            {{ item.label.charAt(0).toUpperCase() }}
-          </text>
-          <view v-if="!collapsed" class="grid min-w-0 flex-1 gap-px">
-            <text class="truncate text-[12px] font-semibold">
+          <view class="agent-sidebar__mark" aria-hidden="true">
+            <image class="agent-sidebar__icon" :src="agentChatIcon" mode="aspectFit" />
+          </view>
+          <view v-if="!collapsed" class="agent-sidebar__copy">
+            <text class="agent-sidebar__name">
               {{ item.label }}
             </text>
-            <text v-if="item.meta" class="truncate text-[10px] text-[var(--varo-agent-muted)]">
+            <text v-if="item.meta" class="agent-sidebar__meta">
               {{ item.meta }}
             </text>
           </view>
-          <text v-if="!collapsed && item.badge !== undefined" class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[var(--varo-agent-surface)] px-1 text-[10px] leading-none tabular-nums text-[var(--varo-agent-text)]">
+          <text v-if="!collapsed && item.badge !== undefined" class="agent-sidebar__badge">
             {{ item.badge }}
           </text>
         </button>
@@ -93,9 +103,167 @@ function select(item: AgentSidebarItem) {
   </view>
 </template>
 
-<style scoped>
-.agent-sidebar button::after {
+<style>
+.agent-sidebar {
+  display: grid;
+  align-content: start;
+  width: 248px;
+  min-height: 360px;
+  overflow: hidden;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 18px;
+}
+
+.agent-sidebar.is-collapsed {
+  width: 64px;
+}
+
+.agent-sidebar__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  padding: 0 12px;
+  background: var(--varo-agent-surface, #fff);
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-sidebar__heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-sidebar__brand,
+.agent-sidebar__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 8px;
+}
+
+.agent-sidebar__icon,
+.agent-sidebar__create-icon,
+.agent-sidebar__toggle-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.agent-sidebar__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
   border: 0;
+  border-radius: 9px;
+}
+
+.agent-sidebar__create {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  margin: 10px 10px 5px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 10px;
+}
+
+.agent-sidebar__nav {
+  display: grid;
+  gap: 10px;
+  padding: 7px;
+}
+
+.agent-sidebar__group {
+  display: grid;
+  gap: 3px;
+}
+
+.agent-sidebar__group-label {
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-sidebar__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 7px;
+  color: var(--varo-agent-muted, #667085);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-sidebar__item.is-active {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+}
+
+.agent-sidebar__copy {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-sidebar__name,
+.agent-sidebar__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-sidebar__name {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.agent-sidebar__meta {
+  font-size: 10px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-sidebar__badge {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/packages/cli/registry/components/agent-ui/AgentSourceReceipt.vue b/packages/cli/registry/components/agent-ui/AgentSourceReceipt.vue
new file mode 100644
index 00000000..ea6b5f29
--- /dev/null
+++ b/packages/cli/registry/components/agent-ui/AgentSourceReceipt.vue
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { AgentSourceReceiptItem } from './advanced-types'
+import { computed } from 'wevu'
+import { agentReceiptIcon } from './agent-icons'
+
+const props = withDefaults(
+  defineProps<{
+    items?: AgentSourceReceiptItem[]
+    summary?: string
+    title?: string
+  }>(),
+  {
+    items: () => [],
+    summary: '',
+    title: '来源回执',
+  },
+)
+
+const emit = defineEmits<{
+  connect: [item: AgentSourceReceiptItem]
+  open: [item: AgentSourceReceiptItem]
+}>()
+
+const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
+const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+const headingHint = computed(() => {
+  if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+  if (props.summary) { return props.summary }
+  if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+  return '回答完成后核对来源'
+})
+const countLabel = computed(() => `${readCount.value}/${props.items.length}`)
+const displayItems = computed(() => props.items.map((item) => {
+  const statusLabel = item.status === 'read' ? '已读取' : item.status === 'skipped' ? '已跳过' : '读取失败'
+  return {
+    canConnect: item.status === 'failed',
+    canOpen: item.status === 'read',
+    connectLabel: `连接${item.label}`,
+    countLabel: item.itemCount === undefined ? '' : `${item.itemCount} 项`,
+    item,
+    openLabel: `查看${item.label}`,
+    rowClass: `agent-workspace-card__row is-${item.status}`,
+    statusLabel,
+  }
+}))
+</script>
+
+<template>
+  <view class="agent-source-receipt" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
+      </text>
+    </view>
+
+    <view v-if="displayItems.length" class="agent-workspace-card__body">
+      <view
+        v-for="entry in displayItems"
+        :key="entry.item.id"
+        :class="entry.rowClass"
+        :data-status="entry.item.status"
+      >
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <image class="agent-workspace-card__icon" :src="agentReceiptIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
+              {{ entry.item.label }}
+            </text>
+            <text v-if="entry.countLabel" class="agent-workspace-card__meta">
+              {{ entry.countLabel }}
+            </text>
+          </view>
+          <text v-if="entry.item.detail" class="agent-workspace-card__detail">
+            {{ entry.item.detail }}
+          </text>
+          <text class="agent-workspace-card__chip">
+            {{ entry.statusLabel }}
+          </text>
+        </view>
+        <button
+          v-if="entry.canOpen"
+          class="agent-native-button agent-workspace-card__action"
+          type="button"
+          :aria-label="entry.openLabel"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('open', entry.item)"
+        >
+          查看
+        </button>
+        <button
+          v-else-if="entry.canConnect"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+          type="button"
+          :aria-label="entry.connectLabel"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('connect', entry.item)"
+        >
+          连接
+        </button>
+      </view>
+    </view>
+    <view v-else class="agent-workspace-card__empty">
+      <text>暂无来源回执</text>
+    </view>
+  </view>
+</template>
+
+<style>
+.agent-source-receipt {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__mark {
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__mark {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  width: fit-content;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-skipped .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+</style>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/packages/cli/registry/components/agent-ui/AgentTaskList.vue b/packages/cli/registry/components/agent-ui/AgentTaskList.vue
index f4595415..392930e8 100644
--- a/packages/cli/registry/components/agent-ui/AgentTaskList.vue
+++ b/packages/cli/registry/components/agent-ui/AgentTaskList.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { AgentTask } from './types'
 import { computed } from 'wevu'
-import VProgress from '../ui/v-progress.vue'
-import { agentCheckIcon } from './agent-icons'
+import { agentCheckIcon, agentCloseIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -15,62 +14,307 @@ const props = withDefaults(
   },
 )
 
-function indexClass(status: AgentTask['status']) {
-  if (status === 'completed') { return 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' }
-  if (status === 'running') { return 'border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]' }
-  if (status === 'failed') { return 'border-[var(--varo-agent-danger)] bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]' }
-  return 'border-[var(--varo-agent-border-strong)] text-[var(--varo-agent-text)]'
-}
-
 const completedCount = computed(() => props.tasks.filter(task => task.status === 'completed').length)
+const currentTask = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentTask.value?.status === 'failed') {
+    return `阻塞于 ${currentTask.value.title}`
+  }
+  if (currentTask.value) {
+    return `正在执行 ${currentTask.value.title}`
+  }
+  if (props.tasks.length && completedCount.value === props.tasks.length) {
+    return '全部完成'
+  }
+  return '等待开始'
+})
 const displayTasks = computed(() =>
-  props.tasks.map(task => ({
-    ...task,
-    progressStatus: task.status === 'failed' ? 'danger' as const : task.status === 'completed' ? 'success' as const : 'active' as const,
-  })),
+  props.tasks.map((task, index) => {
+    const ariaCurrent: 'step' | undefined = task.status === 'running' ? 'step' : undefined
+    return {
+      ...task,
+      ariaCurrent,
+      indexLabel: String(index + 1),
+      itemClass: `agent-task-list__item is-${task.status}`,
+      progressWidth: task.progress === undefined ? '' : `${Math.min(100, Math.max(0, task.progress))}%`,
+      statusLabel: task.status === 'completed'
+        ? '已完成'
+        : task.status === 'failed'
+          ? '失败'
+          : task.status === 'running'
+            ? '进行中'
+            : task.status === 'waiting'
+              ? '等待中'
+              : '待开始',
+    }
+  }),
 )
 </script>
 
 <template>
-  <view class="agent-tasks overflow-hidden rounded-[14px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" aria-live="polite">
-    <view class="flex min-h-11 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-[13px] font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[12px] tabular-nums text-[var(--varo-agent-muted)]">
+  <view class="agent-task-list" aria-live="polite">
+    <view class="agent-task-list__header">
+      <view class="agent-task-list__heading">
+        <text class="agent-task-list__title">
+          {{ title }}
+        </text>
+        <text class="agent-task-list__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-task-list__count">
         {{ completedCount }}/{{ tasks.length }}
       </text>
     </view>
-    <view class="grid divide-y divide-slate-50">
-      <view v-for="(task, index) in displayTasks" :key="task.id" class="flex min-h-[50px] items-center gap-2.5 px-[13px] py-2">
-        <view class="grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold" :class="[indexClass(task.status)]" aria-hidden="true">
-          <image v-if="task.status === 'completed'" class="h-3.5 w-3.5" :src="agentCheckIcon" mode="aspectFit" />
+    <view class="agent-task-list__body">
+      <view
+        v-for="task in displayTasks"
+        :key="task.id"
+        :class="task.itemClass"
+        :data-status="task.status"
+        :aria-current="task.ariaCurrent"
+      >
+        <view class="agent-task-list__marker" aria-hidden="true">
+          <image v-if="task.status === 'completed'" class="agent-task-list__icon" :src="agentCheckIcon" mode="aspectFit" />
+          <image v-else-if="task.status === 'failed'" class="agent-task-list__icon" :src="agentCloseIcon" mode="aspectFit" />
+          <view v-else-if="task.status === 'running'" class="agent-task-list__pulse" />
           <text v-else>
-            {{ index + 1 }}
+            {{ task.indexLabel }}
           </text>
         </view>
-        <view class="grid min-w-0 flex-1 gap-1.5">
-          <view class="flex items-baseline justify-between gap-2.5">
-            <text class="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-task-list__copy">
+          <view class="agent-task-list__row">
+            <text class="agent-task-list__name">
               {{ task.title }}
             </text>
-            <text v-if="task.meta" class="flex-none text-[11px] text-[var(--varo-agent-muted)]">
-              {{ task.meta }}
-            </text>
+            <view class="agent-task-list__meta">
+              <text class="agent-task-list__chip">
+                {{ task.statusLabel }}
+              </text>
+              <text v-if="task.meta" class="agent-task-list__duration">
+                {{ task.meta }}
+              </text>
+            </view>
+          </view>
+          <text v-if="task.description" class="agent-task-list__description">
+            {{ task.description }}
+          </text>
+          <view v-if="task.progressWidth" class="agent-task-list__track" aria-hidden="true">
+            <view class="agent-task-list__fill" :style="`width:${task.progressWidth}`" />
           </view>
-          <VProgress
-            v-if="task.progress !== undefined"
-            :percentage="task.progress"
-            :show-text="false"
-            :stroke-width="4"
-            :status="task.progressStatus"
-          />
         </view>
       </view>
     </view>
   </view>
 </template>
 
+<style>
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__hint,
+.agent-task-list__count,
+.agent-task-list__duration,
+.agent-task-list__description {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count,
+.agent-task-list__duration {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+}
+
+.agent-task-list__item {
+  position: relative;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item.is-running .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.agent-task-list__pulse {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: agent-task-list-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  flex: 1;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-task-list__item.is-waiting .agent-task-list__name,
+.agent-task-list__item.is-idle .agent-task-list__name {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-task-list__item.is-running .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-task-list__track {
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__fill {
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__fill {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__fill {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item.is-running {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+@keyframes agent-task-list-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-task-list__pulse {
+    animation: none;
+  }
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/packages/cli/registry/components/agent-ui/AgentTaskRunner.vue b/packages/cli/registry/components/agent-ui/AgentTaskRunner.vue
new file mode 100644
index 00000000..1b1e43cd
--- /dev/null
+++ b/packages/cli/registry/components/agent-ui/AgentTaskRunner.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import type { AgentTask } from './types'
+import { computed } from 'wevu'
+import AgentTaskList from './AgentTaskList.vue'
+
+const props = withDefaults(
+  defineProps<{
+    busy?: boolean
+    tasks?: AgentTask[]
+    title?: string
+  }>(),
+  {
+    busy: false,
+    tasks: () => [],
+    title: '执行计划',
+  },
+)
+
+const emit = defineEmits<{
+  approve: [task: AgentTask]
+  cancel: []
+  retry: [task: AgentTask]
+}>()
+
+const actionableTasks = computed(() => {
+  if (props.busy) { return [] }
+  return props.tasks.filter(task =>
+    (task.status === 'failed' && task.retryable)
+    || (task.status === 'waiting' && task.requiresApproval),
+  ).map(task => ({
+    approveLabel: `批准${task.title}`,
+    retryLabel: `重试${task.title}`,
+    rowClass: `agent-workspace-card__row is-${task.status}`,
+    statusLabel: task.status === 'failed' ? '执行失败' : '等待确认',
+    task,
+  }))
+})
+const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
+const showControls = computed(() => actionableTasks.value.length > 0 || canCancel.value)
+</script>
+
+<template>
+  <view class="agent-task-runner">
+    <AgentTaskList class="block w-full min-w-0 max-w-full overflow-hidden" :tasks="tasks" :title="title" />
+
+    <view v-if="showControls" class="agent-task-runner__controls">
+      <view v-if="actionableTasks.length" class="agent-workspace-card__body">
+        <view
+          v-for="entry in actionableTasks"
+          :key="entry.task.id"
+          :class="entry.rowClass"
+          :data-status="entry.task.status"
+        >
+          <view class="agent-workspace-card__copy">
+            <text class="agent-workspace-card__name">
+              {{ entry.task.title }}
+            </text>
+            <text v-if="entry.task.description" class="agent-workspace-card__detail">
+              {{ entry.task.description }}
+            </text>
+            <text class="agent-workspace-card__chip">
+              {{ entry.statusLabel }}
+            </text>
+          </view>
+          <button
+            v-if="entry.task.status === 'failed'"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+            type="button"
+            :aria-label="entry.retryLabel"
+            hover-class="agent-workspace-card__action--pressed"
+            :hover-start-time="20"
+            :hover-stay-time="70"
+            @click="emit('retry', entry.task)"
+          >
+            重试
+          </button>
+          <button
+            v-else
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+            type="button"
+            :aria-label="entry.approveLabel"
+            hover-class="agent-workspace-card__action--pressed"
+            :hover-start-time="20"
+            :hover-stay-time="70"
+            @click="emit('approve', entry.task)"
+          >
+            批准
+          </button>
+        </view>
+      </view>
+
+      <view v-if="canCancel" class="agent-task-runner__cancel">
+        <text class="agent-workspace-card__hint">
+          任务正在执行
+        </text>
+        <button
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--danger"
+          type="button"
+          aria-label="取消当前任务"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('cancel')"
+        >
+          取消
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.agent-task-runner__controls {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__detail,
+.agent-workspace-card__hint {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__chip {
+  width: fit-content;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-waiting .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__action--pressed {
+  opacity: 0.82;
+}
+</style>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/packages/cli/registry/components/agent-ui/AgentThreadVersions.vue b/packages/cli/registry/components/agent-ui/AgentThreadVersions.vue
new file mode 100644
index 00000000..e567c9bd
--- /dev/null
+++ b/packages/cli/registry/components/agent-ui/AgentThreadVersions.vue
@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import type { AgentThreadVersion } from '@varo-ui/ai'
+import { computed } from 'wevu'
+import { agentBranchIcon } from './agent-icons'
+
+const props = withDefaults(
+  defineProps<{
+    activeId?: string
+    title?: string
+    versions?: readonly AgentThreadVersion[]
+  }>(),
+  {
+    activeId: '',
+    title: '会话版本',
+    versions: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  branch: [version: AgentThreadVersion]
+  pin: [version: AgentThreadVersion]
+  select: [version: AgentThreadVersion]
+}>()
+
+const displayVersions = computed(() => {
+  const labels = new Map<string, string>()
+  props.versions.forEach((version, index) => {
+    labels.set(version.id, version.label || `版本 ${index + 1}`)
+  })
+  return props.versions.map((version, index) => {
+    const active = version.id === props.activeId
+    const label = version.label || `版本 ${index + 1}`
+    return {
+      active,
+      activeAttr: String(active),
+      branchLabel: `从${label}创建分支`,
+      cardStateClass: active ? 'agent-thread-versions__card--active' : '',
+      label,
+      parentLabel: version.parentId ? labels.get(version.parentId) || version.parentId : '起始版本',
+      pinLabel: `固定${label}`,
+      selectLabel: `选择${label}`,
+      summary: version.summary || '暂无版本摘要',
+      version,
+    }
+  })
+})
+const headingHint = computed(() => {
+  const active = displayVersions.value.find(entry => entry.active)
+  return active ? `当前 ${active.label}` : '选择一个会话版本'
+})
+const countLabel = computed(() => `${props.versions.length} 个版本`)
+</script>
+
+<template>
+  <view class="agent-thread-versions" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
+      </text>
+    </view>
+
+    <view v-if="displayVersions.length" class="agent-thread-versions__list" role="list" aria-label="会话版本列表">
+      <view
+        v-for="entry in displayVersions"
+        :key="entry.version.id"
+        class="agent-thread-versions__card box-border grid w-full min-w-0 max-w-full gap-2"
+        :class="entry.cardStateClass"
+        :data-active="entry.activeAttr"
+        role="listitem"
+      >
+        <view class="agent-workspace-card__row-main">
+          <view class="agent-workspace-card__mark" aria-hidden="true">
+            <image class="agent-workspace-card__icon" :src="agentBranchIcon" mode="aspectFit" />
+          </view>
+          <text class="agent-workspace-card__name">
+            {{ entry.label }}
+          </text>
+          <text v-if="entry.active" class="agent-workspace-card__chip">
+            当前
+          </text>
+          <text v-else-if="entry.version.pinned" class="agent-workspace-card__chip">
+            已固定
+          </text>
+        </view>
+        <text class="agent-workspace-card__detail">
+          {{ entry.summary }}
+        </text>
+        <view class="agent-thread-versions__meta">
+          <text>来源：{{ entry.parentLabel }}</text>
+          <text v-if="entry.version.createdAt">
+            创建：{{ entry.version.createdAt }}
+          </text>
+        </view>
+        <view class="agent-thread-versions__actions">
+          <button
+            v-if="!entry.active"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+            type="button"
+            :aria-label="entry.selectLabel"
+            hover-class="agent-workspace-card__action--pressed"
+            :hover-start-time="20"
+            :hover-stay-time="70"
+            @click="emit('select', entry.version)"
+          >
+            选择
+          </button>
+          <button
+            class="agent-native-button agent-workspace-card__action"
+            type="button"
+            :aria-label="entry.branchLabel"
+            hover-class="agent-workspace-card__action--pressed"
+            :hover-start-time="20"
+            :hover-stay-time="70"
+            @click="emit('branch', entry.version)"
+          >
+            分支
+          </button>
+          <button
+            v-if="!entry.version.pinned"
+            class="agent-native-button agent-workspace-card__action"
+            type="button"
+            :aria-label="entry.pinLabel"
+            hover-class="agent-workspace-card__action--pressed"
+            :hover-start-time="20"
+            :hover-stay-time="70"
+            @click="emit('pin', entry.version)"
+          >
+            固定
+          </button>
+        </view>
+      </view>
+    </view>
+    <view v-else class="agent-workspace-card__empty">
+      <text>暂无会话版本</text>
+    </view>
+  </view>
+</template>
+
+<style>
+.agent-thread-versions {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.agent-thread-versions__card {
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-thread-versions__card--active {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 999px;
+}
+
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+</style>
+
+<json lang="jsonc">
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
+</json>
diff --git a/packages/cli/registry/components/agent-ui/AgentToolResult.vue b/packages/cli/registry/components/agent-ui/AgentToolResult.vue
index d5bbacfb..ba6703fe 100644
--- a/packages/cli/registry/components/agent-ui/AgentToolResult.vue
+++ b/packages/cli/registry/components/agent-ui/AgentToolResult.vue
@@ -3,7 +3,6 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentAdvancedStatus } from './advanced-types'
 import { computed, shallowRef } from 'wevu'
 import { cn } from '../../lib/cn'
-import { agentChevronDownIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -28,60 +27,209 @@ const emit = defineEmits<{
 }>()
 
 const open = shallowRef(props.defaultOpen || props.status === 'running' || props.status === 'failed')
-const rootClass = computed(() =>
-  cn('agent-tool-result overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const meta = computed(() => [props.duration, props.summary].filter(Boolean).join(' · '))
+const openAttr = computed(() => String(open.value))
+const statusText = computed(() => {
+  if (props.status === 'completed') {
+    return 'Completed'
+  }
+  if (props.status === 'failed') {
+    return 'Failed'
+  }
+  if (props.status === 'running') {
+    return 'Running'
+  }
+  return 'Waiting'
+})
+const rootClass = computed(() => cn('agent-tool-result', !open.value && 'is-closed', props.className))
+const headerClass = computed(() =>
+  cn('agent-native-button agent-native-button--block agent-tool-result__header'),
+)
+const statusChipClass = computed(() =>
+  cn('agent-tool-result__status', `is-${props.status}`),
+)
+const dotClass = computed(() =>
+  cn(
+    'agent-tool-result__status-dot',
+    props.status === 'running' && 'agent-tool-result__running',
+  ),
 )
 
 function toggle() {
   open.value = !open.value
   emit('update:open', open.value)
 }
-
-function dotClass() {
-  return cn(
-    'h-2 w-2 flex-none rounded-full',
-    props.status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    props.status === 'running' && 'agent-tool-result__running bg-[var(--varo-agent-primary)] shadow-[0_0_0_3px_#ccfbf1]',
-    props.status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    props.status === 'waiting' && 'bg-[var(--varo-agent-border-strong)]',
-  )
-}
 </script>
 
 <template>
-  <view :class="rootClass" :data-status="status">
-    <button class="flex min-h-12 w-full items-center justify-between gap-3 border-0 bg-[var(--varo-agent-surface)] px-[13px] text-left" type="button" :aria-expanded="open" @click="toggle">
-      <view class="flex min-w-0 items-center gap-2.5">
-        <text :class="dotClass()" aria-hidden="true" />
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view :class="rootClass" :data-open="openAttr" :data-status="status">
+    <button :class="headerClass" type="button" :aria-expanded="open" @click="toggle">
+      <view class="agent-tool-result__command">
+        <text class="agent-tool-result__prompt" aria-hidden="true">
+          $
+        </text>
+        <text class="agent-tool-result__name">
           {{ name }}
         </text>
       </view>
-      <view class="flex flex-none items-center gap-2">
-        <text class="text-[11px] text-[var(--varo-agent-muted)]">
-          {{ duration || summary }}
+      <view class="agent-tool-result__meta">
+        <view :class="statusChipClass">
+          <view :class="dotClass" aria-hidden="true" />
+          <text>{{ statusText }}</text>
+        </view>
+        <text v-if="meta" class="agent-tool-result__duration">
+          {{ meta }}
         </text>
-        <image class="h-4 w-4 transition-transform" :class="[open && 'rotate-180']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </view>
     </button>
 
-    <view v-if="open" class="border-t border-slate-800 bg-slate-950 p-3 text-slate-300">
+    <view v-if="open" class="agent-tool-result__body">
       <slot>
-        <text class="block whitespace-pre-wrap font-mono text-[11px] leading-[17px]">
+        <text class="agent-tool-result__output">
           {{ output }}
         </text>
       </slot>
     </view>
 
-    <button v-if="status === 'failed' && open" class="m-3 min-h-8 rounded-lg border border-[var(--varo-agent-danger)] bg-[var(--varo-agent-surface)] px-2.5 text-[11px] font-bold text-[var(--varo-agent-danger)]" type="button" @click="emit('retry')">
+    <button v-if="status === 'failed' && open" class="agent-native-button agent-tool-result__retry" type="button" @click="emit('retry')">
       Retry
     </button>
   </view>
 </template>
 
-<style scoped>
-.agent-tool-result button::after {
+<style>
+.agent-tool-result {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-tool-result__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  background: #111c30;
   border: 0;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-tool-result.is-closed .agent-tool-result__header {
+  border-bottom-color: transparent;
+}
+
+.agent-tool-result__command {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agent-tool-result__prompt {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2dd4bf;
+}
+
+.agent-tool-result__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-tool-result__meta {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-tool-result__status {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 12%);
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 999px;
+}
+
+.agent-tool-result__status.is-completed,
+.agent-tool-result__status.is-running {
+  color: #5eead4;
+  background: rgb(45 212 191 / 12%);
+  border-color: rgb(45 212 191 / 24%);
+}
+
+.agent-tool-result__status.is-failed {
+  color: #fca5a5;
+  background: rgb(248 113 113 / 12%);
+  border-color: rgb(248 113 113 / 24%);
+}
+
+.agent-tool-result__status-dot {
+  width: 7px;
+  height: 7px;
+  background: #94a3b8;
+  border-radius: 999px;
+}
+
+.agent-tool-result__status.is-completed .agent-tool-result__status-dot,
+.agent-tool-result__status.is-running .agent-tool-result__status-dot {
+  background: #2dd4bf;
+}
+
+.agent-tool-result__status.is-failed .agent-tool-result__status-dot {
+  background: #f87171;
+}
+
+.agent-tool-result__duration {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: #94a3b8;
+}
+
+.agent-tool-result__body {
+  padding: 12px;
+  color: #cbd5e1;
+  background: #0f172a;
+}
+
+.agent-tool-result__output {
+  display: block;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.agent-tool-result__retry {
+  min-height: 32px;
+  padding: 0 10px;
+  margin: 0 12px 12px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #fecaca;
+  background: rgb(248 113 113 / 10%);
+  border: 1px solid rgb(248 113 113 / 28%);
+  border-radius: 9px;
 }
 
 .agent-tool-result__running {
diff --git a/packages/cli/registry/components/agent-ui/agent-file-diff.css b/packages/cli/registry/components/agent-ui/agent-file-diff.css
index f6e926ee..3f107521 100644
--- a/packages/cli/registry/components/agent-ui/agent-file-diff.css
+++ b/packages/cli/registry/components/agent-ui/agent-file-diff.css
@@ -1,4 +1,4 @@
-:where(.agent-file-diff) {
+.agent-file-diff {
   --agent-diff-surface: var(--varo-surface, #fff);
   --agent-diff-surface-strong: var(--varo-surface-strong, #f8fafc);
   --agent-diff-border: var(--varo-border, #dbe3ea);
@@ -22,8 +22,7 @@
   border-radius: 14px;
   box-shadow: 0 12px 32px rgb(24 36 51 / 8%);
 }
-.agent-file-diff button { font: inherit; }
-.agent-file-diff button::after { border: 0; }
+.agent-file-diff .agent-native-button { font: inherit; }
 
 .agent-file-diff__header {
   display: flex;
@@ -52,7 +51,7 @@
   box-shadow: inset 0 -5px 0 rgb(33 209 139 / 10%);
 }
 
-.agent-file-diff__file-icon i, .agent-file-diff__file-fold {
+.agent-file-diff__file-fold {
   position: absolute;
   top: -1px;
   right: -1px;
@@ -64,14 +63,14 @@
   border-radius: 0 4px 0 2px;
 }
 .agent-file-diff__path { display: flex; align-items: baseline; min-width: 0; overflow: hidden; }
-.agent-file-diff__path small, .agent-file-diff__path strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-file-diff__path small { flex: 0 1 auto; font-size: 10px; color: var(--agent-diff-muted); }
-.agent-file-diff__path strong { flex: 0 1 auto; font-size: 12px; font-weight: 780; color: var(--agent-diff-text); }
+.agent-file-diff__directory, .agent-file-diff__basename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-file-diff__directory { flex: 0 1 auto; font-size: 10px; color: var(--agent-diff-muted); }
+.agent-file-diff__basename { flex: 0 1 auto; font-size: 12px; font-weight: 780; color: var(--agent-diff-text); }
 .agent-file-diff__identity .agent-advanced__status { flex: none; margin-left: 2px; }
 .agent-file-diff__counts { display: flex; gap: 3px; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-variant-numeric: tabular-nums; }
-.agent-file-diff__counts > span { min-width: 28px; padding: 3px 6px; text-align: center; border-radius: 6px; }
-.agent-file-diff__counts [data-kind='addition'] { color: #07895a; background: rgb(7 196 128 / 10%); }
-.agent-file-diff__counts [data-kind='deletion'] { color: #d52c36; background: rgb(255 46 63 / 9%); }
+.agent-file-diff__count { min-width: 28px; padding: 3px 6px; text-align: center; border-radius: 6px; }
+.agent-file-diff__count--addition { color: #07895a; background: rgb(7 196 128 / 10%); }
+.agent-file-diff__count--deletion { color: #d52c36; background: rgb(255 46 63 / 9%); }
 
 .agent-file-diff__control {
   min-height: 30px;
@@ -84,9 +83,9 @@
   border-radius: 7px;
 }
 .agent-file-diff__control:hover { color: var(--agent-diff-text); border-color: var(--agent-diff-border); }
-.agent-file-diff__collapse { display: grid; place-items: center; width: 30px; padding: 0; background: var(--agent-diff-surface-strong); border-color: var(--agent-diff-border); }
+.agent-file-diff__collapse { display: grid; place-items: center; padding: 0; background: var(--agent-diff-surface-strong); border-color: var(--agent-diff-border); }
 .agent-file-diff__collapse-arrow { width: 7px; height: 7px; border-right: 1.5px solid currentcolor; border-bottom: 1.5px solid currentcolor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 180ms ease; }
-.agent-file-diff[data-open='true'] .agent-file-diff__collapse-arrow { transform: rotate(225deg) translate(-1px, -1px); }
+.agent-file-diff--open .agent-file-diff__collapse-arrow { transform: rotate(225deg) translate(-1px, -1px); }
 .agent-file-diff__body { border-top: 1px solid var(--agent-diff-border); }
 
 .agent-file-diff__toolbar {
@@ -102,9 +101,9 @@
 .agent-file-diff__segmented, .agent-file-diff__settings { display: flex; gap: 3px; align-items: center; }
 .agent-file-diff__segmented { padding: 2px; background: rgb(102 112 133 / 8%); border: 1px solid var(--agent-diff-border); border-radius: 8px; }
 .agent-file-diff__segmented .agent-file-diff__control { min-height: 26px; border: 0; border-radius: 6px; }
-.agent-file-diff__segmented .agent-file-diff__control[data-active='true'] { color: var(--agent-diff-text); background: var(--agent-diff-surface); box-shadow: 0 1px 3px rgb(24 36 51 / 12%); }
+.agent-file-diff__segmented .agent-file-diff__control--active { color: var(--agent-diff-text); background: var(--agent-diff-surface); box-shadow: 0 1px 3px rgb(24 36 51 / 12%); }
 .agent-file-diff__settings .agent-file-diff__control { min-height: 28px; border-color: var(--agent-diff-border); }
-.agent-file-diff__settings .agent-file-diff__control[data-active='true'] { color: #0f766e; background: rgb(20 184 166 / 10%); border-color: rgb(15 118 110 / 32%); }
+.agent-file-diff__settings .agent-file-diff__control--active { color: #0f766e; background: rgb(20 184 166 / 10%); border-color: rgb(15 118 110 / 32%); }
 
 .agent-file-diff__viewport {
   overflow: auto;
@@ -120,7 +119,6 @@
 .agent-file-diff__line, .agent-file-diff__side {
   box-sizing: border-box;
   align-items: stretch;
-  width: 100%;
   min-height: 26px;
   padding: 0;
   color: var(--agent-diff-code);
@@ -133,9 +131,9 @@
 .agent-file-diff__line { display: grid; grid-template-columns: 44px 44px 22px minmax(0, 1fr); }
 .agent-file-diff__side { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); }
 .agent-file-diff__line:hover, .agent-file-diff__side:hover { background: rgb(255 255 255 / 3.5%); }
-.agent-file-diff__line[data-type='add'], .agent-file-diff__side[data-type='add'] { background: var(--agent-diff-addition-bg); border-left-color: var(--agent-diff-addition); }
-.agent-file-diff__line[data-type='remove'], .agent-file-diff__side[data-type='remove'] { background: var(--agent-diff-deletion-bg); border-left-color: var(--agent-diff-deletion); }
-.agent-file-diff__line[data-selected='true'], .agent-file-diff__side[data-selected='true'] { box-shadow: inset 0 0 0 1px rgb(45 212 191 / 72%); }
+.agent-file-diff__line--addition, .agent-file-diff__side--addition { background: var(--agent-diff-addition-bg); border-left-color: var(--agent-diff-addition); }
+.agent-file-diff__line--deletion, .agent-file-diff__side--deletion { background: var(--agent-diff-deletion-bg); border-left-color: var(--agent-diff-deletion); }
+.agent-file-diff__line--selected, .agent-file-diff__side--selected { box-shadow: inset 0 0 0 1px rgb(45 212 191 / 72%); }
 
 .agent-file-diff__number, .agent-file-diff__marker {
   box-sizing: border-box;
@@ -150,10 +148,10 @@
 }
 .agent-file-diff__number { padding: 0 8px 0 4px; text-align: right; background: var(--agent-diff-code-gutter); border-right: 1px solid rgb(255 255 255 / 4.5%); }
 .agent-file-diff__marker { text-align: center; }
-.agent-file-diff__line[data-type='add'] .agent-file-diff__marker, .agent-file-diff__side[data-type='add'] .agent-file-diff__marker { color: var(--agent-diff-addition); }
-.agent-file-diff__line[data-type='remove'] .agent-file-diff__marker, .agent-file-diff__side[data-type='remove'] .agent-file-diff__marker { color: var(--agent-diff-deletion); }
+.agent-file-diff__line--addition .agent-file-diff__marker, .agent-file-diff__side--addition .agent-file-diff__marker { color: var(--agent-diff-addition); }
+.agent-file-diff__line--deletion .agent-file-diff__marker, .agent-file-diff__side--deletion .agent-file-diff__marker { color: var(--agent-diff-deletion); }
 
-.agent-file-diff .agent-file-diff__code {
+.agent-file-diff__code {
   box-sizing: border-box;
   display: block;
   min-width: max-content;
@@ -170,16 +168,16 @@
   transition: none;
 }
 .agent-file-diff__inline-change { padding: 1px 0; color: inherit; background: rgb(255 255 255 / 12%); border-radius: 3px; }
-.agent-file-diff__line[data-type='add'] .agent-file-diff__inline-change, .agent-file-diff__side[data-type='add'] .agent-file-diff__inline-change { background: var(--agent-diff-addition-inline); }
-.agent-file-diff__line[data-type='remove'] .agent-file-diff__inline-change, .agent-file-diff__side[data-type='remove'] .agent-file-diff__inline-change { background: var(--agent-diff-deletion-inline); }
-.agent-file-diff[data-indicators='bars'] .agent-file-diff__marker { color: transparent; }
-.agent-file-diff[data-indicators='classic'] .agent-file-diff__line, .agent-file-diff[data-indicators='classic'] .agent-file-diff__side, .agent-file-diff[data-indicators='none'] .agent-file-diff__line, .agent-file-diff[data-indicators='none'] .agent-file-diff__side { border-left-color: transparent; }
-.agent-file-diff[data-indicators='none'] .agent-file-diff__marker { visibility: hidden; }
-.agent-file-diff[data-line-numbers='false'] .agent-file-diff__line { grid-template-columns: 22px minmax(0, 1fr); }
-.agent-file-diff[data-line-numbers='false'] .agent-file-diff__side { grid-template-columns: 22px minmax(0, 1fr); }
-.agent-file-diff[data-wrap='true'] .agent-file-diff__code { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
-.agent-file-diff[data-wrap='true'] .agent-file-diff__unified { min-width: 0; }
-.agent-file-diff[data-wrap='true'] .agent-file-diff__split { grid-template-columns: repeat(2, minmax(320px, 1fr)); width: 100%; min-width: 640px; }
+.agent-file-diff__line--addition .agent-file-diff__inline-change, .agent-file-diff__side--addition .agent-file-diff__inline-change { background: var(--agent-diff-addition-inline); }
+.agent-file-diff__line--deletion .agent-file-diff__inline-change, .agent-file-diff__side--deletion .agent-file-diff__inline-change { background: var(--agent-diff-deletion-inline); }
+.agent-file-diff--indicators-bars .agent-file-diff__marker { color: transparent; }
+.agent-file-diff--indicators-classic .agent-file-diff__line, .agent-file-diff--indicators-classic .agent-file-diff__side, .agent-file-diff--indicators-none .agent-file-diff__line, .agent-file-diff--indicators-none .agent-file-diff__side { border-left-color: transparent; }
+.agent-file-diff--indicators-none .agent-file-diff__marker { visibility: hidden; }
+.agent-file-diff--line-numbers-hidden .agent-file-diff__line { grid-template-columns: 22px minmax(0, 1fr); }
+.agent-file-diff--line-numbers-hidden .agent-file-diff__side { grid-template-columns: 22px minmax(0, 1fr); }
+.agent-file-diff--wrap .agent-file-diff__code { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+.agent-file-diff--wrap .agent-file-diff__unified { min-width: 0; }
+.agent-file-diff--wrap .agent-file-diff__split { grid-template-columns: repeat(2, minmax(320px, 1fr)); width: 100%; min-width: 640px; }
 .agent-file-diff__split-row { display: contents; }
 .agent-file-diff__split > .agent-file-diff__hunk { grid-column: 1 / -1; }
 .agent-file-diff__split-row > .agent-file-diff__side:first-child { border-right: 1px solid rgb(255 255 255 / 7%); }
@@ -196,7 +194,6 @@
   grid-template-columns: 24px minmax(0, 1fr) auto;
   gap: 7px;
   align-items: center;
-  width: 100%;
   min-height: 34px;
   padding: 0 12px;
   color: #9ba6b2;
@@ -222,19 +219,19 @@
   background: var(--agent-diff-surface);
   border-top: 1px solid var(--agent-diff-border);
 }
-.agent-file-diff__footer > span { font-size: 10px; color: var(--agent-diff-muted); }
-.agent-file-diff__footer > span strong { font-variant-numeric: tabular-nums; color: var(--agent-diff-text); }
-.agent-file-diff__footer > div { display: flex; gap: 7px; }
+.agent-file-diff__footer-summary { font-size: 10px; color: var(--agent-diff-muted); }
+.agent-file-diff__changed-count { font-variant-numeric: tabular-nums; color: var(--agent-diff-text); }
+.agent-file-diff__footer-actions { display: flex; gap: 7px; }
 .agent-file-diff__action { min-height: 32px; padding: 0 11px; font-size: 10px; font-weight: 760; color: var(--agent-diff-muted); background: var(--agent-diff-surface); border: 1px solid var(--agent-diff-border); border-radius: 8px; }
 .agent-file-diff__action:hover { color: var(--agent-diff-text); border-color: #99a7b6; }
-.agent-file-diff__action:last-child { color: #fff; background: #0f766e; border-color: #0f766e; box-shadow: 0 5px 12px rgb(15 118 110 / 20%); }
-.agent-file-diff__action:disabled { cursor: not-allowed; opacity: .5; }
+.agent-file-diff__action--primary { color: #fff; background: #0f766e; border-color: #0f766e; box-shadow: 0 5px 12px rgb(15 118 110 / 20%); }
+.agent-file-diff__action--disabled { cursor: not-allowed; opacity: .5; }
 
 @media (max-width: 600px) {
   .agent-file-diff__header { gap: 7px; padding-inline: 9px; }
   .agent-file-diff__identity { gap: 7px; }
-  .agent-file-diff__identity .agent-advanced__status, .agent-file-diff__path small { display: none; }
-  .agent-file-diff__counts > span { min-width: 24px; padding-inline: 4px; }
+  .agent-file-diff__identity .agent-advanced__status, .agent-file-diff__directory { display: none; }
+  .agent-file-diff__count { min-width: 24px; padding-inline: 4px; }
   .agent-file-diff__toolbar { align-items: stretch; }
   .agent-file-diff__control { padding-inline: 7px; }
   .agent-file-diff__hunk-count { display: none; }
diff --git a/packages/cli/registry/components/agent-ui/agent-icons.ts b/packages/cli/registry/components/agent-ui/agent-icons.ts
index 8ce7cf7f..2432a947 100644
--- a/packages/cli/registry/components/agent-ui/agent-icons.ts
+++ b/packages/cli/registry/components/agent-ui/agent-icons.ts
@@ -8,10 +8,31 @@ export const agentShieldAlertIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0ia
 
 export const agentSearchIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY3MDg1IiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI2Ii8+PHBhdGggZD0ibTE2IDE2IDQgNCIvPjwvc3ZnPg=='
 
-export const agentSendIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNCAxMiAxNi04LTUgMTYtMy41LTYuNUw0IDEyWiIvPjxwYXRoIGQ9Ik0xMS41IDEzLjUgMjAgNCIvPjwvc3ZnPg=='
-
 export const agentCloseIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY3MDg1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0ibTcgNyAxMCAxME0xNyA3IDcgMTciLz48L3N2Zz4='
 
 export const agentCheckIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTNiMjQ4IiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNSAxMiA0IDRMMTkgNiIvPjwvc3ZnPg=='
 
 export const agentPlusIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDdjMTYwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEyIDV2MTRNNSAxMmgxNCIvPjwvc3ZnPg=='
+
+export const agentToolIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2MzYWVkIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48cGF0aCBkPSJNOCA3aDhNOCAxMmg4TTggMTdoNSIvPjwvc3ZnPg=='
+
+export const agentChatIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY3MDg1IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA2aDE0YTIgMiAwIDAgMSAyIDJ2N2EyIDIgMCAwIDEtMiAySDlsLTQgM3YtM0g1YTIgMiAwIDAgMS0yLTJWOGEyIDIgMCAwIDEgMi0yeiIvPjwvc3ZnPg=='
+
+export const agentPlugIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSA3VjNNMTUgN1YzIi8+PHBhdGggZD0iTTggN2g4djRhNCA0IDAgMCAxLTQgNGgwYTQgNCAwIDAgMS00LTRWN1oiLz48cGF0aCBkPSJNMTIgMTV2NiIvPjwvc3ZnPg=='
+
+export const agentReceiptIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAzaDhsNCA0djE0SDdWM1oiLz48cGF0aCBkPSJNMTUgM3Y0aDRNOSAxMmg2TTkgMTZoNCIvPjwvc3ZnPg=='
+
+export const agentBranchIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iMTgiIGN5PSIxMiIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iNiIgY3k9IjE4IiByPSIyLjIiLz48cGF0aCBkPSJNOC4xIDcuNnY4LjhNOC4yIDEySDE2Ii8+PC9zdmc+'
+
+const agentSendMask = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNCAxMiAxNi04LTUgMTYtMy41LTYuNUw0IDEyWiIvPjxwYXRoIGQ9Ik0xMS41IDEzLjUgMjAgNCIvPjwvc3ZnPg==")'
+
+export const agentSendIconStyle = {
+  '-webkit-mask-image': agentSendMask,
+  '-webkit-mask-position': 'center',
+  '-webkit-mask-repeat': 'no-repeat',
+  '-webkit-mask-size': 'contain',
+  'mask-image': agentSendMask,
+  'mask-position': 'center',
+  'mask-repeat': 'no-repeat',
+  'mask-size': 'contain',
+} as const
diff --git a/packages/cli/registry/components/agent-ui/h5/agent-ui.css b/packages/cli/registry/components/agent-ui/h5/agent-ui.css
index 969bc70d..97a20b58 100644
--- a/packages/cli/registry/components/agent-ui/h5/agent-ui.css
+++ b/packages/cli/registry/components/agent-ui/h5/agent-ui.css
@@ -1,15 +1,37 @@
 @keyframes varo-agent-pulse {
-  0%, 100% { opacity: .35; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+
+  50% {
+    opacity: 1;
+  }
 }
 
 @keyframes varo-agent-cursor {
-  0%, 48% { opacity: 1; }
-  49%, 100% { opacity: 0; }
+  0%,
+  48% {
+    opacity: 1;
+  }
+
+  49%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.agent-ui__loading i {
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-ui__pulse {
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-ui__cursor {
+  animation: varo-agent-cursor 0.72s steps(1) infinite;
 }
-.agent-ui__loading i { animation: varo-agent-pulse 1s ease-in-out infinite; }
-.agent-ui__pulse { animation: varo-agent-pulse 1s ease-in-out infinite; }
-.agent-ui__cursor { animation: varo-agent-cursor .72s steps(1) infinite; }
 
 .agent-thinking {
   --agent-thinking-surface: var(--varo-agent-surface, #fff);
@@ -52,10 +74,35 @@
   border-radius: 11px;
   box-shadow: 0 4px 12px color-mix(in srgb, var(--varo-agent-primary, #0f766e) 10%, transparent);
 }
-.agent-thinking__icon svg { display: block; width: 19px; height: 19px; }
-.agent-thinking__copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
-.agent-thinking__title { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 760; line-height: 18px; color: var(--agent-thinking-text); white-space: nowrap; }
-.agent-thinking__summary { font-size: 11px; line-height: 16px; color: var(--agent-thinking-muted); }
+
+.agent-thinking__icon svg {
+  display: block;
+  width: 19px;
+  height: 19px;
+}
+
+.agent-thinking__copy {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-thinking__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--agent-thinking-text);
+  white-space: nowrap;
+}
+
+.agent-thinking__summary {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-thinking-muted);
+}
 
 .agent-thinking__chevron {
   display: block;
@@ -65,7 +112,10 @@
   color: var(--agent-thinking-muted);
   transition: transform 200ms ease;
 }
-.agent-thinking[data-open='true'] .agent-thinking__chevron { transform: rotate(180deg); }
+
+.agent-thinking[data-open='true'] .agent-thinking__chevron {
+  transform: rotate(180deg);
+}
 
 .agent-thinking__body {
   display: grid;
@@ -94,17 +144,57 @@
   border: 2px solid var(--agent-thinking-surface-strong);
   border-radius: 999px;
 }
-.agent-thinking__step[data-status='completed'] .agent-thinking__dot { background: var(--varo-agent-success, #16a34a); }
-.agent-thinking__step[data-status='running'] .agent-thinking__dot { background: var(--varo-agent-primary, #0f766e); }
-.agent-thinking__step[data-status='failed'] .agent-thinking__dot { background: var(--varo-agent-danger, #dc2626); }
-.agent-thinking__step-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
-.agent-thinking__step-header { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
-.agent-thinking__step-header strong { font-size: 12px; font-weight: 680; line-height: 17px; color: var(--agent-thinking-text); }
-.agent-thinking__step-header small, .agent-thinking__detail { font-size: 11px; line-height: 16px; color: var(--agent-thinking-muted); }
+
+.agent-thinking__step[data-status='completed'] .agent-thinking__dot {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-thinking__step[data-status='running'] .agent-thinking__dot {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-thinking__step[data-status='failed'] .agent-thinking__dot {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-thinking__step-copy {
+  display: grid;
+  flex: 1;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-thinking__step-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.agent-thinking__step-header strong {
+  font-size: 12px;
+  font-weight: 680;
+  line-height: 17px;
+  color: var(--agent-thinking-text);
+}
+
+.agent-thinking__step-header small,
+.agent-thinking__detail {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-thinking-muted);
+}
 
 @media (max-width: 640px) {
-  .agent-thinking .agent-thinking__trigger { min-height: 60px; padding-inline: 12px; }
-  .agent-thinking__body { padding-right: 12px; padding-left: 27px; }
+  .agent-thinking .agent-thinking__trigger {
+    min-height: 60px;
+    padding-inline: 12px;
+  }
+
+  .agent-thinking__body {
+    padding-right: 12px;
+    padding-left: 27px;
+  }
 }
 
 .agent-approval {
@@ -290,7 +380,9 @@
 }
 
 .agent-composer__shell {
-  transition: border-color 160ms ease, box-shadow 160ms ease;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease;
 }
 
 .agent-composer__shell:focus-within {
@@ -305,11 +397,632 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .agent-thinking__chevron { transition: none; }
+  .agent-thinking__chevron {
+    transition: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-ui__loading i,
   .agent-ui__pulse,
-  .agent-ui__cursor { animation: none; }
+  .agent-ui__cursor,
+  .agent-task-list__item[data-status='running'] .agent-task-list__marker i,
+  .agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
+    animation: none;
+  }
+}
+
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__heading small,
+.agent-task-list__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-task-list__item {
+  position: relative;
+  display: block;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  list-style: none;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__item::marker {
+  content: none;
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.agent-task-list__item[data-status='waiting'] .agent-task-list__copy strong,
+.agent-task-list__item[data-status='idle'] .agent-task-list__copy strong {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip,
+.agent-task-list__meta > small {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-weight: 750;
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-task-list__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__track {
+  display: block;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__track i {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__track i {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+.agent-composer-scope,
+.agent-retrieval,
+.agent-source-receipt,
+.agent-thread-versions,
+.agent-task-runner__controls {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__heading small,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta,
+.agent-task-runner__cancel span {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row[data-status='reading'],
+.agent-workspace-card__row[data-status='connecting'],
+.agent-workspace-card__row[data-enabled='true'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__copy strong,
+.agent-workspace-card__row-main strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='skipped'] .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+  margin: 0;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action:hover {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--primary:hover {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__action--danger:hover {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.agent-composer-scope__meter {
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-composer-scope__meter strong {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  display: block;
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.agent-thread-versions__card {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-thread-versions__card[data-active='true'] {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__body {
+  max-height: 288px;
+  padding: 14px 16px;
+  margin: 0;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+  background: #0f172a;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: contain;
+  background: #0b1220;
 }
diff --git a/packages/cli/registry/components/agent-ui/h5/index.ts b/packages/cli/registry/components/agent-ui/h5/index.ts
index 8cf54a76..31fcbb24 100644
--- a/packages/cli/registry/components/agent-ui/h5/index.ts
+++ b/packages/cli/registry/components/agent-ui/h5/index.ts
@@ -3,14 +3,23 @@ import type {
   AgentPartStatus,
   AgentStreamSnapshot,
   AgentStreamStatus,
+  AgentThreadVersion,
   AgentToolPart,
 } from '@varo-ui/ai'
-import type { PropType } from 'vue'
+import type { PropType, ShallowRef } from 'vue'
 import type { ClassValue } from '../../lib/cn'
+import type {
+  AgentContextSource,
+  AgentRetrievalItem,
+  AgentSourceReceiptItem,
+  AgentWorkspacePlacement,
+} from './advanced-types'
+import { useBodyScrollLock } from '@varo-ui/headless'
 import {
   computed,
   defineComponent,
   h,
+  nextTick,
   onBeforeUnmount,
   onMounted,
 
@@ -31,8 +40,11 @@ export interface AgentChoice {
 
 export interface AgentTask {
   id: string
+  description?: string
   meta?: string
   progress?: number
+  requiresApproval?: boolean
+  retryable?: boolean
   status: AgentPartStatus
   title: string
 }
@@ -80,7 +92,7 @@ export interface AgentAttachmentItem {
 }
 
 const baseButton = 'inline-flex min-h-10 items-center justify-center rounded-xl border px-3 text-xs font-bold transition-colors disabled:cursor-not-allowed disabled:opacity-45'
-const primaryButton = `${baseButton} border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] text-white hover:opacity-90`
+const primaryButton = `${baseButton} border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] text-[var(--varo-agent-primary-foreground)] hover:opacity-90`
 const quietButton = `${baseButton} border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] text-[var(--varo-agent-foreground)] hover:bg-[var(--varo-agent-surface-strong)]`
 
 function partMark(status: AgentPartStatus) {
@@ -90,6 +102,30 @@ function partMark(status: AgentPartStatus) {
   return 'bg-[var(--varo-agent-border-strong)]'
 }
 
+function taskStatusLabel(status: AgentPartStatus) {
+  if (status === 'completed') { return '已完成' }
+  if (status === 'failed') { return '失败' }
+  if (status === 'running') { return '进行中' }
+  if (status === 'waiting') { return '等待中' }
+  return '待开始'
+}
+
+function renderCloseMiniIcon() {
+  return h('svg', {
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 2.2,
+    'viewBox': '0 0 24 24',
+    'width': 12,
+    'height': 12,
+    'aria-hidden': 'true',
+  }, [
+    h('path', { d: 'M6 6l12 12M18 6 6 18' }),
+  ])
+}
+
 function renderCheckIcon() {
   return h('svg', {
     'fill': 'none',
@@ -153,7 +189,7 @@ export const AgentMessage = defineComponent({
       'class': ['agent-message flex w-full min-w-0 items-start gap-2.5', props.role === 'user' && 'justify-end'],
       'data-role': props.role,
     }, [
-      props.role !== 'user' ? h('span', { 'class': 'grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-[var(--varo-agent-primary)] text-xs font-black text-white', 'aria-hidden': 'true' }, 'V') : null,
+      props.role !== 'user' ? h('span', { 'class': 'grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-[var(--varo-agent-primary)] text-xs font-black text-[var(--varo-agent-primary-foreground)]', 'aria-hidden': 'true' }, 'V') : null,
       h('div', { class: ['grid min-w-0 max-w-[82%] gap-1', props.role === 'user' && 'justify-items-end'] }, [
         props.label || props.timestamp
           ? h('header', { class: 'flex w-full items-center justify-between gap-3 px-1 text-[11px] text-[var(--varo-agent-muted)]' }, [
@@ -165,7 +201,7 @@ export const AgentMessage = defineComponent({
           class: [
             'min-w-11 max-w-full overflow-hidden break-words border px-3.5 py-2.5 shadow-sm',
             props.role === 'user'
-              ? 'rounded-[16px_4px_16px_16px] border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] text-white'
+              ? 'rounded-[16px_4px_16px_16px] border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] text-[var(--varo-agent-primary-foreground)]'
               : 'rounded-[4px_16px_16px_16px] border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] text-[var(--varo-agent-foreground)]',
           ],
         }, slots.default?.()),
@@ -280,22 +316,641 @@ export const AgentTaskList = defineComponent({
   },
   setup(props) {
     const completed = computed(() => props.tasks.filter(task => task.status === 'completed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[12px] tabular-nums text-[var(--varo-agent-muted)]' }, `${completed.value}/${props.tasks.length}`),
+    const current = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+    return () => h('section', { 'class': 'agent-task-list', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-task-list__header' }, [
+        h('span', { class: 'agent-task-list__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.tasks.length && props.tasks.length ? '全部完成' : '等待开始'),
+        ]),
+        h('span', { class: 'agent-task-list__count' }, `${completed.value}/${props.tasks.length}`),
+      ]),
+      h('ol', { class: 'agent-task-list__body' }, props.tasks.map((task, index) => {
+        const progress = task.progress === undefined ? undefined : Math.min(100, Math.max(0, task.progress))
+        return h('li', {
+          'class': 'agent-task-list__item',
+          'data-status': task.status,
+          'aria-current': task.status === 'running' ? 'step' : undefined,
+          'key': task.id,
+        }, [
+          h('span', { 'class': 'agent-task-list__marker', 'aria-hidden': 'true' }, [
+            task.status === 'completed'
+              ? renderCheckIcon()
+              : task.status === 'failed'
+                ? renderCloseMiniIcon()
+                : task.status === 'running'
+                  ? h('i')
+                  : String(index + 1),
+          ]),
+          h('span', { class: 'agent-task-list__copy' }, [
+            h('span', { class: 'agent-task-list__row' }, [
+              h('strong', task.title),
+              h('span', { class: 'agent-task-list__meta' }, [
+                h('small', { class: 'agent-task-list__chip' }, taskStatusLabel(task.status)),
+                task.meta ? h('small', task.meta) : null,
+              ]),
+            ]),
+            task.description ? h('p', task.description) : null,
+            progress === undefined
+              ? null
+              : h('span', { 'class': 'agent-task-list__track', 'aria-hidden': 'true' }, [
+                  h('i', { style: { width: `${progress}%` } }),
+                ]),
+          ]),
+        ])
+      })),
+    ])
+  },
+})
+
+function renderWorkspaceIcon(kind: 'plug' | 'receipt' | 'branch') {
+  const common = {
+    'aria-hidden': 'true' as const,
+    'fill': 'none',
+    'height': 14,
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+    'width': 14,
+  }
+  if (kind === 'receipt') {
+    return h('svg', common, [
+      h('path', { d: 'M7 3h8l4 4v14H7V3Z' }),
+      h('path', { d: 'M15 3v4h4M9 12h6M9 16h4' }),
+    ])
+  }
+  if (kind === 'branch') {
+    return h('svg', common, [
+      h('circle', { cx: '6', cy: '6', r: '2.2' }),
+      h('circle', { cx: '18', cy: '12', r: '2.2' }),
+      h('circle', { cx: '6', cy: '18', r: '2.2' }),
+      h('path', { d: 'M8.1 7.6v8.8M8.2 12H16' }),
+    ])
+  }
+  return h('svg', common, [
+    h('path', { d: 'M9 7V3M15 7V3' }),
+    h('path', { d: 'M8 7h8v4a4 4 0 0 1-4 4h0a4 4 0 0 1-4-4V7Z' }),
+    h('path', { d: 'M12 15v6' }),
+  ])
+}
+
+function workspaceActionClass(kind: 'quiet' | 'primary' | 'danger' = 'quiet') {
+  return cn(
+    'agent-workspace-card__action',
+    kind === 'primary' && 'agent-workspace-card__action--primary',
+    kind === 'danger' && 'agent-workspace-card__action--danger',
+  )
+}
+
+const contextSourceStatusLabels = {
+  available: '可用',
+  connecting: '连接中',
+  unavailable: '不可用',
+} as const
+const retrievalStatusLabels = {
+  failed: '读取失败',
+  queued: '排队中',
+  read: '已读取',
+  reading: '读取中',
+  skipped: '已跳过',
+} as const
+const receiptStatusLabels = {
+  failed: '读取失败',
+  read: '已读取',
+  skipped: '已跳过',
+} as const
+
+function renderCloseIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'class': 'h-5 w-5',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 2,
+    'viewBox': '0 0 24 24',
+  }, [
+    h('path', { d: 'M6 6l12 12M18 6 6 18' }),
+  ])
+}
+
+export const AgentComposerScope = defineComponent({
+  name: 'AgentComposerScope',
+  props: {
+    disabled: Boolean,
+    sources: { type: Array as PropType<AgentContextSource[]>, default: () => [] },
+    title: { type: String, default: '可访问来源' },
+    usagePercent: { type: Number, default: 0 },
+  },
+  emits: {
+    connect: (_source: AgentContextSource) => true,
+    toggle: (_source: AgentContextSource, _enabled: boolean) => true,
+  },
+  setup(props, { emit }) {
+    const usage = computed(() => {
+      const value = Number.isFinite(props.usagePercent) ? props.usagePercent : 0
+      return Math.min(100, Math.max(0, value))
+    })
+    const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
+    const headingHint = computed(() => {
+      if (!props.sources.length) { return '暂无可用来源' }
+      if (enabledCount.value === 0) { return '尚未授权任何来源' }
+      return `${enabledCount.value} 个来源已加入上下文`
+    })
+    return () => h('section', { 'class': 'agent-composer-scope', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${enabledCount.value}/${props.sources.length}`),
+      ]),
+      props.sources.length
+        ? h('div', { class: 'agent-workspace-card__body' }, props.sources.map((source) => {
+            const status = source.status ?? 'available'
+            return h('article', { 'class': 'agent-workspace-card__row', 'data-status': status, 'data-enabled': String(source.enabled), 'key': source.id }, [
+              h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('plug')),
+              h('span', { class: 'agent-workspace-card__copy' }, [
+                h('span', { class: 'agent-workspace-card__row-main' }, [
+                  h('strong', source.label),
+                  h('small', { class: 'agent-workspace-card__chip' }, contextSourceStatusLabels[status]),
+                ]),
+                source.description || source.meta
+                  ? h('small', { class: 'agent-workspace-card__detail' }, source.description || source.meta)
+                  : null,
+              ]),
+              status === 'available'
+                ? h('button', {
+                    'aria-label': `${source.enabled ? '停用' : '启用'}${source.label}`,
+                    'aria-pressed': source.enabled,
+                    'class': workspaceActionClass(source.enabled ? 'quiet' : 'primary'),
+                    'disabled': props.disabled,
+                    'type': 'button',
+                    'onClick': () => emit('toggle', source, !source.enabled),
+                  }, source.enabled ? '停用' : '启用')
+                : status === 'unavailable'
+                  ? h('button', {
+                      'aria-label': `连接${source.label}`,
+                      'class': workspaceActionClass('primary'),
+                      'disabled': props.disabled,
+                      'type': 'button',
+                      'onClick': () => emit('connect', source),
+                    }, '连接')
+                  : h('small', { class: 'agent-workspace-card__chip' }, '连接中'),
+            ])
+          }))
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源'),
+      h('footer', { class: 'agent-composer-scope__meter' }, [
+        h('span', { class: 'agent-workspace-card__row-main' }, [
+          h('span', '上下文使用'),
+          h('strong', `${usage.value}%`),
+        ]),
+        h('span', {
+          'class': 'agent-composer-scope__track',
+          'role': 'progressbar',
+          'aria-label': '上下文使用量',
+          'aria-valuemax': 100,
+          'aria-valuemin': 0,
+          'aria-valuenow': usage.value,
+        }, [
+          h('i', { style: { width: `${usage.value}%` } }),
+        ]),
       ]),
-      ...props.tasks.map((task, index) => h('div', { class: 'flex min-h-[50px] items-center gap-2.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2 last:border-0', key: task.id }, [
-        h('span', { class: ['grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold', task.status === 'completed' ? 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' : 'border-[var(--varo-agent-border)] text-[var(--varo-agent-text)]'] }, task.status === 'completed' ? renderCheckIcon() : String(index + 1)),
-        h('span', { class: 'grid min-w-0 flex-1 gap-1' }, [
-          h('span', { class: 'flex justify-between gap-2 text-xs font-semibold text-[var(--varo-agent-foreground)]' }, [task.title, task.meta ? h('small', { class: 'text-[var(--varo-agent-muted)]' }, task.meta) : null]),
-          task.progress === undefined ? null : h('span', { class: 'h-1 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]' }, [h('i', { class: 'block h-full bg-[var(--varo-agent-primary)]', style: { width: `${Math.min(100, Math.max(0, task.progress))}%` } })]),
+    ])
+  },
+})
+
+export const AgentRetrievalProgress = defineComponent({
+  name: 'AgentRetrievalProgress',
+  props: {
+    items: { type: Array as PropType<AgentRetrievalItem[]>, default: () => [] },
+    title: { type: String, default: '检索进度' },
+  },
+  emits: {
+    retry: (_item: AgentRetrievalItem) => true,
+  },
+  setup(props, { emit }) {
+    const settled = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
+    const current = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+    const headingHint = computed(() => {
+      if (current.value?.status === 'failed') { return `阻塞于 ${current.value.title}` }
+      if (current.value) { return `正在读取 ${current.value.title}` }
+      if (props.items.length && settled.value === props.items.length) { return '检索已完成' }
+      return '等待检索'
+    })
+    return () => h('section', { 'class': 'agent-retrieval', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
         ]),
-      ])),
+        h('span', { class: 'agent-workspace-card__count' }, `${settled.value}/${props.items.length}`),
+      ]),
+      props.items.length
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map((item, index) => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, item.status === 'reading' ? h('i') : String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.title),
+                h('small', { class: 'agent-workspace-card__chip' }, retrievalStatusLabels[item.status]),
+              ]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
+            ]),
+            item.status === 'failed' && item.retryable
+              ? h('button', {
+                  'aria-label': `重试${item.title}`,
+                  'class': workspaceActionClass('primary'),
+                  'type': 'button',
+                  'onClick': () => emit('retry', item),
+                }, '重试')
+              : null,
+          ])))
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无检索项'),
     ])
   },
 })
 
+export const AgentSourceReceipt = defineComponent({
+  name: 'AgentSourceReceipt',
+  props: {
+    items: { type: Array as PropType<AgentSourceReceiptItem[]>, default: () => [] },
+    summary: { type: String, default: '' },
+    title: { type: String, default: '来源回执' },
+  },
+  emits: {
+    connect: (_item: AgentSourceReceiptItem) => true,
+    open: (_item: AgentSourceReceiptItem) => true,
+  },
+  setup(props, { emit }) {
+    const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
+    const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+    const headingHint = computed(() => {
+      if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+      if (props.summary) { return props.summary }
+      if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+      return '回答完成后核对来源'
+    })
+    return () => h('section', { 'class': 'agent-source-receipt', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${readCount.value}/${props.items.length}`),
+      ]),
+      props.items.length
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map(item => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('receipt')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.label),
+                item.itemCount === undefined ? null : h('small', { class: 'agent-workspace-card__meta' }, `${item.itemCount} 项`),
+              ]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
+              h('small', { class: 'agent-workspace-card__chip' }, receiptStatusLabels[item.status]),
+            ]),
+            item.status === 'read'
+              ? h('button', {
+                  'aria-label': `查看${item.label}`,
+                  'class': workspaceActionClass(),
+                  'type': 'button',
+                  'onClick': () => emit('open', item),
+                }, '查看')
+              : item.status === 'failed'
+                ? h('button', {
+                    'aria-label': `连接${item.label}`,
+                    'class': workspaceActionClass('primary'),
+                    'type': 'button',
+                    'onClick': () => emit('connect', item),
+                  }, '连接')
+                : null,
+          ])))
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源回执'),
+    ])
+  },
+})
+
+export const AgentTaskRunner = defineComponent({
+  name: 'AgentTaskRunner',
+  props: {
+    busy: Boolean,
+    tasks: { type: Array as PropType<AgentTask[]>, default: () => [] },
+    title: { type: String, default: '执行计划' },
+  },
+  emits: {
+    approve: (_task: AgentTask) => true,
+    cancel: () => true,
+    retry: (_task: AgentTask) => true,
+  },
+  setup(props, { emit }) {
+    const actionableTasks = computed(() => {
+      if (props.busy) { return [] }
+      return props.tasks.filter(task =>
+        (task.status === 'failed' && task.retryable)
+        || (task.status === 'waiting' && task.requiresApproval),
+      )
+    })
+    const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
+    return () => h('section', { class: 'agent-task-runner' }, [
+      h(AgentTaskList, { tasks: props.tasks, title: props.title }),
+      actionableTasks.value.length || canCancel.value
+        ? h('div', { class: 'agent-task-runner__controls' }, [
+            actionableTasks.value.length
+              ? h('div', { class: 'agent-workspace-card__body' }, actionableTasks.value.map(task => h('article', { 'class': 'agent-workspace-card__row', 'data-status': task.status, 'key': task.id }, [
+                  h('span', { class: 'agent-workspace-card__copy' }, [
+                    h('strong', task.title),
+                    task.description ? h('small', { class: 'agent-workspace-card__detail' }, task.description) : null,
+                    h('small', { class: 'agent-workspace-card__chip' }, task.status === 'failed' ? '执行失败' : '等待确认'),
+                  ]),
+                  task.status === 'failed'
+                    ? h('button', {
+                        'aria-label': `重试${task.title}`,
+                        'class': workspaceActionClass('primary'),
+                        'type': 'button',
+                        'onClick': () => emit('retry', task),
+                      }, '重试')
+                    : h('button', {
+                        'aria-label': `批准${task.title}`,
+                        'class': workspaceActionClass('primary'),
+                        'type': 'button',
+                        'onClick': () => emit('approve', task),
+                      }, '批准'),
+                ])))
+              : null,
+            canCancel.value
+              ? h('div', { class: 'agent-task-runner__cancel' }, [
+                  h('span', '任务正在执行'),
+                  h('button', {
+                    'aria-label': '取消当前任务',
+                    'class': workspaceActionClass('danger'),
+                    'type': 'button',
+                    'onClick': () => emit('cancel'),
+                  }, '取消'),
+                ])
+              : null,
+          ])
+        : null,
+    ])
+  },
+})
+
+export const AgentThreadVersions = defineComponent({
+  name: 'AgentThreadVersions',
+  props: {
+    activeId: { type: String, default: '' },
+    title: { type: String, default: '会话版本' },
+    versions: { type: Array as PropType<readonly AgentThreadVersion[]>, default: () => [] },
+  },
+  emits: {
+    branch: (_version: AgentThreadVersion) => true,
+    pin: (_version: AgentThreadVersion) => true,
+    select: (_version: AgentThreadVersion) => true,
+  },
+  setup(props, { emit }) {
+    const displayVersions = computed(() => {
+      const labels = new Map<string, string>()
+      props.versions.forEach((version, index) => {
+        labels.set(version.id, version.label || `版本 ${index + 1}`)
+      })
+      return props.versions.map((version, index) => ({
+        active: version.id === props.activeId,
+        label: version.label || `版本 ${index + 1}`,
+        parentLabel: version.parentId ? labels.get(version.parentId) || version.parentId : '起始版本',
+        version,
+      }))
+    })
+    const active = computed(() => displayVersions.value.find(entry => entry.active))
+    return () => h('section', { 'class': 'agent-thread-versions', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value ? `当前 ${active.value.label}` : '选择一个会话版本'),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${props.versions.length} 个版本`),
+      ]),
+      displayVersions.value.length
+        ? h('div', { 'class': 'agent-thread-versions__list', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
+            h('article', {
+              'class': 'agent-thread-versions__card',
+              'data-active': String(entry.active),
+              'key': entry.version.id,
+              'role': 'listitem',
+            }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('branch')),
+                h('strong', entry.label),
+                entry.active
+                  ? h('small', { class: 'agent-workspace-card__chip' }, '当前')
+                  : entry.version.pinned
+                    ? h('small', { class: 'agent-workspace-card__chip' }, '已固定')
+                    : null,
+              ]),
+              h('p', { class: 'agent-workspace-card__detail' }, entry.version.summary || '暂无版本摘要'),
+              h('span', { class: 'agent-thread-versions__meta' }, [
+                h('small', `来源：${entry.parentLabel}`),
+                entry.version.createdAt ? h('time', `创建：${entry.version.createdAt}`) : null,
+              ]),
+              h('footer', { class: 'agent-thread-versions__actions' }, [
+                entry.active
+                  ? null
+                  : h('button', {
+                      'aria-label': `选择${entry.label}`,
+                      'class': workspaceActionClass('primary'),
+                      'type': 'button',
+                      'onClick': () => emit('select', entry.version),
+                    }, '选择'),
+                h('button', {
+                  'aria-label': `从${entry.label}创建分支`,
+                  'class': workspaceActionClass(),
+                  'type': 'button',
+                  'onClick': () => emit('branch', entry.version),
+                }, '分支'),
+                entry.version.pinned
+                  ? null
+                  : h('button', {
+                      'aria-label': `固定${entry.label}`,
+                      'class': workspaceActionClass(),
+                      'type': 'button',
+                      'onClick': () => emit('pin', entry.version),
+                    }, '固定'),
+              ]),
+            ]),
+          ))
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无会话版本'),
+    ])
+  },
+})
+
+interface AgentShellModalEntry {
+  close: () => void
+  closeRef: ShallowRef<HTMLButtonElement | null>
+  panelRef: ShallowRef<HTMLElement | null>
+}
+
+const agentShellModalStack: AgentShellModalEntry[] = []
+let agentShellRestoreTarget: HTMLElement | null = null
+
+function focusAgentShellModal(entry: AgentShellModalEntry) {
+  void nextTick(() => {
+    const top = agentShellModalStack[agentShellModalStack.length - 1]
+    if (top === entry) { entry.closeRef.value?.focus({ preventScroll: true }) }
+  })
+}
+
+function onAgentShellModalKeydown(event: KeyboardEvent) {
+  const entry = agentShellModalStack[agentShellModalStack.length - 1]
+  if (!entry) { return }
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    entry.close()
+    return
+  }
+  if (event.key !== 'Tab' || !entry.panelRef.value) { return }
+  const panel = entry.panelRef.value
+  const focusable = Array.from(panel.querySelectorAll<HTMLElement>(
+    'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([tabindex="-1"])',
+  )).filter(element => element.getAttribute('aria-hidden') !== 'true' && element.getClientRects().length > 0)
+  if (!focusable.length) {
+    event.preventDefault()
+    panel.focus()
+    return
+  }
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+  const activeElement = document.activeElement
+  if (event.shiftKey && (activeElement === first || !panel.contains(activeElement))) {
+    event.preventDefault()
+    last.focus()
+  }
+  else if (!event.shiftKey && (activeElement === last || !panel.contains(activeElement))) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
+function registerAgentShellModal(entry: AgentShellModalEntry) {
+  if (typeof document === 'undefined' || agentShellModalStack.includes(entry)) { return }
+  if (!agentShellModalStack.length) {
+    agentShellRestoreTarget = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    document.addEventListener('keydown', onAgentShellModalKeydown)
+  }
+  agentShellModalStack.push(entry)
+  focusAgentShellModal(entry)
+}
+
+function unregisterAgentShellModal(entry: AgentShellModalEntry) {
+  const index = agentShellModalStack.indexOf(entry)
+  if (index < 0) { return }
+  const wasTop = index === agentShellModalStack.length - 1
+  agentShellModalStack.splice(index, 1)
+  if (agentShellModalStack.length) {
+    if (wasTop) { focusAgentShellModal(agentShellModalStack[agentShellModalStack.length - 1]) }
+    return
+  }
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('keydown', onAgentShellModalKeydown)
+  }
+  const focusTarget = agentShellRestoreTarget
+  agentShellRestoreTarget = null
+  if (focusTarget?.isConnected) { focusTarget.focus({ preventScroll: true }) }
+}
+
+export const AgentShell = defineComponent({
+  name: 'AgentShell',
+  props: {
+    closeLabel: { type: String, default: '关闭工作区' },
+    open: { type: Boolean, default: true },
+    placement: { type: String as PropType<AgentWorkspacePlacement>, default: 'page' },
+    title: { type: String, default: 'Agent 工作区' },
+  },
+  emits: {
+    close: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const panelRef = shallowRef<HTMLElement | null>(null)
+    const closeRef = shallowRef<HTMLButtonElement | null>(null)
+    const visible = computed(() => props.open)
+    const scrollLockEnabled = computed(() => props.placement === 'sheet')
+    const scrollLock = useBodyScrollLock(visible, scrollLockEnabled)
+    const modalEntry: AgentShellModalEntry = {
+      close: () => emit('close'),
+      closeRef,
+      panelRef,
+    }
+
+    watch(
+      [() => visible.value, () => scrollLockEnabled.value],
+      ([open, enabled]) => {
+        if (open && enabled) { registerAgentShellModal(modalEntry) }
+        else { unregisterAgentShellModal(modalEntry) }
+      },
+      { immediate: true },
+    )
+    watch([() => visible.value, () => scrollLockEnabled.value], scrollLock.sync)
+    onBeforeUnmount(() => unregisterAgentShellModal(modalEntry))
+    onBeforeUnmount(scrollLock.dispose)
+
+    return () => {
+      if (!visible.value) { return null }
+      const isSheet = scrollLockEnabled.value
+      const panel = h('section', {
+        'class': [
+          'relative z-[1] flex min-h-0 w-full flex-col overflow-hidden border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] text-[var(--varo-agent-foreground)]',
+          props.placement === 'page' && 'min-h-screen rounded-none',
+          props.placement === 'docked' && 'max-h-[calc(100vh-32px)] max-w-[420px] rounded-[18px] shadow-[var(--varo-agent-shadow)]',
+          isSheet && 'max-h-[86vh] rounded-t-[22px] pb-[env(safe-area-inset-bottom)] shadow-[0_-16px_40px_rgb(15_23_42_/_18%)]',
+        ],
+        'ref': panelRef,
+        'role': isSheet ? 'dialog' : 'region',
+        'tabindex': -1,
+        'aria-label': props.title,
+        'aria-modal': isSheet ? 'true' : undefined,
+      }, [
+        h('header', { class: 'flex min-h-14 flex-none items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5 py-1.5' }, [
+          h('strong', { class: 'truncate text-[14px] text-[var(--varo-agent-foreground)]' }, props.title),
+          h('button', {
+            'aria-label': props.closeLabel,
+            'class': 'relative grid h-10 w-10 flex-none place-items-center rounded-[10px] border border-transparent bg-transparent text-[18px] leading-none text-[var(--varo-agent-muted)] transition-colors before:absolute before:-inset-0.5 before:content-[\'\'] hover:bg-[var(--varo-agent-fill)] motion-reduce:transition-none',
+            'ref': closeRef,
+            'type': 'button',
+            'onClick': () => emit('close'),
+          }, renderCloseIcon()),
+        ]),
+        h('div', {
+          class: [
+            'min-h-0 min-w-0 flex-1',
+            props.placement === 'page' ? 'w-full' : 'max-h-[calc(86vh-56px-env(safe-area-inset-bottom))] overflow-y-auto',
+          ],
+        }, slots.default?.()),
+      ])
+      return h('div', {
+        'class': [
+          'box-border w-full text-[var(--varo-agent-foreground)]',
+          props.placement === 'docked' && 'flex justify-end',
+          isSheet && 'fixed inset-0 z-[100] flex items-end',
+        ],
+        'data-placement': props.placement,
+      }, [
+        isSheet
+          ? h('button', {
+              'aria-label': props.closeLabel,
+              'class': 'fixed inset-0 z-0 h-full w-full border-0 bg-black/40 p-0',
+              'tabindex': -1,
+              'type': 'button',
+              'onClick': () => emit('close'),
+            })
+          : null,
+        panel,
+      ])
+    }
+  },
+})
+
 export const AgentApproval = defineComponent({
   name: 'AgentApproval',
   props: {
@@ -390,11 +1045,19 @@ export const AgentRecommendation = defineComponent({
   emits: { accept: () => true },
   setup(props, { emit, slots }) {
     const confidence = computed(() => Math.min(100, Math.max(0, props.confidence)))
+    const confidenceLabel = computed(() => (
+      confidence.value >= 80 ? '高置信度' : confidence.value >= 55 ? '中等置信度' : '需要复核'
+    ))
     return () => h('section', { class: 'agent-recommendation grid gap-3 rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] p-4 shadow-[var(--varo-agent-shadow)]' }, [
-      h('header', { class: 'flex justify-between text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [h('span', 'AGENT 建议'), h('span', `${confidence.value}%`)]),
+      h('header', { class: 'flex justify-between gap-3 text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [
+        h('span', 'AGENT 建议'),
+        h('span', { class: 'tabular-nums' }, `${confidenceLabel.value} · ${confidence.value}%`),
+      ]),
       h('strong', { class: 'text-[15px] text-[var(--varo-agent-foreground)]' }, props.title),
       props.description ? h('p', { class: 'm-0 text-xs leading-5 text-[var(--varo-agent-text)]' }, props.description) : null,
-      h('span', { class: 'h-1.5 overflow-hidden rounded-full bg-blue-100' }, [h('i', { class: 'block h-full rounded-full bg-blue-600', style: { width: `${confidence.value}%` } })]),
+      h('span', { 'class': 'h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-primary-soft)]', 'aria-hidden': 'true' }, [
+        h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${confidence.value}%` } }),
+      ]),
       slots.default?.(),
       h('footer', { class: 'flex justify-end gap-2' }, [slots.secondary?.(), h('button', { class: primaryButton, type: 'button', onClick: () => emit('accept') }, props.acceptText)]),
     ])
@@ -459,7 +1122,7 @@ export const AgentComposer = defineComponent({
           'button',
           {
             'aria-label': props.busy ? 'Agent 正在处理' : '发送',
-            'class': 'grid h-10 w-10 flex-none place-items-center self-center rounded-full bg-[var(--varo-agent-primary)] text-lg font-bold text-white shadow-sm transition-transform active:translate-y-px disabled:opacity-45',
+            'class': 'grid h-10 w-10 flex-none place-items-center self-center rounded-full bg-[var(--varo-agent-primary)] text-lg font-bold text-[var(--varo-agent-primary-foreground)] shadow-sm transition-transform active:translate-y-px disabled:opacity-45',
             'disabled': props.busy || !props.modelValue.trim(),
             'type': 'button',
             'onClick': () => submit(),
@@ -546,32 +1209,31 @@ export const AgentArtifact = defineComponent({
   props: { artifact: { type: Object as PropType<AgentArtifactItem>, required: true } },
   emits: { open: (_artifact: AgentArtifactItem) => true },
   setup(props, { emit }) {
+    const kindLabel = computed(() => {
+      if (props.artifact.kind === 'code') { return '代码产物' }
+      if (props.artifact.kind === 'image') { return '图像产物' }
+      if (props.artifact.kind === 'file') { return '文件产物' }
+      return '文档产物'
+    })
     return () =>
-      h('article', { class: 'overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 shadow-lg' }, [
-        h('header', { class: 'flex min-h-14 items-center justify-between gap-3 border-b border-slate-800 bg-slate-900 px-4' }, [
-          h('span', { class: 'grid min-w-0 gap-0.5' }, [
-            h('small', { class: 'text-[10px] font-black uppercase tracking-[0.16em] text-teal-300' }, props.artifact.kind || 'artifact'),
-            h('strong', { class: 'truncate text-xs text-slate-100' }, props.artifact.title),
+      h('article', { 'class': 'agent-artifact', 'data-kind': props.artifact.kind || 'document' }, [
+        h('header', { class: 'agent-artifact__header' }, [
+          h('span', { class: 'agent-artifact__heading' }, [
+            h('small', { class: 'agent-artifact__kind' }, kindLabel.value),
+            h('strong', { class: 'agent-artifact__title' }, props.artifact.title),
+            props.artifact.language ? h('span', { class: 'agent-artifact__lang' }, props.artifact.language) : null,
           ]),
-          h(
-            'button',
-            {
-              class: 'min-h-8 flex-none rounded-lg border border-slate-700 bg-slate-800 px-3 text-[11px] font-bold text-slate-200 transition-colors hover:border-teal-500 hover:text-white',
-              type: 'button',
-              onClick: () => emit('open', props.artifact),
-            },
-            '打开',
-          ),
+          h('button', {
+            class: 'agent-artifact__open',
+            type: 'button',
+            onClick: () => emit('open', props.artifact),
+          }, '打开'),
         ]),
         props.artifact.content
-          ? h(
-              'pre',
-              { class: 'm-0 max-h-72 overflow-auto whitespace-pre-wrap break-words bg-slate-950 px-4 py-3.5 font-mono text-[12px] leading-5 text-slate-200' },
-              props.artifact.content,
-            )
+          ? h('pre', { class: 'agent-artifact__body' }, props.artifact.content)
           : null,
         props.artifact.previewUrl
-          ? h('img', { alt: props.artifact.title, class: 'block max-h-80 w-full bg-slate-950 object-contain', src: props.artifact.previewUrl })
+          ? h('img', { alt: props.artifact.title, class: 'agent-artifact__preview', src: props.artifact.previewUrl })
           : null,
       ])
   },
@@ -716,4 +1378,13 @@ export const AgentEventRenderer = defineComponent({
 
 export { AgentMarkdown }
 export * from './advanced'
+export { default as AgentRagPipeline } from './AgentRagPipeline.vue'
+export type {
+  AgentRagAnswerPart,
+  AgentRagPipelineProps,
+  AgentRagSource,
+  AgentRagSourceTone,
+  AgentRagStageId,
+  AgentRagStep,
+} from './rag-pipeline'
 export type { AgentStreamSnapshot, AgentStreamStatus, AgentToolPart } from '@varo-ui/ai'
diff --git a/packages/theme/src/weapp-vite.ts b/packages/theme/src/weapp-vite.ts
index fed5495c..e3894abe 100644
--- a/packages/theme/src/weapp-vite.ts
+++ b/packages/theme/src/weapp-vite.ts
@@ -12,19 +12,42 @@ export interface VaroWeappThemePluginOptions {
 
 export function createVaroWeappThemePlugin(options: VaroWeappThemePluginOptions): Plugin {
   const appStylePath = resolve(options.appStyle)
+  const themeCss = () => renderWeappThemeCss(options.theme, { variables: options.variables })
 
   return {
     name: 'varo:weapp-theme',
     enforce: 'pre',
     transform(source, id) {
-      if (resolve(id.split('?')[0]) !== appStylePath) {
+      const [pathname, query = ''] = id.split('?')
+      if (resolve(pathname) !== appStylePath) {
+        return
+      }
+      if (query.includes('weapp-vite-sidecar') || /(?:^|&)lang\.(?:js|ts|jsx|tsx)(?:&|$)/.test(query)) {
         return
       }
 
       return {
-        code: `${source}\n${renderWeappThemeCss(options.theme, { variables: options.variables })}\n`,
+        code: `${source}\n${themeCss()}\n`,
         map: null,
       }
     },
+    generateBundle: {
+      order: 'post',
+      handler(_outputOptions, bundle) {
+        const appStyle = Object.values(bundle).find(output => output.type === 'asset' && output.fileName === 'app.wxss')
+        if (!appStyle || appStyle.type !== 'asset') {
+          return
+        }
+
+        const source = typeof appStyle.source === 'string'
+          ? appStyle.source
+          : new TextDecoder().decode(appStyle.source)
+        const extra = themeCss()
+        if (source.includes(extra)) {
+          return
+        }
+        appStyle.source = `${source}\n${extra}\n`
+      },
+    },
   }
 }
diff --git a/packages/theme/tests/weapp-vite.test.ts b/packages/theme/tests/weapp-vite.test.ts
index 56a85dc7..df89378e 100644
--- a/packages/theme/tests/weapp-vite.test.ts
+++ b/packages/theme/tests/weapp-vite.test.ts
@@ -48,4 +48,37 @@ describe('createVaroWeappThemePlugin', () => {
 
     expect(transformed).toBeUndefined()
   })
+
+  it('leaves weapp-vite sidecar JavaScript wrappers unchanged', async () => {
+    const appStyle = resolve('/project/src/app.scss')
+    const transformed = await themeTransform(appStyle).call(
+      {} as never,
+      'export default "@import \'./styles/varo.css\';\\n\\npage {\\n  button {\\n    line-height: inherit;\\n  }\\n}"',
+      `${appStyle}?raw&weapp-vite-sidecar-owner=%2Fproject%2Fsrc%2Fapp.vue&weapp-vite-sidecar=style&lang.js`,
+      { moduleType: 'js' },
+    )
+
+    expect(transformed).toBeUndefined()
+  })
+
+  it('appends generated page variables to compiled app.wxss when the sidecar skipped transform', () => {
+    const plugin = createVaroWeappThemePlugin({
+      appStyle: resolve('/project/src/app.scss'),
+      theme,
+    })
+    const generateBundle = plugin.generateBundle
+    if (!generateBundle || typeof generateBundle === 'function' || typeof generateBundle.handler !== 'function') {
+      throw new TypeError('Expected a generateBundle hook')
+    }
+
+    const appWxss = {
+      type: 'asset',
+      fileName: 'app.wxss',
+      source: '@import "./styles.wxss";\npage { height: 100%; }',
+    }
+    generateBundle.handler.call({} as never, {} as never, { 'app.wxss': appWxss as never }, false)
+
+    expect(appWxss.source).toContain('--varo-ui-primary: #ff6216;')
+    expect(appWxss.source).toContain('page { height: 100%; }')
+  })
 })
diff --git a/packages/ui-weapp/README.md b/packages/ui-weapp/README.md
index 463fea2c..41c817b6 100644
--- a/packages/ui-weapp/README.md
+++ b/packages/ui-weapp/README.md
@@ -1,11 +1,11 @@
 # @varo-ui/weapp
 
-Tree-shakeable component wrappers for Varo mini-program projects. The supported build chain is `weapp-vite@7.0.4` with `wevu@7.0.4`.
+Tree-shakeable component wrappers for Varo mini-program projects. The supported build chain is `weapp-vite` 7.x with `wevu` 7.x.
 
 ## Install
 
 ```bash
-pnpm add @varo-ui/weapp wevu@7.0.4
+pnpm add @varo-ui/weapp wevu
 ```
 
 ## Usage
diff --git a/packages/ui-weapp/package.json b/packages/ui-weapp/package.json
index d916e318..ea02533e 100644
--- a/packages/ui-weapp/package.json
+++ b/packages/ui-weapp/package.json
@@ -70,6 +70,6 @@
     "@varo/hooks": "workspace:*",
     "@varo/primitives-weapp": "workspace:*",
     "@varo/shared": "workspace:*",
-    "weapp-vite": "7.0.4"
+    "weapp-vite": "^7.1.0"
   }
 }
diff --git a/packages/weapp-web/package.json b/packages/weapp-web/package.json
new file mode 100644
index 00000000..43e5c19f
--- /dev/null
+++ b/packages/weapp-web/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@varo/weapp-web",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Pluggable WeChat mini-program Web runtime: Vite artifact plugin and replaceable wx harness.",
+  "author": "daguanren21 <1363917353@qq.com>",
+  "license": "MIT",
+  "homepage": "https://daguanren21.github.io/Varo/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daguanren21/Varo.git",
+    "directory": "packages/weapp-web"
+  },
+  "bugs": {
+    "url": "https://github.com/daguanren21/Varo/issues"
+  },
+  "sideEffects": [
+    "./src/runtime/native-elements.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./plugin": {
+      "types": "./src/plugin/index.ts",
+      "import": "./src/plugin/index.ts"
+    },
+    "./runtime": {
+      "types": "./src/runtime/index.ts",
+      "import": "./src/runtime/index.ts"
+    },
+    "./runtime/native-elements.css": "./src/runtime/native-elements.css",
+    "./source": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "echo @varo/weapp-web ships source until a public release",
+    "clean": "echo @varo/weapp-web has no generated dist",
+    "dev": "echo @varo/weapp-web ships source until a public release",
+    "lint": "echo weapp-web lint pending",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:e2e": "echo weapp-web has no e2e"
+  },
+  "peerDependencies": {
+    "vite": "^8.2.2"
+  },
+  "dependencies": {
+    "glass-easel": "1.1.0",
+    "glass-easel-miniprogram-adapter": "1.1.0",
+    "glass-easel-stylesheet-compiler": "1.1.0",
+    "glass-easel-template-compiler": "1.1.0",
+    "typescript": "^6.0.3"
+  },
+  "devDependencies": {
+    "vite": "^8.2.2"
+  }
+}
diff --git a/packages/weapp-web/src/index.ts b/packages/weapp-web/src/index.ts
new file mode 100644
index 00000000..d183e7db
--- /dev/null
+++ b/packages/weapp-web/src/index.ts
@@ -0,0 +1,34 @@
+export type { NativeArtifactsPluginOptions } from './plugin/index.ts'
+export { nativeArtifactModuleId, nativeArtifactsPlugin, resolvedNativeArtifactModuleId, weappWebPlugin } from './plugin/index.ts'
+export type {
+  MountWeappWebPreviewOptions,
+  NativeArtifactBundle,
+  NativeComponentArtifact,
+  NativeElementDefinitions,
+  NativeElementRegistrationOptions,
+  NativeGlobals,
+  NativeHost,
+  NativeModule,
+  NativeModuleFactory,
+  NativeRequire,
+  TencentMap,
+  TencentMapApi,
+  TencentMultiMarker,
+  WeappWebHarness,
+  WeappWebRuntimeSession,
+  WxHost,
+  WxHostOptions,
+} from './runtime/index.ts'
+export {
+  attachTencentRasterBaseMap,
+  createNativeHost,
+  createWxHost,
+  defaultWeappWebHarness,
+  loadTencentMapApi,
+  mountWeappWebPreview,
+  nativeTemplates,
+  registerNativeElements,
+  resolveWeappWebHarness,
+  tencentMapDemoKey,
+  tencentRasterTileUrl,
+} from './runtime/index.ts'
diff --git a/packages/weapp-web/src/plugin/index.ts b/packages/weapp-web/src/plugin/index.ts
new file mode 100644
index 00000000..bd357243
--- /dev/null
+++ b/packages/weapp-web/src/plugin/index.ts
@@ -0,0 +1,4 @@
+export { nativeArtifactsPlugin, nativeArtifactsPlugin as weappWebPlugin } from './native-artifacts.ts'
+export type { NativeArtifactsPluginOptions } from './options.ts'
+export { nativeArtifactModuleId, resolvedNativeArtifactModuleId } from './options.ts'
+export { looksLikeAssetReference, scanCss, scanWxml } from './source-scanners.ts'
diff --git a/packages/weapp-web/src/plugin/native-artifacts.ts b/packages/weapp-web/src/plugin/native-artifacts.ts
new file mode 100644
index 00000000..1c374c16
--- /dev/null
+++ b/packages/weapp-web/src/plugin/native-artifacts.ts
@@ -0,0 +1,1055 @@
+import type { Plugin, ResolvedConfig } from 'vite'
+import type { NativeArtifactsPluginOptions } from './options.ts'
+import { Buffer } from 'node:buffer'
+import { createHash } from 'node:crypto'
+import { promises as fs } from 'node:fs'
+import { isAbsolute, join, posix, relative, resolve, sep } from 'node:path'
+import { StyleSheetTransformer } from 'glass-easel-stylesheet-compiler'
+import { TmplGroup } from 'glass-easel-template-compiler'
+import * as ts from 'typescript'
+import { nativeTemplates } from '../runtime/native-templates.ts'
+import { assertNativeArtifactsOptions, nativeArtifactModuleId, resolvedNativeArtifactModuleId, resolvePluginPath } from './options.ts'
+import { looksLikeAssetReference, scanCss, scanWxml } from './source-scanners.ts'
+
+const nativeTagPrefix = 'wx-'
+
+const styleIsolationValues: Record<string, true> = {
+  'apply-shared': true,
+  'isolated': true,
+  'page-apply-shared': true,
+  'page-isolated': true,
+  'page-shared': true,
+  'shared': true,
+}
+
+const pluginNativeComponents: Record<string, string> = {
+  'plugin://varoRobot/chat': 'wechat-robot-chat',
+}
+
+const factoryGlobalNames = [
+  'App',
+  'Page',
+  'Component',
+  'Behavior',
+  'wx',
+  'requirePlugin',
+  'getApp',
+  'getCurrentPages',
+  'globalThis',
+  'global',
+  'window',
+  'document',
+  'requestAnimationFrame',
+  'cancelAnimationFrame',
+  'setTimeout',
+  'clearTimeout',
+  'setInterval',
+  'clearInterval',
+  'queueMicrotask',
+] as const
+
+interface SerializableStaticConfig {
+  addGlobalClass?: boolean
+  component?: boolean
+  componentGenerics?: Record<string, true | { default?: string }>
+  componentPlaceholder?: Record<string, string>
+  pureDataPattern?: string
+  styleIsolation?: string
+  usingComponents?: Record<string, string>
+}
+
+interface SourceFile {
+  absolutePath: string
+  content: string
+  relativePath: string
+}
+
+interface ComponentSource {
+  config: SerializableStaticConfig
+  javaScript: SourceFile
+  key: string
+  template: SourceFile
+}
+
+interface CompilerDiagnostic {
+  code?: number
+  isError: boolean
+  message: string
+  path?: string
+  startColumn?: number
+  startLine?: number
+}
+
+interface AssetFile {
+  absolutePath: string
+  relativePath: string
+}
+
+interface AssetValue {
+  file: AssetFile
+  suffix: string
+}
+
+interface AssetBinding extends AssetValue {
+  token: string
+}
+
+interface RenderedAsset extends AssetFile {
+  variableName: string
+}
+
+interface CompiledStyle {
+  content: string
+  lowPriorityContent: string
+}
+
+interface TextReplacement {
+  end: number
+  start: number
+  value: string
+}
+
+function errorCode(error: unknown): string | undefined {
+  if (!error || typeof error !== 'object' || !('code' in error)) { return undefined }
+  return typeof error.code === 'string' ? error.code : undefined
+}
+
+function describeError(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+function isWithin(root: string, candidate: string): boolean {
+  const pathFromRoot = relative(root, candidate)
+  return pathFromRoot === '' || (!pathFromRoot.startsWith(`..${sep}`) && pathFromRoot !== '..' && !isAbsolute(pathFromRoot))
+}
+
+function compareStrings(left: string, right: string): number {
+  return left < right ? -1 : left > right ? 1 : 0
+}
+
+function sortedUnique(values: readonly string[]): string[] {
+  return [...new Set(values)].sort(compareStrings)
+}
+
+function assertSameDependencies(path: string, kind: string, scanned: readonly string[], compiled: readonly string[]): void {
+  const scannedList = sortedUnique(scanned)
+  const compiledList = sortedUnique(compiled)
+  if (scannedList.length !== compiledList.length || scannedList.some((value, index) => value !== compiledList[index])) {
+    throw new Error(
+      `[varo-native-artifacts] ${kind} dependency scan disagreed with glass-easel-template-compiler for ${path}. `
+      + `Scanner: ${JSON.stringify(scannedList)}; compiler: ${JSON.stringify(compiledList)}`,
+    )
+  }
+}
+
+function stringArray(value: unknown, label: string): string[] {
+  if (!Array.isArray(value)) {
+    throw new TypeError(`[varo-native-artifacts] ${label} returned an unexpected value`)
+  }
+  const items: unknown[] = value
+  if (items.some(item => typeof item !== 'string')) {
+    throw new Error(`[varo-native-artifacts] ${label} returned an unexpected value`)
+  }
+  return items as string[]
+}
+
+function compilerDiagnostics(value: unknown): CompilerDiagnostic[] {
+  if (value === undefined || value === null) { return [] }
+  if (!Array.isArray(value)) { throw new TypeError('[varo-native-artifacts] Compiler returned malformed diagnostics') }
+  const items: unknown[] = value
+  return items.map((item, index) => {
+    if (!item || typeof item !== 'object') {
+      throw new Error(`[varo-native-artifacts] Compiler returned malformed diagnostic ${index}`)
+    }
+    const candidate = item as Record<string, unknown>
+    if (typeof candidate.isError !== 'boolean' || typeof candidate.message !== 'string') {
+      throw new TypeError(`[varo-native-artifacts] Compiler returned malformed diagnostic ${index}`)
+    }
+    const diagnostic: CompilerDiagnostic = {
+      isError: candidate.isError,
+      message: candidate.message,
+    }
+    for (const key of ['code', 'startColumn', 'startLine'] as const) {
+      if (typeof candidate[key] === 'number') { diagnostic[key] = candidate[key] }
+    }
+    if (typeof candidate.path === 'string') { diagnostic.path = candidate.path }
+    return diagnostic
+  })
+}
+
+function reportCompilerDiagnostics(
+  diagnostics: readonly CompilerDiagnostic[],
+  fallbackPath: string,
+  warn: (message: string) => void,
+): void {
+  const errors: string[] = []
+  for (const diagnostic of diagnostics) {
+    const path = diagnostic.path ?? fallbackPath
+    const location = diagnostic.startLine === undefined
+      ? path
+      : `${path}:${diagnostic.startLine}:${diagnostic.startColumn ?? 0}`
+    const code = diagnostic.code === undefined ? '' : ` (#${diagnostic.code})`
+    const message = `${location}${code}: ${diagnostic.message}`
+    errors.push(message)
+    if (!diagnostic.isError) { warn(`[glass-easel-compiler] ${message}`) }
+  }
+  if (errors.length > 0) {
+    throw new Error(`[varo-native-artifacts] Native compiler rejected input:\n${errors.join('\n')}`)
+  }
+}
+
+function objectValue(value: unknown, label: string): Record<string, unknown> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    throw new Error(`[varo-native-artifacts] ${label} must be a JSON object`)
+  }
+  return value as Record<string, unknown>
+}
+
+function optionalStringRecord(value: unknown, label: string): Record<string, string> | undefined {
+  if (value === undefined) { return undefined }
+  const source = objectValue(value, label)
+  const result: Record<string, string> = {}
+  for (const key of Object.keys(source).sort(compareStrings)) {
+    if (typeof source[key] !== 'string' || source[key].length === 0) {
+      throw new Error(`[varo-native-artifacts] ${label}.${key} must be a non-empty string`)
+    }
+    result[key] = source[key]
+  }
+  return result
+}
+
+function parseStaticConfig(
+  source: string,
+  path: string,
+  globalUsingComponents: Readonly<Record<string, string>>,
+): SerializableStaticConfig {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(source)
+  }
+  catch (error) {
+    throw new Error(`[varo-native-artifacts] Invalid JSON in ${path}: ${describeError(error)}`)
+  }
+  const input = objectValue(parsed, path)
+  const output: SerializableStaticConfig = {}
+  if (input.component !== undefined) {
+    if (typeof input.component !== 'boolean') { throw new TypeError(`[varo-native-artifacts] ${path}.component must be boolean`) }
+    output.component = input.component
+  }
+  if (input.addGlobalClass !== undefined) {
+    if (typeof input.addGlobalClass !== 'boolean') { throw new TypeError(`[varo-native-artifacts] ${path}.addGlobalClass must be boolean`) }
+    output.addGlobalClass = input.addGlobalClass
+  }
+  if (input.pureDataPattern !== undefined) {
+    if (typeof input.pureDataPattern !== 'string') { throw new TypeError(`[varo-native-artifacts] ${path}.pureDataPattern must be a string`) }
+    output.pureDataPattern = input.pureDataPattern
+  }
+  if (input.styleIsolation !== undefined) {
+    if (typeof input.styleIsolation !== 'string' || !styleIsolationValues[input.styleIsolation]) {
+      throw new Error(`[varo-native-artifacts] Unsupported styleIsolation in ${path}: ${String(input.styleIsolation)}`)
+    }
+    output.styleIsolation = input.styleIsolation
+  }
+  const localUsingComponents = optionalStringRecord(input.usingComponents, `${path}.usingComponents`)
+  const mergedUsingComponents: Record<string, string> = {}
+  for (const [tag, specifier] of Object.entries({ ...globalUsingComponents, ...localUsingComponents })) {
+    if (pluginNativeComponents[specifier] === tag) { continue }
+    if (pluginNativeComponents[specifier]) {
+      throw new Error(`[varo-native-artifacts] Plugin component ${specifier} must be registered as <${pluginNativeComponents[specifier]}>`)
+    }
+    mergedUsingComponents[tag] = specifier
+  }
+  if (Object.keys(mergedUsingComponents).length > 0) { output.usingComponents = mergedUsingComponents }
+  const placeholders = optionalStringRecord(input.componentPlaceholder, `${path}.componentPlaceholder`)
+  if (placeholders) { output.componentPlaceholder = placeholders }
+  if (input.componentGenerics !== undefined) {
+    const generics = objectValue(input.componentGenerics, `${path}.componentGenerics`)
+    const parsedGenerics: Record<string, true | { default?: string }> = {}
+    for (const key of Object.keys(generics).sort(compareStrings)) {
+      const value = generics[key]
+      if (value === true) {
+        parsedGenerics[key] = true
+        continue
+      }
+      const generic = objectValue(value, `${path}.componentGenerics.${key}`)
+      if (generic.default !== undefined && (typeof generic.default !== 'string' || generic.default.length === 0)) {
+        throw new Error(`[varo-native-artifacts] ${path}.componentGenerics.${key}.default must be a non-empty string`)
+      }
+      parsedGenerics[key] = generic.default === undefined ? {} : { default: generic.default }
+    }
+    output.componentGenerics = parsedGenerics
+  }
+  return output
+}
+
+function resolveMiniProgramKey(importerKey: string, specifier: string, kind: string): string {
+  if (!specifier || specifier.includes('\0') || specifier.includes('\\') || specifier.includes('?') || specifier.includes('#')) {
+    throw new Error(`[varo-native-artifacts] Unsafe ${kind} path ${JSON.stringify(specifier)} referenced by ${importerKey}`)
+  }
+  if (specifier.startsWith('//') || /^[a-z][a-z\d+.-]*:/i.test(specifier)) {
+    throw new Error(`[varo-native-artifacts] Only local mini-program paths and plugin:// components can run in Web Preview: ${specifier} (referenced by ${importerKey})`)
+  }
+  const unresolved = specifier.startsWith('/')
+    ? specifier.slice(1)
+    : posix.join(posix.dirname(importerKey), specifier)
+  const normalized = posix.normalize(unresolved)
+  if (!normalized || normalized === '.' || normalized === '..' || normalized.startsWith('../') || posix.isAbsolute(normalized)) {
+    throw new Error(`[varo-native-artifacts] ${kind} path escapes the native build root: ${specifier} (referenced by ${importerKey})`)
+  }
+  return normalized
+}
+
+function resolveComponentKey(importerKey: string, specifier: string): string {
+  const key = resolveMiniProgramKey(importerKey, specifier, 'component')
+  const extension = posix.extname(key)
+  if (!extension) { return key }
+  if (extension === '.js' || extension === '.json' || extension === '.wxml') { return key.slice(0, -extension.length) }
+  throw new Error(`[varo-native-artifacts] Component path must omit its extension: ${specifier} (referenced by ${importerKey})`)
+}
+
+function resolveModuleCandidates(importerKey: string, specifier: string): string[] {
+  const key = resolveMiniProgramKey(importerKey, specifier, 'CommonJS module')
+  const extension = posix.extname(key)
+  if (!extension) { return [`${key}.js`, `${key}/index.js`] }
+  if (extension !== '.js') {
+    throw new Error(`[varo-native-artifacts] CommonJS dependency must resolve to .js: ${specifier} (required by ${importerKey})`)
+  }
+  return [key]
+}
+
+function splitPathSuffix(specifier: string): { path: string, suffix: string } {
+  const suffixStart = specifier.search(/[?#]/)
+  return suffixStart < 0
+    ? { path: specifier, suffix: '' }
+    : { path: specifier.slice(0, suffixStart), suffix: specifier.slice(suffixStart) }
+}
+
+function preservedExternalReference(specifier: string, owner: string): boolean {
+  if (specifier.startsWith('#')) { return true }
+  if (/^data:/i.test(specifier)) {
+    if (!/^data:[^,\s]*,/i.test(specifier)) {
+      throw new Error(`[varo-native-artifacts] Invalid data URL in ${owner}`)
+    }
+    return true
+  }
+  if (/^https:/i.test(specifier)) {
+    let parsed: URL
+    try {
+      parsed = new URL(specifier)
+    }
+    catch {
+      throw new Error(`[varo-native-artifacts] Invalid HTTPS asset URL in ${owner}: ${specifier}`)
+    }
+    if (parsed.protocol !== 'https:' || !parsed.hostname) {
+      throw new Error(`[varo-native-artifacts] Invalid HTTPS asset URL in ${owner}: ${specifier}`)
+    }
+    return true
+  }
+  if (specifier.startsWith('//') || /^[a-z][a-z\d+.-]*:/i.test(specifier)) {
+    throw new Error(`[varo-native-artifacts] Unsafe asset URL in ${owner}: ${specifier}. Use a local path, data URL, or HTTPS URL.`)
+  }
+  return false
+}
+
+function resolveLocalFileKey(ownerFile: string, specifier: string, kind: string): { key: string, suffix: string } {
+  if (!specifier || specifier.includes('\0') || specifier.includes('\\')) {
+    throw new Error(`[varo-native-artifacts] Unsafe ${kind} path ${JSON.stringify(specifier)} in ${ownerFile}`)
+  }
+  const separated = splitPathSuffix(specifier)
+  const unresolved = separated.path.startsWith('/')
+    ? separated.path.slice(1)
+    : posix.join(posix.dirname(ownerFile), separated.path)
+  const key = posix.normalize(unresolved)
+  if (!key || key === '.' || key === '..' || key.startsWith('../') || posix.isAbsolute(key)) {
+    throw new Error(`[varo-native-artifacts] ${kind} path escapes the native build root: ${specifier} (in ${ownerFile})`)
+  }
+  return { key, suffix: separated.suffix }
+}
+
+function applyReplacements(source: string, replacements: readonly TextReplacement[], owner: string): string {
+  if (replacements.length === 0) { return source }
+  const ordered = [...replacements].sort((left, right) => left.start - right.start)
+  const chunks: string[] = []
+  let cursor = 0
+  for (const replacement of ordered) {
+    if (replacement.start < cursor || replacement.end < replacement.start || replacement.end > source.length) {
+      throw new Error(`[varo-native-artifacts] Overlapping source rewrite while processing ${owner}`)
+    }
+    chunks.push(source.slice(cursor, replacement.start), replacement.value)
+    cursor = replacement.end
+  }
+  chunks.push(source.slice(cursor))
+  return chunks.join('')
+}
+
+class NativeSourceReader {
+  readonly inputs = new Map<string, Buffer>()
+  readonly root: string
+  readonly realRoot: string
+  private readonly cache = new Map<string, SourceFile>()
+  private readonly watch: (path: string) => void
+
+  private constructor(root: string, realRoot: string, watch: (path: string) => void) {
+    this.root = root
+    this.realRoot = realRoot
+    this.watch = watch
+  }
+
+  static async create(root: string, watch: (path: string) => void): Promise<NativeSourceReader> {
+    let realRoot: string
+    try {
+      const stat = await fs.stat(root)
+      if (!stat.isDirectory()) { throw new Error('path is not a directory') }
+      realRoot = await fs.realpath(root)
+    }
+    catch (error) {
+      if (errorCode(error) === 'ENOENT') {
+        throw new Error(
+          `[varo-native-artifacts] Native mini-program build is missing at ${root}. `
+          + 'Run "pnpm --filter @varo/playground-weapp build" from the repository root, then restart the preview.',
+        )
+      }
+      throw new Error(`[varo-native-artifacts] Cannot read native mini-program build at ${root}: ${describeError(error)}`)
+    }
+    return new NativeSourceReader(root, realRoot, watch)
+  }
+
+  private async resolveFile(relativePath: string): Promise<{ absolutePath: string, relativePath: string }> {
+    if (!relativePath || relativePath.includes('\0') || relativePath.includes('\\') || posix.isAbsolute(relativePath)) {
+      throw new Error(`[varo-native-artifacts] Unsafe native build path: ${relativePath}`)
+    }
+    const normalized = posix.normalize(relativePath)
+    const lexicalPath = resolve(this.root, ...normalized.split('/'))
+    if (!isWithin(this.root, lexicalPath)) {
+      throw new Error(`[varo-native-artifacts] Native build path escapes its root: ${relativePath}`)
+    }
+    let realPath: string
+    try {
+      realPath = await fs.realpath(lexicalPath)
+    }
+    catch (error) {
+      if (errorCode(error) === 'ENOENT') {
+        throw new Error(
+          `[varo-native-artifacts] Missing native artifact ${normalized}. `
+          + 'Regenerate apps/playground-weapp/devtools/build/mp-weixin before starting Web Preview.',
+        )
+      }
+      throw error
+    }
+    if (!isWithin(this.realRoot, realPath)) {
+      throw new Error(`[varo-native-artifacts] Native artifact resolves outside the build root: ${relativePath}`)
+    }
+    const stat = await fs.stat(realPath)
+    if (!stat.isFile()) { throw new Error(`[varo-native-artifacts] Native artifact is not a file: ${relativePath}`) }
+    this.watch(realPath)
+    return { absolutePath: realPath, relativePath: normalized }
+  }
+
+  async readText(relativePath: string): Promise<SourceFile> {
+    const normalized = posix.normalize(relativePath)
+    const cached = this.cache.get(normalized)
+    if (cached) { return cached }
+    const file = await this.resolveFile(normalized)
+    const bytes = await fs.readFile(file.absolutePath)
+    const source = { ...file, content: bytes.toString('utf8') }
+    this.cache.set(normalized, source)
+    this.inputs.set(`native/${normalized}`, bytes)
+    return source
+  }
+
+  async readTextIfExists(relativePath: string): Promise<SourceFile | null> {
+    try {
+      return await this.readText(relativePath)
+    }
+    catch (error) {
+      if (error instanceof Error && error.message.startsWith('[varo-native-artifacts] Missing native artifact ')) { return null }
+      throw error
+    }
+  }
+
+  async readAsset(relativePath: string): Promise<AssetFile> {
+    const file = await this.resolveFile(relativePath)
+    if (!this.inputs.has(`native/${file.relativePath}`)) {
+      this.inputs.set(`native/${file.relativePath}`, await fs.readFile(file.absolutePath))
+    }
+    return file
+  }
+
+  digest(): string {
+    const hash = createHash('sha256')
+    for (const [path, content] of [...this.inputs.entries()].sort(([left], [right]) => compareStrings(left, right))) {
+      hash.update(String(Buffer.byteLength(path)))
+      hash.update(':')
+      hash.update(path)
+      hash.update(':')
+      hash.update(String(content.byteLength))
+      hash.update(':')
+      hash.update(content)
+      hash.update('\0')
+    }
+    return hash.digest('hex')
+  }
+}
+
+class AssetRegistry {
+  private readonly aliases = new Map<string, AssetValue>()
+  private readonly files = new Map<string, AssetFile>()
+  private readonly tokens = new Map<string, AssetValue>()
+  private readonly reader: NativeSourceReader
+
+  constructor(reader: NativeSourceReader) {
+    this.reader = reader
+  }
+
+  private addAlias(alias: string, value: AssetValue, owner: string): void {
+    const existing = this.aliases.get(alias)
+    if (existing && (existing.file.relativePath !== value.file.relativePath || existing.suffix !== value.suffix)) {
+      throw new Error(
+        `[varo-native-artifacts] Asset reference ${JSON.stringify(alias)} is ambiguous: it resolves to both `
+        + `${existing.file.relativePath} and ${value.file.relativePath}. Use root-relative asset paths (in ${owner}).`,
+      )
+    }
+    this.aliases.set(alias, value)
+  }
+
+  async add(specifier: string, ownerFile: string): Promise<AssetBinding | null> {
+    if (preservedExternalReference(specifier, ownerFile)) { return null }
+    const resolved = resolveLocalFileKey(ownerFile, specifier, 'asset')
+    const file = await this.reader.readAsset(resolved.key)
+    this.files.set(file.relativePath, file)
+    const value = { file, suffix: resolved.suffix }
+    this.addAlias(specifier, value, ownerFile)
+    this.addAlias(file.relativePath, { file, suffix: '' }, ownerFile)
+    this.addAlias(`/${file.relativePath}`, { file, suffix: '' }, ownerFile)
+    const token = `__VARO_NATIVE_ASSET_${createHash('sha256').update(`${file.relativePath}\0${resolved.suffix}`).digest('hex').slice(0, 20)}__`
+    const existingToken = this.tokens.get(token)
+    if (existingToken && (existingToken.file.relativePath !== file.relativePath || existingToken.suffix !== resolved.suffix)) {
+      throw new Error('[varo-native-artifacts] Asset placeholder collision')
+    }
+    this.tokens.set(token, value)
+    return { ...value, token }
+  }
+
+  renderedFiles(): RenderedAsset[] {
+    return [...this.files.values()]
+      .sort((left, right) => compareStrings(left.relativePath, right.relativePath))
+      .map((file, index) => ({ ...file, variableName: `__nativeAsset${index}` }))
+  }
+
+  renderAssetMap(variableByFile: ReadonlyMap<string, string>): string {
+    const properties = [...this.aliases.entries()]
+      .sort(([left], [right]) => compareStrings(left, right))
+      .map(([alias, value]) => {
+        const variableName = variableByFile.get(value.file.relativePath)
+        if (!variableName) { throw new Error(`[varo-native-artifacts] Missing emitted asset for ${value.file.relativePath}`) }
+        const expression = value.suffix ? `${variableName} + ${JSON.stringify(value.suffix)}` : variableName
+        return `${JSON.stringify(alias)}: ${expression}`
+      })
+    return `{\n${properties.join(',\n')}\n}`
+  }
+
+  renderInterpolated(source: string, variableByFile: ReadonlyMap<string, string>): string {
+    const occurrences: { end: number, expression: string, start: number }[] = []
+    for (const [token, value] of this.tokens) {
+      const variableName = variableByFile.get(value.file.relativePath)
+      if (!variableName) { throw new Error(`[varo-native-artifacts] Missing emitted asset for ${value.file.relativePath}`) }
+      const expression = value.suffix ? `${variableName} + ${JSON.stringify(value.suffix)}` : variableName
+      let offset = source.indexOf(token)
+      while (offset >= 0) {
+        occurrences.push({ end: offset + token.length, expression, start: offset })
+        offset = source.indexOf(token, offset + token.length)
+      }
+    }
+    if (occurrences.length === 0) { return JSON.stringify(source) }
+    occurrences.sort((left, right) => left.start - right.start)
+    const expressions: string[] = []
+    let cursor = 0
+    for (const occurrence of occurrences) {
+      if (occurrence.start < cursor) { throw new Error('[varo-native-artifacts] Overlapping asset placeholders') }
+      if (occurrence.start > cursor) { expressions.push(JSON.stringify(source.slice(cursor, occurrence.start))) }
+      expressions.push(`(${occurrence.expression})`)
+      cursor = occurrence.end
+    }
+    if (cursor < source.length) { expressions.push(JSON.stringify(source.slice(cursor))) }
+    return expressions.join(' + ')
+  }
+}
+
+function inspectJavaScript(source: string, path: string): { assets: string[], requires: string[] } {
+  const sourceFile = ts.createSourceFile(path, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.JS)
+  const assets: string[] = []
+  const requires: string[] = []
+  const visit = (node: ts.Node): void => {
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === 'require') {
+      if (node.arguments.length !== 1 || !ts.isStringLiteralLike(node.arguments[0])) {
+        const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
+        throw new Error(
+          `[varo-native-artifacts] Dynamic require is not supported in ${path}:${position.line + 1}:${position.character + 1}; `
+          + 'use a static string literal so its native dependency can be bundled.',
+        )
+      }
+      requires.push(node.arguments[0].text)
+    }
+    else if (ts.isStringLiteralLike(node)) {
+      const parent = node.parent
+      const isRequireArgument = ts.isCallExpression(parent)
+        && ts.isIdentifier(parent.expression)
+        && parent.expression.text === 'require'
+        && parent.arguments[0] === node
+      if (!isRequireArgument && looksLikeAssetReference(node.text)) { assets.push(node.text) }
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+  return { assets: sortedUnique(assets), requires: sortedUnique(requires) }
+}
+
+async function collectComponents(
+  reader: NativeSourceReader,
+  globalUsingComponents: Readonly<Record<string, string>>,
+  pages: Readonly<Record<string, string>>,
+): Promise<Map<string, ComponentSource>> {
+  const components = new Map<string, ComponentSource>()
+  const pending = new Map<string, string>(Object.values(pages).map(page => [page, 'preview scenario']))
+  while (pending.size > 0) {
+    const key = [...pending.keys()].sort(compareStrings)[0]
+    if (!key) { break }
+    const referencedBy = pending.get(key) ?? 'unknown component'
+    pending.delete(key)
+    if (components.has(key)) { continue }
+    let configFile: SourceFile
+    let template: SourceFile
+    let javaScript: SourceFile
+    try {
+      ;[configFile, template, javaScript] = await Promise.all([
+        reader.readText(`${key}.json`),
+        reader.readText(`${key}.wxml`),
+        reader.readText(`${key}.js`),
+      ])
+    }
+    catch (error) {
+      throw new Error(`[varo-native-artifacts] Cannot load ${key}, referenced by ${referencedBy}: ${describeError(error)}`)
+    }
+    const config = parseStaticConfig(configFile.content, configFile.relativePath, globalUsingComponents)
+    const availableTags = new Set([
+      ...Object.keys(nativeTemplates),
+      ...Object.keys(config.usingComponents ?? {}),
+      ...Object.keys(config.componentGenerics ?? {}),
+      'block',
+      'slot',
+      'template',
+      'import',
+      'include',
+      'wxs',
+    ])
+    for (const tag of scanWxml(template.content).tags) {
+      if (!availableTags.has(tag)) {
+        throw new Error(`[varo-native-artifacts] ${template.relativePath} uses <${tag}> without a supported native element or usingComponents registration`)
+      }
+    }
+    components.set(key, { config, javaScript, key, template })
+    const dependencies: { key: string, origin: string }[] = []
+    for (const [tag, specifier] of Object.entries(config.usingComponents ?? {})) {
+      if (pluginNativeComponents[specifier]) { continue }
+      dependencies.push({ key: resolveComponentKey(key, specifier), origin: `${key}.usingComponents.${tag}` })
+    }
+    for (const [genericName, generic] of Object.entries(config.componentGenerics ?? {})) {
+      if (generic !== true && generic.default) {
+        dependencies.push({ key: resolveComponentKey(key, generic.default), origin: `${key}.componentGenerics.${genericName}.default` })
+      }
+    }
+    for (const dependency of dependencies.sort((left, right) => compareStrings(left.key, right.key))) {
+      if (!components.has(dependency.key) && !pending.has(dependency.key)) { pending.set(dependency.key, dependency.origin) }
+    }
+  }
+  return components
+}
+
+async function compileBusinessTemplates(
+  reader: NativeSourceReader,
+  assets: AssetRegistry,
+  components: ReadonlyMap<string, ComponentSource>,
+  development: boolean,
+  warn: (message: string) => void,
+): Promise<string> {
+  const group = development ? TmplGroup.newDev() : new TmplGroup()
+  try {
+    const templateSources = new Map<string, SourceFile>()
+    for (const component of components.values()) { templateSources.set(component.key, component.template) }
+    const pendingTemplates = new Set(templateSources.keys())
+    const pendingScripts = new Set<string>()
+    const addedTemplates = new Set<string>()
+    while (pendingTemplates.size > 0) {
+      const key = [...pendingTemplates].sort(compareStrings)[0]
+      if (!key) { break }
+      pendingTemplates.delete(key)
+      if (addedTemplates.has(key)) { continue }
+      const templateFile = templateSources.get(key)
+        ?? await reader.readText(`${key}.wxml`)
+      templateSources.set(key, templateFile)
+      let scan
+      try {
+        scan = scanWxml(templateFile.content)
+      }
+      catch (error) {
+        throw new Error(`[varo-native-artifacts] Cannot scan ${templateFile.relativePath}: ${describeError(error)}`)
+      }
+      for (const assetReference of scan.assets) { await assets.add(assetReference, templateFile.relativePath) }
+      const rawDiagnostics: unknown = group.addTmpl(key, templateFile.content)
+      reportCompilerDiagnostics(compilerDiagnostics(rawDiagnostics), templateFile.relativePath, warn)
+      addedTemplates.add(key)
+      const scannedTemplateDependencies = scan.dependencies
+        .filter(dependency => dependency.kind === 'template')
+        .map(dependency => resolveMiniProgramKey(
+          key,
+          dependency.specifier.endsWith('.wxml')
+            ? dependency.specifier.slice(0, -'.wxml'.length)
+            : dependency.specifier,
+          'WXML dependency',
+        ))
+      const scannedScriptDependencies = scan.dependencies
+        .filter(dependency => dependency.kind === 'script')
+        .map(dependency => resolveMiniProgramKey(
+          key,
+          dependency.specifier.endsWith('.wxs')
+            ? dependency.specifier.slice(0, -'.wxs'.length)
+            : dependency.specifier,
+          'WXS dependency',
+        ))
+      const compiledTemplateDependencies = stringArray(group.getDirectDependencies(key), `WXML dependencies for ${key}`)
+      const compiledScriptDependencies = stringArray(group.getScriptDependencies(key), `WXS dependencies for ${key}`)
+      assertSameDependencies(key, 'WXML', scannedTemplateDependencies, compiledTemplateDependencies)
+      assertSameDependencies(key, 'WXS', scannedScriptDependencies, compiledScriptDependencies)
+      for (const dependency of compiledTemplateDependencies) {
+        if (dependency === '..' || dependency.startsWith('../') || posix.isAbsolute(dependency)) {
+          throw new Error(`[varo-native-artifacts] WXML dependency escapes the native build root: ${dependency} (from ${key})`)
+        }
+        if (!addedTemplates.has(dependency)) { pendingTemplates.add(dependency) }
+      }
+      for (const dependency of compiledScriptDependencies) { pendingScripts.add(dependency) }
+    }
+    const addedScripts = new Set<string>()
+    while (pendingScripts.size > 0) {
+      const key = [...pendingScripts].sort(compareStrings)[0]
+      if (!key) { break }
+      pendingScripts.delete(key)
+      if (addedScripts.has(key)) { continue }
+      const scriptFile = await reader.readText(key.endsWith('.wxs') ? key : `${key}.wxs`)
+      group.addScript(key, scriptFile.content)
+      addedScripts.add(key)
+      const metadata = inspectJavaScript(scriptFile.content, scriptFile.relativePath)
+      for (const specifier of metadata.requires) {
+        const dependency = resolveMiniProgramKey(key, specifier, 'WXS require')
+        if (!addedScripts.has(dependency)) { pendingScripts.add(dependency) }
+      }
+    }
+    return group.getTmplGenObjectGroups()
+  }
+  catch (error) {
+    if (error instanceof Error && error.message.startsWith('[varo-native-artifacts]')) { throw error }
+    throw new Error(`[varo-native-artifacts] Failed to compile native WXML: ${describeError(error)}`)
+  }
+  finally {
+    group.free()
+  }
+}
+
+function compileBuiltinTemplates(development: boolean, warn: (message: string) => void): { expression: string, keys: string[], inputs: Map<string, Buffer> } {
+  const entries = Object.entries(nativeTemplates).sort(([left], [right]) => compareStrings(left, right))
+  const group = development ? TmplGroup.newDev() : new TmplGroup()
+  const inputs = new Map<string, Buffer>()
+  try {
+    for (const [key, source] of entries) {
+      if (!/^[a-z][a-z\d-]*$/.test(key) || typeof source !== 'string') {
+        throw new Error(`[varo-native-artifacts] Invalid nativeTemplates entry ${JSON.stringify(key)}`)
+      }
+      const rawDiagnostics: unknown = group.addTmpl(key, source)
+      reportCompilerDiagnostics(compilerDiagnostics(rawDiagnostics), `nativeTemplates.${key}`, warn)
+      const templateDependencies = stringArray(group.getDirectDependencies(key), `native template dependencies for ${key}`)
+      const scriptDependencies = stringArray(group.getScriptDependencies(key), `native template script dependencies for ${key}`)
+      if (scriptDependencies.length > 0) {
+        throw new Error(`[varo-native-artifacts] nativeTemplates.${key} must be self-contained`)
+      }
+      const unknownDependencies = templateDependencies.filter(dependency => Object.hasOwn(nativeTemplates, dependency) || !/^[a-z][a-z\d-]*$/.test(dependency))
+      if (unknownDependencies.length > 0) {
+        throw new Error(`[varo-native-artifacts] nativeTemplates.${key} has unsupported template dependencies: ${unknownDependencies.join(', ')}`)
+      }
+      inputs.set(`builtin/${key}.wxml`, Buffer.from(source))
+    }
+    return { expression: group.getTmplGenObjectGroups(), inputs, keys: entries.map(([key]) => key) }
+  }
+  finally {
+    group.free()
+  }
+}
+
+async function inlineWxss(
+  reader: NativeSourceReader,
+  assets: AssetRegistry,
+  relativePath: string,
+  stack: ReadonlySet<string>,
+): Promise<string> {
+  if (stack.has(relativePath)) {
+    throw new Error(`[varo-native-artifacts] Circular WXSS import: ${[...stack, relativePath].join(' -> ')}`)
+  }
+  const file = await reader.readText(relativePath)
+  let scan
+  try {
+    scan = scanCss(file.content)
+  }
+  catch (error) {
+    throw new Error(`[varo-native-artifacts] Cannot scan ${relativePath}: ${describeError(error)}`)
+  }
+  const nextStack = new Set(stack)
+  nextStack.add(relativePath)
+  const replacements: TextReplacement[] = []
+  for (const reference of scan.imports) {
+    if (preservedExternalReference(reference.specifier, relativePath)) { continue }
+    const resolvedImport = resolveLocalFileKey(relativePath, reference.specifier, 'WXSS import')
+    if (resolvedImport.suffix) {
+      throw new Error(`[varo-native-artifacts] Local WXSS imports cannot contain a query or fragment: ${reference.specifier} (in ${relativePath})`)
+    }
+    const importedPath = posix.extname(resolvedImport.key) ? resolvedImport.key : `${resolvedImport.key}.wxss`
+    if (posix.extname(importedPath) !== '.wxss') {
+      throw new Error(`[varo-native-artifacts] WXSS import must resolve to .wxss: ${reference.specifier} (in ${relativePath})`)
+    }
+    replacements.push({
+      end: reference.end,
+      start: reference.start,
+      value: await inlineWxss(reader, assets, importedPath, nextStack),
+    })
+  }
+  for (const reference of scan.urls) {
+    const binding = await assets.add(reference.specifier, relativePath)
+    if (binding) { replacements.push({ end: reference.end, start: reference.start, value: binding.token }) }
+  }
+  return applyReplacements(file.content, replacements, relativePath)
+}
+
+function compileStyleSheet(
+  relativePath: string,
+  source: string,
+  classPrefix: string | undefined,
+  warn: (message: string) => void,
+  convertHost = true,
+): CompiledStyle {
+  let transformer: StyleSheetTransformer
+  try {
+    transformer = new StyleSheetTransformer(relativePath, source, classPrefix, 750, convertHost, nativeTagPrefix)
+  }
+  catch (error) {
+    throw new Error(`[varo-native-artifacts] Failed to parse ${relativePath}: ${describeError(error)}`)
+  }
+  try {
+    const content = transformer.getContent()
+    const lowPriorityContent = transformer.getLowPriorityContent()
+    const rawDiagnostics: unknown = transformer.extractWarnings()
+    reportCompilerDiagnostics(compilerDiagnostics(rawDiagnostics), relativePath, warn)
+    return { content, lowPriorityContent }
+  }
+  finally {
+    transformer.free()
+  }
+}
+
+function componentStyleScope(key: string, config: SerializableStaticConfig): string {
+  const usesStyleScope = config.styleIsolation === undefined
+    ? config.component === true
+    : config.styleIsolation !== 'shared' && config.styleIsolation !== 'page-shared'
+  if (!usesStyleScope) { return '' }
+  return `varo-${createHash('sha256').update(key).digest('hex').slice(0, 16)}`
+}
+
+async function compileStyles(
+  reader: NativeSourceReader,
+  assets: AssetRegistry,
+  components: ReadonlyMap<string, ComponentSource>,
+  warn: (message: string) => void,
+): Promise<Map<string, string>> {
+  const styles = new Map<string, string>()
+  const lowPriorityStyles: string[] = []
+  const appSource = await inlineWxss(reader, assets, 'app.wxss', new Set())
+  const compiledAppStyle = compileStyleSheet('app.wxss', appSource, undefined, warn, false)
+  for (const component of [...components.values()].sort((left, right) => compareStrings(left.key, right.key))) {
+    const relativePath = `${component.key}.wxss`
+    const styleFile = await reader.readTextIfExists(relativePath)
+    if (!styleFile) { continue }
+    const source = await inlineWxss(reader, assets, relativePath, new Set())
+    const compiled = compileStyleSheet(relativePath, source, componentStyleScope(component.key, component.config) || undefined, warn)
+    styles.set(component.key, compiled.content)
+    if (compiled.lowPriorityContent) { lowPriorityStyles.push(compiled.lowPriorityContent) }
+  }
+  const sharedStyles = [...lowPriorityStyles, compiledAppStyle.lowPriorityContent].filter(Boolean)
+  styles.set('app', `${sharedStyles.join('\n')}${sharedStyles.length > 0 ? '\n' : ''}${compiledAppStyle.content}`)
+  return styles
+}
+
+async function collectModules(
+  reader: NativeSourceReader,
+  assets: AssetRegistry,
+  components: ReadonlyMap<string, ComponentSource>,
+): Promise<Map<string, SourceFile>> {
+  const modules = new Map<string, SourceFile>()
+  const pending = new Set<string>(['app.js', ...[...components.keys()].map(key => `${key}.js`)])
+  const knownSources = new Map<string, SourceFile>()
+  for (const component of components.values()) { knownSources.set(`${component.key}.js`, component.javaScript) }
+  while (pending.size > 0) {
+    const key = [...pending].sort(compareStrings)[0]
+    if (!key) { break }
+    pending.delete(key)
+    if (modules.has(key)) { continue }
+    const source = knownSources.get(key) ?? await reader.readText(key)
+    modules.set(key, source)
+    const metadata = inspectJavaScript(source.content, source.relativePath)
+    for (const assetReference of metadata.assets) { await assets.add(assetReference, source.relativePath) }
+    for (const specifier of metadata.requires) {
+      const candidates = resolveModuleCandidates(key, specifier)
+      let dependency: string | undefined
+      for (const candidate of candidates) {
+        const candidateSource = knownSources.get(candidate) ?? await reader.readTextIfExists(candidate)
+        if (!candidateSource) { continue }
+        knownSources.set(candidate, candidateSource)
+        dependency = candidate
+        break
+      }
+      if (!dependency) {
+        throw new Error(
+          `[varo-native-artifacts] Cannot resolve CommonJS dependency ${JSON.stringify(specifier)} from ${key}; `
+          + `tried ${candidates.join(', ')}`,
+        )
+      }
+      if (!modules.has(dependency)) { pending.add(dependency) }
+    }
+  }
+  return modules
+}
+
+function renderFactory(source: SourceFile): string {
+  return `${JSON.stringify(source.relativePath)}: function (require, module, exports, globals) {\n`
+    + `const { ${factoryGlobalNames.join(', ')} } = globals\n`
+    + `${source.content}\n`
+    + '}'
+}
+
+function renderVirtualModule(
+  reader: NativeSourceReader,
+  assets: AssetRegistry,
+  components: ReadonlyMap<string, ComponentSource>,
+  modules: ReadonlyMap<string, SourceFile>,
+  styles: ReadonlyMap<string, string>,
+  businessTemplateExpression: string,
+  builtinTemplateExpression: string,
+  builtinTemplateKeys: readonly string[],
+  pages: Readonly<Record<string, string>>,
+): string {
+  const renderedAssets = assets.renderedFiles()
+  const variableByFile = new Map(renderedAssets.map(asset => [asset.relativePath, asset.variableName]))
+  const assetImports = renderedAssets.map((asset) => {
+    const viteFileId = `/@fs/${asset.absolutePath.split(sep).join('/')}?url`
+    return `import ${asset.variableName} from ${JSON.stringify(viteFileId)}`
+  })
+  const componentProperties = [...components.values()]
+    .sort((left, right) => compareStrings(left.key, right.key))
+    .map(component => `${JSON.stringify(component.key)}: {\n`
+      + `config: ${JSON.stringify(component.config)},\n`
+      + `template: { groupList: __businessTemplateGroups, content: __businessTemplateGroups[${JSON.stringify(component.key)}] },\n`
+      + `styleScope: ${JSON.stringify(componentStyleScope(component.key, component.config))}\n`
+      + '}')
+  const builtinProperties = [...builtinTemplateKeys]
+    .sort(compareStrings)
+    .map(key => `${JSON.stringify(key)}: { groupList: __builtinTemplateGroups, content: __builtinTemplateGroups[${JSON.stringify(key)}] }`)
+  const moduleProperties = [...modules.values()]
+    .sort((left, right) => compareStrings(left.relativePath, right.relativePath))
+    .map(renderFactory)
+  const styleProperties = [...styles.entries()]
+    .sort(([left], [right]) => compareStrings(left, right))
+    .map(([key, content]) => `${JSON.stringify(key)}: ${assets.renderInterpolated(content, variableByFile)}`)
+  return `${assetImports.join('\n')}\n`
+    + `const __businessTemplateGroups = ${businessTemplateExpression}\n`
+    + `const __builtinTemplateGroups = ${builtinTemplateExpression}\n`
+    + `const bundle = {\n`
+    + `digest: ${JSON.stringify(reader.digest())},\n`
+    + `pages: ${JSON.stringify(pages)},\n`
+    + `components: {\n${componentProperties.join(',\n')}\n},\n`
+    + `builtinTemplates: {\n${builtinProperties.join(',\n')}\n},\n`
+    + `modules: {\n${moduleProperties.join(',\n')}\n},\n`
+    + `styles: {\n${styleProperties.join(',\n')}\n},\n`
+    + `assets: ${assets.renderAssetMap(variableByFile)}\n`
+    + `}\nexport default bundle\n`
+}
+
+async function buildVirtualModule(
+  nativeBuildRoot: string,
+  pages: Readonly<Record<string, string>>,
+  development: boolean,
+  watch: (path: string) => void,
+  warn: (message: string) => void,
+): Promise<string> {
+  const reader = await NativeSourceReader.create(nativeBuildRoot, watch)
+  reader.inputs.set('config/scenarios.json', Buffer.from(JSON.stringify(pages)))
+  const appConfigFile = await reader.readText('app.json')
+  const appConfig = parseStaticConfig(appConfigFile.content, appConfigFile.relativePath, {})
+  const globalUsingComponents: Record<string, string> = {}
+  for (const [tag, specifier] of Object.entries(appConfig.usingComponents ?? {})) {
+    globalUsingComponents[tag] = `/${resolveComponentKey('app', specifier)}`
+  }
+  const components = await collectComponents(reader, globalUsingComponents, pages)
+  const assets = new AssetRegistry(reader)
+  const businessTemplateExpression = await compileBusinessTemplates(reader, assets, components, development, warn)
+  const builtin = compileBuiltinTemplates(development, warn)
+  for (const [path, content] of builtin.inputs) { reader.inputs.set(path, content) }
+  const styles = await compileStyles(reader, assets, components, warn)
+  const modules = await collectModules(reader, assets, components)
+  return renderVirtualModule(
+    reader,
+    assets,
+    components,
+    modules,
+    styles,
+    businessTemplateExpression,
+    builtin.expression,
+    builtin.keys,
+    pages,
+  )
+}
+
+export function nativeArtifactsPlugin(options: NativeArtifactsPluginOptions): Plugin {
+  assertNativeArtifactsOptions(options)
+  let config: ResolvedConfig | undefined
+  let nativeBuildRoot: string | undefined
+  return {
+    name: 'varo-native-artifacts',
+    enforce: 'pre',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+      nativeBuildRoot = resolvePluginPath(resolvedConfig.root, options.nativeBuildRoot)
+    },
+    resolveId(id) {
+      return id === nativeArtifactModuleId ? resolvedNativeArtifactModuleId : null
+    },
+    async load(id) {
+      if (id !== resolvedNativeArtifactModuleId) { return null }
+      if (!config || !nativeBuildRoot) {
+        throw new Error('[varo-native-artifacts] Vite resolved config was unavailable while loading native artifacts')
+      }
+      this.addWatchFile(join(nativeBuildRoot, 'app.json'))
+      for (const watchFile of options.watchFiles ?? []) {
+        this.addWatchFile(resolvePluginPath(config.root, watchFile))
+      }
+      return buildVirtualModule(
+        nativeBuildRoot,
+        options.pages,
+        config.command === 'serve' || config.mode === 'development',
+        path => this.addWatchFile(path),
+        message => this.warn(message),
+      )
+    },
+    handleHotUpdate(context) {
+      if (!nativeBuildRoot || !isWithin(nativeBuildRoot, context.file)) { return }
+      const virtualModule = context.server.moduleGraph.getModuleById(resolvedNativeArtifactModuleId)
+      if (!virtualModule) { return }
+      context.server.moduleGraph.invalidateModule(virtualModule)
+      return [virtualModule]
+    },
+  }
+}
diff --git a/packages/weapp-web/src/plugin/options.ts b/packages/weapp-web/src/plugin/options.ts
new file mode 100644
index 00000000..391db974
--- /dev/null
+++ b/packages/weapp-web/src/plugin/options.ts
@@ -0,0 +1,35 @@
+import { isAbsolute, resolve } from 'node:path'
+
+export const nativeArtifactModuleId = 'virtual:varo-native-artifacts'
+export const resolvedNativeArtifactModuleId = `\0${nativeArtifactModuleId}`
+
+export interface NativeArtifactsPluginOptions {
+  /** Absolute or Vite-root-relative path to compiled WeChat mini-program output. */
+  nativeBuildRoot: string
+  /** Scenario id -> compiled page path, e.g. `{ controls: 'pages/index/index' }`. */
+  pages: Record<string, string>
+  /** Extra files that should invalidate the virtual artifact module. */
+  watchFiles?: readonly string[]
+}
+
+export function resolvePluginPath(root: string, value: string): string {
+  return isAbsolute(value) ? value : resolve(root, value)
+}
+
+export function assertNativeArtifactsOptions(options: NativeArtifactsPluginOptions): void {
+  if (!options.nativeBuildRoot.trim()) {
+    throw new Error('[varo-weapp-web] nativeBuildRoot is required')
+  }
+  const pages = Object.entries(options.pages)
+  if (pages.length === 0) {
+    throw new Error('[varo-weapp-web] pages must list at least one compiled mini-program page')
+  }
+  for (const [id, page] of pages) {
+    if (!id.trim()) {
+      throw new Error('[varo-weapp-web] page ids must be non-empty strings')
+    }
+    if (!page.trim() || page.includes('\\') || page.startsWith('/') || page.includes('..')) {
+      throw new Error(`[varo-weapp-web] invalid compiled page path for ${id}: ${page}`)
+    }
+  }
+}
diff --git a/packages/weapp-web/src/plugin/source-scanners.ts b/packages/weapp-web/src/plugin/source-scanners.ts
new file mode 100644
index 00000000..0c1f2a42
--- /dev/null
+++ b/packages/weapp-web/src/plugin/source-scanners.ts
@@ -0,0 +1,340 @@
+export interface WxmlDependencyReference {
+  kind: 'template' | 'script'
+  specifier: string
+}
+
+export interface WxmlScanResult {
+  assets: string[]
+  dependencies: WxmlDependencyReference[]
+  tags: string[]
+}
+
+export interface CssImportReference {
+  end: number
+  specifier: string
+  start: number
+}
+
+export interface CssUrlReference {
+  end: number
+  specifier: string
+  start: number
+}
+
+export interface CssScanResult {
+  imports: CssImportReference[]
+  urls: CssUrlReference[]
+}
+
+const assetExtensions: Record<string, true> = {
+  '.avif': true,
+  '.bmp': true,
+  '.eot': true,
+  '.gif': true,
+  '.ico': true,
+  '.jpeg': true,
+  '.jpg': true,
+  '.mp3': true,
+  '.mp4': true,
+  '.ogg': true,
+  '.otf': true,
+  '.png': true,
+  '.svg': true,
+  '.ttf': true,
+  '.wav': true,
+  '.webm': true,
+  '.webp': true,
+  '.woff': true,
+  '.woff2': true,
+}
+
+const assetAttributeNames: Record<string, true> = {
+  background: true,
+  icon: true,
+  poster: true,
+  src: true,
+  thumb: true,
+}
+
+function isWhitespace(character: string | undefined): boolean {
+  return character === ' ' || character === '\n' || character === '\r' || character === '\t' || character === '\f'
+}
+
+function skipWhitespace(source: string, offset: number): number {
+  let cursor = offset
+  while (isWhitespace(source[cursor])) { cursor += 1 }
+  return cursor
+}
+
+function skipCssTrivia(source: string, offset: number): number {
+  let cursor = offset
+  while (cursor < source.length) {
+    cursor = skipWhitespace(source, cursor)
+    if (!source.startsWith('/*', cursor)) { break }
+    const commentEnd = source.indexOf('*/', cursor + 2)
+    if (commentEnd < 0) { throw new Error('Unterminated CSS comment') }
+    cursor = commentEnd + 2
+  }
+  return cursor
+}
+
+interface QuotedCssValue {
+  end: number
+  specifier: string
+  valueEnd: number
+  valueStart: number
+}
+
+function readQuotedCssValue(source: string, offset: number): QuotedCssValue {
+  const quote = source[offset]
+  if (quote !== '"' && quote !== '\'') { throw new Error('Expected a quoted CSS value') }
+  let cursor = offset + 1
+  while (cursor < source.length) {
+    const character = source[cursor]
+    if (character === '\\') {
+      throw new Error('Escaped CSS asset paths are not supported; use a literal path')
+    }
+    if (character === quote) {
+      return {
+        end: cursor + 1,
+        specifier: source.slice(offset + 1, cursor),
+        valueEnd: cursor,
+        valueStart: offset + 1,
+      }
+    }
+    cursor += 1
+  }
+  throw new Error('Unterminated CSS string')
+}
+
+function skipQuotedCssString(source: string, offset: number): number {
+  const quote = source[offset]
+  if (quote !== '"' && quote !== '\'') { throw new Error('Expected a quoted CSS string') }
+  let cursor = offset + 1
+  while (cursor < source.length) {
+    if (source[cursor] === '\\') {
+      cursor += 2
+      continue
+    }
+    if (source[cursor] === quote) { return cursor + 1 }
+    cursor += 1
+  }
+  throw new Error('Unterminated CSS string')
+}
+
+interface ParsedCssUrl extends CssUrlReference {
+  ruleEnd: number
+}
+
+function readCssUrl(source: string, offset: number): ParsedCssUrl | null {
+  if (source.slice(offset, offset + 3).toLowerCase() !== 'url') { return null }
+  const previous = source[offset - 1]
+  const following = source[offset + 3]
+  if ((previous && /[\w-]/.test(previous)) || (following && /[\w-]/.test(following))) { return null }
+  let cursor = skipCssTrivia(source, offset + 3)
+  if (source[cursor] !== '(') { return null }
+  cursor = skipCssTrivia(source, cursor + 1)
+  if (source[cursor] === '"' || source[cursor] === '\'') {
+    const quoted = readQuotedCssValue(source, cursor)
+    cursor = skipCssTrivia(source, quoted.end)
+    if (source[cursor] !== ')') { throw new Error('Expected ")" after CSS url()') }
+    return {
+      end: quoted.valueEnd,
+      ruleEnd: cursor + 1,
+      specifier: quoted.specifier,
+      start: quoted.valueStart,
+    }
+  }
+  const valueStart = cursor
+  while (cursor < source.length && source[cursor] !== ')') {
+    if (source[cursor] === '\\') {
+      throw new Error('Escaped CSS asset paths are not supported; use a literal path')
+    }
+    cursor += 1
+  }
+  if (source[cursor] !== ')') { throw new Error('Unterminated CSS url()') }
+  let valueEnd = cursor
+  while (valueEnd > valueStart && isWhitespace(source[valueEnd - 1])) { valueEnd -= 1 }
+  return {
+    end: valueEnd,
+    ruleEnd: cursor + 1,
+    specifier: source.slice(valueStart, valueEnd),
+    start: valueStart,
+  }
+}
+
+function readCssImport(source: string, offset: number): CssImportReference | null {
+  if (source.slice(offset, offset + 7).toLowerCase() !== '@import') { return null }
+  const following = source[offset + 7]
+  if (following && /[\w-]/.test(following)) { return null }
+  let cursor = skipCssTrivia(source, offset + 7)
+  let specifier: string
+  if (source[cursor] === '"' || source[cursor] === '\'') {
+    const quoted = readQuotedCssValue(source, cursor)
+    specifier = quoted.specifier
+    cursor = quoted.end
+  }
+  else {
+    const parsedUrl = readCssUrl(source, cursor)
+    if (!parsedUrl) { throw new Error('CSS @import must use a quoted path or url()') }
+    specifier = parsedUrl.specifier
+    cursor = parsedUrl.ruleEnd
+  }
+  cursor = skipCssTrivia(source, cursor)
+  if (source[cursor] !== ';') {
+    throw new Error('CSS @import media modifiers are not supported in WXSS; import a plain local stylesheet')
+  }
+  return { end: cursor + 1, specifier, start: offset }
+}
+
+export function scanCss(source: string): CssScanResult {
+  const imports: CssImportReference[] = []
+  const urls: CssUrlReference[] = []
+  let cursor = 0
+  while (cursor < source.length) {
+    if (source.startsWith('/*', cursor)) {
+      const commentEnd = source.indexOf('*/', cursor + 2)
+      if (commentEnd < 0) { throw new Error('Unterminated CSS comment') }
+      cursor = commentEnd + 2
+      continue
+    }
+    if (source[cursor] === '"' || source[cursor] === '\'') {
+      cursor = skipQuotedCssString(source, cursor)
+      continue
+    }
+    if (source[cursor] === '@') {
+      const parsedImport = readCssImport(source, cursor)
+      if (parsedImport) {
+        imports.push({ end: parsedImport.end, specifier: parsedImport.specifier, start: parsedImport.start })
+        cursor = parsedImport.end
+        continue
+      }
+    }
+    const parsedUrl = readCssUrl(source, cursor)
+    if (parsedUrl) {
+      urls.push({ end: parsedUrl.end, specifier: parsedUrl.specifier, start: parsedUrl.start })
+      cursor = parsedUrl.ruleEnd
+      continue
+    }
+    cursor += 1
+  }
+  return { imports, urls }
+}
+
+interface WxmlAttribute {
+  name: string
+  value?: string
+}
+
+interface WxmlTag {
+  attributes: WxmlAttribute[]
+  end: number
+  name: string
+  selfClosing: boolean
+}
+
+function isWxmlNameCharacter(character: string | undefined): boolean {
+  return character !== undefined && /[\w:.-]/.test(character)
+}
+
+function readWxmlTag(source: string, offset: number): WxmlTag | null {
+  if (source[offset] !== '<') { return null }
+  if (source.startsWith('<!--', offset)) {
+    const commentEnd = source.indexOf('-->', offset + 4)
+    if (commentEnd < 0) { throw new Error('Unterminated WXML comment') }
+    return { attributes: [], end: commentEnd + 3, name: '', selfClosing: false }
+  }
+  if (source.startsWith('<![CDATA[', offset)) {
+    const cdataEnd = source.indexOf(']]>', offset + 9)
+    if (cdataEnd < 0) { throw new Error('Unterminated WXML CDATA section') }
+    return { attributes: [], end: cdataEnd + 3, name: '', selfClosing: false }
+  }
+  let cursor = offset + 1
+  if (source[cursor] === '/' || source[cursor] === '!' || source[cursor] === '?') {
+    const tagEnd = source.indexOf('>', cursor + 1)
+    if (tagEnd < 0) { throw new Error('Unterminated WXML tag') }
+    return { attributes: [], end: tagEnd + 1, name: '', selfClosing: false }
+  }
+  cursor = skipWhitespace(source, cursor)
+  const nameStart = cursor
+  while (isWxmlNameCharacter(source[cursor])) { cursor += 1 }
+  if (cursor === nameStart) { return null }
+  const name = source.slice(nameStart, cursor).toLowerCase()
+  const attributes: WxmlAttribute[] = []
+  while (cursor < source.length) {
+    cursor = skipWhitespace(source, cursor)
+    if (source[cursor] === '>') { return { attributes, end: cursor + 1, name, selfClosing: false } }
+    if (source[cursor] === '/' && source[cursor + 1] === '>') { return { attributes, end: cursor + 2, name, selfClosing: true } }
+    const attributeStart = cursor
+    while (isWxmlNameCharacter(source[cursor])) { cursor += 1 }
+    if (cursor === attributeStart) { throw new Error(`Unexpected token in <${name}>`) }
+    const attributeName = source.slice(attributeStart, cursor).toLowerCase()
+    cursor = skipWhitespace(source, cursor)
+    if (source[cursor] !== '=') {
+      attributes.push({ name: attributeName })
+      continue
+    }
+    cursor = skipWhitespace(source, cursor + 1)
+    const quote = source[cursor]
+    if (quote !== '"' && quote !== '\'') { throw new Error(`Attribute ${attributeName} on <${name}> must be quoted`) }
+    const valueStart = cursor + 1
+    cursor = valueStart
+    while (cursor < source.length && source[cursor] !== quote) { cursor += 1 }
+    if (source[cursor] !== quote) { throw new Error(`Unterminated ${attributeName} attribute on <${name}>`) }
+    attributes.push({ name: attributeName, value: source.slice(valueStart, cursor) })
+    cursor += 1
+  }
+  throw new Error(`Unterminated <${name}> tag`)
+}
+
+export function looksLikeAssetReference(value: string): boolean {
+  const withoutSuffix = value.split(/[?#]/, 1)[0] ?? ''
+  const slash = withoutSuffix.lastIndexOf('/')
+  const dot = withoutSuffix.lastIndexOf('.')
+  return dot > slash && assetExtensions[withoutSuffix.slice(dot).toLowerCase()] === true
+}
+
+export function scanWxml(source: string): WxmlScanResult {
+  const assets: string[] = []
+  const dependencies: WxmlDependencyReference[] = []
+  const tags = new Set<string>()
+  let cursor = 0
+  while (cursor < source.length) {
+    const tagStart = source.indexOf('<', cursor)
+    if (tagStart < 0) { break }
+    const tag = readWxmlTag(source, tagStart)
+    if (!tag) {
+      cursor = tagStart + 1
+      continue
+    }
+    cursor = tag.end
+    if (!tag.name) { continue }
+    tags.add(tag.name)
+    let hasExternalWxs = false
+    for (const attribute of tag.attributes) {
+      if (attribute.value === undefined || attribute.value.includes('{{') || attribute.value.includes('}}')) { continue }
+      if (attribute.name === 'src' && (tag.name === 'import' || tag.name === 'include' || tag.name === 'wxs')) {
+        if (!attribute.value) { throw new Error(`<${tag.name}> src must not be empty`) }
+        dependencies.push({
+          kind: tag.name === 'wxs' ? 'script' : 'template',
+          specifier: attribute.value,
+        })
+        if (tag.name === 'wxs') { hasExternalWxs = true }
+        continue
+      }
+      if (attribute.name === 'style') {
+        for (const reference of scanCss(attribute.value).urls) { assets.push(reference.specifier) }
+      }
+      else if (assetAttributeNames[attribute.name] && (/^(?:data|https):/i.test(attribute.value) || looksLikeAssetReference(attribute.value))) {
+        assets.push(attribute.value)
+      }
+    }
+    if (tag.name === 'wxs' && !tag.selfClosing && !hasExternalWxs) {
+      const closingTag = '</wxs>'
+      const closingOffset = source.indexOf(closingTag, cursor)
+      if (closingOffset < 0) { throw new Error('Inline <wxs> is missing its closing tag') }
+      cursor = closingOffset + closingTag.length
+    }
+  }
+  return { assets, dependencies, tags: [...tags] }
+}
diff --git a/packages/weapp-web/src/runtime/artifacts.ts b/packages/weapp-web/src/runtime/artifacts.ts
new file mode 100644
index 00000000..f9ca28f7
--- /dev/null
+++ b/packages/weapp-web/src/runtime/artifacts.ts
@@ -0,0 +1,26 @@
+import type { template } from 'glass-easel'
+import type { CodeSpace } from 'glass-easel-miniprogram-adapter'
+
+export interface NativeModule {
+  exports: unknown
+}
+
+export type NativeRequire = (specifier: string) => unknown
+export type NativeGlobals = Record<string, unknown>
+export type NativeModuleFactory = (require: NativeRequire, module: NativeModule, exports: Record<string, unknown>, globals: NativeGlobals) => void
+
+export interface NativeComponentArtifact {
+  config: Parameters<CodeSpace['addComponentStaticConfig']>[1]
+  template: template.ComponentTemplate
+  styleScope: string
+}
+
+export interface NativeArtifactBundle {
+  digest: string
+  pages: Record<string, string>
+  components: Record<string, NativeComponentArtifact>
+  builtinTemplates: Record<string, template.ComponentTemplate>
+  modules: Record<string, NativeModuleFactory>
+  styles: Record<string, string>
+  assets: Record<string, string>
+}
diff --git a/packages/weapp-web/src/runtime/backend.ts b/packages/weapp-web/src/runtime/backend.ts
new file mode 100644
index 00000000..accca87d
--- /dev/null
+++ b/packages/weapp-web/src/runtime/backend.ts
@@ -0,0 +1,77 @@
+import * as glassEasel from 'glass-easel'
+
+type NativeEventListener = (
+  element: glassEasel.Element,
+  type: string,
+  detail: unknown,
+  options: glassEasel.EventOptions,
+  target: glassEasel.domlikeBackend.Element,
+) => glassEasel.EventBubbleStatus | void
+
+// glass-easel EventBubbleStatus.NoDefault; ambient const enums are unusable with verbatimModuleSyntax.
+const EVENT_BUBBLE_NO_DEFAULT = 1 as glassEasel.EventBubbleStatus
+function disabled(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest('[disabled], [aria-disabled="true"]') !== null
+}
+
+export class PreviewBackend extends glassEasel.CurrentWindowBackendContext {
+  private nativeListener: NativeEventListener | undefined
+
+  private readonly keyboardClick = (event: MouseEvent) => {
+    if (event.detail !== 0 || event.button !== 0 || disabled(event.target) || !this.nativeListener) { return }
+    const target = event.target
+    if (!(target instanceof Element)) { return }
+    let current: Element | null = target
+    while (current) {
+      const associated: unknown = Reflect.get(current, '__wxElement')
+      if (glassEasel.Element.isElement(associated)) {
+        const bounds = target.getBoundingClientRect()
+        // The DOM backend models the actual DOM element with its own protocol interface.
+        const backendTarget = target as unknown as glassEasel.domlikeBackend.Element
+        const status = this.nativeListener(associated, 'tap', {
+          x: bounds.left + bounds.width / 2,
+          y: bounds.top + bounds.height / 2,
+        }, { originalEvent: event, bubbles: true, composed: true, capturePhase: true }, backendTarget)
+        if (status === EVENT_BUBBLE_NO_DEFAULT) { event.preventDefault() }
+        return
+      }
+      current = current.parentElement
+    }
+  }
+
+  private readonly semanticKey = (event: KeyboardEvent) => {
+    if (event.defaultPrevented || event.repeat || disabled(event.target)) { return }
+    const target = event.target
+    if (!(target instanceof HTMLElement) || target.matches('button, input, textarea, select, a[href]')) { return }
+    const role = target.getAttribute('role')
+    if ((role === 'link' && event.key === 'Enter') || (role === 'button' && (event.key === 'Enter' || event.key === ' '))) {
+      event.preventDefault()
+      target.click()
+    }
+  }
+
+  constructor() {
+    super()
+    document.body.addEventListener('click', this.keyboardClick)
+    document.body.addEventListener('keydown', this.semanticKey)
+  }
+
+  override onEvent(listener: NativeEventListener) {
+    this.nativeListener = listener
+    super.onEvent((element, type, detail: unknown, options, target) => {
+      // The framework already synthesizes pointer taps. Native component click
+      // events must come from triggerEvent, not a second bubbling DOM click.
+      if (type === 'click') { return }
+      if (type === 'tap' && (disabled(target as unknown as EventTarget)
+        || (options.originalEvent instanceof MouseEvent && options.originalEvent.button !== 0))) { return }
+      return listener(element, type, detail, options, target)
+    })
+  }
+
+  override destroy() {
+    document.body.removeEventListener('click', this.keyboardClick)
+    document.body.removeEventListener('keydown', this.semanticKey)
+    this.nativeListener = undefined
+    super.destroy()
+  }
+}
diff --git a/packages/weapp-web/src/runtime/harness.ts b/packages/weapp-web/src/runtime/harness.ts
new file mode 100644
index 00000000..3c6aba30
--- /dev/null
+++ b/packages/weapp-web/src/runtime/harness.ts
@@ -0,0 +1,37 @@
+import type { template } from 'glass-easel'
+import type { MiniProgramEnv } from 'glass-easel-miniprogram-adapter'
+import type { NativeArtifactBundle, NativeGlobals } from './artifacts.ts'
+import type { NativeElementRegistrationOptions } from './native-elements.ts'
+import type { WxHostOptions } from './wx-host.ts'
+import { registerNativeElements } from './native-elements.ts'
+import { createWxHost } from './wx-host.ts'
+
+export interface WxHost {
+  wx: Record<string, unknown>
+  dispose: () => void
+}
+
+export type NativeElementDefinitions = Record<string, import('glass-easel').GeneralComponentDefinition>
+
+export interface WeappWebHarness {
+  createWxHost: (options: WxHostOptions) => WxHost
+  registerNativeElements: (
+    env: MiniProgramEnv,
+    templates: Record<string, template.ComponentTemplate>,
+    options: NativeElementRegistrationOptions,
+  ) => NativeElementDefinitions
+  extendGlobals?: (globals: NativeGlobals, context: { bundle: NativeArtifactBundle, pagePath: string }) => void
+}
+
+export const defaultWeappWebHarness: WeappWebHarness = {
+  createWxHost,
+  registerNativeElements,
+}
+
+export function resolveWeappWebHarness(harness?: Partial<WeappWebHarness>): WeappWebHarness {
+  return {
+    createWxHost: harness?.createWxHost ?? defaultWeappWebHarness.createWxHost,
+    registerNativeElements: harness?.registerNativeElements ?? defaultWeappWebHarness.registerNativeElements,
+    extendGlobals: harness?.extendGlobals,
+  }
+}
diff --git a/packages/weapp-web/src/runtime/index.ts b/packages/weapp-web/src/runtime/index.ts
new file mode 100644
index 00000000..ed9af133
--- /dev/null
+++ b/packages/weapp-web/src/runtime/index.ts
@@ -0,0 +1,16 @@
+export type { NativeArtifactBundle, NativeComponentArtifact, NativeGlobals, NativeModule, NativeModuleFactory, NativeRequire } from './artifacts.ts'
+export type { NativeElementDefinitions, WeappWebHarness, WxHost } from './harness.ts'
+export { defaultWeappWebHarness, resolveWeappWebHarness } from './harness.ts'
+export { createNativeModuleLoader, resolveNativeModule } from './module-loader.ts'
+export type { MountWeappWebPreviewOptions } from './mount.ts'
+export { mountWeappWebPreview } from './mount.ts'
+export type { NativeElementRegistrationOptions } from './native-elements.ts'
+export { registerNativeElements } from './native-elements.ts'
+export type { NativeHost } from './native-host.ts'
+export { createNativeHost } from './native-host.ts'
+export { nativeTemplates } from './native-templates.ts'
+export type { WeappWebRuntimeSession } from './session.ts'
+export type { TencentMap, TencentMapApi, TencentMultiMarker } from './tencent-map.ts'
+export { attachTencentRasterBaseMap, loadTencentMapApi, tencentMapDemoKey, tencentRasterTileUrl } from './tencent-map.ts'
+export type { WxHostOptions } from './wx-host.ts'
+export { createWxHost } from './wx-host.ts'
diff --git a/packages/weapp-web/src/runtime/module-loader.ts b/packages/weapp-web/src/runtime/module-loader.ts
new file mode 100644
index 00000000..3f32f8b1
--- /dev/null
+++ b/packages/weapp-web/src/runtime/module-loader.ts
@@ -0,0 +1,59 @@
+import type { NativeArtifactBundle, NativeGlobals, NativeModule, NativeRequire } from './artifacts.ts'
+
+export function resolveNativeModule(from: string, specifier: string, modules: NativeArtifactBundle['modules']): string {
+  if (!specifier.startsWith('.') && !specifier.startsWith('/')) {
+    throw new Error(`小程序产物包含未打包的依赖：${specifier}`)
+  }
+  const segments = specifier.startsWith('/') ? [] : from.split('/').slice(0, -1)
+  for (const segment of specifier.split('/')) {
+    if (!segment || segment === '.') { continue }
+    if (segment === '..') {
+      if (!segments.length) { throw new Error(`小程序模块路径越界：${specifier}`) }
+      segments.pop()
+    }
+    else {
+      segments.push(segment)
+    }
+  }
+  const path = segments.join('/')
+  for (const candidate of [path, `${path}.js`, `${path}.json`, `${path}/index.js`]) {
+    if (Object.hasOwn(modules, candidate)) { return candidate }
+  }
+  throw new Error(`找不到已编译的小程序模块：${path}`)
+}
+
+export function createNativeModuleLoader(
+  bundle: NativeArtifactBundle,
+  globals: NativeGlobals,
+  executeComponent: (path: string, execute: () => void) => void,
+) {
+  const cache = new Map<string, NativeModule>()
+
+  function load(id: string): unknown {
+    const existing = cache.get(id)
+    if (existing) { return existing.exports }
+    const factory = bundle.modules[id]
+    if (!factory) { throw new Error(`找不到已编译的小程序模块：${id}`) }
+    const initialExports: Record<string, unknown> = {}
+    const module: NativeModule = { exports: initialExports }
+    cache.set(id, module)
+    const require: NativeRequire = specifier => load(resolveNativeModule(id, specifier, bundle.modules))
+    const execute = () => factory(require, module, initialExports, globals)
+    const componentPath = id.endsWith('.js') ? id.slice(0, -3) : ''
+    try {
+      if (Object.hasOwn(bundle.components, componentPath)) {
+        executeComponent(componentPath, execute)
+      }
+      else {
+        execute()
+      }
+    }
+    catch (error) {
+      cache.delete(id)
+      throw error
+    }
+    return module.exports
+  }
+
+  return { load, clear: () => cache.clear() }
+}
diff --git a/packages/weapp-web/src/runtime/mount.ts b/packages/weapp-web/src/runtime/mount.ts
new file mode 100644
index 00000000..6c20774a
--- /dev/null
+++ b/packages/weapp-web/src/runtime/mount.ts
@@ -0,0 +1,131 @@
+import type { Root } from 'glass-easel-miniprogram-adapter'
+import type { NativeArtifactBundle } from './artifacts.ts'
+import type { WeappWebHarness } from './harness.ts'
+import type { NativeHost } from './native-host.ts'
+import type { WeappWebRuntimeSession } from './session.ts'
+import * as glassEasel from 'glass-easel'
+import { MiniProgramEnv } from 'glass-easel-miniprogram-adapter'
+import { PreviewBackend } from './backend.ts'
+import { resolveWeappWebHarness } from './harness.ts'
+import { createNativeHost } from './native-host.ts'
+import { tencentMapDemoKey } from './tencent-map.ts'
+import './native-elements.css'
+
+export interface MountWeappWebPreviewOptions {
+  mount: HTMLElement
+  artifacts: NativeArtifactBundle
+  session: WeappWebRuntimeSession
+  harness?: Partial<WeappWebHarness>
+}
+
+function assetUrl(artifacts: NativeArtifactBundle, path: string): string {
+  if (/^https?:\/\//i.test(path)) {
+    const url = new URL(path)
+    if (url.username || url.password) { throw new Error('预览图片地址不能包含凭据') }
+    return url.href
+  }
+  if (/^data:image\/(?:png|jpeg|gif|webp|svg\+xml);/i.test(path)) { return path }
+  if (/^[a-z][a-z\d+.-]*:/i.test(path) || path.startsWith('//')) {
+    throw new Error(`不支持的预览资源地址：${path}`)
+  }
+  if (Object.hasOwn(artifacts.assets, path)) {
+    return new URL(artifacts.assets[path], window.location.href).href
+  }
+  const normalized = path.replace(/^\.\//, '').replace(/^\//, '')
+  if (normalized.split('/').includes('..')) { throw new Error('预览资源不能越过小程序产物根目录') }
+  const url = artifacts.assets[normalized]
+  if (!url) { throw new Error(`小程序预览缺少资源：${normalized}`) }
+  return new URL(url, window.location.href).href
+}
+
+export async function mountWeappWebPreview(options: MountWeappWebPreviewOptions): Promise<() => void> {
+  const { mount, artifacts, session } = options
+  const harness = resolveWeappWebHarness(options.harness)
+  let root: Root | undefined
+  let nativeHost: NativeHost | undefined
+  let closed = false
+  const backend = new PreviewBackend()
+  backend.onEvent(glassEasel.Event.triggerBackendEvent)
+  const errorListener: Parameters<typeof glassEasel.addGlobalErrorListener>[0] = error => session.fail(error)
+  const onVisibility = () => {
+    if (closed || !root) { return }
+    const visible = document.visibilityState !== 'hidden'
+    nativeHost?.emitAppVisibility(visible)
+    root.getComponent().triggerPageLifetime(visible ? 'show' : 'hide', [])
+  }
+  const onResize = () => {
+    if (closed || !root) { return }
+    root.getComponent().triggerPageLifetime('resize', [{ size: { windowWidth: window.innerWidth, windowHeight: window.innerHeight } }])
+  }
+  const close = () => {
+    if (closed) { return }
+    closed = true
+    session.signal.removeEventListener('abort', close)
+    document.removeEventListener('visibilitychange', onVisibility)
+    window.removeEventListener('resize', onResize)
+    try {
+      if (root) {
+        root.getComponent().triggerPageLifetime('hide', [])
+        nativeHost?.emitAppVisibility(false)
+        root.release()
+      }
+    }
+    finally {
+      nativeHost?.dispose()
+      backend.destroy()
+      glassEasel.removeGlobalErrorListener(errorListener)
+      mount.replaceChildren()
+    }
+  }
+  glassEasel.addGlobalErrorListener(errorListener)
+  session.signal.addEventListener('abort', close, { once: true })
+
+  try {
+    const env = new MiniProgramEnv()
+    const nativeComponents = harness.registerNativeElements(env, artifacts.builtinTemplates, {
+      mapKey: tencentMapDemoKey,
+      resolveAssetUrl: path => assetUrl(artifacts, path),
+      reportError: error => session.fail(error),
+    })
+    const space = env.createCodeSpace('varo-preview', true)
+    for (const [tag, definition] of Object.entries(nativeComponents)) {
+      space.getComponentSpace().setGlobalUsingComponent(tag, definition)
+    }
+    const associated = env.associateBackend(backend)
+    for (const [path, css] of Object.entries(artifacts.styles)) {
+      associated.registerStyleSheetContent(path, css)
+      space.addStyleSheet(path, path, path === 'app' ? undefined : artifacts.components[path]?.styleScope)
+    }
+    for (const [path, component] of Object.entries(artifacts.components)) {
+      space.addComponentStaticConfig(path, component.config)
+      space.addCompiledTemplate(path, component.template)
+      if (!Object.hasOwn(artifacts.styles, path)) { space.addStyleSheet(path, undefined, component.styleScope) }
+    }
+    nativeHost = createNativeHost(artifacts, space, session.pagePath, error => session.fail(error), harness)
+    nativeHost.register()
+    if (closed) { throw new Error('小程序预览初始化已中断') }
+    const createdRoot = associated.createRoot('wx-page', space, session.pagePath)
+    if (closed) {
+      createdRoot.release()
+      throw new Error('小程序预览初始化已中断')
+    }
+    root = createdRoot
+    if (!nativeHost.getPage()) { nativeHost.setPage(root.get()) }
+    const placeholder = document.createElement('span')
+    mount.append(placeholder)
+    const parentElement = mount as unknown as glassEasel.GeneralBackendElement
+    const placeholderElement = placeholder as unknown as glassEasel.GeneralBackendElement
+    root.attach(parentElement, placeholderElement)
+    root.getComponent().triggerPageLifetime('show', [])
+    document.addEventListener('visibilitychange', onVisibility)
+    window.addEventListener('resize', onResize)
+    await new Promise<void>((resolve, reject) => backend.render(error => error ? reject(error) : resolve()))
+    await nativeHost.whenReady()
+    if (!closed) { session.ready(artifacts.digest) }
+    return close
+  }
+  catch (error) {
+    close()
+    throw error
+  }
+}
diff --git a/packages/weapp-web/src/runtime/native-elements.css b/packages/weapp-web/src/runtime/native-elements.css
new file mode 100644
index 00000000..89693e91
--- /dev/null
+++ b/packages/weapp-web/src/runtime/native-elements.css
@@ -0,0 +1,287 @@
+wx-view {
+  box-sizing: border-box;
+  display: block;
+}
+
+wx-text {
+  box-sizing: border-box;
+  display: inline;
+}
+
+wx-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  min-width: 0;
+  vertical-align: middle;
+}
+
+wx-button > .varo-native-button__control {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  gap: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  justify-content: inherit;
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+}
+
+wx-button > .varo-native-button__control:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: 2px;
+}
+
+wx-button[disabled] > .varo-native-button__control {
+  cursor: default;
+}
+
+wx-input,
+wx-textarea {
+  box-sizing: border-box;
+  display: inline-block;
+  min-width: 0;
+  vertical-align: middle;
+}
+
+wx-input > .varo-native-input__control,
+wx-textarea > .varo-native-textarea__control {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: inherit;
+  letter-spacing: inherit;
+  outline: 0;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+}
+
+wx-input {
+  min-height: 1.5em;
+}
+
+wx-textarea {
+  min-height: 4.5em;
+}
+
+wx-textarea[data-native-auto-height='true'] {
+  height: auto;
+}
+
+wx-textarea > .varo-native-textarea__control {
+  resize: none;
+}
+
+wx-label {
+  box-sizing: border-box;
+  display: inline;
+}
+
+wx-label > .varo-native-label__control {
+  box-sizing: inherit;
+  display: inherit;
+  font: inherit;
+  color: inherit;
+}
+
+wx-image {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 320px;
+  height: 240px;
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+wx-image > .varo-native-image__control {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+wx-image[data-native-image-mode='widthFix'] {
+  height: auto;
+}
+
+wx-image[data-native-image-mode='widthFix'] > .varo-native-image__control {
+  height: auto;
+}
+
+wx-image[data-native-image-mode='heightFix'] {
+  width: auto;
+}
+
+wx-image[data-native-image-mode='heightFix'] > .varo-native-image__control {
+  width: auto;
+}
+
+wx-scroll-view {
+  box-sizing: border-box;
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+wx-scroll-view[data-native-scroll-x='true'] {
+  overflow-x: auto;
+}
+
+wx-scroll-view[data-native-scroll-y='true'] {
+  overflow-y: auto;
+}
+
+wx-scroll-view[data-native-scrollbar='hidden'] {
+  scrollbar-width: none;
+}
+
+wx-scroll-view[data-native-scrollbar='hidden']::-webkit-scrollbar {
+  display: none;
+}
+
+wx-rich-text {
+  box-sizing: border-box;
+  display: inline;
+}
+
+wx-rich-text > .varo-native-rich-text__content {
+  display: contents;
+}
+
+wx-map {
+  box-sizing: border-box;
+  display: block;
+  overflow: hidden;
+  color: CanvasText;
+  background: color-mix(in srgb, CanvasText 6%, Canvas);
+  border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas);
+}
+
+wx-map > .varo-native-map__surface {
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+  overflow: hidden;
+}
+
+wx-map > .varo-native-map__surface > .varo-native-map__tiles,
+wx-map > .varo-native-map__surface > .varo-native-map__canvas {
+  position: absolute;
+  inset: 0;
+}
+
+wx-map > .varo-native-map__surface > .varo-native-map__tiles {
+  z-index: 0;
+}
+
+wx-map > .varo-native-map__surface > .varo-native-map__tiles > .varo-native-map__tile {
+  position: absolute;
+  width: 256px;
+  max-width: none;
+  height: 256px;
+  pointer-events: none;
+}
+
+wx-map > .varo-native-map__surface > .varo-native-map__canvas {
+  z-index: 1;
+  background: transparent;
+}
+
+wx-map > .varo-native-map__surface > .varo-native-map__canvas canvas {
+  background: transparent !important;
+}
+
+wx-map > .varo-native-map__surface > .varo-native-map__label {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 2;
+  padding: 8px 10px;
+  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
+  color: CanvasText;
+  white-space: pre-wrap;
+  pointer-events: none;
+  background: color-mix(in srgb, Canvas 88%, transparent);
+  border: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);
+}
+
+wx-wechat-robot-chat {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 480px;
+  overflow: hidden;
+  color: CanvasText;
+  background: Canvas;
+  border: 1px solid color-mix(in srgb, CanvasText 14%, Canvas);
+}
+
+wx-wechat-robot-chat > .varo-native-robot-chat__surface {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 480px;
+}
+
+wx-wechat-robot-chat > .varo-native-robot-chat__surface > .varo-native-robot-chat__messages {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 8px;
+  align-content: start;
+  min-height: 360px;
+  padding: 12px;
+  overflow: auto;
+  background: color-mix(in srgb, CanvasText 4%, Canvas);
+}
+
+wx-wechat-robot-chat > .varo-native-robot-chat__surface > .varo-native-robot-chat__operate {
+  flex: 0 0 auto;
+}
+
+wx-wechat-robot-chat .varo-native-robot-chat__message {
+  max-width: 86%;
+  padding: 8px 12px;
+  margin: 0;
+  font: 13px/1.45 ui-sans-serif, system-ui, sans-serif;
+  border-radius: 16px;
+}
+
+wx-wechat-robot-chat .varo-native-robot-chat__message--assistant {
+  justify-self: start;
+  color: CanvasText;
+  background: Canvas;
+  border: 1px solid color-mix(in srgb, CanvasText 12%, Canvas);
+}
+
+wx-wechat-robot-chat .varo-native-robot-chat__message--user {
+  justify-self: end;
+  color: Canvas;
+  background: color-mix(in srgb, CanvasText 78%, Canvas);
+}
diff --git a/packages/weapp-web/src/runtime/native-elements.ts b/packages/weapp-web/src/runtime/native-elements.ts
new file mode 100644
index 00000000..6bf19de8
--- /dev/null
+++ b/packages/weapp-web/src/runtime/native-elements.ts
@@ -0,0 +1,1882 @@
+import type * as glassEasel from 'glass-easel'
+import type { MiniProgramEnv } from 'glass-easel-miniprogram-adapter'
+import { loadTencentMapApi, tencentMapDemoKey, tencentRasterTileUrl } from './tencent-map.ts'
+
+// glass-easel StyleSegmentIndex.TEMP_EXTRA; ambient const enums are unusable with verbatimModuleSyntax.
+const STYLE_SEGMENT_TEMP_EXTRA = 3
+
+export interface NativeElementRegistrationOptions {
+  mapKey?: string
+  reportError: (error: Error) => void
+  resolveAssetUrl: (path: string) => string
+}
+
+type NativeTag
+  = | 'view'
+    | 'text'
+    | 'button'
+    | 'input'
+    | 'textarea'
+    | 'label'
+    | 'image'
+    | 'scroll-view'
+    | 'rich-text'
+    | 'map'
+    | 'wechat-robot-chat'
+type NativeTemplateMap = Record<string, glassEasel.template.ComponentTemplate>
+type NativeDefinitionMap = Record<string, glassEasel.GeneralComponentDefinition>
+type NativeComponent = glassEasel.GeneralComponent
+
+interface ManagedState {
+  cleanups: Array<() => void>
+  reported: Set<string>
+}
+
+interface TextControlState extends ManagedState {
+  component: NativeComponent
+  control: HTMLInputElement | HTMLTextAreaElement
+  focusProperty: boolean
+  host: HTMLElement
+  isTextarea: boolean
+  lastLineHeight: number
+  composing: boolean
+}
+
+interface ButtonState extends ManagedState {
+  component: NativeComponent
+  control: HTMLButtonElement
+  host: HTMLElement
+  hoverActive: boolean
+  hoverTokens: string[]
+  hoverStartTimer: number | undefined
+  hoverStayTimer: number | undefined
+}
+
+interface LabelState extends ManagedState {
+  component: NativeComponent
+  control: HTMLLabelElement
+}
+
+interface ImageState extends ManagedState {
+  component: NativeComponent
+  control: HTMLImageElement
+  host: HTMLElement
+  source: string | undefined
+}
+
+interface ScrollState extends ManagedState {
+  component: NativeComponent
+  host: HTMLElement
+  lastLeft: number
+  lastTop: number
+  atLower: boolean
+  atUpper: boolean
+}
+
+interface RichTextState extends ManagedState {
+  component: NativeComponent
+  control: HTMLElement
+}
+
+interface MapState extends ManagedState {
+  api?: import('./tencent-map.ts').TencentMapApi
+  canvas: HTMLElement
+  component: NativeComponent
+  control: HTMLElement
+  generation: number
+  host: HTMLElement
+  label: HTMLElement
+  map?: import('./tencent-map.ts').TencentMap
+  markerLayer?: import('./tencent-map.ts').TencentMultiMarker
+  tiles: HTMLElement
+}
+
+interface RobotChatMessage {
+  role: 'assistant' | 'user'
+  text: string
+}
+
+interface RobotChatState {
+  messages: RobotChatMessage[]
+}
+
+interface RobotChatElementState extends ManagedState {
+  component: NativeComponent
+  control: HTMLElement
+  host: HTMLElement
+  messages: HTMLElement
+  session: RobotChatState
+}
+
+interface RichTextBuildContext {
+  count: number
+  seen: WeakSet<object>
+}
+
+type RichTextTag = 'br' | 'code' | 'del' | 'em' | 'ins' | 'mark' | 'span' | 'strong' | 'sub' | 'sup'
+
+const textControlStates = new WeakMap<NativeComponent, TextControlState>()
+const buttonStates = new WeakMap<NativeComponent, ButtonState>()
+const labelStates = new WeakMap<NativeComponent, LabelState>()
+const imageStates = new WeakMap<NativeComponent, ImageState>()
+const scrollStates = new WeakMap<NativeComponent, ScrollState>()
+const richTextStates = new WeakMap<NativeComponent, RichTextState>()
+const mapStates = new WeakMap<NativeComponent, MapState>()
+const robotChatStates = new WeakMap<NativeComponent, RobotChatElementState>()
+const robotChatSessions = new Map<string, RobotChatState>()
+let activeRobotChat: RobotChatElementState | undefined
+
+const semanticProperties = {
+  ariaBusy: { type: String, value: '' },
+  ariaChecked: { type: String, value: '' },
+  ariaControls: { type: String, value: '' },
+  ariaDescribedby: { type: String, value: '' },
+  ariaExpanded: { type: String, value: '' },
+  ariaHidden: { type: String, value: '' },
+  ariaInvalid: { type: String, value: '' },
+  ariaLabel: { type: String, value: '' },
+  ariaLabelledby: { type: String, value: '' },
+  ariaLive: { type: String, value: '' },
+  ariaPressed: { type: String, value: '' },
+  hidden: { type: Boolean, value: false },
+  role: { type: String, value: '' },
+  tabindex: { type: String, value: '' },
+  title: { type: String, value: '' },
+}
+
+const semanticAttributes = [
+  ['ariaBusy', 'aria-busy'],
+  ['ariaChecked', 'aria-checked'],
+  ['ariaControls', 'aria-controls'],
+  ['ariaDescribedby', 'aria-describedby'],
+  ['ariaExpanded', 'aria-expanded'],
+  ['ariaHidden', 'aria-hidden'],
+  ['ariaInvalid', 'aria-invalid'],
+  ['ariaLabel', 'aria-label'],
+  ['ariaLabelledby', 'aria-labelledby'],
+  ['ariaLive', 'aria-live'],
+  ['ariaPressed', 'aria-pressed'],
+  ['role', 'role'],
+  ['tabindex', 'tabindex'],
+  ['title', 'title'],
+] as const
+
+const inputProperties = {
+  ...semanticProperties,
+  adjustPosition: { type: Boolean, value: true },
+  alwaysEmbed: { type: Boolean, value: false },
+  autoBlur: { type: Boolean, value: false },
+  autoFocus: { type: Boolean, value: false },
+  autoHeight: { type: Boolean, value: false },
+  confirmHold: { type: Boolean, value: false },
+  confirmType: { type: String, value: '' },
+  controlled: { type: Boolean, value: false },
+  cursor: { type: Number, value: -1 },
+  cursorSpacing: { type: Number, value: 0 },
+  disableDefaultPadding: { type: Boolean, value: false },
+  disabled: { type: Boolean, value: false },
+  fixed: { type: Boolean, value: false },
+  focus: { type: Boolean, value: false },
+  form: { type: String, value: '' },
+  holdKeyboard: { type: Boolean, value: false },
+  ignoreCompositionEvent: { type: Boolean, value: true },
+  inputmode: { type: String, value: '' },
+  maxlength: { type: Number, value: -1 },
+  name: { type: String, value: '' },
+  nickNameReview: { type: Boolean, value: false },
+  password: { type: Boolean, value: false },
+  placeholder: { type: String, value: '' },
+  placeholderClass: { type: String, value: '' },
+  placeholderStyle: { type: String, value: '' },
+  randomNumber: { type: Boolean, value: false },
+  readOnly: { type: Boolean, value: false },
+  readonly: { type: Boolean, value: false },
+  safePasswordCertPath: { type: String, value: '' },
+  safePasswordCustomHash: { type: String, value: '' },
+  safePasswordLength: { type: Number, value: 0 },
+  safePasswordNonce: { type: String, value: '' },
+  safePasswordSalt: { type: String, value: '' },
+  safePasswordTimeStamp: { type: Number, value: 0 },
+  selectionEnd: { type: Number, value: -1 },
+  selectionStart: { type: Number, value: -1 },
+  showConfirmBar: { type: Boolean, value: true },
+  type: { type: String, value: 'text' },
+  value: { type: String, value: '' },
+}
+
+const richTextTags: Record<RichTextTag, true> = {
+  br: true,
+  code: true,
+  del: true,
+  em: true,
+  ins: true,
+  mark: true,
+  span: true,
+  strong: true,
+  sub: true,
+  sup: true,
+}
+
+const richTextStyleProperties: Record<string, true> = {
+  'background': true,
+  'border-radius': true,
+  'font-family': true,
+  'padding': true,
+  'text-decoration': true,
+}
+
+function componentOptions(): glassEasel.ComponentOptions {
+  return {
+    hostNodeTagName: 'wx-*',
+    propertyEarlyInit: true,
+    reflectToAttributes: true,
+    writeIdToDOM: true,
+  }
+}
+
+function templateFor(templates: NativeTemplateMap, tag: NativeTag) {
+  const template = templates[tag]
+  if (!template) {
+    throw new Error(`Missing compiled native template for <${tag}>`)
+  }
+  return template
+}
+
+function property(component: NativeComponent, name: string): unknown {
+  return Reflect.get(component.data, name)
+}
+
+function stringProperty(component: NativeComponent, name: string): string {
+  const value = property(component, name)
+  return typeof value === 'string' ? value : ''
+}
+
+function numberProperty(component: NativeComponent, name: string, fallback = 0): number {
+  const value = property(component, name)
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
+}
+
+function booleanProperty(component: NativeComponent, name: string): boolean {
+  return property(component, name) === true
+}
+
+function hasUnsupportedValue(value: unknown): boolean {
+  if (typeof value === 'boolean') { return value }
+  if (typeof value === 'number') { return value !== 0 }
+  if (typeof value === 'string') { return value.length > 0 }
+  return value !== undefined && value !== null
+}
+
+function reportOnce(
+  state: ManagedState,
+  options: NativeElementRegistrationOptions,
+  key: string,
+  message: string,
+) {
+  if (state.reported.has(key)) { return }
+  state.reported.add(key)
+  options.reportError(new Error(message))
+}
+
+function reportUnsupportedProperty(
+  state: ManagedState,
+  options: NativeElementRegistrationOptions,
+  component: NativeComponent,
+  name: string,
+  label: string,
+) {
+  if (!hasUnsupportedValue(property(component, name))) { return }
+  reportOnce(state, options, `unsupported:${name}`, `${label} is not supported by the browser preview adapter`)
+}
+
+function reportBackendError(options: NativeElementRegistrationOptions, tag: NativeTag, control?: string) {
+  const target = control ? ` internal ${control}` : ' host'
+  options.reportError(new Error(`<${tag}> requires a browser DOM${target} element`))
+}
+
+function hostElement(
+  component: NativeComponent,
+  tag: NativeTag,
+  options: NativeElementRegistrationOptions,
+): HTMLElement | undefined {
+  const backend = component.getBackendElement()
+  if (typeof HTMLElement !== 'undefined' && backend instanceof HTMLElement) { return backend }
+  reportBackendError(options, tag)
+  return undefined
+}
+
+function internalBackendElement(component: NativeComponent) {
+  return component.getShadowRoot()?.getElementById('control')?.getBackendElement()
+}
+
+function inputElement(
+  component: NativeComponent,
+  isTextarea: boolean,
+  options: NativeElementRegistrationOptions,
+): HTMLInputElement | HTMLTextAreaElement | undefined {
+  const backend = internalBackendElement(component)
+  if (isTextarea) {
+    if (typeof HTMLTextAreaElement !== 'undefined' && backend instanceof HTMLTextAreaElement) { return backend }
+    reportBackendError(options, 'textarea', 'textarea')
+    return undefined
+  }
+  if (typeof HTMLInputElement !== 'undefined' && backend instanceof HTMLInputElement) { return backend }
+  reportBackendError(options, 'input', 'input')
+  return undefined
+}
+
+function buttonElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLButtonElement !== 'undefined' && backend instanceof HTMLButtonElement) { return backend }
+  reportBackendError(options, 'button', 'button')
+  return undefined
+}
+
+function labelElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLLabelElement !== 'undefined' && backend instanceof HTMLLabelElement) { return backend }
+  reportBackendError(options, 'label', 'label')
+  return undefined
+}
+
+function imageElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLImageElement !== 'undefined' && backend instanceof HTMLImageElement) { return backend }
+  reportBackendError(options, 'image', 'image')
+  return undefined
+}
+
+function richTextElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLElement !== 'undefined' && backend instanceof HTMLElement) { return backend }
+  reportBackendError(options, 'rich-text', 'span')
+  return undefined
+}
+
+function mapElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLElement !== 'undefined' && backend instanceof HTMLElement) { return backend }
+  reportBackendError(options, 'map', 'surface')
+  return undefined
+}
+
+function robotChatElement(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  const backend = internalBackendElement(component)
+  if (typeof HTMLElement !== 'undefined' && backend instanceof HTMLElement) { return backend }
+  reportBackendError(options, 'wechat-robot-chat', 'surface')
+  return undefined
+}
+
+function childElement(parent: HTMLElement, id: string): HTMLElement | undefined {
+  const node = parent.querySelector(`#${id}`)
+  return node instanceof HTMLElement ? node : undefined
+}
+
+function clampNumber(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function mapZoom(scale: number) {
+  return clampNumber(scale, 3, 20)
+}
+
+function wrapLongitude(value: number) {
+  const wrapped = ((value + 180) % 360 + 360) % 360 - 180
+  return wrapped === -180 ? 180 : wrapped
+}
+
+function projectWebMercator(latitude: number, longitude: number, zoom: number) {
+  const clampedLatitude = clampNumber(latitude, -85.05112878, 85.05112878)
+  const world = 256 * (2 ** zoom)
+  const x = ((wrapLongitude(longitude) + 180) / 360) * world
+  const sine = Math.sin((clampedLatitude * Math.PI) / 180)
+  const y = (0.5 - Math.log((1 + sine) / (1 - sine)) / (4 * Math.PI)) * world
+  return { world, x, y }
+}
+
+function renderTencentRasterTiles(state: MapState, latitude: number, longitude: number, zoom: number) {
+  const width = Math.max(state.control.clientWidth || state.host.clientWidth || 390, 256)
+  const height = Math.max(state.control.clientHeight || state.host.clientHeight || 240, 160)
+  const projection = projectWebMercator(latitude, longitude, Math.round(zoom))
+  const tileSize = 256
+  const originX = Math.floor(projection.x / tileSize)
+  const originY = Math.floor(projection.y / tileSize)
+  const offsetX = Math.round(width / 2 - (projection.x - originX * tileSize))
+  const offsetY = Math.round(height / 2 - (projection.y - originY * tileSize))
+  const columns = Math.ceil(width / tileSize) + 2
+  const rows = Math.ceil(height / tileSize) + 2
+  const fragment = state.tiles.ownerDocument.createDocumentFragment()
+  const size = 2 ** Math.round(zoom)
+  for (let row = -1; row < rows; row += 1) {
+    for (let column = -1; column < columns; column += 1) {
+      const tileY = originY + row
+      if (tileY < 0 || tileY >= size) { continue }
+      const tileX = originX + column
+      const image = state.tiles.ownerDocument.createElement('img')
+      image.className = 'varo-native-map__tile'
+      image.alt = ''
+      image.decoding = 'async'
+      image.referrerPolicy = 'no-referrer'
+      image.src = tencentRasterTileUrl(tileX, tileY, Math.round(zoom))
+      image.style.left = `${offsetX + column * tileSize}px`
+      image.style.top = `${offsetY + row * tileSize}px`
+      fragment.append(image)
+    }
+  }
+  state.tiles.replaceChildren(fragment)
+}
+
+function recordValue(value: unknown): Record<string, unknown> | undefined {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : undefined
+}
+
+function numberField(value: unknown, fallback = Number.NaN) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
+}
+
+function stringField(value: unknown) {
+  return typeof value === 'string' ? value : ''
+}
+
+function robotWelcome(options: Record<string, unknown>) {
+  const welcome = stringField(options.welcome).trim()
+  return welcome || '你好，请问需要什么帮助？'
+}
+
+function robotReply(query: string) {
+  return `已收到「${query}」。这是 Web Preview 对 chatbotwidget 插件会话面的可见宿主，不是微信对话开放平台。`
+}
+
+function addDomListener(
+  state: ManagedState,
+  target: EventTarget,
+  type: string,
+  listener: (event: Event) => void,
+  capture = false,
+) {
+  target.addEventListener(type, listener, capture)
+  state.cleanups.push(() => target.removeEventListener(type, listener, capture))
+}
+
+function cleanState(state: ManagedState) {
+  for (const cleanup of state.cleanups.splice(0)) { cleanup() }
+}
+
+function syncSemanticAttributes(component: NativeComponent, control: HTMLElement) {
+  for (const [propertyName, attributeName] of semanticAttributes) {
+    const value = stringProperty(component, propertyName)
+    if (value) {
+      control.setAttribute(attributeName, value)
+    }
+    else { control.removeAttribute(attributeName) }
+  }
+  control.hidden = booleanProperty(component, 'hidden')
+}
+
+function setOptionalAttribute(element: HTMLElement, name: string, value: string) {
+  if (value) {
+    element.setAttribute(name, value)
+  }
+  else { element.removeAttribute(name) }
+}
+
+function isTextControlStateCurrent(state: TextControlState) {
+  return textControlStates.get(state.component) === state
+}
+
+function textControlReadOnly(state: TextControlState) {
+  return booleanProperty(state.component, 'readOnly')
+    || booleanProperty(state.component, 'readonly')
+    || state.host.dataset.readonly === 'true'
+}
+
+function selectionDetail(control: HTMLInputElement | HTMLTextAreaElement) {
+  const value = control.value
+  const selectionStart = control.selectionStart ?? value.length
+  const selectionEnd = control.selectionEnd ?? selectionStart
+  return {
+    cursor: selectionStart,
+    selectionEnd,
+    selectionStart,
+    value,
+  }
+}
+
+function applySelection(state: TextControlState, options: NativeElementRegistrationOptions) {
+  const control = state.control
+  if (control.ownerDocument.activeElement !== control || control.selectionStart === null) { return }
+
+  const cursor = numberProperty(state.component, 'cursor', -1)
+  const requestedStart = numberProperty(state.component, 'selectionStart', -1)
+  const requestedEnd = numberProperty(state.component, 'selectionEnd', -1)
+  const start = requestedStart >= 0 ? requestedStart : cursor
+  if (start < 0) { return }
+  const end = requestedEnd >= 0 ? requestedEnd : start
+  const boundedStart = Math.min(Math.trunc(start), control.value.length)
+  const boundedEnd = Math.min(Math.max(Math.trunc(end), boundedStart), control.value.length)
+  try {
+    control.setSelectionRange(boundedStart, boundedEnd)
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    reportOnce(
+      state,
+      options,
+      'unsupported:selection',
+      `The requested cursor selection is not supported for this input type: ${message}`,
+    )
+  }
+}
+
+function syncInputType(state: TextControlState, options: NativeElementRegistrationOptions) {
+  if (state.isTextarea) { return false }
+  const control = state.control
+  if (!(control instanceof HTMLInputElement)) { return false }
+
+  let type = stringProperty(state.component, 'type') || 'text'
+  let inputMode = stringProperty(state.component, 'inputmode')
+  let unavailable = false
+
+  if (booleanProperty(state.component, 'password')) {
+    type = 'password'
+  }
+
+  switch (type) {
+    case 'text':
+    case 'password':
+    case 'number':
+    case 'email':
+    case 'url':
+    case 'tel':
+    case 'search':
+      control.type = type
+      break
+    case 'digit':
+      control.type = 'text'
+      inputMode = 'decimal'
+      break
+    case 'idcard':
+      control.type = 'text'
+      reportOnce(
+        state,
+        options,
+        'unsupported:type:idcard',
+        'The WeChat ID-card keyboard is not available in the browser preview adapter',
+      )
+      break
+    case 'safe-password':
+      control.type = 'password'
+      unavailable = true
+      reportOnce(
+        state,
+        options,
+        'unsupported:type:safe-password',
+        'WeChat safe-password input is not available in the browser preview adapter',
+      )
+      break
+    case 'nickname':
+      control.type = 'text'
+      reportOnce(
+        state,
+        options,
+        'unsupported:type:nickname',
+        'The WeChat nickname-review keyboard is not available in the browser preview adapter',
+      )
+      break
+    default:
+      control.type = 'text'
+      unavailable = true
+      reportOnce(
+        state,
+        options,
+        `unsupported:type:${type}`,
+        `Input type "${type}" is not supported by the browser preview adapter`,
+      )
+      break
+  }
+
+  control.inputMode = inputMode
+  return unavailable
+}
+
+function syncEnterKeyHint(component: NativeComponent, control: HTMLInputElement | HTMLTextAreaElement) {
+  const confirmType = stringProperty(component, 'confirmType')
+  if (
+    confirmType === 'enter'
+    || confirmType === 'done'
+    || confirmType === 'go'
+    || confirmType === 'next'
+    || confirmType === 'previous'
+    || confirmType === 'search'
+    || confirmType === 'send'
+  ) {
+    control.enterKeyHint = confirmType
+  }
+  else {
+    control.removeAttribute('enterkeyhint')
+  }
+}
+
+function resizeTextarea(state: TextControlState) {
+  if (!state.isTextarea || !booleanProperty(state.component, 'autoHeight')) { return }
+  const control = state.control
+  if (!(control instanceof HTMLTextAreaElement)) { return }
+  control.style.height = 'auto'
+  control.style.height = `${control.scrollHeight}px`
+}
+
+function syncTextControlConfig(
+  state: TextControlState,
+  options: NativeElementRegistrationOptions,
+  initial: boolean,
+) {
+  if (!isTextControlStateCurrent(state)) { return }
+  const { component, control, host } = state
+  syncSemanticAttributes(component, control)
+  setOptionalAttribute(control, 'name', stringProperty(component, 'name'))
+  setOptionalAttribute(control, 'form', stringProperty(component, 'form'))
+  control.placeholder = stringProperty(component, 'placeholder')
+  control.readOnly = textControlReadOnly(state)
+  const unsupportedType = syncInputType(state, options)
+  control.disabled = booleanProperty(component, 'disabled') || unsupportedType
+
+  const maxLength = numberProperty(component, 'maxlength', -1)
+  if (maxLength >= 0) {
+    control.maxLength = Math.trunc(maxLength)
+  }
+  else { control.removeAttribute('maxlength') }
+
+  syncEnterKeyHint(component, control)
+  host.dataset.nativeAutoHeight = String(state.isTextarea && booleanProperty(component, 'autoHeight'))
+  resizeTextarea(state)
+
+  reportUnsupportedProperty(state, options, component, 'confirmHold', 'Keeping the keyboard open after confirm')
+  reportUnsupportedProperty(state, options, component, 'cursorSpacing', 'WeChat cursor-spacing')
+  reportUnsupportedProperty(state, options, component, 'holdKeyboard', 'WeChat hold-keyboard')
+  reportUnsupportedProperty(state, options, component, 'nickNameReview', 'WeChat nickname review')
+  reportUnsupportedProperty(state, options, component, 'placeholderClass', 'WeChat placeholder-class')
+  reportUnsupportedProperty(state, options, component, 'placeholderStyle', 'WeChat placeholder-style')
+  reportUnsupportedProperty(state, options, component, 'randomNumber', 'WeChat randomized numeric keyboard')
+  reportUnsupportedProperty(state, options, component, 'safePasswordCertPath', 'WeChat safe-password certificate')
+  reportUnsupportedProperty(state, options, component, 'safePasswordCustomHash', 'WeChat safe-password custom hash')
+  reportUnsupportedProperty(state, options, component, 'safePasswordLength', 'WeChat safe-password length')
+  reportUnsupportedProperty(state, options, component, 'safePasswordNonce', 'WeChat safe-password nonce')
+  reportUnsupportedProperty(state, options, component, 'safePasswordSalt', 'WeChat safe-password salt')
+  reportUnsupportedProperty(state, options, component, 'safePasswordTimeStamp', 'WeChat safe-password timestamp')
+
+  const focus = booleanProperty(component, 'focus')
+  if (focus && !state.focusProperty && !control.disabled) {
+    control.focus({ preventScroll: !booleanProperty(component, 'adjustPosition') })
+  }
+  else if (!focus && state.focusProperty && control.ownerDocument.activeElement === control) {
+    control.blur()
+  }
+  state.focusProperty = focus
+
+  if (initial && booleanProperty(component, 'autoFocus') && !control.disabled) {
+    control.focus({ preventScroll: !booleanProperty(component, 'adjustPosition') })
+  }
+  applySelection(state, options)
+}
+
+function syncTextControlValue(state: TextControlState) {
+  if (!isTextControlStateCurrent(state)) { return }
+  const value = stringProperty(state.component, 'value')
+  if (state.control.value === value) { return }
+  const start = state.control.selectionStart
+  const end = state.control.selectionEnd
+  state.control.value = value
+  if (state.control.ownerDocument.activeElement === state.control && start !== null && end !== null) {
+    const boundedStart = Math.min(start, value.length)
+    const boundedEnd = Math.min(end, value.length)
+    state.control.setSelectionRange(boundedStart, boundedEnd)
+  }
+  resizeTextarea(state)
+}
+
+function triggerTextControlEvent(
+  state: TextControlState,
+  name: string,
+  detail: Record<string, unknown>,
+  originalEvent: Event,
+) {
+  state.component.triggerEvent(name, detail, { bubbles: false, composed: false, originalEvent })
+}
+
+function forwardInputEvent(
+  state: TextControlState,
+  options: NativeElementRegistrationOptions,
+  event: Event,
+) {
+  event.stopImmediatePropagation()
+  if (!isTextControlStateCurrent(state)) { return }
+
+  if (state.composing && booleanProperty(state.component, 'ignoreCompositionEvent')) { return }
+  if (state.control.disabled || textControlReadOnly(state)) {
+    syncTextControlValue(state)
+    return
+  }
+
+  let listenerValue: string | undefined
+  const detail = selectionDetail(state.control)
+  state.component.triggerEvent('input', detail, { bubbles: false, composed: false, originalEvent: event, handleListenerReturn(returned) {
+    if (typeof returned === 'string') { listenerValue = returned }
+  } })
+
+  if (listenerValue !== undefined && state.control.value !== listenerValue) {
+    state.control.value = listenerValue
+  }
+  if (booleanProperty(state.component, 'controlled')) { syncTextControlValue(state) }
+
+  if (state.isTextarea && booleanProperty(state.component, 'autoHeight')) {
+    const previousHeight = state.lastLineHeight
+    resizeTextarea(state)
+    const height = state.control.scrollHeight
+    state.lastLineHeight = height
+    if (height !== previousHeight) {
+      const computed = state.control.ownerDocument.defaultView?.getComputedStyle(state.control)
+      const lineHeight = computed ? Number.parseFloat(computed.lineHeight) : 0
+      const lineCount = lineHeight > 0 ? Math.max(1, Math.round(height / lineHeight)) : 1
+      triggerTextControlEvent(state, 'linechange', { height, heightRpx: height, lineCount }, event)
+    }
+  }
+  applySelection(state, options)
+}
+
+function detachTextControl(component: NativeComponent) {
+  const state = textControlStates.get(component)
+  if (!state) { return }
+  textControlStates.delete(component)
+  cleanState(state)
+}
+
+function attachTextControl(
+  component: NativeComponent,
+  isTextarea: boolean,
+  options: NativeElementRegistrationOptions,
+) {
+  detachTextControl(component)
+  const host = hostElement(component, isTextarea ? 'textarea' : 'input', options)
+  const control = inputElement(component, isTextarea, options)
+  if (!host || !control) { return }
+
+  const state: TextControlState = {
+    cleanups: [],
+    component,
+    composing: false,
+    control,
+    focusProperty: false,
+    host,
+    isTextarea,
+    lastLineHeight: 0,
+    reported: new Set(),
+  }
+  textControlStates.set(component, state)
+
+  addDomListener(state, control, 'compositionstart', () => {
+    if (isTextControlStateCurrent(state)) { state.composing = true }
+  }, true)
+  addDomListener(state, control, 'compositionend', () => {
+    if (isTextControlStateCurrent(state)) { state.composing = false }
+  }, true)
+  addDomListener(state, control, 'input', event => forwardInputEvent(state, options, event), true)
+  addDomListener(state, control, 'focus', (event) => {
+    event.stopImmediatePropagation()
+    if (!isTextControlStateCurrent(state)) { return }
+    const detail = selectionDetail(control)
+    triggerTextControlEvent(state, 'focus', {
+      height: host.getBoundingClientRect().height,
+      value: detail.value,
+    }, event)
+  }, true)
+  addDomListener(state, control, 'blur', (event) => {
+    event.stopImmediatePropagation()
+    if (!isTextControlStateCurrent(state)) { return }
+    triggerTextControlEvent(state, 'blur', selectionDetail(control), event)
+  }, true)
+  addDomListener(state, control, 'keydown', (event) => {
+    if (!isTextControlStateCurrent(state) || !(event instanceof KeyboardEvent) || event.key !== 'Enter') { return }
+    if (state.isTextarea && event.shiftKey) { return }
+    const confirmType = stringProperty(component, 'confirmType')
+    if (state.isTextarea && !confirmType) { return }
+    event.preventDefault()
+    triggerTextControlEvent(state, 'confirm', { value: control.value }, event)
+    if (booleanProperty(component, 'autoBlur')) { control.blur() }
+  }, true)
+
+  if (typeof MutationObserver !== 'undefined') {
+    const observer = new MutationObserver(() => syncTextControlConfig(state, options, false))
+    observer.observe(host, { attributeFilter: ['data-readonly'], attributes: true })
+    state.cleanups.push(() => observer.disconnect())
+  }
+  else {
+    reportOnce(state, options, 'unsupported:mutation-observer', 'The browser does not provide MutationObserver')
+  }
+
+  syncTextControlConfig(state, options, true)
+  syncTextControlValue(state)
+}
+
+function isButtonStateCurrent(state: ButtonState) {
+  return buttonStates.get(state.component) === state
+}
+
+function clearButtonTimer(state: ButtonState, timer: 'hoverStartTimer' | 'hoverStayTimer') {
+  const handle = state[timer]
+  if (handle !== undefined) { window.clearTimeout(handle) }
+  state[timer] = undefined
+}
+
+function setButtonHover(state: ButtonState, active: boolean) {
+  if (!isButtonStateCurrent(state) || state.hoverActive === active) { return }
+  state.hoverActive = active
+  for (const token of state.hoverTokens) {
+    state.component.classList?.toggle(token, active, STYLE_SEGMENT_TEMP_EXTRA)
+  }
+}
+
+function scheduleButtonHover(state: ButtonState, active: boolean) {
+  clearButtonTimer(state, 'hoverStartTimer')
+  clearButtonTimer(state, 'hoverStayTimer')
+  const delay = Math.max(0, numberProperty(
+    state.component,
+    active ? 'hoverStartTime' : 'hoverStayTime',
+    active ? 20 : 70,
+  ))
+  const timer = active ? 'hoverStartTimer' : 'hoverStayTimer'
+  state[timer] = window.setTimeout(() => {
+    state[timer] = undefined
+    if (isButtonStateCurrent(state)) { setButtonHover(state, active) }
+  }, delay)
+}
+
+function syncButton(state: ButtonState, options: NativeElementRegistrationOptions) {
+  if (!isButtonStateCurrent(state)) { return }
+  const { component, control } = state
+  syncSemanticAttributes(component, control)
+  control.disabled = booleanProperty(component, 'disabled')
+  setOptionalAttribute(control, 'name', stringProperty(component, 'name'))
+  setOptionalAttribute(control, 'form', stringProperty(component, 'form'))
+
+  const requestedType = stringProperty(component, 'formType') || stringProperty(component, 'type') || 'button'
+  if (requestedType === 'button' || requestedType === 'submit' || requestedType === 'reset') {
+    control.type = requestedType
+  }
+  else {
+    control.type = 'button'
+    reportOnce(
+      state,
+      options,
+      `unsupported:type:${requestedType}`,
+      `Button type "${requestedType}" is not supported by the browser preview adapter`,
+    )
+  }
+
+  const nextHoverTokens = stringProperty(component, 'hoverClass')
+    .split(/\s+/u)
+    .filter(token => token && token !== 'none')
+  if (nextHoverTokens.join('\0') !== state.hoverTokens.join('\0')) {
+    setButtonHover(state, false)
+    state.hoverTokens = nextHoverTokens
+  }
+  if (control.disabled) {
+    clearButtonTimer(state, 'hoverStartTimer')
+    clearButtonTimer(state, 'hoverStayTimer')
+    setButtonHover(state, false)
+  }
+}
+
+function detachButton(component: NativeComponent) {
+  const state = buttonStates.get(component)
+  if (!state) { return }
+  clearButtonTimer(state, 'hoverStartTimer')
+  clearButtonTimer(state, 'hoverStayTimer')
+  setButtonHover(state, false)
+  buttonStates.delete(component)
+  cleanState(state)
+}
+
+function attachButton(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachButton(component)
+  const host = hostElement(component, 'button', options)
+  const control = buttonElement(component, options)
+  if (!host || !control) { return }
+
+  const state: ButtonState = {
+    cleanups: [],
+    component,
+    control,
+    host,
+    hoverActive: false,
+    hoverStartTimer: undefined,
+    hoverStayTimer: undefined,
+    hoverTokens: [],
+    reported: new Set(),
+  }
+  buttonStates.set(component, state)
+
+  addDomListener(state, control, 'click', (event) => {
+    if (!isButtonStateCurrent(state) || !booleanProperty(component, 'disabled')) { return }
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }, true)
+  addDomListener(state, control, 'pointerdown', () => {
+    if (isButtonStateCurrent(state) && !control.disabled) { scheduleButtonHover(state, true) }
+  }, true)
+  addDomListener(state, control, 'pointerup', () => scheduleButtonHover(state, false), true)
+  addDomListener(state, control, 'pointercancel', () => scheduleButtonHover(state, false), true)
+  addDomListener(state, control, 'pointerleave', () => scheduleButtonHover(state, false), true)
+
+  syncButton(state, options)
+}
+
+function syncLabel(state: LabelState) {
+  if (labelStates.get(state.component) !== state) { return }
+  syncSemanticAttributes(state.component, state.control)
+  state.control.htmlFor = stringProperty(state.component, 'for')
+}
+
+function detachLabel(component: NativeComponent) {
+  const state = labelStates.get(component)
+  if (!state) { return }
+  labelStates.delete(component)
+  cleanState(state)
+}
+
+function attachLabel(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachLabel(component)
+  const control = labelElement(component, options)
+  if (!control) { return }
+  const state: LabelState = {
+    cleanups: [],
+    component,
+    control,
+    reported: new Set(),
+  }
+  labelStates.set(component, state)
+  addDomListener(state, control, 'click', () => {
+    if (labelStates.get(state.component) !== state) { return }
+    const id = stringProperty(component, 'for')
+    if (!id) { return }
+    const logicalTarget = component.ownerShadowRoot?.getElementById(id)?.getBackendElement()
+    const target = logicalTarget instanceof HTMLElement
+      ? logicalTarget
+      : control.ownerDocument.getElementById(id)
+    if (!target) { return }
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLButtonElement) {
+      target.focus()
+      return
+    }
+    target.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement>('input, textarea, button')?.focus()
+  })
+  syncLabel(state)
+}
+
+function isImageStateCurrent(state: ImageState) {
+  return imageStates.get(state.component) === state
+}
+
+function syncImageSource(state: ImageState, options: NativeElementRegistrationOptions) {
+  if (!isImageStateCurrent(state)) { return }
+  const source = stringProperty(state.component, 'src')
+  if (state.source === source) { return }
+  state.source = source
+  if (!source) {
+    state.control.removeAttribute('src')
+    return
+  }
+  try {
+    const resolved = options.resolveAssetUrl(source)
+    if (!resolved) { throw new Error(`Asset resolver returned an empty URL for "${source}"`) }
+    state.control.src = resolved
+  }
+  catch (error) {
+    state.control.removeAttribute('src')
+    const cause = error instanceof Error ? error.message : String(error)
+    reportOnce(state, options, `asset:${source}`, `Unable to resolve image asset "${source}": ${cause}`)
+  }
+}
+
+function syncImageMode(state: ImageState, options: NativeElementRegistrationOptions) {
+  if (!isImageStateCurrent(state)) { return }
+  const { component, control, host } = state
+  syncSemanticAttributes(component, control)
+  control.alt = stringProperty(component, 'alt')
+  control.draggable = booleanProperty(component, 'draggable')
+  control.loading = booleanProperty(component, 'lazyLoad') ? 'lazy' : 'eager'
+
+  const mode = stringProperty(component, 'mode') || 'scaleToFill'
+  host.dataset.nativeImageMode = mode
+  control.style.width = '100%'
+  control.style.height = '100%'
+  control.style.objectFit = 'fill'
+  control.style.objectPosition = 'center'
+
+  if (mode === 'aspectFit') {
+    control.style.objectFit = 'contain'
+  }
+  else if (mode === 'aspectFill') {
+    control.style.objectFit = 'cover'
+  }
+  else if (mode === 'widthFix') {
+    control.style.height = 'auto'
+  }
+  else if (mode === 'heightFix') {
+    control.style.width = 'auto'
+  }
+  else if (mode === 'top') {
+    control.style.objectFit = 'none'
+    control.style.objectPosition = 'top'
+  }
+  else if (mode === 'bottom') {
+    control.style.objectFit = 'none'
+    control.style.objectPosition = 'bottom'
+  }
+  else if (mode === 'center') {
+    control.style.objectFit = 'none'
+  }
+  else if (mode === 'left') {
+    control.style.objectFit = 'none'
+    control.style.objectPosition = 'left'
+  }
+  else if (mode === 'right') {
+    control.style.objectFit = 'none'
+    control.style.objectPosition = 'right'
+  }
+  else if (mode === 'top left' || mode === 'top right' || mode === 'bottom left' || mode === 'bottom right') {
+    control.style.objectFit = 'none'
+    control.style.objectPosition = mode
+  }
+  else if (mode !== 'scaleToFill') {
+    reportOnce(
+      state,
+      options,
+      `unsupported:mode:${mode}`,
+      `Image sizing mode "${mode}" is not supported by the browser preview adapter`,
+    )
+  }
+
+  reportUnsupportedProperty(state, options, component, 'showMenuByLongpress', 'WeChat image long-press menus')
+}
+
+function detachImage(component: NativeComponent) {
+  const state = imageStates.get(component)
+  if (!state) { return }
+  imageStates.delete(component)
+  cleanState(state)
+}
+
+function attachImage(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachImage(component)
+  const host = hostElement(component, 'image', options)
+  const control = imageElement(component, options)
+  if (!host || !control) { return }
+  const state: ImageState = {
+    cleanups: [],
+    component,
+    control,
+    host,
+    reported: new Set(),
+    source: undefined,
+  }
+  imageStates.set(component, state)
+  addDomListener(state, control, 'load', (event) => {
+    event.stopImmediatePropagation()
+    if (!isImageStateCurrent(state)) { return }
+    component.triggerEvent('load', {
+      height: control.naturalHeight,
+      width: control.naturalWidth,
+    }, { bubbles: false, composed: false, originalEvent: event })
+  }, true)
+  addDomListener(state, control, 'error', (event) => {
+    event.stopImmediatePropagation()
+    if (!isImageStateCurrent(state)) { return }
+    component.triggerEvent('error', {
+      errMsg: `Failed to load image: ${stringProperty(component, 'src')}`,
+    }, { bubbles: false, composed: false, originalEvent: event })
+  }, true)
+  syncImageMode(state, options)
+  syncImageSource(state, options)
+}
+
+function isScrollStateCurrent(state: ScrollState) {
+  return scrollStates.get(state.component) === state
+}
+
+function syncScrollConfig(state: ScrollState) {
+  if (!isScrollStateCurrent(state)) { return }
+  const { component, host } = state
+  host.dataset.nativeScrollX = String(booleanProperty(component, 'scrollX'))
+  host.dataset.nativeScrollY = String(booleanProperty(component, 'scrollY'))
+  host.dataset.nativeScrollbar = booleanProperty(component, 'showScrollbar') ? 'visible' : 'hidden'
+}
+
+function syncScrollPosition(state: ScrollState) {
+  if (!isScrollStateCurrent(state)) { return }
+  const behavior = booleanProperty(state.component, 'scrollWithAnimation') ? 'smooth' : 'auto'
+  state.host.scrollTo({
+    behavior,
+    left: numberProperty(state.component, 'scrollLeft'),
+    top: numberProperty(state.component, 'scrollTop'),
+  })
+}
+
+function detachScroll(component: NativeComponent) {
+  const state = scrollStates.get(component)
+  if (!state) { return }
+  scrollStates.delete(component)
+  cleanState(state)
+}
+
+function attachScroll(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachScroll(component)
+  const host = hostElement(component, 'scroll-view', options)
+  if (!host) { return }
+  const state: ScrollState = {
+    atLower: false,
+    atUpper: true,
+    cleanups: [],
+    component,
+    host,
+    lastLeft: host.scrollLeft,
+    lastTop: host.scrollTop,
+    reported: new Set(),
+  }
+  scrollStates.set(component, state)
+  addDomListener(state, host, 'scroll', (event) => {
+    event.stopImmediatePropagation()
+    if (!isScrollStateCurrent(state)) { return }
+    const scrollLeft = host.scrollLeft
+    const scrollTop = host.scrollTop
+    const detail = {
+      deltaX: scrollLeft - state.lastLeft,
+      deltaY: scrollTop - state.lastTop,
+      scrollHeight: host.scrollHeight,
+      scrollLeft,
+      scrollTop,
+      scrollWidth: host.scrollWidth,
+    }
+    state.lastLeft = scrollLeft
+    state.lastTop = scrollTop
+    component.triggerEvent('scroll', detail, { bubbles: false, composed: false, originalEvent: event })
+
+    const vertical = booleanProperty(component, 'scrollY')
+    const position = vertical ? scrollTop : scrollLeft
+    const extent = vertical ? host.clientHeight : host.clientWidth
+    const fullExtent = vertical ? host.scrollHeight : host.scrollWidth
+    const upper = position <= numberProperty(component, 'upperThreshold', 50)
+    const lower = position + extent >= fullExtent - numberProperty(component, 'lowerThreshold', 50)
+    if (upper && !state.atUpper) {
+      component.triggerEvent('scrolltoupper', { direction: vertical ? 'top' : 'left' }, { bubbles: false, composed: false, originalEvent: event })
+    }
+    if (lower && !state.atLower) {
+      component.triggerEvent('scrolltolower', { direction: vertical ? 'bottom' : 'right' }, { bubbles: false, composed: false, originalEvent: event })
+    }
+    state.atUpper = upper
+    state.atLower = lower
+  }, true)
+  syncScrollConfig(state)
+  syncScrollPosition(state)
+}
+
+function isRichTextTag(value: unknown): value is RichTextTag {
+  return typeof value === 'string' && Object.hasOwn(richTextTags, value)
+}
+
+function applySafeRichTextStyle(element: HTMLElement, source: string) {
+  for (const rawDeclaration of source.split(';')) {
+    const declaration = rawDeclaration.trim()
+    if (!declaration) { continue }
+    const colon = declaration.indexOf(':')
+    if (colon <= 0) { throw new Error(`Invalid rich-text style declaration: "${declaration}"`) }
+    const name = declaration.slice(0, colon).trim().toLowerCase()
+    const value = declaration.slice(colon + 1).trim()
+    if (!richTextStyleProperties[name]) {
+      throw new Error(`Rich-text style property "${name}" is not allowed`)
+    }
+    if (
+      !value
+      || !/^[\w\s#(),.%+\-]+$/u.test(value)
+      || /(?:expression|image-set|url)\s*\(/iu.test(value)
+    ) {
+      throw new Error(`Unsafe rich-text style value for "${name}"`)
+    }
+    element.style.setProperty(name, value)
+  }
+}
+
+function createRichTextNode(
+  document: Document,
+  value: unknown,
+  context: RichTextBuildContext,
+  depth: number,
+): Node {
+  if (depth > 64) { throw new Error('Rich-text nodes exceed the maximum supported depth of 64') }
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new Error('Rich-text nodes must be objects')
+  }
+  if (context.seen.has(value)) { throw new Error('Rich-text nodes must not contain cycles') }
+  context.count += 1
+  if (context.count > 10_000) { throw new Error('Rich-text nodes exceed the maximum supported count of 10000') }
+  context.seen.add(value)
+
+  try {
+    const type = Reflect.get(value, 'type')
+    const text = Reflect.get(value, 'text')
+    if (type === 'text') {
+      if (typeof text !== 'string') { throw new TypeError('Rich-text text nodes require a string text field') }
+      return document.createTextNode(text)
+    }
+
+    const name = Reflect.get(value, 'name')
+    if (!isRichTextTag(name)) { throw new Error(`Unsupported rich-text element: ${String(name)}`) }
+    const element = document.createElement(name)
+    const attrs = Reflect.get(value, 'attrs')
+    if (attrs !== undefined) {
+      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) {
+        throw new Error('Rich-text attrs must be a string record')
+      }
+      for (const [attributeName, attributeValue] of Object.entries(attrs)) {
+        if (attributeName !== 'style' || typeof attributeValue !== 'string') {
+          throw new Error(`Rich-text attribute "${attributeName}" is not allowed`)
+        }
+        applySafeRichTextStyle(element, attributeValue)
+      }
+    }
+
+    const children = Reflect.get(value, 'children')
+    if (children !== undefined) {
+      if (!Array.isArray(children)) { throw new TypeError('Rich-text children must be an array') }
+      if (name === 'br' && children.length > 0) {
+        throw new Error('Rich-text <br> nodes cannot have children')
+      }
+      for (const child of children) {
+        element.appendChild(createRichTextNode(document, child, context, depth + 1))
+      }
+    }
+    return element
+  }
+  finally {
+    context.seen.delete(value)
+  }
+}
+
+function renderRichText(state: RichTextState, options: NativeElementRegistrationOptions) {
+  if (richTextStates.get(state.component) !== state) { return }
+  const nodes = property(state.component, 'nodes')
+  if (!Array.isArray(nodes)) {
+    state.control.replaceChildren()
+    reportOnce(state, options, 'invalid:nodes', 'The <rich-text> nodes property must be an array')
+    return
+  }
+
+  try {
+    const document = state.control.ownerDocument
+    const fragment = document.createDocumentFragment()
+    const context: RichTextBuildContext = { count: 0, seen: new WeakSet() }
+    for (const node of nodes) { fragment.appendChild(createRichTextNode(document, node, context, 0)) }
+    state.control.replaceChildren(fragment)
+    state.control.style.userSelect = booleanProperty(state.component, 'selectable') ? 'text' : ''
+    syncSemanticAttributes(state.component, state.control)
+  }
+  catch (error) {
+    state.control.replaceChildren()
+    const message = error instanceof Error ? error.message : String(error)
+    reportOnce(state, options, `invalid:nodes:${message}`, `Unable to render <rich-text> nodes: ${message}`)
+  }
+}
+
+function detachRichText(component: NativeComponent) {
+  const state = richTextStates.get(component)
+  if (!state) { return }
+  richTextStates.delete(component)
+  cleanState(state)
+}
+
+function attachRichText(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachRichText(component)
+  const control = richTextElement(component, options)
+  if (!control) { return }
+  const state: RichTextState = {
+    cleanups: [],
+    component,
+    control,
+    reported: new Set(),
+  }
+  richTextStates.set(component, state)
+  renderRichText(state, options)
+}
+
+function countNativeMapItems(value: unknown): number {
+  return Array.isArray(value) ? value.length : 0
+}
+
+function isMapStateCurrent(state: MapState) {
+  return mapStates.get(state.component) === state
+}
+
+function emitMapRegionChange(state: MapState, causedBy: string) {
+  if (!isMapStateCurrent(state)) { return }
+  state.component.triggerEvent('regionchange', {
+    causedBy,
+    type: 'end',
+    detail: {
+      centerLocation: {
+        latitude: numberProperty(state.component, 'latitude'),
+        longitude: numberProperty(state.component, 'longitude'),
+      },
+    },
+  }, { bubbles: false, composed: false })
+}
+
+function markerGeometries(state: MapState, api: import('./tencent-map.ts').TencentMapApi) {
+  const markers = property(state.component, 'markers')
+  if (!Array.isArray(markers)) { return [] }
+  return markers.flatMap((marker, index) => {
+    const record = recordValue(marker)
+    if (!record) { return [] }
+    return [{
+      id: String(record.id ?? index),
+      position: new api.LatLng(
+        numberField(record.latitude, numberProperty(state.component, 'latitude')),
+        numberField(record.longitude, numberProperty(state.component, 'longitude')),
+      ),
+      properties: { title: stringField(record.title) || stringField(record.callout) || '标记' },
+    }]
+  })
+}
+
+function ensureTencentMap(state: MapState, options: NativeElementRegistrationOptions) {
+  if (state.map || !isMapStateCurrent(state)) { return }
+  const generation = state.generation
+  void loadTencentMapApi(options.mapKey ?? tencentMapDemoKey).then((api) => {
+    if (!isMapStateCurrent(state) || state.generation !== generation || state.map) { return }
+    const latitude = numberProperty(state.component, 'latitude')
+    const longitude = numberProperty(state.component, 'longitude')
+    const map = new api.Map(state.canvas, {
+      center: new api.LatLng(latitude, longitude),
+      zoom: mapZoom(numberProperty(state.component, 'scale', 16)),
+    })
+    const markerLayer = new api.MultiMarker({
+      geometries: markerGeometries(state, api),
+      map,
+    })
+    map.on('idle', () => emitMapRegionChange(state, 'drag'))
+    state.api = api
+    state.map = map
+    state.markerLayer = markerLayer
+    state.host.dataset.nativeMapProvider = 'tencent'
+    syncMap(state, options)
+  }).catch((error) => {
+    if (!isMapStateCurrent(state) || state.generation !== generation) { return }
+    options.reportError(error instanceof Error ? error : new Error(String(error)))
+  })
+}
+
+function syncMap(state: MapState, options: NativeElementRegistrationOptions) {
+  if (!isMapStateCurrent(state)) { return }
+  const { component, control, host } = state
+  syncSemanticAttributes(component, control)
+  const latitude = numberProperty(component, 'latitude')
+  const longitude = numberProperty(component, 'longitude')
+  const scale = numberProperty(component, 'scale', 16)
+  const markerCount = countNativeMapItems(property(component, 'markers'))
+  const polylineCount = countNativeMapItems(property(component, 'polyline'))
+  const circleCount = countNativeMapItems(property(component, 'circles'))
+  host.id = stringProperty(component, 'id')
+  host.setAttribute('aria-label', stringProperty(component, 'ariaLabel') || '地图')
+  host.dataset.nativeLatitude = String(latitude)
+  host.dataset.nativeLongitude = String(longitude)
+  host.dataset.nativeScale = String(scale)
+  host.dataset.nativeMarkerCount = String(markerCount)
+  host.dataset.nativeShowLocation = String(booleanProperty(component, 'showLocation'))
+  host.dataset.nativeEnableScroll = String(booleanProperty(component, 'enableScroll'))
+  host.dataset.nativeEnableZoom = String(booleanProperty(component, 'enableZoom'))
+  const label = [
+    `纬度 ${latitude}`,
+    `经度 ${longitude}`,
+    `缩放 ${scale}`,
+    `标记 ${markerCount}`,
+    `路线 ${polylineCount}`,
+    `圆 ${circleCount}`,
+  ].join('\n')
+  control.dataset.nativeMapLabel = label
+  state.label.textContent = label
+  renderTencentRasterTiles(state, latitude, longitude, mapZoom(scale))
+  host.dataset.nativeMapProvider = 'tencent'
+  if (state.api && state.map) {
+    state.map.setCenter(new state.api.LatLng(latitude, longitude))
+    state.map.setZoom(mapZoom(scale))
+    state.markerLayer?.setGeometries(markerGeometries(state, state.api))
+  }
+  else {
+    ensureTencentMap(state, options)
+  }
+  reportUnsupportedProperty(state, options, component, 'enableSatellite', 'WeChat satellite map tiles')
+  reportUnsupportedProperty(state, options, component, 'enableTraffic', 'WeChat traffic overlays')
+  reportUnsupportedProperty(state, options, component, 'subkey', 'WeChat map subkey')
+}
+
+function detachMap(component: NativeComponent) {
+  const state = mapStates.get(component)
+  if (!state) { return }
+  mapStates.delete(component)
+  state.generation += 1
+  state.markerLayer?.destroy?.()
+  state.map?.destroy()
+  cleanState(state)
+}
+
+function attachMap(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachMap(component)
+  const host = hostElement(component, 'map', options)
+  const control = mapElement(component, options)
+  const canvas = control ? childElement(control, 'canvas') : undefined
+  const tiles = control ? childElement(control, 'tiles') : undefined
+  const label = control ? childElement(control, 'label') : undefined
+  if (!host || !control || !canvas || !tiles || !label) { return }
+  const state: MapState = {
+    canvas,
+    cleanups: [],
+    component,
+    control,
+    generation: 0,
+    host,
+    label,
+    reported: new Set(),
+    tiles,
+  }
+  mapStates.set(component, state)
+  addDomListener(state, control, 'click', () => emitMapRegionChange(state, 'preview'))
+  syncMap(state, options)
+}
+
+function renderRobotChat(state: RobotChatElementState) {
+  if (robotChatStates.get(state.component) !== state) { return }
+  const fragment = state.messages.ownerDocument.createDocumentFragment()
+  for (const message of state.session.messages) {
+    const item = state.messages.ownerDocument.createElement('p')
+    item.className = `varo-native-robot-chat__message varo-native-robot-chat__message--${message.role}`
+    item.dataset.role = message.role
+    item.textContent = message.text
+    fragment.append(item)
+  }
+  state.messages.replaceChildren(fragment)
+  state.host.dataset.nativeRobotMessageCount = String(state.session.messages.length)
+}
+
+function robotChatController(state: RobotChatElementState) {
+  return {
+    backHome() {
+      if (robotChatStates.get(state.component) !== state) { return }
+      state.component.triggerEvent('back-home', {}, { bubbles: false, composed: false })
+    },
+    inputVoiceEnd() {},
+    inputVoiceStart() {},
+    send(query: string) {
+      if (robotChatStates.get(state.component) !== state) { return }
+      const text = query.trim()
+      if (!text) { return }
+      state.session.messages = [
+        ...state.session.messages,
+        { role: 'user', text },
+        { role: 'assistant', text: robotReply(text) },
+      ]
+      renderRobotChat(state)
+      state.component.triggerEvent('query-callback', { query: text }, { bubbles: false, composed: false })
+    },
+  }
+}
+
+function detachRobotChat(component: NativeComponent) {
+  const state = robotChatStates.get(component)
+  if (!state) { return }
+  robotChatStates.delete(component)
+  if (activeRobotChat === state) { activeRobotChat = undefined }
+  cleanState(state)
+}
+
+function attachRobotChat(component: NativeComponent, options: NativeElementRegistrationOptions) {
+  detachRobotChat(component)
+  const host = hostElement(component, 'wechat-robot-chat', options)
+  const control = robotChatElement(component, options)
+  const messages = control ? childElement(control, 'messages') : undefined
+  if (!host || !control || !messages) { return }
+  const appid = stringProperty(component, 'appid')
+  const session = (appid ? robotChatSessions.get(appid) : undefined)
+    ?? [...robotChatSessions.values()].at(-1)
+    ?? { messages: [] }
+  if (session.messages.length === 0) {
+    session.messages = [{ role: 'assistant', text: '你好，请问需要什么帮助？' }]
+  }
+  if (appid) { robotChatSessions.set(appid, session) }
+  else { robotChatSessions.set('preview', session) }
+  const state: RobotChatElementState = {
+    cleanups: [],
+    component,
+    control,
+    host,
+    messages,
+    reported: new Set(),
+    session,
+  }
+  robotChatStates.set(component, state)
+  activeRobotChat = state
+  host.setAttribute('aria-label', stringProperty(component, 'ariaLabel') || '机器人对话')
+  renderRobotChat(state)
+}
+
+export function createRobotPlugin() {
+  return {
+    getChatComponent() {
+      if (!activeRobotChat) {
+        throw new Error('VRobotOperateCard requires an attached wechat-robot-chat preview host')
+      }
+      return robotChatController(activeRobotChat)
+    },
+    init(options: Record<string, unknown> & { fail: (error: unknown) => void, success: () => void }) {
+      const appid = stringField(options.appid).trim()
+      if (!appid) {
+        options.fail(new Error('VRobotChat requires a non-empty options.appid'))
+        return
+      }
+      const session = robotChatSessions.get(appid) ?? { messages: [] }
+      if (session.messages.length === 0) {
+        session.messages = [{ role: 'assistant', text: robotWelcome(options) }]
+      }
+      robotChatSessions.set(appid, session)
+      if (activeRobotChat) {
+        activeRobotChat.session = session
+        renderRobotChat(activeRobotChat)
+      }
+      options.success()
+    },
+  }
+}
+
+export function requirePlugin(name: string) {
+  if (name === 'varoRobot') { return createRobotPlugin() }
+  throw new Error(`Web Preview 不支持 requirePlugin("${name}")`)
+}
+
+function registerSlotDefinition(
+  space: glassEasel.ComponentSpace,
+  tag: 'view' | 'text',
+  template: glassEasel.template.ComponentTemplate,
+) {
+  return space
+    .define(tag)
+    .options(componentOptions())
+    .definition({ properties: semanticProperties })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerButtonDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('button')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        disabled: { type: Boolean, value: false },
+        form: { type: String, value: '' },
+        formType: { type: String, value: '' },
+        hoverClass: { type: String, value: '' },
+        hoverStartTime: { type: Number, value: 20 },
+        hoverStayTime: { type: Number, value: 70 },
+        name: { type: String, value: '' },
+        type: { type: String, value: 'button' },
+      },
+      attached() {
+        attachButton(this.general(), options)
+      },
+      detached() {
+        detachButton(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = buttonStates.get(this.general())
+      if (state) { syncButton(state, options) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerTextControlDefinition(
+  space: glassEasel.ComponentSpace,
+  tag: 'input' | 'textarea',
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define(tag)
+    .options(componentOptions())
+    .definition({
+      properties: inputProperties,
+      attached() {
+        attachTextControl(this.general(), tag === 'textarea', options)
+      },
+      detached() {
+        detachTextControl(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = textControlStates.get(this.general())
+      if (state) { syncTextControlConfig(state, options, false) }
+    })
+    .observer('value', function () {
+      const state = textControlStates.get(this.general())
+      if (state) { syncTextControlValue(state) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerLabelDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('label')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        for: { type: String, value: '', reflectIdPrefix: true },
+      },
+      attached() {
+        attachLabel(this.general(), options)
+      },
+      detached() {
+        detachLabel(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = labelStates.get(this.general())
+      if (state) { syncLabel(state) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerImageDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('image')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        alt: { type: String, value: '' },
+        draggable: { type: Boolean, value: false },
+        lazyLoad: { type: Boolean, value: false },
+        mode: { type: String, value: 'scaleToFill' },
+        showMenuByLongpress: { type: Boolean, value: false },
+        src: { type: String, value: '' },
+      },
+      attached() {
+        attachImage(this.general(), options)
+      },
+      detached() {
+        detachImage(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = imageStates.get(this.general())
+      if (state) { syncImageMode(state, options) }
+    })
+    .observer('src', function () {
+      const state = imageStates.get(this.general())
+      if (state) { syncImageSource(state, options) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerScrollDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('scroll-view')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        enableFlex: { type: Boolean, value: false },
+        lowerThreshold: { type: Number, value: 50 },
+        scrollLeft: { type: Number, value: 0 },
+        scrollTop: { type: Number, value: 0 },
+        scrollWithAnimation: { type: Boolean, value: false },
+        scrollX: { type: Boolean, value: false },
+        scrollY: { type: Boolean, value: false },
+        showScrollbar: { type: Boolean, value: true },
+        upperThreshold: { type: Number, value: 50 },
+      },
+      attached() {
+        attachScroll(this.general(), options)
+      },
+      detached() {
+        detachScroll(this.general())
+      },
+    })
+    .observer(['scrollLeft', 'scrollTop'], function () {
+      const state = scrollStates.get(this.general())
+      if (state) { syncScrollPosition(state) }
+    })
+    .observer('**', function () {
+      const state = scrollStates.get(this.general())
+      if (state) { syncScrollConfig(state) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerRichTextDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('rich-text')
+    .options({ ...componentOptions(), reflectToAttributes: false })
+    .definition({
+      properties: {
+        ...semanticProperties,
+        nodes: { type: Array, default: () => [] },
+        selectable: { type: Boolean, value: false },
+      },
+      attached() {
+        attachRichText(this.general(), options)
+      },
+      detached() {
+        detachRichText(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = richTextStates.get(this.general())
+      if (state) { renderRichText(state, options) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerMapDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('map')
+    .options(componentOptions())
+    .definition({
+      properties: {
+        ...semanticProperties,
+        circles: { type: Array, default: () => [] },
+        enableRotate: { type: Boolean, value: false },
+        enableSatellite: { type: Boolean, value: false },
+        enableScroll: { type: Boolean, value: true },
+        enableTraffic: { type: Boolean, value: false },
+        enableZoom: { type: Boolean, value: true },
+        id: { type: String, value: '' },
+        includePoints: { type: Array, default: () => [] },
+        latitude: { type: Number, value: 0 },
+        longitude: { type: Number, value: 0 },
+        markers: { type: Array, default: () => [] },
+        maxScale: { type: Number, value: 20 },
+        minScale: { type: Number, value: 3 },
+        polygons: { type: Array, default: () => [] },
+        polyline: { type: Array, default: () => [] },
+        rotate: { type: Number, value: 0 },
+        scale: { type: Number, value: 16 },
+        showCompass: { type: Boolean, value: false },
+        showLocation: { type: Boolean, value: false },
+        showScale: { type: Boolean, value: false },
+        skew: { type: Number, value: 0 },
+        subkey: { type: String, value: '' },
+      },
+      attached() {
+        attachMap(this.general(), options)
+      },
+      detached() {
+        detachMap(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = mapStates.get(this.general())
+      if (state) { syncMap(state, options) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+function registerRobotChatDefinition(
+  space: glassEasel.ComponentSpace,
+  template: glassEasel.template.ComponentTemplate,
+  options: NativeElementRegistrationOptions,
+) {
+  return space
+    .define('wechat-robot-chat')
+    .options(componentOptions())
+    .generics({ 'operate-card': true })
+    .definition({
+      properties: {
+        ...semanticProperties,
+        appid: { type: String, value: '' },
+      },
+      attached() {
+        attachRobotChat(this.general(), options)
+      },
+      detached() {
+        detachRobotChat(this.general())
+      },
+    })
+    .observer('**', function () {
+      const state = robotChatStates.get(this.general())
+      if (state) { renderRobotChat(state) }
+    })
+    .template(template)
+    .registerComponent()
+    .general()
+}
+
+export function registerNativeElements(
+  env: MiniProgramEnv,
+  templates: NativeTemplateMap,
+  options: NativeElementRegistrationOptions,
+): NativeDefinitionMap {
+  const space = env.getGlobalCodeSpace().getComponentSpace()
+  return {
+    'view': registerSlotDefinition(space, 'view', templateFor(templates, 'view')),
+    'text': registerSlotDefinition(space, 'text', templateFor(templates, 'text')),
+    'button': registerButtonDefinition(space, templateFor(templates, 'button'), options),
+    'input': registerTextControlDefinition(space, 'input', templateFor(templates, 'input'), options),
+    'textarea': registerTextControlDefinition(space, 'textarea', templateFor(templates, 'textarea'), options),
+    'label': registerLabelDefinition(space, templateFor(templates, 'label'), options),
+    'image': registerImageDefinition(space, templateFor(templates, 'image'), options),
+    'scroll-view': registerScrollDefinition(space, templateFor(templates, 'scroll-view'), options),
+    'rich-text': registerRichTextDefinition(space, templateFor(templates, 'rich-text'), options),
+    'map': registerMapDefinition(space, templateFor(templates, 'map'), options),
+    'wechat-robot-chat': registerRobotChatDefinition(space, templateFor(templates, 'wechat-robot-chat'), options),
+  }
+}
diff --git a/packages/weapp-web/src/runtime/native-host.ts b/packages/weapp-web/src/runtime/native-host.ts
new file mode 100644
index 00000000..7204b054
--- /dev/null
+++ b/packages/weapp-web/src/runtime/native-host.ts
@@ -0,0 +1,327 @@
+import type { CodeSpace, ComponentEnv } from 'glass-easel-miniprogram-adapter'
+import type { NativeArtifactBundle, NativeGlobals } from './artifacts.ts'
+import type { WeappWebHarness } from './harness.ts'
+import * as glassEasel from 'glass-easel'
+import { resolveWeappWebHarness } from './harness.ts'
+import { createNativeModuleLoader } from './module-loader.ts'
+import { requirePlugin } from './native-elements.ts'
+
+function record(value: unknown, label: string): Record<string, unknown> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) { throw new TypeError(`${label} 必须是对象`) }
+  return value as Record<string, unknown>
+}
+
+function nativeProperties(value: unknown): Record<string, unknown> | undefined {
+  if (value === undefined) { return undefined }
+  const properties = record(value, '小程序属性定义')
+  return Object.fromEntries(Object.entries(properties).map(([name, definition]) => {
+    if (definition === Function) { return [name, { type: null }] }
+    if (definition && typeof definition === 'object' && !Array.isArray(definition)) {
+      const property = definition as Record<string, unknown>
+      // glass-easel supplies a no-op for an absent Function property. A missing
+      // optional callback must stay absent, not become an active formatter.
+      if (property.type === Function && property.value === undefined && property.default === undefined) {
+        return [name, { ...property, type: null }]
+      }
+    }
+    return [name, definition]
+  }))
+}
+
+function invoke(target: Record<string, unknown> | undefined, name: string, args: unknown[] = []): unknown {
+  const method = target?.[name]
+  if (typeof method === 'function') { return Reflect.apply(method, target, args) }
+}
+
+export interface NativeHost {
+  globals: NativeGlobals
+  register: () => void
+  getPage: () => Record<string, unknown> | undefined
+  setPage: (value: unknown) => void
+  emitAppVisibility: (visible: boolean) => void
+  whenReady: () => Promise<void>
+  dispose: () => void
+}
+
+export function createNativeHost(
+  bundle: NativeArtifactBundle,
+  space: CodeSpace,
+  pagePath: string,
+  reportError: (error: Error) => void,
+  harness?: Partial<WeappWebHarness>,
+): NativeHost {
+  const resolvedHarness = resolveWeappWebHarness(harness)
+  let disposed = false
+
+  let currentPage: Record<string, unknown> | undefined
+  let app: Record<string, unknown> | undefined
+  let environment: ComponentEnv | undefined
+  let currentDefinition = ''
+  const timeouts = new Set<number>()
+  const intervals = new Set<number>()
+  const pendingReady = new Set<glassEasel.GeneralComponent>()
+  const readyComponents = new WeakSet<glassEasel.GeneralComponent>()
+  const readyWaiters = new Set<() => void>()
+  let readyQueued = false
+  const globals: NativeGlobals = Object.create(null)
+  const asError = (error: unknown) => error instanceof Error ? error : new Error(String(error))
+  const run = (callback: unknown, args: unknown[]) => {
+    if (disposed) { return }
+    if (typeof callback !== 'function') { throw new TypeError('小程序调度回调必须是函数') }
+    try { Reflect.apply(callback, undefined, args) }
+    catch (error) { reportError(asError(error)) }
+  }
+  const enqueue = (callback: () => void) => window.queueMicrotask(() => run(callback, []))
+  const finishReadyWaiters = () => {
+    if (pendingReady.size || readyQueued) { return }
+    for (const resolve of readyWaiters) { resolve() }
+    readyWaiters.clear()
+  }
+  const scheduleReady = (element: glassEasel.GeneralComponent) => {
+    if (disposed || readyComponents.has(element)) { return }
+    pendingReady.add(element)
+    if (readyQueued) { return }
+    readyQueued = true
+    enqueue(() => {
+      const backend = element.getBackendContext()
+      if (!backend) { throw new Error('组件没有可用的渲染后端') }
+      backend.render((error) => {
+        readyQueued = false
+        if (disposed) { return }
+        if (error) { reportError(error); return }
+        const ready = [...pendingReady].reverse()
+        pendingReady.clear()
+        for (const component of ready) {
+          if (disposed) { break }
+          readyComponents.add(component)
+          component.triggerLifetime('ready', [])
+        }
+        finishReadyWaiters()
+      })
+    })
+  }
+  const clearTimer = (id: number) => {
+    window.clearTimeout(id)
+    window.clearInterval(id)
+    timeouts.delete(id)
+    intervals.delete(id)
+  }
+  const nativeSetTimeout = (callback: unknown, delay = 0, ...args: unknown[]) => {
+    if (disposed) { return 0 }
+    if (typeof callback !== 'function') { throw new TypeError('小程序定时器回调必须是函数') }
+    const id = window.setTimeout(() => {
+      timeouts.delete(id)
+      run(callback, args)
+    }, delay)
+    timeouts.add(id)
+    return id
+  }
+  const nativeSetInterval = (callback: unknown, delay = 0, ...args: unknown[]) => {
+    if (disposed) { return 0 }
+    if (typeof callback !== 'function') { throw new TypeError('小程序定时器回调必须是函数') }
+    const id = window.setInterval(run, delay, callback, args)
+    intervals.add(id)
+    return id
+  }
+  const setPage = (value: unknown) => {
+    currentPage = record(value, '小程序页面实例')
+    Object.defineProperty(currentPage, 'route', { configurable: true, writable: true, value: pagePath })
+    Object.defineProperty(currentPage, 'options', { configurable: true, writable: true, value: {} })
+  }
+  const wxHost = resolvedHarness.createWxHost({ pagePath, getPage: () => currentPage, enqueue })
+  const sharedEnv = space.componentEnv('__preview_shared__', value => value)
+
+  function component(...args: unknown[]) {
+    if (!environment) { throw new Error('Component 必须在小程序组件模块注册阶段调用') }
+    if (args.length) {
+      const definition = record(args[0], '小程序组件定义')
+      const lifetimes = definition.lifetimes ? record(definition.lifetimes, '组件生命周期') : {}
+      const originalCreated = lifetimes.created
+      const originalAttached = lifetimes.attached
+      const originalDetached = lifetimes.detached
+      const isPage = currentDefinition === pagePath
+      args[0] = {
+        ...definition,
+        properties: nativeProperties(definition.properties),
+        lifetimes: {
+          ...lifetimes,
+          created(this: unknown, ...values: unknown[]) {
+            const instance = record(this, '小程序组件实例')
+            const element: unknown = instance._$
+            if (!(element instanceof glassEasel.Component)) { throw new TypeError('组件实例没有 glass-easel owner 信息') }
+            // The Web adapter applies Component.export to owner lookup. Wevu's
+            // provide/inject needs the native caller, not its public exports.
+            Object.defineProperty(instance, 'selectOwnerComponent', {
+              configurable: true,
+              writable: true,
+              value: () => element.ownerShadowRoot?.getHostNode().getMethodCaller() ?? null,
+            })
+            if (isPage) { setPage(instance) }
+            if (typeof originalCreated === 'function') { return Reflect.apply(originalCreated, this, values) }
+          },
+          attached(this: unknown, ...values: unknown[]) {
+            if (typeof originalAttached === 'function') { Reflect.apply(originalAttached, this, values) }
+            const instance = record(this, '小程序组件实例')
+            const element: unknown = instance._$
+            if (!glassEasel.Component.isComponent(element)) { throw new Error('组件实例没有可用的渲染节点') }
+            scheduleReady(element)
+          },
+          detached(this: unknown, ...values: unknown[]) {
+            const instance = record(this, '小程序组件实例')
+            const element: unknown = instance._$
+            if (glassEasel.Component.isComponent(element)) { pendingReady.delete(element) }
+            try {
+              if (typeof originalDetached === 'function') { return Reflect.apply(originalDetached, this, values) }
+            }
+            finally {
+              if (isPage && currentPage === this) { currentPage = undefined }
+            }
+          },
+        },
+      }
+    }
+    return Reflect.apply(environment.Component, undefined, args)
+  }
+  const behavior = (...args: unknown[]) => Reflect.apply(sharedEnv.Behavior, undefined, args)
+  Object.assign(behavior, { trait: sharedEnv.Behavior.trait })
+  const page = (...args: unknown[]) => {
+    if (!environment) { throw new Error('Page 必须在小程序页面模块注册阶段调用') }
+    return Reflect.apply(environment.Page, undefined, args)
+  }
+  const application = (value: unknown) => {
+    if (app) { throw new Error('小程序 App 不能重复注册') }
+    app = { globalData: {}, ...record(value, 'App 定义') }
+    const launch = invoke(app, 'onLaunch', [{ path: pagePath, query: {} }])
+    if (launch && typeof launch === 'object' && 'then' in launch) {
+      void Promise.resolve(launch).catch(error => reportError(asError(error)))
+    }
+    invoke(app, 'onShow', [{ path: pagePath, query: {} }])
+  }
+
+  for (const name of [
+    'Object',
+    'Array',
+    'String',
+    'Number',
+    'Boolean',
+    'Symbol',
+    'Reflect',
+    'Proxy',
+    'Map',
+    'WeakMap',
+    'Set',
+    'WeakSet',
+    'Promise',
+    'RegExp',
+    'JSON',
+    'Math',
+    'Date',
+    'Error',
+    'TypeError',
+    'RangeError',
+    'SyntaxError',
+    'Intl',
+    'TextEncoder',
+    'TextDecoder',
+    'ArrayBuffer',
+    'DataView',
+    'Uint8Array',
+    'Uint16Array',
+    'Uint32Array',
+    'Int8Array',
+    'Int16Array',
+    'Int32Array',
+    'Float32Array',
+    'Float64Array',
+    'BigInt',
+    'BigInt64Array',
+    'BigUint64Array',
+    'URL',
+    'URLSearchParams',
+    'AbortController',
+    'AbortSignal',
+    'atob',
+    'btoa',
+    'parseInt',
+    'parseFloat',
+    'isNaN',
+    'isFinite',
+    'encodeURI',
+    'encodeURIComponent',
+    'decodeURI',
+    'decodeURIComponent',
+  ]) {
+    globals[name] = Reflect.get(window, name)
+  }
+  Object.assign(globals, {
+    App: application,
+    Page: page,
+    Component: component,
+    Behavior: behavior,
+    wx: wxHost.wx,
+    requirePlugin,
+    getApp: () => app,
+    getCurrentPages: () => currentPage ? [currentPage] : [],
+    setTimeout: nativeSetTimeout,
+    clearTimeout: clearTimer,
+    setInterval: nativeSetInterval,
+    clearInterval: clearTimer,
+    queueMicrotask: enqueue,
+    console,
+    __wxConfig: { pages: Object.values(bundle.pages), entryPagePath: pagePath },
+    window: undefined,
+    document: undefined,
+    requestAnimationFrame: undefined,
+    cancelAnimationFrame: undefined,
+  })
+  globals.globalThis = globals
+  globals.global = globals
+  resolvedHarness.extendGlobals?.(globals, { bundle, pagePath })
+
+  const loader = createNativeModuleLoader(bundle, globals, (path, execute) => {
+    const previousEnvironment = environment
+    const previousDefinition = currentDefinition
+    space.componentEnv(path, (value) => {
+      environment = value
+      currentDefinition = path
+      try { execute() }
+      finally {
+        environment = previousEnvironment
+        currentDefinition = previousDefinition
+      }
+    })
+  })
+
+  return {
+    globals,
+    getPage: () => currentPage,
+    setPage,
+    register() {
+      loader.load('app.js')
+      if (!app) { throw new Error('小程序产物没有注册 App') }
+      for (const path of Object.keys(bundle.components)) { loader.load(`${path}.js`) }
+    },
+    emitAppVisibility(visible) {
+      invoke(app, visible ? 'onShow' : 'onHide', visible ? [{ path: pagePath, query: {} }] : [])
+    },
+    whenReady() {
+      if (disposed || (!pendingReady.size && !readyQueued)) { return Promise.resolve() }
+      return new Promise(resolve => readyWaiters.add(resolve))
+    },
+    dispose() {
+      if (disposed) { return }
+      disposed = true
+      for (const id of timeouts) { window.clearTimeout(id) }
+      for (const id of intervals) { window.clearInterval(id) }
+      timeouts.clear()
+      intervals.clear()
+      pendingReady.clear()
+      readyQueued = false
+      finishReadyWaiters()
+      wxHost.dispose()
+      loader.clear()
+      currentPage = undefined
+      app = undefined
+    },
+  }
+}
diff --git a/packages/weapp-web/src/runtime/native-templates.ts b/packages/weapp-web/src/runtime/native-templates.ts
new file mode 100644
index 00000000..c76da329
--- /dev/null
+++ b/packages/weapp-web/src/runtime/native-templates.ts
@@ -0,0 +1,13 @@
+export const nativeTemplates: Record<string, string> = {
+  'view': '<slot />',
+  'text': '<slot />',
+  'button': '<button id="control" class="varo-native-button__control" type="button"><slot /></button>',
+  'input': '<input id="control" class="varo-native-input__control" />',
+  'textarea': '<textarea id="control" class="varo-native-textarea__control"></textarea>',
+  'label': '<label id="control" class="varo-native-label__control"><slot /></label>',
+  'image': '<img id="control" class="varo-native-image__control" />',
+  'scroll-view': '<slot />',
+  'rich-text': '<span id="control" class="varo-native-rich-text__content"></span><slot />',
+  'map': '<div id="control" class="varo-native-map__surface" role="application"><div id="tiles" class="varo-native-map__tiles"></div><div id="canvas" class="varo-native-map__canvas"></div><div id="label" class="varo-native-map__label"></div><slot /></div>',
+  'wechat-robot-chat': '<div id="control" class="varo-native-robot-chat__surface" role="log"><div id="messages" class="varo-native-robot-chat__messages"></div><operate-card class="varo-native-robot-chat__operate" /><slot /></div>',
+}
diff --git a/packages/weapp-web/src/runtime/session.ts b/packages/weapp-web/src/runtime/session.ts
new file mode 100644
index 00000000..05de3cee
--- /dev/null
+++ b/packages/weapp-web/src/runtime/session.ts
@@ -0,0 +1,6 @@
+export interface WeappWebRuntimeSession {
+  pagePath: string
+  signal: AbortSignal
+  ready: (artifact: string) => void
+  fail: (error: unknown) => void
+}
diff --git a/packages/weapp-web/src/runtime/tencent-map.ts b/packages/weapp-web/src/runtime/tencent-map.ts
new file mode 100644
index 00000000..c67c45a1
--- /dev/null
+++ b/packages/weapp-web/src/runtime/tencent-map.ts
@@ -0,0 +1,99 @@
+export const tencentMapDemoKey = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
+
+export interface TencentLatLng {
+  getLat: () => number
+  getLng: () => number
+}
+
+export interface TencentMap {
+  destroy: () => void
+  on: (event: string, listener: (event?: unknown) => void) => void
+  setCenter: (center: TencentLatLng) => void
+  setZoom: (zoom: number) => void
+}
+
+export interface TencentMultiMarker {
+  destroy?: () => void
+  setGeometries: (geometries: unknown[]) => void
+}
+
+export interface TencentImageTileLayer {
+  destroy?: () => void
+}
+
+export interface TencentMapApi {
+  ImageTileLayer?: new (options: {
+    getTileUrl: (x: number, y: number, z: number) => string
+    map: TencentMap
+    maxZoom?: number
+    minZoom?: number
+  }) => TencentImageTileLayer
+  LatLng: new (latitude: number, longitude: number) => TencentLatLng
+  Map: new (container: HTMLElement, options: {
+    baseMap?: unknown
+    center: TencentLatLng
+    pitch?: number
+    rotation?: number
+    zoom: number
+  }) => TencentMap
+  MultiMarker: new (options: { geometries?: unknown[], map: TencentMap }) => TencentMultiMarker
+}
+
+export function tencentRasterTileUrl(x: number, y: number, z: number) {
+  const size = 2 ** z
+  const tmsY = size - 1 - y
+  const server = Math.abs(x + tmsY) % 4
+  return `https://rt${server}.map.gtimg.com/tile?z=${z}&x=${x}&y=${tmsY}&type=vector&styleid=3`
+}
+
+export function attachTencentRasterBaseMap(api: TencentMapApi, map: TencentMap) {
+  if (typeof api.ImageTileLayer !== 'function') { return undefined }
+  return new api.ImageTileLayer({
+    getTileUrl: tencentRasterTileUrl,
+    map,
+    maxZoom: 20,
+    minZoom: 3,
+  })
+}
+
+let pending: Promise<TencentMapApi> | undefined
+
+function tencentMapApi(): TencentMapApi | undefined {
+  const api = Reflect.get(globalThis, 'TMap')
+  if (!api || typeof api !== 'object') { return undefined }
+  const candidate = api as TencentMapApi
+  if (typeof candidate.LatLng !== 'function' || typeof candidate.Map !== 'function' || typeof candidate.MultiMarker !== 'function') {
+    return undefined
+  }
+  return candidate
+}
+
+export function loadTencentMapApi(key = tencentMapDemoKey): Promise<TencentMapApi> {
+  const loaded = tencentMapApi()
+  if (loaded) { return Promise.resolve(loaded) }
+  if (pending) { return pending }
+  pending = new Promise<TencentMapApi>((resolve, reject) => {
+    const callback = `__varoTencentMapReady_${Math.random().toString(36).slice(2)}`
+    const script = document.createElement('script')
+    const fail = (error: Error) => {
+      pending = undefined
+      Reflect.deleteProperty(globalThis, callback)
+      script.remove()
+      reject(error)
+    }
+    Reflect.set(globalThis, callback, () => {
+      Reflect.deleteProperty(globalThis, callback)
+      const api = tencentMapApi()
+      if (!api) {
+        fail(new Error('Tencent Map GL loaded without TMap'))
+        return
+      }
+      resolve(api)
+    })
+    script.async = true
+    script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${encodeURIComponent(key)}&callback=${callback}`
+    script.addEventListener('error', () => fail(new Error('Tencent Map GL script failed to load')))
+    document.head.append(script)
+  })
+  return pending
+}
diff --git a/packages/weapp-web/src/runtime/wx-host.ts b/packages/weapp-web/src/runtime/wx-host.ts
new file mode 100644
index 00000000..137a06e9
--- /dev/null
+++ b/packages/weapp-web/src/runtime/wx-host.ts
@@ -0,0 +1,113 @@
+export interface WxHostOptions {
+  pagePath: string
+  getPage: () => Record<string, unknown> | undefined
+  enqueue: (callback: () => void) => void
+  apis?: Record<string, unknown>
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : undefined
+}
+
+function callback(options: Record<string, unknown> | undefined, name: string, value: unknown) {
+  const handler = options?.[name]
+  if (typeof handler === 'function') { Reflect.apply(handler, undefined, [value]) }
+}
+
+export function createWxHost({ pagePath, getPage, enqueue, apis }: WxHostOptions) {
+  const resizeListeners = new Set<(value: unknown) => void>()
+  const launchOptions = () => ({ path: pagePath, query: {} })
+  const windowInfo = () => ({
+    pixelRatio: window.devicePixelRatio,
+    screenWidth: window.innerWidth,
+    screenHeight: window.innerHeight,
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight,
+    screenTop: 0,
+    statusBarHeight: 0,
+    safeArea: { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight },
+  })
+  const systemInfo = () => ({
+    ...windowInfo(),
+    platform: 'web',
+    model: 'Varo Web Preview',
+    language: navigator.language,
+    theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+  })
+  const listeners = (set: Set<(value: unknown) => void>) => ({
+    add(value: unknown) {
+      if (typeof value !== 'function') { throw new TypeError('小程序事件监听器必须是函数') }
+      set.add(value as (value: unknown) => void)
+    },
+    remove(value?: unknown) {
+      if (value === undefined) { set.clear() }
+      else if (typeof value === 'function') { set.delete(value as (value: unknown) => void) }
+    },
+  })
+  const resize = listeners(resizeListeners)
+  const invokePage = (method: string, args: unknown[]) => {
+    const page = getPage()
+    const handler = page?.[method]
+    if (!page || typeof handler !== 'function') { throw new Error(`当前预览页面无法提供 wx.${method}`) }
+    return Reflect.apply(handler, page, args)
+  }
+  const supported: Record<string, unknown> = {
+    getWindowInfo: windowInfo,
+    getSystemInfoSync: systemInfo,
+    getDeviceInfo: () => ({ platform: 'web', model: 'Varo Web Preview', system: navigator.userAgent }),
+    getAppBaseInfo: () => ({ language: navigator.language, theme: systemInfo().theme, version: 'Web Preview' }),
+    getLaunchOptionsSync: launchOptions,
+    getEnterOptionsSync: launchOptions,
+    getCurrentPages: () => {
+      const page = getPage()
+      return page ? [page] : []
+    },
+    nextTick: (handler: unknown) => {
+      if (typeof handler !== 'function') { throw new TypeError('wx.nextTick 需要回调函数') }
+      enqueue(() => Reflect.apply(handler, undefined, []))
+    },
+    getSystemInfo: (value: unknown) => {
+      const options = asRecord(value)
+      enqueue(() => {
+        const result = { ...systemInfo(), errMsg: 'getSystemInfo:ok' }
+        callback(options, 'success', result)
+        callback(options, 'complete', result)
+      })
+    },
+    createSelectorQuery: () => invokePage('createSelectorQuery', []),
+    onWindowResize: resize.add,
+    offWindowResize: resize.remove,
+  }
+  const unavailable = (name: string) => (value?: unknown) => {
+    const error = new Error(`Web 兼容预览不支持 wx.${name}，请在微信环境中使用此能力。`)
+    const options = asRecord(value)
+    const failure = { errMsg: `${name}:fail unsupported in Web Preview` }
+    if (typeof options?.fail === 'function' || typeof options?.complete === 'function') {
+      enqueue(() => {
+        callback(options, 'fail', failure)
+        callback(options, 'complete', failure)
+      })
+      return
+    }
+    throw error
+  }
+  Object.assign(supported, apis)
+  for (const name of ['login', 'requestPayment', 'getUserProfile', 'getUserInfo', 'getPhoneNumber', 'scanCode', 'chooseImage', 'chooseMedia', 'request', 'uploadFile', 'downloadFile']) {
+    if (!Object.hasOwn(supported, name)) { supported[name] = unavailable(name) }
+  }
+  supported.canIUse = (name: unknown) => typeof name === 'string' && Object.hasOwn(supported, name)
+
+  const onResize = () => {
+    const value = { size: { windowWidth: window.innerWidth, windowHeight: window.innerHeight } }
+    for (const listener of resizeListeners) { listener(value) }
+  }
+  window.addEventListener('resize', onResize)
+
+  return {
+    wx: supported,
+    dispose() {
+      window.removeEventListener('resize', onResize)
+      resizeListeners.clear()
+    },
+  }
+}
diff --git a/packages/weapp-web/src/virtual.d.ts b/packages/weapp-web/src/virtual.d.ts
new file mode 100644
index 00000000..1f8574d8
--- /dev/null
+++ b/packages/weapp-web/src/virtual.d.ts
@@ -0,0 +1,4 @@
+declare module 'virtual:varo-native-artifacts' {
+  const artifacts: import('./runtime/artifacts').NativeArtifactBundle
+  export default artifacts
+}
diff --git a/packages/weapp-web/tests/module-loader.test.ts b/packages/weapp-web/tests/module-loader.test.ts
new file mode 100644
index 00000000..fa3c4db5
--- /dev/null
+++ b/packages/weapp-web/tests/module-loader.test.ts
@@ -0,0 +1,53 @@
+import type { NativeArtifactBundle, NativeModuleFactory } from '../src/runtime/artifacts.ts'
+import { describe, expect, it } from 'vitest'
+import { createNativeModuleLoader, resolveNativeModule } from '../src/runtime/module-loader.ts'
+
+function artifactBundle(modules: Record<string, NativeModuleFactory>): NativeArtifactBundle {
+  return {
+    digest: 'test',
+    pages: { controls: 'controls', agent: 'agent' },
+    components: {},
+    builtinTemplates: {},
+    modules,
+    styles: {},
+    assets: {},
+  }
+}
+
+function method(value: unknown, name: string): () => unknown {
+  if (!value || typeof value !== 'object') { throw new TypeError('Expected module exports') }
+  const candidate: unknown = Reflect.get(value, name)
+  if (typeof candidate !== 'function') { throw new TypeError(`Expected export ${name}`) }
+  return () => Reflect.apply(candidate, value, [])
+}
+
+describe('native artifact module loading', () => {
+  it('preserves a shared module instance through circular imports', () => {
+    const bundle = artifactBundle({
+      'a.js': (require, _module, exports) => {
+        let count = 0
+        exports.increment = () => ++count
+        const peer = require('./b')
+        exports.viaPeer = () => method(peer, 'increment')()
+      },
+      'b.js': (require, _module, exports) => {
+        const first = require('./a')
+        exports.increment = () => method(first, 'increment')()
+      },
+    })
+    const loader = createNativeModuleLoader(bundle, {}, (_path, execute) => execute())
+    expect(method(loader.load('a.js'), 'viaPeer')()).toBe(1)
+    expect(method(loader.load('b.js'), 'increment')()).toBe(2)
+    expect(method(loader.load('a.js'), 'viaPeer')()).toBe(3)
+  })
+
+  it('refuses dependency paths outside the artifact graph', () => {
+    const bundle = artifactBundle({
+      'safe.js': (_require, _module, exports) => { exports.value = 'safe' },
+    })
+    expect(resolveNativeModule('pages/index.js', '../safe', bundle.modules)).toBe('safe.js')
+    expect(() => resolveNativeModule('pages/index.js', '../../safe', bundle.modules)).toThrow(Error)
+    expect(() => resolveNativeModule('pages/index.js', 'node:fs', bundle.modules)).toThrow(Error)
+    expect(() => resolveNativeModule('pages/index.js', '/missing', bundle.modules)).toThrow(Error)
+  })
+})
diff --git a/packages/weapp-web/tests/native-artifacts-plugin.test.ts b/packages/weapp-web/tests/native-artifacts-plugin.test.ts
new file mode 100644
index 00000000..40b388ca
--- /dev/null
+++ b/packages/weapp-web/tests/native-artifacts-plugin.test.ts
@@ -0,0 +1,65 @@
+import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import vue from '@vitejs/plugin-vue'
+import { createServer } from 'vite'
+import { afterEach, describe, expect, it } from 'vitest'
+import { nativeArtifactsPlugin } from '../src/plugin/index.ts'
+
+async function writeMiniProgram(root: string) {
+  await mkdir(join(root, 'pages/index'), { recursive: true })
+  await writeFile(join(root, 'app.json'), JSON.stringify({ pages: ['pages/index/index'] }))
+  await writeFile(join(root, 'app.js'), 'App({})')
+  await writeFile(join(root, 'app.wxss'), 'page { color: red; }')
+  await writeFile(join(root, 'pages/index/index.json'), JSON.stringify({
+    usingComponents: { 'weapp-app-shell': '/__weapp_vite_app_shell' },
+  }))
+  await writeFile(join(root, 'pages/index/index.wxml'), '<weapp-app-shell><view>ready</view></weapp-app-shell>')
+  await writeFile(join(root, 'pages/index/index.js'), 'Page({})')
+  await writeFile(join(root, '__weapp_vite_app_shell.json'), JSON.stringify({
+    component: true,
+    styleIsolation: 'apply-shared',
+  }))
+  await writeFile(join(root, '__weapp_vite_app_shell.wxml'), '<view class="app-root"><slot /></view>')
+  await writeFile(join(root, '__weapp_vite_app_shell.js'), 'Component({})')
+}
+
+describe('native artifact plugin', () => {
+  let nativeRoot = ''
+  let server: Awaited<ReturnType<typeof createServer>> | undefined
+
+  afterEach(async () => {
+    await server?.close()
+    server = undefined
+    if (nativeRoot) { await rm(nativeRoot, { recursive: true, force: true }) }
+  })
+
+  it('does not emit Vite URL imports for components without WXSS', async () => {
+    nativeRoot = await mkdtemp(join(tmpdir(), 'varo-weapp-web-'))
+    await writeMiniProgram(nativeRoot)
+    server = await createServer({
+      configFile: false,
+      root: nativeRoot,
+      plugins: [
+        vue(),
+        nativeArtifactsPlugin({
+          nativeBuildRoot: nativeRoot,
+          pages: { sandbox: 'pages/index/index' },
+        }),
+      ],
+      server: { host: '127.0.0.1', port: 5197, strictPort: true },
+      logLevel: 'silent',
+    })
+    await server.listen()
+    const loaded = await server.pluginContainer.load('\0virtual:varo-native-artifacts')
+    const loadedCode = typeof loaded === 'string' ? loaded : loaded?.code
+    expect(loadedCode).toBeTypeOf('string')
+    expect(loadedCode).not.toContain('__weapp_vite_app_shell.wxss')
+    const response = await fetch('http://127.0.0.1:5197/@id/__x00__virtual:varo-native-artifacts')
+    const code = await response.text()
+    expect(response.status).toBe(200)
+    expect(code).toContain('"__weapp_vite_app_shell"')
+    expect(code).not.toContain('__weapp_vite_app_shell.wxss')
+    expect(code).not.toMatch(/import __nativeAsset\d+ from .*?\.wxss/)
+  })
+})
diff --git a/packages/weapp-web/tests/plugin-options.test.ts b/packages/weapp-web/tests/plugin-options.test.ts
new file mode 100644
index 00000000..01daf6cf
--- /dev/null
+++ b/packages/weapp-web/tests/plugin-options.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { assertNativeArtifactsOptions } from '../src/plugin/options.ts'
+import { resolveWeappWebHarness } from '../src/runtime/harness.ts'
+import { createWxHost } from '../src/runtime/wx-host.ts'
+
+describe('weapp-web plugin options', () => {
+  it('rejects empty page maps and escaped compiled paths', () => {
+    expect(() => assertNativeArtifactsOptions({ nativeBuildRoot: '/tmp/mp', pages: {} })).toThrow(Error)
+    expect(() => assertNativeArtifactsOptions({
+      nativeBuildRoot: '/tmp/mp',
+      pages: { controls: '../outside' },
+    })).toThrow(/invalid compiled page path/)
+  })
+
+  it('accepts a host-owned page catalog', () => {
+    expect(() => assertNativeArtifactsOptions({
+      nativeBuildRoot: '/tmp/mp-weixin',
+      pages: { sandbox: 'pages/sandbox/index' },
+    })).not.toThrow()
+  })
+})
+
+describe('weapp-web harness replacement', () => {
+  it('lets a host inject extra wx APIs without replacing the default host', () => {
+    const host = createWxHost({
+      pagePath: 'pages/sandbox/index',
+      getPage: () => undefined,
+      enqueue: callback => callback(),
+      apis: {
+        ping: () => 'pong',
+      },
+    })
+    const canIUse = host.wx.canIUse
+    if (typeof canIUse !== 'function') { throw new TypeError('wx.canIUse must be a function') }
+    expect(canIUse('ping')).toBe(true)
+    expect((host.wx.ping as () => string)()).toBe('pong')
+    expect(canIUse('login')).toBe(true)
+    expect(() => (host.wx.login as () => void)()).toThrow(/不支持 wx.login/)
+    host.dispose()
+  })
+
+  it('lets a host replace createWxHost entirely', () => {
+    const harness = resolveWeappWebHarness({
+      createWxHost: () => ({
+        wx: { ping: () => 'custom' },
+        dispose() {},
+      }),
+    })
+    const host = harness.createWxHost({
+      pagePath: 'pages/sandbox/index',
+      getPage: () => undefined,
+      enqueue: callback => callback(),
+    })
+    expect((host.wx.ping as () => string)()).toBe('custom')
+    expect(host.wx.canIUse).toBeUndefined()
+  })
+})
diff --git a/packages/weapp-web/tests/source-scanners.test.ts b/packages/weapp-web/tests/source-scanners.test.ts
new file mode 100644
index 00000000..864514c1
--- /dev/null
+++ b/packages/weapp-web/tests/source-scanners.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import { scanCss, scanWxml } from '../src/plugin/source-scanners.ts'
+
+describe('native artifact source scanning', () => {
+  it('ignores template-looking strings inside comments and WXS scripts', () => {
+    const source = `<!-- <ghost-component /> -->
+<wxs module="helpers">var text = '<also-not-a-component />';</wxs>
+<view><v-input value="{{ value }}" /></view>`
+    expect(scanWxml(source).tags).toEqual(['wxs', 'view', 'v-input'])
+  })
+
+  it('collects real CSS resources without treating quoted content as imports', () => {
+    const source = `/* @import 'private.wxss'; */
+@import './base.wxss';
+.value { content: "url(secret.png)"; background: url('./icon.png'); }`
+    const scanned = scanCss(source)
+    expect(scanned.imports.map(item => item.specifier)).toEqual(['./base.wxss'])
+    expect(scanned.urls.map(item => item.specifier)).toEqual(['./icon.png'])
+  })
+})
diff --git a/packages/weapp-web/tests/tencent-map.test.ts b/packages/weapp-web/tests/tencent-map.test.ts
new file mode 100644
index 00000000..045231f9
--- /dev/null
+++ b/packages/weapp-web/tests/tencent-map.test.ts
@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { loadTencentMapApi, tencentMapDemoKey, tencentRasterTileUrl } from '../src/runtime/tencent-map.ts'
+
+describe('loadTencentMapApi', () => {
+  afterEach(() => {
+    document.querySelectorAll('script[src*="map.qq.com/api/gljs"]').forEach(node => node.remove())
+    vi.unstubAllGlobals()
+  })
+
+  it('loads Tencent Map GL with the demo key and callback', async () => {
+    const api = {
+      LatLng: class {},
+      Map: class {},
+      MultiMarker: class {},
+    }
+    const originalCreate = document.createElement.bind(document)
+    vi.spyOn(document, 'createElement').mockImplementation((tagName: string) => {
+      const element = originalCreate(tagName)
+      if (tagName === 'script') {
+        queueMicrotask(() => {
+          const src = element.getAttribute('src') ?? ''
+          const callback = new URL(src).searchParams.get('callback')
+          if (!callback) { throw new Error('Tencent Map GL script is missing callback') }
+          Reflect.set(globalThis, 'TMap', api)
+          const ready = Reflect.get(globalThis, callback)
+          if (typeof ready !== 'function') { throw new TypeError('Tencent Map GL callback was not registered') }
+          ready()
+        })
+      }
+      return element
+    })
+
+    const loaded = await loadTencentMapApi()
+    const script = document.querySelector('script[src*="map.qq.com/api/gljs"]')
+    expect(script).toBeTruthy()
+    expect(script?.getAttribute('src')).toContain(`key=${tencentMapDemoKey}`)
+    expect(loaded).toBe(api)
+    expect(await loadTencentMapApi()).toBe(api)
+  })
+})
+
+describe('tencentRasterTileUrl', () => {
+  it('uses Tencent TMS raster tiles', () => {
+    expect(tencentRasterTileUrl(13660, 6745, 14)).toBe(
+      'https://rt2.map.gtimg.com/tile?z=14&x=13660&y=9638&type=vector&styleid=3',
+    )
+  })
+})
diff --git a/packages/weapp-web/tsconfig.json b/packages/weapp-web/tsconfig.json
new file mode 100644
index 00000000..c7994f49
--- /dev/null
+++ b/packages/weapp-web/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rewriteRelativeImportExtensions": true,
+    "rootDir": ".",
+    "types": ["node", "vite/client", "vitest/globals"],
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src/**/*.ts", "tests/**/*.ts"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 982600b2..2a4fd95e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,14 +84,14 @@ importers:
         specifier: ^3.3.11
         version: 3.3.11(typescript@6.0.3)
       weapp-tailwindcss:
-        specifier: ^5.5.1
-        version: 5.5.1(@oxc-project/types@0.148.0)(jiti@2.7.0)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
+        specifier: ^5.5.3
+        version: 5.5.3(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
       weapp-vite:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(@oxc-project/types@0.148.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(@oxc-project/types@0.149.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
       wevu:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
 
   apps/docs:
     dependencies:
@@ -200,8 +200,8 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       wevu:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
     devDependencies:
       '@varo/primitives-weapp':
         specifier: workspace:*
@@ -210,8 +210,8 @@ importers:
         specifier: ^6.0.8
         version: 6.0.8(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3))
       '@weapp-vite/miniprogram-automator':
-        specifier: 1.2.16
-        version: 1.2.16(@types/node@26.1.0)
+        specifier: ^1.2.17
+        version: 1.2.17(@types/node@26.1.0)
       postcss-selector-parser:
         specifier: 7.1.6
         version: 7.1.6
@@ -225,11 +225,42 @@ importers:
         specifier: ^3.5.42
         version: 3.5.42(typescript@6.0.3)
       weapp-tailwindcss:
-        specifier: ^5.5.1
-        version: 5.5.1(@oxc-project/types@0.148.0)(jiti@2.7.0)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
+        specifier: ^5.5.3
+        version: 5.5.3(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
       weapp-vite:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(@oxc-project/types@0.148.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(@oxc-project/types@0.149.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
+
+  apps/playground-weapp-preview:
+    dependencies:
+      '@varo-ui/h5':
+        specifier: workspace:*
+        version: link:../../packages/ui-h5
+      '@varo/weapp-web':
+        specifier: workspace:*
+        version: link:../../packages/weapp-web
+      vue:
+        specifier: ^3.5.42
+        version: 3.5.42(typescript@6.0.3)
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.61.1
+        version: 1.61.1
+      '@varo/playground-weapp':
+        specifier: workspace:*
+        version: link:../playground-weapp
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.8
+        version: 6.0.8(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3))
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      vite:
+        specifier: ^8.2.2
+        version: 8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)
+      vue-tsc:
+        specifier: ^3.3.11
+        version: 3.3.11(typescript@6.0.3)
 
   apps/realworld-weapp:
     dependencies:
@@ -252,8 +283,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.1
       wevu:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
     devDependencies:
       cross-env:
         specifier: ^10.1.0
@@ -280,11 +311,11 @@ importers:
         specifier: ^3.3.11
         version: 3.3.11(typescript@6.0.3)
       weapp-tailwindcss:
-        specifier: ^5.5.1
-        version: 5.5.1(@oxc-project/types@0.148.0)(jiti@2.7.0)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
+        specifier: ^5.5.3
+        version: 5.5.3(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
       weapp-vite:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(@oxc-project/types@0.148.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(@oxc-project/types@0.149.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
 
   packages/agent-core:
     dependencies:
@@ -416,11 +447,33 @@ importers:
         specifier: workspace:*
         version: link:../shared
       weapp-vite:
-        specifier: 7.0.4
-        version: 7.0.4(@babel/core@8.0.1)(@oxc-project/types@0.148.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
+        specifier: ^7.1.0
+        version: 7.1.0(@babel/core@8.0.1)(@oxc-project/types@0.149.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0)
 
   packages/utils: {}
 
+  packages/weapp-web:
+    dependencies:
+      glass-easel:
+        specifier: 1.1.0
+        version: 1.1.0
+      glass-easel-miniprogram-adapter:
+        specifier: 1.1.0
+        version: 1.1.0(glass-easel@1.1.0)
+      glass-easel-stylesheet-compiler:
+        specifier: 1.1.0
+        version: 1.1.0
+      glass-easel-template-compiler:
+        specifier: 1.1.0
+        version: 1.1.0
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+    devDependencies:
+      vite:
+        specifier: ^8.2.2
+        version: 8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)
+
 packages:
 
   '@antfu/eslint-config@9.3.0':
@@ -670,11 +723,6 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@8.0.0':
-    resolution: {integrity: sha512-aLxAE+imI9bCcyaPrUDjBv3uSkWieifjLe0kuFOZF0zli0L6GCsTmsePnTr55adbIAgYz2zhN1vnFimCBUYcRQ==}
-    engines: {node: ^22.18.0 || >=24.11.0}
-    hasBin: true
-
   '@babel/parser@8.0.4':
     resolution: {integrity: sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==}
     engines: {node: ^22.18.0 || >=24.11.0}
@@ -2299,124 +2347,124 @@ packages:
     resolution: {integrity: sha512-XRO0zi2NIUKq2lUk3T1ecFSld1fMWRKE6naRFGkgkdeosx7IslyUKNv5Dcb5PJTja9tHJoFu0v/7yEpAkrkrTg==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@oxc-parser/binding-android-arm-eabi@0.148.0':
-    resolution: {integrity: sha512-pHASv9g5pASxb7akHERZNSkrEqPhFaUix98o7d9hbTpolnnFWl7UiRrcMhCsV1+iVO4/cJwKsbKRJTFNs2tdBQ==}
+  '@oxc-parser/binding-android-arm-eabi@0.149.0':
+    resolution: {integrity: sha512-OQmN5XYQ/GNRkbU0Ksb2QSaHOgKWhFw7Bz6lJvANBdwVkLzTlcHXDLj62XrNPtUf3pDxRBr7OoHJrKhHYOb9iA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxc-parser/binding-android-arm64@0.148.0':
-    resolution: {integrity: sha512-sg/6Ez0KdAygsu0POELux9wN1Po2CP93WY8eNl4DBKIGprsd4QSHBXOb471Pu9i2OCD5sLkISSb2agZEhVn2Zw==}
+  '@oxc-parser/binding-android-arm64@0.149.0':
+    resolution: {integrity: sha512-M7nHwfHY2Xv5Rm1iygvyOTPXrD4d5WRVw+C8eItLwoipzQBnkUMmwh3jvuGLBio2BGetfIH0F7J3Afb1Qn9dJg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.148.0':
-    resolution: {integrity: sha512-yiSJmzGUvCUaJT8X3j40gVcX+ckuHQMuiOtF8DvzTs5+JtB/7XuHFPp4M+vv5u+HlBtDUd4Ks5pyHpWz8mfnkg==}
+  '@oxc-parser/binding-darwin-arm64@0.149.0':
+    resolution: {integrity: sha512-h6NrhqRAVKbgzfShjHoBgjeJ1vQR2o6iNM6/t8JCSej1XRKJyraV08Zz7ey6SsjPzof4ecp48Upg2vidqoDgtQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.148.0':
-    resolution: {integrity: sha512-6ZeklaamrMy4H2JmhvcJg6iip59tYILtuLaILxyAHT3l5FDxnI5ihVievAft5ZmAbqtlWHErOi1OpJK8gy1wcA==}
+  '@oxc-parser/binding-darwin-x64@0.149.0':
+    resolution: {integrity: sha512-+WRRZeFYqVznJEEttiWNcI43Ij2iD0yphmMFkAuKNOQTyXQ+lLCAVW6aVLOD6nPO6FOymW7HtDh5KmnxZPi/2A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.148.0':
-    resolution: {integrity: sha512-vFsPx+a/qFECPnz/H8nC6x6MDvnWscLTCo/5muojEF54ERUq1kdgbvnWo95YnkhjF9sTIcG/uDxQBh1gffaufQ==}
+  '@oxc-parser/binding-freebsd-x64@0.149.0':
+    resolution: {integrity: sha512-kG0YUZj/4hdHBQDtIr2UZ7Nyxy3M5Et+w3A0V0eefRgtQWE4wJrNflBJMJfwFPiwMLPlPL6qJR+5JdeIqhzW/g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.148.0':
-    resolution: {integrity: sha512-eOr3M+6iGbbxNL4PSS0VtsyQ2eOUxSBh00BqO22SbolDimPSYsBuLr/LCrZBkiqW2BoabhR6V4R8jrRAay7hjg==}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.149.0':
+    resolution: {integrity: sha512-gOD5NhD8DG7aJ8CLZ+ve5xoDq0y0J0zKZSfkfMGfk96XLhu21IzSFvjpEvVUGodD7Yyy3Tr9rNdiPEdZjkuRqQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.148.0':
-    resolution: {integrity: sha512-58ZKDw0mQRbCNfrd2IDyV4o8T7enzGERJn41BH2tjrZVGyiKiFzcfDicuB7Zcpb/1xIOrObovr8Dja6lZi8dLw==}
+  '@oxc-parser/binding-linux-arm-musleabihf@0.149.0':
+    resolution: {integrity: sha512-UtPYQkciY1NzYRtfKBopYfOjSxPFFVyprs0iH+Z5KZKNv9at/71pGd2KNrlmALhRcNocnxEsc+KuhY3nUlhIxg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.148.0':
-    resolution: {integrity: sha512-Fnu95O4eZ5i++GPvIzBEZ8y4ddTLR+D9paYa8JRaRk6ZK7nHQiWP5xtrhcPQsXqgat1d7sU/d5rbbI0p1FTHSQ==}
+  '@oxc-parser/binding-linux-arm64-gnu@0.149.0':
+    resolution: {integrity: sha512-3jWkwykjJJegMD+5dU9n30mzwvTLi99fkUqHU9Pqdzw3fIVfyn6ZnjOl8l053jogr0BGQPxagTjIKBksp288eQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.148.0':
-    resolution: {integrity: sha512-3CQy/BMdx7N7H3qrcPxUL+a2CwUZodUcf6oq8iJuNZ9C6Ol1aq3mcWzsgySJ7CHFLvpX21ZDPp1r1X0QLbu/AQ==}
+  '@oxc-parser/binding-linux-arm64-musl@0.149.0':
+    resolution: {integrity: sha512-H7n8zPxnLVI0pkutAxyXJNE/IaCuCJS6ghgv2cl8IDIgXCDZWjG/Bs8rF8BHKQ9gsOpA4m+T4lFaFAdnGuk/cw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.148.0':
-    resolution: {integrity: sha512-9LkaYvfiF8hMOw900csAvkf1oxE8XlmMeGowu5BcastSSwV8mKvKRMNU7HsV+ycyj1dQD8pX5qgOw8ja6SJacg==}
+  '@oxc-parser/binding-linux-ppc64-gnu@0.149.0':
+    resolution: {integrity: sha512-aByOTCdLYp8FjwAUUmN7YYjAmPJ/9t0I1ACuhAkYun87fajIHbwuZ/opaBk0Pnfxzp2vYyD8hdG8OQWEglP5oA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.148.0':
-    resolution: {integrity: sha512-2GBiM9h26dR4WJfhoMvnFMnFLf7m/kYs4UMqjvrOfQG4BV1nuTJDH22Zc2MQr3INZF7nSKYQ6xlhD3hQ7A6gug==}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.149.0':
+    resolution: {integrity: sha512-SAdNs+uxMRBLPM6QuLlOxzE4duWia4EMhqGknsJS2EGnWni7i53gSZhaW3VYPxaP8nk/UsMQxMODIFwBHbRWcQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.148.0':
-    resolution: {integrity: sha512-uPqZexvKJmEgq4mAu36qe2xTfXZE7oyik1R7KtZ5tl8qKlq1U1fIqTFRUEBZqRGvforoTrGIpatRzcoPKO66RA==}
+  '@oxc-parser/binding-linux-riscv64-musl@0.149.0':
+    resolution: {integrity: sha512-RhmzD62QNtMjuBAeKJ15gzyNRv06Yz1ZFi6lgTiA5S3ixkrSMPJWIPGyqdlC4XiWxwAW9W4jeQNV4/Om9V27gA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.148.0':
-    resolution: {integrity: sha512-9oUHvnTbp7ZraFsTC8PN6XhdhPSSxZumYvixWl7Smi353gEULvK6yV0sXNVrdFMHQeaDKFCi8TgDhNK7/A+Y+Q==}
+  '@oxc-parser/binding-linux-s390x-gnu@0.149.0':
+    resolution: {integrity: sha512-HqEExoeKhlfUacdhj7KEe1m93B1SzCUkF88c1qLQR5Km6GPSoMHMIjK7qmRXLzjsO+ipSTWVsnYMVG0j2/mxNA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.148.0':
-    resolution: {integrity: sha512-2qhDSJwKzbSZzF7lDqqk8sr/yXsmwr3PeUa4/nazIF+zFAYz1gVPEfC34GQtGxzJUUmklaYAL63368LEfrMeyw==}
+  '@oxc-parser/binding-linux-x64-gnu@0.149.0':
+    resolution: {integrity: sha512-FuAv1J7GoSkmxg5glvzlHA88Ld7dOIg23VdAsVLngPZN/ZjZPtCaBZDby1GPn63Yj+7h47/wbcd7i1p2UJTeNQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-musl@0.148.0':
-    resolution: {integrity: sha512-qQoPDZUFV0bh9xA09XydmkjMBpgc1ukJuhMvzQ9QeVmFaHTS9W5TE5CoLmSl3QQyUP9OuHO3x/WPZTIIZPWR3Q==}
+  '@oxc-parser/binding-linux-x64-musl@0.149.0':
+    resolution: {integrity: sha512-KDFOVgjMIOiMiRUw+jZlAIEZZFG0WgGk+adcldjc+/qz0/kvobnYJqDqNX0+REJbSpSsM1Knj0zrEGTQ6WTIng==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-openharmony-arm64@0.148.0':
-    resolution: {integrity: sha512-1UGbaQWEXUCLqAmaR5kwRDjx/R4S5LQKZkM9CHmaHkuKhriOF32aRLfS0jCRNE2yGQJLMEA1z9UucbBVqjXnDw==}
+  '@oxc-parser/binding-openharmony-arm64@0.149.0':
+    resolution: {integrity: sha512-O3O+ZBhGEUhtbDXFWRMTuOCBg+fC2hf1wrtZBrd3VJUtV/MDd1LCwZXIHY2nMCnh9Akgjay965pBok2h5AXN0A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.148.0':
-    resolution: {integrity: sha512-pWKdzRDNG2+NK4h/V6U/CYERcfYD6u28h5IB/VJVsrZaD3muvE58tUj22lieL5vLZ+XFi1GPv9YXckZbJZ9BLA==}
+  '@oxc-parser/binding-win32-arm64-msvc@0.149.0':
+    resolution: {integrity: sha512-9hMvs3GZESAcbUGU3mqXFWRLgBd8TLeosNYfHusHp/hrBnk5lIP2nJtark3hZ6qT+lqSdS79sH8NoWHj1x9iUw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.148.0':
-    resolution: {integrity: sha512-i3p4x+mvwtjcE1J5HM6V7ggsbXiznExN/4MkNyOy3dfXrVV3bnkSfmZxvo6/84qCVX4ShkpNE1SKt9biIF31GQ==}
+  '@oxc-parser/binding-win32-ia32-msvc@0.149.0':
+    resolution: {integrity: sha512-8hQaS1Urc1NnlutDfhQ+DwijRALGLY+AmqJSBHV4OmyPZDoqgtkmjTHl2tsTLK6PETe6PbIJLKmXcpJuqkf8Lw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxc-parser/binding-win32-x64-msvc@0.148.0':
-    resolution: {integrity: sha512-Ye6vB7VQulghWYkYkECOBYFRVEizz4XyRTUAv+t8BuyurhKU7uD0P9eowL+mKG5Mf8MSYx+DI3Cm8SKZvYG7bQ==}
+  '@oxc-parser/binding-win32-x64-msvc@0.149.0':
+    resolution: {integrity: sha512-xFqDgKSKdY0m2EtHQL7uMuknuEGnvbtxkWllGle5hmhVe5xn5XZ0Zb9iViAsItFAf0CjSiZ5er3XqqAlr5oARA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -2424,12 +2472,12 @@ packages:
   '@oxc-project/types@0.138.0':
     resolution: {integrity: sha512-1a7ZKmrRTCoN1XMZ4L0PyyqrMnrNlLyPuOkdSX2MZg7IiIGRUyurNhAm73ptDOraoBcIordsIGKNPKUzy3ZmfA==}
 
-  '@oxc-project/types@0.147.0':
-    resolution: {integrity: sha512-IJ3s6ltHLp45S0bh7phkX+gJO7A1Wuz2EaqpAhb8WjqDwbzMiWKHhyyT42tskaWjEYXtHtVCPpnBJVT9+dcRLg==}
-
   '@oxc-project/types@0.148.0':
     resolution: {integrity: sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==}
 
+  '@oxc-project/types@0.149.0':
+    resolution: {integrity: sha512-Efcc+iF0j3Bf67YjEqIqWXbX5XddXoK/Mw4K1/JuXwRCZ8N16VR7iT23nlCc9XrveFVh/E5Rqs2StT0V8v9LdA==}
+
   '@oxfmt/binding-android-arm-eabi@0.35.0':
     resolution: {integrity: sha512-BaRKlM3DyG81y/xWTsE6gZiv89F/3pHe2BqX2H4JbiB8HNVlWWtplzgATAE5IDSdwChdeuWLDTQzJ92Lglw3ZA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3254,14 +3302,14 @@ packages:
     resolution: {integrity: sha512-DmCG8GzysnCZ15bres3N5AHCmwBwYgp0As6xjhQ47rAUTUXxJiK+lLUxaGsX3hd/30qUpVElh05PbGuxRPgJwA==}
     engines: {node: '>= 10'}
 
-  '@rolldown/binding-android-arm-eabi@1.2.6':
-    resolution: {integrity: sha512-b+jTcARdTiFLI6jB4a5XjTm0RWd6KcRfQj/I2356fxUZemiho9zQLxo0RtCuMDAyKcLo6cEltkgbQp6d1+sjjQ==}
+  '@rolldown/binding-android-arm-eabi@1.2.7':
+    resolution: {integrity: sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@rolldown/binding-android-arm-eabi@1.2.7':
-    resolution: {integrity: sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==}
+  '@rolldown/binding-android-arm-eabi@1.2.8':
+    resolution: {integrity: sha512-tN5aztYkKCte4i5SIrrz5yK/HMjEuCqCSCJa418jOV8tZ1cBY3YF2otxB1ktPxzsLA1BeTqwapK0bfjxNvHJVw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
@@ -3272,14 +3320,14 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-android-arm64@1.2.6':
-    resolution: {integrity: sha512-lkWU8ZJaRk9q3CIEY1Tc7vIFALp3Xw5NfGJo2hQg5oIqNgxWi1zI+IiDEK3r70BF5Dzol1tcXsnzsRc8NLhG+Q==}
+  '@rolldown/binding-android-arm64@1.2.7':
+    resolution: {integrity: sha512-l17HE9EweWaqJZhuUuNBN/FzM62xw+DECVnJyvMsxn8vJFAGLy5QfLDoYAcronkAN8VxKZHezDpulHDPx95vFw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-android-arm64@1.2.7':
-    resolution: {integrity: sha512-l17HE9EweWaqJZhuUuNBN/FzM62xw+DECVnJyvMsxn8vJFAGLy5QfLDoYAcronkAN8VxKZHezDpulHDPx95vFw==}
+  '@rolldown/binding-android-arm64@1.2.8':
+    resolution: {integrity: sha512-dIYTWl9XprMUiQFoc55KUyk/oS8SKYH3zFl0LTR7RT0Xj4hgSVyuJcroH8JUu8RcpF8fTB6E0aOwCkZoYPcDSQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
@@ -3290,14 +3338,14 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-arm64@1.2.6':
-    resolution: {integrity: sha512-dgR56NYnvAszm7Ob1B2/Vn0e8bUQYZH2UjVaMMtMVOCKFSfjhfLmuA/9+O+F+ajUdG6B/bSssrKW6JJYASa8jA==}
+  '@rolldown/binding-darwin-arm64@1.2.7':
+    resolution: {integrity: sha512-8ED8ELFvHXc6OCETIn4gXObPiaR6bckM/ipXtbzlPVDRMBfEGjCKgO90F9YtfdpDatVx/ZQw7aZ1vUMf/+T3Mw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-arm64@1.2.7':
-    resolution: {integrity: sha512-8ED8ELFvHXc6OCETIn4gXObPiaR6bckM/ipXtbzlPVDRMBfEGjCKgO90F9YtfdpDatVx/ZQw7aZ1vUMf/+T3Mw==}
+  '@rolldown/binding-darwin-arm64@1.2.8':
+    resolution: {integrity: sha512-PCSDQGXD2IyTEFrcgPyBM8jJuGmrbCMuoIOXdbEGVemruKACXoLQJrb+A45Z0L5t1RQkdfJprAYPkikbh7dzdA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
@@ -3308,14 +3356,14 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.2.6':
-    resolution: {integrity: sha512-vpVxFvUCFioJqug7OTvqptkc4yb8UX0AwfDmJpaR/0sWz+BUmqSVAf7c8JkUgnN8YLspb4a/N6NhTyMAmdyQ7Q==}
+  '@rolldown/binding-darwin-x64@1.2.7':
+    resolution: {integrity: sha512-/WPripjtiAIZ2tWY7ddijORT0Ujg87wxWW/qcoFVCKAWVDPhtY0xr7Dj0M3GyNGz60jGwTElhro/mkF9dT7dDQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.2.7':
-    resolution: {integrity: sha512-/WPripjtiAIZ2tWY7ddijORT0Ujg87wxWW/qcoFVCKAWVDPhtY0xr7Dj0M3GyNGz60jGwTElhro/mkF9dT7dDQ==}
+  '@rolldown/binding-darwin-x64@1.2.8':
+    resolution: {integrity: sha512-Uk7lRsGhPFHVX/sAUC6D5H9Ol30dFHd6iquokll2th3LpdJ3F5CzQB+7DHn0Ri2mG+U7k2zXiPHDrwZenXhwSA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
@@ -3326,14 +3374,14 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-freebsd-x64@1.2.6':
-    resolution: {integrity: sha512-h1wG6Y6K3JlRswxsI64qQJqBAy4vrLuHgRbc8CZMGSWTOFRY6ghMApM1NKzB2I0n5xV1fjkE18SuVl2QpLeNpA==}
+  '@rolldown/binding-freebsd-x64@1.2.7':
+    resolution: {integrity: sha512-14DI4NcqpvbICxSnGLx3PmtDaWqRP/KGSGb6C+JLLVPeZRl6dKdHba3pGsqT3vpdTqhEYIPG0MMQ8c0xYqoJxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-freebsd-x64@1.2.7':
-    resolution: {integrity: sha512-14DI4NcqpvbICxSnGLx3PmtDaWqRP/KGSGb6C+JLLVPeZRl6dKdHba3pGsqT3vpdTqhEYIPG0MMQ8c0xYqoJxA==}
+  '@rolldown/binding-freebsd-x64@1.2.8':
+    resolution: {integrity: sha512-DjszaTEVogPqA5bYzsEeqDCQxbcp2fexQwKcRspYji2yzR68fCf+e4fx6kBSRDwX5/brZaHw/hWS9+A/+/w9sQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
@@ -3344,14 +3392,14 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.6':
-    resolution: {integrity: sha512-tbCiqub0q2MVWJKgF5PoAlNWCtQydiOYSLIkd8sByqK/6MMYLJRcSXSYodqYtd0O+Fw7QaVmKKlS4oL94YRZ0w==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.7':
+    resolution: {integrity: sha512-bxrWIRvHWQvbJwi+VIie/kDJmQxcNE6xxWwZdqF/ExVAigtHkv54WTLQPb+QsZdnFy18fg7JPfWGL0RH6vwIlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.7':
-    resolution: {integrity: sha512-bxrWIRvHWQvbJwi+VIie/kDJmQxcNE6xxWwZdqF/ExVAigtHkv54WTLQPb+QsZdnFy18fg7JPfWGL0RH6vwIlQ==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.8':
+    resolution: {integrity: sha512-zmwa7FTmdzB6aaEEuuls18H6Ap5JmJPSoPTuXixeJZV6tG40SyLkApQtz1g8ptZtiEKqj9OM0oNLPh1AgvE31Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
@@ -3363,15 +3411,15 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-gnu@1.2.6':
-    resolution: {integrity: sha512-oxK9+baEBPhZG5HB4URY+uU04zJWeZlH6Tb9rB5DK4DF9XR1uXNLXt5Q5ZsugTKayNCNLhkcwz/ye74hRI98dg==}
+  '@rolldown/binding-linux-arm64-gnu@1.2.7':
+    resolution: {integrity: sha512-toOY2BChBZyuxU7OYX6Tn389di4IzAqPTycVcci0O7FSfBqzRB3RZn+K5Is6ANf4tmgRd/K1yZTsNTXbkXsnLg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-gnu@1.2.7':
-    resolution: {integrity: sha512-toOY2BChBZyuxU7OYX6Tn389di4IzAqPTycVcci0O7FSfBqzRB3RZn+K5Is6ANf4tmgRd/K1yZTsNTXbkXsnLg==}
+  '@rolldown/binding-linux-arm64-gnu@1.2.8':
+    resolution: {integrity: sha512-KdYQDPHwJVnbFwdTGMgxsI9SqblBlz6STGM+w1We/d5B8OWWidYH0MwkU/uA1wM5fIpO2MkOVxXrNzzuZhw9ew==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
@@ -3384,15 +3432,15 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-arm64-musl@1.2.6':
-    resolution: {integrity: sha512-muWCk27FVBEZtv0MsK8gnfSmgczA8KQ0uRVJbTABKhkRfQc38aUrcb7fhi3BNiyseFmgcRsoMfQsSNJ+DbZdSw==}
+  '@rolldown/binding-linux-arm64-musl@1.2.7':
+    resolution: {integrity: sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-arm64-musl@1.2.7':
-    resolution: {integrity: sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==}
+  '@rolldown/binding-linux-arm64-musl@1.2.8':
+    resolution: {integrity: sha512-jFJTifHnNPY+yzOoNZQfSIysrVyXzEQPhPnOUjmD1bcQGHH6s7c8cViKWar8YplQImE5N9JRqMCLrM2CdxOrZA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
@@ -3405,15 +3453,15 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.2.6':
-    resolution: {integrity: sha512-eWDoSfU7Co2qj3vgB3Dt4lj1mG6CoWbcJQkRMP3XJplyCMtuaq3LHvPFjS9QIPvMGWVadJC04Xiy0IdcVPtnwQ==}
+  '@rolldown/binding-linux-ppc64-gnu@1.2.7':
+    resolution: {integrity: sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.2.7':
-    resolution: {integrity: sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==}
+  '@rolldown/binding-linux-ppc64-gnu@1.2.8':
+    resolution: {integrity: sha512-FhiOziBDWPBjbcmRzfLyIJnaP7AVMFXT7YCXPjXxj7wKU3vx24RjrCNN/zjvVa+N2vVoHJwCoUBvsrN/DG3zIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
@@ -3426,15 +3474,15 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.2.6':
-    resolution: {integrity: sha512-2bWNjRSIayvupRKxXUY2tWG9fYdoUlTqWywHRvE8Eq3GvuQ+f2HeIkve697fIt+IQs/PV8yFsdWuhp1aJ1PdnA==}
+  '@rolldown/binding-linux-s390x-gnu@1.2.7':
+    resolution: {integrity: sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.2.7':
-    resolution: {integrity: sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==}
+  '@rolldown/binding-linux-s390x-gnu@1.2.8':
+    resolution: {integrity: sha512-WnHfADMzOV2Y55wlx1hzzQnar/wDt/VdvWSD99r18Mz9ylNieIGOkRx3UV21h7m/eJvjySYJkO26VvGNFkwsIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
@@ -3447,15 +3495,15 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.2.6':
-    resolution: {integrity: sha512-KekI0gS0wLxe1UBSQSjenBVwou/JkcQPDzBPICGZjxUv9k3RteHDPBQaiOicZUFKRIH2wKEimGwVpnJsbPzu7w==}
+  '@rolldown/binding-linux-x64-gnu@1.2.7':
+    resolution: {integrity: sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.2.7':
-    resolution: {integrity: sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==}
+  '@rolldown/binding-linux-x64-gnu@1.2.8':
+    resolution: {integrity: sha512-H9tRr5ibfXFVLxbPOseVewewFpl28zcEdjRDt2FTUZU7odxP0gEv1ki4/kGmcGOh78oRwZuuQllGLZ9zTJp84g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
@@ -3468,15 +3516,15 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-x64-musl@1.2.6':
-    resolution: {integrity: sha512-TvtPnfVr+HtyGiDmPK4VWmlNm7QhNNAcK5Q9A7aOXsI8545yCyaoMaicXrFZ72JzeYjaUVk7yT243zT0jzjFKQ==}
+  '@rolldown/binding-linux-x64-musl@1.2.7':
+    resolution: {integrity: sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-x64-musl@1.2.7':
-    resolution: {integrity: sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==}
+  '@rolldown/binding-linux-x64-musl@1.2.8':
+    resolution: {integrity: sha512-UefiqfM3D6IVNlZ8tSGs9+Ejjud2T+oxO0IHADU45Y+lyEjD2dVFyZHbkfX0LUb5Zugo/oIv1eCO/KVYhgYJYA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
@@ -3488,14 +3536,14 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-openharmony-arm64@1.2.6':
-    resolution: {integrity: sha512-iOo0VEay2XFhaCcH0sps5XIimkSuOnNaZrf6+ZkoSOQBJPKNU48RkmJv0/lSpipexu5P+ouFgafe5IGr/DiQfg==}
+  '@rolldown/binding-openharmony-arm64@1.2.7':
+    resolution: {integrity: sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-openharmony-arm64@1.2.7':
-    resolution: {integrity: sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==}
+  '@rolldown/binding-openharmony-arm64@1.2.8':
+    resolution: {integrity: sha512-637Ke4kWSy6rp9cxQ9gMOXlxPgIw/c1beASV4M//3+9I4uwBVOOl74G+e3zyU3u19U7RkRl/HuewixZ/Z6+Rjg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
@@ -3511,14 +3559,14 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.2.6':
-    resolution: {integrity: sha512-y5NTmmasMS455JlOCO4ZM9krIchv3Mvm1crL1iUPGOPgEzSkves9n0SdC5Sjz6+qWDFhd8/JpfWMH8NSWNHe+A==}
+  '@rolldown/binding-win32-arm64-msvc@1.2.7':
+    resolution: {integrity: sha512-e3Gu3WxbNk/UqQhxqU7YIYO+9ZBvWNz3U+h/qRFosscMFzdRPbXYSaSWgSnklv2fz1TgzBTcti2z35c/7irsHw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.2.7':
-    resolution: {integrity: sha512-e3Gu3WxbNk/UqQhxqU7YIYO+9ZBvWNz3U+h/qRFosscMFzdRPbXYSaSWgSnklv2fz1TgzBTcti2z35c/7irsHw==}
+  '@rolldown/binding-win32-arm64-msvc@1.2.8':
+    resolution: {integrity: sha512-xWBkPOF1Q9k/Gv1nQXnVdLxKu74jXppuOM4Z3mnypVUJJJwLsMl7hNJGRAUJoG8A5MgOI1ACKM+wBFxSJzKy4A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
@@ -3529,14 +3577,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.2.6':
-    resolution: {integrity: sha512-np8iZSLfXlAD4kWhiyq/u0Yt8oZDtRQ8lGhQaCXo2rl37KNjeU0GjJuwr4P3oeZ++ROfofsKNBqR5LTO8aXyWQ==}
+  '@rolldown/binding-win32-x64-msvc@1.2.7':
+    resolution: {integrity: sha512-W/jg5qoRSqjsEv0+dZi4e687mcHqmVuU0P4fK6qS/xjetW2Gmc1W8j//z5nAeNcC8Ttm0hV46IjcYeuVwYhuiw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.2.7':
-    resolution: {integrity: sha512-W/jg5qoRSqjsEv0+dZi4e687mcHqmVuU0P4fK6qS/xjetW2Gmc1W8j//z5nAeNcC8Ttm0hV46IjcYeuVwYhuiw==}
+  '@rolldown/binding-win32-x64-msvc@1.2.8':
+    resolution: {integrity: sha512-uz2ZvfgXbxqNwijjjbxrnvALwpyODDcgc1T1N8N3rf/DXKQmaFwmB4LX4yyjggpwN2obdQLb2rgirX5ffCWYng==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -3640,86 +3688,86 @@ packages:
     peerDependencies:
       eslint: ^9.0.0 || ^10.0.0
 
-  '@swc/core-darwin-arm64@1.16.1':
-    resolution: {integrity: sha512-zlJblJ8ncErD43lKdxjbUaUskJQf+LxiPXYcWXD8/8ZMV+7uuAT+CwjciLXpyZBd5Pq/S726bMpeeAwSeL1hhg==}
+  '@swc/core-darwin-arm64@1.16.2':
+    resolution: {integrity: sha512-i/j0HNbnn79qnTVPicvay92Nark8fW8NQqn1e2mGERjUXNpBV0+SwQxlRpk2zBhn6laJ8PDI6Kn1nHZhnz3LCA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.16.1':
-    resolution: {integrity: sha512-IN0BmPWb0YAh/17mmlWB/HDBtTw2MfuW4hulf/tQAgTQBRH17l+z499bNJLK6LizSjqs0P7V+jU38Zj+vJC1DA==}
+  '@swc/core-darwin-x64@1.16.2':
+    resolution: {integrity: sha512-HrwqHyEyHVXO3qTk8EkNK7/b6sOZSEoNh+pot6RdE5x0LbNqfo8LtJUvi3UTXr+5ja/o5HbJdW80eCXo+NjbiA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.16.1':
-    resolution: {integrity: sha512-EYgrx2YOCQ2Twz2S793kqNjPkpvYVUPzzR95bIb7by+VQcyaai4lZZ2iz/tZvcFVKSNcN3/JTKwx+aBn2ZL52A==}
+  '@swc/core-linux-arm-gnueabihf@1.16.2':
+    resolution: {integrity: sha512-MdXi83Z/gGp1LIrg+h7HKxiul/z/Bty/ZJSvYAFqDl9zteC1XLSAZdScquKtXPp50rdyXqritTDCqQBhwVfZKA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.16.1':
-    resolution: {integrity: sha512-moyKm0YZlHdHohzm1YwgAyesqnE853rO0REMfJLFAova51wF9BNi+3ZW2PeS7Vqvn6HeJuepLpAHbBdZctxpHA==}
+  '@swc/core-linux-arm64-gnu@1.16.2':
+    resolution: {integrity: sha512-/jcTmK6Ktz3owM3YtiKvjofV6p3VpHnYzTIrOGwDIOsDigRAAVuZ8east33wYO/7UTdKYFlyHNnJNT0WJqOA3Q==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-arm64-musl@1.16.1':
-    resolution: {integrity: sha512-kKGBO9wdapiSzuf5ZzZ2fYtlu1BNSYtIIUxvH1ir/gcelTOREEHGDCLTDFx/2Knf878nU11A40z7LxwasEFxqA==}
+  '@swc/core-linux-arm64-musl@1.16.2':
+    resolution: {integrity: sha512-4gFarKaFnlJTSlJYKmMhV4u+3YE4uYfiydpBoYjmgQhCf9lAieOq+WilZaK9vVSHeqLuQpTEiGULZqAdsRX5Dw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-linux-ppc64-gnu@1.16.1':
-    resolution: {integrity: sha512-nZ6qahtLxC3PM54cWOQZHxt4lTCF/3J4LIoWWzz6v7A+rLs8Dx54anYQf7mH3eIi8KlNpgKci/ie8ZSqFN8O7A==}
+  '@swc/core-linux-ppc64-gnu@1.16.2':
+    resolution: {integrity: sha512-syqSLGd6KlZ1PciNzs6bIUlhOuFztZufebOHaERjc4N4SqNZxyqYd4I+jj/EfOYnpe0kNjccn9HJLN1p5dz3+w==}
     engines: {node: '>=10'}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-s390x-gnu@1.16.1':
-    resolution: {integrity: sha512-4ji5PNzhYq193Z4/4xUaSoNJza6iCkDJSzhetrbB6KOYxsr+kxtQr8ePWhMJUiMt6JUWtXaZ1PYT8FhtED+nGA==}
+  '@swc/core-linux-s390x-gnu@1.16.2':
+    resolution: {integrity: sha512-ZBBLK+ewGyXLzWeMS7wbKtWBdnif6etn7xvPY/iOfbdsjX/+bgkp1pQt2lWF2wlu2hXYZuhJ/tHZE/QR8/apzg==}
     engines: {node: '>=10'}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-gnu@1.16.1':
-    resolution: {integrity: sha512-VJQxqrisHV+B394IgrOu8YsIIXZgffnf5tO+yc9Z/hoUpuZEvuQTjWwlnpZdpyD+0nx6LTD1/3k646JYm43yJA==}
+  '@swc/core-linux-x64-gnu@1.16.2':
+    resolution: {integrity: sha512-LyHJgxCA4Tje0ysBMbEb0tt/ie8kgUKoFE3JAKFhpevmTmhYEoC0H9s47WuDsqiFckF1ITUguZIXJG6K5e0dvg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-musl@1.16.1':
-    resolution: {integrity: sha512-r9oV1mwxxsIGcLV1IQ/tw76MW3doatKze1QFWuC+a7QqJUkhY/bKTSVk6NpKKUGm2LDsE33Va8VqSClfA7vSiQ==}
+  '@swc/core-linux-x64-musl@1.16.2':
+    resolution: {integrity: sha512-PghXJlVM1cgtLfNUR1vxFo1z+PDRAe8cWAJlZZ7spmeiN7BospGXg/MHUg7oNSgwSX7Zo//YKv9P5yD9apsFJQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-win32-arm64-msvc@1.16.1':
-    resolution: {integrity: sha512-6huNRessoBLxWEqBm5zJXyCQ27TO7anvkdiuQ5MDO4CJni0nOXEqKtV9RllQ2TdyENKKsUMXVnIfW2hIXx/R5Q==}
+  '@swc/core-win32-arm64-msvc@1.16.2':
+    resolution: {integrity: sha512-StTOSefYBxemvNYYUI3UmO1a8y+hSPjjfHogC2TEHL+Z1PlEBim/XtLas5rS04jAzT9RrNmbtX911SZ42H9jSQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.16.1':
-    resolution: {integrity: sha512-OVKJFUzphrGmsh+BGtcZDesx0YryV7/Yvy5XGgTqnrZfjnyfcr5uaqYQugCckdIlupc5Vs3XtDjRAj12z4ZPlw==}
+  '@swc/core-win32-ia32-msvc@1.16.2':
+    resolution: {integrity: sha512-fycER209DYIzsibpTMC+chND05OfOjgztWL9U8OE6/uUlsOUZH3eh98isBLEnOymYUhlJLEt5++W1+KL/FOh5Q==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.16.1':
-    resolution: {integrity: sha512-Bt+VIhWYCGk4urklnkkteLUOeLv1VxigwTCeB/xC6rBZxY6IIKdDwCJf6on3E3SUGsIqmQS6QqtuJQc1VxF4Aw==}
+  '@swc/core-win32-x64-msvc@1.16.2':
+    resolution: {integrity: sha512-cSd1z6ivSrJPVr+moVwOHWjeKy6TpO4/Shwcv5KCrKYXCccxwh4pRy1C3fDioNx2PF1jPZWHKZjtXt+Be9VbaQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.16.1':
-    resolution: {integrity: sha512-nUaeu91O5QZKrQdaDCHd402ogUIoNOOjpkZNq0UomWK0G6gDaGmLhvddF1/3BXf5O8aLyo6ZPY/aMDWvaJQ/hg==}
+  '@swc/core@1.16.2':
+    resolution: {integrity: sha512-95I4kiSMeveI/Mhi+tE4fiWcWLUMfzfKrk0jtr8LRMqHgOgq+xHS+zExkDqoO4b5OeeuXHMWVdD5MeP3X6sULw==}
     engines: {node: '>=10'}
     peerDependencies:
       '@swc/helpers': '>=0.5.17'
@@ -4221,27 +4269,27 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@weapp-core/api@0.3.0':
-    resolution: {integrity: sha512-TJYxG/3l09IoIRwlCgb9ZkSWAOC8zs2GSsJoG7KX4kpUH6/lmE5RgQc10lgpUXxLdVbSZFPnB7+Q0ULTkA5KnQ==}
+  '@weapp-core/api@0.3.1':
+    resolution: {integrity: sha512-hRpeaRlS6AHDmJmgmiYUCmUm2sAuKLdoYnlKG8dU4873l4/wow58GJhUzxMPpnC9Zh34UioHxS4gn+2BtpXMIg==}
     peerDependencies:
       vitest: '>=4.0.0'
     peerDependenciesMeta:
       vitest:
         optional: true
 
-  '@weapp-core/constants@0.2.1':
-    resolution: {integrity: sha512-lz716tV8rFuMbpa0DsmQqRkbOkSntNAYrh39Xud1EczCXQon8hoS8TBr9CQkBKjOjZSD2s3Q4/OuQtrepg3qqQ==}
+  '@weapp-core/constants@0.2.2':
+    resolution: {integrity: sha512-Rwdw9RozOMkmEavEIsUxklmPufd1+ASwaJQDOK9jU1juQwlzxXq0nbf4I5TMljN4tHhXTW2qF6ZKM9UxEDGbOg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@weapp-core/escape@8.0.0':
     resolution: {integrity: sha512-dH2zPSfsqEoIuAVLUu1UCEubfFdQoJo6gUneTpvUjz30hss/MgAkj6b1WEylCqOPT6g8d4bj66TWPRsg6QGcLA==}
 
-  '@weapp-core/init@6.0.17':
-    resolution: {integrity: sha512-ymziOsCki2pL3A6l4Pn4c2VBa2DrYTSZNewxy32xnKRginUYgTlPmHvu1F1IJ9Uvp2rka4GHTT1KosVf39DQzw==}
+  '@weapp-core/init@6.0.18':
+    resolution: {integrity: sha512-K4cl8RFKUdNFhF2TlEfk/TOzLV6PM8AelvwHsws+XB2p2Pb0kNqShIsUjd5S8YI6E0CCcPwEyEtfBPbJpOblKA==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@weapp-core/logger@3.1.1':
-    resolution: {integrity: sha512-MDnvDafxs0oTxGggCPCclmIPlKZk2xHvxKAFq+2q7EjBFeT0nTa2ZLiJUxuxziXNQUihW8zop6gMR01j95IjEg==}
+  '@weapp-core/logger@3.1.2':
+    resolution: {integrity: sha512-Pwcu5GkKR+k4LXpNru2shrJmqI7F4hBp3ON2X9ECQza/7ddPX+hqMsb8enR7rTdRuRNGU5/dvHGNrxwABwaRgA==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@weapp-core/schematics@6.2.2':
@@ -4260,14 +4308,14 @@ packages:
     resolution: {integrity: sha512-iyOwS3/R07K1PJHn2VBq7Lb1FOXthyrzJHrF/csbtXc4QRANLmLLCRV95th1NXkY/7ty5lg1HwGHAChyA27Q8A==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@weapp-tailwindcss/postcss-calc@1.0.5':
-    resolution: {integrity: sha512-w/jAGPs88Gk6D5wcFU+p7NBtRsDONCvt+L++ZMzxrzuxAzFgo32NX7XZm0GlHrlpHFq2Lh3UQWQiSwB0AcQAsw==}
+  '@weapp-tailwindcss/postcss-calc@1.0.6':
+    resolution: {integrity: sha512-cgDYqWc+cfr+YYyWWVTZIDZPamQFoXSzFqHAr6VwM25UmmuqebKuCiaS9z2myVysCRFnEWNgOoweJ/BmBSiS+g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       postcss: ^8.4.38
 
-  '@weapp-tailwindcss/postcss@3.3.2':
-    resolution: {integrity: sha512-Rb6+gvlFmn7+vaJ1cGN23lPHPvOLlvBl72rE2kgJRodDogPw1LmcuS4VDoa5Sd8esyog7LDOqfF3T4gGx9YOsA==}
+  '@weapp-tailwindcss/postcss@3.3.3':
+    resolution: {integrity: sha512-CQN4p32nyQ/Hx4Qq6vFfMa19odYu8loRz5dR8C3ZJy7pN2SuJyfzuSzuiXpY/HfcDDX0MyJLEOfY11zBTlpcFQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@weapp-tailwindcss/reset@0.1.4':
@@ -4284,12 +4332,12 @@ packages:
     resolution: {integrity: sha512-mvbXsYwsxQHjb1ow7QABm3cZcim3P5k3Ly+kX1GRB937WHKGmWVjEAuc2Jpy48s+e9CNsJiaS8BX4wmWCJKV/Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@weapp-vite/ast@7.0.4':
-    resolution: {integrity: sha512-rSz8Y1AxnsEJtuB8IjomNqfoetbNnRlrwatgoF3vAd+vP6WNTpwhnKpJj3YJMsM84XWkG1eSgslZAh3Zn+G59g==}
+  '@weapp-vite/ast@7.1.0':
+    resolution: {integrity: sha512-lndpl70Vo6PAIrfJWfwhE9EialG68Y643stcSffSnIl5L/30A2E83C4Oh7rB7MxSqP7ZHhjiq86OrWFMnCfEyA==}
     engines: {node: '>=20'}
 
-  '@weapp-vite/devtools-runtime@0.4.17':
-    resolution: {integrity: sha512-doCUnltI48tA4Od06HSSm+wd2iXNDwigOzim3/nUBpD5dUEhHYo6Bm2YZsBqcDYABi3smBMiJv8gVkM3X9FzjA==}
+  '@weapp-vite/devtools-runtime@0.4.18':
+    resolution: {integrity: sha512-vOjeZ0vV4H6+0omHlSQ+T5e3GK1wnyzal75k6a923QJ1AenViBWuGtVhLFVHFJlm1BnXiEro2zSNL8/5PVeazQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@weapp-vite/eslint@0.1.0':
@@ -4310,8 +4358,8 @@ packages:
       eslint:
         optional: true
 
-  '@weapp-vite/i18n@0.2.1':
-    resolution: {integrity: sha512-r3SWwCpscAgPRSfJgw7VdjlJn/yBXZS/iTgAvo6CdyOKXFWDSUokAothj4JTA/3BHDc4Uf/QOEsdP9c3hgKnoQ==}
+  '@weapp-vite/i18n@0.2.2':
+    resolution: {integrity: sha512-u099xKOwIaKb+A0/xBzagQT3auALelcXV9WhJJvmAUfW9gBs/72fcxi96A1nwedEdz857D3qmS3unKP8qYW8Vw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -4320,12 +4368,12 @@ packages:
       miniprogram-api-typings:
         optional: true
 
-  '@weapp-vite/mcp@1.5.1':
-    resolution: {integrity: sha512-q1xrmo2lX1Uc+Fr1jZlHEnh5Dt3BXY6mORJo9k9adSf8aLCgI9NFonXdo2LU5DXt4FhyhnPIv4Drb+E3cXDRlA==}
+  '@weapp-vite/mcp@1.5.2':
+    resolution: {integrity: sha512-YgOFtYjKAl6pJ4OEYULCdDy5SnovHn/WsaKvo4OmjG84dKSIeweOq0eVDJ1jgDuz6v/XbKV/FgNvc41Nw0sbaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@weapp-vite/miniprogram-automator@1.2.16':
-    resolution: {integrity: sha512-zEwZ0xvZb9YXsh7cSvlRVUTT8uq0Bvx365PRfiDIOD2kH4PlRffA3PBpFh09W4A/s3qnr14w2BO3s6rZACN8tQ==}
+  '@weapp-vite/miniprogram-automator@1.2.17':
+    resolution: {integrity: sha512-4lSG5XkiF4cc9rNjWjB/7iJ2mNVtJyyDFnX2tLHjzycqk2rBoQQfZ2k8T9eXsRe31P0V9BZNtadqShz0gLWbAw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@weapp-vite/qr@1.1.2':
@@ -4336,23 +4384,23 @@ packages:
     resolution: {integrity: sha512-oFIoLjhcu6ttdT4YOfweHMMsQXUKaTT34E4WCJgXyasz2jItwZALv/zxRio3kCt41jyN7t5mm3QVlA75fdj8zg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@weapp-vite/web@1.4.21':
-    resolution: {integrity: sha512-RWGO8rDfRqQjOVhSjNcZC6j3qmFHiBYZ0P2YmM50etfUk8YneYOaQYecSu2OKl0ukPyy6UrUHNzVtn5QxVWY+w==}
+  '@weapp-vite/web@1.5.0':
+    resolution: {integrity: sha512-mMS2/IiJjW7Pc/58hiaka4gU+ORWNugEd9eCs0VN0O06e70FU4PWMymlvACa4O5vd0l/ovtUcfwb1CyTqi1dnQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@wevu/api@0.3.0':
-    resolution: {integrity: sha512-1Nks396VWzEKWVW2MYBYpb0KrhmOWHjn+yGeDGXly3bI38+CBFBg0O1MPuR+3gi0VK5PGCqL99DPIcr25sFe/w==}
+  '@wevu/api@0.3.1':
+    resolution: {integrity: sha512-9jYcIGthHUkLK9XEiE8fyYp7igOc6P+N/eiFqyql3Ke6GlZI/r+3nv/c0T6o8U63xyLKqBYzcfOUCVYGG1QmLQ==}
     peerDependencies:
       vitest: '>=4.0.0'
     peerDependenciesMeta:
       vitest:
         optional: true
 
-  '@wevu/compiler@7.0.4':
-    resolution: {integrity: sha512-eTcSiig/Oy0tfBIpRBpyOd/rBryn36ol13iDNPk5U20A+SkrqcKGkppkBeLjA5QxHTocQM3vjVROWzieiWFZCg==}
+  '@wevu/compiler@7.1.0':
+    resolution: {integrity: sha512-0gVmxwuDVCPtn60oV4p9ys4IRPQoArdogWNzZVQQr+OLYevrQeWpscb2bAHuq93/vry7J7hlVs1WfuO6/JbGiw==}
 
-  '@wevu/web-apis@1.2.40':
-    resolution: {integrity: sha512-AHNh+2YSym17xB78+HOsBJwRzQpK0N0jPg4296+2V//5RJ60KpulI++7L4uKrCAZEev6Ff2DLZZNhdctr71eqg==}
+  '@wevu/web-apis@1.2.41':
+    resolution: {integrity: sha512-BEUkk92XU/y0vk6znixcnhhMFKRQyIvLRPxNd0QCfPTklZ6y9EYZMVjqas2uY+B8J4BEM59P5cVX9D+fMpLGYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@yarnpkg/fslib@3.1.5':
@@ -4656,6 +4704,13 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  autoprefixer@10.5.6:
+    resolution: {integrity: sha512-HiH4oYNc5+DQEx/b8FPfMj+WHH/WWUBmbN5r1Uf/ixtfyFkk+wGIlfJT/RD5eAyzlwkeYRtZUCI8qrEi26pl2g==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
   babel-plugin-polyfill-corejs3@1.0.0:
     resolution: {integrity: sha512-yIkslVjbmml2Xjb6XhFW7lISXHsqk6cesxTdDsXoMom4Lnb99DbD3OQbSOoM5Z+ASh8YXYaLAsRQrU2Jeh3Qig==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4674,6 +4729,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  baseline-browser-mapping@2.11.22:
+    resolution: {integrity: sha512-pWc4w51fBFd7mav43/zKRC+RI6f4yfzQoVlfvE8dECePyfkn1bzLp01Fj0QACcyCZyFhiEMyD2qScfKRWgWibA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   better-path-resolve@1.0.0:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
@@ -4727,6 +4787,11 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  browserslist@4.28.9:
+    resolution: {integrity: sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
   builtin-modules@5.3.0:
     resolution: {integrity: sha512-hMQUl2bUFG339QygPM97E+mc8OY1IAchORZxm4a/frcYwKzozMzRVDBwHW0NjOqGElLm2O37AVQE8ikxlZHrMQ==}
     engines: {node: '>=18.20'}
@@ -5156,6 +5221,9 @@ packages:
   electron-to-chromium@1.5.415:
     resolution: {integrity: sha512-958V+Kbhtgz+SxXeEVKBjrlKRBIDAYvUJfwhjxMZ5S6ut9jAl7l9ZKBkBrvjyjZE36PabLUo2L8kEeV5O4vgJg==}
 
+  electron-to-chromium@1.5.427:
+    resolution: {integrity: sha512-n14zb3FdsChZ2BNobqNHAJMcP3ifFv4paox2LvCrfVAQcqGiSURgbJl+PfMpHVCNFkStnNc+RRVtPBTVW5PDgw==}
+
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -5761,6 +5829,20 @@ packages:
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
+  glass-easel-miniprogram-adapter@1.1.0:
+    resolution: {integrity: sha512-IouMZvrTnJPndi6rf5nXJOWQ9c1LjiLJ3QYH4VqpIirTjifQqy2Xz6BBMHaFpwgbkmBqDTaQK1MWQubzEzuEfA==}
+    peerDependencies:
+      glass-easel: 1.1.0
+
+  glass-easel-stylesheet-compiler@1.1.0:
+    resolution: {integrity: sha512-VgHYdjl/8oQeQXsesW/vfJ7Jtk1QASSprO0dckXBz6YcvT7Bb3Giya0A19/Dv0E4nsHoz5/mxAsJ1X96eOuuvg==}
+
+  glass-easel-template-compiler@1.1.0:
+    resolution: {integrity: sha512-hE1Q561tPi0bScHiPDhmRDLSxZxxDmyyUsvjK694aRjeZZqZSvT/W1J/e8dRuMNSc7RAwLj4JWTsSOSQUnYhvQ==}
+
+  glass-easel@1.1.0:
+    resolution: {integrity: sha512-wlyBNIQob/T4+tqbhCvjlk+AQ1IZtKuKHGRY2JNXTdBRSdnAQ0xfKTfd9zBC6wgQxNhCDr3kHy44agO1xLEkBQ==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -6840,6 +6922,10 @@ packages:
     resolution: {integrity: sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==}
     engines: {node: '>=18'}
 
+  node-releases@2.0.55:
+    resolution: {integrity: sha512-mIrE/Cw9y+9Au6dS5vDKDhQza9YvG6w+ZrS6X+ZzA7yFW/soAeaups4Qzn1bL6g5FVy8WtP79+0j82oPIbqRjQ==}
+    engines: {node: '>=18'}
+
   nopt@1.0.10:
     resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
     hasBin: true
@@ -6924,8 +7010,8 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  oxc-parser@0.148.0:
-    resolution: {integrity: sha512-syxUKHeUll89RIABQADcI7sikYrwyssvA6gj4phSSIPezKVM8yMaLAiLLSc7fmzVvrwybfFGFbW5zme9sX87rg==}
+  oxc-parser@0.149.0:
+    resolution: {integrity: sha512-iuirONeHJBp6dFuuZKvkCfFvBiF0uFmojIQooGtazR9+GvcwoayGMtal1+cvDUnEw2k435GBish01HOn5iyVqQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   oxc-walker@1.1.1:
@@ -7711,13 +7797,13 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rolldown@1.2.6:
-    resolution: {integrity: sha512-vMM4q3aixf46GiF1Kok8jDPFsEpXgFWGjUHXNkNHNm+Y2adXAG2dbX91jkti3i0ZRsOlcmbuzAz1poObSHCmUA==}
+  rolldown@1.2.7:
+    resolution: {integrity: sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rolldown@1.2.7:
-    resolution: {integrity: sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==}
+  rolldown@1.2.8:
+    resolution: {integrity: sha512-Z67nTmhZe7anqnM/EjI392w5i/ANUinjip7QYsOyN37oayduxt3ksdX0hf5OOamkAd53BiIHfbfSzfUmzKFQqQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -8434,6 +8520,12 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  update-browserslist-db@1.3.3:
+    resolution: {integrity: sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -8676,17 +8768,17 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
-  weapp-ide-cli@6.1.2:
-    resolution: {integrity: sha512-mTj6Y7MU2ihvco2zJ27fTgAXLZdK4q45udbywqMun6XyQKBTfg5RbAD5I65+jD8DXGr/BSxdLJbAu3JXDZ6axQ==}
+  weapp-ide-cli@6.1.3:
+    resolution: {integrity: sha512-juR2FJ9QAqyarzBCmcJkronhKua704ioJVfckFVqsO4bC4+A2/Zb69xgtrUxdQSwD/+lY+TFCRLmMsV9lRbzBQ==}
     engines: {node: '>=22'}
     hasBin: true
 
-  weapp-style-injector@1.0.4:
-    resolution: {integrity: sha512-QR1VGXjd9NRtP89fOvqWnz903tppM9Tw+rhGEsjYkbn4+wi7gezA1J36BgiRptJCz3V7LMmj7TaJB80IdNHeAA==}
+  weapp-style-injector@1.0.5:
+    resolution: {integrity: sha512-0ElanhsA9b0BASkAQRHYnnoEWtWwobWJnIVRCstom7dAU7XHbAVNhOu/pVf8mxbevmT5Drhlsc7zoTC0GvJyRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  weapp-tailwindcss@5.5.1:
-    resolution: {integrity: sha512-NL/Wuo3kOHB3ZVyzRj9wtHjuSRtIBzwCnSGAktafy9OBP4xsWJw9kx+B7pY6GPc0h/M++sokHAAUyDUPik3rIA==}
+  weapp-tailwindcss@5.5.3:
+    resolution: {integrity: sha512-hqEi9udcOq9VBR39OKX9wgVOCYPJrRZ6GETzx+CSqI9KratdG0dA9fKtIA3PKMRRNkbFPCUjzazsKQbEdfl7wQ==}
     engines: {node: ^22.18.0 || >=24.11.0}
     peerDependencies:
       '@mpxjs/webpack-plugin': '>=2.0.0 <3.0.0'
@@ -8697,8 +8789,8 @@ packages:
       vite:
         optional: true
 
-  weapp-vite@7.0.4:
-    resolution: {integrity: sha512-CXVkGB+21PuYsSVD5QxTwheMrATNJV55hVAuolSO5oUQF/zGdpYckNP4NN0igmWiDzMyyw5Hmr2BbGW6WJve9w==}
+  weapp-vite@7.1.0:
+    resolution: {integrity: sha512-c2g1aGE2Y6psc06QMi1B3NGe2QTDyCvwq7qhsmpQDgBolsNwlaPut9uRnlxJoi1ntu0ClWfr1EKbjFmkMZsLaw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -8712,8 +8804,8 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  wevu@7.0.4:
-    resolution: {integrity: sha512-q1lSgPi00+fr6xLOuaGpjs2fbststSvQ3NKvCun6D6/2B7tw96q5hBxm7KIJPR/msHl702FhDOsMOTWYX+yyPg==}
+  wevu@7.1.0:
+    resolution: {integrity: sha512-EbYwRe/FJnaJC3LQ6VJ9pENn9wUpmN10AGfrWW/sc++BGpfBREqs68C56ShqufnJsvOeVuBULFUI98StSkoCwg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       miniprogram-api-typings: ^5.0.0
@@ -9176,10 +9268,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.8
 
-  '@babel/parser@8.0.0':
-    dependencies:
-      '@babel/types': 8.0.4
-
   '@babel/parser@8.0.4':
     dependencies:
       '@babel/types': 8.0.4
@@ -9715,7 +9803,7 @@ snapshots:
   '@commitlint/ensure@21.2.0':
     dependencies:
       '@commitlint/types': 21.2.0
-      es-toolkit: 1.51.0
+      es-toolkit: 1.52.0
 
   '@commitlint/execute-rule@21.0.1': {}
 
@@ -9846,317 +9934,325 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/postcss-alpha-function@2.0.11(postcss@8.5.26)':
+  '@csstools/postcss-alpha-function@2.0.11(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-cascade-layers@6.0.0(postcss@8.5.26)':
+  '@csstools/postcss-cascade-layers@6.0.0(postcss@8.5.28)':
     dependencies:
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.5)
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.6)
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  '@csstools/postcss-color-function-display-p3-linear@2.0.10(postcss@8.5.26)':
+  '@csstools/postcss-color-function-display-p3-linear@2.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-color-function@5.0.10(postcss@8.5.26)':
+  '@csstools/postcss-color-function@5.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-color-mix-function@4.0.10(postcss@8.5.26)':
+  '@csstools/postcss-color-mix-function@4.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.10(postcss@8.5.26)':
+  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-container-rule-prelude-list@1.0.1(postcss@8.5.26)':
+  '@csstools/postcss-container-rule-prelude-list@1.0.1(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-content-alt-text@3.0.3(postcss@8.5.26)':
+  '@csstools/postcss-content-alt-text@3.0.3(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-contrast-color-function@3.0.10(postcss@8.5.26)':
+  '@csstools/postcss-contrast-color-function@3.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-exponential-functions@3.0.4(postcss@8.5.26)':
+  '@csstools/postcss-exponential-functions@3.0.4(postcss@8.5.28)':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-fit-tolerance-property@1.0.0(postcss@8.5.26)':
+  '@csstools/postcss-fit-tolerance-property@1.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-font-format-keywords@5.0.0(postcss@8.5.26)':
+  '@csstools/postcss-font-format-keywords@5.0.0(postcss@8.5.28)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-font-width-property@1.0.0(postcss@8.5.26)':
+  '@csstools/postcss-font-width-property@1.0.0(postcss@8.5.28)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-gamut-mapping@3.0.10(postcss@8.5.26)':
+  '@csstools/postcss-gamut-mapping@3.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-gradients-interpolation-method@6.0.10(postcss@8.5.26)':
+  '@csstools/postcss-gradients-interpolation-method@6.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-hwb-function@5.0.10(postcss@8.5.26)':
+  '@csstools/postcss-hwb-function@5.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-ic-unit@5.0.3(postcss@8.5.26)':
+  '@csstools/postcss-ic-unit@5.0.3(postcss@8.5.28)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-image-function@1.0.2(postcss@8.5.26)':
+  '@csstools/postcss-image-function@1.0.2(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-initial@3.0.0(postcss@8.5.26)':
+  '@csstools/postcss-initial@3.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-is-pseudo-class@6.0.0(postcss@8.5.26)':
+  '@csstools/postcss-is-pseudo-class@6.0.0(postcss@8.5.28)':
     dependencies:
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.5)
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.6)
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  '@csstools/postcss-light-dark-function@3.0.3(postcss@8.5.26)':
+  '@csstools/postcss-light-dark-function@3.0.3(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-logical-float-and-clear@4.0.0(postcss@8.5.26)':
+  '@csstools/postcss-logical-float-and-clear@4.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-logical-overflow@3.0.0(postcss@8.5.26)':
+  '@csstools/postcss-logical-overflow@3.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-logical-overscroll-behavior@3.0.0(postcss@8.5.26)':
+  '@csstools/postcss-logical-overscroll-behavior@3.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-logical-resize@4.0.0(postcss@8.5.26)':
+  '@csstools/postcss-logical-resize@4.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-logical-viewport-units@4.0.0(postcss@8.5.26)':
+  '@csstools/postcss-logical-viewport-units@4.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-media-minmax@3.0.4(postcss@8.5.26)':
+  '@csstools/postcss-media-minmax@3.0.4(postcss@8.5.28)':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-media-queries-aspect-ratio-number-values@4.0.0(postcss@8.5.26)':
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@4.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-mixins@1.0.0(postcss@8.5.26)':
+  '@csstools/postcss-mixins@1.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-nested-calc@5.0.0(postcss@8.5.26)':
+  '@csstools/postcss-nested-calc@5.0.0(postcss@8.5.28)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-normalize-display-values@5.0.1(postcss@8.5.26)':
+  '@csstools/postcss-normalize-display-values@5.0.1(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-oklab-function@5.0.10(postcss@8.5.26)':
+  '@csstools/postcss-oklab-function@5.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-position-area-property@2.0.0(postcss@8.5.26)':
+  '@csstools/postcss-position-area-property@2.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-progressive-custom-properties@5.1.2(postcss@8.5.26)':
+  '@csstools/postcss-progressive-custom-properties@5.1.2(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-property-rule-optional-descriptors@1.0.0(postcss@8.5.26)':
+  '@csstools/postcss-property-rule-optional-descriptors@1.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-property-rule-prelude-list@2.0.0(postcss@8.5.26)':
+  '@csstools/postcss-property-rule-prelude-list@2.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-random-function@4.0.0(postcss@8.5.26)':
+  '@csstools/postcss-random-function@4.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-relative-color-syntax@4.0.10(postcss@8.5.26)':
+  '@csstools/postcss-relative-color-syntax@4.0.10(postcss@8.5.28)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  '@csstools/postcss-scope-pseudo-class@5.0.0(postcss@8.5.26)':
+  '@csstools/postcss-scope-pseudo-class@5.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  '@csstools/postcss-sign-functions@2.0.4(postcss@8.5.26)':
+  '@csstools/postcss-sign-functions@2.0.4(postcss@8.5.28)':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-stepped-value-functions@5.0.4(postcss@8.5.26)':
+  '@csstools/postcss-stepped-value-functions@5.0.4(postcss@8.5.28)':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-syntax-descriptor-syntax-production@2.0.0(postcss@8.5.26)':
+  '@csstools/postcss-syntax-descriptor-syntax-production@2.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-system-ui-font-family@2.0.0(postcss@8.5.26)':
+  '@csstools/postcss-system-ui-font-family@2.0.0(postcss@8.5.28)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-text-decoration-shorthand@5.0.5(postcss@8.5.26)':
+  '@csstools/postcss-text-decoration-shorthand@5.0.5(postcss@8.5.28)':
     dependencies:
       '@csstools/color-helpers': 6.1.1
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-trigonometric-functions@5.0.4(postcss@8.5.26)':
+  '@csstools/postcss-trigonometric-functions@5.0.4(postcss@8.5.28)':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  '@csstools/postcss-unset-value@5.0.0(postcss@8.5.26)':
+  '@csstools/postcss-unset-value@5.0.0(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
   '@csstools/selector-resolve-nested@4.0.1(postcss-selector-parser@7.1.5)':
     dependencies:
       postcss-selector-parser: 7.1.5
 
+  '@csstools/selector-resolve-nested@4.0.1(postcss-selector-parser@7.1.6)':
+    dependencies:
+      postcss-selector-parser: 7.1.6
+
   '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.5)':
     dependencies:
       postcss-selector-parser: 7.1.5
 
-  '@csstools/utilities@3.0.0(postcss@8.5.26)':
+  '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.6)':
     dependencies:
-      postcss: 8.5.26
+      postcss-selector-parser: 7.1.6
+
+  '@csstools/utilities@3.0.0(postcss@8.5.28)':
+    dependencies:
+      postcss: 8.5.28
 
   '@docsearch/css@4.7.0': {}
 
@@ -10919,69 +11015,69 @@ snapshots:
 
   '@ota-meshi/ast-token-store@0.3.0': {}
 
-  '@oxc-parser/binding-android-arm-eabi@0.148.0':
+  '@oxc-parser/binding-android-arm-eabi@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm64@0.148.0':
+  '@oxc-parser/binding-android-arm64@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.148.0':
+  '@oxc-parser/binding-darwin-arm64@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.148.0':
+  '@oxc-parser/binding-darwin-x64@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.148.0':
+  '@oxc-parser/binding-freebsd-x64@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.148.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.148.0':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.148.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.148.0':
+  '@oxc-parser/binding-linux-arm64-musl@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.148.0':
+  '@oxc-parser/binding-linux-ppc64-gnu@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.148.0':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.148.0':
+  '@oxc-parser/binding-linux-riscv64-musl@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.148.0':
+  '@oxc-parser/binding-linux-s390x-gnu@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.148.0':
+  '@oxc-parser/binding-linux-x64-gnu@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-musl@0.148.0':
+  '@oxc-parser/binding-linux-x64-musl@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-openharmony-arm64@0.148.0':
+  '@oxc-parser/binding-openharmony-arm64@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.148.0':
+  '@oxc-parser/binding-win32-arm64-msvc@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.148.0':
+  '@oxc-parser/binding-win32-ia32-msvc@0.149.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.148.0':
+  '@oxc-parser/binding-win32-x64-msvc@0.149.0':
     optional: true
 
   '@oxc-project/types@0.138.0': {}
 
-  '@oxc-project/types@0.147.0': {}
-
   '@oxc-project/types@0.148.0': {}
 
+  '@oxc-project/types@0.149.0': {}
+
   '@oxfmt/binding-android-arm-eabi@0.35.0':
     optional: true
 
@@ -12186,118 +12282,118 @@ snapshots:
       '@reflink/reflink-win32-arm64-msvc': 0.1.19
       '@reflink/reflink-win32-x64-msvc': 0.1.19
 
-  '@rolldown/binding-android-arm-eabi@1.2.6':
+  '@rolldown/binding-android-arm-eabi@1.2.7':
     optional: true
 
-  '@rolldown/binding-android-arm-eabi@1.2.7':
+  '@rolldown/binding-android-arm-eabi@1.2.8':
     optional: true
 
   '@rolldown/binding-android-arm64@1.1.4':
     optional: true
 
-  '@rolldown/binding-android-arm64@1.2.6':
+  '@rolldown/binding-android-arm64@1.2.7':
     optional: true
 
-  '@rolldown/binding-android-arm64@1.2.7':
+  '@rolldown/binding-android-arm64@1.2.8':
     optional: true
 
   '@rolldown/binding-darwin-arm64@1.1.4':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.2.6':
+  '@rolldown/binding-darwin-arm64@1.2.7':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.2.7':
+  '@rolldown/binding-darwin-arm64@1.2.8':
     optional: true
 
   '@rolldown/binding-darwin-x64@1.1.4':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.2.6':
+  '@rolldown/binding-darwin-x64@1.2.7':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.2.7':
+  '@rolldown/binding-darwin-x64@1.2.8':
     optional: true
 
   '@rolldown/binding-freebsd-x64@1.1.4':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.2.6':
+  '@rolldown/binding-freebsd-x64@1.2.7':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.2.7':
+  '@rolldown/binding-freebsd-x64@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-arm-gnueabihf@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.6':
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.7':
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-arm64-gnu@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.2.6':
+  '@rolldown/binding-linux-arm64-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.2.7':
+  '@rolldown/binding-linux-arm64-gnu@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-arm64-musl@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.2.6':
+  '@rolldown/binding-linux-arm64-musl@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.2.7':
+  '@rolldown/binding-linux-arm64-musl@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-ppc64-gnu@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.2.6':
+  '@rolldown/binding-linux-ppc64-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.2.7':
+  '@rolldown/binding-linux-ppc64-gnu@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-s390x-gnu@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.2.6':
+  '@rolldown/binding-linux-s390x-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.2.7':
+  '@rolldown/binding-linux-s390x-gnu@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-x64-gnu@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.2.6':
+  '@rolldown/binding-linux-x64-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.2.7':
+  '@rolldown/binding-linux-x64-gnu@1.2.8':
     optional: true
 
   '@rolldown/binding-linux-x64-musl@1.1.4':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.2.6':
+  '@rolldown/binding-linux-x64-musl@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.2.7':
+  '@rolldown/binding-linux-x64-musl@1.2.8':
     optional: true
 
   '@rolldown/binding-openharmony-arm64@1.1.4':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.2.6':
+  '@rolldown/binding-openharmony-arm64@1.2.7':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.2.7':
+  '@rolldown/binding-openharmony-arm64@1.2.8':
     optional: true
 
   '@rolldown/binding-wasm32-wasi@1.1.4':
@@ -12310,19 +12406,19 @@ snapshots:
   '@rolldown/binding-win32-arm64-msvc@1.1.4':
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.2.6':
+  '@rolldown/binding-win32-arm64-msvc@1.2.7':
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.2.7':
+  '@rolldown/binding-win32-arm64-msvc@1.2.8':
     optional: true
 
   '@rolldown/binding-win32-x64-msvc@1.1.4':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.2.6':
+  '@rolldown/binding-win32-x64-msvc@1.2.7':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.2.7':
+  '@rolldown/binding-win32-x64-msvc@1.2.8':
     optional: true
 
   '@rolldown/pluginutils@1.0.1': {}
@@ -12418,59 +12514,59 @@ snapshots:
       estraverse: 5.3.0
       picomatch: 4.0.7
 
-  '@swc/core-darwin-arm64@1.16.1':
+  '@swc/core-darwin-arm64@1.16.2':
     optional: true
 
-  '@swc/core-darwin-x64@1.16.1':
+  '@swc/core-darwin-x64@1.16.2':
     optional: true
 
-  '@swc/core-linux-arm-gnueabihf@1.16.1':
+  '@swc/core-linux-arm-gnueabihf@1.16.2':
     optional: true
 
-  '@swc/core-linux-arm64-gnu@1.16.1':
+  '@swc/core-linux-arm64-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-arm64-musl@1.16.1':
+  '@swc/core-linux-arm64-musl@1.16.2':
     optional: true
 
-  '@swc/core-linux-ppc64-gnu@1.16.1':
+  '@swc/core-linux-ppc64-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-s390x-gnu@1.16.1':
+  '@swc/core-linux-s390x-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-x64-gnu@1.16.1':
+  '@swc/core-linux-x64-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-x64-musl@1.16.1':
+  '@swc/core-linux-x64-musl@1.16.2':
     optional: true
 
-  '@swc/core-win32-arm64-msvc@1.16.1':
+  '@swc/core-win32-arm64-msvc@1.16.2':
     optional: true
 
-  '@swc/core-win32-ia32-msvc@1.16.1':
+  '@swc/core-win32-ia32-msvc@1.16.2':
     optional: true
 
-  '@swc/core-win32-x64-msvc@1.16.1':
+  '@swc/core-win32-x64-msvc@1.16.2':
     optional: true
 
-  '@swc/core@1.16.1':
+  '@swc/core@1.16.2':
     dependencies:
       '@swc/counter': 0.1.3
       '@swc/types': 0.1.28
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.16.1
-      '@swc/core-darwin-x64': 1.16.1
-      '@swc/core-linux-arm-gnueabihf': 1.16.1
-      '@swc/core-linux-arm64-gnu': 1.16.1
-      '@swc/core-linux-arm64-musl': 1.16.1
-      '@swc/core-linux-ppc64-gnu': 1.16.1
-      '@swc/core-linux-s390x-gnu': 1.16.1
-      '@swc/core-linux-x64-gnu': 1.16.1
-      '@swc/core-linux-x64-musl': 1.16.1
-      '@swc/core-win32-arm64-msvc': 1.16.1
-      '@swc/core-win32-ia32-msvc': 1.16.1
-      '@swc/core-win32-x64-msvc': 1.16.1
+      '@swc/core-darwin-arm64': 1.16.2
+      '@swc/core-darwin-x64': 1.16.2
+      '@swc/core-linux-arm-gnueabihf': 1.16.2
+      '@swc/core-linux-arm64-gnu': 1.16.2
+      '@swc/core-linux-arm64-musl': 1.16.2
+      '@swc/core-linux-ppc64-gnu': 1.16.2
+      '@swc/core-linux-s390x-gnu': 1.16.2
+      '@swc/core-linux-x64-gnu': 1.16.2
+      '@swc/core-linux-x64-musl': 1.16.2
+      '@swc/core-win32-arm64-msvc': 1.16.2
+      '@swc/core-win32-ia32-msvc': 1.16.2
+      '@swc/core-win32-x64-msvc': 1.16.2
     optional: true
 
   '@swc/counter@0.1.3':
@@ -12487,7 +12583,7 @@ snapshots:
       '@tailwindcss/oxide': 4.3.3
       micromatch: 4.0.8
       pathe: 2.0.3
-      postcss: 8.5.26
+      postcss: 8.5.28
     optionalDependencies:
       tailwindcss: 4.3.3
 
@@ -13000,7 +13096,7 @@ snapshots:
     dependencies:
       vue: 3.5.42(typescript@6.0.3)
 
-  '@weapp-core/api@0.3.0(vitest@4.1.11)':
+  '@weapp-core/api@0.3.1(vitest@4.1.11)':
     dependencies:
       '@douyin-microapp/typings': 1.3.1
       '@mini-types/alipay': 3.0.14
@@ -13008,16 +13104,16 @@ snapshots:
     optionalDependencies:
       vitest: 4.1.11(@types/node@26.1.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
 
-  '@weapp-core/constants@0.2.1': {}
+  '@weapp-core/constants@0.2.2': {}
 
   '@weapp-core/escape@8.0.0': {}
 
-  '@weapp-core/init@6.0.17':
+  '@weapp-core/init@6.0.18':
     dependencies:
-      '@weapp-core/logger': 3.1.1
+      '@weapp-core/logger': 3.1.2
       '@weapp-core/shared': 3.2.1
 
-  '@weapp-core/logger@3.1.1':
+  '@weapp-core/logger@3.1.2':
     dependencies:
       consola: 3.4.2
       picocolors: 1.1.1
@@ -13039,33 +13135,33 @@ snapshots:
       '@weapp-tailwindcss/runtime': 0.1.8
       tailwind-merge: 3.6.0
 
-  '@weapp-tailwindcss/postcss-calc@1.0.5(postcss@8.5.26)':
+  '@weapp-tailwindcss/postcss-calc@1.0.6(postcss@8.5.28)':
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
       postcss-value-parser: 4.2.0
 
-  '@weapp-tailwindcss/postcss@3.3.2(jiti@2.7.0)(tailwindcss@4.3.3)(yaml@2.9.0)':
+  '@weapp-tailwindcss/postcss@3.3.3(jiti@2.7.0)(tailwindcss@4.3.3)(yaml@2.9.0)':
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@tailwindcss-mangle/engine': 0.2.0(tailwindcss@4.3.3)
       '@weapp-core/escape': 8.0.0
-      '@weapp-tailwindcss/postcss-calc': 1.0.5(postcss@8.5.26)
+      '@weapp-tailwindcss/postcss-calc': 1.0.6(postcss@8.5.28)
       '@weapp-tailwindcss/shared': 2.0.3
-      autoprefixer: 10.5.4(postcss@8.5.26)
+      autoprefixer: 10.5.6(postcss@8.5.28)
       es-toolkit: 1.52.0
       lru-cache: 11.5.2
       micromatch: 4.0.8
-      postcss: 8.5.26
-      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.26)(yaml@2.9.0)
-      postcss-preset-env: 11.5.1(postcss@8.5.26)
-      postcss-pxtrans: 1.0.4(postcss@8.5.26)
-      postcss-rem-to-responsive-pixel: 7.0.5(postcss@8.5.26)
-      postcss-rule-unit-converter: 0.2.3(postcss@8.5.26)
-      postcss-scss: 4.0.9(postcss@8.5.26)
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.28)(yaml@2.9.0)
+      postcss-preset-env: 11.5.1(postcss@8.5.28)
+      postcss-pxtrans: 1.0.4(postcss@8.5.28)
+      postcss-rem-to-responsive-pixel: 7.0.5(postcss@8.5.28)
+      postcss-rule-unit-converter: 0.2.3(postcss@8.5.28)
+      postcss-scss: 4.0.9(postcss@8.5.28)
+      postcss-selector-parser: 7.1.6
       postcss-value-parser: 4.2.0
       tailwindcss-config: 2.0.4
     transitivePeerDependencies:
@@ -13090,23 +13186,37 @@ snapshots:
       pathe: 2.0.3
       set-value: 4.1.0
 
-  '@weapp-vite/ast@7.0.4(rolldown@1.2.7)':
+  '@weapp-vite/ast@7.1.0(rolldown@1.2.7)':
     dependencies:
       '@babel/core': 8.0.1
       '@babel/generator': 8.0.0
       '@babel/parser': 8.0.4
       '@babel/traverse': 8.0.4
       '@babel/types': 8.0.4
-      '@oxc-project/types': 0.148.0
+      '@oxc-project/types': 0.149.0
       '@weapp-core/shared': 3.2.1
-      oxc-parser: 0.148.0
-      oxc-walker: 1.1.1(@oxc-project/types@0.148.0)(oxc-parser@0.148.0)(rolldown@1.2.7)
+      oxc-parser: 0.149.0
+      oxc-walker: 1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.7)
     transitivePeerDependencies:
       - rolldown
 
-  '@weapp-vite/devtools-runtime@0.4.17(@types/node@26.1.0)':
+  '@weapp-vite/ast@7.1.0(rolldown@1.2.8)':
     dependencies:
-      '@weapp-vite/miniprogram-automator': 1.2.16(@types/node@26.1.0)
+      '@babel/core': 8.0.1
+      '@babel/generator': 8.0.0
+      '@babel/parser': 8.0.4
+      '@babel/traverse': 8.0.4
+      '@babel/types': 8.0.4
+      '@oxc-project/types': 0.149.0
+      '@weapp-core/shared': 3.2.1
+      oxc-parser: 0.149.0
+      oxc-walker: 1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.8)
+    transitivePeerDependencies:
+      - rolldown
+
+  '@weapp-vite/devtools-runtime@0.4.18(@types/node@26.1.0)':
+    dependencies:
+      '@weapp-vite/miniprogram-automator': 1.2.17(@types/node@26.1.0)
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -13120,17 +13230,17 @@ snapshots:
     optionalDependencies:
       eslint: 10.9.1(jiti@2.7.0)(supports-color@10.2.2)
 
-  '@weapp-vite/i18n@0.2.1(miniprogram-api-typings@5.2.3)':
+  '@weapp-vite/i18n@0.2.2(miniprogram-api-typings@5.2.3)':
     dependencies:
-      '@weapp-core/constants': 0.2.1
+      '@weapp-core/constants': 0.2.2
     optionalDependencies:
       miniprogram-api-typings: 5.2.3
 
-  '@weapp-vite/mcp@1.5.1(@types/node@26.1.0)':
+  '@weapp-vite/mcp@1.5.2(@types/node@26.1.0)':
     dependencies:
       '@modelcontextprotocol/node': 2.0.0(@modelcontextprotocol/server@2.0.0)
       '@modelcontextprotocol/server': 2.0.0
-      '@weapp-vite/devtools-runtime': 0.4.17(@types/node@26.1.0)
+      '@weapp-vite/devtools-runtime': 0.4.18(@types/node@26.1.0)
       zod: 4.5.4
     transitivePeerDependencies:
       - '@types/node'
@@ -13138,7 +13248,7 @@ snapshots:
       - hono
       - utf-8-validate
 
-  '@weapp-vite/miniprogram-automator@1.2.16(@types/node@26.1.0)':
+  '@weapp-vite/miniprogram-automator@1.2.17(@types/node@26.1.0)':
     dependencies:
       '@weapp-vite/qr': 1.1.2(@types/node@26.1.0)
       obug: 2.1.4
@@ -13158,12 +13268,12 @@ snapshots:
     dependencies:
       '@weapp-core/schematics': 6.2.2
 
-  '@weapp-vite/web@1.4.21(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(typescript@6.0.3)(vitest@4.1.11)':
+  '@weapp-vite/web@1.5.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(typescript@6.0.3)(vitest@4.1.11)':
     dependencies:
       '@babel/parser': 8.0.4
       '@babel/traverse': 8.0.4
       '@babel/types': 8.0.4
-      '@weapp-core/constants': 0.2.1
+      '@weapp-core/constants': 0.2.2
       '@weapp-core/shared': 3.2.1
       domhandler: 6.0.1
       esbuild: 0.28.2
@@ -13173,9 +13283,9 @@ snapshots:
       pathe: 2.0.3
       postcss: 8.5.28
       postcss-selector-parser: 7.1.6
-      rolldown: 1.2.7
-      rolldown-require: 2.0.28(rolldown@1.2.7)
-      wevu: 7.0.4(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
+      rolldown: 1.2.8
+      rolldown-require: 2.0.28(rolldown@1.2.8)
+      wevu: 7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.8)(typescript@6.0.3)(vitest@4.1.11)
     transitivePeerDependencies:
       - '@babel/core'
       - miniprogram-api-typings
@@ -13183,21 +13293,22 @@ snapshots:
       - typescript
       - vitest
 
-  '@wevu/api@0.3.0(vitest@4.1.11)':
+  '@wevu/api@0.3.1(vitest@4.1.11)':
     dependencies:
-      '@weapp-core/api': 0.3.0(vitest@4.1.11)
+      '@weapp-core/api': 0.3.1(vitest@4.1.11)
     optionalDependencies:
       vitest: 4.1.11(@types/node@26.1.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
 
-  '@wevu/compiler@7.0.4(@babel/core@8.0.1)(rolldown@1.2.7)(typescript@6.0.3)':
+  '@wevu/compiler@7.1.0(@babel/core@8.0.1)(rolldown@1.2.7)(typescript@6.0.3)':
     dependencies:
       '@jridgewell/remapping': 2.3.5
+      '@jridgewell/trace-mapping': 0.3.31
       '@vue/babel-plugin-jsx': 3.0.0(@babel/core@8.0.1)
       '@vue/compiler-core': 3.5.42
       '@vue/compiler-dom': 3.5.42
-      '@weapp-core/constants': 0.2.1
+      '@weapp-core/constants': 0.2.2
       '@weapp-core/shared': 3.2.1
-      '@weapp-vite/ast': 7.0.4(rolldown@1.2.7)
+      '@weapp-vite/ast': 7.1.0(rolldown@1.2.7)
       comment-json: 5.0.0
       lru-cache: 11.5.2
       magic-string: 1.2.3
@@ -13213,10 +13324,35 @@ snapshots:
       - rollup
       - typescript
 
-  '@wevu/web-apis@1.2.40(vitest@4.1.11)':
+  '@wevu/compiler@7.1.0(@babel/core@8.0.1)(rolldown@1.2.8)(typescript@6.0.3)':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/trace-mapping': 0.3.31
+      '@vue/babel-plugin-jsx': 3.0.0(@babel/core@8.0.1)
+      '@vue/compiler-core': 3.5.42
+      '@vue/compiler-dom': 3.5.42
+      '@weapp-core/constants': 0.2.2
+      '@weapp-core/shared': 3.2.1
+      '@weapp-vite/ast': 7.1.0(rolldown@1.2.8)
+      comment-json: 5.0.0
+      lru-cache: 11.5.2
+      magic-string: 1.2.3
+      merge: 2.1.1
+      pathe: 2.0.3
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
+      rolldown-require: 2.0.28(rolldown@1.2.8)
+      vue: 3.5.42(typescript@6.0.3)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - rolldown
+      - rollup
+      - typescript
+
+  '@wevu/web-apis@1.2.41(vitest@4.1.11)':
     dependencies:
-      '@weapp-core/constants': 0.2.1
-      '@wevu/api': 0.3.0(vitest@4.1.11)
+      '@weapp-core/constants': 0.2.2
+      '@wevu/api': 0.3.1(vitest@4.1.11)
     transitivePeerDependencies:
       - vitest
 
@@ -13447,13 +13583,22 @@ snapshots:
 
   astral-regex@2.0.0: {}
 
-  autoprefixer@10.5.4(postcss@8.5.26):
+  autoprefixer@10.5.4(postcss@8.5.28):
     dependencies:
       browserslist: 4.28.8
       caniuse-lite: 1.0.30001810
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.26
+      postcss: 8.5.28
+      postcss-value-parser: 4.2.0
+
+  autoprefixer@10.5.6(postcss@8.5.28):
+    dependencies:
+      browserslist: 4.28.9
+      caniuse-lite: 1.0.30001810
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
   babel-plugin-polyfill-corejs3@1.0.0(@babel/core@8.0.1):
@@ -13468,6 +13613,8 @@ snapshots:
 
   baseline-browser-mapping@2.11.19: {}
 
+  baseline-browser-mapping@2.11.22: {}
+
   better-path-resolve@1.0.0:
     dependencies:
       is-windows: 1.0.2
@@ -13529,6 +13676,14 @@ snapshots:
       node-releases: 2.0.53
       update-browserslist-db: 1.3.1(browserslist@4.28.8)
 
+  browserslist@4.28.9:
+    dependencies:
+      baseline-browser-mapping: 2.11.22
+      caniuse-lite: 1.0.30001810
+      electron-to-chromium: 1.5.427
+      node-releases: 2.0.55
+      update-browserslist-db: 1.3.3(browserslist@4.28.9)
+
   builtin-modules@5.3.0: {}
 
   builtins@5.1.0:
@@ -13767,23 +13922,23 @@ snapshots:
     dependencies:
       type-fest: 1.4.0
 
-  css-blank-pseudo@8.0.2(postcss@8.5.26):
+  css-blank-pseudo@8.0.2(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
   css-functions-list@3.3.3: {}
 
-  css-has-pseudo@8.0.1(postcss@8.5.26):
+  css-has-pseudo@8.0.1(postcss@8.5.28):
     dependencies:
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.5)
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.6)
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
       postcss-value-parser: 4.2.0
 
-  css-prefers-color-scheme@11.0.1(postcss@8.5.26):
+  css-prefers-color-scheme@11.0.1(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
   css-tree@3.2.1:
     dependencies:
@@ -13915,6 +14070,8 @@ snapshots:
 
   electron-to-chromium@1.5.415: {}
 
+  electron-to-chromium@1.5.427: {}
+
   emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
@@ -14281,7 +14438,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/utils': 8.68.0(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@6.0.3)
       eslint: 10.9.1(jiti@2.7.0)(supports-color@10.2.2)
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-nested: 7.0.2(postcss@8.5.26)
       synckit: 0.11.13
       tailwind-api-utils: 1.0.3(tailwindcss@4.3.3)
@@ -14338,7 +14495,7 @@ snapshots:
       eslint: 10.9.1(jiti@2.7.0)(supports-color@10.2.2)
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 7.1.5
+      postcss-selector-parser: 7.1.6
       semver: 7.8.5
       vue-eslint-parser: 10.4.1(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)
       xml-name-validator: 5.0.0
@@ -14665,6 +14822,16 @@ snapshots:
 
   github-slugger@2.0.0: {}
 
+  glass-easel-miniprogram-adapter@1.1.0(glass-easel@1.1.0):
+    dependencies:
+      glass-easel: 1.1.0
+
+  glass-easel-stylesheet-compiler@1.1.0: {}
+
+  glass-easel-template-compiler@1.1.0: {}
+
+  glass-easel@1.1.0: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -15894,6 +16061,8 @@ snapshots:
 
   node-releases@2.0.53: {}
 
+  node-releases@2.0.55: {}
+
   nopt@1.0.10:
     dependencies:
       abbrev: 1.1.1
@@ -15977,36 +16146,42 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  oxc-parser@0.148.0:
+  oxc-parser@0.149.0:
     dependencies:
-      '@oxc-project/types': 0.148.0
+      '@oxc-project/types': 0.149.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.148.0
-      '@oxc-parser/binding-android-arm64': 0.148.0
-      '@oxc-parser/binding-darwin-arm64': 0.148.0
-      '@oxc-parser/binding-darwin-x64': 0.148.0
-      '@oxc-parser/binding-freebsd-x64': 0.148.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.148.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.148.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.148.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.148.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.148.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.148.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.148.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.148.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.148.0
-      '@oxc-parser/binding-linux-x64-musl': 0.148.0
-      '@oxc-parser/binding-openharmony-arm64': 0.148.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.148.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.148.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.148.0
-
-  oxc-walker@1.1.1(@oxc-project/types@0.148.0)(oxc-parser@0.148.0)(rolldown@1.2.7):
+      '@oxc-parser/binding-android-arm-eabi': 0.149.0
+      '@oxc-parser/binding-android-arm64': 0.149.0
+      '@oxc-parser/binding-darwin-arm64': 0.149.0
+      '@oxc-parser/binding-darwin-x64': 0.149.0
+      '@oxc-parser/binding-freebsd-x64': 0.149.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.149.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.149.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.149.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.149.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.149.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.149.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.149.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.149.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.149.0
+      '@oxc-parser/binding-linux-x64-musl': 0.149.0
+      '@oxc-parser/binding-openharmony-arm64': 0.149.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.149.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.149.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.149.0
+
+  oxc-walker@1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.7):
     optionalDependencies:
-      '@oxc-project/types': 0.148.0
-      oxc-parser: 0.148.0
+      '@oxc-project/types': 0.149.0
+      oxc-parser: 0.149.0
       rolldown: 1.2.7
 
+  oxc-walker@1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.8):
+    optionalDependencies:
+      '@oxc-project/types': 0.149.0
+      oxc-parser: 0.149.0
+      rolldown: 1.2.8
+
   oxfmt@0.35.0:
     dependencies:
       tinypool: 2.1.0
@@ -16236,91 +16411,91 @@ snapshots:
     dependencies:
       yaml: 2.9.0
 
-  postcss-attribute-case-insensitive@8.0.0(postcss@8.5.26):
+  postcss-attribute-case-insensitive@8.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-clamp@4.1.0(postcss@8.5.26):
+  postcss-clamp@4.1.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-color-functional-notation@8.0.10(postcss@8.5.26):
+  postcss-color-functional-notation@8.0.10(postcss@8.5.28):
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  postcss-color-hex-alpha@11.0.0(postcss@8.5.26):
+  postcss-color-hex-alpha@11.0.0(postcss@8.5.28):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-color-rebeccapurple@11.0.0(postcss@8.5.26):
+  postcss-color-rebeccapurple@11.0.0(postcss@8.5.28):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-custom-media@12.0.1(postcss@8.5.26):
+  postcss-custom-media@12.0.1(postcss@8.5.28):
     dependencies:
       '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
       '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  postcss-custom-properties@15.0.1(postcss@8.5.26):
+  postcss-custom-properties@15.0.1(postcss@8.5.28):
     dependencies:
       '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-custom-selectors@9.0.1(postcss@8.5.26):
+  postcss-custom-selectors@9.0.1(postcss@8.5.28):
     dependencies:
       '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-dir-pseudo-class@10.0.0(postcss@8.5.26):
+  postcss-dir-pseudo-class@10.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-double-position-gradients@7.0.3(postcss@8.5.26):
+  postcss-double-position-gradients@7.0.3(postcss@8.5.28):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-focus-visible@11.0.0(postcss@8.5.26):
+  postcss-focus-visible@11.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-focus-within@10.0.1(postcss@8.5.26):
+  postcss-focus-within@10.0.1(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-font-variant@5.0.0(postcss@8.5.26):
+  postcss-font-variant@5.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  postcss-gap-properties@7.0.0(postcss@8.5.26):
+  postcss-gap-properties@7.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
   postcss-html@2.0.0(postcss@8.5.28):
     dependencies:
@@ -16329,32 +16504,32 @@ snapshots:
       postcss: 8.5.28
       postcss-safe-parser: 7.0.1(postcss@8.5.28)
 
-  postcss-image-set-function@8.0.0(postcss@8.5.26):
+  postcss-image-set-function@8.0.0(postcss@8.5.28):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-lab-function@8.0.10(postcss@8.5.26):
+  postcss-lab-function@8.0.10(postcss@8.5.28):
     dependencies:
       '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/utilities': 3.0.0(postcss@8.5.26)
-      postcss: 8.5.26
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/utilities': 3.0.0(postcss@8.5.28)
+      postcss: 8.5.28
 
-  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.26)(yaml@2.9.0):
+  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.28)(yaml@2.9.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.7.0
-      postcss: 8.5.26
+      postcss: 8.5.28
       yaml: 2.9.0
 
-  postcss-logical@9.0.0(postcss@8.5.26):
+  postcss-logical@9.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
   postcss-media-query-parser@0.2.3: {}
@@ -16362,144 +16537,144 @@ snapshots:
   postcss-nested@7.0.2(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss-selector-parser: 7.1.6
 
-  postcss-nesting@14.0.1(postcss@8.5.26):
+  postcss-nesting@14.0.1(postcss@8.5.28):
     dependencies:
-      '@csstools/selector-resolve-nested': 4.0.1(postcss-selector-parser@7.1.5)
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.5)
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      '@csstools/selector-resolve-nested': 4.0.1(postcss-selector-parser@7.1.6)
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.6)
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-opacity-percentage@3.0.0(postcss@8.5.26):
+  postcss-opacity-percentage@3.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  postcss-overflow-shorthand@7.0.0(postcss@8.5.26):
+  postcss-overflow-shorthand@7.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-page-break@3.0.4(postcss@8.5.26):
+  postcss-page-break@3.0.4(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  postcss-place@11.0.0(postcss@8.5.26):
+  postcss-place@11.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-value-parser: 4.2.0
 
-  postcss-plugin-shared@1.1.5(postcss@8.5.26):
+  postcss-plugin-shared@1.1.5(postcss@8.5.28):
     dependencies:
       defu: 6.1.7
-      postcss: 8.5.26
+      postcss: 8.5.28
 
-  postcss-preset-env@11.5.1(postcss@8.5.26):
-    dependencies:
-      '@csstools/postcss-alpha-function': 2.0.11(postcss@8.5.26)
-      '@csstools/postcss-cascade-layers': 6.0.0(postcss@8.5.26)
-      '@csstools/postcss-color-function': 5.0.10(postcss@8.5.26)
-      '@csstools/postcss-color-function-display-p3-linear': 2.0.10(postcss@8.5.26)
-      '@csstools/postcss-color-mix-function': 4.0.10(postcss@8.5.26)
-      '@csstools/postcss-color-mix-variadic-function-arguments': 2.0.10(postcss@8.5.26)
-      '@csstools/postcss-container-rule-prelude-list': 1.0.1(postcss@8.5.26)
-      '@csstools/postcss-content-alt-text': 3.0.3(postcss@8.5.26)
-      '@csstools/postcss-contrast-color-function': 3.0.10(postcss@8.5.26)
-      '@csstools/postcss-exponential-functions': 3.0.4(postcss@8.5.26)
-      '@csstools/postcss-fit-tolerance-property': 1.0.0(postcss@8.5.26)
-      '@csstools/postcss-font-format-keywords': 5.0.0(postcss@8.5.26)
-      '@csstools/postcss-font-width-property': 1.0.0(postcss@8.5.26)
-      '@csstools/postcss-gamut-mapping': 3.0.10(postcss@8.5.26)
-      '@csstools/postcss-gradients-interpolation-method': 6.0.10(postcss@8.5.26)
-      '@csstools/postcss-hwb-function': 5.0.10(postcss@8.5.26)
-      '@csstools/postcss-ic-unit': 5.0.3(postcss@8.5.26)
-      '@csstools/postcss-image-function': 1.0.2(postcss@8.5.26)
-      '@csstools/postcss-initial': 3.0.0(postcss@8.5.26)
-      '@csstools/postcss-is-pseudo-class': 6.0.0(postcss@8.5.26)
-      '@csstools/postcss-light-dark-function': 3.0.3(postcss@8.5.26)
-      '@csstools/postcss-logical-float-and-clear': 4.0.0(postcss@8.5.26)
-      '@csstools/postcss-logical-overflow': 3.0.0(postcss@8.5.26)
-      '@csstools/postcss-logical-overscroll-behavior': 3.0.0(postcss@8.5.26)
-      '@csstools/postcss-logical-resize': 4.0.0(postcss@8.5.26)
-      '@csstools/postcss-logical-viewport-units': 4.0.0(postcss@8.5.26)
-      '@csstools/postcss-media-minmax': 3.0.4(postcss@8.5.26)
-      '@csstools/postcss-media-queries-aspect-ratio-number-values': 4.0.0(postcss@8.5.26)
-      '@csstools/postcss-mixins': 1.0.0(postcss@8.5.26)
-      '@csstools/postcss-nested-calc': 5.0.0(postcss@8.5.26)
-      '@csstools/postcss-normalize-display-values': 5.0.1(postcss@8.5.26)
-      '@csstools/postcss-oklab-function': 5.0.10(postcss@8.5.26)
-      '@csstools/postcss-position-area-property': 2.0.0(postcss@8.5.26)
-      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.26)
-      '@csstools/postcss-property-rule-optional-descriptors': 1.0.0(postcss@8.5.26)
-      '@csstools/postcss-property-rule-prelude-list': 2.0.0(postcss@8.5.26)
-      '@csstools/postcss-random-function': 4.0.0(postcss@8.5.26)
-      '@csstools/postcss-relative-color-syntax': 4.0.10(postcss@8.5.26)
-      '@csstools/postcss-scope-pseudo-class': 5.0.0(postcss@8.5.26)
-      '@csstools/postcss-sign-functions': 2.0.4(postcss@8.5.26)
-      '@csstools/postcss-stepped-value-functions': 5.0.4(postcss@8.5.26)
-      '@csstools/postcss-syntax-descriptor-syntax-production': 2.0.0(postcss@8.5.26)
-      '@csstools/postcss-system-ui-font-family': 2.0.0(postcss@8.5.26)
-      '@csstools/postcss-text-decoration-shorthand': 5.0.5(postcss@8.5.26)
-      '@csstools/postcss-trigonometric-functions': 5.0.4(postcss@8.5.26)
-      '@csstools/postcss-unset-value': 5.0.0(postcss@8.5.26)
-      autoprefixer: 10.5.4(postcss@8.5.26)
+  postcss-preset-env@11.5.1(postcss@8.5.28):
+    dependencies:
+      '@csstools/postcss-alpha-function': 2.0.11(postcss@8.5.28)
+      '@csstools/postcss-cascade-layers': 6.0.0(postcss@8.5.28)
+      '@csstools/postcss-color-function': 5.0.10(postcss@8.5.28)
+      '@csstools/postcss-color-function-display-p3-linear': 2.0.10(postcss@8.5.28)
+      '@csstools/postcss-color-mix-function': 4.0.10(postcss@8.5.28)
+      '@csstools/postcss-color-mix-variadic-function-arguments': 2.0.10(postcss@8.5.28)
+      '@csstools/postcss-container-rule-prelude-list': 1.0.1(postcss@8.5.28)
+      '@csstools/postcss-content-alt-text': 3.0.3(postcss@8.5.28)
+      '@csstools/postcss-contrast-color-function': 3.0.10(postcss@8.5.28)
+      '@csstools/postcss-exponential-functions': 3.0.4(postcss@8.5.28)
+      '@csstools/postcss-fit-tolerance-property': 1.0.0(postcss@8.5.28)
+      '@csstools/postcss-font-format-keywords': 5.0.0(postcss@8.5.28)
+      '@csstools/postcss-font-width-property': 1.0.0(postcss@8.5.28)
+      '@csstools/postcss-gamut-mapping': 3.0.10(postcss@8.5.28)
+      '@csstools/postcss-gradients-interpolation-method': 6.0.10(postcss@8.5.28)
+      '@csstools/postcss-hwb-function': 5.0.10(postcss@8.5.28)
+      '@csstools/postcss-ic-unit': 5.0.3(postcss@8.5.28)
+      '@csstools/postcss-image-function': 1.0.2(postcss@8.5.28)
+      '@csstools/postcss-initial': 3.0.0(postcss@8.5.28)
+      '@csstools/postcss-is-pseudo-class': 6.0.0(postcss@8.5.28)
+      '@csstools/postcss-light-dark-function': 3.0.3(postcss@8.5.28)
+      '@csstools/postcss-logical-float-and-clear': 4.0.0(postcss@8.5.28)
+      '@csstools/postcss-logical-overflow': 3.0.0(postcss@8.5.28)
+      '@csstools/postcss-logical-overscroll-behavior': 3.0.0(postcss@8.5.28)
+      '@csstools/postcss-logical-resize': 4.0.0(postcss@8.5.28)
+      '@csstools/postcss-logical-viewport-units': 4.0.0(postcss@8.5.28)
+      '@csstools/postcss-media-minmax': 3.0.4(postcss@8.5.28)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 4.0.0(postcss@8.5.28)
+      '@csstools/postcss-mixins': 1.0.0(postcss@8.5.28)
+      '@csstools/postcss-nested-calc': 5.0.0(postcss@8.5.28)
+      '@csstools/postcss-normalize-display-values': 5.0.1(postcss@8.5.28)
+      '@csstools/postcss-oklab-function': 5.0.10(postcss@8.5.28)
+      '@csstools/postcss-position-area-property': 2.0.0(postcss@8.5.28)
+      '@csstools/postcss-progressive-custom-properties': 5.1.2(postcss@8.5.28)
+      '@csstools/postcss-property-rule-optional-descriptors': 1.0.0(postcss@8.5.28)
+      '@csstools/postcss-property-rule-prelude-list': 2.0.0(postcss@8.5.28)
+      '@csstools/postcss-random-function': 4.0.0(postcss@8.5.28)
+      '@csstools/postcss-relative-color-syntax': 4.0.10(postcss@8.5.28)
+      '@csstools/postcss-scope-pseudo-class': 5.0.0(postcss@8.5.28)
+      '@csstools/postcss-sign-functions': 2.0.4(postcss@8.5.28)
+      '@csstools/postcss-stepped-value-functions': 5.0.4(postcss@8.5.28)
+      '@csstools/postcss-syntax-descriptor-syntax-production': 2.0.0(postcss@8.5.28)
+      '@csstools/postcss-system-ui-font-family': 2.0.0(postcss@8.5.28)
+      '@csstools/postcss-text-decoration-shorthand': 5.0.5(postcss@8.5.28)
+      '@csstools/postcss-trigonometric-functions': 5.0.4(postcss@8.5.28)
+      '@csstools/postcss-unset-value': 5.0.0(postcss@8.5.28)
+      autoprefixer: 10.5.4(postcss@8.5.28)
       browserslist: 4.28.8
-      css-blank-pseudo: 8.0.2(postcss@8.5.26)
-      css-has-pseudo: 8.0.1(postcss@8.5.26)
-      css-prefers-color-scheme: 11.0.1(postcss@8.5.26)
+      css-blank-pseudo: 8.0.2(postcss@8.5.28)
+      css-has-pseudo: 8.0.1(postcss@8.5.28)
+      css-prefers-color-scheme: 11.0.1(postcss@8.5.28)
       cssdb: 8.10.0
-      postcss: 8.5.26
-      postcss-attribute-case-insensitive: 8.0.0(postcss@8.5.26)
-      postcss-clamp: 4.1.0(postcss@8.5.26)
-      postcss-color-functional-notation: 8.0.10(postcss@8.5.26)
-      postcss-color-hex-alpha: 11.0.0(postcss@8.5.26)
-      postcss-color-rebeccapurple: 11.0.0(postcss@8.5.26)
-      postcss-custom-media: 12.0.1(postcss@8.5.26)
-      postcss-custom-properties: 15.0.1(postcss@8.5.26)
-      postcss-custom-selectors: 9.0.1(postcss@8.5.26)
-      postcss-dir-pseudo-class: 10.0.0(postcss@8.5.26)
-      postcss-double-position-gradients: 7.0.3(postcss@8.5.26)
-      postcss-focus-visible: 11.0.0(postcss@8.5.26)
-      postcss-focus-within: 10.0.1(postcss@8.5.26)
-      postcss-font-variant: 5.0.0(postcss@8.5.26)
-      postcss-gap-properties: 7.0.0(postcss@8.5.26)
-      postcss-image-set-function: 8.0.0(postcss@8.5.26)
-      postcss-lab-function: 8.0.10(postcss@8.5.26)
-      postcss-logical: 9.0.0(postcss@8.5.26)
-      postcss-nesting: 14.0.1(postcss@8.5.26)
-      postcss-opacity-percentage: 3.0.0(postcss@8.5.26)
-      postcss-overflow-shorthand: 7.0.0(postcss@8.5.26)
-      postcss-page-break: 3.0.4(postcss@8.5.26)
-      postcss-place: 11.0.0(postcss@8.5.26)
-      postcss-pseudo-class-any-link: 11.0.0(postcss@8.5.26)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.26)
-      postcss-selector-not: 9.0.0(postcss@8.5.26)
-
-  postcss-pseudo-class-any-link@11.0.0(postcss@8.5.26):
+      postcss: 8.5.28
+      postcss-attribute-case-insensitive: 8.0.0(postcss@8.5.28)
+      postcss-clamp: 4.1.0(postcss@8.5.28)
+      postcss-color-functional-notation: 8.0.10(postcss@8.5.28)
+      postcss-color-hex-alpha: 11.0.0(postcss@8.5.28)
+      postcss-color-rebeccapurple: 11.0.0(postcss@8.5.28)
+      postcss-custom-media: 12.0.1(postcss@8.5.28)
+      postcss-custom-properties: 15.0.1(postcss@8.5.28)
+      postcss-custom-selectors: 9.0.1(postcss@8.5.28)
+      postcss-dir-pseudo-class: 10.0.0(postcss@8.5.28)
+      postcss-double-position-gradients: 7.0.3(postcss@8.5.28)
+      postcss-focus-visible: 11.0.0(postcss@8.5.28)
+      postcss-focus-within: 10.0.1(postcss@8.5.28)
+      postcss-font-variant: 5.0.0(postcss@8.5.28)
+      postcss-gap-properties: 7.0.0(postcss@8.5.28)
+      postcss-image-set-function: 8.0.0(postcss@8.5.28)
+      postcss-lab-function: 8.0.10(postcss@8.5.28)
+      postcss-logical: 9.0.0(postcss@8.5.28)
+      postcss-nesting: 14.0.1(postcss@8.5.28)
+      postcss-opacity-percentage: 3.0.0(postcss@8.5.28)
+      postcss-overflow-shorthand: 7.0.0(postcss@8.5.28)
+      postcss-page-break: 3.0.4(postcss@8.5.28)
+      postcss-place: 11.0.0(postcss@8.5.28)
+      postcss-pseudo-class-any-link: 11.0.0(postcss@8.5.28)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.28)
+      postcss-selector-not: 9.0.0(postcss@8.5.28)
+
+  postcss-pseudo-class-any-link@11.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
-  postcss-pxtrans@1.0.4(postcss@8.5.26):
+  postcss-pxtrans@1.0.4(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-plugin-shared: 1.1.5(postcss@8.5.26)
+      postcss: 8.5.28
+      postcss-plugin-shared: 1.1.5(postcss@8.5.28)
 
-  postcss-rem-to-responsive-pixel@7.0.5(postcss@8.5.26):
+  postcss-rem-to-responsive-pixel@7.0.5(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-plugin-shared: 1.1.5(postcss@8.5.26)
+      postcss: 8.5.28
+      postcss-plugin-shared: 1.1.5(postcss@8.5.28)
 
-  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26):
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
   postcss-resolve-nested-selector@0.1.6: {}
 
-  postcss-rule-unit-converter@0.2.3(postcss@8.5.26):
+  postcss-rule-unit-converter@0.2.3(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-plugin-shared: 1.1.5(postcss@8.5.26)
+      postcss: 8.5.28
+      postcss-plugin-shared: 1.1.5(postcss@8.5.28)
 
   postcss-safe-parser@7.0.1(postcss@8.5.26):
     dependencies:
@@ -16509,18 +16684,14 @@ snapshots:
     dependencies:
       postcss: 8.5.28
 
-  postcss-scss@4.0.9(postcss@8.5.26):
-    dependencies:
-      postcss: 8.5.26
-
   postcss-scss@4.0.9(postcss@8.5.28):
     dependencies:
       postcss: 8.5.28
 
-  postcss-selector-not@9.0.0(postcss@8.5.26):
+  postcss-selector-not@9.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
 
   postcss-selector-parser@7.1.5:
     dependencies:
@@ -16532,16 +16703,16 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-sorting@10.0.0(postcss@8.5.26):
+  postcss-sorting@10.0.0(postcss@8.5.28):
     dependencies:
-      postcss: 8.5.26
+      postcss: 8.5.28
 
   postcss-tailwindcss@3.0.6:
     dependencies:
       enhanced-resolve: 5.24.5
       get-tsconfig: 4.14.3
-      postcss: 8.5.26
-      postcss-selector-parser: 7.1.5
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
       postcss-value-parser: 4.2.0
 
   postcss-value-parser@4.2.0: {}
@@ -16775,7 +16946,7 @@ snapshots:
     dependencies:
       '@babel/generator': 8.0.0
       '@babel/helper-validator-identifier': 8.0.2
-      '@babel/parser': 8.0.0
+      '@babel/parser': 8.0.4
       ast-kit: 3.0.0
       birpc: 4.0.0
       dts-resolver: 3.0.0
@@ -16788,12 +16959,12 @@ snapshots:
     transitivePeerDependencies:
       - oxc-resolver
 
-  rolldown-plugin-dts@0.28.5(@volar/typescript@2.4.28(typescript@6.0.3))(rolldown@1.2.7)(typescript@6.0.3)(vue-tsc@3.3.11(typescript@6.0.3)):
+  rolldown-plugin-dts@0.28.5(@volar/typescript@2.4.28(typescript@6.0.3))(rolldown@1.2.8)(typescript@6.0.3)(vue-tsc@3.3.11(typescript@6.0.3)):
     dependencies:
       dts-resolver: 3.0.0
       get-tsconfig: 5.0.0-beta.6
       obug: 2.1.4
-      rolldown: 1.2.7
+      rolldown: 1.2.8
       yuku-ast: 0.9.3
       yuku-codegen: 0.9.3
       yuku-parser: 0.9.3
@@ -16812,6 +16983,14 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  rolldown-require@2.0.28(rolldown@1.2.8):
+    dependencies:
+      '@rollup/pluginutils': 5.4.0
+      get-tsconfig: 4.14.3
+      rolldown: 1.2.8
+    transitivePeerDependencies:
+      - rollup
+
   rolldown@1.1.4:
     dependencies:
       '@oxc-project/types': 0.138.0
@@ -16833,27 +17012,6 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.1.4
       '@rolldown/binding-win32-x64-msvc': 1.1.4
 
-  rolldown@1.2.6:
-    dependencies:
-      '@oxc-project/types': 0.147.0
-      '@rolldown/pluginutils': 1.0.1
-    optionalDependencies:
-      '@rolldown/binding-android-arm-eabi': 1.2.6
-      '@rolldown/binding-android-arm64': 1.2.6
-      '@rolldown/binding-darwin-arm64': 1.2.6
-      '@rolldown/binding-darwin-x64': 1.2.6
-      '@rolldown/binding-freebsd-x64': 1.2.6
-      '@rolldown/binding-linux-arm-gnueabihf': 1.2.6
-      '@rolldown/binding-linux-arm64-gnu': 1.2.6
-      '@rolldown/binding-linux-arm64-musl': 1.2.6
-      '@rolldown/binding-linux-ppc64-gnu': 1.2.6
-      '@rolldown/binding-linux-s390x-gnu': 1.2.6
-      '@rolldown/binding-linux-x64-gnu': 1.2.6
-      '@rolldown/binding-linux-x64-musl': 1.2.6
-      '@rolldown/binding-openharmony-arm64': 1.2.6
-      '@rolldown/binding-win32-arm64-msvc': 1.2.6
-      '@rolldown/binding-win32-x64-msvc': 1.2.6
-
   rolldown@1.2.7:
     dependencies:
       '@oxc-project/types': 0.148.0
@@ -16875,6 +17033,27 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.2.7
       '@rolldown/binding-win32-x64-msvc': 1.2.7
 
+  rolldown@1.2.8:
+    dependencies:
+      '@oxc-project/types': 0.149.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.8
+      '@rolldown/binding-android-arm64': 1.2.8
+      '@rolldown/binding-darwin-arm64': 1.2.8
+      '@rolldown/binding-darwin-x64': 1.2.8
+      '@rolldown/binding-freebsd-x64': 1.2.8
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.8
+      '@rolldown/binding-linux-arm64-gnu': 1.2.8
+      '@rolldown/binding-linux-arm64-musl': 1.2.8
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.8
+      '@rolldown/binding-linux-s390x-gnu': 1.2.8
+      '@rolldown/binding-linux-x64-gnu': 1.2.8
+      '@rolldown/binding-linux-x64-musl': 1.2.8
+      '@rolldown/binding-openharmony-arm64': 1.2.8
+      '@rolldown/binding-win32-arm64-msvc': 1.2.8
+      '@rolldown/binding-win32-x64-msvc': 1.2.8
+
   root-link-target@3.1.0:
     dependencies:
       can-link: 2.0.0
@@ -17215,15 +17394,15 @@ snapshots:
 
   stylelint-order@8.1.1(stylelint@17.14.1(supports-color@10.2.2)(typescript@6.0.3)):
     dependencies:
-      postcss: 8.5.26
-      postcss-sorting: 10.0.0(postcss@8.5.26)
+      postcss: 8.5.28
+      postcss-sorting: 10.0.0(postcss@8.5.28)
       stylelint: 17.14.1(supports-color@10.2.2)(typescript@6.0.3)
 
   stylelint-plugin-tailwindcss@3.0.6(stylelint@17.14.1(supports-color@10.2.2)(typescript@6.0.3))(tailwindcss@4.3.3):
     dependencies:
       '@unocss/config': 66.8.1
       '@unocss/core': 66.8.1
-      postcss: 8.5.26
+      postcss: 8.5.28
       postcss-tailwindcss: 3.0.6
       stylelint: 17.14.1(supports-color@10.2.2)(typescript@6.0.3)
     optionalDependencies:
@@ -17240,7 +17419,7 @@ snapshots:
       known-css-properties: 0.37.0
       postcss-media-query-parser: 0.2.3
       postcss-resolve-nested-selector: 0.1.6
-      postcss-selector-parser: 7.1.5
+      postcss-selector-parser: 7.1.6
       postcss-value-parser: 4.2.0
       stylelint: 17.14.1(supports-color@10.2.2)(typescript@6.0.3)
 
@@ -17620,6 +17799,12 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  update-browserslist-db@1.3.3(browserslist@4.28.9):
+    dependencies:
+      browserslist: 4.28.9
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -17706,8 +17891,8 @@ snapshots:
     dependencies:
       lightningcss: 1.33.0
       picomatch: 4.0.7
-      postcss: 8.5.26
-      rolldown: 1.2.6
+      postcss: 8.5.28
+      rolldown: 1.2.7
       tinyglobby: 0.2.17
     optionalDependencies:
       '@types/node': 26.1.0
@@ -17835,13 +18020,13 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
-  weapp-ide-cli@6.1.2(@types/node@26.1.0):
+  weapp-ide-cli@6.1.3(@types/node@26.1.0):
     dependencies:
       '@modelcontextprotocol/server': 2.0.0
-      '@weapp-core/logger': 3.1.1
+      '@weapp-core/logger': 3.1.2
       '@weapp-core/shared': 3.2.1
-      '@weapp-vite/devtools-runtime': 0.4.17(@types/node@26.1.0)
-      '@weapp-vite/miniprogram-automator': 1.2.16(@types/node@26.1.0)
+      '@weapp-vite/devtools-runtime': 0.4.18(@types/node@26.1.0)
+      '@weapp-vite/miniprogram-automator': 1.2.17(@types/node@26.1.0)
       cac: 7.0.0
       execa: 10.0.1
       pathe: 2.0.3
@@ -17853,21 +18038,62 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  weapp-style-injector@1.0.4:
+  weapp-style-injector@1.0.5:
+    dependencies:
+      '@weapp-tailwindcss/shared': 2.0.3
+      micromatch: 4.0.8
+
+  weapp-tailwindcss@5.5.3(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)):
     dependencies:
+      '@babel/parser': 8.0.4
+      '@babel/traverse': 8.0.4
+      '@babel/types': 8.0.4
+      '@csstools/css-tokenizer': 4.0.0
+      '@tailwindcss-mangle/engine': 0.2.0(tailwindcss@4.3.3)
+      '@vue/compiler-dom': 3.5.42
+      '@weapp-core/escape': 8.0.0
+      '@weapp-tailwindcss/logger': 2.0.3
+      '@weapp-tailwindcss/postcss': 3.3.3(jiti@2.7.0)(tailwindcss@4.3.3)(yaml@2.9.0)
+      '@weapp-tailwindcss/reset': 0.1.4(tailwindcss@4.3.3)
       '@weapp-tailwindcss/shared': 2.0.3
+      comment-json: 5.0.0
+      debug: 4.4.3(supports-color@10.2.2)
+      fast-glob: 3.3.3
+      htmlparser2: 12.0.0
+      lightningcss: 1.33.0
+      local-pkg: 1.2.1
+      lru-cache: 11.5.2
+      magic-string: 1.2.3
       micromatch: 4.0.8
+      oxc-parser: 0.149.0
+      oxc-walker: 1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.7)
+      postcss-scss: 4.0.9(postcss@8.5.28)
+      semver: 7.8.5
+      tailwindcss-config: 2.0.4
+      weapp-style-injector: 1.0.5
+      yaml: 2.9.0
+    optionalDependencies:
+      vite: 8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@oxc-project/types'
+      - jiti
+      - postcss
+      - rolldown
+      - supports-color
+      - tailwindcss
+      - tsx
 
-  weapp-tailwindcss@5.5.1(@oxc-project/types@0.148.0)(jiti@2.7.0)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)):
+  weapp-tailwindcss@5.5.3(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.8)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)):
     dependencies:
       '@babel/parser': 8.0.4
       '@babel/traverse': 8.0.4
       '@babel/types': 8.0.4
+      '@csstools/css-tokenizer': 4.0.0
       '@tailwindcss-mangle/engine': 0.2.0(tailwindcss@4.3.3)
       '@vue/compiler-dom': 3.5.42
       '@weapp-core/escape': 8.0.0
       '@weapp-tailwindcss/logger': 2.0.3
-      '@weapp-tailwindcss/postcss': 3.3.2(jiti@2.7.0)(tailwindcss@4.3.3)(yaml@2.9.0)
+      '@weapp-tailwindcss/postcss': 3.3.3(jiti@2.7.0)(tailwindcss@4.3.3)(yaml@2.9.0)
       '@weapp-tailwindcss/reset': 0.1.4(tailwindcss@4.3.3)
       '@weapp-tailwindcss/shared': 2.0.3
       comment-json: 5.0.0
@@ -17879,23 +18105,25 @@ snapshots:
       lru-cache: 11.5.2
       magic-string: 1.2.3
       micromatch: 4.0.8
-      oxc-parser: 0.148.0
-      oxc-walker: 1.1.1(@oxc-project/types@0.148.0)(oxc-parser@0.148.0)(rolldown@1.2.7)
+      oxc-parser: 0.149.0
+      oxc-walker: 1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.8)
+      postcss-scss: 4.0.9(postcss@8.5.28)
       semver: 7.8.5
       tailwindcss-config: 2.0.4
-      weapp-style-injector: 1.0.4
+      weapp-style-injector: 1.0.5
       yaml: 2.9.0
     optionalDependencies:
       vite: 8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)
     transitivePeerDependencies:
       - '@oxc-project/types'
       - jiti
+      - postcss
       - rolldown
       - supports-color
       - tailwindcss
       - tsx
 
-  weapp-vite@7.0.4(@babel/core@8.0.1)(@oxc-project/types@0.148.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0):
+  weapp-vite@7.1.0(@babel/core@8.0.1)(@oxc-project/types@0.149.0)(@types/node@26.1.0)(esbuild@0.28.2)(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(jiti@2.7.0)(miniprogram-api-typings@5.2.3)(sass@1.103.1)(supports-color@10.2.2)(tailwindcss@4.3.3)(vitest@4.1.11)(yaml@2.9.0):
     dependencies:
       '@babel/preset-env': 8.0.2(@babel/core@8.0.1)
       '@babel/preset-typescript': 8.0.1(@babel/core@8.0.1)
@@ -17903,20 +18131,20 @@ snapshots:
       '@vercel/detect-agent': 1.2.5
       '@volar/typescript': 2.4.28(typescript@6.0.3)
       '@vue/language-core': 3.3.11
-      '@weapp-core/constants': 0.2.1
-      '@weapp-core/init': 6.0.17
-      '@weapp-core/logger': 3.1.1
+      '@weapp-core/constants': 0.2.2
+      '@weapp-core/init': 6.0.18
+      '@weapp-core/logger': 3.1.2
       '@weapp-core/schematics': 6.2.2
       '@weapp-core/shared': 3.2.1
-      '@weapp-vite/ast': 7.0.4(rolldown@1.2.7)
+      '@weapp-vite/ast': 7.1.0(rolldown@1.2.8)
       '@weapp-vite/eslint': 0.2.3(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))
-      '@weapp-vite/i18n': 0.2.1(miniprogram-api-typings@5.2.3)
-      '@weapp-vite/mcp': 1.5.1(@types/node@26.1.0)
-      '@weapp-vite/miniprogram-automator': 1.2.16(@types/node@26.1.0)
+      '@weapp-vite/i18n': 0.2.2(miniprogram-api-typings@5.2.3)
+      '@weapp-vite/mcp': 1.5.2(@types/node@26.1.0)
+      '@weapp-vite/miniprogram-automator': 1.2.17(@types/node@26.1.0)
       '@weapp-vite/volar': 2.1.6
-      '@weapp-vite/web': 1.4.21(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(typescript@6.0.3)(vitest@4.1.11)
-      '@wevu/api': 0.3.0(vitest@4.1.11)
-      '@wevu/web-apis': 1.2.40(vitest@4.1.11)
+      '@weapp-vite/web': 1.5.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(typescript@6.0.3)(vitest@4.1.11)
+      '@wevu/api': 0.3.1(vitest@4.1.11)
+      '@wevu/web-apis': 1.2.41(vitest@4.1.11)
       cac: 7.0.0
       chokidar: 5.0.0
       comment-json: 5.0.0
@@ -17932,9 +18160,10 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.7
       postcss: 8.5.28
-      rolldown: 1.2.7
-      rolldown-plugin-dts: 0.28.5(@volar/typescript@2.4.28(typescript@6.0.3))(rolldown@1.2.7)(typescript@6.0.3)(vue-tsc@3.3.11(typescript@6.0.3))
-      rolldown-require: 2.0.28(rolldown@1.2.7)
+      postcss-value-parser: 4.2.0
+      rolldown: 1.2.8
+      rolldown-plugin-dts: 0.28.5(@volar/typescript@2.4.28(typescript@6.0.3))(rolldown@1.2.8)(typescript@6.0.3)(vue-tsc@3.3.11(typescript@6.0.3))
+      rolldown-require: 2.0.28(rolldown@1.2.8)
       semver: 7.8.5
       typescript: 6.0.3
       vite: 8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0)
@@ -17942,11 +18171,11 @@ snapshots:
       vite-tsconfig-paths: 6.1.1(supports-color@10.2.2)(typescript@6.0.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
       vue: 3.5.42(typescript@6.0.3)
       vue-tsc: 3.3.11(typescript@6.0.3)
-      weapp-ide-cli: 6.1.2(@types/node@26.1.0)
-      weapp-tailwindcss: 5.5.1(@oxc-project/types@0.148.0)(jiti@2.7.0)(rolldown@1.2.7)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
-      wevu: 7.0.4(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11)
+      weapp-ide-cli: 6.1.3(@types/node@26.1.0)
+      weapp-tailwindcss: 5.5.3(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.8)(supports-color@10.2.2)(tailwindcss@4.3.3)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
+      wevu: 7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.8)(typescript@6.0.3)(vitest@4.1.11)
     optionalDependencies:
-      '@swc/core': 1.16.1
+      '@swc/core': 1.16.2
     transitivePeerDependencies:
       - '@babel/core'
       - '@mpxjs/webpack-plugin'
@@ -17982,13 +18211,30 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  wevu@7.0.4(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11):
+  wevu@7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.7)(typescript@6.0.3)(vitest@4.1.11):
+    dependencies:
+      '@weapp-core/constants': 0.2.2
+      '@weapp-core/shared': 3.2.1
+      '@wevu/api': 0.3.1(vitest@4.1.11)
+      '@wevu/compiler': 7.1.0(@babel/core@8.0.1)(rolldown@1.2.7)(typescript@6.0.3)
+      '@wevu/web-apis': 1.2.41(vitest@4.1.11)
+      miniprogram-api-typings: 5.2.3
+      vue: 3.5.42(typescript@6.0.3)
+    optionalDependencies:
+      vitest: 4.1.11(@types/node@26.1.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.2.2(@types/node@26.1.0)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(yaml@2.9.0))
+    transitivePeerDependencies:
+      - '@babel/core'
+      - rolldown
+      - rollup
+      - typescript
+
+  wevu@7.1.0(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.8)(typescript@6.0.3)(vitest@4.1.11):
     dependencies:
-      '@weapp-core/constants': 0.2.1
+      '@weapp-core/constants': 0.2.2
       '@weapp-core/shared': 3.2.1
-      '@wevu/api': 0.3.0(vitest@4.1.11)
-      '@wevu/compiler': 7.0.4(@babel/core@8.0.1)(rolldown@1.2.7)(typescript@6.0.3)
-      '@wevu/web-apis': 1.2.40(vitest@4.1.11)
+      '@wevu/api': 0.3.1(vitest@4.1.11)
+      '@wevu/compiler': 7.1.0(@babel/core@8.0.1)(rolldown@1.2.8)(typescript@6.0.3)
+      '@wevu/web-apis': 1.2.41(vitest@4.1.11)
       miniprogram-api-typings: 5.2.3
       vue: 3.5.42(typescript@6.0.3)
     optionalDependencies:
diff --git a/registry/component-tiers.v0.1.json b/registry/component-tiers.v0.1.json
index 8d22b059..c8755306 100644
--- a/registry/component-tiers.v0.1.json
+++ b/registry/component-tiers.v0.1.json
@@ -94,8 +94,8 @@
     "response-actions",
     "artifact",
     "sources",
+    "rag-pipeline",
     "retrieval-progress",
-    "source-receipt",
     "attachments",
     "event-renderer",
     "message-scroller",
diff --git a/registry/components/agent-ui/AgentActivity.vue b/registry/components/agent-ui/AgentActivity.vue
index a178548c..7d0ded9c 100644
--- a/registry/components/agent-ui/AgentActivity.vue
+++ b/registry/components/agent-ui/AgentActivity.vue
@@ -3,6 +3,7 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentActivityItem, AgentAdvancedStatus } from './advanced-types'
 import { computed } from 'wevu'
 import { cn } from '../../lib/cn'
+import { agentSearchIcon, agentSparklesIcon, agentToolIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -16,65 +17,283 @@ const props = withDefaults(
   },
 )
 
-const rootClass = computed(() =>
-  cn('agent-activity overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-activity', props.className))
 const completedCount = computed(() => props.items.filter(item => item.status === 'completed').length)
+const currentItem = computed(() => props.items.find(item => item.status === 'running' || item.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentItem.value?.status === 'failed') {
+    return `阻塞于 ${currentItem.value.title}`
+  }
+  if (currentItem.value) {
+    return `正在执行 ${currentItem.value.title}`
+  }
+  if (props.items.length && completedCount.value === props.items.length) {
+    return '全部完成'
+  }
+  return '等待开始'
+})
+const displayItems = computed(() =>
+  props.items.map((item) => {
+    const ariaCurrent: 'step' | undefined = item.status === 'running' ? 'step' : undefined
+    return {
+      ...item,
+      ariaCurrent,
+      itemClass: `agent-activity__item is-${item.status} is-${item.kind}`,
+      kindLabel: item.kind === 'reasoning'
+        ? '推理'
+        : item.kind === 'search'
+          ? '检索'
+          : item.kind === 'tool'
+            ? '工具'
+            : '轨迹',
+      kindIcon: item.kind === 'search'
+        ? agentSearchIcon
+        : item.kind === 'tool'
+          ? agentToolIcon
+          : agentSparklesIcon,
+      statusChipClass: `agent-advanced__status is-${item.status}`,
+      statusLabel: item.status === 'completed'
+        ? 'Completed'
+        : item.status === 'failed'
+          ? 'Failed'
+          : item.status === 'running'
+            ? 'Running'
+            : 'Waiting',
+    }
+  }),
+)
 
-function statusClass(status: AgentAdvancedStatus) {
+function statusDotClass(status: AgentAdvancedStatus) {
   return cn(
-    'h-2 w-2 flex-none rounded-full',
-    status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    status === 'running' && 'agent-activity__running bg-[var(--varo-agent-primary)] shadow-[0_0_0_3px_#ccfbf1]',
-    status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    status === 'waiting' && 'bg-[var(--varo-agent-border-strong)]',
+    'agent-activity__status-dot',
+    `is-${status}`,
+    status === 'running' && 'agent-activity__running',
   )
 }
-
-function kindLabel(kind: AgentActivityItem['kind']) {
-  if (kind === 'reasoning') { return 'R' }
-  if (kind === 'search') { return 'S' }
-  if (kind === 'tool') { return 'T' }
-  return '·'
-}
 </script>
 
 <template>
   <view :class="rootClass" aria-live="polite">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
+    <view class="agent-activity__header">
+      <view class="agent-activity__heading">
+        <text class="agent-activity__title">
+          {{ title }}
+        </text>
+        <text class="agent-activity__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-activity__count">
         {{ completedCount }}/{{ items.length }}
       </text>
     </view>
-
-    <view class="grid p-2">
-      <view v-for="item in items" :key="item.id" class="grid min-h-[54px] grid-cols-[28px_minmax(0,1fr)_auto] items-start gap-2.5 rounded-xl px-2 py-2" :data-kind="item.kind" :data-status="item.status">
-        <text class="grid h-7 w-7 place-items-center rounded-lg bg-[var(--varo-agent-fill)] text-[10px] font-bold text-[var(--varo-agent-text)]" aria-hidden="true">
-          {{ kindLabel(item.kind) }}
-        </text>
-        <view class="grid min-w-0 gap-0.5">
-          <view class="flex items-baseline justify-between gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+    <view class="agent-activity__body">
+      <view
+        v-for="item in displayItems"
+        :key="item.id"
+        :class="item.itemClass"
+        :data-kind="item.kind"
+        :data-status="item.status"
+        :aria-current="item.ariaCurrent"
+      >
+        <view class="agent-activity__kind" aria-hidden="true">
+          <image class="agent-activity__kind-icon" :src="item.kindIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-activity__copy">
+          <view class="agent-activity__row">
+            <text class="agent-activity__name">
               {{ item.title }}
             </text>
-            <text v-if="item.duration" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
+            <view :class="item.statusChipClass" :data-status="item.status">
+              <view :class="statusDotClass(item.status)" aria-hidden="true" />
+              <text>{{ item.statusLabel }}</text>
+            </view>
+          </view>
+          <view class="agent-activity__meta">
+            <text class="agent-activity__kind-label">
+              {{ item.kindLabel }}
+            </text>
+            <text v-if="item.duration" class="agent-activity__duration">
               {{ item.duration }}
             </text>
           </view>
-          <text v-if="item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="item.detail" class="agent-activity__detail">
             {{ item.detail }}
           </text>
         </view>
-        <text :class="statusClass(item.status)" aria-hidden="true" />
       </view>
     </view>
   </view>
 </template>
 
 <style>
+.agent-activity {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-activity__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-activity__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-activity__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-activity__hint,
+.agent-activity__count,
+.agent-activity__duration,
+.agent-activity__detail {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-activity__count,
+.agent-activity__duration {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-activity__body {
+  display: grid;
+  padding: 8px 10px 12px;
+}
+
+.agent-activity__item {
+  display: flex;
+  gap: 10px;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-activity__item.is-running {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-activity__item.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-activity__kind {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-activity__kind-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-activity__item.is-reasoning .agent-activity__kind {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-activity__item.is-search .agent-activity__kind {
+  background: var(--varo-agent-source-blue-soft, #eff6ff);
+  border-color: var(--varo-agent-source-blue, #2563eb);
+}
+
+.agent-activity__item.is-tool .agent-activity__kind {
+  background: var(--varo-agent-source-violet-soft, #f5f3ff);
+  border-color: var(--varo-agent-source-violet, #7c3aed);
+}
+
+.agent-activity__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-activity__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-activity__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-advanced__status {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-activity__status-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--varo-agent-border-strong, #cbd5e1);
+  border-radius: 999px;
+}
+
+.agent-activity__status-dot.is-completed {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-activity__status-dot.is-running {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-activity__status-dot.is-failed {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-activity__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-activity__kind-label {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
 .agent-activity__running {
   animation: agent-activity-pulse 1s ease-in-out infinite;
 }
diff --git a/registry/components/agent-ui/AgentArtifact.vue b/registry/components/agent-ui/AgentArtifact.vue
index b9deb8d8..d8becbb5 100644
--- a/registry/components/agent-ui/AgentArtifact.vue
+++ b/registry/components/agent-ui/AgentArtifact.vue
@@ -16,32 +16,131 @@ defineProps<{
 const emit = defineEmits<{
   open: [artifact: AgentArtifactItem]
 }>()
+
+function kindLabel(kind?: AgentArtifactItem['kind']) {
+  if (kind === 'code') { return '代码产物' }
+  if (kind === 'image') { return '图像产物' }
+  if (kind === 'file') { return '文件产物' }
+  return '文档产物'
+}
 </script>
 
 <template>
-  <view class="agent-artifact overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm">
-    <view class="flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5">
-      <view class="grid min-w-0">
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view class="agent-artifact" :data-kind="artifact.kind || 'document'">
+    <view class="agent-artifact__header">
+      <view class="agent-artifact__heading">
+        <text class="agent-artifact__kind">
+          {{ kindLabel(artifact.kind) }}
+        </text>
+        <text class="agent-artifact__title">
           {{ artifact.title }}
         </text>
-        <text class="text-[10px] uppercase tracking-wider text-[var(--varo-agent-muted)]">
-          {{ artifact.kind || 'document' }}
+        <text v-if="artifact.language" class="agent-artifact__lang">
+          {{ artifact.language }}
         </text>
       </view>
-      <button class="agent-native-button min-h-9 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[12px] font-semibold text-[var(--varo-agent-text)]" type="button" @click="emit('open', artifact)">
+      <button class="agent-native-button agent-artifact__open" type="button" @click="emit('open', artifact)">
         打开
       </button>
     </view>
-    <scroll-view v-if="artifact.content" class="max-h-72 bg-slate-950" scroll-x scroll-y>
-      <text class="block whitespace-pre p-3.5 font-mono text-[12px] leading-5 text-slate-200">
+    <scroll-view v-if="artifact.content" class="agent-artifact__scroll" scroll-x scroll-y>
+      <text class="agent-artifact__body">
         {{ artifact.content }}
       </text>
     </scroll-view>
-    <image v-if="artifact.previewUrl" class="block h-60 w-full" :src="artifact.previewUrl" :alt="artifact.title" mode="aspectFit" />
+    <image v-if="artifact.previewUrl" class="agent-artifact__preview" :src="artifact.previewUrl" :alt="artifact.title" mode="aspectFit" />
   </view>
 </template>
 
+<style>
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__scroll {
+  max-height: 288px;
+  background: #0f172a;
+}
+
+.agent-artifact__body {
+  display: block;
+  padding: 14px 16px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  height: 240px;
+  background: #0b1220;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentCitations.vue b/registry/components/agent-ui/AgentCitations.vue
index 1db686d0..3418faf4 100644
--- a/registry/components/agent-ui/AgentCitations.vue
+++ b/registry/components/agent-ui/AgentCitations.vue
@@ -25,41 +25,69 @@ const emit = defineEmits<{
 }>()
 
 const open = shallowRef(props.defaultOpen)
-const rootClass = computed(() =>
-  cn('agent-citations overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const openAttr = computed(() => String(open.value))
+const hint = computed(() => open.value ? '点击来源打开原文' : '展开查看引用来源')
+const rootClass = computed(() => cn('agent-citations', props.className))
+const displayItems = computed(() =>
+  props.items.map(item => ({
+    ...item,
+    mark: (item.domain || item.title).trim().charAt(0).toUpperCase() || '#',
+    meta: item.domain || item.url || '',
+  })),
 )
 
 function toggle() {
   open.value = !open.value
   emit('update:open', open.value)
 }
+
+function openItem(id: string) {
+  const item = props.items.find(entry => entry.id === id)
+  if (item) {
+    emit('open', item)
+  }
+}
 </script>
 
 <template>
-  <view :class="rootClass" :data-open="String(open)">
-    <button class="agent-native-button agent-native-button--block flex min-h-12 items-center justify-between gap-3 border-0 bg-[var(--varo-agent-surface)] px-[13px] text-left" type="button" :aria-expanded="open" @click="toggle">
-      <view class="flex min-w-0 items-center gap-2">
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view :class="rootClass" :data-open="openAttr">
+    <button class="agent-native-button agent-native-button--block agent-citations__trigger" type="button" :aria-expanded="open" @click="toggle">
+      <view class="agent-citations__heading">
+        <text class="agent-citations__title">
           {{ title }}
         </text>
-        <text class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[var(--varo-agent-fill)] px-1 text-[10px] leading-none tabular-nums text-[var(--varo-agent-text)]">
+        <text class="agent-citations__hint">
+          {{ hint }}
+        </text>
+      </view>
+      <view class="agent-citations__count-wrap">
+        <text class="agent-citations__count">
           {{ items.length }}
         </text>
+        <image class="agent-citations__chevron" :class="[open && 'is-open']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </view>
-      <image class="h-4 w-4 transition-transform" :class="[open && 'rotate-180']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
     </button>
 
-    <view v-if="open" class="grid gap-1 border-t border-[var(--varo-agent-border)] p-2">
-      <button v-for="(item, index) in items" :key="item.id" class="agent-native-button agent-native-button--block flex min-h-11 items-center gap-2.5 rounded-xl border-0 bg-[var(--varo-agent-surface-strong)] px-2.5 py-2 text-left" hover-class="bg-[var(--varo-agent-fill)]" :hover-start-time="20" :hover-stay-time="70" type="button" @click="emit('open', item)">
-        <text class="grid h-6 w-6 flex-none place-items-center rounded-lg bg-[var(--varo-agent-surface)] text-[10px] font-bold tabular-nums text-[var(--varo-agent-primary)] shadow-sm">
-          {{ index + 1 }}
+    <view v-if="open" class="agent-citations__list">
+      <button
+        v-for="item in displayItems"
+        :key="item.id"
+        class="agent-native-button agent-native-button--block agent-citations__item"
+        type="button"
+        @click="openItem(item.id)"
+      >
+        <text class="agent-citations__mark" aria-hidden="true">
+          {{ item.mark }}
         </text>
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-citations__copy">
+          <text class="agent-citations__name">
             {{ item.title }}
           </text>
-          <text class="truncate text-[11px] text-[var(--varo-agent-muted)]">
-            {{ item.domain || item.description || item.url }}
+          <text v-if="item.meta" class="agent-citations__meta">
+            {{ item.meta }}
+          </text>
+          <text v-if="item.description" class="agent-citations__description">
+            {{ item.description }}
           </text>
         </view>
       </button>
@@ -67,6 +95,133 @@ function toggle() {
   </view>
 </template>
 
+<style>
+.agent-citations {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-citations__trigger {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  text-align: left;
+  background: var(--varo-agent-surface, #fff);
+  border: 0;
+}
+
+.agent-citations__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-citations__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-citations__hint,
+.agent-citations__meta,
+.agent-citations__description {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-citations__count-wrap {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-citations__count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 7px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-citations__chevron {
+  width: 16px;
+  height: 16px;
+}
+
+.agent-citations__chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.agent-citations__list {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+
+.agent-citations__item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 58px;
+  padding: 9px 10px;
+  text-align: left;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 12px;
+}
+
+.agent-citations__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 9px;
+}
+
+.agent-citations__copy {
+  display: grid;
+  flex: 1;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-citations__name,
+.agent-citations__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-citations__name {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentCommandSearch.vue b/registry/components/agent-ui/AgentCommandSearch.vue
index 342c1a94..2fd5ba7c 100644
--- a/registry/components/agent-ui/AgentCommandSearch.vue
+++ b/registry/components/agent-ui/AgentCommandSearch.vue
@@ -26,51 +26,192 @@ const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-command-search overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-xl', props.className),
-)
+const rootClass = computed(() => cn('agent-command-search', props.className))
 const visibleItems = computed(() => {
   const query = props.modelValue.trim().toLowerCase()
   return query
     ? props.items.filter(item => `${item.label} ${item.description ?? ''} ${item.group ?? ''}`.toLowerCase().includes(query))
     : props.items
 })
+const groupedItems = computed(() => {
+  const groups = new Map<string, AgentSearchItem[]>()
+  for (const item of visibleItems.value) {
+    const key = item.group || 'Commands'
+    const list = groups.get(key)
+    if (list) {
+      list.push(item)
+    }
+    else {
+      groups.set(key, [item])
+    }
+  }
+  return [...groups.entries()].map(([label, items]) => ({ label, items }))
+})
 
 function inputValue(event: Event) {
   const miniEvent = event as Event & { detail?: { value?: string } }
   const target = event.target as HTMLInputElement | null
   emit('update:modelValue', miniEvent.detail?.value ?? target?.value ?? '')
 }
+
+function selectItem(id: string) {
+  const item = props.items.find(entry => entry.id === id)
+  if (item) {
+    emit('select', item)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-[50px] items-center gap-2.5 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <image class="h-[18px] w-[18px] flex-none" :src="agentSearchIcon" mode="aspectFit" aria-hidden="true" />
-      <input class="min-w-0 flex-1 border-0 bg-transparent text-[12px] text-[var(--varo-agent-foreground)] outline-none" :value="modelValue" :placeholder="placeholder" @input="inputValue">
+    <view class="agent-command-search__field">
+      <image class="agent-command-search__icon" :src="agentSearchIcon" mode="aspectFit" aria-hidden="true" />
+      <input class="agent-command-search__input" :value="modelValue" :placeholder="placeholder" @input="inputValue">
     </view>
 
-    <scroll-view v-if="visibleItems.length" class="max-h-[280px] p-2" scroll-y :show-scrollbar="false">
-      <button v-for="item in visibleItems" :key="item.id" class="agent-native-button agent-native-button--block flex min-h-12 items-center justify-between gap-3 rounded-xl border-0 bg-[var(--varo-agent-surface)] px-2.5 py-2 text-left" hover-class="bg-[var(--varo-agent-surface-strong)]" :hover-start-time="20" :hover-stay-time="70" type="button" @click="emit('select', item)">
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-            {{ item.label }}
-          </text>
-          <text v-if="item.description" class="truncate text-[11px] text-[var(--varo-agent-muted)]">
-            {{ item.description }}
-          </text>
-        </view>
-        <text v-if="item.shortcut" class="rounded-md border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-1.5 py-1 font-mono text-[10px] text-[var(--varo-agent-muted)]">
-          {{ item.shortcut }}
+    <scroll-view v-if="groupedItems.length" class="agent-command-search__list" scroll-y :show-scrollbar="false">
+      <view v-for="group in groupedItems" :key="group.label">
+        <text class="agent-command-search__group">
+          {{ group.label }}
         </text>
-      </button>
+        <button
+          v-for="item in group.items"
+          :key="item.id"
+          class="agent-native-button agent-native-button--block agent-command-search__item"
+          hover-class="bg-[var(--varo-agent-surface-strong)]"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          type="button"
+          @click="selectItem(item.id)"
+        >
+          <view class="agent-command-search__copy">
+            <text class="agent-command-search__label">
+              {{ item.label }}
+            </text>
+            <text v-if="item.description" class="agent-command-search__description">
+              {{ item.description }}
+            </text>
+          </view>
+          <text v-if="item.shortcut" class="agent-command-search__shortcut">
+            {{ item.shortcut }}
+          </text>
+        </button>
+      </view>
     </scroll-view>
-    <view v-else class="grid min-h-24 place-items-center text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-command-search__empty">
       {{ emptyText }}
     </view>
   </view>
 </template>
 
+<style>
+.agent-command-search {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-command-search__field {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  min-height: 50px;
+  padding: 0 13px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-command-search__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.agent-command-search__input {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 0;
+}
+
+.agent-command-search__list {
+  max-height: 280px;
+  padding: 8px;
+}
+
+.agent-command-search__section {
+  display: grid;
+  gap: 2px;
+}
+
+.agent-command-search__group {
+  padding: 8px 8px 4px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-command-search__item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 6px 8px;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-command-search__item--hover {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-command-search__copy {
+  display: grid;
+  min-width: 0;
+}
+
+.agent-command-search__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-command-search__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--varo-agent-muted, #667085);
+  white-space: nowrap;
+}
+
+.agent-command-search__shortcut {
+  flex: none;
+  padding: 2px 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 6px;
+}
+
+.agent-command-search__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 96px;
+  font-size: 12px;
+  color: var(--varo-agent-muted, #667085);
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentComposerScope.vue b/registry/components/agent-ui/AgentComposerScope.vue
index 74a2fd7a..51eb1bb8 100644
--- a/registry/components/agent-ui/AgentComposerScope.vue
+++ b/registry/components/agent-ui/AgentComposerScope.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentContextSource, AgentContextSourceStatus } from './advanced-types'
 import { computed } from 'wevu'
+import { agentPlugIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -26,142 +27,301 @@ const clampedUsage = computed(() => {
   const usage = Number.isFinite(props.usagePercent) ? props.usagePercent : 0
   return Math.min(100, Math.max(0, usage))
 })
-const usageTransform = computed(() => `scaleX(${clampedUsage.value / 100})`)
+const usageWidth = computed(() => `${clampedUsage.value}%`)
 const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
+const headingHint = computed(() => {
+  if (!props.sources.length) { return '暂无可用来源' }
+  if (enabledCount.value === 0) { return '尚未授权任何来源' }
+  return `${enabledCount.value} 个来源已加入上下文`
+})
+const countLabel = computed(() => `${enabledCount.value}/${props.sources.length}`)
 const disabledActionClass = computed(() =>
-  props.disabled ? 'agent-composer-scope__action--disabled' : '',
+  props.disabled ? 'agent-workspace-card__action--disabled' : '',
 )
 const displaySources = computed(() => props.sources.map((source) => {
   const status: AgentContextSourceStatus = source.status ?? 'available'
   const statusLabel = status === 'available' ? '可用' : status === 'connecting' ? '连接中' : '不可用'
   return {
+    actionClass: source.enabled ? '' : 'agent-workspace-card__action--primary',
     canConnect: status === 'unavailable',
     canToggle: status === 'available',
-    enabledLabel: source.enabled ? '已启用' : '未启用',
+    connectLabel: `连接${source.label}`,
+    enabledAttr: String(source.enabled),
+    rowClass: `agent-workspace-card__row is-${status}${source.enabled ? ' is-enabled' : ''}`,
     source,
     status,
     statusLabel,
-    statusClass: `agent-composer-scope__status-dot--${status}`,
     toggleLabel: `${source.enabled ? '停用' : '启用'}${source.label}`,
+    toggleText: source.enabled ? '停用' : '启用',
   }
 }))
 </script>
 
 <template>
-  <view class="agent-composer-scope box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ enabledCount }} 个已启用
+  <view class="agent-composer-scope" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displaySources.length" class="grid gap-1 p-2">
+    <view v-if="displaySources.length" class="agent-workspace-card__body">
       <view
         v-for="item in displaySources"
         :key="item.source.id"
-        class="flex min-h-[58px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2"
+        :class="item.rowClass"
         :data-status="item.status"
+        :data-enabled="item.enabledAttr"
       >
-        <view class="agent-composer-scope__status-dot" :class="item.statusClass" aria-hidden="true" />
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <view class="flex min-w-0 items-center gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <image class="agent-workspace-card__icon" :src="agentPlugIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
               {{ item.source.label }}
             </text>
-            <text class="flex-none text-[10px] font-semibold text-[var(--varo-agent-text)]">
-              {{ item.enabledLabel }}
-            </text>
-            <text class="flex-none text-[10px] font-semibold text-[var(--varo-agent-muted)]">
+            <text class="agent-workspace-card__chip">
               {{ item.statusLabel }}
             </text>
           </view>
-          <text v-if="item.source.description || item.source.meta" class="truncate text-[11px] text-[var(--varo-agent-muted)]">
+          <text v-if="item.source.description || item.source.meta" class="agent-workspace-card__detail">
             {{ item.source.description || item.source.meta }}
           </text>
         </view>
         <button
           v-if="item.canToggle"
-          class="agent-native-button agent-composer-scope__action"
-          :class="disabledActionClass"
+          class="agent-native-button agent-workspace-card__action"
+          :class="[item.actionClass, disabledActionClass]"
           type="button"
           :disabled="disabled"
           :aria-label="item.toggleLabel"
           :aria-pressed="item.source.enabled"
-          hover-class="agent-composer-scope__action--pressed"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('toggle', item.source, !item.source.enabled)"
         >
-          {{ item.source.enabled ? '停用' : '启用' }}
+          {{ item.toggleText }}
         </button>
         <button
           v-else-if="item.canConnect"
-          class="agent-native-button agent-composer-scope__action agent-composer-scope__action--primary"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
           :class="disabledActionClass"
           type="button"
           :disabled="disabled"
-          :aria-label="`连接${item.source.label}`"
-          hover-class="agent-composer-scope__action--pressed"
+          :aria-label="item.connectLabel"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('connect', item.source)"
         >
           连接
         </button>
+        <text v-else class="agent-workspace-card__chip">
+          连接中
+        </text>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无来源</text>
     </view>
 
-    <view class="grid gap-2 border-t border-[var(--varo-agent-border)] px-[13px] py-3">
-      <view class="flex items-center justify-between gap-3">
-        <text class="text-[11px] font-semibold text-[var(--varo-agent-text)]">
+    <view class="agent-composer-scope__meter">
+      <view class="agent-workspace-card__row-main">
+        <text class="agent-workspace-card__hint">
           上下文使用
         </text>
-        <text class="text-[11px] font-bold tabular-nums text-[var(--varo-agent-primary)]">
+        <text class="agent-composer-scope__usage">
           {{ clampedUsage }}%
         </text>
       </view>
       <view
-        class="h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]"
+        class="agent-composer-scope__track"
         role="progressbar"
         aria-label="上下文使用量"
         :aria-valuemin="0"
         :aria-valuemax="100"
         :aria-valuenow="clampedUsage"
       >
-        <view class="agent-composer-scope__meter h-full w-full rounded-full bg-[var(--varo-agent-primary)]" :style="{ transform: usageTransform }" />
+        <view class="agent-composer-scope__fill" :style="`width:${usageWidth}`" />
       </view>
     </view>
   </view>
 </template>
 
 <style>
-.agent-composer-scope__status-dot {
+.agent-composer-scope {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-connecting,
+.agent-workspace-card__row.is-enabled {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row.is-failed,
+.agent-workspace-card__row.is-unavailable {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__row.is-available .agent-workspace-card__mark {
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-connecting .agent-workspace-card__mark {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row.is-unavailable .agent-workspace-card__mark {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
   flex: none;
-  width: 8px;
-  height: 8px;
-  background: var(--varo-agent-success);
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
   border-radius: 999px;
 }
 
-.agent-composer-scope__status-dot--connecting {
-  background: var(--varo-agent-primary);
-  box-shadow: 0 0 0 3px var(--varo-agent-primary-soft);
+.agent-workspace-card__row.is-available .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-workspace-card__row.is-connecting .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__row.is-unavailable .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
 }
 
-.agent-composer-scope__status-dot--unavailable {
-  background: var(--varo-agent-danger);
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
 }
 
-.agent-composer-scope__action {
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -169,41 +329,57 @@ const displaySources = computed(() => props.sources.map((source) => {
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-composer-scope__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-composer-scope__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-composer-scope__action--pressed {
-  background: var(--varo-agent-fill);
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
 }
 
-.agent-composer-scope__action--disabled {
+.agent-workspace-card__action--disabled {
   opacity: 0.45;
 }
 
 .agent-composer-scope__meter {
-  transform-origin: left center;
-  transition: transform 180ms ease-out;
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .agent-composer-scope__meter {
-    transition: none;
-  }
+.agent-composer-scope__usage {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__fill {
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
 }
 </style>
 
diff --git a/registry/components/agent-ui/AgentContextCard.vue b/registry/components/agent-ui/AgentContextCard.vue
index f5ccb951..d324312a 100644
--- a/registry/components/agent-ui/AgentContextCard.vue
+++ b/registry/components/agent-ui/AgentContextCard.vue
@@ -20,41 +20,63 @@ const emit = defineEmits<{
   open: [chunk: AgentContextChunk]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-context-card overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const rootClass = computed(() => cn('agent-context-card', props.className))
+const hint = computed(() => props.chunks.length ? '来自检索结果的上下文片段' : '暂无检索上下文')
+const displayChunks = computed(() =>
+  props.chunks.map((chunk, index) => ({
+    ...chunk,
+    indexLabel: String(index + 1).padStart(2, '0'),
+    heading: chunk.label || chunk.source || 'Context',
+  })),
 )
+
+function openChunk(id: string) {
+  const chunk = props.chunks.find(entry => entry.id === id)
+  if (chunk) {
+    emit('open', chunk)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ chunks.length }} chunks
+    <view class="agent-context-card__header">
+      <view class="agent-context-card__heading">
+        <text class="agent-context-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-context-card__hint">
+          {{ hint }}
+        </text>
+      </view>
+      <text class="agent-context-card__count">
+        {{ chunks.length }}
       </text>
     </view>
-
-    <view class="grid gap-2 p-2.5">
-      <view v-for="chunk in chunks" :key="chunk.id" class="overflow-hidden rounded-xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-        <view class="flex min-h-9 items-center justify-between gap-2 border-b border-[var(--varo-agent-border)] px-3">
-          <text class="truncate text-[12px] font-bold text-[var(--varo-agent-foreground)]">
-            {{ chunk.label || chunk.source || 'Context' }}
-          </text>
-          <text v-if="chunk.content.length" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
-            {{ chunk.content.length }} chars
+    <view class="agent-context-card__list">
+      <view v-for="chunk in displayChunks" :key="chunk.id" class="agent-context-card__chunk">
+        <view class="agent-context-card__chunk-head">
+          <text class="agent-context-card__index" aria-hidden="true">
+            {{ chunk.indexLabel }}
           </text>
+          <view class="agent-context-card__chunk-copy">
+            <text class="agent-context-card__name">
+              {{ chunk.heading }}
+            </text>
+            <text v-if="chunk.sourceType" class="agent-context-card__type">
+              {{ chunk.sourceType }}
+            </text>
+          </view>
         </view>
-        <text class="block px-3 py-2.5 text-[12px] leading-[18px] text-[var(--varo-agent-text)]">
+        <text class="agent-context-card__quote">
           {{ chunk.content }}
         </text>
-        <view class="flex min-h-9 items-center justify-between gap-2 border-t border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-3">
-          <text class="text-[10px] font-bold uppercase tracking-[.08em] text-[var(--varo-agent-muted)]">
-            {{ chunk.sourceType || 'Source' }}
+        <view class="agent-context-card__chunk-foot">
+          <text class="agent-context-card__source">
+            {{ chunk.source || 'Source' }}
           </text>
-          <button class="agent-native-button max-w-[65%] truncate border-0 bg-transparent p-0 text-[11px] font-semibold text-[var(--varo-agent-primary)]" type="button" @click="emit('open', chunk)">
-            {{ chunk.source || 'Open' }}
+          <button class="agent-native-button agent-context-card__open" type="button" @click="openChunk(chunk.id)">
+            打开
           </button>
         </view>
       </view>
@@ -62,6 +84,149 @@ const rootClass = computed(() =>
   </view>
 </template>
 
+<style>
+.agent-context-card {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-context-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-context-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-context-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-context-card__hint,
+.agent-context-card__count,
+.agent-context-card__source {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-context-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-context-card__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+}
+
+.agent-context-card__chunk {
+  overflow: hidden;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 12px;
+}
+
+.agent-context-card__chunk-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 10px 0;
+}
+
+.agent-context-card__index {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 9px;
+}
+
+.agent-context-card__chunk-copy {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-context-card__name,
+.agent-context-card__source {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-context-card__name {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-context-card__type {
+  flex: none;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-context-card__quote {
+  display: block;
+  padding: 8px 10px;
+  margin: 8px 10px 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-surface, #fff);
+  border-left: 2px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 0 10px 10px 0;
+}
+
+.agent-context-card__chunk-foot {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  padding: 0 10px 8px;
+}
+
+.agent-context-card__open {
+  flex: none;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: transparent;
+  border: 0;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentFineTune.vue b/registry/components/agent-ui/AgentFineTune.vue
index c17a0626..7aecadad 100644
--- a/registry/components/agent-ui/AgentFineTune.vue
+++ b/registry/components/agent-ui/AgentFineTune.vue
@@ -21,9 +21,8 @@ const emit = defineEmits<{
   'update:controls': [value: AgentFineTuneControl[]]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-fine-tune overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-fine-tune', props.className))
+const countLabel = computed(() => `${props.controls.length} 项`)
 const fields = computed(() =>
   props.controls.map((control, index) => ({
     control,
@@ -35,10 +34,8 @@ const fields = computed(() =>
         ...option,
         ariaChecked: selected,
         className: cn(
-          'agent-native-button flex min-h-10 items-center justify-between gap-2 rounded-[10px] border px-2.5 text-left text-[12px] font-semibold',
-          selected
-            ? 'border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]'
-            : 'border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] text-[var(--varo-agent-text)]',
+          'agent-native-button agent-fine-tune__choice',
+          selected && 'is-selected',
         ),
         selected,
       }
@@ -64,21 +61,28 @@ function update(index: number, value: string) {
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[10px] font-bold uppercase tracking-[.08em] text-[var(--varo-agent-muted)]">
-        Adjust
+    <view class="agent-fine-tune__header">
+      <view class="agent-fine-tune__heading">
+        <text class="agent-fine-tune__title">
+          {{ title }}
+        </text>
+        <text class="agent-fine-tune__hint">
+          调整生成参数后立即生效
+        </text>
+      </view>
+      <text class="agent-fine-tune__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view class="grid grid-cols-2 gap-2.5 p-3 max-[600px]:grid-cols-1">
-      <view v-for="field in fields" :key="field.control.label" class="grid gap-1.5 text-[10px] font-semibold text-[var(--varo-agent-text)]">
-        <text>{{ field.control.label }}</text>
+    <view class="agent-fine-tune__grid">
+      <view v-for="field in fields" :key="field.control.label" class="agent-fine-tune__field">
+        <text class="agent-fine-tune__label">
+          {{ field.control.label }}
+        </text>
         <view
           v-if="field.control.type === 'select'"
-          class="grid grid-cols-2 gap-1.5"
+          class="agent-fine-tune__choices"
           role="radiogroup"
           :aria-label="field.control.label"
         >
@@ -95,14 +99,14 @@ function update(index: number, value: string) {
             @click="update(field.index, option.value)"
           >
             <text>{{ option.label }}</text>
-            <text v-if="option.selected" class="text-[12px] font-black" aria-hidden="true">
+            <text v-if="option.selected" class="agent-fine-tune__choice-check" aria-hidden="true">
               ✓
             </text>
           </button>
         </view>
         <input
           v-else
-          class="box-border min-h-10 w-full rounded-[10px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[12px] text-[var(--varo-agent-foreground)]"
+          class="agent-fine-tune__input"
           :aria-label="field.control.label"
           :max="field.control.max"
           :min="field.control.min"
@@ -114,14 +118,143 @@ function update(index: number, value: string) {
       </view>
     </view>
 
-    <view class="flex min-h-12 items-center justify-end border-t border-[var(--varo-agent-border)] px-3">
-      <button class="agent-native-button min-h-9 rounded-[10px] border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]" type="button" @click="emit('apply', controls)">
+    <view class="agent-fine-tune__footer">
+      <button class="agent-native-button agent-fine-tune__apply" type="button" @click="emit('apply', controls)">
         Apply changes
       </button>
     </view>
   </view>
 </template>
 
+<style>
+.agent-fine-tune {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-fine-tune__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-fine-tune__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-fine-tune__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-fine-tune__hint,
+.agent-fine-tune__count,
+.agent-fine-tune__label {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-fine-tune__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-fine-tune__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 12px;
+}
+
+.agent-fine-tune__field {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.agent-fine-tune__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 10px;
+  font-size: 12px;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 10px;
+}
+
+.agent-fine-tune__choices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.agent-fine-tune__choice {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 11px;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--varo-agent-text, #475569);
+  text-align: left;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 10px;
+}
+
+.agent-fine-tune__choice.is-selected {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-fine-tune__choice-check {
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.agent-fine-tune__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-fine-tune__apply {
+  min-height: 34px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary-foreground, #fff);
+  background: var(--varo-agent-primary, #0f766e);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 10px;
+}
+
+@media (max-width: 600px) {
+  .agent-fine-tune__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentFlowchart.vue b/registry/components/agent-ui/AgentFlowchart.vue
index 587a3130..ea83f516 100644
--- a/registry/components/agent-ui/AgentFlowchart.vue
+++ b/registry/components/agent-ui/AgentFlowchart.vue
@@ -22,61 +22,103 @@ const emit = defineEmits<{
   select: [node: AgentFlowNode]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-flowchart overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const rootClass = computed(() => cn('agent-flowchart', props.className))
+const countLabel = computed(() => `${props.nodes.length} 个步骤`)
+const displayNodes = computed(() =>
+  props.nodes.map((node, index) => ({
+    ...node,
+    indexLabel: String(index + 1).padStart(2, '0'),
+    typeLabel: node.type === 'trigger'
+      ? '触发'
+      : node.type === 'condition'
+        ? '条件'
+        : node.type === 'action'
+          ? '动作'
+          : '结果',
+    statusLabel: node.status === 'completed'
+      ? 'Completed'
+      : node.status === 'running'
+        ? 'Running'
+        : node.status === 'failed'
+          ? 'Failed'
+          : 'Waiting',
+  })),
 )
 
 function nodeClass(type: AgentFlowNode['type']) {
-  return cn(
-    'agent-native-button--block agent-flowchart__node grid min-h-[72px] gap-1 rounded-[14px] border bg-[var(--varo-agent-surface)] p-3 text-left shadow-sm',
-    type === 'trigger' && 'border-[var(--varo-agent-border-strong)]',
-    type === 'condition' && 'border-[var(--varo-agent-warning)]',
-    type === 'action' && 'border-[var(--varo-agent-primary)]',
-    type === 'result' && 'border-[var(--varo-agent-success)]',
-  )
+  return cn('agent-native-button agent-native-button--block agent-flowchart__node', `is-${type}`)
 }
 
 function statusClass(status?: AgentAdvancedStatus) {
   return cn(
-    'h-2 w-2 rounded-full',
-    status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    status === 'running' && 'bg-[var(--varo-agent-primary)]',
-    status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    (!status || status === 'waiting') && 'bg-[var(--varo-agent-border-strong)]',
+    'agent-flowchart__status-dot',
+    status === 'completed' && 'is-completed',
+    status === 'running' && 'is-running',
+    status === 'failed' && 'is-failed',
   )
 }
+
+function selectNode(id: string) {
+  const node = props.nodes.find(entry => entry.id === id)
+  if (node) {
+    emit('select', node)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <button class="agent-native-button inline-flex min-h-9 items-center gap-1.5 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-2.5 text-[11px] font-bold text-[var(--varo-agent-text)]" type="button" @click="emit('add', undefined)">
-        <image class="h-3.5 w-3.5" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
-        Step
+    <view class="agent-flowchart__header">
+      <view class="agent-flowchart__heading">
+        <text class="agent-flowchart__title">
+          {{ title }}
+        </text>
+        <text class="agent-flowchart__count">
+          {{ countLabel }}
+        </text>
+      </view>
+      <button class="agent-native-button agent-flowchart__add" type="button" @click="emit('add', undefined)">
+        <image class="agent-flowchart__add-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+        <text>Step</text>
       </button>
     </view>
 
-    <view class="grid p-3">
-      <template v-for="(node, index) in nodes" :key="node.id">
-        <button class="agent-native-button" :class="nodeClass(node.type)" type="button" :data-type="node.type" @click="emit('select', node)">
-          <view class="flex items-center justify-between gap-2">
-            <text class="text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
-              {{ node.type }}
+    <view class="agent-flowchart__canvas">
+      <template v-for="(node, index) in displayNodes" :key="node.id">
+        <button
+          :class="nodeClass(node.type)"
+          type="button"
+          :data-type="node.type"
+          :data-status="node.status || 'waiting'"
+          @click="selectNode(node.id)"
+        >
+          <view class="agent-flowchart__node-head">
+            <text class="agent-flowchart__index" aria-hidden="true">
+              {{ node.indexLabel }}
             </text>
-            <text :class="statusClass(node.status)" aria-hidden="true" />
+            <text class="agent-flowchart__type">
+              {{ node.typeLabel }}
+            </text>
+            <view v-if="node.status" class="agent-advanced__status" :data-status="node.status">
+              <view :class="statusClass(node.status)" aria-hidden="true" />
+              <text>{{ node.statusLabel }}</text>
+            </view>
           </view>
-          <text class="text-[12px] font-bold text-[var(--varo-agent-foreground)]">
+          <text class="agent-flowchart__name">
             {{ node.label }}
           </text>
-          <text v-if="node.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="node.detail" class="agent-flowchart__detail">
             {{ node.detail }}
           </text>
         </button>
-        <button v-if="index < nodes.length - 1" class="agent-native-button agent-flowchart__connector mx-auto grid place-items-center border-0 bg-transparent" type="button" :aria-label="`Add after ${node.label}`" @click="emit('add', node.id)">
-          <image class="h-3.5 w-3.5" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+        <button
+          v-if="index < displayNodes.length - 1"
+          class="agent-native-button agent-flowchart__connector"
+          type="button"
+          :aria-label="`Add after ${node.label}`"
+          @click="emit('add', node.id)"
+        >
+          <image class="agent-flowchart__add-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
         </button>
       </template>
     </view>
@@ -84,8 +126,166 @@ function statusClass(status?: AgentAdvancedStatus) {
 </template>
 
 <style>
+.agent-flowchart {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 18px;
+}
+
+.agent-flowchart__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-flowchart__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-flowchart__title {
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-flowchart__count,
+.agent-flowchart__detail {
+  font-size: 11px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-flowchart__add {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 9px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-flowchart__add-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.agent-flowchart__canvas {
+  display: grid;
+  justify-items: center;
+  padding: 24px;
+}
+
+.agent-flowchart__node {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  max-width: 320px;
+  padding: 12px 14px;
+  text-align: left;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-flowchart__node.is-trigger {
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-flowchart__node.is-condition {
+  border-color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-flowchart__node.is-action {
+  border-color: var(--varo-agent-source-violet, #7c3aed);
+}
+
+.agent-flowchart__node.is-result {
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-flowchart__node-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-flowchart__index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 7px;
+}
+
+.agent-flowchart__type {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-advanced__status {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-flowchart__status-dot {
+  width: 7px;
+  height: 7px;
+  background: var(--varo-agent-border-strong, #cbd5e1);
+  border-radius: 999px;
+}
+
+.agent-flowchart__status-dot.is-completed {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-flowchart__status-dot.is-running {
+  background: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-flowchart__status-dot.is-failed {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-flowchart__name {
+  font-size: 13px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+}
+
 .agent-flowchart__connector {
-  background: linear-gradient(#cbd5e1, #cbd5e1) center / 1px 100% no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 36px;
+  background: linear-gradient(var(--varo-agent-border, #dbe3ea), var(--varo-agent-border, #dbe3ea)) center / 1px 100%
+    no-repeat;
+  border: 0;
 }
 </style>
 
diff --git a/registry/components/agent-ui/AgentInsightCard.vue b/registry/components/agent-ui/AgentInsightCard.vue
index 69faa179..14060f7a 100644
--- a/registry/components/agent-ui/AgentInsightCard.vue
+++ b/registry/components/agent-ui/AgentInsightCard.vue
@@ -27,66 +27,228 @@ const emit = defineEmits<{
 const active = computed(() =>
   props.insights[Math.min(Math.max(0, props.current), Math.max(0, props.insights.length - 1))],
 )
+const activeTone = computed(() => active.value?.tone || 'default')
+const countLabel = computed(() => `${props.insights.length ? props.current + 1 : 0}/${props.insights.length}`)
 const rootClass = computed(() =>
-  cn(
-    'agent-insight-card overflow-hidden rounded-2xl border bg-[var(--varo-agent-surface)] shadow-sm',
-    active.value?.tone === 'success' && 'border-[var(--varo-agent-success)]',
-    active.value?.tone === 'warning' && 'border-[var(--varo-agent-warning)]',
-    active.value?.tone === 'danger' && 'border-[var(--varo-agent-danger)]',
-    (!active.value?.tone || active.value.tone === 'default') && 'border-[var(--varo-agent-border)]',
-    props.className,
-  ),
+  cn('agent-insight-card', `is-${activeTone.value}`, props.className),
 )
-const activeTone = computed(() => active.value?.tone || 'default')
 
 function move(delta: number) {
   if (!props.insights.length) { return }
   emit('update:current', (props.current + delta + props.insights.length) % props.insights.length)
 }
+
+function emitAction() {
+  if (active.value) {
+    emit('action', active.value)
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass" :data-tone="activeTone">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ insights.length ? current + 1 : 0 }}/{{ insights.length }}
+    <view class="agent-insight-card__header">
+      <view class="agent-insight-card__heading">
+        <text class="agent-insight-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-insight-card__label">
+          {{ active?.label || '运行指标' }}
+        </text>
+      </view>
+      <text class="agent-insight-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="active" class="relative grid min-h-32 place-content-center gap-2 px-5 py-5 text-center">
-      <text v-if="active.label" class="text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
-        {{ active.label }}
+    <view v-if="active" class="agent-insight-card__body">
+      <text v-if="active.value" class="agent-insight-card__value">
+        {{ active.value }}
       </text>
-      <text class="max-w-[520px] text-[15px] font-bold leading-6 text-[var(--varo-agent-foreground)]">
+      <text class="agent-insight-card__copy">
         {{ active.description }}
       </text>
-      <text v-if="active.value" class="text-2xl font-black tabular-nums text-[var(--varo-agent-primary)]">
-        {{ active.value }}
-      </text>
     </view>
-    <view v-else class="grid min-h-32 place-items-center text-[12px] text-[var(--varo-agent-muted)]">
-      No insights
+    <view v-else class="agent-insight-card__empty">
+      暂无洞察
     </view>
 
-    <view class="flex min-h-12 items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-3">
-      <view class="flex gap-1.5">
-        <button class="agent-native-button agent-insight-card__nav grid place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Previous insight" @click="move(-1)">
-          <image class="h-3.5 w-3.5 rotate-90" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+    <view class="agent-insight-card__footer">
+      <view class="agent-insight-card__nav">
+        <button class="agent-native-button agent-insight-card__nav-btn" type="button" aria-label="Previous insight" @click="move(-1)">
+          <image class="agent-insight-card__nav-icon is-prev" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
         </button>
-        <button class="agent-native-button agent-insight-card__nav grid place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Next insight" @click="move(1)">
-          <image class="h-3.5 w-3.5 -rotate-90" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+        <button class="agent-native-button agent-insight-card__nav-btn" type="button" aria-label="Next insight" @click="move(1)">
+          <image class="agent-insight-card__nav-icon is-next" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
         </button>
       </view>
-      <button v-if="active?.action" class="agent-native-button min-h-8 rounded-lg border border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary)] px-3 text-[11px] font-bold text-[var(--varo-agent-primary-foreground)]" type="button" @click="emit('action', active)">
+      <button v-if="active?.action" class="agent-native-button agent-insight-card__action" type="button" @click="emitAction">
         {{ active.action }}
       </button>
     </view>
   </view>
 </template>
 
+<style>
+.agent-insight-card {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-insight-card.is-success {
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-insight-card.is-warning {
+  border-color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-insight-card.is-danger {
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-insight-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-insight-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-insight-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-insight-card__label,
+.agent-insight-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-insight-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-insight-card__body {
+  display: grid;
+  gap: 8px;
+  min-height: 132px;
+  padding: 18px 16px 16px;
+}
+
+.agent-insight-card.is-success .agent-insight-card__body {
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-insight-card.is-warning .agent-insight-card__body {
+  background: var(--varo-agent-warning-soft, #fffbeb);
+}
+
+.agent-insight-card.is-danger .agent-insight-card__body {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-insight-card__value {
+  font-size: 32px;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-insight-card.is-success .agent-insight-card__value {
+  color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-insight-card.is-warning .agent-insight-card__value {
+  color: var(--varo-agent-warning, #d97706);
+}
+
+.agent-insight-card.is-danger .agent-insight-card__value {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-insight-card__copy,
+.agent-insight-card__empty {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--varo-agent-foreground, #172033);
+}
+
+.agent-insight-card__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 132px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-insight-card__footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-insight-card__nav {
+  display: flex;
+  gap: 6px;
+}
+
+.agent-insight-card__nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-insight-card__nav-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-insight-card__nav-icon.is-prev {
+  transform: rotate(90deg);
+}
+
+.agent-insight-card__nav-icon.is-next {
+  transform: rotate(-90deg);
+}
+
+.agent-insight-card__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary-foreground, #fff);
+  background: var(--varo-agent-primary, #0f766e);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 9px;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentMarkdownNode.vue b/registry/components/agent-ui/AgentMarkdownNode.vue
index 41c6d960..a5d21f59 100644
--- a/registry/components/agent-ui/AgentMarkdownNode.vue
+++ b/registry/components/agent-ui/AgentMarkdownNode.vue
@@ -3,6 +3,10 @@ import type { AgentMarkdownViewNode } from '@varo-ui/ai'
 import { toAgentRichTextNodes } from '@varo-ui/ai'
 import { computed } from 'wevu'
 
+defineOptions({
+  options: { virtualHost: true },
+})
+
 const props = defineProps<{
   node: AgentMarkdownViewNode
 }>()
@@ -72,11 +76,11 @@ function headingClass(level?: number) {
     </scroll-view>
   </view>
 
-  <text v-else-if="node.kind === 'inline-code' || node.kind === 'math-inline'" class="rounded-md border border-current/25 bg-current/10 px-1 py-0.5 font-mono text-[12px] text-inherit">
+  <text v-else-if="node.kind === 'inline-code' || node.kind === 'math-inline'" class="rounded-md border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-1 py-0.5 font-mono text-[12px] text-inherit">
     {{ node.text }}
   </text>
 
-  <text v-else-if="node.kind === 'link'" class="font-semibold text-inherit underline" role="link" @click="node.href && emit('link', node.href)">
+  <text v-else-if="node.kind === 'link'" class="font-semibold text-inherit underline" role="link" tabindex="0" @click="node.href && emit('link', node.href)">
     <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
     <text v-if="!hasChildren">
       {{ node.text }}
@@ -86,7 +90,7 @@ function headingClass(level?: number) {
   <image v-else-if="node.kind === 'image' && node.href" class="my-2 h-48 w-full rounded-xl bg-[var(--varo-agent-fill)]" :src="node.href" :alt="node.alt" mode="aspectFit" />
   <view v-else-if="node.kind === 'thematic-break'" class="my-3 h-px bg-[var(--varo-agent-border)]" />
 
-  <view v-else-if="node.kind === 'blockquote'" class="my-2 border-l-[3px] border-current/50 pl-3 text-inherit">
+  <view v-else-if="node.kind === 'blockquote'" class="my-2 border-l-[3px] border-[var(--varo-agent-border-strong)] pl-3 text-inherit">
     <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
   </view>
 
@@ -100,7 +104,7 @@ function headingClass(level?: number) {
     <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
   </view>
 
-  <view v-else-if="node.kind === 'table-cell'" class="min-w-32 flex-1 border-r border-current/20 px-2.5 py-2 text-xs last:border-0" :class="[node.header && 'bg-current/5 font-bold text-inherit']">
+  <view v-else-if="node.kind === 'table-cell'" class="min-w-32 flex-1 border-r border-[var(--varo-agent-border)] px-2.5 py-2 text-xs last:border-0" :class="[node.header && 'bg-[var(--varo-agent-surface-strong)] font-bold text-inherit']">
     <rich-text v-if="richTextNodes" :nodes="richTextNodes" />
     <template v-else>
       <AgentMarkdownNode v-for="(child, index) in node.children" :key="index" :node="child" @link="emit('link', $event)" />
@@ -152,6 +156,9 @@ function headingClass(level?: number) {
 <json lang="jsonc">
 {
   "component": true,
-  "styleIsolation": "apply-shared"
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "agent-markdown-node": "./AgentMarkdownNode"
+  }
 }
 </json>
diff --git a/registry/components/agent-ui/AgentRetrievalProgress.vue b/registry/components/agent-ui/AgentRetrievalProgress.vue
index 793f8ff2..132e6fdb 100644
--- a/registry/components/agent-ui/AgentRetrievalProgress.vue
+++ b/registry/components/agent-ui/AgentRetrievalProgress.vue
@@ -26,127 +26,302 @@ function statusLabel(status: AgentRetrievalStatus) {
 }
 
 const settledCount = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
-const displayItems = computed(() => props.items.map(item => ({
+const currentItem = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentItem.value?.status === 'failed') { return `阻塞于 ${currentItem.value.title}` }
+  if (currentItem.value) { return `正在读取 ${currentItem.value.title}` }
+  if (props.items.length && settledCount.value === props.items.length) { return '检索已完成' }
+  return '等待检索'
+})
+const countLabel = computed(() => `${settledCount.value}/${props.items.length}`)
+const displayItems = computed(() => props.items.map((item, index) => ({
   canRetry: item.status === 'failed' && Boolean(item.retryable),
+  indexLabel: String(index + 1).padStart(2, '0'),
   item,
-  statusIconClass: `agent-retrieval__status-icon--${item.status}`,
+  retryLabel: `重试${item.title}`,
+  rowClass: `agent-workspace-card__row is-${item.status}`,
+  showPulse: item.status === 'reading',
   statusLabel: statusLabel(item.status),
 })))
 </script>
 
 <template>
-  <view class="agent-retrieval box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" aria-live="polite" aria-atomic="false">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ settledCount }}/{{ items.length }} 已处理
+  <view class="agent-retrieval" aria-live="polite" aria-atomic="false">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displayItems.length" class="grid gap-1 p-2">
+    <view v-if="displayItems.length" class="agent-workspace-card__body">
       <view
         v-for="entry in displayItems"
         :key="entry.item.id"
-        class="flex min-h-[56px] items-center gap-2.5 rounded-xl px-2.5 py-2"
+        :class="entry.rowClass"
         :data-status="entry.item.status"
       >
-        <view class="agent-retrieval__status-icon" :class="entry.statusIconClass" aria-hidden="true" />
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-            {{ entry.item.title }}
-          </text>
-          <text v-if="entry.item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-            {{ entry.item.detail }}
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <view v-if="entry.showPulse" class="agent-retrieval__pulse" />
+          <text v-else>
+            {{ entry.indexLabel }}
           </text>
         </view>
-        <view class="grid flex-none justify-items-end gap-0">
-          <text class="text-[10px] font-semibold text-[var(--varo-agent-text)]">
-            {{ entry.statusLabel }}
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
+              {{ entry.item.title }}
+            </text>
+            <text class="agent-workspace-card__chip">
+              {{ entry.statusLabel }}
+            </text>
+          </view>
+          <text v-if="entry.item.detail" class="agent-workspace-card__detail">
+            {{ entry.item.detail }}
           </text>
-          <button
-            v-if="entry.canRetry"
-            class="agent-native-button agent-retrieval__action"
-            type="button"
-            :aria-label="`重试${entry.item.title}`"
-            hover-class="agent-retrieval__action--pressed"
-            :hover-start-time="20"
-            :hover-stay-time="70"
-            @click="emit('retry', entry.item)"
-          >
-            重试
-          </button>
         </view>
+        <button
+          v-if="entry.canRetry"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
+          type="button"
+          :aria-label="entry.retryLabel"
+          hover-class="agent-workspace-card__action--pressed"
+          :hover-start-time="20"
+          :hover-stay-time="70"
+          @click="emit('retry', entry.item)"
+        >
+          重试
+        </button>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无检索项</text>
     </view>
   </view>
 </template>
 
 <style>
-.agent-retrieval__status-icon {
-  box-sizing: border-box;
+.agent-retrieval {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-reading {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-reading .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-retrieval__pulse {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: agent-retrieval-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
   flex: none;
-  width: 12px;
-  height: 12px;
-  background: var(--varo-agent-surface);
-  border: 2px solid var(--varo-agent-border-strong);
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
   border-radius: 999px;
 }
 
-.agent-retrieval__status-icon--reading {
-  background: var(--varo-agent-primary);
-  border-color: var(--varo-agent-primary);
-  box-shadow: 0 0 0 3px var(--varo-agent-primary-soft);
+.agent-workspace-card__row.is-read .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
 }
 
-.agent-retrieval__status-icon--read {
-  background: var(--varo-agent-success);
-  border-color: var(--varo-agent-success);
+.agent-workspace-card__row.is-reading .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
 }
 
-.agent-retrieval__status-icon--skipped {
-  height: 4px;
-  background: var(--varo-agent-border-strong);
-  border: 0;
-  border-radius: 2px;
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-skipped .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
 }
 
-.agent-retrieval__status-icon--failed {
-  background: var(--varo-agent-danger);
-  border-color: var(--varo-agent-danger);
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
 }
 
-.agent-retrieval__action {
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
-  height: 24px;
-  padding: 0 4px;
+  height: 36px;
+  padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-primary);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-retrieval__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
-  inset: -10px -4px;
+  inset: -4px;
   content: '';
 }
 
-.agent-retrieval__action--pressed {
-  background: var(--varo-agent-primary-soft);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+@keyframes agent-retrieval-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-retrieval__pulse {
+    animation: none;
+  }
 }
 </style>
 
diff --git a/registry/components/agent-ui/AgentSelectionActions.vue b/registry/components/agent-ui/AgentSelectionActions.vue
index 252d1441..b5bf3669 100644
--- a/registry/components/agent-ui/AgentSelectionActions.vue
+++ b/registry/components/agent-ui/AgentSelectionActions.vue
@@ -19,26 +19,72 @@ const emit = defineEmits<{
   select: [payload: { action: AgentSelectionAction, text: string }]
 }>()
 
-const rootClass = computed(() =>
-  cn('agent-selection-actions overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
-)
+const rootClass = computed(() => cn('agent-selection-actions', props.className))
+
+function selectAction(id: string) {
+  const action = props.actions.find(entry => entry.id === id)
+  if (action) {
+    emit('select', { action, text: props.text })
+  }
+}
 </script>
 
 <template>
   <view :class="rootClass">
-    <view class="border-b border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface-strong)] px-3.5 py-3">
-      <text class="block border-l-[3px] border-[var(--varo-agent-primary)] pl-3 text-[12px] leading-5 text-[var(--varo-agent-text)]">
-        {{ text }}
-      </text>
-    </view>
-    <view class="flex flex-wrap gap-2 p-2.5">
-      <button v-for="action in actions" :key="action.id" class="agent-native-button min-h-8 rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] px-3 text-[11px] font-bold text-[var(--varo-agent-text)]" hover-class="border-[var(--varo-agent-primary)] text-[var(--varo-agent-primary)]" :hover-start-time="20" :hover-stay-time="70" type="button" @click="emit('select', { action, text })">
+    <text class="agent-selection-actions__quote">
+      {{ text }}
+    </text>
+    <view class="agent-selection-actions__toolbar">
+      <button
+        v-for="action in actions"
+        :key="action.id"
+        class="agent-native-button agent-selection-actions__action"
+        type="button"
+        @click="selectAction(action.id)"
+      >
         {{ action.label }}
       </button>
     </view>
   </view>
 </template>
 
+<style>
+.agent-selection-actions {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-selection-actions__quote {
+  display: block;
+  padding: 14px 16px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border-left: 3px solid var(--varo-agent-primary, #0f766e);
+}
+
+.agent-selection-actions__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  padding: 10px 12px 12px;
+}
+
+.agent-selection-actions__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentSidebar.vue b/registry/components/agent-ui/AgentSidebar.vue
index e662e5aa..937c8ea2 100644
--- a/registry/components/agent-ui/AgentSidebar.vue
+++ b/registry/components/agent-ui/AgentSidebar.vue
@@ -3,7 +3,7 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentSidebarGroup, AgentSidebarItem } from './advanced-types'
 import { computed } from 'wevu'
 import { cn } from '../../lib/cn'
-import { agentChevronDownIcon } from './agent-icons'
+import { agentChatIcon, agentChevronDownIcon, agentPlusIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -29,21 +29,14 @@ const emit = defineEmits<{
 }>()
 
 const rootClass = computed(() =>
-  cn(
-    'agent-sidebar overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm transition-[width] duration-200',
-    props.collapsed ? 'w-16' : 'w-60',
-    props.className,
-  ),
+  cn('agent-sidebar', props.collapsed && 'is-collapsed', props.className),
 )
-const headerTitle = computed(() => props.collapsed ? 'AI' : props.title)
 const toggleIconClass = computed(() => props.collapsed ? '-rotate-90' : 'rotate-90')
 
 function itemClass(item: AgentSidebarItem) {
-  const active = item.id === props.activeId
   return cn(
-    'flex min-h-10 items-center gap-2 rounded-xl border-0 px-2 text-left',
-    active && 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-primary)]',
-    !active && 'bg-transparent text-[var(--varo-agent-text)]',
+    'agent-native-button agent-native-button--block agent-sidebar__item',
+    item.id === props.activeId && 'is-active',
   )
 }
 
@@ -55,46 +48,51 @@ function select(item: AgentSidebarItem) {
 
 <template>
   <view :class="rootClass" :data-collapsed="String(collapsed)">
-    <view class="flex min-h-12 items-center justify-between gap-2 border-b border-[var(--varo-agent-border)] px-3">
-      <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ headerTitle }}
-      </text>
-      <button class="agent-native-button agent-sidebar__toggle grid flex-none place-items-center rounded-lg border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" type="button" aria-label="Toggle sidebar" @click="emit('update:collapsed', !collapsed)">
-        <image class="h-3.5 w-3.5" :class="toggleIconClass" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
+    <view class="agent-sidebar__header">
+      <view class="agent-sidebar__heading">
+        <view class="agent-sidebar__brand" aria-hidden="true">
+          <image class="agent-sidebar__icon" :src="agentChatIcon" mode="aspectFit" />
+        </view>
+        <text v-if="!collapsed" class="agent-sidebar__title">
+          {{ title }}
+        </text>
+      </view>
+      <button class="agent-native-button agent-sidebar__toggle" type="button" aria-label="Toggle sidebar" @click="emit('update:collapsed', !collapsed)">
+        <image class="agent-sidebar__toggle-icon" :class="toggleIconClass" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </button>
     </view>
 
-    <button v-if="!collapsed" class="agent-native-button agent-sidebar__create mx-2.5 mt-2.5 flex min-h-9 items-center justify-center rounded-xl border border-[var(--varo-agent-border-strong)] bg-[var(--varo-agent-success-soft)] text-[12px] font-bold text-[var(--varo-agent-primary)]" type="button" @click="emit('create')">
-      + New chat
+    <button v-if="!collapsed" class="agent-native-button agent-sidebar__create" type="button" @click="emit('create')">
+      <image class="agent-sidebar__create-icon" :src="agentPlusIcon" mode="aspectFit" aria-hidden="true" />
+      <text>New chat</text>
     </button>
 
-    <view class="grid gap-3 p-2.5" role="navigation">
-      <view v-for="group in groups" :key="group.id" class="grid gap-1">
-        <text v-if="!collapsed" class="px-2 text-[10px] font-bold uppercase tracking-[.1em] text-[var(--varo-agent-muted)]">
+    <view class="agent-sidebar__nav" role="navigation">
+      <view v-for="group in groups" :key="group.id" class="agent-sidebar__group">
+        <text v-if="!collapsed" class="agent-sidebar__group-label">
           {{ group.label }}
         </text>
         <button
           v-for="item in group.items"
           :key="item.id"
           :class="itemClass(item)"
-          class="agent-native-button agent-native-button--block"
           type="button"
           :title="item.label"
           :data-active="String(item.id === activeId)"
           @click="select(item)"
         >
-          <text class="grid h-7 w-7 flex-none place-items-center rounded-lg bg-[var(--varo-agent-fill)] text-[10px] font-bold text-[var(--varo-agent-text)]" aria-hidden="true">
-            {{ item.label.charAt(0).toUpperCase() }}
-          </text>
-          <view v-if="!collapsed" class="grid min-w-0 flex-1 gap-px">
-            <text class="truncate text-[12px] font-semibold">
+          <view class="agent-sidebar__mark" aria-hidden="true">
+            <image class="agent-sidebar__icon" :src="agentChatIcon" mode="aspectFit" />
+          </view>
+          <view v-if="!collapsed" class="agent-sidebar__copy">
+            <text class="agent-sidebar__name">
               {{ item.label }}
             </text>
-            <text v-if="item.meta" class="truncate text-[10px] text-[var(--varo-agent-muted)]">
+            <text v-if="item.meta" class="agent-sidebar__meta">
               {{ item.meta }}
             </text>
           </view>
-          <text v-if="!collapsed && item.badge !== undefined" class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[var(--varo-agent-surface)] px-1 text-[10px] leading-none tabular-nums text-[var(--varo-agent-text)]">
+          <text v-if="!collapsed && item.badge !== undefined" class="agent-sidebar__badge">
             {{ item.badge }}
           </text>
         </button>
@@ -106,6 +104,168 @@ function select(item: AgentSidebarItem) {
 </template>
 
 <style>
+.agent-sidebar {
+  display: grid;
+  align-content: start;
+  width: 248px;
+  min-height: 360px;
+  overflow: hidden;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 18px;
+}
+
+.agent-sidebar.is-collapsed {
+  width: 64px;
+}
+
+.agent-sidebar__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  padding: 0 12px;
+  background: var(--varo-agent-surface, #fff);
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-sidebar__heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-sidebar__brand,
+.agent-sidebar__mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-radius: 8px;
+}
+
+.agent-sidebar__icon,
+.agent-sidebar__create-icon,
+.agent-sidebar__toggle-icon {
+  width: 13px;
+  height: 13px;
+}
+
+.agent-sidebar__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 760;
+  color: var(--varo-agent-foreground, #172033);
+  white-space: nowrap;
+}
+
+.agent-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-sidebar__create {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  margin: 10px 10px 5px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
+  border-radius: 10px;
+}
+
+.agent-sidebar__nav {
+  display: grid;
+  gap: 10px;
+  padding: 7px;
+}
+
+.agent-sidebar__group {
+  display: grid;
+  gap: 3px;
+}
+
+.agent-sidebar__group-label {
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-sidebar__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 7px;
+  color: var(--varo-agent-muted, #667085);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-sidebar__item.is-active {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+}
+
+.agent-sidebar__copy {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-sidebar__name,
+.agent-sidebar__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-sidebar__name {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.agent-sidebar__meta {
+  font-size: 10px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-sidebar__badge {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--varo-agent-text, #475569);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .agent-sidebar {
     transition: none;
diff --git a/registry/components/agent-ui/AgentSourceReceipt.vue b/registry/components/agent-ui/AgentSourceReceipt.vue
index dd501adf..ea6b5f29 100644
--- a/registry/components/agent-ui/AgentSourceReceipt.vue
+++ b/registry/components/agent-ui/AgentSourceReceipt.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentSourceReceiptItem } from './advanced-types'
 import { computed } from 'wevu'
+import { agentReceiptIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -20,65 +21,78 @@ const emit = defineEmits<{
   open: [item: AgentSourceReceiptItem]
 }>()
 
+const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
+const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+const headingHint = computed(() => {
+  if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+  if (props.summary) { return props.summary }
+  if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+  return '回答完成后核对来源'
+})
+const countLabel = computed(() => `${readCount.value}/${props.items.length}`)
 const displayItems = computed(() => props.items.map((item) => {
   const statusLabel = item.status === 'read' ? '已读取' : item.status === 'skipped' ? '已跳过' : '读取失败'
   return {
     canConnect: item.status === 'failed',
     canOpen: item.status === 'read',
+    connectLabel: `连接${item.label}`,
+    countLabel: item.itemCount === undefined ? '' : `${item.itemCount} 项`,
     item,
-    statusIconClass: `agent-source-receipt__status-icon--${item.status}`,
+    openLabel: `查看${item.label}`,
+    rowClass: `agent-workspace-card__row is-${item.status}`,
     statusLabel,
   }
 }))
-const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
 </script>
 
 <template>
-  <view class="agent-source-receipt box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-    <view class="grid min-h-12 gap-0.5 border-b border-[var(--varo-agent-border)] px-[13px] py-2.5">
-      <view class="flex items-center justify-between gap-3">
-        <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view class="agent-source-receipt" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
           {{ title }}
         </text>
-        <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-          {{ readCount }}/{{ items.length }} 已读取
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
         </text>
       </view>
-      <text v-if="summary" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-        {{ summary }}
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displayItems.length" class="grid gap-1 p-2">
+    <view v-if="displayItems.length" class="agent-workspace-card__body">
       <view
         v-for="entry in displayItems"
         :key="entry.item.id"
-        class="flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2"
+        :class="entry.rowClass"
         :data-status="entry.item.status"
       >
-        <view class="agent-source-receipt__status-icon" :class="entry.statusIconClass" aria-hidden="true" />
-        <view class="grid min-w-0 flex-1 gap-0.5">
-          <view class="flex min-w-0 items-baseline gap-2">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-workspace-card__mark" aria-hidden="true">
+          <image class="agent-workspace-card__icon" :src="agentReceiptIcon" mode="aspectFit" />
+        </view>
+        <view class="agent-workspace-card__copy">
+          <view class="agent-workspace-card__row-main">
+            <text class="agent-workspace-card__name">
               {{ entry.item.label }}
             </text>
-            <text v-if="entry.item.itemCount !== undefined" class="flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]">
-              {{ entry.item.itemCount }} 项
+            <text v-if="entry.countLabel" class="agent-workspace-card__meta">
+              {{ entry.countLabel }}
             </text>
           </view>
-          <text v-if="entry.item.detail" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
+          <text v-if="entry.item.detail" class="agent-workspace-card__detail">
             {{ entry.item.detail }}
           </text>
-          <text class="text-[10px] font-semibold text-[var(--varo-agent-text)]">
+          <text class="agent-workspace-card__chip">
             {{ entry.statusLabel }}
           </text>
         </view>
         <button
           v-if="entry.canOpen"
-          class="agent-native-button agent-source-receipt__action"
+          class="agent-native-button agent-workspace-card__action"
           type="button"
-          :aria-label="`查看${entry.item.label}`"
-          hover-class="agent-source-receipt__action--pressed"
+          :aria-label="entry.openLabel"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('open', entry.item)"
@@ -87,10 +101,10 @@ const readCount = computed(() => props.items.filter(item => item.status === 'rea
         </button>
         <button
           v-else-if="entry.canConnect"
-          class="agent-native-button agent-source-receipt__action agent-source-receipt__action--primary"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
           type="button"
-          :aria-label="`连接${entry.item.label}`"
-          hover-class="agent-source-receipt__action--pressed"
+          :aria-label="entry.connectLabel"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('connect', entry.item)"
@@ -99,39 +113,167 @@ const readCount = computed(() => props.items.filter(item => item.status === 'rea
         </button>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无来源回执</text>
     </view>
   </view>
 </template>
 
 <style>
-.agent-source-receipt__status-icon {
-  box-sizing: border-box;
+.agent-source-receipt {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: flex;
   flex: none;
-  width: 12px;
-  height: 12px;
-  background: var(--varo-agent-success);
-  border: 2px solid var(--varo-agent-success);
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__row.is-read .agent-workspace-card__mark {
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__mark {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  width: fit-content;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
   border-radius: 999px;
 }
 
-.agent-source-receipt__status-icon--skipped {
-  height: 4px;
-  background: var(--varo-agent-border-strong);
-  border: 0;
-  border-radius: 2px;
+.agent-workspace-card__row.is-read .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
 }
 
-.agent-source-receipt__status-icon--failed {
-  background: var(--varo-agent-danger);
-  border-color: var(--varo-agent-danger);
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
 }
 
-.agent-source-receipt__action {
+.agent-workspace-card__row.is-skipped .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -139,26 +281,26 @@ const readCount = computed(() => props.items.filter(item => item.status === 'rea
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-source-receipt__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-source-receipt__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-source-receipt__action--pressed {
-  background: var(--varo-agent-fill);
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
 }
 </style>
 
diff --git a/registry/components/agent-ui/AgentTaskList.vue b/registry/components/agent-ui/AgentTaskList.vue
index 4404aaef..392930e8 100644
--- a/registry/components/agent-ui/AgentTaskList.vue
+++ b/registry/components/agent-ui/AgentTaskList.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { AgentTask } from './types'
 import { computed } from 'wevu'
-import VProgress from '../ui/v-progress.vue'
-import { agentCheckIcon } from './agent-icons'
+import { agentCheckIcon, agentCloseIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -15,63 +14,307 @@ const props = withDefaults(
   },
 )
 
-function indexClass(status: AgentTask['status']) {
-  if (status === 'completed') { return 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' }
-  if (status === 'running') { return 'border-[var(--varo-agent-primary)] bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]' }
-  if (status === 'failed') { return 'border-[var(--varo-agent-danger)] bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]' }
-  return 'border-[var(--varo-agent-border-strong)] text-[var(--varo-agent-text)]'
-}
-
 const completedCount = computed(() => props.tasks.filter(task => task.status === 'completed').length)
+const currentTask = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+const headingHint = computed(() => {
+  if (currentTask.value?.status === 'failed') {
+    return `阻塞于 ${currentTask.value.title}`
+  }
+  if (currentTask.value) {
+    return `正在执行 ${currentTask.value.title}`
+  }
+  if (props.tasks.length && completedCount.value === props.tasks.length) {
+    return '全部完成'
+  }
+  return '等待开始'
+})
 const displayTasks = computed(() =>
-  props.tasks.map(task => ({
-    ...task,
-    progressStatus: task.status === 'failed' ? 'danger' as const : task.status === 'completed' ? 'success' as const : 'active' as const,
-  })),
+  props.tasks.map((task, index) => {
+    const ariaCurrent: 'step' | undefined = task.status === 'running' ? 'step' : undefined
+    return {
+      ...task,
+      ariaCurrent,
+      indexLabel: String(index + 1),
+      itemClass: `agent-task-list__item is-${task.status}`,
+      progressWidth: task.progress === undefined ? '' : `${Math.min(100, Math.max(0, task.progress))}%`,
+      statusLabel: task.status === 'completed'
+        ? '已完成'
+        : task.status === 'failed'
+          ? '失败'
+          : task.status === 'running'
+            ? '进行中'
+            : task.status === 'waiting'
+              ? '等待中'
+              : '待开始',
+    }
+  }),
 )
 </script>
 
 <template>
-  <view class="agent-tasks box-border w-full min-w-0 max-w-full overflow-hidden rounded-[14px] border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]" aria-live="polite">
-    <view class="flex min-h-11 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-[13px] font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[12px] tabular-nums text-[var(--varo-agent-muted)]">
+  <view class="agent-task-list" aria-live="polite">
+    <view class="agent-task-list__header">
+      <view class="agent-task-list__heading">
+        <text class="agent-task-list__title">
+          {{ title }}
+        </text>
+        <text class="agent-task-list__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-task-list__count">
         {{ completedCount }}/{{ tasks.length }}
       </text>
     </view>
-    <view class="grid divide-y divide-slate-50">
-      <view v-for="(task, index) in displayTasks" :key="task.id" class="flex min-h-[50px] items-center gap-2.5 px-[13px] py-2">
-        <view class="grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold" :class="[indexClass(task.status)]" aria-hidden="true">
-          <image v-if="task.status === 'completed'" class="h-3.5 w-3.5" :src="agentCheckIcon" mode="aspectFit" />
+    <view class="agent-task-list__body">
+      <view
+        v-for="task in displayTasks"
+        :key="task.id"
+        :class="task.itemClass"
+        :data-status="task.status"
+        :aria-current="task.ariaCurrent"
+      >
+        <view class="agent-task-list__marker" aria-hidden="true">
+          <image v-if="task.status === 'completed'" class="agent-task-list__icon" :src="agentCheckIcon" mode="aspectFit" />
+          <image v-else-if="task.status === 'failed'" class="agent-task-list__icon" :src="agentCloseIcon" mode="aspectFit" />
+          <view v-else-if="task.status === 'running'" class="agent-task-list__pulse" />
           <text v-else>
-            {{ index + 1 }}
+            {{ task.indexLabel }}
           </text>
         </view>
-        <view class="grid min-w-0 flex-1 gap-1.5">
-          <view class="flex items-baseline justify-between gap-2.5">
-            <text class="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-semibold text-[var(--varo-agent-foreground)]">
+        <view class="agent-task-list__copy">
+          <view class="agent-task-list__row">
+            <text class="agent-task-list__name">
               {{ task.title }}
             </text>
-            <text v-if="task.meta" class="flex-none text-[11px] text-[var(--varo-agent-muted)]">
-              {{ task.meta }}
-            </text>
+            <view class="agent-task-list__meta">
+              <text class="agent-task-list__chip">
+                {{ task.statusLabel }}
+              </text>
+              <text v-if="task.meta" class="agent-task-list__duration">
+                {{ task.meta }}
+              </text>
+            </view>
+          </view>
+          <text v-if="task.description" class="agent-task-list__description">
+            {{ task.description }}
+          </text>
+          <view v-if="task.progressWidth" class="agent-task-list__track" aria-hidden="true">
+            <view class="agent-task-list__fill" :style="`width:${task.progressWidth}`" />
           </view>
-          <VProgress
-            class="block w-full min-w-0 max-w-full overflow-hidden"
-            v-if="task.progress !== undefined"
-            :percentage="task.progress"
-            :show-text="false"
-            :stroke-width="4"
-            :status="task.progressStatus"
-          />
         </view>
       </view>
     </view>
   </view>
 </template>
 
+<style>
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__hint,
+.agent-task-list__count,
+.agent-task-list__duration,
+.agent-task-list__description {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count,
+.agent-task-list__duration {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+}
+
+.agent-task-list__item {
+  position: relative;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item.is-running .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.agent-task-list__pulse {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: agent-task-list-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  flex: 1;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-task-list__item.is-waiting .agent-task-list__name,
+.agent-task-list__item.is-idle .agent-task-list__name {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+}
+
+.agent-task-list__item.is-running .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-task-list__track {
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__fill {
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item.is-completed .agent-task-list__fill {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item.is-failed .agent-task-list__fill {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item.is-running {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+@keyframes agent-task-list-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-task-list__pulse {
+    animation: none;
+  }
+}
+</style>
+
 <json lang="jsonc">
 {
   "component": true,
diff --git a/registry/components/agent-ui/AgentTaskRunner.vue b/registry/components/agent-ui/AgentTaskRunner.vue
index 8e702801..1b1e43cd 100644
--- a/registry/components/agent-ui/AgentTaskRunner.vue
+++ b/registry/components/agent-ui/AgentTaskRunner.vue
@@ -27,69 +27,77 @@ const actionableTasks = computed(() => {
   return props.tasks.filter(task =>
     (task.status === 'failed' && task.retryable)
     || (task.status === 'waiting' && task.requiresApproval),
-  )
+  ).map(task => ({
+    approveLabel: `批准${task.title}`,
+    retryLabel: `重试${task.title}`,
+    rowClass: `agent-workspace-card__row is-${task.status}`,
+    statusLabel: task.status === 'failed' ? '执行失败' : '等待确认',
+    task,
+  }))
 })
 const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
+const showControls = computed(() => actionableTasks.value.length > 0 || canCancel.value)
 </script>
 
 <template>
-  <view class="agent-task-runner box-border grid w-full min-w-0 max-w-full gap-2.5 overflow-hidden">
+  <view class="agent-task-runner">
     <AgentTaskList class="block w-full min-w-0 max-w-full overflow-hidden" :tasks="tasks" :title="title" />
 
-    <view v-if="actionableTasks.length || canCancel" class="overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-      <view v-if="actionableTasks.length" class="grid gap-1 p-2">
+    <view v-if="showControls" class="agent-task-runner__controls">
+      <view v-if="actionableTasks.length" class="agent-workspace-card__body">
         <view
-          v-for="task in actionableTasks"
-          :key="task.id"
-          class="flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2"
+          v-for="entry in actionableTasks"
+          :key="entry.task.id"
+          :class="entry.rowClass"
+          :data-status="entry.task.status"
         >
-          <view class="grid min-w-0 flex-1 gap-0.5">
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-              {{ task.title }}
+          <view class="agent-workspace-card__copy">
+            <text class="agent-workspace-card__name">
+              {{ entry.task.title }}
             </text>
-            <text v-if="task.description" class="text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-              {{ task.description }}
+            <text v-if="entry.task.description" class="agent-workspace-card__detail">
+              {{ entry.task.description }}
             </text>
-            <text class="text-[10px] font-semibold text-[var(--varo-agent-text)]">
-              {{ task.status === 'failed' ? '执行失败' : '等待确认' }}
+            <text class="agent-workspace-card__chip">
+              {{ entry.statusLabel }}
             </text>
           </view>
           <button
-            v-if="task.status === 'failed'"
-            class="agent-native-button agent-task-runner__action"
+            v-if="entry.task.status === 'failed'"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
             type="button"
-            :aria-label="`重试${task.title}`"
-            hover-class="agent-task-runner__action--pressed"
+            :aria-label="entry.retryLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
-            @click="emit('retry', task)"
+            @click="emit('retry', entry.task)"
           >
             重试
           </button>
           <button
             v-else
-            class="agent-native-button agent-task-runner__action agent-task-runner__action--primary"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
             type="button"
-            :aria-label="`批准${task.title}`"
-            hover-class="agent-task-runner__action--pressed"
+            :aria-label="entry.approveLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
-            @click="emit('approve', task)"
+            @click="emit('approve', entry.task)"
           >
             批准
           </button>
         </view>
       </view>
 
-      <view v-if="canCancel" class="flex min-h-[60px] items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-[13px] py-2">
-        <text class="text-[11px] text-[var(--varo-agent-muted)]">
+      <view v-if="canCancel" class="agent-task-runner__cancel">
+        <text class="agent-workspace-card__hint">
           任务正在执行
         </text>
         <button
-          class="agent-native-button agent-task-runner__action agent-task-runner__action--danger"
+          class="agent-native-button agent-workspace-card__action agent-workspace-card__action--danger"
           type="button"
           aria-label="取消当前任务"
-          hover-class="agent-task-runner__action--pressed"
+          hover-class="agent-workspace-card__action--pressed"
           :hover-start-time="20"
           :hover-stay-time="70"
           @click="emit('cancel')"
@@ -102,10 +110,98 @@ const canCancel = computed(() => props.busy || props.tasks.some(task => task.sta
 </template>
 
 <style>
-.agent-task-runner__action {
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.agent-task-runner__controls {
+  overflow: hidden;
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row.is-failed {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__detail,
+.agent-workspace-card__hint {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__chip {
+  width: fit-content;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row.is-failed .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__row.is-waiting .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -113,30 +209,29 @@ const canCancel = computed(() => props.busy || props.tasks.some(task => task.sta
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-task-runner__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-task-runner__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-task-runner__action--danger {
-  color: var(--varo-agent-danger);
-  background: transparent;
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
 }
 
-.agent-task-runner__action--pressed {
+.agent-workspace-card__action--pressed {
   opacity: 0.82;
 }
 </style>
diff --git a/registry/components/agent-ui/AgentThreadVersions.vue b/registry/components/agent-ui/AgentThreadVersions.vue
index b8e09d11..e567c9bd 100644
--- a/registry/components/agent-ui/AgentThreadVersions.vue
+++ b/registry/components/agent-ui/AgentThreadVersions.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentThreadVersion } from '@varo-ui/ai'
 import { computed } from 'wevu'
+import { agentBranchIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -28,76 +29,83 @@ const displayVersions = computed(() => {
   })
   return props.versions.map((version, index) => {
     const active = version.id === props.activeId
+    const label = version.label || `版本 ${index + 1}`
     return {
       active,
+      activeAttr: String(active),
+      branchLabel: `从${label}创建分支`,
       cardStateClass: active ? 'agent-thread-versions__card--active' : '',
-      label: version.label || `版本 ${index + 1}`,
+      label,
       parentLabel: version.parentId ? labels.get(version.parentId) || version.parentId : '起始版本',
-      statusDotStateClass: active ? 'agent-thread-versions__status-dot--active' : '',
+      pinLabel: `固定${label}`,
+      selectLabel: `选择${label}`,
+      summary: version.summary || '暂无版本摘要',
       version,
     }
   })
 })
+const headingHint = computed(() => {
+  const active = displayVersions.value.find(entry => entry.active)
+  return active ? `当前 ${active.label}` : '选择一个会话版本'
+})
+const countLabel = computed(() => `${props.versions.length} 个版本`)
 </script>
 
 <template>
-  <view class="agent-thread-versions box-border w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]">
-    <view class="flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-[13px]">
-      <text class="text-xs font-bold text-[var(--varo-agent-foreground)]">
-        {{ title }}
-      </text>
-      <text class="text-[11px] tabular-nums text-[var(--varo-agent-muted)]">
-        {{ versions.length }} 个版本
+  <view class="agent-thread-versions" :aria-label="title">
+    <view class="agent-workspace-card__header">
+      <view class="agent-workspace-card__heading">
+        <text class="agent-workspace-card__title">
+          {{ title }}
+        </text>
+        <text class="agent-workspace-card__hint">
+          {{ headingHint }}
+        </text>
+      </view>
+      <text class="agent-workspace-card__count">
+        {{ countLabel }}
       </text>
     </view>
 
-    <view v-if="displayVersions.length" class="box-border grid w-full min-w-0 max-w-full gap-2 p-2.5" role="list" aria-label="会话版本列表">
+    <view v-if="displayVersions.length" class="agent-thread-versions__list" role="list" aria-label="会话版本列表">
       <view
         v-for="entry in displayVersions"
         :key="entry.version.id"
-        class="agent-thread-versions__card box-border grid w-full min-w-0 max-w-full gap-2 rounded-xl border bg-[var(--varo-agent-surface-strong)] p-3"
+        class="agent-thread-versions__card box-border grid w-full min-w-0 max-w-full gap-2"
         :class="entry.cardStateClass"
-        :data-active="String(entry.active)"
+        :data-active="entry.activeAttr"
         role="listitem"
       >
-        <view class="flex min-w-0 items-center justify-between gap-2">
-          <view class="flex min-w-0 items-center gap-2">
-            <view class="agent-thread-versions__status-dot" :class="entry.statusDotStateClass" aria-hidden="true" />
-            <text class="truncate text-[12px] font-semibold text-[var(--varo-agent-foreground)]">
-              {{ entry.label }}
-            </text>
+        <view class="agent-workspace-card__row-main">
+          <view class="agent-workspace-card__mark" aria-hidden="true">
+            <image class="agent-workspace-card__icon" :src="agentBranchIcon" mode="aspectFit" />
           </view>
-          <text v-if="entry.active" class="flex-none text-[10px] font-bold text-[var(--varo-agent-primary)]">
+          <text class="agent-workspace-card__name">
+            {{ entry.label }}
+          </text>
+          <text v-if="entry.active" class="agent-workspace-card__chip">
             当前
           </text>
-          <text v-else-if="entry.version.pinned" class="flex-none text-[10px] font-bold text-[var(--varo-agent-text)]">
+          <text v-else-if="entry.version.pinned" class="agent-workspace-card__chip">
             已固定
           </text>
         </view>
-
-        <text v-if="entry.version.summary" class="block min-h-8 whitespace-normal text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-          {{ entry.version.summary }}
-        </text>
-        <text v-else class="block min-h-8 whitespace-normal text-[11px] leading-4 text-[var(--varo-agent-muted)]">
-          暂无版本摘要
+        <text class="agent-workspace-card__detail">
+          {{ entry.summary }}
         </text>
-
-        <view class="grid gap-0.5 text-[10px] text-[var(--varo-agent-muted)]">
-          <text class="truncate">
-            来源：{{ entry.parentLabel }}
-          </text>
-          <text v-if="entry.version.createdAt" class="truncate">
+        <view class="agent-thread-versions__meta">
+          <text>来源：{{ entry.parentLabel }}</text>
+          <text v-if="entry.version.createdAt">
             创建：{{ entry.version.createdAt }}
           </text>
         </view>
-
-        <view class="flex flex-wrap gap-2 border-t border-[var(--varo-agent-border)] pt-2">
+        <view class="agent-thread-versions__actions">
           <button
             v-if="!entry.active"
-            class="agent-native-button agent-thread-versions__action agent-thread-versions__action--primary"
+            class="agent-native-button agent-workspace-card__action agent-workspace-card__action--primary"
             type="button"
-            :aria-label="`选择${entry.label}`"
-            hover-class="agent-thread-versions__action--pressed"
+            :aria-label="entry.selectLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
             @click="emit('select', entry.version)"
@@ -105,10 +113,10 @@ const displayVersions = computed(() => {
             选择
           </button>
           <button
-            class="agent-native-button agent-thread-versions__action"
+            class="agent-native-button agent-workspace-card__action"
             type="button"
-            :aria-label="`从${entry.label}创建分支`"
-            hover-class="agent-thread-versions__action--pressed"
+            :aria-label="entry.branchLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
             @click="emit('branch', entry.version)"
@@ -117,10 +125,10 @@ const displayVersions = computed(() => {
           </button>
           <button
             v-if="!entry.version.pinned"
-            class="agent-native-button agent-thread-versions__action"
+            class="agent-native-button agent-workspace-card__action"
             type="button"
-            :aria-label="`固定${entry.label}`"
-            hover-class="agent-thread-versions__action--pressed"
+            :aria-label="entry.pinLabel"
+            hover-class="agent-workspace-card__action--pressed"
             :hover-start-time="20"
             :hover-stay-time="70"
             @click="emit('pin', entry.version)"
@@ -130,38 +138,147 @@ const displayVersions = computed(() => {
         </view>
       </view>
     </view>
-    <view v-else class="grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]">
+    <view v-else class="agent-workspace-card__empty">
       <text>暂无会话版本</text>
     </view>
   </view>
 </template>
 
 <style>
+.agent-thread-versions {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__title {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__hint,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
 .agent-thread-versions__card {
-  border-color: var(--varo-agent-border);
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
 }
 
 .agent-thread-versions__card--active {
-  border-color: var(--varo-agent-primary);
-  box-shadow: 0 0 0 2px var(--varo-agent-primary-soft);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
 }
 
-.agent-thread-versions__status-dot {
+.agent-workspace-card__mark {
+  display: flex;
   flex: none;
-  width: 8px;
-  height: 8px;
-  background: var(--varo-agent-border-strong);
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__icon {
+  width: 14px;
+  height: 14px;
+}
+
+.agent-workspace-card__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-primary, #0f766e);
   border-radius: 999px;
 }
 
-.agent-thread-versions__status-dot--active {
-  background: var(--varo-agent-primary);
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
 }
 
-.agent-thread-versions__action {
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+}
+
+.agent-workspace-card__action {
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   min-width: 48px;
@@ -169,26 +286,26 @@ const displayVersions = computed(() => {
   padding: 0 10px;
   margin: 0;
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   line-height: 1;
-  color: var(--varo-agent-text);
+  color: var(--varo-agent-foreground, #172033);
   background: transparent;
   border: 0;
-  border-radius: 8px;
+  border-radius: 9px;
 }
 
-.agent-thread-versions__action::before {
+.agent-workspace-card__action::before {
   position: absolute;
   inset: -4px;
   content: '';
 }
 
-.agent-thread-versions__action--primary {
-  color: var(--varo-agent-primary);
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
 }
 
-.agent-thread-versions__action--pressed {
-  background: var(--varo-agent-fill);
+.agent-workspace-card__action--pressed {
+  background: var(--varo-agent-fill, #f1f5f9);
 }
 </style>
 
diff --git a/registry/components/agent-ui/AgentToolResult.vue b/registry/components/agent-ui/AgentToolResult.vue
index 5174d6a7..ba6703fe 100644
--- a/registry/components/agent-ui/AgentToolResult.vue
+++ b/registry/components/agent-ui/AgentToolResult.vue
@@ -3,7 +3,6 @@ import type { ClassValue } from '../../lib/cn'
 import type { AgentAdvancedStatus } from './advanced-types'
 import { computed, shallowRef } from 'wevu'
 import { cn } from '../../lib/cn'
-import { agentChevronDownIcon } from './agent-icons'
 
 const props = withDefaults(
   defineProps<{
@@ -28,58 +27,211 @@ const emit = defineEmits<{
 }>()
 
 const open = shallowRef(props.defaultOpen || props.status === 'running' || props.status === 'failed')
-const rootClass = computed(() =>
-  cn('agent-tool-result overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] shadow-sm', props.className),
+const meta = computed(() => [props.duration, props.summary].filter(Boolean).join(' · '))
+const openAttr = computed(() => String(open.value))
+const statusText = computed(() => {
+  if (props.status === 'completed') {
+    return 'Completed'
+  }
+  if (props.status === 'failed') {
+    return 'Failed'
+  }
+  if (props.status === 'running') {
+    return 'Running'
+  }
+  return 'Waiting'
+})
+const rootClass = computed(() => cn('agent-tool-result', !open.value && 'is-closed', props.className))
+const headerClass = computed(() =>
+  cn('agent-native-button agent-native-button--block agent-tool-result__header'),
+)
+const statusChipClass = computed(() =>
+  cn('agent-tool-result__status', `is-${props.status}`),
+)
+const dotClass = computed(() =>
+  cn(
+    'agent-tool-result__status-dot',
+    props.status === 'running' && 'agent-tool-result__running',
+  ),
 )
 
 function toggle() {
   open.value = !open.value
   emit('update:open', open.value)
 }
-
-function dotClass() {
-  return cn(
-    'h-2 w-2 flex-none rounded-full',
-    props.status === 'completed' && 'bg-[var(--varo-agent-success)]',
-    props.status === 'running' && 'agent-tool-result__running bg-[var(--varo-agent-primary)] shadow-[0_0_0_3px_#ccfbf1]',
-    props.status === 'failed' && 'bg-[var(--varo-agent-danger)]',
-    props.status === 'waiting' && 'bg-[var(--varo-agent-border-strong)]',
-  )
-}
 </script>
 
 <template>
-  <view :class="rootClass" :data-status="status">
-    <button class="agent-native-button agent-native-button--block flex min-h-12 items-center justify-between gap-3 border-0 bg-[var(--varo-agent-surface)] px-[13px] text-left" type="button" :aria-expanded="open" @click="toggle">
-      <view class="flex min-w-0 items-center gap-2.5">
-        <text :class="dotClass()" aria-hidden="true" />
-        <text class="truncate text-xs font-bold text-[var(--varo-agent-foreground)]">
+  <view :class="rootClass" :data-open="openAttr" :data-status="status">
+    <button :class="headerClass" type="button" :aria-expanded="open" @click="toggle">
+      <view class="agent-tool-result__command">
+        <text class="agent-tool-result__prompt" aria-hidden="true">
+          $
+        </text>
+        <text class="agent-tool-result__name">
           {{ name }}
         </text>
       </view>
-      <view class="flex flex-none items-center gap-2">
-        <text class="text-[11px] text-[var(--varo-agent-muted)]">
-          {{ duration || summary }}
+      <view class="agent-tool-result__meta">
+        <view :class="statusChipClass">
+          <view :class="dotClass" aria-hidden="true" />
+          <text>{{ statusText }}</text>
+        </view>
+        <text v-if="meta" class="agent-tool-result__duration">
+          {{ meta }}
         </text>
-        <image class="h-4 w-4 transition-transform" :class="[open && 'rotate-180']" :src="agentChevronDownIcon" mode="aspectFit" aria-hidden="true" />
       </view>
     </button>
 
-    <view v-if="open" class="border-t border-slate-800 bg-slate-950 p-3 text-slate-300">
+    <view v-if="open" class="agent-tool-result__body">
       <slot>
-        <text class="block whitespace-pre-wrap font-mono text-[11px] leading-[17px]">
+        <text class="agent-tool-result__output">
           {{ output }}
         </text>
       </slot>
     </view>
 
-    <button v-if="status === 'failed' && open" class="agent-native-button m-3 min-h-8 rounded-lg border border-[var(--varo-agent-danger)] bg-[var(--varo-agent-surface)] px-2.5 text-[11px] font-bold text-[var(--varo-agent-danger)]" type="button" @click="emit('retry')">
+    <button v-if="status === 'failed' && open" class="agent-native-button agent-tool-result__retry" type="button" @click="emit('retry')">
       Retry
     </button>
   </view>
 </template>
 
 <style>
+.agent-tool-result {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-tool-result__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  background: #111c30;
+  border: 0;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-tool-result.is-closed .agent-tool-result__header {
+  border-bottom-color: transparent;
+}
+
+.agent-tool-result__command {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agent-tool-result__prompt {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2dd4bf;
+}
+
+.agent-tool-result__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-tool-result__meta {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-tool-result__status {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 12%);
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 999px;
+}
+
+.agent-tool-result__status.is-completed,
+.agent-tool-result__status.is-running {
+  color: #5eead4;
+  background: rgb(45 212 191 / 12%);
+  border-color: rgb(45 212 191 / 24%);
+}
+
+.agent-tool-result__status.is-failed {
+  color: #fca5a5;
+  background: rgb(248 113 113 / 12%);
+  border-color: rgb(248 113 113 / 24%);
+}
+
+.agent-tool-result__status-dot {
+  width: 7px;
+  height: 7px;
+  background: #94a3b8;
+  border-radius: 999px;
+}
+
+.agent-tool-result__status.is-completed .agent-tool-result__status-dot,
+.agent-tool-result__status.is-running .agent-tool-result__status-dot {
+  background: #2dd4bf;
+}
+
+.agent-tool-result__status.is-failed .agent-tool-result__status-dot {
+  background: #f87171;
+}
+
+.agent-tool-result__duration {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: #94a3b8;
+}
+
+.agent-tool-result__body {
+  padding: 12px;
+  color: #cbd5e1;
+  background: #0f172a;
+}
+
+.agent-tool-result__output {
+  display: block;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.agent-tool-result__retry {
+  min-height: 32px;
+  padding: 0 10px;
+  margin: 0 12px 12px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #fecaca;
+  background: rgb(248 113 113 / 10%);
+  border: 1px solid rgb(248 113 113 / 28%);
+  border-radius: 9px;
+}
+
 .agent-tool-result__running {
   animation: agent-tool-result-pulse 1s ease-in-out infinite;
 }
diff --git a/registry/components/agent-ui/advanced.ts b/registry/components/agent-ui/advanced.ts
index cd3e25d1..77980eab 100644
--- a/registry/components/agent-ui/advanced.ts
+++ b/registry/components/agent-ui/advanced.ts
@@ -78,6 +78,39 @@ function renderStatus(status: AgentAdvancedStatus) {
   ])
 }
 
+function activityKindLabel(kind: AgentActivityItem['kind']) {
+  if (kind === 'reasoning') { return '推理' }
+  if (kind === 'search') { return '检索' }
+  if (kind === 'tool') { return '工具' }
+  return '轨迹'
+}
+
+function renderActivityKindIcon(kind: AgentActivityItem['kind']) {
+  const children = kind === 'search'
+    ? [h('circle', { cx: '11', cy: '11', r: '6' }), h('path', { d: 'm16 16 4 4' })]
+    : [h('path', {
+        d: kind === 'reasoning'
+          ? 'M12 3.5 13.4 8 18 9.2 13.4 10.5 12 15l-1.4-4.5L6 9.2 10.6 8 12 3.5zM18 13.5l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8.8-2.4z'
+          : kind === 'tool'
+            ? 'M8 7h8M8 12h8M8 17h5'
+            : 'M7 7h10M7 12h10M7 17h6',
+      })]
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, children)
+}
+
+function citationMark(item: AgentCitationItem) {
+  const source = item.domain || item.title
+  return source.trim().charAt(0).toUpperCase() || '#'
+}
+
 function renderPlusIcon() {
   return h('svg', {
     'fill': 'none',
@@ -91,6 +124,30 @@ function renderPlusIcon() {
   }, [h('path', { d: 'M12 5v14M5 12h14' })])
 }
 
+function renderChatIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, [h('path', { d: 'M5 6h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3v-3H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z' })])
+}
+
+function renderSearchIcon() {
+  return h('svg', {
+    'aria-hidden': 'true',
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+  }, [h('circle', { cx: '11', cy: '11', r: '6' }), h('path', { d: 'm16 16 4 4' })])
+}
+
 export const AgentRadioGroup = defineComponent({
   name: 'AgentRadioGroup',
   props: {
@@ -488,7 +545,8 @@ export const AgentToolResult = defineComponent({
   emits: { 'retry': () => true, 'update:open': (_value: boolean) => true },
   setup(props, { emit, slots }) {
     const open = shallowRef(props.defaultOpen || props.status === 'running' || props.status === 'failed')
-    return () => h('section', { 'class': 'agent-tool-result', 'data-status': props.status }, [
+    const meta = computed(() => [props.duration, props.summary].filter(Boolean).join(' · '))
+    return () => h('section', { 'class': 'agent-tool-result', 'data-open': String(open.value), 'data-status': props.status }, [
       h('button', {
         'class': 'agent-tool-result__header',
         'type': 'button',
@@ -498,8 +556,14 @@ export const AgentToolResult = defineComponent({
           emit('update:open', open.value)
         },
       }, [
-        h('span', [renderStatus(props.status), h('strong', props.name)]),
-        h('small', props.duration || props.summary),
+        h('span', { class: 'agent-tool-result__command' }, [
+          h('span', { 'class': 'agent-tool-result__prompt', 'aria-hidden': 'true' }, '$'),
+          h('strong', props.name),
+        ]),
+        h('span', { class: 'agent-tool-result__meta' }, [
+          renderStatus(props.status),
+          meta.value ? h('small', meta.value) : null,
+        ]),
       ]),
       open.value
         ? h('div', { class: 'agent-tool-result__body' }, slots.default?.() ?? [h('pre', props.output)])
@@ -688,12 +752,22 @@ export const AgentCitations = defineComponent({
           open.value = !open.value
           emit('update:open', open.value)
         },
-      }, [h('strong', props.title), h('span', `${props.items.length}`)]),
+      }, [
+        h('span', { class: 'agent-citations__heading' }, [
+          h('strong', props.title),
+          h('small', open.value ? '点击来源打开原文' : '展开查看引用来源'),
+        ]),
+        h('span', { class: 'agent-citations__count' }, `${props.items.length}`),
+      ]),
       open.value
-        ? h('ol', props.items.map((item, index) => h('li', { key: item.id }, [
-            h('button', { type: 'button', onClick: () => emit('open', item) }, [
-              h('span', String(index + 1)),
-              h('span', [h('strong', item.title), h('small', item.domain || item.description || item.url)]),
+        ? h('ol', { class: 'agent-citations__list' }, props.items.map(item => h('li', { key: item.id }, [
+            h('button', { class: 'agent-citations__item', type: 'button', onClick: () => emit('open', item) }, [
+              h('span', { 'class': 'agent-citations__mark', 'aria-hidden': 'true' }, citationMark(item)),
+              h('span', { class: 'agent-citations__copy' }, [
+                h('strong', item.title),
+                h('small', item.domain || item.url || ''),
+                item.description ? h('p', item.description) : null,
+              ]),
             ]),
           ])))
         : null,
@@ -708,12 +782,39 @@ export const AgentActivity = defineComponent({
     title: { type: String, default: 'Agent activity' },
   },
   setup(props) {
+    const completed = computed(() => props.items.filter(item => item.status === 'completed').length)
+    const current = computed(() => props.items.find(item => item.status === 'running' || item.status === 'failed'))
     return () => h('section', { 'class': 'agent-activity', 'aria-live': 'polite' }, [
-      h('header', [h('strong', props.title), h('span', `${props.items.filter(item => item.status === 'completed').length}/${props.items.length}`)]),
-      h('ol', props.items.map(item => h('li', { 'data-kind': item.kind, 'data-status': item.status, 'key': item.id }, [
-        h('i', { 'aria-hidden': 'true' }),
-        h('div', [h('span', [h('strong', item.title), item.duration ? h('small', item.duration) : null]), item.detail ? h('p', item.detail) : null]),
-        renderStatus(item.status),
+      h('header', { class: 'agent-activity__header' }, [
+        h('span', { class: 'agent-activity__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.items.length && props.items.length ? '全部完成' : '等待开始'),
+        ]),
+        h('span', { class: 'agent-activity__count' }, `${completed.value}/${props.items.length}`),
+      ]),
+      h('ol', { class: 'agent-activity__body' }, props.items.map(item => h('li', {
+        'class': 'agent-activity__item',
+        'data-kind': item.kind,
+        'data-status': item.status,
+        'aria-current': item.status === 'running' ? 'step' : undefined,
+        'key': item.id,
+      }, [
+        h('span', { 'class': 'agent-activity__kind', 'aria-hidden': 'true' }, [
+          renderActivityKindIcon(item.kind),
+        ]),
+        h('span', { class: 'agent-activity__copy' }, [
+          h('span', { class: 'agent-activity__row' }, [
+            h('strong', item.title),
+            renderStatus(item.status),
+          ]),
+          h('span', { class: 'agent-activity__meta' }, [
+            h('small', { class: 'agent-activity__kind-label' }, activityKindLabel(item.kind)),
+            item.duration ? h('small', item.duration) : null,
+          ]),
+          item.detail ? h('p', item.detail) : null,
+        ]),
       ]))),
     ])
   },
@@ -735,13 +836,26 @@ export const AgentSidebar = defineComponent({
   },
   setup(props, { emit, slots }) {
     return () => h('aside', { 'class': 'agent-sidebar', 'data-collapsed': String(props.collapsed) }, [
-      h('header', [
-        h('strong', props.collapsed ? 'AI' : props.title),
-        h('button', { 'type': 'button', 'aria-label': 'Toggle sidebar', 'onClick': () => emit('update:collapsed', !props.collapsed) }, props.collapsed ? '›' : '‹'),
+      h('header', { class: 'agent-sidebar__header' }, [
+        h('span', { class: 'agent-sidebar__heading' }, [
+          h('span', { 'class': 'agent-sidebar__brand', 'aria-hidden': 'true' }, [renderChatIcon()]),
+          !props.collapsed ? h('strong', props.title) : null,
+        ]),
+        h('button', {
+          'class': 'agent-sidebar__toggle',
+          'type': 'button',
+          'aria-label': 'Toggle sidebar',
+          'onClick': () => emit('update:collapsed', !props.collapsed),
+        }, props.collapsed ? '›' : '‹'),
       ]),
-      !props.collapsed ? h('button', { class: 'agent-sidebar__create', type: 'button', onClick: () => emit('create') }, '+ New chat') : null,
-      h('nav', props.groups.map(group => h('section', { key: group.id }, [
-        !props.collapsed ? h('small', group.label) : null,
+      !props.collapsed
+        ? h('button', { class: 'agent-sidebar__create', type: 'button', onClick: () => emit('create') }, [
+            renderPlusIcon(),
+            'New chat',
+          ])
+        : null,
+      h('nav', { class: 'agent-sidebar__nav', role: 'navigation' }, props.groups.map(group => h('section', { class: 'agent-sidebar__group', key: group.id }, [
+        !props.collapsed ? h('small', { class: 'agent-sidebar__group-label' }, group.label) : null,
         ...group.items.map(item => h('button', {
           'class': 'agent-sidebar__item',
           'data-active': String(item.id === props.activeId),
@@ -753,9 +867,14 @@ export const AgentSidebar = defineComponent({
             emit('select', item)
           },
         }, [
-          h('i', { 'aria-hidden': 'true' }, item.label.charAt(0).toUpperCase()),
-          !props.collapsed ? h('span', [h('strong', item.label), item.meta ? h('small', item.meta) : null]) : null,
-          !props.collapsed && item.badge !== undefined ? h('b', String(item.badge)) : null,
+          h('span', { 'class': 'agent-sidebar__mark', 'aria-hidden': 'true' }, [renderChatIcon()]),
+          !props.collapsed
+            ? h('span', { class: 'agent-sidebar__copy' }, [
+                h('strong', item.label),
+                item.meta ? h('small', item.meta) : null,
+              ])
+            : null,
+          !props.collapsed && item.badge !== undefined ? h('b', { class: 'agent-sidebar__badge' }, String(item.badge)) : null,
         ])),
       ]))),
       slots.footer?.(),
@@ -772,11 +891,28 @@ export const AgentContextCard = defineComponent({
   emits: { open: (_chunk: AgentContextChunk) => true },
   setup(props, { emit }) {
     return () => h('section', { class: 'agent-context-card' }, [
-      h('header', [h('strong', props.title), h('span', `${props.chunks.length} chunks`)]),
-      h('div', props.chunks.map(chunk => h('article', { key: chunk.id }, [
-        h('header', [h('strong', chunk.label || chunk.source || 'Context'), chunk.content.length ? h('small', `${chunk.content.length} chars`) : null]),
-        h('p', chunk.content),
-        h('footer', [h('span', chunk.sourceType || 'Source'), h('button', { type: 'button', onClick: () => emit('open', chunk) }, chunk.source || 'Open')]),
+      h('header', { class: 'agent-context-card__header' }, [
+        h('span', { class: 'agent-context-card__heading' }, [
+          h('strong', props.title),
+          h('small', props.chunks.length ? '来自检索结果的上下文片段' : '暂无检索上下文'),
+        ]),
+        h('span', { class: 'agent-context-card__count' }, `${props.chunks.length}`),
+      ]),
+      h('ol', { class: 'agent-context-card__list' }, props.chunks.map((chunk, index) => h('li', { key: chunk.id }, [
+        h('article', { class: 'agent-context-card__chunk' }, [
+          h('header', { class: 'agent-context-card__chunk-head' }, [
+            h('span', { 'class': 'agent-context-card__index', 'aria-hidden': 'true' }, String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-context-card__chunk-copy' }, [
+              h('strong', chunk.label || chunk.source || 'Context'),
+              chunk.sourceType ? h('small', { class: 'agent-context-card__type' }, chunk.sourceType) : null,
+            ]),
+          ]),
+          h('p', { class: 'agent-context-card__quote' }, chunk.content),
+          h('footer', { class: 'agent-context-card__chunk-foot' }, [
+            h('small', chunk.source || 'Source'),
+            h('button', { class: 'agent-context-card__open', type: 'button', onClick: () => emit('open', chunk) }, '打开'),
+          ]),
+        ]),
       ]))),
     ])
   },
@@ -797,11 +933,27 @@ export const AgentInsightCard = defineComponent({
       emit('update:current', (props.current + delta + props.insights.length) % props.insights.length)
     }
     return () => h('article', { 'class': 'agent-insight-card', 'data-tone': active.value?.tone || 'default' }, [
-      h('header', [h('strong', props.title), h('span', `${props.current + 1}/${props.insights.length}`)]),
-      active.value ? h('div', [active.value.label ? h('small', active.value.label) : null, h('h3', active.value.description), active.value.value ? h('b', active.value.value) : null]) : h('p', 'No insights'),
-      h('footer', [
-        h('span', [h('button', { type: 'button', onClick: () => move(-1) }, '‹'), h('button', { type: 'button', onClick: () => move(1) }, '›')]),
-        active.value?.action ? h('button', { type: 'button', onClick: () => emit('action', active.value!) }, active.value.action) : null,
+      h('header', { class: 'agent-insight-card__header' }, [
+        h('span', { class: 'agent-insight-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value?.label || '运行指标'),
+        ]),
+        h('span', { class: 'agent-insight-card__count' }, `${props.insights.length ? props.current + 1 : 0}/${props.insights.length}`),
+      ]),
+      active.value
+        ? h('div', { class: 'agent-insight-card__body' }, [
+            active.value.value ? h('b', { class: 'agent-insight-card__value' }, active.value.value) : null,
+            h('p', { class: 'agent-insight-card__copy' }, active.value.description),
+          ])
+        : h('p', { class: 'agent-insight-card__empty' }, '暂无洞察'),
+      h('footer', { class: 'agent-insight-card__footer' }, [
+        h('span', { class: 'agent-insight-card__nav' }, [
+          h('button', { 'class': 'agent-insight-card__nav-btn', 'type': 'button', 'aria-label': 'Previous insight', 'onClick': () => move(-1) }, '‹'),
+          h('button', { 'class': 'agent-insight-card__nav-btn', 'type': 'button', 'aria-label': 'Next insight', 'onClick': () => move(1) }, '›'),
+        ]),
+        active.value?.action
+          ? h('button', { class: 'agent-insight-card__action', type: 'button', onClick: () => emit('action', active.value!) }, active.value.action)
+          : null,
       ]),
     ])
   },
@@ -816,8 +968,9 @@ export const AgentSelectionActions = defineComponent({
   emits: { select: (_payload: { action: AgentSelectionAction, text: string }) => true },
   setup(props, { emit }) {
     return () => h('section', { class: 'agent-selection-actions' }, [
-      h('blockquote', props.text),
-      h('div', props.actions.map(action => h('button', {
+      h('p', { class: 'agent-selection-actions__quote' }, props.text),
+      h('div', { class: 'agent-selection-actions__toolbar' }, props.actions.map(action => h('button', {
+        class: 'agent-selection-actions__action',
         key: action.id,
         type: 'button',
         onClick: () => emit('select', { action, text: props.text }),
@@ -937,14 +1090,38 @@ export const AgentCommandSearch = defineComponent({
       const query = props.modelValue.trim().toLowerCase()
       return query ? props.items.filter(item => `${item.label} ${item.description ?? ''} ${item.group ?? ''}`.toLowerCase().includes(query)) : props.items
     })
+    const groupedItems = computed(() => {
+      const groups = new Map<string, AgentSearchItem[]>()
+      for (const item of visibleItems.value) {
+        const key = item.group || 'Commands'
+        const list = groups.get(key)
+        if (list) { list.push(item) }
+        else { groups.set(key, [item]) }
+      }
+      return [...groups.entries()].map(([label, items]) => ({ label, items }))
+    })
     return () => h('section', { class: 'agent-command-search' }, [
-      h('label', [h('span', '⌕'), h('input', { value: props.modelValue, placeholder: props.placeholder, onInput: (event: Event) => emit('update:modelValue', eventValue(event)) })]),
-      visibleItems.value.length
-        ? h('div', visibleItems.value.map(item => h('button', { key: item.id, type: 'button', onClick: () => emit('select', item) }, [
-            h('span', [h('strong', item.label), item.description ? h('small', item.description) : null]),
-            item.shortcut ? h('kbd', item.shortcut) : null,
-          ])))
-        : h('p', props.emptyText),
+      h('label', { class: 'agent-command-search__field' }, [
+        h('span', { 'class': 'agent-command-search__icon', 'aria-hidden': 'true' }, [renderSearchIcon()]),
+        h('input', { value: props.modelValue, placeholder: props.placeholder, onInput: (event: Event) => emit('update:modelValue', eventValue(event)) }),
+      ]),
+      groupedItems.value.length
+        ? h('div', { class: 'agent-command-search__list' }, groupedItems.value.flatMap(group => [
+            h('small', { class: 'agent-command-search__group', key: `group-${group.label}` }, group.label),
+            ...group.items.map(item => h('button', {
+              class: 'agent-command-search__item',
+              key: item.id,
+              type: 'button',
+              onClick: () => emit('select', item),
+            }, [
+              h('span', { class: 'agent-command-search__copy' }, [
+                h('strong', item.label),
+                item.description ? h('small', item.description) : null,
+              ]),
+              item.shortcut ? h('kbd', item.shortcut) : null,
+            ])),
+          ]))
+        : h('p', { class: 'agent-command-search__empty' }, props.emptyText),
     ])
   },
 })
@@ -957,17 +1134,36 @@ export const AgentFlowchart = defineComponent({
   },
   emits: { add: (_afterId?: string) => true, select: (_node: AgentFlowNode) => true },
   setup(props, { emit }) {
+    const typeLabel = (type: AgentFlowNode['type']) => {
+      if (type === 'trigger') { return '触发' }
+      if (type === 'condition') { return '条件' }
+      if (type === 'action') { return '动作' }
+      return '结果'
+    }
     return () => h('section', { class: 'agent-flowchart' }, [
-      h('header', [
-        h('strong', props.title),
-        h('button', { type: 'button', onClick: () => emit('add', undefined) }, [renderPlusIcon(), ' Step']),
+      h('header', { class: 'agent-flowchart__header' }, [
+        h('span', { class: 'agent-flowchart__heading' }, [
+          h('strong', props.title),
+          h('small', `${props.nodes.length} 个步骤`),
+        ]),
+        h('button', { class: 'agent-flowchart__add', type: 'button', onClick: () => emit('add', undefined) }, [renderPlusIcon(), 'Step']),
       ]),
-      h('div', props.nodes.flatMap((node, index): VNodeChild[] => [
-        h('button', { 'class': 'agent-flowchart__node', 'data-type': node.type, 'key': node.id, 'type': 'button', 'onClick': () => emit('select', node) }, [
-          h('small', node.type),
+      h('div', { class: 'agent-flowchart__canvas' }, props.nodes.flatMap((node, index): VNodeChild[] => [
+        h('button', {
+          'class': 'agent-flowchart__node',
+          'data-type': node.type,
+          'data-status': node.status || 'waiting',
+          'key': node.id,
+          'type': 'button',
+          'onClick': () => emit('select', node),
+        }, [
+          h('span', { class: 'agent-flowchart__node-head' }, [
+            h('span', { 'class': 'agent-flowchart__index', 'aria-hidden': 'true' }, String(index + 1).padStart(2, '0')),
+            h('small', { class: 'agent-flowchart__type' }, typeLabel(node.type)),
+            node.status ? renderStatus(node.status) : null,
+          ]),
           h('strong', node.label),
-          node.detail ? h('span', node.detail) : null,
-          node.status ? renderStatus(node.status) : null,
+          node.detail ? h('span', { class: 'agent-flowchart__detail' }, node.detail) : null,
         ]),
         index < props.nodes.length - 1
           ? h('button', {
@@ -1039,9 +1235,17 @@ export const AgentFineTune = defineComponent({
     }
 
     return () => h('section', { class: 'agent-fine-tune' }, [
-      h('header', [h('strong', props.title), h('span', 'Adjust')]),
-      h('div', props.controls.map(renderControl)),
-      h('footer', [h('button', { type: 'button', onClick: () => emit('apply', props.controls) }, 'Apply changes')]),
+      h('header', { class: 'agent-fine-tune__header' }, [
+        h('span', { class: 'agent-fine-tune__heading' }, [
+          h('strong', props.title),
+          h('small', '调整生成参数后立即生效'),
+        ]),
+        h('span', { class: 'agent-fine-tune__count' }, `${props.controls.length} 项`),
+      ]),
+      h('div', { class: 'agent-fine-tune__grid' }, props.controls.map(renderControl)),
+      h('footer', { class: 'agent-fine-tune__footer' }, [
+        h('button', { class: 'agent-fine-tune__apply', type: 'button', onClick: () => emit('apply', props.controls) }, 'Apply changes'),
+      ]),
     ])
   },
 })
diff --git a/registry/components/agent-ui/agent-advanced.css b/registry/components/agent-ui/agent-advanced.css
index 1716ae61..84e5799f 100644
--- a/registry/components/agent-ui/agent-advanced.css
+++ b/registry/components/agent-ui/agent-advanced.css
@@ -161,10 +161,88 @@
 .agent-code-block__cursor { position: absolute; right: 12px; bottom: 12px; width: 6px; height: 14px; background: #2dd4bf; animation: varo-agent-code-cursor .75s steps(1) infinite; }
 
 @keyframes varo-agent-code-cursor { 50% { opacity: 0; } }
-.agent-tool-result, .agent-citations, .agent-activity, .agent-context-card, .agent-insight-card, .agent-tool-approval, .agent-fine-tune { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; }
-.agent-tool-result__header, .agent-citations__trigger { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 13px; text-align: left; background: var(--agent-surface); border: 0; }
-.agent-tool-result__header > span { display: flex; gap: 9px; align-items: center; min-width: 0; }
-.agent-tool-result__header strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--agent-text); white-space: nowrap; }
+.agent-citations, .agent-activity, .agent-context-card, .agent-insight-card, .agent-tool-approval, .agent-fine-tune { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; }
+
+
+.agent-tool-result {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-tool-result__header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  color: inherit;
+  text-align: left;
+  background: #111c30;
+  border: 0;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-tool-result[data-open='false'] .agent-tool-result__header {
+  border-bottom-color: transparent;
+}
+
+.agent-tool-result__command {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agent-tool-result__prompt {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #2dd4bf;
+}
+
+.agent-tool-result__command strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-tool-result__meta {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-tool-result__meta .agent-advanced__status {
+  padding: 3px 8px;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 12%);
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 999px;
+}
+
+.agent-tool-result__meta .agent-advanced__status[data-status='completed'],
+.agent-tool-result__meta .agent-advanced__status[data-status='running'] {
+  color: #5eead4;
+  background: rgb(45 212 191 / 12%);
+  border-color: rgb(45 212 191 / 24%);
+}
+
+.agent-tool-result__meta .agent-advanced__status[data-status='failed'] {
+  color: #fca5a5;
+  background: rgb(248 113 113 / 12%);
+  border-color: rgb(248 113 113 / 24%);
+}
 
 .agent-file-diff {
   --agent-diff-surface: var(--varo-agent-surface, #fff);
@@ -397,9 +475,9 @@
 .agent-file-diff__action:hover { color: var(--agent-diff-text); border-color: #99a7b6; }
 .agent-file-diff__action:last-child { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); box-shadow: 0 5px 12px rgb(15 118 110 / 20%); }
 .agent-file-diff__action:disabled { cursor: not-allowed; opacity: .5; }
-.agent-tool-approval > footer, .agent-insight-card > footer, .agent-fine-tune > footer, .agent-image-generation > footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid var(--agent-border); }
-.agent-tool-approval button, .agent-insight-card button, .agent-fine-tune button, .agent-image-generation button { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-text-regular); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 10px; }
-.agent-tool-approval > footer button:last-child, .agent-fine-tune > footer button { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); }
+.agent-tool-approval > footer, .agent-image-generation > footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid var(--agent-border); }
+.agent-tool-approval button, .agent-image-generation button { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-text-regular); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 10px; }
+.agent-tool-approval > footer button:last-child { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); }
 
 @media (max-width: 600px) {
   .agent-file-diff__header { gap: 7px; padding-inline: 9px; }
@@ -411,10 +489,10 @@
   .agent-file-diff__hunk-count { display: none; }
   .agent-file-diff__footer { padding-inline: 9px; }
 }
-.agent-tool-result__header small { font-size: 11px; color: var(--agent-muted); }
-.agent-tool-result__body { padding: 12px; color: #cbd5e1; background: #0f172a; border-top: 1px solid var(--agent-border); }
-.agent-tool-result__body pre { margin: 0; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 11px; white-space: pre-wrap; }
-.agent-tool-result__retry { min-height: 32px; padding: 0 10px; margin: 0 12px 12px; font-size: 11px; color: #dc2626; background: var(--agent-surface); border: 1px solid #fecaca; border-radius: 9px; }
+.agent-tool-result__header small { font-size: 11px; font-variant-numeric: tabular-nums; color: #94a3b8; }
+.agent-tool-result__body { padding: 12px; color: #cbd5e1; background: #0f172a; }
+.agent-tool-result__body pre { margin: 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
+.agent-tool-result__retry { min-height: 32px; padding: 0 10px; margin: 0 12px 12px; font-size: 11px; font-weight: 750; color: #fecaca; background: rgb(248 113 113 / 10%); border: 1px solid rgb(248 113 113 / 28%); border-radius: 9px; }
 .agent-image-generation { margin: 0; }
 
 .agent-image-generation__canvas {
@@ -471,65 +549,747 @@
 .agent-tool-approval dt { color: var(--agent-muted); }
 .agent-tool-approval dd { margin: 0; font-weight: 650; color: var(--agent-text); text-align: right; }
 .agent-tool-approval > label { display: flex; gap: 7px; align-items: center; padding: 0 14px 12px; font-size: 11px; color: var(--agent-text-regular); }
-.agent-citations__trigger strong { font-size: 12px; }
-.agent-citations__trigger span { display: grid; place-items: center; width: 24px; height: 24px; font-size: 11px; color: var(--agent-muted); background: var(--agent-fill); border-radius: 999px; }
-.agent-citations ol { display: grid; gap: 7px; padding: 0 12px 12px; margin: 0; list-style: none; }
-.agent-citations li button { display: flex; gap: 9px; align-items: center; width: 100%; min-height: 42px; padding: 6px 9px; text-align: left; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 11px; }
-.agent-citations li button > span:first-child { display: grid; flex: none; place-items: center; width: 22px; height: 22px; font-size: 10px; color: var(--agent-muted); background: var(--agent-surface); border-radius: 999px; }
-.agent-citations li button > span:last-child { display: grid; min-width: 0; }
-.agent-citations li strong, .agent-citations li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-citations li strong { font-size: 11px; color: var(--agent-text); }
-.agent-citations li small { font-size: 10px; color: var(--agent-muted); }
-.agent-activity > header, .agent-context-card > header, .agent-insight-card > header, .agent-fine-tune > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border-bottom: 1px solid var(--agent-border); }
-.agent-activity > header strong, .agent-context-card > header strong, .agent-insight-card > header strong, .agent-fine-tune > header strong { font-size: 12px; }
-.agent-activity > header span, .agent-context-card > header span, .agent-insight-card > header span, .agent-fine-tune > header span { font-size: 11px; color: var(--agent-muted); }
-.agent-activity ol { display: grid; gap: 0; padding: 10px 13px 13px; margin: 0; list-style: none; }
-.agent-activity li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; padding: 8px 0; }
-.agent-activity li > i { width: 9px; height: 9px; margin-top: 4px; background: var(--agent-muted); border: 2px solid var(--agent-surface); border-radius: 999px; box-shadow: 0 0 0 1px var(--agent-border-strong); }
-.agent-activity li[data-status='running'] > i { background: var(--agent-primary); }
-.agent-activity li[data-status='completed'] > i { background: var(--agent-success); }
-.agent-activity li > div { display: grid; min-width: 0; }
-.agent-activity li > div > span { display: flex; gap: 8px; justify-content: space-between; }
-.agent-activity li strong { font-size: 11px; color: var(--agent-text); }
-.agent-activity li small, .agent-activity li p { font-size: 10px; color: var(--agent-muted); }
-.agent-activity li p { margin: 2px 0 0; }
-.agent-sidebar { display: grid; align-content: start; width: 248px; min-height: 360px; overflow: hidden; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 18px; transition: width .2s ease; }
+
+.agent-citations__trigger {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  text-align: left;
+  background: var(--agent-surface);
+  border: 0;
+}
+
+.agent-citations__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-citations__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-citations__heading small,
+.agent-citations__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-citations__count {
+  display: grid;
+  flex: none;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 7px;
+  font-variant-numeric: tabular-nums;
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-citations__list {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-citations__list > li {
+  display: block;
+  list-style: none;
+}
+
+.agent-citations__list > li::marker {
+  content: none;
+}
+
+.agent-citations__item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  width: 100%;
+  min-height: 58px;
+  padding: 9px 10px;
+  text-align: left;
+  background: var(--agent-surface-strong);
+  border: 1px solid var(--agent-border);
+  border-radius: 12px;
+}
+
+.agent-citations__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-radius: 9px;
+}
+
+.agent-citations__copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-citations__copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  color: var(--agent-text);
+  white-space: nowrap;
+}
+
+.agent-citations__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+  white-space: nowrap;
+}
+
+.agent-citations__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+.agent-fine-tune__header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; min-height: 52px; padding: 12px 14px 11px; border-bottom: 1px solid var(--agent-border); }
+.agent-fine-tune__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-fine-tune__heading strong { font-size: 13px; font-weight: 760; line-height: 18px; }
+
+.agent-fine-tune__heading small,
+.agent-fine-tune__count { font-size: 11px; line-height: 16px; color: var(--agent-muted); }
+.agent-fine-tune__count { flex: none; font-variant-numeric: tabular-nums; }
+
+.agent-activity__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-activity__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-activity__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-activity__heading small,
+.agent-activity__count,
+.agent-activity__meta small {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-activity__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-activity__body {
+  display: grid;
+  padding: 8px 10px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-activity__item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 58px;
+  padding: 9px 10px;
+  list-style: none;
+  border-radius: 12px;
+}
+
+.agent-activity__item::marker {
+  content: none;
+}
+
+.agent-activity__item[data-status='running'] {
+  background: color-mix(in srgb, var(--agent-primary-soft) 70%, transparent);
+}
+
+.agent-activity__item[data-status='failed'] {
+  background: color-mix(in srgb, var(--agent-danger-soft) 70%, transparent);
+}
+
+.agent-activity__kind {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border: 1px solid var(--agent-border);
+  border-radius: 9px;
+}
+
+.agent-activity__kind svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.agent-activity__item[data-kind='reasoning'] .agent-activity__kind {
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-color: color-mix(in srgb, var(--agent-primary) 28%, transparent);
+}
+
+.agent-activity__item[data-kind='search'] .agent-activity__kind {
+  color: var(--varo-agent-source-blue, #2563eb);
+  background: var(--varo-agent-source-blue-soft, #eff6ff);
+  border-color: color-mix(in srgb, var(--varo-agent-source-blue, #2563eb) 28%, transparent);
+}
+
+.agent-activity__item[data-kind='tool'] .agent-activity__kind {
+  color: var(--varo-agent-source-violet, #7c3aed);
+  background: var(--varo-agent-source-violet-soft, #f5f3ff);
+  border-color: color-mix(in srgb, var(--varo-agent-source-violet, #7c3aed) 28%, transparent);
+}
+
+.agent-activity__item[data-status='running'] .agent-activity__kind {
+  animation: varo-agent-advanced-pulse 1s ease-in-out infinite;
+}
+
+.agent-activity__copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-activity__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-activity__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-activity__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-activity__kind-label {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-activity__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-activity__item[data-status='running'] .agent-activity__kind {
+    animation: none;
+  }
+}
+
+.agent-sidebar {
+  display: grid;
+  align-content: start;
+  width: 248px;
+  min-height: 360px;
+  overflow: hidden;
+  background: var(--agent-surface-strong);
+  border: 1px solid var(--agent-border);
+  border-radius: 18px;
+  transition: width .2s ease;
+}
 .agent-sidebar[data-collapsed='true'] { width: 64px; }
-.agent-sidebar > header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 12px; background: var(--agent-surface); border-bottom: 1px solid var(--agent-border); }
-.agent-sidebar > header strong { font-size: 12px; }
-.agent-sidebar > header button { display: grid; place-items: center; width: 28px; height: 28px; color: var(--agent-muted); background: var(--agent-fill); border: 0; border-radius: 9px; }
-.agent-sidebar__create { min-height: 36px; margin: 10px 10px 5px; font-size: 11px; font-weight: 750; color: var(--agent-primary); background: var(--agent-primary-soft); border: 1px solid #99f6e4; border-radius: 10px; }
-.agent-sidebar nav { display: grid; gap: 10px; padding: 7px; }
-.agent-sidebar nav section { display: grid; gap: 3px; }
-.agent-sidebar nav section > small { padding: 2px 7px; font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: uppercase; }
-.agent-sidebar__item { display: flex; gap: 8px; align-items: center; width: 100%; min-height: 38px; padding: 0 7px; color: var(--agent-muted); text-align: left; background: transparent; border: 0; border-radius: 10px; }
-.agent-sidebar__item[data-active='true'] { color: var(--agent-primary); background: var(--agent-surface); box-shadow: 0 3px 12px rgb(15 23 42 / 6%); }
-.agent-sidebar__item > i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; font-size: 10px; font-style: normal; font-weight: 800; background: var(--agent-border); border-radius: 8px; }
-.agent-sidebar__item > span { display: grid; flex: 1; min-width: 0; }
-.agent-sidebar__item strong, .agent-sidebar__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-sidebar__item strong { font-size: 11px; }
-.agent-sidebar__item small { font-size: 10px; color: var(--agent-muted); }
-.agent-sidebar__item > b { font-size: 10px; }
-.agent-context-card > div { display: grid; gap: 9px; padding: 11px; }
-.agent-context-card article { overflow: hidden; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 12px; }
-.agent-context-card article > header, .agent-context-card article > footer { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; }
-.agent-context-card article strong { font-size: 11px; }
-.agent-context-card article small { font-size: 10px; color: var(--agent-muted); }
-.agent-context-card article p { padding: 9px 10px; margin: 0; font-size: 11px; line-height: 1.55; color: var(--agent-text-regular); border-top: 1px solid var(--agent-border); border-bottom: 1px solid var(--agent-border); }
-.agent-context-card article footer { font-size: 10px; color: var(--agent-muted); }
-.agent-context-card article footer button { font-size: 10px; font-weight: 750; color: var(--agent-primary); background: transparent; border: 0; }
-.agent-insight-card > div { display: grid; gap: 8px; align-content: center; min-height: 150px; padding: 16px; background: linear-gradient(145deg, var(--agent-surface), var(--agent-surface-strong)); }
-.agent-insight-card[data-tone='danger'] > div { background: linear-gradient(145deg, var(--agent-surface), var(--agent-danger-soft)); }
-.agent-insight-card[data-tone='success'] > div { background: linear-gradient(145deg, var(--agent-surface), var(--agent-success-soft)); }
-.agent-insight-card > div small { font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: uppercase; }
-.agent-insight-card > div h3 { margin: 0; font-size: 16px; line-height: 1.4; color: var(--agent-text); }
-.agent-insight-card > div b { font-size: 24px; color: var(--agent-primary); }
-.agent-insight-card > footer { justify-content: space-between; }
-.agent-insight-card > footer span { display: flex; gap: 5px; }
-.agent-selection-actions { display: grid; gap: 10px; }
-.agent-selection-actions blockquote { padding: 12px 14px; margin: 0; font-size: 12px; line-height: 1.65; color: var(--agent-text); background: var(--agent-primary-soft); border-left: 3px solid #14b8a6; border-radius: 0 12px 12px 0; }
-.agent-selection-actions > div { display: flex; flex-wrap: wrap; gap: 7px; }
-.agent-selection-actions button { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-text-regular); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 999px; }
+
+.agent-sidebar__header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  padding: 0 12px;
+  background: var(--agent-surface);
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-sidebar__heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-sidebar__brand,
+.agent-sidebar__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-radius: 8px;
+}
+
+.agent-sidebar__brand svg,
+.agent-sidebar__mark svg {
+  display: block;
+  width: 13px;
+  height: 13px;
+}
+.agent-sidebar__heading strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 760; white-space: nowrap; }
+
+.agent-sidebar__toggle {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border: 0;
+  border-radius: 9px;
+}
+
+.agent-sidebar__create {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  margin: 10px 10px 5px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border: 1px solid color-mix(in srgb, var(--agent-primary) 28%, transparent);
+  border-radius: 10px;
+}
+.agent-sidebar__create svg { width: 13px; height: 13px; }
+.agent-sidebar__nav { display: grid; gap: 10px; padding: 7px; }
+.agent-sidebar__group { display: grid; gap: 3px; }
+.agent-sidebar__group-label { padding: 2px 7px; font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: uppercase; }
+
+.agent-sidebar__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 7px;
+  color: var(--agent-muted);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+
+.agent-sidebar__item[data-active='true'] {
+  color: var(--agent-primary);
+  background: var(--agent-surface);
+  box-shadow: 0 3px 12px rgb(15 23 42 / 6%);
+}
+
+.agent-sidebar__item[data-active='true'] .agent-sidebar__mark {
+  color: var(--agent-primary-foreground);
+  background: var(--agent-primary);
+}
+.agent-sidebar__copy { display: grid; flex: 1; min-width: 0; }
+
+.agent-sidebar__copy strong,
+.agent-sidebar__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-sidebar__copy strong { font-size: 11px; }
+.agent-sidebar__copy small { font-size: 10px; color: var(--agent-muted); }
+
+.agent-sidebar__badge {
+  display: grid;
+  flex: none;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-text);
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-sidebar[data-collapsed='true'] .agent-sidebar__header,
+.agent-sidebar[data-collapsed='true'] .agent-sidebar__item { justify-content: center; }
+
+.agent-context-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-context-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-context-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-context-card__heading small,
+.agent-context-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-context-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-context-card__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-context-card__list > li {
+  display: block;
+  list-style: none;
+}
+
+.agent-context-card__list > li::marker {
+  content: none;
+}
+
+.agent-context-card__chunk {
+  overflow: hidden;
+  background: var(--agent-surface-strong);
+  border: 1px solid var(--agent-border);
+  border-radius: 12px;
+}
+
+.agent-context-card__chunk-head {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 10px 0;
+}
+
+.agent-context-card__index {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--agent-primary);
+  background: var(--agent-primary-soft);
+  border-radius: 9px;
+}
+
+.agent-context-card__chunk-copy {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-context-card__chunk-copy strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.agent-context-card__type {
+  flex: none;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-muted);
+  background: var(--agent-fill);
+  border-radius: 999px;
+}
+
+.agent-context-card__quote {
+  padding: 8px 10px;
+  margin: 8px 10px 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--agent-text-regular);
+  background: var(--agent-surface);
+  border-left: 2px solid var(--agent-primary);
+  border-radius: 0 10px 10px 0;
+}
+
+.agent-context-card__chunk-foot {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  padding: 0 10px 8px;
+}
+
+.agent-context-card__chunk-foot small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--agent-muted);
+  white-space: nowrap;
+}
+
+.agent-context-card__open {
+  flex: none;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-primary);
+  background: transparent;
+  border: 0;
+}
+
+.agent-insight-card {
+  overflow: hidden;
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 16px;
+}
+
+.agent-insight-card[data-tone='success'] {
+  border-color: color-mix(in srgb, var(--agent-success) 42%, var(--agent-border));
+}
+
+.agent-insight-card[data-tone='warning'] {
+  border-color: color-mix(in srgb, var(--agent-warning) 42%, var(--agent-border));
+}
+
+.agent-insight-card[data-tone='danger'] {
+  border-color: color-mix(in srgb, var(--agent-danger) 42%, var(--agent-border));
+}
+
+.agent-insight-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-insight-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-insight-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-insight-card__heading small,
+.agent-insight-card__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agent-muted);
+}
+
+.agent-insight-card__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-insight-card__body {
+  display: grid;
+  gap: 8px;
+  min-height: 132px;
+  padding: 18px 16px 16px;
+}
+
+.agent-insight-card[data-tone='success'] .agent-insight-card__body {
+  background: color-mix(in srgb, var(--agent-success-soft) 70%, transparent);
+}
+
+.agent-insight-card[data-tone='warning'] .agent-insight-card__body {
+  background: color-mix(in srgb, var(--agent-warning-soft) 70%, transparent);
+}
+
+.agent-insight-card[data-tone='danger'] .agent-insight-card__body {
+  background: color-mix(in srgb, var(--agent-danger-soft) 70%, transparent);
+}
+
+.agent-insight-card__value {
+  font-size: 32px;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--agent-primary);
+}
+
+.agent-insight-card[data-tone='success'] .agent-insight-card__value {
+  color: var(--agent-success);
+}
+
+.agent-insight-card[data-tone='warning'] .agent-insight-card__value {
+  color: var(--agent-warning);
+}
+
+.agent-insight-card[data-tone='danger'] .agent-insight-card__value {
+  color: var(--agent-danger);
+}
+
+.agent-insight-card__copy,
+.agent-insight-card__empty {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--agent-text);
+}
+
+.agent-insight-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 132px;
+  color: var(--agent-muted);
+}
+
+.agent-insight-card__footer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 12px;
+  border-top: 1px solid var(--agent-border);
+}
+
+.agent-insight-card__nav {
+  display: flex;
+  gap: 6px;
+}
+
+.agent-insight-card__nav-btn {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  color: var(--agent-muted);
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 9px;
+}
+
+.agent-insight-card__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-primary-foreground);
+  background: var(--agent-primary);
+  border: 1px solid var(--agent-primary);
+  border-radius: 9px;
+}
+
+.agent-selection-actions {
+  display: grid;
+  gap: 0;
+  overflow: hidden;
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 16px;
+}
+
+.agent-selection-actions__quote {
+  padding: 14px 16px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--agent-text);
+  background: var(--agent-surface-strong);
+  border-left: 3px solid var(--agent-primary);
+}
+
+.agent-selection-actions__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  padding: 10px 12px 12px;
+}
+
+.agent-selection-actions__action {
+  min-height: 32px;
+  padding: 0 11px;
+  font-size: 11px;
+  font-weight: 750;
+  color: var(--agent-text-regular);
+  background: var(--agent-surface);
+  border: 1px solid var(--agent-border);
+  border-radius: 999px;
+}
+
+.agent-selection-actions__action:hover {
+  color: var(--agent-primary);
+  border-color: var(--agent-primary);
+}
 .agent-table { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 15px; }
 .agent-table > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border-bottom: 1px solid var(--agent-border); }
 .agent-table > header strong { font-size: 12px; }
@@ -548,33 +1308,78 @@
 .agent-diff-table > footer button { min-height: 34px; padding: 0 10px; font-size: 11px; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 9px; }
 .agent-diff-table > footer button:last-child { color: var(--agent-primary-foreground); background: var(--agent-primary); border-color: var(--agent-primary); }
 .agent-command-search { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; box-shadow: 0 18px 50px rgb(15 23 42 / 10%); }
-.agent-command-search > label { display: flex; gap: 9px; align-items: center; min-height: 50px; padding: 0 13px; border-bottom: 1px solid var(--agent-border); }
-.agent-command-search > label > span { font-size: 18px; color: var(--agent-muted); }
+
+.agent-command-search__field {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  min-height: 50px;
+  padding: 0 13px;
+  border-bottom: 1px solid var(--agent-border);
+}
+
+.agent-command-search__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  color: var(--agent-muted);
+}
+.agent-command-search__icon svg { display: block; width: 16px; height: 16px; }
 .agent-command-search input { flex: 1; min-width: 0; font: inherit; color: var(--agent-text); outline: 0; background: transparent; border: 0; }
-.agent-command-search > div { display: grid; max-height: 280px; padding: 7px; overflow-y: auto; }
-.agent-command-search > div button { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 44px; padding: 6px 8px; text-align: left; background: transparent; border: 0; border-radius: 10px; }
-.agent-command-search > div button:hover { background: var(--agent-fill); }
-.agent-command-search > div button > span { display: grid; }
-.agent-command-search > div strong { font-size: 11px; color: var(--agent-text); }
-.agent-command-search > div small { font-size: 10px; color: var(--agent-muted); }
+.agent-command-search__list { display: grid; max-height: 280px; padding: 8px; overflow-y: auto; }
+
+.agent-command-search__group {
+  padding: 8px 8px 4px;
+  font-size: 10px;
+  font-weight: 750;
+  color: var(--agent-muted);
+  text-transform: uppercase;
+}
+
+.agent-command-search__item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 6px 8px;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+}
+.agent-command-search__item:hover { background: var(--agent-fill); }
+.agent-command-search__copy { display: grid; min-width: 0; }
+.agent-command-search__copy strong { font-size: 12px; color: var(--agent-text); }
+.agent-command-search__copy small { font-size: 11px; color: var(--agent-muted); }
 .agent-command-search kbd { padding: 2px 6px; font-size: 10px; color: var(--agent-muted); background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 6px; }
-.agent-command-search > p { padding: 22px; margin: 0; font-size: 11px; color: var(--agent-muted); text-align: center; }
+.agent-command-search__empty { padding: 22px; margin: 0; font-size: 11px; color: var(--agent-muted); text-align: center; }
 .agent-flowchart { overflow: hidden; background: radial-gradient(var(--agent-border) 1px, transparent 1px); background-size: 14px 14px; border: 1px solid var(--agent-border); border-radius: 18px; }
-.agent-flowchart > header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 13px; background: var(--agent-surface); border-bottom: 1px solid var(--agent-border); }
-.agent-flowchart > header strong { font-size: 12px; }
-.agent-flowchart > header button { min-height: 32px; padding: 0 9px; font-size: 10px; color: var(--agent-primary); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 9px; }
-.agent-flowchart > div { display: grid; justify-items: center; padding: 24px; }
-.agent-flowchart__node { display: grid; gap: 4px; width: min(300px, 100%); padding: 12px 14px; text-align: left; background: var(--agent-surface); border: 1px solid var(--agent-border-strong); border-radius: 14px; box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
-.agent-flowchart__node[data-type='trigger'] { border-color: #99f6e4; }
-.agent-flowchart__node[data-type='condition'] { border-color: #fde68a; }
-.agent-flowchart__node[data-type='result'] { border-color: #bbf7d0; }
-.agent-flowchart__node small { font-size: 10px; font-weight: 800; color: var(--agent-muted); text-transform: uppercase; }
-.agent-flowchart__node strong { font-size: 11px; color: var(--agent-text); }
-.agent-flowchart__node > span { font-size: 10px; color: var(--agent-muted); }
-.agent-flowchart__connector { display: grid; place-items: center; width: 24px; height: 36px; font-weight: 900; color: var(--agent-primary); background: linear-gradient(#cbd5e1,#cbd5e1) center/1px 100% no-repeat; border: 0; }
-.agent-fine-tune > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
+.agent-flowchart__header { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; background: var(--agent-surface); border-bottom: 1px solid var(--agent-border); }
+.agent-flowchart__heading { display: grid; gap: 2px; min-width: 0; }
+.agent-flowchart__heading strong { font-size: 13px; font-weight: 760; }
+.agent-flowchart__heading small { font-size: 11px; color: var(--agent-muted); }
+.agent-flowchart__add { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 9px; font-size: 11px; font-weight: 750; color: var(--agent-primary); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 9px; }
+.agent-flowchart__add svg { width: 13px; height: 13px; }
+.agent-flowchart__canvas { display: grid; justify-items: center; padding: 24px; }
+.agent-flowchart__node { display: grid; gap: 6px; width: min(320px, 100%); padding: 12px 14px; text-align: left; background: var(--agent-surface); border: 1px solid var(--agent-border-strong); border-radius: 14px; box-shadow: 0 8px 22px rgb(15 23 42 / 7%); }
+.agent-flowchart__node[data-type='trigger'] { border-color: color-mix(in srgb, var(--agent-primary) 40%, var(--agent-border)); }
+.agent-flowchart__node[data-type='condition'] { border-color: color-mix(in srgb, var(--agent-warning) 50%, var(--agent-border)); }
+.agent-flowchart__node[data-type='action'] { border-color: color-mix(in srgb, var(--varo-agent-source-violet, #7c3aed) 40%, var(--agent-border)); }
+.agent-flowchart__node[data-type='result'] { border-color: color-mix(in srgb, var(--agent-success) 50%, var(--agent-border)); }
+.agent-flowchart__node[data-status='running'] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-primary) 18%, transparent); }
+.agent-flowchart__node-head { display: flex; gap: 8px; align-items: center; }
+.agent-flowchart__index { display: grid; place-items: center; width: 22px; height: 22px; font-size: 10px; font-weight: 800; color: var(--agent-primary); background: var(--agent-primary-soft); border-radius: 7px; }
+.agent-flowchart__type { padding: 1px 7px; font-size: 10px; font-weight: 750; color: var(--agent-muted); text-transform: none; background: var(--agent-fill); border-radius: 999px; }
+.agent-flowchart__node strong { font-size: 13px; font-weight: 760; color: var(--agent-text); }
+.agent-flowchart__detail { font-size: 11px; line-height: 16px; color: var(--agent-muted); }
+.agent-flowchart__connector { display: grid; place-items: center; width: 24px; height: 36px; color: var(--agent-primary); background: linear-gradient(var(--agent-border), var(--agent-border)) center/1px 100% no-repeat; border: 0; }
+.agent-fine-tune { overflow: hidden; background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 16px; }
+.agent-fine-tune__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
 .agent-fine-tune__field { display: grid; gap: 6px; min-width: 0; padding: 0; margin: 0; border: 0; }
-.agent-fine-tune__label { padding: 0; font-size: 10px; font-weight: 650; color: var(--agent-muted); }
+.agent-fine-tune__label { padding: 0; font-size: 11px; font-weight: 650; color: var(--agent-muted); }
 .agent-fine-tune__field > input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 10px; font: inherit; color: var(--agent-text); background: var(--agent-surface); border: 1px solid var(--agent-border); border-radius: 10px; }
 .agent-fine-tune__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
 .agent-fine-tune__choice { position: relative; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 11px; color: var(--agent-text-regular); cursor: pointer; background: var(--agent-surface-strong); border: 1px solid var(--agent-border); border-radius: 10px; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
@@ -583,6 +1388,8 @@
 .agent-fine-tune__choice:focus-within { outline: 2px solid var(--agent-primary); outline-offset: 2px; }
 .agent-fine-tune__choice-check { min-width: 12px; font-size: 12px; font-weight: 850; text-align: center; }
 .agent-fine-tune__empty { display: grid; place-items: center; min-height: 40px; font-size: 11px; color: var(--agent-muted); background: var(--agent-surface-strong); border: 1px dashed var(--agent-border); border-radius: 10px; }
+.agent-fine-tune__footer { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; padding: 0 12px; border-top: 1px solid var(--agent-border); }
+.agent-fine-tune__apply { min-height: 34px; padding: 0 11px; font-size: 11px; font-weight: 750; color: var(--agent-primary-foreground); background: var(--agent-primary); border: 1px solid var(--agent-primary); border-radius: 10px; }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-advanced__status i,
@@ -610,4 +1417,4 @@
   }
 }
 
-@media (max-width: 600px) { .agent-sidebar { width: 100%; } .agent-sidebar[data-collapsed='true'] { width: 64px; } .agent-fine-tune > div { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 600px) { .agent-sidebar { width: 100%; } .agent-sidebar[data-collapsed='true'] { width: 64px; } .agent-fine-tune__grid { grid-template-columns: minmax(0, 1fr); } }
diff --git a/registry/components/agent-ui/agent-icons.ts b/registry/components/agent-ui/agent-icons.ts
index c6579f7b..2432a947 100644
--- a/registry/components/agent-ui/agent-icons.ts
+++ b/registry/components/agent-ui/agent-icons.ts
@@ -14,6 +14,16 @@ export const agentCheckIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo
 
 export const agentPlusIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDdjMTYwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEyIDV2MTRNNSAxMmgxNCIvPjwvc3ZnPg=='
 
+export const agentToolIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN2MzYWVkIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48cGF0aCBkPSJNOCA3aDhNOCAxMmg4TTggMTdoNSIvPjwvc3ZnPg=='
+
+export const agentChatIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY3MDg1IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNSA2aDE0YTIgMiAwIDAgMSAyIDJ2N2EyIDIgMCAwIDEtMiAySDlsLTQgM3YtM0g1YTIgMiAwIDAgMS0yLTJWOGEyIDIgMCAwIDEgMi0yeiIvPjwvc3ZnPg=='
+
+export const agentPlugIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSA3VjNNMTUgN1YzIi8+PHBhdGggZD0iTTggN2g4djRhNCA0IDAgMCAxLTQgNGgwYTQgNCAwIDAgMS00LTRWN1oiLz48cGF0aCBkPSJNMTIgMTV2NiIvPjwvc3ZnPg=='
+
+export const agentReceiptIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyAzaDhsNCA0djE0SDdWM1oiLz48cGF0aCBkPSJNMTUgM3Y0aDRNOSAxMmg2TTkgMTZoNCIvPjwvc3ZnPg=='
+
+export const agentBranchIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iMTgiIGN5PSIxMiIgcj0iMi4yIi8+PGNpcmNsZSBjeD0iNiIgY3k9IjE4IiByPSIyLjIiLz48cGF0aCBkPSJNOC4xIDcuNnY4LjhNOC4yIDEySDE2Ii8+PC9zdmc+'
+
 const agentSendMask = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuOSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtNCAxMiAxNi04LTUgMTYtMy41LTYuNUw0IDEyWiIvPjxwYXRoIGQ9Ik0xMS41IDEzLjUgMjAgNCIvPjwvc3ZnPg==")'
 
 export const agentSendIconStyle = {
diff --git a/registry/components/agent-ui/h5/AgentRagPipeline.vue b/registry/components/agent-ui/h5/AgentRagPipeline.vue
index 6bd149f3..83179b2d 100644
--- a/registry/components/agent-ui/h5/AgentRagPipeline.vue
+++ b/registry/components/agent-ui/h5/AgentRagPipeline.vue
@@ -500,7 +500,7 @@ onBeforeUnmount(clearAllPings)
                     <span class="agent-rag__source-number">{{ entry.number }}</span>
                     <span class="grid min-w-0 gap-1">
                       <span class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
-                        <strong class="agent-rag__source-title min-w-0 flex-1 text-[12px] font-semibold leading-[18px] text-[var(--varo-agent-foreground)]">
+                        <strong class="agent-rag__source-title min-w-0 flex-1 text-[12px] font-semibold leading-[18px]">
                           {{ entry.source.title }}
                         </strong>
                         <small
@@ -512,7 +512,7 @@ onBeforeUnmount(clearAllPings)
                       </span>
                       <span
                         v-if="entry.source.excerpt"
-                        class="agent-rag__source-excerpt text-[11px] leading-4 text-[var(--varo-agent-muted)]"
+                        class="agent-rag__source-excerpt text-[11px] leading-4"
                       >
                         {{ entry.source.excerpt }}
                       </span>
@@ -708,11 +708,8 @@ onBeforeUnmount(clearAllPings)
   height: 16px;
   background: currentcolor;
   mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  mask-position: center;
   mask-position: center;
   mask-size: contain;
-  mask-size: contain;
 }
 
 .agent-rag__panel {
@@ -816,11 +813,30 @@ onBeforeUnmount(clearAllPings)
 
 .agent-rag__source.is-highlighted,
 .agent-rag__source.is-pinging {
+  color: #172033;
   background: var(--agent-rag-tone-soft);
   border-color: var(--agent-rag-tone);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-rag-tone) 18%, transparent);
 }
 
+.agent-rag__source-title {
+  color: var(--varo-agent-foreground);
+}
+
+.agent-rag__source-excerpt {
+  color: var(--varo-agent-muted);
+}
+
+.agent-rag__source.is-highlighted strong.agent-rag__source-title,
+.agent-rag__source.is-pinging strong.agent-rag__source-title {
+  color: #172033;
+}
+
+.agent-rag__source.is-highlighted .agent-rag__source-excerpt,
+.agent-rag__source.is-pinging .agent-rag__source-excerpt {
+  color: #475569;
+}
+
 .agent-rag__source:focus-visible,
 .agent-rag__citation:focus-visible {
   outline: 2px solid var(--agent-rag-tone);
diff --git a/registry/components/agent-ui/h5/agent-ui.css b/registry/components/agent-ui/h5/agent-ui.css
index f3958133..97a20b58 100644
--- a/registry/components/agent-ui/h5/agent-ui.css
+++ b/registry/components/agent-ui/h5/agent-ui.css
@@ -405,7 +405,624 @@
 @media (prefers-reduced-motion: reduce) {
   .agent-ui__loading i,
   .agent-ui__pulse,
-  .agent-ui__cursor {
+  .agent-ui__cursor,
+  .agent-task-list__item[data-status='running'] .agent-task-list__marker i,
+  .agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
     animation: none;
   }
 }
+
+.agent-task-list {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-list__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-task-list__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-task-list__heading small,
+.agent-task-list__count {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-task-list__body {
+  display: grid;
+  padding: 6px 14px 12px 18px;
+  margin: 0;
+  list-style: none;
+}
+
+.agent-task-list__item {
+  position: relative;
+  display: block;
+  min-height: 52px;
+  padding: 10px 0 10px 16px;
+  list-style: none;
+  border-left: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-list__item::marker {
+  content: none;
+}
+
+.agent-task-list__marker {
+  position: absolute;
+  top: 14px;
+  left: -11px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__marker {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__marker {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__marker i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-task-list__copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.agent-task-list__row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.agent-task-list__copy strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.agent-task-list__item[data-status='waiting'] .agent-task-list__copy strong,
+.agent-task-list__item[data-status='idle'] .agent-task-list__copy strong {
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__meta {
+  display: flex;
+  flex: none;
+  gap: 6px;
+  align-items: center;
+}
+
+.agent-task-list__chip,
+.agent-task-list__meta > small {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__chip {
+  padding: 2px 7px;
+  font-weight: 750;
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='running'] .agent-task-list__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-task-list__copy p {
+  margin: 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-task-list__track {
+  display: block;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-task-list__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-task-list__item[data-status='completed'] .agent-task-list__track i {
+  background: var(--varo-agent-success, #16a34a);
+}
+
+.agent-task-list__item[data-status='failed'] .agent-task-list__track i {
+  background: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-task-list__item[data-status='running'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+  border-radius: 0 12px 12px 0;
+}
+
+.agent-composer-scope,
+.agent-retrieval,
+.agent-source-receipt,
+.agent-thread-versions,
+.agent-task-runner__controls {
+  overflow: hidden;
+  color: var(--varo-agent-foreground, #172033);
+  background: var(--varo-agent-surface, #fff);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 16px;
+}
+
+.agent-task-runner {
+  display: grid;
+  gap: 10px;
+}
+
+.agent-workspace-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  border-bottom: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-workspace-card__heading {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-workspace-card__heading strong {
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 18px;
+}
+
+.agent-workspace-card__heading small,
+.agent-workspace-card__count,
+.agent-workspace-card__detail,
+.agent-workspace-card__meta,
+.agent-workspace-card__empty,
+.agent-thread-versions__meta,
+.agent-task-runner__cancel span {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--varo-agent-muted, #667085);
+}
+
+.agent-workspace-card__count,
+.agent-workspace-card__meta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-workspace-card__body {
+  display: grid;
+  padding: 8px 10px 10px;
+}
+
+.agent-workspace-card__row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+
+.agent-workspace-card__row[data-status='reading'],
+.agent-workspace-card__row[data-status='connecting'],
+.agent-workspace-card__row[data-enabled='true'] {
+  background: color-mix(in srgb, var(--varo-agent-primary-soft, #ccfbf1) 42%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__mark {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 9px;
+}
+
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__mark {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: var(--varo-agent-success, #16a34a);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__mark {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__mark,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__mark {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__mark i {
+  width: 7px;
+  height: 7px;
+  background: currentcolor;
+  border-radius: 999px;
+  animation: varo-agent-pulse 1s ease-in-out infinite;
+}
+
+.agent-workspace-card__copy {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.agent-workspace-card__row-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-workspace-card__copy strong,
+.agent-workspace-card__row-main strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.agent-workspace-card__chip {
+  flex: none;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 14px;
+  color: var(--varo-agent-muted, #667085);
+  background: var(--varo-agent-fill, #f1f5f9);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 999px;
+}
+
+.agent-workspace-card__row[data-status='read'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='available'] .agent-workspace-card__chip {
+  color: var(--varo-agent-success, #16a34a);
+  background: var(--varo-agent-success-soft, #dcfce7);
+  border-color: color-mix(in srgb, var(--varo-agent-success, #16a34a) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='reading'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='connecting'] .agent-workspace-card__chip {
+  color: var(--varo-agent-primary, #0f766e);
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: color-mix(in srgb, var(--varo-agent-primary, #0f766e) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='failed'] .agent-workspace-card__chip,
+.agent-workspace-card__row[data-status='unavailable'] .agent-workspace-card__chip {
+  color: var(--varo-agent-danger, #dc2626);
+  background: var(--varo-agent-danger-soft, #fee2e2);
+  border-color: color-mix(in srgb, var(--varo-agent-danger, #dc2626) 28%, transparent);
+}
+
+.agent-workspace-card__row[data-status='skipped'] .agent-workspace-card__chip {
+  color: var(--varo-agent-warning, #b45309);
+  background: var(--varo-agent-warning-soft, #fef3c7);
+}
+
+.agent-workspace-card__empty {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+  margin: 0;
+}
+
+.agent-workspace-card__action {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  min-height: 36px;
+  padding: 0 10px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 1;
+  color: var(--varo-agent-foreground, #172033);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 9px;
+}
+
+.agent-workspace-card__action::before {
+  position: absolute;
+  inset: -4px;
+  content: '';
+}
+
+.agent-workspace-card__action:hover {
+  background: var(--varo-agent-fill, #f1f5f9);
+}
+
+.agent-workspace-card__action--primary {
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-workspace-card__action--primary:hover {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+}
+
+.agent-workspace-card__action--danger {
+  color: var(--varo-agent-danger, #dc2626);
+}
+
+.agent-workspace-card__action--danger:hover {
+  background: var(--varo-agent-danger-soft, #fee2e2);
+}
+
+.agent-workspace-card__action:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.agent-composer-scope__meter {
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-composer-scope__meter strong {
+  font-size: 11px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-composer-scope__track {
+  display: block;
+  height: 6px;
+  overflow: hidden;
+  background: var(--varo-agent-fill, #f1f5f9);
+  border-radius: 999px;
+}
+
+.agent-composer-scope__track i {
+  display: block;
+  height: 100%;
+  background: var(--varo-agent-primary, #0f766e);
+  border-radius: inherit;
+}
+
+.agent-thread-versions__list {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.agent-thread-versions__card {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+  background: var(--varo-agent-surface-strong, #f8fafc);
+  border: 1px solid var(--varo-agent-border, #dbe3ea);
+  border-radius: 14px;
+}
+
+.agent-thread-versions__card[data-active='true'] {
+  background: var(--varo-agent-primary-soft, #ccfbf1);
+  border-color: var(--varo-agent-primary, #0f766e);
+}
+
+.agent-thread-versions__meta,
+.agent-thread-versions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.agent-thread-versions__actions {
+  padding-top: 8px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-task-runner__cancel {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--varo-agent-border, #dbe3ea);
+}
+
+.agent-artifact {
+  overflow: hidden;
+  color: #dbeafe;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 16px;
+}
+
+.agent-artifact__header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 14px 11px;
+  background: #111c30;
+  border-bottom: 1px solid #26334a;
+}
+
+.agent-artifact__heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.agent-artifact__kind {
+  font-size: 10px;
+  font-weight: 800;
+  color: #5eead4;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.agent-artifact__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 650;
+  color: #f8fafc;
+  white-space: nowrap;
+}
+
+.agent-artifact__lang {
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 750;
+  color: #94a3b8;
+  background: rgb(148 163 184 / 12%);
+  border-radius: 999px;
+}
+
+.agent-artifact__open {
+  flex: none;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 750;
+  color: #cbd5e1;
+  background: rgb(148 163 184 / 10%);
+  border: 1px solid rgb(148 163 184 / 22%);
+  border-radius: 9px;
+}
+
+.agent-artifact__body {
+  max-height: 288px;
+  padding: 14px 16px;
+  margin: 0;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  color: #cbd5e1;
+  white-space: pre-wrap;
+  background: #0f172a;
+}
+
+.agent-artifact__preview {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: contain;
+  background: #0b1220;
+}
diff --git a/registry/components/agent-ui/h5/index.ts b/registry/components/agent-ui/h5/index.ts
index 59e6df17..31fcbb24 100644
--- a/registry/components/agent-ui/h5/index.ts
+++ b/registry/components/agent-ui/h5/index.ts
@@ -102,6 +102,30 @@ function partMark(status: AgentPartStatus) {
   return 'bg-[var(--varo-agent-border-strong)]'
 }
 
+function taskStatusLabel(status: AgentPartStatus) {
+  if (status === 'completed') { return '已完成' }
+  if (status === 'failed') { return '失败' }
+  if (status === 'running') { return '进行中' }
+  if (status === 'waiting') { return '等待中' }
+  return '待开始'
+}
+
+function renderCloseMiniIcon() {
+  return h('svg', {
+    'fill': 'none',
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 2.2,
+    'viewBox': '0 0 24 24',
+    'width': 12,
+    'height': 12,
+    'aria-hidden': 'true',
+  }, [
+    h('path', { d: 'M6 6l12 12M18 6 6 18' }),
+  ])
+}
+
 function renderCheckIcon() {
   return h('svg', {
     'fill': 'none',
@@ -292,37 +316,101 @@ export const AgentTaskList = defineComponent({
   },
   setup(props) {
     const completed = computed(() => props.tasks.filter(task => task.status === 'completed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-11 items-center justify-between border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[12px] tabular-nums text-[var(--varo-agent-muted)]' }, `${completed.value}/${props.tasks.length}`),
-      ]),
-      ...props.tasks.map((task, index) => h('div', { class: 'flex min-h-[50px] items-center gap-2.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2 last:border-0', key: task.id }, [
-        h('span', { class: ['grid h-6 w-6 flex-none place-items-center rounded-full border text-[11px] font-bold', task.status === 'completed' ? 'border-[var(--varo-agent-success)] bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]' : 'border-[var(--varo-agent-border)] text-[var(--varo-agent-text)]'] }, task.status === 'completed' ? renderCheckIcon() : String(index + 1)),
-        h('span', { class: 'grid min-w-0 flex-1 gap-1' }, [
-          h('span', { class: 'flex justify-between gap-2 text-xs font-semibold text-[var(--varo-agent-foreground)]' }, [task.title, task.meta ? h('small', { class: 'text-[var(--varo-agent-muted)]' }, task.meta) : null]),
-          task.progress === undefined ? null : h('span', { class: 'h-1 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]' }, [h('i', { class: 'block h-full bg-[var(--varo-agent-primary)]', style: { width: `${Math.min(100, Math.max(0, task.progress))}%` } })]),
+    const current = computed(() => props.tasks.find(task => task.status === 'running' || task.status === 'failed'))
+    return () => h('section', { 'class': 'agent-task-list', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-task-list__header' }, [
+        h('span', { class: 'agent-task-list__heading' }, [
+          h('strong', props.title),
+          current.value
+            ? h('small', current.value.status === 'failed' ? `阻塞于 ${current.value.title}` : `正在执行 ${current.value.title}`)
+            : h('small', completed.value === props.tasks.length && props.tasks.length ? '全部完成' : '等待开始'),
         ]),
-      ])),
+        h('span', { class: 'agent-task-list__count' }, `${completed.value}/${props.tasks.length}`),
+      ]),
+      h('ol', { class: 'agent-task-list__body' }, props.tasks.map((task, index) => {
+        const progress = task.progress === undefined ? undefined : Math.min(100, Math.max(0, task.progress))
+        return h('li', {
+          'class': 'agent-task-list__item',
+          'data-status': task.status,
+          'aria-current': task.status === 'running' ? 'step' : undefined,
+          'key': task.id,
+        }, [
+          h('span', { 'class': 'agent-task-list__marker', 'aria-hidden': 'true' }, [
+            task.status === 'completed'
+              ? renderCheckIcon()
+              : task.status === 'failed'
+                ? renderCloseMiniIcon()
+                : task.status === 'running'
+                  ? h('i')
+                  : String(index + 1),
+          ]),
+          h('span', { class: 'agent-task-list__copy' }, [
+            h('span', { class: 'agent-task-list__row' }, [
+              h('strong', task.title),
+              h('span', { class: 'agent-task-list__meta' }, [
+                h('small', { class: 'agent-task-list__chip' }, taskStatusLabel(task.status)),
+                task.meta ? h('small', task.meta) : null,
+              ]),
+            ]),
+            task.description ? h('p', task.description) : null,
+            progress === undefined
+              ? null
+              : h('span', { 'class': 'agent-task-list__track', 'aria-hidden': 'true' }, [
+                  h('i', { style: { width: `${progress}%` } }),
+                ]),
+          ]),
+        ])
+      })),
     ])
   },
 })
 
-const workspaceActionButton = 'relative m-0 inline-flex min-h-9 min-w-12 items-center justify-center rounded-lg px-2.5 text-[11px] font-bold transition-colors before:absolute before:-inset-1 before:content-[\'\'] motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-45'
-const workspacePrimaryTextButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-primary)] hover:bg-[var(--varo-agent-primary-soft)]`
-const workspaceQuietButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-foreground)] hover:bg-[var(--varo-agent-fill)]`
-const workspaceDangerTextButton = `${workspaceActionButton} border border-transparent bg-transparent text-[var(--varo-agent-danger)] hover:bg-[var(--varo-agent-danger-soft)]`
+function renderWorkspaceIcon(kind: 'plug' | 'receipt' | 'branch') {
+  const common = {
+    'aria-hidden': 'true' as const,
+    'fill': 'none',
+    'height': 14,
+    'stroke': 'currentColor',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'stroke-width': 1.8,
+    'viewBox': '0 0 24 24',
+    'width': 14,
+  }
+  if (kind === 'receipt') {
+    return h('svg', common, [
+      h('path', { d: 'M7 3h8l4 4v14H7V3Z' }),
+      h('path', { d: 'M15 3v4h4M9 12h6M9 16h4' }),
+    ])
+  }
+  if (kind === 'branch') {
+    return h('svg', common, [
+      h('circle', { cx: '6', cy: '6', r: '2.2' }),
+      h('circle', { cx: '18', cy: '12', r: '2.2' }),
+      h('circle', { cx: '6', cy: '18', r: '2.2' }),
+      h('path', { d: 'M8.1 7.6v8.8M8.2 12H16' }),
+    ])
+  }
+  return h('svg', common, [
+    h('path', { d: 'M9 7V3M15 7V3' }),
+    h('path', { d: 'M8 7h8v4a4 4 0 0 1-4 4h0a4 4 0 0 1-4-4V7Z' }),
+    h('path', { d: 'M12 15v6' }),
+  ])
+}
+
+function workspaceActionClass(kind: 'quiet' | 'primary' | 'danger' = 'quiet') {
+  return cn(
+    'agent-workspace-card__action',
+    kind === 'primary' && 'agent-workspace-card__action--primary',
+    kind === 'danger' && 'agent-workspace-card__action--danger',
+  )
+}
 
 const contextSourceStatusLabels = {
   available: '可用',
   connecting: '连接中',
   unavailable: '不可用',
 } as const
-const contextSourceStatusClasses = {
-  available: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  connecting: 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]',
-  unavailable: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-} as const
 const retrievalStatusLabels = {
   failed: '读取失败',
   queued: '排队中',
@@ -330,23 +418,11 @@ const retrievalStatusLabels = {
   reading: '读取中',
   skipped: '已跳过',
 } as const
-const retrievalStatusClasses = {
-  failed: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-  queued: 'bg-[var(--varo-agent-fill)] text-[var(--varo-agent-muted)]',
-  read: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  reading: 'bg-[var(--varo-agent-primary-soft)] text-[var(--varo-agent-primary)]',
-  skipped: 'bg-[var(--varo-agent-warning-soft)] text-[var(--varo-agent-warning)]',
-} as const
 const receiptStatusLabels = {
   failed: '读取失败',
   read: '已读取',
   skipped: '已跳过',
 } as const
-const receiptStatusClasses = {
-  failed: 'bg-[var(--varo-agent-danger-soft)] text-[var(--varo-agent-danger)]',
-  read: 'bg-[var(--varo-agent-success-soft)] text-[var(--varo-agent-success)]',
-  skipped: 'bg-[var(--varo-agent-warning-soft)] text-[var(--varo-agent-warning)]',
-} as const
 
 function renderCloseIcon() {
   return h('svg', {
@@ -381,30 +457,38 @@ export const AgentComposerScope = defineComponent({
       return Math.min(100, Math.max(0, value))
     })
     const enabledCount = computed(() => props.sources.filter(source => source.enabled).length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${enabledCount.value} 个已启用`),
+    const headingHint = computed(() => {
+      if (!props.sources.length) { return '暂无可用来源' }
+      if (enabledCount.value === 0) { return '尚未授权任何来源' }
+      return `${enabledCount.value} 个来源已加入上下文`
+    })
+    return () => h('section', { 'class': 'agent-composer-scope', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${enabledCount.value}/${props.sources.length}`),
       ]),
       props.sources.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.sources.map((source) => {
+        ? h('div', { class: 'agent-workspace-card__body' }, props.sources.map((source) => {
             const status = source.status ?? 'available'
-            return h('div', { 'class': 'flex min-h-[58px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', 'data-status': status, 'key': source.id }, [
-              h('i', { 'class': ['h-3 w-3 flex-none rounded-full', contextSourceStatusClasses[status]], 'aria-hidden': 'true' }),
-              h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-                h('span', { class: 'flex min-w-0 items-center gap-2' }, [
-                  h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, source.label),
-                  h('small', { class: 'flex-none text-[10px] font-semibold text-[var(--varo-agent-muted)]' }, contextSourceStatusLabels[status]),
+            return h('article', { 'class': 'agent-workspace-card__row', 'data-status': status, 'data-enabled': String(source.enabled), 'key': source.id }, [
+              h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('plug')),
+              h('span', { class: 'agent-workspace-card__copy' }, [
+                h('span', { class: 'agent-workspace-card__row-main' }, [
+                  h('strong', source.label),
+                  h('small', { class: 'agent-workspace-card__chip' }, contextSourceStatusLabels[status]),
                 ]),
                 source.description || source.meta
-                  ? h('small', { class: 'truncate text-[11px] text-[var(--varo-agent-muted)]' }, source.description || source.meta)
+                  ? h('small', { class: 'agent-workspace-card__detail' }, source.description || source.meta)
                   : null,
               ]),
               status === 'available'
                 ? h('button', {
                     'aria-label': `${source.enabled ? '停用' : '启用'}${source.label}`,
                     'aria-pressed': source.enabled,
-                    'class': workspaceQuietButton,
+                    'class': workspaceActionClass(source.enabled ? 'quiet' : 'primary'),
                     'disabled': props.disabled,
                     'type': 'button',
                     'onClick': () => emit('toggle', source, !source.enabled),
@@ -412,29 +496,29 @@ export const AgentComposerScope = defineComponent({
                 : status === 'unavailable'
                   ? h('button', {
                       'aria-label': `连接${source.label}`,
-                      'class': workspacePrimaryTextButton,
+                      'class': workspaceActionClass('primary'),
                       'disabled': props.disabled,
                       'type': 'button',
                       'onClick': () => emit('connect', source),
                     }, '连接')
-                  : null,
+                  : h('small', { class: 'agent-workspace-card__chip' }, '连接中'),
             ])
           }))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无来源'),
-      h('footer', { class: 'grid gap-2 border-t border-[var(--varo-agent-border)] px-3.5 py-3' }, [
-        h('span', { class: 'flex items-center justify-between gap-3' }, [
-          h('span', { class: 'text-[11px] font-semibold text-[var(--varo-agent-text)]' }, '上下文使用'),
-          h('strong', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-primary)]' }, `${usage.value}%`),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源'),
+      h('footer', { class: 'agent-composer-scope__meter' }, [
+        h('span', { class: 'agent-workspace-card__row-main' }, [
+          h('span', '上下文使用'),
+          h('strong', `${usage.value}%`),
         ]),
         h('span', {
-          'class': 'block h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-fill)]',
+          'class': 'agent-composer-scope__track',
           'role': 'progressbar',
           'aria-label': '上下文使用量',
           'aria-valuemax': 100,
           'aria-valuemin': 0,
           'aria-valuenow': usage.value,
         }, [
-          h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${usage.value}%` } }),
+          h('i', { style: { width: `${usage.value}%` } }),
         ]),
       ]),
     ])
@@ -452,31 +536,41 @@ export const AgentRetrievalProgress = defineComponent({
   },
   setup(props, { emit }) {
     const settled = computed(() => props.items.filter(item => item.status === 'read' || item.status === 'skipped' || item.status === 'failed').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${settled.value}/${props.items.length} 已处理`),
+    const current = computed(() => props.items.find(item => item.status === 'reading' || item.status === 'failed'))
+    const headingHint = computed(() => {
+      if (current.value?.status === 'failed') { return `阻塞于 ${current.value.title}` }
+      if (current.value) { return `正在读取 ${current.value.title}` }
+      if (props.items.length && settled.value === props.items.length) { return '检索已完成' }
+      return '等待检索'
+    })
+    return () => h('section', { 'class': 'agent-retrieval', 'aria-atomic': 'false', 'aria-live': 'polite' }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${settled.value}/${props.items.length}`),
       ]),
       props.items.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.items.map(item => h('div', { 'class': 'flex min-h-[56px] items-center gap-2.5 rounded-xl px-2.5 py-2', 'data-status': item.status, 'key': item.id }, [
-            h('i', { 'class': ['h-3 w-3 flex-none rounded-full', retrievalStatusClasses[item.status]], 'aria-hidden': 'true' }),
-            h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-              h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, item.title),
-              item.detail ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, item.detail) : null,
-            ]),
-            h('span', { class: 'flex flex-none items-center gap-2' }, [
-              h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, retrievalStatusLabels[item.status]),
-              item.status === 'failed' && item.retryable
-                ? h('button', {
-                    'aria-label': `重试${item.title}`,
-                    'class': workspaceQuietButton,
-                    'type': 'button',
-                    'onClick': () => emit('retry', item),
-                  }, '重试')
-                : null,
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map((item, index) => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, item.status === 'reading' ? h('i') : String(index + 1).padStart(2, '0')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.title),
+                h('small', { class: 'agent-workspace-card__chip' }, retrievalStatusLabels[item.status]),
+              ]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
             ]),
+            item.status === 'failed' && item.retryable
+              ? h('button', {
+                  'aria-label': `重试${item.title}`,
+                  'class': workspaceActionClass('primary'),
+                  'type': 'button',
+                  'onClick': () => emit('retry', item),
+                }, '重试')
+              : null,
           ])))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无检索项'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无检索项'),
     ])
   },
 })
@@ -494,44 +588,49 @@ export const AgentSourceReceipt = defineComponent({
   },
   setup(props, { emit }) {
     const readCount = computed(() => props.items.filter(item => item.status === 'read').length)
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'grid min-h-12 gap-0.5 border-b border-[var(--varo-agent-border)] px-3.5 py-2.5' }, [
-        h('span', { class: 'flex items-center justify-between gap-3' }, [
-          h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-          h('small', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${readCount.value}/${props.items.length} 已读取`),
+    const failedCount = computed(() => props.items.filter(item => item.status === 'failed').length)
+    const headingHint = computed(() => {
+      if (failedCount.value) { return `${failedCount.value} 个来源读取失败` }
+      if (props.summary) { return props.summary }
+      if (props.items.length && readCount.value === props.items.length) { return '全部来源已核对' }
+      return '回答完成后核对来源'
+    })
+    return () => h('section', { 'class': 'agent-source-receipt', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', headingHint.value),
         ]),
-        props.summary ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, props.summary) : null,
+        h('span', { class: 'agent-workspace-card__count' }, `${readCount.value}/${props.items.length}`),
       ]),
       props.items.length
-        ? h('div', { class: 'grid gap-1 p-2' }, props.items.map(item => h('div', { 'class': 'flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', 'data-status': item.status, 'key': item.id }, [
-            h('i', { 'class': ['h-3 w-3 flex-none rounded-full', receiptStatusClasses[item.status]], 'aria-hidden': 'true' }),
-            h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-              h('span', { class: 'flex min-w-0 items-baseline gap-2' }, [
-                h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, item.label),
-                item.itemCount === undefined
-                  ? null
-                  : h('small', { class: 'flex-none text-[10px] tabular-nums text-[var(--varo-agent-muted)]' }, `${item.itemCount} 项`),
+        ? h('div', { class: 'agent-workspace-card__body' }, props.items.map(item => h('article', { 'class': 'agent-workspace-card__row', 'data-status': item.status, 'key': item.id }, [
+            h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('receipt')),
+            h('span', { class: 'agent-workspace-card__copy' }, [
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('strong', item.label),
+                item.itemCount === undefined ? null : h('small', { class: 'agent-workspace-card__meta' }, `${item.itemCount} 项`),
               ]),
-              item.detail ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, item.detail) : null,
-              h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, receiptStatusLabels[item.status]),
+              item.detail ? h('small', { class: 'agent-workspace-card__detail' }, item.detail) : null,
+              h('small', { class: 'agent-workspace-card__chip' }, receiptStatusLabels[item.status]),
             ]),
             item.status === 'read'
               ? h('button', {
                   'aria-label': `查看${item.label}`,
-                  'class': workspaceQuietButton,
+                  'class': workspaceActionClass(),
                   'type': 'button',
                   'onClick': () => emit('open', item),
                 }, '查看')
               : item.status === 'failed'
                 ? h('button', {
                     'aria-label': `连接${item.label}`,
-                    'class': workspacePrimaryTextButton,
+                    'class': workspaceActionClass('primary'),
                     'type': 'button',
                     'onClick': () => emit('connect', item),
                   }, '连接')
                 : null,
           ])))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无来源回执'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无来源回执'),
     ])
   },
 })
@@ -557,38 +656,38 @@ export const AgentTaskRunner = defineComponent({
       )
     })
     const canCancel = computed(() => props.busy || props.tasks.some(task => task.status === 'running'))
-    return () => h('section', { class: 'grid gap-2.5' }, [
+    return () => h('section', { class: 'agent-task-runner' }, [
       h(AgentTaskList, { tasks: props.tasks, title: props.title }),
       actionableTasks.value.length || canCancel.value
-        ? h('div', { class: 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]' }, [
+        ? h('div', { class: 'agent-task-runner__controls' }, [
             actionableTasks.value.length
-              ? h('div', { class: 'grid gap-1 p-2' }, actionableTasks.value.map(task => h('div', { class: 'flex min-h-[56px] items-center gap-2.5 rounded-xl bg-[var(--varo-agent-surface-strong)] px-2.5 py-2', key: task.id }, [
-                  h('span', { class: 'grid min-w-0 flex-1 gap-0.5' }, [
-                    h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, task.title),
-                    task.description ? h('small', { class: 'text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, task.description) : null,
-                    h('small', { class: 'text-[10px] font-semibold text-[var(--varo-agent-text)]' }, task.status === 'failed' ? '执行失败' : '等待确认'),
+              ? h('div', { class: 'agent-workspace-card__body' }, actionableTasks.value.map(task => h('article', { 'class': 'agent-workspace-card__row', 'data-status': task.status, 'key': task.id }, [
+                  h('span', { class: 'agent-workspace-card__copy' }, [
+                    h('strong', task.title),
+                    task.description ? h('small', { class: 'agent-workspace-card__detail' }, task.description) : null,
+                    h('small', { class: 'agent-workspace-card__chip' }, task.status === 'failed' ? '执行失败' : '等待确认'),
                   ]),
                   task.status === 'failed'
                     ? h('button', {
                         'aria-label': `重试${task.title}`,
-                        'class': workspaceQuietButton,
+                        'class': workspaceActionClass('primary'),
                         'type': 'button',
                         'onClick': () => emit('retry', task),
                       }, '重试')
                     : h('button', {
                         'aria-label': `批准${task.title}`,
-                        'class': workspacePrimaryTextButton,
+                        'class': workspaceActionClass('primary'),
                         'type': 'button',
                         'onClick': () => emit('approve', task),
                       }, '批准'),
                 ])))
               : null,
             canCancel.value
-              ? h('div', { class: 'flex min-h-[60px] items-center justify-between gap-3 border-t border-[var(--varo-agent-border)] px-3.5 py-2' }, [
-                  h('span', { class: 'text-[11px] text-[var(--varo-agent-muted)]' }, '任务正在执行'),
+              ? h('div', { class: 'agent-task-runner__cancel' }, [
+                  h('span', '任务正在执行'),
                   h('button', {
                     'aria-label': '取消当前任务',
-                    'class': workspaceDangerTextButton,
+                    'class': workspaceActionClass('danger'),
                     'type': 'button',
                     'onClick': () => emit('cancel'),
                   }, '取消'),
@@ -625,52 +724,49 @@ export const AgentThreadVersions = defineComponent({
         version,
       }))
     })
-    return () => h('section', { 'class': 'overflow-hidden rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)]', 'aria-label': props.title }, [
-      h('header', { class: 'flex min-h-12 items-center justify-between gap-3 border-b border-[var(--varo-agent-border)] px-3.5' }, [
-        h('strong', { class: 'text-[13px] text-[var(--varo-agent-foreground)]' }, props.title),
-        h('span', { class: 'text-[11px] tabular-nums text-[var(--varo-agent-muted)]' }, `${props.versions.length} 个版本`),
+    const active = computed(() => displayVersions.value.find(entry => entry.active))
+    return () => h('section', { 'class': 'agent-thread-versions', 'aria-label': props.title }, [
+      h('header', { class: 'agent-workspace-card__header' }, [
+        h('span', { class: 'agent-workspace-card__heading' }, [
+          h('strong', props.title),
+          h('small', active.value ? `当前 ${active.value.label}` : '选择一个会话版本'),
+        ]),
+        h('span', { class: 'agent-workspace-card__count' }, `${props.versions.length} 个版本`),
       ]),
       displayVersions.value.length
-        ? h('div', { 'class': 'flex max-w-full gap-2 overflow-x-auto p-2.5', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
+        ? h('div', { 'class': 'agent-thread-versions__list', 'role': 'list', 'aria-label': '会话版本列表' }, displayVersions.value.map(entry =>
             h('article', {
-              'class': [
-                'grid w-[252px] flex-none gap-2 rounded-xl border bg-[var(--varo-agent-surface-strong)] p-3',
-                entry.active
-                  ? 'border-[var(--varo-agent-primary)] shadow-[0_0_0_2px_var(--varo-agent-primary-soft)]'
-                  : 'border-[var(--varo-agent-border)]',
-              ],
+              'class': 'agent-thread-versions__card',
               'data-active': String(entry.active),
               'key': entry.version.id,
               'role': 'listitem',
             }, [
-              h('span', { class: 'flex min-w-0 items-center justify-between gap-2' }, [
-                h('span', { class: 'flex min-w-0 items-center gap-2' }, [
-                  h('i', { 'class': ['h-2 w-2 flex-none rounded-full', entry.active ? 'bg-[var(--varo-agent-primary)]' : 'bg-[var(--varo-agent-border-strong)]'], 'aria-hidden': 'true' }),
-                  h('strong', { class: 'truncate text-[12px] text-[var(--varo-agent-foreground)]' }, entry.label),
-                ]),
+              h('span', { class: 'agent-workspace-card__row-main' }, [
+                h('span', { 'class': 'agent-workspace-card__mark', 'aria-hidden': 'true' }, renderWorkspaceIcon('branch')),
+                h('strong', entry.label),
                 entry.active
-                  ? h('small', { class: 'flex-none text-[10px] font-bold text-[var(--varo-agent-primary)]' }, '当前')
+                  ? h('small', { class: 'agent-workspace-card__chip' }, '当前')
                   : entry.version.pinned
-                    ? h('small', { class: 'flex-none text-[10px] font-bold text-[var(--varo-agent-text)]' }, '已固定')
+                    ? h('small', { class: 'agent-workspace-card__chip' }, '已固定')
                     : null,
               ]),
-              h('p', { class: 'm-0 min-h-8 text-[11px] leading-4 text-[var(--varo-agent-muted)]' }, entry.version.summary || '暂无版本摘要'),
-              h('span', { class: 'grid gap-0.5 text-[10px] text-[var(--varo-agent-muted)]' }, [
-                h('small', { class: 'truncate' }, `来源：${entry.parentLabel}`),
-                entry.version.createdAt ? h('time', { class: 'truncate' }, `创建：${entry.version.createdAt}`) : null,
+              h('p', { class: 'agent-workspace-card__detail' }, entry.version.summary || '暂无版本摘要'),
+              h('span', { class: 'agent-thread-versions__meta' }, [
+                h('small', `来源：${entry.parentLabel}`),
+                entry.version.createdAt ? h('time', `创建：${entry.version.createdAt}`) : null,
               ]),
-              h('footer', { class: 'flex flex-wrap gap-2 border-t border-[var(--varo-agent-border)] pt-2' }, [
+              h('footer', { class: 'agent-thread-versions__actions' }, [
                 entry.active
                   ? null
                   : h('button', {
                       'aria-label': `选择${entry.label}`,
-                      'class': workspacePrimaryTextButton,
+                      'class': workspaceActionClass('primary'),
                       'type': 'button',
                       'onClick': () => emit('select', entry.version),
                     }, '选择'),
                 h('button', {
                   'aria-label': `从${entry.label}创建分支`,
-                  'class': workspaceQuietButton,
+                  'class': workspaceActionClass(),
                   'type': 'button',
                   'onClick': () => emit('branch', entry.version),
                 }, '分支'),
@@ -678,14 +774,14 @@ export const AgentThreadVersions = defineComponent({
                   ? null
                   : h('button', {
                       'aria-label': `固定${entry.label}`,
-                      'class': workspaceQuietButton,
+                      'class': workspaceActionClass(),
                       'type': 'button',
                       'onClick': () => emit('pin', entry.version),
                     }, '固定'),
               ]),
             ]),
           ))
-        : h('p', { class: 'm-0 grid min-h-20 place-items-center px-3 text-[12px] text-[var(--varo-agent-muted)]' }, '暂无会话版本'),
+        : h('p', { class: 'agent-workspace-card__empty' }, '暂无会话版本'),
     ])
   },
 })
@@ -949,11 +1045,19 @@ export const AgentRecommendation = defineComponent({
   emits: { accept: () => true },
   setup(props, { emit, slots }) {
     const confidence = computed(() => Math.min(100, Math.max(0, props.confidence)))
+    const confidenceLabel = computed(() => (
+      confidence.value >= 80 ? '高置信度' : confidence.value >= 55 ? '中等置信度' : '需要复核'
+    ))
     return () => h('section', { class: 'agent-recommendation grid gap-3 rounded-2xl border border-[var(--varo-agent-border)] bg-[var(--varo-agent-surface)] p-4 shadow-[var(--varo-agent-shadow)]' }, [
-      h('header', { class: 'flex justify-between text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [h('span', 'AGENT 建议'), h('span', `${confidence.value}%`)]),
+      h('header', { class: 'flex justify-between gap-3 text-[11px] font-extrabold tracking-widest text-[var(--varo-agent-primary)]' }, [
+        h('span', 'AGENT 建议'),
+        h('span', { class: 'tabular-nums' }, `${confidenceLabel.value} · ${confidence.value}%`),
+      ]),
       h('strong', { class: 'text-[15px] text-[var(--varo-agent-foreground)]' }, props.title),
       props.description ? h('p', { class: 'm-0 text-xs leading-5 text-[var(--varo-agent-text)]' }, props.description) : null,
-      h('span', { class: 'h-1.5 overflow-hidden rounded-full bg-blue-100' }, [h('i', { class: 'block h-full rounded-full bg-blue-600', style: { width: `${confidence.value}%` } })]),
+      h('span', { 'class': 'h-1.5 overflow-hidden rounded-full bg-[var(--varo-agent-primary-soft)]', 'aria-hidden': 'true' }, [
+        h('i', { class: 'block h-full rounded-full bg-[var(--varo-agent-primary)]', style: { width: `${confidence.value}%` } }),
+      ]),
       slots.default?.(),
       h('footer', { class: 'flex justify-end gap-2' }, [slots.secondary?.(), h('button', { class: primaryButton, type: 'button', onClick: () => emit('accept') }, props.acceptText)]),
     ])
@@ -1105,32 +1209,31 @@ export const AgentArtifact = defineComponent({
   props: { artifact: { type: Object as PropType<AgentArtifactItem>, required: true } },
   emits: { open: (_artifact: AgentArtifactItem) => true },
   setup(props, { emit }) {
+    const kindLabel = computed(() => {
+      if (props.artifact.kind === 'code') { return '代码产物' }
+      if (props.artifact.kind === 'image') { return '图像产物' }
+      if (props.artifact.kind === 'file') { return '文件产物' }
+      return '文档产物'
+    })
     return () =>
-      h('article', { class: 'overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 shadow-lg' }, [
-        h('header', { class: 'flex min-h-14 items-center justify-between gap-3 border-b border-slate-800 bg-slate-900 px-4' }, [
-          h('span', { class: 'grid min-w-0 gap-0.5' }, [
-            h('small', { class: 'text-[10px] font-black uppercase tracking-[0.16em] text-teal-300' }, props.artifact.kind || 'artifact'),
-            h('strong', { class: 'truncate text-xs text-slate-100' }, props.artifact.title),
+      h('article', { 'class': 'agent-artifact', 'data-kind': props.artifact.kind || 'document' }, [
+        h('header', { class: 'agent-artifact__header' }, [
+          h('span', { class: 'agent-artifact__heading' }, [
+            h('small', { class: 'agent-artifact__kind' }, kindLabel.value),
+            h('strong', { class: 'agent-artifact__title' }, props.artifact.title),
+            props.artifact.language ? h('span', { class: 'agent-artifact__lang' }, props.artifact.language) : null,
           ]),
-          h(
-            'button',
-            {
-              class: 'min-h-8 flex-none rounded-lg border border-slate-700 bg-slate-800 px-3 text-[11px] font-bold text-slate-200 transition-colors hover:border-teal-500 hover:text-white',
-              type: 'button',
-              onClick: () => emit('open', props.artifact),
-            },
-            '打开',
-          ),
+          h('button', {
+            class: 'agent-artifact__open',
+            type: 'button',
+            onClick: () => emit('open', props.artifact),
+          }, '打开'),
         ]),
         props.artifact.content
-          ? h(
-              'pre',
-              { class: 'm-0 max-h-72 overflow-auto whitespace-pre-wrap break-words bg-slate-950 px-4 py-3.5 font-mono text-[12px] leading-5 text-slate-200' },
-              props.artifact.content,
-            )
+          ? h('pre', { class: 'agent-artifact__body' }, props.artifact.content)
           : null,
         props.artifact.previewUrl
-          ? h('img', { alt: props.artifact.title, class: 'block max-h-80 w-full bg-slate-950 object-contain', src: props.artifact.previewUrl })
+          ? h('img', { alt: props.artifact.title, class: 'agent-artifact__preview', src: props.artifact.previewUrl })
           : null,
       ])
   },
diff --git a/registry/components/input/v-input.vue b/registry/components/input/v-input.vue
index cfb23543..6abfdd75 100644
--- a/registry/components/input/v-input.vue
+++ b/registry/components/input/v-input.vue
@@ -132,6 +132,7 @@ const props = withDefaults(
     ignoreCompositionEvent: true,
     invalid: false,
     labelWidth: '',
+    maxLength: -1,
     nickNameReview: false,
     randomNumber: false,
     readonly: false,
@@ -251,6 +252,15 @@ const nativeType = computed(() => {
 
   return 'text'
 })
+
+function normalizeRows(value: number | string | undefined) {
+  if (value === undefined || value === '') {
+    return undefined
+  }
+
+  const rows = Number(value)
+  return Number.isFinite(rows) && rows > 0 ? Math.trunc(rows) : undefined
+}
 const autosizeEnabled = computed(() => Boolean(props.autosize))
 const controlStyle = computed(() => {
   const declarations = [`text-align:${props.align}`]
@@ -325,15 +335,6 @@ const dataInvalid = computed(() => String(field.state.invalid.value))
 const dataReadonly = computed(() => String(props.readonly))
 const resolvedFocus = computed(() => focusRequested.value || props.focus)
 
-function normalizeRows(value: number | string | undefined) {
-  if (value === undefined || value === '') {
-    return undefined
-  }
-
-  const rows = Number(value)
-  return Number.isFinite(rows) && rows > 0 ? Math.trunc(rows) : undefined
-}
-
 function eventValue(event: unknown, fallback: string) {
   if (typeof event !== 'object' || event === null) {
     return fallback
diff --git a/registry/components/textarea/v-textarea.vue b/registry/components/textarea/v-textarea.vue
index bcb7c26a..e3804185 100644
--- a/registry/components/textarea/v-textarea.vue
+++ b/registry/components/textarea/v-textarea.vue
@@ -90,6 +90,7 @@ const props = withDefaults(
     holdKeyboard: false,
     ignoreCompositionEvent: true,
     invalid: false,
+    maxLength: -1,
     readonly: false,
     selectionEnd: -1,
     selectionStart: -1,
diff --git a/stylelint.config.js b/stylelint.config.js
index 48ed67a5..65f9c69a 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -9,6 +9,19 @@ export default await defineStylelintConfig({
       'apps/realworld-weapp/src/**/*.vue',
       'apps/realworld-weapp/src/assets/**/iconfont.css',
     ],
+    overrides: [
+      {
+        files: [
+          'apps/playground-weapp-preview/src/runtime/*.css',
+          'packages/weapp-web/src/runtime/*.css',
+        ],
+        rules: {
+          'selector-type-no-unknown': [true, {
+            ignoreTypes: ['wx-page', 'wx-view', 'wx-text', 'wx-button', 'wx-input', 'wx-textarea', 'wx-label', 'wx-image', 'wx-scroll-view', 'wx-rich-text', 'wx-map', 'wx-wechat-robot-chat'],
+          }],
+        },
+      },
+    ],
     rules: {
       'declaration-block-single-line-max-declarations': null,
     },
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c3b112e0..03e99823 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -9,6 +9,9 @@
     "paths": {
       "@varo/shared": ["packages/shared/src/index.ts"],
       "@varo/utils": ["packages/utils/src/index.ts"],
+      "@varo/weapp-web": ["packages/weapp-web/src/index.ts"],
+      "@varo/weapp-web/plugin": ["packages/weapp-web/src/plugin/index.ts"],
+      "@varo/weapp-web/runtime": ["packages/weapp-web/src/runtime/index.ts"],
       "@varo-ui/theme": ["packages/theme/src/index.ts"],
       "@varo-ui/theme/weapp": ["packages/theme/src/weapp.ts"],
       "@varo-ui/theme/weapp-vite": ["packages/theme/src/weapp-vite.ts"],
diff --git a/turbo.json b/turbo.json
index 1f34659a..9a8c720d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -5,6 +5,13 @@
       "dependsOn": ["^build"],
       "outputs": ["dist/**"]
     },
+    "@varo/playground-weapp#build": {
+      "dependsOn": ["^build"],
+      "outputs": ["devtools/build/mp-weixin/**"]
+    },
+    "@varo/weapp-web#build": {
+      "cache": false
+    },
     "clean": {
       "cache": false
     },
diff --git a/vitest.config.ts b/vitest.config.ts
index ec375cb4..f8a34290 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -13,6 +13,9 @@ export default defineConfig({
       'wevu': 'vue',
       '@varo/shared': resolve(import.meta.dirname, 'packages/shared/src/index.ts'),
       '@varo/utils': resolve(import.meta.dirname, 'packages/utils/src/index.ts'),
+      '@varo/weapp-web': resolve(import.meta.dirname, 'packages/weapp-web/src/index.ts'),
+      '@varo/weapp-web/plugin': resolve(import.meta.dirname, 'packages/weapp-web/src/plugin/index.ts'),
+      '@varo/weapp-web/runtime': resolve(import.meta.dirname, 'packages/weapp-web/src/runtime/index.ts'),
       '@varo-ui/ai': resolve(import.meta.dirname, 'packages/agent-core/src/index.ts'),
       '@varo-ui/theme': resolve(import.meta.dirname, 'packages/theme/src'),
       '@varo/hooks': resolve(import.meta.dirname, 'packages/hooks/src/index.ts'),