@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/cli/spec.js

@@ -25,6 +25,21 @@ const COMMAND_GROUPS = {
       login: { description: 'Validate an access key', method: 'POST', path: '/auth' },
     },
   },
+  chatrooms: {
+    description: 'Manage multi-agent chatrooms',
+    commands: {
+      list: { description: 'List chatrooms', method: 'GET', path: '/chatrooms' },
+      get: { description: 'Get chatroom by id', method: 'GET', path: '/chatrooms/:id', params: ['id'] },
+      create: { description: 'Create a chatroom', method: 'POST', path: '/chatrooms' },
+      update: { description: 'Update a chatroom', method: 'PUT', path: '/chatrooms/:id', params: ['id'] },
+      delete: { description: 'Delete a chatroom', method: 'DELETE', path: '/chatrooms/:id', params: ['id'] },
+      chat: { description: 'Post chatroom message and stream agent replies', method: 'POST', path: '/chatrooms/:id/chat', params: ['id'] },
+      'add-member': { description: 'Add an agent to a chatroom', method: 'POST', path: '/chatrooms/:id/members', params: ['id'] },
+      'remove-member': { description: 'Remove an agent from a chatroom', method: 'DELETE', path: '/chatrooms/:id/members', params: ['id'] },
+      react: { description: 'Toggle reaction on a chatroom message', method: 'POST', path: '/chatrooms/:id/reactions', params: ['id'] },
+      pin: { description: 'Toggle pin on a chatroom message', method: 'POST', path: '/chatrooms/:id/pins', params: ['id'] },
+    },
+  },
   connectors: {
     description: 'Manage chat connectors',
     commands: {
@@ -130,6 +145,16 @@ const COMMAND_GROUPS = {
       get: { description: 'Download memory image by filename', method: 'GET', path: '/memory-images/:filename', params: ['filename'], binary: true },
     },
   },
+  notifications: {
+    description: 'In-app notification center',
+    commands: {
+      list: { description: 'List notifications (supports --query unreadOnly=true,limit=100)', method: 'GET', path: '/notifications' },
+      create: { description: 'Create notification', method: 'POST', path: '/notifications' },
+      clear: { description: 'Clear read notifications', method: 'DELETE', path: '/notifications' },
+      'mark-read': { description: 'Mark notification as read', method: 'PUT', path: '/notifications/:id', params: ['id'] },
+      delete: { description: 'Delete notification by id', method: 'DELETE', path: '/notifications/:id', params: ['id'] },
+    },
+  },
   orchestrator: {
     description: 'Orchestrator runs and run-state APIs',
     commands: {
@@ -198,6 +223,12 @@ const COMMAND_GROUPS = {
       'models-reset': { description: 'Delete provider model overrides', method: 'DELETE', path: '/providers/:id/models', params: ['id'] },
     },
   },
+  search: {
+    description: 'Global search across app resources',
+    commands: {
+      query: { description: 'Search agents/tasks/sessions/schedules/webhooks/skills (supports --query q=term)', method: 'GET', path: '/search' },
+    },
+  },
   schedules: {
     description: 'Scheduled task automation',
     commands: {
@@ -287,6 +318,7 @@ const COMMAND_GROUPS = {
       list: { description: 'List tasks', method: 'GET', path: '/tasks' },
       get: { description: 'Get task by id', method: 'GET', path: '/tasks/:id', params: ['id'] },
       create: { description: 'Create task', method: 'POST', path: '/tasks' },
+      bulk: { description: 'Bulk update tasks (status/agent/project)', method: 'POST', path: '/tasks/bulk' },
       update: { description: 'Update task', method: 'PUT', path: '/tasks/:id', params: ['id'] },
       delete: { description: 'Archive task', method: 'DELETE', path: '/tasks/:id', params: ['id'] },
       archive: { description: 'Archive task', method: 'DELETE', path: '/tasks/:id', params: ['id'] },

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

@@ -3,26 +3,66 @@
 import { useMemo } from 'react'
 import multiavatar from '@multiavatar/multiavatar'
 
+/** Strip scripts/event handlers from SVG to prevent XSS */
+function sanitizeSvg(svg: string): string {
+  return svg
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/\bon\w+\s*=\s*"[^"]*"/gi, '')
+    .replace(/\bon\w+\s*=\s*'[^']*'/gi, '')
+}
+
 interface Props {
   seed?: string | null
   name: string
   size?: number
   className?: string
+  status?: 'idle' | 'busy' | 'online'
+  heartbeatPulse?: boolean
 }
 
-export function AgentAvatar({ seed, name, size = 32, className = '' }: Props) {
+const STATUS_COLORS: Record<string, string> = {
+  busy: 'bg-amber-400',
+  online: 'bg-emerald-400',
+}
+
+const HEART_PATH = 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
+
+export function AgentAvatar({ seed, name, size = 32, className = '', status, heartbeatPulse }: Props) {
   const svgHtml = useMemo(() => {
     if (!seed) return null
-    return multiavatar(seed)
+    return sanitizeSvg(multiavatar(seed))
   }, [seed])
 
+  const dotSize = Math.max(6, Math.round(size * 0.28))
+  const dot = status && status !== 'idle' ? (
+    <span
+      className={`absolute -bottom-0.5 -right-0.5 rounded-full ${STATUS_COLORS[status]} ring-2 ring-[#0f0f1a]`}
+      style={{ width: dotSize, height: dotSize }}
+      title={status === 'busy' ? 'Busy' : 'Online'}
+    />
+  ) : null
+
+  const heartEl = heartbeatPulse ? (
+    <svg
+      className="absolute left-1/2 -translate-x-1/2 pointer-events-none"
+      style={{ top: -Math.max(10, size * 0.35), width: 10, height: 10, animation: 'heartbeat-float 1.5s ease forwards' }}
+      viewBox="0 0 24 24"
+      fill="#22c55e"
+    >
+      <path d={HEART_PATH} />
+    </svg>
+  ) : null
+
   if (svgHtml) {
     return (
-      <div
-        className={`shrink-0 rounded-full overflow-hidden ${className}`}
-        style={{ width: size, height: size }}
-        dangerouslySetInnerHTML={{ __html: svgHtml }}
-      />
+      <div className={`relative shrink-0 ${className}`} style={{ width: size, height: size }}>
+        <div
+          className="rounded-full overflow-hidden w-full h-full"
+          dangerouslySetInnerHTML={{ __html: svgHtml }}
+        />
+        {heartEl}
+        {dot}
+      </div>
     )
   }
 
@@ -36,10 +76,17 @@ export function AgentAvatar({ seed, name, size = 32, className = '' }: Props) {
 
   return (
     <div
-      className={`shrink-0 rounded-full flex items-center justify-center bg-accent-soft text-accent-bright font-600 ${className}`}
-      style={{ width: size, height: size, fontSize: size * 0.38 }}
+      className={`relative shrink-0 ${className}`}
+      style={{ width: size, height: size }}
     >
-      {initials || '?'}
+      <div
+        className="rounded-full flex items-center justify-center bg-accent-soft text-accent-bright font-600 w-full h-full"
+        style={{ fontSize: size * 0.38 }}
+      >
+        {initials || '?'}
+      </div>
+      {heartEl}
+      {dot}
     </div>
   )
 }

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

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import type { Agent } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
+import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import { createAgent, deleteAgent } from '@/lib/agents'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
@@ -17,16 +18,18 @@ import {
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { useApprovalStore } from '@/stores/use-approval-store'
 import { AgentAvatar } from './agent-avatar'
+import { toast } from 'sonner'
 
 interface Props {
   agent: Agent
   isDefault?: boolean
   isRunning?: boolean
+  isOnline?: boolean
   isSelected?: boolean
   onSetDefault?: (id: string) => void
 }
 
-export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefault }: Props) {
+export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, onSetDefault }: Props) {
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const loadSessions = useAppStore((s) => s.loadSessions)
@@ -34,12 +37,18 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const setActiveView = useAppStore((s) => s.setActiveView)
   const setMessages = useChatStore((s) => s.setMessages)
+  const togglePinAgent = useAppStore((s) => s.togglePinAgent)
   const [running, setRunning] = useState(false)
   const [dialogOpen, setDialogOpen] = useState(false)
   const [taskInput, setTaskInput] = useState('')
   const [confirmDelete, setConfirmDelete] = useState(false)
   const approvals = useApprovalStore((s) => s.approvals)
   const pendingApprovalCount = Object.values(approvals).filter((a) => a.agentId === agent.id).length
+  const [heartbeatPulse, setHeartbeatPulse] = useState(false)
+  useWs(`heartbeat:agent:${agent.id}`, () => {
+    setHeartbeatPulse(true)
+    setTimeout(() => setHeartbeatPulse(false), 1500)
+  })
 
   const handleClick = () => {
     setEditingAgentId(agent.id)
@@ -74,11 +83,13 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
     const { id: _id, createdAt: _ca, updatedAt: _ua, ...rest } = agent
     await createAgent({ ...rest, name: agent.name + ' (Copy)' })
     await loadAgents()
+    toast.success('Agent duplicated')
   }
 
   const handleDelete = async () => {
     await deleteAgent(agent.id)
     await loadAgents()
+    toast.success('Agent moved to trash')
     setConfirmDelete(false)
   }
 
@@ -93,6 +104,21 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
             : 'bg-transparent border border-transparent hover:bg-white/[0.05] hover:border-white/[0.08]'}`}
       >
         {isSelected && <div className="card-select-indicator" />}
+        {/* Pin/star button */}
+        <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={`absolute top-3 right-10 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:opacity-60 hover:!opacity-100 text-text-3'}`}
+        >
+          <svg width="12" height="12" 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>
         {/* Three-dot dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -111,9 +137,12 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="min-w-[140px]">
             <DropdownMenuItem onClick={handleClick}>Edit</DropdownMenuItem>
+            <DropdownMenuItem onClick={() => { togglePinAgent(agent.id); toast.success(agent.pinned ? 'Agent unpinned' : 'Agent pinned') }}>
+              {agent.pinned ? 'Unpin' : 'Pin'}
+            </DropdownMenuItem>
             <DropdownMenuItem onClick={handleDuplicate}>Duplicate</DropdownMenuItem>
             {!isDefault && onSetDefault && (
-              <DropdownMenuItem onClick={() => onSetDefault(agent.id)}>Set Default</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => { onSetDefault(agent.id); toast.success(`${agent.name} set as default`) }}>Set Default</DropdownMenuItem>
             )}
             <DropdownMenuSeparator />
             <DropdownMenuItem
@@ -126,10 +155,13 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
         </DropdownMenu>
 
         <div className="flex items-center gap-2.5">
-          <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
-          {isRunning && (
-            <span className="shrink-0 w-2 h-2 rounded-full bg-emerald-400" style={{ animation: 'pulse 2s ease infinite' }} title="Running" />
-          )}
+          <AgentAvatar
+            seed={agent.avatarSeed}
+            name={agent.name}
+            size={28}
+            status={isRunning ? 'busy' : isOnline ? 'online' : undefined}
+            heartbeatPulse={heartbeatPulse}
+          />
           <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{agent.name}</span>
           {pendingApprovalCount > 0 && (
             <span className="shrink-0 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-700">
@@ -146,15 +178,16 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
               onClick={handleRunClick}
               disabled={running}
               className="shrink-0 text-[10px] font-600 uppercase tracking-wider px-2.5 py-1 rounded-[6px] cursor-pointer
-                transition-all border-none bg-[#6366F1]/20 text-[#818CF8] hover:bg-[#6366F1]/30 disabled:opacity-40"
+                transition-all border-none bg-accent-bright/20 text-[#818CF8] hover:bg-accent-bright/30 disabled:opacity-40"
               style={{ fontFamily: 'inherit' }}
             >
               {running ? '...' : 'Run'}
             </button>
           )}
           {agent.isOrchestrator && (
-            <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-amber-400/80 bg-amber-400/[0.08] px-2 py-0.5 rounded-[6px]">
-              orch
+            <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-amber-400/80 bg-amber-400/[0.08] px-2 py-0.5 rounded-[6px] flex items-center gap-1">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M16 3h5v5"/><path d="M21 3l-7 7"/><path d="M8 21H3v-5"/><path d="M3 21l7-7"/></svg>
+              delegates
             </span>
           )}
         </div>
@@ -168,19 +201,19 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
           )}
         </div>
         <div className="flex items-center gap-3 mt-1.5 text-[11px] text-text-3/50">
-          {(agent as any).lastUsedAt ? (
+          {agent.lastUsedAt ? (
             <span>Last used: {(() => {
-              const days = Math.floor((Date.now() - (agent as any).lastUsedAt) / 86400000)
+              const days = Math.floor((Date.now() - agent.lastUsedAt) / 86400000)
               return days === 0 ? 'today' : `${days}d ago`
             })()}</span>
-          ) : (agent as any).updatedAt ? (
+          ) : agent.updatedAt ? (
             <span>Updated: {(() => {
               const days = Math.floor((Date.now() - agent.updatedAt) / 86400000)
               return days === 0 ? 'today' : `${days}d ago`
             })()}</span>
           ) : null}
-          {(agent as any).totalCost != null && (agent as any).totalCost > 0 && (
-            <span>Cost: ${((agent as any).totalCost as number).toFixed(2)}</span>
+          {agent.totalCost != null && agent.totalCost > 0 && (
+            <span>Cost: ${agent.totalCost.toFixed(2)}</span>
           )}
         </div>
       </div>
@@ -214,7 +247,7 @@ export function AgentCard({ agent, isDefault, isRunning, isSelected, onSetDefaul
             <button
               onClick={handleConfirmRun}
               disabled={!taskInput.trim()}
-              className="px-4 py-2 rounded-[10px] border-none bg-[#6366F1] text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+              className="px-4 py-2 rounded-[10px] border-none bg-accent-bright text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
               style={{ fontFamily: 'inherit' }}
             >
               Run

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

@@ -1,11 +1,12 @@
 '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 { 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 +22,23 @@ 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 [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
@@ -51,6 +66,41 @@ 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
+      if (chatFilter === 'active') return isRunning || isStreaming
+      // 'recent' — activity within 24h
+      const lastActive = threadSession?.lastActiveAt || a.updatedAt
+      return now - lastActive < 86_400_000
+    })
+  }, [sortedAgents, chatFilter, sessions, runningAgentIds, streamingSessionId])
+
+  // 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
@@ -84,7 +134,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 +148,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 +180,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
           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-3.5 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 ${
@@ -146,6 +215,50 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                     <span className="text-[10px] text-text-3/60 font-mono shrink-0">
                       {agent.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 +276,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>