@swarmclawai/swarmclaw 0.7.8 → 0.8.0

package/src/components/shared/command-palette.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { toast } from 'sonner'
 
 interface CommandItem {
   id: string
@@ -129,10 +130,16 @@ export function CommandPalette() {
       result.push({
         id: `agent:${agent.id}`,
         label: agent.name,
-        description: `Open ${agent.name}'s chat`,
+        description: agent.disabled === true
+          ? `${agent.name} is disabled`
+          : `Open ${agent.name}'s chat`,
         keywords: [agent.provider, agent.model, agent.description || ''].filter(Boolean),
         category: 'agent',
         onSelect: async () => {
+          if (agent.disabled === true && !agent.threadSessionId) {
+            toast.error(`${agent.name} is disabled. Re-enable it to start a new chat.`)
+            return
+          }
           await setCurrentAgent(agent.id)
           setActiveView('agents')
           setOpen(false)

package/src/components/shared/confirm-dialog.tsx

@@ -14,14 +14,26 @@ interface Props {
   title: string
   message: string
   confirmLabel?: string
+  confirmDisabled?: boolean
+  cancelDisabled?: boolean
   danger?: boolean
   onConfirm: () => void
   onCancel: () => void
 }
 
-export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm', danger, onConfirm, onCancel }: Props) {
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  confirmDisabled = false,
+  cancelDisabled = false,
+  danger,
+  onConfirm,
+  onCancel,
+}: Props) {
   return (
-    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onCancel() }}>
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen && !cancelDisabled) onCancel() }}>
       <DialogContent
         className="sm:max-w-[400px] rounded-[20px] border-white/[0.06] bg-raised p-0 shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
       >
@@ -38,7 +50,8 @@ export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm',
             <button
               type="button"
               onClick={onCancel}
-              className="flex-1 rounded-[12px] border border-white/[0.06] bg-transparent px-4 py-2.5 text-[13px] font-600 text-text-2 transition-all duration-200 hover:bg-surface"
+              disabled={cancelDisabled}
+              className="flex-1 rounded-[12px] border border-white/[0.06] bg-transparent px-4 py-2.5 text-[13px] font-600 text-text-2 transition-all duration-200 hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
               style={{ fontFamily: 'inherit' }}
             >
               Cancel
@@ -46,10 +59,12 @@ export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm',
             <button
               type="button"
               onClick={onConfirm}
+              disabled={confirmDisabled}
               className={`flex-1 rounded-[12px] border-none px-4 py-2.5 text-[13px] font-600 text-white transition-all duration-200 active:scale-[0.98]
                 ${danger
                   ? 'bg-danger shadow-[0_4px_20px_rgba(244,63,94,0.2)]'
-                  : 'bg-accent-bright shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
+                  : 'bg-accent-bright shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}
+                disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100`}
               style={{ fontFamily: 'inherit' }}
             >
               {confirmLabel}

package/src/components/shared/connector-platform-icon.test.ts

@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict'
+import { describe, it } from 'node:test'
+
+import {
+  getConnectorPlatformLabel,
+  resolveConnectorPlatformMeta,
+} from './connector-platform-icon'
+
+describe('connector platform metadata', () => {
+  it('resolves legacy connector platforms used by stored runtime data', () => {
+    assert.deepEqual(resolveConnectorPlatformMeta('webchat'), {
+      label: 'Web Chat',
+      color: '#0EA5E9',
+    })
+    assert.deepEqual(resolveConnectorPlatformMeta('mockmail'), {
+      label: 'MockMail',
+      color: '#7C3AED',
+    })
+  })
+
+  it('falls back safely for unknown connector platform strings', () => {
+    assert.deepEqual(resolveConnectorPlatformMeta('custom-bridge'), {
+      label: 'Custom Bridge',
+      color: '#64748B',
+    })
+    assert.equal(getConnectorPlatformLabel('custom-bridge'), 'Custom Bridge')
+  })
+})

package/src/components/shared/connector-platform-icon.tsx

@@ -24,10 +24,35 @@ export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string;
   googlechat: { label: 'Google Chat', color: '#00AC47' },
   matrix: { label: 'Matrix', color: '#0DBD8B' },
   email: { label: 'Email', color: '#EA4335' },
+  webchat: { label: 'Web Chat', color: '#0EA5E9' },
+  mockmail: { label: 'MockMail', color: '#7C3AED' },
 }
 
