@swarmclawai/swarmclaw 0.6.8 → 0.7.0

package/src/components/chat/thinking-indicator.tsx

@@ -40,31 +40,64 @@ export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentAvatarU
   const streamToolName = useChatStore((s) => s.streamToolName)
   const thinkingText = useChatStore((s) => s.thinkingText)
   const thinkingStartTime = useChatStore((s) => s.thinkingStartTime)
+  const agentStatus = useChatStore((s) => s.agentStatus)
 
   const statusText = streamPhase === 'tool' && streamToolName
     ? `Using ${streamToolName}...`
     : 'Thinking...'
 
   const hasThinkingContent = thinkingText.trim().length > 0
+  const hasMission = !!agentStatus?.goal
 
   return (
     <div className="flex flex-col items-start relative pl-[44px]"
-      style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}>
+      style={{ animation: 'msg-in-left 0.4s var(--ease-spring) both' }}>
       <div className="absolute left-[4px] top-0">
         {agentName ? <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
       </div>
+      
       <div className="flex items-center gap-2.5 mb-2 px-1">
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
+        {agentStatus?.status && (
+          <span className={`px-1.5 py-0.5 rounded-[4px] text-[9px] font-700 uppercase tracking-wider ${
+            agentStatus.status === 'progress' ? 'bg-blue-500/10 text-blue-400' :
+            agentStatus.status === 'ok' ? 'bg-emerald-500/10 text-emerald-400' :
+            agentStatus.status === 'blocked' ? 'bg-red-500/10 text-red-400' :
+            'bg-white/[0.06] text-text-3'
+          }`} style={{ animation: 'spring-in 0.3s var(--ease-spring)' }}>
+            {agentStatus.status}
+          </span>
+        )}
       </div>
 
+      {hasMission && (
+        <div className="mb-2 w-full max-w-[85%] md:max-w-[72%] p-3 rounded-[12px] border border-accent-bright/10 bg-accent-bright/[0.02]"
+          style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
+          <div className="text-[10px] font-700 text-accent-bright/60 uppercase tracking-widest mb-1.5 flex items-center gap-2">
+            <span className="w-1 h-1 rounded-full bg-accent-bright/40" />
+            Active Mission
+          </div>
+          <p className="text-[13px] font-500 text-text-2 leading-snug">{agentStatus.goal}</p>
+          {agentStatus.nextAction && (
+            <div className="mt-2 pt-2 border-t border-white/[0.04]">
+              <span className="text-[10px] font-600 text-text-3/40 uppercase block mb-0.5">Next Action</span>
+              <p className="text-[11px] text-text-3/80 italic">&ldquo;{agentStatus.nextAction}&rdquo;</p>
+            </div>
+          )}
+        </div>
+      )}
+
       {hasThinkingContent ? (
         <details className="group/think w-full max-w-[85%] md:max-w-[72%]">
-          <summary className="bubble-ai px-5 py-3.5 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
-            <div className="flex items-center gap-3">
+          <summary className="bubble-ai px-5 py-3.5 cursor-pointer list-none [&::-webkit-details-marker]:hidden relative overflow-hidden group-open/think:rounded-b-none border border-transparent hover:border-white/[0.04] transition-all">
+            {/* Thinking pulse background */}
+            <div className="absolute inset-0 bg-accent-bright/5 opacity-0 group-hover/think:opacity-100 transition-opacity" style={{ animation: 'pulse-subtle 2s ease-in-out infinite' }} />
+            
+            <div className="flex items-center gap-3 relative z-10">
               <div className="flex gap-2">
-                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
-                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
-                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60 shadow-[0_0_8px_rgba(129,140,248,0.4)]" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60 shadow-[0_0_8px_rgba(129,140,248,0.4)]" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60 shadow-[0_0_8px_rgba(129,140,248,0.4)]" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
               </div>
               <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
               <ElapsedTimer startTime={thinkingStartTime} />
@@ -77,7 +110,7 @@ export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentAvatarU
               </svg>
             </div>
           </summary>
-          <div className="mt-2 px-4 py-3 rounded-[12px] bg-bg/60 border border-white/[0.04] max-h-[300px] overflow-y-auto">
+          <div className="px-4 py-3 rounded-b-[12px] bg-bg/60 border-x border-b border-white/[0.04] max-h-[300px] overflow-y-auto">
             <div className="msg-content text-[13px] leading-[1.6] text-text-3/80">
               <ReactMarkdown remarkPlugins={[remarkGfm]}>
                 {thinkingText}
@@ -86,12 +119,15 @@ export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentAvatarU
           </div>
         </details>
       ) : (
-        <div className="bubble-ai px-6 py-5">
-          <div className="flex items-center gap-3">
+        <div className="bubble-ai px-6 py-5 relative overflow-hidden">
+          {/* Thinking glow effect */}
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-accent-bright/5 to-transparent" style={{ animation: 'shimmer-bar 3s linear infinite' }} />
+          
+          <div className="flex items-center gap-3 relative z-10">
             <div className="flex gap-2">
-              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
-              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
-              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60 shadow-[0_0_8px_rgba(129,140,248,0.4)]" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60 shadow-[0_0_8px_rgba(129,140,248,0.4)]" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60 shadow-[0_0_8px_rgba(129,140,248,0.4)]" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
             </div>
             <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
             <ElapsedTimer startTime={thinkingStartTime} />

package/src/components/chat/tool-request-banner.tsx

@@ -15,22 +15,36 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
   const loadSessions = useAppStore((s) => s.loadSessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
+  const serverApprovals = useAppStore((s) => s.approvals)
+  const loadApprovals = useAppStore((s) => s.loadApprovals)
   const [granted, setGranted] = useState<Set<string>>(new Set())
   const [denied, setDenied] = useState<Set<string>>(new Set())
   const continueSentRef = useRef(false)
 
-  const toolRequests: { toolId: string; reason: string }[] = []
+  // Resolve matching server-side tool_access approval when user grants/denies inline
+  const resolveMatchingApproval = (toolId: string, approved: boolean) => {
+    const match = Object.values(serverApprovals).find(
+      (a) => a.status === 'pending' && a.category === 'tool_access'
+        && (a.data?.toolId === toolId || a.data?.pluginId === toolId)
+    )
+    if (match) {
+      api('POST', '/approvals', { id: match.id, approved }).then(() => loadApprovals()).catch(() => { /* best effort */ })
+    }
+  }
+
+  const pluginRequests: { pluginId: string; reason: string }[] = []
   const seen = new Set<string>()
 
   function extractFromText(t: string) {
     try {
-      const jsonMatches = t.match(/\{"type"\s*:\s*"tool_request"[^}]*\}/g)
+      const jsonMatches = t.match(/\{"type"\s*:\s*"(?:tool_request|plugin_request)"[^}]*\}/g)
       if (jsonMatches) {
         for (const jm of jsonMatches) {
           const parsed = JSON.parse(jm)
-          if (parsed.type === 'tool_request' && parsed.toolId && !seen.has(parsed.toolId)) {
-            seen.add(parsed.toolId)
-            toolRequests.push({ toolId: parsed.toolId, reason: parsed.reason || '' })
+          const pluginId = parsed.pluginId || parsed.toolId
+          if ((parsed.type === 'tool_request' || parsed.type === 'plugin_request') && pluginId && !seen.has(pluginId)) {
+            seen.add(pluginId)
+            pluginRequests.push({ pluginId, reason: parsed.reason || '' })
           }
         }
       }
@@ -41,7 +55,7 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
   extractFromText(text)
   for (const output of toolOutputs) extractFromText(output)
 
-  if (toolRequests.length === 0) return null
+  if (pluginRequests.length === 0) return null
 
   const sid = currentSessionId
   const session = sid ? sessions[sid] : null
@@ -59,17 +73,20 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
     const newGranted = new Set(granted).add(toolId)
     setGranted(newGranted)
 
-    // Auto-continue: once all requested tools are granted, send a follow-up message
-    const allGranted = toolRequests.every(
-      (r) => newGranted.has(r.toolId) || updated.includes(r.toolId),
+    // Resolve matching server-side approval so approvals page stays in sync
+    resolveMatchingApproval(toolId, true)
+
+    // Notify agent that access was granted with a precise message (not a vague "Continue")
+    const allGranted = pluginRequests.every(
+      (r) => newGranted.has(r.pluginId) || updated.includes(r.pluginId),
     )
     if (allGranted && !continueSentRef.current) {
       continueSentRef.current = true
-      // Small delay to let the session update propagate
+      const grantedNames = pluginRequests.map((r) => TOOL_LABELS[r.pluginId] || r.pluginId).join(', ')
       setTimeout(() => {
         const { streaming, sendMessage } = useChatStore.getState()
         if (!streaming) {
-          sendMessage('Continue')
+          sendMessage(`Access granted for: ${grantedNames}. You now have these tools available — proceed with your task.`)
         }
       }, 300)
     }
@@ -77,24 +94,26 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
 
   const handleDeny = (toolId: string) => {
     setDenied((prev) => new Set(prev).add(toolId))
+    // Resolve matching server-side approval
+    resolveMatchingApproval(toolId, false)
     const label = TOOL_LABELS[toolId] || toolId
     setTimeout(() => {
       const { streaming, sendMessage } = useChatStore.getState()
       if (!streaming) {
-        sendMessage(`Tool access denied for ${label} — proceed without it.`)
+        sendMessage(`Plugin access denied for ${label} — proceed without it.`)
       }
     }, 200)
   }
 
   return (
     <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mt-2">
-      {toolRequests.map(({ toolId, reason }) => {
-        const isGranted = granted.has(toolId) || (session?.tools || []).includes(toolId)
-        const isDenied = denied.has(toolId)
-        const label = TOOL_LABELS[toolId] || toolId
+      {pluginRequests.map(({ pluginId, reason }) => {
+        const isGranted = granted.has(pluginId) || (session?.tools || []).includes(pluginId)
+        const isDenied = denied.has(pluginId)
+        const label = TOOL_LABELS[pluginId] || pluginId
         return (
           <div
-            key={toolId}
+            key={pluginId}
             className="flex items-center gap-3 px-4 py-3 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.06]"
             style={{ animation: 'fade-in 0.2s ease' }}
           >
@@ -103,7 +122,7 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
             </svg>
             <div className="flex-1 min-w-0">
               <p className="text-[12px] text-text-2 font-600">
-                Requesting access to <span className="text-amber-400">{label}</span>
+                Requesting plugin access to <span className="text-amber-400">{label}</span>
               </p>
               {reason && <p className="text-[11px] text-text-3/60 mt-0.5 truncate">{reason}</p>}
             </div>
@@ -114,14 +133,14 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
             ) : (
               <div className="flex gap-1.5 shrink-0">
                 <button
-                  onClick={() => handleGrant(toolId)}
+                  onClick={() => handleGrant(pluginId)}
                   className="px-3 py-1.5 rounded-[8px] bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 text-[11px] font-600 border-none cursor-pointer transition-colors"
                   style={{ fontFamily: 'inherit' }}
                 >
                   Grant
                 </button>
                 <button
-                  onClick={() => handleDeny(toolId)}
+                  onClick={() => handleDeny(pluginId)}
                   className="px-3 py-1.5 rounded-[8px] bg-red-500/15 hover:bg-red-500/25 text-red-400 text-[11px] font-600 border-none cursor-pointer transition-colors"
                   style={{ fontFamily: 'inherit' }}
                 >

package/src/components/chatrooms/chatroom-list.tsx

@@ -63,7 +63,7 @@ export function ChatroomList() {
       ) : (
         <div className="p-3 space-y-1">
           {sorted.length > 2 && (
-            <div className="flex items-center gap-1 px-1 pb-2">
+            <div className="flex items-center gap-1 px-1 pb-2" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
               {(['all', 'active', 'recent'] as const).map((f) => (
                 <button
                   key={f}
@@ -79,7 +79,7 @@ export function ChatroomList() {
               ))}
             </div>
           )}
-          {filtered.map((chatroom) => {
+          {filtered.map((chatroom, idx) => {
             const isActive = chatroom.id === currentChatroomId
             const memberNames = chatroom.agentIds
               .map((id) => agents[id]?.name)
@@ -91,11 +91,15 @@ export function ChatroomList() {
               <button
                 key={chatroom.id}
                 onClick={() => setCurrentChatroom(chatroom.id)}
-                className={`w-full text-left py-3.5 px-4 rounded-[14px] transition-all cursor-pointer group border border-transparent ${
+                className={`w-full text-left py-3.5 px-4 rounded-[14px] transition-all cursor-pointer group border border-transparent relative overflow-hidden ${
                   isActive
                     ? 'bg-accent-soft/60'
-                    : 'hover:bg-white/[0.04]'
+                    : 'hover:bg-white/[0.04] hover:scale-[1.01]'
                 }`}
+                style={{
+                  animation: 'fade-up 0.4s var(--ease-spring) both',
+                  animationDelay: `${idx * 0.03}s`
+                }}
               >
                 <div className="flex items-center gap-2 mb-0.5">
                   <div className="w-7 h-7 rounded-full bg-accent-soft flex items-center justify-center shrink-0">
@@ -106,6 +110,9 @@ export function ChatroomList() {
                   <span className={`text-[13px] font-600 truncate ${isActive ? 'text-accent-bright' : 'text-text'}`}>
                     {chatroom.name}
                   </span>
+                  {isActive && (
+                    <div className="absolute left-0 top-3 bottom-3 w-1 rounded-r-full bg-accent-bright" style={{ animation: 'spring-in 0.3s var(--ease-spring)' }} />
+                  )}
                   <span className="label-mono ml-auto shrink-0">
                     {chatroom.agentIds.length} agents
                   </span>

package/src/components/chatrooms/chatroom-sheet.tsx

@@ -202,13 +202,15 @@ export function ChatroomSheet() {
       }
       if (editing) {
         await updateChatroom(editing.id, payload)
-        toast.success('Chatroom saved')
+        toast.success('Chatroom updated successfully')
       } else {
         const chatroom = await createChatroom(payload)
         setCurrentChatroom(chatroom.id)
-        toast.success('Chatroom created')
+        toast.success('Chatroom created successfully')
       }
       setChatroomSheetOpen(false)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save chatroom')
     } finally {
       setSaving(false)
     }
@@ -216,11 +218,14 @@ export function ChatroomSheet() {
 
   const handleDelete = async () => {
     if (!editing || saving) return
+    if (!confirm(`Delete chatroom "${editing.name}"?`)) return
     setSaving(true)
     try {
       await deleteChatroom(editing.id)
       toast.success('Chatroom deleted')
       setChatroomSheetOpen(false)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to delete chatroom')
     } finally {
       setSaving(false)
     }

package/src/components/connectors/connector-list.tsx

@@ -31,6 +31,10 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
   const [reconnecting, setReconnecting] = useState<string | null>(null)
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const openConnector = useCallback((id: string | null) => {
+    setEditingConnectorId(id)
+    setConnectorSheetOpen(true)
+  }, [setEditingConnectorId, setConnectorSheetOpen])
 
   const refresh = useCallback(async () => {
     await Promise.all([loadConnectors(), loadAgents(), loadChatrooms()])
@@ -95,7 +99,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
       <div className="flex-1 flex flex-col items-center justify-center px-6 py-12 text-center">
         <p className="text-[13px] text-text-3">No connectors configured yet.</p>
         <button
-          onClick={() => { setEditingConnectorId(null); setConnectorSheetOpen(true) }}
+          onClick={() => openConnector(null)}
           className="mt-3 text-[13px] text-accent-bright hover:underline cursor-pointer bg-transparent border-none"
         >
           + Add Connector
@@ -113,7 +117,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
             {error}
           </div>
         )}
-        {list.map((c) => {
+        {list.map((c, idx) => {
           const agent = c.agentId ? agents[c.agentId] : null
           const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
           const isRunning = c.status === 'running'
@@ -121,8 +125,12 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
           return (
             <button
               key={c.id}
-              onClick={() => { setEditingConnectorId(c.id); setConnectorSheetOpen(true) }}
+              onClick={() => openConnector(c.id)}
               className="w-full flex items-center gap-3 px-5 py-2.5 hover:bg-white/[0.02] transition-colors cursor-pointer bg-transparent border-none text-left"
+              style={{
+                animation: 'fade-up 0.4s var(--ease-spring) both',
+                animationDelay: `${idx * 0.03}s`
+              }}
             >
               <ConnectorPlatformIcon platform={c.platform} size={16} />
               <div className="flex-1 min-w-0">
@@ -133,7 +141,8 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
               </div>
               <span className={`shrink-0 w-2 h-2 rounded-full ${
                 isRunning ? 'bg-green-400' : c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
-              }`} />
+              }`}
+              style={isRunning ? { animation: 'pulse-subtle 2s infinite' } : undefined} />
             </button>
           )
         })}
@@ -150,7 +159,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
         </div>
       )}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-        {list.map((c) => {
+        {list.map((c, idx) => {
           const platformLabel = getConnectorPlatformLabel(c.platform)
           const agent = c.agentId ? agents[c.agentId] : null
           const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
@@ -164,11 +173,23 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
           const lastMsg = c.presence?.lastMessageAt
 
           return (
-            <button
+            <div
               key={c.id}
-              onClick={() => { setEditingConnectorId(c.id); setConnectorSheetOpen(true) }}
-              className="group relative flex flex-col rounded-[14px] border border-white/[0.06] bg-surface p-4 cursor-pointer transition-all hover:border-white/[0.12] hover:bg-white/[0.02] text-left w-full"
-              style={{ fontFamily: 'inherit' }}
+              role="button"
+              tabIndex={0}
+              onClick={() => openConnector(c.id)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  openConnector(c.id)
+                }
+              }}
+              className="group relative flex flex-col rounded-[14px] border border-white/[0.06] bg-surface p-4 cursor-pointer transition-all hover:border-white/[0.12] hover:bg-white/[0.02] hover:scale-[1.01] text-left w-full"
+              style={{
+                fontFamily: 'inherit',
+                animation: 'spring-in 0.5s var(--ease-spring) both',
+                animationDelay: `${idx * 0.05}s`
+              }}
             >
               {/* Header: platform badge + status */}
               <div className="flex items-center gap-3 mb-3">
@@ -178,7 +199,8 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                     <span className="text-[14px] font-600 text-text truncate">{c.name}</span>
                     <span className={`shrink-0 w-2 h-2 rounded-full ${
                       isRunning ? 'bg-green-400' : c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
-                    }`} />
+                    }`}
+                    style={isRunning ? { animation: 'pulse-subtle 2s infinite' } : c.status === 'error' ? { animation: 'ai-shake 0.5s' } : undefined} />
                   </div>
                   <span className="text-[11px] text-text-3 block">
                     {isRunning ? 'Connected' : c.status === 'error' ? 'Error' : 'Stopped'}
@@ -264,7 +286,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                   )}
                 </div>
               </div>
-            </button>
+            </div>
           )
         })}
       </div>

package/src/components/connectors/connector-sheet.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { api } from '@/lib/api-client'
@@ -242,6 +242,29 @@ const COMMON_CONFIG_FIELDS: { key: string; label: string; placeholder: string; h
 export function ConnectorSheet() {
   const open = useAppStore((s) => s.connectorSheetOpen)
   const setOpen = useAppStore((s) => s.setConnectorSheetOpen)
+  // ... (existing state)
+  const [dynamicPlatforms, setDynamicPlatforms] = useState<Array<{ id: string; name: string; description?: string }>>([])
+
+  useEffect(() => {
+    if (open) {
+      api<Array<{ id: string; name: string; description?: string }>>('GET', '/plugins/ui?type=connectors').then(list => {
+        setDynamicPlatforms(list || [])
+      }).catch(() => {})
+    }
+  }, [open])
+
+  const ALL_PLATFORMS = useMemo(() => {
+    const plugins = dynamicPlatforms.map(p => ({
+      id: p.id,
+      label: p.name,
+      color: '#10B981',
+      setupSteps: [p.description || 'Follow the plugin instructions for setup.'],
+      tokenLabel: 'Plugin Token',
+      tokenHelp: 'Secret key required by this plugin connector.',
+      configFields: [],
+    }))
+    return [...PLATFORMS, ...plugins]
+  }, [dynamicPlatforms])
   const editingId = useAppStore((s) => s.editingConnectorId)
   const setEditingId = useAppStore((s) => s.setEditingConnectorId)
   const connectors = useAppStore((s) => s.connectors)
@@ -393,7 +416,7 @@ export function ConnectorSheet() {
     setEditingId(null)
   }
 
-  const platformConfig = PLATFORMS.find((p) => p.id === platform)!
+  const platformConfig = ALL_PLATFORMS.find((p) => p.id === platform) || ALL_PLATFORMS[0]
   const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
   const credList = Object.values(credentials)
 
@@ -413,17 +436,17 @@ export function ConnectorSheet() {
         <div className="mb-8">
           <SectionLabel>Platform</SectionLabel>
           <div className="grid grid-cols-2 gap-3">
-            {PLATFORMS.map((p) => (
+            {ALL_PLATFORMS.map((p) => (
               <button
                 key={p.id}
-                onClick={() => { setPlatform(p.id); setShowSetup(false) }}
+                onClick={() => { setPlatform(p.id as ConnectorPlatform); setShowSetup(false) }}
                 className={`flex items-center gap-3 p-4 rounded-[14px] cursor-pointer transition-all duration-200 border text-left
                   ${platform === p.id
                     ? 'bg-white/[0.04] border-white/[0.15] shadow-[0_0_20px_rgba(255,255,255,0.02)]'
                     : 'bg-transparent border-white/[0.04] hover:border-white/[0.08] hover:bg-white/[0.01]'}`}
                 style={{ fontFamily: 'inherit' }}
               >
-                <ConnectorPlatformBadge platform={p.id} size={40} iconSize={18} />
+                <ConnectorPlatformBadge platform={p.id as ConnectorPlatform} size={40} iconSize={18} />
                 <div>
                   <div className={`text-[14px] font-600 ${platform === p.id ? 'text-text' : 'text-text-2'}`}>{p.label}</div>
                   <div className="text-[11px] text-text-3 mt-0.5">
@@ -439,7 +462,7 @@ export function ConnectorSheet() {
       {/* Editing: show platform badge */}
       {editing && (
         <div className="mb-6 flex items-center gap-3">
-          <ConnectorPlatformBadge platform={platformConfig.id} size={40} iconSize={18} />
+          <ConnectorPlatformBadge platform={platformConfig.id as ConnectorPlatform} size={40} iconSize={18} />
           <div>
             <div className="text-[14px] font-600 text-text">{platformConfig.label}</div>
             <div className="flex items-center gap-2 mt-0.5">

package/src/components/home/home-view.tsx

@@ -192,7 +192,7 @@ export function HomeView() {
     <div className="flex-1 overflow-y-auto">
       <div className="max-w-[800px] mx-auto px-6 py-10">
         {/* Header */}
-        <div className="mb-10">
+        <div className="mb-10" style={{ animation: 'spring-in 0.6s var(--ease-spring)' }}>
           <h1 className="font-display text-[28px] font-700 text-text tracking-[-0.03em]">
             SwarmClaw
           </h1>
@@ -203,15 +203,15 @@ export function HomeView() {
 
         {/* Quick Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
-          <StatCard label="Agents" value={String(agentCount)} hint="Total active agents configured in your dashboard" />
-          <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} hint="Tasks currently running or queued for execution" />
-          <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} hint="Estimated API cost for today across all providers" />
-          <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} hint="Active bridges to chat platforms (Discord, Slack, etc.)" />
+          <StatCard label="Agents" value={String(agentCount)} hint="Total active agents configured in your dashboard" index={0} />
+          <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} hint="Tasks currently running or queued for execution" index={1} />
+          <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} hint="Estimated API cost for today across all providers" index={2} />
+          <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} hint="Active bridges to chat platforms (Discord, Slack, etc.)" index={3} />
         </div>
 
         {/* Cost trend sparkline */}
         {costTrend.length > 1 && (
-          <div className="mb-10 px-1">
+          <div className="mb-10 px-1" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
             <p className="text-[10px] text-text-3/50 uppercase tracking-wider mb-1 flex items-center gap-1.5">
               7-day cost trend <HintTip text="Daily API spend over the past week — hover for details" />
             </p>
@@ -247,7 +247,7 @@ export function HomeView() {
 
         {/* Notifications banner */}
         {unreadNotifications.length > 0 && (
-          <section className="mb-8">
+          <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.35s both' }}>
             <div className="rounded-[14px] border border-amber-400/20 bg-amber-400/[0.04] overflow-hidden">
               <div className="flex items-center gap-2 px-4 py-2.5 border-b border-amber-400/10">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-amber-400">
@@ -283,7 +283,7 @@ export function HomeView() {
         )}
 
         {/* Connector Status */}
-        <section className="mb-8">
+        <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
           <SectionHeader label="Connectors" onViewAll={allConnectors.length > 0 ? () => setActiveView('connectors') : undefined} />
           {allConnectors.length > 0 ? (
             <div className="flex gap-2 flex-wrap">
@@ -307,7 +307,7 @@ export function HomeView() {
         </section>
 
         {/* Two-column layout: Running Tasks + Upcoming Schedules */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.45s both' }}>
           {/* Running Tasks */}
           <section>
             <SectionHeader label="Running Tasks" onViewAll={runningTasks.length > 0 ? () => setActiveView('tasks') : undefined} />
@@ -373,7 +373,7 @@ export function HomeView() {
         </div>
 
         {/* Pinned Agents */}
-        <section className="mb-8">
+        <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.5s both' }}>
           <SectionHeader label="Pinned Agents" />
           {pinnedAgents.length > 0 ? (
             <div className="flex gap-3 overflow-x-auto pb-2">
@@ -438,7 +438,7 @@ export function HomeView() {
         </section>
 
         {/* Recent Chats */}
-        <section className="mb-8">
+        <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.55s both' }}>
           <SectionHeader label="Recent Chats" />
           {recentChats.length > 0 ? (
             <div className="flex flex-col gap-1">
@@ -486,7 +486,7 @@ export function HomeView() {
 
         {/* Activity Feed */}
         {recentActivity.length > 0 && (
-          <section className="mb-10">
+          <section className="mb-10" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.6s both' }}>
             <SectionHeader label="Recent Activity" />
             <div className="flex flex-col gap-0.5">
               {recentActivity.map((entry) => (
@@ -526,9 +526,15 @@ function SectionHeader({ label, onViewAll }: { label: string; onViewAll?: () =>
   )
 }
 
-function StatCard({ label, value, accent, hint }: { label: string; value: string; accent?: boolean; hint?: string }) {
+function StatCard({ label, value, accent, hint, index = 0 }: { label: string; value: string; accent?: boolean; hint?: string; index?: number }) {
   return (
-    <div className="px-4 py-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06]">
+    <div
+      className="px-4 py-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06] hover:bg-white/[0.05] transition-all hover:scale-[1.02] active:scale-[0.98] cursor-default"
+      style={{
+        animation: 'spring-in 0.6s var(--ease-spring) both',
+        animationDelay: `${0.1 + index * 0.05}s`
+      }}
+    >
       <p className="text-[11px] font-600 text-text-3/60 uppercase tracking-wider mb-1 flex items-center gap-1.5">
         {label}
         {hint && <HintTip text={hint} />}

package/src/components/input/chat-input.tsx

@@ -15,13 +15,14 @@ interface Props {
   streaming: boolean
   onSend: (text: string) => void
   onStop: () => void
+  pluginChatActions?: Array<{ id: string; label: string; action: string; value: string; tooltip?: string }>
 }
 
 // FilePreview is now imported from @/components/shared/file-preview
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10 MB
 
-export function ChatInput({ streaming, onSend, onStop }: Props) {
+export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }: Props) {
   const [value, setValue] = useState('')
   const { ref: textareaRef, resize } = useAutoResize()
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -219,6 +220,26 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
               <span className="hidden sm:inline">Image</span>
             </button>
 
+            {/* Plugin Chat Actions */}
+            {pluginChatActions.map((action) => (
+              <Tooltip key={action.id}>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => {
+                      if (action.action === 'message') onSend(action.value)
+                      else if (action.action === 'link') window.open(action.value, '_blank')
+                    }}
+                    className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-emerald-500/[0.05]
+                      text-emerald-400 text-[13px] cursor-pointer hover:text-emerald-300 hover:bg-emerald-500/[0.1] transition-all duration-200"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {action.label}
+                  </button>
+                </TooltipTrigger>
+                {action.tooltip && <TooltipContent>{action.tooltip}</TooltipContent>}
+              </Tooltip>
+            ))}
+
             {micSupported && (
               <button
                 onClick={toggleRecording}