@swarmclawai/swarmclaw 1.2.4 → 1.2.6

package/src/components/providers/provider-list.tsx

@@ -1,12 +1,26 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { toast } from 'sonner'
 import { OpenClawDeployPanel } from '@/components/openclaw/openclaw-deploy-panel'
 import { useAppStore } from '@/stores/use-app-store'
-import { useWs } from '@/hooks/use-ws'
-import { api } from '@/lib/app/api-client'
-import type { Credential, GatewayProfile } from '@/types'
+import {
+  useProviderConfigsQuery,
+  useProvidersQuery,
+  useToggleProviderMutation,
+  useDeleteProviderMutation,
+} from '@/features/providers/queries'
+import { useCredentialsQuery, useCreateCredentialMutation } from '@/features/credentials/queries'
+import {
+  useCloneGatewayProfileMutation,
+  useDeleteGatewayProfileMutation,
+  useGatewayHealthCheckMutation,
+  useGatewayProfilesQuery,
+  useSaveGatewayProfileMutation,
+  useVerifyOpenClawDeployMutation,
+} from '@/features/gateways/queries'
+import { useExternalAgentsQuery, useExternalAgentRuntimeMutation } from '@/features/external-agents/queries'
+import type { GatewayProfile } from '@/types'
 import { dedup } from '@/lib/shared-utils'
 import { PageLoader } from '@/components/ui/page-loader'
 import { StatusDot } from '@/components/ui/status-dot'
@@ -30,33 +44,34 @@ function formatRuntimeTimestamp(value: number | null | undefined): string {
 }
 
 export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
-  const providers = useAppStore((s) => s.providers)
-  const providerConfigs = useAppStore((s) => s.providerConfigs)
-  const loadProviders = useAppStore((s) => s.loadProviders)
-  const loadProviderConfigs = useAppStore((s) => s.loadProviderConfigs)
-  const gatewayProfiles = useAppStore((s) => s.gatewayProfiles)
-  const loadGatewayProfiles = useAppStore((s) => s.loadGatewayProfiles)
-  const externalAgents = useAppStore((s) => s.externalAgents)
-  const loadExternalAgents = useAppStore((s) => s.loadExternalAgents)
-  const credentials = useAppStore((s) => s.credentials)
-  const loadCredentials = useAppStore((s) => s.loadCredentials)
   const setProviderSheetOpen = useAppStore((s) => s.setProviderSheetOpen)
   const setEditingProviderId = useAppStore((s) => s.setEditingProviderId)
   const setGatewaySheetOpen = useAppStore((s) => s.setGatewaySheetOpen)
   const setEditingGatewayId = useAppStore((s) => s.setEditingGatewayId)
-  const [loaded, setLoaded] = useState(false)
   const [deployDraft, setDeployDraft] = useState<OpenClawDeployDraft | null>(null)
-  const [savingDeploy, setSavingDeploy] = useState(false)
+  const providersQuery = useProvidersQuery()
+  const providerConfigsQuery = useProviderConfigsQuery()
+  const gatewayProfilesQuery = useGatewayProfilesQuery()
+  const externalAgentsQuery = useExternalAgentsQuery()
+  const credentialsQuery = useCredentialsQuery()
+  const toggleProviderMutation = useToggleProviderMutation()
+  const deleteProviderMutation = useDeleteProviderMutation()
+  const createCredentialMutation = useCreateCredentialMutation()
+  const saveGatewayMutation = useSaveGatewayProfileMutation()
+  const deleteGatewayMutation = useDeleteGatewayProfileMutation()
+  const healthCheckGatewayMutation = useGatewayHealthCheckMutation()
+  const verifyDeployMutation = useVerifyOpenClawDeployMutation()
+  const cloneGatewayMutation = useCloneGatewayProfileMutation()
+  const runtimeActionMutation = useExternalAgentRuntimeMutation()
 
