@swarmclawai/swarmclaw 0.5.1 → 0.5.2

package/src/components/chat/exec-approval-card.tsx

@@ -14,8 +14,9 @@ export function ExecApprovalCard({ approval }: Props) {
     resolveApproval(approval.id, decision)
   }
 
+  const alreadyResolved = approval.error?.includes('Already resolved') ?? false
   const expired = approval.expiresAtMs < Date.now()
-  const disabled = !!approval.resolving || expired
+  const disabled = !!approval.resolving || expired || alreadyResolved
 
   return (
     <div className="my-2 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] p-3.5">
@@ -47,11 +48,13 @@ export function ExecApprovalCard({ approval }: Props) {
         )}
       </div>
 
-      {approval.error && (
+      {approval.error && !alreadyResolved && (
         <p className="text-[12px] text-red-400 mb-2">{approval.error}</p>
       )}
 
-      {expired ? (
+      {alreadyResolved ? (
+        <p className="text-[12px] text-text-3/50 italic">Already resolved by another session</p>
+      ) : expired ? (
         <p className="text-[12px] text-text-3/50 italic">Approval expired</p>
       ) : (
         <div className="flex items-center gap-2">

package/src/components/layout/app-layout.tsx

@@ -35,8 +35,9 @@ import { KnowledgeList } from '@/components/knowledge/knowledge-list'
 import { KnowledgeSheet } from '@/components/knowledge/knowledge-sheet'
 import { PluginList } from '@/components/plugins/plugin-list'
 import { PluginSheet } from '@/components/plugins/plugin-sheet'
-import { UsageList } from '@/components/usage/usage-list'
 import { RunList } from '@/components/runs/run-list'
+import { ActivityFeed } from '@/components/activity/activity-feed'
+import { MetricsDashboard } from '@/components/usage/metrics-dashboard'
 import { ProjectList } from '@/components/projects/project-list'
 import { ProjectSheet } from '@/components/projects/project-sheet'
 import { NetworkBanner } from './network-banner'
@@ -314,6 +315,11 @@ export function AppLayout() {
                 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
               </svg>
             </NavItem>
+            <NavItem view="activity" label="Activity" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('activity')}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <path d="M12 8v4l3 3" /><circle cx="12" cy="12" r="10" />
+              </svg>
+            </NavItem>
             <NavItem view="logs" label="Logs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('logs')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><polyline points="10 9 9 9 8 9" />
@@ -463,7 +469,6 @@ export function AppLayout() {
           {activeView === 'webhooks' && <WebhookList inSidebar />}
           {activeView === 'mcp_servers' && <McpServerList />}
           {activeView === 'knowledge' && <KnowledgeList />}
-          {activeView === 'usage' && <UsageList />}
           {activeView === 'runs' && <RunList />}
           {activeView === 'logs' && <LogList />}
         </div>
@@ -562,7 +567,6 @@ export function AppLayout() {
             {activeView === 'knowledge' && <KnowledgeList />}
             {activeView === 'plugins' && <PluginList inSidebar />}
             {activeView === 'projects' && <ProjectList />}
-            {activeView === 'usage' && <UsageList />}
             {activeView === 'runs' && <RunList />}
             {activeView === 'logs' && <LogList />}
           </div>
@@ -596,6 +600,10 @@ export function AppLayout() {
             <TaskBoard />
           ) : activeView === 'memory' ? (
             <MemoryDetail />
+          ) : activeView === 'activity' ? (
+            <ActivityFeed />
+          ) : activeView === 'usage' ? (
+            <MetricsDashboard />
           ) : activeView === 'settings' ? (
             <SettingsPage />
           ) : !sidebarOpen && FULL_WIDTH_VIEWS.has(activeView) ? (
@@ -604,7 +612,7 @@ export function AppLayout() {
                 <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">
                   {activeView === 'mcp_servers' ? 'MCP Servers' : activeView.replace('_', ' ')}
                 </h2>
-                {activeView !== 'usage' && activeView !== 'runs' && activeView !== 'logs' && (
+                {activeView !== 'runs' && activeView !== 'logs' && (
                   <button
                     onClick={openNewSheet}
                     className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 text-accent-bright bg-accent-soft hover:bg-[#6366F1]/15 transition-all cursor-pointer"
@@ -627,7 +635,6 @@ export function AppLayout() {
               {activeView === 'knowledge' && <KnowledgeList />}
               {activeView === 'plugins' && <PluginList />}
               {activeView === 'projects' && <ProjectList />}
-              {activeView === 'usage' && <UsageList />}
               {activeView === 'runs' && <RunList />}
               {activeView === 'logs' && <LogList />}
             </div>
@@ -742,16 +749,17 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
   knowledge: 'Shared knowledge base accessible by all agents',
   logs: 'Application logs & error tracking',
   plugins: 'Extend agent capabilities with custom plugins',
-  usage: 'Token usage analytics & cost tracking',
+  usage: 'Usage metrics, cost tracking & agent performance',
   runs: 'Live run monitoring & history',
   settings: 'Manage providers, API keys & orchestrator engine',
   projects: 'Group agents, tasks & schedules into projects',
+  activity: 'Audit trail of all entity mutations',
 }
 
 const FULL_WIDTH_VIEWS = new Set<AppView>([
   'schedules', 'secrets', 'providers', 'skills',
   'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins',
-  'usage', 'runs', 'logs', 'settings', 'projects',
+  'usage', 'runs', 'logs', 'settings', 'projects', 'activity',
 ])
 
 const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; title: string; description: string; features: string[] }> = {
@@ -851,6 +859,12 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents'>, { icon: string; titl
     description: 'Organize your work into projects. Group agents, tasks, and schedules under a common scope.',
     features: ['Create named projects with color badges', 'Assign agents and tasks to projects', 'Filter sidebar views by project', 'Global view when no filter is active'],
   },
+  activity: {
+    icon: 'clock',
+    title: 'Activity',
+    description: 'Audit trail of all entity mutations across the system.',
+    features: ['Track agent, task, and connector changes', 'Filter by entity type and action', 'Real-time updates via WebSocket', 'Relative timestamps'],
+  },
 }
 
 function ViewEmptyState({ view }: { view: AppView }) {

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

@@ -18,16 +18,40 @@ export function TaskBoard() {
   const agents = useAppStore((s) => s.agents)
   const showArchived = useAppStore((s) => s.showArchivedTasks)
   const setShowArchived = useAppStore((s) => s.setShowArchivedTasks)
-  const [filterAgentId, setFilterAgentId] = useState<string>('')
+  // URL-based filter state
+  const [filterAgentId, setFilterAgentId] = useState<string>(() => {
+    if (typeof window === 'undefined') return ''
+    return new URLSearchParams(window.location.search).get('agent') || ''
+  })
+  const [filterTag, setFilterTag] = useState<string>(() => {
+    if (typeof window === 'undefined') return ''
+    return new URLSearchParams(window.location.search).get('tag') || ''
+  })
+
+  // Sync filters to URL
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const params = new URLSearchParams()
+    if (filterAgentId) params.set('agent', filterAgentId)
+    if (filterTag) params.set('tag', filterTag)
+    const qs = params.toString()
+    const newUrl = `${window.location.pathname}${qs ? `?${qs}` : ''}`
+    window.history.replaceState(null, '', newUrl)
+  }, [filterAgentId, filterTag])
 
   useEffect(() => { loadTasks(); loadAgents() }, [])
   useWs('tasks', loadTasks, 5000)
 
+  // Collect all unique tags across tasks
+  const allTags = Array.from(new Set(Object.values(tasks).flatMap((t) => t.tags || []))).sort()
+
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 
   const tasksByStatus = (status: BoardTaskStatus) =>
     Object.values(tasks)
-      .filter((t) => t.status === status && (!filterAgentId || t.agentId === filterAgentId))
+      .filter((t) => t.status === status
+        && (!filterAgentId || t.agentId === filterAgentId)
+        && (!filterTag || (t.tags && t.tags.includes(filterTag))))
       .sort((a, b) => b.updatedAt - a.updatedAt)
 
   const handleDrop = useCallback(async (taskId: string, newStatus: BoardTaskStatus) => {
@@ -59,6 +83,20 @@ export function TaskBoard() {
               <option key={a.id} value={a.id}>{a.name}</option>
             ))}
           </select>
+          {allTags.length > 0 && (
+            <select
+              value={filterTag}
+              onChange={(e) => setFilterTag(e.target.value)}
+              className="px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+                bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03] appearance-none"
+              style={{ fontFamily: 'inherit', minWidth: 110 }}
+            >
+              <option value="">All Tags</option>
+              {allTags.map((tag) => (
+                <option key={tag} value={tag}>{tag}</option>
+              ))}
+            </select>
+          )}
           <button
             onClick={() => setShowArchived(!showArchived)}
             className={`px-4 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border

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

@@ -4,7 +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 type { BoardTask, BoardTaskStatus } from '@/types'
+import type { BoardTask } from '@/types'
 
 function timeAgo(ts: number) {
   const diff = Date.now() - ts
@@ -25,6 +25,14 @@ export function TaskCard({ task }: { task: BoardTask }) {
 
   const agent = agents[task.agentId]
 
+  const isBlocked = Array.isArray(task.blockedBy) && task.blockedBy.length > 0
+  const isOverdue = task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
+  const borderColor = isBlocked ? 'border-l-rose-500'
+    : task.pendingApproval ? 'border-l-amber-500'
+    : task.status === 'running' ? 'border-l-emerald-500'
+    : task.status === 'failed' ? 'border-l-red-500'
+    : 'border-l-transparent'
+
   const handleQueue = async (e: React.MouseEvent) => {
     e.stopPropagation()
     await updateTask(task.id, { status: 'queued' })
@@ -64,17 +72,47 @@ export function TaskCard({ task }: { task: BoardTask }) {
         setEditingTaskId(task.id)
         setTaskSheetOpen(true)
       }}
-      className={`p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 cursor-grab active:cursor-grabbing
+      className={`p-4 rounded-[14px] border border-white/[0.06] border-l-[3px] ${borderColor} bg-surface hover:bg-surface-2 cursor-grab active:cursor-grabbing
         transition-all group ${dragging ? 'opacity-40 scale-[0.97]' : ''}`}
     >
       <div className="flex items-start gap-3 mb-3">
+        {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>
+            <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        )}
         <h4 className="flex-1 text-[14px] font-600 text-text leading-[1.4] line-clamp-2">{task.title}</h4>
+        {isBlocked && (
+          <span className="px-1.5 py-0.5 rounded-[5px] bg-rose-500/10 text-rose-400 text-[10px] font-600 shrink-0">
+            {task.blockedBy?.length}
+          </span>
+        )}
       </div>
 
       {task.description && (
         <p className="text-[12px] text-text-3 line-clamp-2 mb-3">{task.description}</p>
       )}
 
+      {/* Tags */}
+      {task.tags && task.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1 mb-3">
+          {task.tags.map((tag) => (
+            <span key={tag} className="px-1.5 py-0.5 rounded-[5px] bg-indigo-500/10 text-indigo-400 text-[10px] font-600">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Due date */}
+      {task.dueAt && (
+        <p className={`text-[11px] mb-3 font-600 ${isOverdue ? 'text-red-400' : 'text-text-3/60'}`}>
+          Due {new Date(task.dueAt).toLocaleDateString([], { month: 'short', day: 'numeric' })}
+          {isOverdue && ' (overdue)'}
+        </p>
+      )}
+
       {task.images && task.images.length > 0 && (
         <div className="flex gap-1.5 mb-3 overflow-x-auto">
           {task.images.slice(0, 3).map((url, i) => (

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

@@ -25,6 +25,9 @@ export function TaskSheet() {
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
 
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
   const [agentId, setAgentId] = useState('')
@@ -33,6 +36,11 @@ export function TaskSheet() {
   const [uploading, setUploading] = useState(false)
   const [cwd, setCwd] = useState('')
   const [file, setFile] = useState<string | null>(null)
+  const [tags, setTags] = useState<string[]>([])
+  const [tagInput, setTagInput] = useState('')
+  const [blockedBy, setBlockedBy] = useState<string[]>([])
+  const [dueAt, setDueAt] = useState<string>('')
+  const [customFields, setCustomFields] = useState<Record<string, string | number | boolean>>({})
 
   const editing = editingId ? tasks[editingId] : null
   const agentList = Object.values(agents)
@@ -40,6 +48,7 @@ export function TaskSheet() {
   useEffect(() => {
     if (open) {
       loadAgents()
+      loadSettings()
       if (editing) {
         setTitle(editing.title)
         setDescription(editing.description)
@@ -47,6 +56,10 @@ export function TaskSheet() {
         setImages(editing.images || [])
         setCwd(editing.cwd || '')
         setFile(editing.file || null)
+        setTags(editing.tags || [])
+        setBlockedBy(editing.blockedBy || [])
+        setDueAt(editing.dueAt ? new Date(editing.dueAt).toISOString().slice(0, 10) : '')
+        setCustomFields(editing.customFields || {})
       } else {
         setTitle('')
         setDescription('')
@@ -54,8 +67,13 @@ export function TaskSheet() {
         setImages([])
         setCwd('')
         setFile(null)
+        setTags([])
+        setBlockedBy([])
+        setDueAt('')
+        setCustomFields({})
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, editingId])
 
   // Update default agent when agents load (only if no agent selected yet)
@@ -71,7 +89,12 @@ export function TaskSheet() {
   }
 
   const handleSave = async () => {
-    const payload: Partial<BoardTask> & { title: string; description: string; agentId: string } = { title: title.trim() || 'Untitled Task', description, agentId, images, cwd: cwd || undefined, file: file || undefined }
+    const payload: Partial<BoardTask> & { title: string; description: string; agentId: string } = {
+      title: title.trim() || 'Untitled Task', description, agentId, images,
+      cwd: cwd || undefined, file: file || undefined,
+      tags, blockedBy, dueAt: dueAt ? new Date(dueAt).getTime() : null,
+      customFields: Object.keys(customFields).length > 0 ? customFields : undefined,
+    }
     if (editing) {
       await updateTask(editing.id, payload)
     } else {
@@ -248,6 +271,129 @@ export function TaskSheet() {
         />
       </div>
 
+      {/* Tags */}
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
+          Tags <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+        </label>
+        {tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mb-3">
+            {tags.map((tag) => (
+              <span key={tag} className="inline-flex items-center gap-1 px-2 py-1 rounded-[8px] bg-indigo-500/10 text-indigo-400 text-[12px] font-600">
+                {tag}
+                <button onClick={() => setTags((prev) => prev.filter((t) => t !== tag))} className="text-indigo-400/60 hover:text-indigo-400 cursor-pointer border-none bg-transparent p-0 text-[14px] leading-none">&times;</button>
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="relative">
+          <input
+            type="text"
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && tagInput.trim()) {
+                e.preventDefault()
+                const t = tagInput.trim().toLowerCase()
+                if (!tags.includes(t)) setTags((prev) => [...prev, t])
+                setTagInput('')
+              }
+            }}
+            placeholder="Type and press Enter to add..."
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+            list="tag-suggestions"
+          />
+          <datalist id="tag-suggestions">
+            {Array.from(new Set(Object.values(tasks).flatMap((t) => t.tags || [])))
+              .filter((t) => !tags.includes(t) && t.includes(tagInput.toLowerCase()))
+              .slice(0, 10)
+              .map((t) => <option key={t} value={t} />)}
+          </datalist>
+        </div>
+      </div>
+
+      {/* Dependencies */}
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
+          Blocked By <span className="normal-case tracking-normal font-normal text-text-3">(tasks that must complete first)</span>
+        </label>
+        <select
+          multiple
+          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>
+        {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>
+            <div className="flex flex-wrap gap-1.5 mt-1.5">
+              {editing.blocks.map((bid) => {
+                const bt = tasks[bid]
+                return bt ? (
+                  <span key={bid} className="px-2 py-1 rounded-[6px] bg-white/[0.04] text-text-3 text-[11px] font-600">{bt.title}</span>
+                ) : null
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Due Date */}
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
+          Due Date <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+        </label>
+        <input
+          type="date"
+          value={dueAt}
+          onChange={(e) => setDueAt(e.target.value)}
+          className={`${inputClass} appearance-none`}
+          style={{ fontFamily: 'inherit', colorScheme: 'dark' }}
+        />
+      </div>
+
+      {/* Custom Fields */}
+      {appSettings.taskCustomFieldDefs && appSettings.taskCustomFieldDefs.length > 0 && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Custom Fields</label>
+          <div className="space-y-4">
+            {appSettings.taskCustomFieldDefs.map((def) => (
+              <div key={def.key}>
+                <label className="block text-[12px] text-text-3 mb-1.5">{def.label}</label>
+                {def.type === 'select' ? (
+                  <select
+                    value={String(customFields[def.key] ?? '')}
+                    onChange={(e) => setCustomFields((prev) => ({ ...prev, [def.key]: e.target.value }))}
+                    className={inputClass}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <option value="">—</option>
+                    {def.options?.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
+                  </select>
+                ) : (
+                  <input
+                    type={def.type === 'number' ? 'number' : 'text'}
+                    value={String(customFields[def.key] ?? '')}
+                    onChange={(e) => setCustomFields((prev) => ({
+                      ...prev,
+                      [def.key]: def.type === 'number' ? (e.target.value === '' ? '' : Number(e.target.value)) : e.target.value,
+                    }))}
+                    className={inputClass}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {editing?.result && (
         <div className="mb-8">
           <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Result</label>