@swarmclawai/swarmclaw 1.2.4 → 1.2.5

package/src/components/skills/skills-workspace.tsx

@@ -6,10 +6,8 @@ import ReactMarkdown from 'react-markdown'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import { toast } from 'sonner'
-import { api } from '@/lib/app/api-client'
 import { dedup } from '@/lib/shared-utils'
 import { useMountedRef } from '@/hooks/use-mounted-ref'
-import { useWs } from '@/hooks/use-ws'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { CodeBlock } from '@/components/chat/code-block'
@@ -18,51 +16,54 @@ import type {
   Agent,
   ClawHubSkill,
   Skill,
-  SkillCommandDispatch,
-  SkillInvocationConfig,
   SkillSuggestion,
 } from '@/types'
+import { useAgentsQuery } from '@/features/agents/queries'
+import {
+  useApproveSkillSuggestionMutation,
+  useClawHubPreviewMutation,
+  useClawHubSearchMutation,
+  useDeleteSkillMutation,
+  useGenerateSkillSuggestionMutation,
+  useInstallClawHubSkillMutation,
+  useRejectSkillSuggestionMutation,
+  useSkillsQuery,
+  useSkillSuggestionsQuery,
+  type ClawHubPreview,
+} from '@/features/skills/queries'
 
 type SkillScopeFilter = 'all' | 'global' | 'agent'
 type SkillSort = 'updated' | 'name'
 type HubSort = 'popular' | 'name' | 'updated'
 
-interface ClawHubSearchResponse {
-  skills: ClawHubSkill[]
-  total: number
-  page: number
-  nextCursor?: string | null
-  error?: string
-}
-
-type ClawHubPreview = Partial<Skill> & {
-  name: string
-  content: string
-  description?: string
-  invocation?: SkillInvocationConfig | null
-  commandDispatch?: SkillCommandDispatch | null
-}
-
 const HUB_PAGE_SIZE = 18
 
 export function SkillsWorkspace() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const mountedRef = useMountedRef()
-
-  const skills = useAppStore((s) => s.skills)
-  const loadSkills = useAppStore((s) => s.loadSkills)
-  const agents = useAppStore((s) => s.agents)
-  const loadAgents = useAppStore((s) => s.loadAgents)
+  const skillsQuery = useSkillsQuery()
+  const skills = useMemo(() => skillsQuery.data ?? {}, [skillsQuery.data])
+  const agentsQuery = useAgentsQuery()
+  const suggestionsQuery = useSkillSuggestionsQuery()
+  const generateSuggestionMutation = useGenerateSkillSuggestionMutation()
+  const approveSuggestionMutation = useApproveSkillSuggestionMutation()
+  const rejectSuggestionMutation = useRejectSkillSuggestionMutation()
+  const clawHubSearchMutation = useClawHubSearchMutation()
+  const clawHubPreviewMutation = useClawHubPreviewMutation()
+  const installClawHubSkillMutation = useInstallClawHubSkillMutation()
+  const deleteSkillMutation = useDeleteSkillMutation()
   const currentAgentId = useAppStore((s) => s.currentAgentId)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
 
+  const suggestions = suggestionsQuery.data ?? []
+  const agents = agentsQuery.data ?? {}
+
   const activeTab = searchParams.get('tab') === 'clawhub' ? 'clawhub' : 'skills'
   const selectedSkillId = activeTab === 'skills' ? searchParams.get('skill') : null
 
-  const [ready, setReady] = useState(false)
   const [libraryQuery, setLibraryQuery] = useState('')
   const [libraryScope, setLibraryScope] = useState<SkillScopeFilter>('all')
   const [librarySort, setLibrarySort] = useState<SkillSort>('updated')
