@swarmclawai/swarmclaw 0.7.8 → 0.8.0

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

@@ -3,13 +3,14 @@
 import { useEffect, useState, useCallback, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
+import { getPluginSourceLabel } from '@/lib/plugin-sources'
 import { toast } from 'sonner'
 import type { Agent, MarketplacePlugin, PluginMeta } from '@/types'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 
 type InstalledTab = 'core' | 'extensions'
-type TopTab = InstalledTab | 'swarmforge'
+type TopTab = InstalledTab | 'marketplace'
 
 export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   const plugins = useAppStore((s) => s.plugins)
@@ -56,7 +57,7 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   }, [])
 
   useEffect(() => {
-    if (inSidebar || tab !== 'swarmforge') return
+    if (inSidebar || tab !== 'marketplace') return
     const timer = setTimeout(() => { void loadMarketplace() }, 0)
     return () => clearTimeout(timer)
   }, [tab, inSidebar, loadMarketplace])
@@ -120,7 +121,13 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
     const toastId = toast.loading(`Installing ${p.name}...`)
     try {
       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()
       toast.success(`Installed ${p.name}`, { id: toastId })
     } catch (err: unknown) {
@@ -181,8 +188,8 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
         <TabButton active={tab === 'extensions'} onClick={() => setTab('extensions')} count={extensionPlugins.length}>
           Extensions
         </TabButton>
-        <TabButton active={tab === 'swarmforge'} onClick={() => setTab('swarmforge')}>
-          SwarmForge
+        <TabButton active={tab === 'marketplace'} onClick={() => setTab('marketplace')}>
+          Marketplace
         </TabButton>
       </div>
 
@@ -214,17 +221,17 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
           emptyMessage={search ? 'No extensions match your search' : 'No extensions installed'}
           emptyAction={!search ? (
             <button
-              onClick={() => setTab('swarmforge')}
+              onClick={() => setTab('marketplace')}
               className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[12px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
               style={{ fontFamily: 'inherit' }}
             >
-              Browse SwarmForge
+              Browse Marketplace
             </button>
           ) : undefined}
         />
       )}
 
