src/components/agents/AgentTaskList.tsx

import type { AgentTask } from '../../types';

interface AgentTaskListProps {
  tasks: AgentTask[];
}

const statusConfig: Record<
  AgentTask['status'],
  { label: string; dotClass: string }
> = {
  queued: { label: '대기', dotClass: 'bg-ink-light' },
  processing: { label: '처리 중', dotClass: 'bg-ink-black animate-pulse' },
  done: { label: '완료', dotClass: 'bg-status-success' },
  failed: { label: '실패', dotClass: 'bg-status-error' },
};

export default function AgentTaskList({ tasks }: AgentTaskListProps) {
  return (
    <div>
      <h4 className="text-sm font-semibold text-ink-black mb-3">태스크 큐</h4>
      {tasks.length === 0 ? (
        <p className="text-xs text-ink-light py-4 text-center">
          등록된 태스크가 없습니다.
        </p>
      ) : (
        <ul className="divide-y divide-border-default">
          {tasks.map((task) => {
            const cfg = statusConfig[task.status];
            return (
              <li key={task.id} className="py-3 flex items-start gap-3">
                <span
                  className={`mt-1.5 w-2 h-2 rounded-full shrink-0 ${cfg.dotClass}`}
                />
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-ink-dark truncate">{task.title}</p>
                  <div className="flex items-center gap-3 mt-1">
                    <span className="text-xs text-ink-light font-mono">
                      {task.createdAt}
                    </span>
                    <span className="text-xs text-ink-medium font-medium">
                      {cfg.label}
                    </span>
                    {task.completedAt && (
                      <span className="text-xs text-ink-light">
                        → {task.completedAt}
                      </span>
                    )}
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}