MCP Inspector V2 功能界面（UX Feature Screens）完整指南：七个功能屏的设计与实现

• 开发工具
• MCP Clients
• 调试器

本篇技术指南围绕 specification/v2_ux_features.md 展开，系统讲解 MCP Inspector V2 中 Tools、Apps、Resources、Prompts、Logging、Tasks、History 七个功能屏（Feature Screens）的布局、交互与协议支撑。读者读完后，将能理解每个功能屏对应的 MCP 协议方法、通知机制、核心组件契约，以及这些界面在仓库源码中的实际落点，可用于二次开发、界面测试与 MCP 服务器调试。

背景：V2 功能屏的总体设计原则

在进入每个功能屏之前，先明确 V2 功能屏的两条总体约定（出处见 specification/v2_ux.md 与 specification/v2_ux_features.md）：

• 可调整面板布局（resizable panel layout）：每个功能屏都允许用户拖动调整面板宽度，最大化可用空间；
• 全宽内容 + 无侧边栏：连接后的顶部导航提供 Tools / Apps / Resources / Prompts / Logs / Tasks / History 七个入口，内容区全宽展示，采用渐进式披露（progressive disclosure），按连接阶段展示相关信息。

七个功能屏按功能可以分为三类：

Tools Screen：工具调用工作台

Tools Screen 是三栏布局（列表 / 参数 / 结果），是 Inspector 中最核心的交互界面。原型布局如下：

+---------------------+--------------------------------------+------------------------+ | Tools (4) | Parameters | Results | | [*] List updated | (40%) | (30%) | | [Refresh Now] | <-> resize | | +---------------------+--------------------------------------+------------------------+ | | | | | [Search...] | Tool: query_database | Output: | | | ------------------- | | | (*) query_db | Annotations: | +------------------+ | | [user] | Audience: user | | | | | [read-only] | Read-only: true | | [Image] | | | | Hints: "Useful for data queries" | | | | | ( ) echo | | +------------------+ | | ( ) add | table * | | | ( ) longOp | +--------------------------------+ | { | | [long-run] | | users v | | "rows": 42, | | ( ) dangerOp | +--------------------------------+ | "data": [...] | | [destructive] | Suggestions: users, orders, items | } | | | | | | | limit | [Play Audio] | | | +--------------------------------+ | | | | | 100 | | [Copy] [Clear] | | | +--------------------------------+ | | | | | | | | ████████████░░░░░░░░ 60% | | | | Processing step 3 of 5... | | | | | | | | [Execute Tool] [Cancel] | | +---------------------+--------------------------------------+------------------------+

功能清单

• List Changed Indicator：收到notifications/tools/list_changed时显示，并提供刷新按钮；
• 可搜索、可过滤的工具列表；
• 工具注解（Tool Annotations）展示：
  • Audience 徽标（[user]、[assistant]）
  • 只读指示（[read-only]）
  • 危险操作警告（[destructive]）
  • 长耗时指示（[long-run]）
  • 服务器提供的自定义 hints
• 参数自动补全，走completion/complete：
  • 随输入展示下拉建议
  • 同时支持 enum 与动态补全
• 由工具输入 Schema 自动生成表单；
• 进度指示器，来自notifications/progress：
  • 带百分比的进度条
  • 若提供则显示步骤描述
  • 已用时间显示
• Execute 按钮带加载态；Cancel 按钮发送notifications/cancelled；
• 富结果展示：
  • JSON/文本带语法高亮
  • base64 图片内容预览
  • base64 音频内容播放器
  • 资源链接显示为可点击引用

内联客户端请求队列（Inline Client Request Queue）

当工具执行触发 sampling 或 elicitation 请求时，这些请求以内联方式展开，而不是弹独立模态框：

