@plmbr/notebook-intelligence 5.0.0

package/lib/command-ids.d.ts

@@ -0,0 +1,39 @@
+export declare namespace CommandIDs {
+    const chatuserInput = "notebook-intelligence:chat-user-input";
+    const insertAtCursor = "notebook-intelligence:insert-at-cursor";
+    const addCodeAsNewCell = "notebook-intelligence:add-code-as-new-cell";
+    const createNewFile = "notebook-intelligence:create-new-file";
+    const createNewNotebookFromPython = "notebook-intelligence:create-new-notebook-from-py";
+    const renameNotebook = "notebook-intelligence:rename-notebook";
+    const addCodeCellToNotebook = "notebook-intelligence:add-code-cell-to-notebook";
+    const addMarkdownCellToNotebook = "notebook-intelligence:add-markdown-cell-to-notebook";
+    const editorGenerateCode = "notebook-intelligence:editor-generate-code";
+    const editorExplainThisCode = "notebook-intelligence:editor-explain-this-code";
+    const editorFixThisCode = "notebook-intelligence:editor-fix-this-code";
+    const editorExplainThisOutput = "notebook-intelligence:editor-explain-this-output";
+    const editorTroubleshootThisOutput = "notebook-intelligence:editor-troubleshoot-this-output";
+    const editorAskAboutThisOutput = "notebook-intelligence:editor-ask-about-this-output";
+    const openGitHubCopilotLoginDialog = "notebook-intelligence:open-github-copilot-login-dialog";
+    const openConfigurationDialog = "notebook-intelligence:open-configuration-dialog";
+    const addMarkdownCellToActiveNotebook = "notebook-intelligence:add-markdown-cell-to-active-notebook";
+    const addCodeCellToActiveNotebook = "notebook-intelligence:add-code-cell-to-active-notebook";
+    const deleteCellAtIndex = "notebook-intelligence:delete-cell-at-index";
+    const insertCellAtIndex = "notebook-intelligence:insert-cell-at-index";
+    const getCellTypeAndSource = "notebook-intelligence:get-cell-type-and-source";
+    const setCellTypeAndSource = "notebook-intelligence:set-cell-type-and-source";
+    const getNumberOfCells = "notebook-intelligence:get-number-of-cells";
+    const getCellOutput = "notebook-intelligence:get-cell-output";
+    const runCellAtIndex = "notebook-intelligence:run-cell-at-index";
+    const getCurrentFileContent = "notebook-intelligence:get-current-file-content";
+    const setCurrentFileContent = "notebook-intelligence:set-current-file-content";
+    const openMCPConfigEditor = "notebook-intelligence:open-mcp-config-editor";
+    const showFormInputDialog = "notebook-intelligence:show-form-input-dialog";
+    const runCommandInTerminal = "notebook-intelligence:run-command-in-terminal";
+    const openClaudeCodeLauncher = "notebook-intelligence:open-claude-code-launcher";
+    const openOpenCodeLauncher = "notebook-intelligence:open-opencode-launcher";
+    const openPiLauncher = "notebook-intelligence:open-pi-launcher";
+    const openGitHubCopilotCliLauncher = "notebook-intelligence:open-github-copilot-cli-launcher";
+    const openCodexLauncher = "notebook-intelligence:open-codex-launcher";
+    const showTour = "notebook-intelligence:show-tour";
+    const focusChatInput = "notebook-intelligence:focus-chat-input";
+}

package/lib/command-ids.js

