@swarmclawai/swarmclaw 0.5.3 → 0.6.0

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

@@ -0,0 +1,115 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { api } from '@/lib/api-client'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+}
+
+export function ProfileSheet({ open, onClose }: Props) {
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+  const setUser = useAppStore((s) => s.setUser)
+  const currentUser = useAppStore((s) => s.currentUser)
+
+  const [name, setName] = useState('')
+  const [avatarSeed, setAvatarSeed] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setName(appSettings.userName || currentUser || '')
+      setAvatarSeed(appSettings.userAvatarSeed || '')
+    }
+  }, [open, appSettings.userName, appSettings.userAvatarSeed, currentUser])
+
+  const handleSave = async () => {
+    const trimmed = name.trim()
+    if (!trimmed || saving) return
+    setSaving(true)
+    try {
+      await api('PUT', '/settings', {
+        userName: trimmed.toLowerCase(),
+        userAvatarSeed: avatarSeed.trim() || undefined,
+      })
+      setUser(trimmed.toLowerCase())
+      await loadSettings()
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSignOut = () => {
+    setUser(null)
+    onClose()
+  }
+
+  return (
+    <BottomSheet open={open} onClose={onClose}>
+      <div className="p-6 max-w-[400px] mx-auto">
+        <h2 className="font-display text-[18px] font-700 text-text mb-6 text-center">Profile</h2>
+
+        {/* Avatar preview */}
+        <div className="flex justify-center mb-6">
+          <AgentAvatar seed={avatarSeed || null} name={name || '?'} size={72} />
+        </div>
+
+        {/* Avatar seed */}
+        <div className="mb-4">
+          <label className="block text-[12px] font-600 text-text-2 mb-1.5">Avatar</label>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={avatarSeed}
+              onChange={(e) => setAvatarSeed(e.target.value)}
+              placeholder="Avatar seed (any text)"
+              className="flex-1 px-3 py-2 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[13px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+            />
+            <button
+              type="button"
+              onClick={() => setAvatarSeed(Math.random().toString(36).slice(2, 10))}
+              className="px-3 py-2 rounded-[8px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] shrink-0"
+            >
+              Randomize
+            </button>
+          </div>
+        </div>
+
+        {/* Name */}
+        <div className="mb-6">
+          <label className="block text-[12px] font-600 text-text-2 mb-1.5">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Your name"
+            className="w-full px-3 py-2 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[13px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+          />
+        </div>
+
+        {/* Save */}
+        <button
+          onClick={handleSave}
+          disabled={!name.trim() || saving}
+          className="w-full py-2.5 rounded-[8px] text-[13px] font-600 bg-accent-bright text-white hover:bg-accent-bright/90 transition-all disabled:opacity-50 cursor-pointer mb-4"
+        >
+          {saving ? 'Saving...' : 'Save'}
+        </button>
+
+        {/* Sign out */}
+        <button
+          onClick={handleSignOut}
+          className="w-full text-center text-[12px] text-text-3 hover:text-text-2 transition-all cursor-pointer bg-transparent border-none"
+        >
+          Sign in as different user
+        </button>
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/shared/reply-quote.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+interface Props {
+  senderName: string
+  text: string
+  onClick?: () => void
+}
+
+export function ReplyQuote({ senderName, text, onClick }: Props) {
+  const truncated = text.length > 120 ? text.slice(0, 120) + '...' : text
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-start gap-2 mb-1.5 text-left w-full bg-transparent border-none p-0 cursor-pointer group/reply"
+    >
+      <div className="w-0.5 shrink-0 self-stretch rounded-full bg-accent-bright/50" />
+      <div className="min-w-0 flex-1">
+        <span className="text-[11px] font-600 text-accent-bright">{senderName}</span>
+        <p className="text-[12px] text-text-3 leading-[1.4] break-words m-0 group-hover/reply:text-text-2 transition-colors">
+          {truncated}
+        </p>
+      </div>
+    </button>
+  )
+}

package/src/components/shared/search-dialog.tsx

@@ -7,11 +7,12 @@ import { api } from '@/lib/api-client'
 import type { AppView } from '@/types'
 
 interface SearchResult {
-  type: 'task' | 'agent' | 'session' | 'schedule' | 'webhook' | 'skill'
+  type: 'task' | 'agent' | 'session' | 'schedule' | 'webhook' | 'skill' | 'message'
   id: string
   title: string
   description?: string
   status?: string
+  messageIndex?: number
 }
 
 const TYPE_ICONS: Record<SearchResult['type'], string> = {
@@ -21,11 +22,13 @@ const TYPE_ICONS: Record<SearchResult['type'], string> = {
   schedule: 'M12 6v6l4 2',
   webhook: 'M22 12h-4l-3 7L9 5l-3 7H2',
   skill: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z',
+  message: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
 }
 
 const TYPE_EXTRA_PATHS: Partial<Record<SearchResult['type'], string>> = {
   agent: 'M12 7a4 4 0 1 0 0-0.01',
   schedule: 'M12 12a10 10 0 1 0 0-0.01',
+  message: 'M8 10h8',
 }
 
 const TYPE_VIEW_MAP: Record<SearchResult['type'], AppView> = {
@@ -35,15 +38,17 @@ const TYPE_VIEW_MAP: Record<SearchResult['type'], AppView> = {
   schedule: 'schedules',
   webhook: 'webhooks',
   skill: 'skills',
+  message: 'agents',
 }
 
 const TYPE_LABELS: Record<SearchResult['type'], string> = {
   agent: 'Agent',
   task: 'Task',
-  session: 'Session',
+  session: 'Chat',
   schedule: 'Schedule',
   webhook: 'Webhook',
   skill: 'Skill',
+  message: 'Message',
 }
 
 export function SearchDialog() {
@@ -68,7 +73,7 @@ export function SearchDialog() {
   const setWebhookSheetOpen = useAppStore((s) => s.setWebhookSheetOpen)
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
   const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
-  const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
 
   // Global Cmd+K / Ctrl+K listener
   useEffect(() => {
@@ -141,7 +146,11 @@ export function SearchDialog() {
         setTaskSheetOpen(true)
         break
       case 'session':
-        void setCurrentAgent(null)
+        setCurrentSession(result.id)
+        setActiveView('agents')
+        break
+      case 'message':
+        setCurrentSession(result.id)
         setActiveView('agents')
         break
       case 'schedule':
@@ -235,7 +244,7 @@ export function SearchDialog() {
             >
               {/* Type icon */}
               <div className={`w-8 h-8 rounded-[8px] flex items-center justify-center shrink-0
-                ${idx === selectedIdx ? 'bg-[#6366F1]/20' : 'bg-white/[0.04]'}`}>
+                ${idx === selectedIdx ? 'bg-accent-bright/20' : 'bg-white/[0.04]'}`}>
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
                   className={idx === selectedIdx ? 'text-[#818CF8]' : 'text-text-3'}>
                   <path d={TYPE_ICONS[result.type]} />

package/src/components/shared/section-label.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  children: React.ReactNode
+  className?: string
+}
+
+export function SectionLabel({ children, className = '' }: Props) {
+  return (
+    <label className={`block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3 ${className}`}>
+      {children}
+    </label>
+  )
+}

package/src/components/shared/settings/plugin-manager.tsx

@@ -103,7 +103,7 @@ export function PluginManager() {
                   <div
                     onClick={() => togglePlugin(p.filename, !p.enabled)}
                     className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                      ${p.enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                      ${p.enabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                   >
                     <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                       ${p.enabled ? 'left-[22px]' : 'left-0.5'}`} />

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>