chore(version): bump version to 1.8.1

Merge pull request #484 from alibaba/feat/gpt-54-models
feat(models): support gpt-5.4 and update model list
2026-04-27 23:32:01 +08:00 · 2026-04-27 21:43:28 +08:00 · 2026-04-27 21:40:19 +08:00 · 2026-04-27 20:49:41 +08:00 · 2026-04-27 20:49:17 +08:00 · 2026-04-27 20:43:59 +08:00
102 changed files with 4084 additions and 2324 deletions
@@ -0,0 +1,64 @@
+---
+name: git-cleanup
+description: Clean up local git branches and remotes accumulated from PR reviews. Use when the user asks to clean branches, remove stale remotes, or tidy up the local git state.
+---
+
+# Git Cleanup
+
+Clean local branches (except `main` and current branch) and non-origin remotes.
+Useful after reviewing multiple PRs that leave behind tracking branches and contributor remotes.
+
+## Workflow
+
+### 1. Survey
+
+Run these in parallel:
+
+```bash
+git branch
+git remote
+git status --short
+git stash list
+```
+
+Present a summary of how many branches and remotes will be removed.
+
+### 2. Safety Checks — Ask Before Proceeding
+
+**Stop and ask for confirmation if any of these are true:**
+
+- Current branch is NOT `main`
+- Working tree has uncommitted changes or stashes
+- Any branch is ahead of its upstream
+
+List unmerged branches separately and let the user decide.
+
+### 3. Delete Branches
+
+```bash
+# Safe delete first (fails on unmerged branches)
+git branch | grep -v '^\*' | grep -v '^\s*main$' | xargs git branch -d 2>&1
+
+# Force-delete only with explicit user approval
+git branch -D <branch>
+```
+
+### 4. Remove Remotes
+
+```bash
+git remote | grep -v '^origin$' | xargs -I{} git remote remove {}
+```
+
+### 5. Confirm
+
+```bash
+git branch && echo "---" && git remote
+```
+
+Report what was cleaned up.
+
+## Key Rules
+
+- **NEVER** delete `main` or the current checked-out branch
+- **NEVER** force-delete unmerged branches without user confirmation
+- If in doubt, ask
@@ -0,0 +1,104 @@
+---
+name: pre-impl-discussion
+description: "Conduct a thorough pre-implementation discussion before making significant changes. Use when the user wants to discuss, plan, or evaluate a change before implementing it — especially when they say words like 'discuss', 'evaluate', 'plan', or 'let's talk about'."
+argument-hint: 'Describe the change to evaluate'
+---
+
+# Pre-Implementation Discussion
+
+Facilitate a structured, collaborative discussion to evaluate a proposed change **before any implementation begins**.
+
+## Golden Rule
+
+**Do NOT implement anything until the user explicitly confirms the final plan and says to proceed.** Not even "let me try on a branch" — that's implementation. The user will tell you when discussion is over.
+
+## Interaction Style
+
+- **Concise during discussion.** Each intermediate response should be short and focused on the current question. Do NOT repeat the full plan in every response.
+- **Complete when finalizing.** Once the plan is mature and the user asks for it, present a single comprehensive (but terse) summary for final review.
+- **Ask, don't assume.** When uncertain about project context, constraints, or preferences — ask. The user prefers collaborative discussion over receiving a pre-baked answer.
+- **Challenge the premise.** Question whether the proposed change is the right one. Suggest simpler alternatives if they exist.
+- **Match the user's language.** Reply in the same language the user writes in.
+
+## Procedure
+
+### 1. Understand the Current State
+
+Before forming any opinion:
+
+- **Read the relevant source files** — configs, code, docs that relate to the change
+- **Understand the project structure** — what's published vs private, what environments things target, existing constraints
+- **Map the impact surface** — which files, packages, or systems would be affected
+- **Estimate implementation cost** — how many files to touch, how much config to rewrite, what could break
+
+Do NOT skip this step. Do NOT rely on assumptions about what "most projects" do.
+
+### 2. Research Thoroughly
+
+- **Consult official sources** — docs, changelogs, migration guides, GitHub issues
+- **Verify every claim with evidence.** Don't say "X supports Y" without a source. If unsure, say so.
+- **Search in parallel** to save time — batch independent queries
+
+Common pitfalls:
+
+- Assuming compatibility without checking actual version constraints
+- Confusing roadmap/aspirations with actual released state
+- Missing transitive constraints (a dependency of a dependency)
+
+### 3. Present Findings (Concise)
+
+Share a **brief** assessment. Tables work well for comparisons. Highlight **blockers** and **unknowns** prominently — don't bury them in paragraphs.
+
+### 4. Identify Key Decisions
+
+Surface the decisions the user needs to make. Present them as clear choices with trade-offs, not as a recommendation monologue.
+
+For each decision point:
+
+- What are the options? (2-3 max)
+- What does each option cost or give up?
+- What's your lean and why? (one sentence)
+
+### 5. Iterate
+
+The user will ask follow-up questions, raise concerns, or challenge assumptions. For each round:
+
+- **Research if needed** — don't answer from instinct when facts are available
+- **Answer only what was asked** — don't re-present the entire plan
+- **Update your mental model** based on user feedback
+
+Common mistakes in this phase:
+
+- Repeating the full plan after every small clarification
+- Answering a narrow question with a broad redesign
+- Treating user questions as confirmation to proceed
+
+### 6. Finalize the Plan
+
+When the user signals the discussion is converging, present the **complete plan once**:
+
+- **What changes** — concrete list of actions (table or bullet points)
+- **Impact surface** — what files/systems are affected, estimated effort
+- **What does NOT change** — explicitly state scope boundaries
+- **Risks or open items** — anything that needs testing or further verification
+
+Keep it terse. Tables over paragraphs. No explanations the user already heard during discussion.
+
+### 7. Wait for Confirmation
+
+After presenting the final plan, **stop and wait**. The user will either:
+
+- Confirm → then (and only then) proceed to implementation
+- Ask more questions → go back to step 5
+- Modify scope → update the plan and re-present
+
+## Anti-Patterns
+
+| Don't                                               | Do Instead                               |
+| --------------------------------------------------- | ---------------------------------------- |
+| Start implementation "to test" without confirmation | Present findings and wait                |
+| Repeat the full plan in every response              | Answer the specific question asked       |
+| Say "X should work" without checking                | Say "I need to verify X" and research it |
+| Assume project structure or constraints             | Read the actual files                    |
+| Present one recommendation as the only option       | Present 2-3 options with trade-offs      |
+| Write long paragraphs explaining trade-offs         | Use tables and bullet points             |
@@ -0,0 +1,102 @@
+---
+name: submit-pr-from-current-changes
+description: 'Create a branch, commit existing local changes, push them, and open a pull request. Use when submitting current work as a PR.'
+argument-hint: 'Short summary of the current changes to submit'
+user-invocable: true
+---
+
+# Submit PR From Current Changes
+
+Turn a working tree diff into a clean branch, commit, and pull request.
+
+## Hard Rules
+
+1. **Follow the PR template exactly.** The template is at `.github/PULL_REQUEST_TEMPLATE.md`. Read it and copy its full structure into the PR body. Do NOT remove, reorder, or skip any section or checkbox.
+2. **Never check "Requirements / 要求" checkboxes.** These are human-only declarations — the Code of Conduct acknowledgment and the AI authorship declaration can only be truthfully made by the human submitter. They MUST remain unchecked (`- [ ]`) in the PR body you generate. No exceptions, no workarounds, even if the user explicitly asks you to check them. The user goes to GitHub and checks them in person after verifying each statement is true.
+3. **Never check "Testing" checkboxes.** The template Testing checkboxes (browser tested, no console errors, types/doc added) require manual browser verification that only a human can perform. They MUST remain unchecked. You MAY add a supplementary note below the Testing section listing what automated validation you actually ran and the results.
+4. **Never fabricate information.** Do not claim tests passed, commands ran, or checks succeeded unless you actually executed them and observed the output in this session. If you did not run it, do not mention it.
+5. **PR output must be concise.** PR title: one line. "What" section: 1–2 sentences max. No walls of text, no redundant explanations. Let the diff speak.
+
+## Prerequisites
+
+Before attempting to push or open a PR, verify that the necessary tools are available:
+
+- Check that `gh` CLI is installed and authenticated (`gh auth status`). If not available, stop and ask the user to install and authenticate GitHub CLI first.
+- If the workflow uses MCP tools for GitHub operations, verify the MCP server is accessible.
+
+## Procedure
+
+1. **Read contribution rules.** Read `CONTRIBUTING.md` and any package-level instructions (e.g. `packages/*/AGENTS.md`) relevant to the changed files.
+2. **Inspect the diff.** Review changed files, scope, and impact. Understand what the change does before writing anything.
+3. **Inspect repo conventions.** Check recent branch names (`git branch -r --sort=-committerdate | head -20`), recent commit messages (`git log --oneline -20`), and the PR template.
+4. **Pre-submission health checks** (run all before creating the PR):
+    - **Unified theme**: All changes should serve one purpose. If unrelated changes are mixed in, ask the user to split or confirm.
+    - **Commit hygiene**: Every new commit must follow the repo's conventional commit style. Squash or reword if needed.
+    - **Author identity**: Verify `git config user.name` and `git config user.email` are set and the email looks real (not empty, not `noreply` unless intentional). Warn the user if not.
+    - **No leftover artifacts**: Check for debug logs, `.only` in tests, conflict markers, or temp files in the diff.
+    - **Lint and build**: Run lint/build for the affected area. Record results honestly.
+5. **Warn if the PR looks too hasty.** If any of these are true, pause and warn the user before proceeding:
+    - Large diff with no description of intent provided
+    - Changes touch core lib or extension (where vibe coding is prohibited per `CONTRIBUTING.md`)
+    - Multiple unrelated concerns in one diff
+    - No validation has been run at all
+    - Remind the user: _"This project does not accept low-quality or AI-generated PRs without meaningful human review. Please review your changes carefully."_
+6. **Branch.** Check the current branch first:
+    - If already on a non-main feature branch with a valid name (matching `type/topic` convention), reuse it.
+    - If the branch name does not follow repo conventions (e.g. missing prefix, unclear topic), ask the user whether to rename or create a new one.
+    - If on `main` or a default branch, create a new branch from it with a short kebab-case name: prefix (`fix/`, `feat/`, `docs/`, `refactor/`, `chore/`) + concrete topic words.
+7. **Stage and commit.** Stage only the intended files. Use `type(scope): subject` format. Keep the subject specific and compact.
+8. **Push.** Push with `-u origin HEAD`.
+9. **Open PR.** Use `gh pr create` with the full PR template structure. Fill in "What" and "Type" sections based on the actual diff. Leave all "Testing" and "Requirements" checkboxes unchecked.
+10. **Report results.** Tell the user: branch name, commit hash, PR link, and what validation actually ran (with pass/fail).
+
+## Post-Submission Reminder
+
+After successfully opening the PR, ALWAYS give a brief reminder in the user's language. Keep it concise and natural, but make sure it clearly tells the user:
+
+1. They need to test the changes themselves in the browser.
+2. They need to go to the PR page and check the Testing and Requirements checkboxes only after verifying each item.
+3. The PR will not enter review until those checkboxes are checked.
+4. The project does not accept autonomously AI-generated PRs, so they should only check the AI declaration if it is truthful.
+
+## Branch Naming
+
+- Prefer short kebab-case names with a repo-consistent prefix such as `fix/`, `feat/`, `docs/`, `refactor/`, or `chore/`.
+- Match the change type first, then the smallest useful topic.
+- Prefer concrete topic words over issue text dumps.
+
+## Commit Style
+
+- Use the repository's prevailing commit style (conventional commits).
+- Use `type(scope): subject` when scope is clear from the changed area.
+- Keep the subject specific and compact.
+- If multiple commits exist on the branch, each one must independently follow conventions.
+
+## Validation Strategy
+
+- Default to enough validation to defend the PR, not the absolute minimum.
+- Run `npm run ci` to run all build and lint checks.
+- Escalate to broader validation when the diff crosses packages, changes shared code, or affects release behavior.
+- Never claim checks that did not actually run.
+- You MAY note what you ran and the results below the Testing section in the PR body, but do NOT check the template checkboxes.
+
+## Decision Points
+
+- No local changes → stop, say so.
+- `gh` CLI not available → stop, ask user to install it.
+- Unrelated files mixed → stage only the intended subset or ask whether the work should be split.
+- If the repo has area-specific instructions, read them before naming the branch or writing the PR.
+- Change is small but high-risk → prefer broader validation.
+- Change is narrowly scoped and low-risk → run the most relevant checks, not arbitrary unrelated ones.
+- Template has declarations you cannot truthfully check → leave unchecked, tell the user why.
+
+## Completion Checks
+
+- The branch exists remotely and tracks upstream.
+- The commit message(s) match repo style.
+- All commit authors have proper name and email configured.
+- The PR title matches the commit intent.
+- The PR body follows the template structure completely.
+- All "Requirements" and "Testing" checkboxes are unchecked (`- [ ]`) in the PR body. Double-check: if any `- [x]` appears in these sections, it is a violation — fix it before submitting.
+- The reported validation is accurate — nothing fabricated.
+- The post-submission reminder was delivered in the user's language, concisely and accurately.
@@ -0,0 +1,109 @@
+---
+name: update-changelog
+description: 'Update docs/CHANGELOG.md from git history, GitHub releases, and code diffs. Use when: writing release notes, syncing the latest changelog entry, summarizing a new tag, or keeping changelog wording concise and consistent.'
+argument-hint: 'Describe the target, for example: latest version only'
+---
+
+# Update Changelog
+
+Update `docs/CHANGELOG.md` from repository evidence instead of guesswork.
+
+## When to Use
+
+- Add the newest release entry to `docs/CHANGELOG.md`
+- Sync changelog text with GitHub Releases
+- Summarize the latest tag from git history or code diffs
+
+## Defaults
+
+- Keep the wording brief
+- Only add the latest missing version unless the user explicitly asks to backfill older releases
+- Prefer GitHub sources first, especially Releases and tag metadata
+- Skip `Features` / `Improvements` / `Bug Fixes` headings when the release only has a few clear items
+
+## Procedure
+
+### 1. Read the local style
+
+- Open `docs/CHANGELOG.md`
+- Match the existing tone, bullet style, section ordering, and date format
+
+### 2. Determine the target release
+
+- Read the root `package.json` version and compare it with the top changelog entry
+- Find the previous tag for the target version
+- If the latest version is already documented, stop and report that no changelog update is needed
+
+### 3. Gather evidence
+
+Prefer these sources in order:
+
+1. GitHub release notes
+
+```bash
+GH_PAGER=cat gh release view v<version> --repo <owner>/<repo> --json tagName,name,publishedAt,body
+```
+
+2. Tag date
+
+```bash
+git log -1 --format=%cs v<version>
+```
+
+3. Commit history between tags
+
+```bash
+git --no-pager log --format='%h %s' --no-merges v<previous>..v<version>
+```
+
+4. Diff scope when commit subjects are vague
+
+```bash
+git --no-pager diff --name-only v<previous>..v<version>
+git --no-pager diff --stat v<previous>..v<version>
+```
+
+5. Read touched files directly only when the user-visible change is still unclear
+
+### 4. Distill what belongs in the changelog
+
+Include:
+
+- User-visible features
+- Important behavior changes
+- Bug fixes that improve reliability, compatibility, or developer experience
+- Small docs updates only when they materially change supported setups or onboarding
+
+Exclude unless explicitly requested:
+
+- Pure version bumps
+- Routine dependency updates
+- Internal refactors with no visible impact
+- Mechanical formatting noise
+
+### 5. Choose the structure
+
+- If the release has 1 to 3 clear points, write flat bullets directly under the version heading
+- If the release has several distinct items, use short headings such as `### Features`, `### Improvements`, and `### Bug Fixes`
+- Do not force categories when they make the entry longer or noisier
+
+### 6. Write the entry
+
+- Add or update only the requested release entry
+- Keep bullets short and concrete
+- Reuse project terminology from nearby entries
+- Avoid marketing language
+- Do not copy noisy GitHub release text verbatim
+
+### 7. Verify
+
+- Check dates, version numbers, and tag boundaries
+- Ensure Markdown structure matches nearby entries
+- Confirm no intermediate versions were added unless requested
+
+## Completion Checks
+
+- The newest requested version is documented
+- The wording is concise and consistent with the surrounding changelog
+- The entry is backed by GitHub releases, git history, or code diff evidence
+- Low-signal internal changes were left out
@@ -1,61 +1,59 @@
 name: Bug Report
 description: Report a bug
 title: '[Bug] '
