@jcjeon/integration-cli 0.2.0

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

@@ -0,0 +1,162 @@
+"use client";
+
+import { type KeyboardEvent, useEffect, useRef, useState } from "react";
+
+// ─── 슬래시 커맨드 목록 ──────────────────────────────────────────────────────
+
+const SLASH_COMMANDS = [
+  { command: "/status",        description: "계정 및 시스템 상태" },
+  { command: "/help",          description: "도움말 표시" },
+  { command: "/clear",         description: "대화 내역 지우기" },
+  { command: "/compact",       description: "대화 요약 후 압축" },
+  { command: "/config",        description: "설정 보기 / 편집" },
+  { command: "/cost",          description: "현재 세션 비용 표시" },
+  { command: "/doctor",        description: "Claude 환경 진단" },
+  { command: "/exit",          description: "세션 종료" },
+  { command: "/memory",        description: "메모리 파일 관리" },
+  { command: "/model",         description: "모델 변경" },
+  { command: "/permissions",   description: "도구 권한 관리" },
+  { command: "/pr_comments",   description: "PR 코멘트 가져오기" },
+  { command: "/release-notes", description: "릴리즈 노트 표시" },
+  { command: "/review",        description: "코드 리뷰" },
+  { command: "/terminal-setup",description: "터미널 키 바인딩 설정" },
+  { command: "/vim",           description: "Vim 모드 전환" },
+] as const;
+
+// ─── SlashMenu ───────────────────────────────────────────────────────────────
+
+interface SlashMenuProps {
+  query: string;
+  activeIndex: number;
+  onSelect: (command: string) => void;
+}
+
+function SlashMenu({ query, activeIndex, onSelect }: SlashMenuProps) {
+  const filtered = SLASH_COMMANDS.filter((c) =>
+    c.command.toLowerCase().startsWith("/" + query.toLowerCase()),
+  );
+  if (filtered.length === 0) return null;
+
+  return (
+    <ul className="absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-xl border border-gray-900/[0.08] bg-gray-50 shadow-[0_8px_32px_-4px_rgba(0,0,0,0.12)] dark:border-white/[0.08] dark:bg-[#0d1117] dark:shadow-[0_8px_32px_-4px_rgba(0,0,0,0.5)]">
+      {filtered.map((item, i) => (
+        <li key={item.command}>
+          <button
+            type="button"
+            onMouseDown={(e) => { e.preventDefault(); onSelect(item.command); }}
+            className={[
+              "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+              i === activeIndex
+                ? "bg-gray-900/[0.06] text-gray-900/90 dark:bg-white/[0.06] dark:text-white/90"
+                : "text-gray-900/55 hover:bg-gray-900/[0.03] hover:text-gray-900/80 dark:text-white/55 dark:hover:bg-white/[0.03] dark:hover:text-white/80",
+            ].join(" ")}
+          >
+            <span className="font-mono text-orange-500 dark:text-orange-400">{item.command}</span>
+            <span className="text-xs text-gray-900/25 dark:text-white/25">{item.description}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ─── ChatInput ───────────────────────────────────────────────────────────────
+
+interface Props {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function ChatInput({ onSend, disabled = false, placeholder = "메시지 입력…" }: Props) {
+  const [value, setValue] = useState("");
+  const [slashQuery, setSlashQuery] = useState<string | null>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const filteredCount =
+    slashQuery !== null
+      ? SLASH_COMMANDS.filter((c) =>
+          c.command.toLowerCase().startsWith("/" + slashQuery.toLowerCase()),
+        ).length
+      : 0;
+
+  const submit = () => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setValue("");
+    setSlashQuery(null);
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+  };
+
+  const handleChange = (raw: string) => {
+    setValue(raw);
+    const match = raw.match(/^\/(\S*)$/);
+    if (match) { setSlashQuery(match[1]); setActiveIndex(0); }
+    else setSlashQuery(null);
+  };
+
+  const selectCommand = (command: string) => {
+    setValue(command + " ");
+    setSlashQuery(null);
+    textareaRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (slashQuery !== null && filteredCount > 0) {
+      if (e.key === "ArrowDown") { e.preventDefault(); setActiveIndex((i) => (i + 1) % filteredCount); return; }
+      if (e.key === "ArrowUp")   { e.preventDefault(); setActiveIndex((i) => (i - 1 + filteredCount) % filteredCount); return; }
+      if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
+        e.preventDefault();
+        const filtered = SLASH_COMMANDS.filter((c) =>
+          c.command.toLowerCase().startsWith("/" + slashQuery.toLowerCase()),
+        );
+        if (filtered[activeIndex]) selectCommand(filtered[activeIndex].command);
+        return;
+      }
+      if (e.key === "Escape") { e.preventDefault(); setSlashQuery(null); return; }
+    }
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); }
+  };
+
+  const handleInput = () => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+  };
+
+  useEffect(() => { if (value === "") setSlashQuery(null); }, [value]);
+
+  return (
+    <div className="relative">
+      {slashQuery !== null && (
+        <SlashMenu query={slashQuery} activeIndex={activeIndex} onSelect={selectCommand} />
+      )}
+      <div className="flex items-end gap-3 rounded-2xl border border-gray-900/[0.08] bg-gray-900/[0.03] px-4 py-3 transition-colors focus-within:border-gray-900/[0.14] dark:border-white/[0.08] dark:bg-white/[0.03] dark:focus-within:border-white/[0.14]">
+        <textarea
+          ref={textareaRef}
+          rows={1}
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onInput={handleInput}
+          disabled={disabled}
+          placeholder={placeholder}
+          className="max-h-[200px] flex-1 resize-none bg-transparent text-sm text-gray-900/85 placeholder-gray-900/25 outline-none disabled:cursor-not-allowed dark:text-white/85 dark:placeholder-white/25"
+        />
+        <button
+          onClick={submit}
+          disabled={disabled || !value.trim()}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-600 transition-colors hover:bg-orange-500 disabled:cursor-not-allowed disabled:opacity-25"
+          aria-label="전송"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4 rotate-90 text-white">
+            <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,204 @@
+import rehypeHighlight from "rehype-highlight";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { isQuotaExceeded } from "@/lib/quota";
+import type { ChatMessage as ChatMessageType, ToolUseBlock } from "../hooks/useClaudeSessions";
+import { AGENT_AVATAR } from "./AgentSelectModal";
+import type { AgentId } from "./AgentSelectModal";
+
+// ─── Markdown ────────────────────────────────────────────────────────────────
+
+function MarkdownContent({ content }: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeHighlight]}
+      components={{
+        p({ children }) { return <p className="mb-3 leading-7 last:mb-0">{children}</p>; },
+        h1({ children }) { return <h1 className="mt-5 mb-3 text-xl font-bold first:mt-0">{children}</h1>; },
+        h2({ children }) { return <h2 className="mt-4 mb-2 text-lg font-semibold first:mt-0">{children}</h2>; },
+        h3({ children }) { return <h3 className="mt-3 mb-2 text-base font-semibold first:mt-0">{children}</h3>; },
+        pre({ children }) {
+          return (
+            <pre className="my-3 overflow-x-auto rounded-lg border border-gray-900/[0.06] bg-gray-900/[0.03] p-4 text-xs leading-relaxed dark:border-white/[0.06] dark:bg-white/[0.03]">
+              {children}
+            </pre>
+          );
+        },
+        code({ children, className }) {
+          const isBlock = className?.startsWith("language-");
+          if (isBlock) return <code className={className}>{children}</code>;
+          return (
+            <code className="rounded bg-gray-900/[0.07] px-1.5 py-0.5 font-mono text-xs text-orange-600 dark:bg-white/[0.07] dark:text-orange-300">
+              {children}
+            </code>
+          );
+        },
+        ul({ children }) { return <ul className="mb-3 ml-4 list-disc space-y-1">{children}</ul>; },
+        ol({ children }) { return <ol className="mb-3 ml-4 list-decimal space-y-1">{children}</ol>; },
+        li({ children }) { return <li className="leading-7">{children}</li>; },
+        blockquote({ children }) {
+          return (
+            <blockquote className="my-3 border-l-2 border-gray-900/[0.15] pl-4 text-gray-900/45 italic dark:border-white/[0.15] dark:text-white/45">
+              {children}
+            </blockquote>
+          );
+        },
+        hr() { return <hr className="my-4 border-gray-900/[0.08] dark:border-white/[0.08]" />; },
+        table({ children }) {
+          return <div className="my-3 overflow-x-auto"><table className="w-full border-collapse text-sm">{children}</table></div>;
+        },
+        th({ children }) {
+          return (
+            <th className="border border-gray-900/[0.08] bg-gray-900/[0.04] px-3 py-2 text-left font-semibold dark:border-white/[0.08] dark:bg-white/[0.04]">
+              {children}
+            </th>
+          );
+        },
+        td({ children }) {
+          return (
+            <td className="border border-gray-900/[0.07] px-3 py-2 dark:border-white/[0.07]">
+              {children}
+            </td>
+          );
+        },
+        strong({ children }) {
+          return (
+            <strong className="font-semibold text-gray-900/90 dark:text-white/90">
+              {children}
+            </strong>
+          );
+        },
+        a({ href, children }) {
+          return (
+            <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline underline-offset-2 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
+              {children}
+            </a>
+          );
+        },
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}
+
+// ─── ToolUseCard ─────────────────────────────────────────────────────────────
+
+function ToolUseCard({ toolUse }: { toolUse: ToolUseBlock }) {
+  const primaryInput = Object.values(toolUse.input)[0];
+  const preview = typeof primaryInput === "string" ? primaryInput : JSON.stringify(toolUse.input);
+  return (
+    <div className="mb-2 overflow-hidden rounded-lg border border-gray-900/[0.07] text-xs dark:border-white/[0.07]">
+      <div className="flex items-center gap-1.5 border-b border-gray-900/[0.07] bg-gray-900/[0.03] px-3 py-1.5 dark:border-white/[0.07] dark:bg-white/[0.03]">
+        <span className="text-gray-900/30 dark:text-white/30">⚙</span>
+        <span className="font-mono font-medium text-gray-900/55 dark:text-white/55">{toolUse.tool}</span>
+      </div>
+      <pre className="overflow-x-auto bg-gray-900/[0.02] px-3 py-2 font-mono text-emerald-700 dark:bg-white/[0.02] dark:text-emerald-400/80 whitespace-pre-wrap break-all">
+        {preview}
+      </pre>
+    </div>
+  );
+}
+
+// ─── QuotaBadge ──────────────────────────────────────────────────────────────
+
+function QuotaBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/[0.08] px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400">
+      <svg viewBox="0 0 16 16" fill="currentColor" className="h-2.5 w-2.5 shrink-0">
+        <path fillRule="evenodd" d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clipRule="evenodd" />
+      </svg>
+      한도 초과
+    </span>
+  );
+}
+
+// ─── AgentAvatar ─────────────────────────────────────────────────────────────
+
+function AgentAvatar({ agentId }: { agentId?: AgentId }) {
+  const cfg = agentId ? AGENT_AVATAR[agentId] : AGENT_AVATAR.claude;
+  return (
+    <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full overflow-hidden ${cfg.bg}`}>
+      {cfg.icon}
+    </div>
+  );
+}
+
+// ─── ChatMessage ─────────────────────────────────────────────────────────────
+
+export function ChatMessage({ message, agentId }: { message: ChatMessageType; agentId?: AgentId }) {
+  const isUser = message.role === "user";
+
+  if (isUser) {
+    return (
+      <div className="flex w-full justify-end gap-3">
+        <div className="max-w-[75%] rounded-2xl rounded-tr-sm bg-blue-600/90 px-4 py-2.5 text-sm leading-relaxed break-words whitespace-pre-wrap text-white">
+          {message.content}
+        </div>
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-600/80 text-xs font-bold text-white">U</div>
+      </div>
+    );
+  }
+
+  const quota = isQuotaExceeded(message.content);
+
+  return (
+    <div className="flex w-full justify-start gap-3">
+      <AgentAvatar agentId={agentId} />
+      <div className="max-w-[75%] min-w-0 rounded-2xl rounded-tl-sm border border-gray-900/[0.06] bg-gray-900/[0.04] px-4 py-3 text-sm text-gray-900/80 dark:border-white/[0.06] dark:bg-white/[0.04] dark:text-white/80">
+        {message.toolUses?.map((t, i) => <ToolUseCard key={i} toolUse={t} />)}
+        {message.content && <MarkdownContent content={message.content} />}
+        {quota && <div className="mt-2"><QuotaBadge /></div>}
+        {!quota && message.meta && (
+          <p className="mt-2 text-right text-xs text-gray-900/20 dark:text-white/20">
+            {(message.meta.durationMs / 1000).toFixed(1)}s · ${message.meta.costUsd.toFixed(4)}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── StreamingMessage ────────────────────────────────────────────────────────
+
+export function StreamingMessage({ content, agentId }: { content: string; agentId?: AgentId }) {
+  const quota = isQuotaExceeded(content);
+
+  return (
+    <div className="flex w-full justify-start gap-3">
+      <AgentAvatar agentId={agentId} />
+      <div className="max-w-[75%] min-w-0 rounded-2xl rounded-tl-sm border border-gray-900/[0.06] bg-gray-900/[0.04] px-4 py-3 text-sm text-gray-900/80 dark:border-white/[0.06] dark:bg-white/[0.04] dark:text-white/80">
+        {content ? (
+          <>
+            <MarkdownContent content={content} />
+            {quota && <div className="mt-2"><QuotaBadge /></div>}
+          </>
+        ) : (
+          <span className="flex gap-1 py-1">
+            <span className="animate-bounce text-gray-900/40 dark:text-white/40">●</span>
+            <span className="animate-bounce text-gray-900/40 [animation-delay:0.15s] dark:text-white/40">●</span>
+            <span className="animate-bounce text-gray-900/40 [animation-delay:0.3s] dark:text-white/40">●</span>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── SystemMessage ───────────────────────────────────────────────────────────
+
+export function SystemMessage({ content }: { content: string }) {
+  return (
+    <div className="flex w-full justify-center">
+      <div className="w-full max-w-[90%] overflow-hidden rounded-xl border border-gray-900/[0.07] bg-gray-900/[0.02] text-xs dark:border-white/[0.07] dark:bg-white/[0.02]">
+        <div className="flex items-center gap-1.5 border-b border-gray-900/[0.07] px-3 py-1.5 dark:border-white/[0.07]">
+          <span className="text-gray-900/25 dark:text-white/25">⚡</span>
+          <span className="font-mono font-medium text-gray-900/35 dark:text-white/35">system</span>
+        </div>
+        <div className="px-4 py-3 font-mono text-gray-900/55 dark:text-white/55 whitespace-pre-wrap">{content}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,207 @@
+"use client";
+
+import type { RefObject } from "react";
+
+import { WorkingDirPicker } from "@/components/ui/WorkingDirPicker";
+import type { PermissionPrompt } from "@/lib/ansi";
+import type { ConnectionStatus, UnifiedSessionState } from "../hooks/useUnifiedSessions";
+import type { AgentModelSettings, AgentModelSettingsByAgent } from "../lib/agentModelOptions";
+import { AGENT_META } from "./AgentSelectModal";
+import type { AgentId } from "./AgentSelectModal";
+import { AgentModelPicker } from "./AgentModelPicker";
+import { ChatInput } from "./ChatInput";
+import { ChatMessage, StreamingMessage, SystemMessage } from "./ChatMessage";
+import { PermissionCard } from "./PermissionCard";
+
+interface ChatWorkspaceProps {
+  selectedSession: UnifiedSessionState | null;
+  selectedSessionDir: string;
+  overallConnectionStatus: ConnectionStatus;
+  currentDir: string;
+  error: string | null;
+  inputDisabled: boolean;
+  bottomRef: RefObject<HTMLDivElement | null>;
+  modelSettingsByAgent: AgentModelSettingsByAgent;
+  onTerminateSession: (sessionId: string) => void;
+  onSend: (text: string) => void;
+  onSendMessage: (sessionId: string, text: string) => void;
+  onDirChange: (path: string) => void;
+  onModelSettingsChange: (agentId: AgentId, settings: AgentModelSettings) => void;
+}
+
+function parsePermissionPrompt(content: string): PermissionPrompt | null {
+  try {
+    const parsed = JSON.parse(content) as Partial<PermissionPrompt>;
+    if (typeof parsed.tool !== "string" || typeof parsed.command !== "string") {
+      return null;
+    }
+    return {
+      tool: parsed.tool,
+      command: parsed.command,
+      warning: typeof parsed.warning === "string" ? parsed.warning : undefined,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function ChatWorkspace({
+  selectedSession,
+  selectedSessionDir,
+  overallConnectionStatus,
+  currentDir,
+  error,
+  inputDisabled,
+  bottomRef,
+  modelSettingsByAgent,
+  onTerminateSession,
+  onSend,
+  onSendMessage,
+  onDirChange,
+  onModelSettingsChange,
+}: ChatWorkspaceProps) {
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      {!selectedSession ? (
+        <div className="relative flex flex-1 flex-col items-center justify-center gap-4">
+          <div className="pointer-events-none absolute inset-0 overflow-hidden">
+            <div className="absolute left-1/2 top-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/[0.04] blur-[120px]" />
+          </div>
+          <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-orange-500/[0.08] dark:border-white/[0.08]">
+            <svg viewBox="0 0 24 24" fill="currentColor" className="h-7 w-7 text-[#D97757]">
+              <path d="M13.827 3.816L20.05 20.2h-3.672l-1.234-3.365H8.856L7.622 20.2H3.95L10.173 3.816h3.654zm-1.827 4.91l-1.989 5.453h3.978l-1.989-5.453z" />
+            </svg>
+          </div>
+          <div className="relative text-center">
+            <p className="font-semibold text-gray-900/75 dark:text-white/75">JI CLI</p>
+            <p className="mt-1 text-sm text-gray-900/30 dark:text-white/30">
+              {overallConnectionStatus !== "connected"
+                ? "서버에 연결 중…"
+                : "왼쪽에서 세션을 선택하거나 새 세션을 생성하세요"}
+            </p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <header className="flex shrink-0 items-center justify-between border-b border-gray-900/[0.07] px-5 py-3 dark:border-white/[0.07]">
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <div className="flex items-center gap-2">
+                <span className={`h-2 w-2 shrink-0 rounded-full ${AGENT_META[selectedSession.agentId].dotColor}`} />
+                <span className="text-sm font-medium text-gray-900/80 dark:text-white/80">{selectedSession.info.title}</span>
+                <span className="rounded-md border border-gray-900/[0.06] bg-gray-900/[0.03] px-1.5 py-0.5 text-[10px] font-medium text-gray-900/35 dark:border-white/[0.06] dark:bg-white/[0.03] dark:text-white/35">
+                  {AGENT_META[selectedSession.agentId].label}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 pl-4">
+                <span className="font-mono text-[10px] text-gray-900/20 dark:text-white/20">{selectedSession.info.id.slice(0, 8)}…</span>
+                {selectedSessionDir && (
+                  <span className="flex items-center gap-1 rounded-md border border-gray-900/[0.06] bg-gray-900/[0.03] px-1.5 py-0.5 font-mono text-[10px] text-gray-900/40 dark:border-white/[0.06] dark:bg-white/[0.03] dark:text-white/40">
+                    <svg viewBox="0 0 16 16" fill="currentColor" className="h-2.5 w-2.5 shrink-0">
+                      <path d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3H7.5a.25.25 0 01-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z" />
+                    </svg>
+                    <span className="max-w-[200px] truncate">{selectedSessionDir}</span>
+                  </span>
+                )}
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={() => onTerminateSession(selectedSession.info.id)}
+              className="shrink-0 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:border-gray-900/[0.14] hover:bg-gray-900/[0.06] hover:text-gray-900/75 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/45 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.06] dark:hover:text-white/75"
+            >
+              종료
+            </button>
+          </header>
+
+          {error && (
+            <div className="shrink-0 border-b border-red-200 bg-red-50 px-5 py-2 text-xs text-red-600 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-400">
+              {error}
+            </div>
+          )}
+
+          <main className="flex-1 overflow-y-auto px-4 py-6">
+            <div className="mx-auto flex max-w-2xl flex-col gap-5">
+              {!selectedSession.messagesLoaded && (
+                <div className="flex items-center justify-center gap-2 py-12 text-sm text-gray-900/25 dark:text-white/25">
+                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-900/[0.07] border-t-gray-900/40 dark:border-white/[0.07] dark:border-t-white/40" />
+                  이전 대화를 불러오는 중…
+                </div>
+              )}
+
+              {selectedSession.messagesLoaded &&
+                selectedSession.messages.length === 0 &&
+                !selectedSession.isWaiting && (
+                  <div className="flex flex-col items-center justify-center gap-3 py-24 text-center">
+                    <p className="text-sm text-gray-900/25 dark:text-white/25">
+                      {AGENT_META[selectedSession.agentId].label}이 준비되었습니다. 메시지를 보내보세요.
+                    </p>
+                  </div>
+                )}
+
+              {selectedSession.messages.map((message) => {
+                if (message.role === "permission") {
+                  const prompt = parsePermissionPrompt(message.content);
+                  if (!prompt) {
+                    return (
+                      <SystemMessage
+                        key={message.id}
+                        content={`권한 요청을 표시할 수 없습니다.\n${message.content}`}
+                      />
+                    );
+                  }
+                  return (
+                    <PermissionCard
+                      key={message.id}
+                      tool={prompt.tool}
+                      command={prompt.command}
+                      warning={prompt.warning}
+                      onAllow={() => onSendMessage(selectedSession.info.id, "1")}
+                      onDeny={() => onSendMessage(selectedSession.info.id, "2")}
+                    />
+                  );
+                }
+                if (message.role === "system") {
+                  return <SystemMessage key={message.id} content={message.content} />;
+                }
+                return <ChatMessage key={message.id} message={message} agentId={selectedSession.agentId} />;
+              })}
+
+              {selectedSession.isWaiting && (
+                <StreamingMessage content={selectedSession.streaming} agentId={selectedSession.agentId} />
+              )}
+
+              <div ref={bottomRef} />
+            </div>
+          </main>
+
+          <footer className="shrink-0 border-t border-gray-900/[0.07] px-4 pb-4 pt-3 dark:border-white/[0.07]">
+            <div className="mx-auto max-w-2xl space-y-2">
+              <div className="flex items-center justify-between gap-3 border-b border-gray-900/[0.05] pb-2 dark:border-white/[0.05]">
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  <span className="shrink-0 text-[10px] font-medium uppercase tracking-wider text-gray-900/25 dark:text-white/25">
+                    cwd
+                  </span>
+                  <WorkingDirPicker value={currentDir} onChange={onDirChange} variant="inline" />
+                </div>
+                <AgentModelPicker
+                  agentId={selectedSession.agentId}
+                  value={modelSettingsByAgent[selectedSession.agentId]}
+                  onChange={onModelSettingsChange}
+                />
+              </div>
+              <ChatInput
+                onSend={onSend}
+                disabled={inputDisabled}
+                placeholder={
+                  selectedSession.isWaiting
+                    ? "응답을 기다리는 중…"
+                    : "메시지 입력 (Enter 전송 / Shift+Enter 줄바꿈)"
+                }
+              />
+            </div>
+          </footer>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+export function CheckingSkeleton() {
+  return (
+    <div className="flex h-screen bg-[#faf8f5] dark:bg-[#07090e]">
+      <aside className="flex w-64 flex-shrink-0 flex-col border-r border-gray-900/[0.07] dark:border-white/[0.07]">
+        <div className="relative overflow-hidden border-b border-gray-900/[0.07] px-4 py-3.5 dark:border-white/[0.07]">
+          <div className="animate-shimmer-bg absolute inset-0" />
+          <div className="relative flex items-center gap-2">
+            <div className="h-3.5 w-3.5 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+            <div className="h-[14px] w-20 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 p-3">
+          <div className="h-9 rounded-lg bg-orange-500/[0.08]" />
+          <div className="flex gap-2">
+            <div className="h-9 flex-1 rounded-lg bg-gray-900/[0.04] dark:bg-white/[0.04]" />
+            <div className="h-9 w-9 shrink-0 rounded-lg bg-gray-900/[0.04] dark:bg-white/[0.04]" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-0.5 px-2">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="relative overflow-hidden rounded-lg p-3">
+              <div
+                className="animate-shimmer-bg absolute inset-0 rounded-lg"
+                style={{ animationDelay: `${i * 80}ms` }}
+              />
+              <div className="relative flex flex-col gap-1.5">
+                <div className="h-[13px] w-28 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+                <div className="h-2.5 w-16 rounded bg-gray-900/[0.04] dark:bg-white/[0.04]" />
+                <div className="h-2.5 w-32 rounded bg-gray-900/[0.03] dark:bg-white/[0.03]" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </aside>
+
+      <div className="flex flex-1 flex-col items-center justify-center gap-3">
+        <span className="h-6 w-6 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-orange-500 dark:border-white/[0.08]" />
+        <span className="text-xs text-gray-900/20 dark:text-white/20">인증 확인 중…</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+
+import type { LoginState } from "@/features/auth/hooks/useClaudeAuth";
+import { LoginPanel } from "@/features/auth/ui/LoginPanel";
+import { ThemeToggle } from "@/lib/theme";
+
+interface ClaudeLoginViewProps {
+  loginState: LoginState;
+  loginOutput: string;
+  loginUrls: string[];
+  onStart: () => void;
+  onCancel: () => void;
+}
+
+export function ClaudeLoginView({
+  loginState,
+  loginOutput,
+  loginUrls,
+  onStart,
+  onCancel,
+}: ClaudeLoginViewProps) {
+  return (
+    <div className="flex h-screen flex-col bg-[#faf8f5] text-gray-900 dark:bg-[#07090e] dark:text-white">
+      <header 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">
+          <ThemeToggle />
+        </div>
+      </header>
+      <LoginPanel
+        loginState={loginState}
+        loginOutput={loginOutput}
+        loginUrls={loginUrls}
+        onStart={onStart}
+        onCancel={onCancel}
+      />
+    </div>
+  );
+}