feat(tui): show one blinking MCP loading line with pending server names

Author: elkaix

.changeset/quiet-mcp-loading-line.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+The TUI now shows one "Loading MCP: …" line with a blinking dot and the names of the servers still connecting, and removes it once all have loaded, instead of one line per connected server; failures and servers that need OAuth still get their own line.

apps/pythinker-code/src/tui/components/messages/mcp-loading-line.ts

@@ -0,0 +1,43 @@
+import { Text } from '@pymodel/pi-tui';
+import type { TUI } from '@pymodel/pi-tui';
+
+import { STATUS_BULLET } from '#/tui/constant/symbols';
+import { currentTheme } from '#/tui/theme';
+
+const BLINK_INTERVAL_MS = 500;
+
+/** Transient "Loading MCP: a, b" row with the same blinking bullet as running tools. */
+export class McpLoadingLine extends Text {
+  private blinkOn = true;
+  private names: readonly string[];
+  private readonly timer: ReturnType<typeof setInterval>;
+
+  constructor(
+    private readonly ui: TUI,
+    names: readonly string[],
+  ) {
+    super('', 1, 0);
+    this.names = names;
+    this.refresh();
+    this.timer = setInterval(() => {
+      this.blinkOn = !this.blinkOn;
+      this.refresh();
+    }, BLINK_INTERVAL_MS);
+  }
+
+  setNames(names: readonly string[]): void {
+    this.names = names;
+    this.refresh();
+  }
+
+  stop(): void {
+    clearInterval(this.timer);
+  }
+
+  private refresh(): void {
+    const bullet = this.blinkOn ? currentTheme.fg('text', STATUS_BULLET) : '  ';
+    const label = currentTheme.fg('textMuted', `Loading MCP: ${this.names.join(', ')}`);
+    this.setText(`${bullet}${label}`);
+    this.ui.requestRender();
+  }
+}

apps/pythinker-code/src/tui/controllers/session-event-handler.ts