-      {tab === 'swarmforge' && (
+      {tab === 'marketplace' && (
         <MarketplaceTab
           marketplace={marketplace}
           loading={mpLoading}
@@ -447,6 +454,12 @@ function PluginCard({ plugin, allowDelete, agents, onEdit, onToggle, onDelete, o
             {badge}
           </span>
         ))}
+        {plugin.sourceLabel && (
+          <SourceChip label={getPluginSourceLabel(plugin.sourceLabel)} tone="publisher" />
+        )}
+        {plugin.installSource && plugin.installSource !== plugin.sourceLabel && (
+          <SourceChip label={`via ${getPluginSourceLabel(plugin.installSource)}`} tone="catalog" />
+        )}
         {plugin.hasDependencyManifest && (
           <span className={`text-[10px] font-700 px-1.5 py-0.5 rounded-full ${
             plugin.dependencyInstallStatus === 'installed'
@@ -550,7 +563,14 @@ function MarketplaceTab({ marketplace, loading, installing, installedFilenames,
   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
+      const sourceTerms = [getPluginSourceLabel(p.source).toLowerCase(), getPluginSourceLabel(p.catalogSource).toLowerCase()]
+      if (
+        q
+        && !p.name.toLowerCase().includes(q)
+        && !p.description.toLowerCase().includes(q)
+        && !(p.tags ?? []).some((t) => t.toLowerCase().includes(q))
+        && !sourceTerms.some((term) => term.includes(q))
+      ) return false
       if (activeTag && !(p.tags ?? []).includes(activeTag)) return false
       return true
     })
@@ -606,6 +626,12 @@ function MarketplaceTab({ marketplace, loading, installing, installedFilenames,
                       <span className="text-[10px] font-mono text-text-3/70">v{p.version}</span>
                       {p.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>
+                    <div className="flex items-center gap-1.5 mt-2 flex-wrap">
+                      {p.source && <SourceChip label={getPluginSourceLabel(p.source)} tone="publisher" />}
+                      {p.catalogSource && p.catalogSource !== p.source && (
+                        <SourceChip label={`via ${getPluginSourceLabel(p.catalogSource)}`} tone="catalog" />
+                      )}
+                    </div>
                     <div className="text-[11px] text-text-3/60 mt-1 line-clamp-2">{p.description}</div>
                     <div className="flex items-center gap-2 mt-2">
                       <span className="text-[10px] text-text-3/70">by {p.author}</span>
@@ -645,3 +671,13 @@ function MarketplaceTab({ marketplace, loading, installing, installedFilenames,
     </div>
   )
 }
+
+function SourceChip({ label, tone }: { label: string; tone: 'publisher' | 'catalog' }) {
+  return (
+    <span className={tone === 'publisher'
+      ? 'text-[10px] font-700 px-1.5 py-0.5 rounded-full bg-sky-500/10 text-sky-300'
+      : 'text-[10px] font-700 px-1.5 py-0.5 rounded-full bg-white/[0.05] text-text-3/75'}>
+      {label}
+    </span>
+  )
+}

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

@@ -5,6 +5,7 @@ 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 { getPluginSourceLabel } from '@/lib/plugin-sources'
 import { toast } from 'sonner'
 import type { PluginMeta, PluginSettingsField, MarketplacePlugin } from '@/types'
 
@@ -176,7 +177,13 @@ export function PluginSheet() {
     const toastId = toast.loading(`Installing ${p.name}...`)
     try {
       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()
       toast.success(`Installed ${p.name}`, { id: toastId })
     } catch (err: unknown) {
@@ -231,19 +238,31 @@ export function PluginSheet() {
               </span>
             </div>
 
-            <div className="grid grid-cols-2 gap-2 mt-3">
+            <div className="grid grid-cols-1 sm:grid-cols-3 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-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Type</div>
                 <div className="text-[11px] text-text-2">
-                  {editing.isBuiltin ? 'Core Platform' : editing.source === 'marketplace' ? 'Marketplace Extension' : 'Local Extension'}
+                  {editing.isBuiltin
+                    ? 'Core Platform'
+                    : editing.source === 'marketplace'
+                      ? 'Marketplace Extension'
+                      : editing.source === 'manual'
+                        ? 'Manual URL Extension'
+                        : 'Local 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 className="text-[10px] uppercase tracking-[0.08em] text-text-3/60 mb-0.5">Publisher</div>
+                <div className="text-[11px] text-text-2">{getPluginSourceLabel(editing.sourceLabel)}</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">Installed Via</div>
+                <div className="text-[11px] text-text-2">{getPluginSourceLabel(editing.installSource || editing.sourceLabel)}</div>
               </div>
             </div>
 
+            <div className="text-[11px] text-text-3/60 mt-2">{editing.author || 'Unknown author'}</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 ? (
@@ -255,6 +274,16 @@ export function PluginSheet() {
               ) : (
                 <span className="text-[10px] text-text-3/50">No declared tools/hooks metadata</span>
               )}
+              {editing.sourceLabel && (
+                <span className="text-[10px] font-700 px-1.5 py-0.5 rounded-full bg-sky-500/10 text-sky-300">
+                  {getPluginSourceLabel(editing.sourceLabel)}
+                </span>
+              )}
+              {editing.installSource && editing.installSource !== editing.sourceLabel && (
+                <span className="text-[10px] font-700 px-1.5 py-0.5 rounded-full bg-white/[0.05] text-text-3/75">
+                  via {getPluginSourceLabel(editing.installSource)}
+                </span>
+              )}
             </div>
 
             {editing.autoDisabled && (
@@ -392,7 +421,14 @@ export function PluginSheet() {
                     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
+                        const sourceTerms = [getPluginSourceLabel(p.source).toLowerCase(), getPluginSourceLabel(p.catalogSource).toLowerCase()]
+                        if (
+                          q
+                          && !p.name.toLowerCase().includes(q)
+                          && !p.description.toLowerCase().includes(q)
+                          && !(p.tags ?? []).some((t) => t.toLowerCase().includes(q))
+                          && !sourceTerms.some((term) => term.includes(q))
+                        ) return false
                         if (activeTag && !(p.tags ?? []).includes(activeTag)) return false
                         return true
                       })
@@ -458,6 +494,18 @@ export function PluginSheet() {
                                         <span className="text-[10px] font-mono text-text-3/70">v{p.version}</span>
                                         {p.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>
+                                      <div className="flex items-center gap-1.5 mt-2 flex-wrap">
+                                        {p.source && (
+                                          <span className="text-[10px] font-700 px-1.5 py-0.5 rounded-full bg-sky-500/10 text-sky-300">
+                                            {getPluginSourceLabel(p.source)}
+                                          </span>
+                                        )}
+                                        {p.catalogSource && p.catalogSource !== p.source && (
+                                          <span className="text-[10px] font-700 px-1.5 py-0.5 rounded-full bg-white/[0.05] text-text-3/75">
+                                            via {getPluginSourceLabel(p.catalogSource)}
+                                          </span>
+                                        )}
+                                      </div>
                                       <div className="text-[11px] text-text-3/60 mt-1">{p.description}</div>
                                       <div className="flex items-center gap-2 mt-2">
                                         <span className="text-[10px] text-text-3/70">by {p.author}</span>

package/src/components/providers/provider-list.tsx

@@ -125,6 +125,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
         ok: boolean
         verify?: {
           ok: boolean
+          message?: string
           error?: string
           hint?: string
           models?: string[]
@@ -150,7 +151,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
           lastVerifiedOk: verify.verify ? verifiedOk : (existing?.deployment?.lastVerifiedOk ?? null),
           lastVerifiedMessage: verify.verify
             ? (verifiedOk
-              ? `Verified during save with ${verify.verify.models?.length || 0} model${(verify.verify.models?.length || 0) === 1 ? '' : 's'}.`
+              ? (verify.verify.message || `Verified during save with ${verify.verify.models?.length || 0} model${(verify.verify.models?.length || 0) === 1 ? '' : 's'}.`)
               : (verify.verify.error || verify.verify.hint || 'Verification failed.'))
             : (existing?.deployment?.lastVerifiedMessage || null),
         },

package/src/components/providers/provider-sheet.tsx

@@ -6,6 +6,7 @@ import { createProviderConfig, updateProviderConfig, deleteProviderConfig } from
 import { api } from '@/lib/api-client'
 import { fetchProviderModelDiscovery } from '@/lib/provider-model-discovery-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { toast } from 'sonner'
 
 export function ProviderSheet() {
@@ -40,6 +41,8 @@ export function ProviderSheet() {
   const [liveLoading, setLiveLoading] = useState(false)
   const [liveMessage, setLiveMessage] = useState('')
   const [liveCached, setLiveCached] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleting, setDeleting] = useState(false)
 
   // Find editing provider in custom configs OR built-in list
   const editingCustom = editingId ? providerConfigs.find((c) => c.id === editingId) : null
@@ -122,6 +125,8 @@ export function ProviderSheet() {
   }
 
   const onClose = () => {
+    setConfirmDelete(false)
+    setDeleting(false)
     setOpen(false)
     setEditingId(null)
   }
@@ -162,14 +167,17 @@ export function ProviderSheet() {
 
   const handleDelete = async () => {
     if (editingCustom) {
-      if (!confirm(`Delete custom provider "${editingCustom.name}"?`)) return
+      setDeleting(true)
       try {
         await deleteProviderConfig(editingCustom.id)
         toast.success('Provider deleted')
         await loadProviderConfigs()
+        setConfirmDelete(false)
         onClose()
       } catch (err: unknown) {
         toast.error(err instanceof Error ? err.message : 'Failed to delete provider')
+      } finally {
+        setDeleting(false)
       }
     }
   }
@@ -493,7 +501,7 @@ export function ProviderSheet() {
 
       <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
         {editingCustom && (
-          <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>
         )}
@@ -520,6 +528,17 @@ export function ProviderSheet() {
           </button>
         )}
       </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Provider?"
+        message={editingCustom ? `Delete custom provider "${editingCustom.name}"?` : 'Delete this provider?'}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        confirmDisabled={deleting}
+        cancelDisabled={deleting}
+        danger
+        onConfirm={() => { void handleDelete() }}
+        onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+      />
     </BottomSheet>
   )
 }

package/src/components/schedules/schedule-card.tsx

@@ -4,6 +4,8 @@ import type { Schedule } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { cronToHuman } from '@/lib/cron-human'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { isUserCreatedSchedule } from '@/lib/schedule-origin'
 
 const STATUS_COLORS: Record<string, string> = {
   active: 'text-emerald-400 bg-emerald-400/[0.08]',
@@ -55,6 +57,7 @@ export function ScheduleCard({ schedule, inSidebar, index = 0 }: Props) {
   }
 
   const agent = agents[schedule.agentId]
+  const creatorAgent = schedule.createdByAgentId ? agents[schedule.createdByAgentId] : null
   const statusClass = STATUS_COLORS[schedule.status] || STATUS_COLORS.paused
   const canToggle = schedule.status === 'active' || schedule.status === 'paused'
 
@@ -101,7 +104,7 @@ export function ScheduleCard({ schedule, inSidebar, index = 0 }: Props) {
         </div>
       </div>
       <div className="text-[12px] text-text-3/70 mt-1.5 truncate">
-        {agent?.name || 'Unknown agent'} &middot; {schedule.scheduleType}
+        Runs on {agent?.name || 'Unknown agent'} &middot; {schedule.scheduleType}
         {!inSidebar && schedule.scheduleType === 'cron' && schedule.cron && (
           <span className="text-text-3/50 ml-1" title={schedule.cron}>({cronToHuman(schedule.cron)})</span>
         )}
@@ -113,6 +116,27 @@ export function ScheduleCard({ schedule, inSidebar, index = 0 }: Props) {
           </span>
         )}
       </div>
+      <div className="flex flex-wrap items-center gap-1.5 mt-2">
+        {creatorAgent ? (
+          <span className="inline-flex max-w-full items-center gap-1.5 rounded-[7px] bg-white/[0.05] px-2 py-1 text-[10px] font-600 text-text-2">
+            <AgentAvatar
+              seed={creatorAgent.avatarSeed}
+              avatarUrl={creatorAgent.avatarUrl}
+              name={creatorAgent.name}
+              size={14}
+            />
+            <span className="truncate">Created by {creatorAgent.name}</span>
+          </span>
+        ) : (
+          <span className="inline-flex max-w-full items-center gap-1.5 rounded-[7px] bg-white/[0.04] px-2 py-1 text-[10px] font-600 text-text-3">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <circle cx="12" cy="8" r="4" />
+              <path d="M4 20c1.5-3.5 4.6-5 8-5s6.5 1.5 8 5" />
+            </svg>
+            <span className="truncate">{isUserCreatedSchedule(schedule) ? 'Created manually' : 'Creator unknown'}</span>
+          </span>
+        )}
+      </div>
       <div className="text-[11px] text-text-3/60 mt-1">
         Next: {formatNext(schedule.nextRunAt)}
       </div>

package/src/components/schedules/schedule-sheet.tsx

@@ -5,12 +5,15 @@ import { useAppStore } from '@/stores/use-app-store'
 import { createSchedule, updateSchedule, deleteSchedule } from '@/lib/schedules'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { inputClass } from '@/components/shared/form-styles'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { ScheduleType, ScheduleStatus } from '@/types'
 import cronstrue from 'cronstrue'
 import { SectionLabel } from '@/components/shared/section-label'
 import { SCHEDULE_TEMPLATES, type ScheduleTemplate } from '@/lib/schedule-templates'
 import { HintTip } from '@/components/shared/hint-tip'
+import { isUserCreatedSchedule } from '@/lib/schedule-origin'
 import { toast } from 'sonner'
 import {
   Newspaper, BarChart3, HeartPulse, PenLine, Trash2,
@@ -102,6 +105,8 @@ export function ScheduleSheet() {
   const [intervalMs, setIntervalMs] = useState(3600000)
   const [status, setStatus] = useState<ScheduleStatus>('active')
   const [customCron, setCustomCron] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleting, setDeleting] = useState(false)
 
   const editing = editingId ? schedules[editingId] : null
   const isCreating = !editing
@@ -163,6 +168,8 @@ export function ScheduleSheet() {
   }, [cron])
 
   const onClose = () => {
+    setConfirmDelete(false)
+    setDeleting(false)
     setOpen(false)
     setEditingId(null)
   }
@@ -195,14 +202,17 @@ export function ScheduleSheet() {
 
   const handleDelete = async () => {
     if (!editing) return
-    if (!confirm(`Delete schedule "${editing.name}"?`)) return
+    setDeleting(true)
     try {
       await deleteSchedule(editing.id)
       toast.success('Schedule deleted')
       await loadSchedules()
+      setConfirmDelete(false)
       onClose()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete schedule')
+    } finally {
+      setDeleting(false)
     }
   }
 
@@ -211,6 +221,7 @@ export function ScheduleSheet() {
   const step1Valid = scheduleType === 'cron' ? cron.trim().length > 0 : intervalMs > 0
 
   const selectedAgent = agentId ? agents[agentId] : null
+  const creatorAgent = editing?.createdByAgentId ? agents[editing.createdByAgentId] : null
 
   return (
     <BottomSheet open={open} onClose={onClose} wide>
@@ -466,6 +477,26 @@ export function ScheduleSheet() {
               <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Agent</span>
               <div className="text-[14px] text-text font-600 mt-0.5">{selectedAgent?.name || agentId}</div>
             </div>
+            {editing && (
+              <div>
+                <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Created By</span>
+                {creatorAgent ? (
+                  <div className="mt-1 inline-flex items-center gap-2 rounded-[10px] bg-white/[0.04] px-3 py-2 text-[13px] text-text-2">
+                    <AgentAvatar
+                      seed={creatorAgent.avatarSeed}
+                      avatarUrl={creatorAgent.avatarUrl}
+                      name={creatorAgent.name}
+                      size={18}
+                    />
+                    <span>{creatorAgent.name}</span>
+                  </div>
+                ) : (
+                  <div className="text-[13px] text-text-2 mt-0.5">
+                    {isUserCreatedSchedule(editing) ? 'Manual / user-created' : 'Unknown'}
+                  </div>
+                )}
+              </div>
+            )}
             <div>
               <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Task</span>
               <div className="text-[13px] text-text-2 mt-0.5 whitespace-pre-wrap">{taskPrompt}</div>
@@ -497,7 +528,7 @@ export function ScheduleSheet() {
       {/* Footer */}
       <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
         {editing && step === 0 && (
-          <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>
         )}
@@ -547,6 +578,17 @@ export function ScheduleSheet() {
           </button>
         )}
       </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Schedule?"
+        message={editing ? `Delete "${editing.name}"? This will remove the schedule from the app.` : 'Delete this schedule?'}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        confirmDisabled={deleting}
+        cancelDisabled={deleting}
+        danger
+        onConfirm={() => { void handleDelete() }}
+        onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+      />
     </BottomSheet>
   )
 }

package/src/components/secrets/secret-sheet.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } 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 { toast } from 'sonner'
@@ -25,6 +26,8 @@ export function SecretSheet() {
   const [scope, setScope] = useState<'global' | 'agent'>('global')
   const [agentIds, setAgentIds] = useState<string[]>([])
   const [saving, setSaving] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleting, setDeleting] = useState(false)
 
   const editing = editingId ? secrets[editingId] : null
   const agentList = Object.values(agents)
@@ -50,6 +53,8 @@ export function SecretSheet() {
   }, [editing, open])
 
   const handleClose = () => {
+    setConfirmDelete(false)
+    setDeleting(false)
     setOpen(false)
     setEditingId(null)
   }
@@ -87,14 +92,17 @@ export function SecretSheet() {
 
   const handleDelete = async () => {
     if (!editing) return
-    if (!confirm(`Delete secret "${editing.name}"?`)) return
+    setDeleting(true)
     try {
       await api('DELETE', `/secrets/${editing.id}`)
       toast.success('Secret deleted')
       await loadSecrets()
+      setConfirmDelete(false)
       handleClose()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete secret')
+    } finally {
+      setDeleting(false)
     }
   }
 
@@ -184,7 +192,7 @@ export function SecretSheet() {
         <div className="flex gap-3 pt-3">
           {editing && (
             <button
-              onClick={handleDelete}
+              onClick={() => setConfirmDelete(true)}
               className="px-5 py-3 rounded-[14px] border border-danger/30 bg-transparent text-danger text-[14px] font-600 cursor-pointer hover:bg-danger/10 transition-colors"
               style={{ fontFamily: 'inherit' }}
             >
@@ -202,6 +210,17 @@ export function SecretSheet() {
             {saving ? 'Saving...' : editing ? 'Update' : 'Save'}
           </button>
         </div>
+        <ConfirmDialog
+          open={confirmDelete}
+          title="Delete Secret?"
+          message={editing ? `Delete "${editing.name}"? This will remove the stored secret from the app.` : 'Delete this secret?'}
+          confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+          confirmDisabled={deleting}
+          cancelDisabled={deleting}
+          danger
+          onConfirm={() => { void handleDelete() }}
+          onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+        />
       </div>
     </BottomSheet>
   )

package/src/components/shared/agent-switch-dialog.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { toast } from 'sonner'
 
 export function AgentSwitchDialog() {
   const [open, setOpen] = useState(false)
@@ -47,10 +48,15 @@ export function AgentSwitchDialog() {
   }, [agents, query])
 
   const handleSelect = useCallback((agentId: string) => {
+    const agent = agents[agentId]
+    if (agent?.disabled === true && !agent.threadSessionId) {
+      toast.error(`${agent.name} is disabled. Re-enable it to start a new chat.`)
+      return
+    }
     setOpen(false)
     void setCurrentAgent(agentId)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [agents, setCurrentAgent])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'ArrowDown') {
@@ -119,6 +125,11 @@ export function AgentSwitchDialog() {
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   <span className="text-[13px] font-500 text-text truncate">{agent.name}</span>
+                  {agent.disabled === true && (
+                    <span className="px-1.5 py-0.5 rounded-[4px] bg-amber-400/[0.08] text-[10px] font-500 text-amber-300 shrink-0">
+                      disabled
+                    </span>
+                  )}
                   {agent.id === currentAgentId && (
                     <span className="px-1.5 py-0.5 rounded-[4px] bg-accent-bright/15 text-[10px] font-500 text-accent-bright shrink-0">
                       current

package/src/components/shared/bottom-sheet.tsx

@@ -9,9 +9,11 @@ interface Props {
   onClose: () => void
   children: ReactNode
   wide?: boolean
+  title?: string
+  description?: string
 }
 
-export function BottomSheet({ open, onClose, children, wide }: Props) {
+export function BottomSheet({ open, onClose, children, wide, title, description }: Props) {
   return (
     <DialogPrimitive.Root open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
       <DialogPrimitive.Portal>
@@ -27,10 +29,18 @@ export function BottomSheet({ open, onClose, children, wide }: Props) {
             ${wide ? 'sm:max-w-[760px]' : 'sm:max-w-[560px]'}`}
           style={{ animationDuration: '220ms' }}
         >
-          <div className="relative shrink-0 px-4 pt-3 sm:px-5 sm:pt-5">
+          <div className="relative shrink-0 px-4 pt-4 pr-14 sm:px-5 sm:pt-6 sm:pr-16">
             <div className="mx-auto h-1 w-10 rounded-full bg-white/[0.08] sm:hidden" />
+            <DialogPrimitive.Title className="sr-only">
+              {title || 'Dialog'}
+            </DialogPrimitive.Title>
+            {description ? (
+              <DialogPrimitive.Description className="sr-only">
+                {description}
+              </DialogPrimitive.Description>
+            ) : null}
             <DialogPrimitive.Close
-              className="absolute right-3 top-2.5 inline-flex h-9 w-9 items-center justify-center rounded-[12px] border border-white/[0.06] bg-white/[0.03] text-text-3 transition-all hover:bg-white/[0.06] hover:text-text-2 focus:outline-none focus:ring-2 focus:ring-accent-bright/30 sm:right-4 sm:top-4"
+              className="absolute right-4 top-3.5 inline-flex h-9 w-9 items-center justify-center rounded-[12px] border border-white/[0.06] bg-white/[0.03] text-text-3 transition-all hover:bg-white/[0.06] hover:text-text-2 focus:outline-none focus:ring-2 focus:ring-accent-bright/30 sm:right-5 sm:top-5"
             >
               <XIcon className="size-4" />
               <span className="sr-only">Close</span>