@swarmclawai/swarmclaw 0.6.0 → 0.6.2

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>

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

@@ -8,6 +8,7 @@ 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'
@@ -28,7 +29,7 @@ const TABS: Tab[] = [
   {
     id: 'general',
     label: 'General',
-    keywords: ['preferences', 'user', 'language', 'default', 'capability', 'policy', 'permissions', 'tools'],
+    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>,
   },
   {
@@ -180,6 +181,7 @@ export function SettingsPage() {
             <>
               <UserPreferencesSection {...sectionProps} />
               <CapabilityPolicySection {...sectionProps} />
+              <StorageSection {...sectionProps} />
             </>
           )}
 

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/tasks/task-card.tsx

@@ -34,6 +34,14 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
   const agent = agents[task.agentId]
   const project = task.projectId ? projects[task.projectId] : null
 
+  const priorityConfig = {
+    critical: { label: 'Critical', cls: 'bg-red-500/10 text-red-400' },
+    high: { label: 'High', cls: 'bg-orange-500/10 text-orange-400' },
+    medium: { label: 'Med', cls: 'bg-amber-500/10 text-amber-400' },
+    low: { label: 'Low', cls: 'bg-sky-500/10 text-sky-400' },
+  } as const
+  const prio = task.priority && priorityConfig[task.priority]
+
   const isBlocked = Array.isArray(task.blockedBy) && task.blockedBy.length > 0
   const isOverdue = task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
   const borderColor = isBlocked ? 'border-l-rose-500'
@@ -86,7 +94,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
           setTaskSheetOpen(true)
         }
       }}
-      className={`p-4 rounded-[14px] border border-l-[3px] ${borderColor} bg-surface hover:bg-surface-2 transition-all group
+      className={`py-3 px-4 rounded-[14px] border border-l-[3px] ${borderColor} bg-surface hover:bg-surface-2 transition-all group
         ${selectionMode ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing'}
         ${dragging ? 'opacity-40 scale-[0.97]' : ''}
         ${selected ? 'border-accent-bright/40 bg-accent-bright/[0.04] ring-1 ring-accent-bright/20' : 'border-white/[0.06]'}`}
@@ -114,6 +122,11 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
           </svg>
         )}
         <h4 className="flex-1 text-[14px] font-600 text-text leading-[1.4] line-clamp-2">{task.title}</h4>
+        {prio && (
+          <span className={`px-1.5 py-0.5 rounded-[5px] text-[10px] font-600 shrink-0 ${prio.cls}`}>
+            {prio.label}
+          </span>
+        )}
         {isBlocked && (
           <span className="px-1.5 py-0.5 rounded-[5px] bg-rose-500/10 text-rose-400 text-[10px] font-600 shrink-0">
             {task.blockedBy?.length}