@jcjeon/integration-cli 0.2.0

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

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

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

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

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