style(ext): make over

package-lock.json

@@ -11074,13 +11074,14 @@
         },
         "packages/extension": {
             "name": "@page-agent/ext",
-            "version": "0.1.5",
+            "version": "0.1.6",
             "hasInstallScript": true,
             "dependencies": {
                 "@page-agent/core": "1.3.0",
                 "@page-agent/llms": "1.3.0",
                 "@page-agent/page-controller": "1.3.0",
                 "@page-agent/ui": "1.3.0",
+                "ai-motion": "^0.4.8",
                 "chalk": "^5.6.2",
                 "zod": "^4.3.5"
             },

packages/extension/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@page-agent/ext",
     "private": true,
-    "version": "0.1.5",
+    "version": "0.1.6",
     "type": "module",
     "scripts": {
         "dev": "wxt",
@@ -42,6 +42,7 @@
         "@page-agent/llms": "1.3.0",
         "@page-agent/page-controller": "1.3.0",
         "@page-agent/ui": "1.3.0",
+        "ai-motion": "^0.4.8",
         "chalk": "^5.6.2",
         "zod": "^4.3.5"
     }

packages/extension/src/assets/index.css

@@ -113,6 +113,18 @@
 	--color-sidebar-ring: var(--sidebar-ring);
 }
 
+@keyframes glow-breathe {
+	0%,
+	100% {
+		opacity: 0;
+		transform: scale(0.85);
+	}
+	50% {
+		opacity: 0.35;
+		transform: scale(1.1);
+	}
+}
+
 @layer base {
 	* {
 		@apply border-border outline-ring/50;

packages/extension/src/components/ui/input-group.tsx

@@ -21,8 +21,9 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 				'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]',
+				// Focus state — soft multi-color glow matching ai-motion palette
+				'has-[[data-slot=input-group-control]:focus-visible]:border-blue-400/60',
+				'has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_1px_rgba(57,182,255,0.2),0_0_8px_rgba(57,182,255,0.15),0_0_16px_rgba(189,69,251,0.1)]',
 
 				// 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',

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

@@ -15,7 +15,7 @@ import { ConfigPanel } from './components/ConfigPanel'
 import { HistoryDetail } from './components/HistoryDetail'
 import { HistoryList } from './components/HistoryList'
 import { ActivityCard, EventCard } from './components/cards'
-import { EmptyState, Logo, StatusDot } from './components/misc'
+import { EmptyState, Logo, MotionOverlay, StatusDot } from './components/misc'
 
 type View =
 	| { name: 'chat' }
@@ -117,7 +117,8 @@ export default function App() {
 	const showEmptyState = !currentTask && history.length === 0 && !isRunning
 
 	return (
-		<div className="flex flex-col h-screen bg-background">
+		<div className="relative flex flex-col h-screen bg-background">
+			<MotionOverlay active={isRunning} />
 			{/* Header */}
 			<header className="flex items-center justify-between border-b px-3 py-2">
 				<div className="flex items-center gap-2">

packages/extension/src/entrypoints/sidepanel/components/misc.tsx

@@ -1,4 +1,6 @@
 import type { AgentStatus } from '@page-agent/core'
+import { Motion } from 'ai-motion'
+import { useEffect, useRef } from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -32,11 +34,58 @@ export function Logo({ className }: { className?: string }) {
 	return <img src="/assets/page-agent-256.webp" alt="Page Agent" className={cn('', className)} />
 }
 
-// Empty state with logo
+// Full-screen ai-motion glow overlay, shown only while running
+export function MotionOverlay({ active }: { active: boolean }) {
+	const containerRef = useRef<HTMLDivElement>(null)
+	const motionRef = useRef<Motion | null>(null)
+
+	useEffect(() => {
+		const motion = new Motion({
+			mode: 'dark',
+			borderWidth: 0,
+			glowWidth: 120,
+			borderRadius: 0,
+			styles: { position: 'absolute', inset: '0' },
+		})
+		motionRef.current = motion
+		containerRef.current!.appendChild(motion.element)
+		motion.autoResize(containerRef.current!)
+
+		return () => {
+			motion.dispose()
+			motionRef.current = null
+		}
+	}, [])
+
+	useEffect(() => {
+		const motion = motionRef.current
+		if (!motion) return
+
+		if (active) {
+			motion.start()
+			motion.fadeIn()
+		} else {
+			motion.fadeOut().then(() => motion.pause())
+		}
+	}, [active])
+
+	return (
+		<div
+			ref={containerRef}
+			className="pointer-events-none absolute inset-0 z-10 opacity-60"
+			style={{ display: active ? undefined : 'none' }}
+		/>
+	)
+}
+
+// Empty state with logo and breathing glow
 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 className="relative">
+				<div className="absolute inset-0 -m-6 rounded-full bg-[conic-gradient(from_180deg,oklch(0.55_0.2_280),oklch(0.55_0.15_220),oklch(0.6_0.18_160),oklch(0.55_0.2_280))] opacity-0 blur-2xl animate-[glow-breathe_4s_ease-in-out_infinite]" />
+				<Logo className="relative size-20 opacity-80" />
+			</div>
 			<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>