@notebook-intelligence/notebook-intelligence 4.3.0 → 4.4.0

package/lib/api.d.ts

@@ -13,9 +13,12 @@ export interface IDeviceVerificationInfo {
 export declare enum ClaudeModelType {
     None = "none",
     Inherit = "inherit",
-    Default = "",
-    ClaudeOpus45 = "claude-opus-4-5",
-    ClaudeHaiku45 = "claude-haiku-4-5"
+    Default = ""
+}
+export interface IClaudeModelInfo {
+    id: string;
+    name: string;
+    context_window: number;
 }
 export declare enum ClaudeToolType {
     ClaudeCodeTools = "claude-code:built-in-tools",
@@ -39,6 +42,7 @@ export declare class NBIConfig {
     getMCPServerPrompt(serverId: string, promptName: string): any;
     get mcpServerSettings(): any;
     get claudeSettings(): any;
+    get claudeModels(): IClaudeModelInfo[];
     get isInClaudeCodeMode(): boolean;
     capabilities: any;
     chatParticipants: IChatParticipant[];
@@ -65,6 +69,7 @@ export declare class NBIAPI {
     static fetchCapabilities(): Promise<void>;
     static setConfig(config: any): Promise<void>;
     static updateOllamaModelList(): Promise<void>;
+    static updateClaudeModelList(): Promise<void>;
     static getMCPConfigFile(): Promise<any>;
     static setMCPConfigFile(config: any): Promise<any>;
     static chatRequest(messageId: string, chatId: string, prompt: string, language: string, currentDirectory: string, filename: string, additionalContext: IContextItem[], chatMode: string, toolSelections: IToolSelections, responseEmitter: IChatCompletionResponseEmitter): Promise<void>;

package/lib/api.js

@@ -18,8 +18,6 @@ export var ClaudeModelType;
     ClaudeModelType["None"] = "none";
     ClaudeModelType["Inherit"] = "inherit";
     ClaudeModelType["Default"] = "";
-    ClaudeModelType["ClaudeOpus45"] = "claude-opus-4-5";
-    ClaudeModelType["ClaudeHaiku45"] = "claude-haiku-4-5";
 })(ClaudeModelType || (ClaudeModelType = {}));
 export var ClaudeToolType;
 (function (ClaudeToolType) {
@@ -90,6 +88,10 @@ export class NBIConfig {
     get claudeSettings() {
         return this.capabilities.claude_settings;
     }
+    get claudeModels() {
+        var _b;
+        return (_b = this.capabilities.claude_models) !== null && _b !== void 0 ? _b : [];
+    }
     get isInClaudeCodeMode() {
         return this.claudeSettings.enabled === true;
     }
@@ -253,6 +255,22 @@ class NBIAPI {
             });
         });
     }
+    static async updateClaudeModelList() {
+        return new Promise((resolve, reject) => {
+            requestAPI('update-provider-models', {
+                method: 'POST',
+                body: JSON.stringify({ provider: 'claude' })
+            })
+                .then(async (data) => {
+                await NBIAPI.fetchCapabilities();
+                resolve();
+            })
+                .catch(reason => {
+                console.error(`Failed to update Claude model list.\n${reason}`);
+                reject(reason);
+            });
+        });
+    }
     static async getMCPConfigFile() {
         return new Promise((resolve, reject) => {
             requestAPI('mcp-config-file', { method: 'GET' })

package/lib/chat-sidebar.js

@@ -1338,7 +1338,7 @@ function SidebarComponent(props) {
                         msg.from === 'copilot' &&
                         copilotRequestInProgress }))),
                 React.createElement("div", { ref: messagesEndRef })))),
