更新大量 tsx 原始文件; 已经迁移 login panel; 部分 (#121)

* style(B1-1): 格式化 ink/buddy/cli/context/screens/tasks/services/keybindings/state (43 files) 纯格式化：移除分号、React Compiler import、import 多行展开。修复了 Box.tsx 和 ScrollBox.tsx 中无效的 global.d.ts import。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-2): 格式化 commands (79 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-3): 格式化 components/messages,permissions,mcp,sandbox,shell (104 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-4): 格式化 components/PromptInput,FeedbackSurvey,tasks,agents,skills,design-system,wizard (73 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-5): 格式化 components其余 + hooks + tools (232 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-6): 格式化 main/entrypoints/utils/moreright (21 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: 更新 README，新增 Run.ps1/TODO.md，删除 V6.md - README.md: 大幅重写，更详细版本历史和配置示例 - Run.ps1: 新增 Windows 启动脚本 - TODO.md: 新增包完成清单 - V6.md: 删除（架构重构规划已不适用） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 修复以前的问题 * fix: 修复 login 面板的问题 --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-18 14:25:51 +00:00 · 2026-04-04 23:24:27 +08:00
parent 02694918b5
commit 5b1a52b8e0
559 changed files with 103807 additions and 101817 deletions
--- a/src/components/mcp/CapabilitiesSection.tsx
+++ b/src/components/mcp/CapabilitiesSection.tsx
@@ -1,60 +1,35 @@
-import { c as _c } from "react/compiler-runtime";
-import React from 'react';
-import { Box, Text } from '../../ink.js';
-import { Byline } from '../design-system/Byline.js';
+import React from 'react'
+import { Box, Text } from '../../ink.js'
+import { Byline } from '../design-system/Byline.js'
+
 type Props = {
-  serverToolsCount: number;
-  serverPromptsCount: number;
-  serverResourcesCount: number;
-};
-export function CapabilitiesSection(t0) {
-  const $ = _c(9);
-  const {
-    serverToolsCount,
-    serverPromptsCount,
-    serverResourcesCount
-  } = t0;
-  let capabilities;
-  if ($[0] !== serverPromptsCount || $[1] !== serverResourcesCount || $[2] !== serverToolsCount) {
-    capabilities = [];
-    if (serverToolsCount > 0) {
-      capabilities.push("tools");
-    }
-    if (serverResourcesCount > 0) {
-      capabilities.push("resources");
-    }
-    if (serverPromptsCount > 0) {
-      capabilities.push("prompts");
-    }
-    $[0] = serverPromptsCount;
-    $[1] = serverResourcesCount;
-    $[2] = serverToolsCount;
-    $[3] = capabilities;
-  } else {
-    capabilities = $[3];
-  }
-  let t1;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <Text bold={true}>Capabilities: </Text>;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  let t2;
-  if ($[5] !== capabilities) {
-    t2 = capabilities.length > 0 ? <Byline>{capabilities}</Byline> : "none";
-    $[5] = capabilities;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] !== t2) {
-    t3 = <Box>{t1}<Text color="text">{t2}</Text></Box>;
-    $[7] = t2;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  return t3;
+  serverToolsCount: number
+  serverPromptsCount: number
+  serverResourcesCount: number
+}
+
+export function CapabilitiesSection({
+  serverToolsCount,
+  serverPromptsCount,
+  serverResourcesCount,
+}: Props): React.ReactNode {
+  const capabilities = []
+  if (serverToolsCount > 0) {
+    capabilities.push('tools')
+  }
+  if (serverResourcesCount > 0) {
+    capabilities.push('resources')
+  }
+  if (serverPromptsCount > 0) {
+    capabilities.push('prompts')
+  }
+
+  return (
+    <Box>
+      <Text bold>Capabilities: </Text>
+      <Text color="text">
+        {capabilities.length > 0 ? <Byline>{capabilities}</Byline> : 'none'}
+      </Text>
+    </Box>
+  )
 }
--- a/src/components/mcp/ElicitationDialog.tsx
+++ b/src/components/mcp/ElicitationDialog.tsx
--- a/src/components/mcp/MCPAgentServerMenu.tsx
+++ b/src/components/mcp/MCPAgentServerMenu.tsx
@@ -1,24 +1,29 @@
-import figures from 'figures';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import type { CommandResultDisplay } from '../../commands.js';
-import { Box, color, Link, Text, useTheme } from '../../ink.js';
-import { useKeybinding } from '../../keybindings/useKeybinding.js';
-import { AuthenticationCancelledError, performMCPOAuthFlow } from '../../services/mcp/auth.js';
-import { capitalize } from '../../utils/stringUtils.js';
-import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
-import { Select } from '../CustomSelect/index.js';
-import { Byline } from '../design-system/Byline.js';
-import { Dialog } from '../design-system/Dialog.js';
-import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js';
-import { Spinner } from '../Spinner.js';
-import type { AgentMcpServerInfo } from './types.js';
+import figures from 'figures'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import type { CommandResultDisplay } from '../../commands.js'
+import { Box, color, Link, Text, useTheme } from '../../ink.js'
+import { useKeybinding } from '../../keybindings/useKeybinding.js'
+import {
+  AuthenticationCancelledError,
+  performMCPOAuthFlow,
+} from '../../services/mcp/auth.js'
+import { capitalize } from '../../utils/stringUtils.js'
+import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
+import { Select } from '../CustomSelect/index.js'
+import { Byline } from '../design-system/Byline.js'
+import { Dialog } from '../design-system/Dialog.js'
+import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js'
+import { Spinner } from '../Spinner.js'
+import type { AgentMcpServerInfo } from './types.js'
+
 type Props = {
-  agentServer: AgentMcpServerInfo;
-  onCancel: () => void;
-  onComplete?: (result?: string, options?: {
-    display?: CommandResultDisplay;
-  }) => void;
-};
+  agentServer: AgentMcpServerInfo
+  onCancel: () => void
+  onComplete?: (
+    result?: string,
+    options?: { display?: CommandResultDisplay },
+  ) => void
+}

 /**
 * Menu for agent-specific MCP servers.
@@ -28,113 +33,165 @@ type Props = {
 export function MCPAgentServerMenu({
  agentServer,
  onCancel,
-  onComplete
+  onComplete,
 }: Props): React.ReactNode {
-  const [theme] = useTheme();
-  const [isAuthenticating, setIsAuthenticating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [authorizationUrl, setAuthorizationUrl] = useState<string | null>(null);
-  const authAbortControllerRef = useRef<AbortController | null>(null);
+  const [theme] = useTheme()
+  const [isAuthenticating, setIsAuthenticating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [authorizationUrl, setAuthorizationUrl] = useState<string | null>(null)
+  const authAbortControllerRef = useRef<AbortController | null>(null)

  // Abort OAuth flow on unmount so the callback server is closed even if a
  // parent component's Esc handler navigates away before ours fires.
-  useEffect(() => () => authAbortControllerRef.current?.abort(), []);
+  useEffect(() => () => authAbortControllerRef.current?.abort(), [])

  // Handle ESC to cancel authentication flow
  const handleEscCancel = useCallback(() => {
    if (isAuthenticating) {
-      authAbortControllerRef.current?.abort();
-      authAbortControllerRef.current = null;
-      setIsAuthenticating(false);
-      setAuthorizationUrl(null);
+      authAbortControllerRef.current?.abort()
+      authAbortControllerRef.current = null
+      setIsAuthenticating(false)
+      setAuthorizationUrl(null)
    }
-  }, [isAuthenticating]);
+  }, [isAuthenticating])
+
  useKeybinding('confirm:no', handleEscCancel, {
    context: 'Confirmation',
-    isActive: isAuthenticating
-  });
+    isActive: isAuthenticating,
+  })
+
  const handleAuthenticate = useCallback(async () => {
    if (!agentServer.needsAuth || !agentServer.url) {
-      return;
+      return
    }
-    setIsAuthenticating(true);
-    setError(null);
-    const controller = new AbortController();
-    authAbortControllerRef.current = controller;
+
+    setIsAuthenticating(true)
+    setError(null)
+
+    const controller = new AbortController()
+    authAbortControllerRef.current = controller
+
    try {
      // Create a temporary config for OAuth
      const tempConfig = {
        type: agentServer.transport as 'http' | 'sse',
-        url: agentServer.url
-      };
-      await performMCPOAuthFlow(agentServer.name, tempConfig, setAuthorizationUrl, controller.signal);
-      onComplete?.(`Authentication successful for ${agentServer.name}. The server will connect when the agent runs.`);
+        url: agentServer.url,
+      }
+
+      await performMCPOAuthFlow(
+        agentServer.name,
+        tempConfig,
+        setAuthorizationUrl,
+        controller.signal,
+      )
+
+      onComplete?.(
+        `Authentication successful for ${agentServer.name}. The server will connect when the agent runs.`,
+      )
    } catch (err) {
      // Don't show error if it was a cancellation
-      if (err instanceof Error && !(err instanceof AuthenticationCancelledError)) {
-        setError(err.message);
+      if (
+        err instanceof Error &&
+        !(err instanceof AuthenticationCancelledError)
+      ) {
+        setError(err.message)
      }
    } finally {
-      setIsAuthenticating(false);
-      authAbortControllerRef.current = null;
+      setIsAuthenticating(false)
+      authAbortControllerRef.current = null
    }
-  }, [agentServer, onComplete]);
-  const capitalizedServerName = capitalize(String(agentServer.name));
+  }, [agentServer, onComplete])
+
+  const capitalizedServerName = capitalize(String(agentServer.name))
+
  if (isAuthenticating) {
-    return <Box flexDirection="column" gap={1} padding={1}>
+    return (
+      <Box flexDirection="column" gap={1} padding={1}>
        <Text color="claude">Authenticating with {agentServer.name}…</Text>
        <Box>
          <Spinner />
          <Text> A browser window will open for authentication</Text>
        </Box>
-        {authorizationUrl && <Box flexDirection="column">
+        {authorizationUrl && (
+          <Box flexDirection="column">
            <Text dimColor>
              If your browser doesn&apos;t open automatically, copy this URL
              manually:
            </Text>
            <Link url={authorizationUrl} />
-          </Box>}
+          </Box>
+        )}
        <Box marginLeft={3}>
          <Text dimColor>
            Return here after authenticating in your browser.{' '}
-            <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="go back" />
+            <ConfigurableShortcutHint
+              action="confirm:no"
+              context="Confirmation"
+              fallback="Esc"
+              description="go back"
+            />
          </Text>
        </Box>
-      </Box>;
+      </Box>
+    )
  }
-  const menuOptions = [];
+
+  const menuOptions = []

  // Only show authenticate option for HTTP/SSE servers
  if (agentServer.needsAuth) {
    menuOptions.push({
      label: agentServer.isAuthenticated ? 'Re-authenticate' : 'Authenticate',
-      value: 'auth'
-    });
+      value: 'auth',
+    })
  }
+
  menuOptions.push({
    label: 'Back',
-    value: 'back'
-  });
-  return <Dialog title={`${capitalizedServerName} MCP Server`} subtitle="agent-only" onCancel={onCancel} inputGuide={exitState => exitState.pending ? <Text>Press {exitState.keyName} again to exit</Text> : <Byline>
+    value: 'back',
+  })
+
+  return (
+    <Dialog
+      title={`${capitalizedServerName} MCP Server`}
+      subtitle="agent-only"
+      onCancel={onCancel}
+      inputGuide={exitState =>
+        exitState.pending ? (
+          <Text>Press {exitState.keyName} again to exit</Text>
+        ) : (
+          <Byline>
            <KeyboardShortcutHint shortcut="↑↓" action="navigate" />
            <KeyboardShortcutHint shortcut="Enter" action="confirm" />
-            <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="go back" />
-          </Byline>}>
+            <ConfigurableShortcutHint
+              action="confirm:no"
+              context="Confirmation"
+              fallback="Esc"
+              description="go back"
+            />
+          </Byline>
+        )
+      }
+    >
      <Box flexDirection="column" gap={0}>
        <Box>
          <Text bold>Type: </Text>
          <Text dimColor>{agentServer.transport}</Text>
        </Box>

-        {agentServer.url && <Box>
+        {agentServer.url && (
+          <Box>
            <Text bold>URL: </Text>
            <Text dimColor>{agentServer.url}</Text>
-          </Box>}
+          </Box>
+        )}

-        {agentServer.command && <Box>
+        {agentServer.command && (
+          <Box>
            <Text bold>Command: </Text>
            <Text dimColor>{agentServer.command}</Text>
-          </Box>}
+          </Box>
+        )}

        <Box>
          <Text bold>Used by: </Text>
@@ -149,34 +206,47 @@ export function MCPAgentServerMenu({
          </Text>
        </Box>

-        {agentServer.needsAuth && <Box>
+        {agentServer.needsAuth && (
+          <Box>
            <Text bold>Auth: </Text>
-            {agentServer.isAuthenticated ? <Text>{color('success', theme)(figures.tick)} authenticated</Text> : <Text>
+            {agentServer.isAuthenticated ? (
+              <Text>{color('success', theme)(figures.tick)} authenticated</Text>
+            ) : (
+              <Text>
                {color('warning', theme)(figures.triangleUpOutline)} may need
                authentication
-              </Text>}
-          </Box>}
+              </Text>
+            )}
+          </Box>
+        )}
      </Box>

      <Box>
        <Text dimColor>This server connects only when running the agent.</Text>
      </Box>

-      {error && <Box>
+      {error && (
+        <Box>
          <Text color="error">Error: {error}</Text>
-        </Box>}
+        </Box>
+      )}

      <Box>
-        <Select options={menuOptions} onChange={async value => {
-        switch (value) {
-          case 'auth':
-            await handleAuthenticate();
-            break;
-          case 'back':
-            onCancel();
-            break;
-        }
-      }} onCancel={onCancel} />
+        <Select
+          options={menuOptions}
+          onChange={async value => {
+            switch (value) {
+              case 'auth':
+                await handleAuthenticate()
+                break
+              case 'back':
+                onCancel()
+                break
+            }
+          }}
+          onCancel={onCancel}
+        />
      </Box>
-    </Dialog>;
+    </Dialog>
+  )
 }
--- a/src/components/mcp/MCPListPanel.tsx
+++ b/src/components/mcp/MCPListPanel.tsx
@@ -1,503 +1,361 @@
-import { c as _c } from "react/compiler-runtime";
-import figures from 'figures';
-import React, { useCallback, useState } from 'react';
-import type { CommandResultDisplay } from '../../commands.js';
-import { Box, color, Link, Text, useTheme } from '../../ink.js';
-import { useKeybindings } from '../../keybindings/useKeybinding.js';
-import type { ConfigScope } from '../../services/mcp/types.js';
-import { describeMcpConfigFilePath } from '../../services/mcp/utils.js';
-import { isDebugMode } from '../../utils/debug.js';
-import { plural } from '../../utils/stringUtils.js';
-import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
-import { Byline } from '../design-system/Byline.js';
-import { Dialog } from '../design-system/Dialog.js';
-import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js';
-import { McpParsingWarnings } from './McpParsingWarnings.js';
-import type { AgentMcpServerInfo, ServerInfo } from './types.js';
+import figures from 'figures'
+import React, { useCallback, useState } from 'react'
+import type { CommandResultDisplay } from '../../commands.js'
+import { Box, color, Link, Text, useTheme } from '../../ink.js'
+import { useKeybindings } from '../../keybindings/useKeybinding.js'
+import type { ConfigScope } from '../../services/mcp/types.js'
+import { describeMcpConfigFilePath } from '../../services/mcp/utils.js'
+import { isDebugMode } from '../../utils/debug.js'
+import { plural } from '../../utils/stringUtils.js'
+import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
+import { Byline } from '../design-system/Byline.js'
+import { Dialog } from '../design-system/Dialog.js'
+import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js'
+import { McpParsingWarnings } from './McpParsingWarnings.js'
+import type { AgentMcpServerInfo, ServerInfo } from './types.js'
+
 type Props = {
-  servers: ServerInfo[];
-  agentServers?: AgentMcpServerInfo[];
-  onSelectServer: (server: ServerInfo) => void;
-  onSelectAgentServer?: (agentServer: AgentMcpServerInfo) => void;
-  onComplete: (result?: string, options?: {
-    display?: CommandResultDisplay;
-  }) => void;
-  defaultTab?: string;
-};
-type SelectableItem = {
-  type: 'server';
-  server: ServerInfo;
-} | {
-  type: 'agent-server';
-  agentServer: AgentMcpServerInfo;
-};
+  servers: ServerInfo[]
+  agentServers?: AgentMcpServerInfo[]
+  onSelectServer: (server: ServerInfo) => void
+  onSelectAgentServer?: (agentServer: AgentMcpServerInfo) => void
+  onComplete: (
+    result?: string,
+    options?: { display?: CommandResultDisplay },
+  ) => void
+  defaultTab?: string
+}
+
+type SelectableItem =
+  | { type: 'server'; server: ServerInfo }
+  | { type: 'agent-server'; agentServer: AgentMcpServerInfo }

 // Define scope order for display (constant, outside component)
 // 'dynamic' (built-in) is rendered separately at the end
-const SCOPE_ORDER: ConfigScope[] = ['project', 'local', 'user', 'enterprise'];
+const SCOPE_ORDER: ConfigScope[] = ['project', 'local', 'user', 'enterprise']

 // Get scope heading parts (label is bold, path is grey)
-function getScopeHeading(scope: ConfigScope): {
-  label: string;
-  path?: string;
-} {
+function getScopeHeading(scope: ConfigScope): { label: string; path?: string } {
  switch (scope) {
    case 'project':
-      return {
-        label: 'Project MCPs',
-        path: describeMcpConfigFilePath(scope)
-      };
+      return { label: 'Project MCPs', path: describeMcpConfigFilePath(scope) }
    case 'user':
-      return {
-        label: 'User MCPs',
-        path: describeMcpConfigFilePath(scope)
-      };
+      return { label: 'User MCPs', path: describeMcpConfigFilePath(scope) }
    case 'local':
-      return {
-        label: 'Local MCPs',
-        path: describeMcpConfigFilePath(scope)
-      };
+      return { label: 'Local MCPs', path: describeMcpConfigFilePath(scope) }
    case 'enterprise':
-      return {
-        label: 'Enterprise MCPs'
-      };
+      return { label: 'Enterprise MCPs' }
    case 'dynamic':
-      return {
-        label: 'Built-in MCPs',
-        path: 'always available'
-      };
+      return { label: 'Built-in MCPs', path: 'always available' }
    default:
-      return {
-        label: scope
-      };
+      return { label: scope }
  }
 }

 // Group servers by scope
-function groupServersByScope(serverList: ServerInfo[]): Map<ConfigScope, ServerInfo[]> {
-  const groups = new Map<ConfigScope, ServerInfo[]>();
+function groupServersByScope(
+  serverList: ServerInfo[],
+): Map<ConfigScope, ServerInfo[]> {
+  const groups = new Map<ConfigScope, ServerInfo[]>()
  for (const server of serverList) {
-    const scope = server.scope;
+    const scope = server.scope
    if (!groups.has(scope)) {
-      groups.set(scope, []);
+      groups.set(scope, [])
    }
-    groups.get(scope)!.push(server);
+    groups.get(scope)!.push(server)
  }
  // Sort servers within each group alphabetically
  for (const [, groupServers] of groups) {
-    groupServers.sort((a, b) => a.name.localeCompare(b.name));
+    groupServers.sort((a, b) => a.name.localeCompare(b.name))
  }
-  return groups;
+  return groups
 }
-export function MCPListPanel(t0) {
-  const $ = _c(78);
-  const {
-    servers,
-    agentServers: t1,
-    onSelectServer,
-    onSelectAgentServer,
-    onComplete
-  } = t0;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = t1 === undefined ? [] : t1;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const agentServers = t2;
-  const [theme] = useTheme();
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  let t3;
-  if ($[2] !== servers) {
-    const regularServers = servers.filter(_temp);
-    t3 = groupServersByScope(regularServers);
-    $[2] = servers;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  const serversByScope = t3;
-  let t4;
-  if ($[4] !== servers) {
-    t4 = servers.filter(_temp2).sort(_temp3);
-    $[4] = servers;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const claudeAiServers = t4;
-  let t5;
-  if ($[6] !== serversByScope) {
-    t5 = (serversByScope.get("dynamic") ?? []).sort(_temp4);
-    $[6] = serversByScope;
-    $[7] = t5;
-  } else {
-    t5 = $[7];
-  }
-  const dynamicServers = t5;
-  let t6;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = getScopeHeading("dynamic");
-    $[8] = t6;
-  } else {
-    t6 = $[8];
-  }
-  const dynamicHeading = t6;
-  let items;
-  if ($[9] !== agentServers || $[10] !== claudeAiServers || $[11] !== dynamicServers || $[12] !== serversByScope) {
-    items = [];
+
+export function MCPListPanel({
+  servers,
+  agentServers = [],
+  onSelectServer,
+  onSelectAgentServer,
+  onComplete,
+}: Props): React.ReactNode {
+  const [theme] = useTheme()
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  // Non-claudeai servers grouped by scope
+  const serversByScope = React.useMemo(() => {
+    const regularServers = servers.filter(
+      s => s.client.config.type !== 'claudeai-proxy',
+    )
+    return groupServersByScope(regularServers)
+  }, [servers])
+
+  const claudeAiServers = React.useMemo(
+    () =>
+      servers
+        .filter(s => s.client.config.type === 'claudeai-proxy')
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [servers],
+  )
+
+  // Built-in (dynamic) servers - rendered last
+  const dynamicServers = React.useMemo(
+    () =>
+      (serversByScope.get('dynamic') ?? []).sort((a, b) =>
+        a.name.localeCompare(b.name),
+      ),
+    [serversByScope],
+  )
+
+  // Pre-compute dynamic heading for render
+  const dynamicHeading = getScopeHeading('dynamic')
+
+  // Build flat list of selectable items in display order
+  const selectableItems = React.useMemo(() => {
+    const items: SelectableItem[] = []
    for (const scope of SCOPE_ORDER) {
-      const scopeServers = serversByScope.get(scope) ?? [];
+      const scopeServers = serversByScope.get(scope) ?? []
      for (const server of scopeServers) {
-        items.push({
-          type: "server",
-          server
-        });
+        items.push({ type: 'server', server })
      }
    }
-    for (const server_0 of claudeAiServers) {
-      items.push({
-        type: "server",
-        server: server_0
-      });
+    for (const server of claudeAiServers) {
+      items.push({ type: 'server', server })
    }
    for (const agentServer of agentServers) {
-      items.push({
-        type: "agent-server",
-        agentServer
-      });
+      items.push({ type: 'agent-server', agentServer })
    }
-    for (const server_1 of dynamicServers) {
-      items.push({
-        type: "server",
-        server: server_1
-      });
+    // Dynamic (built-in) servers come last
+    for (const server of dynamicServers) {
+      items.push({ type: 'server', server })
    }
-    $[9] = agentServers;
-    $[10] = claudeAiServers;
-    $[11] = dynamicServers;
-    $[12] = serversByScope;
-    $[13] = items;
-  } else {
-    items = $[13];
+    return items
+  }, [serversByScope, claudeAiServers, agentServers, dynamicServers])
+
+  const handleCancel = useCallback((): void => {
+    onComplete('MCP dialog dismissed', {
+      display: 'system',
+    })
+  }, [onComplete])
+
+  const handleSelect = useCallback((): void => {
+    const item = selectableItems[selectedIndex]
+    if (!item) return
+    if (item.type === 'server') {
+      onSelectServer(item.server)
+    } else if (item.type === 'agent-server' && onSelectAgentServer) {
+      onSelectAgentServer(item.agentServer)
+    }
+  }, [selectableItems, selectedIndex, onSelectServer, onSelectAgentServer])
+
+  // Use configurable keybindings for navigation and selection
+  useKeybindings(
+    {
+      'confirm:previous': () =>
+        setSelectedIndex(prev =>
+          prev === 0 ? selectableItems.length - 1 : prev - 1,
+        ),
+      'confirm:next': () =>
+        setSelectedIndex(prev =>
+          prev === selectableItems.length - 1 ? 0 : prev + 1,
+        ),
+      'confirm:yes': handleSelect,
+      'confirm:no': handleCancel,
+    },
+    { context: 'Confirmation' },
+  )
+
+  // Build index lookup for each server
+  const getServerIndex = (server: ServerInfo): number => {
+    return selectableItems.findIndex(
+      item => item.type === 'server' && item.server === server,
+    )
  }
-  const selectableItems = items;
-  let t7;
-  if ($[14] !== onComplete) {
-    t7 = () => {
-      onComplete("MCP dialog dismissed", {
-        display: "system"
-      });
-    };
-    $[14] = onComplete;
-    $[15] = t7;
-  } else {
-    t7 = $[15];
+
+  const getAgentServerIndex = (agentServer: AgentMcpServerInfo): number => {
+    return selectableItems.findIndex(
+      item => item.type === 'agent-server' && item.agentServer === agentServer,
+    )
  }
-  const handleCancel = t7;
-  let t8;
-  if ($[16] !== onSelectAgentServer || $[17] !== onSelectServer || $[18] !== selectableItems || $[19] !== selectedIndex) {
-    t8 = () => {
-      const item = selectableItems[selectedIndex];
-      if (!item) {
-        return;
-      }
-      if (item.type === "server") {
-        onSelectServer(item.server);
-      } else {
-        if (item.type === "agent-server" && onSelectAgentServer) {
-          onSelectAgentServer(item.agentServer);
-        }
-      }
-    };
-    $[16] = onSelectAgentServer;
-    $[17] = onSelectServer;
-    $[18] = selectableItems;
-    $[19] = selectedIndex;
-    $[20] = t8;
-  } else {
-    t8 = $[20];
-  }
-  const handleSelect = t8;
-  let t10;
-  let t9;
-  if ($[21] !== selectableItems) {
-    t9 = () => setSelectedIndex(prev => prev === 0 ? selectableItems.length - 1 : prev - 1);
-    t10 = () => setSelectedIndex(prev_0 => prev_0 === selectableItems.length - 1 ? 0 : prev_0 + 1);
-    $[21] = selectableItems;
-    $[22] = t10;
-    $[23] = t9;
-  } else {
-    t10 = $[22];
-    t9 = $[23];
-  }
-  let t11;
-  if ($[24] !== handleCancel || $[25] !== handleSelect || $[26] !== t10 || $[27] !== t9) {
-    t11 = {
-      "confirm:previous": t9,
-      "confirm:next": t10,
-      "confirm:yes": handleSelect,
-      "confirm:no": handleCancel
-    };
-    $[24] = handleCancel;
-    $[25] = handleSelect;
-    $[26] = t10;
-    $[27] = t9;
-    $[28] = t11;
-  } else {
-    t11 = $[28];
-  }
-  let t12;
-  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = {
-      context: "Confirmation"
-    };
-    $[29] = t12;
-  } else {
-    t12 = $[29];
-  }
-  useKeybindings(t11, t12);
-  let t13;
-  if ($[30] !== selectableItems) {
-    t13 = server_2 => selectableItems.findIndex(item_0 => item_0.type === "server" && item_0.server === server_2);
-    $[30] = selectableItems;
-    $[31] = t13;
-  } else {
-    t13 = $[31];
-  }
-  const getServerIndex = t13;
-  let t14;
-  if ($[32] !== selectableItems) {
-    t14 = agentServer_0 => selectableItems.findIndex(item_1 => item_1.type === "agent-server" && item_1.agentServer === agentServer_0);
-    $[32] = selectableItems;
-    $[33] = t14;
-  } else {
-    t14 = $[33];
-  }
-  const getAgentServerIndex = t14;
-  let t15;
-  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = isDebugMode();
-    $[34] = t15;
-  } else {
-    t15 = $[34];
-  }
-  const debugMode = t15;
-  let t16;
-  if ($[35] !== servers) {
-    t16 = servers.some(_temp5);
-    $[35] = servers;
-    $[36] = t16;
-  } else {
-    t16 = $[36];
-  }
-  const hasFailedClients = t16;
+
+  const debugMode = isDebugMode()
+  const hasFailedClients = servers.some(s => s.client.type === 'failed')
+
  if (servers.length === 0 && agentServers.length === 0) {
-    return null;
+    return null
  }
-  let t17;
-  if ($[37] !== getServerIndex || $[38] !== selectedIndex || $[39] !== theme) {
-    t17 = server_3 => {
-      const index = getServerIndex(server_3);
-      const isSelected = selectedIndex === index;
-      let statusIcon;
-      let statusText;
-      if (server_3.client.type === "disabled") {
-        statusIcon = color("inactive", theme)(figures.radioOff);
-        statusText = "disabled";
+
+  const renderServerItem = (server: ServerInfo): React.ReactNode => {
+    const index = getServerIndex(server)
+    const isSelected = selectedIndex === index
+    let statusIcon = ''
+    let statusText = ''
+
+    if (server.client.type === 'disabled') {
+      statusIcon = color('inactive', theme)(figures.radioOff)
+      statusText = 'disabled'
+    } else if (server.client.type === 'connected') {
+      statusIcon = color('success', theme)(figures.tick)
+      statusText = 'connected'
+    } else if (server.client.type === 'pending') {
+      statusIcon = color('inactive', theme)(figures.radioOff)
+      const { reconnectAttempt, maxReconnectAttempts } = server.client
+      if (reconnectAttempt && maxReconnectAttempts) {
+        statusText = `reconnecting (${reconnectAttempt}/${maxReconnectAttempts})…`
      } else {
-        if (server_3.client.type === "connected") {
-          statusIcon = color("success", theme)(figures.tick);
-          statusText = "connected";
-        } else {
-          if (server_3.client.type === "pending") {
-            statusIcon = color("inactive", theme)(figures.radioOff);
-            const {
-              reconnectAttempt,
-              maxReconnectAttempts
-            } = server_3.client;
-            if (reconnectAttempt && maxReconnectAttempts) {
-              statusText = `reconnecting (${reconnectAttempt}/${maxReconnectAttempts})…`;
-            } else {
-              statusText = "connecting\u2026";
-            }
-          } else {
-            if (server_3.client.type === "needs-auth") {
-              statusIcon = color("warning", theme)(figures.triangleUpOutline);
-              statusText = "needs authentication";
-            } else {
-              statusIcon = color("error", theme)(figures.cross);
-              statusText = "failed";
-            }
-          }
-        }
+        statusText = 'connecting…'
      }
-      return <Box key={`${server_3.name}-${index}`}><Text color={isSelected ? "suggestion" : undefined}>{isSelected ? `${figures.pointer} ` : "  "}</Text><Text color={isSelected ? "suggestion" : undefined}>{server_3.name}</Text><Text dimColor={!isSelected}> · {statusIcon} </Text><Text dimColor={!isSelected}>{statusText}</Text></Box>;
-    };
-    $[37] = getServerIndex;
-    $[38] = selectedIndex;
-    $[39] = theme;
-    $[40] = t17;
-  } else {
-    t17 = $[40];
+    } else if (server.client.type === 'needs-auth') {
+      statusIcon = color('warning', theme)(figures.triangleUpOutline)
+      statusText = 'needs authentication'
+    } else {
+      statusIcon = color('error', theme)(figures.cross)
+      statusText = 'failed'
+    }
+
+    return (
+      <Box key={`${server.name}-${index}`}>
+        <Text color={isSelected ? 'suggestion' : undefined}>
+          {isSelected ? `${figures.pointer} ` : '  '}
+        </Text>
+        <Text color={isSelected ? 'suggestion' : undefined}>{server.name}</Text>
+        <Text dimColor={!isSelected}> · {statusIcon} </Text>
+        <Text dimColor={!isSelected}>{statusText}</Text>
+      </Box>
+    )
  }
-  const renderServerItem = t17;
-  let t18;
-  if ($[41] !== getAgentServerIndex || $[42] !== selectedIndex || $[43] !== theme) {
-    t18 = agentServer_1 => {
-      const index_0 = getAgentServerIndex(agentServer_1);
-      const isSelected_0 = selectedIndex === index_0;
-      const statusIcon_0 = agentServer_1.needsAuth ? color("warning", theme)(figures.triangleUpOutline) : color("inactive", theme)(figures.radioOff);
-      const statusText_0 = agentServer_1.needsAuth ? "may need auth" : "agent-only";
-      return <Box key={`agent-${agentServer_1.name}-${index_0}`}><Text color={isSelected_0 ? "suggestion" : undefined}>{isSelected_0 ? `${figures.pointer} ` : "  "}</Text><Text color={isSelected_0 ? "suggestion" : undefined}>{agentServer_1.name}</Text><Text dimColor={!isSelected_0}> · {statusIcon_0} </Text><Text dimColor={!isSelected_0}>{statusText_0}</Text></Box>;
-    };
-    $[41] = getAgentServerIndex;
-    $[42] = selectedIndex;
-    $[43] = theme;
-    $[44] = t18;
-  } else {
-    t18 = $[44];
+
+  const renderAgentServerItem = (
+    agentServer: AgentMcpServerInfo,
+  ): React.ReactNode => {
+    const index = getAgentServerIndex(agentServer)
+    const isSelected = selectedIndex === index
+    const statusIcon = agentServer.needsAuth
+      ? color('warning', theme)(figures.triangleUpOutline)
+      : color('inactive', theme)(figures.radioOff)
+    const statusText = agentServer.needsAuth ? 'may need auth' : 'agent-only'
+
+    return (
+      <Box key={`agent-${agentServer.name}-${index}`}>
+        <Text color={isSelected ? 'suggestion' : undefined}>
+          {isSelected ? `${figures.pointer} ` : '  '}
+        </Text>
+        <Text color={isSelected ? 'suggestion' : undefined}>
+          {agentServer.name}
+        </Text>
+        <Text dimColor={!isSelected}> · {statusIcon} </Text>
+        <Text dimColor={!isSelected}>{statusText}</Text>
+      </Box>
+    )
  }
-  const renderAgentServerItem = t18;
-  const totalServers = servers.length + agentServers.length;
-  let t19;
-  if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
-    t19 = <McpParsingWarnings />;
-    $[45] = t19;
-  } else {
-    t19 = $[45];
-  }
-  let t20;
-  if ($[46] !== totalServers) {
-    t20 = plural(totalServers, "server");
-    $[46] = totalServers;
-    $[47] = t20;
-  } else {
-    t20 = $[47];
-  }
-  const t21 = `${totalServers} ${t20}`;
-  let t22;
-  if ($[48] !== renderServerItem || $[49] !== serversByScope) {
-    t22 = SCOPE_ORDER.map(scope_0 => {
-      const scopeServers_0 = serversByScope.get(scope_0);
-      if (!scopeServers_0 || scopeServers_0.length === 0) {
-        return null;
-      }
-      const heading = getScopeHeading(scope_0);
-      return <Box key={scope_0} flexDirection="column" marginBottom={1}><Box paddingLeft={2}><Text bold={true}>{heading.label}</Text>{heading.path && <Text dimColor={true}> ({heading.path})</Text>}</Box>{scopeServers_0.map(server_4 => renderServerItem(server_4))}</Box>;
-    });
-    $[48] = renderServerItem;
-    $[49] = serversByScope;
-    $[50] = t22;
-  } else {
-    t22 = $[50];
-  }
-  let t23;
-  if ($[51] !== claudeAiServers || $[52] !== renderServerItem) {
-    t23 = claudeAiServers.length > 0 && <Box flexDirection="column" marginBottom={1}><Box paddingLeft={2}><Text bold={true}>claude.ai</Text></Box>{claudeAiServers.map(server_5 => renderServerItem(server_5))}</Box>;
-    $[51] = claudeAiServers;
-    $[52] = renderServerItem;
-    $[53] = t23;
-  } else {
-    t23 = $[53];
-  }
-  let t24;
-  if ($[54] !== agentServers || $[55] !== renderAgentServerItem) {
-    t24 = agentServers.length > 0 && <Box flexDirection="column" marginBottom={1}><Box paddingLeft={2}><Text bold={true}>Agent MCPs</Text></Box>{[...new Set(agentServers.flatMap(_temp6))].map(agentName => <Box key={agentName} flexDirection="column" marginTop={1}><Box paddingLeft={2}><Text dimColor={true}>@{agentName}</Text></Box>{agentServers.filter(s_3 => s_3.sourceAgents.includes(agentName)).map(agentServer_2 => renderAgentServerItem(agentServer_2))}</Box>)}</Box>;
-    $[54] = agentServers;
-    $[55] = renderAgentServerItem;
-    $[56] = t24;
-  } else {
-    t24 = $[56];
-  }
-  let t25;
-  if ($[57] !== dynamicServers || $[58] !== renderServerItem) {
-    t25 = dynamicServers.length > 0 && <Box flexDirection="column" marginBottom={1}><Box paddingLeft={2}><Text bold={true}>{dynamicHeading.label}</Text>{dynamicHeading.path && <Text dimColor={true}> ({dynamicHeading.path})</Text>}</Box>{dynamicServers.map(server_6 => renderServerItem(server_6))}</Box>;
-    $[57] = dynamicServers;
-    $[58] = renderServerItem;
-    $[59] = t25;
-  } else {
-    t25 = $[59];
-  }
-  let t26;
-  if ($[60] !== hasFailedClients) {
-    t26 = hasFailedClients && <Text dimColor={true}>{debugMode ? "\u203B Error logs shown inline with --debug" : "\u203B Run claude --debug to see error logs"}</Text>;
-    $[60] = hasFailedClients;
-    $[61] = t26;
-  } else {
-    t26 = $[61];
-  }
-  let t27;
-  if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-    t27 = <Text dimColor={true}><Link url="https://code.claude.com/docs/en/mcp">https://code.claude.com/docs/en/mcp</Link>{" "}for help</Text>;
-    $[62] = t27;
-  } else {
-    t27 = $[62];
-  }
-  let t28;
-  if ($[63] !== t26) {
-    t28 = <Box flexDirection="column">{t26}{t27}</Box>;
-    $[63] = t26;
-    $[64] = t28;
-  } else {
-    t28 = $[64];
-  }
-  let t29;
-  if ($[65] !== t22 || $[66] !== t23 || $[67] !== t24 || $[68] !== t25 || $[69] !== t28) {
-    t29 = <Box flexDirection="column">{t22}{t23}{t24}{t25}{t28}</Box>;
-    $[65] = t22;
-    $[66] = t23;
-    $[67] = t24;
-    $[68] = t25;
-    $[69] = t28;
-    $[70] = t29;
-  } else {
-    t29 = $[70];
-  }
-  let t30;
-  if ($[71] !== handleCancel || $[72] !== t21 || $[73] !== t29) {
-    t30 = <Dialog title="Manage MCP servers" subtitle={t21} onCancel={handleCancel} hideInputGuide={true}>{t29}</Dialog>;
-    $[71] = handleCancel;
-    $[72] = t21;
-    $[73] = t29;
-    $[74] = t30;
-  } else {
-    t30 = $[74];
-  }
-  let t31;
-  if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
-    t31 = <Box paddingX={1}><Text dimColor={true} italic={true}><Byline><KeyboardShortcutHint shortcut={"\u2191\u2193"} action="navigate" /><KeyboardShortcutHint shortcut="Enter" action="confirm" /><ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="cancel" /></Byline></Text></Box>;
-    $[75] = t31;
-  } else {
-    t31 = $[75];
-  }
-  let t32;
-  if ($[76] !== t30) {
-    t32 = <Box flexDirection="column">{t19}{t30}{t31}</Box>;
-    $[76] = t30;
-    $[77] = t32;
-  } else {
-    t32 = $[77];
-  }
-  return t32;
-}
-function _temp6(s_2) {
-  return s_2.sourceAgents;
-}
-function _temp5(s_1) {
-  return s_1.client.type === "failed";
-}
-function _temp4(a_0, b_0) {
-  return a_0.name.localeCompare(b_0.name);
-}
-function _temp3(a, b) {
-  return a.name.localeCompare(b.name);
-}
-function _temp2(s_0) {
-  return s_0.client.config.type === "claudeai-proxy";
-}
-function _temp(s) {
-  return s.client.config.type !== "claudeai-proxy";
+
+  const totalServers = servers.length + agentServers.length
+
+  return (
+    <Box flexDirection="column">
+      <McpParsingWarnings />
+
+      <Dialog
+        title="Manage MCP servers"
+        subtitle={`${totalServers} ${plural(totalServers, 'server')}`}
+        onCancel={handleCancel}
+        hideInputGuide
+      >
+        <Box flexDirection="column">
+          {/* Regular servers grouped by scope */}
+          {SCOPE_ORDER.map(scope => {
+            const scopeServers = serversByScope.get(scope)
+            if (!scopeServers || scopeServers.length === 0) return null
+            const heading = getScopeHeading(scope)
+            return (
+              <Box key={scope} flexDirection="column" marginBottom={1}>
+                <Box paddingLeft={2}>
+                  <Text bold>{heading.label}</Text>
+                  {heading.path && <Text dimColor> ({heading.path})</Text>}
+                </Box>
+                {scopeServers.map(server => renderServerItem(server))}
+              </Box>
+            )
+          })}
+
+          {/* Claude.ai servers section */}
+          {claudeAiServers.length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Box paddingLeft={2}>
+                <Text bold>claude.ai</Text>
+              </Box>
+              {claudeAiServers.map(server => renderServerItem(server))}
+            </Box>
+          )}
+
+          {/* Agent servers section - grouped by source agent */}
+          {agentServers.length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Box paddingLeft={2}>
+                <Text bold>Agent MCPs</Text>
+              </Box>
+              {/* Group servers by source agent */}
+              {[...new Set(agentServers.flatMap(s => s.sourceAgents))].map(
+                agentName => (
+                  <Box key={agentName} flexDirection="column" marginTop={1}>
+                    <Box paddingLeft={2}>
+                      <Text dimColor>@{agentName}</Text>
+                    </Box>
+                    {agentServers
+                      .filter(s => s.sourceAgents.includes(agentName))
+                      .map(agentServer => renderAgentServerItem(agentServer))}
+                  </Box>
+                ),
+              )}
+            </Box>
+          )}
+
+          {/* Built-in (dynamic) servers section - always last */}
+          {dynamicServers.length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Box paddingLeft={2}>
+                <Text bold>{dynamicHeading.label}</Text>
+                {dynamicHeading.path && (
+                  <Text dimColor> ({dynamicHeading.path})</Text>
+                )}
+              </Box>
+              {dynamicServers.map(server => renderServerItem(server))}
+            </Box>
+          )}
+
+          {/* Footer info */}
+          <Box flexDirection="column">
+            {hasFailedClients && (
+              <Text dimColor>
+                {debugMode
+                  ? '※ Error logs shown inline with --debug'
+                  : '※ Run claude --debug to see error logs'}
+              </Text>
+            )}
+            <Text dimColor>
+              <Link url="https://code.claude.com/docs/en/mcp">
+                https://code.claude.com/docs/en/mcp
+              </Link>{' '}
+              for help
+            </Text>
+          </Box>
+        </Box>
+      </Dialog>
+
+      {/* Custom footer with navigation hint */}
+      <Box paddingX={1}>
+        <Text dimColor italic>
+          <Byline>
+            <KeyboardShortcutHint shortcut="↑↓" action="navigate" />
+            <KeyboardShortcutHint shortcut="Enter" action="confirm" />
+            <ConfigurableShortcutHint
+              action="confirm:no"
+              context="Confirmation"
+              fallback="Esc"
+              description="cancel"
+            />
+          </Byline>
+        </Text>
+      </Box>
+    </Box>
+  )
 }
