@swarmclawai/swarmclaw 0.7.2 → 0.7.4

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>
             )}