@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -11,8 +11,12 @@ import type { ProviderType, ClaudeSkill } from '@/types'
 import { AVAILABLE_TOOLS, PLATFORM_TOOLS } from '@/lib/tool-definitions'
 import { NATIVE_CAPABILITY_PROVIDER_IDS, NON_LANGGRAPH_PROVIDER_IDS } from '@/lib/provider-sets'
 import { AgentAvatar } from './agent-avatar'
+import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { randomSoul } from '@/lib/soul-suggestions'
+import { SectionLabel } from '@/components/shared/section-label'
+import { SoulLibraryPicker } from './soul-library-picker'
 
-const HB_PRESETS = [30, 60, 120, 300, 600, 1800, 3600] as const
+const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
 
 function formatHbDuration(sec: number): string {
   if (sec >= 3600) {
@@ -60,6 +64,7 @@ export function AgentSheet() {
   const loadProviders = useAppStore((s) => s.loadProviders)
   const credentials = useAppStore((s) => s.credentials)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const appSettings = useAppStore((s) => s.appSettings)
   const dynamicSkills = useAppStore((s) => s.skills)
   const mcpServers = useAppStore((s) => s.mcpServers)
   const loadSkills = useAppStore((s) => s.loadSkills)
@@ -77,6 +82,8 @@ export function AgentSheet() {
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [soul, setSoul] = useState('')
+  const [soulInitial, setSoulInitial] = useState('')
+  const [soulSaveState, setSoulSaveState] = useState<'idle' | 'saved'>('idle')
   const [systemPrompt, setSystemPrompt] = useState('')
   const [provider, setProvider] = useState<ProviderType>('claude-cli')
   const [model, setModel] = useState('')
@@ -92,7 +99,6 @@ export function AgentSheet() {
   const [mcpTools, setMcpTools] = useState<Record<string, { name: string; description: string }[]>>({})
   const [mcpToolsLoading, setMcpToolsLoading] = useState(false)
   const [fallbackCredentialIds, setFallbackCredentialIds] = useState<string[]>([])
-  const [platformAssignScope, setPlatformAssignScope] = useState<'self' | 'all'>('self')
   const [capabilities, setCapabilities] = useState<string[]>([])
   const [capInput, setCapInput] = useState('')
   const [ollamaMode, setOllamaMode] = useState<'local' | 'cloud'>('local')
@@ -100,6 +106,7 @@ export function AgentSheet() {
   const [projectId, setProjectId] = useState<string | undefined>(undefined)
   const [avatarSeed, setAvatarSeed] = useState('')
   const [thinkingLevel, setThinkingLevel] = useState<'' | 'minimal' | 'low' | 'medium' | 'high'>('')
+  const [voiceId, setVoiceId] = useState('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
   const [heartbeatModel, setHeartbeatModel] = useState('')
@@ -118,6 +125,7 @@ export function AgentSheet() {
   const [configCopied, setConfigCopied] = useState(false)
 
   const soulFileRef = useRef<HTMLInputElement>(null)
+  const [soulLibraryOpen, setSoulLibraryOpen] = useState(false)
   const promptFileRef = useRef<HTMLInputElement>(null)
   const importFileRef = useRef<HTMLInputElement>(null)
 
@@ -154,6 +162,8 @@ export function AgentSheet() {
         setName(editing.name)
         setDescription(editing.description)
         setSoul(editing.soul || '')
+        setSoulInitial(editing.soul || '')
+        setSoulSaveState('idle')
         setSystemPrompt(editing.systemPrompt)
         setProvider(editing.provider)
         setModel(editing.model)
@@ -167,14 +177,15 @@ export function AgentSheet() {
         setMcpServerIds(editing.mcpServerIds || [])
         setMcpDisabledTools(editing.mcpDisabledTools || [])
         setFallbackCredentialIds(editing.fallbackCredentialIds || [])
-        setPlatformAssignScope(editing.platformAssignScope || 'self')
+        // platformAssignScope derived from isOrchestrator — no separate state
         setCapabilities(editing.capabilities || [])
         setCapInput('')
         setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
         setOpenclawEnabled(editing.provider === 'openclaw')
         setProjectId(editing.projectId)
-        setAvatarSeed(editing.avatarSeed || '')
+        setAvatarSeed(editing.avatarSeed || crypto.randomUUID().slice(0, 8))
         setThinkingLevel(editing.thinkingLevel || '')
+        setVoiceId(editing.elevenLabsVoiceId || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
@@ -182,7 +193,10 @@ export function AgentSheet() {
       } else {
         setName('')
         setDescription('')
-        setSoul('')
+        const newSoul = randomSoul()
+        setSoul(newSoul)
+        setSoulInitial(newSoul)
+        setSoulSaveState('idle')
         setSystemPrompt('')
         setProvider('claude-cli')
         setModel('')
@@ -195,7 +209,6 @@ export function AgentSheet() {
         setSkillIds([])
         setMcpDisabledTools([])
         setFallbackCredentialIds([])
-        setPlatformAssignScope('self')
         setCapabilities([])
         setCapInput('')
         setOllamaMode('local')
@@ -203,6 +216,7 @@ export function AgentSheet() {
         setProjectId(undefined)
         setAvatarSeed('')
         setThinkingLevel('')
+        setVoiceId('')
         setHeartbeatEnabled(false)
         setHeartbeatIntervalSec('')
         setHeartbeatModel('')
@@ -292,11 +306,12 @@ export function AgentSheet() {
       mcpServerIds,
       mcpDisabledTools: mcpDisabledTools.length ? mcpDisabledTools : undefined,
       fallbackCredentialIds,
-      platformAssignScope,
+      platformAssignScope: (isOrchestrator ? 'all' : 'self') as 'all' | 'self',
       capabilities,
       projectId: projectId || undefined,
       avatarSeed: avatarSeed.trim() || undefined,
       thinkingLevel: thinkingLevel || undefined,
+      elevenLabsVoiceId: voiceId.trim() || null,
       heartbeatEnabled,
       heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
       heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
@@ -305,16 +320,22 @@ export function AgentSheet() {
     }
     if (editing) {
       await updateAgent(editing.id, data)
+      toast.success('Agent saved')
     } else {
       await createAgent(data)
+      toast.success('Agent created')
     }
     await loadAgents()
+    setSoulInitial(soul)
+    setSoulSaveState('saved')
+    setTimeout(() => setSoulSaveState('idle'), 1500)
     onClose()
   }
 
   const handleDelete = async () => {
     if (editing) {
       await deleteAgent(editing.id)
+      toast.success('Agent moved to trash')
       await loadAgents()
       onClose()
     }
@@ -414,6 +435,7 @@ export function AgentSheet() {
   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"
 
   return (
+    <>
     <BottomSheet open={open} onClose={onClose} wide>
       <div className="mb-10 flex items-start justify-between">
         <div>
@@ -452,12 +474,12 @@ export function AgentSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
+        <SectionLabel>Name</SectionLabel>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. SEO Researcher" className={inputClass} style={{ fontFamily: 'inherit' }} />
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Avatar</label>
+        <SectionLabel>Avatar</SectionLabel>
         <div className="flex items-center gap-3">
           <AgentAvatar seed={avatarSeed || null} name={name || 'A'} size={40} />
           <input
@@ -470,25 +492,29 @@ export function AgentSheet() {
           />
           <button
             type="button"
-            onClick={() => setAvatarSeed(Math.random().toString(36).slice(2, 10))}
-            className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] shrink-0"
+            onClick={() => setAvatarSeed(crypto.randomUUID().slice(0, 8))}
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] hover:text-text-2 active:scale-95 shrink-0"
             style={{ fontFamily: 'inherit' }}
+            title="Shuffle avatar"
           >
-            Randomize
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <rect x="4" y="4" width="16" height="16" rx="2" />
+              <circle cx="9" cy="9" r="1" fill="currentColor" />
+              <circle cx="15" cy="15" r="1" fill="currentColor" />
+            </svg>
+            Shuffle
           </button>
         </div>
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Description</label>
+        <SectionLabel>Description</SectionLabel>
         <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What does this agent do?" className={inputClass} style={{ fontFamily: 'inherit' }} />
       </div>
 
       {/* Capabilities — hidden for OpenClaw (gateway manages its own capabilities) */}
       {!openclawEnabled && <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Capabilities <span className="normal-case tracking-normal font-normal text-text-3">(for agent delegation)</span>
-        </label>
+        <SectionLabel>Capabilities <span className="normal-case tracking-normal font-normal text-text-3">(for agent delegation)</span></SectionLabel>
         <div className="flex flex-wrap gap-1.5 mb-2">
           {capabilities.map((cap) => (
             <span
@@ -568,6 +594,24 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Controls reasoning depth. Anthropic models use extended thinking; OpenAI o-series uses reasoning_effort. Others get system prompt guidance.</p>
       </div>
 
+      {/* ElevenLabs Voice ID */}
+      {appSettings.elevenLabsEnabled && (
+        <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>
+          <input
+            type="text"
+            value={voiceId}
+            onChange={(e) => setVoiceId(e.target.value)}
+            placeholder="Leave blank for 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>
+      )}
+
       {/* Heartbeat Configuration */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
@@ -624,11 +668,45 @@ export function AgentSheet() {
 
       {provider !== 'openclaw' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
             Soul / Personality <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+            {soul !== soulInitial && soulSaveState === 'idle' && (
+              <span className="inline-flex items-center gap-1 normal-case tracking-normal text-[10px] text-amber-400 font-600">
+                <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
+                Unsaved
+              </span>
+            )}
+            {soulSaveState === 'saved' && (
+              <span className="inline-flex items-center gap-1 normal-case tracking-normal text-[10px] text-emerald-400 font-600">
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+                Saved
+              </span>
+            )}
           </label>
           <div className="flex items-center gap-2 mb-3">
             <p className="text-[12px] text-text-3/60">Define the agent&apos;s voice, tone, and personality. Injected before the system prompt.</p>
+            <button
+              type="button"
+              onClick={() => setSoul(randomSoul())}
+              className="inline-flex items-center gap-1.5 shrink-0 px-2 py-1 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] text-text-3 hover:text-text-2 cursor-pointer transition-colors"
+              style={{ fontFamily: 'inherit' }}
+              title="Randomize personality"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <rect x="4" y="4" width="16" height="16" rx="2" />
+                <circle cx="9" cy="9" r="1" fill="currentColor" />
+                <circle cx="15" cy="15" r="1" fill="currentColor" />
+              </svg>
+              Shuffle
+            </button>
+            <button
+              type="button"
+              onClick={() => setSoulLibraryOpen(true)}
+              className="shrink-0 px-2 py-1 rounded-[8px] border border-accent-bright/20 bg-accent-soft text-[11px] text-accent-bright hover:brightness-110 cursor-pointer transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Browse Library
+            </button>
             <button onClick={() => soulFileRef.current?.click()} className="shrink-0 px-2 py-1 rounded-[8px] border border-white/[0.08] bg-surface text-[11px] text-text-3 hover:text-text-2 cursor-pointer transition-colors" style={{ fontFamily: 'inherit' }}>Upload .md</button>
             <input ref={soulFileRef} type="file" accept=".md,.txt,.markdown" onChange={handleFileUpload(setSoul)} className="hidden" />
           </div>
@@ -854,7 +932,7 @@ export function AgentSheet() {
       )}
 
       {!openclawEnabled && <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Provider</label>
+        <SectionLabel>Provider</SectionLabel>
         <div className="grid grid-cols-3 gap-3">
           {providers.filter((p) => !isOrchestrator || p.id !== 'claude-cli').map((p) => {
             const isConnected = !p.requiresApiKey || Object.values(credentials).some((c) => c.provider === p.id)
@@ -883,7 +961,7 @@ export function AgentSheet() {
 
       {!openclawEnabled && currentProvider && currentProvider.models.length > 0 && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Model</label>
+          <SectionLabel>Model</SectionLabel>
           <ModelCombobox
             providerId={currentProvider.id}
             value={model}
@@ -900,7 +978,7 @@ export function AgentSheet() {
       {/* Ollama Mode Toggle */}
       {!openclawEnabled && provider === 'ollama' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Mode</label>
+          <SectionLabel>Mode</SectionLabel>
           <div className="flex p-1 rounded-[14px] bg-surface border border-white/[0.06]">
             {(['local', 'cloud'] as const).map((mode) => (
               <button
@@ -931,9 +1009,7 @@ export function AgentSheet() {
 
       {!openclawEnabled && (currentProvider?.requiresApiKey || currentProvider?.optionalApiKey || (provider === 'ollama' && ollamaMode === 'cloud')) && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            API Key{currentProvider?.optionalApiKey && !currentProvider?.requiresApiKey && <span className="normal-case tracking-normal font-normal text-text-3"> (optional)</span>}
-          </label>
+          <SectionLabel>API Key{currentProvider?.optionalApiKey && !currentProvider?.requiresApiKey && <span className="normal-case tracking-normal font-normal text-text-3"> (optional)</span>}</SectionLabel>
           {providerCredentials.length > 0 && !addingKey ? (
             <div className="flex gap-2">
               <select value={credentialId || ''} onChange={(e) => {
@@ -1037,9 +1113,7 @@ export function AgentSheet() {
 
       {currentProvider?.requiresEndpoint && (provider === 'openclaw' || (provider === 'ollama' && ollamaMode === 'local')) && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            {provider === 'openclaw' ? 'OpenClaw Endpoint' : 'Endpoint'}
-          </label>
+          <SectionLabel>{provider === 'openclaw' ? 'OpenClaw Endpoint' : 'Endpoint'}</SectionLabel>
           <input type="text" value={apiEndpoint || ''} onChange={(e) => setApiEndpoint(e.target.value || null)} placeholder={currentProvider.defaultEndpoint || 'http://localhost:11434'} className={`${inputClass} font-mono text-[14px]`} />
           {provider === 'openclaw' && (
             <p className="text-[13px] text-text-3/70 mt-2">The URL of your OpenClaw gateway</p>
@@ -1058,7 +1132,7 @@ export function AgentSheet() {
                 <div
                   onClick={() => setTools((prev) => prev.includes(t.id) ? prev.filter((x) => x !== t.id) : [...prev, t.id])}
                   className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                    ${tools.includes(t.id) ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                    ${tools.includes(t.id) ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                 >
                   <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                     ${tools.includes(t.id) ? 'left-[22px]' : 'left-0.5'}`} />
@@ -1082,7 +1156,7 @@ export function AgentSheet() {
                 <div
                   onClick={() => setTools((prev) => prev.includes(t.id) ? prev.filter((x) => x !== t.id) : [...prev, t.id])}
                   className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                    ${tools.includes(t.id) ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                    ${tools.includes(t.id) ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                 >
                   <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                     ${tools.includes(t.id) ? 'left-[22px]' : 'left-0.5'}`} />
@@ -1092,22 +1166,6 @@ export function AgentSheet() {
               </label>
             ))}
           </div>
-          {(tools.includes('manage_tasks') || tools.includes('manage_schedules')) && (
-            <div className="mt-4 ml-1 pt-3 border-t border-white/[0.04]">
-              <label className="flex items-center gap-3 cursor-pointer">
-                <div
-                  onClick={() => setPlatformAssignScope((prev) => prev === 'all' ? 'self' : 'all')}
-                  className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                    ${platformAssignScope === 'all' ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
-                >
-                  <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
-                    ${platformAssignScope === 'all' ? 'left-[22px]' : 'left-0.5'}`} />
-                </div>
-                <span className="font-display text-[14px] font-600 text-text-2">Assign to Other Agents</span>
-                <span className="text-[12px] text-text-3">Allow this agent to assign tasks and schedules to other agents</span>
-              </label>
-            </div>
-          )}
         </div>
       )}
 
@@ -1259,7 +1317,7 @@ export function AgentSheet() {
                               enabled ? [...prev, fullName] : prev.filter((x) => x !== fullName)
                             )}
                             className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                              ${enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                              ${enabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                           >
                             <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                               ${enabled ? 'left-[22px]' : 'left-0.5'}`} />
@@ -1287,35 +1345,25 @@ export function AgentSheet() {
                 if (next && provider === 'claude-cli') setProvider('anthropic')
               }}
               className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer
-                ${isOrchestrator ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                ${isOrchestrator ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
             >
               <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                 ${isOrchestrator ? 'left-[22px]' : 'left-0.5'}`} />
             </div>
-            <span className="font-display text-[14px] font-600 text-text-2">Orchestrator</span>
-            <span className="text-[12px] text-text-3">Can delegate tasks to other agents</span>
+            <span className="font-display text-[14px] font-600 text-text-2">Can Delegate to Other Agents</span>
+            <span className="text-[12px] text-text-3">Route work to specialized agents and coordinate multi-agent tasks</span>
           </label>
         </div>
       )}
 
       {provider !== 'openclaw' && isOrchestrator && agentOptions.length > 0 && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Available Agents</label>
-          <div className="flex flex-wrap gap-2">
-            {agentOptions.map((a) => (
-              <button
-                key={a.id}
-                onClick={() => toggleAgent(a.id)}
-                className={`px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
-                  ${subAgentIds.includes(a.id)
-                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                    : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                {a.name}
-              </button>
-            ))}
-          </div>
+          <SectionLabel>Available Agents</SectionLabel>
+          <AgentPickerList
+            agents={agentOptions}
+            selected={subAgentIds}
+            onSelect={(id) => toggleAgent(id)}
+          />
         </div>
       )}
 
@@ -1366,7 +1414,7 @@ export function AgentSheet() {
           onClick={handleTestAndSave}
           disabled={!name.trim() || providerNeedsKey || testStatus === 'testing' || saving || (!openclawEnabled && testStatus === 'pass')}
           className={`flex-1 py-3.5 rounded-[14px] border-none text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-60 transition-all hover:brightness-110
-            ${testStatus === 'pass' ? 'bg-emerald-600 shadow-[0_4px_20px_rgba(16,185,129,0.25)]' : 'bg-[#6366F1] shadow-[0_4px_20px_rgba(99,102,241,0.25)]'}`}
+            ${testStatus === 'pass' ? 'bg-emerald-600 shadow-[0_4px_20px_rgba(16,185,129,0.25)]' : 'bg-accent-bright shadow-[0_4px_20px_rgba(99,102,241,0.25)]'}`}
           style={{ fontFamily: 'inherit' }}
         >
           {openclawEnabled
@@ -1379,6 +1427,13 @@ export function AgentSheet() {
         </button>
       </div>
     </BottomSheet>
+
+    <SoulLibraryPicker
+      open={soulLibraryOpen}
+      onClose={() => setSoulLibraryOpen(false)}
+      onSelect={(s) => setSoul(s)}
+    />
+    </>
   )
 }
 

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

@@ -12,6 +12,11 @@ import { CronJobForm } from './cron-job-form'
 
 interface Props {
   agent: Agent
+  onEditAgent?: () => void
+  onClearHistory?: () => void
+  onDeleteAgent?: () => void
+  onDeleteChat?: () => void
+  isMainChat?: boolean
 }
 
 type InspectorTab = 'overview' | 'files' | 'skills' | 'automations' | 'advanced'
@@ -24,7 +29,7 @@ const TABS: { id: InspectorTab; label: string; openclawOnly?: boolean }[] = [
   { id: 'advanced', label: 'Advanced' },
 ]
 
-export function InspectorPanel({ agent }: Props) {
+export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: Props) {
   const inspectorTab = useAppStore((s) => s.inspectorTab)
   const setInspectorTab = useAppStore((s) => s.setInspectorTab)
   const setInspectorOpen = useAppStore((s) => s.setInspectorOpen)
@@ -52,7 +57,7 @@ export function InspectorPanel({ agent }: Props) {
   const agentSchedules = Object.values(schedules).filter((s) => s.agentId === agent.id)
 
   return (
-    <div className="w-[400px] shrink-0 border-l border-white/[0.06] bg-[#0d0f1a] flex flex-col h-full overflow-hidden fade-up-delay">
+    <div className="w-[400px] shrink-0 border-l border-white/[0.06] bg-bg flex flex-col h-full overflow-hidden fade-up-delay">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06] shrink-0">
         <h3 className="font-display text-[14px] font-600 text-text truncate">{agent.name}</h3>
@@ -69,12 +74,14 @@ export function InspectorPanel({ agent }: Props) {
       </div>
 
       {/* Tab bar */}
-      <div className="flex gap-0.5 px-3 pt-2 pb-1 overflow-x-auto shrink-0">
+      <div className="flex gap-0.5 px-3 pt-2 pb-1 overflow-x-auto shrink-0" role="tablist">
         {visibleTabs.map((tab) => (
           <button
             key={tab.id}
+            role="tab"
             onClick={() => setInspectorTab(tab.id)}
-            className={`px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all whitespace-nowrap
+            aria-selected={inspectorTab === tab.id}
+            className={`px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all whitespace-nowrap focus-visible:ring-1 focus-visible:ring-accent-bright/50
               ${inspectorTab === tab.id
                 ? 'bg-accent-soft text-accent-bright'
                 : 'bg-transparent text-text-3 hover:text-text-2'}`}
@@ -88,7 +95,14 @@ export function InspectorPanel({ agent }: Props) {
       {/* Tab content */}
       <div className="flex-1 min-h-0 overflow-y-auto">
         {inspectorTab === 'overview' && (
-          <OverviewTab agent={agent} />
+          <OverviewTab
+            agent={agent}
+            onEditAgent={onEditAgent}
+            onClearHistory={onClearHistory}
+            onDeleteAgent={onDeleteAgent}
+            onDeleteChat={onDeleteChat}
+            isMainChat={isMainChat}
+          />
         )}
         {inspectorTab === 'files' && isOpenClaw && (
           <AgentFilesEditor agentId={agent.id} />
@@ -117,7 +131,16 @@ export function InspectorPanel({ agent }: Props) {
   )
 }
 
-function OverviewTab({ agent }: { agent: Agent }) {
+interface OverviewTabProps {
+  agent: Agent
+  onEditAgent?: () => void
+  onClearHistory?: () => void
+  onDeleteAgent?: () => void
+  onDeleteChat?: () => void
+  isMainChat?: boolean
+}
+
+function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: OverviewTabProps) {
   return (
     <div className="p-4 flex flex-col gap-4">
       <div>
@@ -160,6 +183,58 @@ function OverviewTab({ agent }: { agent: Agent }) {
           </div>
         </div>
       )}
+
+      {/* Actions */}
+      {(onEditAgent || onClearHistory || onDeleteAgent || onDeleteChat) && (
+        <>
+          <div className="border-t border-white/[0.06] mt-2" />
+          <div className="flex flex-col gap-2">
+            {onEditAgent && (
+              <button
+                onClick={onEditAgent}
+                className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-accent-bright bg-accent-soft/50 border border-accent-bright/10 cursor-pointer transition-all hover:bg-accent-soft"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Edit Agent
+              </button>
+            )}
+            {(onClearHistory || onDeleteAgent || onDeleteChat) && (
+              <>
+                <label className="block text-[11px] font-600 uppercase tracking-wider text-red-400/50 mt-2">Danger Zone</label>
+                <div className="flex flex-col gap-1.5">
+                  {onClearHistory && (
+                    <button
+                      onClick={onClearHistory}
+                      className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      Clear History
+                    </button>
+                  )}
+                  {onDeleteAgent && !isMainChat && (
+                    <button
+                      onClick={onDeleteAgent}
+                      className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      Delete Agent
+                    </button>
+                  )}
+                  {onDeleteChat && !isMainChat && (
+                    <button
+                      onClick={onDeleteChat}
+                      className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      Delete Chat
+                    </button>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </>
+      )}
     </div>
   )
 }

package/src/components/agents/openclaw-skills-panel.tsx

@@ -23,6 +23,7 @@ export function OpenClawSkillsPanel({ agentId, initialMode = 'all', initialAllow
   const [saving, setSaving] = useState(false)
   const [installTarget, setInstallTarget] = useState<OpenClawSkillEntry | null>(null)
   const [removeTarget, setRemoveTarget] = useState<OpenClawSkillEntry | null>(null)
+  const [readinessFilter, setReadinessFilter] = useState<'all' | 'ready' | 'needs-setup'>('all')
 
   const loadSkills = useCallback(async () => {
     setLoading(true)
@@ -67,15 +68,24 @@ export function OpenClawSkillsPanel({ agentId, initialMode = 'all', initialAllow
     }
   }
 
+  const readyCount = skills.filter((s) => s.eligible).length
+  const needsSetupCount = skills.filter((s) => !s.eligible).length
+
+  const filteredSkills = readinessFilter === 'all'
+    ? skills
+    : readinessFilter === 'ready'
+      ? skills.filter((s) => s.eligible)
+      : skills.filter((s) => !s.eligible)
+
   const grouped = SOURCE_ORDER
     .map((source) => ({
       source,
-      items: skills.filter((s) => s.source === source),
+      items: filteredSkills.filter((s) => s.source === source),
     }))
     .filter((g) => g.items.length > 0)
 
   if (loading) {
-    return <div className="flex items-center justify-center h-32 text-[13px] text-text-3/50">Loading skills...</div>
+    return <div className="flex items-center justify-center gap-2 h-32 text-[13px] text-text-3/50"><span className="w-3 h-3 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin" />Loading skills...</div>
   }
 
   if (error) {
@@ -90,7 +100,7 @@ export function OpenClawSkillsPanel({ agentId, initialMode = 'all', initialAllow
           <button
             key={m}
             onClick={() => handleModeChange(m)}
-            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 capitalize cursor-pointer transition-all
+            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 capitalize cursor-pointer transition-all focus-visible:ring-1 focus-visible:ring-accent-bright/50
               ${mode === m ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
             style={{ fontFamily: 'inherit' }}
           >
@@ -99,6 +109,25 @@ export function OpenClawSkillsPanel({ agentId, initialMode = 'all', initialAllow
         ))}
       </div>
 
+      {/* Readiness filter */}
+      <div className="flex gap-1">
+        {([
+          { key: 'all' as const, label: `All (${skills.length})` },
+          { key: 'ready' as const, label: `Ready (${readyCount})` },
+          { key: 'needs-setup' as const, label: `Needs Setup (${needsSetupCount})` },
+        ]).map((f) => (
+          <button
+            key={f.key}
+            onClick={() => setReadinessFilter(f.key)}
+            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all focus-visible:ring-1 focus-visible:ring-accent-bright/50
+              ${readinessFilter === f.key ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
       {/* Skill groups */}
       {grouped.map(({ source, items }) => (
         <div key={source}>