@swarmclawai/swarmclaw 0.5.3 → 0.6.2

package/src/components/agents/agent-chat-list.tsx

@@ -1,11 +1,13 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { fetchMessages } from '@/lib/sessions'
 import type { Agent, Session } from '@/types'
 import { AgentAvatar } from './agent-avatar'
+import { toast } from 'sonner'
 
 interface Props {
   inSidebar?: boolean
@@ -21,9 +23,25 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
   const setMessages = useChatStore((s) => s.setMessages)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const tasks = useAppStore((s) => s.tasks)
+  const togglePinAgent = useAppStore((s) => s.togglePinAgent)
+  const appSettings = useAppStore((s) => s.appSettings)
+  const updateSettings = useAppStore((s) => s.updateSettings)
   const streamingSessionId = useChatStore((s) => s.streamingSessionId)
+  const chatFilter = useAppStore((s) => s.chatFilter ?? 'all')
+  const setChatFilter = useAppStore((s) => s.setChatFilter)
+  const chatrooms = useChatroomStore((s) => s.chatrooms)
+  const chatroomStreaming = useChatroomStore((s) => s.streamingAgents)
   const [search, setSearch] = useState('')
 
+  // FLIP animation refs
+  const rowRefs = useRef<Map<string, HTMLElement>>(new Map())
+  const previousTopRef = useRef<Map<string, number>>(new Map())
+
+  const setRowRef = useCallback((id: string, el: HTMLElement | null) => {
+    if (el) rowRefs.current.set(id, el)
+    else rowRefs.current.delete(id)
+  }, [])
+
   useEffect(() => { loadAgents() }, [loadAgents])
 
   // Build agent list sorted by last activity in their thread session
@@ -42,6 +60,21 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       })
   }, [agents, sessions, search])
 
+  // Compute agents active in chatrooms (message in last 30min or currently streaming)
+  const chatroomActiveAgentIds = useMemo(() => {
+    const set = new Set<string>()
+    const cutoff = Date.now() - 30 * 60 * 1000
+    for (const chatroom of Object.values(chatrooms)) {
+      for (let i = chatroom.messages.length - 1; i >= 0; i--) {
+        const msg = chatroom.messages[i]
+        if (msg.time < cutoff) break
+        if (msg.role === 'assistant' && msg.senderId !== 'user') set.add(msg.senderId)
+      }
+    }
+    for (const agentId of chatroomStreaming.keys()) set.add(agentId)
+    return set
+  }, [chatrooms, chatroomStreaming])
+
   // Compute running tasks per agent
   const runningAgentIds = useMemo(() => {
     const set = new Set<string>()
@@ -51,6 +84,42 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
     return set
   }, [tasks])
 
