mito-ai 0.1.57__py3-none-any.whl → 0.1.58__py3-none-any.whl

mito_ai-0.1.57.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.9d26322f3e78beb2b666.js → mito_ai-0.1.58.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.03302cc521d72eb56b00.js

@@ -7417,6 +7417,164 @@ const getAppNameFromNotebookID = (notebookID) => {
 };
 
 
+/***/ }),
+
+/***/ "./lib/Extensions/ChartWizard/AddFieldButton.js":
+/*!******************************************************!*\
+  !*** ./lib/Extensions/ChartWizard/AddFieldButton.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "webpack/sharing/consume/default/react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @jupyterlab/apputils */ "webpack/sharing/consume/default/@jupyterlab/apputils");
+/* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _utils_parser__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/parser */ "./lib/Extensions/ChartWizard/utils/parser.js");
+/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _utils_strings__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/strings */ "./lib/utils/strings.js");
+/* harmony import */ var _style_AddFieldButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../style/AddFieldButton.css */ "./style/AddFieldButton.css");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+
+
+
+/**
+ * Component that renders a button to add a new field to the chart configuration.
+ * When clicked, prompts the user for a description and uses LLM to add the field.
+ */
+const AddFieldButton = ({ code, onFieldAdded, clearPendingUpdate, onLoadingStateChange }) => {
+    /**
+     * Handles adding a new field to the chart configuration.
+     */
+    const handleAddField = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {
+        if (!code) {
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit('No source code available', 'error', {
+                autoClose: 3000
+            });
+            return;
+        }
+        // Create a component that manages its own input state
+        // Use a ref to store the value so we can access it after dialog closes
+        const inputValueRef = { current: '' };
+        const InputDialogBody = () => {
+            const [value, setValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
+            const textareaRef = react__WEBPACK_IMPORTED_MODULE_0___default().useRef(null);
+            (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+                // Focus the textarea when component mounts
+                // Use a small timeout to ensure the dialog is fully rendered and focusable
+                const timeoutId = setTimeout(() => {
+                    if (textareaRef.current) {
+                        textareaRef.current.focus();
+                        // Also select any existing text for better UX
+                        textareaRef.current.select();
+                    }
+                }, 100);
+                return () => clearTimeout(timeoutId);
+            }, []);
+            const handleChange = (e) => {
+                const newValue = e.target.value;
+                setValue(newValue);
+                inputValueRef.current = newValue;
+            };
+            return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null,
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Describe what field you would like to add to the chart configuration:"),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { ref: textareaRef, value: value, onChange: handleChange, placeholder: "e.g., font size for the title, background color, grid visibility...", className: "add-field-dialog-textarea" })));
+        };
+        // Show dialog to get user description
+        const result = await (0,_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.showDialog)({
+            title: 'Add New Field',
+            body: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(InputDialogBody, null),
+            buttons: [
+                _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Dialog.cancelButton({ label: 'Cancel' }),
+                _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Dialog.okButton({ label: 'Add Field' })
+            ],
+            defaultButton: 1
+        });
+        if (!result.button.accept) {
+            return;
+        }
+        // Get the input value from the ref
+        const description = inputValueRef.current.trim();
+        if (!description) {
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit('Please provide a description of the field you want to add', 'warning', {
+                autoClose: 3000
+            });
+            return;
+        }
+        // Log the field addition event with user input
+        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_3__.logEvent)('chart_wizard_add_chart_field', {
+            user_input: description
+        });
+        // Clear any pending debounced updates
+        clearPendingUpdate();
+        onLoadingStateChange(true);
+        try {
+            // Get existing variable names
+            const parsed = (0,_utils_parser__WEBPACK_IMPORTED_MODULE_4__.parseChartConfig)(code);
+            const existingVariables = parsed ? parsed.variables.map(v => v.name) : [];
+            const response = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_3__.addChartField)(code, description, existingVariables);
+            if (response.updated_code) {
+                // Check if the response contains a code block
+                // If no code block is found, the AI couldn't add the field
+                const hasCodeBlock = response.updated_code.includes(_utils_strings__WEBPACK_IMPORTED_MODULE_5__.PYTHON_CODE_BLOCK_START_WITH_NEW_LINE);
+                if (!hasCodeBlock) {
+                    // AI couldn't add the field and didn't return a code block
+                    console.log('AI response does not contain a code block - field addition was not possible.');
+                    _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit('Unable to add the requested field. Please try a different description or ensure your request is clear and applicable to chart configuration.', 'warning', {
+                        autoClose: 5000
+                    });
+                    return;
+                }
+                // Extract code from markdown code blocks if present
+                const extractedCode = (0,_utils_strings__WEBPACK_IMPORTED_MODULE_5__.removeMarkdownCodeFormatting)(response.updated_code);
+                // Validate that extracted code is not empty
+                if (!extractedCode || extractedCode.trim().length === 0) {
+                    console.error('Error: Extracted code is empty. Cannot update notebook cell.');
+                    _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit('Failed to add field: The updated code is empty. Please try again.', 'error', {
+                        autoClose: 5000
+                    });
+                    return;
+                }
+                // Notify parent component of the updated code
+                onFieldAdded(extractedCode);
+                _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit('Field added successfully!', 'success', {
+                    autoClose: 3000
+                });
+            }
+            else {
+                // Handle case where updated_code is missing, null, or empty
+                console.error('Error: No updated code returned from server.');
+                _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit('Failed to add field: The server did not return updated code. Please try again.', 'error', {
+                    autoClose: 5000
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error adding field:', error);
+            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit(`Failed to add field: ${errorMessage}. Please try again.`, 'error', {
+                autoClose: 5000
+            });
+        }
+        finally {
+            onLoadingStateChange(false);
+        }
+    }, [code, onFieldAdded, clearPendingUpdate, onLoadingStateChange]);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "add-field-container" },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "button-base button-purple add-field-button", onClick: handleAddField, type: "button" }, "+ Add New Field")));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AddFieldButton);
+
+
 /***/ }),
 
 /***/ "./lib/Extensions/ChartWizard/ChartWizardPlugin.js":
