1149288ea6
Distinguishes server `id` (the unique map key in MCPConfig.mcpServers)
from `name` (display label) so containers can dispatch by id without
relying on display strings. ServerCard, ConnectionToggle, ServerListScreen,
and supporting stories all updated.
- ServerCard: add `id` prop; all action callbacks now `(id: string) => void`
- ConnectionToggle: collapse `onConnect`/`onDisconnect` into single `onToggle`
- ServerListScreen: lift `activeServer` to a prop; combine `onSetActive` +
`onToggleConnection` into a single `onToggleConnection(id)` callback
- Stories: use UUIDs for server ids so callbacks visibly carry ids, not names
Removes the "Direct"/"Via Proxy" connection mode concept, which is no
longer planned. ServerSettingsForm drops the section, ServerCard drops
the badge, InspectorServerSettings drops the field.
Removes the "Test Client Features" dropdown from ServerCard along with
its four handlers; that surface will live elsewhere.
TransportBadge now collapses `sse` and `streamable-http` into a single
"HTTP" label; ServerCard adds a grey transport descriptor next to the
badge ("Standard I/O", "SSE (Server Sent Events) [deprecated]",
"Streamable HTTP"). The version badge moves from the header row to sit
beside the transport badge.
ServerCard header no longer wraps; long server names truncate with
ellipsis.
Specification docs (`v2_scope.md`, `v2_screenshots.md`,
`v2_ux_interfaces.md`, `v2_ux_storybook.md`) updated to match.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
106 lines
3.4 KiB
Markdown
106 lines
3.4 KiB
Markdown
# Inspector V2 UX - Visual Reference
|
|
|
|
### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_web_client.md) | V2 UX
|
|
#### [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | Screenshots | [Components](v2_ux_components.md)
|
|
|
|
---
|
|
|
|
This document provides visual screenshots from the **Shadcn UI prototype** (`v2/prototype/shadcn`). These complement the ASCII wireframes in the UX specification documents.
|
|
|
|
**Note:** The V2 implementation will use **Mantine** (see [V2 Tech Stack](v2_web_client.md#mantine-rationale)). These Shadcn screenshots remain as historical reference showing how the UX spec translates to a working UI. The Mantine implementation will have the same screens and functionality with slightly different visual styling.
|
|
|
|
## Table of Contents
|
|
* [Server List](#server-list)
|
|
* [Server Modals](#server-modals)
|
|
* [Feature Screens](#feature-screens)
|
|
* [Client Feature Handlers](#client-feature-handlers)
|
|
|
|
---
|
|
|
|
## Server List
|
|
|
|
The home screen showing server connection cards in a responsive grid.
|
|
|
|
|
|
|
|
### Add Server Dropdown
|
|
Options for adding a new server (manual, import config, import server.json).
|
|
|
|
|
|
|
|
---
|
|
|
|
## Server Modals
|
|
|
|
### Server Settings Modal
|
|
Per-server configuration including connection mode, headers, metadata, timeouts, and OAuth settings.
|
|
|
|
|
|
|
|
### Server Info Modal
|
|
Displays server/client capabilities, protocol version, and server instructions.
|
|
|
|
|
|
|
|
---
|
|
|
|
## Feature Screens
|
|
|
|
### Tools Screen
|
|
Tool list with annotations (user, read-only, destructive, long-running), parameter form, and results panel.
|
|
|
|
|
|
|
|
### Resources Screen
|
|
Accordion layout with Resources, Templates, and Subscriptions sections.
|
|
|
|
|
|
|
|
### Prompts Screen
|
|
Prompt selection, argument form with autocomplete, and message result display.
|
|
|
|
|
|
|
|
### Logging Screen
|
|
Real-time log stream with all 8 RFC 5424 log levels, color-coded by severity.
|
|
|
|
|
|
|
|
### Tasks Screen
|
|
Active and completed tasks with progress bars and status indicators.
|
|
|
|
|
|
|
|
### History Screen
|
|
|
|
Request history with replay and pin functionality.
|
|
|
|
|
|
|
|
---
|
|
|
|
## Client Feature Handlers
|
|
|
|
### Sampling Panel
|
|
Handler for `sampling/createMessage` requests with mock response input.
|
|
|
|
|
|
|
|
### Elicitation Form
|
|
Form-based handler for `elicitation/create` requests with JSON Schema-generated fields.
|
|
|
|
|
|
|
|
### Roots Configuration
|
|
Configure filesystem roots exposed to the connected server.
|
|
|
|
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- All screenshots are from the `v2/prototype/shadcn` branch (historical reference)
|
|
- The actual V2 implementation will use Mantine (`v2/prototype/mantine`)
|
|
- Dark theme is supported throughout the application (toggle in header)
|
|
- Screenshots may not reflect the latest implementation - refer to wireframes for authoritative UX
|