-labels: ['bug']
+type: Bug
 body:
  - type: markdown
    attributes:
      value: |
-        Thanks for your interest in improving the project! Before submitting, please read our guidelines.
-        感谢您对改进项目的兴趣！提交前请阅读我们的指南。
+        Thanks for your interest in improving the project! Before submitting, please search for existing issues.
+        感谢参与我们的社区！请先搜索现有 Issue，避免重复提交。

        - [Code of Conduct](https://github.com/alibaba/page-agent/blob/main/docs/CODE_OF_CONDUCT.md)
        - [Contributing Guide](https://github.com/alibaba/page-agent/blob/main/CONTRIBUTING.md)

+        > 为了让更多人参与讨论，请尽量使用英文提交 Issue，感谢理解 🙏
+
  - type: textarea
    id: description
    attributes:
-      label: What happened?
-      placeholder: Describe the bug and expected behavior
+      label: What happened? / 问题描述
+      description: Describe what you expected vs what actually happened.
+      placeholder: 'A clear description of the bug.'
    validations:
      required: true

  - type: textarea
-    id: code
+    id: reproduction
    attributes:
-      label: Code
-      render: typescript
-      placeholder: Minimal reproduction code
+      label: How to reproduce / 如何复现
+      description: Provide steps, URL, config or code snippet to reproduce the bug.
+      placeholder: '1. Open URL: https://...'
    validations:
-      required: false
+      required: true
+
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      placeholder: '0.0.0'

  - type: input
    id: browser
    attributes:
      label: Browser
-      placeholder: 'Chrome 120, Firefox 119, etc.'
-    validations:
-      required: false
-
-  - type: input
-    id: version
-    attributes:
-      label: version
-      placeholder: '0.0.0'
-    validations:
-      required: false
+      placeholder: 'e.g. Chrome 130'

  - type: checkboxes
-    id: community
+    id: checklist
    attributes:
-      label: Community Communication / 社区沟通
-      description: Confirm you will communicate respectfully and constructively / 确认将以礼貌、建设性的方式沟通
+      label: Before submitting
      options:
        - label: I will be polite and respectful. / 我会保持礼貌与尊重。
          required: true
-        - label: I will share constructive, actionable suggestions. / 我会提供建设性、可行动的建议。
-          required: true
        - label: I have read the Code of Conduct. / 我已阅读行为准则。
          required: true
+        - label: I have searched existing issues and this is not a duplicate.
+          required: true
    validations:
      required: true
@@ -1,11 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Questions & Ideas / 问题与想法（Discussions）
-    url: https://github.com/alibaba/page-agent/discussions
-    about: Use Discussions for Q&A and ideation. 使用 Discussions 进行问答与想法交流。
-  - name: Security Report / 安全问题报告
-    url: https://github.com/alibaba/page-agent/security/policy
-    about: Report security vulnerabilities responsibly. 通过安全页面报告漏洞。
  - name: Contributing Guide / 贡献指南
    url: https://github.com/alibaba/page-agent/blob/main/CONTRIBUTING.md
    about: How to contribute code and ideas. 如何进行贡献与提交代码。
@@ -1,32 +1,28 @@
 name: Feature Request
 description: Suggest a feature
 title: '[Feature] '
-labels: ['enhancement']
+type: Feature
 body:
  - type: markdown
    attributes:
      value: |
-        Thanks for your interest in improving the project! Before submitting, please read our guidelines.
-        感谢您对改进项目的兴趣！提交前请阅读我们的指南。
+        Thanks for your interest in improving the project! Before submitting, please search for existing issues.
+        感谢参与我们的社区！请先搜索现有 Issue，避免重复提交。

        - [Code of Conduct](https://github.com/alibaba/page-agent/blob/main/docs/CODE_OF_CONDUCT.md)
        - [Contributing Guide](https://github.com/alibaba/page-agent/blob/main/CONTRIBUTING.md)

+        > 为了让更多人参与讨论，请尽量使用英文提交 Issue，感谢理解 🙏
+
  - type: textarea
    id: description
    attributes:
      label: Feature Description / 功能描述
-      description: Describe the problem, solution, and any API changes. / 描述问题、解决方案以及 API 变更。
+      description: Describe the problem, solution, and any API changes.
      placeholder: |
        **Problem**:
-        What problem does this solve?
-
        **Solution**:
-        How should this work?
-
        **Proposed API**:
-        ```typescript
-        // code here
        ```
    validations:
      required: true
@@ -34,14 +30,13 @@ body:
  - type: checkboxes
    id: community
    attributes:
-      label: Community Communication / 社区沟通
-      description: Confirm you will communicate respectfully and constructively / 确认将以礼貌、建设性的方式沟通
+      label: Before submitting
      options:
        - label: I will be polite and respectful. / 我会保持礼貌与尊重。
          required: true
-        - label: I will share constructive, actionable suggestions. / 我会提供建设性、可行动的建议。
-          required: true
        - label: I have read the CODE_OF_CONDUCT.md and CONTRIBUTING.md. / 我已阅读行为准则。
          required: true
+        - label: I have searched existing issues and this is not a duplicate.
+          required: true
    validations:
      required: true
@@ -2,15 +2,15 @@

 Brief description of changes.

+Closes #(issue)
+
 ## Type

+- [ ] Breaking change
 - [ ] Bug fix
 - [ ] Feature / Improvement
- [ ] Refactor
- [ ] Documentation
- [ ] Website
- [ ] Demo / Testing
- [ ] Breaking change
+- [ ] Refactor / Chores
+- [ ] Documentation / Website / Demo / Testing

 ## Testing

@@ -18,8 +18,6 @@ Brief description of changes.
 - [ ] No console errors
 - [ ] Types/doc added

-Closes #(issue)
-
 ## Requirements / 要求

 - [ ] I have read and follow the [Code of Conduct](../docs/CODE_OF_CONDUCT.md) and [Contributing Guide](../CONTRIBUTING.md) . / 我已阅读并遵守行为准则。
@@ -4,28 +4,35 @@ updates:
    directory: '/'
    schedule:
      interval: 'weekly'
+    labels:
+      - 'dependencies'
    groups:
-      # 生产依赖 - 小版本更新
      production-dependencies:
        dependency-type: 'production'
        update-types:
          - 'minor'
          - 'patch'

-      # 开发依赖 - 小版本更新
      development-dependencies:
        dependency-type: 'development'
        update-types:
          - 'minor'
          - 'patch'

-      # Major 更新单独处理（不分组，需要人工审查）
-      # 安全更新也不分组，Dependabot 会自动优先创建独立 PR
+      development-major:
+        dependency-type: 'development'
+        update-types:
+          - 'major'
+
+      # Production major updates are intentionally ungrouped for individual review.
+      # Security updates are also ungrouped — Dependabot prioritizes them automatically.

  - package-ecosystem: 'github-actions'
    directory: '/'
    schedule:
      interval: 'weekly'
+    labels:
+      - 'dependencies'
    groups:
      github-actions:
        patterns:
@@ -1,6 +1,6 @@
+name: CI
 permissions:
  contents: read
-name: CI

 on:
  push:
@@ -17,6 +17,8 @@ jobs:

    steps:
      - uses: actions/checkout@v6
+        with:
+          fetch-depth: 0

      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v6
@@ -24,18 +26,8 @@ jobs:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

-      # test on default version of npm
-      # - 9.6~10.8 on node@20
-      # - 11.3~11.6 on node@24
-
-      - name: Node and NPM version
-        run: node --version && npm --version
-
      - name: Install dependencies
-        run: npm install
+        run: npm ci

-      - name: Lint
-        run: npx eslint . && npx prettier --check **/*.ts
-
-      - name: Build
-        run: npm run build
+      - name: CI checks
+        run: node scripts/ci.js
@@ -31,7 +31,7 @@ jobs:
        uses: actions/configure-pages@v6

      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v4
+        uses: actions/upload-pages-artifact@v5
        with:
          path: './packages/website/dist'

@@ -25,6 +25,9 @@ dist-ssr
 *.sw?
 .qoder

+# publish backup
+package.json.bak
+
 # env files
 .env
 .env.*
@@ -34,8 +37,6 @@ dist-ssr
 .wxt

 # AI
-.agent
 .claude
 .cursor
-.gemini
-CLAUDE.md
+.gemini
@@ -0,0 +1,8 @@
+# Prompt templates (formatted manually for LLM readability)
+*prompt.md
+
+# Generated
+packages/extension/.wxt
+
+# Vendored
+**/components/ui
@@ -22,7 +22,7 @@
        "packages/*/node_modules": true
    },
    "markdownlint.config": {
-        // "comment": "Relaxed rules",
+        // Relaxed rules
        "default": true,
        "whitespace": false,
        "line_length": false,
@@ -35,5 +35,9 @@
        "blanks-around-lists": false,
        "ol-prefix": false,
        "no-duplicate-heading": false
-    }
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "js/ts.tsdk.path": "node_modules/typescript/lib",
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true
 }
@@ -5,7 +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
+- **Extension** (`packages/extension/`) - Browser extension (WXT + React)
 - **Website** (`packages/website/`) - React docs and landing page. **When working on website, follow `packages/website/AGENTS.md`**

 Internal packages:
@@ -18,18 +18,19 @@ Internal packages:
 ## Development Commands

 ```bash
-npm start                    # Start website dev server
-npm run build                # Build all packages
-npm run build:libs           # Build all libraries
-npm run lint                 # ESLint with TypeScript strict rules
-npm run zip -w @page-agent/ext # Zip the extension package
+npm start                      # Start website dev server
+npm run build                  # Build all packages
+npm run build:libs             # Build all libraries
+npm run build:ext              # Build and zip the extension package
+npm run typecheck              # Typecheck all packages
+npm run lint                   # ESLint
 ```

 ## Architecture

 ### Monorepo Structure

-Simple monorepo solution: TypeScript references + Vite aliases. Update tsconfig and vite config when adding/removing packages.
+Source-first monorepo: library `package.json` exports point to `src/*.ts` during development. At publish time, `scripts/pre-publish.js` promotes `publishConfig` fields to top-level (swapping to `dist/`), and `scripts/post-publish.js` restores the originals.

 ```
 packages/
@@ -37,7 +38,7 @@ packages/
 ├── page-agent/              # npm: "page-agent" entry class (with UI + controller + demo builds)
 ├── website/                 # @page-agent/website (private)
 ├── llms/                    # @page-agent/llms
-├── extension/               # Browser extension (WXT + React)
+├── extension/               # Browser extension
 ├── page-controller/         # @page-agent/page-controller
 └── ui/                      # @page-agent/ui
 ```
@@ -0,0 +1 @@
+@AGENTS.md
@@ -50,8 +50,8 @@ Fastest way to try PageAgent with our free Demo LLM:

 | Mirrors | URL                                                                                |
 | ------- | ---------------------------------------------------------------------------------- |
-| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.7.1/dist/iife/page-agent.demo.js         |
-| China   | https://registry.npmmirror.com/page-agent/1.7.1/files/dist/iife/page-agent.demo.js |
+| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.8.1/dist/iife/page-agent.demo.js         |
+| China   | https://registry.npmmirror.com/page-agent/1.8.1/files/dist/iife/page-agent.demo.js |

 ### NPM Installation

@@ -5,6 +5,56 @@ 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.7.1] - 2026-04-04
+
+### Features
+
+- **Optional `keepSemanticTags`** - Added an experimental `keepSemanticTags` config to preserve semantic structure in PageController output
+- **Per-task extension system instructions** - Extension `ExecuteConfig` now supports `systemInstruction`
+
+### Improvements
+
+- **Smarter scroll handling** - Scroll container detection and scroll direction handling are more reliable
+- **Better accessibility-aware element detection** - Interactive candidates with supported ARIA attributes and `role="listitem"` are recognized more accurately
+
+### Bug Fixes
+
+- Fixed iframe-origin filtering for extension `postMessage` listeners
+- Avoided a `currentScript` null pointer during deferred initialization
+
+## [1.7.0] - 2026-03-31
+
+- **More reliable click actions** - Click handling now reuses pointer coordinates, verifies targets with `elementFromPoint`, and behaves better on layered layouts
+- **Better mask event handling** - `SimulatorMask` now supports passthrough events when automation should not fully swallow input
+- Fixed a `SimulatorMask` memory leak
+
+## [1.6.3] - 2026-03-30
+
+### Features
+
+- **Experimental all-tabs control** - Extension can include and control all browser tabs via `experimentalIncludeAllTabs`
+
+### Improvements
+
+- **Calmer empty state motion** - Disabled the EmptyState auto-start animation in the extension UI
+- **Cleaner extension docs** - Simplified setup and tab-control documentation across the README and developer guide
+
+### Bug Fixes
+
+- Fixed new-tab detection from content scripts
+- Fixed tab deduplication and multi-window handling in the extension
+
+## [1.6.2] - 2026-03-25
+
+- **Longer task input** - The UI task input now accepts up to 1000 characters
+- **Contributor docs refresh** - Added a maintainer note and refreshed contributor-facing documentation
+- Fixed lint issues in the release pipeline
+
+## [1.6.1] - 2026-03-22
+
+- **Internal PageController action exports** - PageController actions are now exposed as internal methods for easier reuse across packages
+- **Expanded docs** - Added MCP docs and clarified project limitations and homepage details
+
 ## [1.6.0] - 2026-03-21

 ### Features
@@ -16,22 +16,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:

-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members

 Examples of unacceptable behavior by participants include:

-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting

 ## Our Responsibilities

@@ -85,19 +85,19 @@ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.ht

 有助于创造正面环境的行为包括但不限于：

-* 使用友好和包容性语言
-* 尊重不同的观点和经历
-* 耐心地接受建设性批评
-* 关注对社区最有利的事情
-* 友善对待其他社区成员
+- 使用友好和包容性语言
+- 尊重不同的观点和经历
+- 耐心地接受建设性批评
+- 关注对社区最有利的事情
+- 友善对待其他社区成员

 身为参与者不能接受的行为包括但不限于：

-* 使用与性有关的言语或是图像，以及不受欢迎的性骚扰
-* 捣乱/煽动/造谣的行为或进行侮辱/贬损的评论，人身攻击及政治攻击
-* 公开或私下的骚扰
-* 未经许可地发布他人的个人资料，例如住址或是电子地址
-* 其他可以被合理地认定为不恰当或者违反职业操守的行为
+- 使用与性有关的言语或是图像，以及不受欢迎的性骚扰
+- 捣乱/煽动/造谣的行为或进行侮辱/贬损的评论，人身攻击及政治攻击
+- 公开或私下的骚扰
+- 未经许可地发布他人的个人资料，例如住址或是电子地址
+- 其他可以被合理地认定为不恰当或者违反职业操守的行为

 ## 我们的责任

@@ -49,8 +49,8 @@

 | Mirrors | URL                                                                                |
 | ------- | ---------------------------------------------------------------------------------- |
-| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.7.1/dist/iife/page-agent.demo.js         |
-| China   | https://registry.npmmirror.com/page-agent/1.7.1/files/dist/iife/page-agent.demo.js |
+| Global  | https://cdn.jsdelivr.net/npm/page-agent@1.8.1/dist/iife/page-agent.demo.js         |
+| China   | https://registry.npmmirror.com/page-agent/1.8.1/files/dist/iife/page-agent.demo.js |

 ### NPM 安装

@@ -106,4 +106,3 @@ this project possible.
 ---

 **⭐ 如果觉得 PageAgent 有用或有趣，请给项目点个星！**
-
@@ -10,52 +10,41 @@ For contribution rules and expectations, see [../CONTRIBUTING.md](../CONTRIBUTIN

 1. **Prerequisites**
    - `macOS` / `Linux` / `WSL`
-    - `node.js >= 20` with `npm >= 10`
+    - `node.js ^22.13 || >=24` with `npm >= 11`
    - An editor that supports `ts/eslint/prettier`
    - Make sure `eslint`, `prettier` and `commitlint` work well. Un-linted code won't pass the CI.

 2. **Setup**

    ```bash
-    npm i
-    npm start          # Start demo and documentation site
-    npm run build      # Build libs and website
+    npm i            # Or `npm ci` if you don't want to change the lockfile
+    npm start        # Start website dev server
+    npm run build    # Build everything
    ```

 ## 📦 Project Structure

-This is a **monorepo** with npm workspaces containing **4 main packages**:
+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
+Published packages:
+
+- **Page Agent** (`packages/page-agent/`) - Main entry with built-in UI Panel (npm: `page-agent`)
+- **MCP** (`packages/mcp/`) - MCP server for browser control via Page Agent extension (npm: `@page-agent/mcp`)
 - **Core** (`packages/core/`) - Core agent logic without UI (npm: `@page-agent/core`)
- **Extension** (`packages/extension/`) - Chrome extension for multi-page tasks and browser-level automation
- **Website** (`packages/website/`) - React documentation and landing page. Also as demo and test page for the core lib. private package `@page-agent/website`
+- **LLMs** (`packages/llms/`) - LLM client with reflection-before-action mental model
+- **Page Controller** (`packages/page-controller/`) - DOM operations and visual feedback, independent of LLM
+- **UI** (`packages/ui/`) - Panel and i18n, decoupled from PageAgent

-> We use a simplified monorepo solution with `native npm-workspace + ts reference + vite alias`. No fancy tooling. Hoisting is required.
->
-> - When developing. Use alias so that we don't have to pre-build.
-> - When bundling. Use external and disable ts `paths` alias.
-> - When bundling `IIFE` and `Website`. Bundle everything together.
+Applications:
+
+- **Extension** (`packages/extension/`) - Browser extension (WXT + React)
+- **Website** (`packages/website/`) - React docs, landing page, and dev playground (private)
+
+> Source-first monorepo with `npm workspaces + ts references + vite alias`. Library `package.json` exports point to `src/*.ts` during development, and point to `dist/*.js` when published. `workspaces` in root `package.json` must be in topological order.

 ## 🤖 AGENTS.md Alias

-If your 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
-    ```
+If your AI assistant does not support [AGENTS.md](https://agents.md/). Add an alias for it.

 ## 🔧 Development Workflows

@@ -85,9 +74,8 @@ If your AI assistant does not support [AGENTS.md](https://agents.md/). Add an al
 ### Extension Development

 ```bash
-# make sure you ran `npm run build:libs` first and every time you changed the core libs
-npm run dev -w @page-agent/ext
-npm run zip -w @page-agent/ext
+npm run dev:ext
+npm run build:ext
 ```

 - Update `packages/extension/docs/extension_api.md` for API integration details
@@ -1,8 +1,5 @@
+import eslintReact from '@eslint-react/eslint-plugin'
 import js from '@eslint/js'
-import reactDom from 'eslint-plugin-react-dom'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import reactX from 'eslint-plugin-react-x'
 import { defineConfig, globalIgnores } from 'eslint/config'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
@@ -15,44 +12,24 @@ export default defineConfig([
 		'**/.wxt',
 		'**/.output',
 	]),
-	{
-		plugins: {
-			'react-hooks': reactHooks,
-		},
-		rules: reactHooks.configs.recommended.rules,
-	},
 	{
 		files: ['**/*.{ts,tsx}'],
 		extends: [
 			js.configs.recommended,
 			tseslint.configs.recommended,
-			// reactHooks.configs['recommended-latest'],
-			reactRefresh.configs.vite,
-
-			// Remove tseslint.configs.recommended and replace with this
 			...tseslint.configs.recommendedTypeChecked,
-			// Alternatively, use this for stricter rules
 			...tseslint.configs.strictTypeChecked,
-			// Optionally, add this for stylistic rules
 			...tseslint.configs.stylisticTypeChecked,
-
-			// Enable lint rules for React
-			reactX.configs['recommended-typescript'],
-			// Enable lint rules for React DOM
-			reactDom.configs.recommended,
+			eslintReact.configs['recommended-typescript'],
 		],
 		languageOptions: {
 			parserOptions: {
-				// project: ['./tsconfig.json'],
-				// project: ['./packages/*/tsconfig.json'],
-				// tsconfigRootDir: import.meta.dirname,
 				projectService: true,
 			},
 			ecmaVersion: 2020,
 			globals: globals.browser,
 		},
 		rules: {
-			// Add any additional rules here
 			'@typescript-eslint/no-non-null-assertion': 'off',
 			'@typescript-eslint/no-unsafe-assignment': 'off',
 			'@typescript-eslint/no-unsafe-member-access': 'off',
@@ -72,14 +49,14 @@ export default defineConfig([
 			'@typescript-eslint/no-unsafe-argument': 'off',
 			'@typescript-eslint/no-unsafe-return': 'off',
 			'@typescript-eslint/restrict-plus-operands': 'off',
-			'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',
+			'@eslint-react/dom-no-missing-button-type': 'off',
+			'@eslint-react/no-nested-component-definitions': 'off',
+			'@eslint-react/no-array-index-key': 'off',
+			'@eslint-react/dom-no-dangerously-set-innerhtml': 'off',
 		},
 	},
 ])
@@ -1,7 +1,7 @@
 {
    "name": "root",
    "private": true,
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
    "workspaces": [
        "packages/page-controller",
@@ -22,52 +22,52 @@
    },
    "homepage": "https://alibaba.github.io/page-agent/",
    "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
+        "node": "^22.13.0 || >=24"
    },
    "scripts": {
        "start": "npm run dev --workspace=@page-agent/website",
        "dev:ext": "npm run dev -w @page-agent/ext",
        "dev:demo": "npm run dev:demo --workspace=page-agent",
-        "build": "npm run build:libs && npm run build:website",
-        "build:libs": "npm run build --workspaces --if-present",
+        "build": "node scripts/build.js",
+        "build:libs": "node scripts/build-libs.js",
        "build:website": "npm run build:website --workspace=@page-agent/website",
-        "build:ext": "npm run build:libs && npm run zip -w @page-agent/ext",
+        "build:ext": "npm run zip -w @page-agent/ext",
        "version": "node scripts/sync-version.js",
+        "postpublish": "npm run postpublish --workspaces --if-present",
+        "typecheck": "tsc --noEmit -p tsconfig.typecheck.json && tsc --noEmit -p packages/extension/tsconfig.json",
        "lint": "eslint .",
-        "cleanup": "rm -rf packages/*/dist",
-        "prepare": "husky"
+        "ci": "node scripts/ci.js",
+        "cleanup": "rm -rf packages/*/dist && rm -rf packages/*/.output",
+        "prepare": "husky || true"
    },
    "devDependencies": {
        "@commitlint/cli": "^20.5.0",
        "@commitlint/config-conventional": "^20.5.0",
-        "@eslint/js": "^9.39.2",
-        "@microsoft/api-extractor": "^7.57.7",
-        "@tailwindcss/vite": "^4.2.2",
+        "@eslint-react/eslint-plugin": "^4.2.3",
+        "@eslint/js": "^10.0.1",
+        "@microsoft/api-extractor": "^7.58.6",
+        "@tailwindcss/vite": "^4.2.3",
        "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-        "@types/node": "^25.5.0",
+        "@types/node": "^25.6.0",
        "@vitejs/plugin-react-swc": "^4.3.0",
        "chalk": "^5.6.2",
        "concurrently": "^9.2.1",
-        "dotenv": "^17.3.1",
-        "eslint": "^9.39.2",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-react-dom": "^2.13.0",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.5.2",
-        "eslint-plugin-react-x": "^2.13.0",
-        "globals": "^17.4.0",
+        "dotenv": "^17.4.2",
+        "eslint": "^10.2.0",
+        "globals": "^17.5.0",
        "husky": "^9.1.7",
        "lint-staged": "^16.4.0",
-        "prettier": "^3.8.0",
-        "typescript": "^5.9.3",
-        "typescript-eslint": "^8.58.0",
+        "prettier": "^3.8.2",
+        "typescript": "^6.0.2",
+        "typescript-eslint": "^8.59.0",
        "unplugin-dts": "^1.0.0-beta.6",
-        "vite": "^7.3.1",
-        "vite-plugin-css-injected-by-js": "^4.0.1",
-        "vite-bundle-analyzer": "^1.3.6"
+        "vite": "^7.3.2",
+        "vite-bundle-analyzer": "^1.3.7",
+        "vite-plugin-css-injected-by-js": "^4.0.1"
    },
    "overrides": {
-        "typescript": "^5.9.3"
+        "typescript": "^6.0.2",
+        "@vitejs/plugin-react": "^5.2.0"
    },
    "lint-staged": {
        "*.{js,ts,cjs,cts,mjs,mts}": [
@@ -1,16 +1,26 @@
 {
    "name": "@page-agent/core",
    "private": false,
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
-    "main": "./dist/esm/page-agent-core.js",
-    "module": "./dist/esm/page-agent-core.js",
-    "types": "./dist/esm/PageAgentCore.d.ts",
+    "main": "./src/PageAgentCore.ts",
+    "types": "./src/PageAgentCore.ts",
    "exports": {
        ".": {
-            "types": "./dist/esm/PageAgentCore.d.ts",
-            "import": "./dist/esm/page-agent-core.js",
-            "default": "./dist/esm/page-agent-core.js"
+            "types": "./src/PageAgentCore.ts",
+            "default": "./src/PageAgentCore.ts"
+        }
+    },
+    "publishConfig": {
+        "main": "./dist/esm/page-agent-core.js",
+        "module": "./dist/esm/page-agent-core.js",
+        "types": "./dist/esm/PageAgentCore.d.ts",
+        "exports": {
+            ".": {
+                "types": "./dist/esm/PageAgentCore.d.ts",
+                "import": "./dist/esm/page-agent-core.js",
+                "default": "./dist/esm/page-agent-core.js"
+            }
        }
    },
    "files": [
@@ -39,18 +49,18 @@
    "scripts": {
        "build": "vite build",
        "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))\"",
-        "postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
+        "prepublishOnly": "node ../../scripts/pre-publish.js",
+        "postpublish": "node ../../scripts/post-publish.js"
    },
    "dependencies": {
        "chalk": "^5.6.2",
-        "@page-agent/llms": "1.7.1",
-        "@page-agent/page-controller": "1.7.1"
+        "@page-agent/llms": "1.8.1",
+        "@page-agent/page-controller": "1.8.1"
    },
    "peerDependencies": {
        "zod": "^3.25.0 || ^4.0.0"
    },
    "devDependencies": {
-        "zod": "^4.3.5"
+        "zod": "^4.3.6"
    }
 }
@@ -1 +0,0 @@
-system_prompt.md
@@ -19,7 +19,7 @@ const log = console.log.bind(console, chalk.yellow('[autoFixer]'))
 * - etc.
 */
 export function normalizeResponse(response: any, tools?: Map<string, PageAgentTool>): any {
-	let resolvedArguments = null as any
+	let resolvedArguments: any

 	const choice = (response as { choices?: Choice[] }).choices?.[0]
 	if (!choice) throw new Error('No choices in response')
@@ -93,7 +93,7 @@ export function normalizeResponse(response: any, tools?: Map<string, PageAgentTo
 	// fix incomplete formats
 	if (!resolvedArguments.action) {
 		log(`#5: fixing tool_call`)
-		resolvedArguments.action = { name: 'wait', input: { seconds: 1 } }
+		resolvedArguments.action = { wait: { seconds: 1 } }
 	}

 	// pack back to standard format
@@ -1,9 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        // @workaround DTS bug
-        // dts do not work with monorepo path mapping
-        // disable path mapping for it
-        "paths": {}
-    }
-}
@@ -1,22 +1,8 @@
 {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
-        "baseUrl": ".",
-        "outDir": "dist",
-        "paths": {
-            //
-            "@page-agent/llms": ["../llms/src/index.ts"],
-            "@page-agent/page-controller": ["../page-controller/src/PageController.ts"]
-        }
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
    },