@@ -35,7 +35,6 @@ import type {
 
 import { ActivitySpinner } from '../components/chrome/activity-spinner';
 import { buildGoalMarker } from '../components/messages/goal-markers';
-import { StatusMessageComponent } from '../components/messages/status-message';
 import {
   DynamicWorkflowModeMarkerComponent,
   type DynamicWorkflowModeMarkerState,
@@ -69,7 +68,7 @@ import {
   selectMcpStartupStatusRows,
 } from '../utils/mcp-server-status';
 import { openUrl } from '#/utils/open-url';
-import { currentTheme } from '#/tui/theme';
+import { McpLoadingLine } from '../components/messages/mcp-loading-line';
 import type { ColorToken } from '#/tui/theme';
 import { errorReportHintLine } from '../constant/feedback';
 import { formatStepDebugTiming } from '#/utils/usage/debug-timing';
@@ -165,7 +164,7 @@ export class SessionEventHandler {
   renderedSkillActivationIds: Set<string> = new Set();
   renderedPluginCommandActivationIds: Set<string> = new Set();
   renderedMcpServerStatusKeys: Map<string, string> = new Map();
-  mcpServerStatusSpinners: Map<string, ActivitySpinner> = new Map();
+  mcpLoadingLine: McpLoadingLine | undefined;
   mcpServers: Map<string, McpServerStatusSnapshot> = new Map();
   private goalCompletionAwaitingClear = false;
   private goalCompletionTurnEnded = false;
@@ -252,9 +251,10 @@ export class SessionEventHandler {
       this.renderMcpServerStatus(server);
     }
 
+    const live = new Map(this.mcpServers);
     this.mcpServers.clear();
     for (const server of servers) {
-      this.mcpServers.set(server.name, server);
+      this.mcpServers.set(server.name, live.get(server.name) ?? server);
     }
     const hidden: McpServerStatusSnapshot[] = [];
     for (const server of servers) {
@@ -263,8 +263,9 @@ export class SessionEventHandler {
       this.renderedMcpServerStatusKeys.set(server.name, mcpServerStatusKey(server));
       hidden.push(server);
     }
-    const summary = formatMcpStartupStatusSummary(servers);
+    const summary = formatMcpStartupStatusSummary([...this.mcpServers.values()]);
     host.setAppState({ mcpServersSummary: summary || null });
+    this.updateMcpLoadingRow();
   }
 
   handleEvent(event: Event, sendQueued: (item: QueuedMessage) => void): void {
@@ -321,10 +322,7 @@ export class SessionEventHandler {
   }
 
   stopAllMcpServerStatusSpinners(): void {
-    for (const spinner of this.mcpServerStatusSpinners.values()) {
-      spinner.stop();
-    }
-    this.mcpServerStatusSpinners.clear();
+    this.removeMcpLoadingRow();
   }
 
   // ---------------------------------------------------------------------------
@@ -1018,77 +1016,52 @@ export class SessionEventHandler {
     this.host.setAppState({ mcpServersSummary: summary || null });
 
     switch (server.status) {
-      case 'connected': {
-        const toolStr = `${server.toolCount} tool${server.toolCount === 1 ? '' : 's'}`;
-        const message = `MCP server "${server.name}" connected · ${toolStr} (${server.transport})`;
-        this.finalizeMcpServerStatusRow(server.name, message, 'success');
-        return;
-      }
-      case 'failed': {
-        const message = `MCP server "${server.name}" failed${server.error !== undefined ? `: ${server.error}` : ''}`;
-        this.finalizeMcpServerStatusRow(server.name, message, 'error');
-        return;
-      }
-      case 'needs-auth': {
-        const message = `MCP server "${server.name}" needs OAuth — run /mcp-config login ${server.name}`;
-        this.finalizeMcpServerStatusRow(server.name, message, 'warning');
-        return;
-      }
-      case 'disabled':
-        this.finalizeMcpServerStatusRow(
-          server.name,
-          `MCP server "${server.name}" disabled`,
-          'textMuted',
+      case 'failed':
+        this.host.showStatus(
+          `MCP server "${server.name}" failed${server.error !== undefined ? `: ${server.error}` : ''}`,
+          'error',
         );
-        return;
-      case 'removed':
-        this.finalizeMcpServerStatusRow(
-          server.name,
-          `MCP server "${server.name}" removed`,
-          'textMuted',
+        break;
+      case 'needs-auth':
+        this.host.showStatus(
+          `MCP server "${server.name}" needs OAuth — run /mcp-config login ${server.name}`,
+          'warning',
         );
-        return;
-      case 'pending':
-        this.showMcpServerStatusSpinner(server.name);
-        return;
+        break;
+      default:
+        break;
     }
+    this.updateMcpLoadingRow();
   }
 
-  private showMcpServerStatusSpinner(name: string): void {
+  // One transient row while servers connect; it leaves the transcript once none
+  // is pending. Connected servers are summarised in the welcome card instead.
+  private updateMcpLoadingRow(): void {
     const { state } = this.host;
-    const label = `MCP server "${name}" connecting…`;
-    const existing = this.mcpServerStatusSpinners.get(name);
-    if (existing !== undefined) {
-      existing.setLabel(label);
+    const pending = [...this.mcpServers.values()]
+      .filter((server) => server.status === 'pending')
+      .map((server) => server.name);
+    if (pending.length === 0) {
+      this.removeMcpLoadingRow();
+      return;
+    }
+    if (this.mcpLoadingLine !== undefined) {
+      this.mcpLoadingLine.setNames(pending);
       return;
     }
-    const tint = (s: string): string => currentTheme.fg('textMuted', s);
-    const spinner = new ActivitySpinner(state.ui, tint, label);
-    state.transcriptContainer.addChild(spinner);
-    this.mcpServerStatusSpinners.set(name, spinner);
+    this.mcpLoadingLine = new McpLoadingLine(state.ui, pending);
+    state.transcriptContainer.addChild(this.mcpLoadingLine);
     state.ui.requestRender();
   }
 
-  private finalizeMcpServerStatusRow(name: string, message: string, color: ColorToken): void {
-    const { state } = this.host;
-    const spinner = this.mcpServerStatusSpinners.get(name);
-    if (spinner === undefined) {
-      this.host.showStatus(message, color);
-      return;
-    }
+  private removeMcpLoadingRow(): void {
+    const spinner = this.mcpLoadingLine;
+    if (spinner === undefined) return;
     spinner.stop();
-    const status = new StatusMessageComponent(message, color);
-    const children = state.transcriptContainer.children;
-    const idx = children.indexOf(spinner);
-    if (idx >= 0) {
-      // In-place replacement is picked up by the container's ref-checked
-      // render cache; a tree-wide invalidate is unnecessary (and costly).
-      children[idx] = status;
-    } else {
-      state.transcriptContainer.addChild(status);
-    }
-    this.mcpServerStatusSpinners.delete(name);
-    state.ui.requestRender();
+    // oxlint-disable-next-line unicorn/prefer-dom-node-remove
+    this.host.state.transcriptContainer.removeChild(spinner);
+    this.mcpLoadingLine = undefined;
+    this.host.state.ui.requestRender();
   }
 
   private handleSkillActivated(event: SkillActivatedEvent): void {

apps/pythinker-code/test/tui/pythinker-tui-message-flow.test.ts

@@ -2786,12 +2786,12 @@ command = "vim"
     }
     expect(subscribeOrder).toBeLessThan(snapshotOrder);
     const transcript = renderTranscript(driver);
-    expect(transcript).toContain('MCP server "local-tools" connected');
-    expect(transcript).toContain('2 tools (stdio)');
+    expect(transcript).not.toContain('MCP server "local-tools"');
+    expect(transcript).not.toContain('Loading MCP');
     expect(transcript).toContain('MCP server "remote-tools" failed: connection refused');
   });
 
-  it('deduplicates identical MCP status updates while allowing reconnect transitions', async () => {
+  it('shows one transient MCP loading line that disappears once servers connect', async () => {
     const eventListeners: Array<(event: Event) => void> = [];
     const connectedServer = {
       name: 'local-tools',
@@ -2817,9 +2817,7 @@ command = "vim"
       server: connectedServer,
     } as Event);
 
-    expect(countOccurrences(renderTranscript(driver), 'MCP server "local-tools" connected')).toBe(
-      1,
-    );
+    expect(renderTranscript(driver)).not.toContain('MCP server "local-tools"');
 
     eventListeners[0]?.({
       type: 'mcp.server.status',
@@ -2831,16 +2829,50 @@ command = "vim"
         toolCount: 0,
       },
     } as Event);
+    expect(countOccurrences(renderTranscript(driver), 'Loading MCP: local-tools')).toBe(1);
+
     eventListeners[0]?.({
       type: 'mcp.server.status',
       agentId: 'main',
       sessionId: 'ses-1',
       server: connectedServer,
     } as Event);
 
-    expect(countOccurrences(renderTranscript(driver), 'MCP server "local-tools" connected')).toBe(
-      2,
-    );
+    const transcript = renderTranscript(driver);
+    expect(transcript).not.toContain('Loading MCP');
+    expect(transcript).not.toContain('MCP server "local-tools"');
+  });
+
+  it('lists loading MCP server names and drops each one as it connects', async () => {
+    const eventListeners: Array<(event: Event) => void> = [];
+    const server = (name: string, status: 'pending' | 'connected') => ({
+      type: 'mcp.server.status',
+      agentId: 'main',
+      sessionId: 'ses-1',
+      server: { name, transport: 'http', status, toolCount: status === 'connected' ? 1 : 0 },
+    }) as Event;
+    const session = makeSession({
+      onEvent: vi.fn((listener: (event: Event) => void) => {
+        eventListeners.push(listener);
+        return vi.fn();
+      }),
+      listMcpServers: vi.fn(async () => []),
+    });
+    const { driver } = await makeDriver(session);
+    driver.sessionEventHandler.startSubscription();
+    await Promise.resolve();
+
+    eventListeners[0]?.(server('alpha', 'pending'));
+    eventListeners[0]?.(server('beta', 'pending'));
+    expect(renderTranscript(driver)).toContain('Loading MCP: alpha, beta');
+
+    eventListeners[0]?.(server('alpha', 'connected'));
+    const partial = renderTranscript(driver);
+    expect(partial).toContain('Loading MCP: beta');
+    expect(partial).not.toContain('alpha');
+
+    eventListeners[0]?.(server('beta', 'connected'));
+    expect(renderTranscript(driver)).not.toContain('Loading MCP');
   });
 
   it('does not let a late MCP snapshot overwrite a live status event', async () => {
@@ -2890,8 +2922,8 @@ command = "vim"
     await Promise.resolve();
 
     const transcript = renderTranscript(driver);
-    expect(transcript).toContain('MCP server "local-tools" connected');
     expect(transcript).not.toContain('stale failure');
+    expect(driver.sessionEventHandler.mcpServers.get('local-tools')?.status).toBe('connected');
   });
 
   it('sends normal editor input to the active session and marks the turn as waiting', async () => {