chore(version): bump version to 0.0.20

refactor: website structure

.github/workflows/deploy-demo.yml

@@ -25,7 +25,7 @@ jobs:
         run: npm ci
 
       - name: Build demo
-        run: npm run build
+        run: npm run build:website
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
         run: npm ci
 
       - name: Build
-        run: npm run build
+        run: npm run build:libs
 
       - name: Publish all public packages
         run: npm publish --workspaces --access public

.vscode/settings.json

@@ -1,6 +1,16 @@
 {
 	"editor.fontLigatures": true,
-	"cSpell.words": ["HITL", "innerhtml", "opensource", "retryable", "wouter"],
+	"cSpell.words": [
+		"deepseek",
+		"HITL",
+		"innerhtml",
+		"llms",
+		"opensource",
+		"qwen",
+		"retryable",
+		"shadcn",
+		"wouter"
+	],
 	"markdownlint.config": {
 		// "comment": "Relaxed rules",
 		"default": true,

AGENTS.md

@@ -1,89 +1,59 @@
-# Instructions for coding assistants
+# Instructions for Coding Assistants
 
 ## Project Overview
 
-This is a **monorepo** with npm workspaces containing **two main packages**:
+This is a **monorepo** with npm workspaces:
 
-1. **Core Library** (`packages/page-agent/`) - Pure JavaScript/TypeScript AI agent library for browser DOM automation, published as `page-agent` on npm
-2. **Website** (`packages/website/`) - React documentation and landing page. Also as demo and test page for the core lib. private package `@page-agent/website`
+- **Core Library** (`packages/page-agent/`) - AI agent for browser DOM automation, published as `page-agent` on npm
+- **Website** (`packages/website/`) - React docs and landing page. **When working on website, follow `packages/website/AGENTS.md`**
 
-And other internal packages:
+Internal packages:
 
-- **Page Controller** (`packages/page-controller/`) - DOM operations and element interactions. Independent of LLM.
-- **UI** (`packages/ui/`) - Panel, SimulatorMask, and i18n. Decoupled from PageAgent.
+- **LLMs** (`packages/llms/`) - LLM client with reflection-before-action mental model
+- **Page Controller** (`packages/page-controller/`) - DOM operations, independent of LLM
+- **UI** (`packages/ui/`) - Panel, SimulatorMask, i18n. Decoupled from PageAgent
 
 ## Development Commands
 
-### Core Commands
-
 ```bash
 npm start                    # Start website dev server
 npm run build                # Build all packages
+npm run build:libs           # Build all libraries
 npm run lint                 # ESLint with TypeScript strict rules
 ```
 
-## Architecture & Critical Patterns
+## Architecture
 
 ### Monorepo Structure
 
-We adopt a very simple monorepo solution: ts reference + vite alias. 
+Simple monorepo solution: TypeScript references + Vite aliases. Update tsconfig and vite config when adding/removing packages.
 
-You must update tsconfig and vite config if you add/remove/rename a package.
-
-```bash
+```
 packages/
 ├── page-agent/              # npm: "page-agent" ⭐ MAIN
-│   ├── src/
-│   │   ├── PageAgent.ts     # Main AI agent class
-│   │   ├── tools/           # LLM tool definitions
-│   │   └── llms/            # LLM integration
-│   ├── vite.config.js       # Library build (ES + UMD)
-│   └── package.json
-├── website/                 # npm: "@page-agent/website" (private) ⭐ MAIN
-│   ├── src/                 # Website source
-│   └── index.html           # Entry of vite webpage
-│
-│   # ...internal packages below...
-│
-├── page-controller/         # npm: "@page-agent/page-controller"
-│   └── src/                 # DOM operations
-│       ├── PageController.ts
-│       ├── actions.ts
-│       └── dom/
-└── ui/                      # npm: "@page-agent/ui"
-    └── src/                 # Panel and Mask Effects
-        ├── Panel.ts
-        ├── SimulatorMask.ts
-        └── i18n/
+├── website/                 # @page-agent/website (private)
+├── llms/                    # @page-agent/llms
+├── page-controller/         # @page-agent/page-controller
+└── ui/                      # @page-agent/ui
 ```
 
-`workspaces` must be written in topological order to guarantee build order.
+`workspaces` in `package.json` must be in topological order.
 
-```json
-"workspaces": [
-    // internal deps (topological order)
-    "packages/page-controller",
-    "packages/ui",
-    "packages/page-agent",
-    "packages/website"
-],
-```
+### Module Boundaries
 
-### Module Boundaries (Critical)
-
-- **Website** (`packages/website/`): CAN import from `page-agent` for demos. Alias `@/` → `website/src/`
-- **Page Agent** (`packages/page-agent/`): The core lib. Imports from `@page-agent/page-controller` and `@page-agent/ui`.
-- **UI** (`packages/ui/`): Panel, Mask, i18n. No dependency on page-agent.
-- **Page Controller** (`packages/page-controller/`): Pure DOM operations. No LLM or UI dependency.
+- **Page Agent**: Core lib. Imports from `@page-agent/llms`, `@page-agent/page-controller`, `@page-agent/ui`
+- **LLMs**: LLM client with MacroToolInput contract. No dependency on page-agent
+- **UI**: Panel, Mask, i18n. No dependency on page-agent
+- **Page Controller**: Pure DOM operations. No LLM or UI dependency
 
 ### PageController ↔ PageAgent Communication
 
-All communication between PageAgent and PageController is async and isolated:
+All communication is async and isolated:
 
 ```typescript
 // PageAgent delegates DOM operations to PageController
-await this.pageController.updateTree()        // Refresh DOM state
-await this.pageController.clickElement(index) // Click by index
+await this.pageController.updateTree()
+await this.pageController.clickElement(index)
 await this.pageController.inputText(index, text)
 await this.pageController.scroll({ down: true, numPages: 1 })
 
@@ -92,32 +62,22 @@ const simplifiedHTML = await this.pageController.getSimplifiedHTML()
 const pageInfo = await this.pageController.getPageInfo()
 ```
 
-DOM element references and internal state (selectorMap, elementTextMap) are encapsulated in PageController.
-
 ### DOM Pipeline
 
-1. **DOM Extraction**: Convert live DOM to `FlatDomTree` via `page-controller/src/dom/dom_tree/`
-2. **Dehydration**: DOM tree → simplified text for LLM processing
-3. **LLM Processing**: AI model returns action plans (in page-agent)
-4. **Indexed Operations**: PageAgent calls PageController methods by element index
+1. **DOM Extraction**: Live DOM → `FlatDomTree` via `page-controller/src/dom/dom_tree/`
+2. **Dehydration**: DOM tree → simplified text for LLM
+3. **LLM Processing**: AI returns action plans (page-agent)
+4. **Indexed Operations**: PageAgent calls PageController by element index
 
-### Hash Routing Requirement
+### CDN Auto-Injection
 
-Uses wouter with `useHashLocation` for static hosting:
-
-```tsx
-<Router hook={useHashLocation}>  // Always hash-based routes
-```
-
-### CDN Auto-Injection Pattern
-
-Library auto-initializes when injected via script tag:
+Library auto-initializes via script tag:
 
 ```html
 <script src="page-agent.js?model=gpt-4"></script>
 ```
 
-Query params configure `PageAgentConfig` automatically in `src/entry.ts`.
+Query params configure `PageAgentConfig` in `src/umd.ts`.
 
 ## Key Files Reference
 
@@ -125,86 +85,42 @@ Query params configure `PageAgentConfig` automatically in `src/entry.ts`.
 
 | File | Description |
 |------|-------------|
-| `src/PageAgent.ts` | ⭐ Main AI agent class orchestrating tools and LLM |
-| `src/umd.ts` | CDN/UMD entry point with auto-initialization |
-| `src/tools/` | Tool definitions that call PageController methods |
-| `src/llms/` | LLM integration and communication layer |
-| `vite.config.js` | Library build configuration (ES + UMD) |
+| `src/PageAgent.ts` | ⭐ Main AI agent class |
+| `src/umd.ts` | CDN/UMD entry with auto-init |
+| `src/tools/` | Tool definitions calling PageController |
+
+### LLMs (`packages/llms/`)
+
+| File | Description |
+|------|-------------|
+| `src/index.ts` | ⭐ LLM class with retry logic |
+| `src/types.ts` | MacroToolInput, AgentBrain, LLMConfig |
+| `src/OpenAILenientClient.ts` | OpenAI-compatible client |
 
 ### Page Controller (`packages/page-controller/`)
 
 | File | Description |
 |------|-------------|
-| `src/PageController.ts` | ⭐ Main controller class managing DOM state and actions |
-| `src/actions.ts` | Element interaction implementations (click, input, scroll) |
-| `src/dom/dom_tree/index.js` | Core DOM extraction engine (ported from browser-use) |
-| `src/dom/getPageInfo.ts` | Page scroll/size information |
-| `src/patches/` | Framework-specific optimizations (React, Antd) |
-| `src/types.ts` | TypeScript interfaces for controller |
-
-### Website (`packages/website/`)
-
-| File | Description |
-|------|-------------|
-| `src/router.tsx` | ⭐ Central routing (manual registration required) |
-| `src/components/DocsLayout.tsx` | Navigation structure (hardcoded nav items) |
-| `src/main.tsx` | Site entry with hash routing setup |
-| `src/docs/[section]/[topic]/page.tsx` | Documentation pages |
-| `src/test-pages/` | Library integration test pages |
-| `vite.config.js` | Website build configuration |
+| `src/PageController.ts` | ⭐ Main controller class |
+| `src/actions.ts` | Element interactions (click, input, scroll) |
+| `src/dom/dom_tree/index.js` | Core DOM extraction engine |
 
 ## Adding New Features
 
-### New Documentation Page
-
-1. Create `packages/website/src/docs/<section>/<slug>/page.tsx`
-2. Add route to `packages/website/src/router.tsx` with `<Header /> + <DocsLayout>` wrapper
-3. Add navigation item to `DocsLayout.tsx`
-
 ### New Agent Tool
 
-1. Implement tool in `packages/page-agent/src/tools/index.ts`
-2. If tool needs DOM operations, add method to PageController first
+1. Implement in `packages/page-agent/src/tools/index.ts`
+2. If tool needs DOM ops, add method to PageController first
 3. Tool calls `this.pageController.methodName()` for DOM interactions
 
 ### New PageController Action
 
-1. Add action implementation in `packages/page-controller/src/actions.ts`
+1. Add implementation in `packages/page-controller/src/actions.ts`
 2. Expose via async method in `PageController.ts`
 3. Export from `packages/page-controller/src/index.ts`
 
 ## Code Standards
 
-### TypeScript
-
 - Explicit typing for exported/public APIs
 - ESLint relaxes some unsafe rules for rapid iteration
-
-### CSS & Styling
-
-- **Prefer Tailwind CSS over custom CSS**
-- Custom CSS variables for theme gradients in `src/index.css`
-- Dark mode support via `dark:` classes
-- CSS modules for component-specific styles
-
-### Import Organization
-
-- External libraries first
-- Internal modules (`@/`, `@pages/`)
-- Relative imports last
-- Blank lines between groups
-
-## Debugging Common Issues
-
-### Blank Documentation Pages
-
-1. Verify route exists in `packages/website/src/router.tsx`
-2. Check component import path
-3. Verify CSS isn't hiding content (check dark mode classes)
-4. Test with minimal component first
-
-### Library Integration Issues
-
-1. Check `packages/page-agent/dist/lib/page-agent.umd.js` builds correctly
-2. Test CDN injection with query params
-4. Use `packages/website/src/test-pages/` for isolated testing
+- All code and comments must be in English.

README-zh.md

@@ -8,7 +8,7 @@
 
 🌐 [English](./README.md) | **中文**
 
-👉 <a href="https://alibaba.github.io/page-agent/" target="_blank"><b>🚀 Demo</b></a> | <a href="https://alibaba.github.io/page-agent/#/docs/introduction/overview" target="_blank"><b>📖 Documentation</b></a> 
+👉 <a href="https://alibaba.github.io/page-agent/" target="_blank"><b>🚀 Demo</b></a> | <a href="https://alibaba.github.io/page-agent/#/docs/introduction/overview" target="_blank"><b>📖 Documentation</b></a>
 
 <video id="demo-video" src="https://github.com/user-attachments/assets/141bbb01-8022-4d1f-919d-9efc9a1dc1cf" width="640" crossorigin muted autoplay loop></video>
 
@@ -24,21 +24,10 @@
 
 ## 🗺️ Roadmap
 
-👉 [**Roadmap**](./ROADMAP.md)
+👉 [**Roadmap**](https://github.com/alibaba/page-agent/issues/96)
 
 ## 🚀 快速开始
 
-### CDN 集成
-
-```html
-<!-- 临时 CDN URL. 未来会变更 -->
-<script
-	src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js"
-	crossorigin="true"
-	type="text/javascript"
-></script>
-```
-
 ### NPM 安装
 
 ```bash
@@ -56,7 +45,7 @@ const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm
 const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 
 const agent = new PageAgent({
-	modelName: DEMO_MODEL,
+	model: DEMO_MODEL,
 	baseURL: DEMO_BASE_URL,
 	apiKey: DEMO_API_KEY,
 	language: 'zh-CN',
@@ -65,6 +54,23 @@ const agent = new PageAgent({
 await agent.execute('点击登录按钮')
 ```
 
+### CDN 集成
+
+Fastest way to try PageAgent is to include it via CDN. Demo model will be used by default.
+
+| Location | URL                                                                           |
+| -------- | ----------------------------------------------------------------------------- |
+| Global   | https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js         |
+| China    | https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js |
+
+```html
+<script
+	src="https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js"
+	crossorigin="true"
+	type="text/javascript"
+></script>
+```
+
 ## 🏗️ 架构设计
 
 PageAgent adopts a simplified monorepo structure:
@@ -72,6 +78,7 @@ PageAgent adopts a simplified monorepo structure:
 ```
 packages/
 ├── page-agent/          # AI agent (npm: page-agent)
+├── llms/                # LLM 客户端 (npm: @page-agent/llms)
 ├── page-controller/     # DOM 操作 (npm: @page-agent/page-controller)
 ├── ui/                  # 面板 & 蒙层 & 模拟鼠标 (npm: @page-agent/ui)
 └── website/             # 文档站点

README.md

@@ -8,7 +8,7 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua
 
 🌐 **English** | [中文](./README-zh.md)
 
-👉 <a href="https://alibaba.github.io/page-agent/" target="_blank"><b>🚀 Demo</b></a> | <a href="https://alibaba.github.io/page-agent/#/docs/introduction/overview" target="_blank"><b>📖 Documentation</b></a> 
+👉 <a href="https://alibaba.github.io/page-agent/" target="_blank"><b>🚀 Demo</b></a> | <a href="https://alibaba.github.io/page-agent/#/docs/introduction/overview" target="_blank"><b>📖 Documentation</b></a>
 
 <video id="demo-video" src="https://github.com/user-attachments/assets/de8d1964-8bde-494f-a52f-2975469557a5" width="640" crossorigin muted autoplay loop></video>
 
@@ -24,21 +24,10 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua
 
 ## 🗺️ Roadmap
 
-👉 [**Roadmap**](./ROADMAP.md)
+👉 [**Roadmap**](https://github.com/alibaba/page-agent/issues/96)
 
 ## 🚀 Quick Start
 
-### CDN Integration
-
-```html
-<!-- temporary CDN URL. May change in the future -->
-<script
-	src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js"
-	crossorigin="true"
-	type="text/javascript"
-></script>
-```
-
 ### NPM Installation
 
 ```bash
@@ -56,7 +45,7 @@ const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm
 const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 
 const agent = new PageAgent({
-	modelName: DEMO_MODEL,
+	model: DEMO_MODEL,
 	baseURL: DEMO_BASE_URL,
 	apiKey: DEMO_API_KEY,
 	language: 'en-US',
@@ -65,6 +54,23 @@ const agent = new PageAgent({
 await agent.execute('Click the login button')
 ```
 
+### CDN Integration
+
+Fastest way to try PageAgent is to include it via CDN. Demo model will be used by default.
+
+| Location | URL                                                                           |
+| -------- | ----------------------------------------------------------------------------- |
+| Global   | https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js         |
+| China    | https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js |
+
+```html
+<script
+	src="https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js"
+	crossorigin="true"
+	type="text/javascript"
+></script>
+```
+
 ## 🏗️ Structure
 
 PageAgent adopts a simplified monorepo structure:
@@ -72,6 +78,7 @@ PageAgent adopts a simplified monorepo structure:
 ```
 packages/
 ├── page-agent/          # AI agent (npm: page-agent)
+├── llms/                # LLM client (npm: @page-agent/llms)
 ├── page-controller/     # DOM operations (npm: @page-agent/page-controller)
 ├── ui/                  # Panel & Mask & Mouse Animation (npm: @page-agent/ui)
 └── website/             # Demo & Documentation site

ROADMAP.md

@@ -1,61 +0,0 @@
-# 🗺️ PageAgent Roadmap
-
-The development progress and future plans for PageAgent.
-
-## 🚀 Current Works
-
-- [x] **MVP** 
-  - Core functionality implemented.
-- [x] **SPA interaction** 
-- [x] **Reasoning and (short) memory**
-- [x] **Multi model provider integration and testing**
-- [x] **UI with HITL** 
-  - Human-in-the-loop user interface. Agent can ask user questions.
-- [x] **Landing and doc pages**
-- [x] **Remove `ai-sdk`** 
-  - Only one function of AI-ADK is being used.
-  - Our agent memory and thinking mechanism does not suite ai-sdk.
-- [x] **Robust LLM output**
-  - Auto-fix incomplete output format of DeepSeek and QWen.
-- [x] **Working homepage with live LLM API**
-- [x] **~~free~~ CDN**
-- [x] **Free evaluation plan**
-- [x] **Custom actions and HITL**
-- [ ] **Hooks and Events**
-  - [x] **lifecycle hooks**
-  - [ ] **lifecycle events**
-- [ ] **User takeover** 
-  - [#64](https://github.com/alibaba/page-agent/issues/64)
-- [ ] **❗Hijack `page_open/page_change/page_unload` behavior**
-- [ ] **Custom knowledge base and instructions**
-  - [#45](https://github.com/alibaba/page-agent/issues/45)
-- [ ] **Black/white-list safeguard**
-- [ ] **Data-masking**
-  - [#44](https://github.com/alibaba/page-agent/issues/44)
-- [ ] **Improve Memory**
-  - [#66](https://github.com/alibaba/page-agent/issues/66)
-  - [#65](https://github.com/alibaba/page-agent/issues/65)
-- [ ] **Optimize for popular UI frameworks**
-- [x] **i18n of the website**
-  - [x] Chinese version
-  - [x] English version
-- [x] **Refactor: Separate `Agent` and `PageController`** 
-- [ ] **Chrome-ext wrapper for multi-page tasks**
-
-♻️ Following browser-use's update and contribute back.
-
-## 📋 Pending Features
-
-- [ ] **Tools for more complex tasks**
-  - todo list
-  - file sys
-- [ ] **Support custom llm fetch**
-- [ ] **Testing suits**
-- [ ] **Same-origin multi-page-app rally**
-- [ ] **Local MCP proxy**
-
-## 🤔 To Be Decided
-
-- [ ] **Cross-origin multi-page?** 
-  - Tricky
-  - Need some kind of "memory rally"

eslint.config.js

@@ -8,7 +8,7 @@ import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
 export default defineConfig([
-	globalIgnores(['**/dist', '**/test-pages', '**/node_modules']),
+	globalIgnores(['**/dist', '**/node_modules', 'packages/website/src/components/ui']),
 	{
 		plugins: {
 			'react-hooks': reactHooks,

package.json

@@ -1,11 +1,12 @@
 {
 	"name": "root",
 	"private": true,
-	"version": "0.0.10",
+	"version": "0.0.20",
 	"type": "module",
 	"workspaces": [
 		"packages/page-controller",
 		"packages/ui",
+		"packages/llms",
 		"packages/page-agent",
 		"packages/website"
 	],
@@ -22,33 +23,37 @@
 		"npm": ">=10.0.0"
 	},
 	"scripts": {
+		"cleanup": "rm -rf packages/*/dist",
 		"start": "npm run dev --workspace=@page-agent/website",
-		"build": "npm run build --workspaces --if-present",
+		"build:website": "npm run build:website --workspace=@page-agent/website",
+		"build:libs": "npm run build --workspaces --if-present",
+		"build": "npm run build:libs && npm run build:website",
 		"dev:umd": "npm run dev:umd --workspace=page-agent",
 		"version": "node scripts/sync-version.js",
 		"lint": "eslint .",
 		"prepare": "husky"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^20.2.0",
-		"@commitlint/config-conventional": "^20.2.0",
+		"@commitlint/cli": "^20.3.0",
+		"@commitlint/config-conventional": "^20.3.0",
 		"@eslint/js": "^9.39.2",
 		"@microsoft/api-extractor": "^7.55.2",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.1",
+		"@types/node": "^25.0.3",
 		"concurrently": "^9.2.1",
 		"dotenv": "^17.2.3",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-react-dom": "^2.3.13",
+		"eslint-plugin-react-dom": "^2.5.1",
 		"eslint-plugin-react-hooks": "^7.0.1",
-		"eslint-plugin-react-refresh": "^0.4.25",
-		"eslint-plugin-react-x": "^2.3.13",
+		"eslint-plugin-react-refresh": "^0.4.26",
+		"eslint-plugin-react-x": "^2.5.1",
 		"globals": "^16.4.0",
 		"husky": "^9.1.7",
 		"lint-staged": "^16.2.4",
 		"prettier": "^3.7.4",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.49.0",
+		"typescript-eslint": "^8.52.0",
 		"unplugin-dts": "^1.0.0-beta.6",
 		"vite": "^7.3.0",
 		"vite-plugin-css-injected-by-js": "^3.5.2"

packages/llms/README.md

@@ -0,0 +1,41 @@
+# @page-agent/llms
+
+LLM client with a **reflection-before-action** mental model for page-agent.
+
+## Why This Package Exists
+
+The LLM module and the agent logic are inherently coupled. This package exists not to decouple them, but to **define the interface contract** between the LLM and the agent.
+
+The core abstraction is the `MacroToolInput` — a structured output format that **forces the model to reflect before acting**.
+
+## The Reflection-Before-Action Model
+
+Every tool call must first output its reasoning state before the actual action:
+
+```typescript
+interface MacroToolInput {
+  // Reflection (mandatory before any action)
+  evaluation_previous_goal?: string  // How well did the previous action work?
+  memory?: string                     // Key information to remember
+  next_goal?: string                  // What to accomplish next
+
+  // Action (the actual operation)
+  action: Record<string, any>
+}
+```
+
+This design ensures that:
+
+1. **The model evaluates its previous action** before deciding the next step
+2. **Working memory is explicitly maintained** across conversation turns
+3. **Goals are clearly stated**, making the agent's reasoning transparent and debuggable
+
+## Key Components
+
+| Export | Description |
+|--------|-------------|
+| `LLM` | Main LLM client class with retry logic |
+| `MacroToolInput` | The reflection-before-action input schema |
+| `AgentBrain` | Agent's thinking state (eval, memory, goal) |
+| `LLMConfig` | Configuration for LLM connection |
+| `parseLLMConfig` | Parse and apply defaults to config |

packages/llms/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@page-agent/llms",
+	"version": "0.0.20",
+	"type": "module",
+	"main": "./dist/lib/page-agent-llms.js",
+	"module": "./dist/lib/page-agent-llms.js",
+	"types": "./dist/lib/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/lib/index.d.ts",
+			"import": "./dist/lib/page-agent-llms.js",
+			"default": "./dist/lib/page-agent-llms.js"
+		}
+	},
+	"files": [
+		"dist/"
+	],
+	"description": "LLM client with reflection-before-action mental model for page-agent",
+	"keywords": [
+		"page-agent",
+		"llm",
+		"openai",
+		"tool-calling",
+		"agent"
+	],
+	"author": "Simon<gaomeng1900>",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/alibaba/page-agent.git",
+		"directory": "packages/llms"
+	},
+	"homepage": "https://alibaba.github.io/page-agent/",
+	"scripts": {
+		"build": "vite build",
+		"prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
+		"postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
+	},
+	"dependencies": {
+		"chalk": "^5.6.2",
+		"zod": "^4.3.5"
+	}
+}

packages/llms/src/OpenAIClient.ts

@@ -1,14 +1,19 @@
 /**
  * OpenAI Client implementation
+ * @note This client is only for demonstrating how to implement a LLM client.
+ * @note Use OpenAILenientClient instead.
  */
 import { InvokeError, InvokeErrorType } from './errors'
-import type { InvokeResult, LLMClient, Message, OpenAIClientConfig, Tool } from './types'
+import type { InvokeResult, LLMClient, LLMConfig, Message, Tool } from './types'
 import { modelPatch, zodToOpenAITool } from './utils'
 
+/**
+ * @deprecated Use OpenAILenientClient instead.
+ */
 export class OpenAIClient implements LLMClient {
-	config: OpenAIClientConfig
+	config: LLMConfig
 
-	constructor(config: OpenAIClientConfig) {
+	constructor(config: LLMConfig) {
 		this.config = config
 	}
 
@@ -33,7 +38,6 @@ export class OpenAIClient implements LLMClient {
 					modelPatch({
 						model: this.config.model,
 						temperature: this.config.temperature,
-						max_tokens: this.config.maxTokens,
 						messages,
 
 						tools: openaiTools,

packages/llms/src/OpenAILenientClient.ts

@@ -1,16 +1,17 @@
 /**
  * OpenAI Client implementation
  */
-import type { MacroToolInput } from '../PageAgent'
 import { InvokeError, InvokeErrorType } from './errors'
-import type { InvokeResult, LLMClient, Message, OpenAIClientConfig, Tool } from './types'
+import type { InvokeResult, LLMClient, LLMConfig, MacroToolInput, Message, Tool } from './types'
 import { lenientParseMacroToolCall, modelPatch, zodToOpenAITool } from './utils'
 
 export class OpenAIClient implements LLMClient {
-	config: OpenAIClientConfig
+	config: Required<LLMConfig>
+	private fetch: typeof globalThis.fetch
 
-	constructor(config: OpenAIClientConfig) {
+	constructor(config: Required<LLMConfig>) {
 		this.config = config
+		this.fetch = config.customFetch
 	}
 
 	async invoke(
@@ -24,7 +25,7 @@ export class OpenAIClient implements LLMClient {
 		// 2. Call API
 		let response: Response
 		try {
-			response = await fetch(`${this.config.baseURL}/chat/completions`, {
+			response = await this.fetch(`${this.config.baseURL}/chat/completions`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',
@@ -34,17 +35,11 @@ export class OpenAIClient implements LLMClient {
 					modelPatch({
 						model: this.config.model,
 						temperature: this.config.temperature,
-						max_tokens: this.config.maxTokens,
 						messages,
 
 						tools: openaiTools,
 						// tool_choice: 'required',
 						tool_choice: { type: 'function', function: { name: 'AgentOutput' } },
-
-						// model specific params
-
-						// reasoning_effort: 'minimal',
-						// verbosity: 'low',
 						parallel_tool_calls: false,
 					})
 				),
@@ -52,6 +47,7 @@ export class OpenAIClient implements LLMClient {
 			})
 		} catch (error: unknown) {
 			// Network error
+			console.error(error)
 			throw new InvokeError(InvokeErrorType.NETWORK_ERROR, 'Network request failed', error)
 		}
 

packages/llms/src/constants.ts

@@ -0,0 +1,20 @@
+// Dev environment: use .env config if available, otherwise fallback to testing api
+export const DEFAULT_MODEL_NAME: string =
+	import.meta.env.DEV && import.meta.env.LLM_MODEL_NAME
+		? import.meta.env.LLM_MODEL_NAME
+		: 'PAGE-AGENT-FREE-TESTING-RANDOM'
+
+export const DEFAULT_API_KEY: string =
+	import.meta.env.DEV && import.meta.env.LLM_API_KEY
+		? import.meta.env.LLM_API_KEY
+		: 'PAGE-AGENT-FREE-TESTING-RANDOM'
+
+export const DEFAULT_BASE_URL: string =
+	import.meta.env.DEV && import.meta.env.LLM_BASE_URL
+		? import.meta.env.LLM_BASE_URL
+		: 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
+
+// internal
+
+export const LLM_MAX_RETRIES = 2
+export const DEFAULT_TEMPERATURE = 0.7 // higher randomness helps auto-recovery

packages/llms/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/llms/src/index.ts

@@ -31,13 +31,47 @@
  * - 永远使用 tool call 来返回结构化数据，禁止模型直接返回（视为出错）
  * - 不能假设 tool 参数合法，必须有修复机制，而且修复也应该使用 tool call 返回
  */
-import type { LLMConfig } from '../config'
-import { parseLLMConfig } from '../config'
 import { OpenAIClient } from './OpenAILenientClient'
+import {
+	DEFAULT_API_KEY,
+	DEFAULT_BASE_URL,
+	DEFAULT_MODEL_NAME,
+	DEFAULT_TEMPERATURE,
+	LLM_MAX_RETRIES,
+} from './constants'
 import { InvokeError } from './errors'
-import type { InvokeResult, LLMClient, Message, Tool } from './types'
+import type {
+	AgentBrain,
+	InvokeResult,
+	LLMClient,
+	LLMConfig,
+	MacroToolInput,
+	MacroToolResult,
+	Message,
+	Tool,
+} from './types'
 
-export type { Message, Tool, InvokeResult, LLMClient }
+export type {
+	AgentBrain,
+	InvokeResult,
+	LLMClient,
+	LLMConfig,
+	MacroToolInput,
+	MacroToolResult,
+	Message,
+	Tool,
+}
+
+export function parseLLMConfig(config: LLMConfig): Required<LLMConfig> {
+	return {
+		baseURL: config.baseURL ?? DEFAULT_BASE_URL,
+		apiKey: config.apiKey ?? DEFAULT_API_KEY,
+		model: config.model ?? DEFAULT_MODEL_NAME,
+		temperature: config.temperature ?? DEFAULT_TEMPERATURE,
+		maxRetries: config.maxRetries ?? LLM_MAX_RETRIES,
+		customFetch: (config.customFetch ?? fetch).bind(globalThis), // fetch will be illegal unless bound
+	}
+}
 
 export class LLM extends EventTarget {
 	config: Required<LLMConfig>
@@ -48,13 +82,7 @@ export class LLM extends EventTarget {
 		this.config = parseLLMConfig(config)
 
 		// Default to OpenAI client
-		this.client = new OpenAIClient({
-			model: this.config.model,
-			apiKey: this.config.apiKey,
-			baseURL: this.config.baseURL,
-			temperature: this.config.temperature,
-			maxTokens: this.config.maxTokens,
-		})
+		this.client = new OpenAIClient(this.config)
 	}
 
 	/**

packages/llms/src/types.ts

@@ -65,13 +65,53 @@ export interface InvokeResult<TResult = unknown> {
 }
 
 /**
- * OpenAI Client config
+ * LLM configuration
  */
-export interface OpenAIClientConfig {
-	model: string
-	apiKey: string
-	baseURL: string
+export interface LLMConfig {
+	baseURL?: string
+	apiKey?: string
+	model?: string
+
 	temperature?: number
-	maxTokens?: number
 	maxRetries?: number
+
+	/**
+	 * Custom fetch function for LLM API requests.
+	 * Use this to customize headers, credentials, proxy, etc.
+	 * The response should follow OpenAI API format.
+	 */
+	customFetch?: typeof globalThis.fetch
+}
+
+/**
+ * Agent brain state - the reflection-before-action model
+ *
+ * Every tool call must first reflect on:
+ * - evaluation_previous_goal: How well did the previous action achieve its goal?
+ * - memory: Key information to remember for future steps
+ * - next_goal: What should be accomplished in the next action?
+ */
+export interface AgentBrain {
+	// thinking?: string
+	evaluation_previous_goal: string
+	memory: string
+	next_goal: string
+}
+
+/**
+ * MacroTool input structure
+ *
+ * This is the core abstraction that enforces the "reflection-before-action" mental model.
+ * Before executing any action, the LLM must output its reasoning state.
+ */
+export interface MacroToolInput extends AgentBrain {
+	action: Record<string, any>
+}
+
+/**
+ * MacroTool output structure
+ */
+export interface MacroToolResult {
+	input: MacroToolInput
+	output: string
 }

packages/llms/src/utils.ts

@@ -4,9 +4,12 @@
 import chalk from 'chalk'
 import { z } from 'zod'
 
-import type { MacroToolInput } from '../PageAgent'
 import { InvokeError, InvokeErrorType } from './errors'
-import type { Tool } from './types'
+import type { MacroToolInput, Tool } from './types'
+
+function debug(message: string) {
+	console.debug(chalk.gray('[LLM]'), message)
+}
 
 /**
  * Convert Zod schema to OpenAI tool format
@@ -193,22 +196,82 @@ export function lenientParseMacroToolCall(
 	}
 }
 
+/**
+ * Patch model specific parameters
+ */
 export function modelPatch(body: Record<string, any>) {
 	const model: string = body.model || ''
+	if (!model) return body
 
-	if (model.toLowerCase().startsWith('claude')) {
+	const modelName = normalizeModelName(model)
+
+	if (modelName.startsWith('claude')) {
+		debug('Applying Claude patch: change tool_choice and disable thinking')
 		body.tool_choice = { type: 'tool', name: 'AgentOutput' }
 		body.thinking = { type: 'disabled' }
 		// body.reasoning = { enabled: 'disabled' }
 	}
 
-	if (model.toLowerCase().includes('grok')) {
-		console.log('Applying Grok patch: removing tool_choice')
+	if (modelName.startsWith('grok')) {
+		debug('Applying Grok patch: removing tool_choice')
 		delete body.tool_choice
-		console.log('Applying Grok patch: disable reasoning and thinking')
+		debug('Applying Grok patch: disable reasoning and thinking')
 		body.thinking = { type: 'disabled', effort: 'minimal' }
 		body.reasoning = { enabled: false, effort: 'low' }
 	}
 
+	if (modelName.startsWith('gpt')) {
+		debug('Applying GPT patch: set verbosity to low')
+		body.verbosity = 'low'
+
+		if (modelName.startsWith('gpt-52')) {
+			debug('Applying GPT-52 patch: disable reasoning')
+			body.reasoning_effort = 'none'
+		} else if (modelName.startsWith('gpt-51')) {
+			debug('Applying GPT-51 patch: disable reasoning')
+			body.reasoning_effort = 'none'
+		} else if (modelName.startsWith('gpt-5')) {
+			debug('Applying GPT-5 patch: set reasoning effort to low')
+			body.reasoning_effort = 'low'
+		}
+	}
+
+	if (modelName.startsWith('gemini')) {
+		debug('Applying Gemini patch: set reasoning effort to minimal')
+		body.reasoning_effort = 'minimal'
+	}
+
 	return body
 }
+
+/**
+ * check if a given model ID fits a specific model name
+ *
+ * @note
+ * Different model providers may use different model IDs for the same model.
+ * For example, openai's `gpt-5.2` may called:
+ *
+ * - `gpt-5.2-version`
+ * - `gpt-5_2-date`
+ * - `GPT-52-version-date`
+ * - `openai/gpt-5.2-chat`
+ *
+ * They should be treated as the same model.
+ * Normalize them to `gpt-52`
+ */
+function normalizeModelName(modelName: string): string {
+	let normalizedName = modelName.toLowerCase()
+
+	// remove prefix before '/'
+	if (normalizedName.includes('/')) {
+		normalizedName = normalizedName.split('/')[1]
+	}
+
+	// remove '_'
+	normalizedName = normalizedName.replace(/_/g, '')
+
+	// remove '.'
+	normalizedName = normalizedName.replace(/\./g, '')
+
+	return normalizedName
+}

packages/llms/tsconfig.dts.json

@@ -0,0 +1,10 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		// @workaround DTS bug
+		// dts do not work with monorepo path mapping
+		// disable path mapping for it
+		"paths": {}
+	}
+}
+

packages/llms/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+		"noEmit": false,
+		"allowImportingTsExtensions": false,
+		"baseUrl": ".",
+		"outDir": "dist"
+	},
+	"include": ["**/*.ts"],
+	"exclude": ["dist", "node_modules"]
+}
+

packages/llms/vite.config.js

@@ -0,0 +1,37 @@
+// @ts-check
+import chalk from 'chalk'
+import { dirname, resolve } from 'path'
+import dts from 'unplugin-dts/vite'
+import { fileURLToPath } from 'url'
+import { defineConfig } from 'vite'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+console.log(chalk.cyan(`📦 Building @page-agent/llms`))
+
+export default defineConfig({
+	clearScreen: false,
+	plugins: [dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true })],
+	publicDir: false,
+	esbuild: {
+		keepNames: true,
+	},
+	build: {
+		lib: {
+			entry: resolve(__dirname, 'src/index.ts'),
+			name: 'PageAgentLLMs',
+			fileName: 'page-agent-llms',
+			formats: ['es'],
+		},
+		outDir: resolve(__dirname, 'dist', 'lib'),
+		rollupOptions: {
+			external: ['chalk', 'zod'],
+		},
+		minify: false,
+		sourcemap: true,
+	},
+	define: {
+		'process.env.NODE_ENV': '"production"',
+	},
+})
+

packages/page-agent/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "page-agent",
 	"private": false,
-	"version": "0.0.10",
+	"version": "0.0.20",
 	"type": "module",
-	"main": "./dist/lib/page-agent.js",
-	"module": "./dist/lib/page-agent.js",
-	"types": "./dist/lib/PageAgent.d.ts",
+	"main": "./dist/esm/page-agent.js",
+	"module": "./dist/esm/page-agent.js",
+	"types": "./dist/esm/PageAgent.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/lib/PageAgent.d.ts",
-			"import": "./dist/lib/page-agent.js",
-			"default": "./dist/lib/page-agent.js"
+			"types": "./dist/esm/PageAgent.d.ts",
+			"import": "./dist/esm/page-agent.js",
+			"default": "./dist/esm/page-agent.js"
 		}
 	},
 	"files": [
@@ -37,16 +37,17 @@
 	},
 	"homepage": "https://alibaba.github.io/page-agent/",
 	"scripts": {
-		"build": "MODE=lib vite build && MODE=umd vite build",
+		"build": "vite build && vite build --config vite.umd.config.js",
 		"serve": "npx serve dist/umd -p 5173",
-		"dev:umd": "concurrently \"MODE=umd vite build --watch\" \"npm run serve\"",
+		"dev:umd": "concurrently \"vite build --config vite.umd.config.js --watch\" \"npm run serve\"",
 		"prepublishOnly": "node -e \"const fs=require('fs');['README.md','LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
 		"postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
 	},
 	"dependencies": {
 		"chalk": "^5.6.2",
-		"zod": "^4.1.12",
-		"@page-agent/page-controller": "0.0.10",
-		"@page-agent/ui": "0.0.10"
+		"zod": "^4.3.5",
+		"@page-agent/llms": "0.0.20",
+		"@page-agent/page-controller": "0.0.20",
+		"@page-agent/ui": "0.0.20"
 	}
 }

packages/page-agent/src/PageAgent.ts

@@ -2,6 +2,13 @@
  * Copyright (C) 2025 Alibaba Group Holding Limited
  * All rights reserved.
  */
+import {
+	type AgentBrain,
+	LLM,
+	type MacroToolInput,
+	type MacroToolResult,
+	type Tool,
+} from '@page-agent/llms'
 import { PageController } from '@page-agent/page-controller'
 import { Panel, SimulatorMask } from '@page-agent/ui'
 import chalk from 'chalk'
@@ -9,7 +16,6 @@ import zod from 'zod'
 
 import type { PageAgentConfig } from './config'
 import { MAX_STEPS } from './config/constants'
-import { LLM, type Tool } from './llms'
 import SYSTEM_PROMPT from './prompts/system_prompt.md?raw'
 import { tools } from './tools'
 import { trimLines, uid, waitUntil } from './utils'
@@ -17,31 +23,7 @@ import { assert } from './utils/assert'
 
 export type { PageAgentConfig }
 export { tool, type PageAgentTool } from './tools'
-
-export interface AgentBrain {
-	// thinking?: string
-	evaluation_previous_goal: string
-	memory: string
-	next_goal: string
-}
-
-/**
- * MacroTool input structure
- */
-export interface MacroToolInput {
-	evaluation_previous_goal?: string
-	memory?: string
-	next_goal?: string
-	action: Record<string, any>
-}
-
-/**
- * MacroTool output structure
- */
-export interface MacroToolResult {
-	input: MacroToolInput
-	output: string
-}
+export type { AgentBrain, MacroToolInput, MacroToolResult }
 
 export interface AgentHistory {
 	brain: AgentBrain
@@ -281,9 +263,7 @@ export class PageAgent extends EventTarget {
 		const tools = this.tools
 
 		const actionSchemas = Array.from(tools.entries()).map(([toolName, tool]) => {
-			return zod.object({
-				[toolName]: tool.inputSchema,
-			})
+			return zod.object({ [toolName]: tool.inputSchema }).describe(tool.description)
 		})
 
 		const actionSchema = zod.union(
@@ -381,25 +361,49 @@ export class PageAgent extends EventTarget {
 		return systemPrompt
 	}
 
+	/**
+	 * Get instructions from config and format as XML block
+	 */
+	async #getInstructions(): Promise<string> {
+		const { instructions } = this.config
+		if (!instructions) return ''
+
+		const systemInstructions = instructions.system?.trim()
+		const url = await this.pageController.getCurrentUrl()
+		let pageInstructions: string | undefined
+
+		if (instructions.getPageInstructions) {
+			try {
+				pageInstructions = instructions.getPageInstructions(url)?.trim()
+			} catch (error) {
+				console.error(
+					chalk.red('[PageAgent] Failed to execute getPageInstructions callback:'),
+					error
+				)
+			}
+		}
+		if (!systemInstructions && !pageInstructions) return ''
+
+		let result = '<instructions>\n'
+
+		if (systemInstructions) {
+			result += `<system_instructions>\n${systemInstructions}\n</system_instructions>\n`
+		}
+
+		if (pageInstructions) {
+			result += `<page_instructions>\n${pageInstructions}\n</page_instructions>\n`
+		}
+
+		result += '</instructions>\n\n'
+
+		return result
+	}
+
 	async #assembleUserPrompt(): Promise<string> {
 		let prompt = ''
 
-		// <agent_history>
-		//  - <step_>
-
-		prompt += '<agent_history>\n'
-
-		this.history.forEach((history, index) => {
-			prompt += `<step_${index + 1}>
-				Evaluation of Previous Step: ${history.brain.evaluation_previous_goal}
-				Memory: ${history.brain.memory}
-				Next Goal: ${history.brain.next_goal}
-				Action Results: ${history.action.output}
-				</step_${index + 1}>
-			`
-		})
-
-		prompt += '</agent_history>\n\n'
+		// <instructions> (optional)
+		prompt += await this.#getInstructions()
 
 		// <agent_state>
 		//  - <user_request>
@@ -417,6 +421,23 @@ export class PageAgent extends EventTarget {
 			</agent_state>
 		`
 
+		// <agent_history>
+		//  - <step_>
+
+		prompt += '\n<agent_history>\n'
+
+		this.history.forEach((history, index) => {
+			prompt += `<step_${index + 1}>
+				Evaluation of Previous Step: ${history.brain.evaluation_previous_goal}
+				Memory: ${history.brain.memory}
+				Next Goal: ${history.brain.next_goal}
+				Action Results: ${history.action.output}
+				</step_${index + 1}>
+			`
+		})
+
+		prompt += '</agent_history>\n\n'
+
 		// <browser_state>
 
 		prompt += await this.#getBrowserState()
@@ -452,7 +473,11 @@ export class PageAgent extends EventTarget {
 		await this.pageController.updateTree()
 		this.mask.wrapper.style.pointerEvents = 'auto'
 
-		const simplifiedHTML = await this.pageController.getSimplifiedHTML()
+		let simplifiedHTML = await this.pageController.getSimplifiedHTML()
+
+		if (this.config.transformPageContent) {
+			simplifiedHTML = await this.config.transformPageContent(simplifiedHTML)
+		}
 
 		let prompt = trimLines(`<browser_state>
 			Current Page: [${pageTitle}](${pageUrl})

packages/page-agent/src/config/constants.ts

@@ -1,22 +1,2 @@
-// Dev environment: use .env config if available, otherwise fallback to testing api
-export const DEFAULT_MODEL_NAME: string =
-	import.meta.env.DEV && import.meta.env.LLM_MODEL_NAME
-		? import.meta.env.LLM_MODEL_NAME
-		: 'PAGE-AGENT-FREE-TESTING-RANDOM'
-
-export const DEFAULT_API_KEY: string =
-	import.meta.env.DEV && import.meta.env.LLM_API_KEY
-		? import.meta.env.LLM_API_KEY
-		: 'PAGE-AGENT-FREE-TESTING-RANDOM'
-
-export const DEFAULT_BASE_URL: string =
-	import.meta.env.DEV && import.meta.env.LLM_BASE_URL
-		? import.meta.env.LLM_BASE_URL
-		: 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
-
-// internal
-
-export const LLM_MAX_RETRIES = 2
+// Agent-specific constants (LLM constants moved to @page-agent/llms)
 export const MAX_STEPS = 20
-export const DEFAULT_TEMPERATURE = 0.7 // higher randomness helps auto-recovery
-export const DEFAULT_MAX_TOKENS = 4096

packages/page-agent/src/config/index.ts

@@ -1,25 +1,11 @@
+import type { LLMConfig } from '@page-agent/llms'
 import type { PageControllerConfig } from '@page-agent/page-controller'
 import type { SupportedLanguage } from '@page-agent/ui'
 
 import type { AgentHistory, ExecutionResult, PageAgent } from '../PageAgent'
 import type { PageAgentTool } from '../tools'
-import {
-	DEFAULT_API_KEY,
-	DEFAULT_BASE_URL,
-	DEFAULT_MAX_TOKENS,
-	DEFAULT_MODEL_NAME,
-	DEFAULT_TEMPERATURE,
-	LLM_MAX_RETRIES,
-} from './constants'
 
-export interface LLMConfig {
-	baseURL?: string
-	apiKey?: string
-	model?: string
-	temperature?: number
-	maxTokens?: number
-	maxRetries?: number
-}
+export type { LLMConfig }
 
 export interface AgentConfig {
 	// theme?: 'light' | 'dark'
@@ -56,8 +42,27 @@ export interface AgentConfig {
 	 */
 	customTools?: Record<string, PageAgentTool | null>
 
+	/**
+	 * Instructions to guide the agent's behavior
+	 */
+	instructions?: {
+		/**
+		 * Global system-level instructions, applied to all tasks
+		 */
+		system?: string
+
+		/**
+		 * Dynamic page-level instructions callback
+		 * Called before each step to get instructions for the current page
+		 * @param url - Current page URL (window.location.href)
+		 * @returns Instructions string, or undefined/null to skip
+		 */
+		getPageInstructions?: (url: string) => string | undefined | null
+	}
+
 	// lifecycle hooks
 	// @todo: use event instead of hooks
+	// @todo: remove `this` binding, pass agent as explicit parameter instead
 
 	onBeforeStep?: (this: PageAgent, stepCnt: number) => Promise<void> | void
 	onAfterStep?: (this: PageAgent, stepCnt: number, history: AgentHistory[]) => Promise<void> | void
@@ -67,6 +72,7 @@ export interface AgentConfig {
 	/**
 	 * @note this hook can block the disposal process
 	 * @note when dispose caused by page unload, reason will be 'PAGE_UNLOADING'. this method CANNOT block unloading. async operations may be cut.
+	 * @todo remove `this` binding, pass agent as explicit parameter instead
 	 */
 	onDispose?: (this: PageAgent, reason?: string) => void
 
@@ -80,10 +86,27 @@ export interface AgentConfig {
 	 */
 	experimentalScriptExecutionTool?: boolean
 
+	/**
+	 * Transform page content before sending to LLM.
+	 * Called after DOM extraction and simplification, before LLM invocation.
+	 * Use cases: inspect extraction results, modify page info, mask sensitive data.
+	 *
+	 * @param content - Simplified page content that will be sent to LLM
+	 * @returns Transformed content
+	 *
+	 * @example
+	 * // Mask phone numbers
+	 * transformPageContent: async (content) => {
+	 *   return content.replace(/1[3-9]\d{9}/g, '***********')
+	 * }
+	 */
+	transformPageContent?: (content: string) => Promise<string> | string
+
 	/**
 	 * TODO: @unimplemented
 	 * hook when action causes a new page to be opened
 	 * @note PageAgent will try to detect new pages and decide if it's caused by an action. But not very reliable.
+	 * @todo remove `this` binding, pass agent as explicit parameter instead
 	 */
 	onNewPageOpen?: (this: PageAgent, url: string) => Promise<void> | void
 
@@ -96,14 +119,3 @@ export interface AgentConfig {
 }
 
 export type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig
-
-export function parseLLMConfig(config: LLMConfig): Required<LLMConfig> {
-	return {
-		baseURL: config.baseURL ?? DEFAULT_BASE_URL,
-		apiKey: config.apiKey ?? DEFAULT_API_KEY,
-		model: config.model ?? DEFAULT_MODEL_NAME,
-		temperature: config.temperature ?? DEFAULT_TEMPERATURE,
-		maxTokens: config.maxTokens ?? DEFAULT_MAX_TOKENS,
-		maxRetries: config.maxRetries ?? LLM_MAX_RETRIES,
-	}
-}

packages/page-agent/src/umd.ts

@@ -20,21 +20,25 @@ const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
 const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 
-const currentScript = document.currentScript as HTMLScriptElement | null
-if (currentScript) {
-	console.log('🚀 page-agent.js detected current script:', currentScript.src)
-	const url = new URL(currentScript.src)
-	const model = url.searchParams.get('model') || DEMO_MODEL
-	const baseURL = url.searchParams.get('baseURL') || DEMO_BASE_URL
-	const apiKey = url.searchParams.get('apiKey') || DEMO_API_KEY
-	const language = (url.searchParams.get('lang') as 'zh-CN' | 'en-US') || 'zh-CN'
-	const config: PageAgentConfig = { model, baseURL, apiKey, language }
-	window.pageAgent = new PageAgent(config)
-} else {
-	console.log('🚀 page-agent.js no current script detected, using default demo config')
-	window.pageAgent = new PageAgent()
-}
+// in case document.x is not ready yet
+// @todo give a switch to disable auto-init
+setTimeout(() => {
+	const currentScript = document.currentScript as HTMLScriptElement | null
+	if (currentScript) {
+		console.log('🚀 page-agent.js detected current script:', currentScript.src)
+		const url = new URL(currentScript.src)
+		const model = url.searchParams.get('model') || DEMO_MODEL
+		const baseURL = url.searchParams.get('baseURL') || DEMO_BASE_URL
+		const apiKey = url.searchParams.get('apiKey') || DEMO_API_KEY
+		const language = (url.searchParams.get('lang') as 'zh-CN' | 'en-US') || 'zh-CN'
+		const config: PageAgentConfig = { model, baseURL, apiKey, language }
+		window.pageAgent = new PageAgent(config)
+	} else {
+		console.log('🚀 page-agent.js no current script detected, using default demo config')
+		window.pageAgent = new PageAgent()
+	}
 
-console.log('🚀 page-agent.js initialized with config:', window.pageAgent.config)
+	console.log('🚀 page-agent.js initialized with config:', window.pageAgent.config)
 
-window.pageAgent.panel.show() // Show panel
+	window.pageAgent.panel.show() // Show panel
+})

packages/page-agent/tsconfig.json

@@ -8,6 +8,7 @@
 		"outDir": "dist",
 		"paths": {
 			//
+			"@page-agent/llms": ["../llms/src/index.ts"],
 			"@page-agent/page-controller": ["../page-controller/src/PageController.ts"],
 			"@page-agent/ui": ["../ui/src/index.ts"]
 		}
@@ -16,6 +17,7 @@
 	"exclude": ["dist", "node_modules"],
 	"references": [
 		//
+		{ "path": "../llms" },
 		{ "path": "../page-controller" },
 		{ "path": "../ui" }
 	]

packages/page-agent/vite.config.js

@@ -1,7 +1,4 @@
 // @ts-check
-import chalk from 'chalk'
-import 'dotenv/config'
-import process from 'node:process'
 import { dirname, resolve } from 'path'
 import dts from 'unplugin-dts/vite'
 import { fileURLToPath } from 'url'
@@ -10,15 +7,11 @@ import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
-// ============================================================================
-// Library Config (ES Module for NPM Package)
-// ============================================================================
-/** @type {import('vite').UserConfig} */
-const libConfig = {
+// ES Module for NPM Package
+export default defineConfig({
 	clearScreen: false,
 	plugins: [
 		dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true }),
-		// dts({ tsconfigPath: './tsconfig.json', bundleTypes: true, compilerOptions: { paths: {} } }),
 		cssInjectedByJsPlugin({ relativeCSSInjection: true }),
 	],
 	publicDir: false,
@@ -32,10 +25,9 @@ const libConfig = {
 			fileName: 'page-agent',
 			formats: ['es'],
 		},
-		outDir: resolve(__dirname, 'dist', 'lib'),
+		outDir: resolve(__dirname, 'dist', 'esm'),
 		rollupOptions: {
 			external: [
-				'ai-motion',
 				'chalk',
 				'zod',
 				// all the internal packages
@@ -49,53 +41,4 @@ const libConfig = {
 	define: {
 		'process.env.NODE_ENV': '"production"',
 	},
-}
-
-// ============================================================================
-// UMD Config (Browser Bundle for CDN)
-// - alias all local packages so that they can be build in
-// - no external
-// - no d.ts. dts does not work with monorepo aliasing
-// ============================================================================
-/** @type {import('vite').UserConfig} */
-const umdConfig = {
-	plugins: [cssInjectedByJsPlugin({ relativeCSSInjection: true })],
-	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
-	resolve: {
-		alias: {
-			'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
-			'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
-		},
-	},
-	build: {
-		lib: {
-			entry: resolve(__dirname, 'src/umd.ts'),
-			name: 'PageAgent',
-			fileName: 'page-agent',
-			formats: ['umd'],
-		},
-		outDir: resolve(__dirname, 'dist', 'umd'),
-		cssCodeSplit: true,
-	},
-	define: {
-		'process.env.NODE_ENV': '"production"',
-	},
-}
-
-// ============================================================================
-
-const MODE = process.env.MODE
-
-console.log(chalk.cyan(`📦 Build mode: ${chalk.bold(MODE || 'lib')}`))
-
-let config
-if (MODE === 'umd') {
-	config = umdConfig
-} else {
-	config = libConfig
-}
-
-export default defineConfig(config)
+})

packages/page-agent/vite.umd.config.js

@@ -0,0 +1,45 @@
+// @ts-check
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { defineConfig } from 'vite'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// UMD Bundle for CDN
+// - alias all local packages so that they can be build in
+// - no external
+// - no d.ts. dts does not work with monorepo aliasing
+export default defineConfig({
+	plugins: [cssInjectedByJsPlugin({ relativeCSSInjection: true })],
+	publicDir: false,
+	esbuild: {
+		keepNames: true,
+	},
+	resolve: {
+		alias: {
+			'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
+			'@page-agent/llms': resolve(__dirname, '../llms/src/index.ts'),
+			'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
+		},
+	},
+	build: {
+		lib: {
+			entry: resolve(__dirname, 'src/umd.ts'),
+			name: 'PageAgent',
+			fileName: 'page-agent',
+			formats: ['umd'],
+		},
+		outDir: resolve(__dirname, 'dist', 'umd'),
+		rollupOptions: {
+			output: {
+				// force use .js as extension
+				entryFileNames: 'page-agent.js',
+			},
+		},
+		cssCodeSplit: true,
+	},
+	define: {
+		'process.env.NODE_ENV': '"production"',
+	},
+})

packages/page-controller/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@page-agent/page-controller",
-	"version": "0.0.10",
+	"version": "0.0.20",
 	"type": "module",
 	"main": "./dist/lib/page-controller.js",
 	"module": "./dist/lib/page-controller.js",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@page-agent/ui",
-	"version": "0.0.10",
+	"version": "0.0.20",
 	"type": "module",
 	"main": "./dist/lib/page-agent-ui.js",
 	"module": "./dist/lib/page-agent-ui.js",

packages/ui/src/checkDarkMode.ts

@@ -3,14 +3,14 @@
  * @returns {boolean} - True if a common dark mode class is found.
  */
 function hasDarkModeClass() {
-	const DFEAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']
+	const DEFAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']
 
 	const htmlElement = document.documentElement
-	const bodyElement = document.body
+	const bodyElement = document.body || document.documentElement // can be null in some cases
 
 	// Check class names on <html> and <body>
-	for (const className of DFEAULT_DARK_MODE_CLASSES) {
-		if (htmlElement.classList.contains(className) || bodyElement.classList.contains(className)) {
+	for (const className of DEFAULT_DARK_MODE_CLASSES) {
+		if (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {
 			return true
 		}
 	}
@@ -70,7 +70,7 @@ function isColorDark(colorString: string, threshold = 128) {
 function isBackgroundDark() {
 	// We check both <html> and <body> because some pages set the color on <html>
 	const htmlStyle = window.getComputedStyle(document.documentElement)
-	const bodyStyle = window.getComputedStyle(document.body)
+	const bodyStyle = window.getComputedStyle(document.body || document.documentElement)
 
 	// Get background colors
 	const htmlBgColor = htmlStyle.backgroundColor
@@ -93,18 +93,23 @@ function isBackgroundDark() {
  * @returns {boolean} - True if the page is likely dark.
  */
 export function isPageDark() {
-	// Strategy 1: Check for common dark mode classes
-	if (hasDarkModeClass()) {
-		return true
+	try {
+		// Strategy 1: Check for common dark mode classes
+		if (hasDarkModeClass()) {
+			return true
+		}
+
+		// Strategy 2: Analyze the computed background color
+		if (isBackgroundDark()) {
+			return true
+		}
+
+		// @TODO add more checks here, e.g., analyzing text color,
+		// or checking the background of major layout elements like <main> or #app.
+
+		return false
+	} catch (error) {
+		console.warn('Error determining if page is dark:', error)
+		return false
 	}
-
-	// Strategy 2: Analyze the computed background color
-	if (isBackgroundDark()) {
-		return true
-	}
-
-	// @TODO add more checks here, e.g., analyzing text color,
-	// or checking the background of major layout elements like <main> or #app.
-
-	return false
 }

packages/ui/src/i18n/index.ts

@@ -12,7 +12,7 @@ export class I18n {
 
 	constructor(language: SupportedLanguage = 'en-US') {
 		this.language = language in locales ? language : 'en-US'
-		this.translations = locales[language]
+		this.translations = locales[this.language]
 	}
 
 	// 类型安全的翻译方法

packages/website/AGENTS.md

@@ -0,0 +1,110 @@
+# Website Package - Instructions for Coding Assistants
+
+## Tech Stack
+
+- **React** with TypeScript
+- **Vite** for dev server and build
+- **Tailwind CSS** for styling
+- **shadcn/ui** (new-york style) for UI components
+- **Magic UI** for animations and effects
+- **wouter** with hash routing for static hosting
+- **lucide-react** for icons
+
+## Component Guidelines
+
+### Use shadcn/ui Components First
+
+**ALWAYS prefer shadcn/ui components over custom implementations.**
+
+Before creating any UI component, check if shadcn already provides it:
+
+```bash
+# IMPORTANT: Run from packages/website/, NOT from repo root
+cd packages/website
+
+# Add a new shadcn component
+npx shadcn@latest add <component-name>
+
+# Add a Magic UI component
+npx shadcn@latest add "@magicui/<component-name>"
+```
+
+Available shadcn components: https://ui.shadcn.com/docs/components
+Available Magic UI components: https://magicui.design/docs/components
+
+### Current UI Components
+
+Located in `src/components/ui/`:
+
+**From shadcn/ui:**
+
+- `alert`, `badge`, `button`, `separator`, `sonner`, `switch`, `tooltip`
+
+**From Magic UI:**
+
+- `animated-gradient-text`, `animated-shiny-text`, `aurora-text`
+- `hyper-text`, `magic-card`, `neon-gradient-card`, `particles`
+- `sparkles-text`, `text-animate`, `typing-animation`
+
+**Custom:**
+
+- `highlighter`, `kbd`, `spinner`
+
+### Styling Rules
+
+1. **Prefer Tailwind classes** over custom CSS
+2. Use CSS modules only for complex component-specific styles
+3. Support dark mode via `dark:` classes
+4. Use CSS variables from `src/index.css` for theme colors
+
+## Project Structure
+
+```
+src/
+├── pages/
+│   ├── Home.tsx         # Homepage
+│   └── docs/
+│       ├── Layout.tsx   # Documentation sidebar
+│       └── [section]/[topic]/page.tsx
+├── components/
+│   ├── ui/              # shadcn/ui + Magic UI components
+│   ├── Header.tsx       # Site header
+│   └── Footer.tsx       # Site footer
+├── i18n/                # Internationalization
+├── router.tsx           # Central routing
+└── main.tsx             # App entry
+```
+
+## Adding New Pages
+
+### Documentation Page
+
+1. Create `src/pages/docs/<section>/<slug>/page.tsx`
+2. Add route to `src/router.tsx` with `<Header /> + <DocsLayout>` wrapper
+3. Add navigation item to `pages/docs/Layout.tsx`
+
+## Routing
+
+Uses hash-based routing for static hosting:
+
+```tsx
+import { Router } from 'wouter'
+import { useHashLocation } from 'wouter/use-hash-location'
+
+;<Router hook={useHashLocation}>{/* routes */}</Router>
+```
+
+## Configuration Files
+
+| File              | Purpose                 |
+| ----------------- | ----------------------- |
+| `components.json` | shadcn/ui configuration |
+| `vite.config.js`  | Vite build settings     |
+| `tsconfig.json`   | TypeScript config       |
+
+## Commands
+
+```bash
+npm start        # Dev server (from root)
+npm run build:website    # Build website (from root)
+```

packages/website/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
+}

packages/website/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@page-agent/website",
 	"private": true,
-	"version": "0.0.10",
+	"version": "0.0.20",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build",
+		"build:website": "vite build",
 		"preview": "vite preview",
 		"typecheck": "tsc --noEmit"
 	},
@@ -18,8 +18,25 @@
 		"i18next-browser-languagedetector": "^8.2.0",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
-		"react-i18next": "^16.5.0",
+		"react-i18next": "^16.5.1",
 		"tailwindcss": "^4.1.14",
-		"wouter": "^3.8.1"
+		"tw-animate-css": "^1.4.0",
+		"wouter": "^3.9.0"
+	},
+	"dependencies": {
+		"@radix-ui/react-icons": "^1.3.2",
+		"@radix-ui/react-separator": "^1.1.8",
+		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tooltip": "^1.2.8",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.562.0",
+		"motion": "^12.24.0",
+		"next-themes": "^0.4.6",
+		"rough-notation": "^0.5.1",
+		"simple-icons": "^16.4.0",
+		"sonner": "^2.0.7",
+		"tailwind-merge": "^3.4.0"
 	}
 }

packages/website/src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { siGithub } from 'simple-icons'
 
 export default function Footer() {
 	const { t } = useTranslation('common')
@@ -19,8 +20,13 @@ export default function Footer() {
 							className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
 							aria-label={t('footer.github_label')}
 						>
-							<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-								<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+							<svg
+								role="img"
+								viewBox="0 0 24 24"
+								className="w-5 h-5 fill-current"
+								aria-hidden="true"
+							>
+								<path d={siGithub.path} />
 							</svg>
 						</a>
 					</div>

packages/website/src/components/Header.tsx

@@ -1,10 +1,12 @@
+import { BookOpen, Menu, X } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { siGithub } from 'simple-icons'
 import { Link } from 'wouter'
 
 import LanguageSwitcher from './LanguageSwitcher'
 import ThemeSwitcher from './ThemeSwitcher'
-import { BookIcon, CloseIcon, GithubIcon, MenuIcon } from './icons'
+import { HyperText } from './ui/hyper-text'
 
 export default function Header() {
 	const { t } = useTranslation('common')
@@ -34,9 +36,14 @@ export default function Header() {
 								<span className="text-base sm:text-xl font-bold text-gray-900 dark:text-white block leading-tight">
 									page-agent
 								</span>
-								<p className="hidden sm:block text-xs text-gray-600 dark:text-gray-300">
+								<HyperText
+									as="p"
+									className="hidden sm:block text-xs text-gray-600 dark:text-gray-300 py-0 font-normal overflow-visible"
+									duration={600}
+									animateOnHover={true}
+								>
 									{t('header.slogan')}
-								</p>
+								</HyperText>
 							</div>
 						</Link>
 
@@ -51,7 +58,7 @@ export default function Header() {
 								className="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 shrink-0"
 								aria-label={t('header.nav_docs')}
 							>
-								<BookIcon className="w-5 h-5" />
+								<BookOpen className="w-5 h-5" />
 							</Link>
 							<a
 								href="https://github.com/alibaba/page-agent"
@@ -60,7 +67,14 @@ export default function Header() {
 								className="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 shrink-0"
 								aria-label={t('header.nav_source')}
 							>
-								<GithubIcon className="w-5 h-5" />
+								<svg
+									role="img"
+									viewBox="0 0 24 24"
+									className="w-5 h-5 fill-current"
+									aria-hidden="true"
+								>
+									<path d={siGithub.path} />
+								</svg>
 							</a>
 						</nav>
 
@@ -74,7 +88,7 @@ export default function Header() {
 								href="/docs/introduction/overview"
 								className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
 							>
-								<BookIcon />
+								<BookOpen className="w-4 h-4" />
 								{t('header.nav_docs')}
 							</Link>
 							<a
@@ -84,7 +98,14 @@ export default function Header() {
 								className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
 								aria-label={t('header.nav_source')}
 							>
-								<GithubIcon />
+								<svg
+									role="img"
+									viewBox="0 0 24 24"
+									className="w-4 h-4 fill-current"
+									aria-hidden="true"
+								>
+									<path d={siGithub.path} />
+								</svg>
 								{t('header.nav_source')}
 							</a>
 							<ThemeSwitcher />
@@ -100,7 +121,7 @@ export default function Header() {
 							aria-controls="mobile-menu"
 							onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
 						>
-							{mobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
+							{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
 						</button>
 					</div>
 
@@ -116,7 +137,7 @@ export default function Header() {
 								className="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
 								onClick={() => setMobileMenuOpen(false)}
 							>
-								<BookIcon className="w-5 h-5" />
+								<BookOpen className="w-5 h-5" />
 								{t('header.nav_docs')}
 							</Link>
 							<a
@@ -126,7 +147,14 @@ export default function Header() {
 								className="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
 								aria-label={t('header.nav_source')}
 							>
-								<GithubIcon className="w-5 h-5" />
+								<svg
+									role="img"
+									viewBox="0 0 24 24"
+									className="w-5 h-5 fill-current"
+									aria-hidden="true"
+								>
+									<path d={siGithub.path} />
+								</svg>
 								{t('header.nav_source')}
 							</a>
 							<div className="flex items-center gap-3 px-3 py-2">

packages/website/src/components/icons.tsx

@@ -1,75 +0,0 @@
-// SVG图标组件集合，用于Header等地方复用
-
-interface IconProps {
-	className?: string
-	'aria-hidden'?: boolean
-}
-
-export function BookIcon({ className = 'w-4 h-4', ...props }: IconProps) {
-	return (
-		<svg
-			className={className}
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-			{...props}
-		>
-			<path
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth={2}
-				d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-			/>
-		</svg>
-	)
-}
-
-export function GithubIcon({ className = 'w-4 h-4', ...props }: IconProps) {
-	return (
-		<svg
-			className={className}
-			fill="currentColor"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-			{...props}
-		>
-			<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-		</svg>
-	)
-}
-
-export function MenuIcon({ className = 'w-6 h-6', ...props }: IconProps) {
-	return (
-		<svg
-			className={className}
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-			{...props}
-		>
-			<path
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth={2}
-				d="M4 6h16M4 12h16M4 18h16"
-			/>
-		</svg>
-	)
-}
-
-export function CloseIcon({ className = 'w-6 h-6', ...props }: IconProps) {
-	return (
-		<svg
-			className={className}
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-			{...props}
-		>
-			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-		</svg>
-	)
-}

packages/website/src/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+	'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive:
+					'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+)
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+			{...props}
+		/>
+	)
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Alert, AlertTitle, AlertDescription }

packages/website/src/components/ui/animated-gradient-text.tsx

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<'div'> {
+	speed?: number
+	colorFrom?: string
+	colorTo?: string
+}
+
+export function AnimatedGradientText({
+	children,
+	className,
+	speed = 1,
+	colorFrom = '#ffaa40',
+	colorTo = '#9c40ff',
+	...props
+}: AnimatedGradientTextProps) {
+	return (
+		<span
+			style={
+				{
+					'--bg-size': `${speed * 300}%`,
+					'--color-from': colorFrom,
+					'--color-to': colorTo,
+				} as React.CSSProperties
+			}
+			className={cn(
+				`animate-gradient inline bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
+				className
+			)}
+			{...props}
+		>
+			{children}
+		</span>
+	)
+}

packages/website/src/components/ui/animated-shiny-text.tsx

@@ -0,0 +1,38 @@
+import { CSSProperties, ComponentPropsWithoutRef, FC } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<'span'> {
+	shimmerWidth?: number
+}
+
+export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
+	children,
+	className,
+	shimmerWidth = 100,
+	...props
+}) => {
+	return (
+		<span
+			style={
+				{
+					'--shiny-width': `${shimmerWidth}px`,
+				} as CSSProperties
+			}
+			className={cn(
+				'mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70',
+
+				// Shine effect
+				'animate-shiny-text [background-size:var(--shiny-width)_100%] bg-clip-text [background-position:0_0] bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
+
+				// Shine gradient
+				'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80',
+
+				className
+			)}
+			{...props}
+		>
+			{children}
+		</span>
+	)
+}

packages/website/src/components/ui/aurora-text.tsx

@@ -0,0 +1,39 @@
+import React, { memo } from 'react'
+
+interface AuroraTextProps {
+	children: React.ReactNode
+	className?: string
+	colors?: string[]
+	speed?: number
+}
+
+export const AuroraText = memo(
+	({
+		children,
+		className = '',
+		colors = ['#FF0080', '#7928CA', '#0070F3', '#38bdf8'],
+		speed = 1,
+	}: AuroraTextProps) => {
+		const gradientStyle = {
+			backgroundImage: `linear-gradient(135deg, ${colors.join(', ')}, ${colors[0]})`,
+			WebkitBackgroundClip: 'text',
+			WebkitTextFillColor: 'transparent',
+			animationDuration: `${10 / speed}s`,
+		}
+
+		return (
+			<span className={`relative inline-block ${className}`}>
+				<span className="sr-only">{children}</span>
+				<span
+					className="animate-aurora relative bg-[length:200%_auto] bg-clip-text text-transparent"
+					style={gradientStyle}
+					aria-hidden="true"
+				>
+					{children}
+				</span>
+			</span>
+		)
+	}
+)
+
+AuroraText.displayName = 'AuroraText'

packages/website/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+	'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary:
+					'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+)
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : 'span'
+
+	return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

packages/website/src/components/ui/bento-grid.tsx

@@ -0,0 +1,91 @@
+import { ArrowRightIcon } from '@radix-ui/react-icons'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface BentoGridProps extends ComponentPropsWithoutRef<'div'> {
+	children: ReactNode
+	className?: string
+}
+
+interface BentoCardProps extends ComponentPropsWithoutRef<'div'> {
+	name: string
+	className: string
+	background: ReactNode
+	Icon: React.ElementType
+	description: string
+	href: string
+	cta: string
+}
+
+const BentoGrid = ({ children, className, ...props }: BentoGridProps) => {
+	return (
+		<div className={cn('grid w-full auto-rows-[22rem] grid-cols-3 gap-4', className)} {...props}>
+			{children}
+		</div>
+	)
+}
+
+const BentoCard = ({
+	name,
+	className,
+	background,
+	Icon,
+	description,
+	href,
+	cta,
+	...props
+}: BentoCardProps) => (
+	<div
+		key={name}
+		className={cn(
+			'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',
+			// light styles
+			'bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
+			// dark styles
+			'dark:bg-background transform-gpu dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]',
+			className
+		)}
+		{...props}
+	>
+		<div>{background}</div>
+		<div className="p-4">
+			<div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 transition-all duration-300 lg:group-hover:-translate-y-10">
+				<Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75" />
+				<h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">{name}</h3>
+				<p className="max-w-lg text-neutral-400">{description}</p>
+			</div>
+
+			<div
+				className={cn(
+					'pointer-events-none flex w-full translate-y-0 transform-gpu flex-row items-center transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:hidden'
+				)}
+			>
+				<Button variant="link" asChild size="sm" className="pointer-events-auto p-0">
+					<a href={href}>
+						{cta}
+						<ArrowRightIcon className="ms-2 h-4 w-4 rtl:rotate-180" />
+					</a>
+				</Button>
+			</div>
+		</div>
+
+		<div
+			className={cn(
+				'pointer-events-none absolute bottom-0 hidden w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:flex'
+			)}
+		>
+			<Button variant="link" asChild size="sm" className="pointer-events-auto p-0">
+				<a href={href}>
+					{cta}
+					<ArrowRightIcon className="ms-2 h-4 w-4 rtl:rotate-180" />
+				</a>
+			</Button>
+		</div>
+
+		<div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" />
+	</div>
+)
+
+export { BentoCard, BentoGrid }

packages/website/src/components/ui/blur-fade.tsx

@@ -0,0 +1,79 @@
+import {
+	AnimatePresence,
+	MotionProps,
+	UseInViewOptions,
+	Variants,
+	motion,
+	useInView,
+} from 'motion/react'
+import { useRef } from 'react'
+
+type MarginType = UseInViewOptions['margin']
+
+interface BlurFadeProps extends MotionProps {
+	children: React.ReactNode
+	className?: string
+	variant?: {
+		hidden: { y: number }
+		visible: { y: number }
+	}
+	duration?: number
+	delay?: number
+	offset?: number
+	direction?: 'up' | 'down' | 'left' | 'right'
+	inView?: boolean
+	inViewMargin?: MarginType
+	blur?: string
+}
+
+export function BlurFade({
+	children,
+	className,
+	variant,
+	duration = 0.4,
+	delay = 0,
+	offset = 6,
+	direction = 'down',
+	inView = false,
+	inViewMargin = '-50px',
+	blur = '6px',
+	...props
+}: BlurFadeProps) {
+	const ref = useRef(null)
+	const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
+	const isInView = !inView || inViewResult
+	const defaultVariants: Variants = {
+		hidden: {
+			[direction === 'left' || direction === 'right' ? 'x' : 'y']:
+				direction === 'right' || direction === 'down' ? -offset : offset,
+			opacity: 0,
+			filter: `blur(${blur})`,
+		},
+		visible: {
+			[direction === 'left' || direction === 'right' ? 'x' : 'y']: 0,
+			opacity: 1,
+			filter: `blur(0px)`,
+		},
+	}
+	const combinedVariants = variant || defaultVariants
+	return (
+		<AnimatePresence>
+			<motion.div
+				ref={ref}
+				initial="hidden"
+				animate={isInView ? 'visible' : 'hidden'}
+				exit="hidden"
+				variants={combinedVariants}
+				transition={{
+					delay: 0.04 + delay,
+					duration,
+					ease: 'easeOut',
+				}}
+				className={className}
+				{...props}
+			>
+				{children}
+			</motion.div>
+		</AnimatePresence>
+	)
+}

packages/website/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9',
+				'icon-sm': 'size-8',
+				'icon-lg': 'size-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+)
+
+function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean
+	}) {
+	const Comp = asChild ? Slot : 'button'
+
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
+
+export { Button, buttonVariants }

packages/website/src/components/ui/highlighter.tsx

@@ -0,0 +1,92 @@
+import { useInView } from 'motion/react'
+import { useEffect, useRef } from 'react'
+import type React from 'react'
+import { annotate } from 'rough-notation'
+import { type RoughAnnotation } from 'rough-notation/lib/model'
+
+type AnnotationAction =
+	| 'highlight'
+	| 'underline'
+	| 'box'
+	| 'circle'
+	| 'strike-through'
+	| 'crossed-off'
+	| 'bracket'
+
+interface HighlighterProps {
+	children: React.ReactNode
+	action?: AnnotationAction
+	color?: string
+	strokeWidth?: number
+	animationDuration?: number
+	iterations?: number
+	padding?: number
+	multiline?: boolean
+	isView?: boolean
+}
+
+export function Highlighter({
+	children,
+	action = 'highlight',
+	color = '#ffd1dc',
+	strokeWidth = 1.5,
+	animationDuration = 600,
+	iterations = 2,
+	padding = 2,
+	multiline = true,
+	isView = false,
+}: HighlighterProps) {
+	const elementRef = useRef<HTMLSpanElement>(null)
+	const annotationRef = useRef<RoughAnnotation | null>(null)
+
+	const isInView = useInView(elementRef, {
+		once: true,
+		margin: '-10%',
+	})
+
+	// If isView is false, always show. If isView is true, wait for inView
+	const shouldShow = !isView || isInView
+
+	useEffect(() => {
+		if (!shouldShow) return
+
+		const element = elementRef.current
+		if (!element) return
+
+		const annotationConfig = {
+			type: action,
+			color,
+			strokeWidth,
+			animationDuration,
+			iterations,
+			padding,
+			multiline,
+		}
+
+		const annotation = annotate(element, annotationConfig)
+
+		annotationRef.current = annotation
+		annotationRef.current.show()
+
+		const resizeObserver = new ResizeObserver(() => {
+			annotation.hide()
+			annotation.show()
+		})
+
+		resizeObserver.observe(element)
+		resizeObserver.observe(document.body)
+
+		return () => {
+			if (element) {
+				annotate(element, { type: action }).remove()
+				resizeObserver.disconnect()
+			}
+		}
+	}, [shouldShow, action, color, strokeWidth, animationDuration, iterations, padding, multiline])
+
+	return (
+		<span ref={elementRef} className="relative inline-block bg-transparent">
+			{children}
+		</span>
+	)
+}

packages/website/src/components/ui/hyper-text.tsx

@@ -0,0 +1,140 @@
+import { AnimatePresence, MotionProps, motion } from 'motion/react'
+import { useEffect, useRef, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+type CharacterSet = string[] | readonly string[]
+
+interface HyperTextProps extends MotionProps {
+	/** The text content to be animated */
+	children: string
+	/** Optional className for styling */
+	className?: string
+	/** Duration of the animation in milliseconds */
+	duration?: number
+	/** Delay before animation starts in milliseconds */
+	delay?: number
+	/** Component to render as - defaults to div */
+	as?: React.ElementType
+	/** Whether to start animation when element comes into view */
+	startOnView?: boolean
+	/** Whether to trigger animation on hover */
+	animateOnHover?: boolean
+	/** Custom character set for scramble effect. Defaults to uppercase alphabet */
+	characterSet?: CharacterSet
+}
+
+const DEFAULT_CHARACTER_SET = Object.freeze(
+	'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+) as readonly string[]
+
+const getRandomInt = (max: number): number => Math.floor(Math.random() * max)
+
+export function HyperText({
+	children,
+	className,
+	duration = 800,
+	delay = 0,
+	as: Component = 'div',
+	startOnView = false,
+	animateOnHover = true,
+	characterSet = DEFAULT_CHARACTER_SET,
+	...props
+}: HyperTextProps) {
+	const MotionComponent = motion.create(Component, {
+		forwardMotionProps: true,
+	})
+
+	const [displayText, setDisplayText] = useState<string[]>(() => children.split(''))
+	const [isAnimating, setIsAnimating] = useState(false)
+	const iterationCount = useRef(0)
+	const elementRef = useRef<HTMLElement>(null)
+
+	const handleAnimationTrigger = () => {
+		if (animateOnHover && !isAnimating) {
+			iterationCount.current = 0
+			setIsAnimating(true)
+		}
+	}
+
+	// Handle animation start based on view or delay
+	useEffect(() => {
+		if (!startOnView) {
+			const startTimeout = setTimeout(() => {
+				setIsAnimating(true)
+			}, delay)
+			return () => clearTimeout(startTimeout)
+		}
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry.isIntersecting) {
+					setTimeout(() => {
+						setIsAnimating(true)
+					}, delay)
+					observer.disconnect()
+				}
+			},
+			{ threshold: 0.1, rootMargin: '-30% 0px -30% 0px' }
+		)
+
+		if (elementRef.current) {
+			observer.observe(elementRef.current)
+		}
+
+		return () => observer.disconnect()
+	}, [delay, startOnView])
+
+	// Handle scramble animation
+	useEffect(() => {
+		if (!isAnimating) return
+
+		const maxIterations = children.length
+		const startTime = performance.now()
+		let animationFrameId: number
+
+		const animate = (currentTime: number) => {
+			const elapsed = currentTime - startTime
+			const progress = Math.min(elapsed / duration, 1)
+
+			iterationCount.current = progress * maxIterations
+
+			setDisplayText((currentText) =>
+				currentText.map((letter, index) =>
+					letter === ' '
+						? letter
+						: index <= iterationCount.current
+							? children[index]
+							: characterSet[getRandomInt(characterSet.length)]
+				)
+			)
+
+			if (progress < 1) {
+				animationFrameId = requestAnimationFrame(animate)
+			} else {
+				setIsAnimating(false)
+			}
+		}
+
+		animationFrameId = requestAnimationFrame(animate)
+
+		return () => cancelAnimationFrame(animationFrameId)
+	}, [children, duration, isAnimating, characterSet])
+
+	return (
+		<MotionComponent
+			ref={elementRef}
+			className={cn('overflow-hidden py-2 text-4xl font-bold', className)}
+			onMouseEnter={handleAnimationTrigger}
+			{...props}
+		>
+			<AnimatePresence>
+				{displayText.map((letter, index) => (
+					<motion.span key={index} className={cn('font-mono', letter === ' ' ? 'w-3' : '')}>
+						{letter.toUpperCase()}
+					</motion.span>
+				))}
+			</AnimatePresence>
+		</MotionComponent>
+	)
+}

packages/website/src/components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+	return (
+		<kbd
+			data-slot="kbd"
+			className={cn(
+				'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+				"[&_svg:not([class*='size-'])]:size-3",
+				'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<kbd
+			data-slot="kbd-group"
+			className={cn('inline-flex items-center gap-1', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Kbd, KbdGroup }

packages/website/src/components/ui/magic-card.tsx

@@ -0,0 +1,101 @@
+import { motion, useMotionTemplate, useMotionValue } from 'motion/react'
+import React, { useCallback, useEffect } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface MagicCardProps {
+	children?: React.ReactNode
+	className?: string
+	gradientSize?: number
+	gradientColor?: string
+	gradientOpacity?: number
+	gradientFrom?: string
+	gradientTo?: string
+}
+
+export function MagicCard({
+	children,
+	className,
+	gradientSize = 200,
+	gradientColor = '#262626',
+	gradientOpacity = 0.8,
+	gradientFrom = '#9E7AFF',
+	gradientTo = '#FE8BBB',
+}: MagicCardProps) {
+	const mouseX = useMotionValue(-gradientSize)
+	const mouseY = useMotionValue(-gradientSize)
+	const reset = useCallback(() => {
+		mouseX.set(-gradientSize)
+		mouseY.set(-gradientSize)
+	}, [gradientSize, mouseX, mouseY])
+
+	const handlePointerMove = useCallback(
+		(e: React.PointerEvent<HTMLDivElement>) => {
+			const rect = e.currentTarget.getBoundingClientRect()
+			mouseX.set(e.clientX - rect.left)
+			mouseY.set(e.clientY - rect.top)
+		},
+		[mouseX, mouseY]
+	)
+
+	useEffect(() => {
+		reset()
+	}, [reset])
+
+	useEffect(() => {
+		const handleGlobalPointerOut = (e: PointerEvent) => {
+			if (!e.relatedTarget) {
+				reset()
+			}
+		}
+
+		const handleVisibility = () => {
+			if (document.visibilityState !== 'visible') {
+				reset()
+			}
+		}
+
+		window.addEventListener('pointerout', handleGlobalPointerOut)
+		window.addEventListener('blur', reset)
+		document.addEventListener('visibilitychange', handleVisibility)
+
+		return () => {
+			window.removeEventListener('pointerout', handleGlobalPointerOut)
+			window.removeEventListener('blur', reset)
+			document.removeEventListener('visibilitychange', handleVisibility)
+		}
+	}, [reset])
+
+	return (
+		<div
+			className={cn('group relative rounded-[inherit]', className)}
+			onPointerMove={handlePointerMove}
+			onPointerLeave={reset}
+			onPointerEnter={reset}
+		>
+			<motion.div
+				className="bg-border pointer-events-none absolute inset-0 rounded-[inherit] duration-300 group-hover:opacity-100"
+				style={{
+					background: useMotionTemplate`
+          radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
+          ${gradientFrom}, 
+          ${gradientTo}, 
+          var(--border) 100%
+          )
+          `,
+				}}
+			/>
+			<div className="bg-background absolute inset-px rounded-[inherit]" />
+			<motion.div
+				className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+				style={{
+					background: useMotionTemplate`
+            radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
+          `,
+					opacity: gradientOpacity,
+				}}
+			/>
+			<div className="relative">{children}</div>
+		</div>
+	)
+}

packages/website/src/components/ui/neon-gradient-card.tsx

@@ -0,0 +1,136 @@
+import { CSSProperties, ReactElement, ReactNode, useEffect, useRef, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface NeonColorsProps {
+	firstColor: string
+	secondColor: string
+}
+
+interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * @default <div />
+	 * @type ReactElement
+	 * @description
+	 * The component to be rendered as the card
+	 * */
+	as?: ReactElement
+	/**
+	 * @default ""
+	 * @type string
+	 * @description
+	 * The className of the card
+	 */
+	className?: string
+
+	/**
+	 * @default ""
+	 * @type ReactNode
+	 * @description
+	 * The children of the card
+	 * */
+	children?: ReactNode
+
+	/**
+	 * @default 5
+	 * @type number
+	 * @description
+	 * The size of the border in pixels
+	 * */
+	borderSize?: number
+
+	/**
+	 * @default 20
+	 * @type number
+	 * @description
+	 * The size of the radius in pixels
+	 * */
+	borderRadius?: number
+
+	/**
+	 * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
+	 * @type string
+	 * @description
+	 * The colors of the neon gradient
+	 * */
+	neonColors?: NeonColorsProps
+}
+
+export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
+	className,
+	children,
+	borderSize = 2,
+	borderRadius = 20,
+	neonColors = {
+		firstColor: '#ff00aa',
+		secondColor: '#00FFF1',
+	},
+	...props
+}) => {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+
+	useEffect(() => {
+		const updateDimensions = () => {
+			if (containerRef.current) {
+				const { offsetWidth, offsetHeight } = containerRef.current
+				setDimensions({ width: offsetWidth, height: offsetHeight })
+			}
+		}
+
+		updateDimensions()
+		window.addEventListener('resize', updateDimensions)
+
+		return () => {
+			window.removeEventListener('resize', updateDimensions)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (containerRef.current) {
+			const { offsetWidth, offsetHeight } = containerRef.current
+			setDimensions({ width: offsetWidth, height: offsetHeight })
+		}
+	}, [children])
+
+	return (
+		<div
+			ref={containerRef}
+			style={
+				{
+					'--border-size': `${borderSize}px`,
+					'--border-radius': `${borderRadius}px`,
+					'--neon-first-color': neonColors.firstColor,
+					'--neon-second-color': neonColors.secondColor,
+					'--card-width': `${dimensions.width}px`,
+					'--card-height': `${dimensions.height}px`,
+					'--card-content-radius': `${borderRadius - borderSize}px`,
+					'--pseudo-element-background-image': `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
+					'--pseudo-element-width': `${dimensions.width + borderSize * 2}px`,
+					'--pseudo-element-height': `${dimensions.height + borderSize * 2}px`,
+					'--after-blur': `${dimensions.width / 6}px`,
+				} as CSSProperties
+			}
+			className={cn('relative z-10 size-full rounded-[var(--border-radius)]', className)}
+			{...props}
+		>
+			<div
+				className={cn(
+					'relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100',
+					'before:absolute before:-top-[var(--border-size)] before:-left-[var(--border-size)] before:-z-10 before:block',
+					"before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']",
+					'before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]',
+					'before:animate-background-position-spin',
+					'after:absolute after:-top-[var(--border-size)] after:-left-[var(--border-size)] after:-z-10 after:block',
+					"after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']",
+					'after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80',
+					'after:animate-background-position-spin',
+					'dark:bg-neutral-900',
+					'break-words'
+				)}
+			>
+				{children}
+			</div>
+		</div>
+	)
+}

packages/website/src/components/ui/particles.tsx

@@ -0,0 +1,297 @@
+import React, { ComponentPropsWithoutRef, useEffect, useRef, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface MousePosition {
+	x: number
+	y: number
+}
+
+function MousePosition(): MousePosition {
+	const [mousePosition, setMousePosition] = useState<MousePosition>({
+		x: 0,
+		y: 0,
+	})
+
+	useEffect(() => {
+		const handleMouseMove = (event: MouseEvent) => {
+			setMousePosition({ x: event.clientX, y: event.clientY })
+		}
+
+		window.addEventListener('mousemove', handleMouseMove)
+
+		return () => {
+			window.removeEventListener('mousemove', handleMouseMove)
+		}
+	}, [])
+
+	return mousePosition
+}
+
+interface ParticlesProps extends ComponentPropsWithoutRef<'div'> {
+	className?: string
+	quantity?: number
+	staticity?: number
+	ease?: number
+	size?: number
+	refresh?: boolean
+	color?: string
+	vx?: number
+	vy?: number
+}
+
+function hexToRgb(hex: string): number[] {
+	hex = hex.replace('#', '')
+
+	if (hex.length === 3) {
+		hex = hex
+			.split('')
+			.map((char) => char + char)
+			.join('')
+	}
+
+	const hexInt = parseInt(hex, 16)
+	const red = (hexInt >> 16) & 255
+	const green = (hexInt >> 8) & 255
+	const blue = hexInt & 255
+	return [red, green, blue]
+}
+
+type Circle = {
+	x: number
+	y: number
+	translateX: number
+	translateY: number
+	size: number
+	alpha: number
+	targetAlpha: number
+	dx: number
+	dy: number
+	magnetism: number
+}
+
+export const Particles: React.FC<ParticlesProps> = ({
+	className = '',
+	quantity = 100,
+	staticity = 50,
+	ease = 50,
+	size = 0.4,
+	refresh = false,
+	color = '#ffffff',
+	vx = 0,
+	vy = 0,
+	...props
+}) => {
+	const canvasRef = useRef<HTMLCanvasElement>(null)
+	const canvasContainerRef = useRef<HTMLDivElement>(null)
+	const context = useRef<CanvasRenderingContext2D | null>(null)
+	const circles = useRef<Circle[]>([])
+	const mousePosition = MousePosition()
+	const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+	const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
+	const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1
+	const rafID = useRef<number | null>(null)
+	const resizeTimeout = useRef<NodeJS.Timeout | null>(null)
+
+	useEffect(() => {
+		if (canvasRef.current) {
+			context.current = canvasRef.current.getContext('2d')
+		}
+		initCanvas()
+		animate()
+
+		const handleResize = () => {
+			if (resizeTimeout.current) {
+				clearTimeout(resizeTimeout.current)
+			}
+			resizeTimeout.current = setTimeout(() => {
+				initCanvas()
+			}, 200)
+		}
+
+		window.addEventListener('resize', handleResize)
+
+		return () => {
+			if (rafID.current != null) {
+				window.cancelAnimationFrame(rafID.current)
+			}
+			if (resizeTimeout.current) {
+				clearTimeout(resizeTimeout.current)
+			}
+			window.removeEventListener('resize', handleResize)
+		}
+	}, [color])
+
+	useEffect(() => {
+		onMouseMove()
+	}, [mousePosition.x, mousePosition.y])
+
+	useEffect(() => {
+		initCanvas()
+	}, [refresh])
+
+	const initCanvas = () => {
+		resizeCanvas()
+		drawParticles()
+	}
+
+	const onMouseMove = () => {
+		if (canvasRef.current) {
+			const rect = canvasRef.current.getBoundingClientRect()
+			const { w, h } = canvasSize.current
+			const x = mousePosition.x - rect.left - w / 2
+			const y = mousePosition.y - rect.top - h / 2
+			const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2
+			if (inside) {
+				mouse.current.x = x
+				mouse.current.y = y
+			}
+		}
+	}
+
+	const resizeCanvas = () => {
+		if (canvasContainerRef.current && canvasRef.current && context.current) {
+			canvasSize.current.w = canvasContainerRef.current.offsetWidth
+			canvasSize.current.h = canvasContainerRef.current.offsetHeight
+
+			canvasRef.current.width = canvasSize.current.w * dpr
+			canvasRef.current.height = canvasSize.current.h * dpr
+			canvasRef.current.style.width = `${canvasSize.current.w}px`
+			canvasRef.current.style.height = `${canvasSize.current.h}px`
+			context.current.scale(dpr, dpr)
+
+			// Clear existing particles and create new ones with exact quantity
+			circles.current = []
+			for (let i = 0; i < quantity; i++) {
+				const circle = circleParams()
+				drawCircle(circle)
+			}
+		}
+	}
+
+	const circleParams = (): Circle => {
+		const x = Math.floor(Math.random() * canvasSize.current.w)
+		const y = Math.floor(Math.random() * canvasSize.current.h)
+		const translateX = 0
+		const translateY = 0
+		const pSize = Math.floor(Math.random() * 2) + size
+		const alpha = 0
+		const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1))
+		const dx = (Math.random() - 0.5) * 0.1
+		const dy = (Math.random() - 0.5) * 0.1
+		const magnetism = 0.1 + Math.random() * 4
+		return {
+			x,
+			y,
+			translateX,
+			translateY,
+			size: pSize,
+			alpha,
+			targetAlpha,
+			dx,
+			dy,
+			magnetism,
+		}
+	}
+
+	const rgb = hexToRgb(color)
+
+	const drawCircle = (circle: Circle, update = false) => {
+		if (context.current) {
+			const { x, y, translateX, translateY, size, alpha } = circle
+			context.current.translate(translateX, translateY)
+			context.current.beginPath()
+			context.current.arc(x, y, size, 0, 2 * Math.PI)
+			context.current.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`
+			context.current.fill()
+			context.current.setTransform(dpr, 0, 0, dpr, 0, 0)
+
+			if (!update) {
+				circles.current.push(circle)
+			}
+		}
+	}
+
+	const clearContext = () => {
+		if (context.current) {
+			context.current.clearRect(0, 0, canvasSize.current.w, canvasSize.current.h)
+		}
+	}
+
+	const drawParticles = () => {
+		clearContext()
+		const particleCount = quantity
+		for (let i = 0; i < particleCount; i++) {
+			const circle = circleParams()
+			drawCircle(circle)
+		}
+	}
+
+	const remapValue = (
+		value: number,
+		start1: number,
+		end1: number,
+		start2: number,
+		end2: number
+	): number => {
+		const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
+		return remapped > 0 ? remapped : 0
+	}
+
+	const animate = () => {
+		clearContext()
+		circles.current.forEach((circle: Circle, i: number) => {
+			// Handle the alpha value
+			const edge = [
+				circle.x + circle.translateX - circle.size, // distance from left edge
+				canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
+				circle.y + circle.translateY - circle.size, // distance from top edge
+				canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
+			]
+			const closestEdge = edge.reduce((a, b) => Math.min(a, b))
+			const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2))
+			if (remapClosestEdge > 1) {
+				circle.alpha += 0.02
+				if (circle.alpha > circle.targetAlpha) {
+					circle.alpha = circle.targetAlpha
+				}
+			} else {
+				circle.alpha = circle.targetAlpha * remapClosestEdge
+			}
+			circle.x += circle.dx + vx
+			circle.y += circle.dy + vy
+			circle.translateX +=
+				(mouse.current.x / (staticity / circle.magnetism) - circle.translateX) / ease
+			circle.translateY +=
+				(mouse.current.y / (staticity / circle.magnetism) - circle.translateY) / ease
+
+			drawCircle(circle, true)
+
+			// circle gets out of the canvas
+			if (
+				circle.x < -circle.size ||
+				circle.x > canvasSize.current.w + circle.size ||
+				circle.y < -circle.size ||
+				circle.y > canvasSize.current.h + circle.size
+			) {
+				// remove the circle from the array
+				circles.current.splice(i, 1)
+				// create a new circle
+				const newCircle = circleParams()
+				drawCircle(newCircle)
+			}
+		})
+		rafID.current = window.requestAnimationFrame(animate)
+	}
+
+	return (
+		<div
+			className={cn('pointer-events-none', className)}
+			ref={canvasContainerRef}
+			aria-hidden="true"
+			{...props}
+		>
+			<canvas ref={canvasRef} className="size-full" />
+		</div>
+	)
+}

packages/website/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Separator }

packages/website/src/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon,
+} from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = 'system' } = useTheme()
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps['theme']}
+			className="toaster group"
+			icons={{
+				success: <CircleCheckIcon className="size-4" />,
+				info: <InfoIcon className="size-4" />,
+				warning: <TriangleAlertIcon className="size-4" />,
+				error: <OctagonXIcon className="size-4" />,
+				loading: <Loader2Icon className="size-4 animate-spin" />,
+			}}
+			style={
+				{
+					'--normal-bg': 'var(--popover)',
+					'--normal-text': 'var(--popover-foreground)',
+					'--normal-border': 'var(--border)',
+					'--border-radius': 'var(--radius)',
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	)
+}
+
+export { Toaster }