-    "include": ["**/*.ts"],
-    "exclude": ["dist", "node_modules"],
-    "references": [
-        //
-        { "path": "../llms" },
-        { "path": "../page-controller" }
-    ]
+    "include": ["src/**/*.ts"],
+    "exclude": ["dist", "node_modules"]
 }
@@ -11,13 +11,18 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 export default defineConfig({
 	clearScreen: false,
 	plugins: [
-		dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true }),
+		dts({
+			bundleTypes: true,
+			compilerOptions: {
+				composite: true,
+				noEmit: false,
+				emitDeclarationOnly: true,
+				declaration: true,
+			},
+		}),
 		cssInjectedByJsPlugin({ relativeCSSInjection: true }),
 	],
 	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/PageAgentCore.ts'),
@@ -1,2 +0,0 @@
-.wxt
-src/components/ui
@@ -42,33 +42,28 @@ localStorage.setItem('PageAgentExtUserAuthToken', 'your-token')
 ## Quick Start

 ```typescript
-import type {
-  AgentActivity,
-  AgentStatus,
-  ExecutionResult,
-  HistoricalEvent,
-} from '@page-agent/core'
+import type { AgentActivity, AgentStatus, ExecutionResult, HistoricalEvent } from '@page-agent/core'

 // Wait for extension injection (up to 1 second)
 async function waitForExtension(timeout = 1000): Promise<boolean> {
-  const start = Date.now()
-  while (Date.now() - start < timeout) {
-    if (window.PAGE_AGENT_EXT) return true
-    await new Promise((r) => setTimeout(r, 100))
-  }
-  return false
+    const start = Date.now()
+    while (Date.now() - start < timeout) {
+        if (window.PAGE_AGENT_EXT) return true
+        await new Promise((r) => setTimeout(r, 100))
+    }
+    return false
 }

 // Usage
 if (await waitForExtension()) {
-  const result = await window.PAGE_AGENT_EXT!.execute('Click the login button', {
-    baseURL: 'https://api.openai.com/v1',
-    apiKey: 'your-api-key',
-    model: 'gpt-5.2',
-    onStatusChange: (status) => console.log('Status:', status),
-    onActivity: (activity) => console.log('Activity:', activity),
-  })
-  console.log('Result:', result)
+    const result = await window.PAGE_AGENT_EXT!.execute('Click the login button', {
+        baseURL: 'https://api.openai.com/v1',
+        apiKey: 'your-api-key',
+        model: 'gpt-5.2',
+        onStatusChange: (status) => console.log('Status:', status),
+        onActivity: (activity) => console.log('Activity:', activity),
+    })
+    console.log('Result:', result)
 }
 ```

@@ -90,10 +85,10 @@ Execute one agent task.

 Parameters:

-| Name | Type | Required | Description |
-| ---- | ---- | -------- | ----------- |
-| `task` | `string` | Yes | Task description |
-| `config` | `ExecuteConfig` | Yes | LLM settings, options, and callbacks |
+| Name     | Type            | Required | Description                          |
+| -------- | --------------- | -------- | ------------------------------------ |
+| `task`   | `string`        | Yes      | Task description                     |
+| `config` | `ExecuteConfig` | Yes      | LLM settings, options, and callbacks |

 Returns: `Promise<ExecutionResult>`

