@mongoosejs/studio 0.5.2 → 0.5.4

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/chat/chat.js

@@ -305,9 +305,9 @@ module.exports = {
 
     this.draftAgentMode = this.getAgentModePreference();
     this.chatThreadId = this.threadId;
-    const [{ chatThreads }, { capabilities }] = await Promise.all([
+    const [{ chatThreads }, capabilities] = await Promise.all([
       api.ChatThread.listChatThreads(),
-      api.getCapabilities()
+      api.getCapabilities().catch(() => this.capabilities)
     ]);
     this.chatThreads = chatThreads;
     this.capabilities = capabilities;

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,144 @@ 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']);
+const CHAT_ROUTE_NAMES = new Set(['chat index', '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 });
 
@@ -109,8 +241,12 @@ app.component('app-component', {
         window.localStorage.setItem('_mongooseStudioAccessToken', accessToken._id);
 
         try {
-          const { nodeEnv } = await api.status();
+          const [{ nodeEnv }, capabilities] = await Promise.all([
+            api.status(),
+            loadStudioCapabilities()
+          ]);
           this.nodeEnv = nodeEnv;
+          this.capabilities = capabilities;
         } catch (err) {
           this.authError = 'Error connecting to Mongoose Studio API: ' + err.response?.data?.message ?? err.message;
           this.status = 'loaded';
@@ -130,12 +266,14 @@ app.component('app-component', {
           const { user, roles } = await mothership.me();
 
           try {
-            const [{ nodeEnv }, { modelSchemaPaths }] = await Promise.all([
+            const [{ nodeEnv }, { modelSchemaPaths }, capabilities] = await Promise.all([
               api.status(),
-              api.Model.listModels()
+              api.Model.listModels(),
+              loadStudioCapabilities()
             ]);
             this.nodeEnv = nodeEnv;
             this.modelSchemaPaths = modelSchemaPaths;
+            this.capabilities = capabilities;
           } catch (err) {
             this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
             this.status = 'loaded';
@@ -148,12 +286,14 @@ app.component('app-component', {
       }
     } else {
       try {
-        const [{ nodeEnv }, { modelSchemaPaths }] = await Promise.all([
+        const [{ nodeEnv }, { modelSchemaPaths }, capabilities] = await Promise.all([
           api.status(),
-          api.Model.listModels()
+          api.Model.listModels(),
+          loadStudioCapabilities()
         ]);
         this.nodeEnv = nodeEnv;
         this.modelSchemaPaths = modelSchemaPaths;
+        this.capabilities = capabilities;
       } catch (err) {
         this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
       }
@@ -168,8 +308,17 @@ app.component('app-component', {
     const nodeEnv = Vue.ref(null);
     const authError = Vue.ref(null);
     const modelSchemaPaths = Vue.ref(null);
-
-    const state = Vue.reactive({ user, roles, status, nodeEnv, authError, modelSchemaPaths });
+    const capabilities = Vue.ref(null);
+
+    const state = Vue.reactive({
+      user,
+      roles,
+      status,
+      nodeEnv,
+      authError,
+      modelSchemaPaths,
+      capabilities
+    });
     Vue.provide('state', state);
 
     return state;
@@ -220,20 +369,49 @@ router.beforeEach((to, from, next) => {
   next();
 });
 
-router.beforeEach((to, from, next) => {
-  if (['chat index', 'chat'].includes(to.name) && !window.MONGOOSE_STUDIO_CONFIG.hasLLMAPIKey) {
+router.beforeEach(async(to, from, next) => {
+  if (CHAT_ROUTE_NAMES.has(to.name) && !(await supportsAI())) {
     next({ name: 'root' });
     return;
   }
 
-  if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
+  if (to.name === 'root' && window.state?.roles && window.state.roles[0] === 'dashboards') {
     return next({ name: 'dashboards' });
   } else {
     next();
   }
 });
 
+router.afterEach((to) => {
+  trackRecentPage(to);
+});
+
 app.config.globalProperties = { format, arrayUtils, $toast: toast };
 app.use(router);
 
 app.mount('#content');
+
+async function getStudioCapabilities() {
+  if (window.__mongooseStudioCapabilitiesPromise == null) {
+    window.__mongooseStudioCapabilitiesPromise = api.getCapabilities().catch(err => {
+      window.__mongooseStudioCapabilitiesPromise = null;
+      throw err;
+    });
+  }
+  return window.__mongooseStudioCapabilitiesPromise;
+}
+
+async function loadStudioCapabilities() {
+  try {
+    return await getStudioCapabilities();
+  } catch (err) {
+    return null;
+  }
+}
+
+async function supportsAI() {
+  if (window.state?.capabilities == null) {
+    return true;
+  }
+  return window.state.capabilities.supportsAI !== false;
+}

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);
   },