@swarmclawai/swarmclaw 0.5.2 → 0.6.0

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

@@ -167,7 +167,7 @@ export function ProvidersSection({ inputClass }: SettingsSectionProps) {
               <button
                 onClick={handleAdd}
                 disabled={!newKey.trim()}
-                className="flex-1 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+                className="flex-1 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
                 style={{ fontFamily: 'inherit' }}
               >
                 Save Key

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

@@ -121,7 +121,7 @@ export function SecretsSection({ appSettings, inputClass }: SettingsSectionProps
 
           <div className="flex gap-3 pt-2">
             <button onClick={() => setAddingSecret(false)} className="flex-1 py-3 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 transition-colors" style={{ fontFamily: 'inherit' }}>Cancel</button>
-            <button onClick={handleAddSecret} disabled={!secretName.trim() || !secretValue.trim()} className="flex-1 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110" style={{ fontFamily: 'inherit' }}>Save Secret</button>
+            <button onClick={handleAddSecret} disabled={!secretName.trim() || !secretValue.trim()} className="flex-1 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110" style={{ fontFamily: 'inherit' }}>Save Secret</button>
           </div>
         </div>
       ) : (

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

@@ -0,0 +1,95 @@
+'use client'
+
+import { useState } from 'react'
+import { toast } from 'sonner'
+import type { SettingsSectionProps } from './types'
+
+const PRESETS = [
+  { label: 'Default', color: '#1e1e30' },
+  { label: 'Midnight', color: '#1a1a3a' },
+  { label: 'Forest', color: '#1a2e1e' },
+  { label: 'Warm', color: '#2e1e1a' },
+  { label: 'Slate', color: '#1e2428' },
+  { label: 'Rose', color: '#2e1a24' },
+]
+
+export function ThemeSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const currentHue = appSettings.themeHue || PRESETS[0].color
+  const [customHex, setCustomHex] = useState(
+    PRESETS.some((p) => p.color === currentHue) ? '' : currentHue,
+  )
+
+  const applyHue = (color: string) => {
+    patchSettings({ themeHue: color })
+    document.documentElement.style.setProperty('--neutral-tint', color)
+    toast.success('Theme updated')
+  }
+
+  const handleCustomChange = (value: string) => {
+    setCustomHex(value)
+    if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+      applyHue(value)
+    }
+  }
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Theme
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Shift the UI color palette. Pick a preset or enter a custom hex color.
+      </p>
+
+      {/* Preset swatches */}
+      <div className="flex flex-wrap gap-3 mb-4">
+        {PRESETS.map((preset) => {
+          const isActive = currentHue === preset.color && !customHex
+          return (
+            <button
+              key={preset.color}
+              onClick={() => { setCustomHex(''); applyHue(preset.color) }}
+              className={`group flex flex-col items-center gap-1.5 cursor-pointer bg-transparent border-none p-0`}
+              title={preset.label}
+            >
+              <div
+                className={`w-9 h-9 rounded-full transition-all duration-200 ${
+                  isActive
+                    ? 'ring-2 ring-accent-bright ring-offset-2 ring-offset-bg scale-110'
+                    : 'hover:scale-105'
+                }`}
+                style={{ backgroundColor: preset.color }}
+              />
+              <span className={`text-[10px] font-500 ${isActive ? 'text-text' : 'text-text-3'}`}>
+                {preset.label}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Custom color picker + hex input */}
+      <div className="flex items-center gap-3">
+        <label className="text-[12px] text-text-3 shrink-0">Custom</label>
+        <div className="relative shrink-0">
+          <input
+            type="color"
+            value={customHex || currentHue}
+            onChange={(e) => handleCustomChange(e.target.value)}
+            className="w-9 h-9 rounded-full cursor-pointer border-2 border-white/[0.1] bg-transparent appearance-none [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none"
+            title="Pick a custom color"
+          />
+        </div>
+        <input
+          type="text"
+          value={customHex}
+          onChange={(e) => handleCustomChange(e.target.value)}
+          placeholder="#2a1f3d"
+          maxLength={7}
+          className={`${inputClass} max-w-[120px] font-mono`}
+          style={{ fontFamily: 'inherit' }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/shared/settings/section-user-preferences.tsx

@@ -1,8 +1,13 @@
 'use client'
 
+import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { SettingsSectionProps } from './types'
 
 export function UserPreferencesSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const agents = useAppStore((s) => s.agents)
+  const sortedAgents = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
+
   return (
     <div className="mb-10">
       <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -19,6 +24,40 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
         className={`${inputClass} resize-y min-h-[100px]`}
         style={{ fontFamily: 'inherit' }}
       />
+
+      {/* Default agent */}
+      <div className="mt-6">
+        <label className="text-[12px] font-600 text-text-2 block mb-1.5">Default Agent</label>
+        <p className="text-[11px] text-text-3/60 mb-2">
+          The agent that opens automatically when you start the app or click Main Chat.
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => patchSettings({ defaultAgentId: null })}
+            className={`flex items-center gap-2 px-3 py-2 rounded-[10px] text-[12px] font-600 cursor-pointer transition-all border
+              ${!appSettings.defaultAgentId
+                ? 'bg-white/[0.06] border-accent-bright/30 text-text'
+                : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            Auto (first agent)
+          </button>
+          {sortedAgents.map((agent) => (
+            <button
+              key={agent.id}
+              onClick={() => patchSettings({ defaultAgentId: agent.id })}
+              className={`flex items-center gap-2 px-3 py-2 rounded-[10px] text-[12px] font-600 cursor-pointer transition-all border
+                ${appSettings.defaultAgentId === agent.id
+                  ? 'bg-white/[0.06] border-accent-bright/30 text-text'
+                  : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={18} />
+              {agent.name}
+            </button>
+          ))}
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -1,9 +1,10 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { inputClass } from './utils'
 import { UserPreferencesSection } from './section-user-preferences'
+import { ThemeSection } from './section-theme'
 import { OrchestratorSection } from './section-orchestrator'
 import { RuntimeLoopSection } from './section-runtime-loop'
 import { CapabilityPolicySection } from './section-capability-policy'
@@ -16,6 +17,46 @@ import { SecretsSection } from './section-secrets'
 import { ProvidersSection } from './section-providers'
 import { PluginManager } from './plugin-manager'
 
+interface Tab {
+  id: string
+  label: string
+  icon: React.ReactNode
+  keywords: string[]
+}
+
+const TABS: Tab[] = [
+  {
+    id: 'general',
+    label: 'General',
+    keywords: ['preferences', 'user', 'language', 'default', 'capability', 'policy', 'permissions', 'tools'],
+    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg>,
+  },
+  {
+    id: 'appearance',
+    label: 'Appearance',
+    keywords: ['theme', 'color', 'hue', 'palette', 'dark', 'light', 'style', 'swatch'],
+    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="5" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" /><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /><line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" /><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /></svg>,
+  },
+  {
+    id: 'agents',
+    label: 'Agents & Loops',
+    keywords: ['orchestrator', 'runtime', 'loop', 'heartbeat', 'delegation', 'agent', 'swarm', 'turns'],
+    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>,
+  },
+  {
+    id: 'memory',
+    label: 'Memory & AI',
+    keywords: ['embedding', 'vector', 'voice', 'web search', 'memory', 'consolidation', 'tts', 'ai'],
+    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>,
+  },
+  {
+    id: 'integrations',
+    label: 'Integrations',
+    keywords: ['provider', 'secret', 'plugin', 'api', 'key', 'openai', 'anthropic', 'ollama', 'credential'],
+    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2v4m0 12v4M2 12h4m12 0h4" /><circle cx="12" cy="12" r="4" /><path d="M8 8L5.5 5.5M16 8l2.5-2.5M8 16l-2.5 2.5M16 16l2.5 2.5" /></svg>,
+  },
+]
+
 export function SettingsPage() {
   const loadProviders = useAppStore((s) => s.loadProviders)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
@@ -25,6 +66,22 @@ export function SettingsPage() {
   const loadSecrets = useAppStore((s) => s.loadSecrets)
   const loadAgents = useAppStore((s) => s.loadAgents)
   const credentials = useAppStore((s) => s.credentials)
+  const validTabIds = TABS.map((t) => t.id)
+  const [activeTab, setActiveTabRaw] = useState(() => {
+    if (typeof window === 'undefined') return 'general'
+    const params = new URLSearchParams(window.location.search)
+    const tab = params.get('tab')
+    return tab && validTabIds.includes(tab) ? tab : 'general'
+  })
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const setActiveTab = useCallback((tab: string) => {
+    setActiveTabRaw(tab)
+    const url = new URL(window.location.href)
+    if (tab === 'general') url.searchParams.delete('tab')
+    else url.searchParams.set('tab', tab)
+    window.history.replaceState(null, '', url.toString())
+  }, [])
 
   useEffect(() => {
     loadProviders()
@@ -35,38 +92,134 @@ export function SettingsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // Scroll to top when switching tabs
+  useEffect(() => {
+    contentRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
+  }, [activeTab])
+
+  const [searchQuery, setSearchQuery] = useState('')
   const credList = Object.values(credentials)
   const patchSettings = updateSettings
+  const sectionProps = { appSettings, patchSettings, inputClass }
+
+  const matchingTabIds = searchQuery
+    ? new Set(TABS.filter((t) => {
+        const q = searchQuery.toLowerCase()
+        return t.label.toLowerCase().includes(q) || t.keywords.some((k) => k.includes(q))
+      }).map((t) => t.id))
+    : null
+
+  // Auto-switch to first matching tab when searching
+  useEffect(() => {
+    if (matchingTabIds && matchingTabIds.size > 0 && !matchingTabIds.has(activeTab)) {
+      const first = TABS.find((t) => matchingTabIds.has(t.id))
+      if (first) setActiveTab(first.id)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery])
 
   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 className="flex-1 flex h-full min-w-0">
+      {/* Tab sidebar */}
+      <div className="w-[200px] shrink-0 border-r border-white/[0.04] py-6 px-3 flex flex-col gap-1">
+        <h2 className="font-display text-[14px] font-700 text-text px-3 mb-3 tracking-[-0.01em]">Settings</h2>
+        <div className="px-2 mb-3">
+          <div className="relative">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-3/50">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search settings..."
+              className="w-full pl-8 pr-2 py-1.5 text-[12px] bg-white/[0.04] rounded-[8px] border border-white/[0.06] text-text placeholder:text-text-3/40 outline-none focus:border-white/[0.12] transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
         </div>
+        {TABS.map((tab) => {
+          const dimmed = matchingTabIds && !matchingTabIds.has(tab.id)
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-[10px] text-[13px] font-500 cursor-pointer transition-all border-none text-left
+                ${dimmed ? 'opacity-30' : ''}
+                ${activeTab === tab.id
+                  ? 'bg-accent-soft text-accent-bright'
+                  : 'bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <span className="shrink-0">{tab.icon}</span>
+              {tab.label}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Content */}
+      <div ref={contentRef} className="flex-1 overflow-y-auto">
+        <div className="max-w-2xl px-8 py-8">
+          {/* Tab header */}
+          <div className="mb-8">
+            <h3 className="font-display text-[22px] font-700 tracking-[-0.02em] text-text">
+              {TABS.find((t) => t.id === activeTab)?.label}
+            </h3>
+            <p className="text-[13px] text-text-3 mt-1">
+              {activeTab === 'general' && 'User preferences and global behavior settings.'}
+              {activeTab === 'appearance' && 'Customize the look and feel of the interface.'}
+              {activeTab === 'agents' && 'Orchestrator, runtime loops, capabilities and heartbeat.'}
+              {activeTab === 'memory' && 'Embedding, memory governance, voice and web search.'}
+              {activeTab === 'integrations' && 'Providers, secrets and plugins.'}
+            </p>
+          </div>
+
+          {activeTab === 'general' && (
+            <>
+              <UserPreferencesSection {...sectionProps} />
+              <CapabilityPolicySection {...sectionProps} />
+            </>
+          )}
+
+          {activeTab === 'appearance' && (
+            <ThemeSection {...sectionProps} />
+          )}
+
+          {activeTab === 'agents' && (
+            <>
+              <OrchestratorSection {...sectionProps} />
+              <RuntimeLoopSection {...sectionProps} />
+              <HeartbeatSection {...sectionProps} />
+            </>
+          )}
+
+          {activeTab === 'memory' && (
+            <>
+              <EmbeddingSection {...sectionProps} credList={credList} />
+              <MemorySection {...sectionProps} />
+              <VoiceSection {...sectionProps} />
+              <WebSearchSection {...sectionProps} />
+            </>
+          )}
 
-        <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 />
+          {activeTab === 'integrations' && (
+            <>
+              <ProvidersSection {...sectionProps} />
+              <SecretsSection {...sectionProps} />
+              <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>
     </div>

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

@@ -2,87 +2,23 @@
 
 import { useEffect } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
-import { BottomSheet } from '../bottom-sheet'
-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 { 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'
 
+/**
+ * Legacy settings sheet — redirects to the full settings page.
+ * Kept for backwards compat in case any code calls setSettingsOpen(true).
+ */
 export function SettingsSheet() {
   const open = useAppStore((s) => s.settingsOpen)
   const setOpen = useAppStore((s) => s.setSettingsOpen)
-  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)
+  const setActiveView = useAppStore((s) => s.setActiveView)
 
   useEffect(() => {
     if (open) {
-      loadProviders()
-      loadCredentials()
-      loadSettings()
-      loadSecrets()
-      loadAgents()
+      setActiveView('settings')
+      setOpen(false)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
-  const credList = Object.values(credentials)
-  const patchSettings = updateSettings
-
-  return (
-    <BottomSheet open={open} onClose={() => setOpen(false)} wide>
-      {/* Header */}
-      <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} />
-      <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} />
-
-      {/* Plugins */}
-      <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>
-
-      {/* Done */}
-      <div className="pt-2 border-t border-white/[0.04]">
-        <button
-          onClick={() => setOpen(false)}
-          className="w-full py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer
-            hover:bg-surface-2 transition-all duration-200"
-          style={{ fontFamily: 'inherit' }}
-        >
-          Done
-        </button>
-      </div>
-    </BottomSheet>
-  )
+  return null
 }

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

@@ -0,0 +1,33 @@
+import type React from 'react'
+
+interface Props {
+  onCancel: () => void
+  onSave: () => void
+  saveLabel?: string
+  saveDisabled?: boolean
+  /** Extra buttons rendered on the left (e.g. Archive, Delete) */
+  left?: React.ReactNode
+}
+
+export function SheetFooter({ onCancel, onSave, saveLabel = 'Save', saveDisabled, left }: Props) {
+  return (
+    <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
+      {left}
+      <button
+        onClick={onCancel}
+        className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+        style={{ fontFamily: 'inherit' }}
+      >
+        Cancel
+      </button>
+      <button
+        onClick={onSave}
+        disabled={saveDisabled}
+        className="flex-1 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
+        style={{ fontFamily: 'inherit' }}
+      >
+        {saveLabel}
+      </button>
+    </div>
+  )
+}