mito-ai 0.1.57__py3-none-any.whl → 0.1.59__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.59.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.44c109c7be36fb884d25.js

@@ -2162,6 +2162,7 @@ const MarkdownBlock = ({ markdown, renderMimeRegistry, notebookTracker }) => {
     // This ensures re-renders when cells are reordered (even if count stays the same)
     const cellOrderKey = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
         return Array.from(cellOrder.entries())
+            .filter(([cellId]) => cellId != null) // Filter out entries with undefined/null keys
             .sort((a, b) => a[0].localeCompare(b[0])) // Sort by cellId for stable string
             .map(([cellId, cellNumber]) => `${cellId}:${cellNumber}`)
             .join(',');
@@ -7417,6 +7418,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 +7608,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 +7628,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 +7680,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 +7712,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 +7756,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 +7782,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 +7817,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 +7845,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 +7859,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 +7940,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 +7949,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 +7958,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 +7987,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 +8008,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 +8034,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 +8071,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 +8182,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)
@@ -9035,10 +9307,10 @@ const getFullErrorMessageFromTraceback = (tracebackArray) => {
 
 /***/ }),
 
-/***/ "./lib/Extensions/MitoThemeLight/index.js":
-/*!************************************************!*\
-  !*** ./lib/Extensions/MitoThemeLight/index.js ***!
-  \************************************************/
+/***/ "./lib/Extensions/MitoThemes/index.js":
+/*!********************************************!*\
+  !*** ./lib/Extensions/MitoThemes/index.js ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -9055,8 +9327,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "webpack/sharing/consume/default/react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _components_RunCellButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../components/RunCellButton */ "./lib/components/RunCellButton.js");
-/* harmony import */ var _utils_lineNumbers__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/lineNumbers */ "./lib/utils/lineNumbers.js");
+/* harmony import */ var _components_RunCellButton__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../components/RunCellButton */ "./lib/components/RunCellButton.js");
+/* harmony import */ var _utils_lineNumbers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/lineNumbers */ "./lib/utils/lineNumbers.js");
+/* harmony import */ var _palettes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./palettes */ "./lib/Extensions/MitoThemes/palettes.js");
 /* harmony import */ var _style_RunCellButton_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../style/RunCellButton.css */ "./style/RunCellButton.css");
 /*
  * Copyright (c) Saga Inc.
@@ -9070,6 +9343,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Updates cell numbers for all cells in a notebook.
  * Uses notebook.widgets which is always in the correct order.
@@ -9107,6 +9381,8 @@ function setupCellNumbering(notebookPanel) {
         updateAllCellNumbers(notebookPanel);
     });
     observer.observe(notebook.node, { childList: true, subtree: true });
+    // Initial update
+    updateAllCellNumbers(notebookPanel);
     // Return cleanup function
     return () => {
         var _a;
@@ -9123,20 +9399,24 @@ function setupCellNumbering(notebookPanel) {
     };
 }
 /**
- * A plugin for the Mito Light Theme.
+ * A plugin for the Mito Themes (Light and Dark).
  *
- * The Run Cell Button, cell numbering, and hidden default toolbar buttons only apply
- * when the Mito Light theme is active.
+ * Registers both Mito Light and Mito Dark themes.
+ * The Run Cell Button, cell numbering, and hidden default toolbar buttons apply
+ * when either Mito theme is active.
  */
 const plugin = {
-    id: 'mito_ai:theme',
-    description: 'Adds the Mito Light theme.',
+    id: 'mito_ai:themes',
+    description: 'Adds the Mito Light and Dark themes.',
     requires: [_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.IThemeManager, _jupyterlab_translation__WEBPACK_IMPORTED_MODULE_1__.ITranslator, _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__.INotebookTracker],
     activate: (app, manager, translator, notebookTracker) => {
         const trans = translator.load('jupyterlab');
+        // CSS path - single CSS file for both themes (uses CSS variables set by palettes)
         const style = 'mito_ai/index.css';
-        // Store connection for cleanup
-        let widgetAddedConnection = null;
+        const palettes = new _palettes__WEBPACK_IMPORTED_MODULE_6__.MitoPalettes();
+        // Store connections for cleanup
+        let lightWidgetAddedConnection = null;
+        let darkWidgetAddedConnection = null;
         // Store cell numbering cleanup functions for each notebook
         const cellNumberingCleanups = new Map();
         // Add Run Cell button to notebook toolbar
@@ -9157,7 +9437,7 @@ const plugin = {
                     this.addClass('mito-run-cell-button-widget');
                 }
                 render() {
-                    return react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_components_RunCellButton__WEBPACK_IMPORTED_MODULE_6__["default"], { notebookPanel: this.panel });
+                    return react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_components_RunCellButton__WEBPACK_IMPORTED_MODULE_7__["default"], { notebookPanel: this.panel });
                 }
             }
             const runCellWidget = new RunCellButtonWidget(notebookPanel);
@@ -9196,54 +9476,65 @@ const plugin = {
                 cellNumberingCleanups.delete(notebookPanel);
             }
         };
-        // Add buttons and cell numbering to all notebooks
-        const addButtonsToAllNotebooks = () => {
+        // Add cell numbering to a notebook panel (guard against duplicates)
+        const addCellNumbering = (notebookPanel) => {
+            if (cellNumberingCleanups.has(notebookPanel)) {
+                return;
+            }
+            const cleanup = setupCellNumbering(notebookPanel);
+            if (cleanup) {
+                cellNumberingCleanups.set(notebookPanel, cleanup);
+                // Also cleanup when notebook is disposed
+                notebookPanel.disposed.connect(() => {
+                    cellNumberingCleanups.delete(notebookPanel);
+                });
+            }
+        };
+        // Add buttons and cell numbering to all notebooks (for a specific theme)
+        const addButtonsToAllNotebooks = (themeName) => {
             notebookTracker.forEach(widget => {
                 addRunCellButton(widget);
                 // Enable line numbers if needed
-                void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_7__.enableLineNumbersIfNeeded)(app, widget);
+                void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_8__.enableLineNumbersIfNeeded)(app, widget);
                 // Setup cell numbering
-                const cleanup = setupCellNumbering(widget);
-                if (cleanup) {
-                    cellNumberingCleanups.set(widget, cleanup);
-                    // Also cleanup when notebook is disposed
-                    widget.disposed.connect(() => {
-                        cellNumberingCleanups.delete(widget);
-                    });
-                }
+                addCellNumbering(widget);
             });
             // Connect to new notebooks
-            widgetAddedConnection = (sender, widget) => {
+            const widgetAddedHandler = (sender, widget) => {
                 setTimeout(() => {
                     // Check if widget is still valid before proceeding
                     if (widget.isDisposed) {
                         return;
                     }
-                    // Only add if Mito Light theme is still active
-                    if (manager.theme === 'Mito Light') {
+                    // Only add if the specified theme is still active
+                    if (manager.theme === themeName) {
                         addRunCellButton(widget);
                         // Enable line numbers if needed
-                        void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_7__.enableLineNumbersIfNeeded)(app, widget);
+                        void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_8__.enableLineNumbersIfNeeded)(app, widget);
                         // Setup cell numbering
-                        const cleanup = setupCellNumbering(widget);
-                        if (cleanup) {
-                            cellNumberingCleanups.set(widget, cleanup);
-                            // Also cleanup when notebook is disposed
-                            widget.disposed.connect(() => {
-                                cellNumberingCleanups.delete(widget);
-                            });
-                        }
+                        addCellNumbering(widget);
                     }
                 }, 100);
             };
