@swarmclawai/swarmclaw 0.6.7 → 0.7.0

package/src/app/api/souls/[id]/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from 'next/server'
+import { loadSouls, saveSouls, deleteSoul, logActivity } from '@/lib/server/storage'
+import { SOUL_LIBRARY } from '@/lib/soul-library'
+import { notify } from '@/lib/server/ws-hub'
+
+export const dynamic = 'force-dynamic'
+
+/** GET /api/souls/[id] */
+export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  
+  // Check static library first
+  const staticSoul = SOUL_LIBRARY.find(s => s.id === id)
+  if (staticSoul) return NextResponse.json(staticSoul)
+
+  const souls = loadSouls()
+  if (!souls[id]) return NextResponse.json({ error: 'Soul not found' }, { status: 404 })
+  return NextResponse.json(souls[id])
+}
+
+/** PUT /api/souls/[id] — update custom soul */
+export async function PUT(req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const body = await req.json()
+  
+  // Can only update custom souls
+  const souls = loadSouls()
+  if (!souls[id]) {
+    return NextResponse.json({ error: 'Only custom souls can be modified via this endpoint' }, { status: 403 })
+  }
+
+  const updated = { ...souls[id], ...body, id, updatedAt: Date.now() }
+  souls[id] = updated
+  saveSouls(souls)
+  
+  notify('souls')
+  return NextResponse.json(updated)
+}
+
+/** DELETE /api/souls/[id] — delete custom soul */
+export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  
+  // Only allow deleting custom ones
+  const souls = loadSouls()
+  if (!souls[id]) {
+     const isStatic = SOUL_LIBRARY.some(s => s.id === id)
+     if (isStatic) return NextResponse.json({ error: 'Cannot delete static library souls' }, { status: 403 })
+     return NextResponse.json({ error: 'Soul not found' }, { status: 404 })
+  }
+
+  const name = souls[id].name
+  deleteSoul(id)
+  
+  logActivity({ 
+    entityType: 'soul', 
+    entityId: id, 
+    action: 'deleted', 
+    actor: 'user', 
+    summary: `Custom soul deleted: "${name}"` 
+  })
+  
+  notify('souls')
+  return NextResponse.json({ deleted: id })
+}

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

@@ -0,0 +1,70 @@
+import { NextResponse } from 'next/server'
+import { SOUL_LIBRARY, type SoulTemplate } from '@/lib/soul-library'
+import { loadSouls, saveSouls, logActivity } from '@/lib/server/storage'
+import { genId } from '@/lib/id'
+import { notify } from '@/lib/server/ws-hub'
+
+export const dynamic = 'force-dynamic'
+
+/** GET /api/souls — returns merged list of static library and custom user souls */
+export async function GET(req: Request) {
+  const customSouls = loadSouls()
+  const { searchParams } = new URL(req.url)
+  const query = searchParams.get('q')?.toLowerCase() || ''
+  const archetype = searchParams.get('archetype')
+
+  const merged: SoulTemplate[] = [
+    ...SOUL_LIBRARY,
+    ...Object.values(customSouls) as SoulTemplate[],
+  ]
+
+  let filtered = merged
+  if (archetype && archetype !== 'All') {
+    filtered = filtered.filter((s) => s.archetype === archetype)
+  }
+  if (query) {
+    filtered = filtered.filter(
+      (s) =>
+        s.name.toLowerCase().includes(query) ||
+        s.description.toLowerCase().includes(query) ||
+        s.tags.some((t) => t.toLowerCase().includes(query)) ||
+        s.soul.toLowerCase().includes(query),
+    )
+  }
+
+  return NextResponse.json(filtered)
+}
+
+/** POST /api/souls — create a custom soul */
+export async function POST(req: Request) {
+  const body = await req.json()
+  if (!body.name || !body.soul) {
+    return NextResponse.json({ error: 'Name and soul content are required' }, { status: 400 })
+  }
+
+  const id = body.id || `custom-${genId()}`
+  const souls = loadSouls()
+  
+  const newSoul: SoulTemplate = {
+    id,
+    name: body.name,
+    description: body.description || '',
+    soul: body.soul,
+    tags: Array.isArray(body.tags) ? body.tags : [],
+    archetype: body.archetype || 'Custom',
+  }
+
+  souls[id] = newSoul
+  saveSouls(souls)
+  
+  logActivity({ 
+    entityType: 'soul', 
+    entityId: id, 
+    action: 'created', 
+    actor: 'user', 
+    summary: `Custom soul created: "${newSoul.name}"` 
+  })
+  
+  notify('souls')
+  return NextResponse.json(newSoul)
+}

