chore: polish mcp logs UX (#2533)

Author: joeyorlando

platform/backend/src/mcp-server-runtime/k8s-deployment.ts

@@ -1415,9 +1415,11 @@ export default class K8sDeployment {
                   "CrashLoopBackOff",
                   "ImagePullBackOff",
                   "ErrImagePull",
+                  "ErrImageNeverPull",
                   "CreateContainerConfigError",
                   "CreateContainerError",
                   "RunContainerError",
+                  "InvalidImageName",
                 ];
                 if (failureStates.includes(waitingReason)) {
                   const message =
@@ -1522,10 +1524,14 @@ export default class K8sDeployment {
   /**
    * Stream logs from the pod with follow enabled.
    * If no running pod is found, falls back to showing K8s events.
+   * @param responseStream - The stream to write logs to
+   * @param lines - Number of initial lines to fetch
+   * @param abortSignal - Optional abort signal to cancel the stream
    */
   async streamLogs(
     responseStream: NodeJS.WritableStream,
     lines: number = 100,
+    abortSignal?: AbortSignal,
   ): Promise<void> {
     try {
       const pod = await this.findPodForDeployment();
@@ -1579,12 +1585,6 @@ export default class K8sDeployment {
         }
       });
 
-      responseStream.on("close", () => {
-        if (logStream.destroy) {
-          logStream.destroy();
-        }
-      });
-
       // Use the Log client to stream logs with follow=true
       const req = await this.k8sLog.log(
         this.namespace,
@@ -1599,11 +1599,45 @@ export default class K8sDeployment {
         },
       );
 
+      // Track abort handler for cleanup
+      let abortHandler: (() => void) | null = null;
+
+      // Handle abort signal
+      if (abortSignal) {
+        abortHandler = () => {
+          if (req) {
+            req.abort();
+          }
+          logStream.destroy();
+          if (!("destroyed" in responseStream) || !responseStream.destroyed) {
+            responseStream.end();
+          }
+        };
+
+        if (abortSignal.aborted) {
+          abortHandler();
+          return;
+        }
+
+        abortSignal.addEventListener("abort", abortHandler, { once: true });
+      }
+
+      // Cleanup function to remove abort listener
+      const cleanupAbortListener = () => {
+        if (abortSignal && abortHandler) {
+          abortSignal.removeEventListener("abort", abortHandler);
+        }
+      };
+
       // Handle cleanup when response stream closes
       responseStream.on("close", () => {
         if (req) {
           req.abort();
         }
+        if (logStream.destroy) {
+          logStream.destroy();
+        }
+        cleanupAbortListener();
       });
     } catch (error: unknown) {
       logger.error(

platform/backend/src/mcp-server-runtime/manager.ts

@@ -549,18 +549,23 @@ export class McpServerRuntimeManager {
 
   /**
    * Stream logs from an MCP server deployment with follow enabled
+   * @param mcpServerId - The MCP server ID
+   * @param responseStream - The stream to write logs to
+   * @param lines - Number of initial lines to fetch
+   * @param abortSignal - Optional abort signal to cancel the stream
    */
   async streamMcpServerLogs(
     mcpServerId: string,
     responseStream: NodeJS.WritableStream,
     lines: number = 100,
+    abortSignal?: AbortSignal,
   ): Promise<void> {
     const k8sDeployment = this.mcpServerIdToDeploymentMap.get(mcpServerId);
     if (!k8sDeployment) {
       throw new Error(`Deployment not found for MCP server ${mcpServerId}`);
     }
 
-    await k8sDeployment.streamLogs(responseStream, lines);
+    await k8sDeployment.streamLogs(responseStream, lines, abortSignal);
   }
 
   /**

platform/backend/src/websocket.ts

@@ -5,6 +5,7 @@ import {
   type ClientWebSocketMessage,
   ClientWebSocketMessageSchema,
   type ClientWebSocketMessageType,
+  MCP_DEFAULT_LOG_LINES,
   type ServerWebSocketMessage,
 } from "@shared";
 import type { WebSocket, WebSocketServer } from "ws";
@@ -136,7 +137,7 @@ class WebSocketService {
         return this.handleSubscribeMcpLogs(
           ws,
           message.payload.serverId,
-          message.payload.lines ?? 500,
+          message.payload.lines ?? MCP_DEFAULT_LOG_LINES,
           clientContext,
         );
       },
@@ -739,6 +740,7 @@ class WebSocketService {
         serverId,
         stream,
         lines,
+        abortController.signal,
       );
     } catch (error) {
       logger.error({ error, serverId }, "Failed to start MCP logs stream");

platform/frontend/src/app/mcp-catalog/_parts/installation-progress.tsx

@@ -22,18 +22,40 @@ interface InstallationProgressProps {
 const PHASES = {
   pending: {
     progress: 33,
-    description: "Starting container...",
+    description: "Starting container",
   },
   "discovering-tools": {
     progress: 66,
-    description: "Discovering tools...",
+    description: "Discovering tools",
   },
   success: {
     progress: 100,
     description: "Installation complete",
   },
 } as const;
 
+/**
+ * Hook that returns animated dots that cycle through ".", "..", "..."
+ */
+function useAnimatedDots(isActive: boolean) {
+  const [dotCount, setDotCount] = useState(1);
+
+  useEffect(() => {
+    if (!isActive) {
+      setDotCount(1);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setDotCount((prev) => (prev % 3) + 1);
+    }, 400);
+
+    return () => clearInterval(interval);
+  }, [isActive]);
+
+  return ".".repeat(dotCount);
+}
+
 /**
  * Hook that returns animated progress value that smoothly increments
  */
@@ -83,6 +105,16 @@ export function InstallationProgress({
   const isActive = status === "pending" || status === "discovering-tools";
   const targetProgress = phaseInfo?.progress ?? 0;
   const animatedProgress = useAnimatedProgress(targetProgress, isActive);
+  const animatedDots = useAnimatedDots(isActive);
+
+  // Build description with animated dots for active phases
+  const description = useMemo(() => {
+    if (!phaseInfo) return "";
+    if (isActive) {
+      return `${phaseInfo.description}${animatedDots}`;
+    }
+    return phaseInfo.description;
+  }, [phaseInfo, isActive, animatedDots]);
 
   if (!status || status === "idle" || status === "success") {
     return null;
@@ -96,7 +128,7 @@ export function InstallationProgress({
     <div className="w-full space-y-2">
       <Progress value={animatedProgress} />
       <div className="flex items-center justify-between text-xs">
-        <span className="text-muted-foreground">{phaseInfo?.description}</span>
+        <span className="text-muted-foreground">{description}</span>
         {serverId && (
           <Button
             variant="link"

platform/frontend/src/app/mcp-catalog/_parts/mcp-logs-dialog.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import type { McpLogsErrorMessage, McpLogsMessage } from "@shared";
+import {
+  MCP_DEFAULT_LOG_LINES,
+  type McpLogsErrorMessage,
+  type McpLogsMessage,
+} from "@shared";
 import { ArrowDown, Copy, Terminal } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -76,6 +80,9 @@ export function McpLogsDialog({
   const [isStreaming, setIsStreaming] = useState(false);
   const unsubscribeLogsRef = useRef<(() => void) | null>(null);
   const unsubscribeErrorRef = useRef<(() => void) | null>(null);
+  const connectionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const currentServerIdRef = useRef<string | null>(null);
 
@@ -94,6 +101,12 @@ export function McpLogsDialog({
   const streamingText = useStreamingAnimation(isWaitingForLogs);
 
   const stopStreaming = useCallback(() => {
+    // Clear connection timeout
+    if (connectionTimeoutRef.current) {
+      clearTimeout(connectionTimeoutRef.current);
+      connectionTimeoutRef.current = null;
+    }
+
     // Unsubscribe from WebSocket messages
     if (unsubscribeLogsRef.current) {
       unsubscribeLogsRef.current();
@@ -130,12 +143,27 @@ export function McpLogsDialog({
       // Connect to WebSocket if not already connected
       websocketService.connect();
 
+      // Set up connection timeout - if no logs received within 10 seconds, show error
+      connectionTimeoutRef.current = setTimeout(() => {
+        // Only trigger timeout if we're still streaming and haven't received any logs
+        if (currentServerIdRef.current === targetServerId) {
+          setStreamError("Connection timeout - unable to connect to server");
+          setIsStreaming(false);
+        }
+      }, 10000);
+
       // Subscribe to log messages for this server
       unsubscribeLogsRef.current = websocketService.subscribe(
         "mcp_logs",
         (message: McpLogsMessage) => {
           if (message.payload.serverId !== targetServerId) return;
 
+          // Clear connection timeout on first message
+          if (connectionTimeoutRef.current) {
+            clearTimeout(connectionTimeoutRef.current);
+            connectionTimeoutRef.current = null;
+          }
+
           // Capture the command from the first message
           if (message.payload.command) {
             setCommand(message.payload.command);
@@ -169,6 +197,12 @@ export function McpLogsDialog({
         (message: McpLogsErrorMessage) => {
           if (message.payload.serverId !== targetServerId) return;
 
+          // Clear connection timeout on error
+          if (connectionTimeoutRef.current) {
+            clearTimeout(connectionTimeoutRef.current);
+            connectionTimeoutRef.current = null;
+          }
+
           setStreamError(message.payload.error);
           toast.error(`Streaming failed: ${message.payload.error}`);
           setIsStreaming(false);
@@ -178,7 +212,7 @@ export function McpLogsDialog({
       // Send subscribe message to server
       websocketService.send({
         type: "subscribe_mcp_logs",
-        payload: { serverId: targetServerId, lines: 500 },
+        payload: { serverId: targetServerId, lines: MCP_DEFAULT_LOG_LINES },
       });
     },
     [autoScroll, stopStreaming],

platform/shared/websocket.ts

@@ -1,5 +1,10 @@
 import { z } from "zod";
 
+/**
+ * MCP Logs defaults
+ */
+export const MCP_DEFAULT_LOG_LINES = 500;
+
 /**
  * WebSocket Message Payload Schemas (Client -> Server)
  */
@@ -55,7 +60,7 @@ const BrowserSetZoomPayloadSchema = z.object({
 // MCP Server Logs payloads
 const SubscribeMcpLogsPayloadSchema = z.object({
   serverId: z.string().uuid(),
-  lines: z.number().int().min(1).max(10000).default(500), // Number of initial lines to fetch
+  lines: z.number().int().min(1).max(10000).default(MCP_DEFAULT_LOG_LINES), // Number of initial lines to fetch
 });
 
 const UnsubscribeMcpLogsPayloadSchema = z.object({