ltcai 0.1.2 → 0.1.4

package/static/{indexd.html → chat.html}

@@ -180,6 +180,48 @@
             flex-shrink: 0;
         }
 
+        .sidebar-search {
+            padding: 8px 10px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .sidebar-search input {
+            width: 100%;
+            padding: 7px 10px 7px 30px;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.07);
+            border-radius: 8px;
+            color: var(--text);
+            font-size: 12px;
+            font-family: inherit;
+            outline: none;
+            transition: border-color .15s;
+        }
+        .sidebar-search input:focus { border-color: rgba(34,211,160,0.4); }
+        .sidebar-search input::placeholder { color: var(--faint); }
+        .sidebar-search-wrap {
+            position: relative;
+        }
+        .sidebar-search-wrap i {
+            position: absolute;
+            left: 8px; top: 50%;
+            transform: translateY(-50%);
+            color: var(--faint);
+            font-size: 13px;
+            pointer-events: none;
+        }
+        .history-item-del {
+            margin-left: auto;
+            opacity: 0;
+            color: var(--faint);
+            font-size: 13px;
+            padding: 2px 4px;
+            border-radius: 4px;
+            transition: all .15s;
+            flex-shrink: 0;
+        }
+        .history-item:hover .history-item-del { opacity: 1; }
+        .history-item-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }
+
         .history-container {
             flex: 1;
             overflow-y: auto;
@@ -335,6 +377,8 @@
             background: rgba(29,42,60,0.82);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
+            position: relative;
+            z-index: 50;
         }
 
         .header-left, .header-pills {
@@ -418,6 +462,62 @@
             justify-content: center;
         }
         .acct-modal-overlay.open { display: flex; }
