@swarmclawai/swarmclaw 0.6.6 → 0.6.7

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

@@ -324,17 +324,32 @@ export function ChatArea() {
       <DevServerBar status={devServerStatus} onStop={handleStopDevServer} />
 
       {messagesLoading && !messages.length ? (
-        <div className="flex-1 flex items-center justify-center">
-          <div className="flex flex-col items-center gap-3" style={{ animation: 'fade-in 0.2s ease' }}>
-            <div className="relative w-10 h-10">
-              <div className="absolute inset-0 rounded-full border-2 border-white/[0.06]" />
-              <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent-bright animate-spin" />
+        <div className="flex-1 flex flex-col gap-5 px-4 md:px-12 lg:px-16 py-8" style={{ animation: 'fade-in 0.2s ease' }}>
+          {/* Skeleton message bubbles */}
+          <div className="flex gap-3 max-w-[70%]">
+            <div className="w-8 h-8 rounded-full bg-white/[0.06] animate-pulse shrink-0" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-24 rounded bg-white/[0.06] animate-pulse" />
+              <div className="h-16 rounded-[12px] bg-white/[0.04] animate-pulse" />
+            </div>
+          </div>
+          <div className="flex gap-3 max-w-[60%] self-end flex-row-reverse">
+            <div className="w-8 h-8 rounded-full bg-white/[0.06] animate-pulse shrink-0" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-16 rounded bg-white/[0.06] animate-pulse ml-auto" />
+              <div className="h-10 rounded-[12px] bg-white/[0.04] animate-pulse" />
+            </div>
+          </div>
+          <div className="flex gap-3 max-w-[65%]">
+            <div className="w-8 h-8 rounded-full bg-white/[0.06] animate-pulse shrink-0" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-20 rounded bg-white/[0.06] animate-pulse" />
+              <div className="h-24 rounded-[12px] bg-white/[0.04] animate-pulse" />
             </div>
-            <span className="text-[13px] text-text-3/50 font-500">Loading messages...</span>
           </div>
         </div>
       ) : isEmpty ? (
-        <div className="flex-1 flex flex-col items-center justify-center px-6 pb-4 relative">
+        <div className="flex-1 flex flex-col items-center justify-center px-6 pb-[120px] md:pb-4 relative">
           {/* Atmospheric background glow */}
           <div className="absolute inset-0 pointer-events-none overflow-hidden">
             <div className="absolute top-[20%] left-[50%] -translate-x-1/2 w-[500px] h-[300px]"

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

@@ -516,7 +516,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             )}
           </div>
         ) : (
-          <div className={`msg-content text-[15px] break-words ${isUser ? 'leading-[1.6] text-white/95' : 'leading-[1.7] text-text'}`}>
+          <div className={`msg-content text-[15px] md:text-[14px] break-words ${isUser ? 'leading-[1.6] text-white/95' : 'leading-[1.7] text-text'}`}>
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeHighlight]}
@@ -660,12 +660,12 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       )}
 
       {/* Action buttons */}
-      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
+      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
         <button
           onClick={handleCopy}
           aria-label="Copy message"
-          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-            text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+          className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+            text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
           style={{ fontFamily: 'inherit' }}
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -678,8 +678,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={() => onToggleBookmark(messageIndex)}
             aria-label={message.bookmarked ? 'Remove bookmark' : 'Bookmark message'}
