@swarmclawai/swarmclaw 0.7.1 → 0.7.3

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useApprovalStore } from '@/stores/use-approval-store'
 import { api } from '@/lib/api-client'
@@ -26,6 +26,16 @@ const CATEGORY_ICONS: Record<string, string> = {
   task_tool: '🤖',
 }
 
+type ApprovalScope = 'all' | 'execution' | 'workflow' | 'task'
+
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  return `${Math.floor(diff / 86_400_000)}d ago`
+}
+
 export function ApprovalsPanel() {
   const tasks = useAppStore((s) => s.tasks)
   const agents = useAppStore((s) => s.agents)
@@ -59,6 +69,10 @@ export function ApprovalsPanel() {
   useWs('approvals', refreshServerApprovals, 5000)
   useWs('openclaw:approvals', refreshExecApprovals, 5000)
 
+  const [search, setSearch] = useState('')
+  const [scope, setScope] = useState<ApprovalScope>('all')
+  const [categoryFilter, setCategoryFilter] = useState('all')
+
   const taskApprovals = useMemo(() => {
     return Object.values(tasks)
       .filter((t) => t.pendingApproval)
@@ -92,6 +106,73 @@ export function ApprovalsPanel() {
   }, [execApprovals])
 
   const pendingCount = sortedExecApprovals.length + workflowApprovals.length
+  const searchTerm = search.trim().toLowerCase()
+
+  const workflowCategories = useMemo(() => (
+    Array.from(new Set(workflowApprovals.map((req) => req.category))).sort()
+  ), [workflowApprovals])
+
+  const filteredExecApprovals = useMemo(() => {
+    if (scope === 'workflow' || scope === 'task') return []
+    return sortedExecApprovals.filter((approval) => {
+      if (!searchTerm) return true
+      return [
+        approval.ask,
+        approval.command,
+        approval.cwd,
+        approval.host,
+        approval.security,
+      ].some((value) => value?.toLowerCase().includes(searchTerm))
+    })
+  }, [scope, sortedExecApprovals, searchTerm])
+
+  const filteredWorkflowApprovals = useMemo(() => {
+    return workflowApprovals.filter((req) => {
+      if (scope === 'execution') return false
+      if (scope === 'workflow' && req.category === 'task_tool') return false
+      if (scope === 'task' && req.category !== 'task_tool') return false
+      if (categoryFilter !== 'all' && req.category !== categoryFilter) return false
+      if (!searchTerm) return true
+      const agentName = req.agentId ? agents[req.agentId]?.name : 'system'
+      const payloadText = JSON.stringify(getApprovalPayload(req))
+      return [
+        getApprovalTitle(req),
+        req.description,
+        req.category,
+        agentName,
+        payloadText,
+      ].some((value) => value?.toLowerCase().includes(searchTerm))
+    })
+  }, [agents, categoryFilter, scope, searchTerm, workflowApprovals])
+
+  const visibleCount = filteredExecApprovals.length + filteredWorkflowApprovals.length
+
+  const summaryCards = [
+    {
+      label: 'Execution',
+      value: sortedExecApprovals.length,
+      tone: 'text-amber-400',
+      hint: 'Command approvals from OpenClaw',
+    },
+    {
+      label: 'Workflow',
+      value: sessionApprovals.length,
+      tone: 'text-sky-400',
+      hint: 'Agent and plugin governance requests',
+    },
+    {
+      label: 'Task Calls',
+      value: taskApprovals.length,
+      tone: 'text-violet-400',
+      hint: 'Tasks waiting on tool approval',
+    },
+    {
+      label: 'Recently Active',
+      value: workflowApprovals.filter((req) => Date.now() - req.updatedAt < 60 * 60 * 1000).length,
+      tone: 'text-emerald-400',
+      hint: 'Updated in the last hour',
+    },
+  ]
 
   const handleDecision = async (req: ApprovalRequest, approved: boolean) => {
     try {
@@ -131,29 +212,98 @@ export function ApprovalsPanel() {
         <div className="flex items-center justify-between mb-8">
           <div>
             <h1 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-1">Approvals</h1>
-            <p className="text-[13px] text-text-3">Execution and plugin governance requests pending review</p>
+            <p className="text-[13px] text-text-3">Execution, task, and governance requests queued for review</p>
           </div>
           <div className="px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[11px] font-600">
             {pendingCount} Pending
           </div>
         </div>
 
-        {sortedExecApprovals.length > 0 && (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+          {summaryCards.map((card) => (
+            <div key={card.label} className="rounded-[14px] border border-white/[0.06] bg-white/[0.02] px-4 py-3.5">
+              <div className={`text-[22px] font-display font-700 tracking-[-0.03em] ${card.tone}`}>
+                {card.value}
+              </div>
+              <div className="text-[11px] font-600 text-text-2 mt-0.5">{card.label}</div>
+              <p className="text-[10px] text-text-3/50 mt-1 leading-relaxed">{card.hint}</p>
+            </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">
+              {([
+                ['all', `All (${pendingCount})`],
+                ['execution', `Execution (${sortedExecApprovals.length})`],
+                ['workflow', `Workflow (${sessionApprovals.length})`],
+                ['task', `Tasks (${taskApprovals.length})`],
+              ] as const).map(([value, label]) => (
+                <button
+                  key={value}
+                  onClick={() => setScope(value)}
+                  className={`px-3 py-1.5 rounded-[9px] text-[11px] font-600 transition-all cursor-pointer border-none ${
+                    scope === value
+                      ? 'bg-accent-soft text-accent-bright'
+                      : 'bg-white/[0.04] text-text-3 hover:bg-white/[0.08] hover:text-text-2'
+                  }`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <div className="text-[11px] text-text-3/60 font-600">
+                Showing {visibleCount} of {pendingCount}
+              </div>
+              {workflowCategories.length > 1 && scope !== 'execution' && (
+                <select
+                  value={categoryFilter}
+                  onChange={(e) => setCategoryFilter(e.target.value)}
+                  className="px-3 py-2 rounded-[10px] bg-white/[0.04] border border-white/[0.06] text-[12px] text-text-2 outline-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <option value="all">All categories</option>
+                  {workflowCategories.map((category) => (
+                    <option key={category} value={category}>
+                      {CATEGORY_LABELS[category] || category}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-3">
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search approvals by agent, tool, command, or payload"
+              className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.06] bg-surface text-[13px] text-text placeholder:text-text-3/50 outline-none focus:border-white/[0.12]"
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+
+        {filteredExecApprovals.length > 0 && (
           <div className="mb-6">
             <h2 className="text-[12px] font-700 uppercase tracking-[0.1em] text-amber-400/90 mb-2">Execution Approvals</h2>
             <div className="grid grid-cols-1 gap-3">
-              {sortedExecApprovals.map((approval) => (
+              {filteredExecApprovals.map((approval) => (
                 <ExecApprovalCard key={approval.id} approval={approval} />
               ))}
             </div>
           </div>
         )}
 
-        {workflowApprovals.length > 0 && (
+        {filteredWorkflowApprovals.length > 0 && (
           <div>
-            <h2 className="text-[12px] font-700 uppercase tracking-[0.1em] text-amber-400/90 mb-2">Plugin Workflow Approvals</h2>
+            <h2 className="text-[12px] font-700 uppercase tracking-[0.1em] text-amber-400/90 mb-2">Workflow Approvals</h2>
             <div className="grid grid-cols-1 gap-4">
-              {workflowApprovals.map((req) => {
+              {filteredWorkflowApprovals.map((req) => {
                 const agent = req.agentId ? agents[req.agentId] : null
                 const icon = CATEGORY_ICONS[req.category] || '⚠️'
                 const categoryLabel = CATEGORY_LABELS[req.category] || req.category
@@ -173,10 +323,23 @@ export function ApprovalsPanel() {
                             <span className="px-1.5 py-0.5 rounded-[4px] bg-white/[0.04] text-[9px] font-600 text-text-3/60 uppercase tracking-wider">
                               {categoryLabel}
                             </span>
+                            {req.taskId && (
+                              <span className="px-1.5 py-0.5 rounded-[4px] bg-violet-500/10 text-[9px] font-700 text-violet-300 uppercase tracking-wider">
+                                Task
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 mt-1 text-[11px] text-text-3">
+                            <span>{agent?.name || 'System'}</span>
+                            <span className="text-text-3/35">•</span>
+                            <span>{relativeTime(req.updatedAt)}</span>
+                            {req.description && (
+                              <>
+                                <span className="text-text-3/35">•</span>
+                                <span className="truncate max-w-[280px]">{req.description}</span>
+                              </>
+                            )}
                           </div>
-                          <p className="text-[11px] text-text-3">
-                            {agent?.name || 'System'}
-                          </p>
                         </div>
                       </div>
                       <span className="text-[10px] text-text-3/50 font-mono">
@@ -185,16 +348,33 @@ export function ApprovalsPanel() {
                     </div>
 
                     <div className="p-5">
-                      {req.description && (
-                        <p className="text-[13px] text-text-2/90 mb-4">{req.description}</p>
-                      )}
-
-                      <div className="bg-black/30 rounded-[10px] border border-white/[0.04] p-4 mb-5 overflow-x-auto max-h-[250px] overflow-y-auto">
-                        <pre className="text-[12px] font-mono text-text-2/80 whitespace-pre-wrap break-all leading-relaxed">
-                          {payloadText === '{}' ? 'No structured payload provided.' : payloadText}
-                        </pre>
+                      <div className="flex flex-wrap gap-2 mb-4">
+                        {req.sessionId && (
+                          <span className="px-2 py-1 rounded-[7px] bg-white/[0.04] text-[10px] font-600 text-text-3">
+                            Session {req.sessionId.slice(0, 8)}
+                          </span>
+                        )}
+                        {req.taskId && (
+                          <span className="px-2 py-1 rounded-[7px] bg-violet-500/10 text-[10px] font-600 text-violet-300">
+                            Task {req.taskId.slice(0, 8)}
+                          </span>
+                        )}
                       </div>
 
+                      <details className="mb-5 rounded-[10px] border border-white/[0.04] bg-black/20 overflow-hidden group">
+                        <summary className="list-none cursor-pointer px-4 py-3 flex items-center justify-between text-[12px] font-600 text-text-2">
+                          <span>Payload details</span>
+                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-text-3 transition-transform group-open:rotate-180">
+                            <polyline points="6 9 12 15 18 9" />
+                          </svg>
+                        </summary>
+                        <div className="px-4 pb-4 overflow-x-auto max-h-[260px] overflow-y-auto">
+                          <pre className="text-[12px] font-mono text-text-2/80 whitespace-pre-wrap break-all leading-relaxed">
+                            {payloadText === '{}' ? 'No structured payload provided.' : payloadText}
+                          </pre>
+                        </div>
+                      </details>
+
                       <div className="flex items-center justify-end gap-3 pt-4 border-t border-white/[0.04]">
                         <button
                           onClick={() => handleDecision(req, false)}
@@ -218,6 +398,13 @@ export function ApprovalsPanel() {
             </div>
           </div>
         )}
+
+        {visibleCount === 0 && pendingCount > 0 && (
+          <div className="rounded-[16px] border border-dashed border-white/[0.08] px-6 py-10 text-center">
+            <p className="text-[13px] font-600 text-text-2 mb-1">No approvals match the current filters</p>
+            <p className="text-[12px] text-text-3/60">Try clearing the search or switching the queue scope.</p>
+          </div>
+        )}
       </div>
     </div>
   )

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

@@ -5,12 +5,42 @@ import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { updateTask, bulkUpdateTasks } from '@/lib/tasks'
 import { TaskColumn } from './task-column'
+import { TaskCard } from './task-card'
 import { Skeleton } from '@/components/shared/skeleton'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import type { BoardTaskStatus } from '@/types'
+import type { BoardTask, BoardTaskStatus } from '@/types'
 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'
+
+function isTaskOverdue(task: BoardTask): boolean {
+  return !!task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
+}
+
+function matchesAttentionFilter(task: BoardTask, filter: AttentionFilter): boolean {
+  const blocked = !!task.blockedBy?.length
+  const pendingApproval = !!task.pendingApproval
+  const overdue = isTaskOverdue(task)
+  const failed = task.status === 'failed'
+  if (filter === 'all') return true
+  if (filter === 'approval') return pendingApproval
+  if (filter === 'blocked') return blocked
+  if (filter === 'overdue') return overdue
+  if (filter === 'failed') return failed
+  return blocked || pendingApproval || overdue || failed
+}
+
+function attentionRank(task: BoardTask): number {
+  if (task.pendingApproval) return 0
+  if (task.status === 'failed') return 1
+  if (task.blockedBy?.length) return 2
+  if (isTaskOverdue(task)) return 3
+  if (task.status === 'running') return 4
+  if (task.status === 'queued') return 5
+  return 6
+}
 
 export function TaskBoard() {
   const tasks = useAppStore((s) => s.tasks)
@@ -41,17 +71,6 @@ export function TaskBoard() {
 
   const clearSelection = useCallback(() => setSelectedIds(new Set()), [])
 
-  const selectAllInColumn = useCallback((status: BoardTaskStatus) => {
-    const ids = Object.values(tasks)
-      .filter((t) => t.status === status)
-      .map((t) => t.id)
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      ids.forEach((id) => next.add(id))
-      return next
-    })
-  }, [tasks])
-
   // Bulk action handlers
   const [bulkActing, setBulkActing] = useState(false)
   const handleBulkStatus = useCallback(async (status: BoardTaskStatus) => {
@@ -120,6 +139,8 @@ export function TaskBoard() {
     if (typeof window === 'undefined') return ''
     return new URLSearchParams(window.location.search).get('tag') || ''
   })
+  const [viewMode, setViewMode] = useState<BoardViewMode>('board')
+  const [attentionFilter, setAttentionFilter] = useState<AttentionFilter>('all')
 
   // Seed activeProjectFilter from URL on mount
   useEffect(() => {
@@ -152,14 +173,43 @@ export function TaskBoard() {
 
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 
-  const tasksByStatus = useCallback((status: BoardTaskStatus) =>
+  const matchesBaseFilters = useCallback((task: BoardTask) => {
+    if (!showArchived && task.status === 'archived') return false
+    if (filterAgentId && task.agentId !== filterAgentId) return false
+    if (filterTag && !(task.tags && task.tags.includes(filterTag))) return false
+    if (activeProjectFilter && task.projectId !== activeProjectFilter) return false
+    if (!matchesAttentionFilter(task, attentionFilter)) return false
+    return true
+  }, [activeProjectFilter, attentionFilter, filterAgentId, filterTag, showArchived])
+
+  const filteredTasks = useMemo(() => (
     Object.values(tasks)
-      .filter((t) => t.status === status
-        && (!filterAgentId || t.agentId === filterAgentId)
-        && (!filterTag || (t.tags && t.tags.includes(filterTag)))
-        && (!activeProjectFilter || t.projectId === activeProjectFilter))
+      .filter(matchesBaseFilters)
+      .sort((a, b) => {
+        const rankDiff = attentionRank(a) - attentionRank(b)
+        if (rankDiff !== 0) return rankDiff
+        const dueDiff = (a.dueAt || Number.MAX_SAFE_INTEGER) - (b.dueAt || Number.MAX_SAFE_INTEGER)
+        if (dueDiff !== 0) return dueDiff
+        return b.updatedAt - a.updatedAt
+      })
+  ), [tasks, matchesBaseFilters])
+
+  const tasksByStatus = useCallback((status: BoardTaskStatus) =>
+    filteredTasks
+      .filter((t) => t.status === status)
       .sort((a, b) => b.updatedAt - a.updatedAt),
-  [tasks, filterAgentId, filterTag, activeProjectFilter])
+  [filteredTasks])
+
+  const selectAllInColumn = useCallback((status: BoardTaskStatus) => {
+    const ids = filteredTasks
+      .filter((t) => t.status === status)
+      .map((t) => t.id)
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      ids.forEach((id) => next.add(id))
+      return next
+    })
+  }, [filteredTasks])
 
   const handleDrop = useCallback(async (taskId: string, newStatus: BoardTaskStatus) => {
     const task = tasks[taskId]
@@ -187,10 +237,22 @@ export function TaskBoard() {
       running: all.filter((t) => t.status === 'running').length,
       completed: all.filter((t) => t.status === 'completed').length,
       failed: all.filter((t) => t.status === 'failed').length,
-      overdue: all.filter((t) => t.dueAt && t.dueAt < Date.now() && t.status !== 'completed').length,
+      overdue: all.filter((t) => isTaskOverdue(t)).length,
+      blocked: all.filter((t) => (t.blockedBy?.length || 0) > 0).length,
+      approvals: all.filter((t) => !!t.pendingApproval).length,
+      attention: all.filter((t) => matchesAttentionFilter(t, 'needs-attention')).length,
     }
   }, [tasks])
 
+  const activeAttentionLabel = useMemo(() => {
+    if (attentionFilter === 'all') return null
+    if (attentionFilter === 'needs-attention') return 'Needs attention'
+    if (attentionFilter === 'approval') return 'Awaiting approval'
+    if (attentionFilter === 'blocked') return 'Blocked tasks'
+    if (attentionFilter === 'overdue') return 'Overdue tasks'
+    return 'Failed tasks'
+  }, [attentionFilter])
+
   // Custom dropdown state
   const [projectDropdownOpen, setProjectDropdownOpen] = useState(false)
   const projectDropdownRef = useRef<HTMLDivElement>(null)
@@ -253,6 +315,25 @@ export function TaskBoard() {
           </div>
         </div>
         <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1 p-1 rounded-[11px] bg-surface-2 border border-white/[0.06]">
+            {([
+              ['board', 'Board'],
+              ['list', 'List'],
+            ] as const).map(([value, label]) => (
+              <button
+                key={value}
+                onClick={() => setViewMode(value)}
+                className={`px-3 py-1.5 rounded-[8px] text-[12px] font-700 transition-all cursor-pointer border-none ${
+                  viewMode === value
+                    ? 'bg-accent-soft text-accent-bright'
+                    : 'text-text-3 hover:text-text-2'
+                }`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
           <div className="relative" ref={agentDropdownRef}>
             <button
               onClick={() => setAgentDropdownOpen(!agentDropdownOpen)}
@@ -384,8 +465,64 @@ export function TaskBoard() {
         </div>
       </div>
 
-      {activeProjectFilter && projects[activeProjectFilter] && (
-        <div className="flex items-center gap-2 px-8 pb-3">
+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3 px-8 pb-4">
+        {[
+          { key: 'needs-attention', label: 'Needs Attention', value: stats.attention, tone: 'text-red-300', accent: 'bg-red-500/10' },
+          { key: 'approval', label: 'Approvals', value: stats.approvals, tone: 'text-amber-400', accent: 'bg-amber-500/10' },
+          { key: 'blocked', label: 'Blocked', value: stats.blocked, tone: 'text-rose-400', accent: 'bg-rose-500/10' },
+          { key: 'overdue', label: 'Overdue', value: stats.overdue, tone: 'text-red-400', accent: 'bg-red-500/10' },
+          { key: 'failed', label: 'Failed', value: stats.failed, tone: 'text-orange-400', accent: 'bg-orange-500/10' },
+        ].map((item) => (
+          <button
+            key={item.key}
+            onClick={() => setAttentionFilter((current) => (current === item.key ? 'all' : item.key as AttentionFilter))}
+            className={`rounded-[14px] border px-4 py-3 text-left transition-all cursor-pointer ${
+              attentionFilter === item.key
+                ? 'border-white/[0.12] bg-white/[0.05]'
+                : 'border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04]'
+            }`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <div className={`inline-flex items-center rounded-full px-2 py-1 text-[10px] font-700 uppercase tracking-[0.08em] ${item.accent} ${item.tone}`}>
+              {item.label}
+            </div>
+            <div className={`mt-3 text-[24px] font-display font-700 tracking-[-0.03em] ${item.tone}`}>
+              {item.value}
+            </div>
+            <p className="mt-1 text-[11px] text-text-3/60">
+              {item.value === 0 ? 'Nothing waiting here' : 'Click to focus this queue'}
+            </p>
+          </button>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 px-8 pb-3">
+        {([
+          ['all', 'All'],
+          ['needs-attention', 'Needs Attention'],
+          ['approval', 'Awaiting Approval'],
+          ['blocked', 'Blocked'],
+          ['overdue', 'Overdue'],
+          ['failed', 'Failed'],
+        ] as const).map(([value, label]) => (
+          <button
+            key={value}
+            onClick={() => setAttentionFilter(value)}
+            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 transition-all cursor-pointer border-none ${
+              attentionFilter === value
+                ? 'bg-accent-soft text-accent-bright'
+                : 'bg-white/[0.04] text-text-3 hover:bg-white/[0.08] hover:text-text-2'
+            }`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {(activeProjectFilter && projects[activeProjectFilter]) || activeAttentionLabel ? (
+        <div className="flex flex-wrap items-center gap-2 px-8 pb-3">
+          {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' }} />
             {projects[activeProjectFilter].name}
@@ -396,11 +533,24 @@ export function TaskBoard() {
               &times;
             </button>
           </span>
+          )}
+          {activeAttentionLabel && (
+            <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] bg-amber-500/10 border border-amber-500/20 text-[12px] font-600 text-amber-400">
+              {activeAttentionLabel}
+              <button
+                onClick={() => setAttentionFilter('all')}
+                className="ml-1 text-amber-300 hover:text-white cursor-pointer border-none bg-transparent p-0 text-[14px] leading-none"
+              >
+                &times;
+              </button>
+            </span>
+          )}
         </div>
-      )}
+      ) : null}
 
-      <div className="flex-1 min-h-0 flex gap-5 px-8 pb-6 overflow-x-auto overflow-y-hidden overscroll-x-contain touch-pan-x">
-        {!loaded ? (
+      {viewMode === 'board' ? (
+        <div className="flex-1 min-h-0 flex gap-5 px-8 pb-6 overflow-x-auto overflow-y-hidden overscroll-x-contain touch-pan-x">
+          {!loaded ? (
           ACTIVE_COLUMNS.map((status) => (
             <div key={status} className="flex flex-col gap-3 min-w-[260px] flex-1">
               <Skeleton className="rounded-[10px]" width="100%" height={32} />
@@ -409,29 +559,75 @@ export function TaskBoard() {
               ))}
             </div>
           ))
-        ) : (
-          columns.map((status, idx) => (
-            <div
-              key={status}
-              className="flex flex-col gap-3 min-w-[260px] flex-1"
-              style={{
-                animation: 'fade-up 0.6s var(--ease-spring) both',
-                animationDelay: `${idx * 0.1}s`
-              }}
-            >
-              <TaskColumn
-                status={status}
-                tasks={tasksByStatus(status)}
-                onDrop={handleDrop}
-                selectionMode={selectionMode}
-                selectedIds={selectedIds}
-                onToggleSelect={toggleSelect}
-                onSelectAll={() => selectAllInColumn(status)}
-              />
+          ) : (
+            columns.map((status, idx) => (
+              <div
+                key={status}
+                className="flex flex-col gap-3 min-w-[260px] flex-1"
+                style={{
+                  animation: 'fade-up 0.6s var(--ease-spring) both',
+                  animationDelay: `${idx * 0.1}s`
+                }}
+              >
+                <TaskColumn
+                  status={status}
+                  tasks={tasksByStatus(status)}
+                  onDrop={handleDrop}
+                  selectionMode={selectionMode}
+                  selectedIds={selectedIds}
+                  onToggleSelect={toggleSelect}
+                  onSelectAll={() => selectAllInColumn(status)}
+                />
+              </div>
+            ))
+          )}
+        </div>
+      ) : (
+        <div className="flex-1 overflow-y-auto px-8 pb-6">
+          {!loaded ? (
+            <div className="max-w-4xl mx-auto flex flex-col gap-3">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <Skeleton key={i} className="rounded-[14px]" width="100%" height={112} />
+              ))}
             </div>
-          ))
-        )}
-      </div>
+          ) : 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>
+            </div>
+          ) : (
+            <div className="max-w-4xl mx-auto">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">
+                    {attentionFilter === 'all' ? 'Task List' : activeAttentionLabel || 'Task List'}
+                  </h2>
+                  <p className="text-[12px] text-text-3/60">
+                    {attentionFilter === 'all'
+                      ? 'All visible tasks, sorted by urgency and freshness.'
+                      : 'Sorted by approval, failures, blockers, and due dates.'}
+                  </p>
+                </div>
+                <div className="text-[12px] text-text-3/60">
+                  {filteredTasks.length} visible task{filteredTasks.length !== 1 ? 's' : ''}
+                </div>
+              </div>
+              <div className="flex flex-col gap-3">
+                {filteredTasks.map((task, idx) => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    index={idx}
+                    selectionMode={selectionMode}
+                    selected={selectedIds.has(task.id)}
+                    onToggleSelect={toggleSelect}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
 
       {/* Bulk action bar */}
       {selectionMode && (