@swarmclawai/swarmclaw 0.3.1 → 0.4.5

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

@@ -1,5 +1,16 @@
 import type { Connector, ConnectorPlatform, Session } from '@/types'
 import { cn } from '@/lib/utils'
+import { BsMicrosoftTeams } from 'react-icons/bs'
+import {
+  SiApple,
+  SiDiscord,
+  SiGooglechat,
+  SiMatrix,
+  SiSignal,
+  SiSlack,
+  SiTelegram,
+  SiWhatsapp,
+} from 'react-icons/si'
 
 export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string; color: string }> = {
   discord: { label: 'Discord', color: '#5865F2' },
@@ -7,6 +18,7 @@ export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string;
   slack: { label: 'Slack', color: '#4A154B' },
   whatsapp: { label: 'WhatsApp', color: '#25D366' },
   openclaw: { label: 'OpenClaw', color: '#F97316' },
+  bluebubbles: { label: 'BlueBubbles', color: '#2E89FF' },
   signal: { label: 'Signal', color: '#3A76F0' },
   teams: { label: 'Teams', color: '#6264A7' },
   googlechat: { label: 'Google Chat', color: '#00AC47' },
@@ -45,29 +57,23 @@ export function ConnectorPlatformIcon({
 }: ConnectorPlatformIconProps) {
   switch (platform) {
     case 'discord':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-        </svg>
-      )
+      return <SiDiscord size={size} className={className} />
     case 'telegram':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
-        </svg>
-      )
+      return <SiTelegram size={size} className={className} />
     case 'slack':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
-        </svg>
-      )
+      return <SiSlack size={size} className={className} />
     case 'whatsapp':
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
-          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
-        </svg>
-      )
+      return <SiWhatsapp size={size} className={className} />
+    case 'bluebubbles':
+      return <SiApple size={size} className={className} />
+    case 'signal':
+      return <SiSignal size={size} className={className} />
+    case 'googlechat':
+      return <SiGooglechat size={size} className={className} />
+    case 'matrix':
+      return <SiMatrix size={size} className={className} />
+    case 'teams':
+      return <BsMicrosoftTeams size={size} className={className} />
     case 'openclaw':
       return (
         <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>

package/src/components/shared/model-combobox.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+
+interface ModelComboboxProps {
+  providerId: string
+  value: string
+  onChange: (model: string) => void
+  models: string[]
+  defaultModels?: string[]
+  className?: string
+}
+
+export function ModelCombobox({
+  providerId,
+  value,
+  onChange,
+  models,
+  defaultModels = [],
+  className,
+}: ModelComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const loadProviders = useAppStore((s) => s.loadProviders)
+
+  const filtered = query
+    ? models.filter((m) => m.toLowerCase().includes(query.toLowerCase()))
+    : models
+
+  const isCustom = (m: string) => defaultModels.length > 0 && !defaultModels.includes(m)
+  const showAdd = query && !models.some((m) => m.toLowerCase() === query.toLowerCase())
+
+  const persistModels = useCallback(async (next: string[]) => {
+    await api('PUT', `/providers/${providerId}/models`, { models: next })
+    await loadProviders()
+  }, [providerId, loadProviders])
+
+  const addModel = useCallback(async (name: string) => {
+    const next = [...models, name]
+    await persistModels(next)
+    onChange(name)
+    setQuery('')
+    setOpen(false)
+  }, [models, persistModels, onChange])
+
+  const removeModel = useCallback(async (name: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    const next = models.filter((m) => m !== name)
+    if (value === name) onChange(next[0] || '')
+    if (next.length === defaultModels.length && next.every((m) => defaultModels.includes(m))) {
+      await api('DELETE', `/providers/${providerId}/models`)
+    } else {
+      await persistModels(next)
+    }
+    await loadProviders()
+  }, [models, defaultModels, value, onChange, providerId, persistModels, loadProviders])
+
+  const selectModel = useCallback((m: string) => {
+    onChange(m)
+    setQuery('')
+    setOpen(false)
+  }, [onChange])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+        setQuery('')
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div
+        className={`flex items-center ${className || ''}`}
+        onClick={() => {
+          setOpen(true)
+          setTimeout(() => inputRef.current?.focus(), 0)
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={open ? query : value}
+          onChange={(e) => {
+            setQuery(e.target.value)
+            if (!open) setOpen(true)
+          }}
+          onFocus={() => setOpen(true)}
+          placeholder={value || 'Select model…'}
+          className="w-full bg-transparent outline-none text-inherit placeholder:text-text-3/50"
+          style={{ fontFamily: 'inherit' }}
+        />
+        <svg className="w-4 h-4 text-text-3 shrink-0 ml-2" viewBox="0 0 16 16" fill="none">
+          <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </div>
+
+      {open && (
+        <div className="absolute z-50 top-full left-0 right-0 mt-1 max-h-[240px] overflow-y-auto rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-xl">
+          {filtered.map((m) => (
+            <div
+              key={m}
+              onClick={() => selectModel(m)}
+              className={`flex items-center justify-between px-3 py-2 text-[14px] cursor-pointer transition-colors hover:bg-white/[0.04] ${m === value ? 'text-accent-bright' : 'text-text'}`}
+            >
+              <span className="truncate">{m}</span>
+              {isCustom(m) && (
+                <button
+                  onClick={(e) => removeModel(m, e)}
+                  className="ml-2 p-0.5 rounded hover:bg-white/[0.08] text-text-3 hover:text-red-400 transition-colors shrink-0"
+                  title="Remove custom model"
+                >
+                  <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none">
+                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          ))}
+
+          {showAdd && (
+            <div
+              onClick={() => addModel(query.trim())}
+              className="flex items-center gap-2 px-3 py-2 text-[14px] cursor-pointer transition-colors hover:bg-white/[0.04] text-accent-bright border-t border-white/[0.06]"
+            >
+              <svg className="w-3.5 h-3.5 shrink-0" viewBox="0 0 16 16" fill="none">
+                <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+              <span className="truncate">Add &ldquo;{query.trim()}&rdquo;</span>
+            </div>
+          )}
+
+          {filtered.length === 0 && !showAdd && (
+            <div className="px-3 py-2 text-[14px] text-text-3">No models found</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/settings/section-heartbeat.tsx

@@ -26,7 +26,7 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
         `Stopped heartbeat on ${result.updatedSessions} session(s); cancelled ${result.cancelledQueued} queued run(s), aborted ${result.abortedRunning} running run(s).`,
       )
     } catch (err: any) {
-      setHeartbeatBulkNotice(err?.message || 'Failed to disable heartbeat for all sessions.')
+      setHeartbeatBulkNotice(err?.message || 'Failed to disable heartbeat for all agents.')
     } finally {
       setDisablingHeartbeats(false)
     }
@@ -35,49 +35,20 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
   return (
     <div className="mb-10">
       <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
-        Heartbeat
+        Heartbeat Defaults
       </h3>
       <p className="text-[12px] text-text-3 mb-5">
-        Configure ongoing heartbeat checks for long-lived sessions.
+        Global defaults inherited by agents. Enable heartbeat and set interval/model per-agent in the agent editor.
       </p>
       <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
           <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Interval</label>
-            <input
-              type="text"
-              value={appSettings.heartbeatInterval ?? appSettings.heartbeatIntervalSec ?? '30m'}
-              onChange={(e) => {
-                const val = e.target.value.trim()
-                patchSettings({ heartbeatInterval: val || null })
-              }}
-              placeholder="30m"
-              className={inputClass}
-              style={{ fontFamily: 'inherit' }}
-            />
-            <p className="text-[11px] text-text-3/60 mt-2">Duration string (e.g. 30m, 1h) or seconds. Set to 0 to disable.</p>
-          </div>
-          <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Prompt</label>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Default Prompt</label>
             <input
               type="text"
               value={appSettings.heartbeatPrompt || ''}
               onChange={(e) => patchSettings({ heartbeatPrompt: e.target.value || null })}
-              placeholder="Leave blank for default"
-              className={inputClass}
-              style={{ fontFamily: 'inherit' }}
-            />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
-          <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Model</label>
-            <input
-              type="text"
-              value={appSettings.heartbeatModel || ''}
-              onChange={(e) => patchSettings({ heartbeatModel: e.target.value || null })}
-              placeholder="Leave blank for session default"
+              placeholder="Leave blank for built-in default"
               className={inputClass}
               style={{ fontFamily: 'inherit' }}
             />
@@ -142,20 +113,17 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
         </div>
 
         <div>
-          <p className="text-[11px] text-text-3/60 mt-2">
-            Internal ping text used for ongoing sessions. Leave blank to use the default.
-          </p>
-          <div className="mt-4 flex items-center gap-2.5">
+          <div className="flex items-center gap-2.5">
             <button
               onClick={handleDisableAllHeartbeats}
               disabled={disablingHeartbeats}
               className="px-3.5 py-2 rounded-[10px] border border-rose-400/25 bg-rose-500/10 text-rose-300 hover:bg-rose-500/16 transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed text-[12px] font-600"
               style={{ fontFamily: 'inherit' }}
             >
-              {disablingHeartbeats ? 'Stopping\u2026' : 'Stop All Session Heartbeats'}
+              {disablingHeartbeats ? 'Stopping\u2026' : 'Stop All Heartbeats'}
             </button>
             <span className="text-[11px] text-text-3/70">
-              Disables heartbeat on every session and cancels queued heartbeat runs.
+              Disables heartbeat on every agent and cancels queued runs.
             </span>
           </div>
           {heartbeatBulkNotice && (

package/src/components/shared/settings/section-orchestrator.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { useAppStore } from '@/stores/use-app-store'
+import { ModelCombobox } from '@/components/shared/model-combobox'
+import { NON_LANGGRAPH_PROVIDER_IDS } from '@/lib/provider-sets'
 import type { SettingsSectionProps } from './types'
 
-const NON_LANGGRAPH_PROVIDER_IDS = new Set(['claude-cli', 'codex-cli', 'opencode-cli'])
-
 export function OrchestratorSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const providers = useAppStore((s) => s.providers)
   const credentials = useAppStore((s) => s.credentials)
@@ -53,16 +53,14 @@ export function OrchestratorSection({ appSettings, patchSettings, inputClass }:
         {lgProviderInfo && lgProviderInfo.models.length > 0 && (
           <div className="mb-5">
             <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Model</label>
-            <select
+            <ModelCombobox
+              providerId={lgProviderInfo.id}
               value={appSettings.langGraphModel || lgProviderInfo.models[0]}
-              onChange={(e) => patchSettings({ langGraphModel: e.target.value })}
-              className={`${inputClass} appearance-none cursor-pointer`}
-              style={{ fontFamily: 'inherit' }}
-            >
-              {lgProviderInfo.models.map((m) => (
-                <option key={m} value={m}>{m}</option>
-              ))}
-            </select>
+              onChange={(m) => patchSettings({ langGraphModel: m })}
+              models={lgProviderInfo.models}
+              defaultModels={lgProviderInfo.defaultModels}
+              className={`${inputClass} cursor-pointer`}
+            />
           </div>
         )}
 

package/src/components/shared/settings/section-web-search.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+export function WebSearchSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const provider = appSettings.webSearchProvider || 'duckduckgo'
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Web Search
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Choose which search engine agents use for the <code className="text-[11px] font-mono text-text-2">web_search</code> tool.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <div className="mb-5">
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Search Provider</label>
+          <select
+            value={provider}
+            onChange={(e) => patchSettings({ webSearchProvider: e.target.value as typeof provider })}
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="duckduckgo">DuckDuckGo (default, no key required)</option>
+            <option value="google">Google (scraping, no key required)</option>
+            <option value="bing">Bing (scraping, no key required)</option>
+            <option value="searxng">SearXNG (self-hosted, no key required)</option>
+            <option value="tavily">Tavily (requires API key in Secrets)</option>
+            <option value="brave">Brave Search (requires API key in Secrets)</option>
+          </select>
+        </div>
+
+        {provider === 'searxng' && (
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">SearXNG URL</label>
+            <input
+              type="text"
+              value={appSettings.searxngUrl || ''}
+              onChange={(e) => patchSettings({ searxngUrl: e.target.value || undefined })}
+              placeholder="http://localhost:8080"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        )}
+
+        {(provider === 'tavily' || provider === 'brave') && (
+          <p className="text-[11px] text-text-3/70">
+            Add a secret named &quot;{provider}&quot; or &quot;{provider}_api_key&quot; in the Secrets section below.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/shared/settings/settings-page.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { inputClass } from './utils'
+import { UserPreferencesSection } from './section-user-preferences'
+import { OrchestratorSection } from './section-orchestrator'
+import { RuntimeLoopSection } from './section-runtime-loop'
+import { CapabilityPolicySection } from './section-capability-policy'
+import { VoiceSection } from './section-voice'
+import { WebSearchSection } from './section-web-search'
+import { HeartbeatSection } from './section-heartbeat'
+import { EmbeddingSection } from './section-embedding'
+import { MemorySection } from './section-memory'
+import { SecretsSection } from './section-secrets'
+import { ProvidersSection } from './section-providers'
+import { PluginManager } from './plugin-manager'
+
+export function SettingsPage() {
+  const loadProviders = useAppStore((s) => s.loadProviders)
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+  const updateSettings = useAppStore((s) => s.updateSettings)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const credentials = useAppStore((s) => s.credentials)
+
+  useEffect(() => {
+    loadProviders()
+    loadCredentials()
+    loadSettings()
+    loadSecrets()
+    loadAgents()
+  }, [])
+
+  const credList = Object.values(credentials)
+  const patchSettings = updateSettings
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-y-auto">
+      <div className="w-full max-w-3xl mx-auto px-6 py-8">
+        <div className="mb-10">
+          <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">Settings</h2>
+          <p className="text-[14px] text-text-3">Manage providers, API keys & orchestrator engine</p>
+        </div>
+
+        <UserPreferencesSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <OrchestratorSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <RuntimeLoopSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <CapabilityPolicySection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <WebSearchSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <VoiceSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <HeartbeatSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <EmbeddingSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} credList={credList} />
+        <MemorySection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <SecretsSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <ProvidersSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+
+        <div className="mb-10">
+          <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+            Plugins
+          </h3>
+          <p className="text-[12px] text-text-3 mb-5">
+            Extend agent behavior with hooks. Install from the marketplace, a URL, or drop .js files into <code className="text-[11px] font-mono text-text-2">data/plugins/</code>.
+            <span className="text-text-3/70 ml-1">OpenClaw plugins are also supported.</span>
+          </p>
+          <PluginManager />
+        </div>
+      </div>
+    </div>
+  )
+}