mito-ai 0.1.46__py3-none-any.whl → 0.1.47__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.47.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.2db61d2b629817845901.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,6 +357,7 @@ 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',
             variables: (notebookContext === null || notebookContext === void 0 ? void 0 : notebookContext.variables) || [],
@@ -354,7 +366,8 @@ class ChatHistoryManager {
             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
@@ -1374,6 +1387,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 +1411,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 +1508,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 +2049,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 +2075,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 +2140,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 +2191,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 +2258,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 +2328,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 +2391,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 +2745,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 +2771,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 +2798,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 +2818,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 +2865,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 +2909,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 +3203,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 +3229,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 +3255,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 +3266,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 +3306,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 +3395,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 +3408,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 +3417,7 @@ function buildChatWidget(app, notebookTracker, renderMimeRegistry, contextManage
         notebookTracker,
         renderMimeRegistry,
         contextManager,
+        streamlitPreviewManager: streamlitPreviewManager,
         operatingSystem
     });
     chatWidget.id = 'mito_ai';
@@ -3567,6 +3634,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 +3866,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 +3887,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 +4234,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) {
@@ -4100,19 +4258,14 @@ const deployStreamlitApp = async (notebookTracker, appDeployService, appManagerS
             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);
@@ -4129,16 +4282,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 +4312,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 +4681,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 +4745,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 +5232,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 +5243,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 +5273,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 +5298,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 +5485,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,6 +5501,49 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
+/**
+ * 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 = () => {
@@ -5342,8 +5563,8 @@ const UpdateAppDropdown = ({ onSubmit, onClose }) => {
             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")))));
+                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);
 
@@ -5358,6 +5579,7 @@ const UpdateAppDropdown = ({ onSubmit, onClose }) => {
 
 __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 +5593,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 +5602,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 +6488,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 +6507,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 +6522,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 +6531,33 @@ function _activate(app, palette, contextManager, restorer) {
         return widget;
     };
     let widget = newWidget();
-    // Add an application command
-    app.commands.addCommand(COMMAND_MITO_AI_SETTINGS, {
-        label: 'Mito AI Settings',
+    // 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 +6565,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 +6606,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 +6625,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 +6667,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 +7673,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 +7964,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 +8566,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":
@@ -8284,6 +8787,36 @@ const RunAllCellsToolUI = ({ inErrorFixup }) => {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RunAllCellsToolUI);
 
 
+/***/ }),
+
+/***/ "./lib/components/AgentComponents/ShimmerWrapper.js":
+/*!**********************************************************!*\
+  !*** ./lib/components/AgentComponents/ShimmerWrapper.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 _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.
+ */
+
+
+
+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":
@@ -8535,7 +9068,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 +9703,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 +10466,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;
 };
@@ -12372,10 +12939,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 +13303,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___);
 
@@ -15479,7 +16047,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 +16117,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___);
 
@@ -16944,10 +17512,10 @@ a {
 
 /***/ }),
 
-/***/ "./node_modules/css-loader/dist/cjs.js!./style/SignUpForm.css":
-/*!********************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js!./style/SignUpForm.css ***!
-  \********************************************************************/
+/***/ "./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__);
@@ -16968,30 +17536,98 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
  */
 
-.signup-form-header {
-    display: block;
-    text-align: center;
-    font-weight: bold;
-    font-size: 20px;
-    margin-bottom: 15px;
-    color: var(--jp-ui-font-color0);
+/* Shimmer skeleton effect for loading states */
+.shimmer-wrapper {
+    position: relative;
+    overflow: hidden;
 }
 
-.signup-form-header-logo {
-    margin: 0 auto 8px;
-    display: block;
-    text-align: center;
+.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;
 }
 
-.signup-form-message {
-    font-size: 14px;
-    color: var(--jp-ui-font-color1);
+.shimmer-wrapper > * {
+    position: relative;
+    z-index: 1;
 }
 
-/* Form container to control layout */
-.signup-form-container form {
-    display: flex;
-    flex-wrap: wrap;
+@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":
+/*!********************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./style/SignUpForm.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.
+ */
+
+.signup-form-header {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: 15px;
+    color: var(--jp-ui-font-color0);
+}
+
+.signup-form-header-logo {
+    margin: 0 auto 8px;
+    display: block;
+    text-align: center;
+}
+
+.signup-form-message {
+    font-size: 14px;
+    color: var(--jp-ui-font-color1);
+}
+
+/* Form container to control layout */
+.signup-form-container form {
+    display: flex;
+    flex-wrap: wrap;
     gap: 8px;
     align-items: flex-start;
 }
@@ -17102,6 +17738,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 +18022,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 +19962,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 +20124,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 +20340,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 +20451,4 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
 /***/ })
 
 }]);
-//# sourceMappingURL=lib_index_js.20f12766ecd3d430568e.js.map
+//# sourceMappingURL=lib_index_js.2db61d2b629817845901.js.map