@mongoosejs/studio 0.5.13 → 0.6.0

package/frontend/src/script/script.js

@@ -0,0 +1,98 @@
+/* global Prism */
+'use strict';
+
+const api = require('../api');
+const baseComponent = require('../_util/baseComponent');
+const template = require('./script.html');
+
+module.exports = {
+  template,
+  extends: baseComponent,
+  props: ['scriptId'],
+  inject: ['state'],
+  data() {
+    return {
+      status: 'loading',
+      script: null,
+      editedScript: '',
+      isEditing: false,
+      activeTab: 'code',
+      selectedRunMode: 'run',
+      showRunDropdown: false
+    };
+  },
+  computed: {
+    canUseDryRun() {
+      return this.state.capabilities?.supportsTransactions !== false;
+    },
+    selectedRunLabel() {
+      return this.selectedRunMode === 'dryRun' ? 'Dry Run' : 'Run';
+    },
+    isDryRunResult() {
+      return this.script?.executionFinishedAt != null && this.script?.dryRun === true;
+    }
+  },
+  methods: {
+    async loadScript() {
+      this.status = 'loading';
+      try {
+        const { script } = await api.Script.getScript({ scriptId: this.scriptId });
+        this.script = script;
+        this.editedScript = script.script;
+        this.activeTab = script.executionResult == null ? 'code' : 'output';
+      } finally {
+        this.status = 'loaded';
+        this.highlightCode();
+      }
+    },
+    startEditing() {
+      this.editedScript = this.script.script;
+      this.isEditing = true;
+      this.activeTab = 'code';
+    },
+    cancelEditing() {
+      this.editedScript = this.script.script;
+      this.isEditing = false;
+      this.highlightCode();
+    },
+    selectRunMode(mode) {
+      if (mode === 'dryRun' && !this.canUseDryRun) {
+        return;
+      }
+      this.selectedRunMode = mode;
+      this.showRunDropdown = false;
+    },
+    async executeScript() {
+      this.showRunDropdown = false;
+      try {
+        const { script } = await api.Script.executeScript({
+          scriptId: this.scriptId,
+          script: this.isEditing ? this.editedScript : this.script.script,
+          dryRun: this.selectedRunMode === 'dryRun'
+        });
+        this.script = script;
+        this.editedScript = script.script;
+        this.isEditing = false;
+        this.activeTab = 'output';
+        this.$toast.success(this.script.dryRun ? 'Dry run completed!' : 'Script executed successfully!');
+      } catch (err) {
+        const { script } = await api.Script.getScript({ scriptId: this.scriptId });
+        this.script = script;
+        this.editedScript = script.script;
+        this.isEditing = false;
+        this.activeTab = 'output';
+        throw err;
+      }
+    },
+    highlightCode() {
+      this.$nextTick(() => {
+        if (this.$refs.code) {
+          Prism.highlightElement(this.$refs.code);
+        }
+      });
+    }
+  },
+  mounted() {
+    return this.loadScript();
+  }
+};

package/frontend/src/tooltip/tooltip.html

@@ -0,0 +1,28 @@
+<span
+  ref="trigger"
+  class="inline-flex outline-none focus-visible:rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+  tabindex="0"
+  :aria-describedby="isOpen ? tooltipId : null"
+  @mouseenter="show"
+  @mouseleave="hideUnlessPinned"
+  @focusin="show"
+  @focusout="handleFocusOut"
+  @click="toggle"
+  @keydown.esc.stop="hide"
+>
+  <slot></slot>
+  <span
+    v-show="isOpen"
+    ref="tooltip"
+    :id="tooltipId"
+    class="pointer-events-none fixed z-[1000] w-max max-w-[min(20rem,calc(100vw-1rem))] whitespace-normal rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-normal leading-4 text-white shadow-lg"
+    :style="tooltipStyle"
+    role="tooltip"
+  >
+    {{ text }}
+    <span
+      class="absolute left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900"
+      :class="placement === 'bottom' ? '-top-1' : '-bottom-1'"
+    ></span>
+  </span>
+</span>

package/frontend/src/tooltip/tooltip.js

