Skip to content

refactor: MCP 新增状态管理增强与 UI 可视化 #72

Merged
qorzj merged 13 commits into
lessweb:mainfrom
hqwlkj:feature/mcp-refactor
May 16, 2026
Merged

refactor: MCP 新增状态管理增强与 UI 可视化 #72
qorzj merged 13 commits into
lessweb:mainfrom
hqwlkj:feature/mcp-refactor

Conversation

@hqwlkj
Copy link
Copy Markdown
Contributor

@hqwlkj hqwlkj commented May 15, 2026

📋 概述

本 PR 为 Deep Code CLI 增加了完整的 MCP (Model Context Protocol) 服务器状态管理和可视化功能,包括实时状态监控、工具/提示/资源发现、错误处理以及优化的用户交互体验。

🎯 变更类型

  • ✨ 新功能
  • 🎨 UI 改进
  • 🐛 Bug 修复
  • ♻️ 代码重构
  • ✅ 测试更新

📝 主要变更

1. MCP 客户端增强 (src/mcp/mcp-client.ts)

协议版本校验

  • 在初始化时验证服务器返回的 MCP 协议版本
  • 拒绝不支持的协议版本,提升兼容性控制

JSON-RPC 批处理支持

  • 支持处理 JSON-RPC 批量消息
  • 逐条分发消息,提高处理效率
  • 抽离单条消息处理逻辑,统一处理通知和响应

通知机制

  • 支持 JSON-RPC 通知的处理(无 id 字段的服务器主动消息)
  • 防止通知处理器异常导致读取循环崩溃
  • 完善请求超时控制

2. MCP 管理器扩展 (src/mcp/mcp-manager.ts)

状态管理

  • 新增 MCP 状态变更回调机制 (onStatusChanged)
  • 支持 UI 实时刷新显示服务器状态
  • 添加 promptCountpromptsresourceCountresources 字段

资源发现

  • 扩展支持发现和 prompts(提示)
  • 扩展支持发现和 resources(资源)
  • 支持工具列表变化的事件通知 (onToolsListChanged)
  • 实现分页列表查询(tools/prompts/resources)

错误处理

  • 移除 MCP 初始化失败的控制台错误输出,避免敏感信息泄露
  • 优化错误信息收集和展示

3. MCP 状态列表 UI (src/ui/McpStatusList.tsx)

全新组件

  • 实现 MCP 服务器状态、工具、提示和资源的可视化展示
  • 支持服务器列表和服务器详情两种视图模式
  • 提供完整的键盘操作支持(上下翻页、快速导航)

交互体验

  • 为启动状态服务器添加动态加载动画
  • 错误信息使用带红色边框的样式包裹,更加醒目
  • 支持通过方向键分页和滚动,确保选中项始终可见
  • 服务器详情视图新增工具、提示和资源的详细列表展示

视觉优化

  • 统一界面中选中项前缀符号由 "› " 改为 "> "
  • 优化行宽计算逻辑,提升标签列自适应能力
  • 改善布局间距和边框样式,增强视觉层次感
  • 为工具项添加左侧缩进优化排版布局

4. 应用集成 (src/ui/App.tsx, src/session.ts)

视图切换

  • 修改 App 组件,支持切换视图显示 MCP 状态列表
  • 在 session 中添加 MCP 工具列表变化监听
  • 实时更新工具定义数据

状态计数高亮

  • 调整 UI 组件以支持状态计数的高亮显示
  • 优化退出命令行提示颜色为灰色,提升可读性

5. 键盘交互优化

冲突解决

  • 移除 Esc 键作为取消操作,避免与 Ctrl+C 冲突
  • 更新底部提示,明确 Ctrl+C 为关闭操作,Esc 为返回操作
  • 调整 MessageView 内容左边距,使间距更合理

6. 测试更新 (src/tests/session.test.ts)

断言字段同步

  • getMcpStatus 的断言中添加 promptCountpromptsresourceCountresources 字段
  • 确保各状态对象包含完整的提示和资源数组信息
  • 扩展现有测试覆盖,支持提示和资源相关的状态字段验证

🧪 测试验证

所有测试通过(204/204):

npm test
# tests 204
# pass 204
# fail 0

关键测试用例:

  • ✅ SessionManager dispose disconnects MCP servers
  • ✅ SessionManager reports configured MCP servers as starting before initialization
  • ✅ SessionManager reports MCP startup stderr on failure
  • ✅ SessionManager adds -y when launching MCP servers through npx

状态流转

配置服务器 → starting → ready/failed
                ↓
          实时更新(工具列表变化等)