@@ -106,33 +101,28 @@ Stop the current task.
 Install `@page-agent/core` for complete types:

 ```typescript
-import type {
-  AgentActivity,
-  AgentStatus,
-  ExecutionResult,
-  HistoricalEvent,
-} from '@page-agent/core'
+import type { AgentActivity, AgentStatus, ExecutionResult, HistoricalEvent } from '@page-agent/core'

 export interface ExecuteConfig {
-  baseURL: string
-  model: string
-  apiKey?: string
+    baseURL: string
+    model: string
+    apiKey?: string

-  // Global system-level instructions for the agent.
-  // Equivalent to AgentConfig.instructions.system.
-  systemInstruction?: string
+    // Global system-level instructions for the agent.
+    // Equivalent to AgentConfig.instructions.system.
+    systemInstruction?: string

-  // Include the initial tab where page JS starts. Default: true.
-  includeInitialTab?: boolean
+    // Include the initial tab where page JS starts. Default: true.
+    includeInitialTab?: boolean

-  // Control all unpinned tabs in the window instead of only the tab group.
-  // When enabled, agent sees and can switch to every non-pinned tab.
-  // Default: false. Experimental.
-  experimentalIncludeAllTabs?: boolean
+    // Control all unpinned tabs in the window instead of only the tab group.
+    // When enabled, agent sees and can switch to every non-pinned tab.
+    // Default: false. Experimental.
+    experimentalIncludeAllTabs?: boolean

-  onStatusChange?: (status: AgentStatus) => void
-  onActivity?: (activity: AgentActivity) => void
-  onHistoryUpdate?: (history: HistoricalEvent[]) => void
+    onStatusChange?: (status: AgentStatus) => void
+    onActivity?: (activity: AgentActivity) => void
+    onHistoryUpdate?: (history: HistoricalEvent[]) => void
 }

 export type Execute = (task: string, config: ExecuteConfig) => Promise<ExecutionResult>
@@ -148,31 +138,31 @@ type AgentStatus = 'idle' | 'running' | 'completed' | 'error'

 ```typescript
 type AgentActivity =
-  | { type: 'thinking' }
-  | { type: 'executing'; tool: string; input: unknown }
-  | { type: 'executed'; tool: string; input: unknown; output: string; duration: number }
-  | { type: 'retrying'; attempt: number; maxAttempts: number }
-  | { type: 'error'; message: string }
+    | { type: 'thinking' }
+    | { type: 'executing'; tool: string; input: unknown }
+    | { type: 'executed'; tool: string; input: unknown; output: string; duration: number }
+    | { type: 'retrying'; attempt: number; maxAttempts: number }
+    | { type: 'error'; message: string }
 ```

 `HistoricalEvent`

 ```typescript
 type HistoricalEvent =
-  | { type: 'step'; stepIndex: number; reflection: AgentReflection; action: Action }
-  | { type: 'observation'; content: string }
-  | { type: 'user_takeover' }
-  | { type: 'retry'; message: string; attempt: number; maxAttempts: number }
-  | { type: 'error'; message: string; rawResponse?: unknown }
+    | { type: 'step'; stepIndex: number; reflection: AgentReflection; action: Action }
+    | { type: 'observation'; content: string }
+    | { type: 'user_takeover' }
+    | { type: 'retry'; message: string; attempt: number; maxAttempts: number }
+    | { type: 'error'; message: string; rawResponse?: unknown }
 ```

 `ExecutionResult`

 ```typescript
 interface ExecutionResult {
-  success: boolean
-  data: string
-  history: HistoricalEvent[]
+    success: boolean
+    data: string
+    history: HistoricalEvent[]
 }
 ```

@@ -182,15 +172,15 @@ interface ExecutionResult {

 ```typescript
 const result = await window.PAGE_AGENT_EXT!.execute(
-  'Fill in the email field with test@example.com and click Submit',
-  {
-    baseURL: 'https://api.openai.com/v1',
-    apiKey: process.env.OPENAI_API_KEY!,
-    model: 'gpt-5.2',
-    includeInitialTab: false, // Optional: exclude current tab
-    onStatusChange: (status) => console.log(status),
-    onActivity: (activity) => console.log(activity),
-  }
+    'Fill in the email field with test@example.com and click Submit',
+    {
+        baseURL: 'https://api.openai.com/v1',
+        apiKey: process.env.OPENAI_API_KEY!,
+        model: 'gpt-5.2',
+        includeInitialTab: false, // Optional: exclude current tab
+        onStatusChange: (status) => console.log(status),
+        onActivity: (activity) => console.log(activity),
+    }
 )
 ```

@@ -205,35 +195,30 @@ window.PAGE_AGENT_EXT!.stop()
 If you are not importing `@page-agent/core`, add:

 ```typescript
