@swarmclawai/swarmclaw 0.6.4 → 0.6.7

package/src/components/chat/thinking-indicator.tsx

@@ -10,6 +10,7 @@ import { useChatStore } from '@/stores/use-chat-store'
 interface Props {
   assistantName?: string
   agentAvatarSeed?: string
+  agentAvatarUrl?: string | null
   agentName?: string
 }
 
@@ -34,7 +35,7 @@ function ElapsedTimer({ startTime }: { startTime: number }) {
   )
 }
 
-export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }: Props) {
+export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentAvatarUrl, agentName }: Props) {
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
   const thinkingText = useChatStore((s) => s.thinkingText)
@@ -50,7 +51,7 @@ export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }:
     <div className="flex flex-col items-start relative pl-[44px]"
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}>
       <div className="absolute left-[4px] top-0">
-        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
       </div>
       <div className="flex items-center gap-2.5 mb-2 px-1">
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>

package/src/components/chat/transfer-agent-picker.tsx

@@ -52,7 +52,7 @@ export function TransferAgentPicker({ excludeIds, filterIds, onSelect, onClose }
               className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none"
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={a.avatarSeed} name={a.name} size={20} />
+              <AgentAvatar seed={a.avatarSeed} avatarUrl={a.avatarUrl} name={a.name} size={20} />
               <span className="text-[12px] text-text truncate">{a.name}</span>
             </button>
           ))}

package/src/components/chatrooms/agent-hover-card.tsx