+
+        /* MCP 관리 모달 */
+        .mcp-modal-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.6);
+            backdrop-filter: blur(4px);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+        .mcp-modal-overlay.open { display: flex; }
+        .mcp-modal {
+            background: var(--surface, #1e293b);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 16px;
+            width: 100%;
+            max-width: 560px;
+            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+            overflow: hidden;
+        }
+        .mcp-modal-header {
+            padding: 18px 20px;
+            border-bottom: 1px solid rgba(255,255,255,0.07);
+            display: flex; align-items: center; justify-content: space-between;
+        }
+        .mcp-modal-header h3 { font-size: 15px; font-weight: 700; color: var(--text); }
+        .mcp-modal-close { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 6px; }
+        .mcp-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.07); }
+        .mcp-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+        .mcp-section-label { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 8px; }
+        .mcp-item {
+            display: flex; align-items: center; gap: 12px;
+            padding: 11px 14px;
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.06);
+            border-radius: 10px;
+            margin-bottom: 6px;
+        }
+        .mcp-item-icon { font-size: 20px; flex-shrink: 0; }
+        .mcp-item-info { flex: 1; min-width: 0; }
+        .mcp-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
+        .mcp-item-desc { font-size: 11px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .mcp-item-status { font-size: 10.5px; color: var(--accent); font-weight: 600; }
+        .mcp-item-status.inactive { color: var(--faint); }
+        .mcp-install-btn {
+            padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
+            border: 1px solid rgba(34,211,160,0.3); background: rgba(34,211,160,0.08);
+            color: var(--accent); cursor: pointer; transition: all .15s; flex-shrink: 0;
+        }
+        .mcp-install-btn:hover { background: rgba(34,211,160,0.15); }
+        .mcp-install-btn.installed { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--faint); }
         .acct-modal {
             background: var(--surface, #1e293b);
             border: 1px solid rgba(255,255,255,0.08);
@@ -2807,43 +2907,6 @@
     </div>
     <div class="bg-grid"></div>
 
-    <div id="auth-overlay" class="auth-overlay">
-        <div class="auth-orb auth-orb-1"></div>
-        <div class="auth-orb auth-orb-2"></div>
-        <div class="auth-lang-picker lang-picker" id="auth-lang-picker">
-            <button class="auth-lang-btn" id="auth-lang-btn" onclick="toggleLangMenu('auth-lang-picker')">🌐 Languages</button>
-            <div class="lang-picker-menu" id="auth-lang-picker-menu">
-                <div class="lang-option" id="auth-lang-ko" onclick="setLang('ko')">🇰🇷 한국어</div>
-                <div class="lang-option" id="auth-lang-en" onclick="setLang('en')">🇺🇸 English</div>
-            </div>
-        </div>
-        <div class="auth-card">
-            <div id="login-form">
-                <div class="auth-logo"><i class="ti ti-brain"></i></div>
-                <h2 class="auth-title" data-i18n="login_title">Lattice AI</h2>
-                <p class="auth-subtitle" data-i18n="login_sub">Local AI Workspace — Apple Silicon</p>
-                <input class="auth-input" type="email" id="login-email" placeholder="이메일 주소" data-i18n-ph="ph_email">
-                <input class="auth-input" type="password" id="login-pw" placeholder="비밀번호" data-i18n-ph="ph_password">
-                <button class="auth-submit" onclick="handleLogin()" data-i18n="btn_login">로그인</button>
-                <p class="auth-switch"><span data-i18n="no_account">계정이 없으신가요?</span>
-                    <a href="#" onclick="toggleAuth(true)" data-i18n="go_register">회원가입</a></p>
-            </div>
-            <div id="register-form" style="display: none;">
-                <div class="auth-logo"><i class="ti ti-user-plus"></i></div>
-                <h2 class="auth-title" data-i18n="register_title">계정 만들기</h2>
-                <p class="auth-subtitle" data-i18n="register_sub">Lattice AI 워크스페이스에 참여하세요</p>
-                <input class="auth-input" type="email" id="reg-email" placeholder="이메일 주소" data-i18n-ph="ph_email">
-                <input class="auth-input" type="password" id="reg-pw" placeholder="비밀번호 (4자 이상)" data-i18n-ph="ph_new_pw">
-                <input class="auth-input" type="password" id="reg-pw2" placeholder="비밀번호 확인" data-i18n-ph="ph_pw_confirm">
-                <input class="auth-input" type="text" id="reg-name" placeholder="이름" data-i18n-ph="ph_fullname">
-                <input class="auth-input" type="text" id="reg-nickname" placeholder="닉네임" data-i18n-ph="ph_nick">
-                <div id="reg-msg" style="font-size:12px;min-height:16px;margin-bottom:4px;"></div>
-                <button class="auth-submit" id="reg-submit-btn" onclick="handleRegister()" data-i18n="btn_register">가입하기</button>
-                <p class="auth-switch"><span data-i18n="have_account">이미 계정이 있나요?</span>
-                    <a href="#" onclick="toggleAuth(false)" data-i18n="go_login">로그인</a></p>
-            </div>
-        </div>
-    </div>
 
     <div class="app-layout">
         <!-- Sidebar -->
@@ -2862,6 +2925,12 @@
                     <div style="font-size:10.5px;color:var(--faint)">Local Workspace</div>
                 </div>
             </div>
+            <div class="sidebar-search">
+                <div class="sidebar-search-wrap">
+                    <i class="ti ti-search"></i>
+                    <input type="text" id="history-search-input" placeholder="대화 검색..." oninput="onHistorySearch(this.value)">
+                </div>
+            </div>
             <div class="history-container" id="history-container">
                 <!-- History items -->
             </div>
@@ -2869,6 +2938,7 @@
                 <button id="admin-btn" class="admin-btn" onclick="openAdminPanel()"><i class="ti ti-shield-lock"></i> <span data-i18n="admin_dashboard">관리자 대시보드</span></button>
                 <button class="status-btn" onclick="openStatusPanel()"><i class="ti ti-info-circle"></i> <span data-i18n="my_status">내 상태 보기</span></button>
                 <button id="setup-wizard-btn" class="setup-wizard-sidebar-btn" onclick="openSetupWizard()"><i class="ti ti-sparkles"></i> <span data-i18n="auto_setup">자동 설정</span></button>
+                <button class="setup-wizard-sidebar-btn" onclick="openMcpModal()"><i class="ti ti-plug-connected"></i> MCP 관리</button>
                 <button id="new-chat-btn" class="new-chat-btn"><i class="ti ti-plus"></i> New Chat</button>
             </div>
         </aside>
@@ -2944,6 +3014,19 @@
                 </div>
             </div>
 
+            <!-- MCP 관리 모달 -->
+            <div class="mcp-modal-overlay" id="mcp-modal-overlay" onclick="if(event.target===this)closeMcpModal()">
+                <div class="mcp-modal">
+                    <div class="mcp-modal-header">
+                        <h3><i class="ti ti-plug-connected"></i> MCP 서버 관리</h3>
+                        <button class="mcp-modal-close" onclick="closeMcpModal()"><i class="ti ti-x"></i></button>
+                    </div>
+                    <div class="mcp-modal-body" id="mcp-modal-body">
+                        <div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">로딩 중...</div>
+                    </div>
+                </div>
+            </div>
+
             <section class="ops-strip" aria-label="workspace status">
                 <div class="ops-card primary interactive" onclick="openModelPanel()">
                     <div>
@@ -3351,7 +3434,6 @@
             if (typeof acquireVsCodeApi === 'function') {
                 vscode = acquireVsCodeApi();
                 console.log("VS Code API Acquired");
-                document.getElementById('auth-overlay').style.display = 'none'; // VS Code에서는 로그인 건너뜀
             }
         } catch (e) { /* Not in VS Code */ }
 
@@ -3363,80 +3445,12 @@
             }
         });
 
