@swarmclawai/swarmclaw 0.5.3 → 0.6.2

package/src/app/page.tsx

@@ -12,6 +12,130 @@ import { SetupWizard } from '@/components/auth/setup-wizard'
 import { AppLayout } from '@/components/layout/app-layout'
 import { useViewRouter } from '@/hooks/use-view-router'
 
+function FullScreenLoader() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center bg-bg overflow-hidden select-none">
+      {/* Animated orbital ring */}
+      <div className="relative w-[120px] h-[120px] mb-8">
+        {/* Outer glow pulse */}
+        <div
+          className="absolute inset-[-20px] rounded-full"
+          style={{
+            background: 'radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%)',
+            animation: 'sc-glow 2.5s ease-in-out infinite',
+          }}
+        />
+
+        {/* Orbital ring */}
+        <div
+          className="absolute inset-0 rounded-full border border-white/[0.06]"
+          style={{ animation: 'sc-ring 3s linear infinite' }}
+        />
+
+        {/* Orbiting dots */}
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <div
+            key={i}
+            className="absolute inset-0"
+            style={{
+              animation: `sc-orbit 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite`,
+              animationDelay: `${i * -0.4}s`,
+            }}
+          >
+            <div
+              className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+              style={{
+                width: i === 0 ? 8 : 6,
+                height: i === 0 ? 8 : 6,
+                background: i === 0 ? '#818CF8' : `rgba(129, 140, 248, ${0.7 - i * 0.1})`,
+                boxShadow: i === 0 ? '0 0 12px rgba(99,102,241,0.5)' : 'none',
+              }}
+            />
+          </div>
+        ))}
+
+        {/* Center logo mark */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div
+            className="relative"
+            style={{ animation: 'sc-breathe 2.5s ease-in-out infinite' }}
+          >
+            <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
+              {/* Hexagonal claw mark */}
+              <path
+                d="M18 4L30 11V25L18 32L6 25V11L18 4Z"
+                stroke="rgba(129, 140, 248, 0.3)"
+                strokeWidth="1"
+                fill="none"
+              />
+              <path
+                d="M18 9L25 13V23L18 27L11 23V13L18 9Z"
+                stroke="rgba(129, 140, 248, 0.5)"
+                strokeWidth="1.5"
+                fill="rgba(99, 102, 241, 0.06)"
+              />
+              {/* Claw lines */}
+              <path d="M14 15L18 20L22 15" stroke="#818CF8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M12 13L18 20L24 13" stroke="rgba(129, 140, 248, 0.3)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Brand text */}
+      <div
+        className="text-[15px] font-display font-700 tracking-[0.15em] uppercase"
+        style={{
+          background: 'linear-gradient(135deg, rgba(255,255,255,0.6), rgba(129, 140, 248, 0.8))',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          animation: 'sc-text-fade 2s ease-in-out infinite alternate',
+        }}
+      >
+        SwarmClaw
+      </div>
+
+      {/* Loading bar */}
+      <div className="mt-4 w-[100px] h-[2px] rounded-full bg-white/[0.06] overflow-hidden">
+        <div
+          className="h-full rounded-full bg-accent-bright/60"
+          style={{ animation: 'sc-progress 1.5s ease-in-out infinite' }}
+        />
+      </div>
+
+      {/* Loading animation keyframes */}
+      <style>{`
+        @keyframes sc-orbit {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes sc-ring {
+          from { transform: rotate(0deg) scale(1); }
+          50% { transform: rotate(180deg) scale(1.02); }
+          to { transform: rotate(360deg) scale(1); }
+        }
+        @keyframes sc-breathe {
+          0%, 100% { transform: scale(1); opacity: 0.9; }
+          50% { transform: scale(1.06); opacity: 1; }
+        }
+        @keyframes sc-glow {
+          0%, 100% { opacity: 0.5; transform: scale(0.9); }
+          50% { opacity: 1; transform: scale(1.1); }
+        }
+        @keyframes sc-text-fade {
+          0% { opacity: 0.6; }
+          100% { opacity: 1; }
+        }
+        @keyframes sc-progress {
+          0% { width: 0; margin-left: 0; }
+          50% { width: 70%; margin-left: 15%; }
+          100% { width: 0; margin-left: 100%; }
+        }
+      `}</style>
+    </div>
+  )
+}
+
 export default function Home() {
   const currentUser = useAppStore((s) => s.currentUser)
   const setUser = useAppStore((s) => s.setUser)
@@ -83,26 +207,31 @@ export default function Home() {
 
   useWs('sessions', loadSessions, 5000)
 
-  // Auto-select default agent's thread on load
+  // Auto-select agent's thread on load — resolves a persisted agentId into a session,
+  // or falls back to defaultAgentId from settings, then first agent.
+  const [agentReady, setAgentReady] = useState(false)
   useEffect(() => {
     if (!authenticated || !currentUser) return
-    const state = useAppStore.getState()
-    // Only auto-select if no agent is selected yet
-    if (state.currentAgentId) return
-
-    // Load agents and select 'default' agent
     let cancelled = false
     ;(async () => {
       try {
+        const state = useAppStore.getState()
         await state.loadAgents()
         if (cancelled) return
-        const agents = useAppStore.getState().agents
-        // Try 'default' agent first, then fall back to first agent
-        const defaultAgent = agents['default'] || Object.values(agents)[0]
-        if (defaultAgent) {
-          await useAppStore.getState().setCurrentAgent(defaultAgent.id)
+
+        const { agents, currentAgentId, appSettings } = useAppStore.getState()
+        // Priority: persisted agent > settings default > first agent
+        const targetId = (currentAgentId && agents[currentAgentId])
+          ? currentAgentId
+          : (appSettings.defaultAgentId && agents[appSettings.defaultAgentId])
+            ? appSettings.defaultAgentId
+            : Object.values(agents)[0]?.id || null
+
+        if (targetId) {
+          await useAppStore.getState().setCurrentAgent(targetId)
         }
       } catch { /* ignore */ }
+      if (!cancelled) setAgentReady(true)
     })()
     return () => { cancelled = true }
   }, [authenticated, currentUser])
@@ -148,10 +277,10 @@ export default function Home() {
 
   useViewRouter()
 
-  if (!hydrated || !authChecked) return null
+  if (!hydrated || !authChecked) return <FullScreenLoader />
   if (!authenticated) return <AccessKeyGate onAuthenticated={() => setAuthenticated(true)} />
   if (!currentUser) return <UserPicker />
-  if (setupDone === null) return null
+  if (setupDone === null || !agentReady) return <FullScreenLoader />
   if (!setupDone) return <SetupWizard onComplete={() => setSetupDone(true)} />
   return <AppLayout />
 }

package/src/cli/index.js

@@ -56,6 +56,37 @@ const COMMAND_GROUPS = [
       cmd('install', 'POST', '/clawhub/install', 'Install a skill from ClawHub', { expectsJsonBody: true }),
     ],
   },
+  {
+    name: 'chatrooms',
+    description: 'Manage multi-agent chatrooms',
+    commands: [
+      cmd('list', 'GET', '/chatrooms', 'List chatrooms'),
+      cmd('get', 'GET', '/chatrooms/:id', 'Get chatroom by id'),
+      cmd('create', 'POST', '/chatrooms', 'Create a chatroom', { expectsJsonBody: true }),
+      cmd('update', 'PUT', '/chatrooms/:id', 'Update a chatroom', { expectsJsonBody: true }),
+      cmd('delete', 'DELETE', '/chatrooms/:id', 'Delete a chatroom'),
+      cmd('chat', 'POST', '/chatrooms/:id/chat', 'Post a message to a chatroom and stream agent replies', {
+        expectsJsonBody: true,
+        responseType: 'sse',
+      }),
+      cmd('add-member', 'POST', '/chatrooms/:id/members', 'Add an agent to a chatroom (use --data \'{"agentId":"..."}\')', { expectsJsonBody: true }),
+      cmd('remove-member', 'DELETE', '/chatrooms/:id/members', 'Remove an agent from a chatroom (use --data \'{"agentId":"..."}\')', { expectsJsonBody: true }),
+      cmd('react', 'POST', '/chatrooms/:id/reactions', 'Toggle a reaction on a chatroom message', {
+        expectsJsonBody: true,
+      }),
+      cmd('pin', 'POST', '/chatrooms/:id/pins', 'Toggle pin on a chatroom message', {
+        expectsJsonBody: true,
+      }),
+    ],
+  },
+  {
+    name: 'canvas',
+    description: 'Read/update per-session canvas content',
+    commands: [
+      cmd('get', 'GET', '/canvas/:sessionId', 'Get current canvas content for a session'),
+      cmd('set', 'POST', '/canvas/:sessionId', 'Set/clear canvas content for a session', { expectsJsonBody: true }),
+    ],
+  },
   {
     name: 'connectors',
     description: 'Manage chat connectors',
@@ -131,6 +162,7 @@ const COMMAND_GROUPS = [
     description: 'Serve and manage local files',
     commands: [
       cmd('serve', 'GET', '/files/serve', 'Serve a local file (use --query path=/abs/path)'),
+      cmd('open', 'POST', '/files/open', 'Open a local file path via the host default app/browser', { expectsJsonBody: true }),
     ],
   },
   {
@@ -358,6 +390,8 @@ const COMMAND_GROUPS = [
       }),
       cmd('messages', 'GET', '/sessions/:id/messages', 'Get session messages'),
       cmd('messages-update', 'PUT', '/sessions/:id/messages', 'Update session message metadata (e.g. bookmark)', { expectsJsonBody: true }),
+      cmd('messages-send', 'POST', '/sessions/:id/messages', 'Append a user/system message to a session', { expectsJsonBody: true }),
+      cmd('messages-delete', 'DELETE', '/sessions/:id/messages', 'Delete a message from a session', { expectsJsonBody: true }),
       cmd('fork', 'POST', '/sessions/:id/fork', 'Fork session from a specific message index', { expectsJsonBody: true }),
       cmd('edit-resend', 'POST', '/sessions/:id/edit-resend', 'Edit and resend from a specific message index', { expectsJsonBody: true }),
       cmd('main-loop', 'GET', '/sessions/:id/main-loop', 'Get main mission loop state'),
@@ -427,10 +461,12 @@ const COMMAND_GROUPS = [
       cmd('list', 'GET', '/tasks', 'List tasks'),
       cmd('get', 'GET', '/tasks/:id', 'Get task'),
       cmd('create', 'POST', '/tasks', 'Create task', { expectsJsonBody: true }),
+      cmd('bulk', 'POST', '/tasks/bulk', 'Bulk update tasks (status/agent/project)', { expectsJsonBody: true }),
       cmd('update', 'PUT', '/tasks/:id', 'Update task', { expectsJsonBody: true }),
       cmd('delete', 'DELETE', '/tasks/:id', 'Delete task'),
       cmd('purge', 'DELETE', '/tasks', 'Bulk delete tasks', { expectsJsonBody: true }),
       cmd('approve', 'POST', '/tasks/:id/approve', 'Approve or reject a pending tool execution', { expectsJsonBody: true }),
+      cmd('metrics', 'GET', '/tasks/metrics', 'Get task board metrics (supports --query range=24h|7d|30d)'),
     ],
   },
   {
@@ -461,9 +497,12 @@ const COMMAND_GROUPS = [
   },
   {
     name: 'uploads',
-    description: 'Fetch uploaded artifacts',
+    description: 'Manage uploaded artifacts',
     commands: [
+      cmd('list', 'GET', '/uploads', 'List uploaded artifacts'),
       cmd('get', 'GET', '/uploads/:filename', 'Download uploaded artifact', { responseType: 'binary' }),
+      cmd('delete', 'DELETE', '/uploads/:filename', 'Delete uploaded artifact by filename'),
+      cmd('delete-many', 'DELETE', '/uploads', 'Delete uploads by filter/body (filenames, olderThanDays, category, or all)', { expectsJsonBody: true }),
     ],
   },
   {

package/src/cli/index.test.js

@@ -81,6 +81,36 @@ test('CLI command map covers all API route method/path pairs', () => {
   assert.deepEqual(missing, [])
 })
 
+test('Binary CLI router reaches every mapped API command pair', async () => {
+  const { shouldUseLegacyTsCli, TS_CLI_ACTIONS } = await import('../../bin/swarmclaw.js')
+
+  for (const command of COMMANDS) {
+    if (command.virtual) continue
+
+    const pathArgs = extractPathParams(command.route).map((name, index) => `${name}-${index + 1}`)
+    const routedToLegacyTs = shouldUseLegacyTsCli([command.group, command.action, ...pathArgs])
+
+    if (routedToLegacyTs) {
+      assert.ok(
+        TS_CLI_ACTIONS[command.group]?.has(command.action),
+        `legacy TS router should only claim known actions (${command.group} ${command.action})`,
+      )
+    }
+  }
+
+  // Spot-check known API commands that are map-only today.
+  assert.equal(shouldUseLegacyTsCli(['chatrooms', 'list']), false)
+  assert.equal(shouldUseLegacyTsCli(['tasks', 'approve', 'task-1']), false)
+
+  // Help paths should route to mapped CLI for full command discoverability.
+  assert.equal(shouldUseLegacyTsCli([]), false)
+  assert.equal(shouldUseLegacyTsCli(['--help']), false)
+  assert.equal(shouldUseLegacyTsCli(['tasks', '--help']), false)
+
+  // And a legacy command that should remain on the richer TS path.
+  assert.equal(shouldUseLegacyTsCli(['tasks', 'create']), true)
+})
+
 test('parseArgv parses group/action/options', () => {
   const parsed = parseArgv([
     'runs',

package/src/cli/spec.js

@@ -25,6 +25,28 @@ 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'] },
+    },
+  },
+  canvas: {
+    description: 'Session canvas content',
+    commands: {
+      get: { description: 'Get current canvas content for a session', method: 'GET', path: '/canvas/:sessionId', params: ['sessionId'] },
+      set: { description: 'Set/clear canvas content for a session', method: 'POST', path: '/canvas/:sessionId', params: ['sessionId'] },
+    },
+  },
   connectors: {
     description: 'Manage chat connectors',
     commands: {
@@ -105,6 +127,22 @@ const COMMAND_GROUPS = {
       },
     },
   },
+  uploads: {
+    description: 'Manage uploaded artifacts',
+    commands: {
+      list: { description: 'List uploaded artifacts', method: 'GET', path: '/uploads' },
+      get: { description: 'Download uploaded artifact by filename', method: 'GET', path: '/uploads/:filename', params: ['filename'], binary: true },
+      delete: { description: 'Delete uploaded artifact by filename', method: 'DELETE', path: '/uploads/:filename', params: ['filename'] },
+      'delete-many': { description: 'Delete uploads by filter/body (filenames, olderThanDays, category, or all)', method: 'DELETE', path: '/uploads' },
+    },
+  },
+  files: {
+    description: 'Serve/open local files',
+    commands: {
+      serve: { description: 'Serve a local file (supports --query path=/some/file)', method: 'GET', path: '/files/serve' },
+      open: { description: 'Open a local file path via host default app/browser', method: 'POST', path: '/files/open' },
+    },
+  },
   logs: {
     description: 'Application logs',
     commands: {
@@ -247,6 +285,8 @@ const COMMAND_GROUPS = {
       'heartbeat-disable-all': { description: 'Disable all session heartbeats and cancel queued heartbeat runs', method: 'POST', path: '/sessions/heartbeat' },
       messages: { description: 'Get session message history', method: 'GET', path: '/sessions/:id/messages', params: ['id'] },
       'messages-update': { description: 'Update session message metadata (e.g. bookmark)', method: 'PUT', path: '/sessions/:id/messages', params: ['id'] },
+      'messages-send': { description: 'Append a user/system message to a session', method: 'POST', path: '/sessions/:id/messages', params: ['id'] },
+      'messages-delete': { description: 'Delete a message from a session', method: 'DELETE', path: '/sessions/:id/messages', params: ['id'] },
       fork: { description: 'Fork session from a specific message index', method: 'POST', path: '/sessions/:id/fork', params: ['id'] },
       'edit-resend': { description: 'Edit and resend from a specific message index', method: 'POST', path: '/sessions/:id/edit-resend', params: ['id'] },
       'main-loop': { description: 'Get main mission loop state for a session', method: 'GET', path: '/sessions/:id/main-loop', params: ['id'] },
@@ -303,10 +343,12 @@ 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'] },
       approve: { description: 'Approve or reject a pending tool execution', method: 'POST', path: '/tasks/:id/approve', params: ['id'] },
+      metrics: { description: 'Get task board metrics (supports --query range=24h|7d|30d)', method: 'GET', path: '/tasks/metrics' },
     },
   },
   webhooks: {

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,14 +155,17 @@ 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">
-              {pendingApprovalCount}
+            <span className="shrink-0 text-[9px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] text-amber-400 bg-amber-400/[0.08] border border-amber-400/15">
+              {pendingApprovalCount} {pendingApprovalCount === 1 ? 'approval' : 'approvals'}
             </span>
           )}
           {isDefault && (
@@ -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-accent-bright 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