@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/auth/ui/__tests__/LoginPanel.test.tsx

@@ -0,0 +1,105 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { LoginPanel } from "../LoginPanel";
+import type { LoginState } from "../../hooks/useClaudeAuth";
+
+function setup(state: LoginState, urls: string[] = [], output = "") {
+  const onStart = vi.fn();
+  const onCancel = vi.fn();
+  render(
+    <LoginPanel
+      loginState={state}
+      loginOutput={output}
+      loginUrls={urls}
+      onStart={onStart}
+      onCancel={onCancel}
+    />,
+  );
+  return { onStart, onCancel };
+}
+
+describe("LoginPanel — idle state", () => {
+  it("shows login button", () => {
+    setup("idle");
+    expect(screen.getByRole("button", { name: "Claude Code 로그인" })).toBeInTheDocument();
+  });
+
+  it("calls onStart when login button is clicked", async () => {
+    const user = userEvent.setup();
+    const { onStart } = setup("idle");
+    await user.click(screen.getByRole("button", { name: "Claude Code 로그인" }));
+    expect(onStart).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("LoginPanel — pending state (no URL yet)", () => {
+  it("shows spinner when no URLs yet", () => {
+    setup("pending");
+    expect(screen.getByText(/로그인 프로세스를 시작하는 중/)).toBeInTheDocument();
+  });
+
+  it("shows cancel button", () => {
+    setup("pending");
+    expect(screen.getByRole("button", { name: "취소" })).toBeInTheDocument();
+  });
+
+  it("calls onCancel when cancel is clicked", async () => {
+    const user = userEvent.setup();
+    const { onCancel } = setup("pending");
+    await user.click(screen.getByRole("button", { name: "취소" }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("LoginPanel — pending state (with URL)", () => {
+  it("renders auth URL as link", () => {
+    setup("pending", ["https://claude.ai/auth?code=abc"]);
+    const link = screen.getByRole("link", { name: "https://claude.ai/auth?code=abc" });
+    expect(link).toHaveAttribute("href", "https://claude.ai/auth?code=abc");
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
+  it("shows login output text", () => {
+    setup("pending", [], "Waiting for authentication...");
+    expect(screen.getByText("Waiting for authentication...")).toBeInTheDocument();
+  });
+});
+
+describe("LoginPanel — done state", () => {
+  it("shows success message", () => {
+    setup("done");
+    expect(screen.getByText("로그인 완료")).toBeInTheDocument();
+    expect(screen.getByText("잠시 후 자동으로 이동합니다…")).toBeInTheDocument();
+  });
+
+  it("does not show the login button", () => {
+    setup("done");
+    expect(screen.queryByRole("button", { name: "Claude Code 로그인" })).not.toBeInTheDocument();
+  });
+});
+
+describe("LoginPanel — error state", () => {
+  it("shows error message", () => {
+    setup("error");
+    expect(screen.getByText(/로그인 중 문제가 발생했습니다/)).toBeInTheDocument();
+  });
+
+  it("shows retry button", () => {
+    setup("error");
+    expect(screen.getByRole("button", { name: "다시 시도" })).toBeInTheDocument();
+  });
+
+  it("calls onStart when retry is clicked", async () => {
+    const user = userEvent.setup();
+    const { onStart } = setup("error");
+    await user.click(screen.getByRole("button", { name: "다시 시도" }));
+    expect(onStart).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows error output when provided", () => {
+    setup("error", [], "Error: timeout");
+    expect(screen.getByText("Error: timeout")).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/chat/api/__tests__/sessions.api.test.ts

@@ -0,0 +1,187 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  createSession,
+  deleteCodexSession,
+  deleteGeminiSession,
+  deleteSession,
+  fetchConversations,
+  fetchDBSessions,
+  saveConversation,
+  createCodexSession,
+} from "../sessions.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("fetchDBSessions", () => {
+  it("returns session list", async () => {
+    const sessions = [{ sessionId: "abc", title: "My Session", createdAt: "2024-01-01" }];
+    mockFetch.mockReturnValueOnce(ok(sessions));
+
+    const result = await fetchDBSessions();
+
+    expect(result).toHaveLength(1);
+    expect(result[0].sessionId).toBe("abc");
+    expect(mockFetch).toHaveBeenCalledWith(expect.stringContaining("/sessions"));
+  });
+
+  it("throws on HTTP error", async () => {
+    mockFetch.mockReturnValueOnce(err(500));
+    await expect(fetchDBSessions()).rejects.toThrow("HTTP 500");
+  });
+});
+
+describe("createSession", () => {
+  const mockSession = {
+    id: "sess-1",
+    title: "새 세션",
+    createdAt: "2024-01-01",
+  };
+
+  it("sends POST without workingDirectory when omitted", async () => {
+    mockFetch.mockReturnValueOnce(ok(mockSession));
+
+    await createSession();
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/agents/claude/sessions"),
+      expect.objectContaining({ method: "POST", body: JSON.stringify({}) }),
+    );
+  });
+
+  it("sends POST with workingDirectory when provided", async () => {
+    mockFetch.mockReturnValueOnce(ok(mockSession));
+
+    await createSession("/home/user/project");
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify({ workingDirectory: "/home/user/project" }),
+      }),
+    );
+  });
+
+  it("sends POST with model and reasoning when provided", async () => {
+    mockFetch.mockReturnValueOnce(ok(mockSession));
+
+    await createSession({ workingDirectory: "/home/user/project", model: "sonnet", reasoning: "high" });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        body: JSON.stringify({ workingDirectory: "/home/user/project", model: "sonnet", reasoning: "high" }),
+      }),
+    );
+  });
+
+  it("returns session info", async () => {
+    mockFetch.mockReturnValueOnce(ok(mockSession));
+    const result = await createSession();
+    expect(result.id).toBe("sess-1");
+  });
+
+  it("throws on HTTP error", async () => {
+    mockFetch.mockReturnValueOnce(err(400));
+    await expect(createSession()).rejects.toThrow("HTTP 400");
+  });
+});
+
+describe("createCodexSession", () => {
+  it("sends Codex model settings", async () => {
+    mockFetch.mockReturnValueOnce(ok({ id: "codex-1", title: "Codex", createdAt: "2024-01-01" }));
+
+    await createCodexSession({ model: "gpt-5.5", reasoning: "xhigh" });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/agents/codex/sessions"),
+      expect.objectContaining({
+        body: JSON.stringify({ model: "gpt-5.5", reasoning: "xhigh" }),
+      }),
+    );
+  });
+});
+
+describe("deleteSession", () => {
+  it("sends DELETE to correct URL", async () => {
+    mockFetch.mockReturnValueOnce(Promise.resolve({ ok: true } as Response));
+
+    await deleteSession("sess-123");
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/agents/claude/sessions/sess-123"),
+      expect.objectContaining({ method: "DELETE" }),
+    );
+  });
+
+  it("throws when Claude delete fails", async () => {
+    mockFetch.mockReturnValueOnce(err(500));
+
+    await expect(deleteSession("sess-123")).rejects.toThrow("HTTP 500");
+  });
+
+  it("throws when Gemini delete fails", async () => {
+    mockFetch.mockReturnValueOnce(err(404));
+
+    await expect(deleteGeminiSession("sess-123")).rejects.toThrow("HTTP 404");
+  });
+
+  it("throws when Codex delete fails", async () => {
+    mockFetch.mockReturnValueOnce(err(409));
+
+    await expect(deleteCodexSession("sess-123")).rejects.toThrow("HTTP 409");
+  });
+});
+
+describe("fetchConversations", () => {
+  it("returns conversation list for session", async () => {
+    const convos = [
+      { id: "c1", sessionId: "s1", promptId: "p1", content: "hello", agentModel: "claude", type: "user_message", createdAt: "2024-01-01" },
+    ];
+    mockFetch.mockReturnValueOnce(ok(convos));
+
+    const result = await fetchConversations("s1");
+
+    expect(result).toHaveLength(1);
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/conversations/session/s1"),
+    );
+  });
+
+  it("throws on HTTP error", async () => {
+    mockFetch.mockReturnValueOnce(err(404));
+    await expect(fetchConversations("bad-id")).rejects.toThrow("HTTP 404");
+  });
+});
+
+describe("saveConversation", () => {
+  it("fires POST without awaiting", () => {
+    mockFetch.mockReturnValueOnce(ok({}));
+
+    saveConversation("s1", "p1", "hello", "user_message");
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/conversations"),
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: "s1",
+          promptId: "p1",
+          content: "hello",
+          agentModel: "claude",
+          type: "user_message",
+        }),
+      }),
+    );
+  });
+});

