@swarmclawai/swarmclaw 0.6.7 → 0.7.0

package/src/components/chat/task-approval-card.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useState } from 'react'
+import type { BoardTask } from '@/types'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import { toast } from 'sonner'
+
+interface Props {
+  task: BoardTask
+}
+
+export function TaskApprovalCard({ task }: Props) {
+  const [resolving, setResolving] = useState(false)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+
+  const handleResolve = async (approved: boolean) => {
+    setResolving(true)
+    try {
+      await api('POST', `/tasks/${task.id}/approve`, { approved })
+      toast.success(approved ? 'Tool execution approved' : 'Tool execution rejected')
+      await loadTasks()
+      await loadSessions()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to submit decision')
+    } finally {
+      setResolving(false)
+    }
+  }
+
+  if (!task.pendingApproval) return null
+
+  const { toolName, args } = task.pendingApproval
+
+  return (
+    <div className="my-2 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] p-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-5 h-5 rounded-full bg-amber-500/20 flex items-center justify-center">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-amber-400">
+            <path d="M12 9v2m0 4h.01" />
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          </svg>
+        </div>
+        <span className="text-[12px] font-700 text-amber-400 uppercase tracking-wider">Orchestration Intervention Required</span>
+      </div>
+
+      <p className="text-[13px] text-text-2 mb-3 font-500">
+        Agent requested to use <span className="text-amber-400 font-600 font-mono">{toolName}</span>:
+      </p>
+
+      <div className="bg-black/30 rounded-[10px] border border-white/[0.04] p-3 mb-4 overflow-x-auto max-h-[200px] overflow-y-auto">
+        <pre className="text-[11px] font-mono text-text-2/80 leading-relaxed whitespace-pre-wrap break-all">
+          {JSON.stringify(args, null, 2)}
+        </pre>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => handleResolve(true)}
+          disabled={resolving}
+          className="flex-1 px-4 py-2 rounded-[10px] bg-emerald-500 text-[#000] text-[12px] font-700 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {resolving ? 'Applying...' : 'Approve'}
+        </button>
+        <button
+          onClick={() => handleResolve(false)}
+          disabled={resolving}
+          className="px-4 py-2 rounded-[10px] bg-white/[0.04] border border-white/[0.08] text-text-3 text-[12px] font-600 hover:bg-white/[0.08] active:scale-[0.98] transition-all disabled:opacity-50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Reject
+        </button>
+      </div>
+    </div>
+  )
+}

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-call-bubble.tsx

@@ -29,6 +29,7 @@ const TOOL_COLORS: Record<string, string> = {
   search_history_tool: '#8B5CF6',
   manage_tasks: '#EC4899',
   manage_schedules: '#EC4899',
+  schedule_wake: '#F59E0B',
   manage_agents: '#EC4899',
   manage_skills: '#EC4899',
   manage_documents: '#EC4899',
@@ -81,6 +82,7 @@ export const TOOL_LABELS: Record<string, string> = {
   search_history_tool: 'Search History',
   manage_tasks: 'Tasks',
   manage_schedules: 'Schedules',
+  schedule_wake: 'Set Reminder',
   manage_agents: 'Agents',
   manage_skills: 'Skills',
   manage_documents: 'Documents',
@@ -118,6 +120,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   search_history_tool: 'Search chat history for relevant prior context',
   manage_tasks: 'Create, update, and manage tasks on the board',
   manage_schedules: 'Create and manage cron schedules',
+  schedule_wake: 'Set a timer to wake up in this chat later',
   manage_agents: 'Create and configure other agents',
   manage_skills: 'Create and manage agent skills',
   manage_documents: 'Upload and search indexed documents',

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'
@@ -12,6 +12,7 @@ import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { ChatroomPickerList } from '@/components/shared/chatroom-picker-list'
 import { SheetFooter } from '@/components/shared/sheet-footer'
 import { SectionLabel } from '@/components/shared/section-label'
+import { HintTip } from '@/components/shared/hint-tip'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { ConnectorHealth } from '@/components/connectors/connector-health'
 
@@ -241,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)
@@ -392,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)
 
@@ -412,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">
@@ -438,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">
@@ -643,12 +667,18 @@ export function ConnectorSheet() {
       {/* Platform-specific config */}
       {[...platformConfig.configFields, ...COMMON_CONFIG_FIELDS].map((field) => {
         const isTagField = field.key === 'allowedJids' || field.key === 'channelIds' || field.key === 'chatIds' || field.key === 'allowFrom'
+        const fieldHint: Record<string, string> = {
+          channelIds: "Find these in your platform's developer settings. Leave empty to allow all channels",
+          chatIds: "Find these in your platform's developer settings. Leave empty to allow all channels",
+          allowedJids: "Phone numbers in international format (e.g. 447xxx). Leave empty to allow all",
+        }
         if (isTagField) {
           const tags = (config[field.key] || '').split(',').map((s) => s.trim()).filter(Boolean)
           return (
             <div key={field.key} className="mb-6">
-              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+              <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
                 {field.label} <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+                {fieldHint[field.key] && <HintTip text={fieldHint[field.key]} />}
               </label>
               {field.help && <p className="text-[12px] text-text-3/60 mb-2">{field.help}</p>}
               <div className="flex flex-wrap gap-2 mb-2">