@swarmclawai/swarmclaw 0.8.4 → 0.8.7

package/src/app/page.tsx

@@ -1,342 +1,32 @@
 'use client'
 
 import { useEffect, useState, useCallback } from 'react'
-import { useAppStore } from '@/stores/use-app-store'
 import { initAudioContext } from '@/lib/tts'
-import { getStoredAccessKey, clearStoredAccessKey, api } from '@/lib/api-client'
-import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
-import { connectWs, disconnectWs } from '@/lib/ws-client'
-import { fetchWithTimeout } from '@/lib/fetch-timeout'
-import { isDevelopmentLikeRuntime } from '@/lib/runtime-env'
-import { useWs } from '@/hooks/use-ws'
+import { clearStoredAccessKey } from '@/lib/api-client'
+import { safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
+import { disconnectWs } from '@/lib/ws-client'
+import { useViewRouter } from '@/hooks/use-view-router'
+import { useAppBootstrap } from '@/hooks/use-app-bootstrap'
+
 import { AccessKeyGate } from '@/components/auth/access-key-gate'
 import { UserPicker } from '@/components/auth/user-picker'
 import { SetupWizard } from '@/components/auth/setup-wizard'
 import { AppLayout } from '@/components/layout/app-layout'
-import { useViewRouter } from '@/hooks/use-view-router'
-import type { Agent } from '@/types'
-
-const AUTH_CHECK_TIMEOUT_MS = isDevelopmentLikeRuntime() ? 20_000 : 8_000
-const POST_AUTH_BOOTSTRAP_TIMEOUT_MS = isDevelopmentLikeRuntime() ? 20_000 : 8_000
-
-function FullScreenLoader(props: {
-  stage?: string | null
-  stalled?: boolean
-  onReload?: () => void
-  onReset?: () => void
-}) {
-  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, fade-up 0.6s var(--ease-spring) 0.2s both',
-        }}
-      >
-        SwarmClaw
-      </div>
-
-      {/* Loading bar */}
-      <div className="mt-4 w-[100px] h-[2px] rounded-full bg-white/[0.06] overflow-hidden" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
-        <div
-          className="h-full rounded-full bg-accent-bright/60"
-          style={{ animation: 'sc-progress 1.5s ease-in-out infinite' }}
-        />
-      </div>
-
-      {props.stage ? (
-        <p
-          className="mt-4 text-[12px] text-text-3"
-          style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}
-        >
-          {props.stage}
-        </p>
-      ) : null}
-
-      {props.stalled ? (
-        <div
-          className="mt-6 max-w-[360px] px-4 text-center"
-          style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.5s both' }}
-        >
-          <p className="text-[12px] text-text-2">
-            Startup is taking longer than expected. This usually means the browser kept stale local state while the dev server restarted.
-          </p>
-          <div className="mt-4 flex items-center justify-center gap-3">
-            <button
-              type="button"
-              onClick={props.onReload}
-              className="px-4 py-2 rounded-[12px] border border-white/[0.08] bg-surface text-[12px] text-text-2 transition-colors hover:bg-surface-2"
-            >
-              Reload
-            </button>
-            <button
-              type="button"
-              onClick={props.onReset}
-              className="px-4 py-2 rounded-[12px] border border-white/[0.08] bg-transparent text-[12px] text-text-3 transition-colors hover:bg-white/[0.04]"
-            >
-              Reset Local Session
-            </button>
-          </div>
-        </div>
-      ) : null}
-
-      {/* 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>
-  )
-}
+import { FullScreenLoader } from '@/components/ui/full-screen-loader'
 
 export default function Home() {
-  const currentUser = useAppStore((s) => s.currentUser)
-  const setUser = useAppStore((s) => s.setUser)
-  const hydrated = useAppStore((s) => s._hydrated)
-  const hydrate = useAppStore((s) => s.hydrate)
-  const loadNetworkInfo = useAppStore((s) => s.loadNetworkInfo)
-  const loadSessions = useAppStore((s) => s.loadSessions)
-  const loadSettings = useAppStore((s) => s.loadSettings)
+  const {
+    hydrated,
+    authChecked,
+    authenticated,
+    setAuthenticated,
+    currentUser,
+    setupDone,
+    setSetupDone,
+    agentReady
+  } = useAppBootstrap()
 
-  const [authChecked, setAuthChecked] = useState(false)
-  const [authenticated, setAuthenticated] = useState(false)
   const [bootTimedOut, setBootTimedOut] = useState(false)
-  const [setupDone, setSetupDone] = useState<boolean | null>(() => {
-    if (safeStorageGet('sc_setup_done') === '1') return true
-    return null
-  })
-
-  const checkAuth = useCallback(async () => {
-    try {
-      const res = await fetchWithTimeout('/api/auth', {}, AUTH_CHECK_TIMEOUT_MS)
-      const data = await res.json().catch(() => ({}))
-      if (data?.authenticated === true) {
-        setAuthenticated(true)
-        setAuthChecked(true)
-        return
-      }
-    } catch {
-      // Fall back to stored-key bootstrap below if the auth probe is unavailable.
-    }
-
-    const key = getStoredAccessKey()
-    if (!key) {
-      setAuthenticated(false)
-      setAuthChecked(true)
-      return
-    }
-
-    try {
-      const res = await fetchWithTimeout('/api/auth', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ key }),
-      }, AUTH_CHECK_TIMEOUT_MS)
-      if (res.ok) {
-        setAuthenticated(true)
-      } else {
-        clearStoredAccessKey()
-        setAuthenticated(false)
-      }
-    } catch {
-      clearStoredAccessKey()
-      setAuthenticated(false)
-    } finally {
-      setAuthChecked(true)
-    }
-  }, [])
-
-  // After auth, try to restore username from server settings
-  const syncUserFromServer = useCallback(async () => {
-    if (currentUser) return // already have a name locally
-    try {
-      const settings = await api<{ userName?: string }>('GET', '/settings', undefined, {
-        timeoutMs: POST_AUTH_BOOTSTRAP_TIMEOUT_MS,
-        retries: 0,
-      })
-      if (settings.userName) {
-        setUser(settings.userName)
-      }
-    } catch { /* ignore */ }
-  }, [currentUser, setUser])
-
-  useEffect(() => {
-    hydrate()
-  }, [])
-
-  useEffect(() => {
-    if (hydrated) checkAuth()
-  }, [hydrated, checkAuth])
-
-  useEffect(() => {
-    if (!authenticated) return
-    connectWs()
-    syncUserFromServer()
-    loadNetworkInfo()
-    loadSettings()
-    loadSessions()
-    return () => { disconnectWs() }
-  }, [authenticated])
-
-  useWs('sessions', loadSessions, 15000)
-
-  // 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
-    let cancelled = false
-    ;(async () => {
-      try {
-        const agents = await api<Record<string, Agent>>('GET', '/agents', undefined, {
-          timeoutMs: POST_AUTH_BOOTSTRAP_TIMEOUT_MS,
-          retries: 0,
-        })
-        if (cancelled) return
-        useAppStore.setState({ agents })
-
-        const { 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])
-
-  // Check if first-run setup is needed
-  useEffect(() => {
-    if (!authenticated || !currentUser) return
-    let cancelled = false
-    ;(async () => {
-      try {
-        const [settingsResult, credsResult] = await Promise.allSettled([
-          api<{ setupCompleted?: boolean }>('GET', '/settings', undefined, {
-            timeoutMs: POST_AUTH_BOOTSTRAP_TIMEOUT_MS,
-            retries: 0,
-          }),
-          api<Record<string, unknown>>('GET', '/credentials', undefined, {
-            timeoutMs: POST_AUTH_BOOTSTRAP_TIMEOUT_MS,
-            retries: 0,
-          }),
-        ])
-        if (cancelled) return
-        const settings = settingsResult.status === 'fulfilled' ? settingsResult.value : {}
-        const creds = credsResult.status === 'fulfilled' ? credsResult.value : {}
-        const bothFailed = settingsResult.status === 'rejected' && credsResult.status === 'rejected'
-        const hasCreds = Object.keys(creds).length > 0
-        const done = bothFailed ? true : settings.setupCompleted === true || hasCreds
-        if (done) safeStorageSet('sc_setup_done', '1')
-        setSetupDone(done)
-      } catch {
-        if (!cancelled) setSetupDone(true) // on error, skip wizard
-      }
-    })()
-    return () => { cancelled = true }
-  }, [authenticated, currentUser])
 
   useEffect(() => {
     const handler = () => {
@@ -351,11 +41,12 @@ export default function Home() {
     const handler = () => {
       disconnectWs()
       setAuthenticated(false)
-      setAuthChecked(true)
+      // Note: we can't fully control authChecked here unless we pass a setter from useAppBootstrap,
+      // but usually auth dropping just sets authenticated to false.
     }
     window.addEventListener('sc_auth_required', handler)
     return () => window.removeEventListener('sc_auth_required', handler)
-  }, [])
+  }, [setAuthenticated])
 
   useViewRouter()
 
@@ -371,8 +62,9 @@ export default function Home() {
 
   useEffect(() => {
     if (!bootStage) {
-      setBootTimedOut(false)
-      return
+      // Defer resetting to avoid synchronous state update in effect
+      const t = window.setTimeout(() => setBootTimedOut(false), 0)
+      return () => window.clearTimeout(t)
     }
     const timer = window.setTimeout(() => setBootTimedOut(true), 15_000)
     return () => window.clearTimeout(timer)

package/src/cli/index.js

@@ -160,6 +160,25 @@ const COMMAND_GROUPS = [
       cmd('pick', 'POST', '/dirs/pick', 'Open native picker (mode=file|folder)', { expectsJsonBody: true }),
     ],
   },
+  {
+    name: 'perf',
+    description: 'Inspect or control runtime perf tracing',
+    commands: [
+      cmd('status', 'GET', '/perf', 'Get current perf tracing status and recent entries'),
+      cmd('enable', 'POST', '/perf', 'Enable perf tracing and clear existing entries', {
+        expectsJsonBody: true,
+        defaultBody: { action: 'enable' },
+      }),
+      cmd('disable', 'POST', '/perf', 'Disable perf tracing', {
+        expectsJsonBody: true,
+        defaultBody: { action: 'disable' },
+      }),
+      cmd('clear', 'POST', '/perf', 'Clear recent perf entries', {
+        expectsJsonBody: true,
+        defaultBody: { action: 'clear' },
+      }),
+    ],
+  },
   {
     name: 'documents',
     description: 'Manage documents',

package/src/cli/index.ts

@@ -4,6 +4,7 @@ import { Command } from 'commander'
 import { pathToFileURL } from 'node:url'
 import fs from 'node:fs'
 import path from 'node:path'
+import { errorMessage, sleep } from '../lib/shared-utils.ts'
 import {
   SETUP_PROVIDERS,
   DEFAULT_AGENTS,
@@ -74,7 +75,7 @@ function parseMetadata(raw: string | undefined): Record<string, string> | undefi
   try {
     parsed = JSON.parse(raw)
   } catch (err) {
-    throw new Error(`Invalid --metadata JSON: ${err instanceof Error ? err.message : String(err)}`)
+    throw new Error(`Invalid --metadata JSON: ${errorMessage(err)}`)
   }
 
   if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
@@ -93,7 +94,7 @@ function parseJsonValue(raw: string | undefined, label: string): unknown {
   try {
     return JSON.parse(raw)
   } catch (err) {
-    throw new Error(`Invalid ${label} JSON: ${err instanceof Error ? err.message : String(err)}`)
+    throw new Error(`Invalid ${label} JSON: ${errorMessage(err)}`)
   }
 }
 
@@ -171,7 +172,7 @@ async function apiRequestWithAccessKey<T = unknown>(
       body: body === undefined ? undefined : JSON.stringify(body),
     })
   } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err)
+    const msg = errorMessage(err)
     throw new Error(`Failed to reach ${ctx.baseUrl}. Is SwarmClaw running? (${msg})`)
   }
 
@@ -269,7 +270,7 @@ async function runWithHandler(command: Command, task: (ctx: CliContext) => Promi
     const result = await task(ctx)
     printResult(result, ctx.rawOutput)
   } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err)
+    const msg = errorMessage(err)
     console.error(msg)
     process.exitCode = 1
   }
