xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 12:05:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): don't show MCP "connection failed" while still connecting

Browse Source 
The MCP status UI rendered "连接失败" for any non-connected state, so during a
normal connection attempt the subtitle showed "连接失败" while the status pill
below it showed "连接中..." — contradictory.

Only treat an explicit ERROR (or box-unavailable) status as failed; a
CONNECTING or initial/unresolved status now shows "连接中". Applied to the MCP
detail form (subtitle + StatusDisplay) and the MCP server card.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Junyan Qin
2026-06-01 19:10:58 +08:00
parent 2bc8559c2a
commit 407cdfd308
2 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/app/home/mcp/components/mcp-form/MCPForm.tsx
View File

@@ -71,7 +71,13 @@ function StatusDisplay({
);
}
if (runtimeInfo.status === MCPSessionStatus.CONNECTING) {
// CONNECTING, or any not-yet-resolved status (initial/null while the box is
// still bringing the session up) — show "connecting" rather than failing.
if (
runtimeInfo.status === MCPSessionStatus.CONNECTING ||
(runtimeInfo.status !== MCPSessionStatus.ERROR &&
runtimeInfo.error_phase !== 'box_unavailable')
) {
return (
<div className="flex items-center gap-2 text-blue-600">
<Loader2 className="size-5 animate-spin" />
@@ -258,6 +264,13 @@ function RuntimePanel({
const isConnected =
!mcpTesting && runtimeInfo.status === MCPSessionStatus.CONNECTED;
// Only treat an explicit error (or box-unavailable) as failed; while testing,
// connecting, or in an initial/unresolved state, show "connecting" so we
// don't flash "connection failed" during a normal connection attempt.
const isFailed =
!mcpTesting &&
(runtimeInfo.status === MCPSessionStatus.ERROR ||
runtimeInfo.error_phase === 'box_unavailable');
const tools = runtimeInfo.tools || [];
return (
@@ -268,7 +281,9 @@ function RuntimePanel({
<p className="text-sm text-muted-foreground">
{isConnected
? t('mcp.toolCount', { count: tools.length })
: t('mcp.connectionFailedStatus')}
: isFailed
? t('mcp.connectionFailedStatus')
: t('mcp.connecting')}
</p>
</div>
{isConnected && (

20
web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx
View File

@@ -129,22 +129,22 @@ export default function MCPCardComponent({
{t('mcp.toolCount', { count: toolsCount })}
</div>
</div>
) : status === MCPSessionStatus.CONNECTING ? (
// 连接中 - 蓝色加载
<div className="flex flex-row items-center gap-[0.4rem]">
<Loader2 className="w-4 h-4 text-blue-500 dark:text-blue-400 animate-spin" />
<div className="text-sm text-blue-500 dark:text-blue-400 font-medium">
{t('mcp.connecting')}
</div>
</div>
) : (
// 连接失败 - 红色
) : status === MCPSessionStatus.ERROR ? (
// 连接失败 - 红色（仅在明确报错时）
<div className="flex flex-row items-center gap-[0.4rem]">
<AlertCircle className="w-4 h-4 text-red-500 dark:text-red-400" />
<div className="text-sm text-red-500 dark:text-red-400 font-medium">
{t('mcp.connectionFailedStatus')}
</div>
</div>
) : (
// 连接中 - 蓝色加载（CONNECTING 或初始/未知状态，避免误报失败）
<div className="flex flex-row items-center gap-[0.4rem]">
<Loader2 className="w-4 h-4 text-blue-500 dark:text-blue-400 animate-spin" />
<div className="text-sm text-blue-500 dark:text-blue-400 font-medium">
{t('mcp.connecting')}
</div>
</div>
)}
</div>
</div>