-        function toggleAuth(showRegister) {
-            document.getElementById('login-form').style.display = showRegister ? 'none' : 'block';
-            document.getElementById('register-form').style.display = showRegister ? 'block' : 'none';
-        }
-
-        async function handleRegister() {
-            const email = document.getElementById('reg-email').value.trim();
-            const password = document.getElementById('reg-pw').value;
-            const password2 = document.getElementById('reg-pw2').value;
-            const name = document.getElementById('reg-name').value.trim();
-            const nickname = document.getElementById('reg-nickname').value.trim();
-            const msg = document.getElementById('reg-msg');
-            const btn = document.getElementById('reg-submit-btn');
-            const setMsg = (text, isError) => {
-                msg.textContent = text;
-                msg.style.color = isError ? '#f87171' : '#4ade80';
-            };
-            if (!email || !password || !password2 || !name || !nickname) return setMsg('모든 항목을 입력해주세요.', true);
-            if (password.length < 4) return setMsg('비밀번호는 4자 이상이어야 합니다.', true);
-            if (password !== password2) return setMsg('비밀번호가 일치하지 않습니다.', true);
-            btn.disabled = true; btn.textContent = '가입 중...';
-            try {
-                const res = await apiFetch('/register', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ email, password, name, nickname })
-                });
-                if (res.ok) {
-                    setMsg('✅ 가입 완료! 로그인 해주세요.', false);
-                    setTimeout(() => toggleAuth(false), 1200);
-                } else {
-                    const data = await res.json();
-                    setMsg(data.detail || '가입 실패', true);
-                }
-            } catch { setMsg('서버 연결 실패', true); }
-            finally { btn.disabled = false; btn.textContent = '가입하기'; }
-        }
-
-        async function handleLogin() {
-            const email = document.getElementById('login-email').value;
-            const password = document.getElementById('login-pw').value;
-            const res = await apiFetch('/login', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, password })
-            });
-            if (res.ok) {
-                const data = await res.json();
-                currentUserNickname = data.nickname;
-                currentUserEmail = data.email;
-                localStorage.setItem('ltcai_user_email', currentUserEmail);
-                localStorage.setItem('ltcai_user_nickname', currentUserNickname);
-                localStorage.setItem('ltcai_is_admin', data.is_admin ? 'true' : 'false');
-                isAdmin = Boolean(data.is_admin);
-                document.getElementById('user-nickname-display').innerText = currentUserNickname;
-                const av = document.getElementById('user-avatar-initial');
-                if (av) av.textContent = (currentUserNickname || 'G')[0].toUpperCase();
-                document.getElementById('admin-btn').style.display = 'flex';
-                document.getElementById('security-admin-meta').textContent = isAdmin ? '관리자 권한 있음' : '관리자 대시보드 접근';
-                document.getElementById('auth-overlay').style.display = 'none';
-                loadVpcStatus();
-                restoreCurrentConversation().then(() => {
-                    if (!chatViewport.querySelector('.message')) {
-                        addMessage('ai', `반갑습니다, <b>${currentUserNickname}</b>님!`);
-                    }
-                });
-            } else { alert("로그인 실패!"); }
-        }
-
-        function logout() {
+        async function logout() {
+            try { await apiFetch('/logout', { method: 'POST' }); } catch (_) {}
             localStorage.removeItem('ltcai_user_email');
             localStorage.removeItem('ltcai_user_nickname');
             localStorage.removeItem('ltcai_is_admin');
-            location.reload();
+            window.location.href = '/account';
         }
 
         const I18N = {
@@ -3461,7 +3475,7 @@
                 btn_save: '저장', btn_change: '변경', btn_cancel: '취소',
                 // ops 스트립
                 vpc_not_set: '설정 안 됨', vpc_click_to_set: '클릭하여 VPC 연결 설정',
-                security_monitor: '민감정보 감시', admin_dashboard_access: '관리자 대시보드 접근',
+                security_monitor: '민감정보 감시', admin_dashboard_access: '관리자 대시보드 접근', admin_has_rights: '관리자 권한 있음',
                 // 빈 화면
                 empty_title: '무엇을 만들까요?',
                 empty_sub: '로컬 모델, 이미지 분석, 코드 생성, 프라이빗 VPC — 모든 걸 한 화면에서 이어가세요.',
@@ -3500,7 +3514,7 @@
                 btn_save: 'Save', btn_change: 'Change', btn_cancel: 'Cancel',
                 // Ops strip
                 vpc_not_set: 'Not configured', vpc_click_to_set: 'Click to set up VPC',
-                security_monitor: 'Sensitive data monitor', admin_dashboard_access: 'Admin dashboard access',
+                security_monitor: 'Sensitive data monitor', admin_dashboard_access: 'Admin dashboard access', admin_has_rights: 'Has admin rights',
                 // Empty state
                 empty_title: 'What would you like to build?',
                 empty_sub: 'Local models, image analysis, code generation, private VPC — all in one workspace.',
@@ -4051,9 +4065,27 @@
         }
 
         async function openAdminPanel() {
+            if (!isAdmin) {
+                showToast(currentLang === 'ko' ? '관리자 권한이 없습니다.' : 'Admin access required.');
+                return;
+            }
             window.location.href = '/admin';
         }
 
+        function showToast(msg) {
+            let t = document.getElementById('ltcai-toast');
+            if (!t) {
+                t = document.createElement('div');
+                t.id = 'ltcai-toast';
+                t.style.cssText = 'position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1e2330;color:#f8fafc;border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,0.4);pointer-events:none;transition:opacity .2s;';
+                document.body.appendChild(t);
+            }
+            t.textContent = msg;
+            t.style.opacity = '1';
+            clearTimeout(t._timer);
+            t._timer = setTimeout(() => { t.style.opacity = '0'; }, 2200);
+        }
+
         function closeAdminPanel() {
             document.getElementById('admin-overlay').style.display = 'none';
         }
@@ -5012,27 +5044,59 @@
             }
         }
 