@@ -0,0 +1,44 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+// Centralized command-id constants for the JupyterLab plugin. Hoisted out
+// of `src/index.ts` so non-JL modules (and Jest tests) can import them
+// without pulling the JupyterLab packages into their dependency graph.
+export var CommandIDs;
+(function (CommandIDs) {
+    CommandIDs.chatuserInput = 'notebook-intelligence:chat-user-input';
+    CommandIDs.insertAtCursor = 'notebook-intelligence:insert-at-cursor';
+    CommandIDs.addCodeAsNewCell = 'notebook-intelligence:add-code-as-new-cell';
+    CommandIDs.createNewFile = 'notebook-intelligence:create-new-file';
+    CommandIDs.createNewNotebookFromPython = 'notebook-intelligence:create-new-notebook-from-py';
+    CommandIDs.renameNotebook = 'notebook-intelligence:rename-notebook';
+    CommandIDs.addCodeCellToNotebook = 'notebook-intelligence:add-code-cell-to-notebook';
+    CommandIDs.addMarkdownCellToNotebook = 'notebook-intelligence:add-markdown-cell-to-notebook';
+    CommandIDs.editorGenerateCode = 'notebook-intelligence:editor-generate-code';
+    CommandIDs.editorExplainThisCode = 'notebook-intelligence:editor-explain-this-code';
+    CommandIDs.editorFixThisCode = 'notebook-intelligence:editor-fix-this-code';
+    CommandIDs.editorExplainThisOutput = 'notebook-intelligence:editor-explain-this-output';
+    CommandIDs.editorTroubleshootThisOutput = 'notebook-intelligence:editor-troubleshoot-this-output';
+    CommandIDs.editorAskAboutThisOutput = 'notebook-intelligence:editor-ask-about-this-output';
+    CommandIDs.openGitHubCopilotLoginDialog = 'notebook-intelligence:open-github-copilot-login-dialog';
+    CommandIDs.openConfigurationDialog = 'notebook-intelligence:open-configuration-dialog';
+    CommandIDs.addMarkdownCellToActiveNotebook = 'notebook-intelligence:add-markdown-cell-to-active-notebook';
+    CommandIDs.addCodeCellToActiveNotebook = 'notebook-intelligence:add-code-cell-to-active-notebook';
+    CommandIDs.deleteCellAtIndex = 'notebook-intelligence:delete-cell-at-index';
+    CommandIDs.insertCellAtIndex = 'notebook-intelligence:insert-cell-at-index';
+    CommandIDs.getCellTypeAndSource = 'notebook-intelligence:get-cell-type-and-source';
+    CommandIDs.setCellTypeAndSource = 'notebook-intelligence:set-cell-type-and-source';
+    CommandIDs.getNumberOfCells = 'notebook-intelligence:get-number-of-cells';
+    CommandIDs.getCellOutput = 'notebook-intelligence:get-cell-output';
+    CommandIDs.runCellAtIndex = 'notebook-intelligence:run-cell-at-index';
+    CommandIDs.getCurrentFileContent = 'notebook-intelligence:get-current-file-content';
+    CommandIDs.setCurrentFileContent = 'notebook-intelligence:set-current-file-content';
+    CommandIDs.openMCPConfigEditor = 'notebook-intelligence:open-mcp-config-editor';
+    CommandIDs.showFormInputDialog = 'notebook-intelligence:show-form-input-dialog';
+    CommandIDs.runCommandInTerminal = 'notebook-intelligence:run-command-in-terminal';
+    CommandIDs.openClaudeCodeLauncher = 'notebook-intelligence:open-claude-code-launcher';
+    CommandIDs.openOpenCodeLauncher = 'notebook-intelligence:open-opencode-launcher';
+    CommandIDs.openPiLauncher = 'notebook-intelligence:open-pi-launcher';
+    CommandIDs.openGitHubCopilotCliLauncher = 'notebook-intelligence:open-github-copilot-cli-launcher';
+    CommandIDs.openCodexLauncher = 'notebook-intelligence:open-codex-launcher';
+    CommandIDs.showTour = 'notebook-intelligence:show-tour';
+    CommandIDs.focusChatInput = 'notebook-intelligence:focus-chat-input';
+})(CommandIDs || (CommandIDs = {}));

package/lib/components/ask-user-question.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function AskUserQuestion(props: any): React.JSX.Element;

package/lib/components/ask-user-question.js

@@ -0,0 +1,85 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useId, useState } from 'react';
+export function AskUserQuestion(props) {
+    var _a;
+    const userQuestions = props.userQuestions.content;
+    const [selectedAnswers, setSelectedAnswers] = useState({});
+    // Form-scoped id prefix so DOM ids stay unique even when two questions
+    // share label text (or several AskUserQuestion forms render in the
+    // same chat transcript). React.useId() is the purpose-built primitive
+    // here: stable for the component's lifetime, SSR-safe, and survives
+    // StrictMode double-render without producing mismatched id/htmlFor
+    // pairs (a Math.random fallback could mis-pair under cache eviction).
+    // The server-provided identifier is preferred when present so two
+    // remounts of the same form keep the same DOM ids.
+    const reactId = useId();
+    const serverId = (_a = userQuestions.identifier) === null || _a === void 0 ? void 0 : _a.id;
+    const formIdPrefix = typeof serverId === 'string' && serverId.length > 0
+        ? `nbi-auq-${serverId}`
+        : `nbi-auq${reactId}`;
+    const onOptionSelected = (question, option) => {
+        var _a, _b, _c;
+        if (question.multiSelect) {
+            if ((_a = selectedAnswers[question.question]) === null || _a === void 0 ? void 0 : _a.includes(option.label)) {
+                setSelectedAnswers({
+                    ...selectedAnswers,
+                    [question.question]: ((_b = selectedAnswers[question.question]) !== null && _b !== void 0 ? _b : []).filter((o) => o !== option.label)
+                });
+            }
+            else {
+                setSelectedAnswers({
+                    ...selectedAnswers,
+                    [question.question]: [
+                        ...((_c = selectedAnswers[question.question]) !== null && _c !== void 0 ? _c : []),
+                        option.label
+                    ]
+                });
+            }
+        }
+        else {
+            setSelectedAnswers({
+                ...selectedAnswers,
+                [question.question]: [option.label]
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        userQuestions.title ? (React.createElement("div", null,
+            React.createElement("b", null, userQuestions.title))) : null,
+        userQuestions.message ? React.createElement("div", null, userQuestions.message) : null,
+        React.createElement("form", { className: "ask-user-question-form", onSubmit: event => {
+                event.preventDefault();
+                props.onSubmit(selectedAnswers);
+            } },
+            userQuestions.questions.map((question, qIndex) => {
+                const questionDomId = `${formIdPrefix}-q${qIndex}`;
+                // A single-select group is a radio group with a shared name so
+                // screen readers announce "1 of N selected" rather than
+                // treating each option as an independent checkbox. The wrapper
+                // role mirrors the input type: radiogroup for radios, group
+                // (the ARIA-1.2 fallback when no dedicated checkbox-group role
+                // exists) for checkboxes.
+                const inputType = question.multiSelect ? 'checkbox' : 'radio';
+                const groupRole = question.multiSelect ? 'group' : 'radiogroup';
+                return (React.createElement("div", { className: "ask-user-question-container", key: questionDomId, role: groupRole, "aria-labelledby": `${questionDomId}-label` },
+                    React.createElement("div", { className: "ask-user-question-question", id: `${questionDomId}-label` }, question.question),
+                    React.createElement("div", { className: "ask-user-question-header" }, question.header),
+                    React.createElement("div", { className: "ask-user-question-options" }, question.options.map((option, oIndex) => {
+                        var _a, _b;
+                        const optionDomId = `${questionDomId}-o${oIndex}`;
+                        return (React.createElement("div", { className: "ask-user-question-option", key: optionDomId },
+                            React.createElement("div", { className: "ask-user-question-option-input-container" },
+                                React.createElement("input", { id: optionDomId, name: questionDomId, type: inputType, checked: (_b = (_a = selectedAnswers[question.question]) === null || _a === void 0 ? void 0 : _a.includes(option.label)) !== null && _b !== void 0 ? _b : false, onChange: () => onOptionSelected(question, option) }),
+                                React.createElement("label", { htmlFor: optionDomId, className: "ask-user-question-option-label-container" },
+                                    React.createElement("div", { className: "ask-user-question-option-label" }, option.label),
+                                    React.createElement("div", { className: "ask-user-question-option-description" }, option.description)))));
+                    }))));
+            }),
+            React.createElement("div", { className: "ask-user-question-footer" },
+                React.createElement("button", { type: "submit", className: "jp-Dialog-button jp-mod-accept jp-mod-styled" },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, userQuestions.submitLabel)),
+                React.createElement("button", { type: "button", className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => {
+                        props.onCancel();
+                    } },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, userQuestions.cancelLabel))))));
+}

package/lib/components/checkbox.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CheckBoxItem(props: any): React.JSX.Element;

package/lib/components/checkbox.js

@@ -0,0 +1,30 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React from 'react';
+import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from '../icons';
+export function CheckBoxItem(props) {
+    const indent = props.indent || 0;
+    const disabled = props.disabled || false;
+    const checked = !!props.checked;
+    const activate = (event) => {
+        if (!disabled) {
+            props.onClick(event);
+        }
+    };
+    // Custom checkbox widget. Tracks the WAI-ARIA pattern: role='checkbox'
+    // + aria-checked + tabIndex=0 + Space/Enter to toggle. Disabled state
+    // is exposed via aria-disabled so the element stays focusable; a
+    // screen reader user can still announce "checkbox, disabled" and hear
+    // what's off without being able to toggle it.
+    return (React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`, title: props.tooltip || props.title || '', role: "checkbox", "aria-checked": checked, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, onClick: activate, onKeyDown: event => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                // Space scrolls the page by default, Enter is a no-op on a
+                // <div>; prevent both so the checkbox can own them.
+                event.preventDefault();
+                activate(event);
+            }
+        } },
+        React.createElement("div", { className: "checkbox-item-toggle" },
+            checked ? (React.createElement(MdCheckBox, { className: "checkbox-icon", style: { opacity: disabled ? 0.5 : 1 }, "aria-hidden": "true" })) : (React.createElement(MdOutlineCheckBoxOutlineBlank, { className: "checkbox-icon", style: { opacity: disabled ? 0.5 : 1 }, "aria-hidden": "true" })),
+            React.createElement("span", { style: { opacity: disabled ? 0.5 : 1 } }, props.label)),
+        props.title && (React.createElement("div", { className: "checkbox-item-description" }, props.title))));
+}

package/lib/components/claude-mcp-panel.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SettingsPanelComponentClaudeMCP(_props: any): JSX.Element;

package/lib/components/claude-mcp-panel.js

@@ -0,0 +1,275 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { NBIAPI } from '../api';
+import { FormDialog } from './form-dialog';
+import { configToInput, parseKVLines, parseMcpJsonEntry } from './claude-mcp-paste';
+const SCOPES = ['user', 'project', 'local'];
+const TRANSPORTS = ['stdio', 'sse', 'http'];
+const SCOPE_HINT = {
+    user: 'available in all your projects',
+    project: 'shared via the project repo (.mcp.json)',
+    local: 'this project, this user only'
+};
+export function SettingsPanelComponentClaudeMCP(_props) {
+    var _a;
+    const [servers, setServers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [addOpen, setAddOpen] = useState(false);
+    const [pendingRemoval, setPendingRemoval] = useState(null);
+    const [pendingToggle, setPendingToggle] = useState(null);
+    const refresh = async () => {
+        var _a;
+        setLoading(true);
+        setError(null);
+        try {
+            const list = await NBIAPI.listClaudeMCPServers();
+            setServers(list);
+        }
+        catch (e) {
+            setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        refresh();
+    }, []);
+    const handleRemove = async (srv) => {
+        var _a;
+        const ok = await showDialog({
+            title: 'Remove MCP server?',
+            body: `"${srv.name}" will be removed from Claude's ${srv.scope}-scope config.`,
+            buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Remove' })]
+        });
+        if (!ok.button.accept) {
+            return;
+        }
+        setPendingRemoval(srv);
+        try {
+            await NBIAPI.removeClaudeMCPServer(srv.name, srv.scope);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to remove: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        }
+        finally {
+            setPendingRemoval(null);
+        }
+    };
+    const handleToggleDisabled = async (srv) => {
+        var _a;
+        setPendingToggle(srv);
+        try {
+            await NBIAPI.setClaudeMCPServerDisabled(srv.name, srv.scope, !srv.disabledForWorkspace);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to update workspace state: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        }
+        finally {
+            setPendingToggle(null);
+        }
+    };
+    const handleAddSubmit = async (input) => {
+        // Errors are rendered inside the dialog so they're not hidden behind the
+        // modal backdrop; rethrow so the dialog can keep itself open.
+        await NBIAPI.addClaudeMCPServer(input);
+        setAddOpen(false);
+        await refresh();
+    };
+    const grouped = {
+        user: [],
+        project: [],
+        local: []
+    };
+    for (const srv of servers) {
+        ((_a = grouped[srv.scope]) !== null && _a !== void 0 ? _a : grouped.user).push(srv);
+    }
+    return (React.createElement("div", { className: "config-dialog-body nbi-skills-panel" },
+        React.createElement("div", { className: "nbi-skills-header" },
+            React.createElement("div", { className: "nbi-skills-title" }, "Claude MCP"),
+            React.createElement("div", { className: "nbi-skills-header-actions" },
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: refresh, disabled: loading, title: "Re-read Claude's MCP config from disk" },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, loading ? 'Refreshing…' : 'Refresh')),
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => setAddOpen(true) },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Add server")))),
+        React.createElement("div", { className: "nbi-info-banner", role: "note" },
+            "These are Claude Code's own MCP servers (read from",
+            ' ',
+            React.createElement("code", null, "~/.claude.json"),
+            ", project ",
+            React.createElement("code", null, ".mcp.json"),
+            ", and the per-user-per-project block). Independent of the NBI MCP Servers tab."),
+        error && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, error)),
+        SCOPES.map(scope => (React.createElement(ClaudeMCPScopeSection, { key: scope, scope: scope, servers: grouped[scope], loading: loading, pendingRemoval: pendingRemoval, pendingToggle: pendingToggle, onRemove: handleRemove, onToggleDisabled: handleToggleDisabled }))),
+        addOpen && (React.createElement(ClaudeMCPAddDialog, { onCancel: () => setAddOpen(false), onSubmit: handleAddSubmit }))));
+}
+function ClaudeMCPScopeSection(props) {
+    return (React.createElement("div", { className: "nbi-skills-section" },
+        React.createElement("div", { className: "nbi-skills-section-caption", title: SCOPE_HINT[props.scope] }, props.scope.toUpperCase()),
+        props.servers.length === 0 ? (React.createElement("div", { className: "nbi-skills-empty" }, props.loading ? 'Loading…' : 'No servers in this scope.')) : (props.servers.map(srv => {
+            var _a, _b, _c, _d;
+            return (React.createElement(ClaudeMCPRow, { key: `${srv.scope}-${srv.name}`, srv: srv, removing: ((_a = props.pendingRemoval) === null || _a === void 0 ? void 0 : _a.name) === srv.name &&
+                    ((_b = props.pendingRemoval) === null || _b === void 0 ? void 0 : _b.scope) === srv.scope, toggling: ((_c = props.pendingToggle) === null || _c === void 0 ? void 0 : _c.name) === srv.name &&
+                    ((_d = props.pendingToggle) === null || _d === void 0 ? void 0 : _d.scope) === srv.scope, onRemove: () => props.onRemove(srv), onToggleDisabled: () => props.onToggleDisabled(srv) }));
+        }))));
+}
+function ClaudeMCPRow(props) {
+    const { srv } = props;
+    const summary = srv.transport === 'stdio'
+        ? [srv.command, ...srv.args].filter(Boolean).join(' ')
+        : srv.url;
+    const disabled = srv.disabledForWorkspace;
+    const toggleLabel = disabled
+        ? props.toggling
+            ? 'Enabling…'
+            : 'Enable for workspace'
+        : props.toggling
+            ? 'Disabling…'
+            : 'Disable for workspace';
+    const toggleTitle = disabled
+        ? 'Re-enable this server for the current Jupyter workspace'
+        : 'Hide this server from Claude in the current Jupyter workspace (other workspaces unaffected)';
+    return (React.createElement("div", { className: `nbi-skill-row${disabled ? ' nbi-skill-row-disabled' : ''}` },
+        React.createElement("div", { className: "nbi-skill-row-main" },
+            React.createElement("div", { className: "nbi-skill-row-name" },
+                srv.name,
+                disabled && (React.createElement("span", { className: "nbi-skill-row-badge" }, "Disabled for workspace"))),
+            React.createElement("div", { className: "nbi-skill-row-description" },
+                React.createElement("code", null, srv.transport),
+                summary && React.createElement("span", null,
+                    ": ",
+                    summary))),
+        React.createElement("div", { className: "nbi-skill-row-actions", onClick: e => e.stopPropagation() },
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onToggleDisabled, disabled: props.toggling, title: toggleTitle },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, toggleLabel)),
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onRemove, disabled: props.removing },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, props.removing ? 'Removing…' : 'Remove')))));
+}
+const JSON_PLACEHOLDER = `"server-key": {
+  "command": "uvx",
+  "args": ["server-package@latest"]
+}`;
+const FORM_TAB_ID = 'nbi-mcp-add-tab-form';
+const JSON_TAB_ID = 'nbi-mcp-add-tab-json';
+const FORM_PANEL_ID = 'nbi-mcp-add-panel-form';
+const JSON_PANEL_ID = 'nbi-mcp-add-panel-json';
+function ClaudeMCPAddDialog(props) {
+    const [scope, setScope] = useState('user');
+    const [mode, setMode] = useState('form');
+    const [transport, setTransport] = useState('stdio');
+    const [name, setName] = useState('');
+    const [commandOrUrl, setCommandOrUrl] = useState('');
+    const [argsText, setArgsText] = useState('');
+    const [envText, setEnvText] = useState('');
+    const [headersText, setHeadersText] = useState('');
+    const [jsonText, setJsonText] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    const nameInputRef = useRef(null);
+    const jsonInputRef = useRef(null);
+    const formTabRef = useRef(null);
+    const jsonTabRef = useRef(null);
+    // Skip the first effect run so we don't steal focus from the Scope select
+    // when the dialog mounts; only re-focus when the user actively switches.
+    const hasMountedRef = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        if (mode === 'json') {
+            (_a = jsonInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = nameInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [mode]);
+    const canSubmit = mode === 'json'
+        ? jsonText.trim().length > 0 && !submitting
+        : name.trim() && commandOrUrl.trim() && !submitting;
+    const handleSubmit = async () => {
+        var _a;
+        if (!canSubmit) {
+            return;
+        }
+        setSubmitError(null);
+        setSubmitting(true);
+        try {
+            let input;
+            if (mode === 'json') {
+                const { name: parsedName, config } = parseMcpJsonEntry(jsonText);
+                input = configToInput(parsedName, config, scope);
+            }
+            else {
+                const argsList = argsText
+                    .split('\n')
+                    .map(line => line.trim())
+                    .filter(Boolean);
+                input = {
+                    name: name.trim(),
+                    scope,
+                    transport,
+                    commandOrUrl: commandOrUrl.trim(),
+                    args: transport === 'stdio' ? argsList : undefined,
+                    env: transport === 'stdio' ? parseKVLines(envText, '=') : undefined,
+                    headers: transport === 'stdio' ? undefined : parseKVLines(headersText, ':')
+                };
+            }
+            await props.onSubmit(input);
+        }
+        catch (e) {
+            setSubmitError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const onTabsKeyDown = (event) => {
+        var _a;
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+            return;
+        }
+        event.preventDefault();
+        const next = mode === 'form' ? 'json' : 'form';
+        setMode(next);
+        (_a = (next === 'form' ? formTabRef : jsonTabRef).current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (React.createElement(FormDialog, { title: "Add MCP server", submitLabel: "Add", submitInProgressLabel: "Adding\u2026", canSubmit: Boolean(canSubmit), submitting: submitting, error: submitError, onCancel: props.onCancel, onSubmit: handleSubmit },
+        React.createElement("div", { className: "nbi-form-field" },
+            React.createElement("label", { htmlFor: "nbi-mcp-add-scope" }, "Scope"),
+            React.createElement("select", { id: "nbi-mcp-add-scope", value: scope, onChange: e => setScope(e.target.value) }, SCOPES.map(s => (React.createElement("option", { key: s, value: s },
+                s,
+                " \u2014 ",
+                SCOPE_HINT[s]))))),
+        React.createElement("div", { className: "nbi-form-field" },
+            React.createElement("label", { id: "nbi-mcp-add-input-mode-label" }, "Input mode"),
+            React.createElement("div", { className: "nbi-segmented-control", role: "tablist", "aria-labelledby": "nbi-mcp-add-input-mode-label", onKeyDown: onTabsKeyDown },
+                React.createElement("button", { type: "button", role: "tab", id: FORM_TAB_ID, ref: formTabRef, "aria-selected": mode === 'form', "aria-controls": FORM_PANEL_ID, tabIndex: mode === 'form' ? 0 : -1, className: `nbi-segmented-control-option${mode === 'form' ? ' is-active' : ''}`, onClick: () => setMode('form') }, "Form"),
+                React.createElement("button", { type: "button", role: "tab", id: JSON_TAB_ID, ref: jsonTabRef, "aria-selected": mode === 'json', "aria-controls": JSON_PANEL_ID, tabIndex: mode === 'json' ? 0 : -1, className: `nbi-segmented-control-option${mode === 'json' ? ' is-active' : ''}`, onClick: () => setMode('json') }, "JSON"))),
+        mode === 'json' ? (React.createElement("div", { className: "nbi-form-field", role: "tabpanel", id: JSON_PANEL_ID, "aria-labelledby": JSON_TAB_ID },
+            React.createElement("label", { htmlFor: "nbi-mcp-add-json" }, "JSON"),
+            React.createElement("textarea", { id: "nbi-mcp-add-json", ref: jsonInputRef, rows: 10, value: jsonText, onChange: e => setJsonText(e.target.value), placeholder: JSON_PLACEHOLDER, spellCheck: false, autoFocus: true }))) : (React.createElement("div", { role: "tabpanel", id: FORM_PANEL_ID, "aria-labelledby": FORM_TAB_ID, className: "nbi-mcp-add-form-panel" },
+            React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", { htmlFor: "nbi-mcp-add-name" }, "Name"),
+                React.createElement("input", { id: "nbi-mcp-add-name", ref: nameInputRef, type: "text", value: name, onChange: e => setName(e.target.value), placeholder: "my-server", autoFocus: true })),
+            React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", { htmlFor: "nbi-mcp-add-transport" }, "Transport"),
+                React.createElement("select", { id: "nbi-mcp-add-transport", value: transport, onChange: e => setTransport(e.target.value) }, TRANSPORTS.map(t => (React.createElement("option", { key: t, value: t }, t))))),
+            React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", { htmlFor: "nbi-mcp-add-command-or-url" }, transport === 'stdio' ? 'Command' : 'URL'),
+                React.createElement("input", { id: "nbi-mcp-add-command-or-url", type: "text", value: commandOrUrl, onChange: e => setCommandOrUrl(e.target.value), placeholder: transport === 'stdio' ? 'npx' : 'https://example.com/mcp' })),
+            transport === 'stdio' && (React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", { htmlFor: "nbi-mcp-add-args" }, "Args (one per line)"),
+                React.createElement("textarea", { id: "nbi-mcp-add-args", rows: 3, value: argsText, onChange: e => setArgsText(e.target.value), placeholder: '-y\n@scope/package@latest' }))),
+            transport === 'stdio' && (React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", { htmlFor: "nbi-mcp-add-env" }, "Environment (KEY=value, one per line)"),
+                React.createElement("textarea", { id: "nbi-mcp-add-env", rows: 3, value: envText, onChange: e => setEnvText(e.target.value), placeholder: "API_KEY=\u2026" }))),
+            transport !== 'stdio' && (React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", { htmlFor: "nbi-mcp-add-headers" }, "Headers (Name: value, one per line)"),
+                React.createElement("textarea", { id: "nbi-mcp-add-headers", rows: 3, value: headersText, onChange: e => setHeadersText(e.target.value), placeholder: "Authorization: Bearer \u2026" })))))));
+}

package/lib/components/claude-mcp-paste.d.ts

@@ -0,0 +1,7 @@
+import { ClaudeMCPScope, IClaudeMCPAddInput } from '../api';
+export declare function parseMcpJsonEntry(raw: string): {
+    name: string;
+    config: Record<string, any>;
+};
+export declare function configToInput(name: string, config: Record<string, any>, scope: ClaudeMCPScope): IClaudeMCPAddInput;
+export declare function parseKVLines(text: string, separator: string): Record<string, string>;

package/lib/components/claude-mcp-paste.js

@@ -0,0 +1,104 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+const VALID_TRANSPORTS = [
+    'stdio',
+    'sse',
+    'http'
+];
+// Accept any of these paste shapes:
+//   "server-key": { ... }                          (bare key + object)
+//   { "server-key": { ... } }                      (wrapped, one entry)
+//   { "mcpServers": { "server-key": { ... } } }    (full mcp.json)
+export function parseMcpJsonEntry(raw) {
+    const trimmed = raw.trim().replace(/^,|,$/g, '');
+    if (!trimmed) {
+        throw new Error('JSON is empty.');
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(trimmed);
+    }
+    catch (_a) {
+        try {
+            parsed = JSON.parse(`{${trimmed}}`);
+        }
+        catch (e) {
+            throw new Error(`Invalid JSON: ${e.message}`);
+        }
+    }
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        throw new Error('JSON must describe a server entry.');
+    }
+    if (parsed.mcpServers && typeof parsed.mcpServers === 'object') {
+        parsed = parsed.mcpServers;
+    }
+    const keys = Object.keys(parsed);
+    if (keys.length === 0) {
+        throw new Error('Expected at least one server entry.');
+    }
+    if (keys.length > 1) {
+        throw new Error('Multiple servers found; paste one entry at a time.');
+    }
+    const name = keys[0];
+    const config = parsed[name];
+    if (!config || typeof config !== 'object' || Array.isArray(config)) {
+        throw new Error(`Server "${name}" config must be an object.`);
+    }
+    return { name, config };
+}
+export function configToInput(name, config, scope) {
+    const url = typeof config.url === 'string' ? config.url.trim() : '';
+    const command = typeof config.command === 'string' ? config.command.trim() : '';
+    if (!url && !command) {
+        throw new Error('Server config must include "command" or "url".');
+    }
+    const explicitTransport = typeof config.transport === 'string' &&
+        VALID_TRANSPORTS.includes(config.transport)
+        ? config.transport
+        : null;
+    // If the user pasted an explicit `transport`, it must match the shape of
+    // the rest of the config: `stdio` requires `command`, `sse`/`http` require
+    // `url`. A mismatch is more likely a typo than intent, and silently
+    // downgrading to whatever shape we see is the footgun reviewers flagged.
+    if (explicitTransport === 'stdio' && !command) {
+        throw new Error('transport: "stdio" requires a "command" field.');
+    }
+    if ((explicitTransport === 'http' || explicitTransport === 'sse') && !url) {
+        throw new Error(`transport: "${explicitTransport}" requires a "url" field.`);
+    }
+    const transport = explicitTransport !== null && explicitTransport !== void 0 ? explicitTransport : (url ? 'http' : 'stdio');
+    const commandOrUrl = transport === 'stdio' ? command : url;
+    return {
+        name,
+        scope,
+        transport,
+        commandOrUrl,
+        args: transport === 'stdio' && Array.isArray(config.args)
+            ? config.args.map(String)
+            : undefined,
+        env: transport === 'stdio' ? toStringRecord(config.env) : undefined,
+        headers: transport !== 'stdio' ? toStringRecord(config.headers) : undefined
+    };
+}
+export function parseKVLines(text, separator) {
+    const out = {};
+    for (const line of text.split('\n')) {
+        const trimmed = line.trim();
+        if (!trimmed) {
+            continue;
+        }
+        const idx = trimmed.indexOf(separator);
+        if (idx > 0) {
+            out[trimmed.slice(0, idx).trim()] = trimmed.slice(idx + 1).trim();
+        }
+    }
+    return out;
+}
+function toStringRecord(obj) {
+    const out = {};
+    if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+        for (const [k, v] of Object.entries(obj)) {
+            out[String(k)] = String(v);
+        }
+    }
+    return out;
+}

package/lib/components/claude-session-picker.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IClaudeSessionInfo, IClaudeSessionList } from '../api';
+export interface IClaudeSessionPickerProps {
+    onResume: (session: IClaudeSessionInfo) => void;
+    onClose: () => void;
+    fetchSessions?: () => Promise<IClaudeSessionList>;
+}
+export declare function ClaudeSessionPicker(props: IClaudeSessionPickerProps): JSX.Element;