@mongoosejs/studio 0.2.9 → 0.2.10

package/backend/actions/Model/index.js

@@ -13,6 +13,7 @@ exports.getDocumentsStream = require('./getDocumentsStream');
 exports.getCollectionInfo = require('./getCollectionInfo');
 exports.getIndexes = require('./getIndexes');
 exports.listModels = require('./listModels');
+exports.streamDocumentChanges = require('./streamDocumentChanges');
 exports.streamChatMessage = require('./streamChatMessage');
 exports.updateDocument = require('./updateDocument');
 exports.updateDocuments = require('./updateDocuments');

package/backend/actions/Model/listModels.js

@@ -2,6 +2,8 @@
 
 const Archetype = require('archetype');
 const authorize = require('../../authorize');
+const getRefFromSchemaType = require('../../helpers/getRefFromSchemaType');
+const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
 
 const ListModelsParams = new Archetype({
   roles: {
@@ -15,8 +17,41 @@ module.exports = ({ db }) => async function listModels(params) {
 
   const readyState = db.connection?.readyState ?? db.readyState;
 
+  const models = Object.keys(db.models).filter(key => !key.startsWith('__Studio_')).sort();
+
+  const modelSchemaPaths = {};
+  for (const modelName of models) {
+    const Model = db.models[modelName];
+    const schemaPaths = {};
+    modelSchemaPaths[modelName] = schemaPaths;
+    for (const path of Object.keys(Model.schema.paths)) {
+      const schemaType = Model.schema.paths[path];
+      schemaPaths[path] = {
+        instance: schemaType.instance,
+        path,
+        ref: getRefFromSchemaType(schemaType),
+        required: schemaType.options?.required,
+        enum: schemaType.options?.enum
+      };
+      if (schemaType.schema) {
+        schemaPaths[path].schema = {};
+        for (const subpath of Object.keys(schemaType.schema.paths)) {
+          schemaPaths[path].schema[subpath] = {
+            instance: schemaType.schema.paths[subpath].instance,
+            path: subpath,
+            ref: getRefFromSchemaType(schemaType.schema.paths[subpath]),
+            required: schemaType.schema.paths[subpath].options?.required,
+            enum: schemaType.schema.paths[subpath].options?.enum
+          };
+        }
+      }
+    }
+    removeSpecifiedPaths(schemaPaths, '.$*');
+  }
+
   return {
-    models: Object.keys(db.models).filter(key => !key.startsWith('__Studio_')).sort(),
+    models,
+    modelSchemaPaths,
     readyState
   };
 };

package/backend/actions/Model/streamDocumentChanges.js

@@ -0,0 +1,123 @@
+'use strict';
+
+const Archetype = require('archetype');
+const authorize = require('../../authorize');
+
+const StreamDocumentChangesParams = new Archetype({
+  model: {
+    $type: 'string',
+    $required: true
+  },
+  documentId: {
+    $type: 'string',
+    $required: true
+  },
+  roles: {
+    $type: ['string']
+  }
+}).compile('StreamDocumentChangesParams');
+
+module.exports = ({ db, changeStream }) => async function* streamDocumentChanges(params) {
+  const { model, documentId, roles } = new StreamDocumentChangesParams(params);
+
+  await authorize('Model.streamDocumentChanges', roles);
+
+  const Model = db.models[model];
+  if (Model == null) {
+    throw new Error(`Model ${model} not found`);
+  }
+
+  if (!changeStream) {
+    throw new Error('Change streams are not enabled');
+  }
+
+  const collectionName = Model.collection.name;
+  const targetId = String(documentId);
+
+  const queue = [];
+  let resolveQueue = null;
+  let streamError = null;
+  let streamEnded = false;
+
+  function enqueue(payload) {
+    queue.push(payload);
+    if (resolveQueue) {
+      const resolve = resolveQueue;
+      resolveQueue = null;
+      resolve();
+    }
+  }
+
+  function handleChange(change) {
+    if (!change || change.ns?.coll !== collectionName) {
+      return;
+    }
+    if (!change.documentKey || change.documentKey._id == null) {
+      return;
+    }
+    if (String(change.documentKey._id) !== targetId) {
+      return;
+    }
+
+    enqueue({
+      type: 'change',
+      operationType: change.operationType,
+      documentKey: change.documentKey,
+      ns: change.ns,
+      updateDescription: change.updateDescription,
+      clusterTime: change.clusterTime
+    });
+  }
+
+  function handleError(err) {
+    streamError = err || new Error('Change stream error');
+    enqueue({ type: 'error', message: streamError.message });
+  }
+
+  function handleEnd() {
+    streamEnded = true;
+    enqueue({ type: 'end' });
+  }
+
+  changeStream.on('change', handleChange);
+  changeStream.on('error', handleError);
+  changeStream.on('end', handleEnd);
+
+  try {
+    while (true) {
+      if (streamError) {
+        throw streamError;
+      }
+
+      if (queue.length === 0) {
+        await new Promise(resolve => {
+          resolveQueue = resolve;
+        });
+      }
+
+      if (streamError) {
+        throw streamError;
+      }
+
+      while (queue.length > 0) {
+        const payload = queue.shift();
+        if (payload?.type === 'end') {
+          return;
+        }
+        yield payload;
+      }
+
+      if (streamEnded) {
+        return;
+      }
+    }
+  } finally {
+    changeStream.off('change', handleChange);
+    changeStream.off('error', handleError);
+    changeStream.off('end', handleEnd);
+    if (resolveQueue) {
+      resolveQueue();
+      resolveQueue = null;
+    }
+  }
+};

package/backend/authorize.js

@@ -23,6 +23,7 @@ const actionsToRequiredRoles = {
   'Model.getDocumentsStream': ['owner', 'admin', 'member', 'readonly'],
   'Model.getIndexes': ['owner', 'admin', 'member', 'readonly'],
   'Model.listModels': ['owner', 'admin', 'member', 'readonly'],
+  'Model.streamDocumentChanges': ['owner', 'admin', 'member', 'readonly'],
   'Model.streamChatMessage': ['owner', 'admin', 'member', 'readonly'],
   'Model.updateDocuments': ['owner', 'admin', 'member']
 };

package/backend/index.js

@@ -16,6 +16,12 @@ module.exports = function backend(db, studioConnection, options) {
   const ChatMessage = studioConnection.model('__Studio_ChatMessage', chatMessageSchema, 'studio__chatMessages');
   const ChatThread = studioConnection.model('__Studio_ChatThread', chatThreadSchema, 'studio__chatThreads');
 
-  const actions = applySpec(Actions, { db, studioConnection, options });
+  let changeStream = null;
+  if (options?.changeStream) {
+    changeStream = db.watch();
+  }
+
+  const actions = applySpec(Actions, { db, studioConnection, options, changeStream });
+  actions.services = { changeStream };
   return actions;
 };

package/eslint.config.js

@@ -39,7 +39,9 @@ module.exports = defineConfig([
         process: true,
         setTimeout: true,
         navigator: true,
-        TextDecoder: true
+        TextDecoder: true,
+        AbortController: true,
+        clearTimeout: true
       },
       sourceType: 'commonjs'
     },

package/express.js

@@ -7,8 +7,9 @@ const { toRoute, objectRouter } = require('extrovert');
 
 module.exports = async function mongooseStudioExpressApp(apiUrl, conn, options) {
   const router = express.Router();
+  options = options ? { changeStream: true, ...options } : { changeStream: true };
 
-  const mothershipUrl = options?._mothershipUrl || 'https://mongoose-js.netlify.app/.netlify/functions';
+  const mothershipUrl = options._mothershipUrl || 'https://mongoose-js.netlify.app/.netlify/functions';
   let workspace = null;
   if (options?.apiKey) {
     ({ workspace } = await fetch(`${mothershipUrl}/getWorkspace`, {
@@ -31,7 +32,7 @@ module.exports = async function mongooseStudioExpressApp(apiUrl, conn, options)
   }
 
   apiUrl = apiUrl || 'api';
-  const backend = Backend(conn, options?.studioConnection, options);
+  const backend = Backend(conn, options.studioConnection, options);
 
   router.use(
     '/api',

package/frontend/public/app.js

@@ -689,6 +689,16 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         yield { document: doc };
       }
     },
+    streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
+      const pollIntervalMs = 5000;
+      while (!options.signal?.aborted) {
+        await new Promise(resolve => setTimeout(resolve, pollIntervalMs));
+        if (options.signal?.aborted) {
+          return;
+        }
+        yield { type: 'poll', model: params.model, documentId: params.documentId };
+      }
+    },
     getCollectionInfo: function getCollectionInfo(params) {
       return client.post('', { action: 'Model.getCollectionInfo', ...params }).then(res => res.data);
     },
@@ -909,6 +919,56 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         }
       }
     },
+    streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
+      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',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        },
+        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);
     },
