feat(ext): ask user approval for MCP task

packages/extension/package.json

@@ -16,7 +16,6 @@
         "@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",
         "@types/chrome": "^0.1.37",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.1",

packages/extension/src/components/ConfigPanel.tsx

@@ -1,13 +1,14 @@
 import {
-	ChevronDown,
 	Copy,
 	CornerUpLeft,
 	Eye,
 	EyeOff,
+	FoldVertical,
 	HatGlasses,
 	Home,
 	Loader2,
 	Scale,
+	UnfoldVertical,
 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { siGithub } from 'simple-icons'
@@ -153,6 +154,16 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 				</div>
 			</div>
 
+			{/* Hub link */}
+			<a
+				href="/hub.html"
+				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" />
+			</a>
+
 			<div className="flex flex-col gap-1.5">
 				<label className="text-xs text-muted-foreground">Base URL</label>
 				<Input
@@ -231,10 +242,7 @@ export function ConfigPanel({ config, onSave, onClose }: ConfigPanelProps) {
 				className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground cursor-pointer mt-1 font-bold"
 			>
 				Advanced
-				<ChevronDown
-					className="size-3 transition-transform"
-					style={{ transform: advancedOpen ? 'rotate(0deg)' : 'rotate(90deg)' }}
-				/>
+				{advancedOpen ? <FoldVertical className="size-3" /> : <UnfoldVertical className="size-3" />}
 			</button>
 
 			{advancedOpen && (

packages/extension/src/components/ui/switch.tsx

@@ -8,7 +8,7 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
 		<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',
+				'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 cursor-pointer 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}

packages/extension/src/entrypoints/hub/App.tsx

@@ -1,10 +1,11 @@
-import { Plug, PlugZap, Square, Unplug } from 'lucide-react'
-import { useEffect, useRef } from 'react'
+import { FoldVertical, Plug, PlugZap, Square, UnfoldVertical, Unplug } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useAgent } from '@/agent/useAgent'
 import { ActivityCard, EventCard } from '@/components/cards'
 import { Logo, MotionOverlay, StatusDot } from '@/components/misc'
 import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
 
 import { useHubWs } from './hub-ws'
 
@@ -25,7 +26,7 @@ export default function App() {
 	const wsLabel = {
 		connected: 'Connected',
 		connecting: 'Connecting…',
-		disconnected: new URLSearchParams(location.search).get('ws') ? 'Disconnected' : 'Standalone',
+		disconnected: new URLSearchParams(location.search).get('ws') ? 'Disconnected' : 'No connection',
 	}[wsState]
 
 	return (
@@ -34,24 +35,63 @@ export default function App() {
 
 			{/* Left — Protocol docs */}
 			<aside className="w-80 shrink-0 border-r flex flex-col bg-muted/20">
-				<div className="flex items-center gap-2 px-5 py-4 border-b">
+				<a
+					href="https://alibaba.github.io/page-agent/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="flex items-center gap-2 px-5 h-12 border-b hover:bg-muted/30 transition-colors"
+				>
 					<Logo className="size-5" />
 					<span className="text-sm font-semibold tracking-tight">Page Agent Hub</span>
+					<span className="text-[9px] font-medium uppercase tracking-wider text-amber-600 bg-amber-500/10 border border-amber-500/30 rounded px-1.5 py-0.5">
+						Beta
+					</span>
+				</a>
+
+				<div className="flex-1 overflow-y-auto px-5 py-4 space-y-6">
+					<div className="text-xs text-muted-foreground leading-relaxed space-y-2">
+						<p>
+							Page Agent Hub lets local apps (e.g. MCP servers) control the Page Agent extension via
+							WebSocket.
+						</p>
+						<p>
+							Check out the official{' '}
+							<a
+								href="https://github.com/alibaba/page-agent/tree/main/packages/mcp"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="underline hover:text-foreground"
+							>
+								MCP server package
+							</a>
+							.
+						</p>
+					</div>
+
+					<HubConfig />
+
+					<ProtocolDocsCollapsible />
 				</div>
 
-				<div className="flex-1 overflow-y-auto px-5 py-4">
-					<ProtocolDocs />
-				</div>
-
-				<div className="border-t px-5 py-3 text-[11px] text-muted-foreground/60">
-					Connect via <code className="text-[10px]">hub.html?ws=PORT</code>
+				<div className="border-t px-5 py-3 text-[10px] text-muted-foreground/60 flex items-center justify-between">
+					<span className="font-mono">v{__VERSION__}</span>
+					<span>
+						Built with ♥️ by{' '}
+						<a
+							href="https://github.com/gaomeng1900"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="underline hover:text-foreground"
+						>
+							@Simon
+						</a>
+					</span>
 				</div>
 			</aside>
 
 			{/* Right — Live session */}
 			<main className="flex-1 flex flex-col min-w-0">
-				{/* Header bar */}
-				<header className="flex items-center justify-between border-b px-5 py-3">
+				<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" />
 						<span>{wsLabel}</span>
@@ -104,49 +144,108 @@ export default function App() {
 	)
 }
 
-function ProtocolDocs() {
+function HubConfig() {
+	const [allowAll, setAllowAll] = useState(false)
+
+	useEffect(() => {
+		chrome.storage.local.get('allowAllHubConnection').then((r) => {
+			setAllowAll(r.allowAllHubConnection === true)
+		})
+	}, [])
+
+	const toggle = (checked: boolean) => {
+		setAllowAll(checked)
+		chrome.storage.local.set({ allowAllHubConnection: checked })
+	}
+
 	return (
-		<div className="space-y-5 text-xs text-muted-foreground">
-			<section>
-				<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
-					Caller → Hub
-				</h3>
-				<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
-					{`{ type: "execute", task: string, config?: object }
-{ type: "stop" }`}
-				</pre>
-			</section>
+		<div>
+			<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
+				Config
+			</h3>
+			<div className="group/hub relative">
+				<label
+					className={`flex items-center justify-between p-3 rounded-md border cursor-pointer text-xs ${allowAll ? 'bg-amber-500/10 border-amber-500/30 text-amber-600' : 'bg-muted/50 text-muted-foreground'}`}
+				>
+					Auto-approve connections
+					<Switch
+						checked={allowAll}
+						onCheckedChange={toggle}
+						className={allowAll ? 'data-[state=checked]:bg-amber-500' : ''}
+					/>
+				</label>
 
-			<section>
-				<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
-					Hub → Caller
-				</h3>
-				<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
-					{`{ type: "ready" }
-{ type: "result", success: boolean, data: string }
-{ type: "error", message: string }`}
-				</pre>
-			</section>
-
-			<section>
-				<h3 className="text-[11px] font-semibold text-foreground/80 uppercase tracking-wider mb-2">
-					Flow
-				</h3>
-				<ol className="list-decimal list-inside space-y-1 text-[11px] leading-relaxed">
-					<li>Hub opens WS to caller's server</li>
-					<li>
-						Sends <code className="text-[10px]">ready</code>
-					</li>
-					<li>
-						Caller sends <code className="text-[10px]">execute</code> with task
-					</li>
-					<li>Hub runs agent, streams events</li>
-					<li>
-						Hub sends <code className="text-[10px]">result</code> or{' '}
-						<code className="text-[10px]">error</code>
-					</li>
-				</ol>
-			</section>
+				{/* hide with invisible absolute opacity-0*/}
+				<div className="group-hover/hub:visible group-hover/hub:opacity-100 transition-opacity duration-150  left-0 right-0 top-full z-10 pt-2">
+					<div className="relative p-2.5 rounded-md border border-border bg-background/60 backdrop-blur-md shadow-2xl text-muted-foreground text-xs leading-relaxed">
+						<div className="absolute -top-1.5 left-5 size-3 rotate-45 rounded-[1px] border-l border-t border-border bg-background/60 backdrop-blur-md" />
+						By default, each connection requires your approval before running tasks. <br />
+						Enable this to skip per-session approval.
+						<br />
+						<span className="font-semibold">* Use with caution!</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+function ProtocolDocsCollapsible() {
+	const [open, setOpen] = useState(false)
+
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => setOpen(!open)}
+				className="flex items-center gap-1 text-[11px] font-semibold text-foreground/80 uppercase tracking-wider cursor-pointer"
+			>
+				Docs
+				{open ? <FoldVertical className="size-3" /> : <UnfoldVertical className="size-3" />}
+			</button>
+
+			{open && (
+				<div className="mt-3 space-y-4 text-xs text-muted-foreground">
+					<p className="text-[10px]">
+						Connect via <code className="text-[10px]">hub.html?ws=PORT</code>
+					</p>
+
+					<section>
+						<h4 className="text-[11px] font-medium text-foreground/60 mb-1.5">Flow</h4>
+						<ol className="list-decimal list-inside space-y-1 text-[11px] leading-relaxed">
+							<li>Hub opens WS to caller's server</li>
+							<li>
+								Sends <code className="text-[10px]">ready</code>
+							</li>
+							<li>
+								Caller sends <code className="text-[10px]">execute</code> with task
+							</li>
+							<li>Hub runs agent, streams events</li>
+							<li>
+								Hub sends <code className="text-[10px]">result</code> or{' '}
+								<code className="text-[10px]">error</code>
+							</li>
+						</ol>
+					</section>
+
+					<section>
+						<h4 className="text-[11px] font-medium text-foreground/60 mb-1.5">Caller → Hub</h4>
+						<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
+							{`{ type: "execute", task: string, config?: object }
+{ type: "stop" }`}
+						</pre>
+					</section>
+
+					<section>
+						<h4 className="text-[11px] font-medium text-foreground/60 mb-1.5">Hub → Caller</h4>
+						<pre className="bg-muted/50 rounded-md p-3 font-mono text-[10px] leading-relaxed whitespace-pre-wrap">
+							{`{ type: "ready" }
+{ type: "result", success: boolean, data: string }
+{ type: "error", message: string }`}
+						</pre>
+					</section>
+				</div>
+			)}
 		</div>
 	)
 }

packages/extension/src/entrypoints/hub/hub-ws.ts

@@ -70,6 +70,7 @@ export class HubWs {
 	#ws: WebSocket | null = null
 	#state: HubWsState = 'disconnected'
 	#busy = false
+	#approved = false
 	#handlers: HubWsHandlers
 	#port: number
 	#onStateChange: (state: HubWsState) => void
@@ -103,6 +104,7 @@ export class HubWs {
 		ws.addEventListener('close', () => {
 			this.#ws = null
 			this.#busy = false
+			this.#approved = false
 			this.#setState('disconnected')
 		})
 
@@ -115,6 +117,7 @@ export class HubWs {
 		this.#ws?.close()
 		this.#ws = null
 		this.#busy = false
+		this.#approved = false
 		this.#setState('disconnected')
 	}
 
@@ -130,7 +133,7 @@ export class HubWs {
 		}
 	}
 
-	#handleMessage(raw: string) {
+	async #handleMessage(raw: string) {
 		let msg: InboundMessage
 		try {
 			msg = JSON.parse(raw)
@@ -138,6 +141,11 @@ export class HubWs {
 			return
 		}
 
+		if (!(await this.#checkApproval())) {
+			this.#send({ type: 'error', message: 'User denied the connection request.' })
+			return
+		}
+
 		switch (msg.type) {
 			case 'execute':
 				this.#handleExecute(msg)
@@ -148,6 +156,22 @@ export class HubWs {
 		}
 	}
 
+	async #checkApproval(): Promise<boolean> {
+		if (this.#approved) return true
+
+		const { allowAllHubConnection } = await chrome.storage.local.get('allowAllHubConnection')
+		if (allowAllHubConnection === true) {
+			this.#approved = true
+			return true
+		}
+
+		const ok = window.confirm(
+			'An external application is requesting to control your browser via Page Agent Ext.\nAllow this session?'
+		)
+		if (ok) this.#approved = true
+		return ok
+	}
+
 	async #handleExecute(msg: ExecuteMessage) {
 		if (this.#busy) {
 			this.#send({ type: 'error', message: 'Hub is busy with another task' })