@swarmclawai/swarmclaw 0.7.3 → 0.7.4

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" />

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

@@ -7,6 +7,14 @@ import { useWs } from '@/hooks/use-ws'
 import type { Chatroom } from '@/types'
 import { EmptyState } from '@/components/shared/empty-state'
 
+function formatRoomTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'Now'
+  if (diff < 3_600_000) return `${Math.max(1, Math.floor(diff / 60_000))}m`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h`
+  return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
 export function ChatroomList() {
   const chatrooms = useChatroomStore((s) => s.chatrooms)
   const currentChatroomId = useChatroomStore((s) => s.currentChatroomId)
@@ -15,6 +23,9 @@ export function ChatroomList() {
   const setChatroomSheetOpen = useChatroomStore((s) => s.setChatroomSheetOpen)
   const setEditingChatroomId = useChatroomStore((s) => s.setEditingChatroomId)
   const agents = useAppStore((s) => s.agents)
+  const lastReadTimestamps = useAppStore((s) => s.lastReadTimestamps)
+  const [filter, setFilter] = useState<'all' | 'active' | 'recent' | 'unread'>('all')
+  const [search, setSearch] = useState('')
 
   const refresh = useCallback(() => {
     loadChatrooms()
@@ -24,32 +35,56 @@ export function ChatroomList() {
   useEffect(() => { refresh() }, [refresh])
   useWs('chatrooms', refresh, 15_000)
 
-  // Auto-select the latest chatroom when none is selected
   useEffect(() => {
     if (currentChatroomId) return
     const latest = Object.values(chatrooms).sort((a, b) => b.updatedAt - a.updatedAt)[0]
     if (latest) setCurrentChatroom(latest.id)
   }, [chatrooms, currentChatroomId, setCurrentChatroom])
 
-  const [filter, setFilter] = useState<'all' | 'active' | 'recent'>('all')
+  const enriched = useMemo(() => (
+    Object.values(chatrooms)
+      .map((chatroom: Chatroom) => {
+        const memberNames = chatroom.agentIds
+          .map((id) => agents[id]?.name)
+          .filter(Boolean)
+        const lastMsg = chatroom.messages[chatroom.messages.length - 1]
+        const lastReadAt = lastReadTimestamps[chatroom.id] || 0
+        const unreadCount = chatroom.messages.filter(
+          (msg) => msg.senderId !== 'user' && msg.senderId !== 'system' && (msg.time || 0) > lastReadAt,
+        ).length
 
-  const sorted = useMemo(() =>
-    Object.values(chatrooms).sort(
-      (a: Chatroom, b: Chatroom) => b.updatedAt - a.updatedAt
-    ), [chatrooms])
+        return {
+          chatroom,
+          memberNames,
+          lastMsg,
+          unreadCount,
+          searchText: [
+            chatroom.name,
+            chatroom.description,
+            memberNames.join(' '),
+            lastMsg?.senderName,
+            lastMsg?.text,
+          ].filter(Boolean).join(' ').toLowerCase(),
+        }
+      })
+      .sort((a, b) => b.chatroom.updatedAt - a.chatroom.updatedAt)
+  ), [agents, chatrooms, lastReadTimestamps])
 
   const filtered = useMemo(() => {
-    if (filter === 'all') return sorted
+    const query = search.trim().toLowerCase()
     const now = Date.now()
-    return sorted.filter((c) => {
-      if (filter === 'active') return now - c.updatedAt < 3_600_000 // 1h
-      return now - c.updatedAt < 86_400_000 // 24h
+    return enriched.filter((item) => {
+      if (query && !item.searchText.includes(query)) return false
+      if (filter === 'active') return now - item.chatroom.updatedAt < 3_600_000
+      if (filter === 'recent') return now - item.chatroom.updatedAt < 86_400_000
+      if (filter === 'unread') return item.unreadCount > 0
+      return true
     })
-  }, [sorted, filter])
+  }, [enriched, filter, search])
 
   return (
     <div className="flex-1 overflow-y-auto">
-      {sorted.length === 0 ? (
+      {enriched.length === 0 ? (
         <EmptyState
           icon={
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="text-accent-bright">
@@ -61,75 +96,109 @@ export function ChatroomList() {
           action={{ label: '+ New Chatroom', onClick: () => { setEditingChatroomId(null); setChatroomSheetOpen(true) } }}
         />
       ) : (
-        <div className="p-3 space-y-1">
-          {sorted.length > 2 && (
-            <div className="flex items-center gap-1 px-1 pb-2" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
-              {(['all', 'active', 'recent'] as const).map((f) => (
+        <div className="p-3 space-y-3">
+          <div className="space-y-2">
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search rooms, members, or recent messages..."
+              className="w-full rounded-[12px] border border-white/[0.06] bg-surface px-3 py-2.5 text-[13px] text-text placeholder:text-text-3/70 focus:outline-none focus:border-accent-bright/35"
+            />
+            <div className="flex flex-wrap items-center gap-1">
+              {(['all', 'active', 'recent', 'unread'] as const).map((value) => (
                 <button
-                  key={f}
+                  key={value}
                   type="button"
-                  onClick={() => setFilter(f)}
-                  data-active={filter === f || undefined}
-                  className="px-3 py-1.5 rounded-[8px] text-[11px] font-600 border-none cursor-pointer transition-all focus-visible:ring-1 focus-visible:ring-accent-bright/50
+                  onClick={() => setFilter(value)}
+                  data-active={filter === value || undefined}
+                  className="rounded-[8px] border-none px-3 py-1.5 text-[11px] font-600 capitalize cursor-pointer transition-all focus-visible:ring-1 focus-visible:ring-accent-bright/50
                     data-[active]:bg-accent-soft data-[active]:text-accent-bright
                     bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]"
                 >
-                  {f}
+                  {value}
                 </button>
               ))}
+              <span className="ml-auto text-[11px] text-text-3/55">
+                {filtered.length} room{filtered.length === 1 ? '' : 's'}
+              </span>
             </div>
-          )}
-          {filtered.map((chatroom, idx) => {
-            const isActive = chatroom.id === currentChatroomId
-            const memberNames = chatroom.agentIds
-              .map((id) => agents[id]?.name)
-              .filter(Boolean)
-              .slice(0, 3)
-            const lastMsg = chatroom.messages[chatroom.messages.length - 1]
+          </div>
 
-            return (
-              <button
-                key={chatroom.id}
-                onClick={() => setCurrentChatroom(chatroom.id)}
-                className={`w-full text-left py-3.5 px-4 rounded-[14px] transition-all cursor-pointer group border border-transparent relative overflow-hidden ${
-                  isActive
-                    ? 'bg-accent-soft/60'
-                    : 'hover:bg-white/[0.04] hover:scale-[1.01]'
-                }`}
-                style={{
-                  animation: 'fade-up 0.4s var(--ease-spring) both',
-                  animationDelay: `${idx * 0.03}s`
-                }}
-              >
-                <div className="flex items-center gap-2 mb-0.5">
-                  <div className="w-7 h-7 rounded-full bg-accent-soft flex items-center justify-center shrink-0">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright">
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                    </svg>
-                  </div>
-                  <span className={`text-[13px] font-600 truncate ${isActive ? 'text-accent-bright' : 'text-text'}`}>
-                    {chatroom.name}
-                  </span>
-                  {isActive && (
-                    <div className="absolute left-0 top-3 bottom-3 w-1 rounded-r-full bg-accent-bright" style={{ animation: 'spring-in 0.3s var(--ease-spring)' }} />
-                  )}
-                  <span className="label-mono ml-auto shrink-0">
-                    {chatroom.agentIds.length} agents
-                  </span>
-                </div>
-                {memberNames.length > 0 && (
-                  <p className="text-[11px] text-text-3 truncate pl-9">
-                    {memberNames.join(', ')}{chatroom.agentIds.length > 3 ? ` +${chatroom.agentIds.length - 3}` : ''}
-                  </p>
-                )}
-                {lastMsg && (
-                  <p className="text-[11px] text-text-3/70 truncate pl-9 mt-0.5">
-                    {lastMsg.senderName}: {lastMsg.text.slice(0, 60)}
-                  </p>
-                )}
-              </button>
-            )
-          })}
+          {filtered.length === 0 ? (
+            <div className="rounded-[14px] border border-white/[0.06] bg-white/[0.02] px-4 py-8 text-center">
+              <div className="text-[13px] font-600 text-text-2">No rooms match this view</div>
+              <div className="mt-1 text-[12px] text-text-3/65">
+                Clear the search or switch filters to see more chatrooms.
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {filtered.map(({ chatroom, memberNames, lastMsg, unreadCount }, idx) => {
+                const isActive = chatroom.id === currentChatroomId
+                return (
+                  <button
+                    key={chatroom.id}
+                    onClick={() => setCurrentChatroom(chatroom.id)}
+                    className={`relative w-full overflow-hidden rounded-[14px] border px-4 py-3.5 text-left transition-all cursor-pointer ${
+                      isActive
+                        ? 'border-accent-bright/20 bg-accent-soft/55'
+                        : 'border-transparent hover:bg-white/[0.04] hover:border-white/[0.05]'
+                    }`}
+                    style={{
+                      animation: 'fade-up 0.4s var(--ease-spring) both',
+                      animationDelay: `${idx * 0.03}s`,
+                    }}
+                  >
+                    {isActive && (
+                      <div className="absolute inset-y-3 left-0 w-1 rounded-r-full bg-accent-bright" />
+                    )}
+                    <div className="flex items-start gap-3">
+                      <div className="mt-0.5 flex h-8 w-8 items-center justify-center rounded-full bg-accent-soft shrink-0">
+                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright">
+                          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                        </svg>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2">
+                          <span className={`truncate text-[13px] font-700 ${isActive ? 'text-accent-bright' : 'text-text'}`}>
+                            {chatroom.name}
+                          </span>
+                          {unreadCount > 0 && (
+                            <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-accent-bright px-1.5 py-0.5 text-[10px] font-700 text-white">
+                              {unreadCount > 99 ? '99+' : unreadCount}
+                            </span>
+                          )}
+                          <span className="ml-auto shrink-0 text-[10px] font-mono text-text-3/55">
+                            {formatRoomTime(lastMsg?.time || chatroom.updatedAt)}
+                          </span>
+                        </div>
+                        <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-text-3">
+                          <span>{chatroom.agentIds.length} agent{chatroom.agentIds.length === 1 ? '' : 's'}</span>
+                          {chatroom.chatMode === 'parallel' && (
+                            <span className="rounded-[6px] bg-sky-500/10 px-1.5 py-0.5 text-sky-300">Parallel</span>
+                          )}
+                          {chatroom.autoAddress && (
+                            <span className="rounded-[6px] bg-emerald-500/10 px-1.5 py-0.5 text-emerald-300">Auto-address</span>
+                          )}
+                        </div>
+                        {memberNames.length > 0 && (
+                          <p className="mt-1 truncate text-[11px] text-text-3/80">
+                            {memberNames.slice(0, 3).join(', ')}{memberNames.length > 3 ? ` +${memberNames.length - 3}` : ''}
+                          </p>
+                        )}
+                        {lastMsg && (
+                          <p className="mt-1 truncate text-[11px] text-text-3/65">
+                            {lastMsg.senderName}: {lastMsg.text.slice(0, 72)}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          )}
         </div>
       )}
     </div>

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

@@ -393,12 +393,12 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
       </div>
 
       {/* Action buttons (reply + pin + transfer + moderate + reaction) */}
-      <div className="relative shrink-0 mt-0.5 flex items-start gap-0.5" style={{ zIndex: showPicker || showTransferPicker || showModMenu ? 50 : undefined }}>
+      <div className="relative shrink-0 mt-0.5 flex items-start gap-1" style={{ zIndex: showPicker || showTransferPicker || showModMenu ? 50 : undefined }}>
         {/* Reply button */}
         {onReply && (
           <button
             onClick={() => onReply(message)}
-            className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+            className="w-7 h-7 rounded-[8px] border border-white/[0.06] bg-white/[0.02] flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
             title="Reply"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-3">
@@ -411,7 +411,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
         {onTogglePin && (
           <button
             onClick={() => onTogglePin(message.id)}
-            className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+            className="w-7 h-7 rounded-[8px] border border-white/[0.06] bg-white/[0.02] flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
             title={pinnedMessageIds?.includes(message.id) ? 'Unpin message' : 'Pin message'}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill={pinnedMessageIds?.includes(message.id) ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={pinnedMessageIds?.includes(message.id) ? 'text-amber-400' : 'text-text-3'}>
@@ -424,7 +424,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
         {onTransfer && !isUser && (
           <button
             onClick={() => setShowTransferPicker(!showTransferPicker)}
-            className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+            className="w-7 h-7 rounded-[8px] border border-white/[0.06] bg-white/[0.02] flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
             title="Transfer to agent"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-3">
@@ -449,7 +449,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
         {!isUser && (onDeleteMessage || onMuteAgent || onSetRole) && (
           <button
             onClick={() => setShowModMenu(!showModMenu)}
-            className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+            className="w-7 h-7 rounded-[8px] border border-white/[0.06] bg-white/[0.02] flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
             title="Moderate"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3">
@@ -550,7 +550,8 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
         {/* Reaction button */}
         <button
           onClick={() => setShowPicker(!showPicker)}
-          className="opacity-0 group-hover:opacity-100 w-6 h-6 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+          className="w-7 h-7 rounded-[8px] border border-white/[0.06] bg-white/[0.02] flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+          title="Add reaction"
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-3">
             <circle cx="12" cy="12" r="10" />

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

@@ -190,6 +190,10 @@ export function ChatroomSheet() {
 
   const handleSave = async () => {
     if (!name.trim() || saving) return
+    if (selectedAgentIds.length === 0) {
+      toast.error('Select at least one chatroom member.')
+      return
+    }
     setSaving(true)
     try {
       const payload = {
@@ -363,6 +367,9 @@ export function ChatroomSheet() {
             <label className="block text-[12px] font-600 text-text-2 mb-1.5">
               Members ({selectedAgentIds.length} selected)
             </label>
+            <p className="mb-2 text-[11px] text-text-3">
+              Choose the agents who should be available in this room. Every chatroom needs at least one member.
+            </p>
             <div className="max-h-[240px] overflow-y-auto rounded-[8px] border border-white/[0.08] bg-white/[0.03]">
               {agentList.length === 0 ? (
                 <p className="p-3 text-[12px] text-text-3">No agents available</p>
@@ -387,6 +394,11 @@ export function ChatroomSheet() {
                 })
               )}
             </div>
+            {selectedAgentIds.length === 0 && (
+              <p className="mt-2 text-[11px] text-amber-300">
+                Select at least one member before creating the room.
+              </p>
+            )}
           </div>
 
           {/* Routing Rules */}
@@ -484,7 +496,7 @@ export function ChatroomSheet() {
         <div className="flex items-center gap-3 mt-6">
           <button
             onClick={handleSave}
-            disabled={!name.trim() || saving}
+            disabled={!name.trim() || saving || selectedAgentIds.length === 0}
             className="flex-1 py-2.5 rounded-[8px] text-[13px] font-600 bg-accent-bright text-white hover:bg-accent-bright/90 transition-all disabled:opacity-50 cursor-pointer"
           >
             {saving ? 'Saving...' : editing ? 'Save Changes' : 'Create Chatroom'}

package/src/components/chatrooms/chatroom-tool-request-banner.tsx

@@ -103,6 +103,9 @@ export function ChatroomToolRequestBanner({ agentId, agentName, text, toolOutput
                 <span className="text-accent-bright">{agentName}</span> requesting <span className="text-amber-400">{label}</span>
               </p>
               {reason && <p className="text-[11px] text-text-3/60 mt-0.5 truncate">{reason}</p>}
+              <p className="text-[10px] text-text-3/45 mt-1">
+                Approving updates this agent&apos;s tool access and posts a follow-up continue message in the room.
+              </p>
             </div>
             {isGranted ? (
               <span className="text-[11px] text-emerald-400 font-600 shrink-0">Granted</span>
@@ -115,14 +118,14 @@ export function ChatroomToolRequestBanner({ agentId, agentName, text, toolOutput
                   className="px-3 py-1.5 rounded-[8px] bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 text-[11px] font-600 border-none cursor-pointer transition-colors"
                   style={{ fontFamily: 'inherit' }}
                 >
-                  Grant
+                  Grant & Continue
                 </button>
                 <button
                   onClick={() => handleDeny(toolId)}
                   className="px-3 py-1.5 rounded-[8px] bg-red-500/15 hover:bg-red-500/25 text-red-400 text-[11px] font-600 border-none cursor-pointer transition-colors"
                   style={{ fontFamily: 'inherit' }}
                 >
-                  Deny
+                  Deny & Reply
                 </button>
               </div>
             )}