@mongoosejs/studio 0.3.0 → 0.3.2

package/frontend/public/app.js

@@ -29,6 +29,99 @@ module.exports = {
 };
 
 
+/***/ },
+
+/***/ "./frontend/src/_util/dateRange.js"
+/*!*****************************************!*\
+  !*** ./frontend/src/_util/dateRange.js ***!
+  \*****************************************/
+(module) {
+
+"use strict";
+
+
+const DATE_FILTERS = [
+  { value: 'last_hour', label: 'Last Hour' },
+  { value: 'today', label: 'Today' },
+  { value: 'yesterday', label: 'Yesterday' },
+  { value: 'thisWeek', label: 'This Week' },
+  { value: 'lastWeek', label: 'Last Week' },
+  { value: 'thisMonth', label: 'This Month' },
+  { value: 'lastMonth', label: 'Last Month' }
+];
+
+const DATE_FILTER_VALUES = DATE_FILTERS.map(f => f.value);
+
+/**
+ * Returns { start, end } Date objects for a given range key (e.g. 'last_hour', 'today').
+ * Month ranges use UTC boundaries.
+ * @param {string} selectedRange - One of DATE_FILTER_VALUES
+ * @returns {{ start: Date, end: Date }}
+ */
+function getDateRangeForRange(selectedRange) {
+  const now = new Date();
+  let start, end;
+  switch (selectedRange) {
+    case 'last_hour':
+      start = new Date();
+      start.setHours(start.getHours() - 1);
+      end = new Date();
+      break;
+    case 'today':
+      start = new Date();
+      start.setHours(0, 0, 0, 0);
+      end = new Date();
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'yesterday':
+      start = new Date(now);
+      start.setDate(start.getDate() - 1);
+      start.setHours(0, 0, 0, 0);
+      end = new Date(start);
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'thisWeek':
+      start = new Date(now.getTime() - (7 * 86400000));
+      start.setHours(0, 0, 0, 0);
+      end = new Date();
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'lastWeek':
+      start = new Date(now.getTime() - (14 * 86400000));
+      start.setHours(0, 0, 0, 0);
+      end = new Date(now.getTime() - (7 * 86400000));
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'thisMonth': {
+      const y = now.getUTCFullYear();
+      const m = now.getUTCMonth();
+      start = new Date(Date.UTC(y, m, 1, 0, 0, 0, 0));
+      end = new Date(Date.UTC(y, m + 1, 0, 23, 59, 59, 999));
+      break;
+    }
+    case 'lastMonth': {
+      const y = now.getUTCFullYear();
+      const m = now.getUTCMonth();
+      start = new Date(Date.UTC(y, m - 1, 1, 0, 0, 0, 0));
+      end = new Date(Date.UTC(y, m, 0, 23, 59, 59, 999));
+      break;
+    }
+    default:
+      start = new Date();
+      start.setHours(start.getHours() - 1);
+      end = new Date();
+      break;
+  }
+  return { start, end };
+}
+
+module.exports = {
+  DATE_FILTERS,
+  DATE_FILTER_VALUES,
+  getDateRangeForRange
+};
+
+
 /***/ },
 
 /***/ "./frontend/src/_util/deepEqual.js"
