@swarmclawai/swarmclaw 0.7.2 → 0.7.4

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' | 'human' | 'orchestrated'
+type SessionFilter = 'all' | 'active' | 'unread'
 type SortMode = 'lastActive' | 'name' | 'messages'
 
 export function ChatList({ inSidebar, onSelect }: Props) {
@@ -24,15 +25,19 @@ export function ChatList({ inSidebar, onSelect }: Props) {
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const loadSessions = useAppStore((s) => s.loadSessions)
   const loadConnectors = useAppStore((s) => s.loadConnectors)
-  const setNewSessionOpen = useAppStore((s) => s.setNewSessionOpen)
+  const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   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,10 +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 === 'human' && s.sessionType === 'orchestrated') return false
-        if (typeFilter === 'orchestrated' && s.sessionType !== 'orchestrated') return false
+        if (typeFilter === 'unread' && unreadCount === 0) return false
         return true
       })
       .sort((a, b) => {
@@ -71,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)
@@ -115,8 +142,8 @@ export function ChatList({ inSidebar, onSelect }: Props) {
           </svg>
         }
         title="No chats yet"
-        subtitle="Create one to start chatting"
-        action={!inSidebar ? { label: '+ New Chat', onClick: () => setNewSessionOpen(true) } : undefined}
+        subtitle="Create an agent to open its persistent thread"
+        action={!inSidebar ? { label: '+ New Agent', onClick: () => setAgentSheetOpen(true) } : undefined}
       />
     )
   }
@@ -125,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', 'human', 'orchestrated'] as SessionFilter[]).map((f) => (
+        {(['all', 'active', 'unread'] as SessionFilter[]).map((f) => (
           <button
             key={f}
             onClick={() => setTypeFilter(f)}
@@ -133,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' : f === 'active' ? 'Active' : f === 'human' ? 'Human' : 'AI'}
+            {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>
 
@@ -209,7 +245,7 @@ export function ChatList({ inSidebar, onSelect }: Props) {
       ) : (
         <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
           <p className="text-[13px] text-text-3/50">
-            No {typeFilter === 'orchestrated' ? 'AI' : typeFilter === 'active' ? 'active' : typeFilter} chats{search ? ` matching "${search}"` : ''}
+            No {typeFilter === 'active' ? 'active' : typeFilter} chats{search ? ` matching "${search}"` : ''}
           </p>
         </div>
       )}

package/src/components/chat/checkpoint-timeline.tsx

@@ -68,7 +68,7 @@ export function CheckpointTimeline({ sessionId }: Props) {
     return (
       <div className="p-8 text-center">
         <p className="text-text-3 text-[13px]">No checkpoints found for this chat.</p>
-        <p className="text-[11px] text-text-3/50 mt-1">Only LangGraph-orchestrated chats support time travel.</p>
+        <p className="text-[11px] text-text-3/50 mt-1">Checkpoint restore is only available when a backend created checkpoints for this chat.</p>
       </div>
     )
   }

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

@@ -1,10 +1,12 @@
 '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'
 import { api } from '@/lib/api-client'
+import { shouldHidePersistedStreamingAssistantMessage } from '@/lib/chat-streaming-state'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
@@ -49,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)
@@ -78,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'
@@ -156,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 || ''))
@@ -164,6 +171,7 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
 
   const displayedMessages: Message[] = []
   for (const msg of messages) {
+    if (shouldHidePersistedStreamingAssistantMessage(msg, { localStreaming: streaming, displayText })) continue
     const isHeartbeat = isHeartbeatMessage(msg)
 
     // Visibility filtering based on settings
@@ -190,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)
@@ -309,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) => {
@@ -332,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" />
@@ -399,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 */}
@@ -440,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
@@ -514,7 +640,7 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
 
             return (
               <div
-                key={`${sessionId}-${msg.time}-${i}`}
+                key={`${sessionId}-${msg.role}-${originalIndex >= 0 ? originalIndex : i}`}
                 data-message-index={i}
                 style={{
                   animation: `${msg.role === 'user' ? 'msg-in-right' : 'msg-in-left'} 0.4s var(--ease-spring) both`,

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

@@ -29,6 +29,16 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
   const removePendingFile = useChatroomStore((s) => s.removePendingFile)
   const replyingTo = useChatroomStore((s) => s.replyingTo)
   const setReplyingTo = useChatroomStore((s) => s.setReplyingTo)
+  const streaming = useChatroomStore((s) => s.streaming)
+  const queuedMessages = useChatroomStore((s) => s.queuedMessages)
+  const removeQueuedMessage = useChatroomStore((s) => s.removeQueuedMessage)
+
+  const resizeTextarea = useCallback(() => {
+    const node = inputRef.current
+    if (!node) return
+    node.style.height = 'auto'
+    node.style.height = `${Math.min(node.scrollHeight, 160)}px`
+  }, [])
 
   // Draft persistence: restore on chatroom change
   const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -38,6 +48,10 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
     setText(draft || '')
   }, [chatroomId])
 
+  useEffect(() => {
+    resizeTextarea()
+  }, [resizeTextarea, text, chatroomId])
+
   // Debounced save to localStorage
   useEffect(() => {
     if (!chatroomId) return
@@ -83,6 +97,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
 
   const handleChange = useCallback((value: string) => {
     setText(value)
+    resizeTextarea()
     const cursorPos = inputRef.current?.selectionStart || value.length
     const beforeCursor = value.slice(0, cursorPos)
     const mentionMatch = beforeCursor.match(/@(\S*)$/)
@@ -95,7 +110,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
       setMentionFilter('')
       setSelectedIndex(0)
     }
-  }, [])
+  }, [resizeTextarea])
 
   const insertMention = useCallback((name: string) => {
     const cursorPos = inputRef.current?.selectionStart || text.length
@@ -138,13 +153,23 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
     return parts.length > 0 ? parts : null
   }, [text])
 
