@swarmclawai/swarmclaw 1.2.3 → 1.2.5

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 loadProviderConfigs()
+    await toggleProviderMutation.mutateAsync({ id, isEnabled: !currentEnabled })
   }
 
   const handleDelete = async (e: React.MouseEvent, id: string) => {
     e.stopPropagation()
-    await api('DELETE', `/providers/${id}`)
-    await loadProviderConfigs()
+    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'
@@ -219,18 +212,27 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
     }
   }
 
-  // Merge built-in providers with custom configs
-  const builtinItems = providers.map((p) => ({
+  const customProviderConfigs = providerConfigs.filter((config) => config.type === 'custom')
+  const customConfigIds = new Set(customProviderConfigs.map((config) => config.id))
+  const builtinOverrides = new Map(
+    providerConfigs
+      .filter((config) => config.type === 'builtin')
+      .map((config) => [config.id, config]),
+  )
+
+  const builtinItems = providers
+    .filter((provider) => !customConfigIds.has(String(provider.id)))
+    .map((p) => ({
     id: p.id,
     name: p.name,
     type: 'builtin' as const,
     models: p.models,
     requiresApiKey: p.requiresApiKey,
-    isEnabled: true,
+    isEnabled: builtinOverrides.get(String(p.id))?.isEnabled !== false,
     isConnected: !p.requiresApiKey || Object.values(credentials).some((c) => c.provider === p.id),
-  }))
+    }))
 
-  const customItems = providerConfigs.map((c) => ({
+  const customItems = customProviderConfigs.map((c) => ({
     id: c.id,
     name: c.name,
     type: 'custom' as const,
@@ -241,6 +243,8 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   }))
 
   const allItems = [...builtinItems, ...customItems]
+  const enabledItems = allItems.filter((item) => item.isEnabled)
+  const disabledItems = allItems.filter((item) => !item.isEnabled)
   const gatewayNameById = new Map(gatewayProfiles.map((gateway) => [gateway.id, gateway.name]))
   const runtimeHealthByGateway = externalAgents.reduce<Record<string, { total: number; active: number; lastHeartbeatAt: number | null }>>((acc, runtime) => {
     if (!runtime.gatewayProfileId) return acc
@@ -254,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..." />
   }
 
@@ -273,7 +283,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
         )}
       </div>
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-        {allItems.map((item, idx) => (
+        {enabledItems.map((item, idx) => (
           <div
             key={item.id}
             role="button"
@@ -299,7 +309,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                   ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-accent-bright/10 text-[#6366F1]'}`}>
                   {item.type === 'builtin' ? 'Built-in' : 'Custom'}
                 </span>
-                {!inSidebar && item.type === 'custom' && (
+                {!inSidebar && (
                   <>
                     <div
                       onClick={(e) => handleToggle(e, item.id, item.isEnabled)}
@@ -311,15 +321,17 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                         style={item.isEnabled ? { animation: 'spring-in 0.3s var(--ease-spring)' } : undefined}
                       />
                     </div>
-                    <button
-                      onClick={(e) => handleDelete(e, item.id)}
-                      className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
-                      title="Delete provider"
-                    >
-                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                        <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                      </svg>
-                    </button>
+                    {item.type === 'custom' && (
+                      <button
+                        onClick={(e) => handleDelete(e, item.id)}
+                        className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                        title="Delete provider"
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                          <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                        </svg>
+                      </button>
+                    )}
                   </>
                 )}
                 <StatusDot
@@ -339,6 +351,67 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
           </div>
         ))}
       </div>
+      {!inSidebar && disabledItems.length > 0 && (
+        <>
+          <div className="mt-8 mb-4 flex items-center justify-between">
+            <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Disabled Providers</div>
+          </div>
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {disabledItems.map((item, idx) => (
+              <div
+                key={item.id}
+                role="button"
+                tabIndex={0}
+                onClick={() => handleEdit(item.id)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    handleEdit(item.id)
+                  }
+                }}
+                className="w-full text-left p-4 rounded-[14px] border transition-all duration-200
+                  cursor-pointer bg-surface/60 border-white/[0.06] hover:bg-white/[0.02] hover:border-white/[0.12]"
+                style={{
+                  animation: 'spring-in 0.5s var(--ease-spring) both',
+                  animationDelay: `${(enabledItems.length + idx) * 0.05}s`
+                }}
+              >
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="font-display text-[14px] font-600 text-text truncate">{item.name}</span>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <span className={`text-[10px] font-600 px-2 py-0.5 rounded-[5px] uppercase tracking-wider
+                      ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-accent-bright/10 text-[#6366F1]'}`}>
+                      {item.type === 'builtin' ? 'Built-in' : 'Custom'}
+                    </span>
+                    <div
+                      onClick={(e) => handleToggle(e, item.id, item.isEnabled)}
+                      className="w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0 bg-white/[0.08]"
+                    >
+                      <div className="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-all" />
+                    </div>
+                    {item.type === 'custom' && (
+                      <button
+                        onClick={(e) => handleDelete(e, item.id)}
+                        className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                        title="Delete provider"
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                          <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                        </svg>
+                      </button>
+                    )}
+                    <StatusDot status="idle" pulse={false} />
+                  </div>
+                </div>
+                <div className="text-[12px] text-text-3/60 font-mono truncate">
+                  {item.models.slice(0, 3).join(', ')}
+                  {item.models.length > 3 && ` +${item.models.length - 3}`}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
 
       <div className="mt-8 mb-4 flex items-center justify-between">
         <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">OpenClaw Gateways</div>