@jcjeon/integration-cli 0.2.0 → 0.2.1

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

@@ -1,203 +0,0 @@
-"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

@@ -1,97 +0,0 @@
-"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

@@ -1,321 +0,0 @@
-"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>
-  );
-}