@swarmclawai/swarmclaw 1.2.4 → 1.2.6

package/src/components/tasks/task-sheet.tsx

@@ -1,12 +1,20 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { useAppStore } from '@/stores/use-app-store'
-import { api } from '@/lib/app/api-client'
-import { createTask, updateTask, archiveTask, unarchiveTask } from '@/lib/tasks'
+import { useAgentsQuery } from '@/features/agents/queries'
+import {
+  useAppendTaskCommentMutation,
+  useCreateTaskMutation,
+  useTasksQuery,
+  useUpdateTaskMutation,
+} from '@/features/tasks/queries'
+import { useProjectsQuery } from '@/features/projects/queries'
+import { useAppSettingsQuery } from '@/features/settings/queries'
+import { useProtocolRunsQuery } from '@/features/protocols/queries'
 import { getMissionPath } from '@/lib/app/navigation'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
@@ -43,20 +51,17 @@ export function TaskSheet() {
   const setOpen = useAppStore((s) => s.setTaskSheetOpen)
   const editingId = useAppStore((s) => s.editingTaskId)
   const setEditingId = useAppStore((s) => s.setEditingTaskId)
-  const tasks = useAppStore((s) => s.tasks)
-  const loadTasks = useAppStore((s) => s.loadTasks)
-  const agents = useAppStore((s) => s.agents)
-  const loadAgents = useAppStore((s) => s.loadAgents)
-
-  const projects = useAppStore((s) => s.projects)
-  const loadProjects = useAppStore((s) => s.loadProjects)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
 
   const viewOnly = useAppStore((s) => s.taskSheetViewOnly)
   const setViewOnly = useAppStore((s) => s.setTaskSheetViewOnly)
-
-  const appSettings = useAppStore((s) => s.appSettings)
-  const loadSettings = useAppStore((s) => s.loadSettings)
+  const { data: tasks = {}, isLoading: tasksLoading } = useTasksQuery({ includeArchived: true, enabled: open })
+  const { data: agents = {}, isLoading: agentsLoading } = useAgentsQuery({ enabled: open })
+  const { data: projects = {}, isLoading: projectsLoading } = useProjectsQuery({ enabled: open })
+  const { data: appSettings = {}, isLoading: settingsLoading } = useAppSettingsQuery({ enabled: open })
+  const createTaskMutation = useCreateTaskMutation()
+  const updateTaskMutation = useUpdateTaskMutation()
+  const appendCommentMutation = useAppendTaskCommentMutation()
 
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
@@ -82,69 +87,96 @@ export function TaskSheet() {
   const [qualityGateRequireArtifact, setQualityGateRequireArtifact] = useState(false)
   const [qualityGateRequireReport, setQualityGateRequireReport] = useState(false)
   const [structuredSessionOpen, setStructuredSessionOpen] = useState(false)
-  const [activeStructuredRunId, setActiveStructuredRunId] = useState<string | null>(null)
+  const formInitRef = useRef<string | null>(null)
 
   const editing = editingId ? tasks[editingId] : null
-  const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
+  const agentList = useMemo(
+    () => Object.values(agents).sort((a, b) => a.name.localeCompare(b.name)),
+    [agents],
+  )
+  const { data: linkedProtocolRuns = [] } = useProtocolRunsQuery({
+    taskId: editing?.id || null,
+    limit: 6,
+    enabled: open && !!editing?.id,
+  })
+  const activeStructuredRunId =
+    linkedProtocolRuns.find((run) => !['completed', 'failed', 'cancelled', 'archived'].includes(run.status))?.id || null
 
   useEffect(() => {
-    if (open) {
-      loadAgents()
-      loadProjects()
-      loadSettings()
-      const defaultGateEnabled = appSettings.taskQualityGateEnabled ?? true
-      const defaultGateMinResult = normalizeGateNumber(appSettings.taskQualityGateMinResultChars, 80, 10, 2000)
-      const defaultGateMinEvidence = normalizeGateNumber(appSettings.taskQualityGateMinEvidenceItems, 2, 0, 8)
-      const defaultGateRequireVerification = appSettings.taskQualityGateRequireVerification ?? false
-      const defaultGateRequireArtifact = appSettings.taskQualityGateRequireArtifact ?? false
-      const defaultGateRequireReport = appSettings.taskQualityGateRequireReport ?? false
-      if (editing) {
-        setTitle(editing.title)
-        setDescription(editing.description)
-        setAgentId(editing.agentId)
-        setProjectId(editing.projectId || '')
-        setImages(editing.images || [])
-        setCwd(editing.cwd || '')
-        setFile(editing.file || null)
-        setTags(editing.tags || [])
-        setBlockedBy(editing.blockedBy || [])
-        setDepSearch('')
-        setDepError(null)
-        setDueAt(editing.dueAt ? new Date(editing.dueAt).toISOString().slice(0, 10) : '')
-        setCustomFields(editing.customFields || {})
-        setPriority(editing.priority || '')
-        const gate = (editing.qualityGate || null) as TaskQualityGateConfig | null
-        setQualityGateEnabled(gate?.enabled ?? defaultGateEnabled)
-        setQualityGateMinResultChars(normalizeGateNumber(gate?.minResultChars, defaultGateMinResult, 10, 2000))
-        setQualityGateMinEvidenceItems(normalizeGateNumber(gate?.minEvidenceItems, defaultGateMinEvidence, 0, 8))
-        setQualityGateRequireVerification(gate?.requireVerification ?? defaultGateRequireVerification)
-        setQualityGateRequireArtifact(gate?.requireArtifact ?? defaultGateRequireArtifact)
-        setQualityGateRequireReport(gate?.requireReport ?? defaultGateRequireReport)
-      } else {
-        setTitle('')
-        setDescription('')
-        setAgentId(agentList[0]?.id || '')
-        setProjectId(activeProjectFilter || '')
-        setImages([])
-        setCwd('')
-        setFile(null)
-        setTags([])
-        setBlockedBy([])
-        setDepSearch('')
-        setDepError(null)
-        setDueAt('')
-        setCustomFields({})
-        setPriority('')
-        setQualityGateEnabled(defaultGateEnabled)
-        setQualityGateMinResultChars(defaultGateMinResult)
-        setQualityGateMinEvidenceItems(defaultGateMinEvidence)
-        setQualityGateRequireVerification(defaultGateRequireVerification)
-        setQualityGateRequireArtifact(defaultGateRequireArtifact)
-        setQualityGateRequireReport(defaultGateRequireReport)
-      }
+    if (!open) return
+    if (tasksLoading || agentsLoading || projectsLoading || settingsLoading) return
+
+    const initKey = editingId ?? '__new__'
+    if (formInitRef.current === initKey) return
+
+    const defaultGateEnabled = appSettings.taskQualityGateEnabled ?? true
+    const defaultGateMinResult = normalizeGateNumber(appSettings.taskQualityGateMinResultChars, 80, 10, 2000)
+    const defaultGateMinEvidence = normalizeGateNumber(appSettings.taskQualityGateMinEvidenceItems, 2, 0, 8)
+    const defaultGateRequireVerification = appSettings.taskQualityGateRequireVerification ?? false
+    const defaultGateRequireArtifact = appSettings.taskQualityGateRequireArtifact ?? false
+    const defaultGateRequireReport = appSettings.taskQualityGateRequireReport ?? false
+
+    if (editingId && !editing) return
+
+    if (editing) {
+      setTitle(editing.title)
+      setDescription(editing.description)
+      setAgentId(editing.agentId)
+      setProjectId(editing.projectId || '')
+      setImages(editing.images || [])
+      setCwd(editing.cwd || '')
+      setFile(editing.file || null)
+      setTags(editing.tags || [])
+      setBlockedBy(editing.blockedBy || [])
+      setDepSearch('')
+      setDepError(null)
+      setDueAt(editing.dueAt ? new Date(editing.dueAt).toISOString().slice(0, 10) : '')
+      setCustomFields(editing.customFields || {})
+      setPriority(editing.priority || '')
+      const gate = (editing.qualityGate || null) as TaskQualityGateConfig | null
+      setQualityGateEnabled(gate?.enabled ?? defaultGateEnabled)
+      setQualityGateMinResultChars(normalizeGateNumber(gate?.minResultChars, defaultGateMinResult, 10, 2000))
+      setQualityGateMinEvidenceItems(normalizeGateNumber(gate?.minEvidenceItems, defaultGateMinEvidence, 0, 8))
+      setQualityGateRequireVerification(gate?.requireVerification ?? defaultGateRequireVerification)
+      setQualityGateRequireArtifact(gate?.requireArtifact ?? defaultGateRequireArtifact)
+      setQualityGateRequireReport(gate?.requireReport ?? defaultGateRequireReport)
+      formInitRef.current = initKey
+      return
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, editingId])
+
+    setTitle('')
+    setDescription('')
+    setAgentId(agentList[0]?.id || '')
+    setProjectId(activeProjectFilter || '')
+    setImages([])
+    setCwd('')
+    setFile(null)
+    setTags([])
+    setBlockedBy([])
+    setDepSearch('')
+    setDepError(null)
+    setDueAt('')
+    setCustomFields({})
+    setPriority('')
+    setQualityGateEnabled(defaultGateEnabled)
+    setQualityGateMinResultChars(defaultGateMinResult)
+    setQualityGateMinEvidenceItems(defaultGateMinEvidence)
+    setQualityGateRequireVerification(defaultGateRequireVerification)
+    setQualityGateRequireArtifact(defaultGateRequireArtifact)
+    setQualityGateRequireReport(defaultGateRequireReport)
+    formInitRef.current = initKey
+  }, [
+    activeProjectFilter,
+    agentList,
+    agentsLoading,
+    appSettings,
+    editing,
+    editingId,
+    open,
+    projectsLoading,
+    settingsLoading,
+    tasksLoading,
+  ])
 
   // Update default agent when agents load (only if no agent selected yet)
   useEffect(() => {
@@ -153,27 +185,8 @@ export function TaskSheet() {
     }
   }, [open, editing, agentId, agentList])
 
-  useEffect(() => {
-    if (!editing?.id || !open) {
-      setActiveStructuredRunId(null)
-      return
-    }
-    let cancelled = false
-    void api<Array<{ id: string; status: string }>>('GET', `/protocols/runs?taskId=${encodeURIComponent(editing.id)}&limit=6`)
-      .then((runs) => {
-        if (cancelled) return
-        const active = (Array.isArray(runs) ? runs : []).find((run) => !['completed', 'failed', 'cancelled', 'archived'].includes(run.status))
-        setActiveStructuredRunId(active?.id || null)
-      })
-      .catch(() => {
-        if (!cancelled) setActiveStructuredRunId(null)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [editing?.id, open])
-
   const onClose = () => {
+    formInitRef.current = null
     setOpen(false)
     setEditingId(null)
   }
@@ -202,13 +215,13 @@ export function TaskSheet() {
     } as Partial<BoardTask> & { title: string; description: string; agentId: string }
     try {
       if (editing) {
-        const res = await updateTask(editing.id, payload)
+        const res = await updateTaskMutation.mutateAsync({ id: editing.id, patch: payload })
         if (res && typeof res === 'object' && 'error' in res) {
           setDepError(String((res as unknown as Record<string, unknown>).error))
           return
         }
       } else {
-        const res = await createTask(payload)
+        const res = await createTaskMutation.mutateAsync(payload)
         if (res && typeof res === 'object' && 'error' in res) {
           setDepError(String((res as unknown as Record<string, unknown>).error))
           return
@@ -219,7 +232,6 @@ export function TaskSheet() {
       return
     }
     setDepError(null)
-    await loadTasks()
     onClose()
   }
 
@@ -244,24 +256,21 @@ export function TaskSheet() {
 
   const handleArchive = async () => {
     if (editing) {
-      await archiveTask(editing.id)
-      await loadTasks()
+      await updateTaskMutation.mutateAsync({ id: editing.id, patch: { status: 'archived' } })
       onClose()
     }
   }
 
   const handleUnarchive = async () => {
     if (editing) {
-      await unarchiveTask(editing.id)
-      await loadTasks()
+      await updateTaskMutation.mutateAsync({ id: editing.id, patch: { status: 'backlog' } })
       onClose()
     }
   }
 
   const handleQueue = async () => {
     if (editing && editing.status === 'backlog') {
-      await updateTask(editing.id, { status: 'queued' })
-      await loadTasks()
+      await updateTaskMutation.mutateAsync({ id: editing.id, patch: { status: 'queued' } })
       onClose()
     }
   }
@@ -269,14 +278,13 @@ export function TaskSheet() {
   const handleAddComment = async () => {
     if (!editing || !commentText.trim()) return
     const c: TaskComment = {
-      id: crypto.randomUUID().slice(0, 8),
+      id: Math.random().toString(36).slice(2, 10),
       author: 'You',
       text: commentText.trim(),
       createdAt: Date.now(),
     }
     // Use atomic append to avoid race conditions with queue-added comments
-    await updateTask(editing.id, { appendComment: c } as Partial<BoardTask> & { appendComment: TaskComment })
-    await loadTasks()
+    await appendCommentMutation.mutateAsync({ id: editing.id, comment: c })
     setCommentText('')
   }
 

package/src/features/agents/queries.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchAgents } from '@/lib/agents'
+import type { Agent } from '@/types'
+
+type QueryOptions = {
+  enabled?: boolean
+}
+
+export const agentQueryKeys = {
+  all: ['agents'] as const,
+}
+
+export function useAgentsQuery(options: QueryOptions = {}) {
+  return useQuery<Record<string, Agent>>({
+    queryKey: agentQueryKeys.all,
+    queryFn: fetchAgents,
+    enabled: options.enabled,
+    staleTime: 60_000,
+  })
+}

package/src/features/chatrooms/queries.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/app/api-client'
+import type { Chatroom } from '@/types'
+
+type QueryOptions = {
+  enabled?: boolean
+}
+
+export const chatroomQueryKeys = {
+  all: ['chatrooms'] as const,
+}
+
+export function useChatroomsQuery(options: QueryOptions = {}) {
+  return useQuery<Record<string, Chatroom>>({
+    queryKey: chatroomQueryKeys.all,
+    queryFn: () => api<Record<string, Chatroom>>('GET', '/chatrooms'),
+    enabled: options.enabled,
+    staleTime: 30_000,
+  })
+}

package/src/features/chats/queries.ts

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/app/api-client'
+import type { Message, Session } from '@/types'
+
+export const chatQueryKeys = {
+  all: ['chats'] as const,
+  lists: () => ['chats', 'list'] as const,
+  detail: (id: string) => ['chats', id] as const,
+  messages: (sessionId: string) => ['chats', sessionId, 'messages'] as const,
+}
+
+export function useChatListQuery() {
+  return useQuery<Session[]>({
+    queryKey: chatQueryKeys.lists(),
+    queryFn: () => api<Session[]>('GET', '/chats'),
+    staleTime: 10_000,
+  })
+}
+
+export function useMessagesQuery(sessionId: string) {
+  return useQuery<Message[]>({
+    queryKey: chatQueryKeys.messages(sessionId),
+    queryFn: () => api<Message[]>('GET', `/chats/${sessionId}/messages`),
+    enabled: !!sessionId,
+    staleTime: 5_000,
+  })
+}

package/src/features/connectors/queries.ts

@@ -0,0 +1,145 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '@/lib/app/api-client'
+import type {
+  Connector,
+  ConnectorAccessMutationAction,
+  ConnectorAccessMutationResponse,
+  ConnectorAccessSnapshot,
+} from '@/types'
+
+type QueryOptions = {
+  enabled?: boolean
+  refetchInterval?: number | false
+}
+
+interface SaveConnectorInput {
+  id?: string | null
+  payload: Record<string, unknown>
+}
+
+async function invalidateConnectorQueries(queryClient: ReturnType<typeof useQueryClient>) {
+  await queryClient.invalidateQueries({ queryKey: connectorQueryKeys.all })
+}
+
+export const connectorQueryKeys = {
+  all: ['connectors'] as const,
+  list: () => ['connectors', 'list'] as const,
+  detail: (id: string) => ['connectors', 'detail', id] as const,
+  access: (id: string) => ['connectors', 'access', id] as const,
+}
+
+export function useConnectorsQuery(options: QueryOptions = {}) {
+  return useQuery<Record<string, Connector>>({
+    queryKey: connectorQueryKeys.list(),
+    queryFn: () => api<Record<string, Connector>>('GET', '/connectors'),
+    enabled: options.enabled,
+    staleTime: 10_000,
+  })
+}
+
+export function useConnectorQuery(id: string | null | undefined, options: QueryOptions = {}) {
+  return useQuery<Connector>({
+    queryKey: connectorQueryKeys.detail(id || 'unknown'),
+    queryFn: () => api<Connector>('GET', `/connectors/${id}`),
+    enabled: Boolean(id) && options.enabled !== false,
+    staleTime: 2_000,
+    refetchInterval: options.refetchInterval,
+  })
+}
+
+export function useConnectorAccessQuery(id: string | null | undefined, options: QueryOptions = {}) {
+  return useQuery<ConnectorAccessSnapshot>({
+    queryKey: connectorQueryKeys.access(id || 'unknown'),
+    queryFn: () => api<ConnectorAccessSnapshot>('GET', `/connectors/${id}/access`),
+    enabled: Boolean(id) && options.enabled !== false,
+    staleTime: 5_000,
+  })
+}
+
+export function useConnectorDoctorMutation() {
+  return useMutation({
+    mutationFn: (payload: Record<string, unknown>) =>
+      api<{
+        warnings?: string[]
+        policy?: Record<string, unknown> | null
+      }>('POST', '/connectors/doctor', payload),
+  })
+}
+
+export function useSaveConnectorMutation() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, payload }: SaveConnectorInput) =>
+      id ? api('PUT', `/connectors/${id}`, payload) : api('POST', '/connectors', payload),
+    onSuccess: async (_data, variables) => {
+      await Promise.all([
+        invalidateConnectorQueries(queryClient),
+        variables.id
+          ? queryClient.invalidateQueries({ queryKey: connectorQueryKeys.detail(variables.id) })
+          : Promise.resolve(),
+      ])
+    },
+  })
+}
+
+export function useConnectorActionMutation() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, action }: { id: string; action: string }) =>
+      api('PUT', `/connectors/${id}`, { action }),
+    onSuccess: async (_data, variables) => {
+      await Promise.all([
+        invalidateConnectorQueries(queryClient),
+        queryClient.invalidateQueries({ queryKey: connectorQueryKeys.detail(variables.id) }),
+      ])
+    },
+  })
+}
+
+export function useDeleteConnectorMutation() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => api('DELETE', `/connectors/${id}`),
+    onSuccess: async (_data, id) => {
+      await Promise.all([
+        invalidateConnectorQueries(queryClient),
+        queryClient.removeQueries({ queryKey: connectorQueryKeys.detail(id) }),
+        queryClient.removeQueries({ queryKey: connectorQueryKeys.access(id) }),
+      ])
+    },
+  })
+}
+
+export function useConnectorAccessMutation(id: string | null | undefined) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({
+      action,
+      senderId,
+      senderIdAlt,
+      code,
+      dmAddressingMode,
+    }: {
+      action: ConnectorAccessMutationAction
+      senderId?: string | null
+      senderIdAlt?: string | null
+      code?: string | null
+      dmAddressingMode?: 'open' | 'addressed' | null
+    }) => api<ConnectorAccessMutationResponse>('PUT', `/connectors/${id}/access`, {
+      action,
+      senderId: senderId || null,
+      senderIdAlt: senderIdAlt || null,
+      code: code || null,
+      dmAddressingMode: dmAddressingMode || null,
+    }),
+    onSuccess: async (result) => {
+      if (id) {
+        queryClient.setQueryData(connectorQueryKeys.access(id), result.snapshot)
+        await Promise.all([
+          queryClient.invalidateQueries({ queryKey: connectorQueryKeys.detail(id) }),
+          invalidateConnectorQueries(queryClient),
+        ])
+      }
+    },
+  })
+}

