@swarmclawai/swarmclaw 0.7.2 → 0.7.4

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

@@ -22,12 +22,20 @@ import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
 import { api } from '@/lib/api-client'
+import { messagesDiffer } from '@/lib/chat-streaming-state'
 
-const PROMPT_SUGGESTIONS = [
+const DIRECT_PROMPT_SUGGESTIONS = [
   { text: 'What can you help me with?', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
+  { text: 'Help me choose the right agent for this', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
   { text: 'Help me set up a new connector', icon: 'link', gradient: 'from-[#EC4899]/10 to-[#F472B6]/5' },
-  { text: 'Create a new agent for me', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
-  { text: 'Schedule a recurring task', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
+  { text: 'Summarize what needs attention in this workspace', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
+]
+
+const AGENT_PROMPT_SUGGESTIONS = [
+  { text: 'Give me a quick overview of what you can help with', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
+  { text: 'Review what needs attention right now', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
+  { text: 'Summarize our recent context before we continue', icon: 'link', gradient: 'from-[#EC4899]/10 to-[#F472B6]/5' },
+  { text: 'Help me map the next best step', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
 ]
 
 export function ChatArea() {
@@ -52,6 +60,10 @@ export function ChatArea() {
   const sidebarOpen = useAppStore((s) => s.sidebarOpen)
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
   const currentAgent = session?.agentId ? agents[session.agentId] ?? null : null
+  const promptSuggestions = useMemo(
+    () => (currentAgent ? AGENT_PROMPT_SUGGESTIONS : DIRECT_PROMPT_SUGGESTIONS),
+    [currentAgent],
+  )
 
   const voice = useVoiceConversation()
   const handleVoiceToggle = useCallback(() => {
@@ -68,6 +80,7 @@ export function ChatArea() {
   const [messagesLoading, setMessagesLoading] = useState(true)
   const [connectorFilter, setConnectorFilter] = useState<string | null>(null)
   const [pluginChatActions, setPluginChatActions] = useState<Array<{ id: string; label: string; action: string; value: string; tooltip?: string }>>([])
+  const sessionHasBrowserPlugin = session?.plugins?.includes('browser') === true
 
   useEffect(() => {
     if (sessionId) {
@@ -101,52 +114,71 @@ export function ChatArea() {
 
   useEffect(() => {
     if (!sessionId) return
+    let cancelled = false
+    const requestedSessionId = sessionId
     const chatState = useChatStore.getState()
-    const preserveLocalStream = chatState.streaming && chatState.streamingSessionId === sessionId
-    // Clear stale state from the previous session, but keep active local stream state for this session.
+    const preserveLocalStream = chatState.streaming && chatState.streamingSessionId === requestedSessionId
+    // Keep the previous thread visible while the next one loads to avoid blank flashes.
     setMessagesLoading(true)
-    setMessages([])
     if (!preserveLocalStream) {
       useChatStore.setState({ streaming: false, streamingSessionId: null, streamText: '', toolEvents: [] })
     }
-    fetchMessagesPaginated(sessionId, 100).then((data) => {
+    fetchMessagesPaginated(requestedSessionId, 100).then((data) => {
+      if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       setMessages(data.messages)
       useChatStore.setState({ hasMoreMessages: data.hasMore, totalMessages: data.total })
     }).catch((err) => {
+      if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       console.error('Failed to load messages:', err)
-      setMessages(session?.messages || [])
+      const fallbackSession = useAppStore.getState().sessions[requestedSessionId]
+      setMessages(fallbackSession?.messages || [])
     }).finally(() => {
+      if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       setMessagesLoading(false)
     })
     // If server reports session is still active, show streaming state
     if (session?.active) {
-      useChatStore.setState({ streaming: true, streamingSessionId: sessionId, streamText: '' })
+      useChatStore.setState({ streaming: true, streamingSessionId: requestedSessionId, streamText: '' })
     }
     // Refresh active state from server so returning to a session restores typing indicator.
     loadSessions().then(() => {
-      const refreshed = useAppStore.getState().sessions[sessionId]
+      if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
+      const refreshed = useAppStore.getState().sessions[requestedSessionId]
       if (refreshed?.active) {
-        useChatStore.setState({ streaming: true, streamingSessionId: sessionId, streamText: '' })
+        useChatStore.setState({ streaming: true, streamingSessionId: requestedSessionId, streamText: '' })
       }
     }).catch((err) => console.error('Failed to refresh messages:', err))
-    devServer(sessionId, 'status').then((r) => {
+    devServer(requestedSessionId, 'status').then((r) => {
+      if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
       setDevServer(r.running ? r : null)
-    }).catch(() => setDevServer(null))
+    }).catch(() => {
+      if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
+      setDevServer(null)
+    })
     // Check browser status
-    if (session?.plugins?.includes('browser')) {
-      checkBrowser(sessionId).then((r) => setBrowserActive(r.active)).catch((err) => { console.error('Browser check failed:', err); setBrowserActive(false) })
+    if (sessionHasBrowserPlugin) {
+      checkBrowser(requestedSessionId).then((r) => {
+        if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
+        setBrowserActive(r.active)
+      }).catch((err) => {
+        if (cancelled || useAppStore.getState().currentSessionId !== requestedSessionId) return
+        console.error('Browser check failed:', err)
+        setBrowserActive(false)
+      })
     } else {
       setBrowserActive(false)
     }
-  }, [sessionId])
+    return () => {
+      cancelled = true
+    }
+  }, [loadSessions, session?.active, sessionHasBrowserPlugin, sessionId, setDevServer, setMessages])
 
-  // Auto-poll messages for orchestrated or server-active sessions
-  const isOrchestrated = session?.sessionType === 'orchestrated'
+  // Auto-poll messages for sessions that are actively running on the server
   const isServerActive = session?.active === true
   const isOngoingMonitored = appSettings.loopMode === 'ongoing' && !!session?.plugins?.length
-  const shouldPollMessages = !!sessionId && (isOrchestrated || isServerActive || isOngoingMonitored)
-  const messagesLenRef = useRef(messages.length)
-  messagesLenRef.current = messages.length
+  const shouldPollMessages = !!sessionId && (isServerActive || isOngoingMonitored)
+  const messagesRef = useRef(messages)
+  messagesRef.current = messages
   const isServerActiveRef = useRef(isServerActive)
   isServerActiveRef.current = isServerActive
   const ttsEnabledRef = useRef(ttsEnabled)
@@ -156,8 +188,9 @@ export function ChatArea() {
     if (!sessionId) return
     try {
       const msgs = await fetchMessages(sessionId)
-      if (msgs.length !== messagesLenRef.current) {
-        const newMsgs = msgs.length > messagesLenRef.current ? msgs.slice(messagesLenRef.current) : []
+      const previous = messagesRef.current
+      if (messagesDiffer(msgs, previous)) {
+        const newMsgs = msgs.length > previous.length ? msgs.slice(previous.length) : []
         setMessages(msgs)
         if (ttsEnabledRef.current && typeof document !== 'undefined' && document.visibilityState === 'visible') {
           const latestAssistant = [...newMsgs].reverse().find((m) => {
@@ -385,15 +418,19 @@ export function ChatArea() {
             <h1 className="font-display text-[28px] md:text-[36px] font-800 leading-[1.1] tracking-[-0.04em] mb-3">
               Hi{currentUser ? ', ' : ' '}<span className="text-accent-bright">{currentUser || 'there'}</span>
               <br />
-              <span className="text-text-2">How can I help?</span>
+              <span className="text-text-2">
+                {currentAgent ? `Start with ${currentAgent.name}` : 'Start the conversation'}
+              </span>
             </h1>
             <p className="text-[13px] text-text-3 mt-2">
-              Pick a prompt or type your own below
+              {currentAgent
+                ? `Ask ${currentAgent.name} anything, hand over work, or start with one of these openers.`
+                : 'Pick a prompt or type your own below.'}
             </p>
           </div>
 
           <div className="relative grid grid-cols-2 md:grid-cols-4 gap-3 max-w-[640px] w-full mb-6">
-            {PROMPT_SUGGESTIONS.map((prompt, i) => (
+            {promptSuggestions.map((prompt, i) => (
               <button
                 key={prompt.text}
                 onClick={() => handlePrompt(prompt.text)}
@@ -408,7 +445,7 @@ export function ChatArea() {
           </div>
         </div>
       ) : (
-        <MessageList messages={messages} streaming={streamingForThisSession} connectorFilter={connectorFilter} />
+        <MessageList messages={messages} streaming={streamingForThisSession} connectorFilter={connectorFilter} loading={messagesLoading} />
       )}
 
       {voice.active && (
@@ -434,6 +471,12 @@ export function ChatArea() {
       />
 
       <Dropdown open={menuOpen} onClose={() => setMenuOpen(false)}>
+        <DropdownItem onClick={() => {
+          setMenuOpen(false)
+          setDebugOpen(!debugOpen)
+        }}>
+          {debugOpen ? 'Hide Debug Panel' : 'Show Debug Panel'}
+        </DropdownItem>
         <DropdownItem onClick={() => { setMenuOpen(false); setConfirmClear(true) }}>
           Clear History
         </DropdownItem>

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import type { Session } from '@/types'
 import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
@@ -66,10 +67,13 @@ export function ChatCard({ session, active, onClick }: Props) {
     : 'No messages'
   const providerLabel = PROVIDER_LABELS[session.provider] || session.provider
   const agent = session.agentId ? agents[session.agentId] : null
+  const displayName = session.shortcutForAgentId && agent?.id === session.shortcutForAgentId
+    ? agent.name
+    : session.name
   const connector = getSessionConnector(session, connectors)
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
   const explicitOptIn = session.heartbeatEnabled === true || agent?.heartbeatEnabled === true
-  const intervalRaw = session.heartbeatIntervalSec ?? agent?.heartbeatIntervalSec ?? appSettings.heartbeatIntervalSec ?? 120
+  const intervalRaw = session.heartbeatIntervalSec ?? agent?.heartbeatIntervalSec ?? appSettings.heartbeatIntervalSec ?? DEFAULT_HEARTBEAT_INTERVAL_SEC
   const intervalNum = typeof intervalRaw === 'number' ? intervalRaw : Number.parseInt(String(intervalRaw), 10)
   const intervalEnabled = Number.isFinite(intervalNum) ? intervalNum > 0 : true
   const heartbeatEnabled =
@@ -109,26 +113,7 @@ export function ChatCard({ session, active, onClick }: Props) {
             title={`${connector.name} (${connector.platform})`}
           />
         )}
-        <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{session.name}</span>
-        {session.mainLoopState?.status && session.mainLoopState.status !== 'idle' && (
-          <span className={`shrink-0 flex items-center gap-1 text-[9px] font-600 uppercase tracking-wider px-1.5 py-0.5 rounded-[5px] ${
-            session.mainLoopState.status === 'progress' ? 'text-blue-400/90 bg-blue-400/[0.08]'
-            : session.mainLoopState.status === 'blocked' ? 'text-amber-400/90 bg-amber-400/[0.08]'
-            : 'text-emerald-400/90 bg-emerald-400/[0.08]'
-          }`}>
-            <span className={`w-[5px] h-[5px] rounded-full ${
-              session.mainLoopState.status === 'progress' ? 'bg-blue-400'
-              : session.mainLoopState.status === 'blocked' ? 'bg-amber-400'
-              : 'bg-emerald-400'
-            }`} />
-            {session.mainLoopState.status}
-          </span>
-        )}
-        {session.sessionType === 'orchestrated' && (
-          <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-amber-400/80 bg-amber-400/[0.08] px-2 py-0.5 rounded-[6px]">
-            AI
-          </span>
-        )}
+        <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{displayName}</span>
         {providerLabel && (
           <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-text-3/70 bg-white/[0.03] px-2 py-0.5 rounded-[6px]">
             {providerLabel}