+---------------------+--------------------------------------------------------------+ | Tools (4) | Tool: query_database [Executing...] | | +--------------------------------------------------------------+ | [Search...] | Parameters: { "table": "users", "limit": 10 } | | +--------------------------------------------------------------+ | (*) query_db | [!] Pending Client Requests (2) | | ( ) echo | | | ( ) add | +----------------------------------------------------------+ | | ( ) longOp | | sampling/createMessage [1 of 2] | | | | | Model hints: claude-3-sonnet | | | | | Messages: "Analyze this database schema..." | | | | | | | | | | Response: [Testing Profile: Quick Mock] | | | | | +------------------------------------------------------+ | | | | | | This is a mock LLM response for testing purposes. | | | | | | +------------------------------------------------------+ | | | | | | | | | | [Auto-respond] [Edit & Send] [Reject] | | | | +----------------------------------------------------------+ | | | | | | +----------------------------------------------------------+ | | | | elicitation/create (form) [2 of 2] | | | | | Message: "Please confirm the query parameters" | | | | | | | | | | table: [users ] limit: [10] [x] include_deleted | | | | | | | | | | [Cancel] [Submit] | | | | +----------------------------------------------------------+ | | | | | | [Cancel Tool] | +---------------------+--------------------------------------------------------------+

内联队列的要点：

• 待处理请求内联展示（非独立模态框），队列计数器显示总待处理数；
• 每个请求展示类型、摘要与响应选项；
• Auto-respond按钮使用当前激活的 Testing Profile 生成响应；
• Edit & Send允许修改响应后再发送；
• 请求按顺序处理，全部解决后工具执行才继续；
• 工具调用与其触发的请求之间有清晰的可见关联。

源码实现佐证

从源码结构看，Tools Screen 由 ToolsScreen.tsx 实现，其状态模型值得注意：

• ToolsUiState（选中工具、表单值、搜索词、runAsTask开关）由父组件 App 统一持有，使状态在 Tab 切换后依然保留（对应源码注释中 #1414/#1417）；
• ToolCallState显式建模调用生命周期：idle → pending → ok/error，并区分"结果返回isError"与"调用被拒绝（ProtocolError，如未知工具返回 -32602）"两种错误形态（#1632）；
• 结果面板支持resource_link块的按需读取（onReadResource），对应原文档"资源链接显示为可点击引用"。

界面布局由ToolControls（列表侧栏）、ToolDetailPanel（参数表单 + 进度）与ToolResultPanel（结果展示）三个组件组协作完成，详见 specification/v2_ux_components.md。

Apps Screen：MCP Apps 内嵌运行

Apps Screen 采用双面板布局，展示所有被识别为MCP Apps的工具——即元数据中通过_meta.ui.resourceUri（或已废弃的扁平键_meta["ui/resourceUri"]）声明了 UI 资源的工具。右侧面板在"启动前输入表单"与"启动后内嵌 App"两种状态间切换。

输入表单状态：

+--------------------------+----------------------------------------------+ | MCP Apps (1) [Q] | get-cohort-data [x] | | [Refresh Apps] | Returns cohort retention heatmap data | +--------------------------+----------------------------------------------+ | | | | > get-cohort-data | +------------------------------------------+ | | Returns cohort | | App Input | | | retention heatmap... | | | | | | | metric | | | | | +--------------------------------------+ | | | | | | retention v | | | | | | +--------------------------------------+ | | | | | | | | | | periodType | | | | | +--------------------------------------+ | | | | | | monthly v | | | | | | +--------------------------------------+ | | | | | | | | | | cohortCount | | | | | +--------------------------------------+ | | | | | | 12 | | | | | | +--------------------------------------+ | | | | | | | | | | maxPeriods | | | | | +--------------------------------------+ | | | | | | 12 | | | | | | +--------------------------------------+ | | | | | | | | | | [> Open App] | | | | +------------------------------------------+ | +--------------------------+----------------------------------------------+

运行中状态：

+--------------------------+----------------------------------------------+ | MCP Apps (1) [Q] | get-cohort-data [^] [x] | | [Refresh Apps] | [Back to Input] | +--------------------------+----------------------------------------------+ | > get-cohort-data | +------------------------------------------+ | | Returns cohort | | | | | retention heatmap... | | [Embedded MCP App] | | | | | | | | | | Cohort Retention Analysis Metric: [v] | | | | | | | | | | May 2025 100 85 72 ... | | | | | Jun 2025 100 85 78 ... | | | | | ... | | | | | | | | | +------------------------------------------+ | +--------------------------+----------------------------------------------+