-  const mentionDropdownVisible = showMentions && (filteredAgents.length > 0 || mentionFilter === '')
+  const mentionDropdownVisible = showMentions
   const mentionItems = mentionDropdownVisible
     ? ['all', ...filteredAgents.map((a) => a.name)]
     : []
+  const visibleQueuedMessages = queuedMessages.filter((item) => item.chatroomId === chatroomId)
+
+  const handleSendCurrent = useCallback(() => {
+    if ((!text.trim() && !pendingFiles.length) || disabled) return
+    onSend(text)
+    setText('')
+    resizeTextarea()
+    if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
+    setShowMentions(false)
+  }, [chatroomId, disabled, onSend, pendingFiles.length, resizeTextarea, text])
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (mentionDropdownVisible) {
+    if (mentionDropdownVisible && mentionItems.length > 0) {
       if (e.key === 'ArrowDown') {
         e.preventDefault()
         setSelectedIndex((i) => (i + 1) % mentionItems.length)
@@ -165,12 +190,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
 
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
-      if ((text.trim() || pendingFiles.length) && !disabled) {
-        onSend(text)
-        setText('')
-        if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
-        setShowMentions(false)
-      }
+      handleSendCurrent()
     }
     if (e.key === 'Escape') {
       if (replyingTo) {
@@ -195,21 +215,68 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
             <span className="text-[13px] text-text">all</span>
             <span className="text-[11px] text-text-3 ml-auto">Mention all agents</span>
           </button>
-          {filteredAgents.map((agent, i) => (
-            <button
-              key={agent.id}
-              onClick={() => insertMention(agent.name)}
-              className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-all cursor-pointer ${
-                selectedIndex === i + 1 ? 'bg-white/[0.08]' : 'hover:bg-white/[0.06]'
-              }`}
-            >
-              <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
-              <span className="text-[13px] text-text">{agent.name}</span>
-            </button>
+          {filteredAgents.length > 0 ? (
+            filteredAgents.map((agent, i) => (
+              <button
+                key={agent.id}
+                onClick={() => insertMention(agent.name)}
+                className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-all cursor-pointer ${
+                  selectedIndex === i + 1 ? 'bg-white/[0.08]' : 'hover:bg-white/[0.06]'
+                }`}
+              >
+                <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
+                <span className="text-[13px] text-text">{agent.name}</span>
+              </button>
+            ))
+          ) : (
+            <div className="px-3 py-3 text-[12px] text-text-3">
+              No agents match <span className="text-text">@{mentionFilter}</span>.
+            </div>
+          )}
+        </div>
+      )}
+
+      {visibleQueuedMessages.length > 0 && (
+        <div className="mb-2 flex flex-wrap items-center gap-1.5">
+          <span className="label-mono text-amber-400/70">Queued</span>
+          {visibleQueuedMessages.map((item) => (
+            <span key={item.id} className="inline-flex items-center gap-1.5 rounded-[8px] border border-amber-500/15 bg-amber-500/10 px-2.5 py-1 text-[11px] text-amber-300">
+              <span className="truncate max-w-[180px]">
+                {item.text.trim() || `Attachment${item.pendingFiles.length > 1 ? 's' : ''}`}
+              </span>
+              {item.pendingFiles.length > 0 && (
+                <span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[10px]">
+                  +{item.pendingFiles.length} file{item.pendingFiles.length === 1 ? '' : 's'}
+                </span>
+              )}
+              <button
+                type="button"
+                onClick={() => removeQueuedMessage(item.id)}
+                className="border-none bg-transparent p-0 text-amber-300/70 hover:text-amber-200 cursor-pointer"
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </span>
           ))}
         </div>
       )}
 
