@swarmclawai/swarmclaw 0.6.0 → 0.6.2

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

@@ -76,10 +76,57 @@ export function ConnectorPlatformIcon({
       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}>
-          <path d="M4 17l2-5 2 5" /><path d="M12 17l2-5 2 5" /><path d="M20 17l-2-5-2 5" />
-          <path d="M2 7l4-4 3 3" /><path d="M22 7l-4-4-3 3" />
-          <line x1="12" y1="3" x2="12" y2="8" />
+        <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden className={className}>
+          {/* OpenClaw pixel lobster mark */}
+          <g fill="#3a0a0d">
+            <rect x="1" y="5" width="1" height="3" />
+            <rect x="2" y="4" width="1" height="1" />
+            <rect x="2" y="8" width="1" height="1" />
+            <rect x="3" y="3" width="1" height="1" />
+            <rect x="3" y="9" width="1" height="1" />
+            <rect x="4" y="2" width="1" height="1" />
+            <rect x="4" y="10" width="1" height="1" />
+            <rect x="5" y="2" width="6" height="1" />
+            <rect x="11" y="2" width="1" height="1" />
+            <rect x="12" y="3" width="1" height="1" />
+            <rect x="12" y="9" width="1" height="1" />
+            <rect x="13" y="4" width="1" height="1" />
+            <rect x="13" y="8" width="1" height="1" />
+            <rect x="14" y="5" width="1" height="3" />
+            <rect x="5" y="11" width="6" height="1" />
+            <rect x="4" y="12" width="1" height="1" />
+            <rect x="11" y="12" width="1" height="1" />
+            <rect x="3" y="13" width="1" height="1" />
+            <rect x="12" y="13" width="1" height="1" />
+            <rect x="5" y="14" width="6" height="1" />
+          </g>
+          <g fill="#ff4f40">
+            <rect x="5" y="3" width="6" height="1" />
+            <rect x="4" y="4" width="8" height="1" />
+            <rect x="3" y="5" width="10" height="1" />
+            <rect x="3" y="6" width="10" height="1" />
+            <rect x="3" y="7" width="10" height="1" />
+            <rect x="4" y="8" width="8" height="1" />
+            <rect x="5" y="9" width="6" height="1" />
+            <rect x="5" y="12" width="6" height="1" />
+            <rect x="6" y="13" width="4" height="1" />
+          </g>
+          <g fill="#ff775f">
+            <rect x="1" y="6" width="2" height="1" />
+            <rect x="2" y="5" width="1" height="1" />
+            <rect x="2" y="7" width="1" height="1" />
+            <rect x="13" y="6" width="2" height="1" />
+            <rect x="13" y="5" width="1" height="1" />
+            <rect x="13" y="7" width="1" height="1" />
+          </g>
+          <g fill="#081016">
+            <rect x="6" y="5" width="1" height="1" />
+            <rect x="9" y="5" width="1" height="1" />
+          </g>
+          <g fill="#f5fbff">
+            <rect x="6" y="4" width="1" height="1" />
+            <rect x="9" y="4" width="1" height="1" />
+          </g>
         </svg>
       )
     default:

package/src/components/shared/icon-button.tsx

@@ -1,15 +1,17 @@
 'use client'
 
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode
   variant?: 'default' | 'accent' | 'danger'
   active?: boolean
   size?: 'sm' | 'md'
+  tooltip?: string
 }
 
