@greatlhd/ailo-desktop 1.0.0 → 1.0.1

package/dist/static/app.js

@@ -6,6 +6,7 @@ const ICONS = {
   success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
   error:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
   info:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+  warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
 };
 
 function toast(msg, type = 'info', duration = 3500) {
@@ -40,18 +41,29 @@ function setBtnLoading(btn, loading, text) {
 
 function renderBadge(running, configured) {
   if (running)    return '<span class="badge on"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="5"/></svg>运行中</span>';
-  if (configured) return '<span class="badge warning">已配置 · 未运行</span>';
+  if (configured) return '<span class="badge warning">已配置</span>';
   return '<span class="badge muted">未配置</span>';
 }
 
 function updateNavBadge(id, running, configured) {
   const el = document.getElementById(id + 'NavBadge');
   if (!el) return;
-  if (running)    { el.style.display=''; el.className='nav-badge on';  el.textContent='运行中'; }
+  if (running)    { el.style.display=''; el.className='nav-badge on';  el.textContent='在线'; }
   else if (configured) { el.style.display=''; el.className='nav-badge warning'; el.textContent='已配置'; }
   else { el.style.display='none'; }
 }
 
+function updateBadgeCount(id, count) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  if (count > 0) {
+    el.textContent = count;
+    el.style.display = '';
+  } else {
+    el.style.display = 'none';
+  }
+}
+
 /* ─── Navigation ──────────────────────────────────────────────── */
 function nav(name) {
   document.querySelectorAll('.nav-item').forEach(el => el.classList.toggle('active', el.dataset.panel === name));
@@ -60,50 +72,107 @@ function nav(name) {
   if (panel) panel.classList.add('active');
   localStorage.setItem('ailo_nav', name);
 
-  if (name === 'status')   { loadStatus(); if (SHOW_CONNECTION_FORM) loadConnectionForm(); }
-  if (name === 'env')      loadEnvCheck();
-  if (name === 'mcp')      loadMCP();
-  if (name === 'tools')    toolsSub(localStorage.getItem('ailo_tools_sub') || 'reported');
-  if (name === 'feishu')   loadFeishuConfig();
+  switch (name) {
+    case 'status':
+      loadStatus();
+      if (SHOW_CONNECTION_FORM) loadConnectionForm();
+      break;
+    case 'env':      loadEnvCheck(); break;
+    case 'mcp':      loadMCP(); break;
+    case 'tools':    toolsSub(localStorage.getItem('ailo_tools_sub') || 'tools'); break;
+    case 'feishu':   loadFeishuConfig(); break;
+  }
 }
 
 function toolsSub(sub) {
-  document.querySelectorAll('.sub-tabs:not(.blueprint-tabs) .sub-tab').forEach(b => b.classList.toggle('active', b.dataset.sub === sub));
+  document.querySelectorAll('#panel-tools .sub-tab').forEach(b => b.classList.toggle('active', b.dataset.sub === sub));
   document.querySelectorAll('#panel-tools .sub-panel').forEach(p => p.classList.toggle('active', p.id === 'sub-' + sub));
   localStorage.setItem('ailo_tools_sub', sub);
-  if (sub === 'reported')  loadReportedTools();
-  if (sub === 'blueprints') loadAllBlueprints();
+  if (sub === 'tools') refreshTools();
+  else if (sub === 'skills') loadReportedSkills();
 }
 
 function hideModal(id) { document.getElementById(id).classList.remove('open'); }
 function showModal(id)  { document.getElementById(id).classList.add('open'); }
 
 /* ─── Status ──────────────────────────────────────────────────── */
+let lastStatus = { connected: false, endpointId: '' };
+
 async function loadStatus() {
   try {
     const s = await fetch('/api/status').then(r => r.json());
+    lastStatus = s;
+
+    // 侧边栏状态
     const dot = document.getElementById('globalDot');
     const gs  = document.getElementById('globalStatus');
-    const label = document.getElementById('connectionLabel');
-    const sublabel = document.getElementById('connectionSublabel');
-    const badgeWrap = document.getElementById('connectionBadgeWrap');
-    const grid = document.getElementById('statusInfoGrid');
-
     if (dot) dot.className = 'status-dot ' + (s.connected ? 'on' : 'off');
     if (gs)  gs.textContent = s.connected ? '已连接' : '未连接';
-    if (label) label.textContent = s.connected ? '已连接至 Ailo' : '未连接';
-    if (sublabel) sublabel.textContent = s.connected ? `端点 ID: ${s.endpointId || '-'}` : '尚未连接至 Ailo 服务';
-    if (badgeWrap) badgeWrap.innerHTML = s.connected
-      ? '<span class="badge on">在线</span>'
-      : '<span class="badge off">离线</span>';
-    if (grid) {
-      grid.style.display = s.connected ? 'grid' : 'none';
-      const epEl = document.getElementById('statusEndpointId');
-      const connEl = document.getElementById('statusConnected');
-      if (epEl) epEl.textContent = s.endpointId || '-';
-      if (connEl) connEl.innerHTML = s.connected ? '<span class="badge on">已连接</span>' : '<span class="badge off">断开</span>';
+
+    // 状态页
+    const title = document.getElementById('statusTitle');
+    const subtitle = document.getElementById('statusSubtitle');
+    if (title) title.textContent = s.connected ? '已连接' : '未连接';
+    if (subtitle) subtitle.textContent = s.connected
+      ? `端点 ${s.endpointId || '-'} 已连接到 Ailo`
+      : '尚未连接至 Ailo 服务';
+
+    // 状态卡片统计
+    const icon = document.getElementById('statusIcon');
+    if (icon) {
+      icon.className = 'status-icon ' + (s.connected ? 'connected' : 'disconnected');
     }
-  } catch (e) {}
+
+    // 更新端点 ID
+    const epEl = document.getElementById('statEndpointId');
+    if (epEl) epEl.textContent = s.endpointId || '-';
+
+    // 工具数量和 MCP 数量需要额外请求
+    if (s.connected) {
+      refreshToolsCount();
+      loadMcpCount();
+    } else {
+      updateBadgeCount('toolsCount', 0);
+      updateBadgeCount('mcpCount', 0);
+      const toolCountEl = document.getElementById('statToolCount');
+      const mcpCountEl = document.getElementById('statMcpCount');
+      if (toolCountEl) toolCountEl.textContent = '-';
+      if (mcpCountEl) mcpCountEl.textContent = '-';
+    }
+
+    // 运行时间
+    const uptimeEl = document.getElementById('statUptime');
+    if (uptimeEl) uptimeEl.textContent = s.uptime || '-';
+
+  } catch (e) {
+    console.error('Failed to load status:', e);
+  }
+}
+
+async function refreshToolsCount() {
+  try {
+    const tools = await fetch('/api/tools').then(r => r.json());
+    const count = Array.isArray(tools) ? tools.length : 0;
+    updateBadgeCount('toolsCount', count);
+    const el = document.getElementById('statToolCount');
+    if (el) el.textContent = count;
+    return count;
+  } catch (e) {
+    return 0;
+  }
+}
+
+async function loadMcpCount() {
+  try {
+    const d = await fetch('/api/mcp').then(r => r.json());
+    const runningCount = (d.servers || []).filter(s => s.running).length;
+    updateBadgeCount('mcpCount', runningCount);
+    const el = document.getElementById('statMcpCount');
+    if (el) el.textContent = runningCount;
+    return runningCount;
+  } catch (e) {
+    return 0;
+  }
 }
 
 async function loadConnectionForm() {
@@ -126,99 +195,203 @@ async function saveConnection() {
   if (!wsUrl || !apiKey || !endpointId) { toast('请填写全部三项连接信息', 'error'); return; }
   setBtnLoading(btn, true, '保存中...');
   try {
-    const r = await fetch('/api/connection', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ailoWsUrl:wsUrl,ailoApiKey:apiKey,endpointId}) }).then(r=>r.json());
+    const r = await fetch('/api/connection', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ailoWsUrl:wsUrl, ailoApiKey:apiKey, endpointId}) }).then(r=>r.json());
     if (r.ok) {
-      toast(r.message || '已保存', 'success');
-      let cnt = 0; const iv = setInterval(() => { loadStatus(); if (++cnt >= 5) clearInterval(iv); }, 2000);
+      toast(r.message || '配置已保存，将自动重连', 'success');
+      let cnt = 0;
+      const iv = setInterval(async () => {
+        await loadStatus();
+        if (++cnt >= 10) clearInterval(iv);
+      }, 2000);
     } else toast(r.error || '保存失败', 'error');
   } catch (e) { toast('请求失败', 'error'); }
   setBtnLoading(btn, false);
 }
 
