@mongoosejs/studio 0.3.11 → 0.4.1

package/frontend/public/app.js

@@ -1,6 +1,37 @@
 /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./backend/chatAgent/agentToolMetadata.js"
+/*!************************************************!*\
+  !*** ./backend/chatAgent/agentToolMetadata.js ***!
+  \************************************************/
+(module) {
+
+"use strict";
+
+
+module.exports = [
+  {
+    name: 'estimatedDocumentCount',
+    description: 'Count the estimated number of documents in a collection. Times out after 5 seconds.'
+  },
+  {
+    name: 'find',
+    description: 'Run a find() query on a Mongoose model and return an array of documents. Times out after 5 seconds.'
+  },
+  {
+    name: 'findOne',
+    description: 'Run a findOne() query on a Mongoose model and return a single document or null. Times out after 5 seconds.'
+  },
+  {
+    name: 'typeCheck',
+    description: 'Type-checks the script and validates syntax using TypeScript and node --check'
+  }
+];
+
+
+/***/ },
+
 /***/ "./frontend/src/_util/baseComponent.js"
 /*!*********************************************!*\
   !*** ./frontend/src/_util/baseComponent.js ***!
@@ -685,6 +716,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     shareChatThread(params) {
       return client.post('', { action: 'ChatThread.shareChatThread', ...params }).then(res => res.data);
     },
+    toggleAgentMode(params) {
+      return client.post('', { action: 'ChatThread.toggleAgentMode', ...params }).then(res => res.data);
+    },
     streamChatMessage: async function* streamChatMessage(params) {
       // Don't stream on Next.js or Netlify for now.
       const data = await client.post('', { action: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
@@ -861,6 +895,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     shareChatThread: function shareChatThread(params) {
       return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
     },
+    toggleAgentMode: function toggleAgentMode(params) {
+      return client.post('/ChatThread/toggleAgentMode', params).then(res => res.data);
+    },
     streamChatMessage: async function* streamChatMessage(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/streamChatMessage?' + new URLSearchParams(params).toString();
@@ -1593,6 +1630,14 @@ module.exports = app => app.component('chat-message', {
     marked(text) {
       return marked(text);
     },
+    formatToolInput(input) {
+      if (!input) return '';
+      const parts = [];
+      if (input.modelName) parts.push(input.modelName);
+      if (input.filter && Object.keys(input.filter).length) parts.push(JSON.stringify(input.filter));
+      if (input.limit && input.limit !== 10) parts.push('limit=' + input.limit);
+      return parts.length ? '(' + parts.join(', ') + ')' : '';
+    },
     async executeScript(message, script) {
       const { chatMessage } = await api.ChatMessage.executeScript({
         chatMessageId: message._id,
@@ -1643,9 +1688,12 @@ module.exports = app => app.component('chat-message', {
 
 
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+const agentToolMetadata = __webpack_require__(/*! ../../../backend/chatAgent/agentToolMetadata */ "./backend/chatAgent/agentToolMetadata.js");
 const getCurrentDateTimeContext = __webpack_require__(/*! ../getCurrentDateTimeContext */ "./frontend/src/getCurrentDateTimeContext.js");
 const template = __webpack_require__(/*! ./chat.html */ "./frontend/src/chat/chat.html");
 
