[V2] Example for mantine #979
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- v2-features.json: JSON-based feature tracking derived from v2_scope.md - claude-progress.md: Session handoff notes for context continuity - scripts/init.sh, init.ps1: Dev environment setup for Unix/Windows - scripts/smoke-test.sh: Quick validation script for session start This infrastructure supports long-running development with Claude by providing structured state management across context windows. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add sync-issues scripts to generate v2-features.json from GitHub - Add v2-features.json to .gitignore (now a generated cache) - Update init scripts to sync issues at session start - Point to project board for visual tracking GitHub issues with 'v2' label are now the primary tracking mechanism. The local JSON file is just a cache for offline/quick reference. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Part of tiered tracking system: - GitHub issues: major features, bugs needing discussion - TODO.md: small tasks discovered during development - claude-progress.md: session context and implementation notes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add package.json with Playwright test dependency - Add playwright.config.ts for test configuration - Create tests/smoke/ for session-start validation - Create tests/e2e/ for user journey tests - Update smoke-test scripts to run Playwright - Update init scripts to install dependencies - Add Playwright artifacts to .gitignore This completes the E2E testing setup recommended for long-running Claude development sessions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
This file is a generated cache from GitHub issues and should not be tracked. It was added to .gitignore but was already committed before that. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Clean handoff for prototype work on new branch. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Express: cleaner routing/middleware for proxy CRUD endpoints, well-maintained ecosystem - Pino: fastest logger option, JSON-structured logs work well for debugging MCP traffic 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Based on MCPJam Inspector analysis: - Server connection card with status indicators - Resizable panel layouts for Tools/Resources/Prompts screens - Form generation from JSON Schema - Error handling patterns (inline errors, retry count, doc links) Also updates nav links in all spec files to include v2_ux.md. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add server.json import support (Issue modelcontextprotocol#922) for MCP Registry format - Add History Screen with automatic capture and replay functionality - Add Pino logging rationale with log-as-history architecture - Remove emojis from markdown files, use text alternatives New UX sections added: - Logging Screen (notifications/message, logging/setLevel) - Tasks Screen (tasks/*, notifications/task/statusChanged) - Sampling Panel (sampling/createMessage) - Elicitation Handler (form + URL modes) - Roots Configuration (roots/list) - Experimental Features Panel (raw JSON-RPC tester) Enhanced existing screens: - Tools: annotations, autocomplete, progress indicators, image/audio - Resources: annotations, subscriptions - Prompts: autocomplete - Navigation: ping latency, listChanged indicators 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Implements UI-only prototype for component library evaluation: - Server List home page with server cards - AppLayout with top navigation (Tools, Resources, Prompts, Logs, Tasks, History) - All 7 screen stubs with mock data - ServerCard and StatusIndicator components - Dark theme with Mantine v7 Based on v2_ux.md specification from PR modelcontextprotocol#945. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Removes unused Code import from Prompts.tsx and unused Title import from Resources.tsx to pass TypeScript strict checking. Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Consolidate TODO.md (merged outer file, removed duplicate) - Add "Last Good State" section to claude-progress.md - Mark Mantine vs Shadcn demos complete - Update spec-driven items to "Ready to Implement" - Remove completed requirements issue from Waiting On Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Session 1 completed on v2/prototype/shadcn: - Foundation: Dialog, Checkbox, Progress, ListChangedIndicator components - Layout: Logs 2-panel, Tasks card-based Next: Session 2 feature enhancements, Session 3 modals, Session 4 mantine port [Generated with Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Documents the correct branch workflow: - Resume: pull parent, merge into work branch - End: copy tracking files to parent, push both [Generated with Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Session 3 complete: modals (ServerInfo, AddServer, ImportServerJson) - Session 4 planned: port all changes to Mantine branch - Updated TODO.md and claude-progress.md from v2/prototype/shadcn 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Port enhanced pages from v2/prototype/shadcn to Mantine: - Logs: 2-panel layout with filters, level checkboxes, auto-scroll - Tasks: Card-based active/completed sections with progress bars - History: Expand/collapse, pin/unpin, search/filter, pinned section - Tools: 3-column layout, annotation badges, progress tracking - Resources: Templates with inputs, subscriptions, priority badges New components: - ListChangedIndicator: Pulsing dot + refresh button - global.css: Pulse animation keyframes Dependencies: - Added @tabler/icons-react for Mantine icon support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- ServerInfoModal: Server info display with capabilities and OAuth - AddServerModal: Create/edit server form with transport selection - ImportServerJsonModal: JSON import with validation and env binding Both prototype branches now feature-complete for comparison. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Updated TODO.md with completed testing items - Updated claude-progress.md with spec alignment audit and visual comparison 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Updated TODO.md with completed testing items - Updated claude-progress.md with spec alignment audit and visual comparison 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Added current session notes for Sampling, Elicitation, Roots modals - Documented known bug: dropdown menu transparent background - Added next step: port modals to Mantine branch for feature parity 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Added current session notes for Sampling, Elicitation, Roots modals - Documented known bug: dropdown menu transparent background - Added next step: port modals to Mantine branch for feature parity 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add Sampling, Elicitation, and Roots configuration modals ported from shadcn branch to achieve feature parity. Integrate modals into ServerCard with "Test Client Features" dropdown menu. Files added: - SamplingModal.tsx - sampling/createMessage request handling - ElicitationModal.tsx - form and URL modes for elicitation/create - RootsConfigurationModal.tsx - filesystem roots management Files modified: - ServerCard.tsx - Added dropdown menu and modal integration Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Mark Mantine client feature modal port as completed in TODO.md - Update claude-progress.md with current session details Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Mark Mantine client feature modal port as completed in TODO.md - Update claude-progress.md with current session details Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- "Add manually" opens AddServerModal - "Import config" shows placeholder notification (coming soon) - "Import server.json" opens ImportServerJsonModal The Menu.Item components were missing onClick handlers, causing clicks to do nothing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Clicking on a connected server's name now navigates to /tools. The cursor changes to pointer for connected servers to indicate it's clickable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- ServerCard now passes server object when navigating to /tools - AppLayout reads server from location.state instead of hardcoded mock - Remove fake progress bar from Tools page for cleaner prototype UX 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Create structured breakdown of remaining UI/UX work: - Phase 1: Home Screen Experience (5 issues) - Priority - Phase 2: OAuth Experience (2 issues) - Phase 3: History Screen Polish (4 issues) - Phase 4: Feature Screen Polish (3 issues) - Phase 5: Logging and Tasks Polish (2 issues) - Phase 6: Error Handling UX (2 issues) - Phase 7: Experimental Features (1 issue) Also updates TODO.md to reference ISSUES.md and adds session notes to claude-progress.md. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Brings in PR modelcontextprotocol#945 feedback revisions: - Server Settings Modal spec - OAuth Debugger spec - Resources accordion pattern - 8 RFC 5424 log levels - Hono selected over Express - Advanced JSON-RPC tester spec
…pector into v2/feature/prototype
Per-server configuration modal with: - Connection Mode selector (Direct/Via Proxy) - Custom Headers key-value editor - Request Metadata key-value editor - Timeouts (Connection/Request in ms) - OAuth Settings (Client ID, Secret, Scopes) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
OAuth flow visualization with: - Step-by-step flow cards (Authorization Request, Code, Token Exchange, Access Token) - Status badges (pending/completed/active/error) - Collapsible step details - JWT decode display (header and payload) - Copy buttons for tokens and URLs - Action buttons: Test Refresh, Revoke Token, Start New Flow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Experimental capabilities and JSON-RPC testing panel with: - Accordion-based collapsible sections - Experimental Capabilities toggles (batch requests, binary content, streaming, metadata) - Warning alert for experimental features - JSON-RPC Tester with method input, params textarea - Response display with copy button - Mock response simulation for UI testing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…verCard (UI-2,3,5,7) - UI-2: Clone button with "(Copy)" suffix - UI-3: Enhanced error state with Alert component, troubleshooting link, collapsible details - UI-5: Settings button opens ServerSettingsModal - UI-7: OAuth Debug button (conditional) opens OAuthDebuggerModal - Added Connection Mode dropdown (Direct/Via Proxy) - Exported ConnectionMode type 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- UI-8: Show SSE ID in history entry metadata - UI-9: Use Mantine Collapse for smooth expand/collapse - UI-10: Show Progress Token in history entry metadata - UI-11: Add Export JSON button and Load More pagination 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add collapsible AccordionSection component with expand/collapse - Show count in parentheses "(n)" for each section - Resources expanded by default, Templates/Subscriptions collapsed - Search filter applies across all sections simultaneously - Empty sections show "(0)" and stay collapsed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add placeholder text for future completion/complete integration - Matches Shadcn prototype implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add placeholder text below each argument input - Indicates future completion/complete integration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add Export dropdown menu with JSON and Text options - Add handleExportJson for JSON format export - Add handleExportText for plain text format export - Add handleCopyAll for copying all logs to clipboard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…I-16) - Add state for completed tasks and clear confirmation modal - Add confirmation Modal before clearing task history - Show Clear History button only when there are completed tasks - Add IconTrash icon to Clear History button 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Create lib/toast.tsx with Mantine notification helpers - Add showErrorToast with MCP documentation links (UI-18) - Add showSuccessToast, showInfoToast, showWarningToast helpers - Map error types to MCP documentation URLs - Update ServerList.tsx to use new toast utilities 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add ThemeToggle component using useMantineColorScheme hook - Change defaultColorScheme to "auto" for system preference detection - Add flash prevention script to index.html - Add toggle to header in AppLayout - Fix active nav styling to be theme-aware 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…onBadges - Create centralized /mocks/ directory with 10 mock data files - Extract AnnotationBadges component for reuse in Tools and Resources pages - Update all pages/components to import from centralized mocks - Add path alias configuration (@/) to tsconfig.json and vite.config.ts Files updated: - New: client/src/mocks/* (servers, tools, resources, logs, prompts, history, tasks, auth, capabilities, index) - New: client/src/components/AnnotationBadges.tsx - Updated: All pages (ServerList, Tools, Resources, Logs, Prompts, History, Tasks) - Updated: Modal components (OAuth, Sampling, Elicitation, Roots, ExperimentalFeatures) - Updated: tsconfig.json, vite.config.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Previously only showed 4 levels (debug, info, warning, error). Now shows all 8 per v2_ux.md spec: debug, info, notice, warning, error, critical, alert, emergency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
olaservo
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Not for merging. Just a prototype example of what the UI code might look like if using mantine, with a lot of stubbed functionality.
TODO: still adding latest screenshots