@swarmclawai/swarmclaw 0.6.6 → 0.6.7

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

@@ -6,7 +6,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
-import { createAgent, deleteAgent } from '@/lib/agents'
+import { deleteAgent } from '@/lib/agents'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import {
   DropdownMenu,
@@ -79,11 +79,18 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
     setRunning(false)
   }
 
+  const [cloning, setCloning] = useState(false)
   const handleDuplicate = async () => {
-    const { id: _id, createdAt: _ca, updatedAt: _ua, ...rest } = agent
-    await createAgent({ ...rest, name: agent.name + ' (Copy)' })
-    await loadAgents()
-    toast.success('Agent duplicated')
+    setCloning(true)
+    try {
+      await api('POST', `/agents/${agent.id}/clone`)
+      await loadAgents()
+      toast.success('Agent duplicated')
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : String(err))
+    } finally {
+      setCloning(false)
+    }
   }
 
   const handleDelete = async () => {
@@ -140,7 +147,9 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
             <DropdownMenuItem onClick={() => { togglePinAgent(agent.id); toast.success(agent.pinned ? 'Agent unpinned' : 'Agent pinned') }}>
               {agent.pinned ? 'Unpin' : 'Pin'}
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={handleDuplicate}>Duplicate</DropdownMenuItem>
+            <DropdownMenuItem onClick={handleDuplicate} disabled={cloning}>
+              {cloning ? 'Duplicating...' : 'Duplicate'}
+            </DropdownMenuItem>
             {!isDefault && onSetDefault && (
               <DropdownMenuItem onClick={() => { onSetDefault(agent.id); toast.success(`${agent.name} set as default`) }}>Set Default</DropdownMenuItem>
             )}
@@ -217,6 +226,28 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
             <span>Cost: ${agent.totalCost.toFixed(2)}</span>
           )}
         </div>
