@swarmclawai/swarmclaw 1.2.3 → 1.2.5

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('')
@@ -46,14 +62,14 @@ export function ProviderSheet() {
   const [deleting, setDeleting] = useState(false)
 
   // Find editing provider in custom configs OR built-in list
-  const editingCustom = editingId ? providerConfigs.find((c) => c.id === editingId) : null
+  const editingCustom = editingId ? providerConfigs.find((c) => c.id === editingId && c.type === 'custom') : null
+  const editingBuiltinOverride = editingId ? providerConfigs.find((c) => c.id === editingId && c.type === 'builtin') : null
   const editingBuiltin = editingId ? providers.find((p) => p.id === editingId) : null
   const isBuiltin = !!editingBuiltin && !editingCustom
   const editing = editingCustom || editingBuiltin
 
   useEffect(() => {
     if (open) {
-      loadCredentials()
       setNewModel('')
       setLiveModels([])
       setLiveMessage('')
@@ -75,7 +91,7 @@ export function ProviderSheet() {
         // Default to existing credential for this provider
         const existingCred = Object.values(credentials).find((c) => c.provider === editingBuiltin.id)
         setCredentialId(existingCred?.id || null)
-        setIsEnabled(true)
+        setIsEnabled(editingBuiltinOverride?.isEnabled !== false)
       } else {
         setName('')
         setBaseUrl('')
@@ -85,7 +101,7 @@ export function ProviderSheet() {
         setIsEnabled(true)
       }
     }
-  }, [open, editingId, credentials, editingBuiltin, editingCustom, loadCredentials])
+  }, [open, editingId, credentials, editingBuiltin, editingBuiltinOverride, editingCustom])
 
   // Reset test status when connection params change
   useEffect(() => {
@@ -100,10 +116,11 @@ export function ProviderSheet() {
   }, [editingId, credentialId, baseUrl, requiresApiKey])
 
   const handleTestConnection = async () => {
+    if (!isBuiltin) return
     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,
@@ -135,11 +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 })
-        toast.success('Built-in provider models updated')
-        await loadProviders()
+        await saveBuiltinProviderMutation.mutateAsync({
+          id: editingId || '',
+          models: modelList,
+          isEnabled,
+        })
+        toast.success('Built-in provider updated')
         onClose()
         return
       }