-/* ─── Tools ───────────────────────────────────────────────────── */
-async function loadReportedTools() {
+/* ─── Tools & Skills ──────────────────────────────────────────── */
+async function refreshTools() {
   const el = document.getElementById('reportedToolsList');
   if (!el) return;
   el.innerHTML = '<div class="loading-text">加载中...</div>';
+
   try {
-    const d = await fetch('/api/tools').then(r => r.json());
-    if (!d || !d.length) { el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">暂无工具</p>'; return; }
-    let h = '<div class="table-wrap"><table><thead><tr><th>工具</th><th>来源</th><th>说明</th></tr></thead><tbody>';
-    for (const t of d) {
-      const src = t.source === 'builtin' ? '<span class="badge info">内置</span>' : '<span class="badge muted">MCP</span>';
-      h += `<tr><td><code>${esc(t.name)}</code></td><td>${src}</td><td style="color:var(--text-muted);font-size:13px">${esc(t.description)}</td></tr>`;
+    const [toolsData, mcpData] = await Promise.all([
+      fetch('/api/tools').then(r => r.json()).catch(() => []),
+      fetch('/api/mcp').then(r => r.json()).catch(() => ({ servers: [] }))
+    ]);
+
+    const tools = Array.isArray(toolsData) ? toolsData : [];
+    const mcpServers = mcpData.servers || [];
+    const runningMcpServers = mcpServers.filter(s => s.running);
+
+    // 按来源分组
+    const builtinTools = tools.filter(t => t.source === 'builtin');
+    const mcpTools = tools.filter(t => t.source === 'mcp');
+
+    if (tools.length === 0 && runningMcpServers.length === 0) {
+      el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">暂无工具</p>';
+      updateBadgeCount('toolsCount', 0);
+      return;
+    }
+
+    let html = '';
+
+    // 内置工具
+    if (builtinTools.length > 0) {
+      html += `<div class="tools-section">
+        <div class="tools-section-title">内置工具 <span class="count">${builtinTools.length}</span></div>
+        <div class="tools-grid">`;
+      for (const t of builtinTools) {
+        html += `<div class="tool-item">
+          <div class="tool-name"><code>${esc(t.name)}</code></div>
+          <div class="tool-desc">${esc(t.description)}</div>
+        </div>`;
+      }
+      html += '</div></div>';
+    }
+
+    // MCP 工具
+    if (mcpTools.length > 0 || runningMcpServers.length > 0) {
+      html += `<div class="tools-section">
+        <div class="tools-section-title">MCP 工具 <span class="count">${mcpTools.length}</span></div>`;
+
+      if (mcpTools.length > 0) {
+        html += '<div class="tools-grid">';
+        for (const t of mcpTools) {
+          html += `<div class="tool-item">
+            <div class="tool-name"><code>${esc(t.name)}</code></div>
+            <div class="tool-desc">${esc(t.description)}</div>
+          </div>`;
+        }
+        html += '</div>';
+      } else {
+        html += '<p class="tools-empty">无运行中的 MCP 服务</p>';
+      }
+      html += '</div>';
     }
-    el.innerHTML = h + '</tbody></table></div>';
-  } catch (e) { el.textContent = '加载失败'; }
+
+    el.innerHTML = html;
+
+    // 更新 tab 计数
+    const toolsTabCount = document.getElementById('toolsTabCount');
+    if (toolsTabCount) toolsTabCount.textContent = tools.length;
+
+    // 更新侧边栏计数
+    updateBadgeCount('toolsCount', tools.length);
+
+    // 更新状态页
+    const toolCountEl = document.getElementById('statToolCount');
+    if (toolCountEl) toolCountEl.textContent = tools.length;
+
+  } catch (e) {
+    el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">加载失败</p>';
+  }
 }
 
-/* ─── Multi-blueprint ──────────────────────────────────────────── */
-let _bpData = [];
-let _bpActive = '';
+async function loadReportedTools() {
+  await refreshTools();
+}
 
-async function loadAllBlueprints() {
-  const tabRow = document.getElementById('blueprintTabRow');
-  const panels = document.getElementById('blueprintPanels');
-  if (!tabRow || !panels) return;
-  panels.innerHTML = '<div class="loading-text">加载中...</div>';
-  tabRow.innerHTML = '';
+async function loadReportedSkills() {
+  const el = document.getElementById('reportedSkillsList');
+  if (!el) return;
+  el.innerHTML = '<div class="loading-text">加载中...</div>';
   try {
-    _bpData = await fetch('/api/blueprints').then(r => r.json());
-    if (!_bpData || !_bpData.length) {
-      panels.innerHTML = '<p style="color:var(--text-muted);font-size:14px">暂无蓝图</p>';
+    const d = await fetch('/api/skills').then(r => r.json());
+    const skills = Array.isArray(d) ? d : [];
+    if (skills.length === 0) {
+      el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">暂无技能</p>';
+      const tabCount = document.getElementById('skillsTabCount');
+      if (tabCount) tabCount.textContent = '0';
       return;
     }
-    tabRow.innerHTML = _bpData.map((bp, i) =>
-      `<button class="sub-tab${i===0?' active':''}" data-bp="${esc(bp.name)}" onclick="showBlueprintTab('${esc(bp.name)}')">${esc(bp.name)}</button>`
-    ).join('');
-    panels.innerHTML = _bpData.map((bp, i) =>
-      `<div class="sub-panel${i===0?' active':''}" id="bp-panel-${esc(bp.name)}">${bp.content ? `<pre class="blueprint-content">${esc(bp.content)}</pre>` : '<p style="color:var(--text-muted);font-size:14px">无法读取内容</p>'}</div>`
-    ).join('');
-    _bpActive = _bpData[0]?.name || '';
-  } catch (e) { panels.textContent = '加载失败'; }
-}
+    let html = '<div class="skills-grid">';
+    for (const s of skills) {
+      html += `<div class="skill-item">
+        <div class="skill-name">${esc(s.name)}</div>
+        <div class="skill-desc">${esc(s.description)}</div>
+      </div>`;
+    }
+    html += '</div>';
+    el.innerHTML = html;
 
-function showBlueprintTab(name) {
-  const tabRow = document.getElementById('blueprintTabRow');
-  if (!tabRow) return;
-  tabRow.querySelectorAll('.sub-tab').forEach(b => b.classList.toggle('active', b.dataset.bp === name));
-  document.querySelectorAll('#blueprintPanels .sub-panel').forEach(p => p.classList.toggle('active', p.id === 'bp-panel-' + name));
-  _bpActive = name;
+    const tabCount = document.getElementById('skillsTabCount');
+    if (tabCount) tabCount.textContent = skills.length;
+  } catch (e) {
+    el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">加载失败</p>';
+  }
 }
 
 /* ─── MCP ─────────────────────────────────────────────────────── */
 async function loadMCP() {
   const el = document.getElementById('mcpList');
   if (!el) return;
+  el.innerHTML = '<div class="loading-text">加载中...</div>';
   try {
     const d = await fetch('/api/mcp').then(r => r.json());
-    if (!d.servers || !d.servers.length) {
+    const servers = d.servers || [];
+
+    if (servers.length === 0) {
       el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">暂无 MCP 服务，点击「新增」添加</p>';
+      updateBadgeCount('mcpCount', 0);
+      const mcpCountEl = document.getElementById('statMcpCount');
+      if (mcpCountEl) mcpCountEl.textContent = '0';
       return;
     }
-    let h = '<div class="table-wrap"><table><thead><tr><th>名称</th><th>传输</th><th>连接</th><th>状态</th><th>工具数</th><th>操作</th></tr></thead><tbody>';
-    for (const s of d.servers) {
+
+    let html = '<div class="mcp-servers">';
+    for (const s of servers) {
       const transport = s.transport || 'stdio';
-      const connInfo = transport === 'sse' ? `<code>${esc(s.url||'')}</code>` : `<code>${esc((s.command||'')+' '+(s.args||[]).join(' '))}</code>`;
-      const statusBadge = s.running ? '<span class="badge on">运行中</span>' : '<span class="badge off">停止</span>';
-      const transportBadge = transport==='sse' ? '<span class="badge info">SSE</span>' : '<span class="badge muted">stdio</span>';
-      let actions = '';
-      if (s.running) actions += `<button class="btn btn-secondary btn-sm" onclick="mcpStop('${esc(s.name)}')">停止</button> `;
-      else           actions += `<button class="btn btn-success btn-sm" onclick="mcpStart('${esc(s.name)}')">启动</button> `;
-      actions += `<button class="btn btn-danger btn-sm" onclick="mcpDelete('${esc(s.name)}')">删除</button>`;
-      h += `<tr><td><strong>${esc(s.name)}</strong></td><td>${transportBadge}</td><td style="max-width:180px;overflow:hidden">${connInfo}</td><td>${statusBadge}</td><td>${s.tools?.length||0}</td><td><div style="display:flex;gap:6px">${actions}</div></td></tr>`;
+      const connInfo = transport === 'sse'
+        ? `<code>${esc(s.url||'')}</code>`
+        : `<code>${esc((s.command||'')+' '+(s.args||[]).join(' '))}</code>`;
+      const statusClass = s.running ? 'running' : 'stopped';
+      const statusText = s.running ? '运行中' : '已停止';
+      const mcpToolsCount = s.tools?.length || 0;
+
+      html += `<div class="mcp-server-item ${statusClass}">
+        <div class="mcp-server-header">
+          <div class="mcp-server-name">${esc(s.name)}</div>
+          <div class="mcp-server-status">
+            <span class="status-dot ${statusClass}"></span>
+            ${statusText}
+          </div>
+        </div>
+        <div class="mcp-server-conn">${connInfo}</div>
+        <div class="mcp-server-footer">
+          <div class="mcp-server-tools">${mcpToolsCount} 个工具</div>
+          <div class="mcp-server-actions">
+            ${s.running
+              ? `<button class="btn btn-secondary btn-sm" onclick="mcpStop('${esc(s.name)}')">停止</button>`
+              : `<button class="btn btn-success btn-sm" onclick="mcpStart('${esc(s.name)}')">启动</button>`
+            }
+            <button class="btn btn-danger btn-sm" onclick="mcpDelete('${esc(s.name)}')">删除</button>
+          </div>
+        </div>
+      </div>`;
     }
-    el.innerHTML = h + '</tbody></table></div>';
-  } catch (e) { el.textContent = '加载失败'; }
+    html += '</div>';
+    el.innerHTML = html;
+
+    // 更新计数
+    const runningCount = servers.filter(s => s.running).length;
+    updateBadgeCount('mcpCount', runningCount);
+    const mcpCountEl = document.getElementById('statMcpCount');
+    if (mcpCountEl) mcpCountEl.textContent = runningCount;
+
+  } catch (e) {
+    el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">加载失败</p>';
+  }
 }
 
 function onMCPTransportChange() {
   const v = document.getElementById('mcpTransport').value;
-  document.getElementById('mcpStdioFields').style.display = v==='stdio' ? '' : 'none';
-  document.getElementById('mcpSSEFields').style.display   = v==='sse'   ? '' : 'none';
+  document.getElementById('mcpStdioFields').style.display = v === 'stdio' ? '' : 'none';
+  document.getElementById('mcpSSEFields').style.display   = v === 'sse'   ? '' : 'none';
 }
 
 function showMCPCreateModal() {
+  document.getElementById('mcpName').value = '';
   document.getElementById('mcpCommandArgsList').innerHTML = '';
   document.getElementById('mcpEnvList').innerHTML = '';
   document.getElementById('mcpTransport').value = 'stdio';
@@ -258,6 +431,7 @@ async function doCreateMCP() {
     if (k) env[k] = (row.querySelector('.mcp-env-val').value||'').trim();
   });
   if (!name) { toast('请填写名称', 'error'); return; }
+
   let payload;
   if (transport === 'sse') {
     const url = document.getElementById('mcpSSEUrl').value.trim();
@@ -269,16 +443,47 @@ async function doCreateMCP() {
     if (!command) { toast('请填写命令', 'error'); return; }
     payload = { action:'create', name, transport:'stdio', command, args:argvItems.slice(1), env };
   }
+
   try {
     const r = await fetch('/api/mcp', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload) }).then(r=>r.json());
-    if (r.text) { hideModal('mcpCreateModal'); document.getElementById('mcpName').value=''; loadMCP(); toast(r.text, 'success'); }
-    else toast(r.error || '添加失败', 'error');
+    if (r.text) {
+      hideModal('mcpCreateModal');
+      toast('MCP 服务已添加', 'success');
+      await loadMCP();
+      await refreshTools(); // 刷新工具列表
+    } else {
+      toast(r.error || '添加失败', 'error');
+    }
+  } catch (e) { toast('请求失败', 'error'); }
+}
+
+async function mcpStart(name) {
+  try {
+    const r = await fetch('/api/mcp', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'start', name})}).then(r=>r.json());
+    if (r.text) toast(r.text, 'success');
+    await loadMCP();
+    await refreshTools(); // 刷新工具列表
   } catch (e) { toast('请求失败', 'error'); }
 }
 