@@ -7449,6 +7607,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../components/TextAndIconButton */ "./lib/components/TextAndIconButton.js");
 /* harmony import */ var _icons_MagicWand__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../icons/MagicWand */ "./lib/icons/MagicWand.js");
 /* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _utils_notebook__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../utils/notebook */ "./lib/utils/notebook.js");
 /* harmony import */ var _style_ChartWizardPlugin_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../style/ChartWizardPlugin.css */ "./style/ChartWizardPlugin.css");
 /*
  * Copyright (c) Saga Inc.
@@ -7468,6 +7627,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 const ChartWizardButton = ({ onButtonClick }) => {
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_9__["default"], { icon: _icons_MagicWand__WEBPACK_IMPORTED_MODULE_10__["default"], text: "Chart Wizard", title: "Chart Wizard", onClick: onButtonClick, variant: 'purple', width: 'fit-contents', iconPosition: 'left' })));
@@ -7519,7 +7679,7 @@ const ChartWizardPlugin = {
         app.commands.addCommand(_commands__WEBPACK_IMPORTED_MODULE_12__.COMMAND_MITO_AI_OPEN_CHART_WIZARD, {
             label: 'Open Chart Wizard',
             execute: () => {
-                void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_13__.logEvent)('clicked_chart_wizard_button', { source: 'command_palette' });
+                void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_13__.logEvent)('chart_wizard_opened', { source: 'command_palette' });
                 openChartWizard();
             }
         });
@@ -7551,11 +7711,12 @@ const ChartWizardPlugin = {
  * A widget that extends the default ImageRenderer for matplotlib charts.
 */
 class AugmentedImageRenderer extends _lumino_widgets__WEBPACK_IMPORTED_MODULE_7__.Widget {
-    constructor(_app, originalRenderer, notebookTracker, openChartWizard) {
+    constructor(app, originalRenderer, notebookTracker, openChartWizard) {
         super();
         this.reactRoot = null;
         this.originalRenderer = originalRenderer;
         this.notebookTracker = notebookTracker;
+        this.app = app;
         this.openChartWizard = openChartWizard;
     }
     /**
@@ -7594,7 +7755,7 @@ class AugmentedImageRenderer extends _lumino_widgets__WEBPACK_IMPORTED_MODULE_7_
         Extracts chart data and source code, then opens the Chart Wizard panel.
     */
     handleButtonClick(_model) {
-        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_13__.logEvent)('clicked_chart_wizard_button', { source: 'chart_output_button' });
+        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_13__.logEvent)('chart_wizard_opened', { source: 'chart_output_button' });
         // Get the notebook panel
         const notebookPanel = this.notebookTracker.currentWidget;
         if (!notebookPanel) {
@@ -7620,8 +7781,20 @@ class AugmentedImageRenderer extends _lumino_widgets__WEBPACK_IMPORTED_MODULE_7_
         }
         const sourceCode = cellWidget.model.sharedModel.source;
         const cellId = cellWidget.model.id;
+        // Set the cell as active before collapsing and scrolling
+        (0,_utils_notebook__WEBPACK_IMPORTED_MODULE_14__.setActiveCellByIDInNotebookPanel)(notebookPanel, cellId);
+        // Collapse the code cell when opening the chart wizard
+        cellWidget.inputHidden = true;
+        // Scroll to the top of the cell
+        void notebookPanel.content.scrollToCell(cellWidget, 'start');
         // Open the Chart Wizard with the extracted data
-        this.openChartWizard({ sourceCode, cellId, notebookTracker: this.notebookTracker });
+        this.openChartWizard({
+            sourceCode,
+            cellId,
+            notebookTracker: this.notebookTracker,
+            notebookPanelId: notebookPanel.id,
+            app: this.app
+        });
     }
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChartWizardPlugin);
@@ -7643,18 +7816,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @jupyterlab/apputils */ "webpack/sharing/consume/default/@jupyterlab/apputils");
 /* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _utils_parser__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/parser */ "./lib/Extensions/ChartWizard/utils/parser.js");
-/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
-/* harmony import */ var _utils_strings__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/strings */ "./lib/utils/strings.js");
-/* harmony import */ var _components_LoadingDots__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../components/LoadingDots */ "./lib/components/LoadingDots.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/BooleanInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/TupleInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/NumberInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/utils.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/ColorInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/StringInputRow.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./hooks */ "./lib/Extensions/ChartWizard/hooks/useChartConfig.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hooks */ "./lib/Extensions/ChartWizard/hooks/useDebouncedNotebookUpdate.js");
+/* harmony import */ var _utils_parser__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/parser */ "./lib/Extensions/ChartWizard/utils/parser.js");
+/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _utils_strings__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/strings */ "./lib/utils/strings.js");
+/* harmony import */ var _components_LoadingDots__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../components/LoadingDots */ "./lib/components/LoadingDots.js");
+/* harmony import */ var _AddFieldButton__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./AddFieldButton */ "./lib/Extensions/ChartWizard/AddFieldButton.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/BooleanInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/TupleInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/NumberInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/utils.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/ColorInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/StringInputRow.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hooks */ "./lib/Extensions/ChartWizard/hooks/useChartConfig.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hooks */ "./lib/Extensions/ChartWizard/hooks/useDebouncedNotebookUpdate.js");
+/* harmony import */ var _utils_notebook__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/notebook */ "./lib/utils/notebook.js");
 /* harmony import */ var _style_ChartWizardWidget_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../style/ChartWizardWidget.css */ "./style/ChartWizardWidget.css");
 /*
  * Copyright (c) Saga Inc.
@@ -7669,6 +7844,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 /**
  * Formats a variable name into a human-readable label.
  * Converts snake_case to Title Case (e.g., "figure_size" -> "Figure Size").
@@ -7681,18 +7858,73 @@ const formatVariableLabel = (variableName) => {
 };
 const ChartWizardContent = ({ chartData }) => {
     const [isConverting, setIsConverting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    const [isAddingField, setIsAddingField] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     const [currentSourceCode, setCurrentSourceCode] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    const widgetRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+    const [overlayHeight, setOverlayHeight] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
+    const [isActiveCellMismatch, setIsActiveCellMismatch] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     // Reset currentSourceCode when switching to a different chart
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
         setCurrentSourceCode(null);
     }, [chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode]);
+    // Track active cell changes and compare with chart cell
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        if (!chartData) {
+            setIsActiveCellMismatch(false);
+            return;
+        }
+        const checkActiveCell = () => {
+            const activeCellId = (0,_utils_notebook__WEBPACK_IMPORTED_MODULE_3__.getActiveCellID)(chartData.notebookTracker);
+            const chartCellId = chartData.cellId;
+            // Show warning if active cell exists and doesn't match the chart cell
+            setIsActiveCellMismatch(activeCellId !== undefined && activeCellId !== chartCellId);
+        };
+        // Initial check
+        checkActiveCell();
+        // Listen to active cell changes
+        chartData.notebookTracker.activeCellChanged.connect(checkActiveCell);
+        return () => {
+            chartData.notebookTracker.activeCellChanged.disconnect(checkActiveCell);
+        };
+    }, [chartData]);
+    // Update overlay height to cover full scrollable content
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        if (!isAddingField) {
+            setOverlayHeight(0);
+            return;
+        }
+        const updateOverlayHeight = () => {
+            if (widgetRef.current) {
+                // Use scrollHeight to get the full scrollable content height
+                setOverlayHeight(widgetRef.current.scrollHeight);
+            }
+        };
+        // Initial update
+        updateOverlayHeight();
+        // Use ResizeObserver to watch for content size changes
+        let resizeObserver = null;
+        if (widgetRef.current && typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(() => {
+                updateOverlayHeight();
+            });
+            resizeObserver.observe(widgetRef.current);
+        }
+        // Fallback: Update on window resize
+        window.addEventListener('resize', updateOverlayHeight);
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            window.removeEventListener('resize', updateOverlayHeight);
+        };
+    }, [isAddingField]);
     // Use custom hook for chart config management
-    const { configVariables, setConfigVariables, hasConfig } = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useChartConfig)({
+    const { configVariables, setConfigVariables, hasConfig } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useChartConfig)({
         sourceCode: chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode,
         currentSourceCode,
     });
     // Use custom hook for debounced notebook updates
-    const { updateNotebookCell, scheduleUpdate, clearPendingUpdate } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useDebouncedNotebookUpdate)({
+    const { updateNotebookCell, scheduleUpdate, clearPendingUpdate } = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useDebouncedNotebookUpdate)({
         chartData,
         debounceDelay: 500,
     });
@@ -7707,7 +7939,7 @@ const ChartWizardContent = ({ chartData }) => {
         const updated = configVariables.map((v) => v.name === variableName ? { ...v, value: newValue } : v);
         setConfigVariables(updated);
         // Update the source code
-        const updatedCode = (0,_utils_parser__WEBPACK_IMPORTED_MODULE_5__.updateChartConfig)(codeToUse, updated);
+        const updatedCode = (0,_utils_parser__WEBPACK_IMPORTED_MODULE_6__.updateChartConfig)(codeToUse, updated);
         setCurrentSourceCode(updatedCode);
         // Schedule debounced notebook update
         scheduleUpdate(updatedCode);
@@ -7716,7 +7948,7 @@ const ChartWizardContent = ({ chartData }) => {
      * Handles chart conversion from matplotlib to Chart Wizard format.
      */
     const handleConvertChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {
-        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_6__.logEvent)('clicked_convert_chart_button');
+        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__.logEvent)('chart_wizard_convert_chart');
         if (!(chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode)) {
             console.error('No source code available');
             return;
@@ -7725,10 +7957,10 @@ const ChartWizardContent = ({ chartData }) => {
         clearPendingUpdate();
         setIsConverting(true);
         try {
-            const response = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_6__.convertChartCode)(chartData.sourceCode);
+            const response = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__.convertChartCode)(chartData.sourceCode);
             if (response.converted_code) {
                 // Extract code from markdown code blocks if present
-                const extractedCode = (0,_utils_strings__WEBPACK_IMPORTED_MODULE_7__.removeMarkdownCodeFormatting)(response.converted_code);
+                const extractedCode = (0,_utils_strings__WEBPACK_IMPORTED_MODULE_8__.removeMarkdownCodeFormatting)(response.converted_code);
                 // Validate that extracted code is not empty to prevent deleting user's code
                 if (!extractedCode || extractedCode.trim().length === 0) {
                     console.error('Error: Extracted code is empty. Cannot update notebook cell.');
@@ -7754,6 +7986,15 @@ const ChartWizardContent = ({ chartData }) => {
             setIsConverting(false);
         }
     }, [chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode, clearPendingUpdate, updateNotebookCell]);
+    /**
+     * Handles when a new field is added via the AddFieldButton component.
+     */
+    const handleFieldAdded = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((updatedCode) => {
+        // Update current source code so the useEffect will parse it
+        setCurrentSourceCode(updatedCode);
+        // Update the cell with the updated code
+        updateNotebookCell(updatedCode);
+    }, [updateNotebookCell]);
     /**
      * Renders the appropriate input field component based on variable type.
      */
@@ -7766,22 +8007,22 @@ const ChartWizardContent = ({ chartData }) => {
         };
         switch (variable.type) {
             case 'boolean':
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_8__.BooleanInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_9__.BooleanInputRow, { key: variable.name, ...commonProps });
             case 'tuple':
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_9__.TupleInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_10__.TupleInputRow, { key: variable.name, ...commonProps });
             case 'number':
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_10__.NumberInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_11__.NumberInputRow, { key: variable.name, ...commonProps });
             case 'string': {
                 // String input - check if it's a hex color
                 const stringValue = variable.value;
-                const isColor = (0,_inputs__WEBPACK_IMPORTED_MODULE_11__.isHexColor)(stringValue);
+                const isColor = (0,_inputs__WEBPACK_IMPORTED_MODULE_12__.isHexColor)(stringValue);
                 if (isColor) {
-                    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_12__.ColorInputRow, { key: variable.name, ...commonProps });
+                    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_13__.ColorInputRow, { key: variable.name, ...commonProps });
                 }
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_13__.StringInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_14__.StringInputRow, { key: variable.name, ...commonProps });
             }
             default:
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_13__.StringInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_14__.StringInputRow, { key: variable.name, ...commonProps });
         }
     }, [handleVariableChange]);
     // Memoize input fields to prevent unnecessary re-renders
