# Inspector V2 UX - Feature Screens ### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_web_client.md) | V2 UX | [V2 Auth](v2_auth.md) | [V2 New Spec Impact](v2_new_spec_impact.md) #### [Overview](v2_ux.md) | Features | [Handlers](v2_ux_handlers.md) | [Screenshots](v2_screenshots.md) | [Components](v2_ux_components.md) | [Interfaces](v2_ux_interfaces.md) --- Each feature screen uses a **resizable panel layout** for flexibility. ## Table of Contents * [Tools Screen](#tools-screen) * [Apps Screen](#apps-screen) * [Resources Screen](#resources-screen) * [Prompts Screen](#prompts-screen) * [Logging Screen](#logging-screen) * [Tasks Screen](#tasks-screen) * [History Screen](#history-screen) ## Tools Screen ``` +---------------------+--------------------------------------+------------------------+ | 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] | | +---------------------+--------------------------------------+------------------------+ ``` **With Pending Client Requests (inline expansion):** When a tool execution triggers sampling or elicitation requests, they appear inline: ``` +---------------------+--------------------------------------------------------------+ | 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] | +---------------------+--------------------------------------------------------------+ ``` **Features:** - **List Changed Indicator** - Shows when `notifications/tools/list_changed` received, with refresh button - Searchable/filterable tool list - **Tool Annotations** displayed: - Audience badge ([user], [assistant]) - Read-only indicator ([read-only]) - Destructive warning ([destructive]) - Long-running indicator ([long-run]) - Custom hints from server - **Autocomplete** for arguments via `completion/complete`: - Dropdown suggestions as user types - Supports enum and dynamic completion - Form generated from tool input schema - **Per-Tool Metadata** - [Edit Metadata] button to set tool-specific `_meta` fields: - Stored per-server, per-tool (not in global localStorage) - Merged with server-level metadata on each call - Use case: Different progressToken behavior, tool-specific tracking IDs - **Progress Indicator** from `notifications/progress`: - Progress bar with percentage - Step description if provided - Elapsed time display - Execute button with loading state - **Cancel button** sends the transport-appropriate cancellation signal (#2140): on a 2026-07-28 Streamable HTTP connection it aborts the request's own SSE response stream, which the spec makes the cancellation signal; on stdio (and on any pre-2026 connection, where the per-stream mechanism does not exist) it sends `notifications/cancelled` - **Inline Client Request Queue** - When tool triggers sampling/elicitation: - Pending requests shown inline (not as separate modal) - Queue counter shows total pending requests - Each request shows type, summary, and response options - **Auto-respond** button uses active Testing Profile - **Edit & Send** allows modifying response before sending - Requests processed in order, tool execution resumes after all resolved - Visible connection between tool call and its triggered requests - **Rich Result Display**: - JSON/text with syntax highlighting - Image preview for image content (base64) - Audio player for audio content (base64) - Resource links displayed as clickable references ## Apps Screen A two-panel layout showing the subset of tools that are **MCP Apps** — tools whose metadata advertises a UI resource via `_meta.ui.resourceUri` (or the deprecated flat `_meta["ui/resourceUri"]`). The right panel toggles between an input form (before launch) and the embedded app (after launch). ``` +--------------------------+----------------------------------------------+ | 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] | | | | +------------------------------------------+ | +--------------------------+----------------------------------------------+ ``` **Running App State:** After "Open App" the right panel swaps to the embedded MCP App. The input form is replaced by the app iframe. A "Back to Input" button is shown when the selected app has input fields; it returns to the form. A Maximize toggle hides the sidebar so the app takes the full viewport. ``` +--------------------------+----------------------------------------------+ | 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 ... | | | | | ... | | | | | | | | | +------------------------------------------+ | +--------------------------+----------------------------------------------+ ``` **Features:** - **App Detection** — A tool is treated as an App when `getToolUiResourceUri(tool)` returns a defined `ui://...` URI (helper from `@modelcontextprotocol/ext-apps`). The detection helper is wrapped in `core/mcp/apps.ts` (e.g. `isAppTool(tool)`) so all clients (web, CLI, TUI) share one definition. Filtering happens upstream (wiring layer); the screen receives an already-filtered `tools: Tool[]` array. - **List Changed Indicator** — shows when `notifications/tools/list_changed` received; same component as the Tools screen. - **Refresh Apps** re-runs `tools/list`. - **Searchable list**, mirroring the Tools screen sidebar. - **App icons** rendered from `tool.icons` (real MCP `Tool.icons`) when present. - **App Input form** generated from `tool.inputSchema` via the same `SchemaForm` used by the Tools screen. - **Open App** button: - If the tool has input fields, the form is filled before launch. - If the tool has no input fields, "Open App" runs immediately on selection. - **Back to Input** returns to the form (visible only when the app has fields). - **Maximize / Minimize** toggles full-viewport mode by hiding the sidebar. - **App Renderer** embeds the UI resource in a sandboxed iframe and bridges it to the active MCP server via the `AppBridge` from `@modelcontextprotocol/ext-apps`. The host pushes tool input and results to the app via `sendToolInput` / `sendToolResult` through an imperative ref. - **Close (x)** deselects the app and clears any in-flight launch. **Component contract (presentational):** The screen and its sub-components stay "dumb": they accept data + callbacks + imperative refs and contain only display logic. - `AppsScreen` props: `tools: Tool[]` (already filtered to apps), `listChanged`, `onRefreshList`, `onSelectApp`, `onOpenApp(name, args)`, `onCloseApp`, plus a ref for the embedded `AppRenderer`. - `AppRenderer` exposes an imperative ref with `sendToolInput`, `sendToolResult`, `sendToolCancelled`, `teardown`. The wiring layer creates the `AppBridge` from the active MCP `Client` (real MCP type) and drives the ref; the renderer itself only owns the iframe and the bridge handle. ## Resources Screen Uses an **accordion layout** for the left panel to organize Resources, Templates, and Subscriptions into collapsible sections. ``` +--------------------------------+--------------------------------------------+ | 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) | | | | | +--------------------------------+--------------------------------------------+ ``` **Expanded Templates Section:** ``` | [v] Templates (2) | | +-----------------------------+| | | ( ) user/{id} || | | [id: ________ ] [Go] || | | || | | ( ) file/{path} || | | [path: _______ ] [Go] || | +-----------------------------+| ``` **Expanded Subscriptions Section:** ``` | [v] Subscriptions (1) | | +-----------------------------+| | | (*) config.json || | | Last update: 14:32:05 || | | [Unsub] || | +-----------------------------+| ``` **Accordion Behavior:** - Sections expand/collapse independently by clicking header - [v] indicates expanded section, [>] indicates collapsed - Empty sections show "(0)" count and collapse by default - If only Resources exist, that section expands by default - Search filters across all sections simultaneously **Features:** - **List Changed Indicator** - Shows when `notifications/resources/list_changed` received - **Accordion Layout** - Collapsible sections for Resources, Templates, Subscriptions - List resources with pagination within each section - **Resource Annotations** displayed: - Audience badge ([user], [application/assistant]) - Priority indicator ([high], [medium], [low]) - Resource templates with inline variable input and [Go] button - Subscribe/unsubscribe to resource updates - **Subscriptions Section** shows active subscriptions with last update time - Content viewer (JSON, text, binary preview) - Image preview for image resources - Audio player for audio resources ## 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] | +------------------------------+----------------------------------------------+ ``` **Features:** - **List Changed Indicator** - Shows when `notifications/prompts/list_changed` received - Dropdown to select from available prompts - Prompt description displayed - **Autocomplete** for arguments via `completion/complete` - Form generated from prompt arguments - Display prompt messages result with: - Role labels - Text content - Image content preview - Audio content player - Embedded resource display - Copy functionality (JSON or plain messages) ## Logging Screen ``` +-----------------------+-----------------------------------------------------+ | 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] | +-----------------------+-----------------------------------------------------+ ``` **With Request Correlation:** Logs can be filtered by the request that triggered them: ``` +-----------------------+-----------------------------------------------------+ | 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] | +-----------------------+-----------------------------------------------------+ ``` **Features:** - **Set Log Level** via `logging/setLevel` request - Options: debug, info, notice, warning, error, critical, alert, emergency - **Real-time Log Stream** from `notifications/message` - Filter by text search - Filter by log level checkboxes (all 8 RFC 5424 levels) - **Color-coded by severity** (8 distinct visual treatments): | Level | Color | Style | |-------|-------|-------| | DEBUG | Gray | Normal | | INFO | Blue | Normal | | NOTICE | Cyan | Normal | | WARNING | Yellow | Normal | | ERROR | Red | Normal | | CRITICAL | Red | Bold | | ALERT | Magenta | Bold | | EMERGENCY | White on Red | Background highlight | - Timestamp display - Logger name display (if provided) - Auto-scroll toggle - Export logs to file - Copy all logs to clipboard - **Request Correlation**: - Filter logs by request (shows logs emitted during a specific tool/resource/prompt call) - Recent requests dropdown shows last N requests - [View in History] link navigates to the request in History screen - Logs include correlation ID linking them to their parent request - Click any log entry to see which request chain it belongs to ## 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] | | | +---------------------------------------------------------------------+ | | | +-------------------------------------------------------------------------+ ``` **Features:** - **Task List** via `tasks/list` request - **Real-time Status Updates** via `notifications/task/statusChanged` - **Progress Display** from `notifications/progress`: - Progress bar with percentage - Current step description - Total/current progress numbers - Task states: waiting, running, completed, failed, cancelled - **Cancel Tasks** via `tasks/cancel` - **View Results** via `tasks/result` - **View Task Details** via `tasks/get` - Task history with dismissal - Elapsed time / duration display ## History Screen A unified history of all MCP requests with **hierarchical request trace** capability. Shows parent-child relationships when tool calls trigger sampling or elicitation requests. ``` +-------------------------------------------------------------------------------------+ | 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] | | | +---------------------------------------------------------------------------------+ | | | +-------------------------------------------------------------------------------------+ ``` **Features:** - **Request Trace** - Hierarchical view showing causal relationships: - Top-level requests (tools/call, resources/read, prompts/get) shown as parent nodes - Client requests (sampling, elicitation) shown as nested children with timing offset - Expandable/collapsible tree structure - Visual connector lines showing the chain - **Correlation ID** links related requests together - **Automatic Capture** - All MCP requests/responses logged automatically: - `tools/call` - Tool invocations (parent) - `resources/read` - Resource reads (parent) - `prompts/get` - Prompt retrievals (parent) - `sampling/createMessage` - Sampling requests (child, nested under triggering request) - `elicitation/create` - Elicitation requests (child, nested under triggering request) - **Request Details** displayed: - Timestamp (absolute for parents, relative offset for children) - Method name - Target (tool name, resource URI, prompt name, model hint) - Parameters/arguments - Result status (success/error) - Total response time (for parents), offset time (for children) - Response data (collapsible) - **Replay** - Re-execute any request with original parameters: - Opens relevant screen (Tools, Resources, Prompts) pre-filled - Option to modify parameters before replay - Replaying a parent re-executes the full chain - **Pin/Save** - Pin important requests for quick access: - Pinned requests persist across sessions - Optional custom label for pinned items - Pinned section at bottom for easy access - **Filter** by: - Method type (tools, resources, prompts, sampling, elicitation) - Status (success, error) - Time range - Show/hide child requests (flatten view) - **Search** across method names, parameters, and responses - **Clear** - Clear history (with confirmation) - **Export** - Export history as JSON for sharing/debugging **Replay Workflow:** 1. Click [Replay] on any history entry 2. Inspector navigates to the appropriate screen (Tools, Resources, Prompts) 3. Form is pre-filled with the original parameters 4. User can modify parameters or execute immediately 5. New request is added to history (with any triggered client requests nested)