feat(client): add Mantine UI with MCP SDK integration

[olaservo]

Summary

Complete Mantine-based UI for MCP Inspector V2, building on the core package from PR #1023.

Specification References

This implementation follows the V2 specification documents in specification/:

Spec	Implementation
v2_ux.md	AppLayout, ServerList, navigation, theme toggle
v2_ux_features.md	Tools, Resources, Prompts, History, Logs pages
v2_ux_handlers.md	SamplingModal, ElicitationModal, RootsConfigurationModal
v2_tech_stack.md	Mantine components, React Router, Tabler icons

Note: PR #1011 adds additional UX patterns (inline queue, tree view, testing profiles) that will be implemented in the follow-up client features PR.

Directory Structure

client/src/
├── components/           # Reusable UI components
│   ├── AddServerModal.tsx
│   ├── AnnotationBadges.tsx
│   ├── ElicitationModal.tsx
│   ├── ImportServerJsonModal.tsx
│   ├── ListChangedIndicator.tsx
│   ├── OAuthDebuggerModal.tsx
│   ├── RootsConfigurationModal.tsx
│   ├── SamplingModal.tsx
│   ├── ServerCard.tsx
│   ├── ServerInfoModal.tsx
│   ├── ServerSettingsModal.tsx
│   ├── StatusIndicator.tsx
│   └── ThemeToggle.tsx
├── context/              # React context providers
│   └── McpContext.tsx    # MCP client state & connection management
├── hooks/                # Custom React hooks
│   ├── useMcpTools.ts
│   ├── useMcpResources.ts
│   └── useMcpPrompts.ts
├── layouts/
│   └── AppLayout.tsx     # Shell with nav menu & theme toggle
├── lib/mcp/              # MCP client utilities
│   ├── client.ts         # Client creation & lifecycle
│   ├── handlers.ts       # Sampling/elicitation handlers
│   └── transport.ts      # StreamableHTTPClientTransport setup
├── mocks/                # Mock data (pending storage implementation)
│   ├── auth.ts
│   ├── capabilities.ts
│   ├── history.ts
│   ├── logs.ts
│   ├── servers.ts
│   ├── tasks.ts
│   └── testingProfiles.ts
├── pages/                # Route pages
│   ├── ServerList.tsx    # Home - server cards, add/import
│   ├── Tools.tsx         # 3-column: list, params, results
│   ├── Resources.tsx     # Resource list with templates
│   ├── Prompts.tsx       # Prompt selector with args
│   ├── History.tsx       # Request history, expand/collapse
│   ├── Logs.tsx          # RFC 5424 levels, filtering
│   └── Tasks.tsx         # Active/completed tasks
├── types/                # TypeScript definitions
│   ├── auth.ts
│   ├── capabilities.ts
│   ├── clientRequests.ts
│   ├── history.ts
│   ├── logs.ts
│   ├── responses.ts
│   ├── servers.ts
│   ├── tasks.ts
│   └── testingProfiles.ts
├── App.tsx               # Router & providers
└── main.tsx              # Entry point

Pages (7)

• ServerList - Server cards with connection status, add/import/settings
• Tools - 3-column layout with tool list, params, results
• Resources - Resource list with templates and subscriptions
• Prompts - Prompt selector with argument forms
• History - Request history with expand/collapse, pinning
• Logs - RFC 5424 log levels with filtering
• Tasks - Active/completed task management

Components

• Server management modals (Add, Import, Settings, Info)
• Client feature modals (Sampling, Elicitation, Roots)
• OAuth debugger modal
• Theme toggle (light/dark/auto)
• Annotation badges for tools/resources

MCP Integration

• McpContext - Browser-side MCP SDK connection (StreamableHTTPClientTransport)
• useMcpTools, useMcpResources, useMcpPrompts hooks
• Real-time notification handlers for list changes

Design Decisions

• Uses mock data for storage-dependent features (pending Inspector V2 Data Spec #983)
• Client features (inline queue, tree view) deferred to next PR in stack

Test Plan

• npm run build -w client passes
• Manual testing with Everything MCP server
• Review feedback incorporated

Stack

• Depends on: feat(core): add @modelcontextprotocol/inspector-core package #1023 (inspector-core) - merge first
• Followed by: client features PR (implements spec: Add client features UX patterns (sampling/elicitation) #1011 patterns: inline queue, tree view, testing profiles)

---

Generated with Claude Code