功能清单

• App 检测（App Detection）：当getToolUiResourceUri(tool)返回定义的ui://...URI（辅助函数来自@modelcontextprotocol/ext-apps）时，该工具即被视为 App。过滤在上游接线层完成，界面接收已经过滤好的tools: Tool[]数组；
• List Changed Indicator：收到notifications/tools/list_changed时显示，与 Tools Screen 共用同一组件；
• Refresh Apps：重新执行tools/list；
• 可搜索列表，镜像 Tools Screen 的侧栏；
• 存在tool.icons时渲染 App 图标（真实 MCPTool.icons）；
• App 输入表单由tool.inputSchema通过 Tools Screen 同款SchemaForm生成；
• Open App 按钮：
  • 若工具有输入字段，则先填表再启动；
  • 若无输入字段，"Open App" 在选中时立即运行；
• Back to Input返回表单（仅当 App 有字段时可见）；
• Maximize / Minimize：隐藏侧栏，让 App 占满整个视口；
• App Renderer：在沙箱 iframe 中嵌入 UI 资源，并通过@modelcontextprotocol/ext-apps的AppBridge桥接到当前活跃的 MCP 服务器。宿主通过命令式 ref 调用sendToolInput/sendToolResult向 App 推送工具输入与结果；
• Close (x)：取消选中 App 并清理进行中的启动。

源码实现佐证

App 检测的统一封装位于 core/mcp/apps.ts：

• getAppResourceUri(tool)封装getToolUiResourceUri（来自@modelcontextprotocol/ext-apps/app-bridge），读取_meta.ui.resourceUri（优先嵌套格式）并回退到扁平键_meta["ui/resourceUri"]，两者同时存在时嵌套格式优先；
• isAppTool(tool)是全部客户端（web、CLI、TUI）共享的单一判定源。注意其实现会因畸形 URI 而抛错，因此tools.filter(isAppTool)在遇到第一个坏工具时会中止迭代——调用方需自行 try/catch 包裹；
• extractAppInfo(tool, resource?)把工具声明与resources/read结果合并成AppInfo，其中csp/permissions/domain按规范属于 UI 资源而非工具本体，因此必须读取资源才能拿到完整安全姿态。

屏幕组件契约（保持"哑组件"纯展示）：AppsScreen只接收tools、listChanged、onRefreshList、onSelectApp、onOpenApp(name, args)、onCloseApp等数据与回调，外加一个指向内嵌AppRenderer的 ref。AppRenderer暴露sendToolInput、sendToolResult、sendToolCancelled、teardown的命令式 ref；接线层负责从活跃 MCPClient创建AppBridge并驱动该 ref。实际实现在 AppsScreen.tsx，其中还包含：

• 无输入字段的 App 选中即自动启动（handleSelect内判断hasInputFields）；
• 深链自动打开（#1577）：当父组件从 URL 预置选中 App 并由autoOpen标记时，屏幕自动触发一次 Open App，且由 ref 守卫确保只触发一次；
• 运行中 App 的notifications/message日志与ui/message消息在 App 下方以封顶列表（MAX_APP_CHANNEL_ENTRIES = 500）展示；
• 缺少沙箱代理 URL（sandboxPath）时渲染不可用提示而非空白 iframe。

Resources Screen：资源、模板与订阅

Resources Screen 左侧采用手风琴布局（accordion），将 Resources、Templates、Subscriptions 组织为可折叠分区。

