@swarmclawai/swarmclaw 0.6.8 → 0.7.0

package/src/components/plugins/plugin-list.tsx

@@ -3,25 +3,46 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
-import type { MarketplacePlugin } from '@/types'
+import { toast } from 'sonner'
+import type { MarketplacePlugin, PluginMeta } from '@/types'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 
 export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   const plugins = useAppStore((s) => s.plugins)
   const loadPlugins = useAppStore((s) => s.loadPlugins)
   const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
   const setEditingPluginFilename = useAppStore((s) => s.setEditingPluginFilename)
+  const agents = useAppStore((s) => s.agents)
+  const sessions = useAppStore((s) => s.sessions)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
+  const setActiveView = useAppStore((s) => s.setActiveView)
+
+  const navigateToAgentChat = useCallback((agentId: string) => {
+    // Find the most recent chat for this agent
+    const agentSession = Object.values(sessions)
+      .filter((s) => s.agentId === agentId)
+      .sort((a, b) => (b.lastActiveAt ?? 0) - (a.lastActiveAt ?? 0))[0]
+    if (agentSession) {
+      setCurrentSession(agentSession.id)
+      setActiveView('agents')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessions])
 
   const [tab, setTab] = useState<'installed' | 'marketplace'>('installed')
   const [marketplace, setMarketplace] = useState<MarketplacePlugin[]>([])
   const [mpLoading, setMpLoading] = useState(false)
   const [installing, setInstalling] = useState<string | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState<{ filename: string; name: string } | null>(null)
   const [search, setSearch] = useState('')
   const [activeTag, setActiveTag] = useState<string | null>(null)
   const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
 
   useEffect(() => {
-    loadPlugins()
-  }, [])
+    void loadPlugins()
+  }, [loadPlugins])
 
   const loadMarketplace = useCallback(async () => {
     setMpLoading(true)
@@ -33,10 +54,16 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   }, [])
 
   useEffect(() => {
-    if (!inSidebar && tab === 'marketplace') loadMarketplace()
+    if (inSidebar || tab !== 'marketplace') return
+    const timer = setTimeout(() => {
+      void loadMarketplace()
+    }, 0)
+    return () => clearTimeout(timer)
   }, [tab, inSidebar, loadMarketplace])
 
   const pluginList = Object.values(plugins)
