@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/tasks/ui/__tests__/TaskListModal.test.tsx

@@ -0,0 +1,243 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Task } from "../../api/tasks.api";
+import { useTaskExecution } from "../../hooks/useTaskExecution";
+import { useTaskList } from "../../hooks/useTaskList";
+import { TaskListModal } from "../TaskListModal";
+
+vi.mock("../../hooks/useTaskList", () => ({
+  useTaskList: vi.fn(),
+}));
+
+vi.mock("../../hooks/useTaskExecution", () => ({
+  useTaskExecution: vi.fn(),
+}));
+
+vi.mock("../AgentOutputPanel", () => ({
+  AgentOutputPanel: ({
+    connected,
+    onWriteTestsAgent,
+  }: {
+    connected: boolean;
+    onWriteTestsAgent?: (agentId: number) => void;
+  }) => (
+    <div data-testid="agent-output">
+      connected:{String(connected)}
+      <button type="button" onClick={() => onWriteTestsAgent?.(1)}>
+        테스트 작성
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock("../ChangelogPanel", () => ({
+  ChangelogPanel: ({ taskId }: { taskId: string }) => <div data-testid="changelog">changes:{taskId}</div>,
+}));
+
+vi.mock("../RunHistoryPanel", () => ({
+  RunHistoryPanel: ({ taskId }: { taskId: string }) => <div data-testid="history">history:{taskId}</div>,
+}));
+
+const mockUseTaskList = vi.mocked(useTaskList);
+const mockUseTaskExecution = vi.mocked(useTaskExecution);
+
+function task(overrides: Partial<Task> = {}): Task {
+  return {
+    id: "task-123456789",
+    title: "Build feature",
+    status: "pending",
+    workingDir: null,
+    requirements: [{ id: 1, content: "Requirement", status: "pending", orderIndex: 0 }],
+    agents: [{ id: 1, agentType: "claude", role: "frontend", customRole: null, status: "pending" }],
+    createdAt: "2024-01-01T00:00:00.000Z",
+    updatedAt: "2024-01-01T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function setup(overrides: Partial<ReturnType<typeof useTaskList>> = {}) {
+  const defaults = {
+    tasks: [task()],
+    loading: false,
+    actioningId: null,
+    error: null,
+    editingTask: null,
+    setEditingTask: vi.fn(),
+    loadTasks: vi.fn(),
+    execute: vi.fn(),
+    stop: vi.fn(),
+    rerun: vi.fn(),
+    rerunAgent: vi.fn(),
+    archive: vi.fn(),
+    remove: vi.fn(),
+    onEditDone: vi.fn(),
+    updateTaskStatus: vi.fn(),
+  };
+  const value = { ...defaults, ...overrides };
+  mockUseTaskList.mockReturnValue(value);
+  mockUseTaskExecution.mockReturnValue({ agentLogs: {}, connected: true });
+  render(<TaskListModal open={true} onClose={vi.fn()} />);
+  return value;
+}
+
+afterEach(() => { vi.clearAllMocks(); });
+
+describe("TaskListModal", () => {
+  it("does not render when closed", () => {
+    mockUseTaskList.mockReturnValue({
+      tasks: [],
+      loading: false,
+      actioningId: null,
+      error: null,
+      editingTask: null,
+      setEditingTask: vi.fn(),
+      loadTasks: vi.fn(),
+      execute: vi.fn(),
+      stop: vi.fn(),
+      rerun: vi.fn(),
+      rerunAgent: vi.fn(),
+      archive: vi.fn(),
+      remove: vi.fn(),
+      onEditDone: vi.fn(),
+      updateTaskStatus: vi.fn(),
+    });
+    render(<TaskListModal open={false} onClose={vi.fn()} />);
+    expect(screen.queryByText("작업 목록")).not.toBeInTheDocument();
+  });
+
+  it("renders empty, loading, and error states", () => {
+    const { rerender, container } = render(<TaskListModal open={true} onClose={vi.fn()} />);
+    mockUseTaskList.mockReturnValue({
+      tasks: [],
+      loading: true,
+      actioningId: null,
+      error: null,
+      editingTask: null,
+      setEditingTask: vi.fn(),
+      loadTasks: vi.fn(),
+      execute: vi.fn(),
+      stop: vi.fn(),
+      rerun: vi.fn(),
+      rerunAgent: vi.fn(),
+      archive: vi.fn(),
+      remove: vi.fn(),
+      onEditDone: vi.fn(),
+      updateTaskStatus: vi.fn(),
+    });
+    rerender(<TaskListModal open={true} onClose={vi.fn()} />);
+    expect(container.querySelectorAll(".animate-pulse")).toHaveLength(3);
+
+    mockUseTaskList.mockReturnValue({
+      tasks: [],
+      loading: false,
+      actioningId: null,
+      error: "load failed",
+      editingTask: null,
+      setEditingTask: vi.fn(),
+      loadTasks: vi.fn(),
+      execute: vi.fn(),
+      stop: vi.fn(),
+      rerun: vi.fn(),
+      rerunAgent: vi.fn(),
+      archive: vi.fn(),
+      remove: vi.fn(),
+      onEditDone: vi.fn(),
+      updateTaskStatus: vi.fn(),
+    });
+    rerender(<TaskListModal open={true} onClose={vi.fn()} />);
+    expect(screen.getByText("load failed")).toBeInTheDocument();
+    expect(screen.getByText("생성된 작업이 없습니다")).toBeInTheDocument();
+  });
+
+  it("refreshes, expands a task, executes, edits, archives, and deletes", async () => {
+    const user = userEvent.setup();
+    const api = setup();
+
+    await user.click(screen.getByRole("button", { name: /새로고침/ }));
+    expect(api.loadTasks).toHaveBeenCalledTimes(1);
+
+    await user.click(screen.getByRole("button", { name: /Build feature/ }));
+    expect(screen.getByText("Requirement")).toBeInTheDocument();
+    expect(screen.getAllByText("Frontend").length).toBeGreaterThan(0);
+
+    await user.click(screen.getByRole("button", { name: "실행" }));
+    expect(api.execute).toHaveBeenCalledWith("task-123456789", [{ agentId: 1, writeTestCode: false }]);
+
+    await user.click(screen.getByRole("button", { name: "수정" }));
+    expect(api.setEditingTask).toHaveBeenCalledWith(expect.objectContaining({ id: "task-123456789" }));
+
+    await user.click(screen.getByRole("button", { name: "보관" }));
+    expect(api.archive).toHaveBeenCalledWith("task-123456789");
+
+    await user.click(screen.getByRole("button", { name: "삭제" }));
+    expect(api.remove).toHaveBeenCalledWith("task-123456789");
+  });
+
+  it("passes checked test-code preferences when executing", async () => {
+    const user = userEvent.setup();
+    const api = setup({
+      tasks: [
+        task({
+          agents: [
+            { id: 1, agentType: "claude", role: "frontend", customRole: null, status: "pending" },
+            { id: 2, agentType: "codex", role: "backend", customRole: null, status: "pending" },
+          ],
+        }),
+      ],
+    });
+
+    await user.click(screen.getByRole("button", { name: /Build feature/ }));
+    await user.click(screen.getAllByRole("checkbox")[1]);
+    await user.click(screen.getByRole("button", { name: "실행" }));
+
+    expect(api.execute).toHaveBeenCalledWith("task-123456789", [
+      { agentId: 1, writeTestCode: false },
+      { agentId: 2, writeTestCode: true },
+    ]);
+  });
+
+  it("renders running stop button and logs when expanded", async () => {
+    const user = userEvent.setup();
+    const api = setup({ tasks: [task({ status: "running" })] });
+
+    await user.click(screen.getByRole("button", { name: /Build feature/ }));
+
+    expect(screen.getByTestId("agent-output")).toHaveTextContent("connected:true");
+    await user.click(screen.getByRole("button", { name: "중지" }));
+    expect(api.stop).toHaveBeenCalledWith("task-123456789");
+  });
+
+  it("switches completed task tabs and submits rerun note", async () => {
+    const user = userEvent.setup();
+    const api = setup({ tasks: [task({ status: "completed" })] });
+
+    await user.click(screen.getByRole("button", { name: /Build feature/ }));
+    await user.click(screen.getByRole("button", { name: "변경사항" }));
+    expect(screen.getByTestId("changelog")).toHaveTextContent("changes:task-123456789");
+    await user.click(screen.getByRole("button", { name: "실행 기록" }));
+    expect(screen.getByTestId("history")).toHaveTextContent("history:task-123456789");
+
+    await user.click(screen.getByRole("button", { name: "재 실행" }));
+    await user.type(screen.getByPlaceholderText(/에러 핸들링/), "more tests");
+    await user.click(screen.getByRole("button", { name: "재 실행" }));
+
+    await waitFor(() => expect(api.rerun).toHaveBeenCalledWith("task-123456789", "more tests"));
+  });
+
+  it("can request test code for a completed agent", async () => {
+    const user = userEvent.setup();
+    const api = setup({ tasks: [task({ status: "completed" })] });
+
+    await user.click(screen.getByRole("button", { name: /Build feature/ }));
+    await user.click(screen.getByRole("button", { name: "테스트 작성" }));
+
+    expect(api.rerunAgent).toHaveBeenCalledWith(
+      "task-123456789",
+      1,
+      expect.stringContaining("테스트 코드를 작성"),
+      true,
+    );
+  });
+});

package/apps/web/src/hooks/useWorkingDir.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+export function useWorkingDir(initial = "") {
+  const [path, setPath] = useState(initial);
+  const pickerRef = useRef<HTMLInputElement>(null);
+
+  const openPicker = () => pickerRef.current?.click();
+
+  const onPickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Electron 환경에서는 file.path로 전체 경로 획득
+      const fullPath = (file as File & { path?: string }).path;
+      if (fullPath) {
+        // file.path = /full/path/to/dir/some-file → 파일명 제거해서 디렉토리 경로 추출
+        setPath(fullPath.slice(0, fullPath.lastIndexOf("/")));
+      } else {
+        // 일반 브라우저: webkitRelativePath의 최상위 폴더명만 획득
+        setPath(file.webkitRelativePath.split("/")[0]);
+      }
+    }
+    e.target.value = "";
+  };
+
+  return { path, setPath, pickerRef, openPicker, onPickerChange };
+}

package/apps/web/src/lib/__tests__/ansi.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+
+import { cleanCliOutput, detectPermissionPrompt, stripAnsi } from "../ansi";
+
+describe("stripAnsi", () => {
+  it("removes CSI sequences", () => {
+    expect(stripAnsi("\x1B[32mHello\x1B[0m")).toBe("Hello");
+  });
+
+  it("removes bold/color codes", () => {
+    expect(stripAnsi("\x1B[1;34mtext\x1B[0m")).toBe("text");
+  });
+
+  it("normalises CRLF to LF", () => {
+    expect(stripAnsi("line1\r\nline2")).toBe("line1\nline2");
+  });
+
+  it("normalises bare CR to LF", () => {
+    expect(stripAnsi("line1\rline2")).toBe("line1\nline2");
+  });
+
+  it("passes through plain text unchanged", () => {
+    expect(stripAnsi("plain text")).toBe("plain text");
+  });
+});
+
+describe("cleanCliOutput", () => {
+  it("strips ANSI from output", () => {
+    expect(cleanCliOutput("\x1B[32mok\x1B[0m")).toBe("ok");
+  });
+
+  it("removes separator lines (─ characters)", () => {
+    const raw = "result\n──────────────────────────\nother";
+    const cleaned = cleanCliOutput(raw);
+    expect(cleaned).not.toContain("──");
+    expect(cleaned).toContain("result");
+  });
+
+  it("removes spinner-only lines", () => {
+    const raw = "✽ thinking\nactual output";
+    const cleaned = cleanCliOutput(raw);
+    expect(cleaned).not.toContain("✽");
+    expect(cleaned).toContain("actual output");
+  });
+
+  it("removes timing inline noise", () => {
+    // "thinking" triggers NOISE_LINE_PATTERNS so the whole line is dropped
+    const raw = "response text (3s · ↓ 109 tokens · thinking)";
+    expect(cleanCliOutput(raw)).toBe("");
+  });
+
+  it("removes inline timing without noise keyword", () => {
+    // Only the timing bracket is present — no token counter or 'thinking'
+    const raw = "final response (5s · done)";
+    const cleaned = cleanCliOutput(raw);
+    expect(cleaned).not.toMatch(/\(\d+s/);
+    expect(cleaned).toContain("final response");
+  });
+
+  it("collapses 3+ consecutive blank lines into 2", () => {
+    const raw = "a\n\n\n\n\nb";
+    expect(cleanCliOutput(raw)).toBe("a\n\nb");
+  });
+
+  it("removes ⎿ output markers", () => {
+    expect(cleanCliOutput("⎿ output here")).toBe("output here");
+  });
+});
+
+describe("detectPermissionPrompt", () => {
+  it("detects a bash permission prompt", () => {
+    const text = "Bash command\ngit status\nDo you want to proceed? ❯ 1. Yes";
+    const result = detectPermissionPrompt(text);
+    expect(result).not.toBeNull();
+    expect(result?.tool).toBe("Bash");
+    expect(result?.command).toBe("git status");
+  });
+
+  it("captures warning line when present", () => {
+    const text = "Bash command\nrm -rf /tmp\nContains shell expansion\nDo you want to proceed? ❯ 1. Yes";
+    const result = detectPermissionPrompt(text);
+    expect(result?.warning).toBe("Contains shell expansion");
+  });
+
+  it("returns null for non-permission text", () => {
+    expect(detectPermissionPrompt("Just a normal response")).toBeNull();
+  });
+});

package/apps/web/src/lib/ansi.ts

@@ -0,0 +1,105 @@
+// ─── ANSI 이스케이프 제거 ────────────────────────────────────────────────────
+
+// eslint-disable-next-line no-control-regex
+const ANSI_RE = /\x1B\[[0-9;?]*[A-Za-z]|\x1B\][^\x07]*\x07|\x1B[^[\]]/g;
+
+export function stripAnsi(raw: string): string {
+  return raw
+    .replace(ANSI_RE, "")
+    .replace(/\r\n/g, "\n")
+    .replace(/\r/g, "\n");
+}
+
+// ─── Claude CLI 노이즈 패턴 ──────────────────────────────────────────────────
+
+/** 한 줄 전체가 노이즈인 경우 */
+const NOISE_LINE_PATTERNS: RegExp[] = [
+  // 스피너 · 진행 표시
+  /Skedaddling…/,
+  /thinking/i,
+  // 토큰 카운터
+  /[↑↓]\s*\d+\s*tokens/,
+  // 키보드 힌트
+  /esc to interrupt/i,
+  /ctrl\+[a-z] to/i,
+  /Tab to amend/i,
+  // 구분선 (─ 계열 문자가 줄의 60% 이상)
+  /^[─━═\-\s❯◀▶]+$/,
+  // 스피너 아이콘만 있는 줄
+  /^[✽✶✢✻·●\s]+$/,
+  // 메모리 알림
+  /Recalled \d+ memor/i,
+];
+
+/** 줄 내 특정 패턴 제거 (줄 자체는 유지) */
+const INLINE_NOISE_PATTERNS: RegExp[] = [
+  // 타이밍 정보: (3s · ↓ 109 tokens · thinking)
+  /\(\d+s\s*·[^)]+\)/g,
+  // ⎿ 출력 마커
+  /⎿\s*/g,
+  // 특수 스피너 아이콘
+  /[✽✶✢✻]/g,
+];
+
+/** 구분선인지 판단 (─ 계열 50% 이상) */
+function isSeparatorLine(line: string): boolean {
+  if (line.trim().length < 5) return false;
+  const dashCount = (line.match(/[─━═\-]/g) ?? []).length;
+  return dashCount / line.length > 0.5;
+}
+
+// ─── 권한 요청 감지 ──────────────────────────────────────────────────────────
+
+export interface PermissionPrompt {
+  tool: string;
+  command: string;
+  warning?: string;
+}
+
+/**
+ * Claude CLI 권한 요청 블록을 감지한다.
+ *
+ * 패턴:
+ *   Bash command
+ *   <command>
+ *   Contains simple_expansion          ← 선택적 경고
+ *   Do you want to proceed? ❯ 1. Yes …
+ */
+export function detectPermissionPrompt(text: string): PermissionPrompt | null {
+  const match = text.match(
+    /(\w+)\s+command\s*\n([^\n]+)\n(?:([^\n]+)\n)?Do you want to proceed\?/i,
+  );
+  if (!match) return null;
+  return { tool: match[1], command: match[2].trim(), warning: match[3]?.trim() };
+}
+
+// ─── 메인 클리너 ─────────────────────────────────────────────────────────────
+
+export function cleanCliOutput(raw: string): string {
+  const text = stripAnsi(raw);
+  const lines = text.split("\n");
+  const result: string[] = [];
+
+  for (let line of lines) {
+    // 구분선 전체 제거
+    if (isSeparatorLine(line)) continue;
+
+    // 노이즈 줄 전체 제거
+    if (NOISE_LINE_PATTERNS.some((p) => p.test(line.trim()))) continue;
+
+    // 줄 내 노이즈 패턴 제거
+    for (const p of INLINE_NOISE_PATTERNS) {
+      line = line.replace(p, "");
+    }
+
+    result.push(line);
+  }
+
+  return (
+    result
+      .join("\n")
+      // 3줄 이상 연속 빈 줄 → 2줄로 축소
+      .replace(/\n{3,}/g, "\n\n")
+      .trim()
+  );
+}

package/apps/web/src/lib/constants.ts

@@ -0,0 +1,4 @@
+export const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL ?? "http://localhost:3001";
+export const CLAUDE_WS_NAMESPACE = "/agents/claude";
+export const GEMINI_WS_NAMESPACE = "/agents/gemini";
+export const CODEX_WS_NAMESPACE = "/agents/codex";

package/apps/web/src/lib/quota.ts

@@ -0,0 +1,22 @@
+const QUOTA_PATTERNS = [
+  // Gemini
+  /exhausted your daily quota/i,
+  /you exceeded your current quota/i,
+  /TerminalQuotaError/,
+  /daily quota/i,
+  /quota exceeded/i,
+  /generativelanguage.*free_tier/i,
+  // Claude
+  /usage limit reached/i,
+  /rate.?limit/i,
+  /insufficient.?credit/i,
+  /credit balance/i,
+  /overloaded_error/i,
+  /too many requests/i,
+  // HTTP 429
+  /\b429\b/,
+];
+
+export function isQuotaExceeded(text: string): boolean {
+  return QUOTA_PATTERNS.some((p) => p.test(text));
+}

package/apps/web/src/lib/theme.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeCtx {
+  theme: Theme;
+  toggle: () => void;
+}
+
+const ThemeContext = createContext<ThemeCtx | null>(null);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("dark");
+
+  useEffect(() => {
+    const saved = localStorage.getItem("theme") as Theme | null;
+    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+    const initial = saved ?? preferred;
+    setTheme(initial);
+    document.documentElement.classList.toggle("dark", initial === "dark");
+  }, []);
+
+  const toggle = () => {
+    setTheme((prev) => {
+      const next: Theme = prev === "dark" ? "light" : "dark";
+      localStorage.setItem("theme", next);
+      document.documentElement.classList.toggle("dark", next === "dark");
+      return next;
+    });
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
+
+// ─── Toggle Button ────────────────────────────────────────────────────────────
+
+export function ThemeToggle({ className = "" }: { className?: string }) {
+  const { theme, toggle } = useTheme();
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
+      className={[
+        "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
+        "text-gray-900/35 hover:bg-gray-900/[0.05] hover:text-gray-900/70",
+        "dark:text-white/35 dark:hover:bg-white/[0.06] dark:hover:text-white/70",
+        className,
+      ].join(" ")}
+    >
+      {theme === "dark" ? (
+        /* Sun icon */
+        <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
+          <path d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zm4.47 2.53a.75.75 0 011.06 1.06l-1.06 1.06a.75.75 0 01-1.06-1.06l1.06-1.06zm-10 0l1.06 1.06a.75.75 0 01-1.06 1.06L3.47 5.59a.75.75 0 011.06-1.06zM10 5.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zm-16.25.75a.75.75 0 010-1.5h1.5a.75.75 0 010 1.5h-1.5zm12.78 5.72a.75.75 0 011.06-1.06l1.06 1.06a.75.75 0 01-1.06 1.06l-1.06-1.06zm-10 0l-1.06 1.06a.75.75 0 01-1.06-1.06l1.06-1.06a.75.75 0 011.06 1.06zM10 17.25a.75.75 0 01-.75-.75v-1.5a.75.75 0 011.5 0v1.5a.75.75 0 01-.75.75z" />
+        </svg>
+      ) : (
+        /* Moon icon */
+        <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
+          <path fillRule="evenodd" d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z" clipRule="evenodd" />
+        </svg>
+      )}
+    </button>
+  );
+}