@@ -7792,11 +8033,35 @@ const ChartWizardContent = ({ chartData }) => {
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", null, "Chart Wizard"),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Click the Chart Wizard button on a matplotlib chart to get started.")));
     }
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-widget" },
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-widget", ref: widgetRef, style: { position: 'relative' } },
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", null, "Chart Wizard"),
+        isActiveCellMismatch && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-warning" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-warning-content" }, "The active cell is no longer the chart cell. Changes may not be applied correctly."),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "chart-wizard-warning-button", onClick: () => {
+                    var _a;
+                    if (chartData) {
+                        // Find the notebook panel by ID
+                        const notebookPanel = chartData.notebookTracker.find(panel => panel.id === chartData.notebookPanelId);
+                        if (notebookPanel) {
+                            // Activate the notebook panel if it's not the current one
+                            if (((_a = chartData.notebookTracker.currentWidget) === null || _a === void 0 ? void 0 : _a.id) !== notebookPanel.id) {
+                                chartData.app.shell.activateById(notebookPanel.id);
+                                // Wait a bit for the notebook to activate before scrolling
+                                setTimeout(() => {
+                                    (0,_utils_notebook__WEBPACK_IMPORTED_MODULE_3__.scrollToCell)(notebookPanel, chartData.cellId, undefined, 'start');
+                                }, 100);
+                            }
+                            else {
+                                // Navigate to and scroll to the chart cell
+                                (0,_utils_notebook__WEBPACK_IMPORTED_MODULE_3__.scrollToCell)(notebookPanel, chartData.cellId, undefined, 'start');
+                            }
+                        }
+                    }
+                }, type: "button" }, "Go to Chart Cell"))),
         hasConfig ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-config-container" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "chart-wizard-config-description" }, "Edit values below to customize your chart. Changes will be reflected in the notebook."),