-async function mcpStart(name)  { try { const r=await fetch('/api/mcp',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'start',name})}).then(r=>r.json()); loadMCP(); if(r.text)toast(r.text,'success'); }catch(e){toast('请求失败','error');} }
-async function mcpStop(name)   { try { await fetch('/api/mcp',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'stop',name})}); loadMCP(); }catch(e){toast('请求失败','error');} }
-async function mcpDelete(name) { if(!confirm('确定删除 MCP 服务「'+name+'」？'))return; try{await fetch('/api/mcp',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'delete',name})});loadMCP();}catch(e){toast('请求失败','error');} }
+async function mcpStop(name) {
+  try {
+    await fetch('/api/mcp', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'stop', name})});
+    toast('MCP 服务已停止', 'info');
+    await loadMCP();
+    await refreshTools(); // 刷新工具列表
+  } catch (e) { toast('请求失败', 'error'); }
+}
+
+async function mcpDelete(name) {
+  if (!confirm(`确定删除 MCP 服务「${name}」？`)) return;
+  try {
+    await fetch('/api/mcp', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'delete', name})});
+    toast('MCP 服务已删除', 'success');
+    await loadMCP();
+    await refreshTools(); // 刷新工具列表
+  } catch (e) { toast('请求失败', 'error'); }
+}
 
 /* ─── Platform configs ────────────────────────────────────────── */
 async function loadFeishuConfig() {
@@ -286,19 +491,28 @@ async function loadFeishuConfig() {
     const c = await fetch('/api/feishu/config').then(r=>r.json());
     document.getElementById('feishuAppId').value = c.appId||'';
     document.getElementById('feishuAppSecret').value = c.appSecret||'';
-    document.getElementById('feishuStatusBadge').innerHTML = renderBadge(c.running, c.configured);
+    const badgeEl = document.getElementById('feishuStatusBadge');
+    if (badgeEl) badgeEl.innerHTML = renderBadge(c.running, c.configured);
     updateNavBadge('feishu', c.running, c.configured);
   } catch (e) {}
 }
