mito-ai 0.1.46__py3-none-any.whl → 0.1.48__py3-none-any.whl

mito_ai-0.1.46.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.20f12766ecd3d430568e.js → mito_ai-0.1.48.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.5c7d84a45ddeb5704b61.js

@@ -17,15 +17,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @jupyterlab/notebook */ "webpack/sharing/consume/default/@jupyterlab/notebook");
 /* harmony import */ var _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _ChatWidget__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./ChatWidget */ "./lib/Extensions/AiChat/ChatWidget.js");
+/* harmony import */ var _ChatWidget__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ChatWidget */ "./lib/Extensions/AiChat/ChatWidget.js");
 /* harmony import */ var _jupyterlab_rendermime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @jupyterlab/rendermime */ "webpack/sharing/consume/default/@jupyterlab/rendermime");
 /* harmony import */ var _jupyterlab_rendermime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_rendermime__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _commands__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../commands */ "./lib/commands.js");
-/* harmony import */ var _token__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./token */ "./lib/Extensions/AiChat/token.js");
+/* harmony import */ var _commands__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../commands */ "./lib/commands.js");
+/* harmony import */ var _token__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./token */ "./lib/Extensions/AiChat/token.js");
 /* harmony import */ var _ContextManager_ContextManagerPlugin__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../ContextManager/ContextManagerPlugin */ "./lib/Extensions/ContextManager/ContextManagerPlugin.js");
+/* harmony import */ var _AppPreview_StreamlitPreviewPlugin__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../AppPreview/StreamlitPreviewPlugin */ "./lib/Extensions/AppPreview/StreamlitPreviewPlugin.js");
 /* harmony import */ var _jupyterlab_settingregistry__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @jupyterlab/settingregistry */ "webpack/sharing/consume/default/@jupyterlab/settingregistry");
 /* harmony import */ var _jupyterlab_settingregistry__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_settingregistry__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _jupyterSettingsManager__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./jupyterSettingsManager */ "./lib/Extensions/AiChat/jupyterSettingsManager.js");
+/* harmony import */ var _jupyterSettingsManager__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./jupyterSettingsManager */ "./lib/Extensions/AiChat/jupyterSettingsManager.js");
 /* harmony import */ var _jupyterlab_docmanager__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @jupyterlab/docmanager */ "webpack/sharing/consume/default/@jupyterlab/docmanager");
 /* harmony import */ var _jupyterlab_docmanager__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_docmanager__WEBPACK_IMPORTED_MODULE_5__);
 /*
@@ -43,6 +44,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // The Widget Rank determins where the ChatIcon is displayed
 // in the left hand toolbar
 const WIDGET_RANK = 2000;
@@ -59,22 +61,23 @@ const AiChatPlugin = {
         _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ICommandPalette,
         _jupyterlab_rendermime__WEBPACK_IMPORTED_MODULE_3__.IRenderMimeRegistry,
         _ContextManager_ContextManagerPlugin__WEBPACK_IMPORTED_MODULE_6__.IContextManager,
+        _AppPreview_StreamlitPreviewPlugin__WEBPACK_IMPORTED_MODULE_7__.IStreamlitPreviewManager,
         _jupyterlab_settingregistry__WEBPACK_IMPORTED_MODULE_4__.ISettingRegistry,
         _jupyterlab_docmanager__WEBPACK_IMPORTED_MODULE_5__.IDocumentManager
     ],
     optional: [_jupyterlab_application__WEBPACK_IMPORTED_MODULE_0__.ILayoutRestorer],
-    provides: _token__WEBPACK_IMPORTED_MODULE_7__.IChatTracker,
-    activate: (app, labShell, notebookTracker, palette, rendermime, contextManager, settingRegistry, documentManager, restorer) => {
+    provides: _token__WEBPACK_IMPORTED_MODULE_8__.IChatTracker,
+    activate: (app, labShell, notebookTracker, palette, rendermime, contextManager, streamlitPreviewManager, settingRegistry, documentManager, restorer) => {
         // Define a widget creator function,
         // then call it to make a new widget
         const newWidget = () => {
             // Create a blank content widget inside of a MainAreaWidget
-            const chatWidget = (0,_ChatWidget__WEBPACK_IMPORTED_MODULE_8__.buildChatWidget)(app, notebookTracker, rendermime, contextManager);
+            const chatWidget = (0,_ChatWidget__WEBPACK_IMPORTED_MODULE_9__.buildChatWidget)(app, notebookTracker, rendermime, contextManager, streamlitPreviewManager);
             return chatWidget;
         };
         let widget = newWidget();
         // Add an application command
-        app.commands.addCommand(_commands__WEBPACK_IMPORTED_MODULE_9__.COMMAND_MITO_AI_OPEN_CHAT, {
+        app.commands.addCommand(_commands__WEBPACK_IMPORTED_MODULE_10__.COMMAND_MITO_AI_OPEN_CHAT, {
             label: 'Your friendly Python Expert chat bot',
             execute: (args) => {
                 // In order for the widget to be accessible, the widget must be:
@@ -108,14 +111,14 @@ const AiChatPlugin = {
             }
         });
         app.commands.addKeyBinding({
-            command: _commands__WEBPACK_IMPORTED_MODULE_9__.COMMAND_MITO_AI_OPEN_CHAT,
+            command: _commands__WEBPACK_IMPORTED_MODULE_10__.COMMAND_MITO_AI_OPEN_CHAT,
             keys: ['Accel E'],
             selector: 'body'
         });
         app.shell.add(widget, 'left', { rank: WIDGET_RANK });
         // Add the command to the palette.
         palette.addItem({
-            command: _commands__WEBPACK_IMPORTED_MODULE_9__.COMMAND_MITO_AI_OPEN_CHAT,
+            command: _commands__WEBPACK_IMPORTED_MODULE_10__.COMMAND_MITO_AI_OPEN_CHAT,
             category: 'AI Chat'
         });
         // Track and restore the widget state
@@ -139,8 +142,8 @@ const AiChatPlugin = {
             labShell.activateById(widget.id);
         });
         // Update jupyter settings to work best with mito-ai
-        void (0,_jupyterSettingsManager__WEBPACK_IMPORTED_MODULE_10__.setRenameUntitledFileOnSave)(settingRegistry, documentManager);
-        void (0,_jupyterSettingsManager__WEBPACK_IMPORTED_MODULE_10__.setDefaultWindowingMode)(settingRegistry);
+        void (0,_jupyterSettingsManager__WEBPACK_IMPORTED_MODULE_11__.setRenameUntitledFileOnSave)(settingRegistry, documentManager);
+        void (0,_jupyterSettingsManager__WEBPACK_IMPORTED_MODULE_11__.setDefaultWindowingMode)(settingRegistry);
         // By returning a tracker token, we can require the token in other 
         // plugins. This allows us to force plugin load order. For example, 
         // we can ensure that the COMMAND_MITO_AI_OPEN_CHAT is created 
@@ -184,7 +187,7 @@ const CTACarousel = ({ app }) => {
             content: (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null,
                 "Generate more than just Python code. Talk to your database, no SQL required.",
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null),
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "button-base button-gray cta-carousel-button", onClick: () => app.commands.execute(_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_2__.COMMAND_MITO_AI_SETTINGS), "data-testid": "cta-carousel-button" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "button-base button-gray cta-carousel-button", onClick: () => app.commands.execute(_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_2__.COMMAND_MITO_AI_SETTINGS_DATABASE), "data-testid": "cta-carousel-button" },
                     react__WEBPACK_IMPORTED_MODULE_0___default().createElement("b", null, "\uFF0B Add Database"))))
         },
         {
@@ -242,7 +245,7 @@ __webpack_require__.r(__webpack_exports__);
     Whenever, the chatHistoryManager is updated, it should automatically send a message to the AI.
 */
 class ChatHistoryManager {
-    constructor(contextManager, notebookTracker, initialHistory) {
+    constructor(contextManager, notebookTracker, app, streamlitPreviewManager, initialHistory) {
         this._allAssumptions = new Set();
         this.getLastAIMessageIndex = () => {
             // We assume that assistant messages are always separated by user messages.
@@ -271,9 +274,17 @@ class ChatHistoryManager {
         this.contextManager = contextManager;
         // Save the notebook tracker
         this.notebookTracker = notebookTracker;
+        // Save the app
+        this.app = app;
+        // Save the streamlit preview service
+        this.streamlitPreviewManager = streamlitPreviewManager;
         // Initialize assumptions from existing history
         this.initializeAssumptionsFromHistory();
     }
+    checkIfStreamlitAppIsOpen() {
+        // Use the service to check if there's an active preview
+        return this.streamlitPreviewManager.hasActivePreview();
+    }
     initializeAssumptionsFromHistory() {
         this._allAssumptions.clear();
         this.displayOptimizedChatHistory.forEach(item => {
@@ -303,7 +314,7 @@ class ChatHistoryManager {
         };
     }
     createDuplicateChatHistoryManager() {
-        const duplicateManager = new ChatHistoryManager(this.contextManager, this.notebookTracker, this.displayOptimizedChatHistory);
+        const duplicateManager = new ChatHistoryManager(this.contextManager, this.notebookTracker, this.app, this.streamlitPreviewManager, this.displayOptimizedChatHistory);
         // Copy the assumptions set to the duplicate
         duplicateManager._allAssumptions = new Set(this._allAssumptions);
         return duplicateManager;
@@ -346,15 +357,18 @@ class ChatHistoryManager {
     addAgentExecutionMessage(activeThreadId, notebookPanel, input, additionalContext) {
         const aiOptimizedCells = (0,_utils_notebook__WEBPACK_IMPORTED_MODULE_1__.getAIOptimizedCellsInNotebookPanel)(notebookPanel);
         const notebookContext = this.contextManager.getNotebookContext(notebookPanel.id);
+        const streamlitAppIsOpen = this.checkIfStreamlitAppIsOpen();
         const agentExecutionMetadata = {
             promptType: 'agent:execution',
+            activeCellId: (0,_utils_notebook__WEBPACK_IMPORTED_MODULE_1__.getActiveCellIDInNotebookPanel)(notebookPanel) || '',
             variables: (notebookContext === null || notebookContext === void 0 ? void 0 : notebookContext.variables) || [],
             files: (notebookContext === null || notebookContext === void 0 ? void 0 : notebookContext.files) || [],
             aiOptimizedCells: aiOptimizedCells,
             input: input || '',
             threadId: activeThreadId,
             isChromeBrowser: (0,_utils_user__WEBPACK_IMPORTED_MODULE_2__.isChromeBasedBrowser)(),
-            additionalContext: additionalContext
+            additionalContext: additionalContext,
+            streamlitAppIsOpen: streamlitAppIsOpen
         };
         // We use this function in two ways: 
         // 1. When the user sends the original agent:execution message to start the agent
@@ -1009,15 +1023,16 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _utils_classNames__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/classNames */ "./lib/utils/classNames.js");
-/* harmony import */ var _ChatDropdown__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ChatDropdown */ "./lib/Extensions/AiChat/ChatMessage/ChatDropdown.js");
+/* harmony import */ var _utils_classNames__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../utils/classNames */ "./lib/utils/classNames.js");
+/* harmony import */ var _ChatDropdown__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ChatDropdown */ "./lib/Extensions/AiChat/ChatMessage/ChatDropdown.js");
 /* harmony import */ var _utils_notebook__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/notebook */ "./lib/utils/notebook.js");
 /* harmony import */ var _style_ChatInput_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../style/ChatInput.css */ "./style/ChatInput.css");
 /* harmony import */ var _style_ChatDropdown_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../style/ChatDropdown.css */ "./style/ChatDropdown.css");
-/* harmony import */ var _hooks_useDebouncedFunction__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../hooks/useDebouncedFunction */ "./lib/hooks/useDebouncedFunction.js");
-/* harmony import */ var _components_SelectedContextContainer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../components/SelectedContextContainer */ "./lib/components/SelectedContextContainer.js");
-/* harmony import */ var _components_AttachFileButton__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../components/AttachFileButton */ "./lib/components/AttachFileButton.js");
-/* harmony import */ var _components_DatabaseButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../components/DatabaseButton */ "./lib/components/DatabaseButton.js");
+/* harmony import */ var _hooks_useDebouncedFunction__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../hooks/useDebouncedFunction */ "./lib/hooks/useDebouncedFunction.js");
+/* harmony import */ var _components_SelectedContextContainer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../components/SelectedContextContainer */ "./lib/components/SelectedContextContainer.js");
+/* harmony import */ var _components_AttachFileButton__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../components/AttachFileButton */ "./lib/components/AttachFileButton.js");
+/* harmony import */ var _components_DatabaseButton__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../components/DatabaseButton */ "./lib/components/DatabaseButton.js");
+/* harmony import */ var _utils_fileUpload__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/fileUpload */ "./lib/utils/fileUpload.js");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -1032,6 +1047,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 const ChatInput = ({ app, initialContent, onSave, onCancel, isEditing, contextManager, notebookTracker, agentModeEnabled = false, agentExecutionStatus = 'idle', operatingSystem = 'mac', displayOptimizedChatHistoryLength = 0, agentTargetNotebookPanelRef, isSignedUp = true, }) => {
     var _a;
     const [input, setInput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialContent);
@@ -1042,6 +1058,8 @@ const ChatInput = ({ app, initialContent, onSave, onCancel, isEditing, contextMa
     const [dropdownFilter, setDropdownFilter] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
     const [additionalContext, setAdditionalContext] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
     const [isDropdownFromButton, setIsDropdownFromButton] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    const [isDragOver, setIsDragOver] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    const [isUploading, setIsUploading] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     const handleFileUpload = (file) => {
         let uploadType;
         if (file.type.startsWith('image/')) {
@@ -1062,9 +1080,45 @@ const ChatInput = ({ app, initialContent, onSave, onCancel, isEditing, contextMa
             }
         ]);
     };
+    // Drag and drop handlers
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Only show drag over state if not currently uploading
+        if (!isUploading) {
+            setIsDragOver(true);
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    };
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        const files = e.dataTransfer.files;
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (file && !isUploading) {
+                setIsUploading(true);
+                try {
+                    // Upload file to backend using the shared utility
+                    await (0,_utils_fileUpload__WEBPACK_IMPORTED_MODULE_4__.uploadFileToBackend)(file, notebookTracker, handleFileUpload);
+                }
+                catch (error) {
+                    // Error handling is already done in the utility function
+                }
+                finally {
+                    setIsUploading(false);
+                }
+            }
+        }
+    };
     // Debounce the active cell ID change to avoid multiple rerenders. 
     // We use this to avoid a flickering screen when the active cell changes. 
-    const debouncedSetActiveCellID = (0,_hooks_useDebouncedFunction__WEBPACK_IMPORTED_MODULE_4__.useDebouncedFunction)((newID) => {
+    const debouncedSetActiveCellID = (0,_hooks_useDebouncedFunction__WEBPACK_IMPORTED_MODULE_5__.useDebouncedFunction)((newID) => {
         setActiveCellID(newID);
     }, 100);
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -1292,10 +1346,13 @@ const ChatInput = ({ app, initialContent, onSave, onCancel, isEditing, contextMa
             }
         }
     }, [agentModeEnabled, additionalContext, activeCellCode]);
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_5__.classNames)("chat-input-container", { "editing": isEditing }) },
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_6__.classNames)("chat-input-container", {
+            "editing": isEditing,
+            "drag-over": isDragOver
+        }), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: 'context-container' },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_DatabaseButton__WEBPACK_IMPORTED_MODULE_6__["default"], { app: app }),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AttachFileButton__WEBPACK_IMPORTED_MODULE_7__["default"], { onFileUploaded: handleFileUpload, notebookTracker: notebookTracker }),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_DatabaseButton__WEBPACK_IMPORTED_MODULE_7__["default"], { app: app }),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AttachFileButton__WEBPACK_IMPORTED_MODULE_8__["default"], { onFileUploaded: handleFileUpload, notebookTracker: notebookTracker }),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "context-button", onClick: () => {
                     var _a;
                     setDropdownVisible(true);
@@ -1303,9 +1360,9 @@ const ChatInput = ({ app, initialContent, onSave, onCancel, isEditing, contextMa
                     setIsDropdownFromButton(true);
                     (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 } }, "\uFF20 Add Context"),
-            additionalContext.map((context, index) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_SelectedContextContainer__WEBPACK_IMPORTED_MODULE_8__["default"], { key: `${context.type}-${context.value}-${index}`, title: context.display || context.value, type: context.type, onRemove: () => setAdditionalContext(additionalContext.filter((_, i) => i !== index)), notebookTracker: notebookTracker, activeCellID: activeCellID })))),
+            additionalContext.map((context, index) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_SelectedContextContainer__WEBPACK_IMPORTED_MODULE_9__["default"], { key: `${context.type}-${context.value}-${index}`, title: context.display || context.value, type: context.type, onRemove: () => setAdditionalContext(additionalContext.filter((_, i) => i !== index)), notebookTracker: notebookTracker, activeCellID: activeCellID })))),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: 'chat-input-text-area-container' },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { ref: textAreaRef, className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_5__.classNames)("message", "message-user", 'chat-input', { "agent-mode": agentModeEnabled }), placeholder: getPlaceholderText(), value: input, disabled: agentExecutionStatus === 'working' || agentExecutionStatus === 'stopping', onChange: handleInputChange, onKeyDown: (e) => {
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { ref: textAreaRef, className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_6__.classNames)("message", "message-user", 'chat-input', { "agent-mode": agentModeEnabled }), placeholder: getPlaceholderText(), value: input, disabled: agentExecutionStatus === 'working' || agentExecutionStatus === 'stopping', onChange: handleInputChange, onKeyDown: (e) => {
                     // If dropdown is visible, only handle escape to close it
                     if (isDropdownVisible) {
                         if (e.key === 'Escape') {
@@ -1332,7 +1389,7 @@ const ChatInput = ({ app, initialContent, onSave, onCancel, isEditing, contextMa
                         }
                     }
                 } }),
-            isDropdownVisible && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ChatDropdown__WEBPACK_IMPORTED_MODULE_9__["default"], { options: getExpandedVarialbes(), onSelect: handleOptionSelect, filterText: dropdownFilter, isDropdownFromButton: isDropdownFromButton, onFilterChange: setDropdownFilter, onClose: handleDropdownClose }))),
+            isDropdownVisible && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ChatDropdown__WEBPACK_IMPORTED_MODULE_10__["default"], { options: getExpandedVarialbes(), onSelect: handleOptionSelect, filterText: dropdownFilter, isDropdownFromButton: isDropdownFromButton, onFilterChange: setDropdownFilter, onClose: handleDropdownClose }))),
         isEditing &&
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "message-edit-buttons" },
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { onClick: () => onSave(input, undefined, mapAdditionalContext()) }, "Save"),
@@ -1374,6 +1431,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_AgentComponents_AssumptionToolUI__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../../components/AgentComponents/AssumptionToolUI */ "./lib/components/AgentComponents/AssumptionToolUI.js");
 /* harmony import */ var _components_SelectedContextContainer__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../components/SelectedContextContainer */ "./lib/components/SelectedContextContainer.js");
 /* harmony import */ var _components_AgentComponents_RunAllCellsToolUI__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../../components/AgentComponents/RunAllCellsToolUI */ "./lib/components/AgentComponents/RunAllCellsToolUI.js");