+--------------------------------+--------------------------------------------+ | Resources | Content Preview (65%) | | [*] List updated [Refresh Now] | | +--------------------------------+--------------------------------------------+ | | | | [Search...] | URI: file:///config.json | | | MIME: application/json | | [v] Resources (12) | ----------------------------- | | +-----------------------------+| | | | (*) config.json || Annotations: | | | [application] || Audience: application | | | [priority: 0.9] || Priority: 0.9 (high) | | | || | | | ( ) readme.md || { | | | [user] || "name": "my-app", | | | || "version": "1.0.0" | | | ( ) data.csv || } | | | ( ) schema.json || | | | ... (8 more) || [Copy] [Subscribe] [Unsubscribe] | | +-----------------------------+| | | | Last updated: 14:32:05 | | [>] Templates (2) | | | | | | [>] Subscriptions (1) | | | | | +--------------------------------+--------------------------------------------+

展开的 Templates 分区：

| [v] Templates (2) | | +-----------------------------+| | | ( ) user/{id} || | | [id: ________ ] [Go] || | | || | | ( ) file/{path} || | | [path: _______ ] [Go] || | +-----------------------------+|

展开的 Subscriptions 分区：

| [v] Subscriptions (1) | | +-----------------------------+| | | (*) config.json || | | Last update: 14:32:05 || | | [Unsub] || | +-----------------------------+|

手风琴行为

• 点击标题可独立展开/收起各分区；
• [v]表示展开，[>]表示收起；
• 空分区显示 "(0)" 计数并默认收起；
• 若仅存在 Resources，则该分区默认展开；
• 搜索会同时过滤所有分区。

功能清单

• List Changed Indicator：收到notifications/resources/list_changed时显示；
• 手风琴布局：Resources、Templates、Subscriptions 可折叠分区；
• 各分区内资源分页列表；
• 资源注解（Resource Annotations）：
  • Audience 徽标（[user]、[application/assistant]）
  • Priority 指示（[high]、[medium]、[low]）
• 资源模板带内联变量输入与 [Go] 按钮；
• 订阅/取消订阅资源更新；
• Subscriptions 分区展示活跃订阅及其最后更新时间；
• 内容查看器（JSON、文本、二进制预览）；
• 图片资源预览、音频资源播放器。

仓库中对应的数据管理逻辑位于 core/mcp/state 下：managedResourcesState.ts、managedResourceTemplatesState.ts、resourceSubscriptionsState.ts与分页状态pagedResourcesState.ts、pagedResourceTemplatesState.ts，界面组件位于 ResourcesScreen。

Prompts Screen：提示词测试台

+------------------------------+----------------------------------------------+ | Prompts (2) | Result (65%) | | [*] List updated [Refresh] | | +------------------------------+----------------------------------------------+ | | | | Select Prompt: | Messages: | | +--------------------------+ | | | | greeting_prompt v | | [0] role: user | | +--------------------------+ | Content: | | | "Hello, my name is John and I | | Description: | like cats" | | "Generates a friendly | | | greeting message" | [Image: profile.png] | | | | | Arguments: | [1] role: assistant | | ------------- | "Nice to meet you, John! I see | | | you're a cat lover..." | | name * | | | +--------------------------+ | | | | John v | | | | +--------------------------+ | | | Suggestions: John, Jane | | | | | | interests | | | +--------------------------+ | | | | cats | | | | +--------------------------+ | | | | | | [Get Prompt] | [Copy JSON] [Copy Messages] | +------------------------------+----------------------------------------------+

功能清单

• List Changed Indicator：收到notifications/prompts/list_changed时显示；
• 下拉选择可用提示词；
• 展示提示词描述；
• 参数自动补全，走completion/complete；
• 由提示词参数生成表单；
• 展示prompts/get结果消息，支持：
  • 角色标签（role labels）
  • 文本内容
  • 图片内容预览
  • 音频内容播放器
  • 内嵌资源展示
• 复制功能（JSON 或纯消息）。

相关状态管理见 core/mcp/state 下的managedPromptsState.ts与pagedPromptsState.ts。

Logging Screen：日志流与请求关联

Logging Screen 为双栏布局（Log Controls / Log Stream），展示来自服务器的实时日志。

