@jcjeon/integration-cli 0.2.0

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

@@ -0,0 +1,203 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import { isQuotaExceeded } from "@/lib/quota";
+import type { AgentStatus, TaskStatus } from "../api/tasks.api";
+import type { AgentLog } from "../hooks/useTaskExecution";
+import { AgentRoleBadge } from "./AgentRoleSelect";
+import type { AgentRole } from "../api/tasks.api";
+
+// ─── 에이전트 상태 아이콘 ─────────────────────────────────────────────────────
+
+function AgentStatusIcon({ status }: { status: AgentStatus }) {
+  if (status === "running") {
+    return <span className="h-3 w-3 animate-spin rounded-full border border-gray-400 border-t-orange-500 dark:border-gray-500 dark:border-t-orange-400" />;
+  }
+  if (status === "completed") return <span className="text-emerald-600 dark:text-green-400">✓</span>;
+  if (status === "error") return <span className="text-red-500 dark:text-red-400">✕</span>;
+  if (status === "stopped") return <span className="text-gray-400 dark:text-gray-500">■</span>;
+  return <span className="h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-600" />;
+}
+
+// ─── 에이전트 상태 레이블 색상 ────────────────────────────────────────────────
+
+const STATUS_TEXT: Record<AgentStatus, string> = {
+  pending:   "text-gray-400",
+  running:   "text-orange-500 dark:text-orange-400",
+  completed: "text-emerald-600 dark:text-green-400",
+  error:     "text-red-500 dark:text-red-400",
+  stopped:   "text-gray-400",
+};
+
+const STATUS_LABEL: Record<AgentStatus, string> = {
+  pending:   "대기",
+  running:   "실행 중",
+  completed: "완료",
+  error:     "오류",
+  stopped:   "중지",
+};
+
+// ─── 개별 에이전트 로그 패널 ──────────────────────────────────────────────────
+
+interface AgentLogPanelProps {
+  agentId: number;
+  log: AgentLog;
+  role: AgentRole;
+  customRole: string | null;
+  canRerun?: boolean;
+  rerunDisabled?: boolean;
+  onRerun?: (agentId: number) => void;
+  onWriteTests?: (agentId: number) => void;
+}
+
+function AgentLogPanel({ agentId, log, role, customRole, canRerun, rerunDisabled, onRerun, onWriteTests }: AgentLogPanelProps) {
+  const outputRef = useRef<HTMLPreElement>(null);
+  const quota = isQuotaExceeded((log.output ?? "") + (log.errorMessage ?? ""));
+
+  useEffect(() => {
+    const el = outputRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [log.output]);
+
+  return (
+    <div className="flex flex-col gap-1.5 rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950">
+      {/* 에이전트 헤더 */}
+      <div className="flex items-center justify-between gap-3 border-b border-gray-200 px-3 py-2 dark:border-gray-800">
+        <div className="flex items-center gap-2">
+          <AgentStatusIcon status={log.status} />
+          <AgentRoleBadge role={role} customRole={customRole} />
+        </div>
+        <div className="flex items-center gap-2">
+          {quota ? (
+            <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>
+          ) : (
+            <span className={`text-xs ${STATUS_TEXT[log.status]}`}>
+              {STATUS_LABEL[log.status]}
+            </span>
+          )}
+          {log.durationMs !== undefined && (
+            <span className="text-xs text-gray-400 dark:text-gray-600">
+              {(log.durationMs / 1000).toFixed(1)}s
+            </span>
+          )}
+          {log.costUsd !== undefined && (
+            <span className="text-xs text-gray-400 dark:text-gray-600">
+              ${log.costUsd.toFixed(4)}
+            </span>
+          )}
+          {canRerun && (
+            <>
+              <button
+                type="button"
+                onClick={() => onWriteTests?.(agentId)}
+                disabled={rerunDisabled}
+                className="flex items-center gap-1 rounded-md border border-emerald-500/25 px-2 py-1 text-[10px] font-medium text-emerald-600 transition-colors hover:border-emerald-400/50 hover:bg-emerald-500/[0.08] disabled:opacity-40 dark:text-emerald-400"
+                title="이 에이전트가 테스트 코드만 보완하도록 재실행"
+              >
+                <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+                  <path fillRule="evenodd" d="M12.416 3.376a.75.75 0 01.208 1.04l-5 7.5a.75.75 0 01-1.154.114l-3-3a.75.75 0 011.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 011.04-.207z" clipRule="evenodd" />
+                </svg>
+                테스트 작성
+              </button>
+              <button
+                type="button"
+                onClick={() => onRerun?.(agentId)}
+                disabled={rerunDisabled}
+                className="flex items-center gap-1 rounded-md border border-blue-500/25 px-2 py-1 text-[10px] font-medium text-blue-600 transition-colors hover:border-blue-400/50 hover:bg-blue-500/[0.08] disabled:opacity-40 dark:text-blue-400"
+                title="이 에이전트만 재실행"
+              >
+                <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>
+
+      {/* 출력 영역 */}
+      {log.errorMessage ? (
+        <p className="px-3 py-2 text-xs text-red-500 dark:text-red-400">{log.errorMessage}</p>
+      ) : log.output ? (
+        <pre
+          ref={outputRef}
+          className="max-h-52 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"
+        >
+          {log.output}
+        </pre>
+      ) : (
+        <p className="px-3 py-2 text-xs text-gray-400">
+          {log.status === "running" ? "출력을 기다리는 중…" : "출력 없음"}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ─── AgentOutputPanel ────────────────────────────────────────────────────────
+
+interface Agent {
+  id: number;
+  role: AgentRole;
+  customRole: string | null;
+}
+
+interface AgentOutputPanelProps {
+  agents: Agent[];
+  agentLogs: Record<number, AgentLog>;
+  connected: boolean;
+  taskStatus?: TaskStatus;
+  canRerun?: boolean;
+  rerunDisabled?: boolean;
+  onRerunAgent?: (agentId: number) => void;
+  onWriteTestsAgent?: (agentId: number) => void;
+}
+
+export function AgentOutputPanel({ agents, agentLogs, connected, taskStatus, canRerun, rerunDisabled, onRerunAgent, onWriteTestsAgent }: AgentOutputPanelProps) {
+  const fallbackStatus: AgentStatus =
+    taskStatus === "completed" ? "completed" :
+    taskStatus === "error"     ? "error" :
+    taskStatus === "stopped"   ? "stopped" :
+    "running";
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <span className="text-xs font-medium text-gray-500 dark:text-gray-400">에이전트 출력</span>
+        <span
+          className={`h-1.5 w-1.5 rounded-full ${connected ? "animate-pulse bg-emerald-500 dark:bg-green-400" : "bg-gray-300 dark:bg-gray-600"}`}
+        />
+        {!connected && (
+          <span className="text-[10px] text-gray-400">연결 중…</span>
+        )}
+      </div>
+
+      {agents.map((agent) => {
+        const log = agentLogs[agent.id] ?? {
+          agentId: agent.id,
+          status: fallbackStatus,
+          output: "",
+        };
+        return (
+          <AgentLogPanel
+            key={agent.id}
+            agentId={agent.id}
+            log={log}
+            role={agent.role}
+            customRole={agent.customRole}
+            canRerun={canRerun}
+            rerunDisabled={rerunDisabled}
+            onRerun={onRerunAgent}
+            onWriteTests={onWriteTestsAgent}
+          />
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+"use client";
+
+import { AGENT_META } from "@/features/chat/ui/AgentSelectModal";
+import type { AgentRole } from "../api/tasks.api";
+import type { AgentDraft } from "../hooks/useTaskCreate";
+
+const ROLES: { value: AgentRole; label: string; active: string; badge: string }[] = [
+  { value: "frontend",  label: "Frontend",  active: "border-blue-500/50 bg-blue-500/[0.12] text-blue-700 dark:text-blue-300",   badge: "border-blue-500/40 bg-blue-500/[0.08] text-blue-700 dark:text-blue-300" },
+  { value: "backend",   label: "Backend",   active: "border-emerald-500/50 bg-emerald-500/[0.12] text-emerald-700 dark:text-emerald-300", badge: "border-emerald-500/40 bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-300" },
+  { value: "doc",       label: "Doc",       active: "border-purple-500/50 bg-purple-500/[0.12] text-purple-700 dark:text-purple-300", badge: "border-purple-500/40 bg-purple-500/[0.08] text-purple-700 dark:text-purple-300" },
+  { value: "operation", label: "Operation", active: "border-amber-500/50 bg-amber-500/[0.12] text-amber-700 dark:text-amber-300",  badge: "border-amber-500/40 bg-amber-500/[0.08] text-amber-700 dark:text-amber-300" },
+  { value: "other",     label: "Other",     active: "border-gray-900/[0.2] bg-gray-900/[0.07] text-gray-700 dark:border-white/[0.2] dark:bg-white/[0.07] dark:text-white/70", badge: "border-gray-900/[0.12] bg-gray-900/[0.05] text-gray-600 dark:border-white/[0.12] dark:bg-white/[0.05] dark:text-white/50" },
+];
+
+interface AgentRowProps {
+  agent: AgentDraft;
+  onChange: (patch: Partial<Omit<AgentDraft, "id">>) => void;
+  onRemove: () => void;
+}
+
+export function AgentRow({ agent, onChange, onRemove }: AgentRowProps) {
+  const agentMeta = AGENT_META[agent.agentType];
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-gray-900/[0.07] bg-gray-900/[0.02] p-3 dark:border-white/[0.07] dark:bg-white/[0.02]">
+      {/* AI 에이전트 + 삭제 */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5">
+          <span className={`h-2 w-2 rounded-full ${agentMeta.dotColor}`} />
+          <span className="text-xs font-semibold text-gray-900/60 dark:text-white/60">
+            {agentMeta.label}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="shrink-0 text-gray-900/20 transition-colors hover:text-red-500 dark:text-white/20 dark:hover:text-red-400"
+          aria-label="에이전트 삭제"
+        >
+          <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>
+      </div>
+
+      {/* 역할 뱃지 선택 */}
+      <div className="flex flex-wrap gap-1.5">
+        {ROLES.map((r) => (
+          <button
+            key={r.value}
+            type="button"
+            onClick={() => onChange({ role: r.value })}
+            className={[
+              "rounded-full border px-3 py-0.5 text-xs font-medium transition-all",
+              agent.role === r.value
+                ? r.active
+                : "border-gray-900/[0.07] text-gray-900/25 hover:border-gray-900/[0.13] hover:text-gray-900/50 dark:border-white/[0.07] dark:text-white/25 dark:hover:border-white/[0.13] dark:hover:text-white/50",
+            ].join(" ")}
+          >
+            {r.label}
+          </button>
+        ))}
+      </div>
+
+      {/* other 선택 시 커스텀 입력 */}
+      {agent.role === "other" && (
+        <input
+          type="text"
+          value={agent.customRole}
+          onChange={(e) => onChange({ customRole: e.target.value })}
+          placeholder="역할을 직접 입력하세요"
+          className="w-full rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.03] px-3 py-1.5 text-xs text-gray-900/70 placeholder-gray-900/20 outline-none transition-colors focus:border-gray-900/[0.15] dark:border-white/[0.07] dark:bg-white/[0.03] dark:text-white/70 dark:placeholder-white/20 dark:focus:border-white/[0.15]"
+        />
+      )}
+
+      {/* 역할 힌트 */}
+      {agent.role === "frontend" && (
+        <p className="text-[10px] text-blue-600/60 dark:text-blue-400/50">UI 구현 · 컴포넌트 개발 · 스타일링</p>
+      )}
+      {agent.role === "backend" && (
+        <p className="text-[10px] text-emerald-600/60 dark:text-emerald-400/50">API 개발 · DB 설계 · 서버 로직</p>
+      )}
+    </div>
+  );
+}
+
+// 선택된 role의 뱃지만 표시 (읽기 전용)
+export function AgentRoleBadge({ role, customRole }: { role: AgentRole; customRole?: string | null }) {
+  const found = ROLES.find((r) => r.value === role);
+  const label = role === "other" ? (customRole ?? "Other") : (found?.label ?? role);
+  const cls   = found?.badge ?? "border-gray-900/[0.12] bg-gray-900/[0.05] text-gray-600 dark:border-white/[0.12] dark:bg-white/[0.05] dark:text-white/50";
+  return (
+    <span className={`rounded-full border px-2.5 py-0.5 text-xs font-medium ${cls}`}>
+      {label}
+    </span>
+  );
+}

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

@@ -0,0 +1,321 @@
+"use client";
+
+import { useState } from "react";
+
+import type { TaskAgent } from "../api/tasks.api";
+import type { AgentChangelog, ChangelogFile, ChangeType } from "../api/changelog.api";
+import { mergeAgentAll, mergeAgentFile } from "../api/changelog.api";
+import { useChangelogCodeCopy } from "../hooks/useChangelogCodeCopy";
+import { useTaskChangelog } from "../hooks/useTaskChangelog";
+
+// ─── 변경 유형 뱃지 ──────────────────────────────────────────────────────────
+
+const CHANGE_TYPE_CONFIG: Record<ChangeType, { label: string; className: string }> = {
+  added:    { label: "추가", className: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20 dark:text-emerald-400" },
+  modified: { label: "수정", className: "bg-blue-500/10 text-blue-600 border-blue-500/20 dark:text-blue-400" },
+  deleted:  { label: "삭제", className: "bg-red-500/10 text-red-600 border-red-500/20 dark:text-red-400" },
+  renamed:  { label: "이동", className: "bg-amber-500/10 text-amber-600 border-amber-500/20 dark:text-amber-400" },
+};
+
+function ChangeTypeBadge({ type }: { type: ChangeType }) {
+  const cfg = CHANGE_TYPE_CONFIG[type];
+  return (
+    <span className={`inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium ${cfg.className}`}>
+      {cfg.label}
+    </span>
+  );
+}
+
+// ─── 병합 결과 토스트 ─────────────────────────────────────────────────────────
+
+function MergeResultBadge({ success, message }: { success: boolean; message: string }) {
+  return (
+    <span className={[
+      "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[10px] font-medium",
+      success
+        ? "border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+        : "border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400",
+    ].join(" ")}>
+      {success ? "✓" : "✗"} {success ? "병합 완료" : message.slice(0, 60)}
+    </span>
+  );
+}
+
+// ─── Diff 렌더러 ─────────────────────────────────────────────────────────────
+
+function DiffView({ patch }: { patch: string }) {
+  const lines = patch.split("\n");
+  const hunkStart = lines.findIndex((l) => l.startsWith("@@"));
+  const diffLines = hunkStart >= 0 ? lines.slice(hunkStart) : lines;
+
+  return (
+    <pre className="overflow-x-auto rounded-lg bg-gray-950/[0.03] p-3 text-[11px] leading-relaxed dark:bg-white/[0.03]">
+      {diffLines.map((line, i) => {
+        if (line.startsWith("@@")) {
+          return <div key={i} className="text-purple-500/70 dark:text-purple-400/70">{line}</div>;
+        }
+        if (line.startsWith("+")) {
+          return <div key={i} className="bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-400">{line}</div>;
+        }
+        if (line.startsWith("-")) {
+          return <div key={i} className="bg-red-500/[0.08] text-red-700 dark:text-red-400">{line}</div>;
+        }
+        return <div key={i} className="text-gray-900/50 dark:text-white/40">{line}</div>;
+      })}
+    </pre>
+  );
+}
+
+// ─── 파일 행 ─────────────────────────────────────────────────────────────────
+
+interface FileRowProps {
+  file: ChangelogFile;
+  taskId: string;
+  agentId: number;
+}
+
+function FileRow({ file, taskId, agentId }: FileRowProps) {
+  const [open, setOpen] = useState(false);
+  const [merging, setMerging] = useState(false);
+  const [mergeResult, setMergeResult] = useState<{ success: boolean; message: string } | null>(null);
+  const { copyCode, status: copyStatus } = useChangelogCodeCopy();
+
+  const fileName = file.filePath.split("/").pop() ?? file.filePath;
+  const dirName = file.filePath.includes("/")
+    ? file.filePath.slice(0, file.filePath.lastIndexOf("/"))
+    : "";
+
+  const handleMergeFile = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setMerging(true);
+    setMergeResult(null);
+    try {
+      const result = await mergeAgentFile(taskId, agentId, file.filePath);
+      setMergeResult(result);
+    } catch (err) {
+      setMergeResult({ success: false, message: err instanceof Error ? err.message : "병합 실패" });
+    } finally {
+      setMerging(false);
+    }
+  };
+
+  const handleCopyPatch = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!file.patch) return;
+    await copyCode(file.patch);
+  };
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray-900/[0.07] dark:border-white/[0.07]">
+      <div className="flex items-center gap-2 px-3 py-2">
+        {/* 펼치기 */}
+        <button
+          type="button"
+          onClick={() => setOpen((p) => !p)}
+          className="flex flex-1 min-w-0 items-center gap-2 text-left hover:opacity-80"
+        >
+          <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>
+
+          <ChangeTypeBadge type={file.changeType} />
+
+          <span className="min-w-0 flex-1 truncate">
+            {dirName && <span className="text-gray-900/30 dark:text-white/30">{dirName}/</span>}
+            <span className="font-medium text-gray-900/70 dark:text-white/70">{fileName}</span>
+          </span>
+
+          <span className="shrink-0 text-[10px] text-gray-900/20 dark:text-white/20">
+            {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>
+
+        {/* 단일 병합 */}
+        <div className="flex shrink-0 items-center gap-2">
+          {mergeResult && <MergeResultBadge {...mergeResult} />}
+          <button
+            type="button"
+            onClick={(e) => void handleMergeFile(e)}
+            disabled={merging}
+            className="flex items-center gap-1 rounded-md border border-gray-900/[0.08] px-2 py-1 text-[10px] font-medium text-gray-900/35 transition-colors hover:border-blue-500/30 hover:text-blue-600 disabled:opacity-40 dark:border-white/[0.08] dark:text-white/35 dark:hover:text-blue-400"
+          >
+            {merging
+              ? <span className="h-2.5 w-2.5 animate-spin rounded-full border border-gray-900/20 border-t-blue-500 dark:border-white/20" />
+              : <svg viewBox="0 0 16 16" fill="currentColor" className="h-2.5 w-2.5"><path fillRule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" clipRule="evenodd" /></svg>
+            }
+            병합
+          </button>
+        </div>
+      </div>
+
+      {open && file.patch && (
+        <div className="border-t border-gray-900/[0.05] dark:border-white/[0.05]">
+          <div className="flex items-center justify-between gap-2 border-b border-gray-900/[0.05] px-3 py-2 dark:border-white/[0.05]">
+            <span className="truncate text-[10px] font-medium text-gray-900/35 dark:text-white/35">
+              변경 코드
+            </span>
+            <button
+              type="button"
+              onClick={(e) => void handleCopyPatch(e)}
+              aria-label={`${file.filePath} 변경 코드 복사`}
+              className={[
+                "flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 text-[10px] font-medium transition-colors",
+                copyStatus === "copied"
+                  ? "border-emerald-500/20 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                  : copyStatus === "error"
+                    ? "border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400"
+                    : "border-gray-900/[0.08] text-gray-900/35 hover:border-blue-500/30 hover:text-blue-600 dark:border-white/[0.08] dark:text-white/35 dark:hover:text-blue-400",
+              ].join(" ")}
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor" className="h-2.5 w-2.5" aria-hidden="true">
+                <path d="M4.25 2A2.25 2.25 0 006.5 4.25h2.75A2.75 2.75 0 0112 7v4.75A2.25 2.25 0 009.75 14h-5.5A2.25 2.25 0 012 11.75v-7.5A2.25 2.25 0 014.25 2z" />
+                <path d="M6.5 2A2.25 2.25 0 004.25 4.25v7.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75V7A1.25 1.25 0 0010 5.75H6.5A2.25 2.25 0 014.25 3.5V3A1 1 0 015.25 2h1.25z" opacity=".35" />
+              </svg>
+              {copyStatus === "copied" ? "복사됨" : copyStatus === "error" ? "실패" : "복사"}
+            </button>
+          </div>
+          <DiffView patch={file.patch} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 에이전트 섹션 ────────────────────────────────────────────────────────────
+
+interface AgentSectionProps {
+  changelog: AgentChangelog;
+  agent: TaskAgent | undefined;
+  taskId: string;
+}
+
+function AgentSection({ changelog, agent, taskId }: AgentSectionProps) {
+  const [merging, setMerging] = useState(false);
+  const [mergeResult, setMergeResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  const totalAdditions = changelog.files.reduce((s, f) => s + f.additions, 0);
+  const totalDeletions = changelog.files.reduce((s, f) => s + f.deletions, 0);
+
+  const agentLabel = agent
+    ? `${agent.agentType.charAt(0).toUpperCase() + agent.agentType.slice(1)} · ${agent.customRole ?? agent.role}`
+    : `Agent ${changelog.agentId}`;
+
+  const handleMergeAll = async () => {
+    setMerging(true);
+    setMergeResult(null);
+    try {
+      const result = await mergeAgentAll(taskId, changelog.agentId);
+      setMergeResult(result);
+    } catch (err) {
+      setMergeResult({ success: false, message: err instanceof Error ? err.message : "병합 실패" });
+    } finally {
+      setMerging(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* 에이전트 헤더 */}
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-gray-900/60 dark:text-white/60">
+          {agentLabel}
+        </span>
+
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-gray-900/25 dark:text-white/25">
+            {changelog.files.length}개 파일
+            {totalAdditions > 0 && <span className="ml-1.5 text-emerald-600 dark:text-emerald-400">+{totalAdditions}</span>}
+            {totalDeletions > 0 && <span className="ml-0.5 text-red-600 dark:text-red-400">-{totalDeletions}</span>}
+          </span>
+
+          {/* 전체 병합 */}
+          {mergeResult && <MergeResultBadge {...mergeResult} />}
+          <button
+            type="button"
+            onClick={() => void handleMergeAll()}
+            disabled={merging}
+            className="flex items-center gap-1.5 rounded-lg border border-gray-900/[0.08] px-2.5 py-1 text-[11px] font-medium text-gray-900/40 transition-colors hover:border-blue-500/30 hover:bg-blue-500/[0.05] hover:text-blue-600 disabled:opacity-40 dark:border-white/[0.08] dark:text-white/40 dark:hover:text-blue-400"
+          >
+            {merging
+              ? <span className="h-3 w-3 animate-spin rounded-full border border-gray-900/20 border-t-blue-500 dark:border-white/20" />
+              : <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3"><path fillRule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06 0L5.72 8.84a.75.75 0 011.06-1.06L8 10.5l3.22-3.22a.75.75 0 011.06 0z" clipRule="evenodd" /></svg>
+            }
+            전체 병합
+          </button>
+        </div>
+      </div>
+
+      {/* 파일 목록 */}
+      <div className="flex flex-col gap-1.5">
+        {changelog.files.map((file) => (
+          <FileRow key={file.id} file={file} taskId={taskId} agentId={changelog.agentId} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── ChangelogPanel ───────────────────────────────────────────────────────────
+
+interface Props {
+  taskId: string;
+  agents: TaskAgent[];
+}
+
+export function ChangelogPanel({ taskId, agents }: Props) {
+  const { changelogs, loading, error } = useTaskChangelog(taskId);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-2 py-2">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="h-9 animate-pulse rounded-lg border border-gray-900/[0.05] bg-gray-900/[0.02] dark:border-white/[0.05] dark:bg-white/[0.02]"
+            style={{ animationDelay: `${i * 60}ms` }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600 dark:border-red-900/40 dark:bg-red-950/20 dark:text-red-400">
+        {error}
+      </p>
+    );
+  }
+
+  if (changelogs.length === 0) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-8 text-center">
+        <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+        </svg>
+        <p className="text-xs text-gray-900/30 dark:text-white/30">
+          변경사항이 없거나 Git 저장소가 아닙니다
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {changelogs.map((changelog) => (
+        <AgentSection
+          key={changelog.agentId}
+          changelog={changelog}
+          agent={agents.find((a) => a.id === changelog.agentId)}
+          taskId={taskId}
+        />
+      ))}
+    </div>
+  );
+}