+/* harmony import */ var _components_AgentComponents_CreateStreamlitAppToolUI__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../../components/AgentComponents/CreateStreamlitAppToolUI */ "./lib/components/AgentComponents/CreateStreamlitAppToolUI.js");
+/* harmony import */ var _components_AgentComponents_EditStreamlitAppToolUI__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../../components/AgentComponents/EditStreamlitAppToolUI */ "./lib/components/AgentComponents/EditStreamlitAppToolUI.js");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -1396,6 +1455,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 
 
 const ChatMessage = ({ app, message, promptType, agentResponse, messageIndex, mitoAIConnectionError, mitoAIConnectionErrorType, notebookTracker, renderMimeRegistry, isLastAiMessage, isLastMessage, operatingSystem, previewAICode, acceptAICode, rejectAICode, onUpdateMessage, contextManager, codeReviewStatus, setNextSteps, agentModeEnabled, additionalContext, }) => {
@@ -1491,7 +1552,11 @@ const ChatMessage = ({ app, message, promptType, agentResponse, messageIndex, mi
         (agentResponse === null || agentResponse === void 0 ? void 0 : agentResponse.type) === 'get_cell_output' &&
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AgentComponents_GetCellOutputToolUI__WEBPACK_IMPORTED_MODULE_18__["default"], null),
         (agentResponse === null || agentResponse === void 0 ? void 0 : agentResponse.type) === 'run_all_cells' && agentModeEnabled &&
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AgentComponents_RunAllCellsToolUI__WEBPACK_IMPORTED_MODULE_19__["default"], null)));
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AgentComponents_RunAllCellsToolUI__WEBPACK_IMPORTED_MODULE_19__["default"], null),
+        (agentResponse === null || agentResponse === void 0 ? void 0 : agentResponse.type) === 'create_streamlit_app' && agentModeEnabled &&
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AgentComponents_CreateStreamlitAppToolUI__WEBPACK_IMPORTED_MODULE_20__["default"], { isRunning: isLastMessage }),
+        (agentResponse === null || agentResponse === void 0 ? void 0 : agentResponse.type) === 'edit_streamlit_app' && agentModeEnabled &&
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_AgentComponents_EditStreamlitAppToolUI__WEBPACK_IMPORTED_MODULE_21__["default"], { isRunning: isLastMessage })));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatMessage);
 
@@ -2028,16 +2093,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lumino_coreutils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @lumino/coreutils */ "webpack/sharing/consume/default/@lumino/coreutils");
 /* harmony import */ var _lumino_coreutils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_lumino_coreutils__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _commands__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../../commands */ "./lib/commands.js");
-/* harmony import */ var _components_AgentComponents_ErrorFixupToolUI__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../../components/AgentComponents/ErrorFixupToolUI */ "./lib/components/AgentComponents/ErrorFixupToolUI.js");
-/* harmony import */ var _components_DropdownMenu__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../../components/DropdownMenu */ "./lib/components/DropdownMenu.js");
+/* harmony import */ var _components_AgentComponents_ErrorFixupToolUI__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ../../components/AgentComponents/ErrorFixupToolUI */ "./lib/components/AgentComponents/ErrorFixupToolUI.js");
+/* harmony import */ var _components_DropdownMenu__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../../components/DropdownMenu */ "./lib/components/DropdownMenu.js");
 /* harmony import */ var _components_IconButton__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../../components/IconButton */ "./lib/components/IconButton.js");
-/* harmony import */ var _components_LoadingCircle__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../../components/LoadingCircle */ "./lib/components/LoadingCircle.js");
+/* harmony import */ var _components_LoadingCircle__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ../../components/LoadingCircle */ "./lib/components/LoadingCircle.js");
 /* harmony import */ var _components_ModelSelector__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../components/ModelSelector */ "./lib/components/ModelSelector.js");
-/* harmony import */ var _components_NextStepsPills__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../../components/NextStepsPills */ "./lib/components/NextStepsPills.js");
-/* harmony import */ var _components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../../components/TextAndIconButton */ "./lib/components/TextAndIconButton.js");
-/* harmony import */ var _components_ToggleButton__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../../components/ToggleButton */ "./lib/components/ToggleButton.js");
-/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ../../icons */ "./lib/icons/index.js");
-/* harmony import */ var _icons_UndoIcon__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ../../icons/UndoIcon */ "./lib/icons/UndoIcon.js");
+/* harmony import */ var _components_NextStepsPills__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../../components/NextStepsPills */ "./lib/components/NextStepsPills.js");
+/* harmony import */ var _components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ../../components/TextAndIconButton */ "./lib/components/TextAndIconButton.js");
+/* harmony import */ var _components_ToggleButton__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../../components/ToggleButton */ "./lib/components/ToggleButton.js");
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ../../icons */ "./lib/icons/index.js");
+/* harmony import */ var _icons_UndoIcon__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../../icons/UndoIcon */ "./lib/icons/UndoIcon.js");
 /* harmony import */ var _utils_agentActions__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../utils/agentActions */ "./lib/utils/agentActions.js");
 /* harmony import */ var _utils_classNames__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../utils/classNames */ "./lib/utils/classNames.js");
 /* harmony import */ var _utils_blacklistedWords__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../utils/blacklistedWords */ "./lib/utils/blacklistedWords.js");
@@ -2054,19 +2119,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_userSignupState__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../utils/userSignupState */ "./lib/utils/userSignupState.js");
 /* harmony import */ var _SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../SettingsManager/SettingsManagerPlugin */ "./lib/Extensions/SettingsManager/SettingsManagerPlugin.js");
 /* harmony import */ var _SettingsManager_profiler_ProfilerPage__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../SettingsManager/profiler/ProfilerPage */ "./lib/Extensions/SettingsManager/profiler/ProfilerPage.js");
-/* harmony import */ var _CTACarousel__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./CTACarousel */ "./lib/Extensions/AiChat/CTACarousel.js");
-/* harmony import */ var _SignUpForm__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./SignUpForm */ "./lib/Extensions/AiChat/SignUpForm.js");
+/* harmony import */ var _CTACarousel__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./CTACarousel */ "./lib/Extensions/AiChat/CTACarousel.js");
+/* harmony import */ var _UsageBadge__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./UsageBadge */ "./lib/Extensions/AiChat/UsageBadge.js");
+/* harmony import */ var _SignUpForm__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./SignUpForm */ "./lib/Extensions/AiChat/SignUpForm.js");
 /* harmony import */ var _CodeDiffDisplay__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./CodeDiffDisplay */ "./lib/Extensions/AiChat/CodeDiffDisplay.js");
 /* harmony import */ var _FirstMessage__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./FirstMessage */ "./lib/Extensions/AiChat/FirstMessage.js");
-/* harmony import */ var _ChatMessage_ChatInput__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./ChatMessage/ChatInput */ "./lib/Extensions/AiChat/ChatMessage/ChatInput.js");
-/* harmony import */ var _ChatMessage_ChatMessage__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./ChatMessage/ChatMessage */ "./lib/Extensions/AiChat/ChatMessage/ChatMessage.js");
-/* harmony import */ var _ChatMessage_RevertQuestionnaire__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./ChatMessage/RevertQuestionnaire */ "./lib/Extensions/AiChat/ChatMessage/RevertQuestionnaire.js");
-/* harmony import */ var _ChatMessage_ScrollableSuggestions__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./ChatMessage/ScrollableSuggestions */ "./lib/Extensions/AiChat/ChatMessage/ScrollableSuggestions.js");
+/* harmony import */ var _ChatMessage_ChatInput__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./ChatMessage/ChatInput */ "./lib/Extensions/AiChat/ChatMessage/ChatInput.js");
+/* harmony import */ var _ChatMessage_ChatMessage__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./ChatMessage/ChatMessage */ "./lib/Extensions/AiChat/ChatMessage/ChatMessage.js");
+/* harmony import */ var _ChatMessage_RevertQuestionnaire__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./ChatMessage/RevertQuestionnaire */ "./lib/Extensions/AiChat/ChatMessage/RevertQuestionnaire.js");
+/* harmony import */ var _ChatMessage_ScrollableSuggestions__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./ChatMessage/ScrollableSuggestions */ "./lib/Extensions/AiChat/ChatMessage/ScrollableSuggestions.js");
 /* harmony import */ var _ChatHistoryManager__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./ChatHistoryManager */ "./lib/Extensions/AiChat/ChatHistoryManager.js");
 /* harmony import */ var _style_button_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../style/button.css */ "./style/button.css");
 /* harmony import */ var _style_ChatTaskpane_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../style/ChatTaskpane.css */ "./style/ChatTaskpane.css");
 /* harmony import */ var _style_TextButton_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../style/TextButton.css */ "./style/TextButton.css");
-/* harmony import */ var _components_LoadingDots__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ../../components/LoadingDots */ "./lib/components/LoadingDots.js");
+/* harmony import */ var _components_LoadingDots__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ../../components/LoadingDots */ "./lib/components/LoadingDots.js");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -2118,19 +2184,20 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // Styles
 
 
 
 
 const AGENT_EXECUTION_DEPTH_LIMIT = 20;
-const getDefaultChatHistoryManager = (notebookTracker, contextManager) => {
-    const chatHistoryManager = new _ChatHistoryManager__WEBPACK_IMPORTED_MODULE_7__.ChatHistoryManager(contextManager, notebookTracker);
+const getDefaultChatHistoryManager = (notebookTracker, contextManager, app, streamlitPreviewManager) => {
+    const chatHistoryManager = new _ChatHistoryManager__WEBPACK_IMPORTED_MODULE_7__.ChatHistoryManager(contextManager, notebookTracker, app, streamlitPreviewManager);
     return chatHistoryManager;
 };
-const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app, operatingSystem, websocketClient, }) => {
+const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, streamlitPreviewManager, app, operatingSystem, websocketClient, }) => {
     const [isSignedUp, setIsSignedUp] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true);
-    const [chatHistoryManager, setChatHistoryManager] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(() => getDefaultChatHistoryManager(notebookTracker, contextManager));
+    const [chatHistoryManager, setChatHistoryManager] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(() => getDefaultChatHistoryManager(notebookTracker, contextManager, app, streamlitPreviewManager));
     const chatHistoryManagerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(chatHistoryManager);
     const [loadingAIResponse, setLoadingAIResponse] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
     // Store the original cell before diff so that we can revert to it if the user rejects the AI's code
@@ -2168,6 +2235,8 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
     // we don't need to handle the undefined case everywhere, we just default to an empty string knowing that
     // it will always be set to a valid thread id before it is used.
     const activeThreadIdRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)('');
