@jcjeon/integration-cli 0.2.0 → 0.2.1

package/apps/web/src/features/tasks/ui/TaskListModal.tsx

@@ -1,591 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useCallback, useState } from "react";
-
-import { Modal } from "@/components/ui/Modal";
-import { isQuotaExceeded } from "@/lib/quota";
-import type { AgentTestCodePreference, Task, TaskStatus } from "../api/tasks.api";
-import { useTaskExecution } from "../hooks/useTaskExecution";
-import { useTaskList } from "../hooks/useTaskList";
-import { AgentRoleBadge } from "./AgentRoleSelect";
-import { AgentOutputPanel } from "./AgentOutputPanel";
-import { ChangelogPanel } from "./ChangelogPanel";
-import { RunHistoryPanel } from "./RunHistoryPanel";
-import { TaskEditModal } from "./TaskEditModal";
-
-const TEST_CODE_SUPPLEMENT_NOTE =
-  "기존 구현은 유지하면서 이 에이전트가 담당한 변경 사항에 대한 테스트 코드를 작성해주세요. 프로젝트의 기존 테스트 패턴을 따르고 가능한 경우 테스트 실행 결과도 남겨주세요.";
-
-// ─── 상태 뱃지 ───────────────────────────────────────────────────────────────
-
-const STATUS_CONFIG: Record<
-  TaskStatus,
-  { label: string; className: string; dot?: string }
-> = {
-  pending:   { label: "대기",    className: "border-gray-900/[0.1] text-gray-900/35 dark:border-white/[0.1] dark:text-white/35",                                    dot: "bg-gray-900/25 dark:bg-white/25" },
-  running:   { label: "실행 중",  className: "border-emerald-500/40 text-emerald-600 bg-emerald-500/[0.08] dark:text-emerald-400",        dot: "bg-emerald-500 animate-pulse dark:bg-emerald-400" },
-  stopped:   { label: "중지됨",  className: "border-red-500/40 text-red-600 bg-red-500/[0.08] dark:text-red-400",                    dot: "bg-red-500 dark:bg-red-400" },
-  completed: { label: "완료",    className: "border-blue-500/40 text-blue-600 bg-blue-500/[0.08] dark:text-blue-400",                 dot: "bg-blue-500 dark:bg-blue-400" },
-  error:     { label: "오류",    className: "border-red-500/40 text-red-600 bg-red-500/[0.08] dark:text-red-400",                    dot: "bg-red-500" },
-};
-
-function StatusBadge({ status }: { status: TaskStatus }) {
-  const cfg = STATUS_CONFIG[status] ?? STATUS_CONFIG.pending;
-  return (
-    <span className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${cfg.className}`}>
-      {cfg.dot && <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot}`} />}
-      {cfg.label}
-    </span>
-  );
-}
-
-// ─── TaskCard ─────────────────────────────────────────────────────────────────
-
-interface TaskCardProps {
-  task: Task;
-  isActioning: boolean;
-  expanded: boolean;
-  onToggleExpand: () => void;
-  onExecute: (preferences: AgentTestCodePreference[]) => void;
-  onStop: () => void;
-  onEdit: () => void;
-  onRerun: (note: string) => void;
-  onRerunAgent: (agentId: number, note: string) => void;
-  onWriteTestsAgent: (agentId: number) => void;
-  onArchive: () => void;
-  onDelete: () => void;
-  onTaskStatusChange: (taskId: string, status: TaskStatus) => void;
-}
-
-function TaskCard({
-  task,
-  isActioning,
-  expanded,
-  onToggleExpand,
-  onExecute,
-  onStop,
-  onEdit,
-  onRerun,
-  onRerunAgent,
-  onWriteTestsAgent,
-  onArchive,
-  onDelete,
-  onTaskStatusChange,
-}: TaskCardProps) {
-  const isRunning  = task.status === "running";
-  const isFinished = task.status === "completed" || task.status === "error" || task.status === "stopped";
-  const canExecute = task.status === "pending" || task.status === "stopped";
-  const canStop    = isRunning;
-  const canRerun   = isFinished;
-  const showLogs   = expanded && (isRunning || isFinished);
-
-  const [rerunMode, setRerunMode] = useState(false);
-  const [rerunAgentId, setRerunAgentId] = useState<number | null>(null);
-  const [supplementNote, setSupplementNote] = useState("");
-  const [activeTab, setActiveTab] = useState<"logs" | "changelog" | "history">("logs");
-  const [changelogMounted, setChangelogMounted] = useState(false);
-  const [historyMounted, setHistoryMounted] = useState(false);
-  const [testCodeByAgent, setTestCodeByAgent] = useState<Record<number, boolean>>({});
-
-  const handleRerunConfirm = () => {
-    if (rerunAgentId != null) {
-      onRerunAgent(rerunAgentId, supplementNote);
-    } else {
-      onRerun(supplementNote);
-    }
-    setRerunMode(false);
-    setRerunAgentId(null);
-    setSupplementNote("");
-  };
-
-  const handleRerunCancel = () => {
-    setRerunMode(false);
-    setRerunAgentId(null);
-    setSupplementNote("");
-  };
-
-  const openAgentRerun = (agentId: number) => {
-    setRerunAgentId(agentId);
-    setRerunMode(true);
-  };
-
-  const handleExecute = () => {
-    onExecute(
-      task.agents.map((agent) => ({
-        agentId: agent.id,
-        writeTestCode: Boolean(testCodeByAgent[agent.id]),
-      })),
-    );
-  };
-
-  const toggleTestCode = (agentId: number) => {
-    setTestCodeByAgent((prev) => ({ ...prev, [agentId]: !prev[agentId] }));
-  };
-
-  const { agentLogs, connected } = useTaskExecution(
-    showLogs ? task.id : null,
-    onTaskStatusChange,
-  );
-
-  const hasQuotaError = Object.values(agentLogs).some((log) =>
-    isQuotaExceeded((log.output ?? "") + (log.errorMessage ?? "")),
-  );
-  const selectedRerunAgent = rerunAgentId != null ? task.agents.find((agent) => agent.id === rerunAgentId) : null;
-  const selectedRerunLabel = selectedRerunAgent
-    ? selectedRerunAgent.customRole ?? selectedRerunAgent.role
-    : null;
-
-  return (
-    <article className={[
-      "flex flex-col rounded-xl border transition-colors",
-      isRunning
-        ? "border-emerald-500/20 bg-emerald-500/[0.03]"
-        : "border-gray-900/[0.07] bg-gray-900/[0.02] hover:border-gray-900/[0.11] dark:border-white/[0.07] dark:bg-white/[0.02] dark:hover:border-white/[0.11]",
-    ].join(" ")}>
-      {/* 카드 헤더 */}
-      <button
-        type="button"
-        onClick={onToggleExpand}
-        className="flex items-start justify-between gap-3 rounded-xl p-4 text-left"
-      >
-        <div className="flex min-w-0 flex-col gap-1">
-          <div className="flex items-center gap-2">
-            <h3 className="truncate text-sm font-medium text-gray-900/80 dark:text-white/80">{task.title}</h3>
-            {task.agents.length > 0 && (
-              <span className="shrink-0 rounded-full border border-gray-900/[0.08] bg-gray-900/[0.04] px-1.5 py-0.5 text-[10px] text-gray-900/30 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-white/30">
-                에이전트 {task.agents.length}
-              </span>
-            )}
-          </div>
-          <p className="font-mono text-[10px] text-gray-900/20 dark:text-white/20">{task.id.slice(0, 8)}…</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <StatusBadge status={task.status as TaskStatus} />
-          {hasQuotaError && (
-            <span className="flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/[0.08] px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400">
-              <svg viewBox="0 0 16 16" fill="currentColor" className="h-2.5 w-2.5">
-                <path fillRule="evenodd" d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clipRule="evenodd" />
-              </svg>
-              한도 초과
-            </span>
-          )}
-          <svg
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            className={`h-3.5 w-3.5 shrink-0 text-gray-900/20 transition-transform dark:text-white/20 ${expanded ? "rotate-180" : ""}`}
-          >
-            <path fillRule="evenodd" d="M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z" clipRule="evenodd" />
-          </svg>
-        </div>
-      </button>
-
-      {/* 확장 영역 — grid-rows 트랜지션으로 height fade + opacity fade */}
-      <div
-        className={[
-          "grid transition-all duration-200 ease-out",
-          expanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-        ].join(" ")}
-      >
-        <div className="overflow-hidden">
-          <div className="flex flex-col gap-3 px-4 pb-4">
-            {/* 요구사항 */}
-            {task.requirements.length > 0 && (
-              <ul className="flex flex-col gap-0.5">
-                {[...task.requirements]
-                  .sort((a, b) => a.orderIndex - b.orderIndex)
-                  .map((r) => (
-                    <li key={r.id} className="flex items-start gap-1.5 text-xs text-gray-900/35 dark:text-white/35">
-                      <span className="mt-0.5 text-gray-900/15 dark:text-white/15">•</span>
-                      <span>{r.content}</span>
-                    </li>
-                  ))}
-              </ul>
-            )}
-
-            {/* 에이전트 역할 */}
-            {task.agents.length > 0 && !showLogs && (
-              <div className="flex flex-wrap gap-1.5">
-                {task.agents.map((a) => (
-                  <AgentRoleBadge key={a.id} role={a.role} customRole={a.customRole} />
-                ))}
-              </div>
-            )}
-
-            {/* 실행 전 테스트 코드 작성 여부 */}
-            {canExecute && task.agents.length > 0 && (
-              <div className="flex flex-col gap-2 rounded-xl border border-gray-900/[0.06] bg-white/40 p-3 dark:border-white/[0.06] dark:bg-white/[0.03]">
-                <div className="flex items-center justify-between gap-3">
-                  <p className="text-xs font-medium text-gray-900/55 dark:text-white/55">실행 전 테스트 코드 작성 여부</p>
-                  <span className="text-[10px] text-gray-900/25 dark:text-white/25">에이전트별 선택</span>
-                </div>
-                <div className="grid gap-1.5 sm:grid-cols-2">
-                  {task.agents.map((agent) => (
-                    <label
-                      key={agent.id}
-                      className="flex min-h-9 cursor-pointer items-center justify-between gap-2 rounded-lg border border-gray-900/[0.06] bg-gray-900/[0.02] px-2.5 py-1.5 transition-colors hover:border-emerald-500/25 hover:bg-emerald-500/[0.05] dark:border-white/[0.06] dark:bg-white/[0.02]"
-                    >
-                      <span className="min-w-0">
-                        <AgentRoleBadge role={agent.role} customRole={agent.customRole} />
-                      </span>
-                      <span className="flex shrink-0 items-center gap-1.5 text-[11px] font-medium text-gray-900/45 dark:text-white/45">
-                        <input
-                          type="checkbox"
-                          checked={Boolean(testCodeByAgent[agent.id])}
-                          onChange={() => toggleTestCode(agent.id)}
-                          className="h-3.5 w-3.5 accent-emerald-600"
-                        />
-                        테스트 코드
-                      </span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* 실행 로그 / 변경사항 탭 */}
-            {showLogs && (
-              <div className="flex flex-col gap-2">
-                {isFinished && (
-                  <div className="flex gap-1 rounded-lg border border-gray-900/[0.06] bg-gray-900/[0.02] p-0.5 dark:border-white/[0.06] dark:bg-white/[0.02]">
-                    {(["logs", "changelog", "history"] as const).map((tab) => (
-                      <button
-                        key={tab}
-                        type="button"
-                        onClick={() => {
-                          setActiveTab(tab);
-                          if (tab === "changelog") setChangelogMounted(true);
-                          if (tab === "history") setHistoryMounted(true);
-                        }}
-                        className={[
-                          "flex-1 rounded-md px-3 py-1 text-xs font-medium transition-colors",
-                          activeTab === tab
-                            ? "bg-white text-gray-900/70 shadow-sm dark:bg-white/[0.08] dark:text-white/70"
-                            : "text-gray-900/35 hover:text-gray-900/60 dark:text-white/35 dark:hover:text-white/60",
-                        ].join(" ")}
-                      >
-                        {tab === "logs" ? "실행 로그" : tab === "changelog" ? "변경사항" : "실행 기록"}
-                      </button>
-                    ))}
-                  </div>
-                )}
-
-                <div className={activeTab !== "logs" ? "hidden" : ""}>
-                  <AgentOutputPanel
-                    agents={task.agents}
-                    agentLogs={agentLogs}
-                    connected={connected}
-                    taskStatus={task.status as TaskStatus}
-                    canRerun={canRerun}
-                    rerunDisabled={isActioning}
-                    onRerunAgent={openAgentRerun}
-                    onWriteTestsAgent={onWriteTestsAgent}
-                  />
-                </div>
-                {changelogMounted && isFinished && (
-                  <div className={activeTab !== "changelog" ? "hidden" : ""}>
-                    <ChangelogPanel taskId={task.id} agents={task.agents} />
-                  </div>
-                )}
-                {historyMounted && isFinished && (
-                  <div className={activeTab !== "history" ? "hidden" : ""}>
-                    <RunHistoryPanel
-                      taskId={task.id}
-                      agents={task.agents}
-                      canRerunAgent={canRerun}
-                      rerunDisabled={isActioning}
-                      onRerunAgent={openAgentRerun}
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* 재 실행 보완 입력 패널 */}
-            {rerunMode && (
-              <div className="flex flex-col gap-2 rounded-xl border border-blue-500/20 bg-blue-500/[0.05] p-3">
-                <label className="text-xs font-medium text-blue-600 dark:text-blue-400/80">
-                  {selectedRerunLabel ? `${selectedRerunLabel} 에이전트 재실행` : "전체 재실행"}
-                  보완할 점 입력
-                  <span className="ml-1 text-[10px] font-normal text-gray-900/25 dark:text-white/25">(선택 - 비워두면 동일 조건으로 재실행)</span>
-                </label>
-                <textarea
-                  rows={3}
-                  value={supplementNote}
-                  onChange={(e) => setSupplementNote(e.target.value)}
-                  placeholder="예: 에러 핸들링이 빠져 있습니다. 로딩 상태도 추가해주세요."
-                  autoFocus
-                  className="w-full resize-none rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] px-3 py-2 text-xs text-gray-900/70 placeholder-gray-900/20 outline-none focus:border-blue-500/50 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/70 dark:placeholder-white/20"
-                />
-                <div className="flex justify-end gap-2">
-                  <button
-                    type="button"
-                    onClick={handleRerunCancel}
-                    className="rounded-lg px-3 py-1.5 text-xs text-gray-900/35 transition-colors hover:text-gray-900/70 dark:text-white/35 dark:hover:text-white/70"
-                  >
-                    취소
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleRerunConfirm}
-                    disabled={isActioning}
-                    className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 disabled:opacity-40"
-                  >
-                    {isActioning ? (
-                      <span className="h-3 w-3 animate-spin rounded-full border border-white/30 border-t-white" />
-                    ) : (
-                      <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
-                        <path fillRule="evenodd" d="M13.836 2.477a.75.75 0 01.75.75v3.182a.75.75 0 01-.75.75h-3.182a.75.75 0 010-1.5h1.37A5.995 5.995 0 008 4a6 6 0 100 12 6 6 0 005.812-4.5h1.539A7.5 7.5 0 118 2.5c1.373 0 2.663.372 3.772 1.021l.314-.814a.75.75 0 01.75-.23z" clipRule="evenodd" />
-                      </svg>
-                    )}
-                    재 실행
-                  </button>
-                </div>
-              </div>
-            )}
-
-            {/* 액션 버튼 */}
-            <div className="flex items-center justify-between border-t border-gray-900/[0.05] pt-3 dark:border-white/[0.05]">
-              <span className="text-[10px] text-gray-900/20 dark:text-white/20">
-                {new Date(task.createdAt).toLocaleString("ko-KR", {
-                  month: "2-digit", day: "2-digit",
-                  hour: "2-digit", minute: "2-digit",
-                })}
-              </span>
-              <div className="flex items-center gap-1.5">
-                {/* 실행 (pending/stopped) */}
-                {canExecute && (
-                  <button
-                    onClick={handleExecute}
-                    disabled={isActioning}
-                    className="flex items-center gap-1.5 rounded-lg bg-emerald-600/80 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-emerald-500 disabled:opacity-40"
-                  >
-                    {isActioning ? (
-                      <span className="h-3 w-3 animate-spin rounded-full border border-white/30 border-t-white" />
-                    ) : (
-                      <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
-                        <path d="M6.3 2.841A1.5 1.5 0 004 4.11v7.78a1.5 1.5 0 002.3 1.269l5.773-3.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
-                      </svg>
-                    )}
-                    실행
-                  </button>
-                )}
-
-                {/* 중지 (running) */}
-                {canStop && (
-                  <button
-                    onClick={onStop}
-                    disabled={isActioning}
-                    className="flex items-center gap-1.5 rounded-lg bg-red-600/80 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500 disabled:opacity-40"
-                  >
-                    {isActioning ? (
-                      <span className="h-3 w-3 animate-spin rounded-full border border-white/30 border-t-white" />
-                    ) : (
-                      <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
-                        <path d="M5.25 3A2.25 2.25 0 003 5.25v5.5A2.25 2.25 0 005.25 13h5.5A2.25 2.25 0 0013 10.75v-5.5A2.25 2.25 0 0010.75 3h-5.5z" />
-                      </svg>
-                    )}
-                    중지
-                  </button>
-                )}
-
-                {/* 재 실행 (completed/error) */}
-                {canRerun && !rerunMode && (
-                  <button
-                    onClick={() => setRerunMode(true)}
-                    disabled={isActioning}
-                    className="flex items-center gap-1.5 rounded-lg border border-blue-500/30 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:border-blue-400/50 hover:bg-blue-500/[0.08] hover:text-blue-500 disabled:opacity-40 dark:text-blue-400 dark:hover:text-blue-300"
-                  >
-                    <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
-                      <path fillRule="evenodd" d="M13.836 2.477a.75.75 0 01.75.75v3.182a.75.75 0 01-.75.75h-3.182a.75.75 0 010-1.5h1.37A5.995 5.995 0 008 4a6 6 0 100 12 6 6 0 005.812-4.5h1.539A7.5 7.5 0 118 2.5c1.373 0 2.663.372 3.772 1.021l.314-.814a.75.75 0 01.75-.23z" clipRule="evenodd" />
-                    </svg>
-                    재 실행
-                  </button>
-                )}
-
-                {/* 수정 */}
-                {!isFinished && (
-                  <button
-                    onClick={onEdit}
-                    disabled={isActioning || isRunning}
-                    className="rounded-lg border border-gray-900/[0.08] px-3 py-1.5 text-xs font-medium text-gray-900/40 transition-colors hover:border-gray-900/[0.15] hover:text-gray-900/75 disabled:cursor-not-allowed disabled:opacity-30 dark:border-white/[0.08] dark:text-white/40 dark:hover:border-white/[0.15] dark:hover:text-white/75"
-                    title={isRunning ? "실행 중에는 수정할 수 없습니다" : "수정"}
-                  >
-                    수정
-                  </button>
-                )}
-
-                <Link
-                  href={`/task/${task.id}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="rounded-lg border border-gray-900/[0.08] px-3 py-1.5 text-xs font-medium text-gray-900/40 transition-colors hover:border-blue-500/30 hover:text-blue-600 dark:border-white/[0.08] dark:text-white/40 dark:hover:text-blue-400"
-                >
-                  상세
-                </Link>
-
-                {/* 보관 */}
-                <button
-                  onClick={onArchive}
-                  disabled={isActioning || isRunning}
-                  className="rounded-lg border border-gray-900/[0.08] px-3 py-1.5 text-xs font-medium text-gray-900/25 transition-colors hover:border-gray-900/[0.18] hover:text-gray-900/55 disabled:cursor-not-allowed disabled:opacity-30 dark:border-white/[0.08] dark:text-white/25 dark:hover:border-white/[0.18] dark:hover:text-white/55"
-                  title={isRunning ? "실행 중에는 보관할 수 없습니다" : "보관"}
-                >
-                  보관
-                </button>
-
-                {/* 삭제 */}
-                <button
-                  onClick={onDelete}
-                  disabled={isActioning || isRunning}
-                  className="rounded-lg border border-gray-900/[0.08] px-3 py-1.5 text-xs font-medium text-gray-900/25 transition-colors hover:border-red-500/30 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-30 dark:border-white/[0.08] dark:text-white/25 dark:hover:text-red-400"
-                  title={isRunning ? "실행 중에는 삭제할 수 없습니다" : "삭제"}
-                >
-                  삭제
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </article>
-  );
-}
-
-// ─── TaskListModal ────────────────────────────────────────────────────────────
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function TaskListModal({ open, onClose }: Props) {
-  const {
-    tasks,
-    loading,
-    actioningId,
-    error,
-    editingTask,
-    setEditingTask,
-    loadTasks,
-    execute,
-    stop,
-    rerun,
-    rerunAgent,
-    archive,
-    remove,
-    onEditDone,
-    updateTaskStatus,
-  } = useTaskList(open);
-
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-
-  const handleToggleExpand = useCallback((taskId: string) => {
-    setExpandedId((prev) => (prev === taskId ? null : taskId));
-  }, []);
-
-  if (editingTask) {
-    return (
-      <TaskEditModal
-        task={editingTask}
-        onClose={() => setEditingTask(null)}
-        onSaved={onEditDone}
-      />
-    );
-  }
-
-  return (
-    <Modal open={open} onClose={onClose} title="작업 목록" maxWidth="max-w-2xl">
-      <div className="flex flex-col gap-4">
-        {/* 툴바 */}
-        <div className="flex items-center justify-between">
-          <p className="text-xs text-gray-900/25 dark:text-white/25">
-            {loading ? "불러오는 중…" : `총 ${tasks.length}개`}
-          </p>
-          <button
-            onClick={() => void loadTasks()}
-            disabled={loading}
-            className="flex items-center gap-1.5 rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.02] px-2.5 py-1 text-xs text-gray-900/35 transition-colors hover:border-gray-900/[0.13] hover:bg-gray-900/[0.05] hover:text-gray-900/70 disabled:opacity-40 dark:border-white/[0.07] dark:bg-white/[0.02] dark:text-white/35 dark:hover:border-white/[0.13] dark:hover:bg-white/[0.05] dark:hover:text-white/70"
-          >
-            <svg viewBox="0 0 16 16" fill="currentColor" className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`}>
-              <path fillRule="evenodd" d="M13.836 2.477a.75.75 0 01.75.75v3.182a.75.75 0 01-.75.75h-3.182a.75.75 0 010-1.5h1.37A5.995 5.995 0 008 4a6 6 0 100 12 6 6 0 005.812-4.5h1.539A7.5 7.5 0 118 2.5c1.373 0 2.663.372 3.772 1.021l.314-.814a.75.75 0 01.75-.23z" clipRule="evenodd" />
-            </svg>
-            새로고침
-          </button>
-        </div>
-
-        {error && (
-          <p className="rounded-xl border border-red-200 bg-red-50 px-3 py-2.5 text-xs text-red-600 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400">
-            {error}
-          </p>
-        )}
-
-        {/* 로딩 스켈레톤 */}
-        {loading && tasks.length === 0 && (
-          <div className="flex flex-col gap-2">
-            {[0, 1, 2].map((i) => (
-              <div
-                key={i}
-                className="h-[68px] animate-pulse rounded-xl border border-gray-900/[0.05] bg-gray-900/[0.02] dark:border-white/[0.05] dark:bg-white/[0.02]"
-                style={{ animationDelay: `${i * 80}ms` }}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* 빈 상태 */}
-        {!loading && tasks.length === 0 && (
-          <div className="flex flex-col items-center justify-center gap-3 py-16 text-center">
-            <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-gray-900/[0.07] bg-gray-900/[0.03] dark:border-white/[0.07] dark:bg-white/[0.03]">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-6 w-6 text-gray-900/20 dark:text-white/20">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V19.5a2.25 2.25 0 002.25 2.25h.75" />
-              </svg>
-            </div>
-            <div>
-              <p className="text-sm text-gray-900/35 dark:text-white/35">생성된 작업이 없습니다</p>
-              <p className="mt-1 text-xs text-gray-900/20 dark:text-white/20">
-                사이드바의 &ldquo;＋ 작업 추가&rdquo; 버튼으로 작업을 만들어보세요
-              </p>
-            </div>
-          </div>
-        )}
-
-        {tasks.length > 0 && (
-          <ul className="flex flex-col gap-2">
-            {tasks.map((task) => (
-              <li key={task.id}>
-                <TaskCard
-                  task={task}
-                  isActioning={actioningId === task.id}
-                  expanded={expandedId === task.id}
-                  onToggleExpand={() => handleToggleExpand(task.id)}
-                  onExecute={(preferences) => {
-                    void execute(task.id, preferences);
-                    setExpandedId(task.id);
-                  }}
-                  onStop={() => void stop(task.id)}
-                  onEdit={() => setEditingTask(task)}
-                  onRerun={(note) => {
-                    void rerun(task.id, note || undefined);
-                    setExpandedId(task.id);
-                  }}
-                  onRerunAgent={(agentId, note) => {
-                    void rerunAgent(task.id, agentId, note || undefined);
-                    setExpandedId(task.id);
-                  }}
-                  onWriteTestsAgent={(agentId) => {
-                    void rerunAgent(task.id, agentId, TEST_CODE_SUPPLEMENT_NOTE, true);
-                    setExpandedId(task.id);
-                  }}
-                  onArchive={() => void archive(task.id)}
-                  onDelete={() => void remove(task.id)}
-                  onTaskStatusChange={updateTaskStatus}
-                />
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </Modal>
-  );
-}