@swarmclawai/swarmclaw 0.6.0 → 0.6.2

package/src/app/api/uploads/[filename]/route.ts

@@ -3,40 +3,7 @@ import { notFound } from '@/lib/server/collection-helpers'
 import fs from 'fs'
 import path from 'path'
 import { UPLOAD_DIR } from '@/lib/server/storage'
-
-const MIME_TYPES: Record<string, string> = {
-  '.png': 'image/png',
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.gif': 'image/gif',
-  '.webp': 'image/webp',
-  '.svg': 'image/svg+xml',
-  '.bmp': 'image/bmp',
-  '.ico': 'image/x-icon',
-  '.mp4': 'video/mp4',
-  '.webm': 'video/webm',
-  '.mov': 'video/quicktime',
-  '.avi': 'video/x-msvideo',
-  '.mkv': 'video/x-matroska',
-  '.pdf': 'application/pdf',
-  '.json': 'application/json',
-  '.csv': 'text/csv',
-  '.txt': 'text/plain',
-  '.html': 'text/html',
-  '.xml': 'application/xml',
-  '.zip': 'application/zip',
-  '.tar': 'application/x-tar',
-  '.gz': 'application/gzip',
-  '.doc': 'application/msword',
-  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  '.xls': 'application/vnd.ms-excel',
-  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  '.ppt': 'application/vnd.ms-powerpoint',
-  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  '.mp3': 'audio/mpeg',
-  '.wav': 'audio/wav',
-  '.ogg': 'audio/ogg',
-}
+import { MIME_TYPES } from '@/lib/server/mime'
 
 export async function GET(_req: Request, { params }: { params: Promise<{ filename: string }> }) {
   const { filename } = await params
@@ -60,3 +27,21 @@ export async function GET(_req: Request, { params }: { params: Promise<{ filenam
     },
   })
 }
+
+export async function DELETE(_req: Request, { params }: { params: Promise<{ filename: string }> }) {
+  const { filename } = await params
+  const safeName = filename.replace(/[^a-zA-Z0-9._-]/g, '')
+
+  if (safeName.includes('..') || safeName.includes('/')) {
+    return NextResponse.json({ error: 'Invalid filename' }, { status: 400 })
+  }
+
+  const filePath = path.join(UPLOAD_DIR, safeName)
+
+  if (!fs.existsSync(filePath)) {
+    return notFound()
+  }
+
+  fs.unlinkSync(filePath)
+  return NextResponse.json({ ok: true })
+}

package/src/app/api/uploads/route.ts

@@ -0,0 +1,94 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+import { UPLOAD_DIR } from '@/lib/server/storage'
+import { getFileCategory } from '@/lib/server/mime'
+
+interface UploadFile {
+  name: string
+  size: number
+  modified: number
+  category: string
+  url: string
+}
+
+function listUploadFiles(): UploadFile[] {
+  if (!fs.existsSync(UPLOAD_DIR)) return []
+  const entries = fs.readdirSync(UPLOAD_DIR)
+  const files: UploadFile[] = []
+  for (const name of entries) {
+    const filePath = path.join(UPLOAD_DIR, name)
+    try {
+      const stat = fs.statSync(filePath)
+      if (!stat.isFile()) continue
+      const ext = path.extname(name).toLowerCase()
+      files.push({
+        name,
+        size: stat.size,
+        modified: stat.mtimeMs,
+        category: getFileCategory(ext),
+        url: `/api/uploads/${encodeURIComponent(name)}`,
+      })
+    } catch {
+      // skip files we can't stat
+    }
+  }
+  return files
+}
+
+export async function GET() {
+  const files = listUploadFiles()
+  const totalSize = files.reduce((sum, f) => sum + f.size, 0)
+  return NextResponse.json({ files, totalSize, count: files.length })
+}
+
+interface DeleteBody {
+  filenames?: string[]
+  olderThanDays?: number
+  category?: string
+  all?: boolean
+}
+
+function isUnsafeName(name: string): boolean {
+  return name.includes('/') || name.includes('\\') || name.includes('..')
+}
+
+export async function DELETE(req: Request) {
+  const body = (await req.json()) as DeleteBody
+  const files = listUploadFiles()
+  let toDelete: string[] = []
+
+  if (body.all) {
+    toDelete = files.map((f) => f.name)
+  } else if (body.filenames && Array.isArray(body.filenames)) {
+    for (const name of body.filenames) {
+      if (typeof name !== 'string' || isUnsafeName(name)) {
+        return NextResponse.json({ error: `Invalid filename: ${name}` }, { status: 400 })
+      }
+    }
+    toDelete = body.filenames
+  } else if (typeof body.olderThanDays === 'number') {
+    const cutoff = Date.now() - body.olderThanDays * 86_400_000
+    toDelete = files.filter((f) => f.modified < cutoff).map((f) => f.name)
+  } else if (typeof body.category === 'string') {
+    toDelete = files.filter((f) => f.category === body.category).map((f) => f.name)
+  } else {
+    return NextResponse.json({ error: 'Provide filenames, olderThanDays, category, or all' }, { status: 400 })
+  }
+
+  let deleted = 0
+  let freedBytes = 0
+  for (const name of toDelete) {
+    const filePath = path.join(UPLOAD_DIR, name)
+    try {
+      const stat = fs.statSync(filePath)
+      fs.unlinkSync(filePath)
+      freedBytes += stat.size
+      deleted++
+    } catch {
+      // file already gone or inaccessible
+    }
+  }
+
+  return NextResponse.json({ deleted, freedBytes })
+}