+    // Ref to trigger refresh of the usage badge
+    const usageBadgeRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
     /*
         Three possible states:
         1. working: the agent is working on the task
@@ -2233,7 +2302,7 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
         };
         const chatHistoryResponse = await websocketClient.sendMessage(fetchHistoryCompletionRequest);
         // Create a fresh ChatHistoryManager and add the initial messages
-        const newChatHistoryManager = getDefaultChatHistoryManager(notebookTracker, contextManager);
+        const newChatHistoryManager = getDefaultChatHistoryManager(notebookTracker, contextManager, app, streamlitPreviewManager);
         // Each thread only contains agent or chat messages. For now, we enforce this by clearing the chat 
         // when the user switches mode. When the user reloads a chat, we want to put them back into the same
         // chat mode so that we use the correct system message and preserve this one-type of message invariant.
@@ -2303,7 +2372,7 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
         // Enable follow mode when starting a new chat
         setAutoScrollFollowMode(true);
         // Reset frontend chat history
-        const newChatHistoryManager = getDefaultChatHistoryManager(notebookTracker, contextManager);
+        const newChatHistoryManager = getDefaultChatHistoryManager(notebookTracker, contextManager, app, streamlitPreviewManager);
         setChatHistoryManager(newChatHistoryManager);
         // Notify the backend to request a new chat thread and get its ID
         try {
@@ -2366,7 +2435,7 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                 }
             }
             catch (error) {
-                const newChatHistoryManager = getDefaultChatHistoryManager(notebookTracker, contextManager);
+                const newChatHistoryManager = getDefaultChatHistoryManager(notebookTracker, contextManager, app, streamlitPreviewManager);
                 addAIMessageFromResponseAndUpdateState(error.title ? error.title : `${error}`, 'chat', newChatHistoryManager, false);
                 addAIMessageFromResponseAndUpdateState(error.hint ? error.hint : `${error}`, 'chat', newChatHistoryManager, true);
             }
@@ -2720,6 +2789,10 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
         if (activeRequestControllerRef.current === abortController) {
             activeRequestControllerRef.current = null;
         }
+        // Refresh the usage badge to reflect updated usage count
+        if (usageBadgeRef.current) {
+            void usageBadgeRef.current.refresh();
+        }
         return true;
     };
     const addAIMessageFromResponseAndUpdateState = (messageContent, promptType, chatHistoryManager, mitoAIConnectionError = false, mitoAIConnectionErrorType = null) => {
@@ -2742,9 +2815,9 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                 activeRequestControllerRef.current.abort();
                 activeRequestControllerRef.current = null;
             }
-            // Add feedback message based on reason
             const newChatHistoryManager = getDuplicateChatHistoryManager();
-            addAIMessageFromResponseAndUpdateState("Agent stopped by user.", 'chat', newChatHistoryManager);
+            addAIMessageFromResponseAndUpdateState("Agent stopped by user.", 'chat', // TODO: This probably should not be type 'chat' because that is reserved for a chat thread!
+            newChatHistoryManager);
             // Send stop message to backend
             await websocketClient.sendMessage({
                 type: "stop_agent",
@@ -2769,6 +2842,13 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
         let isAgentFinished = false;
         let agentExecutionDepth = 1;
         let sendCellIDOutput = undefined;
+        // Sometimes its useful to send extra information back to the agent. For example, 
+        // if the agent tries to create a streamlit app and it errors, we want to let the 
+        // orchestrator agent know about the issue. 
+        // TODO: Ideally this would be a different type of message that does not show up
+        // as a user message in the chat taskpane, but this is the only mechanism we have 
+        // right now.
+        let messageToShareWithAgent = undefined;
         // Loop through each message in the plan and send it to the AI
         while (!isAgentFinished && agentExecutionDepth <= AGENT_EXECUTION_DEPTH_LIMIT) {
             // Check if we should continue execution
@@ -2782,9 +2862,10 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                 await sendAgentExecutionMessage(input, messageIndex, undefined, additionalContext);
             }
             else {
-                await sendAgentExecutionMessage('', undefined, sendCellIDOutput);
+                await sendAgentExecutionMessage(messageToShareWithAgent || '', undefined, sendCellIDOutput);
                 // Reset flag back to false until the agent requests the active cell output again
                 sendCellIDOutput = undefined;
+                messageToShareWithAgent = undefined;
             }
             // Iterate the agent execution depth
             agentExecutionDepth++;
@@ -2828,6 +2909,12 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                 isAgentFinished = true;
                 break;
             }
+            // TODO: If we created a validated type in the agent response validation function, then we woulnd't need to do these checks
+            if (agentResponse.type === 'edit_streamlit_app' && (agentResponse.edit_streamlit_app_prompt === undefined || agentResponse.edit_streamlit_app_prompt === null)) {
+                await markAgentForStopping();
+                isAgentFinished = true;
+                break;
+            }
             if (agentResponse.type === 'cell_update' && agentResponse.cell_update) {
                 // Run the code and handle any errors
                 await (0,_utils_agentActions__WEBPACK_IMPORTED_MODULE_20__.acceptAndRunCellUpdate)(agentResponse.cell_update, agentTargetNotebookPanelRef.current);
@@ -2866,6 +2953,28 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                     }
                 }
             }
+            if (agentResponse.type === 'create_streamlit_app') {
+                // Create new preview using the service
+                const streamlitPreviewResponse = await streamlitPreviewManager.openAppPreview(app, agentTargetNotebookPanelRef.current);
+                if (streamlitPreviewResponse.type === 'error') {
+                    messageToShareWithAgent = streamlitPreviewResponse.message;
+                }
+            }
+            if (agentResponse.type === 'edit_streamlit_app' && agentResponse.edit_streamlit_app_prompt) {
+                // Ensure there is an active preview to edit
+                if (!streamlitPreviewManager.hasActivePreview()) {
+                    const streamlitPreviewResponse = await streamlitPreviewManager.openAppPreview(app, agentTargetNotebookPanelRef.current);
+                    if (streamlitPreviewResponse.type === 'error') {
+                        messageToShareWithAgent = streamlitPreviewResponse.message;
+                        continue;
+                    }
+                }
+                // Edit the existing preview
+                const streamlitPreviewResponse = await streamlitPreviewManager.editExistingPreview(agentResponse.edit_streamlit_app_prompt, agentTargetNotebookPanelRef.current);
+                if (streamlitPreviewResponse.type === 'error') {
+                    messageToShareWithAgent = streamlitPreviewResponse.message;
+                }
+            }
         }
         if (agentExecutionDepth > AGENT_EXECUTION_DEPTH_LIMIT) {
             addAIMessageFromResponseAndUpdateState("Since I've been working for a while now, give my work a review and then tell me how to continue.", 'agent:execution', chatHistoryManager);
@@ -3138,14 +3247,15 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-taskpane-header-left" },
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_IconButton__WEBPACK_IMPORTED_MODULE_27__["default"], { icon: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_2__.settingsIcon.react, null), title: "Mito AI Settings", onClick: () => {
                         void app.commands.execute(_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_28__.COMMAND_MITO_AI_SETTINGS);
-                    } })),
+                    } }),
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_UsageBadge__WEBPACK_IMPORTED_MODULE_29__["default"], { app: app, ref: usageBadgeRef })),
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-taskpane-header-right" },
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_IconButton__WEBPACK_IMPORTED_MODULE_27__["default"], { icon: react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_2__.addIcon.react, null), title: "Start New Chat", onClick: async () => { await startNewChat(); } }),
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_DropdownMenu__WEBPACK_IMPORTED_MODULE_29__["default"], { trigger: react__WEBPACK_IMPORTED_MODULE_1___default().createElement("button", { className: "icon-button", title: "Chat Threads", onClick: fetchChatThreads },
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_DropdownMenu__WEBPACK_IMPORTED_MODULE_30__["default"], { trigger: react__WEBPACK_IMPORTED_MODULE_1___default().createElement("button", { className: "icon-button", title: "Chat Threads", onClick: fetchChatThreads },
                         react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_2__.historyIcon.react, null)), items: chatThreads.length > 0
                         ? chatThreads.map(thread => ({
                             label: thread.name,
-                            primaryIcon: activeThreadIdRef.current === thread.thread_id ? _icons__WEBPACK_IMPORTED_MODULE_30__.OpenIndicatorLabIcon.react : undefined,
+                            primaryIcon: activeThreadIdRef.current === thread.thread_id ? _icons__WEBPACK_IMPORTED_MODULE_31__.OpenIndicatorLabIcon.react : undefined,
                             onClick: () => fetchChatHistoryAndSetActiveThread(thread.thread_id),
                             secondaryActions: [
                                 {
@@ -3163,25 +3273,25 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-messages", ref: chatMessagesRef },
             displayOptimizedChatHistory.length === 0 &&
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-empty-message" }, isSignedUp === false
-                    ? react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_SignUpForm__WEBPACK_IMPORTED_MODULE_31__["default"], { onSignUpSuccess: refreshUserSignupState })
-                    : react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_CTACarousel__WEBPACK_IMPORTED_MODULE_32__["default"], { app: app })),
+                    ? react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_SignUpForm__WEBPACK_IMPORTED_MODULE_32__["default"], { onSignUpSuccess: refreshUserSignupState })
+                    : react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_CTACarousel__WEBPACK_IMPORTED_MODULE_33__["default"], { app: app })),
             processedDisplayOptimizedChatHistory.map((displayOptimizedChat, index) => {
                 if (isGroupedErrorMessages(displayOptimizedChat)) {
-                    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_AgentComponents_ErrorFixupToolUI__WEBPACK_IMPORTED_MODULE_33__["default"], { key: index, messages: displayOptimizedChat, renderMimeRegistry: renderMimeRegistry }));
+                    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_AgentComponents_ErrorFixupToolUI__WEBPACK_IMPORTED_MODULE_34__["default"], { key: index, messages: displayOptimizedChat, renderMimeRegistry: renderMimeRegistry }));
                 }
                 else {
-                    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_ChatMessage__WEBPACK_IMPORTED_MODULE_34__["default"], { key: index, message: displayOptimizedChat.message, promptType: displayOptimizedChat.promptType, agentResponse: displayOptimizedChat.agentResponse, codeCellID: displayOptimizedChat.codeCellID, mitoAIConnectionError: displayOptimizedChat.type === 'connection error', mitoAIConnectionErrorType: displayOptimizedChat.mitoAIConnectionErrorType || null, messageIndex: index, notebookTracker: notebookTracker, renderMimeRegistry: renderMimeRegistry, app: app, isLastAiMessage: index === lastAIMessagesIndex, isLastMessage: index === displayOptimizedChatHistory.length - 1, operatingSystem: operatingSystem, previewAICode: previewAICodeToActiveCell, acceptAICode: acceptAICode, rejectAICode: rejectAICode, onUpdateMessage: handleUpdateMessage, contextManager: contextManager, codeReviewStatus: codeReviewStatus, setNextSteps: setNextSteps, agentModeEnabled: agentModeEnabled, additionalContext: displayOptimizedChat.additionalContext }));
+                    return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_ChatMessage__WEBPACK_IMPORTED_MODULE_35__["default"], { key: index, message: displayOptimizedChat.message, promptType: displayOptimizedChat.promptType, agentResponse: displayOptimizedChat.agentResponse, codeCellID: displayOptimizedChat.codeCellID, mitoAIConnectionError: displayOptimizedChat.type === 'connection error', mitoAIConnectionErrorType: displayOptimizedChat.mitoAIConnectionErrorType || null, messageIndex: index, notebookTracker: notebookTracker, renderMimeRegistry: renderMimeRegistry, app: app, isLastAiMessage: index === lastAIMessagesIndex, isLastMessage: index === displayOptimizedChatHistory.length - 1, operatingSystem: operatingSystem, previewAICode: previewAICodeToActiveCell, acceptAICode: acceptAICode, rejectAICode: rejectAICode, onUpdateMessage: handleUpdateMessage, contextManager: contextManager, codeReviewStatus: codeReviewStatus, setNextSteps: setNextSteps, agentModeEnabled: agentModeEnabled, additionalContext: displayOptimizedChat.additionalContext }));
                 }
             }).filter(message => message !== null),
             loadingAIResponse &&
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-loading-message" },
                     "Thinking ",
-                    react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_35__["default"], null)),
+                    react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_36__["default"], null)),
             hasCheckpoint &&
                 agentModeEnabled &&
                 agentExecutionStatus === 'idle' &&
                 displayOptimizedChatHistory.length > 0 && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: 'message message-assistant-chat' },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_36__["default"], { text: "Revert changes", icon: _icons_UndoIcon__WEBPACK_IMPORTED_MODULE_37__["default"], title: "Revert changes", onClick: () => {
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_37__["default"], { text: "Revert changes", icon: _icons_UndoIcon__WEBPACK_IMPORTED_MODULE_38__["default"], title: "Revert changes", onClick: () => {
                         void (0,_utils_checkpoint__WEBPACK_IMPORTED_MODULE_17__.restoreCheckpoint)(app, notebookTracker, setHasCheckpoint);
                         setDisplayedNextStepsIfAvailable(false);
                         setHasCheckpoint(false);
@@ -3189,9 +3299,9 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                         (0,_utils_scroll__WEBPACK_IMPORTED_MODULE_13__.scrollToDiv)(chatMessagesRef);
                     }, variant: "gray", width: "fit-contents", iconPosition: "left" }),
                 react__WEBPACK_IMPORTED_MODULE_1___default().createElement("p", { className: "text-muted text-sm" }, "Undo the most recent changes made by the agent"))),
-            showRevertQuestionnaire && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_RevertQuestionnaire__WEBPACK_IMPORTED_MODULE_38__["default"], { onDestroy: () => setShowRevertQuestionnaire(false), getDuplicateChatHistoryManager: getDuplicateChatHistoryManager, setChatHistoryManager: setChatHistoryManager }))),
+            showRevertQuestionnaire && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_RevertQuestionnaire__WEBPACK_IMPORTED_MODULE_39__["default"], { onDestroy: () => setShowRevertQuestionnaire(false), getDuplicateChatHistoryManager: getDuplicateChatHistoryManager, setChatHistoryManager: setChatHistoryManager }))),
         displayOptimizedChatHistory.length === 0 && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "suggestions-container" },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_ScrollableSuggestions__WEBPACK_IMPORTED_MODULE_39__["default"], { onSelectSuggestion: (prompt) => {
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_ScrollableSuggestions__WEBPACK_IMPORTED_MODULE_40__["default"], { onSelectSuggestion: (prompt) => {
                     if (agentModeEnabled) {
                         void startAgentExecution(prompt);
                     }
@@ -3200,11 +3310,11 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                     }
                 } }))),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: `connected-input-container ${nextSteps.length > 0 ? 'has-next-steps' : ''}` },
-            nextSteps.length > 0 && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_NextStepsPills__WEBPACK_IMPORTED_MODULE_40__["default"], { nextSteps: nextSteps, onSelectNextStep: agentModeEnabled ? startAgentExecution : sendChatInputMessage, displayedNextStepsIfAvailable: displayedNextStepsIfAvailable, setDisplayedNextStepsIfAvailable: setDisplayedNextStepsIfAvailable })),
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_ChatInput__WEBPACK_IMPORTED_MODULE_41__["default"], { app: app, initialContent: '', onSave: agentModeEnabled ? startAgentExecution : sendChatInputMessage, onCancel: undefined, isEditing: false, contextManager: contextManager, notebookTracker: notebookTracker, agentModeEnabled: agentModeEnabled, agentExecutionStatus: agentExecutionStatus, operatingSystem: operatingSystem, displayOptimizedChatHistoryLength: displayOptimizedChatHistory.length, agentTargetNotebookPanelRef: agentTargetNotebookPanelRef, isSignedUp: isSignedUp })),
+            nextSteps.length > 0 && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_NextStepsPills__WEBPACK_IMPORTED_MODULE_41__["default"], { nextSteps: nextSteps, onSelectNextStep: agentModeEnabled ? startAgentExecution : sendChatInputMessage, displayedNextStepsIfAvailable: displayedNextStepsIfAvailable, setDisplayedNextStepsIfAvailable: setDisplayedNextStepsIfAvailable })),
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_ChatMessage_ChatInput__WEBPACK_IMPORTED_MODULE_42__["default"], { app: app, initialContent: '', onSave: agentModeEnabled ? startAgentExecution : sendChatInputMessage, onCancel: undefined, isEditing: false, contextManager: contextManager, notebookTracker: notebookTracker, agentModeEnabled: agentModeEnabled, agentExecutionStatus: agentExecutionStatus, operatingSystem: operatingSystem, displayOptimizedChatHistoryLength: displayOptimizedChatHistory.length, agentTargetNotebookPanelRef: agentTargetNotebookPanelRef, isSignedUp: isSignedUp })),
         agentExecutionStatus !== 'working' && agentExecutionStatus !== 'stopping' && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-controls" },
             react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "chat-controls-left" },
-                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_ToggleButton__WEBPACK_IMPORTED_MODULE_42__["default"], { leftText: "Chat", leftTooltip: "Chat mode suggests an edit to the active cell and let's you decide to accept or reject it.", rightText: "Agent", rightTooltip: "Agent mode writes and executes code until it's finished your request.", isLeftSelected: !agentModeEnabled, onChange: async (isLeftSelected) => {
+                react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_ToggleButton__WEBPACK_IMPORTED_MODULE_43__["default"], { leftText: "Chat", leftTooltip: "Chat mode suggests an edit to the active cell and let's you decide to accept or reject it.", rightText: "Agent", rightTooltip: "Agent mode writes and executes code until it's finished your request.", isLeftSelected: !agentModeEnabled, onChange: async (isLeftSelected) => {
                         await startNewChat(); // TODO: delete thread instead of starting new chat
                         setAgentModeEnabled(!isLeftSelected);
                         // Clear agent checkpoint when switching modes
@@ -3240,7 +3350,7 @@ const ChatTaskpane = ({ notebookTracker, renderMimeRegistry, contextManager, app
                 " \u23CE"))),
         (agentExecutionStatus === 'working' || agentExecutionStatus === 'stopping') && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("button", { className: "button-base button-red stop-agent-button", onClick: () => void markAgentForStopping('userStop'), disabled: agentExecutionStatus === 'stopping', "data-testid": "stop-agent-button" }, agentExecutionStatus === 'stopping' ? (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: "stop-agent-button-content" },
             "Stopping",
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_LoadingCircle__WEBPACK_IMPORTED_MODULE_43__["default"], null),
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_LoadingCircle__WEBPACK_IMPORTED_MODULE_44__["default"], null),
             " ")) : ('Stop Agent')))));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChatTaskpane);
@@ -3329,7 +3439,7 @@ class ChatWidget extends _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.React
         super.dispose();
     }
     render() {
-        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ChatTaskpane__WEBPACK_IMPORTED_MODULE_6__["default"], { app: this.options.app, notebookTracker: this.options.notebookTracker, renderMimeRegistry: this.options.renderMimeRegistry, contextManager: this.options.contextManager, operatingSystem: this.options.operatingSystem, websocketClient: this.websocketClient }));
+        return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ChatTaskpane__WEBPACK_IMPORTED_MODULE_6__["default"], { app: this.options.app, notebookTracker: this.options.notebookTracker, renderMimeRegistry: this.options.renderMimeRegistry, contextManager: this.options.contextManager, streamlitPreviewManager: this.options.streamlitPreviewManager, operatingSystem: this.options.operatingSystem, websocketClient: this.websocketClient }));
     }
     onMessage(client, message) {
         switch (message.type) {
@@ -3342,7 +3452,7 @@ class ChatWidget extends _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.React
         }
     }
 }
-function buildChatWidget(app, notebookTracker, renderMimeRegistry, contextManager) {
+function buildChatWidget(app, notebookTracker, renderMimeRegistry, contextManager, streamlitPreviewManager) {
     // Get the operating system here so we don't have to do it each time the chat changes.
     // The operating system won't change, duh.
     const operatingSystem = (0,_utils_user__WEBPACK_IMPORTED_MODULE_7__.getOperatingSystem)();
@@ -3351,6 +3461,7 @@ function buildChatWidget(app, notebookTracker, renderMimeRegistry, contextManage
         notebookTracker,
         renderMimeRegistry,
         contextManager,
+        streamlitPreviewManager: streamlitPreviewManager,
         operatingSystem
     });
     chatWidget.id = 'mito_ai';
@@ -3567,6 +3678,94 @@ const SignUpForm = ({ onSignUpSuccess }) => {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SignUpForm);
 
 
+/***/ }),
+
+/***/ "./lib/Extensions/AiChat/UsageBadge.js":
+/*!*********************************************!*\
+  !*** ./lib/Extensions/AiChat/UsageBadge.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 _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _style_UsageBadge_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../style/UsageBadge.css */ "./style/UsageBadge.css");
+/* harmony import */ var _SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../SettingsManager/SettingsManagerPlugin */ "./lib/Extensions/SettingsManager/SettingsManagerPlugin.js");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+
+const MAX_FREE_USAGE = 150;
+const SVG_SIZE = 16;
+const CIRCLE_RADIUS = 5.5;
+const CIRCLE_CENTER = SVG_SIZE / 2; // Center x and y coordinates
+const UsageBadge = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({ app }, ref) => {
+    const [isPro, setIsPro] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    const [usageCount, setUsageCount] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
+    const getAiMitoApiNumUsages = async () => {
+        const usageCount = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getUserKey)('ai_mito_api_num_usages');
+        return usageCount ? parseInt(usageCount) : 0;
+    };
+    const fetchIsPro = async () => {
+        const isPro = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getUserKey)('is_pro');
+        setIsPro(isPro === 'True');
+    };
+    const fetchUsageCount = async () => {
+        const count = await getAiMitoApiNumUsages();
+        setUsageCount(count);
+    };
+    // Expose refresh method to parent component
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, () => ({
+        refresh: async () => {
+            await Promise.all([fetchIsPro(), fetchUsageCount()]);
+        }
+    }));
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        void fetchIsPro();
+        void fetchUsageCount();
+    }, []);
+    // Calculate progress
+    const percentage = Math.min((usageCount / MAX_FREE_USAGE) * 100, 100);
+    const circumference = 2 * Math.PI * CIRCLE_RADIUS;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+    // Determine color based on usage - green to red
+    const getColor = () => {
+        if (percentage < 50)
+            return 'var(--green-600)';
+        if (percentage < 80)
+            return 'var(--yellow-600)';
+        return 'var(--red-500)';
+    };
+    if (isPro) {
+        // If the user is pro, don't show the usage badge
+        return null;
+    }
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "usage-badge", onClick: () => {
+            void app.commands.execute(_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_3__.COMMAND_MITO_AI_SETTINGS_SUBSCRIPTION);
+        }, title: `${usageCount}/${MAX_FREE_USAGE} free AI messages used` },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { className: "usage-badge-svg", width: SVG_SIZE, height: SVG_SIZE },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", { className: "usage-badge-circle-background", cx: CIRCLE_CENTER, cy: CIRCLE_CENTER, r: CIRCLE_RADIUS }),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("circle", { className: "usage-badge-circle-progress", style: {
+                    stroke: getColor(),
+                    strokeDasharray: circumference,
+                    strokeDashoffset: strokeDashoffset,
+                }, cx: CIRCLE_CENTER, cy: CIRCLE_CENTER, r: CIRCLE_RADIUS })),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "usage-badge-text" }, usageCount >= MAX_FREE_USAGE
+            ? 'Upgrade to Pro'
+            : `${usageCount}/${MAX_FREE_USAGE}`)));
+});
+UsageBadge.displayName = 'UsageBadge';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UsageBadge);
+
+
 /***/ }),
 
 /***/ "./lib/Extensions/AiChat/jupyterSettingsManager.js":
