@swarmclawai/swarmclaw 0.7.7 → 0.8.0

package/src/components/shared/settings/section-capability-policy.tsx

@@ -7,8 +7,10 @@ const APPROVAL_CATEGORY_OPTIONS: Array<{ id: ApprovalCategory; label: string; de
   { id: 'tool_access', label: 'Plugin Access', description: 'Auto-enable requested plugins for a chat.' },
   { id: 'plugin_scaffold', label: 'Plugin Scaffold', description: 'Auto-create plugin files requested by agents.' },
   { id: 'plugin_install', label: 'Plugin Install', description: 'Auto-install plugins from approved URLs.' },
+  { id: 'connector_sender', label: 'Connector Senders', description: 'Auto-approve new connector senders and add them to the allowlist.' },
   { id: 'human_loop', label: 'Human Approval Requests', description: 'Auto-approve ask-human approval prompts.' },
   { id: 'wallet_transfer', label: 'Wallet Transfers', description: 'Auto-approve wallet send requests. High risk.' },
+  { id: 'wallet_action', label: 'Wallet Actions', description: 'Auto-approve wallet signatures and arbitrary transaction requests. Very high risk.' },
   { id: 'task_tool', label: 'Task Tool Calls', description: 'Reserved for task-level approval flows.' },
 ]
 
