@mongoosejs/studio 0.2.8 → 0.2.10

package/frontend/src/dashboard-result/dashboard-document/dashboard-document.js

@@ -7,23 +7,22 @@ const template = require('./dashboard-document.html');
 module.exports = app => app.component('dashboard-document', {
   template: template,
   props: ['value'],
+  inject: ['state'],
   computed: {
-    header() {
-      if (this.value != null && this.value.$document.header) {
-        return this.value.$document.header;
+    references() {
+      const model = this.value.$document?.model;
+      if (typeof model === 'string' && this.state.modelSchemaPaths?.[model]) {
+        const map = {};
+        for (const path of Object.keys(this.state.modelSchemaPaths[model])) {
+          const definition = this.state.modelSchemaPaths[model][path];
+          if (definition?.ref) {
+            map[path] = definition.ref;
+          }
+        }
+        return map;
       }
+
       return null;
-    },
-    schemaPaths() {
-      return Object.keys(this.value?.$document?.schemaPaths || {}).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
-        }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
-        }
-        return 0;
-      }).map(key => this.value?.$document.schemaPaths[key]);
     }
   }
 });

package/frontend/src/document/document.html

@@ -29,6 +29,18 @@
         </button>
       </div>
 
+      <div class="hidden md:flex items-center gap-3 text-sm text-slate-600">
+        <div class="text-right leading-tight">
+          <div class="text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end">
+            <span>Loaded at</span>
+            <span class="inline-flex items-center gap-1 text-[10px] font-semibold" :class="autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'">
+              <span class="inline-block h-1.5 w-1.5 rounded-full" :class="autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'"></span>
+            </span>
+          </div>
+          <div class="font-medium text-slate-700">{{lastUpdatedLabel}}</div>
+        </div>
+      </div>
+
       <div class="gap-2 hidden md:flex items-center">
         <button
           v-if="!editting"
@@ -77,6 +89,23 @@
             class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
           >
             <div class="py-1 flex flex-col">
+              <button
+                @click="refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false"
+                :disabled="isRefreshing"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                type="button"
+              >
+                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
+              </button>
+              <button
+                @click="toggleAutoRefresh(); desktopMenuOpen = false"
+                :disabled="isLambda"
+                type="button"
+                :class="['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']"
+                :title="isLambda ? 'Auto-refresh only available on Express deployments' : ''"
+              >
+                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}
+              </button>
               <button
                 @click="addField(); desktopMenuOpen = false"
                 type="button"
@@ -84,6 +113,13 @@
               >
                 Add Field
               </button>
+              <button
+                @click="copyDocument(); desktopMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+              >
+                Copy Document
+              </button>
               <button
                 @click="shouldShowDeleteModal=true; desktopMenuOpen = false"
                 :disabled="!canManipulate"
@@ -150,6 +186,21 @@
               >
                 Save
               </button>
+              <button
+                @click="refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false"
+                :disabled="isRefreshing"
+                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                type="button"
+              >
+                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
+              </button>
+              <button
+                @click="toggleAutoRefresh(); mobileMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+              >
+                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}
+              </button>
               <button
                 @click="addField(); mobileMenuOpen = false"
                 type="button"
@@ -157,6 +208,13 @@
               >
                 Add Field
               </button>
+              <button
+                @click="copyDocument(); mobileMenuOpen = false"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+              >
+                Copy Document
+              </button>
               <button
                 @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
                 :disabled="!canManipulate"

package/frontend/src/document/document.js

