Merge pull request #122 from alibaba/feat/ext

[WIP] feat: the browser extension
2026-01-27 17:41:10 +08:00
parent 0bac51b67b fdc3cf4e6d
commit 6ff2a032d6
52 changed files with 6622 additions and 342 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,4 @@
 {
-    "editor.fontLigatures": true,
    "cSpell.words": [
        "deepseek",
        "historychange",
@@ -14,9 +13,13 @@
        "qwen",
        "retryable",
        "shadcn",
+        "sidepanel",
        "statuschange",
        "wouter"
    ],
+    "files.exclude": {
+        "packages/*/node_modules": true,
+    },
    "markdownlint.config": {
        // "comment": "Relaxed rules",
        "default": true,
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,6 +5,7 @@
 This is a **monorepo** with npm workspaces:

 - **Page Agent** (`packages/page-agent/`) - Main entry with built-in UI Panel, published as `page-agent` on npm
+- **Extension** (`packages/extension/`) - Browser extension (WXT + React) 🚧 WIP
 - **Website** (`packages/website/`) - React docs and landing page. **When working on website, follow `packages/website/AGENTS.md`**

 Internal packages:
@@ -35,6 +36,7 @@ packages/
 ├── page-agent/              # npm: "page-agent" entry class (with UI + controller + demo builds)
 ├── website/                 # @page-agent/website (private)
 ├── llms/                    # @page-agent/llms
+├── extension/               # 🚧 WIP: Browser extension (WXT + React)
 ├── page-controller/         # @page-agent/page-controller
 └── ui/                      # @page-agent/ui
 ```
@@ -127,3 +129,5 @@ const pageInfo = await this.pageController.getPageInfo()
 - ESLint relaxes some unsafe rules for rapid iteration
 - Every change you make should not only implement the desired functionality but also improve the quality of the codebase
 - All code and comments must be in English.
+- Do not try to hide errors or risks. They are valuable feedbacks for developers and users. Make them visible and actionable.
+- Traceability and predictability is more important than success rate.
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -8,7 +8,13 @@ import globals from 'globals'
 import tseslint from 'typescript-eslint'

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

 			// 'require-await': 'off',
 			'@typescript-eslint/require-await': 'off',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
        "packages/llms",
        "packages/core",
        "packages/page-agent",
+        "packages/extension",
        "packages/website"
    ],
    "description": "AI-powered UI agent for web applications",
--- a/packages/core/src/PageAgentCore.ts
+++ b/packages/core/src/PageAgentCore.ts
@@ -414,6 +414,10 @@ export class PageAgentCore extends EventTarget {
 	 * Get system prompt, dynamically replace language settings based on configured language
 	 */
 	#getSystemPrompt(): string {
+		if (this.config.customSystemPrompt) {
+			return this.config.customSystemPrompt
+		}
+
 		let systemPrompt = SYSTEM_PROMPT

 		const targetLanguage = this.config.language === 'zh-CN' ? '中文' : 'English'
--- a/packages/core/src/config/index.ts
+++ b/packages/core/src/config/index.ts
@@ -141,6 +141,12 @@ export interface AgentConfig {
 	 * }
 	 */
 	transformPageContent?: (content: string) => Promise<string> | string
+
+	/**
+	 * Completely override the default system prompt.
+	 * @experimental Use with caution - incorrect prompts may break agent behavior.
+	 */
+	customSystemPrompt?: string
 }

 export type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig
--- a/packages/extension/.prettierignore
+++ b/packages/extension/.prettierignore
@@ -0,0 +1,2 @@
+.wxt
+src/components/ui
--- a/packages/extension/PRIVACY.md
+++ b/packages/extension/PRIVACY.md
@@ -0,0 +1,57 @@
+# Privacy Policy for Page Agent Extension
+
+**Last updated:** January 2026
+
+## Overview
+
+Page Agent Extension is a browser automation tool that uses AI to help you interact with web pages. This policy explains what data is processed and under what circumstances.
+
+## Data Processing
+
+### Local Processing
+
+The extension performs DOM analysis and automation actions **locally in your browser**. Your browsing history, passwords, and form data are not accessed or collected by the extension itself.
+
+### Data Transmission
+
+Data is transmitted to external servers **only when you initiate an automation task**. When this occurs:
+
+- Your task instructions (natural language commands)
+- Sanitized page structure (simplified DOM, excluding sensitive form values)
+
+are sent to the LLM API endpoint configured in **your settings**.
+
+**If you configure a third-party LLM provider** (e.g., OpenAI, Anthropic, or others), data is sent directly to that provider. Their privacy policies apply.
+
+**If you use our testing endpoint**, your requests are proxied to [DeepSeek](https://deepseek.com) for AI processing. Regarding this test endpoint:
+
+- This endpoint is provided for evaluation purposes only and is not recommended for production or daily use
+- We do **not** store your task content, page content, or visited URLs
+- Minimal logging (timestamps, request metadata, IP addresses) may occur for abuse prevention and service stability
+- DeepSeek's [Privacy Policy](https://cdn.deepseek.com/policies/en-US/deepseek-privacy-policy.html) applies to their processing of your requests
+
+## Data Storage
+
+- **Local storage only**: Your configuration (API endpoint, API key, model selection) is stored in your browser via `chrome.storage.local`
+- **No cloud sync**: Configuration is not synced to any external server
+- **No analytics**: The extension does not include any analytics or tracking code
+
+## Your Control
+
+- The extension is open source and can be audited by anyone
+- You choose which LLM provider to use
+- You may configure your own API endpoint at any time
+- You can clear all stored data by removing the extension
+
+## Changes to This Policy
+
+We may update this policy as the extension evolves. Significant changes will be noted in the extension's release notes.
+
+## Contact
+
+For questions about this privacy policy:
+https://github.com/alibaba/page-agent/issues
+
+---
+
+Source code: https://github.com/alibaba/page-agent
--- a/packages/extension/components.json
+++ b/packages/extension/components.json
@@ -0,0 +1,24 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "",
+        "css": "src/index.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "iconLibrary": "lucide",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "registries": {
+        "@magicui": "https://magicui.design/r/{name}.json"
+    }
+}
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -0,0 +1,55 @@
+{
+    "name": "@page-agent/ext",
+    "private": true,
+    "version": "1.0.0-beta.6",
+    "type": "module",
+    "scripts": {
+        "dev": "wxt",
+        "dev:firefox": "wxt -b firefox",
+        "build:ext": "wxt build",
+        "build:firefox": "wxt build -b firefox",
+        "zip": "wxt zip",
+        "zip:firefox": "wxt zip -b firefox",
+        "postinstall": "wxt prepare"
+    },
+    "devDependencies": {
+        "@tailwindcss/vite": "^4.1.18",
+        "@types/chrome": "^0.1.34",
+        "@types/react": "^19.2.8",
+        "@types/react-dom": "^19.2.1",
+        "@vitejs/plugin-react-swc": "^4.1.0",
+        "@wxt-dev/module-react": "^1.1.5",
+        "i18next": "^25.7.4",
+        "i18next-browser-languagedetector": "^8.2.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "react-i18next": "^16.5.2",
+        "tailwindcss": "^4.1.14",
+        "tw-animate-css": "^1.4.0",
+        "wouter": "^3.9.0",
+        "wxt": "^0.20.13"
+    },
+    "dependencies": {
+        "@page-agent/core": "1.0.0",
+        "@page-agent/llms": "1.0.0",
+        "@page-agent/page-controller": "1.0.0",
+        "@page-agent/ui": "1.0.0",
+        "@radix-ui/react-hover-card": "^1.1.15",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "@webext-core/messaging": "^2.3.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.562.0",
+        "motion": "^12.26.1",
+        "next-themes": "^0.4.6",
+        "rough-notation": "^0.5.1",
+        "simple-icons": "^16.5.0",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^3.4.0"
+    }
+}
--- a/packages/extension/public/assets/page-agent-256.webp
+++ b/packages/extension/public/assets/page-agent-256.webp
--- a/packages/extension/public/assets/page-agent-64.png
+++ b/packages/extension/public/assets/page-agent-64.png
--- a/packages/extension/src/agent/MultiPageAgent.ts
+++ b/packages/extension/src/agent/MultiPageAgent.ts
@@ -0,0 +1,40 @@
+import { PageAgentConfig, PageAgentCore } from '@page-agent/core'
+
+import { RemotePageController } from './RemotePageController'
+import { TabsController } from './TabsController'
+import { createTabTools } from './tabTools'
+
+export class MultiPageAgent extends PageAgentCore {
+	constructor(config: Omit<PageAgentConfig, 'pageController'>) {
+		const tabsController = new TabsController()
+		const pageController = new RemotePageController()
+		pageController.tabsController = tabsController
+		const customTools = createTabTools(tabsController)
+
+		super({
+			...config,
+			pageController: pageController as any,
+			customTools: customTools,
+
+			onBeforeTask: async (agent) => {
+				await tabsController.init(agent.taskId)
+
+				await chrome.storage.local.set({
+					isAgentRunning: true,
+				})
+			},
+
+			onAfterTask: async () => {
+				await chrome.storage.local.set({
+					isAgentRunning: false,
+				})
+			},
+
+			onDispose: () => {
+				chrome.storage.local.set({
+					isAgentRunning: false,
+				})
+			},
+		})
+	}
+}
--- a/packages/extension/src/agent/RemotePageController.background.ts
+++ b/packages/extension/src/agent/RemotePageController.background.ts
@@ -0,0 +1,40 @@
+/**
+ * background logics for RemotePageController
+ * - redirect messages from RemotePageController(Agent, extension pages) to ContentScript
+ */
+
+// chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+// 	if (message.type !== 'PAGE_CONTROL') {
+// 		return
+// 	}
+
+export function handlePageControlMessage(
+	message: { type: 'PAGE_CONTROL'; action: string; payload: any; targetTabId: number },
+	sender: chrome.runtime.MessageSender,
+	sendResponse: (response: unknown) => void
+): boolean {
+	const { action, payload, targetTabId } = message
+
+	if (action === 'get_my_tab_id') {
+		sendResponse({ tabId: sender.tab?.id || null })
+		return false
+	}
+
+	chrome.tabs
+		.sendMessage(targetTabId, {
+			type: 'PAGE_CONTROL',
+			action,
+			payload,
+		})
+		.then((result) => {
+			sendResponse(result)
+		})
+		.catch((error) => {
+			sendResponse({
+				success: false,
+				error: error instanceof Error ? error.message : String(error),
+			})
+		})
+
+	return true // async response
+}
--- a/packages/extension/src/agent/RemotePageController.content.ts
+++ b/packages/extension/src/agent/RemotePageController.content.ts
@@ -0,0 +1,125 @@
+/**
+ * content script for RemotePageController
+ */
+import { PageController } from '@page-agent/page-controller'
+
+export function initPageController() {
+	let pageController: PageController | null = null
+	let intervalID: number | null = null
+
+	const myTabIdPromise = chrome.runtime
+		.sendMessage({ type: 'PAGE_CONTROL', action: 'get_my_tab_id' })
+		.then((response) => {
+			return (response as { tabId: number | null }).tabId
+		})
+
+	function getPC(): PageController {
+		if (!pageController) {
+			pageController = new PageController({ enableMask: true })
+			pageController.hideMask()
+		}
+		return pageController
+	}
+
+	intervalID = window.setInterval(async () => {
+		const isAgentRunning = (await chrome.storage.local.get('isAgentRunning')).isAgentRunning
+		const currentTabId = (await chrome.storage.local.get('currentTabId')).currentTabId
+
+		const shouldShowMask = isAgentRunning && currentTabId === (await myTabIdPromise)
+
+		// console.log('[RemotePageController] polling:', {
+		// 	isAgentRunning,
+		// 	currentTabId,
+		// 	myTabId: await myTabIdPromise,
+		// 	shouldShowMask,
+		// })
+
+		if (shouldShowMask) {
+			await getPC().showMask()
+		} else {
+			// await getPC().hideMask()
+			if (pageController) {
+				pageController.hideMask()
+			}
+		}
+
+		if (!isAgentRunning) {
+			if (pageController) {
+				pageController?.dispose()
+				pageController = null
+			}
+		}
+	}, 1_000)
+
+	chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+		if (message.type !== 'PAGE_CONTROL') {
+			return
+		}
+
+		const { action, payload } = message
+		const methodName = getMethodName(action)
+
+		const pc = getPC() as any
+
+		switch (action) {
+			case 'get_last_update_time':
+			case 'get_browser_state':
+			case 'update_tree':
+			case 'clean_up_highlights':
+			case 'click_element':
+			case 'input_text':
+			case 'select_option':
+			case 'scroll':
+			case 'scroll_horizontally':
+			case 'execute_javascript':
+				pc[methodName](...(payload || []))
+					.then((result: any) => sendResponse(result))
+					.catch((error: any) =>
+						sendResponse({
+							success: false,
+							error: error instanceof Error ? error.message : String(error),
+						})
+					)
+				break
+
+			default:
+				sendResponse({
+					success: false,
+					error: `Unknown PAGE_CONTROL action: ${action}`,
+				})
+		}
+
+		return true
+	})
+}
+
+function getMethodName(action: string): string {
+	switch (action) {
+		case 'get_last_update_time':
+			return 'getLastUpdateTime' as const
+		case 'get_browser_state':
+			return 'getBrowserState' as const
+		case 'update_tree':
+			return 'updateTree' as const
+		case 'clean_up_highlights':
+			return 'cleanUpHighlights' as const
+
+		// DOM actions
+
+		case 'click_element':
+			return 'clickElement' as const
+		case 'input_text':
+			return 'inputText' as const
+		case 'select_option':
+			return 'selectOption' as const
+		case 'scroll':
+			return 'scroll' as const
+		case 'scroll_horizontally':
+			return 'scrollHorizontally' as const
+		case 'execute_javascript':
+			return 'executeJavascript' as const
+
+		default:
+			return action
+	}
+}
--- a/packages/extension/src/agent/RemotePageController.ts
+++ b/packages/extension/src/agent/RemotePageController.ts
@@ -0,0 +1,170 @@
+import type { BrowserState, PageController } from '@page-agent/page-controller'
+
+import { isContentScriptAllowed } from '@/utils'
+
+import { TabsController } from './TabsController'
+
+/**
+ * Agent side page controller.
+ * - live in the agent env (extension page or content script)
+ * - communicates with remote PageController via sw
+ */
+
+export class RemotePageController {
+	tabsController!: TabsController
+
+	get currentTabId(): number | null {
+		return this.tabsController.currentTabId
+	}
+
+	async getCurrentUrl(): Promise<string> {
+		if (!this.currentTabId) return ''
+		const { url } = await this.tabsController.getTabInfo(this.currentTabId)
+		return url || ''
+	}
+
+	get currentTabUrl(): Promise<string> {
+		return this.getCurrentUrl()
+	}
+
+	async getCurrentTitle(): Promise<string> {
+		if (!this.currentTabId) return ''
+		const { title } = await this.tabsController.getTabInfo(this.currentTabId)
+		return title || ''
+	}
+
+	get currentTabTitle(): Promise<string> {
+		return this.getCurrentTitle()
+	}
+
+	async getLastUpdateTime(): Promise<number> {
+		if (!this.currentTabId) throw new Error('tabsController not initialized.')
+
+		return await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: 'get_last_update_time',
+			targetTabId: this.currentTabId,
+		})
+	}
+
+	// getBrowserState
+	async getBrowserState(): Promise<BrowserState> {
+		let browserState = {} as BrowserState
+
+		if (!this.currentTabId || !isContentScriptAllowed(await this.currentTabUrl)) {
+			browserState = {
+				url: await this.currentTabUrl,
+				title: await this.currentTabTitle,
+				header: '',
+				content: '(empty page)',
+				footer: '',
+			}
+		} else {
+			browserState = await chrome.runtime.sendMessage({
+				type: 'PAGE_CONTROL',
+				action: 'get_browser_state',
+				targetTabId: this.currentTabId,
+			})
+		}
+
+		const sum = await this.tabsController.summarizeTabs()
+		browserState.header = sum + '\n' + (browserState.header || '')
+
+		return browserState
+	}
+
+	// updateTree
+	async updateTree(): Promise<void> {
+		if (!this.currentTabId || !isContentScriptAllowed(await this.currentTabUrl)) {
+			return
+		}
+
+		await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: 'update_tree',
+			targetTabId: this.currentTabId,
+		})
+	}
+
+	// cleanUpHighlights
+	async cleanUpHighlights(): Promise<void> {
+		if (!this.currentTabId || !isContentScriptAllowed(await this.currentTabUrl)) {
+			return
+		}
+
+		await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: 'clean_up_highlights',
+			targetTabId: this.currentTabId,
+		})
+	}
+
+	// clickElement
+	async clickElement(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('click_element', args)
+	}
+
+	// inputText
+	async inputText(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('input_text', args)
+	}
+
+	// selectOption
+	async selectOption(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('select_option', args)
+	}
+
+	// scroll
+	async scroll(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('scroll', args)
+	}
+
+	// scrollHorizontally
+	async scrollHorizontally(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('scroll_horizontally', args)
+	}
+
+	// executeJavascript
+	async executeJavascript(...args: any[]): Promise<DomActionReturn> {
+		return this.remoteCallDomAction('execute_javascript', args)
+	}
+
+	/** @note Mask visibility is managed by content script via storage polling. */
+	async showMask(): Promise<void> {}
+	/** @note Mask visibility is managed by content script via storage polling. */
+	async hideMask(): Promise<void> {}
+
+	// dispose
+	dispose(): void {}
+
+	private async preCheck() {
+		if (!this.currentTabId) {
+			return 'RemotePageController not initialized.'
+		}
+
+		if (!isContentScriptAllowed(await this.currentTabUrl)) {
+			return 'Operation not allowed on this page. Use open_new_tab to navigate to a web page first.'
+		}
+
+		return null
+	}
+
+	private async remoteCallDomAction(action: string, payload: any[]): Promise<DomActionReturn> {
+		const preCheckError = await this.preCheck()
+		if (preCheckError) {
+			return { success: false, message: preCheckError }
+		}
+
+		return await chrome.runtime.sendMessage({
+			type: 'PAGE_CONTROL',
+			action: action,
+			targetTabId: this.currentTabId!,
+			payload,
+		})
+	}
+}
+
+interface DomActionReturn {
+	success: boolean
+	message: string
+}
--- a/packages/extension/src/agent/TabsController.background.ts
+++ b/packages/extension/src/agent/TabsController.background.ts
@@ -0,0 +1,112 @@
+/**
+ * background logics for TabsController
+ */
+import type { TabAction } from './TabsController'
+
+export function handleTabControlMessage(
+	message: { type: 'TAB_CONTROL'; action: TabAction; payload: any },
+	sender: chrome.runtime.MessageSender,
+	sendResponse: (response: unknown) => void
+): boolean {
+	if (message.type !== 'TAB_CONTROL') {
+		sendResponse({ error: 'Invalid message type' })
+		return false
+	}
+
+	const { action, payload } = message
+
+	switch (action as TabAction) {
+		case 'get_active_tab': {
+			chrome.tabs
+				.query({ active: true, currentWindow: true })
+				.then((tabs) => {
+					const tabId = tabs.length > 0 ? tabs[0].id || null : null
+					sendResponse({ success: true, tabId })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'get_tab_info': {
+			chrome.tabs
+				.get(payload.tabId)
+				.then((tab) => {
+					const result = { title: tab.title || '', url: tab.url || '' }
+					sendResponse(result)
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'open_new_tab': {
+			chrome.tabs
+				.create({ url: payload.url, active: false })
+				.then((newTab) => {
+					// @todo: wait for tab to be fully loaded
+					sendResponse({ success: true, tabId: newTab.id, windowId: newTab.windowId })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'create_tab_group': {
+			chrome.tabs
+				.group({ tabIds: payload.tabIds, createProperties: { windowId: payload.windowId } })
+				.then((groupId) => {
+					console.log('Created tab group', groupId)
+					sendResponse({ success: true, groupId })
+				})
+				.catch((error) => {
+					console.error('Failed to create tab group', error)
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'update_tab_group': {
+			chrome.tabGroups
+				.update(payload.groupId, payload.properties)
+				.then(() => {
+					sendResponse({ success: true })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'add_tab_to_group': {
+			chrome.tabs
+				.group({ tabIds: payload.tabId, groupId: payload.groupId })
+				.then(() => {
+					sendResponse({ success: true })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		case 'close_tab': {
+			chrome.tabs
+				.remove(payload.tabId)
+				.then(() => {
+					sendResponse({ success: true })
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		default:
+			sendResponse({ error: `Unknown action: ${action}` })
+			return false
+	}
+}
--- a/packages/extension/src/agent/TabsController.ts
+++ b/packages/extension/src/agent/TabsController.ts
@@ -0,0 +1,223 @@
+/**
+ * Controller for managing browser tabs.
+ * - live in the agent env (extension page or content script)
+ * - no chrome apis. call sw for tab operations
+ */
+export class TabsController {
+	tabs: TabMeta[] = []
+	currentTabId: number | null = null
+
+	initialTabId: number | null = null
+	private tabGroupId: number | null = null
+	private taskId: string = ''
+	private windowId: number | null = null
+
+	async init(taskId: string) {
+		this.taskId = taskId
+		this.tabs = []
+		this.currentTabId = null
+		this.tabGroupId = null
+		this.initialTabId = null
+		this.windowId = null
+
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'get_active_tab',
+		})
+
+		this.initialTabId = result.tabId
+		this.currentTabId = result.tabId
+
+		this.tabs.push({
+			id: result.tabId,
+			isInitial: true,
+		})
+
+		if (!this.initialTabId) {
+			throw new Error('Failed to get initial tab ID')
+		}
+
+		await this.updateCurrentTabId(this.currentTabId)
+	}
+
+	async openNewTab(url: string): Promise<{ success: boolean; tabId: number; message: string }> {
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'open_new_tab',
+			payload: { url },
+		})
+
+		if (!result.success) {
+			throw new Error(`Failed to open new tab: ${result.error}`)
+		}
+
+		const tabId = result.tabId as number
+		const windowId = result.windowId as number
+
+		this.windowId = windowId
+
+		this.tabs.push({
+			id: tabId,
+			isInitial: false,
+		})
+
+		await this.switchToTab(tabId)
+
+		if (!this.tabGroupId) {
+			const result = await chrome.runtime.sendMessage({
+				type: 'TAB_CONTROL',
+				action: 'create_tab_group',
+				payload: { tabIds: [tabId], windowId: this.windowId },
+			})
+
+			if (!result.success) {
+				throw new Error(`Failed to create tab group: ${result.error}`)
+			}
+
+			const groupId = result.groupId as number
+
+			this.tabGroupId = groupId
+
+			await chrome.runtime.sendMessage({
+				type: 'TAB_CONTROL',
+				action: 'update_tab_group',
+				payload: {
+					groupId: this.tabGroupId,
+					properties: {
+						title: `Task(${this.taskId.slice(0, 8)})`,
+						color: randomColor(),
+						collapsed: false,
+					},
+				},
+			})
+		} else {
+			await chrome.runtime.sendMessage({
+				type: 'TAB_CONTROL',
+				action: 'add_tab_to_group',
+				payload: { tabId: result.tabId, groupId: this.tabGroupId },
+			})
+		}
+
+		return {
+			success: true,
+			tabId,
+			message: `Opened new tab ID ${tabId} with URL ${url}`,
+		}
+	}
+
+	async switchToTab(tabId: number): Promise<{ success: boolean; message: string }> {
+		const targetTab = this.tabs.find((t) => t.id === tabId)
+		if (!targetTab) {
+			return {
+				success: false,
+				message: `Tab ID ${tabId} not found in tab list.`,
+			}
+		}
+
+		await this.updateCurrentTabId(tabId)
+
+		return {
+			success: true,
+			message: `Switched to tab ID ${tabId}.`,
+		}
+	}
+
+	async closeTab(tabId: number): Promise<{ success: boolean; message: string }> {
+		const targetTab = this.tabs.find((t) => t.id === tabId)
+		if (!targetTab) {
+			return {
+				success: false,
+				message: `Tab ID ${tabId} not found in tab list.`,
+			}
+		}
+		if (targetTab.isInitial) {
+			return {
+				success: false,
+				message: `Cannot close the initial tab ID ${tabId}.`,
+			}
+		}
+
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'close_tab',
+			payload: { tabId },
+		})
+
+		if (result.success) {
+			this.tabs = this.tabs.filter((t) => t.id !== tabId)
+			if (this.currentTabId === tabId) {
+				const newCurrentTab = this.tabs[this.tabs.length - 1] || null
+				if (newCurrentTab) {
+					await this.switchToTab(newCurrentTab.id)
+				} else {
+					await this.updateCurrentTabId(null)
+				}
+			}
+
+			return {
+				success: true,
+				message: `Closed tab ID ${tabId}.`,
+			}
+		} else {
+			return {
+				success: false,
+				message: `Failed to close tab ID ${tabId}: ${result.error}`,
+			}
+		}
+	}
+
+	async updateCurrentTabId(tabId: number | null) {
+		this.currentTabId = tabId
+		await chrome.storage.local.set({ currentTabId: tabId })
+	}
+
+	async getTabInfo(tabId: number): Promise<{ title: string; url: string }> {
+		const result = await chrome.runtime.sendMessage({
+			type: 'TAB_CONTROL',
+			action: 'get_tab_info',
+			payload: { tabId },
+		})
+		return result
+	}
+
+	async summarizeTabs(): Promise<string> {
+		const summaries = [`| Tab ID | URL | Title |`, `|--------|-----|-------|`]
+		for (const tab of this.tabs) {
+			const { title, url } = await this.getTabInfo(tab.id)
+			summaries.push(`| ${tab.id} | ${url} | ${title} |`)
+		}
+		return summaries.join('\n')
+	}
+}
+
+export type TabAction =
+	| 'get_active_tab'
+	| 'get_tab_info'
+	| 'open_new_tab'
+	| 'create_tab_group'
+	| 'update_tab_group'
+	| 'add_tab_to_group'
+	| 'close_tab'
+	| 'get_tab_title'
+
+interface TabMeta {
+	id: number
+	isInitial: boolean
+}
+
+const TAB_GROUP_COLORS = [
+	'grey',
+	'blue',
+	'red',
+	'yellow',
+	'green',
+	'pink',
+	'purple',
+	'cyan',
+] as const
+
+type TabGroupColor = (typeof TAB_GROUP_COLORS)[number]
+
+function randomColor(): TabGroupColor {
+	return TAB_GROUP_COLORS[Math.floor(Math.random() * TAB_GROUP_COLORS.length)]
+}
--- a/packages/extension/src/agent/tabTools.ts
+++ b/packages/extension/src/agent/tabTools.ts
@@ -0,0 +1,63 @@
+/**
+ * Tab control tools for browser extension
+ *
+ * These tools allow the agent to manage multiple browser tabs:
+ * - open_new_tab: Open a new tab and set it as current
+ * - switch_to_tab: Switch to an existing tab
+ * - close_tab: Close a tab (optionally switch to another)
+ */
+import zod from 'zod'
+
+import type { TabsController } from './TabsController'
+
+/** Tool definition compatible with PageAgentCore customTools */
+interface TabTool {
+	description: string
+	inputSchema: zod.ZodType
+	execute: (input: unknown) => Promise<string>
+}
+
+/**
+ * Create tab control tools bound to a TabsManager instance.
+ * These tools are injected into PageAgentCore via customTools config.
+ */
+export function createTabTools(tabsController: TabsController): Record<string, TabTool> {
+	return {
+		open_new_tab: {
+			description:
+				'Open a new browser tab with the specified URL. The new tab becomes the current tab for all subsequent page operations.',
+			inputSchema: zod.object({
+				url: zod.string().describe('The URL to open in the new tab'),
+			}),
+			execute: async (input: unknown) => {
+				const { url } = input as { url: string }
+				const result = await tabsController.openNewTab(url)
+				return result.message
+			},
+		},
+
+		switch_to_tab: {
+			description:
+				'Switch to an existing tab by its ID. After switching, all page operations will target the new current tab. You can only switch to tabs in the tab list shown in browser state.',
+			inputSchema: zod.object({
+				tab_id: zod.number().int().describe('The tab ID to switch to'),
+			}),
+			execute: async (input: unknown) => {
+				const { tab_id } = input as { tab_id: number }
+				return (await tabsController.switchToTab(tab_id)).message
+			},
+		},
+
+		close_tab: {
+			description:
+				'Close a tab by its ID. Cannot close the initial tab. Optionally specify which tab to switch to after closing.',
+			inputSchema: zod.object({
+				tab_id: zod.number().int().describe('The tab ID to close'),
+			}),
+			execute: async (input: unknown) => {
+				const { tab_id } = input as { tab_id: number }
+				return (await tabsController.closeTab(tab_id)).message
+			},
+		},
+	}
+}
--- a/packages/extension/src/agent/useAgent.ts
+++ b/packages/extension/src/agent/useAgent.ts
@@ -0,0 +1,112 @@
+/**
+ * React hook for using AgentController
+ */
+import type { AgentActivity, AgentStatus, HistoricalEvent } from '@page-agent/core'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { LLMConfig } from '@/utils'
+import { DEMO_API_KEY, DEMO_BASE_URL, DEMO_MODEL } from '@/utils/constants'
+
+import { MultiPageAgent } from './MultiPageAgent'
+
+// import { type AgentController, type LLMConfig, getAgentController } from './old/AgentController'
+
+export interface UseAgentResult {
+	status: AgentStatus
+	history: HistoricalEvent[]
+	activity: AgentActivity | null
+	currentTask: string
+	config: LLMConfig | null
+	execute: (task: string) => Promise<void>
+	stop: () => void
+	configure: (config: LLMConfig) => Promise<void>
+}
+
+const DEMO_CONFIG: LLMConfig = {
+	apiKey: DEMO_API_KEY,
+	baseURL: DEMO_BASE_URL,
+	model: DEMO_MODEL,
+}
+
+export function useAgent(): UseAgentResult {
+	const agentRef = useRef<MultiPageAgent | null>(null)
+	const [status, setStatus] = useState<AgentStatus>('idle')
+	const [history, setHistory] = useState<HistoricalEvent[]>([])
+	const [activity, setActivity] = useState<AgentActivity | null>(null)
+	const [currentTask, setCurrentTask] = useState('')
+	const [config, setConfig] = useState<LLMConfig | null>(null)
+
+	useEffect(() => {
+		chrome.storage.local.get('llmConfig').then((result) => {
+			if (result.llmConfig) {
+				setConfig(result.llmConfig as LLMConfig)
+			} else {
+				chrome.storage.local.set({ llmConfig: DEMO_CONFIG })
+				setConfig(DEMO_CONFIG)
+			}
+		})
+	}, [])
+
+	useEffect(() => {
+		if (!config) return
+
+		const agent = new MultiPageAgent(config)
+		agentRef.current = agent
+
+		const handleStatusChange = (e: Event) => {
+			const newStatus = agent.status as AgentStatus
+			setStatus(newStatus)
+			if (newStatus === 'idle' || newStatus === 'completed' || newStatus === 'error') {
+				setActivity(null)
+			}
+		}
+
+		const handleHistoryChange = (e: Event) => {
+			setHistory([...agent.history])
+		}
+
+		const handleActivity = (e: Event) => {
+			const newActivity = (e as CustomEvent).detail as AgentActivity
+			setActivity(newActivity)
+		}
+
+		agent.addEventListener('statuschange', handleStatusChange)
+		agent.addEventListener('historychange', handleHistoryChange)
+		agent.addEventListener('activity', handleActivity)
+
+		return () => {
+			agent.removeEventListener('statuschange', handleStatusChange)
+			agent.removeEventListener('historychange', handleHistoryChange)
+			agent.removeEventListener('activity', handleActivity)
+			agent.dispose()
+		}
+	}, [config])
+
+	const execute = useCallback(async (task: string) => {
+		const agent = agentRef.current
+		if (!agent) return
+
+		setCurrentTask(task)
+		setHistory([])
+		await agent.execute(task)
+	}, [])
+
+	const stop = useCallback(() => {
+		agentRef.current?.dispose()
+	}, [])
+
+	const configure = useCallback(async (newConfig: LLMConfig) => {
+		setConfig(newConfig)
+	}, [])
+
+	return {
+		status,
+		history,
+		activity,
+		currentTask,
+		config,
+		execute,
+		stop,
+		configure,
+	}
+}
--- a/packages/extension/src/assets/index.css
+++ b/packages/extension/src/assets/index.css
@@ -0,0 +1,123 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.145 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.396 0.141 25.723);
+	--destructive-foreground: oklch(0.637 0.237 25.331);
+	--border: oklch(0.269 0 0);
+	--input: oklch(0.269 0 0);
+	--ring: oklch(0.439 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(0.269 0 0);
+	--sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
--- a/packages/extension/src/assets/page-agent-64.png
+++ b/packages/extension/src/assets/page-agent-64.png
--- a/packages/extension/src/components/ui/button.tsx
+++ b/packages/extension/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9',
+				'icon-sm': 'size-8',
+				'icon-lg': 'size-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+)
+
+function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean
+	}) {
+	const Comp = asChild ? Slot : 'button'
+
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
+
+export { Button, buttonVariants }
--- a/packages/extension/src/components/ui/card.tsx
+++ b/packages/extension/src/components/ui/card.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('leading-none font-semibold', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
--- a/packages/extension/src/components/ui/field.tsx
+++ b/packages/extension/src/components/ui/field.tsx
@@ -0,0 +1,232 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import { useMemo } from 'react'
+
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				'flex flex-col gap-6',
+				'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldLegend({
+	className,
+	variant = 'legend',
+	...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				'mb-3 font-medium',
+				'data-[variant=legend]:text-base',
+				'data-[variant=label]:text-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+	variants: {
+		orientation: {
+			vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+			horizontal: [
+				'flex-row items-center',
+				'[&>[data-slot=field-label]]:flex-auto',
+				'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+			responsive: [
+				'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+				'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+		},
+	},
+	defaultVariants: {
+		orientation: 'vertical',
+	},
+})
+
+function Field({
+	className,
+	orientation = 'vertical',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	)
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="field-content"
+			className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
+			{...props}
+		/>
+	)
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+				'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+				'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function FieldSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<'div'> & {
+	children?: React.ReactNode
+}) {
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+				className
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	)
+}
+
+function FieldError({
+	className,
+	children,
+	errors,
+	...props
+}: React.ComponentProps<'div'> & {
+	errors?: Array<{ message?: string } | undefined>
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children
+		}
+
+		if (!errors?.length) {
+			return null
+		}
+
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]
+
+		if (uniqueErrors?.length == 1) {
+			return uniqueErrors[0]?.message
+		}
+
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+			</ul>
+		)
+	}, [children, errors])
+
+	if (!content) {
+		return null
+	}
+
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn('text-destructive text-sm font-normal', className)}
+			{...props}
+		>
+			{content}
+		</div>
+	)
+}
+
+export {
+	Field,
+	FieldLabel,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldContent,
+	FieldTitle,
+}
--- a/packages/extension/src/components/ui/hover-card.tsx
+++ b/packages/extension/src/components/ui/hover-card.tsx
@@ -0,0 +1,36 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+					className
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	)
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/packages/extension/src/components/ui/input-group.tsx
+++ b/packages/extension/src/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { cn } from '@/lib/utils'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="input-group"
+			role="group"
+			className={cn(
+				'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+				'h-9 min-w-0 has-[>textarea]:h-auto',
+
+				// Variants based on alignment.
+				'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+				'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+				'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+				'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+				// Focus state.
+				'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+				// Error state.
+				'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+const inputGroupAddonVariants = cva(
+	"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+	{
+		variants: {
+			align: {
+				'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+				'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+				'block-start':
+					'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+				'block-end':
+					'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	}
+)
+
+function InputGroupAddon({
+	className,
+	align = 'inline-start',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest('button')) {
+					return
+				}
+				e.currentTarget.parentElement?.querySelector('input')?.focus()
+			}}
+			{...props}
+		/>
+	)
+}
+
+const inputGroupButtonVariants = cva('text-sm shadow-none flex gap-2 items-center', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+			sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+})
+
+function InputGroupButton({
+	className,
+	type = 'button',
+	variant = 'ghost',
+	size = 'xs',
+	...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+	VariantProps<typeof inputGroupButtonVariants>) {
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			className={cn(
+				"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupText,
+	InputGroupInput,
+	InputGroupTextarea,
+}
--- a/packages/extension/src/components/ui/input.tsx
+++ b/packages/extension/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+				'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Input }
--- a/packages/extension/src/components/ui/item.tsx
+++ b/packages/extension/src/components/ui/item.tsx
@@ -0,0 +1,172 @@
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			role="list"
+			data-slot="item-group"
+			className={cn('group/item-group flex flex-col', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="item-separator"
+			orientation="horizontal"
+			className={cn('my-0', className)}
+			{...props}
+		/>
+	)
+}
+
+const itemVariants = cva(
+	'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50',
+			},
+			size: {
+				default: 'p-4 gap-4 ',
+				sm: 'py-3 px-4 gap-2.5',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+)
+
+function Item({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : 'div'
+	return (
+		<Comp
+			data-slot="item"
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
+
+const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+				image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+)
+
+function ItemMedia({
+	className,
+	variant = 'default',
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+	return (
+		<div
+			data-slot="item-media"
+			data-variant={variant}
+			className={cn(itemMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	)
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-content"
+			className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-title"
+			className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return (
+		<p
+			data-slot="item-description"
+			className={cn(
+				'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+	)
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-header"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	)
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="item-footer"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	)
+}
+
+export {
+	Item,
+	ItemMedia,
+	ItemContent,
+	ItemActions,
+	ItemGroup,
+	ItemSeparator,
+	ItemTitle,
+	ItemDescription,
+	ItemHeader,
+	ItemFooter,
+}
--- a/packages/extension/src/components/ui/label.tsx
+++ b/packages/extension/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as LabelPrimitive from '@radix-ui/react-label'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Label }
--- a/packages/extension/src/components/ui/separator.tsx
+++ b/packages/extension/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Separator }
--- a/packages/extension/src/components/ui/sonner.tsx
+++ b/packages/extension/src/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon,
+} from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = 'system' } = useTheme()
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps['theme']}
+			className="toaster group"
+			icons={{
+				success: <CircleCheckIcon className="size-4" />,
+				info: <InfoIcon className="size-4" />,
+				warning: <TriangleAlertIcon className="size-4" />,
+				error: <OctagonXIcon className="size-4" />,
+				loading: <Loader2Icon className="size-4 animate-spin" />,
+			}}
+			style={
+				{
+					'--normal-bg': 'var(--popover)',
+					'--normal-text': 'var(--popover-foreground)',
+					'--normal-border': 'var(--border)',
+					'--border-radius': 'var(--radius)',
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	)
+}
+
+export { Toaster }
--- a/packages/extension/src/components/ui/spinner.tsx
+++ b/packages/extension/src/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+	return (
+		<Loader2Icon
+			role="status"
+			aria-label="Loading"
+			className={cn('size-4 animate-spin', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Spinner }
--- a/packages/extension/src/components/ui/switch.tsx
+++ b/packages/extension/src/components/ui/switch.tsx
@@ -0,0 +1,26 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	)
+}
+
+export { Switch }
--- a/packages/extension/src/components/ui/textarea.tsx
+++ b/packages/extension/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Textarea }
--- a/packages/extension/src/entrypoints/background.ts
+++ b/packages/extension/src/entrypoints/background.ts
@@ -0,0 +1,52 @@
+import { handlePageControlMessage } from '@/agent/RemotePageController.background'
+import { handleTabControlMessage } from '@/agent/TabsController.background'
+
+function handleUtilsMessage(
+	message: { type: 'UTILS'; action: string; payload: any },
+	sender: chrome.runtime.MessageSender,
+	sendResponse: (response: unknown) => void
+): boolean {
+	const { action, payload } = message
+
+	switch (action) {
+		case 'get_tab_info': {
+			chrome.tabs
+				.get(payload.tabId)
+				.then((tab) => {
+					const result = { title: tab.title || '', url: tab.url || '' }
+					sendResponse(result)
+				})
+				.catch((error) => {
+					sendResponse({ error: error instanceof Error ? error.message : String(error) })
+				})
+			return true // async response
+		}
+
+		default:
+			sendResponse({ error: `Unknown TAB_CONTROL action: ${action}` })
+			return false
+	}
+}
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+	if (message.type === 'TAB_CONTROL') {
+		return handleTabControlMessage(message, sender, sendResponse)
+	} else if (message.type === 'PAGE_CONTROL') {
+		return handlePageControlMessage(message, sender, sendResponse)
+	} else if (message.type !== 'UTILS') {
+		return handleUtilsMessage(message, sender, sendResponse)
+	} else {
+		sendResponse({ error: 'Unknown message type' })
+		return false
+	}
+})
+
+// ============================================================================
+// Extension Setup
+// ============================================================================
+
+export default defineBackground(() => {
+	console.log('[Background] Service Worker started')
+
+	chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(() => {})
+})
--- a/packages/extension/src/entrypoints/content.ts
+++ b/packages/extension/src/entrypoints/content.ts
@@ -0,0 +1,13 @@
+import { initPageController } from '@/agent/RemotePageController.content'
+
+const DEBUG_PREFIX = '[Content]'
+
+export default defineContentScript({
+	matches: ['<all_urls>'],
+	runAt: 'document_idle',
+
+	main() {
+		console.debug(`${DEBUG_PREFIX} Loaded on ${window.location.href}`)
+		initPageController()
+	},
+})
--- a/packages/extension/src/entrypoints/sidepanel/App.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/App.tsx
@@ -0,0 +1,155 @@
+import { Send, Settings, Square } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupTextarea,
+} from '@/components/ui/input-group'
+
+import { useAgent } from '../../agent/useAgent'
+import { ConfigPanel } from './components/ConfigPanel'
+import { ActivityCard, EventCard } from './components/cards'
+import { EmptyState, Logo, StatusDot } from './components/misc'
+
+export default function App() {
+	const [showConfig, setShowConfig] = useState(false)
+	const [task, setTask] = useState('')
+	const historyRef = useRef<HTMLDivElement>(null)
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+	const { status, history, activity, currentTask, config, execute, stop, configure } = useAgent()
+
+	// Auto-scroll to bottom on new events
+	useEffect(() => {
+		if (historyRef.current) {
+			historyRef.current.scrollTop = historyRef.current.scrollHeight
+		}
+	}, [history, activity])
+
+	const handleSubmit = useCallback(
+		(e?: React.FormEvent) => {
+			e?.preventDefault()
+			if (!task.trim() || status === 'running') return
+
+			const taskToExecute = task.trim()
+			setTask('')
+
+			console.log('[SidePanel] Executing task:', taskToExecute)
+			execute(taskToExecute).catch((error) => {
+				console.error('[SidePanel] Failed to execute task:', error)
+			})
+		},
+		[task, status, execute]
+	)
+
+	const handleStop = useCallback(() => {
+		console.log('[SidePanel] Stopping task...')
+		stop()
+	}, [stop])
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault()
+			handleSubmit()
+		}
+	}
+
+	if (showConfig) {
+		return (
+			<ConfigPanel
+				config={config}
+				onSave={async (newConfig) => {
+					await configure(newConfig)
+					setShowConfig(false)
+				}}
+				onClose={() => setShowConfig(false)}
+			/>
+		)
+	}
+
+	const isRunning = status === 'running'
+	const showEmptyState = !currentTask && history.length === 0 && !isRunning
+
+	return (
+		<div className="flex flex-col h-screen bg-background">
+			{/* Header */}
+			<header className="flex items-center justify-between border-b px-3 py-2">
+				<div className="flex items-center gap-2">
+					<Logo className="size-5" />
+					<span className="text-sm font-medium">Page Agent Ext</span>
+				</div>
+				<div className="flex items-center gap-3">
+					<StatusDot status={status} />
+					<Button variant="ghost" size="icon-sm" onClick={() => setShowConfig(true)}>
+						<Settings className="size-3.5" />
+					</Button>
+				</div>
+			</header>
+
+			{/* Content */}
+			<main className="flex-1 overflow-hidden flex flex-col">
+				{/* Current task */}
+				{currentTask && (
+					<div className="border-b px-3 py-2 bg-muted/30">
+						<div className="text-[10px] text-muted-foreground uppercase tracking-wide">Task</div>
+						<div className="text-xs font-medium truncate" title={currentTask}>
+							{currentTask}
+						</div>
+					</div>
+				)}
+
+				{/* History */}
+				<div ref={historyRef} className="flex-1 overflow-y-auto p-3 space-y-2">
+					{showEmptyState && <EmptyState />}
+
+					{history.map((event, index) => (
+						<EventCard key={index} event={event} />
+					))}
+
+					{/* Activity indicator at bottom */}
+					{activity && <ActivityCard activity={activity} />}
+				</div>
+			</main>
+
+			{/* Input */}
+			<footer className="border-t p-3">
+				<InputGroup className="relative rounded-lg">
+					<InputGroupTextarea
+						ref={textareaRef}
+						placeholder="Describe your task... (Enter to send)"
+						value={task}
+						onChange={(e) => setTask(e.target.value)}
+						onKeyDown={handleKeyDown}
+						disabled={isRunning}
+						className="text-xs pr-12 min-h-10"
+					/>
+					<InputGroupAddon align="inline-end" className="absolute bottom-0 right-0">
+						{isRunning ? (
+							<InputGroupButton
+								size="icon-sm"
+								variant="destructive"
+								onClick={handleStop}
+								className="size-7"
+							>
+								<Square className="size-3" />
+							</InputGroupButton>
+						) : (
+							<InputGroupButton
+								size="icon-sm"
+								variant="default"
+								onClick={() => handleSubmit()}
+								disabled={!task.trim()}
+								className="size-7"
+							>
+								<Send className="size-3" />
+							</InputGroupButton>
+						)}
+					</InputGroupAddon>
+				</InputGroup>
+			</footer>
+		</div>
+	)
+}
--- a/packages/extension/src/entrypoints/sidepanel/components/ConfigPanel.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/components/ConfigPanel.tsx
@@ -0,0 +1,82 @@
+import { Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import type { LLMConfig } from '@/utils'
+import { DEMO_API_KEY, DEMO_BASE_URL, DEMO_MODEL } from '@/utils/constants'
+
+interface ConfigPanelProps {
+	config: LLMConfig | null
+	onSave: (config: LLMConfig) => Promise<void>
+	onClose: () => void
+}
+
+export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
+	const [apiKey, setApiKey] = useState(config?.apiKey || DEMO_API_KEY)
+	const [baseURL, setBaseURL] = useState(config?.baseURL || DEMO_BASE_URL)
+	const [model, setModel] = useState(config?.model || DEMO_MODEL)
+	const [saving, setSaving] = useState(false)
+
+	// Update local state when config prop changes
+	useEffect(() => {
+		setApiKey(config?.apiKey || DEMO_API_KEY)
+		setBaseURL(config?.baseURL || DEMO_BASE_URL)
+		setModel(config?.model || DEMO_MODEL)
+	}, [config])
+
+	const handleSave = async () => {
+		setSaving(true)
+		try {
+			await onSave({ apiKey, baseURL, model })
+		} finally {
+			setSaving(false)
+		}
+	}
+
+	return (
+		<div className="flex flex-col gap-4 p-4">
+			<h2 className="text-base font-semibold">Settings</h2>
+
+			<div className="flex flex-col gap-1.5">
+				<label className="text-xs text-muted-foreground">Base URL</label>
+				<Input
+					placeholder="https://api.openai.com/v1"
+					value={baseURL}
+					onChange={(e) => setBaseURL(e.target.value)}
+					className="text-xs h-8"
+				/>
+			</div>
+
+			<div className="flex flex-col gap-1.5">
+				<label className="text-xs text-muted-foreground">Model</label>
+				<Input
+					placeholder="gpt-4o"
+					value={model}
+					onChange={(e) => setModel(e.target.value)}
+					className="text-xs h-8"
+				/>
+			</div>
+
+			<div className="flex flex-col gap-1.5">
+				<label className="text-xs text-muted-foreground">API Key</label>
+				<Input
+					type="password"
+					placeholder="sk-..."
+					value={apiKey}
+					onChange={(e) => setApiKey(e.target.value)}
+					className="text-xs h-8"
+				/>
+			</div>
+
+			<div className="flex gap-2 mt-2">
+				<Button variant="outline" onClick={onClose} className="flex-1 h-8 text-xs">
+					Cancel
+				</Button>
+				<Button onClick={handleSave} disabled={saving} className="flex-1 h-8 text-xs">
+					{saving ? <Loader2 className="size-3 animate-spin" /> : 'Save'}
+				</Button>
+			</div>
+		</div>
+	)
+}
--- a/packages/extension/src/entrypoints/sidepanel/components/ErrorBoundary.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/components/ErrorBoundary.tsx
@@ -0,0 +1,49 @@
+import { AlertTriangle, RotateCcw } from 'lucide-react'
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+import { Button } from '@/components/ui/button'
+
+interface Props {
+	children: ReactNode
+}
+
+interface State {
+	hasError: boolean
+	error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+	state: State = { hasError: false, error: null }
+
+	static getDerivedStateFromError(error: Error): State {
+		return { hasError: true, error }
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		console.error('[ErrorBoundary]', error, errorInfo.componentStack)
+	}
+
+	handleReload = () => {
+		window.location.reload()
+	}
+
+	render() {
+		if (!this.state.hasError) {
+			return this.props.children
+		}
+
+		return (
+			<div className="flex flex-col items-center justify-center h-screen bg-background p-6 text-center">
+				<AlertTriangle className="size-12 text-destructive mb-4" />
+				<h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
+				<p className="text-sm text-muted-foreground mb-4 max-w-xs">
+					{this.state.error?.message || 'An unexpected error occurred'}
+				</p>
+				<Button variant="outline" size="sm" onClick={this.handleReload}>
+					<RotateCcw className="size-3.5 mr-2" />
+					Reload Panel
+				</Button>
+			</div>
+		)
+	}
+}
--- a/packages/extension/src/entrypoints/sidepanel/components/cards.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/components/cards.tsx
@@ -0,0 +1,316 @@
+import type {
+	AgentActivity,
+	AgentErrorEvent,
+	AgentStepEvent,
+	HistoricalEvent,
+	ObservationEvent,
+	RetryEvent,
+} from '@page-agent/core'
+import {
+	CheckCircle,
+	ChevronDown,
+	ChevronRight,
+	Eye,
+	Globe,
+	Keyboard,
+	Mouse,
+	MoveVertical,
+	RefreshCw,
+	Sparkles,
+	XCircle,
+	Zap,
+} from 'lucide-react'
+import { Fragment, useState } from 'react'
+
+import { cn } from '@/lib/utils'
+
+// Result card for done action
+function ResultCard({
+	success,
+	text,
+	children,
+}: {
+	success: boolean
+	text: string
+	children?: React.ReactNode
+}) {
+	return (
+		<div
+			className={cn(
+				'rounded-lg border p-3',
+				success ? 'border-green-500/30 bg-green-500/10' : 'border-destructive/30 bg-destructive/10'
+			)}
+		>
+			<div className="flex items-center gap-2 mb-2">
+				{success ? (
+					<CheckCircle className="size-3.5 text-green-500" />
+				) : (
+					<XCircle className="size-3.5 text-destructive" />
+				)}
+				<span
+					className={cn(
+						'text-xs font-medium',
+						success ? 'text-green-600 dark:text-green-400' : 'text-destructive'
+					)}
+				>
+					Result: {success ? 'Success' : 'Failed'}
+				</span>
+			</div>
+			<p className="text-xs text-[11px] text-muted-foreground pl-5 whitespace-pre-wrap">{text}</p>
+			{children}
+		</div>
+	)
+}
+
+// Single reflection item with truncation
+function ReflectionItem({ icon, value }: { icon: string; value: string }) {
+	const [expanded, setExpanded] = useState(false)
+
+	return (
+		<Fragment>
+			<span className="text-xs flex justify-center">{icon}</span>
+			<span
+				className={cn(
+					'text-[11px] text-muted-foreground cursor-pointer hover:text-muted-foreground/70',
+					!expanded && 'line-clamp-1'
+				)}
+				onClick={() => setExpanded(!expanded)}
+			>
+				{value}
+			</span>
+		</Fragment>
+	)
+}
+
+// Reflection section in step card
+function ReflectionSection({
+	reflection,
+}: {
+	reflection: {
+		evaluation_previous_goal?: string
+		memory?: string
+		next_goal?: string
+	}
+}) {
+	const items = [
+		{ icon: '☑️', label: 'eval', value: reflection.evaluation_previous_goal },
+		{ icon: '🧠', label: 'memory', value: reflection.memory },
+		{ icon: '🎯', label: 'goal', value: reflection.next_goal },
+	].filter((item) => item.value)
+
+	if (items.length === 0) return null
+
+	return (
+		<div className="mb-2">
+			{/* <div className="text-[11px] font-semibold text-foreground uppercase tracking-wide mb-2">
+				Reflection
+			</div> */}
+			<div className="grid grid-cols-[14px_1fr] gap-x-2 gap-y-2">
+				{items.map((item) => (
+					<ReflectionItem key={item.label} icon={item.icon} value={item.value!} />
+				))}
+			</div>
+		</div>
+	)
+}
+
+// Get icon for action type
+function ActionIcon({ name, className }: { name: string; className?: string }) {
+	const icons: Record<string, React.ReactNode> = {
+		click_element_by_index: <Mouse className={className} />,
+		input: <Keyboard className={className} />,
+		scroll: <MoveVertical className={className} />,
+		go_to_url: <Globe className={className} />,
+	}
+	return icons[name] || <Zap className={className} />
+}
+
+// Raw response section (collapsible, for debugging)
+function RawResponseSection({ rawResponse }: { rawResponse: unknown }) {
+	const [expanded, setExpanded] = useState(false)
+
+	return (
+		<div className="mt-2 border-t border-dashed pt-2">
+			<button
+				type="button"
+				onClick={() => setExpanded(!expanded)}
+				className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+			>
+				{expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+				<span>Raw Response</span>
+			</button>
+			{expanded && (
+				<pre
+					className="mt-1.5 p-2 text-[10px] bg-muted/50 rounded overflow-x-auto max-h-60 overflow-y-auto select-all"
+					style={{ userSelect: 'all' }}
+				>
+					{JSON.stringify(rawResponse, null, 4)}
+				</pre>
+			)}
+		</div>
+	)
+}
+
+function StepCard({ event }: { event: AgentStepEvent }) {
+	return (
+		<div className="rounded-lg border-l-2 border-l-blue-500/50 border bg-muted/40 p-2.5">
+			<div className="text-[11px] font-semibold text-foreground tracking-wide mb-2">
+				Step #{event.stepIndex! + 1}
+			</div>
+
+			{/* Reflection */}
+			{event.reflection && <ReflectionSection reflection={event.reflection} />}
+
+			{/* Action */}
+			{event.action && (
+				<div>
+					<div className="text-[11px] font-semibold text-foreground tracking-wide mb-1">
+						Actions
+					</div>
+					<div className="flex items-start gap-2">
+						<ActionIcon
+							name={event.action.name}
+							className="size-3.5 text-blue-500 shrink-0 mt-0.5"
+						/>
+						<div className="flex-1 min-w-0">
+							<p className="text-xs text-foreground/80 mb-0.5">
+								<span className="font-medium text-foreground/70">{event.action.name}</span>
+								{event.action.name !== 'done' && (
+									<span className="text-muted-foreground/70 ml-1.5">
+										{JSON.stringify(event.action.input)}
+									</span>
+								)}
+							</p>
+							<p className="text-[11px] text-muted-foreground/70">└ {event.action.output}</p>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* Raw Response */}
+			{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
+		</div>
+	)
+}
+
+function ObservationCard({ event }: { event: ObservationEvent }) {
+	return (
+		<div className="rounded-lg border-l-2 border-l-green-500/50 border bg-muted/40 p-2.5">
+			{/* <div className="text-[11px] font-semibold text-foreground uppercase tracking-wide mb-2">
+				Observation
+			</div> */}
+			<div className="flex items-start gap-2">
+				<Eye className="size-3.5 text-green-500 shrink-0 mt-0.5" />
+				<span className="text-[11px] text-muted-foreground">{event.content}</span>
+			</div>
+		</div>
+	)
+}
+
+function RetryCard({ event }: { event: RetryEvent }) {
+	return (
+		<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-2.5">
+			<div className="flex items-start gap-1.5">
+				<RefreshCw className="size-3 text-amber-500 shrink-0 mt-0.5" />
+				<span className="text-xs text-amber-600 dark:text-amber-400">
+					{event.message} ({event.attempt}/{event.maxAttempts})
+				</span>
+			</div>
+		</div>
+	)
+}
+
+function ErrorCard({ event }: { event: AgentErrorEvent }) {
+	return (
+		<div className="rounded-lg border border-destructive/30 bg-destructive/10 p-2.5">
+			<div className="flex items-start gap-1.5">
+				<XCircle className="size-3 text-destructive shrink-0 mt-0.5" />
+				<span className="text-xs text-destructive">{event.message}</span>
+			</div>
+			{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
+		</div>
+	)
+}
+
+// History event card component
+export function EventCard({ event }: { event: HistoricalEvent }) {
+	// Done action - show as result card
+	if (event.type === 'step' && event.action?.name === 'done') {
+		const input = event.action.input as { text?: string; success?: boolean }
+		return (
+			<>
+				<StepCard event={event as AgentStepEvent} />
+				<ResultCard
+					success={input?.success ?? true}
+					text={input?.text || event.action.output || ''}
+				>
+					{!event.rawResponse || <RawResponseSection rawResponse={event.rawResponse as any} />}
+				</ResultCard>
+			</>
+		)
+	}
+
+	if (event.type === 'step') {
+		return <StepCard event={event as AgentStepEvent} />
+	}
+
+	if (event.type === 'observation') {
+		return <ObservationCard event={event as ObservationEvent} />
+	}
+
+	if (event.type === 'retry') {
+		return <RetryCard event={event as RetryEvent} />
+	}
+
+	if (event.type === 'error') {
+		return <ErrorCard event={event as AgentErrorEvent} />
+	}
+
+	return null
+}
+
+// Activity card with animation
+export function ActivityCard({ activity }: { activity: AgentActivity }) {
+	const getActivityInfo = () => {
+		switch (activity.type) {
+			case 'thinking':
+				return { text: 'Thinking...', color: 'text-blue-500' }
+			case 'executing':
+				return { text: `Executing ${activity.tool}...`, color: 'text-amber-500' }
+			case 'executed':
+				return { text: `Done: ${activity.tool}`, color: 'text-green-500' }
+			case 'retrying':
+				return {
+					text: `Retrying (${activity.attempt}/${activity.maxAttempts})...`,
+					color: 'text-amber-500',
+				}
+			case 'error':
+				return { text: activity.message, color: 'text-destructive' }
+		}
+	}
+
+	const info = getActivityInfo()
+
+	return (
+		<div className="flex items-center gap-2 rounded-lg border bg-muted/40 p-2.5 animate-pulse">
+			<div className="relative">
+				<Sparkles className={cn('size-3.5', info.color)} />
+				<span
+					className={cn(
+						'absolute -top-0.5 -right-0.5 size-1.5 rounded-full animate-ping',
+						activity.type === 'thinking'
+							? 'bg-blue-500'
+							: activity.type === 'executing'
+								? 'bg-amber-500'
+								: activity.type === 'retrying'
+									? 'bg-amber-500'
+									: activity.type === 'error'
+										? 'bg-destructive'
+										: 'bg-green-500'
+					)}
+				/>
+			</div>
+			<span className={cn('text-xs', info.color)}>{info.text}</span>
+		</div>
+	)
+}
--- a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/components/misc.tsx
@@ -0,0 +1,46 @@
+import type { AgentStatus } from '@page-agent/core'
+
+import { cn } from '@/lib/utils'
+
+// Status dot indicator
+export function StatusDot({ status }: { status: AgentStatus }) {
+	const colorClass = {
+		idle: 'bg-muted-foreground',
+		running: 'bg-blue-500',
+		completed: 'bg-green-500',
+		error: 'bg-destructive',
+	}[status]
+
+	const label = {
+		idle: 'Ready',
+		running: 'Running',
+		completed: 'Done',
+		error: 'Error',
+	}[status]
+
+	return (
+		<div className="flex items-center gap-1.5">
+			<span
+				className={cn('size-2 rounded-full', colorClass, status === 'running' && 'animate-pulse')}
+			/>
+			<span className="text-xs text-muted-foreground">{label}</span>
+		</div>
+	)
+}
+
+export function Logo({ className }: { className?: string }) {
+	return <img src="/assets/page-agent-256.webp" alt="Page Agent" className={cn('', className)} />
+}
+
+// Empty state with logo
+export function EmptyState() {
+	return (
+		<div className="flex flex-col items-center justify-center h-full gap-3 text-center px-6">
+			<Logo className="size-20 opacity-80" />
+			<div>
+				<h2 className="text-sm font-medium text-foreground">Page Agent Ext</h2>
+				<p className="text-xs text-muted-foreground mt-1">Enter a task to automate this page</p>
+			</div>
+		</div>
+	)
+}
--- a/packages/extension/src/entrypoints/sidepanel/index.html
+++ b/packages/extension/src/entrypoints/sidepanel/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/png" href="/assets/page-agent-64.png" />
+		<title>Page Agent</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="./main.tsx"></script>
+	</body>
+</html>
--- a/packages/extension/src/entrypoints/sidepanel/main.tsx
+++ b/packages/extension/src/entrypoints/sidepanel/main.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+import { ErrorBoundary } from './components/ErrorBoundary'
+
+import '@/assets/index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+	<React.StrictMode>
+		<ErrorBoundary>
+			<App />
+		</ErrorBoundary>
+	</React.StrictMode>
+)
--- a/packages/extension/src/lib/utils.ts
+++ b/packages/extension/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}
--- a/packages/extension/src/types/assets.d.ts
+++ b/packages/extension/src/types/assets.d.ts
@@ -0,0 +1,25 @@
+// Asset type declarations
+declare module '*.webp' {
+	const src: string
+	export default src
+}
+
+declare module '*.png' {
+	const src: string
+	export default src
+}
+
+declare module '*.jpg' {
+	const src: string
+	export default src
+}
+
+declare module '*.jpeg' {
+	const src: string
+	export default src
+}
+
+declare module '*.svg' {
+	const src: string
+	export default src
+}
--- a/packages/extension/src/utils/constants.ts
+++ b/packages/extension/src/utils/constants.ts
@@ -0,0 +1,10 @@
+// Demo build (auto-init with demo LLM, for quick testing)
+export const CDN_DEMO_URL = 'https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js'
+export const CDN_DEMO_CN_URL =
+	'https://registry.npmmirror.com/page-agent/latest/files/dist/iife/page-agent.demo.js'
+
+// Demo LLM for website testing
+export const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+export const DEMO_BASE_URL =
+	'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
+export const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
--- a/packages/extension/src/utils/index.ts
+++ b/packages/extension/src/utils/index.ts
@@ -0,0 +1,28 @@
+/**
+ * Check if a URL can run content scripts.
+ */
+export function isContentScriptAllowed(url: string | undefined): boolean {
+	if (!url) return false
+
+	const restrictedPatterns = [
+		/^chrome:\/\//,
+		/^chrome-extension:\/\//,
+		/^about:/,
+		/^edge:\/\//,
+		/^brave:\/\//,
+		/^opera:\/\//,
+		/^vivaldi:\/\//,
+		/^file:\/\//,
+		/^view-source:/,
+		/^devtools:\/\//,
+	]
+
+	return !restrictedPatterns.some((pattern) => pattern.test(url))
+}
+
+/** LLM configuration */
+export interface LLMConfig {
+	apiKey: string
+	baseURL: string
+	model: string
+}
--- a/packages/extension/tsconfig.json
+++ b/packages/extension/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "./.wxt/tsconfig.json",
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+        "useDefineForClassFields": true,
+        "noEmit": false,
+        "allowImportingTsExtensions": false,
+        "strictNullChecks": true,
+        "jsx": "react-jsx",
+        "baseUrl": ".",
+        "paths": {
+            // Self root
+            "@/*": ["src/*"],
+
+            "@page-agent/llms": ["../llms/src/index.ts"],
+            "@page-agent/page-controller": ["../page-controller/src/PageController.ts"],
+            "@page-agent/core": ["../core/src/PageAgentCore.ts"],
+            "@page-agent/ui": ["../ui/src/index.ts"]
+        }
+    },
+    "references": [
+        //
+        { "path": "../llms" },
+        { "path": "../page-controller" },
+        { "path": "../core" },
+        { "path": "../ui" }
+    ]
+}
--- a/packages/extension/wxt.config.js
+++ b/packages/extension/wxt.config.js
@@ -0,0 +1,51 @@
+import tailwindcss from '@tailwindcss/vite'
+import { mkdirSync } from 'node:fs'
+import { defineConfig } from 'wxt'
+
+const chromeProfile = '.wxt/chrome-data'
+mkdirSync(chromeProfile, { recursive: true })
+
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+	srcDir: 'src',
+	modules: ['@wxt-dev/module-react'],
+	webExt: {
+		chromiumProfile: chromeProfile,
+		keepProfileChanges: true,
+		chromiumArgs: ['--hide-crash-restore-bubble'],
+	},
+	vite: () => ({
+		plugins: [tailwindcss()],
+		optimizeDeps: {
+			force: true,
+		},
+		build: {
+			minify: false,
+			chunkSizeWarningLimit: 2000,
+			cssCodeSplit: true,
+			rollupOptions: {
+				onwarn: function (message, handler) {
+					if (message.code === 'EVAL') return
+					handler(message)
+				},
+			},
+		},
+	}),
+	manifest: {
+		name: 'Page Agent Ext',
+		description:
+			'AI-powered browser automation assistant. Control web pages with natural language.',
+		homepage_url: 'https://alibaba.github.io/page-agent/',
+		permissions: ['tabs', 'tabGroups', 'sidePanel', 'storage'],
+		host_permissions: ['<all_urls>'],
+		icons: {
+			64: 'assets/page-agent-64.png',
+		},
+		action: {
+			default_title: 'Open Page Agent',
+		},
+		side_panel: {
+			default_path: 'sidepanel/index.html',
+		},
+	},
+})
--- a/packages/page-controller/src/mask/SimulatorMask.ts
+++ b/packages/page-controller/src/mask/SimulatorMask.ts
@@ -6,6 +6,7 @@ import styles from './SimulatorMask.module.css'
 import cursorStyles from './cursor.module.css'

 export class SimulatorMask {
+	shown: boolean = false
 	wrapper = document.createElement('div')
 	motion = new Motion({
 		mode: isPageDark() ? 'dark' : 'light',
@@ -140,6 +141,9 @@ export class SimulatorMask {
 	}

 	show() {
+		if (this.shown) return
+
+		this.shown = true
 		this.motion.start()
 		this.motion.fadeIn()

@@ -155,6 +159,9 @@ export class SimulatorMask {
 	}

 	hide() {
+		if (!this.shown) return
+
+		this.shown = false
 		this.motion.fadeOut()
 		this.motion.pause()