dsh-vscode-mode 0.1.32 → 0.1.36

package/src/client/ui/LspSettings.ts

@@ -0,0 +1,274 @@
+// @ts-nocheck
+/**
+ * dsh-vscode-mode client — 「语言服务器」设置子 Tab。
+ * 四视图：服务器（状态 + 每语言启用/命令/路径）｜已安装（卸载/更新）｜市场（Open VSX 搜索/安装 + 本地 vsix）｜更新。
+ * 状态经 edrv.lsp.status，配置经 edrv.lsp.configGet/Update，扩展经 edrv.lsp.ext.*。
+ * 作者 ddj 2026-08-27
+ */
+import React from 'react'
+import { rpc } from '../rpc.js'
+import '../styles/mcp.css'
+
+const LANGUAGES = [
+  { id: 'lua', label: 'Lua（LuaLS）', hint: 'lua-language-server，EmmyLua 注解原生支持' },
+  { id: 'csharp', label: 'C#（Roslyn / OmniSharp）', hint: '需 dotnet + ms-dotnettools.csharp 的 .roslyn 服务器，或手动指定' },
+]
+
+const PHASE_LABEL = {
+  idle: '未启动', starting: '启动中', ready: '就绪', indexing: '索引中', unavailable: '不可用', stopped: '已停止',
+}
+const SOURCE_LABEL = { extension: '扩展', discover: '自动发现', manual: '手动配置', none: '未配置' }
+const TABS = [
+  { id: 'servers', label: '服务器' },
+  { id: 'installed', label: '已安装' },
+  { id: 'market', label: '市场' },
+  { id: 'updates', label: '更新' },
+]
+
+/** 语言卡片：状态 + 启用开关 + 命令/路径配置。 */
+function LangCard({ lang, config, status, busy, onToggle, onSave }) {
+  const [pathDraft, setPathDraft] = React.useState(config?.path ?? '')
+  const [commandDraft, setCommandDraft] = React.useState(config?.command ?? '')
+  React.useEffect(() => { setPathDraft(config?.path ?? ''); setCommandDraft(config?.command ?? '') }, [config?.path, config?.command])
+  const phase = status?.phase ?? 'idle'
+  return React.createElement('article', { className: 'vsm-mcp-card' },
+    React.createElement('div', { className: 'vsm-mcp-card-head' },
+      React.createElement('div', { className: 'vsm-mcp-title' },
+        React.createElement('span', { className: 'vsm-mcp-dot ' + (phase === 'ready' || phase === 'indexing' ? 'connected' : phase === 'unavailable' ? 'error' : 'disabled') }),
+        lang.label),
+      React.createElement('div', { className: 'vsm-mcp-actions' },
+        React.createElement('button', { className: 'vsm-switch ' + (config?.enabled !== false ? 'on' : ''), onClick: () => onToggle(lang.id, config?.enabled !== false ? false : true), 'aria-label': '启用/禁用' }, config?.enabled !== false ? '●' : '○'))),
+    React.createElement('div', { className: 'vsm-mcp-meta' },
+      PHASE_LABEL[phase] ?? phase, ' · ', SOURCE_LABEL[status?.source] ?? status?.source,
+      (phase === 'ready' && status?.root) ? ' · ' + String(status.root).split(/[\\/]/).pop() : ''),
+    status?.reason ? React.createElement('div', { className: 'vsm-mcp-error' }, status.reason) : null,
+    React.createElement('div', { className: 'vsm-lsp-form' },
+      React.createElement('label', null, React.createElement('span', null, '可执行文件路径（绝对路径，优先）'), React.createElement('input', { value: pathDraft, placeholder: '如 C:/.../lua-language-server.exe', onChange: (e) => setPathDraft(e.target.value) })),
+      React.createElement('label', null, React.createElement('span', null, '命令名（PATH 内查找）'), React.createElement('input', { value: commandDraft, placeholder: '如 lua-language-server', onChange: (e) => setCommandDraft(e.target.value) })),
+      React.createElement('button', { className: 'vsm-primary', disabled: busy === lang.id, onClick: () => onSave(lang.id, pathDraft, commandDraft) }, busy === lang.id ? '保存中…' : '保存配置')),
+    React.createElement('div', { className: 'vsm-lsp-hint' }, lang.hint))
+}
+
+/** 已装扩展卡片：清单 + 卸载/更新。 */
+function InstalledCard({ ext, busy, onUninstall, onUpdate }) {
+  return React.createElement('article', { className: 'vsm-mcp-card' },
+    React.createElement('div', { className: 'vsm-mcp-card-head' },
+      React.createElement('div', { className: 'vsm-mcp-title' },
+        React.createElement('span', { className: 'vsm-mcp-dot connected' }),
+        React.createElement('span', null, ext.displayName || ext.name),
+        React.createElement('span', { className: 'vsm-ext-ver' }, ext.id + ' · v' + ext.version)),
+      React.createElement('div', { className: 'vsm-mcp-actions' },
+        React.createElement('button', { className: 'vsm-primary vsm-small', disabled: busy === ext.id, onClick: () => onUpdate(ext) }, '更新'),
+        React.createElement('button', { className: 'vsm-danger vsm-small', disabled: busy === ext.id, onClick: () => onUninstall(ext) }, '卸载'))),
+    ext.description ? React.createElement('div', { className: 'vsm-lsp-hint' }, ext.description) : null)
+}
+
+/** 市场条目卡片：安装/已装态。 */
+function MarketCard({ item, installed, busy, onInstall }) {
+  const has = installed.some((e) => e.id === item.id)
+  return React.createElement('article', { className: 'vsm-mcp-card' },
+    React.createElement('div', { className: 'vsm-mcp-card-head' },
+      React.createElement('div', { className: 'vsm-mcp-title' },
+        React.createElement('span', { className: 'vsm-mcp-dot ' + (has ? 'connected' : 'disabled') }),
+        React.createElement('span', null, item.displayName || item.name),
+        React.createElement('span', { className: 'vsm-ext-ver' }, item.id + ' · v' + item.version)),
+      React.createElement('div', { className: 'vsm-mcp-actions' },
+        React.createElement('button', { className: 'vsm-primary vsm-small', disabled: has || busy === item.id, onClick: () => onInstall(item) }, has ? '已安装' : '安装'))),
+    item.description ? React.createElement('div', { className: 'vsm-lsp-hint' }, item.description) : null)
+}
+
+/**
+ * 语言服务器设置页：服务器状态/配置 + VSIX 扩展（安装/更新/卸载三视图）。
+ * @author ddj 2026年08月27号
+ */
+export function LspSettings() {
+  const [tab, setTab] = React.useState('servers')
+  const [config, setConfig] = React.useState({})
+  const [servers, setServers] = React.useState([])
+  const [installed, setInstalled] = React.useState([])
+  const [updates, setUpdates] = React.useState([])
+  const [market, setMarket] = React.useState([])
+  const [query, setQuery] = React.useState('')
+  const [vsixPath, setVsixPath] = React.useState('')
+  const [busy, setBusy] = React.useState('')
+  const [error, setError] = React.useState('')
+  const [loading, setLoading] = React.useState(true)
+
+  const refreshServers = React.useCallback(() => {
+    Promise.all([rpc('edrv.lsp.configGet', {}), rpc('edrv.lsp.status', {})])
+      .then(([cfg, st]) => {
+        if (cfg?.ok) setConfig(cfg.config ?? {})
+        if (st?.ok) setServers(st.servers ?? [])
+        setError('')
+      })
+      .catch((e) => setError(String(e)))
+  }, [])
+
+  const refreshExt = React.useCallback(() => {
+    Promise.all([rpc('edrv.lsp.ext.list', {}), rpc('edrv.lsp.ext.updates', {})])
+      .then(([l, u]) => {
+        if (l?.ok) setInstalled(l.extensions ?? [])
+        if (u?.ok) setUpdates(u.updates ?? [])
+        setError('')
+      })
+      .catch((e) => setError(String(e)))
+  }, [])
+
+  const refresh = React.useCallback(() => {
+    setLoading(true)
+    Promise.all([refreshServers(), refreshExt()]).finally(() => setLoading(false))
+  }, [refreshServers, refreshExt])
+
+  React.useEffect(() => { refresh() }, [refresh])
+
+  const switchTab = (next) => {
+    setTab(next)
+    setError('')
+    if (next === 'market' && !query) setQuery('lua language server')
+    if (next === 'installed' || next === 'updates') void refreshExt()
+    if (next === 'servers') void refreshServers()
+  }
+
+  const saveLang = (languageId, path, command) => {
+    setBusy(languageId)
+    setError('')
+    rpc('edrv.lsp.configUpdate', { languageId, path, command })
+      .then((res) => {
+        if (!res?.ok) { setError(res?.error ?? '保存失败'); return }
+        setConfig(res.config ?? {})
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  const toggleLang = (languageId, enabled) => {
+    setBusy(languageId)
+    rpc('edrv.lsp.configUpdate', { languageId, enabled })
+      .then((res) => {
+        if (res?.ok) { setConfig(res.config ?? {}); void refreshServers() }
+        else setError(res?.error ?? '切换失败')
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  const searchMarket = () => {
+    if (!query.trim()) return
+    setBusy('__market')
+    setError('')
+    rpc('edrv.lsp.ext.market', { query: query.trim(), size: 12 })
+      .then((res) => {
+        if (res?.ok) setMarket(res.extensions ?? [])
+        else setError(res?.error ?? '搜索失败')
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  const installMarket = (item) => {
+    setBusy(item.id)
+    setError('')
+    rpc('edrv.lsp.ext.install', { namespace: item.namespace, name: item.name })
+      .then((res) => {
+        if (!res?.ok) { setError(res?.error ?? '安装失败'); return }
+        void refreshExt()
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  const installLocal = () => {
+    if (!vsixPath.trim()) return
+    setBusy('__vsix')
+    setError('')
+    rpc('edrv.lsp.ext.install', { vsixPath: vsixPath.trim() })
+      .then((res) => {
+        if (!res?.ok) { setError(res?.error ?? '安装失败'); return }
+        setVsixPath('')
+        void refreshExt()
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  const uninstallExt = (ext) => {
+    if (!window.confirm('卸载扩展 ' + ext.id + '？')) return
+    setBusy(ext.id)
+    setError('')
+    rpc('edrv.lsp.ext.uninstall', { id: ext.id })
+      .then((res) => {
+        if (!res?.ok) setError(res?.error ?? '卸载失败')
+        void refreshExt()
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  const updateExt = (ext) => {
+    setBusy(ext.id)
+    setError('')
+    rpc('edrv.lsp.ext.update', { id: ext.id })
+      .then((res) => {
+        if (!res?.ok) setError(res?.error ?? '更新失败')
+        void refreshExt()
+      })
+      .catch((e) => setError(String(e)))
+      .finally(() => setBusy(''))
+  }
+
+  if (loading) return React.createElement('div', { className: 'vsm-mcp-empty' }, '正在读取语言服务器状态…')
+  const nav = React.createElement('nav', { className: 'vsm-mcp-tabs' },
+    TABS.map((t) => React.createElement('button', { key: t.id, className: tab === t.id ? 'active' : '', onClick: () => switchTab(t.id) }, t.label)))
+  const header = React.createElement('div', { className: 'vsm-mcp-header' },
+    React.createElement('div', null,
+      React.createElement('h2', null, '语言服务器（LSP）'),
+      React.createElement('p', null, '代码索引 / 引用查找 / 动态跳转；可安装 VSIX 语言服务器扩展（Open VSX 市场 / 本地 .vsix）。')),
+    React.createElement('button', { className: 'vsm-primary', onClick: refresh }, '↻ 刷新'))
+  const banner = error ? React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error) : null
+
+  /** 线框面板容器：标题 + 内容体。 */
+  const panel = (title, children) => React.createElement('section', { className: 'vsm-panel' },
+    React.createElement('h3', { className: 'vsm-panel-title' }, title),
+    React.createElement('div', { className: 'vsm-panel-body' }, children),
+  )
+
+  let body = null
+  if (tab === 'servers') {
+    body = panel('语言服务器', React.createElement(React.Fragment, null,
+      LANGUAGES.map((lang) => React.createElement(LangCard, {
+        key: lang.id, lang,
+        config: config[lang.id] ?? {},
+        status: servers.find((s) => s.languageId === lang.id),
+        busy, onToggle: toggleLang, onSave: saveLang,
+      })),
+      React.createElement('div', { className: 'vsm-lsp-hint' }, '提示：打开 Lua/C# 文件即自动（惰性）启动对应语言服务器；未配置时编辑器功能不受影响，大纲回退内置解析。')))
+  } else if (tab === 'installed') {
+    body = panel('已安装扩展', React.createElement(React.Fragment, null,
+      React.createElement('div', { className: 'vsm-lsp-hint' }, '已安装的语言服务器扩展（存于 ~/.dsh/dsh-vscode-mode/extensions/）。语言服务器被自动发现为「扩展」源。'),
+      installed.length ? installed.map((ext) => React.createElement(InstalledCard, { key: ext.id, ext, busy, onUninstall: uninstallExt, onUpdate: updateExt }))
+        : React.createElement('div', { className: 'vsm-mcp-empty' }, '还没有安装扩展（去「市场」或指定本地 .vsix）')))
+  } else if (tab === 'market') {
+    body = panel('扩展市场', React.createElement(React.Fragment, null,
+      React.createElement('div', { className: 'vsm-lsp-form' },
+        React.createElement('label', null, React.createElement('span', null, '搜索 Open VSX 市场'), React.createElement('input', { value: query, placeholder: '如 sumneko.lua / lua language server', onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter') searchMarket() } })),
+        React.createElement('button', { className: 'vsm-primary', disabled: busy === '__market', onClick: searchMarket }, busy === '__market' ? '搜索中…' : '搜索')),
+      React.createElement('div', { className: 'vsm-lsp-form' },
+        React.createElement('label', null, React.createElement('span', null, '安装本地 .vsix 文件（服务器绝对路径）'), React.createElement('input', { value: vsixPath, placeholder: '如 C:/Downloads/sumneko.lua-3.19.1.vsix', onChange: (e) => setVsixPath(e.target.value) })),
+        React.createElement('button', { className: 'vsm-primary', disabled: busy === '__vsix', onClick: installLocal }, busy === '__vsix' ? '安装中…' : '安装本地 .vsix')),
+      React.createElement('div', { className: 'vsm-lsp-hint' }, '市场安装会下载并解包 VSIX 到扩展目录；含语言服务器（如 sumneko.lua）的扩展会被自动发现。'),
+      market.map((item) => React.createElement(MarketCard, { key: item.id, item, installed, busy, onInstall: installMarket }))))
+  } else {
+    body = panel('可用更新', React.createElement(React.Fragment, null,
+      React.createElement('div', { className: 'vsm-lsp-hint' }, '已装扩展与 Open VSX 最新版的差异。'),
+      updates.length ? updates.map((u) => React.createElement('article', { key: u.id, className: 'vsm-mcp-card' },
+        React.createElement('div', { className: 'vsm-mcp-card-head' },
+          React.createElement('div', { className: 'vsm-mcp-title' },
+            React.createElement('span', { className: 'vsm-mcp-dot error' }),
+            React.createElement('span', null, u.displayName || u.id),
+            React.createElement('span', { className: 'vsm-ext-ver' }, 'v' + u.current + ' → v' + u.latest)),
+          React.createElement('div', { className: 'vsm-mcp-actions' },
+            React.createElement('button', { className: 'vsm-primary vsm-small', disabled: busy === u.id, onClick: () => updateExt(u) }, busy === u.id ? '更新中…' : '更新')))))
+        : React.createElement('div', { className: 'vsm-mcp-empty' }, '全部已是最新')))
+  }
+  return React.createElement('div', null, header, nav, banner, body)
+}

package/src/client/ui/McpSettings.ts

@@ -1,9 +1,8 @@
 // @ts-nocheck
 /**
- * dsh-vscode-mode client — VSCodeMode 设置区：通用 / 快捷键 / MCP 管理。
- * 子 Tab：通用（文件打开工具/开发形态）/ 快捷键（编辑器键位配置，可重置）/
- * 我的 MCP（profile 全局）/ 项目 MCP（各项目 .mcp.json）/ MCP 市场（占位）/ 兼容性。
- * 作者 ddj 2026年08月22号 / 2026年08月26号
+ * dsh-vscode-mode client — VSCodeMode 设置区：通用 / 快捷键 / MCP 管理 / 语言服务器 / 性能优化 / 兼容性。
+ * MCP 管理 Tab 下含三个子页签：我的 MCP（profile 全局）/ 项目 MCP（各项目 .mcp.json）/ MCP 市场（占位）。
+ * 作者 ddj 2026年08月22号 / 2026年08月26号 / 2026年08月27号
  */
 import React from 'react'
 import { rpc } from '../rpc.js'
@@ -12,6 +11,7 @@ import '../styles/mcp.css'
 import { availableOpeners, AUTO_OPEN_TOOL } from '../fileOpeners.js'
 import { SettingsContext } from '../settingsContext.js'
 import { KeybindingsPanel } from './KeybindingsPanel.js'
+import { LspSettings } from './LspSettings.js'
 import { PerfSettings } from './PerfSettings.js'
 
 const EMPTY = { serverName: '', transport: 'stdio', command: '', args: '', cwd: '', url: '', headers: '' }
@@ -177,8 +177,13 @@ function GeneralSettings({ registry }) {
     React.createElement('p', null, '配置 DSH 对话中文件链接的打开工具。工具由当前运行时自动扫描。'),
     unavailable && React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, '设置服务暂不可用，当前使用自动选择。'),
     error && React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error),
-    React.createElement('label', { className: 'vsm-general-row' }, React.createElement('span', null, '文件链接使用工具'), React.createElement('select', { value: currentOption, disabled: loading || unavailable || notReady || busy || snapshot?.writable === false, onChange: (event) => save(event.target.value) }, options.map((item) => React.createElement('option', { key: item.id, value: item.id }, item.label))), loading && React.createElement('small', null, '读取中…')),
-    devFormRow,
+    React.createElement('section', { className: 'vsm-panel' },
+      React.createElement('h3', { className: 'vsm-panel-title' }, '文件与安装'),
+      React.createElement('div', { className: 'vsm-panel-body' },
+        React.createElement('label', { className: 'vsm-general-row' }, React.createElement('span', null, '文件链接使用工具'), React.createElement('select', { value: currentOption, disabled: loading || unavailable || notReady || busy || snapshot?.writable === false, onChange: (event) => save(event.target.value) }, options.map((item) => React.createElement('option', { key: item.id, value: item.id }, item.label))), loading && React.createElement('small', null, '读取中…')),
+        devFormRow,
+      ),
+    ),
   )
 }
 
@@ -199,24 +204,89 @@ function CompatSection({ getSummary }) {
     React.createElement('span', { className: 'vsm-compat-name' }, item.name),
     React.createElement('span', { className: 'vsm-compat-note' }, item.note ?? (item.active ? '正常' : '未生效')),
   ))
+  /** 兼容性分组面板：标题 + 线框内容区。 */
+  const group = (title, children) => React.createElement('section', { className: 'vsm-panel' },
+    React.createElement('h3', { className: 'vsm-panel-title' }, title),
+    React.createElement('div', { className: 'vsm-panel-body' }, children),
+  )
   const warnings = report?.warnings ?? []
   const devForm = report?.devForm
   return React.createElement('section', { className: 'vsm-general-page' },
     React.createElement('h2', null, '兼容性'),
     React.createElement('p', null, '检测与其他插件 / DSH 版本的适配状态与已知问题。' + (report?.pluginVersion ? '（插件版本 ' + report.pluginVersion + '）' : '')),
     error && React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error),
-    devForm?.enabled && React.createElement(React.Fragment, null,
-      React.createElement('h3', { className: 'vsm-compat-h3' }, '开发形态'),
-      React.createElement('div', { className: 'vsm-compat-item ok' }, React.createElement('span', { className: 'vsm-compat-name' }, '开发形态开启（工作区链接安装）'), React.createElement('span', { className: 'vsm-compat-note' }, devForm.path)),
+    devForm?.enabled && group('开发形态', React.createElement('div', { className: 'vsm-compat-item ok' }, React.createElement('span', { className: 'vsm-compat-name' }, '开发形态开启（工作区链接安装）'), React.createElement('span', { className: 'vsm-compat-note' }, devForm.path))),
+    group('外部插件与服务', renderItems(report?.external)),
+    group('客户端适配', renderItems(getSummary?.() ?? [])),
+    group('护栏', renderItems(report?.guards)),
+    group('警告', warnings.length ? warnings.map((w, index) => React.createElement('div', { key: index, className: 'vsm-mcp-error vsm-mcp-banner' }, w)) : React.createElement('div', { className: 'vsm-compat-item ok' }, React.createElement('span', { className: 'vsm-compat-name' }, '未检测到兼容性问题'), React.createElement('span', { className: 'vsm-compat-note' }, ''))),
+  )
+}
+
+/** MCP 管理子页签定义（我的 / 项目 / 市场）。 */
+const MCP_TABS = [
+  { id: 'mine', label: '我的 MCP' },
+  { id: 'projects', label: '项目 MCP' },
+  { id: 'market', label: 'MCP 市场' },
+]
+
+/**
+ * MCP 管理面板：顶层「MCP 管理」Tab 下的三个子页签容器。
+ * 作者 ddj 2026年08月27号
+ * @param {object[]} servers 全局 MCP 服务列表
+ * @param {object[]} projects 项目及其项目级 MCP 列表
+ * @param {string} busy 正在执行的操作标识
+ * @param {object} draft 新增表单草稿
+ * @param {Function} edit 草稿字段变更回调
+ * @param {Function} resetDraft 清空草稿回调
+ */
+function McpManagePanel({ servers, projects, busy, draft, edit, resetDraft, refreshGlobal, toggleGlobal, removeGlobal, refreshProject, toggleProject, removeProject, saveGlobal, saveProject }) {
+  const [mcpTab, setMcpTab] = React.useState('mine')
+  const [showForm, setShowForm] = React.useState(false)
+  const [projectForm, setProjectForm] = React.useState(null)
+  const [selectedPath, setSelectedPath] = React.useState('')
+
+  React.useEffect(() => {
+    if (!projects.length) {
+      setSelectedPath('')
+      return
+    }
+    if (!projects.some((project) => project.workspacePath === selectedPath)) setSelectedPath(projects[0].workspacePath)
+  }, [projects, selectedPath])
+
+  const closeGlobalForm = () => setShowForm(false)
+  const closeProjectForm = () => setProjectForm(null)
+  const addProject = (project) => {
+    resetDraft?.()
+    setProjectForm({ workspacePath: project.workspacePath, title: project.title })
+  }
+
+  const selectedProject = projects.find((project) => project.workspacePath === selectedPath)
+  const mineBody = servers.length
+    ? servers.map((s) => React.createElement(ServerCard, { key: s.id, server: s, onRefresh: refreshGlobal, onToggle: toggleGlobal, onRemove: removeGlobal }))
+    : React.createElement('div', { className: 'vsm-mcp-empty' }, '还没有配置全局 MCP')
+  const projectBody = projects.length ? React.createElement(React.Fragment, null,
+    React.createElement(ProjectPicker, { projects, value: selectedPath, onChange: setSelectedPath }),
+    selectedProject ? React.createElement(ProjectGroup, { project: selectedProject, busy, onAdd: addProject, onRefresh: refreshProject, onToggle: toggleProject, onRemove: removeProject }) : React.createElement('div', { className: 'vsm-mcp-empty' }, '请选择项目'),
+  ) : React.createElement('div', { className: 'vsm-mcp-empty' }, '还没有项目')
+
+  let body
+  if (mcpTab === 'projects') body = projectBody
+  else if (mcpTab === 'market') body = React.createElement('div', { className: 'vsm-mcp-empty' }, 'MCP 市场暂未接入')
+  else body = mineBody
+
+  const form = showForm
+    ? React.createElement(McpForm, { title: '添加全局 MCP', draft, busy, edit, save: () => saveGlobal(closeGlobalForm), close: closeGlobalForm })
+    : projectForm
+      ? React.createElement(McpForm, { title: '添加项目 MCP · ' + projectForm.title, draft, busy, edit, save: () => saveProject(projectForm.workspacePath, closeProjectForm), close: closeProjectForm })
+      : null
+  return React.createElement(React.Fragment, null,
+    React.createElement('div', { className: 'vsm-mcp-subhead' },
+      React.createElement('nav', { className: 'vsm-mcp-subtabs' }, MCP_TABS.map((item) => React.createElement('button', { key: item.id, className: mcpTab === item.id ? 'active' : '', onClick: () => setMcpTab(item.id) }, item.label))),
+      React.createElement('button', { className: 'vsm-primary vsm-small', onClick: () => { resetDraft?.(); setShowForm(true) } }, '+ 添加全局 MCP'),
     ),
-    React.createElement('h3', { className: 'vsm-compat-h3' }, '外部插件与服务'),
-    renderItems(report?.external),
-    React.createElement('h3', { className: 'vsm-compat-h3' }, '客户端适配'),
-    renderItems(getSummary?.() ?? []),
-    React.createElement('h3', { className: 'vsm-compat-h3' }, '护栏'),
-    renderItems(report?.guards),
-    React.createElement('h3', { className: 'vsm-compat-h3' }, '警告'),
-    warnings.length ? warnings.map((w, index) => React.createElement('div', { key: index, className: 'vsm-mcp-error vsm-mcp-banner' }, w)) : React.createElement('div', { className: 'vsm-compat-item ok' }, React.createElement('span', { className: 'vsm-compat-name' }, '未检测到兼容性问题'), React.createElement('span', { className: 'vsm-compat-note' }, '')),
+    body,
+    form,
   )
 }
 
@@ -231,17 +301,6 @@ export function McpSettings(props) {
   const [error, setError] = React.useState('')
   const [tab, setTab] = React.useState('general')
   const [draft, setDraft] = React.useState(EMPTY)
-  const [showForm, setShowForm] = React.useState(false)
-  const [projectForm, setProjectForm] = React.useState(null)
-  const [selectedPath, setSelectedPath] = React.useState('')
-
-  React.useEffect(() => {
-    if (!projects.length) {
-      setSelectedPath('')
-      return
-    }
-    if (!projects.some((project) => project.workspacePath === selectedPath)) setSelectedPath(projects[0].workspacePath)
-  }, [projects, selectedPath])
 
   const loadAll = React.useCallback(() => {
     setLoading(true)
@@ -286,51 +345,55 @@ export function McpSettings(props) {
   const toggleProject = (p, s) => projectAction(p.workspacePath, s.serverName, 'mcp.projectToggle', { workspacePath: p.workspacePath, serverName: s.serverName, enabled: !s.enabled }, replaceProject(p.workspacePath))
   const removeProject = (p, s) => window.confirm('确认删除此项目的 MCP「' + s.serverName + '」？') && projectAction(p.workspacePath, s.serverName, 'mcp.projectRemove', { workspacePath: p.workspacePath, serverName: s.serverName }, replaceProject(p.workspacePath))
 
-  const saveGlobal = () => {
+  /**
+   * 保存全局 MCP：成功后由回调关闭子面板。
+   * 作者 ddj 2026年08月27号
+   * @param {Function} close 关闭新增表单回调
+   */
+  const saveGlobal = (close) => {
     setBusy('save')
     setError('')
     rpc('mcp.save', { config: configOf(draft) }).then(finish).then((result) => {
       setServers((old) => old.some((s) => s.id === result.server.id) ? old.map((s) => s.id === result.server.id ? result.server : s) : old.concat(result.server))
       setDraft(EMPTY)
-      setShowForm(false)
+      close()
     }).catch((e) => setError(String(e))).finally(() => setBusy(''))
   }
 
-  const saveProject = () => {
-    if (!projectForm) return
+  /**
+   * 保存项目 MCP：成功后由回调关闭子面板。
+   * 作者 ddj 2026年08月27号
+   * @param {string} workspacePath 目标项目路径
+   * @param {Function} close 关闭新增表单回调
+   */
+  const saveProject = (workspacePath, close) => {
     setBusy('project-save')
     setError('')
     const config = configOf(draft)
-    rpc('mcp.projectSave', { workspacePath: projectForm.workspacePath, serverName: config.serverName, config }).then(finish).then((result) => {
-      setProjects((old) => old.map((p) => p.workspacePath === projectForm.workspacePath ? result.project : p))
+    rpc('mcp.projectSave', { workspacePath, serverName: config.serverName, config }).then(finish).then((result) => {
+      setProjects((old) => old.map((p) => p.workspacePath === workspacePath ? result.project : p))
       setDraft(EMPTY)
-      setProjectForm(null)
+      close()
     }).catch((e) => setError(String(e))).finally(() => setBusy(''))
   }
 
   const edit = (key, value) => setDraft((old) => ({ ...old, [key]: value }))
-  const marketBody = React.createElement('div', { className: 'vsm-mcp-empty' }, 'MCP 市场暂未接入')
-  const selectedProject = projects.find((project) => project.workspacePath === selectedPath)
-  const projectBody = projects.length ? React.createElement(React.Fragment, null,
-    React.createElement(ProjectPicker, { projects, value: selectedPath, onChange: setSelectedPath }),
-    selectedProject ? React.createElement(ProjectGroup, { project: selectedProject, busy, onAdd: (project) => { setDraft(EMPTY); setProjectForm({ workspacePath: project.workspacePath, title: project.title }) }, onRefresh: refreshProject, onToggle: toggleProject, onRemove: removeProject }) : React.createElement('div', { className: 'vsm-mcp-empty' }, '请选择项目'),
-  ) : React.createElement('div', { className: 'vsm-mcp-empty' }, '还没有项目')
+  const resetDraft = () => setDraft(EMPTY)
   let body
   if (loading) body = React.createElement('div', { className: 'vsm-mcp-empty' }, '正在读取 MCP 服务…')
   else if (tab === 'general') body = React.createElement(GeneralSettings, { registry: openerRegistry })
   else if (tab === 'keys') body = React.createElement(KeybindingsPanel, null)
-  else if (tab === 'mine') body = React.createElement('div', null, servers.length ? servers.map((s) => React.createElement(ServerCard, { key: s.id, server: s, onRefresh: refreshGlobal, onToggle: toggleGlobal, onRemove: removeGlobal })) : React.createElement('div', { className: 'vsm-mcp-empty' }, '还没有配置全局 MCP'))
-  else if (tab === 'projects') body = projectBody
+  else if (tab === 'mcp') body = React.createElement(McpManagePanel, { servers, projects, busy, draft, edit, resetDraft,
+    saveGlobal: (close) => saveGlobal(close), saveProject: (workspacePath, close) => saveProject(workspacePath, close),
+    refreshGlobal, toggleGlobal, removeGlobal, refreshProject, toggleProject, removeProject })
   else if (tab === 'compat') body = React.createElement(CompatSection, { getSummary: compatSummary })
-  else if (tab === 'perf') body = React.createElement(PerfSettings, null)
-  else body = marketBody
-  const form = showForm ? React.createElement(McpForm, { title: '添加全局 MCP', draft, busy, edit, save: saveGlobal, close: () => setShowForm(false) }) : projectForm ? React.createElement(McpForm, { title: '添加项目 MCP · ' + projectForm.title, draft, busy, edit, save: saveProject, close: () => setProjectForm(null) }) : null
+  else if (tab === 'lsp') body = React.createElement(LspSettings, null)
+  else body = React.createElement(PerfSettings, null)
   return React.createElement('section', { className: 'vsm-mcp-page' },
-    React.createElement('header', { className: 'vsm-mcp-header' }, React.createElement('div', null, React.createElement('h2', null, 'VSCodeMode'), React.createElement('p', null, '管理当前 profile 与各项目的 Model Context Protocol 服务。')), React.createElement('button', { className: 'vsm-primary', onClick: () => { setDraft(EMPTY); setShowForm(true) } }, '+ 添加全局 MCP')),
-    React.createElement('nav', { className: 'vsm-mcp-tabs' }, React.createElement('button', { className: tab === 'general' ? 'active' : '', onClick: () => setTab('general') }, '通用'), React.createElement('button', { className: tab === 'keys' ? 'active' : '', onClick: () => setTab('keys') }, '快捷键'), React.createElement('button', { className: tab === 'mine' ? 'active' : '', onClick: () => setTab('mine') }, '我的 MCP'), React.createElement('button', { className: tab === 'projects' ? 'active' : '', onClick: () => setTab('projects') }, '项目 MCP'), React.createElement('button', { className: tab === 'perf' ? 'active' : '', onClick: () => setTab('perf') }, '性能优化'), React.createElement('button', { className: tab === 'market' ? 'active' : '', onClick: () => setTab('market') }, 'MCP 市场'), React.createElement('button', { className: tab === 'compat' ? 'active' : '', onClick: () => setTab('compat') }, '兼容性')),
+    React.createElement('header', { className: 'vsm-mcp-header' }, React.createElement('div', null, React.createElement('h2', null, 'VSCodeMode'), React.createElement('p', null, '管理当前 profile 与各项目的 Model Context Protocol 服务。'))),
+    React.createElement('nav', { className: 'vsm-mcp-tabs' }, React.createElement('button', { className: tab === 'general' ? 'active' : '', onClick: () => setTab('general') }, '通用'), React.createElement('button', { className: tab === 'keys' ? 'active' : '', onClick: () => setTab('keys') }, '快捷键'), React.createElement('button', { className: tab === 'mcp' ? 'active' : '', onClick: () => setTab('mcp') }, 'MCP 管理'), React.createElement('button', { className: tab === 'lsp' ? 'active' : '', onClick: () => setTab('lsp') }, '语言服务器'), React.createElement('button', { className: tab === 'perf' ? 'active' : '', onClick: () => setTab('perf') }, '性能优化'), React.createElement('button', { className: tab === 'compat' ? 'active' : '', onClick: () => setTab('compat') }, '兼容性')),
     error && React.createElement('div', { className: 'vsm-mcp-error vsm-mcp-banner' }, error),
     body,
-    form,
   )
 }