@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -1,6 +1,9 @@
 'use client'
 
+import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import toast from 'react-hot-toast'
 import { ModelCombobox } from '@/components/shared/model-combobox'
 import { NON_LANGGRAPH_PROVIDER_IDS } from '@/lib/provider-sets'
 import type { SettingsSectionProps } from './types'
@@ -8,7 +11,12 @@ import type { SettingsSectionProps } from './types'
 export function OrchestratorSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const providers = useAppStore((s) => s.providers)
   const credentials = useAppStore((s) => s.credentials)
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
   const credList = Object.values(credentials)
+  const [addingKey, setAddingKey] = useState(false)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [newKeyValue, setNewKeyValue] = useState('')
+  const [savingKey, setSavingKey] = useState(false)
 
   const lgProviders = providers.filter((p) => !NON_LANGGRAPH_PROVIDER_IDS.has(String(p.id)))
   const hasConfiguredLgProvider = !!appSettings.langGraphProvider && lgProviders.some((p) => p.id === appSettings.langGraphProvider)
@@ -82,22 +90,45 @@ export function OrchestratorSection({ appSettings, patchSettings, inputClass }:
         {/* API Key picker */}
         <div>
           <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">API Key</label>
-          {lgCredentials.length > 0 ? (
-            <select
-              value={appSettings.langGraphCredentialId || ''}
-              onChange={(e) => patchSettings({ langGraphCredentialId: e.target.value || null })}
-              className={`${inputClass} appearance-none cursor-pointer`}
-              style={{ fontFamily: 'inherit' }}
-            >
-              <option value="">Select a key...</option>
-              {lgCredentials.map((c) => (
-                <option key={c.id} value={c.id}>{c.name}</option>
-              ))}
-            </select>
+          {lgCredentials.length > 0 && !addingKey ? (
+            <div className="flex gap-2 items-center">
+              <select
+                value={appSettings.langGraphCredentialId || ''}
+                onChange={(e) => patchSettings({ langGraphCredentialId: e.target.value || null })}
+                className={`${inputClass} appearance-none cursor-pointer flex-1`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                <option value="">Select a key...</option>
+                {lgCredentials.map((c) => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+              <button type="button" onClick={() => setAddingKey(true)} className="text-accent-bright text-[11px] font-600 cursor-pointer bg-transparent border-none hover:brightness-110 transition-all" style={{ fontFamily: 'inherit' }}>+ New</button>
+            </div>
           ) : (
-            <p className="text-[12px] text-text-3/60">
-              No {lgProvider} API keys configured. Add one below in the Providers section.
-            </p>
+            <div className="space-y-2">
+              <input type="text" value={newKeyName} onChange={e => setNewKeyName(e.target.value)} placeholder="Key name (optional)" className={inputClass} style={{ fontFamily: 'inherit' }} />
+              <input type="password" value={newKeyValue} onChange={e => setNewKeyValue(e.target.value)} placeholder="sk-..." className={inputClass} style={{ fontFamily: 'inherit' }} />
+              <div className="flex gap-2">
+                <button type="button" disabled={savingKey || !newKeyValue.trim()} onClick={async () => {
+                  setSavingKey(true)
+                  try {
+                    const cred = await api<{ id: string }>('POST', '/credentials', { provider: lgProvider, name: newKeyName.trim() || `${lgProvider} key`, apiKey: newKeyValue.trim() })
+                    await loadCredentials()
+                    patchSettings({ langGraphCredentialId: cred.id })
+                    setAddingKey(false)
+                    setNewKeyName('')
+                    setNewKeyValue('')
+                  } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`) }
+                  finally { setSavingKey(false) }
+                }} className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40" style={{ fontFamily: 'inherit' }}>
+                  {savingKey ? 'Saving...' : 'Save Key'}
+                </button>
+                {lgCredentials.length > 0 && (
+                  <button type="button" onClick={() => { setAddingKey(false); setNewKeyName(''); setNewKeyValue('') }} className="px-4 py-1.5 rounded-[8px] bg-surface-2 text-text-2 text-[12px] font-600 cursor-pointer border-none hover:bg-surface-3 transition-all" style={{ fontFamily: 'inherit' }}>Cancel</button>
+                )}
+              </div>
+            </div>
           )}
         </div>
       </div>

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-storage.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+import { StorageBrowser } from './storage-browser'
+import type { SettingsSectionProps } from './types'
+
+interface UploadFile {
+  name: string
+  size: number
+  modified: number
+  category: string
+  url: string
+}
+
+interface UploadsResponse {
+  files: UploadFile[]
+  totalSize: number
+  count: number
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const value = bytes / Math.pow(1024, i)
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`
+}
+
+export function StorageSection(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _props: SettingsSectionProps,
+) {
+  const [data, setData] = useState<UploadsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [browserOpen, setBrowserOpen] = useState(false)
+  const [confirmAction, setConfirmAction] = useState<'clearOld' | 'clearAll' | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const fetchFiles = useCallback(async () => {
+    try {
+      setLoading(true)
+      const res = await api<UploadsResponse>('GET', '/uploads')
+      setData(res)
+    } catch {
+      // silent — section just shows empty
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchFiles()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleBulkDelete = useCallback(async (filenames: string[]) => {
+    try {
+      await api('DELETE', '/uploads', { filenames })
+      await fetchFiles()
+    } catch {
+      // silent
+    }
+  }, [fetchFiles])
+
+  const handleConfirmAction = useCallback(async () => {
+    if (!confirmAction) return
+    setDeleting(true)
+    try {
+      if (confirmAction === 'clearOld') {
+        await api('DELETE', '/uploads', { olderThanDays: 30 })
+      } else {
+        await api('DELETE', '/uploads', { all: true })
+      }
+      await fetchFiles()
+    } catch {
+      // silent
+    } finally {
+      setDeleting(false)
+      setConfirmAction(null)
+    }
+  }, [confirmAction, fetchFiles])
+
+  // Breakdown by category
+  const breakdown = data?.files.reduce<Record<string, { count: number; size: number }>>((acc, f) => {
+    if (!acc[f.category]) acc[f.category] = { count: 0, size: 0 }
+    acc[f.category].count += 1
+    acc[f.category].size += f.size
+    return acc
+  }, {}) ?? {}
+
+  const CATEGORY_LABELS: Record<string, string> = {
+    image: 'Images',
+    video: 'Videos',
+    audio: 'Audio',
+    document: 'Documents',
+    archive: 'Archives',
+    other: 'Other',
+  }
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Storage
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Uploaded files from agent tools (screenshots, images, documents). Manage disk usage.
+      </p>
+
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        {/* Summary */}
+        {loading ? (
+          <div className="text-[13px] text-text-3/60 animate-pulse">Loading storage info...</div>
+        ) : (
+          <>
+            <div className="flex items-baseline gap-3 mb-4">
+              <span className="font-display text-[28px] font-700 tracking-[-0.02em] text-text">
+                {formatBytes(data?.totalSize ?? 0)}
+              </span>
+              <span className="text-[13px] text-text-3">
+                {data?.count ?? 0} file{data?.count !== 1 ? 's' : ''}
+              </span>
+            </div>
+
+            {/* Category breakdown */}
+            {Object.keys(breakdown).length > 0 && (
+              <div className="flex flex-wrap gap-x-4 gap-y-1 mb-5">
+                {Object.entries(breakdown).map(([cat, info]) => (
+                  <span key={cat} className="text-[11px] text-text-3/70">
+                    {CATEGORY_LABELS[cat] || cat}: {info.count} ({formatBytes(info.size)})
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => setBrowserOpen(true)}
+                disabled={!data?.count}
+                className="px-4 py-2.5 rounded-[12px] bg-accent-soft text-accent-bright text-[12px] font-600 cursor-pointer
+                  hover:brightness-110 active:scale-[0.97] transition-all border border-accent-bright/20
+                  disabled:opacity-40 disabled:cursor-not-allowed"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Manage Files
+              </button>
+              <button
+                onClick={() => setConfirmAction('clearOld')}
+                disabled={!data?.count}
+                className="px-4 py-2.5 rounded-[12px] bg-white/[0.04] text-text-2 text-[12px] font-600 cursor-pointer
+                  hover:bg-white/[0.06] active:scale-[0.97] transition-all border border-white/[0.06]
+                  disabled:opacity-40 disabled:cursor-not-allowed"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Clear Old Files
+              </button>
+              <button
+                onClick={() => setConfirmAction('clearAll')}
+                disabled={!data?.count}
+                className="px-4 py-2.5 rounded-[12px] bg-danger/10 text-danger text-[12px] font-600 cursor-pointer
+                  hover:bg-danger/20 active:scale-[0.97] transition-all border border-danger/20
+                  disabled:opacity-40 disabled:cursor-not-allowed"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Clear All
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* File browser sheet */}
+      <BottomSheet open={browserOpen} onClose={() => setBrowserOpen(false)} wide>
+        {data && (
+          <StorageBrowser
+            files={data.files}
+            onDelete={handleBulkDelete}
+          />
+        )}
+      </BottomSheet>
+
+      {/* Confirm dialogs */}
+      <ConfirmDialog
+        open={confirmAction === 'clearOld'}
+        title="Clear Old Files"
+        message="Delete all uploaded files older than 30 days? This cannot be undone."
+        confirmLabel={deleting ? 'Deleting...' : 'Delete Old Files'}
+        danger
+        onConfirm={handleConfirmAction}
+        onCancel={() => setConfirmAction(null)}
+      />
+      <ConfirmDialog
+        open={confirmAction === 'clearAll'}
+        title="Clear All Files"
+        message="Delete ALL uploaded files? This will free up all storage but cannot be undone."
+        confirmLabel={deleting ? 'Deleting...' : 'Delete All'}
+        danger
+        onConfirm={handleConfirmAction}
+        onCancel={() => setConfirmAction(null)}
+      />
+    </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,58 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
         className={`${inputClass} resize-y min-h-[100px]`}
         style={{ fontFamily: 'inherit' }}
       />
+
+      {/* Suggested replies toggle */}
+      <div className="mt-6 flex items-center justify-between">
+        <div>
+          <label className="text-[12px] font-600 text-text-2 block">Suggested Replies</label>
+          <p className="text-[11px] text-text-3/60 mt-0.5">
+            Show follow-up suggestions after each agent response.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => patchSettings({ suggestionsEnabled: appSettings.suggestionsEnabled === false })}
+          className={`relative w-9 h-5 rounded-full transition-colors ${appSettings.suggestionsEnabled !== false ? 'bg-accent-bright' : 'bg-white/[0.10]'}`}
+          style={{ fontFamily: 'inherit' }}
+        >
+          <span className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${appSettings.suggestionsEnabled !== false ? 'translate-x-4' : ''}`} />
+        </button>
+      </div>
+
+      {/* 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/section-voice.tsx

@@ -3,6 +3,8 @@
 import type { SettingsSectionProps } from './types'
 
 export function VoiceSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const enabled = appSettings.elevenLabsEnabled ?? false
+
   return (
     <div className="mb-10">
       <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -12,30 +14,49 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
         Configure voice playback (TTS) and speech-to-text input.
       </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">ElevenLabs API Key</label>
-            <input
-              type="password"
-              value={appSettings.elevenLabsApiKey || ''}
-              onChange={(e) => patchSettings({ elevenLabsApiKey: e.target.value || null })}
-              placeholder="sk_..."
-              className={inputClass}
-              style={{ fontFamily: 'inherit' }}
-            />
-          </div>
+        {/* ElevenLabs toggle */}
+        <div className="flex items-center justify-between mb-5">
           <div>
-            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">ElevenLabs Voice ID</label>
-            <input
-              type="text"
-              value={appSettings.elevenLabsVoiceId || ''}
-              onChange={(e) => patchSettings({ elevenLabsVoiceId: e.target.value || null })}
-              placeholder="JBFqnCBsd6RMkjVDRZzb"
-              className={inputClass}
-              style={{ fontFamily: 'inherit' }}
-            />
+            <label className="font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em]">ElevenLabs TTS</label>
+            <p className="text-[11px] text-text-3/60 mt-0.5">Enable text-to-speech for agent responses</p>
           </div>
+          <button
+            type="button"
+            onClick={() => patchSettings({ elevenLabsEnabled: !enabled })}
+            className={`relative w-10 h-[22px] rounded-full transition-colors cursor-pointer border-none ${enabled ? 'bg-accent-bright' : 'bg-surface-3'}`}
+          >
+            <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform ${enabled ? 'translate-x-[18px]' : ''}`} />
+          </button>
         </div>
+
+        {enabled && (
+          <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">API Key</label>
+              <input
+                type="password"
+                value={appSettings.elevenLabsApiKey || ''}
+                onChange={(e) => patchSettings({ elevenLabsApiKey: e.target.value || null })}
+                placeholder="sk_..."
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Default Voice ID</label>
+              <input
+                type="text"
+                value={appSettings.elevenLabsVoiceId || ''}
+                onChange={(e) => patchSettings({ elevenLabsVoiceId: e.target.value || null })}
+                placeholder="JBFqnCBsd6RMkjVDRZzb"
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+              <p className="text-[11px] text-text-3/60 mt-1.5">Fallback voice when an agent has no override set.</p>
+            </div>
+          </div>
+        )}
+
         <div>
           <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Speech Recognition Language</label>
           <input

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

@@ -26,8 +26,8 @@ export function WebSearchSection({ appSettings, patchSettings, inputClass }: Set
             <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>
+            <option value="tavily">Tavily (API key required)</option>
+            <option value="brave">Brave Search (API key required)</option>
           </select>
         </div>
 
@@ -45,10 +45,34 @@ export function WebSearchSection({ appSettings, patchSettings, inputClass }: Set
           </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>
+        {provider === 'tavily' && (
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Tavily API Key</label>
+            <input
+              type="password"
+              value={appSettings.tavilyApiKey || ''}
+              onChange={(e) => patchSettings({ tavilyApiKey: e.target.value || null })}
+              placeholder="tvly-..."
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Get your API key from <a href="https://tavily.com" target="_blank" rel="noopener noreferrer" className="text-accent-bright hover:underline">tavily.com</a></p>
+          </div>
+        )}
+
+        {provider === 'brave' && (
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Brave Search API Key</label>
+            <input
+              type="password"
+              value={appSettings.braveApiKey || ''}
+              onChange={(e) => patchSettings({ braveApiKey: e.target.value || null })}
+              placeholder="BSA..."
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Get your API key from <a href="https://brave.com/search/api/" target="_blank" rel="noopener noreferrer" className="text-accent-bright hover:underline">brave.com/search/api</a></p>
+          </div>
         )}
       </div>
     </div>