@@ -46,7 +46,7 @@ export function AgentHoverCard({ agent, children, status }: Props) {
       <HoverCardContent align="start" className="w-[280px]">
         {/* Header: avatar + name + model */}
         <div className="flex items-center gap-2">
-          <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={28} status={status} />
+          <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={28} status={status} />
           <div className="min-w-0 flex-1">
             <div className="text-[13px] font-600 text-text truncate">{agent.name}</div>
             <div className="label-mono truncate">{agent.model}</div>

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

@@ -203,7 +203,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
                 selectedIndex === i + 1 ? 'bg-white/[0.08]' : 'hover:bg-white/[0.06]'
               }`}
             >
-              <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={20} />
+              <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
               <span className="text-[13px] text-text">{agent.name}</span>
             </button>
           ))}

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)
 
@@ -172,7 +197,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
               className="bg-transparent border-none p-0 cursor-pointer transition-all duration-150 hover:scale-110 hover:-translate-y-0.5"
               style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={message.senderName} size={28} status={streamingAgentIds?.has(message.senderId) ? 'busy' : 'online'} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={message.senderName} size={28} status={streamingAgentIds?.has(message.senderId) ? 'busy' : 'online'} />
             </button>
           ) : (
             <div style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}>
@@ -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)}

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

@@ -6,9 +6,145 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { toast } from 'sonner'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import type { Agent } from '@/types'
+import type { Agent, ChatroomRoutingRule } from '@/types'
 import { CheckIcon } from '@/components/shared/check-icon'
 
+function genRuleId(): string {
+  return `rule-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+interface RuleFormState {
+  type: 'keyword' | 'capability'
+  pattern: string
+  keywords: string
+  agentId: string
+  priority: number
+}
+
+const emptyRuleForm: RuleFormState = {
+  type: 'keyword',
+  pattern: '',
+  keywords: '',
+  agentId: '',
+  priority: 10,
+}
+
+function RoutingRuleForm({
+  rule,
+  memberAgents,
+  onSave,
+  onCancel,
+}: {
+  rule: RuleFormState
+  memberAgents: Agent[]
+  onSave: (form: RuleFormState) => void
+  onCancel: () => void
+}) {
+  const [form, setForm] = useState<RuleFormState>(rule)
+
+  return (
+    <div className="p-3 rounded-[8px] bg-white/[0.04] border border-white/[0.08] space-y-3">
+      <div className="flex gap-2">
+        {(['keyword', 'capability'] as const).map((t) => (
+          <button
+            key={t}
+            type="button"
+            onClick={() => setForm((f) => ({ ...f, type: t }))}
+            className={`flex-1 py-1.5 text-[11px] font-600 capitalize rounded-[6px] cursor-pointer transition-all ${
+              form.type === t
+                ? 'bg-accent-soft text-accent-bright'
+                : 'bg-white/[0.04] text-text-3 hover:text-text-2'
+            }`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {form.type === 'keyword' && (
+        <>
+          <div>
+            <label className="block text-[11px] font-600 text-text-3 mb-1">Keywords (comma-separated)</label>
+            <input
+              type="text"
+              value={form.keywords}
+              onChange={(e) => setForm((f) => ({ ...f, keywords: e.target.value }))}
+              placeholder="e.g. deploy, devops, infrastructure"
+              className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] font-600 text-text-3 mb-1">Regex pattern (optional)</label>
+            <input
+              type="text"
+              value={form.pattern}
+              onChange={(e) => setForm((f) => ({ ...f, pattern: e.target.value }))}
+              placeholder="e.g. deploy|release|ship"
+              className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+            />
+          </div>
+        </>
+      )}
+
+      {form.type === 'capability' && (
+        <div>
+          <label className="block text-[11px] font-600 text-text-3 mb-1">Capability pattern</label>
+          <input
+            type="text"
+            value={form.pattern}
+            onChange={(e) => setForm((f) => ({ ...f, pattern: e.target.value }))}
+            placeholder="e.g. frontend, research, devops"
+            className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+          />
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <label className="block text-[11px] font-600 text-text-3 mb-1">Route to agent</label>
+          <select
+            value={form.agentId}
+            onChange={(e) => setForm((f) => ({ ...f, agentId: e.target.value }))}
+            className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text focus:outline-none focus:border-accent-bright/40"
+          >
+            <option value="">Select agent...</option>
+            {memberAgents.map((a) => (
+              <option key={a.id} value={a.id}>{a.name}</option>
+            ))}
+          </select>
+        </div>
+        <div className="w-20">
+          <label className="block text-[11px] font-600 text-text-3 mb-1">Priority</label>
+          <input
+            type="number"
+            value={form.priority}
+            onChange={(e) => setForm((f) => ({ ...f, priority: parseInt(e.target.value, 10) || 0 }))}
+            className="w-full px-2.5 py-1.5 rounded-[6px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text focus:outline-none focus:border-accent-bright/40"
+          />
+        </div>
+      </div>
+
+      <div className="flex gap-2 justify-end">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-3 py-1.5 text-[11px] font-600 text-text-3 hover:text-text-2 cursor-pointer"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={() => onSave(form)}
+          disabled={!form.agentId || (form.type === 'keyword' && !form.keywords.trim() && !form.pattern.trim()) || (form.type === 'capability' && !form.pattern.trim())}
+          className="px-3 py-1.5 text-[11px] font-600 bg-accent-bright text-white rounded-[6px] hover:bg-accent-bright/90 disabled:opacity-50 cursor-pointer"
+        >
+          Save Rule
+        </button>
+      </div>
+    </div>
+  )
+}
+
 export function ChatroomSheet() {
   const open = useChatroomStore((s) => s.chatroomSheetOpen)
   const editingId = useChatroomStore((s) => s.editingChatroomId)
@@ -25,7 +161,10 @@ export function ChatroomSheet() {
   const [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([])
   const [chatMode, setChatMode] = useState<'sequential' | 'parallel'>('sequential')
   const [autoAddress, setAutoAddress] = useState(false)
+  const [routingRules, setRoutingRules] = useState<ChatroomRoutingRule[]>([])
   const [saving, setSaving] = useState(false)
+  const [addingRule, setAddingRule] = useState(false)
+  const [editingRuleId, setEditingRuleId] = useState<string | null>(null)
 
   const editing = editingId ? chatrooms[editingId] : null
 
@@ -36,24 +175,36 @@ export function ChatroomSheet() {
       setSelectedAgentIds([...editing.agentIds])
       setChatMode(editing.chatMode || 'sequential')
       setAutoAddress(editing.autoAddress || false)
+      setRoutingRules([...(editing.routingRules || [])])
     } else {
       setName('')
       setDescription('')
       setSelectedAgentIds([])
       setChatMode('sequential')
       setAutoAddress(false)
+      setRoutingRules([])
     }
+    setAddingRule(false)
+    setEditingRuleId(null)
   }, [editing, open])
 
   const handleSave = async () => {
     if (!name.trim() || saving) return
     setSaving(true)
     try {
+      const payload = {
+        name,
+        description,
+        agentIds: selectedAgentIds,
+        chatMode,
+        autoAddress,
+        routingRules: routingRules.length > 0 ? routingRules : undefined,
+      }
       if (editing) {
-        await updateChatroom(editing.id, { name, description, agentIds: selectedAgentIds, chatMode, autoAddress })
+        await updateChatroom(editing.id, payload)
         toast.success('Chatroom saved')
       } else {
-        const chatroom = await createChatroom({ name, description, agentIds: selectedAgentIds, chatMode, autoAddress })
+        const chatroom = await createChatroom(payload)
         setCurrentChatroom(chatroom.id)
         toast.success('Chatroom created')
       }
@@ -81,10 +232,53 @@ export function ChatroomSheet() {
     )
   }
 
+  const handleAddRule = (form: RuleFormState) => {
+    const rule: ChatroomRoutingRule = {
+      id: genRuleId(),
+      type: form.type,
+      agentId: form.agentId,
+      priority: form.priority,
+      ...(form.pattern.trim() ? { pattern: form.pattern.trim() } : {}),
+      ...(form.type === 'keyword' && form.keywords.trim()
+        ? { keywords: form.keywords.split(',').map((k) => k.trim()).filter(Boolean) }
+        : {}),
+    }
+    setRoutingRules((prev) => [...prev, rule].sort((a, b) => a.priority - b.priority))
+    setAddingRule(false)
+  }
+
+  const handleEditRule = (form: RuleFormState) => {
+    setRoutingRules((prev) =>
+      prev.map((r) =>
+        r.id === editingRuleId
+          ? {
+              ...r,
+              type: form.type,
+              agentId: form.agentId,
+              priority: form.priority,
+              pattern: form.pattern.trim() || undefined,
+              keywords:
+                form.type === 'keyword' && form.keywords.trim()
+                  ? form.keywords.split(',').map((k) => k.trim()).filter(Boolean)
+                  : undefined,
+            }
+          : r,
+      ).sort((a, b) => a.priority - b.priority),
+    )
+    setEditingRuleId(null)
+  }
+
+  const removeRule = (ruleId: string) => {
+    setRoutingRules((prev) => prev.filter((r) => r.id !== ruleId))
+  }
+
   const agentList = Object.values(agents).filter(
     (a: Agent) => !a.trashedAt
   ) as Agent[]
 
+  const memberAgents = agentList.filter((a) => selectedAgentIds.includes(a.id))
+  const sortedRules = [...routingRules].sort((a, b) => a.priority - b.priority)
+
   return (
     <BottomSheet open={open} onClose={() => setChatroomSheetOpen(false)}>
       <div className="p-6 max-w-[560px] mx-auto">
@@ -178,7 +372,7 @@ export function ChatroomSheet() {
                         selected ? 'bg-accent-soft/40' : 'hover:bg-white/[0.04]'
                       }`}
                     >
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                       <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                       {selected && (
                         <CheckIcon size={14} className="text-accent-bright shrink-0" />
@@ -189,6 +383,97 @@ export function ChatroomSheet() {
               )}
             </div>
           </div>
+
+          {/* Routing Rules */}
+          <div>
+            <label className="block text-[12px] font-600 text-text-2 mb-1.5">
+              Routing Rules ({sortedRules.length})
+            </label>
+            <p className="text-[11px] text-text-3 mb-2">
+              Route messages to specific agents based on keywords or capabilities. Evaluated before auto-address.
+            </p>
+
+            {sortedRules.length > 0 && (
+              <div className="space-y-2 mb-2">
+                {sortedRules.map((rule) => {
+                  const agent = agents[rule.agentId]
+                  if (editingRuleId === rule.id) {
+                    return (
+                      <RoutingRuleForm
+                        key={rule.id}
+                        rule={{
+                          type: rule.type,
+                          pattern: rule.pattern || '',
+                          keywords: rule.keywords?.join(', ') || '',
+                          agentId: rule.agentId,
+                          priority: rule.priority,
+                        }}
+                        memberAgents={memberAgents}
+                        onSave={handleEditRule}
+                        onCancel={() => setEditingRuleId(null)}
+                      />
+                    )
+                  }
+                  return (
+                    <div
+                      key={rule.id}
+                      className="flex items-center gap-2 px-3 py-2 rounded-[8px] bg-white/[0.04] border border-white/[0.08]"
+                    >
+                      <span className="text-[10px] font-700 text-text-3 bg-white/[0.06] px-1.5 py-0.5 rounded">
+                        P{rule.priority}
+                      </span>
+                      <span className="text-[10px] font-600 text-accent-bright/70 uppercase">
+                        {rule.type}
+                      </span>
+                      <span className="text-[12px] text-text-2 flex-1 truncate">
+                        {rule.type === 'keyword'
+                          ? (rule.keywords?.join(', ') || rule.pattern || '(no match)')
+                          : (rule.pattern || '(no pattern)')}
+                      </span>
+                      <span className="text-[11px] text-text-3 truncate max-w-[100px]">
+                        {agent?.name || 'Unknown'}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => setEditingRuleId(rule.id)}
+                        className="text-[11px] text-text-3 hover:text-text-2 cursor-pointer px-1"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removeRule(rule.id)}
+                        className="text-[11px] text-red-400 hover:text-red-300 cursor-pointer px-1"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            {addingRule ? (
+              <RoutingRuleForm
+                rule={emptyRuleForm}
+                memberAgents={memberAgents}
+                onSave={handleAddRule}
+                onCancel={() => setAddingRule(false)}
+              />
+            ) : (
+              <button
+                type="button"
+                onClick={() => setAddingRule(true)}
+                disabled={memberAgents.length === 0}
+                className="w-full py-2 rounded-[8px] border border-dashed border-white/[0.12] text-[12px] font-600 text-text-3 hover:text-text-2 hover:border-white/[0.2] cursor-pointer transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                + Add Rule
+              </button>
+            )}
+            {memberAgents.length === 0 && (
+              <p className="text-[11px] text-text-3 mt-1">Add members first to create routing rules.</p>
+            )}
+          </div>
         </div>
 
         <div className="flex items-center gap-3 mt-6">