-export function getConnectorPlatformLabel(platform: ConnectorPlatform): string {
-  return CONNECTOR_PLATFORM_META[platform]?.label || platform
+const FALLBACK_CONNECTOR_PLATFORM_META = { label: 'Connector', color: '#64748B' } as const
+
+function formatUnknownConnectorPlatformLabel(platform: string): string {
+  const trimmed = platform.trim()
+  if (!trimmed) return FALLBACK_CONNECTOR_PLATFORM_META.label
+  return trimmed
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join(' ')
+}
+
+export function resolveConnectorPlatformMeta(platform: string): { label: string; color: string } {
+  const known = CONNECTOR_PLATFORM_META[platform as ConnectorPlatform]
+  if (known) return known
+  return {
+    label: formatUnknownConnectorPlatformLabel(platform),
+    color: FALLBACK_CONNECTOR_PLATFORM_META.color,
+  }
+}
+
+export function getConnectorPlatformLabel(platform: string): string {
+  return resolveConnectorPlatformMeta(platform).label
 }
 
 export function getConnectorIdFromSessionName(sessionName?: string | null): string | null {
@@ -46,7 +71,7 @@ export function getSessionConnector(
 }
 
 interface ConnectorPlatformIconProps {
-  platform: ConnectorPlatform
+  platform: string
   size?: number
   className?: string
 }
@@ -131,12 +156,20 @@ export function ConnectorPlatformIcon({
         </svg>
       )
     default:
-      return null
+      return (
+        <span
+          aria-hidden
+          className={cn('inline-flex items-center justify-center rounded-full font-700 uppercase', className)}
+          style={{ width: size, height: size, fontSize: Math.max(8, Math.floor(size * 0.5)), lineHeight: 1 }}
+        >
+          {getConnectorPlatformLabel(platform).charAt(0)}
+        </span>
+      )
   }
 }
 
 interface ConnectorPlatformBadgeProps {
-  platform: ConnectorPlatform
+  platform: string
   size?: number
   iconSize?: number
   className?: string
@@ -152,7 +185,7 @@ export function ConnectorPlatformBadge({
   roundedClassName = 'rounded-[10px]',
   title,
 }: ConnectorPlatformBadgeProps) {
-  const meta = CONNECTOR_PLATFORM_META[platform]
+  const meta = resolveConnectorPlatformMeta(platform)
   const glyphSize = iconSize ?? Math.max(12, Math.floor(size * 0.52))
 
   return (

package/src/components/shared/settings/plugin-manager.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useCallback, useMemo } from 'react'
 import { api } from '@/lib/api-client'
+import { getPluginSourceLabel } from '@/lib/plugin-sources'
 import type { PluginMeta, MarketplacePlugin } from '@/types'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
@@ -93,9 +94,12 @@ export function PluginManager() {
 
       const safeFilename = `${p.id.replace(/[^a-zA-Z0-9.-]/g, '_')}.js`
 
-      await api('POST', '/plugins/install', { 
-        url: p.url, 
-        filename: safeFilename
+      await api('POST', '/plugins/install', {
+        url: p.url,
+        filename: safeFilename,
+        installMethod: 'marketplace',
+        sourceLabel: p.source,
+        installSource: p.catalogSource || p.source,
       })
 
       await loadPlugins()
@@ -154,6 +158,18 @@ export function PluginManager() {
           )}
         </div>
         <div className="text-[11px] font-mono text-text-3/40 truncate">{p.filename}</div>
+        <div className="flex items-center gap-1.5 mt-1.5 flex-wrap">
+          {p.sourceLabel && (
+            <span className="text-[9px] font-700 px-1.5 py-0.5 rounded uppercase tracking-wider bg-sky-500/10 text-sky-300">
+              {getPluginSourceLabel(p.sourceLabel)}
+            </span>
+          )}
+          {p.installSource && p.installSource !== p.sourceLabel && (
+            <span className="text-[9px] font-700 px-1.5 py-0.5 rounded uppercase tracking-wider bg-white/[0.04] text-text-3/65">
+              via {getPluginSourceLabel(p.installSource)}
+            </span>
+          )}
+        </div>
         {p.description && <div className="text-[12px] text-text-3/70 mt-1 line-clamp-1">{p.description}</div>}
         {p.hasDependencyManifest && (
           <div className="mt-1.5 flex items-center gap-2 text-[10px] font-700 uppercase tracking-[0.08em]">
@@ -320,9 +336,16 @@ export function PluginManager() {
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-3 mb-1.5">
                         <span className="text-[16px] font-700 text-text tracking-tight">{p.name}</span>
-                        <span className={`text-[9px] font-800 uppercase px-2 py-0.5 rounded-[6px] border ${p.source === 'clawhub' ? 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20' : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'}`}>
-                          {p.source || 'swarmclaw'}
-                        </span>
+                        {p.source && (
+                          <span className="text-[9px] font-800 uppercase px-2 py-0.5 rounded-[6px] border bg-sky-500/10 text-sky-300 border-sky-500/20">
+                            {getPluginSourceLabel(p.source)}
+                          </span>
+                        )}
+                        {p.catalogSource && p.catalogSource !== p.source && (
+                          <span className="text-[9px] font-800 uppercase px-2 py-0.5 rounded-[6px] border bg-white/[0.04] text-text-3/70 border-white/[0.08]">
+                            via {getPluginSourceLabel(p.catalogSource)}
+                          </span>
+                        )}
                       </div>
                       <p className="text-[13px] text-text-3/80 leading-relaxed mb-4 line-clamp-2">{p.description}</p>
                       

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.' },
 ]
 
@@ -93,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/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>
   )
 }