@notebook-intelligence/notebook-intelligence 2.4.2 → 2.5.0

package/lib/components/settings-panel.js

@@ -0,0 +1,374 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { VscWarning } from 'react-icons/vsc';
+import * as path from 'path';
+import copySvgstr from '../../style/icons/copy.svg';
+import { NBIAPI } from '../api';
+import { CheckBoxItem } from './checkbox';
+import { PillItem } from './pill';
+import { mcpServerSettingsToEnabledState } from './mcp-util';
+const OPENAI_COMPATIBLE_CHAT_MODEL_ID = 'openai-compatible-chat-model';
+const LITELLM_COMPATIBLE_CHAT_MODEL_ID = 'litellm-compatible-chat-model';
+const OPENAI_COMPATIBLE_INLINE_COMPLETION_MODEL_ID = 'openai-compatible-inline-completion-model';
+const LITELLM_COMPATIBLE_INLINE_COMPLETION_MODEL_ID = 'litellm-compatible-inline-completion-model';
+export class SettingsPanel extends ReactWidget {
+    constructor(options) {
+        super();
+        this._onSave = options.onSave;
+        this._onEditMCPConfigClicked = options.onEditMCPConfigClicked;
+    }
+    render() {
+        return (React.createElement(SettingsPanelComponent, { onSave: this._onSave, onEditMCPConfigClicked: this._onEditMCPConfigClicked }));
+    }
+}
+function SettingsPanelComponent(props) {
+    const [activeTab, setActiveTab] = useState('general');
+    const onTabSelected = (tab) => {
+        setActiveTab(tab);
+    };
+    return (React.createElement("div", { className: "nbi-settings-panel" },
+        React.createElement("div", { className: "nbi-settings-panel-tabs" },
+            React.createElement(SettingsPanelTabsComponent, { onTabSelected: onTabSelected, activeTab: activeTab })),
+        React.createElement("div", { className: "nbi-settings-panel-tab-content" },
+            activeTab === 'general' && (React.createElement(SettingsPanelComponentGeneral, { onSave: props.onSave, onEditMCPConfigClicked: props.onEditMCPConfigClicked })),
+            activeTab === 'mcp-servers' && (React.createElement(SettingsPanelComponentMCPServers, { onEditMCPConfigClicked: props.onEditMCPConfigClicked })))));
+}
+function SettingsPanelTabsComponent(props) {
+    const [activeTab, setActiveTab] = useState(props.activeTab);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: `nbi-settings-panel-tab ${activeTab === 'general' ? 'active' : ''}`, onClick: () => {
+                setActiveTab('general');
+                props.onTabSelected('general');
+            } }, "General"),
+        React.createElement("div", { className: `nbi-settings-panel-tab ${activeTab === 'mcp-servers' ? 'active' : ''}`, onClick: () => {
+                setActiveTab('mcp-servers');
+                props.onTabSelected('mcp-servers');
+            } }, "MCP Servers")));
+}
+function SettingsPanelComponentGeneral(props) {
+    const nbiConfig = NBIAPI.config;
+    const llmProviders = nbiConfig.llmProviders;
+    const [chatModels, setChatModels] = useState([]);
+    const [inlineCompletionModels, setInlineCompletionModels] = useState([]);
+    const handleSaveSettings = async () => {
+        const config = {
+            default_chat_mode: defaultChatMode,
+            chat_model: {
+                provider: chatModelProvider,
+                model: chatModel,
+                properties: chatModelProperties
+            },
+            inline_completion_model: {
+                provider: inlineCompletionModelProvider,
+                model: inlineCompletionModel,
+                properties: inlineCompletionModelProperties
+            }
+        };
+        if (chatModelProvider === 'github-copilot' ||
+            inlineCompletionModelProvider === 'github-copilot') {
+            config.store_github_access_token = storeGitHubAccessToken;
+        }
+        await NBIAPI.setConfig(config);
+        props.onSave();
+    };
+    const handleRefreshOllamaModelListClick = async () => {
+        await NBIAPI.updateOllamaModelList();
+        updateModelOptionsForProvider(chatModelProvider, 'chat');
+    };
+    const [chatModelProvider, setChatModelProvider] = useState(nbiConfig.chatModel.provider || 'none');
+    const [inlineCompletionModelProvider, setInlineCompletionModelProvider] = useState(nbiConfig.inlineCompletionModel.provider || 'none');
+    const [defaultChatMode, setDefaultChatMode] = useState(nbiConfig.defaultChatMode);
+    const [chatModel, setChatModel] = useState(nbiConfig.chatModel.model);
+    const [chatModelProperties, setChatModelProperties] = useState([]);
+    const [inlineCompletionModelProperties, setInlineCompletionModelProperties] = useState([]);
+    const [inlineCompletionModel, setInlineCompletionModel] = useState(nbiConfig.inlineCompletionModel.model);
+    const [storeGitHubAccessToken, setStoreGitHubAccessToken] = useState(nbiConfig.storeGitHubAccessToken);
+    const updateModelOptionsForProvider = (providerId, modelType) => {
+        if (modelType === 'chat') {
+            setChatModelProvider(providerId);
+        }
+        else {
+            setInlineCompletionModelProvider(providerId);
+        }
+        const models = modelType === 'chat'
+            ? nbiConfig.chatModels
+            : nbiConfig.inlineCompletionModels;
+        const selectedModelId = modelType === 'chat'
+            ? nbiConfig.chatModel.model
+            : nbiConfig.inlineCompletionModel.model;
+        const providerModels = models.filter((model) => model.provider === providerId);
+        if (modelType === 'chat') {
+            setChatModels(providerModels);
+        }
+        else {
+            setInlineCompletionModels(providerModels);
+        }
+        let selectedModel = providerModels.find((model) => model.id === selectedModelId);
+        if (!selectedModel) {
+            selectedModel = providerModels === null || providerModels === void 0 ? void 0 : providerModels[0];
+        }
+        if (selectedModel) {
+            if (modelType === 'chat') {
+                setChatModel(selectedModel.id);
+                setChatModelProperties(selectedModel.properties);
+            }
+            else {
+                setInlineCompletionModel(selectedModel.id);
+                setInlineCompletionModelProperties(selectedModel.properties);
+            }
+        }
+        else {
+            if (modelType === 'chat') {
+                setChatModelProperties([]);
+            }
+            else {
+                setInlineCompletionModelProperties([]);
+            }
+        }
+    };
+    const onModelPropertyChange = (modelType, propertyId, value) => {
+        const modelProperties = modelType === 'chat'
+            ? chatModelProperties
+            : inlineCompletionModelProperties;
+        const updatedProperties = modelProperties.map((property) => {
+            if (property.id === propertyId) {
+                return { ...property, value };
+            }
+            return property;
+        });
+        if (modelType === 'chat') {
+            setChatModelProperties(updatedProperties);
+        }
+        else {
+            setInlineCompletionModelProperties(updatedProperties);
+        }
+    };
+    useEffect(() => {
+        updateModelOptionsForProvider(chatModelProvider, 'chat');
+        updateModelOptionsForProvider(inlineCompletionModelProvider, 'inline-completion');
+    }, []);
+    useEffect(() => {
+        handleSaveSettings();
+    }, [
+        defaultChatMode,
+        chatModelProvider,
+        chatModel,
+        chatModelProperties,
+        inlineCompletionModelProvider,
+        inlineCompletionModel,
+        inlineCompletionModelProperties,
+        storeGitHubAccessToken
+    ]);
+    return (React.createElement("div", { className: "config-dialog" },
+        React.createElement("div", { className: "config-dialog-body" },
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Default chat mode"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", value: defaultChatMode, onChange: event => setDefaultChatMode(event.target.value) },
+                                    React.createElement("option", { value: "ask" }, "Ask"),
+                                    React.createElement("option", { value: "agent" }, "Agent")))),
+                        React.createElement("div", { className: "model-config-section-column" }, " ")))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Chat model"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "Provider"),
+                            React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", onChange: event => updateModelOptionsForProvider(event.target.value, 'chat') },
+                                    llmProviders.map((provider, index) => (React.createElement("option", { key: index, value: provider.id, selected: provider.id === chatModelProvider }, provider.name))),
+                                    React.createElement("option", { key: -1, value: "none", selected: chatModelProvider === 'none' ||
+                                            !llmProviders.find(provider => provider.id === chatModelProvider) }, "None")))),
+                        !['openai-compatible', 'litellm-compatible', 'none'].includes(chatModelProvider) &&
+                            chatModels.length > 0 && (React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "Model"),
+                            ![
+                                OPENAI_COMPATIBLE_CHAT_MODEL_ID,
+                                LITELLM_COMPATIBLE_CHAT_MODEL_ID
+                            ].includes(chatModel) &&
+                                chatModels.length > 0 && (React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", onChange: event => setChatModel(event.target.value) }, chatModels.map((model, index) => (React.createElement("option", { key: index, value: model.id, selected: model.id === chatModel }, model.name))))))))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" }, chatModelProvider === 'ollama' && chatModels.length === 0 && (React.createElement("div", { className: "ollama-warning-message" },
+                            "No Ollama models found! Make sure",
+                            ' ',
+                            React.createElement("a", { href: "https://ollama.com/", target: "_blank" }, "Ollama"),
+                            ' ',
+                            "is running and models are downloaded to your computer.",
+                            ' ',
+                            React.createElement("a", { href: "javascript:void(0)", onClick: handleRefreshOllamaModelListClick }, "Try again"),
+                            ' ',
+                            "once ready.")))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" }, chatModelProperties.map((property, index) => (React.createElement("div", { className: "form-field-row", key: index },
+                            React.createElement("div", { className: "form-field-description" },
+                                property.name,
+                                " ",
+                                property.optional ? '(optional)' : ''),
+                            React.createElement("input", { name: "chat-model-id-input", placeholder: property.description, className: "jp-mod-styled", spellCheck: false, value: property.value, onChange: event => onModelPropertyChange('chat', property.id, event.target.value) })))))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Auto-complete model"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "Provider"),
+                            React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", onChange: event => updateModelOptionsForProvider(event.target.value, 'inline-completion') },
+                                    llmProviders.map((provider, index) => (React.createElement("option", { key: index, value: provider.id, selected: provider.id === inlineCompletionModelProvider }, provider.name))),
+                                    React.createElement("option", { key: -1, value: "none", selected: inlineCompletionModelProvider === 'none' ||
+                                            !llmProviders.find(provider => provider.id === inlineCompletionModelProvider) }, "None")))),
+                        !['openai-compatible', 'litellm-compatible', 'none'].includes(inlineCompletionModelProvider) && (React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "Model"),
+                            ![
+                                OPENAI_COMPATIBLE_INLINE_COMPLETION_MODEL_ID,
+                                LITELLM_COMPATIBLE_INLINE_COMPLETION_MODEL_ID
+                            ].includes(inlineCompletionModel) && (React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", onChange: event => setInlineCompletionModel(event.target.value) }, inlineCompletionModels.map((model, index) => (React.createElement("option", { key: index, value: model.id, selected: model.id === inlineCompletionModel }, model.name))))))))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" }, inlineCompletionModelProperties.map((property, index) => (React.createElement("div", { className: "form-field-row", key: index },
+                            React.createElement("div", { className: "form-field-description" },
+                                property.name,
+                                " ",
+                                property.optional ? '(optional)' : ''),
+                            React.createElement("input", { name: "inline-completion-model-id-input", placeholder: property.description, className: "jp-mod-styled", spellCheck: false, value: property.value, onChange: event => onModelPropertyChange('inline-completion', property.id, event.target.value) })))))))),
+            (chatModelProvider === 'github-copilot' ||
+                inlineCompletionModelProvider === 'github-copilot') && (React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header access-token-config-header" },
+                    "GitHub Copilot login",
+                    ' ',
+                    React.createElement("a", { href: "https://github.com/notebook-intelligence/notebook-intelligence/blob/main/README.md#remembering-github-copilot-login", target: "_blank" },
+                        ' ',
+                        React.createElement(VscWarning, { className: "access-token-warning", title: "Click to learn more about security implications" }))),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("label", null,
+                                React.createElement("input", { type: "checkbox", checked: storeGitHubAccessToken, onChange: event => {
+                                        setStoreGitHubAccessToken(event.target.checked);
+                                    } }),
+                                "Remember my GitHub Copilot access token")))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Config file path"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("span", { className: "user-code-span", onClick: () => {
+                                    navigator.clipboard.writeText(path.join(NBIAPI.config.userConfigDir, 'config.json'));
+                                    return true;
+                                } },
+                                path.join(NBIAPI.config.userConfigDir, 'config.json'),
+                                ' ',
+                                React.createElement("span", { className: "copy-icon", dangerouslySetInnerHTML: { __html: copySvgstr } })))))))));
+}
+function SettingsPanelComponentMCPServers(props) {
+    const nbiConfig = NBIAPI.config;
+    const mcpServersRef = useRef(nbiConfig.toolConfig.mcpServers);
+    const mcpServerSettingsRef = useRef(nbiConfig.mcpServerSettings);
+    const [renderCount, setRenderCount] = useState(1);
+    const [mcpServerEnabledState, setMCPServerEnabledState] = useState(new Map(mcpServerSettingsToEnabledState(mcpServersRef.current, mcpServerSettingsRef.current)));
+    const mcpServerEnabledStateToMcpServerSettings = () => {
+        const mcpServerSettings = {};
+        for (const mcpServer of mcpServersRef.current) {
+            if (mcpServerEnabledState.has(mcpServer.id)) {
+                const disabledTools = [];
+                for (const tool of mcpServer.tools) {
+                    if (!mcpServerEnabledState.get(mcpServer.id).has(tool.name)) {
+                        disabledTools.push(tool.name);
+                    }
+                }
+                mcpServerSettings[mcpServer.id] = {
+                    disabled: false,
+                    disabled_tools: disabledTools
+                };
+            }
+            else {
+                mcpServerSettings[mcpServer.id] = { disabled: true };
+            }
+        }
+        return mcpServerSettings;
+    };
+    const syncSettingsToServerState = () => {
+        NBIAPI.setConfig({
+            mcp_server_settings: mcpServerSettingsRef.current
+        });
+    };
+    const handleReloadMCPServersClick = async () => {
+        await NBIAPI.reloadMCPServers();
+    };
+    useEffect(() => {
+        syncSettingsToServerState();
+    }, [mcpServerSettingsRef.current]);
+    useEffect(() => {
+        mcpServerSettingsRef.current = mcpServerEnabledStateToMcpServerSettings();
+        setRenderCount(renderCount => renderCount + 1);
+    }, [mcpServerEnabledState]);
+    const setMCPServerEnabled = (serverId, enabled) => {
+        var _a;
+        const currentState = new Map(mcpServerEnabledState);
+        if (enabled) {
+            if (!(serverId in currentState)) {
+                currentState.set(serverId, new Set((_a = mcpServersRef.current
+                    .find((server) => server.id === serverId)) === null || _a === void 0 ? void 0 : _a.tools.map((tool) => tool.name)));
+            }
+        }
+        else {
+            currentState.delete(serverId);
+        }
+        setMCPServerEnabledState(currentState);
+    };
+    const getMCPServerEnabled = (serverId) => {
+        return mcpServerEnabledState.has(serverId);
+    };
+    const getMCPServerToolEnabled = (serverId, toolName) => {
+        return (mcpServerEnabledState.has(serverId) &&
+            mcpServerEnabledState.get(serverId).has(toolName));
+    };
+    const setMCPServerToolEnabled = (serverId, toolName, enabled) => {
+        const currentState = new Map(mcpServerEnabledState);
+        const serverState = currentState.get(serverId);
+        if (enabled) {
+            serverState.add(toolName);
+        }
+        else {
+            serverState.delete(toolName);
+        }
+        setMCPServerEnabledState(currentState);
+    };
+    useEffect(() => {
+        NBIAPI.configChanged.connect(() => {
+            mcpServersRef.current = nbiConfig.toolConfig.mcpServers;
+            mcpServerSettingsRef.current = nbiConfig.mcpServerSettings;
+            setRenderCount(renderCount => renderCount + 1);
+        });
+    }, []);
+    return (React.createElement("div", { className: "config-dialog" },
+        React.createElement("div", { className: "config-dialog-body" },
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header", style: { display: 'flex' } },
+                    React.createElement("div", { style: { flexGrow: 1 } }, "MCP Servers"),
+                    React.createElement("div", null,
+                        React.createElement("button", { className: "jp-toast-button jp-mod-small jp-Button", onClick: handleReloadMCPServersClick },
+                            React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Reload")))),
+                React.createElement("div", { className: "model-config-section-body" },
+                    mcpServersRef.current.length === 0 && renderCount > 0 && (React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "No MCP servers found. Add MCP servers in the configuration file.")))),
+                    mcpServersRef.current.length > 0 && renderCount > 0 && (React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" }, mcpServersRef.current.map((server) => (React.createElement("div", { key: server.id },
+                            React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+                                React.createElement(CheckBoxItem, { header: true, label: server.id, checked: getMCPServerEnabled(server.id), onClick: () => {
+                                        setMCPServerEnabled(server.id, !getMCPServerEnabled(server.id));
+                                    } }),
+                                React.createElement("div", { className: `server-status-indicator ${server.status}`, title: server.status })),
+                            getMCPServerEnabled(server.id) && (React.createElement("div", null, server.tools.map((tool) => (React.createElement(PillItem, { label: tool.name, title: tool.description, checked: getMCPServerToolEnabled(server.id, tool.name), onClick: () => {
+                                    setMCPServerToolEnabled(server.id, tool.name, !getMCPServerToolEnabled(server.id, tool.name));
+                                } }))))))))))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column", style: { flexGrow: 'initial' } },
+                            React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", style: { width: 'max-content' }, onClick: props.onEditMCPConfigClicked },
+                                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Add / Edit")))))))));
+}