+        {typeof agent.monthlyBudget === 'number' && agent.monthlyBudget > 0 && (
+          <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'}`}>
+                {agent.budgetAction === 'block' ? 'hard cap' : 'soft cap'}
+              </span>
+            </div>
+            <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all duration-300 ${
+                  (agent.monthlySpend ?? 0) >= agent.monthlyBudget
+                    ? 'bg-red-400'
+                    : (agent.monthlySpend ?? 0) >= agent.monthlyBudget * 0.8
+                      ? 'bg-amber-400'
+                      : 'bg-accent'
+                }`}
+                style={{ width: `${Math.min(100, ((agent.monthlySpend ?? 0) / agent.monthlyBudget) * 100)}%` }}
+              />
+            </div>
+          </div>
+        )}
       </div>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>

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

@@ -5,6 +5,8 @@ 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 { api } from '@/lib/api-client'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import type { Agent, Session } from '@/types'
 import { AgentAvatar } from './agent-avatar'
 import { toast } from 'sonner'
@@ -32,6 +34,39 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
   const chatrooms = useChatroomStore((s) => s.chatrooms)
   const chatroomStreaming = useChatroomStore((s) => s.streamingAgents)
   const [search, setSearch] = useState('')
+  const [bulkMode, setBulkMode] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [confirmBulkDelete, setConfirmBulkDelete] = useState(false)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+
+  const toggleSelected = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  const handleBulkDelete = useCallback(async () => {
+    // Collect session IDs for selected agents
+    const sessionIds = [...selectedIds]
+      .map((agentId) => {
+        const agent = agents[agentId]
+        return agent?.threadSessionId
+      })
+      .filter(Boolean) as string[]
+    if (!sessionIds.length) { toast.error('No chats to delete'); return }
+    try {
+      await api('DELETE', '/sessions', { ids: sessionIds })
+      await loadSessions()
+      toast.success(`Deleted ${sessionIds.length} chat(s)`)
+      setBulkMode(false)
+      setSelectedIds(new Set())
+    } catch {
+      toast.error('Failed to delete chats')
+    }
+  }, [selectedIds, agents, loadSessions])
 
   // FLIP animation refs
   const rowRefs = useRef<Map<string, HTMLElement>>(new Map())
@@ -169,7 +204,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
 
   return (
     <div className="flex-1 overflow-y-auto">
-      {/* Filter control */}
+      {/* Filter control + bulk mode toggle */}
       {sortedAgents.length > 2 && (
         <div className="flex items-center gap-1 px-4 pt-2.5 pb-1">
           {(['all', 'active', 'recent'] as const).map((f) => (
@@ -185,6 +220,28 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
               {f}
             </button>
           ))}
+          <button
+            type="button"
+            onClick={() => { setBulkMode(!bulkMode); setSelectedIds(new Set()) }}
+            aria-label={bulkMode ? 'Exit selection mode' : 'Select chats'}
+            className={`ml-auto label-mono px-2.5 py-1 rounded-[6px] border-none cursor-pointer transition-colors
+              ${bulkMode ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
+          >
+            {bulkMode ? 'Cancel' : 'Select'}
+          </button>
+        </div>
+      )}
+      {/* Bulk action bar */}
+      {bulkMode && selectedIds.size > 0 && (
+        <div className="flex items-center gap-2 px-4 py-2 bg-white/[0.02] border-b border-white/[0.04]">
+          <span className="text-[12px] text-text-2 font-500 flex-1">{selectedIds.size} selected</span>
+          <button
+            onClick={() => setConfirmBulkDelete(true)}
+            className="px-3 py-1.5 rounded-[8px] border-none bg-red-500/10 text-red-400 text-[12px] font-600 cursor-pointer hover:bg-red-500/20 transition-colors"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Delete
+          </button>
         </div>
       )}
       {(sortedAgents.length > 5 || search) && (
@@ -219,9 +276,19 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                 ${isActive
                   ? 'bg-accent-soft/80 border border-accent-bright/20'
                   : 'bg-transparent hover:bg-white/[0.02]'}`}
-              onClick={() => handleSelect(agent)}
+              onClick={() => bulkMode ? toggleSelected(agent.id) : handleSelect(agent)}
             >
               <div className="flex items-center gap-2.5">
+                {bulkMode && (
+                  <div className={`w-5 h-5 rounded-[6px] border-2 flex items-center justify-center shrink-0 transition-colors
+                    ${selectedIds.has(agent.id) ? 'bg-accent-bright border-accent-bright' : 'border-white/20 bg-transparent'}`}>
+                    {selectedIds.has(agent.id) && (
+                      <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>
+                )}
                 <div className="relative shrink-0">
                   <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={36} />
                   <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-bg ${
@@ -303,6 +370,15 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
           )
         })}
       </div>
+      <ConfirmDialog
+        open={confirmBulkDelete}
+        title="Delete Chats"
+        message={`Delete ${selectedIds.size} chat(s)? This cannot be undone.`}
+        confirmLabel="Delete"
+        danger
+        onConfirm={() => { setConfirmBulkDelete(false); handleBulkDelete() }}
+        onCancel={() => setConfirmBulkDelete(false)}
+      />
     </div>
   )
 }

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

@@ -114,6 +114,9 @@ export function AgentSheet() {
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
   const [heartbeatModel, setHeartbeatModel] = useState('')
   const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
+  const [budgetEnabled, setBudgetEnabled] = useState(false)
+  const [monthlyBudget, setMonthlyBudget] = useState('')
+  const [budgetAction, setBudgetAction] = useState<'warn' | 'block'>('warn')
   const [agentWallet, setAgentWallet] = useState<(Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }) | null>(null)
   const [addingKey, setAddingKey] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
@@ -195,6 +198,9 @@ export function AgentSheet() {
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
         setHeartbeatPrompt(editing.heartbeatPrompt || '')
+        setBudgetEnabled(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0)
+        setMonthlyBudget(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0 ? String(editing.monthlyBudget) : '')
+        setBudgetAction(editing.budgetAction || 'warn')
         // Load wallet if agent has one
         if (editing.walletId) {
           api<Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }>('GET', `/wallets/${editing.walletId}`)
@@ -234,6 +240,9 @@ export function AgentSheet() {
         setHeartbeatIntervalSec('')
         setHeartbeatModel('')
         setHeartbeatPrompt('')
+        setBudgetEnabled(false)
+        setMonthlyBudget('')
+        setBudgetAction('warn')
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -331,6 +340,8 @@ export function AgentSheet() {
       heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
       heartbeatModel: heartbeatModel.trim() || null,
       heartbeatPrompt: heartbeatPrompt.trim() || null,
+      monthlyBudget: budgetEnabled && monthlyBudget ? Number(monthlyBudget) : null,
+      budgetAction: budgetEnabled ? budgetAction : undefined,
     }
     if (editing) {
       await updateAgent(editing.id, data)
@@ -732,6 +743,74 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Periodic check-in runs on idle sessions using this agent. Processes pending events and monitors status.</p>
       </div>
 
+      {/* Monthly Budget */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-3">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Monthly Budget</label>
+          <button
+            type="button"
+            onClick={() => setBudgetEnabled(!budgetEnabled)}
+            className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${budgetEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+          >
+            <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${budgetEnabled ? 'translate-x-[18px]' : ''}`} />
+          </button>
+        </div>
+        {budgetEnabled && (
+          <div className="space-y-4 mt-3">
+            <div>
+              <label className="block text-[12px] text-text-3/70 mb-1.5">Budget cap (USD)</label>
+              <div className="relative">
+                <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                <input
+                  type="number"
+                  min="0.01"
+                  step="0.01"
+                  value={monthlyBudget}
+                  onChange={(e) => setMonthlyBudget(e.target.value)}
+                  placeholder="10.00"
+                  className={`${inputClass} pl-7`}
+                  style={{ fontFamily: 'inherit' }}
+                />
+              </div>
+            </div>
+            <div>
+              <label className="block text-[12px] text-text-3/70 mb-1.5">When exceeded</label>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setBudgetAction('warn')}
+                  className={`flex-1 px-3 py-2.5 rounded-[10px] border text-[13px] font-600 cursor-pointer transition-all ${
+                    budgetAction === 'warn'
+                      ? 'border-amber-400/40 bg-amber-400/[0.08] text-amber-400'
+                      : 'border-white/[0.08] bg-transparent text-text-3 hover:bg-white/[0.04]'
+                  }`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Warn
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setBudgetAction('block')}
+                  className={`flex-1 px-3 py-2.5 rounded-[10px] border text-[13px] font-600 cursor-pointer transition-all ${
+                    budgetAction === 'block'
+                      ? 'border-red-400/40 bg-red-400/[0.08] text-red-400'
+                      : 'border-white/[0.08] bg-transparent text-text-3 hover:bg-white/[0.04]'
+                  }`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Block
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+        <p className="text-[11px] text-text-3/70 mt-1.5">
+          {budgetAction === 'block'
+            ? 'Cap monthly spend for this agent. When exceeded, chat runs are blocked until the next month.'
+            : 'Cap monthly spend for this agent. When exceeded, a warning is shown but runs continue.'}
+        </p>
+      </div>
+
       {/* Wallet Section */}
       {editingId && (
         <WalletSection