@swarmclawai/swarmclaw 0.7.8 → 0.8.0

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

@@ -7,6 +7,7 @@ import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { shouldHidePersistedStreamingAssistantMessage } from '@/lib/chat-streaming-state'
+import { dedupeMessagesForDisplay } from '@/lib/chat-display'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
@@ -47,6 +48,22 @@ function dateSeparator(ts: number): string {
   return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
 }
 
+function getLatestAssistantToolMoment(messages: Message[]): { key: string; name: string; input: string } | null {
+  const last = messages[messages.length - 1]
+  if (!last || last.role !== 'assistant' || !last.toolEvents?.length) return null
+  const events = last.toolEvents
+  for (let i = events.length - 1; i >= 0; i--) {
+    if (isNotableTool(events[i].name)) {
+      return {
+        key: `${last.time}-${events[i].name}-${i}`,
+        name: events[i].name,
+        input: events[i].input || '',
+      }
+    }
+  }
+  return null
+}
+
 interface Props {
   messages: Message[]
   streaming: boolean
@@ -90,7 +107,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   const showGatewayOverlay = isOpenClaw && gatewayStatus === 'disconnected'
 
   // Moment overlay for last assistant message (heartbeat or tool events)
-  type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; name: string; input: string }
+  type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; key: string; name: string; input: string }
   const [currentMoment, setCurrentMoment] = useState<MomentType | null>(null)
 
   const heartbeatTopic = agent?.id ? `heartbeat:agent:${agent.id}` : ''
@@ -98,23 +115,32 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
     setCurrentMoment({ kind: 'heartbeat' })
   })
 
-  // Detect notable tool events on latest assistant message when messages change
   const prevToolKeyRef = useRef<string | null>(null)
+  const seededMomentSessionRef = useRef<string | null>(null)
+
   useEffect(() => {
-    const last = messages[messages.length - 1]
-    if (!last || last.role !== 'assistant' || !last.toolEvents?.length) return
-    const events = last.toolEvents
-    for (let i = events.length - 1; i >= 0; i--) {
-      if (isNotableTool(events[i].name)) {
-        const key = `${last.time}-${events[i].name}-${i}`
-        if (key !== prevToolKeyRef.current) {
-          prevToolKeyRef.current = key
-          setCurrentMoment({ kind: 'tool', name: events[i].name, input: events[i].input || '' })
-        }
-        return
-      }
+    if (!sessionId) {
+      seededMomentSessionRef.current = null
+      prevToolKeyRef.current = null
+      setCurrentMoment(null)
+      return
     }
-  }, [messages])
+
+    if (seededMomentSessionRef.current === sessionId) return
+    seededMomentSessionRef.current = sessionId
+    prevToolKeyRef.current = getLatestAssistantToolMoment(messages)?.key || null
+    setCurrentMoment(null)
+  }, [messages, sessionId])
+
+  // Detect notable tool events on the latest assistant message after the session has been seeded.
+  useEffect(() => {
+    if (!sessionId || seededMomentSessionRef.current !== sessionId) return
+    const moment = getLatestAssistantToolMoment(messages)
+    if (!moment) return
+    if (moment.key === prevToolKeyRef.current) return
+    prevToolKeyRef.current = moment.key
+    setCurrentMoment({ kind: 'tool', key: moment.key, name: moment.name, input: moment.input })
+  }, [messages, sessionId])
 
   // Unread count tracking
   const unreadRef = useRef(0)
@@ -189,13 +215,16 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
     }
   }
 
+  const dedupedDisplayedMessages = dedupeMessagesForDisplay(displayedMessages)
+
   // Apply bookmark + connector filter
   let filteredMessages = bookmarkFilter
-    ? displayedMessages.filter((msg) => msg.bookmarked)
-    : displayedMessages
+    ? dedupedDisplayedMessages.filter((msg) => msg.bookmarked)
+    : dedupedDisplayedMessages
   if (connectorFilter) {
     filteredMessages = filteredMessages.filter((msg) => msg.source?.connectorId === connectorFilter)
   }
+  const hasVisiblePersistedStreamingMessage = filteredMessages.some((msg) => msg.role === 'assistant' && msg.streaming === true)
 
   // Search matches
   const searchMatches = useMemo(() => {
@@ -629,7 +658,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
               } else {
                 momentOverlay = (
                   <ActivityMoment
-                    key={`${currentMoment.name}-${Date.now()}`}
+                    key={currentMoment.key}
                     toolName={currentMoment.name}
                     toolInput={currentMoment.input}
                     onDismiss={() => setCurrentMoment(null)}
@@ -676,7 +705,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
             )
           })}
           <ApprovalCards agentId={agent?.id} />
