@swarmclawai/swarmclaw 0.6.4 → 0.6.7

package/src/components/shared/settings/section-user-preferences.tsx

@@ -35,11 +35,11 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
         </div>
         <button
           type="button"
-          onClick={() => patchSettings({ suggestionsEnabled: appSettings.suggestionsEnabled === false })}
-          className={`relative w-9 h-5 rounded-full transition-colors ${appSettings.suggestionsEnabled !== false ? 'bg-accent-bright' : 'bg-white/[0.10]'}`}
+          onClick={() => patchSettings({ suggestionsEnabled: !appSettings.suggestionsEnabled })}
+          className={`relative w-9 h-5 rounded-full transition-colors ${appSettings.suggestionsEnabled ? 'bg-accent-bright' : 'bg-white/[0.10]'}`}
           style={{ fontFamily: 'inherit' }}
         >
-          <span className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${appSettings.suggestionsEnabled !== false ? 'translate-x-4' : ''}`} />
+          <span className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${appSettings.suggestionsEnabled ? 'translate-x-4' : ''}`} />
         </button>
       </div>
 
@@ -70,7 +70,7 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
                   : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={18} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={18} />
               {agent.name}
             </button>
           ))}

package/src/components/skills/skill-list.tsx

@@ -309,7 +309,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
                     <div className="flex items-center gap-1.5 mt-1.5">
                       <div className="flex items-center -space-x-1.5">
                         {scopedAgents.slice(0, 5).map((agent) => (
-                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} className="ring-1 ring-surface" />
                         ))}
                       </div>
                       {scopedAgents.length > 5 && (

package/src/components/skills/skill-sheet.tsx

@@ -255,7 +255,7 @@ export function SkillSheet() {
                     }`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                     <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                     {selected && (
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">

package/src/components/tasks/task-board.tsx

@@ -264,7 +264,7 @@ export function TaskBoard() {
             >
               {filterAgentId && agents[filterAgentId] ? (
                 <>
-                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} name={agents[filterAgentId].name} size={18} />
+                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={18} />
                   {agents[filterAgentId].name}
                 </>
               ) : 'All Agents'}
@@ -290,7 +290,7 @@ export function TaskBoard() {
                       ${filterAgentId === a.id ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={20} />
+                    <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={20} />
                     {a.name}
                   </button>
                 ))}
@@ -480,7 +480,7 @@ export function TaskBoard() {
                     className="w-full flex items-center gap-2 px-3 py-2 text-[12px] font-600 cursor-pointer border-none text-left bg-transparent text-text-3 hover:bg-white/[0.06] hover:text-text transition-colors"
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={16} />
+                    <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={16} />
                     {a.name}
                   </button>
                 ))}

package/src/components/tasks/task-card.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { updateTask, archiveTask } from '@/lib/tasks'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import type { BoardTask } from '@/types'
 
 function timeAgo(ts: number) {
@@ -30,7 +31,9 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const setActiveView = useAppStore((s) => s.setActiveView)
   const [dragging, setDragging] = useState(false)
+  const [confirmArchive, setConfirmArchive] = useState(false)
 
+  const tasks = useAppStore((s) => s.tasks)
   const agent = agents[task.agentId]
   const project = task.projectId ? projects[task.projectId] : null
 
@@ -117,7 +120,7 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
         )}
         {isBlocked && (
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-rose-400 shrink-0 mt-0.5">
-            <title>{`Blocked by ${task.blockedBy?.length} task(s)`}</title>
+            <title>{`Blocked by: ${(task.blockedBy || []).map((bid) => tasks[bid]?.title || bid).join(', ')}`}</title>
             <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
           </svg>
         )}
@@ -211,6 +214,14 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
             {task.comments.length}
           </span>
         )}
+        {Array.isArray(task.blocks) && task.blocks.length > 0 && (
+          <span
+            className="px-1.5 py-0.5 rounded-[5px] bg-amber-500/10 text-amber-400 text-[10px] font-600"
+            title={`Blocks: ${task.blocks.map((bid) => tasks[bid]?.title || bid).join(', ')}`}
+          >
+            blocks {task.blocks.length}
+          </span>
+        )}
 
         {task.status === 'backlog' && (
           <button
@@ -236,7 +247,8 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
 
         {(task.status === 'completed' || task.status === 'failed') && !task.sessionId && (
           <button
-            onClick={handleArchive}
+            onClick={(e) => { e.stopPropagation(); setConfirmArchive(true) }}
+            aria-label="Archive task"
             className="ml-auto px-2.5 py-1 rounded-[8px] text-[11px] font-600 bg-white/[0.04] text-text-3 border-none cursor-pointer
               opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white/[0.08]"
             style={{ fontFamily: 'inherit' }}
@@ -304,6 +316,14 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
           ))}
         </div>
       )}
+      <ConfirmDialog
+        open={confirmArchive}
+        title="Archive Task"
+        message={`Archive "${task.title}"? You can view archived tasks later.`}
+        confirmLabel="Archive"
+        onConfirm={() => { setConfirmArchive(false); handleArchive({ stopPropagation: () => {} } as React.MouseEvent) }}
+        onCancel={() => setConfirmArchive(false)}
+      />
     </div>
   )
 }

package/src/components/tasks/task-sheet.tsx

@@ -54,6 +54,8 @@ export function TaskSheet() {
   const [tags, setTags] = useState<string[]>([])
   const [tagInput, setTagInput] = useState('')
   const [blockedBy, setBlockedBy] = useState<string[]>([])
+  const [depSearch, setDepSearch] = useState('')
+  const [depError, setDepError] = useState<string | null>(null)
   const [dueAt, setDueAt] = useState<string>('')
   const [customFields, setCustomFields] = useState<Record<string, string | number | boolean>>({})
   const [priority, setPriority] = useState<'low' | 'medium' | 'high' | 'critical' | ''>('')
@@ -76,6 +78,8 @@ export function TaskSheet() {
         setFile(editing.file || null)
         setTags(editing.tags || [])
         setBlockedBy(editing.blockedBy || [])
+        setDepSearch('')
+        setDepError(null)
         setDueAt(editing.dueAt ? new Date(editing.dueAt).toISOString().slice(0, 10) : '')
         setCustomFields(editing.customFields || {})
         setPriority(editing.priority || '')
@@ -89,6 +93,8 @@ export function TaskSheet() {
         setFile(null)
         setTags([])
         setBlockedBy([])
+        setDepSearch('')
+        setDepError(null)
         setDueAt('')
         setCustomFields({})
         setPriority('')
@@ -119,11 +125,25 @@ export function TaskSheet() {
       customFields: Object.keys(customFields).length > 0 ? customFields : undefined,
       priority: priority || undefined,
     } as Partial<BoardTask> & { title: string; description: string; agentId: string }
-    if (editing) {
-      await updateTask(editing.id, payload)
-    } else {
-      await createTask(payload)
+    try {
+      if (editing) {
+        const res = await updateTask(editing.id, payload)
+        if (res && typeof res === 'object' && 'error' in res) {
+          setDepError(String((res as unknown as Record<string, unknown>).error))
+          return
+        }
+      } else {
+        const res = await createTask(payload)
+        if (res && typeof res === 'object' && 'error' in res) {
+          setDepError(String((res as unknown as Record<string, unknown>).error))
+          return
+        }
+      }
+    } catch (err: unknown) {
+      setDepError(err instanceof Error ? err.message : String(err))
+      return
     }
+    setDepError(null)
     await loadTasks()
     onClose()
   }
@@ -244,7 +264,7 @@ export function TaskSheet() {
           <div className="mb-8">
             <SectionLabel>Agent</SectionLabel>
             <div className="flex items-center gap-2.5 px-4 py-3 rounded-[14px] border border-white/[0.06] bg-surface">
-              <AgentAvatar seed={taskAgent.avatarSeed || null} name={taskAgent.name} size={24} />
+              <AgentAvatar seed={taskAgent.avatarSeed || null} avatarUrl={taskAgent.avatarUrl} name={taskAgent.name} size={24} />
               <span className="text-[14px] font-600 text-text">{taskAgent.name}</span>
             </div>
           </div>
@@ -366,6 +386,26 @@ export function TaskSheet() {
           </div>
         )}
 
+        {Array.isArray(editing.outputFiles) && editing.outputFiles.length > 0 && (
+          <div className="mb-8">
+            <SectionLabel>Output Files</SectionLabel>
+            <div className="flex flex-col gap-1.5">
+              {editing.outputFiles.map((fileRef) => (
+                <code key={fileRef} className="text-[12px] text-text-3 font-mono break-all">
+                  {fileRef}
+                </code>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {editing.completionReportPath && (
+          <div className="mb-8">
+            <SectionLabel>Task Report</SectionLabel>
+            <code className="text-[12px] text-text-3 font-mono break-all">{editing.completionReportPath}</code>
+          </div>
+        )}
+
         {/* CLI Sessions */}
         {(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.cliResumeId) && (
           <div className="mb-8">
@@ -663,18 +703,73 @@ export function TaskSheet() {
       {/* Dependencies */}
       <div className="mb-8">
         <SectionLabel>Blocked By <span className="normal-case tracking-normal font-normal text-text-3">(tasks that must complete first)</span></SectionLabel>
-        <select
-          multiple
-          aria-label="Assign agents"
-          value={blockedBy}
-          onChange={(e) => setBlockedBy(Array.from(e.target.selectedOptions, (o) => o.value))}
-          className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[13px] outline-none min-h-[80px] focus-glow"
-          style={{ fontFamily: 'inherit' }}
-        >
-          {Object.values(tasks)
-            .filter((t) => t.id !== editingId && t.status !== 'archived')
-            .map((t) => <option key={t.id} value={t.id}>{t.title} ({t.status})</option>)}
-        </select>
+        {/* Selected blockers as removable chips */}
+        {blockedBy.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mb-3">
+            {blockedBy.map((bid) => {
+              const bt = tasks[bid]
+              return (
+                <span key={bid} className="inline-flex items-center gap-1 px-2.5 py-1 rounded-[8px] bg-rose-500/10 text-rose-400 text-[12px] font-600">
+                  {bt ? bt.title : bid}
+                  <button
+                    onClick={() => setBlockedBy((prev) => prev.filter((b) => b !== bid))}
+                    className="text-rose-400/60 hover:text-rose-400 cursor-pointer border-none bg-transparent p-0 text-[14px] leading-none"
+                  >
+                    &times;
+                  </button>
+                </span>
+              )
+            })}
+          </div>
+        )}
+        {/* Searchable dropdown for adding dependencies */}
+        <div className="relative">
+          <input
+            type="text"
+            value={depSearch}
+            onChange={(e) => setDepSearch(e.target.value)}
+            placeholder="Search tasks to add as dependency..."
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+          {depSearch.trim() && (
+            <div className="absolute z-20 top-full left-0 right-0 mt-1 max-h-[200px] overflow-y-auto rounded-[12px] border border-white/[0.08] bg-surface shadow-xl">
+              {Object.values(tasks)
+                .filter((t) =>
+                  t.id !== editingId &&
+                  t.status !== 'archived' &&
+                  !blockedBy.includes(t.id) &&
+                  t.title.toLowerCase().includes(depSearch.toLowerCase())
+                )
+                .slice(0, 10)
+                .map((t) => (
+                  <button
+                    key={t.id}
+                    onClick={() => {
+                      setBlockedBy((prev) => [...prev, t.id])
+                      setDepSearch('')
+                    }}
+                    className="w-full text-left px-4 py-2.5 text-[13px] text-text-2 hover:bg-surface-2 cursor-pointer border-none bg-transparent transition-colors flex items-center gap-2"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <span className="flex-1 truncate">{t.title}</span>
+                    <span className="text-[10px] text-text-3 shrink-0">({t.status})</span>
+                  </button>
+                ))}
+              {Object.values(tasks).filter((t) =>
+                t.id !== editingId &&
+                t.status !== 'archived' &&
+                !blockedBy.includes(t.id) &&
+                t.title.toLowerCase().includes(depSearch.toLowerCase())
+              ).length === 0 && (
+                <div className="px-4 py-3 text-[13px] text-text-3">No matching tasks</div>
+              )}
+            </div>
+          )}
+        </div>
+        {depError && (
+          <p className="mt-2 text-[12px] text-red-400 font-600">{depError}</p>
+        )}
         {editing && Array.isArray(editing.blocks) && editing.blocks.length > 0 && (
           <div className="mt-3">
             <span className="text-[11px] font-600 text-text-3 uppercase tracking-[0.06em]">Blocks:</span>

package/src/components/usage/metrics-dashboard.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useCallback } from 'react'
 import {
-  LineChart, Line, BarChart, Bar, PieChart, Pie, Cell,
+  LineChart, Line, BarChart, Bar, Cell,
   XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
 } from 'recharts'
 import { useAppStore } from '@/stores/use-app-store'
@@ -32,7 +32,7 @@ interface UsageResponse {
   records: unknown[]
   totalTokens: number
   totalCost: number
-  byAgent: Record<string, { tokens: number; cost: number }>
+  byAgent: Record<string, { name: string; cost: number; tokens: number; count: number }>
   byProvider: Record<string, { tokens: number; cost: number }>
   timeSeries: TimePoint[]
   providerHealth?: Record<string, ProviderHealthEntry>
@@ -171,8 +171,8 @@ export function MetricsDashboard() {
   const agentData = Object.entries(data?.byAgent ?? {})
     .sort((a, b) => b[1].cost - a[1].cost)
     .slice(0, 10)
-    .map(([name, v]) => ({
-      name: name.length > 12 ? name.slice(0, 12) + '…' : name,
+    .map(([_id, v]) => ({
+      name: v.name.length > 16 ? v.name.slice(0, 16) + '…' : v.name,
       cost: Math.round(v.cost * 10000) / 10000,
     }))
 
@@ -270,32 +270,20 @@ export function MetricsDashboard() {
               )}
             </ChartCard>
 
-            <ChartCard title="Cost by Session">
+            <ChartCard title="Agent Breakdown">
               {agentData.length > 0 ? (
                 <ResponsiveContainer width="100%" height={280}>
-                  <PieChart>
-                    <Pie
-                      data={agentData}
-                      cx="50%"
-                      cy="50%"
-                      innerRadius={60}
-                      outerRadius={100}
-                      paddingAngle={2}
-                      dataKey="cost"
-                      nameKey="name"
-                    >
+                  <BarChart data={agentData} layout="vertical" margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" horizontal={false} />
+                    <XAxis type="number" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v}`} />
+                    <YAxis type="category" dataKey="name" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} width={100} />
+                    <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatCost(value ?? 0), 'Cost']} />
+                    <Bar dataKey="cost" radius={[0, 4, 4, 0]}>
                       {agentData.map((_entry, i) => (
                         <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
                       ))}