-            inputFields)) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-no-config" },
+            inputFields,
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AddFieldButton__WEBPACK_IMPORTED_MODULE_15__["default"], { code: currentSourceCode || (chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode) || null, onFieldAdded: handleFieldAdded, clearPendingUpdate: clearPendingUpdate, onLoadingStateChange: setIsAddingField }))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-no-config" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null,
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("strong", null, "This chart isn't ready for Chart Wizard yet."),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null),
@@ -7805,7 +8070,13 @@ const ChartWizardContent = ({ chartData }) => {
                 "Converting",
                 ' ',
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "chart-wizard-loading-dots" },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_14__["default"], null)))) : ('Convert'))))));
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_16__["default"], null)))) : ('Convert')))),
+        isAddingField && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-overlay", style: { height: overlayHeight > 0 ? `${overlayHeight}px` : '100%' } },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-overlay-text" },
+                "Adding new field",
+                ' ',
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "chart-wizard-loading-dots" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_16__["default"], null)))))));
 };
 class ChartWizardWidget extends _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ReactWidget {
     constructor() {
@@ -7910,14 +8181,14 @@ __webpack_require__.r(__webpack_exports__);
  */
 const useDebouncedNotebookUpdate = ({ chartData, debounceDelay = 500, }) => {
     const executeTimeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-    // Cleanup timeout on unmount
+    // Cleanup timeout on unmount or when chartData changes
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
         return () => {
             if (executeTimeoutRef.current) {
                 clearTimeout(executeTimeoutRef.current);
             }
         };
-    }, []);
+    }, [chartData]);
     const updateNotebookCell = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((updatedCode) => {
         var _a;
         if (!chartData)
@@ -12386,47 +12657,124 @@ const MODEL_MAPPINGS = [
         complexityHandling: 'High'
     }
 ];
-const ALL_MODEL_DISPLAY_NAMES = MODEL_MAPPINGS.map(mapping => mapping.displayName);
+// Removed ALL_MODEL_DISPLAY_NAMES - now using availableModels from backend
 // Maximum length for displayed model name before truncating
 const DEFAULT_MODEL = _utils_models__WEBPACK_IMPORTED_MODULE_3__.CLAUDE_HAIKU_DISPLAY_NAME;
 const ModelSelector = ({ onConfigChange }) => {
     const [selectedModel, setSelectedModel] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(DEFAULT_MODEL);
     const [isOpen, setIsOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     const [hoveredModel, setHoveredModel] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    const [availableModels, setAvailableModels] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
+    const [isLoadingModels, setIsLoadingModels] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(true);
     const dropdownRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-    // Load config from localStorage on component mount and notify parent
+    // Fetch available models from backend on mount
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-        var _a;
-        const storedConfig = localStorage.getItem('llmModelConfig');
-        let fullModelName;
-        let displayName;
-        if (storedConfig) {
+        const fetchModels = async () => {
+            var _a, _b;
             try {
-                const parsedConfig = JSON.parse(storedConfig);
-                fullModelName = parsedConfig.model;
-                displayName = (_a = MODEL_MAPPINGS.find(m => m.fullName === fullModelName)) === null || _a === void 0 ? void 0 : _a.displayName;
+                setIsLoadingModels(true);
+                const models = await (0,_utils_models__WEBPACK_IMPORTED_MODULE_3__.getAvailableModels)();
+                setAvailableModels(models);
+                // Load config from localStorage and validate against available models
+                const storedConfig = localStorage.getItem('llmModelConfig');
+                let fullModelName;
+                let displayName;
+                if (storedConfig) {
+                    try {
+                        const parsedConfig = JSON.parse(storedConfig);
+                        const storedModel = parsedConfig.model;
+                        if (storedModel && typeof storedModel === 'string') {
+                            fullModelName = storedModel;
+                            // Check if model is in available models list
+                            if (models.includes(fullModelName)) {
+                                // Check if it's a LiteLLM model (has provider prefix)
+                                if (fullModelName.includes('/')) {
+                                    // LiteLLM model - use model name directly as display name
+                                    displayName = fullModelName;
+                                }
+                                else {
+                                    // Standard model - find display name from MODEL_MAPPINGS
+                                    displayName = (_a = MODEL_MAPPINGS.find(m => m.fullName === fullModelName)) === null || _a === void 0 ? void 0 : _a.displayName;
+                                }
+                            }
+                        }
+                    }
+                    catch (e) {
+                        console.error('Failed to parse stored LLM config', e);
+                    }
+                }
+                // Fallback to default model or first available model if not found or invalid
+                if (!fullModelName || !displayName || (fullModelName && !models.includes(fullModelName))) {
+                    if (models.length > 0) {
+                        // First, try to use the default model if it's available
+                        const defaultMapping = MODEL_MAPPINGS.find(m => m.displayName === DEFAULT_MODEL);
+                        if (defaultMapping && models.includes(defaultMapping.fullName)) {
+                            fullModelName = defaultMapping.fullName;
+                            displayName = defaultMapping.displayName;
+                        }
+                        else {
+                            // Fallback to first available model
+                            const firstModel = models[0];
+                            fullModelName = firstModel;
+                            // Check if it's a LiteLLM model
+                            if (firstModel && firstModel.includes('/')) {
+                                displayName = firstModel;
+                            }
+                            else {
+                                displayName = ((_b = MODEL_MAPPINGS.find(m => m.fullName === firstModel)) === null || _b === void 0 ? void 0 : _b.displayName) || firstModel;
+                            }
+                        }
+                    }
+                    else {
+                        // Fallback to default if no models available
+                        const defaultMapping = MODEL_MAPPINGS.find(m => m.displayName === DEFAULT_MODEL) || MODEL_MAPPINGS[0];
+                        if (defaultMapping) {
+                            fullModelName = defaultMapping.fullName;
+                            displayName = defaultMapping.displayName;
+                        }
+                        else {
+                            // Ultimate fallback
+                            fullModelName = _utils_models__WEBPACK_IMPORTED_MODULE_3__.GPT_4_1_MODEL_NAME;
+                            displayName = _utils_models__WEBPACK_IMPORTED_MODULE_3__.GPT_4_1_DISPLAY_NAME;
+                        }
+                    }
+                }
+                if (displayName && fullModelName) {
+                    setSelectedModel(displayName);
+                    onConfigChange({ model: fullModelName });
+                }
             }
-            catch (e) {
-                console.error('Failed to parse stored LLM config', e);
+            catch (error) {
+                console.error('Failed to fetch available models:', error);
+                // Fallback to default models
+                const defaultMapping = MODEL_MAPPINGS.find(m => m.displayName === DEFAULT_MODEL) || MODEL_MAPPINGS[0];
+                setSelectedModel(defaultMapping.displayName);
+                onConfigChange({ model: defaultMapping.fullName });
             }
-        }
-        // Fallback to default if not found
-        let defaultMapping = MODEL_MAPPINGS.find(m => m.displayName === DEFAULT_MODEL);
-        if (!defaultMapping) {
-            defaultMapping = MODEL_MAPPINGS[0];
-        }
-        if (!fullModelName || !displayName) {
-            fullModelName = defaultMapping.fullName;
-            displayName = defaultMapping.displayName;
-        }
-        setSelectedModel(displayName);
-        onConfigChange({ model: fullModelName });
+            finally {
+                setIsLoadingModels(false);
+            }
+        };
+        void fetchModels();
     }, [onConfigChange]);
-    const handleModelChange = (displayName) => {
+    const handleModelChange = (modelName) => {
         var _a;
-        setSelectedModel(displayName);
+        if (!modelName) {
+            return;
+        }
+        setSelectedModel(modelName);
         setIsOpen(false);
-        const fullModelName = ((_a = MODEL_MAPPINGS.find(m => m.displayName === displayName)) === null || _a === void 0 ? void 0 : _a.fullName) || displayName;
+        // For LiteLLM models (with provider prefix), modelName is already the full model name
+        // For standard models, we need to find the full name from MODEL_MAPPINGS
+        let fullModelName;
+        if (modelName.includes('/')) {
+            // LiteLLM model - use model name directly
+            fullModelName = modelName;
+        }
+        else {
+            // Standard model - find full name from MODEL_MAPPINGS
+            fullModelName = ((_a = MODEL_MAPPINGS.find(m => m.displayName === modelName)) === null || _a === void 0 ? void 0 : _a.fullName) || modelName;
+        }
         const newConfig = {
             model: fullModelName
         };
@@ -12466,18 +12814,30 @@ const ModelSelector = ({ onConfigChange }) => {
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_NucleausIcon__WEBPACK_IMPORTED_MODULE_4__["default"], { height: 10, width: 10 })),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "model-name" }, selectedModel),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "dropdown-arrow" }, "\u25BC")),
-            isOpen && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `model-options dropup`, style: { minWidth: '150px' }, onMouseLeave: () => setHoveredModel(null) }, ALL_MODEL_DISPLAY_NAMES.map(model => {
-                const modelMapping = MODEL_MAPPINGS.find(m => m.displayName === model);
-                return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: model, className: `model-option ${model === selectedModel ? 'selected' : ''}`, onClick: (e) => {
+            isOpen && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: `model-options dropup`, style: { minWidth: '150px' }, onMouseLeave: () => setHoveredModel(null) }, isLoadingModels ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-option" }, "Loading models...")) : (availableModels.map(modelName => {
+                // Check if it's a LiteLLM model (has provider prefix)
+                const isLiteLLMModel = modelName.includes('/');
+                let displayName;
+                let modelMapping;
+                if (isLiteLLMModel) {
+                    // LiteLLM model - use model name directly as display name
+                    displayName = modelName;
+                }
+                else {
+                    // Standard model - find display name from MODEL_MAPPINGS
+                    modelMapping = MODEL_MAPPINGS.find(m => m.fullName === modelName);
+                    displayName = (modelMapping === null || modelMapping === void 0 ? void 0 : modelMapping.displayName) || modelName;
+                }
+                return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: modelName, className: `model-option ${displayName === selectedModel ? 'selected' : ''}`, onClick: (e) => {
                         e.stopPropagation();
-                        handleModelChange(model);
+                        handleModelChange(displayName);
                     }, onMouseEnter: () => setHoveredModel(modelMapping || null), "data-testid": "model-option" },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "model-option-name" }, model),
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "model-option-name" }, displayName),
                     (modelMapping === null || modelMapping === void 0 ? void 0 : modelMapping.type) === 'smart' && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "model-type-icon" },
                         react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_BrainIcon__WEBPACK_IMPORTED_MODULE_5__["default"], { height: 12, width: 12 }))),
                     (modelMapping === null || modelMapping === void 0 ? void 0 : modelMapping.type) === 'fast' && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "model-type-icon" },
                         react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_LightningIcon__WEBPACK_IMPORTED_MODULE_6__["default"], { height: 12, width: 12 })))));
