daguanren21 · daguanren21 · Sep 11, 2026 · Sep 11, 2026 · Sep 11, 2026 · Sep 11, 2026
diff --git a/.changeset/clear-weapp-preview.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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