package/src/app/globals.css

@@ -269,6 +269,11 @@ textarea:hover::-webkit-scrollbar { width: 6px; }
   to { opacity: 0; transform: translateY(-8px) scale(0.95); }
 }
 
+@keyframes delegation-handoff-in {
+  0% { opacity: 0; transform: translateX(16px) scale(0.95); }
+  100% { opacity: 1; transform: translateX(0) scale(1); }
+}
+
 @keyframes avatar-moment-pulse {
   0% { transform: scale(1); }
   30% { transform: scale(1.15); }

package/src/cli/index.js

@@ -79,6 +79,14 @@ const COMMAND_GROUPS = [
       }),
     ],
   },
+  {
+    name: 'canvas',
+    description: 'Read/update per-session canvas content',
+    commands: [
+      cmd('get', 'GET', '/canvas/:sessionId', 'Get current canvas content for a session'),
+      cmd('set', 'POST', '/canvas/:sessionId', 'Set/clear canvas content for a session', { expectsJsonBody: true }),
+    ],
+  },
   {
     name: 'connectors',
     description: 'Manage chat connectors',
@@ -154,6 +162,7 @@ const COMMAND_GROUPS = [
     description: 'Serve and manage local files',
     commands: [
       cmd('serve', 'GET', '/files/serve', 'Serve a local file (use --query path=/abs/path)'),
+      cmd('open', 'POST', '/files/open', 'Open a local file path via the host default app/browser', { expectsJsonBody: true }),
     ],
   },
   {
@@ -381,6 +390,8 @@ const COMMAND_GROUPS = [
       }),
       cmd('messages', 'GET', '/sessions/:id/messages', 'Get session messages'),
       cmd('messages-update', 'PUT', '/sessions/:id/messages', 'Update session message metadata (e.g. bookmark)', { expectsJsonBody: true }),
+      cmd('messages-send', 'POST', '/sessions/:id/messages', 'Append a user/system message to a session', { expectsJsonBody: true }),
+      cmd('messages-delete', 'DELETE', '/sessions/:id/messages', 'Delete a message from a session', { expectsJsonBody: true }),
       cmd('fork', 'POST', '/sessions/:id/fork', 'Fork session from a specific message index', { expectsJsonBody: true }),
       cmd('edit-resend', 'POST', '/sessions/:id/edit-resend', 'Edit and resend from a specific message index', { expectsJsonBody: true }),
       cmd('main-loop', 'GET', '/sessions/:id/main-loop', 'Get main mission loop state'),
@@ -455,6 +466,7 @@ const COMMAND_GROUPS = [
       cmd('delete', 'DELETE', '/tasks/:id', 'Delete task'),
       cmd('purge', 'DELETE', '/tasks', 'Bulk delete tasks', { expectsJsonBody: true }),
       cmd('approve', 'POST', '/tasks/:id/approve', 'Approve or reject a pending tool execution', { expectsJsonBody: true }),
+      cmd('metrics', 'GET', '/tasks/metrics', 'Get task board metrics (supports --query range=24h|7d|30d)'),
     ],
   },
   {
@@ -485,9 +497,12 @@ const COMMAND_GROUPS = [
   },
   {
     name: 'uploads',
-    description: 'Fetch uploaded artifacts',
+    description: 'Manage uploaded artifacts',
     commands: [
+      cmd('list', 'GET', '/uploads', 'List uploaded artifacts'),
       cmd('get', 'GET', '/uploads/:filename', 'Download uploaded artifact', { responseType: 'binary' }),
+      cmd('delete', 'DELETE', '/uploads/:filename', 'Delete uploaded artifact by filename'),
+      cmd('delete-many', 'DELETE', '/uploads', 'Delete uploads by filter/body (filenames, olderThanDays, category, or all)', { expectsJsonBody: true }),
     ],
   },
   {

package/src/cli/spec.js

@@ -40,6 +40,13 @@ const COMMAND_GROUPS = {
       pin: { description: 'Toggle pin on a chatroom message', method: 'POST', path: '/chatrooms/:id/pins', params: ['id'] },
     },
   },
+  canvas: {
+    description: 'Session canvas content',
+    commands: {
+      get: { description: 'Get current canvas content for a session', method: 'GET', path: '/canvas/:sessionId', params: ['sessionId'] },
+      set: { description: 'Set/clear canvas content for a session', method: 'POST', path: '/canvas/:sessionId', params: ['sessionId'] },
+    },
+  },
   connectors: {
     description: 'Manage chat connectors',
     commands: {
@@ -120,6 +127,22 @@ const COMMAND_GROUPS = {
       },
     },
   },
+  uploads: {
+    description: 'Manage uploaded artifacts',
+    commands: {
+      list: { description: 'List uploaded artifacts', method: 'GET', path: '/uploads' },
+      get: { description: 'Download uploaded artifact by filename', method: 'GET', path: '/uploads/:filename', params: ['filename'], binary: true },
+      delete: { description: 'Delete uploaded artifact by filename', method: 'DELETE', path: '/uploads/:filename', params: ['filename'] },
+      'delete-many': { description: 'Delete uploads by filter/body (filenames, olderThanDays, category, or all)', method: 'DELETE', path: '/uploads' },
+    },
+  },
+  files: {
+    description: 'Serve/open local files',
+    commands: {
+      serve: { description: 'Serve a local file (supports --query path=/some/file)', method: 'GET', path: '/files/serve' },
+      open: { description: 'Open a local file path via host default app/browser', method: 'POST', path: '/files/open' },
+    },
+  },
   logs: {
     description: 'Application logs',
     commands: {
@@ -262,6 +285,8 @@ const COMMAND_GROUPS = {
       'heartbeat-disable-all': { description: 'Disable all session heartbeats and cancel queued heartbeat runs', method: 'POST', path: '/sessions/heartbeat' },
       messages: { description: 'Get session message history', method: 'GET', path: '/sessions/:id/messages', params: ['id'] },
       'messages-update': { description: 'Update session message metadata (e.g. bookmark)', method: 'PUT', path: '/sessions/:id/messages', params: ['id'] },
+      'messages-send': { description: 'Append a user/system message to a session', method: 'POST', path: '/sessions/:id/messages', params: ['id'] },
+      'messages-delete': { description: 'Delete a message from a session', method: 'DELETE', path: '/sessions/:id/messages', params: ['id'] },
       fork: { description: 'Fork session from a specific message index', method: 'POST', path: '/sessions/:id/fork', params: ['id'] },
       'edit-resend': { description: 'Edit and resend from a specific message index', method: 'POST', path: '/sessions/:id/edit-resend', params: ['id'] },
       'main-loop': { description: 'Get main mission loop state for a session', method: 'GET', path: '/sessions/:id/main-loop', params: ['id'] },
@@ -323,6 +348,7 @@ const COMMAND_GROUPS = {
       delete: { description: 'Archive task', method: 'DELETE', path: '/tasks/:id', params: ['id'] },
       archive: { description: 'Archive task', method: 'DELETE', path: '/tasks/:id', params: ['id'] },
       approve: { description: 'Approve or reject a pending tool execution', method: 'POST', path: '/tasks/:id/approve', params: ['id'] },
+      metrics: { description: 'Get task board metrics (supports --query range=24h|7d|30d)', method: 'GET', path: '/tasks/metrics' },
     },
   },
   webhooks: {

package/src/components/agents/agent-card.tsx

@@ -164,8 +164,8 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
           />
           <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{agent.name}</span>
           {pendingApprovalCount > 0 && (
-            <span className="shrink-0 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-700">
-              {pendingApprovalCount}
+            <span className="shrink-0 text-[9px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] text-amber-400 bg-amber-400/[0.08] border border-amber-400/15">
+              {pendingApprovalCount} {pendingApprovalCount === 1 ? 'approval' : 'approvals'}
             </span>
           )}
           {isDefault && (
@@ -178,7 +178,7 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
               onClick={handleRunClick}
               disabled={running}
               className="shrink-0 text-[10px] font-600 uppercase tracking-wider px-2.5 py-1 rounded-[6px] cursor-pointer
-                transition-all border-none bg-accent-bright/20 text-[#818CF8] hover:bg-accent-bright/30 disabled:opacity-40"
+                transition-all border-none bg-accent-bright/20 text-accent-bright hover:bg-accent-bright/30 disabled:opacity-40"
               style={{ fontFamily: 'inherit' }}
             >
               {running ? '...' : 'Run'}

package/src/components/agents/agent-chat-list.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { fetchMessages } from '@/lib/sessions'
 import type { Agent, Session } from '@/types'
 import { AgentAvatar } from './agent-avatar'
@@ -28,6 +29,8 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
   const streamingSessionId = useChatStore((s) => s.streamingSessionId)
   const chatFilter = useAppStore((s) => s.chatFilter ?? 'all')
   const setChatFilter = useAppStore((s) => s.setChatFilter)
+  const chatrooms = useChatroomStore((s) => s.chatrooms)
+  const chatroomStreaming = useChatroomStore((s) => s.streamingAgents)
   const [search, setSearch] = useState('')
 
   // FLIP animation refs
@@ -57,6 +60,21 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       })
   }, [agents, sessions, search])
 
+  // Compute agents active in chatrooms (message in last 30min or currently streaming)
+  const chatroomActiveAgentIds = useMemo(() => {
+    const set = new Set<string>()
+    const cutoff = Date.now() - 30 * 60 * 1000
+    for (const chatroom of Object.values(chatrooms)) {
+      for (let i = chatroom.messages.length - 1; i >= 0; i--) {
+        const msg = chatroom.messages[i]
+        if (msg.time < cutoff) break
+        if (msg.role === 'assistant' && msg.senderId !== 'user') set.add(msg.senderId)
+      }
+    }
+    for (const agentId of chatroomStreaming.keys()) set.add(agentId)
+    return set
+  }, [chatrooms, chatroomStreaming])
+
   // Compute running tasks per agent
   const runningAgentIds = useMemo(() => {
     const set = new Set<string>()
@@ -74,12 +92,13 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       const threadSession = a.threadSessionId ? sessions[a.threadSessionId] as Session | undefined : undefined
       const isRunning = runningAgentIds.has(a.id) || (threadSession?.active ?? false)
       const isStreaming = streamingSessionId === a.threadSessionId
-      if (chatFilter === 'active') return isRunning || isStreaming
+      const isChatroomActive = chatroomActiveAgentIds.has(a.id)
+      if (chatFilter === 'active') return isRunning || isStreaming || isChatroomActive
       // 'recent' — activity within 24h
       const lastActive = threadSession?.lastActiveAt || a.updatedAt
       return now - lastActive < 86_400_000
     })
-  }, [sortedAgents, chatFilter, sessions, runningAgentIds, streamingSessionId])
+  }, [sortedAgents, chatFilter, sessions, runningAgentIds, streamingSessionId, chatroomActiveAgentIds])
 
   // FLIP: animate row position changes
   useLayoutEffect(() => {
@@ -109,7 +128,9 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
       try {
         const msgs = await fetchMessages(state.currentSessionId)
         setMessages(msgs)
-      } catch { /* ignore */ }
+      } catch (err: unknown) {
+        console.error('[agent-chat-list] Failed to load messages:', err instanceof Error ? err.message : String(err))
+      }
     }
     onSelect?.()
     // Delay scroll so React renders the new messages first