+-----------------------+-----------------------------------------------------+ | Log Controls (25%) | Log Stream (75%) | | <-> resize | | +-----------------------+-----------------------------------------------------+ | | | | Log Level: | 14:32:01 [INFO] Server initialized | | +-----------------+ | 14:32:02 [DEBUG] Loading tool: echo | | | debug v | | 14:32:02 [DEBUG] Loading tool: add | | +-----------------+ | 14:32:03 [NOTICE] Configuration loaded | | | 14:32:05 [WARNING] Rate limit approaching | | [Set Level] | 14:32:10 [ERROR] Failed to fetch resource: 404 | | | 14:32:15 [CRITICAL] Database connection lost | | Filter: | 14:32:16 [ALERT] Service degraded | | +-----------------+ | 14:32:20 [EMERGENCY] System failure | | | | | | | +-----------------+ | ------------------------------------------------- | | | | | Show Levels: | | | [x] DEBUG | | | [x] INFO | | | [x] NOTICE | | | [x] WARNING | | | [x] ERROR | | | [x] CRITICAL | | | [x] ALERT | | | [x] EMERGENCY | | | | | | Request Filter: | | | +-----------------+ | | | | All requests v | | | | +-----------------+ | | | | | | [Clear] [Export] | [Auto-scroll] [Copy All] | +-----------------------+-----------------------------------------------------+

请求关联视图

日志可按触发它们的请求过滤：

+-----------------------+-----------------------------------------------------+ | Log Controls (25%) | Log Stream (filtered by request) | +-----------------------+-----------------------------------------------------+ | | | | Request Filter: | Showing logs for: tools/call (query_database) | | +-----------------+ | [View in History] | | | query_database | | ------------------------------------------------- | | | 14:32:10 v | | 14:32:10 [DEBUG] Starting query execution | | +-----------------+ | 14:32:11 [INFO] Requesting LLM analysis | | | 14:32:12 [DEBUG] Sampling response received | | Recent Requests: | 14:32:13 [WARNING] Query taking longer than usual | | ( ) query_database | 14:32:15 [INFO] Query completed, 42 rows | | ( ) analyze_data | | | ( ) prompts/get | | | | | | [Show All Logs] | [Auto-scroll] [Copy Filtered] | +-----------------------+-----------------------------------------------------+

功能清单

• Set Log Level：通过logging/setLevel请求，可选 debug、info、notice、warning、error、critical、alert、emergency；
• 实时日志流：来自notifications/message；
• 文本搜索过滤；
• 日志级别复选框过滤（全部 8 个 RFC 5424 级别）；
• 按严重度着色（8 种视觉处理）：

• 时间戳展示；
• Logger 名称展示（若提供）；
• 自动滚动开关；
• 导出日志到文件；
• 复制全部日志到剪贴板；
• 请求关联（Request Correlation）：
  • 按请求过滤日志（展示某个 tool/resource/prompt 调用期间发出的日志）；
  • Recent requests 下拉框展示最近 N 个请求；
  • [View in History] 链接跳转到 History Screen 中的对应请求；
  • 日志携带关联 ID，指向其父请求；
  • 点击任意日志条目可查看其所属请求链。

源码实现佐证

logLevels.ts 中，ALL_LEVELS_VISIBLE以Record<LoggingLevel, boolean>形式覆盖全部 8 个 RFC 5424 级别（debug、info、notice、warning、error、critical、alert、emergency），作为 LoggingScreen 的默认可见级别过滤；NO_LEVELS_VISIBLE提供全关基线。该常量被 App 组件用于初始化与重置提升后的过滤状态（#1417），与源码注释中"界面只导出组件（react-refresh 约束）"的模块拆分思路一致。

日志数据管理位于 core/mcp/state/stderrLogState.ts，请求追踪见 fetchRequestLogState.ts。

Tasks Screen：任务列表与进度

Tasks Screen 单栏布局，分"活跃任务"与"已完成任务"两组。