@@ -46,6 +48,44 @@ export function CapabilityPolicySection({ appSettings, patchSettings, inputClass
         </div>
 
         <div className="grid grid-cols-1 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <div className="text-[12px] font-600 text-text-2">Task Management</div>
+                  <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                    Controls the task board and agent access to durable backlog tracking. Internal queue execution still works underneath.
+                  </p>
+                </div>
+                <button
+                  onClick={() => patchSettings({ taskManagementEnabled: !(appSettings.taskManagementEnabled ?? true) })}
+                  className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.taskManagementEnabled ?? true) ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                  aria-label="Toggle task management"
+                >
+                  <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${(appSettings.taskManagementEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+                </button>
+              </div>
+            </div>
+
+            <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <div className="text-[12px] font-600 text-text-2">Project Management</div>
+                  <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                    Controls the project operating-system UI and agent access to durable project context for objectives, credentials, and heartbeat plans.
+                  </p>
+                </div>
+                <button
+                  onClick={() => patchSettings({ projectManagementEnabled: !(appSettings.projectManagementEnabled ?? true) })}
+                  className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.projectManagementEnabled ?? true) ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                  aria-label="Toggle project management"
+                >
+                  <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${(appSettings.projectManagementEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+                </button>
+              </div>
+            </div>
+          </div>
+
           <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
             <div className="flex items-center justify-between gap-4">
               <div>
@@ -55,11 +95,13 @@ export function CapabilityPolicySection({ appSettings, patchSettings, inputClass
                 </p>
               </div>
               <button
-                onClick={() => patchSettings({ approvalsEnabled: !(appSettings.approvalsEnabled ?? true) })}
-                className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.approvalsEnabled ?? true) ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                onClick={() => patchSettings({ approvalsEnabled: !(appSettings.approvalsEnabled ?? false) })}
+                className={`inline-flex h-[22px] w-10 shrink-0 items-center rounded-full border border-white/[0.08] p-[3px] transition-colors duration-200 cursor-pointer ${
+                  (appSettings.approvalsEnabled ?? false) ? 'justify-end bg-accent' : 'justify-start bg-white/[0.16]'
+                }`}
                 aria-label="Toggle platform approvals"
               >
-                <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${(appSettings.approvalsEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+                <span className="h-4 w-4 rounded-full bg-white shadow-[0_1px_4px_rgba(0,0,0,0.35)]" />
               </button>
             </div>
           </div>

package/src/components/shared/settings/section-voice.tsx

@@ -5,6 +5,8 @@ import type { SettingsSectionProps } from './types'
 export function VoiceSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const enabled = appSettings.elevenLabsEnabled ?? false
   const hasApiKey = appSettings.elevenLabsApiKeyConfigured === true
+  const defaultVoiceId = typeof appSettings.elevenLabsVoiceId === 'string' ? appSettings.elevenLabsVoiceId.trim() : ''
+  const showVoiceConfig = enabled || hasApiKey || Boolean(defaultVoiceId)
 
   return (
     <div className="mb-10">
@@ -12,7 +14,7 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
         Voice
       </h3>
       <p className="text-[12px] text-text-3 mb-5">
-        Configure voice playback (TTS) and speech-to-text input.
+        Configure voice playback (TTS), the default ElevenLabs voice, and speech-to-text input.
       </p>
       <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
         {/* ElevenLabs toggle */}
@@ -30,7 +32,7 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
           </button>
         </div>
 
-        {enabled && (
+        {showVoiceConfig && (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
             <div>
               <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">API Key</label>
@@ -56,11 +58,17 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
                 className={inputClass}
                 style={{ fontFamily: 'inherit' }}
               />
-              <p className="text-[11px] text-text-3/60 mt-1.5">Fallback voice when an agent has no override set.</p>
+              <p className="text-[11px] text-text-3/60 mt-1.5">Fallback voice when an agent has no override set. Agents can override this in their own create/edit sheet.</p>
             </div>
           </div>
         )}
 
+        {showVoiceConfig && !enabled && (
+          <p className="mb-5 rounded-[12px] border border-white/[0.06] bg-white/[0.03] px-3 py-2.5 text-[11px] text-text-3/70">
+            ElevenLabs credentials and default voice can be prepared here even while playback is turned off.
+          </p>
+        )}
+
         <div>
           <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Speech Recognition Language</label>
           <input

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

@@ -275,6 +275,14 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
               const scopedAgents = skillScope === 'agent'
                 ? skillAgentIds.map((id) => agents[id]).filter(Boolean)
                 : []
+              const securityTone = skill.security?.level === 'high'
+                ? 'bg-red-500/10 text-red-300 border-red-500/20'
+                : skill.security?.level === 'medium'
+                  ? 'bg-amber-500/10 text-amber-300 border-amber-500/20'
+                  : 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20'
+              const requirementCount = (skill.skillRequirements?.env?.length || 0)
+                + (skill.skillRequirements?.bins?.length || 0)
+                + (skill.skillRequirements?.config?.length || 0)
               return (
                 <div
                   key={skill.id}
@@ -315,6 +323,23 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
                   {skill.description && (
                     <p className="text-[12px] text-text-3/60 line-clamp-2">{skill.description}</p>
                   )}
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {skill.version && (
+                      <span className="rounded-full border border-white/[0.08] px-2 py-1 text-[10px] font-700 text-text-3/70">
+                        v{skill.version}
+                      </span>
+                    )}
+                    {typeof requirementCount === 'number' && requirementCount > 0 && (
+                      <span className="rounded-full border border-white/[0.08] px-2 py-1 text-[10px] font-700 text-text-3/70">
+                        {requirementCount} reqs
+                      </span>
+                    )}
+                    {skill.security && (
+                      <span className={`rounded-full border px-2 py-1 text-[10px] font-700 uppercase tracking-[0.08em] ${securityTone}`}>
+                        {skill.security.level}
+                      </span>
+                    )}
+                  </div>
                   <div className="flex items-center gap-2 mt-1.5">
                     <span className="text-[11px] text-text-3/70">{skill.content.length} chars</span>
                     <span className="text-[11px] text-text-3/60">·</span>

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

@@ -1,11 +1,14 @@
 'use client'
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, type ChangeEvent } from 'react'
 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/api-client'
+import { buildSkillSavePayload } from '@/lib/skill-save-payload'
 import { toast } from 'sonner'
+import type { Skill, SkillSecuritySummary } from '@/types'
 
 export function SkillSheet() {
   const open = useAppStore((s) => s.skillSheetOpen)
@@ -28,6 +31,9 @@ export function SkillSheet() {
   const [importingUrl, setImportingUrl] = useState(false)
   const [importError, setImportError] = useState('')
   const [importNotice, setImportNotice] = useState('')
+  const [metadataPreview, setMetadataPreview] = useState<Partial<Skill> | null>(null)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleting, setDeleting] = useState(false)
 
   const editing = editingId ? skills[editingId] : null
   const agentList = Object.values(agents)
@@ -38,13 +44,14 @@ export function SkillSheet() {
     setImportError('')
     setImportNotice('')
     try {
-      const result = await api<{ name: string; filename: string; description?: string; content: string; sourceFormat?: 'openclaw' | 'plain' }>('POST', '/skills/import', { url: importUrl.trim() })
+      const result = await api<Partial<Skill> & { name: string; filename: string; description?: string; content: string; sourceFormat?: 'openclaw' | 'plain' }>('POST', '/skills/import', { url: importUrl.trim() })
       setName(result.name || '')
       setFilename(result.filename || '')
       setDescription(result.description || '')
       setContent(result.content || '')
+      setMetadataPreview(result)
       if (result.sourceFormat === 'openclaw') {
-        setImportNotice('Imported OpenClaw SKILL.md format and stripped frontmatter automatically.')
+        setImportNotice(`Imported OpenClaw SKILL.md format.${result.security ? ` Security review: ${result.security.level}.` : ''}`)
       } else {
         setImportNotice('Skill imported from URL.')
       }
@@ -73,6 +80,7 @@ export function SkillSheet() {
         setContent(editing.content)
         setScope(editing.scope || 'global')
         setAgentIds(editing.agentIds || [])
+        setMetadataPreview(editing)
       } else {
         setName('')
         setFilename('')
@@ -80,16 +88,19 @@ export function SkillSheet() {
         setContent('')
         setScope('global')
         setAgentIds([])
+        setMetadataPreview(null)
       }
     }
   }, [open, editingId])
 
   const onClose = () => {
+    setConfirmDelete(false)
+    setDeleting(false)
     setOpen(false)
     setEditingId(null)
   }
 
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
     const reader = new FileReader()
@@ -114,14 +125,14 @@ export function SkillSheet() {
       : `${agentIds.length} agent(s) selected`
 
   const handleSave = async () => {
-    const data = {
-      name: name.trim() || 'Unnamed Skill',
-      filename: filename.trim() || `${name.trim().toLowerCase().replace(/\s+/g, '-')}.md`,
+    const data = buildSkillSavePayload({
+      name,
+      filename,
       description,
       content,
       scope,
-      agentIds: scope === 'agent' ? agentIds : [],
-    }
+      agentIds,
+    }, metadataPreview)
     try {
       if (editing) {
         await api('PUT', `/skills/${editing.id}`, data)
@@ -139,19 +150,25 @@ export function SkillSheet() {
 
   const handleDelete = async () => {
     if (!editing) return
-    if (!confirm(`Delete skill "${editing.name}"? This will remove it from all assigned agents.`)) return
-    
+    setDeleting(true)
     try {
       await api('DELETE', `/skills/${editing.id}`)
       toast.success('Skill deleted')
       await loadSkills()
+      setConfirmDelete(false)
       onClose()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete skill')
+    } finally {
+      setDeleting(false)
     }
   }
 
   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"
+  const previewSecurity = metadataPreview?.security as SkillSecuritySummary | undefined
+  const requirementCount = (metadataPreview?.skillRequirements?.env?.length || 0)
+    + (metadataPreview?.skillRequirements?.bins?.length || 0)
+    + (metadataPreview?.skillRequirements?.config?.length || 0)
 
   return (
     <BottomSheet open={open} onClose={onClose} wide>
@@ -206,6 +223,50 @@ export function SkillSheet() {
         </div>
       )}
 
+      {metadataPreview && (
+        <div className="mb-8 rounded-[14px] border border-white/[0.08] bg-white/[0.03] p-4">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/60">Skill Metadata</div>
+              <p className="mt-1 text-[13px] text-text-2">
+                {metadataPreview.version ? `v${metadataPreview.version}` : 'Unversioned'}
+                {metadataPreview.sourceFormat ? ` · ${metadataPreview.sourceFormat}` : ''}
+                {requirementCount > 0 ? ` · ${requirementCount} declared requirement${requirementCount === 1 ? '' : 's'}` : ''}
+              </p>
+            </div>
+            {previewSecurity && (
+              <span className={`rounded-full px-2.5 py-1 text-[10px] font-700 uppercase tracking-[0.08em] ${
+                previewSecurity.level === 'high'
+                  ? 'bg-red-500/10 text-red-300 border border-red-500/20'
+                  : previewSecurity.level === 'medium'
+                    ? 'bg-amber-500/10 text-amber-300 border border-amber-500/20'
+                    : 'bg-emerald-500/10 text-emerald-300 border border-emerald-500/20'
+              }`}>
+                {previewSecurity.level} risk
+              </span>
+            )}
+          </div>
+
+          {(metadataPreview.primaryEnv || metadataPreview.homepage || metadataPreview.skillKey) && (
+            <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-text-3/70">
+              {metadataPreview.primaryEnv && <span className="rounded-full border border-white/[0.08] px-2 py-1">Primary env: {metadataPreview.primaryEnv}</span>}
+              {metadataPreview.skillKey && <span className="rounded-full border border-white/[0.08] px-2 py-1">Skill key: {metadataPreview.skillKey}</span>}
+              {metadataPreview.homepage && <span className="rounded-full border border-white/[0.08] px-2 py-1">Homepage linked</span>}
+            </div>
+          )}
+
+          {previewSecurity?.notes?.length ? (
+            <div className="mt-3 space-y-1">
+              {previewSecurity.notes.slice(0, 4).map((note) => (
+                <p key={note} className="text-[12px] text-text-3/75">- {note}</p>
+              ))}
+            </div>
+          ) : (
+            <p className="mt-3 text-[12px] text-text-3/65">No obvious requirement or security signals were detected.</p>
+          )}
+        </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>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Frontend Design" className={inputClass} style={{ fontFamily: 'inherit' }} />
@@ -285,7 +346,7 @@ export function SkillSheet() {
 
       <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
         {editing && (
-          <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
+          <button onClick={() => setConfirmDelete(true)} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
             Delete
           </button>
         )}
@@ -296,6 +357,17 @@ export function SkillSheet() {
           {editing ? 'Save' : 'Create'}
         </button>
       </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Skill?"
+        message={editing ? `Delete "${editing.name}"? This will remove it from all assigned agents.` : 'Delete this skill?'}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        confirmDisabled={deleting}
+        cancelDisabled={deleting}
+        danger
+        onConfirm={() => { void handleDelete() }}
+        onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+      />
     </BottomSheet>
   )
 }