@jcjeon/integration-cli 0.2.0

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

@@ -0,0 +1,130 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { updateTask } from "../api/tasks.api";
+import type { AgentRole, Task, UpdateTaskPayload } from "../api/tasks.api";
+import type { AgentDraft, RequirementDraft } from "./useTaskCreate";
+import type { AgentId } from "@/features/chat/ui/AgentSelectModal";
+
+let draftId = 1000; // useTaskCreate와 충돌 방지
+const nextDraftId = () => String(++draftId);
+
+export interface EditFormState {
+  title: string;
+  workingDir: string;
+  requirements: RequirementDraft[];
+  agents: AgentDraft[];
+}
+
+function toRequirementDrafts(reqs: Task["requirements"]): RequirementDraft[] {
+  return [...reqs]
+    .sort((a, b) => a.orderIndex - b.orderIndex)
+    .map((r) => ({ id: nextDraftId(), content: r.content }));
+}
+
+function toAgentDrafts(agents: Task["agents"]): AgentDraft[] {
+  return agents.map((a) => ({
+    id: nextDraftId(),
+    agentType: a.agentType as AgentId,
+    role: a.role,
+    customRole: a.customRole ?? "",
+  }));
+}
+
+export function useTaskEdit(task: Task, onSuccess?: (updated: Task) => void) {
+  const [form, setForm] = useState<EditFormState>(() => ({
+    title: task.title,
+    workingDir: task.workingDir ?? "",
+    requirements: toRequirementDrafts(task.requirements),
+    agents: toAgentDrafts(task.agents),
+  }));
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // task prop이 바뀌면 폼 동기화
+  useEffect(() => {
+    setForm({
+      title: task.title,
+      workingDir: task.workingDir ?? "",
+      requirements: toRequirementDrafts(task.requirements),
+      agents: toAgentDrafts(task.agents),
+    });
+  }, [task.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ─── 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: UpdateTaskPayload = {
+        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 updated = await updateTask(task.id, payload);
+      onSuccess?.(updated);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "수정 실패");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [form, task.id, onSuccess]);
+
+  return {
+    form,
+    submitting,
+    error,
+    setTitle,
+    setWorkingDir,
+    addRequirement,
+    updateRequirement,
+    removeRequirement,
+    addAgent,
+    updateAgent,
+    removeAgent,
+    submit,
+  };
+}

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

@@ -0,0 +1,137 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { io, type Socket } from "socket.io-client";
+
+import { SERVER_URL } from "@/lib/constants";
+import type { AgentStatus, TaskStatus } from "../api/tasks.api";
+
+const TASKS_WS_NAMESPACE = "/tasks";
+
+// ─── 서버 이벤트 타입 ─────────────────────────────────────────────────────────
+
+interface AgentOutputEvent  { taskId: string; agentId: number; text: string }
+interface AgentToolEvent    { taskId: string; agentId: number; tool: string; input: Record<string, unknown> }
+interface AgentDoneEvent    { taskId: string; agentId: number; result: string; isError: boolean; durationMs: number; costUsd: number }
+interface AgentErrorEvent   { taskId: string; agentId: number; message: string }
+interface TaskStatusEvent   { taskId: string; status: TaskStatus }
+
+interface BufferedAgentLog {
+  agentId: number;
+  status: string;
+  output: string;
+  durationMs?: number;
+  costUsd?: number;
+  errorMessage?: string;
+}
+
+// ─── 클라이언트 상태 ──────────────────────────────────────────────────────────
+
+export interface AgentLog {
+  agentId: number;
+  status: AgentStatus;
+  output: string;
+  durationMs?: number;
+  costUsd?: number;
+  errorMessage?: string;
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+export function useTaskExecution(
+  taskId: string | null,
+  onTaskStatusChange?: (taskId: string, status: TaskStatus) => void,
+) {
+  const [agentLogs, setAgentLogs] = useState<Record<number, AgentLog>>({});
+  const [connected, setConnected] = useState(false);
+  const socketRef = useRef<Socket | null>(null);
+
+  const upsertAgent = useCallback((agentId: number, patch: Partial<AgentLog>) => {
+    setAgentLogs((prev) => {
+      const base: AgentLog = prev[agentId] ?? { agentId, status: "running", output: "" };
+      return { ...prev, [agentId]: { ...base, ...patch } };
+    });
+  }, []);
+
+  const appendOutput = useCallback((agentId: number, text: string) => {
+    setAgentLogs((prev) => {
+      const base: AgentLog = prev[agentId] ?? { agentId, status: "running", output: "" };
+      return { ...prev, [agentId]: { ...base, output: base.output + text } };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!taskId) return;
+
+    setAgentLogs({});
+    const socket = io(`${SERVER_URL}${TASKS_WS_NAMESPACE}`, { transports: ["websocket"] });
+    socketRef.current = socket;
+
+    socket.on("connect", () => {
+      setConnected(true);
+      // 1. 룸 구독
+      socket.emit("task:subscribe", { taskId });
+      // 2. 이미 실행 중이거나 완료된 경우 버퍼 요청 (타이밍 경쟁 조건 해결)
+      socket.emit("task:get-logs", { taskId });
+    });
+
+    socket.on("disconnect", () => setConnected(false));
+
+    // 늦은 구독 — 서버가 저장해 둔 버퍼를 한 번에 리플레이
+    socket.on("task:buffered-logs", ({ logs }: { taskId: string; logs: BufferedAgentLog[] }) => {
+      setAgentLogs((prev) => {
+        const next = { ...prev };
+        for (const log of logs) {
+          const existing = next[log.agentId];
+          // 이미 라이브 이벤트로 받은 내용이 있으면 버퍼가 더 짧을 수 있으므로 긴 것 유지
+          if (!existing || existing.output.length < log.output.length) {
+            next[log.agentId] = {
+              agentId: log.agentId,
+              status: (log.status as AgentStatus) ?? "running",
+              output: log.output,
+              durationMs: log.durationMs,
+              costUsd: log.costUsd,
+              errorMessage: log.errorMessage,
+            };
+          }
+        }
+        return next;
+      });
+    });
+
+    // 라이브 이벤트
+    socket.on("agent:output", ({ agentId, text }: AgentOutputEvent) => {
+      appendOutput(agentId, text);
+    });
+
+    socket.on("agent:tool", ({ agentId, tool, input }: AgentToolEvent) => {
+      const line = `\n⚙ ${tool}(${JSON.stringify(input).slice(0, 120)})\n`;
+      appendOutput(agentId, line);
+    });
+
+    socket.on("agent:done", ({ agentId, isError, durationMs, costUsd }: AgentDoneEvent) => {
+      upsertAgent(agentId, {
+        status: isError ? "error" : "completed",
+        durationMs,
+        costUsd,
+      });
+    });
+
+    socket.on("agent:error", ({ agentId, message }: AgentErrorEvent) => {
+      upsertAgent(agentId, { status: "error", errorMessage: message });
+    });
+
+    socket.on("task:status", ({ taskId: tid, status }: TaskStatusEvent) => {
+      onTaskStatusChange?.(tid, status);
+    });
+
+    return () => {
+      socket.emit("task:unsubscribe", { taskId });
+      socket.disconnect();
+      socketRef.current = null;
+      setConnected(false);
+    };
+  }, [taskId, upsertAgent, appendOutput, onTaskStatusChange]);
+
+  return { agentLogs, connected };
+}

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

@@ -0,0 +1,159 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { archiveTask, deleteTask, executeTask, fetchTasks, rerunTask, rerunTaskAgent, stopTask } from "../api/tasks.api";
+import type { AgentTestCodePreference, Task, TaskStatus } from "../api/tasks.api";
+
+export function useTaskList(open: boolean) {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [actioningId, setActioningId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // 편집 대상 태스크
+  const [editingTask, setEditingTask] = useState<Task | null>(null);
+
+  // 폴링: running 상태인 작업이 있으면 3초마다 새로고침
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadTasks = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchTasks();
+      setTasks(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "목록 조회 실패");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 모달 열릴 때 로드
+  useEffect(() => {
+    if (!open) return;
+    void loadTasks();
+  }, [open, loadTasks]);
+
+  // running 작업이 있으면 폴링
+  useEffect(() => {
+    const hasRunning = tasks.some((t) => t.status === "running");
+    if (hasRunning && !pollRef.current) {
+      pollRef.current = setInterval(() => void loadTasks(), 3000);
+    }
+    if (!hasRunning && pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    return () => {
+      if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+    };
+  }, [tasks, loadTasks]);
+
+  // ─── 액션 ────────────────────────────────────────────────────────────
+
+  const execute = useCallback(async (id: string, agentTestCodePreferences: AgentTestCodePreference[] = []) => {
+    setActioningId(id);
+    try {
+      const updated = await executeTask(id, agentTestCodePreferences);
+      setTasks((prev) => prev.map((t) => (t.id === id ? updated : t)));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "실행 실패");
+    } finally {
+      setActioningId(null);
+    }
+  }, []);
+
+  const stop = useCallback(async (id: string) => {
+    setActioningId(id);
+    try {
+      const updated = await stopTask(id);
+      setTasks((prev) => prev.map((t) => (t.id === id ? updated : t)));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "중지 실패");
+    } finally {
+      setActioningId(null);
+    }
+  }, []);
+
+  const rerun = useCallback(async (id: string, supplementNote?: string, writeTestCode?: boolean) => {
+    setActioningId(id);
+    try {
+      const updated = await rerunTask(id, supplementNote, writeTestCode);
+      setTasks((prev) => prev.map((t) => (t.id === id ? updated : t)));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "재 실행 실패");
+    } finally {
+      setActioningId(null);
+    }
+  }, []);
+
+  const rerunAgent = useCallback(async (id: string, agentId: number, supplementNote?: string, writeTestCode?: boolean) => {
+    setActioningId(id);
+    try {
+      const updated = await rerunTaskAgent(id, agentId, supplementNote, writeTestCode);
+      setTasks((prev) => prev.map((t) => (t.id === id ? updated : t)));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "에이전트 재실행 실패");
+    } finally {
+      setActioningId(null);
+    }
+  }, []);
+
+  const archive = useCallback(async (id: string) => {
+    setActioningId(id);
+    try {
+      await archiveTask(id);
+      setTasks((prev) => prev.filter((t) => t.id !== id));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "보관 실패");
+    } finally {
+      setActioningId(null);
+    }
+  }, []);
+
+  const remove = useCallback(async (id: string) => {
+    setActioningId(id);
+    try {
+      await deleteTask(id);
+      setTasks((prev) => prev.filter((t) => t.id !== id));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "삭제 실패");
+    } finally {
+      setActioningId(null);
+    }
+  }, []);
+
+  const onEditDone = useCallback(
+    (updated: Task) => {
+      setTasks((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
+      setEditingTask(null);
+    },
+    [],
+  );
+
+  // WS 이벤트로 task status가 바뀔 때 로컬 state 반영
+  const updateTaskStatus = useCallback((taskId: string, status: TaskStatus) => {
+    setTasks((prev) =>
+      prev.map((t) => (t.id === taskId ? { ...t, status } : t)),
+    );
+  }, []);
+
+  return {
+    tasks,
+    loading,
+    actioningId,
+    error,
+    editingTask,
+    setEditingTask,
+    loadTasks,
+    execute,
+    stop,
+    rerun,
+    rerunAgent,
+    archive,
+    remove,
+    onEditDone,
+    updateTaskStatus,
+  };
+}

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

@@ -0,0 +1,80 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { io, type Socket } from "socket.io-client";
+
+import { SERVER_URL } from "@/lib/constants";
+import { useToast } from "@/lib/toast";
+import { fetchTasks } from "../api/tasks.api";
+
+const TASKS_WS_NAMESPACE = "/tasks";
+
+interface TaskStatusEvent {
+  taskId: string;
+  status: string;
+  title?: string;
+}
+
+export function useTaskNotification() {
+  const { addToast } = useToast();
+  const [hasNew, setHasNew] = useState(false);
+
+  // 이전 상태 추적 — running → completed/error 전환 감지
+  const prevStatusRef = useRef<Map<string, string>>(new Map());
+  const titleRef = useRef<Map<string, string>>(new Map());
+
+  useEffect(() => {
+    // 초기 상태를 기준점으로 저장 (toast 미발행)
+    void fetchTasks().then((tasks) => {
+      tasks.forEach((t) => {
+        prevStatusRef.current.set(t.id, t.status);
+        titleRef.current.set(t.id, t.title);
+      });
+    });
+
+    const socket: Socket = io(`${SERVER_URL}${TASKS_WS_NAMESPACE}`, {
+      transports: ["websocket"],
+    });
+
+    socket.on("connect", () => {
+      // 전역 알림 룸 구독 — 모든 task:status 이벤트 수신
+      socket.emit("task:watch-all");
+    });
+
+    socket.on("task:status", ({ taskId, status, title }: TaskStatusEvent) => {
+      const prev = prevStatusRef.current.get(taskId);
+
+      // 서버가 title을 내려주면 갱신, 없으면 초기 로드 값 사용
+      const taskTitle = title ?? titleRef.current.get(taskId) ?? "작업";
+      if (title) titleRef.current.set(taskId, title);
+
+      // pending/running/undefined → completed/error/stopped 전환 시 알림
+      // (prev === "running" 만 체크하면 초기 로드 이전 신규 작업을 놓침)
+      const isFinished = (s: string) =>
+        s === "completed" || s === "error" || s === "stopped";
+
+      if (!isFinished(prev ?? "")) {
+        if (status === "completed") {
+          addToast({ type: "success", title: "작업 완료", message: taskTitle });
+          setHasNew(true);
+        } else if (status === "error") {
+          addToast({ type: "error", title: "작업 오류", message: taskTitle });
+          setHasNew(true);
+        } else if (status === "stopped") {
+          addToast({ type: "info", title: "작업 중지됨", message: taskTitle });
+        }
+      }
+
+      prevStatusRef.current.set(taskId, status);
+    });
+
+    return () => {
+      socket.emit("task:unwatch-all");
+      socket.disconnect();
+    };
+  }, [addToast]);
+
+  const clearNew = useCallback(() => setHasNew(false), []);
+
+  return { hasNew, clearNew };
+}

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

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