@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/tasks/hooks/__tests__/useTaskNotification.test.ts

@@ -0,0 +1,125 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import * as tasksApi from "../../api/tasks.api";
+import { useTaskNotification } from "../useTaskNotification";
+
+const addToast = vi.fn();
+
+vi.mock("@/lib/toast", () => ({
+  useToast: () => ({ addToast }),
+}));
+
+vi.mock("../../api/tasks.api", () => ({
+  fetchTasks: vi.fn(),
+}));
+
+const socketMock = vi.hoisted(() => {
+  const handlers: Record<string, (payload?: unknown) => void> = {};
+  const socket = {
+    on: vi.fn((event: string, handler: (payload?: unknown) => void) => {
+      handlers[event] = handler;
+      return socket;
+    }),
+    emit: vi.fn(),
+    disconnect: vi.fn(),
+  };
+  return {
+    handlers,
+    socket,
+    io: vi.fn(() => socket),
+    reset() {
+      for (const key of Object.keys(handlers)) delete handlers[key];
+      socket.on.mockClear();
+      socket.emit.mockClear();
+      socket.disconnect.mockClear();
+      this.io.mockClear();
+    },
+  };
+});
+
+vi.mock("socket.io-client", () => ({
+  io: socketMock.io,
+}));
+
+const mockFetchTasks = vi.mocked(tasksApi.fetchTasks);
+
+beforeEach(() => {
+  mockFetchTasks.mockResolvedValue([
+    {
+      id: "task-1",
+      title: "Initial",
+      status: "running",
+      workingDir: null,
+      requirements: [],
+      agents: [],
+      createdAt: "2024-01-01",
+      updatedAt: "2024-01-01",
+    },
+  ]);
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+  socketMock.reset();
+});
+
+describe("useTaskNotification", () => {
+  it("loads initial task status and subscribes to global task events", async () => {
+    renderHook(() => useTaskNotification());
+
+    await waitFor(() => expect(mockFetchTasks).toHaveBeenCalledTimes(1));
+    act(() => { socketMock.handlers.connect?.(); });
+
+    expect(socketMock.socket.emit).toHaveBeenCalledWith("task:watch-all");
+  });
+
+  it("shows success toast and marks hasNew on completed transition", async () => {
+    const { result } = renderHook(() => useTaskNotification());
+    await waitFor(() => expect(mockFetchTasks).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      socketMock.handlers["task:status"]?.({ taskId: "task-1", status: "completed" });
+    });
+
+    expect(addToast).toHaveBeenCalledWith({ type: "success", title: "작업 완료", message: "Initial" });
+    expect(result.current.hasNew).toBe(true);
+
+    act(() => { result.current.clearNew(); });
+    expect(result.current.hasNew).toBe(false);
+  });
+
+  it("uses event title and emits error/info toasts", async () => {
+    renderHook(() => useTaskNotification());
+    await waitFor(() => expect(mockFetchTasks).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      socketMock.handlers["task:status"]?.({ taskId: "task-2", status: "error", title: "Broken" });
+      socketMock.handlers["task:status"]?.({ taskId: "task-3", status: "stopped", title: "Stopped" });
+    });
+
+    expect(addToast).toHaveBeenCalledWith({ type: "error", title: "작업 오류", message: "Broken" });
+    expect(addToast).toHaveBeenCalledWith({ type: "info", title: "작업 중지됨", message: "Stopped" });
+  });
+
+  it("does not notify repeatedly after a task is already finished", async () => {
+    renderHook(() => useTaskNotification());
+    await waitFor(() => expect(mockFetchTasks).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      socketMock.handlers["task:status"]?.({ taskId: "task-1", status: "completed" });
+      socketMock.handlers["task:status"]?.({ taskId: "task-1", status: "error" });
+    });
+
+    expect(addToast).toHaveBeenCalledTimes(1);
+  });
+
+  it("unsubscribes and disconnects on cleanup", () => {
+    const { unmount } = renderHook(() => useTaskNotification());
+
+    unmount();
+
+    expect(socketMock.socket.emit).toHaveBeenCalledWith("task:unwatch-all");
+    expect(socketMock.socket.disconnect).toHaveBeenCalled();
+  });
+});

package/apps/web/src/features/tasks/hooks/__tests__/useTaskRuns.test.ts