packages/website/src/components/ui/sparkles-text.tsx

@@ -0,0 +1,150 @@
+import { motion } from 'motion/react'
+import { CSSProperties, ReactElement, useEffect, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface Sparkle {
+	id: string
+	x: string
+	y: string
+	color: string
+	delay: number
+	scale: number
+	lifespan: number
+}
+
+const Sparkle: React.FC<Sparkle> = ({ id, x, y, color, delay, scale }) => {
+	return (
+		<motion.svg
+			key={id}
+			className="pointer-events-none absolute z-20"
+			initial={{ opacity: 0, left: x, top: y }}
+			animate={{
+				opacity: [0, 1, 0],
+				scale: [0, scale, 0],
+				rotate: [75, 120, 150],
+			}}
+			transition={{ duration: 0.8, repeat: Infinity, delay }}
+			width="21"
+			height="21"
+			viewBox="0 0 21 21"
+		>
+			<path
+				d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
+				fill={color}
+			/>
+		</motion.svg>
+	)
+}
+
+interface SparklesTextProps {
+	/**
+	 * @default <div />
+	 * @type ReactElement
+	 * @description
+	 * The component to be rendered as the text
+	 * */
+	as?: ReactElement
+
+	/**
+	 * @default ""
+	 * @type string
+	 * @description
+	 * The className of the text
+	 */
+	className?: string
+
+	/**
+	 * @required
+	 * @type ReactNode
+	 * @description
+	 * The content to be displayed
+	 * */
+	children: React.ReactNode
+
+	/**
+	 * @default 10
+	 * @type number
+	 * @description
+	 * The count of sparkles
+	 * */
+	sparklesCount?: number
+
+	/**
+	 * @default "{first: '#9E7AFF', second: '#FE8BBB'}"
+	 * @type string
+	 * @description
+	 * The colors of the sparkles
+	 * */
+	colors?: {
+		first: string
+		second: string
+	}
+}
+
+export const SparklesText: React.FC<SparklesTextProps> = ({
+	children,
+	colors = { first: '#9E7AFF', second: '#FE8BBB' },
+	className,
+	sparklesCount = 10,
+	...props
+}) => {
+	const [sparkles, setSparkles] = useState<Sparkle[]>([])
+
+	useEffect(() => {
+		const generateStar = (): Sparkle => {
+			const starX = `${Math.random() * 100}%`
+			const starY = `${Math.random() * 100}%`
+			const color = Math.random() > 0.5 ? colors.first : colors.second
+			const delay = Math.random() * 2
+			const scale = Math.random() * 1 + 0.3
+			const lifespan = Math.random() * 10 + 5
+			const id = `${starX}-${starY}-${Date.now()}`
+			return { id, x: starX, y: starY, color, delay, scale, lifespan }
+		}
+
+		const initializeStars = () => {
+			const newSparkles = Array.from({ length: sparklesCount }, generateStar)
+			setSparkles(newSparkles)
+		}
+
+		const updateStars = () => {
+			setSparkles((currentSparkles) =>
+				currentSparkles.map((star) => {
+					if (star.lifespan <= 0) {
+						return generateStar()
+					} else {
+						return { ...star, lifespan: star.lifespan - 0.1 }
+					}
+				})
+			)
+		}
+
+		initializeStars()
+		const interval = setInterval(updateStars, 100)
+
+		return () => clearInterval(interval)
+	}, [colors.first, colors.second, sparklesCount])
+
+	return (
+		<div
+			className={cn('text-6xl font-bold', className)}
+			{...props}
+			style={
+				{
+					'--sparkles-first-color': `${colors.first}`,
+					'--sparkles-second-color': `${colors.second}`,
+				} as CSSProperties
+			}
+		>
+			<span className="relative inline-block">
+				{sparkles.map((sparkle) => (
+					<Sparkle key={sparkle.id} {...sparkle} />
+				))}
+				<strong className="bg-linear-to-r from-[var(--sparkles-first-color)] to-[var(--sparkles-second-color)] bg-clip-text text-transparent">
+					{children}
+				</strong>
+			</span>
+		</div>
+	)
+}

packages/website/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+	return (
+		<Loader2Icon
+			role="status"
+			aria-label="Loading"
+			className={cn('size-4 animate-spin', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Spinner }

packages/website/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	)
+}
+
+export { Switch }

packages/website/src/components/ui/text-animate.tsx

@@ -0,0 +1,417 @@
+import { AnimatePresence, MotionProps, Variants, motion } from 'motion/react'
+import { ElementType, memo } from 'react'
+
+import { cn } from '@/lib/utils'
+
+type AnimationType = 'text' | 'word' | 'character' | 'line'
+type AnimationVariant =
+	| 'fadeIn'
+	| 'blurIn'
+	| 'blurInUp'
+	| 'blurInDown'
+	| 'slideUp'
+	| 'slideDown'
+	| 'slideLeft'
+	| 'slideRight'
+	| 'scaleUp'
+	| 'scaleDown'
+
+interface TextAnimateProps extends MotionProps {
+	/**
+	 * The text content to animate
+	 */
+	children: string
+	/**
+	 * The class name to be applied to the component
+	 */
+	className?: string
+	/**
+	 * The class name to be applied to each segment
+	 */
+	segmentClassName?: string
+	/**
+	 * The delay before the animation starts
+	 */
+	delay?: number
+	/**
+	 * The duration of the animation
+	 */
+	duration?: number
+	/**
+	 * Custom motion variants for the animation
+	 */
+	variants?: Variants
+	/**
+	 * The element type to render
+	 */
+	as?: ElementType
+	/**
+	 * How to split the text ("text", "word", "character")
+	 */
+	by?: AnimationType
+	/**
+	 * Whether to start animation when component enters viewport
+	 */
+	startOnView?: boolean
+	/**
+	 * Whether to animate only once
+	 */
+	once?: boolean
+	/**
+	 * The animation preset to use
+	 */
+	animation?: AnimationVariant
+	/**
+	 * Whether to enable accessibility features (default: true)
+	 */
+	accessible?: boolean
+}
+
+const staggerTimings: Record<AnimationType, number> = {
+	text: 0.06,
+	word: 0.05,
+	character: 0.03,
+	line: 0.06,
+}
+
+const defaultContainerVariants = {
+	hidden: { opacity: 1 },
+	show: {
+		opacity: 1,
+		transition: {
+			delayChildren: 0,
+			staggerChildren: 0.05,
+		},
+	},
+	exit: {
+		opacity: 0,
+		transition: {
+			staggerChildren: 0.05,
+			staggerDirection: -1,
+		},
+	},
+}
+
+const defaultItemVariants: Variants = {
+	hidden: { opacity: 0 },
+	show: {
+		opacity: 1,
+	},
+	exit: {
+		opacity: 0,
+	},
+}
+
+const defaultItemAnimationVariants: Record<
+	AnimationVariant,
+	{ container: Variants; item: Variants }
+> = {
+	fadeIn: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { opacity: 0, y: 20 },
+			show: {
+				opacity: 1,
+				y: 0,
+				transition: {
+					duration: 0.3,
+				},
+			},
+			exit: {
+				opacity: 0,
+				y: 20,
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+	blurIn: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { opacity: 0, filter: 'blur(10px)' },
+			show: {
+				opacity: 1,
+				filter: 'blur(0px)',
+				transition: {
+					duration: 0.3,
+				},
+			},
+			exit: {
+				opacity: 0,
+				filter: 'blur(10px)',
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+	blurInUp: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { opacity: 0, filter: 'blur(10px)', y: 20 },
+			show: {
+				opacity: 1,
+				filter: 'blur(0px)',
+				y: 0,
+				transition: {
+					y: { duration: 0.3 },
+					opacity: { duration: 0.4 },
+					filter: { duration: 0.3 },
+				},
+			},
+			exit: {
+				opacity: 0,
+				filter: 'blur(10px)',
+				y: 20,
+				transition: {
+					y: { duration: 0.3 },
+					opacity: { duration: 0.4 },
+					filter: { duration: 0.3 },
+				},
+			},
+		},
+	},
+	blurInDown: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { opacity: 0, filter: 'blur(10px)', y: -20 },
+			show: {
+				opacity: 1,
+				filter: 'blur(0px)',
+				y: 0,
+				transition: {
+					y: { duration: 0.3 },
+					opacity: { duration: 0.4 },
+					filter: { duration: 0.3 },
+				},
+			},
+		},
+	},
+	slideUp: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { y: 20, opacity: 0 },
+			show: {
+				y: 0,
+				opacity: 1,
+				transition: {
+					duration: 0.3,
+				},
+			},
+			exit: {
+				y: -20,
+				opacity: 0,
+				transition: {
+					duration: 0.3,
+				},
+			},
+		},
+	},
+	slideDown: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { y: -20, opacity: 0 },
+			show: {
+				y: 0,
+				opacity: 1,
+				transition: { duration: 0.3 },
+			},
+			exit: {
+				y: 20,
+				opacity: 0,
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+	slideLeft: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { x: 20, opacity: 0 },
+			show: {
+				x: 0,
+				opacity: 1,
+				transition: { duration: 0.3 },
+			},
+			exit: {
+				x: -20,
+				opacity: 0,
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+	slideRight: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { x: -20, opacity: 0 },
+			show: {
+				x: 0,
+				opacity: 1,
+				transition: { duration: 0.3 },
+			},
+			exit: {
+				x: 20,
+				opacity: 0,
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+	scaleUp: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { scale: 0.5, opacity: 0 },
+			show: {
+				scale: 1,
+				opacity: 1,
+				transition: {
+					duration: 0.3,
+					scale: {
+						type: 'spring',
+						damping: 15,
+						stiffness: 300,
+					},
+				},
+			},
+			exit: {
+				scale: 0.5,
+				opacity: 0,
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+	scaleDown: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { scale: 1.5, opacity: 0 },
+			show: {
+				scale: 1,
+				opacity: 1,
+				transition: {
+					duration: 0.3,
+					scale: {
+						type: 'spring',
+						damping: 15,
+						stiffness: 300,
+					},
+				},
+			},
+			exit: {
+				scale: 1.5,
+				opacity: 0,
+				transition: { duration: 0.3 },
+			},
+		},
+	},
+}
+
+const TextAnimateBase = ({
+	children,
+	delay = 0,
+	duration = 0.3,
+	variants,
+	className,
+	segmentClassName,
+	as: Component = 'p',
+	startOnView = true,
+	once = false,
+	by = 'word',
+	animation = 'fadeIn',
+	accessible = true,
+	...props
+}: TextAnimateProps) => {
+	const MotionComponent = motion.create(Component)
+
+	let segments: string[] = []
+	switch (by) {
+		case 'word':
+			segments = children.split(/(\s+)/)
+			break
+		case 'character':
+			segments = children.split('')
+			break
+		case 'line':
+			segments = children.split('\n')
+			break
+		case 'text':
+		default:
+			segments = [children]
+			break
+	}
+
+	const finalVariants = variants
+		? {
+				container: {
+					hidden: { opacity: 0 },
+					show: {
+						opacity: 1,
+						transition: {
+							opacity: { duration: 0.01, delay },
+							delayChildren: delay,
+							staggerChildren: duration / segments.length,
+						},
+					},
+					exit: {
+						opacity: 0,
+						transition: {
+							staggerChildren: duration / segments.length,
+							staggerDirection: -1,
+						},
+					},
+				},
+				item: variants,
+			}
+		: animation
+			? {
+					container: {
+						...defaultItemAnimationVariants[animation].container,
+						show: {
+							...defaultItemAnimationVariants[animation].container.show,
+							transition: {
+								delayChildren: delay,
+								staggerChildren: duration / segments.length,
+							},
+						},
+						exit: {
+							...defaultItemAnimationVariants[animation].container.exit,
+							transition: {
+								staggerChildren: duration / segments.length,
+								staggerDirection: -1,
+							},
+						},
+					},
+					item: defaultItemAnimationVariants[animation].item,
+				}
+			: { container: defaultContainerVariants, item: defaultItemVariants }
+
+	return (
+		<AnimatePresence mode="popLayout">
+			<MotionComponent
+				variants={finalVariants.container as Variants}
+				initial="hidden"
+				whileInView={startOnView ? 'show' : undefined}
+				animate={startOnView ? undefined : 'show'}
+				exit="exit"
+				className={cn('whitespace-pre-wrap', className)}
+				viewport={{ once }}
+				aria-label={accessible ? children : undefined}
+				{...props}
+			>
+				{accessible && <span className="sr-only">{children}</span>}
+				{segments.map((segment, i) => (
+					<motion.span
+						key={`${by}-${segment}-${i}`}
+						variants={finalVariants.item}
+						custom={i * staggerTimings[by]}
+						className={cn(
+							by === 'line' ? 'block' : 'inline-block whitespace-pre',
+							by === 'character' && '',
+							segmentClassName
+						)}
+						aria-hidden={accessible ? true : undefined}
+					>
+						{segment}
+					</motion.span>
+				))}
+			</MotionComponent>
+		</AnimatePresence>
+	)
+}
+
+// Export the memoized version
+export const TextAnimate = memo(TextAnimateBase)

packages/website/src/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	)
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	)
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	)
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

