@swarmclawai/swarmclaw 0.7.6 → 0.7.8

package/src/components/tasks/approvals-panel.tsx

@@ -8,7 +8,7 @@ import { toast } from 'sonner'
 import { useWs } from '@/hooks/use-ws'
 import { ExecApprovalCard } from '@/components/chat/exec-approval-card'
 import { getApprovalPayload, getApprovalTitle } from '@/lib/approval-display'
-import type { ApprovalRequest } from '@/types'
+import type { AppSettings, ApprovalCategory, ApprovalRequest } from '@/types'
 
 const CATEGORY_LABELS: Record<string, string> = {
   tool_access: 'Plugin Access',
@@ -28,6 +28,15 @@ const CATEGORY_ICONS: Record<string, string> = {
 
 type ApprovalScope = 'all' | 'execution' | 'workflow' | 'task'
 
+const AUTO_APPROVE_OPTIONS: Array<{ id: ApprovalCategory; label: string; description: string }> = [
+  { id: 'tool_access', label: 'Plugin Access', description: 'Auto-enable requested plugins for a chat.' },
+  { id: 'plugin_scaffold', label: 'Plugin Scaffold', description: 'Auto-create plugin files requested by agents.' },
+  { id: 'plugin_install', label: 'Plugin Install', description: 'Auto-install plugins from approved URLs.' },
+  { id: 'human_loop', label: 'Human Approval Requests', description: 'Auto-approve ask-human approval prompts.' },
+  { id: 'wallet_transfer', label: 'Wallet Transfers', description: 'Auto-approve wallet send requests. High risk.' },
+  { id: 'task_tool', label: 'Task Tool Calls', description: 'Auto-approve task-level tool approvals.' },
+]
+
 function relativeTime(ts: number): string {
   const diff = Date.now() - ts
   if (diff < 60_000) return 'just now'
@@ -39,9 +48,11 @@ function relativeTime(ts: number): string {
 export function ApprovalsPanel() {
   const tasks = useAppStore((s) => s.tasks)
   const agents = useAppStore((s) => s.agents)
+  const appSettings = useAppStore((s) => s.appSettings)
   const serverApprovals = useAppStore((s) => s.approvals)
   const loadTasks = useAppStore((s) => s.loadTasks)
   const loadServerApprovals = useAppStore((s) => s.loadApprovals)
+  const loadAppSettings = useAppStore((s) => s.loadSettings)
 
   const execApprovals = useApprovalStore((s) => s.approvals)
   const loadExecApprovals = useApprovalStore((s) => s.loadApprovals)
@@ -73,12 +84,17 @@ export function ApprovalsPanel() {
   const [scope, setScope] = useState<ApprovalScope>('all')
   const [categoryFilter, setCategoryFilter] = useState('all')
   const [now, setNow] = useState(() => Date.now())
+  const [savingSetting, setSavingSetting] = useState<string | null>(null)
 
   useEffect(() => {
     const intervalId = window.setInterval(() => setNow(Date.now()), 60_000)
     return () => window.clearInterval(intervalId)
   }, [])
 
+  useEffect(() => {
+    void loadAppSettings()
+  }, [loadAppSettings])
+
   const taskApprovals = useMemo(() => {
     return Object.values(tasks)
       .filter((t) => t.pendingApproval)
@@ -180,6 +196,23 @@ export function ApprovalsPanel() {
     },
   ]
 
+  const autoApproved = useMemo(() => new Set(appSettings.approvalAutoApproveCategories || []), [appSettings.approvalAutoApproveCategories])
+  const approvalsEnabled = appSettings.approvalsEnabled ?? true
+  const outboundApprovalEnabled = appSettings.safetyRequireApprovalForOutbound ?? false
+
+  const saveApprovalSettings = async (patch: Partial<AppSettings>, successMessage: string, key: string) => {
+    try {
+      setSavingSetting(key)
+      const settings = await api<AppSettings>('PUT', '/settings', patch)
+      useAppStore.setState({ appSettings: settings })
+      toast.success(successMessage)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to update approval settings')
+    } finally {
+      setSavingSetting((current) => (current === key ? null : current))
+    }
+  }
+
   const handleDecision = async (req: ApprovalRequest, approved: boolean) => {
     try {
       if (req.category === 'task_tool') {
@@ -195,23 +228,6 @@ export function ApprovalsPanel() {
     }
   }
 
-  if (pendingCount === 0) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
-        <div className="w-16 h-16 rounded-[24px] bg-white/[0.02] border border-white/[0.04] flex items-center justify-center mb-6">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/40">
-            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
-            <path d="m9 12 2 2 4-4"/>
-          </svg>
-        </div>
-        <h2 className="font-display text-[18px] font-600 text-text-2 mb-2">No pending approvals</h2>
-        <p className="text-[13px] text-text-3/60 max-w-[320px]">
-          Your swarm is operating autonomously. Actions requiring oversight will appear here.
-        </p>
-      </div>
-    )
-  }
-
   return (
     <div className="flex-1 overflow-y-auto px-6 py-8">
       <div className="max-w-3xl mx-auto">
@@ -237,6 +253,132 @@ export function ApprovalsPanel() {
           ))}
         </div>
 
+        <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] p-4 mb-6">
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3">
+              <div>
+                <h2 className="text-[13px] font-700 text-text">Approval Controls</h2>
+                <p className="text-[12px] text-text-3/70 mt-1 max-w-[640px]">
+                  Control whether actions queue for review, which approval types auto-run, and whether outbound connector sends need explicit confirmation.
+                </p>
+              </div>
+              <div className={`px-3 py-1.5 rounded-full text-[11px] font-700 ${
+                approvalsEnabled
+                  ? 'bg-amber-500/10 border border-amber-500/20 text-amber-300'
+                  : 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-300'
+              }`}>
+                {approvalsEnabled ? 'Manual approvals enabled' : 'Approvals disabled'}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="rounded-[12px] border border-white/[0.06] bg-black/20 px-4 py-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div>
+                    <div className="text-[12px] font-600 text-text-2">Platform Approvals</div>
+                    <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                      Turn this off to auto-approve workflow approvals across the app. Audit records are still kept.
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={savingSetting === 'approvalsEnabled'}
+                    onClick={() => {
+                      const next = !approvalsEnabled
+                      void saveApprovalSettings(
+                        { approvalsEnabled: next },
+                        next ? 'Platform approvals enabled' : 'Platform approvals disabled',
+                        'approvalsEnabled',
+                      )
+                    }}
+                    className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer disabled:opacity-50 ${approvalsEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                    aria-label="Toggle platform approvals"
+                  >
+                    <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${approvalsEnabled ? 'translate-x-[18px]' : ''}`} />
+                  </button>
+                </div>
+              </div>
+
+              <div className="rounded-[12px] border border-white/[0.06] bg-black/20 px-4 py-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div>
+                    <div className="text-[12px] font-600 text-text-2">Outbound Send Approvals</div>
+                    <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                      Require explicit approval before agents send messages or media over connectors.
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={savingSetting === 'safetyRequireApprovalForOutbound'}
+                    onClick={() => {
+                      const next = !outboundApprovalEnabled
+                      void saveApprovalSettings(
+                        { safetyRequireApprovalForOutbound: next },
+                        next ? 'Outbound send approvals enabled' : 'Outbound send approvals disabled',
+                        'safetyRequireApprovalForOutbound',
+                      )
+                    }}
+                    className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer disabled:opacity-50 ${outboundApprovalEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                    aria-label="Toggle outbound send approvals"
+                  >
+                    <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${outboundApprovalEnabled ? 'translate-x-[18px]' : ''}`} />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between gap-3 mb-2">
+                <div className="text-[12px] font-600 text-text-2">Auto-Approve Categories</div>
+                <div className="text-[11px] text-text-3/60">
+                  {autoApproved.size} enabled
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {AUTO_APPROVE_OPTIONS.map((option) => {
+                  const checked = autoApproved.has(option.id)
+                  return (
+                    <label
+                      key={option.id}
+                      className={`rounded-[12px] border px-3 py-3 cursor-pointer transition-all ${
+                        checked
+                          ? 'border-accent-bright/30 bg-accent-soft/60'
+                          : 'border-white/[0.06] bg-black/20 hover:bg-white/[0.04]'
+                      }`}
+                    >
+                      <div className="flex items-start gap-3">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          disabled={savingSetting === `auto:${option.id}`}
+                          onChange={(e) => {
+                            const next = new Set(appSettings.approvalAutoApproveCategories || [])
+                            if (e.target.checked) next.add(option.id)
+                            else next.delete(option.id)
+                            void saveApprovalSettings(
+                              { approvalAutoApproveCategories: [...next] },
+                              checked ? `${option.label} now requires approval` : `${option.label} will auto-approve`,
+                              `auto:${option.id}`,
+                            )
+                          }}
+                          className="mt-0.5"
+                        />
+                        <div>
+                          <div className="text-[12px] font-600 text-text-2">{option.label}</div>
+                          <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">{option.description}</p>
+                        </div>
+                      </div>
+                    </label>
+                  )
+                })}
+              </div>
+              <p className="text-[11px] text-text-3/60 mt-2">
+                Use category auto-approval when you still want the approval system on, but you do not want these request types to pause execution.
+              </p>
+            </div>
+          </div>
+        </div>
+
         <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] p-4 mb-6">
           <div className="flex flex-col lg:flex-row gap-3 lg:items-center lg:justify-between">
             <div className="flex flex-wrap gap-2">
@@ -411,6 +553,23 @@ export function ApprovalsPanel() {
             <p className="text-[12px] text-text-3/60">Try clearing the search or switching the queue scope.</p>
           </div>
         )}
+
+        {pendingCount === 0 && (
+          <div className="flex flex-col items-center justify-center p-8 text-center">
+            <div className="w-16 h-16 rounded-[24px] bg-white/[0.02] border border-white/[0.04] flex items-center justify-center mb-6">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/40">
+                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                <path d="m9 12 2 2 4-4"/>
+              </svg>
+            </div>
+            <h2 className="font-display text-[18px] font-600 text-text-2 mb-2">No pending approvals</h2>
+            <p className="text-[13px] text-text-3/60 max-w-[360px]">
+              {approvalsEnabled
+                ? 'Your swarm is operating autonomously. Actions requiring oversight will appear here.'
+                : 'Approvals are currently disabled, so eligible requests will auto-run instead of queuing here.'}
+            </p>
+          </div>
+        )}
       </div>
     </div>
   )

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

@@ -14,11 +14,23 @@ import { toast } from 'sonner'
 const ACTIVE_COLUMNS: BoardTaskStatus[] = ['backlog', 'queued', 'running', 'completed', 'failed']
 type BoardViewMode = 'board' | 'list'
 type AttentionFilter = 'all' | 'needs-attention' | 'approval' | 'blocked' | 'overdue' | 'failed'
+type TaskScopeFilter = 'user-facing' | 'all' | 'agent'
 
 function isTaskOverdue(task: BoardTask): boolean {
   return !!task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
 }
 
+function isInternalAgentTask(task: BoardTask): boolean {
+  if (task.sourceType === 'schedule' || task.sourceType === 'delegation') return true
+  return Boolean(task.createdByAgentId || task.delegatedByAgentId)
+}
+
+function isTaskRelevantToAgent(task: BoardTask, agentId: string): boolean {
+  return task.agentId === agentId
+    || task.createdByAgentId === agentId
+    || task.delegatedByAgentId === agentId
+}
+
 function matchesAttentionFilter(task: BoardTask, filter: AttentionFilter): boolean {
   const blocked = !!task.blockedBy?.length
   const pendingApproval = !!task.pendingApproval
@@ -139,6 +151,13 @@ export function TaskBoard() {
     if (typeof window === 'undefined') return ''
     return new URLSearchParams(window.location.search).get('tag') || ''
   })
+  const [taskScopeFilter, setTaskScopeFilter] = useState<TaskScopeFilter>(() => {
+    if (typeof window === 'undefined') return 'user-facing'
+    const params = new URLSearchParams(window.location.search)
+    if (params.get('agent')) return 'agent'
+    const raw = params.get('taskView')
+    return raw === 'all' ? 'all' : 'user-facing'
+  })
   const [viewMode, setViewMode] = useState<BoardViewMode>('board')
   const [attentionFilter, setAttentionFilter] = useState<AttentionFilter>('all')
 
@@ -156,13 +175,14 @@ export function TaskBoard() {
   useEffect(() => {
     if (typeof window === 'undefined') return
     const params = new URLSearchParams()
-    if (filterAgentId) params.set('agent', filterAgentId)
+    if (taskScopeFilter === 'agent' && filterAgentId) params.set('agent', filterAgentId)
+    else if (taskScopeFilter === 'all') params.set('taskView', 'all')
     if (filterTag) params.set('tag', filterTag)
     if (activeProjectFilter) params.set('project', activeProjectFilter)
     const qs = params.toString()
     const newUrl = `${window.location.pathname}${qs ? `?${qs}` : ''}`
     window.history.replaceState(null, '', newUrl)
-  }, [filterAgentId, filterTag, activeProjectFilter])
+  }, [filterAgentId, filterTag, activeProjectFilter, taskScopeFilter])
 
   const [loaded, setLoaded] = useState(Object.keys(tasks).length > 0)
   useEffect(() => { Promise.all([loadTasks(), loadAgents(), loadProjects()]).then(() => setLoaded(true)) }, [])
@@ -173,17 +193,28 @@ export function TaskBoard() {
 
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 
-  const matchesBaseFilters = useCallback((task: BoardTask) => {
+  const matchesScopeFilters = useCallback((task: BoardTask) => {
     if (!showArchived && task.status === 'archived') return false
-    if (filterAgentId && task.agentId !== filterAgentId) return false
+    if (taskScopeFilter === 'user-facing' && isInternalAgentTask(task)) return false
+    if (taskScopeFilter === 'agent' && (!filterAgentId || !isTaskRelevantToAgent(task, filterAgentId))) return false
     if (filterTag && !(task.tags && task.tags.includes(filterTag))) return false
     if (activeProjectFilter && task.projectId !== activeProjectFilter) return false
+    return true
+  }, [activeProjectFilter, filterAgentId, filterTag, showArchived, taskScopeFilter])
+
+  const matchesBaseFilters = useCallback((task: BoardTask) => {
+    if (!matchesScopeFilters(task)) return false
     if (!matchesAttentionFilter(task, attentionFilter)) return false
     return true
-  }, [activeProjectFilter, attentionFilter, filterAgentId, filterTag, showArchived])
+  }, [attentionFilter, matchesScopeFilters])
+
+  const scopedTasks = useMemo(
+    () => Object.values(tasks).filter(matchesScopeFilters),
+    [tasks, matchesScopeFilters],
+  )
 
   const filteredTasks = useMemo(() => (
-    Object.values(tasks)
+    scopedTasks
       .filter(matchesBaseFilters)
       .sort((a, b) => {
         const rankDiff = attentionRank(a) - attentionRank(b)
@@ -192,7 +223,7 @@ export function TaskBoard() {
         if (dueDiff !== 0) return dueDiff
         return b.updatedAt - a.updatedAt
       })
-  ), [tasks, matchesBaseFilters])
+  ), [scopedTasks, matchesBaseFilters])
 
   const tasksByStatus = useCallback((status: BoardTaskStatus) =>
     filteredTasks
@@ -223,7 +254,7 @@ export function TaskBoard() {
 
   // Task counts per project (non-archived)
   const projectTaskCounts: Record<string, number> = {}
-  for (const t of Object.values(tasks)) {
+  for (const t of scopedTasks) {
     if (t.projectId && t.status !== 'archived') {
       projectTaskCounts[t.projectId] = (projectTaskCounts[t.projectId] || 0) + 1
     }
@@ -231,7 +262,7 @@ export function TaskBoard() {
 
   // Summary stats
   const stats = useMemo(() => {
-    const all = Object.values(tasks).filter((t) => t.status !== 'archived')
+    const all = scopedTasks.filter((t) => t.status !== 'archived')
     return {
       total: all.length,
       running: all.filter((t) => t.status === 'running').length,
@@ -242,7 +273,13 @@ export function TaskBoard() {
       approvals: all.filter((t) => !!t.pendingApproval).length,
       attention: all.filter((t) => matchesAttentionFilter(t, 'needs-attention')).length,
     }
-  }, [tasks])
+  }, [scopedTasks])
+
+  const activeScopeLabel = useMemo(() => {
+    if (taskScopeFilter === 'all') return 'All tasks'
+    if (taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId]) return `${agents[filterAgentId].name} activity`
+    return 'User-facing tasks'
+  }, [agents, filterAgentId, taskScopeFilter])
 
   const activeAttentionLabel = useMemo(() => {
     if (attentionFilter === 'all') return null
@@ -301,6 +338,16 @@ export function TaskBoard() {
             <p className="text-[13px] text-text-3">
               {stats.total} task{stats.total !== 1 ? 's' : ''}
             </p>
+            <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.04] px-2 py-1 text-[11px] font-600 text-text-2">
+              {taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId] ? (
+                <>
+                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={14} />
+                  {activeScopeLabel}
+                </>
+              ) : (
+                activeScopeLabel
+              )}
+            </span>
             {stats.running > 0 && (
               <span className="inline-flex items-center gap-1 text-[11px] font-600 text-blue-400">
                 <span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
@@ -338,41 +385,83 @@ export function TaskBoard() {
             <button
               onClick={() => setAgentDropdownOpen(!agentDropdownOpen)}
               className={`flex items-center gap-2 px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
-                ${filterAgentId
+                ${taskScopeFilter !== 'user-facing'
                   ? 'bg-white/[0.06] border-white/[0.1] text-text-2'
                   : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
               style={{ fontFamily: 'inherit', minWidth: 130 }}
             >
-              {filterAgentId && agents[filterAgentId] ? (
+              {taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId] ? (
                 <>
                   <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={18} />
                   {agents[filterAgentId].name}
                 </>
-              ) : 'All Agents'}
+              ) : taskScopeFilter === 'all' ? 'All Tasks' : 'User View'}
               <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className="ml-auto opacity-50">
                 <path d="M2.5 4L5 6.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             </button>
             {agentDropdownOpen && (
-              <div className="absolute top-full right-0 mt-1 min-w-[200px] py-1 rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-lg z-50">
+              <div className="absolute top-full right-0 mt-1 min-w-[240px] py-1 rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-lg z-50">
+                <button
+                  onClick={() => {
+                    setTaskScopeFilter('user-facing')
+                    setFilterAgentId('')
+                    setAgentDropdownOpen(false)
+                  }}
+                  className={`w-full flex items-start gap-2.5 px-3 py-2.5 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
+                    ${taskScopeFilter === 'user-facing' ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <span className="mt-0.5 inline-flex h-5 items-center rounded-full bg-emerald-500/12 px-1.5 text-[10px] font-700 uppercase tracking-[0.08em] text-emerald-400">
+                    Default
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block">User-facing tasks</span>
+                    <span className="mt-0.5 block text-[11px] font-500 text-text-3/60">
+                      Hide scheduled, delegated, and agent-created internal work.
+                    </span>
+                  </span>
+                </button>
                 <button
-                  onClick={() => { setFilterAgentId(''); setAgentDropdownOpen(false) }}
-                  className={`w-full flex items-center gap-2.5 px-3 py-2 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
-                    ${!filterAgentId ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
+                  onClick={() => {
+                    setTaskScopeFilter('all')
+                    setFilterAgentId('')
+                    setAgentDropdownOpen(false)
+                  }}
+                  className={`w-full flex items-start gap-2.5 px-3 py-2.5 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
+                    ${taskScopeFilter === 'all' ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
                   style={{ fontFamily: 'inherit' }}
                 >
-                  All Agents
+                  <span className="mt-0.5 inline-flex h-5 items-center rounded-full bg-white/[0.06] px-1.5 text-[10px] font-700 uppercase tracking-[0.08em] text-text-3">
+                    All
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block">All tasks</span>
+                    <span className="mt-0.5 block text-[11px] font-500 text-text-3/60">
+                      Include internal agent execution, schedules, and delegations.
+                    </span>
+                  </span>
                 </button>
+                <div className="my-1 border-t border-white/[0.06]" />
                 {Object.values(agents).sort((a, b) => a.name.localeCompare(b.name)).map((a) => (
                   <button
                     key={a.id}
-                    onClick={() => { setFilterAgentId(a.id); setAgentDropdownOpen(false) }}
+                    onClick={() => {
+                      setTaskScopeFilter('agent')
+                      setFilterAgentId(a.id)
+                      setAgentDropdownOpen(false)
+                    }}
                     className={`w-full flex items-center gap-2.5 px-3 py-2 text-[13px] font-600 cursor-pointer border-none text-left transition-colors
-                      ${filterAgentId === a.id ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
+                      ${taskScopeFilter === 'agent' && 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} avatarUrl={a.avatarUrl} name={a.name} size={20} />
-                    {a.name}
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate">{a.name}</span>
+                      <span className="mt-0.5 block text-[11px] font-500 text-text-3/60">
+                        Assigned, created, or delegated by this agent
+                      </span>
+                    </span>
                   </button>
                 ))}
               </div>
@@ -520,8 +609,33 @@ export function TaskBoard() {
         ))}
       </div>
 
-      {(activeProjectFilter && projects[activeProjectFilter]) || activeAttentionLabel ? (
+      {(activeProjectFilter && projects[activeProjectFilter]) || activeAttentionLabel || taskScopeFilter !== 'all' ? (
         <div className="flex flex-wrap items-center gap-2 px-8 pb-3">
+          {taskScopeFilter !== 'all' && (
+            <span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] border text-[12px] font-600 ${
+              taskScopeFilter === 'agent'
+                ? 'bg-accent-soft border-accent-bright/20 text-accent-bright'
+                : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+            }`}>
+              {taskScopeFilter === 'agent' && filterAgentId && agents[filterAgentId] ? (
+                <>
+                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={14} />
+                  {agents[filterAgentId].name} activity
+                </>
+              ) : (
+                'User-facing tasks'
+              )}
+              <button
+                onClick={() => {
+                  setTaskScopeFilter('all')
+                  setFilterAgentId('')
+                }}
+                className="ml-1 cursor-pointer border-none bg-transparent p-0 text-[14px] leading-none text-current opacity-80 hover:opacity-100"
+              >
+                &times;
+              </button>
+            </span>
+          )}
           {activeProjectFilter && projects[activeProjectFilter] && (
           <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] bg-white/[0.04] border border-white/[0.06] text-[12px] font-600 text-text-2">
             <span className="w-2 h-2 rounded-full" style={{ backgroundColor: projects[activeProjectFilter].color || '#6366F1' }} />
@@ -593,7 +707,7 @@ export function TaskBoard() {
           ) : filteredTasks.length === 0 ? (
             <div className="max-w-3xl mx-auto rounded-[16px] border border-dashed border-white/[0.08] px-6 py-14 text-center">
               <p className="text-[14px] font-600 text-text-2 mb-1">No tasks match this view</p>
-              <p className="text-[12px] text-text-3/60">Try clearing one of the active filters or switching back to the full board.</p>
+              <p className="text-[12px] text-text-3/60">Try clearing one of the active filters or switching back to all tasks.</p>
             </div>
           ) : (
             <div className="max-w-4xl mx-auto">

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

@@ -5,6 +5,7 @@ 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 { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { BoardTask } from '@/types'
 
 function timeAgo(ts: number) {
@@ -46,6 +47,8 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
   const tasks = useAppStore((s) => s.tasks)
   const agent = agents[task.agentId]
   const project = task.projectId ? projects[task.projectId] : null
+  const creatorAgent = task.createdByAgentId ? agents[task.createdByAgentId] : null
+  const delegatorAgent = task.delegatedByAgentId ? agents[task.delegatedByAgentId] : null
 
   const priorityConfig = {
     critical: { label: 'Critical', cls: 'bg-red-500/10 text-red-400' },
@@ -207,6 +210,32 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect, index
         </div>
       )}
 
+      {(creatorAgent || delegatorAgent || task.sourceType === 'schedule') && (
+        <div className="flex flex-wrap gap-1.5 mb-3">
+          {delegatorAgent && (
+            <span className="inline-flex items-center gap-1.5 rounded-[7px] bg-amber-500/10 px-2 py-1 text-[10px] font-600 text-amber-300">
+              <AgentAvatar seed={delegatorAgent.avatarSeed} avatarUrl={delegatorAgent.avatarUrl} name={delegatorAgent.name} size={14} />
+              Delegated by {delegatorAgent.name}
+            </span>
+          )}
+          {creatorAgent && creatorAgent.id !== delegatorAgent?.id && (
+            <span className="inline-flex items-center gap-1.5 rounded-[7px] bg-white/[0.05] px-2 py-1 text-[10px] font-600 text-text-2">
+              <AgentAvatar seed={creatorAgent.avatarSeed} avatarUrl={creatorAgent.avatarUrl} name={creatorAgent.name} size={14} />
+              Created by {creatorAgent.name}
+            </span>
+          )}
+          {task.sourceType === 'schedule' && (
+            <span className="inline-flex items-center gap-1.5 rounded-[7px] bg-purple-500/10 px-2 py-1 text-[10px] font-600 text-purple-300">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <circle cx="12" cy="12" r="8" />
+                <path d="M12 8v4l3 2" />
+              </svg>
+              {task.sourceScheduleName ? `Scheduled via ${task.sourceScheduleName}` : 'Scheduled task'}
+            </span>
+          )}
+        </div>
+      )}
+
       <div className="flex items-center gap-2 flex-wrap">
         {agent && (
           <span className="px-2 py-1 rounded-[6px] bg-accent-soft text-accent-bright text-[11px] font-600">

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

@@ -467,7 +467,7 @@ export function TaskSheet() {
         )}
 
         {/* CLI Sessions */}
-        {(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.cliResumeId) && (
+        {(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.geminiResumeId || editing.cliResumeId) && (
           <div className="mb-8">
             <SectionLabel>CLI Sessions</SectionLabel>
             <div className="flex flex-wrap gap-2">
@@ -489,7 +489,13 @@ export function TaskSheet() {
                   <code className="text-[11px] text-text-3 font-mono">{editing.opencodeResumeId}</code>
                 </div>
               )}
-              {!(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId) && editing.cliResumeId && (
+              {editing.geminiResumeId && (
+                <div className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/[0.06] bg-surface">
+                  <span className="text-[11px] font-600 text-fuchsia-400">Gemini</span>
+                  <code className="text-[11px] text-text-3 font-mono">{editing.geminiResumeId}</code>
+                </div>
+              )}
+              {!(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.geminiResumeId) && editing.cliResumeId && (
                 <div className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/[0.06] bg-surface">
                   <span className="text-[11px] font-600 text-text-2">{editing.cliProvider || 'CLI'}</span>
                   <code className="text-[11px] text-text-3 font-mono">{editing.cliResumeId}</code>
@@ -971,7 +977,7 @@ export function TaskSheet() {
         </div>
       )}
 
-      {editing && (editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.cliResumeId) && (
+      {editing && (editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.geminiResumeId || editing.cliResumeId) && (
         <div className="mb-8">
           <SectionLabel>CLI Sessions</SectionLabel>
           <div className="flex flex-wrap gap-2">
@@ -993,7 +999,13 @@ export function TaskSheet() {
                 <code className="text-[11px] text-text-3 font-mono">{editing.opencodeResumeId}</code>
               </div>
             )}
-            {!(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId) && editing.cliResumeId && (
+            {editing.geminiResumeId && (
+              <div className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/[0.06] bg-surface">
+                <span className="text-[11px] font-600 text-fuchsia-400">Gemini</span>
+                <code className="text-[11px] text-text-3 font-mono">{editing.geminiResumeId}</code>
+              </div>
+            )}
+            {!(editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.geminiResumeId) && editing.cliResumeId && (
               <div className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/[0.06] bg-surface">
                 <span className="text-[11px] font-600 text-text-2">{editing.cliProvider || 'CLI'}</span>
                 <code className="text-[11px] text-text-3 font-mono">{editing.cliResumeId}</code>