@@ -3711,7 +3910,7 @@ function validateAndCorrectAgentResponse(agentResponse) {
     // Create a copy to avoid mutating the original
     const correctedResponse = { ...agentResponse };
     // Ensure type is valid. Default to finished_task if not valid.
-    const validTypes = ['cell_update', 'get_cell_output', 'run_all_cells', 'finished_task'];
+    const validTypes = ['cell_update', 'get_cell_output', 'run_all_cells', 'finished_task', 'create_streamlit_app', 'edit_streamlit_app'];
     correctedResponse.type = (correctedResponse.type && validTypes.includes(correctedResponse.type))
         ? correctedResponse.type
         : 'finished_task';
@@ -3732,6 +3931,9 @@ function validateAndCorrectAgentResponse(agentResponse) {
         // No empty strings in the assumptions
         correctedResponse.analysis_assumptions = (_a = correctedResponse.analysis_assumptions) === null || _a === void 0 ? void 0 : _a.filter(assumption => assumption.trim() !== '');
     }
+    // Correct edit_streamlit_app_prompt - ensure it's a string when present
+    const editStreamlitAppPromptType = typeof correctedResponse.edit_streamlit_app_prompt;
+    correctedResponse.edit_streamlit_app_prompt = editStreamlitAppPromptType === 'string' ? correctedResponse.edit_streamlit_app_prompt : undefined;
     // For now we don't validate the cell_update object itself, as this is more complex and has 
     // not caused issues thus far.
     return correctedResponse;
@@ -4076,7 +4278,7 @@ __webpack_require__.r(__webpack_exports__);
 This function generates the requirements.txt file needed to host the streamlit app,
 and deploys it!
 */
-const deployStreamlitApp = async (notebookTracker, appDeployService, appManagerService) => {
+const deployStreamlitApp = async (notebookPanel, appDeployService, appManagerService) => {
     let selectedFiles = [];
     let jwtToken = await (0,_auth__WEBPACK_IMPORTED_MODULE_2__.getJWTToken)();
     if (!jwtToken) {
@@ -4097,27 +4299,30 @@ const deployStreamlitApp = async (notebookTracker, appDeployService, appManagerS
         }
         catch (error) {
             console.log('Authentication cancelled or failed:', error);
+            const errorMsg = 'Authentication failed: ' + error;
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(errorMsg, 'error', {
+                autoClose: false
+            });
             return; // Exit early if authentication was cancelled
         }
     }
-    const notebookPanel = notebookTracker.currentWidget;
-    if (!notebookPanel) {
-        console.error('No notebook is currently active');
-        return;
-    }
     const notebookPath = notebookPanel.context.path;
     const notificationId = _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit('Step 1/7: Gathering requirements...', 'in-progress', {
         autoClose: false
     });
     // Build the requirements.txt file
-    const requirementsContent = await (0,_requirementsUtils__WEBPACK_IMPORTED_MODULE_4__.generateRequirementsTxt)(notebookTracker);
+    const requirementsContent = await (0,_requirementsUtils__WEBPACK_IMPORTED_MODULE_4__.generateRequirementsTxt)(notebookPanel);
     // Save the files to the current directory
-    await (0,_fileUtils__WEBPACK_IMPORTED_MODULE_5__.saveFileWithKernel)(notebookTracker, './requirements.txt', requirementsContent);
+    await (0,_fileUtils__WEBPACK_IMPORTED_MODULE_5__.saveFileWithKernel)(notebookPanel, './requirements.txt', requirementsContent);
     try {
         _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.dismiss(notificationId);
         selectedFiles = await (0,_FilesSelectorUtils__WEBPACK_IMPORTED_MODULE_6__.fileSelectorPopup)(notebookPath);
     }
     catch (error) {
+        const errorMsg = 'Files selection failed: ' + error;
+        _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(errorMsg, 'error', {
+            autoClose: false
+        });
         console.log('File selection failed:', error);
         return;
     }
@@ -4129,16 +4334,25 @@ const deployStreamlitApp = async (notebookTracker, appDeployService, appManagerS
         console.log("Sending request to deploy the app");
         // Use the JWT token that was already obtained or refreshed above
         const response = await appDeployService.client.sendMessage({
-            type: 'deploy-app',
+            type: 'deploy_app',
             message_id: _lumino_coreutils__WEBPACK_IMPORTED_MODULE_1__.UUID.uuid4(),
             notebook_path: notebookPath,
             jwt_token: jwtToken,
             selected_files: selectedFiles
         });
         if (response.error) {
+            const errorMsg = response.error;
+            console.group('Deploy App Error:');
+            console.error('Type:', errorMsg.error_type);
+            console.error('Title:', errorMsg.message);
+            console.error('Hint:', errorMsg.hint);
+            let displayMessage = String(errorMsg.message);
+            if (errorMsg.hint) {
+                displayMessage = displayMessage + "\n" + "Hint:" + String(errorMsg.hint);
+            }
             _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.update({
                 id: newNotificationId,
-                message: response.error.title,
+                message: displayMessage,
                 type: 'error',
                 autoClose: false
             });
@@ -4150,8 +4364,14 @@ const deployStreamlitApp = async (notebookTracker, appDeployService, appManagerS
         }
     }
     catch (error) {
-        // TODO: Do something with the error
+        // TODO: In the future, remove this if we dont see any connection errors that need to be caught
         console.error("Error deploying app:", error);
+        _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.update({
+            id: newNotificationId,
+            message: String(error),
+            type: 'error',
+            autoClose: false
+        });
     }
 };
 
@@ -4513,12 +4733,7 @@ __webpack_require__.r(__webpack_exports__);
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
  */
-const saveFileWithKernel = async (notebookTracker, filePath, fileContent) => {
-    const notebookPanel = notebookTracker.currentWidget;
-    if (!notebookPanel) {
-        console.error('No notebook is currently active');
-        return;
-    }
+const saveFileWithKernel = async (notebookPanel, filePath, fileContent) => {
     try {
         // Use the kernel to execute Python code
         const session = notebookPanel.sessionContext.session;
@@ -4582,12 +4797,7 @@ __webpack_require__.r(__webpack_exports__);
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
  */
 // Function to generate requirements.txt content using the kernel with pipreqs
-const generateRequirementsTxt = async (notebookTracker) => {
-    const notebookPanel = notebookTracker.currentWidget;
-    if (!notebookPanel) {
-        console.error('No notebook is currently active');
-        return '';
-    }
+const generateRequirementsTxt = async (notebookPanel) => {
     // Initialize with fallback requirements in case kernel execution fails
     let requirementsContent = 'streamlit>=1.28.0';
     try {
@@ -5074,6 +5284,7 @@ const ManageAppsPlugin = {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   IStreamlitPreviewManager: () => (/* binding */ IStreamlitPreviewManager),
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @jupyterlab/notebook */ "webpack/sharing/consume/default/@jupyterlab/notebook");
@@ -5084,18 +5295,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jupyterlab_coreutils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_coreutils__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _lumino_widgets__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @lumino/widgets */ "webpack/sharing/consume/default/@lumino/widgets");
 /* harmony import */ var _lumino_widgets__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_lumino_widgets__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
-/* harmony import */ var _AppDeploy_DeployStreamlitApp__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../AppDeploy/DeployStreamlitApp */ "./lib/Extensions/AppDeploy/DeployStreamlitApp.js");
-/* harmony import */ var _AppDeploy_AppDeployPlugin__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../AppDeploy/AppDeployPlugin */ "./lib/Extensions/AppDeploy/AppDeployPlugin.js");
-/* harmony import */ var _AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../AppManager/ManageAppsPlugin */ "./lib/Extensions/AppManager/ManageAppsPlugin.js");
+/* harmony import */ var _lumino_coreutils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @lumino/coreutils */ "webpack/sharing/consume/default/@lumino/coreutils");
+/* harmony import */ var _lumino_coreutils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_lumino_coreutils__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _AppDeploy_DeployStreamlitApp__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../AppDeploy/DeployStreamlitApp */ "./lib/Extensions/AppDeploy/DeployStreamlitApp.js");
+/* harmony import */ var _AppDeploy_AppDeployPlugin__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../AppDeploy/AppDeployPlugin */ "./lib/Extensions/AppDeploy/AppDeployPlugin.js");
+/* harmony import */ var _AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../AppManager/ManageAppsPlugin */ "./lib/Extensions/AppManager/ManageAppsPlugin.js");
 /* harmony import */ var _commands__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../commands */ "./lib/commands.js");
-/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../icons */ "./lib/icons/index.js");
-/* harmony import */ var _style_StreamlitPreviewPlugin_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../style/StreamlitPreviewPlugin.css */ "./style/StreamlitPreviewPlugin.css");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ "./lib/Extensions/AppPreview/utils.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react */ "webpack/sharing/consume/default/react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../icons */ "./lib/icons/index.js");
+/* harmony import */ var _style_StreamlitPreviewPlugin_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../style/StreamlitPreviewPlugin.css */ "./style/StreamlitPreviewPlugin.css");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils */ "./lib/Extensions/AppPreview/utils.js");
 /* harmony import */ var _UpdateAppDropdown__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./UpdateAppDropdown */ "./lib/Extensions/AppPreview/UpdateAppDropdown.js");
-/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-dom/client */ "./node_modules/react-dom/client.js");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -5115,9 +5325,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
-
-
+/**
+ * The token for the StreamlitPreview service.
+ */
+const IStreamlitPreviewManager = new _lumino_coreutils__WEBPACK_IMPORTED_MODULE_4__.Token('mito-ai:IStreamlitPreviewManager', 'Token for the StreamlitPreview service that manages app previews');
 /**
  * Simple HTML widget for displaying iframe content.
  */
@@ -5139,164 +5350,180 @@ class IFrameWidget extends _lumino_widgets__WEBPACK_IMPORTED_MODULE_3__.Widget {
         }
     }
 }
-async function showRecreateAppConfirmation(notebookPath) {
-    const result = await (0,_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.showDialog)({
-        title: 'Recreate App',
-        body: 'This will recreate the app from scratch, discarding all your current edits. This action cannot be undone. Are you sure you want to continue?',
-        buttons: [
-            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Dialog.cancelButton({ label: 'Cancel' }),
-            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Dialog.warnButton({ label: 'Recreate App' })
-        ],
-        defaultButton: 1
-    });
-    if (result.button.accept) {
-        void (0,_utils__WEBPACK_IMPORTED_MODULE_7__.startStreamlitPreviewAndNotify)(notebookPath, true, undefined, 'Recreating app from scratch...', 'App recreated successfully!');
-    }
-}
 /**
- * Show the update app dropdown.
+ * Manages Streamlit app previews with a single-preview policy.
+ * Ensures only one preview can be open at a time.
  */
-function showUpdateAppDropdown(buttonElement, notebookPath) {
-    // Remove any existing dropdown
-    const existingDropdown = document.querySelector('.update-app-dropdown');
-    if (existingDropdown) {
-        existingDropdown.remove();
+class StreamlitAppPreviewManager {
+    constructor(appDeployService, appManagerService) {
+        this.currentPreview = null;
+        this.appDeployService = appDeployService;
+        this.appManagerService = appManagerService;
     }
-    // Create dropdown container
-    const dropdownContainer = document.createElement('div');
-    dropdownContainer.className = 'update-app-dropdown';
-    dropdownContainer.style.position = 'absolute';
-    dropdownContainer.style.zIndex = '1000';
-    // Position the dropdown below the button
-    const buttonRect = buttonElement.getBoundingClientRect();
-    dropdownContainer.style.top = `${buttonRect.bottom + 4}px`;
-    dropdownContainer.style.left = `${buttonRect.left}px`;
-    // Add to document
-    document.body.appendChild(dropdownContainer);
-    // Render the React component
-    (0,react_dom_client__WEBPACK_IMPORTED_MODULE_6__.createRoot)(dropdownContainer).render(react__WEBPACK_IMPORTED_MODULE_5__.createElement(_UpdateAppDropdown__WEBPACK_IMPORTED_MODULE_8__["default"], { onSubmit: async (message) => {
-            await (0,_utils__WEBPACK_IMPORTED_MODULE_7__.startStreamlitPreviewAndNotify)(notebookPath, true, message, 'Updating app...', 'App updated successfully!');
-            dropdownContainer.remove();
-        }, onClose: () => {
-            dropdownContainer.remove();
-        } }));
-    // Close dropdown when clicking outside
-    const handleClickOutside = (event) => {
-        if (!dropdownContainer.contains(event.target) &&
-            !buttonElement.contains(event.target)) {
-            dropdownContainer.remove();
-            document.removeEventListener('mousedown', handleClickOutside);
+    /**
+     * Create a new Streamlit app preview, replacing any existing preview.
+     */
+    async openAppPreview(app, notebookPanel) {
+        // Close existing preview if any
+        this.closeCurrentPreview();
+        // First save the notebook to ensure the app is up to date
+        await notebookPanel.context.save();
+        const notebookPath = notebookPanel.context.path;
+        const streamlitPreviewResponse = await (0,_utils__WEBPACK_IMPORTED_MODULE_6__.startStreamlitPreviewAndNotify)(notebookPath);
+        if (streamlitPreviewResponse.type === 'error') {
+            return streamlitPreviewResponse;
         }
-    };
-    // Add click outside listener after a small delay to avoid immediate closure
-    setTimeout(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-    }, 100);
-}
-/**
- * The streamlit preview plugin.
- */
-const StreamlitPreviewPlugin = {
-    id: 'mito-ai:streamlit-preview',
-    autoStart: true,
-    requires: [_jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_0__.INotebookTracker, _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ICommandPalette, _AppDeploy_AppDeployPlugin__WEBPACK_IMPORTED_MODULE_9__.IAppDeployService, _AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_10__.IAppManagerService],
-    activate: (app, notebookTracker, palette, appDeployService, appManagerService) => {
-        console.log('mito-ai: StreamlitPreviewPlugin activated');
-        // Add command to command palette
-        app.commands.addCommand(_commands__WEBPACK_IMPORTED_MODULE_11__.COMMAND_MITO_AI_PREVIEW_AS_STREAMLIT, {
-            label: 'Preview as Streamlit',
-            caption: 'Convert current notebook to Streamlit app and preview it',
-            execute: async () => {
-                await previewNotebookAsStreamlit(app, notebookTracker, appDeployService, appManagerService);
-            }
-        });
-        // Add to command palette
-        palette.addItem({
-            command: _commands__WEBPACK_IMPORTED_MODULE_11__.COMMAND_MITO_AI_PREVIEW_AS_STREAMLIT,
-            category: 'Mito AI'
+        // Create the new preview widget
+        const widget = this.createPreviewWidget(app, notebookPanel, this.appDeployService, this.appManagerService, streamlitPreviewResponse);
+        // Store current preview info
+        this.currentPreview = widget;
+        // Add widget to main area with split-right mode
+        app.shell.add(widget, 'main', {
+            mode: 'split-right',
+            ref: notebookPanel.id
         });
+        return streamlitPreviewResponse;
     }
-};
-/**
- * Preview the current notebook as a Streamlit app.
- */
-async function previewNotebookAsStreamlit(app, notebookTracker, appDeployService, appManagerService) {
-    const notebookPanel = notebookTracker.currentWidget;
-    if (!notebookPanel) {
-        _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.error('No notebook is currently active');
-        return;
+    /**
+     * Edit the existing Streamlit app preview by updating the app.py file.
+     * The preview will auto-refresh due to --server.runOnSave in manager.py
+     */
+    async editExistingPreview(editPrompt, notebookPanel) {
+        if (!this.currentPreview) {
+            throw new Error('No active preview to edit');
+        }
+        // First save the notebook to ensure the app is able
+        // to read the most up to date version of the notebook.
+        // Because we are parsing the notebook on the backend by reading 
+        // the file system, it only sees the last saved version of the notebook.
+        await notebookPanel.context.save();
+        // Update the app with the edit prompt
+        const streamlitPreviewResponse = await (0,_utils__WEBPACK_IMPORTED_MODULE_6__.startStreamlitPreviewAndNotify)(notebookPanel.context.path, true, // force_recreate
+        editPrompt, 'Editing Streamlit app...', 'Streamlit app updated successfully!');
+        return streamlitPreviewResponse;
     }
-    // First save the notebook to ensure the app is up to date
-    await notebookPanel.context.save();
-    const notebookPath = notebookPanel.context.path;
-    const notebookName = _jupyterlab_coreutils__WEBPACK_IMPORTED_MODULE_2__.PathExt.basename(notebookPath, '.ipynb');
-    try {
-        const previewData = await (0,_utils__WEBPACK_IMPORTED_MODULE_7__.startStreamlitPreviewAndNotify)(notebookPath);
-        if (previewData === undefined) {
-            return;
+    /**
+     * Close the current preview if one exists.
+     */
+    closeCurrentPreview() {
+        if (this.currentPreview) {
+            console.log('Closing current preview');
+            this.currentPreview.dispose();
+            this.currentPreview = null;
         }
-        // Create iframe widget
-        // TODO: Instead of having this widget creation code in the previewNotebookAsStreamlit function, 
-        // I wonder if we can make it part of the StreamlitPreviewPlugin. What we want is the following: 
-        // a react component that takes the app, notebookTracker, and appDeployService as a prop and is 
-        // already set up with this layout. Each time it opens, we're just deciding which notebook to display.
+    }
+    /**
+     * Check if there's an active preview.
+     */
+    hasActivePreview() {
+        return this.currentPreview !== null;
+    }
+    /**
+     * Get the current preview widget.
+     */
+    getCurrentPreview() {
+        return this.currentPreview;
+    }
+    /**
+     * Create a new preview widget with toolbar buttons.
+     */
+    createPreviewWidget(app, notebookPanel, appDeployService, appManagerService, previewData) {
         const iframeWidget = new IFrameWidget(previewData.url);
+        // Log that the preview is open
+        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__.logEvent)('opened_streamlit_app_preview');
         // Create main area widget
         const widget = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.MainAreaWidget({ content: iframeWidget });
+        const notebookPath = notebookPanel.context.path;
+        const notebookName = _jupyterlab_coreutils__WEBPACK_IMPORTED_MODULE_2__.PathExt.basename(notebookPath, '.ipynb');
         widget.title.label = `App Preview (${notebookName})`;
         widget.title.closable = true;
-        /* ******************************************************
-         * Create Streamlit App Toolbar Buttons
-         ****************************************************** */
+        // Create toolbar buttons
         const editAppButton = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ToolbarButton({
             className: 'text-button-mito-ai button-base button-small jp-ToolbarButton mito-deploy-button',
             onClick: () => {
-                showUpdateAppDropdown(editAppButton.node, notebookPath);
+                (0,_UpdateAppDropdown__WEBPACK_IMPORTED_MODULE_8__.showUpdateAppDropdown)(editAppButton.node, notebookPanel);
             },
             tooltip: 'Edit Streamlit App',
             label: 'Edit App',
-            icon: _icons__WEBPACK_IMPORTED_MODULE_12__.EditLabIcon,
+            icon: _icons__WEBPACK_IMPORTED_MODULE_9__.EditLabIcon,
             iconClass: 'mito-ai-deploy-icon'
         });
         const recreateAppButton = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ToolbarButton({
             className: 'text-button-mito-ai button-base button-small jp-ToolbarButton mito-deploy-button',
             onClick: async () => {
-                await showRecreateAppConfirmation(notebookPath);
+                await (0,_utils__WEBPACK_IMPORTED_MODULE_6__.showRecreateAppConfirmation)(notebookPath);
             },
             tooltip: 'Recreate new App from scratch based on the current state of the notebook',
             label: 'Recreate App',
-            icon: _icons__WEBPACK_IMPORTED_MODULE_12__.ResetCircleLabIcon,
+            icon: _icons__WEBPACK_IMPORTED_MODULE_9__.ResetCircleLabIcon,
             iconClass: 'mito-ai-deploy-icon'
         });
         const deployButton = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ToolbarButton({
             className: 'text-button-mito-ai button-base button-small jp-ToolbarButton mito-deploy-button',
             onClick: () => {
-                void (0,_AppDeploy_DeployStreamlitApp__WEBPACK_IMPORTED_MODULE_13__.deployStreamlitApp)(notebookTracker, appDeployService, appManagerService);
+                void (0,_AppDeploy_DeployStreamlitApp__WEBPACK_IMPORTED_MODULE_10__.deployStreamlitApp)(notebookPanel, appDeployService, appManagerService);
             },
             tooltip: 'Deploy Streamlit App',
             label: 'Deploy App',
-            icon: _icons__WEBPACK_IMPORTED_MODULE_12__.DeployLabIcon,
+            icon: _icons__WEBPACK_IMPORTED_MODULE_9__.DeployLabIcon,
             iconClass: 'mito-ai-deploy-icon'
         });
-        // Insert the button into the toolbar
+        // Insert the buttons into the toolbar
         widget.toolbar.insertAfter('spacer', 'edit-app-button', editAppButton);
         widget.toolbar.insertAfter('edit-app-button', 'recreate-app-button', recreateAppButton);
-        widget.toolbar.insertAfter('recreate-app-button', 'deploy-app-button', deployButton);
+        if (app.commands.hasCommand(_commands__WEBPACK_IMPORTED_MODULE_11__.COMMAND_MITO_AI_BETA_MODE_ENABLED)) {
+            widget.toolbar.insertAfter('recreate-app-button', 'deploy-app-button', deployButton);
+        }
         // Handle widget disposal
         widget.disposed.connect(() => {
             console.log('Widget disposed, stopping preview');
-            void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_14__.stopStreamlitPreview)(previewData.id);
-        });
-        // Add widget to main area with split-right mode
-        app.shell.add(widget, 'main', {
-            mode: 'split-right',
-            ref: notebookPanel.id
+            if (previewData) {
+                void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__.stopStreamlitPreview)(previewData.id);
+            }
+            // Clear our reference when the widget is disposed
+            if (this.currentPreview === widget) {
+                this.currentPreview = null;
+            }
         });
-    }
-    catch (error) {
-        console.error('Error starting streamlit preview:', error);
+        return widget;
     }
 }
+/**
+ * The streamlit preview plugin.
+ */
+const StreamlitPreviewPlugin = {
+    id: 'mito-ai:streamlit-preview',
+    autoStart: true,
+    requires: [_jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_0__.INotebookTracker, _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ICommandPalette, _AppDeploy_AppDeployPlugin__WEBPACK_IMPORTED_MODULE_12__.IAppDeployService, _AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_13__.IAppManagerService],
+    provides: IStreamlitPreviewManager,
+    activate: (app, notebookTracker, palette, appDeployService, appManagerService) => {
+        console.log('mito-ai: StreamlitPreviewPlugin activated');
+        // Create the service instance
+        const streamlitPreviewManager = new StreamlitAppPreviewManager(appDeployService, appManagerService);
+        // Add command to command palette
+        app.commands.addCommand(_commands__WEBPACK_IMPORTED_MODULE_11__.COMMAND_MITO_AI_PREVIEW_AS_STREAMLIT, {
+            label: 'Preview as Streamlit',
+            caption: 'Convert current notebook to Streamlit app and preview it',
+            execute: async () => {
+                // Instead of using the notebook tracker, we could pass the notebook panel directly, but this button
+                // is only used in the notebook toolbar, so its okay.
+                if (notebookTracker.currentWidget) {
+                    await streamlitPreviewManager.openAppPreview(app, notebookTracker.currentWidget);
+                }
+                else {
+                    console.error('No notebook is currently active');
+                }
+            }
+        });
+        // Add to command palette
+        palette.addItem({
+            command: _commands__WEBPACK_IMPORTED_MODULE_11__.COMMAND_MITO_AI_PREVIEW_AS_STREAMLIT,
+            category: 'Mito AI'
+        });
+        // Return the service so other plugins can use it
+        return streamlitPreviewManager;
+    }
+};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (StreamlitPreviewPlugin);
 
 
@@ -5310,12 +5537,15 @@ async function previewNotebookAsStreamlit(app, notebookTracker, appDeployService
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
+/* harmony export */   showUpdateAppDropdown: () => (/* binding */ showUpdateAppDropdown)
 /* 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 _style_EditAppDropdown_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../style/EditAppDropdown.css */ "./style/EditAppDropdown.css");
-/* harmony import */ var _utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/classNames */ "./lib/utils/classNames.js");
+/* harmony import */ var _utils_classNames__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/classNames */ "./lib/utils/classNames.js");
+/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ "./node_modules/react-dom/client.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ "./lib/Extensions/AppPreview/utils.js");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -5323,41 +5553,85 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const UpdateAppDropdown = ({ onSubmit, onClose }) => {
-    const [message, setMessage] = react__WEBPACK_IMPORTED_MODULE_0___default().useState('');
-    const handleSubmit = () => {
-        if (message.trim()) {
-            onSubmit(message);
-            onClose();
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Escape') {
-            onClose();
-        }
-    };
-    const disabled = message.trim() === '';
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "update-app-dropdown", onKeyDown: handleKeyDown },
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "update-app-dropdown-content" },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { htmlFor: "update-description", className: "update-app-dropdown-label" }, "How would you like to modify the app?"),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { id: "update-description", value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Describe your changes (e.g., Change the title, Remove a plot, etc.)", className: "update-app-dropdown-textarea", autoFocus: true }),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "update-app-dropdown-buttons" },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { onClick: onClose, className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_2__.classNames)("update-app-dropdown-button", "update-app-dropdown-button-cancel") }, "Cancel"),
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { onClick: handleSubmit, disabled: disabled, className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_2__.classNames)('update-app-dropdown-button', 'update-app-dropdown-button-submit', { 'disabled': disabled }) }, "Submit")))));
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UpdateAppDropdown);
-
 