@@ -0,0 +1,94 @@
+'use strict';
+
+const template = require('./tooltip.html');
+
+let nextTooltipId = 0;
+
+module.exports = app => app.component('tooltip', {
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  },
+  template,
+  data() {
+    return {
+      isOpen: false,
+      isPinned: false,
+      placement: 'bottom',
+      tooltipId: `tooltip-${++nextTooltipId}`,
+      tooltipStyle: {
+        visibility: 'hidden'
+      }
+    };
+  },
+  mounted() {
+    document.addEventListener('click', this.handleOutsideClick);
+    window.addEventListener('resize', this.updatePosition);
+    window.addEventListener('scroll', this.updatePosition, true);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick);
+    window.removeEventListener('resize', this.updatePosition);
+    window.removeEventListener('scroll', this.updatePosition, true);
+  },
+  methods: {
+    show() {
+      this.isOpen = true;
+      this.tooltipStyle = { visibility: 'hidden' };
+      this.$nextTick(this.updatePosition);
+    },
+    hide() {
+      this.isOpen = false;
+      this.isPinned = false;
+    },
+    hideUnlessPinned() {
+      if (!this.isPinned) {
+        this.isOpen = false;
+      }
+    },
+    toggle() {
+      if (this.isPinned) {
+        this.hide();
+        return;
+      }
+
+      this.isPinned = true;
+      this.show();
+    },
+    handleFocusOut(event) {
+      if (!this.$el.contains(event.relatedTarget)) {
+        this.hideUnlessPinned();
+      }
+    },
+    handleOutsideClick(event) {
+      if (!this.$el.contains(event.target)) {
+        this.hide();
+      }
+    },
+    updatePosition() {
+      if (!this.isOpen || !this.$refs.trigger || !this.$refs.tooltip) {
+        return;
+      }
+
+      const gap = 8;
+      const viewportPadding = 8;
+      const triggerRect = this.$refs.trigger.getBoundingClientRect();
+      const tooltipRect = this.$refs.tooltip.getBoundingClientRect();
+      const fitsBelow = triggerRect.bottom + gap + tooltipRect.height <= window.innerHeight - viewportPadding;
+      const top = fitsBelow ?
+        triggerRect.bottom + gap :
+        Math.max(viewportPadding, triggerRect.top - gap - tooltipRect.height);
+      const centeredLeft = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      const maxLeft = Math.max(viewportPadding, window.innerWidth - tooltipRect.width - viewportPadding);
+      const left = Math.min(Math.max(viewportPadding, centeredLeft), maxLeft);
+
+      this.placement = fitsBelow ? 'bottom' : 'top';
+      this.tooltipStyle = {
+        left: `${Math.round(left)}px`,
+        top: `${Math.round(top)}px`
+      };
+    }
+  }
+});

package/index.d.ts

@@ -5,7 +5,16 @@ declare module '@mongoosejs/studio' {
   const express: (
     path?: string,
     connOrMongoose?: Connection | Mongoose,
-    options?: { apiKey?: string; bindIp?: string | string[] | null }
+    options?: {
+      apiKey?: string;
+      bindIp?: string | string[] | null;
+      maxTimeMS?: number;
+      /** Serve the MCP endpoint at `<mount>/mcp`. Defaults to true. */
+      mcp?: boolean;
+      readPreference?: 'primary' | 'secondaryPreferred' | 'secondary';
+      /** Public base URL Mongoose Studio is mounted on. Required when MCP and apiKey are enabled. */
+      publicUrl?: string;
+    }
   ) => Promise<RequestHandler>;
 
   const studio: {

package/local.js

@@ -30,7 +30,8 @@ async function run() {
       _mothershipUrl: 'http://localhost:7777/.netlify/functions',
       // apiKey: 'TACO',
       openAIAPIKey: process.env.OPENAI_API_KEY,
-      googleGeminiAPIKey: process.env.GEMINI_API_KEY
+      googleGeminiAPIKey: process.env.GEMINI_API_KEY,
+      maxTimeMS: 1000
     })
   );
 

package/nest.d.ts

@@ -9,6 +9,10 @@ declare module '@mongoosejs/studio/nest' {
     connectionToken?: string | symbol | Function;
     apiKey?: string;
     bindIp?: string | string[] | null;
+    maxTimeMS?: number;
+    mcp?: boolean;
+    readPreference?: 'primary' | 'secondaryPreferred' | 'secondary';
+    publicUrl?: string;
     [key: string]: any;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.13",
+  "version": "0.6.0",
   "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": {
@@ -12,12 +12,13 @@
     "@ai-sdk/anthropic": "2.x",
     "@ai-sdk/google": "2.x",
     "@ai-sdk/openai": "2.x",
+    "@modelcontextprotocol/sdk": "^1.30.1",
     "ace-builds": "^1.43.6",
     "ai": "5.x",
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
-    "extrovert": "^0.2.0",
+    "extrovert": "^0.2.1",
     "marked": "15.0.12",
     "mpath": "^0.9.0",
     "node-inspect-extracted": "3.x",
@@ -28,7 +29,8 @@
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
     "webpack": "5.x",
-    "xss": "^1.0.15"
+    "xss": "^1.0.15",
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@nestjs/common": "10.x || 11.x",

package/vercel.d.ts

@@ -8,6 +8,10 @@ declare module '@mongoosejs/studio/vercel' {
     studioConnection?: Connection;
     /** Watch the connection for changes and stream them to the Studio frontend. */
     changeStream?: boolean;
+    /** Maximum execution time in milliseconds for MongoDB operations. */
+    maxTimeMS?: number;
+    /** Read preference for Studio reads against the application database. */
+    readPreference?: 'primary' | 'secondaryPreferred' | 'secondary';
     /** Chat model name, e.g. 'gpt-4o-mini' */
     model?: string;
     openAIAPIKey?: string;