@mongoosejs/studio 0.5.1 → 0.5.3

package/frontend/src/navbar/navbar.html

@@ -1,3 +1,4 @@
+<div>
 <div class="navbar w-full bg-page border-b border-edge !h-[55px] hidden md:grid grid-cols-[1fr_auto_1fr] items-stretch px-4">
   <!-- Left: Logo + Brand -->
   <div class="flex items-center gap-2 self-center">
@@ -31,10 +32,18 @@
         <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')"
+    <a v-if="hasAccess(roles, 'chat') && hasLLMAPIKey"
       href="#/chat"
       class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
       :class="chatView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">Chat</a>
+    <span v-else-if="hasAccess(roles, 'chat') && !hasLLMAPIKey"
+      class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed"
+      :title="chatDisabledReason">
+      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>
     <span v-else class="inline-flex items-center px-1 border-b-2 border-transparent 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">
@@ -59,6 +68,19 @@
   </nav>
   <!-- Right: Env Badge + User -->
   <div class="flex items-center justify-end gap-3 self-center">
+    <button
+      type="button"
+      class="inline-flex items-center justify-center rounded-md p-2 text-content-tertiary hover:bg-muted hover:text-content-secondary"
+      title="Recent pages"
+      aria-label="Recent pages"
+      aria-haspopup="dialog"
+      :aria-expanded="showRecentPagesModal ? 'true' : 'false'"
+      @click="openRecentPagesModal"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    </button>
     <div
       v-if="!!state.nodeEnv"
       title="NODE_ENV"
@@ -141,9 +163,22 @@
       <span class="text-base font-semibold text-content">Mongoose Studio</span>
     </router-link>
   </div>
-  <div class="flex items-center">
+  <div class="flex items-center gap-1 pr-2">
+    <button
+      type="button"
+      class="rounded-md p-2 text-content-tertiary hover:bg-muted hover:text-content-secondary md:hidden"
+      title="Recent pages"
+      aria-label="Recent pages"
+      aria-haspopup="dialog"
+      :aria-expanded="showRecentPagesModal ? 'true' : 'false'"
+      @click="openRecentPagesModal"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    </button>
     <!-- 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">
+    <button type="button" id="open-mobile-menu" class="-ml-2 rounded-md p-2 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" />
@@ -154,7 +189,7 @@
   <!-- 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" style="z-index: 10000" class="fixed inset-0 bg-page shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+  <div id="mobile-menu" style="z-index: 100000" class="fixed inset-0 bg-page shadow-lg 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-edge">
       <router-link :to="{ name: defaultRoute }">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-[32px] text-primary" viewBox="0 0 250 250" fill="currentColor" aria-label="Mongoose Studio Logo">
@@ -201,10 +236,18 @@
           <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')"
+      <a v-if="hasAccess(roles, 'chat') && hasLLMAPIKey"
         href="#/chat"
         class="block px-3 py-2 rounded-md text-base font-medium"
         :class="chatView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Chat</a>
+      <span v-else-if="hasAccess(roles, 'chat') && !hasLLMAPIKey"
+        class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed"
+        :title="chatDisabledReason">
+        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>
       <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">
@@ -250,3 +293,47 @@
     </nav>
   </div>
 </div>
+
+<modal
+  v-if="showRecentPagesModal"
+  flush-container
+  containerClass="!max-w-md !w-[min(94vw,28rem)] !overflow-hidden !rounded-lg !border !border-edge !bg-surface !shadow-xl dark:!bg-shark-900 text-content"
+  bodyClass="modal-recent-pages-body !p-0"
+>
+  <template v-slot:body>
+    <div class="modal-exit" @click="closeRecentPagesModal" role="button" aria-label="Close recent pages">&times;</div>
+    <div
+      class="shrink-0 flex items-center gap-3 border-b border-edge bg-surface px-4 py-4 pr-12 dark:bg-shark-900"
+    >
+      <h2 class="m-0 text-lg font-semibold text-content">Recent pages</h2>
+      <button
+        type="button"
+        class="rounded px-2 py-1 text-sm font-medium text-content-secondary hover:bg-muted disabled:opacity-50"
+        @click="clearRecentPagesHistory"
+        :disabled="recentPagesList.length === 0"
+      >
+        Clear
+      </button>
+    </div>
+    <div class="modal-recent-pages-scroll">
+      <div
+        v-if="recentPagesList.length === 0"
+        class="m-4 rounded border border-dashed border-edge px-3 py-6 text-center text-sm text-content-tertiary"
+      >
+        No recent pages yet.
+      </div>
+      <button
+        v-for="entry in recentPagesList"
+        :key="entry.path + '-' + entry.visitedAt"
+        type="button"
+        class="w-full px-4 py-2.5 text-left hover:bg-muted"
+        :class="entry.path === $route.fullPath ? 'bg-primary-subtle' : ''"
+        @click="goToRecentPage(entry)"
+      >
+        <div class="truncate text-sm font-medium text-content">{{ entry.label }}</div>
+        <div class="truncate font-mono text-xs text-content-tertiary">{{ entry.path }}</div>
+      </button>
+    </div>
+  </template>
+</modal>
+</div>