+  const corePlugins = pluginList.filter((plugin) => plugin.source === 'local')
+  const extensionPlugins = pluginList.filter((plugin) => plugin.source !== 'local')
 
   const handleEdit = (filename: string) => {
     setEditingPluginFilename(filename)
@@ -45,22 +72,46 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
 
   const handleToggle = async (e: React.MouseEvent, filename: string, enabled: boolean) => {
     e.stopPropagation()
-    await api('POST', '/plugins', { filename, enabled: !enabled })
-    loadPlugins()
+    try {
+      await api('POST', '/plugins', { filename, enabled: !enabled })
+      toast.success(!enabled ? 'Plugin enabled' : 'Plugin disabled')
+      loadPlugins()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to toggle plugin')
+    }
   }
 
-  const handleDelete = async (e: React.MouseEvent, filename: string) => {
+  const handleDeleteClick = (e: React.MouseEvent, filename: string, name: string) => {
     e.stopPropagation()
-    await api('DELETE', `/plugins/${encodeURIComponent(filename)}`)
-    loadPlugins()
+    setConfirmDelete({ filename, name })
+  }
+
+  const handleDeleteConfirm = async () => {
+    if (!confirmDelete) return
+    setDeleting(true)
+    try {
+      await api('DELETE', `/plugins?filename=${encodeURIComponent(confirmDelete.filename)}`)
+      toast.success('Plugin deleted')
+      await loadPlugins()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Delete failed')
+    } finally {
+      setDeleting(false)
+      setConfirmDelete(null)
+    }
   }
 
   const installFromMarketplace = async (p: MarketplacePlugin) => {
     setInstalling(p.id)
+    const toastId = toast.loading(`Installing ${p.name}...`)
     try {
-      await api('POST', '/plugins/install', { url: p.url, filename: `${p.id}.js` })
+      const safeFilename = `${p.id.replace(/[^a-zA-Z0-9.-]/g, '_')}.js`
+      await api('POST', '/plugins/install', { url: p.url, filename: safeFilename })
       await loadPlugins()
-    } catch { /* ignore */ }
+      toast.success(`Installed ${p.name}`, { id: toastId })
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Install failed', { id: toastId })
+    }
     setInstalling(null)
   }
 
@@ -72,20 +123,127 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
       ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
       : 'bg-transparent border-transparent text-text-3 hover:text-text-2'}`
 
+  const pluginDescription = (plugin: PluginMeta): string => {
+    const raw = (plugin.description || '').trim()
+    if (raw) return raw
+    const sourceLabel = plugin.source === 'local' ? 'core plugin' : 'installed plugin'
+    return `No description provided. Click to view metadata and controls for this ${sourceLabel}.`
+  }
+
+  const pluginCapabilityBadges = (plugin: PluginMeta): string[] => {
+    const badges: string[] = []
+    if (plugin.toolCount && plugin.toolCount > 0) badges.push(`${plugin.toolCount} tool${plugin.toolCount === 1 ? '' : 's'}`)
+    if (plugin.hookCount && plugin.hookCount > 0) badges.push(`${plugin.hookCount} hook${plugin.hookCount === 1 ? '' : 's'}`)
+    if (plugin.hasUI) badges.push('UI')
+    if (plugin.providerCount && plugin.providerCount > 0) badges.push(`${plugin.providerCount} provider${plugin.providerCount === 1 ? '' : 's'}`)
+    if (plugin.connectorCount && plugin.connectorCount > 0) badges.push(`${plugin.connectorCount} connector${plugin.connectorCount === 1 ? '' : 's'}`)
+    return badges
+  }
+
+  const renderInstalledPlugin = (plugin: (typeof pluginList)[number], allowDelete: boolean) => (
+    <div
+      key={plugin.filename}
+      role="button"
+      tabIndex={0}
+      onClick={() => handleEdit(plugin.filename)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleEdit(plugin.filename)
+        }
+      }}
+      className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+    >
+      <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center gap-2 min-w-0">
+          {plugin.createdByAgentId && agents[plugin.createdByAgentId] && (
+            <button
+              type="button"
+              title={`Created by ${agents[plugin.createdByAgentId].name} — click to open chat`}
+              onClick={(e) => { e.stopPropagation(); navigateToAgentChat(plugin.createdByAgentId!) }}
+              className="shrink-0 rounded-full hover:ring-2 hover:ring-accent-bright/40 transition-all cursor-pointer bg-transparent border-none p-0"
+            >
+              <AgentAvatar
+                seed={agents[plugin.createdByAgentId].avatarSeed || null}
+                avatarUrl={agents[plugin.createdByAgentId].avatarUrl}
+                name={agents[plugin.createdByAgentId].name || 'Agent'}
+                size={20}
+              />
+            </button>
+          )}
+          <span className="font-display text-[14px] font-600 text-text truncate">{plugin.name}</span>
+        </div>
+        <div className="flex items-center gap-2 shrink-0 ml-2">
+          {!inSidebar ? (
+            <>
+              <div
+                onClick={(e) => handleToggle(e, plugin.filename, plugin.enabled)}
+                className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
+                  ${plugin.enabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+              >
+                <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
+                  ${plugin.enabled ? 'left-[18px]' : 'left-0.5'}`} />
+              </div>
+              {allowDelete && (
+                <button
+                  onClick={(e) => handleDeleteClick(e, plugin.filename, plugin.name)}
+                  className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                  title="Delete"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                    <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                  </svg>
+                </button>
+              )}
+            </>
+          ) : (
+            <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
+              {plugin.enabled ? 'Enabled' : 'Disabled'}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
+      <p className="text-[12px] text-text-3/70 leading-relaxed">{pluginDescription(plugin)}</p>
+      <div className="flex items-center gap-1.5 mt-2 flex-wrap">
+        <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full ${
+          plugin.source === 'local' ? 'text-indigo-300 bg-indigo-500/10' : 'text-emerald-300 bg-emerald-500/10'
+        }`}>
+          {plugin.source === 'local' ? 'Core' : 'Extension'}
+        </span>
+        {pluginCapabilityBadges(plugin).map((badge) => (
+          <span key={badge} className="text-[10px] font-600 px-1.5 py-0.5 rounded-full text-text-3/80 bg-white/[0.05]">
+            {badge}
+          </span>
+        ))}
+      </div>
+      {!inSidebar && (
+        <p className="text-[10px] text-text-3/50 mt-2">Click for full details and controls</p>
+      )}
+      {plugin.autoDisabled && (
+        <p className="mt-1 text-[11px] text-amber-400/90 line-clamp-2">
+          Auto-disabled after {plugin.failureCount ?? 0} failures
+          {plugin.lastFailureStage ? ` (${plugin.lastFailureStage})` : ''}.
+          {plugin.lastFailureError ? ` ${plugin.lastFailureError}` : ''}
+        </p>
+      )}
+    </div>
+  )
+
   // Marketplace tab content (full-width only)
   const renderMarketplace = () => {
     if (mpLoading) return <p className="text-[12px] text-text-3/70 py-8 text-center">Loading marketplace...</p>
     if (marketplace.length === 0) return <p className="text-[12px] text-text-3/70 py-8 text-center">No plugins available</p>
 
-    const allTags = Array.from(new Set(marketplace.flatMap((p) => p.tags))).sort()
+    const allTags = Array.from(new Set(marketplace.flatMap((p) => p.tags ?? []))).sort()
     const q = search.toLowerCase()
     const filtered = marketplace
       .filter((p) => {
-        if (q && !p.name.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q) && !p.tags.some((t) => t.toLowerCase().includes(q))) return false
-        if (activeTag && !p.tags.includes(activeTag)) return false
+        if (q && !p.name.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q) && !(p.tags ?? []).some((t) => t.toLowerCase().includes(q))) return false
+        if (activeTag && !(p.tags ?? []).includes(activeTag)) return false
         return true
       })
-      .sort((a, b) => sort === 'downloads' ? b.downloads - a.downloads : a.name.localeCompare(b.name))
+      .sort((a, b) => sort === 'downloads' ? (b.downloads ?? 0) - (a.downloads ?? 0) : a.name.localeCompare(b.name))
 
     return (
       <div className="space-y-3">
@@ -146,7 +304,7 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
                       <div className="flex items-center gap-2 mt-2">
                         <span className="text-[10px] text-text-3/70">by {p.author}</span>
                         <span className="text-[10px] text-text-3/50">&middot;</span>
-                        {p.tags.slice(0, 3).map((t) => (
+                        {(p.tags ?? []).slice(0, 3).map((t) => (
                           <button
                             key={t}
                             onClick={() => setActiveTag(activeTag === t ? null : t)}
@@ -209,52 +367,48 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
             </button>
           </div>
         ) : (
-          <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-            {pluginList.map((plugin) => (
-              <button
-                key={plugin.filename}
-                onClick={() => handleEdit(plugin.filename)}
-                className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
-              >
-                <div className="flex items-center justify-between mb-1">
-                  <span className="font-display text-[14px] font-600 text-text truncate">{plugin.name}</span>
-                  <div className="flex items-center gap-2 shrink-0 ml-2">
-                    {!inSidebar ? (
-                      <>
-                        <div
-                          onClick={(e) => handleToggle(e, plugin.filename, plugin.enabled)}
-                          className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
-                            ${plugin.enabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
-                        >
-                          <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
-                            ${plugin.enabled ? 'left-[18px]' : 'left-0.5'}`} />
-                        </div>
-                        <button
-                          onClick={(e) => handleDelete(e, plugin.filename)}
-                          className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
-                          title="Delete"
-                        >
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                          </svg>
-                        </button>
-                      </>
-                    ) : (
-                      <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
-                        {plugin.enabled ? 'Enabled' : 'Disabled'}
-                      </span>
-                    )}
+          inSidebar ? (
+            <div className="space-y-2">
+              {pluginList.map((plugin) => renderInstalledPlugin(plugin, plugin.source !== 'local'))}
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {corePlugins.length > 0 && (
+                <section>
+                  <div className="mb-3 px-1">
+                    <h3 className="text-[13px] font-700 text-text-2">Core Platform</h3>
+                    <p className="text-[12px] text-text-3/60 mt-0.5">Official SwarmClaw plugins shipped with the platform.</p>
                   </div>
-                </div>
-                <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
-                {plugin.description && (
-                  <p className="text-[12px] text-text-3/60 line-clamp-2">{plugin.description}</p>
-                )}
-              </button>
-            ))}
-          </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+                    {corePlugins.map((plugin) => renderInstalledPlugin(plugin, false))}
+                  </div>
+                </section>
+              )}
+
+              {extensionPlugins.length > 0 && (
+                <section>
+                  <div className="mb-3 px-1">
+                    <h3 className="text-[13px] font-700 text-text-2">Extensions</h3>
+                    <p className="text-[12px] text-text-3/60 mt-0.5">Marketplace and custom plugins installed by your team.</p>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+                    {extensionPlugins.map((plugin) => renderInstalledPlugin(plugin, true))}
+                  </div>
+                </section>
+              )}
+            </div>
+          )
         )
       )}