-        chatEnabled && (React.createElement("div", { className: `sidebar-user-input ${copilotRequestInProgress ? 'generating' : ''}` },
+        chatEnabled && (React.createElement("div", { id: "sidebar-user-input", className: `sidebar-user-input ${copilotRequestInProgress ? 'generating' : ''}` },
             React.createElement("textarea", { ref: promptInputRef, rows: 3, onChange: onPromptChange, onKeyDown: onPromptKeyDown, placeholder: "Ask Notebook Intelligence...", spellCheck: false, value: prompt }),
             (activeDocumentInfo === null || activeDocumentInfo === void 0 ? void 0 : activeDocumentInfo.filename) && (React.createElement("div", { className: "user-input-context-row" },
                 React.createElement("div", { className: `user-input-context user-input-context-active-file ${contextOn ? 'on' : 'off'}` },

package/lib/components/settings-panel.js

@@ -419,12 +419,27 @@ function SettingsPanelComponentClaude(props) {
         ClaudeToolType.JupyterUITools
     ]);
     const [continueConversation, setContinueConversation] = useState((_g = nbiConfig.claudeSettings.continue_conversation) !== null && _g !== void 0 ? _g : false);
+    const [claudeModels, setClaudeModels] = useState(nbiConfig.claudeModels);
+    const [loadingModels, setLoadingModels] = useState(false);
     useEffect(() => {
         NBIAPI.configChanged.connect(() => {
             claudeSettingsRef.current = nbiConfig.claudeSettings;
+            setClaudeModels(nbiConfig.claudeModels);
             setRenderCount(renderCount => renderCount + 1);
         });
     }, []);
+    const refreshClaudeModels = async () => {
+        setLoadingModels(true);
+        try {
+            await NBIAPI.updateClaudeModelList();
+            const models = nbiConfig.claudeModels;
+            console.log('claude_models after refresh:', models);
+            setClaudeModels(models);
+        }
+        finally {
+            setLoadingModels(false);
+        }
+    };
     const syncSettingsToServerState = () => {
         NBIAPI.setConfig({
             claude_settings: {
@@ -474,7 +489,11 @@ function SettingsPanelComponentClaude(props) {
                                         setClaudeEnabled(!claudeEnabled);
                                     } })))))),
             React.createElement("div", { className: "model-config-section" },
-                React.createElement("div", { className: "model-config-section-header" }, "Models"),
+                React.createElement("div", { className: "model-config-section-header", style: { display: 'flex' } },
+                    React.createElement("div", { style: { flexGrow: 1 } }, "Models"),
+                    React.createElement("div", null,
+                        React.createElement("button", { className: "jp-toast-button jp-mod-small jp-Button", onClick: refreshClaudeModels, disabled: loadingModels },
+                            React.createElement("div", { className: "jp-Dialog-buttonLabel" }, loadingModels ? 'Loading...' : 'Refresh')))),
                 React.createElement("div", { className: "model-config-section-body" },
                     React.createElement("div", { className: "model-config-section-row" },
                         React.createElement("div", { className: "model-config-section-column" },
@@ -482,8 +501,7 @@ function SettingsPanelComponentClaude(props) {
                             React.createElement("div", null,
                                 React.createElement("select", { className: "jp-mod-styled", onChange: event => setChatModel(event.target.value) },
                                     React.createElement("option", { value: ClaudeModelType.Default, selected: chatModel === ClaudeModelType.Default }, "Default (recommended)"),
-                                    React.createElement("option", { value: ClaudeModelType.ClaudeOpus45, selected: chatModel === ClaudeModelType.ClaudeOpus45 }, "Claude Opus 4.5"),
-                                    React.createElement("option", { value: ClaudeModelType.ClaudeHaiku45, selected: chatModel === ClaudeModelType.ClaudeHaiku45 }, "Claude Haiku 4.5")))),
+                                    claudeModels.map(model => (React.createElement("option", { key: model.id, value: model.id, selected: chatModel === model.id }, model.name)))))),
                         React.createElement("div", { className: "model-config-section-column" },
                             React.createElement("div", null, "Auto-complete model"),
                             React.createElement("div", null,
@@ -491,8 +509,7 @@ function SettingsPanelComponentClaude(props) {
                                     React.createElement("option", { value: ClaudeModelType.None, selected: inlineCompletionModel === ClaudeModelType.None }, "None"),
                                     React.createElement("option", { value: ClaudeModelType.Inherit, selected: inlineCompletionModel === ClaudeModelType.Inherit }, "Inherit from general settings"),
                                     React.createElement("option", { value: ClaudeModelType.Default, selected: inlineCompletionModel === ClaudeModelType.Default }, "Default (recommended)"),
-                                    React.createElement("option", { value: ClaudeModelType.ClaudeOpus45, selected: inlineCompletionModel === ClaudeModelType.ClaudeOpus45 }, "Claude Opus 4.5"),
-                                    React.createElement("option", { value: ClaudeModelType.ClaudeHaiku45, selected: inlineCompletionModel === ClaudeModelType.ClaudeHaiku45 }, "Claude Haiku 4.5"))))))),
+                                    claudeModels.map(model => (React.createElement("option", { key: model.id, value: model.id, selected: inlineCompletionModel === model.id }, model.name))))))))),
             React.createElement("div", { className: "model-config-section" },
                 React.createElement("div", { className: "model-config-section-header" }, "Chat Agent setting sources"),
                 React.createElement("div", { className: "model-config-section-body" },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@notebook-intelligence/notebook-intelligence",
-    "version": "4.3.0",
+    "version": "4.4.0",
     "description": "AI coding assistant for JupyterLab",
     "keywords": [
         "AI",

package/src/api.ts

@@ -32,9 +32,13 @@ export interface IDeviceVerificationInfo {
 export enum ClaudeModelType {
   None = 'none',
   Inherit = 'inherit',
-  Default = '',
-  ClaudeOpus45 = 'claude-opus-4-5',
-  ClaudeHaiku45 = 'claude-haiku-4-5'
+  Default = ''
+}
+
+export interface IClaudeModelInfo {
+  id: string;
+  name: string;
+  context_window: number;
 }
 
 export enum ClaudeToolType {
@@ -122,6 +126,10 @@ export class NBIConfig {
     return this.capabilities.claude_settings;
   }
 
+  get claudeModels(): IClaudeModelInfo[] {
+    return this.capabilities.claude_models ?? [];
+  }
+
   get isInClaudeCodeMode(): boolean {
     return this.claudeSettings.enabled === true;
   }
@@ -342,6 +350,23 @@ export class NBIAPI {
     });
   }
 
+  static async updateClaudeModelList(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      requestAPI<any>('update-provider-models', {
+        method: 'POST',
+        body: JSON.stringify({ provider: 'claude' })
+      })
+        .then(async data => {
+          await NBIAPI.fetchCapabilities();
+          resolve();
+        })
+        .catch(reason => {
+          console.error(`Failed to update Claude model list.\n${reason}`);
+          reject(reason);
+        });
+    });
+  }
+
   static async getMCPConfigFile(): Promise<any> {
     return new Promise<any>((resolve, reject) => {
       requestAPI<any>('mcp-config-file', { method: 'GET' })

package/src/chat-sidebar.tsx

@@ -2007,6 +2007,7 @@ function SidebarComponent(props: any) {
         ))}
       {chatEnabled && (
         <div
+          id="sidebar-user-input"
           className={`sidebar-user-input ${copilotRequestInProgress ? 'generating' : ''}`}
         >
           <textarea

package/src/components/settings-panel.tsx

@@ -7,7 +7,12 @@ import * as path from 'path';
 
 import copySvgstr from '../../style/icons/copy.svg';
 import claudeSvgStr from '../../style/icons/claude.svg';
-import { ClaudeModelType, ClaudeToolType, NBIAPI } from '../api';
+import {
+  ClaudeModelType,
+  ClaudeToolType,
+  IClaudeModelInfo,
+  NBIAPI
+} from '../api';
 import { CheckBoxItem } from './checkbox';
 import { PillItem } from './pill';
 import { mcpServerSettingsToEnabledState } from './mcp-util';
@@ -893,14 +898,31 @@ function SettingsPanelComponentClaude(props: any) {
   const [continueConversation, setContinueConversation] = useState(
     nbiConfig.claudeSettings.continue_conversation ?? false
   );
+  const [claudeModels, setClaudeModels] = useState<IClaudeModelInfo[]>(
+    nbiConfig.claudeModels
+  );
+  const [loadingModels, setLoadingModels] = useState(false);
 
   useEffect(() => {
     NBIAPI.configChanged.connect(() => {
       claudeSettingsRef.current = nbiConfig.claudeSettings;
+      setClaudeModels(nbiConfig.claudeModels);
       setRenderCount(renderCount => renderCount + 1);
     });
   }, []);
 
+  const refreshClaudeModels = async () => {
+    setLoadingModels(true);
+    try {
+      await NBIAPI.updateClaudeModelList();
+      const models = nbiConfig.claudeModels;
+      console.log('claude_models after refresh:', models);
+      setClaudeModels(models);
+    } finally {
+      setLoadingModels(false);
+    }
+  };
+
   const syncSettingsToServerState = () => {
     NBIAPI.setConfig({
       claude_settings: {
@@ -966,7 +988,23 @@ function SettingsPanelComponentClaude(props: any) {
         </div>
 
         <div className="model-config-section">
-          <div className="model-config-section-header">Models</div>
+          <div
+            className="model-config-section-header"
+            style={{ display: 'flex' }}
+          >
+            <div style={{ flexGrow: 1 }}>Models</div>
+            <div>
+              <button
+                className="jp-toast-button jp-mod-small jp-Button"
+                onClick={refreshClaudeModels}
+                disabled={loadingModels}
+              >
+                <div className="jp-Dialog-buttonLabel">
+                  {loadingModels ? 'Loading...' : 'Refresh'}
+                </div>
+              </button>
+            </div>
+          </div>
           <div className="model-config-section-body">
             <div className="model-config-section-row">
               <div className="model-config-section-column">
@@ -982,18 +1020,15 @@ function SettingsPanelComponentClaude(props: any) {
                     >
                       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>
+                    {claudeModels.map(model => (
+                      <option
+                        key={model.id}
+                        value={model.id}
+                        selected={chatModel === model.id}
+                      >
+                        {model.name}
+                      </option>
+                    ))}
                   </select>
                 </div>
               </div>
@@ -1028,22 +1063,15 @@ function SettingsPanelComponentClaude(props: any) {
                     >
                       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>
+                    {claudeModels.map(model => (
+                      <option
+                        key={model.id}
+                        value={model.id}
+                        selected={inlineCompletionModel === model.id}
+                      >
+                        {model.name}
+                      </option>
+                    ))}
                   </select>
                 </div>
               </div>

package/style/base.css

@@ -29,6 +29,12 @@
   padding: 5px;
 }
 
+#sidebar-user-input {
+  /* stylelint-disable */
+  anchor-name: --sidebaruserinput;
+  /* stylelint-enable */
+}
+
 .sidebar-user-input {
   height: auto;
   padding: 5px;
@@ -355,8 +361,11 @@ pre:has(.code-block-header) {
   border: 1px solid var(--jp-border-color1);
   flex-direction: column;
   position: absolute;
-  bottom: 80px;
-  left: 4px;
+  /* stylelint-disable */
+  position-anchor: --sidebaruserinput;
+  position-area: top;
+  /* stylelint-enable */
+  width: calc(100% - 16px);
   gap: 2px;
   /* stylelint-disable */
   max-height: min(calc(100% - 120px), 400px);