-import type {
-  AgentActivity,
-  AgentStatus,
-  ExecutionResult,
-  HistoricalEvent,
-} from '@page-agent/core'
+import type { AgentActivity, AgentStatus, ExecutionResult, HistoricalEvent } from '@page-agent/core'

 interface ExecuteConfig {
-  baseURL: string
-  model: string
-  apiKey?: string
+    baseURL: string
+    model: string
+    apiKey?: string

-  systemInstruction?: string
+    systemInstruction?: string

-  includeInitialTab?: boolean
-  experimentalIncludeAllTabs?: boolean
-  onStatusChange?: (status: AgentStatus) => void
-  onActivity?: (activity: AgentActivity) => void
-  onHistoryUpdate?: (history: HistoricalEvent[]) => void
+    includeInitialTab?: boolean
+    experimentalIncludeAllTabs?: boolean
+    onStatusChange?: (status: AgentStatus) => void
+    onActivity?: (activity: AgentActivity) => void
+    onHistoryUpdate?: (history: HistoricalEvent[]) => void
 }

 declare global {
-  interface Window {
-    PAGE_AGENT_EXT_VERSION?: string
-    PAGE_AGENT_EXT?: {
-      version: string
-      execute: Execute
-      stop: () => void
+    interface Window {
+        PAGE_AGENT_EXT_VERSION?: string
+        PAGE_AGENT_EXT?: {
+            version: string
+            execute: Execute
+            stop: () => void
+        }
    }
-  }
 }
 ```
@@ -1,7 +1,7 @@
 {
    "name": "@page-agent/ext",
    "private": true,
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
    "scripts": {
        "dev": "wxt",
@@ -16,31 +16,32 @@
        "@radix-ui/react-separator": "^1.1.8",
        "@radix-ui/react-slot": "^1.2.4",
        "@radix-ui/react-switch": "^1.2.6",
-        "@types/chrome": "^0.1.38",
+        "@tailwindcss/vite": "^4.2.3",
+        "@types/chrome": "^0.1.40",
        "@types/react": "^19.2.14",
-        "@types/react-dom": "^19.2.1",
+        "@types/react-dom": "^19.2.3",
        "@wxt-dev/module-react": "^1.2.2",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "idb": "^8.0.3",
-        "lucide-react": "^1.7.0",
+        "lucide-react": "^1.8.0",
        "motion": "^12.38.0",
        "next-themes": "^0.4.6",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
+        "react": "^19.2.5",
+        "react-dom": "^19.2.5",
        "rough-notation": "^0.5.1",
-        "simple-icons": "^16.14.0",
+        "simple-icons": "^16.16.0",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.5.0",
-        "tailwindcss": "^4.1.14",
+        "tailwindcss": "^4.2.2",
        "tw-animate-css": "^1.4.0",
-        "wxt": "^0.20.20"
+        "wxt": "^0.20.25"
    },
    "dependencies": {
-        "@page-agent/core": "1.7.1",
-        "@page-agent/llms": "1.7.1",
-        "@page-agent/page-controller": "1.7.1",
-        "@page-agent/ui": "1.7.1",
+        "@page-agent/core": "1.8.1",
+        "@page-agent/llms": "1.8.1",
+        "@page-agent/page-controller": "1.8.1",
+        "@page-agent/ui": "1.8.1",
        "ai-motion": "^0.4.8",
        "chalk": "^5.6.2"
    },
@@ -1,11 +1,11 @@
 {
-	"extName": {
-		"message": "Page Agent Ext"
-	},
-	"extDescription": {
-		"message": "AI-powered browser automation assistant. Control web pages with natural language."
-	},
-	"extActionTitle": {
-		"message": "Open Page Agent"
-	}
+    "extName": {
+        "message": "Page Agent Ext"
+    },
+    "extDescription": {
+        "message": "AI-powered browser automation assistant. Control web pages with natural language."
+    },
+    "extActionTitle": {
+        "message": "Open Page Agent"
+    }
 }
@@ -1,11 +1,11 @@
 {
-	"extName": {
-		"message": "Page Agent Ext"
-	},
-	"extDescription": {
-		"message": "AI 驱动的浏览器自动化助手，用自然语言控制网页。"
-	},
-	"extActionTitle": {
-		"message": "打开 Page Agent"
-	}
+    "extName": {
+        "message": "Page Agent Ext"
+    },
+    "extDescription": {
+        "message": "AI 驱动的浏览器自动化助手，用自然语言控制网页。"
+    },
+    "extActionTitle": {
+        "message": "打开 Page Agent"
+    }
 }
@@ -1 +0,0 @@
-system_prompt.md
@@ -56,7 +56,7 @@ export class RemotePageController {
 	}

 	async getBrowserState(): Promise<BrowserState> {
-		let browserState = {} as BrowserState
+		let browserState: BrowserState
 		debug('getBrowserState', this.currentTabId)

 		const currentUrl = await this.getCurrentUrl()
@@ -24,7 +24,7 @@ export class TabsController {
 	currentTabId: number | null = null

 	private disposed = false
-	private port: chrome.runtime.Port | null = null
+	private port?: chrome.runtime.Port
 	private portRetries = 0

 	private windowId: number | null = null
@@ -44,7 +44,7 @@ export class TabsController {

 		this.currentTabId = null
 		this.disposed = false
-		this.port = null
+		this.port = undefined
 		this.portRetries = 0

 		this.windowId = null
@@ -338,7 +338,7 @@ export class TabsController {
 		})

 		this.port.onDisconnect.addListener(() => {
-			this.port = null
+			this.port = undefined
 			if (this.disposed) return
 			if (this.portRetries >= 7) {
 				console.error(PREFIX, 'tab events port failed after 7 retries, giving up')
@@ -354,7 +354,7 @@ export class TabsController {
 		debug('dispose')
 		this.disposed = true
 		this.port?.disconnect()
-		this.port = null
+		this.port = undefined
 	}
 }

@@ -108,7 +108,6 @@ export function useAgent(): UseAgentResult {

 	const execute = useCallback(async (task: string) => {
 		const agent = agentRef.current
-		console.log('🚀 [useAgent] start executing task:', task)
 		if (!agent) throw new Error('Agent not initialized')

 		setCurrentTask(task)
@@ -49,7 +49,9 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 	const [showToken, setShowToken] = useState(false)
 	const [showApiKey, setShowApiKey] = useState(false)

-	useEffect(() => {
+	const [prevConfig, setPrevConfig] = useState(config)
+	if (prevConfig !== config) {
+		setPrevConfig(config)
 		setBaseURL(config?.baseURL || DEMO_BASE_URL)
 		setModel(config?.model || DEMO_MODEL)
 		setApiKey(config?.apiKey)
@@ -59,7 +61,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 		setExperimentalLlmsTxt(config?.experimentalLlmsTxt ?? false)
 		setExperimentalIncludeAllTabs(config?.experimentalIncludeAllTabs ?? false)
 		setDisableNamedToolChoice(config?.disableNamedToolChoice ?? false)
-	}, [config])
+	}

 	// Poll for user auth token every second until found
 	useEffect(() => {
@@ -121,6 +123,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 					size="icon-sm"
 					onClick={onClose}
 					className="absolute top-2 right-3 cursor-pointer"
+					aria-label="Back"
 				>
 					<CornerUpLeft className="size-3.5" />
 				</Button>
@@ -128,12 +131,15 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {

 			{/* 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>
+				<label htmlFor="user-auth-token" className="text-xs font-medium text-muted-foreground">
+					User Auth Token
+				</label>
 				<p className="text-[10px] text-muted-foreground mb-1">
 					Give a website the ability to call this extension.
 				</p>
 				<div className="flex gap-2 items-center">
 					<Input
+						id="user-auth-token"
 						readOnly
 						value={
 							userAuthToken
@@ -150,6 +156,8 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 						className="h-8 w-8 shrink-0 cursor-pointer"
 						onClick={() => setShowToken(!showToken)}
 						disabled={!userAuthToken}
+						aria-label={showToken ? 'Hide token' : 'Show token'}
+						aria-pressed={showToken}
 					>
 						{showToken ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
 					</Button>
@@ -159,9 +167,13 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 						className="h-8 w-8 shrink-0 cursor-pointer"
 						onClick={handleCopyToken}
 						disabled={!userAuthToken}
+						aria-label="Copy token"
 					>
 						{copied ? <span className="">✓</span> : <Copy className="size-3" />}
 					</Button>
+					<span role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+						{copied ? 'Token copied' : ''}
+					</span>
 				</div>
 			</div>

@@ -169,6 +181,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			<a
 				href="/hub.html"
 				target="_blank"
+				rel="noopener noreferrer"
 				className="flex items-center justify-between p-3 rounded-md border bg-muted/50 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
 			>
 				Manage Page Agent Hub
@@ -176,8 +189,11 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			</a>

 			<div className="flex flex-col gap-1.5">
-				<label className="text-xs text-muted-foreground">Base URL</label>
+				<label htmlFor="base-url" className="text-xs text-muted-foreground">
+					Base URL
+				</label>
 				<Input
+					id="base-url"
 					placeholder="https://api.openai.com/v1"
 					value={baseURL}
 					onChange={(e) => setBaseURL(e.target.value)}
@@ -202,8 +218,11 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			)}

 			<div className="flex flex-col gap-1.5">
-				<label className="text-xs text-muted-foreground">Model</label>
+				<label htmlFor="model" className="text-xs text-muted-foreground">
+					Model
+				</label>
 				<Input
+					id="model"
 					placeholder="gpt-5.1"
 					value={model}
 					onChange={(e) => setModel(e.target.value)}
@@ -212,9 +231,12 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			</div>

 			<div className="flex flex-col gap-1.5">
-				<label className="text-xs text-muted-foreground">API Key</label>
+				<label htmlFor="api-key" className="text-xs text-muted-foreground">
+					API Key
+				</label>
 				<div className="flex gap-2 items-center">
 					<Input
+						id="api-key"
 						type={showApiKey ? 'text' : 'password'}
 						// placeholder="sk-..."
 						value={apiKey}
@@ -226,6 +248,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 						size="icon"
 						className="h-8 w-8 shrink-0 cursor-pointer"
 						onClick={() => setShowApiKey(!showApiKey)}
+						aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
 					>
 						{showApiKey ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
 					</Button>
@@ -258,8 +281,11 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			{advancedOpen && (
 				<>
 					<div className="flex flex-col gap-1.5">
-						<label className="text-xs text-muted-foreground">Max Steps</label>
+						<label htmlFor="max-steps" className="text-xs text-muted-foreground">
+							Max Steps
+						</label>
 						<Input
+							id="max-steps"
 							type="number"
 							placeholder="40"
 							min={1}
@@ -71,7 +71,6 @@ export function HistoryDetail({
 			{/* Events (read-only) */}
 			<div className="flex-1 overflow-y-auto p-3 space-y-2">
 				{session.history.map((event, index) => (
-					// eslint-disable-next-line react-x/no-array-index-key
 					<EventCard key={index} event={event} />
 				))}
 			</div>
@@ -1,4 +1,12 @@
-import { ArrowDownToLine, ArrowLeft, CheckCircle, RotateCcw, Trash2, XCircle } from 'lucide-react'
+import {
+	ArrowDownToLine,
+	ArrowLeft,
+	CheckCircle,
+	History,
+	RotateCcw,
+	Trash2,
+	XCircle,
+} from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'

 import { Button } from '@/components/ui/button'
@@ -29,12 +37,16 @@ export function HistoryList({
 	const [loading, setLoading] = useState(true)

 	const load = useCallback(async () => {
-		setSessions(await listSessions())
-		setLoading(false)
+		try {
+			setSessions(await listSessions())
+		} catch (err) {
+			console.error('[HistoryList] Failed to load sessions:', err)
+		} finally {
+			setLoading(false)
+		}
 	}, [])

 	useEffect(() => {
-		// eslint-disable-next-line react-hooks/set-state-in-effect
 		load()
 	}, [load])

@@ -58,7 +70,14 @@ export function HistoryList({
 		<div className="flex flex-col h-screen bg-background">
 			{/* Header */}
 			<header className="flex items-center gap-2 border-b px-3 py-2">
-				<Button variant="ghost" size="icon-sm" onClick={onBack} className="cursor-pointer">
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					onClick={onBack}
+					className="cursor-pointer"
+					aria-label="Back"
+					title="Back"
+				>
 					<ArrowLeft className="size-3.5" />
 				</Button>
 				<span className="text-sm font-medium flex-1">History</span>
@@ -81,14 +100,23 @@ export function HistoryList({
 			{/* List */}
 			<div className="flex-1 overflow-y-auto">
 				{loading && (
-					<div className="flex items-center justify-center h-32 text-xs text-muted-foreground">
-						Loading...
+					<div className="flex flex-col" aria-label="Loading history" aria-busy="true">
+						{[...Array(4)].map((_, i) => (
+							<div key={i} className="flex items-start gap-2 px-3 py-2.5 border-b">
+								<div className="size-3.5 mt-0.5 rounded-full bg-muted animate-pulse shrink-0" />
+								<div className="flex-1 space-y-1.5">
+									<div className="h-2.5 bg-muted animate-pulse rounded w-3/4" />
+									<div className="h-2 bg-muted animate-pulse rounded w-1/3" />
+								</div>
+							</div>
+						))}
 					</div>
 				)}

 				{!loading && sessions.length === 0 && (
-					<div className="flex items-center justify-center h-32 text-xs text-muted-foreground">
-						No history yet
+					<div className="flex flex-col items-center justify-center h-40 gap-2 text-muted-foreground">
+						<History className="size-8 opacity-30" />
+						<p className="text-xs">No history yet</p>
 					</div>
 				)}

@@ -54,7 +54,7 @@ function ResultCard({
 					Result: {success ? 'Success' : 'Failed'}
 				</span>
 			</div>
-			<p className="text-xs text-[11px] text-muted-foreground pl-5 whitespace-pre-wrap">{text}</p>
+			<p className="text-[12px] text-foreground pl-5 whitespace-pre-wrap">{text}</p>
 			{children}
 		</div>
 	)
@@ -146,6 +146,7 @@ function CopyButton({ text, label }: { text: string; label: string }) {
 function extractPrompt(rawRequest: unknown, role: 'system' | 'user'): string | null {
 	const messages = (rawRequest as { messages?: { role: string; content?: unknown }[] })?.messages
 	if (!messages) return null
+	if (!Array.isArray(messages)) return null
 	const msg =
 		role === 'system'
 			? messages.find((m) => m.role === role)
@@ -133,7 +133,6 @@ export default function App() {
 					)}

 					{history.map((event, index) => (
-						// eslint-disable-next-line react-x/no-array-index-key
 						<EventCard key={index} event={event} />
 					))}

@@ -206,9 +206,9 @@ export function useHubWs(
 	const [wsState, setWsState] = useState<HubWsState>(() => (wsPort ? 'connecting' : 'disconnected'))
 	const hubWsRef = useRef<HubWs | null>(null)

-	const latest = useRef({ execute, stop, configure, config })
+	const latestRef = useRef({ execute, stop, configure, config })
 	useEffect(() => {
-		latest.current = { execute, stop, configure, config }
+		latestRef.current = { execute, stop, configure, config }
 	})

 	useEffect(() => {
@@ -218,14 +218,14 @@ export function useHubWs(
 			Number(wsPort),
 			{
 				onExecute: async (task, incomingConfig) => {
-					const { execute, configure, config } = latest.current
+					const { execute, configure, config } = latestRef.current
 					if (incomingConfig) {
 						await configure({ ...config, ...incomingConfig } as ExtConfig)
 					}
 					const result = await execute(task)
 					return { success: result.success, data: result.data }
 				},
-				onStop: () => latest.current.stop(),
+				onStop: () => latestRef.current.stop(),
 			},
 			setWsState
 		)
@@ -147,6 +147,8 @@ export default function App() {
 						size="icon-sm"
 						onClick={() => setView({ name: 'history' })}
 						className="cursor-pointer"
+						aria-label="History"
+						title="History"
 					>
 						<History className="size-3.5" />
 					</Button>
@@ -155,6 +157,8 @@ export default function App() {
 						size="icon-sm"
 						onClick={() => setView({ name: 'config' })}
 						className="cursor-pointer"
+						aria-label="Settings"
+						title="Settings"
 					>
 						<Settings className="size-3.5" />
 					</Button>
@@ -178,7 +182,6 @@ export default function App() {
 					{showEmptyState && <EmptyState />}

 					{history.map((event, index) => (
-						// eslint-disable-next-line react-x/no-array-index-key
 						<EventCard key={index} event={event} />
 					))}

@@ -206,6 +209,8 @@ export default function App() {
 								variant="destructive"
 								onClick={handleStop}
 								className="size-7"
+								aria-label="Stop task"
+								title="Stop task"
 							>
 								<Square className="size-3" />
 							</InputGroupButton>
@@ -216,6 +221,8 @@ export default function App() {
 								onClick={() => handleSubmit()}
 								disabled={!inputValue.trim()}
 								className="size-7 cursor-pointer"
+								aria-label="Send"
+								title="Send"
 							>
 								<Send className="size-3" />
 							</InputGroupButton>
@@ -3,26 +3,11 @@
    "compilerOptions": {
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
        "useDefineForClassFields": true,
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
        "strictNullChecks": true,
        "jsx": "react-jsx",
-        "baseUrl": ".",
+        "types": ["node", "chrome"],
        "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"]
+            "@/*": ["./src/*"]
        }
-    },
-    "references": [
-        //
-        { "path": "../llms" },
-        { "path": "../page-controller" },
-        { "path": "../core" },
-        { "path": "../ui" }
-    ]
+    }
 }
@@ -1,15 +1,25 @@
 {
    "name": "@page-agent/llms",
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
-    "main": "./dist/lib/page-agent-llms.js",
-    "module": "./dist/lib/page-agent-llms.js",
-    "types": "./dist/lib/index.d.ts",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
    "exports": {
        ".": {
-            "types": "./dist/lib/index.d.ts",
-            "import": "./dist/lib/page-agent-llms.js",
-            "default": "./dist/lib/page-agent-llms.js"
+            "types": "./src/index.ts",
+            "default": "./src/index.ts"
+        }
+    },
+    "publishConfig": {
+        "main": "./dist/lib/page-agent-llms.js",
+        "module": "./dist/lib/page-agent-llms.js",
+        "types": "./dist/lib/index.d.ts",
+        "exports": {
+            ".": {
+                "types": "./dist/lib/index.d.ts",
+                "import": "./dist/lib/page-agent-llms.js",
+                "default": "./dist/lib/page-agent-llms.js"
+            }
        }
    },
    "files": [
@@ -33,8 +43,8 @@
    "homepage": "https://alibaba.github.io/page-agent/",
    "scripts": {
        "build": "vite build",
-        "prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
-        "postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
+        "prepublishOnly": "node ../../scripts/pre-publish.js",
+        "postpublish": "node ../../scripts/post-publish.js"
    },
    "dependencies": {
        "chalk": "^5.6.2"
@@ -43,6 +53,6 @@
        "zod": "^3.25.0 || ^4.0.0"
    },
    "devDependencies": {
-        "zod": "^4.3.5"
+        "zod": "^4.3.6"
    }
 }
@@ -45,6 +45,17 @@ export class OpenAIClient implements LLMClient {
 		}

 		modelPatch(requestBody)
+		let transformedBody: Record<string, unknown> | undefined
+		try {
+			transformedBody = this.config.transformRequestBody(requestBody)
+		} catch (error) {
+			throw new InvokeError(
+				InvokeErrorType.CONFIG_ERROR,
+				`transformRequestBody failed: ${(error as Error).message}`,
+				error
+			)
+		}
+		const finalRequestBody = transformedBody ?? requestBody

 		// 2. Call API
 		let response: Response
@@ -55,7 +66,7 @@ export class OpenAIClient implements LLMClient {
 					'Content-Type': 'application/json',
 					...(this.config.apiKey && { Authorization: `Bearer ${this.config.apiKey}` }),
 				},
-				body: JSON.stringify(requestBody),
+				body: JSON.stringify(finalRequestBody),
 				signal: abortSignal,
 			})
 		} catch (error: unknown) {
@@ -225,7 +236,7 @@ export class OpenAIClient implements LLMClient {
 				reasoningTokens: data.usage?.completion_tokens_details?.reasoning_tokens,
 			},
 			rawResponse: data,
-			rawRequest: requestBody,
+			rawRequest: finalRequestBody,
 		}
 	}
 }
@@ -14,6 +14,7 @@ export const InvokeErrorType = {
 	UNKNOWN: 'unknown',

 	// Non-retryable
+	CONFIG_ERROR: 'config_error', // Invalid local configuration or hook
 	AUTH_ERROR: 'auth_error', // Authentication failed
 	CONTEXT_LENGTH: 'context_length', // Prompt too long
 	CONTENT_FILTER: 'content_filter', // Content filtered
@@ -21,6 +21,7 @@ export function parseLLMConfig(config: LLMConfig): Required<LLMConfig> {
 		apiKey: config.apiKey || '',
 		temperature: config.temperature ?? DEFAULT_TEMPERATURE,
 		maxRetries: config.maxRetries ?? LLM_MAX_RETRIES,
+		transformRequestBody: config.transformRequestBody ?? ((requestBody) => requestBody),
 		disableNamedToolChoice: config.disableNamedToolChoice ?? false,
 		customFetch: (config.customFetch ?? fetch).bind(globalThis), // fetch will be illegal unless bound
 	}
@@ -95,6 +95,16 @@ export interface LLMConfig {
 	temperature?: number
 	maxRetries?: number

+	/**
+	 * Transform the final request body before sending it to the provider.
+	 * Use this to implement provider-specific request tweaks such as caching hints or custom flags.
+	 *
+	 * Return a new object, or mutate the input object and return undefined.
+	 */
+	transformRequestBody?: (
+		requestBody: Record<string, unknown>
+	) => Record<string, unknown> | undefined
+
 	/**
 	 * remove the tool_choice field from the request.
 	 * @note fix "Invalid tool_choice type: 'object'" for some LLMs.
@@ -53,6 +53,13 @@ export function modelPatch(body: Record<string, any>) {
 			debug('Applying Claude patch: convert tool_choice format')
 			body.tool_choice = { type: 'tool', name: body.tool_choice.function.name }
 		}
+
+		// TODO: Claude naming pattern has changed
+		// needs proper handling
+		if (modelName.startsWith('claude-opus-4-7') || modelName.startsWith('claude-opus-47')) {
+			debug('Applying Claude-4.7 patch: remove temperature')
+			delete body.temperature
+		}
 	}

 	if (modelName.startsWith('grok')) {
@@ -74,10 +81,12 @@ export function modelPatch(body: Record<string, any>) {
 			debug('Applying GPT-51 patch: disable reasoning')
 			body.reasoning_effort = 'none'
 		} else if (modelName.startsWith('gpt-54')) {
-			debug(
-				'Applying GPT-5.4 patch: skip reasoning_effort because chat/completions rejects it with function tools'
-			)
+			debug('Applying GPT-5.4 patch: remove reasoning_effort')
 			delete body.reasoning_effort
+		} else if (modelName.startsWith('gpt-55')) {
+			debug('Applying GPT-5.4 patch: remove reasoning_effort and temperature')
+			delete body.reasoning_effort
+			delete body.temperature
 		} else if (modelName.startsWith('gpt-5-mini')) {
 			debug('Applying GPT-5-mini patch: set reasoning effort to low, temperature to 1')
 			body.reasoning_effort = 'low'
@@ -93,6 +102,11 @@ export function modelPatch(body: Record<string, any>) {
 		body.reasoning_effort = 'minimal'
 	}

+	if (modelName.startsWith('deepseek')) {
+		debug('Applying DeepSeek patch: remove tool_choice')
+		delete body.tool_choice
+	}
+
 	if (modelName.startsWith('minimax')) {
 		debug('Applying MiniMax patch: clamp temperature to (0, 1]')
 		// MiniMax API rejects temperature = 0; clamp to a small positive value
@@ -1,9 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        // @workaround DTS bug
-        // dts do not work with monorepo path mapping
-        // disable path mapping for it
-        "paths": {}
-    }
-}
@@ -1,11 +1,7 @@
 {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
-        "baseUrl": ".",
-        "outDir": "dist"
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
    },
    "include": ["**/*.ts"],
    "exclude": ["dist", "node_modules"]
@@ -11,11 +11,18 @@ console.log(chalk.cyan(`📦 Building @page-agent/llms`))

 export default defineConfig({
 	clearScreen: false,
-	plugins: [dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true })],
+	plugins: [
+		dts({
+			bundleTypes: true,
+			compilerOptions: {
+				composite: true,
+				noEmit: false,
+				emitDeclarationOnly: true,
+				declaration: true,
+			},
+		}),
+	],
 	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/index.ts'),
@@ -36,11 +36,11 @@ Same format — add the config to the MCP settings of your client.

 ## MCP Tools

-| Tool           | Input              | Description                                          |
-| -------------- | ------------------ | ---------------------------------------------------- |
+| Tool           | Input              | Description                                           |
+| -------------- | ------------------ | ----------------------------------------------------- |
 | `execute_task` | `{ task: string }` | Execute a browser task in natural language. Blocking. |
-| `get_status`   | —                  | Returns `{ connected, busy }`                        |
-| `stop_task`    | —                  | Stop the currently running task.                     |
+| `get_status`   | —                  | Returns `{ connected, busy }`                         |
+| `stop_task`    | —                  | Stop the currently running task.                      |

 ## Environment Variables

@@ -88,7 +88,6 @@ src/
 ## Dev

 ```bash
-npm run build:libs
 npm run dev:ext
 npx @modelcontextprotocol/inspector node packages/mcp/src/index.js
 ```
@@ -1,7 +1,7 @@
 {
    "name": "@page-agent/mcp",
    "private": false,
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
    "bin": {
        "page-agent-mcp": "src/index.js"
@@ -30,6 +30,6 @@
    "dependencies": {
        "@modelcontextprotocol/sdk": "^1.29.0",
        "ws": "^8.20.0",
-        "zod": "^4.3.5"
+        "zod": "^4.3.6"
    }
 }
@@ -6,6 +6,7 @@ import { WebSocketServer } from 'ws'

 const EXT_ID = 'akldabonmimlicnjlflnapfeklbfemhj'
 const STORE_URL = `https://chromewebstore.google.com/detail/page-agent-ext/${EXT_ID}`
+const LOOPBACK_HOST = 'localhost'

 const launcherTemplate = readFileSync(
 	fileURLToPath(new URL('./launcher.html', import.meta.url)),
@@ -60,8 +61,8 @@ export class HubBridge {
 					reject(err)
 				}
 			})
-			this.#httpServer.listen(this.port, () => {
-				console.error(`[page-agent-mcp] HTTP + WS on http://localhost:${this.port}`)
+			this.#httpServer.listen(this.port, LOOPBACK_HOST, () => {
+				console.error(`[page-agent-mcp] HTTP + WS on http://${LOOPBACK_HOST}:${this.port}`)
 				resolve()
 			})
 		})
@@ -2,6 +2,7 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import { exec } from 'node:child_process'
+import { readFileSync } from 'node:fs'
 import { platform } from 'node:os'
 import * as z from 'zod/v4'

@@ -9,6 +10,7 @@ import { HubBridge } from './hub-bridge.js'

 const env = process.env
 const port = parseInt(env.PORT || '38401')
+const { version } = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'))

 /** @type {Record<string, string>} */
 const llmConfig = {}