+const AGENT_MODE_STORAGE_KEY = '_mongooseStudioAgentMode';
+
 module.exports = {
   template: template,
   props: ['threadId'],
@@ -1654,12 +1702,15 @@ module.exports = {
     sendingMessage: false,
     newMessage: '',
     chatThreadId: null,
+    draftAgentMode: false,
     chatThreads: [],
     chatMessages: [],
     hideSidebar: null,
+    showAgentSidebar: false,
     sharingThread: false,
     threadSearch: '',
-    showProUpgradeModal: false
+    showProUpgradeModal: false,
+    agentTools: agentToolMetadata
   }),
   methods: {
     async sendMessage() {
@@ -1668,7 +1719,9 @@ module.exports = {
         const content = this.newMessage;
         this.newMessage = '';
         if (!this.chatThreadId) {
-          const { chatThread } = await api.ChatThread.createChatThread();
+          const { chatThread } = await api.ChatThread.createChatThread({
+            agentMode: this.draftAgentMode
+          });
           this.chatThreads.unshift(chatThread);
           this.chatThreadId = chatThread._id;
           this.chatMessages = [];
@@ -1682,11 +1735,7 @@ module.exports = {
           role: 'user'
         });
 
-        this.$nextTick(() => {
-          if (this.$refs.messagesContainer) {
-            this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-          }
-        });
+        this.scrollToBottom();
 
         const params = {
           chatThreadId: this.chatThreadId,
@@ -1695,6 +1744,7 @@ module.exports = {
         };
         let userChatMessage = null;
         let assistantChatMessage = null;
+        const toolCalls = [];
         for await (const event of api.ChatThread.streamChatMessage(params)) {
           if (event.chatMessage) {
             if (!userChatMessage) {
@@ -1703,6 +1753,7 @@ module.exports = {
             } else {
               const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
               assistantChatMessage = event.chatMessage;
+              assistantChatMessage.toolCalls = toolCalls;
               if (assistantChatMessageIndex !== -1) {
                 this.chatMessages.splice(assistantChatMessageIndex, 1, assistantChatMessage);
               } else {
@@ -1715,27 +1766,44 @@ module.exports = {
                 thread.title = event.chatThread.title;
               }
             }
+          } else if (event.toolCall) {
+            toolCalls.push({ toolName: event.toolCall.toolName, input: event.toolCall.input, status: 'running' });
+            if (!assistantChatMessage) {
+              assistantChatMessage = {
+                _id: Math.random().toString(36).substr(2, 9),
+                content: '',
+                role: 'assistant',
+                toolCalls: [...toolCalls]
+              };
+              this.chatMessages.push(assistantChatMessage);
+              assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
+            } else {
+              assistantChatMessage.toolCalls = [...toolCalls];
+            }
+            this.scrollToBottom();
+          } else if (event.toolResult) {
+            const tc = toolCalls.find(t => t.toolName === event.toolResult.toolName && t.status === 'running');
+            if (tc) {
+              tc.status = 'done';
+            }
+            if (assistantChatMessage) {
+              assistantChatMessage.toolCalls = [...toolCalls];
+            }
+            this.scrollToBottom();
           } else if (event.textPart) {
             if (!assistantChatMessage) {
               assistantChatMessage = {
                 _id: Math.random().toString(36).substr(2, 9),
                 content: event.textPart,
-                role: 'assistant'
+                role: 'assistant',
+                toolCalls: [...toolCalls]
               };
               this.chatMessages.push(assistantChatMessage);
               assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
-              this.$nextTick(() => {
-                if (this.$refs.messagesContainer) {
-                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-                }
-              });
+              this.scrollToBottom();
             } else {
               assistantChatMessage.content += event.textPart;
-              this.$nextTick(() => {
-                if (this.$refs.messagesContainer) {
-                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-                }
-              });
+              this.scrollToBottom();
             }
           } else if (event.message) {
             throw new Error(event.message);
@@ -1754,10 +1822,38 @@ module.exports = {
             this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
           }
         });
+      } catch (err) {
+        this.$toast.error(err?.message || 'Failed to send message.');
       } finally {
         this.sendingMessage = false;
       }
     },
+    async toggleAgentMode() {
+      const wasEnabled = this.isAgentModeEnabled;
+      const newValue = !this.isAgentModeEnabled;
+      this.draftAgentMode = newValue;
+      this.persistAgentModePreference(newValue);
+      if (!this.chatThreadId) {
+        this.maybeOpenAgentSidebar({ wasEnabled, isEnabled: newValue });
+        return;
+      }
+      const { chatThread } = await api.ChatThread.toggleAgentMode({
+        chatThreadId: this.chatThreadId,
+        agentMode: newValue
+      });
+      const idx = this.chatThreads.findIndex(t => t._id === chatThread._id);
+      if (idx !== -1) {
+        this.chatThreads.splice(idx, 1, chatThread);
+      }
+      this.maybeOpenAgentSidebar({ wasEnabled, isEnabled: newValue });
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        if (this.$refs.messagesContainer) {
+          this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+        }
+      });
+    },
     handleEnter(ev) {
       if (!ev.shiftKey) {
         this.sendMessage();
@@ -1777,7 +1873,9 @@ module.exports = {
       return message.role === 'user' ? 'bg-muted' : '';
     },
     async createNewThread() {
-      const { chatThread } = await api.ChatThread.createChatThread();
+      const { chatThread } = await api.ChatThread.createChatThread({
+        agentMode: this.draftAgentMode
+      });
       this.$toast.success('Chat thread created!');
       this.$router.push('/chat/' + chatThread._id);
     },
@@ -1819,12 +1917,57 @@ module.exports = {
       } finally {
         this.sharingThread = false;
       }
+    },
+    isDesktopViewport() {
+      return typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(min-width: 1024px)').matches;
+    },
+    getAgentModePreference() {
+      if (typeof window === 'undefined') {
+        return false;
+      }
+      return window.localStorage?.getItem(AGENT_MODE_STORAGE_KEY) === 'true';
+    },
+    persistAgentModePreference(agentMode) {
+      if (typeof window !== 'undefined') {
+        window.localStorage?.setItem(AGENT_MODE_STORAGE_KEY, String(agentMode));
+      }
+    },
+    async syncCurrentThreadAgentMode() {
+      if (!this.chatThreadId || !this.currentThread || !this.draftAgentMode || this.currentThread.agentMode) {
+        return;
+      }
+      const { chatThread } = await api.ChatThread.toggleAgentMode({
+        chatThreadId: this.chatThreadId,
+        agentMode: true
+      });
+      const idx = this.chatThreads.findIndex(t => t._id === chatThread._id);
+      if (idx !== -1) {
+        this.chatThreads.splice(idx, 1, chatThread);
+      }
+    },
+    maybeOpenAgentSidebar({ wasEnabled, isEnabled }) {
+      if (!isEnabled) {
+        this.showAgentSidebar = false;
+        return;
+      }
+      if (wasEnabled || !this.isDesktopViewport()) {
+        return;
+      }
+      this.showAgentSidebar = true;
+    },
+    closeAgentSidebar() {
+      this.showAgentSidebar = false;
     }
   },
   computed: {
     currentThread() {
       return this.chatThreads.find(t => t._id === this.chatThreadId);
     },
+    isAgentModeEnabled() {
+      return this.currentThread?.agentMode ?? this.draftAgentMode;
+    },
     hasWorkspace() {
       return !!window.MONGOOSE_STUDIO_CONFIG.workspace?._id;
     },
@@ -1842,10 +1985,12 @@ module.exports = {
   async mounted() {
     window.pageState = this;
 
+    this.draftAgentMode = this.getAgentModePreference();
     this.chatThreadId = this.threadId;
     const { chatThreads } = await api.ChatThread.listChatThreads();
     this.chatThreads = chatThreads;
     if (this.chatThreadId) {
+      await this.syncCurrentThreadAgentMode();
       const { chatMessages } = await api.ChatThread.getChatThread({ chatThreadId: this.chatThreadId });
       this.chatMessages = chatMessages;
     }
@@ -2055,6 +2200,9 @@ module.exports = app => app.component('create-document', {
           documentData: this.aiOriginalDocument,
           currentDateTime: getCurrentDateTimeContext()
         })) {
+          if (event?.message) {
+            throw new Error(event.message);
+          }
           if (event?.textPart) {
             this.aiSuggestion += event.textPart;
           }
@@ -4268,6 +4416,84 @@ module.exports = app => app.component('detail-default', {
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/detail-objectid/detail-objectid.js"
+/*!*********************************************************!*\
+  !*** ./frontend/src/detail-objectid/detail-objectid.js ***!
+  \*********************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./detail-objectid.html */ "./frontend/src/detail-objectid/detail-objectid.html");
+const ObjectId = __webpack_require__(/*! mongoose/lib/types/objectid */ "./node_modules/mongoose/lib/types/objectid.js");
+
+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;
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js"
@@ -4792,6 +5018,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
@@ -4812,6 +5039,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);
     },
@@ -4951,6 +5181,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) {
@@ -5078,6 +5311,36 @@ module.exports = app => app.component('document-property', {
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js"
+/*!**********************************************************************************************!*\
+  !*** ./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js ***!
+  \**********************************************************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./objectid-view-mode-picker.html */ "./frontend/src/document-details/objectid-view-mode-picker/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);
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/document/confirm-changes/confirm-changes.js"
@@ -7140,6 +7403,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);
@@ -7392,58 +7661,126 @@ const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
 const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
 const SHOW_ROW_NUMBERS_STORAGE_KEY = 'studio:model-show-row-numbers';
 const PROJECTION_MODE_QUERY_KEY = 'projectionMode';
+const PROJECTION_INPUT_QUERY_KEY = 'projectionInput';
 const RECENTLY_VIEWED_MODELS_KEY = 'studio:recently-viewed-models';
 const MAX_RECENT_MODELS = 4;
+const FOCUS_AFTER_MODELS_REMOUNT_KEY = '__studioModelsFocusAfterRemount';
 
-/** Parse `fields` from the route (JSON array or inclusion projection object only). */
-function parseFieldsQueryParam(fields) {
-  if (fields == null || fields === '') {
-    return [];
-  }
-  const s = typeof fields === 'string' ? fields : String(fields);
-  const trimmed = s.trim();
-  if (!trimmed) {
-    return [];
-  }
-  let parsed;
-  try {
-    parsed = JSON.parse(trimmed);
-  } catch (e) {
-    return [];
+function setModelsRemountFocusIntent(target) {
+  if (typeof window === 'undefined') {
+    return;
   }
-  if (Array.isArray(parsed)) {
-    return parsed.map(x => String(x).trim()).filter(Boolean);
+  window[FOCUS_AFTER_MODELS_REMOUNT_KEY] = target;
+}
+
+function takeModelsRemountFocusIntent() {
+  if (typeof window === 'undefined') {
+    return null;
   }
-  if (parsed != null && typeof parsed === 'object') {
-    return Object.keys(parsed).filter(k =>
-      Object.prototype.hasOwnProperty.call(parsed, k) && parsed[k]
-    );
+  const v = window[FOCUS_AFTER_MODELS_REMOUNT_KEY] || null;
+  delete window[FOCUS_AFTER_MODELS_REMOUNT_KEY];
+  return v;
+}
+
+/**
+ * Split projection list tokens on commas/whitespace, merging a lone `-` or `+` with the next
+ * chunk so `- password` and `-password` both exclude `password`.
+ * @returns {string[]|null} null when a dangling `+`/`-` has no following field name.
+ */
+function normalizeProjectionTokens(trimmed) {
+  const rawTokens = trimmed.split(/[,\s]+/).filter(Boolean);
+  const tokens = [];
+  for (let i = 0; i < rawTokens.length; i++) {
+    const t = rawTokens[i];
+    if (t === '-' || t === '+') {
+      if (i + 1 >= rawTokens.length) {
+        return null;
+      }
+      tokens.push(t + rawTokens[++i]);
+    } else {
+      tokens.push(t);
+    }
   }
-  return [];
+  return tokens;
 }
 
-/** Pass through a valid JSON `fields` string for Model.getDocuments / getDocumentsStream. */
-function normalizeFieldsParamForApi(fieldsStr) {
-  if (fieldsStr == null || fieldsStr === '') {
+/**
+ * Parse projection object syntax like:
+ *   { deletedAt: 1 }
+ *   { "deletedAt": true, email: 1 }
+ *   { password: 0 }
+ *
+ * Supported values are 1/0/true/false (quoted or unquoted).
+ * Returns include paths, exclude-derived include paths, or null when invalid.
+ */
+function parseProjectionObjectNotation(trimmed, schemaPaths) {
+  if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
     return null;
   }
-  const s = typeof fieldsStr === 'string' ? fieldsStr : String(fieldsStr);
-  const trimmed = s.trim();
-  if (!trimmed) {
-    return null;
+  const body = trimmed.slice(1, -1).trim();
+  if (!body) {
+    return [];
   }
-  try {
-    const parsed = JSON.parse(trimmed);
-    if (Array.isArray(parsed)) {
-      return trimmed;
+
+  const pairRe = /(?:^|,)\s*(?:"([^"]+)"|'([^']+)'|([a-zA-Z_$][\w.$]*))\s*:\s*("[^"]*"|'[^']*'|[^,]+?)\s*(?=,|$)/g;
+  const includeKeys = [];
+  const excludeKeys = [];
+  let matchedChars = '';
+  let match;
+
+  while ((match = pairRe.exec(body)) !== null) {
+    matchedChars += match[0];
+    const key = (match[1] || match[2] || match[3] || '').trim();
+    const rawValue = (match[4] || '').trim();
+    if (!key || !rawValue) {
+      return null;
     }
-    if (parsed != null && typeof parsed === 'object' && !Array.isArray(parsed)) {
-      return trimmed;
+
+    const valueLower = rawValue.replace(/^['"]|['"]$/g, '').trim().toLowerCase();
+    const isInclude = valueLower === '1' || valueLower === 'true';
+    const isExclude = valueLower === '0' || valueLower === 'false';
+    if (!isInclude && !isExclude) {
+      return null;
     }
-  } catch (e) {
+    if (isInclude) {
+      includeKeys.push(key);
+    } else {
+      excludeKeys.push(key);
+    }
+  }
+
+  // Reject malformed object strings where regex skipped segments.
+  const normalizedBody = body.replace(/\s+/g, '');
+  const normalizedMatched = matchedChars.replace(/\s+/g, '').replace(/^,/, '');
+  if (!normalizedMatched || normalizedMatched !== normalizedBody) {
     return null;
   }
-  return null;
+
+  const normalizeKey = (key) => String(key).trim();
+  if (includeKeys.length > 0 && excludeKeys.length > 0) {
+    const includeSet = new Set(includeKeys.map(normalizeKey));
+    for (const path of excludeKeys) {
+      const ex = normalizeKey(path);
+      for (const k of Array.from(includeSet)) {
+        if (k.toLowerCase() === ex.toLowerCase()) {
+          includeSet.delete(k);
+        }
+      }
+    }
+    if (includeSet.size === 0) {
+      return null;
+    }
+    return Array.from(includeSet);
+  }
+
+  if (excludeKeys.length > 0) {
+    const excludeNorm = excludeKeys.map(normalizeKey);
+    return schemaPaths
+      .map(p => p.path)
+      .filter(p => !excludeNorm.some(ex => ex === p || p.toLowerCase() === ex.toLowerCase()));
+  }
+
+  return includeKeys.map(normalizeKey);
 }
 
 module.exports = app => app.component('models', {
@@ -7588,10 +7925,19 @@ module.exports = app => app.component('models', {
       this.setOutputType('json');
     }
     this.$nextTick(() => {
-      if (!this.isProjectionMenuSelected) return;
-      const input = this.$refs.projectionInput;
-      if (input && typeof input.focus === 'function') {
-        input.focus();
+      const focusIntent = takeModelsRemountFocusIntent();
+      if (focusIntent === 'documentSearch') {
+        const ds = this.$refs.documentSearch;
+        if (ds && typeof ds.focusInput === 'function') {
+          ds.focusInput();
+        }
+        return;
+      }
+      if (focusIntent === 'projection' && this.isProjectionMenuSelected) {
+        const projectionSearch = this.$refs.projectionSearch;
+        if (projectionSearch && typeof projectionSearch.focusInput === 'function') {
+          projectionSearch.focusInput();
+        }
       }
     });
   },
@@ -7998,21 +8344,21 @@ module.exports = app => app.component('models', {
         params.searchText = this.searchText;
       }
 
-      // Prefer explicit URL projection (`query.fields`) so the first fetch after
-      // mount/remount respects deep-linked projections before `filteredPaths`
-      // is rehydrated from schema paths.
-      let fieldsParam = normalizeFieldsParamForApi(this.query?.fields);
-      if (!fieldsParam && this.isProjectionMenuSelected === true) {
+      const projectionInput = typeof this.query?.[PROJECTION_INPUT_QUERY_KEY] === 'string' ?
+        this.query[PROJECTION_INPUT_QUERY_KEY].trim() :
+        '';
+      if (projectionInput) {
+        params.projectionInput = projectionInput;
+      }
+
+      if (!projectionInput && this.isProjectionMenuSelected === true) {
         const fieldPaths = this.filteredPaths && this.filteredPaths.length > 0
           ? this.filteredPaths.map(p => p.path).filter(Boolean)
           : null;
         if (fieldPaths && fieldPaths.length > 0) {
-          fieldsParam = JSON.stringify(fieldPaths);
+          params.projectionInput = fieldPaths.join(' ');
         }
       }
-      if (fieldsParam) {
-        params.fields = fieldsParam;
-      }
 
       return params;
     },
@@ -8047,13 +8393,16 @@ module.exports = app => app.component('models', {
       if (this.currentModel != null) {
         await this.getDocuments();
       }
-      if (this.$route.query?.fields) {
-        const urlPaths = parseFieldsQueryParam(this.$route.query.fields);
-        if (urlPaths.length > 0) {
-          this.filteredPaths = urlPaths.map(path => this.schemaPaths.find(p => p.path === path)).filter(Boolean);
-          if (this.filteredPaths.length > 0) {
-            this.syncProjectionFromPaths();
-          }
+      const routeProjectionInput = this.$route.query?.[PROJECTION_INPUT_QUERY_KEY];
+      if (typeof routeProjectionInput === 'string' && routeProjectionInput.trim().length > 0) {
+        const urlPaths = this.normalizeProjectionPathsForDisplay(routeProjectionInput);
+        if (urlPaths !== null) {
+          const nextFiltered = urlPaths
+            .map(path => this.schemaPaths.find(p => p.path === path))
+            .filter(Boolean);
+          this.filteredPaths = nextFiltered;
+          this.selectedPaths = [...this.filteredPaths];
+          this.syncProjectionInputFromQueryOrPaths();
         }
       }
       this.status = 'loaded';
@@ -8162,6 +8511,7 @@ module.exports = app => app.component('models', {
       } else {
         delete this.query.search;
       }
+      setModelsRemountFocusIntent('documentSearch');
       const query = this.query;
       this.$router.push({ query });
       this.documents = [];
@@ -8196,11 +8546,13 @@ module.exports = app => app.component('models', {
       // Persist projection UI state in the URL so Reset/Suggest don't turn the mode off.
       if (next) {
         this.query[PROJECTION_MODE_QUERY_KEY] = '1';
+        setModelsRemountFocusIntent('projection');
         if (this.outputType === 'map') {
           this.setOutputType('json');
         }
       } else {
         delete this.query[PROJECTION_MODE_QUERY_KEY];
+        delete this.query[PROJECTION_INPUT_QUERY_KEY];
         delete this.query.fields;
         this.filteredPaths = [];
         this.selectedPaths = [];
@@ -8346,14 +8698,25 @@ module.exports = app => app.component('models', {
             }
             const isProjectionModeOn = this.isProjectionMenuSelected === true;
             if (isProjectionModeOn) {
-              this.applyDefaultProjection(event.suggestedFields);
+              const routeProjectionInput = this.$route.query?.[PROJECTION_INPUT_QUERY_KEY];
+              if (typeof routeProjectionInput === 'string' && routeProjectionInput.trim().length > 0) {
+                const projectionPaths = this.normalizeProjectionPathsForDisplay(routeProjectionInput);
+                const fromProjectionInput = Array.isArray(projectionPaths) ?
+                  projectionPaths
+                  .map(path => this.schemaPaths.find(p => p.path === path))
+                  .filter(Boolean) :
+                  [];
+                this.filteredPaths = fromProjectionInput;
+              } else {
+                this.filteredPaths = [];
+              }
             } else {
               this.filteredPaths = [];
               this.selectedPaths = [];
               this.projectionText = '';
             }
             this.selectedPaths = [...this.filteredPaths];
-            this.syncProjectionFromPaths();
+            this.syncProjectionInputFromQueryOrPaths();
             schemaPathsReceived = true;
           }
           if (event.numDocs !== undefined) {
@@ -8434,6 +8797,10 @@ module.exports = app => app.component('models', {
       // Keep current filter input in sync with the URL so projection reset
       // does not unintentionally wipe the filter on remount.
       this.syncFilterToQuery();
+      if (this.$route.query?.fields) {
+        delete this.query.fields;
+      }
+      delete this.query[PROJECTION_INPUT_QUERY_KEY];
       this.filteredPaths = [];
       this.selectedPaths = [];
       this.projectionText = '';
@@ -8456,18 +8823,9 @@ module.exports = app => app.component('models', {
       this.applyDefaultProjection(pathNames.slice(0, DEFAULT_FIRST_N_FIELDS));
       this.selectedPaths = [...this.filteredPaths];
       this.syncProjectionFromPaths();
+      setModelsRemountFocusIntent('projection');
       this.updateProjectionQuery();
     },
-    initProjection(ev) {
-      if (!this.projectionText || !this.projectionText.trim()) {
-        this.projectionText = '';
-        this.$nextTick(() => {
-          if (ev && ev.target) {
-            ev.target.setSelectionRange(0, 0);
-          }
-        });
-      }
-    },
     syncProjectionFromPaths() {
       if (this.filteredPaths.length === 0) {
         this.projectionText = '';
@@ -8477,6 +8835,29 @@ module.exports = app => app.component('models', {
       // Since `filteredPaths` represents the final include set, we serialize as space-separated fields.
       this.projectionText = this.filteredPaths.map(p => p.path).join(' ');
     },
+    syncProjectionInputFromQueryOrPaths() {
+      const fromQuery = this.$route.query?.[PROJECTION_INPUT_QUERY_KEY];
+      if (typeof fromQuery === 'string' && fromQuery.trim().length > 0) {
+        this.projectionText = fromQuery;
+        return;
+      }
+      this.syncProjectionFromPaths();
+    },
+    normalizeProjectionPathsForDisplay(text) {
+      const paths = this.parseProjectionInput(text);
+      if (paths == null) {
+        return null;
+      }
+      const excludesId = this.projectionExplicitlyExcludesId(text);
+      const hasIdSchemaPath = this.schemaPaths.some(p => p.path === '_id');
+      if (hasIdSchemaPath && !excludesId) {
+        const hasIdAlready = paths.some(p => String(p).toLowerCase() === '_id');
+        if (!hasIdAlready) {
+          paths.unshift('_id');
+        }
+      }
+      return paths;
+    },
     parseProjectionInput(text) {
       if (!text || typeof text !== 'string') {
         return [];
@@ -8487,17 +8868,21 @@ module.exports = app => app.component('models', {
       }
       const normalizeKey = (key) => String(key).trim();
 
-      // String-only projection syntax:
+      // String projection syntax:
       //   name email
       //   -password   (exclusion-only)
       //   +email      (inclusion-only)
+      //   { deletedAt: 1 } (object notation)
       //
-      // Brace/object syntax is intentionally NOT supported.
-      if (trimmed.startsWith('{') || trimmed.endsWith('}')) {
-        return null;
+      // For object notation, return include paths based on 1/0/true/false values.
+      if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+        return parseProjectionObjectNotation(trimmed, this.schemaPaths);
       }
 
-      const tokens = trimmed.split(/[,\s]+/).filter(Boolean);
+      const tokens = normalizeProjectionTokens(trimmed);
+      if (tokens === null) {
+        return null;
+      }
       if (tokens.length === 0) return [];
 
       const includeKeys = [];
@@ -8526,22 +8911,78 @@ module.exports = app => app.component('models', {
         // `name email createdAt -email` -> `name createdAt`.
         const includeSet = new Set(includeKeys.map(normalizeKey));
         for (const path of excludeKeys) {
-          includeSet.delete(normalizeKey(path));
+          const ex = normalizeKey(path);
+          for (const k of Array.from(includeSet)) {
+            if (k.toLowerCase() === ex.toLowerCase()) {
+              includeSet.delete(k);
+            }
+          }
+        }
+        if (includeSet.size === 0) {
+          return null;
         }
         return Array.from(includeSet);
       }
 
       if (excludeKeys.length > 0) {
-        const excludeSet = new Set(excludeKeys.map(normalizeKey));
-        return this.schemaPaths.map(p => p.path).filter(p => !excludeSet.has(p));
+        const excludeNorm = excludeKeys.map(normalizeKey);
+        return this.schemaPaths
+          .map(p => p.path)
+          .filter(p => !excludeNorm.some(ex => ex === p || p.toLowerCase() === ex.toLowerCase()));
       }
 
       return includeKeys.map(normalizeKey);
     },
+    projectionExplicitlyExcludesId(text) {
+      if (!text || typeof text !== 'string') {
+        return false;
+      }
+      const trimmed = text.trim();
+      if (!trimmed) {
+        return false;
+      }
+
+      if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+        const body = trimmed.slice(1, -1).trim();
+        if (!body) {
+          return false;
+        }
+        const pairRe = /(?:^|,)\s*(?:"([^"]+)"|'([^']+)'|([a-zA-Z_$][\w.$]*))\s*:\s*("[^"]*"|'[^']*'|[^,]+?)\s*(?=,|$)/g;
+        let match;
+        while ((match = pairRe.exec(body)) !== null) {
+          const key = (match[1] || match[2] || match[3] || '').trim();
+          if (!key || key.toLowerCase() !== '_id') {
+            continue;
+          }
+          const rawValue = (match[4] || '').trim();
+          const valueLower = rawValue.replace(/^['"]|['"]$/g, '').trim().toLowerCase();
+          if (valueLower === '0' || valueLower === 'false') {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      const tokens = normalizeProjectionTokens(trimmed);
+      if (!tokens) {
+        return false;
+      }
+      return tokens.some((rawToken) => {
+        const token = rawToken.trim();
+        return token.toLowerCase() === '-_id';
+      });
+    },
     applyProjectionFromInput() {
-      const paths = this.parseProjectionInput(this.projectionText);
-      if (paths === null) {
-        this.syncProjectionFromPaths();
+      if (typeof this.projectionText === 'string' && this.projectionText.trim().length === 0) {
+        this.filteredPaths = [];
+        this.selectedPaths = [];
+        setModelsRemountFocusIntent('projection');
+        this.updateProjectionQuery();
+        return;
+      }
+
+      const paths = this.normalizeProjectionPathsForDisplay(this.projectionText);
+      if (paths == null) {
         return;
       }
       if (paths.length === 0) {
@@ -8563,16 +9004,16 @@ module.exports = app => app.component('models', {
         }
       }
       this.selectedPaths = [...this.filteredPaths];
-      this.syncProjectionFromPaths();
+      setModelsRemountFocusIntent('projection');
       this.updateProjectionQuery();
     },
     updateProjectionQuery() {
-      const paths = this.filteredPaths.map(x => x.path).filter(Boolean);
-      if (paths.length > 0) {
-        this.query.fields = JSON.stringify(paths);
+      if (typeof this.projectionText === 'string' && this.projectionText.trim().length > 0) {
+        this.query[PROJECTION_INPUT_QUERY_KEY] = this.projectionText;
       } else {
-        delete this.query.fields;
+        delete this.query[PROJECTION_INPUT_QUERY_KEY];
       }
+      delete this.query.fields;
       this.$router.push({ query: this.query });
     },
     removeField(schemaPath) {
@@ -8801,6 +9242,243 @@ module.exports = app => app.component('models', {
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/models/projection-search/projection-search.js"
+/*!********************************************************************!*\
+  !*** ./frontend/src/models/projection-search/projection-search.js ***!
+  \********************************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./projection-search.html */ "./frontend/src/models/projection-search/projection-search.html");
+
+function getBraceDepth(text, pos) {
+  let depth = 0;
+  for (let i = 0; i < pos; i++) {
+    const ch = text[i];
+    if (ch === "{") {
+      depth++;
+    } else if (ch === "}") {
+      depth--;
+    }
+  }
+  return depth;
+}
+
+function collectObjectKeysBefore(text, endPos) {
+  const before = text.slice(0, endPos);
+  const keys = new Set();
+  const re = /([a-zA-Z_][\w.]*)\s*:/g;
+  let m;
+  while ((m = re.exec(before)) !== null) {
+    keys.add(m[1]);
+  }
+  return keys;
+}
+
+function getProjectionTokenContext(fullText, cursorPos) {
+  const before = fullText.slice(0, cursorPos);
+  const depth = getBraceDepth(before, before.length);
+
+  if (depth > 0) {
+    const m = before.match(/(?:\{|,)\s*([+-]?)([^\s:},]*)$/);
+    if (!m) {
+      return null;
+    }
+    const prefix = m[1] || '';
+    const raw = m[2] || '';
+    const term = raw.trim().toLowerCase();
+    if (!term) {
+      return null;
+    }
+    const token = `${prefix}${raw}`;
+    const start = cursorPos - token.length;
+    const selectedPaths = collectObjectKeysBefore(before, before.length);
+    if (raw) {
+      selectedPaths.delete(raw.trim());
+    }
+    return { mode: 'object', prefix, term, start, selectedPaths };
+  }
+
+  const tokenMatch = before.match(/(?:^|[,\s])([+-]?)([^\s,]*)$/);
+  if (!tokenMatch) {
+    return null;
+  }
+  const prefix = tokenMatch[1] || '';
+  const raw = tokenMatch[2] || '';
+  const term = raw.trim().toLowerCase();
+  if (!term) {
+    return null;
+  }
+
+  const token = `${prefix}${raw}`;
+  const after = fullText.slice(cursorPos);
+  const start = cursorPos - token.length;
+  const normalizedText = `${fullText.slice(0, start)}${token}${after}`;
+  const tokenCandidates = normalizedText.split(/[,\s]+/).map(s => s.trim()).filter(Boolean);
+  const selectedPaths = new Set(tokenCandidates.map(t => t.replace(/^[+-]/, '')).filter(Boolean));
+  if (raw) {
+    selectedPaths.delete(raw);
+  }
+
+  return { mode: 'list', prefix, term, start, selectedPaths };
+}
+
+module.exports = app => app.component('projection-search', {
+  template,
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    schemaPaths: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      projectionText: this.value || '',
+      autocompleteSuggestions: [],
+      autocompleteIndex: 0
+    };
+  },
+  watch: {
+    value(val) {
+      const nextValue = val || '';
+      if (nextValue === this.projectionText) {
+        return;
+      }
+      this.projectionText = nextValue;
+      this.clearAutocomplete();
+    }
+  },
+  methods: {
+    focusInput() {
+      const input = this.$refs.projectionInput;
+      if (input && typeof input.focus === 'function') {
+        input.focus();
+      }
+    },
+    emitInput() {
+      this.$emit('projection-input', this.projectionText);
+    },
+    initProjection(ev) {
+      if (!this.projectionText || !this.projectionText.trim()) {
+        this.projectionText = '';
+        this.emitInput();
+        this.$nextTick(() => {
+          if (ev && ev.target) {
+            ev.target.setSelectionRange(0, 0);
+          }
+        });
+      }
+    },
+    handleInput() {
+      this.emitInput();
+      this.updateAutocomplete();
+    },
+    updateAutocomplete() {
+      const input = this.$refs.projectionInput;
+      const cursorPos = input ? input.selectionStart : 0;
+      const ctx = getProjectionTokenContext(this.projectionText, cursorPos);
+      if (!ctx) {
+        this.clearAutocomplete();
+        return;
+      }
+
+      const { prefix, term, selectedPaths } = ctx;
+
+      this.autocompleteSuggestions = this.schemaPaths
+        .map(path => path.path)
+        .filter(path => typeof path === 'string' && path.toLowerCase().includes(term) && !selectedPaths.has(path))
+        .slice(0, 10)
+        .map(path => (ctx.mode === 'object' ? path : `${prefix}${path}`));
+      this.autocompleteIndex = 0;
+    },
+    handleKeyDown(ev) {
+      if (this.autocompleteSuggestions.length > 0) {
+        if (ev.key === 'Tab') {
+          ev.preventDefault();
+          this.applySuggestion(this.autocompleteIndex);
+          return;
+        }
+        if (ev.key === 'Enter') {
+          ev.preventDefault();
+          this.applySuggestion(this.autocompleteIndex);
+          // Enter should both accept autocomplete and apply projection.
+          this.$nextTick(() => this.$emit('apply'));
+          return;
+        }
+        if (ev.key === 'ArrowDown') {
+          ev.preventDefault();
+          this.autocompleteIndex = (this.autocompleteIndex + 1) % this.autocompleteSuggestions.length;
+          return;
+        }
+        if (ev.key === 'ArrowUp') {
+          ev.preventDefault();
+          this.autocompleteIndex = (this.autocompleteIndex + this.autocompleteSuggestions.length - 1) %
+            this.autocompleteSuggestions.length;
+          return;
+        }
+      }
+
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        this.$emit('apply');
+      } else if (ev.key === 'Escape') {
+        this.clearAutocomplete();
+      }
+    },
+    applySuggestion(index) {
+      const suggestion = this.autocompleteSuggestions[index];
+      if (!suggestion) {
+        return;
+      }
+      const input = this.$refs.projectionInput;
+      if (!input) {
+        return;
+      }
+
+      const cursorPos = input.selectionStart;
+      const after = this.projectionText.slice(cursorPos);
+      const ctx = getProjectionTokenContext(this.projectionText, cursorPos);
+      if (!ctx) {
+        return;
+      }
+
+      const { mode, start } = ctx;
+      let replacement;
+      if (mode === 'object') {
+        const colon = /^\s*:/.test(after) ? '' : ': ';
+        replacement = `${suggestion}${colon}`;
+      } else {
+        const needsSpace = after.length === 0 || !/^[,\s]/.test(after);
+        replacement = needsSpace ? `${suggestion} ` : suggestion;
+      }
+
+      this.projectionText = this.projectionText.slice(0, start) + replacement + after;
+      this.emitInput();
+      this.$nextTick(() => {
+        const newCursorPos = start + replacement.length;
+        input.setSelectionRange(newCursorPos, newCursorPos);
+      });
+      this.clearAutocomplete();
+    },
+    hideAutocomplete() {
+      window.setTimeout(() => this.clearAutocomplete(), 100);
+    },
+    clearAutocomplete() {
+      this.autocompleteSuggestions = [];
+      this.autocompleteIndex = 0;
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/models/trie.js"
@@ -10713,6 +11391,9 @@ var map = {
 	"./detail-default/detail-default": "./frontend/src/detail-default/detail-default.js",
 	"./detail-default/detail-default.html": "./frontend/src/detail-default/detail-default.html",
 	"./detail-default/detail-default.js": "./frontend/src/detail-default/detail-default.js",
+	"./detail-objectid/detail-objectid": "./frontend/src/detail-objectid/detail-objectid.js",
+	"./detail-objectid/detail-objectid.html": "./frontend/src/detail-objectid/detail-objectid.html",
+	"./detail-objectid/detail-objectid.js": "./frontend/src/detail-objectid/detail-objectid.js",
 	"./document-details/date-view-mode-picker/date-view-mode-picker": "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js",
 	"./document-details/date-view-mode-picker/date-view-mode-picker.html": "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html",
 	"./document-details/date-view-mode-picker/date-view-mode-picker.js": "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js",
@@ -10724,6 +11405,9 @@ var map = {
 	"./document-details/document-property/document-property.css": "./frontend/src/document-details/document-property/document-property.css",
 	"./document-details/document-property/document-property.html": "./frontend/src/document-details/document-property/document-property.html",
 	"./document-details/document-property/document-property.js": "./frontend/src/document-details/document-property/document-property.js",
+	"./document-details/objectid-view-mode-picker/objectid-view-mode-picker": "./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js",
+	"./document-details/objectid-view-mode-picker/objectid-view-mode-picker.html": "./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.html",
+	"./document-details/objectid-view-mode-picker/objectid-view-mode-picker.js": "./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js",
 	"./document/confirm-changes/confirm-changes": "./frontend/src/document/confirm-changes/confirm-changes.js",
 	"./document/confirm-changes/confirm-changes.html": "./frontend/src/document/confirm-changes/confirm-changes.html",
 	"./document/confirm-changes/confirm-changes.js": "./frontend/src/document/confirm-changes/confirm-changes.js",
@@ -10809,6 +11493,9 @@ var map = {
 	"./models/models.css": "./frontend/src/models/models.css",
 	"./models/models.html": "./frontend/src/models/models.html",
 	"./models/models.js": "./frontend/src/models/models.js",
+	"./models/projection-search/projection-search": "./frontend/src/models/projection-search/projection-search.js",
+	"./models/projection-search/projection-search.html": "./frontend/src/models/projection-search/projection-search.html",
+	"./models/projection-search/projection-search.js": "./frontend/src/models/projection-search/projection-search.js",
 	"./models/trie": "./frontend/src/models/trie.js",
 	"./models/trie.js": "./frontend/src/models/trie.js",
 	"./mothership": "./frontend/src/mothership.js",
@@ -50814,7 +51501,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 (module) {
 
 "use strict";
-module.exports = "<div class=\"chat-message-script relative border rounded bg-surface my-1 text-content text-sm overflow-hidden\">\n  <div class=\"flex border-b py-1 pl-1 text-xs font-medium bg-surface\">\n    <button\n      class=\"px-4 py-1 border-r border-edge-strong text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-l-md',\n        activeTab === 'code'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-4 py-1 text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-r-md',\n        activeTab === 'output'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex items-center\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        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\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <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\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        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\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <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\" />\n        </svg>\n      </button>\n      <async-button\n        v-if=\"!isEditing\"\n        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\"\n        @click=\"executeScript\">\n        Run\n      </async-button>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"copyOutput(); showDropdown = false\">\n            Copy Output As Text\n          </button>\n          <button\n            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2 chat-script-editor-wrap\">\n      <div class=\"border border-edge\">\n        <ace-editor\n          v-model=\"editedScript\"\n          mode=\"javascript\"\n          :line-numbers=\"true\"\n          class=\"w-full h-[45vh] min-h-[200px]\"\n        />\n      </div>\n      <div class=\"flex justify-end gap-2 pb-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          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\"\n          @click=\"executeScript\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap !my-0 bg-muted\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-result\n      v-if=\"message.executionResult?.output != null\"\n      :result=\"message.executionResult.output\">\n    </dashboard-result>\n    <pre v-else>No output</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-edge\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-result\n          v-if=\"message.executionResult?.output != null\"\n          :result=\"message.executionResult.output\"\n          :fullscreen=\"true\">\n        </dashboard-result>\n        <pre v-else class=\"whitespace-pre-wrap\">No output</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Code</label>\n          <div class=\"border border-edge\">\n            <ace-editor\n              v-model=\"dashboardCode\"\n              mode=\"javascript\"\n              :line-numbers=\"true\"\n              class=\"h-[300px] w-full\"\n            />\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createError\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-edge bg-page rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\n            class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-content-secondary bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"chat-message-script relative border rounded bg-surface my-1 text-content text-sm overflow-hidden\">\n  <div class=\"flex border-b py-1 pl-1 text-xs font-medium bg-surface\">\n    <button\n      class=\"px-4 py-1 border-r border-edge-strong text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-l-md',\n        activeTab === 'code'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-4 py-1 text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-r-md',\n        activeTab === 'output'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex items-center\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        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\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <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\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        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\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <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\" />\n        </svg>\n      </button>\n      <async-button\n        v-if=\"!isEditing\"\n        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\"\n        @click=\"executeScript\">\n        Run\n      </async-button>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"copyOutput(); showDropdown = false\">\n            Copy Output As Text\n          </button>\n          <button\n            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2 chat-script-editor-wrap\">\n      <div class=\"border border-edge\">\n        <ace-editor\n          v-model=\"editedScript\"\n          mode=\"javascript\"\n          :line-numbers=\"true\"\n          class=\"w-full h-[45vh] min-h-[200px]\"\n        />\n      </div>\n      <div class=\"flex justify-end gap-2 pb-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          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\"\n          @click=\"executeScript\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap !my-0 bg-muted\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-result\n      v-if=\"message.executionResult?.output != null\"\n      :result=\"message.executionResult.output\">\n    </dashboard-result>\n    <pre v-else>No output</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-edge\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-result\n          v-if=\"message.executionResult?.output != null\"\n          :result=\"message.executionResult.output\"\n          :fullscreen=\"true\">\n        </dashboard-result>\n        <pre v-else class=\"whitespace-pre-wrap\">No output</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Code</label>\n          <div class=\"border border-edge\">\n            <ace-editor\n              v-model=\"dashboardCode\"\n              mode=\"javascript\"\n              :line-numbers=\"true\"\n              class=\"h-[300px] w-full\"\n            />\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createError\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-edge bg-page rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\n            class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-content-secondary bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -50825,7 +51512,7 @@ module.exports = "<div class=\"chat-message-script relative border rounded bg-su
 (module) {
 
 "use strict";
-module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-3rem)] lg:max-w-[calc(100vw-15rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-content rounded-md inline-block relative\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script\n            :message=\"message\"\n            :script=\"part.content\"\n            :language=\"part.language\"\n            :target-dashboard-id=\"targetDashboardId\"\n            @copyMessage=\"copyMessage\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-full\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div v-if=\"message.toolCalls && message.toolCalls.length\" class=\"mb-2 text-xs text-gray-500 dark:text-gray-400\">\n      <div\n        v-for=\"(tc, i) in message.toolCalls\"\n        :key=\"i\"\n        class=\"flex items-center gap-1.5 py-0.5 font-mono\">\n        <svg :class=\"['w-3.5 h-3.5 shrink-0', tc.status === 'running' ? 'animate-spin text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.867 19.125h.008v.008h-.008v-.008Z\" /></svg>\n        <span>{{ tc.toolName }}</span>\n        <span v-if=\"tc.toolName !== 'typeCheck'\" class=\"text-gray-400 dark:text-gray-500\">{{ formatToolInput(tc.input) }}</span>\n      </div>\n    </div>\n\n    <div class=\"text-sm text-content rounded-md inline-block relative\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script\n            :message=\"message\"\n            :script=\"part.content\"\n            :language=\"part.language\"\n            :target-dashboard-id=\"targetDashboardId\"\n            @copyMessage=\"copyMessage\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -50836,7 +51523,7 @@ module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-en
 (module) {
 
 "use strict";
-module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <button\n    type=\"button\"\n    class=\"fixed top-[65px] left-0 cursor-pointer bg-muted rounded-r-md p-1\"\n    :class=\"hideSidebar === true ? 'z-[10001]' : hideSidebar === false ? 'z-10' : 'z-30 lg:hidden'\"\n    @click=\"hideSidebar = hideSidebar === false ? true : false\"\n    aria-label=\"Toggle chat history\"\n    title=\"Toggle chat history\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-content-tertiary\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5\" />\n    </svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside\n    class=\"bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col\"\n    :class=\"hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:translate-x-0 lg:!w-0 lg:!border-r-0' : '-translate-x-full lg:translate-x-0'\"\n    style=\"z-index: 1000\">\n    <!-- Search + New Thread -->\n    <div class=\"p-3 shrink-0\">\n      <div class=\"relative flex items-center gap-2\">\n        <div class=\"relative flex-1\">\n          <svg class=\"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n          </svg>\n          <input\n            v-model=\"threadSearch\"\n            type=\"text\"\n            placeholder=\"Search threads...\"\n            @keydown.esc=\"threadSearch = ''\"\n            class=\"w-full rounded-md border border-edge bg-surface py-1.5 pl-8 pr-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300\"\n          />\n        </div>\n        <async-button\n          @click=\"createNewThread\"\n          class=\"shrink-0 rounded-md border border-edge bg-surface p-1.5 text-content-tertiary hover:bg-muted hover:text-content-secondary\"\n          title=\"New thread\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" class=\"w-4 h-4\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <!-- Thread list (scrollable) -->\n    <nav class=\"flex-1 overflow-y-auto px-2 pb-2\">\n      <div class=\"px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider\">Threads</div>\n      <div v-if=\"status === 'loaded' && filteredThreads.length === 0\" class=\"px-2 py-2 text-sm text-content-tertiary\">\n        <template v-if=\"threadSearch.trim()\">No threads match \"{{threadSearch}}\"</template>\n        <template v-else>No threads yet</template>\n      </div>\n      <ul role=\"list\">\n        <li\n          v-for=\"thread in filteredThreads\"\n          :key=\"thread._id\"\n          @click=\"selectThread(thread._id)\"\n          class=\"rounded-md py-2 px-2 cursor-pointer mb-0.5\"\n          :class=\"thread._id === chatThreadId ? 'bg-gray-200 text-content' : 'hover:bg-muted text-content-secondary'\"\n        >\n          <div class=\"text-sm font-medium truncate\">{{ thread.title || 'Untitled Thread' }}</div>\n          <div class=\"text-xs text-gray-400 mt-0.5\">{{ formatThreadDate(thread.updatedAt || thread.createdAt) }}</div>\n        </li>\n      </ul>\n    </nav>\n    <!-- Bottom toolbar -->\n    <div class=\"shrink-0 border-t border-edge bg-page px-2 py-1.5 flex items-center gap-1\">\n      <button\n        type=\"button\"\n        @click=\"hideSidebar = true\"\n        class=\"rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n        title=\"Hide sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        @click=\"hasWorkspace ? toggleShareThread() : (showProUpgradeModal = true)\"\n        class=\"rounded p-1.5\"\n        :class=\"hasWorkspace && chatThreadId ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : !hasWorkspace ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : 'text-gray-300 cursor-not-allowed'\"\n        :disabled=\"hasWorkspace && !chatThreadId\"\n        aria-label=\"Share thread with workspace\"\n        :title=\"'Share thread with workspace' + (!hasWorkspace ? ' (requires a pro workspace)' : !chatThreadId ? ': Open a thread first!' : '')\"\n      >\n        <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n        <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n      </button>\n    </div>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col bg-slate-50\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <div v-if=\"chatMessages?.length === 0\">\n        <div class=\"flex items-center w-full h-full justify-center py-3 mb-4\">\n          <p class=\"mx-4 font-bold text-content\">\n            Ask Mongoose Studio to analyze your data or generate a script\n          </p>\n        </div>\n      </div>\n      <ul role=\"list\" class=\"space-y-4\" v-else>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\" :target-dashboard-id=\"currentThread?.dashboardId\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          :placeholder=\"sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm\"\n          :disabled=\"sendingMessage\"\n          rows=\"2\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-primary hover:bg-primary-hover text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n\n  <pro-upgrade-modal\n    :show=\"showProUpgradeModal\"\n    feature-description=\"Sharing threads lets you collaborate with your team by sharing chat threads within your workspace.\"\n    @close=\"showProUpgradeModal = false\"\n  ></pro-upgrade-modal>\n</div>\n";
+module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <button\n    type=\"button\"\n    class=\"fixed top-[65px] left-0 cursor-pointer bg-muted rounded-r-md p-1\"\n    :class=\"hideSidebar === true ? 'z-[10001]' : hideSidebar === false ? 'z-10' : 'z-30 lg:hidden'\"\n    @click=\"hideSidebar = hideSidebar === false ? true : false\"\n    aria-label=\"Toggle chat history\"\n    title=\"Toggle chat history\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-content-tertiary\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5\" />\n    </svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside\n    class=\"bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col\"\n    :class=\"hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:translate-x-0 lg:!w-0 lg:!border-r-0' : '-translate-x-full lg:translate-x-0'\"\n    style=\"z-index: 1000\">\n    <!-- Search + New Thread -->\n    <div class=\"p-3 shrink-0\">\n      <div class=\"relative flex items-center gap-2\">\n        <div class=\"relative flex-1\">\n          <svg class=\"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n          </svg>\n          <input\n            v-model=\"threadSearch\"\n            type=\"text\"\n            placeholder=\"Search threads...\"\n            @keydown.esc=\"threadSearch = ''\"\n            class=\"w-full rounded-md border border-edge bg-surface py-1.5 pl-8 pr-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300\"\n          />\n        </div>\n        <async-button\n          @click=\"createNewThread\"\n          class=\"shrink-0 rounded-md border border-edge bg-surface p-1.5 text-content-tertiary hover:bg-muted hover:text-content-secondary\"\n          title=\"New thread\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" class=\"w-4 h-4\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <!-- Thread list (scrollable) -->\n    <nav class=\"flex-1 overflow-y-auto px-2 pb-2\">\n      <div class=\"px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider\">Threads</div>\n      <div v-if=\"status === 'loaded' && filteredThreads.length === 0\" class=\"px-2 py-2 text-sm text-content-tertiary\">\n        <template v-if=\"threadSearch.trim()\">No threads match \"{{threadSearch}}\"</template>\n        <template v-else>No threads yet</template>\n      </div>\n      <ul role=\"list\">\n        <li\n          v-for=\"thread in filteredThreads\"\n          :key=\"thread._id\"\n          @click=\"selectThread(thread._id)\"\n          class=\"rounded-md py-2 px-2 cursor-pointer mb-0.5\"\n          :class=\"thread._id === chatThreadId ? 'bg-gray-200 text-content' : 'hover:bg-muted text-content-secondary'\"\n        >\n          <div class=\"text-sm font-medium truncate\">{{ thread.title || 'Untitled Thread' }}</div>\n          <div class=\"text-xs text-gray-400 mt-0.5\">{{ formatThreadDate(thread.updatedAt || thread.createdAt) }}</div>\n        </li>\n      </ul>\n    </nav>\n    <!-- Bottom toolbar -->\n    <div class=\"shrink-0 border-t border-edge bg-page px-2 py-1.5 flex items-center gap-1\">\n      <button\n        type=\"button\"\n        @click=\"hideSidebar = true\"\n        class=\"rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n        title=\"Hide sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        @click=\"hasWorkspace ? toggleShareThread() : (showProUpgradeModal = true)\"\n        class=\"rounded p-1.5\"\n        :class=\"hasWorkspace && chatThreadId ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : !hasWorkspace ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : 'text-gray-300 cursor-not-allowed'\"\n        :disabled=\"hasWorkspace && !chatThreadId\"\n        aria-label=\"Share thread with workspace\"\n        :title=\"'Share thread with workspace' + (!hasWorkspace ? ' (requires a pro workspace)' : !chatThreadId ? ': Open a thread first!' : '')\"\n      >\n        <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n        <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n      </button>\n      <button\n        type=\"button\"\n        @click=\"toggleAgentMode\"\n        class=\"rounded p-1.5 transition-colors\"\n        :class=\"isAgentModeEnabled ? 'text-primary bg-primary/10' : 'text-gray-400 hover:text-gray-600 hover:bg-muted'\"\n        :aria-label=\"isAgentModeEnabled ? 'Turn agent mode off' : 'Turn agent mode on'\"\n        :aria-pressed=\"isAgentModeEnabled\"\n        :title=\"isAgentModeEnabled ? 'Agent mode on' : 'Agent mode off'\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 200 200\"><path d=\"m187 170.9-38.72-13.73-0.55-0.25-11.24-12.18v-9.98c6.3-6.82 6.43-11.03 8.3-23.22 7.34-1.41 10.2-7.7 12.28-18.9 0.97-5.02 2.72-9.88 0.14-13.92-1.38-2.35-3.49-3.08-5.62-3.38 1.65-11.57 5.47-27.07-2.68-42.38-5.47-9.94-14-14.18-21.8-14.92-3.5-9.15-12.32-13.06-27.11-13.06h-1.06c-27.2 0-48.53 17.96-52.18 39.74-2.05 11.38-0.41 20.41 0.74 30.03-2.23 0.19-4.38 1.02-5.84 3.42-2.21 3.83-1.27 8.84 0.06 14.19 2 8.28 2.26 16.18 12.9 18.96 1.47 6.52 0.58 14.07 8.3 22.84v10.77l-12.54 12.83-38.38 12.85v24.18h57.31c-3.11-14.37-6.53-23.75-5.45-42.72l0.44-0.34c5.71 9.04 16.02 15.97 29.22 25.91l-12.68 17.15h38.07l-13.16-17.2c11.44-9.29 22.31-16.55 29.2-25.38 4.68 9.53-1.48 26.7-4.72 42.58h56.77v-23.89zm-49.56-49.09c-1.43 5.43-2.53 6.16-9.69 14.68l-11.68 13.11c-3.48 3.27-4.8 3.27-11.11 3.27h-10.39c-6.25 0-7.45-0.78-11.01-4.46-6.78-7.7-11.76-13.37-15.09-17.32-5.39-6.33-5.85-7.2-7.16-18.89-0.73-4.86-3.02-14.25-2.94-14.91 3.94 3.43 13.59 3.35 16.89 3.35 12.76 0 15.79-2.74 19.92-17.12 0.68-2.98 1.71-3.53 4-3.53 2.04 0 3.04 0.98 3.86 3.71 3.9 13.69 5.2 16.52 16.15 16.76h2.99c8.1 0 15.01-1.52 18.58-2.93-0.5 5.06-2.28 16.7-3.32 24.28zm4.72-39.02c-1.97 10.98-2.94 12.3-17.69 12.91-9.05 0.38-11.35-0.71-14.17-8.69-3.69-11.25-2.17-13 5.55-13.83 6.36-0.83 11.74-0.79 15.92-0.79 10.01 0 12.11 0.27 10.39 10.4zm-84.38-32c0-11.99 9.26-21.63 15.54-23.52 4.46-1.14 7.99 3.61 15.25 5.74 5.06 1.54 10.71 1.32 11.84 1.32 11.49 0 16.71-2.62 21.55-6.91 1.66-1.28 3.22-1.57 4.86-0.67 10.89 6.36 15.34 16.28 14.74 26.07-0.36 5.5-2.18 9.03-1.38 12.23l1.14 3.62c-3.83-0.82-6.2-0.92-10.69-0.92-9.44 0-17.61 1.24-22.14 2.5-3.66 1.24-5.2 1.44-8.35 1.44-2.98 0-4.92-0.2-7.56-1.44-4.97-1.54-14.49-2.5-21.47-2.5-3.69 0-7 0.01-10.9 0.62l-1.84 0.3 0.42-3.07c0.82-3.01-1.01-7.56-1.01-14.81z\"/><path d=\"m116.6 125.4-12.18-2.58c-2.29-0.68-3.7 0.76-5.4 0.76-1.66 0-2.79-1.35-5.4-0.66l-10.88 2.36c-1.35 0.12-1.55 1.44-0.79 3.32 0.38 1.02 1.26 0.7 3.07 0.36 3.25-0.46 4.65-0.84 8.11-1.04 1.85-0.17 2.59 0.41 5.06 0.41h1.14c1.72 0 2.62-0.55 4.15-0.31 3.81 0.31 5.64 0.72 11.64 1.22 2.08 0.38 2.4-1.15 2.21-2.52-0.07-0.65-0.24-1.1-0.73-1.32z\"/><path d=\"m94.08 133.5c-1.96 0-2.49 1.23-2.4 2.39 0.06 1.38 0.93 2.27 2.57 2.27h10.06c2.13 0 2.7-1.25 2.7-2.56 0-1.13-0.65-2.1-2.53-2.1h-10.4z\"/><path d=\"m91.31 106.6c-2.13 0-2.51 3.32-1.24 4.55 1.11 1.08 7.39 3.76 9.34 3.76s8.38-3.24 9.4-3.87c1.9-1.2 0.85-4.82-1.7-4.44-1.84 0.3-6.01 3.39-7.96 3.01-1.53-0.32-6.08-3.01-7.84-3.01z\"/><path d=\"m85.62 73.71c-5.3-1.1-10.53-1.15-14.51-1.15-10.96 0-14.08-0.44-14.33 5.26-0.47 11.15 1.82 15.96 6.69 17.19 4.7 1.26 6.84 1.08 11.71 1.08 8.88 0 10.9-1.18 14.23-10.67 2.38-6.81 1.87-10.59-3.79-11.71z\"/><path d=\"m114.5 73.51c-7.72 0.83-7.35 2.71-6.39 9.73 1.78 7.47 3.64 11.94 10.97 12.49 3.07 0.14 4.97-0.05 8-0.32 10.72-0.96 12.6-2.48 14.45-12.22 1.88-10.29-0.54-10.77-9.79-10.77-4.18 0-10.45 0.26-17.24 1.09z\"/></svg>\n      </button>\n    </div>\n  </aside>\n\n  <div class=\"flex-1 min-w-0 flex\">\n    <!-- Main Chat Area -->\n    <main class=\"flex-1 min-w-0 flex flex-col bg-slate-50\">\n      <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n        <div v-if=\"chatMessages?.length === 0\">\n          <div class=\"flex items-center w-full h-full justify-center py-3 mb-4\">\n            <p class=\"mx-4 font-bold text-content\">\n              Ask Mongoose Studio to analyze your data or generate a script\n            </p>\n          </div>\n        </div>\n        <ul role=\"list\" class=\"space-y-4\" v-else>\n          <li v-for=\"message in chatMessages\" :key=\"message._id\">\n            <chat-message :message=\"message\" :target-dashboard-id=\"currentThread?.dashboardId\"></chat-message>\n          </li>\n        </ul>\n      </div>\n\n\n      <!-- Input Area -->\n      <div class=\"border-t p-4\">\n        <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n          <textarea\n            v-model=\"newMessage\"\n            :placeholder=\"sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'\"\n            class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm\"\n            :disabled=\"sendingMessage\"\n            rows=\"2\"\n            ref=\"messageInput\"\n            @input=\"adjustTextareaHeight\"\n            @keydown.enter.exact.prevent=\"handleEnter\"\n          ></textarea>\n          <button class=\"bg-primary hover:bg-primary-hover text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n            <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g>\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n                <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                  <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n                </path>\n              </g>\n            </svg>\n            <span v-else>Send</span>\n          </button>\n        </form>\n      </div>\n    </main>\n\n    <aside\n      v-if=\"isAgentModeEnabled\"\n      class=\"hidden lg:flex shrink-0 border-l border-edge bg-page transition-all duration-300 ease-in-out overflow-hidden\"\n      :class=\"showAgentSidebar ? 'w-80' : 'w-0 border-l-0'\"\n    >\n      <div v-if=\"showAgentSidebar\" class=\"flex h-full w-80 flex-col\">\n        <div class=\"flex items-center justify-between border-b border-edge px-4 py-3\">\n          <div>\n            <h2 class=\"text-sm font-semibold text-content\">Agent Mode</h2>\n            <p class=\"mt-1 text-xs text-content-tertiary\">Agent mode lets Mongoose Studio inspect your data and validate scripts before it responds.</p>\n          </div>\n          <button\n            type=\"button\"\n            @click=\"closeAgentSidebar\"\n            class=\"rounded p-1.5 text-gray-400 hover:bg-muted hover:text-gray-600\"\n            title=\"Hide agent sidebar\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"flex-1 overflow-y-auto px-4 py-4\">\n          <div class=\"mb-3 text-xs font-semibold uppercase tracking-wider text-gray-400\">Available Tools</div>\n          <ul role=\"list\" class=\"space-y-3\">\n            <li v-for=\"tool in agentTools\" :key=\"tool.name\" class=\"rounded-md border border-edge bg-surface px-3 py-3\">\n              <div class=\"text-sm font-medium text-content\">{{ tool.name }}</div>\n              <div class=\"mt-1 text-sm text-content-secondary\">{{ tool.description }}</div>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </aside>\n  </div>\n\n  <pro-upgrade-modal\n    :show=\"showProUpgradeModal\"\n    feature-description=\"Sharing threads lets you collaborate with your team by sharing chat threads within your workspace.\"\n    @close=\"showProUpgradeModal = false\"\n  ></pro-upgrade-modal>\n</div>\n";
 
 /***/ },
 
@@ -51060,6 +51747,17 @@ module.exports = "<div class=\"w-full\">\n  <pre v-if=\"!isGeoJsonGeometry || !m
 
 /***/ },
 
+/***/ "./frontend/src/detail-objectid/detail-objectid.html"
+/*!***********************************************************!*\
+  !*** ./frontend/src/detail-objectid/detail-objectid.html ***!
+  \***********************************************************/
+(module) {
+
+"use strict";
+module.exports = "<pre class=\"w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0\">{{displayValue}}</pre>\n";
+
+/***/ },
+
 /***/ "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html"
 /*!****************************************************************************************!*\
   !*** ./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html ***!
@@ -51111,7 +51809,18 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 (module) {
 
 "use strict";
-module.exports = "<div class=\"border border-edge bg-surface rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-content-tertiary mr-2 transition-transform duration-200\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-content\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-content-tertiary\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <date-view-mode-picker\n        v-if=\"isDatePath\"\n        :viewMode=\"dateViewMode\"\n        :path=\"path\"\n        @update:viewMode=\"dateViewMode = $event\"\n      ></date-view-mode-picker>\n      <button\n        type=\"button\"\n        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\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\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=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :viewMode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <!-- Special handling for truncated arrays -->\n      <div v-if=\"isArray && shouldShowTruncated\" class=\"w-full\">\n        <div class=\"mt-2\">\n          <div\n            v-for=\"(item, index) in truncatedArrayItems\"\n            :key=\"index\"\n            class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600\">\n            <div class=\"absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600\">{{ index }}</div>\n            <div v-if=\"arrayUtils.isObjectItem(item)\" class=\"flex flex-col gap-1 mt-1 px-2\">\n              <div\n                v-for=\"key in arrayUtils.getItemKeys(item)\"\n                :key=\"key\"\n                class=\"flex items-start gap-2 text-xs font-mono\">\n                <span class=\"font-semibold text-gray-600 flex-shrink-0 min-w-[80px]\">{{ key }}:</span>\n                <span class=\"text-gray-800 break-words whitespace-pre-wrap flex-1\">{{ arrayUtils.formatItemValue(item, key) }}</span>\n              </div>\n            </div>\n            <div v-else class=\"text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1\">{{ arrayUtils.formatValue(item) }}</div>\n          </div>\n          <div class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100\">\n            <div class=\"text-xs py-1.5 px-2 font-mono text-content-tertiary italic break-words whitespace-pre-wrap mt-1\">\n              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}\n            </div>\n          </div>\n        </div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show all {{ arrayValue.length }} items\n        </button>\n      </div>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-content-secondary whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"isDatePath ? dateViewMode : detailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"isDatePath ? dateViewMode : detailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"border border-edge bg-surface rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-content-tertiary mr-2 transition-transform duration-200\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-content\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-content-tertiary\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n      <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <date-view-mode-picker\n        v-if=\"isDatePath\"\n        :viewMode=\"dateViewMode\"\n        :path=\"path\"\n        @update:viewMode=\"dateViewMode = $event\"\n      ></date-view-mode-picker>\n      <objectid-view-mode-picker\n        v-if=\"isObjectIdPath\"\n        :viewMode=\"objectIdViewMode\"\n        @update:viewMode=\"objectIdViewMode = $event\"\n      ></objectid-view-mode-picker>\n      <button\n        type=\"button\"\n        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\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\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=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :viewMode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <!-- Special handling for truncated arrays -->\n      <div v-if=\"isArray && shouldShowTruncated\" class=\"w-full\">\n        <div class=\"mt-2\">\n          <div\n            v-for=\"(item, index) in truncatedArrayItems\"\n            :key=\"index\"\n            class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600\">\n            <div class=\"absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600\">{{ index }}</div>\n            <div v-if=\"arrayUtils.isObjectItem(item)\" class=\"flex flex-col gap-1 mt-1 px-2\">\n              <div\n                v-for=\"key in arrayUtils.getItemKeys(item)\"\n                :key=\"key\"\n                class=\"flex items-start gap-2 text-xs font-mono\">\n                <span class=\"font-semibold text-gray-600 flex-shrink-0 min-w-[80px]\">{{ key }}:</span>\n                <span class=\"text-gray-800 break-words whitespace-pre-wrap flex-1\">{{ arrayUtils.formatItemValue(item, key) }}</span>\n              </div>\n            </div>\n            <div v-else class=\"text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1\">{{ arrayUtils.formatValue(item) }}</div>\n          </div>\n          <div class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100\">\n            <div class=\"text-xs py-1.5 px-2 font-mono text-content-tertiary italic break-words whitespace-pre-wrap mt-1\">\n              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}\n            </div>\n          </div>\n        </div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show all {{ arrayValue.length }} items\n        </button>\n      </div>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-content-secondary whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)\"\n          @updated=\"renderedValue = $event\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)\"\n          @updated=\"renderedValue = $event\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
+
+/***/ },
+
+/***/ "./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.html"
+/*!************************************************************************************************!*\
+  !*** ./frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.html ***!
+  \************************************************************************************************/
+(module) {
+
+"use strict";
+module.exports = "<div class=\"flex items-center gap-2\" @click.stop>\n  <select\n    :value=\"format\"\n    @input=\"onFormatChange($event.target.value)\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1\"\n  >\n    <option value=\"hex\">Hex string</option>\n    <option value=\"object_call\">ObjectId('...')</option>\n    <option value=\"unix_seconds\">Unix timestamp</option>\n    <option value=\"date\">Date</option>\n  </select>\n</div>\n";
 
 /***/ },
 
@@ -51474,7 +52183,18 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 (module) {
 
 "use strict";
-module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <aside class=\"bg-page border-r overflow-hidden transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative shrink-0 flex flex-col top-[55px] bottom-0 lg:top-auto lg:bottom-auto lg:h-full\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <!-- Search -->\n    <div class=\"p-3 shrink-0\">\n      <div class=\"relative\">\n        <svg class=\"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n        </svg>\n        <input\n          v-model=\"modelSearch\"\n          type=\"text\"\n          placeholder=\"Find model...\"\n          @keydown.esc=\"modelSearch = ''\"\n          class=\"w-full rounded-md border border-edge bg-surface py-1.5 pl-8 pr-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300\"\n        />\n      </div>\n    </div>\n    <!-- Model list (scrollable) -->\n    <nav class=\"flex-1 overflow-y-auto px-2 pb-2\">\n      <!-- Recently Viewed -->\n      <div v-if=\"filteredRecentModels.length > 0 && !modelSearch.trim()\">\n        <div class=\"px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider\">Recently Viewed</div>\n        <ul role=\"list\">\n          <li v-for=\"model in filteredRecentModels\" :key=\"'recent-' + model\">\n            <router-link\n              :to=\"'/model/' + model\"\n              class=\"flex items-center rounded-md py-1.5 px-2 text-sm text-content-secondary\"\n              :class=\"model === currentModel ? 'bg-gray-200 font-semibold text-content' : 'hover:bg-muted'\">\n              <span class=\"truncate\" v-html=\"highlightMatch(model)\"></span>\n              <span\n                v-if=\"modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel\"\n                class=\"ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]\"\n              >\n                {{formatCompactCount(modelDocumentCounts[model])}}\n              </span>\n            </router-link>\n          </li>\n        </ul>\n        <div class=\"border-b border-edge my-2\"></div>\n      </div>\n      <!-- All Models / Search Results -->\n      <div class=\"px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider\">{{ modelSearch.trim() ? 'Search Results' : 'All Models' }}</div>\n      <ul role=\"list\">\n        <li v-for=\"model in filteredModels\" :key=\"'all-' + model\">\n          <router-link\n            :to=\"'/model/' + model\"\n            class=\"flex items-center rounded-md py-1.5 px-2 text-sm text-content-secondary\"\n            :class=\"model === currentModel ? 'bg-gray-200 font-semibold text-content' : 'hover:bg-muted'\">\n            <span class=\"truncate\" v-html=\"highlightMatch(model)\"></span>\n            <span\n              v-if=\"modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel\"\n              class=\"ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]\"\n            >\n              {{formatCompactCount(modelDocumentCounts[model])}}\n            </span>\n          </router-link>\n        </li>\n      </ul>\n      <div v-if=\"filteredModels.length === 0 && modelSearch.trim()\" class=\"px-2 py-2 text-sm text-content-tertiary\">\n        No models match \"{{modelSearch}}\"\n      </div>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100 rounded-md\">\n        No models found\n      </div>\n    </nav>\n    <!-- Bottom toolbar -->\n    <div class=\"shrink-0 border-t border-edge bg-page px-2 py-1.5 flex items-center gap-1\">\n      <button\n        type=\"button\"\n        @click=\"hideSidebar = true\"\n        class=\"rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n        title=\"Hide sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        @click=\"openModelSwitcher\"\n        class=\"rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n        title=\"Quick switch (Ctrl+P)\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n        </svg>\n      </button>\n    </div>\n  </aside>\n  <div class=\"documents bg-slate-50 min-w-0\" ref=\"documentsList\">\n      <div class=\"documents-menu bg-slate-50\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <button\n            v-if=\"hideSidebar === true || hideSidebar === null\"\n            type=\"button\"\n            @click=\"hideSidebar = false\"\n            class=\"shrink-0 rounded-md p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n            :class=\"hideSidebar === null ? 'lg:hidden' : ''\"\n            title=\"Show sidebar\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5\" />\n            </svg>\n          </button>\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{\n              'bg-gray-700 ring-inset ring-2 ring-gray-300 hover:bg-gray-200 text-content-secondary': selectMultiple,\n              'bg-primary hover:bg-primary-hover text-primary-text': !selectMultiple\n            }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 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            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <div class=\"relative\" v-show=\"!selectMultiple\" ref=\"actionsMenuContainer\" @keyup.esc.prevent=\"closeActionsMenu\">\n            <button\n              @click=\"toggleActionsMenu\"\n              type=\"button\"\n              aria-label=\"More actions\"\n              class=\"rounded bg-surface px-2 py-2 text-sm font-semibold text-content-secondary shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-page focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showActionsMenu\"\n              class=\"absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50\"\n            >\n              <div class=\"py-1\">\n                <button\n                  @click=\"shouldShowExportModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Export\n                </button>\n                <button\n                  @click=\"shouldShowCreateModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Create\n                </button>\n                <button\n                  @click=\"openIndexModal\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Indexes\n                </button>\n                <button\n                  @click=\"openCollectionInfo\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Collection Info\n                </button>\n                <button\n                  @click=\"findOldestDocument\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Find oldest document\n                </button>\n                <button\n                  @click=\"toggleRowNumbers()\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  {{ showRowNumbers ? 'Hide row numbers' : 'Show row numbers' }}\n                </button>\n                <button\n                  @click=\"resetFilter()\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Reset Filter\n                </button>\n                <button\n                  @click=\"toggleProjectionMenu(); showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm hover:bg-muted\"\n                  :class=\"isProjectionMenuSelected ? 'text-primary font-semibold' : 'text-content-secondary'\"\n                >\n                  {{ isProjectionMenuSelected ? 'Projection (On)' : 'Projection' }}\n                </button>\n                <button\n                  v-if=\"isProjectionMenuSelected\"\n                  @click=\"clearProjection()\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Reset Projection\n                </button>\n                <async-button\n                  v-if=\"isProjectionMenuSelected\"\n                  type=\"button\"\n                  @click=\"applyDefaultProjectionColumns()\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Default Projection\n                </async-button>\n              </div>\n            </div>\n          </div>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-page focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-surface'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-page focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-surface'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('map')\"\n              :disabled=\"geoJsonFields.length === 0\"\n              type=\"button\"\n              :title=\"geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10\"\n              :class=\"[\n                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-muted' : 'text-gray-400 hover:bg-page',\n                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-surface' : '')\n              ]\">\n              <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z\" />\n              </svg>\n            </button>\n          </span>\n        </div>\n        <div v-if=\"isProjectionMenuSelected && (outputType === 'table' || outputType === 'json')\" class=\"flex items-center gap-2 w-full mt-2 flex-shrink-0\">\n          <input\n            ref=\"projectionInput\"\n            v-model=\"projectionText\"\n            type=\"text\"\n            placeholder=\"Projection: name email, or -password\"\n            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\"\n            @focus=\"initProjection($event)\"\n            @keydown.enter=\"applyProjectionFromInput()\"\n          />\n        </div>\n      </div>\n    <!-- In JSON view, this container is the scrollable element used for infinite scroll. -->\n    <div class=\"documents-container relative\" ref=\"documentsContainerScroll\" @scroll=\"checkIfScrolledToBottom\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n          <span class=\"block mt-2\">\n            Need help?\n            <a\n              href=\"https://discord.gg/P3YCfKYxpy\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"underline font-medium text-red-800 hover:text-red-900\"\n            >Ask in Discord</a>\n            or\n            <a\n              href=\"https://github.com/mongoosejs/studio/issues\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"underline font-medium text-red-800 hover:text-red-900\"\n            >\n              open a GitHub issue.\n            </a>\n          </span>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'table'\" class=\"flex-1 min-h-0 flex flex-col overflow-hidden\">\n        <div\n          ref=\"documentsScrollContainer\"\n          class=\"overflow-x-auto overflow-y-auto flex-1 min-h-0 border border-edge rounded-lg bg-surface\"\n          @scroll=\"checkIfScrolledToBottom\"\n        >\n          <table class=\"min-w-full border-collapse text-sm\">\n            <thead class=\"sticky top-0 z-10 bg-slate-100 dark:bg-shark-800 border-b border-edge\">\n              <tr>\n                <th v-if=\"showRowNumbers\" class=\"px-3 py-2.5 text-left font-medium text-content border-r border-edge whitespace-nowrap align-middle w-0\">\n                  #\n                </th>\n                <th\n                  v-for=\"path in tableDisplayPaths\"\n                  :key=\"path.path\"\n                  class=\"px-3 py-2.5 text-left font-medium text-content border-r border-edge last:border-r-0 whitespace-nowrap align-middle\"\n                >\n                  <div class=\"flex items-center gap-2\">\n                    <span\n                      @click=\"addPathFilter(path.path)\"\n                      class=\"cursor-pointer hover:text-primary truncate min-w-0\"\n                      :title=\"path.path\"\n                    >\n                      {{ path.path }}\n                    </span>\n                    <span class=\"text-xs text-content-tertiary shrink-0\">({{ path.instance || 'unknown' }})</span>\n                    <span class=\"inline-flex shrink-0 gap-0.5 items-center\">\n                      <button\n                        type=\"button\"\n                        @click.stop=\"sortDocs(1, path.path)\"\n                        class=\"p-0.5 rounded text-content-tertiary hover:text-content hover:bg-muted\"\n                        :class=\"{ 'text-primary font-semibold': sortBy[path.path] === 1 }\"\n                        :title=\"sortBy[path.path] === 1 ? 'Clear sort' : 'Sort ascending'\"\n                      >\n                        ↑\n                      </button>\n                      <button\n                        type=\"button\"\n                        @click.stop=\"sortDocs(-1, path.path)\"\n                        class=\"p-0.5 rounded text-content-tertiary hover:text-content hover:bg-muted\"\n                        :class=\"{ 'text-primary font-semibold': sortBy[path.path] === -1 }\"\n                        :title=\"sortBy[path.path] === -1 ? 'Clear sort' : 'Sort descending'\"\n                      >\n                        ↓\n                      </button>\n                      <button\n                        v-if=\"filteredPaths.length > 0\"\n                        type=\"button\"\n                        @click.stop=\"removeField(path)\"\n                        class=\"p-1.5 rounded-md border border-transparent text-content-tertiary hover:text-valencia-600 hover:bg-valencia-50 hover:border-valencia-200 focus:outline-none focus:ring-2 focus:ring-valencia-500/30\"\n                        title=\"Remove column\"\n                        aria-label=\"Remove column\"\n                      >\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n                        </svg>\n                      </button>\n                    </span>\n                  </div>\n                </th>\n                <th v-if=\"filteredPaths.length > 0\" class=\"px-2 py-2.5 border-r border-edge last:border-r-0 align-middle w-0 bg-slate-50 dark:bg-shark-800/80\">\n                  <div class=\"relative\" ref=\"addFieldContainer\">\n                    <button\n                      type=\"button\"\n                      @click=\"toggleAddFieldDropdown()\"\n                      class=\"flex items-center justify-center w-8 h-8 rounded border border-dashed border-edge text-content-tertiary hover:border-primary hover:text-primary hover:bg-primary-subtle/30\"\n                      title=\"Add column\"\n                      aria-label=\"Add column\"\n                    >\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" class=\"w-5 h-5\"> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" /> </svg>\n                    </button>\n                    <div\n                      v-if=\"showAddFieldDropdown\"\n                      class=\"absolute right-0 top-full mt-1 z-[100] min-w-[180px] max-w-[280px] rounded-md border border-edge bg-surface shadow-lg py-1 max-h-48 overflow-y-auto\"\n                    >\n                      <input\n                        v-if=\"availablePathsToAdd.length > 5\"\n                        ref=\"addFieldFilterInput\"\n                        v-model=\"addFieldFilterText\"\n                        type=\"text\"\n                        placeholder=\"Filter fields...\"\n                        class=\"mx-2 mb-1 w-[calc(100%-1rem)] rounded border border-edge px-2 py-1 text-sm\"\n                        @click.stop\n                      />\n                      <button\n                        v-for=\"p in filteredPathsToAdd\"\n                        :key=\"p.path\"\n                        type=\"button\"\n                        class=\"w-full px-3 py-1.5 text-left text-sm hover:bg-muted\"\n                        @click.stop=\"addField(p)\"\n                      >\n                        {{ p.path }}\n                      </button>\n                      <p v-if=\"filteredPathsToAdd.length === 0\" class=\"px-3 py-2 text-sm text-content-tertiary\">\n                        {{ addFieldFilterText.trim() ? 'No matching fields' : 'All fields added' }}\n                      </p>\n                    </div>\n                  </div>\n                </th>\n              </tr>\n            </thead>\n            <tbody class=\"bg-surface\">\n              <tr\n                v-for=\"(document, docIndex) in documents\"\n                :key=\"document._id\"\n                @click=\"handleDocumentClick(document, $event)\"\n                class=\"border-b border-edge cursor-pointer transition-colors hover:bg-muted/60\"\n                :class=\"{ 'bg-primary-subtle/50 hover:bg-primary-subtle/70': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\"\n              >\n                <td v-if=\"showRowNumbers\" class=\"px-3 py-2 border-r border-edge align-top text-content-tertiary whitespace-nowrap\">\n                  {{ docIndex + 1 }}\n                </td>\n                <td\n                  v-for=\"schemaPath in tableDisplayPaths\"\n                  :key=\"schemaPath.path\"\n                  class=\"px-3 py-2 border-r border-edge last:border-r-0 align-top max-w-[280px]\"\n                >\n                  <div class=\"table-cell-content flex items-center gap-1.5 min-w-0 group\">\n                    <span class=\"min-w-0 overflow-hidden text-ellipsis flex-1\">\n                      <component\n                        :is=\"getComponentForPath(schemaPath)\"\n                        :value=\"getValueForPath(document, schemaPath.path)\"\n                        :allude=\"getReferenceModel(schemaPath)\"\n                      />\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"table-cell-copy shrink-0 p-1 rounded text-content-tertiary hover:text-content hover:bg-muted focus:outline-none focus:ring-1 focus:ring-edge\"\n                      aria-label=\"Copy cell value\"\n                      @click.stop=\"copyCellValue(getValueForPath(document, schemaPath.path))\"\n                    >\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1M8 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M8 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m0 0h2a2 2 0 0 1 2 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n                      </svg>\n                    </button>\n                  </div>\n                </td>\n                <td v-if=\"filteredPaths.length > 0\" class=\"w-0 px-0 py-0 border-r border-edge last:border-r-0 bg-slate-50/50 dark:bg-shark-800/30\"></td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div v-if=\"outputType === 'table' && (loadingMore || (status === 'loading' && documents.length > 0))\" class=\"flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary border-t border-edge bg-surface\">\n          <img src=\"images/loader.gif\" alt=\"\" class=\"h-5 w-5\">\n          <span>Loading documents…</span>\n        </div>\n        <p v-if=\"outputType === 'table' && documents.length === 0 && status === 'loaded'\" class=\"mt-2 text-sm text-content-tertiary px-1\">\n          No documents to show. Use Projection in the menu to choose columns.\n        </p>\n      </div>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-2 p-1 mt-1\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors rounded-md border border-slate-100',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-surface'\n          ]\"\n        >\n          <router-link\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-text shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            :to=\"{ path: '/model/' + currentModel + '/document/' + document._id, query: $route.query }\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            @click.stop\n          >\n            Open\n          </router-link>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n        <div v-if=\"outputType === 'json' && (loadingMore || (status === 'loading' && documents.length > 0))\" class=\"flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary\">\n          <img src=\"images/loader.gif\" alt=\"\" class=\"h-5 w-5\">\n          <span>Loading documents…</span>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'map'\" class=\"flex flex-col h-full\">\n        <div class=\"p-2 bg-surface border-b flex items-center gap-2\">\n          <label class=\"text-sm font-medium text-content-secondary\">GeoJSON Field:</label>\n          <select\n            :value=\"selectedGeoField\"\n            @change=\"setSelectedGeoField($event.target.value)\"\n            class=\"rounded-md border border-edge-strong py-1 px-2 text-sm focus:border-primary focus:ring-primary\"\n          >\n            <option v-for=\"field in geoJsonFields\" :key=\"field.path\" :value=\"field.path\">\n              {{ field.label }}\n            </option>\n          </select>\n          <async-button\n            @click=\"loadMoreDocuments\"\n            :disabled=\"loadedAllDocs\"\n            type=\"button\"\n            class=\"rounded px-2 py-1 text-xs font-semibold text-primary-text shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            :class=\"loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary hover:bg-primary-hover'\"\n          >\n            Load more\n          </async-button>\n        </div>\n        <div class=\"flex-1 min-h-[400px]\" ref=\"modelsMap\"></div>\n      </div>\n      <div v-if=\"status === 'loading' && !loadingMore && documents.length === 0\" class=\"loader loader-overlay\" aria-busy=\"true\">\n        <img src=\"images/loader.gif\" alt=\"Loading\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold flex items-center gap-2\">\n              <div>{{ index.name }}</div>\n              <div v-if=\"isTTLIndex(index)\" class=\"rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-semibold text-primary\">\n                TTL: {{ formatTTL(index.expireAfterSeconds) }}\n              </div>\n            </div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCollectionInfoModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCollectionInfoModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Collection Info</div>\n      <div v-if=\"!collectionInfo\" class=\"text-gray-600\">Loading collection details...</div>\n      <div v-else class=\"space-y-3\">\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Documents</div>\n          <div class=\"text-content\">{{ formatNumber(collectionInfo.documentCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Indexes</div>\n          <div class=\"text-content\">{{ formatNumber(collectionInfo.indexCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Total Index Size</div>\n          <div class=\"text-content\">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Total Storage Size</div>\n          <div class=\"text-content\">{{ formatCollectionSize(collectionInfo.size) }}</div>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <div class=\"flex justify-between gap-4\">\n            <div class=\"font-semibold text-content-secondary\">Collation</div>\n            <div class=\"text-content\">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>\n          </div>\n          <div v-if=\"collectionInfo.hasCollation\" class=\"rounded bg-muted p-3 text-sm text-gray-800 overflow-x-auto\">\n            <pre class=\"whitespace-pre-wrap\">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>\n          </div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Capped</div>\n          <div class=\"text-content\">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-page0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n  <model-switcher\n    :show=\"showModelSwitcher\"\n    :models=\"models\"\n    :recently-viewed-models=\"recentlyViewedModels\"\n    :model-document-counts=\"modelDocumentCounts\"\n    @close=\"showModelSwitcher = false\"\n    @select=\"selectSwitcherModel\"\n  ></model-switcher>\n</div>\n";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <aside class=\"bg-page border-r overflow-hidden transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative shrink-0 flex flex-col top-[55px] bottom-0 lg:top-auto lg:bottom-auto lg:h-full\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <!-- Search -->\n    <div class=\"p-3 shrink-0\">\n      <div class=\"relative\">\n        <svg class=\"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n        </svg>\n        <input\n          v-model=\"modelSearch\"\n          type=\"text\"\n          placeholder=\"Find model...\"\n          @keydown.esc=\"modelSearch = ''\"\n          class=\"w-full rounded-md border border-edge bg-surface py-1.5 pl-8 pr-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300\"\n        />\n      </div>\n    </div>\n    <!-- Model list (scrollable) -->\n    <nav class=\"flex-1 overflow-y-auto px-2 pb-2\">\n      <!-- Recently Viewed -->\n      <div v-if=\"filteredRecentModels.length > 0 && !modelSearch.trim()\">\n        <div class=\"px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider\">Recently Viewed</div>\n        <ul role=\"list\">\n          <li v-for=\"model in filteredRecentModels\" :key=\"'recent-' + model\">\n            <router-link\n              :to=\"'/model/' + model\"\n              class=\"flex items-center rounded-md py-1.5 px-2 text-sm text-content-secondary\"\n              :class=\"model === currentModel ? 'bg-gray-200 font-semibold text-content' : 'hover:bg-muted'\">\n              <span class=\"truncate\" v-html=\"highlightMatch(model)\"></span>\n              <span\n                v-if=\"modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel\"\n                class=\"ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]\"\n              >\n                {{formatCompactCount(modelDocumentCounts[model])}}\n              </span>\n            </router-link>\n          </li>\n        </ul>\n        <div class=\"border-b border-edge my-2\"></div>\n      </div>\n      <!-- All Models / Search Results -->\n      <div class=\"px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider\">{{ modelSearch.trim() ? 'Search Results' : 'All Models' }}</div>\n      <ul role=\"list\">\n        <li v-for=\"model in filteredModels\" :key=\"'all-' + model\">\n          <router-link\n            :to=\"'/model/' + model\"\n            class=\"flex items-center rounded-md py-1.5 px-2 text-sm text-content-secondary\"\n            :class=\"model === currentModel ? 'bg-gray-200 font-semibold text-content' : 'hover:bg-muted'\">\n            <span class=\"truncate\" v-html=\"highlightMatch(model)\"></span>\n            <span\n              v-if=\"modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel\"\n              class=\"ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]\"\n            >\n              {{formatCompactCount(modelDocumentCounts[model])}}\n            </span>\n          </router-link>\n        </li>\n      </ul>\n      <div v-if=\"filteredModels.length === 0 && modelSearch.trim()\" class=\"px-2 py-2 text-sm text-content-tertiary\">\n        No models match \"{{modelSearch}}\"\n      </div>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100 rounded-md\">\n        No models found\n      </div>\n    </nav>\n    <!-- Bottom toolbar -->\n    <div class=\"shrink-0 border-t border-edge bg-page px-2 py-1.5 flex items-center gap-1\">\n      <button\n        type=\"button\"\n        @click=\"hideSidebar = true\"\n        class=\"rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n        title=\"Hide sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        @click=\"openModelSwitcher\"\n        class=\"rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n        title=\"Quick switch (Ctrl+P)\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n        </svg>\n      </button>\n    </div>\n  </aside>\n  <div class=\"documents bg-slate-50 min-w-0\" ref=\"documentsList\">\n      <div class=\"documents-menu bg-slate-50\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <button\n            v-if=\"hideSidebar === true || hideSidebar === null\"\n            type=\"button\"\n            @click=\"hideSidebar = false\"\n            class=\"shrink-0 rounded-md p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted\"\n            :class=\"hideSidebar === null ? 'lg:hidden' : ''\"\n            title=\"Show sidebar\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5\" />\n            </svg>\n          </button>\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{\n              'bg-gray-700 ring-inset ring-2 ring-gray-300 hover:bg-gray-200 text-content-secondary': selectMultiple,\n              'bg-primary hover:bg-primary-hover text-primary-text': !selectMultiple\n            }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 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            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <div class=\"relative\" v-show=\"!selectMultiple\" ref=\"actionsMenuContainer\" @keyup.esc.prevent=\"closeActionsMenu\">\n            <button\n              @click=\"toggleActionsMenu\"\n              type=\"button\"\n              aria-label=\"More actions\"\n              class=\"rounded bg-surface px-2 py-2 text-sm font-semibold text-content-secondary shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-page focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showActionsMenu\"\n              class=\"absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50\"\n            >\n              <div class=\"py-1\">\n                <button\n                  @click=\"shouldShowExportModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Export\n                </button>\n                <button\n                  @click=\"shouldShowCreateModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Create\n                </button>\n                <button\n                  @click=\"openIndexModal\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Indexes\n                </button>\n                <button\n                  @click=\"openCollectionInfo\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Collection Info\n                </button>\n                <button\n                  @click=\"findOldestDocument\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Find oldest document\n                </button>\n                <button\n                  @click=\"toggleRowNumbers()\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  {{ showRowNumbers ? 'Hide row numbers' : 'Show row numbers' }}\n                </button>\n                <button\n                  @click=\"resetFilter()\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Reset Filter\n                </button>\n                <button\n                  @click=\"toggleProjectionMenu(); showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm hover:bg-muted\"\n                  :class=\"isProjectionMenuSelected ? 'text-primary font-semibold' : 'text-content-secondary'\"\n                >\n                  {{ isProjectionMenuSelected ? 'Projection (On)' : 'Projection' }}\n                </button>\n                <button\n                  v-if=\"isProjectionMenuSelected\"\n                  @click=\"clearProjection()\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Reset Projection\n                </button>\n                <async-button\n                  v-if=\"isProjectionMenuSelected\"\n                  type=\"button\"\n                  @click=\"applyDefaultProjectionColumns()\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted\"\n                >\n                  Default Projection\n                </async-button>\n              </div>\n            </div>\n          </div>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-page focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-surface'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-page focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-surface'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('map')\"\n              :disabled=\"geoJsonFields.length === 0\"\n              type=\"button\"\n              :title=\"geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10\"\n              :class=\"[\n                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-muted' : 'text-gray-400 hover:bg-page',\n                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-surface' : '')\n              ]\">\n              <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z\" />\n              </svg>\n            </button>\n          </span>\n        </div>\n        <div v-if=\"isProjectionMenuSelected && (outputType === 'table' || outputType === 'json')\" class=\"flex items-center gap-2 w-full mt-2 flex-shrink-0\">\n          <projection-search\n            ref=\"projectionSearch\"\n            :value=\"projectionText\"\n            :schema-paths=\"schemaPaths\"\n            @projection-input=\"projectionText = $event\"\n            @apply=\"applyProjectionFromInput\"\n          />\n        </div>\n      </div>\n    <!-- In JSON view, this container is the scrollable element used for infinite scroll. -->\n    <div class=\"documents-container relative\" ref=\"documentsContainerScroll\" @scroll=\"checkIfScrolledToBottom\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n          <span class=\"block mt-2\">\n            Need help?\n            <a\n              href=\"https://discord.gg/P3YCfKYxpy\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"underline font-medium text-red-800 hover:text-red-900\"\n            >Ask in Discord</a>\n            or\n            <a\n              href=\"https://github.com/mongoosejs/studio/issues\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"underline font-medium text-red-800 hover:text-red-900\"\n            >\n              open a GitHub issue.\n            </a>\n          </span>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'table'\" class=\"flex-1 min-h-0 flex flex-col overflow-hidden\">\n        <div\n          ref=\"documentsScrollContainer\"\n          class=\"overflow-x-auto overflow-y-auto flex-1 min-h-0 border border-edge rounded-lg bg-surface\"\n          @scroll=\"checkIfScrolledToBottom\"\n        >\n          <table class=\"min-w-full border-collapse text-sm\">\n            <thead class=\"sticky top-0 z-10 bg-slate-100 dark:bg-shark-800 border-b border-edge\">\n              <tr>\n                <th v-if=\"showRowNumbers\" class=\"px-3 py-2.5 text-left font-medium text-content border-r border-edge whitespace-nowrap align-middle w-0\">\n                  #\n                </th>\n                <th\n                  v-for=\"path in tableDisplayPaths\"\n                  :key=\"path.path\"\n                  class=\"px-3 py-2.5 text-left font-medium text-content border-r border-edge last:border-r-0 whitespace-nowrap align-middle\"\n                >\n                  <div class=\"flex items-center gap-2\">\n                    <span\n                      @click=\"addPathFilter(path.path)\"\n                      class=\"cursor-pointer hover:text-primary truncate min-w-0\"\n                      :title=\"path.path\"\n                    >\n                      {{ path.path }}\n                    </span>\n                    <span class=\"text-xs text-content-tertiary shrink-0\">({{ path.instance || 'unknown' }})</span>\n                    <span class=\"inline-flex shrink-0 gap-0.5 items-center\">\n                      <button\n                        type=\"button\"\n                        @click.stop=\"sortDocs(1, path.path)\"\n                        class=\"p-0.5 rounded text-content-tertiary hover:text-content hover:bg-muted\"\n                        :class=\"{ 'text-primary font-semibold': sortBy[path.path] === 1 }\"\n                        :title=\"sortBy[path.path] === 1 ? 'Clear sort' : 'Sort ascending'\"\n                      >\n                        ↑\n                      </button>\n                      <button\n                        type=\"button\"\n                        @click.stop=\"sortDocs(-1, path.path)\"\n                        class=\"p-0.5 rounded text-content-tertiary hover:text-content hover:bg-muted\"\n                        :class=\"{ 'text-primary font-semibold': sortBy[path.path] === -1 }\"\n                        :title=\"sortBy[path.path] === -1 ? 'Clear sort' : 'Sort descending'\"\n                      >\n                        ↓\n                      </button>\n                      <button\n                        v-if=\"filteredPaths.length > 0\"\n                        type=\"button\"\n                        @click.stop=\"removeField(path)\"\n                        class=\"p-1.5 rounded-md border border-transparent text-content-tertiary hover:text-valencia-600 hover:bg-valencia-50 hover:border-valencia-200 focus:outline-none focus:ring-2 focus:ring-valencia-500/30\"\n                        title=\"Remove column\"\n                        aria-label=\"Remove column\"\n                      >\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n                        </svg>\n                      </button>\n                    </span>\n                  </div>\n                </th>\n                <th v-if=\"filteredPaths.length > 0\" class=\"px-2 py-2.5 border-r border-edge last:border-r-0 align-middle w-0 bg-slate-50 dark:bg-shark-800/80\">\n                  <div class=\"relative\" ref=\"addFieldContainer\">\n                    <button\n                      type=\"button\"\n                      @click=\"toggleAddFieldDropdown()\"\n                      class=\"flex items-center justify-center w-8 h-8 rounded border border-dashed border-edge text-content-tertiary hover:border-primary hover:text-primary hover:bg-primary-subtle/30\"\n                      title=\"Add column\"\n                      aria-label=\"Add column\"\n                    >\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" class=\"w-5 h-5\"> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" /> </svg>\n                    </button>\n                    <div\n                      v-if=\"showAddFieldDropdown\"\n                      class=\"absolute right-0 top-full mt-1 z-[100] min-w-[180px] max-w-[280px] rounded-md border border-edge bg-surface shadow-lg py-1 max-h-48 overflow-y-auto\"\n                    >\n                      <input\n                        v-if=\"availablePathsToAdd.length > 5\"\n                        ref=\"addFieldFilterInput\"\n                        v-model=\"addFieldFilterText\"\n                        type=\"text\"\n                        placeholder=\"Filter fields...\"\n                        class=\"mx-2 mb-1 w-[calc(100%-1rem)] rounded border border-edge px-2 py-1 text-sm\"\n                        @click.stop\n                      />\n                      <button\n                        v-for=\"p in filteredPathsToAdd\"\n                        :key=\"p.path\"\n                        type=\"button\"\n                        class=\"w-full px-3 py-1.5 text-left text-sm hover:bg-muted\"\n                        @click.stop=\"addField(p)\"\n                      >\n                        {{ p.path }}\n                      </button>\n                      <p v-if=\"filteredPathsToAdd.length === 0\" class=\"px-3 py-2 text-sm text-content-tertiary\">\n                        {{ addFieldFilterText.trim() ? 'No matching fields' : 'All fields added' }}\n                      </p>\n                    </div>\n                  </div>\n                </th>\n              </tr>\n            </thead>\n            <tbody class=\"bg-surface\">\n              <tr\n                v-for=\"(document, docIndex) in documents\"\n                :key=\"document._id\"\n                @click=\"handleDocumentClick(document, $event)\"\n                class=\"border-b border-edge cursor-pointer transition-colors hover:bg-muted/60\"\n                :class=\"{ 'bg-primary-subtle/50 hover:bg-primary-subtle/70': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\"\n              >\n                <td v-if=\"showRowNumbers\" class=\"px-3 py-2 border-r border-edge align-top text-content-tertiary whitespace-nowrap\">\n                  {{ docIndex + 1 }}\n                </td>\n                <td\n                  v-for=\"schemaPath in tableDisplayPaths\"\n                  :key=\"schemaPath.path\"\n                  class=\"px-3 py-2 border-r border-edge last:border-r-0 align-top max-w-[280px]\"\n                >\n                  <div class=\"table-cell-content flex items-center gap-1.5 min-w-0 group\">\n                    <span class=\"min-w-0 overflow-hidden text-ellipsis flex-1\">\n                      <component\n                        :is=\"getComponentForPath(schemaPath)\"\n                        :value=\"getValueForPath(document, schemaPath.path)\"\n                        :allude=\"getReferenceModel(schemaPath)\"\n                      />\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"table-cell-copy shrink-0 p-1 rounded text-content-tertiary hover:text-content hover:bg-muted focus:outline-none focus:ring-1 focus:ring-edge\"\n                      aria-label=\"Copy cell value\"\n                      @click.stop=\"copyCellValue(getValueForPath(document, schemaPath.path))\"\n                    >\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1M8 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M8 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m0 0h2a2 2 0 0 1 2 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n                      </svg>\n                    </button>\n                  </div>\n                </td>\n                <td v-if=\"filteredPaths.length > 0\" class=\"w-0 px-0 py-0 border-r border-edge last:border-r-0 bg-slate-50/50 dark:bg-shark-800/30\"></td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div v-if=\"outputType === 'table' && (loadingMore || (status === 'loading' && documents.length > 0))\" class=\"flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary border-t border-edge bg-surface\">\n          <img src=\"images/loader.gif\" alt=\"\" class=\"h-5 w-5\">\n          <span>Loading documents…</span>\n        </div>\n        <p v-if=\"outputType === 'table' && documents.length === 0 && status === 'loaded'\" class=\"mt-2 text-sm text-content-tertiary px-1\">\n          No documents to show. Use Projection in the menu to choose columns.\n        </p>\n      </div>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-2 p-1 mt-1\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors rounded-md border border-slate-100',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-surface'\n          ]\"\n        >\n          <router-link\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-text shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            :to=\"{ path: '/model/' + currentModel + '/document/' + document._id, query: $route.query }\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            @click.stop\n          >\n            Open\n          </router-link>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n        <div v-if=\"outputType === 'json' && (loadingMore || (status === 'loading' && documents.length > 0))\" class=\"flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary\">\n          <img src=\"images/loader.gif\" alt=\"\" class=\"h-5 w-5\">\n          <span>Loading documents…</span>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'map'\" class=\"flex flex-col h-full\">\n        <div class=\"p-2 bg-surface border-b flex items-center gap-2\">\n          <label class=\"text-sm font-medium text-content-secondary\">GeoJSON Field:</label>\n          <select\n            :value=\"selectedGeoField\"\n            @change=\"setSelectedGeoField($event.target.value)\"\n            class=\"rounded-md border border-edge-strong py-1 px-2 text-sm focus:border-primary focus:ring-primary\"\n          >\n            <option v-for=\"field in geoJsonFields\" :key=\"field.path\" :value=\"field.path\">\n              {{ field.label }}\n            </option>\n          </select>\n          <async-button\n            @click=\"loadMoreDocuments\"\n            :disabled=\"loadedAllDocs\"\n            type=\"button\"\n            class=\"rounded px-2 py-1 text-xs font-semibold text-primary-text shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n            :class=\"loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary hover:bg-primary-hover'\"\n          >\n            Load more\n          </async-button>\n        </div>\n        <div class=\"flex-1 min-h-[400px]\" ref=\"modelsMap\"></div>\n      </div>\n      <div v-if=\"status === 'loading' && !loadingMore && documents.length === 0\" class=\"loader loader-overlay\" aria-busy=\"true\">\n        <img src=\"images/loader.gif\" alt=\"Loading\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold flex items-center gap-2\">\n              <div>{{ index.name }}</div>\n              <div v-if=\"isTTLIndex(index)\" class=\"rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-semibold text-primary\">\n                TTL: {{ formatTTL(index.expireAfterSeconds) }}\n              </div>\n            </div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCollectionInfoModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCollectionInfoModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Collection Info</div>\n      <div v-if=\"!collectionInfo\" class=\"text-gray-600\">Loading collection details...</div>\n      <div v-else class=\"space-y-3\">\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Documents</div>\n          <div class=\"text-content\">{{ formatNumber(collectionInfo.documentCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Indexes</div>\n          <div class=\"text-content\">{{ formatNumber(collectionInfo.indexCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Total Index Size</div>\n          <div class=\"text-content\">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Total Storage Size</div>\n          <div class=\"text-content\">{{ formatCollectionSize(collectionInfo.size) }}</div>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <div class=\"flex justify-between gap-4\">\n            <div class=\"font-semibold text-content-secondary\">Collation</div>\n            <div class=\"text-content\">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>\n          </div>\n          <div v-if=\"collectionInfo.hasCollation\" class=\"rounded bg-muted p-3 text-sm text-gray-800 overflow-x-auto\">\n            <pre class=\"whitespace-pre-wrap\">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>\n          </div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-content-secondary\">Capped</div>\n          <div class=\"text-content\">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-page0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n  <model-switcher\n    :show=\"showModelSwitcher\"\n    :models=\"models\"\n    :recently-viewed-models=\"recentlyViewedModels\"\n    :model-document-counts=\"modelDocumentCounts\"\n    @close=\"showModelSwitcher = false\"\n    @select=\"selectSwitcherModel\"\n  ></model-switcher>\n</div>\n";
+
+/***/ },
+
+/***/ "./frontend/src/models/projection-search/projection-search.html"
+/*!**********************************************************************!*\
+  !*** ./frontend/src/models/projection-search/projection-search.html ***!
+  \**********************************************************************/
+(module) {
+
+"use strict";
+module.exports = "<div class=\"relative flex-grow m-0\">\n  <input\n    ref=\"projectionInput\"\n    class=\"w-full 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\"\n    type=\"text\"\n    placeholder=\"Projection: name email, or -password\"\n    v-model=\"projectionText\"\n    @focus=\"initProjection\"\n    @input=\"handleInput\"\n    @keydown=\"handleKeyDown\"\n    @blur=\"hideAutocomplete\"\n  />\n  <ul\n    v-if=\"autocompleteSuggestions.length\"\n    class=\"absolute left-0 right-0 top-full z-[9999] mt-1 max-h-40 overflow-y-auto rounded border border-edge bg-surface shadow\"\n  >\n    <li\n      v-for=\"(suggestion, index) in autocompleteSuggestions\"\n      :key=\"suggestion\"\n      class=\"cursor-pointer px-2 py-1 text-sm font-mono\"\n      :class=\"{ 'bg-primary-subtle': index === autocompleteIndex }\"\n      @mousedown.prevent=\"applySuggestion(index)\"\n    >\n      {{ suggestion }}\n    </li>\n  </ul>\n</div>\n";
 
 /***/ },
 
@@ -57018,6 +57738,89 @@ var lexer = _Lexer.lex;
 //# sourceMappingURL=marked.cjs.map
 
 
+/***/ },
+
+/***/ "./node_modules/mongoose/lib/helpers/symbols.js"
+/*!******************************************************!*\
+  !*** ./node_modules/mongoose/lib/helpers/symbols.js ***!
+  \******************************************************/
+(__unused_webpack_module, exports) {
+
+"use strict";
+
+
+exports.arrayAtomicsBackupSymbol = Symbol('mongoose#Array#atomicsBackup');
+exports.arrayAtomicsSymbol = Symbol('mongoose#Array#_atomics');
+exports.arrayParentSymbol = Symbol('mongoose#Array#_parent');
+exports.arrayPathSymbol = Symbol('mongoose#Array#_path');
+exports.arraySchemaSymbol = Symbol('mongoose#Array#_schema');
+exports.documentArrayParent = Symbol('mongoose#documentArrayParent');
+exports.documentIsSelected = Symbol('mongoose#Document#isSelected');
+exports.documentIsModified = Symbol('mongoose#Document#isModified');
+exports.documentModifiedPaths = Symbol('mongoose#Document#modifiedPaths');
+exports.documentSchemaSymbol = Symbol('mongoose#Document#schema');
+exports.getSymbol = Symbol('mongoose#Document#get');
+exports.modelSymbol = Symbol('mongoose#Model');
+exports.objectIdSymbol = Symbol('mongoose#ObjectId');
+exports.populateModelSymbol = Symbol('mongoose#PopulateOptions#Model');
+exports.schemaTypeSymbol = Symbol('mongoose#schemaType');
+exports.sessionNewDocuments = Symbol('mongoose#ClientSession#newDocuments');
+exports.scopeSymbol = Symbol('mongoose#Document#scope');
+exports.validatorErrorSymbol = Symbol('mongoose#validatorError');
+
+
+/***/ },
+
+/***/ "./node_modules/mongoose/lib/types/objectid.js"
+/*!*****************************************************!*\
+  !*** ./node_modules/mongoose/lib/types/objectid.js ***!
+  \*****************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+/**
+ * ObjectId type constructor
+ *
+ * #### Example:
+ *
+ *     const id = new mongoose.Types.ObjectId;
+ *
+ * @constructor ObjectId
+ */
+
+
+
+const ObjectId = (__webpack_require__(/*! mongodb/lib/bson */ "./node_modules/mongodb/lib/bson.js").ObjectId);
+const objectIdSymbol = (__webpack_require__(/*! ../helpers/symbols */ "./node_modules/mongoose/lib/helpers/symbols.js").objectIdSymbol);
+
+/**
+ * Getter for convenience with populate, see gh-6115
+ * @api private
+ */
+
+Object.defineProperty(ObjectId.prototype, '_id', {
+  enumerable: false,
+  configurable: true,
+  get: function() {
+    return this;
+  }
+});
+
+/*!
+ * Convenience `valueOf()` to allow comparing ObjectIds using double equals re: gh-7299
+ */
+
+if (!Object.hasOwn(ObjectId.prototype, 'valueOf')) {
+  ObjectId.prototype.valueOf = function objectIdValueOf() {
+    return this.toString();
+  };
+}
+
+ObjectId.prototype[objectIdSymbol] = true;
+
+module.exports = ObjectId;
+
+
 /***/ },
 
 /***/ "./node_modules/bson/lib/bson.mjs"
@@ -62887,7 +63690,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.3.11","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","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","marked":"15.0.12","node-inspect-extracted":"3.x","regexp.escape":"^2.0.1","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","time-commando":"1.0.1","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"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","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","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.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.","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","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","marked":"15.0.12","node-inspect-extracted":"3.x","regexp.escape":"^2.0.1","tailwindcss":"3.4.0","time-commando":"1.0.1","typescript":"^6.0.2","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"},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"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","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","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"}}');
 
 /***/ }