@@ -2126,7 +2186,7 @@ module.exports = app => app.component('dashboard-chart', {
 (module) {
 
 "use strict";
-module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl pb-2\">\n    <document-details :document=\"value.$document.document\" :schemaPaths=\"schemaPaths\" />\n  </div>\n</div>";
+module.exports = "<div class=\"py-2\">\n  <div class=\"text-xl pb-2\">\n    <list-json\n      :value=\"value.$document.document\"\n      :references=\"references\" />\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -2146,23 +2206,22 @@ const template = __webpack_require__(/*! ./dashboard-document.html */ "./fronten
 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]);
     }
   }
 });
@@ -4893,7 +4952,7 @@ module.exports = ".document .document-menu {\n  display: flex;\n  position: stic
 (module) {
 
 "use strict";
-module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          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-gray-300 border-r-0 rounded-l-lg rounded-r-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          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-gray-300 rounded-r-lg rounded-l-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            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\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          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-gray-300 border-r-0 rounded-l-lg rounded-r-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          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-gray-300 rounded-r-lg rounded-l-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            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\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -4932,30 +4991,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() {
@@ -4967,8 +5021,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: {
@@ -4976,6 +5054,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(', '));
@@ -5043,6 +5240,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({
@@ -5869,8 +6103,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';
@@ -5883,8 +6121,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);
       }
@@ -5898,8 +6140,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;
@@ -35732,7 +35975,7 @@ module.exports = FilterXSS;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.9","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","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"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","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"}}');
 
 /***/ }
 

