@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -1,12 +1,14 @@
 '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'
+import { StorageSection } from './section-storage'
 import { VoiceSection } from './section-voice'
 import { WebSearchSection } from './section-web-search'
 import { HeartbeatSection } from './section-heartbeat'
@@ -16,6 +18,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', 'storage', 'uploads', 'disk', 'files', 'cleanup'],
+    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 +67,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 +93,135 @@ 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} />
+              <StorageSection {...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/settings/storage-browser.tsx

@@ -0,0 +1,259 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+
+interface UploadFile {
+  name: string
+  size: number
+  modified: number
+  category: string
+  url: string
+}
+
+type SortField = 'modified' | 'size' | 'name'
+
+interface Props {
+  files: UploadFile[]
+  onDelete: (filenames: string[]) => void
+}
+
+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]}`
+}
+
+function formatDate(ms: number): string {
+  const d = new Date(ms)
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+const CATEGORY_ICONS: Record<string, string> = {
+  image: '\u{1F5BC}',
+  video: '\u{1F3AC}',
+  audio: '\u{1F3B5}',
+  document: '\u{1F4C4}',
+  archive: '\u{1F4E6}',
+  other: '\u{1F4CE}',
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  image: 'Images',
+  video: 'Videos',
+  audio: 'Audio',
+  document: 'Docs',
+  archive: 'Archives',
+  other: 'Other',
+}
+
+export function StorageBrowser({ files, onDelete }: Props) {
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [sortBy, setSortBy] = useState<SortField>('modified')
+  const [filterCategory, setFilterCategory] = useState<string | null>(null)
+  const [confirmDelete, setConfirmDelete] = useState<string[] | null>(null)
+
+  const categories = useMemo(() => {
+    const cats = new Set<string>()
+    for (const f of files) cats.add(f.category)
+    return Array.from(cats).sort()
+  }, [files])
+
+  const filtered = useMemo(() => {
+    let list = filterCategory ? files.filter((f) => f.category === filterCategory) : files
+    list = [...list].sort((a, b) => {
+      if (sortBy === 'modified') return b.modified - a.modified
+      if (sortBy === 'size') return b.size - a.size
+      return a.name.localeCompare(b.name)
+    })
+    return list
+  }, [files, filterCategory, sortBy])
+
+  const totalSize = useMemo(() => files.reduce((s, f) => s + f.size, 0), [files])
+
+  const toggleSelect = (name: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(name)) next.delete(name)
+      else next.add(name)
+      return next
+    })
+  }
+
+  const toggleSelectAll = () => {
+    if (selected.size === filtered.length) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(filtered.map((f) => f.name)))
+    }
+  }
+
+  const handleDeleteSelected = () => {
+    const names = Array.from(selected)
+    if (names.length > 0) setConfirmDelete(names)
+  }
+
+  const executeDelete = () => {
+    if (confirmDelete) {
+      onDelete(confirmDelete)
+      setSelected((prev) => {
+        const next = new Set(prev)
+        for (const name of confirmDelete) next.delete(name)
+        return next
+      })
+      setConfirmDelete(null)
+    }
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <div>
+          <h3 className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">File Browser</h3>
+          <p className="text-[12px] text-text-3 mt-0.5">
+            {files.length} file{files.length !== 1 ? 's' : ''} &middot; {formatBytes(totalSize)}
+          </p>
+        </div>
+        <select
+          value={sortBy}
+          onChange={(e) => setSortBy(e.target.value as SortField)}
+          className="px-3 py-1.5 rounded-[10px] border border-white/[0.08] bg-bg text-text text-[12px] outline-none cursor-pointer"
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="modified">Newest first</option>
+          <option value="size">Largest first</option>
+          <option value="name">Name A-Z</option>
+        </select>
+      </div>
+
+      {/* Category filters */}
+      <div className="flex gap-1.5 mb-4 flex-wrap">
+        <button
+          onClick={() => setFilterCategory(null)}
+          className={`px-3 py-1 rounded-full text-[11px] font-600 cursor-pointer transition-all border
+            ${!filterCategory
+              ? 'bg-accent-soft border-accent-bright/30 text-accent-bright'
+              : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.04]'}`}
+          style={{ fontFamily: 'inherit' }}
+        >
+          All
+        </button>
+        {categories.map((cat) => (
+          <button
+            key={cat}
+            onClick={() => setFilterCategory(filterCategory === cat ? null : cat)}
+            className={`px-3 py-1 rounded-full text-[11px] font-600 cursor-pointer transition-all border
+              ${filterCategory === cat
+                ? 'bg-accent-soft border-accent-bright/30 text-accent-bright'
+                : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.04]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {CATEGORY_ICONS[cat] || ''} {CATEGORY_LABELS[cat] || cat}
+          </button>
+        ))}
+      </div>
+
+      {/* Select all */}
+      {filtered.length > 0 && (
+        <div className="flex items-center gap-2 mb-3">
+          <button
+            onClick={toggleSelectAll}
+            className="text-[11px] text-accent-bright hover:underline cursor-pointer bg-transparent border-none"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {selected.size === filtered.length ? 'Deselect all' : 'Select all'}
+          </button>
+          {selected.size > 0 && (
+            <span className="text-[11px] text-text-3">
+              {selected.size} selected
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* File grid */}
+      {filtered.length === 0 ? (
+        <div className="py-12 text-center text-[13px] text-text-3/60">
+          {files.length === 0 ? 'No uploaded files.' : 'No files match this filter.'}
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-[400px] overflow-y-auto pr-1">
+          {filtered.map((file) => (
+            <div
+              key={file.name}
+              onClick={() => toggleSelect(file.name)}
+              className={`relative p-3 rounded-[14px] border cursor-pointer transition-all
+                ${selected.has(file.name)
+                  ? 'border-accent-bright/40 bg-accent-soft/30'
+                  : 'border-white/[0.06] bg-surface hover:border-white/[0.12]'}`}
+            >
+              {/* Checkbox */}
+              <div className={`absolute top-2 right-2 w-4 h-4 rounded-[5px] border transition-all flex items-center justify-center
+                ${selected.has(file.name)
+                  ? 'border-accent-bright bg-accent-bright'
+                  : 'border-white/[0.15] bg-transparent'}`}
+              >
+                {selected.has(file.name) && (
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                )}
+              </div>
+
+              {/* Thumbnail / icon */}
+              <div className="w-full aspect-square rounded-[10px] bg-white/[0.03] mb-2 flex items-center justify-center overflow-hidden">
+                {file.category === 'image' ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={file.url}
+                    alt={file.name}
+                    className="w-full h-full object-cover rounded-[10px]"
+                    loading="lazy"
+                  />
+                ) : (
+                  <span className="text-[28px]">{CATEGORY_ICONS[file.category] || CATEGORY_ICONS.other}</span>
+                )}
+              </div>
+
+              {/* Meta */}
+              <p className="text-[11px] font-600 text-text truncate" title={file.name}>{file.name}</p>
+              <p className="text-[10px] text-text-3/60 mt-0.5">
+                {formatBytes(file.size)} &middot; {formatDate(file.modified)}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Bulk delete footer */}
+      {selected.size > 0 && (
+        <div className="mt-4 pt-4 border-t border-white/[0.06] flex items-center justify-between">
+          <span className="text-[12px] text-text-3">
+            {selected.size} file{selected.size !== 1 ? 's' : ''} selected
+          </span>
+          <button
+            onClick={handleDeleteSelected}
+            className="px-4 py-2 rounded-[10px] bg-danger text-white text-[12px] font-600 cursor-pointer
+              hover:brightness-110 active:scale-[0.97] transition-all border-none"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Delete Selected
+          </button>
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={!!confirmDelete}
+        title="Delete Files"
+        message={`Permanently delete ${confirmDelete?.length ?? 0} file${(confirmDelete?.length ?? 0) !== 1 ? 's' : ''}? This cannot be undone.`}
+        confirmLabel="Delete"
+        danger
+        onConfirm={executeDelete}
+        onCancel={() => setConfirmDelete(null)}
+      />
+    </div>
+  )
+}

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>
+  )
+}