-  const refresh = useCallback(async () => {
-    await Promise.all([loadProviders(), loadProviderConfigs(), loadGatewayProfiles(), loadExternalAgents(), loadCredentials()])
-    setLoaded(true)
-  }, [loadProviders, loadProviderConfigs, loadGatewayProfiles, loadExternalAgents, loadCredentials])
-
-  useEffect(() => { void refresh() }, [refresh])
-  useWs('providers', loadProviders, 20_000)
-  useWs('gateways', loadGatewayProfiles, 20_000)
-  useWs('external_agents', loadExternalAgents, 20_000)
+  const providers = providersQuery.data ?? []
+  const providerConfigs = providerConfigsQuery.data ?? []
+  const gatewayProfiles = gatewayProfilesQuery.data ?? []
+  const externalAgents = externalAgentsQuery.data ?? []
+  const credentials = credentialsQuery.data ?? {}
+  const savingDeploy = createCredentialMutation.isPending
+    || verifyDeployMutation.isPending
+    || saveGatewayMutation.isPending
 
   const handleEdit = (id: string) => {
     setEditingProviderId(id)
@@ -65,14 +80,12 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
 
   const handleToggle = async (e: React.MouseEvent, id: string, currentEnabled: boolean) => {
     e.stopPropagation()
-    await api('PUT', `/providers/${id}`, { isEnabled: !currentEnabled })
-    await Promise.all([loadProviderConfigs(), loadProviders()])
+    await toggleProviderMutation.mutateAsync({ id, isEnabled: !currentEnabled })
   }
 
   const handleDelete = async (e: React.MouseEvent, id: string) => {
     e.stopPropagation()
-    await api('DELETE', `/providers/${id}`)
-    await Promise.all([loadProviderConfigs(), loadProviders()])
+    await deleteProviderMutation.mutateAsync(id)
   }
 
   const handleEditGateway = (id: string | null) => {
@@ -82,14 +95,12 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
 
   const handleDeleteGateway = async (e: React.MouseEvent, id: string) => {
     e.stopPropagation()
-    await api('DELETE', `/gateways/${id}`)
-    await loadGatewayProfiles()
+    await deleteGatewayMutation.mutateAsync(id)
   }
 
   const handleHealthCheckGateway = async (e: React.MouseEvent, id: string) => {
     e.stopPropagation()
-    await api('GET', `/gateways/${id}/health`)
-    await loadGatewayProfiles()
+    await healthCheckGatewayMutation.mutateAsync(id)
   }
 
   const handleDeployApply = (patch: { endpoint?: string; token?: string; name?: string; notes?: string; deployment?: GatewayProfile['deployment'] | Record<string, unknown> | null }) => {
@@ -105,11 +116,10 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
 
   const handleSavePreparedGateway = async () => {
     if (!deployDraft?.endpoint) return
-    setSavingDeploy(true)
     try {
       let nextCredentialId: string | null = null
       if (deployDraft.token?.trim()) {
-        const credential = await api<Credential>('POST', '/credentials', {
+        const credential = await createCredentialMutation.mutateAsync({
           provider: 'openclaw',
           name: `${deployDraft.name || 'OpenClaw Gateway'} token`,
           apiKey: deployDraft.token.trim(),
@@ -124,17 +134,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
         ...(deployDraft.deployment?.useCase ? [deployDraft.deployment.useCase] : []),
         ...(deployDraft.deployment?.exposure ? [deployDraft.deployment.exposure] : []),
       ])
-      const verify = await api<{
-        ok: boolean
-        verify?: {
-          ok: boolean
-          message?: string
-          error?: string
-          hint?: string
-          models?: string[]
-        }
-      }>('POST', '/openclaw/deploy', {
-        action: 'verify',
+      const verify = await verifyDeployMutation.mutateAsync({
         endpoint: deployDraft.endpoint,
         token: deployDraft.token?.trim() || undefined,
       }).catch(() => ({ ok: false, verify: undefined as undefined }))
@@ -150,7 +150,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
           ...(existing?.deployment || {}),
           ...(deployDraft.deployment || {}),
           managedBy: 'swarmclaw',
-          lastVerifiedAt: verify.verify ? Date.now() : (existing?.deployment?.lastVerifiedAt || null),
+          lastVerifiedAt: verify.verify ? +new Date() : (existing?.deployment?.lastVerifiedAt || null),
           lastVerifiedOk: verify.verify ? verifiedOk : (existing?.deployment?.lastVerifiedOk ?? null),
           lastVerifiedMessage: verify.verify
             ? (verifiedOk
@@ -161,26 +161,21 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
         isDefault: existing?.isDefault === true || gatewayProfiles.length === 0,
       }
 
-      if (existing) {
-        await api('PUT', `/gateways/${existing.id}`, payload)
-      } else {
-        await api('POST', '/gateways', payload)
-      }
-
-      await Promise.all([loadGatewayProfiles(), loadCredentials()])
+      await saveGatewayMutation.mutateAsync({
+        id: existing?.id,
+        payload,
+      })
       setDeployDraft(null)
       toast.success(existing ? 'Gateway profile updated' : 'Gateway profile saved')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to save prepared gateway')
-    } finally {
-      setSavingDeploy(false)
     }
   }
 
   const handleCloneGateway = async (e: React.MouseEvent, gateway: GatewayProfile) => {
     e.stopPropagation()
     try {
-      await api('POST', '/gateways', {
+      await cloneGatewayMutation.mutateAsync({
         name: `${gateway.name} Copy`,
         endpoint: gateway.endpoint,
         credentialId: gateway.credentialId || null,
@@ -190,7 +185,6 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
         stats: gateway.stats || null,
         isDefault: false,
       })
-      await loadGatewayProfiles()
       toast.success('Gateway cloned')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to clone gateway')
@@ -204,8 +198,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   ) => {
     e.stopPropagation()
     try {
-      await api('PUT', `/external-agents/${runtimeId}`, { action })
-      await loadExternalAgents()
+      await runtimeActionMutation.mutateAsync({ runtimeId, action })
       const actionLabel = action === 'activate'
         ? 'Runtime activated'
         : action === 'drain'
@@ -265,7 +258,13 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
     return acc
   }, {})
 
-  if (!loaded) {
+  if (
+    providersQuery.isPending
+    || providerConfigsQuery.isPending
+    || gatewayProfilesQuery.isPending
+    || externalAgentsQuery.isPending
+    || credentialsQuery.isPending
+  ) {
     return <PageLoader label="Loading providers..." />
   }
 

package/src/components/providers/provider-sheet.tsx

@@ -1,26 +1,42 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
-import { createProviderConfig, updateProviderConfig, deleteProviderConfig } from '@/lib/provider-config'
-import { api } from '@/lib/app/api-client'
-import { fetchProviderModelDiscovery } from '@/lib/provider-model-discovery-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { toast } from 'sonner'
 import { errorMessage } from '@/lib/shared-utils'
+import {
+  useCheckProviderConnectionMutation,
+  useDeleteProviderMutation,
+  useProviderConfigsQuery,
+  useProviderModelDiscoveryMutation,
+  useProvidersQuery,
+  useResetProviderModelsMutation,
+  useSaveBuiltinProviderMutation,
+  useSaveCustomProviderMutation,
+} from '@/features/providers/queries'
+import { useCreateCredentialMutation, useCredentialsQuery } from '@/features/credentials/queries'
 
 export function ProviderSheet() {
   const open = useAppStore((s) => s.providerSheetOpen)
   const setOpen = useAppStore((s) => s.setProviderSheetOpen)
   const editingId = useAppStore((s) => s.editingProviderId)
   const setEditingId = useAppStore((s) => s.setEditingProviderId)
-  const providerConfigs = useAppStore((s) => s.providerConfigs)
-  const loadProviderConfigs = useAppStore((s) => s.loadProviderConfigs)
-  const providers = useAppStore((s) => s.providers)
-  const loadProviders = useAppStore((s) => s.loadProviders)
-  const credentials = useAppStore((s) => s.credentials)
-  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const providerConfigsQuery = useProviderConfigsQuery({ enabled: open })
+  const providersQuery = useProvidersQuery({ enabled: open })
+  const credentialsQuery = useCredentialsQuery({ enabled: open })
+  const saveBuiltinProviderMutation = useSaveBuiltinProviderMutation()
+  const saveCustomProviderMutation = useSaveCustomProviderMutation()
+  const deleteProviderMutation = useDeleteProviderMutation()
+  const resetProviderModelsMutation = useResetProviderModelsMutation()
+  const checkProviderConnectionMutation = useCheckProviderConnectionMutation()
+  const providerModelDiscoveryMutation = useProviderModelDiscoveryMutation()
+  const createCredentialMutation = useCreateCredentialMutation()
+
+  const providerConfigs = providerConfigsQuery.data ?? []
+  const providers = providersQuery.data ?? []
+  const credentials = useMemo(() => credentialsQuery.data ?? {}, [credentialsQuery.data])
 
   const [name, setName] = useState('')
   const [baseUrl, setBaseUrl] = useState('')
@@ -54,7 +70,6 @@ export function ProviderSheet() {
 
   useEffect(() => {
     if (open) {
-      loadCredentials()
       setNewModel('')
       setLiveModels([])
       setLiveMessage('')
@@ -86,7 +101,7 @@ export function ProviderSheet() {
         setIsEnabled(true)
       }
     }
-  }, [open, editingId, credentials, editingBuiltin, editingBuiltinOverride, editingCustom, loadCredentials])
+  }, [open, editingId, credentials, editingBuiltin, editingBuiltinOverride, editingCustom])
 
   // Reset test status when connection params change
   useEffect(() => {
@@ -105,7 +120,7 @@ export function ProviderSheet() {
     setTestStatus('testing')
     setTestMessage('')
     try {
-      const result = await api<{ ok: boolean; message: string }>('POST', '/setup/check-provider', {
+      const result = await checkProviderConnectionMutation.mutateAsync({
         provider: editingId || 'custom',
         credentialId,
         endpoint: baseUrl,
@@ -137,15 +152,13 @@ export function ProviderSheet() {
   const handleSave = async () => {
     try {
       if (isBuiltin) {
-        // Save model overrides for built-in providers
         const modelList = models.split(',').map((m) => m.trim()).filter(Boolean)
-        await api('PUT', `/providers/${editingId}/models`, { models: modelList })
-        await api('PUT', `/providers/${editingId}`, {
-          type: 'builtin',
+        await saveBuiltinProviderMutation.mutateAsync({
+          id: editingId || '',
+          models: modelList,
           isEnabled,
         })
         toast.success('Built-in provider updated')
-        await Promise.all([loadProviders(), loadProviderConfigs()])
         onClose()
         return
       }
@@ -158,14 +171,11 @@ export function ProviderSheet() {
         credentialId,
         isEnabled,
       }
-      if (editingCustom) {
-        await updateProviderConfig(editingCustom.id, data)
-        toast.success('Provider updated')
-      } else {
-        await createProviderConfig(data)
-        toast.success('Provider created')
-      }
-      await Promise.all([loadProviderConfigs(), loadProviders()])
+      await saveCustomProviderMutation.mutateAsync({
+        id: editingCustom?.id,
+        data,
+      })
+      toast.success(editingCustom ? 'Provider updated' : 'Provider created')
       onClose()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to save provider')
@@ -176,9 +186,8 @@ export function ProviderSheet() {
     if (editingCustom) {
       setDeleting(true)
       try {
-        await deleteProviderConfig(editingCustom.id)
+        await deleteProviderMutation.mutateAsync(editingCustom.id)
         toast.success('Provider deleted')
-        await Promise.all([loadProviderConfigs(), loadProviders()])
         setConfirmDelete(false)
         onClose()
       } catch (err: unknown) {
@@ -190,26 +199,24 @@ export function ProviderSheet() {
   }
 
   const handleResetModels = async () => {
-    if (isBuiltin && editingId) {
-      await api('DELETE', `/providers/${editingId}/models`)
-      await loadProviders()
-      // Re-read from fresh store state (closure captures stale providers)
-      const updated = useAppStore.getState().providers.find((p) => p.id === editingId)
-      if (updated) setModels(updated.models.join(', '))
-    }
+    if (!isBuiltin || !editingId) return
+    await resetProviderModelsMutation.mutateAsync(editingId)
+    const refreshedProviders = (await providersQuery.refetch()).data ?? []
+    const updated = refreshedProviders.find((provider) => provider.id === editingId)
+    if (updated) setModels(updated.models.join(', '))
   }
 
-  const handleAddModel = () => {
-    if (!newModel.trim()) return
-    const current = models ? models + ', ' + newModel.trim() : newModel.trim()
-    setModels(current)
-    setNewModel('')
-  }
-
-  const handleRemoveModel = (index: number) => {
-    const list = models.split(',').map((m) => m.trim()).filter(Boolean)
-    list.splice(index, 1)
-    setModels(list.join(', '))
+  const handleCreateCredential = async () => {
+    const cred = await createCredentialMutation.mutateAsync({
+      provider: editingId || name || 'custom',
+      name: newKeyName.trim() || `${name || editingId || 'Custom'} key`,
+      apiKey: newKeyValue.trim(),
+    })
+    await credentialsQuery.refetch()
+    setCredentialId(cred.id)
+    setAddingKey(false)
+    setNewKeyName('')
+    setNewKeyValue('')
   }
 
   const handleLoadLiveModels = async (force = false) => {
@@ -218,7 +225,7 @@ export function ProviderSheet() {
     setLiveLoading(true)
     setLiveMessage('')
     try {
-      const result = await fetchProviderModelDiscovery({
+      const result = await providerModelDiscoveryMutation.mutateAsync({
         providerId,
         credentialId,
         endpoint: baseUrl,
@@ -243,6 +250,19 @@ export function ProviderSheet() {
     }
   }
 
+  const handleAddModel = () => {
+    if (!newModel.trim()) return
+    const current = models ? models + ', ' + newModel.trim() : newModel.trim()
+    setModels(current)
+    setNewModel('')
+  }
+
+  const handleRemoveModel = (index: number) => {
+    const list = models.split(',').map((m) => m.trim()).filter(Boolean)
+    list.splice(index, 1)
+    setModels(list.join(', '))
+  }
+
   const credList = Object.values(credentials)
   const modelList = models.split(',').map((m) => m.trim()).filter(Boolean)
   const showApiKey = isBuiltin ? editingBuiltin?.requiresApiKey || editingBuiltin?.optionalApiKey : requiresApiKey
@@ -300,7 +320,7 @@ export function ProviderSheet() {
               </button>
             )}
             {isBuiltin && (
-              <button onClick={handleResetModels}
+              <button onClick={() => { void handleResetModels() }}
                 className="text-[11px] text-text-3 hover:text-text-2 transition-colors cursor-pointer bg-transparent border-none"
                 style={{ fontFamily: 'inherit' }}>
                 Reset to defaults
@@ -456,14 +476,12 @@ export function ProviderSheet() {
                   onClick={async () => {
                     setSavingKey(true)
                     try {
-                      const cred = await api<{ id: string }>('POST', '/credentials', { provider: editingId || name || 'custom', name: newKeyName.trim() || `${name || editingId || 'Custom'} key`, apiKey: newKeyValue.trim() })
-                      await loadCredentials()
-                      setCredentialId(cred.id)
-                      setAddingKey(false)
-                      setNewKeyName('')
-                      setNewKeyValue('')
-                    } catch (err: unknown) { toast.error(`Failed to save: ${errorMessage(err)}`) }
-                    finally { setSavingKey(false) }
+                      await handleCreateCredential()
+                    } catch (err: unknown) {
+                      toast.error(`Failed to save: ${errorMessage(err)}`)
+                    } finally {
+                      setSavingKey(false)
+                    }
                   }}
                   className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40"
                   style={{ fontFamily: 'inherit' }}

package/src/components/skills/skill-list.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useAppStore } from '@/stores/use-app-store'
-import { useWs } from '@/hooks/use-ws'
 import type { Skill } from '@/types'
 import { SkillsWorkspace } from './skills-workspace'
+import { useSkillsQuery } from '@/features/skills/queries'
 
 export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
   if (!inSidebar) return <SkillsWorkspace />
@@ -15,30 +15,17 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
 function SidebarSkillList() {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const skills = useAppStore((s) => s.skills)
-  const loadSkills = useAppStore((s) => s.loadSkills)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
   const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
+  const skillsQuery = useSkillsQuery()
+  const skills = useMemo(() => skillsQuery.data ?? {}, [skillsQuery.data])
 
   const [query, setQuery] = useState('')
-  const [ready, setReady] = useState(false)
 
   const activeTab = searchParams.get('tab') === 'clawhub' ? 'clawhub' : 'skills'
   const selectedSkillId = activeTab === 'skills' ? searchParams.get('skill') : null
 
-  useEffect(() => {
-    let active = true
-    void loadSkills().finally(() => {
-      if (active) setReady(true)
-    })
-    return () => {
-      active = false
-    }
-  }, [loadSkills])
-
-  useWs('skills', () => { void loadSkills() })
-
   const setPageState = useCallback((patch: Record<string, string | null | undefined>) => {
     const next = new URLSearchParams(searchParams.toString())
     for (const [key, value] of Object.entries(patch)) {
@@ -92,7 +79,7 @@ function SidebarSkillList() {
       </div>
 
       <div className="mt-3 flex-1 overflow-y-auto">
-        {!ready ? (
+        {skillsQuery.isPending ? (
           <div className="flex items-center justify-center py-10 text-[12px] text-text-3/65">
             <span className="mr-3 h-4 w-4 animate-spin rounded-full border-2 border-white/[0.12] border-t-accent-bright" />
             Loading skills...

package/src/components/skills/skill-sheet.tsx

@@ -5,20 +5,27 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import { api } from '@/lib/app/api-client'
 import { buildSkillSavePayload } from '@/lib/skill-save-payload'
 import { toast } from 'sonner'
 import type { Skill, SkillSecuritySummary } from '@/types'
+import {
+  useDeleteSkillMutation,
+  useImportSkillFromUrlMutation,
+  useSaveSkillMutation,
+  useSkillsQuery,
+} from '@/features/skills/queries'
+import { useAgentsQuery } from '@/features/agents/queries'
 
 export function SkillSheet() {
   const open = useAppStore((s) => s.skillSheetOpen)
   const setOpen = useAppStore((s) => s.setSkillSheetOpen)
   const editingId = useAppStore((s) => s.editingSkillId)
   const setEditingId = useAppStore((s) => s.setEditingSkillId)
-  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({ enabled: open })
+  const agentsQuery = useAgentsQuery({ enabled: open })
+  const importSkillFromUrlMutation = useImportSkillFromUrlMutation()
+  const saveSkillMutation = useSaveSkillMutation()
+  const deleteSkillMutation = useDeleteSkillMutation()
   const fileRef = useRef<HTMLInputElement>(null)
 
   const [name, setName] = useState('')
@@ -35,6 +42,8 @@ export function SkillSheet() {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [deleting, setDeleting] = useState(false)
 
+  const skills = skillsQuery.data ?? {}
+  const agents = agentsQuery.data ?? {}
   const editing = editingId ? skills[editingId] : null
   const agentList = Object.values(agents)
 
@@ -44,7 +53,7 @@ export function SkillSheet() {
     setImportError('')
     setImportNotice('')
     try {
-      const result = await api<Partial<Skill> & { name: string; filename: string; description?: string; content: string; sourceFormat?: 'openclaw' | 'plain' }>('POST', '/skills/import', { url: importUrl.trim() })
+      const result = await importSkillFromUrlMutation.mutateAsync(importUrl.trim())
       setName(result.name || '')
       setFilename(result.filename || '')
       setDescription(result.description || '')
@@ -62,10 +71,6 @@ export function SkillSheet() {
     }
   }
 
-  useEffect(() => {
-    if (open) loadAgents()
-  }, [open, loadAgents])
-
   useEffect(() => {
     if (open) {
       setImportUrl('')
@@ -133,14 +138,11 @@ export function SkillSheet() {
       agentIds,
     }, metadataPreview)
     try {
-      if (editing) {
-        await api('PUT', `/skills/${editing.id}`, data)
-        toast.success('Skill updated successfully')
-      } else {
-        await api('POST', '/skills', data)
-        toast.success('Skill created successfully')
-      }
-      await loadSkills()
+      await saveSkillMutation.mutateAsync({
+        id: editing?.id,
+        data: data as Record<string, unknown>,
+      })
+      toast.success(editing ? 'Skill updated successfully' : 'Skill created successfully')
       onClose()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to save skill')
@@ -151,9 +153,8 @@ export function SkillSheet() {
     if (!editing) return
     setDeleting(true)
     try {
-      await api('DELETE', `/skills/${editing.id}`)
+      await deleteSkillMutation.mutateAsync(editing.id)
       toast.success('Skill deleted')
-      await loadSkills()
       setConfirmDelete(false)
       onClose()
     } catch (err: unknown) {