package/lib/index.js

@@ -1,6 +1,6 @@
 // Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
 import { IDocumentManager } from '@jupyterlab/docmanager';
-import { Dialog, ICommandPalette } from '@jupyterlab/apputils';
+import { Dialog, ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
 import { IMainMenu } from '@jupyterlab/mainmenu';
 import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { CodeCell } from '@jupyterlab/cells';
@@ -14,7 +14,7 @@ import { LabIcon } from '@jupyterlab/ui-components';
 import { Menu, Panel, Widget } from '@lumino/widgets';
 import { CommandRegistry } from '@lumino/commands';
 import { IStatusBar } from '@jupyterlab/statusbar';
-import { ChatSidebar, ConfigurationDialogBody, GitHubCopilotLoginDialogBody, GitHubCopilotStatusBarItem, InlinePromptWidget, RunChatCompletionType } from './chat-sidebar';
+import { ChatSidebar, GitHubCopilotLoginDialogBody, GitHubCopilotStatusBarItem, InlinePromptWidget, RunChatCompletionType } from './chat-sidebar';
 import { NBIAPI, GitHubCopilotLoginStatus } from './api';
 import { BackendMessageType, GITHUB_COPILOT_PROVIDER_ID, INotebookIntelligence, RequestDataType, TelemetryEventType } from './tokens';
 import sparklesSvgstr from '../style/icons/sparkles.svg';
@@ -22,6 +22,7 @@ import copilotSvgstr from '../style/icons/copilot.svg';
 import { applyCodeToSelectionInEditor, cellOutputAsText, compareSelections, extractLLMGeneratedCode, getSelectionInEditor, getTokenCount, getWholeNotebookContent, isSelectionEmpty, markdownToComment, waitForDuration } from './utils';
 import { UUID } from '@lumino/coreutils';
 import * as path from 'path';
+import { SettingsPanel } from './components/settings-panel';
 var CommandIDs;
 (function (CommandIDs) {
     CommandIDs.chatuserInput = 'notebook-intelligence:chat-user-input';
@@ -922,28 +923,32 @@ const plugin = {
                 dialog.launch();
             }
         });
+        const createNewSettingsWidget = () => {
+            const settingsPanel = new SettingsPanel({
+                onSave: () => {
+                    NBIAPI.fetchCapabilities();
+                },
+                onEditMCPConfigClicked: () => {
+                    app.commands.execute('notebook-intelligence:open-mcp-config-editor');
+                }
+            });
+            const widget = new MainAreaWidget({ content: settingsPanel });
+            widget.id = 'nbi-settings';
+            widget.title.label = 'NBI Settings';
+            widget.title.closable = true;
+            return widget;
+        };
+        let settingsWidget = createNewSettingsWidget();
         app.commands.addCommand(CommandIDs.openConfigurationDialog, {
             label: 'Notebook Intelligence Settings',
             execute: args => {
-                let dialog = null;
-                const dialogBody = new ConfigurationDialogBody({
-                    onSave: () => {
-                        dialog === null || dialog === void 0 ? void 0 : dialog.dispose();
-                        NBIAPI.fetchCapabilities();
-                    },
-                    onEditMCPConfigClicked: () => {
-                        dialog === null || dialog === void 0 ? void 0 : dialog.dispose();
-                        app.commands.execute('notebook-intelligence:open-mcp-config-editor');
-                    }
-                });
-                dialog = new Dialog({
-                    title: 'Notebook Intelligence Settings',
-                    hasClose: true,
-                    body: dialogBody,
-                    buttons: []
-                });
-                dialog.node.classList.add('config-dialog-container');
-                dialog.launch();
+                if (settingsWidget.isDisposed) {
+                    settingsWidget = createNewSettingsWidget();
+                }
+                if (!settingsWidget.isAttached) {
+                    app.shell.add(settingsWidget, 'main');
+                }
+                app.shell.activateById(settingsWidget.id);
             }
         });
         app.commands.addCommand(CommandIDs.openMCPConfigEditor, {

package/lib/tokens.d.ts

@@ -26,7 +26,8 @@ export declare enum BackendMessageType {
     StreamMessage = "stream-message",
     StreamEnd = "stream-end",
     RunUICommand = "run-ui-command",
-    GitHubCopilotLoginStatusChange = "github-copilot-login-status-change"
+    GitHubCopilotLoginStatusChange = "github-copilot-login-status-change",
+    MCPServerStatusChange = "mcp-server-status-change"
 }
 export declare enum ResponseStreamDataType {
     LLMRaw = "llm-raw",
@@ -43,6 +44,15 @@ export declare enum ContextType {
     Custom = "custom",
     CurrentFile = "current-file"
 }
+export declare enum MCPServerStatus {
+    NotConnected = "not-connected",
+    Connecting = "connecting",
+    Disconnecting = "disconnecting",
+    FailedToConnect = "failed-to-connect",
+    Connected = "connected",
+    UpdatingToolList = "updating-tool-list",
+    UpdatedToolList = "updated-tool-list"
+}
 export interface IContextItem {
     type: ContextType;
     content: string;

package/lib/tokens.js

@@ -17,6 +17,7 @@ export var BackendMessageType;
     BackendMessageType["StreamEnd"] = "stream-end";
     BackendMessageType["RunUICommand"] = "run-ui-command";
     BackendMessageType["GitHubCopilotLoginStatusChange"] = "github-copilot-login-status-change";
+    BackendMessageType["MCPServerStatusChange"] = "mcp-server-status-change";
 })(BackendMessageType || (BackendMessageType = {}));
 export var ResponseStreamDataType;
 (function (ResponseStreamDataType) {
@@ -35,6 +36,16 @@ export var ContextType;
     ContextType["Custom"] = "custom";
     ContextType["CurrentFile"] = "current-file";
 })(ContextType || (ContextType = {}));
+export var MCPServerStatus;
+(function (MCPServerStatus) {
+    MCPServerStatus["NotConnected"] = "not-connected";
+    MCPServerStatus["Connecting"] = "connecting";
+    MCPServerStatus["Disconnecting"] = "disconnecting";
+    MCPServerStatus["FailedToConnect"] = "failed-to-connect";
+    MCPServerStatus["Connected"] = "connected";
+    MCPServerStatus["UpdatingToolList"] = "updating-tool-list";
+    MCPServerStatus["UpdatedToolList"] = "updated-tool-list";
+})(MCPServerStatus || (MCPServerStatus = {}));
 export var BuiltinToolsetType;
 (function (BuiltinToolsetType) {
     BuiltinToolsetType["NotebookEdit"] = "nbi-notebook-edit";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@notebook-intelligence/notebook-intelligence",
-    "version": "2.4.2",
+    "version": "2.5.0",
     "description": "AI coding assistant for JupyterLab",
     "keywords": [
         "AI",

package/src/api.ts

@@ -76,6 +76,10 @@ export class NBIConfig {
     return this.capabilities.tool_config;
   }
 
+  get mcpServerSettings(): any {
+    return this.capabilities.mcp_server_settings;
+  }
+
   capabilities: any = {};
   chatParticipants: IChatParticipant[] = [];
 
@@ -102,7 +106,11 @@ export class NBIAPI {
 
     this._messageReceived.connect((_, msg) => {
       msg = JSON.parse(msg);
-      if (msg.type === BackendMessageType.GitHubCopilotLoginStatusChange) {
+      if (msg.type === BackendMessageType.MCPServerStatusChange) {
+        this.fetchCapabilities();
+      } else if (
+        msg.type === BackendMessageType.GitHubCopilotLoginStatusChange
+      ) {
         this.updateGitHubLoginStatus().then(() => {
           this.githubLoginStatusChanged.emit();
         });
@@ -201,11 +209,21 @@ export class NBIAPI {
     return new Promise<void>((resolve, reject) => {
       requestAPI<any>('capabilities', { method: 'GET' })
         .then(data => {
+          const oldConfig = {
+            capabilities: structuredClone(this.config.capabilities),
+            chatParticipants: structuredClone(this.config.chatParticipants)
+          };
           this.config.capabilities = structuredClone(data);
           this.config.chatParticipants = structuredClone(
             data.chat_participants
           );
-          this.configChanged.emit();
+          const newConfig = {
+            capabilities: structuredClone(this.config.capabilities),
+            chatParticipants: structuredClone(this.config.chatParticipants)
+          };
+          if (JSON.stringify(newConfig) !== JSON.stringify(oldConfig)) {
+            this.configChanged.emit();
+          }
           resolve();
         })
         .catch(reason => {
@@ -245,20 +263,6 @@ export class NBIAPI {
     });
   }
 
-  static async reloadMCPServerList(): Promise<any> {
-    return new Promise<any>((resolve, reject) => {
-      requestAPI<any>('reload-mcp-servers', { method: 'POST' })
-        .then(async data => {
-          await NBIAPI.fetchCapabilities();
-          resolve(data);
-        })
-        .catch(reason => {
-          console.error(`Failed to reload MCP server list.\n${reason}`);
-          reject(reason);
-        });
-    });
-  }
-
   static async getMCPConfigFile(): Promise<any> {
     return new Promise<any>((resolve, reject) => {
       requestAPI<any>('mcp-config-file', { method: 'GET' })
@@ -322,6 +326,20 @@ export class NBIAPI {
     );
   }
 
+  static async reloadMCPServers(): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      requestAPI<any>('reload-mcp-servers', { method: 'POST' })
+        .then(async data => {
+          await NBIAPI.fetchCapabilities();
+          resolve(data);
+        })
+        .catch(reason => {
+          console.error(`Failed to reload MCP servers.\n${reason}`);
+          reject(reason);
+        });
+    });
+  }
+
   static async generateCode(
     chatId: string,
     prompt: string,