@plmbr/notebook-intelligence 5.0.0

package/src/components/claude-session-picker.tsx

@@ -0,0 +1,214 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React, {
+  KeyboardEvent,
+  MouseEvent,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { VscCheck, VscClose, VscCopy, VscHistory } from '../icons';
+
+import { IClaudeSessionInfo, IClaudeSessionList, NBIAPI } from '../api';
+import { buildResumeCommand, writeTextToClipboard } from '../utils';
+
+export interface IClaudeSessionPickerProps {
+  onResume: (session: IClaudeSessionInfo) => void;
+  onClose: () => void;
+  fetchSessions?: () => Promise<IClaudeSessionList>;
+}
+
+function formatTimestamp(epochSeconds: number): string {
+  if (!epochSeconds) {
+    return '';
+  }
+  const date = new Date(epochSeconds * 1000);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return date.toLocaleString();
+}
+
+const COPY_LABELS: Record<'copied' | 'failed' | 'idle', string> = {
+  idle: 'Copy resume command',
+  copied: 'Resume command copied',
+  failed: 'Failed to copy resume command'
+};
+
+export function ClaudeSessionPicker(
+  props: IClaudeSessionPickerProps
+): JSX.Element {
+  const [sessions, setSessions] = useState<IClaudeSessionInfo[]>([]);
+  const [currentCwd, setCurrentCwd] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [resuming, setResuming] = useState(false);
+  const [error, setError] = useState('');
+  const [copyFeedback, setCopyFeedback] = useState<{
+    sessionId: string;
+    status: 'copied' | 'failed';
+  } | null>(null);
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (copyTimerRef.current !== null) {
+        clearTimeout(copyTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const fetch =
+      props.fetchSessions ?? (() => NBIAPI.listClaudeSessions('cwd'));
+    fetch()
+      .then(result => {
+        if (cancelled) {
+          return;
+        }
+        setSessions(result.sessions);
+        setCurrentCwd(result.currentCwd);
+        setLoading(false);
+      })
+      .catch(reason => {
+        if (cancelled) {
+          return;
+        }
+        setError(String(reason?.message ?? reason ?? 'Unknown error'));
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleCopyResumeCommand = async (
+    event: MouseEvent<HTMLButtonElement>,
+    session: IClaudeSessionInfo
+  ) => {
+    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: IClaudeSessionInfo) => {
+    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((reason as Error)?.message ?? reason ?? 'Unknown error'));
+      setResuming(false);
+    }
+  };
+
+  return (
+    <div
+      className="workspace-file-popover claude-session-picker"
+      tabIndex={1}
+      autoFocus={true}
+      onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+          event.preventDefault();
+          props.onClose();
+        }
+      }}
+    >
+      <div className="mode-tools-popover-header">
+        <div className="mode-tools-popover-header-icon">
+          <VscHistory />
+        </div>
+        <div className="mode-tools-popover-title">Resume Claude session</div>
+        <div style={{ flexGrow: 1 }}></div>
+        <div
+          className="mode-tools-popover-button mode-tools-popover-close-button"
+          title="Close"
+          onClick={props.onClose}
+        >
+          <VscClose />
+        </div>
+      </div>
+      <div className="workspace-file-popover-body">
+        {error && (
+          <div className="workspace-file-popover-status error">{error}</div>
+        )}
+        {loading ? (
+          <div className="workspace-file-popover-status">
+            Loading sessions&#8230;
+          </div>
+        ) : sessions.length === 0 ? (
+          <div className="workspace-file-popover-status">
+            No previous Claude sessions found for this working directory.
+          </div>
+        ) : (
+          <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 ?? 'idle'];
+              return (
+                <li
+                  key={session.session_id}
+                  className={`claude-session-picker-item${resuming ? ' busy' : ''}`}
+                  onClick={() => handleResume(session)}
+                >
+                  {session.preview && (
+                    <div className="claude-session-picker-item-preview">
+                      {session.preview}
+                    </div>
+                  )}
+                  <div className="claude-session-picker-item-meta">
+                    <span>{formatTimestamp(session.modified_at)}</span>
+                    <span
+                      className="claude-session-picker-item-id"
+                      title={session.session_id}
+                    >
+                      {session.session_id.slice(0, 8)}
+                    </span>
+                    <button
+                      type="button"
+                      className={`claude-session-picker-item-copy${
+                        feedback ? ` ${feedback}` : ''
+                      }`}
+                      title={buttonLabel}
+                      aria-label={buttonLabel}
+                      onClick={event => handleCopyResumeCommand(event, session)}
+                    >
+                      {feedback === 'copied' ? <VscCheck /> : <VscCopy />}
+                    </button>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/form-dialog.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React, { 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 function FormDialog(props: {
+  title: string;
+  submitLabel: string;
+  submitInProgressLabel?: string;
+  canSubmit: boolean;
+  submitting: boolean;
+  error?: string | null;
+  onCancel: () => void;
+  onSubmit: () => void;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <div className="nbi-modal-backdrop" onClick={props.onCancel}>
+      <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}
+      >
+        <div className="nbi-modal-title">{props.title}</div>
+        <div className="nbi-modal-body">
+          {props.children}
+          {props.error && (
+            <div className="nbi-skills-error" role="alert">
+              {props.error}
+            </div>
+          )}
+        </div>
+        <div className="nbi-modal-actions">
+          <button
+            className="jp-Dialog-button jp-mod-reject jp-mod-styled"
+            onClick={props.onCancel}
+            disabled={props.submitting}
+          >
+            <div className="jp-Dialog-buttonLabel">Cancel</div>
+          </button>
+          <button
+            className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+            onClick={props.onSubmit}
+            disabled={!props.canSubmit}
+          >
+            <div className="jp-Dialog-buttonLabel">
+              {props.submitting
+                ? (props.submitInProgressLabel ?? `${props.submitLabel}…`)
+                : props.submitLabel}
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/launcher-picker.tsx

@@ -0,0 +1,237 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React, {
+  ChangeEvent,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { IClaudeSessionInfo, NBIAPI } from '../api';
+
+export interface ILauncherPickerProps {
+  onSessionSelected: (session: IClaudeSessionInfo) => void;
+}
+
+// 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: string | undefined | null): string {
+  if (!cwd) {
+    return '';
+  }
+  const trimmed = cwd.replace(/\/+$/, '');
+  const idx = trimmed.lastIndexOf('/');
+  return idx >= 0 ? trimmed.slice(idx + 1) : trimmed;
+}
+
+export function LauncherPicker({
+  onSessionSelected
+}: ILauncherPickerProps): JSX.Element {
+  const [sessions, setSessions] = useState<IClaudeSessionInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [filter, setFilter] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    NBIAPI.listClaudeSessions('all')
+      .then(result => {
+        setSessions(result.sessions);
+        setLoading(false);
+      })
+      .catch((reason: any) => {
+        setError(String(reason?.message ?? reason ?? 'Unknown error'));
+        setLoading(false);
+      });
+  }, []);
+
+  const needle = filter.toLowerCase();
+  const filtered = filter
+    ? sessions.filter(
+        s =>
+          s.preview?.toLowerCase().includes(needle) ||
+          s.cwd?.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] as
+      | HTMLElement
+      | undefined;
+    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: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Enter') {
+        return;
+      }
+      const node = containerRef.current;
+      if (!node || !node.contains(e.target as Node)) {
+        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: KeyboardEvent<HTMLDivElement>) => {
+    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 (
+      <div className="nbi-claude-code-picker-status">
+        Loading sessions&#8230;
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="nbi-claude-code-picker-status nbi-claude-code-picker-error">
+        {error}
+      </div>
+    );
+  }
+  const activeRowId =
+    highlightedIndex >= 0
+      ? `nbi-claude-session-row-${filtered[highlightedIndex].session_id}`
+      : undefined;
+  return (
+    <div
+      className="nbi-claude-code-picker-body"
+      ref={containerRef}
+      onKeyDown={handleKeyDown}
+    >
+      <input
+        className="nbi-claude-code-picker-search"
+        type="text"
+        placeholder="Filter sessions..."
+        value={filter}
+        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+          setFilter(e.target.value)
+        }
+        autoFocus
+        role="combobox"
+        aria-expanded={filtered.length > 0}
+        aria-controls="nbi-claude-session-listbox"
+        aria-activedescendant={activeRowId}
+      />
+      <div
+        className="nbi-claude-code-picker-list"
+        id="nbi-claude-session-listbox"
+        role="listbox"
+        ref={listRef}
+      >
+        {filtered.length === 0 ? (
+          <div className="nbi-claude-code-picker-empty">
+            {filter
+              ? 'No sessions match your filter.'
+              : 'No previous sessions found.'}
+          </div>
+        ) : (
+          filtered.map((session, index) => {
+            const isHighlighted = index === highlightedIndex;
+            return (
+              <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)}
+              >
+                <div className="nbi-claude-code-picker-session-top">
+                  <span className="nbi-claude-code-picker-session-id">
+                    {session.session_id.slice(0, 8)}
+                  </span>
+                  {/* Render the basename of the project as the inline
+                      label; keep the full path on hover via title so a
+                      user with several similarly-named projects can
+                      disambiguate without losing the path entirely.
+                      Screen readers don't expose `title` on <span>
+                      reliably, so duplicate the full path into
+                      aria-label whenever it differs from the visible
+                      basename. */}
+                  {(() => {
+                    const full = session.cwd ?? '';
+                    const label = projectLabel(full);
+                    const fullDiffersFromLabel = full && full !== label;
+                    return (
+                      <span
+                        className="nbi-claude-code-picker-session-project"
+                        title={full}
+                        aria-label={fullDiffersFromLabel ? full : undefined}
+                      >
+                        {label}
+                      </span>
+                    );
+                  })()}
+                </div>
+                {session.preview && (
+                  <div className="nbi-claude-code-picker-msg">
+                    {session.preview}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/mcp-util.ts

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

package/src/components/notebook-generation-popover.tsx

@@ -0,0 +1,127 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React, {
+  ChangeEvent,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { VscClose, VscSend, VscSparkle } from '../icons';
+
+import { CheckBoxItem } from './checkbox';
+
+export interface INotebookGenerationPopoverProps {
+  initialShowInChat?: boolean;
+  onSubmit: (prompt: string, showInChat: boolean) => void;
+  onClose: () => void;
+}
+
+export function NotebookGenerationPopover(
+  props: INotebookGenerationPopoverProps
+): JSX.Element {
+  const [prompt, setPrompt] = useState('');
+  const [showInChat, setShowInChat] = useState<boolean>(
+    props.initialShowInChat ?? true
+  );
+  const textareaRef = useRef<HTMLTextAreaElement>(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(() => {
+      textareaRef.current?.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: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      event.preventDefault();
+      props.onClose();
+      return;
+    }
+  };
+
+  const handleTextareaKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div
+      className="notebook-generation-popover"
+      tabIndex={-1}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="notebook-generation-popover-header">
+        <div className="notebook-generation-popover-header-icon">
+          <VscSparkle />
+        </div>
+        <div className="notebook-generation-popover-title">
+          Update active notebook
+        </div>
+        <div style={{ flexGrow: 1 }}></div>
+        <button
+          type="button"
+          className="notebook-generation-popover-close-button"
+          aria-label="Close notebook generation popover"
+          title="Close"
+          onClick={props.onClose}
+        >
+          <VscClose aria-hidden="true" />
+        </button>
+      </div>
+      <div className="notebook-generation-popover-body">
+        <textarea
+          ref={textareaRef}
+          className="notebook-generation-popover-input"
+          rows={4}
+          placeholder="Describe how to update the active notebook..."
+          value={prompt}
+          onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+            setPrompt(event.target.value)
+          }
+          onKeyDown={handleTextareaKeyDown}
+        />
+        <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)}
+        />
+        <div className="notebook-generation-popover-actions">
+          <button
+            type="button"
+            className="notebook-generation-popover-submit"
+            disabled={!canSubmit}
+            onClick={handleSubmit}
+            title="Generate (Enter)"
+          >
+            <VscSend />
+            <span>Generate</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}