@jcjeon/integration-cli 0.2.0 → 0.2.1

package/apps/web/src/features/chat/hooks/useUnifiedSessions.ts

@@ -1,156 +0,0 @@
-"use client";
-
-import { useCallback, useMemo, useState } from "react";
-
-import type { AgentId } from "../ui/AgentSelectModal";
-import type { AgentModelSettings, AgentModelSettingsByAgent } from "../lib/agentModelOptions";
-import { useClaudeSessions } from "./useClaudeSessions";
-import type { ChatMessage, SessionState } from "./useClaudeSessions";
-import { useCodexSessions } from "./useCodexSessions";
-import { useGeminiSessions } from "./useGeminiSessions";
-
-export type ConnectionStatus = "disconnected" | "connecting" | "connected";
-export type UnifiedSessionState = SessionState;
-
-export function getOverallConnectionStatus(statuses: ConnectionStatus[]): ConnectionStatus {
-  if (statuses.includes("connected")) return "connected";
-  if (statuses.includes("connecting")) return "connecting";
-  return "disconnected";
-}
-
-export function useUnifiedSessions() {
-  const claude = useClaudeSessions();
-  const gemini = useGeminiSessions();
-  const codex = useCodexSessions();
-  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
-
-  const sessions = useMemo(
-    () =>
-      [...claude.sessions, ...gemini.sessions, ...codex.sessions].sort(
-        (a, b) => new Date(b.info.createdAt).getTime() - new Date(a.info.createdAt).getTime(),
-      ),
-    [claude.sessions, gemini.sessions, codex.sessions],
-  );
-
-  const connectionStatusByAgent = useMemo<Record<AgentId, ConnectionStatus>>(
-    () => ({
-      claude: claude.connectionStatus,
-      gemini: gemini.connectionStatus,
-      codex: codex.connectionStatus,
-      opencode: "disconnected",
-    }),
-    [claude.connectionStatus, gemini.connectionStatus, codex.connectionStatus],
-  );
-
-  const overallConnectionStatus = useMemo(
-    () => getOverallConnectionStatus([claude.connectionStatus, gemini.connectionStatus, codex.connectionStatus]),
-    [claude.connectionStatus, gemini.connectionStatus, codex.connectionStatus],
-  );
-
-  const selectedSession = useMemo(
-    () => sessions.find((s) => s.info.id === selectedSessionId) ?? null,
-    [sessions, selectedSessionId],
-  );
-
-  const selectedConnectionStatus = selectedSession
-    ? connectionStatusByAgent[selectedSession.agentId]
-    : overallConnectionStatus;
-
-  const error = claude.error ?? gemini.error ?? codex.error;
-
-  const findSession = useCallback(
-    (sessionId: string) => sessions.find((s) => s.info.id === sessionId) ?? null,
-    [sessions],
-  );
-
-  const selectSession = useCallback(
-    (sessionId: string) => {
-      setSelectedSessionId(sessionId);
-      claude.selectSession(sessionId);
-      gemini.selectSession(sessionId);
-      codex.selectSession(sessionId);
-    },
-    [claude, gemini, codex],
-  );
-
-  const createSession = useCallback(
-    async (
-      agentId: AgentId,
-      workingDirectory?: string,
-      modelSettings?: AgentModelSettings,
-    ): Promise<string | null> => {
-      if (connectionStatusByAgent[agentId] !== "connected") return null;
-
-      let sessionId: string | null = null;
-      if (agentId === "gemini") {
-        sessionId = await gemini.createSession(workingDirectory);
-      } else if (agentId === "codex") {
-        sessionId = await codex.createSession(workingDirectory, modelSettings);
-      } else if (agentId === "claude") {
-        sessionId = await claude.createSession(agentId, workingDirectory, modelSettings);
-      }
-
-      if (sessionId) setSelectedSessionId(sessionId);
-      return sessionId;
-    },
-    [connectionStatusByAgent, claude, gemini, codex],
-  );
-
-  const sendMessage = useCallback(
-    (sessionId: string, text: string, modelSettingsByAgent?: AgentModelSettingsByAgent) => {
-      const session = findSession(sessionId);
-      if (!session) return;
-      const modelSettings = modelSettingsByAgent?.[session.agentId];
-      if (session.agentId === "gemini") gemini.sendMessage(sessionId, text);
-      else if (session.agentId === "codex") codex.sendMessage(sessionId, text, modelSettings);
-      else claude.sendMessage(sessionId, text, modelSettings);
-    },
-    [findSession, claude, gemini, codex],
-  );
-
-  const terminateSession = useCallback(
-    async (sessionId: string) => {
-      const session = findSession(sessionId);
-      if (!session) return;
-      if (session.agentId === "gemini") await gemini.terminateSession(sessionId);
-      else if (session.agentId === "codex") await codex.terminateSession(sessionId);
-      else await claude.terminateSession(sessionId);
-      setSelectedSessionId((prev) => (prev === sessionId ? null : prev));
-    },
-    [findSession, claude, gemini, codex],
-  );
-
-  const renameSession = useCallback(
-    (sessionId: string, newTitle: string) => {
-      const session = findSession(sessionId);
-      if (!session) return;
-      if (session.agentId === "gemini") gemini.renameSession(sessionId, newTitle);
-      else if (session.agentId === "codex") codex.renameSession(sessionId, newTitle);
-      else claude.renameSession(sessionId, newTitle);
-    },
-    [findSession, claude, gemini, codex],
-  );
-
-  const injectClaudeMessage = useCallback(
-    (sessionId: string, message: Omit<ChatMessage, "id" | "createdAt">) => {
-      claude.injectMessage(sessionId, message);
-    },
-    [claude],
-  );
-
-  return {
-    sessions,
-    selectedSession,
-    selectedSessionId,
-    selectedConnectionStatus,
-    connectionStatusByAgent,
-    overallConnectionStatus,
-    error,
-    createSession,
-    selectSession,
-    sendMessage,
-    terminateSession,
-    renameSession,
-    injectClaudeMessage,
-  };
-}

