style(ext): fix ai-motion overflow; wording; launcher info
This commit is contained in:
Simon
@@ -1,6 +1,7 @@
|
|||||||
import {
|
import {
|
||||||
Copy,
|
Copy,
|
||||||
CornerUpLeft,
|
CornerUpLeft,
|
||||||
|
ExternalLink,
|
||||||
Eye,
|
Eye,
|
||||||
EyeOff,
|
EyeOff,
|
||||||
FoldVertical,
|
FoldVertical,
|
||||||
@@ -160,8 +161,8 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
|||||||
target="_blank"
|
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"
|
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
|
Manage Page Agent Hub
|
||||||
<CornerUpLeft className="size-3 rotate-180" />
|
<ExternalLink className="size-3" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div className="flex flex-col gap-1.5">
|
<div className="flex flex-col gap-1.5">
|
||||||
@@ -178,7 +179,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
|||||||
{isTestingEndpoint(baseURL) && (
|
{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">
|
<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" />
|
<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
|
<a
|
||||||
href="https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md"
|
href="https://github.com/alibaba/page-agent/blob/main/docs/terms-and-privacy.md"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -187,7 +188,6 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
|||||||
>
|
>
|
||||||
Terms of Use & Privacy Policy
|
Terms of Use & Privacy Policy
|
||||||
</a>
|
</a>
|
||||||
. No sensitive data. No guaranteed availability.
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -223,7 +223,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-1.5">
|
<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
|
<select
|
||||||
value={language ?? ''}
|
value={language ?? ''}
|
||||||
onChange={(e) => setLanguage((e.target.value || undefined) as LanguagePreference)}
|
onChange={(e) => setLanguage((e.target.value || undefined) as LanguagePreference)}
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export function MotionOverlay({ active }: { active: boolean }) {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={containerRef}
|
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' }}
|
style={{ display: active ? undefined : 'none' }}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -31,8 +31,6 @@ export default function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-background">
|
<div className="flex h-screen bg-background">
|
||||||
<MotionOverlay active={isRunning} />
|
|
||||||
|
|
||||||
{/* Left — Protocol docs */}
|
{/* Left — Protocol docs */}
|
||||||
<aside className="w-80 shrink-0 border-r flex flex-col bg-muted/20">
|
<aside className="w-80 shrink-0 border-r flex flex-col bg-muted/20">
|
||||||
<a
|
<a
|
||||||
@@ -90,7 +88,9 @@ export default function App() {
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
{/* Right — Live session */}
|
{/* 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">
|
<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">
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
<WsIcon className="size-3.5" />
|
<WsIcon className="size-3.5" />
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -15,7 +16,7 @@
|
|||||||
system-ui,
|
system-ui,
|
||||||
-apple-system,
|
-apple-system,
|
||||||
sans-serif;
|
sans-serif;
|
||||||
background: #0a0a0a;
|
background: #09090b;
|
||||||
color: #e5e5e5;
|
color: #e5e5e5;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -24,23 +25,37 @@
|
|||||||
}
|
}
|
||||||
.card {
|
.card {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 420px;
|
max-width: 480px;
|
||||||
padding: 3rem 2rem;
|
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 {
|
h1 {
|
||||||
font-size: 1.25rem;
|
font-size: 1.35rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
p {
|
.sub {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: #a3a3a3;
|
color: #a1a1aa;
|
||||||
line-height: 1.6;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
.spinner {
|
.spinner {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border: 3px solid #333;
|
border: 3px solid #27272a;
|
||||||
border-top-color: #fff;
|
border-top-color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 0.8s linear infinite;
|
animation: spin 0.8s linear infinite;
|
||||||
@@ -58,72 +73,165 @@
|
|||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.install {
|
.install {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.install.show {
|
.install.show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
.tips {
|
||||||
margin-top: 1rem;
|
margin-top: 1.75rem;
|
||||||
padding: 0.5rem 1.25rem;
|
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;
|
background: #2563eb;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 0.5rem;
|
border-radius: 10px;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
transition: background 0.15s;
|
||||||
}
|
}
|
||||||
.btn:hover {
|
.store-btn:hover {
|
||||||
background: #1d4ed8;
|
background: #1d4ed8;
|
||||||
text-decoration: none;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card">
|
<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 id="connecting">
|
||||||
<div class="spinner"></div>
|
<div class="spinner"></div>
|
||||||
<h1>Connecting to Page Agent</h1>
|
<h1 data-i18n="connecting_title">Connecting to Page Agent</h1>
|
||||||
<p>Opening the hub in your browser...</p>
|
<p class="sub" data-i18n="connecting_sub">Opening the hub in your browser…</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="install" class="install">
|
<div id="install" class="install">
|
||||||
<h1>Extension Not Found</h1>
|
<h1 data-i18n="install_title">Extension Required</h1>
|
||||||
<p>The Page Agent browser extension is required.<br />Install it and try again.</p>
|
<p class="sub" data-i18n="install_sub">
|
||||||
<a class="btn" href="__STORE_URL__" target="_blank">Install Extension</a>
|
Page Agent requires the latest browser extension to work.
|
||||||
<p style="margin-top: 1.5rem; font-size: 0.75rem">
|
|
||||||
After installing, restart the MCP server or refresh this page.
|
|
||||||
</p>
|
</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>
|
||||||
</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('connecting').style.display = 'none'
|
||||||
document.getElementById('install').classList.add('show')
|
document.getElementById('install').classList.add('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
|
if (!globalThis.chrome?.runtime?.sendMessage) {
|
||||||
showInstall()
|
showInstall()
|
||||||
return
|
} else {
|
||||||
}
|
chrome.runtime.sendMessage(
|
||||||
chrome.runtime.sendMessage(
|
EXT_ID,
|
||||||
EXT_ID,
|
{ type: 'OPEN_HUB', wsPort },
|
||||||
{ type: 'OPEN_HUB', wsPort: wsPort },
|
(response) => {
|
||||||
function (response) {
|
if (chrome.runtime.lastError || !response?.ok) showInstall()
|
||||||
if (chrome.runtime.lastError || !response || !response.ok) {
|
|
||||||
showInstall()
|
|
||||||
}
|
}
|
||||||
}
|
)
|
||||||
)
|
}
|
||||||
} catch (e) {
|
} catch {
|
||||||
showInstall()
|
showInstall()
|
||||||
}
|
}
|
||||||
})()
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user