-export function IconButton({ children, variant = 'default', active, size = 'md', className = '', ...props }: Props) {
+export function IconButton({ children, variant = 'default', active, size = 'md', className = '', tooltip, ...props }: Props) {
   const sizeClass = size === 'sm' ? 'w-8 h-8 rounded-[9px]' : 'w-9 h-9 rounded-[10px]'
   const base = `${sizeClass} border-none bg-transparent flex items-center justify-center cursor-pointer shrink-0 transition-all duration-200 hover:bg-white/[0.06] active:scale-90`
   const color =
@@ -17,9 +19,21 @@ export function IconButton({ children, variant = 'default', active, size = 'md',
     variant === 'danger' ? 'text-danger' :
     active ? 'text-accent-bright bg-accent-soft' : 'text-text-3 hover:text-text-2'
 
-  return (
+  const btn = (
     <button className={`${base} ${color} ${className}`} {...props}>
       {children}
     </button>
   )
+
+  if (!tooltip) return btn
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{btn}</TooltipTrigger>
+      <TooltipContent side="bottom" sideOffset={6}
+        className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[8px] px-2.5 py-1.5 text-[11px]">
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  )
 }

package/src/components/shared/keyboard-shortcuts-dialog.tsx

@@ -77,7 +77,7 @@ export function KeyboardShortcutsDialog() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         showCloseButton={false}
-        className="sm:max-w-[420px] p-0 bg-[#1a1a2e]/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+        className="sm:max-w-[420px] p-0 bg-surface/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
       >
         <DialogTitle className="sr-only">Keyboard shortcuts</DialogTitle>
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-white/[0.06]">

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

@@ -96,12 +96,12 @@ export function SearchDialog() {
 
   // Reset on open
   useEffect(() => {
-    if (open) {
-      setQuery('')
-      setResults([])
-      setSelectedIdx(0)
-      setTimeout(() => inputRef.current?.focus(), 50)
-    }
+    if (!open) return
+    setQuery('')
+    setResults([])
+    setSelectedIdx(0)
+    const timer = setTimeout(() => inputRef.current?.focus(), 50)
+    return () => clearTimeout(timer)
   }, [open])
 
   // Debounced search
@@ -152,6 +152,12 @@ export function SearchDialog() {
       case 'message':
         setCurrentSession(result.id)
         setActiveView('agents')
+        // Scroll to the matched message after the chat renders
+        if (result.messageIndex != null) {
+          setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('swarmclaw:scroll-to-message', { detail: { index: result.messageIndex } }))
+          }, 300)
+        }
         break
       case 'schedule':
         setEditingScheduleId(result.id)
@@ -194,7 +200,7 @@ export function SearchDialog() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         showCloseButton={false}
-        className="sm:max-w-[520px] p-0 bg-[#1a1a2e]/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+        className="sm:max-w-[520px] p-0 bg-surface/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
         onKeyDown={handleKeyDown}
       >
         <DialogTitle className="sr-only">Search</DialogTitle>
@@ -208,6 +214,7 @@ export function SearchDialog() {
             value={query}
             onChange={(e) => handleQueryChange(e.target.value)}
             placeholder="Search agents, tasks, schedules..."
+            aria-label="Search"
             className="flex-1 bg-transparent border-none outline-none text-[14px] text-text placeholder:text-text-3/60 font-[inherit]"
             autoFocus
           />
@@ -235,10 +242,10 @@ export function SearchDialog() {
           )}
           {results.map((result, idx) => (
             <button
-              key={`${result.type}-${result.id}`}
+              key={result.type === 'message' ? `${result.type}-${result.id}-${result.messageIndex}` : `${result.type}-${result.id}`}
               onClick={() => navigateTo(result)}
               onMouseEnter={() => setSelectedIdx(idx)}
-              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors border-none bg-transparent
+              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors border-none bg-transparent focus-visible:ring-1 focus-visible:ring-accent-bright/50 focus-visible:ring-inset
                 ${idx === selectedIdx ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`}
               style={{ fontFamily: 'inherit' }}
             >
@@ -246,7 +253,7 @@ export function SearchDialog() {
               <div className={`w-8 h-8 rounded-[8px] flex items-center justify-center shrink-0
                 ${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'}>
+                  className={idx === selectedIdx ? 'text-accent-bright' : 'text-text-3'}>
                   <path d={TYPE_ICONS[result.type]} />
                   {TYPE_EXTRA_PATHS[result.type] && <path d={TYPE_EXTRA_PATHS[result.type]} />}
                 </svg>

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

@@ -1,5 +1,9 @@
 'use client'
 
+import { useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import toast from 'react-hot-toast'
 import type { SettingsSectionProps } from './types'
 
 interface EmbeddingSectionProps extends SettingsSectionProps {
@@ -7,6 +11,12 @@ interface EmbeddingSectionProps extends SettingsSectionProps {
 }
 
 export function EmbeddingSection({ appSettings, patchSettings, inputClass, credList }: EmbeddingSectionProps) {
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const [addingKey, setAddingKey] = useState(false)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [newKeyValue, setNewKeyValue] = useState('')
+  const [savingKey, setSavingKey] = useState(false)
+
   return (
     <div className="mb-10">
       <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -60,20 +70,45 @@ export function EmbeddingSection({ appSettings, patchSettings, inputClass, credL
             </div>
             <div>
               <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">API Key</label>
-              {credList.filter((c) => c.provider === 'openai').length > 0 ? (
-                <select
-                  value={appSettings.embeddingCredentialId || ''}
-                  onChange={(e) => patchSettings({ embeddingCredentialId: e.target.value || null })}
-                  className={`${inputClass} appearance-none cursor-pointer`}
-                  style={{ fontFamily: 'inherit' }}
-                >
-                  <option value="">Select a key...</option>
-                  {credList.filter((c) => c.provider === 'openai').map((c) => (
-                    <option key={c.id} value={c.id}>{c.name}</option>
-                  ))}
-                </select>
+              {credList.filter((c) => c.provider === 'openai').length > 0 && !addingKey ? (
+                <div className="flex gap-2 items-center">
+                  <select
+                    value={appSettings.embeddingCredentialId || ''}
+                    onChange={(e) => patchSettings({ embeddingCredentialId: e.target.value || null })}
+                    className={`${inputClass} appearance-none cursor-pointer flex-1`}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <option value="">Select a key...</option>
+                    {credList.filter((c) => c.provider === 'openai').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 OpenAI API keys configured.</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: 'openai', name: newKeyName.trim() || 'OpenAI key', apiKey: newKeyValue.trim() })
+                        await loadCredentials()
+                        patchSettings({ embeddingCredentialId: 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>
+                    {credList.filter(c => c.provider === 'openai').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>
           </>

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-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-user-preferences.tsx

@@ -25,6 +25,24 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
         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>