package/apps/web/src/features/chat/lib/agentModelOptions.ts

@@ -1,72 +0,0 @@
-import type { AgentId } from "../ui/AgentSelectModal";
-
-export type ReasoningLevel = "default" | "low" | "medium" | "high" | "xhigh" | "max";
-
-export interface AgentModelSettings {
-  model?: string;
-  reasoning?: ReasoningLevel;
-}
-
-export type AgentModelSettingsByAgent = Partial<Record<AgentId, AgentModelSettings>>;
-
-export interface ModelOption {
-  value: string;
-  label: string;
-  description: string;
-}
-
-export interface ReasoningOption {
-  value: ReasoningLevel;
-  label: string;
-}
-
-export const AGENT_MODEL_OPTIONS: Partial<Record<AgentId, ModelOption[]>> = {
-  claude: [
-    { value: "default", label: "기본값", description: "Claude CLI 설정을 그대로 사용" },
-    { value: "sonnet", label: "Sonnet", description: "균형 잡힌 기본 작업용" },
-    { value: "opus", label: "Opus", description: "복잡한 추론과 대규모 변경용" },
-  ],
-  codex: [
-    { value: "default", label: "기본값", description: "Codex CLI 설정을 그대로 사용" },
-    { value: "gpt-5.5", label: "GPT-5.5", description: "최신 고성능 모델" },
-    { value: "gpt-5.4", label: "GPT-5.4", description: "범용 작업에 안정적" },
-    { value: "gpt-5.4-mini", label: "GPT-5.4 Mini", description: "가벼운 수정과 빠른 응답" },
-    { value: "gpt-5.3-codex", label: "GPT-5.3 Codex", description: "코딩 작업 특화" },
-    { value: "gpt-5.2", label: "GPT-5.2", description: "이전 호환 모델" },
-  ],
-};
-
-export const AGENT_REASONING_OPTIONS: Partial<Record<AgentId, ReasoningOption[]>> = {
-  claude: [
-    { value: "default", label: "기본" },
-    { value: "low", label: "Low" },
-    { value: "medium", label: "Medium" },
-    { value: "high", label: "High" },
-    { value: "xhigh", label: "XHigh" },
-    { value: "max", label: "Max" },
-  ],
-  codex: [
-    { value: "default", label: "기본" },
-    { value: "low", label: "Low" },
-    { value: "medium", label: "Medium" },
-    { value: "high", label: "High" },
-    { value: "xhigh", label: "XHigh" },
-  ],
-};
-
-export function normalizeAgentModelSettings(settings?: AgentModelSettings): AgentModelSettings {
-  return {
-    model: settings?.model && settings.model !== "default" ? settings.model : undefined,
-    reasoning: settings?.reasoning && settings.reasoning !== "default" ? settings.reasoning : undefined,
-  };
-}
-
-export function getAgentModelSummary(agentId: AgentId, settings?: AgentModelSettings): string {
-  const model = settings?.model ?? "default";
-  const reasoning = settings?.reasoning ?? "default";
-  const modelLabel =
-    AGENT_MODEL_OPTIONS[agentId]?.find((option) => option.value === model)?.label ?? "기본값";
-  const reasoningLabel =
-    AGENT_REASONING_OPTIONS[agentId]?.find((option) => option.value === reasoning)?.label ?? "기본";
-  return `${modelLabel} · ${reasoningLabel}`;
-}

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

