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>