-          {streaming && !displayText && <ThinkingIndicator assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
+          {streaming && !displayText && !hasVisiblePersistedStreamingMessage && <ThinkingIndicator assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
           {streaming && displayText && <StreamingBubble text={displayText} assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
           {appSettings.suggestionsEnabled === true && !streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
             <SuggestionsBar lastMessage={filteredMessages[filteredMessages.length - 1]} onSend={sendMessage} />

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

@@ -14,7 +14,7 @@ import { AgentHoverCard } from './agent-hover-card'
 import { ChatroomToolRequestBanner } from './chatroom-tool-request-banner'
 import { isStructuredMarkdown } from '@/components/chat/markdown-utils'
 import { TransferAgentPicker } from '@/components/chat/transfer-agent-picker'
-import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
+import { ConnectorPlatformIcon, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
 import type { ChatroomMessage, Chatroom, Agent } from '@/types'
 
 interface Props {
@@ -227,7 +227,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
                 <span className="text-[13px] font-600 text-text flex items-center gap-1.5">
                   {message.source && <ConnectorPlatformIcon platform={message.source.platform} size={12} />}
                   {isUser && message.source?.senderName
-                    ? `${message.source.senderName} via ${CONNECTOR_PLATFORM_META[message.source.platform]?.label || message.source.platform}`
+                    ? `${message.source.senderName} via ${getConnectorPlatformLabel(message.source.platform)}`
                     : message.senderName}
                 </span>
               )}

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

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { toast } from 'sonner'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { Agent, ChatroomRoutingRule } from '@/types'
@@ -165,6 +166,7 @@ export function ChatroomSheet() {
   const [saving, setSaving] = useState(false)
   const [addingRule, setAddingRule] = useState(false)
   const [editingRuleId, setEditingRuleId] = useState<string | null>(null)
+  const [confirmDelete, setConfirmDelete] = useState(false)
 
   const editing = editingId ? chatrooms[editingId] : null
 
@@ -186,6 +188,7 @@ export function ChatroomSheet() {
     }
     setAddingRule(false)
     setEditingRuleId(null)
+    setConfirmDelete(false)
   }, [editing, open])
 
   const handleSave = async () => {
@@ -222,11 +225,11 @@ export function ChatroomSheet() {
 
   const handleDelete = async () => {
     if (!editing || saving) return
-    if (!confirm(`Delete chatroom "${editing.name}"?`)) return
     setSaving(true)
     try {
       await deleteChatroom(editing.id)
       toast.success('Chatroom deleted')
+      setConfirmDelete(false)
       setChatroomSheetOpen(false)
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete chatroom')
@@ -503,7 +506,7 @@ export function ChatroomSheet() {
           </button>
           {editing && (
             <button
-              onClick={handleDelete}
+              onClick={() => setConfirmDelete(true)}
               disabled={saving}
               className="py-2.5 px-4 rounded-[8px] text-[13px] font-600 text-red-400 hover:bg-red-500/10 transition-all cursor-pointer"
             >
@@ -512,6 +515,17 @@ export function ChatroomSheet() {
           )}
         </div>
       </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Chatroom?"
+        message={editing ? `Delete "${editing.name}"? This removes the chatroom and its configuration.` : 'Delete this chatroom?'}
+        confirmLabel={saving ? 'Deleting...' : 'Delete'}
+        confirmDisabled={saving}
+        cancelDisabled={saving}
+        danger
+        onConfirm={() => { void handleDelete() }}
+        onCancel={() => { if (!saving) setConfirmDelete(false) }}
+      />
     </BottomSheet>
   )
 }

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

@@ -93,7 +93,7 @@ export function ConnectorHealth({ connectorId }: { connectorId: string }) {
         {/* Vertical line */}
         <div className="absolute left-[7px] top-2 bottom-2 w-px bg-white/[0.08]" />
 
-        <div className="space-y-3">
+        <div className="max-h-[320px] overflow-y-auto pr-2 space-y-3 sm:max-h-[38vh]">
           {recentEvents.map((ev) => {
             const cfg = EVENT_CONFIG[ev.event] ?? { color: 'bg-white/30', label: ev.event }
             return (

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

@@ -6,7 +6,12 @@ import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { Connector } from '@/types'
-import { ConnectorPlatformIcon, ConnectorPlatformBadge, CONNECTOR_PLATFORM_META, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
+import {
+  ConnectorPlatformIcon,
+  ConnectorPlatformBadge,
+  getConnectorPlatformLabel,
+  resolveConnectorPlatformMeta,
+} from '@/components/shared/connector-platform-icon'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 
 function relativeTime(ts: number): string {
@@ -181,7 +186,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
           const agent = c.agentId ? agents[c.agentId] : null
           const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
           const isRunning = c.status === 'running'
-          const meta = CONNECTOR_PLATFORM_META[c.platform]
+          const meta = resolveConnectorPlatformMeta(c.platform)
           const group = getConnectorGroup(c)
           return (
             <button