@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/chat/ui/__tests__/ChatWorkspace.test.tsx

@@ -0,0 +1,66 @@
+import { createRef } from "react";
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { UnifiedSessionState } from "../../hooks/useUnifiedSessions";
+import { ChatWorkspace } from "../ChatWorkspace";
+
+vi.mock("react-markdown", () => ({
+  default: ({ children }: { children: string }) => <div data-testid="markdown">{children}</div>,
+}));
+vi.mock("rehype-highlight", () => ({ default: () => {} }));
+vi.mock("remark-gfm", () => ({ default: () => {} }));
+
+function renderWorkspace(session: UnifiedSessionState) {
+  return render(
+    <ChatWorkspace
+      selectedSession={session}
+      selectedSessionDir=""
+      overallConnectionStatus="connected"
+      currentDir=""
+      error={null}
+      inputDisabled={false}
+      bottomRef={createRef<HTMLDivElement>()}
+      modelSettingsByAgent={{}}
+      onTerminateSession={vi.fn()}
+      onSend={vi.fn()}
+      onSendMessage={vi.fn()}
+      onDirChange={vi.fn()}
+      onModelSettingsChange={vi.fn()}
+    />,
+  );
+}
+
+function session(overrides: Partial<UnifiedSessionState> = {}): UnifiedSessionState {
+  return {
+    info: { id: "session-1", title: "Claude", createdAt: "2024-01-01" },
+    messages: [],
+    streaming: "",
+    isWaiting: false,
+    messagesLoaded: true,
+    agentId: "claude",
+    ...overrides,
+  };
+}
+
+describe("ChatWorkspace", () => {
+  it("renders malformed permission messages as system fallback", () => {
+    renderWorkspace(
+      session({
+        messages: [
+          {
+            id: "permission-1",
+            role: "permission",
+            content: "{bad json",
+            createdAt: new Date("2024-01-01"),
+          },
+        ],
+      }),
+    );
+
+    expect(screen.getByText("system")).toBeInTheDocument();
+    expect(screen.getByText(/권한 요청을 표시할 수 없습니다/)).toBeInTheDocument();
+    expect(screen.getByText(/\{bad json/)).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/diff/ui/DiffFileRow.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+
+import type { DiffLine } from "./DiffHunk";
+import { DiffHunk } from "./DiffHunk";
+import type { ChangeType } from "./FileChangeBadge";
+import { FileChangeBadge } from "./FileChangeBadge";
+
+export interface DiffFile {
+  filePath: string;
+  changeType: ChangeType;
+  additions: number;
+  deletions: number;
+  lines: DiffLine[];
+}
+
+interface Props {
+  file: DiffFile;
+  defaultOpen?: boolean;
+}
+
+export function DiffFileRow({ file, defaultOpen = false }: Props) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const fileName = file.filePath.split("/").pop() ?? file.filePath;
+  const dirName = file.filePath.includes("/")
+    ? file.filePath.slice(0, file.filePath.lastIndexOf("/"))
+    : "";
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray-900/[0.07] dark:border-white/[0.07]">
+      <button
+        type="button"
+        onClick={() => setOpen((p) => !p)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-900/[0.02] dark:hover:bg-white/[0.02]"
+      >
+        <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>
+
+        <FileChangeBadge type={file.changeType} />
+
+        <span className="min-w-0 flex-1 truncate text-[12px]">
+          {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] font-mono">
+          {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>
+
+      {open && file.lines.length > 0 && (
+        <div className="border-t border-gray-900/[0.05] dark:border-white/[0.05]">
+          <DiffHunk lines={file.lines} />
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/web/src/features/diff/ui/DiffHunk.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+export interface DiffLine {
+  type: "context" | "added" | "removed" | "hunk";
+  content: string;
+  oldLineNo?: number;
+  newLineNo?: number;
+}
+
+interface Props {
+  lines: DiffLine[];
+}
+
+const LINE_STYLE: Record<DiffLine["type"], string> = {
+  context: "text-gray-900/50 dark:text-white/40",
+  added:   "bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-400",
+  removed: "bg-red-500/[0.08] text-red-700 dark:text-red-400",
+  hunk:    "text-purple-500/70 dark:text-purple-400/70",
+};
+
+const LINE_NO_STYLE: Record<DiffLine["type"], string> = {
+  context: "text-gray-900/15 dark:text-white/15",
+  added:   "text-emerald-600/40 dark:text-emerald-400/40",
+  removed: "text-red-600/40 dark:text-red-400/40",
+  hunk:    "text-purple-500/30 dark:text-purple-400/30",
+};
+
+export function DiffHunk({ lines }: Props) {
+  return (
+    <div className="overflow-x-auto rounded-lg bg-gray-950/[0.03] dark:bg-white/[0.03]">
+      <table className="w-full border-collapse font-mono text-[11px] leading-relaxed">
+        <tbody>
+          {lines.map((line, i) => (
+            <tr key={i} className={LINE_STYLE[line.type]}>
+              {line.type === "hunk" ? (
+                <td colSpan={3} className="px-3 py-0.5 text-purple-500/70 dark:text-purple-400/70 select-none">
+                  {line.content}
+                </td>
+              ) : (
+                <>
+                  <td className={`w-10 select-none px-2 py-0.5 text-right ${LINE_NO_STYLE[line.type]}`}>
+                    {line.oldLineNo ?? ""}
+                  </td>
+                  <td className={`w-10 select-none px-2 py-0.5 text-right ${LINE_NO_STYLE[line.type]}`}>
+                    {line.newLineNo ?? ""}
+                  </td>
+                  <td className="px-3 py-0.5 whitespace-pre">
+                    <span className="mr-1 select-none opacity-50">
+                      {line.type === "added" ? "+" : line.type === "removed" ? "-" : " "}
+                    </span>
+                    {line.content}
+                  </td>
+                </>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/apps/web/src/features/diff/ui/FileChangeBadge.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+export type ChangeType = "added" | "modified" | "deleted" | "renamed";
+
+const 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" },
+};
+
+interface Props {
+  type: ChangeType;
+}
+
+export function FileChangeBadge({ type }: Props) {
+  const { label, className } = CONFIG[type];
+  return (
+    <span className={`inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium ${className}`}>
+      {label}
+    </span>
+  );
+}

package/apps/web/src/features/diff/ui/__tests__/DiffFileRow.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { DiffFileRow } from "../DiffFileRow";
+
+const file = {
+  filePath: "src/features/App.tsx",
+  changeType: "modified" as const,
+  additions: 2,
+  deletions: 1,
+  lines: [
+    { type: "hunk" as const, content: "@@" },
+    { type: "added" as const, content: "new line", newLineNo: 10 },
+  ],
+};
+
+describe("DiffFileRow", () => {
+  it("renders file metadata and opens diff by default when requested", () => {
+    render(<DiffFileRow file={file} defaultOpen={true} />);
+
+    expect(screen.getByText("src/features/")).toBeInTheDocument();
+    expect(screen.getByText("App.tsx")).toBeInTheDocument();
+    expect(screen.getByText("수정")).toBeInTheDocument();
+    expect(screen.getByText("+2")).toBeInTheDocument();
+    expect(screen.getByText("-1")).toBeInTheDocument();
+    expect(screen.getByText("new line")).toBeInTheDocument();
+  });
+
+  it("toggles diff contents when clicked", async () => {
+    const user = userEvent.setup();
+    render(<DiffFileRow file={file} />);
+
+    expect(screen.queryByText("new line")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByText("new line")).toBeInTheDocument();
+    await user.click(screen.getByRole("button"));
+    expect(screen.queryByText("new line")).not.toBeInTheDocument();
+  });
+});

package/apps/web/src/features/diff/ui/__tests__/DiffHunk.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { DiffHunk } from "../DiffHunk";
+
+describe("DiffHunk", () => {
+  it("renders hunk, context, added, and removed lines with line numbers", () => {
+    render(
+      <DiffHunk
+        lines={[
+          { type: "hunk", content: "@@ -1,2 +1,2 @@" },
+          { type: "context", content: "const a = 1;", oldLineNo: 1, newLineNo: 1 },
+          { type: "removed", content: "const b = 2;", oldLineNo: 2 },
+          { type: "added", content: "const b = 3;", newLineNo: 2 },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("@@ -1,2 +1,2 @@")).toBeInTheDocument();
+    expect(screen.getByText("const a = 1;")).toBeInTheDocument();
+    expect(screen.getByText("const b = 2;")).toBeInTheDocument();
+    expect(screen.getByText("const b = 3;")).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/diff/ui/__tests__/FileChangeBadge.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { FileChangeBadge } from "../FileChangeBadge";
+
+describe("FileChangeBadge", () => {
+  it.each([
+    ["added", "추가"],
+    ["modified", "수정"],
+    ["deleted", "삭제"],
+    ["renamed", "이동"],
+  ] as const)("renders %s label", (type, label) => {
+    render(<FileChangeBadge type={type} />);
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/fs/api/fs.api.ts

@@ -0,0 +1,14 @@
+import { SERVER_URL } from "@/lib/constants";
+
+export interface DirListResult {
+  path: string;
+  dirs: string[];
+}
+
+export async function fetchDirs(path?: string): Promise<DirListResult> {
+  const url = new URL(`${SERVER_URL}/fs/dirs`);
+  if (path) url.searchParams.set("path", path);
+  const res = await fetch(url.toString());
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}

package/apps/web/src/features/fs/hooks/useDirBrowser.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { fetchDirs } from "../api/fs.api";
+
+export interface DirBrowserState {
+  open: boolean;
+  currentPath: string;
+  dirs: string[];
+  loading: boolean;
+}
+
+export function useDirBrowser() {
+  const [open, setOpen] = useState(false);
+  const [currentPath, setCurrentPath] = useState("");
+  const [dirs, setDirs] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const navigate = useCallback(async (path?: string) => {
+    setLoading(true);
+    try {
+      const result = await fetchDirs(path);
+      setCurrentPath(result.path);
+      setDirs(result.dirs);
+    } catch {
+      setDirs([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const openBrowser = useCallback(
+    async (initialPath?: string) => {
+      setOpen(true);
+      await navigate(initialPath || undefined);
+    },
+    [navigate],
+  );
+
+  const closeBrowser = useCallback(() => setOpen(false), []);
+
+  const navigateUp = useCallback(() => {
+    const sep = currentPath.includes("/") ? "/" : "\\";
+    const idx = currentPath.lastIndexOf(sep);
+    if (idx > 0) void navigate(currentPath.slice(0, idx));
+  }, [currentPath, navigate]);
+
+  return { open, currentPath, dirs, loading, navigate, openBrowser, closeBrowser, navigateUp };
+}

package/apps/web/src/features/harness/api/__tests__/harness.api.test.ts

@@ -0,0 +1,73 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { deleteHarness, fetchAllHarnesses, fetchHarness, saveHarness } from "../harness.api";
+
+const mockFetch = vi.fn();
+
+beforeEach(() => { vi.stubGlobal("fetch", mockFetch); });
+afterEach(() => { vi.unstubAllGlobals(); });
+
+function ok(body?: unknown) {
+  return Promise.resolve({ ok: true, json: () => Promise.resolve(body) } as Response);
+}
+
+function err(status: number) {
+  return Promise.resolve({ ok: false, status } as Response);
+}
+
+describe("harness api", () => {
+  it("fetches all harnesses", async () => {
+    const body = [{ role: "frontend", ext: "md", content: "rules" }];
+    mockFetch.mockReturnValueOnce(ok(body));
+
+    await expect(fetchAllHarnesses()).resolves.toEqual(body);
+    expect(mockFetch).toHaveBeenCalledWith(expect.stringContaining("/harness"));
+  });
+
+  it("fetches one harness by role", async () => {
+    const body = { role: "backend", ext: "tsx", content: "code" };
+    mockFetch.mockReturnValueOnce(ok(body));
+
+    await expect(fetchHarness("backend")).resolves.toEqual(body);
+    expect(mockFetch).toHaveBeenCalledWith(expect.stringContaining("/harness/backend"));
+  });
+
+  it("saves harness content with PUT JSON", async () => {
+    const body = { role: "doc", ext: "md", content: "updated" };
+    mockFetch.mockReturnValueOnce(ok(body));
+
+    await expect(saveHarness("doc", "updated", "md")).resolves.toEqual(body);
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/harness/doc"),
+      {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: "updated", ext: "md" }),
+      },
+    );
+  });
+
+  it("deletes harness by role", async () => {
+    mockFetch.mockReturnValueOnce(Promise.resolve({ ok: true } as Response));
+
+    await deleteHarness("operation");
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/harness/operation"),
+      { method: "DELETE" },
+    );
+  });
+
+  it("throws for non-ok fetch/save responses", async () => {
+    mockFetch.mockReturnValueOnce(err(404));
+    await expect(fetchHarness("other")).rejects.toThrow("HTTP 404");
+
+    mockFetch.mockReturnValueOnce(err(500));
+    await expect(saveHarness("other", "x", "md")).rejects.toThrow("HTTP 500");
+  });
+
+  it("throws for non-ok delete responses", async () => {
+    mockFetch.mockReturnValueOnce(err(409));
+
+    await expect(deleteHarness("operation")).rejects.toThrow("HTTP 409");
+  });
+});

package/apps/web/src/features/harness/api/harness.api.ts

@@ -0,0 +1,46 @@
+import { SERVER_URL } from "@/lib/constants";
+
+export type HarnessRole = "common" | "frontend" | "backend" | "doc" | "operation" | "other";
+export type HarnessExt = "md" | "tsx";
+
+export interface Harness {
+  role: HarnessRole;
+  ext: HarnessExt;
+  content: string;
+}
+
+export const HARNESS_ROLES: { role: HarnessRole; label: string }[] = [
+  { role: "common",    label: "공통" },
+  { role: "frontend",  label: "Frontend" },
+  { role: "backend",   label: "Backend" },
+  { role: "doc",       label: "Doc" },
+  { role: "operation", label: "Operation" },
+  { role: "other",     label: "Other" },
+];
+
+export async function fetchAllHarnesses(): Promise<Harness[]> {
+  const res = await fetch(`${SERVER_URL}/harness`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function fetchHarness(role: HarnessRole): Promise<Harness> {
+  const res = await fetch(`${SERVER_URL}/harness/${role}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function saveHarness(role: HarnessRole, content: string, ext: HarnessExt): Promise<Harness> {
+  const res = await fetch(`${SERVER_URL}/harness/${role}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ content, ext }),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function deleteHarness(role: HarnessRole): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/harness/${role}`, { method: "DELETE" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}

package/apps/web/src/features/harness/hooks/__tests__/useHarness.test.ts

@@ -0,0 +1,65 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import * as harnessApi from "../../api/harness.api";
+import { useHarness } from "../useHarness";
+
+vi.mock("../../api/harness.api", () => ({
+  fetchHarness: vi.fn(),
+  saveHarness: vi.fn(),
+}));
+
+const mockFetchHarness = vi.mocked(harnessApi.fetchHarness);
+const mockSaveHarness = vi.mocked(harnessApi.saveHarness);
+
+afterEach(() => { vi.clearAllMocks(); });
+
+beforeEach(() => {
+  mockFetchHarness.mockResolvedValue({ role: "backend", ext: "md", content: "" });
+});
+
+describe("useHarness", () => {
+  it("does not load when role is null", () => {
+    const { result } = renderHook(() => useHarness(null));
+
+    expect(result.current.harness).toBeNull();
+    expect(mockFetchHarness).not.toHaveBeenCalled();
+  });
+
+  it("loads harness for a role and resets dirty state", async () => {
+    mockFetchHarness.mockResolvedValueOnce({ role: "frontend", ext: "tsx", content: "hello" });
+    const { result } = renderHook(() => useHarness("frontend"));
+
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.content).toBe("hello");
+    expect(result.current.ext).toBe("tsx");
+    expect(result.current.dirty).toBe(false);
+  });
+
+  it("marks dirty when content or extension changes", () => {
+    const { result } = renderHook(() => useHarness(null));
+
+    act(() => {
+      result.current.setContent("new");
+      result.current.setExt("tsx");
+    });
+
+    expect(result.current.content).toBe("new");
+    expect(result.current.ext).toBe("tsx");
+    expect(result.current.dirty).toBe(true);
+  });
+
+  it("saves current content and clears dirty", async () => {
+    mockSaveHarness.mockResolvedValueOnce({ role: "backend", ext: "md", content: "saved" });
+    const { result } = renderHook(() => useHarness("backend"));
+
+    act(() => { result.current.setContent("saved"); });
+    await act(async () => { await result.current.save(); });
+
+    expect(mockSaveHarness).toHaveBeenCalledWith("backend", "saved", "md");
+    expect(result.current.harness).toEqual({ role: "backend", ext: "md", content: "saved" });
+    expect(result.current.saving).toBe(false);
+    expect(result.current.dirty).toBe(false);
+  });
+});

package/apps/web/src/features/harness/hooks/useHarness.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import type { Harness, HarnessExt, HarnessRole } from "../api/harness.api";
+import { fetchHarness, saveHarness } from "../api/harness.api";
+
+export function useHarness(role: HarnessRole | null) {
+  const [harness, setHarness] = useState<Harness | null>(null);
+  const [content, setContent] = useState("");
+  const [ext, setExt] = useState<HarnessExt>("md");
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  const load = useCallback(async (r: HarnessRole) => {
+    setLoading(true);
+    try {
+      const data = await fetchHarness(r);
+      setHarness(data);
+      setContent(data.content);
+      setExt(data.ext);
+      setDirty(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (role) void load(role);
+  }, [role, load]);
+
+  const handleContentChange = (val: string) => {
+    setContent(val);
+    setDirty(true);
+  };
+
+  const handleExtChange = (newExt: HarnessExt) => {
+    setExt(newExt);
+    setDirty(true);
+  };
+
+  const save = useCallback(async () => {
+    if (!role) return;
+    setSaving(true);
+    try {
+      const saved = await saveHarness(role, content, ext);
+      setHarness(saved);
+      setDirty(false);
+    } finally {
+      setSaving(false);
+    }
+  }, [role, content, ext]);
+
+  return {
+    harness,
+    content,
+    ext,
+    loading,
+    saving,
+    dirty,
+    setContent: handleContentChange,
+    setExt: handleExtChange,
+    save,
+  };
+}