-            notebookTracker.widgetAdded.connect(widgetAddedConnection);
+            if (themeName === 'Mito Light') {
+                lightWidgetAddedConnection = widgetAddedHandler;
+                notebookTracker.widgetAdded.connect(lightWidgetAddedConnection);
+            }
+            else if (themeName === 'Mito Dark') {
+                darkWidgetAddedConnection = widgetAddedHandler;
+                notebookTracker.widgetAdded.connect(darkWidgetAddedConnection);
+            }
         };
         // Remove buttons and cell numbering from all notebooks
         const removeButtonsFromAllNotebooks = () => {
             // Disconnect from new notebooks
-            if (widgetAddedConnection) {
-                notebookTracker.widgetAdded.disconnect(widgetAddedConnection);
-                widgetAddedConnection = null;
+            if (lightWidgetAddedConnection) {
+                notebookTracker.widgetAdded.disconnect(lightWidgetAddedConnection);
+                lightWidgetAddedConnection = null;
+            }
+            if (darkWidgetAddedConnection) {
+                notebookTracker.widgetAdded.disconnect(darkWidgetAddedConnection);
+                darkWidgetAddedConnection = null;
             }
             // Remove from all existing notebooks
             notebookTracker.forEach(widget => {
@@ -9253,33 +9544,323 @@ const plugin = {
             // Clear all cleanup functions
             cellNumberingCleanups.clear();
         };
+        // Register Mito Light theme
         manager.register({
             name: 'Mito Light',
             displayName: trans.__('Mito Light'),
             isLight: true,
             themeScrollbars: false,
             load: async () => {
-                // Load theme CSS (hides default buttons)
+                // Set CSS variables for light theme before loading CSS
+                palettes.setColorsLight();
+                // Load theme CSS (hides default buttons, applies light theme variables)
                 await manager.loadCSS(style);
                 // Add Run Cell buttons to all notebooks and enable line numbers
-                addButtonsToAllNotebooks();
+                addButtonsToAllNotebooks('Mito Light');
             },
             unload: async () => {
                 // Remove Run Cell buttons from all notebooks
                 removeButtonsFromAllNotebooks();
             }
         });
-        // Set Mito Light as default theme if user hasn't explicitly chosen a different theme
-        // This runs after registration so the theme is available
-        if (manager.theme === 'JupyterLab Light' || !manager.theme) {
-            void manager.setTheme('Mito Light');
-        }
+        // Register Mito Dark theme
+        manager.register({
+            name: 'Mito Dark',
+            displayName: trans.__('Mito Dark'),
+            isLight: false,
+            themeScrollbars: false,
+            load: async () => {
+                // Set CSS variables for dark theme before loading CSS
+                palettes.setColorsDark();
+                // Load theme CSS (hides default buttons, applies dark theme variables)
+                await manager.loadCSS(style);
+                // Add Run Cell buttons to all notebooks and enable line numbers
+                addButtonsToAllNotebooks('Mito Dark');
+            },
+            unload: async () => {
+                // Remove Run Cell buttons from all notebooks
+                removeButtonsFromAllNotebooks();
+            }
+        });
+        // Flag to prevent infinite recursion when we convert themes
+        let isConvertingTheme = false;
+        // Helper function to convert non-Mito themes to corresponding Mito theme
+        const convertToMitoTheme = (themeName) => {
+            // Prevent infinite recursion - if we're already converting, don't do it again
+            if (isConvertingTheme) {
+                return;
+            }
+            if (!themeName) {
+                // No theme set, default to Mito Light
+                isConvertingTheme = true;
+                void manager.setTheme('Mito Light').finally(() => {
+                    isConvertingTheme = false;
+                });
+                return;
+            }
+            const isMitoTheme = themeName === 'Mito Light' || themeName === 'Mito Dark';
+            if (isMitoTheme) {
+                // Already a Mito theme, don't change - this ensures user's Mito theme preference is preserved
+                return;
+            }
+            // Convert non-Mito themes to corresponding Mito theme
+            isConvertingTheme = true;
+            if (themeName === 'JupyterLab Dark' || themeName.includes('Dark')) {
+                void manager.setTheme('Mito Dark').finally(() => {
+                    isConvertingTheme = false;
+                });
+            }
+            else {
+                // Default to light theme for any other non-Mito theme (including JupyterLab Light)
+                void manager.setTheme('Mito Light').finally(() => {
+                    isConvertingTheme = false;
+                });
+            }
+        };
+        // Wait for app restoration to complete before checking/setting theme
+        // This ensures saved theme preferences are loaded first
+        void app.restored.then(() => {
+            // Convert theme on initial load if needed
+            convertToMitoTheme(manager.theme);
+        });
+        // Listen for theme changes and automatically convert to Mito theme
+        // This ensures that when users switch themes, they get converted to Mito themes
+        // and the preference is saved properly
+        manager.themeChanged.connect(() => {
+            // Use manager.theme to get the current theme after the change
+            convertToMitoTheme(manager.theme);
+        });
     },
     autoStart: true
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (plugin);
 
 
+/***/ }),
+
+/***/ "./lib/Extensions/MitoThemes/palettes.js":
+/*!***********************************************!*\
+  !*** ./lib/Extensions/MitoThemes/palettes.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MitoPalettes: () => (/* binding */ MitoPalettes)
+/* harmony export */ });
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+/**
+ * MitoPalettes class sets CSS variables for light and dark themes.
+ * Similar to catppuccin's approach, this allows a single CSS file to work
+ * for both themes by setting different variable values before loading CSS.
+ */
+class MitoPalettes {
+    /**
+     * Set CSS variables for the light theme
+     */
+    setColorsLight() {
+        // Border colors
+        document.documentElement.style.setProperty('--mito-theme-border-color0', '#bdbdbd');
+        document.documentElement.style.setProperty('--mito-theme-border-color1', '#bdbdbd');
+        document.documentElement.style.setProperty('--mito-theme-border-color2', '#e0e0e0');
+        document.documentElement.style.setProperty('--mito-theme-border-color3', '#eee');
+        document.documentElement.style.setProperty('--mito-theme-inverse-border-color', '#757575');
+        // UI Font colors
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color0', 'rgba(0, 0, 0, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color1', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color2', 'rgba(0, 0, 0, 0.54)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color3', 'rgba(0, 0, 0, 0.38)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color0', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color1', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color2', 'rgba(255, 255, 255, 0.7)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color3', 'rgba(255, 255, 255, 0.5)');
+        // Content Font colors
+        document.documentElement.style.setProperty('--mito-theme-content-font-color0', 'rgba(0, 0, 0, 1)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color1', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color2', 'rgba(0, 0, 0, 0.54)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color3', 'rgba(0, 0, 0, 0.38)');
+        document.documentElement.style.setProperty('--mito-theme-content-link-color', '#0d47a1');
+        document.documentElement.style.setProperty('--mito-theme-content-link-visited-color', '#7b1fa2');
+        // Layout colors
+        document.documentElement.style.setProperty('--mito-theme-layout-color0', 'white');
+        document.documentElement.style.setProperty('--mito-theme-layout-color1', 'white');
+        document.documentElement.style.setProperty('--mito-theme-layout-color2', '#eee');
+        document.documentElement.style.setProperty('--mito-theme-layout-color3', '#bdbdbd');
+        document.documentElement.style.setProperty('--mito-theme-layout-color4', '#757575');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color0', '#111');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color1', '#212121');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color2', '#424242');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color3', '#616161');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color4', '#757575');
+        // Brand colors (using purple variables from light theme)
+        document.documentElement.style.setProperty('--mito-theme-brand-color0', 'var(--purple-900)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color1', 'var(--purple-700)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color2', 'var(--purple-500)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color3', 'var(--purple-300)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color4', 'var(--purple-300)');
+        // Primary button colors (light mode: blue theme to avoid pinkish-purple)
+        document.documentElement.style.setProperty('--mito-theme-button-background', 'var(--blue-300)');
+        document.documentElement.style.setProperty('--mito-theme-button-border', 'var(--blue-900)');
+        document.documentElement.style.setProperty('--mito-theme-button-text', 'var(--blue-900)');
+        document.documentElement.style.setProperty('--mito-theme-button-hover-background', 'var(--blue-400)');
+        // Cell editor colors
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-background', '#f5f5f5');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-border-color', '#e0e0e0');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-active-background', 'var(--mito-theme-layout-color0)');
+        document.documentElement.style.setProperty('--mito-theme-cell-prompt-not-active-font-color', '#616161');
+        document.documentElement.style.setProperty('--mito-theme-cell-outprompt-font-color', '#bf5b3d');
+        // Notebook colors
+        document.documentElement.style.setProperty('--mito-theme-notebook-select-background', 'var(--mito-theme-layout-color1)');
+        document.documentElement.style.setProperty('--mito-theme-notebook-multiselected-color', '#e3f2fd');
+        // Rendermime colors
+        document.documentElement.style.setProperty('--mito-theme-rendermime-error-background', '#fdd');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-background', '#ebebeb');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-hover-background', '#e1f5fe');
+        // Dialog colors
+        document.documentElement.style.setProperty('--mito-theme-dialog-background', 'rgba(0, 0, 0, 0.25)');
+        // Input field colors
+        document.documentElement.style.setProperty('--mito-theme-input-background', '#f5f5f5');
+        document.documentElement.style.setProperty('--mito-theme-input-border-color', 'var(--mito-theme-inverse-border-color)');
+        // Editor colors
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-background', '#d9d9d9');
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-focused-background', '#d7d4f0');
+        document.documentElement.style.setProperty('--mito-theme-editor-cursor-color', 'var(--mito-theme-ui-font-color0)');
+        // Line number colors (grey/white/blue instead of pink)
+        document.documentElement.style.setProperty('--mito-theme-line-number-color', '#92999F');
+        // Code mirror colors
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-keyword-color', '#008000');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-atom-color', '#88f');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-number-color', '#080');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-def-color', '#00f');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-color', '#212121');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-2-color', 'rgb(0, 54, 109)');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-3-color', '#085');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-punctuation-color', '#05a');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-property-color', '#05a');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-operator-color', '#7800c2');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-comment-color', '#408080');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-color', '#ba2121');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-2-color', '#708');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-meta-color', '#a2f');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-qualifier-color', '#555');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-builtin-color', '#008000');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-bracket-color', '#997');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-tag-color', '#170');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-attribute-color', '#00c');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-header-color', 'blue');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-quote-color', '#090');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-link-color', '#00c');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-error-color', '#f00');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-hr-color', '#999');
+        // Vega colors
+        document.documentElement.style.setProperty('--mito-theme-vega-background', 'white');
+    }
+    /**
+     * Set CSS variables for the dark theme
+     */
+    setColorsDark() {
+        // Border colors
+        document.documentElement.style.setProperty('--mito-theme-border-color0', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-border-color1', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-border-color2', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-border-color3', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-inverse-border-color', '#5a5a5a');
+        // UI Font colors
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color0', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color1', 'rgba(255, 255, 255, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color2', 'rgba(255, 255, 255, 0.6)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color3', 'rgba(255, 255, 255, 0.4)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color0', 'rgba(0, 0, 0, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color1', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color2', 'rgba(0, 0, 0, 0.6)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color3', 'rgba(0, 0, 0, 0.4)');
+        // Content Font colors
+        document.documentElement.style.setProperty('--mito-theme-content-font-color0', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color1', 'rgba(255, 255, 255, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color2', 'rgba(255, 255, 255, 0.6)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color3', 'rgba(255, 255, 255, 0.4)');
+        document.documentElement.style.setProperty('--mito-theme-content-link-color', '#7c93ee');
+        document.documentElement.style.setProperty('--mito-theme-content-link-visited-color', '#b39ddb');
+        // Layout colors
+        document.documentElement.style.setProperty('--mito-theme-layout-color0', '#1a1a1a');
+        document.documentElement.style.setProperty('--mito-theme-layout-color1', '#1e1e1e');
+        document.documentElement.style.setProperty('--mito-theme-layout-color2', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-layout-color3', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-layout-color4', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color0', '#ffffff');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color1', '#f0f0f0');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color2', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color3', '#a0a0a0');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color4', '#6e6e6e');
+        // Brand colors (pink-purple theme for dark, starting with #C65FAA)
+        document.documentElement.style.setProperty('--mito-theme-brand-color0', '#C65FAA');
+        document.documentElement.style.setProperty('--mito-theme-brand-color1', '#D97BC0');
+        document.documentElement.style.setProperty('--mito-theme-brand-color2', '#E8A3D5');
+        document.documentElement.style.setProperty('--mito-theme-brand-color3', '#F4D1EA');
+        document.documentElement.style.setProperty('--mito-theme-brand-color4', '#FAE8F5');
+        // Primary button colors (dark mode: lighter brand background, dark brand border)
+        document.documentElement.style.setProperty('--mito-theme-button-background', '#F4D1EA');
+        document.documentElement.style.setProperty('--mito-theme-button-border', '#C65FAA');
+        document.documentElement.style.setProperty('--mito-theme-button-text', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-button-hover-background', '#FAE8F5');
+        // Cell editor colors
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-background', '#1e1e1e');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-border-color', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-active-background', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-cell-prompt-not-active-font-color', '#6e6e6e');
+        document.documentElement.style.setProperty('--mito-theme-cell-outprompt-font-color', '#f59e0b');
+        // Notebook colors
+        document.documentElement.style.setProperty('--mito-theme-notebook-select-background', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-notebook-multiselected-color', 'rgba(198, 95, 170, 0.2)');
+        // Rendermime colors
+        document.documentElement.style.setProperty('--mito-theme-rendermime-error-background', 'rgba(244, 67, 54, 0.2)');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-background', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-hover-background', '#2d2d2d');
+        // Dialog colors
+        document.documentElement.style.setProperty('--mito-theme-dialog-background', 'rgba(0, 0, 0, 0.5)');
+        // Input field colors
+        document.documentElement.style.setProperty('--mito-theme-input-background', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-input-border-color', '#3c3c3c');
+        // Editor colors
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-background', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-focused-background', '#3d4a5c');
+        document.documentElement.style.setProperty('--mito-theme-editor-cursor-color', '#ffffff');
+        // Line number colors (grey/white/blue instead of pink)
+        document.documentElement.style.setProperty('--mito-theme-line-number-color', '#92999F');
+        // Code mirror colors
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-keyword-color', '#c586c0');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-atom-color', '#b5cea8');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-number-color', '#b5cea8');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-def-color', '#dcdcaa');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-color', '#9cdcfe');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-2-color', '#4fc1ff');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-3-color', '#4ec9b0');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-punctuation-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-property-color', '#9cdcfe');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-operator-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-comment-color', '#6a9955');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-color', '#ce9178');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-2-color', '#ce9178');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-meta-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-qualifier-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-builtin-color', '#4ec9b0');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-bracket-color', '#ffd700');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-tag-color', '#569cd6');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-attribute-color', '#9cdcfe');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-header-color', '#569cd6');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-quote-color', '#6a9955');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-link-color', '#569cd6');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-error-color', '#f44747');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-hr-color', '#6e6e6e');
+        // Vega colors
+        document.documentElement.style.setProperty('--mito-theme-vega-background', '#1e1e1e');
+    }
+}
+
+
 /***/ }),
 
 /***/ "./lib/Extensions/NotebookFooter/NotebookFooter.js":
@@ -12386,47 +12967,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 +13124,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 +13169,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);
 
@@ -14319,7 +14996,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Extensions_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Extensions/SettingsManager/SettingsManagerPlugin */ "./lib/Extensions/SettingsManager/SettingsManagerPlugin.js");
 /* harmony import */ var _Extensions_VersionCheck__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Extensions/VersionCheck */ "./lib/Extensions/VersionCheck/index.js");
 /* harmony import */ var _Extensions_NotebookFooter__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Extensions/NotebookFooter */ "./lib/Extensions/NotebookFooter/index.js");