+        function renderHistoryItems(conversations) {
+            if (!conversations.length) {
+                historyContainer.innerHTML = '<div class="history-section-label">CHATS</div><div class="history-empty">아직 저장된 대화가 없습니다.</div>';
+                return;
+            }
+            historyContainer.innerHTML = '<div class="history-section-label">CHATS</div>' + conversations.map(item => `
+                <div class="history-item ${item.id === currentConversationId ? 'active' : ''}" data-conversation-id="${escapeHtml(item.id)}" title="${escapeHtml(item.title || '')}">
+                    <i class="ti ti-message-2"></i>
+                    <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis">${escapeHtml(item.title || '새 대화')}</span>
+                    <span class="history-item-del" onclick="event.stopPropagation();deleteConversation('${escapeHtml(item.id)}')"><i class="ti ti-trash"></i></span>
+                </div>
+            `).join('');
+            historyContainer.querySelectorAll('.history-item').forEach(item => {
+                item.onclick = () => openConversation(item.dataset.conversationId);
+            });
+        }
+
         async function loadHistory() {
             try {
                 const conversations = await fetchConversations();
-                if (!conversations.length) {
-                    historyContainer.innerHTML = '<div class="history-section-label">CHATS</div><div class="history-empty">아직 저장된 대화가 없습니다.</div>';
-                    return [];
-                }
-                historyContainer.innerHTML = '<div class="history-section-label">CHATS</div>' + conversations.map(item => `
-                    <div class="history-item ${item.id === currentConversationId ? 'active' : ''}" data-conversation-id="${escapeHtml(item.id)}" title="${escapeHtml(item.title || '')}">
-                        <i class="ti ti-message-2"></i>
-                        <span>${escapeHtml(item.title || '새 대화')}</span>
-                    </div>
-                `).join('');
-                historyContainer.querySelectorAll('.history-item').forEach(item => {
-                    item.onclick = () => openConversation(item.dataset.conversationId);
-                });
+                renderHistoryItems(conversations);
                 return conversations;
             } catch (e) { }
             return [];
         }
 