--- a/src/components/mcp/MCPReconnect.tsx
+++ b/src/components/mcp/MCPReconnect.tsx
@@ -1,166 +1,105 @@
-import { c as _c } from "react/compiler-runtime";
-import figures from 'figures';
-import React, { useEffect, useState } from 'react';
-import type { CommandResultDisplay } from '../../commands.js';
-import { Box, color, Text, useTheme } from '../../ink.js';
-import { useMcpReconnect } from '../../services/mcp/MCPConnectionManager.js';
-import { useAppStateStore } from '../../state/AppState.js';
-import { Spinner } from '../Spinner.js';
+import figures from 'figures'
+import React, { useEffect, useState } from 'react'
+import type { CommandResultDisplay } from '../../commands.js'
+import { Box, color, Text, useTheme } from '../../ink.js'
+import { useMcpReconnect } from '../../services/mcp/MCPConnectionManager.js'
+import { useAppStateStore } from '../../state/AppState.js'
+import { Spinner } from '../Spinner.js'
+
 type Props = {
-  serverName: string;
-  onComplete: (result?: string, options?: {
-    display?: CommandResultDisplay;
-  }) => void;
-};
-export function MCPReconnect(t0) {
-  const $ = _c(25);
-  const {
-    serverName,
-    onComplete
-  } = t0;
-  const [theme] = useTheme();
-  const store = useAppStateStore();
-  const reconnectMcpServer = useMcpReconnect();
-  const [isReconnecting, setIsReconnecting] = useState(true);
-  const [error, setError] = useState(null);
-  let t1;
-  let t2;
-  if ($[0] !== onComplete || $[1] !== reconnectMcpServer || $[2] !== serverName || $[3] !== store) {
-    t1 = () => {
-      const attemptReconnect = async function attemptReconnect() {
-        ;
-        try {
-          const server = store.getState().mcp.clients.find(c => c.name === serverName);
-          if (!server) {
-            setError(`MCP server "${serverName}" not found`);
-            setIsReconnecting(false);
-            onComplete(`MCP server "${serverName}" not found`);
-            return;
-          }
-          const result = await reconnectMcpServer(serverName);
-          bb43: switch (result.client.type) {
-            case "connected":
-              {
-                setIsReconnecting(false);
-                onComplete(`Successfully reconnected to ${serverName}`);
-                break bb43;
-              }
-            case "needs-auth":
-              {
-                setError(`${serverName} requires authentication`);
-                setIsReconnecting(false);
-                onComplete(`${serverName} requires authentication. Use /mcp to authenticate.`);
-                break bb43;
-              }
-            case "pending":
-            case "failed":
-            case "disabled":
-              {
-                setError(`Failed to reconnect to ${serverName}`);
-                setIsReconnecting(false);
-                onComplete(`Failed to reconnect to ${serverName}`);
-              }
-          }
-        } catch (t3) {
-          const err = t3;
-          const errorMessage = err instanceof Error ? err.message : String(err);
-          setError(errorMessage);
-          setIsReconnecting(false);
-          onComplete(`Error: ${errorMessage}`);
-        }
-      };
-      attemptReconnect();
-    };
-    t2 = [serverName, reconnectMcpServer, store, onComplete];
-    $[0] = onComplete;
-    $[1] = reconnectMcpServer;
-    $[2] = serverName;
-    $[3] = store;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t1 = $[4];
-    t2 = $[5];
-  }
-  useEffect(t1, t2);
-  if (isReconnecting) {
-    let t3;
-    if ($[6] !== serverName) {
-      t3 = <Text color="text">Reconnecting to <Text bold={true}>{serverName}</Text></Text>;
-      $[6] = serverName;
-      $[7] = t3;
-    } else {
-      t3 = $[7];
-    }
-    let t4;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = <Box><Spinner /><Text> Establishing connection to MCP server</Text></Box>;
-      $[8] = t4;
-    } else {
-      t4 = $[8];
-    }
-    let t5;
-    if ($[9] !== t3) {
-      t5 = <Box flexDirection="column" gap={1} padding={1}>{t3}{t4}</Box>;
-      $[9] = t3;
-      $[10] = t5;
-    } else {
-      t5 = $[10];
-    }
-    return t5;
-  }
-  if (error) {
-    let t3;
-    if ($[11] !== theme) {
-      t3 = color("error", theme)(figures.cross);
-      $[11] = theme;
-      $[12] = t3;
-    } else {
-      t3 = $[12];
-    }
-    let t4;
-    if ($[13] !== t3) {
-      t4 = <Text>{t3} </Text>;
-      $[13] = t3;
-      $[14] = t4;
-    } else {
-      t4 = $[14];
-    }
-    let t5;
-    if ($[15] !== serverName) {
-      t5 = <Text color="error">Failed to reconnect to {serverName}</Text>;
-      $[15] = serverName;
-      $[16] = t5;
-    } else {
-      t5 = $[16];
-    }
-    let t6;
-    if ($[17] !== t4 || $[18] !== t5) {
-      t6 = <Box>{t4}{t5}</Box>;
-      $[17] = t4;
-      $[18] = t5;
-      $[19] = t6;
-    } else {
-      t6 = $[19];
-    }
-    let t7;
-    if ($[20] !== error) {
-      t7 = <Text dimColor={true}>Error: {error}</Text>;
-      $[20] = error;
-      $[21] = t7;
-    } else {
-      t7 = $[21];
-    }
-    let t8;
-    if ($[22] !== t6 || $[23] !== t7) {
-      t8 = <Box flexDirection="column" gap={1} padding={1}>{t6}{t7}</Box>;
-      $[22] = t6;
-      $[23] = t7;
-      $[24] = t8;
-    } else {
-      t8 = $[24];
-    }
-    return t8;
-  }
-  return null;
+  serverName: string
+  onComplete: (
+    result?: string,
+    options?: { display?: CommandResultDisplay },
+  ) => void
+}
+
+export function MCPReconnect({
+  serverName,
+  onComplete,
+}: Props): React.ReactNode {
+  const [theme] = useTheme()
+  const store = useAppStateStore()
+  const reconnectMcpServer = useMcpReconnect()
+  const [isReconnecting, setIsReconnecting] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function attemptReconnect() {
+      try {
+        // Check if server exists. Read via store.getState() instead of a
+        // reactive selector so this effect does not re-fire when
+        // reconnectMcpServer updates mcp.clients via onConnectionAttempt.
+        const server = store
+          .getState()
+          .mcp.clients.find(c => c.name === serverName)
+        if (!server) {
+          setError(`MCP server "${serverName}" not found`)
+          setIsReconnecting(false)
+          onComplete(`MCP server "${serverName}" not found`)
+          return
+        }
+
+        // Attempt reconnection
+        const result = await reconnectMcpServer(serverName)
+
+        switch (result.client.type) {
+          case 'connected':
+            setIsReconnecting(false)
+            onComplete(`Successfully reconnected to ${serverName}`)
+            break
+          case 'needs-auth':
+            setError(`${serverName} requires authentication`)
+            setIsReconnecting(false)
+            onComplete(
+              `${serverName} requires authentication. Use /mcp to authenticate.`,
+            )
+            break
+          case 'pending':
+          case 'failed':
+          case 'disabled':
+            setError(`Failed to reconnect to ${serverName}`)
+            setIsReconnecting(false)
+            onComplete(`Failed to reconnect to ${serverName}`)
+            break
+        }
+      } catch (err) {
+        // Only catch actual errors (like server not found)
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        setError(errorMessage)
+        setIsReconnecting(false)
+        onComplete(`Error: ${errorMessage}`)
+      }
+    }
+
+    void attemptReconnect()
+  }, [serverName, reconnectMcpServer, store, onComplete])
+
+  if (isReconnecting) {
+    return (
+      <Box flexDirection="column" gap={1} padding={1}>
+        <Text color="text">
+          Reconnecting to <Text bold>{serverName}</Text>
+        </Text>
+        <Box>
+          <Spinner />
+          <Text> Establishing connection to MCP server</Text>
+        </Box>
+      </Box>
+    )
+  }
+
+  if (error) {
+    return (
+      <Box flexDirection="column" gap={1} padding={1}>
+        <Box>
+          <Text>{color('error', theme)(figures.cross)} </Text>
+          <Text color="error">Failed to reconnect to {serverName}</Text>
+        </Box>
+        <Text dimColor>Error: {error}</Text>
+      </Box>
+    )
+  }
+
+  return null
 }