-/* harmony import */ var _Extensions_MitoThemeLight__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Extensions/MitoThemeLight */ "./lib/Extensions/MitoThemeLight/index.js");
+/* harmony import */ var _Extensions_MitoThemes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Extensions/MitoThemes */ "./lib/Extensions/MitoThemes/index.js");
 /* harmony import */ var _Extensions_AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Extensions/AppManager/ManageAppsPlugin */ "./lib/Extensions/AppManager/ManageAppsPlugin.js");
 /* harmony import */ var _Extensions_ChartWizard_ChartWizardPlugin__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Extensions/ChartWizard/ChartWizardPlugin */ "./lib/Extensions/ChartWizard/ChartWizardPlugin.js");
 /*
@@ -14355,7 +15032,7 @@ __webpack_require__.r(__webpack_exports__);
     _Extensions_VersionCheck__WEBPACK_IMPORTED_MODULE_9__.versionCheckPlugin,
     _Extensions_NotebookFooter__WEBPACK_IMPORTED_MODULE_10__["default"],
     _Extensions_AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_11__["default"],
-    _Extensions_MitoThemeLight__WEBPACK_IMPORTED_MODULE_12__["default"],
+    _Extensions_MitoThemes__WEBPACK_IMPORTED_MODULE_12__["default"],
     _Extensions_ChartWizard_ChartWizardPlugin__WEBPACK_IMPORTED_MODULE_13__["default"]
 ]);
 
@@ -14370,6 +15047,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 +15212,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 +15221,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 +16718,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 +16737,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 +18693,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 +20573,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 +21983,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 +22002,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 +22073,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___);
 
@@ -21870,12 +22722,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .model-option:hover {
   background-color: var(--jp-layout-color2);
-  color: var(--purple-700);
 }
 
 .model-option.selected {
   background-color: var(--jp-layout-color2);
-  color: var(--purple-700);
+  color: var(--jp-brand-color2);
 }
 
 /* When inside chat-controls - ensure proper alignment with other controls */