+-------------------------------------------------------------------------+ | Tasks [Refresh] | +-------------------------------------------------------------------------+ | | | Active Tasks (2) | | +---------------------------------------------------------------------+ | | | Task: abc-123 Status: running ████████░░ 80% | | | | Method: tools/call | | | | Tool: longRunningOperation | | | | Started: 14:32:05 Elapsed: 45s | | | | Progress: Processing batch 4 of 5... | | | | [View Details] [Cancel] | | | +---------------------------------------------------------------------+ | | | | +---------------------------------------------------------------------+ | | | Task: def-456 Status: waiting ░░░░░░░░░░ 0% | | | | Method: resources/read | | | | Resource: large-dataset | | | | Started: 14:33:00 Elapsed: 10s | | | | [View Details] [Cancel] | | | +---------------------------------------------------------------------+ | | | | Completed Tasks (3) [Clear History] | | +---------------------------------------------------------------------+ | | | Task: ghi-789 Status: completed ██████████ 100% | | | | Method: tools/call (processData) | | | | Completed: 14:31:30 Duration: 1m 30s | | | | [View Result] [Dismiss] | | | +---------------------------------------------------------------------+ | | | +-------------------------------------------------------------------------+

功能清单

• 任务列表：通过tasks/list请求；
• 实时状态更新：通过notifications/task/statusChanged；
• 进度展示：来自notifications/progress：
  • 带百分比的进度条
  • 当前步骤描述
  • 总进度/当前进度数字
• 任务状态：waiting、running、completed、failed、cancelled；
• 取消任务：tasks/cancel；
• 查看结果：tasks/result；
• 查看任务详情：tasks/get；
• 任务历史与 dismiss；
• 已用时间/持续时间展示。

仓库中任务相关状态见 core/mcp/state 下的managedRequestorTasksState.ts、pagedRequestorTasksState.ts与mergeTaskIntoList.ts，Schemas 见 taskNotificationSchemas.ts，界面组件位于 TasksScreen。测试服务器配置 tasks-modern-http.json 可用于本地验证 Tasks 相关交互。

History Screen：统一请求历史与追踪树

History Screen 是所有 MCP 请求的统一历史视图，具备**层级请求追踪（hierarchical request trace）**能力：当工具调用触发 sampling 或 elicitation 请求时，展示父子关系。

+-------------------------------------------------------------------------------------+ | History [Search...] [Filter v] [Clear All] | +-------------------------------------------------------------------------------------+ | | | [>] 14:35:22 tools/call query_database [success] 450ms [Replay] [Pin] | | +-- 14:35:23 sampling/createMessage claude-3-sonnet [+45ms] | | | Model: claude-3-sonnet-20241022 | | | Response: "Based on the schema, I recommend..." [Expand] | | +-- 14:35:24 sampling/createMessage gpt-4 [+120ms] | | | Model: gpt-4-turbo | | | Response: "The query should use an index..." [Expand] | | +-- 14:35:25 elicitation/create (form: confirm_action) [+200ms] | | User provided: { confirmed: true } | | | | [>] 14:34:15 resources/read file:///config.json [success] 120ms [Replay] [Pin] | | (no client requests) | | | | [>] 14:33:45 prompts/get greeting_prompt [success] 30ms [Replay] [Pin] | | Arguments: { "name": "John", "interests": "cats" } | | | | [>] 14:32:10 tools/call analyze_data [success] 800ms [Replay] [Pin] | | +-- 14:32:11 sampling/createMessage claude-3-opus [+350ms] | | | Messages: "Analyze this dataset and identify..." | | | Response: "I've identified 3 key patterns..." [Expand] | | +-- 14:32:12 elicitation/create (url: oauth) [+400ms] | | Status: User completed OAuth flow | | | | Pinned Requests (2) | | +---------------------------------------------------------------------------------+ | | | * "Test query" tools/call query_database 14:35:22 [Replay] [Unpin] | | | | * "Get config" resources/read config.json 14:34:15 [Replay] [Unpin] | | | +---------------------------------------------------------------------------------+ | | | +-------------------------------------------------------------------------------------+

功能清单

• 请求追踪（Request Trace）：展示因果关系的层级视图：
  • 顶层请求（tools/call、resources/read、prompts/get）作为父节点
  • 客户端请求（sampling、elicitation）作为嵌套子节点并带时间偏移
  • 可展开/收起的树结构
  • 可视化连接线展示调用链
  • 关联 ID（Correlation ID）将相关请求串联