+      <ConfirmDialog
+        open={!!confirmDelete}
+        title="Delete Plugin"
+        message={confirmDelete ? `Delete "${confirmDelete.name}"? This cannot be undone.` : ''}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        danger
+        onConfirm={() => { void handleDeleteConfirm() }}
+        onCancel={() => { if (!deleting) setConfirmDelete(null) }}
+      />
     </div>
   )
 }

package/src/components/plugins/plugin-sheet.tsx

@@ -3,9 +3,28 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { api } from '@/lib/api-client'
+import { toast } from 'sonner'
 import type { PluginMeta, MarketplacePlugin } from '@/types'
 
+function pluginDescription(plugin: PluginMeta): string {
+  const raw = (plugin.description || '').trim()
+  if (raw) return raw
+  const sourceLabel = plugin.source === 'local' ? 'core plugin' : 'installed plugin'
+  return `No description provided. This ${sourceLabel} is available and can be configured from this panel.`
+}
+
+function pluginCapabilityBadges(plugin: PluginMeta): string[] {
+  const badges: string[] = []
+  if (plugin.toolCount && plugin.toolCount > 0) badges.push(`${plugin.toolCount} tool${plugin.toolCount === 1 ? '' : 's'}`)
+  if (plugin.hookCount && plugin.hookCount > 0) badges.push(`${plugin.hookCount} hook${plugin.hookCount === 1 ? '' : 's'}`)
+  if (plugin.hasUI) badges.push('UI extension')
+  if (plugin.providerCount && plugin.providerCount > 0) badges.push(`${plugin.providerCount} provider${plugin.providerCount === 1 ? '' : 's'}`)
+  if (plugin.connectorCount && plugin.connectorCount > 0) badges.push(`${plugin.connectorCount} connector${plugin.connectorCount === 1 ? '' : 's'}`)
+  return badges
+}
+
 export function PluginSheet() {
   const open = useAppStore((s) => s.pluginSheetOpen)
   const setOpen = useAppStore((s) => s.setPluginSheetOpen)
@@ -22,6 +41,7 @@ export function PluginSheet() {
   const [urlFilename, setUrlFilename] = useState('')
   const [urlStatus, setUrlStatus] = useState<{ ok: boolean; message: string } | null>(null)
   const [deleting, setDeleting] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
   const [search, setSearch] = useState('')
   const [activeTag, setActiveTag] = useState<string | null>(null)
   const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
@@ -38,8 +58,12 @@ export function PluginSheet() {
   }, [])
 
   useEffect(() => {
-    if (open && !editingFilename && tab === 'marketplace') loadMarketplace()
-  }, [open, editingFilename, tab])
+    if (!open || !!editingFilename || tab !== 'marketplace') return
+    const timer = setTimeout(() => {
+      void loadMarketplace()
+    }, 0)
+    return () => clearTimeout(timer)
+  }, [open, editingFilename, tab, loadMarketplace])
 
   const handleClose = () => {
     setOpen(false)
@@ -47,29 +71,43 @@ export function PluginSheet() {
     setUrlInput('')
     setUrlFilename('')
     setUrlStatus(null)
+    setConfirmDelete(false)
   }
 
   const togglePlugin = async (filename: string, enabled: boolean) => {
-    await api('POST', '/plugins', { filename, enabled })
-    loadPlugins()
+    try {
+      await api('POST', '/plugins', { filename, enabled })
+      toast.success(enabled ? 'Plugin enabled' : 'Plugin disabled')
+      loadPlugins()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to toggle plugin')
+    }
   }
 
   const deletePlugin = async (filename: string) => {
     setDeleting(true)
     try {
-      await api('DELETE', `/plugins/${encodeURIComponent(filename)}`)
+      await api('DELETE', `/plugins?filename=${encodeURIComponent(filename)}`)
+      toast.success('Plugin deleted')
       await loadPlugins()
       handleClose()
-    } catch { /* ignore */ }
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Delete failed')
+    }
     setDeleting(false)
   }
 
   const installFromMarketplace = async (p: MarketplacePlugin) => {
     setInstalling(p.id)
+    const toastId = toast.loading(`Installing ${p.name}...`)
     try {
-      await api('POST', '/plugins/install', { url: p.url, filename: `${p.id}.js` })
+      const safeFilename = `${p.id.replace(/[^a-zA-Z0-9.-]/g, '_')}.js`
+      await api('POST', '/plugins/install', { url: p.url, filename: safeFilename })
       await loadPlugins()
-    } catch { /* ignore */ }
+      toast.success(`Installed ${p.name}`, { id: toastId })
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Install failed', { id: toastId })
+    }
     setInstalling(null)
   }
 