@@ -186,7 +207,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
           const isActive = currentAgentId === agent.id
           const heartbeatOn = agent.heartbeatEnabled === true && (agent.tools?.length ?? 0) > 0
           const recentlyActive = (threadSession?.lastActiveAt ?? 0) > Date.now() - 30 * 60 * 1000
-          const isWorking = runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || heartbeatOn || recentlyActive
+          const isWorking = runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || heartbeatOn || recentlyActive || chatroomActiveAgentIds.has(agent.id)
           const isTyping = streamingSessionId === agent.threadSessionId
           const preview = lastMsg?.text?.slice(0, 80)?.replace(/\n/g, ' ') || ''
 
@@ -194,7 +215,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
             <div
               key={agent.id}
               ref={(el) => setRowRef(agent.id, el)}
-              className={`group/row relative w-full text-left py-3 px-3.5 rounded-[12px] cursor-pointer transition-all duration-150 border-none
+              className={`group/row relative w-full text-left py-3 px-4 rounded-[12px] cursor-pointer transition-all duration-150 border-none
                 ${isActive
                   ? 'bg-accent-soft/80 border border-accent-bright/20'
                   : 'bg-transparent hover:bg-white/[0.02]'}`}
@@ -213,7 +234,9 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                       {agent.name}
                     </span>
                     <span className="text-[10px] text-text-3/60 font-mono shrink-0">
-                      {agent.model ? agent.model.split('/').pop()?.split(':')[0] : agent.provider}
+                      {(threadSession?.model || agent.model)
+                        ? (threadSession?.model || agent.model)!.split('/').pop()?.split(':')[0]
+                        : agent.provider}
                     </span>
                     {/* Set as default agent */}
                     {(() => {

package/src/components/agents/agent-sheet.tsx

@@ -14,8 +14,9 @@ import { AgentAvatar } from './agent-avatar'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { randomSoul } from '@/lib/soul-suggestions'
 import { SectionLabel } from '@/components/shared/section-label'
+import { SoulLibraryPicker } from './soul-library-picker'
 
-const HB_PRESETS = [30, 60, 120, 300, 600, 1800, 3600] as const
+const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
 
 function formatHbDuration(sec: number): string {
   if (sec >= 3600) {
@@ -63,6 +64,7 @@ export function AgentSheet() {
   const loadProviders = useAppStore((s) => s.loadProviders)
   const credentials = useAppStore((s) => s.credentials)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const appSettings = useAppStore((s) => s.appSettings)
   const dynamicSkills = useAppStore((s) => s.skills)
   const mcpServers = useAppStore((s) => s.mcpServers)
   const loadSkills = useAppStore((s) => s.loadSkills)
@@ -80,6 +82,8 @@ export function AgentSheet() {
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [soul, setSoul] = useState('')
+  const [soulInitial, setSoulInitial] = useState('')
+  const [soulSaveState, setSoulSaveState] = useState<'idle' | 'saved'>('idle')
   const [systemPrompt, setSystemPrompt] = useState('')
   const [provider, setProvider] = useState<ProviderType>('claude-cli')
   const [model, setModel] = useState('')
@@ -95,7 +99,6 @@ export function AgentSheet() {
   const [mcpTools, setMcpTools] = useState<Record<string, { name: string; description: string }[]>>({})
   const [mcpToolsLoading, setMcpToolsLoading] = useState(false)
   const [fallbackCredentialIds, setFallbackCredentialIds] = useState<string[]>([])
-  // platformAssignScope is derived from isOrchestrator — no separate state needed
   const [capabilities, setCapabilities] = useState<string[]>([])
   const [capInput, setCapInput] = useState('')
   const [ollamaMode, setOllamaMode] = useState<'local' | 'cloud'>('local')
@@ -103,6 +106,7 @@ export function AgentSheet() {
   const [projectId, setProjectId] = useState<string | undefined>(undefined)
   const [avatarSeed, setAvatarSeed] = useState('')
   const [thinkingLevel, setThinkingLevel] = useState<'' | 'minimal' | 'low' | 'medium' | 'high'>('')
+  const [voiceId, setVoiceId] = useState('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
   const [heartbeatModel, setHeartbeatModel] = useState('')
@@ -121,6 +125,7 @@ export function AgentSheet() {
   const [configCopied, setConfigCopied] = useState(false)
 
   const soulFileRef = useRef<HTMLInputElement>(null)
+  const [soulLibraryOpen, setSoulLibraryOpen] = useState(false)
   const promptFileRef = useRef<HTMLInputElement>(null)
   const importFileRef = useRef<HTMLInputElement>(null)
 
@@ -157,6 +162,8 @@ export function AgentSheet() {
         setName(editing.name)
         setDescription(editing.description)
         setSoul(editing.soul || '')
+        setSoulInitial(editing.soul || '')
+        setSoulSaveState('idle')
         setSystemPrompt(editing.systemPrompt)
         setProvider(editing.provider)
         setModel(editing.model)
@@ -178,6 +185,7 @@ export function AgentSheet() {
         setProjectId(editing.projectId)
         setAvatarSeed(editing.avatarSeed || crypto.randomUUID().slice(0, 8))
         setThinkingLevel(editing.thinkingLevel || '')
+        setVoiceId(editing.elevenLabsVoiceId || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
@@ -185,7 +193,10 @@ export function AgentSheet() {
       } else {
         setName('')
         setDescription('')
-        setSoul(randomSoul())
+        const newSoul = randomSoul()
+        setSoul(newSoul)
+        setSoulInitial(newSoul)
+        setSoulSaveState('idle')
         setSystemPrompt('')
         setProvider('claude-cli')
         setModel('')
@@ -205,6 +216,7 @@ export function AgentSheet() {
         setProjectId(undefined)
         setAvatarSeed('')
         setThinkingLevel('')
+        setVoiceId('')
         setHeartbeatEnabled(false)
         setHeartbeatIntervalSec('')
         setHeartbeatModel('')
@@ -299,6 +311,7 @@ export function AgentSheet() {
       projectId: projectId || undefined,
       avatarSeed: avatarSeed.trim() || undefined,
       thinkingLevel: thinkingLevel || undefined,
+      elevenLabsVoiceId: voiceId.trim() || null,
       heartbeatEnabled,
       heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
       heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
@@ -313,6 +326,9 @@ export function AgentSheet() {
       toast.success('Agent created')
     }
     await loadAgents()
+    setSoulInitial(soul)
+    setSoulSaveState('saved')
+    setTimeout(() => setSoulSaveState('idle'), 1500)
     onClose()
   }
 
@@ -419,6 +435,7 @@ export function AgentSheet() {
   const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
 
   return (
+    <>
     <BottomSheet open={open} onClose={onClose} wide>
       <div className="mb-10 flex items-start justify-between">
         <div>
@@ -577,6 +594,24 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Controls reasoning depth. Anthropic models use extended thinking; OpenAI o-series uses reasoning_effort. Others get system prompt guidance.</p>
       </div>
 
+      {/* ElevenLabs Voice ID */}
+      {appSettings.elevenLabsEnabled && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+            ElevenLabs Voice ID <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+          </label>
+          <input
+            type="text"
+            value={voiceId}
+            onChange={(e) => setVoiceId(e.target.value)}
+            placeholder="Leave blank for global default"
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+          <p className="text-[11px] text-text-3/70 mt-1.5">Override the default voice for this agent. Leave blank to use the global default.</p>
+        </div>
+      )}
+
       {/* Heartbeat Configuration */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
@@ -633,8 +668,20 @@ export function AgentSheet() {
 
       {provider !== 'openclaw' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
             Soul / Personality <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+            {soul !== soulInitial && soulSaveState === 'idle' && (
+              <span className="inline-flex items-center gap-1 normal-case tracking-normal text-[10px] text-amber-400 font-600">
+                <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
+                Unsaved
+              </span>
+            )}
+            {soulSaveState === 'saved' && (
+              <span className="inline-flex items-center gap-1 normal-case tracking-normal text-[10px] text-emerald-400 font-600">
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+                Saved
+              </span>
+            )}
           </label>
           <div className="flex items-center gap-2 mb-3">
             <p className="text-[12px] text-text-3/60">Define the agent&apos;s voice, tone, and personality. Injected before the system prompt.</p>
@@ -652,6 +699,14 @@ export function AgentSheet() {
               </svg>
               Shuffle
             </button>
+            <button
+              type="button"
+              onClick={() => setSoulLibraryOpen(true)}
+              className="shrink-0 px-2 py-1 rounded-[8px] border border-accent-bright/20 bg-accent-soft text-[11px] text-accent-bright hover:brightness-110 cursor-pointer transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Browse Library
+            </button>
             <button onClick={() => soulFileRef.current?.click()} className="shrink-0 px-2 py-1 rounded-[8px] border border-white/[0.08] bg-surface text-[11px] text-text-3 hover:text-text-2 cursor-pointer transition-colors" style={{ fontFamily: 'inherit' }}>Upload .md</button>
             <input ref={soulFileRef} type="file" accept=".md,.txt,.markdown" onChange={handleFileUpload(setSoul)} className="hidden" />
           </div>
@@ -1372,6 +1427,13 @@ export function AgentSheet() {
         </button>
       </div>
     </BottomSheet>
+
+    <SoulLibraryPicker
+      open={soulLibraryOpen}
+      onClose={() => setSoulLibraryOpen(false)}
+      onSelect={(s) => setSoul(s)}
+    />
+    </>
   )
 }