键盘导航

  • 上下方向键: 在服务器列表中导航
  • 回车键: 查看服务器详情/返回列表
  • q/Esc: 返回上一级
  • Ctrl+C: 退出应用

💡 设计决策

  1. 敏感信息保护: 移除 MCP 初始化失败的控制台错误输出,避免泄露配置信息
  2. 协议版本校验: 在连接时验证 MCP 协议版本,提前发现兼容性问题
  3. 批处理支持: 支持 JSON-RPC 批量消息,提高通信效率
  4. 事件驱动: 使用回调机制实现状态实时更新,避免轮询
  5. 分页查询: tools/prompts/resources 都支持分页,应对大量数据场景

🔗 相关文档

⚠️ 注意事项

  1. 本 PR 引入了新的 UI 组件 McpStatusList,需要确保终端支持相应的渲染特性
  2. MCP 服务器的 prompts 和 resources 功能是可选的,服务器不支持时会优雅降级
  3. 协议版本校验基于 MCP 规范,当前支持 2025-03-26 版本

📸 截图

企业微信截图_5c0c91c7-305c-439e-86d4-f4f94abe7ffb 企业微信截图_0e36114b-ee29-48c3-94df-596c3ce019e1 image

hqwlkj added 13 commits May 14, 2026 14:23
- 新增McpStatusList组件,实现MCP服务器状态、工具、提示和资源的可视化展示
- 修改App组件,支持切换视图显示MCP状态列表
- MCP客户端增加对prompts和resources的分页列表及读取功能
- MCP管理器扩展,支持发现和管理prompts及resources,及工具列表变化的事件通知
- 优化MCP客户端,支持JSON-RPC通知的处理,完善请求超时控制
- 在session中添加MCP工具列表变化监听,实时更新工具定义数据
- 提供键盘操作支持,实现MCP状态列表的上下翻页和快速导航
- 美化MCP状态列表界面,显示服务器状态及能力的详细信息
- 在FlatItem类型中添加错误信息项
- 失败状态的服务器添加对应错误消息
- 失败错误信息单独用ErrorRow组件渲染
- 更新无服务器时的提示样式,增强视觉层次感
- 为工具项添加左侧缩进优化排版布局
- 新增 MCP 状态变更回调,支持 UI 实时刷新显示
- MCP 管理器中添加状态变更事件处理机制
- 调整 UI 组件以支持状态计数的高亮显示
- 移除 MCP 初始化失败的控制台错误输出,避免信息泄露
- 优化退出命令行提示颜色为灰色,提升可读性
- 将 MCP 状态列表拆分为服务器列表和服务器详情两种视图
- 支持通过方向键分页和滚动,确保选中项始终可见
- 服务器详情视图新增工具、提示和资源的详细列表展示及导航支持
- 为启动状态服务器添加动态加载动画,提升交互体验
- 错误信息使用带红色边框的样式包裹,更加醒目
- 统一界面中选中项前缀符号由 "› " 改为 "> "
- 修正 DropdownMenu 和 SlashCommandMenu 的注释与前缀符号
- 调整 SessionList 中选中标识符,保持样式一致
- 优化行宽计算逻辑,提升标签列自适应能力
- 改善布局间距和边框样式,增强视觉层次感
- 在 getMcpStatus 的断言中添加 promptCount、prompts、resourceCount 和 resources 字段
- 确保各状态对象包含完整的提示和资源数组信息
- 维护现有工具和连接状态的正确性
- 扩展测试覆盖,支持提示和资源相关的状态字段验证
- 删除了未使用的useEffect导入,简化依赖引入
- 移除了界面中显示的当前索引及总数文本,减少冗余信息显示
- 优化了McpStatusList组件代码的可读性和整洁度
- 在初始化时验证服务器返回的MCP协议版本,拒绝不支持的版本
- 支持处理JSON-RPC批量消息,逐条分发处理
- 抽离单条消息处理逻辑,统一处理通知和响应
- 防止通知处理器异常导致读取循环崩溃

fix(ui): 优化键盘交互提示与布局间距

- 移除Esc键作为取消操作,避免与Ctrl+C冲突
- 更新底部提示,明确Ctrl+C为关闭操作,Esc为返回操作
- 调整MessageView内容左边距,使间距更合理
- 在McpStatusList组件中监听键盘输入事件
- 当服务器列表为空时,按Esc键或Ctrl+C触发退出操作
- 确保用户可通过快捷键安全退出无服务器状态界面
@qorzj qorzj merged commit 42ee6fe into lessweb:main May 16, 2026
@qorzj qorzj mentioned this pull request May 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants