@swarmclawai/swarmclaw 0.8.4 → 0.8.7

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

@@ -4,7 +4,8 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 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/chats'
+import { useNow } from '@/hooks/use-now'
+import { useMountedRef } from '@/hooks/use-mounted-ref'
 import { api } from '@/lib/api-client'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import type { Agent, Session } from '@/types'
@@ -17,12 +18,13 @@ interface Props {
 }
 
 export function AgentChatList({ inSidebar, onSelect }: Props) {
+  const mountedRef = useMountedRef()
+  const now = useNow()
   const agents = useAppStore((s) => s.agents)
   const sessions = useAppStore((s) => s.sessions)
   const loadAgents = useAppStore((s) => s.loadAgents)
   const currentAgentId = useAppStore((s) => s.currentAgentId)
   const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
-  const setMessages = useChatStore((s) => s.setMessages)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const tasks = useAppStore((s) => s.tasks)
   const togglePinAgent = useAppStore((s) => s.togglePinAgent)
@@ -60,17 +62,19 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
     try {
       await api('DELETE', '/chats', { ids: sessionIds })
       await loadSessions()
+      if (!mountedRef.current) return
       toast.success(`Deleted ${sessionIds.length} chat(s)`)
       setBulkMode(false)
       setSelectedIds(new Set())
     } catch {
       toast.error('Failed to delete chats')
     }
-  }, [selectedIds, agents, loadSessions])
+  }, [selectedIds, agents, loadSessions, mountedRef])
 
   // FLIP animation refs
   const rowRefs = useRef<Map<string, HTMLElement>>(new Map())
   const previousTopRef = useRef<Map<string, number>>(new Map())
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const setRowRef = useCallback((id: string, el: HTMLElement | null) => {
     if (el) rowRefs.current.set(id, el)
@@ -79,6 +83,14 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
 
   useEffect(() => { loadAgents() }, [loadAgents])
 
+  useEffect(() => {
+    return () => {
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current)
+      }
+    }
+  }, [])
+
   // Build agent list sorted by last activity in their thread session
   const sortedAgents = useMemo(() => {
     return Object.values(agents)
@@ -98,7 +110,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
   // 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
+    const cutoff = now ? now - 30 * 60 * 1000 : Number.POSITIVE_INFINITY
     for (const chatroom of Object.values(chatrooms)) {
       for (let i = chatroom.messages.length - 1; i >= 0; i--) {
         const msg = chatroom.messages[i]
@@ -108,7 +120,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
     }
     for (const agentId of chatroomStreaming.keys()) set.add(agentId)
     return set
-  }, [chatrooms, chatroomStreaming])
+  }, [chatrooms, chatroomStreaming, now])
 
   // Compute running tasks per agent
   const runningAgentIds = useMemo(() => {
@@ -122,7 +134,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
   // Apply chatFilter
   const filteredAgents = useMemo(() => {
     if (chatFilter === 'all') return sortedAgents
-    const now = Date.now()
+    if (!now) return sortedAgents
     return sortedAgents.filter((a) => {
       const threadSession = a.threadSessionId ? sessions[a.threadSessionId] as Session | undefined : undefined
       const isRunning = runningAgentIds.has(a.id) || (threadSession?.active ?? false)
@@ -133,7 +145,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       const lastActive = threadSession?.lastActiveAt || a.updatedAt
       return now - lastActive < 86_400_000
     })
-  }, [sortedAgents, chatFilter, sessions, runningAgentIds, streamingSessionId, chatroomActiveAgentIds])
+  }, [sortedAgents, chatFilter, sessions, runningAgentIds, streamingSessionId, chatroomActiveAgentIds, now])
 
   const defaultAgent = useMemo(() => {
     const id = appSettings.defaultAgentId
@@ -172,20 +184,13 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       return
     }
     await setCurrentAgent(agent.id)
-    // Load messages for the thread
-    const state = useAppStore.getState()
-    if (state.currentSessionId) {
-      try {
-        const msgs = await fetchMessages(state.currentSessionId)
-        setMessages(msgs)
-      } 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
-    if (typeof window !== 'undefined') {
-      setTimeout(() => {
+    if (mountedRef.current && typeof window !== 'undefined') {
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current)
+      }
+      scrollTimerRef.current = setTimeout(() => {
         window.dispatchEvent(new CustomEvent('swarmclaw:scroll-bottom'))
       }, 100)
     }
@@ -218,7 +223,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
   }
 
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto" data-testid="agent-chat-list">
       {/* Filter control + bulk mode toggle */}
       {sortedAgents.length > 2 && (
         <div className="flex items-center gap-1 px-4 pt-2.5 pb-1">
@@ -266,6 +271,8 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search agents..."
+            aria-label="Search agents"
+            data-testid="agent-search"
             className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
               text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
             style={{ fontFamily: 'inherit' }}
@@ -277,7 +284,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
           const threadSession = defaultAgent.threadSessionId ? sessions[defaultAgent.threadSessionId] as Session | undefined : undefined
           const lastMsg = threadSession?.messages?.at(-1)
           const heartbeatOn = defaultAgent.heartbeatEnabled === true && (defaultAgent.plugins?.length ?? 0) > 0
-          const recentlyActive = (threadSession?.lastActiveAt ?? 0) > Date.now() - 30 * 60 * 1000
+          const recentlyActive = !!now && (threadSession?.lastActiveAt ?? 0) > now - 30 * 60 * 1000
           const isDisabled = defaultAgent.disabled === true
           const isWorking = !isDisabled && (runningAgentIds.has(defaultAgent.id) || (threadSession?.active ?? false) || heartbeatOn || recentlyActive || chatroomActiveAgentIds.has(defaultAgent.id))
           const isTyping = streamingSessionId === defaultAgent.threadSessionId
@@ -294,7 +301,20 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                   ${isActive
                     ? 'bg-accent-soft border-accent-bright/25'
                     : 'bg-accent-soft/40 border-accent-bright/15 hover:bg-accent-soft/55'}`}
+                role="button"
+                tabIndex={0}
+                data-testid="agent-row"
+                data-agent-id={defaultAgent.id}
+                data-agent-name={defaultAgent.name}
+                aria-label={`Open agent chat ${defaultAgent.name}`}
                 onClick={() => bulkMode ? toggleSelected(defaultAgent.id) : handleSelect(defaultAgent)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
+                    if (bulkMode) toggleSelected(defaultAgent.id)
+                    else void handleSelect(defaultAgent)
+                  }
+                }}
               >
                 <div className="flex items-center gap-3">
                   {bulkMode && (
@@ -368,7 +388,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
           const lastMsg = threadSession?.messages?.at(-1)
           const isActive = currentAgentId === agent.id
           const heartbeatOn = agent.heartbeatEnabled === true && (agent.plugins?.length ?? 0) > 0
-          const recentlyActive = (threadSession?.lastActiveAt ?? 0) > Date.now() - 30 * 60 * 1000
+          const recentlyActive = !!now && (threadSession?.lastActiveAt ?? 0) > now - 30 * 60 * 1000
           const isDisabled = agent.disabled === true
           const isWorking = !isDisabled && (runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || heartbeatOn || recentlyActive || chatroomActiveAgentIds.has(agent.id))
           const isTyping = streamingSessionId === agent.threadSessionId
@@ -382,7 +402,20 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                 ${isActive
                   ? 'bg-accent-soft/80 border border-accent-bright/20'
                   : 'bg-transparent hover:bg-white/[0.02]'}`}
+              role="button"
+              tabIndex={0}
+              data-testid="agent-row"
+              data-agent-id={agent.id}
+              data-agent-name={agent.name}
+              aria-label={`Open agent chat ${agent.name}`}
               onClick={() => bulkMode ? toggleSelected(agent.id) : handleSelect(agent)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  if (bulkMode) toggleSelected(agent.id)
+                  else void handleSelect(agent)
+                }
+              }}
             >
               <div className="flex items-center gap-2.5">
                 {bulkMode && (

package/src/components/agents/agent-files-editor.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { api } from '@/lib/api-client'
+import { errorMessage } from '@/lib/shared-utils'
 import { PersonalityBuilder } from './personality-builder'
 
 const FILES = ['SOUL.md', 'IDENTITY.md', 'USER.md', 'TOOLS.md', 'HEARTBEAT.md', 'MEMORY.md', 'AGENTS.md'] as const
@@ -47,7 +48,7 @@ export function AgentFilesEditor({ agentId }: Props) {
         return next
       })
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : String(err)
+      const message = errorMessage(err)
       setFiles((prev) => {
         const next = { ...prev }
         for (const f of FILES) {
@@ -83,7 +84,7 @@ export function AgentFilesEditor({ agentId }: Props) {
         [filename]: { ...prev[filename], saving: false, original: prev[filename].content },
       }))
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : String(err)
+      const message = errorMessage(err)
       setFiles((prev) => ({
         ...prev,
         [filename]: { ...prev[filename], saving: false, error: message },

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

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createAgent, updateAgent, deleteAgent } from '@/lib/agents'
 import { api } from '@/lib/api-client'
+import { fetchProviderModelDiscovery } from '@/lib/provider-model-discovery-client'
+import { sleep } from '@/lib/shared-utils'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { toast } from 'sonner'
 import { ModelCombobox } from '@/components/shared/model-combobox'
@@ -19,9 +21,23 @@ import { SectionLabel } from '@/components/shared/section-label'
 import { SoulLibraryPicker } from './soul-library-picker'
 import { HintTip } from '@/components/shared/hint-tip'
 import { isOllamaCloudModel } from '@/lib/ollama-model'
+import { errorMessage } from '@/lib/shared-utils'
+import { getDefaultAgentPluginIds } from '@/lib/agent-default-tools'
 
 const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
 const FALLBACK_ELEVENLABS_VOICE_ID = 'JBFqnCBsd6RMkjVDRZzb'
+const AUTO_SYNC_MODEL_PROVIDER_IDS = new Set<ProviderType>([
+  'openai',
+  'anthropic',
+  'google',
+  'deepseek',
+  'groq',
+  'together',
+  'mistral',
+  'xai',
+  'fireworks',
+  'ollama',
+])
 
 type AgentSheetSectionId = 'overview' | 'instructions' | 'model' | 'tools'
 type SafeAgentWallet = Omit<AgentWallet, 'encryptedPrivateKey'> & {
@@ -137,6 +153,12 @@ export function AgentSheet() {
   const setEditingId = useAppStore((s) => s.setEditingAgentId)
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const currentSession = useAppStore((s) => {
+    const id = s.currentSessionId
+    return id ? s.sessions[id] : null
+  })
+  const refreshSession = useAppStore((s) => s.refreshSession)
   const projects = useAppStore((s) => s.projects)
   const loadProjects = useAppStore((s) => s.loadProjects)
   const providers = useAppStore((s) => s.providers)
@@ -238,6 +260,7 @@ export function AgentSheet() {
   const [soulLibraryOpen, setSoulLibraryOpen] = useState(false)
   const promptFileRef = useRef<HTMLInputElement>(null)
   const importFileRef = useRef<HTMLInputElement>(null)
+  const lastAutoSyncedModelsKeyRef = useRef<string | null>(null)
   const sectionRefs = useRef<Record<AgentSheetSectionId, HTMLDivElement | null>>({
     overview: null,
     instructions: null,
@@ -288,12 +311,62 @@ export function AgentSheet() {
       : 'Built-in fallback'
   const providerSummary = openclawEnabled ? 'OpenClaw gateway' : (currentProvider?.name || provider)
   const modelSummary = openclawEnabled ? (gatewayProfileId ? 'Gateway-managed' : 'default') : (model || 'Select a model')
+  const syncLiveProviderModels = useCallback(async (
+    providerId: ProviderType,
+    nextCredentialId: string | null,
+    nextEndpoint: string | null,
+    force = false,
+  ): Promise<{ synced: boolean; models: string[] } | null> => {
+    if (openclawEnabled) return null
+    if (!AUTO_SYNC_MODEL_PROVIDER_IDS.has(providerId)) return null
+    const providerInfo = providers.find((item) => item.id === providerId)
+    if (!providerInfo?.supportsModelDiscovery) return null
+
+    const result = await fetchProviderModelDiscovery({
+      providerId,
+      credentialId: nextCredentialId,
+      endpoint: nextEndpoint,
+      force,
+    })
+
+    if (!result.ok || result.models.length === 0) return { synced: false, models: result.models }
+
+    const sameModels = providerInfo.models.length === result.models.length
+      && providerInfo.models.every((item, index) => item === result.models[index])
+
+    if (!sameModels) {
+      await api('PUT', `/providers/${providerId}/models`, { models: result.models })
+      await loadProviders()
+    }
+
+    setModel((currentModel) => currentModel.trim() || result.models[0] || '')
+    return { synced: !sameModels, models: result.models }
+  }, [loadProviders, openclawEnabled, providers])
 
   const providerNeedsKey = !editing && (
     (currentProvider?.requiresApiKey && providerCredentials.length === 0 && !addingKey) ||
     (provider === 'ollama' && ollamaMode === 'cloud' && providerCredentials.length === 0 && !addingKey)
   )
 
+  useEffect(() => {
+    if (!open) {
+      lastAutoSyncedModelsKeyRef.current = null
+      return
+    }
+    if (openclawEnabled) return
+    if (!AUTO_SYNC_MODEL_PROVIDER_IDS.has(provider)) return
+    if (!currentProvider?.supportsModelDiscovery) return
+
+    const requiresCredential = currentProvider.requiresApiKey || (provider === 'ollama' && ollamaMode === 'cloud')
+    if (requiresCredential && !credentialId) return
+
+    const syncKey = `${provider}::${credentialId || ''}::${apiEndpoint?.trim() || ''}`
+    if (lastAutoSyncedModelsKeyRef.current === syncKey) return
+    lastAutoSyncedModelsKeyRef.current = syncKey
+
+    void syncLiveProviderModels(provider, credentialId, apiEndpoint, false).catch(() => {})
+  }, [apiEndpoint, credentialId, currentProvider, ollamaMode, open, openclawEnabled, provider, syncLiveProviderModels])
+
   useEffect(() => {
     if (open) {
       loadSettings()
@@ -390,7 +463,7 @@ export function AgentSheet() {
         setRoutingTargets([])
         setPlatformAssignScope('self')
         setAgentAgentIds([])
-        setTools([])
+        setTools(getDefaultAgentPluginIds())
         setSkills([])
         setSkillIds([])
         setMcpDisabledTools([])
@@ -580,7 +653,7 @@ export function AgentSheet() {
         priority: typeof target.priority === 'number' ? target.priority : index + 1,
       })),
       subAgentIds: canDelegateToAgents ? subAgentIds : [],
-      tools,
+      plugins: tools,
       skills,
       skillIds,
       mcpServerIds,
@@ -621,6 +694,17 @@ export function AgentSheet() {
       toast.success('Agent created')
     }
     await loadAgents()
+    if (
+      editing
+      && currentSessionId
+      && currentSession?.agentId === editing.id
+      && (
+        currentSession.shortcutForAgentId === editing.id
+        || currentSessionId === editing.threadSessionId
+      )
+    ) {
+      await refreshSession(currentSessionId)
+    }
     setSoulInitial(soul)
     setSoulSaveState('saved')
     setTimeout(() => setSoulSaveState('idle'), 1500)
@@ -657,8 +741,8 @@ export function AgentSheet() {
         gatewayProfileId: editing.gatewayProfileId || null,
         routingStrategy: editing.routingStrategy || null,
         routingTargets: editing.routingTargets || [],
-        tools: editing.tools,
-        plugins: editing.plugins,
+        tools: editing.plugins || editing.tools || [],
+        plugins: editing.plugins || editing.tools || [],
         capabilities: editing.capabilities,
         elevenLabsVoiceId: editing.elevenLabsVoiceId || null,
         soul: editing.soul,
@@ -714,8 +798,19 @@ export function AgentSheet() {
       })
       if (result.deviceId) setTestDeviceId(result.deviceId)
       if (result.ok) {
+        let syncedModels: string[] = []
+        try {
+          const synced = await syncLiveProviderModels(provider, credentialId, apiEndpoint, true)
+          syncedModels = synced?.models || []
+        } catch {
+          // Best-effort: a passing connection test should still pass if model sync fails.
+        }
         setTestStatus('pass')
-        setTestMessage(result.message)
+        setTestMessage(
+          syncedModels.length > 0
+            ? `${result.message} Synced ${syncedModels.length} live model${syncedModels.length === 1 ? '' : 's'} into the model picker.`
+            : result.message,
+        )
         return true
       } else {
         setTestStatus('fail')
@@ -745,7 +840,7 @@ export function AgentSheet() {
       if (!passed) return
       if (!openclawEnabled) {
         // Brief pause so the user can see the success state on the button
-        await new Promise((r) => setTimeout(r, 1500))
+        await sleep(1500)
       }
     }
     setSaving(true)
@@ -767,8 +862,8 @@ export function AgentSheet() {
   return (
     <>
     <BottomSheet open={open} onClose={onClose} wide>
-      <div className="mb-10 flex items-start justify-between">
-        <div>
+      <div className="mb-10 flex items-start justify-between gap-6 pr-14 sm:pr-20">
+        <div className="min-w-0">
           <div className="mb-2 flex flex-wrap items-center gap-2">
             <h2 className="font-display text-[28px] font-700 tracking-[-0.03em]">
               {editing ? 'Edit Agent' : 'New Agent'}
@@ -783,7 +878,7 @@ export function AgentSheet() {
           </div>
           <p className="text-[14px] text-text-3">Define an AI agent and optional multi-agent delegation behavior</p>
         </div>
-        <div className="flex items-center gap-3 mt-1.5">
+        <div className="mt-1.5 flex shrink-0 items-center gap-3">
           <label className="text-[11px] font-600 text-text-3 uppercase tracking-[0.08em]">OpenClaw</label>
           <button
             type="button"
@@ -1627,7 +1722,7 @@ export function AgentSheet() {
                           setAddingKey(false)
                           setNewKeyName('')
                           setNewKeyValue('')
-                        } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`) }
+                        } catch (err: unknown) { toast.error(`Failed to save: ${errorMessage(err)}`) }
                         finally { setSavingKey(false) }
                       }}
                       className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40"
@@ -1877,18 +1972,24 @@ export function AgentSheet() {
                 <button
                   type="button"
                   disabled={savingKey || !newKeyValue.trim()}
-                  onClick={async () => {
-                    setSavingKey(true)
-                    try {
-                      const cred = await api<{ id: string }>('POST', '/credentials', { provider, name: newKeyName.trim() || `${provider} key`, apiKey: newKeyValue.trim() })
-                      await loadCredentials()
-                      setCredentialId(cred.id)
-                      setAddingKey(false)
-                      setNewKeyName('')
-                      setNewKeyValue('')
-                    } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`) }
-                    finally { setSavingKey(false) }
-                  }}
+                      onClick={async () => {
+                        setSavingKey(true)
+                        try {
+                          const cred = await api<{ id: string }>('POST', '/credentials', { provider, name: newKeyName.trim() || `${provider} key`, apiKey: newKeyValue.trim() })
+                          await loadCredentials()
+                          setCredentialId(cred.id)
+                          const synced = await syncLiveProviderModels(provider, cred.id, apiEndpoint, true).catch(() => null)
+                          setAddingKey(false)
+                          setNewKeyName('')
+                          setNewKeyValue('')
+                          if (synced?.models.length) {
+                            toast.success(`Key saved. Synced ${synced.models.length} model${synced.models.length === 1 ? '' : 's'}.`)
+                          } else {
+                            toast.success('Key saved')
+                          }
+                        } catch (err: unknown) { toast.error(`Failed to save: ${errorMessage(err)}`) }
+                        finally { setSavingKey(false) }
+                      }}
                   className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40"
                   style={{ fontFamily: 'inherit' }}
                 >

package/src/components/agents/inspector-panel.tsx

@@ -65,7 +65,7 @@ export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAge
     if (!visibleTabs.find((t) => t.id === inspectorTab)) {
       setInspectorTab('overview')
     }
-  }, [isOpenClaw]) // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenClaw])  
 
   // Close on Escape
   useEffect(() => {

package/src/components/agents/openclaw-skills-panel.tsx

@@ -5,6 +5,7 @@ import type { OpenClawSkillEntry, SkillAllowlistMode } from '@/types'
 import { api } from '@/lib/api-client'
 import { SkillInstallDialog } from './skill-install-dialog'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+import { errorMessage } from '@/lib/shared-utils'
 
 interface Props {
   agentId: string
@@ -32,7 +33,7 @@ export function OpenClawSkillsPanel({ agentId, initialMode = 'all', initialAllow
       const result = await api<OpenClawSkillEntry[]>('GET', `/openclaw/skills?agentId=${agentId}`)
       setSkills(Array.isArray(result) ? result : [])
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err))
+      setError(errorMessage(err))
     } finally {
       setLoading(false)
     }

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

@@ -12,7 +12,7 @@ export function TrashList() {
   const loadAgents = useAppStore((s) => s.loadAgents)
   const [confirmPermanent, setConfirmPermanent] = useState<Agent | null>(null)
 
-  useEffect(() => { loadTrashedAgents() }, []) // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { loadTrashedAgents() }, [])  
 
   const handleRestore = async (id: string) => {
     await api('POST', '/agents/trash', { id })

package/src/components/auth/access-key-gate.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { setStoredAccessKey } from '@/lib/api-client'
-import { fetchWithTimeout } from '@/lib/fetch-timeout'
+import { fetchWithTimeout, isAbortError, isTimeoutError } from '@/lib/fetch-timeout'
 
 interface AccessKeyGateProps {
   onAuthenticated: () => void
@@ -10,6 +10,10 @@ interface AccessKeyGateProps {
 
 const AUTH_CHECK_TIMEOUT_MS = 8_000
 
+function isExpectedAuthCheckError(err: unknown): boolean {
+  return isAbortError(err) || isTimeoutError(err)
+}
+
 export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const [key, setKey] = useState('')
   const [error, setError] = useState('')
@@ -29,7 +33,9 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
           setFirstTime(true)
         }
       } catch (err) {
-        console.error('Auth check failed:', err)
+        if (!isExpectedAuthCheckError(err)) {
+          console.error('Auth check failed:', err)
+        }
       } finally {
         if (!cancelled) setChecking(false)
       }

package/src/components/auth/setup-wizard.tsx

@@ -5,6 +5,7 @@ import { api } from '@/lib/api-client'
 import { OpenClawDeployPanel } from '@/components/openclaw/openclaw-deploy-panel'
 import { useAppStore } from '@/stores/use-app-store'
 import type { ProviderType, Credential, GatewayProfile } from '@/types'
+import { dedup, errorMessage } from '@/lib/shared-utils'
 import {
   ONBOARDING_PATHS,
   SETUP_PROVIDERS,
@@ -499,12 +500,12 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
         ...(current || {}),
         ...(nextDeployment || {}),
       }))
-      setProviderTags((current) => Array.from(new Set([
+      setProviderTags((current) => dedup([
         ...current,
         'onboarding',
         ...(nextDeployment?.useCase ? [nextDeployment.useCase] : []),
         ...(nextDeployment?.exposure ? [nextDeployment.exposure] : []),
-      ])))
+      ]))
     }
     setCheckState('idle')
     setCheckMessage('')
@@ -544,7 +545,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
       return !!result.ok
     } catch (err: unknown) {
       setCheckState('error')
-      setCheckMessage(err instanceof Error ? err.message : String(err))
+      setCheckMessage(errorMessage(err))
       setCheckErrorCode(null)
       return false
     }
@@ -560,7 +561,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
     } catch (err: unknown) {
       setDoctorState('error')
       setDoctorReport(null)
-      setDoctorError(err instanceof Error ? err.message : String(err))
+      setDoctorError(errorMessage(err))
     }
   }
 
@@ -619,7 +620,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
       resetProviderForm()
       setStep('providers')
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err))
+      setError(errorMessage(err))
     } finally {
       setSaving(false)
     }
@@ -698,10 +699,10 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
             name: configuredProvider.name,
             endpoint: normalizedEndpoint,
             credentialId: configuredProvider.credentialId || null,
-            tags: Array.from(new Set([
+            tags: dedup([
               'onboarding',
               ...(configuredProvider.tags || []),
-            ])),
+            ]),
             notes: configuredProvider.notes || `Created during setup for ${configuredProvider.name}.`,
             deployment: configuredProvider.deployment || null,
             status: configuredProvider.deployment?.lastVerifiedOk ? 'healthy' : 'pending',
@@ -765,7 +766,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
       setCreatedAgents(created)
       setStep('done')
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err))
+      setError(errorMessage(err))
     } finally {
       setSaving(false)
     }
@@ -779,7 +780,7 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
       setCreatedAgents([])
       setStep('done')
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err))
+      setError(errorMessage(err))
     } finally {
       setSaving(false)
     }

package/src/components/auth/user-picker.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
@@ -9,7 +9,8 @@ export function UserPicker() {
   const setUser = useAppStore((s) => s.setUser)
   const loadSettings = useAppStore((s) => s.loadSettings)
   const [name, setName] = useState('')
-  const [avatarSeed, setAvatarSeed] = useState(() => Math.random().toString(36).slice(2, 10))
+  const defaultAvatarSeed = useId().replace(/:/g, '')
+  const [avatarSeed, setAvatarSeed] = useState(defaultAvatarSeed)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()