@mongoosejs/studio 0.0.95 → 0.0.97

package/frontend/public/app.js

@@ -324,12 +324,11 @@ module.exports = app => app.component('async-button', {
 
 
 const api = __webpack_require__(/*! ../../api */ "./frontend/src/api.js");
-const marked = (__webpack_require__(/*! marked */ "./node_modules/marked/lib/marked.cjs").marked);
 const template = __webpack_require__(/*! ./chat-message-script.html */ "./frontend/src/chat/chat-message-script/chat-message-script.html");
 const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 
 module.exports = app => app.component('chat-message-script', {
-  template: template,
+  template,
   props: ['message', 'script', 'language'],
   data: () => ({ activeTab: 'code', showDetailModal: false }),
   computed: {
@@ -469,7 +468,8 @@ module.exports = app => app.component('chat', {
     newMessage: '',
     chatThreadId: null,
     chatThreads: [],
-    chatMessages: []
+    chatMessages: [],
+    hideSidebar: null
   }),
   methods: {
     async sendMessage() {
@@ -500,6 +500,11 @@ module.exports = app => app.component('chat', {
         this.chatMessages.push(chatMessages[1]);
 
         this.newMessage = '';
+        this.$nextTick(() => {
+          if (this.$refs.messageInput) {
+            this.$refs.messageInput.style.height = 'auto';
+          }
+        });
 
         this.$nextTick(() => {
           if (this.$refs.messagesContainer) {
@@ -510,6 +515,18 @@ module.exports = app => app.component('chat', {
         this.sendingMessage = false;
       }
     },
+    handleEnter(ev) {
+      if (!ev.shiftKey) {
+        this.sendMessage();
+      }
+    },
+    adjustTextareaHeight(ev) {
+      const textarea = ev.target;
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
+      const maxHeight = lineHeight * 5;
+      textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
+    },
     selectThread(threadId) {
       this.$router.push('/chat/' + threadId);
     },
@@ -1756,6 +1773,7 @@ if (typeof process === 'undefined') {
 
 const api = __webpack_require__(/*! ./api */ "./frontend/src/api.js");
 const mothership = __webpack_require__(/*! ./mothership */ "./frontend/src/mothership.js");
+const { routes } = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
 const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 
 const app = Vue.createApp({
@@ -1814,7 +1832,7 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const hash = window.location.hash.replace(/^#?\/?\??/, '') || '';
+      const hash = window.location.hash.replace(/^#?\/?/, '') || '';
       const hashQuery = hash.split('?')[1] || '';
       const hashParams = new URLSearchParams(hashQuery);
       if (hashParams.has('code')) {
@@ -1857,6 +1875,7 @@ app.component('app-component', {
       const { nodeEnv } = await api.status();
       this.nodeEnv = nodeEnv;
     }
+
     this.status = 'loaded';
   },
   setup() {
@@ -1873,7 +1892,6 @@ app.component('app-component', {
   }
 });
 
-const { routes } = __webpack_require__(/*! ./routes */ "./frontend/src/routes.js");
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({
@@ -1883,6 +1901,14 @@ const router = VueRouter.createRouter({
   }))
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
+    return next({ name: 'dashboards' });
+  } else {
+    next();
+  }
+});
+
 app.use(router);
 
 app.mount('#content');
@@ -2693,13 +2719,21 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({ showFlyout: false }),
   mounted: function() {
-    // Redirect to first allowed route if current route is not allowed
-    if (!this.hasAccess(this.roles, this.$route.name)) {
-      const firstAllowedRoute = this.allowedRoutes[0];
-      if (firstAllowedRoute) {
-        this.$router.push({ name: firstAllowedRoute.name });
-      }
-    }
+    const mobileMenuMask = document.querySelector('#mobile-menu-mask');
+    const mobileMenu = document.querySelector('#mobile-menu');
+
+    document.querySelector('#open-mobile-menu').addEventListener('click', (event) => {
+      event.stopPropagation();
+      mobileMenuMask.style.display = 'block';
+      mobileMenu.classList.remove('translate-x-full');
+      mobileMenu.classList.add('translate-x-0');
+    });
+
+    document.querySelector('body').addEventListener('click', () => {
+      mobileMenuMask.style.display = 'none';
+      mobileMenu.classList.remove('translate-x-0');
+      mobileMenu.classList.add('translate-x-full');
+    });
   },
   computed: {
     dashboardView() {
@@ -2723,11 +2757,8 @@ module.exports = app => app.component('navbar', {
     canViewTeam() {
       return this.hasAccess(this.roles, 'team');
     },
-    allowedRoutes() {
-      return routes.filter(route => this.hasAccess(this.roles, route.name));
-    },
     defaultRoute() {
-      return this.allowedRoutes[0]?.name || 'dashboards';
+      return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     }
   },
   methods: {
@@ -2788,10 +2819,12 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
+const allowedRoutesForLocalDev = ['document', 'root', 'chat'];
+
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
   // change to true for local development
-  if (!roles) return false;
+  if (!roles) return allowedRoutesForLocalDev.includes(routeName);
   return roles.some(role => roleAccess[role]?.includes(routeName));
 }
 
@@ -3881,7 +3914,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[30vh] max-w-[calc(100vw-25rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-25rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -3892,7 +3925,7 @@ module.exports = "<div class=\"relative border rounded bg-gray-100 text-black te
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative flex items-start space-x-3\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100%-6.5rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 p-3 rounded-md inline-block\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 md:p-3 rounded-md inline-block\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3903,7 +3936,7 @@ module.exports = "<div class=\"relative flex items-start space-x-3\" :class=\"{'
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px)\">\n    <!-- Sidebar: Chat Threads -->\n  <aside class=\"w-64 bg-gray-100 border-r overflow-y-auto h-full\">\n    <div class=\"p-4 font-bold text-lg border-b\">Chat Threads</div>\n    <div class=\"p-4\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul vif=\"status === 'loaded'\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2\">\n        <input\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2\"\n        />\n        <button class=\"bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
+module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
 
 /***/ }),
 
@@ -4431,7 +4464,7 @@ module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow fl
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.active {\n  text-decoration: underline;\n}\n\n.spacing {\n  margin-right: 10px;\n}\n\n.navbar .nav-left {\n  float: left;\n  line-height: 54px;\n  font-size: 20px;\n  padding-left: 20px;\n}\n\n.navbar .nav-left a {\n  color: #232323;\n}\n\n.navbar {\n  border-bottom: 1px solid #ddd;\n  height: 55px;\n}\n\n.navbar .nav-left img {\n  height: 32px;\n  vertical-align: middle;\n  margin-right: 0.5em;\n  margin-top: 8px;\n}\n\n.navbar .nav-right {\n  float: right;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: 16px;\n  line-height: 54px;\n  padding-right: 20px;\n}\n\n.navbar .nav-right .nav-item {\n  flex-grow: 1;\n  padding: 0px 12px;\n  position: relative;\n  z-index: 21000;\n}\n\n.navbar .nav-right .nav-item:hover {\n  flex-grow: 1;\n  padding: 0px 12px;\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-right .nav-item.active {\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-action {\n  cursor: pointer;\n  color: #E1B9A0;\n}\n\n.navbar .nav-action svg {\n  height: 1em;\n  vertical-align: middle;\n}\n\n.navbar .nav-right .nav-item .flyout {\n  position: absolute;\n  top: 55px;\n  right: 0px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .25s,visibility .25s,transform .25s;\n  width: auto;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);\n  background-color: #393944;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  z-index: 1000;\n  min-width: 192px;\n  font-size: 0.9em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout {\n  visibility: visible;\n  opacity: 1;\n}\n\n#bar-1 {\n\ttransform: translateY(-4px);\n}\n#bar-3 {\n\ttransform: translateY(4px);\n}\n.menu {\n  display: none;\n}\n.menu {\n\twidth: 35px;\n\theight: 30px;\n\tmargin: 18px 2px 0px 0px;\n\tcursor: pointer;\n  float: right;\n}\n.bar {\n\theight: 5px;\n\twidth: 100%;\n\tbackground-color: #fff;\n\tdisplay: block;\n\tborder-radius: 5px;\n\ttransition: 0.4s ease;\n}\n.change-icon #bar-1 {\n  transform: translateY(4px) rotateZ(-405deg);\n}\n.change-icon #bar-2 {\n  opacity: 0;\n}\n.change-icon #bar-3 {\n  transform: translateY(-6px) rotateZ(405deg);\n}\n\n@media (max-width: 767px) {\n  .menu {\n    display: block;\n  }\n\n  .change-icon ~ div.nav-right {\n    left: 0;\n  }\n\n  .navbar .nav-right {\n\t\tposition: fixed;\n\t\ttop: 55px;\n\t\tleft: -130%;\n\t\tbackground: #111;\n\t\theight: 100vh;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t\tdisplay: block;\n\t\ttransition: all 0.3s ease;\n    z-index: 10000;\n\t}\n}\n";
+module.exports = ".active {\n  text-decoration: underline;\n}\n\n.navbar .nav-left {\n  float: left;\n  line-height: 54px;\n  font-size: 20px;\n  padding-left: 20px;\n}\n\n.navbar .nav-left a {\n  color: #232323;\n}\n\n.navbar .nav-right {\n  float: right;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: 16px;\n  line-height: 54px;\n  padding-right: 20px;\n}\n\n.navbar .nav-right .nav-item {\n  flex-grow: 1;\n  padding: 0px 12px;\n  position: relative;\n  z-index: 21000;\n}\n\n.navbar .nav-right .nav-item:hover {\n  flex-grow: 1;\n  padding: 0px 12px;\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-right .nav-item.active {\n  border-bottom: 1px solid #E1B9A0;\n}\n\n.navbar .nav-action {\n  cursor: pointer;\n  color: #E1B9A0;\n}\n\n.navbar .nav-action svg {\n  height: 1em;\n  vertical-align: middle;\n}\n\n.navbar .nav-right .nav-item .flyout {\n  position: absolute;\n  top: 55px;\n  right: 0px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .25s,visibility .25s,transform .25s;\n  width: auto;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);\n  background-color: #393944;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  z-index: 1000;\n  min-width: 192px;\n  font-size: 0.9em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout a:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action {\n  color: #E1B9A0;\n  margin-top: 0.25em;\n  margin-bottom: 0.25em;\n}\n\n.navbar .nav-right .nav-item:hover .flyout .nav-action:hover {\n  color: #E1B9A0;\n}\n\n.navbar .nav-right .nav-item:hover .flyout {\n  visibility: visible;\n  opacity: 1;\n}\n\n#bar-1 {\n\ttransform: translateY(-4px);\n}\n#bar-3 {\n\ttransform: translateY(4px);\n}\n.menu {\n  display: none;\n}\n.menu {\n\twidth: 35px;\n\theight: 30px;\n\tmargin: 18px 2px 0px 0px;\n\tcursor: pointer;\n  float: right;\n}\n.bar {\n\theight: 5px;\n\twidth: 100%;\n\tbackground-color: #fff;\n\tdisplay: block;\n\tborder-radius: 5px;\n\ttransition: 0.4s ease;\n}\n.change-icon #bar-1 {\n  transform: translateY(4px) rotateZ(-405deg);\n}\n.change-icon #bar-2 {\n  opacity: 0;\n}\n.change-icon #bar-3 {\n  transform: translateY(-6px) rotateZ(405deg);\n}\n\n@media (max-width: 767px) {\n  .menu {\n    display: block;\n  }\n\n  .change-icon ~ div.nav-right {\n    left: 0;\n  }\n\n  .navbar .nav-right {\n\t\tposition: fixed;\n\t\ttop: 55px;\n\t\tleft: -130%;\n\t\tbackground: #111;\n\t\theight: 100vh;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t\tdisplay: block;\n\t\ttransition: all 0.3s ease;\n    z-index: 10000;\n\t}\n}\n";
 
 /***/ }),
 
@@ -4442,7 +4475,7 @@ module.exports = ".navbar {\n  width: 100%;\n  background-color: #eee;\n}\n\n.ac
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"navbar\">\n  <div class=\"nav-left flex items-center gap-4 h-full\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"nav-right h-full\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Chat</a>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n";
+module.exports = "<div class=\"navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]\">\n  <div class=\"flex items-center gap-4 h-full pl-4\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" class=\"h-[32px] mr-1\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" title=\"NODE_ENV\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"h-full pr-4 hidden md:block\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <span v-else class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed\" aria-disabled=\"true\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Chat</a>\n      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span v-else class=\"block px-4 py-2 text-sm text-gray-300 cursor-not-allowed\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"md:hidden flex items-center\">\n    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->\n    <button type=\"button\" id=\"open-mobile-menu\" class=\"-ml-2 rounded-md p-2 pr-4 text-gray-400\">\n      <span class=\"sr-only\">Open menu</span>\n      <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Mobile menu mask -->\n  <div id=\"mobile-menu-mask\" class=\"fixed inset-0 bg-black bg-opacity-40 z-40 hidden\"></div>\n  <!-- Mobile menu drawer -->\n  <div id=\"mobile-menu\" class=\"fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col\">\n    <div class=\"flex items-center justify-between px-4 !h-[55px] border-b border-gray-200\">\n      <router-link :to=\"{ name: defaultRoute }\">\n        <img src=\"images/logo.svg\" class=\"h-[32px]\" alt=\"Mongoose Studio Logo\" />\n      </router-link>\n      <button type=\"button\" id=\"close-mobile-menu\" class=\"text-gray-400 p-2 rounded-md\">\n        <span class=\"sr-only\">Close menu</span>\n        <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n    <nav class=\"flex-1 px-4 py-4 space-y-2\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Documents</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Dashboards</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Chat</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <div v-if=\"!user && hasAPIKey\" class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"w-full rounded bg-ultramarine-600 px-3 py-2 text-base font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"mt-4\">\n        <div class=\"flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md\">\n          <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          <span class=\"text-gray-900 font-medium\">{{ user.name }}</span>\n        </div>\n        <div class=\"mt-2 space-y-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100\">Team</router-link>\n          <span v-else class=\"block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer\">Sign out</span>\n        </div>\n      </div>\n    </nav>\n  </div>\n</div>\n";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -594,6 +594,10 @@ video {
   pointer-events: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -610,6 +614,10 @@ video {
   inset: -0.375rem;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -622,6 +630,10 @@ video {
   top: 0.25rem;
 }
 
+.top-\[65px\] {
+  top: 65px;
+}
+
 .top-\[90\%\] {
   top: 90%;
 }
@@ -634,6 +646,18 @@ video {
   z-index: 10;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
 .col-start-1 {
   grid-column-start: 1;
 }
@@ -679,6 +703,10 @@ video {
   margin-left: -0.125rem;
 }
 
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -802,6 +830,10 @@ video {
   height: 2rem;
 }
 
+.\!h-\[55px\] {
+  height: 55px !important;
+}
+
 .\!h-\[90vh\] {
   height: 90vh !important;
 }
@@ -826,6 +858,10 @@ video {
   height: 1.25rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -838,6 +874,10 @@ video {
   height: 300px;
 }
 
+.h-\[32px\] {
+  height: 32px;
+}
+
 .h-\[42px\] {
   height: 42px;
 }
@@ -854,6 +894,14 @@ video {
   height: 1px;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-11 {
+  height: 2.75rem;
+}
+
 .max-h-\[30vh\] {
   max-height: 30vh;
 }
@@ -862,10 +910,22 @@ video {
   max-height: 50vh;
 }
 
+.\!w-0 {
+  width: 0px !important;
+}
+
+.\!w-64 {
+  width: 16rem !important;
+}
+
 .\!w-\[90vw\] {
   width: 90vw !important;
 }
 
+.w-0 {
+  width: 0px;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -886,6 +946,10 @@ video {
   width: 1.25rem;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-64 {
   width: 16rem;
 }
@@ -914,12 +978,8 @@ video {
   max-width: 64rem;
 }
 
-.max-w-\[70vw\] {
-  max-width: 70vw;
-}
-
-.max-w-\[calc\(100\%-6\.5rem\)\] {
-  max-width: calc(100% - 6.5rem);
+.max-w-\[calc\(100vw-4rem\)\] {
+  max-width: calc(100vw - 4rem);
 }
 
 .max-w-xs {
@@ -962,6 +1022,16 @@ video {
   transform-origin: top right;
 }
 
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-full {
+  --tw-translate-x: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -974,6 +1044,10 @@ video {
   cursor: pointer;
 }
 
+.resize-none {
+  resize: none;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -1004,6 +1078,10 @@ video {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1080,6 +1158,12 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1135,6 +1219,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1235,9 +1323,9 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
-.border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
 .bg-blue-200 {
@@ -1374,6 +1462,11 @@ video {
   background-color: rgb(229 234 255 / var(--tw-bg-opacity));
 }
 
+.bg-ultramarine-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
+}
+
 .bg-ultramarine-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(24 35 255 / var(--tw-bg-opacity));
@@ -1399,9 +1492,8 @@ video {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
-.bg-ultramarine-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 83 255 / var(--tw-bg-opacity));
+.bg-opacity-40 {
+  --tw-bg-opacity: 0.4;
 }
 
 .p-1 {
@@ -1630,6 +1722,11 @@ video {
   color: rgb(0 242 58 / var(--tw-text-opacity));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1685,6 +1782,11 @@ video {
   color: rgb(0 168 165 / var(--tw-text-opacity));
 }
 
+.text-ultramarine-700 {
+  --tw-text-opacity: 1;
+  color: rgb(7 19 250 / var(--tw-text-opacity));
+}
+
 .text-valencia-500 {
   --tw-text-opacity: 1;
   color: rgb(220 73 73 / var(--tw-text-opacity));
@@ -1777,16 +1879,6 @@ video {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
 
-.ring-yellow-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1799,12 +1891,36 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1850,6 +1966,11 @@ video {
   background-color: rgb(0 242 58 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1930,6 +2051,11 @@ video {
   background-color: rgb(63 83 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-ultramarine-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-valencia-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(235 126 126 / var(--tw-bg-opacity));
@@ -1940,11 +2066,6 @@ video {
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-ultramarine-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(24 35 255 / var(--tw-bg-opacity));
-}
-
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -2075,6 +2196,10 @@ video {
   outline-color: #d1d5db;
 }
 
+.focus-visible\:outline-gray-500:focus-visible {
+  outline-color: #6b7280;
+}
+
 .focus-visible\:outline-green-600:focus-visible {
   outline-color: #16a34a;
 }
@@ -2107,14 +2232,6 @@ video {
   outline-color: #1823ff;
 }
 
-.focus-visible\:outline-gray-600:focus-visible {
-  outline-color: #4b5563;
-}
-
-.focus-visible\:outline-gray-500:focus-visible {
-  outline-color: #6b7280;
-}
-
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -2228,12 +2345,54 @@ video {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:relative {
+    position: relative;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+
+  .md\:max-w-\[calc\(100vw-16rem\)\] {
+    max-width: calc(100vw - 16rem);
+  }
+
+  .md\:max-w-\[calc\(100vw-20rem\)\] {
+    max-width: calc(100vw - 20rem);
+  }
+
+  .md\:p-3 {
+    padding: 0.75rem;
+  }
+}
+
 @media (min-width: 1024px) {
+  .lg\:relative {
+    position: relative;
+  }
+
   .lg\:-mx-8 {
     margin-left: -2rem;
     margin-right: -2rem;
   }
 
+  .lg\:w-64 {
+    width: 16rem;
+  }
+
+  .lg\:max-w-\[calc\(100vw-20rem\)\] {
+    max-width: calc(100vw - 20rem);
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

package/frontend/src/chat/chat-message/chat-message.html

@@ -1,9 +1,9 @@
-<div class="relative flex items-start space-x-3" :class="{'justify-end': message.role === 'user'}">
+<div class="relative flex items-start" :class="{'justify-end': message.role === 'user'}">
   <div
-    class="min-w-0 max-w-[calc(100%-6.5rem)]"
+    class="min-w-0 max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)]"
     :class="{'text-right': message.role === 'user'}">
 
-    <div class="text-sm text-gray-900 p-3 rounded-md inline-block" :class="styleForMessage">
+    <div class="text-sm text-gray-900 md:p-3 rounded-md inline-block" :class="styleForMessage">
       <div v-for="part in contentSplitByScripts">
         <div v-if="part.type === 'text'" v-html="marked(part.content)">
         </div>

package/frontend/src/chat/chat-message-script/chat-message-script.html

@@ -37,9 +37,9 @@
     </div>
   </div>
 
-  <pre class="p-3 whitespace-pre-wrap max-h-[30vh] max-w-[calc(100vw-25rem)] overflow-y-auto" v-show="activeTab === 'code'"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>
+  <pre class="p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto" v-show="activeTab === 'code'"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>
 
-  <div class="p-3 whitespace-pre-wrap max-h-[30vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-25rem)] relative" v-show="activeTab === 'output'">
+  <div class="p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative" v-show="activeTab === 'output'">
     <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" />
     <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>
   </div>

package/frontend/src/chat/chat-message-script/chat-message-script.js

@@ -1,12 +1,11 @@
 'use strict';
 
 const api = require('../../api');
-const marked = require('marked').marked;
 const template = require('./chat-message-script.html');
 const vanillatoasts = require('vanillatoasts');
 
 module.exports = app => app.component('chat-message-script', {
-  template: template,
+  template,
   props: ['message', 'script', 'language'],
   data: () => ({ activeTab: 'code', showDetailModal: false }),
   computed: {

package/frontend/src/chat/chat.html

@@ -1,8 +1,20 @@
 <div class="flex" style="height: calc(100vh - 55px)">
-    <!-- Sidebar: Chat Threads -->
-  <aside class="w-64 bg-gray-100 border-r overflow-y-auto h-full">
-    <div class="p-4 font-bold text-lg border-b">Chat Threads</div>
-    <div class="p-4">
+  <div class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10" @click="hideSidebar = false">
+    <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" fill="#5f6368"><path d="M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z"/></svg>
+  </div>
+  <!-- Sidebar: Chat Threads -->
+  <aside class="bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative" :class="hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''">
+    <div class="flex items-center border-b border-gray-100 w-64 overflow-x-hidden">
+      <div class="p-4 font-bold text-lg">Chat Threads</div>
+      <button
+        @click="hideSidebar = true"
+        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none"
+        aria-label="Close sidebar"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" style="h-5 w-5" viewBox="0 -960 960 960" class="w-5" fill="currentColor"><path d="M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z"/></svg>
+      </button>
+    </div>
+    <div class="p-4 w-64">
       <async-button
         @click="createNewThread"
         class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
@@ -13,12 +25,12 @@
     <div v-if="status === 'loaded' && chatThreads.length === 0" class="p-4 text-sm text-gray-700">
       No threads yet
     </div>
-    <ul vif="status === 'loaded'">
+    <ul v-if="status === 'loaded'" class="w-64">
       <li
         v-for="thread in chatThreads"
         :key="thread._id"
         @click="selectThread(thread._id)"
-        class="p-4 hover:bg-gray-200 cursor-pointer"
+        class="p-4 hover:bg-gray-200 cursor-pointer w-64"
         :class="{ 'bg-gray-300': thread._id === chatThreadId }"
       >
         {{ thread.title || 'Untitled Thread' }}
@@ -46,13 +58,17 @@
 
     <!-- Input Area -->
     <div class="border-t p-4">
-      <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2">
-        <input
+      <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2 items-end justify-end">
+        <textarea
           v-model="newMessage"
           placeholder="Ask something..."
-          class="flex-1 border rounded px-4 py-2"
-        />
-        <button class="bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-600" :disabled="sendingMessage">
+          class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto"
+          rows="1"
+          ref="messageInput"
+          @input="adjustTextareaHeight"
+          @keydown.enter.exact.prevent="handleEnter"
+        ></textarea>
+        <button class="bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600" :disabled="sendingMessage">
           <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <g>
               <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />

package/frontend/src/chat/chat.js

@@ -12,7 +12,8 @@ module.exports = app => app.component('chat', {
     newMessage: '',
     chatThreadId: null,
     chatThreads: [],
-    chatMessages: []
+    chatMessages: [],
+    hideSidebar: null
   }),
   methods: {
     async sendMessage() {
@@ -43,6 +44,11 @@ module.exports = app => app.component('chat', {
         this.chatMessages.push(chatMessages[1]);
 
         this.newMessage = '';
+        this.$nextTick(() => {
+          if (this.$refs.messageInput) {
+            this.$refs.messageInput.style.height = 'auto';
+          }
+        });
 
         this.$nextTick(() => {
           if (this.$refs.messagesContainer) {
@@ -53,6 +59,18 @@ module.exports = app => app.component('chat', {
         this.sendingMessage = false;
       }
     },
+    handleEnter(ev) {
+      if (!ev.shiftKey) {
+        this.sendMessage();
+      }
+    },
+    adjustTextareaHeight(ev) {
+      const textarea = ev.target;
+      textarea.style.height = 'auto';
+      const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight, 10);
+      const maxHeight = lineHeight * 5;
+      textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
+    },
     selectThread(threadId) {
       this.$router.push('/chat/' + threadId);
     },

package/frontend/src/index.js

@@ -6,6 +6,7 @@ if (typeof process === 'undefined') {
 
 const api = require('./api');
 const mothership = require('./mothership');
+const { routes } = require('./routes');
 const vanillatoasts = require('vanillatoasts');
 
 const app = Vue.createApp({
@@ -67,7 +68,7 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const hash = window.location.hash.replace(/^#?\/?\??/, '') || '';
+      const hash = window.location.hash.replace(/^#?\/?/, '') || '';
       const hashQuery = hash.split('?')[1] || '';
       const hashParams = new URLSearchParams(hashQuery);
       if (hashParams.has('code')) {
@@ -110,6 +111,7 @@ app.component('app-component', {
       const { nodeEnv } = await api.status();
       this.nodeEnv = nodeEnv;
     }
+
     this.status = 'loaded';
   },
   setup() {
@@ -126,7 +128,6 @@ app.component('app-component', {
   }
 });
 
-const { routes } = require('./routes');
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({
@@ -136,6 +137,14 @@ const router = VueRouter.createRouter({
   }))
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
+    return next({ name: 'dashboards' });
+  } else {
+    next();
+  }
+});
+
 app.use(router);
 
 app.mount('#content');

package/frontend/src/navbar/navbar.css

@@ -1,16 +1,7 @@
-.navbar {
-  width: 100%;
-  background-color: #eee;
-}
-
 .active {
   text-decoration: underline;
 }
 
-.spacing {
-  margin-right: 10px;
-}
-
 .navbar .nav-left {
   float: left;
   line-height: 54px;
@@ -22,18 +13,6 @@
   color: #232323;
 }
 
-.navbar {
-  border-bottom: 1px solid #ddd;
-  height: 55px;
-}
-
-.navbar .nav-left img {
-  height: 32px;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  margin-top: 8px;
-}
-
 .navbar .nav-right {
   float: right;
   display: flex;

package/frontend/src/navbar/navbar.html

@@ -1,26 +1,44 @@
-<div class="navbar">
-  <div class="nav-left flex items-center gap-4 h-full">
+<div class="navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]">
+  <div class="flex items-center gap-4 h-full pl-4">
     <router-link :to="{ name: defaultRoute }">
-      <img src="images/logo.svg" alt="Mongoose Studio Logo" />
+      <img src="images/logo.svg" class="h-[32px] mr-1" alt="Mongoose Studio Logo" />
     </router-link>
-    <div v-if="!!state.nodeEnv" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
+    <div v-if="!!state.nodeEnv" title="NODE_ENV" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
       {{state.nodeEnv}}
     </div>
   </div>
-  <div class="nav-right h-full">
+  <div class="h-full pr-4 hidden md:block">
     <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">
       <a v-if="hasAccess(roles, 'root')"
         href="#/"
         class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
         :class="documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
+      <span v-else class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed" aria-disabled="true">
+        Documents
+        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <a v-if="hasAccess(roles, 'dashboards')"
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
+        Dashboards
+        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
       <a v-if="hasAccess(roles, 'chat')"
         href="#/chat"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Chat</a>
+      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
+        Chat
+        <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
 
       <div class="h-full flex items-center" v-if="!user && hasAPIKey">
         <button
@@ -41,11 +59,98 @@
 
         <div v-if="showFlyout" class="absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
           <router-link to="/team" v-if="hasAccess(roles, 'team')" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
+          <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
+            Team
+            <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+            </svg>
+          </span>
           <span @click="logout" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</span>
         </div>
       </div>
 
     </div>
   </div>
-  <div style="clear: both"></div>
+  <div class="md:hidden flex items-center">
+    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
+    <button type="button" id="open-mobile-menu" class="-ml-2 rounded-md p-2 pr-4 text-gray-400">
+      <span class="sr-only">Open menu</span>
+      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Mobile menu mask -->
+  <div id="mobile-menu-mask" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
+  <!-- Mobile menu drawer -->
+  <div id="mobile-menu" class="fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+    <div class="flex items-center justify-between px-4 !h-[55px] border-b border-gray-200">
+      <router-link :to="{ name: defaultRoute }">
+        <img src="images/logo.svg" class="h-[32px]" alt="Mongoose Studio Logo" />
+      </router-link>
+      <button type="button" id="close-mobile-menu" class="text-gray-400 p-2 rounded-md">
+        <span class="sr-only">Close menu</span>
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <nav class="flex-1 px-4 py-4 space-y-2">
+      <a v-if="hasAccess(roles, 'root')"
+        href="#/"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Documents</a>
+      <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
+        Documents
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
+      <a v-if="hasAccess(roles, 'dashboards')"
+        href="#/dashboards"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Dashboards</a>
+      <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
+        Dashboards
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
+      <a v-if="hasAccess(roles, 'chat')"
+        href="#/chat"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Chat</a>
+      <span v-else class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed">
+        Chat
+        <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+        </svg>
+      </span>
+      <div v-if="!user && hasAPIKey" class="mt-4">
+        <button
+          type="button"
+          @click="loginWithGithub"
+          class="w-full rounded bg-ultramarine-600 px-3 py-2 text-base font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+            Login
+        </button>
+      </div>
+      <div v-if="user && hasAPIKey" class="mt-4">
+        <div class="flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md">
+          <img class="size-8 rounded-full" :src="user.picture" alt="">
+          <span class="text-gray-900 font-medium">{{ user.name }}</span>
+        </div>
+        <div class="mt-2 space-y-1">
+          <router-link to="/team" v-if="hasAccess(roles, 'team')" class="block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100">Team</router-link>
+          <span v-else class="block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed">
+            Team
+            <svg class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
+            </svg>
+          </span>
+          <span @click="logout" class="block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer">Sign out</span>
+        </div>
+      </div>
+    </nav>
+  </div>
 </div>

package/frontend/src/navbar/navbar.js

@@ -15,13 +15,21 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({ showFlyout: false }),
   mounted: function() {
-    // Redirect to first allowed route if current route is not allowed
-    if (!this.hasAccess(this.roles, this.$route.name)) {
-      const firstAllowedRoute = this.allowedRoutes[0];
-      if (firstAllowedRoute) {
-        this.$router.push({ name: firstAllowedRoute.name });
-      }
-    }
+    const mobileMenuMask = document.querySelector('#mobile-menu-mask');
+    const mobileMenu = document.querySelector('#mobile-menu');
+
+    document.querySelector('#open-mobile-menu').addEventListener('click', (event) => {
+      event.stopPropagation();
+      mobileMenuMask.style.display = 'block';
+      mobileMenu.classList.remove('translate-x-full');
+      mobileMenu.classList.add('translate-x-0');
+    });
+
+    document.querySelector('body').addEventListener('click', () => {
+      mobileMenuMask.style.display = 'none';
+      mobileMenu.classList.remove('translate-x-0');
+      mobileMenu.classList.add('translate-x-full');
+    });
   },
   computed: {
     dashboardView() {
@@ -45,11 +53,8 @@ module.exports = app => app.component('navbar', {
     canViewTeam() {
       return this.hasAccess(this.roles, 'team');
     },
-    allowedRoutes() {
-      return routes.filter(route => this.hasAccess(this.roles, route.name));
-    },
     defaultRoute() {
-      return this.allowedRoutes[0]?.name || 'dashboards';
+      return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     }
   },
   methods: {

package/frontend/src/routes.js

@@ -9,10 +9,12 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
+const allowedRoutesForLocalDev = ['document', 'root', 'chat'];
+
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
   // change to true for local development
-  if (!roles) return false;
+  if (!roles) return allowedRoutesForLocalDev.includes(routeName);
   return roles.some(role => roleAccess[role]?.includes(routeName));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {