@plmbr/notebook-intelligence 5.0.0

package/lib/components/settings-panel.js

@@ -0,0 +1,742 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { VscWarning } from '../icons';
+import * as path from 'path';
+import copySvgstr from '../../style/icons/copy.svg';
+import claudeSvgStr from '../../style/icons/claude.svg';
+import { ClaudeModelType, ClaudeToolType, NBIAPI } from '../api';
+import { CheckBoxItem } from './checkbox';
+import { PillItem } from './pill';
+import { mcpServerSettingsToEnabledState } from './mcp-util';
+import { SettingsPanelComponentSkills } from './skills-panel';
+import { SettingsPanelComponentClaudeMCP } from './claude-mcp-panel';
+import { SettingsPanelComponentPlugins } from './plugins-panel';
+import { writeTextToClipboard } from '../utils';
+const lockedTip = (locked) => locked ? 'Locked by your administrator' : '';
+// Stable id helper so the tab and its panel agree on aria-controls /
+// aria-labelledby without scattering string concatenation through the
+// component.
+const tabId = (prefix, id) => `${prefix}-${id}`;
+// WAI-ARIA tablist arrow-key navigation. Same shape for both the
+// vertical (Up/Down) main tabs and the horizontal (Left/Right) Claude
+// subtabs — the orientation flag picks which keys move the cursor.
+// Returns an ``onKeyDown`` for the tablist container; callers decide
+// what to do with each id (typically: select + focus).
+function useTablistArrowKeys(tabs, activeId, onSelect, orientation, domIdFor) {
+    return (e) => {
+        var _a;
+        const key = e.key;
+        const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+        if (key !== prevKey && key !== nextKey && key !== 'Home' && key !== 'End') {
+            return;
+        }
+        e.preventDefault();
+        const idx = tabs.findIndex(t => t.id === activeId);
+        let next = idx;
+        if (key === nextKey) {
+            next = (idx + 1) % tabs.length;
+        }
+        else if (key === prevKey) {
+            next = (idx - 1 + tabs.length) % tabs.length;
+        }
+        else if (key === 'Home') {
+            next = 0;
+        }
+        else if (key === 'End') {
+            next = tabs.length - 1;
+        }
+        onSelect(tabs[next].id);
+        (_a = document.getElementById(domIdFor(tabs[next].id))) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+}
+// When a boolean policy is locked the panel shows the policy-resolved value;
+// otherwise it shows the user's local toggle state.
+const checkedValue = (policy, userValue) => (policy.locked ? policy.enabled : userValue);
+function useNbiPolicies() {
+    const [featurePolicies, setFeaturePolicies] = useState(NBIAPI.config.featurePolicies);
+    const [settingLocks, setSettingLocks] = useState(NBIAPI.config.settingLocks);
+    useEffect(() => {
+        const handler = () => {
+            setFeaturePolicies(NBIAPI.config.featurePolicies);
+            setSettingLocks(NBIAPI.config.settingLocks);
+        };
+        NBIAPI.configChanged.connect(handler);
+        return () => {
+            NBIAPI.configChanged.disconnect(handler);
+        };
+    }, []);
+    return { featurePolicies, settingLocks };
+}
+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 }));
+    }
+}
+const TABS = [
+    {
+        id: 'general',
+        label: 'General',
+        visible: () => true,
+        render: props => (React.createElement(SettingsPanelComponentGeneral, { onSave: props.onSave, onEditMCPConfigClicked: props.onEditMCPConfigClicked }))
+    },
+    {
+        id: 'claude',
+        label: 'Claude',
+        icon: () => (React.createElement("span", { className: "claude-icon", dangerouslySetInnerHTML: { __html: claudeSvgStr } })),
+        visible: () => true,
+        render: props => (React.createElement(SettingsPanelComponentClaude, { onEditMCPConfigClicked: props.onEditMCPConfigClicked }))
+    },
+    {
+        id: 'mcp-servers',
+        label: 'MCP Servers',
+        visible: ctx => !ctx.isInClaudeCodeMode,
+        render: props => (React.createElement(SettingsPanelComponentMCPServers, { onEditMCPConfigClicked: props.onEditMCPConfigClicked }))
+    },
+    {
+        id: 'claude-mcp',
+        label: 'Claude MCP',
+        visible: ctx => ctx.featurePolicies.claude_mcp_management.enabled &&
+            ctx.isInClaudeCodeMode &&
+            ctx.isClaudeCliAvailable,
+        render: () => React.createElement(SettingsPanelComponentClaudeMCP, null)
+    },
+    {
+        id: 'plugins',
+        label: 'Plugins',
+        visible: ctx => ctx.featurePolicies.claude_plugins_management.enabled &&
+            ctx.isInClaudeCodeMode &&
+            ctx.isClaudeCliAvailable,
+        render: () => React.createElement(SettingsPanelComponentPlugins, null)
+    },
+    {
+        id: 'skills',
+        label: 'Skills',
+        visible: ctx => ctx.featurePolicies.skills_management.enabled,
+        render: () => React.createElement(SettingsPanelComponentSkills, null)
+    }
+];
+function SettingsPanelComponent(props) {
+    const [activeTab, setActiveTab] = useState('general');
+    const { featurePolicies } = useNbiPolicies();
+    const [isInClaudeCodeMode, setIsInClaudeCodeMode] = useState(NBIAPI.config.isInClaudeCodeMode);
+    const [isClaudeCliAvailable, setIsClaudeCliAvailable] = useState(NBIAPI.config.isClaudeCliAvailable);
+    useEffect(() => {
+        const handler = () => {
+            setIsInClaudeCodeMode(NBIAPI.config.isInClaudeCodeMode);
+            setIsClaudeCliAvailable(NBIAPI.config.isClaudeCliAvailable);
+        };
+        NBIAPI.configChanged.connect(handler);
+        return () => {
+            NBIAPI.configChanged.disconnect(handler);
+        };
+    }, []);
+    const ctx = {
+        featurePolicies,
+        isInClaudeCodeMode,
+        isClaudeCliAvailable
+    };
+    const visibleTabs = TABS.filter(t => t.visible(ctx));
+    const activeTabSpec = visibleTabs.find(t => t.id === activeTab);
+    // Bounce off a tab that just disappeared (admin policy flip, mode toggle).
+    useEffect(() => {
+        if (!activeTabSpec) {
+            setActiveTab('general');
+        }
+    }, [activeTabSpec]);
+    return (React.createElement("div", { className: "nbi-settings-panel" },
+        React.createElement(SettingsPanelTabsComponent, { tabs: visibleTabs, activeTab: activeTab, onTabSelected: setActiveTab }),
+        React.createElement("div", { className: "nbi-settings-panel-tab-content", role: "tabpanel", id: tabId('nbi-settings-tabpanel', activeTab), "aria-labelledby": tabId('nbi-settings-tab', activeTab) }, activeTabSpec && activeTabSpec.render(props))));
+}
+function SettingsPanelTabsComponent(props) {
+    const onKeyDown = useTablistArrowKeys(props.tabs, props.activeTab, props.onTabSelected, 'vertical', id => tabId('nbi-settings-tab', id));
+    return (React.createElement("div", { className: "nbi-settings-panel-tabs", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings sections", onKeyDown: onKeyDown }, props.tabs.map(tab => {
+        const selected = tab.id === props.activeTab;
+        return (React.createElement("button", { type: "button", key: tab.id, id: tabId('nbi-settings-tab', tab.id), className: `nbi-settings-panel-tab ${selected ? 'active' : ''}`, role: "tab", "aria-selected": selected, "aria-controls": tabId('nbi-settings-tabpanel', tab.id), tabIndex: selected ? 0 : -1, onClick: () => props.onTabSelected(tab.id) },
+            tab.icon && tab.icon(),
+            tab.label));
+    })));
+}
+function SettingsPanelComponentGeneral(props) {
+    const nbiConfig = NBIAPI.config;
+    const llmProviders = nbiConfig.llmProviders;
+    const [chatModels, setChatModels] = useState([]);
+    const [inlineCompletionModels, setInlineCompletionModels] = useState([]);
+    const isInClaudeCodeMode = nbiConfig.isInClaudeCodeMode;
+    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
+            },
+            inline_completion_debouncer_delay: inlineCompletionDebouncerDelay
+        };
+        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 [inlineCompletionDebouncerDelay, setInlineCompletionDebouncerDelay] = useState(nbiConfig.inlineCompletionDebouncerDelay);
+    const { featurePolicies, settingLocks } = useNbiPolicies();
+    const toggleExplainError = () => {
+        NBIAPI.setConfig({
+            enable_explain_error: !featurePolicies.explain_error.enabled
+        });
+    };
+    const toggleOutputFollowup = () => {
+        NBIAPI.setConfig({
+            enable_output_followup: !featurePolicies.output_followup.enabled
+        });
+    };
+    const toggleOutputToolbar = () => {
+        NBIAPI.setConfig({
+            enable_output_toolbar: !featurePolicies.output_toolbar.enabled
+        });
+    };
+    const toggleRefreshOpenFilesOnDiskChange = () => {
+        NBIAPI.setConfig({
+            refresh_open_files_on_disk_change: !featurePolicies.refresh_open_files_on_disk_change.enabled
+        });
+    };
+    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,
+        inlineCompletionDebouncerDelay
+    ]);
+    return (React.createElement("div", { className: "config-dialog" },
+        React.createElement("div", { className: "config-dialog-body" },
+            !isInClaudeCodeMode && (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" }, " "))))),
+            !isInClaudeCodeMode && (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", { title: lockedTip(settingLocks.chat_model_provider.locked) },
+                                React.createElement("select", { className: "jp-mod-styled", disabled: settingLocks.chat_model_provider.locked, 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", { title: lockedTip(settingLocks.chat_model_id.locked) },
+                                React.createElement("select", { className: "jp-mod-styled", disabled: settingLocks.chat_model_id.locked, 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("button", { type: "button", className: "link-button", 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", { title: lockedTip(settingLocks.inline_completion_model_provider.locked) },
+                                React.createElement("select", { className: "jp-mod-styled", disabled: settingLocks.inline_completion_model_provider.locked, 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", { title: lockedTip(settingLocks.inline_completion_model_id.locked) },
+                                React.createElement("select", { className: "jp-mod-styled", disabled: settingLocks.inline_completion_model_id.locked, 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) })))))))),
+            React.createElement("div", { className: "model-config-section-row", style: { width: '50%' } },
+                React.createElement("div", { className: "model-config-section-column" },
+                    React.createElement("div", { className: "form-field-row", style: { paddingLeft: '10px' } },
+                        React.createElement("div", { className: "form-field-description" }, "Auto-complete debouncer delay (ms)"),
+                        React.createElement("input", { name: "inline-completion-debouncer-delay-input", placeholder: "Auto-complete debouncer delay (milliseconds)", className: "jp-mod-styled", spellCheck: false, value: inlineCompletionDebouncerDelay, type: "number", onChange: event => setInlineCompletionDebouncerDelay(Number(event.target.value)) })))),
+            !isInClaudeCodeMode &&
+                (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/plmbr/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", { title: lockedTip(featurePolicies.store_github_access_token.locked) },
+                                React.createElement("input", { type: "checkbox", checked: checkedValue(featurePolicies.store_github_access_token, storeGitHubAccessToken), disabled: featurePolicies.store_github_access_token.locked, 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" }, "Cell output features"),
+                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(CheckBoxItem, { label: "Explain cell errors", title: "Show a 'Troubleshoot errors in output' context-menu item on failed cells", checked: featurePolicies.explain_error.enabled, disabled: featurePolicies.explain_error.locked, tooltip: lockedTip(featurePolicies.explain_error.locked), onClick: toggleExplainError }))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement(CheckBoxItem, { label: "Ask about cell outputs", title: "Right-click a cell output to attach it to the chat", checked: featurePolicies.output_followup.enabled, disabled: featurePolicies.output_followup.locked, tooltip: lockedTip(featurePolicies.output_followup.locked), onClick: toggleOutputFollowup }))),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement(CheckBoxItem, { label: "Show output toolbar", title: "Show a hover toolbar over cell outputs with Explain / Ask / Troubleshoot buttons", checked: featurePolicies.output_toolbar.enabled, disabled: featurePolicies.output_toolbar.locked, tooltip: lockedTip(featurePolicies.output_toolbar.locked), onClick: toggleOutputToolbar }))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "External changes"),
+                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(CheckBoxItem, { label: "Refresh open files when changed on disk", title: "Automatically reload notebook and file editor tabs when an external process (terminal command, sync client, or AI agent) edits the file. Skipped when the tab has unsaved local edits.", checked: featurePolicies.refresh_open_files_on_disk_change.enabled, disabled: featurePolicies.refresh_open_files_on_disk_change.locked, tooltip: lockedTip(featurePolicies.refresh_open_files_on_disk_change.locked), onClick: toggleRefreshOpenFilesOnDiskChange }))))),
+            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: () => {
+                                    void writeTextToClipboard(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(() => {
+        const handler = () => {
+            mcpServersRef.current = nbiConfig.toolConfig.mcpServers;
+            mcpServerSettingsRef.current = nbiConfig.mcpServerSettings;
+            setRenderCount(renderCount => renderCount + 1);
+        };
+        NBIAPI.configChanged.connect(handler);
+        return () => {
+            NBIAPI.configChanged.disconnect(handler);
+        };
+    }, []);
+    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.length > 0 && (React.createElement("div", { className: "mcp-server-tools" },
+                                    React.createElement("div", { className: "mcp-server-tools-header" }, "Tools"),
+                                    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));
+                                        } })))))),
+                                server.prompts.length > 0 && (React.createElement("div", { className: "mcp-server-prompts" },
+                                    React.createElement("div", { className: "mcp-server-prompts-header" }, "Prompts"),
+                                    React.createElement("div", null, server.prompts.map((prompt) => (React.createElement(PillItem, { label: prompt.name, title: prompt.description, checked: true })))))))))))))),
+                    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")))))))));
+}
+function SettingsPanelComponentClaude(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const nbiConfig = NBIAPI.config;
+    const claudeSettingsRef = useRef(nbiConfig.claudeSettings);
+    const [_renderCount, setRenderCount] = useState(1);
+    const [claudeEnabled, setClaudeEnabled] = useState(nbiConfig.isInClaudeCodeMode);
+    const [chatModel, setChatModel] = useState((_a = nbiConfig.claudeSettings.chat_model) !== null && _a !== void 0 ? _a : ClaudeModelType.Default);
+    const [inlineCompletionModel, setInlineCompletionModel] = useState((_b = nbiConfig.claudeSettings.inline_completion_model) !== null && _b !== void 0 ? _b : ClaudeModelType.Default);
+    const [apiKey, setApiKey] = useState((_c = nbiConfig.claudeSettings.api_key) !== null && _c !== void 0 ? _c : '');
+    const [baseUrl, setBaseUrl] = useState((_d = nbiConfig.claudeSettings.base_url) !== null && _d !== void 0 ? _d : '');
+    const [settingSources, setSettingSources] = useState((_e = nbiConfig.claudeSettings.setting_sources) !== null && _e !== void 0 ? _e : []);
+    const [tools, setTools] = useState((_f = nbiConfig.claudeSettings.tools) !== null && _f !== void 0 ? _f : [
+        ClaudeToolType.ClaudeCodeTools,
+        ClaudeToolType.JupyterUITools
+    ]);
+    const [continueConversation, setContinueConversation] = useState((_g = nbiConfig.claudeSettings.continue_conversation) !== null && _g !== void 0 ? _g : false);
+    const [claudeModels, setClaudeModels] = useState(nbiConfig.claudeModels);
+    const [loadingModels, setLoadingModels] = useState(false);
+    const { featurePolicies, settingLocks } = useNbiPolicies();
+    useEffect(() => {
+        const handler = () => {
+            claudeSettingsRef.current = nbiConfig.claudeSettings;
+            setClaudeModels(nbiConfig.claudeModels);
+            setRenderCount(renderCount => renderCount + 1);
+        };
+        NBIAPI.configChanged.connect(handler);
+        return () => {
+            NBIAPI.configChanged.disconnect(handler);
+        };
+    }, []);
+    const refreshClaudeModels = async () => {
+        setLoadingModels(true);
+        try {
+            await NBIAPI.updateClaudeModelList();
+            const models = nbiConfig.claudeModels;
+            console.log('claude_models after refresh:', models);
+            setClaudeModels(models);
+        }
+        finally {
+            setLoadingModels(false);
+        }
+    };
+    const syncSettingsToServerState = () => {
+        NBIAPI.setConfig({
+            claude_settings: {
+                enabled: claudeEnabled,
+                chat_model: chatModel,
+                inline_completion_model: inlineCompletionModel,
+                api_key: apiKey,
+                base_url: baseUrl,
+                setting_sources: settingSources,
+                tools: tools,
+                continue_conversation: continueConversation
+            }
+        });
+    };
+    useEffect(() => {
+        syncSettingsToServerState();
+    }, [
+        claudeEnabled,
+        chatModel,
+        inlineCompletionModel,
+        apiKey,
+        baseUrl,
+        settingSources,
+        tools,
+        continueConversation
+    ]);
+    return (React.createElement("div", { className: "config-dialog claude-mode-config-dialog" },
+        React.createElement("div", { className: "config-dialog-body" },
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Enable Claude mode"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("span", null,
+                            "This requires a",
+                            ' ',
+                            React.createElement("a", { href: "https://claude.ai", target: "_blank" }, "Claude"),
+                            ' ',
+                            "account and",
+                            ' ',
+                            React.createElement("a", { href: "https://code.claude.com/", target: "_blank" }, "Claude Code"),
+                            ' ',
+                            "installed in your system.")),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Enable Claude mode", checked: checkedValue(featurePolicies.claude_mode, claudeEnabled), disabled: featurePolicies.claude_mode.locked, tooltip: lockedTip(featurePolicies.claude_mode.locked), onClick: () => {
+                                        setClaudeEnabled(!claudeEnabled);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header", style: { display: 'flex' } },
+                    React.createElement("div", { style: { flexGrow: 1 } }, "Models"),
+                    React.createElement("div", null,
+                        React.createElement("button", { className: "jp-toast-button jp-mod-small jp-Button", onClick: refreshClaudeModels, disabled: loadingModels },
+                            React.createElement("div", { className: "jp-Dialog-buttonLabel" }, loadingModels ? 'Loading...' : 'Refresh')))),
+                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", { id: "nbi-claude-chat-model-label" }, "Chat model"),
+                            React.createElement("div", { title: lockedTip(settingLocks.claude_chat_model.locked) },
+                                React.createElement("select", { className: "jp-mod-styled", "aria-labelledby": "nbi-claude-chat-model-label", "aria-describedby": settingLocks.claude_chat_model.locked
+                                        ? 'nbi-claude-chat-model-lock-reason'
+                                        : undefined, disabled: settingLocks.claude_chat_model.locked, value: chatModel, onChange: event => setChatModel(event.target.value) },
+                                    React.createElement("option", { value: ClaudeModelType.Default }, "Default (recommended)"),
+                                    chatModel !== ClaudeModelType.Default &&
+                                        !claudeModels.some(m => m.id === chatModel) && (React.createElement("option", { key: chatModel, value: chatModel }, chatModel)),
+                                    claudeModels.map(model => (React.createElement("option", { key: model.id, value: model.id }, model.name)))),
+                                settingLocks.claude_chat_model.locked && (React.createElement("span", { id: "nbi-claude-chat-model-lock-reason", className: "nbi-sr-only" }, "Locked by your administrator")))),
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", { id: "nbi-claude-inline-model-label" }, "Auto-complete model"),
+                            React.createElement("div", { title: lockedTip(settingLocks.claude_inline_completion_model.locked) },
+                                React.createElement("select", { className: "jp-mod-styled", "aria-labelledby": "nbi-claude-inline-model-label", "aria-describedby": settingLocks.claude_inline_completion_model.locked
+                                        ? 'nbi-claude-inline-model-lock-reason'
+                                        : undefined, disabled: settingLocks.claude_inline_completion_model.locked, value: inlineCompletionModel, onChange: event => setInlineCompletionModel(event.target.value) },
+                                    React.createElement("option", { value: ClaudeModelType.None }, "None"),
+                                    React.createElement("option", { value: ClaudeModelType.Inherit }, "Inherit from general settings"),
+                                    React.createElement("option", { value: ClaudeModelType.Default }, "Default (recommended)"),
+                                    ![
+                                        ClaudeModelType.None,
+                                        ClaudeModelType.Inherit,
+                                        ClaudeModelType.Default
+                                    ].includes(inlineCompletionModel) &&
+                                        !claudeModels.some(m => m.id === inlineCompletionModel) && (React.createElement("option", { key: inlineCompletionModel, value: inlineCompletionModel }, inlineCompletionModel)),
+                                    claudeModels.map(model => (React.createElement("option", { key: model.id, value: model.id }, model.name)))),
+                                settingLocks.claude_inline_completion_model.locked && (React.createElement("span", { id: "nbi-claude-inline-model-lock-reason", className: "nbi-sr-only" }, "Locked by your administrator"))))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Chat Agent setting sources"),
+                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(CheckBoxItem, { header: true, label: "User", checked: checkedValue(featurePolicies.claude_setting_source_user, settingSources.includes('user')), disabled: featurePolicies.claude_setting_source_user.locked, tooltip: lockedTip(featurePolicies.claude_setting_source_user.locked), onClick: () => {
+                                        setSettingSources(settingSources.includes('user')
+                                            ? settingSources.filter((source) => source !== 'user')
+                                            : [...settingSources, 'user']);
+                                    } }))),
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Project (Jupyter root directory)", checked: checkedValue(featurePolicies.claude_setting_source_project, settingSources.includes('project')), disabled: featurePolicies.claude_setting_source_project.locked, tooltip: lockedTip(featurePolicies.claude_setting_source_project.locked), onClick: () => {
+                                        setSettingSources(settingSources.includes('project')
+                                            ? settingSources.filter((source) => source !== 'project')
+                                            : [...settingSources, 'project']);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Chat Agent tools"),
+                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(CheckBoxItem, { header: true, label: "Claude Code tools", checked: checkedValue(featurePolicies.claude_code_tools, tools.includes(ClaudeToolType.ClaudeCodeTools)), disabled: true, tooltip: lockedTip(featurePolicies.claude_code_tools.locked), onClick: () => {
+                                        setTools(tools.includes(ClaudeToolType.ClaudeCodeTools)
+                                            ? tools.filter((tool) => tool !== ClaudeToolType.ClaudeCodeTools)
+                                            : [...tools, ClaudeToolType.ClaudeCodeTools]);
+                                    } }))),
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Jupyter UI tools", checked: checkedValue(featurePolicies.claude_jupyter_ui_tools, tools.includes(ClaudeToolType.JupyterUITools)), disabled: featurePolicies.claude_jupyter_ui_tools.locked, tooltip: lockedTip(featurePolicies.claude_jupyter_ui_tools.locked), onClick: () => {
+                                        setTools(tools.includes(ClaudeToolType.JupyterUITools)
+                                            ? tools.filter((tool) => tool !== ClaudeToolType.JupyterUITools)
+                                            : [...tools, ClaudeToolType.JupyterUITools]);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Conversation History"),
+                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(CheckBoxItem, { header: true, label: "Remember conversation history", checked: checkedValue(featurePolicies.claude_continue_conversation, continueConversation), disabled: featurePolicies.claude_continue_conversation.locked, tooltip: lockedTip(featurePolicies.claude_continue_conversation.locked), onClick: () => {
+                                        setContinueConversation(!continueConversation);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Claude account"),
+                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", { className: "form-field-row" },
+                                React.createElement("div", { className: "form-field-description" }, "API Key (optional)"),
+                                React.createElement("input", { name: "chat-model-id-input", placeholder: settingLocks.claude_api_key.locked
+                                        ? 'Locked by ANTHROPIC_API_KEY'
+                                        : 'API Key', className: "jp-mod-styled", spellCheck: false, value: settingLocks.claude_api_key.locked ? '' : apiKey, disabled: settingLocks.claude_api_key.locked, title: lockedTip(settingLocks.claude_api_key.locked), onChange: event => setApiKey(event.target.value) })),
+                            React.createElement("div", { className: "form-field-row" },
+                                React.createElement("div", { className: "form-field-description" }, "Base URL (optional)"),
+                                React.createElement("input", { name: "chat-model-id-input", placeholder: settingLocks.claude_base_url.locked
+                                        ? 'Locked by ANTHROPIC_BASE_URL'
+                                        : 'https://api.anthropic.com', className: "jp-mod-styled", spellCheck: false, value: baseUrl, disabled: settingLocks.claude_base_url.locked, title: lockedTip(settingLocks.claude_base_url.locked), onChange: event => setBaseUrl(event.target.value) })))))))));
+}