@swarmclawai/swarmclaw 0.7.2 → 0.7.4

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

@@ -11,7 +11,7 @@ import type { PluginMeta, PluginSettingsField, 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'
+  const sourceLabel = plugin.isBuiltin ? 'core plugin' : 'installed plugin'
   return `No description provided. This ${sourceLabel} is available and can be configured from this panel.`
 }
 
@@ -22,6 +22,7 @@ function pluginCapabilityBadges(plugin: PluginMeta): string[] {
   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'}`)
+  if (plugin.hasDependencyManifest) badges.push(`${plugin.dependencyCount ?? 0} dep${plugin.dependencyCount === 1 ? '' : 's'}`)
   return badges
 }
 
@@ -46,8 +47,10 @@ export function PluginSheet() {
   const [activeTag, setActiveTag] = useState<string | null>(null)
   const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
   const [pluginSettingsValues, setPluginSettingsValues] = useState<Record<string, unknown>>({})
+  const [configuredSecretFields, setConfiguredSecretFields] = useState<string[]>([])
   const [pluginSettingsLoading, setPluginSettingsLoading] = useState(false)
   const [pluginSettingsSaving, setPluginSettingsSaving] = useState(false)
+  const [dependencyInstalling, setDependencyInstalling] = useState(false)
 
   const editing = editingFilename ? plugins[editingFilename] : null
 
@@ -55,12 +58,19 @@ export function PluginSheet() {
   useEffect(() => {
     if (!editing?.settingsFields?.length) {
       setPluginSettingsValues({})
+      setConfiguredSecretFields([])
       return
     }
     setPluginSettingsLoading(true)
-    api<Record<string, unknown>>('GET', `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`)
-      .then((data) => setPluginSettingsValues(data ?? {}))
-      .catch(() => setPluginSettingsValues({}))
+    api<{ values?: Record<string, unknown>; configuredSecretFields?: string[] }>('GET', `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`)
+      .then((data) => {
+        setPluginSettingsValues(data?.values ?? {})
+        setConfiguredSecretFields(Array.isArray(data?.configuredSecretFields) ? data.configuredSecretFields : [])
+      })
+      .catch(() => {
+        setPluginSettingsValues({})
+        setConfiguredSecretFields([])
+      })
       .finally(() => setPluginSettingsLoading(false))
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingFilename])
@@ -69,7 +79,24 @@ export function PluginSheet() {
     if (!editing) return
     setPluginSettingsSaving(true)
     try {
-      await api('PUT', `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`, pluginSettingsValues)
+      const secretFieldSet = new Set(
+        (editing.settingsFields || [])
+          .filter((field) => field.type === 'secret')
+          .map((field) => field.key),
+      )
+      const payload = Object.fromEntries(
+        Object.entries(pluginSettingsValues).filter(([key, value]) => {
+          if (!secretFieldSet.has(key)) return true
+          return value !== undefined && value !== ''
+        }),
+      )
+      const response = await api<{ values?: Record<string, unknown>; configuredSecretFields?: string[] }>(
+        'PUT',
+        `/plugins/settings?pluginId=${encodeURIComponent(editing.filename)}`,
+        payload,
+      )
+      setPluginSettingsValues(response?.values ?? {})
+      setConfiguredSecretFields(Array.isArray(response?.configuredSecretFields) ? response.configuredSecretFields : [])
       toast.success('Plugin settings saved')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to save settings')
@@ -126,6 +153,24 @@ export function PluginSheet() {
     setDeleting(false)
   }
 
+  const installDependencies = useCallback(async () => {
+    if (!editing?.filename) return
+    setDependencyInstalling(true)
+    try {
+      const response = await api<{ ok: boolean }>('POST', '/plugins/dependencies', {
+        filename: editing.filename,
+        packageManager: editing.packageManager,
+      })
+      if (response?.ok) {
+        await loadPlugins()
+        toast.success('Plugin dependencies installed')
+      }
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to install plugin dependencies')
+    }
+    setDependencyInstalling(false)
+  }, [editing?.filename, editing?.packageManager, loadPlugins])
+
   const installFromMarketplace = async (p: MarketplacePlugin) => {
     setInstalling(p.id)
     const toastId = toast.loading(`Installing ${p.name}...`)
@@ -189,7 +234,9 @@ export function PluginSheet() {
             <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 className="text-[11px] text-text-2">
+                  {editing.isBuiltin ? 'Core Platform' : editing.source === 'marketplace' ? 'Marketplace 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>
@@ -219,6 +266,54 @@ export function PluginSheet() {
             )}
           </div>
 
+          {(editing.hasDependencyManifest || !editing.isBuiltin) && (
+            <div className="py-4 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-[13px] font-600 text-text">Dependencies</div>
+                  <p className="text-[11px] text-text-3/60 mt-1">
+                    {editing.hasDependencyManifest
+                      ? `Managed in a per-plugin workspace${editing.packageManager ? ` via ${editing.packageManager}` : ''}.`
+                      : 'No package.json manifest is currently attached to this plugin.'}
+                  </p>
+                </div>
+                {editing.hasDependencyManifest && (
+                  <button
+                    onClick={() => { void installDependencies() }}
+                    disabled={dependencyInstalling}
+                    className="px-3 py-2 rounded-[10px] bg-accent-soft text-[11px] font-700 text-accent-bright hover:bg-accent-bright/15 transition-all cursor-pointer border-none disabled:opacity-50"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {dependencyInstalling ? 'Installing…' : 'Install / Refresh'}
+                  </button>
+                )}
+              </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">Runtime deps</div>
+                  <div className="text-[11px] text-text-2">{editing.dependencyCount ?? 0}</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">Status</div>
+                  <div className="text-[11px] text-text-2">{editing.dependencyInstallStatus || 'none'}</div>
+                </div>
+              </div>
+
+              {editing.dependencyInstallError && (
+                <div className="mt-3 p-2.5 rounded-[10px] bg-red-500/[0.08] border border-red-500/20 text-[11px] text-red-300/90">
+                  {editing.dependencyInstallError}
+                </div>
+              )}
+
+              {editing.dependencyInstalledAt && (
+                <p className="text-[10px] text-text-3/45 mt-3">
+                  Last installed {new Date(editing.dependencyInstalledAt).toLocaleString()}
+                </p>
+              )}
+            </div>
+          )}
+
           <div className="flex items-center justify-between py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
             <div>
               <span className="text-[13px] font-600 text-text block">Enabled</span>
@@ -246,6 +341,7 @@ export function PluginSheet() {
                       key={field.key}
                       field={field}
                       value={pluginSettingsValues[field.key]}
+                      configured={configuredSecretFields.includes(field.key)}
                       onChange={(v) => setPluginSettingsValues((prev) => ({ ...prev, [field.key]: v }))}
                     />
                   ))}
@@ -442,7 +538,7 @@ export function PluginSheet() {
                 </p>
               )}
               <p className="text-[10px] text-text-3/60 mt-3">
-                Works with SwarmClaw and OpenClaw plugin formats. URL must be HTTPS.
+                Works with `.js` / `.mjs` SwarmClaw and OpenClaw plugin formats. URL must be HTTPS.
               </p>
             </div>
           )}
@@ -465,7 +561,17 @@ export function PluginSheet() {
   )
 }
 
