@plmbr/notebook-intelligence 5.0.0

package/lib/components/claude-session-picker.js

@@ -0,0 +1,127 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { VscCheck, VscClose, VscCopy, VscHistory } from '../icons';
+import { NBIAPI } from '../api';
+import { buildResumeCommand, writeTextToClipboard } from '../utils';
+function formatTimestamp(epochSeconds) {
+    if (!epochSeconds) {
+        return '';
+    }
+    const date = new Date(epochSeconds * 1000);
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+    return date.toLocaleString();
+}
+const COPY_LABELS = {
+    idle: 'Copy resume command',
+    copied: 'Resume command copied',
+    failed: 'Failed to copy resume command'
+};
+export function ClaudeSessionPicker(props) {
+    const [sessions, setSessions] = useState([]);
+    const [currentCwd, setCurrentCwd] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [resuming, setResuming] = useState(false);
+    const [error, setError] = useState('');
+    const [copyFeedback, setCopyFeedback] = useState(null);
+    const copyTimerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (copyTimerRef.current !== null) {
+                clearTimeout(copyTimerRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        var _a;
+        let cancelled = false;
+        const fetch = (_a = props.fetchSessions) !== null && _a !== void 0 ? _a : (() => NBIAPI.listClaudeSessions('cwd'));
+        fetch()
+            .then(result => {
+            if (cancelled) {
+                return;
+            }
+            setSessions(result.sessions);
+            setCurrentCwd(result.currentCwd);
+            setLoading(false);
+        })
+            .catch(reason => {
+            var _a, _b;
+            if (cancelled) {
+                return;
+            }
+            setError(String((_b = (_a = reason === null || reason === void 0 ? void 0 : reason.message) !== null && _a !== void 0 ? _a : reason) !== null && _b !== void 0 ? _b : 'Unknown error'));
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const handleCopyResumeCommand = async (event, session) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const ok = await writeTextToClipboard(buildResumeCommand(currentCwd, session.session_id));
+        setCopyFeedback({
+            sessionId: session.session_id,
+            status: ok ? 'copied' : 'failed'
+        });
+        if (copyTimerRef.current !== null) {
+            clearTimeout(copyTimerRef.current);
+        }
+        copyTimerRef.current = setTimeout(() => {
+            setCopyFeedback(null);
+            copyTimerRef.current = null;
+        }, 1500);
+    };
+    const handleResume = async (session) => {
+        var _a, _b;
+        if (resuming) {
+            return;
+        }
+        setResuming(true);
+        // When a custom fetchSessions is provided the caller owns the resume
+        // lifecycle (e.g. the launcher tile opens a terminal directly), so skip
+        // the NBI sidebar API call which requires Claude Code mode to be active.
+        if (props.fetchSessions) {
+            props.onResume(session);
+            return;
+        }
+        try {
+            await NBIAPI.resumeClaudeSession(session.session_id);
+            props.onResume(session);
+        }
+        catch (reason) {
+            setError(String((_b = (_a = reason === null || reason === void 0 ? void 0 : reason.message) !== null && _a !== void 0 ? _a : reason) !== null && _b !== void 0 ? _b : 'Unknown error'));
+            setResuming(false);
+        }
+    };
+    return (React.createElement("div", { className: "workspace-file-popover claude-session-picker", tabIndex: 1, autoFocus: true, onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                event.preventDefault();
+                props.onClose();
+            }
+        } },
+        React.createElement("div", { className: "mode-tools-popover-header" },
+            React.createElement("div", { className: "mode-tools-popover-header-icon" },
+                React.createElement(VscHistory, null)),
+            React.createElement("div", { className: "mode-tools-popover-title" }, "Resume Claude session"),
+            React.createElement("div", { style: { flexGrow: 1 } }),
+            React.createElement("div", { className: "mode-tools-popover-button mode-tools-popover-close-button", title: "Close", onClick: props.onClose },
+                React.createElement(VscClose, null))),
+        React.createElement("div", { className: "workspace-file-popover-body" },
+            error && (React.createElement("div", { className: "workspace-file-popover-status error" }, error)),
+            loading ? (React.createElement("div", { className: "workspace-file-popover-status" }, "Loading sessions\u2026")) : sessions.length === 0 ? (React.createElement("div", { className: "workspace-file-popover-status" }, "No previous Claude sessions found for this working directory.")) : (React.createElement("ul", { className: "claude-session-picker-list" }, sessions.map(session => {
+                const feedback = copyFeedback && copyFeedback.sessionId === session.session_id
+                    ? copyFeedback.status
+                    : null;
+                const buttonLabel = COPY_LABELS[feedback !== null && feedback !== void 0 ? feedback : 'idle'];
+                return (React.createElement("li", { key: session.session_id, className: `claude-session-picker-item${resuming ? ' busy' : ''}`, onClick: () => handleResume(session) },
+                    session.preview && (React.createElement("div", { className: "claude-session-picker-item-preview" }, session.preview)),
+                    React.createElement("div", { className: "claude-session-picker-item-meta" },
+                        React.createElement("span", null, formatTimestamp(session.modified_at)),
+                        React.createElement("span", { className: "claude-session-picker-item-id", title: session.session_id }, session.session_id.slice(0, 8)),
+                        React.createElement("button", { type: "button", className: `claude-session-picker-item-copy${feedback ? ` ${feedback}` : ''}`, title: buttonLabel, "aria-label": buttonLabel, onClick: event => handleCopyResumeCommand(event, session) }, feedback === 'copied' ? React.createElement(VscCheck, null) : React.createElement(VscCopy, null)))));
+            }))))));
+}

package/lib/components/form-dialog.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+/**
+ * Modal-form shell shared by the simple add/install dialogs across the
+ * Claude-MCP and Plugins panels. Owns:
+ *   * backdrop + card layout (cancel-on-backdrop-click)
+ *   * title / body / actions slots
+ *   * Escape-to-cancel keyboard handler
+ *   * inline error rendering when ``error`` is non-null
+ *   * primary button label transitions for the submitting state
+ *
+ * Multi-step flows (e.g. the GitHub-import preview-then-install dialog in
+ * ``skills-panel.tsx``) keep their own shell since fitting them here
+ * would bloat the abstraction.
+ */
+export declare function FormDialog(props: {
+    title: string;
+    submitLabel: string;
+    submitInProgressLabel?: string;
+    canSubmit: boolean;
+    submitting: boolean;
+    error?: string | null;
+    onCancel: () => void;
+    onSubmit: () => void;
+    children: ReactNode;
+}): JSX.Element;

package/lib/components/form-dialog.js

@@ -0,0 +1,35 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React from 'react';
+/**
+ * Modal-form shell shared by the simple add/install dialogs across the
+ * Claude-MCP and Plugins panels. Owns:
+ *   * backdrop + card layout (cancel-on-backdrop-click)
+ *   * title / body / actions slots
+ *   * Escape-to-cancel keyboard handler
+ *   * inline error rendering when ``error`` is non-null
+ *   * primary button label transitions for the submitting state
+ *
+ * Multi-step flows (e.g. the GitHub-import preview-then-install dialog in
+ * ``skills-panel.tsx``) keep their own shell since fitting them here
+ * would bloat the abstraction.
+ */
+export function FormDialog(props) {
+    var _a;
+    return (React.createElement("div", { className: "nbi-modal-backdrop", onClick: props.onCancel },
+        React.createElement("div", { className: "nbi-modal-card", role: "dialog", "aria-modal": "true", onClick: e => e.stopPropagation(), onKeyDown: e => {
+                if (e.key === 'Escape' && !props.submitting) {
+                    props.onCancel();
+                }
+            }, tabIndex: -1 },
+            React.createElement("div", { className: "nbi-modal-title" }, props.title),
+            React.createElement("div", { className: "nbi-modal-body" },
+                props.children,
+                props.error && (React.createElement("div", { className: "nbi-skills-error", role: "alert" }, props.error))),
+            React.createElement("div", { className: "nbi-modal-actions" },
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: props.onCancel, disabled: props.submitting },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Cancel")),
+                React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: props.onSubmit, disabled: !props.canSubmit },
+                    React.createElement("div", { className: "jp-Dialog-buttonLabel" }, props.submitting
+                        ? ((_a = props.submitInProgressLabel) !== null && _a !== void 0 ? _a : `${props.submitLabel}…`)
+                        : props.submitLabel))))));
+}

