@swarmclawai/swarmclaw 1.2.3 → 1.2.5

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

@@ -7,146 +7,10 @@ import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { toast } from 'sonner'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import type { Agent, ChatroomRoutingRule } from '@/types'
+import type { Agent } from '@/types'
 import { CheckIcon } from '@/components/shared/check-icon'
 import { WORKER_ONLY_PROVIDER_IDS } from '@/lib/provider-sets'
 
-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)
@@ -163,10 +27,8 @@ 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 [routingGuidance, setRoutingGuidance] = useState('')
   const [saving, setSaving] = useState(false)
-  const [addingRule, setAddingRule] = useState(false)
-  const [editingRuleId, setEditingRuleId] = useState<string | null>(null)
   const [confirmDelete, setConfirmDelete] = useState(false)
 
   const editing = editingId ? chatrooms[editingId] : null
@@ -178,17 +40,15 @@ export function ChatroomSheet() {
       setSelectedAgentIds([...editing.agentIds])
       setChatMode(editing.chatMode || 'sequential')
       setAutoAddress(editing.autoAddress || false)
-      setRoutingRules([...(editing.routingRules || [])])
+      setRoutingGuidance(editing.routingGuidance || '')
     } else {
       setName('')
       setDescription('')
       setSelectedAgentIds([])
       setChatMode('sequential')
       setAutoAddress(false)
-      setRoutingRules([])
+      setRoutingGuidance('')
     }
-    setAddingRule(false)
-    setEditingRuleId(null)
     setConfirmDelete(false)
   }, [editing, open])
 
@@ -206,7 +66,7 @@ export function ChatroomSheet() {
         agentIds: selectedAgentIds,
         chatMode,
         autoAddress,
-        routingRules: routingRules.length > 0 ? routingRules : undefined,
+        routingGuidance: routingGuidance.trim() || null,
       }
       if (editing) {
         await updateChatroom(editing.id, payload)
@@ -245,53 +105,10 @@ 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 && !WORKER_ONLY_PROVIDER_IDS.has(a.provider)
   ) 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">
