docs(spec): Restructure UX docs and add visual reference
Break up v2_ux.md (1400+ lines) into smaller, focused documents: - v2_ux.md - Core UX (overview, server list, modals) - v2_ux_features.md - Feature screens (Tools, Resources, etc.) - v2_ux_handlers.md - Client handlers, form generation, errors - v2_screenshots.md - Visual reference with Shadcn prototype screenshots Add screenshots from Shadcn prototype to specification/screenshots/. Update navigation headers across all spec files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
c39df75c58
commit
9d5110f8f4
1 changed files with 1168 additions and 1024 deletions
116
specification/v2_screenshots.md
Normal file
116
specification/v2_screenshots.md
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
# Inspector V2 UX - Visual Reference
|
||||
|
||||
### [Brief](README.md) | [V1 Problems](v1_problems.md) | [V2 Scope](v2_scope.md) | [V2 Tech Stack](v2_tech_stack.md)
|
||||
### UX: [Overview](v2_ux.md) | [Features](v2_ux_features.md) | [Handlers](v2_ux_handlers.md) | Screenshots
|
||||
|
||||
---
|
||||
|
||||
This document provides visual screenshots of the **Shadcn UI prototype** implementation. These complement the ASCII wireframes in the UX specification documents.
|
||||
|
||||
## 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.
|
||||
|
||||
### Light Theme
|
||||

|
||||
|
||||
### Dark Theme
|
||||

|
||||
|
||||
### 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.
|
||||
|
||||
#### Light Theme
|
||||

|
||||
|
||||
#### Dark Theme
|
||||

|
||||
|
||||
---
|
||||
|
||||
## Client Feature Handlers
|
||||
|
||||
### Test Client Features Dropdown
|
||||
Menu for testing client capabilities (Sampling, Elicitation, Roots).
|
||||
|
||||

|
||||
|
||||
### 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
|
||||
- Dark theme is supported throughout the application (toggle in header)
|
||||
- Screenshots may not reflect the latest implementation - refer to wireframes for authoritative UX
|
||||
Loading…
Reference in a new issue