-/***/ }),
 
-/***/ "./lib/Extensions/AppPreview/utils.js":
-/*!********************************************!*\
+/**
+ * Show the update app dropdown.
+ */
+const showUpdateAppDropdown = (buttonElement, notebookPanel) => {
+    // Remove any existing dropdown
+    const existingDropdown = document.querySelector('.update-app-dropdown');
+    if (existingDropdown) {
+        existingDropdown.remove();
+    }
+    const notebookPath = notebookPanel.context.path;
+    // Create dropdown container
+    const dropdownContainer = document.createElement('div');
+    dropdownContainer.className = 'update-app-dropdown';
+    // Position the dropdown below the button
+    const buttonRect = buttonElement.getBoundingClientRect();
+    dropdownContainer.style.top = `${buttonRect.bottom + 4}px`;
+    dropdownContainer.style.left = `${buttonRect.left}px`;
+    // Add to document
+    document.body.appendChild(dropdownContainer);
+    // Render the React component
+    (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(dropdownContainer).render(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(UpdateAppDropdown, { onSubmit: async (message) => {
+            // Save the notebook first to ensure app reads up to date version
+            await notebookPanel.context.save();
+            await (0,_utils__WEBPACK_IMPORTED_MODULE_3__.startStreamlitPreviewAndNotify)(notebookPath, true, message, 'Updating app...', 'App updated successfully!');
+            dropdownContainer.remove();
+        }, onClose: () => {
+            dropdownContainer.remove();
+        } }));
+    // Close dropdown when clicking outside
+    const handleClickOutside = (event) => {
+        if (!dropdownContainer.contains(event.target) &&
+            !buttonElement.contains(event.target)) {
+            dropdownContainer.remove();
+            document.removeEventListener('mousedown', handleClickOutside);
+        }
+    };
+    // Add click outside listener after a small delay to avoid immediate closure
+    setTimeout(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+    }, 100);
+};
+const UpdateAppDropdown = ({ onSubmit, onClose }) => {
+    const [message, setMessage] = react__WEBPACK_IMPORTED_MODULE_0___default().useState('');
+    const handleSubmit = () => {
+        if (message.trim()) {
+            onSubmit(message);
+            onClose();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            onClose();
+        }
+    };
+    const disabled = message.trim() === '';
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "update-app-dropdown", onKeyDown: handleKeyDown },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "update-app-dropdown-content" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { htmlFor: "update-description", className: "update-app-dropdown-label" }, "How would you like to modify the app?"),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { id: "update-description", value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Describe your changes (e.g., Change the title, Remove a plot, etc.)", className: "update-app-dropdown-textarea", autoFocus: true }),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "update-app-dropdown-buttons" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { onClick: onClose, className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_4__.classNames)("update-app-dropdown-button", "update-app-dropdown-button-cancel") }, "Cancel"),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { onClick: handleSubmit, disabled: disabled, className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_4__.classNames)('update-app-dropdown-button', 'update-app-dropdown-button-submit', { 'disabled': disabled }) }, "Submit")))));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UpdateAppDropdown);
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/AppPreview/utils.js":
+/*!********************************************!*\
   !*** ./lib/Extensions/AppPreview/utils.js ***!
   \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   showRecreateAppConfirmation: () => (/* binding */ showRecreateAppConfirmation),
 /* harmony export */   startStreamlitPreviewAndNotify: () => (/* binding */ startStreamlitPreviewAndNotify)
 /* harmony export */ });
 /* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
@@ -5371,8 +5645,8 @@ __webpack_require__.r(__webpack_exports__);
 
 const startStreamlitPreviewAndNotify = async (notebookPath, force_recreate = false, edit_prompt = '', start_notification_message = 'Building App Preview...', success_notification_message = 'Streamlit preview started successfully!') => {
     const notificationId = _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(start_notification_message, 'in-progress', { autoClose: false });
-    try {
-        const previewData = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__.startStreamlitPreview)(notebookPath, force_recreate, edit_prompt);
+    const previewData = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__.startStreamlitPreview)(notebookPath, force_recreate, edit_prompt);
+    if (previewData.type === 'success') {
         // Update notification to success
         _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.update({
             id: notificationId,
@@ -5380,19 +5654,32 @@ const startStreamlitPreviewAndNotify = async (notebookPath, force_recreate = fal
             type: 'success',
             autoClose: 5 * 1000
         });
-        return previewData;
     }
-    catch (error) {
+    else {
         // Display error notification
         _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.update({
             id: notificationId,
-            message: "Failed to start app preview: " + String(error),
+            message: "Failed to start app preview: " + String(previewData.message),
             type: 'error',
             autoClose: 5 * 1000
         });
-        return undefined;
     }
+    return previewData;
 };
+async function showRecreateAppConfirmation(notebookPath) {
+    const result = await (0,_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.showDialog)({
+        title: 'Recreate App',
+        body: 'This will recreate the app from scratch, discarding all your current edits. This action cannot be undone. Are you sure you want to continue?',
+        buttons: [
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Dialog.cancelButton({ label: 'Cancel' }),
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Dialog.warnButton({ label: 'Recreate App' })
+        ],
+        defaultButton: 1
+    });
+    if (result.button.accept) {
+        void startStreamlitPreviewAndNotify(notebookPath, true, undefined, 'Recreating app from scratch...', 'App recreated successfully!');
+    }
+}
 
 
 /***/ }),
@@ -6253,6 +6540,8 @@ const NotebookFooterPlugin = {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   COMMAND_MITO_AI_SETTINGS: () => (/* binding */ COMMAND_MITO_AI_SETTINGS),
+/* harmony export */   COMMAND_MITO_AI_SETTINGS_DATABASE: () => (/* binding */ COMMAND_MITO_AI_SETTINGS_DATABASE),
+/* harmony export */   COMMAND_MITO_AI_SETTINGS_SUBSCRIPTION: () => (/* binding */ COMMAND_MITO_AI_SETTINGS_SUBSCRIPTION),
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var _jupyterlab_application__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @jupyterlab/application */ "webpack/sharing/consume/default/@jupyterlab/application");
@@ -6270,6 +6559,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const COMMAND_MITO_AI_SETTINGS = 'mito-ai:open-settings';
+const COMMAND_MITO_AI_SETTINGS_SUBSCRIPTION = 'mito-ai:open-settings-subscription';
+const COMMAND_MITO_AI_SETTINGS_DATABASE = 'mito-ai:open-settings-database';
 /**
  * Initialization data for the mito settings extension.
  */