-function PluginSettingRow({ field, value, onChange }: { field: PluginSettingsField; value: unknown; onChange: (v: unknown) => void }) {
+function PluginSettingRow({
+  field,
+  value,
+  configured,
+  onChange,
+}: {
+  field: PluginSettingsField
+  value: unknown
+  configured: boolean
+  onChange: (v: unknown) => void
+}) {
   const inputCls = 'w-full py-2 px-3 rounded-[8px] text-[12px] bg-bg border border-white/[0.06] text-text placeholder:text-text-3/50 outline-none focus:border-accent-bright/30'
 
   return (
@@ -509,11 +615,14 @@ function PluginSettingRow({ field, value, onChange }: { field: PluginSettingsFie
           type={field.type === 'secret' ? 'password' : 'text'}
           value={String(value ?? field.defaultValue ?? '')}
           onChange={(e) => onChange(e.target.value || undefined)}
-          placeholder={field.placeholder}
+          placeholder={field.type === 'secret' && configured ? 'Stored securely. Enter a new value to replace it.' : field.placeholder}
           className={inputCls}
           style={{ fontFamily: 'inherit' }}
         />
       )}
+      {field.type === 'secret' && configured && (
+        <p className="text-[10px] text-emerald-400/90 mt-1">Stored securely. Leave blank to keep the current value.</p>
+      )}
       {field.help && <p className="text-[10px] text-text-3/60 mt-1">{field.help}</p>}
     </div>
   )

package/src/components/projects/project-detail.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { updateAgent } from '@/lib/agents'
@@ -102,6 +102,12 @@ export function ProjectDetail() {
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
 
   const [assignPickerOpen, setAssignPickerOpen] = useState(false)
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => setNow(Date.now()), 60_000)
+    return () => window.clearInterval(intervalId)
+  }, [])
 
   const project = activeProjectFilter ? projects[activeProjectFilter] : null
 