@@ -22031,7 +22882,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .model-tooltip-bullet-item:last-child {
   margin-bottom: 0;
-}`, "",{"version":3,"sources":["webpack://./style/ModelSelector.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF,4DAA4D;;AAE5D;EACE,kBAAkB;EAClB,cAAc;EACd,aAAa;EACb,YAAY,EAAE,mCAAmC;EACjD,aAAa;EACb,mBAAmB,EAAE,sBAAsB;EAC3C,+BAA+B;AACjC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,kBAAkB;EAClB,YAAY,EAAE,yCAAyC;EACvD,kBAAkB;EAClB,eAAe;EACf,aAAa;EACb,mBAAmB,EAAE,0CAA0C;EAC/D,kBAAkB;EAClB,eAAe;AACjB;;;AAGA;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,WAAW;EACX,YAAY;EACZ,cAAc;EACd,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE,cAAc;EACd,0BAA0B;EAC1B,gBAAgB;EAChB,cAAc,EAAE,iCAAiC;AACnD;;AAEA,2BAA2B;AAC3B;EACE,kBAAkB;EAClB,YAAY;EACZ,iBAAiB;EACjB,gBAAgB;EAChB,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,kBAAkB;EAClB,yCAAyC;EACzC,aAAa;EACb,WAAW;AACb;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,mCAAmC;EACnC,oCAAoC;EACpC,eAAe;EACf,iCAAiC;EACjC,mBAAmB;EACnB,0BAA0B;EAC1B,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,QAAQ;AACV;;AAEA;EACE,OAAO;EACP,YAAY;EACZ,gBAAgB;EAChB,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,cAAc;EACd,YAAY;AACd;;AAEA;EACE,yCAAyC;EACzC,wBAAwB;AAC1B;;AAEA;EACE,yCAAyC;EACzC,wBAAwB;AAC1B;;AAEA,4EAA4E;AAC5E;EACE,YAAY;EACZ,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,YAAY;EACZ,kBAAkB;AACpB;;AAEA,iDAAiD;AACjD;EACE,aAAa;EACb,wCAAwC;AAC1C;;AAEA;EACE,qBAAqB;EACrB,gBAAgB;EAChB,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA,qDAAqD;AACrD;EACE,aAAa;AACf;;AAEA;EACE,eAAe;AACjB;;AAEA,2CAA2C;AAC3C;;EAEE,uEAAuE;EACvE;IACE,WAAW;EACb;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,aAAa;EACf;AACF;;AAEA,8EAA8E;AAC9E;EACE,eAAe;EACf,8BAA8B;EAC9B,gCAAgC;EAChC,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,aAAa;EACb,yCAAyC;EACzC,cAAc,EAAE,kDAAkD;EAClE,YAAY;EACZ,oBAAoB,EAAE,+CAA+C;AACvE;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,SAAS;AACX;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,QAAQ;AACV;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;AACV;;AAEA;EACE,cAAc;EACd,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,cAAc;AAChB;;AAEA;EACE,eAAe;EACf,gBAAgB;EAChB,oCAAoC;EACpC,gBAAgB;AAClB;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,aAAa;EACb,QAAQ;AACV;;AAEA;EACE,oCAAoC;EACpC,gBAAgB;AAClB;;AAEA;EACE,oCAAoC;EACpC,gBAAgB;AAClB;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,QAAQ;AACV;;AAEA;EACE,eAAe;EACf,gBAAgB;EAChB,oCAAoC;EACpC,yBAAyB;EACzB,qBAAqB;AACvB;;AAEA;EACE,SAAS;EACT,kBAAkB;EAClB,qBAAqB;AACvB;;AAEA;EACE,eAAe;EACf,oCAAoC;EACpC,gBAAgB;EAChB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;AAClB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* ModelSelector.css - responsive design with compact mode */\n\n.model-selector {\n  position: relative;\n  flex: 0 0 auto;\n  margin: 0 8px;\n  height: 20px; /* Match height of other elements */\n  display: flex;\n  align-items: center; /* Center vertically */\n  color: var(--jp-ui-font-color2);\n}\n\n.model-selector:hover {\n  color: var(--jp-ui-font-color1);\n}\n\n.model-selector-dropdown {\n  position: relative;\n  height: 20px; /* Fixed height to match other elements */\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center; /* Ensure content is vertically centered */\n  width: min-content;\n  max-width: 18ch;\n}\n\n\n.selected-model {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  line-height: 1;\n}\n\n.dropdown-arrow {\n  font-size: 8px;\n  transition: transform 0.2s;\n  margin-left: 4px;\n  flex-shrink: 0; /* Prevent arrow from shrinking */\n}\n\n/* Model options dropdown */\n.model-options {\n  position: absolute;\n  bottom: 100%;\n  max-height: 180px;\n  overflow-y: auto;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  width: auto;\n}\n\n.model-option {\n  padding: 4px 8px;\n  font-size: 12px;\n  /* Keep this size for readability */\n  color: var(--jp-content-font-color1);\n  cursor: pointer;\n  transition: background-color 0.2s;\n  white-space: nowrap;\n  /* Prevent text wrapping */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.model-option-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-type-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.model-option:hover {\n  background-color: var(--jp-layout-color2);\n  color: var(--purple-700);\n}\n\n.model-option.selected {\n  background-color: var(--jp-layout-color2);\n  color: var(--purple-700);\n}\n\n/* When inside chat-controls - ensure proper alignment with other controls */\n.chat-controls .model-selector {\n  height: 20px;\n  display: flex;\n  align-items: center;\n}\n\n.chat-controls .model-selector-dropdown {\n  height: 20px;\n  align-self: center;\n}\n\n/* Ensure dropdown appears above other elements */\n.model-options {\n  z-index: 1010;\n  /* Higher z-index to ensure visibility */\n}\n\n.model-name {\n  display: inline-block;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: bottom;\n}\n\n/* On wider screens, show only the name of the model*/\n.model-icon {\n  display: none;\n}\n\n.model-name {\n  display: inline;\n}\n\n/* On compact screens, show only the icon */\n@container (max-width: 260px) {\n\n  /* Shift the dropdown to the left to help prevent right-edge overflow */\n  .model-options {\n    left: -40px;\n  }\n\n  .model-icon {\n    display: inline;\n  }\n\n  .model-name {\n    display: none;\n  }\n}\n\n/* Model tooltip - appears to the right of the dropdown, rendered via portal */\n.model-tooltip {\n  position: fixed;\n  top: var(--tooltip-top, 200px);\n  left: var(--tooltip-left, 200px);\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  padding: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  z-index: 10000; /* High z-index to appear above Jupyter notebook */\n  width: 280px;\n  pointer-events: none; /* Prevent tooltip from blocking mouse events */\n}\n\n.model-tooltip-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.model-tooltip-header {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.model-tooltip-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.model-tooltip-title-icon {\n  flex-shrink: 0;\n  opacity: 0.8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.model-tooltip-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  line-height: 1.2;\n}\n\n.model-tooltip-metadata {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 12px;\n  font-size: 11px;\n}\n\n.model-tooltip-metadata-item {\n  display: flex;\n  gap: 4px;\n}\n\n.model-tooltip-metadata-label {\n  color: var(--jp-content-font-color2);\n  font-weight: 500;\n}\n\n.model-tooltip-metadata-value {\n  color: var(--jp-content-font-color1);\n  font-weight: 600;\n}\n\n.model-tooltip-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.model-tooltip-section-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.model-tooltip-bullet-list {\n  margin: 0;\n  padding-left: 16px;\n  list-style-type: disc;\n}\n\n.model-tooltip-bullet-item {\n  font-size: 12px;\n  color: var(--jp-content-font-color2);\n  line-height: 1.5;\n  margin-bottom: 4px;\n}\n\n.model-tooltip-bullet-item:last-child {\n  margin-bottom: 0;\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./style/ModelSelector.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF,4DAA4D;;AAE5D;EACE,kBAAkB;EAClB,cAAc;EACd,aAAa;EACb,YAAY,EAAE,mCAAmC;EACjD,aAAa;EACb,mBAAmB,EAAE,sBAAsB;EAC3C,+BAA+B;AACjC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,kBAAkB;EAClB,YAAY,EAAE,yCAAyC;EACvD,kBAAkB;EAClB,eAAe;EACf,aAAa;EACb,mBAAmB,EAAE,0CAA0C;EAC/D,kBAAkB;EAClB,eAAe;AACjB;;;AAGA;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,WAAW;EACX,YAAY;EACZ,cAAc;EACd,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE,cAAc;EACd,0BAA0B;EAC1B,gBAAgB;EAChB,cAAc,EAAE,iCAAiC;AACnD;;AAEA,2BAA2B;AAC3B;EACE,kBAAkB;EAClB,YAAY;EACZ,iBAAiB;EACjB,gBAAgB;EAChB,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,kBAAkB;EAClB,yCAAyC;EACzC,aAAa;EACb,WAAW;AACb;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,mCAAmC;EACnC,oCAAoC;EACpC,eAAe;EACf,iCAAiC;EACjC,mBAAmB;EACnB,0BAA0B;EAC1B,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,QAAQ;AACV;;AAEA;EACE,OAAO;EACP,YAAY;EACZ,gBAAgB;EAChB,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,cAAc;EACd,YAAY;AACd;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,yCAAyC;EACzC,6BAA6B;AAC/B;;AAEA,4EAA4E;AAC5E;EACE,YAAY;EACZ,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,YAAY;EACZ,kBAAkB;AACpB;;AAEA,iDAAiD;AACjD;EACE,aAAa;EACb,wCAAwC;AAC1C;;AAEA;EACE,qBAAqB;EACrB,gBAAgB;EAChB,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA,qDAAqD;AACrD;EACE,aAAa;AACf;;AAEA;EACE,eAAe;AACjB;;AAEA,2CAA2C;AAC3C;;EAEE,uEAAuE;EACvE;IACE,WAAW;EACb;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,aAAa;EACf;AACF;;AAEA,8EAA8E;AAC9E;EACE,eAAe;EACf,8BAA8B;EAC9B,gCAAgC;EAChC,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,aAAa;EACb,yCAAyC;EACzC,cAAc,EAAE,kDAAkD;EAClE,YAAY;EACZ,oBAAoB,EAAE,+CAA+C;AACvE;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,SAAS;AACX;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,QAAQ;AACV;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;AACV;;AAEA;EACE,cAAc;EACd,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,cAAc;AAChB;;AAEA;EACE,eAAe;EACf,gBAAgB;EAChB,oCAAoC;EACpC,gBAAgB;AAClB;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,aAAa;EACb,QAAQ;AACV;;AAEA;EACE,oCAAoC;EACpC,gBAAgB;AAClB;;AAEA;EACE,oCAAoC;EACpC,gBAAgB;AAClB;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,QAAQ;AACV;;AAEA;EACE,eAAe;EACf,gBAAgB;EAChB,oCAAoC;EACpC,yBAAyB;EACzB,qBAAqB;AACvB;;AAEA;EACE,SAAS;EACT,kBAAkB;EAClB,qBAAqB;AACvB;;AAEA;EACE,eAAe;EACf,oCAAoC;EACpC,gBAAgB;EAChB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;AAClB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* ModelSelector.css - responsive design with compact mode */\n\n.model-selector {\n  position: relative;\n  flex: 0 0 auto;\n  margin: 0 8px;\n  height: 20px; /* Match height of other elements */\n  display: flex;\n  align-items: center; /* Center vertically */\n  color: var(--jp-ui-font-color2);\n}\n\n.model-selector:hover {\n  color: var(--jp-ui-font-color1);\n}\n\n.model-selector-dropdown {\n  position: relative;\n  height: 20px; /* Fixed height to match other elements */\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center; /* Ensure content is vertically centered */\n  width: min-content;\n  max-width: 18ch;\n}\n\n\n.selected-model {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  line-height: 1;\n}\n\n.dropdown-arrow {\n  font-size: 8px;\n  transition: transform 0.2s;\n  margin-left: 4px;\n  flex-shrink: 0; /* Prevent arrow from shrinking */\n}\n\n/* Model options dropdown */\n.model-options {\n  position: absolute;\n  bottom: 100%;\n  max-height: 180px;\n  overflow-y: auto;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  width: auto;\n}\n\n.model-option {\n  padding: 4px 8px;\n  font-size: 12px;\n  /* Keep this size for readability */\n  color: var(--jp-content-font-color1);\n  cursor: pointer;\n  transition: background-color 0.2s;\n  white-space: nowrap;\n  /* Prevent text wrapping */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.model-option-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-type-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.model-option:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.model-option.selected {\n  background-color: var(--jp-layout-color2);\n  color: var(--jp-brand-color2);\n}\n\n/* When inside chat-controls - ensure proper alignment with other controls */\n.chat-controls .model-selector {\n  height: 20px;\n  display: flex;\n  align-items: center;\n}\n\n.chat-controls .model-selector-dropdown {\n  height: 20px;\n  align-self: center;\n}\n\n/* Ensure dropdown appears above other elements */\n.model-options {\n  z-index: 1010;\n  /* Higher z-index to ensure visibility */\n}\n\n.model-name {\n  display: inline-block;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: bottom;\n}\n\n/* On wider screens, show only the name of the model*/\n.model-icon {\n  display: none;\n}\n\n.model-name {\n  display: inline;\n}\n\n/* On compact screens, show only the icon */\n@container (max-width: 260px) {\n\n  /* Shift the dropdown to the left to help prevent right-edge overflow */\n  .model-options {\n    left: -40px;\n  }\n\n  .model-icon {\n    display: inline;\n  }\n\n  .model-name {\n    display: none;\n  }\n}\n\n/* Model tooltip - appears to the right of the dropdown, rendered via portal */\n.model-tooltip {\n  position: fixed;\n  top: var(--tooltip-top, 200px);\n  left: var(--tooltip-left, 200px);\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  padding: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  z-index: 10000; /* High z-index to appear above Jupyter notebook */\n  width: 280px;\n  pointer-events: none; /* Prevent tooltip from blocking mouse events */\n}\n\n.model-tooltip-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.model-tooltip-header {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.model-tooltip-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.model-tooltip-title-icon {\n  flex-shrink: 0;\n  opacity: 0.8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.model-tooltip-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  line-height: 1.2;\n}\n\n.model-tooltip-metadata {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 12px;\n  font-size: 11px;\n}\n\n.model-tooltip-metadata-item {\n  display: flex;\n  gap: 4px;\n}\n\n.model-tooltip-metadata-label {\n  color: var(--jp-content-font-color2);\n  font-weight: 500;\n}\n\n.model-tooltip-metadata-value {\n  color: var(--jp-content-font-color1);\n  font-weight: 600;\n}\n\n.model-tooltip-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.model-tooltip-section-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.model-tooltip-bullet-list {\n  margin: 0;\n  padding-left: 16px;\n  list-style-type: disc;\n}\n\n.model-tooltip-bullet-item {\n  font-size: 12px;\n  color: var(--jp-content-font-color2);\n  line-height: 1.5;\n  margin-bottom: 4px;\n}\n\n.model-tooltip-bullet-item:last-child {\n  margin-bottom: 0;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -22980,8 +23831,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   width: 100%;
   border-radius: 4px;
   overflow: hidden;
-  background-color: var(--blue-300);
-  border: 0.5px solid var(--blue-900);
+  /* Theme-aware button colors set by Mito palettes */
+  background-color: var(--mito-theme-button-background, var(--blue-300));
+  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));
+  transition: all 0.15s ease;
+}
+
+.mito-run-cell-button-group:hover {
+  background-color: var(--mito-theme-button-hover-background, var(--blue-400));
 }
 
 /* Shared button styles */
@@ -22992,7 +23849,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   padding: 0;
   border-radius: 0;
   cursor: pointer;
-  color: var(--blue-900);
+  /* Theme-aware text color */
+  color: var(--mito-theme-button-text, var(--blue-900));
   font-size: 13px;
   font-weight: 400;
   transition: background-color 0.15s ease;
@@ -23001,7 +23859,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 }
 
 .mito-run-cell-button:hover {
-  background-color: var(--blue-400);
+  background-color: transparent;
 }
 
 /* Main button (left side - play icon + text) */
@@ -23018,8 +23876,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   background: linear-gradient(
     to bottom,
     transparent,
-    var(--blue-900) 20%,
-    var(--blue-900) 80%,
+    var(--mito-theme-button-border, var(--blue-900)) 20%,
+    var(--mito-theme-button-border, var(--blue-900)) 80%,
     transparent
   );
   opacity: 0.4;
@@ -23037,8 +23895,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 /* Play icon styling */
 .mito-run-cell-button-main > svg {
-  color: var(--blue-900);
-  fill: var(--blue-900);
+  color: var(--mito-theme-button-text, var(--blue-900));
+  fill: var(--mito-theme-button-text, var(--blue-900));
   width: 12px;
   height: 12px;
   flex-shrink: 0;
@@ -23048,7 +23906,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 .mito-run-cell-button-dropdown svg {
   width: 14px;
   height: 14px;
-  color: var(--blue-900);
+  color: var(--mito-theme-button-text, var(--blue-900));
 }
 
 /* Ensure chevron path only uses stroke, not fill */
@@ -23059,6 +23917,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .mito-run-cell-button-text {
   white-space: nowrap;
+  color: var(--mito-theme-button-text, var(--blue-900));
 }
 
 /* Running state - applied to the group */
@@ -23196,7 +24055,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 .jp-Notebook-toolbar {
   display: flex;
   align-items: center;
-}`, "",{"version":3,"sources":["webpack://./style/RunCellButton.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,cAAc;EACd,YAAY;AACd;;AAEA,yCAAyC;AACzC;EACE,aAAa;EACb,mBAAmB;EACnB,oCAAoC;EACpC,WAAW;EACX,kBAAkB;EAClB,gBAAgB;EAChB,iCAAiC;EACjC,mCAAmC;AACrC;;AAEA,yBAAyB;AACzB;EACE,aAAa;EACb,mBAAmB;EACnB,YAAY;EACZ,UAAU;EACV,gBAAgB;EAChB,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,gBAAgB;EAChB,uCAAuC;EACvC,YAAY;EACZ,6BAA6B;AAC/B;;AAEA;EACE,iCAAiC;AACnC;;AAEA,+CAA+C;AAC/C;EACE,OAAO;EACP,QAAQ;EACR,eAAe;AACjB;;AAEA,4BAA4B;AAC5B;EACE,UAAU;EACV,YAAY;EACZ;;;;;;GAMC;EACD,YAAY;EACZ,cAAc;AAChB;;AAEA,2CAA2C;AAC3C;EACE,cAAc;EACd,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,gBAAgB;AAClB;;AAEA,sBAAsB;AACtB;EACE,sBAAsB;EACtB,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,cAAc;AAChB;;AAEA,oBAAoB;AACpB;EACE,WAAW;EACX,YAAY;EACZ,sBAAsB;AACxB;;AAEA,mDAAmD;AACnD;EACE,UAAU;EACV,oBAAoB;AACtB;;AAEA;EACE,mBAAmB;AACrB;;AAEA,yCAAyC;AACzC;EACE,8BAA8B;AAChC;;AAEA;;EAEE,kCAAkC;EAClC,uBAAuB;AACzB;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE;;;;;;GAMC;EACD,YAAY;AACd;;AAEA,uCAAuC;AACvC;EACE,uBAAuB;EACvB,sBAAsB;EACtB,WAAW;EACX,YAAY;AACd;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,wCAAwC;EACxC,gBAAgB;EAChB,mBAAmB;EACnB,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,0BAA0B;EAC1B,eAAe;EACf,gBAAgB;EAChB,+BAA+B;EAC/B,yBAAyB;EACzB,qBAAqB;AACvB;;AAEA;EACE,WAAW;EACX,yCAAyC;EACzC,aAAa;AACf;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,+BAA+B;EAC/B,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,QAAQ;AACV;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW,EAAE,mCAAmC;EAChD,YAAY;EACZ,cAAc;EACd,+BAA+B;EAC/B,cAAc,EAAE,kDAAkD;AACpE;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,cAAc,EAAE,0BAA0B;EAC1C,cAAc,EAAE,qDAAqD;EACrE,+BAA+B;AACjC;;AAEA;EACE,OAAO;AACT;;AAEA;EACE,+BAA+B;EAC/B,eAAe;EACf,iBAAiB;EACjB,YAAY;AACd;;AAEA,gEAAgE;AAChE;EACE,iBAAiB;EACjB,WAAW,EAAE,2BAA2B;AAC1C;;AAEA,qDAAqD;AACrD;EACE,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.mito-run-cell-button-container {\n  position: relative;\n  display: block;\n  width: 160px;\n}\n\n/* Button group - contains both buttons */\n.mito-run-cell-button-group {\n  display: flex;\n  align-items: center;\n  height: var(--toolbar-button-height);\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  background-color: var(--blue-300);\n  border: 0.5px solid var(--blue-900);\n}\n\n/* Shared button styles */\n.mito-run-cell-button {\n  display: flex;\n  align-items: center;\n  border: none;\n  padding: 0;\n  border-radius: 0;\n  cursor: pointer;\n  color: var(--blue-900);\n  font-size: 13px;\n  font-weight: 400;\n  transition: background-color 0.15s ease;\n  height: 100%;\n  background-color: transparent;\n}\n\n.mito-run-cell-button:hover {\n  background-color: var(--blue-400);\n}\n\n/* Main button (left side - play icon + text) */\n.mito-run-cell-button-main {\n  flex: 1;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n/* Divider between buttons */\n.mito-run-cell-button-divider {\n  width: 1px;\n  height: 14px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--blue-900) 20%,\n    var(--blue-900) 80%,\n    transparent\n  );\n  opacity: 0.4;\n  flex-shrink: 0;\n}\n\n/* Dropdown button (right side - chevron) */\n.mito-run-cell-button-dropdown {\n  padding: 0 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0;\n}\n\n/* Play icon styling */\n.mito-run-cell-button-main > svg {\n  color: var(--blue-900);\n  fill: var(--blue-900);\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n}\n\n/* Chevron styling */\n.mito-run-cell-button-dropdown svg {\n  width: 14px;\n  height: 14px;\n  color: var(--blue-900);\n}\n\n/* Ensure chevron path only uses stroke, not fill */\n.mito-run-cell-button-dropdown svg path {\n  fill: none;\n  stroke: currentColor;\n}\n\n.mito-run-cell-button-text {\n  white-space: nowrap;\n}\n\n/* Running state - applied to the group */\n.mito-run-cell-button-running {\n  border-color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button,\n.mito-run-cell-button-running .mito-run-cell-button-dropdown {\n  background-color: var(--green-300);\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown:hover {\n  background-color: var(--green-500);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-divider {\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--green-900) 20%,\n    var(--green-900) 80%,\n    transparent\n  );\n  opacity: 0.5;\n}\n\n/* LoadingCircle styling when running */\n.mito-run-cell-button-running .mito-run-cell-button-main > svg {\n  color: var(--green-900);\n  fill: var(--green-900);\n  width: 16px;\n  height: 16px;\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-text {\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown svg {\n  color: var(--green-900);\n}\n\n.mito-run-cell-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\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  min-width: 200px;\n  white-space: nowrap;\n  padding: 4px 0;\n}\n\n.mito-run-cell-dropdown-section {\n  display: flex;\n  flex-direction: column;\n}\n\n.mito-run-cell-dropdown-section-header {\n  padding: 6px 12px 4px 12px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-ui-font-color2);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mito-run-cell-dropdown-separator {\n  height: 1px;\n  background-color: var(--jp-layout-color2);\n  margin: 4px 0;\n}\n\n.mito-run-cell-dropdown-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 6px 12px;\n  text-align: left;\n  border: none;\n  background: none;\n  color: var(--jp-ui-font-color1);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 400;\n  gap: 8px;\n}\n\n.mito-run-cell-dropdown-item:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.mito-run-cell-dropdown-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px; /* Fixed width to align all icons */\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--jp-ui-font-color1);\n  line-height: 0; /* Remove extra line height for better alignment */\n}\n\n.mito-run-cell-dropdown-item-icon svg {\n  width: 16px;\n  height: 16px;\n  display: block; /* Remove inline spacing */\n  margin: 0 auto; /* Center the icon within the fixed width container */\n  color: var(--jp-ui-font-color1); \n}\n\n.mito-run-cell-dropdown-item-label {\n  flex: 1;\n}\n\n.mito-run-cell-dropdown-item-shortcut {\n  color: var(--jp-ui-font-color2);\n  font-size: 11px;\n  margin-left: 10px;\n  opacity: 0.7;\n}\n\n/* Position the button widget on the right side of the toolbar */\n.jp-Notebook-toolbar .mito-run-cell-button-widget {\n  margin-left: auto;\n  order: 9999; /* Ensure it appears last */\n}\n\n/* Ensure toolbar uses flexbox for proper alignment */\n.jp-Notebook-toolbar {\n  display: flex;\n  align-items: center;\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./style/RunCellButton.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,cAAc;EACd,YAAY;AACd;;AAEA,yCAAyC;AACzC;EACE,aAAa;EACb,mBAAmB;EACnB,oCAAoC;EACpC,WAAW;EACX,kBAAkB;EAClB,gBAAgB;EAChB,mDAAmD;EACnD,sEAAsE;EACtE,oEAAoE;EACpE,0BAA0B;AAC5B;;AAEA;EACE,4EAA4E;AAC9E;;AAEA,yBAAyB;AACzB;EACE,aAAa;EACb,mBAAmB;EACnB,YAAY;EACZ,UAAU;EACV,gBAAgB;EAChB,eAAe;EACf,2BAA2B;EAC3B,qDAAqD;EACrD,eAAe;EACf,gBAAgB;EAChB,uCAAuC;EACvC,YAAY;EACZ,6BAA6B;AAC/B;;AAEA;EACE,6BAA6B;AAC/B;;AAEA,+CAA+C;AAC/C;EACE,OAAO;EACP,QAAQ;EACR,eAAe;AACjB;;AAEA,4BAA4B;AAC5B;EACE,UAAU;EACV,YAAY;EACZ;;;;;;GAMC;EACD,YAAY;EACZ,cAAc;AAChB;;AAEA,2CAA2C;AAC3C;EACE,cAAc;EACd,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,gBAAgB;AAClB;;AAEA,sBAAsB;AACtB;EACE,qDAAqD;EACrD,oDAAoD;EACpD,WAAW;EACX,YAAY;EACZ,cAAc;AAChB;;AAEA,oBAAoB;AACpB;EACE,WAAW;EACX,YAAY;EACZ,qDAAqD;AACvD;;AAEA,mDAAmD;AACnD;EACE,UAAU;EACV,oBAAoB;AACtB;;AAEA;EACE,mBAAmB;EACnB,qDAAqD;AACvD;;AAEA,yCAAyC;AACzC;EACE,8BAA8B;AAChC;;AAEA;;EAEE,kCAAkC;EAClC,uBAAuB;AACzB;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE;;;;;;GAMC;EACD,YAAY;AACd;;AAEA,uCAAuC;AACvC;EACE,uBAAuB;EACvB,sBAAsB;EACtB,WAAW;EACX,YAAY;AACd;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,wCAAwC;EACxC,gBAAgB;EAChB,mBAAmB;EACnB,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,0BAA0B;EAC1B,eAAe;EACf,gBAAgB;EAChB,+BAA+B;EAC/B,yBAAyB;EACzB,qBAAqB;AACvB;;AAEA;EACE,WAAW;EACX,yCAAyC;EACzC,aAAa;AACf;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,+BAA+B;EAC/B,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,QAAQ;AACV;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW,EAAE,mCAAmC;EAChD,YAAY;EACZ,cAAc;EACd,+BAA+B;EAC/B,cAAc,EAAE,kDAAkD;AACpE;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,cAAc,EAAE,0BAA0B;EAC1C,cAAc,EAAE,qDAAqD;EACrE,+BAA+B;AACjC;;AAEA;EACE,OAAO;AACT;;AAEA;EACE,+BAA+B;EAC/B,eAAe;EACf,iBAAiB;EACjB,YAAY;AACd;;AAEA,gEAAgE;AAChE;EACE,iBAAiB;EACjB,WAAW,EAAE,2BAA2B;AAC1C;;AAEA,qDAAqD;AACrD;EACE,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.mito-run-cell-button-container {\n  position: relative;\n  display: block;\n  width: 160px;\n}\n\n/* Button group - contains both buttons */\n.mito-run-cell-button-group {\n  display: flex;\n  align-items: center;\n  height: var(--toolbar-button-height);\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  /* Theme-aware button colors set by Mito palettes */\n  background-color: var(--mito-theme-button-background, var(--blue-300));\n  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));\n  transition: all 0.15s ease;\n}\n\n.mito-run-cell-button-group:hover {\n  background-color: var(--mito-theme-button-hover-background, var(--blue-400));\n}\n\n/* Shared button styles */\n.mito-run-cell-button {\n  display: flex;\n  align-items: center;\n  border: none;\n  padding: 0;\n  border-radius: 0;\n  cursor: pointer;\n  /* Theme-aware text color */\n  color: var(--mito-theme-button-text, var(--blue-900));\n  font-size: 13px;\n  font-weight: 400;\n  transition: background-color 0.15s ease;\n  height: 100%;\n  background-color: transparent;\n}\n\n.mito-run-cell-button:hover {\n  background-color: transparent;\n}\n\n/* Main button (left side - play icon + text) */\n.mito-run-cell-button-main {\n  flex: 1;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n/* Divider between buttons */\n.mito-run-cell-button-divider {\n  width: 1px;\n  height: 14px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--mito-theme-button-border, var(--blue-900)) 20%,\n    var(--mito-theme-button-border, var(--blue-900)) 80%,\n    transparent\n  );\n  opacity: 0.4;\n  flex-shrink: 0;\n}\n\n/* Dropdown button (right side - chevron) */\n.mito-run-cell-button-dropdown {\n  padding: 0 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0;\n}\n\n/* Play icon styling */\n.mito-run-cell-button-main > svg {\n  color: var(--mito-theme-button-text, var(--blue-900));\n  fill: var(--mito-theme-button-text, var(--blue-900));\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n}\n\n/* Chevron styling */\n.mito-run-cell-button-dropdown svg {\n  width: 14px;\n  height: 14px;\n  color: var(--mito-theme-button-text, var(--blue-900));\n}\n\n/* Ensure chevron path only uses stroke, not fill */\n.mito-run-cell-button-dropdown svg path {\n  fill: none;\n  stroke: currentColor;\n}\n\n.mito-run-cell-button-text {\n  white-space: nowrap;\n  color: var(--mito-theme-button-text, var(--blue-900));\n}\n\n/* Running state - applied to the group */\n.mito-run-cell-button-running {\n  border-color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button,\n.mito-run-cell-button-running .mito-run-cell-button-dropdown {\n  background-color: var(--green-300);\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown:hover {\n  background-color: var(--green-500);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-divider {\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--green-900) 20%,\n    var(--green-900) 80%,\n    transparent\n  );\n  opacity: 0.5;\n}\n\n/* LoadingCircle styling when running */\n.mito-run-cell-button-running .mito-run-cell-button-main > svg {\n  color: var(--green-900);\n  fill: var(--green-900);\n  width: 16px;\n  height: 16px;\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-text {\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown svg {\n  color: var(--green-900);\n}\n\n.mito-run-cell-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\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  min-width: 200px;\n  white-space: nowrap;\n  padding: 4px 0;\n}\n\n.mito-run-cell-dropdown-section {\n  display: flex;\n  flex-direction: column;\n}\n\n.mito-run-cell-dropdown-section-header {\n  padding: 6px 12px 4px 12px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-ui-font-color2);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mito-run-cell-dropdown-separator {\n  height: 1px;\n  background-color: var(--jp-layout-color2);\n  margin: 4px 0;\n}\n\n.mito-run-cell-dropdown-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 6px 12px;\n  text-align: left;\n  border: none;\n  background: none;\n  color: var(--jp-ui-font-color1);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 400;\n  gap: 8px;\n}\n\n.mito-run-cell-dropdown-item:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.mito-run-cell-dropdown-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px; /* Fixed width to align all icons */\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--jp-ui-font-color1);\n  line-height: 0; /* Remove extra line height for better alignment */\n}\n\n.mito-run-cell-dropdown-item-icon svg {\n  width: 16px;\n  height: 16px;\n  display: block; /* Remove inline spacing */\n  margin: 0 auto; /* Center the icon within the fixed width container */\n  color: var(--jp-ui-font-color1); \n}\n\n.mito-run-cell-dropdown-item-label {\n  flex: 1;\n}\n\n.mito-run-cell-dropdown-item-shortcut {\n  color: var(--jp-ui-font-color2);\n  font-size: 11px;\n  margin-left: 10px;\n  opacity: 0.7;\n}\n\n/* Position the button widget on the right side of the toolbar */\n.jp-Notebook-toolbar .mito-run-cell-button-widget {\n  margin-left: auto;\n  order: 9999; /* Ensure it appears last */\n}\n\n/* Ensure toolbar uses flexbox for proper alignment */\n.jp-Notebook-toolbar {\n  display: flex;\n  align-items: center;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -24080,14 +24939,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 }
 
 .button-blue {
-  background-color: var(--blue-300);
-  color: var(--blue-900) !important;
-  border: 0.5px solid var(--blue-900);
+  /* Theme-aware button colors set by Mito palettes */
+  background-color: var(--mito-theme-button-background, var(--blue-300));
+  color: var(--mito-theme-button-text, var(--blue-900)) !important;
+  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));
   border-radius: 4px;
+  transition: all 0.15s ease;
 }
 
 .button-blue:hover {
-  background-color: var(--blue-400);
+  background-color: var(--mito-theme-button-hover-background, var(--blue-400));
 }
 
 .button-dark-purple {
@@ -24112,7 +24973,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   font-size: 12px;
   padding: 2px 5px;
 }
