@swarmclawai/swarmclaw 0.2.0

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

@@ -0,0 +1,179 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { updateTask, archiveTask } from '@/lib/tasks'
+import type { BoardTask, BoardTaskStatus } from '@/types'
+
+function timeAgo(ts: number) {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`
+  return `${Math.floor(diff / 86400_000)}d ago`
+}
+
+export function TaskCard({ task }: { task: BoardTask }) {
+  const agents = useAppStore((s) => s.agents)
+  const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
+  const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
+  const setActiveView = useAppStore((s) => s.setActiveView)
+  const [dragging, setDragging] = useState(false)
+
+  const agent = agents[task.agentId]
+
+  const handleQueue = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    await updateTask(task.id, { status: 'queued' })
+    await loadTasks()
+  }
+
+  const handleArchive = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    await archiveTask(task.id)
+    await loadTasks()
+  }
+
+  const handleViewSession = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (task.sessionId) {
+      setCurrentSession(task.sessionId)
+      setActiveView('sessions')
+    }
+  }
+
+  const handleDragStart = useCallback((e: React.DragEvent) => {
+    e.dataTransfer.setData('text/plain', task.id)
+    e.dataTransfer.effectAllowed = 'move'
+    setDragging(true)
+  }, [task.id])
+
+  const handleDragEnd = useCallback(() => {
+    setDragging(false)
+  }, [])
+
+  return (
+    <div
+      draggable
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onClick={() => {
+        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
+        transition-all group ${dragging ? 'opacity-40 scale-[0.97]' : ''}`}
+    >
+      <div className="flex items-start gap-3 mb-3">
+        <h4 className="flex-1 text-[14px] font-600 text-text leading-[1.4] line-clamp-2">{task.title}</h4>
+      </div>
+
+      {task.description && (
+        <p className="text-[12px] text-text-3 line-clamp-2 mb-3">{task.description}</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) => (
+            <img key={i} src={url} alt="" className="w-12 h-12 rounded-[8px] object-cover border border-white/[0.06] shrink-0" />
+          ))}
+          {task.images.length > 3 && (
+            <span className="w-12 h-12 rounded-[8px] bg-surface-2 border border-white/[0.06] flex items-center justify-center text-[11px] text-text-3 font-600 shrink-0">
+              +{task.images.length - 3}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Schedule run stats */}
+      {task.sourceType === 'schedule' && (
+        <div className="flex items-center gap-2 mb-3 text-[11px] text-text-3">
+          <span className="px-1.5 py-0.5 rounded-[5px] bg-purple-500/10 text-purple-400 font-600">
+            Run #{task.runNumber || 1}
+          </span>
+          {(task.totalRuns ?? 0) > 0 && (
+            <>
+              <span title="Total runs">{task.totalRuns} runs</span>
+              {(task.totalCompleted ?? 0) > 0 && (
+                <span className="text-green-400" title="Completed">{task.totalCompleted} ok</span>
+              )}
+              {(task.totalFailed ?? 0) > 0 && (
+                <span className="text-red-400" title="Failed">{task.totalFailed} fail</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">
+            {agent.name}
+          </span>
+        )}
+        <span className="text-[11px] text-text-3">{timeAgo(task.updatedAt)}</span>
+        {task.comments && task.comments.length > 0 && (
+          <span className="flex items-center gap-1 text-[11px] text-text-3">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            {task.comments.length}
+          </span>
+        )}
+
+        {task.status === 'backlog' && (
+          <button
+            onClick={handleQueue}
+            className="ml-auto px-2.5 py-1 rounded-[8px] text-[11px] font-600 bg-amber-500/10 text-amber-400 border-none cursor-pointer
+              opacity-0 group-hover:opacity-100 transition-opacity hover:bg-amber-500/20"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Queue
+          </button>
+        )}
+
+        {task.sessionId && (task.status === 'running' || task.status === 'completed') && (
+          <button
+            onClick={handleViewSession}
+            className="ml-auto px-2.5 py-1 rounded-[8px] text-[11px] font-600 bg-white/[0.06] text-text-2 border-none cursor-pointer
+              opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white/[0.1]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            View
+          </button>
+        )}
+
+        {(task.status === 'completed' || task.status === 'failed') && !task.sessionId && (
+          <button
+            onClick={handleArchive}
+            className="ml-auto px-2.5 py-1 rounded-[8px] text-[11px] font-600 bg-white/[0.04] text-text-3 border-none cursor-pointer
+              opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white/[0.08]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Archive
+          </button>
+        )}
+      </div>
+
+      {task.error && (
+        <p className="mt-2 text-[11px] text-red-400/80 line-clamp-2">{task.error}</p>
+      )}
+
+      {/* Inline comments — show latest 2 */}
+      {task.comments && task.comments.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-white/[0.04] space-y-2">
+          {task.comments.slice(-2).map((c) => (
+            <div key={c.id} className="flex gap-2">
+              <span className={`text-[11px] font-600 shrink-0 ${c.agentId ? 'text-accent-bright' : 'text-text-2'}`}>
+                {c.author}:
+              </span>
+              <p className="text-[11px] text-text-3 line-clamp-2 leading-[1.5]">{c.text}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { TaskCard } from './task-card'
+import type { BoardTask, BoardTaskStatus } from '@/types'
+
+const COLUMN_CONFIG: Record<BoardTaskStatus, { label: string; color: string; dot: string }> = {
+  backlog: { label: 'Backlog', color: 'text-text-3', dot: 'bg-white/20' },
+  queued: { label: 'Queued', color: 'text-amber-400', dot: 'bg-amber-400' },
+  running: { label: 'Running', color: 'text-blue-400', dot: 'bg-blue-400' },
+  completed: { label: 'Completed', color: 'text-emerald-400', dot: 'bg-emerald-400' },
+  failed: { label: 'Failed', color: 'text-red-400', dot: 'bg-red-400' },
+  archived: { label: 'Archived', color: 'text-text-3/50', dot: 'bg-white/10' },
+}
+
+interface Props {
+  status: BoardTaskStatus
+  tasks: BoardTask[]
+  onDrop: (taskId: string, newStatus: BoardTaskStatus) => void
+}
+
+export function TaskColumn({ status, tasks, onDrop }: Props) {
+  const config = COLUMN_CONFIG[status]
+  const [dragOver, setDragOver] = useState(false)
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback(() => {
+    setDragOver(false)
+  }, [])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+    const taskId = e.dataTransfer.getData('text/plain')
+    if (taskId) {
+      onDrop(taskId, status)
+    }
+  }, [onDrop, status])
+
+  return (
+    <div
+      className={`flex-1 min-w-[240px] max-w-[320px] flex flex-col rounded-[16px] transition-colors duration-150 ${
+        dragOver ? 'bg-accent-bright/[0.04] ring-1 ring-accent-bright/20' : ''
+      }`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div className="flex items-center gap-2.5 px-2 mb-4">
+        <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>
+      </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} />
+        ))}
+        {tasks.length === 0 && (
+          <div className={`text-[12px] text-text-3/50 text-center py-8 rounded-[12px] border border-dashed transition-colors ${
+            dragOver ? 'border-accent-bright/30 text-accent-bright/50' : 'border-transparent'
+          }`}>
+            {dragOver ? 'Drop here' : 'No tasks'}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,118 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import type { BoardTaskStatus } from '@/types'
+
+const STATUS_DOT: Record<BoardTaskStatus, string> = {
+  backlog: 'bg-white/20',
+  queued: 'bg-amber-400',
+  running: 'bg-blue-400 animate-pulse',
+  completed: 'bg-emerald-400',
+  failed: 'bg-red-400',
+  archived: 'bg-white/10',
+}
+
+export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
+  const tasks = useAppStore((s) => s.tasks)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+  const agents = useAppStore((s) => s.agents)
+  const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
+  const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
+  const [search, setSearch] = useState('')
+  const [clearing, setClearing] = useState(false)
+
+  useEffect(() => {
+    loadTasks()
+    const interval = setInterval(loadTasks, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const sorted = useMemo(() =>
+    Object.values(tasks).sort((a, b) => b.updatedAt - a.updatedAt),
+    [tasks],
+  )
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return sorted
+    const q = search.toLowerCase()
+    return sorted.filter((t) => {
+      const agent = agents[t.agentId]
+      return t.title.toLowerCase().includes(q)
+        || t.status.includes(q)
+        || agent?.name.toLowerCase().includes(q)
+    })
+  }, [sorted, search, agents])
+
+  const doneCount = useMemo(() =>
+    sorted.filter((t) => t.status === 'completed' || t.status === 'failed').length,
+    [sorted],
+  )
+
+  const handleClearDone = async () => {
+    setClearing(true)
+    try {
+      await api('DELETE', '/tasks?filter=done')
+      await loadTasks()
+    } catch { /* silent */ }
+    setClearing(false)
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-y-auto">
+      {/* Search + clear */}
+      {sorted.length > 0 && (
+        <div className="px-3 py-2 shrink-0 flex flex-col gap-2">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search tasks..."
+            className="w-full px-3 py-2 rounded-[10px] border border-white/[0.04] bg-surface text-text
+              text-[12px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
+            style={{ fontFamily: 'inherit' }}
+          />
+          {doneCount > 0 && (
+            <button
+              onClick={() => { void handleClearDone() }}
+              disabled={clearing}
+              className="w-full py-1.5 rounded-[8px] border border-white/[0.06] bg-transparent text-text-3 text-[11px] font-600 cursor-pointer hover:text-red-400 hover:border-red-400/20 hover:bg-red-400/[0.04] disabled:opacity-40 transition-all"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {clearing ? 'Clearing...' : `Clear ${doneCount} completed/failed`}
+            </button>
+          )}
+        </div>
+      )}
+
+      {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>
+      )}
+      {filtered.map((task) => {
+        const agent = agents[task.agentId]
+        return (
+          <button
+            key={task.id}
+            onClick={() => {
+              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"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <div className="flex items-center gap-2.5">
+              <div className={`w-2 h-2 rounded-full shrink-0 ${STATUS_DOT[task.status]}`} />
+              <span className="text-[14px] font-600 text-text truncate flex-1">{task.title}</span>
+            </div>
+            {agent && (
+              <span className="text-[11px] text-text-3 ml-[18px]">{agent.name}</span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}