+        let _searchDebounce = null;
+        async function onHistorySearch(q) {
+            clearTimeout(_searchDebounce);
+            if (!q.trim()) { loadHistory(); return; }
+            _searchDebounce = setTimeout(async () => {
+                try {
+                    const res = await apiFetch(`/history/search?q=${encodeURIComponent(q)}`);
+                    if (!res.ok) return;
+                    const data = await res.json();
+                    const results = (data.results || []).map(r => ({
+                        id: r.conversation_id,
+                        title: r.title || '새 대화',
+                    }));
+                    renderHistoryItems(results);
+                } catch {}
+            }, 300);
+        }
+
+        async function deleteConversation(conversationId) {
+            if (!confirm('이 대화를 삭제할까요?')) return;
+            try {
+                await apiFetch(`/history/conversations/${encodeURIComponent(conversationId)}`, { method: 'DELETE' });
+                if (currentConversationId === conversationId) startNewConversation();
+                loadHistory();
+            } catch {}
+        }
+
         async function restoreCurrentConversation() {
             const conversations = await loadHistory();
             if (conversations.some(item => item.id === currentConversationId)) {
@@ -5546,6 +5610,32 @@
 
         document.getElementById('new-chat-btn').onclick = startNewChat;
         applyI18n();
+
+        // Session check — redirect to /account if not logged in
+        (async function restoreSession() {
+            try {
+                const res = await apiFetch('/account/profile');
+                if (res.ok) {
+                    const data = await res.json();
+                    currentUserEmail = data.email;
+                    currentUserNickname = data.nickname || data.name || data.email;
+                    isAdmin = Boolean(data.is_admin);
+                    localStorage.setItem('ltcai_user_email', currentUserEmail);
+                    localStorage.setItem('ltcai_user_nickname', currentUserNickname);
+                    localStorage.setItem('ltcai_is_admin', isAdmin ? 'true' : 'false');
+                    document.getElementById('user-nickname-display').innerText = currentUserNickname;
+                    const av = document.getElementById('user-avatar-initial');
+                    if (av) av.textContent = (currentUserNickname || 'G')[0].toUpperCase();
+                    document.getElementById('admin-btn').style.display = 'flex';
+                    document.getElementById('security-admin-meta').textContent = isAdmin ? t('admin_has_rights') : t('admin_dashboard_access');
+                } else {
+                    window.location.href = '/account';
+                }
+            } catch (_) {
+                window.location.href = '/account';
+            }
+        })();
+
         loadModelStatus();
         loadVpcStatus();
         restoreCurrentConversation();
@@ -6073,6 +6163,91 @@
         _footBtns(`<button class="wbtn wbtn-primary" onclick="closeSetupWizard();loadModelStatus()">완료 ✓</button>`);
     }
     </script>
+
+    <script>
+    // ── MCP 관리 모달 ────────────────────────────────────────────────────────
+    async function openMcpModal() {
+        document.getElementById('mcp-modal-overlay').classList.add('open');
+        await renderMcpModal();
+    }
+
+    function closeMcpModal() {
+        document.getElementById('mcp-modal-overlay').classList.remove('open');
+    }
+
+    async function renderMcpModal() {
+        const body = document.getElementById('mcp-modal-body');
+        body.innerHTML = '<div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">로딩 중...</div>';
+        try {
+            const [installedRes, toolsRes] = await Promise.all([
+                apiFetch('/mcp/installed'),
+                apiFetch('/mcp/tools'),
+            ]);
+            const installed = installedRes.ok ? await installedRes.json() : {};
+            const allTools = toolsRes.ok ? await toolsRes.json() : [];
+
+            const installedIds = new Set(Object.keys(installed));
+            const installedItems = allTools.filter(t => installedIds.has(t.id));
+            const availableItems = allTools.filter(t => !installedIds.has(t.id));
+
+            let html = '';
+
+            if (installedItems.length) {
+                html += '<div class="mcp-section-label">설치됨</div>';
+                html += installedItems.map(mcp => `
+                    <div class="mcp-item">
+                        <div class="mcp-item-icon">${mcp.icon || '🔌'}</div>
+                        <div class="mcp-item-info">
+                            <div class="mcp-item-name">${escapeHtml(mcp.name || mcp.id)}</div>
+                            <div class="mcp-item-desc">${escapeHtml(mcp.description || '')}</div>
+                        </div>
+                        <span class="mcp-item-status">활성</span>
+                    </div>
+                `).join('');
+            }
+
+            if (availableItems.length) {
+                html += '<div class="mcp-section-label">설치 가능</div>';
+                html += availableItems.map(mcp => `
+                    <div class="mcp-item" id="mcp-item-${escapeHtml(mcp.id)}">
+                        <div class="mcp-item-icon">${mcp.icon || '🔌'}</div>
+                        <div class="mcp-item-info">
+                            <div class="mcp-item-name">${escapeHtml(mcp.name || mcp.id)}</div>
+                            <div class="mcp-item-desc">${escapeHtml(mcp.description || '')}</div>
+                        </div>
+                        <button class="mcp-install-btn" onclick="installMcp('${escapeHtml(mcp.id)}')">설치</button>
+                    </div>
+                `).join('');
+            }
+
+            if (!html) html = '<div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">사용 가능한 MCP 서버가 없습니다.</div>';
+            body.innerHTML = html;
+        } catch (e) {
+            body.innerHTML = `<div style="color:#ff6b6b;font-size:13px;text-align:center;padding:24px">로드 실패: ${escapeHtml(e.message)}</div>`;
+        }
+    }
+
+    async function installMcp(id) {
+        const btn = document.querySelector(`#mcp-item-${CSS.escape(id)} .mcp-install-btn`);
+        if (btn) { btn.disabled = true; btn.textContent = '설치 중...'; }
+        try {
+            const res = await apiFetch('/mcp/install', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id }),
+            });
+            if (res.ok) {
+                await renderMcpModal();
+            } else {
+                const d = await res.json().catch(() => ({}));
+                if (btn) { btn.disabled = false; btn.textContent = '설치'; }
+                alert(d.detail || '설치 실패');
+            }
+        } catch {
+            if (btn) { btn.disabled = false; btn.textContent = '설치'; }
+        }
+    }
+    </script>
 </body>
 
 </html>