@mongoosejs/studio 0.5.1 → 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;
 }
@@ -1583,6 +1587,16 @@ video {
   gap: 2rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1666,6 +1680,10 @@ video {
   overflow: auto;
 }
 
+.\!overflow-hidden {
+  overflow: hidden !important;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1708,6 +1726,10 @@ video {
   word-break: break-all;
 }
 
+.\!rounded-lg {
+  border-radius: 0.5rem !important;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1762,6 +1784,10 @@ video {
   border-bottom-right-radius: 0px;
 }
 
+.\!border {
+  border-width: 1px !important;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1826,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);
 }
@@ -1867,6 +1897,11 @@ video {
   border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
 .border-red-400 {
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity));
@@ -1906,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));
@@ -2190,6 +2229,10 @@ video {
   --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
 }
 
+.\!p-0 {
+  padding: 0px !important;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2381,6 +2424,14 @@ video {
   padding-left: 2rem;
 }
 
+.pr-12 {
+  padding-right: 3rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -2446,6 +2497,10 @@ video {
   font-size: 10px;
 }
 
+.text-\[11px\] {
+  font-size: 11px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2791,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);
@@ -3227,6 +3288,11 @@ video {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -3487,6 +3553,11 @@ video {
   --tw-ring-color: var(--color-primary-subtle);
 }
 
+.focus\:ring-red-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-sky-600:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
@@ -3822,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));
@@ -3835,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/api.js

@@ -9,6 +9,7 @@ const client = axios.create({
 console.log('API baseURL:', window.MONGOOSE_STUDIO_CONFIG.baseURL);
 
 window.apiClient = client;
+exports.fetch = fetch;
 client.interceptors.request.use(req => {
   const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
   if (accessToken) {
@@ -24,10 +25,92 @@ client.interceptors.response.use(
     if (typeof err?.response?.data === 'string') {
       throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data}`);
     }
+    if (typeof err?.response?.data?.message === 'string') {
+      throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data.message}`);
+    }
     throw err;
   }
 );
 
+async function* streamSSE(url, options = {}) {
+  const fetch = exports.fetch;
+  const response = await fetch(url, {
+    method: 'GET',
+    ...options,
+    headers: {
+      ...(options.headers || {}),
+      Accept: 'text/event-stream'
+    }
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder('utf-8');
+  let buffer = '';
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+    buffer += decoder.decode(value, { stream: true });
+
+    let eventEnd;
+    while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+      const eventStr = buffer.slice(0, eventEnd);
+      buffer = buffer.slice(eventEnd + 2);
+
+      const event = parseSSEEvent(eventStr);
+      if (event == null) {
+        continue;
+      }
+      if (event.type === 'error') {
+        const message = getSSEErrorMessage(event.data);
+        throw new Error(message);
+      }
+      yield event.data;
+    }
+  }
+}
+
+function parseSSEEvent(eventStr) {
+  const lines = eventStr.split('\n');
+  let type = 'message';
+  let data = '';
+  for (const line of lines) {
+    if (line.startsWith('event:')) {
+      type = line.slice(6).trim() || 'message';
+    } else if (line.startsWith('data:')) {
+      data += line.slice(5).trim();
+    }
+  }
+  if (!data) {
+    return null;
+  }
+
+  try {
+    return { type, data: JSON.parse(data) };
+  } catch (err) {
+    return { type, data };
+  }
+}
+
+function getSSEErrorMessage(data) {
+  if (typeof data === 'string') {
+    return data || 'Streaming request failed.';
+  }
+  if (typeof data?.message === 'string' && data.message.length > 0) {
+    return data.message;
+  }
+  if (typeof data?.error === 'string' && data.error.length > 0) {
+    return data.error;
+  }
+  return 'Streaming request failed.';
+}
+
 if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
   exports.getCapabilities = function getCapabilities() {
     return client.post('', { action: 'getCapabilities' }).then(res => res.data);
@@ -103,6 +186,7 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
+      const fetch = exports.fetch;
       return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '?' + new URLSearchParams({ ...params, action: 'Model.exportQueryResults' }).toString(), {
         method: 'GET',
         headers: {
@@ -166,6 +250,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     dropIndex: function dropIndex(params) {
       return client.post('', { action: 'Model.dropIndex', ...params }).then(res => res.data);
     },
+    dropCollection: function dropCollection(params) {
+      return client.post('', { action: 'Model.dropCollection', ...params }).then(res => res.data);
+    },
     listModels: function listModels() {
       return client.post('', { action: 'Model.listModels' }).then(res => res.data);
     },
@@ -254,50 +341,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/streamChatMessage?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         }
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              const res = JSON.parse(data);
-              yield res;
-            } catch (err) {
-              yield data;
-            }
-          }
-        }
-      }
     }
   };
   exports.ChatMessage = {
@@ -330,6 +378,7 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     exportQueryResults(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
 
+      const fetch = exports.fetch;
       return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + new URLSearchParams(params).toString(), {
         method: 'GET',
         headers: {
@@ -367,50 +416,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/getDocumentsStream?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         }
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              yield JSON.parse(data);
-            } catch (err) {
-              // If not JSON, yield as string
-              yield data;
-            }
-          }
-        }
-      }
     },
     getEstimatedDocumentCounts: function getEstimatedDocumentCounts() {
       return client.post('/Model/getEstimatedDocumentCounts', {}).then(res => res.data);
@@ -419,51 +429,12 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamDocumentChanges?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         },
         signal: options.signal
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              yield JSON.parse(data);
-            } catch (err) {
-              // If not JSON, yield as string
-              yield data;
-            }
-          }
-        }
-      }
     },
     getCollectionInfo: function getCollectionInfo(params) {
       return client.post('/Model/getCollectionInfo', params).then(res => res.data);
@@ -484,50 +455,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamChatMessage?' + new URLSearchParams(params).toString();
 
-      const response = await fetch(url, {
-        method: 'GET',
+      yield* streamSSE(url, {
         headers: {
-          Authorization: `${accessToken}`,
-          Accept: 'text/event-stream'
+          Authorization: `${accessToken}`
         }
       });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        let eventEnd;
-        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
-          const eventStr = buffer.slice(0, eventEnd);
-          buffer = buffer.slice(eventEnd + 2);
-
-          // Parse SSE event
-          const lines = eventStr.split('\n');
-          let data = '';
-          for (const line of lines) {
-            if (line.startsWith('data:')) {
-              data += line.slice(5).trim();
-            }
-          }
-          if (data) {
-            try {
-              yield JSON.parse(data);
-            } catch (err) {
-              // If not JSON, yield as string
-              yield data;
-            }
-          }
-        }
-      }
     },
     updateDocuments: function updateDocument(params) {
       return client.post('/Model/updateDocuments', params).then(res => res.data);

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.html

@@ -12,7 +12,7 @@
   </button>
   <!-- Sidebar: Chat Threads -->
   <aside
-    class="bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col"
+    class="bg-page border-r overflow-hidden transition-all duration-300 ease-in-out z-20 w-64 fixed top-[55px] bottom-0 lg:top-auto lg:bottom-auto lg:relative lg:h-full shrink-0 flex flex-col"
     :class="hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:translate-x-0 lg:!w-0 lg:!border-r-0' : '-translate-x-full lg:translate-x-0'"
     style="z-index: 1000">
     <!-- Search + New Thread -->

package/frontend/src/document/confirm-changes/confirm-changes.js

@@ -26,9 +26,29 @@ module.exports = app => app.component('confirm-changes', {
     },
     startSave() {
       this.$emit('save');
+    },
+    onEnter(event) {
+      if (event.key !== 'Enter') {
+        return;
+      }
+
+      const modalMasks = Array.from(document.querySelectorAll('.modal-mask'));
+      const currentMask = this.$el?.closest('.modal-mask');
+      const isTopMostModal = modalMasks.length > 0 && modalMasks[modalMasks.length - 1] === currentMask;
+
+      if (!isTopMostModal) {
+        return;
+      }
+
+      event.preventDefault();
+      this.startSave();
     }
   },
   mounted() {
+    window.addEventListener('keydown', this.onEnter);
     Prism.highlightElement(this.$refs.code);
+  },
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.onEnter);
   }
 });