modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Refactor ServerCard with active server logic, rename StatusIndicator, and polish UI panels

Browse source 
- Rename StatusIndicator to ServerStatusIndicator across all files
- ServerCard: add activeServer/onSetActiveServer props for coordinated
  connection flow — when a card's toggle is switched on, it sets itself
  as the active server, shows "Connecting" status, and dims all other
  cards (opacity + pointerEvents none + inert for full keyboard blocking)
- ServerListScreen: manage activeServer state internally, pass to cards;
  switch to full-width layout with 3-column grid and scrollable card area
- ServerCard: move "Test Client Features" dropdown above ContentViewer
  with min-height row for consistent card heights
- ToolResultPanel: move Clear button to top-right header row
- ToolDetailPanel: right-align Execute Tool button, size md, not full-width
- ListChangedIndicator: bump Refresh button to size sm
- ToolsActive story: expand to 30 tools with titles
- UnconnectedView stories: all servers disconnected, remove Connecting story

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-02 18:00:18 -04:00
commit 8e73bc6ffb
1 changed files with 295 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

64
clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
View file

@ -59,8 +59,8 @@ export const WithServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-everything",
status: "connected",
canTestClientFeatures: true,
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
{
@ -80,9 +80,7 @@ export const WithServers: Story = {
transport: "http",
connectionMode: "Direct",
command: "https://api.example.com/mcp",
status: "failed",
retryCount: 3,
error: { message: "Connection timeout after 20s" },
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
@ -106,8 +104,8 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-everything",
status: "connected",
canTestClientFeatures: true,
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
{
@ -127,8 +125,8 @@ export const ManyServers: Story = {
transport: "http",
connectionMode: "Direct",
command: "https://api.example.com/mcp",
status: "connected",
canTestClientFeatures: true,
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
{
@ -137,7 +135,7 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-postgres",
status: "connecting",
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
@ -147,8 +145,8 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-github",
status: "connected",
canTestClientFeatures: true,
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
{
@ -157,9 +155,7 @@ export const ManyServers: Story = {
transport: "http",
connectionMode: "Direct",
command: "https://slack-mcp.example.com/mcp",
status: "failed",
retryCount: 5,
error: { message: "Authentication failed" },
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
@ -169,7 +165,7 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-memory",
status: "connected",
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
@ -189,8 +185,8 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-sqlite ./data.db",
status: "connected",
canTestClientFeatures: true,
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
{
@ -199,9 +195,7 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-brave-search",
status: "failed",
retryCount: 2,
error: { message: "API key expired" },
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
@ -221,7 +215,7 @@ export const ManyServers: Story = {
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-sequential-thinking",
status: "connecting",
status: "disconnected",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
@ -232,28 +226,4 @@ export const ManyServers: Story = {
/>
),
},
};
export const Connecting: Story = {
args: {
children: (
<ServerListScreen
servers={[
{
name: "everything-server",
version: "1.0.0",
transport: "stdio",
connectionMode: "Via Proxy",
command: "npx -y @modelcontextprotocol/server-everything",
status: "connecting",
canTestClientFeatures: false,
...makeServerCallbacks(),
},
]}
onAddManually={fn()}
onImportConfig={fn()}
onImportServerJson={fn()}
/>
),
},
};
};