@swarmclawai/swarmclaw 0.8.4 → 0.8.7

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

@@ -50,7 +50,19 @@ export function ChatArea() {
   const removeSessionFromStore = useAppStore((s) => s.removeSession)
   const refreshSession = useAppStore((s) => s.refreshSession)
   const appSettings = useAppStore((s) => s.appSettings)
-  const { messages, setMessages, streaming, streamingSessionId, sendMessage, stopStreaming, devServer: devServerStatus, setDevServer, debugOpen, setDebugOpen, ttsEnabled, previewContent, setPreviewContent } = useChatStore()
+  const messages = useChatStore((s) => s.messages)
+  const setMessages = useChatStore((s) => s.setMessages)
+  const streaming = useChatStore((s) => s.streaming)
+  const streamingSessionId = useChatStore((s) => s.streamingSessionId)
+  const sendMessage = useChatStore((s) => s.sendMessage)
+  const stopStreaming = useChatStore((s) => s.stopStreaming)
+  const devServerStatus = useChatStore((s) => s.devServer)
+  const setDevServer = useChatStore((s) => s.setDevServer)
+  const debugOpen = useChatStore((s) => s.debugOpen)
+  const setDebugOpen = useChatStore((s) => s.setDebugOpen)
+  const ttsEnabled = useChatStore((s) => s.ttsEnabled)
+  const previewContent = useChatStore((s) => s.previewContent)
+  const setPreviewContent = useChatStore((s) => s.setPreviewContent)
   const isDesktop = useMediaQuery('(min-width: 768px)')
 
   const agents = useAppStore((s) => s.agents)
@@ -218,6 +230,12 @@ export function ChatArea() {
 
   const refreshMessages = useCallback(async () => {
     if (!sessionId) return
+    // Skip message refresh while we're locally streaming this session —
+    // the SSE stream already handles the live display via StreamingBubble.
+    // Fetching messages here would replace the array with new objects on every
+    // WS notification, causing the full MessageList to re-render and flash.
+    const chatState = useChatStore.getState()
+    if (chatState.streaming && chatState.streamingSessionId === sessionId) return
     try {
       const msgs = await fetchMessages(sessionId)
       const previous = messagesRef.current
@@ -357,6 +375,7 @@ export function ChatArea() {
   return (
     <div className="flex-1 flex h-full min-h-0 min-w-0">
     <div
+      data-testid="chat-area"
       className="flex-1 flex flex-col h-full min-h-0 min-w-0 relative"
       onDragOver={handleDragOver}
       onDragEnter={handleDragEnter}

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

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import type { Session } from '@/types'
 import { api } from '@/lib/api-client'
+import { useNow } from '@/hooks/use-now'
 import { getSessionLastAssistantAt, getSessionLastMessage } from '@/lib/session-summary'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -12,9 +13,10 @@ import { ConnectorPlatformBadge, getSessionConnector } from '@/components/shared
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { toast } from 'sonner'
 
-function timeAgo(ts: number): string {
+function timeAgo(ts: number, now: number | null): string {
   if (!ts) return ''
-  const s = Math.floor((Date.now() - ts) / 1000)
+  if (!now) return 'recently'
+  const s = Math.floor((now - ts) / 1000)
   if (s < 60) return 'now'
   if (s < 3600) return Math.floor(s / 60) + 'm'
   if (s < 86400) return Math.floor(s / 3600) + 'h'
@@ -39,6 +41,7 @@ interface Props {
 }
 
 export function ChatCard({ session, active, onClick }: Props) {
+  const now = useNow({ enabled: false })
   const removeSession = useAppStore((s) => s.removeSession)
   const appSettings = useAppStore((s) => s.appSettings)
   const agents = useAppStore((s) => s.agents)
@@ -96,6 +99,18 @@ export function ChatCard({ session, active, onClick }: Props) {
     <>
       <div
         onClick={onClick}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            onClick()
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        aria-label={`Open chat ${displayName}`}
+        data-testid="chat-row"
+        data-session-id={session.id}
+        data-agent-id={session.agentId || undefined}
         className={`group/card relative py-3.5 px-4 cursor-pointer rounded-[14px]
           transition-all duration-200 active:scale-[0.98]
           ${active
@@ -139,7 +154,7 @@ export function ChatCard({ session, active, onClick }: Props) {
           ) : null
         })()}
         <span className="text-[11px] text-text-3/70 shrink-0 tabular-nums font-mono">
-          {timeAgo(session.lastActiveAt)}
+          {timeAgo(session.lastActiveAt, now)}
         </span>
         <button
           onClick={handleDeleteClick}

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

@@ -3,8 +3,10 @@
 import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import { useEffect, useState, useMemo, useRef, useCallback, type ReactNode } from 'react'
 import type { Session } from '@/types'
+import { dedup } from '@/lib/shared-utils'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
+import { useNow } from '@/hooks/use-now'
 import { IconButton } from '@/components/shared/icon-button'
 import { ChatToolToggles } from './chat-tool-toggles'
 import { api } from '@/lib/api-client'
@@ -41,7 +43,7 @@ function getAgentWalletIds(agent: { walletIds?: string[]; walletId?: string | nu
   const legacy = typeof agent?.walletId === 'string' && agent.walletId.trim()
     ? [agent.walletId.trim()]
     : []
-  return [...new Set([...ids, ...legacy])]
+  return dedup([...ids, ...legacy])
 }
 
 function getAgentActiveWalletId(agent: { activeWalletId?: string | null; walletIds?: string[]; walletId?: string | null } | null | undefined): string | null {
@@ -127,6 +129,7 @@ interface Props {
 }
 
 export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported, heartbeatHistoryOpen, onToggleHeartbeatHistory, connectorSources, connectorFilter, onConnectorFilterChange, hasMultipleSources }: Props) {
+  const now = useNow()
   const ttsEnabled = useChatStore((s) => s.ttsEnabled)
   const toggleTts = useChatStore((s) => s.toggleTts)
   const soundEnabled = useChatStore((s) => s.soundEnabled)
@@ -171,9 +174,14 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const setWalletPanelAgentId = useAppStore((s) => s.setWalletPanelAgentId)
   const [walletBalance, setWalletBalance] = useState<{ formatted: string; symbol: string; assets?: number } | null>(null)
   const [headerWidgets, setHeaderWidgets] = useState<Array<{ id: string; label: string; icon?: string }>>([])
+  const [localhostBrowser, setLocalhostBrowser] = useState(false)
   const agentWalletIds = useMemo(() => getAgentWalletIds(agent), [agent])
   const activeWalletId = useMemo(() => getAgentActiveWalletId(agent), [agent])
 
+  useEffect(() => {
+    setLocalhostBrowser(window.location.hostname === 'localhost')
+  }, [])
+
   const refreshHeaderWidgets = useCallback(() => {
     api<Array<{ id: string; label: string; icon?: string }>>('GET', '/plugins/ui?type=header').then((widgets) => {
       if (Array.isArray(widgets)) setHeaderWidgets(widgets)
@@ -231,7 +239,14 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
         textClass: 'text-text-3/45',
       }
     }
-    const ago = Date.now() - lastAt
+    if (!now) {
+      return {
+        label: 'Idle',
+        dotClass: 'bg-text-3/30',
+        textClass: 'text-text-3/45',
+      }
+    }
+    const ago = now - lastAt
     if (ago < 5 * 60_000) {
       return {
         label: 'Active',
@@ -251,7 +266,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
       dotClass: 'bg-text-3/30',
       textClass: 'text-text-3/45',
     }
-  }, [connector, connectorPresence?.lastMessageAt])
+  }, [connector, connectorPresence?.lastMessageAt, now])
 
   const visibleHeaderWidgets = useMemo(() => {
     const seen = new Set<string>()
@@ -263,6 +278,11 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     })
   }, [headerWidgets])
 
+  const heartbeatIntervalOptions = useMemo(
+    () => [...(localhostBrowser ? [60, 300] : []), 1800, 3600, 7200, 21600, 43200],
+    [localhostBrowser],
+  )
+
   const walletHeaderMeta = useMemo(() => {
     if (!agent?.id) {
       return {
@@ -869,7 +889,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 </Tip>
                 {hbDropdownOpen && (
                   <div className="absolute top-full right-0 mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[88px]">
-                    {[...(typeof window !== 'undefined' && window.location.hostname === 'localhost' ? [60, 300] : []), 1800, 3600, 7200, 21600, 43200].map((sec) => (
+                    {heartbeatIntervalOptions.map((sec) => (
                       <button
                         key={sec}
                         onClick={() => handleSelectHeartbeatInterval(sec)}

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

@@ -2,9 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
-import { useChatStore } from '@/stores/use-chat-store'
 import { ChatCard } from './chat-card'
-import { fetchMessages } from '@/lib/chats'
 import { getSessionLastAssistantAt, getSessionLastMessage, getSessionMessageCount } from '@/lib/session-summary'
 import { isLocalhostBrowser, isVisibleSessionForViewer } from '@/lib/local-observability'
 import { toast } from 'sonner'
@@ -34,7 +32,6 @@ export function ChatList({ inSidebar, onSelect }: Props) {
   const lastReadTimestamps = useAppStore((s) => s.lastReadTimestamps)
   const agents = useAppStore((s) => s.agents)
   const connectors = useAppStore((s) => s.connectors)
-  const setMessages = useChatStore((s) => s.setMessages)
   const [search, setSearch] = useState('')
   const [typeFilter, setTypeFilter] = useState<SessionFilter>('all')
   const [sortMode, setSortMode] = useState<SortMode>('lastActive')
@@ -111,14 +108,6 @@ export function ChatList({ inSidebar, onSelect }: Props) {
     if (typeof window !== 'undefined') {
       window.dispatchEvent(new CustomEvent('swarmclaw:scroll-bottom'))
     }
-    try {
-      const msgs = await fetchMessages(id)
-      setMessages(msgs)
-    } catch {
-      const fallback = sessions[id]
-      const fallbackLastMessage = fallback ? getSessionLastMessage(fallback) : null
-      setMessages(fallback?.messages?.length ? fallback.messages : (fallbackLastMessage ? [fallbackLastMessage] : []))
-    }
     onSelect?.()
   }
 
@@ -214,6 +203,8 @@ export function ChatList({ inSidebar, onSelect }: Props) {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search..."
+          aria-label="Search chats"
+          data-testid="chat-search"
           className="flex-1 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' }}

package/src/components/chat/heartbeat-history-panel.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, useMemo } from 'react'
 import type { Message } from '@/types'
+import { dedup } from '@/lib/shared-utils'
 
 /* ─── Heartbeat meta parsing (shared with message-bubble) ─── */
 
@@ -203,7 +204,7 @@ export function HeartbeatHistoryPanel({ messages, agentHeartbeatGoal, onClose }:
               const goal = entry.meta?.goal || agentHeartbeatGoal
               const isExpanded = expandedIdx === i
               const toolNames = entry.msg.toolEvents?.map((te) => te.name).filter(Boolean) ?? []
-              const uniqueTools = [...new Set(toolNames)]
+              const uniqueTools = dedup(toolNames)
 
               return (
                 <button

package/src/components/chat/message-bubble.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import type { Message } from '@/types'
+import { useMediaQuery } from '@/hooks/use-media-query'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { AiAvatar } from '@/components/shared/avatar'
@@ -17,6 +18,8 @@ import { isStructuredMarkdown } from './markdown-utils'
 import { FilePathChip, FILE_PATH_RE, DIR_PATH_RE } from './file-path-chip'
 import { TransferAgentPicker } from './transfer-agent-picker'
 import { DelegationBanner, DelegationSourceBanner, TaskCompletionCard, parseTaskCompletion } from './delegation-banner'
+import { SwarmPanel, parseSwarmOutput, parseSwarmStatusOutput } from './swarm-panel'
+import { SwarmStatusCard, SwarmStatusStyles } from './swarm-status-card'
 import { ConnectorPlatformIcon, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
 import { copyTextToClipboard } from '@/lib/clipboard'
 import { formatMessageTimestamp } from '@/lib/chat-display'
@@ -93,7 +96,10 @@ const emptyToolEvents: NonNullable<Message['toolEvents']> = []
 // AttachmentChip, parseAttachmentUrl, regex constants, and FILE_TYPE_COLORS
 // are now imported from @/components/shared/attachment-chip
 
-function renderAttachments(message: Message) {
+function renderAttachments(
+  message: Message,
+  onOpenImage?: (image: { url: string; filename: string }) => void,
+) {
   const isUser = message.role === 'user'
   const seen = new Set<string>()
   const chips: { url: string; filename: string }[] = []
@@ -121,7 +127,15 @@ function renderAttachments(message: Message) {
   if (!chips.length) return null
   return (
     <div className="flex flex-col">
-      {chips.map((c) => <AttachmentChip key={c.url} url={c.url} filename={c.filename} isUserMsg={isUser} />)}
+      {chips.map((c) => (
+        <AttachmentChip
+          key={c.url}
+          url={c.url}
+          filename={c.filename}
+          isUserMsg={isUser}
+          onOpenImage={onOpenImage}
+        />
+      ))}
     </div>
   )
 }
@@ -182,6 +196,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     return null
   }, [message.text, isUser])
   const currentUser = useAppStore((s) => s.currentUser)
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const setPreviewContent = useChatStore((s) => s.setPreviewContent)
   const [copied, setCopied] = useState(false)
   const [heartbeatExpanded, setHeartbeatExpanded] = useState(false)
   const [toolEventsExpanded, setToolEventsExpanded] = useState(false)
@@ -254,6 +270,10 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     ? rawDisplayText.split('\n').filter((l) => !/\[(MAIN_LOOP_META|MAIN_LOOP_PLAN|MAIN_LOOP_REVIEW|AGENT_HEARTBEAT_META)\]/.test(l)).join('\n').trim()
     : ''
 
+  const handleOpenAttachmentImage = useCallback(({ url, filename }: { url: string; filename: string }) => {
+    setPreviewContent({ type: 'image', url, title: filename })
+  }, [setPreviewContent])
+
   const handleCopy = useCallback(() => {
     void copyTextToClipboard(message.text).then((copiedText) => {
       if (!copiedText) return
@@ -266,6 +286,11 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
 
   return (
     <div
+      data-testid="message-bubble"
+      data-message-role={message.role}
+      data-message-kind={message.kind || 'chat'}
+      data-message-time={message.time || undefined}
+      data-message-has-tools={hasToolEvents || undefined}
       className={`group ${isUser ? 'flex flex-col items-end' : 'flex flex-col items-start relative pl-[44px]'}`}
     >
       {/* Avatar on spine (assistant) */}
@@ -305,7 +330,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
 
       {/* Tool call events (assistant messages only) */}
       {hasToolEvents && (
-        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2" data-testid="message-tool-events">
           {nonSendFileEvents.length > 1 && (
             <button
               type="button"
@@ -317,7 +342,20 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           )}
           <div className={`${toolEventsExpanded ? 'max-h-[320px] overflow-y-auto pr-1 flex flex-col gap-2' : 'flex flex-col gap-2'}`}>
             {visibleToolEvents.map((event, i) => {
-              const key = `${message.time}-tool-${toolEventsExpanded ? `all-${i}` : `latest-${nonSendFileEvents.length - 1}`}`
+              const eventKey = event.toolCallId || `${message.time}-${event.name}-${event.input}`
+              const key = `${message.time}-tool-${toolEventsExpanded ? `all-${eventKey}` : `latest-${eventKey}`}`
+
+              if (event.name === 'spawn_subagent' && event.output) {
+                // Prefer rich SwarmStatusCard when snapshot data is available
+                const statusData = parseSwarmStatusOutput(event.name, event.output)
+                if (statusData) {
+                  return <div key={key}><SwarmStatusStyles /><SwarmStatusCard data={statusData} /></div>
+                }
+                const swarmData = parseSwarmOutput(event.name, event.output)
+                if (swarmData) {
+                  return <SwarmPanel key={key} data={swarmData} />
+                }
+              }
 
               if (event.name === 'delegate_to_agent') {
                 const inp = tryParseJson(event.input || '{}')
@@ -356,11 +394,12 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
                 <ToolCallBubble
                   key={key}
                   event={{
-                    id: `${message.time}-${toolEventsExpanded ? i : toolEvents.length - 1}`,
+                    id: event.toolCallId || `${message.time}-${toolEventsExpanded ? i : toolEvents.length - 1}`,
                     name: event.name,
                     input: event.input,
                     output: event.output,
                     status: event.error ? 'error' : 'done',
+                    
                   }}
                 />
               )
@@ -417,7 +456,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       ) : (
       /* Message bubble */
       <div className={`${isStructured ? 'max-w-[92%] md:max-w-[85%]' : 'max-w-[85%] md:max-w-[72%]'} ${isUser ? 'bubble-user px-5 py-3.5' : isHeartbeat ? 'bubble-ai px-4 py-3' : 'bubble-ai px-5 py-3.5'}`}>
-        {renderAttachments(message)}
+        {renderAttachments(message, isDesktop ? handleOpenAttachmentImage : undefined)}
 
         {walletRequest ? (
           <div className="flex flex-col gap-3 p-4 rounded-[18px] bg-sky-500/[0.03] border border-sky-500/20 shadow-[0_0_20px_rgba(14,165,233,0.05)]">