From 407cdfd3087166b33dcda74e1c60fdf32c340067 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Mon, 1 Jun 2026 19:10:58 +0800
Subject: [PATCH] fix(web): don't show MCP "connection failed" while still
 connecting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../home/mcp/components/mcp-form/MCPForm.tsx  | 19 ++++++++++++++++--
 .../mcp-server/mcp-card/MCPCardComponent.tsx  | 20 +++++++++----------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/web/src/app/home/mcp/components/mcp-form/MCPForm.tsx b/web/src/app/home/mcp/components/mcp-form/MCPForm.tsx
index b78cc4d5..985be21e 100644
--- a/web/src/app/home/mcp/components/mcp-form/MCPForm.tsx
+++ b/web/src/app/home/mcp/components/mcp-form/MCPForm.tsx
@@ -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 && (
diff --git a/web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx b/web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx
index 9be39a86..cdf315f0 100644
--- a/web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx
+++ b/web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx
@@ -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>