chore(version): bump version to 1.0.1

> If multiple listeners are registered for onMessage,
> only the first listener to respond, reject, or throw
> an error will affect the sender; all other listeners
> will run, but their results will be ignored.

.github/workflows/release.yml

@@ -32,4 +32,12 @@ jobs:
         run: npm run build:libs
 
       - name: Publish all public packages
-        run: npm publish --workspaces --access public
+        run: |
+          VERSION=${GITHUB_REF#refs/tags/v}
+          if [[ "$VERSION" == *"-"* ]]; then
+            # Prerelease version (e.g., 0.3.0-beta.1) -> extract tag name before the dot
+            TAG=$(echo "$VERSION" | sed 's/.*-\([a-zA-Z]*\).*/\1/')
+            npm publish --workspaces --access public --tag "$TAG"
+          else
+            npm publish --workspaces --access public
+          fi

.gitignore

@@ -25,11 +25,22 @@ dist-ssr
 *.sw?
 .qoder
 
-
+# env files
-# 
 .env
+.env.*
 
 # Copied files for npm publish (generated by prepublishOnly)
 packages/page-agent/README.md
 packages/page-agent/README-zh.md
 packages/page-agent/LICENSE
+
+# extension
+.output
+.wxt
+
+# AI
+.agent
+.claude
+.cursor
+.gemini
+CLAUDE.md

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-    "recommendations": ["dbaeumer.vscode-eslint", "prettier.prettier-vscode"]
+    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -1,19 +1,25 @@
 {
-    "editor.fontLigatures": true,
     "cSpell.words": [
         "deepseek",
         "historychange",
         "HITL",
         "innerhtml",
+        "languagedetector",
         "llms",
+        "magicui",
+        "npmmirror",
         "onwarn",
         "opensource",
         "qwen",
         "retryable",
         "shadcn",
+        "sidepanel",
         "statuschange",
         "wouter"
     ],
+    "files.exclude": {
+        "packages/*/node_modules": true,
+    },
     "markdownlint.config": {
         // "comment": "Relaxed rules",
         "default": true,

AGENTS.md

@@ -5,6 +5,7 @@
 This is a **monorepo** with npm workspaces:
 
 - **Page Agent** (`packages/page-agent/`) - Main entry with built-in UI Panel, published as `page-agent` on npm
+- **Extension** (`packages/extension/`) - Browser extension (WXT + React) 🚧 WIP
 - **Website** (`packages/website/`) - React docs and landing page. **When working on website, follow `packages/website/AGENTS.md`**
 
 Internal packages:
@@ -31,10 +32,11 @@ Simple monorepo solution: TypeScript references + Vite aliases. Update tsconfig
 
 ```
 packages/
-├── page-agent/              # npm: "page-agent" ⭐ MAIN (with Panel UI + IIFE builds)
+├── core/                    # npm: "@page-agent/core" ⭐ Core agent logic (headless)
-├── core/                    # npm: "@page-agent/core" (headless, no UI)
+├── page-agent/              # npm: "page-agent" entry class (with UI + controller + demo builds)
 ├── website/                 # @page-agent/website (private)
 ├── llms/                    # @page-agent/llms
+├── extension/               # 🚧 WIP: Browser extension (WXT + React)
 ├── page-controller/         # @page-agent/page-controller
 └── ui/                      # @page-agent/ui
 ```
@@ -72,45 +74,31 @@ const pageInfo = await this.pageController.getPageInfo()
 3. **LLM Processing**: AI returns action plans (page-agent)
 4. **Indexed Operations**: PageAgent calls PageController by element index
 
-### IIFE Builds (`packages/page-agent/dist/iife/`)
-
-Two IIFE builds for script tag usage:
-
-| Build | File                 | Description                      |
-| ----- | -------------------- | -------------------------------- |
-| Demo  | `page-agent.demo.js` | Auto-init with built-in test API |
-| Full  | `page-agent.js`      | Exposes `PageAgent` class only   |
-
-Demo build supports query params (e.g., `?model=gpt-4&lang=en-US`).
-
-Build with `npm run build:iife --workspace=page-agent`.
-
 ## Key Files Reference
 
 ### Page Agent (`packages/page-agent/`)
 
-| File                    | Description                                  |
+| File               | Description                                  |
-| ----------------------- | -------------------------------------------- |
+| ------------------ | -------------------------------------------- |
-| `src/PageAgent.ts`      | ⭐ Main class with UI, extends PageAgentCore |
+| `src/PageAgent.ts` | ⭐ Main class with UI, extends PageAgentCore |
-| `src/entry-iife.ts`     | IIFE entry (exposes PageAgent class)         |
+| `src/demo.ts`      | IIFE demo entry (auto-init with demo API)    |
-| `src/entry-iife-demo.ts`| IIFE demo entry (auto-init with demo API)    |
 
 ### Core (`packages/core/`)
 
-| File                    | Description                                 |
+| File                   | Description                             |
-| ----------------------- | ------------------------------------------- |
+| ---------------------- | --------------------------------------- |
-| `src/PageAgentCore.ts`  | ⭐ Core agent class without UI              |
+| `src/PageAgentCore.ts` | ⭐ Core agent class without UI          |
-| `src/tools/`            | Tool definitions calling PageController     |
+| `src/tools/`           | Tool definitions calling PageController |
-| `src/config/`           | Configuration types and constants           |
+| `src/config/`          | Configuration types and constants       |
-| `src/prompts/`          | System prompt templates                     |
+| `src/prompts/`         | System prompt templates                 |
 
 ### LLMs (`packages/llms/`)
 
-| File                         | Description                           |
+| File                  | Description                           |
-| ---------------------------- | ------------------------------------- |
+| --------------------- | ------------------------------------- |
-| `src/index.ts`               | ⭐ LLM class with retry logic         |
+| `src/index.ts`        | ⭐ LLM class with retry logic         |
-| `src/types.ts`               | MacroToolInput, AgentBrain, LLMConfig |
+| `src/types.ts`        | MacroToolInput, AgentBrain, LLMConfig |
-| `src/OpenAILenientClient.ts` | OpenAI-compatible client              |
+| `src/OpenAIClient.ts` | OpenAI-compatible client              |
 
 ### Page Controller (`packages/page-controller/`)
 
@@ -141,3 +129,5 @@ Build with `npm run build:iife --workspace=page-agent`.
 - ESLint relaxes some unsafe rules for rapid iteration
 - Every change you make should not only implement the desired functionality but also improve the quality of the codebase
 - All code and comments must be in English.
+- Do not try to hide errors or risks. They are valuable feedbacks for developers and users. Make them visible and actionable.
+- Traceability and predictability is more important than success rate.

CHANGELOG.md

@@ -0,0 +1,94 @@
+# Changelog
+
+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.0.0] - 2026-01-19
+
+### 🎉 First Stable Release
+
+PageAgent is now ready for production use. The API is stable and breaking changes will follow semantic versioning.
+
+### Features
+
+#### Core
+
+- **PageAgent** - Main entry class with built-in UI Panel
+- **PageAgentCore** - Headless agent class for custom UI or programmatic use
+- **DOM Analysis** - Text-based DOM extraction with high-intensity dehydration
+- **LLM Support** - Works with OpenAI, Claude, DeepSeek, Qwen, and other OpenAI-compatible APIs
+- **Tool System** - Built-in tools for click, input, scroll, select, and more
+- **Custom Tools** - Extend agent capabilities with your own tools (experimental)
+- **Lifecycle Hooks** - Hook into agent execution (experimental)
+- **Instructions System** - System-level and page-level instructions to guide agent behavior
+- **Data Masking** - Transform page content before sending to LLM
+
+#### Page Controller
+
+- **Element Interactions** - Click, input text, select options, scroll
+- **Visual Mask** - Blocks user interaction during automation
+- **DOM Tree Extraction** - Efficient page structure extraction for LLM consumption
+
+#### UI
+
+- **Interactive Panel** - Real-time task progress and agent thinking display
+- **Ask User Tool** - Agent can ask users for clarification
+- **i18n Support** - English and Chinese localization
+
+### Configuration
+
+```typescript
+interface PageAgentConfig {
+    // LLM Configuration (required)
+    baseURL: string
+    apiKey: string
+    model: string
+    temperature?: number
+    maxRetries?: number
+    customFetch?: typeof fetch
+
+    // Agent Configuration
+    language?: 'en-US' | 'zh-CN'
+    maxSteps?: number // default: 20
+    customTools?: Record<string, PageAgentTool> // experimental
+    instructions?: InstructionsConfig
+    transformPageContent?: (content: string) => string | Promise<string>
+    experimentalScriptExecutionTool?: boolean // default: false
+
+    // Lifecycle Hooks (experimental)
+    onBeforeTask?: (agent, result) => void
+    onAfterTask?: (agent, result) => void
+    onBeforeStep?: (agent, stepCount) => void
+    onAfterStep?: (agent, history) => void
+    onDispose?: (agent, reason?) => void
+
+    // Page Controller Configuration
+    enableMask?: boolean // default: true
+    viewportExpansion?: number
+    interactiveBlacklist?: Element[]
+    interactiveWhitelist?: Element[]
+}
+```
+
+### Packages
+
+| Package                       | Description                        |
+| ----------------------------- | ---------------------------------- |
+| `page-agent`                  | Main entry with UI Panel           |
+| `@page-agent/core`            | Core agent logic without UI        |
+| `@page-agent/llms`            | LLM client with retry logic        |
+| `@page-agent/page-controller` | DOM operations and visual feedback |
+| `@page-agent/ui`              | Panel and i18n                     |
+
+### Known Limitations
+
+- Single-page application only (cannot navigate across pages)
+- No visual recognition (relies on DOM structure)
+- Limited interaction support (no hover, drag-drop, canvas operations)
+- See [Limitations](https://alibaba.github.io/page-agent/#/docs/introduction/limitations) for details
+
+### Acknowledgments
+
+This project builds upon the excellent work of [browser-use](https://github.com/browser-use/browser-use). DOM processing components and prompts are adapted from browser-use (MIT License).

CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

CODE_OF_CONDUCT.md

@@ -69,10 +69,10 @@ members of the project's leadership.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][https://www.contributor-covenant.org], version 1.4,
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4,
 available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
 
-----
+---
 
 > Chinese Version
 > 《阿里巴巴开源行为准则》

CONTRIBUTING.md

@@ -92,10 +92,28 @@ We use a simplified monorepo solution with `native npm-workspace + ts reference
 ### Vibe coding with AI
 
 - It's **recommended** to heavily rely on AI (aka "vibe coding") when maintaining **demo pages and tests**.
-- BUT **NOT the core lib!!!** Be very careful if AI ever touched the core lib!!!
+- Be very careful if AI ever touched the core lib!!!
 - Review anything AI wrote before make a commit. You are the author of anything you commit. NOT AI.
 - Update the [AI instructions](AGENTS.md) when structure changed.
 
+If your lame AI assistant does not support [AGENTS.md](https://agents.md/). Add an alias for it:
+
+- claude-code (`CLAUDE.md`)
+
+    ```markdown
+    @AGENTS.md
+    ```
+
+- antigravity (`.agent/rules/alias.md`)
+
+    ```markdown
+    ---
+    trigger: always_on
+    ---
+
+    @../../AGENTS.md
+    ```
+
 ## 🔧 Development Workflows
 
 ### Test With Your Own LLM API
@@ -122,13 +140,13 @@ npm start
 - Start and serve a local `iife` script
 
     ```bash
-    npm run dev:iife # Serving IIFE with auto rebuild at http://localhost:5174/page-agent.js
+    npm run dev:demo # Serving IIFE with auto rebuild at http://localhost:5174/page-agent.demo.js
     ```
 
 - Add a new bookmark
 
     ```javascript
-    javascript:(function(){var s=document.createElement('script');s.src=`http://localhost:5174/page-agent.js?t=${Math.random()}`;s.onload=()=>console.log(%27PageAgent ready!%27);document.head.appendChild(s);})();
+    javascript:(function(){var s=document.createElement('script');s.src=`http://localhost:5174/page-agent.demo.js?t=${Math.random()}`;s.onload=()=>console.log(%27PageAgent ready!%27);document.head.appendChild(s);})();
     ```
 
 - Click the bookmark on any page to load Page-Agent

README-zh.md

@@ -20,34 +20,38 @@
 ## ✨ Features
 
 - **🎯 轻松集成**
+    - 无需 Python，无需无头浏览器，无需浏览器插件。纯页面内脚本。
 - **🔐 端侧运行**
 - **🧠 HTML 脱水**
 - **💬 自然语言接口**
 - **🎨 HITL 交互界面**
 
-## 🗺️ Roadmap
+以及 😉
 
-👉 [**Roadmap**](https://github.com/alibaba/page-agent/issues/96)
+- **🧪 实验性的 Chrome 扩展，支持跨页面控制** - `packages/extension`
+
+👉 [**🗺️ Roadmap**](https://github.com/alibaba/page-agent/issues/96)
 
 ## 🚀 快速开始
 
-### 快速体验 (With Testing LLM)
+### 一行代码集成
 
-最快的体验方式：
+通过我们免费的 Demo LLM 快速体验 PageAgent：
 
 ```html
 <script
-    src="https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js"
+    src="https://registry.npmmirror.com/page-agent/1.0.1/files/dist/iife/page-agent.demo.js"
     crossorigin="true"
 ></script>
 ```
 
-> ⚠️ **仅用于技术评估。** Demo 模型有速率限制和使用限制，生产环境请使用 NPM 方式。
+> - **⚠️ 仅用于技术评估。** Demo LLM 有速率和使用限制，可能随时变更。
+> - **🌷 建议使用自己的 LLM API。**
 
-| Mirrors | URL                                                                                 |
+| Mirrors | URL                                                                                |
-| ------- | ----------------------------------------------------------------------------------- |
+| ------- | ---------------------------------------------------------------------------------- |
-| Global  | https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js                |
+| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.0.1/dist/iife/page-agent.demo.js         |
-| China   | https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js |
+| China   | https://registry.npmmirror.com/page-agent/1.0.1/files/dist/iife/page-agent.demo.js |
 
 ### NPM 安装
 
@@ -76,26 +80,19 @@ PageAgent adopts a simplified monorepo structure:
 
 ```
 packages/
-├── page-agent/          # AI agent with UI Panel(npm: page-agent)
+├── core/                # ** Core agent logic without UI(npm: @page-agent/core) **
-├── core/                # Agent core logic without UI(npm: @page-agent/core)
+├── page-agent/          # Exported agent and demo(npm: page-agent)
 ├── llms/                # LLM 客户端 (npm: @page-agent/llms)
 ├── page-controller/     # DOM 操作 & 蒙层 & 模拟鼠标 (npm: @page-agent/page-controller)
 ├── ui/                  # 面板 & i18n (npm: @page-agent/ui)
-├── cdn/                 # CDN IIFE builds (npm: @page-agent/cdn)
 └── website/             # 文档站点
 ```
 
 ## 🤝 贡献
 
-欢迎社区贡献！以下是参与方式：
+欢迎社区贡献！请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解环境配置和本地开发说明。
 
-1. Fork 并 clone。`git clone https://github.com/alibaba/page-agent.git && cd page-agent`
+请在贡献前阅读[行为准则](CODE_OF_CONDUCT.md)。
-2. 安装依赖: `npm install`
-3. 启动开发: `npm start`
-
-更多详情请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。
-
-请在贡献前阅读我们的[行为准则](CODE_OF_CONDUCT.md)。
 
 ## 👏 致谢
 

README.md

@@ -19,35 +19,39 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua
 
 ## ✨ Features
 
-- **🎯 Easy Integration** - Transform your webpage into an agent with a single script tag.
+- **🎯 Easy Integration**
+    - No python. No headless browser. No browser extension. Just in-page scripts.
 - **🔐 Client-Side Processing**
 - **🧠 DOM Extraction**
 - **💬 Natural Language Interface**
 - **🎨 UI with Human in the loop**
 
-## 🗺️ Roadmap
+And 😉
 
-👉 [**Roadmap**](https://github.com/alibaba/page-agent/issues/96)
+- **🧪 `cross-page` control with an experimental chrome extension** - `packages/extension`
+
+👉 [**🗺️ Roadmap**](https://github.com/alibaba/page-agent/issues/96)
 
 ## 🚀 Quick Start
 
-### Quick Try (With Testing LLM)
+### One-line integration
 
-Fastest way to try PageAgent:
+Fastest way to try PageAgent with our free Demo LLM:
 
 ```html
 <script
-    src="https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js"
+    src="https://cdn.jsdelivr.net/npm/page-agent@1.0.1/dist/iife/page-agent.demo.js"
     crossorigin="true"
 ></script>
 ```
 
-> ⚠️ **For technical evaluation only.** Demo model has rate limits and usage restrictions. Use NPM for production.
+> - **⚠️ For technical evaluation only.** Demo LLM has rate limits and usage restrictions. May change without notice.
+> - **🌷 Bring your own LLM API.**
 
-| Mirrors | URL                                                                                 |
+| Mirrors | URL                                                                                |
-| ------- | ----------------------------------------------------------------------------------- |
+| ------- | ---------------------------------------------------------------------------------- |
-| Global  | https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js                |
+| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.0.1/dist/iife/page-agent.demo.js         |
-| China   | https://registry.npmmirror.com/page-agent/latest/files/dist/iife/page-agent.demo.js |
+| China   | https://registry.npmmirror.com/page-agent/1.0.1/files/dist/iife/page-agent.demo.js |
 
 ### NPM Installation
 
@@ -74,26 +78,19 @@ PageAgent adopts a simplified monorepo structure:
 
 ```
 packages/
-├── page-agent/          # AI agent with UI Panel(npm: page-agent)
+├── core/                # ** Core agent logic without UI(npm: @page-agent/core) **
-├── core/                # Agent core logic without UI(npm: @page-agent/core)
+├── page-agent/          # Exported agent and demo(npm: page-agent)
 ├── llms/                # LLM client (npm: @page-agent/llms)
 ├── page-controller/     # DOM operations & Visual Mask (npm: @page-agent/page-controller)
 ├── ui/                  # Panel & i18n (npm: @page-agent/ui)
-├── cdn/                 # CDN IIFE builds (npm: @page-agent/cdn)
 └── website/             # Demo & Documentation site
 ```
 
 ## 🤝 Contributing
 
-We welcome contributions from the community! Here's how to get started:
+We welcome contributions from the community! Follow our instructions in [CONTRIBUTING.md](CONTRIBUTING.md) for environment setup and local development.
 
-1. Fork and clone. `git clone https://github.com/alibaba/page-agent.git && cd page-agent`
+Please read [Code of Conduct](CODE_OF_CONDUCT.md) before contributing.
-2. Install dependencies: `npm install`
-3. Start development: `npm start`
-
-More details in [CONTRIBUTING.md](CONTRIBUTING.md).
-
-Please read our [Code of Conduct](CODE_OF_CONDUCT.md) before contributing.
 
 ## 👏 Acknowledgments
 

eslint.config.js

@@ -8,7 +8,13 @@ import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
 export default defineConfig([
-	globalIgnores(['**/dist', '**/node_modules', 'packages/website/src/components/ui']),
+	globalIgnores([
+		'**/dist',
+		'**/node_modules',
+		'packages/*/src/components/ui',
+		'**/.wxt',
+		'**/.output',
+	]),
 	{
 		plugins: {
 			'react-hooks': reactHooks,
@@ -69,6 +75,8 @@ export default defineConfig([
 			'react-dom/no-missing-button-type': 'off',
 			'react-x/no-nested-component-definitions': 'off',
 			'@typescript-eslint/prefer-optional-chain': 'off',
+			'@typescript-eslint/use-unknown-in-catch-callback-variable': 'off',
+			'@typescript-eslint/no-unnecessary-type-parameters': 'off',
 
 			// 'require-await': 'off',
 			'@typescript-eslint/require-await': 'off',

package.json

@@ -1,123 +1,124 @@
 {
-	"name": "root",
+    "name": "root",
-	"private": true,
+    "private": true,
-	"version": "0.3.0-beta",
+    "version": "1.0.1",
-	"type": "module",
+    "type": "module",
-	"workspaces": [
+    "workspaces": [
-		"packages/page-controller",
+        "packages/page-controller",
-		"packages/ui",
+        "packages/ui",
-		"packages/llms",
+        "packages/llms",
-		"packages/core",
+        "packages/core",
-		"packages/page-agent",
+        "packages/page-agent",
-		"packages/website"
+        "packages/extension",
-	],
+        "packages/website"
-	"description": "AI-powered UI agent for web applications",
+    ],
-	"author": "Simon<gaomeng1900>",
+    "description": "AI-powered UI agent for web applications",
-	"license": "MIT",
+    "author": "Simon<gaomeng1900>",
-	"repository": {
+    "license": "MIT",
-		"type": "git",
+    "repository": {
-		"url": "https://github.com/alibaba/page-agent.git"
+        "type": "git",
-	},
+        "url": "https://github.com/alibaba/page-agent.git"
-	"homepage": "https://alibaba.github.io/page-agent/",
+    },
-	"engines": {
+    "homepage": "https://alibaba.github.io/page-agent/",
-		"node": ">=20.0.0",
+    "engines": {
-		"npm": ">=10.0.0"
+        "node": ">=20.0.0",
-	},
+        "npm": ">=10.0.0"
-	"scripts": {
+    },
-		"cleanup": "rm -rf packages/*/dist",
+    "scripts": {
-		"start": "npm run dev --workspace=@page-agent/website",
+        "cleanup": "rm -rf packages/*/dist",
-		"build:website": "npm run build:website --workspace=@page-agent/website",
+        "start": "npm run dev --workspace=@page-agent/website",
-		"build:libs": "npm run build --workspaces --if-present",
+        "build:website": "npm run build:website --workspace=@page-agent/website",
-		"build": "npm run build:libs && npm run build:website",
+        "build:libs": "npm run build --workspaces --if-present",
-		"dev:iife": "npm run dev:iife --workspace=page-agent",
+        "build": "npm run build:libs && npm run build:website",
-		"version": "node scripts/sync-version.js",
+        "dev:demo": "npm run dev:demo --workspace=page-agent",
-		"lint": "eslint .",
+        "version": "node scripts/sync-version.js",
-		"prepare": "husky"
+        "lint": "eslint .",
-	},
+        "prepare": "husky"
-	"devDependencies": {
+    },
-		"@commitlint/cli": "^20.3.1",
+    "devDependencies": {
-		"@commitlint/config-conventional": "^20.3.1",
+        "@commitlint/cli": "^20.3.1",
-		"@eslint/js": "^9.39.2",
+        "@commitlint/config-conventional": "^20.3.1",
-		"@microsoft/api-extractor": "^7.55.2",
+        "@eslint/js": "^9.39.2",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
+        "@microsoft/api-extractor": "^7.55.2",
-		"@types/node": "^25.0.7",
+        "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-		"concurrently": "^9.2.1",
+        "@types/node": "^25.0.9",
-		"dotenv": "^17.2.3",
+        "concurrently": "^9.2.1",
-		"eslint": "^9.39.2",
+        "dotenv": "^17.2.3",
-		"eslint-config-prettier": "^10.1.8",
+        "eslint": "^9.39.2",
-		"eslint-plugin-react-dom": "^2.5.7",
+        "eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-dom": "^2.7.2",
-		"eslint-plugin-react-refresh": "^0.4.26",
+        "eslint-plugin-react-hooks": "^7.0.1",
-		"eslint-plugin-react-x": "^2.5.7",
+        "eslint-plugin-react-refresh": "^0.4.26",
-		"globals": "^17.0.0",
+        "eslint-plugin-react-x": "^2.7.2",
-		"husky": "^9.1.7",
+        "globals": "^17.0.0",
-		"lint-staged": "^16.2.4",
+        "husky": "^9.1.7",
-		"prettier": "^3.7.4",
+        "lint-staged": "^16.2.4",
-		"typescript": "^5.9.3",
+        "prettier": "^3.8.0",
-		"typescript-eslint": "^8.53.0",
+        "typescript": "^5.9.3",
-		"unplugin-dts": "^1.0.0-beta.6",
+        "typescript-eslint": "^8.54.0",
-		"vite": "^7.3.1",
+        "unplugin-dts": "^1.0.0-beta.6",
-		"vite-plugin-css-injected-by-js": "^3.5.2"
+        "vite": "^7.3.1",
-	},
+        "vite-plugin-css-injected-by-js": "^3.5.2"
-	"overrides": {
+    },
-		"typescript": "^5.9.3"
+    "overrides": {
-	},
+        "typescript": "^5.9.3"
-	"lint-staged": {
+    },
-		"*.{js,ts,cjs,cts,mjs,mts}": [
+    "lint-staged": {
-			"npx prettier --write --ignore-unknown",
+        "*.{js,ts,cjs,cts,mjs,mts}": [
-			"npx eslint --quiet"
+            "npx prettier --write --ignore-unknown",
-		],
+            "npx eslint --quiet"
-		"*.{jsx,tsx}": [
+        ],
-			"npx prettier --write --ignore-unknown",
+        "*.{jsx,tsx}": [
-			"npx eslint --quiet"
+            "npx prettier --write --ignore-unknown",
-		],
+            "npx eslint --quiet"
-		"*.css": [
+        ],
-			"npx prettier --write --ignore-unknown"
+        "*.css": [
-		]
+            "npx prettier --write --ignore-unknown"
-	},
+        ]
-	"commitlint": {
+    },
-		"extends": [
+    "commitlint": {
-			"@commitlint/config-conventional"
+        "extends": [
-		],
+            "@commitlint/config-conventional"
-		"rules": {
+        ],
-			"subject-case": [
+        "rules": {
-				0,
+            "subject-case": [
-				"never"
+                0,
-			]
+                "never"
-		}
+            ]
-	},
+        }
-	"prettier": {
+    },
-		"singleQuote": true,
+    "prettier": {
-		"semi": false,
+        "singleQuote": true,
-		"useTabs": true,
+        "semi": false,
-		"printWidth": 100,
+        "useTabs": true,
-		"trailingComma": "es5",
+        "printWidth": 100,
-		"plugins": [
+        "trailingComma": "es5",
-			"@trivago/prettier-plugin-sort-imports"
+        "plugins": [
-		],
+            "@trivago/prettier-plugin-sort-imports"
-		"importOrder": [
+        ],
-			"<THIRD_PARTY_MODULES>",
+        "importOrder": [
-			"^(@/).*(?<!css)$",
+            "<THIRD_PARTY_MODULES>",
-			"^[./].*(?<!css)$",
+            "^(@/).*(?<!css)$",
-			".css$"
+            "^[./].*(?<!css)$",
-		],
+            ".css$"
-		"importOrderSeparation": true,
+        ],
-		"importOrderSortSpecifiers": true,
+        "importOrderSeparation": true,
-		"overrides": [
+        "importOrderSortSpecifiers": true,
-			{
+        "overrides": [
-				"files": "*.md",
+            {
-				"options": {
+                "files": "*.md",
-					"useTabs": false,
+                "options": {
-					"tabWidth": 4
+                    "useTabs": false,
-				}
+                    "tabWidth": 4
-			},
+                }
-			{
+            },
-				"files": "*.json",
+            {
-				"options": {
+                "files": "*.json",
-					"useTabs": false,
+                "options": {
-					"tabWidth": 4
+                    "useTabs": false,
-				}
+                    "tabWidth": 4
-			}
+                }
-		]
+            }
-	}
+        ]
+    }
 }

packages/core/package.json

@@ -1,51 +1,51 @@
 {
-	"name": "@page-agent/core",
+    "name": "@page-agent/core",
-	"private": false,
+    "private": false,
-	"version": "0.3.0-beta",
+    "version": "1.0.1",
-	"type": "module",
+    "type": "module",
-	"main": "./dist/esm/page-agent-core.js",
+    "main": "./dist/esm/page-agent-core.js",
-	"module": "./dist/esm/page-agent-core.js",
+    "module": "./dist/esm/page-agent-core.js",
-	"types": "./dist/esm/PageAgentCore.d.ts",
+    "types": "./dist/esm/PageAgentCore.d.ts",
-	"exports": {
+    "exports": {
-		".": {
+        ".": {
-			"types": "./dist/esm/PageAgentCore.d.ts",
+            "types": "./dist/esm/PageAgentCore.d.ts",
-			"import": "./dist/esm/page-agent-core.js",
+            "import": "./dist/esm/page-agent-core.js",
-			"default": "./dist/esm/page-agent-core.js"
+            "default": "./dist/esm/page-agent-core.js"
-		}
+        }
-	},
+    },
-	"files": [
+    "files": [
-		"dist/"
+        "dist/"
-	],
+    ],
-	"description": "GUI agent for web applications - add intelligent automation to any webpage with a single script",
+    "description": "GUI agent for web applications - add intelligent automation to any webpage with a single script",
-	"keywords": [
+    "keywords": [
-		"ai",
+        "ai",
-		"automation",
+        "automation",
-		"ui-agent",
+        "ui-agent",
-		"GUI-agent",
+        "GUI-agent",
-		"browser-automation",
+        "browser-automation",
-		"web-agent",
+        "web-agent",
-		"llm",
+        "llm",
-		"dom-interaction",
+        "dom-interaction",
-		"web-automation",
+        "web-automation",
-		"GUI-simulation"
+        "GUI-simulation"
-	],
+    ],
-	"author": "Simon<gaomeng1900>",
+    "author": "Simon<gaomeng1900>",
-	"license": "MIT",
+    "license": "MIT",
-	"repository": {
+    "repository": {
-		"type": "git",
+        "type": "git",
-		"url": "https://github.com/alibaba/page-agent.git"
+        "url": "https://github.com/alibaba/page-agent.git"
-	},
+    },
-	"homepage": "https://alibaba.github.io/page-agent/",
+    "homepage": "https://alibaba.github.io/page-agent/",
-	"scripts": {
+    "scripts": {
-		"build": "vite build",
+        "build": "vite build",
-		"dev:iife": "concurrently \"vite build --config vite.iife.config.js --watch\" \"npx serve dist/iife -p 5174\"",
+        "dev:iife": "concurrently \"vite build --config vite.iife.config.js --watch\" \"npx serve dist/iife -p 5174\"",
-		"prepublishOnly": "node -e \"const fs=require('fs');['README.md','LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
+        "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{}})\""
+        "postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
-	},
+    },
-	"dependencies": {
+    "dependencies": {
-		"chalk": "^5.6.2",
+        "chalk": "^5.6.2",
-		"zod": "^4.3.5",
+        "zod": "^4.3.5",
-		"@page-agent/llms": "0.3.0-beta",
+        "@page-agent/llms": "1.0.1",
-		"@page-agent/page-controller": "0.3.0-beta"
+        "@page-agent/page-controller": "1.0.1"
-	}
+    }
 }

packages/core/src/PageAgentCore.ts

@@ -2,30 +2,31 @@
  * Copyright (C) 2025 Alibaba Group Holding Limited
  * All rights reserved.
  */
-import { LLM, type Tool } from '@page-agent/llms'
+import { InvokeError, LLM, type Tool } from '@page-agent/llms'
 import type { PageController } from '@page-agent/page-controller'
 import chalk from 'chalk'
 import zod from 'zod'
 
 import { type PageAgentConfig } from './config'
-import { MAX_STEPS } from './config/constants'
+import { DEFAULT_MAX_STEPS } from './config/constants'
 import SYSTEM_PROMPT from './prompts/system_prompt.md?raw'
 import { tools } from './tools'
 import {
 	AgentActivity,
 	AgentReflection,
 	AgentStatus,
-	AgentStep,
+	AgentStepEvent,
 	ExecutionResult,
 	HistoricalEvent,
 	MacroToolInput,
 	MacroToolResult,
 } from './types'
-import { normalizeResponse, trimLines, uid } from './utils'
+import { normalizeResponse, trimLines, uid, waitFor } from './utils'
 import { assert } from './utils/assert'
 
 export { type PageAgentConfig }
 export { tool, type PageAgentTool } from './tools'
+export type * from './types'
 
 /**
  * AI agent for browser DOM automation.
@@ -49,10 +50,9 @@ export { tool, type PageAgentTool } from './tools'
  *    - Types: thinking, executing, executed, retrying, error
  */
 export class PageAgentCore extends EventTarget {
-	config: PageAgentConfig
+	config: PageAgentConfig & { maxSteps: number }
 	id = uid()
 	tools: typeof tools
-	disposed = false
 	task = ''
 	taskId = ''
 
@@ -86,7 +86,8 @@ export class PageAgentCore extends EventTarget {
 	constructor(config: PageAgentConfig & { pageController: PageController }) {
 		super()
 
-		this.config = config
+		this.config = { ...config, maxSteps: config.maxSteps || DEFAULT_MAX_STEPS }
+
 		this.#llm = new LLM(this.config)
 		this.tools = new Map(tools)
 		this.pageController = config.pageController
@@ -94,11 +95,10 @@ export class PageAgentCore extends EventTarget {
 		// Listen to LLM retry events
 		this.#llm.addEventListener('retry', (e) => {
 			const { attempt, maxAttempts } = (e as CustomEvent).detail
-			this.emitActivity({ type: 'retrying', attempt, maxAttempts })
+			this.#emitActivity({ type: 'retrying', attempt, maxAttempts })
 			// Also push to history for panel rendering
 			this.history.push({
-				type: 'error',
+				type: 'retry',
-				errorType: 'retry',
 				message: `LLM retry attempt ${attempt} of ${maxAttempts}`,
 				attempt,
 				maxAttempts,
@@ -106,14 +106,15 @@ export class PageAgentCore extends EventTarget {
 			this.#emitHistoryChange()
 		})
 		this.#llm.addEventListener('error', (e) => {
-			const { error } = (e as CustomEvent).detail
+			const error = (e as CustomEvent).detail.error as Error | InvokeError
+			if ((error as any)?.rawError?.name === 'AbortError') return
 			const message = String(error)
-			this.emitActivity({ type: 'error', message })
+			this.#emitActivity({ type: 'error', message })
 			// Also push to history for panel rendering
 			this.history.push({
 				type: 'error',
-				errorType: 'error',
 				message,
+				rawResponse: (error as InvokeError).rawResponse,
 			})
 			this.#emitHistoryChange()
 		})
@@ -152,7 +153,7 @@ export class PageAgentCore extends EventTarget {
 	 * Emit activity event - for transient UI feedback
 	 * @param activity - Current agent activity
 	 */
-	emitActivity(activity: AgentActivity): void {
+	#emitActivity(activity: AgentActivity): void {
 		this.dispatchEvent(new CustomEvent('activity', { detail: activity }))
 	}
 
@@ -183,12 +184,12 @@ export class PageAgentCore extends EventTarget {
 			this.tools.delete('ask_user')
 		}
 
-		const onBeforeStep = this.config.onBeforeStep || (() => void 0)
+		const onBeforeStep = this.config.onBeforeStep
-		const onAfterStep = this.config.onAfterStep || (() => void 0)
+		const onAfterStep = this.config.onAfterStep
-		const onBeforeTask = this.config.onBeforeTask || (() => void 0)
+		const onBeforeTask = this.config.onBeforeTask
-		const onAfterTask = this.config.onAfterTask || (() => void 0)
+		const onAfterTask = this.config.onAfterTask
 
-		await onBeforeTask.call(this)
+		await onBeforeTask?.(this)
 
 		// Show mask
 		await this.pageController.showMask()
@@ -214,7 +215,7 @@ export class PageAgentCore extends EventTarget {
 			while (true) {
 				await this.#generateObservations(step)
 
-				await onBeforeStep.call(this, step)
+				await onBeforeStep?.(this, step)
 
 				console.group(`step: ${step}`)
 
@@ -223,26 +224,23 @@ export class PageAgentCore extends EventTarget {
 
 				// Thinking
 				console.log(chalk.blue('Thinking...'))
-				this.emitActivity({ type: 'thinking' })
+				this.#emitActivity({ type: 'thinking' })
 
-				const result = await this.#llm.invoke(
+				// invoke LLM
-					[
+
-						{
+				const messages = [
-							role: 'system',
+					{ role: 'system' as const, content: this.#getSystemPrompt() },
-							content: this.#getSystemPrompt(),
+					{ role: 'user' as const, content: await this.#assembleUserPrompt() },
-						},
+				]
-						{
+
-							role: 'user',
+				const tools = { AgentOutput: this.#packMacroTool() }
-							content: await this.#assembleUserPrompt(),
+
-						},
+				const result = await this.#llm.invoke(messages, tools, this.#abortController.signal, {
-					],
+					toolChoiceName: 'AgentOutput',
-					{ AgentOutput: this.#packMacroTool() },
+					normalizeResponse,
-					this.#abortController.signal,
+				})
-					{
+
-						toolChoiceName: 'AgentOutput',
+				// assemble history event
-						normalizeResponse,
-					}
-				)
 
 				const macroResult = result.toolResult as MacroToolResult
 				const input = macroResult.input
@@ -253,7 +251,7 @@ export class PageAgentCore extends EventTarget {
 					next_goal: input.next_goal,
 				}
 				const actionName = Object.keys(input.action)[0]
-				const action: AgentStep['action'] = {
+				const action: AgentStepEvent['action'] = {
 					name: actionName,
 					input: input.action[actionName],
 					output: output,
@@ -261,53 +259,58 @@ export class PageAgentCore extends EventTarget {
 
 				this.history.push({
 					type: 'step',
+					stepIndex: step,
 					reflection,
 					action,
 					usage: result.usage,
-				} as AgentStep)
+					rawResponse: result.rawResponse,
+					rawRequest: result.rawRequest,
+				} as AgentStepEvent)
 				this.#emitHistoryChange()
 
+				//
+
 				console.log(chalk.green('Step finished:'), actionName)
 				console.groupEnd()
 
-				await onAfterStep.call(this, this.history)
+				await onAfterStep?.(this, this.history)
 
 				step++
-				if (step > MAX_STEPS) {
+				if (step > this.config.maxSteps) {
-					this.#onDone('Step count exceeded maximum limit', false)
+					this.#onDone(false)
 					const result: ExecutionResult = {
 						success: false,
 						data: 'Step count exceeded maximum limit',
 						history: this.history,
 					}
-					await onAfterTask.call(this, result)
+					await onAfterTask?.(this, result)
 					return result
 				}
 				if (actionName === 'done') {
 					const success = action.input?.success ?? false
 					const text = action.input?.text || 'no text provided'
 					console.log(chalk.green.bold('Task completed'), success, text)
-					this.#onDone(text, success)
+					this.#onDone(success)
 					const result: ExecutionResult = {
 						success,
 						data: text,
 						history: this.history,
 					}
-					await onAfterTask.call(this, result)
+					await onAfterTask?.(this, result)
 					return result
 				}
 			}
 		} catch (error: unknown) {
 			console.error('Task failed', error)
 			const errorMessage = String(error)
-			this.emitActivity({ type: 'error', message: errorMessage })
+			this.#emitActivity({ type: 'error', message: errorMessage })
-			this.#onDone(errorMessage, false)
+			this.#onDone(false)
 			const result: ExecutionResult = {
 				success: false,
 				data: errorMessage,
 				history: this.history,
 			}
-			await onAfterTask.call(this, result)
+			await onAfterTask?.(this, result)
 			return result
 		}
 	}
@@ -373,7 +376,7 @@ export class PageAgentCore extends EventTarget {
 				console.log(chalk.blue.bold(`Executing tool: ${toolName}`), toolInput)
 
 				// Emit executing activity
-				this.emitActivity({ type: 'executing', tool: toolName, input: toolInput })
+				this.#emitActivity({ type: 'executing', tool: toolName, input: toolInput })
 
 				const startTime = Date.now()
 
@@ -384,7 +387,7 @@ export class PageAgentCore extends EventTarget {
 				console.log(chalk.green.bold(`Tool (${toolName}) executed for ${duration}ms`), result)
 
 				// Emit executed activity
-				this.emitActivity({
+				this.#emitActivity({
 					type: 'executed',
 					tool: toolName,
 					input: toolInput,
@@ -410,6 +413,10 @@ export class PageAgentCore extends EventTarget {
 	 * Get system prompt, dynamically replace language settings based on configured language
 	 */
 	#getSystemPrompt(): string {
+		if (this.config.customSystemPrompt) {
+			return this.config.customSystemPrompt
+		}
+
 		let systemPrompt = SYSTEM_PROMPT
 
 		const targetLanguage = this.config.language === 'zh-CN' ? '中文' : 'English'
@@ -472,10 +479,11 @@ export class PageAgentCore extends EventTarget {
 		if (currentURL !== this.states.lastURL) {
 			this.pushObservation(`Page navigated to → ${currentURL}`)
 			this.states.lastURL = currentURL
+			await waitFor(0.5) // wait for page to stabilize
 		}
 
 		// Warn about remaining steps
-		const remaining = MAX_STEPS - stepCount
+		const remaining = this.config.maxSteps - stepCount
 		if (remaining === 5) {
 			this.pushObservation(
 				`⚠️ Only ${remaining} steps remaining. Consider wrapping up or calling done with partial results.`
@@ -505,8 +513,8 @@ export class PageAgentCore extends EventTarget {
 			${this.task}
 			</user_request>
 			<step_info>
-			Step ${stepCount + 1} of ${MAX_STEPS} max possible steps
+			Step ${stepCount + 1} of ${this.config.maxSteps} max possible steps
-			Current date and time: ${new Date().toISOString()}
+			Current date and time: ${new Date().toLocaleString()}
 			</step_info>
 			</agent_state>
 		`
@@ -547,7 +555,7 @@ export class PageAgentCore extends EventTarget {
 		return trimLines(prompt)
 	}
 
-	#onDone(text: string, success = true) {
+	#onDone(success = true) {
 		this.pageController.cleanUpHighlights()
 		this.pageController.hideMask() // No await - fire and forget
 		this.#setStatus(success ? 'completed' : 'error')
@@ -563,8 +571,6 @@ export class PageAgentCore extends EventTarget {
 		}
 
 		return trimLines(`<browser_state>
-			Current Page: [${state.title}](${state.url})
-
 			${state.header}
 			${content}
 			${state.footer}
@@ -573,16 +579,15 @@ export class PageAgentCore extends EventTarget {
 		`)
 	}
 
-	dispose(reason?: string) {
+	dispose() {
 		console.log('Disposing PageAgent...')
-		this.disposed = true
 		this.pageController.dispose()
-		this.history = []
+		// this.history = []
-		this.#abortController.abort(reason ?? 'PageAgent disposed')
+		this.#abortController.abort()
 
 		// Emit dispose event for UI cleanup
 		this.dispatchEvent(new Event('dispose'))
 
-		this.config.onDispose?.call(this, reason)
+		this.config.onDispose?.(this)
 	}
 }

packages/core/src/config/constants.ts

@@ -1,2 +1 @@
-// Agent-specific constants (LLM constants moved to @page-agent/llms)
+export const DEFAULT_MAX_STEPS = 20
-export const MAX_STEPS = 20

packages/core/src/config/index.ts

@@ -1,5 +1,5 @@
 import type { LLMConfig } from '@page-agent/llms'
-import type { PageController, PageControllerConfig } from '@page-agent/page-controller'
+import type { PageControllerConfig } from '@page-agent/page-controller'
 
 import type { PageAgentCore } from '../PageAgentCore'
 import type { PageAgentTool } from '../tools'
@@ -14,6 +14,12 @@ export interface AgentConfig {
 	// theme?: 'light' | 'dark'
 	language?: SupportedLanguage
 
+	/**
+	 * Maximum number of steps the agent can take per task.
+	 * @default 20
+	 */
+	maxSteps?: number
+
 	/**
 	 * Custom tools to extend PageAgent capabilities
 	 * @experimental
@@ -63,20 +69,52 @@ export interface AgentConfig {
 		getPageInstructions?: (url: string) => string | undefined | null
 	}
 
-	// lifecycle hooks
+	/**
-	// @todo: use event instead of hooks
+	 * Lifecycle hooks for task execution.
-	// @todo: remove `this` binding, pass agent as explicit parameter instead
+	 * @experimental API may change in future versions.
-
+	 *
-	onBeforeStep?: (this: PageAgentCore, stepCnt: number) => Promise<void> | void
+	 * All hooks receive the agent instance as first parameter.
-	onAfterStep?: (this: PageAgentCore, history: HistoricalEvent[]) => Promise<void> | void
+	 */
-	onBeforeTask?: (this: PageAgentCore) => Promise<void> | void
-	onAfterTask?: (this: PageAgentCore, result: ExecutionResult) => Promise<void> | void
 
 	/**
-	 * @note this hook can block the disposal process
+	 * Called before each step execution.
-	 * @todo remove `this` binding, pass agent as explicit parameter instead
+	 * @experimental
+	 * @param agent - The PageAgentCore instance
+	 * @param stepCount - Current step number (0-indexed)
 	 */
-	onDispose?: (this: PageAgentCore, reason?: string) => void
+	onBeforeStep?: (agent: PageAgentCore, stepCount: number) => Promise<void> | void
+
+	/**
+	 * Called after each step execution.
+	 * @experimental
+	 * @param agent - The PageAgentCore instance
+	 * @param history - Current history of events
+	 */
+	onAfterStep?: (agent: PageAgentCore, history: HistoricalEvent[]) => Promise<void> | void
+
+	/**
+	 * Called before task execution starts.
+	 * @experimental
+	 * @param agent - The PageAgentCore instance
+	 */
+	onBeforeTask?: (agent: PageAgentCore) => Promise<void> | void
+
+	/**
+	 * Called after task execution completes (success or failure).
+	 * @experimental
+	 * @param agent - The PageAgentCore instance
+	 * @param result - The execution result
+	 */
+	onAfterTask?: (agent: PageAgentCore, result: ExecutionResult) => Promise<void> | void
+
+	/**
+	 * Called when the agent is disposed.
+	 * @experimental
+	 * @note This hook can block the disposal process if it's async.
+	 * @param agent - The PageAgentCore instance
+	 * @param reason - Optional reason for disposal
+	 */
+	onDispose?: (agent: PageAgentCore, reason?: string) => void
 
 	// page behavior hooks
 
@@ -105,19 +143,10 @@ export interface AgentConfig {
 	transformPageContent?: (content: string) => Promise<string> | string
 
 	/**
-	 * TODO: @unimplemented
+	 * Completely override the default system prompt.
-	 * hook when action causes a new page to be opened
+	 * @experimental Use with caution - incorrect prompts may break agent behavior.
-	 * @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
+	customSystemPrompt?: string
-
-	/**
-	 * 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
 }
 
 export type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig

packages/core/src/types.ts

@@ -33,8 +33,9 @@ export interface MacroToolResult {
 /**
  * A single agent step with reflection and action
  */
-export interface AgentStep {
+export interface AgentStepEvent {
 	type: 'step'
+	stepIndex: number
 	reflection: Partial<AgentReflection>
 	action: {
 		name: string
@@ -48,6 +49,10 @@ export interface AgentStep {
 		cachedTokens?: number
 		reasoningTokens?: number
 	}
+	/** Raw LLM response for debugging */
+	rawResponse?: unknown
+	/** Raw LLM request for debugging */
+	rawRequest?: unknown
 }
 
 /**
@@ -66,20 +71,33 @@ export interface UserTakeoverEvent {
 }
 
 /**
- * Error event (retry or error from LLM)
+ * Retry event - LLM call is being retried
  */
-export interface ErrorEvent {
+export interface RetryEvent {
-	type: 'error'
+	type: 'retry'
-	errorType: 'retry' | 'error'
 	message: string
-	attempt?: number
+	attempt: number
-	maxAttempts?: number
+	maxAttempts: number
+}
+
+/**
+ * Error event - fatal error from LLM or execution
+ */
+export interface AgentErrorEvent {
+	type: 'error'
+	message: string
+	rawResponse?: unknown
 }
 
 /**
  * Union type for all history events
  */
-export type HistoricalEvent = AgentStep | ObservationEvent | UserTakeoverEvent | ErrorEvent
+export type HistoricalEvent =
+	| AgentStepEvent
+	| ObservationEvent
+	| UserTakeoverEvent
+	| RetryEvent
+	| AgentErrorEvent
 
 /**
  * Agent execution status

packages/extension/.prettierignore

@@ -0,0 +1,2 @@
+.wxt
+src/components/ui

packages/extension/PRIVACY.md

@@ -0,0 +1,57 @@
+# Privacy Policy for Page Agent Extension
+
+**Last updated:** January 2026
+
+## Overview
+
+Page Agent Extension is a browser automation tool that uses AI to help you interact with web pages. This policy explains what data is processed and under what circumstances.
+
+## Data Processing
+
+### Local Processing
+
+The extension performs DOM analysis and automation actions **locally in your browser**. Your browsing history, passwords, and form data are not accessed or collected by the extension itself.
+
+### Data Transmission
+
+Data is transmitted to external servers **only when you initiate an automation task**. When this occurs:
+
+- Your task instructions (natural language commands)
+- Sanitized page structure (simplified DOM, excluding sensitive form values)
+
+are sent to the LLM API endpoint configured in **your settings**.
+
+**If you configure a third-party LLM provider** (e.g., OpenAI, Anthropic, or others), data is sent directly to that provider. Their privacy policies apply.
+
+**If you use our testing endpoint**, your requests are proxied to [DeepSeek](https://deepseek.com) for AI processing. Regarding this test endpoint:
+
+- This endpoint is provided for evaluation purposes only and is not recommended for production or daily use
+- We do **not** store your task content, page content, or visited URLs
+- Minimal logging (timestamps, request metadata, IP addresses) may occur for abuse prevention and service stability
+- DeepSeek's [Privacy Policy](https://cdn.deepseek.com/policies/en-US/deepseek-privacy-policy.html) applies to their processing of your requests
+
+## Data Storage
+
+- **Local storage only**: Your configuration (API endpoint, API key, model selection) is stored in your browser via `chrome.storage.local`
+- **No cloud sync**: Configuration is not synced to any external server
+- **No analytics**: The extension does not include any analytics or tracking code
+
+## Your Control
+
+- The extension is open source and can be audited by anyone
+- You choose which LLM provider to use
+- You may configure your own API endpoint at any time
+- You can clear all stored data by removing the extension
+
+## Changes to This Policy
+
+We may update this policy as the extension evolves. Significant changes will be noted in the extension's release notes.
+
+## Contact
+
+For questions about this privacy policy:
+https://github.com/alibaba/page-agent/issues
+
+---
+
+Source code: https://github.com/alibaba/page-agent

packages/extension/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/extension/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@page-agent/ext",
+    "private": true,
+    "version": "0.1.0-b4",
+    "type": "module",
+    "scripts": {
+        "dev": "wxt",
+        "build:ext": "wxt build",
+        "zip": "wxt zip",
+        "postinstall": "wxt prepare"
+    },
+    "devDependencies": {
+        "@tailwindcss/vite": "^4.1.18",
+        "@types/chrome": "^0.1.34",
+        "@types/react": "^19.2.8",
+        "@types/react-dom": "^19.2.1",
+        "@vitejs/plugin-react-swc": "^4.1.0",
+        "@wxt-dev/module-react": "^1.1.5",
+        "i18next": "^25.7.4",
+        "i18next-browser-languagedetector": "^8.2.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-i18next": "^16.5.2",
+        "tailwindcss": "^4.1.14",
+        "tw-animate-css": "^1.4.0",
+        "wouter": "^3.9.0",
+        "wxt": "^0.20.13"
+    },
+    "dependencies": {
+        "@page-agent/core": "1.0.1",
+        "@page-agent/llms": "1.0.1",
+        "@page-agent/page-controller": "1.0.1",
+        "@page-agent/ui": "1.0.1",
+        "@radix-ui/react-hover-card": "^1.1.15",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-label": "^2.1.8",
+        "@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.563.0",
+        "motion": "^12.29.2",
+        "next-themes": "^0.4.6",
+        "rough-notation": "^0.5.1",
+        "simple-icons": "^16.5.0",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^3.4.0"
+    }
+}

packages/extension/src/agent/.prettierignore

@@ -0,0 +1 @@
+system_prompt.md

packages/extension/src/agent/MultiPageAgent.ts

@@ -0,0 +1,74 @@
+import { type PageAgentConfig, PageAgentCore } from '@page-agent/core'
+
+import { RemotePageController } from './RemotePageController'
+import { TabsController } from './TabsController'
+import SYSTEM_PROMPT from './system_prompt.md?raw'
+import { createTabTools } from './tabTools'
+
+/**
+ * MultiPageAgent
+ * - use with extension
+ * - can be used from a side panel or a content script
+ */
+export class MultiPageAgent extends PageAgentCore {
+	constructor(config: Omit<PageAgentConfig, 'pageController'>) {
+		const tabsController = new TabsController()
+		const pageController = new RemotePageController(tabsController)
+		const customTools = createTabTools(tabsController)
+
+		/**
+		 * When the agent is in side-panel and user closed the side-panel.
+		 * There is no chance for isAgentRunning to be set false.
+		 * (unload event doesn't work well in side panel.)
+		 * (I'm trying not to use long-lived connection because the lifecycle of a sw is hard to predict.)
+		 * This heartbeat mechanism acts as a backup.
+		 */
+		let heartBeatInterval: null | number = null
+
+		super({
+			...config,
+			pageController: pageController as any,
+			customTools: customTools,
+			customSystemPrompt: SYSTEM_PROMPT,
+
+			onBeforeTask: async (agent) => {
+				await tabsController.init(agent.task)
+
+				heartBeatInterval = window.setInterval(() => {
+					chrome.storage.local.set({
+						agentHeartbeat: Date.now(),
+					})
+				}, 1_000)
+
+				await chrome.storage.local.set({
+					isAgentRunning: true,
+				})
+			},
+
+			onAfterTask: async () => {
+				if (heartBeatInterval) {
+					window.clearInterval(heartBeatInterval)
+					heartBeatInterval = null
+				}
+
+				await chrome.storage.local.set({
+					isAgentRunning: false,
+				})
+			},
+
+			onDispose: () => {
+				if (heartBeatInterval) {
+					window.clearInterval(heartBeatInterval)
+					heartBeatInterval = null
+				}
+
+				chrome.storage.local.set({
+					isAgentRunning: false,
+				})
+
+				// no need to dispose tabsController and pageController
+				// as they do not keep references
+			},
+		})
+	}
+}

packages/extension/src/agent/RemotePageController.background.ts

@@ -0,0 +1,35 @@
+/**
+ * background logics for RemotePageController
+ * - redirect messages from RemotePageController(Agent, extension pages) to ContentScript
+ */
+
+export function handlePageControlMessage(
+	message: { type: 'PAGE_CONTROL'; action: string; payload: any; targetTabId: number },
+	sender: chrome.runtime.MessageSender,
+	sendResponse: (response: unknown) => void
+): true | undefined {
+	const { action, payload, targetTabId } = message
+
+	if (action === 'get_my_tab_id') {
+		sendResponse({ tabId: sender.tab?.id || null })
+		return
+	}
+
+	chrome.tabs
+		.sendMessage(targetTabId, {
+			type: 'PAGE_CONTROL',
+			action,
+			payload,
+		})
+		.then((result) => {
+			sendResponse(result)
+		})
+		.catch((error) => {
+			sendResponse({
+				success: false,
+				error: error instanceof Error ? error.message : String(error),
+			})
+		})
+
+	return true // async response
+}

packages/extension/src/agent/RemotePageController.content.ts

@@ -0,0 +1,128 @@
+/**
+ * content script for RemotePageController
+ */
+import { PageController } from '@page-agent/page-controller'
+
+export function initPageController() {
+	let pageController: PageController | null = null
+	let intervalID: number | null = null
+
+	const myTabIdPromise = chrome.runtime
+		.sendMessage({ type: 'PAGE_CONTROL', action: 'get_my_tab_id' })
+		.then((response) => {
+			return (response as { tabId: number | null }).tabId
+		})
+
+	function getPC(): PageController {
+		if (!pageController) {
+			pageController = new PageController({ enableMask: false })
+		}
+		return pageController
+	}
+
+	intervalID = window.setInterval(async () => {
+		const agentHeartbeat = (await chrome.storage.local.get('agentHeartbeat')).agentHeartbeat
+		const now = Date.now()
+		const agentInTouch = typeof agentHeartbeat === 'number' && now - agentHeartbeat < 2_000
+
+		const isAgentRunning = (await chrome.storage.local.get('isAgentRunning')).isAgentRunning
+		const currentTabId = (await chrome.storage.local.get('currentTabId')).currentTabId
+
+		const shouldShowMask = isAgentRunning && agentInTouch && currentTabId === (await myTabIdPromise)
+
+		if (shouldShowMask) {
+			const pc = getPC()
+			pc.initMask()
+			await pc.showMask()
+		} else {
+			// await getPC().hideMask()
+			if (pageController) {
+				pageController.hideMask()
+				pageController.cleanUpHighlights()
+			}
+		}
+
+		if (!isAgentRunning && agentInTouch) {
+			if (pageController) {
+				pageController.dispose()
+				pageController = null
+			}
+		}
+	}, 500)
+
+	chrome.runtime.onMessage.addListener((message, sender, sendResponse): true | undefined => {
+		if (message.type !== 'PAGE_CONTROL') {
+			// sendResponse({
+			// 	success: false,
+			// 	error: `[RemotePageController.ContentScript]: Invalid message type: ${message.type}`,
+			// })
+			return
+		}
+
+		const { action, payload } = message
+		const methodName = getMethodName(action)
+
+		const pc = getPC() as any
+
+		switch (action) {
+			case 'get_last_update_time':
+			case 'get_browser_state':
+			case 'update_tree':
+			case 'clean_up_highlights':
+			case 'click_element':
+			case 'input_text':
+			case 'select_option':
+			case 'scroll':
+			case 'scroll_horizontally':
+			case 'execute_javascript':
+				pc[methodName](...(payload || []))
+					.then((result: any) => sendResponse(result))
+					.catch((error: any) =>
+						sendResponse({
+							success: false,
+							error: error instanceof Error ? error.message : String(error),
+						})
+					)
+				break
+
+			default:
+				sendResponse({
+					success: false,
+					error: `Unknown PAGE_CONTROL action: ${action}`,
+				})
+		}
+
+		return true
+	})
+}
+
+function getMethodName(action: string): string {
+	switch (action) {
+		case 'get_last_update_time':
+			return 'getLastUpdateTime' as const
+		case 'get_browser_state':
+			return 'getBrowserState' as const
+		case 'update_tree':
+			return 'updateTree' as const
+		case 'clean_up_highlights':
+			return 'cleanUpHighlights' as const
+
+		// DOM actions
+
+		case 'click_element':
+			return 'clickElement' as const
+		case 'input_text':
+			return 'inputText' as const
+		case 'select_option':
+			return 'selectOption' as const
+		case 'scroll':
+			return 'scroll' as const
+		case 'scroll_horizontally':
+			return 'scrollHorizontally' as const
+		case 'execute_javascript':
+			return 'executeJavascript' as const
+
+		default:
+			return action
+	}
+}

packages/extension/src/agent/RemotePageController.ts

@@ -0,0 +1,192 @@
+import type { BrowserState } from '@page-agent/page-controller'
+
+import type { TabsController } from './TabsController'
+
+/**
+ * Agent side page controller.
+ * - live in the agent env (extension page or content script)
+ * - communicates with remote PageController via sw
+ */
+export class RemotePageController {
+	private tabsController: TabsController
+
+	constructor(tabsController: TabsController) {
+		this.tabsController = tabsController
+	}
+
+	get currentTabId(): number | null {
+		return this.tabsController.currentTabId
+	}
+
+	async getCurrentUrl(): Promise<string> {
+		if (!this.currentTabId) return ''
+		const { url } = await this.tabsController.getTabInfo(this.currentTabId)
+		return url || ''
+	}
+
+	async getCurrentTitle(): Promise<string> {
+		if (!this.currentTabId) return ''
+		const { title } = await this.tabsController.getTabInfo(this.currentTabId)
+		return title || ''
+	}
+
+	get currentTabTitle(): Promise<string> {
+		return this.getCurrentTitle()
+	}
+
+	async getLastUpdateTime(): Promise<number> {
+		if (!this.currentTabId) throw new Error('tabsController not initialized.')
+
+		return await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: 'get_last_update_time',
+			targetTabId: this.currentTabId,
+		})
+	}
+
+	// getBrowserState
+	async getBrowserState(): Promise<BrowserState> {
+		let browserState = {} as BrowserState
+
+		if (!this.currentTabId || !isContentScriptAllowed(await this.currentTabUrl)) {
+			browserState = {
+				url: await this.currentTabUrl,
+				title: await this.currentTabTitle,
+				header: '',
+				content: '(empty page)',
+				footer: '',
+			}
+		} else {
+			browserState = await chrome.runtime.sendMessage({
+				type: 'PAGE_CONTROL',
+				action: 'get_browser_state',
+				targetTabId: this.currentTabId,
+			})
+		}
+
+		const sum = await this.tabsController.summarizeTabs()
+		browserState.header = sum + '\n\n' + (browserState.header || '')
+
+		return browserState
+	}
+
+	// updateTree
+	async updateTree(): Promise<void> {
+		if (!this.currentTabId || !isContentScriptAllowed(await this.currentTabUrl)) {
+			return
+		}
+
+		await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: 'update_tree',
+			targetTabId: this.currentTabId,
+		})
+	}
+
+	// cleanUpHighlights
+	async cleanUpHighlights(): Promise<void> {
+		if (!this.currentTabId || !isContentScriptAllowed(await this.currentTabUrl)) {
+			return
+		}
+
+		await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: 'clean_up_highlights',
+			targetTabId: this.currentTabId,
+		})
+	}
+
+	// clickElement
+	async clickElement(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('click_element', args)
+	}
+
+	// inputText
+	async inputText(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('input_text', args)
+	}
+
+	// selectOption
+	async selectOption(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('select_option', args)
+	}
+
+	// scroll
+	async scroll(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('scroll', args)
+	}
+
+	// scrollHorizontally
+	async scrollHorizontally(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('scroll_horizontally', args)
+	}
+
+	// executeJavascript
+	async executeJavascript(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('execute_javascript', args)
+	}
+
+	/** @note Managed by content script via storage polling. */
+	async showMask(): Promise<void> {}
+	/** @note Managed by content script via storage polling. */
+	async hideMask(): Promise<void> {}
+	/** @note Managed by content script via storage polling. */
+	dispose(): void {}
+
+	private async preCheck() {
+		if (!this.currentTabId) {
+			return 'RemotePageController not initialized.'
+		}
+
+		if (!isContentScriptAllowed(await this.currentTabUrl)) {
+			return 'Operation not allowed on this page. Use open_new_tab to navigate to a web page first.'
+		}
+
+		return null
+	}
+
+	private async remoteCallDomAction(action: string, payload: any[]): Promise<DomActionReturn> {
+		const preCheckError = await this.preCheck()
+		if (preCheckError) {
+			return { success: false, message: preCheckError }
+		}
+
+		return await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: action,
+			targetTabId: this.currentTabId!,
+			payload,
+		})
+	}
+
+	private get currentTabUrl(): Promise<string> {
+		return this.getCurrentUrl()
+	}
+}
+
+interface DomActionReturn {
+	success: boolean
+	message: string
+}
+
+/**
+ * Check if a URL can run content scripts.
+ */
+function isContentScriptAllowed(url: string | undefined): boolean {
+	if (!url) return false
+
+	const restrictedPatterns = [
+		/^chrome:\/\//,
+		/^chrome-extension:\/\//,
+		/^about:/,
+		/^edge:\/\//,
+		/^brave:\/\//,
+		/^opera:\/\//,
+		/^vivaldi:\/\//,
+		/^file:\/\//,
+		/^view-source:/,
+		/^devtools:\/\//,
+	]
+
+	return !restrictedPatterns.some((pattern) => pattern.test(url))
+}

packages/extension/src/agent/TabsController.background.ts

@@ -0,0 +1,107 @@
+/**
+ * background logics for TabsController
+ */
+import type { TabAction } from './TabsController'
+
+export function handleTabControlMessage(
+	message: { type: 'TAB_CONTROL'; action: TabAction; payload: any },
+	sender: chrome.runtime.MessageSender,
+	sendResponse: (response: unknown) => void
+): true | undefined {
+	const { action, payload } = message
+
+	switch (action as TabAction) {
+		case 'get_active_tab': {
+			chrome.tabs
+				.query({ active: true, currentWindow: true })
+				.then((tabs) => {
+					const tabId = tabs.length > 0 ? tabs[0].id || null : null
+					sendResponse({ success: true, tabId })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'get_tab_info': {
+			chrome.tabs
+				.get(payload.tabId)
+				.then((tab) => {
+					const result = { title: tab.title || '', url: tab.url || '' }
+					sendResponse(result)
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'open_new_tab': {
+			chrome.tabs
+				.create({ url: payload.url, active: false })
+				.then((newTab) => {
+					// @todo: wait for tab to be fully loaded
+					sendResponse({ success: true, tabId: newTab.id, windowId: newTab.windowId })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'create_tab_group': {
+			chrome.tabs
+				.group({ tabIds: payload.tabIds, createProperties: { windowId: payload.windowId } })
+				.then((groupId) => {
+					console.log('Created tab group', groupId)
+					sendResponse({ success: true, groupId })
+				})
+				.catch((error) => {
+					console.error('Failed to create tab group', error)
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'update_tab_group': {
+			chrome.tabGroups
+				.update(payload.groupId, payload.properties)
+				.then(() => {
+					sendResponse({ success: true })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'add_tab_to_group': {
+			chrome.tabs
+				.group({ tabIds: payload.tabId, groupId: payload.groupId })
+				.then(() => {
+					sendResponse({ success: true })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'close_tab': {
+			chrome.tabs
+				.remove(payload.tabId)
+				.then(() => {
+					sendResponse({ success: true })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		default:
+			sendResponse({ error: `Unknown action: ${action}` })
+			return
+	}
+}

packages/extension/src/agent/TabsController.ts

@@ -0,0 +1,271 @@
+/**
+ * Controller for managing browser tabs.
+ * - live in the agent env (extension page or content script)
+ * - no chrome apis. call sw for tab operations
+ */
+export class TabsController extends EventTarget {
+	currentTabId: number | null = null
+
+	private tabs: TabMeta[] = []
+	private initialTabId: number | null = null
+	private tabGroupId: number | null = null
+	private task: string = ''
+	private windowId: number | null = null
+
+	async init(task: string) {
+		this.task = task
+		this.tabs = []
+		this.currentTabId = null
+		this.tabGroupId = null
+		this.initialTabId = null
+		this.windowId = null
+
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'get_active_tab',
+		})
+
+		this.initialTabId = result.tabId
+		this.currentTabId = result.tabId
+
+		this.tabs.push({
+			id: result.tabId,
+			isInitial: true,
+		})
+
+		if (!this.initialTabId) {
+			throw new Error('Failed to get initial tab ID')
+		}
+
+		await this.updateCurrentTabId(this.currentTabId)
+
+		const tabChangeHandler = (message: any): void => {
+			if (message.type !== 'TAB_CHANGE') {
+				// throw new Error(`[TabsController]: Invalid message type: ${message.type}`)
+				return
+			}
+
+			if (message.action === 'created') {
+				const tab = message.payload.tab as chrome.tabs.Tab
+				if (tab.groupId === this.tabGroupId && tab.id != null) {
+					// Tab created in our controlled group
+					if (!this.tabs.find((t) => t.id === tab.id)) {
+						this.tabs.push({ id: tab.id, isInitial: false })
+					}
+					this.switchToTab(tab.id)
+				}
+			} else if (message.action === 'removed') {
+				const { tabId } = message.payload as { tabId: number }
+				const targetTab = this.tabs.find((t) => t.id === tabId)
+				if (targetTab) {
+					this.tabs = this.tabs.filter((t) => t.id !== tabId)
+					if (this.currentTabId === tabId) {
+						const newCurrentTab = this.tabs[this.tabs.length - 1] || null
+						if (newCurrentTab) {
+							this.switchToTab(newCurrentTab.id)
+						} else {
+							this.updateCurrentTabId(null)
+						}
+					}
+				}
+			}
+		}
+
+		chrome.runtime.onMessage.addListener(tabChangeHandler)
+
+		this.addEventListener('dispose', () => {
+			chrome.runtime.onMessage.removeListener(tabChangeHandler)
+		})
+	}
+
+	async openNewTab(url: string): Promise<{ success: boolean; tabId: number; message: string }> {
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'open_new_tab',
+			payload: { url },
+		})
+
+		if (!result.success) {
+			throw new Error(`Failed to open new tab: ${result.error}`)
+		}
+
+		const tabId = result.tabId as number
+		const windowId = result.windowId as number
+
+		this.windowId = windowId
+
+		this.tabs.push({
+			id: tabId,
+			isInitial: false,
+		})
+
+		await this.switchToTab(tabId)
+
+		if (!this.tabGroupId) {
+			const result = await chrome.runtime.sendMessage({
+				type: 'TAB_CONTROL',
+				action: 'create_tab_group',
+				payload: { tabIds: [tabId], windowId: this.windowId },
+			})
+
+			if (!result.success) {
+				throw new Error(`Failed to create tab group: ${result.error}`)
+			}
+
+			const groupId = result.groupId as number
+
+			this.tabGroupId = groupId
+
+			await chrome.runtime.sendMessage({
+				type: 'TAB_CONTROL',
+				action: 'update_tab_group',
+				payload: {
+					groupId: this.tabGroupId,
+					properties: {
+						title: `PageAgent(${this.task})`,
+						color: randomColor(),
+						collapsed: false,
+					},
+				},
+			})
+		} else {
+			await chrome.runtime.sendMessage({
+				type: 'TAB_CONTROL',
+				action: 'add_tab_to_group',
+				payload: { tabId: result.tabId, groupId: this.tabGroupId },
+			})
+		}
+
+		// wait for the new tab to be fully loaded
+		// @todo
+		await new Promise((resolve) => setTimeout(resolve, 500))
+
+		return {
+			success: true,
+			tabId,
+			message: `Opened new tab ID ${tabId} with URL ${url}`,
+		}
+	}
+
+	async switchToTab(tabId: number): Promise<{ success: boolean; message: string }> {
+		const targetTab = this.tabs.find((t) => t.id === tabId)
+		if (!targetTab) {
+			return {
+				success: false,
+				message: `Tab ID ${tabId} not found in tab list.`,
+			}
+		}
+
+		await this.updateCurrentTabId(tabId)
+
+		return {
+			success: true,
+			message: `Switched to tab ID ${tabId}.`,
+		}
+	}
+
+	async closeTab(tabId: number): Promise<{ success: boolean; message: string }> {
+		const targetTab = this.tabs.find((t) => t.id === tabId)
+		if (!targetTab) {
+			return {
+				success: false,
+				message: `Tab ID ${tabId} not found in tab list.`,
+			}
+		}
+		if (targetTab.isInitial) {
+			return {
+				success: false,
+				message: `Cannot close the initial tab ID ${tabId}.`,
+			}
+		}
+
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'close_tab',
+			payload: { tabId },
+		})
+
+		if (result.success) {
+			this.tabs = this.tabs.filter((t) => t.id !== tabId)
+			if (this.currentTabId === tabId) {
+				const newCurrentTab = this.tabs[this.tabs.length - 1] || null
+				if (newCurrentTab) {
+					await this.switchToTab(newCurrentTab.id)
+				} else {
+					await this.updateCurrentTabId(null)
+				}
+			}
+
+			return {
+				success: true,
+				message: `Closed tab ID ${tabId}.`,
+			}
+		} else {
+			return {
+				success: false,
+				message: `Failed to close tab ID ${tabId}: ${result.error}`,
+			}
+		}
+	}
+
+	async updateCurrentTabId(tabId: number | null) {
+		this.currentTabId = tabId
+		await chrome.storage.local.set({ currentTabId: tabId })
+	}
+
+	async getTabInfo(tabId: number): Promise<{ title: string; url: string }> {
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'get_tab_info',
+			payload: { tabId },
+		})
+		return result
+	}
+
+	async summarizeTabs(): Promise<string> {
+		const summaries = [`| Tab ID | URL | Title | Current |`, `|-----|-----|-----|-----|`]
+		for (const tab of this.tabs) {
+			const { title, url } = await this.getTabInfo(tab.id)
+			summaries.push(
+				`| ${tab.id} | ${url} | ${title} | ${this.currentTabId === tab.id ? '✅' : ''} |`
+			)
+		}
+		return summaries.join('\n')
+	}
+
+	dispose() {
+		this.dispatchEvent(new Event('dispose'))
+	}
+}
+
+export type TabAction =
+	| 'get_active_tab'
+	| 'get_tab_info'
+	| 'open_new_tab'
+	| 'create_tab_group'
+	| 'update_tab_group'
+	| 'add_tab_to_group'
+	| 'close_tab'
+	| 'get_tab_title'
+
+interface TabMeta {
+	id: number
+	isInitial: boolean
+}
+
+const TAB_GROUP_COLORS = [
+	'grey',
+	'blue',
+	'red',
+	'yellow',
+	'green',
+	'pink',
+	'purple',
+	'cyan',
+] as const
+
+type TabGroupColor = (typeof TAB_GROUP_COLORS)[number]
+
+function randomColor(): TabGroupColor {
+	return TAB_GROUP_COLORS[Math.floor(Math.random() * TAB_GROUP_COLORS.length)]
+}

packages/extension/src/agent/constants.ts

@@ -0,0 +1,13 @@
+import type { LLMConfig } from '@page-agent/llms'
+
+// Demo LLM for testing
+export const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+export const DEMO_BASE_URL =
+	'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
+export const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+
+export const DEMO_CONFIG: LLMConfig = {
+	apiKey: DEMO_API_KEY,
+	baseURL: DEMO_BASE_URL,
+	model: DEMO_MODEL,
+}

packages/extension/src/agent/system_prompt.md

@@ -0,0 +1,147 @@
+You are an AI agent designed to operate in an iterative loop to automate browser tasks. Your ultimate goal is accomplishing the task provided in <user_request>.
+
+<intro>
+You excel at following tasks:
+1. Navigating complex websites and extracting precise information
+2. Automating form submissions and interactive web actions
+3. Gathering and saving information 
+4. Operate effectively in an agent loop
+5. Efficiently performing diverse web tasks
+</intro>
+
+<language_settings>
+- Default working language: **中文**
+- Use the language that user is using. Return in user's language.
+</language_settings>
+
+<input>
+At every step, your input will consist of: 
+1. <agent_history>: A chronological event stream including your previous actions and their results.
+2. <agent_state>: Current <user_request> and <step_info>.
+3. <browser_state>: Tabs, Current Tab, Current URL, interactive elements indexed for actions, and visible page content.
+</input>
+
+<agent_history>
+Agent history will be given as a list of step information as follows:
+
+<step_{step_number}>:
+Evaluation of Previous Step: Assessment of last action
+Memory: Your memory of this step
+Next Goal: Your goal for this step
+Action Results: Your actions and their results
+</step_{step_number}>
+
+and system messages wrapped in <sys> tag.
+</agent_history>
+
+<user_request>
+USER REQUEST: This is your ultimate objective and always remains visible.
+- This has the highest priority. Make the user happy.
+- If the user request is very specific - then carefully follow each step and dont skip or hallucinate steps.
+- If the task is open ended you can plan yourself how to get it done.
+</user_request>
+
+<browser_state>
+1. Browser State will be given as:
+
+Open Tabs: Open tabs with their ids.
+Current Tab: The tab you are currently viewing.
+Current URL: URL of the page you are currently viewing.
+Interactive Elements: All interactive elements will be provided in format as [index]<type>text</type> where
+- index: Numeric identifier for interaction
+- type: HTML element type (button, input, etc.)
+- text: Element description
+
+Examples:
+[33]<div>User form</div>
+\t*[35]<button aria-label='Submit form'>Submit</button>
+
+Note that:
+- Only elements with numeric indexes in [] are interactive
+- (stacked) indentation (with \t) is important and means that the element is a (html) child of the element above (with a lower index)
+- Elements tagged with `*[` are the new clickable elements that appeared on the website since the last step - if url has not changed.
+- Pure text elements without [] are not interactive.
+</browser_state>
+
+<browser_rules>
+Strictly follow these rules while using the browser and navigating the web:
+- Only interact with elements that have a numeric [index] assigned.
+- Only use indexes that are explicitly provided.
+- If the page changes after, for example, an input text action, analyze if you need to interact with new elements, e.g. selecting the right option from the list.
+- By default, only elements in the visible viewport are listed. Use scrolling actions if you suspect relevant content is offscreen which you need to interact with. Scroll ONLY if there are more pixels below or above the page.
+- You can scroll by a specific number of pages using the num_pages parameter (e.g., 0.5 for half page, 2.0 for two pages).
+- All the elements that are scrollable are marked with `data-scrollable` attribute. Including the scrollable distance in every directions. You can scroll *the element* in case some area are overflowed.
+- If a captcha appears, tell user you can not solve captcha. finished the task and ask user to solve it.
+- If expected elements are missing, try scrolling, or navigating back.
+- If the page is not fully loaded, use the `wait` action.
+- Do not repeat one action for more than 3 times unless some conditions changed.
+- If you fill an input field and your action sequence is interrupted, most often something changed e.g. suggestions popped up under the field.
+- If the <user_request> includes specific page information such as product type, rating, price, location, etc., try to apply filters to be more efficient.
+- The <user_request> is the ultimate goal. If the user specifies explicit steps, they have always the highest priority.
+- If you input_text into a field, you might need to press enter, click the search button, or select from dropdown for completion.
+- Don't login into a page if you don't have to. Don't login if you don't have the credentials. 
+- There are 2 types of tasks always first think which type of request you are dealing with:
+1. Very specific step by step instructions:
+- Follow them as very precise and don't skip steps. Try to complete everything as requested.
+2. Open ended tasks. Plan yourself, be creative in achieving them.
+- If you get stuck e.g. with logins or captcha in open-ended tasks you can re-evaluate the task and try alternative ways, e.g. sometimes accidentally login pops up, even though there some part of the page is accessible or you get some information via web search.
+</browser_rules>
+
+<task_completion_rules>
+You must call the `done` action in one of three cases:
+- When you have fully completed the USER REQUEST.
+- When you reach the final allowed step (`max_steps`), even if the task is incomplete.
+- When you feel stuck or unable to solve user request. Or user request is not clear or contains inappropriate content.
+- When it is ABSOLUTELY IMPOSSIBLE to continue.
+
+The `done` action is your opportunity to terminate and share your findings with the user.
+- Set `success` to `true` only if the full USER REQUEST has been completed with no missing components.
+- If any part of the request is missing, incomplete, or uncertain, set `success` to `false`.
+- You can use the `text` field of the `done` action to communicate your findings and to provide a coherent reply to the user and fulfill the USER REQUEST.
+- You are ONLY ALLOWED to call `done` as a single action. Don't call it together with other actions.
+- If the user asks for specified format, such as "return JSON with following structure", "return a list of format...", MAKE sure to use the right format in your answer.
+- If the user asks for a structured output, your `done` action's schema may be modified. Take this schema into account when solving the task!
+</task_completion_rules>
+
+<reasoning_rules>
+Exhibit the following reasoning patterns to successfully achieve the <user_request>:
+
+- Reason about <agent_history> to track progress and context toward <user_request>.
+- Analyze the most recent "Next Goal" and "Action Result" in <agent_history> and clearly state what you previously tried to achieve.
+- Analyze all relevant items in <agent_history> and <browser_state> to understand your state.
+- Explicitly judge success/failure/uncertainty of the last action. Never assume an action succeeded just because it appears to be executed in your last step in <agent_history>. If the expected change is missing, mark the last action as failed (or uncertain) and plan a recovery.
+- Analyze whether you are stuck, e.g. when you repeat the same actions multiple times without any progress. Then consider alternative approaches e.g. scrolling for more context or ask user for help.
+- Ask user for help if you have any difficulty. Keep user in the loop.
+- If you see information relevant to <user_request>, plan saving the information to memory.
+- Always reason about the <user_request>. Make sure to carefully analyze the specific steps and information required. E.g. specific filters, specific form fields, specific information to search. Make sure to always compare the current trajectory with the user request and think carefully if thats how the user requested it.
+</reasoning_rules>
+
+<examples>
+Here are examples of good output patterns. Use them as reference but never copy them directly.
+
+<evaluation_examples>
+- Positive Examples:
+"evaluation_previous_goal": "Successfully navigated to the product page and found the target information. Verdict: Success"
+"evaluation_previous_goal": "Clicked the login button and user authentication form appeared. Verdict: Success"
+</evaluation_examples>
+
+<memory_examples>
+"memory": "Found many pending reports that need to be analyzed in the main page. Successfully processed the first 2 reports on quarterly sales data and moving on to inventory analysis and customer feedback reports."
+</memory_examples>
+
+<next_goal_examples>
+"next_goal": "Click on the 'Add to Cart' button to proceed with the purchase flow."
+"next_goal": "Extract details from the first item on the page."
+</next_goal_examples>
+</examples>
+
+<output>
+You must ALWAYS respond with a valid JSON in this exact format:
+
+{
+  "evaluation_previous_goal": "Concise one-sentence analysis of your last action. Clearly state success, failure, or uncertain.",
+  "memory": "1-3 concise sentences of specific memory of this step and overall progress. You should put here everything that will help you track progress in future steps. Like counting pages visited, items found, etc.",
+  "next_goal": "State the next immediate goal and action to achieve it, in one clear sentence."
+  "action":{"one_action_name": {// action-specific parameter}}
+}
+</output>

packages/extension/src/agent/tabTools.ts

@@ -0,0 +1,63 @@
+/**
+ * Tab control tools for browser extension
+ *
+ * These tools allow the agent to manage multiple browser tabs:
+ * - open_new_tab: Open a new tab and set it as current
+ * - switch_to_tab: Switch to an existing tab
+ * - close_tab: Close a tab (optionally switch to another)
+ */
+import zod from 'zod'
+
+import type { TabsController } from './TabsController'
+
+/** Tool definition compatible with PageAgentCore customTools */
+interface TabTool {
+	description: string
+	inputSchema: zod.ZodType
+	execute: (input: unknown) => Promise<string>
+}
+
+/**
+ * Create tab control tools bound to a TabsManager instance.
+ * These tools are injected into PageAgentCore via customTools config.
+ */
+export function createTabTools(tabsController: TabsController): Record<string, TabTool> {
+	return {
+		open_new_tab: {
+			description:
+				'Open a new browser tab with the specified URL. The new tab becomes the current tab for all subsequent page operations.',
+			inputSchema: zod.object({
+				url: zod.string().describe('The URL to open in the new tab'),
+			}),
+			execute: async (input: unknown) => {
+				const { url } = input as { url: string }
+				const result = await tabsController.openNewTab(url)
+				return result.message
+			},
+		},
+
+		switch_to_tab: {
+			description:
+				'Switch to an existing tab by its ID. After switching, all page operations will target the new current tab. You can only switch to tabs in the tab list shown in browser state.',
+			inputSchema: zod.object({
+				tab_id: zod.number().int().describe('The tab ID to switch to'),
+			}),
+			execute: async (input: unknown) => {
+				const { tab_id } = input as { tab_id: number }
+				return (await tabsController.switchToTab(tab_id)).message
+			},
+		},
+
+		close_tab: {
+			description:
+				'Close a tab by its ID. Cannot close the initial tab. Optionally specify which tab to switch to after closing.',
+			inputSchema: zod.object({
+				tab_id: zod.number().int().describe('The tab ID to close'),
+			}),
+			execute: async (input: unknown) => {
+				const { tab_id } = input as { tab_id: number }
+				return (await tabsController.closeTab(tab_id)).message
+			},
+		},
+	}
+}

packages/extension/src/agent/useAgent.ts

@@ -0,0 +1,104 @@
+/**
+ * React hook for using AgentController
+ */
+import type { AgentActivity, AgentStatus, HistoricalEvent } from '@page-agent/core'
+import type { LLMConfig } from '@page-agent/llms'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { MultiPageAgent } from './MultiPageAgent'
+import { DEMO_CONFIG } from './constants'
+
+export interface UseAgentResult {
+	status: AgentStatus
+	history: HistoricalEvent[]
+	activity: AgentActivity | null
+	currentTask: string
+	config: LLMConfig | null
+	execute: (task: string) => Promise<void>
+	stop: () => void
+	configure: (config: LLMConfig) => Promise<void>
+}
+
+export function useAgent(): UseAgentResult {
+	const agentRef = useRef<MultiPageAgent | null>(null)
+	const [status, setStatus] = useState<AgentStatus>('idle')
+	const [history, setHistory] = useState<HistoricalEvent[]>([])
+	const [activity, setActivity] = useState<AgentActivity | null>(null)
+	const [currentTask, setCurrentTask] = useState('')
+	const [config, setConfig] = useState<LLMConfig | null>(null)
+
+	useEffect(() => {
+		chrome.storage.local.get('llmConfig').then((result) => {
+			if (result.llmConfig) {
+				setConfig(result.llmConfig as LLMConfig)
+			} else {
+				chrome.storage.local.set({ llmConfig: DEMO_CONFIG })
+				setConfig(DEMO_CONFIG)
+			}
+		})
+	}, [])
+
+	useEffect(() => {
+		if (!config) return
+
+		const agent = new MultiPageAgent(config)
+		agentRef.current = agent
+
+		const handleStatusChange = (e: Event) => {
+			const newStatus = agent.status as AgentStatus
+			setStatus(newStatus)
+			if (newStatus === 'idle' || newStatus === 'completed' || newStatus === 'error') {
+				setActivity(null)
+			}
+		}
+
+		const handleHistoryChange = (e: Event) => {
+			setHistory([...agent.history])
+		}
+
+		const handleActivity = (e: Event) => {
+			const newActivity = (e as CustomEvent).detail as AgentActivity
+			setActivity(newActivity)
+		}
+
+		agent.addEventListener('statuschange', handleStatusChange)
+		agent.addEventListener('historychange', handleHistoryChange)
+		agent.addEventListener('activity', handleActivity)
+
+		return () => {
+			agent.removeEventListener('statuschange', handleStatusChange)
+			agent.removeEventListener('historychange', handleHistoryChange)
+			agent.removeEventListener('activity', handleActivity)
+			agent.dispose()
+		}
+	}, [config])
+
+	const execute = useCallback(async (task: string) => {
+		const agent = agentRef.current
+		console.log('Fire task:', task, agent)
+		if (!agent) throw new Error('Agent not initialized')
+
+		setCurrentTask(task)
+		setHistory([])
+		await agent.execute(task)
+	}, [])
+
+	const stop = useCallback(() => {
+		agentRef.current?.dispose()
+	}, [])
+
+	const configure = useCallback(async (newConfig: LLMConfig) => {
+		setConfig(newConfig)
+	}, [])
+
+	return {
+		status,
+		history,
+		activity,
+		currentTask,
+		config,
+		execute,
+		stop,
+		configure,
+	}
+}

packages/extension/src/assets/index.css

@@ -0,0 +1,123 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--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);
+	--destructive-foreground: 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);
+	--radius: 0.625rem;
+	--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);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.145 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 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.396 0.141 25.723);
+	--destructive-foreground: oklch(0.637 0.237 25.331);
+	--border: oklch(0.269 0 0);
+	--input: oklch(0.269 0 0);
+	--ring: oklch(0.439 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(0.269 0 0);
+	--sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+	--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-destructive-foreground: var(--destructive-foreground);
+	--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);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--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);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

packages/extension/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/extension/src/components/ui/card.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('leading-none font-semibold', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }

packages/extension/src/components/ui/field.tsx

@@ -0,0 +1,232 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import { useMemo } from 'react'
+
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				'flex flex-col gap-6',
+				'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldLegend({
+	className,
+	variant = 'legend',
+	...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				'mb-3 font-medium',
+				'data-[variant=legend]:text-base',
+				'data-[variant=label]:text-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+	variants: {
+		orientation: {
+			vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+			horizontal: [
+				'flex-row items-center',
+				'[&>[data-slot=field-label]]:flex-auto',
+				'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+			responsive: [
+				'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+				'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+		},
+	},
+	defaultVariants: {
+		orientation: 'vertical',
+	},
+})
+
+function Field({
+	className,
+	orientation = 'vertical',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	)
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="field-content"
+			className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
+			{...props}
+		/>
+	)
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+				'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+				'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<'div'> & {
+	children?: React.ReactNode
+}) {
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+				className
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	)
+}
+
+function FieldError({
+	className,
+	children,
+	errors,
+	...props
+}: React.ComponentProps<'div'> & {
+	errors?: Array<{ message?: string } | undefined>
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children
+		}
+
+		if (!errors?.length) {
+			return null
+		}
+
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]
+
+		if (uniqueErrors?.length == 1) {
+			return uniqueErrors[0]?.message
+		}
+
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+			</ul>
+		)
+	}, [children, errors])
+
+	if (!content) {
+		return null
+	}
+
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn('text-destructive text-sm font-normal', className)}
+			{...props}
+		>
+			{content}
+		</div>
+	)
+}
+
+export {
+	Field,
+	FieldLabel,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldContent,
+	FieldTitle,
+}

packages/extension/src/components/ui/hover-card.tsx

@@ -0,0 +1,36 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+					className
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	)
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

packages/extension/src/components/ui/input-group.tsx

@@ -0,0 +1,156 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { cn } from '@/lib/utils'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="input-group"
+			role="group"
+			className={cn(
+				'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+				'h-9 min-w-0 has-[>textarea]:h-auto',
+
+				// Variants based on alignment.
+				'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+				'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+				'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+				'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+				// Focus state.
+				'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+				// Error state.
+				'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+const inputGroupAddonVariants = cva(
+	"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+	{
+		variants: {
+			align: {
+				'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+				'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+				'block-start':
+					'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+				'block-end':
+					'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	}
+)
+
+function InputGroupAddon({
+	className,
+	align = 'inline-start',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest('button')) {
+					return
+				}
+				e.currentTarget.parentElement?.querySelector('input')?.focus()
+			}}
+			{...props}
+		/>
+	)
+}
+
+const inputGroupButtonVariants = cva('text-sm shadow-none flex gap-2 items-center', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+			sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+})
+
+function InputGroupButton({
+	className,
+	type = 'button',
+	variant = 'ghost',
+	size = 'xs',
+	...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+	VariantProps<typeof inputGroupButtonVariants>) {
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			className={cn(
+				"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupText,
+	InputGroupInput,
+	InputGroupTextarea,
+}

packages/extension/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'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',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Input }

packages/extension/src/components/ui/item.tsx

@@ -0,0 +1,172 @@
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			role="list"
+			data-slot="item-group"
+			className={cn('group/item-group flex flex-col', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="item-separator"
+			orientation="horizontal"
+			className={cn('my-0', className)}
+			{...props}
+		/>
+	)
+}
+
+const itemVariants = cva(
+	'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50',
+			},
+			size: {
+				default: 'p-4 gap-4 ',
+				sm: 'py-3 px-4 gap-2.5',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+)
+
+function Item({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : 'div'
+	return (
+		<Comp
+			data-slot="item"
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
+
+const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+				image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+)
+
+function ItemMedia({
+	className,
+	variant = 'default',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+	return (
+		<div
+			data-slot="item-media"
+			data-variant={variant}
+			className={cn(itemMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	)
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-content"
+			className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-title"
+			className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return (
+		<p
+			data-slot="item-description"
+			className={cn(
+				'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+	)
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-header"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-footer"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Item,
+	ItemMedia,
+	ItemContent,
+	ItemActions,
+	ItemGroup,
+	ItemSeparator,
+	ItemTitle,
+	ItemDescription,
+	ItemHeader,
+	ItemFooter,
+}

packages/extension/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as LabelPrimitive from '@radix-ui/react-label'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Label }

packages/extension/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/extension/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/extension/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/extension/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/extension/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Textarea }

packages/extension/src/entrypoints/background.ts

@@ -0,0 +1,48 @@
+import { handlePageControlMessage } from '@/agent/RemotePageController.background'
+import { handleTabControlMessage } from '@/agent/TabsController.background'
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse): true | undefined => {
+	if (message.type === 'TAB_CONTROL') {
+		return handleTabControlMessage(message, sender, sendResponse)
+	} else if (message.type === 'PAGE_CONTROL') {
+		return handlePageControlMessage(message, sender, sendResponse)
+	} else {
+		sendResponse({ error: 'Unknown message type' })
+		return
+	}
+})
+
+// ============================================================================
+// Extension Setup
+// ============================================================================
+
+export default defineBackground(() => {
+	console.log('[Background] Service Worker started')
+
+	// generate user auth token
+
+	chrome.storage.local.get('PageAgentExtUserAuthToken').then((result) => {
+		if (result.PageAgentExtUserAuthToken) return
+
+		const userAuthToken = crypto.randomUUID()
+		chrome.storage.local.set({ PageAgentExtUserAuthToken: userAuthToken })
+	})
+
+	// setup
+
+	chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(() => {})
+
+	// Tab change events
+
+	chrome.tabs.onCreated.addListener((tab) => {
+		chrome.runtime.sendMessage({ type: 'TAB_CHANGE', action: 'created', payload: { tab } })
+	})
+
+	chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
+		chrome.runtime.sendMessage({
+			type: 'TAB_CHANGE',
+			action: 'removed',
+			payload: { tabId, removeInfo },
+		})
+	})
+})

packages/extension/src/entrypoints/content.ts

@@ -0,0 +1,169 @@
+import { initPageController } from '@/agent/RemotePageController.content'
+
+// import { DEMO_CONFIG } from '@/agent/constants'
+
+const DEBUG_PREFIX = '[Content]'
+
+export default defineContentScript({
+	matches: ['<all_urls>'],
+	runAt: 'document_idle',
+
+	main() {
+		console.debug(`${DEBUG_PREFIX} Loaded on ${window.location.href}`)
+		initPageController()
+
+		// if auth token matches, expose agent to page
+		chrome.storage.local.get('PageAgentExtUserAuthToken').then((result) => {
+			// extension side token.
+			// @note this is isolated world. it is safe to assume user script cannot access it
+			const extToken = result.PageAgentExtUserAuthToken
+			if (!extToken) return
+
+			// page side token
+			const pageToken = localStorage.getItem('PageAgentExtUserAuthToken')
+			if (!pageToken) return
+
+			if (pageToken !== extToken) return
+
+			console.log('[PageAgentExt]: Auth tokens match. Exposing agent to page.')
+
+			// add isolated world script
+			exposeAgentToPage().then(
+				// add main-world script
+				() => injectScript('/main-world.js')
+			)
+		})
+	},
+})
+
+async function exposeAgentToPage() {
+	const { MultiPageAgent } = await import('@/agent/MultiPageAgent')
+	console.log('[PageAgentExt]: MultiPageAgent loaded')
+
+	/**
+	 * singleton MultiPageAgent to handle requests from the page
+	 */
+	let multiPageAgent: InstanceType<typeof MultiPageAgent> | null = null
+
+	window.addEventListener('message', async (e) => {
+		const data = e.data
+		if (typeof data !== 'object' || data === null) return
+		if (data.channel !== 'PAGE_AGENT_EXT_REQUEST') return
+
+		const { action, payload, id } = data
+
+		switch (action) {
+			case 'execute': {
+				// singleton check
+				if (multiPageAgent && multiPageAgent.status === 'running') {
+					window.postMessage(
+						{
+							channel: 'PAGE_AGENT_EXT_RESPONSE',
+							id,
+							action: 'execute_result',
+							error: 'Agent is already running a task. Please wait until it finishes.',
+						},
+						'*'
+					)
+					return
+				}
+
+				try {
+					const { task, llmConfig } = payload
+
+					// create when used
+
+					multiPageAgent = new MultiPageAgent(llmConfig)
+
+					// events
+
+					multiPageAgent.addEventListener('statuschange', (event) => {
+						if (!multiPageAgent) return
+						window.postMessage(
+							{
+								channel: 'PAGE_AGENT_EXT_RESPONSE',
+								id,
+								action: 'status_change_event',
+								payload: multiPageAgent.status,
+							},
+							'*'
+						)
+					})
+
+					multiPageAgent.addEventListener('activity', (event) => {
+						if (!multiPageAgent) return
+						window.postMessage(
+							{
+								channel: 'PAGE_AGENT_EXT_RESPONSE',
+								id,
+								action: 'activity_event',
+								payload: (event as CustomEvent).detail,
+							},
+							'*'
+						)
+					})
+
+					multiPageAgent.addEventListener('historychange', (event) => {
+						if (!multiPageAgent) return
+						window.postMessage(
+							{
+								channel: 'PAGE_AGENT_EXT_RESPONSE',
+								id,
+								action: 'history_change_event',
+								payload: multiPageAgent.history,
+							},
+							'*'
+						)
+					})
+
+					multiPageAgent.addEventListener('dispose', () => {
+						window.postMessage(
+							{
+								channel: 'PAGE_AGENT_EXT_RESPONSE',
+								id,
+								action: 'dispose_event',
+							},
+							'*'
+						)
+					})
+
+					// result
+
+					const result = await multiPageAgent.execute(task)
+
+					window.postMessage(
+						{
+							channel: 'PAGE_AGENT_EXT_RESPONSE',
+							id,
+							action: 'execute_result',
+							payload: result,
+						},
+						'*'
+					)
+				} catch (error) {
+					window.postMessage(
+						{
+							channel: 'PAGE_AGENT_EXT_RESPONSE',
+							id,
+							action: 'execute_result',
+							error: (error as Error).message,
+						},
+						'*'
+					)
+				}
+
+				break
+			}
+
+			case 'dispose': {
+				// @note stop ongoing processes but can still be re-used later
+				multiPageAgent?.dispose()
+				break
+			}
+
+			default:
+				console.warn(`${DEBUG_PREFIX} Unknown action from page:`, action)
+				break
+		}
+	})
+}

packages/extension/src/entrypoints/main-world.ts

@@ -0,0 +1,106 @@
+import type { AgentActivity, AgentStatus, ExecutionResult, HistoricalEvent } from '@page-agent/core'
+import type { LLMConfig } from '@page-agent/llms'
+
+export interface ExecuteHooks {
+	onStatusChange?: (status: AgentStatus) => void
+	onActivity?: (activity: AgentActivity) => void
+	onHistoryUpdate?: (history: HistoricalEvent[]) => void
+	onDispose?: () => void
+}
+
+export type Execute = (
+	task: string,
+	llmConfig: LLMConfig,
+	hooks?: ExecuteHooks
+) => Promise<ExecutionResult>
+
+export default defineUnlistedScript(() => {
+	const w = window as any
+
+	let _lastId = 0
+	function getId() {
+		_lastId += 1
+		return _lastId
+	}
+
+	w.execute = async (task: string, llmConfig: LLMConfig, hooks?: ExecuteHooks) => {
+		if (typeof task !== 'string') throw new Error('Task must be a string')
+		if (task.trim().length === 0) throw new Error('Task cannot be empty')
+		if (!llmConfig) throw new Error('LLM config is required')
+		if (!llmConfig.baseURL) throw new Error('LLM config must have a baseURL')
+		if (!llmConfig.apiKey) throw new Error('LLM config must have an apiKey')
+		if (!llmConfig.model) throw new Error('LLM config must have a model')
+
+		const id = getId()
+
+		const promise = new Promise<ExecutionResult>((resolve, reject) => {
+			function handleMessage(e: MessageEvent) {
+				const data = e.data
+				if (typeof data !== 'object' || data === null) return
+				if (data.channel !== 'PAGE_AGENT_EXT_RESPONSE') return
+				if (data.id !== id) return
+
+				// events
+
+				if (data.action === 'status_change_event' && hooks?.onStatusChange) {
+					hooks.onStatusChange(data.payload)
+					return
+				}
+
+				if (data.action === 'activity_event' && hooks?.onActivity) {
+					hooks.onActivity(data.payload)
+					return
+				}
+
+				if (data.action === 'history_change_event' && hooks?.onHistoryUpdate) {
+					hooks.onHistoryUpdate(data.payload)
+					return
+				}
+
+				if (data.action === 'dispose_event' && hooks?.onDispose) {
+					hooks.onDispose()
+					return
+				}
+
+				// result
+
+				if (data.action !== 'execute_result') return
+
+				window.removeEventListener('message', handleMessage)
+
+				if (data.error) {
+					reject(new Error(data.error))
+				} else {
+					resolve(data.payload)
+				}
+			}
+
+			window.addEventListener('message', handleMessage)
+		})
+
+		window.postMessage(
+			{
+				channel: 'PAGE_AGENT_EXT_REQUEST',
+				id,
+				action: 'execute',
+				payload: { task, llmConfig },
+			},
+			'*'
+		)
+
+		return promise
+	}
+
+	w.dispose = () => {
+		const id = getId()
+
+		window.postMessage(
+			{
+				channel: 'PAGE_AGENT_EXT_REQUEST',
+				id,
+				action: 'dispose',
+			},
+			'*'
+		)
+	}
+})

packages/extension/src/entrypoints/sidepanel/App.tsx

@@ -0,0 +1,155 @@
+import { Send, Settings, Square } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupTextarea,
+} from '@/components/ui/input-group'
+
+import { useAgent } from '../../agent/useAgent'
+import { ConfigPanel } from './components/ConfigPanel'
+import { ActivityCard, EventCard } from './components/cards'
+import { EmptyState, Logo, StatusDot } from './components/misc'
+
+export default function App() {
+	const [showConfig, setShowConfig] = useState(false)
+	const [inputValue, setInputValue] = useState('')
+	const historyRef = useRef<HTMLDivElement>(null)
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+	const { status, history, activity, currentTask, config, execute, stop, configure } = useAgent()
+
+	// Auto-scroll to bottom on new events
+	useEffect(() => {
+		if (historyRef.current) {
+			historyRef.current.scrollTop = historyRef.current.scrollHeight
+		}
+	}, [history, activity])
+
+	const handleSubmit = useCallback(
+		(e?: React.FormEvent) => {
+			e?.preventDefault()
+			if (!inputValue.trim() || status === 'running') return
+
+			const taskToExecute = inputValue.trim()
+			setInputValue('')
+
+			execute(taskToExecute).catch((error) => {
+				console.error('[SidePanel] Failed to execute task:', error)
+			})
+		},
+		[inputValue, status, execute]
+	)
+
+	const handleStop = useCallback(() => {
+		console.log('[SidePanel] Stopping task...')
+		stop()
+	}, [stop])
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+			e.preventDefault()
+			handleSubmit()
+		}
+	}
+
+	if (showConfig) {
+		return (
+			<ConfigPanel
+				config={config}
+				onSave={async (newConfig) => {
+					await configure(newConfig)
+					setShowConfig(false)
+				}}
+				onClose={() => setShowConfig(false)}
+			/>
+		)
+	}
+
+	const isRunning = status === 'running'
+	const showEmptyState = !currentTask && history.length === 0 && !isRunning
+
+	return (
+		<div className="flex flex-col h-screen bg-background">
+			{/* Header */}
+			<header className="flex items-center justify-between border-b px-3 py-2">
+				<div className="flex items-center gap-2">
+					<Logo className="size-5" />
+					<span className="text-sm font-medium">Page Agent Ext</span>
+				</div>
+				<div className="flex items-center gap-3">
+					<StatusDot status={status} />
+					<Button variant="ghost" size="icon-sm" onClick={() => setShowConfig(true)}>
+						<Settings className="size-3.5" />
+					</Button>
+				</div>
+			</header>
+
+			{/* Content */}
+			<main className="flex-1 overflow-hidden flex flex-col">
+				{/* Current task */}
+				{currentTask && (
+					<div className="border-b px-3 py-2 bg-muted/30">
+						<div className="text-[10px] text-muted-foreground uppercase tracking-wide">Task</div>
+						<div className="text-xs font-medium truncate" title={currentTask}>
+							{currentTask}
+						</div>
+					</div>
+				)}
+
+				{/* History */}
+				<div ref={historyRef} className="flex-1 overflow-y-auto p-3 space-y-2">
+					{showEmptyState && <EmptyState />}
+
+					{history.map((event, index) => (
+						// eslint-disable-next-line react-x/no-array-index-key
+						<EventCard key={index} event={event} />
+					))}
+
+					{/* Activity indicator at bottom */}
+					{activity && <ActivityCard activity={activity} />}
+				</div>
+			</main>
+
+			{/* Input */}
+			<footer className="border-t p-3">
+				<InputGroup className="relative rounded-lg">
+					<InputGroupTextarea
+						ref={textareaRef}
+						placeholder="Describe your task... (Enter to send)"
+						value={inputValue}
+						onChange={(e) => setInputValue(e.target.value)}
+						onKeyDown={handleKeyDown}
+						disabled={isRunning}
+						className="text-xs pr-12 min-h-10"
+					/>
+					<InputGroupAddon align="inline-end" className="absolute bottom-0 right-0">
+						{isRunning ? (
+							<InputGroupButton
+								size="icon-sm"
+								variant="destructive"
+								onClick={handleStop}
+								className="size-7"
+							>
+								<Square className="size-3" />
+							</InputGroupButton>
+						) : (
+							<InputGroupButton
+								size="icon-sm"
+								variant="default"
+								onClick={() => handleSubmit()}
+								disabled={!inputValue.trim()}
+								className="size-7"
+							>
+								<Send className="size-3" />
+							</InputGroupButton>
+						)}
+					</InputGroupAddon>
+				</InputGroup>
+			</footer>
+		</div>
+	)
+}

packages/extension/src/entrypoints/sidepanel/components/ConfigPanel.tsx

@@ -0,0 +1,140 @@
+import type { LLMConfig } from '@page-agent/llms'
+import { Copy, Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { DEMO_API_KEY, DEMO_BASE_URL, DEMO_MODEL } from '@/agent/constants'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+interface ConfigPanelProps {
+	config: LLMConfig | null
+	onSave: (config: LLMConfig) => Promise<void>
+	onClose: () => void
+}
+
+export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
+	const [apiKey, setApiKey] = useState(config?.apiKey || DEMO_API_KEY)
+	const [baseURL, setBaseURL] = useState(config?.baseURL || DEMO_BASE_URL)
+	const [model, setModel] = useState(config?.model || DEMO_MODEL)
+	const [saving, setSaving] = useState(false)
+	const [userAuthToken, setUserAuthToken] = useState<string>('')
+	const [copied, setCopied] = useState(false)
+
+	// Update local state when config prop changes
+	useEffect(() => {
+		setApiKey(config?.apiKey || DEMO_API_KEY)
+		setBaseURL(config?.baseURL || DEMO_BASE_URL)
+		setModel(config?.model || DEMO_MODEL)
+	}, [config])
+
+	// Poll for user auth token every second until found
+	useEffect(() => {
+		let interval: NodeJS.Timeout | null = null
+
+		const fetchToken = async () => {
+			const result = await chrome.storage.local.get('PageAgentExtUserAuthToken')
+			const token = result.PageAgentExtUserAuthToken
+			if (typeof token === 'string' && token) {
+				setUserAuthToken(token)
+				if (interval) {
+					clearInterval(interval)
+					interval = null
+				}
+			}
+		}
+
+		fetchToken()
+		interval = setInterval(fetchToken, 1000)
+
+		return () => {
+			if (interval) clearInterval(interval)
+		}
+	}, [])
+
+	const handleCopyToken = async () => {
+		if (userAuthToken) {
+			await navigator.clipboard.writeText(userAuthToken)
+			setCopied(true)
+			setTimeout(() => setCopied(false), 2000)
+		}
+	}
+
+	const handleSave = async () => {
+		setSaving(true)
+		try {
+			await onSave({ apiKey, baseURL, model })
+		} finally {
+			setSaving(false)
+		}
+	}
+
+	return (
+		<div className="flex flex-col gap-4 p-4">
+			<h2 className="text-base font-semibold">Settings</h2>
+
+			{/* User Auth Token Section */}
+			<div className="flex flex-col gap-1.5 p-3 bg-muted/50 rounded-md border">
+				<label className="text-xs font-medium text-muted-foreground">User Auth Token</label>
+				<p className="text-[10px] text-muted-foreground mb-1">
+					Add this token to a website's localStorage to give it authorization to call this extension
+				</p>
+				<div className="flex gap-2 items-center">
+					<Input
+						readOnly
+						value={userAuthToken || 'Loading...'}
+						className="text-xs h-8 font-mono bg-background"
+					/>
+					<Button
+						variant="outline"
+						size="icon"
+						className="h-8 w-8 shrink-0 cursor-pointer"
+						onClick={handleCopyToken}
+						disabled={!userAuthToken}
+					>
+						{copied ? <span className="">✓</span> : <Copy className="size-3" />}
+					</Button>
+				</div>
+			</div>
+
+			<div className="flex flex-col gap-1.5">
+				<label className="text-xs text-muted-foreground">Base URL</label>
+				<Input
+					placeholder="https://api.openai.com/v1"
+					value={baseURL}
+					onChange={(e) => setBaseURL(e.target.value)}
+					className="text-xs h-8"
+				/>
+			</div>
+
+			<div className="flex flex-col gap-1.5">
+				<label className="text-xs text-muted-foreground">Model</label>
+				<Input
+					placeholder="gpt-5.2"
+					value={model}
+					onChange={(e) => setModel(e.target.value)}
+					className="text-xs h-8"
+				/>
+			</div>
+
+			<div className="flex flex-col gap-1.5">
+				<label className="text-xs text-muted-foreground">API Key</label>
+				<Input
+					type="password"
+					placeholder="sk-..."
+					value={apiKey}
+					onChange={(e) => setApiKey(e.target.value)}
+					className="text-xs h-8"
+				/>
+			</div>
+
+			<div className="flex gap-2 mt-2">
+				<Button variant="outline" onClick={onClose} className="flex-1 h-8 text-xs">
+					Cancel
+				</Button>
+				<Button onClick={handleSave} disabled={saving} className="flex-1 h-8 text-xs">
+					{saving ? <Loader2 className="size-3 animate-spin" /> : 'Save'}
+				</Button>
+			</div>
+		</div>
+	)
+}

packages/extension/src/entrypoints/sidepanel/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+import { AlertTriangle, RotateCcw } from 'lucide-react'
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+
+interface Props {
+	children: ReactNode
+}
+
+interface State {
+	hasError: boolean
+	error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+	state: State = { hasError: false, error: null }
+
+	static getDerivedStateFromError(error: Error): State {
+		return { hasError: true, error }
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		console.error('[ErrorBoundary]', error, errorInfo.componentStack)
+	}
+
+	handleReload = () => {
+		window.location.reload()
+	}
+
+	render() {
+		if (!this.state.hasError) {
+			return this.props.children
+		}
+
+		return (
+			<div className="flex flex-col items-center justify-center h-screen bg-background p-6 text-center">
+				<AlertTriangle className="size-12 text-destructive mb-4" />
+				<h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
+				<p className="text-sm text-muted-foreground mb-4 max-w-xs">
+					{this.state.error?.message || 'An unexpected error occurred'}
+				</p>
+				<Button variant="outline" size="sm" onClick={this.handleReload}>
+					<RotateCcw className="size-3.5 mr-2" />
+					Reload Panel
+				</Button>
+			</div>
+		)
+	}
+}

packages/extension/src/entrypoints/sidepanel/components/cards.tsx

@@ -0,0 +1,388 @@
+import type {
+	AgentActivity,
+	AgentErrorEvent,
+	AgentStepEvent,
+	HistoricalEvent,
+	ObservationEvent,
+	RetryEvent,
+} from '@page-agent/core'
+import {
+	CheckCircle,
+	Eye,
+	Globe,
+	Keyboard,
+	Mouse,
+	MoveVertical,
+	RefreshCw,
+	Sparkles,
+	XCircle,
+	Zap,
+} from 'lucide-react'
+import { Fragment, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+// Result card for done action
+function ResultCard({
+	success,
+	text,
+	children,
+}: {
+	success: boolean
+	text: string
+	children?: React.ReactNode
+}) {
+	return (
+		<div
+			className={cn(
+				'rounded-lg border p-3',
+				success ? 'border-green-500/30 bg-green-500/10' : 'border-destructive/30 bg-destructive/10'
+			)}
+		>
+			<div className="flex items-center gap-2 mb-2">
+				{success ? (
+					<CheckCircle className="size-3.5 text-green-500" />
+				) : (
+					<XCircle className="size-3.5 text-destructive" />
+				)}
+				<span
+					className={cn(
+						'text-xs font-medium',
+						success ? 'text-green-600 dark:text-green-400' : 'text-destructive'
+					)}
+				>
+					Result: {success ? 'Success' : 'Failed'}
+				</span>
+			</div>
+			<p className="text-xs text-[11px] text-muted-foreground pl-5 whitespace-pre-wrap">{text}</p>
+			{children}
+		</div>
+	)
+}
+
+// Single reflection item with truncation
+function ReflectionItem({ icon, value }: { icon: string; value: string }) {
+	const [expanded, setExpanded] = useState(false)
+
+	return (
+		<Fragment>
+			<span className="text-xs flex justify-center">{icon}</span>
+			<span
+				className={cn(
+					'text-[11px] text-muted-foreground cursor-pointer hover:text-muted-foreground/70',
+					!expanded && 'line-clamp-1'
+				)}
+				onClick={() => setExpanded(!expanded)}
+			>
+				{value}
+			</span>
+		</Fragment>
+	)
+}
+
+// Reflection section in step card
+function ReflectionSection({
+	reflection,
+}: {
+	reflection: {
+		evaluation_previous_goal?: string
+		memory?: string
+		next_goal?: string
+	}
+}) {
+	const items = [
+		{ icon: '☑️', label: 'eval', value: reflection.evaluation_previous_goal },
+		{ icon: '🧠', label: 'memory', value: reflection.memory },
+		{ icon: '🎯', label: 'goal', value: reflection.next_goal },
+	].filter((item) => item.value)
+
+	if (items.length === 0) return null
+
+	return (
+		<div className="mb-2">
+			{/* <div className="text-[11px] font-semibold text-foreground uppercase tracking-wide mb-2">
+				Reflection
+			</div> */}
+			<div className="grid grid-cols-[14px_1fr] gap-x-2 gap-y-2">
+				{items.map((item) => (
+					<ReflectionItem key={item.label} icon={item.icon} value={item.value!} />
+				))}
+			</div>
+		</div>
+	)
+}
+
+// Get icon for action type
+function ActionIcon({ name, className }: { name: string; className?: string }) {
+	const icons: Record<string, React.ReactNode> = {
+		click_element_by_index: <Mouse className={className} />,
+		input: <Keyboard className={className} />,
+		scroll: <MoveVertical className={className} />,
+		go_to_url: <Globe className={className} />,
+	}
+	return icons[name] || <Zap className={className} />
+}
+
+// Copy button with "Copied!" feedback
+function CopyButton({ text, label }: { text: string; label: string }) {
+	const [copied, setCopied] = useState(false)
+
+	return (
+		<button
+			type="button"
+			onClick={() => {
+				navigator.clipboard.writeText(text)
+				setCopied(true)
+				setTimeout(() => setCopied(false), 1500)
+			}}
+			className="text-[9px] text-muted-foreground hover:text-foreground transition-colors border px-1 rounded shrink-0 cursor-pointer backdrop-blur-xs"
+		>
+			{copied ? 'Copied!' : label}
+		</button>
+	)
+}
+
+// Extract message content by role from raw request
+function extractPrompt(rawRequest: unknown, role: 'system' | 'user'): string | null {
+	const messages = (rawRequest as { messages?: { role: string; content?: unknown }[] })?.messages
+	if (!messages) return null
+	const msg =
+		role === 'system'
+			? messages.find((m) => m.role === role)
+			: messages.findLast((m) => m.role === role)
+	if (!msg?.content) return null
+	return typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content, null, 2)
+}
+
+// Raw request/response section (collapsible tabs, for debugging)
+function RawSection({ rawRequest, rawResponse }: { rawRequest?: unknown; rawResponse?: unknown }) {
+	const [activeTab, setActiveTab] = useState<'request' | 'response' | null>(null)
+
+	if (!rawRequest && !rawResponse) return null
+
+	const handleTabClick = (tab: 'request' | 'response') => {
+		setActiveTab(activeTab === tab ? null : tab)
+	}
+
+	const content =
+		activeTab === 'request' ? rawRequest : activeTab === 'response' ? rawResponse : null
+
+	const systemPrompt = activeTab === 'request' ? extractPrompt(rawRequest, 'system') : null
+	const userPrompt = activeTab === 'request' ? extractPrompt(rawRequest, 'user') : null
+
+	return (
+		<div className="mt-2 border-t border-dashed pt-2">
+			<div className="flex items-center gap-3 -my-1">
+				{rawRequest != null && (
+					<button
+						type="button"
+						onClick={() => handleTabClick('request')}
+						className={cn(
+							'text-[10px] mt-0.5 transition-colors border-b cursor-pointer',
+							activeTab === 'request'
+								? 'text-foreground border-foreground'
+								: 'text-muted-foreground border-transparent hover:text-foreground'
+						)}
+					>
+						Raw Request
+					</button>
+				)}
+				{rawResponse != null && (
+					<button
+						type="button"
+						onClick={() => handleTabClick('response')}
+						className={cn(
+							'text-[10px] mt-0.5 transition-colors border-b cursor-pointer',
+							activeTab === 'response'
+								? 'text-foreground border-foreground'
+								: 'text-muted-foreground border-transparent hover:text-foreground'
+						)}
+					>
+						Raw Response
+					</button>
+				)}
+			</div>
+			{content != null && (
+				<div className="relative mt-1.5">
+					<div className="absolute top-1 right-1 flex gap-1">
+						{systemPrompt && <CopyButton text={systemPrompt} label="Copy System" />}
+						{userPrompt && <CopyButton text={userPrompt} label="Copy User" />}
+						<CopyButton text={JSON.stringify(content, null, 4)} label="Copy" />
+					</div>
+					<pre className="p-2 pt-5 text-[10px] text-foreground/70 bg-muted rounded overflow-x-auto max-h-60 overflow-y-auto">
+						{JSON.stringify(content, null, 4)}
+					</pre>
+				</div>
+			)}
+		</div>
+	)
+}
+
+function StepCard({ event }: { event: AgentStepEvent }) {
+	return (
+		<div className="rounded-lg border-l-2 border-l-blue-500/50 border bg-muted/40 p-2.5">
+			<div className="text-[11px] font-semibold text-foreground tracking-wide mb-2">
+				Step #{event.stepIndex! + 1}
+			</div>
+
+			{/* Reflection */}
+			{event.reflection && <ReflectionSection reflection={event.reflection} />}
+
+			{/* Action */}
+			{event.action && (
+				<div>
+					<div className="text-[11px] font-semibold text-foreground tracking-wide mb-1">
+						Actions
+					</div>
+					<div className="flex items-start gap-2">
+						<ActionIcon
+							name={event.action.name}
+							className="size-3.5 text-blue-500 shrink-0 mt-0.5"
+						/>
+						<div className="flex-1 min-w-0">
+							<p className="text-xs text-foreground/80 mb-0.5 wrap-anywhere break-all line-clamp-1 hover:line-clamp-none">
+								<span className="font-medium text-foreground/70">{event.action.name}</span>
+								{event.action.name !== 'done' && (
+									<span className="text-muted-foreground/70 ml-1.5">
+										{JSON.stringify(event.action.input)}
+									</span>
+								)}
+							</p>
+							<p className="text-[11px] text-muted-foreground/70 grid grid-cols-[auto_1fr] gap-1.5">
+								<span className="">└</span>
+								<span className="wrap-anywhere break-all line-clamp-1 hover:line-clamp-3">
+									{event.action.output}
+								</span>
+							</p>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* Raw Response */}
+			<RawSection rawRequest={event.rawRequest} rawResponse={event.rawResponse} />
+		</div>
+	)
+}
+
+function ObservationCard({ event }: { event: ObservationEvent }) {
+	return (
+		<div className="rounded-lg border-l-2 border-l-green-500/50 border bg-muted/40 p-2.5">
+			{/* <div className="text-[11px] font-semibold text-foreground uppercase tracking-wide mb-2">
+				Observation
+			</div> */}
+			<div className="flex items-start gap-2">
+				<Eye className="size-3.5 text-green-500 shrink-0 mt-0.5" />
+				<span className="text-[11px] text-muted-foreground">{event.content}</span>
+			</div>
+		</div>
+	)
+}
+
+function RetryCard({ event }: { event: RetryEvent }) {
+	return (
+		<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-2.5">
+			<div className="flex items-start gap-1.5">
+				<RefreshCw className="size-3 text-amber-500 shrink-0 mt-0.5" />
+				<span className="text-xs text-amber-600 dark:text-amber-400">
+					{event.message} ({event.attempt}/{event.maxAttempts})
+				</span>
+			</div>
+		</div>
+	)
+}
+
+function ErrorCard({ event }: { event: AgentErrorEvent }) {
+	return (
+		<div className="rounded-lg border border-destructive/30 bg-destructive/10 p-2.5">
+			<div className="flex items-start gap-1.5">
+				<XCircle className="size-3 text-destructive shrink-0 mt-0.5" />
+				<span className="text-xs text-destructive">{event.message}</span>
+			</div>
+			<RawSection rawResponse={event.rawResponse} />
+		</div>
+	)
+}
+
+// History event card component
+export function EventCard({ event }: { event: HistoricalEvent }) {
+	// Done action - show as result card
+	if (event.type === 'step' && event.action?.name === 'done') {
+		const input = event.action.input as { text?: string; success?: boolean }
+		return (
+			<>
+				<StepCard event={event as AgentStepEvent} />
+				<ResultCard
+					success={input?.success ?? true}
+					text={input?.text || event.action.output || ''}
+				>
+					<RawSection rawRequest={event.rawRequest} rawResponse={event.rawResponse} />
+				</ResultCard>
+			</>
+		)
+	}
+
+	if (event.type === 'step') {
+		return <StepCard event={event as AgentStepEvent} />
+	}
+
+	if (event.type === 'observation') {
+		return <ObservationCard event={event as ObservationEvent} />
+	}
+
+	if (event.type === 'retry') {
+		return <RetryCard event={event as RetryEvent} />
+	}
+
+	if (event.type === 'error') {
+		return <ErrorCard event={event as AgentErrorEvent} />
+	}
+
+	return null
+}
+
+// Activity card with animation
+export function ActivityCard({ activity }: { activity: AgentActivity }) {
+	const getActivityInfo = () => {
+		switch (activity.type) {
+			case 'thinking':
+				return { text: 'Thinking...', color: 'text-blue-500' }
+			case 'executing':
+				return { text: `Executing ${activity.tool}...`, color: 'text-amber-500' }
+			case 'executed':
+				return { text: `Done: ${activity.tool}`, color: 'text-green-500' }
+			case 'retrying':
+				return {
+					text: `Retrying (${activity.attempt}/${activity.maxAttempts})...`,
+					color: 'text-amber-500',
+				}
+			case 'error':
+				return { text: activity.message, color: 'text-destructive' }
+		}
+	}
+
+	const info = getActivityInfo()
+
+	return (
+		<div className="flex items-center gap-2 rounded-lg border bg-muted/40 p-2.5 animate-pulse">
+			<div className="relative">
+				<Sparkles className={cn('size-3.5', info.color)} />
+				<span
+					className={cn(
+						'absolute -top-0.5 -right-0.5 size-1.5 rounded-full animate-ping',
+						activity.type === 'thinking'
+							? 'bg-blue-500'
+							: activity.type === 'executing'
+								? 'bg-amber-500'
+								: activity.type === 'retrying'
+									? 'bg-amber-500'
+									: activity.type === 'error'
+										? 'bg-destructive'
+										: 'bg-green-500'
+					)}
+				/>
+			</div>
+			<span className={cn('text-xs', info.color)}>{info.text}</span>
+		</div>
+	)
+}

packages/extension/src/entrypoints/sidepanel/components/misc.tsx

@@ -0,0 +1,46 @@
+import type { AgentStatus } from '@page-agent/core'
+
+import { cn } from '@/lib/utils'
+
+// Status dot indicator
+export function StatusDot({ status }: { status: AgentStatus }) {
+	const colorClass = {
+		idle: 'bg-muted-foreground',
+		running: 'bg-blue-500',
+		completed: 'bg-green-500',
+		error: 'bg-destructive',
+	}[status]
+
+	const label = {
+		idle: 'Ready',
+		running: 'Running',
+		completed: 'Done',
+		error: 'Error',
+	}[status]
+
+	return (
+		<div className="flex items-center gap-1.5">
+			<span
+				className={cn('size-2 rounded-full', colorClass, status === 'running' && 'animate-pulse')}
+			/>
+			<span className="text-xs text-muted-foreground">{label}</span>
+		</div>
+	)
+}
+
+export function Logo({ className }: { className?: string }) {
+	return <img src="/assets/page-agent-256.webp" alt="Page Agent" className={cn('', className)} />
+}
+
+// Empty state with logo
+export function EmptyState() {
+	return (
+		<div className="flex flex-col items-center justify-center h-full gap-3 text-center px-6">
+			<Logo className="size-20 opacity-80" />
+			<div>
+				<h2 className="text-sm font-medium text-foreground">Page Agent Ext</h2>
+				<p className="text-xs text-muted-foreground mt-1">Enter a task to automate this page</p>
+			</div>
+		</div>
+	)
+}

packages/extension/src/entrypoints/sidepanel/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/png" href="/assets/page-agent-64.png" />
+		<title>Page Agent</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="./main.tsx"></script>
+	</body>
+</html>

packages/extension/src/entrypoints/sidepanel/main.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+import { ErrorBoundary } from './components/ErrorBoundary'
+
+import '@/assets/index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+	<React.StrictMode>
+		<ErrorBoundary>
+			<App />
+		</ErrorBoundary>
+	</React.StrictMode>
+)

packages/extension/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/extension/src/types/assets.d.ts

@@ -0,0 +1,25 @@
+// Asset type declarations
+declare module '*.webp' {
+	const src: string
+	export default src
+}
+
+declare module '*.png' {
+	const src: string
+	export default src
+}
+
+declare module '*.jpg' {
+	const src: string
+	export default src
+}
+
+declare module '*.jpeg' {
+	const src: string
+	export default src
+}
+
+declare module '*.svg' {
+	const src: string
+	export default src
+}

packages/extension/src/types/markdown.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md?raw' {
+	const content: string
+	export default content
+}

packages/extension/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "extends": "./.wxt/tsconfig.json",
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+        "useDefineForClassFields": true,
+        "noEmit": false,
+        "allowImportingTsExtensions": false,
+        "strictNullChecks": true,
+        "jsx": "react-jsx",
+        "baseUrl": ".",
+        "paths": {
+            // Self root
+            "@/*": ["src/*"],
+
+            "@page-agent/llms": ["../llms/src/index.ts"],
+            "@page-agent/page-controller": ["../page-controller/src/PageController.ts"],
+            "@page-agent/core": ["../core/src/PageAgentCore.ts"],
+            "@page-agent/ui": ["../ui/src/index.ts"]
+        }
+    },
+    "references": [
+        //
+        { "path": "../llms" },
+        { "path": "../page-controller" },
+        { "path": "../core" },
+        { "path": "../ui" }
+    ]
+}

packages/extension/wxt.config.js

@@ -0,0 +1,57 @@
+import tailwindcss from '@tailwindcss/vite'
+import { mkdirSync } from 'node:fs'
+import { defineConfig } from 'wxt'
+
+const chromeProfile = '.wxt/chrome-data'
+mkdirSync(chromeProfile, { recursive: true })
+
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+	srcDir: 'src',
+	modules: ['@wxt-dev/module-react'],
+	webExt: {
+		chromiumProfile: chromeProfile,
+		keepProfileChanges: true,
+		chromiumArgs: ['--hide-crash-restore-bubble'],
+	},
+	vite: () => ({
+		plugins: [tailwindcss()],
+		optimizeDeps: {
+			force: true,
+		},
+		build: {
+			minify: false,
+			chunkSizeWarningLimit: 2000,
+			cssCodeSplit: true,
+			rollupOptions: {
+				onwarn: function (message, handler) {
+					if (message.code === 'EVAL') return
+					handler(message)
+				},
+			},
+		},
+	}),
+	manifest: {
+		name: 'Page Agent Ext',
+		description:
+			'AI-powered browser automation assistant. Control web pages with natural language.',
+		homepage_url: 'https://alibaba.github.io/page-agent/',
+		permissions: ['tabs', 'tabGroups', 'sidePanel', 'storage'],
+		host_permissions: ['<all_urls>'],
+		icons: {
+			64: 'assets/page-agent-64.png',
+		},
+		action: {
+			default_title: 'Open Page Agent',
+		},
+		web_accessible_resources: [
+			{
+				resources: ['main-world.js'],
+				matches: ['*://*/*'],
+			},
+		],
+		side_panel: {
+			default_path: 'sidepanel/index.html',
+		},
+	},
+})

packages/llms/package.json

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

packages/llms/src/OpenAIClient.ts

@@ -39,6 +39,8 @@ export class OpenAIClient implements LLMClient {
 				: 'required',
 		}
 
+		modelPatch(requestBody)
+
 		// 2. Call API
 		let response: Response
 		try {
@@ -48,7 +50,7 @@ export class OpenAIClient implements LLMClient {
 					'Content-Type': 'application/json',
 					Authorization: `Bearer ${this.config.apiKey}`,
 				},
-				body: JSON.stringify(modelPatch(requestBody)),
+				body: JSON.stringify(requestBody),
 				signal: abortSignal,
 			})
 		} catch (error: unknown) {
@@ -107,14 +109,23 @@ export class OpenAIClient implements LLMClient {
 			case 'length':
 				throw new InvokeError(
 					InvokeErrorType.CONTEXT_LENGTH,
-					'Response truncated: max tokens reached'
+					'Response truncated: max tokens reached',
+					undefined,
+					data
 				)
 			case 'content_filter':
-				throw new InvokeError(InvokeErrorType.CONTENT_FILTER, 'Content filtered by safety system')
+				throw new InvokeError(
+					InvokeErrorType.CONTENT_FILTER,
+					'Content filtered by safety system',
+					undefined,
+					data
+				)
 			default:
 				throw new InvokeError(
 					InvokeErrorType.UNKNOWN,
-					`Unexpected finish_reason: ${choice.finish_reason}`
+					`Unexpected finish_reason: ${choice.finish_reason}`,
+					undefined,
+					data
 				)
 		}
 
@@ -128,7 +139,8 @@ export class OpenAIClient implements LLMClient {
 			throw new InvokeError(
 				InvokeErrorType.NO_TOOL_CALL,
 				'No tool call found in response',
-				normalizedData
+				undefined,
+				data
 			)
 		}
 
@@ -137,7 +149,8 @@ export class OpenAIClient implements LLMClient {
 			throw new InvokeError(
 				InvokeErrorType.UNKNOWN,
 				`Tool "${toolCallName}" not found in tools`,
-				normalizedData
+				undefined,
+				data
 			)
 		}
 
@@ -147,7 +160,8 @@ export class OpenAIClient implements LLMClient {
 			throw new InvokeError(
 				InvokeErrorType.INVALID_TOOL_ARGS,
 				'No tool call arguments found',
-				normalizedData
+				undefined,
+				data
 			)
 		}
 
@@ -158,7 +172,8 @@ export class OpenAIClient implements LLMClient {
 			throw new InvokeError(
 				InvokeErrorType.INVALID_TOOL_ARGS,
 				'Failed to parse tool arguments as JSON',
-				error
+				error,
+				data
 			)
 		}
 
@@ -169,7 +184,8 @@ export class OpenAIClient implements LLMClient {
 			throw new InvokeError(
 				InvokeErrorType.INVALID_TOOL_ARGS,
 				'Tool arguments validation failed',
-				validation.error
+				validation.error,
+				data
 			)
 		}
 		const toolInput = validation.data
@@ -182,7 +198,8 @@ export class OpenAIClient implements LLMClient {
 			throw new InvokeError(
 				InvokeErrorType.TOOL_EXECUTION_ERROR,
 				`Tool execution failed: ${(e as Error).message}`,
-				e
+				e,
+				data
 			)
 		}
 
@@ -201,6 +218,7 @@ export class OpenAIClient implements LLMClient {
 				reasoningTokens: data.usage?.completion_tokens_details?.reasoning_tokens,
 			},
 			rawResponse: data,
+			rawRequest: requestBody,
 		}
 	}
 }

packages/llms/src/errors.ts

@@ -25,14 +25,18 @@ export class InvokeError extends Error {
 	type: InvokeErrorType
 	retryable: boolean
 	statusCode?: number
+	/* raw error (provided if this error is caused by another error) */
 	rawError?: unknown
+	/* raw response from the API (provided if this error is caused by an API calling) */
+	rawResponse?: unknown
 
-	constructor(type: InvokeErrorType, message: string, rawError?: unknown) {
+	constructor(type: InvokeErrorType, message: string, rawError?: unknown, rawResponse?: unknown) {
 		super(message)
 		this.name = 'InvokeError'
 		this.type = type
 		this.retryable = this.isRetryable(type)
 		this.rawError = rawError
+		this.rawResponse = rawResponse
 	}
 
 	private isRetryable(type: InvokeErrorType): boolean {

packages/llms/src/index.ts

@@ -3,7 +3,7 @@ import { DEFAULT_TEMPERATURE, LLM_MAX_RETRIES } from './constants'
 import { InvokeError } from './errors'
 import type { InvokeOptions, InvokeResult, LLMClient, LLMConfig, Message, Tool } from './types'
 
-export type { InvokeOptions, InvokeResult, LLMClient, LLMConfig, Message, Tool }
+export type { InvokeError, InvokeOptions, InvokeResult, LLMClient, LLMConfig, Message, Tool }
 
 export function parseLLMConfig(config: LLMConfig): Required<LLMConfig> {
 	// Runtime validation as defensive programming (types already guarantee these)
@@ -88,12 +88,12 @@ async function withRetry<T>(
 		try {
 			return await fn()
 		} catch (error: unknown) {
+			// do not retry if aborted by user
+			if ((error as any)?.rawError?.name === 'AbortError') throw error
+
 			console.error(error)
 			settings.onError(error as Error)
 
-			// do not retry if aborted by user
-			if ((error as { name?: string })?.name === 'AbortError') throw error
-
 			// do not retry if error is not retryable (InvokeError)
 			if (error instanceof InvokeError && !error.retryable) throw error
 

packages/llms/src/types.ts

@@ -81,6 +81,7 @@ export interface InvokeResult<TResult = unknown> {
 		reasoningTokens?: number // OpenAI o1 series reasoning tokens
 	}
 	rawResponse?: unknown // Raw response for debugging
+	rawRequest?: unknown // Raw request for debugging
 }
 
 /**

packages/llms/src/utils.ts

@@ -27,6 +27,7 @@ export function zodToOpenAITool(name: string, tool: Tool) {
 
 /**
  * Patch model specific parameters
+ * @note in-place modification
  */
 export function modelPatch(body: Record<string, any>) {
 	const model: string = body.model || ''

packages/page-agent/package.json

@@ -1,54 +1,54 @@
 {
-	"name": "page-agent",
+    "name": "page-agent",
-	"private": false,
+    "private": false,
-	"version": "0.3.0-beta",
+    "version": "1.0.1",
-	"type": "module",
+    "type": "module",
-	"main": "./dist/esm/page-agent.js",
+    "main": "./dist/esm/page-agent.js",
-	"module": "./dist/esm/page-agent.js",
+    "module": "./dist/esm/page-agent.js",
-	"types": "./dist/esm/PageAgent.d.ts",
+    "types": "./dist/esm/PageAgent.d.ts",
-	"exports": {
+    "exports": {
-		".": {
+        ".": {
-			"types": "./dist/esm/PageAgent.d.ts",
+            "types": "./dist/esm/PageAgent.d.ts",
-			"import": "./dist/esm/page-agent.js",
+            "import": "./dist/esm/page-agent.js",
-			"default": "./dist/esm/page-agent.js"
+            "default": "./dist/esm/page-agent.js"
-		}
+        }
-	},
+    },
-	"files": [
+    "files": [
-		"dist/"
+        "dist/"
-	],
+    ],
-	"description": "GUI agent for web applications - add intelligent automation to any webpage with a single script",
+    "description": "GUI agent for web applications - add intelligent automation to any webpage with a single script",
-	"keywords": [
+    "keywords": [
-		"ai",
+        "ai",
-		"automation",
+        "automation",
-		"ui-agent",
+        "ui-agent",
-		"GUI-agent",
+        "GUI-agent",
-		"browser-automation",
+        "browser-automation",
-		"web-agent",
+        "web-agent",
-		"llm",
+        "llm",
-		"dom-interaction",
+        "dom-interaction",
-		"web-automation",
+        "web-automation",
-		"GUI-simulation"
+        "GUI-simulation"
-	],
+    ],
-	"author": "Simon<gaomeng1900>",
+    "author": "Simon<gaomeng1900>",
-	"license": "MIT",
+    "license": "MIT",
-	"repository": {
+    "repository": {
-		"type": "git",
+        "type": "git",
-		"url": "https://github.com/alibaba/page-agent.git"
+        "url": "https://github.com/alibaba/page-agent.git"
-	},
+    },
-	"homepage": "https://alibaba.github.io/page-agent/",
+    "homepage": "https://alibaba.github.io/page-agent/",
-	"scripts": {
+    "scripts": {
-		"build": "vite build && npm run build:demo",
+        "build": "vite build && npm run build:demo",
-		"build:demo": "vite build --config vite.iife.config.js",
+        "build:demo": "vite build --config vite.iife.config.js",
-		"dev:demo": "concurrently \"vite build --config vite.iife.config.js --watch\" \"npx serve dist/iife -p 5174\"",
+        "dev:demo": "concurrently \"vite build --config vite.iife.config.js --watch\" \"npx serve dist/iife -p 5174\"",
-		"prepublishOnly": "node -e \"const fs=require('fs');['README.md','LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
+        "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{}})\""
+        "postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
-	},
+    },
-	"dependencies": {
+    "dependencies": {
-		"chalk": "^5.6.2",
+        "chalk": "^5.6.2",
-		"zod": "^4.3.5",
+        "zod": "^4.3.5",
-		"@page-agent/llms": "0.3.0-beta",
+        "@page-agent/llms": "1.0.1",
-		"@page-agent/page-controller": "0.3.0-beta",
+        "@page-agent/page-controller": "1.0.1",
-		"@page-agent/core": "0.3.0-beta",
+        "@page-agent/core": "1.0.1",
-		"@page-agent/ui": "0.3.0-beta"
+        "@page-agent/ui": "1.0.1"
-	}
+    }
 }

packages/page-agent/src/PageAgent.ts

@@ -2,11 +2,12 @@
  * Copyright (C) 2025 Alibaba Group Holding Limited
  * All rights reserved.
  */
-import { type PageAgentConfig, PageAgentCore } from '@page-agent/core'
+import { type PageAgentConfig, PageAgentCore, type PageAgentTool, tool } from '@page-agent/core'
 import { PageController } from '@page-agent/page-controller'
 import { Panel } from '@page-agent/ui'
 
-export type { PageAgentConfig }
+export type { PageAgentConfig, PageAgentTool }
+export { tool }
 
 export class PageAgent extends PageAgentCore {
 	panel: Panel

packages/page-agent/src/demo.ts

@@ -18,7 +18,6 @@ const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm
 const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
 
 // in case document.x is not ready yet
-// @todo give a switch to disable auto-init
 setTimeout(() => {
 	const currentScript = document.currentScript as HTMLScriptElement | null
 	let config: PageAgentConfig
@@ -42,6 +41,7 @@ setTimeout(() => {
 
 	// Create agent
 	window.pageAgent = new PageAgent(config)
+	window.pageAgent.panel.show()
 
 	console.log('🚀 page-agent.js initialized with config:', window.pageAgent.config)
 })

packages/page-controller/package.json

@@ -1,41 +1,41 @@
 {
-	"name": "@page-agent/page-controller",
+    "name": "@page-agent/page-controller",
-	"version": "0.3.0-beta",
+    "version": "1.0.1",
-	"type": "module",
+    "type": "module",
-	"main": "./dist/lib/page-controller.js",
+    "main": "./dist/lib/page-controller.js",
-	"module": "./dist/lib/page-controller.js",
+    "module": "./dist/lib/page-controller.js",
-	"types": "./dist/lib/PageController.d.ts",
+    "types": "./dist/lib/PageController.d.ts",
-	"exports": {
+    "exports": {
-		".": {
+        ".": {
-			"types": "./dist/lib/PageController.d.ts",
+            "types": "./dist/lib/PageController.d.ts",
-			"import": "./dist/lib/page-controller.js",
+            "import": "./dist/lib/page-controller.js",
-			"default": "./dist/lib/page-controller.js"
+            "default": "./dist/lib/page-controller.js"
-		}
+        }
-	},
+    },
-	"files": [
+    "files": [
-		"dist/"
+        "dist/"
-	],
+    ],
-	"description": "Page controller for page-agent - DOM operations and element interactions",
+    "description": "Page controller for page-agent - DOM operations and element interactions",
-	"keywords": [
+    "keywords": [
-		"page-agent",
+        "page-agent",
-		"dom",
+        "dom",
-		"browser-automation",
+        "browser-automation",
-		"web-automation"
+        "web-automation"
-	],
+    ],
-	"author": "Simon<gaomeng1900>",
+    "author": "Simon<gaomeng1900>",
-	"license": "MIT",
+    "license": "MIT",
-	"repository": {
+    "repository": {
-		"type": "git",
+        "type": "git",
-		"url": "https://github.com/alibaba/page-agent.git",
+        "url": "https://github.com/alibaba/page-agent.git",
-		"directory": "packages/page-controller"
+        "directory": "packages/page-controller"
-	},
+    },
-	"homepage": "https://alibaba.github.io/page-agent/",
+    "homepage": "https://alibaba.github.io/page-agent/",
-	"scripts": {
+    "scripts": {
-		"build": "vite build",
+        "build": "vite build",
-		"prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
+        "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{}})\""
+        "postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
-	},
+    },
-	"dependencies": {
+    "dependencies": {
-		"ai-motion": "^0.4.8"
+        "ai-motion": "^0.4.8"
-	}
+    }
 }

packages/page-controller/src/PageController.ts

@@ -80,6 +80,9 @@ export class PageController extends EventTarget {
 	/** last time the tree was updated */
 	private lastTimeUpdate = 0
 
+	/** Whether the tree has been indexed at least once */
+	private isIndexed = false
+
 	/** Visual mask overlay for blocking user interaction during automation */
 	private mask: InstanceType<typeof import('./mask/SimulatorMask').SimulatorMask> | null = null
 	private maskReady: Promise<void> | null = null
@@ -91,17 +94,18 @@ export class PageController extends EventTarget {
 
 		patchReact(this)
 
-		if (config.enableMask) {
+		if (config.enableMask) this.initMask()
-			this.maskReady = this.initMask()
-		}
 	}
 
 	/**
 	 * Initialize mask asynchronously (dynamic import to avoid CSS loading in Node)
 	 */
-	private async initMask(): Promise<void> {
+	initMask() {
-		const { SimulatorMask } = await import('./mask/SimulatorMask')
+		if (this.maskReady !== null) return
-		this.mask = new SimulatorMask()
+		this.maskReady = (async () => {
+			const { SimulatorMask } = await import('./mask/SimulatorMask')
+			this.mask = new SimulatorMask()
+		})()
 	}
 	// ======= State Queries =======
 
@@ -134,6 +138,8 @@ export class PageController extends EventTarget {
 		const content = this.simplifiedHTML
 
 		// Build header: page info + scroll position hint
+		const titleLine = `Current Page: [${title}](${url})`
+
 		const pageInfoLine = `Page info: ${pi.viewport_width}x${pi.viewport_height}px viewport, ${pi.page_width}x${pi.page_height}px total page size, ${pi.pages_above.toFixed(1)} pages above, ${pi.pages_below.toFixed(1)} pages below, ${pi.total_pages.toFixed(1)} total pages, at ${(pi.current_page_position * 100).toFixed(0)}% of page`
 
 		const elementsLabel =
@@ -147,7 +153,7 @@ export class PageController extends EventTarget {
 				? `... ${pi.pixels_above} pixels above (${pi.pages_above.toFixed(1)} pages) - scroll to see more ...`
 				: '[Start of page]'
 
-		const header = `${pageInfoLine}\n\n${elementsLabel}\n\n${scrollHintAbove}`
+		const header = `${titleLine}\n${pageInfoLine}\n\n${elementsLabel}\n\n${scrollHintAbove}`
 
 		// Build footer: scroll position hint
 		const hasContentBelow = pi.pixels_below > 4
@@ -196,6 +202,9 @@ export class PageController extends EventTarget {
 		this.elementTextMap.clear()
 		this.elementTextMap = dom.getElementTextMap(this.simplifiedHTML)
 
+		// Mark as indexed - now element actions are allowed
+		this.isIndexed = true
+
 		// Restore mask blocking
 		if (this.mask) {
 			this.mask.wrapper.style.pointerEvents = 'auto'
@@ -215,11 +224,22 @@ export class PageController extends EventTarget {
 
 	// ======= Element Actions =======
 
+	/**
+	 * Ensure the tree has been indexed before any index-based operation.
+	 * Throws if updateTree() hasn't been called yet.
+	 */
+	private assertIndexed(): void {
+		if (!this.isIndexed) {
+			throw new Error('DOM tree not indexed yet. Can not perform actions on elements.')
+		}
+	}
+
 	/**
 	 * Click element by index
 	 */
 	async clickElement(index: number): Promise<ActionResult> {
 		try {
+			this.assertIndexed()
 			const element = getElementByIndex(this.selectorMap, index)
 			const elemText = this.elementTextMap.get(index)
 			await clickElement(element)
@@ -249,6 +269,7 @@ export class PageController extends EventTarget {
 	 */
 	async inputText(index: number, text: string): Promise<ActionResult> {
 		try {
+			this.assertIndexed()
 			const element = getElementByIndex(this.selectorMap, index)
 			const elemText = this.elementTextMap.get(index)
 			await inputTextElement(element, text)
@@ -270,6 +291,7 @@ export class PageController extends EventTarget {
 	 */
 	async selectOption(index: number, optionText: string): Promise<ActionResult> {
 		try {
+			this.assertIndexed()
 			const element = getElementByIndex(this.selectorMap, index)
 			const elemText = this.elementTextMap.get(index)
 			await selectOptionElement(element as HTMLSelectElement, optionText)
@@ -298,6 +320,8 @@ export class PageController extends EventTarget {
 		try {
 			const { down, numPages, pixels, index } = options
 
+			this.assertIndexed()
+
 			const scrollAmount = pixels ?? numPages * (down ? 1 : -1) * window.innerHeight
 
 			const element = index !== undefined ? getElementByIndex(this.selectorMap, index) : null
@@ -327,6 +351,8 @@ export class PageController extends EventTarget {
 		try {
 			const { right, pixels, index } = options
 
+			this.assertIndexed()
+
 			const scrollAmount = pixels * (right ? 1 : -1)
 
 			const element = index !== undefined ? getElementByIndex(this.selectorMap, index) : null
@@ -369,7 +395,7 @@ export class PageController extends EventTarget {
 
 	/**
 	 * Show the visual mask overlay.
-	 * Only works if enableMask was set to true in config.
+	 * Only works after mask is setup.
 	 */
 	async showMask(): Promise<void> {
 		await this.maskReady
@@ -378,7 +404,7 @@ export class PageController extends EventTarget {
 
 	/**
 	 * Hide the visual mask overlay.
-	 * Only works if enableMask was set to true in config.
+	 * Only works after mask is setup.
 	 */
 	async hideMask(): Promise<void> {
 		await this.maskReady
@@ -394,6 +420,7 @@ export class PageController extends EventTarget {
 		this.selectorMap.clear()
 		this.elementTextMap.clear()
 		this.simplifiedHTML = '<EMPTY>'
+		this.isIndexed = false
 		this.mask?.dispose()
 		this.mask = null
 	}

packages/page-controller/src/mask/SimulatorMask.module.css

@@ -2,8 +2,7 @@
 	position: fixed;
 	inset: 0;
 	z-index: 2147483641; /* 确保在所有元素之上，除了 panel */
-	/* pointer-events: none; */
+	cursor: wait;
-	cursor: not-allowed;
 	overflow: hidden;
 
 	display: none;

packages/page-controller/src/mask/SimulatorMask.ts

@@ -6,6 +6,7 @@ import styles from './SimulatorMask.module.css'
 import cursorStyles from './cursor.module.css'
 
 export class SimulatorMask {
+	shown: boolean = false
 	wrapper = document.createElement('div')
 	motion = new Motion({
 		mode: isPageDark() ? 'dark' : 'light',
@@ -140,6 +141,9 @@ export class SimulatorMask {
 	}
 
 	show() {
+		if (this.shown) return
+
+		this.shown = true
 		this.motion.start()
 		this.motion.fadeIn()
 
@@ -155,6 +159,9 @@ export class SimulatorMask {
 	}
 
 	hide() {
+		if (!this.shown) return
+
+		this.shown = false
 		this.motion.fadeOut()
 		this.motion.pause()
 

packages/page-controller/src/mask/cursor-border.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <g><path d="M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/></g>
+</svg>

packages/page-controller/src/mask/cursor-fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+  </defs>
+  <g xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(light-dark(rgba(0, 0, 0, 0.4), rgba(237, 237, 237, 0.4)) 3px 4px 4px);"><path d="M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z" fill="#ffffff" stroke="none" style="fill: #ffffff;"/></g>
+</svg>

packages/page-controller/src/mask/cursor.module.css

@@ -5,80 +5,59 @@
 	height: var(--cursor-size, 75px);
 	pointer-events: none;
 	z-index: 10000;
-	transform: translate(-30%, -30%);
-
-	animation: cursor-enter 300ms ease-out forwards;
 }
 
 .cursorBorder {
 	position: absolute;
-	inset: 0;
+	width: 100%;
+	height: 100%;
 	background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));
-	mask-image: url(https://img.alicdn.com/imgextra/i1/O1CN01YHLVYR1LvqWIyo5kH_!!6000000001362-2-tps-202-202.png);
+	mask-image: url(./cursor-border.svg);
 	mask-size: 100% 100%;
 	mask-repeat: no-repeat;
-	animation: cursor-breathe 2s ease-in-out infinite;
+
+	transform-origin: center;
+	transform: rotate(-135deg) scale(1.2);
+	margin-left: -10px;
+	margin-top: -18px;
 }
 
 .cursorFilling {
 	position: absolute;
-	inset: 0;
+	width: 100%;
-	background: url(https://img.alicdn.com/imgextra/i3/O1CN01JZOqOS1Tu1sIKbPLW_!!6000000002441-2-tps-202-202.png);
+	height: 100%;
+	background: url(./cursor-fill.svg);
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
+
+	transform-origin: center;
+	transform: rotate(-135deg) scale(1.2);
+	margin-left: -10px;
+	margin-top: -18px;
 }
 
 .cursorRipple {
 	position: absolute;
-	inset: 0;
+	width: 100%;
+	height: 100%;
 	pointer-events: none;
+	margin-left: -50%;
+	margin-top: -50%;
+
+	&::after {
+		content: '';
+		opacity: 0;
+		position: absolute;
+		inset: 0;
+		border: 4px solid rgba(57, 182, 255, 1);
+		border-radius: 50%;
+	}
 }
 
 .cursor.clicking .cursorRipple::after {
-	content: '';
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: -30%;
-	top: -30%;
-	border: 4px solid rgba(57, 182, 255, 1);
-	border-radius: 50%;
 	animation: cursor-ripple 300ms ease-out forwards;
 }
 
-/* 光标动画关键帧 */
-@keyframes cursor-breathe {
-	0%,
-	100% {
-		transform: scale(1);
-		opacity: 0.9;
-	}
-	50% {
-		transform: scale(1.05);
-		opacity: 1;
-	}
-}
-
-@keyframes cursor-rotate {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes cursor-enter {
-	0% {
-		transform: translate(-30%, -30%) scale(0.5);
-		opacity: 0;
-	}
-	100% {
-		transform: translate(-30%, -30%) scale(1);
-		opacity: 1;
-	}
-}
-
 @keyframes cursor-ripple {
 	0% {
 		transform: scale(0);

packages/ui/package.json

@@ -1,38 +1,38 @@
 {
-	"name": "@page-agent/ui",
+    "name": "@page-agent/ui",
-	"version": "0.3.0-beta",
+    "version": "1.0.1",
-	"type": "module",
+    "type": "module",
-	"main": "./dist/lib/page-agent-ui.js",
+    "main": "./dist/lib/page-agent-ui.js",
-	"module": "./dist/lib/page-agent-ui.js",
+    "module": "./dist/lib/page-agent-ui.js",
-	"types": "./dist/lib/index.d.ts",
+    "types": "./dist/lib/index.d.ts",
-	"exports": {
+    "exports": {
-		".": {
+        ".": {
-			"types": "./dist/lib/index.d.ts",
+            "types": "./dist/lib/index.d.ts",
-			"import": "./dist/lib/page-agent-ui.js",
+            "import": "./dist/lib/page-agent-ui.js",
-			"default": "./dist/lib/page-agent-ui.js"
+            "default": "./dist/lib/page-agent-ui.js"
-		}
+        }
-	},
+    },
-	"files": [
+    "files": [
-		"dist/"
+        "dist/"
-	],
+    ],
-	"description": "UI components for page-agent - Panel and i18n",
+    "description": "UI components for page-agent - Panel and i18n",
-	"keywords": [
+    "keywords": [
-		"page-agent",
+        "page-agent",
-		"ui",
+        "ui",
-		"panel",
+        "panel",
-		"i18n"
+        "i18n"
-	],
+    ],
-	"author": "Simon<gaomeng1900>",
+    "author": "Simon<gaomeng1900>",
-	"license": "MIT",
+    "license": "MIT",
-	"repository": {
+    "repository": {
-		"type": "git",
+        "type": "git",
-		"url": "https://github.com/alibaba/page-agent.git",
+        "url": "https://github.com/alibaba/page-agent.git",
-		"directory": "packages/ui"
+        "directory": "packages/ui"
-	},
+    },
-	"homepage": "https://alibaba.github.io/page-agent/",
+    "homepage": "https://alibaba.github.io/page-agent/",
-	"scripts": {
+    "scripts": {
-		"build": "vite build",
+        "build": "vite build",
-		"prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
+        "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{}})\""
+        "postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
-	}
+    }
 }

packages/ui/src/panel/Panel.ts

@@ -563,9 +563,8 @@ export class Panel {
 
 		// 2. Render each history event
 		const history = this.#agent.history
-		for (let i = 0; i < history.length; i++) {
+		for (const event of history) {
-			const event = history[i]
+			items.push(...this.#createHistoryCards(event))
-			items.push(...this.#createHistoryCards(event, i + 1))
 		}
 
 		this.#historySection.innerHTML = items.join('')
@@ -577,14 +576,17 @@ export class Panel {
 	}
 
 	/** Create cards for a history event */
-	#createHistoryCards(event: PanelAgentAdapter['history'][number], stepNumber: number): string[] {
+	#createHistoryCards(event: PanelAgentAdapter['history'][number]): string[] {
 		const cards: string[] = []
 		const time = formatTime(this.#config.language ?? 'en-US')
-		const meta = this.#i18n.t('ui.panel.step', {
+		const meta =
-			number: stepNumber.toString(),
+			event.type === 'step' && event.stepIndex !== undefined
-			time,
+				? this.#i18n.t('ui.panel.step', {
-			duration: '',
+						number: (event.stepIndex + 1).toString(),
-		})
+						time,
+						duration: '',
+					})
+				: time
 
 		if (event.type === 'step') {
 			// Reflection card
@@ -606,6 +608,13 @@ export class Panel {
 			)
 		} else if (event.type === 'user_takeover') {
 			cards.push(createCard({ icon: '👤', content: 'User takeover', meta, type: 'input' }))
+		} else if (event.type === 'retry') {
+			const retryInfo = `${event.message || 'Retrying'} (${event.attempt}/${event.maxAttempts})`
+			cards.push(createCard({ icon: '🔄', content: retryInfo, meta, type: 'observation' }))
+		} else if (event.type === 'error') {
+			cards.push(
+				createCard({ icon: '❌', content: event.message || 'Error', meta, type: 'observation' })
+			)
 		}
 
 		return cards

packages/ui/src/panel/types.ts

@@ -33,7 +33,8 @@ export interface PanelAgentAdapter extends EventTarget {
 
 	/** History of agent events */
 	readonly history: readonly {
-		type: 'step' | 'observation' | 'user_takeover' | 'error'
+		type: 'step' | 'observation' | 'user_takeover' | 'retry' | 'error'
+		stepIndex?: number
 		/** For 'step' type */
 		reflection?: {
 			evaluation_previous_goal?: string
@@ -48,6 +49,11 @@ export interface PanelAgentAdapter extends EventTarget {
 		}
 		/** For 'observation' type */
 		content?: string
+		/** For 'retry' type */
+		attempt?: number
+		maxAttempts?: number
+		/** For 'retry' and 'error' types */
+		message?: string
 	}[]
 
 	/** Current task being executed */

packages/website/package.json

@@ -1,42 +1,39 @@
 {
-	"name": "@page-agent/website",
+    "name": "@page-agent/website",
-	"private": true,
+    "private": true,
-	"version": "0.3.0-beta",
+    "version": "1.0.1",
-	"type": "module",
+    "type": "module",
-	"scripts": {
+    "scripts": {
-		"dev": "vite --host 0.0.0.0",
+        "dev": "vite --host 0.0.0.0",
-		"build:website": "vite build",
+        "build:website": "vite build",
-		"preview": "vite preview",
+        "preview": "vite preview",
-		"typecheck": "tsc --noEmit"
+        "typecheck": "tsc --noEmit"
-	},
+    },
-	"devDependencies": {
+    "devDependencies": {
-		"@tailwindcss/vite": "^4.1.18",
+        "@tailwindcss/vite": "^4.1.18",
-		"@types/react": "^19.2.8",
+        "@types/react": "^19.2.8",
-		"@types/react-dom": "^19.2.1",
+        "@types/react-dom": "^19.2.1",
-		"@vitejs/plugin-react-swc": "^4.1.0",
+        "@vitejs/plugin-react-swc": "^4.1.0",
-		"i18next": "^25.7.4",
+        "react": "^19.2.4",
-		"i18next-browser-languagedetector": "^8.2.0",
+        "react-dom": "^19.2.4",
-		"react": "^19.2.3",
+        "tailwindcss": "^4.1.14",
-		"react-dom": "^19.2.3",
+        "tw-animate-css": "^1.4.0",
-		"react-i18next": "^16.5.2",
+        "wouter": "^3.9.0"
-		"tailwindcss": "^4.1.14",
+    },
-		"tw-animate-css": "^1.4.0",
+    "dependencies": {
-		"wouter": "^3.9.0"
+        "@radix-ui/react-icons": "^1.3.2",
-	},
+        "@radix-ui/react-separator": "^1.1.8",
-	"dependencies": {
+        "@radix-ui/react-slot": "^1.2.4",
-		"@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-switch": "^1.2.6",
-		"@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-tooltip": "^1.2.8",
-		"@radix-ui/react-slot": "^1.2.4",
+        "class-variance-authority": "^0.7.1",
-		"@radix-ui/react-switch": "^1.2.6",
+        "clsx": "^2.1.1",
-		"@radix-ui/react-tooltip": "^1.2.8",
+        "lucide-react": "^0.563.0",
-		"class-variance-authority": "^0.7.1",
+        "motion": "^12.29.2",
-		"clsx": "^2.1.1",
+        "next-themes": "^0.4.6",
-		"lucide-react": "^0.562.0",
+        "rough-notation": "^0.5.1",
-		"motion": "^12.26.1",
+        "simple-icons": "^16.6.0",
-		"next-themes": "^0.4.6",
+        "sonner": "^2.0.7",
-		"rough-notation": "^0.5.1",
+        "tailwind-merge": "^3.4.0"
-		"simple-icons": "^16.5.0",
+    }
-		"sonner": "^2.0.7",
-		"tailwind-merge": "^3.4.0"
-	}
 }

packages/website/src/components/BetaNotice.tsx

@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next'
+import { useLanguage } from '@/i18n/context'
 
 export default function BetaNotice() {
-	const { t } = useTranslation('common')
+	const { isZh } = useLanguage()
 
 	return (
 		<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-8">
@@ -11,9 +11,13 @@ export default function BetaNotice() {
 				</div>
 				<div className="ml-3">
 					<h3 className="text-sm font-medium text-orange-800 dark:text-orange-200 mb-1">
-						{t('beta_notice.title')}
+						{isZh ? 'Beta 阶段' : 'Beta Stage'}
 					</h3>
-					<p className="text-sm text-orange-700 dark:text-orange-300">{t('beta_notice.content')}</p>
+					<p className="text-sm text-orange-700 dark:text-orange-300">
+						{isZh
+							? '当前功能未完成，接口可能随时变更。正式版本发布前请勿用于生产环境。'
+							: 'Current features are incomplete and the API may change at any time. Please do not use in production environments before the official release.'}
+					</p>
 				</div>
 			</div>
 		</div>

packages/website/src/components/Footer.tsx

@@ -1,8 +1,9 @@
-import { useTranslation } from 'react-i18next'
 import { siGithub } from 'simple-icons'
 
+import { useLanguage } from '@/i18n/context'
+
 export default function Footer() {
-	const { t } = useTranslation('common')
+	const { isZh } = useLanguage()
 
 	return (
 		<footer
@@ -11,14 +12,16 @@ export default function Footer() {
 		>
 			<div className="max-w-7xl mx-auto px-6 py-6">
 				<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
-					<p className="text-gray-600 dark:text-gray-300 text-sm">{t('footer.copyright')}</p>
+					<p className="text-gray-600 dark:text-gray-300 text-sm">
+						© 2026 page-agent. All rights reserved.
+					</p>
 					<div className="flex items-center space-x-6">
 						<a
 							href="https://github.com/alibaba/page-agent"
 							target="_blank"
 							rel="noopener noreferrer"
 							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')}
+							aria-label={isZh ? '访问 GitHub 仓库' : 'Visit GitHub repository'}
 						>
 							<svg
 								role="img"

packages/website/src/components/Header.tsx

@@ -1,15 +1,16 @@
 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 { useLanguage } from '@/i18n/context'
+
 import LanguageSwitcher from './LanguageSwitcher'
 import ThemeSwitcher from './ThemeSwitcher'
 import { HyperText } from './ui/hyper-text'
 
 export default function Header() {
-	const { t } = useTranslation('common')
+	const { isZh } = useLanguage()
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
 	return (
@@ -24,7 +25,7 @@ export default function Header() {
 						<Link
 							href="~/"
 							className="flex items-center gap-2 sm:gap-3 group shrink-0"
-							aria-label={t('header.logo_alt')}
+							aria-label={isZh ? 'page-agent 首页' : 'page-agent home'}
 							onClick={() => setMobileMenuOpen(false)}
 						>
 							<img
@@ -43,7 +44,7 @@ export default function Header() {
 									animateOnHover={true}
 									aria-hidden="true"
 								>
-									{t('header.slogan')}
+									GUI Agent in your webpage
 								</HyperText>
 							</div>
 						</Link>
@@ -57,7 +58,7 @@ export default function Header() {
 							<Link
 								href="~/docs/introduction/overview"
 								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')}
+								aria-label={isZh ? '文档' : 'Docs'}
 							>
 								<BookOpen className="w-5 h-5" />
 							</Link>
@@ -66,7 +67,7 @@ export default function Header() {
 								target="_blank"
 								rel="noopener noreferrer"
 								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')}
+								aria-label="GitHub"
 							>
 								<svg
 									role="img"
@@ -83,7 +84,7 @@ export default function Header() {
 						<nav
 							className="hidden md:flex items-center space-x-6"
 							role="navigation"
-							aria-label={t('header.nav_docs')}
+							aria-label={isZh ? '文档' : 'Docs'}
 						>
 							<span className="text-xs font-mono text-gray-400 dark:text-gray-500 tabular-nums before:content-['v']">
 								{import.meta.env.VERSION}
@@ -93,14 +94,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"
 							>
 								<BookOpen className="w-4 h-4" />
-								{t('header.nav_docs')}
+								{isZh ? '文档' : 'Docs'}
 							</Link>
 							<a
 								href="https://github.com/alibaba/page-agent"
 								target="_blank"
 								rel="noopener noreferrer"
 								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')}
+								aria-label="GitHub"
 							>
 								<svg
 									role="img"
@@ -110,7 +111,7 @@ export default function Header() {
 								>
 									<path d={siGithub.path} />
 								</svg>
-								{t('header.nav_source')}
+								GitHub
 							</a>
 							<ThemeSwitcher />
 							<LanguageSwitcher />
@@ -120,7 +121,7 @@ export default function Header() {
 						<button
 							type="button"
 							className="md:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 shrink-0"
-							aria-label={t('header.mobile_menu')}
+							aria-label={isZh ? '打开导航栏' : 'Open navigation'}
 							aria-expanded={mobileMenuOpen}
 							aria-controls="mobile-menu"
 							onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
@@ -142,14 +143,14 @@ export default function Header() {
 								onClick={() => setMobileMenuOpen(false)}
 							>
 								<BookOpen className="w-5 h-5" />
-								{t('header.nav_docs')}
+								{isZh ? '文档' : 'Docs'}
 							</Link>
 							<a
 								href="https://github.com/alibaba/page-agent"
 								target="_blank"
 								rel="noopener noreferrer"
 								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')}
+								aria-label="GitHub"
 							>
 								<svg
 									role="img"
@@ -159,7 +160,7 @@ export default function Header() {
 								>
 									<path d={siGithub.path} />
 								</svg>
-								{t('header.nav_source')}
+								GitHub
 							</a>
 							<div className="flex items-center gap-3 px-3 py-2">
 								<ThemeSwitcher />

packages/website/src/components/HighlightSyntax.module.css

@@ -3,6 +3,8 @@
 	word-break: break-word;
 	overflow-wrap: break-word;
 	font-family: monospace;
+	font-size: 13px;
+	line-height: 1;
 	color: #171717;
 }
 

packages/website/src/components/LanguageSwitcher.tsx

@@ -1,22 +1,21 @@
 import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+
+import { useLanguage } from '@/i18n/context'
 
 export default function LanguageSwitcher() {
-	const { i18n, t } = useTranslation('common')
+	const { language, isZh, setLanguage } = useLanguage()
 	const [isOpen, setIsOpen] = useState(false)
 	const dropdownRef = useRef<HTMLDivElement>(null)
 
-	const currentLang = i18n.language
-
 	const languages = [
-		{ code: 'zh-CN', label: '中文' },
+		{ code: 'zh-CN' as const, label: '中文' },
-		{ code: 'en-US', label: 'English' },
+		{ code: 'en-US' as const, label: 'English' },
 	]
 
-	const currentLanguage = languages.find((lang) => lang.code === currentLang) || languages[0]
+	const currentLanguage = languages.find((lang) => lang.code === language) || languages[0]
 
-	const handleLanguageChange = (langCode: string) => {
+	const handleLanguageChange = (langCode: 'zh-CN' | 'en-US') => {
-		i18n.changeLanguage(langCode)
+		setLanguage(langCode)
 		setIsOpen(false)
 	}
 
@@ -42,7 +41,7 @@ export default function LanguageSwitcher() {
 			<button
 				onClick={() => setIsOpen(!isOpen)}
 				className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300"
-				aria-label={t('language.switch_label')}
+				aria-label={isZh ? '切换语言' : 'Switch language'}
 				aria-expanded={isOpen}
 				aria-haspopup="true"
 			>
@@ -83,14 +82,14 @@ export default function LanguageSwitcher() {
 							key={lang.code}
 							onClick={() => handleLanguageChange(lang.code)}
 							className={`w-full flex items-center gap-2 px-4 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
-								currentLang === lang.code
+								language === lang.code
 									? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
 									: 'text-gray-700 dark:text-gray-300'
 							}`}
 							role="menuitem"
 						>
 							<span>{lang.label}</span>
-							{currentLang === lang.code && (
+							{language === lang.code && (
 								<svg
 									className="w-4 h-4 ml-auto"
 									fill="none"

packages/website/src/constants.ts

@@ -1,7 +1,8 @@
 // Demo build (auto-init with demo LLM, for quick testing)
-export const CDN_DEMO_URL = 'https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js'
+export const CDN_DEMO_URL =
+	'https://cdn.jsdelivr.net/npm/page-agent@1.0.1/dist/iife/page-agent.demo.js'
 export const CDN_DEMO_CN_URL =
-	'https://registry.npmmirror.com/page-agent/latest/files/dist/iife/page-agent.demo.js'
+	'https://registry.npmmirror.com/page-agent/1.0.1/files/dist/iife/page-agent.demo.js'
 
 // Demo LLM for website testing
 export const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'

packages/website/src/i18n/README.md

@@ -1,73 +0,0 @@
-# 国际化配置说明
-
-本项目使用 `react-i18next` 实现国际化支持。
-
-## 目录结构
-
-```
-pages/i18n/
-├── config.ts              # i18next 配置和初始化
-├── types.ts               # TypeScript 类型声明
-├── locales/
-│   ├── zh-CN/             # 中文翻译
-│   │   ├── common.json    # 通用组件（Header, Footer等）
-│   │   ├── home.json      # 首页
-│   │   └── docs.json      # 文档页（待完善）
-│   └── en-US/             # 英文翻译
-│       ├── common.json
-│       ├── home.json
-│       └── docs.json
-└── README.md              # 本文件
-```
-
-## 使用方法
-
-### 在组件中使用
-
-```tsx
-import { useTranslation } from 'react-i18next'
-
-function MyComponent() {
-    const { t } = useTranslation('common') // 指定命名空间
-
-    return <h1>{t('header.nav_docs')}</h1>
-}
-```
-
-### 使用多个命名空间
-
-```tsx
-const { t } = useTranslation(['home', 'common'])
-
-// 使用时指定命名空间
-t('home:hero.title')
-t('common:header.nav_docs')
-```
-
-## 语言切换
-
-用户可以通过以下方式切换语言：
-
-1. **自动检测**：首次访问根据浏览器语言自动选择
-2. **手动切换**：点击页面右上角的语言切换按钮
-3. **持久化**：语言选择保存在 `localStorage` 中，刷新后保持
-
-## 添加新翻译
-
-1. 在对应的 JSON 文件中添加翻译条目（如 `zh-CN/home.json`）
-2. 在对应的英文文件中添加翻译（如 `en-US/home.json`）
-3. 在组件中使用 `t('namespace:key')` 获取翻译
-
-## TypeScript 支持
-
-`types.ts` 文件提供了类型声明，使得翻译 key 具有：
-
-- 自动补全
-- 编译期类型检查
-- 防止拼写错误
-
-## 待完成
-
-- [ ] 文档页翻译（`docs.json`）
-- [ ] DocsLayout 导航结构国际化
-- [ ] 404 页面国际化

packages/website/src/i18n/config.ts

@@ -1,45 +0,0 @@
-import i18n from 'i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
-import { initReactI18next } from 'react-i18next'
-
-import commonEn from './locales/en-US/common'
-import docsEn from './locales/en-US/docs'
-import homeEn from './locales/en-US/home'
-import commonZh from './locales/zh-CN/common'
-import docsZh from './locales/zh-CN/docs'
-import homeZh from './locales/zh-CN/home'
-
-const resources = {
-	'zh-CN': {
-		common: commonZh,
-		home: homeZh,
-		docs: docsZh,
-	},
-	'en-US': {
-		common: commonEn,
-		home: homeEn,
-		docs: docsEn,
-	},
-}
-
-i18n
-	.use(LanguageDetector)
-	.use(initReactI18next)
-	.init({
-		resources,
-		fallbackLng: 'en-US',
-		defaultNS: 'common',
-
-		// 语言检测配置
-		detection: {
-			// localStorage 优先（用户手动选择），其次检测浏览器语言
-			order: ['localStorage', 'navigator'],
-			caches: ['localStorage'],
-		},
-
-		interpolation: {
-			escapeValue: false, // React 已经做了 XSS 防护
-		},
-	})
-
-export default i18n

packages/website/src/i18n/context.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, createContext, use, useState } from 'react'
+
+type Lang = 'en-US' | 'zh-CN'
+
+const LanguageContext = createContext<{
+	language: Lang
+	isZh: boolean
+	setLanguage: (lang: Lang) => void
+} | null>(null)
+
+export function LanguageProvider({ children }: { children: ReactNode }) {
+	const [language, setLang] = useState<Lang>(() => {
+		const stored = localStorage.getItem('language') as Lang
+		if (stored === 'zh-CN' || stored === 'en-US') return stored
+		return navigator.language.startsWith('zh') ? 'zh-CN' : 'en-US'
+	})
+
+	const setLanguage = (lang: Lang) => {
+		setLang(lang)
+		localStorage.setItem('language', lang)
+	}
+
+	return (
+		<LanguageContext value={{ language, isZh: language === 'zh-CN', setLanguage }}>
+			{children}
+		</LanguageContext>
+	)
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useLanguage() {
+	const ctx = use(LanguageContext)
+	if (!ctx) throw new Error('useLanguage must be used within LanguageProvider')
+	return ctx
+}

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

@@ -1,42 +0,0 @@
-export default {
-	header: {
-		logo_alt: 'page-agent home',
-		slogan: 'GUI Agent in your webpage',
-		nav_docs: 'Docs',
-		nav_source: 'GitHub',
-		mobile_menu: 'Open navigation',
-	},
-	footer: {
-		copyright: '© 2025 page-agent. All rights reserved.',
-		github_label: 'Visit GitHub repository',
-	},
-	beta_notice: {
-		title: 'Beta Stage',
-		content:
-			'Current features are incomplete and the API may change at any time. Please do not use in production environments before the official release.',
-	},
-	language: {
-		zh: '中文',
-		en: 'English',
-		switch_label: 'Switch language',
-	},
-	nav: {
-		introduction: 'Introduction',
-		features: 'Features',
-		integration: 'Integration',
-		advanced: 'Advanced',
-		overview: 'Overview',
-		quick_start: 'Quick Start',
-		limitations: 'Limitations',
-		models: 'Models',
-		custom_tools: 'Custom Tools',
-		knowledge_injection: 'Instructions',
-		data_masking: 'Data Masking',
-		cdn_setup: 'CDN Setup',
-		best_practices: 'Best Practices',
-		third_party_agent: 'Third-party Agent',
-		security_permissions: 'Security & Permissions',
-		page_agent: 'PageAgent',
-		page_agent_core: 'PageAgentCore',
-	},
-}

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

@@ -1,157 +0,0 @@
-export default {
-	overview: {
-		title: 'Overview',
-		subtitle:
-			'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 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',
-			desc: 'DOM-based analysis with high-intensity dehydration. No visual recognition needed. Pure text for fast and precise operations.',
-		},
-		feature_secure: {
-			title: '🔒 Secure & Controllable',
-			desc: 'Supports operation allowlists, data masking protection. Inject custom knowledge to make AI work by your rules.',
-		},
-		feature_backend: {
-			title: '⚡ Zero Backend',
-			desc: 'CDN or NPM import with custom LLM endpoints.',
-		},
-		feature_accessible: {
-			title: '♿ Accessible Intelligence',
-			desc: 'Provides natural language interface for complex B2B systems and admin panels. Makes software easy for everyone.',
-		},
-		vs_browser_use: 'vs. browser-use',
-		table_feature: 'Feature',
-		table_deployment: 'Deployment',
-		table_deployment_pa: 'Embedded component',
-		table_deployment_bu: 'External tool',
-		table_scope: 'Scope',
-		table_scope_pa: 'Current page',
-		table_scope_bu: 'Entire browser',
-		table_user: 'Target Users',
-		table_user_pa: 'Web developers',
-		table_user_bu: 'Scraper/Agent developers',
-		table_scenario: 'Use Case',
-		table_scenario_pa: 'UX enhancement',
-		table_scenario_bu: 'Automation tasks',
-		use_cases_title: 'Use Cases',
-		use_case1_title: 'Connect Support Bots:',
-		use_case1_desc:
-			"Turn your support assistant into a full agent. Customer service bots no longer just say 'Please click the settings button then click...'—they operate for users directly.",
-		use_case2_title: 'Modernize Legacy Apps:',
-		use_case2_desc:
-			'One line of code transforms old apps into agents. Product experts help users navigate complex B2B software. Reduce support costs and improve satisfaction.',
-		use_case3_title: 'Interactive Training:',
-		use_case3_desc:
-			"Demonstrate workflows in real-time. Let AI show the complete process of 'how to submit an expense report.'",
-		use_case4_title: 'Accessibility:',
-		use_case4_desc:
-			'Provide natural language interaction for visually impaired and elderly users. Connect screen readers or voice assistants to make software accessible to everyone.',
-		get_started_title: '🚀 Get Started',
-		get_started_desc:
-			'Ready to add an AI operator to your website? Check our quick start guide for integration in minutes.',
-		get_started_button: 'Quick Start →',
-	},
-	quick_start: {
-		title: 'Quick Start',
-		subtitle: 'Integrate page-agent in minutes.',
-		installation: 'Installation Steps',
-		step1_title: '1. Import Options',
-		step1_cdn: 'CDN Import',
-		step1_npm: 'NPM Install',
-		step2_title: '2. Initialize Configuration',
-		step3_title: '3. Start Using',
-	},
-	limitations: {
-		title: 'Limitations',
-		subtitle: "Understand page-agent's current capabilities and technical constraints",
-		page_support: 'Page Support Limitations',
-		spa_limit_title: 'Single Page Application Limits',
-		spa_limit_1: '• SPA only: Currently operates within a single page',
-		spa_limit_2: '• Multi-page relay in design: Cannot execute continuous tasks across pages yet',
-		spa_limit_3: '• Requires integration: Cannot operate on sites without page-agent',
-		interaction_limits: 'Interaction Limitations',
-		supported_ops: 'Supported Operations',
-		op_click: 'Click',
-		op_input: 'Text input',
-		op_scroll: 'Scroll',
-		op_submit: 'Form submit',
-		op_select: 'Select',
-		op_focus: 'Focus',
-		unsupported_ops: 'Unsupported Operations',
-		op_hover: 'Mouse hover',
-		op_drag: 'Drag & drop',
-		op_context: 'Right-click menu',
-		op_draw: 'Drawing',
-		op_keyboard: 'Keyboard shortcuts',
-		op_position: 'Position-based control',
-		understanding_limits: 'Understanding Limitations',
-		no_vision_title: 'No Visual Recognition',
-		no_vision_desc:
-			'page-agent operates based on DOM structure with no visual recognition. Cannot understand:',
-		no_vision_1: '• Image content: Cannot recognize text, icons, or visual elements in images',
-		no_vision_2: '• Canvas: Cannot understand graphics drawn on Canvas',
-		no_vision_3: '• WebGL 3D: Cannot operate elements in 3D scenes',
-		no_vision_4: '• SVG graphics: Cannot understand visual content and paths in SVG',
-		website_requirements: 'Website Requirements',
-		req_semantic_title: 'Semantic & Usability',
-		req_semantic_desc:
-			'All operations rely on semantic tags and attributes. Poor semantic structure or lack of accessibility features may affect AI understanding accuracy.',
-		req_ux_title: 'UI/UX',
-		req_ux_desc:
-			'Counter-intuitive interaction rules, visual-only operation hints, complex mouse interactions, or rapidly appearing/disappearing elements can affect AI understanding and operation.',
-		req_env_title: 'Environment',
-		req_env_desc: 'modern browser',
-		future: 'Future Plans',
-		future_title: 'Coming Soon',
-		future_1: '• Multi-page relay capabilities',
-		future_2: '• Richer mouse interaction support',
-		future_3: '• Basic visual understanding',
-		future_4: '• Smarter error recovery',
-	},
-	models: {
-		title: 'Models',
-		subtitle:
-			'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',
-		available: 'Tested Models',
-		available_verified: 'Verified Working Models',
-		tips: 'Tips',
-		tip_1: 'Reasoning models (like GPT-5) are slower with no advantage',
-		tip_2:
-			'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 code',
-		security_desc:
-			'In production environments, to hide the real LLM API Keys, we recommend the following architecture:',
-		security_backend_proxy: 'Backend Proxy Pattern',
-		security_backend_desc:
-			'Set up a backend LLM proxy endpoint that uses the same authentication method as other APIs in your website, such as:',
-		security_method_1: '• Session/Cookie-based authentication',
-		security_method_2: '• OIDC (OpenID Connect) single sign-on',
-		security_method_3: '• Temporary Access Key or JWT Token',
-		configuration: 'Configuration',
-	},
-	custom_tools: {
-		title: 'Custom Tools',
-		subtitle:
-			'Extend AI Agent capabilities by registering custom tools. Use Zod to define strict input schemas for safe business logic calls.',
-		registration: 'Tool Registration',
-		registration_desc:
-			'Each custom tool requires four core properties: name, description, input schema, and execute function.',
-		page_filter: 'Page Filter',
-		page_filter_desc:
-			'Control tool visibility on specific pages via the pageFilter property to enhance security and UX.',
-		best_practices: 'Best Practices',
-		bp_performance: '⚡ Performance Optimization',
-		bp_1: '• Use pageFilter to reduce unnecessary tool loading',
-		bp_2: '• Implement appropriate caching in execute functions',
-		bp_3: '• Avoid long-running sync operations in tools',
-	},
-}

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

@@ -1,82 +0,0 @@
-export default {
-	hero: {
-		badge: 'GUI Agent in your webpage',
-		title_line1: 'The AI Operator',
-		title_line2: 'Living in Your Web App',
-		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',
-		tab_other: '🌐 Try on Other Sites',
-		input_placeholder: 'Describe what you want AI to do...',
-		execute_button: 'Run',
-		default_task:
-			'Goto docs in navigation bar, find Quick-Start section, and summarize in markdown',
-	},
-	try_other: {
-		step1_title: 'Step 1:',
-		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',
-		notice_items: {
-			item1: 'Demo only—link may expire without notice',
-			item2: 'This free demo uses DeepSeek API (see their terms and privacy policy)',
-			item3: 'Some sites block script injection (CSP policies)',
-			item4: 'Works on single-page apps only—reload required after navigation',
-			item5: 'Text-only understanding—no image recognition or drag-and-drop',
-			item6_prefix: 'Full limitations in',
-			item6_link: 'Docs',
-		},
-	},
-	benefits: {
-		no_backend: 'Pure Front-end Solution',
-		private_model: 'Your Own Models',
-		data_masking: 'Built-in Privacy',
-		open_source: 'MIT Open Source',
-	},
-	features: {
-		section_title: 'Why PageAgent',
-		in_page: {
-			title: 'In-page Solution',
-			desc: 'Runs entirely within your page. No browser extensions, no headless browsers, and no backend required.',
-		},
-		secure_integration: {
-			title: 'Secure by Design',
-			desc: 'Control what AI can access with allowlists, data masking, and custom knowledge injection. Your rules, your data.',
-		},
-		zero_backend: {
-			title: 'Zero Backend Setup',
-			desc: 'Just drop in a script. Works with any LLM provider—OpenAI, Anthropic, or your own models.',
-		},
-		accessible: {
-			title: 'Natural Language UI',
-			desc: 'Transform complex admin panels into chat interfaces. Make powerful tools accessible to everyone, not just experts.',
-		},
-	},
-	use_cases: {
-		section_title: 'Where It Shines',
-		section_subtitle: 'From simple forms to complex workflows, AI understands and executes',
-		case1: {
-			title: 'Supercharge Support Bots',
-			desc: 'Stop telling users where to click—let AI do it for them. Turn your chatbot from a guide into an operator that actually completes tasks.',
-		},
-		case2: {
-			title: 'Modernize Legacy Apps',
-			desc: 'Add AI superpowers to old software without rebuilding. One script tag transforms complex enterprise tools into chat-driven interfaces.',
-		},
-		case3: {
-			title: 'Interactive Walkthroughs',
-			desc: "Show, don't tell. Let AI demonstrate workflows in real-time—perfect for onboarding or training new users on complex systems.",
-		},
-		case4: {
-			title: 'Accessibility First',
-			desc: 'Make web apps accessible through natural language. Perfect for screen readers, voice control, or users who find traditional interfaces challenging.',
-		},
-	},
-}

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

@@ -1,41 +0,0 @@
-export default {
-	header: {
-		logo_alt: 'page-agent 首页',
-		slogan: 'GUI Agent in your webpage',
-		nav_docs: '文档',
-		nav_source: 'GitHub',
-		mobile_menu: '打开导航栏',
-	},
-	footer: {
-		copyright: '© 2025 page-agent. All rights reserved.',
-		github_label: '访问 GitHub 仓库',
-	},
-	beta_notice: {
-		title: 'Beta 阶段',
-		content: '当前功能未完成，接口可能随时变更。正式版本发布前请勿用于生产环境。',
-	},
-	language: {
-		zh: '中文',
-		en: 'English',
-		switch_label: '切换语言',
-	},
-	nav: {
-		introduction: '介绍',
-		features: '功能特性',
-		integration: '集成指南',
-		advanced: '高级',
-		overview: '概览',
-		quick_start: '快速开始',
-		limitations: '使用限制',
-		models: '模型',
-		custom_tools: '自定义工具',
-		knowledge_injection: '知识注入',
-		data_masking: '数据脱敏',
-		cdn_setup: 'CDN 引入',
-		best_practices: '最佳实践',
-		third_party_agent: '接入第三方 Agent',
-		security_permissions: '安全与权限',
-		page_agent: 'PageAgent',
-		page_agent_core: 'PageAgentCore',
-	},
-}

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

@@ -1,152 +0,0 @@
-export default {
-	overview: {
-		title: 'Overview',
-		subtitle:
-			'page-agent 是一个完全基于 Web 技术的 GUI Agent，简单几步，让你的网站拥有 AI 操作员。',
-		what_is: '什么是 page-agent？',
-		what_is_desc:
-			'page-agent 是一个页面内嵌式 GUI Agent。与传统的浏览器自动化工具不同，page-agent 面向网站开发者，而非爬虫或Agent客户端开发者；将 Agent 集成到你的网站中，让用户可以通过自然语言与页面进行交互。',
-		features_title: '核心特性',
-		feature_dom: {
-			title: '🧠 智能 DOM 理解',
-			desc: '基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。',
-		},
-		feature_secure: {
-			title: '🔒 安全可控',
-			desc: '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。',
-		},
-		feature_backend: {
-			title: '⚡ 零后端部署',
-			desc: 'CDN 或 NPM 引入，自定义 LLM 接入点。',
-		},
-		feature_accessible: {
-			title: '♿ 普惠智能',
-			desc: '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。',
-		},
-		vs_browser_use: '与 browser-use 的区别',
-		table_feature: '特性',
-		table_deployment: '部署方式',
-		table_deployment_pa: '页面内嵌组件',
-		table_deployment_bu: '外部工具',
-		table_scope: '操作范围',
-		table_scope_pa: '当前页面',
-		table_scope_bu: '整个浏览器',
-		table_user: '目标用户',
-		table_user_pa: '网站开发者',
-		table_user_bu: '爬虫/Agent 开发者',
-		table_scenario: '使用场景',
-		table_scenario_pa: '用户体验增强',
-		table_scenario_bu: '自动化任务',
-		use_cases_title: '应用场景',
-		use_case1_title: '对接答疑机器人：',
-		use_case1_desc:
-			'把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。',
-		use_case2_title: '交互升级/智能化改造：',
-		use_case2_desc:
-			'一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。',
-		use_case3_title: '产品教学：',
-		use_case3_desc:
-			'向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。',
-		use_case4_title: '无障碍支持：',
-		use_case4_desc:
-			'为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。',
-		get_started_title: '🚀 开始使用',
-		get_started_desc:
-			'准备好为你的网站添加 AI 操作员了吗？查看我们的快速开始指南，几分钟内完成集成。',
-		get_started_button: '快速开始 →',
-	},
-	quick_start: {
-		title: 'Quick Start',
-		subtitle: '几分钟内完成 page-agent 的集成。',
-		installation: '安装步骤',
-		step1_title: '1. 引入方式',
-		step1_cdn: 'CDN 引入',
-		step1_npm: 'NPM 安装',
-		step2_title: '2. 初始化配置',
-		step3_title: '3. 开始使用',
-	},
-	limitations: {
-		title: '使用限制',
-		subtitle: '了解 page-agent 当前的功能边界和技术限制',
-		page_support: '页面支持限制',
-		spa_limit_title: '单页应用限制',
-		spa_limit_1: '• 仅支持单页应用（SPA）：目前只能在单个页面内进行操作',
-		spa_limit_2: '• 多页接力功能正在设计中：暂时无法跨页面执行连续任务',
-		spa_limit_3: '• 无法操作未接入该能力的网站：需要目标网站主动集成 page-agent',
-		interaction_limits: '交互行为限制',
-		supported_ops: '支持的操作',
-		op_click: '点击操作',
-		op_input: '文本输入',
-		op_scroll: '页面滚动',
-		op_submit: '表单提交',
-		op_select: '选择操作',
-		op_focus: '焦点切换',
-		unsupported_ops: '不支持的操作',
-		op_hover: '鼠标悬停（hover）',
-		op_drag: '拖拽操作',
-		op_context: '右键菜单',
-		op_draw: '图形绘制',
-		op_keyboard: '键盘快捷键',
-		op_position: '基于点击区域或鼠标位置的控制',
-		understanding_limits: '网页理解限制',
-		no_vision_title: '无视觉能力',
-		no_vision_desc: 'page-agent 基于 DOM 结构进行理解和操作，没有视觉识别能力，无法理解以下内容：',
-		no_vision_1: '• 图片内容：无法识别图片中的文字、图标或视觉元素',
-		no_vision_2: '• Canvas 画布：无法理解 Canvas 中绘制的图形和内容',
-		no_vision_3: '• WebGL 3D 内容：无法操作 3D 场景中的元素',
-		no_vision_4: '• SVG 图形：无法理解 SVG 中的视觉内容和路径',
-		website_requirements: '被操作网站要求',
-		req_semantic_title: '语义化和易用性',
-		req_semantic_desc:
-			'所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何 accessibility 特性，可能影响 AI 的理解准确性。',
-		req_ux_title: 'UI/UX',
-		req_ux_desc:
-			'反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响 AI 的理解和操作。',
-		req_env_title: '环境要求',
-		req_env_desc: 'modern browser',
-		future: '未来规划',
-		future_title: '即将支持',
-		future_1: '• 多页面接力操作能力',
-		future_2: '• 更丰富的鼠标交互支持',
-		future_3: '• 基础的视觉理解能力',
-		future_4: '• 更智能的错误恢复机制',
-	},
-	models: {
-		title: '模型',
-		subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
-		recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型。',
-		recommended: '推荐模型',
-		available: '已测试模型',
-		available_verified: '已验证可用模型',
-		tips: '提示',
-		tip_1: 'reasoning 模型(如 GPT-5),速度偏慢,没有必要',
-		tip_2:
-			'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature',
-		tip_3: '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳',
-		security: '🔐 生产环境鉴权建议',
-		security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码',
-		security_desc: '在实际应用中,为了隐藏真实的 LLM API Key，建议采用以下架构:',
-		security_backend_proxy: '后端代理转发',
-		security_backend_desc:
-			'在后端搭建一个 LLM 流量转发接口,该接口使用与你网站上其他接口相同的鉴权方式,例如:',
-		security_method_1: '• Session/Cookie 会话认证',
-		security_method_2: '• OIDC (OpenID Connect) 单点登录',
-		security_method_3: '• 临时 Access Key 或 JWT Token',
-		configuration: '配置方式',
-	},
-	custom_tools: {
-		title: '自定义工具',
-		subtitle:
-			'通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI 安全调用你的业务逻辑。',
-		registration: '工具注册',
-		registration_desc:
-			'每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。',
-		page_filter: '页面过滤器',
-		page_filter_desc: '通过 pageFilter 属性控制工具在哪些页面可见，提升安全性和用户体验。',
-		best_practices: '最佳实践',
-		bp_performance: '⚡ 性能优化',
-		bp_1: '• 使用 pageFilter 减少不必要的工具加载',
-		bp_2: '• 在 execute 函数中实现适当的缓存机制',
-		bp_3: '• 避免在工具中执行耗时的同步操作',
-	},
-}