[V2] Example for shadcdn + tailwind #978
Closed
+11,338
−0
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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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 <noreply@anthropic.com>
Clean handoff for prototype work on new branch. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
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 - Shadcn UI components (Button, Card, Badge, Switch, Input, Select) - Tailwind CSS dark theme Based on v2_ux.md specification from PR modelcontextprotocol#945. Mirror of Mantine prototype for comparison. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Removes unused ChevronUp from select.tsx, CardHeader/CardTitle from Resources.tsx, and cn from Tools.tsx to pass TypeScript strict checking. Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
- Install @radix-ui/react-dialog, @radix-ui/react-checkbox, @radix-ui/react-progress - Create Shadcn-style Dialog component with overlay and close button - Create Shadcn-style Checkbox component - Create Shadcn-style Progress component - Create reusable ListChangedIndicator for list_changed notifications Part of v2_ux.md spec alignment (Session 1 - Foundation) [Generated with Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Logs screen: - 2-panel layout (25% controls, 75% log stream) - Log level dropdown with Set Level button - Text filter input - Level checkboxes for filtering - Auto-scroll toggle - Clear and Export buttons Tasks screen: - Card-based layout replacing table - Active Tasks section with progress bars - Completed Tasks section with Clear History - Task cards show ID, method, progress, elapsed time - View Details, Cancel, and Dismiss actions Part of v2_ux.md spec alignment (Session 1 - Layout Fixes) [Generated with Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- claude-progress.md: Document Session 1 completion - TODO.md: Add spec alignment session tracking [Generated with Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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 <noreply@anthropic.com>
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 <noreply@anthropic.com>
- Add ListChangedIndicator component to tools list panel - Display tool annotations as badges (audience, read-only, destructive, long-run) - Show annotation details and hints in parameters panel - Add progress bar with percentage and status message during execution - Add Cancel button that appears during tool execution - Update mock data with diverse annotation examples 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add ListChangedIndicator component to resources list panel - Display resource annotations as badges (audience, priority levels) - Show annotation details in content preview panel - Add inline template variable inputs with Go button for resolution - Add subscriptions panel showing active subscriptions with unsub button - Track subscription state with last updated timestamps - Update mock data with diverse annotation examples 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Convert from table layout to card-based entries - Add pin/unpin functionality with starred indicator - Add expandable/collapsible response details section - Add Pinned Requests section at bottom for quick access - Support search filter across method, target, and params - Support method filter dropdown - Show entry count and filter stats - Add Clear All functionality - Update mock data with params, response, and labels 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Mark Session 2 feature enhancements as complete - Update next steps to Session 3 (Modals) - Update TODO.md with completed items 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add UI components: DropdownMenu, Textarea, RadioGroup, Label - ServerInfoModal: two-column capabilities, instructions, OAuth details - AddServerModal: form for manual config with edit mode support - ImportServerJsonModal: JSON validation, package/remote selection, env vars - Wire modals to ServerList dropdown and ServerCard action buttons - Install @radix-ui/react-dropdown-menu, radio-group, label 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Mark Session 3 modals as complete - Session 4 will port all spec alignment changes to Mantine branch - After port: compare both prototypes for final decision 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
New per-server configuration modal with: - Connection Mode selector (Direct vs Via Proxy) - Custom Headers key-value editor with add/remove - Request Metadata key-value editor for _meta fields - Timeouts configuration (Connection, Request in ms) - OAuth Settings (Client ID, masked Client Secret, Scopes) - Form validation and save/cancel actions Closes #6
- Add Settings button with icon after Server Info - Wire up to open ServerSettingsModal - Pass server name and save handler to modal Closes #7
Step-by-step OAuth flow visualization with: - 4 collapsible flow steps (Authorization, Code, Exchange, Token) - Status badges for each step (pending/completed/active/error) - Authorization URL display with copy and open actions - Authorization code and state verification display - Token exchange request visualization - Access token details with expiration countdown - Refresh token section with 'Test Refresh Now' button - Decoded JWT display (header and payload) - Actions: Revoke Token, Start New Flow - Mock data for UI prototyping Closes #8
- Add oauth property to server interface - Conditionally show OAuth Debug button for OAuth-enabled servers - Wire button to open OAuthDebuggerModal - Button placed after Settings, before Test Client Features Closes #9
- Add smooth CSS transition for expand/collapse - Use max-height and opacity for smooth animation - Panels now fully collapse to minimal height - 200ms ease-in-out transition for natural feel Closes #11
- Add Export JSON button to download filtered history entries - Add Load More pagination with configurable page size (10) - Show remaining count on Load More button - Update footer stats to show visible/filtered/total counts - Export includes all metadata (sseId, progressToken, etc.) Closes #13
- Add suggestions hint below input field - Placeholder for future completion/complete API integration - Shows 'Type to see completions' message Closes #14
- Search now filters across all sections simultaneously - Empty sections auto-collapse (0 items) - Filter applies to templates (name + description) and subscriptions - Accordion counts update to show filtered results Closes #15
…ete, Mantine deferred)
Add inline dropdown on ServerCard to quickly switch between Direct and Via Proxy connection modes without opening the Settings modal. - STDIO servers default to "Via Proxy" (required) - HTTP/SSE servers default to "Direct" (CORS-permitting) - Shows warning for STDIO + Direct combination - Export ConnectionMode type for parent component use Addresses Cliff's feedback about making connection type more accessible. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…pector into v2/feature/prototype
- Add ThemeContext for theme state management - Add ThemeToggle dropdown component - Add flash prevention script to index.html - Wrap app with ThemeProvider in main.tsx - Update sonner.tsx to use dynamic theme - Add toggle to header in AppLayout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…nBadges Quality improvements per V2 guiding principles: - Add 'active' badge variant for blue status indicators - Refactor OAuthDebuggerModal to use proper badge variants - Extract AnnotationBadges component from Tools/Resources - Consolidate 16 scattered mock data definitions into /mocks/ directory - Export types from centralized location Net reduction: ~500 lines of duplicated/scattered code 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add responsive navigation with mobile hamburger menu - Extract CONTENT_HEIGHT constant for consistent page heights - Normalize pre/code block max-heights to Tailwind classes - Fix accordion section padding and border color - Add overflow handling to Tools parameters panel - Standardize border-radius to rounded-md throughout - Replace hardcoded colors with theme variables (text-destructive) - Make History search input responsive (flex-1 max-w-xs) - Add lg:grid-cols-3 breakpoint to ServerList grid - Normalize template input heights to h-8 - Extract EmptyState component for consistent empty states 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Revert ServerList grid from lg:grid-cols-3 back to md:grid-cols-2 (3-column grid made cards too cramped) - Add flex-wrap to ServerCard action button rows to prevent overflow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ThemeToggle component to ServerList page header - Convert server name button to functional dropdown in AppLayout - Dropdown shows connected servers with checkmark on current - Added "Manage Servers..." option to return to server list 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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 shadcdn + tailwind, with a lot of stubbed functionality.
TODO: still adding latest screenshots