@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -2,6 +2,8 @@
 
 import { useState, useCallback } from 'react'
 import { TaskCard } from './task-card'
+import { createTask } from '@/lib/tasks'
+import { useAppStore } from '@/stores/use-app-store'
 import type { BoardTask, BoardTaskStatus } from '@/types'
 
 const COLUMN_CONFIG: Record<BoardTaskStatus, { label: string; color: string; dot: string }> = {
@@ -17,11 +19,18 @@ interface Props {
   status: BoardTaskStatus
   tasks: BoardTask[]
   onDrop: (taskId: string, newStatus: BoardTaskStatus) => void
+  selectionMode?: boolean
+  selectedIds?: Set<string>
+  onToggleSelect?: (id: string) => void
+  onSelectAll?: () => void
 }
 
-export function TaskColumn({ status, tasks, onDrop }: Props) {
+export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds, onToggleSelect, onSelectAll }: Props) {
   const config = COLUMN_CONFIG[status]
   const [dragOver, setDragOver] = useState(false)
+  const [quickAddValue, setQuickAddValue] = useState('')
+  const [adding, setAdding] = useState(false)
+  const loadTasks = useAppStore((s) => s.loadTasks)
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault()
@@ -42,6 +51,21 @@ export function TaskColumn({ status, tasks, onDrop }: Props) {
     }
   }, [onDrop, status])
 
+  const handleQuickAdd = async () => {
+    const title = quickAddValue.trim()
+    if (!title || adding) return
+    setAdding(true)
+    try {
+      await createTask({ title, description: '', agentId: '', status })
+      await loadTasks()
+      setQuickAddValue('')
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  const selectedCount = tasks.filter((t) => selectedIds?.has(t.id)).length
+
   return (
     <div
       className={`flex-1 min-w-[240px] max-w-[320px] flex flex-col rounded-[16px] transition-colors duration-150 ${
@@ -51,14 +75,49 @@ export function TaskColumn({ status, tasks, onDrop }: Props) {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="flex items-center gap-2.5 px-2 mb-4">
+      <div className="flex items-center gap-2.5 px-2 mb-3">
         <div className={`w-2 h-2 rounded-full ${config.dot}`} />
         <span className={`font-display text-[13px] font-600 ${config.color}`}>{config.label}</span>
         <span className="text-[12px] text-text-3 ml-auto">{tasks.length}</span>
+        {selectionMode && tasks.length > 0 && (
+          <button
+            onClick={onSelectAll}
+            className={`text-[10px] font-600 px-1.5 py-0.5 rounded-[5px] cursor-pointer border-none transition-colors
+              ${selectedCount === tasks.length && selectedCount > 0
+                ? 'bg-accent-bright/20 text-accent-bright'
+                : 'bg-white/[0.04] text-text-3 hover:bg-white/[0.08]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {selectedCount === tasks.length && selectedCount > 0 ? 'All' : 'Select all'}
+          </button>
+        )}
       </div>
+
+      {/* Quick add input */}
+      {(status === 'backlog' || status === 'queued') && (
+        <div className="px-1 mb-2">
+          <input
+            type="text"
+            value={quickAddValue}
+            onChange={(e) => setQuickAddValue(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') handleQuickAdd() }}
+            placeholder={`+ Add to ${config.label.toLowerCase()}...`}
+            className="w-full px-3 py-2 rounded-[10px] bg-white/[0.02] border border-dashed border-white/[0.08] text-[12px] text-text placeholder:text-text-3/30 outline-none focus:border-white/[0.15] focus:bg-white/[0.03] transition-colors"
+            style={{ fontFamily: 'inherit' }}
+            disabled={adding}
+          />
+        </div>
+      )}
+
       <div className="flex flex-col gap-3 flex-1 overflow-y-auto pr-1 px-1 pb-2">
         {tasks.map((task) => (
-          <TaskCard key={task.id} task={task} />
+          <TaskCard
+            key={task.id}
+            task={task}
+            selectionMode={selectionMode}
+            selected={selectedIds?.has(task.id)}
+            onToggleSelect={onToggleSelect}
+          />
         ))}
         {tasks.length === 0 && (
           <div className={`text-[12px] text-text-3/50 text-center py-8 rounded-[12px] border border-dashed transition-colors ${

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

@@ -5,6 +5,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { BoardTaskStatus } from '@/types'
+import { EmptyState } from '@/components/shared/empty-state'
 
 const STATUS_DOT: Record<BoardTaskStatus, string> = {
   backlog: 'bg-white/20',
@@ -88,9 +89,16 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
       )}
 
       {filtered.length === 0 && (
-        <div className="text-center text-text-3 text-[13px] py-12 px-6">
-          {sorted.length === 0 ? 'No tasks yet' : 'No matching tasks'}
-        </div>
+        <EmptyState
+          icon={
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="text-accent-bright">
+              <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" opacity="0.2" />
+              <path d="M9 11l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          }
+          title={sorted.length === 0 ? 'No tasks yet' : 'No matching tasks'}
+          subtitle={sorted.length === 0 ? 'Create tasks and assign agents to run them' : 'Try adjusting your search'}
+        />
       )}
       {filtered.map((task) => {
         const agent = agents[task.agentId]
@@ -101,7 +109,7 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
               setEditingTaskId(task.id)
               setTaskSheetOpen(true)
             }}
-            className="w-full text-left px-5 py-3.5 border-none bg-transparent cursor-pointer hover:bg-white/[0.03] transition-all"
+            className="w-full text-left py-3.5 px-4 rounded-[14px] border border-transparent bg-transparent cursor-pointer hover:bg-white/[0.03] transition-all"
             style={{ fontFamily: 'inherit' }}
           >
             <div className="flex items-center gap-2.5">