Connect Modal Refactor #804
Conversation
dosubot
bot
added
the
size:XL
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| </div> | ||
| </button> | ||
|
|
||
| {showConfiguration && ( |
There was a problem hiding this comment.
Bug: Independent toggles for sections not shared state
Both the "Additional Configuration" section (line 859) and the "Server Info" section (line 905) use the same state variable showConfiguration to control their expand/collapse behavior. This causes both sections to expand/collapse together when either button is clicked, instead of being independently controllable. The "Server Info" section should use a separate state variable like showServerInfo.
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR adds new AddServerModal and EditServerModal components, a useServerForm hook, and shared UI components (AuthenticationSection, CustomHeadersSection, EnvVarsSection). It expands HTTP server configuration with OAuth and Bearer workflows, custom headers, request timeout, and a Server Info panel. It introduces InitializationInfo types, a SET_INITIALIZATION_INFO action and reducer handling, a GET /api/mcp/servers/init-info/:serverId endpoint, MCPClientManager.getInitializationInfo, and client-side getInitializationInfo usage to fetch/store initialization info after connection events. Server modal usages were switched to the new add/edit modals. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
client/src/components/connection/ServerModal.tsx(11 hunks)client/src/hooks/use-app-state.ts(9 hunks)client/src/state/app-reducer.ts(1 hunks)client/src/state/app-types.ts(2 hunks)client/src/state/mcp-api.ts(1 hunks)sdk/src/mcp-client-manager/index.ts(1 hunks)server/routes/mcp/servers.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Prefer interfaces for defining object shapes
Constrain generics with appropriate type bounds
Use type guards to narrow unknown or union types before usage
Enforce import ordering consistently
**/*.{ts,tsx}: Prefer named exports in TypeScript modules
Use 2-space indentation
Declare types and interfaces using PascalCase
Files:
client/src/state/mcp-api.tsclient/src/state/app-reducer.tsserver/routes/mcp/servers.tsclient/src/components/connection/ServerModal.tsxclient/src/state/app-types.tssdk/src/mcp-client-manager/index.tsclient/src/hooks/use-app-state.ts
client/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (client/CLAUDE.md)
Implement strict TypeScript types: strict prop types, event types, state interfaces, and utility types
In client code, use the @/ alias for imports
Files:
client/src/state/mcp-api.tsclient/src/state/app-reducer.tsclient/src/components/connection/ServerModal.tsxclient/src/state/app-types.tsclient/src/hooks/use-app-state.ts
server/routes/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
server/routes/**/*.ts: Validate server responses (schema, content, status codes, headers) in route handlers
Perform input validation on incoming requests (types, sanitization, size, format)
Files:
server/routes/mcp/servers.ts
server/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
server/**/*.ts: Implement robust error handling with safe error messages and log sanitization
Set appropriate security headers for backend responses
Apply rate limiting and backoff strategies to protect APIsUse TypeScript for all backend source files
Files:
server/routes/mcp/servers.ts
server/{app.ts,routes/**/*.ts}
📄 CodeRabbit inference engine (server/CLAUDE.md)
Use Hono.js for API routing and middleware in the app setup and all route handlers
Files:
server/routes/mcp/servers.ts
server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts}
📄 CodeRabbit inference engine (server/CLAUDE.md)
Implement MCP protocol using Mastra (@mastra/core, @mastra/mcp) for MCP handling, helpers, and types
Files:
server/routes/mcp/servers.ts
server/routes/mcp/**/*.ts
📄 CodeRabbit inference engine (server/CLAUDE.md)
Place all MCP protocol handlers under server/routes/mcp
Files:
server/routes/mcp/servers.ts
client/src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Follow consistent React component structure in the frontend
Files:
client/src/components/connection/ServerModal.tsx
client/src/{app,components}/**/*.tsx
📄 CodeRabbit inference engine (client/CLAUDE.md)
client/src/{app,components}/**/*.tsx: Use React functional components with React.FC typing for all UI components and pages
Define explicit Props interfaces for components, including proper children prop handling
Type event handlers with React-provided types (e.g., React.MouseEvent, FormEvent)
Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features
Maintain component isolation: avoid excessive prop drilling, use Context wisely, favor composition, and optimize renders
Build responsive layouts using the established Tailwind breakpoint system, grids, flex, and container queries
Ensure accessibility: proper ARIA attributes, keyboard navigation, focus management, and screen reader support
Files:
client/src/components/connection/ServerModal.tsx
client/src/{app,components,hooks}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (client/CLAUDE.md)
Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects
Files:
client/src/components/connection/ServerModal.tsxclient/src/hooks/use-app-state.ts
client/src/components/**/*.tsx
📄 CodeRabbit inference engine (client/CLAUDE.md)
Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips
React components in client/src/components should be functional and saved as PascalCase.tsx files
Files:
client/src/components/connection/ServerModal.tsx
🧠 Learnings (20)
📓 Common learnings
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app/servers,components/servers}/**/*.tsx : Implement server management UI: multiple connections with lists, status indicators, quick actions, and groups
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/utils/mcp-utils.ts : Put MCP helper utilities in server/utils/mcp-utils.ts
Applied to files:
client/src/state/mcp-api.tsserver/routes/mcp/servers.tssdk/src/mcp-client-manager/index.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/types/mcp.ts : Define MCP types in server/types/mcp.ts
Applied to files:
client/src/state/mcp-api.tsserver/routes/mcp/servers.tsclient/src/state/app-types.tssdk/src/mcp-client-manager/index.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts} : Implement MCP protocol using Mastra (mastra/core, mastra/mcp) for MCP handling, helpers, and types
Applied to files:
client/src/state/mcp-api.tsserver/routes/mcp/servers.tsclient/src/state/app-types.tssdk/src/mcp-client-manager/index.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/mcp,stores/{chat,servers}}/**/*.{ts,tsx} : Synchronize MCP state: track connections, requests, responses, and errors consistently
Applied to files:
client/src/state/mcp-api.tssdk/src/mcp-client-manager/index.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/mcp/**/*.ts : Place all MCP protocol handlers under server/routes/mcp
Applied to files:
server/routes/mcp/servers.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/mcp/resources/**/*.ts : Implement resource handlers and validation under server/routes/mcp/resources
Applied to files:
server/routes/mcp/servers.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/mcp/tools/**/*.ts : Implement tool validation logic under server/routes/mcp/tools
Applied to files:
server/routes/mcp/servers.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/llm/openai/**/*.ts : Keep OpenAI integration (client setup, model management, streaming, errors) under server/routes/llm/openai
Applied to files:
server/routes/mcp/servers.ts
📚 Learning: 2025-10-19T23:05:54.474Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-10-19T23:05:54.474Z
Learning: Applies to server/routes/**/*.ts : Validate server responses (schema, content, status codes, headers) in route handlers
Applied to files:
server/routes/mcp/servers.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling
Applied to files:
client/src/components/connection/ServerModal.tsxclient/src/state/app-types.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app/servers,components/servers}/**/*.tsx : Implement server management UI: multiple connections with lists, status indicators, quick actions, and groups
Applied to files:
client/src/components/connection/ServerModal.tsxclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/{mcp,transport}}/**/*.{ts,tsx} : Provide transport selection UIs and logic: protocol options, configuration forms, validation rules, and presets
Applied to files:
client/src/components/connection/ServerModal.tsxclient/src/state/app-types.tssdk/src/mcp-client-manager/index.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{lib/api,hooks/llm}/**/*.{ts,tsx} : Implement Anthropic Claude integration: authentication flow, request formatting, stream processing, and rate limiting
Applied to files:
client/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/components/**/*.tsx : Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips
Applied to files:
client/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/**/*.{ts,tsx} : Implement strict TypeScript types: strict prop types, event types, state interfaces, and utility types
Applied to files:
client/src/state/app-types.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components,hooks}/**/*.{ts,tsx} : Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects
Applied to files:
client/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/llm,stores/chat}/**/*.{ts,tsx} : Manage AI model state: model selection, generation parameters, stream management, and history persistence
Applied to files:
client/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/llm,stores/chat}/**/*.{ts,tsx} : Manage chat context: track window size/tokens, prune context, and persist state
Applied to files:
client/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{stores/servers,lib}/**/*.{ts,tsx} : Persist configuration: local storage, export/import, sync, and backup/restore options
Applied to files:
client/src/hooks/use-app-state.ts
🧬 Code graph analysis (4)
client/src/state/mcp-api.ts (1)
sdk/src/mcp-client-manager/index.ts (1)
getInitializationInfo(218-252)
client/src/components/connection/ServerModal.tsx (1)
client/src/logs/PosthogUtils.ts (2)
detectPlatform(27-54)detectEnvironment(56-58)
client/src/state/app-types.ts (3)
client/src/hooks/use-app-state.ts (1)
ServerWithName(26-26)sdk/src/mcp-client-manager/index.ts (1)
MCPServerConfig(79-79)shared/types.ts (1)
OauthTokens(432-439)
client/src/hooks/use-app-state.ts (2)
client/src/state/mcp-api.ts (1)
getInitializationInfo(39-42)sdk/src/mcp-client-manager/index.ts (1)
getInitializationInfo(218-252)
🪛 GitHub Actions: Prettier and Build Check
client/src/state/mcp-api.ts
[warning] 1-1: Code style issues found by Prettier. Run 'npm run prettier-fix' to fix.
client/src/components/connection/ServerModal.tsx
[warning] 1-1: Code style issues found by Prettier. Run 'npm run prettier-fix' to fix.
client/src/state/app-types.ts
[warning] 1-1: Code style issues found by Prettier. Run 'npm run prettier-fix' to fix.
sdk/src/mcp-client-manager/index.ts
[warning] 1-1: Code style issues found by Prettier. Run 'npm run prettier-fix' to fix.
client/src/hooks/use-app-state.ts
[warning] 1-1: Code style issues found by Prettier. Run 'npm run prettier-fix' to fix.
🔍 Remote MCP
Let me search the web for more specific information about the MCP protocol specification and initialization info patterns:Perfect! I now have comprehensive context about MCP. Let me compile the findings into a focused summary for the PR review.
Additional Context for PR #804 Review
MCP Protocol Context
During MCP initialization, the client sends a protocol version to the server, and the server responds with its supported capabilities. The initialization phase includes capability negotiation and protocol version agreement between client and server.
Key Protocol Elements:
- When an MCP client first connects to a server, there is an initial handshake where the server advertises what it can do by sending back its protocol version and a list of supported capabilities through capability negotiation.
- Client and server capabilities establish which optional protocol features will be available during the session.
Relevance to This PR
Initialization Info Pattern:
The PR introduces a new InitializationInfo interface capturing server metadata (protocolVersion, transport, serverCapabilities, serverVersion, instructions, clientCapabilities). This aligns with MCP's standard initialization handshake pattern where the initialization phase must be the first interaction between client and server, and the server must respond with its own capabilities and information.
Transport Considerations:
The implementation properly distinguishes between transport types. MCP servers maintain a stateful connection with the client over the session whether the transport is a local pipe (STDIO), an HTTP stream, or a WebSocket, and the transport layer might vary with STDIO for local tools or Server-Sent Events/HTTP for remote servers.
Authentication Updates:
The PR adds OAuth authentication UI, which is timely: The protocol now mandates the OAuth 2.1 framework for authenticating remote HTTP servers.
Review Considerations
- Protocol Alignment: The new
InitializationInfofields align with MCP protocol initialization patterns for capability negotiation - Transport Handling: The implementation correctly differentiates between stdio vs HTTP/SSE transports as noted in the AI summary
- Authentication: OAuth 2.1 implementation follows current MCP specification requirements
- Backwards Compatibility: All public APIs remain unchanged per the AI summary, maintaining compatibility
[::web_search::][::Context7_resolve-library-id::]
🔇 Additional comments (1)
client/src/state/mcp-api.ts (1)
39-41: Prettier check is failingCI flagged a Prettier violation on this file. Please run
npm run prettier-fix(or your standard formatter) to tidy the new helper and get the pipeline green again.
| {/* Configuration Section */} | ||
| <div className="border border-border rounded-lg overflow-hidden"> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowConfiguration(!showConfiguration)} | ||
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | ||
| > | ||
| <div className="flex items-center gap-2"> | ||
| {showConfiguration ? ( | ||
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | ||
| ) : ( | ||
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | ||
| )} | ||
| <span className="text-sm font-medium text-foreground"> | ||
| Additional Configuration | ||
| </span> | ||
| </div> | ||
| </button> | ||
|
|
||
| {showConfiguration && ( | ||
| <div className="p-4 space-y-4 border-t border-border bg-muted/30"> | ||
| {/* Request Timeout */} | ||
| <div className="space-y-2"> | ||
| <label className="block text-sm font-medium text-foreground"> | ||
| Request Timeout | ||
| </label> | ||
| <Input | ||
| type="number" | ||
| value={requestTimeout} | ||
| onChange={(e) => setRequestTimeout(e.target.value)} | ||
| placeholder="10000" | ||
| className="h-10" | ||
| min="1000" | ||
| max="600000" | ||
| step="1000" | ||
| /> | ||
| <p className="text-xs text-muted-foreground"> | ||
| Timeout in ms (default: 10000ms, min: 1000ms, max: | ||
| 600000ms) | ||
| </p> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| {/* Server Info section (only in edit mode) */} | ||
| {mode === "edit" && server && server.initializationInfo && ( | ||
| <div className="border border-border rounded-lg overflow-hidden"> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowConfiguration(!showConfiguration)} | ||
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | ||
| > | ||
| <div className="flex items-center gap-2"> | ||
| {showConfiguration ? ( | ||
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | ||
| ) : ( | ||
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | ||
| )} | ||
| <span className="text-sm font-medium text-foreground"> | ||
| Server Info | ||
| </span> | ||
| </div> | ||
| </button> | ||
|
|
||
| {showConfiguration && ( | ||
| <div className="p-4 space-y-4 border-t border-border bg-muted/30"> | ||
| {/* Connection Details */} | ||
| <div className="space-y-3"> | ||
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | ||
| Connection Details | ||
| </h4> | ||
| {server.initializationInfo.protocolVersion && ( | ||
| <div className="flex items-center justify-between"> | ||
| <span className="text-sm text-muted-foreground">Protocol Version</span> | ||
| <Badge variant="secondary" className="font-mono text-xs"> | ||
| {server.initializationInfo.protocolVersion} | ||
| </Badge> | ||
| </div> | ||
| )} | ||
| {server.initializationInfo.transport && ( | ||
| <div className="flex items-center justify-between"> | ||
| <span className="text-sm text-muted-foreground">Transport</span> | ||
| <Badge variant="secondary" className="font-mono uppercase text-xs"> | ||
| {server.initializationInfo.transport} | ||
| </Badge> | ||
| </div> | ||
| )} | ||
| {server.initializationInfo.serverVersion && ( | ||
| <> | ||
| <div className="flex items-center justify-between"> | ||
| <span className="text-sm text-muted-foreground">Server Name</span> | ||
| <span className="text-sm font-mono"> | ||
| {server.initializationInfo.serverVersion.name} | ||
| </span> | ||
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <span className="text-sm text-muted-foreground">Server Version</span> | ||
| <Badge variant="outline" className="font-mono text-xs"> | ||
| {server.initializationInfo.serverVersion.version} | ||
| </Badge> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
|
|
||
| {/* Server Instructions */} | ||
| {server.initializationInfo.instructions && ( | ||
| <div className="space-y-3 pt-2 border-t border-border/50"> | ||
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | ||
| Server Instructions | ||
| </h4> | ||
| <p className="text-sm text-muted-foreground leading-relaxed"> | ||
| {server.initializationInfo.instructions} | ||
| </p> | ||
| </div> | ||
| )} | ||
|
|
||
| {/* Server Capabilities */} | ||
| {server.initializationInfo.serverCapabilities && ( | ||
| <div className="space-y-3 pt-2 border-t border-border/50"> | ||
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | ||
| Server Capabilities | ||
| </h4> | ||
| <JsonView | ||
| src={server.initializationInfo.serverCapabilities} | ||
| theme="atom" | ||
| dark={true} | ||
| enableClipboard={true} | ||
| displaySize={false} | ||
| collapseStringsAfterLength={100} | ||
| style={{ | ||
| fontSize: "11px", | ||
| fontFamily: | ||
| "ui-monospace, SFMono-Regular, 'SF Mono', monospace", | ||
| backgroundColor: "hsl(var(--background))", | ||
| padding: "8px", | ||
| borderRadius: "6px", | ||
| border: "1px solid hsl(var(--border))", | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
|
|
||
| {/* Client Capabilities */} | ||
| {server.initializationInfo.clientCapabilities && ( | ||
| <div className="space-y-3 pt-2 border-t border-border/50"> | ||
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | ||
| Client Capabilities | ||
| </h4> | ||
| <JsonView | ||
| src={server.initializationInfo.clientCapabilities} | ||
| theme="atom" | ||
| dark={true} | ||
| enableClipboard={true} | ||
| displaySize={false} | ||
| collapseStringsAfterLength={100} | ||
| style={{ | ||
| fontSize: "11px", | ||
| fontFamily: | ||
| "ui-monospace, SFMono-Regular, 'SF Mono', monospace", | ||
| backgroundColor: "hsl(var(--background))", | ||
| padding: "8px", | ||
| borderRadius: "6px", | ||
| border: "1px solid hsl(var(--border))", | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Decouple the accordions’ state.
The Additional Configuration panel and the Server Info panel both hinge on showConfiguration. Clicking either button therefore expands or collapses both blocks in tandem, so you can’t view server info without also exposing the other section (and vice versa). Split their state so each accordion can be controlled independently.
- const [showConfiguration, setShowConfiguration] = useState<boolean>(false);
+ const [showAdditionalConfiguration, setShowAdditionalConfiguration] =
+ useState<boolean>(false);
+ const [showServerInfo, setShowServerInfo] = useState<boolean>(false);
@@
- <div className="border border-border rounded-lg overflow-hidden">
+ <div className="border border-border rounded-lg overflow-hidden">
<button
type="button"
- onClick={() => setShowConfiguration(!showConfiguration)}
+ onClick={() =>
+ setShowAdditionalConfiguration(!showAdditionalConfiguration)
+ }
@@
- {showConfiguration && (
+ {showAdditionalConfiguration && (
<div className="p-4 space-y-4 border-t border-border bg-muted/30">
@@
- {mode === "edit" && server && server.initializationInfo && (
+ {mode === "edit" && server && server.initializationInfo && (
<div className="border border-border rounded-lg overflow-hidden">
<button
type="button"
- onClick={() => setShowConfiguration(!showConfiguration)}
+ onClick={() =>
+ setShowServerInfo(!showServerInfo)
+ }
@@
- {showConfiguration && (
+ {showServerInfo && (
<div className="p-4 space-y-4 border-t border-border bg-muted/30">
@@
- setShowConfiguration(false);
+ setShowAdditionalConfiguration(false);
+ setShowServerInfo(false);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* Configuration Section */} | |
| <div className="border border-border rounded-lg overflow-hidden"> | |
| <button | |
| type="button" | |
| onClick={() => setShowConfiguration(!showConfiguration)} | |
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | |
| > | |
| <div className="flex items-center gap-2"> | |
| {showConfiguration ? ( | |
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | |
| )} | |
| <span className="text-sm font-medium text-foreground"> | |
| Additional Configuration | |
| </span> | |
| </div> | |
| </button> | |
| {showConfiguration && ( | |
| <div className="p-4 space-y-4 border-t border-border bg-muted/30"> | |
| {/* Request Timeout */} | |
| <div className="space-y-2"> | |
| <label className="block text-sm font-medium text-foreground"> | |
| Request Timeout | |
| </label> | |
| <Input | |
| type="number" | |
| value={requestTimeout} | |
| onChange={(e) => setRequestTimeout(e.target.value)} | |
| placeholder="10000" | |
| className="h-10" | |
| min="1000" | |
| max="600000" | |
| step="1000" | |
| /> | |
| <p className="text-xs text-muted-foreground"> | |
| Timeout in ms (default: 10000ms, min: 1000ms, max: | |
| 600000ms) | |
| </p> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| {/* Server Info section (only in edit mode) */} | |
| {mode === "edit" && server && server.initializationInfo && ( | |
| <div className="border border-border rounded-lg overflow-hidden"> | |
| <button | |
| type="button" | |
| onClick={() => setShowConfiguration(!showConfiguration)} | |
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | |
| > | |
| <div className="flex items-center gap-2"> | |
| {showConfiguration ? ( | |
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | |
| )} | |
| <span className="text-sm font-medium text-foreground"> | |
| Server Info | |
| </span> | |
| </div> | |
| </button> | |
| {showConfiguration && ( | |
| <div className="p-4 space-y-4 border-t border-border bg-muted/30"> | |
| {/* Connection Details */} | |
| <div className="space-y-3"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Connection Details | |
| </h4> | |
| {server.initializationInfo.protocolVersion && ( | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Protocol Version</span> | |
| <Badge variant="secondary" className="font-mono text-xs"> | |
| {server.initializationInfo.protocolVersion} | |
| </Badge> | |
| </div> | |
| )} | |
| {server.initializationInfo.transport && ( | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Transport</span> | |
| <Badge variant="secondary" className="font-mono uppercase text-xs"> | |
| {server.initializationInfo.transport} | |
| </Badge> | |
| </div> | |
| )} | |
| {server.initializationInfo.serverVersion && ( | |
| <> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Server Name</span> | |
| <span className="text-sm font-mono"> | |
| {server.initializationInfo.serverVersion.name} | |
| </span> | |
| </div> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Server Version</span> | |
| <Badge variant="outline" className="font-mono text-xs"> | |
| {server.initializationInfo.serverVersion.version} | |
| </Badge> | |
| </div> | |
| </> | |
| )} | |
| </div> | |
| {/* Server Instructions */} | |
| {server.initializationInfo.instructions && ( | |
| <div className="space-y-3 pt-2 border-t border-border/50"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Server Instructions | |
| </h4> | |
| <p className="text-sm text-muted-foreground leading-relaxed"> | |
| {server.initializationInfo.instructions} | |
| </p> | |
| </div> | |
| )} | |
| {/* Server Capabilities */} | |
| {server.initializationInfo.serverCapabilities && ( | |
| <div className="space-y-3 pt-2 border-t border-border/50"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Server Capabilities | |
| </h4> | |
| <JsonView | |
| src={server.initializationInfo.serverCapabilities} | |
| theme="atom" | |
| dark={true} | |
| enableClipboard={true} | |
| displaySize={false} | |
| collapseStringsAfterLength={100} | |
| style={{ | |
| fontSize: "11px", | |
| fontFamily: | |
| "ui-monospace, SFMono-Regular, 'SF Mono', monospace", | |
| backgroundColor: "hsl(var(--background))", | |
| padding: "8px", | |
| borderRadius: "6px", | |
| border: "1px solid hsl(var(--border))", | |
| }} | |
| /> | |
| </div> | |
| )} | |
| {/* Client Capabilities */} | |
| {server.initializationInfo.clientCapabilities && ( | |
| <div className="space-y-3 pt-2 border-t border-border/50"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Client Capabilities | |
| </h4> | |
| <JsonView | |
| src={server.initializationInfo.clientCapabilities} | |
| theme="atom" | |
| dark={true} | |
| enableClipboard={true} | |
| displaySize={false} | |
| collapseStringsAfterLength={100} | |
| style={{ | |
| fontSize: "11px", | |
| fontFamily: | |
| "ui-monospace, SFMono-Regular, 'SF Mono', monospace", | |
| backgroundColor: "hsl(var(--background))", | |
| padding: "8px", | |
| borderRadius: "6px", | |
| border: "1px solid hsl(var(--border))", | |
| }} | |
| /> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| </div> | |
| {/* Configuration Section */} | |
| <div className="border border-border rounded-lg overflow-hidden"> | |
| <button | |
| type="button" | |
| onClick={() => | |
| setShowAdditionalConfiguration(!showAdditionalConfiguration) | |
| } | |
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | |
| > | |
| <div className="flex items-center gap-2"> | |
| {showAdditionalConfiguration ? ( | |
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | |
| )} | |
| <span className="text-sm font-medium text-foreground"> | |
| Additional Configuration | |
| </span> | |
| </div> | |
| </button> | |
| {showAdditionalConfiguration && ( | |
| <div className="p-4 space-y-4 border-t border-border bg-muted/30"> | |
| {/* Request Timeout */} | |
| <div className="space-y-2"> | |
| <label className="block text-sm font-medium text-foreground"> | |
| Request Timeout | |
| </label> | |
| <Input | |
| type="number" | |
| value={requestTimeout} | |
| onChange={(e) => setRequestTimeout(e.target.value)} | |
| placeholder="10000" | |
| className="h-10" | |
| min="1000" | |
| max="600000" | |
| step="1000" | |
| /> | |
| <p className="text-xs text-muted-foreground"> | |
| Timeout in ms (default: 10000ms, min: 1000ms, max: | |
| 600000ms) | |
| </p> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| {/* Server Info section (only in edit mode) */} | |
| {mode === "edit" && server && server.initializationInfo && ( | |
| <div className="border border-border rounded-lg overflow-hidden"> | |
| <button | |
| type="button" | |
| onClick={() => | |
| setShowServerInfo(!showServerInfo) | |
| } | |
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | |
| > | |
| <div className="flex items-center gap-2"> | |
| {showServerInfo ? ( | |
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | |
| )} | |
| <span className="text-sm font-medium text-foreground"> | |
| Server Info | |
| </span> | |
| </div> | |
| </button> | |
| {showServerInfo && ( | |
| <div className="p-4 space-y-4 border-t border-border bg-muted/30"> | |
| {/* Connection Details */} | |
| <div className="space-y-3"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Connection Details | |
| </h4> | |
| {server.initializationInfo.protocolVersion && ( | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Protocol Version</span> | |
| <Badge variant="secondary" className="font-mono text-xs"> | |
| {server.initializationInfo.protocolVersion} | |
| </Badge> | |
| </div> | |
| )} | |
| {server.initializationInfo.transport && ( | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Transport</span> | |
| <Badge variant="secondary" className="font-mono uppercase text-xs"> | |
| {server.initializationInfo.transport} | |
| </Badge> | |
| </div> | |
| )} | |
| {server.initializationInfo.serverVersion && ( | |
| <> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Server Name</span> | |
| <span className="text-sm font-mono"> | |
| {server.initializationInfo.serverVersion.name} | |
| </span> | |
| </div> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-sm text-muted-foreground">Server Version</span> | |
| <Badge variant="outline" className="font-mono text-xs"> | |
| {server.initializationInfo.serverVersion.version} | |
| </Badge> | |
| </div> | |
| </> | |
| )} | |
| </div> | |
| {/* Server Instructions */} | |
| {server.initializationInfo.instructions && ( | |
| <div className="space-y-3 pt-2 border-t border-border/50"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Server Instructions | |
| </h4> | |
| <p className="text-sm text-muted-foreground leading-relaxed"> | |
| {server.initializationInfo.instructions} | |
| </p> | |
| </div> | |
| )} | |
| {/* Server Capabilities */} | |
| {server.initializationInfo.serverCapabilities && ( | |
| <div className="space-y-3 pt-2 border-t border-border/50"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Server Capabilities | |
| </h4> | |
| <JsonView | |
| src={server.initializationInfo.serverCapabilities} | |
| theme="atom" | |
| dark={true} | |
| enableClipboard={true} | |
| displaySize={false} | |
| collapseStringsAfterLength={100} | |
| style={{ | |
| fontSize: "11px", | |
| fontFamily: | |
| "ui-monospace, SFMono-Regular, 'SF Mono', monospace", | |
| backgroundColor: "hsl(var(--background))", | |
| padding: "8px", | |
| borderRadius: "6px", | |
| border: "1px solid hsl(var(--border))", | |
| }} | |
| /> | |
| </div> | |
| )} | |
| {/* Client Capabilities */} | |
| {server.initializationInfo.clientCapabilities && ( | |
| <div className="space-y-3 pt-2 border-t border-border/50"> | |
| <h4 className="text-xs font-semibold text-foreground uppercase tracking-wide"> | |
| Client Capabilities | |
| </h4> | |
| <JsonView | |
| src={server.initializationInfo.clientCapabilities} | |
| theme="atom" | |
| dark={true} | |
| enableClipboard={true} | |
| displaySize={false} | |
| collapseStringsAfterLength={100} | |
| style={{ | |
| fontSize: "11px", | |
| fontFamily: | |
| "ui-monospace, SFMono-Regular, 'SF Mono', monospace", | |
| backgroundColor: "hsl(var(--background))", | |
| padding: "8px", | |
| borderRadius: "6px", | |
| border: "1px solid hsl(var(--border))", | |
| }} | |
| /> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| </div> |
🤖 Prompt for AI Agents
client/src/components/connection/ServerModal.tsx around lines 855 to 1026: both
the "Additional Configuration" and "Server Info" accordions use the single
boolean showConfiguration, causing them to open/close together; create a
separate state (e.g., showServerInfo) initialized like the existing
showConfiguration, update the "Server Info" button onClick to toggle
showServerInfo, and change the conditional render blocks for the Server Info
panel to check showServerInfo instead of showConfiguration so each accordion is
controlled independently.
| const config = state.config; | ||
| let transportType: string; | ||
| if (this.isStdioConfig(config)) { | ||
| transportType = "stdio"; | ||
| } else { | ||
| // Check if using SSE or Streamable HTTP based on URL or preference | ||
| transportType = config.preferSSE || config.url.pathname.endsWith("/sse") | ||
| ? "sse" | ||
| : "streamable-http"; | ||
| } | ||
|
|
||
| // Try to get protocol version from transport if available | ||
| let protocolVersion: string | undefined; | ||
| if (state.transport) { | ||
| // Access internal protocol version if available | ||
| protocolVersion = (state.transport as any)._protocolVersion; | ||
| } | ||
|
|
||
| return { | ||
| protocolVersion, | ||
| transport: transportType, | ||
| serverCapabilities: client.getServerCapabilities(), | ||
| serverVersion: client.getServerVersion(), | ||
| instructions: client.getInstructions(), | ||
| clientCapabilities: this.buildCapabilities(config), | ||
| }; |
There was a problem hiding this comment.
Report the actual transport instead of config heuristics
When the HTTP transport falls back from streamable HTTP to SSE, this logic still reports "streamable-http" because it inspects only the config flags. Users will then see misleading initialization data even though the client is running over SSE. Please detect the transport from the live transport instance instead.
- // Determine transport type from config
- const config = state.config;
- let transportType: string;
- if (this.isStdioConfig(config)) {
- transportType = "stdio";
- } else {
- // Check if using SSE or Streamable HTTP based on URL or preference
- transportType = config.preferSSE || config.url.pathname.endsWith("/sse")
- ? "sse"
- : "streamable-http";
- }
+ // Determine transport type from the active transport
+ const config = state.config;
+ let transportType: "stdio" | "sse" | "streamable-http";
+ const transport = state.transport;
+ if (transport instanceof StdioClientTransport) {
+ transportType = "stdio";
+ } else if (transport instanceof SSEClientTransport) {
+ transportType = "sse";
+ } else if (transport instanceof StreamableHTTPClientTransport) {
+ transportType = "streamable-http";
+ } else if (this.isStdioConfig(config)) {
+ transportType = "stdio";
+ } else {
+ transportType = "streamable-http";
+ }Committable suggestion skipped: line range outside the PR's diff.
dosubot
bot
added
size:XXL
| retryCount: 0, | ||
| lastError: undefined, | ||
| oauthTokens: action.tokens ?? existing.oauthTokens, | ||
| oauthTokens: action.tokens, |
There was a problem hiding this comment.
Bug: OAuth Tokens Lost During State Preservation
OAuth tokens are lost during server updates when shouldPreserveOAuth is true. The reducer changed from oauthTokens: action.tokens ?? existing.oauthTokens to oauthTokens: action.tokens, but in use-app-state.ts line 604-609, the CONNECT_SUCCESS action is dispatched without a tokens parameter when preserving OAuth. This causes action.tokens to be undefined, clearing the existing OAuth tokens instead of preserving them. The fallback to existing.oauthTokens should be retained to handle cases where tokens are not explicitly provided.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
client/src/components/connection/ServerModal.tsx (1)
1062-1188: Fix the state collision between accordions.Both "Additional Configuration" (line 1020, 1035) and "Server Info" (line 1066, 1081) use the same
showConfigurationstate variable, causing them to expand/collapse together. This issue was flagged in previous reviews but remains unfixed.Apply this diff to use separate state variables:
+ const [showServerInfo, setShowServerInfo] = useState<boolean>(false); ... {mode === "edit" && server && server.initializationInfo && ( <div className="border border-border rounded-lg overflow-hidden"> <button type="button" - onClick={() => setShowConfiguration(!showConfiguration)} + onClick={() => setShowServerInfo(!showServerInfo)} className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" > <div className="flex items-center gap-2"> - {showConfiguration ? ( + {showServerInfo ? ( <ChevronDown className="h-4 w-4 text-muted-foreground" /> ) : ( <ChevronRight className="h-4 w-4 text-muted-foreground" /> )} ... - {showConfiguration && ( + {showServerInfo && ( <div className="p-4 space-y-4 border-t border-border bg-muted/30">Don't forget to reset
showServerInfoin theresetFormfunction.
🧹 Nitpick comments (4)
client/src/components/connection/shared/AuthenticationSection.tsx (1)
29-45: AdoptReact.FCtyping for this section. Please align the declaration with the project pattern by declaringconst AuthenticationSection: React.FC<AuthenticationSectionProps> = (…)(and exporting it), so the component adheres to the shared contract. As per coding guidelinesclient/src/components/connection/shared/CustomHeadersSection.tsx (1)
14-97: Type this component asReact.FC. Please mirror the house style by definingconst CustomHeadersSection: React.FC<CustomHeadersSectionProps> = (…)(then exporting it), keeping component typings consistent across the UI library. As per coding guidelinesclient/src/components/connection/ServerModal.tsx (2)
771-930: Consider using the AuthenticationSection component.The authentication UI in add mode (lines 771-930) and edit mode auth tab (lines 1214-1738) contains duplicated code. The
AuthenticationSectioncomponent is available (used inAddServerModal.tsx) and could replace this inline implementation to reduce duplication and improve maintainability.The shared
AuthenticationSectioncomponent provides the same UI with proper encapsulation. Example integration:{mode === "add" && serverFormData.type === "http" && ( <AuthenticationSection authType={authType} onAuthTypeChange={(value) => { setAuthType(value); setShowAuthSettings(value !== "none"); // ... rest of the logic }} showAuthSettings={showAuthSettings} bearerToken={bearerToken} onBearerTokenChange={setBearerToken} // ... other props /> )}
932-1014: Use the CustomHeadersSection component.The inline custom headers implementation duplicates code that's encapsulated in the
CustomHeadersSectioncomponent (used inAddServerModal.tsxandEditServerModal.tsx). Refactor to use the shared component for consistency.Replace the inline implementation with:
{serverFormData.type === "http" && ( <CustomHeadersSection customHeaders={customHeaders} showCustomHeaders={showCustomHeaders} onToggle={() => setShowCustomHeaders(!showCustomHeaders)} onAdd={addCustomHeader} onRemove={removeCustomHeader} onUpdate={updateCustomHeader} /> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
client/src/components/ActiveServerSelector.tsx(2 hunks)client/src/components/OAuthFlowTab.tsx(2 hunks)client/src/components/ServersTab.tsx(3 hunks)client/src/components/connection/AddServerModal.tsx(1 hunks)client/src/components/connection/EditServerModal.tsx(1 hunks)client/src/components/connection/ServerConnectionCard.tsx(1 hunks)client/src/components/connection/ServerModal.tsx(11 hunks)client/src/components/connection/hooks/use-server-form.ts(1 hunks)client/src/components/connection/shared/AuthenticationSection.tsx(1 hunks)client/src/components/connection/shared/CustomHeadersSection.tsx(1 hunks)client/src/components/connection/shared/EnvVarsSection.tsx(1 hunks)client/src/hooks/use-app-state.ts(10 hunks)client/src/state/app-reducer.ts(2 hunks)client/src/state/server-helpers.ts(1 hunks)shared/types.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Prefer interfaces for defining object shapes
Constrain generics with appropriate type bounds
Use type guards to narrow unknown or union types before usage
Enforce import ordering consistently
**/*.{ts,tsx}: Prefer named exports in TypeScript modules
Use 2-space indentation
Declare types and interfaces using PascalCase
Files:
client/src/components/connection/shared/AuthenticationSection.tsxshared/types.tsclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsxclient/src/state/server-helpers.tsclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsxclient/src/state/app-reducer.ts
client/src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Follow consistent React component structure in the frontend
Files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsxclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsx
client/src/{app,components}/**/*.tsx
📄 CodeRabbit inference engine (client/CLAUDE.md)
client/src/{app,components}/**/*.tsx: Use React functional components with React.FC typing for all UI components and pages
Define explicit Props interfaces for components, including proper children prop handling
Type event handlers with React-provided types (e.g., React.MouseEvent, FormEvent)
Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features
Maintain component isolation: avoid excessive prop drilling, use Context wisely, favor composition, and optimize renders
Build responsive layouts using the established Tailwind breakpoint system, grids, flex, and container queries
Ensure accessibility: proper ARIA attributes, keyboard navigation, focus management, and screen reader support
Files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsxclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsx
client/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (client/CLAUDE.md)
Implement strict TypeScript types: strict prop types, event types, state interfaces, and utility types
In client code, use the @/ alias for imports
Files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsxclient/src/state/server-helpers.tsclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsxclient/src/state/app-reducer.ts
client/src/{app,components,hooks}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (client/CLAUDE.md)
Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects
Files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsxclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsx
client/src/components/**/*.tsx
📄 CodeRabbit inference engine (client/CLAUDE.md)
Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips
React components in client/src/components should be functional and saved as PascalCase.tsx files
Files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsxclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsx
shared/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Place shared types and utilities in the shared/ directory for reuse by client and server
Files:
shared/types.ts
🧠 Learnings (25)
📓 Common learnings
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app/servers,components/servers}/**/*.tsx : Implement server management UI: multiple connections with lists, status indicators, quick actions, and groups
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/{mcp,transport}}/**/*.{ts,tsx} : Provide transport selection UIs and logic: protocol options, configuration forms, validation rules, and presets
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/mcp,stores/{chat,servers}}/**/*.{ts,tsx} : Synchronize MCP state: track connections, requests, responses, and errors consistently
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts} : Implement MCP protocol using Mastra (mastra/core, mastra/mcp) for MCP handling, helpers, and types
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling
Applied to files:
client/src/components/connection/shared/AuthenticationSection.tsxshared/types.tsclient/src/state/server-helpers.tsclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsxclient/src/hooks/use-app-state.tsclient/src/components/OAuthFlowTab.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/{mcp,transport}}/**/*.{ts,tsx} : Provide transport selection UIs and logic: protocol options, configuration forms, validation rules, and presets
Applied to files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/state/server-helpers.tsclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsxclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{lib/api,hooks/llm}/**/*.{ts,tsx} : Implement Anthropic Claude integration: authentication flow, request formatting, stream processing, and rate limiting
Applied to files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components}/**/*.tsx : Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features
Applied to files:
client/src/components/connection/shared/AuthenticationSection.tsxclient/src/components/connection/ServerConnectionCard.tsxclient/src/components/connection/shared/EnvVarsSection.tsx
📚 Learning: 2025-10-19T23:07:40.722Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-19T23:07:40.722Z
Learning: Applies to shared/**/*.{ts,tsx} : Place shared types and utilities in the shared/ directory for reuse by client and server
Applied to files:
shared/types.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/transport/http/**/*.ts : Implement streamable HTTP (chunked encoding, pools, stream/timeout handling) under server/routes/transport/http
Applied to files:
shared/types.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app/servers,components/servers}/**/*.tsx : Implement server management UI: multiple connections with lists, status indicators, quick actions, and groups
Applied to files:
client/src/components/connection/ServerConnectionCard.tsxclient/src/components/ActiveServerSelector.tsxclient/src/components/connection/EditServerModal.tsxclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsxclient/src/components/connection/shared/CustomHeadersSection.tsxclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsxclient/src/components/OAuthFlowTab.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/mcp,stores/{chat,servers}}/**/*.{ts,tsx} : Synchronize MCP state: track connections, requests, responses, and errors consistently
Applied to files:
client/src/components/connection/ServerConnectionCard.tsxclient/src/state/server-helpers.tsclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsx
📚 Learning: 2025-10-19T23:05:54.474Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-10-19T23:05:54.474Z
Learning: Applies to client/src/**/*.tsx : Follow consistent React component structure in the frontend
Applied to files:
client/src/components/connection/shared/EnvVarsSection.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components}/**/*.tsx : Maintain component isolation: avoid excessive prop drilling, use Context wisely, favor composition, and optimize renders
Applied to files:
client/src/components/connection/shared/EnvVarsSection.tsx
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/utils/mcp-utils.ts : Put MCP helper utilities in server/utils/mcp-utils.ts
Applied to files:
client/src/state/server-helpers.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts} : Implement MCP protocol using Mastra (mastra/core, mastra/mcp) for MCP handling, helpers, and types
Applied to files:
client/src/state/server-helpers.tsclient/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/mcp/**/*.ts : Place all MCP protocol handlers under server/routes/mcp
Applied to files:
client/src/state/server-helpers.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/types/mcp.ts : Define MCP types in server/types/mcp.ts
Applied to files:
client/src/state/server-helpers.tsclient/src/components/connection/AddServerModal.tsx
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/routes/llm/openai/**/*.ts : Keep OpenAI integration (client setup, model management, streaming, errors) under server/routes/llm/openai
Applied to files:
client/src/state/server-helpers.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/utils/transform.ts : Keep data transformation utilities in server/utils/transform.ts
Applied to files:
client/src/state/server-helpers.ts
📚 Learning: 2025-10-19T23:07:40.722Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-19T23:07:40.722Z
Learning: Applies to client/**/*.{tsx} : Prefer React functional components in the client UI
Applied to files:
client/src/components/ActiveServerSelector.tsxclient/src/components/ServersTab.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components,hooks}/**/*.{ts,tsx} : Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects
Applied to files:
client/src/components/ActiveServerSelector.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components}/**/*.tsx : Use React functional components with React.FC typing for all UI components and pages
Applied to files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/ServersTab.tsx
📚 Learning: 2025-10-19T23:05:54.474Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-10-19T23:05:54.474Z
Learning: Applies to client/src/components/mcp-sidebar.tsx : Temporarily disable the interceptor feature and present "Run evals" and "Eval results" as tabs in their own section
Applied to files:
client/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/components/**/*.tsx : Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips
Applied to files:
client/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/llm,stores/chat}/**/*.{ts,tsx} : Manage AI model state: model selection, generation parameters, stream management, and history persistence
Applied to files:
client/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/llm,stores/chat}/**/*.{ts,tsx} : Manage chat context: track window size/tokens, prune context, and persist state
Applied to files:
client/src/hooks/use-app-state.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{stores/servers,lib}/**/*.{ts,tsx} : Persist configuration: local storage, export/import, sync, and backup/restore options
Applied to files:
client/src/hooks/use-app-state.tsclient/src/components/ServersTab.tsx
🧬 Code graph analysis (12)
client/src/components/connection/shared/AuthenticationSection.tsx (2)
client/src/components/ui/select.tsx (5)
Select(173-173)SelectTrigger(181-181)SelectValue(182-182)SelectContent(174-174)SelectItem(176-176)client/src/components/ui/input.tsx (1)
Input(21-21)
client/src/components/connection/shared/EnvVarsSection.tsx (1)
bin/start.js (2)
envVars(318-318)envVar(367-367)
client/src/state/server-helpers.ts (1)
shared/types.ts (1)
HttpServerDefinition(403-418)
client/src/components/ActiveServerSelector.tsx (1)
client/src/components/connection/AddServerModal.tsx (1)
AddServerModal(27-334)
client/src/components/connection/EditServerModal.tsx (9)
shared/types.ts (1)
ServerFormData(420-433)client/src/lib/mcp-tools-api.ts (1)
ListToolsResultWithMetadata(8-10)client/src/components/connection/hooks/use-server-form.ts (1)
useServerForm(7-417)client/src/logs/PosthogUtils.ts (2)
detectPlatform(27-54)detectEnvironment(56-58)client/src/components/connection/shared/EnvVarsSection.tsx (1)
EnvVarsSection(14-98)client/src/components/connection/shared/CustomHeadersSection.tsx (1)
CustomHeadersSection(14-98)client/src/components/connection/shared/AuthenticationSection.tsx (1)
AuthenticationSection(29-162)client/src/lib/mcp-oauth.ts (2)
tokens(176-179)getStoredTokens(440-454)client/src/lib/jwt-decoder.ts (1)
decodeJWT(5-31)
client/src/components/connection/AddServerModal.tsx (6)
shared/types.ts (1)
ServerFormData(420-433)client/src/components/connection/hooks/use-server-form.ts (1)
useServerForm(7-417)client/src/components/connection/shared/EnvVarsSection.tsx (1)
EnvVarsSection(14-98)client/src/components/connection/shared/AuthenticationSection.tsx (1)
AuthenticationSection(29-162)client/src/components/connection/shared/CustomHeadersSection.tsx (1)
CustomHeadersSection(14-98)client/src/logs/PosthogUtils.ts (2)
detectPlatform(27-54)detectEnvironment(56-58)
client/src/components/connection/hooks/use-server-form.ts (2)
shared/types.ts (1)
ServerFormData(420-433)client/src/lib/mcp-oauth.ts (1)
hasOAuthConfig(459-473)
client/src/components/connection/ServerModal.tsx (1)
client/src/logs/PosthogUtils.ts (2)
detectPlatform(27-54)detectEnvironment(56-58)
client/src/components/connection/shared/CustomHeadersSection.tsx (2)
client/src/components/ui/button.tsx (1)
Button(59-59)client/src/components/ui/input.tsx (1)
Input(21-21)
client/src/hooks/use-app-state.ts (3)
client/src/state/mcp-api.ts (1)
getInitializationInfo(39-42)sdk/src/mcp-client-manager/index.ts (1)
getInitializationInfo(218-252)client/src/lib/mcp-oauth.ts (1)
clearOAuthData(590-596)
client/src/components/ServersTab.tsx (2)
client/src/components/connection/AddServerModal.tsx (1)
AddServerModal(27-334)client/src/components/connection/EditServerModal.tsx (1)
EditServerModal(46-1138)
client/src/components/OAuthFlowTab.tsx (1)
client/src/components/connection/EditServerModal.tsx (1)
EditServerModal(46-1138)
🔍 Remote MCP Context7
Additional context found (concise, relevant to PR review)
- Repository resolved as the MCP Inspector project: /modelcontextprotocol/inspector.
- README confirms supported transports and server config patterns referenced by the PR: stdio, sse, streamable-http (HTTP), and examples for URL/command, custom headers, and env vars — aligns with changes adding HTTP headers, env vars, and transport-specific UI/logic.
- README documents CLI/URL usage for connecting to remote servers and sending custom headers (e.g., --header "X-API-Key: ..."), supporting the PR’s Custom Headers and HTTP auth flows.
- README shows typical server initialization/connection workflows (launching servers via command/URL and transports), which corroborates the PR’s addition of InitializationInfo fields (protocolVersion, transport, serverCapabilities, etc.) and fetching init info after connect/reconnect.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Cursor Bugbot
- GitHub Check: prettier-and-build
🔇 Additional comments (8)
client/src/components/connection/AddServerModal.tsx (3)
1-25: LGTM! Clean imports and type definitions.The component follows the coding guidelines with proper use of the @/ alias, React functional component structure, and a well-defined props interface.
27-77: Excellent form state management.The component properly delegates form state management to the
useServerFormhook and implements thorough validation for OAuth credentials before submission. The error handling with toast notifications provides good user feedback.
79-334: Well-structured modal with clear conditional rendering.The modal properly handles the different connection types (stdio vs HTTP) with appropriate conditional sections. The PostHog integration for analytics is consistent throughout.
client/src/components/connection/ServerModal.tsx (1)
574-584: Authentication tab integration looks good.The new Authentication tab is properly integrated into the tab switcher with consistent styling and state management.
client/src/components/connection/EditServerModal.tsx (4)
1-107: Excellent component structure and state management.The component properly uses the
useServerFormhook with the server parameter for initialization and correctly maintains separate state variables (showConfigurationandshowServerInfoat lines 90, 59) to avoid the accordion collision bug present inServerModal.tsx.
346-367: Proper use of shared components.The Configuration tab correctly integrates the shared
EnvVarsSectionandCustomHeadersSectioncomponents, avoiding code duplication and maintaining consistency withAddServerModal.
590-636: Clean authentication integration.The Authentication tab properly leverages the shared
AuthenticationSectioncomponent, demonstrating good separation of concerns and code reuse.
1081-1094: Robust metadata value rendering.The metadata rendering logic properly handles various value types including null, undefined, URL objects, and regular objects with appropriate fallback handling.
| const buildFormData = (): ServerFormData => { | ||
| let finalFormData = { ...serverFormData }; | ||
|
|
||
| // Add timeout configuration | ||
| const reqTimeout = parseInt(requestTimeout) || 10000; | ||
| finalFormData = { | ||
| ...finalFormData, | ||
| requestTimeout: reqTimeout, | ||
| }; | ||
|
|
||
| // Handle stdio-specific data | ||
| if (serverFormData.type === "stdio") { | ||
| // Parse commandInput to extract command and args | ||
| const parts = commandInput | ||
| .trim() | ||
| .split(/\s+/) | ||
| .filter((part) => part.length > 0); | ||
| const command = parts[0] || ""; | ||
| const args = parts.slice(1); | ||
|
|
||
| finalFormData = { | ||
| ...finalFormData, | ||
| command: command.trim(), | ||
| args, | ||
| url: undefined, | ||
| headers: undefined, | ||
| }; | ||
|
|
||
| // Add environment variables | ||
| const env: Record<string, string> = {}; | ||
| envVars.forEach(({ key, value }) => { | ||
| if (key.trim()) { | ||
| env[key.trim()] = value; | ||
| } | ||
| }); | ||
| finalFormData.env = env; | ||
| } | ||
|
|
||
| // Handle http-specific data | ||
| if (serverFormData.type === "http") { | ||
| const headers: Record<string, string> = {}; | ||
|
|
||
| // Add custom headers | ||
| customHeaders.forEach(({ key, value }) => { | ||
| if (key.trim()) { | ||
| headers[key.trim()] = value; | ||
| } | ||
| }); | ||
|
|
||
| // Parse OAuth scopes from input (preserve them even when not using OAuth) | ||
| const scopes = oauthScopesInput | ||
| .trim() | ||
| .split(/\s+/) | ||
| .filter((s) => s.length > 0); | ||
| if (scopes.length > 0) { | ||
| finalFormData.oauthScopes = scopes; | ||
| } | ||
|
|
||
| // Preserve client credentials | ||
| if (clientId.trim()) { | ||
| finalFormData.clientId = clientId.trim(); | ||
| } | ||
| if (clientSecret.trim()) { | ||
| finalFormData.clientSecret = clientSecret.trim(); | ||
| } | ||
|
|
||
| // Handle authentication | ||
| if (authType === "bearer" && bearerToken) { | ||
| headers["Authorization"] = `Bearer ${bearerToken.trim()}`; | ||
| finalFormData.useOAuth = false; | ||
| } else if (authType === "oauth") { | ||
| finalFormData.useOAuth = true; | ||
| // Don't add default scopes - let the OAuth server use its defaults | ||
| // This prevents invalid_scope errors when the server doesn't recognize "mcp:*" | ||
| } else { | ||
| finalFormData.useOAuth = false; | ||
| } | ||
|
|
||
| finalFormData.url = typeof serverFormData.url === "string" ? serverFormData.url.trim() : ""; // Trim URL to remove trailing/leading spaces | ||
| finalFormData.headers = headers; | ||
| finalFormData.env = undefined; | ||
| finalFormData.command = undefined; | ||
| finalFormData.args = undefined; | ||
| } | ||
|
|
There was a problem hiding this comment.
Clearing OAuth scopes or credentials still leaks the old values. buildFormData spreads serverFormData first, so when a user clears scopes or disables custom credentials, the previous oauthScopes, clientId, and clientSecret linger unless new non-empty values are supplied. As a result, updated configs keep transmitting secrets/scopes the user explicitly removed. Please scrub those fields when they are no longer intended to be set.
Apply this fix:
const scopes = oauthScopesInput
.trim()
.split(/\s+/)
.filter((s) => s.length > 0);
- if (scopes.length > 0) {
- finalFormData.oauthScopes = scopes;
- }
+ if (authType === "oauth" && scopes.length > 0) {
+ finalFormData.oauthScopes = scopes;
+ } else {
+ delete finalFormData.oauthScopes;
+ }
- if (clientId.trim()) {
- finalFormData.clientId = clientId.trim();
- }
- if (clientSecret.trim()) {
- finalFormData.clientSecret = clientSecret.trim();
- }
+ if (authType === "oauth" && useCustomClientId && clientId.trim()) {
+ finalFormData.clientId = clientId.trim();
+ } else {
+ delete finalFormData.clientId;
+ }
+ if (authType === "oauth" && useCustomClientId && clientSecret.trim()) {
+ finalFormData.clientSecret = clientSecret.trim();
+ } else {
+ delete finalFormData.clientSecret;
+ }Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In client/src/components/connection/hooks/use-server-form.ts around lines 240 to
324, buildFormData currently spreads serverFormData first which lets previous
oauthScopes/clientId/clientSecret persist when the user clears them; update the
function to explicitly scrub those fields when they should be empty: after
parsing scopes, set finalFormData.oauthScopes = scopes.length > 0 ? scopes :
undefined; for clientId and clientSecret set finalFormData.clientId =
clientId.trim() || undefined and finalFormData.clientSecret =
clientSecret.trim() || undefined; and when authType !== "oauth" (including
bearer or none) ensure finalFormData.useOAuth = false and also clear
finalFormData.oauthScopes, finalFormData.clientId and finalFormData.clientSecret
(set them to undefined) so cleared values are not leaked.
| <button | ||
| type="button" | ||
| onClick={onToggle} | ||
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | ||
| > | ||
| <div className="flex items-center gap-2"> | ||
| {showEnvVars ? ( | ||
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | ||
| ) : ( | ||
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | ||
| )} | ||
| <span className="text-sm font-medium text-foreground"> | ||
| Environment Variables | ||
| </span> | ||
| {envVars.length > 0 && ( | ||
| <span className="text-xs text-muted-foreground"> | ||
| ({envVars.length}) | ||
| </span> | ||
| )} | ||
| </div> | ||
| <Button | ||
| type="button" | ||
| variant="outline" | ||
| size="sm" | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| onAdd(); | ||
| }} | ||
| className="text-xs" | ||
| > | ||
| Add Variable | ||
| </Button> | ||
| </button> |
There was a problem hiding this comment.
Untangle the nested buttons.
The top-level toggle is a <button>, and it contains another <button> (<Button variant="outline" …>). HTML forbids interactive controls nested inside buttons; browsers can ignore the inner control, so “Add Variable” may not fire, and accessibility tooling will choke. Please restructure the header so the toggle and the “Add” action are separate interactive elements.
- <div className="border border-border rounded-lg overflow-hidden">
- <button
- type="button"
- onClick={onToggle}
- className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer"
- >
- <div className="flex items-center gap-2">
+ <div className="border border-border rounded-lg overflow-hidden">
+ <div className="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
+ <button
+ type="button"
+ onClick={onToggle}
+ className="flex items-center gap-2 cursor-pointer"
+ >
{showEnvVars ? (
<ChevronDown className="h-4 w-4 text-muted-foreground" />
) : (
<ChevronRight className="h-4 w-4 text-muted-foreground" />
)}
<span className="text-sm font-medium text-foreground">
Environment Variables
</span>
{envVars.length > 0 && (
<span className="text-xs text-muted-foreground">
({envVars.length})
</span>
)}
- </div>
- <Button
- type="button"
- variant="outline"
- size="sm"
- onClick={(e) => {
- e.stopPropagation();
- onAdd();
- }}
- className="text-xs"
- >
- Add Variable
- </Button>
- </button>
+ </button>
+ <Button
+ type="button"
+ variant="outline"
+ size="sm"
+ onClick={onAdd}
+ className="text-xs"
+ >
+ Add Variable
+ </Button>
+ </div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| type="button" | |
| onClick={onToggle} | |
| className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors cursor-pointer" | |
| > | |
| <div className="flex items-center gap-2"> | |
| {showEnvVars ? ( | |
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | |
| )} | |
| <span className="text-sm font-medium text-foreground"> | |
| Environment Variables | |
| </span> | |
| {envVars.length > 0 && ( | |
| <span className="text-xs text-muted-foreground"> | |
| ({envVars.length}) | |
| </span> | |
| )} | |
| </div> | |
| <Button | |
| type="button" | |
| variant="outline" | |
| size="sm" | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| onAdd(); | |
| }} | |
| className="text-xs" | |
| > | |
| Add Variable | |
| </Button> | |
| </button> | |
| <div className="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"> | |
| <button | |
| type="button" | |
| onClick={onToggle} | |
| className="flex items-center gap-2 cursor-pointer" | |
| > | |
| {showEnvVars ? ( | |
| <ChevronDown className="h-4 w-4 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronRight className="h-4 w-4 text-muted-foreground" /> | |
| )} | |
| <span className="text-sm font-medium text-foreground"> | |
| Environment Variables | |
| </span> | |
| {envVars.length > 0 && ( | |
| <span className="text-xs text-muted-foreground"> | |
| ({envVars.length}) | |
| </span> | |
| )} | |
| </button> | |
| <Button | |
| type="button" | |
| variant="outline" | |
| size="sm" | |
| onClick={onAdd} | |
| className="text-xs" | |
| > | |
| Add Variable | |
| </Button> | |
| </div> |
🤖 Prompt for AI Agents
client/src/components/connection/shared/EnvVarsSection.tsx around lines 24-56:
the header currently nests a native <button> containing another <button> which
is invalid and breaks the inner "Add Variable" action; replace the outer
<button> with a non-interactive container (e.g., a <div> or <header>) that has
the same styling and an onClick handler, then make the toggle itself a dedicated
interactive element (or give the container role="button", tabIndex=0, onKeyDown
handling for Enter/Space, and aria-expanded) so keyboard users can toggle; keep
the inner "Add Variable" as a normal button and remove its stopPropagation if
the new structure prevents propagation issues; ensure accessibility attributes
(aria-expanded, aria-controls if applicable) and visual focus styles are
preserved.
| if (formData.clientId) { | ||
| httpConfig.clientId = formData.clientId; | ||
| } | ||
|
|
||
| if (formData.clientSecret) { | ||
| httpConfig.clientSecret = formData.clientSecret; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Do not persist OAuth client secrets.
clientSecret is being merged into the HTTP config, and that config is later serialized via saveAppState(...) in use-app-state.ts, so the secret ends up in local storage and browser memory indefinitely. That is a serious credential leak: any XSS or shared device can exfiltrate the client secret, defeating OAuth’s security model. Keep the secret ephemeral—use it only for the current authorization exchange and never stash it in the persisted config.
Please drop the persisted clientSecret field. For example:
- if (formData.clientSecret) {
- httpConfig.clientSecret = formData.clientSecret;
- }Then, plumb the secret through transient request payloads instead of the saved config (e.g., handle it alongside the OAuth initiation request without storing it).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (formData.clientId) { | |
| httpConfig.clientId = formData.clientId; | |
| } | |
| if (formData.clientSecret) { | |
| httpConfig.clientSecret = formData.clientSecret; | |
| } | |
| if (formData.clientId) { | |
| httpConfig.clientId = formData.clientId; | |
| } |
🤖 Prompt for AI Agents
In client/src/state/server-helpers.ts around lines 35-41, the code merges
formData.clientSecret into the long-lived httpConfig which is later serialized
to local storage; remove that assignment so clientSecret is never written to
persisted config. Instead, omit clientSecret from httpConfig and pass the
clientSecret only in transient request bodies or in-memory variables used for
the immediate OAuth exchange (e.g., include it in the request payload when
initiating/finishing auth), and update any callers/types to accept a separate
ephemeral secret parameter so saveAppState(...) no longer contains the secret.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
client/src/components/connection/hooks/use-server-form.ts (1)
254-341: Clearing OAuth credentials still leaks previous values.When spreading
serverFormDatafirst (line 255), conditional assignments at lines 308-318 fail to scrub OAuth scopes and client credentials when the user removes them. Explicitly clear these fields when they should be empty.Apply this fix to properly clear OAuth fields:
const scopes = oauthScopesInput .trim() .split(/\s+/) .filter((s) => s.length > 0); - if (scopes.length > 0) { + if (authType === "oauth" && scopes.length > 0) { finalFormData.oauthScopes = scopes; + } else { + delete finalFormData.oauthScopes; } - if (clientId.trim()) { + if (authType === "oauth" && useCustomClientId && clientId.trim()) { finalFormData.clientId = clientId.trim(); + } else { + delete finalFormData.clientId; } - if (clientSecret.trim()) { + if (authType === "oauth" && useCustomClientId && clientSecret.trim()) { finalFormData.clientSecret = clientSecret.trim(); + } else { + delete finalFormData.clientSecret; }client/src/components/connection/ServerModal.tsx (1)
1072-1219: Decouple accordion state for independent control.Both "Additional Configuration" (line 1031) and "Server Info" (line 1077) toggle
showConfiguration, causing them to expand and collapse in tandem. Each section needs its own state variable.Apply this fix:
- const [showConfiguration, setShowConfiguration] = useState<boolean>(false); + const [showConfiguration, setShowConfiguration] = useState<boolean>(false); + const [showServerInfo, setShowServerInfo] = useState<boolean>(false); // ... in resetForm: setShowConfiguration(false); + setShowServerInfo(false); // ... Server Info accordion button (line 1077): - onClick={() => setShowConfiguration(!showConfiguration)} + onClick={() => setShowServerInfo(!showServerInfo)} // ... Server Info content condition (line 1092): - {showConfiguration && ( + {showServerInfo && (
🧹 Nitpick comments (1)
client/src/state/mcp-api.ts (1)
39-44: Add return type annotation for type safety.The function should declare its return type to improve type safety and IDE support. Consider annotating with
Promise<InitializationInfo>to match the state type.-export async function getInitializationInfo(serverId: string) { +export async function getInitializationInfo( + serverId: string, +): Promise<InitializationInfo> { const res = await fetch( `/api/mcp/servers/init-info/${encodeURIComponent(serverId)}`, ); return res.json(); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
client/src/components/connection/AddServerModal.tsx(1 hunks)client/src/components/connection/EditServerModal.tsx(1 hunks)client/src/components/connection/ServerModal.tsx(9 hunks)client/src/components/connection/hooks/use-server-form.ts(1 hunks)client/src/hooks/use-app-state.ts(10 hunks)client/src/state/app-types.ts(2 hunks)client/src/state/mcp-api.ts(1 hunks)sdk/src/mcp-client-manager/index.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- sdk/src/mcp-client-manager/index.ts
- client/src/state/app-types.ts
- client/src/components/connection/EditServerModal.tsx
- client/src/hooks/use-app-state.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Prefer interfaces for defining object shapes
Constrain generics with appropriate type bounds
Use type guards to narrow unknown or union types before usage
Enforce import ordering consistently
**/*.{ts,tsx}: Prefer named exports in TypeScript modules
Use 2-space indentation
Declare types and interfaces using PascalCase
Files:
client/src/state/mcp-api.tsclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsx
client/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (client/CLAUDE.md)
Implement strict TypeScript types: strict prop types, event types, state interfaces, and utility types
In client code, use the @/ alias for imports
Files:
client/src/state/mcp-api.tsclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsx
client/src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Follow consistent React component structure in the frontend
Files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/ServerModal.tsx
client/src/{app,components}/**/*.tsx
📄 CodeRabbit inference engine (client/CLAUDE.md)
client/src/{app,components}/**/*.tsx: Use React functional components with React.FC typing for all UI components and pages
Define explicit Props interfaces for components, including proper children prop handling
Type event handlers with React-provided types (e.g., React.MouseEvent, FormEvent)
Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features
Maintain component isolation: avoid excessive prop drilling, use Context wisely, favor composition, and optimize renders
Build responsive layouts using the established Tailwind breakpoint system, grids, flex, and container queries
Ensure accessibility: proper ARIA attributes, keyboard navigation, focus management, and screen reader support
Files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/ServerModal.tsx
client/src/{app,components,hooks}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (client/CLAUDE.md)
Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects
Files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsx
client/src/components/**/*.tsx
📄 CodeRabbit inference engine (client/CLAUDE.md)
Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips
React components in client/src/components should be functional and saved as PascalCase.tsx files
Files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/ServerModal.tsx
🧠 Learnings (15)
📓 Common learnings
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app/servers,components/servers}/**/*.tsx : Implement server management UI: multiple connections with lists, status indicators, quick actions, and groups
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/{mcp,transport}}/**/*.{ts,tsx} : Provide transport selection UIs and logic: protocol options, configuration forms, validation rules, and presets
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts} : Implement MCP protocol using Mastra (mastra/core, mastra/mcp) for MCP handling, helpers, and types
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Provide comprehensive MCP server testing (spec validation, OAuth flows, prompt/resource checks, error simulation)
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/utils/mcp-utils.ts : Put MCP helper utilities in server/utils/mcp-utils.ts
Applied to files:
client/src/state/mcp-api.tsclient/src/components/connection/AddServerModal.tsx
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/types/mcp.ts : Define MCP types in server/types/mcp.ts
Applied to files:
client/src/state/mcp-api.tsclient/src/components/connection/AddServerModal.tsx
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/{routes/mcp/**,utils/mcp-utils.ts,types/mcp.ts} : Implement MCP protocol using Mastra (mastra/core, mastra/mcp) for MCP handling, helpers, and types
Applied to files:
client/src/state/mcp-api.tsclient/src/components/connection/AddServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{hooks/mcp,stores/{chat,servers}}/**/*.{ts,tsx} : Synchronize MCP state: track connections, requests, responses, and errors consistently
Applied to files:
client/src/state/mcp-api.tsclient/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app/servers,components/servers}/**/*.tsx : Implement server management UI: multiple connections with lists, status indicators, quick actions, and groups
Applied to files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/{mcp,transport}}/**/*.{ts,tsx} : Provide transport selection UIs and logic: protocol options, configuration forms, validation rules, and presets
Applied to files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{components/servers,hooks/mcp,lib/api}/**/*.{ts,tsx} : Implement authentication setup: OAuth configuration, token management, scopes, and refresh handling
Applied to files:
client/src/components/connection/AddServerModal.tsxclient/src/components/connection/hooks/use-server-form.tsclient/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components,hooks}/**/*.{ts,tsx} : Use React hooks for local state: apply useState/useReducer patterns, create custom hooks, and always clean up effects
Applied to files:
client/src/components/connection/hooks/use-server-form.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components}/**/*.tsx : Use React functional components with React.FC typing for all UI components and pages
Applied to files:
client/src/components/connection/hooks/use-server-form.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{app,components}/**/*.tsx : Follow React 19 patterns: hooks-centric components, Suspense and Error Boundaries where appropriate, and concurrent features
Applied to files:
client/src/components/connection/hooks/use-server-form.ts
📚 Learning: 2025-10-19T23:07:08.982Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: server/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:07:08.982Z
Learning: Applies to server/index.ts : Use server/index.ts as the server entry point
Applied to files:
client/src/components/connection/hooks/use-server-form.ts
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/{lib/api,hooks/llm}/**/*.{ts,tsx} : Implement Anthropic Claude integration: authentication flow, request formatting, stream processing, and rate limiting
Applied to files:
client/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:05:54.474Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-10-19T23:05:54.474Z
Learning: Applies to client/src/components/mcp-sidebar.tsx : Temporarily disable the interceptor feature and present "Run evals" and "Eval results" as tabs in their own section
Applied to files:
client/src/components/connection/ServerModal.tsx
📚 Learning: 2025-10-19T23:06:33.450Z
Learnt from: CR
Repo: MCPJam/inspector PR: 0
File: client/CLAUDE.md:0-0
Timestamp: 2025-10-19T23:06:33.450Z
Learning: Applies to client/src/components/**/*.tsx : Use Radix UI primitives for dialogs, dropdowns, form controls, and tooltips
Applied to files:
client/src/components/connection/ServerModal.tsx
🧬 Code graph analysis (4)
client/src/state/mcp-api.ts (1)
sdk/src/mcp-client-manager/index.ts (1)
getInitializationInfo(218-253)
client/src/components/connection/AddServerModal.tsx (6)
shared/types.ts (1)
ServerFormData(420-433)client/src/components/connection/hooks/use-server-form.ts (1)
useServerForm(7-432)client/src/components/connection/shared/EnvVarsSection.tsx (1)
EnvVarsSection(14-98)client/src/components/connection/shared/AuthenticationSection.tsx (1)
AuthenticationSection(29-162)client/src/components/connection/shared/CustomHeadersSection.tsx (1)
CustomHeadersSection(14-98)client/src/logs/PosthogUtils.ts (2)
detectPlatform(27-54)detectEnvironment(56-58)
client/src/components/connection/hooks/use-server-form.ts (3)
client/src/state/app-types.ts (1)
ServerWithName(23-33)shared/types.ts (1)
ServerFormData(420-433)client/src/lib/mcp-oauth.ts (1)
hasOAuthConfig(459-473)
client/src/components/connection/ServerModal.tsx (1)
client/src/logs/PosthogUtils.ts (2)
detectPlatform(27-54)detectEnvironment(56-58)
🔍 Remote MCP Context7
Additional context found (relevant to reviewing PR #804)
- Repository resolved as MCP Inspector (/modelcontextprotocol/inspector).
- README documents supported transports and config patterns used by the PR: stdio, sse, streamable-http (HTTP); examples for URL/command, args, and env vars. This corroborates transport-specific UI and ServerInfo fields (protocol/transport/serverVersion).
- README shows CLI examples for connecting with custom HTTP headers (--header "X-API-Key: ...") and passing env vars/args to servers, supporting the PR’s Custom Headers, EnvVarsSection, and AddServerModal behavior.
- README includes example Inspector URLs with transport/query params (e.g., ?transport=sse&serverUrl=...), matching the PR’s handling of transport-specific form inputs.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: prettier-and-build
Note
Adds init metadata fetch/display for MCP servers and replaces the monolithic ServerModal with dedicated Add/Edit modals powered by a shared form hook and sections.
ServerModalusages withAddServerModalandEditServerModalinActiveServerSelector,ServersTab, andOAuthFlowTab.use-server-formhook and reusable sectionsAuthenticationSection,CustomHeadersSection,EnvVarsSectionfor consistent add/edit flows.ServerConnectionCardalways clickable with improved hover styling.InitializationInfotoServerWithNameand new reducer actionSET_INITIALIZATION_INFO.getInitializationInfoAPI calls inuse-app-state.HttpServerDefinition/ServerFormDatawithoauthScopes,clientId,clientSecret,requestTimeout; only persist OAuth fields whenuseOAuthis true.MCPClientManager.getInitializationInfo(derivesprotocolVersion,transport, capabilities, versions, instructions).GET /api/mcp/servers/init-info/:serverIdand client wrapperstate/mcp-api.getInitializationInfo.Written by Cursor Bugbot for commit 3d0541e. This will update automatically on new commits. Configure here.