Changes the default ports used by the MCP Inspector client UI and the MCP Proxy server to avoid conflicts with common development ports and provide a memorable mnemonic based on T9 mapping.
* In App.tsx
- move the conditional that returns suspense if the path is oauth/callback to the end of the component after all hooks, rendering either suspense or the normal component.
- move handleApproveSampling and handleRejectSampling functions down below all the hooks for clarity. There are a lot of hooks so finding the end of them is a scroll, and these function constants aren't referenced until the rendering section below anyway.
* This fixes#188
* In App.tsx
- import LoggingLevel from sdk
- add [logLevel, setLogLevel] useState with value of type LoggingLevel initialized to "debug"
- add useEffect that stores the new logLevel in localStorage as "logLevel"
- added sendLogLevelRequest function that takes a level argument of type LoggingLevel and sends the appropriate request. It calls setLogLevel when done, to update the local UI
- pass logLevel and sendLogLevelRequest to Sidebar component as props
* In Sidebar.tsx
- Import LoggingLevel and LoggingLevelSchema from sdk
- add props and prop types for logLevel and sendLogLevelRequest and loggingSupported
- add Select component populated with the enum values of LoggingLevelSchema, shown only if loggingSupported is true and connectionStatus is "connected"
*
If the server does not support resource subscriptions, do not show any subscription buttons.
* In App.tsx
- useState for resourceSubscriptions, setResourceSubscriptions a Set of type string.
- in subscribeToResource()
- only make the request to subscribe if the uri is not in the resourceSubscriptions set
- in unsubscribeFromResource()
- only make the request to unsubscribe if the uri is in the resourceSubscriptions set
- in ResourceTab element,
- pass a boolean resourceSubscriptionsSupported as serverCapabilities.resources.subscribe
- pass resourceSubscriptions as a prop
* In ResourcesTab.tsx
- deconstruct resourceSubscriptions and resourceSubscriptionsSupported from props and add prop type
- in selected resource panel
- don't show subscribe or unsubscribe buttons unless resourceSubscriptionsSupported is true
- only show subscribe button if selected resource uri is not in resourceSubscriptions set
- only show unsubscribe button if selected resource uri is in resourceSubscriptions set
- wrap buttons in a flex div that is
- justified right
- has a minimal gap between
- 2/5 wide (just big enough to contain two buttons and leave the h3 text 3/5 of the row to render and not overflow.
* In App.tsx
- added subscribeToResource()
- takes a uri
- sends a `resources/subscribe` message with the uri
- added unsubscribeFromResource()
- takes a uri
- sends a `resources/unsubscribe` message with the uri
- in ResourcesTab element,
- pass subscribeToResource and subscribeToResource invokers to component
* In notificationTypes.ts
- add ServerNotificationSchema to NotificationSchema to permit server update messages.
* In ResourcesTab.tsx
- deconstruct subscribeToResource and unsubscribeFromResource and add prop types
- Add Subscribe and Unsubscribe buttons to selected resource panel, left of the refresh button. They call the sub and unsub functions that came in on props, passing the selected resource URI.
- [WIP]: Will show the appropriate button in a follow up commit.
* In useConnection.ts
- import ResourceUpdatedNotificationSchema
- in the connect function,
- set onNotification as the handler for ResourceUpdatedNotificationSchema
- Move completion logic from App.tsx to useConnection hook
- Replace useCompletion with simpler useCompletionState hook
- Add graceful fallback for servers without completion support
- Improve error handling and state management
- Update PromptsTab and ResourcesTab to use new completion API
- Add type safety improvements across completion interfaces
- create useCompletion hook to fetch completions with debouncing and abort control
- Updated `PromptsTab.tsx` and `ResourcesTab.tsx` to utilize the `Combobox` component and `useCompletions` hook, enabling argument autocompletion for prompts and resource URIs as per the MCP specification.
- Added a combobox to show completions
- Create useDraggablePane hook for history pane drag behavior
- Create useConnection hook for MCP client connection and requests
- Update App.tsx to use both hooks
- Add failed requests to history with error messages for better debugging
- Persist selected tab in URL hash and restore on page load
- Fix formatting of timeout parameter parsing
🤖 Generated with Claude CLI.
Co-Authored-By: Claude <noreply@anthropic.com>
- Add CapabilityContext to manage server capabilities
- Disable tabs when server doesn't support feature
- Show error message in tab content when capability missing
- Implements #85
