@mongoosejs/studio 0.4.1 → 0.5.1

package/frontend/src/api.js

@@ -29,6 +29,9 @@ client.interceptors.response.use(
 );
 
 if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
+  exports.getCapabilities = function getCapabilities() {
+    return client.post('', { action: 'getCapabilities' }).then(res => res.data);
+  };
   exports.status = function status() {
     return client.post('', { action: 'status' }).then(res => res.data);
   };
@@ -205,6 +208,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     }
   };
 } else {
+  exports.getCapabilities = function getCapabilities() {
+    return client.get('/getCapabilities').then(res => res.data);
+  };
   exports.status = function status() {
     return client.get('/status').then(res => res.data);
   };

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

@@ -24,6 +24,7 @@
             :script="part.content"
             :language="part.language"
             :target-dashboard-id="targetDashboardId"
+            :capabilities="capabilities"
             @copyMessage="copyMessage"></chat-message-script>
         </div>
       </div>

package/frontend/src/chat/chat-message/chat-message.js

@@ -6,7 +6,7 @@ const template = require('./chat-message.html');
 
 module.exports = app => app.component('chat-message', {
   template: template,
-  props: ['message', 'targetDashboardId'],
+  props: ['message', 'targetDashboardId', 'capabilities'],
   computed: {
     styleForMessage() {
       return this.message.role === 'user' ? 'p-3 bg-muted' : 'py-3 pr-3';
@@ -62,10 +62,11 @@ module.exports = app => app.component('chat-message', {
       if (input.limit && input.limit !== 10) parts.push('limit=' + input.limit);
       return parts.length ? '(' + parts.join(', ') + ')' : '';
     },
-    async executeScript(message, script) {
+    async executeScript(message, script, dryRun) {
       const { chatMessage } = await api.ChatMessage.executeScript({
         chatMessageId: message._id,
-        script
+        script,
+        dryRun
       });
       message.executionResult = chatMessage.executionResult;
       console.log(message);

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

@@ -20,17 +20,19 @@
           : 'bg-muted hover:bg-muted text-gray-600'
       ]"
       @click="activeTab = 'output'">
-      Output
+      <span>Output</span>
+      <span v-if="isDryRunResult" class="ml-1">[Dry Run]</span>
+      <span
+        v-if="isDryRunResult"
+        class="ml-1 inline-flex align-middle cursor-pointer"
+        title="This output was produced in dry run mode"
+        @click.stop="openDryRunInfoModal">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M18 10A8 8 0 112 10a8 8 0 0116 0zm-7-3a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 102 0v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+        </svg>
+      </span>
     </button>
     <div class="ml-auto mr-1 flex items-center">
-      <button
-        v-if="activeTab === 'output'"
-        class="px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
-        @click="openDetailModal">
-        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.2em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <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>
       <button
         v-if="activeTab === 'code' && !isEditing"
         class="px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center"
@@ -39,12 +41,58 @@
           <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z" />
         </svg>
       </button>
-      <async-button
-        v-if="!isEditing"
-        class="px-2 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-none rounded cursor-pointer transition-colors disabled:bg-gray-400"
-        @click="executeScript">
-        Run
-      </async-button>
+      <button
+        v-if="activeTab === 'output'"
+        class="px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
+        @click="openDetailModal">
+        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.2em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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="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"
+            :disabled="isExecuting"
+            @click="executeScript()">
+            {{ selectedRunLabel }}
+          </button>
+          <button
+            class="px-1 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-l border-black/10 rounded-r-md cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
+            :disabled="isExecuting"
+            @click.stop="toggleRunDropdown">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <button
+            class="ml-1 px-1 py-1 text-content-secondary hover:bg-muted rounded cursor-pointer transition-colors"
+            @click="openRunInfoModal"
+            title="How run works">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M18 10A8 8 0 112 10a8 8 0 0116 0zm-7-3a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 102 0v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+        <div
+          v-if="showRunDropdown"
+          class="absolute right-0 z-10 mt-1 w-40 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5">
+          <button
+            class="block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted"
+            :disabled="isExecuting"
+            @click="selectRunMode('run')">
+            Run
+          </button>
+          <button
+            class="block w-full text-left px-4 py-2 text-xs"
+            :class="isExecuting ? 'cursor-not-allowed text-gray-400' : canUseDryRun ? 'text-content-secondary hover:bg-muted' : 'cursor-not-allowed text-gray-400'"
+            :aria-disabled="!canUseDryRun"
+            :title="dryRunDisabledTitle"
+            @click="selectRunMode('dryRun')">
+            Dry Run
+          </button>
+        </div>
+      </div>
       <div class="relative ml-1" ref="dropdown">
         <button
           @click.stop="toggleDropdown"
@@ -100,7 +148,7 @@
         </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">
+          @click="executeScript(false)">
           Execute
         </async-button>
       </div>
@@ -134,6 +182,40 @@
       </div>
     </template>
   </modal>
+  <modal v-if="showRunInfoModal">
+    <template #body>
+      <div class="modal-exit" @click="showRunInfoModal = false">&times;</div>
+      <div>
+        <div class="mt-4 text-content font-semibold">How Run Works</div>
+        <p class="mt-4 text-sm text-content-secondary">
+          Run executes the script shown in this message on the server with access to your Mongoose models through <code class="bg-muted px-1 rounded">db.models</code>. The latest script is saved back onto the chat message.
+        </p>
+        <p class="mt-2 text-sm text-content-secondary">
+          Output and console logs are stored on the message, and the Output tab updates to show the latest result.
+        </p>
+        <p class="mt-2 text-sm text-content-secondary">
+          Dry Run executes the same script inside a MongoDB transaction. Studio attaches the transaction session to Mongoose model and collection calls, captures the output and logs, then aborts the transaction so writes are rolled back.
+        </p>
+        <p class="mt-2 text-sm text-content-secondary">
+          Dry Run requires MongoDB transaction support. It is intended for previewing what a script would return before persisting changes.
+        </p>
+      </div>
+    </template>
+  </modal>
+  <modal v-if="showDryRunInfoModal">
+    <template #body>
+      <div class="modal-exit" @click="showDryRunInfoModal = false">&times;</div>
+      <div>
+        <div class="mt-4 text-content font-semibold">Dry Run Output</div>
+        <p class="mt-4 text-sm text-content-secondary">
+          This output was produced in dry run mode. The script ran on the server inside a MongoDB transaction, and Studio aborted that transaction after the script finished.
+        </p>
+        <p class="mt-2 text-sm text-content-secondary">
+          No data changes from the script were persisted. The displayed output and console logs were saved on the chat message so you can review what the script returned.
+        </p>
+      </div>
+    </template>
+  </modal>
   <modal v-if="showCreateDashboardModal">
     <template #body>
       <div class="modal-exit" @click="showCreateDashboardModal = false">&times;</div>

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

@@ -6,15 +6,20 @@ const template = require('./chat-message-script.html');
 
 module.exports = app => app.component('chat-message-script', {
   template,
-  props: ['message', 'script', 'language', 'targetDashboardId'],
+  props: ['message', 'script', 'language', 'targetDashboardId', 'capabilities'],
   emits: ['copyMessage'],
   data() {
     return {
       activeTab: 'code',
+      selectedRunMode: 'run',
       showDetailModal: false,
+      showRunInfoModal: false,
+      showDryRunInfoModal: false,
       showCreateDashboardModal: false,
       showOverwriteDashboardConfirmationModal: false,
+      showRunDropdown: false,
       showDropdown: false,
+      isExecuting: false,
       newDashboardTitle: '',
       dashboardCode: '',
       createError: null,
@@ -30,32 +35,60 @@ module.exports = app => app.component('chat-message-script', {
     },
     canOverwriteDashboard() {
       return !!this.targetDashboardId;
+    },
+    canUseDryRun() {
+      return this.capabilities?.supportsTransactions !== false;
+    },
+    dryRunDisabledTitle() {
+      return this.canUseDryRun ? null : 'dry run mode requires MongoDB transactions support';
+    },
+    isDryRunResult() {
+      return !!this.message.executionResult?.dryRun;
+    },
+    selectedRunLabel() {
+      return this.selectedRunMode === 'dryRun' ? 'Dry Run' : 'Run';
     }
   },
   methods: {
-    async executeScript() {
+    async executeScript(dryRun = this.selectedRunMode === 'dryRun') {
       const scriptToRun = this.isEditing ? this.editedScript : this.script;
+      if (this.isExecuting) {
+        return;
+      }
+      this.showRunDropdown = false;
       this.editedScript = scriptToRun;
-      const { chatMessage } = await api.ChatMessage.executeScript({
-        chatMessageId: this.message._id,
-        script: scriptToRun
-      });
-      this.message.executionResult = chatMessage.executionResult;
-      this.message.script = chatMessage.script;
-      this.message.content = chatMessage.content;
-      this.editedScript = chatMessage.script;
-      if (this.isEditing) {
-        this.finishEditing();
-      } else {
-        this.highlightCode();
+      this.isExecuting = true;
+      try {
+        const { chatMessage } = await api.ChatMessage.executeScript({
+          chatMessageId: this.message._id,
+          script: scriptToRun,
+          dryRun
+        });
+        this.message.executionResult = chatMessage.executionResult;
+        this.message.script = chatMessage.script;
+        this.message.content = chatMessage.content;
+        this.editedScript = chatMessage.script;
+        if (this.isEditing) {
+          this.finishEditing();
+        } else {
+          this.highlightCode();
+        }
+        this.activeTab = 'output';
+        this.$toast.success('Script executed successfully!');
+        return chatMessage;
+      } finally {
+        this.isExecuting = false;
       }
-      this.activeTab = 'output';
-      this.$toast.success('Script executed successfully!');
-      return chatMessage;
     },
     openDetailModal() {
       this.showDetailModal = true;
     },
+    openRunInfoModal() {
+      this.showRunInfoModal = true;
+    },
+    openDryRunInfoModal() {
+      this.showDryRunInfoModal = true;
+    },
     openCreateDashboardModal() {
       this.newDashboardTitle = '';
       this.dashboardCode = this.script;
@@ -72,6 +105,21 @@ module.exports = app => app.component('chat-message-script', {
     },
     toggleDropdown() {
       this.showDropdown = !this.showDropdown;
+      this.showRunDropdown = false;
+    },
+    toggleRunDropdown() {
+      this.showRunDropdown = !this.showRunDropdown;
+      this.showDropdown = false;
+    },
+    selectRunMode(mode) {
+      if (this.isExecuting) {
+        return;
+      }
+      if (mode === 'dryRun' && !this.canUseDryRun) {
+        return;
+      }
+      this.selectedRunMode = mode;
+      this.showRunDropdown = false;
     },
     startEditing() {
       this.isEditing = true;
@@ -97,7 +145,11 @@ module.exports = app => app.component('chat-message-script', {
       });
     },
     handleBodyClick(event) {
+      const runDropdown = this.$refs.runDropdown;
       const dropdown = this.$refs.dropdown;
+      if (runDropdown && typeof runDropdown.contains === 'function' && !runDropdown.contains(event.target)) {
+        this.showRunDropdown = false;
+      }
       if (dropdown && typeof dropdown.contains === 'function' && !dropdown.contains(event.target)) {
         this.showDropdown = false;
       }
@@ -172,6 +224,14 @@ module.exports = app => app.component('chat-message-script', {
         this.editedScript = newScript;
         this.highlightCode();
       }
+    },
+    capabilities: {
+      immediate: true,
+      handler(capabilities) {
+        if (capabilities?.supportsTransactions === false && this.selectedRunMode === 'dryRun') {
+          this.selectedRunMode = 'run';
+        }
+      }
     }
   },
   mounted() {

package/frontend/src/chat/chat.html

@@ -112,7 +112,11 @@
         </div>
         <ul role="list" class="space-y-4" v-else>
           <li v-for="message in chatMessages" :key="message._id">
-            <chat-message :message="message" :target-dashboard-id="currentThread?.dashboardId"></chat-message>
+            <chat-message
+              :message="message"
+              :target-dashboard-id="currentThread?.dashboardId"
+              :capabilities="capabilities">
+            </chat-message>
           </li>
         </ul>
       </div>

package/frontend/src/chat/chat.js

@@ -23,7 +23,12 @@ module.exports = {
     sharingThread: false,
     threadSearch: '',
     showProUpgradeModal: false,
-    agentTools: agentToolMetadata
+    agentTools: agentToolMetadata,
+    capabilities: {
+      supportsChangeStreams: false,
+      supportsTransactions: true,
+      supportsAI: false
+    }
   }),
   methods: {
     async sendMessage() {
@@ -300,8 +305,12 @@ module.exports = {
 
     this.draftAgentMode = this.getAgentModePreference();
     this.chatThreadId = this.threadId;
-    const { chatThreads } = await api.ChatThread.listChatThreads();
+    const [{ chatThreads }, { capabilities }] = await Promise.all([
+      api.ChatThread.listChatThreads(),
+      api.getCapabilities()
+    ]);
     this.chatThreads = chatThreads;
+    this.capabilities = capabilities;
     if (this.chatThreadId) {
       await this.syncCurrentThreadAgentMode();
       const { chatMessages } = await api.ChatThread.getChatThread({ chatThreadId: this.chatThreadId });

package/frontend/src/modal/modal.css

@@ -90,7 +90,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-bottom: 0.25em;
 }
 
 .modal-container .modal-exit:hover {

package/frontend/src/models/models.js

@@ -1058,8 +1058,8 @@ module.exports = app => app.component('models', {
                 const projectionPaths = this.normalizeProjectionPathsForDisplay(routeProjectionInput);
                 const fromProjectionInput = Array.isArray(projectionPaths) ?
                   projectionPaths
-                  .map(path => this.schemaPaths.find(p => p.path === path))
-                  .filter(Boolean) :
+                    .map(path => this.schemaPaths.find(p => p.path === path))
+                    .filter(Boolean) :
                   [];
                 this.filteredPaths = fromProjectionInput;
               } else {

package/frontend/src/models/projection-search/projection-search.js

@@ -6,9 +6,9 @@ function getBraceDepth(text, pos) {
   let depth = 0;
   for (let i = 0; i < pos; i++) {
     const ch = text[i];
-    if (ch === "{") {
+    if (ch === '{') {
       depth++;
-    } else if (ch === "}") {
+    } else if (ch === '}') {
       depth--;
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.4.1",
-  "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
+  "version": "0.5.1",
+  "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
     "type": "git",

package/backend/actions/Script/execute.js

@@ -1,20 +0,0 @@
-'use strict';
-
-const Archetype = require('archetype');
-
-const ExecuteParams = new Archetype({
-  code: {
-    $type: 'string',
-    $required: true
-  }
-}).compile('ExecuteParams');
-
-module.exports = ({ db }) => async function execute(params) {
-  const { code } = new ExecuteParams(params);
-
-  const res = eval(code);
-
-  return {
-    res
-  };
-};

package/backend/actions/Script/index.js

@@ -1,3 +0,0 @@
-'use strict';
-
-exports.execute = require('./execute');