package/lib/components/launcher-picker.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IClaudeSessionInfo } from '../api';
+export interface ILauncherPickerProps {
+    onSessionSelected: (session: IClaudeSessionInfo) => void;
+}
+export declare function LauncherPicker({ onSessionSelected }: ILauncherPickerProps): JSX.Element;

package/lib/components/launcher-picker.js

@@ -0,0 +1,135 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { NBIAPI } from '../api';
+// Pick a short, glanceable label for a session's project. The basename
+// of the cwd is usually the project's actual name; the full path stays
+// available via the row's `title` attribute on hover.
+function projectLabel(cwd) {
+    if (!cwd) {
+        return '';
+    }
+    const trimmed = cwd.replace(/\/+$/, '');
+    const idx = trimmed.lastIndexOf('/');
+    return idx >= 0 ? trimmed.slice(idx + 1) : trimmed;
+}
+export function LauncherPicker({ onSessionSelected }) {
+    const [sessions, setSessions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [filter, setFilter] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const listRef = useRef(null);
+    useEffect(() => {
+        NBIAPI.listClaudeSessions('all')
+            .then(result => {
+            setSessions(result.sessions);
+            setLoading(false);
+        })
+            .catch((reason) => {
+            var _a, _b;
+            setError(String((_b = (_a = reason === null || reason === void 0 ? void 0 : reason.message) !== null && _a !== void 0 ? _a : reason) !== null && _b !== void 0 ? _b : 'Unknown error'));
+            setLoading(false);
+        });
+    }, []);
+    const needle = filter.toLowerCase();
+    const filtered = filter
+        ? sessions.filter(s => {
+            var _a, _b;
+            return ((_a = s.preview) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(needle)) ||
+                ((_b = s.cwd) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(needle));
+        })
+        : sessions;
+    // A held-over index against a refetched session set could silently
+    // point at a different session, so reset on any sessions change —
+    // not just length, which would miss equal-length-but-different sets.
+    useEffect(() => {
+        setHighlightedIndex(-1);
+    }, [filter, sessions]);
+    useEffect(() => {
+        if (highlightedIndex < 0 || !listRef.current) {
+            return;
+        }
+        const row = listRef.current.children[highlightedIndex];
+        row === null || row === void 0 ? void 0 : row.scrollIntoView({ block: 'nearest' });
+    }, [highlightedIndex]);
+    // Refs so the document-level keydown listener installed below can read
+    // the latest values without re-attaching on every render.
+    const filteredRef = useRef(filtered);
+    const highlightedIndexRef = useRef(highlightedIndex);
+    const onSessionSelectedRef = useRef(onSessionSelected);
+    filteredRef.current = filtered;
+    highlightedIndexRef.current = highlightedIndex;
+    onSessionSelectedRef.current = onSessionSelected;
+    // Lumino's Dialog catches Enter at capture phase on the dialog node and
+    // triggers its default OK button (the "New Session" button), so a React
+    // bubble-phase handler never sees Enter inside the picker. Attach a
+    // document-capture listener here so we beat the dialog and activate the
+    // highlighted row instead — falling through to the dialog's New Session
+    // path only when there's nothing selectable to land on.
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key !== 'Enter') {
+                return;
+            }
+            const node = containerRef.current;
+            if (!node || !node.contains(e.target)) {
+                return;
+            }
+            const list = filteredRef.current;
+            if (list.length === 0) {
+                return;
+            }
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            const idx = highlightedIndexRef.current;
+            onSessionSelectedRef.current(list[idx >= 0 ? idx : 0]);
+        };
+        document.addEventListener('keydown', handler, { capture: true });
+        return () => document.removeEventListener('keydown', handler, { capture: true });
+    }, []);
+    const handleKeyDown = (e) => {
+        if (filtered.length === 0) {
+            return;
+        }
+        // From "no row highlighted" (-1), ArrowDown jumps to the first row
+        // and ArrowUp jumps to the last — each direction lands at its
+        // nearest end so the user always reaches a valid row in one press.
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setHighlightedIndex(i => (i < 0 || i >= filtered.length - 1 ? 0 : i + 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setHighlightedIndex(i => (i <= 0 ? filtered.length - 1 : i - 1));
+        }
+    };
+    if (loading) {
+        return (React.createElement("div", { className: "nbi-claude-code-picker-status" }, "Loading sessions\u2026"));
+    }
+    if (error) {
+        return (React.createElement("div", { className: "nbi-claude-code-picker-status nbi-claude-code-picker-error" }, error));
+    }
+    const activeRowId = highlightedIndex >= 0
+        ? `nbi-claude-session-row-${filtered[highlightedIndex].session_id}`
+        : undefined;
+    return (React.createElement("div", { className: "nbi-claude-code-picker-body", ref: containerRef, onKeyDown: handleKeyDown },
+        React.createElement("input", { className: "nbi-claude-code-picker-search", type: "text", placeholder: "Filter sessions...", value: filter, onChange: (e) => setFilter(e.target.value), autoFocus: true, role: "combobox", "aria-expanded": filtered.length > 0, "aria-controls": "nbi-claude-session-listbox", "aria-activedescendant": activeRowId }),
+        React.createElement("div", { className: "nbi-claude-code-picker-list", id: "nbi-claude-session-listbox", role: "listbox", ref: listRef }, filtered.length === 0 ? (React.createElement("div", { className: "nbi-claude-code-picker-empty" }, filter
+            ? 'No sessions match your filter.'
+            : 'No previous sessions found.')) : (filtered.map((session, index) => {
+            const isHighlighted = index === highlightedIndex;
+            return (React.createElement("div", { key: session.session_id, id: `nbi-claude-session-row-${session.session_id}`, role: "option", className: 'nbi-claude-code-picker-session' +
+                    (isHighlighted ? ' highlighted' : ''), tabIndex: 0, "aria-selected": isHighlighted, onClick: () => onSessionSelected(session), onFocus: () => setHighlightedIndex(index) },
+                React.createElement("div", { className: "nbi-claude-code-picker-session-top" },
+                    React.createElement("span", { className: "nbi-claude-code-picker-session-id" }, session.session_id.slice(0, 8)),
+                    (() => {
+                        var _a;
+                        const full = (_a = session.cwd) !== null && _a !== void 0 ? _a : '';
+                        const label = projectLabel(full);
+                        const fullDiffersFromLabel = full && full !== label;
+                        return (React.createElement("span", { className: "nbi-claude-code-picker-session-project", title: full, "aria-label": fullDiffersFromLabel ? full : undefined }, label));
+                    })()),
+                session.preview && (React.createElement("div", { className: "nbi-claude-code-picker-msg" }, session.preview))));
+        })))));
+}