package/frontend/src/navbar/navbar.js

@@ -4,6 +4,13 @@ const api = require('../api');
 const mothership = require('../mothership');
 const template = require('./navbar.html');
 const { routes, hasAccess } = require('../routes');
+const {
+  RECENT_PAGES_STORAGE_KEY,
+  RECENT_PAGES_CHANGED_EVENT,
+  safeReadRecentPages,
+  saveRecentPages,
+  withRecentPagesStorageLock
+} = require('../_util/recent-pages-history');
 
 const appendCSS = require('../appendCSS');
 
@@ -15,7 +22,9 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({
     showFlyout: false,
-    darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark'
+    darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark',
+    showRecentPagesModal: false,
+    localRecentPages: []
   }),
   mounted: function() {
     window.navbar = this;
@@ -37,6 +46,32 @@ module.exports = app => app.component('navbar', {
         mobileMenu.classList.add('translate-x-full');
       });
     }
+
+    this.localRecentPages = safeReadRecentPages();
+
+    this._syncRecentPagesFromOtherTab = ev => {
+      if (ev.storageArea !== window.localStorage || ev.key !== RECENT_PAGES_STORAGE_KEY) {
+        return;
+      }
+      this.refreshRecentPagesFromStorage();
+    };
+    this._syncRecentPagesFromBroadcast = () => this.refreshRecentPagesFromStorage();
+
+    window.addEventListener('storage', this._syncRecentPagesFromOtherTab);
+    window.addEventListener(RECENT_PAGES_CHANGED_EVENT, this._syncRecentPagesFromBroadcast);
+  },
+  beforeUnmount() {
+    if (this._syncRecentPagesFromOtherTab) {
+      window.removeEventListener('storage', this._syncRecentPagesFromOtherTab);
+    }
+    if (this._syncRecentPagesFromBroadcast) {
+      window.removeEventListener(RECENT_PAGES_CHANGED_EVENT, this._syncRecentPagesFromBroadcast);
+    }
+  },
+  watch: {
+    '$route.fullPath'() {
+      this.refreshRecentPagesFromStorage();
+    }
   },
   computed: {
     dashboardView() {
@@ -68,6 +103,15 @@ module.exports = app => app.component('navbar', {
     },
     hasTaskVisualizer() {
       return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
+    },
+    recentPagesList() {
+      return this.localRecentPages;
+    },
+    hasLLMAPIKey() {
+      return !!window.MONGOOSE_STUDIO_CONFIG.hasLLMAPIKey;
+    },
+    chatDisabledReason() {
+      return 'Chat requires an Anthropic, Gemini, or OpenAI API key.';
     }
   },
   methods: {
@@ -97,6 +141,30 @@ module.exports = app => app.component('navbar', {
       const meta = document.querySelector('meta[name="theme-color"]');
       if (meta) meta.setAttribute('content', this.darkMode ? '#0f0f0f' : '#ffffff');
       document.documentElement.dispatchEvent(new CustomEvent('studio-theme-changed', { detail: { dark: this.darkMode } }));
+    },
+    refreshRecentPagesFromStorage() {
+      this.localRecentPages = safeReadRecentPages();
+    },
+    openRecentPagesModal() {
+      this.showRecentPagesModal = true;
+      this.refreshRecentPagesFromStorage();
+    },
+    closeRecentPagesModal() {
+      this.showRecentPagesModal = false;
+    },
+    clearRecentPagesHistory() {
+      this.localRecentPages = [];
+      void withRecentPagesStorageLock(() => saveRecentPages([]));
+    },
+    goToRecentPage(entry) {
+      if (!entry || !entry.path) {
+        return;
+      }
+      this.showRecentPagesModal = false;
+      if (entry.path === this.$route.fullPath) {
+        return;
+      }
+      this.$router.push(entry.path);
     }
   },
   directives: {

package/index.js

@@ -1,3 +1,4 @@
 'use strict';
-  
+
 exports.express = require('./express');
+exports.enableDebugging = require('./debugging').enableDebugging;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -53,6 +53,7 @@
     "tailwind": "tailwindcss -o ./frontend/public/tw.css",
     "tailwind:watch": "tailwindcss -o ./frontend/public/tw.css --watch",
     "test": "mocha test/*.test.js",
-    "test:frontend": "mocha test/frontend/*.test.js"
+    "test:frontend": "mocha test/frontend/*.test.js",
+    "eval:agent": "node eval/agent/run.js"
   }
 }