@plmbr/notebook-intelligence 5.0.0

package/lib/components/plugins-panel.js

@@ -0,0 +1,466 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useState } from 'react';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { NBIAPI } from '../api';
+import { FormDialog } from './form-dialog';
+const SCOPES = ['user', 'project', 'local'];
+const SCOPE_HINT = {
+    user: 'available in all your projects',
+    project: 'shared via the project repo',
+    local: 'this project, this user only'
+};
+function marketplaceName(marketplace) {
+    var _a;
+    return String((_a = marketplace.name) !== null && _a !== void 0 ? _a : '').trim();
+}
+// Plugin-name list trimmed with ellipsis. Caller decides the visible cap;
+// the helper just stitches a comma-separated string and appends the
+// "+N more" tail when the cap is hit, so the row width stays bounded
+// even for marketplaces with hundreds of plugins.
+export function summarizePluginNames(names, visible) {
+    if (!names || names.length === 0) {
+        return '';
+    }
+    if (names.length <= visible) {
+        return names.join(', ');
+    }
+    const head = names.slice(0, visible).join(', ');
+    const remaining = names.length - visible;
+    return `${head}, +${remaining} more`;
+}
+function pluginName(plugin) {
+    var _a, _b;
+    return String((_b = (_a = plugin.name) !== null && _a !== void 0 ? _a : plugin.id) !== null && _b !== void 0 ? _b : '').trim();
+}
+function pluginEntryLabel(plugin) {
+    const name = pluginName(plugin);
+    const description = typeof plugin.description === 'string' ? plugin.description : '';
+    return description ? `${name} - ${description}` : name;
+}
+export function SettingsPanelComponentPlugins(_props) {
+    var _a, _b;
+    const [plugins, setPlugins] = useState([]);
+    const [marketplaces, setMarketplaces] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [installOpen, setInstallOpen] = useState(false);
+    const [marketplaceOpen, setMarketplaceOpen] = useState(false);
+    // Composite key (`scope:name`) so a user-scope plugin and a project-scope
+    // plugin sharing a name don't clobber each other's busy indicators.
+    const [busyPluginKey, setBusyPluginKey] = useState(null);
+    const [busyMarketplace, setBusyMarketplace] = useState(null);
+    const [allowGithubImport, setAllowGithubImport] = useState(NBIAPI.config.allowGithubPluginImport);
+    const refresh = async () => {
+        var _a;
+        setLoading(true);
+        setError(null);
+        try {
+            const [p, m] = await Promise.all([
+                NBIAPI.listPlugins(),
+                NBIAPI.listPluginMarketplaces()
+            ]);
+            setPlugins(p);
+            setMarketplaces(m);
+        }
+        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 handler = () => {
+            setAllowGithubImport(NBIAPI.config.allowGithubPluginImport);
+        };
+        NBIAPI.configChanged.connect(handler);
+        return () => {
+            NBIAPI.configChanged.disconnect(handler);
+        };
+    }, []);
+    const handleUninstall = async (p) => {
+        var _a, _b;
+        const name = pluginName(p);
+        const scope = (_a = p.scope) !== null && _a !== void 0 ? _a : 'user';
+        if (!name) {
+            return;
+        }
+        const ok = await showDialog({
+            title: 'Uninstall plugin?',
+            body: `"${name}" will be removed from Claude's ${scope}-scope config.`,
+            buttons: [
+                Dialog.cancelButton(),
+                Dialog.warnButton({ label: 'Uninstall' })
+            ]
+        });
+        if (!ok.button.accept) {
+            return;
+        }
+        const busyKey = `${scope}:${name}`;
+        setBusyPluginKey(busyKey);
+        try {
+            await NBIAPI.uninstallPlugin(name, scope);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to uninstall: ${(_b = e === null || e === void 0 ? void 0 : e.message) !== null && _b !== void 0 ? _b : e}`);
+        }
+        finally {
+            setBusyPluginKey(null);
+        }
+    };
+    const handleToggleEnabled = async (p) => {
+        var _a, _b;
+        const name = pluginName(p);
+        const scope = (_a = p.scope) !== null && _a !== void 0 ? _a : 'user';
+        if (!name) {
+            return;
+        }
+        const busyKey = `${scope}:${name}`;
+        setBusyPluginKey(busyKey);
+        try {
+            await NBIAPI.setPluginEnabled(name, scope, !p.enabled);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to update: ${(_b = e === null || e === void 0 ? void 0 : e.message) !== null && _b !== void 0 ? _b : e}`);
+        }
+        finally {
+            setBusyPluginKey(null);
+        }
+    };
+    const handleRemoveMarketplace = async (m) => {
+        var _a, _b;
+        const name = String((_a = m.name) !== null && _a !== void 0 ? _a : '');
+        if (!name) {
+            return;
+        }
+        const ok = await showDialog({
+            title: 'Remove marketplace?',
+            body: `"${name}" will be removed from Claude's plugin marketplaces.`,
+            buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Remove' })]
+        });
+        if (!ok.button.accept) {
+            return;
+        }
+        setBusyMarketplace(name);
+        try {
+            await NBIAPI.removePluginMarketplace(name);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to remove: ${(_b = e === null || e === void 0 ? void 0 : e.message) !== null && _b !== void 0 ? _b : e}`);
+        }
+        finally {
+            setBusyMarketplace(null);
+        }
+    };
+    const handleUpdateMarketplace = async (m) => {
+        var _a, _b;
+        const name = String((_a = m.name) !== null && _a !== void 0 ? _a : '');
+        if (!name) {
+            return;
+        }
+        setBusyMarketplace(name);
+        try {
+            await NBIAPI.updatePluginMarketplace(name);
+            await refresh();
+        }
+        catch (e) {
+            setError(`Failed to update marketplace: ${(_b = e === null || e === void 0 ? void 0 : e.message) !== null && _b !== void 0 ? _b : e}`);
+        }
+        finally {
+            setBusyMarketplace(null);
+        }
+    };
+    const grouped = {
+        user: [],
+        project: [],
+        local: []
+    };
+    for (const p of plugins) {
+        const scope = (_a = p.scope) !== null && _a !== void 0 ? _a : 'user';
+        ((_b = grouped[scope]) !== null && _b !== void 0 ? _b : grouped.user).push(p);
+    }
+    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" }, "Plugins"),
+            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 },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, loading ? 'Refreshing…' : 'Refresh')),
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => setMarketplaceOpen(true) },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Add marketplace")),
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => setInstallOpen(true) },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Install plugin")))),
+        React.createElement("div", { className: "nbi-info-banner", role: "note" }, "Add a marketplace to discover plugins, then install one to extend Claude Code with new commands, agents, and tool integrations."),
+        error && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, error)),
+        React.createElement("div", { className: "nbi-skills-section" },
+            React.createElement("div", { className: "nbi-skills-section-caption" }, "MARKETPLACES"),
+            marketplaces.length === 0 ? (React.createElement("div", { className: "nbi-skills-empty" }, loading
+                ? 'Loading…'
+                : 'No marketplaces configured. Add one to discover plugins.')) : (marketplaces.map((m, i) => {
+                var _a, _b, _c;
+                return (React.createElement(MarketplaceRow, { key: String((_b = (_a = m.name) !== null && _a !== void 0 ? _a : m.source) !== null && _b !== void 0 ? _b : i), info: m, busy: busyMarketplace === String((_c = m.name) !== null && _c !== void 0 ? _c : ''), onRemove: () => handleRemoveMarketplace(m), onUpdate: () => handleUpdateMarketplace(m) }));
+            }))),
+        SCOPES.map(scope => (React.createElement(PluginScopeSection, { key: scope, scope: scope, plugins: grouped[scope], loading: loading, busyPluginKey: busyPluginKey, onUninstall: handleUninstall, onToggle: handleToggleEnabled }))),
+        installOpen && (React.createElement(PluginInstallDialog, { marketplaces: marketplaces, onCancel: () => setInstallOpen(false), onSubmit: async ({ plugin, scope }) => {
+                await NBIAPI.installPlugin(plugin, scope);
+                setInstallOpen(false);
+                await refresh();
+            } })),
+        marketplaceOpen && (React.createElement(MarketplaceAddDialog, { allowGithubImport: allowGithubImport, onCancel: () => setMarketplaceOpen(false), onSubmit: async ({ source, scope }) => {
+                await NBIAPI.addPluginMarketplace(source, scope);
+                setMarketplaceOpen(false);
+                await refresh();
+            } }))));
+}
+function PluginScopeSection(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.plugins.length === 0 ? (React.createElement("div", { className: "nbi-skills-empty" }, props.loading ? 'Loading…' : 'No plugins in this scope.')) : (props.plugins.map(p => {
+            var _a;
+            const scope = (_a = p.scope) !== null && _a !== void 0 ? _a : props.scope;
+            const name = pluginName(p);
+            const rowKey = `${scope}:${name}`;
+            return (React.createElement(PluginRow, { key: rowKey, plugin: p, busy: props.busyPluginKey === rowKey, onUninstall: () => props.onUninstall(p), onToggle: () => props.onToggle(p) }));
+        }))));
+}
+function PluginRow(props) {
+    const { plugin } = props;
+    const description = [plugin.version, plugin.marketplace, plugin.description]
+        .filter(Boolean)
+        .map(String)
+        .join(' · ');
+    const enabled = plugin.enabled !== false;
+    return (React.createElement("div", { className: "nbi-skill-row" },
+        React.createElement("div", { className: "nbi-skill-row-main" },
+            React.createElement("div", { className: "nbi-skill-row-name" },
+                pluginName(plugin) || '(unnamed)',
+                !enabled && React.createElement("span", null, " \u2014 disabled")),
+            description && (React.createElement("div", { className: "nbi-skill-row-description" }, description))),
+        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.onToggle, disabled: props.busy },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, enabled ? 'Disable' : 'Enable')),
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onUninstall, disabled: props.busy },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, props.busy ? 'Working…' : 'Uninstall')))));
+}
+// Visible plugin-name cap on the marketplace row. Picked so a typical
+// marketplace (a handful of plugins) fits on one line, with longer lists
+// collapsing to "a, b, c, +N more" so the row width stays bounded.
+const MARKETPLACE_VISIBLE_PLUGINS = 5;
+function MarketplaceRow(props) {
+    var _a;
+    const { info } = props;
+    const description = typeof info.description === 'string' ? info.description.trim() : '';
+    const version = typeof info.version === 'string' ? info.version.trim() : '';
+    const pluginNames = Array.isArray(info.plugin_names)
+        ? info.plugin_names.filter((n) => typeof n === 'string')
+        : [];
+    const pluginCount = typeof info.plugin_count === 'number'
+        ? info.plugin_count
+        : pluginNames.length;
+    const pluginSummary = summarizePluginNames(pluginNames, MARKETPLACE_VISIBLE_PLUGINS);
+    // Pluralize for 0/1/N: "no plugins" reads better than "0 plugins" when
+    // the marketplace manifest has not yet been refreshed and we have no
+    // plugin entries.
+    const pluginCountLabel = pluginCount === 0
+        ? 'no plugins'
+        : pluginCount === 1
+            ? '1 plugin'
+            : `${pluginCount} plugins`;
+    // Only render the plugin summary line when the manifest read produced
+    // a count or name list. Without this guard, a marketplace that the
+    // user just added but whose manifest hasn't been cached yet would
+    // render "no plugins" and look broken; here it just renders no line
+    // at all until the next refresh picks up the manifest.
+    const hasPluginManifestData = Array.isArray(info.plugin_names) || typeof info.plugin_count === 'number';
+    return (React.createElement("div", { className: "nbi-skill-row" },
+        React.createElement("div", { className: "nbi-skill-row-main" },
+            React.createElement("div", { className: "nbi-skill-row-name" },
+                String((_a = info.name) !== null && _a !== void 0 ? _a : '(unnamed)'),
+                version && (React.createElement("span", { className: "nbi-skill-row-version" },
+                    " v",
+                    version))),
+            description && (React.createElement("div", { className: "nbi-skill-row-description" }, description)),
+            info.source && (React.createElement("div", { className: "nbi-skill-row-description" },
+                React.createElement("code", null, String(info.source)))),
+            hasPluginManifestData && (React.createElement("div", { className: "nbi-skill-row-description nbi-skill-row-plugins" },
+                pluginCountLabel,
+                pluginSummary && React.createElement("span", null, `: ${pluginSummary}`)))),
+        React.createElement("div", { className: "nbi-skill-row-actions", onClick: e => e.stopPropagation() },
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: props.onUpdate, disabled: props.busy, title: "Refresh this marketplace from its source" },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, props.busy ? 'Updating…' : 'Update')),
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onRemove, disabled: props.busy },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, props.busy ? 'Removing…' : 'Remove')))));
+}
+function PluginInstallDialog(props) {
+    var _a;
+    const marketplaceNames = props.marketplaces
+        .map(marketplaceName)
+        .filter(Boolean);
+    const marketplaceKey = marketplaceNames.join('\n');
+    const [installMode, setInstallMode] = useState(marketplaceNames.length > 0 ? 'marketplace' : 'manual');
+    const [marketplace, setMarketplace] = useState((_a = marketplaceNames[0]) !== null && _a !== void 0 ? _a : '');
+    const [marketplacePlugins, setMarketplacePlugins] = useState([]);
+    const [selectedPlugin, setSelectedPlugin] = useState('');
+    const [manualPlugin, setManualPlugin] = useState('');
+    const [scope, setScope] = useState('user');
+    const [loadingPlugins, setLoadingPlugins] = useState(false);
+    const [pluginListError, setPluginListError] = useState(null);
+    const [submitting, setSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    useEffect(() => {
+        var _a;
+        if (marketplace && marketplaceNames.includes(marketplace)) {
+            return;
+        }
+        setMarketplace((_a = marketplaceNames[0]) !== null && _a !== void 0 ? _a : '');
+    }, [marketplace, marketplaceKey]);
+    useEffect(() => {
+        let cancelled = false;
+        if (installMode !== 'marketplace') {
+            setLoadingPlugins(false);
+            setPluginListError(null);
+            return;
+        }
+        if (!marketplace) {
+            setMarketplacePlugins([]);
+            setSelectedPlugin('');
+            setPluginListError(null);
+            return;
+        }
+        setLoadingPlugins(true);
+        setPluginListError(null);
+        NBIAPI.listPluginMarketplacePlugins(marketplace)
+            .then(plugins => {
+            if (cancelled) {
+                return;
+            }
+            const namedPlugins = plugins.filter(plugin => pluginName(plugin));
+            setMarketplacePlugins(namedPlugins);
+            const firstPluginName = namedPlugins.length > 0 ? pluginName(namedPlugins[0]) : '';
+            setSelectedPlugin(current => namedPlugins.some(plugin => pluginName(plugin) === current)
+                ? current
+                : firstPluginName);
+        })
+            .catch((e) => {
+            var _a;
+            if (cancelled) {
+                return;
+            }
+            setMarketplacePlugins([]);
+            setSelectedPlugin('');
+            setPluginListError(`Failed to load plugins: ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e}`);
+        })
+            .finally(() => {
+            if (!cancelled) {
+                setLoadingPlugins(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [installMode, marketplace]);
+    const trimmedManualPlugin = manualPlugin.trim();
+    const canSubmit = !submitting &&
+        (installMode === 'manual'
+            ? Boolean(trimmedManualPlugin)
+            : Boolean(marketplace && selectedPlugin && !loadingPlugins));
+    const handleSubmit = async () => {
+        var _a;
+        if (!canSubmit) {
+            return;
+        }
+        setSubmitError(null);
+        setSubmitting(true);
+        try {
+            await props.onSubmit({
+                plugin: installMode === 'manual'
+                    ? trimmedManualPlugin
+                    : `${selectedPlugin}@${marketplace}`,
+                scope
+            });
+        }
+        catch (e) {
+            setSubmitError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (React.createElement(FormDialog, { title: "Install plugin", submitLabel: "Install", submitInProgressLabel: "Installing\u2026", canSubmit: Boolean(canSubmit), submitting: submitting, error: submitError, onCancel: props.onCancel, onSubmit: handleSubmit },
+        React.createElement("div", { className: "nbi-form-field" },
+            React.createElement("label", null, "Install from"),
+            React.createElement("select", { value: installMode, onChange: e => setInstallMode(e.target.value), disabled: submitting, autoFocus: true },
+                React.createElement("option", { value: "marketplace", disabled: marketplaceNames.length === 0 }, "Marketplace picker"),
+                React.createElement("option", { value: "manual" }, "Specify manually"))),
+        installMode === 'manual' ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", null, "Plugin"),
+                React.createElement("input", { type: "text", value: manualPlugin, onChange: e => setManualPlugin(e.target.value), placeholder: "plugin@marketplace", disabled: submitting })),
+            React.createElement("div", { className: "nbi-form-hint" }, "Enter a plugin name or the plugin@marketplace shorthand."))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", null, "Marketplace"),
+                React.createElement("select", { value: marketplace, onChange: e => setMarketplace(e.target.value), disabled: submitting }, marketplaceNames.map(name => (React.createElement("option", { key: name, value: name }, name))))),
+            React.createElement("div", { className: "nbi-form-field" },
+                React.createElement("label", null, "Plugin"),
+                React.createElement("select", { value: selectedPlugin, onChange: e => setSelectedPlugin(e.target.value), disabled: submitting || loadingPlugins || marketplacePlugins.length === 0 }, marketplacePlugins.map(plugin => {
+                    const name = pluginName(plugin);
+                    return (React.createElement("option", { key: name, value: name }, pluginEntryLabel(plugin)));
+                }))),
+            loadingPlugins && (React.createElement("div", { className: "nbi-form-hint" }, "Loading marketplace plugins...")),
+            !loadingPlugins &&
+                !pluginListError &&
+                marketplacePlugins.length === 0 && (React.createElement("div", { className: "nbi-form-hint" }, "No plugins were found in this marketplace.")),
+            pluginListError && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, pluginListError)))),
+        React.createElement("div", { className: "nbi-form-field" },
+            React.createElement("label", null, "Scope"),
+            React.createElement("select", { value: scope, onChange: e => setScope(e.target.value) }, SCOPES.map(s => (React.createElement("option", { key: s, value: s },
+                s,
+                " \u2014 ",
+                SCOPE_HINT[s])))))));
+}
+function MarketplaceAddDialog(props) {
+    const [source, setSource] = useState('');
+    const [scope, setScope] = useState('user');
+    const [submitting, setSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    const canSubmit = source.trim() && !submitting;
+    const handleSubmit = async () => {
+        var _a;
+        if (!canSubmit) {
+            return;
+        }
+        setSubmitError(null);
+        setSubmitting(true);
+        try {
+            await props.onSubmit({ source: source.trim(), scope });
+        }
+        catch (e) {
+            setSubmitError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (React.createElement(FormDialog, { title: "Add plugin marketplace", 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", null, "Source"),
+            React.createElement("input", { type: "text", value: source, onChange: e => setSource(e.target.value), placeholder: props.allowGithubImport
+                    ? 'owner/repo, https://github.com/owner/repo, or local path'
+                    : 'https://… or local path', autoFocus: true })),
+        props.allowGithubImport ? (React.createElement("div", { className: "nbi-form-hint" },
+            "Private GitHub sources work if ",
+            React.createElement("code", null, "GITHUB_TOKEN"),
+            " is set or",
+            ' ',
+            React.createElement("code", null, "gh auth login"),
+            " is configured on the Jupyter server.")) : (React.createElement("div", { className: "nbi-form-hint" }, "GitHub-sourced marketplaces are disabled by your administrator. Use a non-GitHub URL or a local filesystem path.")),
+        React.createElement("div", { className: "nbi-form-field" },
+            React.createElement("label", null, "Scope"),
+            React.createElement("select", { value: scope, onChange: e => setScope(e.target.value) }, SCOPES.map(s => (React.createElement("option", { key: s, value: s },
+                s,
+                " \u2014 ",
+                SCOPE_HINT[s])))))));
+}

package/lib/components/settings-panel.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ReactWidget } from '@jupyterlab/apputils';
+export declare class SettingsPanel extends ReactWidget {
+    constructor(options: {
+        onSave: () => void;
+        onEditMCPConfigClicked: () => void;
+    });
+    render(): JSX.Element;
+    private _onSave;
+    private _onEditMCPConfigClicked;
+}