@notebook-intelligence/notebook-intelligence 3.0.0 → 4.0.0

package/src/components/settings-panel.tsx

@@ -6,10 +6,11 @@ import { VscWarning } from 'react-icons/vsc';
 import * as path from 'path';
 
 import copySvgstr from '../../style/icons/copy.svg';
-import { NBIAPI } from '../api';
+import { ClaudeModelType, ClaudeToolType, NBIAPI } from '../api';
 import { CheckBoxItem } from './checkbox';
 import { PillItem } from './pill';
 import { mcpServerSettingsToEnabledState } from './mcp-util';
+import claudeSvg from '../../style/claude.svg';
 
 const OPENAI_COMPATIBLE_CHAT_MODEL_ID = 'openai-compatible-chat-model';
 const LITELLM_COMPATIBLE_CHAT_MODEL_ID = 'litellm-compatible-chat-model';
@@ -69,6 +70,11 @@ function SettingsPanelComponent(props: any) {
             onEditMCPConfigClicked={props.onEditMCPConfigClicked}
           />
         )}
+        {activeTab === 'claude' && (
+          <SettingsPanelComponentClaude
+            onEditMCPConfigClicked={props.onEditMCPConfigClicked}
+          />
+        )}
       </div>
     </div>
   );
@@ -88,6 +94,19 @@ function SettingsPanelTabsComponent(props: any) {
       >
         General
       </div>
+      <div
+        className={`nbi-settings-panel-tab ${activeTab === 'claude' ? 'active' : ''}`}
+        onClick={() => {
+          setActiveTab('claude');
+          props.onTabSelected('claude');
+        }}
+      >
+        <span
+          className="claude-icon"
+          dangerouslySetInnerHTML={{ __html: claudeSvg }}
+        ></span>
+        Claude
+      </div>
       <div
         className={`nbi-settings-panel-tab ${activeTab === 'mcp-servers' ? 'active' : ''}`}
         onClick={() => {
@@ -796,3 +815,304 @@ function SettingsPanelComponentMCPServers(props: any) {
     </div>
   );
 }
+
+function SettingsPanelComponentClaude(props: any) {
+  const nbiConfig = NBIAPI.config;
+  const claudeSettingsRef = useRef<any>(nbiConfig.claudeSettings);
+  const [_renderCount, setRenderCount] = useState(1);
+  const [claudeEnabled, setClaudeEnabled] = useState(
+    nbiConfig.isInClaudeCodeMode
+  );
+  const [chatModel, setChatModel] = useState(
+    nbiConfig.claudeSettings.chat_model ?? ClaudeModelType.Default
+  );
+  const [inlineCompletionModel, setInlineCompletionModel] = useState(
+    nbiConfig.claudeSettings.inline_completion_model ?? ClaudeModelType.Default
+  );
+  const [apiKey, setApiKey] = useState(nbiConfig.claudeSettings.api_key ?? '');
+  const [baseUrl, setBaseUrl] = useState(
+    nbiConfig.claudeSettings.base_url ?? ''
+  );
+  const [settingSources, setSettingSources] = useState(
+    nbiConfig.claudeSettings.setting_sources ?? []
+  );
+  const [tools, setTools] = useState(
+    nbiConfig.claudeSettings.tools ?? [
+      ClaudeToolType.ClaudeCodeTools,
+      ClaudeToolType.JupyterUITools
+    ]
+  );
+
+  useEffect(() => {
+    NBIAPI.configChanged.connect(() => {
+      claudeSettingsRef.current = nbiConfig.claudeSettings;
+      setRenderCount(renderCount => renderCount + 1);
+    });
+  }, []);
+
+  const syncSettingsToServerState = () => {
+    NBIAPI.setConfig({
+      claude_settings: {
+        enabled: claudeEnabled,
+        chat_model: chatModel,
+        inline_completion_model: inlineCompletionModel,
+        api_key: apiKey,
+        base_url: baseUrl,
+        setting_sources: settingSources,
+        tools: tools
+      }
+    });
+  };
+
+  useEffect(() => {
+    syncSettingsToServerState();
+  }, [
+    claudeEnabled,
+    chatModel,
+    inlineCompletionModel,
+    apiKey,
+    baseUrl,
+    settingSources,
+    tools
+  ]);
+
+  return (
+    <div className="config-dialog">
+      <div className="config-dialog-body">
+        <div className="model-config-section">
+          <div className="model-config-section-header">Enable Claude mode</div>
+          <div className="model-config-section-body">
+            <div className="model-config-section-row">
+              <span>
+                This requires a{' '}
+                <a href="https://claude.ai" target="_blank">
+                  Claude
+                </a>{' '}
+                account and{' '}
+                <a href="https://code.claude.com/" target="_blank">
+                  Claude Code
+                </a>{' '}
+                installed in your system.
+              </span>
+            </div>
+            <div className="model-config-section-row">
+              <div className="model-config-section-column">
+                <div>
+                  <CheckBoxItem
+                    header={true}
+                    label="Enable Claude mode"
+                    checked={claudeEnabled}
+                    onClick={() => {
+                      setClaudeEnabled(!claudeEnabled);
+                    }}
+                  ></CheckBoxItem>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="model-config-section">
+          <div className="model-config-section-header">Models</div>
+          <div className="model-config-section-body">
+            <div className="model-config-section-row">
+              <div className="model-config-section-column">
+                <div>Chat model</div>
+                <div>
+                  <select
+                    className="jp-mod-styled"
+                    onChange={event => setChatModel(event.target.value)}
+                  >
+                    <option
+                      value={ClaudeModelType.Default}
+                      selected={chatModel === ClaudeModelType.Default}
+                    >
+                      Default (recommended)
+                    </option>
+                    <option
+                      value={ClaudeModelType.ClaudeOpus45}
+                      selected={chatModel === ClaudeModelType.ClaudeOpus45}
+                    >
+                      Claude Opus 4.5
+                    </option>
+                    <option
+                      value={ClaudeModelType.ClaudeHaiku45}
+                      selected={chatModel === ClaudeModelType.ClaudeHaiku45}
+                    >
+                      Claude Haiku 4.5
+                    </option>
+                  </select>
+                </div>
+              </div>
+              <div className="model-config-section-column">
+                <div>Auto-complete model</div>
+                <div>
+                  <select
+                    className="jp-mod-styled"
+                    onChange={event =>
+                      setInlineCompletionModel(event.target.value)
+                    }
+                  >
+                    <option
+                      value={ClaudeModelType.Default}
+                      selected={
+                        inlineCompletionModel === ClaudeModelType.Default
+                      }
+                    >
+                      Default (recommended)
+                    </option>
+                    <option
+                      value={ClaudeModelType.ClaudeOpus45}
+                      selected={
+                        inlineCompletionModel === ClaudeModelType.ClaudeOpus45
+                      }
+                    >
+                      Claude Opus 4.5
+                    </option>
+                    <option
+                      value={ClaudeModelType.ClaudeHaiku45}
+                      selected={
+                        inlineCompletionModel === ClaudeModelType.ClaudeHaiku45
+                      }
+                    >
+                      Claude Haiku 4.5
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="model-config-section">
+          <div className="model-config-section-header">
+            Chat Agent setting sources
+          </div>
+          <div className="model-config-section-body">
+            <div className="model-config-section-row">
+              <div className="model-config-section-column">
+                <div>
+                  <CheckBoxItem
+                    header={true}
+                    label="User"
+                    checked={settingSources.includes('user')}
+                    onClick={() => {
+                      setSettingSources(
+                        settingSources.includes('user')
+                          ? settingSources.filter(
+                              (source: string) => source !== 'user'
+                            )
+                          : [...settingSources, 'user']
+                      );
+                    }}
+                  ></CheckBoxItem>
+                </div>
+              </div>
+              <div className="model-config-section-column">
+                <div>
+                  <CheckBoxItem
+                    header={true}
+                    label="Project (Jupyter root directory)"
+                    checked={settingSources.includes('project')}
+                    onClick={() => {
+                      setSettingSources(
+                        settingSources.includes('project')
+                          ? settingSources.filter(
+                              (source: string) => source !== 'project'
+                            )
+                          : [...settingSources, 'project']
+                      );
+                    }}
+                  ></CheckBoxItem>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="model-config-section">
+          <div className="model-config-section-header">Chat Agent tools</div>
+          <div className="model-config-section-body">
+            <div className="model-config-section-row">
+              <div className="model-config-section-column">
+                <div>
+                  <CheckBoxItem
+                    header={true}
+                    label="Claude Code tools"
+                    checked={tools.includes(ClaudeToolType.ClaudeCodeTools)}
+                    disabled={true}
+                    onClick={() => {
+                      setTools(
+                        tools.includes(ClaudeToolType.ClaudeCodeTools)
+                          ? tools.filter(
+                              (tool: string) =>
+                                tool !== ClaudeToolType.ClaudeCodeTools
+                            )
+                          : [...tools, ClaudeToolType.ClaudeCodeTools]
+                      );
+                    }}
+                  ></CheckBoxItem>
+                </div>
+              </div>
+              <div className="model-config-section-column">
+                <div>
+                  <CheckBoxItem
+                    header={true}
+                    label="Jupyter UI tools"
+                    checked={tools.includes(ClaudeToolType.JupyterUITools)}
+                    onClick={() => {
+                      setTools(
+                        tools.includes(ClaudeToolType.JupyterUITools)
+                          ? tools.filter(
+                              (tool: string) =>
+                                tool !== ClaudeToolType.JupyterUITools
+                            )
+                          : [...tools, ClaudeToolType.JupyterUITools]
+                      );
+                    }}
+                  ></CheckBoxItem>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="model-config-section">
+          <div className="model-config-section-header">Claude account</div>
+          <div className="model-config-section-body">
+            <div className="model-config-section-row">
+              <div className="model-config-section-column">
+                <div className="form-field-row">
+                  <div className="form-field-description">
+                    API Key (optional)
+                  </div>
+                  <input
+                    name="chat-model-id-input"
+                    placeholder="API Key"
+                    className="jp-mod-styled"
+                    spellCheck={false}
+                    value={apiKey}
+                    onChange={event => setApiKey(event.target.value)}
+                  />
+                </div>
+                <div className="form-field-row">
+                  <div className="form-field-description">
+                    Base URL (optional)
+                  </div>
+                  <input
+                    name="chat-model-id-input"
+                    placeholder="https://api.anthropic.com"
+                    className="jp-mod-styled"
+                    spellCheck={false}
+                    value={baseUrl}
+                    onChange={event => setBaseUrl(event.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -398,9 +398,10 @@ class NBIInlineCompletionProvider
 
     const nbiConfig = NBIAPI.config;
     const inlineCompletionsEnabled =
-      nbiConfig.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID
+      nbiConfig.isInClaudeCodeMode ||
+      (nbiConfig.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID
         ? NBIAPI.getLoginStatus() === GitHubCopilotLoginStatus.LoggedIn
-        : nbiConfig.inlineCompletionModel.provider !== 'none';
+        : nbiConfig.inlineCompletionModel.provider !== 'none');
 
     this._telemetryEmitter.emitTelemetryEvent({
       type: TelemetryEventType.InlineCompletionRequest,
@@ -1020,9 +1021,12 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
     };
 
     const isChatEnabled = (): boolean => {
-      return NBIAPI.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
-        ? !githubLoginRequired()
-        : NBIAPI.config.chatModel.provider !== 'none';
+      return (
+        NBIAPI.config.isInClaudeCodeMode ||
+        (NBIAPI.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
+          ? !githubLoginRequired()
+          : NBIAPI.config.chatModel.provider !== 'none')
+      );
     };
 
     const isActiveCellCodeCell = (): boolean => {
@@ -1876,12 +1880,17 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
           item: githubCopilotStatusBarItem,
           align: 'right',
           rank: 100,
-          isActive: () => NBIAPI.config.usingGitHubCopilotModel
+          isActive: () =>
+            !NBIAPI.config.isInClaudeCodeMode &&
+            NBIAPI.config.usingGitHubCopilotModel
         }
       );
 
       NBIAPI.configChanged.connect(() => {
-        if (NBIAPI.config.usingGitHubCopilotModel) {
+        if (
+          !NBIAPI.config.isInClaudeCodeMode &&
+          NBIAPI.config.usingGitHubCopilotModel
+        ) {
           githubCopilotStatusBarItem.show();
         } else {
           githubCopilotStatusBarItem.hide();

package/src/tokens.ts

@@ -33,7 +33,8 @@ export enum BackendMessageType {
   StreamEnd = 'stream-end',
   RunUICommand = 'run-ui-command',
   GitHubCopilotLoginStatusChange = 'github-copilot-login-status-change',
-  MCPServerStatusChange = 'mcp-server-status-change'
+  MCPServerStatusChange = 'mcp-server-status-change',
+  ClaudeCodeStatusChange = 'claude-code-status-change'
 }
 
 export enum ResponseStreamDataType {
@@ -45,7 +46,8 @@ export enum ResponseStreamDataType {
   Button = 'button',
   Anchor = 'anchor',
   Progress = 'progress',
-  Confirmation = 'confirmation'
+  Confirmation = 'confirmation',
+  AskUserQuestion = 'ask-user-question'
 }
 
 export enum ContextType {
@@ -108,6 +110,7 @@ export enum BuiltinToolsetType {
 }
 
 export const GITHUB_COPILOT_PROVIDER_ID = 'github-copilot';
+export const CLAUDE_CODE_CHAT_PARTICIPANT_ID = 'claude-code';
 
 export enum TelemetryEventType {
   InlineCompletionRequest = 'inline-completion-request',

package/style/base.css

@@ -485,6 +485,12 @@ pre:has(.code-block-header) {
   height: 12px;
 }
 
+.claude-icon svg {
+  width: 16px;
+  height: 16px;
+  color: #d97757;
+}
+
 .send-button {
   display: flex;
   align-items: center;
@@ -855,6 +861,8 @@ svg.access-token-warning {
 }
 
 .nbi-settings-panel-tab {
+  display: flex;
+  gap: 5px;
   cursor: pointer;
   padding: 10px;
   border-radius: 4px;
@@ -951,3 +959,67 @@ svg.access-token-warning {
   margin: 5px;
   font-style: italic;
 }
+
+.config-dialog-body a {
+  color: var(--jp-content-link-color);
+}
+
+.chat-mode-widgets-container .claude-icon svg {
+  margin-top: 4px;
+  width: 18px;
+  height: 18px;
+}
+
+.chat-confirmation-form.ask-user-question {
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-container {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-bottom: 1px solid var(--jp-border-color1);
+}
+
+.ask-user-question .ask-user-question-container:nth-last-child(-n + 2) {
+  border-bottom: none;
+}
+
+.ask-user-question-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.ask-user-question-question {
+  font-weight: bold;
+}
+
+.ask-user-question-header {
+  font-style: italic;
+}
+
+.ask-user-question-options {
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-option {
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-option-description {
+  padding-left: 5px;
+  color: var(--jp-ui-font-color2);
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ask-user-question-footer {
+  padding: 0 0 5px 10px;
+}

package/style/claude.svg

@@ -0,0 +1 @@
+<svg width="1200" height="1200" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"><g id="g314"><path id="path147" fill="currentColor" stroke="none" d="M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 L 233.879227 799.8927 Z"/></g></svg>