@@ -350,7 +167,7 @@ export function ChatroomSheet() {
           <div>
             <button
               type="button"
-              onClick={() => setAutoAddress((v) => !v)}
+              onClick={() => setAutoAddress((value) => !value)}
               className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-[8px] border border-white/[0.08] bg-white/[0.03] cursor-pointer transition-all hover:bg-white/[0.05]"
             >
               <div className={`w-8 h-[18px] rounded-full transition-all relative ${autoAddress ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}>
@@ -361,7 +178,7 @@ export function ChatroomSheet() {
                 <p className="text-[11px] text-text-3 mt-0.5">
                   {autoAddress
                     ? 'Every message is sent to all agents, no @mention needed'
-                    : 'Only agents you @mention will respond'}
+                    : 'Only agents you @mention respond unless routing guidance selects someone'}
                 </p>
               </div>
             </button>
@@ -405,95 +222,18 @@ export function ChatroomSheet() {
             )}
           </div>
 
-          {/* Routing Rules */}
           <div>
-            <label className="block text-[12px] font-600 text-text-2 mb-1.5">
-              Routing Rules ({sortedRules.length})
-            </label>
+            <label className="block text-[12px] font-600 text-text-2 mb-1.5">Routing Guidance</label>
             <p className="text-[11px] text-text-3 mb-2">
-              Route messages to specific agents based on keywords or capabilities. Evaluated before auto-address.
+              Optional. Used only when there is no explicit @mention and auto-address is off. Describe which kinds of messages should go to which members.
             </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>
-            )}
+            <textarea
+              value={routingGuidance}
+              onChange={(e) => setRoutingGuidance(e.target.value)}
+              placeholder={'Examples:\nRoute deployment issues to Ops.\nPrefer Maya for design reviews and UI polish.\nSend pricing or market-analysis requests to Research.'}
+              rows={6}
+              className="w-full px-3 py-2 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[13px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40 resize-y min-h-[132px]"
+            />
           </div>
         </div>
 

package/src/components/connectors/connector-list.tsx

@@ -2,10 +2,6 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
-import { useChatroomStore } from '@/stores/use-chatroom-store'
-import { useWs } from '@/hooks/use-ws'
-import { useMountedRef } from '@/hooks/use-mounted-ref'
-import { api } from '@/lib/app/api-client'
 import type { Connector } from '@/types'
 import {
   ConnectorPlatformIcon,
@@ -16,6 +12,9 @@ import {
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { PageLoader } from '@/components/ui/page-loader'
 import { StatusDot } from '@/components/ui/status-dot'
+import { useConnectorsQuery, useConnectorActionMutation } from '@/features/connectors/queries'
+import { useAgentsQuery } from '@/features/agents/queries'
+import { useChatroomsQuery } from '@/features/chatrooms/queries'
 
 function relativeTime(ts: number): string {
   const diff = Date.now() - ts
@@ -45,33 +44,24 @@ function getConnectorGroup(connector: Connector): ConnectorGroup {
 }
 
 export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
-  const connectors = useAppStore((s) => s.connectors)
-  const loadConnectors = useAppStore((s) => s.loadConnectors)
   const setConnectorSheetOpen = useAppStore((s) => s.setConnectorSheetOpen)
   const setEditingConnectorId = useAppStore((s) => s.setEditingConnectorId)
-  const agents = useAppStore((s) => s.agents)
-  const loadAgents = useAppStore((s) => s.loadAgents)
-  const chatrooms = useChatroomStore((s) => s.chatrooms)
-  const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
+  const connectorsQuery = useConnectorsQuery()
+  const agentsQuery = useAgentsQuery()
+  const chatroomsQuery = useChatroomsQuery()
+  const connectorActionMutation = useConnectorActionMutation()
+  const connectors = useMemo(() => connectorsQuery.data ?? {}, [connectorsQuery.data])
+  const agents = agentsQuery.data ?? {}
+  const chatrooms = chatroomsQuery.data ?? {}
   const [toggling, setToggling] = useState<string | null>(null)
   const [reconnecting, setReconnecting] = useState<string | null>(null)
-  const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [groupFilter, setGroupFilter] = useState<'all' | ConnectorGroup>('all')
-  const mountedRef = useMountedRef()
   const openConnector = useCallback((id: string | null) => {
     setEditingConnectorId(id)
     setConnectorSheetOpen(true)
   }, [setEditingConnectorId, setConnectorSheetOpen])
 
-  const refresh = useCallback(async () => {
-    await Promise.all([loadConnectors(), loadAgents(), loadChatrooms()])
-    if (mountedRef.current) setLoaded(true)
-  }, [loadConnectors, loadAgents, loadChatrooms, mountedRef])
-
-  useEffect(() => { void refresh() }, [refresh])
-  useWs('connectors', loadConnectors, 15_000)
-
   // Auto-clear error after 5s
   useEffect(() => {
     if (error) { const t = setTimeout(() => setError(null), 5000); return () => clearTimeout(t) }
@@ -80,38 +70,34 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
   const handleToggle = async (e: React.MouseEvent, c: Connector) => {
     e.stopPropagation()
     const action = c.status === 'running' ? 'stop' : 'start'
-    if (mountedRef.current) {
-      setToggling(c.id)
-      setError(null)
-    }
+    setToggling(c.id)
+    setError(null)
     try {
-      await api('PUT', `/connectors/${c.id}`, { action })
-      await refresh()
+      await connectorActionMutation.mutateAsync({ id: c.id, action })
     } catch (err: unknown) {
       const msg = err instanceof Error && err.message ? err.message : `Failed to ${action}`
-      if (mountedRef.current) setError(msg)
-      await refresh()
+      setError(msg)
     } finally {
-      if (mountedRef.current) setToggling(null)
+      setToggling(null)
     }
   }
 
   const handleReconnect = async (e: React.MouseEvent, c: Connector) => {
     e.stopPropagation()
-    if (mountedRef.current) {
-      setReconnecting(c.id)
-      setError(null)
-    }
+    setReconnecting(c.id)
+    setError(null)
     try {
-      try { await api('PUT', `/connectors/${c.id}`, { action: 'stop' }) } catch { /* may already be stopped */ }
-      await api('PUT', `/connectors/${c.id}`, { action: 'start' })
-      await refresh()
+      try {
+        await connectorActionMutation.mutateAsync({ id: c.id, action: 'stop' })
+      } catch {
+        // Connector may already be stopped.
+      }
+      await connectorActionMutation.mutateAsync({ id: c.id, action: 'start' })
     } catch (err: unknown) {
       const msg = err instanceof Error && err.message ? err.message : 'Failed to reconnect'
-      if (mountedRef.current) setError(msg)
-      await refresh()
+      setError(msg)
     } finally {
-      if (mountedRef.current) setReconnecting(null)
+      setReconnecting(null)
     }
   }
 
@@ -158,7 +144,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
     },
   }
 
-  if (!loaded) {
+  if (connectorsQuery.isPending || agentsQuery.isPending || chatroomsQuery.isPending) {
     return <PageLoader label="Loading connectors..." />
   }