packages/website/src/components/ui/typing-animation.tsx

@@ -0,0 +1,164 @@
+import { MotionProps, motion, useInView } from 'motion/react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface TypingAnimationProps extends MotionProps {
+	children?: string
+	words?: string[]
+	className?: string
+	duration?: number
+	typeSpeed?: number
+	deleteSpeed?: number
+	delay?: number
+	pauseDelay?: number
+	loop?: boolean
+	as?: React.ElementType
+	startOnView?: boolean
+	showCursor?: boolean
+	blinkCursor?: boolean
+	cursorStyle?: 'line' | 'block' | 'underscore'
+}
+
+export function TypingAnimation({
+	children,
+	words,
+	className,
+	duration = 100,
+	typeSpeed,
+	deleteSpeed,
+	delay = 0,
+	pauseDelay = 1000,
+	loop = false,
+	as: Component = 'span',
+	startOnView = true,
+	showCursor = true,
+	blinkCursor = true,
+	cursorStyle = 'line',
+	...props
+}: TypingAnimationProps) {
+	const MotionComponent = motion.create(Component, {
+		forwardMotionProps: true,
+	})
+
+	const [displayedText, setDisplayedText] = useState<string>('')
+	const [currentWordIndex, setCurrentWordIndex] = useState(0)
+	const [currentCharIndex, setCurrentCharIndex] = useState(0)
+	const [phase, setPhase] = useState<'typing' | 'pause' | 'deleting'>('typing')
+	const elementRef = useRef<HTMLElement | null>(null)
+	const isInView = useInView(elementRef as React.RefObject<Element>, {
+		amount: 0.3,
+		once: true,
+	})
+
+	const wordsToAnimate = useMemo(() => words || (children ? [children] : []), [words, children])
+	const hasMultipleWords = wordsToAnimate.length > 1
+
+	const typingSpeed = typeSpeed || duration
+	const deletingSpeed = deleteSpeed || typingSpeed / 2
+
+	const shouldStart = startOnView ? isInView : true
+
+	useEffect(() => {
+		if (!shouldStart || wordsToAnimate.length === 0) return
+
+		const timeoutDelay =
+			delay > 0 && displayedText === ''
+				? delay
+				: phase === 'typing'
+					? typingSpeed
+					: phase === 'deleting'
+						? deletingSpeed
+						: pauseDelay
+
+		const timeout = setTimeout(() => {
+			const currentWord = wordsToAnimate[currentWordIndex] || ''
+			const graphemes = Array.from(currentWord)
+
+			switch (phase) {
+				case 'typing':
+					if (currentCharIndex < graphemes.length) {
+						setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(''))
+						setCurrentCharIndex(currentCharIndex + 1)
+					} else {
+						if (hasMultipleWords || loop) {
+							const isLastWord = currentWordIndex === wordsToAnimate.length - 1
+							if (!isLastWord || loop) {
+								setPhase('pause')
+							}
+						}
+					}
+					break
+
+				case 'pause':
+					setPhase('deleting')
+					break
+
+				case 'deleting':
+					if (currentCharIndex > 0) {
+						setDisplayedText(graphemes.slice(0, currentCharIndex - 1).join(''))
+						setCurrentCharIndex(currentCharIndex - 1)
+					} else {
+						const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length
+						setCurrentWordIndex(nextIndex)
+						setPhase('typing')
+					}
+					break
+			}
+		}, timeoutDelay)
+
+		return () => clearTimeout(timeout)
+	}, [
+		shouldStart,
+		phase,
+		currentCharIndex,
+		currentWordIndex,
+		displayedText,
+		wordsToAnimate,
+		hasMultipleWords,
+		loop,
+		typingSpeed,
+		deletingSpeed,
+		pauseDelay,
+		delay,
+	])
+
+	const currentWordGraphemes = Array.from(wordsToAnimate[currentWordIndex] || '')
+	const isComplete =
+		!loop &&
+		currentWordIndex === wordsToAnimate.length - 1 &&
+		currentCharIndex >= currentWordGraphemes.length &&
+		phase !== 'deleting'
+
+	const shouldShowCursor =
+		showCursor &&
+		!isComplete &&
+		(hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length)
+
+	const getCursorChar = () => {
+		switch (cursorStyle) {
+			case 'block':
+				return '▌'
+			case 'underscore':
+				return '_'
+			case 'line':
+			default:
+				return '|'
+		}
+	}
+
+	return (
+		<MotionComponent
+			ref={elementRef}
+			className={cn('leading-[5rem] tracking-[-0.02em]', className)}
+			{...props}
+		>
+			{displayedText}
+			{shouldShowCursor && (
+				<span className={cn('inline-block', blinkCursor && 'animate-blink-cursor')}>
+					{getCursorChar()}
+				</span>
+			)}
+		</MotionComponent>
+	)
+}