@@ -6283,8 +6574,8 @@ const SettingsManagerPlugin = {
 };
 function _activate(app, palette, contextManager, restorer) {
     // Create a widget creator function
-    const newWidget = () => {
-        const content = new _SettingsWidget__WEBPACK_IMPORTED_MODULE_3__.SettingsWidget(contextManager);
+    const newWidget = (initialTab) => {
+        const content = new _SettingsWidget__WEBPACK_IMPORTED_MODULE_3__.SettingsWidget(contextManager, initialTab);
         const widget = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.MainAreaWidget({ content });
         widget.id = 'mito-ai-settings';
         widget.title.label = 'Mito AI Settings';
@@ -6292,24 +6583,33 @@ function _activate(app, palette, contextManager, restorer) {
         return widget;
     };
     let widget = newWidget();
+    // Track and restore the widget state
+    const tracker = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.WidgetTracker({
+        namespace: widget.id
+    });
+    // Reusable function to open settings with a specific tab
+    const openSettingsWithTab = (initialTab) => {
+        // Dispose the old widget and create a new one with the specified tab
+        if (widget && !widget.isDisposed) {
+            widget.dispose();
+        }
+        widget = newWidget(initialTab);
+        // Add the widget to the tracker
+        if (!tracker.has(widget)) {
+            void tracker.add(widget);
+        }
+        // Add the widget to the app
+        if (!widget.isAttached) {
+            void app.shell.add(widget, 'main');
+        }
+        // Activate the widget
+        app.shell.activateById(widget.id);
+    };
     // Add an application command
     app.commands.addCommand(COMMAND_MITO_AI_SETTINGS, {
         label: 'Mito AI Settings',
         execute: () => {
-            // Create the widget if it doesn't exist or is disposed
-            if (!widget || widget.isDisposed) {
-                widget = newWidget();
-            }
-            // Add the widget to the tracker if not already there
-            if (!tracker.has(widget)) {
-                void tracker.add(widget);
-            }
-            // Add the widget to the app if not already attached
-            if (!widget.isAttached) {
-                void app.shell.add(widget, 'main');
-            }
-            // Activate the widget
-            app.shell.activateById(widget.id);
+            openSettingsWithTab();
         }
     });
     // Add the command to the palette
@@ -6317,9 +6617,19 @@ function _activate(app, palette, contextManager, restorer) {
         command: COMMAND_MITO_AI_SETTINGS,
         category: 'Mito AI'
     });
-    // Track and restore the widget state
-    const tracker = new _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.WidgetTracker({
-        namespace: widget.id
+    // Add a command to open settings with the subscription tab
+    app.commands.addCommand(COMMAND_MITO_AI_SETTINGS_SUBSCRIPTION, {
+        label: 'Mito AI Settings: Subscription',
+        execute: () => {
+            openSettingsWithTab('subscription');
+        }
+    });
+    // Add a command to open setting with the database tab
+    app.commands.addCommand(COMMAND_MITO_AI_SETTINGS_DATABASE, {
+        label: 'Mito AI Settings: Database',
+        execute: () => {
+            openSettingsWithTab('database');
+        }
     });
     if (!tracker.has(widget)) {
         void tracker.add(widget);
@@ -6348,11 +6658,12 @@ __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 _database_DatabasePage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./database/DatabasePage */ "./lib/Extensions/SettingsManager/database/DatabasePage.js");
-/* harmony import */ var _support_SupportPage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./support/SupportPage */ "./lib/Extensions/SettingsManager/support/SupportPage.js");
-/* harmony import */ var _general_GeneralPage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./general/GeneralPage */ "./lib/Extensions/SettingsManager/general/GeneralPage.js");
-/* harmony import */ var _rules_RulesPage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./rules/RulesPage */ "./lib/Extensions/SettingsManager/rules/RulesPage.js");
-/* harmony import */ var _profiler_ProfilerPage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./profiler/ProfilerPage */ "./lib/Extensions/SettingsManager/profiler/ProfilerPage.js");
+/* harmony import */ var _database_DatabasePage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./database/DatabasePage */ "./lib/Extensions/SettingsManager/database/DatabasePage.js");
+/* harmony import */ var _support_SupportPage__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./support/SupportPage */ "./lib/Extensions/SettingsManager/support/SupportPage.js");
+/* harmony import */ var _general_GeneralPage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./general/GeneralPage */ "./lib/Extensions/SettingsManager/general/GeneralPage.js");
+/* harmony import */ var _rules_RulesPage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./rules/RulesPage */ "./lib/Extensions/SettingsManager/rules/RulesPage.js");
+/* harmony import */ var _profiler_ProfilerPage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./profiler/ProfilerPage */ "./lib/Extensions/SettingsManager/profiler/ProfilerPage.js");
+/* harmony import */ var _subscription_SubscriptionPage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./subscription/SubscriptionPage */ "./lib/Extensions/SettingsManager/subscription/SubscriptionPage.js");
 /* harmony import */ var _style_SettingsWidget_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../style/SettingsWidget.css */ "./style/SettingsWidget.css");
 /*
  * Copyright (c) Saga Inc.
@@ -6366,30 +6677,35 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 const TABS_CONFIG = (contextManager) => ({
-    database: {
-        label: 'Database',
-        component: _database_DatabasePage__WEBPACK_IMPORTED_MODULE_3__.DatabasePage
-    },
     general: {
         label: 'General',
-        component: _general_GeneralPage__WEBPACK_IMPORTED_MODULE_4__.GeneralPage
+        component: _general_GeneralPage__WEBPACK_IMPORTED_MODULE_3__.GeneralPage
+    },
+    subscription: {
+        label: 'Subscription',
+        component: _subscription_SubscriptionPage__WEBPACK_IMPORTED_MODULE_4__.SubscriptionPage
+    },
+    database: {
+        label: 'Database',
+        component: _database_DatabasePage__WEBPACK_IMPORTED_MODULE_5__.DatabasePage
     },
     rules: {
         label: 'Rules',
-        component: _rules_RulesPage__WEBPACK_IMPORTED_MODULE_5__.RulesPage
+        component: _rules_RulesPage__WEBPACK_IMPORTED_MODULE_6__.RulesPage
     },
     profiler: {
         label: 'Profiler',
-        component: () => react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_profiler_ProfilerPage__WEBPACK_IMPORTED_MODULE_6__.ProfilerPage, { contextManager: contextManager })
+        component: () => react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_profiler_ProfilerPage__WEBPACK_IMPORTED_MODULE_7__.ProfilerPage, { contextManager: contextManager })
     },
     support: {
         label: 'Support',
-        component: _support_SupportPage__WEBPACK_IMPORTED_MODULE_7__.SupportPage
+        component: _support_SupportPage__WEBPACK_IMPORTED_MODULE_8__.SupportPage
     },
 });
-const App = ({ contextManager }) => {
-    const [activeTab, setActiveTab] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('database');
+const App = ({ contextManager, initialTab = 'general' }) => {
+    const [activeTab, setActiveTab] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialTab);
     const tabsConfig = TABS_CONFIG(contextManager);
     const renderContent = () => {
         const TabComponent = tabsConfig[activeTab].component;
@@ -6403,13 +6719,14 @@ const App = ({ contextManager }) => {
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "settings-main" }, renderContent()))));
 };
 class SettingsWidget extends _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ReactWidget {
-    constructor(contextManager) {
+    constructor(contextManager, initialTab) {
         super();
         this.contextManager = contextManager;
+        this.initialTab = initialTab;
         this.addClass('jp-ReactWidget');
     }
     render() {
-        return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(App, { contextManager: this.contextManager });
+        return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(App, { contextManager: this.contextManager, initialTab: this.initialTab });
     }
 }
 
@@ -7408,6 +7725,177 @@ const RulesPage = () => {
 };
 
 
+/***/ }),
+
+/***/ "./lib/Extensions/SettingsManager/subscription/FreeTierCard.js":
+/*!*********************************************************************!*\
+  !*** ./lib/Extensions/SettingsManager/subscription/FreeTierCard.js ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   FreeTierCard: () => (/* binding */ FreeTierCard)
+/* 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 _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _utils_stripe__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/stripe */ "./lib/utils/stripe.js");
+/* harmony import */ var _style_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../style/SubscriptionPage.css */ "./style/SubscriptionPage.css");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+
+const MAX_FREE_USAGE = 150;
+const FreeTierCard = () => {
+    const [usageCount, setUsageCount] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
+    const [resetDate, setResetDate] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    const percentage = Math.round((usageCount / MAX_FREE_USAGE) * 100);
+    const remainingUsage = MAX_FREE_USAGE - usageCount;
+    const getAiMitoApiNumUsages = async () => {
+        const usageCount = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getUserKey)('ai_mito_api_num_usages');
+        return usageCount ? parseInt(usageCount) : 0;
+    };
+    const getNextResetDate = async () => {
+        const lastResetDate = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getUserKey)('mito_ai_last_reset_date');
+        if (!lastResetDate)
+            return null;
+        // Parse the date and add one month
+        const lastReset = new Date(lastResetDate);
+        const nextReset = new Date(lastReset);
+        nextReset.setMonth(nextReset.getMonth() + 1);
+        // Format the date before returning
+        return nextReset.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    };
+    // When we first open the page, load the settings from the server
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        const fetchSettings = async () => {
+            const count = await getAiMitoApiNumUsages();
+            setUsageCount(count);
+            const nextReset = await getNextResetDate();
+            setResetDate(nextReset);
+        };
+        void fetchSettings();
+    }, []);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-card" },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-card-content" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", { className: "subscription-page-section-title" }, "Free Plan Usage"),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-usage-stats" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-usage-count" }, usageCount),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-usage-details" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null,
+                        "of ",
+                        MAX_FREE_USAGE,
+                        " messages"),
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null,
+                        "(",
+                        percentage,
+                        "% used)"))),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-progress-bar" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-progress-fill", style: { width: `${Math.min(percentage, 100)}%` } })),
+            remainingUsage > 0 ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "subscription-page-status-message" }, resetDate ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
+                "Your free usage resets ",
+                resetDate)) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
+                "\u2713 ",
+                remainingUsage,
+                " messages remaining")))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "subscription-page-status-warning" }, "You have reached your free usage limit. Upgrade to continue using Mito AI."))),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "subscription-page-button-container" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", { action: _utils_stripe__WEBPACK_IMPORTED_MODULE_3__.STRIPE_PAYMENT_LINK, method: "POST", target: "_blank" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "submit", className: "button-base button-purple subscription-page-button", onClick: () => {
+                        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.logEvent)('clicked_upgrade_to_pro_from_settings', {
+                            usage_count: usageCount,
+                            usage_percentage: percentage,
+                        });
+                    } },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("b", null, "Upgrade to Pro"))),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", { href: "https://www.trymito.io/plans", target: "_blank", rel: "noopener noreferrer", className: "button-base button-gray subscription-page-button", onClick: () => {
+                    void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.logEvent)('clicked_view_plans_from_settings', {
+                        usage_count: usageCount,
+                        usage_percentage: percentage,
+                    });
+                } },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("b", null, "View Plans")))));
+};
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/SettingsManager/subscription/ProCard.js":
+/*!****************************************************************!*\
+  !*** ./lib/Extensions/SettingsManager/subscription/ProCard.js ***!
+  \****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   ProCard: () => (/* binding */ ProCard)
+/* 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 _style_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../style/SubscriptionPage.css */ "./style/SubscriptionPage.css");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+const ProCard = () => {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "You are subscribed to Mito Pro."),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null,
+            "If you have questions about your subscription, please contact us at ",
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", { href: "mailto:founders@sagacollab.com " }, "founders@sagacollab.com"))));
+};
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/SettingsManager/subscription/SubscriptionPage.js":
+/*!*************************************************************************!*\
+  !*** ./lib/Extensions/SettingsManager/subscription/SubscriptionPage.js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SubscriptionPage: () => (/* binding */ SubscriptionPage)
+/* 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 _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _FreeTierCard__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./FreeTierCard */ "./lib/Extensions/SettingsManager/subscription/FreeTierCard.js");
+/* harmony import */ var _ProCard__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ProCard */ "./lib/Extensions/SettingsManager/subscription/ProCard.js");
+/* harmony import */ var _style_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../style/SubscriptionPage.css */ "./style/SubscriptionPage.css");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+
+
+const SubscriptionPage = () => {
+    const [isPro, setIsPro] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    // When we first open the page, load the settings from the server
+    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+        const fetchSettings = async () => {
+            const proStatus = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getUserKey)('is_pro');
+            setIsPro(proStatus === 'True');
+        };
+        void fetchSettings();
+    }, []);
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null,
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "settings-header" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", null, "Manage Subscription")),
+        isPro ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ProCard__WEBPACK_IMPORTED_MODULE_3__.ProCard, null) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FreeTierCard__WEBPACK_IMPORTED_MODULE_4__.FreeTierCard, null)));
+};
+
+
 /***/ }),
 
 /***/ "./lib/Extensions/SettingsManager/support/SupportPage.js":
@@ -7528,11 +8016,8 @@ const ToolbarButtonsPlugin = {
             caption: 'Preview notebook as app and turn on App Mode',
             className: 'text-button-mito-ai button-base button-purple button-small',
             execute: async () => {
-                void app.commands.execute('mito-ai:preview-as-streamlit');
+                void app.commands.execute(_commands__WEBPACK_IMPORTED_MODULE_2__.COMMAND_MITO_AI_PREVIEW_AS_STREAMLIT);
             },
-            isVisible: () => {
-                return app.commands.hasCommand(_commands__WEBPACK_IMPORTED_MODULE_2__.COMMAND_MITO_AI_BETA_MODE_ENABLED);
-            }
         });
         // Check if the beta mode is enabled. After checking, tell Jupyter to 
         // re-evaluate convert-to-streamlit visibility now that we have had the 
@@ -8133,6 +8618,76 @@ const AssumptionToolUI = ({ assumptions, }) => {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AssumptionToolUI);
 
 
+/***/ }),
+
+/***/ "./lib/components/AgentComponents/CreateStreamlitAppToolUI.js":
+/*!********************************************************************!*\
+  !*** ./lib/components/AgentComponents/CreateStreamlitAppToolUI.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 _ShimmerWrapper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ShimmerWrapper */ "./lib/components/AgentComponents/ShimmerWrapper.js");
+/* harmony import */ var _icons_AppIcon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../icons/AppIcon */ "./lib/icons/AppIcon.js");
+/* harmony import */ var _style_AgentToolUIComponent_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../style/AgentToolUIComponent.css */ "./style/AgentToolUIComponent.css");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+
+const CreateStreamlitAppToolUI = ({ isRunning = false }) => {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "agent-tool-ui-container" },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ShimmerWrapper__WEBPACK_IMPORTED_MODULE_2__["default"], { isActive: isRunning },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "agent-tool-ui-content" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_AppIcon__WEBPACK_IMPORTED_MODULE_3__["default"], null),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, "Creating Streamlit app")))));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CreateStreamlitAppToolUI);
+
+
+/***/ }),
+
+/***/ "./lib/components/AgentComponents/EditStreamlitAppToolUI.js":
+/*!******************************************************************!*\
+  !*** ./lib/components/AgentComponents/EditStreamlitAppToolUI.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 _icons_Pencil__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../icons/Pencil */ "./lib/icons/Pencil.js");
+/* harmony import */ var _ShimmerWrapper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ShimmerWrapper */ "./lib/components/AgentComponents/ShimmerWrapper.js");
+/* harmony import */ var _style_AgentToolUIComponent_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../style/AgentToolUIComponent.css */ "./style/AgentToolUIComponent.css");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+
+const EditStreamlitAppToolUI = ({ isRunning = false }) => {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "agent-tool-ui-container" },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_ShimmerWrapper__WEBPACK_IMPORTED_MODULE_2__["default"], { isActive: isRunning },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "agent-tool-ui-content" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_Pencil__WEBPACK_IMPORTED_MODULE_3__["default"], null),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, "Editing Streamlit app")))));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EditStreamlitAppToolUI);
+
+
 /***/ }),
 
 /***/ "./lib/components/AgentComponents/ErrorFixupToolUI.js":
@@ -8286,10 +8841,10 @@ const RunAllCellsToolUI = ({ inErrorFixup }) => {
 
 /***/ }),
 
-/***/ "./lib/components/AttachFileButton.js":
-/*!********************************************!*\
-  !*** ./lib/components/AttachFileButton.js ***!
-  \********************************************/
+/***/ "./lib/components/AgentComponents/ShimmerWrapper.js":
+/*!**********************************************************!*\
+  !*** ./lib/components/AgentComponents/ShimmerWrapper.js ***!
+  \**********************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -8298,11 +8853,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _IconButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./IconButton */ "./lib/components/IconButton.js");
-/* harmony import */ var _icons_PaperClipIcon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icons/PaperClipIcon */ "./lib/icons/PaperClipIcon.js");
-/* harmony import */ var _restAPI_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../restAPI/utils */ "./lib/restAPI/utils.js");
-/* 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_classNames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/classNames */ "./lib/utils/classNames.js");
+/* harmony import */ var _style_ShimmerWrapper_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../style/ShimmerWrapper.css */ "./style/ShimmerWrapper.css");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -8310,23 +8862,41 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+const ShimmerWrapper = ({ children, isActive = false, className = '' }) => {
+    const shimmerClass = isActive ? 'shimmer-wrapper' : '';
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: (0,_utils_classNames__WEBPACK_IMPORTED_MODULE_2__.classNames)(shimmerClass, className) }, children));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShimmerWrapper);
+
+
+/***/ }),
+
+/***/ "./lib/components/AttachFileButton.js":
+/*!********************************************!*\
+  !*** ./lib/components/AttachFileButton.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 _IconButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./IconButton */ "./lib/components/IconButton.js");
+/* harmony import */ var _icons_PaperClipIcon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../icons/PaperClipIcon */ "./lib/icons/PaperClipIcon.js");
+/* harmony import */ var _utils_fileUpload__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/fileUpload */ "./lib/utils/fileUpload.js");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
 
 
-// Constants for file handling
-const CHUNKED_UPLOAD_SIZE_CUTOFF = 25 * 1024 * 1024; // 25MB cutoff for chunked uploads
-const CHUNK_SIZE = 10 * 1024 * 1024; // 10MB chunks
 const AttachFileButton = ({ onFileUploaded, notebookTracker }) => {
     const fileInputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     const [isUploading, setIsUploading] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
-    // Helper function to get notebook directory from notebook path
-    const getNotebookDirectory = (notebookPath) => {
-        const lastSlashIndex = notebookPath.lastIndexOf('/');
-        if (lastSlashIndex === -1) {
-            // No directory, just filename (root directory)
-            return '.';
-        }
-        return notebookPath.substring(0, lastSlashIndex);
-    };
     const handleClick = () => {
         var _a;
         // Don't allow clicks if uploading
@@ -8347,21 +8917,11 @@ const AttachFileButton = ({ onFileUploaded, notebookTracker }) => {
             return;
         setIsUploading(true);
         try {
-            // Check file size and handle accordingly
-            if (file.size > CHUNKED_UPLOAD_SIZE_CUTOFF) {
-                console.log(`File ${file.name} is larger than 25MB (${(file.size / (1024 * 1024)).toFixed(2)}MB). Splitting into chunks...`);
-                await handleLargeFile(file);
-            }
-            else {
-                // Upload file directly for files <= 25MB
-                await uploadFile(file);
-            }
+            // Use the shared upload utility
+            await (0,_utils_fileUpload__WEBPACK_IMPORTED_MODULE_1__.uploadFileToBackend)(file, notebookTracker, onFileUploaded);
         }
         catch (error) {
-            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit(`Upload failed: ${error}`, "error", {
-                autoClose: 5 * 1000 // 5 seconds
-            });
-            console.error('Error during file upload:', error);
+            // Error handling is already done in the utility function
         }
         finally {
             setIsUploading(false);
@@ -8371,116 +8931,9 @@ const AttachFileButton = ({ onFileUploaded, notebookTracker }) => {
             }
         }
     };
-    const handleLargeFile = async (file) => {
-        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
-        console.log(`Splitting file into ${totalChunks} chunks of ${(CHUNK_SIZE / (1024 * 1024)).toFixed(2)}MB each`);
-        // Get notebook directory path
-        const notebookPanel = notebookTracker.currentWidget;
-        if (!notebookPanel) {
-            console.error('No notebook is currently active');
-            throw new Error('No notebook is currently active');
-        }
-        const notebookPath = notebookPanel.context.path;
-        const notebookDir = getNotebookDirectory(notebookPath);
-        for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
-            const start = chunkIndex * CHUNK_SIZE;
-            const end = Math.min(start + CHUNK_SIZE, file.size);
-            const chunk = file.slice(start, end);
-            console.log(`Uploading chunk ${chunkIndex + 1}/${totalChunks}:`, {
-                chunkNumber: chunkIndex + 1,
-                totalChunks: totalChunks,
-                chunkSize: chunk.size,
-                chunkSizeMB: (chunk.size / (1024 * 1024)).toFixed(2),
-                startByte: start,
-                endByte: end,
-                fileName: file.name,
-                originalFileSize: file.size,
-                originalFileSizeMB: (file.size / (1024 * 1024)).toFixed(2)
-            });
-            // Upload chunk to backend
-            const success = await uploadChunk(chunk, file.name, chunkIndex + 1, totalChunks, notebookDir);
-            if (!success) {
-                console.error(`Failed to upload chunk ${chunkIndex + 1}`);
-                throw new Error(`Failed to upload chunk ${chunkIndex + 1}`);
-            }
-        }
-        console.log(`Successfully uploaded all ${totalChunks} chunks for file: ${file.name}`);
-        // Notify the parent component that the file was uploaded
-        onFileUploaded(file);
-    };
-    const uploadChunk = async (chunk, filename, chunkNumber, totalChunks, notebookDir) => {
-        try {
-            // Create FormData for chunk upload
-            const formData = new FormData();
-            formData.append('file', chunk, filename);
-            formData.append('chunk_number', chunkNumber.toString());
-            formData.append('total_chunks', totalChunks.toString());
-            formData.append('notebook_dir', notebookDir);
-            // Upload chunk to backend
-            const resp = await (0,_restAPI_utils__WEBPACK_IMPORTED_MODULE_2__.requestAPI)('upload', {
-                method: 'POST',
-                body: formData
-            });
-            if (resp.error) {
-                _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit(`Upload failed: ${resp.error.message}`, "error", {
-                    autoClose: 5 * 1000 // 5 seconds
-                });
-                console.error(`Chunk ${chunkNumber} upload failed:`, resp.error.message);
-                return false;
-            }
-            else if (resp.data) {
-                if (resp.data.chunk_complete) {
-                    console.log(`All chunks uploaded successfully. File reconstructed: ${resp.data.filename}`);
-                }
-                else if (resp.data.chunk_received) {
-                    console.log(`Chunk ${resp.data.chunk_number}/${resp.data.total_chunks} uploaded successfully`);
-                }
-                return true;
-            }
-            return false;
-        }
-        catch (error) {
-            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit(`Upload failed: ${error}`, "error", {
-                autoClose: 5 * 1000 // 5 seconds
-            });
-            console.error(`Error uploading chunk ${chunkNumber}:`, error);
-            return false;
-        }
-    };
-    const uploadFile = async (file) => {
-        // Get notebook directory path
-        const notebookPanel = notebookTracker.currentWidget;
-        if (!notebookPanel) {
-            console.error('No notebook is currently active');
-            throw new Error('No notebook is currently active');
-        }
-        const notebookPath = notebookPanel.context.path;
-        const notebookDir = getNotebookDirectory(notebookPath);
-        // Create FormData for file upload
-        const formData = new FormData();
-        formData.append('file', file);
-        formData.append('notebook_dir', notebookDir);
-        // Upload file to backend using FormData
-        const resp = await (0,_restAPI_utils__WEBPACK_IMPORTED_MODULE_2__.requestAPI)('upload', {
-            method: 'POST',
-            body: formData
-        });
-        if (resp.error) {
-            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit(`Upload failed: ${resp.error.message}`, "error", {
-                autoClose: 5 * 1000 // 5 seconds
-            });
-            console.error('Upload failed:', resp.error.message);
-        }
-        else if (resp.data) {
-            console.log('File uploaded successfully:', resp.data);
-            // Notify the parent component that the file was uploaded, 
-            // which will update the context manager.
-            onFileUploaded(file);
-        }
-    };
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { style: { position: 'relative' } },
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleFileSelect, accept: "*" }),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_IconButton__WEBPACK_IMPORTED_MODULE_3__["default"], { icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_PaperClipIcon__WEBPACK_IMPORTED_MODULE_4__["default"], null), title: isUploading ? 'Uploading...' : 'Attach File', onClick: handleClick, className: 'icon-button-hover', disabled: isUploading, style: {
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_IconButton__WEBPACK_IMPORTED_MODULE_2__["default"], { icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_PaperClipIcon__WEBPACK_IMPORTED_MODULE_3__["default"], null), title: isUploading ? 'Uploading...' : 'Attach File', onClick: handleClick, className: 'icon-button-hover', disabled: isUploading, style: {
                 ...(isUploading && { opacity: 0.5 }),
                 cursor: isUploading ? 'not-allowed' : 'pointer'
             } })));