@@ -413,7 +414,7 @@ async function runInteractiveSetup(ctx: CliContext): Promise<unknown> {
           console.log(` FAILED: ${check?.message || 'Unknown error'}`)
         }
       } catch (err: unknown) {
-        console.log(` FAILED: ${err instanceof Error ? err.message : String(err)}`)
+        console.log(` FAILED: ${errorMessage(err)}`)
       }
     }
 
@@ -666,6 +667,36 @@ export function buildProgram(): Command {
       await runWithHandler(this as Command, (ctx) => apiRequest(ctx, 'GET', `/runs/${encodeURIComponent(id)}`))
     })
 
+  const perf = program.command('perf').description('Inspect or control runtime perf tracing')
+
+  perf
+    .command('status')
+    .description('Get current perf tracing status and recent entries')
+    .action(async function () {
+      await runWithHandler(this as Command, (ctx) => apiRequest(ctx, 'GET', '/perf'))
+    })
+
+  perf
+    .command('enable')
+    .description('Enable perf tracing and clear existing entries')
+    .action(async function () {
+      await runWithHandler(this as Command, (ctx) => apiRequest(ctx, 'POST', '/perf', { action: 'enable' }))
+    })
+
+  perf
+    .command('disable')
+    .description('Disable perf tracing')
+    .action(async function () {
+      await runWithHandler(this as Command, (ctx) => apiRequest(ctx, 'POST', '/perf', { action: 'disable' }))
+    })
+
+  perf
+    .command('clear')
+    .description('Clear recent perf entries')
+    .action(async function () {
+      await runWithHandler(this as Command, (ctx) => apiRequest(ctx, 'POST', '/perf', { action: 'clear' }))
+    })
+
   const chats = program.command('chats').description('Manage chats')
   program.command('sessions').description('Manage chats (alias)').action(() => chats.help())
 