-`, "",{"version":3,"sources":["webpack://./style/button.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;;;;CAIC;;AAED;EACE,YAAY;EACZ,kBAAkB;EAClB,eAAe;EACf,eAAe;EACf,2EAA2E;EAC3E,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;AACtB;;AAEA;EACE,kCAAkC;EAClC,kCAAkC;AACpC;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE,gCAAgC;EAChC,gCAAgC;AAClC;;AAEA;EACE,gCAAgC;AAClC;;AAEA;EACE,yCAAyC;EACzC,+CAA+C;AACjD;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,mCAAmC;EACnC,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,iCAAiC;EACjC,iCAAiC;EACjC,mCAAmC;EACnC,kBAAkB;AACpB;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,mCAAmC;EACnC,8BAA8B;AAChC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,oCAAoC;EACpC,eAAe;EACf,gBAAgB;AAClB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* \n    Classes that can be used for any button, making it easier to keep \n    the theme consistent. For example, use them to make a textButton or\n    textAndIconButton green.\n*/\n\n.button-base {\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 14px;\n  /* Make sure the button grows large enough so that the text does not wrap */\n  white-space: nowrap;\n  padding: 5px 10px;\n}\n\n.button-base:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-green {\n  background-color: var(--green-400);\n  color: var(--green-900) !important;\n}\n\n.button-green:hover {\n  background-color: var(--green-500);\n}\n\n.button-red {\n  background-color: var(--red-400);\n  color: var(--red-900) !important;\n}\n\n.button-red:hover {\n  background-color: var(--red-500);\n}\n\n.button-gray {\n  background-color: var(--jp-layout-color2);\n  color: var(--jp-content-font-color1) !important;\n}\n\n.button-gray:hover {\n  background-color: var(--jp-layout-color3);\n}\n\n.button-purple {\n  background-color: var(--purple-300);\n  color: var(--purple-700) !important;\n}\n\n.button-purple:hover {\n  background-color: var(--purple-400);\n}\n\n.button-purple:disabled:hover {\n  background-color: var(--purple-300);\n}\n\n.button-blue {\n  background-color: var(--blue-300);\n  color: var(--blue-900) !important;\n  border: 0.5px solid var(--blue-900);\n  border-radius: 4px;\n}\n\n.button-blue:hover {\n  background-color: var(--blue-400);\n}\n\n.button-dark-purple {\n  background-color: var(--purple-500);\n  color: var(--white) !important;\n}\n\n.button-dark-purple:hover {\n  background-color: var(--purple-600);\n}\n\n.button-width-block {\n  width: 100%;\n}\n\n.button-width-fit-contents {\n  width: fit-content;\n}\n\n.button-small {\n  height: var(--toolbar-button-height);\n  font-size: 12px;\n  padding: 2px 5px;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./style/button.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;;;;CAIC;;AAED;EACE,YAAY;EACZ,kBAAkB;EAClB,eAAe;EACf,eAAe;EACf,2EAA2E;EAC3E,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;AACtB;;AAEA;EACE,kCAAkC;EAClC,kCAAkC;AACpC;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE,gCAAgC;EAChC,gCAAgC;AAClC;;AAEA;EACE,gCAAgC;AAClC;;AAEA;EACE,yCAAyC;EACzC,+CAA+C;AACjD;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,mCAAmC;EACnC,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,mDAAmD;EACnD,sEAAsE;EACtE,gEAAgE;EAChE,oEAAoE;EACpE,kBAAkB;EAClB,0BAA0B;AAC5B;;AAEA;EACE,4EAA4E;AAC9E;;AAEA;EACE,mCAAmC;EACnC,8BAA8B;AAChC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,oCAAoC;EACpC,eAAe;EACf,gBAAgB;AAClB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* \n    Classes that can be used for any button, making it easier to keep \n    the theme consistent. For example, use them to make a textButton or\n    textAndIconButton green.\n*/\n\n.button-base {\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 14px;\n  /* Make sure the button grows large enough so that the text does not wrap */\n  white-space: nowrap;\n  padding: 5px 10px;\n}\n\n.button-base:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-green {\n  background-color: var(--green-400);\n  color: var(--green-900) !important;\n}\n\n.button-green:hover {\n  background-color: var(--green-500);\n}\n\n.button-red {\n  background-color: var(--red-400);\n  color: var(--red-900) !important;\n}\n\n.button-red:hover {\n  background-color: var(--red-500);\n}\n\n.button-gray {\n  background-color: var(--jp-layout-color2);\n  color: var(--jp-content-font-color1) !important;\n}\n\n.button-gray:hover {\n  background-color: var(--jp-layout-color3);\n}\n\n.button-purple {\n  background-color: var(--purple-300);\n  color: var(--purple-700) !important;\n}\n\n.button-purple:hover {\n  background-color: var(--purple-400);\n}\n\n.button-purple:disabled:hover {\n  background-color: var(--purple-300);\n}\n\n.button-blue {\n  /* Theme-aware button colors set by Mito palettes */\n  background-color: var(--mito-theme-button-background, var(--blue-300));\n  color: var(--mito-theme-button-text, var(--blue-900)) !important;\n  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));\n  border-radius: 4px;\n  transition: all 0.15s ease;\n}\n\n.button-blue:hover {\n  background-color: var(--mito-theme-button-hover-background, var(--blue-400));\n}\n\n.button-dark-purple {\n  background-color: var(--purple-500);\n  color: var(--white) !important;\n}\n\n.button-dark-purple:hover {\n  background-color: var(--purple-600);\n}\n\n.button-width-block {\n  width: 100%;\n}\n\n.button-width-fit-contents {\n  width: fit-content;\n}\n\n.button-small {\n  height: var(--toolbar-button-height);\n  font-size: 12px;\n  padding: 2px 5px;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -24155,7 +25016,7 @@ module.exports = "<svg width=\"22\" height=\"17\" viewBox=\"0 0 22 17\" fill=\"n
   \********************************/
 /***/ ((module) => {
 
-module.exports = "<svg width=\"19\" height=\"20\" viewBox=\"0 0 19 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M15.0626 4.8125C15.5466 4.8125 15.9376 5.20352 15.9376 5.6875C15.9376 6.17148 15.5466 6.5625 15.0626 6.5625C14.5787 6.5625 14.1876 6.17148 14.1876 5.6875C14.1876 5.20352 14.5787 4.8125 15.0626 4.8125ZM12.0001 4.8125C12.4841 4.8125 12.8751 5.20352 12.8751 5.6875C12.8751 6.17148 12.4841 6.5625 12.0001 6.5625C11.5162 6.5625 11.1251 6.17148 11.1251 5.6875C11.1251 5.20352 11.5162 4.8125 12.0001 4.8125ZM8.93764 4.8125C9.42162 4.8125 9.81264 5.20352 9.81264 5.6875C9.81264 6.17148 9.42162 6.5625 8.93764 6.5625C8.45365 6.5625 8.06264 6.17148 8.06264 5.6875C8.06264 5.20352 8.45365 4.8125 8.93764 4.8125ZM12.0001 0C15.8665 0 19.0001 2.5457 19.0001 5.6875C19.0001 6.98906 18.456 8.18125 17.5537 9.14102C17.9611 10.2184 18.8087 11.1316 18.8224 11.1426C19.0029 11.334 19.0521 11.6129 18.9482 11.8535C18.8443 12.0941 18.6064 12.25 18.3439 12.25C16.6622 12.25 15.3361 11.5473 14.5404 10.984C13.7501 11.2328 12.897 11.375 12.0001 11.375C8.13373 11.375 5.00014 8.8293 5.00014 5.6875C5.00014 2.5457 8.13373 0 12.0001 0ZM12.0001 10.0625C12.7302 10.0625 13.4521 9.95039 14.1439 9.73164L14.7646 9.53477L15.2978 9.91211C15.6888 10.1883 16.2247 10.4973 16.8701 10.7051C16.6705 10.3742 16.4763 10.0023 16.3259 9.60586L16.0361 8.8375L16.5994 8.24141C17.0943 7.71367 17.6876 6.84141 17.6876 5.6875C17.6876 3.27578 15.1365 1.3125 12.0001 1.3125C8.86381 1.3125 6.31264 3.27578 6.31264 5.6875C6.31264 8.09922 8.86381 10.0625 12.0001 10.0625Z\" fill=\"var(--purple-600)\" class=\"jp-icon-selectable\"/>\n    <path d=\"M7 7C3.13359 7 0 9.5457 0 12.6875C0 14.0437 0.585156 15.2852 1.55859 16.2613C1.2168 17.6395 0.0738281 18.8672 0.0601563 18.8809C0 18.9438 -0.0164062 19.0367 0.0191406 19.1188C0.0546875 19.2008 0.13125 19.25 0.21875 19.25C2.03164 19.25 3.39063 18.3805 4.06328 17.8445C4.95742 18.1809 5.95 18.375 7 18.375C10.8664 18.375 14 15.8293 14 12.6875C14 9.5457 10.8664 7 7 7ZM3.5 13.5625C3.01602 13.5625 2.625 13.1715 2.625 12.6875C2.625 12.2035 3.01602 11.8125 3.5 11.8125C3.98398 11.8125 4.375 12.2035 4.375 12.6875C4.375 13.1715 3.98398 13.5625 3.5 13.5625ZM7 13.5625C6.51602 13.5625 6.125 13.1715 6.125 12.6875C6.125 12.2035 6.51602 11.8125 7 11.8125C7.48398 11.8125 7.875 12.2035 7.875 12.6875C7.875 13.1715 7.48398 13.5625 7 13.5625ZM10.5 13.5625C10.016 13.5625 9.625 13.1715 9.625 12.6875C9.625 12.2035 10.016 11.8125 10.5 11.8125C10.984 11.8125 11.375 12.2035 11.375 12.6875C11.375 13.1715 10.984 13.5625 10.5 13.5625Z\" fill=\"var(--purple-700)\" class=\"jp-icon-selectable\"/>\n</svg>\n";
+module.exports = "<svg width=\"19\" height=\"20\" viewBox=\"0 0 19 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M15.0626 4.8125C15.5466 4.8125 15.9376 5.20352 15.9376 5.6875C15.9376 6.17148 15.5466 6.5625 15.0626 6.5625C14.5787 6.5625 14.1876 6.17148 14.1876 5.6875C14.1876 5.20352 14.5787 4.8125 15.0626 4.8125ZM12.0001 4.8125C12.4841 4.8125 12.8751 5.20352 12.8751 5.6875C12.8751 6.17148 12.4841 6.5625 12.0001 6.5625C11.5162 6.5625 11.1251 6.17148 11.1251 5.6875C11.1251 5.20352 11.5162 4.8125 12.0001 4.8125ZM8.93764 4.8125C9.42162 4.8125 9.81264 5.20352 9.81264 5.6875C9.81264 6.17148 9.42162 6.5625 8.93764 6.5625C8.45365 6.5625 8.06264 6.17148 8.06264 5.6875C8.06264 5.20352 8.45365 4.8125 8.93764 4.8125ZM12.0001 0C15.8665 0 19.0001 2.5457 19.0001 5.6875C19.0001 6.98906 18.456 8.18125 17.5537 9.14102C17.9611 10.2184 18.8087 11.1316 18.8224 11.1426C19.0029 11.334 19.0521 11.6129 18.9482 11.8535C18.8443 12.0941 18.6064 12.25 18.3439 12.25C16.6622 12.25 15.3361 11.5473 14.5404 10.984C13.7501 11.2328 12.897 11.375 12.0001 11.375C8.13373 11.375 5.00014 8.8293 5.00014 5.6875C5.00014 2.5457 8.13373 0 12.0001 0ZM12.0001 10.0625C12.7302 10.0625 13.4521 9.95039 14.1439 9.73164L14.7646 9.53477L15.2978 9.91211C15.6888 10.1883 16.2247 10.4973 16.8701 10.7051C16.6705 10.3742 16.4763 10.0023 16.3259 9.60586L16.0361 8.8375L16.5994 8.24141C17.0943 7.71367 17.6876 6.84141 17.6876 5.6875C17.6876 3.27578 15.1365 1.3125 12.0001 1.3125C8.86381 1.3125 6.31264 3.27578 6.31264 5.6875C6.31264 8.09922 8.86381 10.0625 12.0001 10.0625Z\" fill=\"var(--jp-brand-color0)\" class=\"jp-icon-selectable\"/>\n    <path d=\"M7 7C3.13359 7 0 9.5457 0 12.6875C0 14.0437 0.585156 15.2852 1.55859 16.2613C1.2168 17.6395 0.0738281 18.8672 0.0601563 18.8809C0 18.9438 -0.0164062 19.0367 0.0191406 19.1188C0.0546875 19.2008 0.13125 19.25 0.21875 19.25C2.03164 19.25 3.39063 18.3805 4.06328 17.8445C4.95742 18.1809 5.95 18.375 7 18.375C10.8664 18.375 14 15.8293 14 12.6875C14 9.5457 10.8664 7 7 7ZM3.5 13.5625C3.01602 13.5625 2.625 13.1715 2.625 12.6875C2.625 12.2035 3.01602 11.8125 3.5 11.8125C3.98398 11.8125 4.375 12.2035 4.375 12.6875C4.375 13.1715 3.98398 13.5625 3.5 13.5625ZM7 13.5625C6.51602 13.5625 6.125 13.1715 6.125 12.6875C6.125 12.2035 6.51602 11.8125 7 11.8125C7.48398 11.8125 7.875 12.2035 7.875 12.6875C7.875 13.1715 7.48398 13.5625 7 13.5625ZM10.5 13.5625C10.016 13.5625 9.625 13.1715 9.625 12.6875C9.625 12.2035 10.016 11.8125 10.5 11.8125C10.984 11.8125 11.375 12.2035 11.375 12.6875C11.375 13.1715 10.984 13.5625 10.5 13.5625Z\" fill=\"var(--jp-brand-color1)\" class=\"jp-icon-selectable\"/>\n</svg>\n";
 
 /***/ }),
 
@@ -24207,6 +25068,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 +27609,4 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
 /***/ })
 
 }]);
-//# sourceMappingURL=lib_index_js.9d26322f3e78beb2b666.js.map
+//# sourceMappingURL=lib_index_js.44c109c7be36fb884d25.js.map