@@ -0,0 +1,51 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { TaskRun } from "../../api/tasks.api";
+import * as tasksApi from "../../api/tasks.api";
+import { useTaskRuns } from "../useTaskRuns";
+
+vi.mock("../../api/tasks.api", () => ({
+  fetchTaskRuns: vi.fn(),
+}));
+
+const mockFetchTaskRuns = vi.mocked(tasksApi.fetchTaskRuns);
+
+const run: TaskRun = {
+  id: 1,
+  version: 1,
+  supplementNote: null,
+  status: "completed",
+  startedAt: "2024-01-01",
+  completedAt: "2024-01-01",
+  agentRuns: [],
+};
+
+afterEach(() => { vi.clearAllMocks(); });
+
+describe("useTaskRuns", () => {
+  it("clears runs and skips fetch without a task id", () => {
+    const { result } = renderHook(() => useTaskRuns(null));
+
+    expect(result.current.runs).toEqual([]);
+    expect(mockFetchTaskRuns).not.toHaveBeenCalled();
+  });
+
+  it("loads runs for a task id", async () => {
+    mockFetchTaskRuns.mockResolvedValueOnce([run]);
+    const { result } = renderHook(() => useTaskRuns("task-1"));
+
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(mockFetchTaskRuns).toHaveBeenCalledWith("task-1");
+    expect(result.current.runs).toEqual([run]);
+  });
+
+  it("stores errors from the API", async () => {
+    mockFetchTaskRuns.mockRejectedValueOnce(new Error("history failed"));
+    const { result } = renderHook(() => useTaskRuns("task-1"));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.error).toBe("history failed");
+  });
+});

package/apps/web/src/features/tasks/hooks/useChangelogCodeCopy.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useCallback } from "react";
+
+import { useCopyToClipboard } from "./useCopyToClipboard";
+
+export function extractCopyableCodeFromPatch(patch: string): string {
+  const codeLines: string[] = [];
+
+  for (const line of patch.split("\n")) {
+    if (
+      line.startsWith("diff --git ") ||
+      line.startsWith("index ") ||
+      line.startsWith("new file mode ") ||
+      line.startsWith("deleted file mode ") ||
+      line.startsWith("rename from ") ||
+      line.startsWith("rename to ") ||
+      line.startsWith("similarity index ") ||
+      line.startsWith("--- ") ||
+      line.startsWith("+++ ") ||
+      line.startsWith("@@") ||
+      line.startsWith("\\ No newline")
+    ) {
+      continue;
+    }
+
+    if (line.startsWith("+")) {
+      codeLines.push(line.slice(1));
+      continue;
+    }
+
+    if (line.startsWith("-")) {
+      continue;
+    }
+
+    if (line.startsWith(" ")) {
+      codeLines.push(line.slice(1));
+    }
+  }
+
+  return codeLines.length > 0 ? codeLines.join("\n").trimEnd() : patch.trim();
+}
+
+export function useChangelogCodeCopy() {
+  const { copy, status } = useCopyToClipboard();
+
+  const copyCode = useCallback(async (patch: string): Promise<boolean> => {
+    return copy(extractCopyableCodeFromPatch(patch));
+  }, [copy]);
+
+  return { copyCode, status };
+}

package/apps/web/src/features/tasks/hooks/useCopyToClipboard.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+type CopyStatus = "idle" | "copied" | "error";
+
+function fallbackCopyText(text: string): void {
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  try {
+    document.execCommand("copy");
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+export function useCopyToClipboard() {
+  const [status, setStatus] = useState<CopyStatus>("idle");
+
+  const copy = useCallback(async (text: string): Promise<boolean> => {
+    try {
+      if (!text) throw new Error("복사할 내용이 없습니다.");
+
+      if (globalThis.navigator.clipboard?.writeText) {
+        await globalThis.navigator.clipboard.writeText(text);
+      } else {
+        fallbackCopyText(text);
+      }
+
+      setStatus("copied");
+      window.setTimeout(() => setStatus("idle"), 1500);
+      return true;
+    } catch {
+      setStatus("error");
+      window.setTimeout(() => setStatus("idle"), 1500);
+      return false;
+    }
+  }, []);
+
+  return { copy, status };
+}

package/apps/web/src/features/tasks/hooks/useTaskChangelog.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { AgentChangelog } from "../api/changelog.api";
+import { fetchTaskChangelog } from "../api/changelog.api";
+
+export function useTaskChangelog(taskId: string | null) {
+  const [changelogs, setChangelogs] = useState<AgentChangelog[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!taskId) {
+      setChangelogs([]);
+      return;
+    }
+
+    const controller = new AbortController();
+    setLoading(true);
+    setError(null);
+
+    fetchTaskChangelog(taskId, controller.signal)
+      .then((data) => { if (!controller.signal.aborted) setChangelogs(data); })
+      .catch((e: Error) => { if (!controller.signal.aborted) setError(e.message); })
+      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
+
+    return () => { controller.abort(); };
+  }, [taskId]);
+
+  return { changelogs, loading, error };
+}

