From 43b7c1b136f0833667c44833a2cc800f36c1c65b Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Fri, 13 Feb 2026 19:09:46 +0800 Subject: [PATCH] style(ext): make over --- package-lock.json | 3 +- packages/extension/package.json | 3 +- packages/extension/src/assets/index.css | 12 +++++ .../src/components/ui/input-group.tsx | 5 +- .../src/entrypoints/sidepanel/App.tsx | 5 +- .../entrypoints/sidepanel/components/misc.tsx | 53 ++++++++++++++++++- 6 files changed, 73 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3e5df4e..0261c3a 100644 --- a/package-lock.json +++ b/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" }, diff --git a/packages/extension/package.json b/packages/extension/package.json index 27819ff..88213ae 100644 --- a/packages/extension/package.json +++ b/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" } diff --git a/packages/extension/src/assets/index.css b/packages/extension/src/assets/index.css index 42c488f..7c39a6c 100644 --- a/packages/extension/src/assets/index.css +++ b/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; diff --git a/packages/extension/src/components/ui/input-group.tsx b/packages/extension/src/components/ui/input-group.tsx index c965906..27681fc 100644 --- a/packages/extension/src/components/ui/input-group.tsx +++ b/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', diff --git a/packages/extension/src/entrypoints/sidepanel/App.tsx b/packages/extension/src/entrypoints/sidepanel/App.tsx index 9ce13ad..372b156 100644 --- a/packages/extension/src/entrypoints/sidepanel/App.tsx +++ b/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 ( -
+
+ {/* Header */}
diff --git a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx b/packages/extension/src/entrypoints/sidepanel/components/misc.tsx index 4eb3106..eca8e8f 100644 --- a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx +++ b/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 Page Agent } -// Empty state with logo +// Full-screen ai-motion glow overlay, shown only while running +export function MotionOverlay({ active }: { active: boolean }) { + const containerRef = useRef(null) + const motionRef = useRef(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 ( +
+ ) +} + +// Empty state with logo and breathing glow export function EmptyState() { return (
- +
+
+ +

Page Agent Ext

Enter a task to automate this page