--- a/src/components/mcp/MCPRemoteServerMenu.tsx
+++ b/src/components/mcp/MCPRemoteServerMenu.tsx
--- a/src/components/mcp/MCPSettings.tsx
+++ b/src/components/mcp/MCPSettings.tsx
@@ -1,397 +1,247 @@
-import { c as _c } from "react/compiler-runtime";
-import React, { useEffect, useMemo } from 'react';
-import type { CommandResultDisplay } from '../../commands.js';
-import { ClaudeAuthProvider } from '../../services/mcp/auth.js';
-import type { McpClaudeAIProxyServerConfig, McpHTTPServerConfig, McpSSEServerConfig, McpStdioServerConfig } from '../../services/mcp/types.js';
-import { extractAgentMcpServers, filterToolsByServer } from '../../services/mcp/utils.js';
-import { useAppState } from '../../state/AppState.js';
-import { getSessionIngressAuthToken } from '../../utils/sessionIngressAuth.js';
-import { MCPAgentServerMenu } from './MCPAgentServerMenu.js';
-import { MCPListPanel } from './MCPListPanel.js';
-import { MCPRemoteServerMenu } from './MCPRemoteServerMenu.js';
-import { MCPStdioServerMenu } from './MCPStdioServerMenu.js';
-import { MCPToolDetailView } from './MCPToolDetailView.js';
-import { MCPToolListView } from './MCPToolListView.js';
-import type { AgentMcpServerInfo, MCPViewState, ServerInfo } from './types.js';
+import React, { useEffect, useMemo } from 'react'
+import type { CommandResultDisplay } from '../../commands.js'
+import { ClaudeAuthProvider } from '../../services/mcp/auth.js'
+import type {
+  McpClaudeAIProxyServerConfig,
+  McpHTTPServerConfig,
+  McpSSEServerConfig,
+  McpStdioServerConfig,
+} from '../../services/mcp/types.js'
+import {
+  extractAgentMcpServers,
+  filterToolsByServer,
+} from '../../services/mcp/utils.js'
+import { useAppState } from '../../state/AppState.js'
+import { getSessionIngressAuthToken } from '../../utils/sessionIngressAuth.js'
+import { MCPAgentServerMenu } from './MCPAgentServerMenu.js'
+import { MCPListPanel } from './MCPListPanel.js'
+import { MCPRemoteServerMenu } from './MCPRemoteServerMenu.js'
+import { MCPStdioServerMenu } from './MCPStdioServerMenu.js'
+import { MCPToolDetailView } from './MCPToolDetailView.js'
+import { MCPToolListView } from './MCPToolListView.js'
+import type { AgentMcpServerInfo, MCPViewState, ServerInfo } from './types.js'
+
 type Props = {
-  onComplete: (result?: string, options?: {
-    display?: CommandResultDisplay;
-  }) => void;
-};
-export function MCPSettings(t0) {
-  const $ = _c(66);
-  const {
-    onComplete
-  } = t0;
-  const mcp = useAppState(_temp);
-  const agentDefinitions = useAppState(_temp2);
-  const mcpClients = mcp.clients;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      type: "list"
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const [viewState, setViewState] = React.useState(t1);
-  let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = [];
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const [servers, setServers] = React.useState(t2);
-  let t3;
-  if ($[2] !== agentDefinitions.allAgents) {
-    t3 = extractAgentMcpServers(agentDefinitions.allAgents);
-    $[2] = agentDefinitions.allAgents;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  const agentMcpServers = t3;
-  let t4;
-  if ($[4] !== mcpClients) {
-    t4 = mcpClients.filter(_temp3).sort(_temp4);
-    $[4] = mcpClients;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const filteredClients = t4;
-  let t5;
-  let t6;
-  if ($[6] !== filteredClients || $[7] !== mcp.tools) {
-    t5 = () => {
-      let cancelled = false;
-      const prepareServers = async function prepareServers() {
-        const serverInfos = await Promise.all(filteredClients.map(async client_0 => {
-          const scope = client_0.config.scope;
-          const isSSE = client_0.config.type === "sse";
-          const isHTTP = client_0.config.type === "http";
-          const isClaudeAIProxy = client_0.config.type === "claudeai-proxy";
-          let isAuthenticated = undefined;
+  onComplete: (
+    result?: string,
+    options?: { display?: CommandResultDisplay },
+  ) => void
+}
+
+export function MCPSettings({ onComplete }: Props): React.ReactNode {
+  const mcp = useAppState(s => s.mcp)
+  const agentDefinitions = useAppState(s => s.agentDefinitions)
+  const mcpClients = mcp.clients
+  const [viewState, setViewState] = React.useState<MCPViewState>({
+    type: 'list',
+  })
+  const [servers, setServers] = React.useState<ServerInfo[]>([])
+
+  // Extract agent-specific MCP servers from agent definitions
+  const agentMcpServers = useMemo(
+    () => extractAgentMcpServers(agentDefinitions.allAgents),
+    [agentDefinitions.allAgents],
+  )
+
+  const filteredClients = React.useMemo(
+    () =>
+      mcpClients
+        .filter(client => client.name !== 'ide')
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [mcpClients],
+  )
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function prepareServers() {
+      const serverInfos = await Promise.all(
+        filteredClients.map(async client => {
+          const scope = client.config.scope
+          const isSSE = client.config.type === 'sse'
+          const isHTTP = client.config.type === 'http'
+          const isClaudeAIProxy = client.config.type === 'claudeai-proxy'
+          let isAuthenticated: boolean | undefined = undefined
+
          if (isSSE || isHTTP) {
-            const authProvider = new ClaudeAuthProvider(client_0.name, client_0.config as McpSSEServerConfig | McpHTTPServerConfig);
-            const tokens = await authProvider.tokens();
-            const hasSessionAuth = getSessionIngressAuthToken() !== null && client_0.type === "connected";
-            const hasToolsAndConnected = client_0.type === "connected" && filterToolsByServer(mcp.tools, client_0.name).length > 0;
-            isAuthenticated = Boolean(tokens) || hasSessionAuth || hasToolsAndConnected;
+            const authProvider = new ClaudeAuthProvider(
+              client.name,
+              client.config as McpSSEServerConfig | McpHTTPServerConfig,
+            )
+            const tokens = await authProvider.tokens()
+            // Server is authenticated if:
+            // 1. It has OAuth tokens, OR
+            // 2. It's connected via session auth (has session token and is connected), OR
+            // 3. It's connected and has tools (meaning it's working, regardless of auth method)
+            const hasSessionAuth =
+              getSessionIngressAuthToken() !== null &&
+              client.type === 'connected'
+            const hasToolsAndConnected =
+              client.type === 'connected' &&
+              filterToolsByServer(mcp.tools, client.name).length > 0
+            isAuthenticated =
+              Boolean(tokens) || hasSessionAuth || hasToolsAndConnected
          }
+
          const baseInfo = {
-            name: client_0.name,
-            client: client_0,
-            scope
-          };
+            name: client.name,
+            client,
+            scope,
+          }
+
          if (isClaudeAIProxy) {
            return {
              ...baseInfo,
-              transport: "claudeai-proxy" as const,
+              transport: 'claudeai-proxy' as const,
              isAuthenticated: false,
-              config: client_0.config as McpClaudeAIProxyServerConfig
-            };
+              config: client.config as McpClaudeAIProxyServerConfig,
+            }
+          } else if (isSSE) {
+            return {
+              ...baseInfo,
+              transport: 'sse' as const,
+              isAuthenticated,
+              config: client.config as McpSSEServerConfig,
+            }
+          } else if (isHTTP) {
+            return {
+              ...baseInfo,
+              transport: 'http' as const,
+              isAuthenticated,
+              config: client.config as McpHTTPServerConfig,
+            }
          } else {
-            if (isSSE) {
-              return {
-                ...baseInfo,
-                transport: "sse" as const,
-                isAuthenticated,
-                config: client_0.config as McpSSEServerConfig
-              };
-            } else {
-              if (isHTTP) {
-                return {
-                  ...baseInfo,
-                  transport: "http" as const,
-                  isAuthenticated,
-                  config: client_0.config as McpHTTPServerConfig
-                };
-              } else {
-                return {
-                  ...baseInfo,
-                  transport: "stdio" as const,
-                  config: client_0.config as McpStdioServerConfig
-                };
-              }
+            return {
+              ...baseInfo,
+              transport: 'stdio' as const,
+              config: client.config as McpStdioServerConfig,
            }
          }
-        }));
-        if (cancelled) {
-          return;
-        }
-        setServers(serverInfos);
-      };
-      prepareServers();
-      return () => {
-        cancelled = true;
-      };
-    };
-    t6 = [filteredClients, mcp.tools];
-    $[6] = filteredClients;
-    $[7] = mcp.tools;
-    $[8] = t5;
-    $[9] = t6;
-  } else {
-    t5 = $[8];
-    t6 = $[9];
-  }
-  React.useEffect(t5, t6);
-  let t7;
-  let t8;
-  if ($[10] !== agentMcpServers.length || $[11] !== filteredClients.length || $[12] !== onComplete || $[13] !== servers.length) {
-    t7 = () => {
-      if (servers.length === 0 && filteredClients.length > 0) {
-        return;
-      }
-      if (servers.length === 0 && agentMcpServers.length === 0) {
-        onComplete("No MCP servers configured. Please run /doctor if this is unexpected. Otherwise, run `claude mcp --help` or visit https://code.claude.com/docs/en/mcp to learn more.");
-      }
-    };
-    t8 = [servers.length, filteredClients.length, agentMcpServers.length, onComplete];
-    $[10] = agentMcpServers.length;
-    $[11] = filteredClients.length;
-    $[12] = onComplete;
-    $[13] = servers.length;
-    $[14] = t7;
-    $[15] = t8;
-  } else {
-    t7 = $[14];
-    t8 = $[15];
-  }
-  useEffect(t7, t8);
+        }),
+      )
+
+      if (cancelled) return
+      setServers(serverInfos)
+    }
+
+    void prepareServers()
+    return () => {
+      cancelled = true
+    }
+  }, [filteredClients, mcp.tools])
+
+  useEffect(() => {
+    if (servers.length === 0 && filteredClients.length > 0) {
+      // Still loading
+      return
+    }
+
+    // Only show "no servers" message if no regular servers AND no agent servers
+    if (servers.length === 0 && agentMcpServers.length === 0) {
+      onComplete(
+        'No MCP servers configured. Please run /doctor if this is unexpected. Otherwise, run `claude mcp --help` or visit https://code.claude.com/docs/en/mcp to learn more.',
+      )
+    }
+  }, [
+    servers.length,
+    filteredClients.length,
+    agentMcpServers.length,
+    onComplete,
+  ])
+
  switch (viewState.type) {
-    case "list":
-      {
-        let t10;
-        let t9;
-        if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-          t9 = server => setViewState({
-            type: "server-menu",
-            server
-          });
-          t10 = agentServer => setViewState({
-            type: "agent-server-menu",
-            agentServer
-          });
-          $[16] = t10;
-          $[17] = t9;
-        } else {
-          t10 = $[16];
-          t9 = $[17];
-        }
-        let t11;
-        if ($[18] !== agentMcpServers || $[19] !== onComplete || $[20] !== servers || $[21] !== viewState.defaultTab) {
-          t11 = <MCPListPanel servers={servers} agentServers={agentMcpServers} onSelectServer={t9} onSelectAgentServer={t10} onComplete={onComplete} defaultTab={viewState.defaultTab} />;
-          $[18] = agentMcpServers;
-          $[19] = onComplete;
-          $[20] = servers;
-          $[21] = viewState.defaultTab;
-          $[22] = t11;
-        } else {
-          t11 = $[22];
-        }
-        return t11;
+    case 'list':
+      return (
+        <MCPListPanel
+          servers={servers}
+          agentServers={agentMcpServers}
+          onSelectServer={server =>
+            setViewState({ type: 'server-menu', server })
+          }
+          onSelectAgentServer={(agentServer: AgentMcpServerInfo) =>
+            setViewState({ type: 'agent-server-menu', agentServer })
+          }
+          onComplete={onComplete}
+          defaultTab={viewState.defaultTab}
+        />
+      )
+
+    case 'server-menu': {
+      const serverTools = filterToolsByServer(mcp.tools, viewState.server.name)
+
+      const defaultTab =
+        viewState.server.transport === 'claudeai-proxy'
+          ? 'claude.ai'
+          : 'Claude Code'
+
+      if (viewState.server.transport === 'stdio') {
+        return (
+          <MCPStdioServerMenu
+            server={viewState.server}
+            serverToolsCount={serverTools.length}
+            onViewTools={() =>
+              setViewState({ type: 'server-tools', server: viewState.server })
+            }
+            onCancel={() => setViewState({ type: 'list', defaultTab })}
+            onComplete={onComplete}
+          />
+        )
+      } else {
+        return (
+          <MCPRemoteServerMenu
+            server={viewState.server}
+            serverToolsCount={serverTools.length}
+            onViewTools={() =>
+              setViewState({ type: 'server-tools', server: viewState.server })
+            }
+            onCancel={() => setViewState({ type: 'list', defaultTab })}
+            onComplete={onComplete}
+          />
+        )
      }
-    case "server-menu":
-      {
-        let t9;
-        if ($[23] !== mcp.tools || $[24] !== viewState.server.name) {
-          t9 = filterToolsByServer(mcp.tools, viewState.server.name);
-          $[23] = mcp.tools;
-          $[24] = viewState.server.name;
-          $[25] = t9;
-        } else {
-          t9 = $[25];
-        }
-        const serverTools_0 = t9;
-        const defaultTab = viewState.server.transport === "claudeai-proxy" ? "claude.ai" : "Claude Code";
-        if (viewState.server.transport === "stdio") {
-          let t10;
-          if ($[26] !== viewState.server) {
-            t10 = () => setViewState({
-              type: "server-tools",
-              server: viewState.server
-            });
-            $[26] = viewState.server;
-            $[27] = t10;
-          } else {
-            t10 = $[27];
+    }
+
+    case 'server-tools':
+      return (
+        <MCPToolListView
+          server={viewState.server}
+          onSelectTool={(_, index) =>
+            setViewState({
+              type: 'server-tool-detail',
+              server: viewState.server,
+              toolIndex: index,
+            })
          }
-          let t11;
-          if ($[28] !== defaultTab) {
-            t11 = () => setViewState({
-              type: "list",
-              defaultTab
-            });
-            $[28] = defaultTab;
-            $[29] = t11;
-          } else {
-            t11 = $[29];
+          onBack={() =>
+            setViewState({ type: 'server-menu', server: viewState.server })
          }
-          let t12;
-          if ($[30] !== onComplete || $[31] !== serverTools_0.length || $[32] !== t10 || $[33] !== t11 || $[34] !== viewState.server) {
-            t12 = <MCPStdioServerMenu server={viewState.server} serverToolsCount={serverTools_0.length} onViewTools={t10} onCancel={t11} onComplete={onComplete} />;
-            $[30] = onComplete;
-            $[31] = serverTools_0.length;
-            $[32] = t10;
-            $[33] = t11;
-            $[34] = viewState.server;
-            $[35] = t12;
-          } else {
-            t12 = $[35];
-          }
-          return t12;
-        } else {
-          let t10;
-          if ($[36] !== viewState.server) {
-            t10 = () => setViewState({
-              type: "server-tools",
-              server: viewState.server
-            });
-            $[36] = viewState.server;
-            $[37] = t10;
-          } else {
-            t10 = $[37];
-          }
-          let t11;
-          if ($[38] !== defaultTab) {
-            t11 = () => setViewState({
-              type: "list",
-              defaultTab
-            });
-            $[38] = defaultTab;
-            $[39] = t11;
-          } else {
-            t11 = $[39];
-          }
-          let t12;
-          if ($[40] !== onComplete || $[41] !== serverTools_0.length || $[42] !== t10 || $[43] !== t11 || $[44] !== viewState.server) {
-            t12 = <MCPRemoteServerMenu server={viewState.server} serverToolsCount={serverTools_0.length} onViewTools={t10} onCancel={t11} onComplete={onComplete} />;
-            $[40] = onComplete;
-            $[41] = serverTools_0.length;
-            $[42] = t10;
-            $[43] = t11;
-            $[44] = viewState.server;
-            $[45] = t12;
-          } else {
-            t12 = $[45];
-          }
-          return t12;
-        }
-      }
-    case "server-tools":
-      {
-        let t10;
-        let t9;
-        if ($[46] !== viewState.server) {
-          t9 = (_, index) => setViewState({
-            type: "server-tool-detail",
-            server: viewState.server,
-            toolIndex: index
-          });
-          t10 = () => setViewState({
-            type: "server-menu",
-            server: viewState.server
-          });
-          $[46] = viewState.server;
-          $[47] = t10;
-          $[48] = t9;
-        } else {
-          t10 = $[47];
-          t9 = $[48];
-        }
-        let t11;
-        if ($[49] !== t10 || $[50] !== t9 || $[51] !== viewState.server) {
-          t11 = <MCPToolListView server={viewState.server} onSelectTool={t9} onBack={t10} />;
-          $[49] = t10;
-          $[50] = t9;
-          $[51] = viewState.server;
-          $[52] = t11;
-        } else {
-          t11 = $[52];
-        }
-        return t11;
-      }
-    case "server-tool-detail":
-      {
-        let t9;
-        if ($[53] !== mcp.tools || $[54] !== viewState.server.name) {
-          t9 = filterToolsByServer(mcp.tools, viewState.server.name);
-          $[53] = mcp.tools;
-          $[54] = viewState.server.name;
-          $[55] = t9;
-        } else {
-          t9 = $[55];
-        }
-        const serverTools = t9;
-        const tool = serverTools[viewState.toolIndex];
-        if (!tool) {
-          setViewState({
-            type: "server-tools",
-            server: viewState.server
-          });
-          return null;
-        }
-        let t10;
-        if ($[56] !== viewState.server) {
-          t10 = () => setViewState({
-            type: "server-tools",
-            server: viewState.server
-          });
-          $[56] = viewState.server;
-          $[57] = t10;
-        } else {
-          t10 = $[57];
-        }
-        let t11;
-        if ($[58] !== t10 || $[59] !== tool || $[60] !== viewState.server) {
-          t11 = <MCPToolDetailView tool={tool} server={viewState.server} onBack={t10} />;
-          $[58] = t10;
-          $[59] = tool;
-          $[60] = viewState.server;
-          $[61] = t11;
-        } else {
-          t11 = $[61];
-        }
-        return t11;
-      }
-    case "agent-server-menu":
-      {
-        let t9;
-        if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-          t9 = () => setViewState({
-            type: "list",
-            defaultTab: "Agents"
-          });
-          $[62] = t9;
-        } else {
-          t9 = $[62];
-        }
-        let t10;
-        if ($[63] !== onComplete || $[64] !== viewState.agentServer) {
-          t10 = <MCPAgentServerMenu agentServer={viewState.agentServer} onCancel={t9} onComplete={onComplete} />;
-          $[63] = onComplete;
-          $[64] = viewState.agentServer;
-          $[65] = t10;
-        } else {
-          t10 = $[65];
-        }
-        return t10;
+        />
+      )
+
+    case 'server-tool-detail': {
+      const serverTools = filterToolsByServer(mcp.tools, viewState.server.name)
+      const tool = serverTools[viewState.toolIndex]
+      if (!tool) {
+        setViewState({ type: 'server-tools', server: viewState.server })
+        return null
      }
+      return (
+        <MCPToolDetailView
+          tool={tool}
+          server={viewState.server}
+          onBack={() =>
+            setViewState({ type: 'server-tools', server: viewState.server })
+          }
+        />
+      )
+    }
+
+    case 'agent-server-menu':
+      return (
+        <MCPAgentServerMenu
+          agentServer={viewState.agentServer}
+          onCancel={() => setViewState({ type: 'list', defaultTab: 'Agents' })}
+          onComplete={onComplete}
+        />
+      )
  }
 }
-function _temp4(a, b) {
-  return a.name.localeCompare(b.name);
-}
-function _temp3(client) {
-  return client.name !== "ide";
-}
-function _temp2(s_0) {
-  return s_0.agentDefinitions;
-}
-function _temp(s) {
-  return s.mcp;
-}
--- a/src/components/mcp/MCPStdioServerMenu.tsx
+++ b/src/components/mcp/MCPStdioServerMenu.tsx
@@ -1,92 +1,116 @@
-import figures from 'figures';
-import React, { useState } from 'react';
-import type { CommandResultDisplay } from '../../commands.js';
-import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js';
-import { Box, color, Text, useTheme } from '../../ink.js';
-import { getMcpConfigByName } from '../../services/mcp/config.js';
-import { useMcpReconnect, useMcpToggleEnabled } from '../../services/mcp/MCPConnectionManager.js';
-import { describeMcpConfigFilePath, filterMcpPromptsByServer } from '../../services/mcp/utils.js';
-import { useAppState } from '../../state/AppState.js';
-import { errorMessage } from '../../utils/errors.js';
-import { capitalize } from '../../utils/stringUtils.js';
-import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
-import { Select } from '../CustomSelect/index.js';
-import { Byline } from '../design-system/Byline.js';
-import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js';
-import { Spinner } from '../Spinner.js';
-import { CapabilitiesSection } from './CapabilitiesSection.js';
-import type { StdioServerInfo } from './types.js';
-import { handleReconnectError, handleReconnectResult } from './utils/reconnectHelpers.js';
+import figures from 'figures'
+import React, { useState } from 'react'
+import type { CommandResultDisplay } from '../../commands.js'
+import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js'
+import { Box, color, Text, useTheme } from '../../ink.js'
+import { getMcpConfigByName } from '../../services/mcp/config.js'
+import {
+  useMcpReconnect,
+  useMcpToggleEnabled,
+} from '../../services/mcp/MCPConnectionManager.js'
+import {
+  describeMcpConfigFilePath,
+  filterMcpPromptsByServer,
+} from '../../services/mcp/utils.js'
+import { useAppState } from '../../state/AppState.js'
+import { errorMessage } from '../../utils/errors.js'
+import { capitalize } from '../../utils/stringUtils.js'
+import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
+import { Select } from '../CustomSelect/index.js'
+import { Byline } from '../design-system/Byline.js'
+import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js'
+import { Spinner } from '../Spinner.js'
+import { CapabilitiesSection } from './CapabilitiesSection.js'
+import type { StdioServerInfo } from './types.js'
+import {
+  handleReconnectError,
+  handleReconnectResult,
+} from './utils/reconnectHelpers.js'
+
 type Props = {
-  server: StdioServerInfo;
-  serverToolsCount: number;
-  onViewTools: () => void;
-  onCancel: () => void;
-  onComplete: (result?: string, options?: {
-    display?: CommandResultDisplay;
-  }) => void;
-  borderless?: boolean;
-};
+  server: StdioServerInfo
+  serverToolsCount: number
+  onViewTools: () => void
+  onCancel: () => void
+  onComplete: (
+    result?: string,
+    options?: { display?: CommandResultDisplay },
+  ) => void
+  borderless?: boolean
+}
+
 export function MCPStdioServerMenu({
  server,
  serverToolsCount,
  onViewTools,
  onCancel,
  onComplete,
-  borderless = false
+  borderless = false,
 }: Props): React.ReactNode {
-  const [theme] = useTheme();
-  const exitState = useExitOnCtrlCDWithKeybindings();
-  const mcp = useAppState(s => s.mcp);
-  const reconnectMcpServer = useMcpReconnect();
-  const toggleMcpServer = useMcpToggleEnabled();
-  const [isReconnecting, setIsReconnecting] = useState(false);
+  const [theme] = useTheme()
+  const exitState = useExitOnCtrlCDWithKeybindings()
+  const mcp = useAppState(s => s.mcp)
+  const reconnectMcpServer = useMcpReconnect()
+  const toggleMcpServer = useMcpToggleEnabled()
+  const [isReconnecting, setIsReconnecting] = useState(false)
+
  const handleToggleEnabled = React.useCallback(async () => {
-    const wasEnabled = server.client.type !== 'disabled';
+    const wasEnabled = server.client.type !== 'disabled'
+
    try {
-      await toggleMcpServer(server.name);
+      await toggleMcpServer(server.name)
      // Return to the server list so user can continue managing other servers
-      onCancel();
+      onCancel()
    } catch (err) {
-      const action = wasEnabled ? 'disable' : 'enable';
-      onComplete(`Failed to ${action} MCP server '${server.name}': ${errorMessage(err)}`);
+      const action = wasEnabled ? 'disable' : 'enable'
+      onComplete(
+        `Failed to ${action} MCP server '${server.name}': ${errorMessage(err)}`,
+      )
    }
-  }, [server.client.type, server.name, toggleMcpServer, onCancel, onComplete]);
-  const capitalizedServerName = capitalize(String(server.name));
+  }, [server.client.type, server.name, toggleMcpServer, onCancel, onComplete])
+
+  const capitalizedServerName = capitalize(String(server.name))

  // Count MCP prompts for this server (skills are shown in /skills, not here)
