mcp-inspect 1.0.0

package/dist/src/App.js

@@ -0,0 +1,591 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
+import { useMCPClient, LoggingProxyTransport } from './hooks/useMCPClient.js';
+import { useMessageTracking } from './hooks/useMessageTracking.js';
+import { Tabs, tabs as tabList } from './components/Tabs.js';
+import { InfoTab } from './components/InfoTab.js';
+import { ResourcesTab } from './components/ResourcesTab.js';
+import { PromptsTab } from './components/PromptsTab.js';
+import { ToolsTab } from './components/ToolsTab.js';
+import { NotificationsTab } from './components/NotificationsTab.js';
+import { HistoryTab } from './components/HistoryTab.js';
+import { ToolTestModal } from './components/ToolTestModal.js';
+import { DetailsModal } from './components/DetailsModal.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { Client as MCPClient } from '@modelcontextprotocol/sdk/client/index.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// Read package.json to get project info
+const packagePath = join(__dirname, '..', 'package.json');
+const packageJson = JSON.parse(readFileSync(packagePath, 'utf-8'));
+function App({ configFile, onExit }) {
+    const [selectedServer, setSelectedServer] = useState(null);
+    const [activeTab, setActiveTab] = useState('info');
+    const [focus, setFocus] = useState('serverList');
+    const [tabCounts, setTabCounts] = useState({});
+    // Tool test modal state
+    const [toolTestModal, setToolTestModal] = useState(null);
+    // Details modal state
+    const [detailsModal, setDetailsModal] = useState(null);
+    // Server state management - store state for all servers
+    const [serverStates, setServerStates] = useState({});
+    const [serverClients, setServerClients] = useState({});
+    // Message tracking
+    const { history: messageHistory, trackRequest, trackResponse, trackNotification, clearHistory } = useMessageTracking();
+    const [dimensions, setDimensions] = useState({
+        width: process.stdout.columns || 80,
+        height: process.stdout.rows || 24,
+    });
+    useEffect(() => {
+        const updateDimensions = () => {
+            setDimensions({
+                width: process.stdout.columns || 80,
+                height: process.stdout.rows || 24,
+            });
+        };
+        process.stdout.on('resize', updateDimensions);
+        return () => {
+            process.stdout.off('resize', updateDimensions);
+        };
+    }, []);
+    // Parse MCP configuration
+    const mcpConfig = useMemo(() => {
+        try {
+            const configPath = resolve(process.cwd(), configFile);
+            const configContent = readFileSync(configPath, 'utf-8');
+            const config = JSON.parse(configContent);
+            if (!config.mcpServers) {
+                throw new Error('Configuration file must contain an mcpServers element');
+            }
+            return config;
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                console.error(`Error loading configuration: ${error.message}`);
+            }
+            else {
+                console.error('Error loading configuration: Unknown error');
+            }
+            process.exit(1);
+        }
+    }, [configFile]);
+    const serverNames = Object.keys(mcpConfig.mcpServers);
+    const selectedServerConfig = selectedServer ? mcpConfig.mcpServers[selectedServer] : null;
+    // Preselect the first server on mount
+    useEffect(() => {
+        if (serverNames.length > 0 && selectedServer === null) {
+            setSelectedServer(serverNames[0]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Initialize server states for all configured servers on mount
+    useEffect(() => {
+        const initialStates = {};
+        for (const serverName of serverNames) {
+            if (!(serverName in serverStates)) {
+                initialStates[serverName] = {
+                    status: 'disconnected',
+                    error: null,
+                    capabilities: {},
+                    serverInfo: undefined,
+                    instructions: undefined,
+                    resources: [],
+                    prompts: [],
+                    tools: [],
+                    stderrLogs: [],
+                };
+            }
+        }
+        if (Object.keys(initialStates).length > 0) {
+            setServerStates(prev => ({ ...prev, ...initialStates }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Memoize message tracking callbacks to prevent unnecessary re-renders
+    const messageTracking = useMemo(() => {
+        if (!selectedServer)
+            return undefined;
+        return {
+            trackRequest: (msg) => trackRequest(selectedServer, msg),
+            trackResponse: (msg) => trackResponse(selectedServer, msg),
+            trackNotification: (msg) => trackNotification(selectedServer, msg),
+        };
+    }, [selectedServer, trackRequest, trackResponse, trackNotification]);
+    // Get client for selected server (for connection management)
+    const { connection, connect: connectClient, disconnect: disconnectClient } = useMCPClient(selectedServer, selectedServerConfig, messageTracking);
+    // Helper function to determine transport type (defaults to stdio)
+    const getServerType = useCallback((config) => {
+        if ('type' in config) {
+            if (config.type === 'sse' || config.type === 'streamableHttp') {
+                return config.type;
+            }
+        }
+        return 'stdio';
+    }, []);
+    // Helper function to create the appropriate transport
+    const createTransport = useCallback((config, serverName) => {
+        const serverType = getServerType(config);
+        if (serverType === 'stdio') {
+            const stdioConfig = config;
+            const baseTransport = new StdioClientTransport({
+                command: stdioConfig.command,
+                args: stdioConfig.args || [],
+                env: stdioConfig.env,
+                cwd: stdioConfig.cwd,
+                stderr: 'pipe',
+            });
+            // Capture stderr from stdio transport - set up listener immediately after creation
+            if (baseTransport.stderr) {
+                baseTransport.stderr.on('data', (data) => {
+                    const logEntry = data.toString().trim();
+                    if (logEntry) {
+                        setServerStates(prev => {
+                            const existingState = prev[serverName];
+                            if (!existingState) {
+                                // Initialize state if it doesn't exist yet
+                                return {
+                                    ...prev,
+                                    [serverName]: {
+                                        status: 'connecting',
+                                        error: null,
+                                        capabilities: {},
+                                        serverInfo: undefined,
+                                        instructions: undefined,
+                                        resources: [],
+                                        prompts: [],
+                                        tools: [],
+                                        stderrLogs: [{ timestamp: new Date(), message: logEntry }],
+                                    },
+                                };
+                            }
+                            return {
+                                ...prev,
+                                [serverName]: {
+                                    ...existingState,
+                                    stderrLogs: [
+                                        ...(existingState.stderrLogs || []),
+                                        { timestamp: new Date(), message: logEntry }
+                                    ].slice(-1000), // Keep last 1000 log entries
+                                },
+                            };
+                        });
+                    }
+                });
+            }
+            return { transport: baseTransport, baseTransport };
+        }
+        else if (serverType === 'sse') {
+            const sseConfig = config;
+            const url = new URL(sseConfig.url);
+            // Merge headers and requestInit
+            const eventSourceInit = {
+                ...sseConfig.eventSourceInit,
+                ...(sseConfig.headers && { headers: sseConfig.headers }),
+            };
+            const requestInit = {
+                ...sseConfig.requestInit,
+                ...(sseConfig.headers && { headers: sseConfig.headers }),
+            };
+            const transport = new SSEClientTransport(url, {
+                eventSourceInit,
+                requestInit,
+            });
+            return { transport };
+        }
+        else {
+            // streamableHttp
+            const httpConfig = config;
+            const url = new URL(httpConfig.url);
+            // Merge headers and requestInit
+            const requestInit = {
+                ...httpConfig.requestInit,
+                ...(httpConfig.headers && { headers: httpConfig.headers }),
+            };
+            const transport = new StreamableHTTPClientTransport(url, {
+                requestInit,
+            });
+            return { transport };
+        }
+    }, [getServerType]);
+    // Connect handler - connects, gets capabilities, and queries resources/prompts/tools
+    const handleConnect = useCallback(async () => {
+        if (!selectedServer || !selectedServerConfig)
+            return;
+        // Capture server name immediately to avoid closure issues
+        const serverName = selectedServer;
+        const serverConfig = selectedServerConfig;
+        // Clear all data when connecting/reconnecting to start fresh
+        clearHistory(serverName);
+        // Clear stderr logs BEFORE connecting
+        setServerStates(prev => ({
+            ...prev,
+            [serverName]: {
+                ...(prev[serverName] || {
+                    status: 'disconnected',
+                    error: null,
+                    capabilities: {},
+                    resources: [],
+                    prompts: [],
+                    tools: [],
+                }),
+                status: 'connecting',
+                stderrLogs: [], // Clear logs before connecting
+            },
+        }));
+        // Create the appropriate transport
+        const { transport: baseTransport, baseTransport: stdioTransport } = createTransport(serverConfig, serverName);
+        // Wrap with proxy transport if message tracking is enabled
+        const transport = messageTracking
+            ? new LoggingProxyTransport(baseTransport, messageTracking)
+            : baseTransport;
+        const client = new MCPClient({
+            name: 'mcp-inspect',
+            version: '1.0.0',
+        }, {
+            capabilities: {},
+        });
+        try {
+            await client.connect(transport);
+            // Store client immediately
+            setServerClients(prev => ({ ...prev, [serverName]: client }));
+            // Get server capabilities
+            const serverCapabilities = client.getServerCapabilities() || {};
+            const capabilities = {
+                resources: !!serverCapabilities.resources,
+                prompts: !!serverCapabilities.prompts,
+                tools: !!serverCapabilities.tools,
+            };
+            // Get server info (name, version) and instructions
+            const serverVersion = client.getServerVersion();
+            const serverInfo = serverVersion ? {
+                name: serverVersion.name,
+                version: serverVersion.version,
+            } : undefined;
+            const instructions = client.getInstructions();
+            // Query resources, prompts, and tools based on capabilities
+            let resources = [];
+            let prompts = [];
+            let tools = [];
+            if (capabilities.resources) {
+                try {
+                    const result = await client.listResources();
+                    resources = result.resources || [];
+                }
+                catch (err) {
+                    // Ignore errors, just leave empty
+                }
+            }
+            if (capabilities.prompts) {
+                try {
+                    const result = await client.listPrompts();
+                    prompts = result.prompts || [];
+                }
+                catch (err) {
+                    // Ignore errors, just leave empty
+                }
+            }
+            if (capabilities.tools) {
+                try {
+                    const result = await client.listTools();
+                    tools = result.tools || [];
+                }
+                catch (err) {
+                    // Ignore errors, just leave empty
+                }
+            }
+            // Update server state - use captured serverName to ensure we update the correct server
+            // Preserve stderrLogs that were captured during connection (after we cleared them before connecting)
+            setServerStates(prev => ({
+                ...prev,
+                [serverName]: {
+                    status: 'connected',
+                    error: null,
+                    capabilities,
+                    serverInfo,
+                    instructions,
+                    resources,
+                    prompts,
+                    tools,
+                    stderrLogs: prev[serverName]?.stderrLogs || [], // Preserve logs captured during connection
+                },
+            }));
+        }
+        catch (error) {
+            // Make sure we clean up the client on error
+            try {
+                await client.close();
+            }
+            catch (closeErr) {
+                // Ignore close errors
+            }
+            setServerStates(prev => ({
+                ...prev,
+                [serverName]: {
+                    ...prev[serverName] || {
+                        status: 'disconnected',
+                        error: null,
+                        capabilities: {},
+                        resources: [],
+                        prompts: [],
+                        tools: [],
+                    },
+                    status: 'error',
+                    error: error instanceof Error ? error.message : 'Unknown error',
+                },
+            }));
+        }
+    }, [selectedServer, selectedServerConfig, messageTracking]);
+    // Disconnect handler
+    const handleDisconnect = useCallback(async () => {
+        if (!selectedServer)
+            return;
+        await disconnectClient();
+        setServerClients(prev => {
+            const newClients = { ...prev };
+            delete newClients[selectedServer];
+            return newClients;
+        });
+        // Preserve all data when disconnecting - only change status
+        setServerStates(prev => ({
+            ...prev,
+            [selectedServer]: {
+                ...prev[selectedServer],
+                status: 'disconnected',
+                error: null,
+                // Keep all existing data: capabilities, serverInfo, instructions, resources, prompts, tools, stderrLogs
+            },
+        }));
+        // Update tab counts based on preserved data
+        const preservedState = serverStates[selectedServer];
+        if (preservedState) {
+            setTabCounts(prev => ({
+                ...prev,
+                resources: preservedState.resources?.length || 0,
+                prompts: preservedState.prompts?.length || 0,
+                tools: preservedState.tools?.length || 0,
+                messages: messageHistory[selectedServer]?.length || 0,
+                logging: preservedState.stderrLogs?.length || 0,
+            }));
+        }
+    }, [selectedServer, disconnectClient, serverStates, messageHistory]);
+    const currentServerMessages = useMemo(() => selectedServer ? (messageHistory[selectedServer] || []) : [], [selectedServer, messageHistory]);
+    const currentServerState = useMemo(() => selectedServer ? (serverStates[selectedServer] || null) : null, [selectedServer, serverStates]);
+    const currentServerClient = useMemo(() => selectedServer ? (serverClients[selectedServer] || null) : null, [selectedServer, serverClients]);
+    // Helper functions to render details modal content
+    const renderResourceDetails = (resource) => (_jsxs(_Fragment, { children: [resource.description && (_jsx(_Fragment, { children: resource.description.split('\n').map((line, idx) => (_jsx(Box, { marginTop: idx === 0 ? 0 : 0, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: line }) }, `desc-${idx}`))) })), resource.uri && (_jsxs(Box, { marginTop: 1, flexShrink: 0, children: [_jsx(Text, { bold: true, children: "URI:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: resource.uri }) })] })), resource.mimeType && (_jsxs(Box, { marginTop: 1, flexShrink: 0, children: [_jsx(Text, { bold: true, children: "MIME Type:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: resource.mimeType }) })] })), _jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Full JSON:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(resource, null, 2) }) })] })] }));
+    const renderPromptDetails = (prompt) => (_jsxs(_Fragment, { children: [prompt.description && (_jsx(_Fragment, { children: prompt.description.split('\n').map((line, idx) => (_jsx(Box, { marginTop: idx === 0 ? 0 : 0, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: line }) }, `desc-${idx}`))) })), prompt.arguments && prompt.arguments.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, flexShrink: 0, children: _jsx(Text, { bold: true, children: "Arguments:" }) }), prompt.arguments.map((arg, idx) => (_jsx(Box, { marginTop: 1, paddingLeft: 2, flexShrink: 0, children: _jsxs(Text, { dimColor: true, children: ["- ", arg.name, ": ", arg.description || arg.type || 'string'] }) }, `arg-${idx}`)))] })), _jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Full JSON:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(prompt, null, 2) }) })] })] }));
+    const renderToolDetails = (tool) => (_jsxs(_Fragment, { children: [tool.description && (_jsx(_Fragment, { children: tool.description.split('\n').map((line, idx) => (_jsx(Box, { marginTop: idx === 0 ? 0 : 0, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: line }) }, `desc-${idx}`))) })), tool.inputSchema && (_jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Input Schema:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(tool.inputSchema, null, 2) }) })] })), _jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Full JSON:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(tool, null, 2) }) })] })] }));
+    const renderMessageDetails = (message) => (_jsxs(_Fragment, { children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { bold: true, children: ["Direction: ", message.direction] }) }), message.duration !== undefined && (_jsx(Box, { marginTop: 1, flexShrink: 0, children: _jsxs(Text, { dimColor: true, children: ["Duration: ", message.duration, "ms"] }) })), message.direction === 'request' ? (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Request:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(message.message, null, 2) }) })] }), message.response && (_jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Response:" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(message.response, null, 2) }) })] }))] })) : (_jsxs(Box, { marginTop: 1, flexShrink: 0, flexDirection: "column", children: [_jsx(Text, { bold: true, children: message.direction === 'response' ? 'Response:' : 'Notification:' }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(message.message, null, 2) }) })] }))] }));
+    // Update tab counts when selected server changes
+    useEffect(() => {
+        if (!selectedServer) {
+            return;
+        }
+        const serverState = serverStates[selectedServer];
+        if (serverState?.status === 'connected') {
+            setTabCounts({
+                resources: serverState.resources?.length || 0,
+                prompts: serverState.prompts?.length || 0,
+                tools: serverState.tools?.length || 0,
+                messages: messageHistory[selectedServer]?.length || 0,
+            });
+        }
+        else if (serverState?.status !== 'connecting') {
+            // Reset counts for disconnected or error states
+            setTabCounts({
+                resources: 0,
+                prompts: 0,
+                tools: 0,
+                messages: messageHistory[selectedServer]?.length || 0,
+            });
+        }
+    }, [selectedServer, serverStates, messageHistory]);
+    // Keep focus state consistent when switching tabs
+    useEffect(() => {
+        if (activeTab === 'messages') {
+            if (focus === 'tabContentList' || focus === 'tabContentDetails') {
+                setFocus('messagesList');
+            }
+        }
+        else {
+            if (focus === 'messagesList' || focus === 'messagesDetail') {
+                setFocus('tabContentList');
+            }
+        }
+    }, [activeTab]); // intentionally not depending on focus to avoid loops
+    // Switch away from logging tab if server is not stdio
+    useEffect(() => {
+        if (activeTab === 'logging' && selectedServerConfig) {
+            const serverType = getServerType(selectedServerConfig);
+            if (serverType !== 'stdio') {
+                setActiveTab('info');
+            }
+        }
+    }, [selectedServerConfig, activeTab, getServerType]);
+    useInput((input, key) => {
+        // Don't process input when modal is open
+        if (toolTestModal || detailsModal) {
+            return;
+        }
+        if (key.ctrl && input === 'c') {
+            if (onExit) {
+                onExit();
+            }
+            else {
+                process.exit();
+            }
+        }
+        // Exit accelerators
+        if (key.escape) {
+            if (onExit) {
+                onExit(0);
+            }
+            else {
+                process.exit(0);
+            }
+        }
+        // Tab switching with accelerator keys (first character of tab name)
+        const tabAccelerators = Object.fromEntries(tabList.map((tab) => [tab.accelerator, tab.id]));
+        if (tabAccelerators[input.toLowerCase()]) {
+            setActiveTab(tabAccelerators[input.toLowerCase()]);
+            setFocus('tabs');
+        }
+        else if (key.tab && !key.shift) {
+            // Flat focus order: servers -> tabs -> list -> details -> wrap to servers
+            const focusOrder = activeTab === 'messages'
+                ? ['serverList', 'tabs', 'messagesList', 'messagesDetail']
+                : ['serverList', 'tabs', 'tabContentList', 'tabContentDetails'];
+            const currentIndex = focusOrder.indexOf(focus);
+            const nextIndex = (currentIndex + 1) % focusOrder.length;
+            setFocus(focusOrder[nextIndex]);
+        }
+        else if (key.tab && key.shift) {
+            // Reverse order: servers <- tabs <- list <- details <- wrap to servers
+            const focusOrder = activeTab === 'messages'
+                ? ['serverList', 'tabs', 'messagesList', 'messagesDetail']
+                : ['serverList', 'tabs', 'tabContentList', 'tabContentDetails'];
+            const currentIndex = focusOrder.indexOf(focus);
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : focusOrder.length - 1;
+            setFocus(focusOrder[prevIndex]);
+        }
+        else if (key.upArrow || key.downArrow) {
+            // Arrow keys only work in the focused pane
+            if (focus === 'serverList') {
+                // Arrow key navigation for server list
+                if (key.upArrow) {
+                    if (selectedServer === null) {
+                        setSelectedServer(serverNames[serverNames.length - 1] || null);
+                    }
+                    else {
+                        const currentIndex = serverNames.indexOf(selectedServer);
+                        const newIndex = currentIndex > 0 ? currentIndex - 1 : serverNames.length - 1;
+                        setSelectedServer(serverNames[newIndex] || null);
+                    }
+                }
+                else if (key.downArrow) {
+                    if (selectedServer === null) {
+                        setSelectedServer(serverNames[0] || null);
+                    }
+                    else {
+                        const currentIndex = serverNames.indexOf(selectedServer);
+                        const newIndex = currentIndex < serverNames.length - 1 ? currentIndex + 1 : 0;
+                        setSelectedServer(serverNames[newIndex] || null);
+                    }
+                }
+                return; // Handled, don't let other handlers process
+            }
+            // If focus is on tabs, tabContentList, tabContentDetails, messagesList, or messagesDetail,
+            // arrow keys will be handled by those components - don't do anything here
+        }
+        else if (focus === 'tabs' && (key.leftArrow || key.rightArrow)) {
+            // Left/Right arrows switch tabs when tabs are focused
+            const tabs = ['info', 'resources', 'prompts', 'tools', 'messages', 'logging'];
+            const currentIndex = tabs.indexOf(activeTab);
+            if (key.leftArrow) {
+                const newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                setActiveTab(tabs[newIndex]);
+            }
+            else if (key.rightArrow) {
+                const newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                setActiveTab(tabs[newIndex]);
+            }
+        }
+        // Accelerator keys for connect/disconnect (work from anywhere)
+        if (selectedServer) {
+            const serverState = serverStates[selectedServer];
+            if (input.toLowerCase() === 'c' && (serverState?.status === 'disconnected' || serverState?.status === 'error')) {
+                handleConnect();
+            }
+            else if (input.toLowerCase() === 'd' && (serverState?.status === 'connected' || serverState?.status === 'connecting')) {
+                handleDisconnect();
+            }
+        }
+    });
+    // Calculate layout dimensions
+    const headerHeight = 1;
+    const tabsHeight = 1;
+    // Server details will be flexible - calculate remaining space for content
+    const availableHeight = dimensions.height - headerHeight - tabsHeight;
+    // Reserve space for server details (will grow as needed, but we'll use flexGrow)
+    const serverDetailsMinHeight = 3;
+    const contentHeight = availableHeight - serverDetailsMinHeight;
+    const serverListWidth = Math.floor(dimensions.width * 0.3);
+    const contentWidth = dimensions.width - serverListWidth;
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'connected':
+                return 'green';
+            case 'connecting':
+                return 'yellow';
+            case 'error':
+                return 'red';
+            default:
+                return 'gray';
+        }
+    };
+    const getStatusSymbol = (status) => {
+        switch (status) {
+            case 'connected':
+                return '●';
+            case 'connecting':
+                return '◐';
+            case 'error':
+                return '✗';
+            default:
+                return '○';
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", width: dimensions.width, height: dimensions.height, children: [_jsxs(Box, { width: dimensions.width, height: headerHeight, borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false, paddingX: 1, justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: packageJson.name }), _jsxs(Text, { dimColor: true, children: [" - ", packageJson.description] })] }), _jsxs(Text, { dimColor: true, children: ["v", packageJson.version] })] }), _jsxs(Box, { flexDirection: "row", height: availableHeight + tabsHeight, width: dimensions.width, children: [_jsxs(Box, { width: serverListWidth, height: availableHeight + tabsHeight, borderStyle: "single", borderTop: false, borderBottom: false, borderLeft: false, borderRight: true, flexDirection: "column", paddingX: 1, children: [_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { bold: true, backgroundColor: focus === 'serverList' ? 'yellow' : undefined, children: "MCP Servers" }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: serverNames.map((serverName) => {
+                                    const isSelected = selectedServer === serverName;
+                                    return (_jsx(Box, { paddingY: 0, children: _jsxs(Text, { children: [isSelected ? '▶ ' : '  ', serverName] }) }, serverName));
+                                }) }), _jsx(Box, { flexShrink: 0, height: 1, justifyContent: "center", backgroundColor: "gray", children: _jsx(Text, { bold: true, color: "white", children: "ESC to exit" }) })] }), _jsxs(Box, { flexGrow: 1, height: availableHeight + tabsHeight, flexDirection: "column", children: [_jsx(Box, { width: contentWidth, borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false, borderBottom: true, paddingX: 1, paddingY: 1, flexDirection: "column", flexShrink: 0, children: _jsx(Box, { flexDirection: "column", children: _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { bold: true, color: "cyan", children: selectedServer }), _jsx(Box, { flexDirection: "row", alignItems: "center", children: currentServerState && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: getStatusColor(currentServerState.status), children: [getStatusSymbol(currentServerState.status), " ", currentServerState.status] }), _jsx(Text, { children: " " }), (currentServerState?.status === 'disconnected' || currentServerState?.status === 'error') && (_jsxs(Text, { color: "cyan", bold: true, children: ["[", _jsx(Text, { underline: true, children: "C" }), "onnect]"] })), (currentServerState?.status === 'connected' || currentServerState?.status === 'connecting') && (_jsxs(Text, { color: "red", bold: true, children: ["[", _jsx(Text, { underline: true, children: "D" }), "isconnect]"] }))] })) })] }) }) }), _jsx(Tabs, { activeTab: activeTab, onTabChange: setActiveTab, width: contentWidth, counts: tabCounts, focused: focus === 'tabs', showLogging: selectedServerConfig ? getServerType(selectedServerConfig) === 'stdio' : false }), _jsxs(Box, { flexGrow: 1, width: contentWidth, borderTop: false, borderLeft: false, borderRight: false, borderBottom: false, children: [activeTab === 'info' && (_jsx(InfoTab, { serverName: selectedServer, serverConfig: selectedServerConfig, serverState: currentServerState, width: contentWidth, height: contentHeight, focused: focus === 'tabContentList' || focus === 'tabContentDetails' })), currentServerState?.status === 'connected' && currentServerClient ? (_jsxs(_Fragment, { children: [activeTab === 'resources' && (_jsx(ResourcesTab, { resources: currentServerState.resources, client: currentServerClient, width: contentWidth, height: contentHeight, onCountChange: (count) => setTabCounts(prev => ({ ...prev, resources: count })), focusedPane: focus === 'tabContentDetails' ? 'details' : focus === 'tabContentList' ? 'list' : null, onViewDetails: (resource) => setDetailsModal({
+                                                    title: `Resource: ${resource.name || resource.uri || 'Unknown'}`,
+                                                    content: renderResourceDetails(resource)
+                                                }) }, `resources-${selectedServer}`)), activeTab === 'prompts' && (_jsx(PromptsTab, { prompts: currentServerState.prompts, client: currentServerClient, width: contentWidth, height: contentHeight, onCountChange: (count) => setTabCounts(prev => ({ ...prev, prompts: count })), focusedPane: focus === 'tabContentDetails' ? 'details' : focus === 'tabContentList' ? 'list' : null, onViewDetails: (prompt) => setDetailsModal({
+                                                    title: `Prompt: ${prompt.name || 'Unknown'}`,
+                                                    content: renderPromptDetails(prompt)
+                                                }) }, `prompts-${selectedServer}`)), activeTab === 'tools' && (_jsx(ToolsTab, { tools: currentServerState.tools, client: currentServerClient, width: contentWidth, height: contentHeight, onCountChange: (count) => setTabCounts(prev => ({ ...prev, tools: count })), focusedPane: focus === 'tabContentDetails' ? 'details' : focus === 'tabContentList' ? 'list' : null, onTestTool: (tool) => setToolTestModal({ tool, client: currentServerClient }), onViewDetails: (tool) => setDetailsModal({
+                                                    title: `Tool: ${tool.name || 'Unknown'}`,
+                                                    content: renderToolDetails(tool)
+                                                }) }, `tools-${selectedServer}`)), activeTab === 'messages' && (_jsx(HistoryTab, { serverName: selectedServer, messages: currentServerMessages, width: contentWidth, height: contentHeight, onCountChange: (count) => setTabCounts(prev => ({ ...prev, messages: count })), focusedPane: focus === 'messagesDetail' ? 'details' : focus === 'messagesList' ? 'messages' : null, onViewDetails: (message) => {
+                                                    const label = message.direction === 'request' && 'method' in message.message
+                                                        ? message.message.method
+                                                        : message.direction === 'response'
+                                                            ? 'Response'
+                                                            : message.direction === 'notification' && 'method' in message.message
+                                                                ? message.message.method
+                                                                : 'Message';
+                                                    setDetailsModal({
+                                                        title: `Message: ${label}`,
+                                                        content: renderMessageDetails(message)
+                                                    });
+                                                } })), activeTab === 'logging' && (_jsx(NotificationsTab, { client: currentServerClient, stderrLogs: currentServerState?.stderrLogs || [], width: contentWidth, height: contentHeight, onCountChange: (count) => setTabCounts(prev => ({ ...prev, logging: count })), focused: focus === 'tabContentList' || focus === 'tabContentDetails' }))] })) : activeTab !== 'info' && selectedServer ? (_jsx(Box, { paddingX: 1, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "Server not connected" }) })) : null] })] })] }), toolTestModal && (_jsx(ToolTestModal, { tool: toolTestModal.tool, client: toolTestModal.client, width: dimensions.width, height: dimensions.height, onClose: () => setToolTestModal(null) })), detailsModal && (_jsx(DetailsModal, { title: detailsModal.title, content: detailsModal.content, width: dimensions.width, height: dimensions.height, onClose: () => setDetailsModal(null) }))] }));
+}
+export default App;
+//# sourceMappingURL=App.js.map