From 252f550c04e3385a9546aa235006a7b6fd081570 Mon Sep 17 00:00:00 2001
From: Simon <10131203+gaomeng1900@users.noreply.github.com>
Date: Wed, 18 Mar 2026 20:25:54 +0800
Subject: [PATCH] style(ext): fix ai-motion overflow; wording; launcher info

---
 .../extension/src/components/ConfigPanel.tsx  |  10 +-
 packages/extension/src/components/misc.tsx    |   2 +-
 .../extension/src/entrypoints/hub/App.tsx     |   6 +-
 packages/mcp/src/launcher.html                | 188 ++++++++++++++----
 4 files changed, 157 insertions(+), 49 deletions(-)

diff --git a/packages/extension/src/components/ConfigPanel.tsx b/packages/extension/src/components/ConfigPanel.tsx
index 5443ba7..60b6cbb 100644
--- a/packages/extension/src/components/ConfigPanel.tsx
+++ b/packages/extension/src/components/ConfigPanel.tsx
@@ -1,6 +1,7 @@
 import {
 	Copy,
 	CornerUpLeft,
+	ExternalLink,
 	Eye,
 	EyeOff,
 	FoldVertical,
@@ -160,8 +161,8 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 				target="_blank"
 				className="flex items-center justify-between p-3 rounded-md border bg-muted/50 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
 			>
-				Manage Page Agent Hub config
-				<CornerUpLeft className="size-3 rotate-180" />
+				Manage Page Agent Hub
+				<ExternalLink className="size-3" />
 			</a>
 
 			<div className="flex flex-col gap-1.5">
@@ -178,7 +179,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			{isTestingEndpoint(baseURL) && (
 				<div className="p-2.5 rounded-md border border-amber-500/30 bg-amber-500/5 text-[11px] text-muted-foreground leading-relaxed">
 					<Scale className="size-3 inline-block mr-1 -mt-0.5 text-amber-600" />
-					You are using the free testing API. By using this service you agree to the{' '}
+					You are using our testing API. By using this you agree to the{' '}
 					<a
 						href="https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md"
 						target="_blank"
@@ -187,7 +188,6 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 					>
 						Terms of Use & Privacy Policy
 					</a>
-					. No sensitive data. No guaranteed availability.
 				</div>
 			)}
 
@@ -223,7 +223,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 			</div>
 
 			<div className="flex flex-col gap-1.5">
-				<label className="text-xs text-muted-foreground">Language</label>
+				<label className="text-xs text-muted-foreground">Response Language</label>
 				<select
 					value={language ?? ''}
 					onChange={(e) => setLanguage((e.target.value || undefined) as LanguagePreference)}
diff --git a/packages/extension/src/components/misc.tsx b/packages/extension/src/components/misc.tsx
index d5dec53..6de0f19 100644
--- a/packages/extension/src/components/misc.tsx
+++ b/packages/extension/src/components/misc.tsx
@@ -84,7 +84,7 @@ export function MotionOverlay({ active }: { active: boolean }) {
 	return (
 		<div
 			ref={containerRef}
-			className="pointer-events-none absolute inset-0 z-10 opacity-60"
+			className="pointer-events-none absolute inset-0 z-10 opacity-60 overflow-hidden"
 			style={{ display: active ? undefined : 'none' }}
 		/>
 	)
diff --git a/packages/extension/src/entrypoints/hub/App.tsx b/packages/extension/src/entrypoints/hub/App.tsx
index 1169590..ea8c044 100644
--- a/packages/extension/src/entrypoints/hub/App.tsx
+++ b/packages/extension/src/entrypoints/hub/App.tsx
@@ -31,8 +31,6 @@ export default function App() {
 
 	return (
 		<div className="flex h-screen bg-background">
-			<MotionOverlay active={isRunning} />
-
 			{/* Left — Protocol docs */}
 			<aside className="w-80 shrink-0 border-r flex flex-col bg-muted/20">
 				<a
@@ -90,7 +88,9 @@ export default function App() {
 			</aside>
 
 			{/* Right — Live session */}
-			<main className="flex-1 flex flex-col min-w-0">
+			<main className="flex-1 flex flex-col min-w-0 relative">
+				<MotionOverlay active={isRunning} />
+
 				<header className="flex items-center justify-between border-b px-5 h-12">
 					<div className="flex items-center gap-2 text-xs text-muted-foreground">
 						<WsIcon className="size-3.5" />
diff --git a/packages/mcp/src/launcher.html b/packages/mcp/src/launcher.html
index d7efce1..a4bdd89 100644
--- a/packages/mcp/src/launcher.html
+++ b/packages/mcp/src/launcher.html
@@ -1,9 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Page Agent – Connecting</title>
+		<link rel="icon" href="https://img.alicdn.com/imgextra/i1/O1CN01mRGret1QrKiu7CFJI_!!6000000002029-2-tps-64-64.png" />
+		<title>Page Agent MCP Launcher</title>
 		<style>
 			* {
 				margin: 0;
@@ -15,7 +16,7 @@
 					system-ui,
 					-apple-system,
 					sans-serif;
-				background: #0a0a0a;
+				background: #09090b;
 				color: #e5e5e5;
 				display: flex;
 				align-items: center;
@@ -24,23 +25,37 @@
 			}
 			.card {
 				text-align: center;
-				max-width: 420px;
+				max-width: 480px;
 				padding: 3rem 2rem;
 			}
+			.logo {
+				width: 72px;
+				height: 72px;
+				border-radius: 18px;
+				margin-bottom: 1rem;
+			}
+			.badge {
+				font-size: 0.6875rem;
+				font-weight: 500;
+				color: #52525b;
+				letter-spacing: 0.05em;
+				text-transform: uppercase;
+				margin-bottom: 1.5rem;
+			}
 			h1 {
-				font-size: 1.25rem;
+				font-size: 1.35rem;
 				font-weight: 600;
 				margin-bottom: 0.5rem;
 			}
-			p {
+			.sub {
 				font-size: 0.875rem;
-				color: #a3a3a3;
-				line-height: 1.6;
+				color: #a1a1aa;
+				line-height: 1.7;
 			}
 			.spinner {
 				width: 32px;
 				height: 32px;
-				border: 3px solid #333;
+				border: 3px solid #27272a;
 				border-top-color: #fff;
 				border-radius: 50%;
 				animation: spin 0.8s linear infinite;
@@ -58,72 +73,165 @@
 			a:hover {
 				text-decoration: underline;
 			}
+
 			.install {
 				display: none;
 			}
 			.install.show {
 				display: block;
 			}
-			.btn {
-				display: inline-block;
-				margin-top: 1rem;
-				padding: 0.5rem 1.25rem;
+
+			.tips {
+				margin-top: 1.75rem;
+				text-align: left;
+				background: #18181b;
+				border: 1px solid #27272a;
+				border-radius: 12px;
+				padding: 1.25rem 1.5rem;
+			}
+			.tips li {
+				font-size: 0.8125rem;
+				color: #a1a1aa;
+				line-height: 1.7;
+				margin-left: 1rem;
+			}
+			.tips li + li {
+				margin-top: 0.35rem;
+			}
+
+			.store-btn {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.625rem;
+				margin-top: 1.5rem;
+				padding: 0.625rem 1.5rem;
 				background: #2563eb;
 				color: #fff;
-				border-radius: 0.5rem;
+				border-radius: 10px;
 				font-size: 0.875rem;
 				font-weight: 500;
+				transition: background 0.15s;
 			}
-			.btn:hover {
+			.store-btn:hover {
 				background: #1d4ed8;
 				text-decoration: none;
 			}
+			.store-btn img {
+				width: 20px;
+				height: 20px;
+			}
+
+			.links {
+				margin-top: 1.75rem;
+				display: flex;
+				justify-content: center;
+				gap: 1.5rem;
+				font-size: 0.8125rem;
+			}
+			.links a {
+				color: #71717a;
+				transition: color 0.15s;
+			}
+			.links a:hover {
+				color: #a1a1aa;
+				text-decoration: none;
+			}
 		</style>
 	</head>
 	<body>
 		<div class="card">
+			<img
+				class="logo"
+				src="https://img.alicdn.com/imgextra/i3/O1CN01JPT4Fj1FJTfmHfNxO_!!6000000000466-49-tps-512-512.webp"
+				alt="Page Agent"
+			/>
+			<div class="badge">Page Agent MCP Launcher</div>
+
 			<div id="connecting">
 				<div class="spinner"></div>
-				<h1>Connecting to Page Agent</h1>
-				<p>Opening the hub in your browser...</p>
+				<h1 data-i18n="connecting_title">Connecting to Page Agent</h1>
+				<p class="sub" data-i18n="connecting_sub">Opening the hub in your browser…</p>
 			</div>
+
 			<div id="install" class="install">
-				<h1>Extension Not Found</h1>
-				<p>The Page Agent browser extension is required.<br />Install it and try again.</p>
-				<a class="btn" href="__STORE_URL__" target="_blank">Install Extension</a>
-				<p style="margin-top: 1.5rem; font-size: 0.75rem">
-					After installing, restart the MCP server or refresh this page.
+				<h1 data-i18n="install_title">Extension Required</h1>
+				<p class="sub" data-i18n="install_sub">
+					Page Agent requires the latest browser extension to work.
 				</p>
+
+				<a class="store-btn" href="__STORE_URL__" target="_blank">
+					<img
+						src="https://img.alicdn.com/imgextra/i3/O1CN01JpW0Vo1sR3FpiZKFM_!!6000000005762-55-tps-192-192.svg"
+						alt=""
+					/>
+					<span data-i18n="install_btn">Install from Chrome Web Store</span>
+				</a>
+
+				<ul class="tips">
+					<li data-i18n="tip_outdated">
+						If the extension is outdated, please update it to the latest version.
+					</li>
+					<li data-i18n="tip_other_browser">
+						If the extension is not installed in this browser, open this page from the
+						browser that has it installed.
+					</li>
+					<li data-i18n="tip_refresh">Refresh this page after installing or updating.</li>
+				</ul>
+			</div>
+
+			<div class="links">
+				<a href="https://alibaba.github.io/page-agent/docs/introduction/overview" target="_blank" data-i18n="link_docs">Docs</a>
+				<a href="https://github.com/alibaba/page-agent/issues" target="_blank" data-i18n="link_issues">Report an Issue</a>
 			</div>
 		</div>
-		<script>
-			;(function () {
-				var EXT_ID = '__EXT_ID__'
-				var wsPort = __WS_PORT__
 
-				function showInstall() {
+		<script>
+			{
+				const EXT_ID = '__EXT_ID__'
+				const wsPort = __WS_PORT__
+
+				const zh = {
+					connecting_title: '正在连接 Page Agent',
+					connecting_sub: '正在浏览器中打开 Hub…',
+					install_title: '需要安装浏览器插件',
+					install_sub: 'Page Agent 需要安装最新版浏览器插件才能运行。',
+					install_btn: '从 Chrome 应用商店安装',
+					tip_outdated: '如果插件版本过旧，请更新到最新版本。',
+					tip_other_browser:
+						'如果该浏览器中未安装插件，请从装有插件的浏览器打开此页面。',
+					tip_refresh: '安装或更新后，请刷新此页面。',
+					link_docs: '文档',
+					link_issues: '问题反馈',
+				}
+
+				if (/^zh\b/i.test(navigator.language)) {
+					document.querySelectorAll('[data-i18n]').forEach((el) => {
+						const key = el.getAttribute('data-i18n')
+						if (zh[key]) el.textContent = zh[key]
+					})
+				}
+
+				const showInstall = () => {
 					document.getElementById('connecting').style.display = 'none'
 					document.getElementById('install').classList.add('show')
 				}
 
 				try {
-					if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
+					if (!globalThis.chrome?.runtime?.sendMessage) {
 						showInstall()
-						return
-					}
-					chrome.runtime.sendMessage(
-						EXT_ID,
-						{ type: 'OPEN_HUB', wsPort: wsPort },
-						function (response) {
-							if (chrome.runtime.lastError || !response || !response.ok) {
-								showInstall()
+					} else {
+						chrome.runtime.sendMessage(
+							EXT_ID,
+							{ type: 'OPEN_HUB', wsPort },
+							(response) => {
+								if (chrome.runtime.lastError || !response?.ok) showInstall()
 							}
-						}
-					)
-				} catch (e) {
+						)
+					}
+				} catch {
 					showInstall()
 				}
-			})()
+			}
 		</script>
 	</body>
 </html>