@@ -1,134 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-import type { AgentId } from "./AgentSelectModal";
-import {
-  AGENT_MODEL_OPTIONS,
-  AGENT_REASONING_OPTIONS,
-  getAgentModelSummary,
-  type AgentModelSettings,
-  type ReasoningLevel,
-} from "../lib/agentModelOptions";
-
-interface AgentModelPickerProps {
-  agentId: AgentId;
-  value?: AgentModelSettings;
-  onChange: (agentId: AgentId, settings: AgentModelSettings) => void;
-}
-
-function ChipIcon({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 16 16" fill="currentColor" className={className}>
-      <path d="M5.25 1A1.75 1.75 0 003.5 2.75v.75h-.75A1.75 1.75 0 001 5.25v5.5c0 .966.784 1.75 1.75 1.75h.75v.75c0 .966.784 1.75 1.75 1.75h5.5a1.75 1.75 0 001.75-1.75v-.75h.75A1.75 1.75 0 0015 10.75v-5.5a1.75 1.75 0 00-1.75-1.75h-.75v-.75A1.75 1.75 0 0010.75 1h-5.5zm0 1.5h5.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25V2.75a.25.25 0 01.25-.25zm-2.5 2.5h.75v6h-.75a.25.25 0 01-.25-.25v-5.5A.25.25 0 012.75 5zm9.75 0h.75a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-.75V5z" />
-    </svg>
-  );
-}
-
-function isSupportedAgent(agentId: AgentId) {
-  return agentId === "claude" || agentId === "codex";
-}
-
-export function AgentModelPicker({ agentId, value, onChange }: AgentModelPickerProps) {
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const modelOptions = AGENT_MODEL_OPTIONS[agentId] ?? [];
-  const reasoningOptions = AGENT_REASONING_OPTIONS[agentId] ?? [];
-  const selectedModel = value?.model ?? "default";
-  const selectedReasoning = value?.reasoning ?? "default";
-  const disabled = !isSupportedAgent(agentId);
-
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  const changeModel = (model: string) => {
-    onChange(agentId, { ...(value ?? {}), model });
-  };
-
-  const changeReasoning = (reasoning: ReasoningLevel) => {
-    onChange(agentId, { ...(value ?? {}), reasoning });
-  };
-
-  return (
-    <div ref={containerRef} className="relative flex min-w-0 items-center justify-end">
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => setOpen((prev) => !prev)}
-        title="모델 및 추론 설정"
-        className="flex min-w-0 max-w-[260px] items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-900/45 transition-colors hover:bg-gray-900/[0.05] hover:text-gray-900/75 disabled:cursor-not-allowed disabled:opacity-40 dark:text-white/45 dark:hover:bg-white/[0.06] dark:hover:text-white/75"
-      >
-        <ChipIcon className="h-3.5 w-3.5 shrink-0" />
-        <span className="truncate">{disabled ? "모델 기본값" : getAgentModelSummary(agentId, value)}</span>
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full right-0 z-50 mb-1 w-80 rounded-xl border border-gray-900/[0.1] bg-white shadow-lg dark:border-white/[0.1] dark:bg-gray-900">
-          <div className="border-b border-gray-900/[0.07] px-3 py-2 dark:border-white/[0.07]">
-            <p className="text-[11px] font-medium uppercase tracking-wider text-gray-900/30 dark:text-white/30">
-              model
-            </p>
-            <p className="mt-0.5 truncate text-xs text-gray-900/55 dark:text-white/55">
-              {getAgentModelSummary(agentId, value)}
-            </p>
-          </div>
-
-          <div className="max-h-56 overflow-y-auto py-1">
-            {modelOptions.map((option) => (
-              <button
-                key={option.value}
-                type="button"
-                onClick={() => changeModel(option.value)}
-                className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left transition-colors hover:bg-gray-900/[0.04] dark:hover:bg-white/[0.05] ${
-                  selectedModel === option.value ? "text-orange-600 dark:text-orange-400" : "text-gray-900/75 dark:text-white/75"
-                }`}
-              >
-                <span className="min-w-0">
-                  <span className="block text-sm font-medium">{option.label}</span>
-                  <span className="block truncate text-[11px] text-gray-900/35 dark:text-white/35">
-                    {option.description}
-                  </span>
-                </span>
-                {selectedModel === option.value && (
-                  <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5 shrink-0">
-                    <path d="M13.78 4.22a.75.75 0 010 1.06l-6.25 6.25a.75.75 0 01-1.06 0L3.22 8.28a.75.75 0 111.06-1.06L7 9.94l5.72-5.72a.75.75 0 011.06 0z" />
-                  </svg>
-                )}
-              </button>
-            ))}
-          </div>
-
-          <div className="border-t border-gray-900/[0.07] px-3 py-2 dark:border-white/[0.07]">
-            <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-gray-900/30 dark:text-white/30">
-              reasoning
-            </p>
-            <div className="grid grid-cols-3 gap-1">
-              {reasoningOptions.map((option) => (
-                <button
-                  key={option.value}
-                  type="button"
-                  onClick={() => changeReasoning(option.value)}
-                  className={`rounded-md px-2 py-1.5 text-xs font-medium transition-colors ${
-                    selectedReasoning === option.value
-                      ? "bg-orange-500 text-white"
-                      : "bg-gray-900/[0.04] text-gray-900/45 hover:bg-gray-900/[0.07] hover:text-gray-900/75 dark:bg-white/[0.05] dark:text-white/45 dark:hover:bg-white/[0.08] dark:hover:text-white/75"
-                  }`}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,236 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-import { Modal } from "@/components/ui/Modal";
-import { useAgentStatusStore } from "@/store/agentStatusStore";
-
-export type AgentId = "claude" | "gemini" | "codex" | "opencode";
-type ConnectionStatus = "disconnected" | "connecting" | "connected";
-
-interface AgentDef {
-  id: AgentId;
-  name: string;
-  vendor: string;
-  description: string;
-  available: boolean;
-  iconBg: string;
-  hoverBorder: string;
-  hoverBg: string;
-  icon: React.ReactNode;
-}
-
-// ─── Icons ────────────────────────────────────────────────────────────────────
-
-export const ClaudeIcon = () => (
-  <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6 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>
-);
-
-export const GeminiIcon = () => (
-  <svg viewBox="0 0 24 24" className="h-6 w-6" aria-hidden="true">
-    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
-    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
-    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
-  </svg>
-);
-
-export const CodexIcon = () => (
-  // OpenAI logo — simplified
-  <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6 text-gray-900 dark:text-white">
-    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9 6.065 6.065 0 0 0-10.75 2.918 5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.985 5.985 0 0 0 .511 4.91 6.046 6.046 0 0 0 6.515 2.9 5.985 5.985 0 0 0 4.514 2.012 6.046 6.046 0 0 0 5.772-4.206 5.985 5.985 0 0 0 3.998-2.9 6.046 6.046 0 0 0-.747-7.071zM13.26 21.4a4.476 4.476 0 0 1-2.876-1.041l.141-.08 4.779-2.758a.775.775 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.493zM3.6 17.275a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.775.775 0 0 0 .781 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-2.675zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973v5.701a.77.77 0 0 0 .388.677l5.815 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.843-3.354 2.02-1.169a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.402-.695zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.775.775 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
-  </svg>
-);
-
-export const OpenCodeIcon = () => (
-  // OpenCode — terminal bracket style
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-emerald-500">
-    <polyline points="16 18 22 12 16 6" />
-    <polyline points="8 6 2 12 8 18" />
-    <line x1="12" y1="4" x2="12" y2="20" strokeWidth="1.4" strokeDasharray="2 2" />
-  </svg>
-);
-
-// ─── Agent Definitions ────────────────────────────────────────────────────────
-
-const AGENTS: AgentDef[] = [
-  {
-    id: "claude",
-    name: "Claude Code",
-    vendor: "Anthropic",
-    description: "코드 작성, 디버깅, 리팩터링을 위한 AI 어시스턴트",
-    available: true,
-    iconBg: "bg-orange-500/[0.10]",
-    hoverBorder: "hover:border-orange-500/30",
-    hoverBg: "hover:bg-orange-500/[0.04]",
-    icon: <ClaudeIcon />,
-  },
-  {
-    id: "gemini",
-    name: "Gemini CLI",
-    vendor: "Google",
-    description: "Google Gemini 기반 코딩 어시스턴트",
-    available: true,
-    iconBg: "bg-blue-500/[0.08]",
-    hoverBorder: "hover:border-blue-500/20",
-    hoverBg: "hover:bg-blue-500/[0.03]",
-    icon: <GeminiIcon />,
-  },
-  {
-    id: "codex",
-    name: "Codex CLI",
-    vendor: "OpenAI",
-    description: "OpenAI Codex 기반 터미널 에이전트",
-    available: true,
-    iconBg: "bg-gray-900/[0.05] dark:bg-white/[0.06]",
-    hoverBorder: "hover:border-gray-900/20 dark:hover:border-white/20",
-    hoverBg: "hover:bg-gray-900/[0.03] dark:hover:bg-white/[0.03]",
-    icon: <CodexIcon />,
-  },
-  {
-    id: "opencode",
-    name: "OpenCode",
-    vendor: "OpenCode",
-    description: "오픈소스 AI 코딩 에이전트",
-    available: false,
-    iconBg: "bg-emerald-500/[0.08]",
-    hoverBorder: "hover:border-emerald-500/20",
-    hoverBg: "hover:bg-emerald-500/[0.03]",
-    icon: <OpenCodeIcon />,
-  },
-];
-
-// ─── Agent Card ───────────────────────────────────────────────────────────────
-
-interface AgentCardProps {
-  agent: AgentDef;
-  connectionStatus: ConnectionStatus;
-  onSelect: (id: AgentId) => void;
-}
-
-function AgentCard({ agent, connectionStatus, onSelect }: AgentCardProps) {
-  const canSelect = agent.available && connectionStatus === "connected";
-
-  return (
-    <button
-      onClick={() => canSelect && onSelect(agent.id)}
-      disabled={!canSelect}
-      className={[
-        "group relative flex w-full items-center gap-4 rounded-xl border p-4 text-left transition-all duration-200",
-        "border-gray-900/[0.07] bg-gray-900/[0.02] dark:border-white/[0.07] dark:bg-white/[0.02]",
-        canSelect
-          ? `cursor-pointer ${agent.hoverBorder} ${agent.hoverBg}`
-          : "cursor-not-allowed opacity-45",
-      ].join(" ")}
-    >
-      {/* Icon */}
-      <span
-        className={[
-          "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-gray-900/[0.06] dark:border-white/[0.06]",
-          agent.iconBg,
-        ].join(" ")}
-      >
-        {agent.icon}
-      </span>
-
-      {/* Text */}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-gray-900/85 dark:text-white/85">
-            {agent.name}
-          </span>
-          <span className="text-[10px] font-medium text-gray-900/25 dark:text-white/25">
-            {agent.vendor}
-          </span>
-        </div>
-        <p className="mt-0.5 text-xs text-gray-900/40 dark:text-white/40">{agent.description}</p>
-      </div>
-
-      {/* Status badge */}
-      <div className="shrink-0">
-        {!agent.available ? (
-          <span className="rounded-full border border-gray-900/[0.06] bg-gray-900/[0.03] px-2.5 py-1 text-[11px] font-medium text-gray-900/30 dark:border-white/[0.06] dark:bg-white/[0.03] dark:text-white/30">
-            준비 중
-          </span>
-        ) : connectionStatus === "connected" ? (
-          <span className="flex items-center gap-1 rounded-full border border-emerald-500/25 bg-emerald-500/[0.08] px-2.5 py-1 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
-            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
-            사용 가능
-          </span>
-        ) : connectionStatus === "connecting" ? (
-          <span className="flex items-center gap-1 rounded-full border border-amber-500/25 bg-amber-500/[0.08] px-2.5 py-1 text-[11px] font-medium text-amber-600 dark:text-amber-400">
-            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" />
-            연결 중
-          </span>
-        ) : (
-          <span className="rounded-full border border-gray-900/[0.06] bg-gray-900/[0.03] px-2.5 py-1 text-[11px] font-medium text-gray-900/30 dark:border-white/[0.06] dark:bg-white/[0.03] dark:text-white/30">
-            연결 끊김
-          </span>
-        )}
-      </div>
-
-      {/* Arrow */}
-      {canSelect && (
-        <svg
-          viewBox="0 0 16 16"
-          fill="currentColor"
-          className="h-3.5 w-3.5 shrink-0 text-gray-900/20 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-gray-900/50 dark:text-white/20 dark:group-hover:text-white/50"
-        >
-          <path fillRule="evenodd" d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z" clipRule="evenodd" />
-        </svg>
-      )}
-    </button>
-  );
-}
-
-// ─── Modal ────────────────────────────────────────────────────────────────────
-
-interface AgentSelectModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect: (agentId: AgentId) => void;
-  connectionStatusByAgent?: Record<AgentId, ConnectionStatus>;
-}
-
-export function AgentSelectModal({ open, onClose, onSelect, connectionStatusByAgent }: AgentSelectModalProps) {
-  const { statusByAgent, refresh } = useAgentStatusStore();
-
-  useEffect(() => {
-    if (open) refresh();
-  }, [open, refresh]);
-
-  const effectiveStatus = connectionStatusByAgent ?? statusByAgent;
-
-  return (
-    <Modal open={open} onClose={onClose} title="에이전트 선택" maxWidth="max-w-md" zIndex="z-[60]">
-      <div className="flex flex-col gap-2.5">
-        {AGENTS.map((agent) => (
-          <AgentCard
-            key={agent.id}
-            agent={agent}
-            connectionStatus={effectiveStatus[agent.id] ?? "disconnected"}
-            onSelect={(id) => { onSelect(id); onClose(); }}
-          />
-        ))}
-      </div>
-    </Modal>
-  );
-}
-
-// ─── Agent meta (for external use) ───────────────────────────────────────────
-
-export const AGENT_META: Record<AgentId, { label: string; dotColor: string }> = {
-  claude:    { label: "Claude Code", dotColor: "bg-orange-400" },
-  gemini:    { label: "Gemini CLI",  dotColor: "bg-blue-400" },
-  codex:     { label: "Codex CLI",   dotColor: "bg-gray-400" },
-  opencode:  { label: "OpenCode",    dotColor: "bg-emerald-400" },
-};
-
-export const AGENT_AVATAR: Record<AgentId, { bg: string; icon: React.ReactNode }> = {
-  claude:   { bg: "bg-[#D97757]",                                            icon: <svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-white"><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> },
-  gemini:   { bg: "bg-white dark:bg-gray-800",                               icon: <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" /></svg> },
-  codex:    { bg: "bg-gray-900 dark:bg-white",                               icon: <svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-white dark:text-gray-900"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9 6.065 6.065 0 0 0-10.75 2.918 5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.985 5.985 0 0 0 .511 4.91 6.046 6.046 0 0 0 6.515 2.9 5.985 5.985 0 0 0 4.514 2.012 6.046 6.046 0 0 0 5.772-4.206 5.985 5.985 0 0 0 3.998-2.9 6.046 6.046 0 0 0-.747-7.071zM13.26 21.4a4.476 4.476 0 0 1-2.876-1.041l.141-.08 4.779-2.758a.775.775 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.493zM3.6 17.275a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.775.775 0 0 0 .781 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-2.675zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973v5.701a.77.77 0 0 0 .388.677l5.815 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.843-3.354 2.02-1.169a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.402-.695zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.775.775 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" /></svg> },
-  opencode: { bg: "bg-emerald-600",                                          icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5 text-white"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /><line x1="12" y1="4" x2="12" y2="20" strokeWidth="1.4" strokeDasharray="2 2" /></svg> },
-};