-            className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 cursor-pointer hover:bg-white/[0.04] transition-all ${message.bookmarked ? 'text-amber-400' : ''}`}
+            className={`flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 cursor-pointer hover:bg-white/[0.04] transition-all justify-center md:justify-start ${message.bookmarked ? 'text-amber-400' : ''}`}
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill={message.bookmarked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -692,8 +692,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={() => { setEditText(message.text); setEditing(true) }}
             aria-label="Edit and resend"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -707,8 +707,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={() => onFork(messageIndex)}
             aria-label="Fork conversation from here"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -725,8 +725,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={onRetry}
             aria-label="Retry message"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -741,8 +741,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             <button
               onClick={() => setTransferPickerOpen(!transferPickerOpen)}
               aria-label="Transfer to another agent"
-              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-                text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+              className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+                text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
               style={{ fontFamily: 'inherit' }}
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">

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

@@ -397,7 +397,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-6 md:px-12 lg:px-16 pt-6 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-6 pb-[120px] md:pb-10 fade-up"
       >
         <div className="flex flex-col gap-6 relative">
           {/* Chat spine — vertical line for assistant messages */}

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

@@ -15,7 +15,7 @@ import { ChatroomToolRequestBanner } from './chatroom-tool-request-banner'
 import { isStructuredMarkdown } from '@/components/chat/markdown-utils'
 import { TransferAgentPicker } from '@/components/chat/transfer-agent-picker'
 import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
-import type { ChatroomMessage, Agent } from '@/types'
+import type { ChatroomMessage, Chatroom, Agent } from '@/types'
 
 interface Props {
   message: ChatroomMessage
@@ -24,6 +24,11 @@ interface Props {
   onReply?: (message: ChatroomMessage) => void
   onTogglePin?: (messageId: string) => void
   onTransfer?: (messageId: string, targetAgentId: string) => void
+  onDeleteMessage?: (messageId: string, targetAgentId: string) => void
+  onMuteAgent?: (agentId: string) => void
+  onUnmuteAgent?: (agentId: string) => void
+  onSetRole?: (agentId: string, role: 'admin' | 'moderator' | 'member') => void
+  chatroom?: Chatroom
   pinnedMessageIds?: string[]
   /** Set of agentIds currently streaming */
   streamingAgentIds?: Set<string>
@@ -51,6 +56,25 @@ function navigateToAgent(agentId: string) {
   useAppStore.getState().setCurrentAgent(agentId)
 }
 
+function getMemberRoleFromChatroom(chatroom: Chatroom | undefined, agentId: string): string {
+  if (!chatroom?.members?.length) return 'member'
+  const member = chatroom.members.find((m) => m.agentId === agentId)
+  return member?.role || 'member'
+}
+
+function isAgentMutedInChatroom(chatroom: Chatroom | undefined, agentId: string): boolean {
+  if (!chatroom?.members?.length) return false
+  const member = chatroom.members.find((m) => m.agentId === agentId)
+  if (!member?.mutedUntil) return false
+  return new Date(member.mutedUntil).getTime() > Date.now()
+}
+
+function roleBadgeStyle(role: string): { label: string; className: string } | null {
+  if (role === 'admin') return { label: 'Admin', className: 'bg-purple-500/20 text-purple-400 border-purple-500/30' }
+  if (role === 'moderator') return { label: 'Mod', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' }
+  return null
+}
+
 /** Pre-process @mentions into markdown-friendly format for ReactMarkdown */
 function preprocessMentions(text: string, agents: Record<string, Agent>): string {
   const nameToId = new Map<string, string>()
@@ -111,9 +135,10 @@ function renderChatroomAttachments(message: ChatroomMessage) {
   )
 }
 
-export function ChatroomMessageBubble({ message, agents, onToggleReaction, onReply, onTogglePin, onTransfer, pinnedMessageIds, streamingAgentIds, messages, grouped: isGrouped, momentOverlay }: Props) {
+export function ChatroomMessageBubble({ message, agents, onToggleReaction, onReply, onTogglePin, onTransfer, onDeleteMessage, onMuteAgent, onUnmuteAgent, onSetRole, chatroom, pinnedMessageIds, streamingAgentIds, messages, grouped: isGrouped, momentOverlay }: Props) {
   const [showPicker, setShowPicker] = useState(false)
   const [showTransferPicker, setShowTransferPicker] = useState(false)
+  const [showModMenu, setShowModMenu] = useState(false)
   const userAvatarSeed = useAppStore((s) => s.appSettings.userAvatarSeed)
   const wide = isStructuredMarkdown(message.text)
 
@@ -185,26 +210,41 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
 
       {/* Content */}
       <div className="flex-1 min-w-0">
-        {!isGrouped && (
-          <div className="flex items-baseline gap-2 mb-0.5">
-            {!isUser && agent ? (
-              <AgentHoverCard agent={agent}>
-                <span className="text-[13px] font-600 text-accent-bright hover:underline cursor-pointer flex items-center gap-1.5">
+        {!isGrouped && (() => {
+          const role = !isUser ? getMemberRoleFromChatroom(chatroom, message.senderId) : 'member'
+          const badge = !isUser ? roleBadgeStyle(role) : null
+          const muted = !isUser ? isAgentMutedInChatroom(chatroom, message.senderId) : false
+          return (
+            <div className="flex items-baseline gap-2 mb-0.5">
+              {!isUser && agent ? (
+                <AgentHoverCard agent={agent}>
+                  <span className="text-[13px] font-600 text-accent-bright hover:underline cursor-pointer flex items-center gap-1.5">
+                    {message.source && <ConnectorPlatformIcon platform={message.source.platform} size={12} />}
+                    {message.senderName}
+                  </span>
+                </AgentHoverCard>
+              ) : (
+                <span className="text-[13px] font-600 text-text flex items-center gap-1.5">
                   {message.source && <ConnectorPlatformIcon platform={message.source.platform} size={12} />}
-                  {message.senderName}
+                  {isUser && message.source?.senderName
+                    ? `${message.source.senderName} via ${CONNECTOR_PLATFORM_META[message.source.platform]?.label || message.source.platform}`
+                    : message.senderName}
                 </span>
-              </AgentHoverCard>
-            ) : (
-              <span className="text-[13px] font-600 text-text flex items-center gap-1.5">
-                {message.source && <ConnectorPlatformIcon platform={message.source.platform} size={12} />}
-                {isUser && message.source?.senderName
-                  ? `${message.source.senderName} via ${CONNECTOR_PLATFORM_META[message.source.platform]?.label || message.source.platform}`
-                  : message.senderName}
-              </span>
-            )}
-            <span className="label-mono" title={new Date(message.time).toLocaleString()}>{formatRelativeTime(message.time)}</span>
-          </div>
-        )}
+              )}
+              {badge && (
+                <span className={`text-[9px] font-600 px-1 py-0.5 rounded border leading-none ${badge.className}`}>
+                  {badge.label}
+                </span>
+              )}
+              {muted && (
+                <span className="text-[9px] font-600 px-1 py-0.5 rounded border leading-none bg-red-500/20 text-red-400 border-red-500/30">
+                  Muted
+                </span>
+              )}
+              <span className="label-mono" title={new Date(message.time).toLocaleString()}>{formatRelativeTime(message.time)}</span>
+            </div>
+          )
+        })()}
 
         {/* Reply quote */}
         {replyToMessage && (
@@ -352,8 +392,8 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
         )}
       </div>
 
-      {/* Action buttons (reply + pin + transfer + reaction) */}
-      <div className="relative shrink-0 mt-0.5 flex items-start gap-0.5" style={{ zIndex: showPicker || showTransferPicker ? 50 : undefined }}>
+      {/* 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 }}>
         {/* Reply button */}
         {onReply && (
           <button
@@ -405,6 +445,108 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
             onClose={() => setShowTransferPicker(false)}
           />
         )}
+        {/* Moderation menu button */}
+        {!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"
+            title="Moderate"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </button>
+        )}
+        {showModMenu && !isUser && (
+          <div className="absolute right-0 top-7 z-50 bg-[#1a1a2e] border border-white/[0.1] rounded-[8px] shadow-lg py-1 min-w-[160px]">
+            {onDeleteMessage && (
+              <button
+                onClick={() => {
+                  onDeleteMessage(message.id, message.senderId)
+                  setShowModMenu(false)
+                }}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-[12px] text-red-400 hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none text-left"
+                style={{ fontFamily: 'inherit' }}
+              >
+                <svg width="12" height="12" 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 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                </svg>
+                Delete message
+              </button>
+            )}
+            {onMuteAgent && onUnmuteAgent && (() => {
+              const muted = isAgentMutedInChatroom(chatroom, message.senderId)
+              return muted ? (
+                <button
+                  onClick={() => {
+                    onUnmuteAgent(message.senderId)
+                    setShowModMenu(false)
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-1.5 text-[12px] text-green-400 hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none text-left"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+                  </svg>
+                  Unmute agent
+                </button>
+              ) : (
+                <button
+                  onClick={() => {
+                    onMuteAgent(message.senderId)
+                    setShowModMenu(false)
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-1.5 text-[12px] text-amber-400 hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none text-left"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                    <line x1="23" y1="9" x2="17" y2="15" />
+                    <line x1="17" y1="9" x2="23" y2="15" />
+                  </svg>
+                  Mute 30 min
+                </button>
+              )
+            })()}
+            {onSetRole && (() => {
+              const currentRole = getMemberRoleFromChatroom(chatroom, message.senderId)
+              const roleOptions: Array<{ value: 'admin' | 'moderator' | 'member'; label: string }> = [
+                { value: 'admin', label: 'Set Admin' },
+                { value: 'moderator', label: 'Set Moderator' },
+                { value: 'member', label: 'Set Member' },
+              ]
+              return roleOptions
+                .filter((opt) => opt.value !== currentRole)
+                .map((opt) => (
+                  <button
+                    key={opt.value}
+                    onClick={() => {
+                      onSetRole(message.senderId, opt.value)
+                      setShowModMenu(false)
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-[12px] text-text-2 hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none text-left"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                      <circle cx="8.5" cy="7" r="4" />
+                      <polyline points="17 11 19 13 23 9" />
+                    </svg>
+                    {opt.label}
+                  </button>
+                ))
+            })()}
+            <button
+              onClick={() => setShowModMenu(false)}
+              className="w-full px-3 py-1.5 text-[11px] text-text-3 hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none text-left border-t border-white/[0.06] mt-1"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Cancel
+            </button>
+          </div>
+        )}
         {/* Reaction button */}
         <button
           onClick={() => setShowPicker(!showPicker)}