package/apps/web/src/features/chat/api/sessions.api.ts

@@ -0,0 +1,161 @@
+import { SERVER_URL } from "@/lib/constants";
+
+// ─── 타입 ────────────────────────────────────────────────────────────────────
+
+export interface SessionInfo {
+  id: string;
+  title: string;
+  claudeSessionId?: string | null;
+  status?: string;
+  workingDirectory?: string;
+  model?: string | null;
+  reasoning?: string | null;
+  createdAt: string;
+}
+
+export interface CreateAgentSessionPayload {
+  workingDirectory?: string;
+  model?: string;
+  reasoning?: string;
+}
+
+export interface DBSession {
+  sessionId: string;
+  title: string;
+  createdAt: string;
+}
+
+export interface DBConversation {
+  id: string;
+  sessionId: string;
+  promptId: string;
+  content: string;
+  agentModel: string;
+  type: "user_message" | "agent_message";
+  createdAt: string;
+}
+
+export type ConversationType = "user_message" | "agent_message";
+
+// ─── Sessions ────────────────────────────────────────────────────────────────
+
+export async function fetchDBSessions(agentType?: string): Promise<DBSession[]> {
+  const url = agentType
+    ? `${SERVER_URL}/sessions?agentType=${agentType}`
+    : `${SERVER_URL}/sessions`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+function compactPayload(payload?: CreateAgentSessionPayload | string): CreateAgentSessionPayload {
+  if (typeof payload === "string") {
+    return payload ? { workingDirectory: payload } : {};
+  }
+  return Object.fromEntries(
+    Object.entries(payload ?? {}).filter(([, value]) => value !== undefined && value !== ""),
+  ) as CreateAgentSessionPayload;
+}
+
+export async function createSession(payload?: CreateAgentSessionPayload | string): Promise<SessionInfo> {
+  const res = await fetch(`${SERVER_URL}/agents/claude/sessions`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(compactPayload(payload)),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function deleteSession(id: string): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/agents/claude/sessions/${id}`, { method: "DELETE" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}
+
+export async function createGeminiSession(workingDirectory?: string): Promise<SessionInfo> {
+  const res = await fetch(`${SERVER_URL}/agents/gemini/sessions`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(workingDirectory ? { workingDirectory } : {}),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function deleteGeminiSession(id: string): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/agents/gemini/sessions/${id}`, { method: "DELETE" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}
+
+export function saveGeminiConversation(
+  sessionId: string,
+  promptId: string,
+  content: string,
+  type: ConversationType,
+): void {
+  void fetch(`${SERVER_URL}/conversations`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ sessionId, promptId, content, agentModel: "gemini", type }),
+  }).catch(() => undefined);
+}
+
+export async function createCodexSession(payload?: CreateAgentSessionPayload | string): Promise<SessionInfo> {
+  const res = await fetch(`${SERVER_URL}/agents/codex/sessions`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(compactPayload(payload)),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export async function deleteCodexSession(id: string): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/agents/codex/sessions/${id}`, { method: "DELETE" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}
+
+export function saveCodexConversation(
+  sessionId: string,
+  promptId: string,
+  content: string,
+  type: ConversationType,
+): void {
+  void fetch(`${SERVER_URL}/conversations`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ sessionId, promptId, content, agentModel: "codex", type }),
+  }).catch(() => undefined);
+}
+
+// ─── Session Title ───────────────────────────────────────────────────────────
+
+export async function updateSessionTitle(sessionId: string, title: string): Promise<void> {
+  const res = await fetch(`${SERVER_URL}/sessions/${sessionId}/title`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title }),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+}
+
+// ─── Conversations ───────────────────────────────────────────────────────────
+
+export async function fetchConversations(sessionId: string): Promise<DBConversation[]> {
+  const res = await fetch(`${SERVER_URL}/conversations/session/${sessionId}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export function saveConversation(
+  sessionId: string,
+  promptId: string,
+  content: string,
+  type: ConversationType,
+): void {
+  void fetch(`${SERVER_URL}/conversations`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ sessionId, promptId, content, agentModel: "claude", type }),
+  }).catch(() => undefined);
+}

