@mongoosejs/studio 0.5.2 → 0.5.3

package/frontend/public/tw.css

@@ -1192,6 +1192,10 @@ video {
   width: 90vw !important;
 }
 
+.\!w-\[min\(94vw\2c 28rem\)\] {
+  width: min(94vw,28rem) !important;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -1676,6 +1680,10 @@ video {
   overflow: auto;
 }
 
+.\!overflow-hidden {
+  overflow: hidden !important;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1718,6 +1726,10 @@ video {
   word-break: break-all;
 }
 
+.\!rounded-lg {
+  border-radius: 0.5rem !important;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1772,6 +1784,10 @@ video {
   border-bottom-right-radius: 0px;
 }
 
+.\!border {
+  border-width: 1px !important;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1836,6 +1852,10 @@ video {
   border-style: none;
 }
 
+.\!border-edge {
+  border-color: var(--color-edge) !important;
+}
+
 .border-black\/10 {
   border-color: rgb(0 0 0 / 0.1);
 }
@@ -1921,6 +1941,10 @@ video {
   border-right-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
 
+.\!bg-surface {
+  background-color: var(--color-surface) !important;
+}
+
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
@@ -2205,6 +2229,10 @@ video {
   --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
 }
 
+.\!p-0 {
+  padding: 0px !important;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2396,6 +2424,14 @@ video {
   padding-left: 2rem;
 }
 
+.pr-12 {
+  padding-right: 3rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -2810,6 +2846,12 @@ video {
   opacity: 0.75;
 }
 
+.\!shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3851,6 +3893,11 @@ video {
   }
 }
 
+:is(:where(.dark) .dark\:\!bg-shark-900) {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(21 25 30 / var(--tw-bg-opacity)) !important;
+}
+
 :is(:where(.dark) .dark\:bg-shark-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(33 37 41 / var(--tw-bg-opacity));
@@ -3864,6 +3911,11 @@ video {
   background-color: rgb(33 37 41 / 0.8);
 }
 
+:is(:where(.dark) .dark\:bg-shark-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 25 30 / var(--tw-bg-opacity));
+}
+
 :is(:where(.dark) .dark\:text-gray-400) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));

package/frontend/src/_util/recent-pages-history.js

@@ -0,0 +1,116 @@
+'use strict';
+
+const RECENT_PAGES_STORAGE_KEY = 'studio:recent-pages-history';
+const RECENT_PAGES_CHANGED_EVENT = 'studio-recent-pages-changed';
+const RECENT_PAGES_LOCK_NAME = `studio-lock:${RECENT_PAGES_STORAGE_KEY}`;
+const MAX_RECENT_PAGES = 50;
+
+/** Collapses hash-style prefixes (e.g. `/#/`) to a normal path; keeps query string. */
+function normalizeTrackedPath(fullPath) {
+  if (!fullPath || typeof fullPath !== 'string') {
+    return '/';
+  }
+  const qIndex = fullPath.indexOf('?');
+  const rawMain = qIndex === -1 ? fullPath : fullPath.slice(0, qIndex);
+  const qs = qIndex === -1 ? '' : fullPath.slice(qIndex);
+
+  let pathOnly = rawMain.trim().replace(/#/g, '');
+  pathOnly = pathOnly.replace(/^\/+/u, '/');
+  if (pathOnly !== '/' && /\/$/u.test(pathOnly)) {
+    pathOnly = pathOnly.replace(/\/+$/u, '');
+  }
+  if (pathOnly === '' || pathOnly === '/') {
+    pathOnly = '/';
+  } else if (!pathOnly.startsWith('/')) {
+    pathOnly = `/${pathOnly}`;
+  }
+
+  const out = qs ? pathOnly + qs : pathOnly;
+  return out;
+}
+
+function safeReadRecentPages() {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return [];
+  }
+  try {
+    const raw = window.localStorage.getItem(RECENT_PAGES_STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed
+      .map(entry => {
+        if (!entry || typeof entry.path !== 'string') {
+          return null;
+        }
+        return { ...entry, path: normalizeTrackedPath(entry.path) };
+      })
+      .filter(
+        entry =>
+          entry &&
+          typeof entry.label === 'string' &&
+          typeof entry.visitedAt === 'number' &&
+          entry.path !== ''
+      )
+      .slice(0, MAX_RECENT_PAGES);
+  } catch {
+    return [];
+  }
+}
+
+function notifyRecentPagesChangedFromThisTab() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    window.dispatchEvent(new CustomEvent(RECENT_PAGES_CHANGED_EVENT));
+  } catch {
+    /* ignore */
+  }
+}
+
+function saveRecentPages(entries) {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return;
+  }
+  window.localStorage.setItem(
+    RECENT_PAGES_STORAGE_KEY,
+    JSON.stringify(entries.slice(0, MAX_RECENT_PAGES))
+  );
+  notifyRecentPagesChangedFromThisTab();
+}
+
+function withRecentPagesStorageLock(syncFn) {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    syncFn();
+    return Promise.resolve();
+  }
+
+  try {
+    const locksApi =
+      typeof navigator !== 'undefined' && navigator.locks !== undefined ? navigator.locks : null;
+
+    if (locksApi !== null && typeof locksApi.request === 'function') {
+      return locksApi.request(RECENT_PAGES_LOCK_NAME, syncFn);
+    }
+  } catch {
+    /* fall through */
+  }
+
+  syncFn();
+  return Promise.resolve();
+}
+
+module.exports = {
+  RECENT_PAGES_STORAGE_KEY,
+  RECENT_PAGES_CHANGED_EVENT,
+  MAX_RECENT_PAGES,
+  normalizeTrackedPath,
+  safeReadRecentPages,
+  saveRecentPages,
+  withRecentPagesStorageLock
+};

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

@@ -49,7 +49,7 @@
           <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" />
         </svg>
       </button>
-      <div v-if="!isEditing" class="relative mr-1" ref="runDropdown">
+      <div class="relative mr-1" ref="runDropdown">
         <div class="flex items-center">
           <button
             class="px-2 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-none rounded-l-md cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
@@ -146,11 +146,6 @@
           @click.stop="cancelEditing">
           Cancel
         </button>
-        <async-button
-          class="px-2 py-1 text-xs bg-blue-600 text-white border-none rounded cursor-pointer hover:bg-blue-700 transition-colors disabled:bg-gray-400"
-          @click="executeScript(false)">
-          Execute
-        </async-button>
       </div>
     </div>
     <pre v-else class="whitespace-pre-wrap !my-0 bg-muted"><code v-text="script" ref="code" :class="'language-' + language"></code></pre>

package/frontend/src/document/document.html

@@ -6,7 +6,7 @@
         <button
           @click="viewMode = 'fields'"
           :class="viewMode === 'fields'
-            ? 'bg-blue-600 text-white z-10'
+            ? 'bg-primary text-white z-10'
             : 'bg-gray-200 text-content-secondary hover:bg-gray-300'"
           class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong border-r-0 rounded-l-lg rounded-r-none"
         >
@@ -18,7 +18,7 @@
         <button
           @click="viewMode = 'json'"
           :class="viewMode === 'json'
-            ? 'bg-blue-600 text-white z-10'
+            ? 'bg-primary text-white z-10'
             : 'bg-gray-200 text-content-secondary hover:bg-gray-300'"
           class="px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong rounded-r-lg rounded-l-none"
         >

package/frontend/src/index.js

@@ -15,12 +15,143 @@ const { routes, hasAccess } = require('./routes');
 const Toast = require('vue-toastification').default;
 const { useToast } = require('vue-toastification');
 const appendCSS = require('./appendCSS');
+const {
+  safeReadRecentPages,
+  saveRecentPages,
+  MAX_RECENT_PAGES,
+  normalizeTrackedPath,
+  withRecentPagesStorageLock
+} = require('./_util/recent-pages-history');
 appendCSS(require('vue-toastification/dist/index.css'));
 
+const TRACKED_RECENT_PAGE_ROUTE_NAMES = new Set(['model', 'document', 'dashboard', 'chat']);
+
+function formatHistoryLabel(route) {
+  if (!route || typeof route.path !== 'string') {
+    return 'Unknown page';
+  }
+  if (route.name === 'model') {
+    return route.params?.model ? `Model: ${route.params.model}` : 'Model';
+  }
+  if (route.name === 'document') {
+    const model = route.params?.model ? `${route.params.model} ` : '';
+    const documentId = route.params?.documentId ? String(route.params.documentId) : '';
+    const shortDocumentId = documentId ? documentId.slice(0, 24) : '';
+    return `Document: ${model}${shortDocumentId}`.trim();
+  }
+  if (route.name === 'dashboard') {
+    return route.params?.dashboardId ? `Dashboard: ${route.params.dashboardId}` : 'Dashboard';
+  }
+  if (route.name === 'chat') {
+    return route.params?.threadId ? `Chat: ${route.params.threadId}` : 'Chat';
+  }
+  const normalizedPath = route.path.replace(/^\//, '');
+  return normalizedPath || 'Home';
+}
+
+function trackRecentPage(route) {
+  if (!route || typeof route.path !== 'string') {
+    return;
+  }
+  if (!TRACKED_RECENT_PAGE_ROUTE_NAMES.has(route.name)) {
+    return;
+  }
+  if (typeof route.path === 'string' && route.path.includes('code=')) {
+    return;
+  }
+  const path = normalizeTrackedPath(route.fullPath || route.path || '/');
+  const label = formatHistoryLabel(route);
+  const visitedAt = Date.now();
+
+  void withRecentPagesStorageLock(() => {
+    const existing = safeReadRecentPages();
+    const deduped = existing.filter(entry => normalizeTrackedPath(entry.path) !== path);
+    const next = [...deduped, { path, label, visitedAt }]
+      .sort((a, b) => b.visitedAt - a.visitedAt)
+      .slice(0, MAX_RECENT_PAGES);
+    saveRecentPages(next);
+  });
+}
+
 const app = Vue.createApp({
   template: '<app-component />'
 });
 
+window.drawArrowTo = function drawArrowTo(elementOrSelector) {
+  const element = typeof elementOrSelector === 'string' ?
+    document.querySelector(elementOrSelector) :
+    elementOrSelector;
+
+  if (!element || typeof element.getBoundingClientRect !== 'function') {
+    throw new Error('window.drawArrowTo() requires a DOM element or selector');
+  }
+
+  const existingArrow = document.getElementById('mongoose-studio-screenshot-arrow');
+  if (existingArrow) {
+    existingArrow.remove();
+  }
+
+  const rect = element.getBoundingClientRect();
+  const arrowLength = 140;
+  const arrowRise = 80;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const startX = Math.max(24, Math.min(window.innerWidth - 24, centerX - arrowLength));
+  const startY = Math.max(24, Math.min(window.innerHeight - 24, centerY - arrowRise));
+  const targetX = Math.max(rect.left, Math.min(rect.right, startX));
+  const targetY = Math.max(rect.top, Math.min(rect.bottom, startY));
+  const controlX = startX + (targetX - startX) * 0.6;
+  const controlY = startY + (targetY - startY) * 0.15;
+  const svgNS = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(svgNS, 'svg');
+  const defs = document.createElementNS(svgNS, 'defs');
+  const marker = document.createElementNS(svgNS, 'marker');
+  const markerPath = document.createElementNS(svgNS, 'path');
+  const path = document.createElementNS(svgNS, 'path');
+
+  svg.setAttribute('id', 'mongoose-studio-screenshot-arrow');
+  svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${window.innerHeight}`);
+  svg.setAttribute('width', '100vw');
+  svg.setAttribute('height', '100vh');
+  svg.style.position = 'fixed';
+  svg.style.left = '0';
+  svg.style.top = '0';
+  svg.style.zIndex = '2147483647';
+  svg.style.pointerEvents = 'none';
+
+  marker.setAttribute('id', 'mongoose-studio-screenshot-arrow-head');
+  marker.setAttribute('markerWidth', '14');
+  marker.setAttribute('markerHeight', '14');
+  marker.setAttribute('refX', '12');
+  marker.setAttribute('refY', '7');
+  marker.setAttribute('orient', 'auto');
+  marker.setAttribute('markerUnits', 'userSpaceOnUse');
+
+  markerPath.setAttribute('d', 'M 0 0 L 14 7 L 0 14 z');
+  markerPath.setAttribute('fill', '#dc2626');
+
+  path.setAttribute('d', `M ${startX} ${startY} Q ${controlX} ${controlY} ${targetX} ${targetY}`);
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke', '#dc2626');
+  path.setAttribute('stroke-width', '5');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  path.setAttribute('marker-end', 'url(#mongoose-studio-screenshot-arrow-head)');
+
+  marker.appendChild(markerPath);
+  defs.appendChild(marker);
+  svg.appendChild(defs);
+  svg.appendChild(path);
+  document.body.appendChild(svg);
+
+  return {
+    element: svg,
+    remove() {
+      svg.remove();
+    }
+  };
+};
+
 // https://github.com/Maronato/vue-toastification/tree/main?tab=readme-ov-file#toast-types
 app.use(Toast, { position: 'bottom-right', timeout: 3000 });
 
@@ -169,7 +300,14 @@ app.component('app-component', {
     const authError = Vue.ref(null);
     const modelSchemaPaths = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles, status, nodeEnv, authError, modelSchemaPaths });
+    const state = Vue.reactive({
+      user,
+      roles,
+      status,
+      nodeEnv,
+      authError,
+      modelSchemaPaths
+    });
     Vue.provide('state', state);
 
     return state;
@@ -233,6 +371,10 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+router.afterEach((to) => {
+  trackRecentPage(to);
+});
+
 app.config.globalProperties = { format, arrayUtils, $toast: toast };
 app.use(router);
 

package/frontend/src/modal/modal.css

@@ -2,7 +2,7 @@
 
 .modal-mask {
   position: fixed;
-  z-index: 9998;
+  z-index: 10050;
   top: 0;
   left: 0;
   width: 100%;
@@ -30,6 +30,11 @@
   position: relative;
 }
 
+.modal-container.modal-container--flush {
+  padding: 0;
+  padding-bottom: 0;
+}
+
 .modal-header {
   margin-top: 0;
   font-size: 18px;
@@ -50,6 +55,25 @@
   overflow: auto;
 }
 
+/* Recent pages: one scroll region — inner .modal-recent-pages-scroll only (avoids double scrollbars with .modal-body overflow). */
+.modal-body.modal-recent-pages-body {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  height: min(60vh, 22.5rem);
+  max-height: min(60vh, 22.5rem);
+  overflow: hidden;
+}
+
+.modal-body.modal-recent-pages-body .modal-recent-pages-scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .modal__button--default {
   float: right;
 }
@@ -79,6 +103,7 @@
 
 .modal-container .modal-exit {
   position: absolute;
+  z-index: 2;
   right: 0.25em;
   top: 0.25em;
   cursor: pointer;

package/frontend/src/modal/modal.html

@@ -1,8 +1,8 @@
 <transition name="modal">
   <div class="modal-mask">
     <div class="modal-wrapper">
-      <div class="modal-container" :class="containerClass">
-        <div class="modal-body">
+      <div class="modal-container" :class="[containerClass, { 'modal-container--flush': flushContainer }]">
+        <div class="modal-body" :class="bodyClass">
           <slot name="body">
           </slot>
         </div>

package/frontend/src/modal/modal.js

@@ -7,7 +7,11 @@ appendCSS(require('./modal.css'));
 
 module.exports = app => app.component('modal', {
   template,
-  props: ['containerClass'],
+  props: {
+    containerClass: String,
+    bodyClass: String,
+    flushContainer: Boolean
+  },
   mounted() {
     window.addEventListener('keydown', this.onEscape);
   },

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">
@@ -67,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"
@@ -149,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" />
@@ -266,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>