@jcjeon/integration-cli 0.2.0

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

@@ -0,0 +1,413 @@
+"use client";
+
+import { useState } from "react";
+
+import type { AgentChangelog, ChangelogFile } from "../api/changelog.api";
+import type { AgentRole, Task, TaskAgent, TaskAgentRun } from "../api/tasks.api";
+import type { DetailStatusFilter, DetailVersion } from "../hooks/useTaskDetail";
+import { useTaskDetail } from "../hooks/useTaskDetail";
+import { AgentRoleBadge } from "./AgentRoleSelect";
+
+const STATUS_LABEL: Record<string, string> = {
+  pending: "대기",
+  running: "실행 중",
+  completed: "완료",
+  error: "오류",
+  stopped: "중지",
+};
+
+const ROLE_LABEL: Record<AgentRole, string> = {
+  frontend: "Frontend",
+  backend: "Backend",
+  doc: "Document",
+  operation: "Operation",
+  other: "Other",
+};
+
+const CHANGE_LABEL: Record<string, string> = {
+  added: "추가",
+  modified: "수정",
+  deleted: "삭제",
+  renamed: "이동",
+};
+
+function SummaryBar({ additions, deletions }: { additions: number; deletions: number }) {
+  const total = additions + deletions;
+  const ratio = total > 0 ? (additions / total) * 100 : 50;
+
+  return (
+    <div className="flex items-center gap-3">
+      <span className="font-mono text-[11px] text-emerald-600 dark:text-emerald-400">+{additions}</span>
+      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-900/[0.06] dark:bg-white/[0.06]">
+        <div className="h-full rounded-full bg-emerald-500" style={{ width: `${ratio}%` }} />
+      </div>
+      <span className="font-mono text-[11px] text-red-600 dark:text-red-400">-{deletions}</span>
+    </div>
+  );
+}
+
+interface FilterBarProps {
+  agents: TaskAgent[];
+  roleOptions: AgentRole[];
+  runs: DetailVersion["run"][];
+  agentFilter: "all" | number;
+  roleFilter: "all" | AgentRole;
+  statusFilter: DetailStatusFilter;
+  versionFilter: "all" | number;
+  onAgentChange: (value: "all" | number) => void;
+  onRoleChange: (value: "all" | AgentRole) => void;
+  onStatusChange: (value: DetailStatusFilter) => void;
+  onVersionChange: (value: "all" | number) => void;
+}
+
+function FilterBar({
+  agents,
+  roleOptions,
+  runs,
+  agentFilter,
+  roleFilter,
+  statusFilter,
+  versionFilter,
+  onAgentChange,
+  onRoleChange,
+  onStatusChange,
+  onVersionChange,
+}: FilterBarProps) {
+  const statusFilters: { value: DetailStatusFilter; label: string }[] = [
+    { value: "all", label: "전체" },
+    { value: "error", label: "오류" },
+    { value: "completed", label: "완료" },
+  ];
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-gray-900/[0.07] bg-white/60 p-3 dark:border-white/[0.07] dark:bg-white/[0.03]">
+      <div className="grid gap-2 md:grid-cols-3">
+        <label className="flex flex-col gap-1">
+          <span className="text-[10px] font-medium text-gray-900/35 dark:text-white/35">버전</span>
+          <select
+            value={versionFilter}
+            onChange={(event) => onVersionChange(event.target.value === "all" ? "all" : Number(event.target.value))}
+            className="rounded-lg border border-gray-900/[0.08] bg-white px-2.5 py-1.5 text-xs text-gray-900/70 outline-none dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-white/70"
+          >
+            <option value="all">전체 버전</option>
+            {runs.map((run) => (
+              <option key={run.id} value={run.id}>v{run.version}</option>
+            ))}
+          </select>
+        </label>
+
+        <label className="flex flex-col gap-1">
+          <span className="text-[10px] font-medium text-gray-900/35 dark:text-white/35">에이전트</span>
+          <select
+            value={agentFilter}
+            onChange={(event) => onAgentChange(event.target.value === "all" ? "all" : Number(event.target.value))}
+            className="rounded-lg border border-gray-900/[0.08] bg-white px-2.5 py-1.5 text-xs text-gray-900/70 outline-none dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-white/70"
+          >
+            <option value="all">전체 에이전트</option>
+            {agents.map((agent) => (
+              <option key={agent.id} value={agent.id}>
+                {agent.customRole ?? ROLE_LABEL[agent.role]} #{agent.id}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="flex flex-col gap-1">
+          <span className="text-[10px] font-medium text-gray-900/35 dark:text-white/35">역할</span>
+          <select
+            value={roleFilter}
+            onChange={(event) => onRoleChange(event.target.value as "all" | AgentRole)}
+            className="rounded-lg border border-gray-900/[0.08] bg-white px-2.5 py-1.5 text-xs text-gray-900/70 outline-none dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-white/70"
+          >
+            <option value="all">전체 역할</option>
+            {roleOptions.map((role) => (
+              <option key={role} value={role}>{ROLE_LABEL[role]}</option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <div className="flex w-fit 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]">
+        {statusFilters.map((filter) => (
+          <button
+            key={filter.value}
+            type="button"
+            onClick={() => onStatusChange(filter.value)}
+            className={[
+              "rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors",
+              statusFilter === filter.value
+                ? "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(" ")}
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function AgentRunBadge({ agentRun, agent }: { agentRun: TaskAgentRun; agent: TaskAgent | undefined }) {
+  const isError = agentRun.status === "error";
+  const isCompleted = agentRun.status === "completed";
+  return (
+    <span className={[
+      "inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[10px] font-medium",
+      isError
+        ? "border-red-500/20 bg-red-500/[0.06] text-red-600 dark:text-red-400"
+        : isCompleted
+          ? "border-emerald-500/20 bg-emerald-500/[0.06] text-emerald-600 dark:text-emerald-400"
+          : "border-gray-900/[0.08] bg-gray-900/[0.03] text-gray-900/40 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/40",
+    ].join(" ")}>
+      {agent ? <AgentRoleBadge role={agent.role} customRole={agent.customRole} /> : `Agent ${agentRun.agentId}`}
+      <span className="opacity-70">{STATUS_LABEL[agentRun.status] ?? agentRun.status}</span>
+    </span>
+  );
+}
+
+function PatchPreview({ patch }: { patch: string }) {
+  const lines = patch.split("\n");
+  const hunkStart = lines.findIndex((line) => line.startsWith("@@"));
+  const visible = (hunkStart >= 0 ? lines.slice(hunkStart) : lines).slice(0, 80);
+
+  return (
+    <pre className="overflow-x-auto rounded-lg bg-gray-950/[0.03] p-3 text-[11px] leading-relaxed dark:bg-white/[0.03]">
+      {visible.map((line, index) => {
+        const className = line.startsWith("+")
+          ? "bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-400"
+          : line.startsWith("-")
+            ? "bg-red-500/[0.08] text-red-700 dark:text-red-400"
+            : line.startsWith("@@")
+              ? "text-purple-500/70 dark:text-purple-400/70"
+              : "text-gray-900/50 dark:text-white/40";
+        return <div key={`${line}-${index}`} className={className}>{line}</div>;
+      })}
+    </pre>
+  );
+}
+
+function FileChangeRow({ file }: { file: ChangelogFile }) {
+  const [open, setOpen] = useState(false);
+  const name = file.filePath.split(/[\\/]/).pop() ?? file.filePath;
+  const dir = file.filePath.includes("/") ? file.filePath.slice(0, file.filePath.lastIndexOf("/")) : "";
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray-900/[0.07] dark:border-white/[0.07]">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left"
+      >
+        <svg viewBox="0 0 16 16" fill="currentColor" className={`h-3 w-3 shrink-0 text-gray-900/20 transition-transform dark:text-white/20 ${open ? "rotate-90" : ""}`}>
+          <path fillRule="evenodd" d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z" clipRule="evenodd" />
+        </svg>
+        <span className="rounded-md border border-gray-900/[0.08] px-1.5 py-0.5 text-[10px] text-gray-900/45 dark:border-white/[0.08] dark:text-white/45">
+          {CHANGE_LABEL[file.changeType] ?? file.changeType}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-xs">
+          {dir && <span className="text-gray-900/30 dark:text-white/30">{dir}/</span>}
+          <span className="font-medium text-gray-900/70 dark:text-white/70">{name}</span>
+        </span>
+        <span className="shrink-0 font-mono text-[10px]">
+          {file.additions > 0 && <span className="text-emerald-600 dark:text-emerald-400">+{file.additions}</span>}
+          {file.additions > 0 && file.deletions > 0 && <span className="mx-0.5 text-gray-900/15 dark:text-white/15">/</span>}
+          {file.deletions > 0 && <span className="text-red-600 dark:text-red-400">-{file.deletions}</span>}
+        </span>
+      </button>
+      {open && file.patch && (
+        <div className="border-t border-gray-900/[0.05] dark:border-white/[0.05]">
+          <PatchPreview patch={file.patch} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChangeSection({ changelogs }: { changelogs: AgentChangelog[] }) {
+  const files = changelogs.flatMap((entry) => entry.files);
+
+  if (files.length === 0) {
+    return <p className="rounded-lg border border-gray-900/[0.06] py-5 text-center text-xs text-gray-900/30 dark:border-white/[0.06] dark:text-white/30">변경 사항이 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {files.map((file) => <FileChangeRow key={file.id} file={file} />)}
+    </div>
+  );
+}
+
+function LogSection({ logsByAgent, agents }: { logsByAgent: Record<number, string>; agents: TaskAgent[] }) {
+  const entries = Object.entries(logsByAgent);
+
+  if (entries.length === 0) {
+    return <p className="rounded-lg border border-gray-900/[0.06] py-5 text-center text-xs text-gray-900/30 dark:border-white/[0.06] dark:text-white/30">실행 로그가 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {entries.map(([agentId, output]) => {
+        const agent = agents.find((entry) => entry.id === Number(agentId));
+        return (
+          <div key={agentId} className="overflow-hidden rounded-lg border border-gray-900/[0.07] dark:border-white/[0.07]">
+            <div className="flex items-center justify-between border-b border-gray-900/[0.05] px-3 py-2 dark:border-white/[0.05]">
+              {agent ? <AgentRoleBadge role={agent.role} customRole={agent.customRole} /> : <span className="text-xs text-gray-900/50 dark:text-white/50">Agent {agentId}</span>}
+            </div>
+            <pre className="max-h-64 overflow-y-auto px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words text-gray-700 dark:text-gray-300">
+              {output}
+            </pre>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function VersionCard({ version, agents, latest }: { version: DetailVersion; agents: TaskAgent[]; latest: boolean }) {
+  const [open, setOpen] = useState(latest);
+  const duration = version.run.completedAt
+    ? Math.round((new Date(version.run.completedAt).getTime() - new Date(version.run.startedAt).getTime()) / 1000)
+    : null;
+
+  return (
+    <article className={[
+      "overflow-hidden rounded-xl border transition-colors",
+      latest
+        ? "border-blue-500/20 bg-blue-500/[0.04]"
+        : "border-gray-900/[0.07] bg-white/50 dark:border-white/[0.07] dark:bg-white/[0.02]",
+    ].join(" ")}>
+      <button type="button" onClick={() => setOpen((value) => !value)} className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left">
+        <div className="flex min-w-0 items-center gap-2">
+          <svg viewBox="0 0 16 16" fill="currentColor" className={`h-3 w-3 shrink-0 text-gray-900/20 transition-transform dark:text-white/20 ${open ? "rotate-90" : ""}`}>
+            <path fillRule="evenodd" d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z" clipRule="evenodd" />
+          </svg>
+          <span className="rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-semibold text-blue-600 dark:text-blue-400">v{version.run.version}</span>
+          {latest && <span className="text-[10px] text-blue-500/70 dark:text-blue-400/70">최신</span>}
+          <span className="truncate text-xs text-gray-900/45 dark:text-white/45">
+            {new Date(version.run.startedAt).toLocaleString("ko-KR", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" })}
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center gap-2 text-[10px] text-gray-900/30 dark:text-white/30">
+          {duration != null && <span>{duration}s</span>}
+          <span>{version.fileCount} 파일</span>
+          <span className="font-mono text-emerald-600 dark:text-emerald-400">+{version.additions}</span>
+          <span className="font-mono text-red-600 dark:text-red-400">-{version.deletions}</span>
+        </div>
+      </button>
+
+      {open && (
+        <div className="flex flex-col gap-4 border-t border-gray-900/[0.05] px-4 py-4 dark:border-white/[0.05]">
+          <div className="flex flex-wrap gap-1.5">
+            {version.run.agentRuns.map((agentRun) => (
+              <AgentRunBadge key={agentRun.id} agentRun={agentRun} agent={agents.find((agent) => agent.id === agentRun.agentId)} />
+            ))}
+          </div>
+
+          {version.run.supplementNote && (
+            <div className="rounded-lg border border-amber-500/20 bg-amber-500/[0.05] px-3 py-2 text-xs text-amber-700/80 dark:text-amber-400/80">
+              <span className="mr-1 font-medium">보완 메시지:</span>
+              {version.run.supplementNote}
+            </div>
+          )}
+
+          <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+            <section className="flex min-w-0 flex-col gap-2">
+              <h3 className="text-xs font-semibold text-gray-900/55 dark:text-white/55">실행 로그</h3>
+              <LogSection logsByAgent={version.logsByAgent} agents={agents} />
+            </section>
+
+            <section className="flex min-w-0 flex-col gap-2">
+              <h3 className="text-xs font-semibold text-gray-900/55 dark:text-white/55">변경 사항</h3>
+              <ChangeSection changelogs={version.changelogs} />
+            </section>
+          </div>
+        </div>
+      )}
+    </article>
+  );
+}
+
+interface Props {
+  task: Task;
+}
+
+export function TaskDetailView({ task }: Props) {
+  const detail = useTaskDetail(task);
+
+  return (
+    <div className="mx-auto flex max-w-4xl flex-col gap-4">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h1 className="truncate text-sm font-semibold text-gray-900/80 dark:text-white/80">{task.title}</h1>
+          <p className="mt-1 font-mono text-[11px] text-gray-900/30 dark:text-white/30">{task.id}</p>
+        </div>
+        <div className="flex shrink-0 items-center gap-1.5 rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.03] px-2.5 py-1.5 dark:border-white/[0.07] dark:bg-white/[0.03]">
+          <span className="text-[11px] text-gray-900/40 dark:text-white/40">{detail.totals.versions} 버전</span>
+          <span className="text-gray-900/10 dark:text-white/10">/</span>
+          <span className="text-[11px] text-gray-900/40 dark:text-white/40">{detail.totals.files} 파일</span>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-gray-900/[0.07] bg-white/60 p-4 dark:border-white/[0.07] dark:bg-white/[0.03]">
+        <div className="mb-2 flex items-center justify-between">
+          <p className="text-[11px] font-medium text-gray-900/40 dark:text-white/40">변경 통계</p>
+          <p className="text-[10px] text-gray-900/30 dark:text-white/30">
+            완료 {detail.totals.completed} / 오류 {detail.totals.errors}
+          </p>
+        </div>
+        <SummaryBar additions={detail.totals.additions} deletions={detail.totals.deletions} />
+      </div>
+
+      <FilterBar
+        agents={task.agents}
+        roleOptions={detail.roleOptions}
+        runs={detail.runs}
+        agentFilter={detail.agentFilter}
+        roleFilter={detail.roleFilter}
+        statusFilter={detail.statusFilter}
+        versionFilter={detail.versionFilter}
+        onAgentChange={detail.setAgentFilter}
+        onRoleChange={detail.setRoleFilter}
+        onStatusChange={detail.setStatusFilter}
+        onVersionChange={detail.setVersionFilter}
+      />
+
+      {detail.loading && (
+        <div className="flex flex-col gap-2">
+          {[0, 1, 2].map((index) => (
+            <div key={index} className="h-24 animate-pulse rounded-xl border border-gray-900/[0.05] bg-white/50 dark:border-white/[0.05] dark:bg-white/[0.03]" />
+          ))}
+        </div>
+      )}
+
+      {detail.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">
+          {detail.error}
+        </p>
+      )}
+
+      {!detail.loading && !detail.error && detail.filteredVersions.length === 0 && (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-gray-900/[0.06] py-12 text-center dark:border-white/[0.06]">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-gray-900/15 dark:text-white/15">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p className="text-xs text-gray-900/30 dark:text-white/30">필터 조건에 맞는 실행 기록이 없습니다.</p>
+        </div>
+      )}
+
+      {!detail.loading && !detail.error && detail.filteredVersions.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {detail.filteredVersions.map((version, index) => (
+            <VersionCard
+              key={version.run.id}
+              version={version}
+              agents={task.agents}
+              latest={detail.versionFilter === "all" ? index === 0 : version.run.id === detail.versions[0]?.run.id}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,165 @@
+"use client";
+
+import { useState } from "react";
+
+import { Modal } from "@/components/ui/Modal";
+import { WorkingDirPicker } from "@/components/ui/WorkingDirPicker";
+import { AgentSelectModal } from "@/features/chat/ui/AgentSelectModal";
+import type { AgentId } from "@/features/chat/ui/AgentSelectModal";
+import type { Task } from "../api/tasks.api";
+import { useTaskEdit } from "../hooks/useTaskEdit";
+import { AgentRow } from "./AgentRoleSelect";
+
+interface Props {
+  task: Task;
+  onClose: () => void;
+  onSaved: (updated: Task) => void;
+}
+
+export function TaskEditModal({ task, onClose, onSaved }: Props) {
+  const {
+    form, submitting, error,
+    setTitle, setWorkingDir,
+    addRequirement, updateRequirement, removeRequirement,
+    addAgent, updateAgent, removeAgent,
+    submit,
+  } = useTaskEdit(task, (updated) => { onSaved(updated); onClose(); });
+
+  const [agentSelectOpen, setAgentSelectOpen] = useState(false);
+  const handleAgentSelect = (agentId: AgentId) => { addAgent(agentId); setAgentSelectOpen(false); };
+
+  return (
+    <>
+    <AgentSelectModal
+      open={agentSelectOpen}
+      onClose={() => setAgentSelectOpen(false)}
+      onSelect={handleAgentSelect}
+    />
+    <Modal open onClose={onClose} title="작업 수정" maxWidth="max-w-xl">
+      <div className="flex flex-col gap-6">
+
+        {/* 작업 목표 */}
+        <section className="flex flex-col gap-2">
+          <label className="text-xs font-medium text-gray-500 dark:text-gray-400">작업 목표 *</label>
+          <textarea
+            rows={2}
+            value={form.title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="예: 로그인 페이지 UI 구현 및 API 연동"
+            className="w-full resize-none rounded-xl border border-gray-300 bg-gray-50 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 outline-none focus:border-gray-400 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder-gray-600 dark:focus:border-gray-500"
+          />
+        </section>
+
+        {/* 워크 디렉토리 */}
+        <section className="flex flex-col gap-2">
+          <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+            워크 디렉토리 <span className="text-gray-400 dark:text-gray-600">(선택)</span>
+          </label>
+          <WorkingDirPicker value={form.workingDir} onChange={setWorkingDir} />
+        </section>
+
+        {/* 요구사항 */}
+        <section className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">요구사항</label>
+            <button
+              type="button"
+              onClick={addRequirement}
+              className="flex items-center gap-1 text-xs text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
+            >
+              <span className="text-base leading-none">+</span> 항목 추가
+            </button>
+          </div>
+          {form.requirements.length === 0 ? (
+            <p className="rounded-xl border border-dashed border-gray-200 py-4 text-center text-xs text-gray-400 dark:border-gray-800 dark:text-gray-600">
+              요구사항을 추가하세요
+            </p>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {form.requirements.map((req, idx) => (
+                <li key={req.id} className="flex items-center gap-2">
+                  <span className="w-5 shrink-0 text-center text-xs text-gray-400 dark:text-gray-600">{idx + 1}</span>
+                  <input
+                    type="text"
+                    value={req.content}
+                    onChange={(e) => updateRequirement(req.id, e.target.value)}
+                    placeholder="요구사항 입력"
+                    className="flex-1 rounded-lg border border-gray-300 bg-gray-50 px-3 py-1.5 text-xs text-gray-700 placeholder-gray-400 outline-none focus:border-gray-400 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-200 dark:placeholder-gray-600 dark:focus:border-gray-500"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => removeRequirement(req.id)}
+                    className="shrink-0 text-gray-300 transition-colors hover:text-red-500 dark:text-gray-600 dark:hover:text-red-400"
+                  >
+                    <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+                      <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* 서브 에이전트 */}
+        <section className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">서브 에이전트</label>
+            <button
+              type="button"
+              onClick={() => setAgentSelectOpen(true)}
+              className="flex items-center gap-1 text-xs text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
+            >
+              <span className="text-base leading-none">+</span> 에이전트 추가
+            </button>
+          </div>
+          {form.agents.length === 0 ? (
+            <p className="rounded-xl border border-dashed border-gray-200 py-4 text-center text-xs text-gray-400 dark:border-gray-800 dark:text-gray-600">
+              서브 에이전트를 추가하세요
+            </p>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {form.agents.map((agent) => (
+                <li key={agent.id}>
+                  <AgentRow
+                    agent={agent}
+                    onChange={(patch) => updateAgent(agent.id, patch)}
+                    onRemove={() => removeAgent(agent.id)}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* 에러 */}
+        {error && (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600 dark:border-red-900 dark:bg-red-950/40 dark:text-red-400">
+            {error}
+          </p>
+        )}
+
+        {/* 액션 */}
+        <div className="flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-800">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={submitting}
+            className="rounded-xl px-4 py-2 text-sm text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:opacity-40 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+          >
+            취소
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={submitting || !form.title.trim()}
+            className="rounded-xl bg-orange-600 px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-500 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {submitting ? "저장 중…" : "저장"}
+          </button>
+        </div>
+      </div>
+    </Modal>
+    </>
+  );
+}