package/src/features/credentials/queries.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { createCredential, fetchCredentials } from '@/lib/chat/chats'
+import type { Credentials } from '@/types'
+
+type QueryOptions = {
+  enabled?: boolean
+}
+
+export interface CreateCredentialInput {
+  provider: string
+  name: string
+  apiKey: string
+}
+
+export const credentialQueryKeys = {
+  all: ['credentials'] as const,
+}
+
+export function useCredentialsQuery(options: QueryOptions = {}) {
+  return useQuery<Credentials>({
+    queryKey: credentialQueryKeys.all,
+    queryFn: fetchCredentials,
+    enabled: options.enabled,
+    staleTime: 30_000,
+  })
+}
+
+export function useCreateCredentialMutation() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ provider, name, apiKey }: CreateCredentialInput) =>
+      createCredential(provider, name, apiKey),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: credentialQueryKeys.all })
+    },
+  })
+}

package/src/features/extensions/queries.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/app/api-client'
+
+type QueryOptions = {
+  enabled?: boolean
+}
+
+export interface ConnectorExtensionOption {
+  id: string
+  name: string
+  description?: string
+}
+
+export const extensionQueryKeys = {
+  all: ['extensions'] as const,
+  connectorUi: () => ['extensions', 'connector-ui'] as const,
+}
+
+export function useConnectorExtensionOptionsQuery(options: QueryOptions = {}) {
+  return useQuery<ConnectorExtensionOption[]>({
+    queryKey: extensionQueryKeys.connectorUi(),
+    queryFn: () => api<ConnectorExtensionOption[]>('GET', '/extensions/ui?type=connectors'),
+    enabled: options.enabled,
+    staleTime: 60_000,
+  })
+}

package/src/features/external-agents/queries.ts

@@ -0,0 +1,36 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '@/lib/app/api-client'
+import type { ExternalAgentRuntime } from '@/types'
+
+type QueryOptions = {
+  enabled?: boolean
+}
+
+export const externalAgentQueryKeys = {
+  all: ['external-agents'] as const,
+}
+
+export function useExternalAgentsQuery(options: QueryOptions = {}) {
+  return useQuery<ExternalAgentRuntime[]>({
+    queryKey: externalAgentQueryKeys.all,
+    queryFn: () => api<ExternalAgentRuntime[]>('GET', '/external-agents'),
+    enabled: options.enabled,
+    staleTime: 20_000,
+  })
+}
+
+export function useExternalAgentRuntimeMutation() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({
+      runtimeId,
+      action,
+    }: {
+      runtimeId: string
+      action: 'activate' | 'drain' | 'cordon' | 'restart'
+    }) => api('PUT', `/external-agents/${runtimeId}`, { action }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: externalAgentQueryKeys.all })
+    },
+  })
+}