packages/website/src/constants.ts

@@ -0,0 +1,3 @@
+export const CDN_URL = 'https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js'
+export const CDN_CN_URL =
+	'https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js'

packages/website/src/docs/features/data-masking/page.tsx

@@ -1,48 +0,0 @@
-import BetaNotice from '@/components/BetaNotice'
-import CodeEditor from '@/components/CodeEditor'
-
-export default function DataMasking() {
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">数据脱敏</h1>
-
-			<BetaNotice />
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-				保护敏感数据，确保 AI 处理过程中的数据安全。
-			</p>
-
-			<h2 className="text-2xl font-bold mb-3">脱敏策略</h2>
-
-			<div className="space-y-4 mb-6">
-				<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
-						🔒 自动脱敏
-					</h3>
-					<p className="text-gray-600 dark:text-gray-300">
-						自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。
-					</p>
-				</div>
-
-				<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
-						⚙️ 自定义规则
-					</h3>
-					<p className="text-gray-600 dark:text-gray-300">
-						支持自定义脱敏规则，适应不同业务场景的数据保护需求。
-					</p>
-				</div>
-			</div>
-
-			<CodeEditor
-				code={`// 数据脱敏配置
-// @todo
-const rules = [
-	{ pattern: /\\d{11}/, replacement: '***-****-****' },
-	{ pattern: /\\d{4}-\\d{4}-\\d{4}-\\d{4}/, replacement: '****-****-****-****' }
-]
-pageAgent.maskData(rules)`}
-			/>
-		</div>
-	)
-}

packages/website/src/docs/features/knowledge-injection/page.tsx

@@ -1,162 +0,0 @@
-import BetaNotice from '@/components/BetaNotice'
-import CodeEditor from '@/components/CodeEditor'
-
-export default function KnowledgeInjection() {
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">知识库注入</h1>
-
-			<BetaNotice />
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
-				通过多层次的知识注入，让 AI 深度理解你的业务场景和应用逻辑，实现更精准的自动化操作。
-			</p>
-
-			{/* Custom Instruction */}
-			<section className="mb-12">
-				<h2 className="text-3xl font-bold mb-6">Instruction - 系统指令</h2>
-
-				<div className="p-6 bg-purple-50 dark:bg-purple-900/20 rounded-lg mb-6">
-					<h3 className="text-xl font-semibold mb-3 text-purple-900 dark:text-purple-300">
-						🎯 系统级指令
-					</h3>
-					<p className="text-gray-600 dark:text-gray-300 mb-4">
-						为 AI 设定全局行为准则和工作风格。
-					</p>
-					<ul className="list-disc list-inside space-y-2 text-gray-500 dark:text-gray-400">
-						<li>定义 AI 的工作风格和交互方式</li>
-						<li>设置安全边界和操作限制</li>
-						<li>指定错误处理和异常情况的应对策略</li>
-						<li>配置输出格式和反馈机制</li>
-					</ul>
-				</div>
-
-				<CodeEditor
-					className="mb-6"
-					code={`// 构造函数中设置系统指令
-const pageAgent = new PageAgent({
-  instruction: \`
-# 角色定义
-你是专业的电商运营助手。
-
-# 工作风格
-- 谨慎：操作前确认
-- 准确：确保正确性
-- 高效：优化流程
-
-# 错误处理
-遇到错误时暂停并报告。
-\`
-});`}
-				/>
-			</section>
-
-			{/* App Knowledge */}
-			<section className="mb-12">
-				<h2 className="text-3xl font-bold mb-6">App Knowledge - 应用知识</h2>
-
-				<div className="p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6">
-					<h3 className="text-xl font-semibold mb-3 text-blue-900 dark:text-blue-300">
-						� 业务领域知识
-					</h3>
-					<p className="text-gray-600 dark:text-gray-300 mb-4">
-						注入应用的核心业务知识，包括产品介绍、操作流程、术语定义等，让 AI 理解业务上下文。
-					</p>
-					<div className="grid md:grid-cols-2 gap-4">
-						<div className="space-y-2">
-							<h4 className="font-semibold text-blue-800 dark:text-blue-200">产品知识</h4>
-							<ul className="list-disc list-inside text-sm text-gray-500 dark:text-gray-400 space-y-1">
-								<li>产品功能和特性介绍</li>
-								<li>用户角色和权限体系</li>
-								<li>业务规则和约束条件</li>
-							</ul>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-semibold text-blue-800 dark:text-blue-200">操作指南</h4>
-							<ul className="list-disc list-inside text-sm text-gray-500 dark:text-gray-400 space-y-1">
-								<li>标准操作流程定义</li>
-								<li>异常情况处理方案</li>
-								<li>术语和概念解释</li>
-							</ul>
-						</div>
-					</div>
-				</div>
-
-				<CodeEditor
-					className="mb-6"
-					code={`// 应用知识
-pageAgent.knowledge.setAppKnowledge(\`
-# 产品介绍
-电商管理系统：面向中小企业的一站式解决方案。
-
-# 操作流程
-## 商品上架
-1. 进入商品管理页面 2. 点击新增商品 3. 填写基本信息 4. 设置库存 5. 提交审核
-
-# 术语解释
-- SKU：库存量单位
-- SPU：标准产品单位
-- 运费模板：物流费用计算规则
-
-# 业务规则
-- 库存为0时自动下架
-- VIP会员享9.5折
-\`);`}
-				/>
-			</section>
-
-			{/* Page Knowledge */}
-			<section className="mb-12">
-				<h2 className="text-3xl font-bold mb-6">Page Knowledge - 页面知识</h2>
-
-				<div className="p-6 bg-green-50 dark:bg-green-900/20 rounded-lg mb-6">
-					<h3 className="text-xl font-semibold mb-3 text-green-900 dark:text-green-300">
-						📄 页面级精准指导
-					</h3>
-					<p className="text-gray-600 dark:text-gray-300 mb-4">
-						为特定页面提供精确的操作指导和元素说明，让 AI 准确理解页面结构和交互逻辑。
-					</p>
-					<div className="grid md:grid-cols-3 gap-4">
-						<div className="space-y-2">
-							<h4 className="font-semibold text-green-800 dark:text-green-200">元素标注</h4>
-							<p className="text-sm text-gray-500 dark:text-gray-400">为页面元素添加语义化描述</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-semibold text-green-800 dark:text-green-200">交互说明</h4>
-							<p className="text-sm text-gray-500 dark:text-gray-400">
-								定义元素的交互行为和预期结果
-							</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-semibold text-green-800 dark:text-green-200">页面逻辑</h4>
-							<p className="text-sm text-gray-500 dark:text-gray-400">
-								说明页面的业务逻辑和状态变化
-							</p>
-						</div>
-					</div>
-				</div>
-
-				<CodeEditor
-					className="mb-6"
-					code={`// 页面知识库
-// 添加页面知识
-pageAgent.knowledge.addPageKnowledge("/products", \`
-商品列表页面，包含搜索、筛选、批量操作功能。
-#add-product-btn：新增商品按钮
-.product-item：商品列表项
-#search-input：搜索框，最少2个字符
-\`);
-
-pageAgent.knowledge.addPageKnowledge("/orders/*", \`
-订单详情页面。
-.order-status：订单状态标签
-#update-status-btn：状态更新按钮
-\`);
-
-// 移除页面知识
-pageAgent.knowledge.removePageKnowledge("/products");`}
-				/>
-			</section>
-		</div>
-	)
-}

packages/website/src/docs/features/model-integration/page.tsx

