ltcai 0.1.3 → 0.1.4

package/README.md

@@ -10,6 +10,35 @@ LTCAI                      # → http://localhost:4825
 
 ---
 
+## v0.1.4 변경사항
+
+### Added
+- 세션 영속성 — 서버 재시작 후에도 로그인 유지
+- SSO 로그인 — Entra ID / Okta OIDC 지원 (`OIDC_DISCOVERY_URL`, `OIDC_CLIENT_ID`, `OIDC_CLIENT_SECRET`)
+- 채팅 히스토리 검색 — 사이드바 검색창으로 대화 내용 키워드 검색
+- 대화 삭제 — 사이드바 각 대화에 삭제 버튼
+- MCP 서버 관리 UI — 사이드바 "MCP 관리" 버튼으로 설치/목록 모달
+- VS Code 인라인 Diff 뷰 — Edit Selection 결과를 diff로 먼저 확인 후 Apply/Discard
+- VS Code 현재 파일 첨부 — `Lattice AI: Attach Current File to Chat` 명령 추가
+
+---
+
+## v0.1.3 변경사항
+
+### Added
+- 프로필 수정 (`PATCH /account/profile`) — 이름·닉네임 변경
+- 회원가입 폼 — 비밀번호 확인 필드, 인라인 에러 메시지
+- 어드민 패널 초대 링크 섹션 — 원클릭 복사
+- 어드민 대시보드 메시지 활동 차트 (Chart.js, 최근 14일)
+- 웹 UI 한국어 / 영어 전환 (`🌐 Languages` 버튼, localStorage 저장)
+
+### Fixed
+- 로그아웃 시 `/logout` API 호출로 서버 세션 쿠키 정상 만료
+- 인증(`account.html`)과 채팅(`chat.html`) UI 분리 — 레거시 파일 제거
+- 채팅 헤더에서 언어 선택 드롭다운이 ops-strip을 가리는 문제 수정
+
+---
+
 ## 아키텍처
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ltcai",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Lattice AI local MLX/cloud LLM workspace server",
   "bin": {
     "ltcai": "bin/ltcai.js",

package/requirements.txt

@@ -9,3 +9,4 @@ openpyxl
 python-pptx
 python-multipart
 keyring
+authlib

package/server.py

@@ -175,6 +175,31 @@ PUBLIC_MODEL = env_value("LATTICEAI_PUBLIC_MODEL", env_value("LATTICEAI_DEFAULT_
 LOCAL_MODEL = env_value("LATTICEAI_LOCAL_MODEL", "mlx-community/gemma-4-26b-a4b-it-4bit")
 LOCAL_DRAFT_MODEL = env_value("LATTICEAI_LOCAL_DRAFT_MODEL", "")
 
+# ── SSO / OIDC config ─────────────────────────────────────────────────────────
+SSO_DISCOVERY_URL = env_value("OIDC_DISCOVERY_URL", "")
+SSO_CLIENT_ID = env_value("OIDC_CLIENT_ID", "")
+SSO_CLIENT_SECRET = env_value("OIDC_CLIENT_SECRET", "")
+SSO_REDIRECT_URI = env_value("OIDC_REDIRECT_URI", "http://localhost:4825/auth/sso/callback")
+SSO_PROVIDER_NAME = env_value("OIDC_PROVIDER_NAME", "SSO")
+_sso_discovery_cache: Optional[Dict] = None
+_sso_states: Dict[str, float] = {}  # state → timestamp (CSRF protection)
+
+async def _get_sso_discovery() -> Optional[Dict]:
+    global _sso_discovery_cache
+    if _sso_discovery_cache:
+        return _sso_discovery_cache
+    if not SSO_DISCOVERY_URL:
+        return None
+    try:
+        import httpx as _httpx
+        async with _httpx.AsyncClient() as c:
+            r = await c.get(SSO_DISCOVERY_URL, timeout=10)
+            _sso_discovery_cache = r.json()
+    except Exception as e:
+        logging.warning("SSO discovery failed: %s", e)
+        return None
+    return _sso_discovery_cache
+
 # ── Password hashing (stdlib scrypt, no extra deps) ────────────────────────────
 def hash_password(password: str) -> str:
     salt = secrets.token_hex(16)
@@ -199,27 +224,54 @@ def verify_and_migrate_password(email: str, plain: str, stored: str, users: Dict
         return True
     return False
 
-# ── Session store (in-memory, clears on restart) ──────────────────────────────
+# ── Session store (file-backed, survives restarts) ────────────────────────────
 _SESSION_TTL = 60 * 60 * 24 * 7  # 7 days
-_sessions: Dict[str, tuple] = {}  # token → (email, created_at)
+_sessions_lock = threading.Lock()
+
+def _sessions_file() -> Path:
+    return DATA_DIR / "sessions.json"
+
+def _load_sessions() -> Dict[str, tuple]:
+    try:
+        f = _sessions_file()
+        if f.exists():
+            raw = json.loads(f.read_text())
+            return {k: tuple(v) for k, v in raw.items()}
+    except Exception:
+        pass
+    return {}
+
+def _persist_sessions(sessions: Dict[str, tuple]) -> None:
+    try:
+        _sessions_file().write_text(json.dumps({k: list(v) for k, v in sessions.items()}, ensure_ascii=False))
+    except Exception:
+        pass
+
+_sessions: Dict[str, tuple] = _load_sessions()
 
 def create_session(email: str) -> str:
     token = secrets.token_urlsafe(32)
-    _sessions[token] = (email, time.time())
+    with _sessions_lock:
+        _sessions[token] = (email, time.time())
+        _persist_sessions(_sessions)
     return token
 
 def get_session_email(token: str) -> Optional[str]:
-    entry = _sessions.get(token)
-    if entry is None:
-        return None
-    email, created_at = entry
-    if time.time() - created_at > _SESSION_TTL:
-        _sessions.pop(token, None)
-        return None
-    return email
+    with _sessions_lock:
+        entry = _sessions.get(token)
+        if entry is None:
+            return None
+        email, created_at = entry
+        if time.time() - created_at > _SESSION_TTL:
+            _sessions.pop(token, None)
+            _persist_sessions(_sessions)
+            return None
+        return email
 
 def invalidate_session(token: str) -> None:
-    _sessions.pop(token, None)
+    with _sessions_lock:
+        _sessions.pop(token, None)
+        _persist_sessions(_sessions)
 
 # ── User Management Logic ──────────────────────────────────────────────────
 BASE_DIR = Path(__file__).resolve().parent
@@ -1232,6 +1284,79 @@ async def login(req: UserLogin):
     response.set_cookie(key="session_token", value=token, httponly=True, samesite="lax", max_age=60 * 60 * 24 * 7)
     return response
 
+@app.get("/auth/sso/config")
+async def sso_config():
+    enabled = bool(SSO_DISCOVERY_URL and SSO_CLIENT_ID and SSO_CLIENT_SECRET)
+    return {"enabled": enabled, "provider_name": SSO_PROVIDER_NAME if enabled else ""}
+
+@app.get("/auth/sso/login")
+async def sso_login():
+    from urllib.parse import urlencode
+    from fastapi.responses import RedirectResponse as _Redirect
+    discovery = await _get_sso_discovery()
+    if not discovery:
+        raise HTTPException(status_code=503, detail="SSO가 설정되지 않았습니다.")
+    state = secrets.token_urlsafe(16)
+    _sso_states[state] = time.time()
+    params = urlencode({
+        "client_id": SSO_CLIENT_ID,
+        "response_type": "code",
+        "redirect_uri": SSO_REDIRECT_URI,
+        "scope": "openid email profile",
+        "state": state,
+    })
+    return _Redirect(f"{discovery['authorization_endpoint']}?{params}")
+
+@app.get("/auth/sso/callback")
+async def sso_callback(code: str = "", state: str = "", error: str = ""):
+    from fastapi.responses import RedirectResponse as _Redirect
+    import base64 as _b64
+    if error:
+        return _Redirect(f"/?sso_error={error}")
+    ts = _sso_states.pop(state, None)
+    if ts is None or time.time() - ts > 300:
+        raise HTTPException(status_code=400, detail="유효하지 않은 SSO 상태입니다.")
+    discovery = await _get_sso_discovery()
+    if not discovery:
+        raise HTTPException(status_code=503, detail="SSO 설정 오류입니다.")
+    import httpx as _httpx
+    async with _httpx.AsyncClient() as c:
+        r = await c.post(discovery["token_endpoint"], data={
+            "grant_type": "authorization_code",
+            "code": code,
+            "redirect_uri": SSO_REDIRECT_URI,
+            "client_id": SSO_CLIENT_ID,
+            "client_secret": SSO_CLIENT_SECRET,
+        }, headers={"Accept": "application/json"}, timeout=15)
+        tokens = r.json()
+    id_token = tokens.get("id_token")
+    if not id_token:
+        raise HTTPException(status_code=400, detail="ID 토큰을 받지 못했습니다.")
+    # Decode JWT payload (no signature verification — trust IdP redirect)
+    padded = id_token.split(".")[1] + "=="
+    payload = json.loads(_b64.urlsafe_b64decode(padded))
+    email = payload.get("email") or payload.get("preferred_username") or payload.get("upn") or ""
+    if not email:
+        raise HTTPException(status_code=400, detail="이메일을 확인할 수 없습니다.")
+    users = load_users()
+    if email not in users:
+        is_first = len(users) == 0
+        users[email] = {
+            "password": "",
+            "name": payload.get("name", email.split("@")[0]),
+            "nickname": payload.get("given_name", email.split("@")[0]),
+            "role": "admin" if is_first else "user",
+            "disabled": False,
+            "sso": True,
+        }
+        save_users(users)
+    if users[email].get("disabled"):
+        raise HTTPException(status_code=403, detail="비활성화된 계정입니다.")
+    token = create_session(email)
+    resp = _Redirect("/chat", status_code=302)
+    resp.set_cookie("session_token", token, httponly=True, samesite="lax", max_age=_SESSION_TTL)
+    return resp
+
 @app.post("/logout")
 async def logout(request: Request):
     token = _extract_bearer_token(request)
@@ -2405,6 +2530,23 @@ async def delete_history(request: Request, keep_last: int = 0):
     require_user(request)
     return clear_history(keep_last)
 
+@app.get("/history/search")
+async def search_history(q: str, request: Request):
+    """키워드로 채팅 히스토리를 검색합니다."""
+    require_user(request)
+    if not q or not q.strip():
+        return {"results": [], "query": q}
+    q_lower = q.strip().lower()
+    history = get_history()
+    matches = [item for item in history if q_lower in (item.get("content") or "").lower()]
+    grouped: Dict[str, Dict] = {}
+    for item in matches:
+        cid = item.get("conversation_id") or "legacy"
+        if cid not in grouped:
+            grouped[cid] = {"conversation_id": cid, "title": conversation_title(item), "messages": []}
+        grouped[cid]["messages"].append(item)
+    return {"results": list(grouped.values())[-30:], "query": q}
+
 
 async def _stream_chat(req: ChatRequest, context: str = "", image_data: str = None) -> AsyncIterator[str]:
     full_response = ""

package/static/account.html

@@ -164,6 +164,34 @@
         .switch a { color: var(--accent); text-decoration: none; font-weight: 700; }
         .switch a:hover { text-decoration: underline; }
 
+        .sso-divider {
+            display: flex; align-items: center; gap: 10px;
+            margin: 14px 0 10px;
+            color: var(--faint); font-size: 11.5px;
+        }
+        .sso-divider::before, .sso-divider::after {
+            content: ''; flex: 1;
+            height: 1px; background: rgba(255,255,255,0.07);
+        }
+        .sso-btn {
+            width: 100%;
+            padding: 12px;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.1);
+            color: var(--text);
+            border-radius: 10px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 13.5px;
+            font-family: inherit;
+            display: flex; align-items: center; justify-content: center; gap: 8px;
+            transition: all .18s;
+        }
+        .sso-btn:hover {
+            background: rgba(255,255,255,0.08);
+            border-color: rgba(34,211,160,0.3);
+        }
+
         .msg {
             font-size: 12px;
             min-height: 18px;
@@ -238,6 +266,13 @@
             <input class="input" type="password" id="login-pw" placeholder="비밀번호" onkeydown="if(event.key==='Enter')doLogin()">
             <div class="msg" id="login-msg"></div>
             <button class="submit" id="login-btn" onclick="doLogin()" data-ko="로그인" data-en="Log in">로그인</button>
+            <div id="sso-section" style="display:none;">
+                <div class="sso-divider" id="sso-divider-text">또는</div>
+                <button class="sso-btn" id="sso-btn" onclick="doSSOLogin()">
+                    <i class="ti ti-building"></i>
+                    <span id="sso-btn-label">SSO로 로그인</span>
+                </button>
+            </div>
             <p class="switch" id="login-switch">
                 <span id="no-account-text">계정이 없으신가요?</span>
                 <a href="#" onclick="showSection('register');return false;" id="go-register-link">회원가입</a>
@@ -281,6 +316,7 @@
                 err_fill: '모든 항목을 입력해주세요.',
                 err_login_fail: '이메일 또는 비밀번호가 틀렸습니다.',
                 err_server: '서버 연결 실패',
+                sso_divider: '또는', sso_btn: '로 로그인',
             },
             en: {
                 login_title: 'Lattice AI', login_sub: 'Local AI Workspace — Apple Silicon',
@@ -294,6 +330,7 @@
                 err_fill: 'Please fill in all fields.',
                 err_login_fail: 'Invalid email or password.',
                 err_server: 'Server connection failed',
+                sso_divider: 'or', sso_btn: 'Sign in with',
             }
         };
 
@@ -319,12 +356,33 @@
             document.getElementById('reg-name').placeholder = t('ph_name');
             document.getElementById('reg-nick').placeholder = t('ph_nick');
             document.getElementById('lang-label').textContent = lang === 'ko' ? '한국어' : 'English';
+            document.getElementById('sso-divider-text').textContent = t('sso_divider');
+            const ssoName = window._ssoProviderName || 'SSO';
+            document.getElementById('sso-btn-label').textContent =
+                lang === 'ko' ? `${ssoName}${t('sso_btn')}` : `${t('sso_btn')} ${ssoName}`;
             ['ko', 'en'].forEach(l => {
                 const el = document.getElementById(`opt-${l}`);
                 if (el) el.classList.toggle('active', l === lang);
             });
         }
 
+        async function initSSO() {
+            try {
+                const res = await apiFetch('/auth/sso/config');
+                if (!res.ok) return;
+                const cfg = await res.json();
+                if (cfg.enabled) {
+                    window._ssoProviderName = cfg.provider_name;
+                    document.getElementById('sso-section').style.display = '';
+                    applyI18n();
+                }
+            } catch {}
+        }
+
+        function doSSOLogin() {
+            window.location.href = '/auth/sso/login';
+        }
+
         function toggleLang() {
             const m = document.getElementById('lang-menu');
             m.classList.toggle('open');
@@ -436,6 +494,8 @@
             if (r.ok) window.location.href = '/chat';
         }).catch(() => {});
 
+        initSSO();
+
         // Handle invite code in URL
         const urlCode = new URLSearchParams(window.location.search).get('code');
         if (urlCode) {

package/static/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;
@@ -420,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);
@@ -2827,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>
@@ -2834,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>
@@ -2909,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>
@@ -4926,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)) {
@@ -6013,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>