@swarmclawai/swarmclaw 0.6.0 → 0.6.3

package/src/app/api/tasks/metrics/route.ts

@@ -0,0 +1,101 @@
+import { NextResponse } from 'next/server'
+import { loadTasks, loadAgents } from '@/lib/server/storage'
+
+type Range = '24h' | '7d' | '30d'
+
+const RANGE_MS: Record<Range, number> = {
+  '24h': 24 * 3600_000,
+  '7d': 7 * 86400_000,
+  '30d': 30 * 86400_000,
+}
+
+function bucketKey(ts: number, range: Range): string {
+  const d = new Date(ts)
+  if (range === '24h') return d.toISOString().slice(0, 13) // "2026-03-01T14"
+  return d.toISOString().slice(0, 10) // "2026-03-01"
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url)
+  const range = (searchParams.get('range') as Range) || '7d'
+  const cutoff = Date.now() - (RANGE_MS[range] || RANGE_MS['7d'])
+
+  const tasks = loadTasks()
+  const agents = loadAgents()
+  const all = Object.values(tasks)
+
+  // --- by-status counts ---
+  const byStatus: Record<string, number> = {}
+  for (const t of all) {
+    byStatus[t.status] = (byStatus[t.status] || 0) + 1
+  }
+
+  // WIP = queued + running
+  const wip = (byStatus['queued'] || 0) + (byStatus['running'] || 0)
+
+  // --- completions in range ---
+  const completedInRange = all.filter(
+    (t) => t.status === 'completed' && t.completedAt && t.completedAt >= cutoff,
+  )
+
+  // --- cycle times (queuedAt → completedAt) ---
+  const cycleTimes: number[] = []
+  for (const t of completedInRange) {
+    const start = t.queuedAt || t.createdAt
+    const end = t.completedAt!
+    if (end > start) cycleTimes.push(end - start)
+  }
+  cycleTimes.sort((a, b) => a - b)
+
+  const avgCycleMs = cycleTimes.length
+    ? Math.round(cycleTimes.reduce((s, v) => s + v, 0) / cycleTimes.length)
+    : 0
+  const p50CycleMs = cycleTimes.length ? cycleTimes[Math.floor(cycleTimes.length * 0.5)] : 0
+  const p90CycleMs = cycleTimes.length ? cycleTimes[Math.floor(cycleTimes.length * 0.9)] : 0
+
+  // --- velocity (completions per bucket) ---
+  const velocityMap: Record<string, number> = {}
+  for (const t of completedInRange) {
+    const key = bucketKey(t.completedAt!, range)
+    velocityMap[key] = (velocityMap[key] || 0) + 1
+  }
+  const velocity = Object.entries(velocityMap)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([bucket, count]) => ({ bucket, count }))
+
+  // --- by-agent completions ---
+  const byAgent: Record<string, { agentName: string; completed: number; failed: number }> = {}
+  const recentTasks = all.filter(
+    (t) => (t.completedAt && t.completedAt >= cutoff) || (t.status === 'failed' && t.updatedAt >= cutoff),
+  )
+  for (const t of recentTasks) {
+    if (!t.agentId) continue
+    if (!byAgent[t.agentId]) {
+      const agent = agents[t.agentId]
+      byAgent[t.agentId] = { agentName: agent?.name || t.agentId, completed: 0, failed: 0 }
+    }
+    if (t.status === 'completed') byAgent[t.agentId].completed++
+    else if (t.status === 'failed') byAgent[t.agentId].failed++
+  }
+  const byAgentList = Object.values(byAgent).sort((a, b) => b.completed - a.completed)
+
+  // --- by-priority counts ---
+  const byPriority: Record<string, number> = {}
+  for (const t of all) {
+    const p = t.priority || 'none'
+    byPriority[p] = (byPriority[p] || 0) + 1
+  }
+
+  return NextResponse.json({
+    range,
+    byStatus,
+    wip,
+    completedCount: completedInRange.length,
+    avgCycleMs,
+    p50CycleMs,
+    p90CycleMs,
+    velocity,
+    byAgent: byAgentList,
+    byPriority,
+  })
+}

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