@@ -30,7 +32,7 @@ exec(`${cmd} "${url}"`, (err) => {

 // --- MCP server (stdio) ---

-const mcpServer = new McpServer({ name: 'page-agent', version: '1.5.8' })
+const mcpServer = new McpServer({ name: 'page-agent', version })

 mcpServer.registerTool(
 	'execute_task',
@@ -3,7 +3,10 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="icon" href="https://img.alicdn.com/imgextra/i1/O1CN01mRGret1QrKiu7CFJI_!!6000000002029-2-tps-64-64.png" />
+		<link
+			rel="icon"
+			href="https://img.alicdn.com/imgextra/i1/O1CN01mRGret1QrKiu7CFJI_!!6000000002029-2-tps-64-64.png"
+		/>
 		<title>Page Agent MCP Launcher</title>
 		<style>
 			* {
@@ -172,16 +175,26 @@
 						If the extension is outdated, please update it to the latest version.
 					</li>
 					<li data-i18n="tip_other_browser">
-						If the extension is not installed in this browser, open this page from the
-						browser that has it installed.
+						If the extension is not installed in this browser, open this page from the browser that
+						has it installed.
 					</li>
 					<li data-i18n="tip_refresh">Refresh this page after installing or updating.</li>
 				</ul>
 			</div>

 			<div class="links">
-				<a href="https://alibaba.github.io/page-agent/docs/introduction/overview" target="_blank" data-i18n="link_docs">Docs</a>
-				<a href="https://github.com/alibaba/page-agent/issues" target="_blank" data-i18n="link_issues">Report an Issue</a>
+				<a
+					href="https://alibaba.github.io/page-agent/docs/introduction/overview"
+					target="_blank"
+					data-i18n="link_docs"
+					>Docs</a
+				>
+				<a
+					href="https://github.com/alibaba/page-agent/issues"
+					target="_blank"
+					data-i18n="link_issues"
+					>Report an Issue</a
+				>
 			</div>
 		</div>

@@ -197,8 +210,7 @@
 					install_sub: 'Page Agent 需要安装最新版浏览器插件才能运行。',
 					install_btn: '从 Chrome 应用商店安装',
 					tip_outdated: '如果插件版本过旧，请更新到最新版本。',
-					tip_other_browser:
-						'如果该浏览器中未安装插件，请从装有插件的浏览器打开此页面。',
+					tip_other_browser: '如果该浏览器中未安装插件，请从装有插件的浏览器打开此页面。',
 					tip_refresh: '安装或更新后，请刷新此页面。',
 					link_docs: '文档',
 					link_issues: '问题反馈',
@@ -220,13 +232,9 @@
 					if (!globalThis.chrome?.runtime?.sendMessage) {
 						showInstall()
 					} else {
-						chrome.runtime.sendMessage(
-							EXT_ID,
-							{ type: 'OPEN_HUB', wsPort },
-							(response) => {
-								if (chrome.runtime.lastError || !response?.ok) showInstall()
-							}
-						)
+						chrome.runtime.sendMessage(EXT_ID, { type: 'OPEN_HUB', wsPort }, (response) => {
+							if (chrome.runtime.lastError || !response?.ok) showInstall()
+						})
 					}
 				} catch {
 					showInstall()
@@ -1,16 +1,26 @@
 {
    "name": "page-agent",
    "private": false,
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
-    "main": "./dist/esm/page-agent.js",
-    "module": "./dist/esm/page-agent.js",
-    "types": "./dist/esm/PageAgent.d.ts",
+    "main": "./src/PageAgent.ts",
+    "types": "./src/PageAgent.ts",
    "exports": {
        ".": {
-            "types": "./dist/esm/PageAgent.d.ts",
-            "import": "./dist/esm/page-agent.js",
-            "default": "./dist/esm/page-agent.js"
+            "types": "./src/PageAgent.ts",
+            "default": "./src/PageAgent.ts"
+        }
+    },
+    "publishConfig": {
+        "main": "./dist/esm/page-agent.js",
+        "module": "./dist/esm/page-agent.js",
+        "types": "./dist/esm/PageAgent.d.ts",
+        "exports": {
+            ".": {
+                "types": "./dist/esm/PageAgent.d.ts",
+                "import": "./dist/esm/page-agent.js",
+                "default": "./dist/esm/page-agent.js"
+            }
        }
    },
    "files": [
@@ -40,20 +50,20 @@
        "build": "vite build && npm run build:demo",
        "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\"",
-        "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{}})\""
+        "prepublishOnly": "node ../../scripts/pre-publish.js",
+        "postpublish": "node ../../scripts/post-publish.js"
    },
    "dependencies": {
-        "@page-agent/core": "1.7.1",
-        "@page-agent/llms": "1.7.1",
-        "@page-agent/page-controller": "1.7.1",
-        "@page-agent/ui": "1.7.1",
+        "@page-agent/core": "1.8.1",
+        "@page-agent/llms": "1.8.1",
+        "@page-agent/page-controller": "1.8.1",
+        "@page-agent/ui": "1.8.1",
        "chalk": "^5.6.2"
    },
    "peerDependencies": {
        "zod": "^3.25.0 || ^4.0.0"
    },
    "devDependencies": {
-        "zod": "^4.3.5"
+        "zod": "^4.3.6"
    }
 }
@@ -1,9 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        // @workaround DTS bug
-        // dts do not work with monorepo path mapping
-        // disable path mapping for it
-        "paths": {}
-    }
-}
@@ -1,26 +1,8 @@
 {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
-        "baseUrl": ".",
-        "outDir": "dist",
-        "paths": {
-            //
-            "@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"]
-        }
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
    },
-    "include": ["**/*.ts"],
-    "exclude": ["dist", "node_modules"],
-    "references": [
-        //
-        { "path": "../llms" },
-        { "path": "../page-controller" },
-        { "path": "../core" },
-        { "path": "../ui" }
-    ]
+    "include": ["src/**/*.ts"],
+    "exclude": ["dist", "node_modules"]
 }
@@ -11,13 +11,18 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 export default defineConfig({
 	clearScreen: false,
 	plugins: [
-		dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true }),
+		dts({
+			bundleTypes: true,
+			compilerOptions: {
+				composite: true,
+				noEmit: false,
+				emitDeclarationOnly: true,
+				declaration: true,
+			},
+		}),
 		cssInjectedByJsPlugin({ relativeCSSInjection: true }),
 	],
 	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/PageAgent.ts'),
