@mongoosejs/studio 0.4.0 → 0.5.0

package/frontend/public/tw.css

@@ -1826,6 +1826,10 @@ video {
   border-style: none;
 }
 
+.border-black\/10 {
+  border-color: rgb(0 0 0 / 0.1);
+}
+
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));

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/detail-objectid/detail-objectid.html

@@ -0,0 +1 @@
+<pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0">{{displayValue}}</pre>

package/frontend/src/detail-objectid/detail-objectid.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const template = require('./detail-objectid.html');
+const ObjectId = require('mongoose/lib/types/objectid');
+
+module.exports = app => app.component('detail-objectid', {
+  template,
+  props: ['value', 'viewMode'],
+  emits: ['updated'],
+  watch: {
+    displayValue: {
+      immediate: true,
+      handler(val) {
+        this.$emit('updated', val);
+      }
+    }
+  },
+  computed: {
+    format() {
+      return this.viewMode || 'hex';
+    },
+    hexValue() {
+      if (this.value == null) {
+        return null;
+      }
+      if (typeof this.value === 'string') {
+        return this.value;
+      }
+      if (typeof this.value === 'object') {
+        if (typeof this.value.toHexString === 'function') {
+          return this.value.toHexString();
+        }
+        if (typeof this.value.$oid === 'string') {
+          return this.value.$oid;
+        }
+      }
+      return String(this.value);
+    },
+    objectIdDate() {
+      const hex = this.hexValue;
+      return new ObjectId(hex).getTimestamp();
+    },
+    displayValue() {
+      if (this.value == null) {
+        return String(this.value);
+      }
+
+      const hex = this.hexValue;
+      if (this.format === 'object_call') {
+        return `ObjectId('${hex}')`;
+      }
+      if (this.format === 'unix_seconds') {
+        if (!this.objectIdDate) {
+          return 'Invalid ObjectId';
+        }
+        return String(Math.floor(this.objectIdDate.getTime() / 1000));
+      }
+      if (this.format === 'date') {
+        if (!this.objectIdDate) {
+          return 'Invalid ObjectId';
+        }
+        return this.objectIdDate.toISOString();
+      }
+      return hex;
+    }
+  }
+});

package/frontend/src/document-details/document-property/document-property.html

@@ -20,7 +20,7 @@
       <span class="ml-2 text-sm text-content-tertiary">({{(path.instance || 'unknown').toLowerCase()}})</span>
       <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
         <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
-          <button
+      <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
             :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
@@ -76,6 +76,11 @@
         :path="path"
         @update:viewMode="dateViewMode = $event"
       ></date-view-mode-picker>
+      <objectid-view-mode-picker
+        v-if="isObjectIdPath"
+        :viewMode="objectIdViewMode"
+        @update:viewMode="objectIdViewMode = $event"
+      ></objectid-view-mode-picker>
       <button
         type="button"
         class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface"
@@ -202,7 +207,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
           @updated="renderedValue = $event"></component>
         <button
           @click="toggleValueExpansion"
@@ -219,7 +224,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
           @updated="renderedValue = $event"></component>
       </div>
     </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -18,6 +18,7 @@ module.exports = app => app.component('document-property', {
     return {
       dateType: 'picker', // picker, iso
       dateViewMode: 'utc_iso',
+      objectIdViewMode: 'hex',
       renderedValue: UNSET,
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
@@ -38,6 +39,9 @@ module.exports = app => app.component('document-property', {
     isDatePath() {
       return this.path?.instance === 'Date';
     },
+    isObjectIdPath() {
+      return this.path?.instance === 'ObjectID' || this.path?.instance === 'ObjectId';
+    },
     rawValue() {
       return this.getValueForPath(this.path.path);
     },
@@ -177,6 +181,9 @@ module.exports = app => app.component('document-property', {
       if (schemaPath.instance === 'Date') {
         return 'detail-date';
       }
+      if (schemaPath.instance === 'ObjectID' || schemaPath.instance === 'ObjectId') {
+        return 'detail-objectid';
+      }
       return 'detail-default';
     },
     getEditComponentForPath(path) {

package/frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.html

@@ -0,0 +1,12 @@
+<div class="flex items-center gap-2" @click.stop>
+  <select
+    :value="format"
+    @input="onFormatChange($event.target.value)"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
+  >
+    <option value="hex">Hex string</option>
+    <option value="object_call">ObjectId('...')</option>
+    <option value="unix_seconds">Unix timestamp</option>
+    <option value="date">Date</option>
+  </select>
+</div>

package/frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const template = require('./objectid-view-mode-picker.html');
+
+module.exports = app => app.component('objectid-view-mode-picker', {
+  template,
+  props: ['viewMode'],
+  emits: ['update:viewMode'],
+  computed: {
+    format() {
+      return this.viewMode || 'hex';
+    }
+  },
+  methods: {
+    onFormatChange(newFormat) {
+      this.$emit('update:viewMode', newFormat);
+    }
+  }
+});

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/document-search/document-search.js

@@ -45,6 +45,12 @@ module.exports = app => app.component('document-search', {
     this.$refs.searchInput.focus();
   },
   methods: {
+    focusInput() {
+      const input = this.$refs.searchInput;
+      if (input && typeof input.focus === 'function') {
+        input.focus();
+      }
+    },
     emitSearch() {
       this.$emit('input', this.searchText);
       this.$emit('search', this.searchText);

package/frontend/src/models/models.html

@@ -263,14 +263,12 @@
           </span>
         </div>
         <div v-if="isProjectionMenuSelected && (outputType === 'table' || outputType === 'json')" class="flex items-center gap-2 w-full mt-2 flex-shrink-0">
-          <input
-            ref="projectionInput"
-            v-model="projectionText"
-            type="text"
-            placeholder="Projection: name email, or -password"
-            class="flex-1 min-w-0 rounded border border-edge bg-surface px-2 py-1.5 text-sm font-mono placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-            @focus="initProjection($event)"
-            @keydown.enter="applyProjectionFromInput()"
+          <projection-search
+            ref="projectionSearch"
+            :value="projectionText"
+            :schema-paths="schemaPaths"
+            @projection-input="projectionText = $event"
+            @apply="applyProjectionFromInput"
           />
         </div>
       </div>