package/lib/components/mcp-util.d.ts

@@ -0,0 +1,2 @@
+export declare function mcpServerSettingsToEnabledState(mcpServers: any, mcpServerSettings: any): Map<string, Set<string>>;
+export declare function mcpServerSettingsToServerToolEnabledState(mcpServers: any, mcpServerSettings: any, serverId: string): Set<string>;

package/lib/components/mcp-util.js

@@ -0,0 +1,37 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+export function mcpServerSettingsToEnabledState(mcpServers, mcpServerSettings) {
+    const mcpServerEnabledState = new Map();
+    for (const server of mcpServers) {
+        const mcpServerToolEnabledState = mcpServerSettingsToServerToolEnabledState(mcpServers, mcpServerSettings, server.id);
+        if (mcpServerToolEnabledState) {
+            mcpServerEnabledState.set(server.id, mcpServerToolEnabledState);
+        }
+    }
+    return mcpServerEnabledState;
+}
+export function mcpServerSettingsToServerToolEnabledState(mcpServers, mcpServerSettings, serverId) {
+    var _a;
+    const server = mcpServers.find((server) => server.id === serverId);
+    let mcpServerToolEnabledState = null;
+    if (!server) {
+        return mcpServerToolEnabledState;
+    }
+    if (mcpServerSettings[server.id]) {
+        const serverSettings = mcpServerSettings[server.id];
+        if (!serverSettings.disabled) {
+            mcpServerToolEnabledState = new Set();
+            for (const tool of server.tools) {
+                if (!((_a = serverSettings.disabled_tools) === null || _a === void 0 ? void 0 : _a.includes(tool.name))) {
+                    mcpServerToolEnabledState.add(tool.name);
+                }
+            }
+        }
+    }
+    else {
+        mcpServerToolEnabledState = new Set();
+        for (const tool of server.tools) {
+            mcpServerToolEnabledState.add(tool.name);
+        }
+    }
+    return mcpServerToolEnabledState;
+}

