protocol-proxy 2.8.3 → 2.10.1

package/public/app.js

@@ -17,9 +17,20 @@ let currentPage = 'dashboard';
 let providerPoolItems = [];
 let providerModelTags = [];
 let providerKeys = [];
-let assistantMessages = [];
+let assistantMessages = []; // 仅用于 UI 渲染
 let assistantProxyId = '';
+let assistantProviderId = ''; // 用于级联选择的模型列表
+let proxyProviders = []; // 当前代理的候选供应商列表
+let savedAssistantProxyId = ''; // 从设置恢复的上次选择
+let savedAssistantProviderId = '';
+let savedAssistantModel = '';
 let assistantAbortController = null;
+let assistantConversationId = '';
+let contextTokens = 0;
+let contextMaxTokens = 200000;
+let contextPercent = 0;
+let contextMessages = 0;
+let assistantMaxRounds = 10;
 
 // ---------- Theme ----------
 const THEMES = [
@@ -61,6 +72,19 @@ function cycleTheme() {
     const res = await fetch('/api/settings');
     const settings = await res.json();
     applyTheme(settings.theme || localStorage.getItem('theme') || 'dark');
+    if (settings.maxContext) contextMaxTokens = parseInt(settings.maxContext) || 200000;
+    if (settings.maxRounds) assistantMaxRounds = Math.max(1, Math.min(100, parseInt(settings.maxRounds) || 10));
+    // 更新设置页输入框（此时 DOM 已加载）
+    const mcInput = document.getElementById('settings-max-conversations');
+    if (mcInput && settings.maxConversations !== undefined) mcInput.value = settings.maxConversations;
+    const mcxInput = document.getElementById('settings-max-context');
+    if (mcxInput) mcxInput.value = contextMaxTokens;
+    const mrInput = document.getElementById('settings-max-rounds');
+    if (mrInput) mrInput.value = assistantMaxRounds;
+    // 恢复助手选择
+    if (settings.assistantProxyId) savedAssistantProxyId = settings.assistantProxyId;
+    if (settings.assistantProviderId) savedAssistantProviderId = settings.assistantProviderId;
+    if (settings.assistantModel) savedAssistantModel = settings.assistantModel;
   } catch {
     applyTheme(localStorage.getItem('theme') || 'dark');
   }
@@ -84,6 +108,8 @@ function navigateTo(page) {
     'request-logs': '\u8bf7\u6c42\u65e5\u5fd7',
     'system-logs': '\u7cfb\u7edf\u65e5\u5fd7',
     assistant: '\u667a\u63a7\u52a9\u624b',
+    skills: '\u6280\u80fd\u7ba1\u7406',
+    'mcp-servers': 'MCP \u670d\u52a1',
     settings: '\u8bbe\u7f6e',
   };
   document.getElementById('page-title').textContent = titles[page] || page;
@@ -95,7 +121,9 @@ function navigateTo(page) {
   if (page === 'stats') loadStats();
   if (page === 'system-logs') loadLogs();
   if (page === 'request-logs') renderRequestLogs();
-  if (page === 'assistant') populateAssistantProxySelect();
+  if (page === 'assistant') { populateAssistantProxySelect(); loadConversations(); loadAssistantSkills(); }
+  if (page === 'skills') loadSkills();
+  if (page === 'mcp-servers') loadMcpServers();
 }
 
 document.querySelectorAll('.nav-item[data-page]').forEach(item => {
@@ -1105,6 +1133,11 @@ function connectRequestLogWS() {
     ws.onmessage = (e) => {
       try {
         const msg = JSON.parse(e.data);
+        // MCP 状态更新
+        if (msg.type === 'mcp_status') {
+          updateMcpServerStatus(msg.server, msg);
+          return;
+        }
         const entry = msg.id ? msg : (msg.data || msg);
         if (entry && entry.id) {
           requestLogs.unshift(entry);
@@ -1555,6 +1588,12 @@ async function init() {
     document.getElementById('provider-azure-row').style.display = this.value === 'openai' ? 'grid' : 'none';
   });
 
+  // 加载版本号
+  fetch('/api/health').then(r => r.json()).then(d => {
+    const el = document.getElementById('app-version');
+    if (el && d.version) el.textContent = 'v' + d.version;
+  }).catch(() => {});
+
   await Promise.all([loadProxies(), loadProviders(), loadKeyHealth()]);
   loadStats();
   loadLogs();
@@ -1579,12 +1618,13 @@ async function init() {
   setInterval(loadStats, 30000);
   setInterval(loadKeyHealth, 5 * 60 * 1000);
 
-  // Assistant textarea auto-resize
+  // Assistant textarea auto-resize + skill autocomplete
   const assistantInput = document.getElementById('assistant-input');
   if (assistantInput) {
     assistantInput.addEventListener('input', function() {
       this.style.height = 'auto';
       this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+      updateSkillAutocomplete(this.value);
     });
     assistantInput.addEventListener('keydown', function(e) {
       if (e.key === 'Enter' && !e.shiftKey) {
@@ -1593,6 +1633,13 @@ async function init() {
       }
     });
   }
+  // 点击外部关闭补全
+  document.addEventListener('click', (e) => {
+    const ac = document.getElementById('skill-autocomplete');
+    if (ac && !ac.contains(e.target) && e.target.id !== 'assistant-input') {
+      ac.style.display = 'none';
+    }
+  });
 }
 
 async function loadRequestLogHistory() {
@@ -1616,56 +1663,22 @@ function populateAssistantProxySelect() {
   const current = select.value;
   select.innerHTML = '<option value="">选择后端代理...</option>' +
     running.map(p => `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)} (:${p.port})</option>`).join('');
-  if (current && running.find(p => p.id === current)) {
-    select.value = current;
+  const preferredId = (current && running.find(p => p.id === current)) ? current
+    : (savedAssistantProxyId && running.find(p => p.id === savedAssistantProxyId)) ? savedAssistantProxyId
+    : running.length > 0 ? running[0].id : '';
+  if (preferredId) {
+    select.value = preferredId;
+    assistantProxyId = preferredId;
+    document.getElementById('assistant-send-btn').disabled = false;
+    loadProxyProviders(preferredId);
   } else {
     assistantProxyId = '';
     document.getElementById('assistant-send-btn').disabled = true;
   }
 }
 
-function buildSystemPrompt() {
-  const now = new Date().toLocaleString('zh-CN', { hour12: false });
-  return `你是 Protocol Proxy 的智能助手，专门帮助管理员监控和排障。当前时间：${now}
-
-你有以下工具可以调用：
-
-系统查询：
-- get_system_status: 获取系统概览（代理运行状态、供应商数量、运行时长）
-- get_providers / get_provider: 获取供应商列表或详情
-- get_proxies / get_proxy: 获取代理列表或详情
-- get_usage_stats: 查询用量统计（支持按时间范围、代理筛选）
-- get_recent_requests: 获取最近请求日志
-- get_system_logs: 获取系统日志
-- get_key_health: 获取 API Key 健康检查结果
-- get_settings: 获取系统设置项
-- get_config_history: 获取配置快照历史
-
-文件与命令：
-- read_file: 读取任意文件内容（支持指定行范围）
-- write_file: 写入文件（会覆盖已有内容）
-- list_directory: 列出目录内容
-- search_files: 按 glob 模式搜索文件
-- execute_command: 执行 shell 命令
-
-规则：
-- 当用户询问系统状态、代理、供应商、日志、用量等运维相关问题时，调用工具获取实时数据后再回答
-- 当用户需要查看或修改文件、执行命令时，使用对应的文件和命令工具
-- 当用户只是打招呼、闲聊、或询问与系统无关的问题时，直接回答，不要调用工具
-- 不要凭空猜测系统状态，需要数据时必须调用工具
-- 执行写操作或危险命令前，先告知用户将要做什么
-
-你的职责：
-1. 回答关于代理配置和运行状态的问题
-2. 分析日志，指出异常和可能原因
-3. 根据数据给出优化建议（负载均衡、模型选择、故障切换策略）
-4. 用自然语言解释技术问题
-5. 如果发现问题，给出具体的修复步骤
-
-请用中文回答，保持专业且易懂。`;
-}
-
 async function sendAssistantMessage() {
+  if (assistantAbortController) return; // 已有请求进行中，防连点
   const input = document.getElementById('assistant-input');
   const text = input.value.trim();
   if (!text || !assistantProxyId) return;
@@ -1674,29 +1687,6 @@ async function sendAssistantMessage() {
   input.value = '';
   input.style.height = 'auto';
 
-  const systemPrompt = buildSystemPrompt();
-
-  // 构建消息历史，正确序列化 tool 相关字段
-  const messages = [
-    { role: 'system', content: systemPrompt },
-    ...assistantMessages.filter(m => m.role !== 'thinking' && m.role !== 'tool-calls' && m.role !== 'tool-result').map(m => {
-      if (m.role === 'assistant' && m.tool_calls) {
-        const msg = { role: 'assistant', content: m.content || null, tool_calls: m.tool_calls };
-        if (m.reasoning_content) msg.reasoning_content = m.reasoning_content;
-        return msg;
-      }
-      if (m.role === 'assistant' && m.reasoning_content) {
-        const msg = { role: 'assistant', content: m.content };
-        msg.reasoning_content = m.reasoning_content;
-        return msg;
-      }
-      if (m.role === 'tool') {
-        return { role: 'tool', tool_call_id: m.tool_call_id, content: m.content };
-      }
-      return { role: m.role, content: m.content };
-    })
-  ];
-
   const proxy = proxies.find(p => p.id === assistantProxyId);
   if (!proxy) {
     addAssistantMessage('assistant', '所选代理不存在或已停止，请重新选择。');
@@ -1704,13 +1694,20 @@ async function sendAssistantMessage() {
   }
 
   const thinkingId = addAssistantMessage('thinking', '');
-  assistantAbortController = new AbortController();
+  const myController = new AbortController();
+  assistantAbortController = myController;
 
   try {
+    const providerVal = document.getElementById('assistant-provider-select')?.value || '';
+    const modelVal = document.getElementById('assistant-model-select')?.value || '';
     const res = await fetch('/api/assistant/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ proxyId: proxy.id, messages }),
+      body: JSON.stringify({
+        proxyId: proxy.id, conversationId: assistantConversationId, message: text,
+        ...(providerVal && { providerId: providerVal }),
+        ...(modelVal && { model: modelVal }),
+      }),
       signal: assistantAbortController.signal,
     });
 
@@ -1727,9 +1724,7 @@ async function sendAssistantMessage() {
     let fullContent = '';
     let currentEvent = '';
     let msgId = null;
-
-    removeAssistantMessage(thinkingId);
-    console.log('[assistant] SSE stream started');
+    let thinkingRemoved = false;
 
     while (true) {
       const { done, value } = await reader.read();
@@ -1752,33 +1747,22 @@ async function sendAssistantMessage() {
         let data;
         try { data = JSON.parse(trimmed.slice(6)); } catch { continue; }
 
-        console.log('[assistant] SSE event:', currentEvent, data);
         switch (currentEvent) {
           case 'content': {
-            if (!msgId) msgId = addAssistantMessage('assistant', '');
+            if (!thinkingRemoved) { removeAssistantMessage(thinkingId); thinkingRemoved = true; }
+            if (!msgId) {
+              msgId = addAssistantMessage('assistant', '');
+
+            }
             fullContent += data.delta;
             updateAssistantMessage(msgId, fullContent);
             break;
           }
 
           case 'tool_calls': {
+            if (!thinkingRemoved) { removeAssistantMessage(thinkingId); thinkingRemoved = true; }
             const calls = data.calls || [];
-            const toolCallsData = calls.map(tc => ({
-              id: tc.id,
-              type: 'function',
-              function: { name: tc.name, arguments: JSON.stringify(tc.arguments || {}) },
-            }));
-            // 存储 assistant 消息（含 tool_calls）用于对话序列化
-            const assistantMsg = {
-              id: 'msg-' + Date.now() + '-' + Math.random().toString(36).slice(2),
-              role: 'assistant',
-              content: fullContent || null,
-              tool_calls: toolCallsData,
-            };
-            if (data.reasoning_content) assistantMsg.reasoning_content = data.reasoning_content;
-            assistantMessages.push(assistantMsg);
             fullContent = '';
-            // 创建显示用的 tool-calls 消息
             const callHtml = calls.map(tc => {
               const argsStr = Object.keys(tc.arguments || {}).length > 0
                 ? `<span class="tool-call-args">${escapeHtml(JSON.stringify(tc.arguments))}</span>`
@@ -1791,37 +1775,62 @@ async function sendAssistantMessage() {
 
           case 'tool_result': {
             const resultStr = JSON.stringify(data.result, null, 2);
-            addAssistantMessage('tool-result', { name: data.name, result: resultStr, tool_call_id: data.tool_call_id });
-            // 追加 role: 'tool' 消息用于对话序列化（不创建 DOM 元素）
-            assistantMessages.push({
-              id: 'msg-' + Date.now() + '-' + Math.random().toString(36).slice(2),
-              role: 'tool',
-              tool_call_id: data.tool_call_id,
-              tool_name: data.name,
-              content: JSON.stringify(data.result),
-            });
+            addAssistantMessage('tool-result', { name: data.name, result: resultStr, tool_call_id: data.tool_call_id, is_error: data.is_error });
             break;
           }
 
           case 'done': {
+            if (!thinkingRemoved) { removeAssistantMessage(thinkingId); thinkingRemoved = true; }
             if (msgId) {
               const msgObj = assistantMessages.find(m => m.id === msgId);
               if (msgObj) {
+                // 将 reasoning_content 包装为 <think> 标签以便统一渲染
+                if (data.reasoning_content && !fullContent.includes('<think>')) {
+                  fullContent = `<think>${data.reasoning_content}</think>` + fullContent;
+                }
                 msgObj.content = fullContent;
-                if (data.reasoning_content) msgObj.reasoning_content = data.reasoning_content;
+                updateAssistantMessage(msgId, fullContent);
               }
             }
             break;
           }
 
           case 'error': {
+            if (!thinkingRemoved) { removeAssistantMessage(thinkingId); thinkingRemoved = true; }
             addAssistantMessage('assistant', `错误: ${data.message}`);
             break;
           }
+
+          case 'context': {
+            contextTokens = data.tokens;
+            contextMaxTokens = data.maxTokens || contextMaxTokens;
+            contextPercent = data.percent;
+            contextMessages = data.messages;
+            updateContextBar();
+            break;
+          }
+
+          case 'compressed': {
+            if (data.summary) applyCompression(data);
+            break;
+          }
+
+          case 'compressing': {
+            break;
+          }
+
+          case 'conversation': {
+            assistantConversationId = data.id;
+            loadConversations();
+            break;
+          }
         }
       }
     }
 
+    // 流结束时确保 thinking 点被移除
+    if (!thinkingRemoved) removeAssistantMessage(thinkingId);
+
     // 流结束但没有收到 done 事件时，确保最终内容被保存
     if (msgId && fullContent) {
       const msgObj = assistantMessages.find(m => m.id === msgId);
@@ -1836,7 +1845,7 @@ async function sendAssistantMessage() {
       addAssistantMessage('assistant', `请求出错: ${err.message}`);
     }
   } finally {
-    assistantAbortController = null;
+    if (assistantAbortController === myController) assistantAbortController = null;
   }
 }
 
@@ -1862,13 +1871,14 @@ function addAssistantMessage(role, content) {
     // content 已经是 HTML 字符串
     div.innerHTML = `<div class="tool-calls-header">调用工具</div>${content}`;
   } else if (role === 'tool-result') {
-    // content 是 {name, result, tool_call_id}
+    // content 是 {name, result, tool_call_id, is_error}
     const toolData = typeof content === 'object' ? content : { name: 'unknown', result: content };
     const resultId = 'result-' + id;
+    if (toolData.is_error) div.classList.add('tool-error');
     div.innerHTML = `
       <div class="tool-result-header" onclick="document.getElementById('${resultId}').classList.toggle('expanded')">
-        <span class="tool-result-name">${escapeHtml(toolData.name)}</span>
-        <span class="tool-result-toggle">展开结果 ▾</span>
+        <span class="tool-result-name">${toolData.is_error ? '⚠ ' : ''}${escapeHtml(toolData.name)}</span>
+        <span class="tool-result-toggle">${toolData.is_error ? '错误详情 ▾' : '展开结果 ▾'}</span>
       </div>
       <div class="tool-result-body" id="${resultId}">
         <pre>${escapeHtml(toolData.result)}</pre>
@@ -1908,7 +1918,19 @@ function removeAssistantMessage(id) {
 
 function formatAssistantContent(text) {
   if (!text) return '';
-  let html = escapeHtml(text);
+  // 将 <think>...</think> 渲染为可折叠的思考块（在 escapeHtml 之前提取）
+  const thinkBlocks = [];
+  let processed = text.replace(/<think>([\s\S]*?)<\/think>/g, (_, think) => {
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(think.trim());
+    return `\x00THINK_${idx}\x00`;
+  });
+  let html = escapeHtml(processed);
+  // 还原思考块为 HTML
+  html = html.replace(/\x00THINK_(\d+)\x00/g, (_, idx) => {
+    const thinkId = 'think-' + Date.now() + '-' + Math.random().toString(36).slice(2, 6);
+    return `<details class="think-block"><summary>思考过程</summary><div class="think-content" id="${thinkId}">${escapeHtml(thinkBlocks[parseInt(idx)])}</div></details>`;
+  });
   // 代码块
   html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
   // 行内代码
@@ -1937,6 +1959,17 @@ function formatAssistantContent(text) {
 
 function clearAssistantChat() {
   assistantMessages = [];
+  assistantConversationId = '';
+  assistantProviderId = '';
+  const trigger = document.getElementById('conversation-dropdown-trigger');
+  if (trigger) trigger.textContent = '新会话';
+  proxyProviders = [];
+  populateProviderSelect();
+  populateModelSelect();
+  contextTokens = 0;
+  contextPercent = 0;
+  contextMessages = 0;
+  updateContextBar();
   const chat = document.getElementById('assistant-chat');
   if (!chat) return;
   chat.innerHTML = `
@@ -1957,6 +1990,301 @@ function clearAssistantChat() {
   `;
 }
 
+function formatTokenCount(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+  return String(n);
+}
+
+function updateContextBar() {
+  const bar = document.getElementById('assistant-context-bar');
+  if (!bar) return;
+  if (contextMessages === 0) {
+    bar.style.display = 'none';
+    return;
+  }
+  bar.style.display = 'flex';
+
+  document.getElementById('context-bar-tokens').textContent = formatTokenCount(contextTokens);
+  document.getElementById('context-bar-max').textContent = formatTokenCount(contextMaxTokens);
+  document.getElementById('context-bar-percent').textContent = contextPercent.toFixed(1);
+  document.getElementById('context-bar-messages').textContent = contextMessages;
+
+  const fill = document.getElementById('context-bar-fill');
+  const pct = Math.min(100, contextPercent);
+  fill.style.width = pct + '%';
+  fill.className = 'context-bar-fill' + (pct >= 80 ? ' high' : pct >= 50 ? ' mid' : '');
+
+  const compressBtn = document.getElementById('context-compress-btn');
+  if (compressBtn) {
+    compressBtn.style.display = pct >= 50 ? '' : 'none';
+  }
+}
+
+function updateMaxContext(value) {
+  const v = Math.max(10000, parseInt(value) || 200000);
+  contextMaxTokens = v;
+  fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ maxContext: v }) }).catch(() => {});
+  if (contextTokens > 0) {
+    contextPercent = Math.round(contextTokens / contextMaxTokens * 1000) / 10;
+    updateContextBar();
+  }
+}
+
+function updateMaxRounds(value) {
+  const v = Math.max(1, Math.min(100, parseInt(value) || 10));
+  assistantMaxRounds = v;
+  fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ maxRounds: v }) }).catch(() => {});
+}
+
+function updateMaxConversations(value) {
+  const v = Math.max(0, parseInt(value) || 0);
+  fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ maxConversations: v }) }).catch(() => {});
+}
+
+function toggleConversationDropdown() {
+  const menu = document.getElementById('conversation-dropdown-menu');
+  if (!menu) return;
+  menu.classList.toggle('open');
+}
+
+function updateConversationTriggerLabel() {
+  const trigger = document.getElementById('conversation-dropdown-trigger');
+  if (!trigger) return;
+  if (assistantConversationId) {
+    const item = document.querySelector(`.conversation-dropdown-item[data-id="${assistantConversationId}"] .conversation-dropdown-item-label`);
+    trigger.textContent = item ? item.textContent : assistantConversationId;
+  } else {
+    trigger.textContent = '新会话';
+  }
+}
+
+async function deleteConversationById(convId, event) {
+  event.stopPropagation();
+  const ok = await showConfirm('确定删除该会话？');
+  if (!ok) return;
+  try {
+    await fetch(`/api/assistant/conversations/${convId}`, { method: 'DELETE' });
+    if (assistantConversationId === convId) clearAssistantChat();
+    await loadConversations();
+    showToast('会话已删除');
+  } catch (err) {
+    showToast('删除失败: ' + err.message, true);
+  }
+}
+
+async function loadConversations() {
+  try {
+    const res = await fetch('/api/assistant/conversations');
+    const data = await res.json();
+    const menu = document.getElementById('conversation-dropdown-menu');
+    if (!menu) return;
+    const sorted = (data.conversations || []).slice().reverse();
+    menu.innerHTML = '';
+    for (const c of sorted) {
+      const date = new Date(c.lastActivity).toLocaleString('zh-CN', { hour12: false, month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+      const label = (c.preview || '空会话').slice(0, 30) + ' — ' + date;
+      const item = document.createElement('div');
+      item.className = 'conversation-dropdown-item' + (c.id === assistantConversationId ? ' active' : '');
+      item.dataset.id = c.id;
+      item.innerHTML = `<span class="conversation-dropdown-item-label">${escapeHtml(label)}</span><button class="conversation-dropdown-item-delete" title="删除">×</button>`;
+      item.querySelector('.conversation-dropdown-item-label').onclick = () => {
+        menu.classList.remove('open');
+        document.getElementById('conversation-dropdown-trigger').textContent = label;
+        switchConversation(c.id);
+      };
+      item.querySelector('.conversation-dropdown-item-delete').onclick = (e) => deleteConversationById(c.id, e);
+      menu.appendChild(item);
+    }
+    updateConversationTriggerLabel();
+  } catch (err) {
+    showToast('加载会话列表失败: ' + err.message, true);
+  }
+}
+
+async function switchConversation(convId) {
+  // 中断进行中的请求，避免旧流的 DOM 更新与新会话冲突
+  if (assistantAbortController) {
+    assistantAbortController.abort();
+    assistantAbortController = null;
+  }
+  if (!convId) {
+    // 选择"新会话"
+    clearAssistantChat();
+    return;
+  }
+  assistantConversationId = convId;
+  assistantMessages = [];
+  const chat = document.getElementById('assistant-chat');
+  if (chat) chat.innerHTML = '';
+
+  // 重置上下文栏，避免显示前一个会话的 token 统计
+  contextTokens = 0;
+  contextPercent = 0;
+  contextMessages = 0;
+  updateContextBar();
+
+  try {
+    const res = await fetch(`/api/assistant/conversations/${convId}/messages`);
+    const data = await res.json();
+    if (data.proxyId) {
+      // 自动选中对应的代理
+      const select = document.getElementById('assistant-proxy-select');
+      if (select && select.querySelector(`option[value="${data.proxyId}"]`)) {
+        select.value = data.proxyId;
+        assistantProxyId = data.proxyId;
+        document.getElementById('assistant-send-btn').disabled = false;
+      }
+      loadProxyProviders(data.proxyId);
+    }
+    // 渲染压缩摘要（如果有）
+    if (data.compressionSummary) {
+      const chatEl = document.getElementById('assistant-chat');
+      if (chatEl) {
+        const details = document.createElement('details');
+        details.className = 'compression-summary';
+        details.innerHTML = `<summary>之前的对话已被压缩</summary><div class="compression-summary-content">${escapeHtml(data.compressionSummary)}</div>`;
+        chatEl.appendChild(details);
+      }
+    }
+    // 渲染历史消息
+    for (const m of (data.messages || [])) {
+      if (m.role === 'user') {
+        addAssistantMessage('user', m.content);
+      } else if (m.role === 'assistant') {
+        addAssistantMessage('assistant', m.content || '');
+      }
+    }
+  } catch (err) {
+    showToast('加载会话失败: ' + err.message, true);
+  }
+}
+
+
+async function compressAssistantContext() {
+  if (!assistantProxyId || !assistantConversationId) return;
+  const btn = document.getElementById('context-compress-btn');
+  if (btn) { btn.disabled = true; btn.textContent = '压缩中...'; }
+  try {
+    const res = await fetch('/api/assistant/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        proxyId: assistantProxyId, conversationId: assistantConversationId, message: '', compress: true,
+        ...(document.getElementById('assistant-provider-select')?.value && { providerId: document.getElementById('assistant-provider-select').value }),
+        ...(document.getElementById('assistant-model-select')?.value && { model: document.getElementById('assistant-model-select').value }),
+      }),
+    });
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let currentEvent = '';
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop();
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+        if (trimmed.startsWith('event: ')) { currentEvent = trimmed.slice(7); continue; }
+        if (!trimmed.startsWith('data: ')) continue;
+        let data;
+        try { data = JSON.parse(trimmed.slice(6)); } catch { continue; }
+        if (currentEvent === 'compressed' && data.summary) applyCompression(data);
+        if (currentEvent === 'context') {
+          contextTokens = data.tokens;
+          contextMaxTokens = data.maxTokens;
+          contextPercent = data.percent;
+          contextMessages = data.messages;
+          updateContextBar();
+        }
+      }
+    }
+  } catch (err) {
+    showToast('压缩失败: ' + err.message, true);
+  } finally {
+    if (btn) { btn.disabled = false; btn.textContent = '压缩'; }
+  }
+}
+
+function applyCompression(data) {
+  // 后端已完成压缩，前端只更新显示
+  if (data.tokens != null) contextTokens = data.tokens;
+  if (data.maxTokens) contextMaxTokens = data.maxTokens;
+  contextPercent = Math.round(contextTokens / contextMaxTokens * 1000) / 10;
+  contextMessages = data.messages || 0;
+  updateContextBar();
+  if (data.summary) {
+    showToast(`已压缩 ${data.removedCount} 条消息，摘要已保存`);
+  }
+}
+
+// 加载代理的候选供应商列表
+async function loadProxyProviders(proxyId) {
+  assistantProviderId = '';
+  proxyProviders = [];
+  populateProviderSelect();
+  populateModelSelect();
+  if (!proxyId) return;
+  try {
+    const res = await fetch(`/api/assistant/proxy-providers/${proxyId}`);
+    const data = await res.json();
+    proxyProviders = data.providers || [];
+    // 恢复保存的供应商选择
+    if (savedAssistantProviderId && proxyProviders.find(p => p.id === savedAssistantProviderId)) {
+      assistantProviderId = savedAssistantProviderId;
+      savedAssistantProviderId = ''; // 只恢复一次
+    }
+    populateProviderSelect();
+    populateModelSelect();
+    // 恢复保存的模型选择
+    if (savedAssistantModel) {
+      const modelSelect = document.getElementById('assistant-model-select');
+      if (modelSelect && modelSelect.querySelector(`option[value="${savedAssistantModel}"]`)) {
+        modelSelect.value = savedAssistantModel;
+      }
+      savedAssistantModel = ''; // 只恢复一次
+    }
+  } catch (err) {
+    console.warn('[assistant] 加载供应商列表失败:', err.message);
+  }
+}
+
+function populateProviderSelect() {
+  const select = document.getElementById('assistant-provider-select');
+  if (!select) return;
+  select.innerHTML = '<option value="">自动（跟随代理）</option>' +
+    proxyProviders.map(p => `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)} (${escapeHtml(p.protocol)})</option>`).join('');
+  select.value = assistantProviderId;
+}
+
+function populateModelSelect() {
+  const select = document.getElementById('assistant-model-select');
+  if (!select) return;
+  const provider = proxyProviders.find(p => p.id === assistantProviderId);
+  const models = provider?.models || [];
+  select.innerHTML = '<option value="">自动（跟随代理）</option>' +
+    models.map(m => `<option value="${escapeHtml(m)}">${escapeHtml(m)}</option>`).join('');
+}
+
+// eslint-disable-next-line no-unused-vars
+function onAssistantProviderChange(value) {
+  assistantProviderId = value;
+  populateModelSelect();
+  saveAssistantSelection();
+}
+
+function saveAssistantSelection() {
+  const modelVal = document.getElementById('assistant-model-select')?.value || '';
+  fetch('/api/settings', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ assistantProxyId, assistantProviderId, assistantModel: modelVal }),
+  }).catch(() => {});
+}
+
 // 监听代理选择
 (function() {
   const select = document.getElementById('assistant-proxy-select');
@@ -1965,8 +2293,676 @@ function clearAssistantChat() {
       assistantProxyId = this.value;
       const btn = document.getElementById('assistant-send-btn');
       if (btn) btn.disabled = !this.value;
+      loadProxyProviders(this.value);
+      saveAssistantSelection();
+    });
+  }
+  // 监听模型选择
+  const modelSelect = document.getElementById('assistant-model-select');
+  if (modelSelect) {
+    modelSelect.addEventListener('change', function() {
+      saveAssistantSelection();
     });
   }
 })();
 
+// 点击外部关闭会话下拉
+document.addEventListener('click', (e) => {
+  const dropdown = document.getElementById('conversation-dropdown');
+  if (dropdown && !dropdown.contains(e.target)) {
+    document.getElementById('conversation-dropdown-menu')?.classList.remove('open');
+  }
+});
+
+// ========== 助手 Skill 补全 ==========
+let assistantSkills = []; // 助手页面缓存的 skill 列表
+
+async function loadAssistantSkills() {
+  try {
+    const res = await fetch('/api/skills');
+    const data = await res.json();
+    assistantSkills = data.skills || [];
+    renderSkillPanel();
+  } catch {}
+}
+
+function toggleSkillPanel() {
+  const panel = document.getElementById('skill-panel');
+  if (!panel) return;
+  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+}
+
+function renderSkillPanel() {
+  const list = document.getElementById('skill-panel-list');
+  if (!list) return;
+  const catColors = { system: 'var(--error)', preset: 'var(--warning)', user: 'var(--success)' };
+  const catLabels = { system: '系统', preset: '预设', user: '用户' };
+  if (assistantSkills.length === 0) {
+    list.innerHTML = '<div style="padding:8px;color:var(--text-muted);font-size:12px">暂无可用技能，可前往「技能管理」页面创建</div>';
+    return;
+  }
+  list.innerHTML = assistantSkills.map(s =>
+    `<div class="skill-panel-item" data-name="${escapeHtml(s.name)}">
+      <span class="skill-panel-badge" style="background:${catColors[s.category] || 'var(--text-muted)'}">${catLabels[s.category] || s.category}</span>
+      <strong>/${escapeHtml(s.name)}</strong>
+      <span class="skill-panel-desc">${escapeHtml(s.description || '')}</span>
+    </div>`
+  ).join('');
+  list.onclick = (e) => {
+    const item = e.target.closest('[data-name]');
+    if (item) selectSkill(item.dataset.name);
+  };
+}
+
+function updateSkillAutocomplete(text) {
+  const ac = document.getElementById('skill-autocomplete');
+  if (!ac) return;
+  // 只在输入以 / 开头且没有空格（还没输入参数）时显示
+  const match = text.match(/^\/([a-zA-Z0-9_-]*)$/);
+  if (!match) { ac.style.display = 'none'; return; }
+  const query = match[1].toLowerCase();
+  const filtered = assistantSkills.filter(s => s.name.toLowerCase().includes(query));
+  if (filtered.length === 0) { ac.style.display = 'none'; return; }
+  ac.innerHTML = filtered.map(s =>
+    `<div class="skill-ac-item" data-name="${escapeHtml(s.name)}"><strong>/${escapeHtml(s.name)}</strong><span class="skill-ac-desc">${escapeHtml(s.description || '')}</span></div>`
+  ).join('');
+  ac.style.display = 'block';
+  ac.onclick = (e) => {
+    const item = e.target.closest('[data-name]');
+    if (item) selectSkill(item.dataset.name);
+  };
+}
+
+function selectSkill(name) {
+  const input = document.getElementById('assistant-input');
+  if (input) {
+    input.value = '/' + name + ' ';
+    input.focus();
+  }
+  const ac = document.getElementById('skill-autocomplete');
+  if (ac) ac.style.display = 'none';
+}
+
+// ========== 技能管理 ==========
+let allSkills = [];
+let editingSkillName = '';
+let pendingSkillFiles = null; // 待上传的文件夹 [{path, content(base64)}]
+
+async function loadSkills() {
+  try {
+    const res = await fetch('/api/skills');
+    const data = await res.json();
+    allSkills = data.skills || [];
+    renderSkills();
+    const badge = document.getElementById('nav-skill-count');
+    if (badge) badge.textContent = allSkills.length;
+  } catch (err) {
+    showToast('加载技能失败: ' + err.message, true);
+  }
+}
+
+function renderSkills() {
+  const container = document.getElementById('skills-container');
+  if (!container) return;
+  const groups = { system: [], preset: [], user: [] };
+  for (const s of allSkills) (groups[s.category] || groups.user).push(s);
+  const labels = { system: '系统级', preset: '预设', user: '用户' };
+  const colors = { system: 'var(--error)', preset: 'var(--warning)', user: 'var(--success)' };
+  let html = '';
+  for (const [cat, items] of Object.entries(groups)) {
+    if (items.length === 0) continue;
+    html += `<div class="skill-group"><h3 style="margin:0 0 12px;display:flex;align-items:center;gap:8px"><span class="skill-badge" style="background:${colors[cat]};color:#fff;padding:2px 8px;border-radius:4px;font-size:12px">${labels[cat]}</span> ${labels[cat]}技能 (${items.length})</h3><div class="skills-grid">`;
+    for (const s of items) {
+      const canEdit = cat === 'user';
+      const canDelete = cat !== 'system';
+      html += `<div class="skill-card">
+        <div class="skill-card-header"><strong>${escapeHtml(s.name)}</strong></div>
+        <div class="skill-card-desc">${escapeHtml(s.description || '无描述')}</div>
+        <div class="skill-card-actions">
+          <button class="btn btn-sm" data-action="view" data-name="${escapeHtml(s.name)}">查看</button>
+          ${canEdit ? `<button class="btn btn-sm" data-action="edit" data-name="${escapeHtml(s.name)}">编辑</button>` : ''}
+          ${canDelete ? `<button class="btn btn-sm btn-danger" data-action="delete" data-name="${escapeHtml(s.name)}">删除</button>` : ''}
+        </div>
+      </div>`;
+    }
+    html += '</div></div>';
+  }
+  container.innerHTML = html || '<p style="color:var(--text-muted)">暂无技能</p>';
+  container.onclick = (e) => {
+    const btn = e.target.closest('[data-action]');
+    if (!btn) return;
+    const name = btn.dataset.name;
+    const action = btn.dataset.action;
+    if (action === 'view') viewSkill(name);
+    else if (action === 'edit') editSkill(name);
+    else if (action === 'delete') deleteSkill(name);
+  };
+}
+
+function showSkillModal(name) {
+  editingSkillName = name || '';
+  pendingSkillFile = null;
+  const isEdit = !!name;
+  document.getElementById('skill-modal-title').textContent = isEdit ? '编辑技能' : '上传技能';
+  document.getElementById('skill-save-btn').textContent = isEdit ? '保存' : '上传';
+  document.getElementById('skill-upload-section').style.display = isEdit ? 'none' : 'block';
+  document.getElementById('skill-edit-section').style.display = isEdit ? 'block' : 'none';
+  if (isEdit) {
+    document.getElementById('skill-name').value = name;
+    document.getElementById('skill-name').disabled = true;
+    document.getElementById('skill-existing-files').innerHTML = '';
+    fetch(`/api/skills/${encodeURIComponent(name)}`).then(r => r.json()).then(s => {
+      document.getElementById('skill-description').value = s.description || '';
+      document.getElementById('skill-content').value = s.content || '';
+      renderSkillFiles(s);
+    });
+  } else {
+    document.getElementById('skill-file-input').value = '';
+    document.getElementById('skill-file-preview').innerHTML = '';
+  }
+  showModal('skill-modal');
+}
+
+function renderSkillFiles(skill) {
+  const el = document.getElementById('skill-existing-files');
+  const allPaths = [];
+  if (skill.scripts?.length) allPaths.push(...skill.scripts.map(f => `scripts/${f}`));
+  if (skill.references?.length) allPaths.push(...skill.references.map(f => `reference/${f}`));
+  if (allPaths.length === 0) { el.innerHTML = '<span style="color:var(--text-muted)">暂无附属文件</span>'; return; }
+  // 构建树：{ name, children: [...dirs], files: [{name, fullPath}] }
+  const tree = { name: '', children: [], files: [] };
+  for (const p of allPaths) {
+    const parts = p.split('/');
+    let node = tree;
+    for (let i = 0; i < parts.length - 1; i++) {
+      let child = node.children.find(c => c.name === parts[i]);
+      if (!child) { child = { name: parts[i], children: [], files: [] }; node.children.push(child); }
+      node = child;
+    }
+    node.files.push({ name: parts[parts.length - 1], fullPath: p });
+  }
+  const canDelete = skill.category !== 'system';
+  function countAll(node) {
+    return node.files.length + node.children.reduce((s, c) => s + countAll(c), 0);
+  }
+  function renderNode(node, depth) {
+    let html = '';
+    html += renderFiles(node.files, depth);
+    for (const dir of node.children) {
+      html += `<div class="skill-tree-dir" style="padding-left:${depth * 16}px">` +
+        `<span class="skill-tree-arrow">&#9654;</span> <code>${escapeHtml(dir.name)}/</code> <span style="color:var(--text-muted);font-size:11px">(${countAll(dir)})</span></div>`;
+      html += `<div class="skill-tree-children" style="display:none">`;
+      html += renderNode(dir, depth + 1);
+      html += '</div>';
+    }
+    return html;
+  }
+  function renderFiles(files, depth) {
+    return files.map(f =>
+      `<div class="skill-tree-file" style="padding-left:${depth * 16}px">` +
+      `<code>${escapeHtml(f.name)}</code>${canDelete ? ` <button class="btn btn-sm btn-danger" style="padding:0 6px;font-size:11px" data-action="delete-file" data-path="${escapeHtml(f.fullPath)}">删除</button>` : ''}</div>`
+    ).join('');
+  }
+  el.innerHTML = renderNode(tree, 0);
+  el.onclick = (e) => {
+    const dir = e.target.closest('.skill-tree-dir');
+    if (dir) {
+      const children = dir.nextElementSibling;
+      const arrow = dir.querySelector('.skill-tree-arrow');
+      const open = children.style.display === 'none';
+      children.style.display = open ? 'block' : 'none';
+      arrow.style.transform = open ? 'rotate(90deg)' : '';
+      return;
+    }
+    const btn = e.target.closest('[data-action="delete-file"]');
+    if (btn) deleteSkillFile(btn.dataset.path);
+  };
+}
+
+async function uploadSkillFiles() {
+  if (!editingSkillName) return;
+  const input = document.getElementById('skill-upload-input');
+  const subDir = document.getElementById('skill-upload-dir').value;
+  const files = input.files;
+  if (!files.length) return showToast('请选择文件', true);
+  for (const file of files) {
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const base64 = reader.result.split(',')[1];
+      try {
+        const res = await fetch(`/api/skills/${editingSkillName}/upload`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filename: file.name, subDir, content: base64 }),
+        });
+        if (!res.ok) { const e = await res.json(); throw new Error(e.error); }
+        showToast(`已上传 ${file.name}`);
+        // 刷新文件列表
+        const s = await (await fetch(`/api/skills/${editingSkillName}`)).json();
+        renderSkillFiles(s);
+      } catch (err) {
+        showToast('上传失败: ' + err.message, true);
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+  input.value = '';
+}
+
+async function deleteSkillFile(filePath) {
+  if (!editingSkillName) return;
+  const ok = await showConfirm(`确定删除文件 <strong>${escapeHtml(filePath)}</strong>？`);
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/skills/${encodeURIComponent(editingSkillName)}/file`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ filePath }),
+    });
+    if (!res.ok) { const e = await res.json(); throw new Error(e.error); }
+    showToast('文件已删除');
+    const s = await (await fetch(`/api/skills/${editingSkillName}`)).json();
+    renderSkillFiles(s);
+  } catch (err) {
+    showToast('删除失败: ' + err.message, true);
+  }
+}
+
+function closeSkillModal() {
+  hideModal('skill-modal');
+  editingSkillName = '';
+  pendingSkillFiles = null;
+}
+
+// 技能文件夹选择预览
+document.getElementById('skill-file-input')?.addEventListener('change', async (e) => {
+  const files = Array.from(e.target.files);
+  const preview = document.getElementById('skill-file-preview');
+  if (!files.length) { pendingSkillFiles = null; preview.innerHTML = ''; return; }
+  // 找到 SKILL.md（可能在子目录中）
+  const skillMd = files.find(f => f.webkitRelativePath.endsWith('/SKILL.md') || f.name === 'SKILL.md');
+  if (!skillMd) {
+    pendingSkillFiles = null;
+    preview.innerHTML = '<div style="color:var(--error);font-size:13px">文件夹中未找到 SKILL.md</div>';
+    return;
+  }
+  // 读取 SKILL.md 解析 frontmatter
+  const text = await skillMd.text();
+  const fm = text.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+  let name = '', desc = '';
+  if (fm) {
+    for (const line of fm[1].split('\n')) {
+      const nm = line.trim().match(/^name:\s*['"]?(.+?)['"]?\s*$/);
+      const dm = line.trim().match(/^description:\s*['"]?(.+?)['"]?\s*$/);
+      if (nm) name = nm[1];
+      if (dm) desc = dm[1];
+    }
+  }
+  if (!name) {
+    pendingSkillFiles = null;
+    preview.innerHTML = '<div style="color:var(--error);font-size:13px">SKILL.md 缺少 name 字段</div>';
+    return;
+  }
+  // 读取所有文件为 base64
+  const prefix = skillMd.webkitRelativePath.split('/')[0] + '/';
+  pendingSkillFiles = await Promise.all(files.map(async f => {
+    const buf = await f.arrayBuffer();
+    const bytes = new Uint8Array(buf);
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += 8192) binary += String.fromCharCode.apply(null, bytes.subarray(i, i + 8192));
+    return { path: f.webkitRelativePath.replace(prefix, ''), content: btoa(binary) };
+  }));
+  // 预览
+  const fileList = pendingSkillFiles.map(f => `<code>${escapeHtml(f.path)}</code>`).join(' ');
+  preview.innerHTML =
+    `<div style="padding:8px 12px;background:var(--bg-elevated);border-radius:6px;font-size:13px">` +
+    `<div><strong>名称：</strong>${escapeHtml(name)}</div>` +
+    `<div style="color:var(--text-muted)"><strong>描述：</strong>${escapeHtml(desc || '无')}</div>` +
+    `<div style="color:var(--text-muted);font-size:12px;margin-top:4px">文件 (${pendingSkillFiles.length})：${fileList}</div></div>`;
+});
+
+async function saveSkill() {
+  if (!editingSkillName) {
+    // 上传模式
+    if (!pendingSkillFiles) return showToast('请选择技能文件夹', true);
+    try {
+      const res = await fetch('/api/skills/upload', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ files: pendingSkillFiles }),
+      });
+      if (!res.ok) { const e = await res.json(); throw new Error(e.error); }
+      closeSkillModal();
+      await loadSkills();
+      showToast('技能已上传');
+    } catch (err) {
+      showToast('上传失败: ' + err.message, true);
+    }
+    return;
+  }
+  // 编辑模式
+  const name = document.getElementById('skill-name').value.trim();
+  const description = document.getElementById('skill-description').value.trim();
+  const content = document.getElementById('skill-content').value.trim();
+  if (!name || !content) return showToast('名称和内容不能为空', true);
+  try {
+    const res = await fetch(`/api/skills/${encodeURIComponent(editingSkillName)}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, description, content }),
+    });
+    if (!res.ok) { const e = await res.json(); throw new Error(e.error); }
+    closeSkillModal();
+    await loadSkills();
+    showToast('技能已更新');
+  } catch (err) {
+    showToast('保存失败: ' + err.message, true);
+  }
+}
+
+function editSkill(name) {
+  showSkillModal(name);
+}
+
+async function deleteSkill(name) {
+  const ok = await showConfirm(`确定删除技能 <strong>${escapeHtml(name)}</strong>？`);
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/skills/${encodeURIComponent(name)}`, { method: 'DELETE' });
+    if (!res.ok) { const e = await res.json(); throw new Error(e.error); }
+    await loadSkills();
+    showToast('技能已删除');
+  } catch (err) {
+    showToast('删除失败: ' + err.message, true);
+  }
+}
+
+async function viewSkill(name) {
+  try {
+    const res = await fetch(`/api/skills/${encodeURIComponent(name)}`);
+    const s = await res.json();
+    const catColors = { system: 'var(--error)', preset: 'var(--warning)', user: 'var(--success)' };
+    const catLabels = { system: '系统级', preset: '预设', user: '用户' };
+    document.getElementById('skill-view-title').textContent = s.name;
+    const badge = document.getElementById('skill-view-badge');
+    badge.textContent = catLabels[s.category] || s.category;
+    badge.style.background = catColors[s.category] || 'var(--text-muted)';
+    badge.style.color = '#fff';
+    document.getElementById('skill-view-desc').textContent = s.description || '';
+    // 显示附属文件
+    const filesEl = document.getElementById('skill-view-files');
+    const files = [];
+    if (s.scripts?.length) files.push(...s.scripts.map(f => `<code>scripts/${escapeHtml(f)}</code>`));
+    if (s.references?.length) files.push(...s.references.map(f => `<code>reference/${escapeHtml(f)}</code>`));
+    filesEl.innerHTML = files.length > 0 ? `<div style="font-size:12px;color:var(--text-muted)">附属文件: ${files.join(' ')}</div>` : '';
+    // 内容（markdown 渲染）
+    const rawHtml = typeof marked !== 'undefined' ? marked.parse(s.content) : formatAssistantContent(s.content);
+    const contentHtml = typeof DOMPurify !== 'undefined' ? DOMPurify.sanitize(rawHtml) : rawHtml;
+    document.getElementById('skill-view-content').innerHTML = contentHtml;
+    showModal('skill-view-modal');
+  } catch (err) {
+    showToast('加载失败: ' + err.message, true);
+  }
+}
+
+function closeSkillViewModal() {
+  hideModal('skill-view-modal');
+}
+
+// ==================== MCP 服务管理 ====================
+
+let mcpServersData = [];
+let editingMcpName = '';
+
+async function loadMcpServers() {
+  try {
+    const res = await fetch('/api/mcp/servers');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    mcpServersData = await res.json();
+    renderMcpServers();
+    const navBadge = document.getElementById('nav-mcp-count');
+    if (navBadge) navBadge.textContent = mcpServersData.length;
+  } catch (err) {
+    document.getElementById('mcp-servers-container').innerHTML = `<div style="color:var(--error);padding:20px">加载失败: ${escapeHtml(err.message)}</div>`;
+  }
+}
+
+function renderMcpServers() {
+  const container = document.getElementById('mcp-servers-container');
+  if (!mcpServersData.length) {
+    container.innerHTML = `<div style="text-align:center;padding:40px;color:var(--text-muted)">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin-bottom:12px;opacity:0.4"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
+      <p>暂无 MCP 服务配置</p>
+      <p style="font-size:13px">点击上方「添加 MCP 服务」开始</p>
+    </div>`;
+    return;
+  }
+
+  container.innerHTML = `<div class="skills-grid">${mcpServersData.map(s => {
+    const statusColors = { connected: 'var(--success)', connecting: 'var(--warning)', error: 'var(--error)', disconnected: 'var(--text-muted)' };
+    const statusTexts = { connected: '已连接', connecting: '连接中...', error: '错误', disconnected: '已断开' };
+    const color = statusColors[s.status] || 'var(--text-muted)';
+    const statusText = statusTexts[s.status] || s.status;
+    const transportBadge = s.transport === 'http' ? '<span class="skill-badge" style="background:var(--accent-subtle);color:var(--accent);font-size:11px;padding:1px 6px">HTTP</span>' : '<span class="skill-badge" style="background:var(--success-subtle);color:var(--success);font-size:11px;padding:1px 6px">stdio</span>';
+
+    return `<div class="skill-card" data-mcp-name="${escapeHtml(s.name)}">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="width:10px;height:10px;border-radius:50%;background:${color};display:inline-block;flex-shrink:0"></span>
+          <strong style="font-size:15px">${escapeHtml(s.name)}</strong>
+          ${transportBadge}
+          ${!s.enabled ? '<span class="skill-badge" style="background:var(--text-muted);color:#fff;font-size:11px;padding:1px 6px">已禁用</span>' : ''}
+        </div>
+        <span style="font-size:12px;color:${color}">${statusText}</span>
+      </div>
+      <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px">
+        ${s.transport === 'stdio' ? escapeHtml(s.command || '') : escapeHtml(s.url || '')}
+        ${s.tools ? ` · ${s.tools.length} 个工具` : ''}
+        ${s.lastError ? `<br><span style="color:var(--error)">${escapeHtml(s.lastError)}</span>` : ''}
+      </div>
+      <div style="display:flex;gap:8px;flex-wrap:wrap">
+        ${s.status === 'connected' ? `<button class="btn btn-sm" onclick="disconnectMcpServer('${escapeAttr(s.name)}')">断开</button>` : `<button class="btn btn-sm btn-primary" onclick="connectMcpServer('${escapeAttr(s.name)}')">连接</button>`}
+        ${s.tools && s.tools.length ? `<button class="btn btn-sm" onclick="viewMcpTools('${escapeAttr(s.name)}')">查看工具</button>` : ''}
+        <button class="btn btn-sm" onclick="editMcpServer('${escapeAttr(s.name)}')">编辑</button>
+        <button class="btn btn-sm" style="color:var(--error)" onclick="deleteMcpServer('${escapeAttr(s.name)}')">删除</button>
+      </div>
+    </div>`;
+  }).join('')}</div>`;
+}
+
+function toggleMcpTransport() {
+  const val = document.querySelector('input[name="mcp-transport"]:checked').value;
+  document.getElementById('mcp-stdio-fields').style.display = val === 'stdio' ? '' : 'none';
+  document.getElementById('mcp-http-fields').style.display = val === 'http' ? '' : 'none';
+}
+
+function addMcpEnvRow(key, value) {
+  const editor = document.getElementById('mcp-env-editor');
+  const row = document.createElement('div');
+  row.style.cssText = 'display:flex;gap:6px;margin-bottom:4px;align-items:center';
+  row.innerHTML = `<input type="text" placeholder="KEY" style="flex:1;font-size:12px;padding:4px 8px" class="mcp-env-key" value="${escapeAttr(key || '')}"> <input type="text" placeholder="value" style="flex:1;font-size:12px;padding:4px 8px" class="mcp-env-val" value="${escapeAttr(value || '')}"> <button class="btn btn-sm" style="color:var(--error);padding:2px 6px" onclick="this.parentElement.remove()">&times;</button>`;
+  editor.appendChild(row);
+}
+
+function addMcpHeaderRow(key, value) {
+  const editor = document.getElementById('mcp-headers-editor');
+  const row = document.createElement('div');
+  row.style.cssText = 'display:flex;gap:6px;margin-bottom:4px;align-items:center';
+  row.innerHTML = `<input type="text" placeholder="Header-Name" style="flex:1;font-size:12px;padding:4px 8px" class="mcp-header-key" value="${escapeAttr(key || '')}"> <input type="text" placeholder="value" style="flex:1;font-size:12px;padding:4px 8px" class="mcp-header-val" value="${escapeAttr(value || '')}"> <button class="btn btn-sm" style="color:var(--error);padding:2px 6px" onclick="this.parentElement.remove()">&times;</button>`;
+  editor.appendChild(row);
+}
+
+function collectMcpKvPairs(containerId, keyClass, valClass) {
+  const result = {};
+  document.querySelectorAll(`#${containerId} .${keyClass}`).forEach((input, i) => {
+    const key = input.value.trim();
+    const val = input.closest('div').querySelector(`.${valClass}`).value;
+    if (key) result[key] = val;
+  });
+  return result;
+}
+
+function showMcpModal(name) {
+  editingMcpName = name || '';
+  document.getElementById('mcp-modal-title').textContent = name ? '编辑 MCP 服务' : '添加 MCP 服务';
+  document.getElementById('mcp-name').value = name || '';
+  document.getElementById('mcp-name').disabled = !!name;
+  document.getElementById('mcp-command').value = '';
+  document.getElementById('mcp-args').value = '';
+  document.getElementById('mcp-url').value = '';
+  document.getElementById('mcp-enabled').checked = true;
+  document.getElementById('mcp-env-editor').innerHTML = '';
+  document.getElementById('mcp-headers-editor').innerHTML = '';
+  document.querySelector('input[name="mcp-transport"][value="stdio"]').checked = true;
+  toggleMcpTransport();
+
+  if (name) {
+    const s = mcpServersData.find(x => x.name === name);
+    if (s) {
+      document.getElementById('mcp-enabled').checked = s.enabled !== false;
+      if (s.transport === 'http') {
+        document.querySelector('input[name="mcp-transport"][value="http"]').checked = true;
+        toggleMcpTransport();
+        // 从 config 获取 url/headers
+        fetch(`/api/mcp/servers/${encodeURIComponent(name)}`).then(r => r.json()).then(detail => {
+          if (detail.config?.url) document.getElementById('mcp-url').value = detail.config.url;
+          if (detail.config?.headers) {
+            Object.entries(detail.config.headers).forEach(([k, v]) => addMcpHeaderRow(k, v));
+          }
+        });
+      } else {
+        fetch(`/api/mcp/servers/${encodeURIComponent(name)}`).then(r => r.json()).then(detail => {
+          if (detail.config?.command) document.getElementById('mcp-command').value = detail.config.command;
+          if (detail.config?.args) document.getElementById('mcp-args').value = (Array.isArray(detail.config.args) ? detail.config.args : [detail.config.args]).join(' ');
+          if (detail.config?.env) {
+            Object.entries(detail.config.env).forEach(([k, v]) => addMcpEnvRow(k, v));
+          }
+        });
+      }
+    }
+  }
+  showModal('mcp-modal');
+}
+
+function closeMcpModal() {
+  hideModal('mcp-modal');
+  editingMcpName = '';
+}
+
+async function saveMcpServer() {
+  const name = document.getElementById('mcp-name').value.trim();
+  if (!name) return showToast('请输入服务名称', true);
+  if (!/^[a-zA-Z0-9_-]+$/.test(name)) return showToast('名称只能包含英文、数字、连字符、下划线', true);
+
+  const transport = document.querySelector('input[name="mcp-transport"]:checked').value;
+  const enabled = document.getElementById('mcp-enabled').checked;
+  const body = { name, enabled };
+
+  if (transport === 'stdio') {
+    body.command = document.getElementById('mcp-command').value.trim();
+    if (!body.command) return showToast('请输入命令', true);
+    const argsStr = document.getElementById('mcp-args').value.trim();
+    if (argsStr) body.args = argsStr.split(/\s+/);
+    const env = collectMcpKvPairs('mcp-env-editor', 'mcp-env-key', 'mcp-env-val');
+    if (Object.keys(env).length) body.env = env;
+  } else {
+    body.url = document.getElementById('mcp-url').value.trim();
+    if (!body.url) return showToast('请输入 URL', true);
+    const headers = collectMcpKvPairs('mcp-headers-editor', 'mcp-header-key', 'mcp-header-val');
+    if (Object.keys(headers).length) body.headers = headers;
+  }
+
+  try {
+    const url = editingMcpName ? `/api/mcp/servers/${encodeURIComponent(editingMcpName)}` : '/api/mcp/servers';
+    const method = editingMcpName ? 'PUT' : 'POST';
+    const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    const data = await res.json();
+    if (!res.ok) return showToast(data.error || '操作失败', true);
+    showToast(editingMcpName ? '已更新' : '已添加');
+    closeMcpModal();
+    loadMcpServers();
+  } catch (err) {
+    showToast('操作失败: ' + err.message, true);
+  }
+}
+
+async function deleteMcpServer(name) {
+  if (!await showConfirm(`确定删除 MCP 服务「${escapeHtml(name)}」？`)) return;
+  try {
+    const res = await fetch(`/api/mcp/servers/${encodeURIComponent(name)}`, { method: 'DELETE' });
+    if (!res.ok) { const d = await res.json(); return showToast(d.error || '删除失败', true); }
+    showToast('已删除');
+    loadMcpServers();
+  } catch (err) {
+    showToast('删除失败: ' + err.message, true);
+  }
+}
+
+async function connectMcpServer(name) {
+  try {
+    const res = await fetch(`/api/mcp/servers/${encodeURIComponent(name)}/connect`, { method: 'POST' });
+    const data = await res.json();
+    if (!res.ok) return showToast(data.error || '连接失败', true);
+    showToast(`已连接 ${name}`);
+    loadMcpServers();
+  } catch (err) {
+    showToast('连接失败: ' + err.message, true);
+  }
+}
+
+async function disconnectMcpServer(name) {
+  try {
+    await fetch(`/api/mcp/servers/${encodeURIComponent(name)}/disconnect`, { method: 'POST' });
+    showToast(`已断开 ${name}`);
+    loadMcpServers();
+  } catch (err) {
+    showToast('断开失败: ' + err.message, true);
+  }
+}
+
+function editMcpServer(name) {
+  showMcpModal(name);
+}
+
+async function viewMcpTools(name) {
+  try {
+    const res = await fetch(`/api/mcp/servers/${encodeURIComponent(name)}`);
+    const data = await res.json();
+    const tools = data.tools || [];
+    document.getElementById('mcp-tools-title').textContent = `${name} 的工具列表`;
+    const container = document.getElementById('mcp-tools-list');
+    if (!tools.length) {
+      container.innerHTML = '<div style="color:var(--text-muted);text-align:center;padding:20px">暂无工具</div>';
+    } else {
+      container.innerHTML = tools.map(t => `<div style="padding:10px;border:1px solid var(--border);border-radius:6px;margin-bottom:8px">
+        <div style="font-weight:600;font-size:13px;margin-bottom:4px"><code>mcp__${escapeHtml(sanitizeName(name))}__${escapeHtml(t.name)}</code></div>
+        <div style="font-size:12px;color:var(--text-muted)">${escapeHtml(t.description || '')}</div>
+      </div>`).join('');
+    }
+    showModal('mcp-tools-modal');
+  } catch (err) {
+    showToast('加载工具失败: ' + err.message, true);
+  }
+}
+
+function closeMcpToolsModal() {
+  hideModal('mcp-tools-modal');
+}
+
+function sanitizeName(name) {
+  return name.replace(/[^a-zA-Z0-9_-]/g, '_').replace(/-/g, '_');
+}
+
+function updateMcpServerStatus(serverName, statusData) {
+  const idx = mcpServersData.findIndex(s => s.name === serverName);
+  if (idx >= 0) {
+    Object.assign(mcpServersData[idx], statusData);
+    if (currentPage === 'mcp-servers') renderMcpServers();
+  }
+}
+
+function escapeAttr(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
 init();