@@ -21,17 +21,6 @@ export default defineConfig(() => ({
 		// analyzer()
 	],
 	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
-	resolve: {
-		alias: {
-			'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
-			'@page-agent/llms': resolve(__dirname, '../llms/src/index.ts'),
-			'@page-agent/core': resolve(__dirname, '../core/src/PageAgentCore.ts'),
-			'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
-		},
-	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/demo.ts'),
@@ -1,15 +1,25 @@
 {
    "name": "@page-agent/page-controller",
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
-    "main": "./dist/lib/page-controller.js",
-    "module": "./dist/lib/page-controller.js",
-    "types": "./dist/lib/PageController.d.ts",
+    "main": "./src/PageController.ts",
+    "types": "./src/PageController.ts",
    "exports": {
        ".": {
-            "types": "./dist/lib/PageController.d.ts",
-            "import": "./dist/lib/page-controller.js",
-            "default": "./dist/lib/page-controller.js"
+            "types": "./src/PageController.ts",
+            "default": "./src/PageController.ts"
+        }
+    },
+    "publishConfig": {
+        "main": "./dist/lib/page-controller.js",
+        "module": "./dist/lib/page-controller.js",
+        "types": "./dist/lib/PageController.d.ts",
+        "exports": {
+            ".": {
+                "types": "./dist/lib/PageController.d.ts",
+                "import": "./dist/lib/page-controller.js",
+                "default": "./dist/lib/page-controller.js"
+            }
        }
    },
    "files": [
@@ -32,8 +42,8 @@
    "homepage": "https://alibaba.github.io/page-agent/",
    "scripts": {
        "build": "vite build",
-        "prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
-        "postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
+        "prepublishOnly": "node ../../scripts/pre-publish.js",
+        "postpublish": "node ../../scripts/post-publish.js"
    },
    "dependencies": {
        "ai-motion": "^0.4.8"
@@ -185,7 +185,7 @@ export class PageController extends EventTarget {

 		const blacklist = [
 			...(this.config.interactiveBlacklist || []),
-			...document.querySelectorAll('[data-page-agent-not-interactive]').values(),
+			...Array.from(document.querySelectorAll('[data-page-agent-not-interactive]')),
 		]

 		this.flatTree = dom.getFlatTree({
@@ -0,0 +1,16 @@
+import type { FlatDomTree } from './type'
+
+interface DomTreeArgs {
+	doHighlightElements?: boolean
+	focusHighlightIndex?: number
+	viewportExpansion?: number
+	debugMode?: boolean
+	interactiveBlacklist?: Element[]
+	interactiveWhitelist?: Element[]
+	highlightOpacity?: number
+	highlightLabelOpacity?: number
+}
+
+declare const domTree: (args?: DomTreeArgs) => FlatDomTree
+
+export default domTree
@@ -10,6 +10,8 @@ export class SimulatorMask extends EventTarget {
 	wrapper = document.createElement('div')
 	motion: Motion | null = null

+	#disposed = false
+
 	#cursor = document.createElement('div')

 	#currentCursorX = 0
@@ -129,6 +131,8 @@ export class SimulatorMask extends EventTarget {
 	}

 	#moveCursorToTarget() {
+		if (this.#disposed) return
+
 		const newX = this.#currentCursorX + (this.#targetCursorX - this.#currentCursorX) * 0.2
 		const newY = this.#currentCursorY + (this.#targetCursorY - this.#currentCursorY) * 0.2

@@ -156,11 +160,15 @@ export class SimulatorMask extends EventTarget {
 	}

 	setCursorPosition(x: number, y: number) {
+		if (this.#disposed) return
+
 		this.#targetCursorX = x
 		this.#targetCursorY = y
 	}

 	triggerClickAnimation() {
+		if (this.#disposed) return
+
 		this.#cursor.classList.remove(cursorStyles.clicking)
 		// Force reflow to restart animation
 		void this.#cursor.offsetHeight
@@ -168,7 +176,7 @@ export class SimulatorMask extends EventTarget {
 	}

 	show() {
-		if (this.shown) return
+		if (this.shown || this.#disposed) return

 		this.shown = true
 		this.motion?.start()
@@ -186,7 +194,7 @@ export class SimulatorMask extends EventTarget {
 	}

 	hide() {
-		if (!this.shown) return
+		if (!this.shown || this.#disposed) return

 		this.shown = false
 		this.motion?.fadeOut()
@@ -200,6 +208,7 @@ export class SimulatorMask extends EventTarget {
 	}

 	dispose() {
+		this.#disposed = true
 		console.log('dispose SimulatorMask')
 		this.motion?.dispose()
 		this.wrapper.remove()
@@ -1,9 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        // @workaround DTS bug
-        // dts do not work with monorepo path mapping
-        // disable path mapping for it
-        "paths": {}
-    }
-}
@@ -1,11 +1,7 @@
 {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
-        "baseUrl": ".",
-        "outDir": "dist"
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
    },
    "include": ["**/*.ts", "**/*.js"],
    "exclude": ["dist", "node_modules"]
@@ -13,13 +13,18 @@ console.log(chalk.cyan(`📦 Building @page-agent/page-controller`))
 export default defineConfig({
 	clearScreen: false,
 	plugins: [
-		dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true }),
+		dts({
+			bundleTypes: true,
+			compilerOptions: {
+				composite: true,
+				noEmit: false,
+				emitDeclarationOnly: true,
+				declaration: true,
+			},
+		}),
 		cssInjectedByJsPlugin({ relativeCSSInjection: true }),
 	],
 	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/PageController.ts'),
@@ -1,15 +1,25 @@
 {
    "name": "@page-agent/ui",
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
-    "main": "./dist/lib/page-agent-ui.js",
-    "module": "./dist/lib/page-agent-ui.js",
-    "types": "./dist/lib/index.d.ts",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
    "exports": {
        ".": {
-            "types": "./dist/lib/index.d.ts",
-            "import": "./dist/lib/page-agent-ui.js",
-            "default": "./dist/lib/page-agent-ui.js"
+            "types": "./src/index.ts",
+            "default": "./src/index.ts"
+        }
+    },
+    "publishConfig": {
+        "main": "./dist/lib/page-agent-ui.js",
+        "module": "./dist/lib/page-agent-ui.js",
+        "types": "./dist/lib/index.d.ts",
+        "exports": {
+            ".": {
+                "types": "./dist/lib/index.d.ts",
+                "import": "./dist/lib/page-agent-ui.js",
+                "default": "./dist/lib/page-agent-ui.js"
+            }
        }
    },
    "files": [
@@ -32,7 +42,7 @@
    "homepage": "https://alibaba.github.io/page-agent/",
    "scripts": {
        "build": "vite build",
-        "prepublishOnly": "node -e \"const fs=require('fs');['LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
-        "postpublish": "node -e \"['LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
+        "prepublishOnly": "node ../../scripts/pre-publish.js",
+        "postpublish": "node ../../scripts/post-publish.js"
    }
 }
@@ -291,7 +291,7 @@
 		transition: max-height 0.2s;

 		.expanded & {
-			max-height: 400px;
+			max-height: min(500px, calc(100vh - 200px - var(--height)));
 		}

 		.historyItem {
@@ -1,9 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-        // @workaround DTS bug
-        // dts do not work with monorepo path mapping
-        // disable path mapping for it
-        "paths": {}
-    }
-}
@@ -1,11 +1,7 @@
 {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
-        "baseUrl": ".",
-        "outDir": "dist"
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
    },
    "include": ["**/*.ts", "**/*.js"],
    "exclude": ["dist", "node_modules"]
@@ -13,13 +13,18 @@ console.log(chalk.cyan(`📦 Building @page-agent/ui`))
 export default defineConfig({
 	clearScreen: false,
 	plugins: [
-		dts({ tsconfigPath: './tsconfig.dts.json', bundleTypes: true }),
+		dts({
+			bundleTypes: true,
+			compilerOptions: {
+				composite: true,
+				noEmit: false,
+				emitDeclarationOnly: true,
+				declaration: true,
+			},
+		}),
 		cssInjectedByJsPlugin({ relativeCSSInjection: true }),
 	],
 	publicDir: false,
-	esbuild: {
-		keepNames: true,
-	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'src/index.ts'),
@@ -49,10 +49,34 @@
 			<div id="sk">
 				<p class="sk-text" id="sk-text">Loading...</p>
 				<style>
-					#sk{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#eff6ff,#f5f3ff)}
-					@media(prefers-color-scheme:dark){#sk{background:linear-gradient(135deg,#111827,#1f2937)}}
-					.sk-text{font:400 14px/1 system-ui,sans-serif;color:#94a3b8;animation:skf 2s ease-in-out infinite}
-					@keyframes skf{0%,100%{opacity:.6}50%{opacity:.3}}
+					#sk {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						min-height: 100vh;
+						background: linear-gradient(135deg, #eff6ff, #f5f3ff);
+					}
+					@media (prefers-color-scheme: dark) {
+						#sk {
+							background: linear-gradient(135deg, #111827, #1f2937);
+						}
+					}
+					.sk-text {
+						font:
+							400 14px/1 system-ui,
+							sans-serif;
+						color: #94a3b8;
+						animation: skf 2s ease-in-out infinite;
+					}
+					@keyframes skf {
+						0%,
+						100% {
+							opacity: 0.6;
+						}
+						50% {
+							opacity: 0.3;
+						}
+					}
 				</style>
 			</div>
 		</div>
@@ -1,13 +1,12 @@
 {
    "name": "@page-agent/website",
    "private": true,
-    "version": "1.7.1",
+    "version": "1.8.1",
    "type": "module",
    "scripts": {
        "dev": "vite --host 0.0.0.0",
        "build:website": "vite build",
-        "preview": "vite preview",
-        "typecheck": "tsc --noEmit"
+        "preview": "vite preview"
    },
    "devDependencies": {
        "@radix-ui/react-icons": "^1.3.2",
@@ -16,19 +15,19 @@
        "@radix-ui/react-switch": "^1.2.6",
        "@radix-ui/react-tooltip": "^1.2.8",
        "@types/react": "^19.2.14",
-        "@types/react-dom": "^19.2.1",
+        "@types/react-dom": "^19.2.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
-        "lucide-react": "^1.7.0",
+        "lucide-react": "^1.8.0",
        "motion": "^12.38.0",
        "next-themes": "^0.4.6",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
+        "react": "^19.2.5",
+        "react-dom": "^19.2.5",
        "rough-notation": "^0.5.1",
-        "simple-icons": "^16.14.0",
+        "simple-icons": "^16.16.0",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.5.0",
-        "tailwindcss": "^4.1.14",
+        "tailwindcss": "^4.2.2",
        "tw-animate-css": "^1.4.0",
        "wouter": "^3.9.0"
    }
@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, useEffect, useRef } from 'react'

 import { cn } from '@/lib/utils'

-type Level = 2 | 3
+type Level = 2 | 3 | 4

 interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h2'>, 'children'> {
 	id: string
@@ -11,8 +11,9 @@ interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h2'>, 'children'>
 }

 const levelStyles = {
-	2: { tag: 'h2', className: 'text-2xl font-semibold mb-4' },
-	3: { tag: 'h3', className: 'text-xl font-semibold mb-3' },
+	2: { tag: 'h2', className: 'text-3xl font-semibold mb-4' },
+	3: { tag: 'h3', className: 'text-[1.375rem] font-semibold mb-3' },
+	4: { tag: 'h4', className: 'text-[1.0625rem] font-medium mb-2' },
 } as const

 export function Heading({ id, level = 2, className, children, ...props }: HeadingProps) {
@@ -169,7 +169,6 @@ function highlightSyntax(code: string): string {
 const HighlightSyntaxClient: React.FC<HighlightSyntaxProps> = ({ code }) => {
 	const htmlContent = highlightSyntax(code)

-	// eslint-disable-next-line react-dom/no-dangerously-set-innerhtml
 	return <code className={styles.syntax} dangerouslySetInnerHTML={{ __html: htmlContent }} />
 }

@@ -140,6 +140,7 @@ function JSConsole({
 	// 全局console拦截处理
 	useEffect(() => {
 		const interceptor = ConsoleInterceptor.getInstance()
+		let scrollTimer: ReturnType<typeof setTimeout>

 		const handleGlobalConsole = (type: string, args: unknown[]) => {
 			const content = args.map((arg) => formatResult(arg)).join(' ')
@@ -152,8 +153,8 @@ function JSConsole({

 			setOutputs((prev) => [...prev, outputItem])

-			// 自动滚动到底部
-			setTimeout(() => {
+			clearTimeout(scrollTimer)
+			scrollTimer = setTimeout(() => {
 				if (outputRef.current) {
 					outputRef.current.scrollTop = outputRef.current.scrollHeight
 				}
@@ -164,6 +165,7 @@ function JSConsole({

 		return () => {
 			interceptor.unsubscribe(handleGlobalConsole)
+			clearTimeout(scrollTimer)
 		}
 	}, [])

@@ -1,8 +1,8 @@
 // Demo build (auto-init with demo LLM, for quick testing)
 export const CDN_DEMO_URL =
-	'https://cdn.jsdelivr.net/npm/page-agent@1.7.1/dist/iife/page-agent.demo.js'
+	'https://cdn.jsdelivr.net/npm/page-agent@1.8.1/dist/iife/page-agent.demo.js'
 export const CDN_DEMO_CN_URL =
-	'https://registry.npmmirror.com/page-agent/1.7.1/files/dist/iife/page-agent.demo.js'
+	'https://registry.npmmirror.com/page-agent/1.8.1/files/dist/iife/page-agent.demo.js'

 // Demo LLM for website testing (homepage quick trial uses flash)
 export const DEMO_MODEL = 'qwen3.5-flash'
@@ -9,25 +9,24 @@ const LanguageContext = createContext<{
 } | null>(null)

 export function LanguageProvider({ children }: { children: ReactNode }) {
-	const [language, setLang] = useState<Lang>(() => {
+	const [language, setLanguage] = 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)
+	const switchLanguage = (lang: Lang) => {
+		setLanguage(lang)
 		localStorage.setItem('language', lang)
 	}

 	return (
-		<LanguageContext value={{ language, isZh: language === 'zh-CN', setLanguage }}>
+		<LanguageContext value={{ language, isZh: language === 'zh-CN', setLanguage: switchLanguage }}>
 			{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')
@@ -95,7 +95,7 @@ body {
 	line-height: 1.6;
 }

-/* 标题使用中等字重（相对细体更重，但比默认 bold 更轻） */
+/* 文档标题层级需要比正文标题更清晰，避免 h2/h3/h4 视觉差异过小。 */
 .prose h1,
 .prose h2,
 .prose h3,
@@ -103,6 +103,33 @@ body {
 .prose h5,
 .prose h6 {
 	font-weight: 480;
+	line-height: 1.25;
+	letter-spacing: -0.015em;
+}
+
+.prose h2[id] {
+	margin-bottom: 1rem;
+	padding-bottom: 0.45rem;
+	border-bottom: 1px solid rgba(23, 23, 23, 0.12);
+	font-size: 1.875rem;
+	font-weight: 650;
+}
+
+.prose h3[id] {
+	margin-bottom: 0.75rem;
+	font-size: 1.375rem;
+	font-weight: 600;
+}
+
+.prose h4[id] {
+	margin-bottom: 0.5rem;
+	font-size: 1.0625rem;
+	font-weight: 560;
+	letter-spacing: -0.005em;
+}
+
+.dark .prose h2[id] {
+	border-bottom-color: rgba(255, 255, 255, 0.14);
 }

 /* strong/b 也用中等字重 */
@@ -156,6 +156,34 @@ const result = await agent.execute('Fill in the form with test data')`}
 							defaultValue: '3',
 							description: isZh ? 'API 调用失败时的最大重试次数' : 'Maximum retries on API failure',
 						},
+						{
+							name: 'transformRequestBody',
+							type: '(requestBody) => Record<string, unknown> | undefined',
+							description: isZh ? (
+								<>
+									在请求发送前转换最终 request body。可用于处理供应商特定的缓存提示或私有参数。查看{' '}
+									<Link
+										href="/features/models#prompt-caching"
+										className="text-blue-600 dark:text-blue-400 hover:underline"
+									>
+										主动缓存示例
+									</Link>
+									。
+								</>
+							) : (
+								<>
+									Transform the final request body before sending it. Useful for provider-specific
+									cache hints or private request parameters. See{' '}
+									<Link
+										href="/features/models#prompt-caching"
+										className="text-blue-600 dark:text-blue-400 hover:underline"
+									>
+										prompt caching examples
+									</Link>
+									.
+								</>
+							),
+						},
 						{
 							name: 'disableNamedToolChoice',
 							type: 'boolean',
@@ -1,4 +1,5 @@
 import { Fragment } from 'react'
+import { Link } from 'wouter'

 import CodeEditor from '@/components/CodeEditor'
 import { Heading } from '@/components/Heading'
@@ -6,9 +7,10 @@ import { useLanguage } from '@/i18n/context'

 const BASELINE = new Set([
 	'gpt-5.1',
+	'gpt-5.4-mini',
 	'claude-haiku-4.5',
-	'gemini-3-flash',
-	'deepseek-3.2',
+	'gemini-3.1-flash-lite',
+	'deepseek-v4-flash',
 	'qwen3.5-plus',
 	'qwen3.5-flash',
 ])
@@ -16,17 +18,31 @@ const BASELINE = new Set([
 // Models grouped by brand, newest first
 const MODEL_GROUPS: Record<string, string[]> = {
 	Qwen: [
+		'qwen3.6-max',
 		'qwen3.6-plus',
+		'qwen3.6-flash',
 		'qwen3.5-plus',
 		'qwen3.5-flash',
 		'qwen3-coder-next',
 		'qwen-3-max',
 		'qwen-3-plus',
 	],
-	OpenAI: ['gpt-5.4', 'gpt-5.2', 'gpt-5.1', 'gpt-5', 'gpt-5-mini', 'gpt-4.1', 'gpt-4.1-mini'],
-	DeepSeek: ['deepseek-3.2'],
-	Google: ['gemini-3-pro', 'gemini-3-flash', 'gemini-2.5'],
+	OpenAI: [
+		'gpt-5.5',
+		'gpt-5.4',
+		'gpt-5.4-mini',
+		'gpt-5.4-nano',
+		'gpt-5.2',
+		'gpt-5.1',
+		'gpt-5',
+		'gpt-5-mini',
+		'gpt-4.1',
+		'gpt-4.1-mini',
+	],
+	DeepSeek: ['deepseek-v4-pro', 'deepseek-v4-flash', 'deepseek-3.2'],
+	Google: ['gemini-3.1-flash-lite', 'gemini-3-pro', 'gemini-3-flash', 'gemini-2.5'],
 	Anthropic: [
+		'claude-opus-4.7',
 		'claude-opus-4.6',
 		'claude-opus-4.5',
 		'claude-sonnet-4.5',
@@ -124,46 +140,6 @@ const pageAgent = new PageAgent({
 				/>
 			</section>

-			<section className="mb-10">
-				<Heading id="production-authentication" className="text-2xl font-semibold mb-4">
-					{isZh ? '🔐 生产环境鉴权' : '🔐 Production Authentication'}
-				</Heading>
-				<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-					{isZh
-						? '如果你只是将它用作个人助手，可以直接连接你的 LLM 服务。'
-						: 'If you only use it as a personal assistant, you can connect to your LLM service directly.'}
-				</p>
-				<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-					{isZh ? (
-						<>
-							如果你计划将它集成到你的 Web 应用中，建议搭建一个后端代理来转发 LLM 请求，并使用{' '}
-							<code>customFetch</code> 携带 Cookie 或其他鉴权信息：
-						</>
-					) : (
-						<>
-							If you plan to integrate it into your web app, it's better to have a backend proxy for
-							the LLM and use <code>customFetch</code> to authenticate the request with cookies or
-							other methods:
-						</>
-					)}
-				</p>
-				<CodeEditor
-					code={`const agent = new PageAgent({
-  baseURL: '/api/llm-proxy',
-  model: 'gpt-5.1',
-  customFetch: (url, init) =>
-    fetch(url, { ...init, credentials: 'include' }),
-});`}
-				/>
-				<div className="mt-4 bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-4 rounded-r-lg">
-					<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
-						{isZh
-							? '⚠️ 永远不要把真实的 LLM API Key 提交到前端代码中'
-							: '⚠️ NEVER commit real LLM API keys to your frontend code'}
-					</p>
-				</div>
-			</section>
-
 			<section className="mb-10">
 				<Heading id="free-testing-api">{isZh ? '免费测试接口' : 'Free Testing API'}</Heading>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
@@ -213,7 +189,139 @@ LLM_MODEL_NAME="qwen3.5-plus"`}
 			</section>

 			<section className="mb-10">
-				<Heading id="local-runtimes">{isZh ? '本地运行时' : 'Local Runtimes'}</Heading>
+				<Heading id="production-authentication" className="text-2xl font-semibold mb-4">
+					{isZh ? '🔐 生产环境鉴权' : '🔐 Production Authentication'}
+				</Heading>
+				<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+					{isZh
+						? '如果你只是将它用作个人助手，可以直接连接你的 LLM 服务。'
+						: 'If you only use it as a personal assistant, you can connect to your LLM service directly.'}
+				</p>
+				<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+					{isZh ? (
+						<>
+							如果你计划将它集成到你的 Web 应用中，建议搭建一个后端代理来转发 LLM 请求，并使用{' '}
+							<code>customFetch</code> 携带 Cookie 或其他鉴权信息：
+						</>
+					) : (
+						<>
+							If you plan to integrate it into your web app, it's better to have a backend proxy for
+							the LLM and use <code>customFetch</code> to authenticate the request with cookies or
+							other methods:
+						</>
+					)}
+				</p>
+				<CodeEditor
+					code={`const agent = new PageAgent({
+  baseURL: '/api/llm-proxy',
+  model: 'gpt-5.1',
+  customFetch: (url, init) =>
+    fetch(url, { ...init, credentials: 'include' }),
+});`}
+				/>
+				<div className="mt-4 bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-4 rounded-r-lg">
+					<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
+						{isZh
+							? '⚠️ 永远不要把真实的 LLM API Key 提交到前端代码中'
+							: '⚠️ NEVER commit real LLM API keys to your frontend code'}
+					</p>
+				</div>
+			</section>
+
+			<section className="mb-10">
+				<Heading id="prompt-caching">{isZh ? '主动缓存' : 'Prompt Caching'}</Heading>
+				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+					{isZh ? (
+						<>
+							一些 LLM 能从主动缓存中受益很多。由于各个供应商的主动缓存接口不同，推荐使用{' '}
+							<Link
+								href="/advanced/page-agent-core#configuration"
+								className="text-blue-600 dark:text-blue-400 hover:underline"
+							>
+								transformRequestBody
+							</Link>{' '}
+							为你的模型供应商配置缓存提示。
+						</>
+					) : (
+						<>
+							Some LLMs benefit significantly from prompt caching. Because each provider exposes
+							caching differently, use{' '}
+							<Link
+								href="/advanced/page-agent-core#configuration"
+								className="text-blue-600 dark:text-blue-400 hover:underline"
+							>
+								transformRequestBody
+							</Link>{' '}
+							to add provider-specific cache hints.
+						</>
+					)}
+				</p>
+
+				<div className="space-y-6">
+					<section>
+						<Heading id="prompt-caching-claude" level={3}>
+							Claude
+						</Heading>
+						<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+							{isZh
+								? 'Claude 支持全局 Automatic prompt caching。使用兼容 Claude 的代理时，只需要在请求体顶层添加 cache_control。'
+								: 'Claude supports global Automatic prompt caching. When using a Claude-compatible proxy, add cache_control at the top level of the request body.'}
+						</p>
+						<CodeEditor
+							language="typescript"
+							code={`const pageAgent = new PageAgent({
+  baseURL: 'https://your-claude-proxy.example/v1',
+  apiKey: 'your-api-key',
+  model: 'claude-sonnet-4.5',
+  transformRequestBody: (requestBody) => ({
+    ...requestBody,
+    cache_control: { type: 'ephemeral' },
+  }),
+});`}
+						/>
+					</section>
+					<section>
+						<Heading id="prompt-caching-qwen" level={3}>
+							{isZh ? '阿里云百炼 Qwen' : 'Alibaba Cloud Bailian Qwen'}
+						</Heading>
+						<CodeEditor
+							language="typescript"
+							code={`const pageAgent = new PageAgent({
+  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+  apiKey: 'your-api-key',
+  model: 'qwen3.5-plus',
+  transformRequestBody: (requestBody) => {
+    const [systemMessage, ...restMessages] = requestBody.messages
+
+    if (systemMessage.role !== 'system' || typeof systemMessage.content !== 'string') {
+      return requestBody
+    }
+
+    return {
+      ...requestBody,
+      messages: [
+        {
+          ...systemMessage,
+          content: [
+            {
+              type: 'text',
+              text: systemMessage.content,
+              cache_control: { type: 'ephemeral' },
+            },
+          ],
+        },
+        ...restMessages,
+      ],
+    }
+  },
+});`}
+						/>
+					</section>
+				</div>
+			</section>
+
+			<section className="mb-10">
+				<Heading id="local-runtimes">{isZh ? '本地 LLMs' : 'Local LLMs'}</Heading>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
 					{isZh
 						? '通过 Ollama、LM Studio 等本地 OpenAI-compatible 运行时接入 PageAgent，实现离线或局域网部署。'
@@ -103,25 +103,25 @@ function FormatErrorsContent(isZh: boolean) {
 						<>
 							如果以上步骤无法解决问题，欢迎在{' '}
 							<a
-								href="https://github.com/alibaba/page-agent/discussions"
+								href="https://github.com/alibaba/page-agent/issues"
 								target="_blank"
 								rel="noopener noreferrer"
 								className="text-blue-600 dark:text-blue-400 underline underline-offset-2"
 							>
-								GitHub Discussions
+								GitHub Issues
 							</a>{' '}
 							中反馈，附上模型名称和错误信息。
 						</>
 					) : (
 						<>
-							If the above steps don't help, join the{' '}
+							If the above steps don't help, open a{' '}
 							<a
-								href="https://github.com/alibaba/page-agent/discussions"
+								href="https://github.com/alibaba/page-agent/issues"
 								target="_blank"
 								rel="noopener noreferrer"
 								className="text-blue-600 dark:text-blue-400 underline underline-offset-2"
 							>
-								GitHub Discussions
+								GitHub Issue
 							</a>{' '}
 							with your model name and error details.
 						</>
@@ -1,4 +1,3 @@
-/* eslint-disable react-dom/no-dangerously-set-innerhtml */
 import type { PageAgent as PageAgentType } from 'page-agent'
 import { useEffect, useState } from 'react'
 import { Link, useSearchParams } from 'wouter'
@@ -46,10 +45,11 @@ export default function HeroSection() {
 		: 'Goto docs in navigation bar, find Quick-Start section, and summarize in markdown'

 	const [task, setTask] = useState(() => defaultTask)
-
-	useEffect(() => {
+	const [prevDefaultTask, setPrevDefaultTask] = useState(defaultTask)
+	if (prevDefaultTask !== defaultTask) {
+		setPrevDefaultTask(defaultTask)
 		setTask(defaultTask)
-	}, [defaultTask])
+	}

 	const [params] = useSearchParams()
 	const isOther = params.has('try_other')
@@ -77,9 +77,7 @@ export default function HeroSection() {
 				instructions: {
 					system: 'You are a helpful assistant on PageAgent website.',
 					getPageInstructions: (url: string) => {
-						const hint = url.includes('page-agent') ? 'This is PageAgent demo page.' : undefined
-						console.log('[instructions] getPageInstructions:', url, '->', hint)
-						return hint
+						return url.includes('page-agent') ? 'This is PageAgent demo page.' : undefined
 					},
 				},

@@ -98,8 +96,7 @@ export default function HeroSection() {
 			})
 		}

-		const result = await win.pageAgent.execute(task)
-		console.log(result)
+		await win.pageAgent.execute(task)
 	}

 	return (
@@ -18,10 +18,12 @@ function ScrollToTop() {

 export default function Router() {
 	useEffect(() => {
-		const schedule = globalThis.requestIdleCallback ?? ((cb: () => void) => setTimeout(cb, 1))
-		const cancel = globalThis.cancelIdleCallback ?? clearTimeout
-		const id = schedule(() => docsImport())
-		return () => cancel(id)
+		if ('requestIdleCallback' in globalThis) {
+			const id = requestIdleCallback(() => docsImport())
+			return () => cancelIdleCallback(id)
+		}
+		const id = setTimeout(() => docsImport(), 1)
+		return () => clearTimeout(id)
 	}, [])

 	return (
@@ -2,31 +2,10 @@
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        "noEmit": false,
-        "allowImportingTsExtensions": false,
-        "baseUrl": ".",
-        "outDir": "dist",
        "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"],
-
-            "page-agent": ["../page-agent/src/PageAgent.ts"]
+            "@/*": ["./src/*"]
        }
    },
-    "include": ["**/*.ts", "**/*.tsx"],
-    "exclude": ["dist", "node_modules"],
-    "references": [
-        //
-        { "path": "../llms" },
-        { "path": "../page-controller" },
-        { "path": "../core" },
-        { "path": "../ui" },
-
-        { "path": "../page-agent" }
-    ]
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["dist", "node_modules"]
 }
@@ -90,16 +90,7 @@ export default defineConfig(({ mode }) => ({
 	},
 	resolve: {
 		alias: {
-			// Self root
 			'@': resolve(__dirname, 'src'),
-
-			// Monorepo packages (always bundle local code instead of npm versions)
-			'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
-			'@page-agent/llms': resolve(__dirname, '../llms/src/index.ts'),
-			'@page-agent/core': resolve(__dirname, '../core/src/PageAgentCore.ts'),
-			'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
-
-			'page-agent': resolve(__dirname, '../page-agent/src/PageAgent.ts'),
 		},
 	},
 	define: {
@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+/**
+ * Equivalent to: npm run build --workspaces --if-present
+ *
+ * Reads the workspace list from root package.json, filters to those with a
+ * "build" script, and runs them all concurrently via parallelTask.
+ */
+import { readFileSync } from 'fs'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
+import { parallelTask } from './parallel-task.js'
+
+const rootDir = join(dirname(fileURLToPath(import.meta.url)), '..')
+const rootPkg = JSON.parse(readFileSync(join(rootDir, 'package.json'), 'utf-8'))
+
+const tasks = rootPkg.workspaces
+	.map((ws) => {
+		const dir = join(rootDir, ws)
+		const pkg = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'))
+		return pkg.scripts?.build ? { label: pkg.name, command: 'npm run build', cwd: dir } : null
+	})
+	.filter(Boolean)
+
+await parallelTask(tasks, { timeoutMs: 120_000 })
@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+/**
+ * Full build pipeline. Equivalent to:
+ *   npm run cleanup && npm run build --workspaces --if-present
+ *                    && npm run build:website -w @page-agent/website
+ *                    && npm run zip -w @page-agent/ext
+ *
+ * 1. cleanup
+ * 2. build everything in parallel (libs + website + extension)
+ */
+import chalk from 'chalk'
+import { execSync } from 'child_process'
+import { readFileSync } from 'fs'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
+import { parallelTask } from './parallel-task.js'
+
+const rootDir = join(dirname(fileURLToPath(import.meta.url)), '..')
+const rootPkg = JSON.parse(readFileSync(join(rootDir, 'package.json'), 'utf-8'))
+
+// Step 1: cleanup
+console.log(chalk.bgBlue.white.bold(' ▸ cleanup '))
+execSync('npm run cleanup', { cwd: rootDir, stdio: 'inherit' })
+
+// Step 2: build all in parallel
+console.log(chalk.bgBlue.white.bold(' ▸ build '))
+const tasks = rootPkg.workspaces
+	.map((ws) => {
+		const dir = join(rootDir, ws)
+		const pkg = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'))
+		return pkg.scripts?.build ? { label: pkg.name, command: 'npm run build', cwd: dir } : null
+	})
+	.filter(Boolean)
+
+tasks.push(
+	{
+		label: '@page-agent/website',
+		command: 'npm run build:website',
+		cwd: join(rootDir, 'packages/website'),
+	},
+	{ label: '@page-agent/ext', command: 'npm run zip', cwd: join(rootDir, 'packages/extension') }
+)
+
+await parallelTask(tasks, { timeoutMs: 120_000 })
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+/**
+ * CI check script. Run locally before commit or in GitHub Actions.
+ *
+ * Usage:
+ *   node scripts/ci.js            # run all checks
+ *   node scripts/ci.js --no-build # skip build step
+ */
+import chalk from 'chalk'
+import { execSync } from 'child_process'
+
+import { parallelTask } from './parallel-task.js'
+
+const args = new Set(process.argv.slice(2))
+const skipBuild = args.has('--no-build')
+
+function run(label, command) {
+	console.log(chalk.bgBlue.white.bold(` ▸ ${label} `))
+	execSync(command, { stdio: 'inherit' })
+}
+
+function isMainBranch() {
+	if (process.env.GITHUB_REF) return process.env.GITHUB_REF === 'refs/heads/main'
+	try {
+		return execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf-8' }).trim() === 'main'
+	} catch {
+		return true
+	}
+}
+
+// 1. Commitlint — skip on main
+if (isMainBranch()) {
+	console.log(chalk.dim(' ▸ commitlint (skipped on main)'))
+} else {
+	const from = execSync('git merge-base origin/main HEAD', { encoding: 'utf-8' }).trim()
+	run('commitlint', `npx commitlint --from ${from} --to HEAD`)
+}
+
+// 2. Lint + Format + Typecheck in parallel
+console.log(chalk.bgBlue.white.bold(' ▸ lint + format + typecheck '))
+await parallelTask(
+	[
+		{ label: 'lint', command: 'npm run lint' },
+		{ label: 'format', command: 'npx prettier --check .' },
+		{ label: 'typecheck', command: 'npm run typecheck' },
+	],
+	{ timeoutMs: 120_000 }
+)
+
+// 3. Build
+if (skipBuild) {
+	console.log(chalk.dim(' ▸ build (skipped)'))
+} else {
+	run('build', 'npm run build')
+}
@@ -0,0 +1,115 @@
+import chalk from 'chalk'
+import { spawn } from 'child_process'
+
+/**
+ * Run multiple shell commands in parallel with progress reporting.
+ *
+ * @param {{ label: string, command: string, cwd?: string }[]} tasks
+ * @param {{ timeoutMs?: number }} options - Default timeout 30s per task
+ * @returns {Promise<void>} Rejects (process.exit) if any task fails
+ */
+export async function parallelTask(tasks, options = {}) {
+	const { timeoutMs = 30_000 } = options
+	const total = tasks.length
+
+	const bgColors = [
+		chalk.bgCyan,
+		chalk.bgMagenta,
+		chalk.bgBlue,
+		chalk.bgYellow,
+		chalk.bgGreenBright,
+	]
+	const fgOnBg = [chalk.black, chalk.white, chalk.white, chalk.black, chalk.black]
+
+	let done = 0
+	let failed = 0
+
+	const spinner = ['◐', '◓', '◑', '◒']
+	let tick = 0
+
+	const printProgress = () => {
+		const running = total - done - failed
+		const s = spinner[tick++ % spinner.length]
+		const status = failed
+			? `${running} running, ${done} done, ${chalk.bgRed.white.bold(` ${failed} failed `)}`
+			: `${running} running, ${done} done`
+		process.stderr.write(`\r${chalk.bgCyan.black.bold(` ${s} ${done}/${total} `)} ${status}  `)
+	}
+
+	const timer = setInterval(printProgress, 1000)
+	printProgress()
+
+	/** @type {{ label: string, output: string, exitCode: number | null, timedOut: boolean }[]} */
+	const results = await Promise.all(
+		tasks.map(
+			(task) =>
+				new Promise((resolve) => {
+					const chunks = /** @type {Buffer[]} */ ([])
+
+					const child = spawn('sh', ['-c', task.command], {
+						cwd: task.cwd,
+						env: { ...process.env, FORCE_COLOR: '1', NO_COLOR: '' },
+						stdio: ['ignore', 'pipe', 'pipe'],
+					})
+
+					child.stdout.on('data', (d) => chunks.push(d))
+					child.stderr.on('data', (d) => chunks.push(d))
+
+					const timeout = setTimeout(() => {
+						child.kill('SIGTERM')
+					}, timeoutMs)
+
+					child.on('close', (code, signal) => {
+						clearTimeout(timeout)
+						const timedOut = signal === 'SIGTERM'
+						const exitCode = timedOut ? 1 : code
+
+						if (exitCode === 0) done++
+						else failed++
+
+						resolve({
+							label: task.label,
+							output: Buffer.concat(chunks).toString(),
+							exitCode,
+							timedOut,
+						})
+					})
+				})
+		)
+	)
+
+	clearInterval(timer)
+	process.stderr.write('\r\x1b[K')
+
+	const failedTasks = /** @type {typeof results} */ ([])
+
+	for (let i = 0; i < results.length; i++) {
+		const r = results[i]
+		if (r.exitCode !== 0) {
+			failedTasks.push(r)
+			continue
+		}
+		const bg = bgColors[i % bgColors.length]
+		const fg = fgOnBg[i % fgOnBg.length]
+		const banner = bg(fg.bold(` ✔ ${r.label} `))
+		console.log(`\n${banner}`)
+		if (r.output.trim()) process.stdout.write(r.output)
+	}
+
+	if (failedTasks.length) {
+		for (const r of failedTasks) {
+			const banner = chalk.bgRed(
+				chalk.white.bold(` ✘ ${r.label} ${r.timedOut ? '· timed out' : '· failed'} `)
+			)
+			console.log(`\n${banner}`)
+			if (r.output.trim()) process.stdout.write(r.output)
+		}
+		const summary = failedTasks.map((t) => t.label).join(', ')
+		console.error(
+			`\n${chalk.bgRed.white.bold(` ✘ ${failedTasks.length}/${total} failed: ${summary} `)}`
+		)
+		process.exit(1)
+	}
+
+	console.log(`\n${chalk.bgGreen.black.bold(` ✔ All ${total} tasks completed `)}`)
+}
@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+/**
+ * Restore package.json from the backup created by pre-publish.js,
+ * then clean up temporary files (backup, LICENSE, README.md).
+ *
+ * Usage: node ../../scripts/post-publish.js   (from a package dir)
+ */
+import { existsSync, readFileSync, renameSync, rmSync } from 'fs'
+import { join } from 'path'
+
+const pkgPath = join(process.cwd(), 'package.json')
+const bakPath = pkgPath + '.bak'
+
+if (!existsSync(bakPath)) {
+	console.log('  No backup found, nothing to restore.')
+	process.exit(0)
+}
+
+const name = JSON.parse(readFileSync(pkgPath, 'utf-8')).name
+
+renameSync(bakPath, pkgPath)
+console.log('  ✓ package.json restored from backup')
+
+rmSync(join(process.cwd(), 'LICENSE'), { force: true })
+console.log('  ✓ LICENSE removed')
+
+if (name === 'page-agent') {
+	rmSync(join(process.cwd(), 'README.md'), { force: true })
+	console.log('  ✓ README.md removed')
+}
@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/**
+ * Backup package.json, then rewrite it for publish:
+ *   - Promote `publishConfig` fields to top level
+ *   - Remove `publishConfig` (npm doesn't need the wrapper)
+ *   - Copy LICENSE (and README.md for the main package)
+ *
+ * Usage: node ../../scripts/pre-publish.js   (from a package dir)
+ */
+import { copyFileSync, readFileSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+const pkgPath = join(process.cwd(), 'package.json')
+const raw = readFileSync(pkgPath, 'utf-8')
+const pkg = JSON.parse(raw)
+
+const publishConfig = pkg.publishConfig
+if (!publishConfig) {
+	console.log('  No publishConfig found, skipping manifest rewrite.')
+	process.exit(0)
+}
+
+// Backup the original file byte-for-byte
+copyFileSync(pkgPath, pkgPath + '.bak')
+console.log('  ✓ package.json backed up')
+
+for (const [field, value] of Object.entries(publishConfig)) {
+	pkg[field] = value
+}
+delete pkg.publishConfig
+
+writeFileSync(pkgPath, JSON.stringify(pkg, null, '    ') + '\n')
+console.log(`  ✓ Manifest rewritten for publish (${Object.keys(publishConfig).join(', ')})`)
+
+const root = join(process.cwd(), '../..')
+copyFileSync(join(root, 'LICENSE'), join(process.cwd(), 'LICENSE'))
+console.log('  ✓ LICENSE copied')
+
+if (pkg.name === 'page-agent') {
+	copyFileSync(join(root, 'README.md'), join(process.cwd(), 'README.md'))
+	console.log('  ✓ README.md copied')
+}
@@ -1,18 +1,14 @@
 {
    "compilerOptions": {
-        "composite": true,
-        "target": "ES2024",
+        "target": "es2025",
        "useDefineForClassFields": true,
-        "lib": ["ES2024", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
+        "lib": ["ESNext", "DOM"],
+        "module": "esnext",
        "skipLibCheck": true,
        "allowJs": true,

        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
-        // "baseUrl": "src",
-        "baseUrl": ".",
        "outDir": "dist",
-        // "incremental": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
@@ -27,6 +23,8 @@
        "noUnusedParameters": false,
        "erasableSyntaxOnly": true,
        "noFallthroughCasesInSwitch": true,
-        "noUncheckedSideEffectImports": true
+        "noUncheckedSideEffectImports": true,
+
+        "types": ["node"]
    }
 }
--- a/Show More
+++ b/Show More