@mongoosejs/studio 0.3.3 → 0.3.4

package/frontend/public/app.js

@@ -750,9 +750,12 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
     },
+    getSuggestedProjection: function getSuggestedProjection(params) {
+      return client.post('', { action: 'Model.getSuggestedProjection', ...params }).then(res => res.data);
+    },
     getDocumentsStream: async function* getDocumentsStream(params) {
       const data = await client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
-      yield { schemaPaths: data.schemaPaths };
+      yield { schemaPaths: data.schemaPaths, suggestedFields: data.suggestedFields };
       yield { numDocs: data.numDocs };
       for (const doc of data.docs) {
         yield { document: doc };
@@ -965,6 +968,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('/Model/getDocuments', params).then(res => res.data);
     },
+    getSuggestedProjection: function getSuggestedProjection(params) {
+      return client.post('/Model/getSuggestedProjection', params).then(res => res.data);
+    },
     getDocumentsStream: async function* getDocumentsStream(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/getDocumentsStream?' + new URLSearchParams(params).toString();
@@ -2732,7 +2738,7 @@ module.exports = {
       return this.dashboardResults.length > 0 ? this.dashboardResults[0] : null;
     }
   },
-  mounted: async function () {
+  mounted: async function() {
     window.pageState = this;
 
     document.addEventListener('click', this.handleDocumentClick);
@@ -7056,11 +7062,66 @@ const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/append
 appendCSS(__webpack_require__(/*! ./models.css */ "./frontend/src/models/models.css"));
 
 const limit = 20;
+const DEFAULT_FIRST_N_FIELDS = 6;
 const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
 const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
+const PROJECTION_STORAGE_KEY_PREFIX = 'studio:model-projection:';
+const SHOW_ROW_NUMBERS_STORAGE_KEY = 'studio:model-show-row-numbers';
+const PROJECTION_MODE_QUERY_KEY = 'projectionMode';
 const RECENTLY_VIEWED_MODELS_KEY = 'studio:recently-viewed-models';
 const MAX_RECENT_MODELS = 4;
 
+/** 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 [];
+  }
+  if (Array.isArray(parsed)) {
+    return parsed.map(x => String(x).trim()).filter(Boolean);
+  }
+  if (parsed != null && typeof parsed === 'object') {
+    return Object.keys(parsed).filter(k =>
+      Object.prototype.hasOwnProperty.call(parsed, k) && parsed[k]
+    );
+  }
+  return [];
+}
+
+/** Pass through a valid JSON `fields` string for Model.getDocuments / getDocumentsStream. */
+function normalizeFieldsParamForApi(fieldsStr) {
+  if (fieldsStr == null || fieldsStr === '') {
+    return null;
+  }
+  const s = typeof fieldsStr === 'string' ? fieldsStr : String(fieldsStr);
+  const trimmed = s.trim();
+  if (!trimmed) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (Array.isArray(parsed)) {
+      return trimmed;
+    }
+    if (parsed != null && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return trimmed;
+    }
+  } catch (e) {
+    return null;
+  }
+  return null;
+}
+
 module.exports = app => app.component('models', {
   template: template,
   props: ['model', 'user', 'roles'],
@@ -7076,6 +7137,7 @@ module.exports = app => app.component('models', {
     mongoDBIndexes: [],
     schemaIndexes: [],
     status: 'loading',
+    loadingMore: false,
     loadedAllDocs: false,
     edittingDoc: null,
     docEdits: null,
@@ -7084,7 +7146,10 @@ module.exports = app => app.component('models', {
     searchText: '',
     shouldShowExportModal: false,
     shouldShowCreateModal: false,
-    shouldShowFieldModal: false,
+    projectionText: '',
+    isProjectionMenuSelected: false,
+    addFieldFilterText: '',
+    showAddFieldDropdown: false,
     shouldShowIndexModal: false,
     shouldShowCollectionInfoModal: false,
     shouldShowUpdateMultipleModal: false,
@@ -7106,27 +7171,44 @@ module.exports = app => app.component('models', {
     collectionInfo: null,
     modelSearch: '',
     recentlyViewedModels: [],
-    showModelSwitcher: false
+    showModelSwitcher: false,
+    showRowNumbers: true,
+    suppressScrollCheck: false,
+    scrollTopToRestore: null
   }),
   created() {
     this.currentModel = this.model;
     this.setSearchTextFromRoute();
     this.loadOutputPreference();
     this.loadSelectedGeoField();
+    this.loadShowRowNumbersPreference();
     this.loadRecentlyViewedModels();
+    this.isProjectionMenuSelected = this.$route?.query?.[PROJECTION_MODE_QUERY_KEY] === '1';
   },
   beforeDestroy() {
-    document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
     document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
+    document.removeEventListener('click', this.onOutsideAddFieldDropdownClick, true);
     document.documentElement.removeEventListener('studio-theme-changed', this.onStudioThemeChanged);
     document.removeEventListener('keydown', this.onCtrlP, true);
     this.destroyMap();
   },
   async mounted() {
+    // Persist scroll restoration across remounts.
+    // This component is keyed by `$route.fullPath`, so query changes (e.g. projection updates)
+    // recreate the component and reset scroll position.
+    if (typeof window !== 'undefined') {
+      if (typeof window.__studioModelsScrollTopToRestore === 'number') {
+        this.scrollTopToRestore = window.__studioModelsScrollTopToRestore;
+      }
+      if (window.__studioModelsSuppressScrollCheck === true) {
+        this.suppressScrollCheck = true;
+      }
+      delete window.__studioModelsScrollTopToRestore;
+      delete window.__studioModelsSuppressScrollCheck;
+    }
+
     window.pageState = this;
-    this.onScroll = () => this.checkIfScrolledToBottom();
-    document.addEventListener('scroll', this.onScroll, true);
     this.onPopState = () => this.initSearchFromUrl();
     window.addEventListener('popstate', this.onPopState, true);
     this.onOutsideActionsMenuClick = event => {
@@ -7138,7 +7220,18 @@ module.exports = app => app.component('models', {
         this.closeActionsMenu();
       }
     };
+    this.onOutsideAddFieldDropdownClick = event => {
+      if (!this.showAddFieldDropdown) {
+        return;
+      }
+      const container = this.$refs.addFieldContainer;
+      if (container && !container.contains(event.target)) {
+        this.showAddFieldDropdown = false;
+        this.addFieldFilterText = '';
+      }
+    };
     document.addEventListener('click', this.onOutsideActionsMenuClick, true);
+    document.addEventListener('click', this.onOutsideAddFieldDropdownClick, true);
     this.onStudioThemeChanged = () => this.updateMapTileLayer();
     document.documentElement.addEventListener('studio-theme-changed', this.onStudioThemeChanged);
     this.onCtrlP = (event) => {
@@ -7149,6 +7242,8 @@ module.exports = app => app.component('models', {
     };
     document.addEventListener('keydown', this.onCtrlP, true);
     this.query = Object.assign({}, this.$route.query);
+    // Keep UI mode in sync with the URL on remounts.
+    this.isProjectionMenuSelected = this.$route?.query?.[PROJECTION_MODE_QUERY_KEY] === '1';
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
     await this.loadModelCounts();
@@ -7164,8 +7259,27 @@ module.exports = app => app.component('models', {
     }
 
     await this.initSearchFromUrl();
+    if (this.isProjectionMenuSelected && this.outputType === 'map') {
+      // Projection input is not rendered in map view.
+      this.setOutputType('json');
+    }
+    this.$nextTick(() => {
+      if (!this.isProjectionMenuSelected) return;
+      const input = this.$refs.projectionInput;
+      if (input && typeof input.focus === 'function') {
+        input.focus();
+      }
+    });
   },
   watch: {
+    model(newModel) {
+      if (newModel !== this.currentModel) {
+        this.currentModel = newModel;
+        if (this.currentModel != null) {
+          this.initSearchFromUrl();
+        }
+      }
+    },
     documents: {
       handler() {
         if (this.outputType === 'map' && this.mapInstance) {
@@ -7270,6 +7384,19 @@ module.exports = app => app.component('models', {
       }
 
       return geoFields;
+    },
+    availablePathsToAdd() {
+      const currentPaths = new Set(this.filteredPaths.map(p => p.path));
+      return this.schemaPaths.filter(p => !currentPaths.has(p.path));
+    },
+    filteredPathsToAdd() {
+      const available = this.availablePathsToAdd;
+      const query = (this.addFieldFilterText || '').trim().toLowerCase();
+      if (!query) return available;
+      return available.filter(p => p.path.toLowerCase().includes(query));
+    },
+    tableDisplayPaths() {
+      return this.filteredPaths.length > 0 ? this.filteredPaths : this.schemaPaths;
     }
   },
   methods: {
@@ -7334,6 +7461,24 @@ module.exports = app => app.component('models', {
         this.selectedGeoField = storedField;
       }
     },
+    loadShowRowNumbersPreference() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      const stored = window.localStorage.getItem(SHOW_ROW_NUMBERS_STORAGE_KEY);
+      if (stored === '0') {
+        this.showRowNumbers = false;
+      } else if (stored === '1') {
+        this.showRowNumbers = true;
+      }
+    },
+    toggleRowNumbers() {
+      this.showRowNumbers = !this.showRowNumbers;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(SHOW_ROW_NUMBERS_STORAGE_KEY, this.showRowNumbers ? '1' : '0');
+      }
+      this.showActionsMenu = false;
+    },
     setOutputType(type) {
       if (type !== 'json' && type !== 'table' && type !== 'map') {
         return;
@@ -7529,6 +7674,22 @@ 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) {
+        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);
+        }
+      }
+      if (fieldsParam) {
+        params.fields = fieldsParam;
+      }
+
       return params;
     },
     setSearchTextFromRoute() {
@@ -7542,20 +7703,35 @@ module.exports = app => app.component('models', {
       this.status = 'loading';
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
       this.setSearchTextFromRoute();
-      if (this.$route.query?.sort) {
-        const sort = eval(`(${this.$route.query.sort})`);
-        const path = Object.keys(sort)[0];
-        const num = Object.values(sort)[0];
-        this.sortDocs(num, path);
+      // Avoid eval() on user-controlled query params.
+      // Use explicit sortKey + sortDirection query params.
+      const sortKey = this.$route.query?.sortKey;
+      const sortDirectionRaw = this.$route.query?.sortDirection;
+      const sortDirection = typeof sortDirectionRaw === 'string' ? Number(sortDirectionRaw) : sortDirectionRaw;
+
+      if (typeof sortKey === 'string' && sortKey.trim().length > 0 &&
+        (sortDirection === 1 || sortDirection === -1)) {
+        for (const key in this.sortBy) {
+          delete this.sortBy[key];
+        }
+        this.sortBy[sortKey] = sortDirection;
+        // Normalize to new params and remove legacy key if present.
+        this.query.sortKey = sortKey;
+        this.query.sortDirection = sortDirection;
+        delete this.query.sort;
       }
-
-
       if (this.currentModel != null) {
         await this.getDocuments();
       }
       if (this.$route.query?.fields) {
-        const filter = this.$route.query.fields.split(',');
-        this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
+        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();
+            this.saveProjectionPreference();
+          }
+        }
       }
       this.status = 'loaded';
 
@@ -7575,10 +7751,8 @@ module.exports = app => app.component('models', {
       this.shouldShowCreateModal = false;
       await this.getDocuments();
     },
-    initializeDocumentData() {
-      this.shouldShowCreateModal = true;
-    },
     filterDocument(doc) {
+      if (this.filteredPaths.length === 0) return doc;
       const filteredDoc = {};
       for (let i = 0; i < this.filteredPaths.length; i++) {
         const path = this.filteredPaths[i].path;
@@ -7600,23 +7774,47 @@ module.exports = app => app.component('models', {
       if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
-      const container = this.$refs.documentsList;
-      if (container.scrollHeight - container.clientHeight - 100 < container.scrollTop) {
-        this.status = 'loading';
-        const params = this.buildDocumentFetchParams({ skip: this.documents.length });
+      // Infinite scroll only applies to table/json views.
+      if (this.outputType !== 'table' && this.outputType !== 'json') {
+        return;
+      }
+      if (this.documents.length === 0) {
+        return;
+      }
+      const container = this.outputType === 'table'
+        ? this.$refs.documentsScrollContainer
+        : this.$refs.documentsContainerScroll;
+      if (!container || container.scrollHeight <= 0) {
+        return;
+      }
+      const threshold = 150;
+      const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - threshold;
+      if (!nearBottom) {
+        return;
+      }
+      this.loadingMore = true;
+      this.status = 'loading';
+      try {
+        const skip = this.documents.length;
+        const params = this.buildDocumentFetchParams({ skip });
         const { docs } = await api.Model.getDocuments(params);
         if (docs.length < limit) {
           this.loadedAllDocs = true;
         }
         this.documents.push(...docs);
+      } finally {
+        this.loadingMore = false;
         this.status = 'loaded';
       }
+      this.$nextTick(() => this.checkIfScrolledToBottom());
     },
     async sortDocs(num, path) {
       let sorted = false;
       if (this.sortBy[path] == num) {
         sorted = true;
         delete this.query.sort;
+        delete this.query.sortKey;
+        delete this.query.sortDirection;
         this.$router.push({ query: this.query });
       }
       for (const key in this.sortBy) {
@@ -7624,9 +7822,13 @@ module.exports = app => app.component('models', {
       }
       if (!sorted) {
         this.sortBy[path] = num;
-        this.query.sort = `{${path}:${num}}`;
+        this.query.sortKey = path;
+        this.query.sortDirection = num;
+        delete this.query.sort;
         this.$router.push({ query: this.query });
       }
+      this.documents = [];
+      this.loadedAllDocs = false;
       await this.loadMoreDocuments();
     },
     async search(searchText) {
@@ -7663,6 +7865,23 @@ module.exports = app => app.component('models', {
     closeActionsMenu() {
       this.showActionsMenu = false;
     },
+    toggleProjectionMenu() {
+      const next = !this.isProjectionMenuSelected;
+      this.isProjectionMenuSelected = next;
+
+      // Because the route-view is keyed on `$route.fullPath`, query changes remount this component.
+      // 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';
+        if (this.outputType === 'map') {
+          this.setOutputType('json');
+        }
+      } else {
+        delete this.query[PROJECTION_MODE_QUERY_KEY];
+      }
+
+      this.$router.push({ query: this.query });
+    },
     async openCollectionInfo() {
       this.closeActionsMenu();
       this.shouldShowCollectionInfoModal = true;
@@ -7763,160 +7982,401 @@ module.exports = app => app.component('models', {
       }
       return formatValue(value / 1000000000, 'B');
     },
-    checkIndexLocation(indexName) {
-      if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
-        return 'text-gray-500';
-      } else if (this.schemaIndexes.find(x => x.name == indexName)) {
-        return 'text-forest-green-500';
-      } else {
-        return 'text-valencia-500';
-      }
-    },
     async getDocuments() {
-      // Track recently viewed model
-      this.trackRecentModel(this.currentModel);
-
-      // Clear previous data
-      this.documents = [];
-      this.schemaPaths = [];
-      this.numDocuments = null;
-      this.loadedAllDocs = false;
-      this.lastSelectedIndex = null;
+      this.loadingMore = false;
+      this.status = 'loading';
+      try {
+        // Track recently viewed model
+        this.trackRecentModel(this.currentModel);
+
+        // Clear previous data
+        this.documents = [];
+        this.schemaPaths = [];
+        this.numDocuments = null;
+        this.loadedAllDocs = false;
+        this.lastSelectedIndex = null;
 
-      let docsCount = 0;
-      let schemaPathsReceived = false;
+        let docsCount = 0;
+        let schemaPathsReceived = false;
 
-      // Use async generator to stream SSEs
-      const params = this.buildDocumentFetchParams();
-      for await (const event of api.Model.getDocumentsStream(params)) {
-        if (event.schemaPaths && !schemaPathsReceived) {
+        // Use async generator to stream SSEs
+        const params = this.buildDocumentFetchParams();
+        for await (const event of api.Model.getDocumentsStream(params)) {
+          if (event.schemaPaths && !schemaPathsReceived) {
           // Sort schemaPaths with _id first
-          this.schemaPaths = Object.keys(event.schemaPaths).sort((k1, k2) => {
-            if (k1 === '_id' && k2 !== '_id') {
-              return -1;
-            }
-            if (k1 !== '_id' && k2 === '_id') {
-              return 1;
+            this.schemaPaths = Object.keys(event.schemaPaths).sort((k1, k2) => {
+              if (k1 === '_id' && k2 !== '_id') {
+                return -1;
+              }
+              if (k1 !== '_id' && k2 === '_id') {
+                return 1;
+              }
+              return 0;
+            }).map(key => event.schemaPaths[key]);
+            this.shouldExport = {};
+            for (const { path } of this.schemaPaths) {
+              this.shouldExport[path] = true;
+            }
+            const shouldUseSavedProjection = this.isProjectionMenuSelected === true;
+            const savedPaths = shouldUseSavedProjection ? this.loadProjectionPreference() : null;
+            if (savedPaths === null) {
+              this.applyDefaultProjection(event.suggestedFields);
+              if (shouldUseSavedProjection) {
+                this.saveProjectionPreference();
+              }
+            } else if (Array.isArray(savedPaths) && savedPaths.length === 0) {
+              this.filteredPaths = [];
+              this.projectionText = '';
+              if (shouldUseSavedProjection) {
+                this.saveProjectionPreference();
+              }
+            } else if (savedPaths && savedPaths.length > 0) {
+              this.filteredPaths = savedPaths
+                .map(path => this.schemaPaths.find(p => p.path === path))
+                .filter(Boolean);
+              if (this.filteredPaths.length === 0) {
+                this.applyDefaultProjection(event.suggestedFields);
+                if (shouldUseSavedProjection) {
+                  this.saveProjectionPreference();
+                }
+              }
+            } else {
+              this.applyDefaultProjection(event.suggestedFields);
+              if (shouldUseSavedProjection) {
+                this.saveProjectionPreference();
+              }
             }
-            return 0;
-          }).map(key => event.schemaPaths[key]);
-          this.shouldExport = {};
-          for (const { path } of this.schemaPaths) {
-            this.shouldExport[path] = true;
+            this.selectedPaths = [...this.filteredPaths];
+            this.syncProjectionFromPaths();
+            schemaPathsReceived = true;
+          }
+          if (event.numDocs !== undefined) {
+            this.numDocuments = event.numDocs;
+          }
+          if (event.document) {
+            this.documents.push(event.document);
+            docsCount++;
+          }
+          if (event.message) {
+            throw new Error(event.message);
           }
-          this.filteredPaths = [...this.schemaPaths];
-          this.selectedPaths = [...this.schemaPaths];
-          schemaPathsReceived = true;
-        }
-        if (event.numDocs !== undefined) {
-          this.numDocuments = event.numDocs;
-        }
-        if (event.document) {
-          this.documents.push(event.document);
-          docsCount++;
-        }
-        if (event.message) {
-          this.status = 'loaded';
-          throw new Error(event.message);
         }
-      }
 
-      if (docsCount < limit) {
-        this.loadedAllDocs = true;
+        if (docsCount < limit) {
+          this.loadedAllDocs = true;
+        }
+      } finally {
+        this.status = 'loaded';
       }
+      this.$nextTick(() => {
+        this.restoreScrollPosition();
+        if (!this.suppressScrollCheck) {
+          this.checkIfScrolledToBottom();
+        }
+        this.suppressScrollCheck = false;
+      });
     },
     async loadMoreDocuments() {
-      let docsCount = 0;
-      let numDocsReceived = false;
+      const isLoadingMore = this.documents.length > 0;
+      if (isLoadingMore) {
+        this.loadingMore = true;
+      }
+      this.status = 'loading';
+      try {
+        let docsCount = 0;
+        let numDocsReceived = false;
 
-      // Use async generator to stream SSEs
-      const params = this.buildDocumentFetchParams({ skip: this.documents.length });
-      for await (const event of api.Model.getDocumentsStream(params)) {
-        if (event.numDocs !== undefined && !numDocsReceived) {
-          this.numDocuments = event.numDocs;
-          numDocsReceived = true;
+        // Use async generator to stream SSEs
+        const params = this.buildDocumentFetchParams({ skip: this.documents.length });
+        for await (const event of api.Model.getDocumentsStream(params)) {
+          if (event.numDocs !== undefined && !numDocsReceived) {
+            this.numDocuments = event.numDocs;
+            numDocsReceived = true;
+          }
+          if (event.document) {
+            this.documents.push(event.document);
+            docsCount++;
+          }
+          if (event.message) {
+            throw new Error(event.message);
+          }
         }
-        if (event.document) {
-          this.documents.push(event.document);
-          docsCount++;
+
+        if (docsCount < limit) {
+          this.loadedAllDocs = true;
         }
-        if (event.message) {
-          this.status = 'loaded';
-          throw new Error(event.message);
+      } finally {
+        this.loadingMore = false;
+        this.status = 'loaded';
+      }
+      this.$nextTick(() => this.checkIfScrolledToBottom());
+    },
+    applyDefaultProjection(suggestedFields) {
+      if (Array.isArray(suggestedFields) && suggestedFields.length > 0) {
+        this.filteredPaths = suggestedFields
+          .map(path => this.schemaPaths.find(p => p.path === path))
+          .filter(Boolean);
+      }
+      if (!this.filteredPaths || this.filteredPaths.length === 0) {
+        this.filteredPaths = this.schemaPaths.slice(0, DEFAULT_FIRST_N_FIELDS);
+      }
+      if (this.filteredPaths.length === 0) {
+        this.filteredPaths = this.schemaPaths.filter(p => p.path === '_id');
+      }
+    },
+    loadProjectionPreference() {
+      if (typeof window === 'undefined' || !window.localStorage || !this.currentModel) {
+        return null;
+      }
+      const key = PROJECTION_STORAGE_KEY_PREFIX + this.currentModel;
+      const stored = window.localStorage.getItem(key);
+      if (stored === null || stored === undefined) {
+        return null;
+      }
+      if (stored === '') {
+        return [];
+      }
+      try {
+        const parsed = JSON.parse(stored);
+        if (Array.isArray(parsed)) {
+          return parsed.map(x => String(x).trim()).filter(Boolean);
         }
+      } catch (e) {
+        return null;
       }
-
-      if (docsCount < limit) {
-        this.loadedAllDocs = true;
+      return null;
+    },
+    saveProjectionPreference() {
+      if (typeof window === 'undefined' || !window.localStorage || !this.currentModel) {
+        return;
       }
+      const key = PROJECTION_STORAGE_KEY_PREFIX + this.currentModel;
+      const paths = this.filteredPaths.map(p => p.path);
+      window.localStorage.setItem(key, JSON.stringify(paths));
     },
-    addOrRemove(path) {
-      const exists = this.selectedPaths.findIndex(x => x.path == path.path);
-      if (exists > 0) { // remove
-        this.selectedPaths.splice(exists, 1);
-      } else { // add
-        this.selectedPaths.push(path);
-        this.selectedPaths = Object.keys(this.selectedPaths).sort((k1, k2) => {
-          if (k1 === '_id' && k2 !== '_id') {
-            return -1;
-          }
-          if (k1 !== '_id' && k2 === '_id') {
-            return 1;
+    clearProjection() {
+      // Keep current filter input in sync with the URL so projection reset
+      // does not unintentionally wipe the filter on remount.
+      this.syncFilterToQuery();
+      this.filteredPaths = [];
+      this.selectedPaths = [];
+      this.projectionText = '';
+      this.updateProjectionQuery();
+      this.saveProjectionPreference();
+    },
+    resetFilter() {
+      // Reuse the existing "apply filter + update URL" flow.
+      this.search('');
+    },
+    syncFilterToQuery() {
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        this.query.search = this.searchText;
+      } else {
+        delete this.query.search;
+      }
+    },
+    applyDefaultProjectionColumns() {
+      if (!this.schemaPaths || this.schemaPaths.length === 0) return;
+      const pathNames = this.schemaPaths.map(p => p.path);
+      this.applyDefaultProjection(pathNames.slice(0, DEFAULT_FIRST_N_FIELDS));
+      this.selectedPaths = [...this.filteredPaths];
+      this.syncProjectionFromPaths();
+      this.updateProjectionQuery();
+      this.saveProjectionPreference();
+    },
+    initProjection(ev) {
+      if (!this.projectionText || !this.projectionText.trim()) {
+        this.projectionText = '';
+        this.$nextTick(() => {
+          if (ev && ev.target) {
+            ev.target.setSelectionRange(0, 0);
           }
-          return 0;
-        }).map(key => this.selectedPaths[key]);
+        });
       }
     },
-    openFieldSelection() {
-      if (this.$route.query?.fields) {
-        this.selectedPaths.length = 0;
-        console.log('there are fields in play', this.$route.query.fields);
-        const fields = this.$route.query.fields.split(',');
-        for (let i = 0; i < fields.length; i++) {
-          this.selectedPaths.push({ path: fields[i] });
+    syncProjectionFromPaths() {
+      if (this.filteredPaths.length === 0) {
+        this.projectionText = '';
+        return;
+      }
+      // String-only projection syntax: `field1 field2` and `-field` for exclusions.
+      // Since `filteredPaths` represents the final include set, we serialize as space-separated fields.
+      this.projectionText = this.filteredPaths.map(p => p.path).join(' ');
+    },
+    parseProjectionInput(text) {
+      if (!text || typeof text !== 'string') {
+        return [];
+      }
+      const trimmed = text.trim();
+      if (!trimmed) {
+        return [];
+      }
+      const normalizeKey = (key) => String(key).trim();
+
+      // String-only projection syntax:
+      //   name email
+      //   -password   (exclusion-only)
+      //   +email      (inclusion-only)
+      //
+      // Brace/object syntax is intentionally NOT supported.
+      if (trimmed.startsWith('{') || trimmed.endsWith('}')) {
+        return null;
+      }
+
+      const tokens = trimmed.split(/[,\s]+/).filter(Boolean);
+      if (tokens.length === 0) return [];
+
+      const includeKeys = [];
+      const excludeKeys = [];
+
+      for (const rawToken of tokens) {
+        const token = rawToken.trim();
+        if (!token) continue;
+
+        const prefix = token[0];
+        if (prefix === '-') {
+          const path = token.slice(1).trim();
+          if (!path) return null;
+          excludeKeys.push(path);
+        } else if (prefix === '+') {
+          const path = token.slice(1).trim();
+          if (!path) return null;
+          includeKeys.push(path);
+        } else {
+          includeKeys.push(token);
         }
-      } else {
-        this.selectedPaths = [{ path: '_id' }];
       }
-      this.shouldShowFieldModal = true;
+
+      if (includeKeys.length > 0 && excludeKeys.length > 0) {
+        // Support subtractive edits on an existing projection string, e.g.
+        // `name email createdAt -email` -> `name createdAt`.
+        const includeSet = new Set(includeKeys.map(normalizeKey));
+        for (const path of excludeKeys) {
+          includeSet.delete(normalizeKey(path));
+        }
+        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));
+      }
+
+      return includeKeys.map(normalizeKey);
     },
-    filterDocuments() {
-      if (this.selectedPaths.length > 0) {
-        this.filteredPaths = [...this.selectedPaths];
+    applyProjectionFromInput() {
+      const paths = this.parseProjectionInput(this.projectionText);
+      if (paths === null) {
+        this.syncProjectionFromPaths();
+        return;
+      }
+      if (paths.length === 0) {
+        this.filteredPaths = this.schemaPaths.filter(p => p.path === '_id');
+        if (this.filteredPaths.length === 0 && this.schemaPaths.length > 0) {
+          const idPath = this.schemaPaths.find(p => p.path === '_id');
+          this.filteredPaths = idPath ? [idPath] : [this.schemaPaths[0]];
+        }
       } else {
-        this.filteredPaths.length = 0;
+        this.filteredPaths = paths.map(path => this.schemaPaths.find(p => p.path === path)).filter(Boolean);
+        const validPaths = new Set(this.schemaPaths.map(p => p.path));
+        for (const path of paths) {
+          if (validPaths.has(path) && !this.filteredPaths.find(p => p.path === path)) {
+            this.filteredPaths.push(this.schemaPaths.find(p => p.path === path));
+          }
+        }
+        if (this.filteredPaths.length === 0) {
+          this.filteredPaths = this.schemaPaths.filter(p => p.path === '_id');
+        }
       }
-      this.shouldShowFieldModal = false;
-      const selectedParams = this.filteredPaths.map(x => x.path).join(',');
-      this.query.fields = selectedParams;
-      this.$router.push({ query: this.query });
-    },
-    resetDocuments() {
       this.selectedPaths = [...this.filteredPaths];
-      this.query.fields = {};
+      this.syncProjectionFromPaths();
+      this.updateProjectionQuery();
+      this.saveProjectionPreference();
+    },
+    updateProjectionQuery() {
+      const paths = this.filteredPaths.map(x => x.path).filter(Boolean);
+      if (paths.length > 0) {
+        this.query.fields = JSON.stringify(paths);
+      } else {
+        delete this.query.fields;
+      }
       this.$router.push({ query: this.query });
-      this.shouldShowFieldModal = false;
     },
-    deselectAll() {
-      this.selectedPaths = [];
+    removeField(schemaPath) {
+      if (this.outputType === 'table' && this.$refs.documentsScrollContainer) {
+        this.scrollTopToRestore = this.$refs.documentsScrollContainer.scrollTop;
+        this.suppressScrollCheck = true;
+        // Persist for remount caused by query changes.
+        if (typeof window !== 'undefined') {
+          window.__studioModelsScrollTopToRestore = this.scrollTopToRestore;
+          window.__studioModelsSuppressScrollCheck = true;
+        }
+      }
+      const index = this.filteredPaths.findIndex(p => p.path === schemaPath.path);
+      if (index !== -1) {
+        this.filteredPaths.splice(index, 1);
+        if (this.filteredPaths.length === 0) {
+          const idPath = this.schemaPaths.find(p => p.path === '_id');
+          this.filteredPaths = idPath ? [idPath] : [];
+        }
+        this.syncProjectionFromPaths();
+        this.updateProjectionQuery();
+        this.saveProjectionPreference();
+      }
+    },
+    addField(schemaPath) {
+      if (!this.filteredPaths.find(p => p.path === schemaPath.path)) {
+        if (this.outputType === 'table' && this.$refs.documentsScrollContainer) {
+          this.scrollTopToRestore = this.$refs.documentsScrollContainer.scrollTop;
+          this.suppressScrollCheck = true;
+          // Persist for remount caused by query changes.
+          if (typeof window !== 'undefined') {
+            window.__studioModelsScrollTopToRestore = this.scrollTopToRestore;
+            window.__studioModelsSuppressScrollCheck = true;
+          }
+        }
+        this.filteredPaths.push(schemaPath);
+        this.filteredPaths.sort((a, b) => {
+          if (a.path === '_id') return -1;
+          if (b.path === '_id') return 1;
+          return 0;
+        });
+        this.syncProjectionFromPaths();
+        this.updateProjectionQuery();
+        this.saveProjectionPreference();
+        this.showAddFieldDropdown = false;
+        this.addFieldFilterText = '';
+      }
     },
-    selectAll() {
-      this.selectedPaths = [...this.schemaPaths];
+    restoreScrollPosition() {
+      if (this.outputType !== 'table') return;
+      if (this.scrollTopToRestore == null) return;
+      const container = this.$refs.documentsScrollContainer;
+      if (!container) return;
+      container.scrollTop = this.scrollTopToRestore;
+      this.scrollTopToRestore = null;
     },
-    isSelected(path) {
-      return this.selectedPaths.find(x => x.path == path);
+    toggleAddFieldDropdown() {
+      this.showAddFieldDropdown = !this.showAddFieldDropdown;
+      if (this.showAddFieldDropdown) {
+        this.addFieldFilterText = '';
+        this.$nextTick(() => this.$refs.addFieldFilterInput?.focus());
+      }
     },
     getComponentForPath(schemaPath) {
+      if (!schemaPath || typeof schemaPath !== 'object') {
+        return 'list-mixed';
+      }
       if (schemaPath.instance === 'Array') {
         return 'list-array';
       }
       if (schemaPath.instance === 'String') {
         return 'list-string';
       }
-      if (schemaPath.instance == 'Embedded') {
+      if (schemaPath.instance === 'Embedded') {
         return 'list-subdocument';
       }
-      if (schemaPath.instance == 'Mixed') {
+      if (schemaPath.instance === 'Mixed') {
         return 'list-mixed';
       }
       return 'list-default';
@@ -7941,6 +8401,31 @@ module.exports = app => app.component('models', {
       this.edittingDoc = null;
       this.$toast.success('Document updated!');
     },
+    copyCellValue(value) {
+      const text = value == null ? '' : (typeof value === 'object' ? JSON.stringify(value) : String(value));
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(() => {
+          this.$toast.success('Copied to clipboard');
+        }).catch(() => {
+          this.fallbackCopyText(text);
+        });
+      } else {
+        this.fallbackCopyText(text);
+      }
+    },
+    fallbackCopyText(text) {
+      try {
+        const el = document.createElement('textarea');
+        el.value = text;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+        this.$toast.success('Copied to clipboard');
+      } catch (err) {
+        this.$toast.error('Copy failed');
+      }
+    },
     handleDocumentClick(document, event) {
       if (this.selectMultiple) {
         this.handleDocumentSelection(document, event);
@@ -8308,7 +8793,7 @@ module.exports = app => app.component('navbar', {
     showFlyout: false,
     darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark'
   }),
-  mounted: function () {
+  mounted: function() {
     window.navbar = this;
     const mobileMenuMask = document.querySelector('#mobile-menu-mask');
     const mobileMenu = document.querySelector('#mobile-menu');
@@ -9985,7 +10470,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _vue_shared__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/reactivity v3.5.30
+* @vue/reactivity v3.5.31
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -11578,16 +12063,16 @@ function toRefs(object) {
   return ret;
 }
 class ObjectRefImpl {
-  constructor(_object, _key, _defaultValue) {
+  constructor(_object, key, _defaultValue) {
     this._object = _object;
-    this._key = _key;
     this._defaultValue = _defaultValue;
     this["__v_isRef"] = true;
     this._value = void 0;
+    this._key = (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isSymbol)(key) ? key : String(key);
     this._raw = toRaw(_object);
     let shallow = true;
     let obj = _object;
-    if (!(0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isArray)(_object) || !(0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isIntegerKey)(String(_key))) {
+    if (!(0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isArray)(_object) || (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isSymbol)(this._key) || !(0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isIntegerKey)(this._key)) {
       do {
         shallow = !isProxy(obj) || isShallow(obj);
       } while (shallow && (obj = obj["__v_raw"]));
@@ -12132,7 +12617,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_reactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/reactivity */ "./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
 /* harmony import */ var _vue_shared__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/runtime-core v3.5.30
+* @vue/runtime-core v3.5.31
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -12579,6 +13064,13 @@ function checkRecursiveUpdates(seen, fn) {
 }
 
 let isHmrUpdating = false;
+const setHmrUpdating = (v) => {
+  try {
+    return isHmrUpdating;
+  } finally {
+    isHmrUpdating = v;
+  }
+};
 const hmrDirtyComponents = /* @__PURE__ */ new Map();
 if (true) {
   (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.getGlobalThis)().__VUE_HMR_RUNTIME__ = {
@@ -13165,9 +13657,10 @@ const TeleportImpl = {
         mount(container, mainAnchor);
         updateCssVars(n2, true);
       }
-      if (isTeleportDeferred(n2.props)) {
+      if (isTeleportDeferred(n2.props) || parentSuspense && parentSuspense.pendingBranch) {
         n2.el.__isMounted = false;
         queuePostRenderEffect(() => {
+          if (n2.el.__isMounted !== false) return;
           mountToTarget();
           delete n2.el.__isMounted;
         }, parentSuspense);
@@ -13175,7 +13668,12 @@ const TeleportImpl = {
         mountToTarget();
       }
     } else {
-      if (isTeleportDeferred(n2.props) && n1.el.__isMounted === false) {
+      n2.el = n1.el;
+      n2.targetStart = n1.targetStart;
+      const mainAnchor = n2.anchor = n1.anchor;
+      const target = n2.target = n1.target;
+      const targetAnchor = n2.targetAnchor = n1.targetAnchor;
+      if (n1.el.__isMounted === false) {
         queuePostRenderEffect(() => {
           TeleportImpl.process(
             n1,
@@ -13192,11 +13690,6 @@ const TeleportImpl = {
         }, parentSuspense);
         return;
       }
-      n2.el = n1.el;
-      n2.targetStart = n1.targetStart;
-      const mainAnchor = n2.anchor = n1.anchor;
-      const target = n2.target = n1.target;
-      const targetAnchor = n2.targetAnchor = n1.targetAnchor;
       const wasDisabled = isTeleportDisabled(n1.props);
       const currentContainer = wasDisabled ? container : target;
       const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
@@ -13661,7 +14154,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
       callHook(hook, [el]);
     },
     enter(el) {
-      if (leavingVNodesCache[key] === vnode) return;
+      if (!isHmrUpdating && leavingVNodesCache[key] === vnode) return;
       let hook = onEnter;
       let afterHook = onAfterEnter;
       let cancelHook = onEnterCancelled;
@@ -16909,11 +17402,12 @@ function hasPropValueChanged(nextProps, prevProps, key) {
   }
   return nextProp !== prevProp;
 }
-function updateHOCHostEl({ vnode, parent }, el) {
+function updateHOCHostEl({ vnode, parent, suspense }, el) {
   while (parent) {
     const root = parent.subTree;
     if (root.suspense && root.suspense.activeBranch === vnode) {
-      root.el = vnode.el;
+      root.suspense.vnode.el = root.el = el;
+      vnode = root;
     }
     if (root === vnode) {
       (vnode = parent.vnode).el = el;
@@ -16922,6 +17416,9 @@ function updateHOCHostEl({ vnode, parent }, el) {
       break;
     }
   }
+  if (suspense && suspense.activeBranch === vnode) {
+    suspense.vnode.el = el;
+  }
 }
 
 const internalObjectProto = {};
@@ -17790,10 +18287,17 @@ function baseCreateRenderer(options, createHydrationFns) {
     }
     hostInsert(el, container, anchor);
     if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) {
+      const isHmr =  true && isHmrUpdating;
       queuePostRenderEffect(() => {
-        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
-        needCallTransitionHooks && transition.enter(el);
-        dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+        let prev;
+        if (true) prev = setHmrUpdating(isHmr);
+        try {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+          needCallTransitionHooks && transition.enter(el);
+          dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+        } finally {
+          if (true) setHmrUpdating(prev);
+        }
       }, parentSuspense);
     }
   };
@@ -18713,7 +19217,8 @@ function baseCreateRenderer(options, createHydrationFns) {
       shapeFlag,
       patchFlag,
       dirs,
-      cacheIndex
+      cacheIndex,
+      memo
     } = vnode;
     if (patchFlag === -2) {
       optimized = false;
@@ -18775,10 +19280,14 @@ function baseCreateRenderer(options, createHydrationFns) {
         remove(vnode);
       }
     }
-    if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {
+    const shouldInvalidateMemo = memo != null && cacheIndex == null;
+    if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs || shouldInvalidateMemo) {
       queuePostRenderEffect(() => {
         vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
         shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");
+        if (shouldInvalidateMemo) {
+          vnode.el = null;
+        }
       }, parentSuspense);
     }
   };
@@ -19332,6 +19841,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
     pendingId: suspenseId++,
     timeout: typeof timeout === "number" ? timeout : -1,
     activeBranch: null,
+    isFallbackMountPending: false,
     pendingBranch: null,
     isInFallback: !isHydrating,
     isHydrating,
@@ -19381,7 +19891,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
             }
           };
         }
-        if (activeBranch) {
+        if (activeBranch && !suspense.isFallbackMountPending) {
           if (parentNode(activeBranch.el) === container2) {
             anchor = next(activeBranch);
           }
@@ -19394,6 +19904,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
           move(pendingBranch, container2, anchor, 0);
         }
       }
+      suspense.isFallbackMountPending = false;
       setActiveBranch(suspense, pendingBranch);
       suspense.pendingBranch = null;
       suspense.isInFallback = false;
@@ -19429,6 +19940,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
       triggerEvent(vnode2, "onFallback");
       const anchor2 = next(activeBranch);
       const mountFallback = () => {
+        suspense.isFallbackMountPending = false;
         if (!suspense.isInFallback) {
           return;
         }
@@ -19448,6 +19960,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
       };
       const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === "out-in";
       if (delayEnter) {
+        suspense.isFallbackMountPending = true;
         activeBranch.transition.afterLeave = mountFallback;
       }
       suspense.isInFallback = true;
@@ -19998,6 +20511,10 @@ function mergeProps(...args) {
         const incoming = toMerge[key];
         if (incoming && existing !== incoming && !((0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isArray)(existing) && existing.includes(incoming))) {
           ret[key] = existing ? [].concat(existing, incoming) : incoming;
+        } else if (incoming == null && existing == null && // mergeProps({ 'onUpdate:modelValue': undefined }) should not retain
+        // the model listener.
+        !(0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isModelListener)(key)) {
+          ret[key] = incoming;
         }
       } else if (key !== "") {
         ret[key] = toMerge[key];
@@ -20684,7 +21201,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.30";
+const version = "3.5.31";
 const warn =  true ? warn$1 : 0;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools =  true ? devtools$1 : 0;
@@ -20895,7 +21412,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_runtime_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/runtime-core */ "./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
 /* harmony import */ var _vue_runtime_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/runtime-dom v3.5.30
+* @vue/runtime-dom v3.5.31
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -22472,7 +22989,8 @@ const vModelText = {
     if (elValue === newValue) {
       return;
     }
-    if (document.activeElement === el && el.type !== "range") {
+    const rootNode = el.getRootNode();
+    if ((rootNode instanceof Document || rootNode instanceof ShadowRoot) && rootNode.activeElement === el && el.type !== "range") {
       if (lazy && value === oldValue) {
         return;
       }
@@ -22966,7 +23484,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   toTypeString: () => (/* binding */ toTypeString)
 /* harmony export */ });
 /**
-* @vue/shared v3.5.30
+* @vue/shared v3.5.31
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -48489,7 +49007,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_runtime_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/runtime-dom */ "./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
 /* harmony import */ var _vue_runtime_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/runtime-dom */ "./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js");
 /**
-* vue v3.5.30
+* vue v3.5.31
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -50160,7 +50678,7 @@ module.exports = ".list-mixed pre {\n  max-height: 6.5em;\n  max-width: 30em;\n}
 (module) {
 
 "use strict";
-module.exports = "<div class=\"list-mixed tooltip\">\n  <pre>\n    <code ref=\"MixedCode\" class=\"language-javascript\">{{shortenValue}}</code>\n    <span class=\"tooltiptext\" @click.stop=\"copyText(value)\">copy &#x1F4CB;</span>\n  </pre>\n</div>\n  ";
+module.exports = "<div class=\"list-mixed tooltip\">\n  <pre>\n    <code ref=\"MixedCode\" class=\"language-javascript\">{{shortenValue}}</code>\n  </pre>\n</div>\n  ";
 
 /***/ },
 
@@ -50182,7 +50700,7 @@ module.exports = ".list-string {\n  display: inline;\n  max-width: 300px;\n}";
 (module) {
 
 "use strict";
-module.exports = "<div class=\"list-string tooltip\" ref=\"itemData\">\n  {{displayValue}}\n  <span class=\"tooltiptext\" @click.stop=\"copyText(value)\">copy &#x1F4CB;</span>\n</div>";
+module.exports = "<div class=\"list-string tooltip\" ref=\"itemData\">\n  {{displayValue}}\n</div>";
 
 /***/ },
 
@@ -50259,7 +50777,7 @@ module.exports = "<div v-if=\"show\" class=\"fixed inset-0 z-[9999]\">\n  <div c
 (module) {
 
 "use strict";
-module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n  color: black;\n  background-color: #eee;\n}\n\n.models .model-selector {\n  flex-grow: 0;\n  padding: 15px;\n  padding-top: 0px;\n}\n\n.models h1 {\n  margin-top: 0px;\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: scroll;\n  max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n  /* max-width: -moz-fit-content;\n  max-width: fit-content; */\n  width: 100%;\n  table-layout: auto;\n  font-size: small;\n  padding: 0;\n  margin-right: 1em;\n  white-space: nowrap;\n  z-index: -1;\n  border-collapse: collapse;\n  line-height: 1.5em;\n}\n\n.models .documents table th {\n  position: sticky;\n  top: 42px;\n  z-index: 1;\n}\n\n.models .documents table th:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: -1px;\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n  color: black;\n  border-spacing: 0px 0px;\n}\n\n.models .documents table th {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n  height: 48px;\n}\n\n.models .documents table td {\n  border-bottom: thin solid rgba(0, 0, 0, 0.12);\n  text-align: left;\n}\n\n.models textarea {\n  font-size: 1.2em;\n}\n\n.models .path-type {\n  color: rgba(0, 0, 0, 0.36);\n  font-size: 0.8em;\n}\n\n.models .documents-menu {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  padding: 4px;\n  display: flex;\n}\n\n.models .documents-menu .search-input {\n  flex-grow: 1;\n  align-items: center;\n}\n\n.models .search-input input {\n  padding: 0.25em 0.5em;\n  font-size: 1.1em;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .documents .buttons {\n  display: inline-flex;\n  justify-content: space-around;\n  align-items: center;\n}\n";
+module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100% - 56px);\n}\n\n.models .documents {\n  flex-grow: 1;\n  overflow: visible;\n  max-height: calc(100vh - 56px);\n  display: flex;\n  flex-direction: column;\n}\n\n.models .documents-container {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n}\n\n.models .documents-menu {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n}\n\n.models .loader {\n  width: 100%;\n  text-align: center;\n}\n\n.models .loader img {\n  height: 4em;\n}\n\n.models .loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-page);\n  opacity: 0.9;\n}\n\n/* Table cell: copy icon only copies; rest of cell opens document */\n.models .table-cell-copy {\n  cursor: pointer;\n}\n";
 
 /***/ },
 
@@ -50270,7 +50788,7 @@ 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=\"{ 'bg-page0 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-primary hover:bg-primary-hover' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-primary-text 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-20\"\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=\"openFieldSelection(); 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                  Projection\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              </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>\n    <div class=\"documents-container relative\">\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        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead class=\"bg-slate-50\">\n          <th v-for=\"path in filteredPaths\" @click=\"addPathFilter(path.path)\" class=\"bg-slate-50 cursor-pointer p-3\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" class=\"bg-surface hover:bg-slate-50\">\n            <td v-for=\"schemaPath in filteredPaths\" class=\"p-3 cursor-pointer\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\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          <button\n            type=\"button\"\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            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\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'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\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=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-edge-strong text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-content-secondary grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" 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\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 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-green-600\" >Cancel</button>\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-page0 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\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        </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          <button\n            type=\"button\"\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            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\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";
 
 /***/ },
 
@@ -50314,7 +50832,7 @@ module.exports = "<div class=\"w-full h-full flex items-center justify-center\">
 (module) {
 
 "use strict";
-module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'\">\n    <img src=\"images/loader.gif\" alt=\"Loading\" />\n  </div>\n  <div v-else-if=\"status === 'error'\" class=\"text-red-600\">\n    {{ errorMessage }}\n  </div>\n  <template v-else-if=\"taskGroup\">\n    <div class=\"pb-24\">\n      <router-link :to=\"{ name: 'tasks' }\" class=\"inline-flex items-center gap-1 text-gray-500 hover:text-gray-700 mb-4\">\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n        </svg>\n        Back to Task Groups\n      </router-link>\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Filter by Date:</label>\n        <select v-model=\"selectedRange\" @change=\"updateDateRange\" class=\"border-gray-300 rounded-md shadow-sm w-full p-2 max-w-xs\">\n          <option v-for=\"option in dateFilters\" :key=\"option.value\" :value=\"option.value\">\n            {{ option.label }}\n          </option>\n        </select>\n      </div>\n      <task-details\n        :task-group=\"taskGroup\"\n        :back-to=\"{ name: 'tasks' }\"\n        :show-back-button=\"false\"\n        @task-created=\"onTaskCreated\"\n        @task-cancelled=\"onTaskCancelled\"\n      ></task-details>\n    </div>\n    <div\n      v-if=\"numDocs > 0\"\n      class=\"fixed bottom-0 left-0 right-0 z-10 px-4 py-4 bg-white border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]\"\n    >\n      <div class=\"flex flex-wrap items-center justify-between gap-4 max-w-6xl mx-auto\">\n        <div class=\"flex items-center gap-6\">\n          <p class=\"text-sm text-gray-600\">\n            <span class=\"font-medium text-gray-900\">{{ Math.min((page - 1) * pageSize + 1, numDocs) }}–{{ Math.min(page * pageSize, numDocs) }}</span>\n            <span class=\"mx-1\">of</span>\n            <span class=\"font-medium text-gray-900\">{{ numDocs }}</span>\n            <span class=\"ml-1 text-gray-500\">tasks</span>\n          </p>\n          <div class=\"flex items-center gap-2\">\n            <label class=\"text-sm font-medium text-gray-700\">Per page</label>\n            <select\n              v-model.number=\"pageSize\"\n              @change=\"onPageSizeChange\"\n              class=\"border border-gray-300 rounded-md shadow-sm px-3 py-2 text-sm text-gray-700 bg-white hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:border-ultramarine-500\"\n            >\n              <option v-for=\"n in pageSizeOptions\" :key=\"n\" :value=\"n\">{{ n }}</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            :disabled=\"page <= 1\"\n            @click=\"goToPage(page - 1)\"\n            class=\"inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:border-gray-400\"\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=\"M15 19l-7-7 7-7\"></path>\n            </svg>\n            Previous\n          </button>\n          <span class=\"px-4 py-2 text-sm text-gray-600 min-w-[7rem] text-center\">\n            Page <span class=\"font-semibold text-gray-900\">{{ page }}</span> of <span class=\"font-semibold text-gray-900\">{{ Math.max(1, Math.ceil(numDocs / pageSize)) }}</span>\n          </span>\n          <button\n            type=\"button\"\n            :disabled=\"page >= Math.ceil(numDocs / pageSize)\"\n            @click=\"goToPage(page + 1)\"\n            class=\"inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:border-gray-400\"\n          >\n            Next\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=\"M9 5l7 7-7 7\"></path>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </template>\n</div>\n";
+module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'\">\n    <img src=\"images/loader.gif\" alt=\"Loading\" />\n  </div>\n  <div v-else-if=\"status === 'error'\" class=\"text-red-600\">\n    {{ errorMessage }}\n  </div>\n  <template v-else-if=\"taskGroup\">\n    <div class=\"pb-24\">\n      <router-link :to=\"{ name: 'tasks' }\" class=\"inline-flex items-center gap-1 text-gray-500 hover:text-gray-700 mb-4\">\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n        </svg>\n        Back to Task Groups\n      </router-link>\n      <div class=\"mb-4\">\n        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Filter by Date:</label>\n        <select v-model=\"selectedRange\" @change=\"updateDateRange\" class=\"border-gray-300 rounded-md shadow-sm w-full p-2 max-w-xs\">\n          <option v-for=\"option in dateFilters\" :key=\"option.value\" :value=\"option.value\">\n            {{ option.label }}\n          </option>\n        </select>\n      </div>\n      <task-details\n        :task-group=\"taskGroup\"\n        :back-to=\"{ name: 'tasks' }\"\n        :show-back-button=\"false\"\n        @task-created=\"onTaskCreated\"\n        @task-cancelled=\"onTaskCancelled\"\n      ></task-details>\n    </div>\n    <div\n      v-if=\"numDocs > 0\"\n      class=\"fixed bottom-0 left-0 right-0 z-10 px-4 py-4 bg-surface border-t border-edge shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]\"\n    >\n      <div class=\"flex flex-wrap items-center justify-between gap-4 max-w-6xl mx-auto\">\n        <div class=\"flex items-center gap-6\">\n          <p class=\"text-sm text-content-tertiary\">\n            <span class=\"font-medium text-content\">{{ Math.min((page - 1) * pageSize + 1, numDocs) }}–{{ Math.min(page * pageSize, numDocs) }}</span>\n            <span class=\"mx-1\">of</span>\n            <span class=\"font-medium text-content\">{{ numDocs }}</span>\n            <span class=\"ml-1 text-content-tertiary\">tasks</span>\n          </p>\n          <div class=\"flex items-center gap-2\">\n            <label class=\"text-sm font-medium text-content-secondary\">Per page</label>\n            <select\n              v-model.number=\"pageSize\"\n              @change=\"onPageSizeChange\"\n              class=\"border border-edge rounded-md shadow-sm px-3 py-2 text-sm text-content-secondary bg-surface hover:border-edge-strong focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary\"\n            >\n              <option v-for=\"n in pageSizeOptions\" :key=\"n\" :value=\"n\">{{ n }}</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            :disabled=\"page <= 1\"\n            @click=\"goToPage(page - 1)\"\n            class=\"inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-surface bg-surface text-content-secondary border-edge hover:bg-page hover:border-edge-strong\"\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=\"M15 19l-7-7 7-7\"></path>\n            </svg>\n            Previous\n          </button>\n          <span class=\"px-4 py-2 text-sm text-content-tertiary min-w-[7rem] text-center\">\n            Page <span class=\"font-semibold text-content\">{{ page }}</span> of <span class=\"font-semibold text-content\">{{ Math.max(1, Math.ceil(numDocs / pageSize)) }}</span>\n          </span>\n          <button\n            type=\"button\"\n            :disabled=\"page >= Math.ceil(numDocs / pageSize)\"\n            @click=\"goToPage(page + 1)\"\n            class=\"inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-surface bg-surface text-content-secondary border-edge hover:bg-page hover:border-edge-strong\"\n          >\n            Next\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=\"M9 5l7 7-7 7\"></path>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </template>\n</div>\n";
 
 /***/ },
 
@@ -50325,7 +50843,7 @@ module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'
 (module) {
 
 "use strict";
-module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'\">\n    <img src=\"images/loader.gif\" alt=\"Loading\" />\n  </div>\n  <div v-else-if=\"status === 'error'\" class=\"text-red-600\">\n    {{ errorMessage }}\n  </div>\n  <div v-else-if=\"status === 'notfound'\" class=\"text-gray-600\">\n    Task not found.\n  </div>\n  <div v-else-if=\"task\" class=\"max-w-4xl\">\n    <button @click=\"goBack\" class=\"text-content-tertiary hover:text-content-secondary mb-4 flex items-center gap-1\">\n      <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n      </svg>\n      Back to {{ task.name }}\n    </button>\n    <h1 class=\"text-2xl font-bold text-content-secondary mb-1\">{{ task.name }}</h1>\n    <p class=\"text-content-tertiary mb-6\">Task details</p>\n\n    <div class=\"bg-surface rounded-lg shadow p-6 md:p-8\">\n      <div class=\"flex items-center gap-3 mb-6\">\n        <span class=\"text-sm font-medium text-content\">ID: {{ task.id }}</span>\n        <span\n          class=\"text-xs px-2 py-1 rounded-full font-medium\"\n          :class=\"getStatusColor(task.status)\"\n        >\n          {{ task?.status }}\n        </span>\n      </div>\n\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\n        <div>\n          <label class=\"block text-sm font-medium text-content-secondary mb-1\">Scheduled At</label>\n          <div class=\"text-sm text-content\">{{ formatDate(task.scheduledAt) }}</div>\n        </div>\n        <div v-if=\"task?.startedAt\">\n          <label class=\"block text-sm font-medium text-content-secondary mb-1\">Started At</label>\n          <div class=\"text-sm text-content\">{{ formatDate(task.startedAt) }}</div>\n        </div>\n        <div v-if=\"task?.completedAt\">\n          <label class=\"block text-sm font-medium text-content-secondary mb-1\">Completed At</label>\n          <div class=\"text-sm text-content\">{{ formatDate(task.completedAt) }}</div>\n        </div>\n      </div>\n\n      <div v-if=\"task?.params\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-content-secondary mb-2\">Params</label>\n        <div class=\"bg-page rounded-md p-4\">\n          <list-json :value=\"task.params\"></list-json>\n        </div>\n      </div>\n\n      <div v-if=\"task?.result\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-content-secondary mb-2\">Result</label>\n        <div class=\"bg-page rounded-md p-4\">\n          <list-json :value=\"task.result\"></list-json>\n        </div>\n      </div>\n\n      <div v-if=\"task?.error\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-content-secondary mb-2\">Error</label>\n        <div class=\"bg-page rounded-md p-4\">\n          <list-json :value=\"task.error\"></list-json>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap gap-3 pt-4 border-t border-edge\">\n        <button\n          @click=\"showRescheduleConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n          :disabled=\"task.status === 'in_progress'\"\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=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          Reschedule\n        </button>\n        <button\n          @click=\"showRunConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n          :disabled=\"task.status === 'in_progress'\"\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=\"M5 3l14 9-14 9V3z\"></path>\n          </svg>\n          Run Now\n        </button>\n        <button\n          v-if=\"task.status === 'pending'\"\n          @click=\"showCancelConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700\"\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=\"M6 18L18 6M6 6l12 12\"></path>\n          </svg>\n          Cancel Task\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reschedule Modal -->\n  <modal v-if=\"showRescheduleModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRescheduleModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-content mb-4\">Reschedule Task</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Reschedule task <strong>{{ selectedTask?.id }}</strong>?</p>\n        <p class=\"text-sm text-content-tertiary mb-4\">This will reset the task's status and schedule it to run again.</p>\n        <label for=\"newScheduledTime\" class=\"block text-sm font-medium text-content-secondary mb-2\">New Scheduled Time</label>\n        <input\n          id=\"newScheduledTime\"\n          v-model=\"newScheduledTime\"\n          type=\"datetime-local\"\n          class=\"w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-4\"\n        />\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmRescheduleTask\" class=\"flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 font-medium\">Reschedule</button>\n          <button @click=\"showRescheduleModal = false\" class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Cancel</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <!-- Run Modal -->\n  <modal v-if=\"showRunModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRunModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-content mb-4\">Run Task Now</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Run task <strong>{{ selectedTask?.id }}</strong> immediately?</p>\n        <p class=\"text-sm text-content-tertiary mb-4\">This will execute the task right away, bypassing its scheduled time.</p>\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmRunTask\" class=\"flex-1 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 font-medium\">Run Now</button>\n          <button @click=\"showRunModal = false\" class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Cancel</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <!-- Cancel Task Modal -->\n  <modal v-if=\"showCancelModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showCancelModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-content mb-4\">Cancel Task</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Cancel task <strong>{{ selectedTask?.id }}</strong>?</p>\n        <p class=\"text-sm text-content-tertiary mb-4\">This will permanently cancel the task and it cannot be undone.</p>\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmCancelTask\" class=\"flex-1 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium\">Cancel Task</button>\n          <button @click=\"showCancelModal = false\" class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Keep Task</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'\">\n    <img src=\"images/loader.gif\" alt=\"Loading\" />\n  </div>\n  <div v-else-if=\"status === 'error'\" class=\"text-red-600\">\n    {{ errorMessage }}\n  </div>\n  <div v-else-if=\"status === 'notfound'\" class=\"text-gray-600\">\n    Task not found.\n  </div>\n  <div v-else-if=\"task\" class=\"max-w-4xl\">\n    <button @click=\"goBack\" class=\"text-content-tertiary hover:text-content-secondary mb-4 flex items-center gap-1\">\n      <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n      </svg>\n      Back to {{ task.name }}\n    </button>\n    <h1 class=\"text-2xl font-bold text-content-secondary mb-1\">{{ task.name }}</h1>\n    <p class=\"text-content-tertiary mb-6\">Task details</p>\n\n    <div class=\"bg-surface rounded-lg shadow p-6 md:p-8\">\n      <div class=\"flex items-center gap-3 mb-6\">\n        <span class=\"text-sm font-medium text-content\">ID: {{ task.id }}</span>\n        <span\n          class=\"text-xs px-2 py-1 rounded-full font-medium\"\n          :class=\"getStatusColor(task.status)\"\n        >\n          {{ task?.status }}\n        </span>\n      </div>\n\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\n        <div>\n          <label class=\"block text-sm font-medium text-content-secondary mb-1\">Scheduled At</label>\n          <div class=\"text-sm text-content\">{{ formatDate(task.scheduledAt) }}</div>\n        </div>\n        <div v-if=\"task?.startedAt\">\n          <label class=\"block text-sm font-medium text-content-secondary mb-1\">Started At</label>\n          <div class=\"text-sm text-content\">{{ formatDate(task.startedAt) }}</div>\n        </div>\n        <div v-if=\"task?.completedAt\">\n          <label class=\"block text-sm font-medium text-content-secondary mb-1\">Completed At</label>\n          <div class=\"text-sm text-content\">{{ formatDate(task.completedAt) }}</div>\n        </div>\n      </div>\n\n      <div v-if=\"task?.params\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-content-secondary mb-2\">Params</label>\n        <div class=\"bg-page rounded-md p-4\">\n          <list-json :value=\"task.params\"></list-json>\n        </div>\n      </div>\n\n      <div v-if=\"task?.result\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-content-secondary mb-2\">Result</label>\n        <div class=\"bg-page rounded-md p-4\">\n          <list-json :value=\"task.result\"></list-json>\n        </div>\n      </div>\n\n      <div v-if=\"task?.error\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-content-secondary mb-2\">Error</label>\n        <div class=\"bg-page rounded-md p-4\">\n          <list-json :value=\"task.error\"></list-json>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap gap-3 pt-4 border-t border-edge\">\n        <button\n          @click=\"showRescheduleConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n          :disabled=\"task.status === 'in_progress'\"\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=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          Reschedule\n        </button>\n        <button\n          @click=\"showRunConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n          :disabled=\"task.status === 'in_progress'\"\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=\"M5 3l14 9-14 9V3z\"></path>\n          </svg>\n          Run Now\n        </button>\n        <button\n          v-if=\"task.status === 'pending'\"\n          @click=\"showCancelConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700\"\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=\"M6 18L18 6M6 6l12 12\"></path>\n          </svg>\n          Cancel Task\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reschedule Modal -->\n  <modal v-if=\"showRescheduleModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRescheduleModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-content mb-4\">Reschedule Task</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Reschedule task <strong>{{ selectedTask?.id }}</strong>?</p>\n        <p class=\"text-sm text-content-tertiary mb-4\">This will reset the task's status and schedule it to run again.</p>\n        <label for=\"newScheduledTime\" class=\"block text-sm font-medium text-content-secondary mb-2\">New Scheduled Time</label>\n        <input\n          id=\"newScheduledTime\"\n          v-model=\"newScheduledTime\"\n          type=\"datetime-local\"\n          class=\"w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-4\"\n        />\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmRescheduleTask\" class=\"flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-md hover:from-blue-600 hover:to-blue-700 font-medium\">Reschedule</button>\n          <button @click=\"showRescheduleModal = false\" class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Cancel</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <!-- Run Modal -->\n  <modal v-if=\"showRunModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRunModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-content mb-4\">Run Task Now</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Run task <strong>{{ selectedTask?.id }}</strong> immediately?</p>\n        <p class=\"text-sm text-content-tertiary mb-4\">This will execute the task right away, bypassing its scheduled time.</p>\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmRunTask\" class=\"flex-1 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-md hover:from-green-600 hover:to-green-700 font-medium\">Run Now</button>\n          <button @click=\"showRunModal = false\" class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Cancel</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <!-- Cancel Task Modal -->\n  <modal v-if=\"showCancelModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showCancelModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-content mb-4\">Cancel Task</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Cancel task <strong>{{ selectedTask?.id }}</strong>?</p>\n        <p class=\"text-sm text-content-tertiary mb-4\">This will permanently cancel the task and it cannot be undone.</p>\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmCancelTask\" class=\"flex-1 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-md hover:from-red-600 hover:to-red-700 font-medium\">Cancel Task</button>\n          <button @click=\"showCancelModal = false\" class=\"flex-1 bg-muted hover:bg-page text-content-secondary px-4 py-2 rounded-md border border-edge-strong font-medium\">Keep Task</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -50336,7 +50854,7 @@ module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'
 (module) {
 
 "use strict";
-module.exports = "<div class=\"p-4 space-y-6\">\n    <div class=\"flex items-center justify-between\">\n        <div>\n          <button v-if=\"showBackButton\" @click=\"goBack\" class=\"text-content-tertiary hover:text-content-secondary mb-2\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n            </svg>\n            {{ backLabel }}\n          </button>\n          <h1 class=\"text-2xl font-bold text-content-secondary\">{{ taskGroup.name }}</h1>\n          <p class=\"text-content-tertiary\">Total: {{ taskGroup.totalCount }} tasks</p>\n        </div>\n\n      </div>\n\n        <!-- Status Summary -->\n       <div class=\"space-y-3\">\n         <div class=\"flex items-center justify-between\">\n           <span class=\"text-sm font-medium text-content-secondary\">Status</span>\n           <div class=\"flex rounded-md shadow-sm\" role=\"group\">\n             <button\n               type=\"button\"\n               @click=\"statusView = 'summary'\"\n               class=\"px-3 py-1.5 text-sm font-medium rounded-l-md border transition-colors\"\n               :class=\"statusView === 'summary' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'\"\n             >\n               Summary\n             </button>\n             <button\n               type=\"button\"\n               @click=\"statusView = 'chart'\"\n               class=\"px-3 py-1.5 text-sm font-medium rounded-r-md border border-l-0 transition-colors\"\n               :class=\"statusView === 'chart' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'\"\n             >\n               Chart\n             </button>\n           </div>\n         </div>\n         <!-- Summary view -->\n         <div v-show=\"statusView === 'summary'\" class=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n           <button \n             @click=\"filterByStatus('pending')\"\n             class=\"bg-yellow-50 border border-yellow-200 rounded-md p-3 text-center hover:bg-yellow-100 transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-yellow-400': currentFilter === 'pending' }\"\n           >\n             <div class=\"text-xs text-yellow-600 font-medium\">Pending</div>\n             <div class=\"text-lg font-bold text-yellow-700\">{{ taskGroup.statusCounts.pending || 0 }}</div>\n           </button>\n           <button \n             @click=\"filterByStatus('succeeded')\"\n             class=\"bg-green-50 border border-green-200 rounded-md p-3 text-center hover:bg-green-100 transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-green-400': currentFilter === 'succeeded' }\"\n           >\n             <div class=\"text-xs text-green-600 font-medium\">Succeeded</div>\n             <div class=\"text-lg font-bold text-green-700\">{{ taskGroup.statusCounts.succeeded || 0 }}</div>\n           </button>\n           <button \n             @click=\"filterByStatus('failed')\"\n             class=\"bg-red-50 border border-red-200 rounded-md p-3 text-center hover:bg-red-100 transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-red-400': currentFilter === 'failed' }\"\n           >\n             <div class=\"text-xs text-red-600 font-medium\">Failed</div>\n             <div class=\"text-lg font-bold text-red-700\">{{ taskGroup.statusCounts.failed || 0 }}</div>\n           </button>\n           <button \n             @click=\"filterByStatus('cancelled')\"\n             class=\"bg-page border border-edge rounded-md p-3 text-center hover:bg-muted transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-gray-400': currentFilter === 'cancelled' }\"\n           >\n             <div class=\"text-xs text-gray-600 font-medium\">Cancelled</div>\n             <div class=\"text-lg font-bold text-content-secondary\">{{ taskGroup.statusCounts.cancelled || 0 }}</div>\n           </button>\n         </div>\n         <!-- Chart view -->\n         <div v-show=\"statusView === 'chart'\" class=\"flex flex-col items-center justify-center bg-surface border border-edge rounded-lg p-4 gap-3\" style=\"min-height: 280px;\">\n           <div v-if=\"taskGroup.totalCount > 0\" class=\"w-[240px] h-[240px] shrink-0\">\n             <canvas ref=\"statusPieChart\" width=\"240\" height=\"240\" class=\"block\"></canvas>\n           </div>\n           <p v-else class=\"text-content-tertiary text-sm py-8\">No tasks to display</p>\n           <!-- Selection labels: show which segment is selected (click to filter) -->\n           <div v-if=\"taskGroup.totalCount > 0\" class=\"flex flex-wrap justify-center gap-2\">\n             <button\n               v-for=\"status in statusOrderForDisplay\"\n               :key=\"status\"\n               type=\"button\"\n               class=\"text-xs px-2 py-1 rounded-full font-medium transition-all cursor-pointer\"\n               :class=\"currentFilter === status ? getStatusPillClass(status) : 'bg-muted text-content-tertiary hover:bg-muted'\"\n               @click=\"filterByStatus(status)\"\n             >\n               {{ statusLabel(status) }}\n             </button>\n           </div>\n         </div>\n       </div>\n\n        <!-- Task List -->\n       <div class=\"bg-surface rounded-lg shadow\">\n        <div class=\"px-6 py-6 border-b border-edge flex items-center justify-between bg-page\">\n          <h2 class=\"text-xl font-bold text-content\">\n            Individual Tasks\n            <span v-if=\"currentFilter\" class=\"ml-3 text-base font-semibold text-primary\">\n              (Filtered by {{ currentFilter }})\n            </span>\n          </h2>\n          <button \n            v-if=\"currentFilter\"\n            @click=\"clearFilter\"\n            class=\"text-sm font-semibold text-primary hover:text-primary\"\n          >\n            Show All\n          </button>\n        </div>\n        <div class=\"divide-y divide-gray-200\">\n          <div v-for=\"task in sortedTasks\" :key=\"task.id\" class=\"p-6\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"flex-1\">\n                <div class=\"flex items-center gap-3 mb-2\">\n                  <span class=\"text-sm font-medium text-content\">Task ID: {{ task.id }}</span>\n                  <router-link\n                    v-if=\"backTo\"\n                    :to=\"taskDetailRoute(task)\"\n                    class=\"text-sm text-primary hover:text-primary font-medium\"\n                  >\n                    View details\n                  </router-link>\n                  <span\n                    class=\"text-xs px-2 py-1 rounded-full font-medium\"\n                    :class=\"getStatusColor(task.status)\"\n                  >\n                    {{ task.status }}\n                  </span>\n                </div>\n                \n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                  <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Scheduled At</label>\n                    <div class=\"text-sm text-content\">{{ formatDate(task.scheduledAt) }}</div>\n                  </div>\n                  <div v-if=\"task.startedAt\">\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Started At</label>\n                    <div class=\"text-sm text-content\">{{ formatDate(task.startedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.completedAt\">\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Completed At</label>\n                    <div class=\"text-sm text-content\">{{ formatDate(task.completedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.error\">\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Error</label>\n                    <div class=\"text-sm text-red-600\">{{ task.error }}</div>\n                  </div>\n                </div>\n\n                <!-- Task Parameters -->\n                <div v-if=\"task.parameters && Object.keys(task.parameters).length > 0\">\n                  <label class=\"block text-sm font-medium text-content-secondary mb-2\">Parameters</label>\n                  <div class=\"bg-page rounded-md p-3\">\n                    <pre class=\"text-sm text-gray-800 whitespace-pre-wrap\">{{ JSON.stringify(task.parameters, null, 2) }}</pre>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"flex flex-col gap-3 ml-6\">\n                <button \n                  @click=\"showRescheduleConfirmation(task)\"\n                  class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none\"\n                  :disabled=\"task.status === 'in_progress'\"\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=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n                  </svg>\n                  Reschedule\n                </button>\n                <button \n                  @click=\"showRunConfirmation(task)\"\n                  class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none\"\n                  :disabled=\"task.status === 'in_progress'\"\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=\"M5 3l14 9-14 9V3z\"></path>\n                  </svg>\n                  Run Now\n                </button>\n                <button \n                  v-if=\"task.status === 'pending'\"\n                  @click=\"showCancelConfirmation(task)\"\n                  class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg\"\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=\"M6 18L18 6M6 6l12 12\"></path>\n                  </svg>\n                  Cancel\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n\n    <!-- Reschedule Confirmation Modal -->\n    <modal v-if=\"showRescheduleModal\" containerClass=\"!max-w-md\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRescheduleModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"p-6\">\n                <div class=\"flex items-center mb-4\">\n                    <div class=\"flex-shrink-0\">\n                        <svg class=\"w-6 h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n                        </svg>\n                    </div>\n                    <div class=\"ml-3\">\n                        <h3 class=\"text-lg font-medium text-content\">Reschedule Task</h3>\n                    </div>\n                </div>\n                <div class=\"mb-4\">\n                    <p class=\"text-sm text-gray-600\">\n                        Are you sure you want to reschedule task <strong>{{ selectedTask?.id }}</strong>?\n                    </p>\n                    <p class=\"text-sm text-content-tertiary mt-2\">\n                        This will reset the task's status and schedule it to run again.\n                    </p>\n                    \n                    <div class=\"mt-4\">\n                        <label for=\"newScheduledTime\" class=\"block text-sm font-medium text-content-secondary mb-2\">\n                            New Scheduled Time\n                        </label>\n                        <input\n                            id=\"newScheduledTime\"\n                            v-model=\"newScheduledTime\"\n                            type=\"datetime-local\"\n                            class=\"w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n                            required\n                        />\n                    </div>\n                </div>\n                <div class=\"flex gap-3\">\n                    <button \n                        @click=\"confirmRescheduleTask\"\n                        class=\"flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 font-medium\"\n                    >\n                        Reschedule\n                    </button>\n                    <button \n                        @click=\"showRescheduleModal = false\"\n                        class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\"\n                    >\n                        Cancel\n                    </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n\n    <!-- Run Task Confirmation Modal -->\n    <modal v-if=\"showRunModal\" containerClass=\"!max-w-md\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRunModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"p-6\">\n                <div class=\"flex items-center mb-4\">\n                    <div class=\"flex-shrink-0\">\n                        <svg class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n                        </svg>\n                    </div>\n                    <div class=\"ml-3\">\n                        <h3 class=\"text-lg font-medium text-content\">Run Task Now</h3>\n                    </div>\n                </div>\n                <div class=\"mb-4\">\n                    <p class=\"text-sm text-gray-600\">\n                        Are you sure you want to run task <strong>{{ selectedTask?.id }}</strong> immediately?\n                    </p>\n                    <p class=\"text-sm text-content-tertiary mt-2\">\n                        This will execute the task right away, bypassing its scheduled time.\n                    </p>\n                </div>\n                <div class=\"flex gap-3\">\n                    <button \n                        @click=\"confirmRunTask\"\n                        class=\"flex-1 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 font-medium\"\n                    >\n                        Run Now\n                    </button>\n                    <button \n                        @click=\"showRunModal = false\"\n                        class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\"\n                    >\n                        Cancel\n                    </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n\n    <!-- Cancel Task Confirmation Modal -->\n    <modal v-if=\"showCancelModal\" containerClass=\"!max-w-md\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showCancelModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"p-6\">\n                <div class=\"flex items-center mb-4\">\n                    <div class=\"flex-shrink-0\">\n                        <svg class=\"w-6 h-6 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n                        </svg>\n                    </div>\n                    <div class=\"ml-3\">\n                        <h3 class=\"text-lg font-medium text-content\">Cancel Task</h3>\n                    </div>\n                </div>\n                <div class=\"mb-4\">\n                    <p class=\"text-sm text-gray-600\">\n                        Are you sure you want to cancel task <strong>{{ selectedTask?.id }}</strong>?\n                    </p>\n                    <p class=\"text-sm text-content-tertiary mt-2\">\n                        This will permanently cancel the task and it cannot be undone.\n                    </p>\n                </div>\n                <div class=\"flex gap-3\">\n                    <button \n                        @click=\"confirmCancelTask\"\n                        class=\"flex-1 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium\"\n                    >\n                        Cancel Task\n                    </button>\n                    <button \n                        @click=\"showCancelModal = false\"\n                        class=\"flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium\"\n                    >\n                        Keep Task\n                    </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n</div>\n\n";
+module.exports = "<div class=\"p-4 space-y-6\">\n    <div class=\"flex items-center justify-between\">\n        <div>\n          <button v-if=\"showBackButton\" @click=\"goBack\" class=\"text-content-tertiary hover:text-content-secondary mb-2\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n            </svg>\n            {{ backLabel }}\n          </button>\n          <h1 class=\"text-2xl font-bold text-content-secondary\">{{ taskGroup.name }}</h1>\n          <p class=\"text-content-tertiary\">Total: {{ taskGroup.totalCount }} tasks</p>\n        </div>\n\n      </div>\n\n        <!-- Status Summary -->\n       <div class=\"space-y-3\">\n         <div class=\"flex items-center justify-between\">\n           <span class=\"text-sm font-medium text-content-secondary\">Status</span>\n           <div class=\"flex rounded-md shadow-sm\" role=\"group\">\n             <button\n               type=\"button\"\n               @click=\"statusView = 'summary'\"\n               class=\"px-3 py-1.5 text-sm font-medium rounded-l-md border transition-colors\"\n               :class=\"statusView === 'summary' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'\"\n             >\n               Summary\n             </button>\n             <button\n               type=\"button\"\n               @click=\"statusView = 'chart'\"\n               class=\"px-3 py-1.5 text-sm font-medium rounded-r-md border border-l-0 transition-colors\"\n               :class=\"statusView === 'chart' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'\"\n             >\n               Chart\n             </button>\n           </div>\n         </div>\n         <!-- Summary view -->\n         <div v-show=\"statusView === 'summary'\" class=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n           <button \n             @click=\"filterByStatus('pending')\"\n             class=\"bg-yellow-50 border border-yellow-200 rounded-md p-3 text-center hover:bg-yellow-100 transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-yellow-400': currentFilter === 'pending' }\"\n           >\n             <div class=\"text-xs text-yellow-600 font-medium\">Pending</div>\n             <div class=\"text-lg font-bold text-yellow-700\">{{ taskGroup.statusCounts.pending || 0 }}</div>\n           </button>\n           <button \n             @click=\"filterByStatus('succeeded')\"\n             class=\"bg-green-50 border border-green-200 rounded-md p-3 text-center hover:bg-green-100 transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-green-400': currentFilter === 'succeeded' }\"\n           >\n             <div class=\"text-xs text-green-600 font-medium\">Succeeded</div>\n             <div class=\"text-lg font-bold text-green-700\">{{ taskGroup.statusCounts.succeeded || 0 }}</div>\n           </button>\n           <button \n             @click=\"filterByStatus('failed')\"\n             class=\"bg-red-50 border border-red-200 rounded-md p-3 text-center hover:bg-red-100 transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-red-400': currentFilter === 'failed' }\"\n           >\n             <div class=\"text-xs text-red-600 font-medium\">Failed</div>\n             <div class=\"text-lg font-bold text-red-700\">{{ taskGroup.statusCounts.failed || 0 }}</div>\n           </button>\n           <button \n             @click=\"filterByStatus('cancelled')\"\n             class=\"bg-page border border-edge rounded-md p-3 text-center hover:bg-muted transition-colors cursor-pointer\"\n             :class=\"{ 'ring-2 ring-gray-400': currentFilter === 'cancelled' }\"\n           >\n             <div class=\"text-xs text-gray-600 font-medium\">Cancelled</div>\n             <div class=\"text-lg font-bold text-content-secondary\">{{ taskGroup.statusCounts.cancelled || 0 }}</div>\n           </button>\n         </div>\n         <!-- Chart view -->\n         <div v-show=\"statusView === 'chart'\" class=\"flex flex-col items-center justify-center bg-surface border border-edge rounded-lg p-4 gap-3\" style=\"min-height: 280px;\">\n           <div v-if=\"taskGroup.totalCount > 0\" class=\"w-[240px] h-[240px] shrink-0\">\n             <canvas ref=\"statusPieChart\" width=\"240\" height=\"240\" class=\"block\"></canvas>\n           </div>\n           <p v-else class=\"text-content-tertiary text-sm py-8\">No tasks to display</p>\n           <!-- Selection labels: show which segment is selected (click to filter) -->\n           <div v-if=\"taskGroup.totalCount > 0\" class=\"flex flex-wrap justify-center gap-2\">\n             <button\n               v-for=\"status in statusOrderForDisplay\"\n               :key=\"status\"\n               type=\"button\"\n               class=\"text-xs px-2 py-1 rounded-full font-medium transition-all cursor-pointer\"\n               :class=\"currentFilter === status ? getStatusPillClass(status) : 'bg-muted text-content-tertiary hover:bg-muted'\"\n               @click=\"filterByStatus(status)\"\n             >\n               {{ statusLabel(status) }}\n             </button>\n           </div>\n         </div>\n       </div>\n\n        <!-- Task List -->\n       <div class=\"bg-surface rounded-lg shadow\">\n        <div class=\"px-6 py-6 border-b border-edge flex items-center justify-between bg-page\">\n          <h2 class=\"text-xl font-bold text-content\">\n            Individual Tasks\n            <span v-if=\"currentFilter\" class=\"ml-3 text-base font-semibold text-primary\">\n              (Filtered by {{ currentFilter }})\n            </span>\n          </h2>\n          <button \n            v-if=\"currentFilter\"\n            @click=\"clearFilter\"\n            class=\"text-sm font-semibold text-primary hover:text-primary\"\n          >\n            Show All\n          </button>\n        </div>\n        <div class=\"divide-y divide-gray-200\">\n          <div v-for=\"task in sortedTasks\" :key=\"task.id\" class=\"p-6\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"flex-1\">\n                <div class=\"flex items-center gap-3 mb-2\">\n                  <span class=\"text-sm font-medium text-content\">Task ID: {{ task.id }}</span>\n                  <router-link\n                    v-if=\"backTo\"\n                    :to=\"taskDetailRoute(task)\"\n                    class=\"text-sm text-primary hover:text-primary font-medium\"\n                  >\n                    View details\n                  </router-link>\n                  <span\n                    class=\"text-xs px-2 py-1 rounded-full font-medium\"\n                    :class=\"getStatusColor(task.status)\"\n                  >\n                    {{ task.status }}\n                  </span>\n                </div>\n                \n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                  <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Scheduled At</label>\n                    <div class=\"text-sm text-content\">{{ formatDate(task.scheduledAt) }}</div>\n                  </div>\n                  <div v-if=\"task.startedAt\">\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Started At</label>\n                    <div class=\"text-sm text-content\">{{ formatDate(task.startedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.completedAt\">\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Completed At</label>\n                    <div class=\"text-sm text-content\">{{ formatDate(task.completedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.error\">\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Error</label>\n                    <div class=\"text-sm text-red-600\">{{ task.error }}</div>\n                  </div>\n                </div>\n\n                <!-- Task Parameters -->\n                <div v-if=\"task.parameters && Object.keys(task.parameters).length > 0\">\n                  <label class=\"block text-sm font-medium text-content-secondary mb-2\">Parameters</label>\n                  <div class=\"bg-page rounded-md p-3\">\n                    <pre class=\"text-sm text-gray-800 whitespace-pre-wrap\">{{ JSON.stringify(task.parameters, null, 2) }}</pre>\n                  </div>\n                </div>\n              </div>\n              \n              <div class=\"flex flex-col gap-3 ml-6\">\n                <button \n                  @click=\"showRescheduleConfirmation(task)\"\n                  class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none\"\n                  :disabled=\"task.status === 'in_progress'\"\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=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n                  </svg>\n                  Reschedule\n                </button>\n                <button \n                  @click=\"showRunConfirmation(task)\"\n                  class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none\"\n                  :disabled=\"task.status === 'in_progress'\"\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=\"M5 3l14 9-14 9V3z\"></path>\n                  </svg>\n                  Run Now\n                </button>\n                <button \n                  v-if=\"task.status === 'pending'\"\n                  @click=\"showCancelConfirmation(task)\"\n                  class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg\"\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=\"M6 18L18 6M6 6l12 12\"></path>\n                  </svg>\n                  Cancel\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n\n    <!-- Reschedule Confirmation Modal -->\n    <modal v-if=\"showRescheduleModal\" containerClass=\"!max-w-md\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRescheduleModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"p-6\">\n                <div class=\"flex items-center mb-4\">\n                    <div class=\"flex-shrink-0\">\n                        <svg class=\"w-6 h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n                        </svg>\n                    </div>\n                    <div class=\"ml-3\">\n                        <h3 class=\"text-lg font-medium text-content\">Reschedule Task</h3>\n                    </div>\n                </div>\n                <div class=\"mb-4\">\n                    <p class=\"text-sm text-gray-600\">\n                        Are you sure you want to reschedule task <strong>{{ selectedTask?.id }}</strong>?\n                    </p>\n                    <p class=\"text-sm text-content-tertiary mt-2\">\n                        This will reset the task's status and schedule it to run again.\n                    </p>\n                    \n                    <div class=\"mt-4\">\n                        <label for=\"newScheduledTime\" class=\"block text-sm font-medium text-content-secondary mb-2\">\n                            New Scheduled Time\n                        </label>\n                        <input\n                            id=\"newScheduledTime\"\n                            v-model=\"newScheduledTime\"\n                            type=\"datetime-local\"\n                            class=\"w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n                            required\n                        />\n                    </div>\n                </div>\n                <div class=\"flex gap-3\">\n                    <button \n                        @click=\"confirmRescheduleTask\"\n                        class=\"flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-md hover:from-blue-600 hover:to-blue-700 font-medium\"\n                    >\n                        Reschedule\n                    </button>\n                    <button \n                        @click=\"showRescheduleModal = false\"\n                        class=\"flex-1 bg-muted hover:bg-page text-content-secondary px-4 py-2 rounded-md border border-edge-strong font-medium\"\n                    >\n                        Cancel\n                    </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n\n    <!-- Run Task Confirmation Modal -->\n    <modal v-if=\"showRunModal\" containerClass=\"!max-w-md\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRunModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"p-6\">\n                <div class=\"flex items-center mb-4\">\n                    <div class=\"flex-shrink-0\">\n                        <svg class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n                        </svg>\n                    </div>\n                    <div class=\"ml-3\">\n                        <h3 class=\"text-lg font-medium text-content\">Run Task Now</h3>\n                    </div>\n                </div>\n                <div class=\"mb-4\">\n                    <p class=\"text-sm text-gray-600\">\n                        Are you sure you want to run task <strong>{{ selectedTask?.id }}</strong> immediately?\n                    </p>\n                    <p class=\"text-sm text-content-tertiary mt-2\">\n                        This will execute the task right away, bypassing its scheduled time.\n                    </p>\n                </div>\n                <div class=\"flex gap-3\">\n                    <button \n                        @click=\"confirmRunTask\"\n                        class=\"flex-1 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-md hover:from-green-600 hover:to-green-700 font-medium\"\n                    >\n                        Run Now\n                    </button>\n                    <button \n                        @click=\"showRunModal = false\"\n                        class=\"flex-1 bg-muted hover:bg-page text-content-secondary px-4 py-2 rounded-md border border-edge-strong font-medium\"\n                    >\n                        Cancel\n                    </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n\n    <!-- Cancel Task Confirmation Modal -->\n    <modal v-if=\"showCancelModal\" containerClass=\"!max-w-md\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showCancelModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"p-6\">\n                <div class=\"flex items-center mb-4\">\n                    <div class=\"flex-shrink-0\">\n                        <svg class=\"w-6 h-6 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n                        </svg>\n                    </div>\n                    <div class=\"ml-3\">\n                        <h3 class=\"text-lg font-medium text-content\">Cancel Task</h3>\n                    </div>\n                </div>\n                <div class=\"mb-4\">\n                    <p class=\"text-sm text-gray-600\">\n                        Are you sure you want to cancel task <strong>{{ selectedTask?.id }}</strong>?\n                    </p>\n                    <p class=\"text-sm text-content-tertiary mt-2\">\n                        This will permanently cancel the task and it cannot be undone.\n                    </p>\n                </div>\n                <div class=\"flex gap-3\">\n                    <button \n                        @click=\"confirmCancelTask\"\n                        class=\"flex-1 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-md hover:from-red-600 hover:to-red-700 font-medium\"\n                    >\n                        Cancel Task\n                    </button>\n                    <button \n                        @click=\"showCancelModal = false\"\n                        class=\"flex-1 bg-muted hover:bg-page text-content-secondary px-4 py-2 rounded-md border border-edge-strong font-medium\"\n                    >\n                        Keep Task\n                    </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n</div>\n\n";
 
 /***/ },
 
@@ -61672,7 +62190,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.3.3","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","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.3.4","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","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"}}');
 
 /***/ }