@@ -150,6 +156,93 @@ export function ProjectDetail() {
     return items.sort((a, b) => b.time - a.time).slice(0, 12)
   }, [projectTasks, projectSchedules, projectAgents])
 
+  const approvalTasks = useMemo(
+    () => projectTasks.filter((task) => !!task.pendingApproval),
+    [projectTasks],
+  )
+
+  const blockedTasks = useMemo(
+    () => projectTasks.filter((task) => (task.blockedBy?.length || 0) > 0),
+    [projectTasks],
+  )
+
+  const overdueTasks = useMemo(
+    () => projectTasks.filter((task) => !!task.dueAt && task.dueAt < now && task.status !== 'completed' && task.status !== 'archived'),
+    [now, projectTasks],
+  )
+
+  const staleTasks = useMemo(
+    () => projectTasks.filter((task) => task.status !== 'completed' && task.status !== 'archived' && now - task.updatedAt > 3 * 24 * 60 * 60 * 1000),
+    [now, projectTasks],
+  )
+
+  const overdueSchedules = useMemo(
+    () => projectSchedules.filter((schedule) => schedule.status === 'active' && !!schedule.nextRunAt && schedule.nextRunAt < now),
+    [now, projectSchedules],
+  )
+
+  const nextScheduledRun = useMemo(
+    () => projectSchedules
+      .filter((schedule) => schedule.status === 'active' && !!schedule.nextRunAt && schedule.nextRunAt >= now)
+      .sort((a, b) => (a.nextRunAt || 0) - (b.nextRunAt || 0))[0] || null,
+    [now, projectSchedules],
+  )
+
+  const busiestAgent = useMemo(() => {
+    return projectAgents
+      .map((agent) => ({
+        agent,
+        taskCount: projectTasks.filter((task) => task.agentId === agent.id && task.status !== 'completed' && task.status !== 'archived').length,
+      }))
+      .sort((a, b) => b.taskCount - a.taskCount)[0] || null
+  }, [projectAgents, projectTasks])
+
+  const attentionItems = useMemo(() => {
+    const seen = new Set<string>()
+    const items: Array<{ id: string; label: string; detail: string; tone: string; onClick: () => void }> = []
+    for (const task of approvalTasks.slice(0, 2)) {
+      seen.add(task.id)
+      items.push({
+        id: `approval-${task.id}`,
+        label: task.title,
+        detail: 'Awaiting tool approval',
+        tone: 'text-amber-400',
+        onClick: () => { setEditingTaskId(task.id); setTaskSheetOpen(true) },
+      })
+    }
+    for (const task of blockedTasks.slice(0, 2)) {
+      if (seen.has(task.id)) continue
+      seen.add(task.id)
+      items.push({
+        id: `blocked-${task.id}`,
+        label: task.title,
+        detail: `${task.blockedBy?.length || 0} blocker${task.blockedBy?.length === 1 ? '' : 's'}`,
+        tone: 'text-rose-400',
+        onClick: () => { setEditingTaskId(task.id); setTaskSheetOpen(true) },
+      })
+    }
+    if (staleTasks[0] && !seen.has(staleTasks[0].id)) {
+      seen.add(staleTasks[0].id)
+      items.push({
+        id: `stale-${staleTasks[0].id}`,
+        label: staleTasks[0].title,
+        detail: 'No recent progress in 3+ days',
+        tone: 'text-sky-400',
+        onClick: () => { setEditingTaskId(staleTasks[0].id); setTaskSheetOpen(true) },
+      })
+    }
+    if (overdueSchedules[0]) {
+      items.push({
+        id: `schedule-${overdueSchedules[0].id}`,
+        label: overdueSchedules[0].name,
+        detail: 'Schedule missed its next run',
+        tone: 'text-red-400',
+        onClick: () => { setEditingScheduleId(overdueSchedules[0].id); setScheduleSheetOpen(true) },
+      })
+    }
+    return items.slice(0, 5)
+  }, [approvalTasks, blockedTasks, overdueSchedules, setEditingScheduleId, setEditingTaskId, setScheduleSheetOpen, setTaskSheetOpen, staleTasks])
+
   const handleUnassignAgent = async (agentId: string) => {
     await updateAgent(agentId, { projectId: undefined })
     await loadAgents()
@@ -212,6 +305,101 @@ export function ProjectDetail() {
           </div>
         </div>
 
+        <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_280px] gap-4 mb-8">
+          <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
+            <div className="flex items-center justify-between gap-4 mb-4">
+              <div>
+                <h2 className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">Project Health</h2>
+                <p className="text-[12px] text-text-3/60 mt-1">Surface blockers and the next useful action before digging into the full history.</p>
+              </div>
+              <button
+                onClick={() => setActiveView('tasks')}
+                className="shrink-0 px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Open Task Board
+              </button>
+            </div>
+
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+              {[
+                { label: 'Awaiting Approval', value: approvalTasks.length, tone: 'text-amber-400', hint: 'Tasks paused on approval' },
+                { label: 'Blocked', value: blockedTasks.length, tone: 'text-rose-400', hint: 'Tasks waiting on dependencies' },
+                { label: 'Overdue', value: overdueTasks.length + overdueSchedules.length, tone: 'text-red-400', hint: 'Tasks or schedules behind plan' },
+                { label: 'Stale Tasks', value: staleTasks.length, tone: 'text-sky-400', hint: 'No meaningful progress in 3+ days' },
+              ].map((item) => (
+                <div key={item.label} className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-4 py-3">
+                  <div className={`text-[22px] font-display font-700 tracking-[-0.02em] ${item.tone}`}>{item.value}</div>
+                  <div className="text-[11px] font-600 text-text-2 mt-0.5">{item.label}</div>
+                  <p className="text-[10px] text-text-3/45 mt-1 leading-relaxed">{item.hint}</p>
+                </div>
+              ))}
+            </div>
+
+            <div className="flex flex-wrap gap-2 mt-4">
+              {busiestAgent?.agent && (
+                <button
+                  onClick={() => { setCurrentAgent(busiestAgent.agent.id); setActiveView('agents') }}
+                  className="inline-flex items-center gap-2 px-3 py-2 rounded-[10px] bg-accent-soft text-[12px] font-600 text-accent-bright hover:bg-accent-bright/15 transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <AgentAvatar seed={busiestAgent.agent.avatarSeed} avatarUrl={busiestAgent.agent.avatarUrl} name={busiestAgent.agent.name} size={18} />
+                  Open busiest agent
+                </button>
+              )}
+              {(approvalTasks[0] || blockedTasks[0] || overdueTasks[0]) && (
+                <button
+                  onClick={() => {
+                    const nextTask = approvalTasks[0] || blockedTasks[0] || overdueTasks[0]
+                    if (!nextTask) return
+                    setEditingTaskId(nextTask.id)
+                    setTaskSheetOpen(true)
+                  }}
+                  className="px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Review next task
+                </button>
+              )}
+              {nextScheduledRun && (
+                <button
+                  onClick={() => { setEditingScheduleId(nextScheduledRun.id); setScheduleSheetOpen(true) }}
+                  className="px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Next run {relativeDate(nextScheduledRun.nextRunAt || now)}
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Needs Attention</h3>
+              <span className="text-[11px] text-text-3/40">{attentionItems.length || 0} items</span>
+            </div>
+            {attentionItems.length === 0 ? (
+              <div className="rounded-[12px] border border-dashed border-white/[0.08] px-4 py-6 text-center">
+                <p className="text-[12px] text-text-3/45">No urgent blockers right now.</p>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-2">
+                {attentionItems.map((item) => (
+                  <button
+                    key={item.id}
+                    onClick={item.onClick}
+                    className="w-full rounded-[12px] border border-white/[0.06] bg-surface/60 px-3.5 py-3 text-left hover:bg-white/[0.04] transition-all cursor-pointer"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <div className={`text-[11px] font-700 uppercase tracking-[0.08em] ${item.tone}`}>{item.detail}</div>
+                    <div className="text-[13px] font-600 text-text mt-1 line-clamp-2">{item.label}</div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
         {/* Stats cards */}
         <div className="grid grid-cols-4 gap-3 mb-8">
           {[

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

@@ -10,19 +10,27 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   const providerConfigs = useAppStore((s) => s.providerConfigs)
   const loadProviders = useAppStore((s) => s.loadProviders)
   const loadProviderConfigs = useAppStore((s) => s.loadProviderConfigs)
+  const gatewayProfiles = useAppStore((s) => s.gatewayProfiles)
+  const loadGatewayProfiles = useAppStore((s) => s.loadGatewayProfiles)
+  const externalAgents = useAppStore((s) => s.externalAgents)
+  const loadExternalAgents = useAppStore((s) => s.loadExternalAgents)
   const credentials = useAppStore((s) => s.credentials)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
   const setProviderSheetOpen = useAppStore((s) => s.setProviderSheetOpen)
   const setEditingProviderId = useAppStore((s) => s.setEditingProviderId)
+  const setGatewaySheetOpen = useAppStore((s) => s.setGatewaySheetOpen)
+  const setEditingGatewayId = useAppStore((s) => s.setEditingGatewayId)
   const [loaded, setLoaded] = useState(false)
 
   const refresh = useCallback(async () => {
-    await Promise.all([loadProviders(), loadProviderConfigs(), loadCredentials()])
+    await Promise.all([loadProviders(), loadProviderConfigs(), loadGatewayProfiles(), loadExternalAgents(), loadCredentials()])
     setLoaded(true)
-  }, [loadProviders, loadProviderConfigs, loadCredentials])
+  }, [loadProviders, loadProviderConfigs, loadGatewayProfiles, loadExternalAgents, loadCredentials])
 
   useEffect(() => { void refresh() }, [refresh])
   useWs('providers', loadProviders, 20_000)
+  useWs('gateways', loadGatewayProfiles, 20_000)
+  useWs('external_agents', loadExternalAgents, 20_000)
 
   const handleEdit = (id: string) => {
     setEditingProviderId(id)
@@ -41,6 +49,23 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
     await loadProviderConfigs()
   }
 
+  const handleEditGateway = (id: string | null) => {
+    setEditingGatewayId(id)
+    setGatewaySheetOpen(true)
+  }
+
+  const handleDeleteGateway = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/gateways/${id}`)
+    await loadGatewayProfiles()
+  }
+
+  const handleHealthCheckGateway = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('GET', `/gateways/${id}/health`)
+    await loadGatewayProfiles()
+  }
+
   // Merge built-in providers with custom configs
   const builtinItems = providers.map((p) => ({
     id: p.id,
@@ -74,6 +99,18 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
 
   return (
     <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Model Providers</div>
+        {!inSidebar && (
+          <button
+            type="button"
+            onClick={() => handleEditGateway(null)}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-700 text-text-2 hover:bg-white/[0.04] transition-all cursor-pointer"
+          >
+            + Gateway
+          </button>
+        )}
+      </div>
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
         {allItems.map((item, idx) => (
           <div
@@ -139,6 +176,125 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
           </div>
         ))}
       </div>
+
+      <div className="mt-8 mb-4 flex items-center justify-between">
+        <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">OpenClaw Gateways</div>
+        {!inSidebar && (
+          <button
+            type="button"
+            onClick={() => handleEditGateway(null)}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-700 text-text-2 hover:bg-white/[0.04] transition-all cursor-pointer"
+          >
+            + New Gateway
+          </button>
+        )}
+      </div>
+      <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
+        {gatewayProfiles.map((gateway, idx) => (
+          <div
+            key={gateway.id}
+            role="button"
+            tabIndex={0}
+            onClick={() => handleEditGateway(gateway.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                handleEditGateway(gateway.id)
+              }
+            }}
+            className="w-full text-left p-4 rounded-[14px] border transition-all duration-200
+              cursor-pointer hover:bg-white/[0.02] bg-surface border-white/[0.06] hover:border-white/[0.12] hover:scale-[1.01]"
+            style={{
+              animation: 'spring-in 0.5s var(--ease-spring) both',
+              animationDelay: `${(allItems.length + idx) * 0.04}s`,
+            }}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="min-w-0">
+                <div className="font-display text-[14px] font-600 text-text truncate">{gateway.name}</div>
+                <div className="text-[11px] text-text-3/60 font-mono truncate">{gateway.endpoint}</div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                {gateway.isDefault && (
+                  <span className="text-[10px] font-700 px-2 py-0.5 rounded-[5px] bg-accent-bright/10 text-accent-bright uppercase tracking-wider">Default</span>
+                )}
+                <span className={`w-2 h-2 rounded-full ${
+                  gateway.status === 'healthy'
+                    ? 'bg-emerald-400'
+                    : gateway.status === 'degraded'
+                      ? 'bg-amber-400'
+                      : gateway.status === 'offline'
+                        ? 'bg-red-400'
+                        : 'bg-white/10'
+                }`} />
+              </div>
+            </div>
+            <div className="text-[12px] text-text-3/70">
+              {gateway.tags?.length ? gateway.tags.join(', ') : (gateway.notes || 'Dedicated OpenClaw control plane')}
+            </div>
+            {!inSidebar && (
+              <div className="mt-3 flex items-center gap-2">
+                <button onClick={(e) => void handleHealthCheckGateway(e, gateway.id)} className="px-2.5 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-700 text-text-2 hover:bg-white/[0.04] cursor-pointer transition-all">
+                  Health
+                </button>
+                <button onClick={(e) => handleDeleteGateway(e, gateway.id)} className="px-2.5 py-1.5 rounded-[8px] border border-red-400/20 bg-red-400/[0.06] text-[11px] font-700 text-red-300 hover:bg-red-400/[0.1] cursor-pointer transition-all">
+                  Delete
+                </button>
+              </div>
+            )}
+          </div>
+        ))}
+        {gatewayProfiles.length === 0 && (
+          <div className="p-4 rounded-[14px] border border-dashed border-white/[0.08] text-[13px] text-text-3/70">
+            No gateway profiles yet. Add one to route OpenClaw agents by named control plane instead of a singleton default.
+          </div>
+        )}
+      </div>
+
+      {!inSidebar && (
+        <>
+          <div className="mt-8 mb-4 flex items-center justify-between">
+            <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">External Agent Runtimes</div>
+            <div className="text-[11px] text-text-3/60">Direct registration + heartbeat</div>
+          </div>
+          <div className="mb-3 rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-4 py-3 text-[12px] text-text-3/70">
+            External workers can register themselves at <code className="text-text-2">/api/external-agents/register</code> and then send heartbeats to
+            {' '}
+            <code className="text-text-2">/api/external-agents/&lt;id&gt;/heartbeat</code>.
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {externalAgents.map((runtime) => (
+              <div key={runtime.id} className="p-4 rounded-[14px] bg-surface border border-white/[0.06]">
+                <div className="flex items-center justify-between gap-3 mb-2">
+                  <div className="min-w-0">
+                    <div className="font-display text-[14px] font-600 text-text truncate">{runtime.name}</div>
+                    <div className="text-[11px] text-text-3/60 truncate">{runtime.sourceType} · {runtime.transport || 'custom'}</div>
+                  </div>
+                  <span className={`text-[10px] font-700 px-2 py-0.5 rounded-[5px] uppercase tracking-wider ${
+                    runtime.status === 'online'
+                      ? 'bg-emerald-400/10 text-emerald-300'
+                      : runtime.status === 'stale'
+                        ? 'bg-amber-400/10 text-amber-300'
+                        : 'bg-white/[0.04] text-text-3'
+                  }`}>
+                    {runtime.status}
+                  </span>
+                </div>
+                <div className="text-[12px] text-text-3/70">
+                  {runtime.provider || 'No provider'}
+                  {runtime.model ? ` · ${runtime.model}` : ''}
+                </div>
+                <div className="text-[11px] text-text-3/55 mt-2 font-mono truncate">{runtime.endpoint || runtime.workspace || runtime.id}</div>
+              </div>
+            ))}
+            {externalAgents.length === 0 && (
+              <div className="p-4 rounded-[14px] border border-dashed border-white/[0.08] text-[13px] text-text-3/70">
+                No external runtimes have registered yet.
+              </div>
+            )}
+          </div>
+        </>
+      )}
     </div>
   )
 }