refactor(ui): implement dedicated package @page-agent/ui

package-lock.json

@@ -10,6 +10,7 @@
 			"license": "MIT",
 			"workspaces": [
 				"packages/page-controller",
+				"packages/ui",
 				"packages/page-agent",
 				"packages/website"
 			],
@@ -1560,6 +1561,10 @@
 			"resolved": "packages/page-controller",
 			"link": true
 		},
+		"node_modules/@page-agent/ui": {
+			"resolved": "packages/ui",
+			"link": true
+		},
 		"node_modules/@page-agent/website": {
 			"resolved": "packages/website",
 			"link": true
@@ -7003,7 +7008,7 @@
 			"license": "MIT",
 			"dependencies": {
 				"@page-agent/page-controller": "0.0.7",
-				"ai-motion": "^0.4.7",
+				"@page-agent/ui": "0.0.7",
 				"chalk": "^5.6.2",
 				"zod": "^4.1.12"
 			}
@@ -7013,6 +7018,14 @@
 			"version": "0.0.7",
 			"license": "MIT"
 		},
+		"packages/ui": {
+			"name": "@page-agent/ui",
+			"version": "0.0.7",
+			"license": "MIT",
+			"dependencies": {
+				"ai-motion": "^0.4.7"
+			}
+		},
 		"packages/website": {
 			"name": "@page-agent/website",
 			"version": "0.0.7",

package.json

@@ -5,6 +5,7 @@
 	"type": "module",
 	"workspaces": [
 		"packages/page-controller",
+		"packages/ui",
 		"packages/page-agent",
 		"packages/website"
 	],

packages/page-agent/package.json

@@ -14,9 +14,7 @@
 		}
 	},
 	"files": [
-		"dist/",
+		"dist/"
-		"README.md",
-		"LICENSE"
 	],
 	"description": "GUI agent for web applications - add intelligent automation to any webpage with a single script",
 	"keywords": [
@@ -47,9 +45,9 @@
 		"postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
 	},
 	"dependencies": {
-		"ai-motion": "^0.4.7",
 		"chalk": "^5.6.2",
 		"zod": "^4.1.12",
-		"@page-agent/page-controller": "0.0.7"
+		"@page-agent/page-controller": "0.0.7",
+		"@page-agent/ui": "0.0.7"
 	}
 }

packages/page-agent/src/PageAgent.ts

@@ -3,6 +3,7 @@
  * All rights reserved.
  */
 import { PageController } from '@page-agent/page-controller'
+import { Panel, SimulatorMask } from '@page-agent/ui'
 import chalk from 'chalk'
 import zod from 'zod'
 
@@ -11,8 +12,6 @@ import { MAX_STEPS } from './config/constants'
 import { LLM, type Tool } from './llms'
 import SYSTEM_PROMPT from './prompts/system_prompt.md?raw'
 import { tools } from './tools'
-import { Panel } from './ui/Panel'
-import { SimulatorMask } from './ui/SimulatorMask'
 import { trimLines, uid, waitUntil } from './utils'
 import { assert } from './utils/assert'
 

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

@@ -1,7 +1,7 @@
 import type { PageControllerConfig } from '@page-agent/page-controller'
+import type { SupportedLanguage } from '@page-agent/ui'
 
 import type { AgentHistory, ExecutionResult, PageAgent } from '../PageAgent'
-import type { SupportedLanguage } from '../i18n'
 import type { PageAgentTool } from '../tools'
 import {
 	DEFAULT_API_KEY,

packages/page-agent/vite.config.js

@@ -61,6 +61,7 @@ const umdConfig = {
 	resolve: {
 		alias: {
 			'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
+			'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
 		},
 	},
 	build: {

packages/page-controller/package.json

@@ -13,9 +13,7 @@
 		}
 	},
 	"files": [
-		"dist/",
+		"dist/"
-		"README.md",
-		"LICENSE"
 	],
 	"description": "Page controller for page-agent - DOM operations and element interactions",
 	"keywords": [

packages/ui/package.json

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

packages/ui/src/Panel.ts

@@ -1,6 +1,6 @@
-import { I18n, type SupportedLanguage } from '../i18n'
-import { truncate } from '../utils'
 import { type Step, UIState } from './UIState'
+import { I18n, type SupportedLanguage } from './i18n'
+import { truncate } from './utils'
 
 import styles from './Panel.module.css'
 

packages/ui/src/SimulatorMask.ts

@@ -1,6 +1,6 @@
 import { Motion } from 'ai-motion'
 
-import { isPageDark } from '../utils/checkDarkMode'
+import { isPageDark } from './checkDarkMode'
 
 import styles from './SimulatorMask.module.css'
 import cursorStyles from './cursor.module.css'

packages/ui/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.module.css' {
+	const classes: Record<string, string>
+	export default classes
+}

packages/ui/src/index.ts

@@ -0,0 +1,4 @@
+export { Panel, type PanelConfig, type PanelUpdate } from './Panel'
+export { SimulatorMask } from './SimulatorMask'
+export { UIState, type Step, type AgentStatus } from './UIState'
+export { I18n, type SupportedLanguage, type TranslationKey } from './i18n'

packages/ui/src/utils.ts

@@ -0,0 +1,6 @@
+export function truncate(text: string, maxLength: number): string {
+	if (text.length > maxLength) {
+		return text.substring(0, maxLength) + '...'
+	}
+	return text
+}

packages/ui/tsconfig.dts.json

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

packages/ui/tsconfig.json

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

packages/ui/vite.config.js

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

packages/website/vite.config.js

@@ -20,6 +20,7 @@ export default defineConfig({
 
 			// Monorepo packages (always bundle local code instead of npm versions)
 			'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
+			'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
 			'page-agent': resolve(__dirname, '../page-agent/src/PageAgent.ts'),
 		},
 	},

tsconfig.json

@@ -2,6 +2,7 @@
 	"extends": "./tsconfig.base.json",
 	"references": [
 		{ "path": "./packages/page-controller" },
+		{ "path": "./packages/ui" },
 		{ "path": "./packages/page-agent" },
 		{ "path": "./packages/website" }
 	],