-                    </Pie>
-                    <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatCost(value ?? 0), 'Cost']} />
-                    <Legend
-                      verticalAlign="bottom"
-                      iconType="circle"
-                      iconSize={8}
-                      formatter={(value: string) => <span style={{ color: '#a0a0b0', fontSize: 11 }}>{value}</span>}
-                    />
-                  </PieChart>
+                    </Bar>
+                  </BarChart>
                 </ResponsiveContainer>
               ) : (
                 <EmptyChart />

package/src/components/wallets/wallet-approval-dialog.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import type { WalletTransaction } from '@/types'
+
+interface WalletApprovalDialogProps {
+  transaction: WalletTransaction
+  walletAddress: string
+  onClose: () => void
+  onResolved: () => void
+}
+
+export function WalletApprovalDialog({ transaction, walletAddress, onClose, onResolved }: WalletApprovalDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleDecision = useCallback(async (decision: 'approve' | 'deny') => {
+    setSubmitting(true)
+    setError(null)
+    try {
+      await api('POST', `/wallets/${transaction.walletId}/approve`, {
+        transactionId: transaction.id,
+        decision,
+      })
+      onResolved()
+      onClose()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setSubmitting(false)
+    }
+  }, [transaction, onResolved, onClose])
+
+  const amountSol = transaction.amountLamports / 1e9
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative w-full max-w-md rounded-[16px] border border-white/[0.08] bg-surface-1 shadow-2xl p-6 space-y-5">
+        <div className="flex items-center gap-2">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-amber-400">
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+            <line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          <h3 className="font-display text-[15px] font-600 text-text-1">Transaction Approval</h3>
+        </div>
+
+        <div className="p-4 rounded-[12px] bg-black/20 border border-white/[0.06] space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-text-3/70 uppercase tracking-wide">Amount</span>
+            <span className="text-[16px] font-600 text-text-1">{amountSol.toFixed(4)} SOL</span>
+          </div>
+          <div>
+            <span className="text-[11px] text-text-3/70 uppercase tracking-wide block mb-1">From</span>
+            <code className="text-[10px] text-text-3 font-mono break-all">{walletAddress}</code>
+          </div>
+          <div>
+            <span className="text-[11px] text-text-3/70 uppercase tracking-wide block mb-1">To</span>
+            <code className="text-[10px] text-text-3 font-mono break-all">{transaction.toAddress}</code>
+          </div>
+          {transaction.memo && (
+            <div>
+              <span className="text-[11px] text-text-3/70 uppercase tracking-wide block mb-1">Reason</span>
+              <p className="text-[12px] text-text-2">{transaction.memo}</p>
+            </div>
+          )}
+        </div>
+
+        <p className="text-[11px] text-amber-400/80">
+          Crypto transactions are irreversible. Verify the recipient address carefully.
+        </p>
+
+        {error && <p className="text-[11px] text-red-400">{error}</p>}
+
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={() => handleDecision('deny')}
+            disabled={submitting}
+            className="flex-1 px-4 py-2.5 rounded-[10px] border border-white/[0.08] bg-surface text-text-3 text-[12px] font-600 hover:text-red-400 hover:border-red-400/30 transition-colors cursor-pointer disabled:opacity-50"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Deny
+          </button>
+          <button
+            type="button"
+            onClick={() => handleDecision('approve')}
+            disabled={submitting}
+            className="flex-1 px-4 py-2.5 rounded-[10px] bg-accent text-white text-[12px] font-600 hover:brightness-110 transition-all cursor-pointer disabled:opacity-50"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {submitting ? 'Processing...' : 'Approve & Send'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}