@@ -26,30 +26,25 @@ module.exports = app => app.component('document', {
     shouldShowConfirmModal: false,
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false,
-    previousQuery: null
+    previousQuery: null,
+    lastUpdatedAt: null,
+    isRefreshing: false,
+    autoRefreshEnabled: false,
+    autoRefreshConnecting: false,
+    autoRefreshLoopRunning: false,
+    autoRefreshError: null,
+    autoRefreshAbortController: null,
+    autoRefreshRetryTimer: null,
+    pendingRefresh: false
   }),
   async mounted() {
     window.pageState = this;
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
-    try {
-      const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
-      window.doc = doc;
-      this.document = doc;
-      this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
-        if (k1 === '_id' && k2 !== '_id') {
-          return -1;
-        }
-        if (k1 !== '_id' && k2 === '_id') {
-          return 1;
-        }
-        return 0;
-      }).map(key => schemaPaths[key]);
-      this.virtualPaths = virtualPaths || [];
-      this.status = 'loaded';
-    } finally {
-      this.status = 'loaded';
-    }
+    await this.refreshDocument({ force: true, source: 'initial' });
+  },
+  beforeDestroy() {
+    this.stopAutoRefresh();
   },
   computed: {
     canManipulate() {
@@ -61,8 +56,32 @@ module.exports = app => app.component('document', {
       }
       return !this.roles.includes('readonly');
     },
+    lastUpdatedLabel() {
+      if (!this.lastUpdatedAt) {
+        return '—';
+      }
+      try {
+        return new Date(this.lastUpdatedAt).toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        });
+      } catch (err) {
+        return '—';
+      }
+    },
     canEdit() {
       return this.canManipulate && this.viewMode === 'fields';
+    },
+    isLambda() {
+      return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
+    }
+  },
+  watch: {
+    editting(nextValue) {
+      if (!nextValue && this.pendingRefresh) {
+        this.refreshDocument({ source: 'pending' });
+      }
     }
   },
   methods: {
@@ -70,6 +89,125 @@ module.exports = app => app.component('document', {
       this.changes = {};
       this.editting = false;
     },
+    async refreshDocument(options = {}) {
+      const { force = false, source = 'manual' } = options;
+      if (this.editting && !force) {
+        this.pendingRefresh = true;
+        return;
+      }
+      if (this.isRefreshing) {
+        this.pendingRefresh = true;
+        return;
+      }
+
+      const isInitial = this.status === 'init';
+      if (isInitial) {
+        this.status = 'loading';
+      }
+      this.isRefreshing = true;
+      this.autoRefreshError = null;
+      try {
+        const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({
+          model: this.model,
+          documentId: this.documentId
+        });
+        window.doc = doc;
+        this.document = doc;
+        this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+          if (k1 === '_id' && k2 !== '_id') {
+            return -1;
+          }
+          if (k1 !== '_id' && k2 === '_id') {
+            return 1;
+          }
+          return 0;
+        }).map(key => schemaPaths[key]);
+        this.virtualPaths = virtualPaths || [];
+        this.lastUpdatedAt = new Date();
+        this.pendingRefresh = false;
+      } catch (err) {
+        console.error('Error refreshing document:', err);
+        if (this.$toast && source !== 'initial') {
+          this.$toast.error('Failed to refresh document');
+        }
+      } finally {
+        this.status = 'loaded';
+        this.isRefreshing = false;
+        if (this.pendingRefresh && !this.editting) {
+          this.pendingRefresh = false;
+          this.refreshDocument({ source: 'pending' });
+        }
+      }
+    },
+    toggleAutoRefresh() {
+      if (this.autoRefreshEnabled) {
+        this.stopAutoRefresh();
+      } else {
+        this.startAutoRefresh();
+      }
+    },
+    startAutoRefresh() {
+      if (this.autoRefreshEnabled) {
+        return;
+      }
+      this.autoRefreshEnabled = true;
+      this.autoRefreshError = null;
+      this.runAutoRefreshLoop();
+    },
+    stopAutoRefresh() {
+      this.autoRefreshEnabled = false;
+      this.autoRefreshConnecting = false;
+      if (this.autoRefreshAbortController) {
+        this.autoRefreshAbortController.abort();
+        this.autoRefreshAbortController = null;
+      }
+      if (this.autoRefreshRetryTimer) {
+        clearTimeout(this.autoRefreshRetryTimer);
+        this.autoRefreshRetryTimer = null;
+      }
+    },
+    async runAutoRefreshLoop() {
+      if (this.autoRefreshLoopRunning) {
+        return;
+      }
+      this.autoRefreshLoopRunning = true;
+      this.autoRefreshAbortController = new AbortController();
+      let retryDelay = 1500;
+
+      while (this.autoRefreshEnabled && !this.autoRefreshAbortController.signal.aborted) {
+        try {
+          this.autoRefreshConnecting = true;
+          for await (const event of api.Model.streamDocumentChanges({
+            model: this.model,
+            documentId: this.documentId
+          }, { signal: this.autoRefreshAbortController.signal })) {
+            this.autoRefreshConnecting = false;
+            if (!event || event.type === 'heartbeat') {
+              continue;
+            }
+            await this.refreshDocument({ source: 'auto' });
+          }
+        } catch (err) {
+          if (this.autoRefreshAbortController.signal.aborted) {
+            break;
+          }
+          this.autoRefreshError = err?.message || String(err);
+        } finally {
+          this.autoRefreshConnecting = false;
+        }
+
+        if (!this.autoRefreshEnabled || this.autoRefreshAbortController.signal.aborted) {
+          break;
+        }
+
+        await new Promise(resolve => {
+          this.autoRefreshRetryTimer = setTimeout(resolve, retryDelay);
+        });
+        retryDelay = Math.min(retryDelay * 2, 15000);
+      }
+
+      this.autoRefreshLoopRunning = false;
+    },
     async save() {
       if (Object.keys(this.invalid).length > 0) {
         throw new Error('Invalid paths: ' + Object.keys(this.invalid).join(', '));
@@ -137,6 +275,43 @@ module.exports = app => app.component('document', {
         this.changes = {};
       }
     },
+    copyDocument() {
+      if (!this.document) {
+        return;
+      }
+
+      const textToCopy = JSON.stringify(this.document, null, 2);
+      const fallbackCopy = () => {
+        if (typeof document === 'undefined') {
+          return;
+        }
+        const textArea = document.createElement('textarea');
+        textArea.value = textToCopy;
+        textArea.setAttribute('readonly', '');
+        textArea.style.position = 'absolute';
+        textArea.style.left = '-9999px';
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand('copy');
+        } finally {
+          document.body.removeChild(textArea);
+        }
+        this.$toast.success('Document copied!');
+      };
+
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(textToCopy)
+          .then(() => {
+            this.$toast.success('Document copied!');
+          })
+          .catch(() => {
+            fallbackCopy();
+          });
+      } else {
+        fallbackCopy();
+      }
+    },
     goBack() {
       // Preserve query parameters when going back to models page
       this.$router.push({

package/frontend/src/index.js

@@ -130,8 +130,12 @@ app.component('app-component', {
           const { user, roles } = await mothership.me();
 
           try {
-            const { nodeEnv } = await api.status();
+            const [{ nodeEnv }, { modelSchemaPaths }] = await Promise.all([
+              api.status(),
+              api.Model.listModels()
+            ]);
             this.nodeEnv = nodeEnv;
+            this.modelSchemaPaths = modelSchemaPaths;
           } catch (err) {
             this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
             this.status = 'loaded';
@@ -144,8 +148,12 @@ app.component('app-component', {
       }
     } else {
       try {
-        const { nodeEnv } = await api.status();
+        const [{ nodeEnv }, { modelSchemaPaths }] = await Promise.all([
+          api.status(),
+          api.Model.listModels()
+        ]);
         this.nodeEnv = nodeEnv;
+        this.modelSchemaPaths = modelSchemaPaths;
       } catch (err) {
         this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
       }
@@ -159,8 +167,9 @@ app.component('app-component', {
     const status = Vue.ref('init');
     const nodeEnv = Vue.ref(null);
     const authError = Vue.ref(null);
+    const modelSchemaPaths = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles, status, nodeEnv, authError });
+    const state = Vue.reactive({ user, roles, status, nodeEnv, authError, modelSchemaPaths });
     Vue.provide('state', state);
 
     return state;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {