@swarmclawai/swarmclaw 0.7.3 → 0.7.5

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

@@ -80,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) {
@@ -113,44 +114,64 @@ 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 sessions that are actively running on the server
   const isServerActive = session?.active === true
@@ -424,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 && (
@@ -450,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'
@@ -72,7 +73,7 @@ export function ChatCard({ session, active, onClick }: Props) {
   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 =

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

@@ -1,5 +1,6 @@
 'use client'
 
+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 { useAppStore } from '@/stores/use-app-store'
@@ -113,8 +114,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const toggleTts = useChatStore((s) => s.toggleTts)
   const soundEnabled = useChatStore((s) => s.soundEnabled)
   const toggleSound = useChatStore((s) => s.toggleSound)
-  const debugOpen = useChatStore((s) => s.debugOpen)
-  const setDebugOpen = useChatStore((s) => s.setDebugOpen)
   const agentStatus = useChatStore((s) => s.agentStatus)
   const agents = useAppStore((s) => s.agents)
   const tasks = useAppStore((s) => s.tasks)
@@ -337,7 +336,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
       return null
     }
     // Global defaults
-    let sec = resolveFrom(appSettings) ?? 1800
+    let sec = resolveFrom(appSettings) ?? DEFAULT_HEARTBEAT_INTERVAL_SEC
     let enabled = sec > 0
     let explicitOptIn = false
     // Agent layer
@@ -739,6 +738,9 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                       onChange={(m) => void handleModelSwitch(session.provider, m)}
                       models={currentModels}
                       defaultModels={currentProviderInfo?.defaultModels}
+                      credentialId={session.credentialId}
+                      apiEndpoint={session.apiEndpoint}
+                      supportsDiscovery={currentProviderInfo?.supportsModelDiscovery}
                       className="px-2.5 py-1.5 rounded-[7px] text-[12px] font-mono bg-white/[0.04] hover:bg-white/[0.06] transition-colors"
                     />
                   </div>
@@ -886,18 +888,11 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
             </IconButton>
           )}
           <div className="w-px h-3.5 bg-white/[0.06] mx-0.5" />
-          <IconButton onClick={() => setDebugOpen(!debugOpen)} active={debugOpen} tooltip="Debug" aria-label="Toggle debug panel" size="sm">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <path d="M12 20V10" /><path d="M18 20V4" /><path d="M6 20v-4" />
+          <IconButton onClick={(e) => { e.stopPropagation(); onMenuToggle() }} tooltip="More" aria-label="Chat menu" size="sm">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+              <circle cx="12" cy="6" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="12" cy="18" r="1" />
             </svg>
           </IconButton>