-  const serverCommandsCount = filterMcpPromptsByServer(mcp.commands, server.name).length;
-  const menuOptions = [];
+  const serverCommandsCount = filterMcpPromptsByServer(
+    mcp.commands,
+    server.name,
+  ).length
+
+  const menuOptions = []

  // Only show "View tools" if server is not disabled and has tools
  if (server.client.type !== 'disabled' && serverToolsCount > 0) {
    menuOptions.push({
      label: 'View tools',
-      value: 'tools'
-    });
+      value: 'tools',
+    })
  }

  // Only show reconnect option if the server is not disabled
  if (server.client.type !== 'disabled') {
    menuOptions.push({
      label: 'Reconnect',
-      value: 'reconnectMcpServer'
-    });
+      value: 'reconnectMcpServer',
+    })
  }
+
  menuOptions.push({
    label: server.client.type !== 'disabled' ? 'Disable' : 'Enable',
-    value: 'toggle-enabled'
-  });
+    value: 'toggle-enabled',
+  })

  // If there are no other options, add a back option so Select handles escape
  if (menuOptions.length === 0) {
    menuOptions.push({
      label: 'Back',
-      value: 'back'
-    });
+      value: 'back',
+    })
  }
+
  if (isReconnecting) {
-    return <Box flexDirection="column" gap={1} padding={1}>
+    return (
+      <Box flexDirection="column" gap={1} padding={1}>
        <Text color="text">
          Reconnecting to <Text bold>{server.name}</Text>
        </Text>
@@ -95,10 +119,17 @@ export function MCPStdioServerMenu({
          <Text> Restarting MCP server process</Text>
        </Box>
        <Text dimColor>This may take a few moments.</Text>
-      </Box>;
+      </Box>
+    )
  }
-  return <Box flexDirection="column">
-      <Box flexDirection="column" paddingX={1} borderStyle={borderless ? undefined : 'round'}>
+
+  return (
+    <Box flexDirection="column">
+      <Box
+        flexDirection="column"
+        paddingX={1}
+        borderStyle={borderless ? undefined : 'round'}
+      >
        <Box marginBottom={1}>
          <Text bold>{capitalizedServerName} MCP Server</Text>
        </Box>
@@ -106,10 +137,18 @@ export function MCPStdioServerMenu({
        <Box flexDirection="column" gap={0}>
          <Box>
            <Text bold>Status: </Text>
-            {server.client.type === 'disabled' ? <Text>{color('inactive', theme)(figures.radioOff)} disabled</Text> : server.client.type === 'connected' ? <Text>{color('success', theme)(figures.tick)} connected</Text> : server.client.type === 'pending' ? <>
+            {server.client.type === 'disabled' ? (
+              <Text>{color('inactive', theme)(figures.radioOff)} disabled</Text>
+            ) : server.client.type === 'connected' ? (
+              <Text>{color('success', theme)(figures.tick)} connected</Text>
+            ) : server.client.type === 'pending' ? (
+              <>
                <Text dimColor>{figures.radioOff}</Text>
                <Text> connecting…</Text>
-              </> : <Text>{color('error', theme)(figures.cross)} failed</Text>}
+              </>
+            ) : (
+              <Text>{color('error', theme)(figures.cross)} failed</Text>
+            )}
          </Box>

          <Box>
@@ -117,60 +156,89 @@ export function MCPStdioServerMenu({
            <Text dimColor>{server.config.command}</Text>
          </Box>

-          {server.config.args && server.config.args.length > 0 && <Box>
+          {server.config.args && server.config.args.length > 0 && (
+            <Box>
              <Text bold>Args: </Text>
              <Text dimColor>{server.config.args.join(' ')}</Text>
-            </Box>}
+            </Box>
+          )}

          <Box>
            <Text bold>Config location: </Text>
            <Text dimColor>
-              {describeMcpConfigFilePath(getMcpConfigByName(server.name)?.scope ?? 'dynamic')}
+              {describeMcpConfigFilePath(
+                getMcpConfigByName(server.name)?.scope ?? 'dynamic',
+              )}
            </Text>
          </Box>

-          {server.client.type === 'connected' && <CapabilitiesSection serverToolsCount={serverToolsCount} serverPromptsCount={serverCommandsCount} serverResourcesCount={mcp.resources[server.name]?.length || 0} />}
+          {server.client.type === 'connected' && (
+            <CapabilitiesSection
+              serverToolsCount={serverToolsCount}
+              serverPromptsCount={serverCommandsCount}
+              serverResourcesCount={mcp.resources[server.name]?.length || 0}
+            />
+          )}

-          {server.client.type === 'connected' && serverToolsCount > 0 && <Box>
+          {server.client.type === 'connected' && serverToolsCount > 0 && (
+            <Box>
              <Text bold>Tools: </Text>
              <Text dimColor>{serverToolsCount} tools</Text>
-            </Box>}
+            </Box>
+          )}
        </Box>

-        {menuOptions.length > 0 && <Box marginTop={1}>
-            <Select options={menuOptions} onChange={async value => {
-          if (value === 'tools') {
-            onViewTools();
-          } else if (value === 'reconnectMcpServer') {
-            setIsReconnecting(true);
-            try {
-              const result = await reconnectMcpServer(server.name);
-              const {
-                message
-              } = handleReconnectResult(result, server.name);
-              onComplete?.(message);
-            } catch (err_0) {
-              onComplete?.(handleReconnectError(err_0, server.name));
-            } finally {
-              setIsReconnecting(false);
-            }
-          } else if (value === 'toggle-enabled') {
-            await handleToggleEnabled();
-          } else if (value === 'back') {
-            onCancel();
-          }
-        }} onCancel={onCancel} />
-          </Box>}
+        {menuOptions.length > 0 && (
+          <Box marginTop={1}>
+            <Select
+              options={menuOptions}
+              onChange={async value => {
+                if (value === 'tools') {
+                  onViewTools()
+                } else if (value === 'reconnectMcpServer') {
+                  setIsReconnecting(true)
+                  try {
+                    const result = await reconnectMcpServer(server.name)
+                    const { message } = handleReconnectResult(
+                      result,
+                      server.name,
+                    )
+                    onComplete?.(message)
+                  } catch (err) {
+                    onComplete?.(handleReconnectError(err, server.name))
+                  } finally {
+                    setIsReconnecting(false)
+                  }
+                } else if (value === 'toggle-enabled') {
+                  await handleToggleEnabled()
+                } else if (value === 'back') {
+                  onCancel()
+                }
+              }}
+              onCancel={onCancel}
+            />
+          </Box>
+        )}
      </Box>

      <Box marginTop={1}>
        <Text dimColor italic>
-          {exitState.pending ? <>Press {exitState.keyName} again to exit</> : <Byline>
+          {exitState.pending ? (
+            <>Press {exitState.keyName} again to exit</>
+          ) : (
+            <Byline>
              <KeyboardShortcutHint shortcut="↑↓" action="navigate" />
              <KeyboardShortcutHint shortcut="Enter" action="select" />
-              <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="back" />
-            </Byline>}
+              <ConfigurableShortcutHint
+                action="confirm:no"
+                context="Confirmation"
+                fallback="Esc"
+                description="back"
+              />
+            </Byline>
+          )}
        </Text>
      </Box>
-    </Box>;
+    </Box>
+  )
 }
--- a/src/components/mcp/MCPToolDetailView.tsx
+++ b/src/components/mcp/MCPToolDetailView.tsx
@@ -1,211 +1,142 @@
-import { c as _c } from "react/compiler-runtime";
-import React from 'react';
-import { Box, Text } from '../../ink.js';
-import { extractMcpToolDisplayName, getMcpDisplayName } from '../../services/mcp/mcpStringUtils.js';
-import type { Tool } from '../../Tool.js';
-import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
-import { Dialog } from '../design-system/Dialog.js';
-import type { ServerInfo } from './types.js';
+import React from 'react'
+import { Box, Text } from '../../ink.js'
+import {
+  extractMcpToolDisplayName,
+  getMcpDisplayName,
+} from '../../services/mcp/mcpStringUtils.js'
+import type { Tool } from '../../Tool.js'
+import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
+import { Dialog } from '../design-system/Dialog.js'
+import type { ServerInfo } from './types.js'
+
 type Props = {
-  tool: Tool;
-  server: ServerInfo;
-  onBack: () => void;
-};
-export function MCPToolDetailView(t0) {
-  const $ = _c(44);
-  const {
-    tool,
-    server,
-    onBack
-  } = t0;
-  const [toolDescription, setToolDescription] = React.useState("");
-  let t1;
-  let toolName;
-  if ($[0] !== server.name || $[1] !== tool) {
-    toolName = getMcpDisplayName(tool.name, server.name);
-    const fullDisplayName = tool.userFacingName ? tool.userFacingName({}) : toolName;
-    t1 = extractMcpToolDisplayName(fullDisplayName);
-    $[0] = server.name;
-    $[1] = tool;
-    $[2] = t1;
-    $[3] = toolName;
-  } else {
-    t1 = $[2];
-    toolName = $[3];
-  }
-  const displayName = t1;
-  let t2;
-  if ($[4] !== tool) {
-    t2 = tool.isReadOnly?.({}) ?? false;
-    $[4] = tool;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const isReadOnly = t2;
-  let t3;
-  if ($[6] !== tool) {
-    t3 = tool.isDestructive?.({}) ?? false;
-    $[6] = tool;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  const isDestructive = t3;
-  let t4;
-  if ($[8] !== tool) {
-    t4 = tool.isOpenWorld?.({}) ?? false;
-    $[8] = tool;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  const isOpenWorld = t4;
-  let t5;
-  let t6;
-  if ($[10] !== tool) {
-    t5 = () => {
-      const loadDescription = async function loadDescription() {
-        try {
-          const desc = await tool.description({}, {
+  tool: Tool
+  server: ServerInfo
+  onBack: () => void
+}
+
+export function MCPToolDetailView({
+  tool,
+  server,
+  onBack,
+}: Props): React.ReactNode {
+  const [toolDescription, setToolDescription] = React.useState<string>('')
+
+  const toolName = getMcpDisplayName(tool.name, server.name)
+  const fullDisplayName = tool.userFacingName
+    ? tool.userFacingName({})
+    : toolName
+  const displayName = extractMcpToolDisplayName(fullDisplayName)
+
+  const isReadOnly = tool.isReadOnly?.({}) ?? false
+  const isDestructive = tool.isDestructive?.({}) ?? false
+  const isOpenWorld = tool.isOpenWorld?.({}) ?? false
+
+  React.useEffect(() => {
+    async function loadDescription() {
+      try {
+        const desc = await tool.description(
+          {},
+          {
            isNonInteractiveSession: false,
            toolPermissionContext: {
-              mode: "default" as const,
+              mode: 'default' as const,
              additionalWorkingDirectories: new Map(),
              alwaysAllowRules: {},
              alwaysDenyRules: {},
              alwaysAskRules: {},
-              isBypassPermissionsModeAvailable: false
+              isBypassPermissionsModeAvailable: false,
            },
-            tools: []
-          });
-          setToolDescription(desc);
-        } catch {
-          setToolDescription("Failed to load description");
-        }
-      };
-      loadDescription();
-    };
-    t6 = [tool];
-    $[10] = tool;
-    $[11] = t5;
-    $[12] = t6;
-  } else {
-    t5 = $[11];
-    t6 = $[12];
-  }
-  React.useEffect(t5, t6);
-  let t7;
-  if ($[13] !== isReadOnly) {
-    t7 = isReadOnly && <Text color="success"> [read-only]</Text>;
-    $[13] = isReadOnly;
-    $[14] = t7;
-  } else {
-    t7 = $[14];
-  }
-  let t8;
-  if ($[15] !== isDestructive) {
-    t8 = isDestructive && <Text color="error"> [destructive]</Text>;
-    $[15] = isDestructive;
-    $[16] = t8;
-  } else {
-    t8 = $[16];
-  }
-  let t9;
-  if ($[17] !== isOpenWorld) {
-    t9 = isOpenWorld && <Text dimColor={true}> [open-world]</Text>;
-    $[17] = isOpenWorld;
-    $[18] = t9;
-  } else {
-    t9 = $[18];
-  }
-  let t10;
-  if ($[19] !== displayName || $[20] !== t7 || $[21] !== t8 || $[22] !== t9) {
-    t10 = <>{displayName}{t7}{t8}{t9}</>;
-    $[19] = displayName;
-    $[20] = t7;
-    $[21] = t8;
-    $[22] = t9;
-    $[23] = t10;
-  } else {
-    t10 = $[23];
-  }
-  const titleContent = t10;
-  let t11;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = <Text bold={true}>Tool name: </Text>;
-    $[24] = t11;
-  } else {
-    t11 = $[24];
-  }
-  let t12;
-  if ($[25] !== toolName) {
-    t12 = <Box>{t11}<Text dimColor={true}>{toolName}</Text></Box>;
-    $[25] = toolName;
-    $[26] = t12;
-  } else {
-    t12 = $[26];
-  }
-  let t13;
-  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = <Text bold={true}>Full name: </Text>;
-    $[27] = t13;
-  } else {
-    t13 = $[27];
-  }
-  let t14;
-  if ($[28] !== tool.name) {
-    t14 = <Box>{t13}<Text dimColor={true}>{tool.name}</Text></Box>;
-    $[28] = tool.name;
-    $[29] = t14;
-  } else {
-    t14 = $[29];
-  }
-  let t15;
-  if ($[30] !== toolDescription) {
-    t15 = toolDescription && <Box flexDirection="column" marginTop={1}><Text bold={true}>Description:</Text><Text wrap="wrap">{toolDescription}</Text></Box>;
-    $[30] = toolDescription;
-    $[31] = t15;
-  } else {
-    t15 = $[31];
-  }
-  let t16;
-  if ($[32] !== tool.inputJSONSchema) {
-    t16 = tool.inputJSONSchema && tool.inputJSONSchema.properties && Object.keys(tool.inputJSONSchema.properties).length > 0 && <Box flexDirection="column" marginTop={1}><Text bold={true}>Parameters:</Text><Box marginLeft={2} flexDirection="column">{Object.entries(tool.inputJSONSchema.properties).map(t17 => {
-          const [key, value] = t17;
-          const required = tool.inputJSONSchema?.required as string[] | undefined;
-          const isRequired = required?.includes(key);
-          return <Text key={key}>• {key}{isRequired && <Text dimColor={true}> (required)</Text>}:{" "}<Text dimColor={true}>{typeof value === "object" && value && "type" in value ? String(value.type) : "unknown"}</Text>{typeof value === "object" && value && "description" in value && <Text dimColor={true}> - {String(value.description)}</Text>}</Text>;
-        })}</Box></Box>;
-    $[32] = tool.inputJSONSchema;
-    $[33] = t16;
-  } else {
-    t16 = $[33];
-  }
-  let t17;
-  if ($[34] !== t12 || $[35] !== t14 || $[36] !== t15 || $[37] !== t16) {
-    t17 = <Box flexDirection="column">{t12}{t14}{t15}{t16}</Box>;
-    $[34] = t12;
-    $[35] = t14;
-    $[36] = t15;
-    $[37] = t16;
-    $[38] = t17;
-  } else {
-    t17 = $[38];
-  }
-  let t18;
-  if ($[39] !== onBack || $[40] !== server.name || $[41] !== t17 || $[42] !== titleContent) {
-    t18 = <Dialog title={titleContent} subtitle={server.name} onCancel={onBack} inputGuide={_temp}>{t17}</Dialog>;
-    $[39] = onBack;
-    $[40] = server.name;
-    $[41] = t17;
-    $[42] = titleContent;
-    $[43] = t18;
-  } else {
-    t18 = $[43];
-  }
-  return t18;
-}
-function _temp(exitState) {
-  return exitState.pending ? <Text>Press {exitState.keyName} again to exit</Text> : <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="go back" />;
+            tools: [],
+          },
+        )
+        setToolDescription(desc)
+      } catch {
+        setToolDescription('Failed to load description')
+      }
+    }
+    void loadDescription()
+  }, [tool])
+
+  const titleContent = (
+    <>
+      {displayName}
+      {isReadOnly && <Text color="success"> [read-only]</Text>}
+      {isDestructive && <Text color="error"> [destructive]</Text>}
+      {isOpenWorld && <Text dimColor> [open-world]</Text>}
+    </>
+  )
+
+  return (
+    <Dialog
+      title={titleContent}
+      subtitle={server.name}
+      onCancel={onBack}
+      inputGuide={exitState =>
+        exitState.pending ? (
+          <Text>Press {exitState.keyName} again to exit</Text>
+        ) : (
+          <ConfigurableShortcutHint
+            action="confirm:no"
+            context="Confirmation"
+            fallback="Esc"
+            description="go back"
+          />
+        )
+      }
+    >
+      <Box flexDirection="column">
+        <Box>
+          <Text bold>Tool name: </Text>
+          <Text dimColor>{toolName}</Text>
+        </Box>
+
+        <Box>
+          <Text bold>Full name: </Text>
+          <Text dimColor>{tool.name}</Text>
+        </Box>
+
+        {toolDescription && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text bold>Description:</Text>
+            <Text wrap="wrap">{toolDescription}</Text>
+          </Box>
+        )}
+
+        {tool.inputJSONSchema &&
+          tool.inputJSONSchema.properties &&
+          Object.keys(tool.inputJSONSchema.properties).length > 0 && (
+            <Box flexDirection="column" marginTop={1}>
+              <Text bold>Parameters:</Text>
+              <Box marginLeft={2} flexDirection="column">
+                {Object.entries(tool.inputJSONSchema.properties).map(
+                  ([key, value]) => {
+                    const required = tool.inputJSONSchema?.required as
+                      | string[]
+                      | undefined
+                    const isRequired = required?.includes(key)
+                    return (
+                      <Text key={key}>
+                        • {key}
+                        {isRequired && <Text dimColor> (required)</Text>}:{' '}
+                        <Text dimColor>
+                          {typeof value === 'object' && value && 'type' in value
+                            ? String(value.type)
+                            : 'unknown'}
+                        </Text>
+                        {typeof value === 'object' &&
+                          value &&
+                          'description' in value && (
+                            <Text dimColor> - {String(value.description)}</Text>
+                          )}
+                      </Text>
+                    )
+                  },
+                )}
+              </Box>
+            </Box>
+          )}
+      </Box>
+    </Dialog>
+  )
 }
--- a/src/components/mcp/MCPToolListView.tsx
+++ b/src/components/mcp/MCPToolListView.tsx
@@ -1,140 +1,104 @@
-import { c as _c } from "react/compiler-runtime";
-import React from 'react';
-import { Text } from '../../ink.js';
-import { extractMcpToolDisplayName, getMcpDisplayName } from '../../services/mcp/mcpStringUtils.js';
-import { filterToolsByServer } from '../../services/mcp/utils.js';
-import { useAppState } from '../../state/AppState.js';
-import type { Tool } from '../../Tool.js';
-import { plural } from '../../utils/stringUtils.js';
-import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
-import { Select } from '../CustomSelect/index.js';
-import { Byline } from '../design-system/Byline.js';
-import { Dialog } from '../design-system/Dialog.js';
-import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js';
-import type { ServerInfo } from './types.js';
+import React from 'react'
+import { Text } from '../../ink.js'
+import {
+  extractMcpToolDisplayName,
+  getMcpDisplayName,
+} from '../../services/mcp/mcpStringUtils.js'
+import { filterToolsByServer } from '../../services/mcp/utils.js'
+import { useAppState } from '../../state/AppState.js'
+import type { Tool } from '../../Tool.js'
+import { plural } from '../../utils/stringUtils.js'
+import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
+import { Select } from '../CustomSelect/index.js'
+import { Byline } from '../design-system/Byline.js'
+import { Dialog } from '../design-system/Dialog.js'
+import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js'
+import type { ServerInfo } from './types.js'
+
 type Props = {
-  server: ServerInfo;
-  onSelectTool: (tool: Tool, index: number) => void;
-  onBack: () => void;
-};
-export function MCPToolListView(t0) {
-  const $ = _c(21);
-  const {
-    server,
-    onSelectTool,
-    onBack
-  } = t0;
-  const mcpTools = useAppState(_temp);
-  let t1;
-  bb0: {
-    if (server.client.type !== "connected") {
-      let t2;
-      if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = [];
-        $[0] = t2;
-      } else {
-        t2 = $[0];
+  server: ServerInfo
+  onSelectTool: (tool: Tool, index: number) => void
+  onBack: () => void
+}
+
+export function MCPToolListView({
+  server,
+  onSelectTool,
+  onBack,
+}: Props): React.ReactNode {
+  const mcpTools = useAppState(s => s.mcp.tools)
+
+  const serverTools = React.useMemo(() => {
+    if (server.client.type !== 'connected') return []
+    return filterToolsByServer(mcpTools, server.name)
+  }, [server, mcpTools])
+
+  const toolOptions = serverTools.map((tool, index) => {
+    const toolName = getMcpDisplayName(tool.name, server.name)
+    const fullDisplayName = tool.userFacingName
+      ? tool.userFacingName({})
+      : toolName
+    // Extract just the tool display name without server prefix
+    const displayName = extractMcpToolDisplayName(fullDisplayName)
+
+    const isReadOnly = tool.isReadOnly?.({}) ?? false
+    const isDestructive = tool.isDestructive?.({}) ?? false
+    const isOpenWorld = tool.isOpenWorld?.({}) ?? false
+
+    const annotations = []
+    if (isReadOnly) annotations.push('read-only')
+    if (isDestructive) annotations.push('destructive')
+    if (isOpenWorld) annotations.push('open-world')
+
+    return {
+      label: displayName,
+      value: index.toString(),
+      description: annotations.length > 0 ? annotations.join(', ') : undefined,
+      descriptionColor: isDestructive
+        ? 'error'
+        : isReadOnly
+          ? 'success'
+          : undefined,
+    }
+  })
+
+  return (
+    <Dialog
+      title={`Tools for ${server.name}`}
+      subtitle={`${serverTools.length} ${plural(serverTools.length, 'tool')}`}
+      onCancel={onBack}
+      inputGuide={exitState =>
+        exitState.pending ? (
+          <Text>Press {exitState.keyName} again to exit</Text>
+        ) : (
+          <Byline>
+            <KeyboardShortcutHint shortcut="↑↓" action="navigate" />
+            <KeyboardShortcutHint shortcut="Enter" action="select" />
+            <ConfigurableShortcutHint
+              action="confirm:no"
+              context="Confirmation"
+              fallback="Esc"
+              description="back"
+            />
+          </Byline>
+        )
      }
-      t1 = t2;
-      break bb0;
-    }
-    let t2;
-    if ($[1] !== mcpTools || $[2] !== server.name) {
-      t2 = filterToolsByServer(mcpTools, server.name);
-      $[1] = mcpTools;
-      $[2] = server.name;
-      $[3] = t2;
-    } else {
-      t2 = $[3];
-    }
-    t1 = t2;
-  }
-  const serverTools = t1;
-  let t2;
-  if ($[4] !== server.name || $[5] !== serverTools) {
-    let t3;
-    if ($[7] !== server.name) {
-      t3 = (tool, index) => {
-        const toolName = getMcpDisplayName(tool.name, server.name);
-        const fullDisplayName = tool.userFacingName ? tool.userFacingName({}) : toolName;
-        const displayName = extractMcpToolDisplayName(fullDisplayName);
-        const isReadOnly = tool.isReadOnly?.({}) ?? false;
-        const isDestructive = tool.isDestructive?.({}) ?? false;
-        const isOpenWorld = tool.isOpenWorld?.({}) ?? false;
-        const annotations = [];
-        if (isReadOnly) {
-          annotations.push("read-only");
-        }
-        if (isDestructive) {
-          annotations.push("destructive");
-        }
-        if (isOpenWorld) {
-          annotations.push("open-world");
-        }
-        return {
-          label: displayName,
-          value: index.toString(),
-          description: annotations.length > 0 ? annotations.join(", ") : undefined,
-          descriptionColor: isDestructive ? "error" : isReadOnly ? "success" : undefined
-        };
-      };
-      $[7] = server.name;
-      $[8] = t3;
-    } else {
-      t3 = $[8];
-    }
-    t2 = serverTools.map(t3);
-    $[4] = server.name;
-    $[5] = serverTools;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  const toolOptions = t2;
-  const t3 = `Tools for ${server.name}`;
-  const t4 = serverTools.length;
-  let t5;
-  if ($[9] !== serverTools.length) {
-    t5 = plural(serverTools.length, "tool");
-    $[9] = serverTools.length;
-    $[10] = t5;
-  } else {
-    t5 = $[10];
-  }
-  const t6 = `${t4} ${t5}`;
-  let t7;
-  if ($[11] !== onBack || $[12] !== onSelectTool || $[13] !== serverTools || $[14] !== toolOptions) {
-    t7 = serverTools.length === 0 ? <Text dimColor={true}>No tools available</Text> : <Select options={toolOptions} onChange={value => {
-      const index_0 = parseInt(value);
-      const tool_0 = serverTools[index_0];
-      if (tool_0) {
-        onSelectTool(tool_0, index_0);
-      }
-    }} onCancel={onBack} />;
-    $[11] = onBack;
-    $[12] = onSelectTool;
-    $[13] = serverTools;
-    $[14] = toolOptions;
-    $[15] = t7;
-  } else {
-    t7 = $[15];
-  }
-  let t8;
-  if ($[16] !== onBack || $[17] !== t3 || $[18] !== t6 || $[19] !== t7) {
-    t8 = <Dialog title={t3} subtitle={t6} onCancel={onBack} inputGuide={_temp2}>{t7}</Dialog>;
-    $[16] = onBack;
-    $[17] = t3;
-    $[18] = t6;
-    $[19] = t7;
-    $[20] = t8;
-  } else {
-    t8 = $[20];
-  }
-  return t8;
-}
-function _temp2(exitState) {
-  return exitState.pending ? <Text>Press {exitState.keyName} again to exit</Text> : <Byline><KeyboardShortcutHint shortcut={"\u2191\u2193"} action="navigate" /><KeyboardShortcutHint shortcut="Enter" action="select" /><ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="back" /></Byline>;
-}
-function _temp(s) {
-  return s.mcp.tools;
+    >
+      {serverTools.length === 0 ? (
+        <Text dimColor>No tools available</Text>
+      ) : (
+        <Select
+          options={toolOptions}
+          onChange={value => {
+            const index = parseInt(value)
+            const tool = serverTools[index]
+            if (tool) {
+              onSelectTool(tool, index)
+            }
+          }}
+          onCancel={onBack}
+        />
+      )}
+    </Dialog>
+  )
 }
--- a/src/components/mcp/McpParsingWarnings.tsx
+++ b/src/components/mcp/McpParsingWarnings.tsx
@@ -1,212 +1,147 @@
-import { c as _c } from "react/compiler-runtime";
-import React, { useMemo } from 'react';
-import { getMcpConfigsByScope } from 'src/services/mcp/config.js';
-import type { ConfigScope } from 'src/services/mcp/types.js';
-import { describeMcpConfigFilePath, getScopeLabel } from 'src/services/mcp/utils.js';
-import type { ValidationError } from 'src/utils/settings/validation.js';
-import { Box, Link, Text } from '../../ink.js';
-function McpConfigErrorSection(t0) {
-  const $ = _c(26);
-  const {
-    scope,
-    parsingErrors,
-    warnings
-  } = t0;
-  const hasErrors = parsingErrors.length > 0;
-  const hasWarnings = warnings.length > 0;
+import React, { useMemo } from 'react'
+import { getMcpConfigsByScope } from 'src/services/mcp/config.js'
+import type { ConfigScope } from 'src/services/mcp/types.js'
+import {
+  describeMcpConfigFilePath,
+  getScopeLabel,
+} from 'src/services/mcp/utils.js'
+import type { ValidationError } from 'src/utils/settings/validation.js'
+import { Box, Link, Text } from '../../ink.js'
+
+function McpConfigErrorSection({
+  scope,
+  parsingErrors,
+  warnings,
+}: {
+  scope: ConfigScope
+  parsingErrors: ValidationError[]
+  warnings: ValidationError[]
+}): React.ReactNode {
+  const hasErrors = parsingErrors.length > 0
+  const hasWarnings = warnings.length > 0
+
  if (!hasErrors && !hasWarnings) {
-    return null;
+    return null
  }
-  let t1;
-  if ($[0] !== hasErrors || $[1] !== hasWarnings) {
-    t1 = (hasErrors || hasWarnings) && <Text color={hasErrors ? "error" : "warning"}>[{hasErrors ? "Failed to parse" : "Contains warnings"}]{" "}</Text>;
-    $[0] = hasErrors;
-    $[1] = hasWarnings;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== scope) {
-    t2 = getScopeLabel(scope);
-    $[3] = scope;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== t2) {
-    t3 = <Text>{t2}</Text>;
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== t1 || $[8] !== t3) {
-    t4 = <Box>{t1}{t3}</Box>;
-    $[7] = t1;
-    $[8] = t3;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  let t5;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = <Text dimColor={true}>Location: </Text>;
-    $[10] = t5;
-  } else {
-    t5 = $[10];
-  }
-  let t6;
-  if ($[11] !== scope) {
-    t6 = describeMcpConfigFilePath(scope);
-    $[11] = scope;
-    $[12] = t6;
-  } else {
-    t6 = $[12];
-  }
-  let t7;
-  if ($[13] !== t6) {
-    t7 = <Box>{t5}<Text dimColor={true}>{t6}</Text></Box>;
-    $[13] = t6;
-    $[14] = t7;
-  } else {
-    t7 = $[14];
-  }
-  let t8;
-  if ($[15] !== parsingErrors) {
-    t8 = parsingErrors.map(_temp);
-    $[15] = parsingErrors;
-    $[16] = t8;
-  } else {
-    t8 = $[16];
-  }
-  let t9;
-  if ($[17] !== warnings) {
-    t9 = warnings.map(_temp2);
-    $[17] = warnings;
-    $[18] = t9;
-  } else {
-    t9 = $[18];
-  }
-  let t10;
-  if ($[19] !== t8 || $[20] !== t9) {
-    t10 = <Box marginLeft={1} flexDirection="column">{t8}{t9}</Box>;
-    $[19] = t8;
-    $[20] = t9;
-    $[21] = t10;
-  } else {
-    t10 = $[21];
-  }
-  let t11;
-  if ($[22] !== t10 || $[23] !== t4 || $[24] !== t7) {
-    t11 = <Box flexDirection="column" marginTop={1}>{t4}{t7}{t10}</Box>;
-    $[22] = t10;
-    $[23] = t4;
-    $[24] = t7;
-    $[25] = t11;
-  } else {
-    t11 = $[25];
-  }
-  return t11;
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box>
+        {(hasErrors || hasWarnings) && (
+          <Text color={hasErrors ? 'error' : 'warning'}>
+            [{hasErrors ? 'Failed to parse' : 'Contains warnings'}]{' '}
+          </Text>
+        )}
+        <Text>{getScopeLabel(scope)}</Text>
+      </Box>
+      <Box>
+        <Text dimColor>Location: </Text>
+        <Text dimColor>{describeMcpConfigFilePath(scope)}</Text>
+      </Box>
+      <Box marginLeft={1} flexDirection="column">
+        {parsingErrors.map((error, i) => {
+          const serverName = error.mcpErrorMetadata?.serverName
+          return (
+            <Box key={`error-${i}`}>
+              <Text>
+                <Text dimColor>└ </Text>
+                <Text color="error">[Error]</Text>
+                <Text dimColor>
+                  {' '}
+                  {serverName && `[${serverName}] `}
+                  {error.path && error.path !== '' ? `${error.path}: ` : ''}
+                  {error.message}
+                </Text>
+              </Text>
+            </Box>
+          )
+        })}
+        {warnings.map((warning, i) => {
+          const serverName = warning.mcpErrorMetadata?.serverName
+
+          return (
+            <Box key={`warning-${i}`}>
+              <Text>
+                <Text dimColor>└ </Text>
+                <Text color="warning">[Warning]</Text>
+                <Text dimColor>
+                  {' '}
+                  {serverName && `[${serverName}] `}
+                  {warning.path && warning.path !== ''
+                    ? `${warning.path}: `
+                    : ''}
+                  {warning.message}
+                </Text>
+              </Text>
+            </Box>
+          )
+        })}
+      </Box>
+    </Box>
+  )
 }
-function _temp2(warning, i_0) {
-  const serverName_0 = warning.mcpErrorMetadata?.serverName;
-  return <Box key={`warning-${i_0}`}><Text><Text dimColor={true}>└ </Text><Text color="warning">[Warning]</Text><Text dimColor={true}>{" "}{serverName_0 && `[${serverName_0}] `}{warning.path && warning.path !== "" ? `${warning.path}: ` : ""}{warning.message}</Text></Text></Box>;
-}
-function _temp(error, i) {
-  const serverName = error.mcpErrorMetadata?.serverName;
-  return <Box key={`error-${i}`}><Text><Text dimColor={true}>└ </Text><Text color="error">[Error]</Text><Text dimColor={true}>{" "}{serverName && `[${serverName}] `}{error.path && error.path !== "" ? `${error.path}: ` : ""}{error.message}</Text></Text></Box>;
-}
-export function McpParsingWarnings() {
-  const $ = _c(6);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = {
-      scope: "user",
-      config: getMcpConfigsByScope("user")
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      scope: "project",
-      config: getMcpConfigsByScope("project")
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = {
-      scope: "local",
-      config: getMcpConfigsByScope("local")
-    };
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = [t0, t1, t2, {
-      scope: "enterprise",
-      config: getMcpConfigsByScope("enterprise")
-    }];
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  const scopes = t3 satisfies Array<{
-    scope: ConfigScope;
-    config: {
-      errors: ValidationError[];
-    };
-  }>;
-  const hasParsingErrors = scopes.some(_temp3);
-  const hasWarnings = scopes.some(_temp4);
+
+export function McpParsingWarnings(): React.ReactNode {
+  // Config files don't change during dialog lifetime; read once on mount
+  // to avoid blocking file IO on every re-render.
+  const scopes = useMemo(
+    () =>
+      [
+        { scope: 'user', config: getMcpConfigsByScope('user') },
+        { scope: 'project', config: getMcpConfigsByScope('project') },
+        { scope: 'local', config: getMcpConfigsByScope('local') },
+        { scope: 'enterprise', config: getMcpConfigsByScope('enterprise') },
+      ] satisfies Array<{
+        scope: ConfigScope
+        config: { errors: ValidationError[] }
+      }>,
+    [],
+  )
+
+  const hasParsingErrors = scopes.some(
+    ({ config }) => filterErrors(config.errors, 'fatal').length > 0,
+  )
+  const hasWarnings = scopes.some(
+    ({ config }) => filterErrors(config.errors, 'warning').length > 0,
+  )
+
  if (!hasParsingErrors && !hasWarnings) {
-    return null;
+    return null
  }
-  let t4;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = <Text bold={true}>MCP Config Diagnostics</Text>;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  let t5;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = <Box flexDirection="column" marginTop={1} marginBottom={1}>{t4}<Box marginTop={1}><Text dimColor={true}>For help configuring MCP servers, see:{" "}<Link url="https://code.claude.com/docs/en/mcp">https://code.claude.com/docs/en/mcp</Link></Text></Box>{scopes.map(_temp5)}</Box>;
-    $[5] = t5;
-  } else {
-    t5 = $[5];
-  }
-  return t5;
+
+  return (
+    <Box flexDirection="column" marginTop={1} marginBottom={1}>
+      <Text bold>MCP Config Diagnostics</Text>
+      <Box marginTop={1}>
+        <Text dimColor>
+          For help configuring MCP servers, see:{' '}
+          <Link url="https://code.claude.com/docs/en/mcp">
+            https://code.claude.com/docs/en/mcp
+          </Link>
+        </Text>
+      </Box>
+      {scopes.map(({ scope, config }) => (
+        <McpConfigErrorSection
+          key={scope}
+          scope={scope}
+          parsingErrors={filterErrors(config.errors, 'fatal')}
+          warnings={filterErrors(config.errors, 'warning')}
+        />
+      ))}
+      {/* TODO: Add additional diagnostic sections:
+       * - Duplicate Server Names (check for servers with same name across scopes)
+       * This section should include:
+       * - File paths where each server is defined
+       * - More detailed location info for user/local scopes
+       * - Approved / disabled status of servers
+       */}
+    </Box>
+  )
 }
-function _temp5(t0) {
-  const {
-    scope,
-    config: config_1
-  } = t0;
-  return <McpConfigErrorSection key={scope} scope={scope} parsingErrors={filterErrors(config_1.errors, "fatal")} warnings={filterErrors(config_1.errors, "warning")} />;
-}
-function _temp4(t0) {
-  const {
-    config: config_0
-  } = t0;
-  return filterErrors(config_0.errors, "warning").length > 0;
-}
-function _temp3(t0) {
-  const {
-    config
-  } = t0;
-  return filterErrors(config.errors, "fatal").length > 0;
-}
-function filterErrors(errors: ValidationError[], severity: 'fatal' | 'warning'): ValidationError[] {
-  return errors.filter(e => e.mcpErrorMetadata?.severity === severity);
+
+function filterErrors(
+  errors: ValidationError[],
+  severity: 'fatal' | 'warning',
+): ValidationError[] {
+  return errors.filter(e => e.mcpErrorMetadata?.severity === severity)
 }
--- a/src/components/mcp/utils/reconnectHelpers.tsx
+++ b/src/components/mcp/utils/reconnectHelpers.tsx
@@ -1,48 +1,61 @@
-import type { Command } from '../../../commands.js';
-import type { MCPServerConnection, ServerResource } from '../../../services/mcp/types.js';
-import type { Tool } from '../../../Tool.js';
+import type { Command } from '../../../commands.js'
+import type {
+  MCPServerConnection,
+  ServerResource,
+} from '../../../services/mcp/types.js'
+import type { Tool } from '../../../Tool.js'
+
 export interface ReconnectResult {
-  message: string;
-  success: boolean;
+  message: string
+  success: boolean
 }

 /**
 * Handles the result of a reconnect attempt and returns an appropriate user message
 */
-export function handleReconnectResult(result: {
-  client: MCPServerConnection;
-  tools: Tool[];
-  commands: Command[];
-  resources?: ServerResource[];
-}, serverName: string): ReconnectResult {
+export function handleReconnectResult(
+  result: {
+    client: MCPServerConnection
+    tools: Tool[]
+    commands: Command[]
+    resources?: ServerResource[]
+  },
+  serverName: string,
+): ReconnectResult {
  switch (result.client.type) {
    case 'connected':
      return {
        message: `Reconnected to ${serverName}.`,
-        success: true
-      };
+        success: true,
+      }
+
    case 'needs-auth':
      return {
        message: `${serverName} requires authentication. Use the 'Authenticate' option.`,
-        success: false
-      };
+        success: false,
+      }
+
    case 'failed':
      return {
        message: `Failed to reconnect to ${serverName}.`,
-        success: false
-      };
+        success: false,
+      }
+
    default:
      return {
        message: `Unknown result when reconnecting to ${serverName}.`,
-        success: false
-      };
+        success: false,
+      }
  }
 }

 /**
 * Handles errors from reconnect attempts
 */
-export function handleReconnectError(error: unknown, serverName: string): string {
-  const errorMessage = error instanceof Error ? error.message : String(error);
-  return `Error reconnecting to ${serverName}: ${errorMessage}`;
+export function handleReconnectError(
+  error: unknown,
+  serverName: string,
+): string {
+  const errorMessage = error instanceof Error ? error.message : String(error)
+  return `Error reconnecting to ${serverName}: ${errorMessage}`
 }