chore(version): bump version to 1.4.2

fix(actions): remove debug console.log statements

README.md

@@ -49,8 +49,8 @@ Fastest way to try PageAgent with our free Demo LLM:
 
 | Mirrors | URL                                                                                |
 | ------- | ---------------------------------------------------------------------------------- |
-| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.4.0/dist/iife/page-agent.demo.js         |
+| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.4.2/dist/iife/page-agent.demo.js         |
-| China   | https://registry.npmmirror.com/page-agent/1.4.0/files/dist/iife/page-agent.demo.js |
+| China   | https://registry.npmmirror.com/page-agent/1.4.2/files/dist/iife/page-agent.demo.js |
 
 > **⚠️ For technical evaluation only.** This demo CDN uses our free [testing LLM API](https://alibaba.github.io/page-agent/docs/features/models#free-testing-api). By using it, you agree to its [terms](https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md).
 

docs/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2026-02-27
+
+### Features
+
+- Update Terms of Use and Privacy Policy
+- **Robust tool-call validation** - Action inputs are now validated against tool schemas individually, producing clear error messages (e.g. `Invalid input for action "click_element_by_index"`) instead of unreadable union parse errors
+- **Primitive action input coercion** - Small models that output `{"click_element_by_index": 2}` instead of `{"click_element_by_index": {"index": 2}}` are now auto-corrected using tool schemas
+- **Qwen model updates** - Added `qwen3.5-plus` as the default free testing model; disabled `enable_thinking` for Qwen models to avoid incompatible responses
+- **Updated default LLM endpoint** - Migrated demo and extension to a new testing endpoint with legacy endpoint auto-migration
+
+### Improvements
+
+- Unified zod imports (`* as z`) across all packages for consistency
+- Better Zod error formatting with `z.prettifyError()` in LLM client
+- Exported `InvokeError` and `InvokeErrorType` as values (not just types) from `@page-agent/llms`
+- Exported `SupportedLanguage` type from `@page-agent/core`
+
+### Extension v0.1.8
+
+- **Language setting** - Added language selector (System / English / 中文) in config panel
+- **UI makeover** - New empty state with breathing glow and typing animation; ai-motion glow overlay while running; refined focus styles
+- **Testing endpoint notice** - Shows terms of use notice when using the free testing API
+- **Legacy endpoint migration** - Auto-migrates old Supabase testing endpoint to new endpoint on startup
+
+---
+
 ## [1.3.0] - 2026-02-13
 
 ### Breaking Changes

docs/README-zh.md

@@ -49,8 +49,8 @@
 
 | Mirrors | URL                                                                                |
 | ------- | ---------------------------------------------------------------------------------- |
-| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.4.0/dist/iife/page-agent.demo.js         |
+| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.4.2/dist/iife/page-agent.demo.js         |
-| China   | https://registry.npmmirror.com/page-agent/1.4.0/files/dist/iife/page-agent.demo.js |
+| China   | https://registry.npmmirror.com/page-agent/1.4.2/files/dist/iife/page-agent.demo.js |
 
 > **⚠️ 仅用于技术评估。** 该 Demo CDN 使用了免费的[测试 LLM API](https://alibaba.github.io/page-agent/docs/features/models#free-testing-api)，使用即表示您同意其[条款](https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md)。
 

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "root",
-    "version": "1.4.0",
+    "version": "1.4.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "root",
-            "version": "1.4.0",
+            "version": "1.4.2",
             "license": "MIT",
             "workspaces": [
                 "packages/page-controller",
@@ -11161,11 +11161,11 @@
         },
         "packages/core": {
             "name": "@page-agent/core",
-            "version": "1.4.0",
+            "version": "1.4.2",
             "license": "MIT",
             "dependencies": {
-                "@page-agent/llms": "1.4.0",
+                "@page-agent/llms": "1.4.2",
-                "@page-agent/page-controller": "1.4.0",
+                "@page-agent/page-controller": "1.4.2",
                 "chalk": "^5.6.2",
                 "zod": "^4.3.5"
             }
@@ -11175,10 +11175,10 @@
             "version": "0.1.8",
             "hasInstallScript": true,
             "dependencies": {
-                "@page-agent/core": "1.4.0",
+                "@page-agent/core": "1.4.2",
-                "@page-agent/llms": "1.4.0",
+                "@page-agent/llms": "1.4.2",
-                "@page-agent/page-controller": "1.4.0",
+                "@page-agent/page-controller": "1.4.2",
-                "@page-agent/ui": "1.4.0",
+                "@page-agent/ui": "1.4.2",
                 "ai-motion": "^0.4.8",
                 "chalk": "^5.6.2",
                 "zod": "^4.3.5"
@@ -11214,7 +11214,7 @@
         },
         "packages/llms": {
             "name": "@page-agent/llms",
-            "version": "1.4.0",
+            "version": "1.4.2",
             "license": "MIT",
             "dependencies": {
                 "chalk": "^5.6.2",
@@ -11222,20 +11222,20 @@
             }
         },
         "packages/page-agent": {
-            "version": "1.4.0",
+            "version": "1.4.2",
             "license": "MIT",
             "dependencies": {
-                "@page-agent/core": "1.4.0",
+                "@page-agent/core": "1.4.2",
-                "@page-agent/llms": "1.4.0",
+                "@page-agent/llms": "1.4.2",
-                "@page-agent/page-controller": "1.4.0",
+                "@page-agent/page-controller": "1.4.2",
-                "@page-agent/ui": "1.4.0",
+                "@page-agent/ui": "1.4.2",
                 "chalk": "^5.6.2",
                 "zod": "^4.3.5"
             }
         },
         "packages/page-controller": {
             "name": "@page-agent/page-controller",
-            "version": "1.4.0",
+            "version": "1.4.2",
             "license": "MIT",
             "dependencies": {
                 "ai-motion": "^0.4.8"
@@ -11243,12 +11243,12 @@
         },
         "packages/ui": {
             "name": "@page-agent/ui",
-            "version": "1.4.0",
+            "version": "1.4.2",
             "license": "MIT"
         },
         "packages/website": {
             "name": "@page-agent/website",
-            "version": "1.4.0",
+            "version": "1.4.2",
             "devDependencies": {
                 "@radix-ui/react-icons": "^1.3.2",
                 "@radix-ui/react-separator": "^1.1.8",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "root",
     "private": true,
-    "version": "1.4.0",
+    "version": "1.4.2",
     "type": "module",
     "workspaces": [
         "packages/page-controller",

packages/core/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@page-agent/core",
     "private": false,
-    "version": "1.4.0",
+    "version": "1.4.2",
     "type": "module",
     "main": "./dist/esm/page-agent-core.js",
     "module": "./dist/esm/page-agent-core.js",
@@ -45,7 +45,7 @@
     "dependencies": {
         "chalk": "^5.6.2",
         "zod": "^4.3.5",
-        "@page-agent/llms": "1.4.0",
+        "@page-agent/llms": "1.4.2",
-        "@page-agent/page-controller": "1.4.0"
+        "@page-agent/page-controller": "1.4.2"
     }
 }

packages/core/src/PageAgentCore.ts

@@ -342,6 +342,8 @@ export class PageAgentCore extends EventTarget {
 				await onAfterTask?.(this, result)
 				return result
 			}
+
+			await waitFor(0.4) // @TODO: configurable
 		}
 	}
 

packages/extension/docs/description.txt

@@ -1,30 +0,0 @@
-AI-powered browser automation. Control web pages with natural language.
-
-Page Agent Ext — AI-Powered Browser Automation
-
-🌟 What is Page Agent Ext?
-
-Page Agent Ext brings AI-powered automation to your browser. Built on the open-source Page Agent framework, it lets you control web pages across multiple tabs using natural language — no scripting required.
-
-🌟 Key Features:
-
-- Natural Language Control — Command your browser in plain language, no code needed
-- Cross-Tab Automation — Seamlessly operate across multiple tabs and pages
-- Smart HTML Cleaning — Intelligently extracts and simplifies page structure for accurate AI understanding
-- Bring Your Own LLM — Use OpenAI, Anthropic, or any compatible API with full data control
-- Privacy-First — Zero data collection; all data flows directly to your chosen LLM provider
-- Open Source — MIT licensed, built on the Page Agent framework with full transparency
-
-🌟 How It Works & Privacy:
-
-Page Agent Ext performs DOM analysis locally in your browser. When you initiate a task, sanitized page structure is sent to the LLM API you configure. Your data is never collected or stored by us.
-
-- Your API Key — Configure your own LLM API (OpenAI, Anthropic, etc.). Data goes directly to your provider
-- Test API — A free test endpoint is available for evaluation; we recommend your own key for regular use
-
-Terms of Use & Privacy: https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md
-
-🌟 Open Source:
-
-This project is MIT licensed. Review the code, verify privacy claims, or extend it for your needs:
-https://github.com/alibaba/page-agent

packages/extension/docs/description_zh.txt

@@ -1,30 +0,0 @@
-AI 驱动的浏览器自动化助手，用自然语言控制网页。
-
-Page Agent Ext — AI 驱动的浏览器自动化助手
-
-🌟 什么是 Page Agent Ext？
-
-Page Agent Ext 为浏览器带来 AI 自动化能力。基于开源的 Page Agent 框架，你可以用自然语言跨标签页控制网页，无需编写任何脚本。
-
-🌟 核心特性：
-
-- 自然语言控制 — 用日常语言指挥浏览器，无需编程
-- 跨标签页操作 — 在多个标签页之间无缝切换和操控
-- HTML 智能清洗 — 智能提取和精简页面结构，让 AI 准确理解网页内容
-- 使用你自己的模型 — 支持 OpenAI、Anthropic 或任何兼容 API，数据完全自主可控
-- 隐私优先 — 零数据收集，所有数据直接发送到你配置的 LLM 服务商
-- 开源透明 — MIT 协议，基于 Page Agent 开源框架，代码完全公开
-
-🌟 工作原理与隐私：
-
-Page Agent Ext 在浏览器本地进行 DOM 分析。当你发起任务时，经清洗的页面结构会发送到你配置的 LLM API。我们不会收集或存储你的任何数据。
-
-- 你的 API Key — 配置你自己的 LLM API（OpenAI、Anthropic 等），数据直接发送到你的服务商
-- 测试 API — 提供免费测试端点供体验，日常使用建议配置自己的 Key
-
-使用条款与隐私：https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md
-
-🌟 开源项目：
-
-MIT 协议开源。查看源码、验证隐私承诺，或按需扩展：
-https://github.com/alibaba/page-agent

packages/extension/package.json

@@ -38,10 +38,10 @@
         "wxt": "^0.20.18"
     },
     "dependencies": {
-        "@page-agent/core": "1.4.0",
+        "@page-agent/core": "1.4.2",
-        "@page-agent/llms": "1.4.0",
+        "@page-agent/llms": "1.4.2",
-        "@page-agent/page-controller": "1.4.0",
+        "@page-agent/page-controller": "1.4.2",
-        "@page-agent/ui": "1.4.0",
+        "@page-agent/ui": "1.4.2",
         "ai-motion": "^0.4.8",
         "chalk": "^5.6.2",
         "zod": "^4.3.5"

packages/llms/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@page-agent/llms",
-    "version": "1.4.0",
+    "version": "1.4.2",
     "type": "module",
     "main": "./dist/lib/page-agent-llms.js",
     "module": "./dist/lib/page-agent-llms.js",

packages/page-agent/package.json

@@ -1,7 +1,7 @@
 {
     "name": "page-agent",
     "private": false,
-    "version": "1.4.0",
+    "version": "1.4.2",
     "type": "module",
     "main": "./dist/esm/page-agent.js",
     "module": "./dist/esm/page-agent.js",
@@ -44,10 +44,10 @@
         "postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
     },
     "dependencies": {
-        "@page-agent/core": "1.4.0",
+        "@page-agent/core": "1.4.2",
-        "@page-agent/llms": "1.4.0",
+        "@page-agent/llms": "1.4.2",
-        "@page-agent/page-controller": "1.4.0",
+        "@page-agent/page-controller": "1.4.2",
-        "@page-agent/ui": "1.4.0",
+        "@page-agent/ui": "1.4.2",
         "chalk": "^5.6.2",
         "zod": "^4.3.5"
     }

packages/page-controller/package.json

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

packages/page-controller/src/actions.ts

@@ -86,7 +86,7 @@ export async function clickElement(element: HTMLElement) {
 	// dispatch a click event
 	// element.click()
 
-	await waitFor(0.1) // Wait to ensure click event processing completes
+	await waitFor(0.2) // Wait to ensure click event processing completes
 }
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -181,11 +181,6 @@ export async function scrollVertically(
 	// Element-specific scrolling if element is provided
 	if (element) {
 		const targetElement = element
-		console.log(
-			'[SCROLL DEBUG] Starting direct container scroll for element:',
-			targetElement.tagName
-		)
-
 		let currentElement = targetElement as HTMLElement | null
 		let scrollSuccess = false
 		let scrolledElement: HTMLElement | null = null
@@ -198,19 +193,6 @@ export async function scrollVertically(
 			const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY)
 			const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight
 
-			console.log(
-				'[SCROLL DEBUG] Checking element:',
-				currentElement.tagName,
-				'hasScrollableY:',
-				hasScrollableY,
-				'canScrollVertically:',
-				canScrollVertically,
-				'scrollHeight:',
-				currentElement.scrollHeight,
-				'clientHeight:',
-				currentElement.clientHeight
-			)
-
 			if (hasScrollableY && canScrollVertically) {
 				const beforeScroll = currentElement.scrollTop
 				const maxScroll = currentElement.scrollHeight - currentElement.clientHeight
@@ -228,27 +210,10 @@ export async function scrollVertically(
 				const afterScroll = currentElement.scrollTop
 				const actualScrollDelta = afterScroll - beforeScroll
 
-				console.log(
-					'[SCROLL DEBUG] Scroll attempt:',
-					currentElement.tagName,
-					'before:',
-					beforeScroll,
-					'after:',
-					afterScroll,
-					'delta:',
-					actualScrollDelta
-				)
-
 				if (Math.abs(actualScrollDelta) > 0.5) {
 					scrollSuccess = true
 					scrolledElement = currentElement
 					scrollDelta = actualScrollDelta
-					console.log(
-						'[SCROLL DEBUG] Successfully scrolled container:',
-						currentElement.tagName,
-						'delta:',
-						actualScrollDelta
-					)
 					break
 				}
 			}
@@ -344,11 +309,6 @@ export async function scrollHorizontally(
 	// Element-specific scrolling if element is provided
 	if (element) {
 		const targetElement = element
-		console.log(
-			'[SCROLL DEBUG] Starting direct container scroll for element:',
-			targetElement.tagName
-		)
-
 		let currentElement = targetElement as HTMLElement | null
 		let scrollSuccess = false
 		let scrolledElement: HTMLElement | null = null
@@ -361,19 +321,6 @@ export async function scrollHorizontally(
 			const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX)
 			const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth
 
-			console.log(
-				'[SCROLL DEBUG] Checking element:',
-				currentElement.tagName,
-				'hasScrollableX:',
-				hasScrollableX,
-				'canScrollHorizontally:',
-				canScrollHorizontally,
-				'scrollWidth:',
-				currentElement.scrollWidth,
-				'clientWidth:',
-				currentElement.clientWidth
-			)
-
 			if (hasScrollableX && canScrollHorizontally) {
 				const beforeScroll = currentElement.scrollLeft
 				const maxScroll = currentElement.scrollWidth - currentElement.clientWidth
@@ -391,27 +338,10 @@ export async function scrollHorizontally(
 				const afterScroll = currentElement.scrollLeft
 				const actualScrollDelta = afterScroll - beforeScroll
 
-				console.log(
-					'[SCROLL DEBUG] Scroll attempt:',
-					currentElement.tagName,
-					'before:',
-					beforeScroll,
-					'after:',
-					afterScroll,
-					'delta:',
-					actualScrollDelta
-				)
-
 				if (Math.abs(actualScrollDelta) > 0.5) {
 					scrollSuccess = true
 					scrolledElement = currentElement
 					scrollDelta = actualScrollDelta
-					console.log(
-						'[SCROLL DEBUG] Successfully scrolled container:',
-						currentElement.tagName,
-						'delta:',
-						actualScrollDelta
-					)
 					break
 				}
 			}

packages/ui/package.json

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

packages/ui/src/i18n/locales.ts

@@ -15,7 +15,7 @@ const enUS = {
 			close: 'Close',
 			expand: 'Expand history',
 			collapse: 'Collapse history',
-			step: 'Step {{number}} · {{time}}{{duration}}',
+			step: 'Step {{number}}',
 		},
 		tools: {
 			clicking: 'Clicking element [{{index}}]...',
@@ -63,7 +63,7 @@ const zhCN = {
 			close: '关闭',
 			expand: '展开历史',
 			collapse: '收起历史',
-			step: '步骤 {{number}} · {{time}}{{duration}}',
+			step: '步骤 {{number}}',
 		},
 		tools: {
 			clicking: '正在点击元素 [{{index}}]...',

packages/ui/src/panel/Panel.ts

@@ -1,6 +1,6 @@
 import { I18n, type SupportedLanguage } from '../i18n'
 import { truncate } from '../utils'
-import { createCard, createReflectionLines, formatTime } from './cards'
+import { createCard, createReflectionLines } from './cards'
 import type { AgentActivity, PanelAgentAdapter } from './types'
 
 import styles from './Panel.module.css'
@@ -187,7 +187,6 @@ export class Panel {
 			tempCard.innerHTML = createCard({
 				icon: '❓',
 				content: `Question: ${question}`,
-				meta: formatTime(this.#config.language ?? 'en-US'),
 				type: 'question',
 			})
 			const cardElement = tempCard.firstElementChild as HTMLElement
@@ -591,15 +590,12 @@ export class Panel {
 	/** Create cards for a history event */
 	#createHistoryCards(event: PanelAgentAdapter['history'][number]): string[] {
 		const cards: string[] = []
-		const time = formatTime(this.#config.language ?? 'en-US')
 		const meta =
 			event.type === 'step' && event.stepIndex !== undefined
 				? this.#i18n.t('ui.panel.step', {
 						number: (event.stepIndex + 1).toString(),
-						time,
-						duration: '',
 					})
-				: time
+				: undefined
 
 		if (event.type === 'step') {
 			// Reflection card
@@ -636,7 +632,7 @@ export class Panel {
 	/** Create cards for an action */
 	#createActionCards(
 		action: { name: string; input: unknown; output: string },
-		meta: string
+		meta?: string
 	): string[] {
 		const cards: string[] = []
 

packages/ui/src/panel/cards.ts

@@ -32,16 +32,6 @@ export function createCard({ icon, content, meta, type }: CardOptions): string {
 	`
 }
 
-/** Format timestamp for cards */
-export function formatTime(locale: string = 'en-US'): string {
-	return new Date().toLocaleTimeString(locale, {
-		hour12: false,
-		hour: '2-digit',
-		minute: '2-digit',
-		second: '2-digit',
-	})
-}
-
 /** Create reflection lines from reflection object */
 export function createReflectionLines(reflection: {
 	evaluation_previous_goal?: string

packages/website/index.html

@@ -45,13 +45,24 @@
 		</script>
 	</head>
 	<body>
-		<div id="root"></div>
+		<div id="root">
+			<div id="sk">
+				<p class="sk-text" id="sk-text">Loading...</p>
+				<style>
+					#sk{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#eff6ff,#f5f3ff)}
+					@media(prefers-color-scheme:dark){#sk{background:linear-gradient(135deg,#111827,#1f2937)}}
+					.sk-text{font:400 14px/1 system-ui,sans-serif;color:#94a3b8;animation:skf 2s ease-in-out infinite}
+					@keyframes skf{0%,100%{opacity:.6}50%{opacity:.3}}
+				</style>
+			</div>
+		</div>
 		<script type="module" src="./src/main.tsx"></script>
 		<script>
-			// Dynamically update html lang attribute based on i18n detection
 			const updateHtmlLang = () => {
 				const lang = localStorage.getItem('i18nextLng') || navigator.language || 'zh-CN'
 				document.documentElement.lang = lang
+				const el = document.getElementById('sk-text')
+				if (el) el.textContent = lang.startsWith('zh') ? '加载中...' : 'Loading...'
 			}
 			updateHtmlLang()
 			window.addEventListener('storage', updateHtmlLang)

packages/website/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@page-agent/website",
     "private": true,
-    "version": "1.4.0",
+    "version": "1.4.2",
     "type": "module",
     "scripts": {
         "dev": "vite --host 0.0.0.0",

packages/website/src/constants.ts

@@ -1,8 +1,8 @@
 // Demo build (auto-init with demo LLM, for quick testing)
 export const CDN_DEMO_URL =
-	'https://cdn.jsdelivr.net/npm/page-agent@1.4.0/dist/iife/page-agent.demo.js'
+	'https://cdn.jsdelivr.net/npm/page-agent@1.4.2/dist/iife/page-agent.demo.js'
 export const CDN_DEMO_CN_URL =
-	'https://registry.npmmirror.com/page-agent/1.4.0/files/dist/iife/page-agent.demo.js'
+	'https://registry.npmmirror.com/page-agent/1.4.2/files/dist/iife/page-agent.demo.js'
 
 // Demo LLM for website testing (homepage quick trial uses flash)
 export const DEMO_MODEL = 'qwen3.5-flash'

packages/website/src/pages/Home.tsx

@@ -1,15 +1,27 @@
-import FeaturesSection from './home/FeaturesSection'
+import { Suspense, lazy } from 'react'
+
 import HeroSection from './home/HeroSection'
-import OneMoreThingSection from './home/OneMoreThingSection'
+
-import ScenariosSection from './home/ScenariosSection'
+const FeaturesSection = lazy(() => import('./home/FeaturesSection'))
+const ScenariosSection = lazy(() => import('./home/ScenariosSection'))
+const OneMoreThingSection = lazy(() => import('./home/OneMoreThingSection'))
 
 export default function HomePage() {
 	return (
 		<>
 			<HeroSection />
-			<FeaturesSection />
+			<Suspense
-			<ScenariosSection />
+				fallback={
-			<OneMoreThingSection />
+					<div className="flex items-center justify-center gap-3 py-20 text-gray-400">
+						<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+						Loading...
+					</div>
+				}
+			>
+				<FeaturesSection />
+				<ScenariosSection />
+				<OneMoreThingSection />
+			</Suspense>
 		</>
 	)
 }

packages/website/src/pages/home/FeaturesSection.tsx

@@ -62,7 +62,7 @@ export default function FeaturesSection() {
 													color="#ef4444aa"
 													strokeWidth={1.5}
 													// multiline={false}
-													isView
+													// isView
 												>
 													{cmd}
 												</Highlighter>

packages/website/src/pages/home/HeroSection.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-dom/no-dangerously-set-innerhtml */
-import { PageAgent } from 'page-agent'
+import type { PageAgent as PageAgentType } from 'page-agent'
 import { useEffect, useState } from 'react'
 import { Link, useSearchParams } from 'wouter'
 
@@ -16,6 +16,8 @@ import {
 } from '../../constants'
 import { useLanguage } from '../../i18n/context'
 
+let pageAgentModule: Promise<typeof import('page-agent')> | null = null
+
 function getInjection(useCN?: boolean) {
 	const cdn = useCN ? CDN_DEMO_CN_URL : CDN_DEMO_URL
 
@@ -55,13 +57,20 @@ export default function HeroSection() {
 	const [activeTab, setActiveTab] = useState<'try' | 'other'>(isOther ? 'other' : 'try')
 	const [cdnSource, setCdnSource] = useState<'international' | 'china'>('international')
 
-	const handleExecute = async () => {
+	const [ready, setReady] = useState(false)
-		if (!task.trim()) return
+	useEffect(() => {
+		pageAgentModule ??= import('page-agent')
+		pageAgentModule.then(() => setReady(true))
+	}, [])
 
+	const handleExecute = async () => {
+		if (!task.trim() || !ready || !pageAgentModule) return
+
+		const { PageAgent } = await pageAgentModule
 		const win = window as any
 
 		if (!win.pageAgent || win.pageAgent.disposed) {
-			win.pageAgent = new PageAgent({
+			win.pageAgent = new (PageAgent as typeof PageAgentType)({
 				interactiveBlacklist: [document.getElementById('root')!],
 				language: language,
 
@@ -208,10 +217,21 @@ export default function HeroSection() {
 												/>
 												<button
 													onClick={handleExecute}
+													disabled={!ready}
 													className="absolute right-2 top-2 px-5 py-1.5 bg-linear-to-r from-blue-600 to-purple-600 text-white font-medium rounded-md hover:shadow-md transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none text-sm"
 													data-page-agent-not-interactive
 												>
-													{isZh ? '执行' : 'Run'}
+													{ready ? (
+														isZh ? (
+															'执行'
+														) : (
+															'Run'
+														)
+													) : (
+														<span className="animate-pulse">
+															{isZh ? '准备中...' : 'Preparing...'}
+														</span>
+													)}
 												</button>
 											</div>
 											<p className="text-xs text-gray-500 dark:text-gray-400 text-left">

packages/website/src/pages/home/ScenariosSection.tsx

@@ -8,7 +8,10 @@ export default function ScenariosSection() {
 	const { isZh } = useLanguage()
 
 	return (
-		<section className="px-6 py-16" aria-labelledby="scenarios-heading">
+		<section
+			className="px-6 py-16 bg-linear-to-b from-blue-100 to-purple-100 dark:from-blue-950/40 dark:to-gray-800"
+			aria-labelledby="scenarios-heading"
+		>
 			<div className="max-w-6xl mx-auto">
 				<BlurFade inView>
 					<div className="text-center mb-12">

packages/website/src/router.tsx

@@ -1,10 +1,12 @@
-import { Suspense, useLayoutEffect } from 'react'
+import { Suspense, lazy, useEffect, useLayoutEffect } from 'react'
 import { Route, Switch, useLocation } from 'wouter'
 
 import Footer from './components/Footer'
 import Header from './components/Header'
 import HomePage from './pages/Home'
-import DocsPages from './pages/docs/index'
+
+const docsImport = () => import('./pages/docs/index')
+const DocsPages = lazy(docsImport)
 
 function ScrollToTop() {
 	const [pathname] = useLocation()
@@ -15,6 +17,11 @@ function ScrollToTop() {
 }
 
 export default function Router() {
+	useEffect(() => {
+		const id = requestIdleCallback(() => docsImport())
+		return () => cancelIdleCallback(id)
+	}, [])
+
 	return (
 		<div className="flex min-h-screen flex-col">
 			<Header />
@@ -32,7 +39,16 @@ export default function Router() {
 
 					<Route path="/docs" nest>
 						<div className="flex-1 bg-white dark:bg-gray-900">
-							<DocsPages />
+							<Suspense
+								fallback={
+									<div className="flex items-center justify-center gap-3 py-20 text-gray-400">
+										<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+										Loading...
+									</div>
+								}
+							>
+								<DocsPages />
+							</Suspense>
 						</div>
 					</Route>
 

packages/website/vite.config.js

@@ -64,6 +64,11 @@ export default defineConfig(({ mode }) => ({
 				if (message.code === 'EVAL') return
 				handler(message)
 			},
+			output: {
+				manualChunks: {
+					vendor: ['react', 'react-dom', 'wouter'],
+				},
+			},
 		},
 	},
 	resolve: {