New element components:
- ListToggle: expand/collapse button using react-icons (RiExpandVerticalLine/RiCollapseVerticalLine)
- LogLevelBadge: extracted from LogEntry, handles all 8 log levels with filled variant and dark/light text contrast
New group components:
- ViewHeader: shared header bar for ConnectedView and UnconnectedView with discriminated union on `connected` prop; MCP logo links to modelcontextprotocol.io
- ServerListControls: combines ListToggle and AddServerMenu, hides toggle when no servers
- LogStreamPanel: extracted from LoggingScreen with scroll containment, filtering by visible levels and search text
- HistoryControls: vertical sidebar with search, method filter, export, and clear
- HistoryListPanel: extracted from HistoryScreen with ListToggle compact mode, filtering by method and search text
Badge contrast improvements:
- AnnotationBadge: filled variant for both dark/light modes; black text in dark, white text in light
- LogLevelBadge: same contrast approach; bold weight for alert/emergency levels
- Badge theme default weight reduced from 700 to 600
Typography:
- Added Fredoka (300-700) as body and heading font
- Added Roboto Mono as monospace font
- Google Fonts loaded in index.html and Storybook previewHead
- Heading weight set to 600
Screen layout refactors:
- LoggingScreen: owns filterText and visibleLevels state; passes to LogControls and LogStreamPanel; removed controls prop in favor of flat props
- HistoryScreen: owns searchText and methodFilter state; passes to HistoryControls and HistoryListPanel for filtering
- Both screens use new ScreenLayout (Flex variant="screen") and Sidebar subcomponents
- Added Flex theme with "screen" variant (overflow: hidden)
- Added Paper theme "panel" variant (flex column, overflow hidden)
Component enhancements:
- ServerCard: added compact prop showing only header row
- HistoryEntry: renamed isExpanded to isListExpanded; internal useState syncs via useEffect; individual entries toggle independently
- LogControls: Select All / Deselect All toggle for level checkboxes; nowrap on level selector group
- ConnectionToggle: LoadingOverlay with rounded corners for connecting state
- ConnectedView: ThemeToggle ActionIcon matched to DisconnectButton height (36px) and border color (outline variant)
- Storybook preview: fullscreen layout wrapper with 100vh overflow hidden
New stories:
- UnconnectedView: Connecting and ManyServers (12 servers for scroll testing)
- ServerCard: CompactConnected and CompactDisconnected
- All new components have corresponding stories
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Defines all presentational components to be built in Storybook with Mantine,
organized bottom-up (atoms, molecules, organisms, layouts) with props interfaces,
Mantine implementation notes, story variations, build order, and configuration.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Broke v2_tech_stack.md into v2_web_client.md, v2_server.md, and v2_storage.md
* Added v2 components with information on the presenttional components pattern.
Replace toolResponseHistory array with single lastToolResult field.
History is the source of truth for execution records - no need to
duplicate in UI state.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Jotai uses provider-less mode by default since v2. Provider is only
needed for SSR, subtree isolation, or custom initial values.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove ConnectionService/ExecutionService from core interfaces
(connection/execution state managed by React Context per spec text)
- Remove Memory implementations from core package
(repository interfaces kept as proxy API contracts)
- Change "Handler interfaces" to "Handler functions"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Closes#983
Proposes a hybrid state management architecture:
- Zustand for UI preferences, logs display, playground state, testing profiles
- Keep useReducer + Context for connection/execution state machines
- Repository interfaces remain storage-agnostic for proxy API integration
Includes detailed analysis of storage options (Zustand, Redux, Jotai,
Context+useReducer, TanStack Query, Valtio) with pros/cons comparison.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Based on evaluation of both prototype implementations (v2/prototype/shadcn
and v2/prototype/mantine), recommend Shadcn for the following reasons:
- Component ownership: Components copied to codebase, not npm dependency
- Tailwind CSS integration: Utility-first approach with purged bundles
- Radix UI foundation: WCAG 2.1 compliant accessibility primitives
- Simpler theming: CSS variables vs React context re-renders
- Better DX: Source code visible and editable in project
Includes comparison table and tradeoffs acknowledged.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update UX spec to show inline Connection Mode dropdown on ServerCard
for quick switching between Direct and Via Proxy modes.
Based on Cliff's feedback about making connection type more accessible
rather than buried in Settings modal.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Address cliffhall's feedback about tool-specific metadata:
- Add [Edit Metadata] button for per-tool _meta fields
- Stored per-server, per-tool (not in global localStorage)
- Merged with server-level metadata on each call
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add [Settings], [Clone] buttons to card
- Add separate OAuth example showing [OAuth Debug] button
- Widen card to fit all buttons
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Address reviewer feedback from cliffhall, pcarleton, KKonstantinov, mattzcarey:
v2_ux.md changes:
- Add Server Settings Modal for per-server config (headers, metadata, timeouts, OAuth)
- Add Clone button to Server Card Actions
- Add OAuth Debugger section for debugging auth flows
- Change Resources Screen from resizable panes to accordion pattern
- Update Logging Screen to all 8 RFC 5424 levels with distinct colors
- Clarify Browse button as local file picker
- Expand JSON-RPC Tester to support all methods with custom headers
- Add multi-select support for anyOf/oneOf enums in Form Generation
v2_tech_stack.md changes:
- Select Hono over Express based on community consensus
- Add Hono Rationale section with comparison table
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <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>
