@swarmclawai/swarmclaw 0.7.7 → 0.8.0

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>

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>