@swarmclawai/swarmclaw 0.6.8 → 0.7.0

package/src/components/settings/gateway-connection-panel.tsx

@@ -143,7 +143,7 @@ export function GatewayConnectionPanel() {
 
   return (
     <div className="flex flex-col gap-4 p-4">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
         <span className={`w-2 h-2 rounded-full ${dotColor}`} />
         <span className="text-[13px] font-600 text-text capitalize">{status}</span>
         {actionableIssues.length > 0 && (
@@ -153,7 +153,7 @@ export function GatewayConnectionPanel() {
         )}
       </div>
 
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.05s both' }}>
         <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Gateway URL</label>
         <input
           type="text"
@@ -164,7 +164,7 @@ export function GatewayConnectionPanel() {
         />
       </div>
 
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.1s both' }}>
         <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Token (optional)</label>
         <input
           type="password"
@@ -175,7 +175,7 @@ export function GatewayConnectionPanel() {
         />
       </div>
 
-      <div className="flex gap-2">
+      <div className="flex gap-2" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.15s both' }}>
         {status !== 'connected' ? (
           <button
             onClick={handleConnect}
@@ -204,12 +204,12 @@ export function GatewayConnectionPanel() {
       </div>
 
       {error && (
-        <p className="text-[12px] text-red-400">{error}</p>
+        <p className="text-[12px] text-red-400" style={{ animation: 'ai-shake 0.5s' }}>{error}</p>
       )}
 
       {/* Reload Mode Toggle (F21) */}
       {status === 'connected' && (
-        <div className="flex flex-col gap-2 pt-2 border-t border-white/[0.04]">
+        <div className="flex flex-col gap-2 pt-2 border-t border-white/[0.04]" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.2s both' }}>
           <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Reload Mode</label>
           <div className="flex gap-1">
             {reloadModes.map((rm) => (
@@ -237,9 +237,9 @@ export function GatewayConnectionPanel() {
 
       {/* Config Issues (F19) */}
       {actionableIssues.length > 0 && (
-        <div className="flex flex-col gap-2 pt-2 border-t border-white/[0.04]">
+        <div className="flex flex-col gap-2 pt-2 border-t border-white/[0.04]" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.25s both' }}>
           <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Config Issues</label>
-          {actionableIssues.map((issue) => (
+          {actionableIssues.map((issue, idx) => (
             <div
               key={issue.id}
               className={`flex items-start gap-3 p-3 rounded-[10px] border ${
@@ -247,6 +247,7 @@ export function GatewayConnectionPanel() {
                   ? 'bg-red-400/[0.04] border-red-400/20'
                   : 'bg-amber-400/[0.04] border-amber-400/20'
               }`}
+              style={{ animation: 'spring-in 0.4s var(--ease-spring) both', animationDelay: `${0.3 + idx * 0.05}s` }}
             >
               <span className={`mt-0.5 w-2 h-2 rounded-full shrink-0 ${
                 issue.severity === 'error' ? 'bg-red-400' : 'bg-amber-400'

package/src/components/shared/command-palette.tsx

@@ -172,11 +172,16 @@ export function CommandPalette() {
       <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={() => setOpen(false)} />
       <div
         className="relative w-full max-w-[520px] mx-4 bg-raised rounded-[16px] border border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] overflow-hidden"
-        style={{ animation: 'fade-in 0.15s ease' }}
+        style={{ animation: 'modal-in 0.3s var(--ease-spring)' }}
       >
+        {/* Breathing glow effect */}
+        <div className="absolute inset-0 pointer-events-none opacity-20" style={{ animation: 'glow-pulse 4s ease-in-out infinite' }}>
+          <div className="absolute inset-0 bg-gradient-to-b from-accent-bright/20 to-transparent" />
+        </div>
         {/* Search input */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06]">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] relative overflow-hidden">
+          <div className="absolute bottom-0 left-0 h-[1px] w-full bg-gradient-to-r from-transparent via-accent-bright/40 to-transparent" style={{ animation: 'glow-line 3s linear infinite' }} />
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0 relative z-10">
             <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg>
           <input
@@ -208,10 +213,13 @@ export function CommandPalette() {
                     <button
                       key={item.id}
                       onClick={item.onSelect}
-                      className={`w-full flex items-center gap-3 px-4 py-2.5 text-left border-none cursor-pointer transition-colors
-                        ${idx === selectedIndex ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-2 hover:bg-white/[0.04]'}`}
+                      className={`w-full flex items-center gap-3 px-4 py-2.5 text-left border-none cursor-pointer transition-all relative z-10
+                        ${idx === selectedIndex ? 'bg-accent-soft text-accent-bright pl-6 scale-[1.01]' : 'bg-transparent text-text-2 hover:bg-white/[0.04]'}`}
                       style={{ fontFamily: 'inherit' }}
                     >
+                      {idx === selectedIndex && (
+                        <div className="absolute left-0 top-1 bottom-1 w-1 rounded-r-full bg-accent-bright" style={{ animation: 'spring-in 0.3s var(--ease-spring)' }} />
+                      )}
                       <span className="shrink-0 text-text-3">{categoryIcon[item.category as keyof typeof categoryIcon]}</span>
                       <span className="text-[13px] font-500 truncate">{item.label}</span>
                     </button>

package/src/components/shared/empty-state.tsx

@@ -10,21 +10,33 @@ interface Props {
 
 export function EmptyState({ icon, title, subtitle, action }: Props) {
   return (
-    <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
-      <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
-        {icon}
+    <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center group/empty">
+      <div
+        className="w-14 h-14 rounded-[16px] bg-accent-soft flex items-center justify-center mb-1 relative"
+        style={{ animation: 'float 4s ease-in-out infinite' }}
+      >
+        <div className="text-accent-bright transition-transform duration-500 group-hover/empty:scale-110 group-hover/empty:rotate-[10deg]">
+          {icon}
+        </div>
+        {/* Subtle glow background */}
+        <div className="absolute inset-0 bg-accent-bright/5 blur-xl rounded-full opacity-0 group-hover/empty:opacity-100 transition-opacity" />
+      </div>
+      <div style={{ animation: 'fade-up 0.5s var(--ease-spring) both' }}>
+        <p className="font-display text-[15px] font-600 text-text-2">{title}</p>
+        {subtitle && <p className="text-[13px] text-text-3/50 mt-1">{subtitle}</p>}
       </div>
-      <p className="font-display text-[15px] font-600 text-text-2">{title}</p>
-      {subtitle && <p className="text-[13px] text-text-3/50">{subtitle}</p>}
       {action && (
         <button
           onClick={action.onClick}
           className="mt-3 px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white
             text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
-            shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
-          style={{ fontFamily: 'inherit' }}
+            shadow-[0_4px_16px_rgba(99,102,241,0.2)] relative overflow-hidden group/btn"
+          style={{ fontFamily: 'inherit', animation: 'spring-in 0.6s var(--ease-spring) 0.2s both' }}
         >
-          {action.label}
+          <span className="relative z-10">{action.label}</span>
+          <div
+            className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover/btn:animate-[shimmer-bar_1.5s_ease-in-out_infinite]"
+          />
         </button>
       )}
     </div>

package/src/components/shared/notification-center.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import { useEffect, useRef, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import type { CSSProperties } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import type { AppNotification } from '@/types'
@@ -34,6 +36,9 @@ const TYPE_ICON_COLORS: Record<AppNotification['type'], string> = {
   error: 'text-red-400',
 }
 
+const PANEL_WIDTH = 340
+const PANEL_MARGIN = 8
+
 function resolveHttpUrl(raw: string | undefined): string | null {
   if (!raw) return null
   try {
@@ -56,6 +61,10 @@ export function NotificationCenter({
   const [open, setOpen] = useState(false)
   const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const [panelStyle, setPanelStyle] = useState<CSSProperties>({
+    left: PANEL_MARGIN,
+    top: PANEL_MARGIN,
+  })
 
   const notifications = useAppStore((s) => s.notifications)
   const unreadCount = useAppStore((s) => s.unreadNotificationCount)
@@ -102,8 +111,130 @@ export function NotificationCenter({
   }
 
   const isRow = variant === 'row'
-  const panelAlignClass = align === 'left' ? 'left-0' : 'right-0'
-  const panelDirectionClass = direction === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'
+
+  const updatePanelPosition = useCallback(() => {
+    if (typeof window === 'undefined' || !buttonRef.current) return
+
+    const rect = buttonRef.current.getBoundingClientRect()
+    const maxLeft = Math.max(PANEL_MARGIN, window.innerWidth - PANEL_WIDTH - PANEL_MARGIN)
+    const preferredLeft = align === 'left' ? rect.left : rect.right - PANEL_WIDTH
+    const clampedLeft = Math.max(PANEL_MARGIN, Math.min(preferredLeft, maxLeft))
+
+    if (direction === 'up') {
+      setPanelStyle({
+        left: clampedLeft,
+        bottom: Math.max(PANEL_MARGIN, window.innerHeight - rect.top + PANEL_MARGIN),
+        top: undefined,
+      })
+      return
+    }
+
+    setPanelStyle({
+      left: clampedLeft,
+      top: Math.max(PANEL_MARGIN, rect.bottom + PANEL_MARGIN),
+      bottom: undefined,
+    })
+  }, [align, direction])
+
+  useEffect(() => {
+    if (!open) return
+    updatePanelPosition()
+
+    const handler = () => updatePanelPosition()
+    window.addEventListener('resize', handler)
+    window.addEventListener('scroll', handler, true)
+    return () => {
+      window.removeEventListener('resize', handler)
+      window.removeEventListener('scroll', handler, true)
+    }
+  }, [open, updatePanelPosition])
+
+  const panelNode = open ? (
+    <div
+      ref={panelRef}
+      className="fixed w-[340px] max-h-[460px] bg-raised border border-white/[0.06] rounded-[14px] shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl z-[1200] flex flex-col overflow-hidden"
+      style={{
+        ...panelStyle,
+        animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)',
+      }}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.04] shrink-0">
+        <span className="text-[13px] font-600 text-text">Notifications</span>
+        <div className="flex items-center gap-2">
+          {unreadCount > 0 && (
+            <button
+              onClick={markAllRead}
+              className="text-[11px] font-500 text-text-3 hover:text-text cursor-pointer bg-transparent border-none transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Mark all read
+            </button>
+          )}
+          {notifications.some((n) => n.read) && (
+            <button
+              onClick={clearRead}
+              className="text-[11px] font-500 text-text-3 hover:text-text cursor-pointer bg-transparent border-none transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Clear read
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto">
+        {notifications.length === 0 ? (
+          <div className="flex items-center justify-center py-10 text-[13px] text-text-3/50">
+            No notifications
+          </div>
+        ) : (
+          notifications.map((n) => (
+            <button
+              key={n.id}
+              onClick={() => handleNotificationClick(n)}
+              className={`w-full text-left px-4 py-3 border-l-[3px] border-b border-b-white/[0.03] bg-transparent
+                hover:bg-white/[0.03] transition-colors cursor-pointer border-t-0 border-r-0
+                ${TYPE_COLORS[n.type]}
+                ${n.read ? 'opacity-50' : ''}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <div className="flex items-start gap-2.5">
+                <span className={`text-[12px] font-700 mt-0.5 shrink-0 w-4 text-center ${TYPE_ICON_COLORS[n.type]}`}>
+                  {TYPE_ICONS[n.type]}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[12px] font-600 text-text truncate flex-1">{n.title}</span>
+                    <span className="text-[10px] text-text-3/50 shrink-0">{timeAgo(n.createdAt)}</span>
+                  </div>
+                  {n.message && (
+                    <p className="text-[11px] text-text-3 mt-0.5 leading-relaxed line-clamp-2 m-0">
+                      {n.message}
+                    </p>
+                  )}
+                  {resolveHttpUrl(n.actionUrl) && (
+                    <span className="inline-block mt-1 text-[11px] text-accent-bright/90">
+                      {n.actionLabel || 'Open link'}
+                    </span>
+                  )}
+                  {n.entityType && (
+                    <span className="inline-block mt-1 text-[10px] text-text-3/40 font-mono">
+                      {n.entityType}{n.entityId ? `:${n.entityId.slice(0, 8)}` : ''}
+                    </span>
+                  )}
+                </div>
+                {!n.read && (
+                  <span className="w-2 h-2 rounded-full bg-blue-400 mt-1.5 shrink-0" />
+                )}
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  ) : null
 
   return (
     <div className="relative">
@@ -134,90 +265,7 @@ export function NotificationCenter({
           </span>
         )}
       </button>
-
-      {open && (
-        <div
-          ref={panelRef}
-          className={`absolute ${panelAlignClass} ${panelDirectionClass} w-[340px] max-h-[460px] bg-raised border border-white/[0.06] rounded-[14px] shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl z-90 flex flex-col overflow-hidden`}
-          style={{ animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)' }}
-        >
-          {/* Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.04] shrink-0">
-            <span className="text-[13px] font-600 text-text">Notifications</span>
-            <div className="flex items-center gap-2">
-              {unreadCount > 0 && (
-                <button
-                  onClick={markAllRead}
-                  className="text-[11px] font-500 text-text-3 hover:text-text cursor-pointer bg-transparent border-none transition-colors"
-                  style={{ fontFamily: 'inherit' }}
-                >
-                  Mark all read
-                </button>
-              )}
-              {notifications.some((n) => n.read) && (
-                <button
-                  onClick={clearRead}
-                  className="text-[11px] font-500 text-text-3 hover:text-text cursor-pointer bg-transparent border-none transition-colors"
-                  style={{ fontFamily: 'inherit' }}
-                >
-                  Clear read
-                </button>
-              )}
-            </div>
-          </div>
-
-          {/* List */}
-          <div className="flex-1 overflow-y-auto">
-            {notifications.length === 0 ? (
-              <div className="flex items-center justify-center py-10 text-[13px] text-text-3/50">
-                No notifications
-              </div>
-            ) : (
-              notifications.map((n) => (
-                <button
-                  key={n.id}
-                  onClick={() => handleNotificationClick(n)}
-                  className={`w-full text-left px-4 py-3 border-l-[3px] border-b border-b-white/[0.03] bg-transparent
-                    hover:bg-white/[0.03] transition-colors cursor-pointer border-t-0 border-r-0
-                    ${TYPE_COLORS[n.type]}
-                    ${n.read ? 'opacity-50' : ''}`}
-                  style={{ fontFamily: 'inherit' }}
-                >
-                  <div className="flex items-start gap-2.5">
-                    <span className={`text-[12px] font-700 mt-0.5 shrink-0 w-4 text-center ${TYPE_ICON_COLORS[n.type]}`}>
-                      {TYPE_ICONS[n.type]}
-                    </span>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="text-[12px] font-600 text-text truncate flex-1">{n.title}</span>
-                        <span className="text-[10px] text-text-3/50 shrink-0">{timeAgo(n.createdAt)}</span>
-                      </div>
-                      {n.message && (
-                        <p className="text-[11px] text-text-3 mt-0.5 leading-relaxed line-clamp-2 m-0">
-                          {n.message}
-                        </p>
-                      )}
-                      {resolveHttpUrl(n.actionUrl) && (
-                        <span className="inline-block mt-1 text-[11px] text-accent-bright/90">
-                          {n.actionLabel || 'Open link'}
-                        </span>
-                      )}
-                      {n.entityType && (
-                        <span className="inline-block mt-1 text-[10px] text-text-3/40 font-mono">
-                          {n.entityType}{n.entityId ? `:${n.entityId.slice(0, 8)}` : ''}
-                        </span>
-                      )}
-                    </div>
-                    {!n.read && (
-                      <span className="w-2 h-2 rounded-full bg-blue-400 mt-1.5 shrink-0" />
-                    )}
-                  </div>
-                </button>
-              ))
-            )}
-          </div>
-        </div>
-      )}
+      {panelNode && typeof document !== 'undefined' ? createPortal(panelNode, document.body) : panelNode}
     </div>
   )
 }

package/src/components/shared/profile-sheet.tsx

@@ -5,6 +5,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
+import { toast } from 'sonner'
 
 interface Props {
   open: boolean
@@ -39,7 +40,10 @@ export function ProfileSheet({ open, onClose }: Props) {
       })
       setUser(trimmed.toLowerCase())
       await loadSettings()
+      toast.success('Profile updated')
       onClose()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to update profile')
     } finally {
       setSaving(false)
     }