frontend(ai-agents): fix orphaned MCP server display and compact list UI #2197
Conversation
| const missingServerIds = connectedServerIds.filter((id) => !existingIds.has(id)); | ||
|
|
||
| // Create placeholders for missing servers | ||
| const missingServers: MCPServer[] = missingServerIds.map( |
There was a problem hiding this comment.
in the future we should not allow deleting MCP servers that are in use by the AI agent
| <div className="flex shrink-0 items-center gap-2"> | ||
| {toolNames.length > 0 && ( | ||
| <Badge variant="secondary" className="text-xs"> | ||
| {toolNames.length} {toolNames.length === 1 ? 'tool' : 'tools'} |
There was a problem hiding this comment.
nit: use pluralize() function
There was a problem hiding this comment.
Done - using pluralizeWithNumber()
| const rowContent = ( | ||
| <div className="flex flex-1 items-center gap-3"> | ||
| {toolNames.length > 0 && ( | ||
| <button |
There was a problem hiding this comment.
consider using registry UI instead of native HTML
There was a problem hiding this comment.
Done - changed to <Button size="icon" variant="ghost">
| tags: {}, | ||
| state: MCPServer_State.UNSPECIFIED, | ||
| url: '', | ||
| }) as MCPServer |
There was a problem hiding this comment.
Can we add generic <MCPServer> type to .map() function to get rid of MCPServer casting as MCPServer
There was a problem hiding this comment.
Tried, but doesn't work - MCPServer is a protobuf Message type that requires internal properties like $typeName. Added a comment explaining why the cast is necessary.
birdayz
force-pushed
the
jb/ai-agent-mcp-server-ux
branch
3 times, most recently
from
abdf015 to
8e196b0
Compare
Two related fixes for MCP servers in AI Agent configuration: 1. Orphaned server references now visible and removable. When an MCP server is deleted, agents referencing it showed nothing - user couldn't see or remove the stale reference. Now creates placeholder objects for missing servers with clear visual indication. 2. Replace bloated card layout with compact row-based list. The old 120px min-height cards wasted vertical space. New list shows one server per row with expandable tool details on demand. Missing servers display with warning icon, red styling, and "Missing" badge so users know to clean them up. Also adds description text and makes title link to MCP Servers page.
birdayz
force-pushed
the
jb/ai-agent-mcp-server-ux
branch
from
8e196b0 to
3765422
Compare
2 participants
What
Fix orphaned MCP server handling and replace the bloated card layout with a compact row-based list in AI Agent configuration.
Why
Implementation details
Orphaned server handling (
ai-agent-configuration-tab.tsx):connectedMcpServersandavailableMcpServersnow create placeholder objects for servers that exist in agent config but not in the systemstate: UNSPECIFIEDanddisplayName: "id (deleted)"for detectionCompact list UI (
mcp-server-card.tsx):References
In addition, there's a PR in internal cloud repo to lazily deal with down MCPs on start of the agent.
recording_1769782939.mp4