@@ -81,10 +119,11 @@ export function PluginSheet() {
       await api('POST', '/plugins/install', { url: urlInput, filename: urlFilename })
       await loadPlugins()
       setUrlStatus({ ok: true, message: 'Installed successfully' })
+      toast.success('Plugin installed from URL')
       setUrlInput('')
       setUrlFilename('')
-    } catch (err: any) {
-      setUrlStatus({ ok: false, message: err.message || 'Install failed' })
+    } catch (err: unknown) {
+      setUrlStatus({ ok: false, message: err instanceof Error ? err.message : 'Install failed' })
     }
     setInstalling(null)
   }
@@ -101,18 +140,61 @@ export function PluginSheet() {
     <BottomSheet open={open} onClose={handleClose}>
       {editing ? (
         <div className="space-y-5">
-          <div className="py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
-            <div className="flex items-center gap-2 mb-1">
-              <span className="text-[14px] font-600 text-text">{editing.name}</span>
-              {editing.openclaw && <span className="text-[9px] font-600 text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded-full">OpenClaw</span>}
+          <div className="py-4 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+            <div className="flex items-start justify-between gap-3 mb-2">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-[15px] font-700 text-text truncate">{editing.name}</span>
+                  <span className="text-[10px] font-mono text-text-3/70">v{editing.version || '1.0.0'}</span>
+                  {editing.openclaw && <span className="text-[9px] font-600 text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded-full">OpenClaw</span>}
+                </div>
+                <p className="text-[12px] text-text-3/80 leading-relaxed">{pluginDescription(editing)}</p>
+              </div>
+              <span className={`shrink-0 text-[10px] font-600 px-2 py-1 rounded-full ${
+                editing.enabled ? 'text-emerald-300 bg-emerald-500/10' : 'text-text-3/80 bg-white/[0.05]'
+              }`}>
+                {editing.enabled ? 'Enabled' : 'Disabled'}
+              </span>
             </div>
-            <div className="text-[11px] font-mono text-text-3">{editing.filename}</div>
-            {editing.description && <div className="text-[11px] text-text-3/60 mt-1">{editing.description}</div>}
-            {editing.author && <div className="text-[10px] text-text-3/70 mt-1">by {editing.author}</div>}
+
+            <div className="grid grid-cols-2 gap-2 mt-3">
+              <div className="rounded-[10px] bg-bg/50 border border-white/[0.05] px-2.5 py-2">
+                <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Source</div>
+                <div className="text-[11px] text-text-2">{editing.source === 'local' ? 'Core Platform' : 'Extension'}</div>
+              </div>
+              <div className="rounded-[10px] bg-bg/50 border border-white/[0.05] px-2.5 py-2">
+                <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Author</div>
+                <div className="text-[11px] text-text-2">{editing.author || 'Unknown'}</div>
+              </div>
+            </div>
+
+            <div className="text-[11px] font-mono text-text-3/60 mt-3 break-all">{editing.filename}</div>
+            <div className="flex items-center gap-1.5 mt-2 flex-wrap">
+              {pluginCapabilityBadges(editing).length > 0 ? (
+                pluginCapabilityBadges(editing).map((badge) => (
+                  <span key={badge} className="text-[10px] font-600 px-1.5 py-0.5 rounded-full text-text-3/80 bg-white/[0.05]">
+                    {badge}
+                  </span>
+                ))
+              ) : (
+                <span className="text-[10px] text-text-3/50">No declared tools/hooks metadata</span>
+              )}
+            </div>
+
+            {editing.autoDisabled && (
+              <div className="mt-3 p-2.5 rounded-[10px] bg-amber-500/[0.06] border border-amber-500/20 text-[11px] text-amber-300/90">
+                Auto-disabled after {editing.failureCount ?? 0} failures
+                {editing.lastFailureStage ? ` at ${editing.lastFailureStage}` : ''}.
+                {editing.lastFailureError ? ` ${editing.lastFailureError}` : ''}
+              </div>
+            )}
           </div>
 
           <div className="flex items-center justify-between py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
-            <span className="text-[13px] font-600 text-text">Enabled</span>
+            <div>
+              <span className="text-[13px] font-600 text-text block">Enabled</span>
+              <span className="text-[11px] text-text-3/60">Disable to keep the plugin installed but inactive.</span>
+            </div>
             <div
               onClick={() => togglePlugin(editing.filename, !editing.enabled)}
               className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
@@ -124,7 +206,7 @@ export function PluginSheet() {
           </div>
 
           <button
-            onClick={() => deletePlugin(editing.filename)}
+            onClick={() => setConfirmDelete(true)}
             disabled={deleting}
             className="w-full py-2.5 rounded-[10px] text-[13px] font-600 bg-red-500/10 text-red-400 border border-red-500/20
               hover:bg-red-500/20 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-default"
@@ -150,15 +232,15 @@ export function PluginSheet() {
               : marketplace.length === 0
                 ? <p className="text-[12px] text-text-3/70">No plugins available</p>
                 : (() => {
-                    const allTags = Array.from(new Set(marketplace.flatMap((p) => p.tags))).sort()
+                    const allTags = Array.from(new Set(marketplace.flatMap((p) => (p.tags ?? [])))).sort()
                     const q = search.toLowerCase()
                     const filtered = marketplace
                       .filter((p) => {
-                        if (q && !p.name.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q) && !p.tags.some((t) => t.toLowerCase().includes(q))) return false
-                        if (activeTag && !p.tags.includes(activeTag)) return false
+                        if (q && !p.name.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q) && !(p.tags ?? []).some((t) => t.toLowerCase().includes(q))) return false
+                        if (activeTag && !(p.tags ?? []).includes(activeTag)) return false
                         return true
                       })
-                      .sort((a, b) => sort === 'downloads' ? b.downloads - a.downloads : a.name.localeCompare(b.name))
+                      .sort((a, b) => sort === 'downloads' ? (b.downloads ?? 0) - (a.downloads ?? 0) : a.name.localeCompare(b.name))
 
                     return (
                       <div className="space-y-3">
@@ -224,7 +306,7 @@ export function PluginSheet() {
                                       <div className="flex items-center gap-2 mt-2">
                                         <span className="text-[10px] text-text-3/70">by {p.author}</span>
                                         <span className="text-[10px] text-text-3/50">&middot;</span>
-                                        {p.tags.slice(0, 3).map((t) => (
+                                        {(p.tags ?? []).slice(0, 3).map((t) => (
                                           <button
                                             key={t}
                                             onClick={() => setActiveTag(activeTag === t ? null : t)}
@@ -306,6 +388,19 @@ export function PluginSheet() {
           )}
         </div>
       )}
+      <ConfirmDialog
+        open={!!editing && confirmDelete}
+        title="Delete Plugin"
+        message={editing ? `Delete "${editing.name}"? This cannot be undone.` : ''}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        danger
+        onConfirm={() => {
+          if (!editing) return
+          setConfirmDelete(false)
+          void deletePlugin(editing.filename)
+        }}
+        onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+      />
     </BottomSheet>
   )
 }