@swarmclawai/swarmclaw 0.8.4 → 0.8.7

package/src/components/chatrooms/chatroom-view.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useCallback, useState, useMemo } from 'react'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import type { StreamingAgent } from '@/stores/use-chatroom-store'
 import { useAppStore } from '@/stores/use-app-store'
+import { useNow } from '@/hooks/use-now'
 import { useWs } from '@/hooks/use-ws'
 import { ChatroomMessageBubble } from './chatroom-message'
 import { ChatroomInput } from './chatroom-input'
@@ -35,10 +36,10 @@ function getMemberRole(chatroom: Chatroom, agentId: string): string {
   return member?.role || 'member'
 }
 
-function isAgentMuted(chatroom: Chatroom, agentId: string): boolean {
+function isAgentMuted(chatroom: Chatroom, agentId: string, now: number | null): boolean {
   const member = getMemberFromChatroom(chatroom, agentId)
   if (!member?.mutedUntil) return false
-  return new Date(member.mutedUntil).getTime() > Date.now()
+  return !!now && new Date(member.mutedUntil).getTime() > now
 }
 
 type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; name: string; input: string }
@@ -69,10 +70,11 @@ function AgentHeartbeatListeners({ agentIds, onPulse }: { agentIds: string[]; on
 
 const GROUP_THRESHOLD_MS = 2 * 60 * 1000
 
-function dayLabel(ts: number): string {
+function dayLabel(ts: number, now: number | null): string {
   const d = new Date(ts)
-  const now = new Date()
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  if (!now) return d.toISOString().slice(0, 10)
+  const nowDate = new Date(now)
+  const today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate())
   const msgDay = new Date(d.getFullYear(), d.getMonth(), d.getDate())
   const diff = today.getTime() - msgDay.getTime()
   if (diff === 0) return 'Today'
@@ -81,6 +83,7 @@ function dayLabel(ts: number): string {
 }
 
 export function ChatroomView() {
+  const now = useNow()
   const currentChatroomId = useChatroomStore((s) => s.currentChatroomId)
   const chatrooms = useChatroomStore((s) => s.chatrooms)
   const streamingAgents = useChatroomStore((s) => s.streamingAgents)
@@ -165,7 +168,7 @@ export function ChatroomView() {
       : []
   ), [chatroom, pinnedIds])
   const memberAgentIds = chatroom?.agentIds || []
-  const mutedCount = chatroom ? chatroom.agentIds.filter((agentId) => isAgentMuted(chatroom, agentId)).length : 0
+  const mutedCount = chatroom ? chatroom.agentIds.filter((agentId) => isAgentMuted(chatroom, agentId, now)).length : 0
   const adminCount = chatroom ? chatroom.agentIds.filter((agentId) => getMemberRole(chatroom, agentId) === 'admin').length : 0
   const lastReadAt = chatroom ? (lastReadTimestamps[chatroom.id] || 0) : 0
   const unreadCount = useMemo(() => (
@@ -277,7 +280,7 @@ export function ChatroomView() {
             {memberAgents.slice(0, 5).map((agent) => {
               const role = getMemberRole(chatroom, agent.id)
               const badge = getRoleBadge(role)
-              const muted = isAgentMuted(chatroom, agent.id)
+              const muted = isAgentMuted(chatroom, agent.id, Date.now())
               return (
                 <Tooltip key={agent.id}>
                   <TooltipTrigger asChild>
@@ -411,7 +414,7 @@ export function ChatroomView() {
                     {showDaySep && (
                       <div className="flex items-center gap-3 px-4 py-3">
                         <div className="flex-1 h-px bg-white/[0.06]" />
-                        <span className="text-[10px] font-600 text-text-3 uppercase tracking-wider">{dayLabel(msg.time)}</span>
+                        <span className="text-[10px] font-600 text-text-3 uppercase tracking-wider">{dayLabel(msg.time, now)}</span>
                         <div className="flex-1 h-px bg-white/[0.06]" />
                       </div>
                     )}
@@ -540,7 +543,7 @@ function RoomDetailsPanel({
           <div className="space-y-2">
             {memberAgents.map((agent) => {
               const role = getMemberRole(chatroom, agent.id)
-              const muted = isAgentMuted(chatroom, agent.id)
+              const muted = isAgentMuted(chatroom, agent.id, Date.now())
               return (
                 <button
                   key={agent.id}

package/src/components/connectors/connector-health.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { api } from '@/lib/api-client'
+import { useNow } from '@/hooks/use-now'
 import type { ConnectorHealthEvent, ConnectorHealthEventType } from '@/types'
 
 interface HealthResponse {
@@ -17,10 +18,10 @@ const EVENT_CONFIG: Record<ConnectorHealthEventType, { color: string; label: str
   disconnected: { color: 'bg-amber-400', label: 'Disconnected' },
 }
 
-function formatTimestamp(ts: string): string {
+function formatTimestamp(ts: string, now: number | null): string {
   const d = new Date(ts)
-  const now = new Date()
-  const diffMs = now.getTime() - d.getTime()
+  if (!now) return 'recently'
+  const diffMs = now - d.getTime()
   const diffMin = Math.floor(diffMs / 60_000)
   const diffHr = Math.floor(diffMs / 3_600_000)
   const diffDay = Math.floor(diffMs / 86_400_000)
@@ -39,6 +40,7 @@ function uptimeBadgeColor(pct: number): string {
 }
 
 export function ConnectorHealth({ connectorId }: { connectorId: string }) {
+  const now = useNow()
   const [data, setData] = useState<HealthResponse | null>(null)
   const [loading, setLoading] = useState(true)
 
@@ -104,7 +106,7 @@ export function ConnectorHealth({ connectorId }: { connectorId: string }) {
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
                     <span className="text-[13px] font-600 text-text-2">{cfg.label}</span>
-                    <span className="text-[11px] text-text-3">{formatTimestamp(ev.timestamp)}</span>
+                    <span className="text-[11px] text-text-3">{formatTimestamp(ev.timestamp, now)}</span>
                   </div>
                   {ev.message && (
                     <p className="text-[12px] text-text-3/70 mt-0.5 leading-[1.4] break-words">{ev.message}</p>

package/src/components/connectors/connector-list.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { useWs } from '@/hooks/use-ws'
+import { useMountedRef } from '@/hooks/use-mounted-ref'
 import { api } from '@/lib/api-client'
 import type { Connector } from '@/types'
 import {
@@ -55,6 +56,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [groupFilter, setGroupFilter] = useState<'all' | ConnectorGroup>('all')
+  const mountedRef = useMountedRef()
   const openConnector = useCallback((id: string | null) => {
     setEditingConnectorId(id)
     setConnectorSheetOpen(true)
@@ -62,9 +64,8 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
 
   const refresh = useCallback(async () => {
     await Promise.all([loadConnectors(), loadAgents(), loadChatrooms()])
-    setLoaded(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadConnectors, loadAgents])
+    if (mountedRef.current) setLoaded(true)
+  }, [loadConnectors, loadAgents, loadChatrooms, mountedRef])
 
   useEffect(() => { void refresh() }, [refresh])
   useWs('connectors', loadConnectors, 15_000)
@@ -77,34 +78,38 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
   const handleToggle = async (e: React.MouseEvent, c: Connector) => {
     e.stopPropagation()
     const action = c.status === 'running' ? 'stop' : 'start'
-    setToggling(c.id)
-    setError(null)
+    if (mountedRef.current) {
+      setToggling(c.id)
+      setError(null)
+    }
     try {
       await api('PUT', `/connectors/${c.id}`, { action })
       await refresh()
     } catch (err: unknown) {
       const msg = err instanceof Error && err.message ? err.message : `Failed to ${action}`
-      setError(msg)
+      if (mountedRef.current) setError(msg)
       await refresh()
     } finally {
-      setToggling(null)
+      if (mountedRef.current) setToggling(null)
     }
   }
 
   const handleReconnect = async (e: React.MouseEvent, c: Connector) => {
     e.stopPropagation()
-    setReconnecting(c.id)
-    setError(null)
+    if (mountedRef.current) {
+      setReconnecting(c.id)
+      setError(null)
+    }
     try {
       try { await api('PUT', `/connectors/${c.id}`, { action: 'stop' }) } catch { /* may already be stopped */ }
       await api('PUT', `/connectors/${c.id}`, { action: 'start' })
       await refresh()
     } catch (err: unknown) {
       const msg = err instanceof Error && err.message ? err.message : 'Failed to reconnect'
-      setError(msg)
+      if (mountedRef.current) setError(msg)
       await refresh()
     } finally {
-      setReconnecting(null)
+      if (mountedRef.current) setReconnecting(null)
     }
   }
 

package/src/components/connectors/connector-sheet.tsx

@@ -16,6 +16,7 @@ import { HintTip } from '@/components/shared/hint-tip'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { ConnectorHealth } from '@/components/connectors/connector-health'
+import { errorMessage } from '@/lib/shared-utils'
 
 /** Auto-detect URLs in text and make them clickable links that open in a new tab */
 function linkify(text: string) {
@@ -489,6 +490,7 @@ export function ConnectorSheet() {
   const connectors = useAppStore((s) => s.connectors)
   const loadConnectors = useAppStore((s) => s.loadConnectors)
   const agents = useAppStore((s) => s.agents)
+  const appSettings = useAppStore((s) => s.appSettings)
   const credentials = useAppStore((s) => s.credentials)
   const loadAgents = useAppStore((s) => s.loadAgents)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
@@ -520,6 +522,10 @@ export function ConnectorSheet() {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [confirmWhatsAppAction, setConfirmWhatsAppAction] = useState<'unlink' | 'repair' | null>(null)
   const [deleting, setDeleting] = useState(false)
+  const localAllowlistCount = config.allowFrom ? config.allowFrom.split(',').map((entry) => entry.trim()).filter(Boolean).length : 0
+  const globalWhatsAppAllowlistCount = platform === 'whatsapp' && Array.isArray(appSettings.whatsappApprovedContacts)
+    ? appSettings.whatsappApprovedContacts.length
+    : 0
 
   const editing = editingId ? connectors[editingId] as Connector | undefined : null
 
@@ -640,7 +646,7 @@ export function ConnectorSheet() {
       setOpen(false)
       setEditingId(null)
     } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : String(err))
+      toast.error(errorMessage(err))
     } finally {
       setSaving(false)
     }
@@ -665,7 +671,7 @@ export function ConnectorSheet() {
       await loadConnectors()
     } catch (err: unknown) {
       setWaConnecting(false)
-      toast.error(`Failed to ${action}: ${err instanceof Error ? err.message : String(err)}`)
+      toast.error(`Failed to ${action}: ${errorMessage(err)}`)
     } finally {
       setActionLoading(false)
     }
@@ -681,7 +687,7 @@ export function ConnectorSheet() {
       setOpen(false)
       setEditingId(null)
     } catch (err: unknown) {
-      toast.error(`Failed to delete connector: ${err instanceof Error ? err.message : String(err)}`)
+      toast.error(`Failed to delete connector: ${errorMessage(err)}`)
     } finally {
       setDeleting(false)
     }
@@ -699,7 +705,7 @@ export function ConnectorSheet() {
       setConfirmWhatsAppAction(null)
       await loadConnectors()
     } catch (err: unknown) {
-      toast.error(`Failed to ${mode === 'unlink' ? 'unlink' : 're-pair'}: ${err instanceof Error ? err.message : String(err)}`)
+      toast.error(`Failed to ${mode === 'unlink' ? 'unlink' : 're-pair'}: ${errorMessage(err)}`)
     } finally {
       setActionLoading(false)
     }
@@ -1051,7 +1057,7 @@ export function ConnectorSheet() {
                       setNewCredName('')
                       setNewCredValue('')
                     } catch (err: unknown) {
-                      toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`)
+                      toast.error(`Failed to save: ${errorMessage(err)}`)
                     } finally {
                       setSavingCred(false)
                     }
@@ -1158,7 +1164,7 @@ export function ConnectorSheet() {
               · Debounce: <span className="text-text-2">{doctorPolicy.inboundDebounceMs ?? 700}ms</span>
             </div>
             <div className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-[12px] text-text-3/80">
-              Allowlist: <span className="text-text-2">{config.allowFrom ? config.allowFrom.split(',').map((entry) => entry.trim()).filter(Boolean).length : 0}</span>{' '}
+              Allowlist: <span className="text-text-2">{localAllowlistCount + globalWhatsAppAllowlistCount}</span>{' '}
               · Reactions: <span className="text-text-2">{doctorPolicy.statusReactions === false ? 'off' : 'on'}</span>{' '}
               · Typing: <span className="text-text-2">{doctorPolicy.typingIndicators === false ? 'off' : 'on'}</span>
             </div>

package/src/components/home/home-view.tsx

@@ -5,6 +5,8 @@ import { AreaChart, Area, ResponsiveContainer, Tooltip } from 'recharts'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { useMountedRef } from '@/hooks/use-mounted-ref'
+import { useNow } from '@/hooks/use-now'
 import { api } from '@/lib/api-client'
 import { isLocalhostBrowser, isVisibleSessionForViewer } from '@/lib/local-observability'
 import { getSessionLastMessage } from '@/lib/session-summary'
@@ -12,8 +14,9 @@ import { getNotificationActivityAt, getNotificationOccurrenceCount } from '@/lib
 import type { Agent, Session, ActivityEntry, BoardTask, AppNotification } from '@/types'
 import { HintTip } from '@/components/shared/hint-tip'
 
-function timeAgo(ts: number): string {
-  const diff = Date.now() - ts
+function timeAgo(ts: number, now: number | null): string {
+  if (!now) return 'recently'
+  const diff = now - ts
   const mins = Math.floor(diff / 60000)
   if (mins < 1) return 'just now'
   if (mins < 60) return `${mins}m ago`
@@ -23,8 +26,9 @@ function timeAgo(ts: number): string {
   return `${days}d ago`
 }
 
-function timeUntil(ts: number): string {
-  const diff = ts - Date.now()
+function timeUntil(ts: number, now: number | null): string {
+  if (!now) return 'soon'
+  const diff = ts - now
   if (diff <= 0) return 'now'
   const mins = Math.floor(diff / 60000)
   if (mins < 60) return `in ${mins}m`
@@ -69,6 +73,7 @@ const PLATFORM_LABELS: Record<string, string> = {
 }
 
 export function HomeView() {
+  const now = useNow()
   const agents = useAppStore((s) => s.agents)
   const sessions = useAppStore((s) => s.sessions)
   const currentUser = useAppStore((s) => s.currentUser)
@@ -89,9 +94,14 @@ export function HomeView() {
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
-  const setMessages = useChatStore((s) => s.setMessages)
   const [todayCost, setTodayCost] = useState(0)
   const [costTrend, setCostTrend] = useState<{ cost: number; bucket: string }[]>([])
+  const [localhostBrowser, setLocalhostBrowser] = useState(false)
+  const mountedRef = useMountedRef()
+
+  useEffect(() => {
+    setLocalhostBrowser(isLocalhostBrowser())
+  }, [])
 
   const allAgents = Object.values(agents).filter((a) => !a.trashedAt)
   const pinnedAgents = allAgents.filter((a) => a.pinned)
@@ -99,10 +109,10 @@ export function HomeView() {
   const recentChats = useMemo(
     () =>
       Object.values(sessions)
-        .filter((session) => isVisibleSessionForViewer(session, currentUser, { localhost: isLocalhostBrowser() }))
+        .filter((session) => isVisibleSessionForViewer(session, currentUser, { localhost: localhostBrowser }))
         .sort((a, b) => (b.lastActiveAt || 0) - (a.lastActiveAt || 0))
         .slice(0, 5),
-    [currentUser, sessions],
+    [currentUser, localhostBrowser, sessions],
   )
 
   // Quick stats
@@ -130,12 +140,12 @@ export function HomeView() {
 
   // Upcoming schedules
   const upcomingSchedules = useMemo(() => {
-    const now = Date.now()
+    const currentNow = now ?? 0
     return Object.values(schedules)
-      .filter((s) => s.status === 'active' && s.nextRunAt && s.nextRunAt > now)
+      .filter((s) => s.status === 'active' && s.nextRunAt && s.nextRunAt > currentNow)
       .sort((a, b) => (a.nextRunAt || 0) - (b.nextRunAt || 0))
       .slice(0, 5)
-  }, [schedules])
+  }, [now, schedules])
 
   // Unread notifications
   const unreadNotifications = useMemo(
@@ -148,14 +158,16 @@ export function HomeView() {
 
   // Load data on mount
   useEffect(() => {
+    let cancelled = false
     void loadActivity({ limit: 8 })
     void loadSchedules()
     void loadNotifications()
     const connectorTimer = window.setTimeout(() => {
-      void loadConnectors()
+      if (!cancelled) void loadConnectors()
     }, 1200)
     api<{ records: Array<{ estimatedCost: number }>; timeSeries: Array<{ cost: number; bucket: string }> }>('GET', '/usage?range=7d')
       .then((data) => {
+        if (cancelled || !mountedRef.current) return
         const series = (data.timeSeries || []).map((pt: { cost: number; bucket?: string }) => ({ cost: pt.cost, bucket: pt.bucket || '' }))
         setCostTrend(series)
         const todayBucket = new Date().toISOString().slice(0, 10)
@@ -163,12 +175,14 @@ export function HomeView() {
         setTodayCost(todayPt?.cost || 0)
       })
       .catch(() => {})
-    return () => window.clearTimeout(connectorTimer)
+    return () => {
+      cancelled = true
+      window.clearTimeout(connectorTimer)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [mountedRef])
 
   const handleAgentClick = (agent: Agent) => {
-    setMessages([])
     void setCurrentAgent(agent.id)
     setActiveView('agents')
   }
@@ -225,7 +239,7 @@ export function HomeView() {
             </div>
 
             {(() => {
-              const now = Date.now()
+              const currentNow = now ?? 0
               const items = [
                 ...allTasks
                   .filter((task) => task.pendingApproval)
@@ -244,7 +258,7 @@ export function HomeView() {
                     id: `failed:${task.id}`,
                     tone: 'danger' as const,
                     label: task.title,
-                    meta: `Failed ${timeAgo(task.updatedAt || task.createdAt)}`,
+                    meta: `Failed ${timeAgo(task.updatedAt || task.createdAt, now)}`,
                     onClick: () => handleTaskClick(task),
                   })),
                 ...allConnectors
@@ -258,7 +272,7 @@ export function HomeView() {
                     onClick: () => setActiveView('connectors'),
                   })),
                 ...Object.values(schedules)
-                  .filter((schedule) => schedule.status === 'active' && schedule.nextRunAt && schedule.nextRunAt < now)
+                  .filter((schedule) => schedule.status === 'active' && schedule.nextRunAt && schedule.nextRunAt < currentNow)
                   .slice(0, 2)
                   .map((schedule) => ({
                     id: `schedule:${schedule.id}`,
@@ -396,7 +410,7 @@ export function HomeView() {
                           x{getNotificationOccurrenceCount(n)}
                         </span>
                       )}
-                      <span className="text-[10px] text-text-3/40">{timeAgo(getNotificationActivityAt(n))}</span>
+                      <span className="text-[10px] text-text-3/40">{timeAgo(getNotificationActivityAt(n), now)}</span>
                     </div>
                   </button>
                 ))}
@@ -452,7 +466,7 @@ export function HomeView() {
                       <div className="flex-1 min-w-0">
                         <span className="text-[13px] font-500 text-text truncate block">{task.title}</span>
                         <span className="text-[11px] text-text-3/50">
-                          {agent?.name || 'Unassigned'} · {task.status === 'running' ? 'running' : 'queued'}{task.startedAt ? ` · ${timeAgo(task.startedAt)}` : ''}
+                          {agent?.name || 'Unassigned'} · {task.status === 'running' ? 'running' : 'queued'}{task.startedAt ? ` · ${timeAgo(task.startedAt, now)}` : ''}
                         </span>
                       </div>
                     </button>
@@ -482,7 +496,7 @@ export function HomeView() {
                       <div className="flex-1 min-w-0">
                         <span className="text-[13px] font-500 text-text truncate block">{sched.name}</span>
                         <span className="text-[11px] text-text-3/50">
-                          {agent?.name || 'No agent'} · {sched.nextRunAt ? timeUntil(sched.nextRunAt) : '—'}
+                          {agent?.name || 'No agent'} · {sched.nextRunAt ? timeUntil(sched.nextRunAt, now) : '—'}
                         </span>
                       </div>
                     </div>
@@ -503,7 +517,7 @@ export function HomeView() {
               {pinnedAgents.map((agent) => {
                 const threadSession = agent.threadSessionId ? sessions[agent.threadSessionId] as Session | undefined : undefined
                 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 isOnline = runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || heartbeatOn || recentlyActive
                 const isTyping = streamingSessionId === agent.threadSessionId
                 const lastActive = threadSession?.lastActiveAt || agent.lastUsedAt || agent.updatedAt
@@ -539,7 +553,7 @@ export function HomeView() {
                       </span>
                     ) : (
                       <span className={`text-[10px] ${isOnline ? 'text-emerald-400/80' : 'text-text-3/50'}`}>
-                        {isOnline ? 'Online' : lastActive ? timeAgo(lastActive) : 'Idle'}
+                        {isOnline ? 'Online' : lastActive ? timeAgo(lastActive, now) : 'Idle'}
                       </span>
                     )}
                     {modelLabel && (
@@ -589,7 +603,7 @@ export function HomeView() {
                           {displayName}
                         </span>
                         <span className="text-[11px] text-text-3/50 shrink-0">
-                          {timeAgo(session.lastActiveAt || session.createdAt)}
+                          {timeAgo(session.lastActiveAt || session.createdAt, now)}
                         </span>
                       </div>
                       {lastMsg && (
@@ -619,7 +633,7 @@ export function HomeView() {
                     <path d={ACTIVITY_ICONS[entry.action] || ACTIVITY_ICONS.updated} />
                   </svg>
                   <span className="text-[12px] text-text-3/80 flex-1 truncate">{entry.summary}</span>
-                  <span className="text-[10px] text-text-3/40 shrink-0">{timeAgo(entry.timestamp)}</span>
+                  <span className="text-[10px] text-text-3/40 shrink-0">{timeAgo(entry.timestamp, now)}</span>
                 </div>
               ))}
             </div>

package/src/components/input/chat-input.tsx

@@ -10,6 +10,7 @@ import { FilePreview } from '@/components/shared/file-preview'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { toast } from 'sonner'
 import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
+import { errorMessage } from '@/lib/shared-utils'
 
 interface Props {
   streaming: boolean
@@ -119,7 +120,7 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
       const result = await uploadImage(file)
       addPendingFile({ file, path: result.path, url: result.url })
     } catch (err: unknown) {
-      console.error('File upload failed:', err instanceof Error ? err.message : String(err))
+      console.error('File upload failed:', errorMessage(err))
     }
   }, [addPendingFile])
 
@@ -161,6 +162,8 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
             </div>
             <button
               onClick={onStop}
+              aria-label="Stop response"
+              data-testid="chat-stop"
               className="px-4 py-2 rounded-pill border border-danger/20 bg-danger/[0.06]
                 text-danger text-[12px] font-600 cursor-pointer transition-all duration-200
                 active:scale-95 hover:bg-danger/[0.1] hover:border-danger/30 shrink-0"
@@ -210,6 +213,8 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             placeholder="Ask me anything..."
+            aria-label="Message input"
+            data-testid="chat-input"
             rows={1}
             className="w-full px-5 pt-4 pb-2 bg-transparent text-text text-[15px] outline-none resize-none
               max-h-[140px] leading-[1.55] placeholder:text-text-3/70 border-none"
@@ -220,6 +225,8 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
             <button
               type="button"
               onClick={() => setExtrasOpen((open) => !open)}
+              aria-label="Add attachment"
+              data-testid="chat-add"
               className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
                 text-text-3 text-[13px] cursor-pointer hover:text-text-2 hover:bg-white/[0.05] transition-all duration-200"
               style={{ fontFamily: 'inherit' }}
@@ -240,6 +247,8 @@ export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }:
             <button
               onClick={handleSend}
               disabled={!hasContent}
+              aria-label={streaming ? 'Queue message' : 'Send message'}
+              data-testid="chat-send"
               className={`w-9 h-9 rounded-[11px] border-none flex items-center justify-center
                 shrink-0 cursor-pointer transition-all duration-250
                 ${hasContent

package/src/components/layout/app-layout.tsx

@@ -10,49 +10,31 @@ import { SettingsPage } from '@/components/shared/settings/settings-page'
 import { AgentList } from '@/components/agents/agent-list'
 import { AgentChatList } from '@/components/agents/agent-chat-list'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import { AgentSheet } from '@/components/agents/agent-sheet'
 import { ScheduleList } from '@/components/schedules/schedule-list'
-import { ScheduleSheet } from '@/components/schedules/schedule-sheet'
 import { MemoryAgentList } from '@/components/memory/memory-agent-list'
-import { MemorySheet } from '@/components/memory/memory-sheet'
 import { MemoryBrowser } from '@/components/memory/memory-browser'
 import { TaskList } from '@/components/tasks/task-list'
-import { TaskSheet } from '@/components/tasks/task-sheet'
 import { TaskBoard } from '@/components/tasks/task-board'
 import { ApprovalsPanel } from '@/components/tasks/approvals-panel'
 import { SecretsList } from '@/components/secrets/secrets-list'
-import { SecretSheet } from '@/components/secrets/secret-sheet'
 import { ProviderList } from '@/components/providers/provider-list'
-import { ProviderSheet } from '@/components/providers/provider-sheet'
-import { GatewaySheet } from '@/components/gateways/gateway-sheet'
 import { SkillList } from '@/components/skills/skill-list'
-import { SkillSheet } from '@/components/skills/skill-sheet'
 import { ConnectorList } from '@/components/connectors/connector-list'
-import { ConnectorSheet } from '@/components/connectors/connector-sheet'
 import { ChatroomList } from '@/components/chatrooms/chatroom-list'
 import { ChatroomView } from '@/components/chatrooms/chatroom-view'
-import { ChatroomSheet } from '@/components/chatrooms/chatroom-sheet'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { WebhookList } from '@/components/webhooks/webhook-list'
-import { WebhookSheet } from '@/components/webhooks/webhook-sheet'
 import { LogList } from '@/components/logs/log-list'
 import { McpServerList } from '@/components/mcp-servers/mcp-server-list'
-import { McpServerSheet } from '@/components/mcp-servers/mcp-server-sheet'
 import { KnowledgeList } from '@/components/knowledge/knowledge-list'
-import { KnowledgeSheet } from '@/components/knowledge/knowledge-sheet'
 import { PluginList } from '@/components/plugins/plugin-list'
-import { PluginSheet } from '@/components/plugins/plugin-sheet'
 import { RunList } from '@/components/runs/run-list'
 import { ActivityFeed } from '@/components/activity/activity-feed'
 import { MetricsDashboard } from '@/components/usage/metrics-dashboard'
 import { WalletPanel } from '@/components/wallets/wallet-panel'
 import { ProjectList } from '@/components/projects/project-list'
 import { ProjectDetail } from '@/components/projects/project-detail'
-import { ProjectSheet } from '@/components/projects/project-sheet'
-import { SearchDialog } from '@/components/shared/search-dialog'
-import { AgentSwitchDialog } from '@/components/shared/agent-switch-dialog'
-import { KeyboardShortcutsDialog } from '@/components/shared/keyboard-shortcuts-dialog'
-import { ProfileSheet } from '@/components/shared/profile-sheet'
+import { SheetLayer } from './sheet-layer'
 import { HomeView } from '@/components/home/home-view'
 import { NetworkBanner } from './network-banner'
 import { UpdateBanner } from './update-banner'
@@ -1106,25 +1088,7 @@ export function AppLayout() {
       </ErrorBoundary>
 
       <CommandPalette />
-      <SearchDialog />
-      <AgentSwitchDialog />
-      <KeyboardShortcutsDialog />
-      <AgentSheet />
-      <ScheduleSheet />
-      <MemorySheet />
-      <TaskSheet />
-      <SecretSheet />
-      <ProviderSheet />
-      <GatewaySheet />
-      <SkillSheet />
-      <ConnectorSheet />
-      <ChatroomSheet />
-      <WebhookSheet />
-      <McpServerSheet />
-      <KnowledgeSheet />
-      <PluginSheet />
-      <ProjectSheet />
-      <ProfileSheet open={profileSheetOpen} onClose={() => setProfileSheetOpen(false)} />
+      <SheetLayer profileSheetOpen={profileSheetOpen} setProfileSheetOpen={setProfileSheetOpen} />
 
     </div>
   )