-            })))),
+            }))))),
         isOpen && hoveredModel && react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-content" },
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-header" },
@@ -12499,7 +12859,14 @@ const ModelSelector = ({ onConfigChange }) => {
                             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "model-tooltip-metadata-value" }, hoveredModel.complexityHandling)))),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-section" },
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-section-label" }, "Good For:"),
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", { className: "model-tooltip-bullet-list" }, hoveredModel.goodFor.map((item, index) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", { key: index, className: "model-tooltip-bullet-item" }, item))))))), document.body)));
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", { className: "model-tooltip-bullet-list" }, hoveredModel.goodFor.map((item, index) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", { key: index, className: "model-tooltip-bullet-item" }, item))))))), document.body),
+        isOpen && !hoveredModel && selectedModel.includes('/') && react_dom__WEBPACK_IMPORTED_MODULE_1___default().createPortal(react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-content" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-header" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-title-row" },
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-title" }, selectedModel))),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-section" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "model-tooltip-section-label" }, "No additional information available")))), document.body)));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ModelSelector);
 
@@ -14370,6 +14737,7 @@ __webpack_require__.r(__webpack_exports__);
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   addChartField: () => (/* binding */ addChartField),
 /* harmony export */   convertChartCode: () => (/* binding */ convertChartCode),
 /* harmony export */   getChatHistoryThread: () => (/* binding */ getChatHistoryThread),
 /* harmony export */   getChatHistoryThreads: () => (/* binding */ getChatHistoryThreads),
@@ -14534,7 +14902,7 @@ CHART WIZARD ENDPOINTS
 
 ************************************/
 const convertChartCode = async (code) => {
-    const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)('chart-wizard', {
+    const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)('chart-wizard/convert', {
         method: 'POST',
         body: JSON.stringify({ code }),
     });
@@ -14543,6 +14911,20 @@ const convertChartCode = async (code) => {
     }
     return resp.data;
 };
+const addChartField = async (code, userDescription, existingVariables) => {
+    const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)('chart-wizard/add-field', {
+        method: 'POST',
+        body: JSON.stringify({
+            code,
+            user_description: userDescription,
+            existing_variables: existingVariables
+        }),
+    });
+    if (resp.error) {
+        throw new Error(resp.error.message);
+    }
+    return resp.data;
+};
 const getChatHistoryThreads = async () => {
     var _a;
     const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)('chat-history/threads');
@@ -16026,7 +16408,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   GPT_4_1_DISPLAY_NAME: () => (/* binding */ GPT_4_1_DISPLAY_NAME),
 /* harmony export */   GPT_4_1_MODEL_NAME: () => (/* binding */ GPT_4_1_MODEL_NAME),
 /* harmony export */   GPT_5_2_DISPLAY_NAME: () => (/* binding */ GPT_5_2_DISPLAY_NAME),
-/* harmony export */   GPT_5_2_MODEL_NAME: () => (/* binding */ GPT_5_2_MODEL_NAME)
+/* harmony export */   GPT_5_2_MODEL_NAME: () => (/* binding */ GPT_5_2_MODEL_NAME),
+/* harmony export */   getAvailableModels: () => (/* binding */ getAvailableModels)
 /* harmony export */ });
 /*
  * Copyright (c) Saga Inc.
@@ -16044,6 +16427,33 @@ const GEMINI_3_FLASH_DISPLAY_NAME = 'Gemini 3 Flash';
 const GEMINI_3_FLASH_MODEL_NAME = 'gemini-3-flash-preview';
 const GEMINI_3_PRO_DISPLAY_NAME = 'Gemini 3 Pro';
 const GEMINI_3_PRO_MODEL_NAME = 'gemini-3-pro-preview';
+/**
+ * Fetch available models from the backend API.
+ * Returns the list of model names that are available based on enterprise mode and LiteLLM configuration.
+ *
+ * @returns Promise resolving to an array of model names
+ */
+async function getAvailableModels() {
+    var _a;
+    // Lazy import to avoid loading JupyterLab dependencies when only constants are needed
+    const { requestAPI } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ../restAPI/utils */ "./lib/restAPI/utils.js"));
+    const response = await requestAPI('available-models', {
+        method: 'GET'
+    });
+    if (response.error) {
+        console.error('Failed to fetch available models:', response.error.message);
+        // Return default models as fallback
+        return [
+            GPT_4_1_MODEL_NAME,
+            GPT_5_2_MODEL_NAME,
+            CLAUDE_SONNET_MODEL_NAME,
+            CLAUDE_HAIKU_MODEL_NAME,
+            GEMINI_3_FLASH_MODEL_NAME,
+            GEMINI_3_PRO_MODEL_NAME,
+        ];
+    }
+    return ((_a = response.data) === null || _a === void 0 ? void 0 : _a.models) || [];
+}
 
 
 /***/ }),