@@ -8535,7 +8988,7 @@ const DatabaseButton = ({ app }) => {
         return Object.keys(databaseConnections).length > 0 ? 'success' : 'warning';
     };
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_IconButton__WEBPACK_IMPORTED_MODULE_2__["default"], { icon: react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_icons_DatabaseOutlineIcon__WEBPACK_IMPORTED_MODULE_3__["default"], null), title: 'Add Database', onClick: () => {
-            void app.commands.execute(_Extensions_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_4__.COMMAND_MITO_AI_SETTINGS);
+            void app.commands.execute(_Extensions_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_4__.COMMAND_MITO_AI_SETTINGS_DATABASE);
             setIsIconVisible(false);
         }, notificationDotType: getNotificationDotType(), className: 'icon-button-hover', style: {
             height: 'var(--chat-context-button-height)'
@@ -9170,6 +9623,36 @@ const AlertIcon = () => (react__WEBPACK_IMPORTED_MODULE_0___default().createElem
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AlertIcon);
 
 
+/***/ }),
+
+/***/ "./lib/icons/AppIcon.js":
+/*!******************************!*\
+  !*** ./lib/icons/AppIcon.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__);
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+const AppIcon = () => {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1", fill: "none" }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", { x: "4", y: "4", width: "3", height: "3", fill: "currentColor" }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", { x: "9", y: "4", width: "3", height: "3", fill: "currentColor" }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", { x: "4", y: "9", width: "3", height: "3", fill: "currentColor" }),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("rect", { x: "9", y: "9", width: "3", height: "3", fill: "currentColor" })));
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AppIcon);
+
+
 /***/ }),
 
 /***/ "./lib/icons/CodeIcon.js":
@@ -9903,7 +10386,11 @@ const startStreamlitPreview = async (notebookPath, force_recreate = false, edit_
         })
     });
     if (response.error) {
-        throw new Error(response.error.message);
+        const streamlitPreviewReponseError = {
+            type: 'error',
+            message: response.error.message
+        };
+        return streamlitPreviewReponseError;
     }
     return response.data;
 };
@@ -10958,6 +11445,166 @@ const stripFileEnding = (rule) => {
 };
 
 
+/***/ }),
+
+/***/ "./lib/utils/fileUpload.js":
+/*!*********************************!*\
+  !*** ./lib/utils/fileUpload.js ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   uploadFileToBackend: () => (/* binding */ uploadFileToBackend)
+/* harmony export */ });
+/* harmony import */ var _restAPI_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../restAPI/utils */ "./lib/restAPI/utils.js");
+/* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @jupyterlab/apputils */ "webpack/sharing/consume/default/@jupyterlab/apputils");
+/* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__);
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+const CHUNKED_UPLOAD_SIZE_CUTOFF = 25 * 1024 * 1024; // 25MB cutoff for chunked uploads
+const CHUNK_SIZE = 10 * 1024 * 1024; // 10MB chunks
+const getNotebookDirectory = (notebookPath) => {
+    const lastSlashIndex = notebookPath.lastIndexOf('/');
+    if (lastSlashIndex === -1) {
+        // No directory, just filename (root directory)
+        return '.';
+    }
+    return notebookPath.substring(0, lastSlashIndex);
+};
+const uploadChunk = async (chunk, filename, chunkNumber, totalChunks, notebookDir) => {
+    try {
+        // Create FormData for chunk upload
+        const formData = new FormData();
+        formData.append('file', chunk, filename);
+        formData.append('chunk_number', chunkNumber.toString());
+        formData.append('total_chunks', totalChunks.toString());
+        formData.append('notebook_dir', notebookDir);
+        // Upload chunk to backend
+        const resp = await (0,_restAPI_utils__WEBPACK_IMPORTED_MODULE_1__.requestAPI)('upload', {
+            method: 'POST',
+            body: formData
+        });
+        if (resp.error) {
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(`Upload failed: ${resp.error.message}`, "error", {
+                autoClose: 5 * 1000 // 5 seconds
+            });
+            console.error(`Chunk ${chunkNumber} upload failed:`, resp.error.message);
+            return false;
+        }
+        else if (resp.data) {
+            if (resp.data.chunk_complete) {
+                console.log(`All chunks uploaded successfully. File reconstructed: ${resp.data.filename}`);
+            }
+            else if (resp.data.chunk_received) {
+                console.log(`Chunk ${resp.data.chunk_number}/${resp.data.total_chunks} uploaded successfully`);
+            }
+            return true;
+        }
+        return false;
+    }
+    catch (error) {
+        _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(`Upload failed: ${error}`, "error", {
+            autoClose: 5 * 1000 // 5 seconds
+        });
+        console.error(`Error uploading chunk ${chunkNumber}:`, error);
+        return false;
+    }
+};
+const handleLargeFile = async (file, notebookTracker, onFileUploaded) => {
+    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+    console.log(`Splitting file into ${totalChunks} chunks of ${(CHUNK_SIZE / (1024 * 1024)).toFixed(2)}MB each`);
+    // Get notebook directory path
+    const notebookPanel = notebookTracker.currentWidget;
+    if (!notebookPanel) {
+        console.error('No notebook is currently active');
+        throw new Error('No notebook is currently active');
+    }
+    const notebookPath = notebookPanel.context.path;
+    const notebookDir = getNotebookDirectory(notebookPath);
+    for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+        const start = chunkIndex * CHUNK_SIZE;
+        const end = Math.min(start + CHUNK_SIZE, file.size);
+        const chunk = file.slice(start, end);
+        console.log(`Uploading chunk ${chunkIndex + 1}/${totalChunks}:`, {
+            chunkNumber: chunkIndex + 1,
+            totalChunks: totalChunks,
+            chunkSize: chunk.size,
+            chunkSizeMB: (chunk.size / (1024 * 1024)).toFixed(2),
+            startByte: start,
+            endByte: end,
+            fileName: file.name,
+            originalFileSize: file.size,
+            originalFileSizeMB: (file.size / (1024 * 1024)).toFixed(2)
+        });
+        // Upload chunk to backend
+        const success = await uploadChunk(chunk, file.name, chunkIndex + 1, totalChunks, notebookDir);
+        if (!success) {
+            console.error(`Failed to upload chunk ${chunkIndex + 1}`);
+            throw new Error(`Failed to upload chunk ${chunkIndex + 1}`);
+        }
+    }
+    console.log(`Successfully uploaded all ${totalChunks} chunks for file: ${file.name}`);
+    // Notify the parent component that the file was uploaded
+    onFileUploaded(file);
+};
+const uploadFile = async (file, notebookTracker, onFileUploaded) => {
+    // Get notebook directory path
+    const notebookPanel = notebookTracker.currentWidget;
+    if (!notebookPanel) {
+        console.error('No notebook is currently active');
+        throw new Error('No notebook is currently active');
+    }
+    const notebookPath = notebookPanel.context.path;
+    const notebookDir = getNotebookDirectory(notebookPath);
+    // Create FormData for file upload
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('notebook_dir', notebookDir);
+    // Upload file to backend using FormData
+    const resp = await (0,_restAPI_utils__WEBPACK_IMPORTED_MODULE_1__.requestAPI)('upload', {
+        method: 'POST',
+        body: formData
+    });
+    if (resp.error) {
+        _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(`Upload failed: ${resp.error.message}`, "error", {
+            autoClose: 5 * 1000 // 5 seconds
+        });
+        console.error('Upload failed:', resp.error.message);
+    }
+    else if (resp.data) {
+        console.log('File uploaded successfully:', resp.data);
+        // Notify the parent component that the file was uploaded, 
+        // which will update the context manager.
+        onFileUploaded(file);
+    }
+};
+const uploadFileToBackend = async (file, notebookTracker, onFileUploaded) => {
+    try {
+        // Check file size and handle accordingly
+        if (file.size > CHUNKED_UPLOAD_SIZE_CUTOFF) {
+            console.log(`File ${file.name} is larger than 25MB (${(file.size / (1024 * 1024)).toFixed(2)}MB). Splitting into chunks...`);
+            await handleLargeFile(file, notebookTracker, onFileUploaded);
+        }
+        else {
+            // Upload file directly for files <= 25MB
+            await uploadFile(file, notebookTracker, onFileUploaded);
+        }
+    }
+    catch (error) {
+        _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.Notification.emit(`Upload failed: ${error}`, "error", {
+            autoClose: 5 * 1000 // 5 seconds
+        });
+        console.error('Error during file upload:', error);
+        throw error;
+    }
+};
+
+
 /***/ }),
 
 /***/ "./lib/utils/models.js":
@@ -12372,10 +13019,10 @@ class AppDeployWebsocketClient extends _BaseWebsocketClient__WEBPACK_IMPORTED_MO
             if (message.error) {
                 this._stream.emit({
                     type: 'chunk',
-                    chunk: { content: message.error.hint || message.error.title || "An error occurred" },
+                    chunk: { content: message.error.hint || message.error.message || "An error occurred" },
                     done: true,
                     parent_id: message.parent_id,
-                    error: message.error
+                    error: message.error.message
                 });
             }
             // This will get triggered when streaming and there is an error message.
@@ -12736,8 +13383,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     display: flex;
     align-items: center;
     gap: 10px;
