@swarmclawai/swarmclaw 0.7.1 → 0.7.3

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

@@ -4,7 +4,7 @@ import { useEffect, useCallback, useState, useRef, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { useChatStore } from '@/stores/use-chat-store'
-import { fetchMessages, fetchMessagesPaginated, clearMessages, deleteSession, devServer, checkBrowser, stopBrowser } from '@/lib/sessions'
+import { fetchMessages, fetchMessagesPaginated, clearMessages, deleteChat, devServer, checkBrowser, stopBrowser } from '@/lib/chats'
 import { uploadImage } from '@/lib/upload'
 import { deleteAgent } from '@/lib/agents'
 import { useMediaQuery } from '@/hooks/use-media-query'
@@ -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(() => {
@@ -133,20 +145,19 @@ export function ChatArea() {
       setDevServer(r.running ? r : null)
     }).catch(() => setDevServer(null))
     // Check browser status
-    if (session?.tools?.includes('browser')) {
+    if (session?.plugins?.includes('browser')) {
       checkBrowser(sessionId).then((r) => setBrowserActive(r.active)).catch((err) => { console.error('Browser check failed:', err); setBrowserActive(false) })
     } else {
       setBrowserActive(false)
     }
   }, [sessionId])
 
-  // 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?.tools?.length
-  const shouldPollMessages = !!sessionId && (isOrchestrated || isServerActive || isOngoingMonitored)
-  const messagesLenRef = useRef(messages.length)
-  messagesLenRef.current = messages.length
+  const isOngoingMonitored = appSettings.loopMode === 'ongoing' && !!session?.plugins?.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 +167,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) => {
@@ -200,7 +212,7 @@ export function ChatArea() {
   }, [isServerActive, sessionId])
 
   // Poll browser status while session has browser tools
-  const hasBrowserTool = session?.tools?.includes('browser')
+  const hasBrowserTool = session?.plugins?.includes('browser')
   const checkBrowserStatus = useCallback(() => {
     if (!sessionId || !hasBrowserTool) return
     checkBrowser(sessionId).then((r) => setBrowserActive(r.active)).catch(() => {})
@@ -235,7 +247,7 @@ export function ChatArea() {
   const handleDelete = useCallback(async () => {
     setConfirmDelete(false)
     if (!sessionId) return
-    await deleteSession(sessionId)
+    await deleteChat(sessionId)
     removeSessionFromStore(sessionId)
     setCurrentSession(null)
   }, [sessionId])
@@ -281,7 +293,6 @@ export function ChatArea() {
   if (!session) return null
 
   const streamingForThisSession = streaming && (!streamingSessionId || streamingSessionId === session.id)
-  const isMainChat = session.name === '__main__'
   const isEmpty = !messages.length && !streamingForThisSession && !messagesLoading
 
   return (
@@ -386,15 +397,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)}
@@ -438,11 +453,9 @@ export function ChatArea() {
         <DropdownItem onClick={() => { setMenuOpen(false); setConfirmClear(true) }}>
           Clear History
         </DropdownItem>
-        {!isMainChat && (
-          <DropdownItem danger onClick={() => { setMenuOpen(false); setConfirmDelete(true) }}>
-            Delete Chat
-          </DropdownItem>
-        )}
+        <DropdownItem danger onClick={() => { setMenuOpen(false); setConfirmDelete(true) }}>
+          Delete Chat
+        </DropdownItem>
       </Dropdown>
 
       <ConfirmDialog
@@ -500,9 +513,8 @@ export function ChatArea() {
         agent={currentAgent}
         onEditAgent={() => { setEditingAgentId(session.agentId!); setAgentSheetOpen(true) }}
         onClearHistory={() => setConfirmClear(true)}
-        onDeleteAgent={!isMainChat ? () => setConfirmDeleteAgent(true) : undefined}
-        onDeleteChat={!isMainChat ? () => setConfirmDelete(true) : undefined}
-        isMainChat={isMainChat}
+        onDeleteAgent={() => setConfirmDeleteAgent(true)}
+        onDeleteChat={() => setConfirmDelete(true)}
       />
     )}
     {isDesktop && heartbeatHistoryOpen && currentAgent?.heartbeatEnabled && (

package/src/components/{sessions/session-card.tsx → chat/chat-card.tsx}

@@ -34,7 +34,7 @@ interface Props {
   onClick: () => void
 }
 
-export function SessionCard({ session, active, onClick }: Props) {
+export function ChatCard({ session, active, onClick }: Props) {
   const removeSession = useAppStore((s) => s.removeSession)
   const appSettings = useAppStore((s) => s.appSettings)
   const agents = useAppStore((s) => s.agents)
@@ -50,7 +50,7 @@ export function SessionCard({ session, active, onClick }: Props) {
     if (!confirm(`Delete chat session "${session.name}"?`)) return
     
     try {
-      await api('DELETE', `/sessions/${session.id}`)
+      await api('DELETE', `/chats/${session.id}`)
       removeSession(session.id)
       toast.success('Session deleted')
     } catch (err: unknown) {
@@ -66,6 +66,9 @@ export function SessionCard({ 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
@@ -74,7 +77,7 @@ export function SessionCard({ session, active, onClick }: Props) {
   const intervalEnabled = Number.isFinite(intervalNum) ? intervalNum > 0 : true
   const heartbeatEnabled =
     (loopIsOngoing || explicitOptIn)
-    && (session.tools?.length ?? 0) > 0
+    && (session.plugins?.length ?? 0) > 0
     && intervalEnabled
     && session.heartbeatEnabled !== false
     && agent?.heartbeatEnabled !== false
@@ -109,26 +112,7 @@ export function SessionCard({ 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}