package/src/app/api/tasks/[id]/approve/route.ts

@@ -58,11 +58,12 @@ export async function POST(req: Request, { params }: { params: Promise<{ id: str
         saveTasks(t2)
         notify('tasks')
       }
-    } catch (err: any) {
-      console.error(`[approve] Resume failed for task ${id}:`, err.message)
+    } catch (err: unknown) {
+      const errMsg = err instanceof Error ? err.message : String(err)
+      console.error(`[approve] Resume failed for task ${id}:`, errMsg)
       const t2 = loadTasks()
       if (t2[id]) {
-        t2[id].error = err.message || String(err)
+        t2[id].error = errMsg
         t2[id].updatedAt = Date.now()
         saveTasks(t2)
         notify('tasks')

package/src/app/api/tasks/[id]/route.ts

@@ -1,8 +1,8 @@
 import { genId } from '@/lib/id'
 import { NextResponse } from 'next/server'
-import { loadTasks, saveTasks, logActivity } from '@/lib/server/storage'
+import { loadTasks, saveTasks, logActivity, loadSettings } from '@/lib/server/storage'
 import { notFound } from '@/lib/server/collection-helpers'
-import { disableSessionHeartbeat, enqueueTask, validateCompletedTasksQueue } from '@/lib/server/queue'
+import { disableSessionHeartbeat, enqueueTask, recoverStalledRunningTasks, 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'
@@ -11,10 +11,13 @@ import { createNotification } from '@/lib/server/create-notification'
 import { enqueueSystemEvent } from '@/lib/server/system-events'
 import { requestHeartbeatNow } from '@/lib/server/heartbeat-wake'
 import { validateDag, cascadeUnblock } from '@/lib/server/dag-validation'
+import { getPluginManager } from '@/lib/server/plugins'
+import { normalizeTaskQualityGate } from '@/lib/server/task-quality-gate'
 
 export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
   // Keep completed queue integrity even if daemon is not running.
   validateCompletedTasksQueue()
+  recoverStalledRunningTasks()
 
   const { id } = await params
   const tasks = loadTasks()
@@ -25,6 +28,7 @@ export async function GET(_req: Request, { params }: { params: Promise<{ id: str
 export async function PUT(req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   const body = await req.json()
+  const settings = loadSettings()
   const tasks = loadTasks()
   if (!tasks[id]) return notFound()
 
@@ -47,6 +51,11 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
     tasks[id].comments.push(body.appendComment)
     tasks[id].updatedAt = Date.now()
   } else {
+    if (Object.prototype.hasOwnProperty.call(body, 'qualityGate')) {
+      body.qualityGate = body.qualityGate
+        ? normalizeTaskQualityGate(body.qualityGate, settings)
+        : null
+    }
     Object.assign(tasks[id], body, { updatedAt: Date.now() })
     // Explicitly clear nullable fields when sent as null (Object.assign copies null but not undefined)
     if (body.projectId === null) delete tasks[id].projectId
@@ -62,7 +71,7 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
   if (tasks[id].status === 'completed') {
     const report = ensureTaskCompletionReport(tasks[id])
     if (report?.relativePath) tasks[id].completionReportPath = report.relativePath
-    const validation = validateTaskCompletion(tasks[id], { report })
+    const validation = validateTaskCompletion(tasks[id], { report, settings })
     tasks[id].validation = validation
     if (validation.ok) {
       tasks[id].completedAt = tasks[id].completedAt || Date.now()
@@ -100,6 +109,10 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
       entityType: 'task',
       entityId: id,
     })
+    
+    if (tasks[id].status === 'completed') {
+      getPluginManager().runHook('onTaskComplete', { taskId: id, result: tasks[id].result })
+    }
 
     // Enqueue system event + heartbeat wake
     if (tasks[id].sessionId) {

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

@@ -3,7 +3,7 @@ import { genId } from '@/lib/id'
 import { loadTasks, saveTasks, loadSettings, loadAgents, logActivity } from '@/lib/server/storage'
 import { TaskCreateSchema, formatZodError } from '@/lib/validation/schemas'
 import { z } from 'zod'
-import { enqueueTask, validateCompletedTasksQueue } from '@/lib/server/queue'
+import { enqueueTask, recoverStalledRunningTasks, 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'
@@ -11,10 +11,13 @@ import { notify } from '@/lib/server/ws-hub'
 import { computeTaskFingerprint, findDuplicateTask } from '@/lib/task-dedupe'
 import { resolveTaskAgentFromDescription } from '@/lib/server/task-mention'
 import { validateDag } from '@/lib/server/dag-validation'
+import { getPluginManager } from '@/lib/server/plugins'
+import { normalizeTaskQualityGate } from '@/lib/server/task-quality-gate'
 
 export async function GET(req: Request) {
   // Keep completed queue integrity even if daemon is not running.
   validateCompletedTasksQueue()
+  recoverStalledRunningTasks()
 
   const { searchParams } = new URL(req.url)
   const includeArchived = searchParams.get('includeArchived') === 'true'
@@ -68,6 +71,9 @@ export async function POST(req: Request) {
   const now = Date.now()
   const tasks = loadTasks()
   const settings = loadSettings()
+  const normalizedQualityGate = body.qualityGate
+    ? normalizeTaskQualityGate(body.qualityGate, settings)
+    : null
   const maxAttempts = Number.isFinite(Number(body.maxAttempts))
     ? Math.max(1, Math.min(20, Math.trunc(Number(body.maxAttempts))))
     : Math.max(1, Math.min(20, Math.trunc(Number(settings.defaultTaskMaxAttempts ?? 3))))
@@ -146,6 +152,7 @@ export async function POST(req: Request) {
     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 || ''),
+    qualityGate: normalizedQualityGate,
   }
 
   // Dedup: if a non-terminal task with same fingerprint exists, return it
@@ -157,11 +164,12 @@ export async function POST(req: Request) {
   if (tasks[id].status === 'completed') {
     const report = ensureTaskCompletionReport(tasks[id])
     if (report?.relativePath) tasks[id].completionReportPath = report.relativePath
-    const validation = validateTaskCompletion(tasks[id], { report })
+    const validation = validateTaskCompletion(tasks[id], { report, settings })
     tasks[id].validation = validation
     if (validation.ok) {
       tasks[id].completedAt = Date.now()
       tasks[id].error = null
+      getPluginManager().runHook('onTaskComplete', { taskId: id, result: tasks[id].result })
     } else {
       tasks[id].status = 'failed'
       tasks[id].completedAt = null

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

@@ -94,12 +94,14 @@ export async function GET(req: Request) {
     errorCount: number
     lastUsed: number
     models: Set<string>
+    totalDurationMs: number
+    latencyCount: number
   }> = {}
 
   for (const r of records) {
     const prov = r.provider || 'unknown'
     if (!healthAccum[prov]) {
-      healthAccum[prov] = { totalRequests: 0, successCount: 0, errorCount: 0, lastUsed: 0, models: new Set() }
+      healthAccum[prov] = { totalRequests: 0, successCount: 0, errorCount: 0, lastUsed: 0, models: new Set(), totalDurationMs: 0, latencyCount: 0 }
     }
     const h = healthAccum[prov]
     h.totalRequests += 1
@@ -107,6 +109,11 @@ export async function GET(req: Request) {
     h.successCount += 1
     if ((r.timestamp || 0) > h.lastUsed) h.lastUsed = r.timestamp || 0
     if (r.model) h.models.add(r.model)
+    
+    if (typeof r.durationMs === 'number' && r.durationMs > 0) {
+      h.totalDurationMs += r.durationMs
+      h.latencyCount += 1
+    }
   }
 
   const providerHealth: Record<string, {
@@ -125,7 +132,7 @@ export async function GET(req: Request) {
       successCount: h.successCount,
       errorCount: h.errorCount,
       errorRate: h.totalRequests > 0 ? h.errorCount / h.totalRequests : 0,
-      avgLatencyMs: 0, // UsageRecord does not track latency
+      avgLatencyMs: h.latencyCount > 0 ? h.totalDurationMs / h.latencyCount : 0,
       lastUsed: h.lastUsed,
       models: Array.from(h.models),
     }

package/src/app/globals.css

@@ -171,6 +171,12 @@ textarea::-webkit-scrollbar { width: 0; }
 textarea:hover { scrollbar-width: thin; }
 textarea:hover::-webkit-scrollbar { width: 6px; }
 
+/* Improve scroll behavior on iOS/iPadOS nested panes */
+.overflow-y-auto,
+.overflow-auto {
+  -webkit-overflow-scrolling: touch;
+}
+
 /* Selection */
 ::selection { background: rgba(99,102,241,0.3); }
 
@@ -250,6 +256,23 @@ textarea:hover::-webkit-scrollbar { width: 6px; }
   0% { background-position: -200% center; }
   100% { background-position: 200% center; }
 }
+@keyframes shimmer-bar {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+@keyframes spring-in {
+  0% { transform: scale(0.9) translateY(10px); opacity: 0; }
+  70% { transform: scale(1.02) translateY(-2px); opacity: 1; }
+  100% { transform: scale(1) translateY(0); opacity: 1; }
+}
+@keyframes pulse-subtle {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.02); }
+}
+@keyframes glow-line {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
 @keyframes gradient-drift {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
@@ -259,6 +282,10 @@ textarea:hover::-webkit-scrollbar { width: 6px; }
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 
 /* Heartbeat float animation */
 @keyframes heartbeat-float {

package/src/app/page.tsx

@@ -92,14 +92,14 @@ function FullScreenLoader() {
           background: 'linear-gradient(135deg, rgba(255,255,255,0.6), rgba(129, 140, 248, 0.8))',
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
-          animation: 'sc-text-fade 2s ease-in-out infinite alternate',
+          animation: 'sc-text-fade 2s ease-in-out infinite alternate, fade-up 0.6s var(--ease-spring) 0.2s both',
         }}
       >
         SwarmClaw
       </div>
 
       {/* Loading bar */}
-      <div className="mt-4 w-[100px] h-[2px] rounded-full bg-white/[0.06] overflow-hidden">
+      <div className="mt-4 w-[100px] h-[2px] rounded-full bg-white/[0.06] overflow-hidden" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
         <div
           className="h-full rounded-full bg-accent-bright/60"
           style={{ animation: 'sc-progress 1.5s ease-in-out infinite' }}
@@ -150,7 +150,10 @@ export default function Home() {
 
   const [authChecked, setAuthChecked] = useState(false)
   const [authenticated, setAuthenticated] = useState(false)
-  const [setupDone, setSetupDone] = useState<boolean | null>(null)
+  const [setupDone, setSetupDone] = useState<boolean | null>(() => {
+    if (typeof window !== 'undefined' && localStorage.getItem('sc_setup_done') === '1') return true
+    return null
+  })
 
   const checkAuth = useCallback(async () => {
     const key = getStoredAccessKey()
@@ -252,7 +255,9 @@ export default function Home() {
         ])
         if (cancelled) return
         const hasCreds = Object.keys(creds).length > 0
-        setSetupDone(settings.setupCompleted === true || hasCreds)
+        const done = settings.setupCompleted === true || hasCreds
+        if (done) localStorage.setItem('sc_setup_done', '1')
+        setSetupDone(done)
       } catch {
         if (!cancelled) setSetupDone(true) // on error, skip wizard
       }
@@ -285,6 +290,6 @@ export default function Home() {
   if (!authenticated) return <AccessKeyGate onAuthenticated={() => setAuthenticated(true)} />
   if (!currentUser) return <UserPicker />
   if (setupDone === null || !agentReady) return <FullScreenLoader />
-  if (!setupDone) return <SetupWizard onComplete={() => setSetupDone(true)} />
+  if (!setupDone) return <SetupWizard onComplete={() => { localStorage.setItem('sc_setup_done', '1'); setSetupDone(true) }} />
   return <AppLayout />
 }

package/src/cli/index.js

@@ -42,6 +42,14 @@ const COMMAND_GROUPS = [
       }),
     ],
   },
+  {
+    name: 'approvals',
+    description: 'Manage runtime approvals',
+    commands: [
+      cmd('list', 'GET', '/approvals', 'List pending approvals'),
+      cmd('resolve', 'POST', '/approvals', 'Approve/reject a pending approval', { expectsJsonBody: true }),
+    ],
+  },
   {
     name: 'claude-skills',
     description: 'Read local Claude skills directory metadata',
@@ -160,6 +168,16 @@ const COMMAND_GROUPS = [
       cmd('delete', 'DELETE', '/documents/:id', 'Delete document'),
     ],
   },
+  {
+    name: 'eval',
+    description: 'Run agent evaluation scenarios',
+    commands: [
+      cmd('scenarios', 'GET', '/eval/scenarios', 'List available eval scenarios'),
+      cmd('status', 'GET', '/eval/run', 'Get eval run status'),
+      cmd('run', 'POST', '/eval/run', 'Run an eval scenario against an agent', { expectsJsonBody: true }),
+      cmd('suite', 'POST', '/eval/suite', 'Run a full eval suite against an agent', { expectsJsonBody: true }),
+    ],
+  },
   {
     name: 'files',
     description: 'Serve and manage local files',
@@ -209,6 +227,7 @@ const COMMAND_GROUPS = [
       cmd('delete', 'DELETE', '/memory/:id', 'Delete memory entry'),
       cmd('maintenance', 'GET', '/memory/maintenance', 'Analyze memory dedupe/prune candidates'),
       cmd('maintenance-run', 'POST', '/memory/maintenance', 'Run memory dedupe/prune maintenance', { expectsJsonBody: true }),
+      cmd('graph', 'GET', '/memory/graph', 'Get memory graph (nodes and links) for visualization'),
     ],
   },
   {
@@ -240,6 +259,8 @@ const COMMAND_GROUPS = [
       cmd('delete', 'DELETE', '/mcp-servers/:id', 'Delete MCP server'),
       cmd('test', 'POST', '/mcp-servers/:id/test', 'Test MCP server connection'),
       cmd('tools', 'GET', '/mcp-servers/:id/tools', 'List tools available on an MCP server'),
+      cmd('conformance', 'POST', '/mcp-servers/:id/conformance', 'Run MCP conformance checks for a server', { expectsJsonBody: true }),
+      cmd('invoke', 'POST', '/mcp-servers/:id/invoke', 'Invoke an MCP tool on a server', { expectsJsonBody: true }),
     ],
   },
   {
@@ -320,8 +341,11 @@ const COMMAND_GROUPS = [
     commands: [
       cmd('list', 'GET', '/plugins', 'List installed plugins'),
       cmd('set', 'POST', '/plugins', 'Enable/disable plugin', { expectsJsonBody: true }),
+      cmd('delete', 'DELETE', '/plugins', 'Delete an external plugin (use --query filename=plugin.js)'),
+      cmd('update', 'PATCH', '/plugins', 'Update a plugin (use --query id=plugin.js or --query all=true)'),
       cmd('install', 'POST', '/plugins/install', 'Install plugin from URL', { expectsJsonBody: true }),
       cmd('marketplace', 'GET', '/plugins/marketplace', 'Get marketplace catalog'),
+      cmd('ui', 'GET', '/plugins/ui', 'List plugin UI extensions (use --query type=sidebar|header|chat_actions|connectors)'),
     ],
   },
   {
@@ -428,6 +452,8 @@ const COMMAND_GROUPS = [
         expectsJsonBody: true,
         defaultBody: { action: 'status' },
       }),
+      cmd('checkpoints', 'GET', '/sessions/:id/checkpoints', 'List checkpoint history for a session'),
+      cmd('restore', 'POST', '/sessions/:id/restore', 'Restore session to a previous checkpoint', { expectsJsonBody: true }),
     ],
   },
   {
@@ -459,6 +485,17 @@ const COMMAND_GROUPS = [
       cmd('import', 'POST', '/skills/import', 'Import skill from URL', { expectsJsonBody: true }),
     ],
   },
+  {
+    name: 'souls',
+    description: 'Browse and manage soul library templates',
+    commands: [
+      cmd('list', 'GET', '/souls', 'List soul templates'),
+      cmd('get', 'GET', '/souls/:id', 'Get soul template by id'),
+      cmd('create', 'POST', '/souls', 'Create custom soul template', { expectsJsonBody: true }),
+      cmd('update', 'PUT', '/souls/:id', 'Update soul template', { expectsJsonBody: true }),
+      cmd('delete', 'DELETE', '/souls/:id', 'Delete soul template'),
+    ],
+  },
   {
     name: 'tasks',
     description: 'Manage task board items',

package/src/components/activity/activity-feed.tsx

@@ -65,8 +65,15 @@ export function ActivityFeed() {
           <div className="text-center text-text-3 text-[14px] mt-16">No activity yet</div>
         ) : (
           <div className="space-y-1">
-            {entries.map((entry: ActivityEntry) => (
-              <div key={entry.id} className="flex items-start gap-3 py-3 border-b border-white/[0.04]">
+            {entries.map((entry: ActivityEntry, idx: number) => (
+              <div
+                key={entry.id}
+                className="flex items-start gap-3 py-3 border-b border-white/[0.04]"
+                style={{
+                  animation: 'fade-up 0.5s var(--ease-spring) both',
+                  animationDelay: `${Math.min(idx * 0.03, 0.5)}s`
+                }}
+              >
                 <div className="w-8 h-8 rounded-[8px] bg-surface-2 flex items-center justify-center text-[12px] font-700 text-text-3 shrink-0">
                   {ENTITY_ICONS[entry.entityType] || '?'}
                 </div>

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

@@ -38,7 +38,11 @@ export function AgentAvatar({ seed, avatarUrl, name, size = 32, className = '',
   const dot = status && status !== 'idle' ? (
     <span
       className={`absolute -bottom-0.5 -right-0.5 rounded-full ${STATUS_COLORS[status]} ring-2 ring-[#0f0f1a]`}
-      style={{ width: dotSize, height: dotSize }}
+      style={{
+        width: dotSize,
+        height: dotSize,
+        animation: status === 'online' ? 'pulse-subtle 2s ease-in-out infinite' : undefined
+      }}
       title={status === 'busy' ? 'Busy' : 'Online'}
     />
   ) : null

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

@@ -45,6 +45,22 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
   const approvals = useApprovalStore((s) => s.approvals)
   const pendingApprovalCount = Object.values(approvals).filter((a) => a.agentId === agent.id).length
   const [heartbeatPulse, setHeartbeatPulse] = useState(false)
+  const monthlyBudget = typeof agent.monthlyBudget === 'number' && agent.monthlyBudget > 0
+    ? agent.monthlyBudget
+    : null
+  const hasMonthlyBudget = monthlyBudget !== null
+  const spendWindows = [
+    {
+      key: '1h',
+      spend: agent.hourlySpend ?? 0,
+      budget: typeof agent.hourlyBudget === 'number' && agent.hourlyBudget > 0 ? agent.hourlyBudget : null,
+    },
+    {
+      key: '24h',
+      spend: agent.dailySpend ?? 0,
+      budget: typeof agent.dailyBudget === 'number' && agent.dailyBudget > 0 ? agent.dailyBudget : null,
+    },
+  ].filter((entry) => entry.budget !== null)
   useWs(`heartbeat:agent:${agent.id}`, () => {
     setHeartbeatPulse(true)
     setTimeout(() => setHeartbeatPulse(false), 1500)
@@ -226,28 +242,58 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
             <span>Cost: ${agent.totalCost.toFixed(2)}</span>
           )}
         </div>
-        {typeof agent.monthlyBudget === 'number' && agent.monthlyBudget > 0 && (
+        {hasMonthlyBudget && (
           <div className="mt-2">
             <div className="flex items-center justify-between text-[10px] text-text-3/60 mb-1">
-              <span>${(agent.monthlySpend ?? 0).toFixed(2)} / ${agent.monthlyBudget.toFixed(2)}</span>
-              <span className={`font-600 ${(agent.monthlySpend ?? 0) >= agent.monthlyBudget ? 'text-red-400' : 'text-text-3/50'}`}>
+              <span>${(agent.monthlySpend ?? 0).toFixed(2)} / ${monthlyBudget.toFixed(2)}</span>
+              <span className={`font-600 ${(agent.monthlySpend ?? 0) >= monthlyBudget ? 'text-red-400' : 'text-text-3/50'}`}>
                 {agent.budgetAction === 'block' ? 'hard cap' : 'soft cap'}
               </span>
             </div>
-            <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden">
+            <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden relative">
               <div
-                className={`h-full rounded-full transition-all duration-300 ${
-                  (agent.monthlySpend ?? 0) >= agent.monthlyBudget
+                className={`h-full rounded-full transition-all duration-300 relative ${
+                  (agent.monthlySpend ?? 0) >= monthlyBudget
                     ? 'bg-red-400'
-                    : (agent.monthlySpend ?? 0) >= agent.monthlyBudget * 0.8
+                    : (agent.monthlySpend ?? 0) >= monthlyBudget * 0.8
                       ? 'bg-amber-400'
                       : 'bg-accent'
                 }`}
-                style={{ width: `${Math.min(100, ((agent.monthlySpend ?? 0) / agent.monthlyBudget) * 100)}%` }}
-              />
+                style={{ width: `${Math.min(100, ((agent.monthlySpend ?? 0) / monthlyBudget) * 100)}%` }}
+              >
+                {/* Shimmer overlay for active feel */}
+                <div
+                  className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
+                  style={{ animation: 'shimmer-bar 2s linear infinite' }}
+                />
+              </div>
             </div>
           </div>
         )}
+        {spendWindows.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {spendWindows.map((entry) => {
+              const budget = entry.budget as number
+              const ratio = budget > 0 ? (entry.spend / budget) : 0
+              const overCap = ratio >= 1
+              const nearCap = !overCap && ratio >= 0.8
+              return (
+                <span
+                  key={entry.key}
+                  className={`text-[10px] px-2 py-0.5 rounded-[6px] border ${
+                    overCap
+                      ? 'text-red-400 border-red-400/25 bg-red-400/[0.06]'
+                      : nearCap
+                        ? 'text-amber-400 border-amber-400/20 bg-amber-400/[0.06]'
+                        : 'text-text-3/70 border-white/[0.08] bg-white/[0.03]'
+                  }`}
+                >
+                  {entry.key}: ${entry.spend.toFixed(2)} / ${budget.toFixed(2)}
+                </span>
+              )
+            })}
+          </div>
+        )}
       </div>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>