@@ -424,6 +517,12 @@ module.exports = app => app.component('ace-editor', {
     }
   },
   methods: {
+    getValue() {
+      if (this.editor) {
+        return this.editor.getValue();
+      }
+      return this.modelValue !== '' ? this.modelValue : this.value;
+    },
     setValue(val) {
       if (this.editor) {
         this.editor.setValue(val ?? '', -1);
@@ -709,6 +808,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTasks: function getTasks(params) {
       return client.post('', { action: 'Task.getTasks', ...params }).then(res => res.data);
     },
+    getTaskOverview: function getTaskOverview(params) {
+      return client.post('', { action: 'Task.getTaskOverview', ...params }).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('', { action: 'Task.rescheduleTask', ...params }).then(res => res.data);
     },
@@ -1043,6 +1145,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTasks: function getTasks(params) {
       return client.post('/Task/getTasks', params).then(res => res.data);
     },
+    getTaskOverview: function getTaskOverview(params) {
+      return client.post('/Task/getTaskOverview', params).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('/Task/rescheduleTask', params).then(res => res.data);
     },
@@ -1252,15 +1357,9 @@ module.exports = app => app.component('chat-message-script', {
     },
     canOverwriteDashboard() {
       return !!this.targetDashboardId;
-    },
-    isChartOutput() {
-      return !!this.message.executionResult?.output?.$chart;
     }
   },
   methods: {
-    exportChartPNG() {
-      this.$refs.chartOutput?.exportPNG?.();
-    },
     async executeScript() {
       const scriptToRun = this.isEditing ? this.editedScript : this.script;
       this.editedScript = scriptToRun;
@@ -1723,6 +1822,8 @@ module.exports = {
     }
   },
   async mounted() {
+    window.pageState = this;
+
     this.chatThreadId = this.threadId;
     const { chatThreads } = await api.ChatThread.listChatThreads();
     this.chatThreads = chatThreads;
@@ -2387,12 +2488,63 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$grid) {
         return 'dashboard-grid';
       }
+      if (value.$table) {
+        return 'dashboard-table';
+      }
       return 'dashboard-object';
     }
   }
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/dashboard-result/dashboard-table/dashboard-table.js"
+/*!**************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-table/dashboard-table.js ***!
+  \**************************************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./dashboard-table.html */ "./frontend/src/dashboard-result/dashboard-table/dashboard-table.html");
+
+module.exports = app => app.component('dashboard-table', {
+  template,
+  props: ['value'],
+  computed: {
+    columns() {
+      return Array.isArray(this.value?.$table?.columns) ? this.value.$table.columns : [];
+    },
+    rows() {
+      return Array.isArray(this.value?.$table?.rows) ? this.value.$table.rows : [];
+    },
+    hasColumns() {
+      return this.columns.length > 0;
+    },
+    hasRows() {
+      return this.rows.length > 0;
+    }
+  },
+  methods: {
+    displayValue(cell) {
+      if (cell == null) {
+        return '';
+      }
+      if (typeof cell === 'object') {
+        try {
+          return JSON.stringify(cell);
+        } catch (err) {
+          return String(cell);
+        }
+      }
+      return String(cell);
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/dashboard-result/dashboard-text/dashboard-text.js"
@@ -2451,6 +2603,13 @@ module.exports = {
       this.showEditor = !this.showEditor;
     },
     async updateCode(update) {
+      if (!update?.doc) {
+        const message = update?.error?.message || 'Dashboard update failed';
+        console.error(update?.error || new Error(message));
+        this.$toast.error(message);
+        return;
+      }
+
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
@@ -2475,7 +2634,9 @@ module.exports = {
           this.dashboardResults.unshift({ error: { message: error.message || 'Evaluation failed' }, finishedEvaluatingAt: new Date() });
         }
       } catch (err) {
-        this.$toast.error(err?.response?.data?.message || err?.message || 'Dashboard evaluation failed');
+        const message = err?.response?.data?.message || err?.message || 'Dashboard evaluation failed';
+        console.error(err || new Error(message));
+        this.$toast.error(message);
       } finally {
         this.status = 'loaded';
       }
@@ -2571,7 +2732,9 @@ 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);
     this.showEditor = this.$route.query.edit;
     await this.loadInitial();
@@ -2599,7 +2762,7 @@ const template = __webpack_require__(/*! ./edit-dashboard.html */ "./frontend/sr
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
-  emits: ['close'],
+  emits: ['close', 'update'],
   data: function() {
     return {
       status: 'loaded',
@@ -2620,7 +2783,7 @@ module.exports = app => app.component('edit-dashboard', {
     async updateCode() {
       this.status = 'loading';
       try {
-        const codeToSave = this.$refs.codeEditor ? this.$refs.codeEditor.getValue() : this.editCode;
+        const codeToSave = this.$refs.codeEditor?.getValue ? this.$refs.codeEditor.getValue() : this.editCode;
         const { doc } = await api.Dashboard.updateDashboard({
           dashboardId: this.dashboardId,
           code: codeToSave,
@@ -2636,7 +2799,8 @@ module.exports = app => app.component('edit-dashboard', {
         this.$toast.success('Dashboard updated!');
         this.closeEditor();
       } catch (err) {
-        this.$emit('update', { error: { message: err.message } });
+        const message = err?.response?.data?.message || err?.message || 'Dashboard update failed';
+        this.$emit('update', { error: { message } });
       } finally {
         this.status = 'loaded';
       }
@@ -6946,6 +7110,7 @@ module.exports = app => app.component('models', {
   }),
   created() {
     this.currentModel = this.model;
+    this.setSearchTextFromRoute();
     this.loadOutputPreference();
     this.loadSelectedGeoField();
     this.loadRecentlyViewedModels();
@@ -6959,6 +7124,7 @@ module.exports = app => app.component('models', {
     this.destroyMap();
   },
   async mounted() {
+    window.pageState = this;
     this.onScroll = () => this.checkIfScrolledToBottom();
     document.addEventListener('scroll', this.onScroll, true);
     this.onPopState = () => this.initSearchFromUrl();
@@ -6982,6 +7148,7 @@ module.exports = app => app.component('models', {
       }
     };
     document.addEventListener('keydown', this.onCtrlP, true);
+    this.query = Object.assign({}, this.$route.query);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
     await this.loadModelCounts();
@@ -7364,14 +7531,17 @@ module.exports = app => app.component('models', {
 
       return params;
     },
-    async initSearchFromUrl() {
-      this.status = 'loading';
-      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+    setSearchTextFromRoute() {
       if (this.$route.query?.search) {
         this.searchText = this.$route.query.search;
       } else {
         this.searchText = '';
       }
+    },
+    async initSearchFromUrl() {
+      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];
@@ -8129,7 +8299,8 @@ 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');
     const openBtn = document.querySelector('#open-mobile-menu');
@@ -8183,7 +8354,7 @@ module.exports = app => app.component('navbar', {
       } else {
         return 'https://www.npmjs.com/package/@mongoosejs/task';
       }
-     
+
     }
   },
   methods: {
@@ -8413,6 +8584,7 @@ module.exports = app => app.component('splash', {
 // Page: all tasks with a given name. Reuses task-details to render the list (many tasks).
 const template = __webpack_require__(/*! ./task-by-name.html */ "./frontend/src/task-by-name/task-by-name.html");
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+const { DATE_FILTERS, DATE_FILTER_VALUES, getDateRangeForRange } = __webpack_require__(/*! ../_util/dateRange */ "./frontend/src/_util/dateRange.js");
 
 function buildTaskGroup(name, tasks) {
   const statusCounts = { pending: 0, succeeded: 0, failed: 0, cancelled: 0, in_progress: 0, unknown: 0 };
@@ -8436,44 +8608,118 @@ function buildTaskGroup(name, tasks) {
   };
 }
 
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+
 module.exports = app => app.component('task-by-name', {
   template,
   data: () => ({
     status: 'init',
     taskGroup: null,
-    errorMessage: ''
+    errorMessage: '',
+    selectedRange: 'last_hour',
+    start: null,
+    end: null,
+    dateFilters: DATE_FILTERS,
+    page: 1,
+    pageSize: 50,
+    numDocs: 0,
+    pageSizeOptions: PAGE_SIZE_OPTIONS,
+    _loadId: 0,
+    _lastQueryFilters: null
   }),
   computed: {
     taskName() {
       return this.$route.params.name || '';
     }
   },
+  created() {
+    const fromQuery = this.$route.query.dateRange;
+    this.selectedRange = (fromQuery && DATE_FILTER_VALUES.includes(fromQuery)) ? fromQuery : 'last_hour';
+    if (!this.$route.query.dateRange) {
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, dateRange: this.selectedRange }
+      });
+    }
+  },
   watch: {
     taskName: {
       immediate: true,
       handler() {
+        this.page = 1;
         this.loadTasks();
       }
+    },
+    '$route.query': {
+      handler(query) {
+        const dateRange = query.dateRange;
+        if (dateRange && DATE_FILTER_VALUES.includes(dateRange) && this.selectedRange !== dateRange) {
+          this.selectedRange = dateRange;
+        }
+        const effectiveDateRange = (dateRange && DATE_FILTER_VALUES.includes(dateRange)) ? dateRange : (this.selectedRange || 'last_hour');
+        const effectiveStatus = query.status ?? '';
+        const key = `${effectiveDateRange}|${effectiveStatus}`;
+        if (this._lastQueryFilters === key) return;
+        this.page = 1;
+        this.loadTasks();
+      },
+      deep: true
     }
   },
   methods: {
+    updateDateRange() {
+      this.page = 1;
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, dateRange: this.selectedRange }
+      });
+    },
+    goToPage(page) {
+      const maxPage = Math.max(1, Math.ceil(this.numDocs / this.pageSize));
+      const next = Math.max(1, Math.min(page, maxPage));
+      if (next === this.page) return;
+      this.page = next;
+      this.loadTasks();
+    },
+    onPageSizeChange() {
+      this.page = 1;
+      this.loadTasks();
+    },
     async loadTasks() {
       if (!this.taskName) return;
+      const loadId = ++this._loadId;
       this.status = 'init';
       this.taskGroup = null;
       this.errorMessage = '';
-      const start = new Date();
-      start.setHours(start.getHours() - 1);
-      const end = new Date();
+      const dateRangeFromQuery = this.$route.query.dateRange;
+      const dateRange = (dateRangeFromQuery && DATE_FILTER_VALUES.includes(dateRangeFromQuery))
+        ? dateRangeFromQuery
+        : (this.selectedRange || 'last_hour');
+      this.selectedRange = dateRange;
+      const { start, end } = getDateRangeForRange(dateRange);
+      this.start = start;
+      this.end = end;
+      const skip = (this.page - 1) * this.pageSize;
+      const params = {
+        name: this.taskName,
+        start: start instanceof Date ? start.toISOString() : start,
+        end: end instanceof Date ? end.toISOString() : end,
+        skip,
+        limit: this.pageSize
+      };
+      const statusFromQuery = this.$route.query.status;
+      if (statusFromQuery) params.status = statusFromQuery;
+      this._lastQueryFilters = `${dateRange}|${statusFromQuery ?? ''}`;
       try {
-        const { tasks } = await api.Task.getTasks({
-          name: this.taskName,
-          start,
-          end
-        });
+        const { tasks, numDocs, statusCounts } = await api.Task.getTasks(params);
+        if (loadId !== this._loadId) return;
+        this.numDocs = numDocs ?? tasks.length;
         this.taskGroup = buildTaskGroup(this.taskName, tasks);
+        this.taskGroup.totalCount = this.numDocs;
+        if (statusCounts) this.taskGroup.statusCounts = statusCounts;
         this.status = 'loaded';
       } catch (err) {
+        if (loadId !== this._loadId) return;
         this.status = 'error';
         this.errorMessage = err?.response?.data?.message || err.message || 'Failed to load tasks';
       }
@@ -8636,7 +8882,8 @@ const PIE_HOVER = ['#ca8a04', '#16a34a', '#dc2626', '#4b5563'];
 module.exports = app => app.component('task-details', {
   props: {
     taskGroup: { type: Object, required: true },
-    backTo: { type: Object, default: null }
+    backTo: { type: Object, default: null },
+    showBackButton: { type: Boolean, default: true }
   },
   data: () => ({
     currentFilter: null,
@@ -8977,25 +9224,17 @@ module.exports = app => app.component('task-details', {
 
 const template = __webpack_require__(/*! ./tasks.html */ "./frontend/src/tasks/tasks.html");
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+const { DATE_FILTERS, getDateRangeForRange } = __webpack_require__(/*! ../_util/dateRange */ "./frontend/src/_util/dateRange.js");
 
 module.exports = app => app.component('tasks', {
   data: () => ({
     status: 'init',
-    tasks: [],
-    groupedTasks: {},
+    statusCounts: { pending: 0, succeeded: 0, failed: 0, cancelled: 0 },
+    tasksByName: [],
     selectedRange: 'last_hour',
     start: null,
     end: null,
-    dateFilters: [
-      { value: 'all', label: 'All Time' },
-      { value: 'last_hour', label: 'Last Hour' },
-      { value: 'today', label: 'Today' },
-      { value: 'yesterday', label: 'Yesterday' },
-      { value: 'thisWeek', label: 'This Week' },
-      { value: 'lastWeek', label: 'Last Week' },
-      { value: 'thisMonth', label: 'This Month' },
-      { value: 'lastMonth', label: 'Last Month' }
-    ],
+    dateFilters: DATE_FILTERS,
     selectedStatus: 'all',
     statusFilters: [
       { label: 'All', value: 'all' },
@@ -9025,26 +9264,31 @@ module.exports = app => app.component('tasks', {
         params.status = this.selectedStatus;
       }
 
-      if (this.start && this.end) {
-        params.start = this.start;
-        params.end = this.end;
-      } else if (this.start) {
-        params.start = this.start;
+      if (this.start != null && this.end != null) {
+        params.start = this.start instanceof Date ? this.start.toISOString() : this.start;
+        params.end = this.end instanceof Date ? this.end.toISOString() : this.end;
+      } else if (this.start != null) {
+        params.start = this.start instanceof Date ? this.start.toISOString() : this.start;
       }
 
       if (this.searchQuery.trim()) {
         params.name = this.searchQuery.trim();
       }
 
-      const { tasks, groupedTasks } = await api.Task.getTasks(params);
-      this.tasks = tasks;
-      this.groupedTasks = groupedTasks;
+      const { statusCounts, tasksByName } = await api.Task.getTaskOverview(params);
+      this.statusCounts = statusCounts || this.statusCounts;
+      this.tasksByName = tasksByName || [];
     },
     openTaskGroupDetails(group) {
-      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}` });
+      const query = { dateRange: this.selectedRange || 'last_hour' };
+      if (this.selectedStatus && this.selectedStatus !== 'all') query.status = this.selectedStatus;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query });
     },
     openTaskGroupDetailsWithFilter(group, status) {
-      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query: status ? { status } : {} });
+      const query = { dateRange: this.selectedRange || 'last_hour' };
+      if (status) query.status = status;
+      else if (this.selectedStatus && this.selectedStatus !== 'all') query.status = this.selectedStatus;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query });
     },
     async onTaskCreated() {
       // Refresh the task data when a new task is created
@@ -9188,114 +9432,24 @@ module.exports = app => app.component('tasks', {
       }, 300);
     },
     async updateDateRange() {
-      const now = new Date();
-      let start, end;
-
-      switch (this.selectedRange) {
-        case 'last_hour':
-          start = new Date();
-          start.setHours(start.getHours() - 1);
-          end = new Date();
-          break;
-        case 'today':
-          start = new Date();
-          start.setHours(0, 0, 0, 0);
-          end = new Date();
-          end.setHours(23, 59, 59, 999);
-          break;
-        case 'yesterday':
-          start = new Date();
-          start.setDate(start.getDate() - 1);
-          start.setHours(0, 0, 0, 0);
-          end = new Date();
-          break;
-        case 'thisWeek':
-          start = new Date(now.getTime() - (7 * 86400000));
-          start.setHours(0, 0, 0, 0);
-          end = new Date();
-          end.setHours(23, 59, 59, 999);
-          break;
-        case 'lastWeek':
-          start = new Date(now.getTime() - (14 * 86400000));
-          start.setHours(0, 0, 0, 0);
-          end = new Date(now.getTime() - (7 * 86400000));
-          end.setHours(23, 59, 59, 999);
-          break;
-        case 'thisMonth':
-          start = new Date(now.getFullYear(), now.getMonth(), 1);
-          end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
-          break;
-        case 'lastMonth':
-          start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-          end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
-          break;
-        case 'all':
-        default:
-          this.start = null;
-          this.end = null;
-          break;
-      }
-
+      const { start, end } = getDateRangeForRange(this.selectedRange);
       this.start = start;
       this.end = end;
-
       await this.getTasks();
     }
   },
   computed: {
-    tasksByName() {
-      const groups = {};
-
-      // Process tasks from groupedTasks to create name-based groups
-      Object.entries(this.groupedTasks).forEach(([status, tasks]) => {
-        tasks.forEach(task => {
-          if (!groups[task.name]) {
-            groups[task.name] = {
-              name: task.name,
-              tasks: [],
-              statusCounts: {
-                pending: 0,
-                succeeded: 0,
-                failed: 0,
-                cancelled: 0
-              },
-              totalCount: 0,
-              lastRun: null
-            };
-          }
-
-          groups[task.name].tasks.push(task);
-          groups[task.name].totalCount++;
-
-          // Count status using the status from groupedTasks
-          if (groups[task.name].statusCounts.hasOwnProperty(status)) {
-            groups[task.name].statusCounts[status]++;
-          }
-
-          // Track last run time
-          const taskTime = new Date(task.scheduledAt || task.createdAt || 0);
-          if (!groups[task.name].lastRun || taskTime > new Date(groups[task.name].lastRun)) {
-            groups[task.name].lastRun = taskTime;
-          }
-        });
-      });
-
-      // Convert to array and sort alphabetically by name
-      return Object.values(groups).sort((a, b) => {
-        return a.name.localeCompare(b.name);
-      });
+    pendingCount() {
+      return this.statusCounts.pending || 0;
     },
     succeededCount() {
-      return this.groupedTasks.succeeded ? this.groupedTasks.succeeded.length : 0;
+      return this.statusCounts.succeeded || 0;
     },
     failedCount() {
-      return this.groupedTasks.failed ? this.groupedTasks.failed.length : 0;
+      return this.statusCounts.failed || 0;
     },
     cancelledCount() {
-      return this.groupedTasks.cancelled ? this.groupedTasks.cancelled.length : 0;
-    },
-    pendingCount() {
-      return this.groupedTasks.pending ? this.groupedTasks.pending.length : 0;
+      return this.statusCounts.cancelled || 0;
     }
   },
   mounted: async function() {
@@ -9527,6 +9681,8 @@ var map = {
 	"./": "./frontend/src/index.js",
 	"./_util/baseComponent": "./frontend/src/_util/baseComponent.js",
 	"./_util/baseComponent.js": "./frontend/src/_util/baseComponent.js",
+	"./_util/dateRange": "./frontend/src/_util/dateRange.js",
+	"./_util/dateRange.js": "./frontend/src/_util/dateRange.js",
 	"./_util/deepEqual": "./frontend/src/_util/deepEqual.js",
 	"./_util/deepEqual.js": "./frontend/src/_util/deepEqual.js",
 	"./_util/document-search-autocomplete": "./frontend/src/_util/document-search-autocomplete.js",
@@ -9586,6 +9742,9 @@ var map = {
 	"./dashboard-result/dashboard-result": "./frontend/src/dashboard-result/dashboard-result.js",
 	"./dashboard-result/dashboard-result.html": "./frontend/src/dashboard-result/dashboard-result.html",
 	"./dashboard-result/dashboard-result.js": "./frontend/src/dashboard-result/dashboard-result.js",
+	"./dashboard-result/dashboard-table/dashboard-table": "./frontend/src/dashboard-result/dashboard-table/dashboard-table.js",
+	"./dashboard-result/dashboard-table/dashboard-table.html": "./frontend/src/dashboard-result/dashboard-table/dashboard-table.html",
+	"./dashboard-result/dashboard-table/dashboard-table.js": "./frontend/src/dashboard-result/dashboard-table/dashboard-table.js",
 	"./dashboard-result/dashboard-text/dashboard-text": "./frontend/src/dashboard-result/dashboard-text/dashboard-text.js",
 	"./dashboard-result/dashboard-text/dashboard-text.html": "./frontend/src/dashboard-result/dashboard-text/dashboard-text.html",
 	"./dashboard-result/dashboard-text/dashboard-text.js": "./frontend/src/dashboard-result/dashboard-text/dashboard-text.js",
@@ -49468,7 +49627,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 (module) {
 
 "use strict";
-module.exports = "<div class=\"chat-message-script relative border rounded bg-surface my-1 text-content text-sm overflow-hidden\">\n  <div class=\"flex border-b py-1 pl-1 text-xs font-medium bg-surface\">\n    <button\n      class=\"px-4 py-1 border-r border-edge-strong text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-l-md',\n        activeTab === 'code'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-4 py-1 text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-r-md',\n        activeTab === 'output'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex items-center\">\n      <button\n        v-if=\"activeTab === 'output' && isChartOutput\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center\"\n        @click=\"exportChartPNG\"\n        title=\"Export PNG\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        class=\"px-2 py-1 mr-1 text-xs bg-page0 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z\" />\n        </svg>\n      </button>\n      <async-button\n        v-if=\"!isEditing\"\n        class=\"px-2 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-none rounded cursor-pointer transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript\">\n        Run\n      </async-button>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"copyOutput(); showDropdown = false\">\n            Copy Output As Text\n          </button>\n          <button\n            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2 chat-script-editor-wrap\">\n      <div class=\"border border-edge\">\n        <ace-editor\n          v-model=\"editedScript\"\n          mode=\"javascript\"\n          :line-numbers=\"true\"\n          class=\"w-full h-[45vh] min-h-[200px]\"\n        />\n      </div>\n      <div class=\"flex justify-end gap-2 pb-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          class=\"px-2 py-1 text-xs bg-blue-600 text-white border-none rounded cursor-pointer hover:bg-blue-700 transition-colors disabled:bg-gray-400\"\n          @click=\"executeScript\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap !my-0 bg-muted\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" ref=\"chartOutput\" />\n    <dashboard-map v-else-if=\"message.executionResult?.output?.$featureCollection\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-edge\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <dashboard-map\n          v-else-if=\"message.executionResult?.output?.$featureCollection\"\n          :value=\"message.executionResult?.output\"\n          height=\"80vh\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Code</label>\n          <div class=\"border border-edge\">\n            <ace-editor\n              v-model=\"dashboardCode\"\n              mode=\"javascript\"\n              :line-numbers=\"true\"\n              class=\"h-[300px] w-full\"\n            />\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createError\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-edge bg-page rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\n            class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-content-secondary bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"chat-message-script relative border rounded bg-surface my-1 text-content text-sm overflow-hidden\">\n  <div class=\"flex border-b py-1 pl-1 text-xs font-medium bg-surface\">\n    <button\n      class=\"px-4 py-1 border-r border-edge-strong text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-l-md',\n        activeTab === 'code'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-4 py-1 text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-r-md',\n        activeTab === 'output'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex items-center\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        class=\"px-2 py-1 mr-1 text-xs bg-page0 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z\" />\n        </svg>\n      </button>\n      <async-button\n        v-if=\"!isEditing\"\n        class=\"px-2 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-none rounded cursor-pointer transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript\">\n        Run\n      </async-button>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"copyOutput(); showDropdown = false\">\n            Copy Output As Text\n          </button>\n          <button\n            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2 chat-script-editor-wrap\">\n      <div class=\"border border-edge\">\n        <ace-editor\n          v-model=\"editedScript\"\n          mode=\"javascript\"\n          :line-numbers=\"true\"\n          class=\"w-full h-[45vh] min-h-[200px]\"\n        />\n      </div>\n      <div class=\"flex justify-end gap-2 pb-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          class=\"px-2 py-1 text-xs bg-blue-600 text-white border-none rounded cursor-pointer hover:bg-blue-700 transition-colors disabled:bg-gray-400\"\n          @click=\"executeScript\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap !my-0 bg-muted\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-result\n      v-if=\"message.executionResult?.output != null\"\n      :result=\"message.executionResult.output\">\n    </dashboard-result>\n    <pre v-else>No output</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-edge\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-result\n          v-if=\"message.executionResult?.output != null\"\n          :result=\"message.executionResult.output\"\n          :fullscreen=\"true\">\n        </dashboard-result>\n        <pre v-else class=\"whitespace-pre-wrap\">No output</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Code</label>\n          <div class=\"border border-edge\">\n            <ace-editor\n              v-model=\"dashboardCode\"\n              mode=\"javascript\"\n              :line-numbers=\"true\"\n              class=\"h-[300px] w-full\"\n            />\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createError\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-edge bg-page rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\n            class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-content-secondary bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -49626,6 +49785,17 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 
 /***/ },
 
+/***/ "./frontend/src/dashboard-result/dashboard-table/dashboard-table.html"
+/*!****************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-table/dashboard-table.html ***!
+  \****************************************************************************/
+(module) {
+
+"use strict";
+module.exports = "<div class=\"overflow-x-auto\">\n  <table class=\"min-w-full border-separate border-spacing-0\">\n    <thead v-if=\"hasColumns\" class=\"bg-slate-50\">\n      <tr>\n        <th\n          v-for=\"(column, index) in columns\"\n          :key=\"'column-' + index\"\n          class=\"bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge\"\n        >\n          {{ column }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr v-for=\"(row, rowIndex) in rows\" :key=\"'row-' + rowIndex\" class=\"bg-surface hover:bg-slate-50\">\n        <td\n          v-for=\"(cell, columnIndex) in row\"\n          :key=\"'cell-' + rowIndex + '-' + columnIndex\"\n          class=\"p-3 text-sm text-content border-b border-edge\"\n        >\n          {{ displayValue(cell) }}\n        </td>\n      </tr>\n      <tr v-if=\"!hasRows\">\n        <td\n          :colspan=\"Math.max(columns.length, 1)\"\n          class=\"p-3 text-sm text-content-tertiary border-b border-edge\"\n        >\n          No rows\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n";
+
+/***/ },
+
 /***/ "./frontend/src/dashboard-result/dashboard-text/dashboard-text.html"
 /*!**************************************************************************!*\
   !*** ./frontend/src/dashboard-result/dashboard-text/dashboard-text.html ***!
@@ -50139,7 +50309,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  <task-details\n    v-else-if=\"taskGroup\"\n    :task-group=\"taskGroup\"\n    :back-to=\"{ name: 'tasks' }\"\n    @task-created=\"onTaskCreated\"\n    @task-cancelled=\"onTaskCancelled\"\n  ></task-details>\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-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";
 
 /***/ },
 
@@ -50161,7 +50331,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 @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-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";
 
 /***/ },
 
@@ -61497,7 +61667,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.3.0","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","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 .","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.2","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"}}');
 
 /***/ }