+  // Apply chatFilter
+  const filteredAgents = useMemo(() => {
+    if (chatFilter === 'all') return sortedAgents
+    const now = Date.now()
+    return sortedAgents.filter((a) => {
+      const threadSession = a.threadSessionId ? sessions[a.threadSessionId] as Session | undefined : undefined
+      const isRunning = runningAgentIds.has(a.id) || (threadSession?.active ?? false)
+      const isStreaming = streamingSessionId === a.threadSessionId
+      const isChatroomActive = chatroomActiveAgentIds.has(a.id)
+      if (chatFilter === 'active') return isRunning || isStreaming || isChatroomActive
+      // 'recent' — activity within 24h
+      const lastActive = threadSession?.lastActiveAt || a.updatedAt
+      return now - lastActive < 86_400_000
+    })
+  }, [sortedAgents, chatFilter, sessions, runningAgentIds, streamingSessionId, chatroomActiveAgentIds])
+
+  // FLIP: animate row position changes
+  useLayoutEffect(() => {
+    const prevTop = previousTopRef.current
+    for (const agent of filteredAgents) {
+      const el = rowRefs.current.get(agent.id)
+      if (!el) continue
+      const newTop = el.getBoundingClientRect().top
+      const oldTop = prevTop.get(agent.id)
+      if (oldTop !== undefined && oldTop !== newTop) {
+        const delta = oldTop - newTop
+        el.animate(
+          [{ transform: `translateY(${delta}px)` }, { transform: 'translateY(0)' }],
+          { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' },
+        )
+      }
+      prevTop.set(agent.id, newTop)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filteredAgents.map((a) => a.id).join(',')])
+
   const handleSelect = async (agent: Agent) => {
     await setCurrentAgent(agent.id)
     // Load messages for the thread
@@ -59,7 +128,9 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       try {
         const msgs = await fetchMessages(state.currentSessionId)
         setMessages(msgs)
-      } catch { /* ignore */ }
+      } catch (err: unknown) {
+        console.error('[agent-chat-list] Failed to load messages:', err instanceof Error ? err.message : String(err))
+      }
     }
     onSelect?.()
     // Delay scroll so React renders the new messages first
@@ -84,7 +155,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
         {!inSidebar && (
           <button
             onClick={() => setAgentSheetOpen(true)}
-            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white
+            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' }}
@@ -98,6 +169,24 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
 
   return (
     <div className="flex-1 overflow-y-auto">
+      {/* Filter control */}
+      {sortedAgents.length > 2 && (
+        <div className="flex items-center gap-1 px-4 pt-2.5 pb-1">
+          {(['all', 'active', 'recent'] as const).map((f) => (
+            <button
+              key={f}
+              type="button"
+              onClick={() => setChatFilter(f)}
+              data-active={chatFilter === f || undefined}
+              className="label-mono px-2.5 py-1 rounded-[6px] border-none cursor-pointer transition-colors
+                data-[active]:bg-accent-soft data-[active]:text-accent-bright
+                bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]"
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+      )}
       {(sortedAgents.length > 5 || search) && (
         <div className="px-4 py-2.5">
           <input
@@ -112,26 +201,27 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
         </div>
       )}
       <div className="flex flex-col gap-0.5 px-2 pb-4">
-        {sortedAgents.map((agent) => {
+        {filteredAgents.map((agent) => {
           const threadSession = agent.threadSessionId ? sessions[agent.threadSessionId] as Session | undefined : undefined
           const lastMsg = threadSession?.messages?.at(-1)
           const isActive = currentAgentId === agent.id
-          const isWorking = runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || (threadSession?.heartbeatEnabled ?? false)
+          const heartbeatOn = agent.heartbeatEnabled === true && (agent.tools?.length ?? 0) > 0
+          const recentlyActive = (threadSession?.lastActiveAt ?? 0) > Date.now() - 30 * 60 * 1000
+          const isWorking = runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || heartbeatOn || recentlyActive || chatroomActiveAgentIds.has(agent.id)
           const isTyping = streamingSessionId === agent.threadSessionId
           const preview = lastMsg?.text?.slice(0, 80)?.replace(/\n/g, ' ') || ''
 
           return (
-            <button
+            <div
               key={agent.id}
-              onClick={() => handleSelect(agent)}
-              className={`w-full text-left py-3 px-3.5 rounded-[12px] cursor-pointer transition-all duration-150 border-none
+              ref={(el) => setRowRef(agent.id, el)}
+              className={`group/row relative w-full text-left py-3 px-4 rounded-[12px] cursor-pointer transition-all duration-150 border-none
                 ${isActive
                   ? 'bg-accent-soft/80 border border-accent-bright/20'
                   : 'bg-transparent hover:bg-white/[0.02]'}`}
-              style={{ fontFamily: 'inherit' }}
+              onClick={() => handleSelect(agent)}
             >
               <div className="flex items-center gap-2.5">
-                {/* Avatar with status dot */}
                 <div className="relative shrink-0">
                   <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={36} />
                   <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-bg ${
@@ -144,8 +234,54 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                       {agent.name}
                     </span>
                     <span className="text-[10px] text-text-3/60 font-mono shrink-0">
-                      {agent.model ? agent.model.split('/').pop()?.split(':')[0] : agent.provider}
+                      {(threadSession?.model || agent.model)
+                        ? (threadSession?.model || agent.model)!.split('/').pop()?.split(':')[0]
+                        : agent.provider}
                     </span>
+                    {/* Set as default agent */}
+                    {(() => {
+                      const isDefault = appSettings.defaultAgentId === agent.id
+                      return (
+                        <button
+                          onClick={async (e) => {
+                            e.stopPropagation()
+                            if (isDefault) {
+                              await updateSettings({ defaultAgentId: null })
+                              toast.success('Default agent cleared')
+                            } else {
+                              await updateSettings({ defaultAgentId: agent.id })
+                              toast.success(`${agent.name} set as default`)
+                            }
+                          }}
+                          aria-label={isDefault ? 'Remove as default' : 'Set as default agent'}
+                          title={isDefault ? 'Default agent — click to clear' : 'Set as default agent'}
+                          className={`shrink-0 p-1 rounded-[6px] transition-all bg-transparent border-none cursor-pointer hover:bg-white/[0.06]
+                            ${isDefault ? 'opacity-100 text-accent-bright' : 'opacity-0 group-hover/row:opacity-60 hover:!opacity-100 text-text-3'}`}
+                          style={{ fontFamily: 'inherit' }}
+                        >
+                          <svg width="11" height="11" viewBox="0 0 24 24" fill={isDefault ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                            {isDefault && <path d="M9 22V12h6v10" fill="rgba(0,0,0,0.3)" stroke="none" />}
+                          </svg>
+                        </button>
+                      )
+                    })()}
+                    {/* Pin button — inline after model label */}
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        togglePinAgent(agent.id)
+                        toast.success(agent.pinned ? 'Agent unpinned' : 'Agent pinned')
+                      }}
+                      aria-label={agent.pinned ? 'Unpin agent' : 'Pin agent'}
+                      className={`shrink-0 p-1 rounded-[6px] transition-all bg-transparent border-none cursor-pointer hover:bg-white/[0.06]
+                        ${agent.pinned ? 'opacity-100 text-amber-400' : 'opacity-0 group-hover/row:opacity-60 hover:!opacity-100 text-text-3'}`}
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      <svg width="11" height="11" viewBox="0 0 24 24" fill={agent.pinned ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                      </svg>
+                    </button>
                   </div>
                   {isTyping ? (
                     <div className="text-[12px] text-accent-bright/70 mt-0.5 flex items-center gap-1.5">
@@ -163,7 +299,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                   ) : null}
                 </div>
               </div>
-            </button>
+            </div>
           )
         })}
       </div>

package/src/components/agents/agent-list.tsx

@@ -6,6 +6,8 @@ import { api } from '@/lib/api-client'
 import { AgentCard } from './agent-card'
 import { TrashList } from './trash-list'
 import { useApprovalStore } from '@/stores/use-approval-store'
+import { Skeleton } from '@/components/shared/skeleton'
+import { EmptyState } from '@/components/shared/empty-state'
 
 interface Props {
   inSidebar?: boolean
@@ -49,7 +51,8 @@ export function AgentList({ inSidebar }: Props) {
     } catch { /* ignore */ }
   }, [mainSession, loadSessions])
 
-  useEffect(() => { loadAgents() }, [])
+  const [loaded, setLoaded] = useState(Object.keys(agents).length > 0)
+  useEffect(() => { loadAgents().then(() => setLoaded(true)) }, [])
 
   // Compute which agents are "running" (have active sessions)
   const runningAgentIds = useMemo(() => {
@@ -60,6 +63,27 @@ export function AgentList({ inSidebar }: Props) {
     return ids
   }, [sessions])
 
+  // Re-evaluate online status periodically (Date.now() can't be called in useMemo directly)
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 60_000)
+    return () => clearInterval(id)
+  }, [])
+
+  // Agents that are "online": heartbeat enabled + tools, or recently active (within 30min)
+  const onlineAgentIds = useMemo(() => {
+    const ids = new Set<string>()
+    const recentThreshold = now - 30 * 60 * 1000
+    for (const a of Object.values(agents)) {
+      if (a.heartbeatEnabled === true && (a.tools?.length ?? 0) > 0) { ids.add(a.id); continue }
+      // Check if any session for this agent was active in the last 30 minutes
+      for (const s of Object.values(sessions)) {
+        if (s.agentId === a.id && (s.lastActiveAt ?? 0) > recentThreshold) { ids.add(a.id); break }
+      }
+    }
+    return ids
+  }, [agents, sessions, now])
+
   // Approval counts per agent
   const approvalsByAgent = useMemo(() => {
     const counts: Record<string, number> = {}
@@ -126,28 +150,35 @@ export function AgentList({ inSidebar }: Props) {
   }
 
   if (!filtered.length && !search) {
+    // Show skeleton cards while loading
+    if (!loaded) {
+      return (
+        <div className="flex-1 flex flex-col gap-1 px-2 pt-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="py-3.5 px-4 rounded-[14px] border border-transparent">
+              <div className="flex items-center gap-2.5">
+                <Skeleton className="rounded-full" width={28} height={28} />
+                <Skeleton className="rounded-[6px]" width={120} height={14} />
+              </div>
+              <Skeleton className="rounded-[6px] mt-2" width="80%" height={12} />
+              <Skeleton className="rounded-[6px] mt-1.5" width={80} height={11} />
+            </div>
+          ))}
+        </div>
+      )
+    }
     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">
+      <EmptyState
+        icon={
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
             <circle cx="12" cy="7" r="4" />
           </svg>
-        </div>
-        <p className="font-display text-[15px] font-600 text-text-2">No agents yet</p>
-        <p className="text-[13px] text-text-3/50">Create AI agents and orchestrators</p>
-        {!inSidebar && (
-          <button
-            onClick={() => setAgentSheetOpen(true)}
-            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-[#6366F1] 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' }}
-          >
-            + New Agent
-          </button>
-        )}
-      </div>
+        }
+        title="No agents yet"
+        subtitle="Create AI agents and orchestrators"
+        action={!inSidebar ? { label: '+ New Agent', onClick: () => setAgentSheetOpen(true) } : undefined}
+      />
     )
   }
 
@@ -212,7 +243,7 @@ export function AgentList({ inSidebar }: Props) {
       <div className="flex flex-col gap-1 px-2 pb-4">
         {filtered.map((p) => (
           <div key={p.id} ref={(el) => { if (el) cardRefs.current.set(p.id, el); else cardRefs.current.delete(p.id) }}>
-            <AgentCard agent={p} isDefault={p.id === defaultAgentId} isRunning={runningAgentIds.has(p.id)} isSelected={p.id === selectedAgentId} onSetDefault={handleSetDefault} />
+            <AgentCard agent={p} isDefault={p.id === defaultAgentId} isRunning={runningAgentIds.has(p.id)} isOnline={onlineAgentIds.has(p.id)} isSelected={p.id === selectedAgentId} onSetDefault={handleSetDefault} />
           </div>
         ))}
       </div>