-} 
-`, "",{"version":3,"sources":["webpack://./style/AgentToolUIComponent.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,sBAAsB;IACtB,6BAA6B;IAC7B,aAAa;IACb,+BAA+B;AACnC;;AAEA;IACI,cAAc;IACd,kBAAkB;IAClB,oDAAoD;AACxD;;AAEA;IACI,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,SAAS;AACb","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.agent-tool-ui-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: start;\n    background-color: transparent;\n    padding: 10px;\n    color: var(--jp-ui-font-color2);\n}\n\n.agent-tool-ui-container:not(.agent-tool-ui-error-fixup) {\n    margin: 10px 0;\n    border-radius: 5px;\n    border: 1px solid var(--jp-cell-editor-border-color);\n}\n\n.agent-tool-ui-container:not(.agent-tool-ui-error-fixup) .agent-tool-ui-content {\n    margin-left: 5px;\n}\n\n.agent-tool-ui-content {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n} \n"],"sourceRoot":""}]);
+}
+
+`, "",{"version":3,"sources":["webpack://./style/AgentToolUIComponent.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,sBAAsB;IACtB,6BAA6B;IAC7B,aAAa;IACb,+BAA+B;AACnC;;AAEA;IACI,cAAc;IACd,kBAAkB;IAClB,oDAAoD;AACxD;;AAEA;IACI,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,SAAS;AACb","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.agent-tool-ui-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: start;\n    background-color: transparent;\n    padding: 10px;\n    color: var(--jp-ui-font-color2);\n}\n\n.agent-tool-ui-container:not(.agent-tool-ui-error-fixup) {\n    margin: 10px 0;\n    border-radius: 5px;\n    border: 1px solid var(--jp-cell-editor-border-color);\n}\n\n.agent-tool-ui-container:not(.agent-tool-ui-error-fixup) .agent-tool-ui-content {\n    margin-left: 5px;\n}\n\n.agent-tool-ui-content {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -13949,6 +14597,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   margin-top: 0;
 }
 
+.chat-input-container.drag-over {
+  border: 2px dashed var(--purple-500);
+  transform: scale(1.02);
+}
+
 .chat-input-text-area-container {
   position: relative;
   height: min-content;
@@ -14029,7 +14682,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .context-button:disabled:hover {
   background-color: var(--jp-layout-color2);
-}`, "",{"version":3,"sources":["webpack://./style/ChatInput.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,gBAAgB;EAChB,SAAS;EACT,cAAc;EACd,gBAAgB;EAChB,2DAA2D;EAC3D;;;iCAG+B;EAC/B,WAAW;EACX,mBAAmB;EACnB,iDAAiD;AACnD;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,mBAAmB;AACrB;;AAEA;EACE,aAAa;EACb,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,aAAa;EACb,gBAAgB;EAChB,sBAAsB;EACtB,yBAAyB;EACzB,2DAA2D;EAC3D,eAAe;EACf,gBAAgB;EAChB,qCAAqC;EACrC,gBAAgB;EAChB,iDAAiD;AACnD;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,2BAA2B;EAC3B;;;iCAG+B;AACjC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,+BAA+B;EAC/B,2BAA2B;AAC7B;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,yCAAyC;EACzC,eAAe;EACf,oCAAoC;EACpC,sCAAsC;AACxC;;AAEA;EACE,yCAAyC;AAC3C;;AAEA,0BAA0B;AAC1B;EACE,YAAY;EACZ,mBAAmB;EACnB,yCAAyC;AAC3C;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,yCAAyC;AAC3C;;AAEA;EACE,yCAAyC;AAC3C","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.chat-input-container {\n  position: sticky;\n  bottom: 0;\n  margin: 10px 0;\n  margin-top: auto;\n  background-color: var(--chat-user-message-background-color);\n  box-shadow: \n    0 4px 12px rgba(0, 0, 0, 0.08),\n    0 2px 4px rgba(0, 0, 0, 0.06),\n    0 0 0 1px rgba(0, 0, 0, 0.02);\n  width: 100%;\n  border-radius: 12px;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.chat-input-container.editing {\n  margin-top: 0;\n}\n\n.chat-input-text-area-container {\n  position: relative;\n  height: min-content;\n}\n\n.chat-input {\n  outline: none;\n  border: none;\n  resize: none;\n  width: 100%;\n  padding: 10px;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex-shrink: 0 !important;\n  background-color: var(--chat-user-message-background-color);\n  font-size: 12px;\n  font-weight: 400;\n  font-family: var(--jp-ui-font-family);\n  line-height: 1.2;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.active-cell-preview-container {\n  padding: 10px;\n}\n\n.chat-input-container:focus-within {\n  transform: translateY(-1px);\n  box-shadow: \n    0 2px 8px rgba(0, 0, 0, 0.12),\n    0 8px 16px rgba(0, 0, 0, 0.08),\n    0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n\n.chat-input:focus {\n  color: var(--jp-ui-font-color1);\n}\n\n.chat-input::placeholder {\n  color: var(--jp-ui-font-color2);\n  transition: color 0.2s ease;\n}\n\n.chat-input:focus::placeholder {\n  color: var(--jp-ui-font-color3);\n}\n\n.context-button {\n  display: flex;\n  align-items: center;\n  background-color: var(--jp-layout-color2);\n  border: 1px solid var(--jp-border-color1);\n  border-radius: 3px;\n  padding: 4px 8px;\n  font-size: 12px;\n  height: var(--chat-context-button-height);\n  cursor: pointer;\n  color: var(--jp-content-font-color1);\n  transition: background-color 0.2s ease;\n}\n\n.context-button:hover {\n  background-color: var(--jp-layout-color3);\n}\n\n/* Disabled state styles */\n.chat-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-color: var(--jp-layout-color2);\n}\n\n.context-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-color: var(--jp-layout-color2);\n}\n\n.context-button:disabled:hover {\n  background-color: var(--jp-layout-color2);\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./style/ChatInput.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,gBAAgB;EAChB,SAAS;EACT,cAAc;EACd,gBAAgB;EAChB,2DAA2D;EAC3D;;;iCAG+B;EAC/B,WAAW;EACX,mBAAmB;EACnB,iDAAiD;AACnD;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,oCAAoC;EACpC,sBAAsB;AACxB;;AAEA;EACE,kBAAkB;EAClB,mBAAmB;AACrB;;AAEA;EACE,aAAa;EACb,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,aAAa;EACb,gBAAgB;EAChB,sBAAsB;EACtB,yBAAyB;EACzB,2DAA2D;EAC3D,eAAe;EACf,gBAAgB;EAChB,qCAAqC;EACrC,gBAAgB;EAChB,iDAAiD;AACnD;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,2BAA2B;EAC3B;;;iCAG+B;AACjC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,+BAA+B;EAC/B,2BAA2B;AAC7B;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,yCAAyC;EACzC,eAAe;EACf,oCAAoC;EACpC,sCAAsC;AACxC;;AAEA;EACE,yCAAyC;AAC3C;;AAEA,0BAA0B;AAC1B;EACE,YAAY;EACZ,mBAAmB;EACnB,yCAAyC;AAC3C;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,yCAAyC;AAC3C;;AAEA;EACE,yCAAyC;AAC3C","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.chat-input-container {\n  position: sticky;\n  bottom: 0;\n  margin: 10px 0;\n  margin-top: auto;\n  background-color: var(--chat-user-message-background-color);\n  box-shadow: \n    0 4px 12px rgba(0, 0, 0, 0.08),\n    0 2px 4px rgba(0, 0, 0, 0.06),\n    0 0 0 1px rgba(0, 0, 0, 0.02);\n  width: 100%;\n  border-radius: 12px;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.chat-input-container.editing {\n  margin-top: 0;\n}\n\n.chat-input-container.drag-over {\n  border: 2px dashed var(--purple-500);\n  transform: scale(1.02);\n}\n\n.chat-input-text-area-container {\n  position: relative;\n  height: min-content;\n}\n\n.chat-input {\n  outline: none;\n  border: none;\n  resize: none;\n  width: 100%;\n  padding: 10px;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex-shrink: 0 !important;\n  background-color: var(--chat-user-message-background-color);\n  font-size: 12px;\n  font-weight: 400;\n  font-family: var(--jp-ui-font-family);\n  line-height: 1.2;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.active-cell-preview-container {\n  padding: 10px;\n}\n\n.chat-input-container:focus-within {\n  transform: translateY(-1px);\n  box-shadow: \n    0 2px 8px rgba(0, 0, 0, 0.12),\n    0 8px 16px rgba(0, 0, 0, 0.08),\n    0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n\n.chat-input:focus {\n  color: var(--jp-ui-font-color1);\n}\n\n.chat-input::placeholder {\n  color: var(--jp-ui-font-color2);\n  transition: color 0.2s ease;\n}\n\n.chat-input:focus::placeholder {\n  color: var(--jp-ui-font-color3);\n}\n\n.context-button {\n  display: flex;\n  align-items: center;\n  background-color: var(--jp-layout-color2);\n  border: 1px solid var(--jp-border-color1);\n  border-radius: 3px;\n  padding: 4px 8px;\n  font-size: 12px;\n  height: var(--chat-context-button-height);\n  cursor: pointer;\n  color: var(--jp-content-font-color1);\n  transition: background-color 0.2s ease;\n}\n\n.context-button:hover {\n  background-color: var(--jp-layout-color3);\n}\n\n/* Disabled state styles */\n.chat-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-color: var(--jp-layout-color2);\n}\n\n.context-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-color: var(--jp-layout-color2);\n}\n\n.context-button:disabled:hover {\n  background-color: var(--jp-layout-color2);\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -15479,7 +16132,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 }
 
 .file-list input[type="checkbox"],
-.select-all input[type="checkbox"]{
+.files-selector-select-all input[type="checkbox"]{
   transform: scale(1.3);
   margin-right: 6px;
   accent-color: var(--purple-500);
@@ -15549,7 +16202,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 .files-selector-select-all {
   margin-bottom: 8px;
 }
-`, "",{"version":3,"sources":["webpack://./style/FilesSelector.css"],"names":[],"mappings":"AAAA;;;EAGE;;;AAGF;EACE,gBAAgB;EAChB,eAAe;EACf,SAAS;AACX;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,aAAa;EACb,yBAAyB;AAC3B;;AAEA;EACE,eAAe;EACf,8CAA8C;EAC9C,mCAAmC;EACnC,uBAAuB;EACvB,6BAA6B;EAC7B,2BAA2B;EAC3B,4BAA4B;EAC5B,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;AACnC;;AAEA;EACE,8CAA8C;AAChD;;AAEA;;EAEE,qBAAqB;EACrB,iBAAiB;EACjB,+BAA+B;AACjC;;AAEA;EACE,WAAW;EACX,iBAAiB;EACjB,sBAAsB;AACxB;;AAEA;EACE,gBAAgB;EAChB,aAAa;EACb,mBAAmB;EACnB,QAAQ;AACV;;AAEA,iBAAiB;AACjB;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,QAAQ;EACR,kBAAkB;AACpB;;AAEA;EACE,SAAS;EACT,iBAAiB;AACnB;;;AAGA;EACE,iBAAiB;EACjB,WAAW;EACX,SAAS;EACT,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;AACpB;;AAEA,+BAA+B;AAC/B;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;AACV;;AAEA,yBAAyB;AACzB;EACE,iBAAiB;EACjB,gBAAgB;EAChB,eAAe;AACjB;;AAEA,oBAAoB;AACpB;EACE,gBAAgB;EAChB,eAAe;EACf,SAAS;AACX;;AAEA,uBAAuB;AACvB;EACE,kBAAkB;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\n.file-list {\n  list-style: none;\n  padding-left: 0;\n  margin: 0;\n}\n\n.file-list li {\n  margin-bottom: 6px;\n}\n\n.modal-footer {\n  margin-top: 16px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.files-selector-submit-button {\n  margin-top: 8px;\n  background-color: var(--purple-400) !important;\n  color: var(--purple-700) !important;\n  border: none !important;\n  border-radius: 4px !important;\n  font-weight: 500 !important;\n  padding: 8px 16px !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  box-sizing: border-box !important;\n}\n\n.files-selector-submit-button:hover {\n  background-color: var(--purple-500) !important;\n}\n\n.file-list input[type=\"checkbox\"],\n.select-all input[type=\"checkbox\"]{\n  transform: scale(1.3);\n  margin-right: 6px;\n  accent-color: var(--purple-500);\n}\n\n.file-list svg {\n  color: grey;\n  margin-right: 4px;\n  vertical-align: middle;\n}\n\n.select-all label {\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* Modal header */\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 1px;\n}\n\n.modal-title {\n  margin: 0;\n  font-size: 1.2rem;\n}\n\n\n.modal-subtext {\n  font-size: 0.7rem;\n  color: #555;\n  margin: 0;\n  font-style: italic;\n}\n\n.modal-subheader{\n  margin-bottom: 7px;\n}\n\n/* Checkbox label for spacing */\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* Scrollable file list */\n.file-list-scrollable {\n  max-height: 300px;\n  overflow-y: auto;\n  margin-top: 8px;\n}\n\n/* File list items */\n.file-list {\n  list-style: none;\n  padding-left: 0;\n  margin: 0;\n}\n\n/* Select all section */\n.files-selector-select-all {\n  margin-bottom: 8px;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./style/FilesSelector.css"],"names":[],"mappings":"AAAA;;;EAGE;;;AAGF;EACE,gBAAgB;EAChB,eAAe;EACf,SAAS;AACX;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,aAAa;EACb,yBAAyB;AAC3B;;AAEA;EACE,eAAe;EACf,8CAA8C;EAC9C,mCAAmC;EACnC,uBAAuB;EACvB,6BAA6B;EAC7B,2BAA2B;EAC3B,4BAA4B;EAC5B,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;AACnC;;AAEA;EACE,8CAA8C;AAChD;;AAEA;;EAEE,qBAAqB;EACrB,iBAAiB;EACjB,+BAA+B;AACjC;;AAEA;EACE,WAAW;EACX,iBAAiB;EACjB,sBAAsB;AACxB;;AAEA;EACE,gBAAgB;EAChB,aAAa;EACb,mBAAmB;EACnB,QAAQ;AACV;;AAEA,iBAAiB;AACjB;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,QAAQ;EACR,kBAAkB;AACpB;;AAEA;EACE,SAAS;EACT,iBAAiB;AACnB;;;AAGA;EACE,iBAAiB;EACjB,WAAW;EACX,SAAS;EACT,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;AACpB;;AAEA,+BAA+B;AAC/B;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;AACV;;AAEA,yBAAyB;AACzB;EACE,iBAAiB;EACjB,gBAAgB;EAChB,eAAe;AACjB;;AAEA,oBAAoB;AACpB;EACE,gBAAgB;EAChB,eAAe;EACf,SAAS;AACX;;AAEA,uBAAuB;AACvB;EACE,kBAAkB;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\n.file-list {\n  list-style: none;\n  padding-left: 0;\n  margin: 0;\n}\n\n.file-list li {\n  margin-bottom: 6px;\n}\n\n.modal-footer {\n  margin-top: 16px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.files-selector-submit-button {\n  margin-top: 8px;\n  background-color: var(--purple-400) !important;\n  color: var(--purple-700) !important;\n  border: none !important;\n  border-radius: 4px !important;\n  font-weight: 500 !important;\n  padding: 8px 16px !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  box-sizing: border-box !important;\n}\n\n.files-selector-submit-button:hover {\n  background-color: var(--purple-500) !important;\n}\n\n.file-list input[type=\"checkbox\"],\n.files-selector-select-all input[type=\"checkbox\"]{\n  transform: scale(1.3);\n  margin-right: 6px;\n  accent-color: var(--purple-500);\n}\n\n.file-list svg {\n  color: grey;\n  margin-right: 4px;\n  vertical-align: middle;\n}\n\n.select-all label {\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* Modal header */\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 1px;\n}\n\n.modal-title {\n  margin: 0;\n  font-size: 1.2rem;\n}\n\n\n.modal-subtext {\n  font-size: 0.7rem;\n  color: #555;\n  margin: 0;\n  font-style: italic;\n}\n\n.modal-subheader{\n  margin-bottom: 7px;\n}\n\n/* Checkbox label for spacing */\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* Scrollable file list */\n.file-list-scrollable {\n  max-height: 300px;\n  overflow-y: auto;\n  margin-top: 8px;\n}\n\n/* File list items */\n.file-list {\n  list-style: none;\n  padding-left: 0;\n  margin: 0;\n}\n\n/* Select all section */\n.files-selector-select-all {\n  margin-bottom: 8px;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -16942,6 +17595,74 @@ a {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./style/ShimmerWrapper.css":
+/*!************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./style/ShimmerWrapper.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.
+ */
+
+/* Shimmer skeleton effect for loading states */
+.shimmer-wrapper {
+    position: relative;
+    overflow: hidden;
+}
+
+.shimmer-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        var(--chat-background-color),
+        transparent
+    );
+    animation: shimmer 1.5s ease-in-out infinite;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.shimmer-wrapper > * {
+    position: relative;
+    z-index: 1;
+}
+
+@keyframes shimmer {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 100%;
+    }
+}
+`, "",{"version":3,"sources":["webpack://./style/ShimmerWrapper.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF,+CAA+C;AAC/C;IACI,kBAAkB;IAClB,gBAAgB;AACpB;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,MAAM;IACN,WAAW;IACX,WAAW;IACX,YAAY;IACZ;;;;;KAKC;IACD,4CAA4C;IAC5C,WAAW;IACX,oBAAoB;AACxB;;AAEA;IACI,kBAAkB;IAClB,UAAU;AACd;;AAEA;IACI;QACI,WAAW;IACf;IACA;QACI,UAAU;IACd;AACJ","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* Shimmer skeleton effect for loading states */\n.shimmer-wrapper {\n    position: relative;\n    overflow: hidden;\n}\n\n.shimmer-wrapper::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        transparent,\n        var(--chat-background-color),\n        transparent\n    );\n    animation: shimmer 1.5s ease-in-out infinite;\n    z-index: 10;\n    pointer-events: none;\n}\n\n.shimmer-wrapper > * {\n    position: relative;\n    z-index: 1;\n}\n\n@keyframes shimmer {\n    0% {\n        left: -100%;\n    }\n    100% {\n        left: 100%;\n    }\n}\n"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js!./style/SignUpForm.css":
@@ -17102,6 +17823,118 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./style/SubscriptionPage.css":
+/*!**************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./style/SubscriptionPage.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.
+ */
+
+/* Subscription Page Styles */
+
+.subscription-page-card {
+    background: var(--jp-layout-color1);
+    border: 1px solid var(--jp-border-color2);
+    border-radius: 8px;
+    padding: 24px;
+    margin-bottom: 20px;
+}
+
+.subscription-page-card-content {
+    margin-bottom: 20px;
+}
+
+.subscription-page-section-title {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.subscription-page-usage-stats {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.subscription-page-usage-count {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--purple-600);
+}
+
+.subscription-page-usage-details {
+    font-size: 14px;
+    color: var(--jp-ui-font-color2);
+}
+
+.subscription-page-progress-bar {
+    width: 100%;
+    height: 8px;
+    background-color: var(--jp-layout-color2);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+}
+
+.subscription-page-progress-fill {
+    height: 100%;
+    background-color: var(--purple-600);
+    transition: width 0.3s ease;
+}
+
+.subscription-page-status-message {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--jp-ui-font-color1);
+}
+
+.subscription-page-status-warning {
+    font-size: 14px;
+    color: var(--red-500);
+    font-weight: 600;
+}
+
+.subscription-page-button-container {
+    display: flex;
+    gap: 12px;
+}
+
+.subscription-page-button-container form {
+    flex: 1;
+    margin: 0;
+}
+
+.subscription-page-button {
+    text-decoration: none;
+    text-align: center;
+    flex: 1;
+    width: 100%;
+}`, "",{"version":3,"sources":["webpack://./style/SubscriptionPage.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF,6BAA6B;;AAE7B;IACI,mCAAmC;IACnC,yCAAyC;IACzC,kBAAkB;IAClB,aAAa;IACb,mBAAmB;AACvB;;AAEA;IACI,mBAAmB;AACvB;;AAEA;IACI,kBAAkB;IAClB,eAAe;IACf,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,SAAS;IACT,mBAAmB;AACvB;;AAEA;IACI,eAAe;IACf,gBAAgB;IAChB,wBAAwB;AAC5B;;AAEA;IACI,eAAe;IACf,+BAA+B;AACnC;;AAEA;IACI,WAAW;IACX,WAAW;IACX,yCAAyC;IACzC,kBAAkB;IAClB,gBAAgB;IAChB,mBAAmB;AACvB;;AAEA;IACI,YAAY;IACZ,mCAAmC;IACnC,2BAA2B;AAC/B;;AAEA;IACI,SAAS;IACT,eAAe;IACf,gBAAgB;IAChB,+BAA+B;AACnC;;AAEA;IACI,eAAe;IACf,qBAAqB;IACrB,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,SAAS;AACb;;AAEA;IACI,OAAO;IACP,SAAS;AACb;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;IAClB,OAAO;IACP,WAAW;AACf","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* Subscription Page Styles */\n\n.subscription-page-card {\n    background: var(--jp-layout-color1);\n    border: 1px solid var(--jp-border-color2);\n    border-radius: 8px;\n    padding: 24px;\n    margin-bottom: 20px;\n}\n\n.subscription-page-card-content {\n    margin-bottom: 20px;\n}\n\n.subscription-page-section-title {\n    margin: 0 0 16px 0;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.subscription-page-usage-stats {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n}\n\n.subscription-page-usage-count {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--purple-600);\n}\n\n.subscription-page-usage-details {\n    font-size: 14px;\n    color: var(--jp-ui-font-color2);\n}\n\n.subscription-page-progress-bar {\n    width: 100%;\n    height: 8px;\n    background-color: var(--jp-layout-color2);\n    border-radius: 4px;\n    overflow: hidden;\n    margin-bottom: 12px;\n}\n\n.subscription-page-progress-fill {\n    height: 100%;\n    background-color: var(--purple-600);\n    transition: width 0.3s ease;\n}\n\n.subscription-page-status-message {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--jp-ui-font-color1);\n}\n\n.subscription-page-status-warning {\n    font-size: 14px;\n    color: var(--red-500);\n    font-weight: 600;\n}\n\n.subscription-page-button-container {\n    display: flex;\n    gap: 12px;\n}\n\n.subscription-page-button-container form {\n    flex: 1;\n    margin: 0;\n}\n\n.subscription-page-button {\n    text-decoration: none;\n    text-align: center;\n    flex: 1;\n    width: 100%;\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js!./style/TextAndIconButton.css":
@@ -17274,6 +18107,77 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./style/UsageBadge.css":
+/*!********************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./style/UsageBadge.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.
+ */
+
+.usage-badge {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px 2px 4px;
+    background-color: var(--jp-layout-color2);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    margin-bottom: 4px;
+}
+
+.usage-badge:hover {
+    background-color: var(--jp-layout-color3);
+}
+
+.usage-badge-svg {
+    transform: rotate(-90deg);
+    flex-shrink: 0;
+}
+
+.usage-badge-text {
+    font-size: 11px;
+    color: var(--jp-ui-font-color2);
+    white-space: nowrap;
+    line-height: 1;
+}
+
+.usage-badge-circle-background {
+    fill: none;
+    stroke: var(--jp-layout-color3);
+    stroke-width: 3.5;
+}
+
+.usage-badge-circle-progress {
+    fill: none;
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.5s ease;
+}`, "",{"version":3,"sources":["webpack://./style/UsageBadge.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,QAAQ;IACR,wBAAwB;IACxB,yCAAyC;IACzC,mBAAmB;IACnB,eAAe;IACf,sCAAsC;IACtC,kBAAkB;AACtB;;AAEA;IACI,yCAAyC;AAC7C;;AAEA;IACI,yBAAyB;IACzB,cAAc;AAClB;;AAEA;IACI,eAAe;IACf,+BAA+B;IAC/B,mBAAmB;IACnB,cAAc;AAClB;;AAEA;IACI,UAAU;IACV,+BAA+B;IAC/B,iBAAiB;AACrB;;AAEA;IACI,UAAU;IACV,iBAAiB;IACjB,qBAAqB;IACrB,uCAAuC;AAC3C","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.usage-badge {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 2px 8px 2px 4px;\n    background-color: var(--jp-layout-color2);\n    border-radius: 12px;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n    margin-bottom: 4px;\n}\n\n.usage-badge:hover {\n    background-color: var(--jp-layout-color3);\n}\n\n.usage-badge-svg {\n    transform: rotate(-90deg);\n    flex-shrink: 0;\n}\n\n.usage-badge-text {\n    font-size: 11px;\n    color: var(--jp-ui-font-color2);\n    white-space: nowrap;\n    line-height: 1;\n}\n\n.usage-badge-circle-background {\n    fill: none;\n    stroke: var(--jp-layout-color3);\n    stroke-width: 3.5;\n}\n\n.usage-badge-circle-progress {\n    fill: none;\n    stroke-width: 3.5;\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.5s ease;\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js!./style/button.css":
@@ -19143,6 +20047,60 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_SettingsWidget_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_SettingsWidget_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_SettingsWidget_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
+/***/ }),
+
+/***/ "./style/ShimmerWrapper.css":
+/*!**********************************!*\
+  !*** ./style/ShimmerWrapper.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_ShimmerWrapper_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./ShimmerWrapper.css */ "./node_modules/css-loader/dist/cjs.js!./style/ShimmerWrapper.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_ShimmerWrapper_css__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ShimmerWrapper_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ShimmerWrapper_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ShimmerWrapper_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "./style/SignUpForm.css":
@@ -19251,6 +20209,60 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_StreamlitPreviewPlugin_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_StreamlitPreviewPlugin_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_StreamlitPreviewPlugin_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
+/***/ }),
+
+/***/ "./style/SubscriptionPage.css":
+/*!************************************!*\
+  !*** ./style/SubscriptionPage.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_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./SubscriptionPage.css */ "./node_modules/css-loader/dist/cjs.js!./style/SubscriptionPage.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_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_SubscriptionPage_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "./style/TextAndIconButton.css":
@@ -19413,6 +20425,60 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ToggleButton_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ToggleButton_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ToggleButton_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
+/***/ }),
+
+/***/ "./style/UsageBadge.css":
+/*!******************************!*\
+  !*** ./style/UsageBadge.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_UsageBadge_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./UsageBadge.css */ "./node_modules/css-loader/dist/cjs.js!./style/UsageBadge.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_UsageBadge_css__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_UsageBadge_css__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_UsageBadge_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_UsageBadge_css__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "./style/button.css":
@@ -19470,4 +20536,4 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
 /***/ })
 
 }]);
-//# sourceMappingURL=lib_index_js.20f12766ecd3d430568e.js.map
+//# sourceMappingURL=lib_index_js.5c7d84a45ddeb5704b61.js.map