@@ -1,164 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import BetaNotice from '@/components/BetaNotice'
-import CodeEditor from '@/components/CodeEditor'
-
-export default function ModelIntegration() {
-	const { t } = useTranslation('docs')
-
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">{t('model_integration.title')}</h1>
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-				{t('model_integration.subtitle')}
-			</p>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.recommended')}</h2>
-
-			<div className="grid md:grid-cols-3 gap-4 mb-6">
-				<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
-						{t('model_integration.model_gpt4_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_gpt4_badge')}
-					</p>
-					<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.model_gpt4_1')}</li>
-						<li>{t('model_integration.model_gpt4_2')}</li>
-						<li>{t('model_integration.model_gpt4_3')}</li>
-					</ul>
-				</div>
-
-				<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
-						{t('model_integration.model_deepseek_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_deepseek_badge')}
-					</p>
-					<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.model_deepseek_1')}</li>
-						<li>{t('model_integration.model_deepseek_2')}</li>
-						<li>{t('model_integration.model_deepseek_3')}</li>
-					</ul>
-				</div>
-
-				<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
-						{t('model_integration.model_qwen_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_qwen_badge')}
-					</p>
-					<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.model_qwen_1')}</li>
-						<li>{t('model_integration.model_qwen_2')}</li>
-						<li>{t('model_integration.model_qwen_3')}</li>
-					</ul>
-				</div>
-
-				<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
-						{t('model_integration.model_gemini_title')}
-					</h3>
-					<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-						{t('model_integration.model_gemini_badge')}
-					</p>
-				</div>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.available')}</h2>
-
-			<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg mb-6">
-				<h3 className="text-lg font-semibold mb-3 text-emerald-900 dark:text-emerald-300">
-					{t('model_integration.available_verified')}
-				</h3>
-				<div className="flex flex-wrap gap-2">
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						gpt-4.1-mini/4.1/5
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						grok-4/grok-code-fast
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						qwen3
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						deepseek-v3.1/3.2
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						claude-sonnet-4/4.5/haiku-4.5
-					</span>
-					<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
-						gemini-2.5
-					</span>
-				</div>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.tips')}</h2>
-
-			<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg mb-6">
-				<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-disc pl-5">
-					<li>{t('model_integration.tip_1')}</li>
-					<li>{t('model_integration.tip_2')}</li>
-					<li>{t('model_integration.tip_3')}</li>
-				</ul>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.security')}</h2>
-
-			<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 mb-4">
-				<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
-					{t('model_integration.security_warning')}
-				</p>
-			</div>
-
-			<p className="text-gray-600 dark:text-gray-300 mb-4">
-				{t('model_integration.security_desc')}
-			</p>
-
-			<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6">
-				<h3 className="text-lg font-semibold mb-3 text-blue-900 dark:text-blue-300">
-					{t('model_integration.security_backend_proxy')}
-				</h3>
-				<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-					{t('model_integration.security_backend_desc')}
-				</p>
-				<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-none pl-0">
-					<li>{t('model_integration.security_method_1')}</li>
-					<li>{t('model_integration.security_method_2')}</li>
-					<li>{t('model_integration.security_method_3')}</li>
-				</ul>
-			</div>
-
-			<h2 className="text-2xl font-bold mb-3">{t('model_integration.configuration')}</h2>
-
-			<CodeEditor
-				code={`
-// 百炼等其他兼容服务
-const pageAgent = new PageAgent({
-  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
-  apiKey: 'your-api-key',
-  model: 'qwen-plus'
-});
-
-// 私有部署模型
-const pageAgent = new PageAgent({
-  baseURL: 'http://localhost:11434/v1',
-  apiKey: 'N/A',  // Ollama 通常使用任意值
-  model: 'qwen3:latest'
-});
-
-// 测试接口
-// @note: 限流，限制 prompt 内容，限制来源，随时变更，请替换成你自己的
-// @note: 使用 DeepSeek-chat(3.2) 官方版本，使用协议和隐私策略见 DeepSeek 网站
-const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
-const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
-const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
-`}
-			/>
-		</div>
-	)
-}

packages/website/src/docs/features/security-permissions/page.tsx

@@ -1,81 +0,0 @@
-import BetaNotice from '@/components/BetaNotice'
-
-export default function SecurityPermissions() {
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">安全与权限</h1>
-
-			<BetaNotice />
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
-				page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。
-			</p>
-
-			<div className="space-y-6">
-				<section>
-					<h2 className="text-2xl font-bold mb-3">元素操作黑白名单</h2>
-					<div className="space-y-3">
-						<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
-							<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
-								🚫 操作黑名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">
-								禁止 AI 操作敏感元素，如删除按钮、支付按钮等。
-							</p>
-						</div>
-						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
-							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
-								✅ 操作白名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">明确定义 AI 可以操作的元素范围。</p>
-						</div>
-					</div>
-				</section>
-
-				<section>
-					<h2 className="text-2xl font-bold mb-3">URL 黑白名单</h2>
-					<div className="space-y-3">
-						<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
-							<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
-								🚫 URL 黑名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">禁止 AI 访问敏感页面和危险链接。</p>
-						</div>
-						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
-							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
-								✅ URL 白名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">限制 AI 只能访问预定义的安全页面。</p>
-						</div>
-					</div>
-				</section>
-
-				<section>
-					<h2 className="text-2xl font-bold mb-3">Instruction 安全约束</h2>
-					<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
-						<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
-							⚠️ 高危操作控制
-						</h3>
-						<p className="text-gray-600 dark:text-gray-300 mb-3">
-							在 AI 指令中明确列举高危操作，通过两种策略进行控制：
-						</p>
-						<div className="space-y-2">
-							<div className="pl-3 border-l-2 border-red-400">
-								<p className="font-medium text-red-700 dark:text-red-300">完全禁止操作</p>
-								<p className="text-sm text-gray-500 dark:text-gray-400">
-									对极高风险操作明确禁止执行
-								</p>
-							</div>
-							<div className="pl-3 border-l-2 border-orange-400">
-								<p className="font-medium text-orange-700 dark:text-orange-300">需用户确认操作</p>
-								<p className="text-sm text-gray-500 dark:text-gray-400">
-									对中等风险操作要求用户明确同意
-								</p>
-							</div>
-						</div>
-					</div>
-				</section>
-			</div>
-		</div>
-	)
-}

packages/website/src/docs/integration/cdn-setup/page.tsx

@@ -1,38 +0,0 @@
-import BetaNotice from '@/components/BetaNotice'
-import CodeEditor from '@/components/CodeEditor'
-
-export default function CdnSetup() {
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">CDN 引入</h1>
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-				通过 CDN 快速集成 page-agent，无需复杂的构建配置。
-			</p>
-
-			<h2 className="text-2xl font-bold mb-3">快速开始</h2>
-
-			<CodeEditor
-				className="mb-8"
-				code={`
-// 仅供测试使用，稳定 CDN 待定
-<script src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js" crossorigin="true" type="text/javascript"></script>
-
-<script>
-	window.pageAgent.panel.show()
-</script>`}
-			/>
-
-			<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
-				<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
-					⚠️ 注意事项
-				</h3>
-				<ul className="text-gray-600 dark:text-gray-300 space-y-1">
-					<li>• 生产环境建议使用固定版本号</li>
-					<li>• 确保 HTTPS 环境下使用</li>
-					<li>• 配置 CSP 策略允许脚本执行</li>
-				</ul>
-			</div>
-		</div>
-	)
-}

packages/website/src/docs/integration/configuration/page.tsx

@@ -1,109 +0,0 @@
-import CodeEditor from '@/components/CodeEditor'
-
-export default function Configuration() {
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">配置选项</h1>
-
-			<CodeEditor
-				className="mb-8"
-				language="typescript"
-				code={`// config
-type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig
-
-interface LLMConfig {
-	baseURL?: string
-	apiKey?: string
-	model?: string
-	temperature?: number
-	maxTokens?: number
-	maxRetries?: number
-}
-
-interface AgentConfig {
-	language?: "en-US" | "zh-CN"
-
-	/**
-	 * Custom tools to extend PageAgent capabilities
-	 * @experimental
-	 * @note You can also override or remove internal tools by using the same name.
-	 * @see [tools](../tools/index.ts)
-	 *
-	 * @example
-	 * // override internal tool
-	 * import { tool } from 'page-agent'
-	 * const customTools = {
-	 * ask_user: tool({
-	 * 	description:
-	 * 		'Ask the user or parent model a question and wait for their answer. Use this if you need more information or clarification.',
-	 * 	inputSchema: zod.object({
-	 * 		question: zod.string(),
-	 * 	}),
-	 * 	execute: async function (this: PageAgent, input) {
-	 * 		const answer = await do_some_thing(input.question)
-	 * 		return "✅ Received user answer: " + answer
-	 * 	},
-	 * })
-	 * }
-	 *
-	 * @example
-	 * // remove internal tool
-	 * const customTools = {
-	 * 	ask_user: null // never ask user questions
-	 * }
-	 */
-	customTools?: Record<string, PageAgentTool | null>
-
-	// lifecycle hooks
-	// @todo: use event instead of hooks
-
-	onBeforeStep?: (this: PageAgent, stepCnt: number) => Promise<void> | void
-	onAfterStep?: (this: PageAgent, stepCnt: number, history: AgentHistory[]) => Promise<void> | void
-	onBeforeTask?: (this: PageAgent) => Promise<void> | void
-	onAfterTask?: (this: PageAgent, result: ExecutionResult) => Promise<void> | void
-
-	/**
-	 * @note this hook can block the disposal process
-	 * @note when dispose caused by page unload, "reason" will be 'PAGE_UNLOADING'. this method CANNOT block unloading. async operations may be cut.
-	 */
-	onDispose?: (this: PageAgent, reason?: string) => void
-
-	// page behavior hooks
-
-	/**
-	 * @experimental
-	 * Enable the experimental script execution tool that allows executing generated JavaScript code on the page.
-	 * @note Can cause unpredictable side effects.
-	 * @note May bypass some safe guards and data-masking mechanisms.
-	 */
-	experimentalScriptExecutionTool?: boolean
-
-	/**
-	 * TODO: @unimplemented
-	 * hook when action causes a new page to be opened
-	 * @note PageAgent will try to detect new pages and decide if it's caused by an action. But not very reliable.
-	 */
-	onNewPageOpen?: (this: PageAgent, url: string) => Promise<void> | void
-
-	/**
-	 * TODO: @unimplemented
-	 * try to navigate to a new page instead of opening a new tab/window.
-	 * @note will unload the current page when a action tries to open a new page. so that things keep in the same tab/window.
-	 */
-	experimentalPreventNewPage?: boolean
-}
-
-interface PageControllerConfig {
-	interactiveBlacklist?: (Element | (() => Element))[]
-	interactiveWhitelist?: (Element | (() => Element))[]
-	include_attributes?: string[]
-	highlightOpacity?: number
-	highlightLabelOpacity?: number
-	viewportExpansion?: number
-}
-
-`}
-			/>
-		</div>
-	)
-}

packages/website/src/i18n/locales/en-US/common.ts

@@ -27,14 +27,14 @@ export default {
 		overview: 'Overview',
 		quick_start: 'Quick Start',
 		limitations: 'Limitations',
-		model_integration: 'Model Integration',
+		models: 'Models',
 		custom_tools: 'Custom Tools',
-		knowledge_injection: 'Knowledge Injection',
-		security_permissions: 'Security & Permissions',
+		knowledge_injection: 'Instructions',
 		data_masking: 'Data Masking',
 		cdn_setup: 'CDN Setup',
 		configuration: 'Configuration',
 		best_practices: 'Best Practices',
 		third_party_agent: 'Third-party Agent',
+		security_permissions: 'Security & Permissions',
 	},
 }

packages/website/src/i18n/locales/en-US/docs.ts