@@ -17973,6 +18383,59 @@ class CompletionWebsocketClient extends _BaseWebsocketClient__WEBPACK_IMPORTED_M
 }
 
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./style/AddFieldButton.css":
+/*!************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./style/AddFieldButton.css ***!
+  \************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/sourceMaps.js */ "./node_modules/css-loader/dist/runtime/sourceMaps.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+.add-field-container {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e0e0e0;
+}
+
+.add-field-button {
+    width: 100%;
+}
+
+.add-field-dialog-textarea {
+    width: 100%;
+    padding: 8px;
+    margin-top: 10px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    min-height: 100px;
+    resize: vertical;
+    font-family: inherit;
+    box-sizing: border-box;
+}
+`, "",{"version":3,"sources":["webpack://./style/AddFieldButton.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,gBAAgB;IAChB,iBAAiB;IACjB,6BAA6B;AACjC;;AAEA;IACI,WAAW;AACf;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,sBAAsB;IACtB,kBAAkB;IAClB,iBAAiB;IACjB,gBAAgB;IAChB,oBAAoB;IACpB,sBAAsB;AAC1B","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.add-field-container {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e0e0e0;\n}\n\n.add-field-button {\n    width: 100%;\n}\n\n.add-field-dialog-textarea {\n    width: 100%;\n    padding: 8px;\n    margin-top: 10px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    min-height: 100px;\n    resize: vertical;\n    font-family: inherit;\n    box-sizing: border-box;\n}\n"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js!./style/AgentChangeControls.css":
@@ -19800,7 +20263,71 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     display: inline-block;
     min-width: 1.5em;
     text-align: left;
-}`, "",{"version":3,"sources":["webpack://./style/ChartWizardWidget.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,aAAa;IACb,YAAY;IACZ,gBAAgB;IAChB,aAAa;IACb,sBAAsB;IACtB,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,QAAQ;AACZ;;AAEA;IACI,mBAAmB;IACnB,mBAAmB;IACnB,8BAA8B;IAC9B,mBAAmB;IACnB,SAAS;AACb;;AAEA;IACI,oCAAoC;IACpC,eAAe;IACf,gBAAgB;IAChB,oBAAoB;AACxB;;AAEA;IACI,OAAO;IACP,SAAS;IACT,eAAe;AACnB;;AAEA;IACI,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,eAAe;IACf,cAAc;AAClB;;AAEA;IACI,kBAAkB;IAClB,UAAU;IACV,eAAe;IACf,QAAQ;IACR,SAAS;IACT,SAAS;AACb;;AAEA;IACI,kBAAkB;IAClB,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,yCAAyC;IACzC,mBAAmB;IACnB,sCAAsC;IACtC,sBAAsB;AAC1B;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,uBAAuB;IACvB,kBAAkB;IAClB,+BAA+B;IAC/B,wCAAwC;AAC5C;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;IACI,2BAA2B;AAC/B;;AAEA;IACI,6CAA6C;AACjD;;AAEA;IACI,yCAAyC;AAC7C;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;;;;IAII,WAAW;IACX,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,QAAQ;IACR,WAAW;AACf;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,QAAQ;IACR,WAAW;AACf;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,OAAO;IACP,aAAa;AACjB;;AAEA;;IAEI,OAAO;IACP,aAAa;IACb,sBAAsB;IACtB,uBAAuB;AAC3B;;AAEA;IACI,kBAAkB;AACtB;;AAEA;IACI,qBAAqB;IACrB,gBAAgB;IAChB,gBAAgB;AACpB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.chart-wizard-widget {\n    padding: 10px;\n    height: 100%;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n}\n\n.chart-wizard-input-row {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 15px;\n    gap: 5px;\n}\n\n.chart-wizard-boolean-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n    gap: 12px;\n}\n\n.chart-wizard-input-label {\n    color: var(--jp-content-font-color2);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: none;\n}\n\n.chart-wizard-boolean-label {\n    flex: 1;\n    margin: 0;\n    cursor: pointer;\n}\n\n.chart-wizard-toggle-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n\n.chart-wizard-toggle-input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    width: 0;\n    height: 0;\n    margin: 0;\n}\n\n.chart-wizard-toggle-slider {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 24px;\n    background-color: var(--jp-border-color2);\n    border-radius: 12px;\n    transition: background-color 0.3s ease;\n    box-sizing: border-box;\n}\n\n.chart-wizard-toggle-slider::before {\n    content: '';\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    left: 2px;\n    top: 2px;\n    background-color: white;\n    border-radius: 50%;\n    transition: transform 0.3s ease;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color1);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider::before {\n    transform: translateX(20px);\n}\n\n.chart-wizard-toggle-input:focus + .chart-wizard-toggle-slider {\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);\n}\n\n.chart-wizard-toggle-input:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-border-color1);\n}\n\n.chart-wizard-toggle-input:checked:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color0);\n}\n\n.chart-wizard-number-input,\n.chart-wizard-text-input,\n.chart-wizard-color-input,\n.chart-wizard-tuple-input {\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.chart-wizard-color-container {\n    display: flex;\n    gap: 8px;\n    width: 100%;\n}\n\n.chart-wizard-color-picker {\n    flex-shrink: 0;\n}\n\n.chart-wizard-color-input {\n    flex: 1;\n}\n\n.chart-wizard-tuple-container {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n}\n\n.chart-wizard-tuple-input {\n    flex: 1;\n}\n\n.chart-wizard-config-container {\n    flex: 1;\n    min-height: 0;\n}\n\n.chart-wizard-empty-state,\n.chart-wizard-no-config {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.chart-wizard-no-config p {\n    text-align: center;\n}\n\n.chart-wizard-loading-dots {\n    display: inline-block;\n    min-width: 1.5em;\n    text-align: left;\n}"],"sourceRoot":""}]);
+}
+
+.chart-wizard-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    /* Height is set dynamically via inline style to cover full scrollable content */
+    min-height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    pointer-events: all;
+}
+
+.chart-wizard-overlay-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+}
+
+.chart-wizard-warning {
+    background-color: var(--yellow-100);
+    color: var(--yellow-900);
+    padding: 10px 12px;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    font-size: 13px;
+    line-height: 1.4;
+    border: 1px solid var(--yellow-300);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.chart-wizard-warning-content {
+    flex: 1;
+}
+
+.chart-wizard-warning strong {
+    font-weight: 600;
+}
+
+.chart-wizard-warning-button {
+    background-color: var(--yellow-600);
+    color: var(--yellow-900);
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    align-self: flex-start;
+    transition: background-color 0.2s ease;
+}
+
+.chart-wizard-warning-button:hover {
+    background-color: var(--yellow-500);
+}
+
+.chart-wizard-warning-button:active {
+    background-color: var(--yellow-300);
+}`, "",{"version":3,"sources":["webpack://./style/ChartWizardWidget.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,aAAa;IACb,YAAY;IACZ,gBAAgB;IAChB,aAAa;IACb,sBAAsB;IACtB,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,QAAQ;AACZ;;AAEA;IACI,mBAAmB;IACnB,mBAAmB;IACnB,8BAA8B;IAC9B,mBAAmB;IACnB,SAAS;AACb;;AAEA;IACI,oCAAoC;IACpC,eAAe;IACf,gBAAgB;IAChB,oBAAoB;AACxB;;AAEA;IACI,OAAO;IACP,SAAS;IACT,eAAe;AACnB;;AAEA;IACI,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,eAAe;IACf,cAAc;AAClB;;AAEA;IACI,kBAAkB;IAClB,UAAU;IACV,eAAe;IACf,QAAQ;IACR,SAAS;IACT,SAAS;AACb;;AAEA;IACI,kBAAkB;IAClB,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,yCAAyC;IACzC,mBAAmB;IACnB,sCAAsC;IACtC,sBAAsB;AAC1B;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,uBAAuB;IACvB,kBAAkB;IAClB,+BAA+B;IAC/B,wCAAwC;AAC5C;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;IACI,2BAA2B;AAC/B;;AAEA;IACI,6CAA6C;AACjD;;AAEA;IACI,yCAAyC;AAC7C;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;;;;IAII,WAAW;IACX,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,QAAQ;IACR,WAAW;AACf;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,QAAQ;IACR,WAAW;AACf;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,OAAO;IACP,aAAa;AACjB;;AAEA;;IAEI,OAAO;IACP,aAAa;IACb,sBAAsB;IACtB,uBAAuB;AAC3B;;AAEA;IACI,kBAAkB;AACtB;;AAEA;IACI,qBAAqB;IACrB,gBAAgB;IAChB,gBAAgB;AACpB;;AAEA;IACI,kBAAkB;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,gFAAgF;IAChF,gBAAgB;IAChB,0CAA0C;IAC1C,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,aAAa;IACb,mBAAmB;AACvB;;AAEA;IACI,eAAe;IACf,gBAAgB;IAChB,WAAW;AACf;;AAEA;IACI,mCAAmC;IACnC,wBAAwB;IACxB,kBAAkB;IAClB,kBAAkB;IAClB,mBAAmB;IACnB,eAAe;IACf,gBAAgB;IAChB,mCAAmC;IACnC,aAAa;IACb,sBAAsB;IACtB,SAAS;AACb;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,gBAAgB;AACpB;;AAEA;IACI,mCAAmC;IACnC,wBAAwB;IACxB,YAAY;IACZ,iBAAiB;IACjB,kBAAkB;IAClB,eAAe;IACf,gBAAgB;IAChB,eAAe;IACf,sBAAsB;IACtB,sCAAsC;AAC1C;;AAEA;IACI,mCAAmC;AACvC;;AAEA;IACI,mCAAmC;AACvC","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.chart-wizard-widget {\n    padding: 10px;\n    height: 100%;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n}\n\n.chart-wizard-input-row {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 15px;\n    gap: 5px;\n}\n\n.chart-wizard-boolean-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n    gap: 12px;\n}\n\n.chart-wizard-input-label {\n    color: var(--jp-content-font-color2);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: none;\n}\n\n.chart-wizard-boolean-label {\n    flex: 1;\n    margin: 0;\n    cursor: pointer;\n}\n\n.chart-wizard-toggle-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n\n.chart-wizard-toggle-input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    width: 0;\n    height: 0;\n    margin: 0;\n}\n\n.chart-wizard-toggle-slider {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 24px;\n    background-color: var(--jp-border-color2);\n    border-radius: 12px;\n    transition: background-color 0.3s ease;\n    box-sizing: border-box;\n}\n\n.chart-wizard-toggle-slider::before {\n    content: '';\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    left: 2px;\n    top: 2px;\n    background-color: white;\n    border-radius: 50%;\n    transition: transform 0.3s ease;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color1);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider::before {\n    transform: translateX(20px);\n}\n\n.chart-wizard-toggle-input:focus + .chart-wizard-toggle-slider {\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);\n}\n\n.chart-wizard-toggle-input:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-border-color1);\n}\n\n.chart-wizard-toggle-input:checked:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color0);\n}\n\n.chart-wizard-number-input,\n.chart-wizard-text-input,\n.chart-wizard-color-input,\n.chart-wizard-tuple-input {\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.chart-wizard-color-container {\n    display: flex;\n    gap: 8px;\n    width: 100%;\n}\n\n.chart-wizard-color-picker {\n    flex-shrink: 0;\n}\n\n.chart-wizard-color-input {\n    flex: 1;\n}\n\n.chart-wizard-tuple-container {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n}\n\n.chart-wizard-tuple-input {\n    flex: 1;\n}\n\n.chart-wizard-config-container {\n    flex: 1;\n    min-height: 0;\n}\n\n.chart-wizard-empty-state,\n.chart-wizard-no-config {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.chart-wizard-no-config p {\n    text-align: center;\n}\n\n.chart-wizard-loading-dots {\n    display: inline-block;\n    min-width: 1.5em;\n    text-align: left;\n}\n\n.chart-wizard-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    /* Height is set dynamically via inline style to cover full scrollable content */\n    min-height: 100%;\n    background-color: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n    pointer-events: all;\n}\n\n.chart-wizard-overlay-text {\n    font-size: 16px;\n    font-weight: 500;\n    color: #333;\n}\n\n.chart-wizard-warning {\n    background-color: var(--yellow-100);\n    color: var(--yellow-900);\n    padding: 10px 12px;\n    border-radius: 4px;\n    margin-bottom: 15px;\n    font-size: 13px;\n    line-height: 1.4;\n    border: 1px solid var(--yellow-300);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.chart-wizard-warning-content {\n    flex: 1;\n}\n\n.chart-wizard-warning strong {\n    font-weight: 600;\n}\n\n.chart-wizard-warning-button {\n    background-color: var(--yellow-600);\n    color: var(--yellow-900);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    align-self: flex-start;\n    transition: background-color 0.2s ease;\n}\n\n.chart-wizard-warning-button:hover {\n    background-color: var(--yellow-500);\n}\n\n.chart-wizard-warning-button:active {\n    background-color: var(--yellow-300);\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -21146,10 +21673,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  min-width: 200px;
+  min-width: 225px;
   white-space: nowrap;
   height: 400px;
-  min-width: 225px;
   max-width: 350px;
   overflow-y: auto;
 }
@@ -21166,6 +21692,22 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   left: auto;
 }
 
+/* Responsive width based on chat taskpane container width */
+/* Make dropdown width relative to container width, accounting for padding */
+/* At minimum taskpane width (350px), dropdown should fit within available space (330px accounting for 20px padding) */
+@container (max-width: 350px) {
+  .dropdown-menu {
+    max-width: calc(100cqw - 20px);
+  }
+}
+
+/* For wider taskpanes, allow dropdown to use up to 350px but still respect container width */
+@container (min-width: 351px) {
+  .dropdown-menu {
+    max-width: min(350px, calc(100cqw - 20px));
+  }
+}
+
 .dropdown-item-row {
   display: flex;
   flex-direction: row;
@@ -21221,7 +21763,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   display: flex;
   align-items: center;
 }
-`, "",{"version":3,"sources":["webpack://./style/DropdownMenu.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,aAAa;EACb,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,wCAAwC;EACxC,aAAa;EACb,sBAAsB;EACtB,gBAAgB;EAChB,mBAAmB;EACnB,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA,0BAA0B;AAC1B;EACE,OAAO;EACP,WAAW;AACb;;AAEA,2BAA2B;AAC3B;EACE,QAAQ;EACR,UAAU;AACZ;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,mBAAmB;EACnB,QAAQ;EACR,gBAAgB;EAChB,mBAAmB,EAAE,iDAAiD;AACxE;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,+BAA+B;EAC/B,OAAO;EACP,gBAAgB;EAChB,uBAAuB;EACvB,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,eAAe;EACf,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,iBAAiB,EAAE,2BAA2B;AAChD;;AAEA;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA;;;CAGC;AACD;;EAEE,aAAa;EACb,mBAAmB;AACrB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.dropdown-container {\n  position: relative;\n  display: inline-block;\n}\n\n.dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  z-index: 1000;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 3px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  min-width: 200px;\n  white-space: nowrap;\n  height: 400px;\n  min-width: 225px;\n  max-width: 350px;\n  overflow-y: auto;\n}\n\n/* Left-aligned dropdown */\n.dropdown-menu-left {\n  left: 0;\n  right: auto;\n}\n\n/* Right-aligned dropdown */\n.dropdown-menu-right {\n  right: 0;\n  left: auto;\n}\n\n.dropdown-item-row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 2px;\n  padding-right: 20px; /* Add padding to leave space for the scrollbar */\n}\n\n.dropdown-item-row:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.dropdown-item-main {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  text-align: left;\n  border: none;\n  background: none;\n  color: var(--jp-ui-font-color1);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n\n.dropdown-item-icon {\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropdown-item-label {\n  padding-left: 3px; /* Add consistent padding */\n}\n\n.dropdown-item-disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* \n  When using Lab Icons, we seem to get an extra div around the svg icon\n  This makes sure the svg is aligned properly in that div\n*/\n.dropdown-item-icon > div, \n.dropdown-item-secondary > div{\n  display: flex;\n  align-items: center;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./style/DropdownMenu.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,aAAa;EACb,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,wCAAwC;EACxC,aAAa;EACb,sBAAsB;EACtB,gBAAgB;EAChB,mBAAmB;EACnB,aAAa;EACb,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA,0BAA0B;AAC1B;EACE,OAAO;EACP,WAAW;AACb;;AAEA,2BAA2B;AAC3B;EACE,QAAQ;EACR,UAAU;AACZ;;AAEA,4DAA4D;AAC5D,4EAA4E;AAC5E,sHAAsH;AACtH;EACE;IACE,8BAA8B;EAChC;AACF;;AAEA,6FAA6F;AAC7F;EACE;IACE,0CAA0C;EAC5C;AACF;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,mBAAmB;EACnB,QAAQ;EACR,gBAAgB;EAChB,mBAAmB,EAAE,iDAAiD;AACxE;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,+BAA+B;EAC/B,OAAO;EACP,gBAAgB;EAChB,uBAAuB;EACvB,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,eAAe;EACf,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,iBAAiB,EAAE,2BAA2B;AAChD;;AAEA;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA;;;CAGC;AACD;;EAEE,aAAa;EACb,mBAAmB;AACrB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.dropdown-container {\n  position: relative;\n  display: inline-block;\n}\n\n.dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  z-index: 1000;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 3px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  min-width: 225px;\n  white-space: nowrap;\n  height: 400px;\n  max-width: 350px;\n  overflow-y: auto;\n}\n\n/* Left-aligned dropdown */\n.dropdown-menu-left {\n  left: 0;\n  right: auto;\n}\n\n/* Right-aligned dropdown */\n.dropdown-menu-right {\n  right: 0;\n  left: auto;\n}\n\n/* Responsive width based on chat taskpane container width */\n/* Make dropdown width relative to container width, accounting for padding */\n/* At minimum taskpane width (350px), dropdown should fit within available space (330px accounting for 20px padding) */\n@container (max-width: 350px) {\n  .dropdown-menu {\n    max-width: calc(100cqw - 20px);\n  }\n}\n\n/* For wider taskpanes, allow dropdown to use up to 350px but still respect container width */\n@container (min-width: 351px) {\n  .dropdown-menu {\n    max-width: min(350px, calc(100cqw - 20px));\n  }\n}\n\n.dropdown-item-row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 2px;\n  padding-right: 20px; /* Add padding to leave space for the scrollbar */\n}\n\n.dropdown-item-row:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.dropdown-item-main {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  text-align: left;\n  border: none;\n  background: none;\n  color: var(--jp-ui-font-color1);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n\n.dropdown-item-icon {\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropdown-item-label {\n  padding-left: 3px; /* Add consistent padding */\n}\n\n.dropdown-item-disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* \n  When using Lab Icons, we seem to get an extra div around the svg icon\n  This makes sure the svg is aligned properly in that div\n*/\n.dropdown-item-icon > div, \n.dropdown-item-secondary > div{\n  display: flex;\n  align-items: center;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -24207,6 +24749,60 @@ module.exports = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 10 10\" fill=\"n
 
 module.exports = "<svg width=\"33\" height=\"33\" viewBox=\"0 0 33 33\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g fill=\"currentColor\">\n        <path d=\"M27.8204 5.193C24.7983 2.1709 20.7805 0.506836 16.5068 0.506836C7.78625 0.506836 0.506836 7.78625 0.506836 16.5068C0.506836 25.2274 7.78625 32.5068 16.5068 32.5068C25.2274 32.5068 32.5068 25.2274 32.5068 16.5068C32.5068 12.2332 30.8426 8.2151 27.8207 5.19329L27.8204 5.193ZM23.627 21.5962L21.7553 17.7403L23.4737 16.9062L24.3955 18.8053L24.4401 18.6209C24.608 17.9267 24.6932 17.2155 24.6932 16.5068C24.6932 11.6336 20.7854 7.66893 15.9819 7.66893C11.1788 7.66893 7.27066 11.6336 7.27066 16.5068C7.27066 21.3572 11.1414 25.3073 15.9137 25.3444V27.2546C10.0885 27.217 5.36066 22.41 5.36066 16.5067C5.36066 10.5804 10.1253 5.75855 15.9819 5.75855C21.8385 5.75855 26.6032 10.5801 26.6032 16.5067C26.6032 17.2903 26.5175 18.0775 26.3484 18.8468L26.315 18.999L27.9027 18.0676L28.8693 19.7151L24.9693 22.003C24.3869 22.4896 23.6689 21.9597 23.6268 21.5962L23.627 21.5962Z\"/>\n    </g>\n</svg>\n";
 
+/***/ }),
+
+/***/ "./style/AddFieldButton.css":
+/*!**********************************!*\
+  !*** ./style/AddFieldButton.css ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ "./node_modules/style-loader/dist/runtime/styleDomAPI.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ "./node_modules/style-loader/dist/runtime/insertBySelector.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ "./node_modules/style-loader/dist/runtime/insertStyleElement.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ "./node_modules/style-loader/dist/runtime/styleTagTransform.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_AddFieldButton_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./AddFieldButton.css */ "./node_modules/css-loader/dist/cjs.js!./style/AddFieldButton.css");
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
+options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+
+      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+    
+options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_AddFieldButton_css__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_AddFieldButton_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_AddFieldButton_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_AddFieldButton_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "./style/AgentChangeControls.css":
@@ -26694,4 +27290,4 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
 /***/ })
 
 }]);
-//# sourceMappingURL=lib_index_js.9d26322f3e78beb2b666.js.map
+//# sourceMappingURL=lib_index_js.03302cc521d72eb56b00.js.map