package/lib/components/notebook-generation-popover.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface INotebookGenerationPopoverProps {
+    initialShowInChat?: boolean;
+    onSubmit: (prompt: string, showInChat: boolean) => void;
+    onClose: () => void;
+}
+export declare function NotebookGenerationPopover(props: INotebookGenerationPopoverProps): JSX.Element;

package/lib/components/notebook-generation-popover.js

@@ -0,0 +1,60 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useEffect, useRef, useState } from 'react';
+import { VscClose, VscSend, VscSparkle } from '../icons';
+import { CheckBoxItem } from './checkbox';
+export function NotebookGenerationPopover(props) {
+    var _a;
+    const [prompt, setPrompt] = useState('');
+    const [showInChat, setShowInChat] = useState((_a = props.initialShowInChat) !== null && _a !== void 0 ? _a : true);
+    const textareaRef = useRef(null);
+    useEffect(() => {
+        // Defer to the next frame so the focus call lands after Lumino's
+        // attach lifecycle and JupyterLab's focus tracker have settled —
+        // otherwise the active notebook can win the focus race and the
+        // textarea stays unfocused (issue #231).
+        const handle = window.requestAnimationFrame(() => {
+            var _a;
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+        return () => window.cancelAnimationFrame(handle);
+    }, []);
+    const trimmed = prompt.trim();
+    const canSubmit = trimmed.length > 0;
+    const handleSubmit = () => {
+        if (!canSubmit) {
+            return;
+        }
+        props.onSubmit(trimmed, showInChat);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            props.onClose();
+            return;
+        }
+    };
+    const handleTextareaKeyDown = (event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    };
+    return (React.createElement("div", { className: "notebook-generation-popover", tabIndex: -1, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: "notebook-generation-popover-header" },
+            React.createElement("div", { className: "notebook-generation-popover-header-icon" },
+                React.createElement(VscSparkle, null)),
+            React.createElement("div", { className: "notebook-generation-popover-title" }, "Update active notebook"),
+            React.createElement("div", { style: { flexGrow: 1 } }),
+            React.createElement("button", { type: "button", className: "notebook-generation-popover-close-button", "aria-label": "Close notebook generation popover", title: "Close", onClick: props.onClose },
+                React.createElement(VscClose, { "aria-hidden": "true" }))),
+        React.createElement("div", { className: "notebook-generation-popover-body" },
+            React.createElement("textarea", { ref: textareaRef, className: "notebook-generation-popover-input", rows: 4, placeholder: "Describe how to update the active notebook...", value: prompt, onChange: (event) => setPrompt(event.target.value), onKeyDown: handleTextareaKeyDown }),
+            React.createElement(CheckBoxItem, { checked: showInChat, label: "Show in chat", tooltip: 'When enabled, the prompt opens the Notebook Intelligence ' +
+                    'chat sidebar. Disable to keep the chat hidden and only ' +
+                    'show progress on the notebook toolbar.', onClick: () => setShowInChat(value => !value) }),
+            React.createElement("div", { className: "notebook-generation-popover-actions" },
+                React.createElement("button", { type: "button", className: "notebook-generation-popover-submit", disabled: !canSubmit, onClick: handleSubmit, title: "Generate (Enter)" },
+                    React.createElement(VscSend, null),
+                    React.createElement("span", null, "Generate"))))));
+}

package/lib/components/pill.d.ts

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

package/lib/components/pill.js

@@ -0,0 +1,5 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React from 'react';
+export function PillItem(props) {
+    return (React.createElement("div", { className: `pill-item ${props.checked ? 'checked' : ''}`, title: props.title, onClick: event => props.onClick(event) }, props.label));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function summarizePluginNames(names: readonly string[] | undefined, visible: number): string;
+export declare function SettingsPanelComponentPlugins(_props: any): JSX.Element;