@@ -5,7 +5,7 @@ export default {
 			'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.',
 		what_is: 'What is page-agent?',
 		what_is_desc:
-			'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent targets web developers, not scrapers or agent clients builders. Integrate it into your site to let users interact with pages through natural language.',
+			'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent is built for web developers and web applications first. Integrate it into your site to let users interact with pages through natural language.',
 		features_title: 'Core Features',
 		feature_dom: {
 			title: '🧠 Smart DOM Analysis',
@@ -112,37 +112,22 @@ export default {
 		future_3: '• Basic visual understanding',
 		future_4: '• Smarter error recovery',
 	},
-	model_integration: {
-		title: 'Model Integration',
+	models: {
+		title: 'Models',
 		subtitle:
-			'Supports OpenAI-compatible models with tool call support, including public cloud services and private deployments.',
+			'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.',
+		recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities.',
 		recommended: 'Recommended Models',
-		model_gpt4_title: '⚡ gpt-4.1-mini',
-		model_gpt4_badge: 'Evaluation Baseline ✅',
-		model_gpt4_1: '• Cost-effective',
-		model_gpt4_2: '• Fast',
-		model_gpt4_3: '• High success rate',
-		model_deepseek_title: '💰 DeepSeek-3.2',
-		model_deepseek_badge: 'Economical',
-		model_deepseek_1: '• Much cheaper than similar models',
-		model_deepseek_2: '• ToolCall may error but usually auto-recovers',
-		model_deepseek_3: "• This site's free demo uses DeepSeek",
-		model_qwen_title: '🛡️ qwen3',
-		model_qwen_badge: 'Secure & Compliant',
-		model_qwen_1: '• Controllable, decent results, reasonable price',
-		model_qwen_2: '• ToolCall may error but usually auto-recovers',
-		model_qwen_3: '• Best for scenarios with detailed steps',
-		model_gemini_title: '⚡ gemini-2.5-flash',
-		model_gemini_badge: 'Highly efficient, high success rate, reasonable price',
-		available: 'Available Models',
-		available_verified: '✅ Verified Working',
+		available: 'Tested Models',
+		available_verified: 'Verified Working Models',
 		tips: 'Tips',
 		tip_1: 'Reasoning models (like GPT-5) are slower with no advantage',
 		tip_2:
-			"Non-OpenAI models don't guarantee JSON schema compliance—tool call may error but usually recovers. Higher temperature recommended",
-		tip_3: 'Small/nano models perform poorly',
+			'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended',
+		tip_3:
+			'Small models or those unable to handle complex tool definitions typically perform poorly',
 		security: '🔐 Production Authentication',
-		security_warning: '⚠️ Never commit real LLM API Keys to your frontend codebase',
+		security_warning: '⚠️ Never commit real LLM API Keys to your frontend code',
 		security_desc:
 			'In production environments, to hide the real LLM API Keys, we recommend the following architecture:',
 		security_backend_proxy: 'Backend Proxy Pattern',

packages/website/src/i18n/locales/en-US/home.ts

@@ -3,7 +3,7 @@ export default {
 		badge: 'GUI Agent in your webpage',
 		title_line1: 'The AI Operator',
 		title_line2: 'Living in Your Web App',
-		subtitle_emoji: '🪄 One line of CDN',
+		subtitle_emoji: '🪄One line of code',
 		subtitle_main: ' adds intelligent GUI Agents to your website.',
 		subtitle_detail: 'Users give natural language commands, AI handles the rest.',
 		tab_try: '🚀 Try It Now',
@@ -18,6 +18,9 @@ export default {
 		step1_content: 'Show your bookmarks bar',
 		step2_title: 'Step 2:',
 		step2_content: 'Drag this button to your bookmarks',
+		cdn_label: 'CDN Source',
+		cdn_international: 'International',
+		cdn_china: 'China Mirror',
 		step3_title: 'Step 3:',
 		step3_content: 'Click the bookmark on any site to activate',
 		notice_title: '⚠️ Heads Up',

packages/website/src/i18n/locales/zh-CN/common.ts

@@ -26,14 +26,14 @@ export default {
 		overview: '概览',
 		quick_start: '快速开始',
 		limitations: '使用限制',
-		model_integration: '模型接入',
+		models: '模型',
 		custom_tools: '自定义工具',
-		knowledge_injection: '知识库注入',
-		security_permissions: '安全与权限',
+		knowledge_injection: '知识注入',
 		data_masking: '数据脱敏',
 		cdn_setup: 'CDN 引入',
 		configuration: '配置选项',
 		best_practices: '最佳实践',
 		third_party_agent: '接入第三方 Agent',
+		security_permissions: '安全与权限',
 	},
 }

packages/website/src/i18n/locales/zh-CN/docs.ts

@@ -111,36 +111,20 @@ export default {
 		future_3: '• 基础的视觉理解能力',
 		future_4: '• 更智能的错误恢复机制',
 	},
-	model_integration: {
-		title: '模型接入',
+	models: {
+		title: '模型',
 		subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
+		recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型。',
 		recommended: '推荐模型',
-		model_gpt4_title: '⚡ gpt-4.1-mini',
-		model_gpt4_badge: '评估基准 ✅',
-		model_gpt4_1: '• 性价比高',
-		model_gpt4_2: '• 速度快',
-		model_gpt4_3: '• 成功率高',
-		model_deepseek_title: '💰 DeepSeek-3.2',
-		model_deepseek_badge: '经济实惠',
-		model_deepseek_1: '• 价格远低于同等级其他模型',
-		model_deepseek_2: '• ToolCall 有出错率,通常能够自动修复',
-		model_deepseek_3: '• 本网站提供的免费试用为 DeepSeek',
-		model_qwen_title: '🛡️ qwen3',
-		model_qwen_badge: '安全合规',
-		model_qwen_1: '• 可控、效果尚可,价格合理',
-		model_qwen_2: '• ToolCall 有出错率,通常能够自动修复',
-		model_qwen_3: '• 适合能给出详细步骤的场景',
-		model_gemini_title: '⚡ gemini-2.5-flash',
-		model_gemini_badge: '极其高效,成功率高,价格合理',
-		available: '可用模型',
-		available_verified: '✅ 已验证可用',
+		available: '已测试模型',
+		available_verified: '已验证可用模型',
 		tips: '提示',
 		tip_1: 'reasoning 模型(如 GPT-5),速度偏慢,没有必要',
 		tip_2:
-			'不保证 json schema 的模型(openAI 以外的几乎所有模型),tool call 有概率出错,通常能自动修复,建议 temperature 设置高一些',
-		tip_3: '小模型、nano 模型,效果不佳',
+			'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature',
+		tip_3: '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳',
 		security: '🔐 生产环境鉴权建议',
-		security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码库',
+		security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码',
 		security_desc: '在实际应用中,为了隐藏真实的 LLM API Key，建议采用以下架构:',
 		security_backend_proxy: '后端代理转发',
 		security_backend_desc:

packages/website/src/i18n/locales/zh-CN/home.ts

@@ -3,7 +3,7 @@ export default {
 		badge: 'GUI Agent in your webpage',
 		title_line1: '让你的 Web 应用',
 		title_line2: '拥有 AI 操作员',
-		subtitle_emoji: '🪄 一行 CDN 引入',
+		subtitle_emoji: '🪄一行代码',
 		subtitle_main: '，为你的网站添加 GUI Agent。',
 		subtitle_detail: '用户/答疑机器人给出文字指示，AI 帮你操作页面。',
 		tab_try: '🚀 立即尝试',
@@ -17,6 +17,9 @@ export default {
 		step1_content: '显示收藏夹栏',
 		step2_title: '步骤 2:',
 		step2_content: '拖拽下面按钮到收藏夹栏',
+		cdn_label: 'CDN 源',
+		cdn_international: '国际',
+		cdn_china: '国内镜像',
 		step3_title: '步骤 3:',
 		step3_content: '在其他网站点击收藏夹中的按钮即可使用',
 		notice_title: '⚠️ 注意',

packages/website/src/index.css

@@ -1,14 +1,49 @@
 @import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
 
 /* 启用 class-based dark mode for Tailwind v4 */
 @variant dark (.dark &);
 
 :root {
-	--background: #ffffff;
-	--foreground: #171717;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
 	/* 主题色渐变 */
 	--theme-color-1: rgb(88, 192, 252);
 	--theme-color-2: rgb(189, 69, 251);
+
+	/* shadcn */
+	--radius: 0.625rem;
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
 }
 
 /* class-based dark mode - 应用到 html.dark */
@@ -202,3 +237,153 @@ td {
 .scrollbar-hide::-webkit-scrollbar {
 	display: none; /* Chrome, Safari and Opera */
 }
+
+/* shadcn */
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-2xl: calc(var(--radius) + 8px);
+	--radius-3xl: calc(var(--radius) + 12px);
+	--radius-4xl: calc(var(--radius) + 16px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	/* magic ui */
+	--animate-blink-cursor: blink-cursor 1.2s step-end infinite;
+	@keyframes blink-cursor {
+		0%,
+		49% {
+			opacity: 1;
+		}
+		50%,
+		100% {
+			opacity: 0;
+		}
+	}
+	--animate-aurora: aurora 8s ease-in-out infinite alternate;
+	@keyframes aurora {
+		0% {
+			background-position: 0% 50%;
+			transform: rotate(-5deg) scale(0.9);
+		}
+		25% {
+			background-position: 50% 100%;
+			transform: rotate(5deg) scale(1.1);
+		}
+		50% {
+			background-position: 100% 50%;
+			transform: rotate(-3deg) scale(0.95);
+		}
+		75% {
+			background-position: 50% 0%;
+			transform: rotate(3deg) scale(1.05);
+		}
+		100% {
+			background-position: 0% 50%;
+			transform: rotate(-5deg) scale(0.9);
+		}
+	}
+	--animate-shiny-text: shiny-text 8s infinite;
+	@keyframes shiny-text {
+		0%,
+		90%,
+		100% {
+			background-position: calc(-100% - var(--shiny-width)) 0;
+		}
+		30%,
+		60% {
+			background-position: calc(100% + var(--shiny-width)) 0;
+		}
+	}
+	--animate-gradient: gradient 8s linear infinite;
+	@keyframes gradient {
+		to {
+			background-position: var(--bg-size, 300%) 0;
+		}
+	}
+	--animate-background-position-spin: background-position-spin 3000ms infinite alternate;
+	@keyframes background-position-spin {
+		0% {
+			background-position: top center;
+		}
+		100% {
+			background-position: bottom center;
+		}
+	}
+}
+
+/* shadcn dark mode */
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+/* shadcn base */
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

packages/website/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

packages/website/src/main.tsx

@@ -1,19 +1,15 @@
 import { createRoot } from 'react-dom/client'
-import { Route, Router, Switch } from 'wouter'
+import { Router } from 'wouter'
 import { useHashLocation } from 'wouter/use-hash-location'
 
 import './i18n/config'
 import './i18n/types'
 import { default as PagesRouter } from './router'
-import { default as TestPagesRouter } from './test-pages/router'
 
 import './index.css'
 
 createRoot(document.getElementById('root')!).render(
 	<Router hook={useHashLocation}>
-		<Switch>
-			<Route path="/test-pages" component={TestPagesRouter} nest />
-			<Route path="/" component={PagesRouter} nest />
-		</Switch>
+		<PagesRouter />
 	</Router>
 )

packages/website/src/pages/Home.tsx

@@ -1,28 +1,38 @@
 /* eslint-disable react-dom/no-dangerously-set-innerhtml */
+import { Bot, Box, MessageSquare, PlayCircle, Shield, Sparkles, Users, Zap } from 'lucide-react'
 import { PageAgent } from 'page-agent'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useSearchParams } from 'wouter'
 
-import Footer from './components/Footer'
-import Header from './components/Header'
+import Footer from '../components/Footer'
+import Header from '../components/Header'
+import { AnimatedGradientText } from '../components/ui/animated-gradient-text'
+import { Highlighter } from '../components/ui/highlighter'
+import { NeonGradientCard } from '../components/ui/neon-gradient-card'
+import { Particles } from '../components/ui/particles'
+import { SparklesText } from '../components/ui/sparkles-text'
+import { CDN_CN_URL, CDN_URL } from '../constants'
 
-const injection = encodeURI(
-	"javascript:(function(){var s=document.createElement('script');s.src=`https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js?t=${Math.random()}`;s.setAttribute('crossorigin', true);s.type=`text/javascript`;s.onload=()=>console.log('PageAgent script loaded!');document.body.appendChild(s);})();"
-)
+function getInjection(useCN?: boolean) {
+	const cdn = useCN ? CDN_CN_URL : CDN_URL
 
-const injectionA = `
-<a
-	href=${injection}
-	class="inline-flex items-center text-xs px-3 py-2 bg-blue-500 text-white font-medium rounded-lg hover:shadow-md transform hover:scale-105 transition-all duration-200 cursor-move border-2 border-dashed border-green-300"
-	draggable="true"
-	onclick="return false;"
-	title="Drag me to your bookmarks bar!"
->
-	✨PageAgent
-</a>
+	const injection = encodeURI(
+		`javascript:(function(){var s=document.createElement('script');s.src=\`${cdn}?t=\${Math.random()}\`;s.setAttribute('crossorigin', true);s.type="text/javascript";s.onload=()=>console.log('PageAgent script loaded!');document.body.appendChild(s);})();`
+	)
 
-`
+	return `
+	<a
+		href=${injection}
+		class="inline-flex items-center text-xs px-3 py-2 bg-blue-500 text-white font-medium rounded-lg hover:shadow-md transform hover:scale-105 transition-all duration-200 cursor-move border-2 border-dashed border-green-300"
+		draggable="true"
+		onclick="return false;"
+		title="Drag me to your bookmarks bar!"
+	>
+		✨PageAgent
+	</a>
+	`
+}
 
 export default function HomePage() {
 	const { t, i18n } = useTranslation(['home', 'common'])
@@ -38,6 +48,7 @@ export default function HomePage() {
 	const isOther = params.has('try_other')
 
 	const [activeTab, setActiveTab] = useState<'try' | 'other'>(isOther ? 'other' : 'try')
+	const [cdnSource, setCdnSource] = useState<'international' | 'china'>('international')
 
 	const handleExecute = async () => {
 		if (!task.trim()) return
@@ -53,6 +64,15 @@ export default function HomePage() {
 				interactiveBlacklist: [document.getElementById('root')!],
 				language: i18n.language as any,
 
+				instructions: {
+					system: 'You are a helpful assistant on PageAgent website.',
+					getPageInstructions: (url) => {
+						const hint = url.includes('page-agent') ? 'This is PageAgent demo page.' : undefined
+						console.log('[instructions] getPageInstructions:', url, '->', hint)
+						return hint
+					},
+				},
+
 				// experimentalScriptExecutionTool: true,
 
 				// testing server
@@ -77,19 +97,28 @@ export default function HomePage() {
 			<main id="main-content">
 				<section className="relative px-6 py-22 lg:py-28" aria-labelledby="hero-heading">
 					<div className="max-w-7xl mx-auto text-center">
-						{/* Background Pattern */}
+						{/* Background Pattern + Particles */}
 						<div className="absolute inset-0 opacity-30" aria-hidden="true">
 							<div className="absolute inset-0 bg-linear-to-r from-blue-400/20 to-purple-400/20 rounded-3xl transform rotate-1"></div>
 							<div className="absolute inset-0 bg-linear-to-l from-purple-400/20 to-blue-400/20 rounded-3xl transform -rotate-1"></div>
 						</div>
+						<Particles
+							className="absolute inset-0"
+							quantity={80}
+							staticity={30}
+							ease={80}
+							color="#6366f1"
+						/>
 
 						<div className="relative z-10">
-							<div className="inline-flex items-center px-4 py-2 mb-8 text-sm font-medium text-blue-700 bg-blue-100 rounded-full dark:text-blue-300 dark:bg-blue-900/30">
+							<div className="inline-flex items-center px-4 py-2 mb-8 text-sm font-medium bg-white/90 dark:bg-gray-800/90 rounded-full shadow-lg border border-gray-200 dark:border-gray-700">
 								<span
 									className="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"
 									aria-hidden="true"
 								></span>
-								{t('home:hero.badge')}
+								<AnimatedGradientText colorFrom="#3b82f6" colorTo="#8b5cf6">
+									{t('home:hero.badge')}
+								</AnimatedGradientText>
 							</div>
 
 							<h1
@@ -102,23 +131,29 @@ export default function HomePage() {
 							</h1>
 
 							<p className="text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed">
-								<span className="bg-linear-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent font-bold">
-									{t('home:hero.subtitle_emoji')}
-								</span>
+								<Highlighter action="underline" color="#8b5cf6" strokeWidth={2}>
+									<span className="bg-linear-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent font-bold">
+										{t('home:hero.subtitle_emoji')}
+									</span>
+								</Highlighter>
 								{t('home:hero.subtitle_main')}
 								<br />
 								{t('home:hero.subtitle_detail')}
 							</p>
 
 							{/* Try It Now Section - Tab Card */}
-							<div className="mt-8 mb-6">
+							<div className="mb-12">
 								<div className="max-w-3xl mx-auto">
-									<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+									<NeonGradientCard
+										borderSize={2}
+										borderRadius={20}
+										neonColors={{ firstColor: '#ff00aa', secondColor: '#00FFF1' }}
+									>
 										{/* Tab Headers */}
 										<div className="flex border-b border-gray-200 dark:border-gray-700">
 											<button
 												onClick={() => setActiveTab('try')}
-												className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 ${
+												className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tl-2xl ${
 													activeTab === 'try'
 														? 'bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/30 dark:to-purple-900/30 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500'
 														: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
@@ -128,7 +163,7 @@ export default function HomePage() {
 											</button>
 											<button
 												onClick={() => setActiveTab('other')}
-												className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 ${
+												className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tr-2xl ${
 													activeTab === 'other'
 														? 'bg-linear-to-r from-green-50 to-blue-50 dark:from-green-900/30 dark:to-blue-900/30 text-green-700 dark:text-green-300 border-b-2 border-green-500'
 														: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
@@ -194,10 +229,25 @@ export default function HomePage() {
 																</span>{' '}
 																{t('home:try_other.step2_content')}
 															</p>
-															<div
-																className="flex items-center justify-center gap-2 text-gray-500 dark:text-gray-400"
-																dangerouslySetInnerHTML={{ __html: injectionA }}
-															></div>
+															<div className="flex items-center justify-center gap-3">
+																<select
+																	value={cdnSource}
+																	onChange={(e) =>
+																		setCdnSource(e.target.value as 'international' | 'china')
+																	}
+																	className="px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200"
+																>
+																	<option value="international">
+																		{t('home:try_other.cdn_international')}
+																	</option>
+																	<option value="china">{t('home:try_other.cdn_china')}</option>
+																</select>
+																<div
+																	dangerouslySetInnerHTML={{
+																		__html: getInjection(cdnSource === 'china'),
+																	}}
+																></div>
+															</div>
 														</div>
 
 														{/* Usage Instructions */}
@@ -252,7 +302,7 @@ export default function HomePage() {
 												</div>
 											)}
 										</div>
-									</div>
+									</NeonGradientCard>
 								</div>
 							</div>
 
@@ -306,10 +356,10 @@ export default function HomePage() {
 								role="listitem"
 							>
 								<div
-									className="w-12 h-12 bg-linear-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
+									className="w-14 h-14 bg-linear-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg"
 									aria-hidden="true"
 								>
-									<span className="text-white text-xl">📦</span>
+									<Box className="w-7 h-7 text-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
 									{t('home:features.in_page.title')}
@@ -325,10 +375,10 @@ export default function HomePage() {
 								role="listitem"
 							>
 								<div
-									className="w-12 h-12 bg-linear-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
+									className="w-14 h-14 bg-linear-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg"
 									aria-hidden="true"
 								>
-									<span className="text-white text-xl">⚡</span>
+									<Zap className="w-7 h-7 text-white fill-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
 									{t('home:features.zero_backend.title')}
@@ -344,10 +394,10 @@ export default function HomePage() {
 								role="listitem"
 							>
 								<div
-									className="w-12 h-12 bg-linear-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
+									className="w-14 h-14 bg-linear-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg"
 									aria-hidden="true"
 								>
-									<span className="text-white text-xl">🌈</span>
+									<MessageSquare className="w-7 h-7 text-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
 									{t('home:features.accessible.title')}
@@ -363,10 +413,10 @@ export default function HomePage() {
 								role="listitem"
 							>
 								<div
-									className="w-12 h-12 bg-linear-to-br from-orange-500 to-orange-600  rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
+									className="w-14 h-14 bg-linear-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg"
 									aria-hidden="true"
 								>
-									<span className="text-white text-xl">🔒</span>
+									<Shield className="w-7 h-7 text-white" strokeWidth={2.5} />
 								</div>
 								<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
 									{t('home:features.secure_integration.title')}
@@ -383,12 +433,12 @@ export default function HomePage() {
 				<section className="px-6 py-20" aria-labelledby="use-cases-heading">
 					<div className="max-w-7xl mx-auto">
 						<div className="text-center mb-16">
-							<h2
-								id="use-cases-heading"
-								className="text-4xl lg:text-5xl font-bold mb-6 bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
+							<SparklesText
+								className="text-4xl lg:text-5xl mb-6"
+								colors={{ first: '#3b82f6', second: '#8b5cf6' }}
 							>
 								{t('home:use_cases.section_title')}
-							</h2>
+							</SparklesText>
 							<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
 								{t('home:use_cases.section_subtitle')}
 							</p>
@@ -396,10 +446,10 @@ export default function HomePage() {
 
 						<div className="grid lg:grid-cols-2 gap-12" role="list">
 							{/* Use Case 1 */}
-							<div className="bg-linear-to-br from-blue-100 to-purple-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
+							<div className="group bg-linear-to-br from-blue-100 to-purple-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl hover:shadow-xl transition-all duration-300">
 								<div className="flex items-start space-x-4">
-									<div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center shrink-0">
-										<span className="text-white font-bold">1</span>
+									<div className="w-12 h-12 bg-linear-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300 shadow-md">
+										<Bot className="w-6 h-6 text-white" strokeWidth={2.5} />
 									</div>
 
 									<div>
@@ -414,10 +464,10 @@ export default function HomePage() {
 							</div>
 
 							{/* Use Case 2 */}
-							<div className="bg-linear-to-br from-green-100 to-blue-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
+							<div className="group bg-linear-to-br from-green-100 to-blue-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl hover:shadow-xl transition-all duration-300">
 								<div className="flex items-start space-x-4">
-									<div className="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center shrink-0">
-										<span className="text-white font-bold">2</span>
+									<div className="w-12 h-12 bg-linear-to-br from-green-500 to-blue-500 rounded-xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300 shadow-md">
+										<Sparkles className="w-6 h-6 text-white" strokeWidth={2.5} />
 									</div>
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
@@ -431,10 +481,10 @@ export default function HomePage() {
 							</div>
 
 							{/* Use Case 3 */}
-							<div className="bg-linear-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
+							<div className="group bg-linear-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl hover:shadow-xl transition-all duration-300">
 								<div className="flex items-start space-x-4">
-									<div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center shrink-0">
-										<span className="text-white font-bold">3</span>
+									<div className="w-12 h-12 bg-linear-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300 shadow-md">
+										<PlayCircle className="w-6 h-6 text-white fill-white/30" strokeWidth={2.5} />
 									</div>
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
@@ -448,10 +498,10 @@ export default function HomePage() {
 							</div>
 
 							{/* Use Case 4 */}
-							<div className="bg-linear-to-br from-orange-100 to-red-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
+							<div className="group bg-linear-to-br from-orange-100 to-red-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl hover:shadow-xl transition-all duration-300">
 								<div className="flex items-start space-x-4">
-									<div className="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center shrink-0">
-										<span className="text-white font-bold">4</span>
+									<div className="w-12 h-12 bg-linear-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300 shadow-md">
+										<Users className="w-6 h-6 text-white" strokeWidth={2.5} />
 									</div>
 									<div>
 										<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">

packages/website/src/pages/docs/Layout.tsx

@@ -32,20 +32,23 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 		{
 			title: t('nav.features'),
 			items: [
-				{ title: t('nav.model_integration'), path: '/docs/features/model-integration' },
+				{ title: t('nav.models'), path: '/docs/features/model-integration' },
 				{ title: t('nav.custom_tools'), path: '/docs/features/custom-tools' },
-				{ title: t('nav.knowledge_injection'), path: '/docs/features/knowledge-injection' },
-				{ title: t('nav.security_permissions'), path: '/docs/features/security-permissions' },
+				{ title: t('nav.knowledge_injection'), path: '/docs/features/custom-instructions' },
 				{ title: t('nav.data_masking'), path: '/docs/features/data-masking' },
 			],
 		},
 		{
 			title: t('nav.integration'),
 			items: [
-				{ title: t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' },
 				{ title: t('nav.configuration'), path: '/docs/integration/configuration' },
-				{ title: t('nav.best_practices'), path: '/docs/integration/best-practices' },
 				{ title: t('nav.third_party_agent'), path: '/docs/integration/third-party-agent' },
+				{ title: '🚧 ' + t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' },
+				{
+					title: '🚧 ' + t('nav.security_permissions'),
+					path: '/docs/integration/security-permissions',
+				},
+				{ title: '🚧 ' + t('nav.best_practices'), path: '/docs/integration/best-practices' },
 			],
 		},
 	]
@@ -55,7 +58,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 			<div className="flex gap-8 min-w-[900px]">
 				{/* Sidebar */}
 				<aside className="w-64 shrink-0" role="complementary" aria-label="文档导航">
-					<div className="sticky top-8">
+					<div className="sticky">
 						<nav className="space-y-8" role="navigation" aria-label="文档章节">
 							{navigationSections.map((section) => (
 								<section key={section.title}>

packages/website/src/pages/docs/features/custom-instructions/page.tsx

@@ -0,0 +1,135 @@
+import { useTranslation } from 'react-i18next'
+
+import CodeEditor from '@/components/CodeEditor'
+
+export default function Instructions() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '知识注入' : 'Instructions'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? '通过 instructions 配置，为 AI 注入系统级指导和页面级上下文，让它更好地理解你的业务场景。'
+					: 'Use the instructions config to inject system-level directives and page-specific context, helping the AI better understand your application.'}
+			</p>
+
+			{/* System Instructions */}
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">
+					{isZh ? '系统级指导 (System Instructions)' : 'System Instructions'}
+				</h2>
+
+				<p className="text-gray-600 dark:text-gray-300 mb-6">
+					{isZh
+						? '全局提示词，应用于所有任务。定义 AI 的角色、工作风格和行为边界。'
+						: "Global directives applied to all tasks. Define the AI's role, working style, and behavioral boundaries."}
+				</p>
+
+				<CodeEditor
+					className="mb-6"
+					code={`const agent = new PageAgent({
+  // ...other config
+  instructions: {
+    system: \`
+You are a professional e-commerce assistant.
+
+Guidelines:
+- Always confirm before submitting orders
+- Double-check prices and quantities
+- Report errors immediately instead of retrying blindly
+\`
+  }
+})`}
+				/>
+			</section>
+
+			{/* Page Instructions */}
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">
+					{isZh ? '页面级指导 (Page Instructions)' : 'Page Instructions'}
+				</h2>
+
+				<p className="text-gray-600 dark:text-gray-300 mb-6">
+					{isZh
+						? '动态回调函数，在每个 step 执行前调用，根据当前页面 URL 返回特定提示词。适用于为不同页面提供针对性的操作引导。'
+						: 'A dynamic callback invoked before each step. Returns page-specific instructions based on the current URL. Useful for providing targeted guidance on different pages.'}
+				</p>
+
+				<CodeEditor
+					className="mb-6"
+					code={`const agent = new PageAgent({
+  // ...other config
+  instructions: {
+    system: 'You are an order management assistant.',
+
+    getPageInstructions: (url) => {
+      if (url.includes('/checkout')) {
+        return \`
+This is the checkout page.
+- Verify shipping address before proceeding
+- Check if any discounts are applied
+- Confirm the total amount with the user
+\`
+      }
+
+      if (url.includes('/products')) {
+        return \`
+This is the product listing page.
+- Use filters to narrow down search results
+- Check stock availability before adding to cart
+\`
+      }
+
+      return undefined // No special instructions for other pages
+    }
+  }
+})`}
+				/>
+			</section>
+
+			{/* How It Works */}
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">{isZh ? '工作原理' : 'How It Works'}</h2>
+
+				<p className="text-gray-600 dark:text-gray-300 mb-4">
+					{isZh
+						? '在每个执行步骤之前，page-agent 会将 instructions 拼接到用户提示词中：'
+						: 'Before each execution step, page-agent prepends the instructions to the user prompt:'}
+				</p>
+
+				<CodeEditor
+					language="xml"
+					className="mb-6"
+					code={`<instructions>
+<system_instructions>
+You are a professional e-commerce assistant.
+...
+</system_instructions>
+<page_instructions>
+This is the checkout page.
+...
+</page_instructions>
+</instructions>
+
+<!-- followed by agent state, history, and browser state -->`}
+				/>
+
+				<ul className="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
+					<li>
+						{isZh
+							? '如果 system 为空，则不输出 <system_instructions> 标签'
+							: 'If system is empty, the <system_instructions> tag is omitted'}
+					</li>
+					<li>
+						{isZh
+							? '如果 getPageInstructions 返回空值，则不输出 <page_instructions> 标签'
+							: 'If getPageInstructions returns empty, the <page_instructions> tag is omitted'}
+					</li>
+				</ul>
+			</section>
+		</div>
+	)
+}

packages/website/src/pages/docs/features/data-masking/page.tsx

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next'
+
+import CodeEditor from '@/components/CodeEditor'
+
+export default function DataMasking() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '数据脱敏' : 'Data Masking'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? '使用 transformPageContent 钩子在页面内容发送给 LLM 之前进行处理，可用于检查清洗效果、修改页面信息、隐藏敏感数据等。'
+					: 'Use the transformPageContent hook to process page content before sending to LLM. Useful for inspecting extraction results, modifying page info, and masking sensitive data.'}
+			</p>
+
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">{isZh ? '接口定义' : 'API Definition'}</h2>
+
+				<CodeEditor
+					className="mb-6"
+					code={`interface PageAgentConfig {
+  /**
+   * Transform page content before sending to LLM.
+   * Called after DOM extraction and simplification.
+   */
+  transformPageContent?: (content: string) => Promise<string> | string
+}`}
+				/>
+			</section>
+
+			<section className="mb-12">
+				<h2 className="text-3xl font-bold mb-6">
+					{isZh ? '常用脱敏规则' : 'Common Masking Patterns'}
+				</h2>
+
+				<p className="text-gray-600 dark:text-gray-300 mb-6">
+					{isZh
+						? '以下示例展示了如何脱敏常见的敏感信息：'
+						: 'The following example shows how to mask common sensitive data:'}
+				</p>
+
+				<CodeEditor
+					code={`const agent = new PageAgent({
+  transformPageContent: async (content) => {
+    // China phone number (11 digits starting with 1)
+    content = content.replace(/\\b(1[3-9]\\d)(\\d{4})(\\d{4})\\b/g, '$1****$3')
+
+    // Email address
+    content = content.replace(
+      /\\b([a-zA-Z0-9._%+-])[^@]*(@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,})\\b/g,
+      '$1***$2'
+    )
+
+    // China ID card number (18 digits)
+    content = content.replace(
+      /\\b(\\d{6})(19|20\\d{2})(0[1-9]|1[0-2])(0[1-9]|[12]\\d|3[01])(\\d{3}[\\dXx])\\b/g,
+      '$1********$5'
+    )
+
+    // Bank card number (16-19 digits)
+    content = content.replace(/\\b(\\d{4})\\d{8,11}(\\d{4})\\b/g, '$1********$2')
+
+    return content
+  }
+})`}
+				/>
+			</section>
+		</div>
+	)
+}

packages/website/src/pages/docs/features/model-integration/page.tsx

@@ -0,0 +1,125 @@
+import { useTranslation } from 'react-i18next'
+
+import CodeEditor from '@/components/CodeEditor'
+
+// Recommended models: lightweight with excellent tool call capabilities
+const MODELS = {
+	recommended: ['gpt-4.1-mini', 'claude-haiku-4.5', 'gemini-3-flash', 'deepseek-3.2', 'gpt-5.2'],
+	verified: [
+		'qwen-3-max',
+		'gpt-4.1',
+		'gpt-5',
+		'gpt-5-mini',
+		'gpt-5.1',
+		'grok-4',
+		'grok-code-fast',
+		'claude-sonnet-3.5',
+		'claude-sonnet-4.5',
+		'claude-opus-4.5',
+		'gemini-2.5',
+		'gemini-3-pro',
+	],
+}
+
+export default function ModelIntegration() {
+	const { t } = useTranslation('docs')
+	const allModels = [...MODELS.recommended, ...MODELS.verified]
+
+	return (
+		<div className="max-w-4xl">
+			<h1 className="text-4xl font-bold mb-4">{t('models.title')}</h1>
+			<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">{t('models.subtitle')}</p>
+
+			{/* Models Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-3">{t('models.available')}</h2>
+				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+					{t('models.recommendation_logic')}
+				</p>
+				<div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
+					<div className="flex flex-wrap gap-2">
+						{allModels.map((model) => {
+							const isRecommended = MODELS.recommended.includes(model)
+							return (
+								<div
+									key={model}
+									className={`px-3 py-1.5 rounded-md text-sm font-medium font-mono transition-colors ${
+										isRecommended
+											? 'bg-emerald-500 text-white shadow-sm'
+											: 'bg-white/80 dark:bg-gray-800/80 text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600'
+									}`}
+								>
+									{model}
+									{isRecommended && <span className="ml-1">⭐</span>}
+								</div>
+							)
+						})}
+					</div>
+					<p className="text-xs text-gray-600 dark:text-gray-400 mt-5">⭐ baseline models</p>
+				</div>
+			</section>
+
+			{/* Tips Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{t('models.tips')}</h2>
+				<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
+					<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
+						<li>{t('models.tip_2')}</li>
+						<li>{t('models.tip_3')}</li>
+					</ul>
+				</div>
+			</section>
+
+			{/* Security Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{t('models.security')}</h2>
+				<div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
+					<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
+						{t('models.security_warning')}
+					</p>
+				</div>
+				<div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
+					<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
+						{t('models.security_backend_proxy')}
+					</h3>
+					<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+						{t('models.security_backend_desc')}
+					</p>
+					<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+						<li>{t('models.security_method_1')}</li>
+						<li>{t('models.security_method_2')}</li>
+						<li>{t('models.security_method_3')}</li>
+					</ul>
+				</div>
+			</section>
+
+			{/* Configuration Section */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{t('models.configuration')}</h2>
+				<CodeEditor
+					code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
+const pageAgent = new PageAgent({
+  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+  apiKey: 'your-api-key',
+  model: 'qwen-plus'
+});
+
+// Self-hosted models (e.g., Ollama)
+const pageAgent = new PageAgent({
+  baseURL: 'http://localhost:11434/v1',
+  apiKey: 'N/A',  // Ollama typically accepts any value
+  model: 'qwen3:latest'
+});
+
+// Free testing endpoint
+// Note: Rate-limited, content-filtered, subject to change. Replace with your own.
+// Note: Uses official DeepSeek-chat (3.2). See DeepSeek website for terms & privacy.
+const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
+const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+`}
+				/>
+			</section>
+		</div>
+	)
+}

packages/website/src/pages/docs/integration/cdn-setup/page.tsx

@@ -0,0 +1,82 @@
+import { useTranslation } from 'react-i18next'
+
+import BetaNotice from '@/components/BetaNotice'
+import CodeEditor from '@/components/CodeEditor'
+import { CDN_CN_URL, CDN_URL } from '@/constants'
+
+export default function CdnSetup() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
+	return (
+		<div>
+			<BetaNotice />
+
+			<h1 className="text-4xl font-bold mb-6">{isZh ? 'CDN 引入' : 'CDN Setup'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? '通过 CDN 快速集成 page-agent，无需复杂的构建配置。默认使用演示模型。'
+					: 'Fastest way to integrate page-agent via CDN. No complex build setup needed. Demo model will be used by default.'}
+			</p>
+
+			<section className="mb-8">
+				<h2 className="text-2xl font-bold mb-4">{isZh ? 'CDN 地址' : 'CDN URLs'}</h2>
+
+				<div className="overflow-x-auto mb-6">
+					<table className="w-full border-collapse text-sm">
+						<thead>
+							<tr className="border-b border-gray-200 dark:border-gray-700">
+								<th className="text-left py-3 px-4 font-semibold">{isZh ? '位置' : 'Location'}</th>
+								<th className="text-left py-3 px-4 font-semibold">URL</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr className="border-b border-gray-100 dark:border-gray-800">
+								<td className="py-3 px-4">{isZh ? '全球' : 'Global'}</td>
+								<td className="py-3 px-4 font-mono text-xs break-all">{CDN_URL}</td>
+							</tr>
+							<tr className="border-b border-gray-100 dark:border-gray-800">
+								<td className="py-3 px-4">{isZh ? '中国镜像' : 'China Mirror'}</td>
+								<td className="py-3 px-4 font-mono text-xs break-all">{CDN_CN_URL}</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</section>
+
+			<section className="mb-8">
+				<h2 className="text-2xl font-bold mb-4">{isZh ? '快速开始' : 'Quick Start'}</h2>
+
+				<CodeEditor
+					className="mb-6"
+					code={`<script
+  src="${CDN_URL}"
+  crossorigin="true"
+  type="text/javascript"
+></script>`}
+				/>
+			</section>
+
+			<section className="mb-8">
+				<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+						⚠️ {isZh ? '注意事项' : 'Notes'}
+					</h3>
+					<ul className="text-gray-600 dark:text-gray-300 space-y-1">
+						<li>
+							• {isZh ? '生产环境建议使用固定版本号' : 'Use fixed version number in production'}
+						</li>
+						<li>• {isZh ? '确保 HTTPS 环境下使用' : 'Ensure HTTPS environment'}</li>
+						<li>
+							•{' '}
+							{isZh
+								? '配置 CSP 策略允许脚本执行'
+								: 'Configure CSP policy to allow script execution'}
+						</li>
+					</ul>
+				</div>
+			</section>
+		</div>
+	)
+}

packages/website/src/pages/docs/integration/configuration/page.tsx

@@ -0,0 +1,138 @@
+import { useTranslation } from 'react-i18next'
+
+import CodeEditor from '@/components/CodeEditor'
+
+export default function Configuration() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '配置选项' : 'Configuration'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? 'PageAgent 的完整配置接口定义。'
+					: 'Complete configuration interface for PageAgent.'}
+			</p>
+
+			{/* LLM Configuration */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{isZh ? 'LLM 配置' : 'LLM Configuration'}</h2>
+				<p className="text-gray-600 dark:text-gray-400 mb-4">
+					{isZh
+						? '配置与大语言模型的连接参数。'
+						: 'Configure connection parameters for the language model.'}
+				</p>
+				<CodeEditor
+					className="mb-4"
+					language="typescript"
+					code={`interface LLMConfig {
+  baseURL?: string
+  apiKey?: string
+  model?: string
+  temperature?: number
+  maxRetries?: number
+
+  /**
+   * Custom fetch function for LLM API requests.
+   * Use this to customize headers, credentials, proxy, etc.
+   */
+  customFetch?: typeof globalThis.fetch
+}`}
+				/>
+			</section>
+
+			{/* Agent Configuration */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">
+					{isZh ? 'Agent 配置' : 'Agent Configuration'}
+				</h2>
+				<p className="text-gray-600 dark:text-gray-400 mb-4">
+					{isZh
+						? '配置 Agent 的行为、生命周期钩子和扩展能力。'
+						: 'Configure agent behavior, lifecycle hooks, and extension capabilities.'}
+				</p>
+				<CodeEditor
+					className="mb-4"
+					language="typescript"
+					code={`interface AgentConfig {
+  language?: 'en-US' | 'zh-CN'
+
+  /** Custom tools to extend or override built-in tools */
+  customTools?: Record<string, PageAgentTool | null>
+
+  /** Instructions to guide the agent's behavior */
+  instructions?: {
+    /** Global system-level instructions, applied to all tasks */
+    system?: string
+
+    /** Dynamic page-level instructions callback */
+    getPageInstructions?: (url: string) => string | undefined | null
+  }
+
+  // Lifecycle hooks
+  onBeforeStep?: (stepCnt: number) => Promise<void> | void
+  onAfterStep?: (stepCnt: number, history: AgentHistory[]) => Promise<void> | void
+  onBeforeTask?: () => Promise<void> | void
+  onAfterTask?: (result: ExecutionResult) => Promise<void> | void
+  onDispose?: (reason?: string) => void
+
+  /**
+   * Transform page content before sending to LLM.
+   * Use cases: inspect extraction results, modify page info, mask sensitive data.
+   */
+  transformPageContent?: (content: string) => Promise<string> | string
+
+  /** @experimental Enable JavaScript execution tool */
+  experimentalScriptExecutionTool?: boolean
+}`}
+				/>
+			</section>
+
+			{/* PageController Configuration */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">
+					{isZh ? 'PageController 配置' : 'PageController Configuration'}
+				</h2>
+				<p className="text-gray-600 dark:text-gray-400 mb-4">
+					{isZh
+						? '配置 DOM 提取、元素交互和视觉高亮的细节。'
+						: 'Configure DOM extraction, element interaction, and visual highlighting.'}
+				</p>
+				<CodeEditor
+					className="mb-4"
+					language="typescript"
+					code={`interface PageControllerConfig {
+  /** Elements to exclude from interaction */
+  interactiveBlacklist?: (Element | (() => Element))[]
+
+  /** Elements to force include for interaction */
+  interactiveWhitelist?: (Element | (() => Element))[]
+
+  /** Additional attributes to include in DOM extraction */
+  include_attributes?: string[]
+
+  /** Highlight overlay opacity (0-1) */
+  highlightOpacity?: number
+
+  /** Highlight label opacity (0-1) */
+  highlightLabelOpacity?: number
+
+  /** Viewport expansion in pixels (-1 for full page) */
+  viewportExpansion?: number
+}`}
+				/>
+			</section>
+
+			{/* Complete Type */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{isZh ? '完整类型' : 'Complete Type'}</h2>
+				<CodeEditor
+					language="typescript"
+					code={`type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig`}
+				/>
+			</section>
+		</div>
+	)
+}

packages/website/src/pages/docs/integration/security-permissions/page.tsx

@@ -0,0 +1,90 @@
+import { useTranslation } from 'react-i18next'
+
+import BetaNotice from '@/components/BetaNotice'
+
+export default function SecurityPermissions() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
+	return (
+		<div>
+			<BetaNotice />
+
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '安全与权限' : 'Security & Permissions'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? 'page-agent 提供多种安全机制，确保 AI 操作在可控范围内进行。'
+					: 'page-agent provides multiple security mechanisms to ensure AI operations stay within controlled boundaries.'}
+			</p>
+
+			<div className="space-y-6">
+				<section>
+					<h2 className="text-2xl font-bold mb-3">
+						{isZh ? '元素操作黑白名单' : 'Element Interaction Allowlist/Blocklist'}
+					</h2>
+					<div className="space-y-3">
+						<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
+								🚫 {isZh ? '操作黑名单' : 'Blocklist'}
+							</h3>
+							<p className="text-gray-600 dark:text-gray-300">
+								{isZh
+									? '禁止 AI 操作敏感元素，如删除按钮、支付按钮等。'
+									: 'Prevent AI from interacting with sensitive elements like delete buttons, payment buttons, etc.'}
+							</p>
+						</div>
+						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
+								✅ {isZh ? '操作白名单' : 'Allowlist'}
+							</h3>
+							<p className="text-gray-600 dark:text-gray-300">
+								{isZh
+									? '明确定义 AI 可以操作的元素范围。'
+									: 'Explicitly define which elements AI can interact with.'}
+							</p>
+						</div>
+					</div>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-3">
+						{isZh ? 'Instruction 安全约束' : 'Instruction Safety Constraints'}
+					</h2>
+					<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+							⚠️ {isZh ? '高危操作控制' : 'High-Risk Operation Control'}
+						</h3>
+						<p className="text-gray-600 dark:text-gray-300 mb-3">
+							{isZh
+								? '在 AI 指令中明确列举高危操作，通过两种策略进行控制：'
+								: 'Define high-risk operations in AI instructions and control them through two strategies:'}
+						</p>
+						<div className="space-y-2">
+							<div className="pl-3 border-l-2 border-red-400">
+								<p className="font-medium text-red-700 dark:text-red-300">
+									{isZh ? '完全禁止操作' : 'Completely Forbidden'}
+								</p>
+								<p className="text-sm text-gray-500 dark:text-gray-400">
+									{isZh
+										? '对极高风险操作明确禁止执行'
+										: 'Explicitly prohibit execution of extremely high-risk operations'}
+								</p>
+							</div>
+							<div className="pl-3 border-l-2 border-orange-400">
+								<p className="font-medium text-orange-700 dark:text-orange-300">
+									{isZh ? '需用户确认操作' : 'Requires User Confirmation'}
+								</p>
+								<p className="text-sm text-gray-500 dark:text-gray-400">
+									{isZh
+										? '对中等风险操作要求用户明确同意'
+										: 'Require explicit user consent for medium-risk operations'}
+								</p>
+							</div>
+						</div>
+					</div>
+				</section>
+			</div>
+		</div>
+	)
+}

packages/website/src/pages/docs/integration/third-party-agent/page.tsx

@@ -74,19 +74,6 @@ const pageAgentTool = {
 				</div>
 			</div>
 
-			<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
-			<div className="space-y-4 mb-6">
-				<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">错误处理</h3>
-					<CodeEditor code={`// @TODO`} language="javascript" />
-				</div>
-
-				<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">权限控制</h3>
-					<CodeEditor code={`// @TODO`} language="javascript" />
-				</div>
-			</div>
-
 			<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
 				<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-100 mb-2">
 					⚠️ 注意事项
@@ -97,19 +84,6 @@ const pageAgentTool = {
 					<li>• 敏感操作建议要求人工确认</li>
 				</ul>
 			</div>
-
-			<div className="bg-linear-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 p-4 rounded-lg">
-				<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">🎉 开始集成</h3>
-				<p className="mb-3 text-gray-700 dark:text-gray-300">
-					通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。
-				</p>
-				<a
-					href="/docs/integration/configuration"
-					className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
-				>
-					查看配置选项 →
-				</a>
-			</div>
 		</div>
 	)
 }

packages/website/src/pages/docs/introduction/overview/page.tsx

@@ -6,13 +6,13 @@ export default function Overview() {
 	return (
 		<article>
 			{/* 头图 */}
-			<figure className="mb-8 rounded-xl overflow-hidden">
+			{/* <figure className="mb-8 rounded-xl overflow-hidden">
 				<img
 					src="https://img.alicdn.com/imgextra/i3/O1CN014xLeic1gnF2iWdzjJ_!!6000000004186-49-tps-1280-353.webp"
 					alt="page-agent"
 					className="w-full h-64 object-cover"
 				/>
-			</figure>
+			</figure> */}
 
 			<div className="mb-8">
 				<h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1>

packages/website/src/pages/docs/introduction/quick-start/page.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
+import { CDN_CN_URL, CDN_URL } from '@/constants'
 
 export default function QuickStart() {
 	const { t } = useTranslation('docs')
@@ -23,8 +24,9 @@ export default function QuickStart() {
 						<div>
 							<p className="text-sm font-medium mb-2">{t('quick_start.step1_cdn')}</p>
 							<CodeEditor
-								code={`// 仅供测试使用
-<script src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.4/page-agent.js" crossorigin="true" type="text/javascript"></script>`}
+								code={`// CDN: \t${CDN_URL}
+// Mirror: \t${CDN_CN_URL}
+<script src="${CDN_URL}" crossorigin="true" type="text/javascript"></script>`}
 								language="html"
 							/>
 						</div>
@@ -53,7 +55,7 @@ const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm
 const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 
 const agent = new PageAgent({
-  modelName: DEMO_MODEL,
+  model: DEMO_MODEL,
   baseURL: DEMO_BASE_URL,
   apiKey: DEMO_API_KEY,
   language: 'zh-CN'

packages/website/src/router.tsx

@@ -1,23 +1,23 @@
 import { Route, Switch } from 'wouter'
 
-import DocsLayout from './components/DocsLayout'
 import Header from './components/Header'
+import HomePage from './pages/Home'
+import DocsLayout from './pages/docs/Layout'
 // Features pages
-import CustomTools from './docs/features/custom-tools/page'
-import DataMasking from './docs/features/data-masking/page'
-import KnowledgeInjection from './docs/features/knowledge-injection/page'
-import ModelIntegration from './docs/features/model-integration/page'
-import SecurityPermissions from './docs/features/security-permissions/page'
-import BestPractices from './docs/integration/best-practices/page'
+import Instructions from './pages/docs/features/custom-instructions/page'
+import CustomTools from './pages/docs/features/custom-tools/page'
+import DataMasking from './pages/docs/features/data-masking/page'
+import ModelIntegration from './pages/docs/features/model-integration/page'
 // Integration pages
-import CdnSetup from './docs/integration/cdn-setup/page'
-import Configuration from './docs/integration/configuration/page'
-import ThirdPartyAgent from './docs/integration/third-party-agent/page'
-import Limitations from './docs/introduction/limitations/page'
+import BestPractices from './pages/docs/integration/best-practices/page'
+import CdnSetup from './pages/docs/integration/cdn-setup/page'
+import Configuration from './pages/docs/integration/configuration/page'
+import SecurityPermissions from './pages/docs/integration/security-permissions/page'
+import ThirdPartyAgent from './pages/docs/integration/third-party-agent/page'
 // Introduction pages
-import Overview from './docs/introduction/overview/page'
-import QuickStart from './docs/introduction/quick-start/page'
-import HomePage from './page'
+import Limitations from './pages/docs/introduction/limitations/page'
+import Overview from './pages/docs/introduction/overview/page'
+import QuickStart from './pages/docs/introduction/quick-start/page'
 
 export default function Router() {
 	return (
@@ -53,15 +53,6 @@ export default function Router() {
 				</div>
 			</Route>
 
-			<Route path="/docs/features/security-permissions">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
-						<SecurityPermissions />
-					</DocsLayout>
-				</div>
-			</Route>
-
 			<Route path="/docs/features/custom-tools">
 				<div className="min-h-screen bg-white dark:bg-gray-900">
 					<Header />
@@ -80,11 +71,11 @@ export default function Router() {
 				</div>
 			</Route>
 
-			<Route path="/docs/features/knowledge-injection">
+			<Route path="/docs/features/custom-instructions">
 				<div className="min-h-screen bg-white dark:bg-gray-900">
 					<Header />
 					<DocsLayout>
-						<KnowledgeInjection />
+						<Instructions />
 					</DocsLayout>
 				</div>
 			</Route>
@@ -107,6 +98,15 @@ export default function Router() {
 				</div>
 			</Route>
 
+			<Route path="/docs/integration/security-permissions">
+				<div className="min-h-screen bg-white dark:bg-gray-900">
+					<Header />
+					<DocsLayout>
+						<SecurityPermissions />
+					</DocsLayout>
+				</div>
+			</Route>
+
 			<Route path="/docs/integration/configuration">
 				<div className="min-h-screen bg-white dark:bg-gray-900">
 					<Header />

packages/website/src/test-pages/README.md

@@ -1,209 +0,0 @@
-# Page Use Agent 测试页面
-
-这个目录包含了一系列专门设计的测试页面，用于验证 Page Use Agent 的各种能力。每个页面都模拟了真实 Web 应用中的常见交互模式和边界情况。
-
-## 测试页面列表
-
-### 1. 表单测试页面 (`/test-pages/form`)
-**测试目标：** 表单填写、验证和提交能力
-
-**包含功能：**
-- 各种输入类型（文本、邮箱、密码、数字、日期、电话、URL）
-- 下拉选择框和复选框
-- 实时表单验证
-- 异步提交和错误处理
-- 重置表单功能
-
-**测试任务示例：**
-- 填写完整的用户注册表单并提交
-- 故意输入错误信息触发验证错误
-- 测试密码确认功能
-- 尝试提交空表单查看错误提示
-
-### 2. 导航测试页面 (`/test-pages/navigation`)
-**测试目标：** 复杂导航和交互元素处理
-
-**包含功能：**
-- 顶部导航栏和下拉菜单
-- 面包屑导航
-- 标签页切换
-- 模态框弹窗
-- 通知系统
-- 用户菜单
-
-**测试任务示例：**
-- 点击产品下拉菜单选择不同选项
-- 切换不同的标签页查看内容
-- 打开和关闭模态框
-- 点击面包屑导航
-- 添加新通知并标记为已读
-
-### 3. 列表测试页面 (`/test-pages/list`)
-**测试目标：** 列表操作、搜索、过滤和分页
-
-**包含功能：**
-- 产品列表展示（网格和列表视图）
-- 搜索功能
-- 类别过滤
-- 排序功能
-- 分页导航
-- 加载状态和骨架屏
-
-**测试任务示例：**
-- 搜索特定产品名称
-- 按价格排序产品列表
-- 切换网格和列表视图
-- 使用分页浏览不同页面
-- 按类别过滤产品
-
-### 4. 复杂交互测试页面 (`/test-pages/complex`)
-**测试目标：** 多步骤流程和状态管理
-
-**包含功能：**
-- 购物车管理（添加、删除、修改数量）
-- 多步骤向导流程
-- 步骤验证和导航
-- 订单确认流程
-- 异步提交处理
-
-**测试任务示例：**
-- 完成完整的购买流程
-- 在向导中前进和后退
-- 修改购物车中的商品数量
-- 添加新商品到购物车
-- 提交订单并处理可能的错误
-
-### 5. 错误处理测试页面 (`/test-pages/errors`)
-**测试目标：** 错误识别和重试机制
-
-**包含功能：**
-- 网络连接错误模拟
-- 表单验证错误
-- 权限不足错误
-- 请求超时错误
-- 服务器内部错误
-- 文件上传错误处理
-
-**测试任务示例：**
-- 触发网络错误并重试
-- 提交不完整表单查看验证错误
-- 测试权限验证（用户名需为"admin"）
-- 上传超大文件触发错误
-- 处理各种错误场景的重试逻辑
-
-### 6. 异步操作测试页面 (`/test-pages/async`)
-**测试目标：** 等待和异步操作处理
-
-**包含功能：**
-- 文件上传进度条
-- 实时数据更新
-- 数据加载骨架屏
-- 长时间运行任务
-- 进度跟踪和日志显示
-
-**测试任务示例：**
-- 启动文件上传并等待完成
-- 开启实时数据更新功能
-- 加载数据并等待所有项目完成
-- 执行长时间任务并监控进度
-- 处理上传失败的重试
-
-## 测试任务集合
-
-### 基础操作测试
-1. **导航测试**
-   - 前往表单测试页面
-   - 返回测试页面首页
-   - 前往导航测试页面
-
-2. **表单填写测试**
-   - 填写用户注册表单的所有必填字段
-   - 提交表单并等待结果
-   - 重置表单并重新填写
-
-3. **搜索和过滤测试**
-   - 在列表页面搜索"Apple"
-   - 按价格降序排列产品
-   - 过滤显示"手机"类别的产品
-
-### 中级交互测试
-4. **购物流程测试**
-   - 前往复杂交互页面
-   - 添加商品到购物车
-   - 完成多步骤购买流程
-   - 填写个人信息、地址和支付信息
-   - 提交订单
-
-5. **导航和菜单测试**
-   - 点击产品下拉菜单选择"手机"
-   - 切换到"订单管理"标签页
-   - 打开模态框并关闭
-   - 添加新的面包屑导航
-
-6. **异步操作测试**
-   - 启动文件上传
-   - 开启实时数据更新
-   - 执行长时间任务并等待完成
-
-### 高级错误处理测试
-7. **错误恢复测试**
-   - 触发网络连接错误
-   - 重试失败的操作
-   - 处理表单验证错误
-   - 测试权限验证（用户名输入"admin"）
-
-8. **边界情况测试**
-   - 提交空表单查看错误
-   - 上传不支持的文件类型
-   - 在向导中跳过必填步骤
-   - 处理超时错误
-
-### 综合场景测试
-9. **完整用户流程**
-   - 浏览产品列表
-   - 搜索并过滤产品
-   - 添加产品到购物车
-   - 完成购买流程
-   - 处理可能出现的错误
-
-10. **压力和边界测试**
-    - 快速连续点击按钮
-    - 在加载过程中尝试其他操作
-    - 测试各种错误恢复场景
-    - 验证所有异步操作的完成
-
-## 使用说明
-
-### 对于 Agent 开发者
-- 每个页面都包含了详细的状态指示器和反馈信息
-- 错误信息清晰明确，便于 Agent 理解和处理
-- 异步操作都有明确的完成标志
-- 所有交互元素都有适当的可访问性标记
-
-### 对于测试人员
-- 可以按照测试任务逐一验证 Agent 的能力
-- 每个页面都是独立的，可以单独测试
-- 包含了各种真实场景的模拟
-- 错误场景是随机的，确保测试的真实性
-
-### 技术特性
-- 使用 React + TypeScript 构建
-- 响应式设计，支持不同屏幕尺寸
-- 深色模式支持
-- 无需外部依赖，完全自包含
-- 模拟真实的网络延迟和错误
-
-## 扩展建议
-
-如需添加新的测试场景，建议考虑以下方面：
-- 特定行业的业务流程
-- 更复杂的数据可视化交互
-- 多媒体内容处理
-- 实时协作功能
-- 移动端特有的交互模式
-
-每个新页面都应该：
-- 有明确的测试目标
-- 包含多种难度级别的任务
-- 提供清晰的状态反馈
-- 模拟真实的用户场景

packages/website/src/test-pages/async-test.tsx

@@ -1,543 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Link } from 'wouter'
-
-interface UploadProgress {
-	id: string
-	name: string
-	progress: number
-	status: 'uploading' | 'completed' | 'error'
-	speed: string
-	timeRemaining: string
-}
-
-interface DataItem {
-	id: number
-	title: string
-	content: string
-	timestamp: string
-	status: 'loading' | 'loaded' | 'error'
-}
-
-export default function AsyncTestPage() {
-	const [uploads, setUploads] = useState<UploadProgress[]>([])
-	const [dataItems, setDataItems] = useState<DataItem[]>([])
-	const [isLoadingData, setIsLoadingData] = useState(false)
-	const [realTimeData, setRealTimeData] = useState<string[]>([])
-	const [isRealTimeActive, setIsRealTimeActive] = useState(false)
-	const [longRunningTask, setLongRunningTask] = useState<{
-		isRunning: boolean
-		progress: number
-		currentStep: string
-		logs: string[]
-	}>({
-		isRunning: false,
-		progress: 0,
-		currentStep: '',
-		logs: [],
-	})
-
-	// 模拟实时数据更新
-	useEffect(() => {
-		let interval: NodeJS.Timeout
-		if (isRealTimeActive) {
-			interval = setInterval(() => {
-				const newData = `数据更新 ${new Date().toLocaleTimeString()}: ${Math.floor(Math.random() * 1000)}`
-				setRealTimeData((prev) => [newData, ...prev.slice(0, 9)]) // 保持最新10条
-			}, 2000)
-		}
-		return () => {
-			if (interval) clearInterval(interval)
-		}
-	}, [isRealTimeActive])
-
-	// 模拟文件上传
-	const simulateFileUpload = (fileName: string) => {
-		const uploadId = Date.now().toString()
-		const newUpload: UploadProgress = {
-			id: uploadId,
-			name: fileName,
-			progress: 0,
-			status: 'uploading',
-			speed: '0 KB/s',
-			timeRemaining: '计算中...',
-		}
-
-		setUploads((prev) => [...prev, newUpload])
-
-		// 模拟上传进度
-		const interval = setInterval(() => {
-			setUploads((prev) =>
-				prev.map((upload) => {
-					if (upload.id === uploadId) {
-						const newProgress = Math.min(upload.progress + Math.random() * 15, 100)
-						const speed = `${(Math.random() * 500 + 100).toFixed(0)} KB/s`
-						const timeRemaining =
-							newProgress >= 100 ? '完成' : `${Math.ceil((100 - newProgress) / 10)}秒`
-
-						// 模拟随机失败
-						if (newProgress > 50 && Math.random() < 0.1) {
-							clearInterval(interval)
-							return {
-								...upload,
-								status: 'error' as const,
-								speed: '0 KB/s',
-								timeRemaining: '失败',
-							}
-						}
-
-						if (newProgress >= 100) {
-							clearInterval(interval)
-							return {
-								...upload,
-								progress: 100,
-								status: 'completed' as const,
-								speed,
-								timeRemaining,
-							}
-						}
-
-						return {
-							...upload,
-							progress: newProgress,
-							speed,
-							timeRemaining,
-						}
-					}
-					return upload
-				})
-			)
-		}, 500)
-	}
-
-	// 模拟数据加载
-	const loadData = async () => {
-		setIsLoadingData(true)
-		setDataItems([])
-
-		// 创建骨架屏数据
-		const skeletonItems: DataItem[] = Array.from({ length: 6 }, (_, i) => ({
-			id: i,
-			title: '',
-			content: '',
-			timestamp: '',
-			status: 'loading',
-		}))
-		setDataItems(skeletonItems)
-
-		// 逐个加载数据项
-		for (let i = 0; i < 6; i++) {
-			await new Promise((resolve) => setTimeout(resolve, 800 + Math.random() * 1000))
-
-			setDataItems((prev) =>
-				prev.map((item) => {
-					if (item.id === i) {
-						// 模拟随机加载失败
-						if (Math.random() < 0.15) {
-							return {
-								...item,
-								status: 'error',
-								title: '加载失败',
-								content: '数据加载失败，请重试',
-							}
-						}
-
-						return {
-							...item,
-							status: 'loaded',
-							title: `数据项 ${i + 1}`,
-							content: `这是第 ${i + 1} 个数据项的内容，包含了一些示例文本用于展示加载效果。`,
-							timestamp: new Date().toLocaleString(),
-						}
-					}
-					return item
-				})
-			)
-		}
-
-		setIsLoadingData(false)
-	}
-
-	// 模拟长时间运行的任务
-	const startLongRunningTask = async () => {
-		setLongRunningTask({
-			isRunning: true,
-			progress: 0,
-			currentStep: '初始化任务...',
-			logs: ['任务开始'],
-		})
-
-		const steps = [
-			{ name: '初始化任务...', duration: 2000 },
-			{ name: '连接服务器...', duration: 1500 },
-			{ name: '验证权限...', duration: 1000 },
-			{ name: '下载数据...', duration: 3000 },
-			{ name: '处理数据...', duration: 2500 },
-			{ name: '生成报告...', duration: 2000 },
-			{ name: '保存结果...', duration: 1000 },
-			{ name: '清理资源...', duration: 500 },
-		]
-
-		for (let i = 0; i < steps.length; i++) {
-			const step = steps[i]
-
-			setLongRunningTask((prev) => ({
-				...prev,
-				currentStep: step.name,
-				logs: [...prev.logs, `开始: ${step.name}`],
-			}))
-
-			// 模拟步骤执行时间
-			const startTime = Date.now()
-			while (Date.now() - startTime < step.duration) {
-				await new Promise((resolve) => setTimeout(resolve, 100))
-				const elapsed = Date.now() - startTime
-				const stepProgress = Math.min((elapsed / step.duration) * 100, 100)
-				const totalProgress = ((i + stepProgress / 100) / steps.length) * 100
-
-				setLongRunningTask((prev) => ({
-					...prev,
-					progress: totalProgress,
-				}))
-			}
-
-			setLongRunningTask((prev) => ({
-				...prev,
-				logs: [...prev.logs, `完成: ${step.name}`],
-			}))
-
-			// 模拟随机失败
-			if (i === 3 && Math.random() < 0.2) {
-				setLongRunningTask((prev) => ({
-					...prev,
-					isRunning: false,
-					currentStep: '任务失败',
-					logs: [...prev.logs, '错误: 数据下载失败，请重试'],
-				}))
-				return
-			}
-		}
-
-		setLongRunningTask((prev) => ({
-			...prev,
-			isRunning: false,
-			progress: 100,
-			currentStep: '任务完成',
-			logs: [...prev.logs, '任务成功完成！'],
-		}))
-	}
-
-	const clearUploads = () => {
-		setUploads([])
-	}
-
-	const retryFailedUpload = (uploadId: string) => {
-		const failedUpload = uploads.find((u) => u.id === uploadId)
-		if (failedUpload) {
-			setUploads((prev) => prev.filter((u) => u.id !== uploadId))
-			simulateFileUpload(failedUpload.name)
-		}
-	}
-
-	const retryDataLoad = (itemId: number) => {
-		setDataItems((prev) =>
-			prev.map((item) => {
-				if (item.id === itemId) {
-					return { ...item, status: 'loading', title: '', content: '', timestamp: '' }
-				}
-				return item
-			})
-		)
-
-		setTimeout(() => {
-			setDataItems((prev) =>
-				prev.map((item) => {
-					if (item.id === itemId) {
-						return {
-							...item,
-							status: 'loaded',
-							title: `数据项 ${itemId + 1}`,
-							content: `这是重新加载的第 ${itemId + 1} 个数据项的内容。`,
-							timestamp: new Date().toLocaleString(),
-						}
-					}
-					return item
-				})
-			)
-		}, 1000)
-	}
-
-	return (
-		<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
-			<div className="max-w-6xl mx-auto px-4">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">异步操作测试</h1>
-					<p className="text-gray-600 dark:text-gray-300">
-						测试等待、加载状态识别和异步操作处理能力
-					</p>
-				</div>
-
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-					{/* 文件上传进度 */}
-					<div className="space-y-6">
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-							<div className="flex justify-between items-center mb-4">
-								<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-									文件上传进度
-								</h2>
-								<div className="space-x-2">
-									<button
-										type="button"
-										onClick={() => simulateFileUpload(`文件_${Date.now()}.pdf`)}
-										className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors text-sm"
-									>
-										开始上传
-									</button>
-									<button
-										type="button"
-										onClick={clearUploads}
-										className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition-colors text-sm"
-									>
-										清空列表
-									</button>
-								</div>
-							</div>
-
-							<div className="space-y-4">
-								{uploads.length === 0 ? (
-									<div className="text-center py-8 text-gray-500 dark:text-gray-400">
-										点击"开始上传"来模拟文件上传
-									</div>
-								) : (
-									uploads.map((upload) => (
-										<div
-											key={upload.id}
-											className="border border-gray-200 dark:border-gray-600 rounded-lg p-4"
-										>
-											<div className="flex justify-between items-center mb-2">
-												<span className="font-medium text-gray-900 dark:text-white">
-													{upload.name}
-												</span>
-												<span
-													className={`text-sm ${
-														upload.status === 'completed'
-															? 'text-green-600 dark:text-green-400'
-															: upload.status === 'error'
-																? 'text-red-600 dark:text-red-400'
-																: 'text-blue-600 dark:text-blue-400'
-													}`}
-												>
-													{upload.status === 'completed'
-														? '✓ 完成'
-														: upload.status === 'error'
-															? '✗ 失败'
-															: '上传中...'}
-												</span>
-											</div>
-
-											<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2">
-												<div
-													className={`h-2 rounded-full transition-all duration-300 ${
-														upload.status === 'completed'
-															? 'bg-green-500'
-															: upload.status === 'error'
-																? 'bg-red-500'
-																: 'bg-blue-500'
-													}`}
-													style={{ width: `${upload.progress}%` }}
-												/>
-											</div>
-
-											<div className="flex justify-between text-sm text-gray-600 dark:text-gray-300">
-												<span>{upload.progress.toFixed(1)}%</span>
-												<span>{upload.speed}</span>
-												<span>{upload.timeRemaining}</span>
-											</div>
-
-											{upload.status === 'error' && (
-												<button
-													type="button"
-													onClick={() => retryFailedUpload(upload.id)}
-													className="mt-2 px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm transition-colors"
-												>
-													重试上传
-												</button>
-											)}
-										</div>
-									))
-								)}
-							</div>
-						</div>
-
-						{/* 实时数据更新 */}
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-							<div className="flex justify-between items-center mb-4">
-								<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-									实时数据更新
-								</h2>
-								<button
-									type="button"
-									onClick={() => setIsRealTimeActive(!isRealTimeActive)}
-									className={`px-4 py-2 rounded-md transition-colors text-sm ${
-										isRealTimeActive
-											? 'bg-red-600 hover:bg-red-700 text-white'
-											: 'bg-green-600 hover:bg-green-700 text-white'
-									}`}
-								>
-									{isRealTimeActive ? '停止更新' : '开始更新'}
-								</button>
-							</div>
-
-							<div className="space-y-2 max-h-64 overflow-y-auto">
-								{realTimeData.length === 0 ? (
-									<div className="text-center py-8 text-gray-500 dark:text-gray-400">
-										点击"开始更新"来查看实时数据
-									</div>
-								) : (
-									realTimeData.map((data) => (
-										<div
-											key={data}
-											className={`p-3 rounded-lg border transition-all duration-300 ${
-												data === realTimeData[0]
-													? 'bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-700'
-													: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600'
-											}`}
-										>
-											<span className="text-sm text-gray-900 dark:text-white">{data}</span>
-										</div>
-									))
-								)}
-							</div>
-						</div>
-					</div>
-
-					{/* 数据加载和长时间任务 */}
-					<div className="space-y-6">
-						{/* 数据加载骨架屏 */}
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-							<div className="flex justify-between items-center mb-4">
-								<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-									数据加载测试
-								</h2>
-								<button
-									type="button"
-									onClick={loadData}
-									disabled={isLoadingData}
-									className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors text-sm"
-								>
-									{isLoadingData ? '加载中...' : '加载数据'}
-								</button>
-							</div>
-
-							<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-								{dataItems.map((item) => (
-									<div
-										key={item.id}
-										className="border border-gray-200 dark:border-gray-600 rounded-lg p-4"
-									>
-										{item.status === 'loading' ? (
-											<div className="animate-pulse">
-												<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
-												<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-full mb-1"></div>
-												<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
-											</div>
-										) : item.status === 'error' ? (
-											<div>
-												<h3 className="font-medium text-red-600 dark:text-red-400 mb-2">
-													{item.title}
-												</h3>
-												<p className="text-sm text-red-500 dark:text-red-400 mb-2">
-													{item.content}
-												</p>
-												<button
-													type="button"
-													onClick={() => retryDataLoad(item.id)}
-													className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm transition-colors"
-												>
-													重试
-												</button>
-											</div>
-										) : (
-											<div>
-												<h3 className="font-medium text-gray-900 dark:text-white mb-2">
-													{item.title}
-												</h3>
-												<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-													{item.content}
-												</p>
-												<span className="text-xs text-gray-500 dark:text-gray-400">
-													{item.timestamp}
-												</span>
-											</div>
-										)}
-									</div>
-								))}
-							</div>
-						</div>
-
-						{/* 长时间运行任务 */}
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-							<div className="flex justify-between items-center mb-4">
-								<h2 className="text-xl font-semibold text-gray-900 dark:text-white">长时间任务</h2>
-								<button
-									type="button"
-									onClick={startLongRunningTask}
-									disabled={longRunningTask.isRunning}
-									className="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400 text-white rounded-md transition-colors text-sm"
-								>
-									{longRunningTask.isRunning ? '执行中...' : '开始任务'}
-								</button>
-							</div>
-
-							{longRunningTask.progress > 0 && (
-								<div className="mb-4">
-									<div className="flex justify-between items-center mb-2">
-										<span className="text-sm font-medium text-gray-900 dark:text-white">
-											{longRunningTask.currentStep}
-										</span>
-										<span className="text-sm text-gray-600 dark:text-gray-300">
-											{longRunningTask.progress.toFixed(1)}%
-										</span>
-									</div>
-									<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-										<div
-											className="bg-purple-500 h-2 rounded-full transition-all duration-300"
-											style={{ width: `${longRunningTask.progress}%` }}
-										/>
-									</div>
-								</div>
-							)}
-
-							{longRunningTask.logs.length > 0 && (
-								<div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 max-h-48 overflow-y-auto">
-									<h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">
-										执行日志:
-									</h4>
-									<div className="space-y-1">
-										{longRunningTask.logs.map((log, logIdx) => {
-											const logKey = `${logIdx + 1}-${log.substring(0, 30)}`
-											return (
-												<div
-													key={logKey}
-													className="text-sm text-gray-600 dark:text-gray-300 font-mono"
-												>
-													{log}
-												</div>
-											)
-										})}
-									</div>
-								</div>
-							)}
-						</div>
-					</div>
-				</div>
-
-				{/* 返回链接 */}
-				<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-					<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
-						← 返回测试页面列表
-					</Link>
-				</div>
-			</div>
-		</div>
-	)
-}

packages/website/src/test-pages/complex-test.tsx

@@ -1,582 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'wouter'
-
-interface CartItem {
-	id: number
-	name: string
-	price: number
-	quantity: number
-	image: string
-}
-
-interface WizardStep {
-	id: number
-	title: string
-	description: string
-	completed: boolean
-}
-
-export default function ComplexTestPage() {
-	const [currentStep, setCurrentStep] = useState(1)
-	const [cartItems, setCartItems] = useState<CartItem[]>([
-		{
-			id: 1,
-			name: 'iPhone 15 Pro',
-			price: 7999,
-			quantity: 1,
-			image: 'https://picsum.photos/100/100?random=1',
-		},
-		{
-			id: 2,
-			name: 'MacBook Air',
-			price: 8999,
-			quantity: 1,
-			image: 'https://picsum.photos/100/100?random=2',
-		},
-	])
-	const [wizardData, setWizardData] = useState({
-		personalInfo: { name: '', email: '', phone: '' },
-		address: { street: '', city: '', zipCode: '' },
-		payment: { cardNumber: '', expiryDate: '', cvv: '' },
-	})
-	const [wizardSteps, setWizardSteps] = useState<WizardStep[]>([
-		{ id: 1, title: '个人信息', description: '填写基本信息', completed: false },
-		{ id: 2, title: '收货地址', description: '填写收货地址', completed: false },
-		{ id: 3, title: '支付方式', description: '选择支付方式', completed: false },
-		{ id: 4, title: '确认订单', description: '确认订单信息', completed: false },
-	])
-	const [showConfirmDialog, setShowConfirmDialog] = useState(false)
-	const [isProcessing, setIsProcessing] = useState(false)
-	const [orderComplete, setOrderComplete] = useState(false)
-
-	// 购物车操作
-	const updateQuantity = (id: number, newQuantity: number) => {
-		if (newQuantity <= 0) {
-			removeItem(id)
-			return
-		}
-		setCartItems((prev) =>
-			prev.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))
-		)
-	}
-
-	const removeItem = (id: number) => {
-		setCartItems((prev) => prev.filter((item) => item.id !== id))
-	}
-
-	const addItem = () => {
-		const newItem: CartItem = {
-			id: Date.now(),
-			name: `新产品 ${cartItems.length + 1}`,
-			price: Math.floor(Math.random() * 5000) + 1000,
-			quantity: 1,
-			image: `https://picsum.photos/100/100?random=${Date.now()}`,
-		}
-		setCartItems((prev) => [...prev, newItem])
-	}
-
-	const getTotalPrice = () => {
-		return cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
-	}
-
-	// 向导步骤验证
-	const validateStep = (step: number): boolean => {
-		switch (step) {
-			case 1:
-				return !!(
-					wizardData.personalInfo.name &&
-					wizardData.personalInfo.email &&
-					wizardData.personalInfo.phone
-				)
-			case 2:
-				return !!(
-					wizardData.address.street &&
-					wizardData.address.city &&
-					wizardData.address.zipCode
-				)
-			case 3:
-				return !!(
-					wizardData.payment.cardNumber &&
-					wizardData.payment.expiryDate &&
-					wizardData.payment.cvv
-				)
-			default:
-				return true
-		}
-	}
-
-	const goToStep = (step: number) => {
-		// 验证当前步骤
-		if (step > currentStep && !validateStep(currentStep)) {
-			alert('请完成当前步骤的必填信息')
-			return
-		}
-
-		// 更新步骤完成状态
-		if (step > currentStep) {
-			setWizardSteps((prev) =>
-				prev.map((s) => (s.id === currentStep ? { ...s, completed: true } : s))
-			)
-		}
-
-		setCurrentStep(step)
-	}
-
-	const handleInputChange = (section: string, field: string, value: string) => {
-		setWizardData((prev) => ({
-			...prev,
-			[section]: {
-				...prev[section as keyof typeof prev],
-				[field]: value,
-			},
-		}))
-	}
-
-	const handleSubmitOrder = async () => {
-		setIsProcessing(true)
-
-		// 模拟处理时间
-		await new Promise((resolve) => setTimeout(resolve, 3000))
-
-		// 模拟随机失败
-		if (Math.random() < 0.2) {
-			setIsProcessing(false)
-			alert('订单提交失败，请重试')
-			return
-		}
-
-		setIsProcessing(false)
-		setOrderComplete(true)
-		setShowConfirmDialog(false)
-	}
-
-	const resetWizard = () => {
-		setCurrentStep(1)
-		setWizardData({
-			personalInfo: { name: '', email: '', phone: '' },
-			address: { street: '', city: '', zipCode: '' },
-			payment: { cardNumber: '', expiryDate: '', cvv: '' },
-		})
-		setWizardSteps((prev) => prev.map((s) => ({ ...s, completed: false })))
-		setOrderComplete(false)
-		setShowConfirmDialog(false)
-	}
-
-	if (orderComplete) {
-		return (
-			<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
-				<div className="max-w-md mx-auto text-center">
-					<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
-						<div className="text-6xl mb-4">🎉</div>
-						<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-							订单提交成功！
-						</h2>
-						<p className="text-gray-600 dark:text-gray-300 mb-6">
-							您的订单已成功提交，我们将尽快为您处理。
-						</p>
-						<div className="space-y-3">
-							<button
-								type="button"
-								onClick={resetWizard}
-								className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors"
-							>
-								重新开始
-							</button>
-							<Link
-								href="/test-pages"
-								className="block w-full bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-md transition-colors text-center"
-							>
-								返回测试页面
-							</Link>
-						</div>
-					</div>
-				</div>
-			</div>
-		)
-	}
-
-	return (
-		<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
-			<div className="max-w-6xl mx-auto px-4">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">复杂交互测试</h1>
-					<p className="text-gray-600 dark:text-gray-300">测试多步骤操作、状态管理和复杂用户交互</p>
-				</div>
-
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-					{/* 购物车区域 */}
-					<div className="lg:col-span-1">
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 sticky top-8">
-							<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-								购物车 ({cartItems.length})
-							</h3>
-
-							<div className="space-y-4 mb-6">
-								{cartItems.map((item) => (
-									<div
-										key={item.id}
-										className="flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-600 rounded-lg"
-									>
-										<img
-											src={item.image}
-											alt={item.name}
-											className="w-12 h-12 object-cover rounded"
-										/>
-										<div className="flex-1 min-w-0">
-											<h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
-												{item.name}
-											</h4>
-											<p className="text-sm text-gray-500 dark:text-gray-400">
-												¥{item.price.toLocaleString()}
-											</p>
-										</div>
-										<div className="flex items-center space-x-2">
-											<button
-												onClick={() => updateQuantity(item.id, item.quantity - 1)}
-												className="w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-500"
-											>
-												-
-											</button>
-											<span className="text-sm font-medium w-8 text-center">{item.quantity}</span>
-											<button
-												onClick={() => updateQuantity(item.id, item.quantity + 1)}
-												className="w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-500"
-											>
-												+
-											</button>
-											<button
-												onClick={() => removeItem(item.id)}
-												className="w-6 h-6 flex items-center justify-center bg-red-500 text-white rounded text-sm hover:bg-red-600"
-											>
-												×
-											</button>
-										</div>
-									</div>
-								))}
-							</div>
-
-							<button
-								onClick={addItem}
-								className="w-full mb-4 py-2 px-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-gray-500 dark:text-gray-400 hover:border-blue-500 hover:text-blue-500 transition-colors"
-							>
-								+ 添加商品
-							</button>
-
-							<div className="border-t border-gray-200 dark:border-gray-600 pt-4">
-								<div className="flex justify-between items-center text-lg font-semibold text-gray-900 dark:text-white">
-									<span>总计:</span>
-									<span>¥{getTotalPrice().toLocaleString()}</span>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					{/* 向导区域 */}
-					<div className="lg:col-span-2">
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
-							{/* 步骤指示器 */}
-							<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-600">
-								<div className="flex items-center justify-between">
-									{wizardSteps.map((step, index) => (
-										<div key={step.id} className="flex items-center">
-											<button
-												onClick={() => goToStep(step.id)}
-												className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
-													step.completed
-														? 'bg-green-500 text-white'
-														: step.id === currentStep
-															? 'bg-blue-500 text-white'
-															: 'bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-400'
-												}`}
-											>
-												{step.completed ? '✓' : step.id}
-											</button>
-											{index < wizardSteps.length - 1 && (
-												<div
-													className={`w-16 h-1 mx-2 ${
-														step.completed ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-600'
-													}`}
-												/>
-											)}
-										</div>
-									))}
-								</div>
-								<div className="mt-4">
-									<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-										{wizardSteps[currentStep - 1].title}
-									</h3>
-									<p className="text-gray-600 dark:text-gray-300">
-										{wizardSteps[currentStep - 1].description}
-									</p>
-								</div>
-							</div>
-
-							{/* 步骤内容 */}
-							<div className="p-6">
-								{currentStep === 1 && (
-									<div className="space-y-4">
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												姓名 *
-											</label>
-											<input
-												type="text"
-												value={wizardData.personalInfo.name}
-												onChange={(e) => handleInputChange('personalInfo', 'name', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入您的姓名"
-											/>
-										</div>
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												邮箱 *
-											</label>
-											<input
-												type="email"
-												value={wizardData.personalInfo.email}
-												onChange={(e) => handleInputChange('personalInfo', 'email', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入您的邮箱"
-											/>
-										</div>
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												手机号 *
-											</label>
-											<input
-												type="tel"
-												value={wizardData.personalInfo.phone}
-												onChange={(e) => handleInputChange('personalInfo', 'phone', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入您的手机号"
-											/>
-										</div>
-									</div>
-								)}
-
-								{currentStep === 2 && (
-									<div className="space-y-4">
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												详细地址 *
-											</label>
-											<input
-												type="text"
-												value={wizardData.address.street}
-												onChange={(e) => handleInputChange('address', 'street', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入详细地址"
-											/>
-										</div>
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												城市 *
-											</label>
-											<input
-												type="text"
-												value={wizardData.address.city}
-												onChange={(e) => handleInputChange('address', 'city', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入城市"
-											/>
-										</div>
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												邮政编码 *
-											</label>
-											<input
-												type="text"
-												value={wizardData.address.zipCode}
-												onChange={(e) => handleInputChange('address', 'zipCode', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入邮政编码"
-											/>
-										</div>
-									</div>
-								)}
-
-								{currentStep === 3 && (
-									<div className="space-y-4">
-										<div>
-											<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-												银行卡号 *
-											</label>
-											<input
-												type="text"
-												value={wizardData.payment.cardNumber}
-												onChange={(e) => handleInputChange('payment', 'cardNumber', e.target.value)}
-												className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-												placeholder="请输入银行卡号"
-											/>
-										</div>
-										<div className="grid grid-cols-2 gap-4">
-											<div>
-												<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-													有效期 *
-												</label>
-												<input
-													type="text"
-													value={wizardData.payment.expiryDate}
-													onChange={(e) =>
-														handleInputChange('payment', 'expiryDate', e.target.value)
-													}
-													className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-													placeholder="MM/YY"
-												/>
-											</div>
-											<div>
-												<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-													CVV *
-												</label>
-												<input
-													type="text"
-													value={wizardData.payment.cvv}
-													onChange={(e) => handleInputChange('payment', 'cvv', e.target.value)}
-													className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-													placeholder="CVV"
-												/>
-											</div>
-										</div>
-									</div>
-								)}
-
-								{currentStep === 4 && (
-									<div className="space-y-6">
-										<div>
-											<h4 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
-												订单确认
-											</h4>
-
-											<div className="space-y-4">
-												<div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-													<h5 className="font-medium text-gray-900 dark:text-white mb-2">
-														个人信息
-													</h5>
-													<p className="text-sm text-gray-600 dark:text-gray-300">
-														{wizardData.personalInfo.name} | {wizardData.personalInfo.email} |{' '}
-														{wizardData.personalInfo.phone}
-													</p>
-												</div>
-
-												<div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-													<h5 className="font-medium text-gray-900 dark:text-white mb-2">
-														收货地址
-													</h5>
-													<p className="text-sm text-gray-600 dark:text-gray-300">
-														{wizardData.address.street}, {wizardData.address.city}{' '}
-														{wizardData.address.zipCode}
-													</p>
-												</div>
-
-												<div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-													<h5 className="font-medium text-gray-900 dark:text-white mb-2">
-														支付方式
-													</h5>
-													<p className="text-sm text-gray-600 dark:text-gray-300">
-														**** **** **** {wizardData.payment.cardNumber.slice(-4)}
-													</p>
-												</div>
-											</div>
-										</div>
-									</div>
-								)}
-							</div>
-
-							{/* 导航按钮 */}
-							<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-600 flex justify-between">
-								<button
-									onClick={() => goToStep(currentStep - 1)}
-									disabled={currentStep === 1}
-									className="px-4 py-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-								>
-									上一步
-								</button>
-
-								{currentStep < 4 ? (
-									<button
-										onClick={() => goToStep(currentStep + 1)}
-										disabled={!validateStep(currentStep)}
-										className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors"
-									>
-										下一步
-									</button>
-								) : (
-									<button
-										onClick={() => setShowConfirmDialog(true)}
-										disabled={cartItems.length === 0}
-										className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white rounded-md transition-colors"
-									>
-										提交订单
-									</button>
-								)}
-							</div>
-						</div>
-					</div>
-				</div>
-
-				{/* 确认对话框 */}
-				{showConfirmDialog && (
-					<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-						<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
-							<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
-								确认提交订单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300 mb-6">
-								您确定要提交这个订单吗？订单总金额为 ¥{getTotalPrice().toLocaleString()}
-							</p>
-							<div className="flex justify-end space-x-3">
-								<button
-									onClick={() => setShowConfirmDialog(false)}
-									disabled={isProcessing}
-									className="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors"
-								>
-									取消
-								</button>
-								<button
-									onClick={handleSubmitOrder}
-									disabled={isProcessing}
-									className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors flex items-center"
-								>
-									{isProcessing ? (
-										<>
-											<svg
-												className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-											>
-												<circle
-													className="opacity-25"
-													cx="12"
-													cy="12"
-													r="10"
-													stroke="currentColor"
-													strokeWidth="4"
-												></circle>
-												<path
-													className="opacity-75"
-													fill="currentColor"
-													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-												></path>
-											</svg>
-											处理中...
-										</>
-									) : (
-										'确认提交'
-									)}
-								</button>
-							</div>
-						</div>
-					</div>
-				)}
-
-				{/* 返回链接 */}
-				<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-					<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
-						← 返回测试页面列表
-					</Link>
-				</div>
-			</div>
-		</div>
-	)
-}

packages/website/src/test-pages/error-test.tsx

@@ -1,464 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'wouter'
-
-interface ErrorScenario {
-	id: string
-	title: string
-	description: string
-	type: 'network' | 'validation' | 'permission' | 'timeout' | 'server'
-}
-
-export default function ErrorTestPage() {
-	const [isLoading, setIsLoading] = useState(false)
-	const [error, setError] = useState<string | null>(null)
-	const [success, setSuccess] = useState<string | null>(null)
-	const [retryCount, setRetryCount] = useState(0)
-	const [formData, setFormData] = useState({
-		username: '',
-		password: '',
-		email: '',
-		file: null as File | null,
-	})
-
-	const errorScenarios: ErrorScenario[] = [
-		{
-			id: 'network-error',
-			title: '网络连接错误',
-			description: '模拟网络连接失败，测试重试机制',
-			type: 'network',
-		},
-		{
-			id: 'validation-error',
-			title: '表单验证错误',
-			description: '模拟表单验证失败，测试错误提示',
-			type: 'validation',
-		},
-		{
-			id: 'permission-error',
-			title: '权限不足错误',
-			description: '模拟权限验证失败，测试权限处理',
-			type: 'permission',
-		},
-		{
-			id: 'timeout-error',
-			title: '请求超时错误',
-			description: '模拟请求超时，测试超时处理',
-			type: 'timeout',
-		},
-		{
-			id: 'server-error',
-			title: '服务器内部错误',
-			description: '模拟服务器500错误，测试错误恢复',
-			type: 'server',
-		},
-	]
-
-	const simulateError = async (scenario: ErrorScenario): Promise<void> => {
-		setIsLoading(true)
-		setError(null)
-		setSuccess(null)
-
-		// 模拟网络延迟
-		await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 2000))
-
-		switch (scenario.type) {
-			case 'network':
-				// 70% 概率失败
-				if (Math.random() < 0.7) {
-					throw new Error('网络连接失败：无法连接到服务器，请检查您的网络连接')
-				}
-				break
-
-			case 'validation':
-				// 检查表单数据
-				if (!formData.username || formData.username.length < 3) {
-					throw new Error('用户名验证失败：用户名至少需要3个字符')
-				}
-				if (!formData.password || formData.password.length < 6) {
-					throw new Error('密码验证失败：密码至少需要6个字符')
-				}
-				if (!formData.email?.includes('@')) {
-					throw new Error('邮箱验证失败：请输入有效的邮箱地址')
-				}
-				break
-
-			case 'permission':
-				// 模拟权限检查
-				if (formData.username !== 'admin') {
-					throw new Error('权限不足：您没有执行此操作的权限，请联系管理员')
-				}
-				break
-
-			case 'timeout':
-				// 模拟超时
-				await new Promise((resolve) => setTimeout(resolve, 8000))
-				throw new Error('请求超时：服务器响应时间过长，请稍后重试')
-
-			case 'server':
-				// 50% 概率服务器错误
-				if (Math.random() < 0.5) {
-					throw new Error('服务器内部错误：服务器遇到了一个错误，请稍后重试')
-				}
-				break
-
-			default:
-				throw new Error('未知错误：发生了未预期的错误')
-		}
-
-		// 成功情况
-		return Promise.resolve()
-	}
-
-	const handleScenarioTest = async (scenario: ErrorScenario) => {
-		try {
-			await simulateError(scenario)
-			setSuccess(`${scenario.title} 测试成功完成！`)
-			setRetryCount(0)
-		} catch (err) {
-			const errorMessage = err instanceof Error ? err.message : '未知错误'
-			setError(errorMessage)
-			setRetryCount((prev) => prev + 1)
-		} finally {
-			setIsLoading(false)
-		}
-	}
-
-	const handleRetry = async (scenario: ErrorScenario) => {
-		if (retryCount >= 3) {
-			setError('重试次数已达上限，请稍后再试或联系技术支持')
-			return
-		}
-		await handleScenarioTest(scenario)
-	}
-
-	const handleFileUpload = async () => {
-		if (!formData.file) {
-			setError('请选择要上传的文件')
-			return
-		}
-
-		setIsLoading(true)
-		setError(null)
-		setSuccess(null)
-
-		try {
-			// 模拟文件大小检查
-			if (formData.file.size > 5 * 1024 * 1024) {
-				throw new Error('文件上传失败：文件大小不能超过5MB')
-			}
-
-			// 模拟文件类型检查
-			const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf']
-			if (!allowedTypes.includes(formData.file.type)) {
-				throw new Error('文件上传失败：不支持的文件类型，请上传图片或PDF文件')
-			}
-
-			// 模拟上传过程
-			await new Promise((resolve) => setTimeout(resolve, 2000))
-
-			// 模拟随机失败
-			if (Math.random() < 0.3) {
-				throw new Error('文件上传失败：上传过程中发生错误，请重试')
-			}
-
-			setSuccess('文件上传成功！')
-		} catch (err) {
-			const errorMessage = err instanceof Error ? err.message : '文件上传失败'
-			setError(errorMessage)
-		} finally {
-			setIsLoading(false)
-		}
-	}
-
-	const clearMessages = () => {
-		setError(null)
-		setSuccess(null)
-		setRetryCount(0)
-	}
-
-	const getErrorIcon = (type: string) => {
-		switch (type) {
-			case 'network':
-				return '🌐'
-			case 'validation':
-				return '⚠️'
-			case 'permission':
-				return '🔒'
-			case 'timeout':
-				return '⏰'
-			case 'server':
-				return '🔧'
-			default:
-				return '❌'
-		}
-	}
-
-	return (
-		<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
-			<div className="max-w-4xl mx-auto px-4">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">错误处理测试</h1>
-					<p className="text-gray-600 dark:text-gray-300">
-						测试各种错误场景和重试机制，验证 Agent 的错误处理能力
-					</p>
-				</div>
-
-				{/* 全局消息显示 */}
-				{(error || success) && (
-					<div className="mb-8">
-						{error && (
-							<div className="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-lg p-4 mb-4">
-								<div className="flex items-start">
-									<div className="shrink-0">
-										<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-											<path
-												fillRule="evenodd"
-												d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-												clipRule="evenodd"
-											/>
-										</svg>
-									</div>
-									<div className="ml-3 flex-1">
-										<h3 className="text-sm font-medium text-red-800 dark:text-red-200">操作失败</h3>
-										<p className="mt-1 text-sm text-red-700 dark:text-red-300">{error}</p>
-										{retryCount > 0 && (
-											<p className="mt-2 text-xs text-red-600 dark:text-red-400">
-												已重试 {retryCount} 次 {retryCount >= 3 && '(已达最大重试次数)'}
-											</p>
-										)}
-									</div>
-									<button
-										onClick={clearMessages}
-										className="ml-3 text-red-400 hover:text-red-600 dark:hover:text-red-300"
-									>
-										<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-											<path
-												fillRule="evenodd"
-												d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-												clipRule="evenodd"
-											/>
-										</svg>
-									</button>
-								</div>
-							</div>
-						)}
-
-						{success && (
-							<div className="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-lg p-4 mb-4">
-								<div className="flex items-start">
-									<div className="shrink-0">
-										<svg className="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
-											<path
-												fillRule="evenodd"
-												d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-												clipRule="evenodd"
-											/>
-										</svg>
-									</div>
-									<div className="ml-3 flex-1">
-										<h3 className="text-sm font-medium text-green-800 dark:text-green-200">
-											操作成功
-										</h3>
-										<p className="mt-1 text-sm text-green-700 dark:text-green-300">{success}</p>
-									</div>
-									<button
-										onClick={clearMessages}
-										className="ml-3 text-green-400 hover:text-green-600 dark:hover:text-green-300"
-									>
-										<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-											<path
-												fillRule="evenodd"
-												d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-												clipRule="evenodd"
-											/>
-										</svg>
-									</button>
-								</div>
-							</div>
-						)}
-					</div>
-				)}
-
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-					{/* 错误场景测试 */}
-					<div className="space-y-6">
-						<h2 className="text-xl font-semibold text-gray-900 dark:text-white">错误场景测试</h2>
-
-						{errorScenarios.map((scenario) => (
-							<div key={scenario.id} className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-								<div className="flex items-start space-x-4">
-									<div className="text-3xl">{getErrorIcon(scenario.type)}</div>
-									<div className="flex-1">
-										<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-											{scenario.title}
-										</h3>
-										<p className="text-gray-600 dark:text-gray-300 text-sm mb-4">
-											{scenario.description}
-										</p>
-										<div className="flex space-x-3">
-											<button
-												onClick={() => handleScenarioTest(scenario)}
-												disabled={isLoading}
-												className="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white rounded-md transition-colors text-sm"
-											>
-												{isLoading ? '测试中...' : '触发错误'}
-											</button>
-											{error && retryCount > 0 && retryCount < 3 && (
-												<button
-													onClick={() => handleRetry(scenario)}
-													disabled={isLoading}
-													className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors text-sm"
-												>
-													重试 ({retryCount}/3)
-												</button>
-											)}
-										</div>
-									</div>
-								</div>
-							</div>
-						))}
-					</div>
-
-					{/* 表单验证测试 */}
-					<div className="space-y-6">
-						<h2 className="text-xl font-semibold text-gray-900 dark:text-white">表单验证测试</h2>
-
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-							<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
-								用户信息表单
-							</h3>
-							<div className="space-y-4">
-								<div>
-									<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-										用户名 (至少3个字符)
-									</label>
-									<input
-										type="text"
-										value={formData.username}
-										onChange={(e) => setFormData((prev) => ({ ...prev, username: e.target.value }))}
-										className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-										placeholder="请输入用户名"
-									/>
-								</div>
-								<div>
-									<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-										密码 (至少6个字符)
-									</label>
-									<input
-										type="password"
-										value={formData.password}
-										onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
-										className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-										placeholder="请输入密码"
-									/>
-								</div>
-								<div>
-									<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-										邮箱地址
-									</label>
-									<input
-										type="email"
-										value={formData.email}
-										onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
-										className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-										placeholder="请输入邮箱地址"
-									/>
-								</div>
-								<button
-									onClick={() =>
-										handleScenarioTest(errorScenarios.find((s) => s.type === 'validation')!)
-									}
-									disabled={isLoading}
-									className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md transition-colors"
-								>
-									{isLoading ? '验证中...' : '提交表单'}
-								</button>
-							</div>
-						</div>
-
-						{/* 文件上传测试 */}
-						<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-							<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
-								文件上传测试
-							</h3>
-							<div className="space-y-4">
-								<div>
-									<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-										选择文件 (最大5MB，支持图片和PDF)
-									</label>
-									<input
-										type="file"
-										onChange={(e) =>
-											setFormData((prev) => ({ ...prev, file: e.target.files?.[0] || null }))
-										}
-										accept="image/*,.pdf"
-										className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-									/>
-								</div>
-								{formData.file && (
-									<div className="text-sm text-gray-600 dark:text-gray-300">
-										已选择: {formData.file.name} ({(formData.file.size / 1024 / 1024).toFixed(2)}{' '}
-										MB)
-									</div>
-								)}
-								<button
-									onClick={handleFileUpload}
-									disabled={isLoading || !formData.file}
-									className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white rounded-md transition-colors"
-								>
-									{isLoading ? '上传中...' : '上传文件'}
-								</button>
-							</div>
-						</div>
-
-						{/* 权限测试说明 */}
-						<div className="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4">
-							<h4 className="text-sm font-medium text-yellow-800 dark:text-yellow-200 mb-2">
-								💡 权限测试提示
-							</h4>
-							<p className="text-sm text-yellow-700 dark:text-yellow-300">
-								要通过权限测试，请在用户名字段输入 "admin"，然后点击"触发错误"按钮测试权限验证。
-							</p>
-						</div>
-					</div>
-				</div>
-
-				{/* 加载状态指示器 */}
-				{isLoading && (
-					<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-						<div className="bg-white dark:bg-gray-800 rounded-lg p-6 flex items-center space-x-4">
-							<svg
-								className="animate-spin h-8 w-8 text-blue-600"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-							>
-								<circle
-									className="opacity-25"
-									cx="12"
-									cy="12"
-									r="10"
-									stroke="currentColor"
-									strokeWidth="4"
-								></circle>
-								<path
-									className="opacity-75"
-									fill="currentColor"
-									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-								></path>
-							</svg>
-							<span className="text-gray-900 dark:text-white">处理中，请稍候...</span>
-						</div>
-					</div>
-				)}
-
-				{/* 返回链接 */}
-				<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-					<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
-						← 返回测试页面列表
-					</Link>
-				</div>
-			</div>
-		</div>
-	)
-}

packages/website/src/test-pages/form-test.tsx

@@ -1,488 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'wouter'
-
-interface FormData {
-	username: string
-	email: string
-	password: string
-	confirmPassword: string
-	age: string
-	birthDate: string
-	phone: string
-	website: string
-	bio: string
-	country: string
-	newsletter: boolean
-	terms: boolean
-}
-
-type FormErrors = Record<string, string>
-
-export default function FormTestPage() {
-	const [formData, setFormData] = useState<FormData>({
-		username: '',
-		email: '',
-		password: '',
-		confirmPassword: '',
-		age: '',
-		birthDate: '',
-		phone: '',
-		website: '',
-		bio: '',
-		country: '',
-		newsletter: false,
-		terms: false,
-	})
-
-	const [errors, setErrors] = useState<FormErrors>({})
-	const [isSubmitting, setIsSubmitting] = useState(false)
-	const [submitResult, setSubmitResult] = useState<'success' | 'error' | null>(null)
-	const [submitMessage, setSubmitMessage] = useState('')
-
-	const validateField = (name: string, value: string | boolean): string => {
-		switch (name) {
-			case 'username':
-				if (!value) return '用户名不能为空'
-				if (typeof value === 'string' && value.length < 3) return '用户名至少需要3个字符'
-				if (typeof value === 'string' && !/^[a-zA-Z0-9_]+$/.test(value))
-					return '用户名只能包含字母、数字和下划线'
-				return ''
-			case 'email':
-				if (!value) return '邮箱不能为空'
-				if (typeof value === 'string' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-					return '请输入有效的邮箱地址'
-				return ''
-			case 'password':
-				if (!value) return '密码不能为空'
-				if (typeof value === 'string' && value.length < 6) return '密码至少需要6个字符'
-				if (typeof value === 'string' && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value))
-					return '密码必须包含大小写字母和数字'
-				return ''
-			case 'confirmPassword':
-				if (!value) return '请确认密码'
-				if (value !== formData.password) return '两次输入的密码不一致'
-				return ''
-			case 'age': {
-				if (!value) return '年龄不能为空'
-				const age = parseInt(value as string)
-				if (isNaN(age) || age < 18 || age > 120) return '年龄必须在18-120之间'
-				return ''
-			}
-			case 'phone':
-				if (!value) return '手机号不能为空'
-				if (typeof value === 'string' && !/^1[3-9]\d{9}$/.test(value)) return '请输入有效的手机号'
-				return ''
-			case 'terms':
-				if (!value) return '请同意服务条款'
-				return ''
-			default:
-				return ''
-		}
-	}
-
-	const handleInputChange = (name: string, value: string | boolean) => {
-		console.log(`Input changed: ${name} = ${value}`)
-
-		setFormData((prev) => ({ ...prev, [name]: value }))
-
-		// 实时验证
-		const error = validateField(name, value)
-		setErrors((prev) => ({ ...prev, [name]: error }))
-	}
-
-	const validateForm = (): boolean => {
-		const newErrors: FormErrors = {}
-		let isValid = true
-
-		Object.keys(formData).forEach((key) => {
-			const error = validateField(key, formData[key as keyof FormData])
-			if (error) {
-				newErrors[key] = error
-				isValid = false
-			}
-		})
-
-		setErrors(newErrors)
-		return isValid
-	}
-
-	const simulateSubmit = async (): Promise<{ success: boolean; message: string }> => {
-		// 模拟网络延迟
-		await new Promise((resolve) => setTimeout(resolve, 2000 + Math.random() * 2000))
-
-		// 模拟随机失败
-		if (Math.random() < 0.3) {
-			throw new Error('网络错误：服务器暂时不可用，请稍后重试')
-		}
-
-		// 模拟服务器验证错误
-		if (formData.username.toLowerCase() === 'admin') {
-			throw new Error('用户名 "admin" 已被占用，请选择其他用户名')
-		}
-
-		return {
-			success: true,
-			message: '注册成功！欢迎加入我们的平台。',
-		}
-	}
-
-	const handleSubmit = async (e: React.FormEvent) => {
-		e.preventDefault()
-
-		if (!validateForm()) {
-			setSubmitResult('error')
-			setSubmitMessage('请修正表单中的错误')
-			return
-		}
-
-		setIsSubmitting(true)
-		setSubmitResult(null)
-		setSubmitMessage('')
-
-		try {
-			const result = await simulateSubmit()
-			setSubmitResult('success')
-			setSubmitMessage(result.message)
-		} catch (error) {
-			setSubmitResult('error')
-			setSubmitMessage(error instanceof Error ? error.message : '提交失败，请重试')
-		} finally {
-			setIsSubmitting(false)
-		}
-	}
-
-	const resetForm = () => {
-		setFormData({
-			username: '',
-			email: '',
-			password: '',
-			confirmPassword: '',
-			age: '',
-			birthDate: '',
-			phone: '',
-			website: '',
-			bio: '',
-			country: '',
-			newsletter: false,
-			terms: false,
-		})
-		setErrors({})
-		setSubmitResult(null)
-		setSubmitMessage('')
-	}
-
-	return (
-		<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
-			<div className="max-w-2xl mx-auto px-4">
-				<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
-					<div className="mb-8">
-						<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">用户注册表单</h1>
-						<p className="text-gray-600 dark:text-gray-300">测试各种表单输入、验证和提交功能</p>
-					</div>
-
-					<form onSubmit={handleSubmit} className="space-y-6">
-						{/* 用户名 */}
-						<div>
-							<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								用户名 *
-							</label>
-							<input
-								type="text"
-								value={formData.username}
-								onChange={(e) => handleInputChange('username', e.target.value)}
-								className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
-									errors.username ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
-								}`}
-								placeholder="请输入用户名"
-							/>
-							{errors.username && (
-								<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.username}</p>
-							)}
-						</div>
-
-						{/* 邮箱 */}
-						<div>
-							<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								邮箱地址 *
-							</label>
-							<input
-								type="email"
-								value={formData.email}
-								onChange={(e) => handleInputChange('email', e.target.value)}
-								className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
-									errors.email ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
-								}`}
-								placeholder="请输入邮箱地址"
-							/>
-							{errors.email && (
-								<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.email}</p>
-							)}
-						</div>
-
-						{/* 密码 */}
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-							<div>
-								<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-									密码 *
-								</label>
-								<input
-									type="password"
-									value={formData.password}
-									onChange={(e) => handleInputChange('password', e.target.value)}
-									className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
-										errors.password ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
-									}`}
-									placeholder="请输入密码"
-								/>
-								{errors.password && (
-									<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.password}</p>
-								)}
-							</div>
-							<div>
-								<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-									确认密码 *
-								</label>
-								<input
-									type="password"
-									value={formData.confirmPassword}
-									onChange={(e) => handleInputChange('confirmPassword', e.target.value)}
-									className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
-										errors.confirmPassword
-											? 'border-red-500'
-											: 'border-gray-300 dark:border-gray-600'
-									}`}
-									placeholder="请再次输入密码"
-								/>
-								{errors.confirmPassword && (
-									<p className="mt-1 text-sm text-red-600 dark:text-red-400">
-										{errors.confirmPassword}
-									</p>
-								)}
-							</div>
-						</div>
-
-						{/* 年龄和生日 */}
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-							<div>
-								<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-									年龄 *
-								</label>
-								<input
-									type="number"
-									value={formData.age}
-									onChange={(e) => handleInputChange('age', e.target.value)}
-									className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
-										errors.age ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
-									}`}
-									placeholder="请输入年龄"
-									min="18"
-									max="120"
-								/>
-								{errors.age && (
-									<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.age}</p>
-								)}
-							</div>
-							<div>
-								<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-									出生日期
-								</label>
-								<input
-									type="date"
-									value={formData.birthDate}
-									onChange={(e) => handleInputChange('birthDate', e.target.value)}
-									className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-								/>
-							</div>
-						</div>
-
-						{/* 手机和网站 */}
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-							<div>
-								<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-									手机号 *
-								</label>
-								<input
-									type="tel"
-									value={formData.phone}
-									onChange={(e) => handleInputChange('phone', e.target.value)}
-									className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
-										errors.phone ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
-									}`}
-									placeholder="请输入手机号"
-								/>
-								{errors.phone && (
-									<p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.phone}</p>
-								)}
-							</div>
-							<div>
-								<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-									个人网站
-								</label>
-								<input
-									type="url"
-									value={formData.website}
-									onChange={(e) => handleInputChange('website', e.target.value)}
-									className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-									placeholder="https://example.com"
-								/>
-							</div>
-						</div>
-
-						{/* 国家选择 */}
-						<div>
-							<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								国家/地区
-							</label>
-							<select
-								value={formData.country}
-								onChange={(e) => handleInputChange('country', e.target.value)}
-								className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-							>
-								<option value="">请选择国家/地区</option>
-								<option value="CN">中国</option>
-								<option value="US">美国</option>
-								<option value="JP">日本</option>
-								<option value="KR">韩国</option>
-								<option value="GB">英国</option>
-								<option value="DE">德国</option>
-								<option value="FR">法国</option>
-								<option value="CA">加拿大</option>
-								<option value="AU">澳大利亚</option>
-							</select>
-						</div>
-
-						{/* 个人简介 */}
-						<div>
-							<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								个人简介
-							</label>
-							<textarea
-								value={formData.bio}
-								onChange={(e) => handleInputChange('bio', e.target.value)}
-								rows={4}
-								className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-								placeholder="请简单介绍一下自己..."
-							/>
-						</div>
-
-						{/* 复选框 */}
-						<div className="space-y-3">
-							<div className="flex items-center">
-								<input
-									type="checkbox"
-									id="newsletter"
-									checked={formData.newsletter}
-									onChange={(e) => handleInputChange('newsletter', e.target.checked)}
-									className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-								/>
-								<label
-									htmlFor="newsletter"
-									className="ml-2 block text-sm text-gray-700 dark:text-gray-300"
-								>
-									订阅我们的新闻通讯
-								</label>
-							</div>
-							<div className="flex items-center">
-								<input
-									type="checkbox"
-									id="terms"
-									checked={formData.terms}
-									onChange={(e) => handleInputChange('terms', e.target.checked)}
-									className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-								/>
-								<label
-									htmlFor="terms"
-									className="ml-2 block text-sm text-gray-700 dark:text-gray-300"
-								>
-									我同意{' '}
-									<a href="#" className="text-blue-600 hover:text-blue-500">
-										服务条款
-									</a>{' '}
-									和{' '}
-									<a href="#" className="text-blue-600 hover:text-blue-500">
-										隐私政策
-									</a>{' '}
-									*
-								</label>
-							</div>
-							{errors.terms && (
-								<p className="text-sm text-red-600 dark:text-red-400">{errors.terms}</p>
-							)}
-						</div>
-
-						{/* 提交结果 */}
-						{submitResult && (
-							<div
-								className={`p-4 rounded-md ${
-									submitResult === 'success'
-										? 'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700'
-										: 'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700'
-								}`}
-							>
-								<p
-									className={`text-sm ${
-										submitResult === 'success'
-											? 'text-green-800 dark:text-green-200'
-											: 'text-red-800 dark:text-red-200'
-									}`}
-								>
-									{submitMessage}
-								</p>
-							</div>
-						)}
-
-						{/* 按钮组 */}
-						<div className="flex flex-col sm:flex-row gap-4">
-							<button
-								type="submit"
-								disabled={isSubmitting}
-								className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-							>
-								{isSubmitting ? (
-									<span className="flex items-center justify-center">
-										<svg
-											className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-											xmlns="http://www.w3.org/2000/svg"
-											fill="none"
-											viewBox="0 0 24 24"
-										>
-											<circle
-												className="opacity-25"
-												cx="12"
-												cy="12"
-												r="10"
-												stroke="currentColor"
-												strokeWidth="4"
-											></circle>
-											<path
-												className="opacity-75"
-												fill="currentColor"
-												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-											></path>
-										</svg>
-										提交中...
-									</span>
-								) : (
-									'注册账户'
-								)}
-							</button>
-							<button
-								type="button"
-								onClick={resetForm}
-								className="flex-1 bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
-							>
-								重置表单
-							</button>
-						</div>
-					</form>
-
-					<div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
-						<Link href="/" className="text-blue-600 hover:text-blue-500 dark:text-blue-400">
-							← 返回测试页面列表
-						</Link>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}

packages/website/src/test-pages/index.tsx

@@ -1,106 +0,0 @@
-import { Link } from 'wouter'
-
-export default function IndexPage() {
-	return (
-		<div className="min-h-screen bg-linear-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 p-8">
-			<div className="max-w-4xl mx-auto">
-				<div className="text-center mb-12">
-					<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-						Page Use Agent 测试页面
-					</h1>
-					<p className="text-lg text-gray-600 dark:text-gray-300">
-						用于测试 AI Agent 网页操作能力的综合测试套件
-					</p>
-				</div>
-
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-					<TestPageCard
-						title="表单测试"
-						description="测试输入、验证、提交等表单操作"
-						path="/form"
-						icon="📝"
-						difficulty="简单"
-					/>
-					<TestPageCard
-						title="导航测试"
-						description="测试菜单、下拉框、弹窗等交互"
-						path="/navigation"
-						icon="🧭"
-						difficulty="中等"
-					/>
-					<TestPageCard
-						title="列表测试"
-						description="测试滚动、分页、搜索、排序"
-						path="/list"
-						icon="📋"
-						difficulty="中等"
-					/>
-					<TestPageCard
-						title="复杂交互"
-						description="测试多步骤操作和状态管理"
-						path="/complex"
-						icon="⚙️"
-						difficulty="困难"
-					/>
-					<TestPageCard
-						title="错误处理"
-						description="测试错误识别和重试机制"
-						path="/errors"
-						icon="⚠️"
-						difficulty="困难"
-					/>
-					<TestPageCard
-						title="异步操作"
-						description="测试等待、加载状态识别"
-						path="/async"
-						icon="⏳"
-						difficulty="中等"
-					/>
-				</div>
-
-				<div className="text-center">
-					<Link
-						href="/"
-						className="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-					>
-						← 回到 Page Use 首页
-					</Link>
-				</div>
-			</div>
-		</div>
-	)
-}
-
-interface TestPageCardProps {
-	title: string
-	description: string
-	path: string
-	icon: string
-	difficulty: string
-}
-
-function TestPageCard({ title, description, path, icon, difficulty }: TestPageCardProps) {
-	const difficultyColors = {
-		简单: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-		中等: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-		困难: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
-	}
-
-	return (
-		<Link href={path}>
-			<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer border border-gray-200 dark:border-gray-700">
-				<div className="text-4xl mb-4">{icon}</div>
-				<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{title}</h3>
-				<p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">{description}</p>
-				<div className="flex justify-between items-center">
-					<span
-						className={`px-2 py-1 rounded-full text-xs font-medium ${difficultyColors[difficulty as keyof typeof difficultyColors]}`}
-					>
-						{difficulty}
-					</span>
-					<span className="text-blue-600 dark:text-blue-400 text-sm font-medium">开始测试 →</span>
-				</div>
-			</div>
-		</Link>
-	)
-}