bcb5b643ffAdds the missing Apps tab to the v2 UX specification. Apps are the subset of tools whose `_meta.ui.resourceUri` advertises a UI resource (per `@modelcontextprotocol/ext-apps`). The screen mirrors the legacy v1 layout: a sidebar of apps and a right pane that toggles between an input form (before launch) and the embedded MCP App via `AppBridge`. - v2_ux.md: add `[Apps]` to the navigation tab list and a new "Apps Screen" subsection with both states (input form / running app). - v2_ux_features.md: full Apps Screen feature spec — ASCII diagrams, detection rule, presentational contract for `AppsScreen` / `AppRenderer` (imperative ref shape so the screen stays "dumb" and the wiring layer drives the bridge). - v2_screenshots.md: link the two reference PNGs from the legacy v1 client. - v2_ux_storybook.md: add `AppListItem` (2.3a), `AppDetailPanel` (2.5a), `AppRenderer` (2.5b), and `AppsScreen` (3.2a); update Build Order. Implementation work tracked on the v2 board: #1260–#1264. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
118 lines
3.8 KiB
Markdown
118 lines
3.8 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.
|
|
|
|
|
|
|
|
### Apps Screen
|
|
|
|
The subset of tools that are MCP Apps — tools with `_meta.ui.resourceUri`. Two-panel layout: list of apps on the left, input form (before launch) or embedded app iframe (after launch) on the right.
|
|
|
|
**Input form state** (from legacy v1 reference):
|
|
|
|
|
|
|
|
**Running app state** (from legacy v1 reference):
|
|
|
|
|
|
|
|
### 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
|