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

171
clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
View file

@ -184,9 +184,174 @@ export const ToolsActive: Story = {
selected: true,
onClick: fn(),
},
{ name: "delete_records", selected: false, onClick: fn() },
{ name: "list_users", selected: false, onClick: fn() },
{ name: "batch_process", selected: false, onClick: fn() },
{
name: "delete_records",
title: "Delete Records",
selected: false,
onClick: fn(),
},
{
name: "list_users",
title: "List Users",
selected: false,
onClick: fn(),
},
{
name: "batch_process",
title: "Batch Process",
selected: false,
onClick: fn(),
},
{
name: "search_files",
title: "Search Files",
selected: false,
onClick: fn(),
},
{
name: "read_file",
title: "Read File",
selected: false,
onClick: fn(),
},
{
name: "write_file",
title: "Write File",
selected: false,
onClick: fn(),
},
{
name: "get_schema",
title: "Get Schema",
selected: false,
onClick: fn(),
},
{
name: "run_query",
title: "Run Query",
selected: false,
onClick: fn(),
},
{
name: "create_migration",
title: "Create Migration",
selected: false,
onClick: fn(),
},
{
name: "validate_config",
title: "Validate Config",
selected: false,
onClick: fn(),
},
{
name: "deploy_service",
title: "Deploy Service",
selected: false,
onClick: fn(),
},
{
name: "rollback_deploy",
title: "Rollback Deploy",
selected: false,
onClick: fn(),
},
{
name: "check_health",
title: "Check Health",
selected: false,
onClick: fn(),
},
{
name: "generate_report",
title: "Generate Report",
selected: false,
onClick: fn(),
},
{
name: "export_csv",
title: "Export CSV",
selected: false,
onClick: fn(),
},
{
name: "import_data",
title: "Import Data",
selected: false,
onClick: fn(),
},
{
name: "send_notification",
title: "Send Notification",
selected: false,
onClick: fn(),
},
{
name: "schedule_task",
title: "Schedule Task",
selected: false,
onClick: fn(),
},
{
name: "cancel_task",
title: "Cancel Task",
selected: false,
onClick: fn(),
},
{
name: "list_connections",
title: "List Connections",
selected: false,
onClick: fn(),
},
{
name: "refresh_cache",
title: "Refresh Cache",
selected: false,
onClick: fn(),
},
{
name: "purge_logs",
title: "Purge Logs",
selected: false,
onClick: fn(),
},
{
name: "encrypt_secret",
title: "Encrypt Secret",
selected: false,
onClick: fn(),
},
{
name: "rotate_keys",
title: "Rotate Keys",
selected: false,
onClick: fn(),
},
{
name: "sync_resources",
title: "Sync Resources",
selected: false,
onClick: fn(),
},
{
name: "compile_template",
title: "Compile Template",
selected: false,
onClick: fn(),
},
{
name: "analyze_performance",
title: "Analyze Performance",
selected: false,
onClick: fn(),
},
{
name: "resize_image",
title: "Resize Image",
selected: false,
onClick: fn(),
},
]}
selectedTool={{
name: "create_record",