@@ -152,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 loadProviderConfigs()
+      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')
@@ -170,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 loadProviderConfigs()
         setConfirmDelete(false)
         onClose()
       } catch (err: unknown) {
@@ -184,35 +199,33 @@ export function ProviderSheet() {
   }
 
   const handleResetModels = async () => {
-    if (isBuiltin && editingId) {
-      await api('DELETE', `/providers/${editingId}/models`)
-      await loadProviders()
-      // Re-read the reset models
-      const updated = providers.find((p) => p.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('')
+    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 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) => {
-    if (!open) return
+    if (!open || !isBuiltin) return
     const providerId = editingId || 'custom'
     setLiveLoading(true)
     setLiveMessage('')
     try {
-      const result = await fetchProviderModelDiscovery({
+      const result = await providerModelDiscoveryMutation.mutateAsync({
         providerId,
         credentialId,
         endpoint: baseUrl,
@@ -237,12 +250,24 @@ 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
-  const canDiscoverModels = isBuiltin
-    ? Boolean(editingBuiltin?.supportsModelDiscovery)
-    : !!baseUrl.trim()
+  const canDiscoverModels = Boolean(isBuiltin && editingBuiltin?.supportsModelDiscovery)
+  const showTestButton = Boolean(isBuiltin && showApiKey && credentialId)
 
   const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
 
@@ -295,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
@@ -367,7 +392,7 @@ export function ProviderSheet() {
               className={`${inputClass} resize-y min-h-[80px] font-mono text-[14px]`}
               style={{ fontFamily: 'inherit' }}
             />
-            <p className="text-[11px] text-text-3/70 mt-2">Comma-separated model IDs</p>
+            <p className="text-[11px] text-text-3/70 mt-2">Comma-separated model IDs. Custom providers are saved as-is, so add the models you want manually.</p>
           </>
         )}
       </div>
@@ -451,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' }}
@@ -471,8 +494,8 @@ export function ProviderSheet() {
         </div>
       )}
 
-      {/* Enabled toggle — only for custom */}
-      {!isBuiltin && editingCustom && (
+      {/* Enabled toggle */}
+      {(isBuiltin || editingCustom) && (
         <div className="mb-8">
           <label className="flex items-center gap-3 cursor-pointer">
             <div
@@ -484,17 +507,20 @@ export function ProviderSheet() {
                 ${isEnabled ? 'left-[22px]' : 'left-0.5'}`} />
             </div>
             <span className="font-display text-[14px] font-600 text-text-2">Enabled</span>
+            {isBuiltin && (
+              <span className="text-[12px] text-text-3">Hidden from the agent sheet when off.</span>
+            )}
           </label>
         </div>
       )}
 
       {/* Test connection result */}
-      {testStatus === 'fail' && (
+      {isBuiltin && testStatus === 'fail' && (
         <div className="mb-4 p-3 rounded-[12px] bg-red-500/[0.08] border border-red-500/20">
           <p className="text-[13px] text-red-400">{testMessage || 'Connection test failed'}</p>
         </div>
       )}
-      {testStatus === 'pass' && (
+      {isBuiltin && testStatus === 'pass' && (
         <div className="mb-4 p-3 rounded-[12px] bg-emerald-500/[0.08] border border-emerald-500/20">
           <p className="text-[13px] text-emerald-400">{testMessage || 'Connected successfully'}</p>
         </div>
@@ -509,25 +535,24 @@ export function ProviderSheet() {
         <button onClick={onClose} className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all" style={{ fontFamily: 'inherit' }}>
           Cancel
         </button>
-        {showApiKey && credentialId && testStatus !== 'pass' ? (
+        {showTestButton && (
           <button
             onClick={handleTestConnection}
             disabled={testStatus === 'testing'}
-            className="flex-1 py-3.5 rounded-[14px] border-none bg-emerald-600 text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(16,185,129,0.2)] hover:brightness-110"
+            className="py-3.5 px-6 rounded-[14px] border-none bg-emerald-600 text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(16,185,129,0.2)] hover:brightness-110"
             style={{ fontFamily: 'inherit' }}
           >
             {testStatus === 'testing' ? 'Testing...' : testStatus === 'fail' ? 'Retry Connection' : 'Test Connection'}
           </button>
-        ) : (
-          <button
-            onClick={handleSave}
-            disabled={isBuiltin ? false : (!name.trim() || !baseUrl.trim())}
-            className="flex-1 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
-            style={{ fontFamily: 'inherit' }}
-          >
-            {editing ? 'Save' : 'Create'}
-          </button>
         )}
+        <button
+          onClick={handleSave}
+          disabled={isBuiltin ? false : (!name.trim() || !baseUrl.trim())}
+          className="flex-1 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {editing ? 'Save' : 'Create'}
+        </button>
       </div>
       <ConfirmDialog
         open={confirmDelete}

package/src/components/shared/model-combobox.tsx

@@ -40,6 +40,7 @@ export function ModelCombobox({
   const containerRef = useRef<HTMLDivElement>(null)
   const lastDiscoveryKeyRef = useRef<string | null>(null)
   const loadProviders = useAppStore((s) => s.loadProviders)
+  const loadProviderConfigs = useAppStore((s) => s.loadProviderConfigs)
 
   const availableModels = [...models, ...discoveredModels].filter((model, index, source) => source.indexOf(model) === index)
   const trimmedQuery = query.trim()
@@ -53,8 +54,8 @@ export function ModelCombobox({
 
   const persistModels = useCallback(async (next: string[]) => {
     await api('PUT', `/providers/${providerId}/models`, { models: next })
-    await loadProviders()
-  }, [providerId, loadProviders])
+    await Promise.all([loadProviders(), loadProviderConfigs()])
+  }, [loadProviderConfigs, loadProviders, providerId])
 
   const addModel = useCallback(async (name: string) => {
     const next = [...models, name]
@@ -73,8 +74,8 @@ export function ModelCombobox({
     } else {
       await persistModels(next)
     }
-    await loadProviders()
-  }, [models, defaultModels, value, onChange, providerId, persistModels, loadProviders])
+    await Promise.all([loadProviders(), loadProviderConfigs()])
+  }, [models, defaultModels, value, onChange, providerId, persistModels, loadProviderConfigs, loadProviders])
 
   const selectModel = useCallback((m: string) => {
     onChange(m)

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) {