+
 async function saveFeishuConfig() {
   const btn = document.getElementById('saveFeishuBtn');
-  const data = { appId: document.getElementById('feishuAppId').value.trim(), appSecret: document.getElementById('feishuAppSecret').value };
+  const data = {
+    appId: document.getElementById('feishuAppId').value.trim(),
+    appSecret: document.getElementById('feishuAppSecret').value
+  };
   if (!data.appId) { toast('请填写 App ID', 'error'); return; }
   setBtnLoading(btn, true, '保存中...');
   try {
-    const r = await fetch('/api/feishu/config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}).then(r=>r.json());
-    if (r.ok) { toast(r.message||'已保存', 'success'); setTimeout(loadFeishuConfig, 2000); }
-    else toast(r.error||'保存失败', 'error');
+    const r = await fetch('/api/feishu/config', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data) }).then(r=>r.json());
+    if (r.ok) {
+      toast('飞书配置已保存', 'success');
+      setTimeout(loadFeishuConfig, 2000);
+    } else {
+      toast(r.error||'保存失败', 'error');
+    }
   } catch (e) { toast('请求失败', 'error'); }
   setBtnLoading(btn, false);
 }
@@ -310,30 +524,33 @@ async function loadEnvCheck() {
   const el = document.getElementById('envCheckList');
   const row = document.getElementById('envInstallRow');
   if (!el) return;
+  el.innerHTML = '<div class="loading-text">加载中...</div>';
   try {
     const d = await fetch('/api/env/check').then(r=>r.json());
     const runtimes = d.runtimes || [];
     let hasAutoMissing = false;
-    let h = '';
+    let h = '<div class="env-grid">';
     for (const r of runtimes) {
       if (r.canAutoInstall && !r.ok) hasAutoMissing = true;
       const icon = ENV_ICONS[r.id] || '📦';
-      h += `<div class="env-item">
-        <div class="env-icon ${r.ok?'ok':'fail'}">${icon}</div>
-        <div class="env-body">
-          <div class="env-name">${esc(r.name)} ${r.ok ? '<span class="badge on">已安装</span>' : '<span class="badge off">未安装</span>'}</div>
+      const statusClass = r.ok ? 'ok' : 'fail';
+      h += `<div class="env-item ${statusClass}">
+        <div class="env-icon">${icon}</div>
+        <div class="env-info">
+          <div class="env-name">${esc(r.name)}</div>
           <div class="env-desc">${esc(r.description)}</div>
           ${r.ok && r.detail ? `<div class="env-detail">${esc(r.detail)}</div>` : ''}
         </div>
-        <div>
-      ${!r.ok && r.hint ? `<button class="btn btn-secondary btn-sm env-hint-btn" data-name="${esc(r.name)}" data-hint="${esc(r.hint||'')}">安装教程</button>` : ''}
+        <div class="env-action">
+          ${r.ok ? `<span class="badge on">已安装</span>` : ''}
+          ${!r.ok && r.hint ? `<button class="btn btn-secondary btn-sm env-hint-btn" data-name="${esc(r.name)}" data-hint="${esc(r.hint||'')}">安装教程</button>` : ''}
         </div>
       </div>`;
     }
+    h += '</div>';
     el.innerHTML = h || '<p style="color:var(--text-muted);font-size:14px">暂无检测项</p>';
     if (row) row.style.display = hasAutoMissing ? '' : 'none';
 
-    // 用事件委托处理「安装教程」按钮，避免在 onclick 属性里拼接含特殊字符的字符串
     el.querySelectorAll('.env-hint-btn').forEach(btn => {
       btn.addEventListener('click', () => {
         const name = btn.getAttribute('data-name') || '';
@@ -343,14 +560,17 @@ async function loadEnvCheck() {
         showModal('envHintModal');
       });
     });
-  } catch (e) { el.textContent = '加载失败'; if (row) row.style.display='none'; }
+  } catch (e) {
+    el.innerHTML = '<p style="color:var(--text-muted);font-size:14px">加载失败</p>';
+    if (row) row.style.display='none';
+  }
 }
 
 async function doEnvInstall() {
   const btn = document.getElementById('envInstallBtn');
   setBtnLoading(btn, true, '安装中...');
   try {
-    const r = await fetch('/api/env/install',{method:'POST'}).then(x=>x.json());
+    const r = await fetch('/api/env/install', { method:'POST'}).then(x=>x.json());
     if (r.installed?.length) toast('已安装: ' + r.installed.join(', '), 'success');
     if (r.errors?.length)   toast('安装失败: ' + r.errors.join('; '), 'error');
     loadEnvCheck();
@@ -361,17 +581,15 @@ async function doEnvInstall() {
 /* ─── Init ─────────────────────────────────────────────────────── */
 async function init() {
   await loadStatus();
-  // 预加载通道状态用于侧边栏 badge
+  // 预加载飞书状态
   try {
-    const [feishuCfg] = await Promise.allSettled([
-      fetch('/api/feishu/config').then(r=>r.json()),
-    ]);
-    if (feishuCfg.status==='fulfilled')   updateNavBadge('feishu',   feishuCfg.value.running,   feishuCfg.value.configured);
+    const feishuCfg = await fetch('/api/feishu/config').then(r=>r.json()).catch(() => ({}));
+    updateNavBadge('feishu', feishuCfg.running, feishuCfg.configured);
   } catch (e) {}
 }
 
 init();
-setInterval(loadStatus, 15000);
+setInterval(loadStatus, 10000); // 状态轮询
 
 /* ─── Restore last nav on page load ────────────────────────── */
 (function restoreNav() {