@jcjeon/integration-cli 0.2.0 → 0.2.1

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

@@ -1,162 +0,0 @@
-"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

@@ -1,204 +0,0 @@
-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

@@ -1,207 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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>
-  );
-}