package/frontend/public/tw.css

@@ -950,6 +950,14 @@ video {
   height: 0px;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-1\.5 {
+  height: 0.375rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -1062,6 +1070,14 @@ video {
   width: 0px;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-1\.5 {
+  width: 0.375rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1661,6 +1677,11 @@ video {
   background-color: rgb(5 150 105 / var(--tw-bg-opacity));
 }
 
+.bg-forest-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 242 58 / var(--tw-bg-opacity));
+}
+
 .bg-forest-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 202 44 / var(--tw-bg-opacity));
@@ -1751,6 +1772,11 @@ video {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+.bg-slate-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
+
 .bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -2124,6 +2150,11 @@ video {
   color: rgb(0 242 58 / var(--tw-text-opacity));
 }
 
+.text-forest-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(0 202 44 / var(--tw-text-opacity));
+}
+
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2204,11 +2235,21 @@ video {
   color: rgb(7 89 133 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
 .text-slate-700 {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));
@@ -2502,6 +2543,11 @@ video {
   background-color: rgb(253 230 138 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));

package/frontend/src/api.js

@@ -132,6 +132,16 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         yield { document: doc };
       }
     },
+    streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
+      const pollIntervalMs = 5000;
+      while (!options.signal?.aborted) {
+        await new Promise(resolve => setTimeout(resolve, pollIntervalMs));
+        if (options.signal?.aborted) {
+          return;
+        }
+        yield { type: 'poll', model: params.model, documentId: params.documentId };
+      }
+    },
     getCollectionInfo: function getCollectionInfo(params) {
       return client.post('', { action: 'Model.getCollectionInfo', ...params }).then(res => res.data);
     },
@@ -352,6 +362,56 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         }
       }
     },
+    streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
+      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',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        },
+        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);
     },

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

@@ -1,8 +1,7 @@
 <div class="py-2">
-  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
-    {{header}}
-  </div>
   <div class="text-xl pb-2">
-    <document-details :document="value.$document.document" :schemaPaths="schemaPaths" />
+    <list-json
+      :value="value.$document.document"
+      :references="references" />
   </div>
-</div>
+</div>

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.9",
+  "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": {