-          {(!agent || mobile) && (
-            <IconButton onClick={(e) => { e.stopPropagation(); onMenuToggle() }} tooltip="Menu" aria-label="Chat menu" size="sm">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
-                <circle cx="12" cy="6" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="12" cy="18" r="1" />
-              </svg>
-            </IconButton>
-          )}
           {agent && (
             <IconButton onClick={() => setInspectorOpen(!inspectorOpen)} active={inspectorOpen} tooltip="Settings" aria-label="Toggle inspector" size="sm">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">

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

@@ -8,13 +8,14 @@ import { fetchMessages } from '@/lib/chats'
 import { toast } from 'sonner'
 import { Skeleton } from '@/components/shared/skeleton'
 import { EmptyState } from '@/components/shared/empty-state'
+import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 
 interface Props {
   inSidebar?: boolean
   onSelect?: () => void
 }
 
-type SessionFilter = 'all' | 'active'
+type SessionFilter = 'all' | 'active' | 'unread'
 type SortMode = 'lastActive' | 'name' | 'messages'
 
 export function ChatList({ inSidebar, onSelect }: Props) {
@@ -28,11 +29,15 @@ export function ChatList({ inSidebar, onSelect }: Props) {
   const clearSessions = useAppStore((s) => s.clearSessions)
   const togglePinSession = useAppStore((s) => s.togglePinSession)
   const markChatRead = useAppStore((s) => s.markChatRead)
+  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')
   const [loaded, setLoaded] = useState(Object.keys(sessions).length > 0)
+  const [bulkMenuOpen, setBulkMenuOpen] = useState(false)
 
   useEffect(() => {
     if (Object.keys(sessions).length > 0 && !loaded) setLoaded(true)
@@ -56,8 +61,32 @@ export function ChatList({ inSidebar, onSelect }: Props) {
   const filtered = useMemo(() => {
     return allUserSessions
       .filter((s) => {
-        if (search && !s.name.toLowerCase().includes(search.toLowerCase())) return false
+        const unreadCount = (s.messages || []).filter(
+          (m) => m.role === 'assistant' && (m.time || 0) > (lastReadTimestamps[s.id] || 0),
+        ).length
+        if (search) {
+          const agent = s.agentId ? agents[s.agentId] : null
+          const connector = Object.values(connectors).find((item) => item.chatroomId == null && item.agentId === s.agentId && item.isEnabled !== false)
+          const lastMessage = s.messages?.[s.messages.length - 1]
+          const haystack = [
+            s.name,
+            agent?.name,
+            s.provider,
+            s.model,
+            s.cwd,
+            connector?.name,
+            connector?.platform,
+            lastMessage?.text,
+            lastMessage?.source?.senderName,
+            lastMessage?.source?.platform,
+          ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase()
+          if (!haystack.includes(search.toLowerCase())) return false
+        }
         if (typeFilter === 'active' && !s.active) return false
+        if (typeFilter === 'unread' && unreadCount === 0) return false
         return true
       })
       .sort((a, b) => {
@@ -69,7 +98,7 @@ export function ChatList({ inSidebar, onSelect }: Props) {
         if (sortMode === 'messages') return (b.messages?.length || 0) - (a.messages?.length || 0)
         return (b.lastActiveAt || 0) - (a.lastActiveAt || 0)
       })
-  }, [allUserSessions, search, typeFilter, sortMode])
+  }, [agents, allUserSessions, connectors, lastReadTimestamps, search, sortMode, typeFilter])
 
   const handleSelect = async (id: string) => {
     setCurrentSession(id)
@@ -123,7 +152,7 @@ export function ChatList({ inSidebar, onSelect }: Props) {
     <div className="flex-1 flex flex-col overflow-y-auto">
       {/* Filter tabs — always visible when sessions exist */}
       <div className="flex items-center gap-1 px-4 pt-2 pb-1 shrink-0">
-        {(['all', 'active'] as SessionFilter[]).map((f) => (
+        {(['all', 'active', 'unread'] as SessionFilter[]).map((f) => (
           <button
             key={f}
             onClick={() => setTypeFilter(f)}
@@ -131,25 +160,34 @@ export function ChatList({ inSidebar, onSelect }: Props) {
               ${typeFilter === f ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
             style={{ fontFamily: 'inherit' }}
           >
-            {f === 'all' ? 'All' : 'Active'}
+            {f === 'all' ? 'All' : f === 'active' ? 'Active' : 'Unread'}
           </button>
         ))}
         {filtered.length > 0 && (
-          <button
-            onClick={async () => {
-              if (!window.confirm(`Delete ${filtered.length} chat${filtered.length === 1 ? '' : 's'}?`)) return
-              await clearSessions(filtered.map((s) => s.id))
-              toast.success(`${filtered.length} chat${filtered.length === 1 ? '' : 's'} deleted`)
-            }}
-            className="ml-auto p-1.5 rounded-[8px] text-text-3/70 hover:text-red-400 hover:bg-red-400/[0.06]
-              cursor-pointer transition-all bg-transparent border-none"
-            title="Clear all chats"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-              <path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-            </svg>
-          </button>
+          <div className="ml-auto relative">
+            <button
+              onClick={() => setBulkMenuOpen((open) => !open)}
+              className="p-1.5 rounded-[8px] text-text-3/70 hover:text-text-2 hover:bg-white/[0.04]
+                cursor-pointer transition-all bg-transparent border-none"
+              title="More actions"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="5" cy="12" r="1.75" />
+                <circle cx="12" cy="12" r="1.75" />
+                <circle cx="19" cy="12" r="1.75" />
+              </svg>
+            </button>
+            <Dropdown open={bulkMenuOpen} onClose={() => setBulkMenuOpen(false)}>
+              <DropdownItem onClick={async () => {
+                setBulkMenuOpen(false)
+                if (!window.confirm(`Delete ${filtered.length} chat${filtered.length === 1 ? '' : 's'}?`)) return
+                await clearSessions(filtered.map((s) => s.id))
+                toast.success(`${filtered.length} chat${filtered.length === 1 ? '' : 's'} deleted`)
+              }}>
+                Clear filtered chats
+              </DropdownItem>
+            </Dropdown>
+          </div>
         )}
       </div>
 

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

@@ -1,6 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { DEFAULT_HEARTBEAT_SHOW_ALERTS, DEFAULT_HEARTBEAT_SHOW_OK } from '@/lib/heartbeat-defaults'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { Message } from '@/types'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
@@ -50,9 +51,10 @@ interface Props {
   messages: Message[]
   streaming: boolean
   connectorFilter?: string | null
+  loading?: boolean
 }
 
-export function MessageList({ messages, streaming, connectorFilter = null }: Props) {
+export function MessageList({ messages, streaming, connectorFilter = null, loading = false }: Props) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
   const snapUntilRef = useRef(0)
@@ -79,8 +81,8 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
     || (session?.provider === 'claude-cli' ? undefined : session?.model || session?.provider)
     || undefined
 
-  const showOk = appSettings.heartbeatShowOk ?? false
-  const showAlerts = appSettings.heartbeatShowAlerts ?? true
+  const showOk = appSettings.heartbeatShowOk ?? DEFAULT_HEARTBEAT_SHOW_OK
+  const showAlerts = appSettings.heartbeatShowAlerts ?? DEFAULT_HEARTBEAT_SHOW_ALERTS
 
   // Gateway disconnect overlay for openclaw agents
   const isOpenClaw = agent?.provider === 'openclaw'
@@ -157,6 +159,10 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
   const [searchQuery, setSearchQuery] = useState('')
   const [searchIdx, setSearchIdx] = useState(0)
   const searchInputRef = useRef<HTMLInputElement>(null)
+  const openSearch = useCallback(() => {
+    setSearchOpen(true)
+    setTimeout(() => searchInputRef.current?.focus(), 50)
+  }, [])
 
   const isHeartbeatMessage = (msg: Message) =>
     msg.role === 'assistant' && (msg.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(msg.text || '') || /^\s*NO_MESSAGE\b/i.test(msg.text || ''))
@@ -192,11 +198,13 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
   }
 
   // Search matches
-  const searchMatches = searchQuery.trim()
-    ? filteredMessages
-        .map((msg, i) => ({ msg, i }))
-        .filter(({ msg }) => msg.text.toLowerCase().includes(searchQuery.toLowerCase()))
-    : []
+  const searchMatches = useMemo(() => {
+    const normalizedQuery = searchQuery.trim().toLowerCase()
+    if (!normalizedQuery) return []
+    return filteredMessages
+      .map((msg, i) => ({ msg, i }))
+      .filter(({ msg }) => msg.text.toLowerCase().includes(normalizedQuery))
+  }, [filteredMessages, searchQuery])
 
   // Track whether user is at/near bottom so we know whether to auto-scroll on new content
   const wasAtBottomRef = useRef(true)
@@ -311,6 +319,15 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
     return () => window.removeEventListener('swarmclaw:scroll-to-message', handler)
   }, [])
 
+  useEffect(() => {
+    if (!searchQuery || !searchMatches.length) return
+    const currentMatch = searchMatches[searchIdx]
+    if (!currentMatch) return
+    const el = scrollRef.current?.querySelector(`[data-message-index="${currentMatch.i}"]`) as HTMLElement | null
+    if (!el) return
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, [searchIdx, searchMatches, searchQuery])
+
   // Ctrl+F search toggle
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -334,9 +351,81 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
 
   return (
     <div className="relative flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden">
+      <div className="shrink-0 px-4 md:px-12 lg:px-16 pt-3">
+        <div className="flex flex-wrap items-center gap-2 rounded-[14px] border border-white/[0.06] bg-surface/55 px-3 py-2 backdrop-blur-sm">
+          <button
+            type="button"
+            onClick={() => {
+              if (searchOpen) {
+                setSearchOpen(false)
+                setSearchQuery('')
+                setSearchIdx(0)
+              } else {
+                openSearch()
+              }
+            }}
+            className={`inline-flex items-center gap-1.5 rounded-[9px] border px-2.5 py-1.5 text-[11px] font-600 transition-colors cursor-pointer ${
+              searchOpen
+                ? 'border-accent-bright/25 bg-accent-soft/60 text-accent-bright'
+                : 'border-white/[0.06] bg-white/[0.03] text-text-3 hover:text-text-2 hover:bg-white/[0.06]'
+            }`}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            Find
+            <span className="hidden sm:inline text-text-3/50">Cmd/Ctrl+F</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setBookmarkFilter((v) => !v)}
+            className={`inline-flex items-center gap-1.5 rounded-[9px] border px-2.5 py-1.5 text-[11px] font-600 transition-colors cursor-pointer ${
+              bookmarkFilter
+                ? 'border-amber-400/25 bg-amber-500/10 text-amber-300'
+                : 'border-white/[0.06] bg-white/[0.03] text-text-3 hover:text-text-2 hover:bg-white/[0.06]'
+            }`}
+          >
+            <svg width="12" height="12" 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>
+            {bookmarkFilter ? 'Bookmarked' : 'Bookmarks'}
+          </button>
+          {(searchQuery || bookmarkFilter) && (
+            <button
+              type="button"
+              onClick={() => {
+                setSearchOpen(false)
+                setSearchQuery('')
+                setSearchIdx(0)
+                setBookmarkFilter(false)
+              }}
+              className="inline-flex items-center gap-1.5 rounded-[9px] border border-white/[0.06] bg-transparent px-2.5 py-1.5 text-[11px] font-600 text-text-3 hover:text-text-2 hover:bg-white/[0.04] cursor-pointer transition-colors"
+            >
+              Reset filters
+            </button>
+          )}
+          <div className="ml-auto flex items-center gap-2 text-[11px] text-text-3/60">
+            {searchQuery ? (
+              <span className="tabular-nums">
+                {searchMatches.length > 0 ? `${searchIdx + 1}/${searchMatches.length}` : '0 results'}
+              </span>
+            ) : (
+              <span>{filteredMessages.length} message{filteredMessages.length === 1 ? '' : 's'}</span>
+            )}
+            {loading && (
+              <span className="inline-flex items-center gap-1.5 rounded-full bg-white/[0.04] px-2 py-1 text-text-3/70">
+                <span className="w-2 h-2 rounded-full bg-accent-bright animate-pulse" />
+                Loading thread
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
       {/* 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]">
+        <div className="shrink-0 z-20 flex items-center gap-2 px-4 md:px-12 lg:px-16 py-2 bg-surface/95 backdrop-blur-sm border-b border-white/[0.06]">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
             <circle cx="11" cy="11" r="8" />
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
@@ -401,7 +490,7 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
       <div
         ref={scrollRef}
         onScroll={updateScrollState}
-        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 md:px-12 lg:px-16 pt-6 pb-[120px] md:pb-10 fade-up"
+        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 md:px-12 lg:px-16 pt-4 pb-[120px] md:pb-10 fade-up"
       >
         <div className="flex flex-col gap-6 relative">
           {/* Chat spine — vertical line for assistant messages */}
@@ -442,13 +531,48 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
             </div>
           )}
           {filteredMessages.length === 0 && !streaming && (
-            <div className="flex flex-col items-center justify-center gap-3 py-20 text-center" style={{ animation: 'fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' }}>
-              <AgentAvatar seed={agent?.avatarSeed || null} avatarUrl={agent?.avatarUrl} name={agent?.name || 'Agent'} size={48} />
-              <span className="font-display text-[16px] font-600 text-text-2">{agent?.name || 'Assistant'}</span>
-              <span className="text-[14px] text-text-3/60">
-                {INTRO_GREETINGS[stableHash(agent?.id || session?.id || '') % INTRO_GREETINGS.length]}
-              </span>
-            </div>
+            searchQuery.trim() || bookmarkFilter || connectorFilter ? (
+              <div className="flex flex-col items-center justify-center gap-3 py-20 text-center">
+                <div className="w-12 h-12 rounded-full bg-white/[0.04] border border-white/[0.06] flex items-center justify-center">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" className="text-text-3/70">
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                  </svg>
+                </div>
+                <span className="font-display text-[16px] font-600 text-text-2">
+                  {bookmarkFilter ? 'No bookmarked messages here' : 'No messages match these filters'}
+                </span>
+                <span className="text-[13px] text-text-3/60 max-w-[360px]">
+                  {searchQuery.trim()
+                    ? `Nothing in this thread matches "${searchQuery.trim()}".`
+                    : connectorFilter
+                      ? 'Try another source filter or reset the thread filters.'
+                      : 'Try another keyword or turn off bookmarks-only mode.'}
+                </span>
+                {(searchQuery.trim() || bookmarkFilter) && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSearchOpen(false)
+                      setSearchQuery('')
+                      setSearchIdx(0)
+                      setBookmarkFilter(false)
+                    }}
+                    className="rounded-[10px] border border-white/[0.06] bg-white/[0.03] px-3 py-2 text-[12px] font-600 text-text-2 hover:bg-white/[0.06] cursor-pointer transition-colors"
+                  >
+                    Clear thread filters
+                  </button>
+                )}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-3 py-20 text-center" style={{ animation: 'fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' }}>
+                <AgentAvatar seed={agent?.avatarSeed || null} avatarUrl={agent?.avatarUrl} name={agent?.name || 'Agent'} size={48} />
+                <span className="font-display text-[16px] font-600 text-text-2">{agent?.name || 'Assistant'}</span>
+                <span className="text-[14px] text-text-3/60">
+                  {INTRO_GREETINGS[stableHash(agent?.id || session?.id || '') % INTRO_GREETINGS.length]}
+                </span>
+              </div>
+            )
           )}
           {filteredMessages.map((msg, i) => {
             // Context-clear divider — render a visual separator instead of a bubble