• 自动捕获：所有 MCP 请求/响应自动记录：
  • tools/call—— 工具调用（父）
  • resources/read—— 资源读取（父）
  • prompts/get—— 提示词获取（父）
  • sampling/createMessage—— 采样请求（子，嵌套在触发请求下）
  • elicitation/create—— 策展请求（子，嵌套在触发请求下）
• 请求详情展示：
  • 时间戳（父节点为绝对时间，子节点为相对偏移）
  • 方法名
  • 目标（工具名、资源 URI、提示词名、模型 hint）
  • 参数/实参
  • 结果状态（success/error）
  • 总响应时间（父）、偏移时间（子）
  • 响应数据（可折叠）
• Replay（重放）：以原始参数重新执行任意请求：
  • 打开对应功能屏（Tools、Resources、Prompts）并预填表单
  • 支持重放前修改参数
  • 重放父节点会重放整条链
• Pin/Save（固定）：固定重要请求以便快速访问：
  • 固定项跨会话持久化
  • 可为固定项设置自定义标签
  • 固定区位于底部便于访问
• 过滤：按方法类型（tools、resources、prompts、sampling、elicitation）、状态（success、error）、时间范围，以及显示/隐藏子请求（展平视图）
• 搜索：跨方法名、参数与响应
• Clear：清空历史（带确认）
• Export：以 JSON 导出历史用于分享/调试

重放工作流

1. 点击任意历史条目的 [Replay]
2. Inspector 导航到对应功能屏（Tools、Resources、Prompts）
3. 表单预填原始参数
4. 用户可修改参数或直接执行
5. 新请求加入历史（触发过的客户端请求同样嵌套）

对应的消息日志状态见 core/mcp/state/messageLogState.ts 与 fetchRequestLogState.ts。

功能屏的公共交互要素

List Changed Indicator

多个功能屏（Tools、Apps、Resources、Prompts）共享同一"列表已更新"指示器：服务器通过notifications/*/list_changed通知资源变化时，界面显示更新标记并提供刷新按钮。这保证了服务器端状态变化能被用户即时感知。

自动补全（completion/complete）

Tools 参数与 Prompts 参数均支持自动补全：既支持 Schema 中的 enum 静态建议，也支持服务器端动态补全。输入时下拉展示建议，与completion/complete请求交互。

SchemaForm：统一的表单生成器

Tools 参数表单、Prompts 参数表单与 Apps 输入表单均由同一个SchemaForm根据 JSON Schema 生成，保证三个功能屏的表单体验一致（必填标记、enum 下拉、默认值等）。相关实现见 SchemaForm 与 specification/v2_ux_components.md。

富内容展示

工具结果、提示词消息与资源内容均支持多模态展示：JSON/文本语法高亮、base64 图片预览、音频播放器与资源链接引用，统一由ContentViewer组件族承载。

在仓库中继续探索

• specification/v2_ux.md：功能屏之外的整体导航模型、Server List、server.json 导入、Server Info 与客户端特性处理器（Sampling 面板、Elicitation 处理器、Roots 配置）的完整规格；
• specification/v2_ux_handlers.md：Testing Profiles、Sampling Providers 等客户端特性处理器的详细说明；
• specification/v2_ux_components.md 与 specification/v2_ux_interfaces.md：组件与接口契约；
• specification/v2_screenshots.md：各功能屏的实际截图；
• 源码：clients/web/src/components/screens/下各功能屏组件（ToolsScreen、AppsScreen、ResourcesScreen、PromptsScreen、LoggingScreen、TasksScreen），core/mcp/state/下各类状态管理，core/mcp/apps.ts 的 App 检测封装；
• 测试服务器配置：test-servers/configs/下的 modern-http.json、modern-mrtr-http.json、tasks-modern-http.json 等可分别用于验证工具、MRTR 请求追踪与任务相关交互。

• 开发工具
• MCP Clients
• 调试器