+      {visibleQueuedMessages.length === 0 && !disabled && (
+        <div className="mb-2 flex items-center justify-between gap-2 rounded-[10px] border border-white/[0.06] bg-white/[0.03] px-3 py-2">
+          <span className="text-[11px] text-text-3">
+            {streaming
+              ? 'Current round is still running. Press send to queue the next message.'
+              : agents.length > 0
+                ? 'Use @AgentName or @all to direct the next reply.'
+                : 'Start the next round here.'}
+          </span>
+          <span className="text-[10px] text-text-3/50">Enter sends · Shift+Enter newline</span>
+        </div>
+      )}
+
       {/* Reply preview banner */}
       {replyingTo && (
         <div className="flex items-center gap-2 mb-2 px-2 py-1.5 rounded-[8px] bg-white/[0.04] border border-white/[0.06]">
@@ -268,12 +335,12 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
           </svg>
         </button>
 
-        <div className="flex-1 relative rounded-[8px] bg-white/[0.06] border border-white/[0.08] focus-within:border-accent-bright/40">
+        <div className="flex-1 relative rounded-[10px] bg-white/[0.06] border border-white/[0.08] focus-within:border-accent-bright/40">
           {/* Highlight mirror — renders @mentions with accent background behind the transparent textarea */}
           <div
             aria-hidden
             className="absolute inset-0 px-3 py-2 text-[13px] leading-[1.5] break-words whitespace-pre-wrap pointer-events-none overflow-hidden"
-            style={{ minHeight: '38px', color: 'transparent' }}
+            style={{ minHeight: '44px', color: 'transparent' }}
           >
             {highlightedSegments}
           </div>
@@ -286,21 +353,17 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
             placeholder="Type a message... Use @ to mention agents"
             disabled={disabled}
             rows={1}
-            className="w-full resize-none px-3 py-2 rounded-[8px] bg-transparent text-[13px] text-text placeholder:text-text-3 focus:outline-none max-h-[120px] disabled:opacity-50 relative border-none"
-            style={{ minHeight: '38px' }}
+            className="relative w-full resize-none rounded-[10px] border-none bg-transparent px-3 py-2.5 text-[13px] text-text placeholder:text-text-3 focus:outline-none max-h-[160px] disabled:opacity-50"
+            style={{ minHeight: '44px' }}
           />
         </div>
         <button
-          onClick={() => {
-            if ((text.trim() || pendingFiles.length) && !disabled) {
-              onSend(text)
-              setText('')
-              if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
-              setShowMentions(false)
-            }
-          }}
+          onClick={handleSendCurrent}
           disabled={(!text.trim() && !pendingFiles.length) || disabled}
-          className="shrink-0 w-9 h-9 rounded-[8px] bg-accent-bright flex items-center justify-center hover:bg-accent-bright/90 transition-all disabled:opacity-30 cursor-pointer"
+          className={`shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-all disabled:opacity-30 cursor-pointer ${
+            streaming ? 'bg-amber-500/20 hover:bg-amber-500/30' : 'bg-accent-bright hover:bg-accent-bright/90'
+          }`}
+          title="Send or queue message"
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <line x1="22" y1="2" x2="11" y2="13" />