package/apps/web/src/features/tasks/hooks/useTaskCreate.ts

@@ -0,0 +1,137 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { createTask } from "../api/tasks.api";
+import type { AgentRole, CreateTaskPayload, Task } from "../api/tasks.api";
+import type { AgentId } from "@/features/chat/ui/AgentSelectModal";
+
+export interface AgentDraft {
+  id: string; // 로컬 임시 key
+  agentType: AgentId;
+  role: AgentRole;
+  customRole: string;
+}
+
+export interface RequirementDraft {
+  id: string;
+  content: string;
+}
+
+export interface TaskFormState {
+  title: string;
+  workingDir: string;
+  requirements: RequirementDraft[];
+  agents: AgentDraft[];
+}
+
+const INITIAL_STATE: TaskFormState = {
+  title: "",
+  workingDir: "",
+  requirements: [],
+  agents: [],
+};
+
+let draftId = 0;
+const nextDraftId = () => String(++draftId);
+
+export function useTaskCreate(onSuccess?: (task: Task) => void) {
+  const [form, setForm] = useState<TaskFormState>(INITIAL_STATE);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // ─── title / workingDir ──────────────────────────────────────────────
+
+  const setTitle = useCallback((v: string) => setForm((f) => ({ ...f, title: v })), []);
+  const setWorkingDir = useCallback((v: string) => setForm((f) => ({ ...f, workingDir: v })), []);
+
+  // ─── requirements ────────────────────────────────────────────────────
+
+  const addRequirement = useCallback(() => {
+    setForm((f) => ({
+      ...f,
+      requirements: [...f.requirements, { id: nextDraftId(), content: "" }],
+    }));
+  }, []);
+
+  const updateRequirement = useCallback((id: string, content: string) => {
+    setForm((f) => ({
+      ...f,
+      requirements: f.requirements.map((r) => (r.id === id ? { ...r, content } : r)),
+    }));
+  }, []);
+
+  const removeRequirement = useCallback((id: string) => {
+    setForm((f) => ({
+      ...f,
+      requirements: f.requirements.filter((r) => r.id !== id),
+    }));
+  }, []);
+
+  // ─── agents ──────────────────────────────────────────────────────────
+
+  const addAgent = useCallback((agentType: AgentId, role: AgentRole = "frontend") => {
+    setForm((f) => ({
+      ...f,
+      agents: [...f.agents, { id: nextDraftId(), agentType, role, customRole: "" }],
+    }));
+  }, []);
+
+  const updateAgent = useCallback((id: string, patch: Partial<Omit<AgentDraft, "id">>) => {
+    setForm((f) => ({
+      ...f,
+      agents: f.agents.map((a) => (a.id === id ? { ...a, ...patch } : a)),
+    }));
+  }, []);
+
+  const removeAgent = useCallback((id: string) => {
+    setForm((f) => ({ ...f, agents: f.agents.filter((a) => a.id !== id) }));
+  }, []);
+
+  // ─── submit ──────────────────────────────────────────────────────────
+
+  const submit = useCallback(async () => {
+    if (!form.title.trim()) { setError("작업 제목을 입력하세요."); return; }
+    setError(null);
+    setSubmitting(true);
+    try {
+      const payload: CreateTaskPayload = {
+        title: form.title.trim(),
+        workingDir: form.workingDir.trim() || undefined,
+        requirements: form.requirements
+          .filter((r) => r.content.trim())
+          .map((r, i) => ({ content: r.content.trim(), orderIndex: i })),
+        agents: form.agents.map((a) => ({
+          agentType: a.agentType,
+          role: a.role,
+          customRole: a.role === "other" && a.customRole.trim() ? a.customRole.trim() : undefined,
+        })),
+      };
+      const task = await createTask(payload);
+      setForm(INITIAL_STATE);
+      onSuccess?.(task);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "작업 생성 실패");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [form, onSuccess]);
+
+  const reset = useCallback(() => { setForm(INITIAL_STATE); setError(null); }, []);
+
+  return {
+    form,
+    submitting,
+    error,
+    setTitle,
+    setWorkingDir,
+    addRequirement,
+    updateRequirement,
+    removeRequirement,
+    addAgent,
+    updateAgent,
+    removeAgent,
+    submit,
+    reset,
+  };
+}

package/apps/web/src/features/tasks/hooks/useTaskDetail.ts

@@ -0,0 +1,217 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { fetchTaskRunChangelog } from "../api/changelog.api";
+import type { AgentChangelog } from "../api/changelog.api";
+import { fetchTaskConversations, fetchTaskRuns } from "../api/tasks.api";
+import type { AgentRole, Task, TaskConversation, TaskRun } from "../api/tasks.api";
+
+export type DetailStatusFilter = "all" | "error" | "completed";
+export type DetailAgentFilter = "all" | number;
+export type DetailRoleFilter = "all" | AgentRole;
+export type DetailVersionFilter = "all" | number;
+
+export interface DetailVersion {
+  run: TaskRun;
+  changelogs: AgentChangelog[];
+  logsByAgent: Record<number, string>;
+  additions: number;
+  deletions: number;
+  fileCount: number;
+}
+
+interface RunChangelog {
+  runId: number;
+  changelogs: AgentChangelog[];
+}
+
+function appendLog(target: Record<number, string>, conversation: TaskConversation): void {
+  if (conversation.type !== "agent_message" || conversation.agentId == null) return;
+  target[conversation.agentId] = `${target[conversation.agentId] ?? ""}${conversation.content}`;
+}
+
+export function useTaskDetail(task: Task | null) {
+  const [runs, setRuns] = useState<TaskRun[]>([]);
+  const [conversations, setConversations] = useState<TaskConversation[]>([]);
+  const [runChangelogs, setRunChangelogs] = useState<RunChangelog[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [agentFilter, setAgentFilter] = useState<DetailAgentFilter>("all");
+  const [roleFilter, setRoleFilter] = useState<DetailRoleFilter>("all");
+  const [statusFilter, setStatusFilter] = useState<DetailStatusFilter>("all");
+  const [versionFilter, setVersionFilter] = useState<DetailVersionFilter>("all");
+
+  useEffect(() => {
+    if (!task) {
+      setRuns([]);
+      setConversations([]);
+      setRunChangelogs([]);
+      return;
+    }
+
+    let active = true;
+    const controller = new AbortController();
+    const taskId = task.id;
+
+    setLoading(true);
+    setError(null);
+
+    async function load() {
+      try {
+        const [nextRuns, nextConversations] = await Promise.all([
+          fetchTaskRuns(taskId),
+          fetchTaskConversations(taskId),
+        ]);
+        const changelogResults = await Promise.all(
+          nextRuns.map(async (run) => ({
+            runId: run.id,
+            changelogs: await fetchTaskRunChangelog(taskId, run.id, controller.signal).catch(() => []),
+          })),
+        );
+
+        if (!active) return;
+        setRuns(nextRuns);
+        setConversations(nextConversations);
+        setRunChangelogs(changelogResults);
+      } catch (e) {
+        if (!active) return;
+        setError(e instanceof Error ? e.message : "상세 정보를 불러오지 못했습니다.");
+      } finally {
+        if (active) setLoading(false);
+      }
+    }
+
+    void load();
+
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [task]);
+
+  useEffect(() => {
+    setAgentFilter("all");
+    setRoleFilter("all");
+    setStatusFilter("all");
+    setVersionFilter("all");
+  }, [task?.id]);
+
+  const versions = useMemo<DetailVersion[]>(() => {
+    const changelogByRun = new Map(runChangelogs.map((entry) => [entry.runId, entry.changelogs]));
+    const logsByRun = new Map<number, Record<number, string>>();
+
+    for (const conversation of conversations) {
+      if (conversation.runId == null) continue;
+      const current = logsByRun.get(conversation.runId) ?? {};
+      appendLog(current, conversation);
+      logsByRun.set(conversation.runId, current);
+    }
+
+    return runs.map((run) => {
+      const changelogs = changelogByRun.get(run.id) ?? [];
+      const files = changelogs.flatMap((entry) => entry.files);
+      return {
+        run,
+        changelogs,
+        logsByAgent: logsByRun.get(run.id) ?? {},
+        additions: files.reduce((sum, file) => sum + file.additions, 0),
+        deletions: files.reduce((sum, file) => sum + file.deletions, 0),
+        fileCount: files.length,
+      };
+    });
+  }, [conversations, runChangelogs, runs]);
+
+  const filteredVersions = useMemo(() => {
+    if (!task) return [];
+
+    const agentById = new Map(task.agents.map((agent) => [agent.id, agent]));
+
+    const agentMatches = (agentId: number) => {
+      if (agentFilter !== "all" && agentFilter !== agentId) return false;
+      const agent = agentById.get(agentId);
+      if (roleFilter !== "all" && agent?.role !== roleFilter) return false;
+      return true;
+    };
+
+    const statusMatches = (run: TaskRun, agentId: number) => {
+      if (statusFilter === "all") return true;
+      return run.agentRuns.some((agentRun) => agentRun.agentId === agentId && agentRun.status === statusFilter);
+    };
+
+    return versions
+      .filter((version) => versionFilter === "all" || version.run.id === versionFilter)
+      .map((version) => {
+        const visibleAgentIds = new Set<number>();
+        for (const agentRun of version.run.agentRuns) visibleAgentIds.add(agentRun.agentId);
+        for (const agentId of Object.keys(version.logsByAgent)) visibleAgentIds.add(Number(agentId));
+        for (const changelog of version.changelogs) visibleAgentIds.add(changelog.agentId);
+
+        const allowedAgentIds = new Set(
+          Array.from(visibleAgentIds).filter((agentId) => agentMatches(agentId) && statusMatches(version.run, agentId)),
+        );
+
+        const changelogs = version.changelogs
+          .filter((changelog) => allowedAgentIds.has(changelog.agentId))
+          .map((changelog) => ({ ...changelog, files: [...changelog.files] }));
+
+        const logsByAgent = Object.fromEntries(
+          Object.entries(version.logsByAgent).filter(([agentId]) => allowedAgentIds.has(Number(agentId))),
+        );
+
+        const files = changelogs.flatMap((entry) => entry.files);
+        return {
+          ...version,
+          changelogs,
+          logsByAgent,
+          run: {
+            ...version.run,
+            agentRuns: version.run.agentRuns.filter((agentRun) => allowedAgentIds.has(agentRun.agentId)),
+          },
+          additions: files.reduce((sum, file) => sum + file.additions, 0),
+          deletions: files.reduce((sum, file) => sum + file.deletions, 0),
+          fileCount: files.length,
+        };
+      })
+      .filter((version) => (
+        version.run.agentRuns.length > 0 ||
+        Object.keys(version.logsByAgent).length > 0 ||
+        version.changelogs.length > 0 ||
+        (agentFilter === "all" && roleFilter === "all" && statusFilter === "all")
+      ));
+  }, [agentFilter, roleFilter, statusFilter, task, versionFilter, versions]);
+
+  const roleOptions = useMemo(() => {
+    const roles = new Set<AgentRole>();
+    task?.agents.forEach((agent) => roles.add(agent.role));
+    return Array.from(roles);
+  }, [task]);
+
+  const totals = useMemo(() => ({
+    versions: versions.length,
+    files: versions.reduce((sum, version) => sum + version.fileCount, 0),
+    additions: versions.reduce((sum, version) => sum + version.additions, 0),
+    deletions: versions.reduce((sum, version) => sum + version.deletions, 0),
+    errors: runs.reduce((sum, run) => sum + run.agentRuns.filter((agentRun) => agentRun.status === "error").length, 0),
+    completed: runs.reduce((sum, run) => sum + run.agentRuns.filter((agentRun) => agentRun.status === "completed").length, 0),
+  }), [runs, versions]);
+
+  return {
+    agentFilter,
+    error,
+    filteredVersions,
+    loading,
+    roleFilter,
+    roleOptions,
+    runs,
+    setAgentFilter,
+    setRoleFilter,
+    setStatusFilter,
+    setVersionFilter,
+    statusFilter,
+    totals,
+    versionFilter,
+    versions,
+  };
+}