@@ -1,11 +1,13 @@
 import { NextResponse } from 'next/server'
 import { genId } from '@/lib/id'
-import { loadTasks, saveTasks, loadSettings, logActivity } from '@/lib/server/storage'
+import { loadTasks, saveTasks, loadSettings, loadAgents, logActivity } from '@/lib/server/storage'
 import { enqueueTask, validateCompletedTasksQueue } from '@/lib/server/queue'
 import { ensureTaskCompletionReport } from '@/lib/server/task-reports'
 import { formatValidationFailure, validateTaskCompletion } from '@/lib/server/task-validation'
 import { pushMainLoopEventToMainSessions } from '@/lib/server/main-agent-loop'
 import { notify } from '@/lib/server/ws-hub'
+import { computeTaskFingerprint, findDuplicateTask } from '@/lib/task-dedupe'
+import { resolveTaskAgentFromDescription } from '@/lib/server/task-mention'
 
 export async function GET(req: Request) {
   // Keep completed queue integrity even if daemon is not running.
@@ -64,12 +66,17 @@ export async function POST(req: Request) {
   const retryBackoffSec = Number.isFinite(Number(body.retryBackoffSec))
     ? Math.max(1, Math.min(3600, Math.trunc(Number(body.retryBackoffSec))))
     : Math.max(1, Math.min(3600, Math.trunc(Number(settings.taskRetryBackoffSec ?? 30))))
+  // Resolve @mentions in description to auto-assign agent
+  const resolvedAgentId = body.description
+    ? resolveTaskAgentFromDescription(body.description, body.agentId || '', loadAgents())
+    : (body.agentId || '')
+
   tasks[id] = {
     id,
     title: body.title || 'Untitled Task',
     description: body.description || '',
     status: body.status || 'backlog',
-    agentId: body.agentId || '',
+    agentId: resolvedAgentId,
     projectId: typeof body.projectId === 'string' && body.projectId ? body.projectId : null,
     goalContract: body.goalContract || null,
     cwd: typeof body.cwd === 'string' ? body.cwd : null,
@@ -94,6 +101,14 @@ export async function POST(req: Request) {
     tags: Array.isArray(body.tags) ? body.tags.filter((s: unknown) => typeof s === 'string') : [],
     dueAt: typeof body.dueAt === 'number' ? body.dueAt : null,
     customFields: body.customFields && typeof body.customFields === 'object' ? body.customFields : undefined,
+    priority: ['low', 'medium', 'high', 'critical'].includes(body.priority) ? body.priority : undefined,
+    fingerprint: computeTaskFingerprint(body.title || 'Untitled Task', body.agentId || ''),
+  }
+
+  // Dedup: if a non-terminal task with same fingerprint exists, return it
+  const dupe = findDuplicateTask(tasks, { fingerprint: tasks[id].fingerprint! })
+  if (dupe && dupe.id !== id) {
+    return NextResponse.json({ ...dupe, deduplicated: true })
   }
 
   if (tasks[id].status === 'completed') {

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

@@ -1,40 +1,21 @@
 import { NextResponse } from 'next/server'
-import { loadSettings } from '@/lib/server/storage'
+import { explainElevenLabsError, resolveElevenLabsConfig, synthesizeElevenLabsMp3 } from '@/lib/server/elevenlabs'
 
 export async function POST(req: Request) {
-  const settings = loadSettings()
-  const ELEVENLABS_KEY = settings.elevenLabsApiKey || process.env.ELEVENLABS_API_KEY
-  const ELEVENLABS_VOICE = settings.elevenLabsVoiceId || process.env.ELEVENLABS_VOICE || 'JBFqnCBsd6RMkjVDRZzb'
-
-  if (!ELEVENLABS_KEY) {
-    return new NextResponse('No ElevenLabs API key. Set one in Settings > Voice.', { status: 500 })
+  try {
+    const { text, voiceId } = await req.json()
+    if (!String(text || '').trim()) {
+      return new NextResponse('No text provided', { status: 400 })
+    }
+    resolveElevenLabsConfig(voiceId)
+    const audioBuffer = await synthesizeElevenLabsMp3({ text: String(text || ''), voiceId })
+    return new NextResponse(new Uint8Array(audioBuffer), {
+      headers: {
+        'Content-Type': 'audio/mpeg',
+        'Cache-Control': 'no-cache',
+      },
+    })
+  } catch (err: unknown) {
+    return new NextResponse(explainElevenLabsError(err), { status: 500 })
   }
-
-  const { text } = await req.json()
-  const apiRes = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${ELEVENLABS_VOICE}`, {
-    method: 'POST',
-    headers: {
-      'xi-api-key': ELEVENLABS_KEY,
-      'Content-Type': 'application/json',
-      'Accept': 'audio/mpeg',
-    },
-    body: JSON.stringify({
-      text,
-      model_id: 'eleven_multilingual_v2',
-      voice_settings: { stability: 0.5, similarity_boost: 0.75 },
-    }),
-  })
-
-  if (!apiRes.ok) {
-    const err = await apiRes.text()
-    return new NextResponse(err, { status: apiRes.status })
-  }
-
-  const audioBuffer = await apiRes.arrayBuffer()
-  return new NextResponse(audioBuffer, {
-    headers: {
-      'Content-Type': 'audio/mpeg',
-      'Cache-Control': 'no-cache',
-    },
-  })
 }

package/src/app/api/tts/stream/route.ts

@@ -1,48 +1,20 @@
-import { loadSettings } from '@/lib/server/storage'
+import { explainElevenLabsError, requestElevenLabsMp3Stream } from '@/lib/server/elevenlabs'
 
 export async function POST(req: Request) {
-  const settings = loadSettings()
-  const ELEVENLABS_KEY = settings.elevenLabsApiKey || process.env.ELEVENLABS_API_KEY
-  const ELEVENLABS_VOICE = settings.elevenLabsVoiceId || process.env.ELEVENLABS_VOICE || 'JBFqnCBsd6RMkjVDRZzb'
-
-  if (!ELEVENLABS_KEY) {
-    return new Response('No ElevenLabs API key. Set one in Settings > Voice.', { status: 500 })
-  }
-
-  const { text } = await req.json()
-  if (!text?.trim()) {
-    return new Response('No text provided', { status: 400 })
-  }
-
-  const apiRes = await fetch(
-    `https://api.elevenlabs.io/v1/text-to-speech/${ELEVENLABS_VOICE}/stream`,
-    {
-      method: 'POST',
+  try {
+    const { text, voiceId } = await req.json()
+    if (!String(text || '').trim()) {
+      return new Response('No text provided', { status: 400 })
+    }
+    const apiRes = await requestElevenLabsMp3Stream({ text: String(text || ''), voiceId })
+    return new Response(apiRes.body, {
       headers: {
-        'xi-api-key': ELEVENLABS_KEY,
-        'Content-Type': 'application/json',
-        'Accept': 'audio/mpeg',
+        'Content-Type': 'audio/mpeg',
+        'Transfer-Encoding': 'chunked',
+        'Cache-Control': 'no-cache',
       },
-      body: JSON.stringify({
-        text: text.slice(0, 2000),
-        model_id: 'eleven_multilingual_v2',
-        voice_settings: { stability: 0.5, similarity_boost: 0.75 },
-        output_format: 'mp3_22050_32',
-      }),
-    },
-  )
-
-  if (!apiRes.ok) {
-    const err = await apiRes.text()
-    return new Response(err, { status: apiRes.status })
+    })
+  } catch (err: unknown) {
+    return new Response(explainElevenLabsError(err), { status: 500 })
   }
-
-  // Pipe the streaming response directly
-  return new Response(apiRes.body, {
-    headers: {
-      'Content-Type': 'audio/mpeg',
-      'Transfer-Encoding': 'chunked',
-      'Cache-Control': 'no-cache',
-    },
-  })
 }

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 */}
                     {(() => {