@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/chat/ui/PermissionCard.tsx

@@ -0,0 +1,37 @@
+interface Props {
+  tool: string;
+  command: string;
+  warning?: string;
+  onAllow: () => void;
+  onDeny: () => void;
+}
+
+export function PermissionCard({ tool, command, warning, onAllow, onDeny }: Props) {
+  return (
+    <div className="flex w-full justify-start gap-3">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-500/80 text-xs font-bold text-white">C</div>
+      <div className="max-w-[75%] min-w-0 rounded-2xl rounded-tl-sm border border-amber-500/25 bg-amber-500/[0.06] px-4 py-3 text-sm">
+        <p className="mb-2 font-semibold text-amber-700 dark:text-amber-300/90">실행 권한 요청</p>
+        <div className="mb-3 rounded-lg border border-gray-900/[0.06] bg-gray-900/[0.03] px-3 py-2 font-mono text-xs text-gray-900/70 dark:border-white/[0.06] dark:bg-white/[0.03] dark:text-white/70">
+          <span className="mr-2 text-gray-900/30 dark:text-white/30">{tool}</span>
+          {command}
+        </div>
+        {warning && <p className="mb-3 text-xs text-amber-600/80 dark:text-amber-400/70">⚠ {warning}</p>}
+        <div className="flex gap-2">
+          <button
+            onClick={onAllow}
+            className="rounded-lg border border-emerald-500/25 bg-emerald-500/[0.10] px-3 py-1.5 text-xs font-medium text-emerald-700 transition-colors hover:bg-emerald-500/[0.18] hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300"
+          >
+            허용
+          </button>
+          <button
+            onClick={onDeny}
+            className="rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] px-3 py-1.5 text-xs font-medium text-gray-900/45 transition-colors hover:bg-gray-900/[0.06] hover:text-gray-900/70 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/45 dark:hover:bg-white/[0.06] dark:hover:text-white/70"
+          >
+            거부
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/web/src/features/chat/ui/SessionSidebar.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import Link from "next/link";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import { isQuotaExceeded } from "@/lib/quota";
+import { ThemeToggle } from "@/lib/theme";
+import { AGENT_META } from "./AgentSelectModal";
+import type { ConnectionStatus, UnifiedSessionState } from "../hooks/useUnifiedSessions";
+
+const STATUS_DOT: Record<ConnectionStatus, string> = {
+  connected: "bg-emerald-400 shadow-[0_0_5px_#34d399]",
+  connecting: "bg-amber-400 animate-pulse",
+  disconnected: "bg-red-500",
+};
+
+const STATUS_LABEL: Record<ConnectionStatus, string> = {
+  connected: "연결됨",
+  connecting: "연결 중…",
+  disconnected: "연결 끊김",
+};
+
+interface SessionSidebarProps {
+  sessions: UnifiedSessionState[];
+  selectedSessionId: string | null;
+  overallConnectionStatus: ConnectionStatus;
+  hasNewTask: boolean;
+  menuOpenId: string | null;
+  renamingId: string | null;
+  renameValue: string;
+  menuRef: RefObject<HTMLDivElement | null>;
+  onSelectSession: (sessionId: string) => void;
+  onOpenAgentSelect: () => void;
+  onOpenTaskCreate: () => void;
+  onOpenTaskList: () => void;
+  onOpenStatus: () => void;
+  onOpenHarness: () => void;
+  onSetMenuOpenId: Dispatch<SetStateAction<string | null>>;
+  onStartRename: (sessionId: string, currentTitle: string) => void;
+  onRenameValueChange: (value: string) => void;
+  onConfirmRename: () => void;
+  onCancelRename: () => void;
+}
+
+export function SessionSidebar({
+  sessions,
+  selectedSessionId,
+  overallConnectionStatus,
+  hasNewTask,
+  menuOpenId,
+  renamingId,
+  renameValue,
+  menuRef,
+  onSelectSession,
+  onOpenAgentSelect,
+  onOpenTaskCreate,
+  onOpenTaskList,
+  onOpenStatus,
+  onOpenHarness,
+  onSetMenuOpenId,
+  onStartRename,
+  onRenameValueChange,
+  onConfirmRename,
+  onCancelRename,
+}: SessionSidebarProps) {
+  return (
+    <aside className="flex w-64 flex-shrink-0 flex-col border-r border-gray-900/[0.07] dark:border-white/[0.07]">
+      <div className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
+        <Link href="/" className="text-gray-900/30 transition-colors hover:text-gray-900/60 dark:text-white/30 dark:hover:text-white/60">
+          ←
+        </Link>
+        <span className="text-sm font-semibold text-gray-900/80 dark:text-white/80">JI CLI</span>
+        <div className="ml-auto flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={onOpenStatus}
+            title="에이전트 상태"
+            className="flex items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors hover:bg-gray-900/[0.05] dark:hover:bg-white/[0.05]"
+          >
+            <span className={`h-2 w-2 rounded-full ${STATUS_DOT[overallConnectionStatus]}`} />
+            <span className="text-xs text-gray-900/25 hover:text-gray-900/50 dark:text-white/25 dark:hover:text-white/50">
+              {STATUS_LABEL[overallConnectionStatus]}
+            </span>
+          </button>
+          <ThemeToggle />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 p-3">
+        <button
+          type="button"
+          onClick={onOpenAgentSelect}
+          disabled={overallConnectionStatus !== "connected"}
+          className="w-full rounded-lg bg-orange-600 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-500 disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          + 새 세션
+        </button>
+
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={onOpenTaskCreate}
+            className="flex-1 rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] py-2 text-sm font-medium text-gray-900/55 transition-colors hover:border-gray-900/[0.14] hover:bg-gray-900/[0.05] hover:text-gray-900/85 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/55 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.05] dark:hover:text-white/85"
+          >
+            ＋ 작업 추가
+          </button>
+          <button
+            type="button"
+            onClick={onOpenTaskList}
+            title="작업 목록"
+            className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] text-gray-900/35 transition-colors hover:border-gray-900/[0.14] hover:bg-gray-900/[0.05] hover:text-gray-900/70 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/35 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.05] dark:hover:text-white/70"
+          >
+            <svg viewBox="0 0 16 16" fill="currentColor" className="h-4 w-4">
+              <path fillRule="evenodd" d="M2 4.75A.75.75 0 012.75 4h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 3.5A.75.75 0 012.75 7.5h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 8.25zm0 3.5A.75.75 0 012.75 11h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 11.75z" clipRule="evenodd" />
+            </svg>
+            {hasNewTask && (
+              <span className="absolute right-0 top-0 h-2 w-2 rounded-full bg-orange-500 ring-2 ring-[#faf8f5] dark:ring-[#07090e]" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <nav className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+        {sessions.length === 0 ? (
+          <p className="py-8 text-center text-xs text-gray-900/20 dark:text-white/20">
+            {overallConnectionStatus === "connected" ? "세션이 없습니다" : "연결 중…"}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-0.5">
+            {sessions.map((session) => {
+              const lastMsg = session.messages[session.messages.length - 1];
+              const isSelected = selectedSessionId === session.info.id;
+              const agentMeta = AGENT_META[session.agentId];
+              const quotaDetected =
+                isQuotaExceeded(session.streaming) ||
+                (!!lastMsg && isQuotaExceeded(lastMsg.content));
+              const isRenaming = renamingId === session.info.id;
+              const isMenuOpen = menuOpenId === session.info.id;
+
+              return (
+                <li key={session.info.id} className="group relative">
+                  {isRenaming ? (
+                    <div className={[
+                      "rounded-lg px-3 py-2",
+                      isSelected
+                        ? "bg-gray-900/[0.06] dark:bg-white/[0.06]"
+                        : "bg-gray-900/[0.03] dark:bg-white/[0.03]",
+                    ].join(" ")}>
+                      <div className="flex items-center gap-1.5 pl-0">
+                        <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${agentMeta.dotColor}`} />
+                        <input
+                          autoFocus
+                          value={renameValue}
+                          onChange={(e) => onRenameValueChange(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              onConfirmRename();
+                            }
+                            if (e.key === "Escape") onCancelRename();
+                          }}
+                          onBlur={onConfirmRename}
+                          className="min-w-0 flex-1 border-b border-orange-500/50 bg-transparent pb-px text-xs font-medium text-gray-900/90 outline-none dark:text-white/90"
+                        />
+                      </div>
+                      <p className="mt-0.5 pl-3 text-[10px] text-gray-900/20 dark:text-white/20">
+                        Enter로 저장 · Esc로 취소
+                      </p>
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => onSelectSession(session.info.id)}
+                      className={[
+                        "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                        isSelected
+                          ? "bg-gray-900/[0.06] text-gray-900/90 dark:bg-white/[0.06] dark:text-white/90"
+                          : "text-gray-900/40 hover:bg-gray-900/[0.03] hover:text-gray-900/70 dark:text-white/40 dark:hover:bg-white/[0.03] dark:hover:text-white/70",
+                      ].join(" ")}
+                    >
+                      <div className="flex items-center justify-between gap-1">
+                        <div className="flex min-w-0 items-center gap-1.5 pr-5">
+                          <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${agentMeta.dotColor}`} />
+                          <span className="truncate text-xs font-medium">{session.info.title}</span>
+                        </div>
+                        {quotaDetected ? (
+                          <span className="flex shrink-0 items-center gap-0.5 rounded-full border border-amber-500/30 bg-amber-500/[0.08] px-1.5 py-0.5 text-[9px] font-medium text-amber-600 dark:text-amber-400">
+                            ⚠ 한도
+                          </span>
+                        ) : session.isWaiting ? (
+                          <span className="h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-orange-400" />
+                        ) : null}
+                      </div>
+                      <p className="mt-0.5 pl-3 text-[10px] text-gray-900/20 dark:text-white/20">
+                        {agentMeta.label} · {new Date(session.info.createdAt).toLocaleString()}
+                      </p>
+                      {lastMsg && (
+                        <p className="mt-0.5 pl-3 truncate text-[11px] text-gray-900/25 dark:text-white/25">
+                          {lastMsg.content.slice(0, 40) || "…"}
+                        </p>
+                      )}
+                    </button>
+                  )}
+
+                  {!isRenaming && (
+                    <div
+                      ref={isMenuOpen ? menuRef : undefined}
+                      className="absolute right-1.5 top-2 z-10"
+                    >
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onSetMenuOpenId(isMenuOpen ? null : session.info.id);
+                        }}
+                        className={[
+                          "flex h-5 w-5 items-center justify-center rounded transition-all",
+                          "text-gray-900/30 hover:bg-gray-900/[0.08] hover:text-gray-900/70",
+                          "dark:text-white/30 dark:hover:bg-white/[0.08] dark:hover:text-white/70",
+                          isMenuOpen
+                            ? "bg-gray-900/[0.06] opacity-100 dark:bg-white/[0.06]"
+                            : "opacity-0 group-hover:opacity-100",
+                        ].join(" ")}
+                        aria-label="세션 메뉴"
+                      >
+                        <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+                          <circle cx="3" cy="8" r="1.2" />
+                          <circle cx="8" cy="8" r="1.2" />
+                          <circle cx="13" cy="8" r="1.2" />
+                        </svg>
+                      </button>
+
+                      {isMenuOpen && (
+                        <div
+                          className={[
+                            "absolute right-0 top-full z-20 mt-1 min-w-[120px]",
+                            "rounded-lg border border-gray-900/[0.08] bg-white py-1",
+                            "shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+                            "dark:border-white/[0.08] dark:bg-[#0e1117]",
+                            "dark:shadow-[0_4px_16px_rgba(0,0,0,0.5)]",
+                          ].join(" ")}
+                          onMouseDown={(e) => e.stopPropagation()}
+                        >
+                          <button
+                            type="button"
+                            onClick={() => onStartRename(session.info.id, session.info.title)}
+                            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-gray-900/70 transition-colors hover:bg-gray-900/[0.05] hover:text-gray-900/90 dark:text-white/70 dark:hover:bg-white/[0.05] dark:hover:text-white/90"
+                          >
+                            <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3 shrink-0">
+                              <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.609zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z" />
+                            </svg>
+                            이름 바꾸기
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </nav>
+
+      <div className="shrink-0 border-t border-gray-900/[0.06] p-2 dark:border-white/[0.06]">
+        <button
+          type="button"
+          onClick={onOpenHarness}
+          title="하네스 설정"
+          className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-xs text-gray-900/35 transition-colors hover:bg-gray-900/[0.04] hover:text-gray-900/65 dark:text-white/35 dark:hover:bg-white/[0.04] dark:hover:text-white/65"
+        >
+          <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5 shrink-0">
+            <path fillRule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046a6.645 6.645 0 01.571.99c.014.03.014.066.006.104a.44.44 0 01-.07.15l-.686.858c-.357.447-.496.975-.446 1.488.016.165.025.332.025.5 0 .168-.009.335-.025.5-.05.513.089 1.04.446 1.488l.687.858c.044.055.072.11.07.15-.008.038-.008.074-.007.103a6.557 6.557 0 01-.57.99c-.02.03-.087.077-.196.047l-1.102-.303c-.56-.153-1.113-.008-1.53.27a6.36 6.36 0 01-.502.29c-.447.222-.85.629-.997 1.189l-.289 1.105c-.029.11-.1.143-.137.146a6.645 6.645 0 01-1.142 0c-.036-.003-.108-.036-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a6.36 6.36 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.557 6.557 0 01-.57-.99c-.014-.03-.014-.066-.007-.104a.44.44 0 01.07-.15l.687-.858c.357-.447.496-.975.446-1.488A6.5 6.5 0 012 8c0-.168.009-.335.025-.5.05-.513-.089-1.04-.446-1.488L.892 5.154a.44.44 0 01-.07-.15c-.008-.038-.008-.074.006-.103.116-.342.27-.67.37-.99.02-.03.087-.077.196-.047l1.102.303c.56.153 1.113.008 1.53-.27.16-.107.327-.204.501-.29.447-.222.85-.629.997-1.189l.289-1.105c.029-.11.1-.143.137-.146zM8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" clipRule="evenodd" />
+          </svg>
+          하네스 설정
+        </button>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { AgentSelectModal } from "../AgentSelectModal";
+
+const disconnectedAgents = {
+  claude: "disconnected",
+  gemini: "connected",
+  codex: "connecting",
+  opencode: "disconnected",
+} as const;
+
+describe("AgentSelectModal", () => {
+  it("disables agents that are not connected", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <AgentSelectModal
+        open={true}
+        onClose={vi.fn()}
+        onSelect={onSelect}
+        connectionStatusByAgent={disconnectedAgents}
+      />,
+    );
+
+    const claude = screen.getByRole("button", { name: /Claude Code/ });
+    const codex = screen.getByRole("button", { name: /Codex CLI/ });
+    expect(claude).toBeDisabled();
+    expect(codex).toBeDisabled();
+    expect(screen.getByText("연결 끊김")).toBeInTheDocument();
+    expect(screen.getByText("연결 중")).toBeInTheDocument();
+
+    await user.click(claude);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("selects and closes when a connected agent is clicked", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+
+    render(
+      <AgentSelectModal
+        open={true}
+        onClose={onClose}
+        onSelect={onSelect}
+        connectionStatusByAgent={disconnectedAgents}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Gemini CLI/ }));
+
+    expect(onSelect).toHaveBeenCalledWith("gemini");
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,134 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { ChatInput } from "../ChatInput";
+
+describe("ChatInput — rendering", () => {
+  it("renders textarea and send button", () => {
+    render(<ChatInput onSend={vi.fn()} />);
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "전송" })).toBeInTheDocument();
+  });
+
+  it("shows placeholder text", () => {
+    render(<ChatInput onSend={vi.fn()} placeholder="Write here" />);
+    expect(screen.getByPlaceholderText("Write here")).toBeInTheDocument();
+  });
+
+  it("send button is disabled when input is empty", () => {
+    render(<ChatInput onSend={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "전송" })).toBeDisabled();
+  });
+
+  it("disables textarea when disabled=true", () => {
+    render(<ChatInput onSend={vi.fn()} disabled />);
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+});
+
+describe("ChatInput — sending", () => {
+  it("calls onSend when Enter is pressed", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    render(<ChatInput onSend={onSend} />);
+
+    await user.type(screen.getByRole("textbox"), "hello{Enter}");
+
+    expect(onSend).toHaveBeenCalledWith("hello");
+  });
+
+  it("does not call onSend on Shift+Enter (newline)", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    render(<ChatInput onSend={onSend} />);
+
+    await user.type(screen.getByRole("textbox"), "hello{Shift>}{Enter}{/Shift}");
+
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it("clears input after sending", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSend={vi.fn()} />);
+    const textarea = screen.getByRole("textbox");
+
+    await user.type(textarea, "hello{Enter}");
+
+    expect(textarea).toHaveValue("");
+  });
+
+  it("does not call onSend when disabled", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    render(<ChatInput onSend={onSend} disabled />);
+
+    await user.type(screen.getByRole("textbox"), "hello");
+    await user.keyboard("{Enter}");
+
+    expect(onSend).not.toHaveBeenCalled();
+  });
+
+  it("trims whitespace and sends the trimmed value", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn();
+    render(<ChatInput onSend={onSend} />);
+
+    await user.type(screen.getByRole("textbox"), "  hello  {Enter}");
+
+    expect(onSend).toHaveBeenCalledWith("hello");
+  });
+});
+
+describe("ChatInput — slash menu", () => {
+  it("shows slash menu when / is typed", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSend={vi.fn()} />);
+
+    await user.type(screen.getByRole("textbox"), "/");
+
+    expect(screen.getByText("/status")).toBeInTheDocument();
+    expect(screen.getByText("/help")).toBeInTheDocument();
+  });
+
+  it("filters menu items by query", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSend={vi.fn()} />);
+
+    await user.type(screen.getByRole("textbox"), "/sta");
+
+    expect(screen.getByText("/status")).toBeInTheDocument();
+    expect(screen.queryByText("/help")).not.toBeInTheDocument();
+  });
+
+  it("hides menu on Escape", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSend={vi.fn()} />);
+
+    await user.type(screen.getByRole("textbox"), "/");
+    expect(screen.getByText("/status")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.queryByText("/status")).not.toBeInTheDocument();
+  });
+
+  it("selects a command on Tab and appends space", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSend={vi.fn()} />);
+
+    await user.type(screen.getByRole("textbox"), "/status");
+    await user.keyboard("{Tab}");
+
+    expect(screen.getByRole("textbox")).toHaveValue("/status ");
+  });
+
+  it("hides menu after command is selected", async () => {
+    const user = userEvent.setup();
+    render(<ChatInput onSend={vi.fn()} />);
+
+    await user.type(screen.getByRole("textbox"), "/status");
+    await user.keyboard("{Tab}");
+
+    expect(screen.queryByRole("list")).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,106 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ChatMessage, StreamingMessage, SystemMessage } from "../ChatMessage";
+import type { ChatMessage as ChatMessageType } from "../../hooks/useClaudeSessions";
+
+// react-markdown과 highlight 관련 패키지를 단순화하여 테스트 복잡도 낮춤
+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 msg(overrides: Partial<ChatMessageType>): ChatMessageType {
+  return {
+    id: "1",
+    role: "user",
+    content: "hello",
+    createdAt: new Date("2024-01-01"),
+    ...overrides,
+  };
+}
+
+describe("ChatMessage — user", () => {
+  it("renders content in blue bubble", () => {
+    render(<ChatMessage message={msg({ role: "user", content: "user text" })} />);
+    expect(screen.getByText("user text")).toBeInTheDocument();
+    expect(screen.getByText("U")).toBeInTheDocument();
+  });
+
+  it("renders user avatar on the right side", () => {
+    const { container } = render(<ChatMessage message={msg({ role: "user" })} />);
+    expect(container.firstChild).toHaveClass("justify-end");
+  });
+});
+
+describe("ChatMessage — assistant", () => {
+  it("renders content via markdown", () => {
+    render(<ChatMessage message={msg({ role: "assistant", content: "ai response" })} />);
+    expect(screen.getByTestId("markdown")).toHaveTextContent("ai response");
+  });
+
+  it("renders C avatar on the left side", () => {
+    const { container } = render(<ChatMessage message={msg({ role: "assistant" })} />);
+    expect(container.firstChild).toHaveClass("justify-start");
+  });
+
+  it("renders cost metadata when meta is provided", () => {
+    render(
+      <ChatMessage
+        message={msg({
+          role: "assistant",
+          meta: { result: "ok", isError: false, durationMs: 2300, costUsd: 0.0012 },
+        })}
+      />,
+    );
+    expect(screen.getByText(/2\.3s/)).toBeInTheDocument();
+    expect(screen.getByText(/\$0\.0012/)).toBeInTheDocument();
+  });
+
+  it("renders tool use card when toolUses present", () => {
+    render(
+      <ChatMessage
+        message={msg({
+          role: "assistant",
+          content: "",
+          toolUses: [{ tool: "Bash", input: { command: "git status" } }],
+        })}
+      />,
+    );
+    expect(screen.getByText("Bash")).toBeInTheDocument();
+    expect(screen.getByText("git status")).toBeInTheDocument();
+  });
+});
+
+describe("StreamingMessage", () => {
+  it("renders content via markdown when content is non-empty", () => {
+    render(<StreamingMessage content="partial response..." />);
+    expect(screen.getByTestId("markdown")).toHaveTextContent("partial response...");
+  });
+
+  it("shows bouncing dots when content is empty", () => {
+    const { container } = render(<StreamingMessage content="" />);
+    // 3 animated dots rendered as ● characters
+    expect(container.querySelectorAll(".animate-bounce")).toHaveLength(3);
+  });
+});
+
+describe("SystemMessage", () => {
+  it("renders content in monospace panel", () => {
+    render(<SystemMessage content="status output here" />);
+    expect(screen.getByText("status output here")).toBeInTheDocument();
+  });
+
+  it("shows system label with ⚡ icon", () => {
+    render(<SystemMessage content="x" />);
+    expect(screen.getByText("system")).toBeInTheDocument();
+    expect(screen.getByText("⚡")).toBeInTheDocument();
+  });
+
+  it("preserves whitespace (pre-wrap)", () => {
+    const { container } = render(<SystemMessage content="line1\nline2" />);
+    const content = container.querySelector(".whitespace-pre-wrap");
+    expect(content).toBeInTheDocument();
+  });
+});