@@ -70,8 +71,6 @@ export function SkillsWorkspace() {
   const [deleteTarget, setDeleteTarget] = useState<Skill | null>(null)
   const [deletingSkillId, setDeletingSkillId] = useState<string | null>(null)
 
-  const [suggestions, setSuggestions] = useState<SkillSuggestion[]>([])
-  const [suggestionsLoading, setSuggestionsLoading] = useState(false)
   const [suggestionActionId, setSuggestionActionId] = useState<string | null>(null)
   const [generatingSuggestion, setGeneratingSuggestion] = useState(false)
 
@@ -93,16 +92,6 @@ export function SkillsWorkspace() {
   const [installingHubId, setInstallingHubId] = useState<string | null>(null)
   const hubSearchRequestIdRef = useRef(0)
 
-  useEffect(() => {
-    let active = true
-    void Promise.all([loadSkills(), loadAgents()]).finally(() => {
-      if (active && mountedRef.current) setReady(true)
-    })
-    return () => {
-      active = false
-    }
-  }, [loadAgents, loadSkills, mountedRef])
-
   useEffect(() => {
     if (activeTab !== 'clawhub') {
       setSelectedHubSkill(null)
@@ -110,8 +99,6 @@ export function SkillsWorkspace() {
     }
   }, [activeTab])
 
-  useWs('skills', () => { void loadSkills() })
-
   const skillList = useMemo(() => {
     return Object.values(skills).filter((skill) => !activeProjectFilter || skill.projectId === activeProjectFilter)
   }, [activeProjectFilter, skills])
@@ -141,26 +128,6 @@ export function SkillsWorkspace() {
     setSkillSheetOpen(true)
   }, [setEditingSkillId, setSkillSheetOpen])
 
-  const loadSuggestions = useCallback(async () => {
-    setSuggestionsLoading(true)
-    try {
-      const result = await api<SkillSuggestion[]>('GET', '/skill-suggestions')
-      if (!mountedRef.current) return
-      setSuggestions(Array.isArray(result) ? result : [])
-    } catch (err) {
-      if (!mountedRef.current) return
-      toast.error(err instanceof Error ? err.message : 'Failed to load skill suggestions')
-    } finally {
-      if (mountedRef.current) setSuggestionsLoading(false)
-    }
-  }, [mountedRef])
-
-  useEffect(() => {
-    void loadSuggestions()
-  }, [loadSuggestions])
-
-  useWs('skill_suggestions', () => { void loadSuggestions() })
-
   const handleGenerateSuggestion = useCallback(async () => {
     if (!currentSessionId) {
       toast.error('Open a chat first so SwarmClaw has a session to learn from.')
@@ -168,41 +135,38 @@ export function SkillsWorkspace() {
     }
     setGeneratingSuggestion(true)
     try {
-      await api<SkillSuggestion>('POST', '/skill-suggestions', { sessionId: currentSessionId })
+      await generateSuggestionMutation.mutateAsync(currentSessionId)
       toast.success('Drafted a skill suggestion from the current conversation.')
-      await loadSuggestions()
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Failed to generate a skill suggestion')
     } finally {
       if (mountedRef.current) setGeneratingSuggestion(false)
     }
-  }, [currentSessionId, loadSuggestions, mountedRef])
+  }, [currentSessionId, generateSuggestionMutation, mountedRef])
 
   const handleApproveSuggestion = useCallback(async (id: string) => {
     setSuggestionActionId(id)
     try {
-      await api('POST', `/skill-suggestions/${id}/approve`)
+      await approveSuggestionMutation.mutateAsync(id)
       toast.success('Skill suggestion approved and saved.')
-      await Promise.all([loadSuggestions(), loadSkills()])
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Failed to approve the skill suggestion')
     } finally {
       if (mountedRef.current) setSuggestionActionId(null)
     }
-  }, [loadSkills, loadSuggestions, mountedRef])
+  }, [approveSuggestionMutation, mountedRef])
 
   const handleRejectSuggestion = useCallback(async (id: string) => {
     setSuggestionActionId(id)
     try {
-      await api('POST', `/skill-suggestions/${id}/reject`)
+      await rejectSuggestionMutation.mutateAsync(id)
       toast.success('Skill suggestion dismissed.')
-      await loadSuggestions()
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Failed to dismiss the skill suggestion')
     } finally {
       if (mountedRef.current) setSuggestionActionId(null)
     }
-  }, [loadSuggestions, mountedRef])
+  }, [mountedRef, rejectSuggestionMutation])
 
   const searchHub = useCallback(async (query: string, page: number, append = false, cursor?: string | null) => {
     const requestId = hubSearchRequestIdRef.current + 1
@@ -211,13 +175,12 @@ export function SkillsWorkspace() {
     setHubError(null)
 
     try {
-      const params = new URLSearchParams({
-        q: query,
-        page: String(page),
-        limit: String(HUB_PAGE_SIZE),
+      const response = await clawHubSearchMutation.mutateAsync({
+        query,
+        page,
+        limit: HUB_PAGE_SIZE,
+        cursor,
       })
-      if (cursor) params.set('cursor', cursor)
-      const response = await api<ClawHubSearchResponse>('GET', `/clawhub/search?${params.toString()}`)
       if (!mountedRef.current || requestId !== hubSearchRequestIdRef.current) return
 
       if (response.error) setHubError(response.error)
@@ -233,7 +196,7 @@ export function SkillsWorkspace() {
     } finally {
       if (mountedRef.current && requestId === hubSearchRequestIdRef.current) setHubLoading(false)
     }
-  }, [mountedRef])
+  }, [clawHubSearchMutation, mountedRef])
 
   useEffect(() => {
     if (activeTab !== 'clawhub' || selectedHubSkill) return
@@ -252,7 +215,7 @@ export function SkillsWorkspace() {
     setHubPreviewLoadingId(selectedHubSkill.id)
     setHubPreviewError(null)
 
-    void api<ClawHubPreview>('POST', '/clawhub/preview', {
+    void clawHubPreviewMutation.mutateAsync({
       name: selectedHubSkill.name,
       description: selectedHubSkill.description,
       author: selectedHubSkill.author,
@@ -271,7 +234,7 @@ export function SkillsWorkspace() {
     return () => {
       active = false
     }
-  }, [hubPreviewCache, mountedRef, selectedHubSkill])
+  }, [clawHubPreviewMutation, hubPreviewCache, mountedRef, selectedHubSkill])
 
   const installedHubIds = useMemo(() => {
     const ids = new Set<string>()
@@ -335,7 +298,7 @@ export function SkillsWorkspace() {
   const handleInstallHubSkill = useCallback(async (skill: ClawHubSkill) => {
     setInstallingHubId(skill.id)
     try {
-      await api('POST', '/clawhub/install', {
+      await installClawHubSkillMutation.mutateAsync({
         name: skill.name,
         description: skill.description,
         url: skill.url,
@@ -344,21 +307,19 @@ export function SkillsWorkspace() {
         content: hubPreviewCache[skill.id]?.content,
       })
       toast.success(`Installed "${skill.name}"`)
-      await loadSkills()
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Install failed')
     } finally {
       if (mountedRef.current) setInstallingHubId(null)
     }
-  }, [hubPreviewCache, loadSkills, mountedRef])
+  }, [hubPreviewCache, installClawHubSkillMutation, mountedRef])
 
   const confirmDeleteSkill = useCallback(async () => {
     if (!deleteTarget) return
     setDeletingSkillId(deleteTarget.id)
     try {
-      await api('DELETE', `/skills/${deleteTarget.id}`)
+      await deleteSkillMutation.mutateAsync(deleteTarget.id)
       toast.success('Skill deleted')
-      await loadSkills()
       if (selectedSkillId === deleteTarget.id) {
         setPageState({ skill: null }, 'replace')
       }
@@ -368,9 +329,9 @@ export function SkillsWorkspace() {
     } finally {
       if (mountedRef.current) setDeletingSkillId(null)
     }
-  }, [deleteTarget, loadSkills, mountedRef, selectedSkillId, setPageState])
+  }, [deleteSkillMutation, deleteTarget, mountedRef, selectedSkillId, setPageState])
 
-  if (!ready) {
+  if (skillsQuery.isPending || agentsQuery.isPending) {
     return (
       <div className="flex-1 flex items-center justify-center px-6">
         <div className="flex items-center gap-3 text-[13px] text-text-3/65">
@@ -573,10 +534,10 @@ export function SkillsWorkspace() {
               </div>
             )}
 
-            {(suggestionsLoading || draftCount > 0) ? (
+            {(suggestionsQuery.isPending || draftCount > 0) ? (
               <SuggestionsPanel
                 suggestions={suggestions}
-                loading={suggestionsLoading}
+                loading={suggestionsQuery.isPending}
                 busyId={suggestionActionId}
                 onApprove={handleApproveSuggestion}
                 onReject={handleRejectSuggestion}

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

@@ -4,30 +4,40 @@ import { useState, useCallback, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useAppStore } from '@/stores/use-app-store'
 import { getMissionPath, useNavigate } from '@/lib/app/navigation'
-import { updateTask, archiveTask } from '@/lib/tasks'
+import { useUpdateTaskMutation } from '@/features/tasks/queries'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { timeAgo } from '@/lib/time-format'
 import { InfoChip } from '@/components/ui/info-chip'
-import type { BoardTask } from '@/types'
+import type { Agent, BoardTask, Project } from '@/types'
 
 interface TaskCardProps {
   task: BoardTask
+  agents: Record<string, Agent>
+  projects: Record<string, Project>
+  tasksById: Record<string, BoardTask>
   selectionMode?: boolean
   selected?: boolean
   onToggleSelect?: (id: string) => void
   index?: number
 }
 
-export function TaskCard({ task, selectionMode, selected, onToggleSelect, index = 0 }: TaskCardProps) {
-  const agents = useAppStore((s) => s.agents)
-  const projects = useAppStore((s) => s.projects)
+export function TaskCard({
+  task,
+  agents,
+  projects,
+  tasksById,
+  selectionMode,
+  selected,
+  onToggleSelect,
+  index = 0,
+}: TaskCardProps) {
   const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
-  const loadTasks = useAppStore((s) => s.loadTasks)
   const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
   const navigateTo = useNavigate()
   const router = useRouter()
+  const updateTaskMutation = useUpdateTaskMutation()
   const [dragging, setDragging] = useState(false)
   const [confirmArchive, setConfirmArchive] = useState(false)
   const [allowDrag, setAllowDrag] = useState(false)
@@ -48,7 +58,6 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
     }
   }, [])
 
-  const tasks = useAppStore((s) => s.tasks)
   const agent = agents[task.agentId]
   const project = task.projectId ? projects[task.projectId] : null
   const creatorAgent = task.createdByAgentId ? agents[task.createdByAgentId] : null
@@ -78,14 +87,12 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
 
   const handleQueue = async (e: React.MouseEvent) => {
     e.stopPropagation()
-    await updateTask(task.id, { status: 'queued' })
-    await loadTasks()
+    await updateTaskMutation.mutateAsync({ id: task.id, patch: { status: 'queued' } })
   }
 
   const handleArchive = async (e: React.MouseEvent) => {
     e.stopPropagation()
-    await archiveTask(task.id)
-    await loadTasks()
+    await updateTaskMutation.mutateAsync({ id: task.id, patch: { status: 'archived' } })
   }
 
   const handleViewSession = (e: React.MouseEvent) => {
@@ -147,7 +154,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
         )}
         {isBlocked && (
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-rose-400 shrink-0 mt-0.5">
-            <title>{`Blocked by: ${(task.blockedBy || []).map((bid) => tasks[bid]?.title || bid).join(', ')}`}</title>
+            <title>{`Blocked by: ${(task.blockedBy || []).map((bid) => tasksById[bid]?.title || bid).join(', ')}`}</title>
             <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
           </svg>
         )}
@@ -325,7 +332,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
         {Array.isArray(task.blocks) && task.blocks.length > 0 && (
           <span
             className="px-1.5 py-0.5 rounded-[5px] bg-amber-500/10 text-amber-400 text-[10px] font-600"
-            title={`Blocks: ${task.blocks.map((bid) => tasks[bid]?.title || bid).join(', ')}`}
+            title={`Blocks: ${task.blocks.map((bid) => tasksById[bid]?.title || bid).join(', ')}`}
           >
             blocks {task.blocks.length}
           </span>

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

@@ -2,9 +2,8 @@
 
 import { useState, useCallback } from 'react'
 import { TaskCard } from './task-card'
-import { createTask } from '@/lib/tasks'
-import { useAppStore } from '@/stores/use-app-store'
-import type { BoardTask, BoardTaskStatus } from '@/types'
+import { useCreateTaskMutation } from '@/features/tasks/queries'
+import type { Agent, BoardTask, BoardTaskStatus, Project } from '@/types'
 
 const COLUMN_CONFIG: Record<BoardTaskStatus, { label: string; color: string; dot: string }> = {
   backlog: { label: 'Backlog', color: 'text-text-3', dot: 'bg-white/20' },
@@ -20,6 +19,9 @@ const COLUMN_CONFIG: Record<BoardTaskStatus, { label: string; color: string; dot
 interface Props {
   status: BoardTaskStatus
   tasks: BoardTask[]
+  agents: Record<string, Agent>
+  projects: Record<string, Project>
+  tasksById: Record<string, BoardTask>
   onDrop: (taskId: string, newStatus: BoardTaskStatus) => void
   selectionMode?: boolean
   selectedIds?: Set<string>
@@ -27,12 +29,23 @@ interface Props {
   onSelectAll?: () => void
 }
 
-export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds, onToggleSelect, onSelectAll }: Props) {
+export function TaskColumn({
+  status,
+  tasks,
+  agents,
+  projects,
+  tasksById,
+  onDrop,
+  selectionMode,
+  selectedIds,
+  onToggleSelect,
+  onSelectAll,
+}: Props) {
   const config = COLUMN_CONFIG[status]
   const [dragOver, setDragOver] = useState(false)
   const [quickAddValue, setQuickAddValue] = useState('')
   const [adding, setAdding] = useState(false)
-  const loadTasks = useAppStore((s) => s.loadTasks)
+  const createTaskMutation = useCreateTaskMutation()
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault()
@@ -58,8 +71,7 @@ export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds,
     if (!title || adding) return
     setAdding(true)
     try {
-      await createTask({ title, description: '', agentId: '', status })
-      await loadTasks()
+      await createTaskMutation.mutateAsync({ title, description: '', agentId: '', status })
       setQuickAddValue('')
     } finally {
       setAdding(false)
@@ -116,6 +128,9 @@ export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds,
           <TaskCard
             key={task.id}
             task={task}
+            agents={agents}
+            projects={projects}
+            tasksById={tasksById}
             index={idx}
             selectionMode={selectionMode}
             selected={selectedIds?.has(task.id)}

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

@@ -1,9 +1,9 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
-import { useWs } from '@/hooks/use-ws'
-import { api } from '@/lib/app/api-client'
+import { useAgentsQuery } from '@/features/agents/queries'
+import { useClearDoneTasksMutation, useTasksQuery } from '@/features/tasks/queries'
 import type { BoardTaskStatus } from '@/types'
 import { EmptyState } from '@/components/shared/empty-state'
 import { SearchInput } from '@/components/ui/search-input'
@@ -20,20 +20,18 @@ const STATUS_DOT: Record<BoardTaskStatus, string> = {
 }
 
 export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
-  const tasks = useAppStore((s) => s.tasks)
-  const loadTasks = useAppStore((s) => s.loadTasks)
-  const agents = useAppStore((s) => s.agents)
   const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
+  const { data: tasks = {} } = useTasksQuery({ includeArchived: true })
+  const { data: agents = {} } = useAgentsQuery()
+  const clearDoneMutation = useClearDoneTasksMutation()
   const [search, setSearch] = useState('')
   const [clearing, setClearing] = useState(false)
 
-  useEffect(() => { loadTasks() }, [loadTasks])
-  useWs('tasks', loadTasks, 5000)
-
   const sorted = useMemo(() =>
     Object.values(tasks)
+      .filter((t) => t.status !== 'archived')
       .filter((t) => !activeProjectFilter || t.projectId === activeProjectFilter)
       .sort((a, b) => b.updatedAt - a.updatedAt),
     [tasks, activeProjectFilter],
@@ -58,8 +56,7 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
   const handleClearDone = async () => {
     setClearing(true)
     try {
-      await api('DELETE', '/tasks?filter=done')
-      await loadTasks()
+      await clearDoneMutation.mutateAsync()
     } catch { /* silent */ }
     setClearing(false)
   }