@swarmclawai/swarmclaw 0.4.0 → 0.5.0

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

@@ -1,12 +1,16 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { Message } from '@/types'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
 import { ThinkingIndicator } from './thinking-indicator'
+import { SuggestionsBar } from './suggestions-bar'
+import { ExecApprovalCard } from './exec-approval-card'
+import { useApprovalStore } from '@/stores/use-approval-store'
 
 function dateSeparator(ts: number): string {
   const d = new Date(ts)
@@ -26,14 +30,19 @@ interface Props {
 export function MessageList({ messages, streaming }: Props) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
-  const needsSnapRef = useRef(true)
+  const snapUntilRef = useRef(0)
   const prevSessionIdRef = useRef<string | null>(null)
-  const streamText = useChatStore((s) => s.streamText)
+  const displayText = useChatStore((s) => s.displayText)
+  const setMessages = useChatStore((s) => s.setMessages)
   const retryLastMessage = useChatStore((s) => s.retryLastMessage)
+  const editAndResend = useChatStore((s) => s.editAndResend)
+  const sendMessage = useChatStore((s) => s.sendMessage)
+  const forkSession = useAppStore((s) => s.forkSession)
   const session = useAppStore((s) => {
     const id = s.currentSessionId
     return id ? s.sessions[id] : null
   })
+  const sessionId = session?.id ?? null
   const agents = useAppStore((s) => s.agents)
   const agent = session?.agentId ? agents[session.agentId] : null
   const appSettings = useAppStore((s) => s.appSettings)
@@ -49,6 +58,37 @@ export function MessageList({ messages, streaming }: Props) {
   const [unreadCount, setUnreadCount] = useState(0)
   const prevMsgCountRef = useRef(messages.length)
 
+  // Bookmark filter
+  const [bookmarkFilter, setBookmarkFilter] = useState(false)
+
+  const toggleBookmark = useCallback(async (index: number) => {
+    if (!sessionId) return
+    const msg = messages[index]
+    if (!msg) return
+    const next = !msg.bookmarked
+    try {
+      await api('PUT', `/sessions/${sessionId}/messages`, { messageIndex: index, bookmarked: next })
+      const updated = [...messages]
+      updated[index] = { ...updated[index], bookmarked: next }
+      setMessages(updated)
+    } catch (err: unknown) {
+      console.error('Failed to toggle bookmark:', err instanceof Error ? err.message : String(err))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId, messages])
+
+  const handleEditResend = useCallback(async (index: number, newText: string) => {
+    if (!sessionId || !editAndResend) return
+    await editAndResend(index, newText)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const handleFork = useCallback(async (index: number) => {
+    if (!sessionId || !forkSession) return
+    await forkSession(sessionId, index)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
   // In-thread search
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
@@ -56,9 +96,9 @@ export function MessageList({ messages, streaming }: Props) {
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   const isHeartbeatMessage = (msg: Message) =>
-    msg.role === 'assistant' && (msg.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(msg.text || ''))
+    msg.role === 'assistant' && (msg.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(msg.text || '') || /^\s*NO_MESSAGE\b/i.test(msg.text || ''))
   const isHeartbeatOk = (msg: Message) =>
-    msg.suppressed === true || (msg.kind === 'heartbeat' && /^\s*HEARTBEAT_OK\b/i.test(msg.text || ''))
+    msg.suppressed === true || (msg.kind === 'heartbeat' && (/^\s*HEARTBEAT_OK\b/i.test(msg.text || '') || /^\s*NO_MESSAGE\b/i.test(msg.text || '')))
 
   const displayedMessages: Message[] = []
   for (const msg of messages) {
@@ -79,9 +119,14 @@ export function MessageList({ messages, streaming }: Props) {
     }
   }
 
+  // Apply bookmark filter
+  const filteredMessages = bookmarkFilter
+    ? displayedMessages.filter((msg) => msg.bookmarked)
+    : displayedMessages
+
   // Search matches
   const searchMatches = searchQuery.trim()
-    ? displayedMessages
+    ? filteredMessages
         .map((msg, i) => ({ msg, i }))
         .filter(({ msg }) => msg.text.toLowerCase().includes(searchQuery.toLowerCase()))
     : []
@@ -99,6 +144,10 @@ export function MessageList({ messages, streaming }: Props) {
     const nearBottom = isNearBottom(el)
     wasAtBottomRef.current = nearBottom
     setShowScrollToBottom(!nearBottom)
+    // Cancel snap window if user manually scrolls away
+    if (!nearBottom && Date.now() < snapUntilRef.current) {
+      snapUntilRef.current = 0
+    }
     if (nearBottom && unreadRef.current > 0) {
       unreadRef.current = 0
       setUnreadCount(0)
@@ -115,31 +164,52 @@ export function MessageList({ messages, streaming }: Props) {
     }
   }, [messages.length, isNearBottom])
 
-  // Detect session switch during render (no extra useEffect, no dep-array mismatch)
-  const sessionId = session?.id ?? null
-  if (sessionId !== prevSessionIdRef.current) {
-    prevSessionIdRef.current = sessionId
-    needsSnapRef.current = true
-    wasAtBottomRef.current = true
-  }
+  // Detect session switch — set snap window and reset scroll state.
+  // Must fire before the scroll positioning layoutEffect below.
+  useLayoutEffect(() => {
+    if (sessionId !== prevSessionIdRef.current) {
+      prevSessionIdRef.current = sessionId
+      wasAtBottomRef.current = true
+      snapUntilRef.current = Date.now() + 2000
+    }
+  }, [sessionId])
 
-  useEffect(() => {
+  // Position scroll before paint — no setState here to avoid cascading renders.
+  // The onScroll handler and the state-update effect below handle UI state.
+  useLayoutEffect(() => {
     const el = scrollRef.current
-    if (!el) return
-    if (needsSnapRef.current && messages.length > 0) {
-      // First render after session switch — snap instantly, no visible scroll
-      needsSnapRef.current = false
+    if (!el || messages.length === 0) return
+
+    const snapping = Date.now() < snapUntilRef.current
+
+    if (snapping || wasAtBottomRef.current) {
       el.scrollTop = el.scrollHeight
-      setShowScrollToBottom(false)
       wasAtBottomRef.current = true
-      return
-    }
-    // Auto-scroll if user was at bottom before new content arrived
-    if (wasAtBottomRef.current) {
-      el.scrollTop = el.scrollHeight
     }
+  }, [messages.length, displayText])
+
+  // Update scroll-related UI state after render (separate from layoutEffect to avoid cascading)
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el || messages.length === 0) return
     updateScrollState()
-  }, [messages.length, streamText, isNearBottom, updateScrollState])
+  }, [messages.length, displayText, updateScrollState])
+
+  // Re-snap when content resizes during snap window (lazy images increasing scrollHeight)
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const content = el.firstElementChild as HTMLElement | null
+    if (!content) return
+
+    const observer = new ResizeObserver(() => {
+      if (Date.now() < snapUntilRef.current || wasAtBottomRef.current) {
+        el.scrollTop = el.scrollHeight
+      }
+    })
+    observer.observe(content)
+    return () => observer.disconnect()
+  }, [sessionId])
 
   const handleScrollToBottom = useCallback(() => {
     const el = scrollRef.current
@@ -179,7 +249,7 @@ export function MessageList({ messages, streaming }: Props) {
   }, [searchOpen])
 
   return (
-    <div className="relative flex-1 min-h-0">
+    <div className="relative flex-1 min-h-0 min-w-0">
       {/* In-thread search bar */}
       {searchOpen && (
         <div className="absolute top-0 left-0 right-0 z-20 flex items-center gap-2 px-6 md:px-12 lg:px-16 py-2 bg-surface/95 backdrop-blur-sm border-b border-white/[0.06]">
@@ -224,6 +294,15 @@ export function MessageList({ messages, streaming }: Props) {
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m6 9 6 6 6-6" /></svg>
           </button>
+          <button
+            onClick={() => setBookmarkFilter((v) => !v)}
+            aria-label={bookmarkFilter ? 'Show all messages' : 'Show bookmarked only'}
+            className={`p-1 rounded-[6px] hover:bg-white/[0.04] cursor-pointer border-none bg-transparent transition-colors ${bookmarkFilter ? 'text-[#F59E0B]' : 'text-text-3 hover:text-text-2'}`}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill={bookmarkFilter ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+            </svg>
+          </button>
           <button
             onClick={() => { setSearchOpen(false); setSearchQuery(''); setSearchIdx(0) }}
             aria-label="Close search"
@@ -240,14 +319,16 @@ export function MessageList({ messages, streaming }: Props) {
         className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6"
       >
         <div className="flex flex-col gap-6">
-          {displayedMessages.map((msg, i) => {
+          {filteredMessages.map((msg, i) => {
+            // Find original index in the full messages array for API calls
+            const originalIndex = messages.indexOf(msg)
             const isLastAssistant = msg.role === 'assistant' && !streaming
-              && displayedMessages.slice(i + 1).every((m) => m.role !== 'assistant')
+              && filteredMessages.slice(i + 1).every((m) => m.role !== 'assistant')
             const isSearchMatch = searchQuery && searchMatches.some((m) => m.i === i)
             const isCurrentMatch = searchQuery && searchMatches[searchIdx]?.i === i
 
             // Date separator
-            const prevMsg = i > 0 ? displayedMessages[i - 1] : null
+            const prevMsg = i > 0 ? filteredMessages[i - 1] : null
             const showDateSep = msg.time && (!prevMsg?.time || new Date(msg.time).toDateString() !== new Date(prevMsg.time).toDateString())
 
             return (
@@ -265,15 +346,25 @@ export function MessageList({ messages, streaming }: Props) {
                   <MessageBubble
                     message={msg}
                     assistantName={assistantName}
+                    agentAvatarSeed={agent?.avatarSeed}
+                    agentName={agent?.name}
                     isLast={isLastAssistant}
                     onRetry={isLastAssistant ? retryLastMessage : undefined}
+                    messageIndex={originalIndex >= 0 ? originalIndex : undefined}
+                    onToggleBookmark={toggleBookmark}
+                    onEditResend={handleEditResend}
+                    onFork={handleFork}
                   />
                 </div>
               </div>
             )
           })}
-          {streaming && !streamText && <ThinkingIndicator assistantName={assistantName} />}
-          {streaming && streamText && <StreamingBubble text={streamText} assistantName={assistantName} />}
+          <ApprovalCards agentId={agent?.id} />
+          {streaming && !displayText && <ThinkingIndicator assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentName={agent?.name} />}
+          {streaming && displayText && <StreamingBubble text={displayText} assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentName={agent?.name} />}
+          {!streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
+            <SuggestionsBar lastMessage={filteredMessages[filteredMessages.length - 1]} onSend={sendMessage} />
+          )}
         </div>
       </div>
       {showScrollToBottom && (
@@ -297,3 +388,16 @@ export function MessageList({ messages, streaming }: Props) {
     </div>
   )
 }
+
+function ApprovalCards({ agentId }: { agentId?: string | null }) {
+  const approvals = useApprovalStore((s) => s.approvals)
+  const cards = Object.values(approvals).filter((a) => !agentId || a.agentId === agentId)
+  if (!cards.length) return null
+  return (
+    <>
+      {cards.map((a) => (
+        <ExecApprovalCard key={a.id} approval={a} />
+      ))}
+    </>
+  )
+}

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

@@ -1,22 +1,72 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import { AiAvatar } from '@/components/shared/avatar'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { CodeBlock } from './code-block'
 import { ToolCallBubble } from './tool-call-bubble'
-import { useChatStore } from '@/stores/use-chat-store'
+import { useChatStore, type ToolEvent } from '@/stores/use-chat-store'
+
+function ToolEventsSection({ toolEvents }: { toolEvents: ToolEvent[] }) {
+  const [expanded, setExpanded] = useState(false)
+  const shouldCollapse = toolEvents.length > 2
+  const latestTool = toolEvents[toolEvents.length - 1]
+
+  if (shouldCollapse && !expanded) {
+    return (
+      <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+        <button
+          type="button"
+          onClick={() => setExpanded(true)}
+          className="self-start flex items-center gap-2 px-3 py-1.5 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] border border-white/[0.06] cursor-pointer transition-colors"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+          <span className="text-[11px] text-text-3 font-mono">
+            {toolEvents.length} tool calls
+          </span>
+          <span className="text-[10px] text-text-3/50">
+            latest: {latestTool?.name || 'unknown'}
+          </span>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+      {shouldCollapse && (
+        <button
+          type="button"
+          onClick={() => setExpanded(false)}
+          className="self-start px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-[11px] text-text-3 border border-white/[0.06] cursor-pointer transition-colors"
+        >
+          Collapse tool calls
+        </button>
+      )}
+      {toolEvents.map((event) => (
+        <ToolCallBubble key={event.id} event={event} />
+      ))}
+    </div>
+  )
+}
 
 interface Props {
   text: string
   assistantName?: string
+  agentAvatarSeed?: string
+  agentName?: string
 }
 
-export function StreamingBubble({ text, assistantName }: Props) {
+export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentName }: Props) {
   const rendered = useMemo(() => text, [text])
   const toolEvents = useChatStore((s) => s.toolEvents)
+  const streamPhase = useChatStore((s) => s.streamPhase)
+  const streamToolName = useChatStore((s) => s.streamToolName)
 
   return (
     <div
@@ -24,18 +74,17 @@ export function StreamingBubble({ text, assistantName }: Props) {
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}
     >
       <div className="flex items-center gap-2.5 mb-2 px-1">
-        <AiAvatar size="sm" />
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={36} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
         <span className="w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
+        {streamPhase === 'tool' && streamToolName && (
+          <span className="text-[10px] text-text-3/50 font-mono">Using {streamToolName}...</span>
+        )}
       </div>
 
-      {/* Tool call events */}
+      {/* Tool call events (collapsible when > 2) */}
       {toolEvents.length > 0 && (
-        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
-          {toolEvents.map((event) => (
-            <ToolCallBubble key={event.id} event={event} />
-          ))}
-        </div>
+        <ToolEventsSection toolEvents={toolEvents} />
       )}
 
       {rendered && (

package/src/components/chat/suggestions-bar.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import type { Message } from '@/types'
+
+interface Props {
+  lastMessage: Message | null
+  onSend: (text: string) => void
+}
+
+function getSuggestions(msg: Message | null): string[] {
+  if (!msg?.text) return ['Continue', 'Tell me more']
+  const text = msg.text
+
+  // Error patterns
+  if (/error|exception|failed|traceback|panic|ECONNREFUSED|ETIMEDOUT/i.test(text)) {
+    return ['Can you fix this?', 'Try an alternative approach', 'Explain the error']
+  }
+
+  // Code blocks present
+  if (/```[\s\S]*```/.test(text)) {
+    return ['Explain this code', 'Write tests for this', 'Any improvements?']
+  }
+
+  // File mentions
+  if (/`\/[\w./-]+\.\w+`/.test(text) || /\b(created|modified|updated|wrote|saved)\b.*\b(file|files)\b/i.test(text)) {
+    return ['Show me the file', 'Make changes to it', 'What else needs updating?']
+  }
+
+  // Task completion signals
+  if (/\b(done|complete|finished|ready|all set|successfully)\b/i.test(text)) {
+    return ["What's next?", 'Summarize what was done', 'Any remaining issues?']
+  }
+
+  // Question asked by assistant
+  if (/\?\s*$/.test(text.trim())) {
+    return ['Yes, go ahead', 'No, try a different approach', 'Tell me more about the options']
+  }
+
+  // List/steps presented
+  if (/^\s*(\d+\.|[-*])\s/m.test(text)) {
+    return ['Start with the first step', 'Can you elaborate?', 'Any alternatives?']
+  }
+
+  return ['Continue', 'Tell me more', 'Can you explain further?']
+}
+
+export function SuggestionsBar({ lastMessage, onSend }: Props) {
+  const suggestions = lastMessage?.suggestions?.length === 3
+    ? lastMessage.suggestions
+    : getSuggestions(lastMessage)
+
+  if (!suggestions.length) return null
+
+  return (
+    <div
+      className="flex flex-wrap gap-2 px-1 pt-2"
+      style={{ animation: 'fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}
+    >
+      {suggestions.map((text) => (
+        <button
+          key={text}
+          type="button"
+          onClick={() => onSend(text)}
+          className="rounded-full px-3.5 py-1.5 text-[12px] font-500 border border-white/[0.06] bg-white/[0.03]
+            text-text-3 hover:text-text-2 hover:bg-white/[0.06] hover:border-white/[0.10]
+            cursor-pointer transition-all active:scale-[0.97]"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/chat/thinking-indicator.tsx

@@ -1,24 +1,38 @@
 'use client'
 
 import { AiAvatar } from '@/components/shared/avatar'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { useChatStore } from '@/stores/use-chat-store'
 
 interface Props {
   assistantName?: string
+  agentAvatarSeed?: string
+  agentName?: string
 }
 
-export function ThinkingIndicator({ assistantName }: Props) {
+export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }: Props) {
+  const streamPhase = useChatStore((s) => s.streamPhase)
+  const streamToolName = useChatStore((s) => s.streamToolName)
+
+  const statusText = streamPhase === 'tool' && streamToolName
+    ? `Using ${streamToolName}...`
+    : 'Thinking...'
+
   return (
     <div className="flex flex-col items-start"
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}>
       <div className="flex items-center gap-2.5 mb-2 px-1">
-        <AiAvatar size="sm" />
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={36} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
       </div>
       <div className="bubble-ai px-6 py-5">
-        <div className="flex gap-2">
-          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
-          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
-          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+        <div className="flex items-center gap-3">
+          <div className="flex gap-2">
+            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+          </div>
+          <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
         </div>
       </div>
     </div>