@@ -1381,12 +1412,12 @@ export async function runCli(argv: string[] = process.argv.slice(2)): Promise<nu
 
     // Wait briefly for the hint if the command succeeded
     if (hintPromise && code === 0) {
-      await Promise.race([hintPromise, new Promise((r) => setTimeout(r, 2000))])
+      await Promise.race([hintPromise, sleep(2000)])
     }
 
     return code
   } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err)
+    const msg = errorMessage(err)
     console.error(msg)
     return 1
   }

package/src/cli/spec.js

@@ -103,6 +103,15 @@ const COMMAND_GROUPS = {
       pick: { description: 'Open native picker (body: {"mode":"file|folder"})', method: 'POST', path: '/dirs/pick' },
     },
   },
+  perf: {
+    description: 'Inspect or control runtime perf tracing',
+    commands: {
+      status: { description: 'Get current perf tracing status and recent entries', method: 'GET', path: '/perf' },
+      enable: { description: 'Enable perf tracing and clear existing entries', method: 'POST', path: '/perf', staticBody: { action: 'enable' } },
+      disable: { description: 'Disable perf tracing', method: 'POST', path: '/perf', staticBody: { action: 'disable' } },
+      clear: { description: 'Clear recent perf entries', method: 'POST', path: '/perf', staticBody: { action: 'clear' } },
+    },
+  },
   documents: {
     description: 'File uploads/downloads and TTS audio',
     commands: {

package/src/components/activity/activity-feed.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useNow } from '@/hooks/use-now'
 import { useWs } from '@/hooks/use-ws'
 import type { ActivityEntry } from '@/types'
 
@@ -22,8 +23,9 @@ const ACTION_COLORS: Record<string, string> = {
   rejected: 'bg-red-500/15 text-red-400',
 }
 
-function timeAgo(ts: number) {
-  const diff = Date.now() - ts
+function timeAgo(ts: number, now: number | null) {
+  if (!now) return 'recently'
+  const diff = now - ts
   if (diff < 60_000) return 'just now'
   if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`
   if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`
@@ -33,11 +35,12 @@ function timeAgo(ts: number) {
 const ENTITY_TYPES = ['', 'agent', 'task', 'connector', 'session', 'webhook', 'schedule'] as const
 
 export function ActivityFeed() {
+  const now = useNow()
   const entries = useAppStore((s) => s.activityEntries)
   const loadActivity = useAppStore((s) => s.loadActivity)
   const [filterType, setFilterType] = useState('')
 
-  useEffect(() => { loadActivity({ entityType: filterType || undefined, limit: 100 }) }, [filterType])
+  useEffect(() => { loadActivity({ entityType: filterType || undefined, limit: 100 }) }, [filterType, loadActivity])
   useWs('activity', () => loadActivity({ entityType: filterType || undefined, limit: 100 }), 10_000)
 
   return (
@@ -87,7 +90,7 @@ export function ActivityFeed() {
                   </div>
                   <p className="text-[13px] text-text-2 leading-[1.4] truncate">{entry.summary}</p>
                 </div>
-                <span className="text-[11px] text-text-3/50 shrink-0 pt-1">{timeAgo(entry.timestamp)}</span>
+                <span className="text-[11px] text-text-3/50 shrink-0 pt-1">{timeAgo(entry.timestamp, now)}</span>
               </div>
             ))}
           </div>

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

@@ -1,10 +1,11 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useRef, 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 { useMountedRef } from '@/hooks/use-mounted-ref'
 import { api } from '@/lib/api-client'
 import { deleteAgent } from '@/lib/agents'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
@@ -19,6 +20,7 @@ import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { useApprovalStore } from '@/stores/use-approval-store'
 import { AgentAvatar } from './agent-avatar'
 import { toast } from 'sonner'
+import { errorMessage } from '@/lib/shared-utils'
 
 interface Props {
   agent: Agent
@@ -30,6 +32,7 @@ interface Props {
 }
 
 export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, onSetDefault }: Props) {
+  const mountedRef = useMountedRef()
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const loadSessions = useAppStore((s) => s.loadSessions)
@@ -46,6 +49,7 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
   const approvals = useApprovalStore((s) => s.approvals)
   const pendingApprovalCount = Object.values(approvals).filter((a) => a.agentId === agent.id).length
   const [heartbeatPulse, setHeartbeatPulse] = useState(false)
+  const heartbeatTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const monthlyBudget = typeof agent.monthlyBudget === 'number' && agent.monthlyBudget > 0
     ? agent.monthlyBudget
     : null
@@ -65,10 +69,25 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
   const canDelegateToAgents = agent.platformAssignScope === 'all'
   const agentDisabled = agent.disabled === true
   useWs(`heartbeat:agent:${agent.id}`, () => {
+    if (heartbeatTimerRef.current) {
+      clearTimeout(heartbeatTimerRef.current)
+    }
     setHeartbeatPulse(true)
-    setTimeout(() => setHeartbeatPulse(false), 1500)
+    heartbeatTimerRef.current = setTimeout(() => {
+      if (mountedRef.current) {
+        setHeartbeatPulse(false)
+      }
+    }, 1500)
   })
 
+  useEffect(() => {
+    return () => {
+      if (heartbeatTimerRef.current) {
+        clearTimeout(heartbeatTimerRef.current)
+      }
+    }
+  }, [])
+
   const handleClick = () => {
     setEditingAgentId(agent.id)
     setAgentSheetOpen(true)
@@ -89,6 +108,7 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
       const session = await api<{ id: string }>('POST', `/agents/${agent.id}/thread`, { user: 'default' })
       if (!session?.id) throw new Error('Agent thread not available')
       await loadSessions()
+      if (!mountedRef.current) return
       setMessages([])
       setCurrentSession(session.id)
       setActiveView('agents')
@@ -96,7 +116,9 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
     } catch (err) {
       console.error('Agent task run failed:', err)
     }
-    setRunning(false)
+    if (mountedRef.current) {
+      setRunning(false)
+    }
   }
 
   const [cloning, setCloning] = useState(false)
@@ -107,9 +129,11 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
       await loadAgents()
       toast.success('Agent duplicated')
     } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : String(err))
+      toast.error(errorMessage(err))
     } finally {
-      setCloning(false)
+      if (mountedRef.current) {
+        setCloning(false)
+      }
     }
   }
 
@@ -117,7 +141,9 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
     await deleteAgent(agent.id)
     await loadAgents()
     toast.success('Agent moved to trash')
-    setConfirmDelete(false)
+    if (mountedRef.current) {
+      setConfirmDelete(false)
+    }
   }
 
   return (