package/apps/web/src/features/chat/container/ClaudePageContainer.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { useClaudeAuth } from "@/features/auth/hooks/useClaudeAuth";
+import { HarnessModal } from "@/features/harness/ui/HarnessModal";
+import { AgentStatusModal } from "@/features/status/ui/AgentStatusModal";
+import { TaskCreateModal } from "@/features/tasks/ui/TaskCreateModal";
+import { TaskListModal } from "@/features/tasks/ui/TaskListModal";
+import { useTaskNotification } from "@/features/tasks/hooks/useTaskNotification";
+import { AgentSelectModal } from "../ui/AgentSelectModal";
+import type { AgentId } from "../ui/AgentSelectModal";
+import { ChatWorkspace } from "../ui/ChatWorkspace";
+import { CheckingSkeleton } from "../ui/CheckingSkeleton";
+import { ClaudeLoginView } from "../ui/ClaudeLoginView";
+import { SessionSidebar } from "../ui/SessionSidebar";
+import { useAgentModelSettings } from "../hooks/useAgentModelSettings";
+import { useSessionCommand } from "../hooks/useSessionCommand";
+import { useSessionRename } from "../hooks/useSessionRename";
+import { useSessionWorkingDirectories } from "../hooks/useSessionWorkingDirectories";
+import { useUnifiedSessions } from "../hooks/useUnifiedSessions";
+
+export function ClaudePageContainer() {
+  const { authState, loginState, loginOutput, loginUrls, startLogin, cancelLogin, checkAuth } =
+    useClaudeAuth();
+
+  useEffect(() => {
+    if (loginState === "done") void checkAuth();
+  }, [loginState, checkAuth]);
+
+  const {
+    sessions,
+    selectedSession,
+    selectedSessionId,
+    selectedConnectionStatus,
+    overallConnectionStatus,
+    error,
+    createSession,
+    selectSession,
+    sendMessage,
+    terminateSession,
+    renameSession,
+    injectClaudeMessage,
+  } = useUnifiedSessions();
+
+  const { sessionDirs, currentDir, handleDirChange, assignDirectoryToSession } =
+    useSessionWorkingDirectories(selectedSessionId);
+  const { settingsByAgent, updateSettings } = useAgentModelSettings();
+  const rename = useSessionRename(renameSession);
+  const handleSend = useSessionCommand({
+    selectedSession,
+    selectedSessionId,
+    sendMessage,
+    modelSettingsByAgent: settingsByAgent,
+    injectClaudeMessage,
+  });
+  const { hasNew, clearNew } = useTaskNotification();
+
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const [taskModalOpen, setTaskModalOpen] = useState(false);
+  const [taskListOpen, setTaskListOpen] = useState(false);
+  const [agentSelectOpen, setAgentSelectOpen] = useState(false);
+  const [statusModalOpen, setStatusModalOpen] = useState(false);
+  const [harnessModalOpen, setHarnessModalOpen] = useState(false);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [selectedSession?.messages, selectedSession?.streaming]);
+
+  const handleOpenTaskList = () => {
+    setTaskListOpen(true);
+    clearNew();
+  };
+
+  const handleAgentSelect = (agentId: AgentId) => {
+    const dir = currentDir || undefined;
+    createSession(agentId, dir, settingsByAgent[agentId]).then((sessionId) => {
+      if (sessionId && currentDir) {
+        assignDirectoryToSession(sessionId, currentDir);
+      }
+    });
+  };
+
+  const inputDisabled =
+    !selectedSession || selectedSession.isWaiting || selectedConnectionStatus !== "connected";
+
+  if (authState === "checking") return <CheckingSkeleton />;
+
+  if (authState === "unauthenticated") {
+    return (
+      <ClaudeLoginView
+        loginState={loginState}
+        loginOutput={loginOutput}
+        loginUrls={loginUrls}
+        onStart={startLogin}
+        onCancel={cancelLogin}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-screen bg-[#faf8f5] text-gray-900 dark:bg-[#07090e] dark:text-white">
+      <AgentSelectModal
+        open={agentSelectOpen}
+        onClose={() => setAgentSelectOpen(false)}
+        onSelect={handleAgentSelect}
+      />
+      <AgentStatusModal open={statusModalOpen} onClose={() => setStatusModalOpen(false)} />
+      <HarnessModal open={harnessModalOpen} onClose={() => setHarnessModalOpen(false)} />
+      <TaskCreateModal open={taskModalOpen} onClose={() => setTaskModalOpen(false)} />
+      <TaskListModal open={taskListOpen} onClose={() => setTaskListOpen(false)} />
+
+      <SessionSidebar
+        sessions={sessions}
+        selectedSessionId={selectedSessionId}
+        overallConnectionStatus={overallConnectionStatus}
+        hasNewTask={hasNew}
+        menuOpenId={rename.menuOpenId}
+        renamingId={rename.renamingId}
+        renameValue={rename.renameValue}
+        menuRef={rename.menuRef}
+        onSelectSession={selectSession}
+        onOpenAgentSelect={() => setAgentSelectOpen(true)}
+        onOpenTaskCreate={() => setTaskModalOpen(true)}
+        onOpenTaskList={handleOpenTaskList}
+        onOpenStatus={() => setStatusModalOpen(true)}
+        onOpenHarness={() => setHarnessModalOpen(true)}
+        onSetMenuOpenId={rename.setMenuOpenId}
+        onStartRename={rename.startRename}
+        onRenameValueChange={rename.setRenameValue}
+        onConfirmRename={rename.confirmRename}
+        onCancelRename={rename.cancelRename}
+      />
+
+      <ChatWorkspace
+        selectedSession={selectedSession}
+        selectedSessionDir={selectedSession ? (sessionDirs[selectedSession.info.id] ?? "") : ""}
+        overallConnectionStatus={overallConnectionStatus}
+        currentDir={currentDir}
+        error={error}
+        inputDisabled={inputDisabled}
+        bottomRef={bottomRef}
+        modelSettingsByAgent={settingsByAgent}
+        onTerminateSession={terminateSession}
+        onSend={handleSend}
+        onSendMessage={sendMessage}
+        onDirChange={handleDirChange}
+        onModelSettingsChange={updateSettings}
+      />
+    </div>
+  );
+}