@swarmclawai/swarmclaw 0.7.7 → 0.8.0

package/src/components/agents/agent-sheet.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createAgent, updateAgent, deleteAgent } from '@/lib/agents'
 import { api } from '@/lib/api-client'
@@ -18,8 +18,48 @@ import { copyTextToClipboard } from '@/lib/clipboard'
 import { SectionLabel } from '@/components/shared/section-label'
 import { SoulLibraryPicker } from './soul-library-picker'
 import { HintTip } from '@/components/shared/hint-tip'
+import { isOllamaCloudModel } from '@/lib/ollama-model'
 
 const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
+const FALLBACK_ELEVENLABS_VOICE_ID = 'JBFqnCBsd6RMkjVDRZzb'
+
+type AgentSheetSectionId = 'overview' | 'instructions' | 'model' | 'tools'
+type SafeAgentWallet = Omit<AgentWallet, 'encryptedPrivateKey'> & {
+  balanceAtomic?: string
+  balanceLamports?: number
+  balanceFormatted?: string
+  balanceSymbol?: string
+  isActive?: boolean
+}
+
+function SectionCard({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title: string
+  description?: string
+  action?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={`mb-8 rounded-[20px] border border-white/[0.06] bg-surface/70 p-5 sm:p-6 ${className}`}>
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <h3 className="font-display text-[17px] font-700 tracking-[-0.02em] text-text">{title}</h3>
+          {description && (
+            <p className="mt-1 text-[13px] leading-[1.6] text-text-3/75">{description}</p>
+          )}
+        </div>
+        {action}
+      </div>
+      {children}
+    </section>
+  )
+}
 
 function formatHbDuration(sec: number): string {
   if (sec >= 3600) {
@@ -106,6 +146,7 @@ export function AgentSheet() {
   const credentials = useAppStore((s) => s.credentials)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
   const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
   const dynamicSkills = useAppStore((s) => s.skills)
   const mcpServers = useAppStore((s) => s.mcpServers)
   const loadSkills = useAppStore((s) => s.loadSkills)
@@ -157,6 +198,7 @@ export function AgentSheet() {
   const [memoryScopeMode, setMemoryScopeMode] = useState<'auto' | 'all' | 'global' | 'agent' | 'session' | 'project'>('auto')
   const [memoryTierPreference, setMemoryTierPreference] = useState<'working' | 'durable' | 'archive' | 'blended'>('blended')
   const [autoRecovery, setAutoRecovery] = useState(false)
+  const [disabled, setDisabled] = useState(false)
   const [voiceId, setVoiceId] = useState('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
@@ -178,7 +220,7 @@ export function AgentSheet() {
   const [dailyBudget, setDailyBudget] = useState('')
   const [monthlyBudget, setMonthlyBudget] = useState('')
   const [budgetAction, setBudgetAction] = useState<'warn' | 'block'>('warn')
-  const [agentWallet, setAgentWallet] = useState<(Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }) | null>(null)
+  const [agentWallets, setAgentWallets] = useState<SafeAgentWallet[]>([])
   const [addingKey, setAddingKey] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
   const [newKeyValue, setNewKeyValue] = useState('')
@@ -196,6 +238,12 @@ export function AgentSheet() {
   const [soulLibraryOpen, setSoulLibraryOpen] = useState(false)
   const promptFileRef = useRef<HTMLInputElement>(null)
   const importFileRef = useRef<HTMLInputElement>(null)
+  const sectionRefs = useRef<Record<AgentSheetSectionId, HTMLDivElement | null>>({
+    overview: null,
+    instructions: null,
+    model: null,
+    tools: null,
+  })
 
   const handleFileUpload = (setter: (v: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
@@ -206,12 +254,40 @@ export function AgentSheet() {
     e.target.value = ''
   }
 
+  const loadAgentWallets = useCallback(async (agentId: string) => {
+    try {
+      const wallets = await api<Record<string, SafeAgentWallet>>('GET', `/wallets?agentId=${encodeURIComponent(agentId)}`)
+      const matches = Object.values(wallets)
+        .filter((wallet) => wallet.agentId === agentId)
+        .sort((a, b) => {
+          if ((a.isActive ? 1 : 0) !== (b.isActive ? 1 : 0)) return a.isActive ? -1 : 1
+          return a.chain.localeCompare(b.chain)
+        })
+      setAgentWallets(matches)
+    } catch {
+      setAgentWallets([])
+    }
+  }, [])
+
   const currentProvider = providers.find((p) => p.id === provider)
   const providerCredentials = Object.values(credentials).filter((c) => c.provider === provider)
   const openclawCredentials = Object.values(credentials).filter((c) => c.provider === 'openclaw')
   const openclawGatewayProfiles = gatewayProfiles.filter((item) => item.provider === 'openclaw')
   const editing = editingId ? agents[editingId] : null
   const hasNativeCapabilities = NATIVE_CAPABILITY_PROVIDER_IDS.has(provider)
+  const globalVoiceId = typeof appSettings.elevenLabsVoiceId === 'string' ? appSettings.elevenLabsVoiceId.trim() : ''
+  const agentVoiceId = voiceId.trim()
+  const elevenLabsConfigured = appSettings.elevenLabsApiKeyConfigured === true
+  const voiceControlsAvailable = elevenLabsConfigured || appSettings.elevenLabsEnabled === true || !!globalVoiceId || !!agentVoiceId
+  const voicePlaybackEnabled = appSettings.elevenLabsEnabled === true
+  const effectiveVoiceId = agentVoiceId || globalVoiceId || FALLBACK_ELEVENLABS_VOICE_ID
+  const effectiveVoiceSource = agentVoiceId
+    ? 'Agent override'
+    : globalVoiceId
+      ? 'Global default'
+      : 'Built-in fallback'
+  const providerSummary = openclawEnabled ? 'OpenClaw gateway' : (currentProvider?.name || provider)
+  const modelSummary = openclawEnabled ? (gatewayProfileId ? 'Gateway-managed' : 'default') : (model || 'Select a model')
 
   const providerNeedsKey = !editing && (
     (currentProvider?.requiresApiKey && providerCredentials.length === 0 && !addingKey) ||
@@ -220,6 +296,7 @@ export function AgentSheet() {
 
   useEffect(() => {
     if (open) {
+      loadSettings()
       loadProviders()
       loadGatewayProfiles()
       loadCredentials()
@@ -254,7 +331,11 @@ export function AgentSheet() {
         setFallbackCredentialIds(editing.fallbackCredentialIds || [])
         setCapabilities(Array.isArray(editing.capabilities) ? editing.capabilities : [])
         setCapInput('')
-        setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
+        setOllamaMode(
+          editing.provider === 'ollama' && (Boolean(editing.credentialId) || isOllamaCloudModel(editing.model))
+            ? 'cloud'
+            : 'local'
+        )
         setOpenclawEnabled(editing.provider === 'openclaw')
         setProjectId(editing.projectId)
         setAvatarSeed(editing.avatarSeed || crypto.randomUUID().slice(0, 8))
@@ -263,6 +344,7 @@ export function AgentSheet() {
         setMemoryScopeMode(editing.memoryScopeMode || 'auto')
         setMemoryTierPreference(editing.memoryTierPreference || 'blended')
         setAutoRecovery(editing.autoRecovery || false)
+        setDisabled(editing.disabled === true)
         setVoiceId(editing.elevenLabsVoiceId || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
@@ -288,14 +370,7 @@ export function AgentSheet() {
         setDailyBudget(typeof editing.dailyBudget === 'number' && editing.dailyBudget > 0 ? String(editing.dailyBudget) : '')
         setMonthlyBudget(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0 ? String(editing.monthlyBudget) : '')
         setBudgetAction(editing.budgetAction || 'warn')
-        // Load wallet if agent has one
-        if (editing.walletId) {
-          api<Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }>('GET', `/wallets/${editing.walletId}`)
-            .then(setAgentWallet)
-            .catch(() => setAgentWallet(null))
-        } else {
-          setAgentWallet(null)
-        }
+        void loadAgentWallets(editing.id)
       } else {
         setName('')
         setDescription('')
@@ -330,6 +405,7 @@ export function AgentSheet() {
         setMemoryScopeMode('auto')
         setMemoryTierPreference('blended')
         setAutoRecovery(false)
+        setDisabled(false)
         setVoiceId('')
         setHeartbeatEnabled(false)
         setHeartbeatIntervalSec('')
@@ -351,6 +427,7 @@ export function AgentSheet() {
         setDailyBudget('')
         setMonthlyBudget('')
         setBudgetAction('warn')
+        setAgentWallets([])
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -412,6 +489,10 @@ export function AgentSheet() {
     setEditingId(null)
   }
 
+  const jumpToSection = (sectionId: AgentSheetSectionId) => {
+    sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
   const applyGatewayProfileSelection = (nextGatewayProfileId: string | null) => {
     setGatewayProfileId(nextGatewayProfileId)
     const gateway = openclawGatewayProfiles.find((item) => item.id === nextGatewayProfileId)
@@ -514,6 +595,7 @@ export function AgentSheet() {
       memoryScopeMode,
       memoryTierPreference,
       autoRecovery,
+      disabled,
       elevenLabsVoiceId: voiceId.trim() || null,
       heartbeatEnabled,
       heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
@@ -578,6 +660,7 @@ export function AgentSheet() {
         tools: editing.tools,
         plugins: editing.plugins,
         capabilities: editing.capabilities,
+        elevenLabsVoiceId: editing.elevenLabsVoiceId || null,
         soul: editing.soul,
         systemPrompt: editing.systemPrompt,
       }],
@@ -605,11 +688,12 @@ export function AgentSheet() {
         if (!importedAgent || typeof importedAgent !== 'object') throw new Error('Invalid agent pack')
         // Strip IDs and timestamps
         const { id: _id, createdAt: _ca, updatedAt: _ua, threadSessionId: _ts, ...agentData } = importedAgent
+        void [_id, _ca, _ua, _ts]
         await createAgent({ ...agentData, name: agentData.name || 'Imported Agent' })
         await loadAgents()
         toast.success(data?.kind === 'swarmclaw-agent-pack' ? 'Agent pack imported' : 'Agent imported')
         onClose()
-      } catch (err) {
+      } catch {
         toast.error('Invalid agent JSON file')
       }
     }
@@ -685,9 +769,18 @@ export function AgentSheet() {
     <BottomSheet open={open} onClose={onClose} wide>
       <div className="mb-10 flex items-start justify-between">
         <div>
-          <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
-            {editing ? 'Edit Agent' : 'New Agent'}
-          </h2>
+          <div className="mb-2 flex flex-wrap items-center gap-2">
+            <h2 className="font-display text-[28px] font-700 tracking-[-0.03em]">
+              {editing ? 'Edit Agent' : 'New Agent'}
+            </h2>
+            <span className={`rounded-[999px] px-2.5 py-1 text-[10px] font-700 uppercase tracking-[0.1em] ${
+              disabled
+                ? 'border border-amber-400/20 bg-amber-400/[0.08] text-amber-300'
+                : 'border border-emerald-400/20 bg-emerald-400/[0.08] text-emerald-300'
+            }`}>
+              {disabled ? 'Disabled' : 'Enabled'}
+            </span>
+          </div>
           <p className="text-[14px] text-text-3">Define an AI agent and optional multi-agent delegation behavior</p>
         </div>
         <div className="flex items-center gap-3 mt-1.5">
@@ -720,6 +813,56 @@ export function AgentSheet() {
         </div>
       </div>
 
+      <div className="mb-8 rounded-[20px] border border-white/[0.06] bg-white/[0.03] p-4 sm:p-5">
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Provider</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{providerSummary}</p>
+          </div>
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Model</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{modelSummary}</p>
+          </div>
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Voice</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{voiceControlsAvailable ? effectiveVoiceSource : 'Not configured'}</p>
+            {voiceControlsAvailable && (
+              <p className="mt-1 truncate text-[12px] text-text-3/75">{effectiveVoiceId}</p>
+            )}
+          </div>
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Mode</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{canDelegateToAgents ? 'Delegating agent' : 'Solo agent'}</p>
+            <p className="mt-1 text-[12px] text-text-3/75">
+              {routingTargets.length > 0 ? `${routingTargets.length} route${routingTargets.length === 1 ? '' : 's'} configured` : 'Single primary route'}
+            </p>
+          </div>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {([
+            ['overview', 'Overview'],
+            ['instructions', 'Instructions'],
+            ['model', 'Model Setup'],
+            ['tools', 'Tools'],
+          ] as const).map(([sectionId, label]) => (
+            <button
+              key={sectionId}
+              type="button"
+              onClick={() => jumpToSection(sectionId)}
+              className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-2 text-[12px] font-600 text-text-3 transition-all hover:bg-white/[0.04] hover:text-text-2"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div ref={(node) => { sectionRefs.current.overview = node }}>
+      <SectionCard
+        title="Overview"
+        description="Basic identity, defaults, voice, heartbeat, and budget controls for this agent."
+      >
       <div className="mb-8">
         <SectionLabel>Name</SectionLabel>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. SEO Researcher" className={inputClass} style={{ fontFamily: 'inherit' }} />
@@ -756,7 +899,7 @@ export function AgentSheet() {
                         setAvatarSeed('')
                         toast.success('Avatar image uploaded')
                       }
-                    } catch (err: unknown) {
+                    } catch {
                       toast.error('Failed to upload image')
                     } finally {
                       setUploading(false)
@@ -920,6 +1063,28 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Use working for fast recent context, durable for facts/preferences, and archive for long-lived history.</p>
       </div>
 
+      {/* Auto-Recovery */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-1.5">
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">
+            Agent Availability
+            <HintTip text="Disabled agents stay visible, but cannot take chats, heartbeats, schedules, or queued work until re-enabled." />
+          </label>
+          <div
+            onClick={() => setDisabled(!disabled)}
+            className={`w-9 h-5 rounded-full transition-all relative cursor-pointer ${disabled ? 'bg-amber-400' : 'bg-accent-bright'}`}
+          >
+            <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all ${disabled ? 'left-0.5' : 'left-[18px]'}`} />
+          </div>
+        </div>
+        <p className="text-[11px] text-text-3/70">
+          {disabled
+            ? 'This agent is paused. Existing chats remain viewable, but new work is blocked until you switch it back on.'
+            : 'This agent is active and can accept chats, heartbeats, schedules, and queued work.'}
+          {' '}Gateway and remote runtime shutdown stay managed separately in Providers and OpenClaw Deploy.
+        </p>
+      </div>
+
       {/* Auto-Recovery */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-1.5">
@@ -935,20 +1100,58 @@ export function AgentSheet() {
       </div>
 
       {/* ElevenLabs Voice ID */}
-      {appSettings.elevenLabsEnabled && (
+      {voiceControlsAvailable && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
-            ElevenLabs Voice ID <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
-          </label>
+          <div className="mb-3 flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">
+                Voice & Audio <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+              </label>
+              <p className="mt-1 text-[12px] leading-[1.6] text-text-3/70">
+                Set an agent-specific ElevenLabs voice or inherit the global default configured in Settings.
+              </p>
+            </div>
+            <div className={`rounded-[12px] border px-3 py-2 text-right ${
+              agentVoiceId
+                ? 'border-accent-bright/25 bg-accent-soft/20'
+                : 'border-white/[0.06] bg-white/[0.03]'
+            }`}>
+              <p className="text-[10px] font-700 uppercase tracking-[0.08em] text-text-3">
+                {effectiveVoiceSource}
+              </p>
+              <p className="mt-1 max-w-[240px] truncate font-mono text-[12px] text-text-2">{effectiveVoiceId}</p>
+            </div>
+          </div>
           <input
             type="text"
             value={voiceId}
             onChange={(e) => setVoiceId(e.target.value)}
-            placeholder="Leave blank for global default"
+            placeholder={globalVoiceId ? `Leave blank to use ${globalVoiceId}` : 'Leave blank for the global default'}
             className={inputClass}
             style={{ fontFamily: 'inherit' }}
           />
-          <p className="text-[11px] text-text-3/70 mt-1.5">Override the default voice for this agent. Leave blank to use the global default.</p>
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            {agentVoiceId && (
+              <button
+                type="button"
+                onClick={() => setVoiceId('')}
+                className="rounded-[9px] border border-white/[0.08] bg-transparent px-2.5 py-1.5 text-[11px] font-600 text-text-3 transition-all hover:bg-white/[0.04] hover:text-text-2"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Use global default
+              </button>
+            )}
+            {!voicePlaybackEnabled && (
+              <span className="rounded-[9px] border border-amber-400/20 bg-amber-400/[0.08] px-2.5 py-1.5 text-[11px] font-600 text-amber-300">
+                Voice playback is disabled globally
+              </span>
+            )}
+          </div>
+          <p className="text-[11px] text-text-3/70 mt-2">
+            {globalVoiceId
+              ? `Global default: ${globalVoiceId}. This agent can override it with a different voice ID.`
+              : 'No global default voice ID is set yet. If left blank, the built-in ElevenLabs fallback will be used.'}
+          </p>
         </div>
       )}
 
@@ -1107,27 +1310,27 @@ export function AgentSheet() {
             : 'When a configured cap is exceeded, a warning is shown but runs continue.'}
         </p>
       </div>
+      </SectionCard>
+      </div>
 
       {/* Wallet Section */}
       {editingId && (
         <WalletSection
           agentId={editingId}
-          wallet={agentWallet}
+          wallets={agentWallets}
+          activeWalletId={editing?.activeWalletId || editing?.walletId || agentWallets.find((wallet) => wallet.isActive)?.id || null}
           onWalletCreated={async () => {
             await loadAgents()
-            // Fetch the wallet for this agent
-            try {
-              const wallets = await api<Record<string, Omit<AgentWallet, 'encryptedPrivateKey'>>>('GET', '/wallets')
-              const match = Object.values(wallets).find((w) => w.agentId === editingId)
-              if (match) {
-                const detail = await api<Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }>('GET', `/wallets/${match.id}`)
-                setAgentWallet(detail)
-              }
-            } catch { /* ignore */ }
+            await loadAgentWallets(editingId)
           }}
         />
       )}
 
+      <div ref={(node) => { sectionRefs.current.instructions = node }}>
+      <SectionCard
+        title="Instructions & Continuity"
+        description="Define personality, system behavior, and long-running context this agent should preserve."
+      >
       {provider !== 'openclaw' && (
         <div className="mb-8">
           <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -1322,7 +1525,14 @@ export function AgentSheet() {
           />
         </div>
       </div>
+      </SectionCard>
+      </div>
 
+      <div ref={(node) => { sectionRefs.current.model = node }}>
+      <SectionCard
+        title="Model Setup"
+        description="Choose the provider, credentials, routing, and gateway preferences this agent should use."
+      >
       {/* OpenClaw Gateway Fields */}
       {openclawEnabled && (
         <div className="mb-8 space-y-5">
@@ -1411,13 +1621,13 @@ export function AgentSheet() {
                       onClick={async () => {
                         setSavingKey(true)
                         try {
-                          const cred = await api<any>('POST', '/credentials', { provider: 'openclaw', name: newKeyName.trim() || 'OpenClaw token', apiKey: newKeyValue.trim() })
+                          const cred = await api<{ id: string }>('POST', '/credentials', { provider: 'openclaw', name: newKeyName.trim() || 'OpenClaw token', apiKey: newKeyValue.trim() })
                           await loadCredentials()
                           setCredentialId(cred.id)
                           setAddingKey(false)
                           setNewKeyName('')
                           setNewKeyValue('')
-                        } catch (err: any) { toast.error(`Failed to save: ${err.message}`) }
+                        } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(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"
@@ -1670,13 +1880,13 @@ export function AgentSheet() {
                   onClick={async () => {
                     setSavingKey(true)
                     try {
-                      const cred = await api<any>('POST', '/credentials', { provider, name: newKeyName.trim() || `${provider} key`, apiKey: newKeyValue.trim() })
+                      const cred = await api<{ id: string }>('POST', '/credentials', { provider, name: newKeyName.trim() || `${provider} key`, apiKey: newKeyValue.trim() })
                       await loadCredentials()
                       setCredentialId(cred.id)
                       setAddingKey(false)
                       setNewKeyName('')
                       setNewKeyValue('')
-                    } catch (err: any) { toast.error(`Failed to save: ${err.message}`) }
+                    } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(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"
@@ -1877,7 +2087,14 @@ export function AgentSheet() {
           <p className="text-[11px] text-text-3/70 mt-2">No route pool yet. Add one if this agent should switch between cheaper, stronger, or gateway-specific models.</p>
         )}
       </div>
+      </SectionCard>
+      </div>
 
+      <div ref={(node) => { sectionRefs.current.tools = node }}>
+      <SectionCard
+        title="Tools & Delegation"
+        description="Enable plugins, skills, MCP tools, and delegation behavior for this agent."
+      >
       {/* Plugins — hidden for providers that manage capabilities outside LangGraph */}
       {!hasNativeCapabilities && (
         <div className="mb-8">
@@ -2024,7 +2241,7 @@ export function AgentSheet() {
           </label>
           <p className="text-[12px] text-text-3/60 mb-3">Connect external tool servers to this agent via MCP.</p>
           <div className="flex flex-wrap gap-2">
-            {Object.values(mcpServers).map((s: any) => {
+            {Object.values(mcpServers).map((s) => {
               const active = mcpServerIds.includes(s.id)
               return (
                 <button
@@ -2056,7 +2273,7 @@ export function AgentSheet() {
           </p>
           <div className="space-y-4">
             {mcpServerIds.map((serverId) => {
-              const server = (mcpServers as Record<string, any>)[serverId]
+              const server = mcpServers[serverId]
               const serverTools = mcpTools[serverId]
               if (!server || !serverTools?.length) return null
               const safeName = server.name.replace(/[^a-zA-Z0-9_]/g, '_')
@@ -2121,6 +2338,8 @@ export function AgentSheet() {
           />
         </div>
       )}
+      </SectionCard>
+      </div>
 
       {/* Provider key warning */}
       {providerNeedsKey && (

package/src/components/agents/inspector-panel.tsx

@@ -4,6 +4,7 @@ import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import { useCallback, useEffect, useState, type ReactNode } from 'react'
 import type { Agent } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 import { AgentAvatar } from './agent-avatar'
 import { AgentFilesEditor } from './agent-files-editor'
 import { OpenClawSkillsPanel } from './openclaw-skills-panel'
@@ -11,6 +12,7 @@ import { PermissionPresetSelector } from './permission-preset-selector'
 import { ExecConfigPanel } from './exec-config-panel'
 import { SandboxEnvPanel } from './sandbox-env-panel'
 import { CronJobForm } from './cron-job-form'
+import { toast } from 'sonner'
 
 interface Props {
   agent: Agent
@@ -87,6 +89,12 @@ export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAge
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 min-w-0">
               <h3 className="font-display text-[16px] font-700 text-text truncate tracking-[-0.02em]">{agent.name}</h3>
+              {agent.disabled === true && (
+                <span className="inline-flex items-center gap-1 rounded-[7px] border border-amber-400/15 bg-amber-400/[0.1] px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-amber-300">
+                  <span className="w-1.5 h-1.5 rounded-full bg-amber-300" />
+                  Disabled
+                </span>
+              )}
               {agent.heartbeatEnabled && (
                 <span className="inline-flex items-center gap-1 rounded-[7px] border border-emerald-400/15 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-emerald-300">
                   <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
@@ -189,13 +197,32 @@ interface OverviewTabProps {
 }
 
 function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: OverviewTabProps) {
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const [availabilitySaving, setAvailabilitySaving] = useState(false)
   const summaryStats = [
     { label: 'Provider', value: PROVIDER_LABELS[agent.provider] || agent.provider.replace(/-/g, ' ') },
     { label: 'Model', value: agent.model || 'Default' },
     { label: 'Plugins', value: String(agent.plugins?.length ?? 0) },
     { label: 'Heartbeat', value: agent.heartbeatEnabled ? `Every ${agent.heartbeatIntervalSec ?? DEFAULT_HEARTBEAT_INTERVAL_SEC}s` : 'Off' },
+    { label: 'Status', value: agent.disabled === true ? 'Disabled' : 'Enabled' },
   ]
 
+  const handleToggleAvailability = useCallback(async () => {
+    if (availabilitySaving) return
+    setAvailabilitySaving(true)
+    try {
+      const nextDisabled = agent.disabled !== true
+      await api('PUT', `/agents/${agent.id}`, { disabled: nextDisabled })
+      await Promise.all([loadAgents(), loadSessions()])
+      toast.success(nextDisabled ? `${agent.name} disabled` : `${agent.name} enabled`)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to update agent availability')
+    } finally {
+      setAvailabilitySaving(false)
+    }
+  }, [agent.disabled, agent.id, agent.name, availabilitySaving, loadAgents, loadSessions])
+
   return (
     <div className="p-4 flex flex-col gap-4">
       <div className={panelCardClass('p-4 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))]')}>
@@ -259,6 +286,20 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
                 Edit Agent
               </button>
             )}
+            <button
+              onClick={() => void handleToggleAvailability()}
+              disabled={availabilitySaving}
+              className={`w-full px-3 py-2.5 rounded-[10px] text-[12px] font-700 border cursor-pointer transition-all text-left disabled:opacity-50 ${
+                agent.disabled === true
+                  ? 'text-emerald-300 bg-emerald-400/[0.06] border-emerald-400/[0.12] hover:bg-emerald-400/[0.1]'
+                  : 'text-amber-300 bg-amber-400/[0.06] border-amber-400/[0.12] hover:bg-amber-400/[0.1]'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {availabilitySaving
+                ? (agent.disabled === true ? 'Enabling Agent...' : 'Disabling Agent...')
+                : (agent.disabled === true ? 'Enable Agent' : 'Disable Agent')}
+            </button>
             {(onClearHistory || onDeleteAgent || onDeleteChat) && (
               <>
                 <SectionLabel>Danger Zone</SectionLabel>