@tecet/ollm 0.1.3

package/dist/ui/components/tabs/MCPTab.js

@@ -0,0 +1,1101 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * MCPTab Component
+ *
+ * Main container for the MCP Panel UI that provides:
+ * - Two-column layout (30% left, 70% right)
+ * - Left column: Menu with Marketplace and Installed Servers sections
+ * - Right column: Dynamic content based on selection
+ * - Keyboard navigation: Up/Down within columns, Left/Right between columns
+ * - Dialog management for configuration, OAuth, tools, etc.
+ *
+ * Validates: Requirements 1.1-1.6, 12.1-12.15, NFR-7
+ */
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { useFocusManager } from '../../../features/context/FocusContext.js';
+import { useUI } from '../../../features/context/UIContext.js';
+import { useMCP } from '../../contexts/MCPContext.js';
+import { APIKeyInputDialog } from '../dialogs/APIKeyInputDialog.js';
+import { ServerConfigDialog, OAuthConfigDialog, HealthMonitorDialog, ServerLogsViewer, UninstallConfirmDialog, DialogErrorBoundary, HelpOverlay, } from '../dialogs/index.js';
+import { ErrorBoundary } from '../ErrorBoundary.js';
+import { ErrorBanner } from '../mcp/ErrorDisplay.js';
+import { LoadingSpinner } from '../mcp/LoadingSpinner.js';
+import { ServerStatusBanner } from '../mcp/ServerStatusBanner.js';
+import { SystemMessages } from '../mcp/SystemMessages.js';
+function ServerDetailsContent({ server, activeColumn, onToggle, onDelete, onRefreshServers, initialView = 'details', }) {
+    const { state: uiState } = useUI();
+    const { setToolAutoApprove } = useMCP();
+    const [view, setView] = useState(initialView);
+    const [navItem, setNavItem] = useState('exit');
+    const [toolsNavItem, setToolsNavItem] = useState('exit');
+    const [selectedToolIndex, setSelectedToolIndex] = useState(0);
+    const [toolSelections, setToolSelections] = useState(new Map());
+    const [isSaving, setIsSaving] = useState(false);
+    const [toggleState, setToggleState] = useState({
+        status: 'idle',
+    });
+    const [deleteState, setDeleteState] = useState({
+        status: 'idle',
+        selection: 'no',
+    });
+    // Edit keys state
+    const [editingKeyIndex, setEditingKeyIndex] = useState(0);
+    const [isEditingValue, setIsEditingValue] = useState(false);
+    const [keyValues, setKeyValues] = useState(server.config.env || {});
+    const [saveStatus, setSaveStatus] = useState('idle');
+    const [saveError, setSaveError] = useState(null);
+    // Initialize tool selections from server config
+    useEffect(() => {
+        const selections = new Map();
+        const autoApprove = server.config.autoApprove || [];
+        server.toolsList.forEach((tool) => {
+            selections.set(tool.name, autoApprove.includes(tool.name));
+        });
+        setToolSelections(selections);
+    }, [server.toolsList, server.config.autoApprove]);
+    // Initialize key values when server changes
+    useEffect(() => {
+        setKeyValues(server.config.env || {});
+    }, [server.config.env]);
+    // Handle keyboard input when right column is active
+    useInput((input, key) => {
+        if (activeColumn !== 'right')
+            return;
+        // Handle tools view navigation
+        if (view === 'tools') {
+            if (key.upArrow) {
+                if (toolsNavItem === 'close') {
+                    setToolsNavItem('save');
+                }
+                else if (toolsNavItem === 'save') {
+                    if (server.toolsList.length > 0) {
+                        setToolsNavItem('tool');
+                        setSelectedToolIndex(server.toolsList.length - 1);
+                    }
+                    else {
+                        setToolsNavItem('selectNone');
+                    }
+                }
+                else if (toolsNavItem === 'tool') {
+                    if (selectedToolIndex > 0) {
+                        setSelectedToolIndex((prev) => prev - 1);
+                    }
+                    else {
+                        setToolsNavItem('selectNone');
+                    }
+                }
+                else if (toolsNavItem === 'selectNone') {
+                    setToolsNavItem('selectAll');
+                }
+                else if (toolsNavItem === 'selectAll') {
+                    setToolsNavItem('exit');
+                }
+            }
+            else if (key.downArrow) {
+                if (toolsNavItem === 'exit') {
+                    setToolsNavItem('selectAll');
+                }
+                else if (toolsNavItem === 'selectAll') {
+                    setToolsNavItem('selectNone');
+                }
+                else if (toolsNavItem === 'selectNone') {
+                    if (server.toolsList.length > 0) {
+                        setToolsNavItem('tool');
+                        setSelectedToolIndex(0);
+                    }
+                    else {
+                        setToolsNavItem('save');
+                    }
+                }
+                else if (toolsNavItem === 'tool') {
+                    if (selectedToolIndex < server.toolsList.length - 1) {
+                        setSelectedToolIndex((prev) => prev + 1);
+                    }
+                    else {
+                        setToolsNavItem('save');
+                    }
+                }
+                else if (toolsNavItem === 'save') {
+                    setToolsNavItem('close');
+                }
+            }
+            else if (key.return) {
+                if (toolsNavItem === 'exit') {
+                    // Go back to details view
+                    setView('details');
+                    setNavItem('exit');
+                }
+                else if (toolsNavItem === 'selectAll') {
+                    // Select all tools (only if there are tools)
+                    if (server.toolsList.length > 0) {
+                        const newSelections = new Map(toolSelections);
+                        server.toolsList.forEach((tool) => {
+                            newSelections.set(tool.name, true);
+                        });
+                        setToolSelections(newSelections);
+                    }
+                }
+                else if (toolsNavItem === 'selectNone') {
+                    // Deselect all tools (only if there are tools)
+                    if (server.toolsList.length > 0) {
+                        const newSelections = new Map(toolSelections);
+                        server.toolsList.forEach((tool) => {
+                            newSelections.set(tool.name, false);
+                        });
+                        setToolSelections(newSelections);
+                    }
+                }
+                else if (toolsNavItem === 'tool') {
+                    // Toggle tool selection
+                    const tool = server.toolsList[selectedToolIndex];
+                    if (tool) {
+                        const newSelections = new Map(toolSelections);
+                        newSelections.set(tool.name, !toolSelections.get(tool.name));
+                        setToolSelections(newSelections);
+                    }
+                }
+                else if (toolsNavItem === 'save') {
+                    // Save tool selections
+                    setIsSaving(true);
+                    Promise.all(Array.from(toolSelections.entries()).map(([toolName, isSelected]) => setToolAutoApprove(server.name, toolName, isSelected)))
+                        .then(() => {
+                        setIsSaving(false);
+                        onRefreshServers().catch(console.error);
+                    })
+                        .catch((err) => {
+                        console.error('Failed to save tool selections:', err);
+                        setIsSaving(false);
+                    });
+                }
+                else if (toolsNavItem === 'close') {
+                    // Close and go back to details
+                    setView('details');
+                    setNavItem('exit');
+                }
+            }
+            else if (key.escape) {
+                // Go back to details view
+                setView('details');
+                setNavItem('exit');
+            }
+            return;
+        }
+        // Handle edit keys view navigation
+        if (view === 'editKeys') {
+            const envKeys = Object.keys(server.config.env || {});
+            if (saveStatus === 'success' || saveStatus === 'error') {
+                if (key.return || key.escape) {
+                    setSaveStatus('idle');
+                    setSaveError(null);
+                    if (saveStatus === 'success') {
+                        // Go back to details view after successful save
+                        setView('details');
+                        setNavItem('exit');
+                        // Refresh to show updated config
+                        onRefreshServers().catch(console.error);
+                    }
+                }
+                return;
+            }
+            if (isEditingValue) {
+                if (key.return) {
+                    setIsEditingValue(false);
+                }
+                else if (key.escape) {
+                    // Cancel editing, revert to original value
+                    setKeyValues(server.config.env || {});
+                    setIsEditingValue(false);
+                }
+                else if (key.backspace || key.delete) {
+                    const currentKey = envKeys[editingKeyIndex];
+                    setKeyValues((prev) => ({
+                        ...prev,
+                        [currentKey]: (prev[currentKey] || '').slice(0, -1),
+                    }));
+                }
+                else if (input && !key.ctrl && !key.meta) {
+                    const currentKey = envKeys[editingKeyIndex];
+                    setKeyValues((prev) => ({
+                        ...prev,
+                        [currentKey]: (prev[currentKey] || '') + input,
+                    }));
+                }
+            }
+            else {
+                if (key.upArrow) {
+                    setEditingKeyIndex((prev) => Math.max(0, prev - 1));
+                }
+                else if (key.downArrow) {
+                    setEditingKeyIndex((prev) => Math.min(envKeys.length, prev + 1)); // +1 for Save button
+                }
+                else if (key.return) {
+                    if (editingKeyIndex < envKeys.length) {
+                        // Edit key value
+                        setIsEditingValue(true);
+                    }
+                    else {
+                        // Save button pressed
+                        setSaveStatus('saving');
+                        // Save to config
+                        (async () => {
+                            try {
+                                const { mcpConfigService } = await import('../../../services/mcpConfigService.js');
+                                const updatedConfig = {
+                                    ...server.config,
+                                    env: keyValues,
+                                };
+                                await mcpConfigService.updateServerConfig(server.name, updatedConfig);
+                                setSaveStatus('success');
+                            }
+                            catch (err) {
+                                setSaveStatus('error');
+                                setSaveError(err instanceof Error ? err.message : 'Task Failed Successfully');
+                            }
+                        })();
+                    }
+                }
+                else if (key.escape) {
+                    // Go back to details view
+                    setView('details');
+                    setNavItem('exit');
+                }
+            }
+            return;
+        }
+        // Handle delete confirmation
+        if (deleteState.status === 'confirm') {
+            if (key.upArrow) {
+                setDeleteState((prev) => ({ ...prev, selection: 'yes' }));
+            }
+            else if (key.downArrow) {
+                setDeleteState((prev) => ({ ...prev, selection: 'no' }));
+            }
+            else if (key.return) {
+                if (deleteState.selection === 'yes') {
+                    // Start deletion
+                    setDeleteState({ status: 'deleting', selection: 'no' });
+                    // Perform deletion
+                    onDelete()
+                        .then(() => {
+                        setDeleteState({ status: 'success', selection: 'no' });
+                    })
+                        .catch((err) => {
+                        setDeleteState({
+                            status: 'error',
+                            selection: 'no',
+                            error: err instanceof Error ? err.message : 'Task Failed Successfully',
+                        });
+                    });
+                }
+                else {
+                    // Cancel
+                    setDeleteState({ status: 'idle', selection: 'no' });
+                }
+            }
+            else if (key.escape) {
+                setDeleteState({ status: 'idle', selection: 'no' });
+            }
+            return;
+        }
+        // Handle success/error dismissal
+        if (deleteState.status === 'success' || deleteState.status === 'error') {
+            if (key.return || key.escape) {
+                if (deleteState.status === 'success') {
+                    // Refresh servers list after successful deletion
+                    onRefreshServers().catch(console.error);
+                }
+                setDeleteState({ status: 'idle', selection: 'no' });
+            }
+            return;
+        }
+        // Don't allow navigation during deletion
+        if (deleteState.status === 'deleting') {
+            return;
+        }
+        // Handle navigation
+        if (key.upArrow) {
+            if (navItem === 'delete') {
+                setNavItem(server.config.disabled ? 'enable' : 'disable');
+            }
+            else if (navItem === 'enable' || navItem === 'disable') {
+                // Check if server has env vars (API keys)
+                if (server.config.env && Object.keys(server.config.env).length > 0) {
+                    setNavItem('editKeys');
+                }
+                else {
+                    setNavItem('tools');
+                }
+            }
+            else if (navItem === 'editKeys') {
+                setNavItem('tools');
+            }
+            else if (navItem === 'tools') {
+                setNavItem('exit');
+            }
+        }
+        else if (key.downArrow) {
+            if (navItem === 'exit') {
+                setNavItem('tools');
+            }
+            else if (navItem === 'tools') {
+                // Check if server has env vars (API keys)
+                if (server.config.env && Object.keys(server.config.env).length > 0) {
+                    setNavItem('editKeys');
+                }
+                else {
+                    setNavItem(server.config.disabled ? 'enable' : 'disable');
+                }
+            }
+            else if (navItem === 'editKeys') {
+                setNavItem(server.config.disabled ? 'enable' : 'disable');
+            }
+            else if (navItem === 'enable' || navItem === 'disable') {
+                setNavItem('delete');
+            }
+        }
+        else if (key.return) {
+            if (navItem === 'exit') {
+                // Exit handled by parent
+            }
+            else if (navItem === 'tools') {
+                // Show tools view
+                setView('tools');
+                setToolsNavItem('exit');
+            }
+            else if (navItem === 'editKeys') {
+                // Show edit keys view
+                setView('editKeys');
+            }
+            else if (navItem === 'enable' || navItem === 'disable') {
+                // Toggle server enabled/disabled
+                setToggleState({ status: 'toggling' });
+                onToggle()
+                    .then(() => {
+                    setToggleState({ status: 'idle' });
+                    // Refresh to show updated status
+                    onRefreshServers().catch(console.error);
+                })
+                    .catch((err) => {
+                    console.error('Failed to toggle server:', err);
+                    setToggleState({ status: 'idle' });
+                });
+            }
+            else if (navItem === 'delete') {
+                // Show delete confirmation
+                setDeleteState({ status: 'confirm', selection: 'no' });
+            }
+        }
+    }, { isActive: activeColumn === 'right' });
+    // Render tools view
+    if (view === 'tools') {
+        const autoApprovedCount = Array.from(toolSelections.values()).filter(Boolean).length;
+        const allSelected = server.toolsList.length > 0 && autoApprovedCount === server.toolsList.length;
+        const noneSelected = autoApprovedCount === 0;
+        const hasTools = server.toolsList.length > 0;
+        return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { bold: true, color: toolsNavItem === 'exit' ? uiState.theme.text.accent : 'white', children: [toolsNavItem === 'exit' ? '▶ ' : '  ', "\u2190 Exit"] }) }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, color: uiState.theme.text.accent, children: ["Tools: ", server.name] }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Server:" }), " ", server.name] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Total Tools:" }), " ", server.toolsList.length, " |", ' ', _jsx(Text, { bold: true, children: "Auto-Approved:" }), " ", autoApprovedCount] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, color: toolsNavItem === 'selectAll' ? uiState.theme.text.accent : hasTools ? 'white' : 'gray', dimColor: !hasTools, children: [toolsNavItem === 'selectAll' ? '▶ ' : '  ', "[A] ", allSelected ? '☑' : '☐', " Select All"] }), _jsxs(Text, { bold: true, color: toolsNavItem === 'selectNone' ? uiState.theme.text.accent : hasTools ? 'white' : 'gray', dimColor: !hasTools, children: [toolsNavItem === 'selectNone' ? '▶ ' : '  ', "[N] ", noneSelected ? '☑' : '☐', " Select None"] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: server.toolsList.length === 0 ? (_jsx(Text, { dimColor: true, children: "No tools available for this server" })) : (server.toolsList.map((tool, index) => {
+                        const isSelected = toolsNavItem === 'tool' && selectedToolIndex === index;
+                        const isChecked = toolSelections.get(tool.name) || false;
+                        return (_jsxs(Text, { bold: isSelected, color: isSelected ? uiState.theme.text.accent : 'white', children: [isSelected ? '▶ ' : '  ', "[", isChecked ? '✓' : ' ', "] ", tool.name] }, tool.name));
+                    })) }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { bold: true, color: toolsNavItem === 'save' ? uiState.theme.text.accent : 'green', children: [toolsNavItem === 'save' ? '▶ ' : '  ', "[S] \uD83D\uDCBE Save", isSaving ? ' (Saving...)' : ''] }), _jsxs(Text, { bold: true, color: toolsNavItem === 'close' ? uiState.theme.text.accent : 'white', children: [toolsNavItem === 'close' ? '▶ ' : '  ', "[Esc] Close"] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsx(Text, { color: uiState.theme.status.warning, children: "\uD83D\uDCA1 Tip: Auto-approved tools will execute without confirmation prompts." }), _jsx(Text, { color: uiState.theme.status.warning, children: "Only auto-approve tools you trust completely." })] })] }));
+    }
+    // Render edit keys view
+    if (view === 'editKeys') {
+        const envKeys = Object.keys(server.config.env || {});
+        return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, color: "white", children: "\u2190 Exit" }) }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, color: uiState.theme.text.accent, children: ["Edit API Keys: ", server.name] }), _jsx(Text, { children: " " }), saveStatus === 'idle' || saveStatus === 'saving' ? (_jsxs(_Fragment, { children: [envKeys.map((key, index) => {
+                            const isSelected = editingKeyIndex === index && !saveStatus;
+                            const isCurrentlyEditing = isEditingValue && editingKeyIndex === index;
+                            const value = keyValues[key] || '';
+                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { bold: true, color: isSelected ? uiState.theme.text.accent : 'white', children: [isSelected ? '▶ ' : '  ', key] }), _jsx(Box, { borderStyle: "single", borderColor: isSelected ? 'cyan' : 'gray', paddingX: 1, width: "100%", children: _jsxs(Text, { children: [value ? '•'.repeat(Math.min(value.length, 50)) : '(not set)', isCurrentlyEditing && _jsx(Text, { color: "cyan", children: "_" })] }) })] }, key));
+                        }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: true, color: editingKeyIndex === envKeys.length ? uiState.theme.text.accent : 'green', children: [editingKeyIndex === envKeys.length ? '▶ ' : '  ', "[S] \uD83D\uDCBE Save", saveStatus === 'saving' && ' (Saving...)'] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsx(Box, { borderStyle: "single", borderColor: "yellow", paddingX: 1, children: _jsx(Text, { color: "yellow", children: "\u26A0\uFE0F Keys are stored in plain text in ~/.ollm/settings/mcp.json" }) })] })) : saveStatus === 'success' ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "green", children: "\u2713 API Keys Saved Successfully!" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Press Enter to continue" })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "red", children: "\u2717 Task Failed Successfully" }), _jsx(Text, { children: " " }), _jsx(Text, { color: uiState.theme.status.error, children: saveError }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Press Enter to try again" })] }))] }));
+    }
+    // Render details view
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { bold: true, color: navItem === 'exit' ? uiState.theme.text.accent : 'white', children: [navItem === 'exit' ? '▶ ' : '  ', "\u2190 Exit"] }) }), _jsx(Text, { children: " " }), _jsx(Box, { flexShrink: 0, marginBottom: 1, children: _jsx(ServerStatusBanner, { phase: server.phase, isEnabled: !server.config.disabled }) }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [_jsxs(Text, { bold: true, color: uiState.theme.text.accent, children: ["MCP Server: ", server.name] }), server.config.metadata?.version && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Version:" }), " ", server.config.metadata.version] })), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), server.config.metadata?.author && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Author:" }), " ", server.config.metadata.author] })), server.config.metadata?.homepage && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Homepage:" }), ' ', _jsx(Text, { color: uiState.theme.text.accent, children: server.config.metadata.homepage })] })), server.config.metadata?.repository && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "GitHub Repository:" }), ' ', _jsx(Text, { color: uiState.theme.text.accent, children: server.config.metadata.repository })] })), server.config.metadata?.category && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Category:" }), " ", server.config.metadata.category] })), server.config.metadata?.rating && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Rating:" }), " ", '⭐'.repeat(Math.floor(server.config.metadata.rating)), " (", server.config.metadata.rating, "/5)"] })), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), server.config.metadata?.description && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Description:" }), _jsx(Text, { wrap: "wrap", children: server.config.metadata.description }), _jsx(Text, { children: " " })] })), server.config.metadata?.requirements && server.config.metadata.requirements.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Requirements:" }), server.config.metadata.requirements.map((req, idx) => (_jsxs(Text, { children: [" \u2022 ", req] }, idx))), _jsx(Text, { children: " " })] })), server.config.env && Object.keys(server.config.env).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: uiState.theme.status.warning, children: "\u26A0\uFE0F This server requires:" }), Object.keys(server.config.env).map((key) => (_jsxs(Text, { color: uiState.theme.status.warning, children: [' ', "\u2022 ", key] }, key))), _jsx(Text, { children: " " })] })), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Command:" }), ' ', _jsxs(Text, { dimColor: true, children: [server.config.command, " ", server.config.args?.join(' ') || ''] })] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Tools Available:" }), " ", server.toolsList?.length || 0, " tools"] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Transport:" }), " ", server.config.transport || 'stdio'] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), server.config.env && Object.keys(server.config.env).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "API Keys:" }), Object.entries(server.config.env).map(([key, value]) => (_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [" ", key, ":"] }), ' ', value ? (_jsx(Text, { color: uiState.theme.status.success, children: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF (configured)" })) : (_jsx(Text, { color: uiState.theme.status.error, children: "(not set)" }))] }, key))), _jsx(Text, { dimColor: true, children: " (Press [E] to edit)" }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Connection Status:" }), ' ', server.status === 'connected'
+                                ? '✓ Connected'
+                                : server.status === 'error'
+                                    ? '✗ Disconnected'
+                                    : '○ Stopped'] }), server.oauthStatus && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "OAuth Status:" }), ' ', _jsx(Text, { color: server.oauthStatus.connected ? 'green' : 'red', children: server.oauthStatus.connected ? '✓ Connected' : '✗ Not Connected' })] }))] }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, marginTop: 1, children: [deleteState.status === 'idle' && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Actions:" }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, color: navItem === 'tools' ? uiState.theme.text.accent : 'cyan', children: [navItem === 'tools' ? '▶ ' : '  ', "[T] Available Tools"] }), server.config.env && Object.keys(server.config.env).length > 0 && (_jsxs(Text, { bold: true, color: navItem === 'editKeys' ? uiState.theme.text.accent : 'yellow', children: [navItem === 'editKeys' ? '▶ ' : '  ', "[K] Edit API Keys"] })), server.config.disabled ? (_jsxs(Text, { bold: true, color: navItem === 'enable' ? uiState.theme.text.accent : 'green', children: [navItem === 'enable' ? '▶ ' : '  ', "[E] Enable Server"] })) : (_jsxs(Text, { bold: true, color: navItem === 'disable' ? uiState.theme.text.accent : 'gray', children: [navItem === 'disable' ? '▶ ' : '  ', "[D] Disable Server"] })), _jsxs(Text, { bold: true, color: navItem === 'delete' ? uiState.theme.text.accent : 'red', children: [navItem === 'delete' ? '▶ ' : '  ', "[X] Delete Server"] })] }), toggleState.status === 'toggling' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u27F3 Updating server status..." }) }))] })), deleteState.status === 'confirm' && (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: "red", children: ["Delete ", server.name, "?"] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, color: deleteState.selection === 'yes' ? 'yellow' : 'white', children: [deleteState.selection === 'yes' ? '▶ ' : '  ', "Yes"] }), _jsxs(Text, { bold: true, color: deleteState.selection === 'no' ? 'yellow' : 'white', children: [deleteState.selection === 'no' ? '▶ ' : '  ', "No"] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193: Select | Enter: Confirm | Esc: Cancel" }) })] })), deleteState.status === 'deleting' && (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: "red", children: ["Deleting ", server.name, "..."] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Please wait..." }) })] })), deleteState.status === 'success' && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "green", children: "\u2713 Server Deleted Successfully!" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue" }) })] })), deleteState.status === 'error' && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "red", children: "\u2717 Deletion Failed" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: uiState.theme.status.error, children: deleteState.error }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to dismiss" }) })] }))] })] }));
+}
+function MarketplaceContent({ activeColumn, onRefreshServers, height: _height = 20, onDetailViewChange, }) {
+    const { state: uiState } = useUI();
+    const { searchMarketplace } = useMCP();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [servers, setServers] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    const [view, setView] = useState('list');
+    const [selectedServer, setSelectedServer] = useState(null);
+    const [detailNavItem, setDetailNavItem] = useState('exit');
+    const [installState, setInstallState] = useState({
+        status: 'idle',
+        selection: 'no',
+    });
+    // Notify parent when entering/exiting detail view
+    useEffect(() => {
+        onDetailViewChange(view === 'detail' || view === 'apikey');
+    }, [view, onDetailViewChange]);
+    // Fixed window size - display exactly 10 servers at a time
+    const windowSize = 10;
+    // Load initial servers
+    useEffect(() => {
+        const loadServers = async () => {
+            setIsLoading(true);
+            try {
+                const results = await searchMarketplace('');
+                setServers(results);
+            }
+            catch (err) {
+                console.error('Failed to load marketplace:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadServers();
+    }, [searchMarketplace]);
+    // Search when query changes
+    useEffect(() => {
+        const performSearch = async () => {
+            setIsLoading(true);
+            try {
+                const results = await searchMarketplace(searchQuery);
+                setServers(results);
+                setSelectedIndex(0);
+                setScrollOffset(0);
+            }
+            catch (err) {
+                console.error('Search failed:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        if (searchQuery) {
+            performSearch();
+        }
+    }, [searchQuery, searchMarketplace]);
+    // Auto-scroll to keep selected item visible (snap to server, not line)
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + windowSize) {
+            setScrollOffset(selectedIndex - windowSize + 1);
+        }
+    }, [selectedIndex, scrollOffset, windowSize]);
+    // Get visible servers (only show what fits in the window)
+    const visibleServers = useMemo(() => {
+        return servers.slice(scrollOffset, scrollOffset + windowSize);
+    }, [servers, scrollOffset, windowSize]);
+    // Handle keyboard input when right column is active
+    useInput((input, key) => {
+        if (activeColumn !== 'right')
+            return;
+        // Handle install confirmation
+        if (installState.status === 'confirm') {
+            if (key.upArrow) {
+                setInstallState((prev) => ({ ...prev, selection: 'yes' }));
+            }
+            else if (key.downArrow) {
+                setInstallState((prev) => ({ ...prev, selection: 'no' }));
+            }
+            else if (key.return) {
+                if (installState.selection === 'yes' && selectedServer) {
+                    // Start installation
+                    setInstallState({ status: 'installing', selection: 'no' });
+                    // Perform installation
+                    (async () => {
+                        try {
+                            const { mcpMarketplace } = await import('../../../services/mcpMarketplace.js');
+                            // Pass the full server object instead of just ID to avoid lookup issues
+                            await mcpMarketplace.installServer(selectedServer, {});
+                            setInstallState({ status: 'success', selection: 'no' });
+                        }
+                        catch (err) {
+                            setInstallState({
+                                status: 'error',
+                                selection: 'no',
+                                error: err instanceof Error ? err.message : 'Task Failed Successfully',
+                            });
+                        }
+                    })();
+                }
+                else {
+                    // Cancel
+                    setInstallState({ status: 'idle', selection: 'no' });
+                }
+            }
+            else if (key.escape) {
+                setInstallState({ status: 'idle', selection: 'no' });
+            }
+            return;
+        }
+        // Handle success/error dismissal
+        if (installState.status === 'success' || installState.status === 'error') {
+            if (key.return || key.escape) {
+                if (installState.status === 'success') {
+                    // Refresh servers list before going back
+                    onRefreshServers()
+                        .then(() => {
+                        setInstallState({ status: 'idle', selection: 'no' });
+                        // Go back to list after successful install
+                        setView('list');
+                        setSelectedServer(null);
+                        setDetailNavItem('exit');
+                    })
+                        .catch((err) => {
+                        console.error('Failed to refresh servers:', err);
+                        setInstallState({ status: 'idle', selection: 'no' });
+                        setView('list');
+                        setSelectedServer(null);
+                        setDetailNavItem('exit');
+                    });
+                }
+                else {
+                    // On error, go back to detail view to try again
+                    setInstallState({ status: 'idle', selection: 'no' });
+                    setView('detail');
+                }
+            }
+            return;
+        }
+        // Don't allow navigation during installation
+        if (installState.status === 'installing') {
+            return;
+        }
+        // Handle detail view navigation (Level 3)
+        if (view === 'detail') {
+            if (key.upArrow) {
+                setDetailNavItem('exit');
+            }
+            else if (key.downArrow) {
+                setDetailNavItem('install');
+            }
+            else if (key.return) {
+                if (detailNavItem === 'exit') {
+                    // Back to list (Level 3 → Level 2)
+                    setView('list');
+                    setSelectedServer(null);
+                    setDetailNavItem('exit');
+                }
+                else if (detailNavItem === 'install' && selectedServer) {
+                    // Check if server requires API keys
+                    const hasEnvVars = selectedServer.env && Object.keys(selectedServer.env).length > 0;
+                    if (hasEnvVars) {
+                        // Show API key input dialog
+                        setView('apikey');
+                    }
+                    else {
+                        // No API keys needed, show confirmation directly
+                        setInstallState({ status: 'confirm', selection: 'no' });
+                    }
+                }
+            }
+            else if (key.escape) {
+                // Back to list (Level 3 → Level 2)
+                setView('list');
+                setSelectedServer(null);
+                setDetailNavItem('exit');
+            }
+            return;
+        }
+        // Handle search input
+        if (isSearchFocused) {
+            if (key.backspace || key.delete) {
+                setSearchQuery((prev) => prev.slice(0, -1));
+            }
+            else if (key.return) {
+                setIsSearchFocused(false);
+            }
+            else if (input && !key.ctrl && !key.meta) {
+                setSearchQuery((prev) => prev + input);
+            }
+            return;
+        }
+        // / to focus search
+        if (input === '/') {
+            setIsSearchFocused(true);
+            return;
+        }
+        // Navigation - snap to server names (skip descriptions)
+        if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(servers.length - 1, prev + 1));
+        }
+        else if (key.return && servers[selectedIndex]) {
+            // Show server details (Level 2 → Level 3)
+            setSelectedServer(servers[selectedIndex]);
+            setView('detail');
+            setDetailNavItem('exit');
+        }
+    }, { isActive: activeColumn === 'right' });
+    if (isLoading) {
+        return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", children: _jsx(LoadingSpinner, { message: "Loading marketplace...", spinnerType: "dots", color: uiState.theme.text.accent, centered: true, padded: true }) }));
+    }
+    const showScrollUp = scrollOffset > 0;
+    const showScrollDown = scrollOffset + windowSize < servers.length;
+    // Render API key input view
+    if (view === 'apikey' && selectedServer) {
+        return (_jsx(APIKeyInputDialog, { server: selectedServer, onInstall: async (envVars) => {
+                // Start installation with provided API keys
+                setInstallState({ status: 'installing', selection: 'no' });
+                try {
+                    const { mcpMarketplace } = await import('../../../services/mcpMarketplace.js');
+                    // Pass the full server object instead of just ID to avoid lookup issues
+                    await mcpMarketplace.installServer(selectedServer, { env: envVars });
+                    setInstallState({ status: 'success', selection: 'no' });
+                }
+                catch (err) {
+                    setInstallState({
+                        status: 'error',
+                        selection: 'no',
+                        error: err instanceof Error ? err.message : 'Task Failed Successfully',
+                    });
+                }
+            }, onCancel: () => {
+                // Go back to detail view
+                setView('detail');
+            } }));
+    }
+    // Render detail view
+    if (view === 'detail' && selectedServer) {
+        return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", children: [_jsx(Box, { flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: "\u2191\u2193: Navigate | Enter: Select | Esc: Back" }) }), _jsx(Box, { flexShrink: 0, children: _jsxs(Text, { bold: true, color: detailNavItem === 'exit' ? uiState.theme.text.accent : 'white', children: [detailNavItem === 'exit' ? '▶ ' : '  ', "\u2190 Exit"] }) }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [_jsxs(Text, { bold: true, color: uiState.theme.text.accent, children: ["MCP Server: ", selectedServer.name] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Version:" }), " ", selectedServer.version || 'N/A'] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Author:" }), " ", selectedServer.author || 'Unknown'] }), selectedServer.homepage && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Homepage:" }), " ", _jsx(Text, { color: "cyan", children: selectedServer.homepage })] })), selectedServer.repository && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "GitHub Repository:" }), ' ', _jsx(Text, { color: "cyan", children: selectedServer.repository })] })), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Category:" }), " ", selectedServer.category || 'Utilities'] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Rating:" }), " ", '⭐'.repeat(Math.floor(selectedServer.rating)), " (", selectedServer.rating, "/5)"] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: "Description:" }), _jsx(Text, { wrap: "wrap", children: selectedServer.description }), _jsx(Text, { children: " " }), selectedServer.requirements.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Requirements:" }), selectedServer.requirements.map((req, idx) => (_jsxs(Text, { children: [" \u2022 ", req] }, idx))), _jsx(Text, { children: " " })] })), selectedServer.env && Object.keys(selectedServer.env).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "yellow", children: "\u26A0\uFE0F This server requires:" }), Object.keys(selectedServer.env).map((key) => (_jsxs(Text, { color: "yellow", children: [' ', "\u2022 ", key] }, key))), _jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Command:" }), ' ', _jsxs(Text, { dimColor: true, children: [selectedServer.command, " ", selectedServer.args?.join(' ')] })] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), selectedServer.env && Object.keys(selectedServer.env).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "API Keys:" }), _jsx(Text, { dimColor: true, children: " (Configure during installation)" }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " })] }))] }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, marginTop: 1, children: [installState.status === 'idle' && (_jsxs(Text, { bold: true, color: detailNavItem === 'install' ? 'yellow' : 'green', children: [detailNavItem === 'install' ? '▶ ' : '  ', "[I] Install"] })), installState.status === 'confirm' && (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Install ", selectedServer.name, "?"] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, color: installState.selection === 'yes' ? 'yellow' : 'white', children: [installState.selection === 'yes' ? '▶ ' : '  ', "Yes"] }), _jsxs(Text, { bold: true, color: installState.selection === 'no' ? uiState.theme.text.accent : 'white', children: [installState.selection === 'no' ? '▶ ' : '  ', "No"] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193: Select | Enter: Confirm | Esc: Cancel" }) })] })), installState.status === 'installing' && (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: "cyan", children: ["Installing ", selectedServer.name, "..."] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Please wait..." }) })] })), installState.status === 'success' && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "green", children: "\u2713 Installation Successful!" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue" }) })] })), installState.status === 'error' && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, color: "red", children: "\u2717 Installation Failed" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: uiState.theme.status.error, children: installState.error }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to dismiss" }) })] }))] })] }));
+    }
+    // Render list view
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", width: "100%", children: [_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { bold: true, color: "cyan", children: "\uD83C\uDFEA MCP Marketplace" }), _jsx(Text, { dimColor: true, children: isSearchFocused
+                            ? 'Type to search, Enter to finish'
+                            : `↑↓: Navigate | Enter: View Details | /: Search | ${servers.length} servers` })] }), _jsx(Text, { children: " " }), _jsxs(Box, { flexShrink: 0, children: [_jsxs(Text, { bold: true, color: uiState.theme.text.accent, children: ["Search:", ' '] }), _jsxs(Text, { color: isSearchFocused ? 'yellow' : 'gray', children: [searchQuery || 'type / to search', isSearchFocused && _jsx(Text, { color: "yellow", children: "_" })] })] }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), showScrollUp && (_jsx(Box, { justifyContent: "center", flexShrink: 0, children: _jsx(Text, { color: "cyan", bold: true, children: "\u25B2 More above" }) })), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflow: "hidden", children: visibleServers.map((server, index) => {
+                    const actualIndex = scrollOffset + index;
+                    const isSelected = actualIndex === selectedIndex;
+                    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Text, { bold: true, color: isSelected ? 'yellow' : 'cyan', children: [isSelected ? '▶ ' : '  ', server.name, server.version ? ` v${server.version}` : ''] }), _jsxs(Text, { dimColor: true, children: ['   ', server.description] }), _jsx(Text, { children: " " })] }, server.id));
+                }) }), showScrollDown && (_jsx(Box, { justifyContent: "center", flexShrink: 0, children: _jsx(Text, { color: "cyan", bold: true, children: "\u25BC More below" }) }))] }));
+}
+/**
+ * MCPTab Component
+ *
+ * Main tab component that orchestrates the MCP panel UI with two-column layout.
+ * Handles keyboard navigation, dialog management, and server operations.
+ */
+export function MCPTab({ windowWidth, height }) {
+    return (_jsx(ErrorBoundary, { fallback: (error) => (_jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Box, { borderStyle: "round", borderColor: "red", paddingX: 2, paddingY: 1, children: _jsx(Text, { color: "red", bold: true, children: "\u26A0\uFE0F MCP Panel Error" }) }), _jsx(Box, { marginTop: 1, paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: error.message }) }), _jsxs(Box, { marginTop: 2, children: [_jsx(Text, { dimColor: true, children: "The MCP panel encountered an error. Press " }), _jsx(Text, { bold: true, color: "cyan", children: "Esc or 0" }), _jsx(Text, { dimColor: true, children: " to return to main menu." })] })] })), children: _jsx(MCPTabContent, { windowWidth: windowWidth, height: height }) }));
+}
+/**
+ * MCPTab Content Component (wrapped by error boundary)
+ */
+function MCPTabContent({ windowWidth, height }) {
+    const { state: uiState } = useUI();
+    const { isFocused, isActive, exitToNavBar } = useFocusManager();
+    const { stdout } = useStdout();
+    // Calculate absolute widths if windowWidth is provided
+    // Account for borders: each column has 2 chars for borders (left + right)
+    // Total border width = 4 chars (2 per column), but they share the middle border
+    // So effectively we need to subtract 4 chars total
+    const absoluteLeftWidth = windowWidth ? Math.floor(windowWidth * 0.3) : undefined;
+    const absoluteRightWidth = windowWidth && absoluteLeftWidth ? windowWidth - absoluteLeftWidth - 4 : undefined;
+    const { state, toggleServer, restartServer, configureServer, uninstallServer, refreshServers, clearError, subscribeToSystemMessages, } = useMCP();
+    // Check if this panel has focus (for navigation and dialogs)
+    const hasFocus = isFocused('mcp-panel');
+    // Check if we're in active mode (for state-modifying actions like toggle)
+    const _canModifyState = hasFocus && isActive();
+    // Get terminal height for calculating content area
+    const terminalHeight = (stdout?.rows || 24) - 1;
+    // Navigation state
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [activeColumn, setActiveColumn] = useState('left');
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const windowSize = 15; // Number of items visible in left column
+    // Track if we're in a detail view (Level 3) to prevent ESC from bubbling
+    const [isInDetailView, setIsInDetailView] = useState(false);
+    // Track initial view for server details (details or tools)
+    const [serverDetailInitialView, setServerDetailInitialView] = useState('details');
+    // Callback for child components to notify when entering/exiting detail views
+    const handleDetailViewChange = useCallback((isInDetail) => {
+        setIsInDetailView(isInDetail);
+    }, []);
+    // Dialog state
+    const [dialogState, setDialogState] = useState({ type: null });
+    // Status message for operations
+    const [statusMessage, setStatusMessage] = useState(null);
+    // System messages for errors and notifications
+    const [systemMessages, setSystemMessages] = useState([]);
+    // Subscribe to system messages from MCPContext
+    useEffect(() => {
+        const unsubscribe = subscribeToSystemMessages((messages) => {
+            setSystemMessages(messages);
+        });
+        return unsubscribe;
+    }, [subscribeToSystemMessages]);
+    // Build menu items for left column
+    const menuItems = useMemo(() => {
+        const items = [];
+        // Exit item
+        items.push({
+            type: 'exit',
+            label: 'Exit',
+            icon: '←',
+        });
+        // Marketplace item
+        items.push({
+            type: 'marketplace',
+            label: 'Marketplace',
+            icon: '🏪',
+        });
+        // Installed servers
+        const serverList = Array.from(state.servers.values());
+        serverList.forEach((server) => {
+            items.push({
+                type: 'server',
+                label: server.name,
+                icon: server.config.disabled ? '○' : '●',
+                server,
+            });
+        });
+        return items;
+    }, [state.servers]);
+    // Get visible items for windowed rendering
+    const visibleItems = useMemo(() => {
+        return menuItems.slice(scrollOffset, scrollOffset + windowSize);
+    }, [menuItems, scrollOffset, windowSize]);
+    // Get currently selected item
+    const selectedItem = useMemo(() => {
+        if (selectedIndex >= 0 && selectedIndex < menuItems.length) {
+            return menuItems[selectedIndex];
+        }
+        return null;
+    }, [menuItems, selectedIndex]);
+    // Reset server detail view when selection changes
+    useEffect(() => {
+        setServerDetailInitialView('details');
+    }, [selectedItem]);
+    // Navigation handlers
+    const handleNavigateUp = useCallback(() => {
+        if (activeColumn === 'left') {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+        }
+        // TODO: Handle right column navigation when content supports it
+    }, [activeColumn]);
+    const handleNavigateDown = useCallback(() => {
+        if (activeColumn === 'left') {
+            setSelectedIndex((prev) => Math.min(menuItems.length - 1, prev + 1));
+        }
+        // TODO: Handle right column navigation when content supports it
+    }, [activeColumn, menuItems.length]);
+    const handleNavigateLeft = useCallback(() => {
+        setActiveColumn('left');
+    }, []);
+    const handleNavigateRight = useCallback(() => {
+        setActiveColumn('right');
+    }, []);
+    const handleSelect = useCallback(async () => {
+        if (!selectedItem)
+            return;
+        switch (selectedItem.type) {
+            case 'exit':
+                exitToNavBar();
+                break;
+            case 'marketplace':
+                // Don't open dialog, just stay selected to show marketplace in right column
+                // The right column will detect selectedItem.type === 'marketplace' and show content
+                break;
+            case 'server':
+                // Server selection just shows details in right column
+                // Enable/disable happens in the detail view, not here
+                break;
+        }
+    }, [selectedItem, exitToNavBar]);
+    // Auto-scroll to keep selected item visible
+    useEffect(() => {
+        if (selectedIndex < scrollOffset) {
+            setScrollOffset(selectedIndex);
+        }
+        else if (selectedIndex >= scrollOffset + windowSize) {
+            setScrollOffset(selectedIndex - windowSize + 1);
+        }
+    }, [selectedIndex, scrollOffset, windowSize]);
+    /**
+     * Close dialog handler
+     */
+    const handleCloseDialog = useCallback(() => {
+        setDialogState({ type: null });
+    }, []);
+    /**
+     * Render the appropriate dialog based on dialog state
+     */
+    const renderDialog = () => {
+        if (dialogState.type === null)
+            return null;
+        switch (dialogState.type) {
+            case 'configure':
+                if (!dialogState.serverName)
+                    return null;
+                return (_jsx(DialogErrorBoundary, { onClose: handleCloseDialog, dialogName: "Server Configuration", children: _jsx(ServerConfigDialog, { serverName: dialogState.serverName, onClose: handleCloseDialog, onSave: async (config) => {
+                            setStatusMessage('Saving configuration...');
+                            await configureServer(dialogState.serverName, config);
+                            setStatusMessage('Configuration saved successfully');
+                            setTimeout(() => setStatusMessage(null), 3000);
+                            handleCloseDialog();
+                        } }) }));
+            case 'oauth':
+                if (!dialogState.serverName)
+                    return null;
+                return (_jsx(DialogErrorBoundary, { onClose: handleCloseDialog, dialogName: "OAuth Configuration", children: _jsx(OAuthConfigDialog, { serverName: dialogState.serverName, onClose: handleCloseDialog }) }));
+            case 'health':
+                return (_jsx(DialogErrorBoundary, { onClose: handleCloseDialog, dialogName: "Health Monitor", children: _jsx(HealthMonitorDialog, { onClose: handleCloseDialog }) }));
+            case 'logs':
+                if (!dialogState.serverName)
+                    return null;
+                return (_jsx(DialogErrorBoundary, { onClose: handleCloseDialog, dialogName: "Server Logs", children: _jsx(ServerLogsViewer, { serverName: dialogState.serverName, onClose: handleCloseDialog }) }));
+            case 'uninstall':
+                if (!dialogState.serverName)
+                    return null;
+                return (_jsx(DialogErrorBoundary, { onClose: handleCloseDialog, dialogName: "Uninstall Confirmation", children: _jsx(UninstallConfirmDialog, { serverName: dialogState.serverName, onClose: handleCloseDialog, onConfirm: async () => {
+                            const serverName = dialogState.serverName;
+                            setStatusMessage(`Uninstalling ${serverName}...`);
+                            await uninstallServer(serverName);
+                            setStatusMessage(`${serverName} uninstalled successfully`);
+                            setTimeout(() => setStatusMessage(null), 3000);
+                            handleCloseDialog();
+                        } }) }));
+            case 'help':
+                return _jsx(HelpOverlay, { onClose: handleCloseDialog, context: "main" });
+            default:
+                return null;
+        }
+    };
+    /**
+     * Handle keyboard navigation
+     *
+     * MCP Tab uses a 3-level hierarchy:
+     * - Level 1: Left column (menu/list)
+     * - Level 2: Right column (content area)
+     * - Level 3: Detail views (handled by child components via modal system)
+     */
+    useInput((input, key) => {
+        // Don't handle input during loading
+        if (state.isLoading) {
+            return;
+        }
+        // Handle error state input
+        if (state.error) {
+            if (key.return || key.escape || input === '0') {
+                // Clear error and return to main menu
+                clearError();
+                exitToNavBar();
+            }
+            return; // Don't process other inputs in error state
+        }
+        // Handle dialog keyboard input (Level 3+)
+        if (dialogState.type !== null) {
+            if (key.escape) {
+                handleCloseDialog();
+            }
+            else if (input === '?') {
+                setDialogState({ type: 'help' });
+            }
+            return;
+        }
+        // Handle ESC hierarchically:
+        // Level 2 (right column) → Level 1 (left column)
+        // Level 1 (left column) → Exit tab (bubble to global handler)
+        if (key.escape) {
+            // Don't handle ESC if we're in a detail view (Level 3) - let child handle it
+            if (isInDetailView) {
+                return;
+            }
+            if (activeColumn === 'right') {
+                // Go back to left column
+                setActiveColumn('left');
+                return; // Don't bubble - we handled it
+            }
+            // If in left column, allow ESC to bubble to exit the tab
+            return;
+        }
+        // Show help overlay on '?' key
+        if (input === '?') {
+            setDialogState({ type: 'help' });
+            return;
+        }
+        // Handle navigation
+        if (key.upArrow) {
+            handleNavigateUp();
+        }
+        else if (key.downArrow) {
+            handleNavigateDown();
+        }
+        else if (key.leftArrow) {
+            handleNavigateLeft();
+        }
+        else if (key.rightArrow) {
+            handleNavigateRight();
+        }
+        else if (key.return) {
+            handleSelect();
+        }
+        else if (input === '0') {
+            // '0' still works as shortcut to exit
+            exitToNavBar();
+        }
+        else if (input === 'r' || input === 'R') {
+            // Restart server
+            if (selectedItem?.type === 'server' && selectedItem.server) {
+                const server = selectedItem.server;
+                setStatusMessage(`Restarting ${server.name}...`);
+                restartServer(server.name)
+                    .then(() => {
+                    setStatusMessage(`${server.name} restarted successfully`);
+                    setTimeout(() => setStatusMessage(null), 3000);
+                })
+                    .catch((err) => {
+                    setStatusMessage(`Failed to restart: ${err instanceof Error ? err.message : 'Unknown error'}`);
+                    setTimeout(() => setStatusMessage(null), 5000);
+                });
+            }
+        }
+        else if (input === 'c' || input === 'C') {
+            // Configure server
+            if (selectedItem?.type === 'server' && selectedItem.server) {
+                setDialogState({ type: 'configure', serverName: selectedItem.server.name });
+            }
+        }
+        else if (input === 'u' || input === 'U') {
+            // Uninstall server
+            if (selectedItem?.type === 'server' && selectedItem.server) {
+                setDialogState({ type: 'uninstall', serverName: selectedItem.server.name });
+            }
+        }
+        else if (input === 't' || input === 'T') {
+            // Open tools view for selected server
+            if (selectedItem?.type === 'server' && selectedItem.server) {
+                setServerDetailInitialView('tools');
+                setActiveColumn('right');
+            }
+        }
+        else if (input === 'l' || input === 'L') {
+            // View logs
+            if (selectedItem?.type === 'server' && selectedItem.server) {
+                setDialogState({ type: 'logs', serverName: selectedItem.server.name });
+            }
+        }
+        else if (input === 'o' || input === 'O') {
+            // OAuth configuration
+            if (selectedItem?.type === 'server' && selectedItem.server) {
+                setDialogState({ type: 'oauth', serverName: selectedItem.server.name });
+            }
+        }
+        else if (input === 'h' || input === 'H') {
+            setDialogState({ type: 'health' });
+        }
+    }, { isActive: hasFocus });
+    // Note: Removed full-screen loading check - loading state now shown in left column
+    // This allows marketplace to remain accessible during server loading
+    // Error state with back navigation
+    if (state.error) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(ErrorBanner, { message: state.error }), _jsxs(Box, { marginTop: 2, children: [_jsx(Text, { bold: true, color: uiState.theme.text.accent, children: "\u25B6 \u2190 Back" }), _jsx(Text, { dimColor: true, children: " - Press " }), _jsx(Text, { bold: true, color: "cyan", children: "Enter, Esc or 0" }), _jsx(Text, { dimColor: true, children: " to return to main menu" })] })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", height: height ?? '100%', width: windowWidth, children: [_jsx(Box, { borderStyle: "single", borderColor: hasFocus ? uiState.theme.text.accent : uiState.theme.text.secondary, paddingX: 1, flexShrink: 0, children: _jsxs(Box, { justifyContent: "space-between", width: "100%", overflow: "hidden", children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, color: hasFocus ? uiState.theme.text.accent : uiState.theme.text.primary, children: "\uD83D\uDD0C MCP Servers" }) }), _jsx(Box, { flexShrink: 1, marginLeft: 1, children: _jsx(Text, { wrap: "truncate-end", color: hasFocus ? uiState.theme.text.primary : uiState.theme.text.secondary, children: "\u2191\u2193:Nav \u2190\u2192:Column Enter:Select 0/Esc:Exit" }) })] }) }), dialogState.type === null && (_jsxs(Box, { flexGrow: 1, overflow: "hidden", flexDirection: "row", width: "100%", children: [_jsxs(Box, { flexDirection: "column", width: absoluteLeftWidth ?? '30%', height: "100%", flexShrink: 0, borderStyle: "single", borderColor: hasFocus && activeColumn === 'left'
+                            ? uiState.theme.text.accent
+                            : uiState.theme.border.primary, paddingY: 1, children: [scrollOffset > 0 && (_jsxs(_Fragment, { children: [_jsx(Box, { justifyContent: "center", paddingX: 1, children: _jsx(Text, { color: uiState.theme.text.accent, bold: true, children: "\u25B2 More above" }) }), _jsx(Text, { children: " " })] })), _jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: [visibleItems.map((item, index) => {
+                                        const actualIndex = scrollOffset + index;
+                                        const isSelected = hasFocus && activeColumn === 'left' && actualIndex === selectedIndex;
+                                        // Render Exit item
+                                        if (item.type === 'exit') {
+                                            return (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { bold: isSelected, color: isSelected ? uiState.theme.text.accent : uiState.theme.text.primary, children: [item.icon, " ", item.label] }) }, "exit"));
+                                        }
+                                        // Render Marketplace item
+                                        if (item.type === 'marketplace') {
+                                            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsxs(Text, { bold: isSelected, color: isSelected ? 'yellow' : 'cyan', children: [item.icon, " ", item.label] })] }, "marketplace"));
+                                        }
+                                        return null;
+                                    }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: uiState.theme.text.accent, children: "\uD83D\uDCE6 Installed Servers" }), _jsx(Text, { children: " " }), state.isLoading && (_jsx(Box, { paddingLeft: 2, flexDirection: "column", children: _jsx(LoadingSpinner, { message: "Loading MCP servers...", spinnerType: "dots", color: "cyan", centered: false, padded: false }) })), !state.isLoading &&
+                                        visibleItems.filter((item) => item.type === 'server').length === 0 ? (_jsx(Text, { dimColor: true, children: " No servers installed" })) : !state.isLoading ? (visibleItems.map((item, index) => {
+                                        const actualIndex = scrollOffset + index;
+                                        const isSelected = hasFocus && activeColumn === 'left' && actualIndex === selectedIndex;
+                                        // Render Server item
+                                        if (item.type === 'server' && item.server) {
+                                            const phase = item.server.phase || 'stopped';
+                                            const isDisabled = item.server.config.disabled;
+                                            // Determine icon color based on phase
+                                            let iconColor = 'gray';
+                                            if (!isDisabled) {
+                                                if (phase === 'connected') {
+                                                    iconColor = 'green';
+                                                }
+                                                else if (phase === 'starting' ||
+                                                    phase === 'connecting' ||
+                                                    phase === 'health-check') {
+                                                    iconColor = 'yellow';
+                                                }
+                                                else if (phase === 'unhealthy' || phase === 'error') {
+                                                    iconColor = 'red';
+                                                }
+                                            }
+                                            // Determine status text and color based on phase
+                                            let statusText = '○ Stopped';
+                                            let statusColor = 'gray';
+                                            if (isDisabled) {
+                                                statusText = '○ Disabled';
+                                                statusColor = 'gray';
+                                            }
+                                            else {
+                                                switch (phase) {
+                                                    case 'starting':
+                                                        statusText = '⟳ Starting...';
+                                                        statusColor = 'yellow';
+                                                        break;
+                                                    case 'connecting':
+                                                        statusText = '⟳ Connecting...';
+                                                        statusColor = 'yellow';
+                                                        break;
+                                                    case 'health-check':
+                                                        statusText = '⟳ Checking health...';
+                                                        statusColor = 'yellow';
+                                                        break;
+                                                    case 'connected':
+                                                        statusText = '✓ Connected';
+                                                        statusColor = 'green';
+                                                        break;
+                                                    case 'unhealthy':
+                                                        statusText = '✗ Unhealthy';
+                                                        statusColor = 'red';
+                                                        break;
+                                                    case 'error':
+                                                        statusText = '✗ Connection failed';
+                                                        statusColor = 'red';
+                                                        break;
+                                                    default:
+                                                        statusText = '○ Stopped';
+                                                        statusColor = 'gray';
+                                                }
+                                            }
+                                            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: isSelected, color: isSelected
+                                                            ? uiState.theme.text.accent
+                                                            : isDisabled
+                                                                ? 'gray'
+                                                                : uiState.theme.text.primary, dimColor: isDisabled, children: [_jsx(Text, { color: iconColor, children: item.icon }), " ", item.label] }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: isDisabled, color: statusColor, children: statusText }) }), _jsx(Text, { children: " " })] }, item.server.name));
+                                        }
+                                        return null;
+                                    })) : null] }), scrollOffset + windowSize < menuItems.length && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Box, { justifyContent: "center", paddingX: 1, children: _jsx(Text, { color: uiState.theme.text.accent, bold: true, children: "\u25BC More below" }) })] })), systemMessages.length > 0 && (_jsx(Box, { flexShrink: 0, marginTop: 1, children: _jsx(SystemMessages, { messages: systemMessages, onDismiss: (id) => {
+                                        setSystemMessages((prev) => prev.filter((m) => m.id !== id));
+                                    }, isActive: hasFocus && activeColumn === 'left' }) }))] }), _jsxs(Box, { flexDirection: "column", width: absoluteRightWidth ?? '70%', height: "100%", borderStyle: "single", borderColor: hasFocus && activeColumn === 'right'
+                            ? uiState.theme.text.accent
+                            : uiState.theme.border.primary, flexShrink: 0, paddingX: 1, paddingY: 1, children: [_jsx(Box, { flexShrink: 0, marginBottom: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, children: _jsx(Text, { color: "yellow", bold: true, children: "\u26A0\uFE0F MCP Servers are in pre-alpha stage - not fully implemented" }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [(!selectedItem || selectedItem?.type === 'exit') && (_jsxs(Box, { flexDirection: "column", width: "100%", overflow: "hidden", children: [_jsx(Text, {}), _jsx(Text, {}), _jsx(Text, {}), _jsx(Text, {}), _jsx(Text, { bold: true, color: uiState.theme.text.accent, wrap: "truncate-end", children: "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550" }), _jsx(Text, {}), _jsx(Text, { bold: true, color: uiState.theme.text.accent, children: "MCP Registry - Marketplace" }), _jsx(Text, {}), _jsx(Text, { wrap: "wrap", children: "The MCP registry provides MCP clients with a list of MCP servers." }), _jsx(Text, {}), _jsx(Text, {}), _jsx(Text, { bold: true, color: uiState.theme.text.accent, children: "OLLM CLI use Official Open Source MCP Registry" }), _jsx(Text, {}), _jsx(Text, { wrap: "wrap", children: "MCP Registry: https://registry.modelcontextprotocol.io/" }), _jsx(Text, { wrap: "wrap", children: "MCP Registry Documentation: https://registry.modelcontextprotocol.io/docs" }), _jsx(Text, {}), _jsx(Text, {}), _jsx(Text, { color: uiState.theme.text.secondary, wrap: "truncate-end", children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Text, {}), _jsx(Text, { bold: true, children: "Documentation:" }), _jsx(Text, {}), _jsxs(Text, { wrap: "wrap", children: ["\uD83D\uDCC4 ", _jsx(Text, { color: uiState.theme.text.accent, children: "Public-facing docs" }), " - Published on modelcontextprotocol.io"] }), _jsx(Text, {}), _jsxs(Text, { wrap: "wrap", children: ["\uD83C\uDFD7\uFE0F ", _jsx(Text, { color: uiState.theme.text.accent, children: "Design documentation" }), " - Architecture, vision, and roadmap"] }), _jsx(Text, {}), _jsxs(Text, { wrap: "wrap", children: ["\uD83D\uDCD6 ", _jsx(Text, { color: uiState.theme.text.accent, children: "Reference" }), " - Technical specifications"] }), _jsx(Text, {}), _jsxs(Text, { wrap: "wrap", children: ["\uD83D\uDD27 ", _jsx(Text, { color: uiState.theme.text.accent, children: "Contributing guides" }), " - How to contribute"] }), _jsx(Text, {}), _jsxs(Text, { wrap: "wrap", children: ["\uD83D\uDD12 ", _jsx(Text, { color: uiState.theme.text.accent, children: "Administration" }), " - Admin operations"] }), _jsx(Text, {}), _jsx(Text, { color: uiState.theme.text.secondary, wrap: "truncate-end", children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Text, {}), _jsx(Text, { color: uiState.theme.text.secondary, dimColor: true, wrap: "wrap", children: "Press Enter to browse marketplace or \u2191\u2193 to navigate" }), _jsx(Text, {}), _jsx(Text, { bold: true, color: uiState.theme.text.accent, wrap: "truncate-end", children: "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550" })] })), selectedItem?.type === 'marketplace' && (_jsx(MarketplaceContent, { activeColumn: activeColumn, height: terminalHeight, onRefreshServers: refreshServers, onDetailViewChange: handleDetailViewChange })), selectedItem?.type === 'server' && selectedItem.server && (_jsx(ServerDetailsContent, { server: selectedItem.server, activeColumn: activeColumn, initialView: serverDetailInitialView, onToggle: async () => {
+                                            // Toggle server enabled/disabled in settings
+                                            try {
+                                                await toggleServer(selectedItem.server.name);
+                                            }
+                                            catch (err) {
+                                                // Error is already set in MCPContext state, just log it
+                                                console.error('Toggle failed:', err);
+                                            }
+                                        }, onDelete: async () => {
+                                            // Permanently delete server from settings
+                                            await uninstallServer(selectedItem.server.name);
+                                        }, onRefreshServers: refreshServers })), !selectedItem && (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", children: _jsx(Text, { color: uiState.theme.text.secondary, dimColor: true, children: "\uD83D\uDC46 Select an item to view details" }) }))] }), (statusMessage || state.operationsInProgress.size > 0) && (_jsx(Box, { flexShrink: 0, marginTop: 1, paddingX: 1, borderStyle: "single", borderColor: uiState.theme.border.primary, children: statusMessage ? (_jsx(Text, { color: uiState.theme.text.primary, children: statusMessage })) : (_jsx(Text, { color: uiState.theme.text.secondary, children: Array.from(state.operationsInProgress.entries())
+                                        .map(([name, op]) => `${name}: ${op}...`)
+                                        .join(' | ') })) }))] })] })), dialogState.type !== null && renderDialog()] }));
+}
+//# sourceMappingURL=MCPTab.js.map