@mongoosejs/studio 0.2.11 → 0.2.13

package/frontend/public/app.js

@@ -479,6 +479,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         yield { document: doc };
       }
     },
+    getEstimatedDocumentCounts: function getEstimatedDocumentCounts() {
+      return client.post('', { action: 'Model.getEstimatedDocumentCounts' }).then(res => res.data);
+    },
     streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
       const pollIntervalMs = 5000;
       while (!options.signal?.aborted) {
@@ -729,6 +732,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         }
       }
     },
+    getEstimatedDocumentCounts: function getEstimatedDocumentCounts() {
+      return client.post('/Model/getEstimatedDocumentCounts', {}).then(res => res.data);
+    },
     streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamDocumentChanges?' + new URLSearchParams(params).toString();
@@ -4502,11 +4508,17 @@ module.exports = app => app.component('document', {
   }),
   async mounted() {
     window.pageState = this;
+    if (typeof window !== 'undefined' && window.addEventListener) {
+      window.addEventListener('keydown', this.handleSaveShortcut);
+    }
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
     await this.refreshDocument({ force: true, source: 'initial' });
   },
-  beforeDestroy() {
+  beforeUnmount() {
+    if (typeof window !== 'undefined' && window.removeEventListener) {
+      window.removeEventListener('keydown', this.handleSaveShortcut);
+    }
     this.stopAutoRefresh();
   },
   computed: {
@@ -4536,6 +4548,13 @@ module.exports = app => app.component('document', {
     canEdit() {
       return this.canManipulate && this.viewMode === 'fields';
     },
+    keyboardShortcuts() {
+      const shortcuts = [];
+      if (this.editting && this.canManipulate) {
+        shortcuts.push({ command: 'Ctrl + S', description: 'Save document' });
+      }
+      return shortcuts;
+    },
     isLambda() {
       return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
     }
@@ -4548,6 +4567,19 @@ module.exports = app => app.component('document', {
     }
   },
   methods: {
+    handleSaveShortcut(event) {
+      const key = typeof event?.key === 'string' ? event.key.toLowerCase() : '';
+      const isSaveShortcut = (event.ctrlKey || event.metaKey) && key === 's';
+      if (!isSaveShortcut) {
+        return;
+      }
+      if (!this.editting || !this.canManipulate) {
+        return;
+      }
+
+      event.preventDefault();
+      this.shouldShowConfirmModal = true;
+    },
     cancelEdit() {
       this.changes = {};
       this.editting = false;
@@ -6578,6 +6610,7 @@ module.exports = app => app.component('models', {
   data: () => ({
     models: [],
     currentModel: null,
+    modelDocumentCounts: {},
     documents: [],
     schemaPaths: [],
     filteredPaths: [],
@@ -6642,6 +6675,7 @@ module.exports = app => app.component('models', {
     document.addEventListener('click', this.onOutsideActionsMenuClick, true);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
+    await this.loadModelCounts();
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
@@ -7147,6 +7181,25 @@ module.exports = app => app.component('models', {
 
       return value.toLocaleString();
     },
+    formatCompactCount(value) {
+      if (typeof value !== 'number') {
+        return '—';
+      }
+      if (value < 1000) {
+        return `${value}`;
+      }
+      const formatValue = (number, suffix) => {
+        const rounded = (Math.round(number * 10) / 10).toFixed(1).replace(/\.0$/, '');
+        return `${rounded}${suffix}`;
+      };
+      if (value < 1000000) {
+        return formatValue(value / 1000, 'k');
+      }
+      if (value < 1000000000) {
+        return formatValue(value / 1000000, 'M');
+      }
+      return formatValue(value / 1000000000, 'B');
+    },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
         return 'text-gray-500';
@@ -7400,6 +7453,19 @@ module.exports = app => app.component('models', {
       } else {
         this.selectMultiple = true;
       }
+    },
+    async loadModelCounts() {
+      if (!Array.isArray(this.models) || this.models.length === 0) {
+        return;
+      }
+      try {
+        const { counts } = await api.Model.getEstimatedDocumentCounts();
+        if (counts && typeof counts === 'object') {
+          this.modelDocumentCounts = counts;
+        }
+      } catch (err) {
+        console.error('Failed to load model document counts', err);
+      }
     }
   }
 });
@@ -7693,7 +7759,7 @@ module.exports = app => app.component('navbar', {
       return ['chat index', 'chat'].includes(this.$route.name);
     },
     taskView() {
-      return ['tasks'].includes(this.$route.name);
+      return ['tasks', 'taskByName', 'taskSingle'].includes(this.$route.name);
     },
     routeName() {
       return this.$route.name;
@@ -7770,14 +7836,14 @@ module.exports = app => app.component('navbar', {
 
 // Role-based access control configuration
 const roleAccess = {
-  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
-  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
-  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat'],
+  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat', 'tasks', 'taskByName', 'taskSingle'],
+  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat', 'tasks', 'taskByName', 'taskSingle'],
+  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat', 'tasks', 'taskByName', 'taskSingle'],
   readonly: ['root', 'model', 'document', 'chat'],
   dashboards: ['dashboards', 'dashboard']
 };
 
-const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model'];
+const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model', 'tasks', 'taskByName', 'taskSingle'];
 
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
@@ -7844,6 +7910,22 @@ module.exports = {
         authorized: true
       }
     },
+    {
+      path: '/tasks/:name',
+      name: 'taskByName',
+      component: 'task-by-name',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/tasks/:name/:id',
+      name: 'taskSingle',
+      component: 'task-single',
+      meta: {
+        authorized: true
+      }
+    },
     {
       path: '/chat',
       name: 'chat index',
@@ -7903,6 +7985,222 @@ module.exports = app => app.component('splash', {
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/task-by-name/task-by-name.js"
+/*!***************************************************!*\
+  !*** ./frontend/src/task-by-name/task-by-name.js ***!
+  \***************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+// 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");
+
+function buildTaskGroup(name, tasks) {
+  const statusCounts = { pending: 0, succeeded: 0, failed: 0, cancelled: 0, in_progress: 0, unknown: 0 };
+  let lastRun = null;
+  tasks.forEach(task => {
+    const status = task.status || 'unknown';
+    if (Object.prototype.hasOwnProperty.call(statusCounts, status)) {
+      statusCounts[status]++;
+    } else {
+      statusCounts.unknown++;
+    }
+    const taskTime = new Date(task.scheduledAt || task.createdAt || 0);
+    if (!lastRun || taskTime > lastRun) lastRun = taskTime;
+  });
+  return {
+    name,
+    tasks,
+    statusCounts,
+    totalCount: tasks.length,
+    lastRun
+  };
+}
+
+module.exports = app => app.component('task-by-name', {
+  template,
+  data: () => ({
+    status: 'init',
+    taskGroup: null,
+    errorMessage: ''
+  }),
+  computed: {
+    taskName() {
+      return this.$route.params.name || '';
+    }
+  },
+  watch: {
+    taskName: {
+      immediate: true,
+      handler() {
+        this.loadTasks();
+      }
+    }
+  },
+  methods: {
+    async loadTasks() {
+      if (!this.taskName) return;
+      this.status = 'init';
+      this.taskGroup = null;
+      this.errorMessage = '';
+      const start = new Date();
+      start.setHours(start.getHours() - 1);
+      const end = new Date();
+      try {
+        const { tasks } = await api.Task.getTasks({
+          name: this.taskName,
+          start,
+          end
+        });
+        this.taskGroup = buildTaskGroup(this.taskName, tasks);
+        this.status = 'loaded';
+      } catch (err) {
+        this.status = 'error';
+        this.errorMessage = err?.response?.data?.message || err.message || 'Failed to load tasks';
+      }
+    },
+    async onTaskCreated() {
+      await this.loadTasks();
+    },
+    async onTaskCancelled() {
+      await this.loadTasks();
+    }
+  }
+});
+
+
+/***/ },
+
+/***/ "./frontend/src/task-single/task-single.js"
+/*!*************************************************!*\
+  !*** ./frontend/src/task-single/task-single.js ***!
+  \*************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+// Page: one task by id. Dedicated single-task detail UI (not the list).
+const template = __webpack_require__(/*! ./task-single.html */ "./frontend/src/task-single/task-single.html");
+const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+
+module.exports = app => app.component('task-single', {
+  template,
+  data: () => ({
+    status: 'init',
+    task: null,
+    errorMessage: '',
+    showRescheduleModal: false,
+    showRunModal: false,
+    showCancelModal: false,
+    selectedTask: null,
+    newScheduledTime: ''
+  }),
+  computed: {
+    taskId() {
+      return this.$route.params.id || '';
+    },
+    taskByNamePath() {
+      const name = this.task?.name ?? this.$route.params.name ?? '';
+      const path = `/tasks/${encodeURIComponent(name || '')}`;
+      const query = this.$route.query?.status ? { status: this.$route.query.status } : {};
+      return { path, query };
+    },
+  },
+  watch: {
+    '$route.params': {
+      deep: true,
+      handler() {
+        this.loadTask();
+      }
+    }
+  },
+  methods: {
+    getStatusColor(status) {
+      if (status === 'succeeded') return 'bg-green-100 text-green-800';
+      if (status === 'pending') return 'bg-yellow-100 text-yellow-800';
+      if (status === 'cancelled') return 'bg-gray-100 text-gray-800';
+      if (status === 'failed') return 'bg-red-100 text-red-800';
+      if (status === 'in_progress') return 'bg-blue-100 text-blue-800';
+      return 'bg-slate-100 text-slate-800';
+    },
+    formatDate(dateString) {
+      if (!dateString) return 'N/A';
+      return new Date(dateString).toLocaleString();
+    },
+    async loadTask() {
+      if (!this.taskId) return;
+      this.status = 'init';
+      this.task = null;
+      this.errorMessage = '';
+      try {
+        const { doc } = await api.Model.getDocument({ model: 'Task', documentId: this.taskId });
+        this.task = doc;
+        this.status = 'loaded';
+      } catch (err) {
+        const status = err?.response?.status;
+        const notFound = status === 404 || err?.response?.data?.name === 'DocumentNotFoundError';
+        this.status = notFound ? 'notfound' : 'error';
+        this.errorMessage = notFound ? '' : (err?.response?.data?.message || err.message || 'Failed to load task');
+      }
+    },
+    showRescheduleConfirmation(task) {
+      this.selectedTask = task;
+      const defaultTime = new Date();
+      defaultTime.setHours(defaultTime.getHours() + 1);
+      this.newScheduledTime = defaultTime.toISOString().slice(0, 16);
+      this.showRescheduleModal = true;
+    },
+    showRunConfirmation(task) {
+      this.selectedTask = task;
+      this.showRunModal = true;
+    },
+    showCancelConfirmation(task) {
+      this.selectedTask = task;
+      this.showCancelModal = true;
+    },
+    async confirmRescheduleTask() {
+      if (!this.newScheduledTime) return;
+      await api.Task.rescheduleTask({ taskId: this.selectedTask.id, scheduledAt: this.newScheduledTime });
+        this.$toast.success({ title: 'Task Rescheduled', text: `Task ${this.selectedTask.id} has been rescheduled`,  });
+        this.showRescheduleModal = false;
+        this.selectedTask = null;
+        this.newScheduledTime = '';
+        await this.loadTask();
+    },
+    async confirmRunTask() {
+      await api.Task.runTask({ taskId: this.selectedTask.id });
+      this.$toast.success({ title: 'Task Started', text: `Task ${this.selectedTask.id} is now running`, type: 'success' });
+      this.showRunModal = false;
+      this.selectedTask = null;
+      await this.loadTask();
+    },
+    goBack() {
+      if (window.history.length > 1) {
+        window.history.back();
+      } else {
+        this.$router.push(this.taskByNamePath);
+      }
+    },
+    async confirmCancelTask() {
+      await api.Task.cancelTask({ taskId: this.selectedTask.id });
+        this.$toast.success({ title: 'Task Cancelled', text: `Task ${this.selectedTask.id} has been cancelled` });
+        this.showCancelModal = false;
+        this.selectedTask = null;
+        this.goBack();
+    }
+  },
+  mounted() {
+    this.loadTask();
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/tasks/task-details/task-details.js"
@@ -7917,16 +8215,30 @@ module.exports = app => app.component('splash', {
 const template = __webpack_require__(/*! ./task-details.html */ "./frontend/src/tasks/task-details/task-details.html");
 const api = __webpack_require__(/*! ../../api */ "./frontend/src/api.js");
 
+const STATUS_ORDER = ['pending', 'succeeded', 'failed', 'cancelled'];
+const PIE_COLORS = ['#eab308', '#22c55e', '#ef4444', '#6b7280'];
+const PIE_HOVER = ['#ca8a04', '#16a34a', '#dc2626', '#4b5563'];
+
 module.exports = app => app.component('task-details', {
-  props: ['taskGroup', 'currentFilter'],
+  props: {
+    taskGroup: { type: Object, required: true },
+    backTo: { type: Object, default: null }
+  },
   data: () => ({
+    currentFilter: null,
     showRescheduleModal: false,
     showRunModal: false,
     showCancelModal: false,
     selectedTask: null,
-    newScheduledTime: ''
+    newScheduledTime: '',
+    statusView: 'summary',
+    statusChart: null
   }),
   computed: {
+    backLabel() {
+      if (this.backTo?.path?.startsWith('/tasks/') || this.backTo?.name === 'taskByName') return `Back to ${this.taskGroup?.name || 'tasks'}`;
+      return 'Back to Task Groups';
+    },
     sortedTasks() {
       let tasks = this.taskGroup.tasks;
 
@@ -7940,9 +8252,123 @@ module.exports = app => app.component('task-details', {
         const dateB = new Date(b.scheduledAt || b.createdAt || 0);
         return dateB - dateA; // Most recent first
       });
+    },
+    pieChartData() {
+      const counts = this.taskGroup?.statusCounts || {};
+      return {
+        labels: ['Pending', 'Succeeded', 'Failed', 'Cancelled'],
+        datasets: [{
+          data: STATUS_ORDER.map(s => counts[s] || 0),
+          backgroundColor: PIE_COLORS,
+          hoverBackgroundColor: PIE_HOVER,
+          borderWidth: 2,
+          borderColor: '#fff'
+        }]
+      };
+    },
+    statusOrderForDisplay() {
+      return STATUS_ORDER;
     }
   },
+  watch: {
+    '$route.query.status': {
+      handler(status) {
+        this.currentFilter = status || null;
+      },
+      immediate: true
+    },
+    statusView(val) {
+      if (val !== 'chart') this.destroyStatusChart();
+      else {
+        this.$nextTick(() => {
+          requestAnimationFrame(() => this.ensureStatusChart());
+        });
+      }
+    },
+    taskGroup: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          requestAnimationFrame(() => this.ensureStatusChart());
+        });
+      }
+    },
+  },
   methods: {
+    destroyStatusChart() {
+      if (this.statusChart) {
+        try {
+          this.statusChart.destroy();
+        } catch (_) {
+          // ignore Chart.js teardown errors
+        }
+        this.statusChart = null;
+      }
+    },
+    isChartCanvasReady(canvas) {
+      return canvas && typeof canvas.getContext === 'function' && canvas.isConnected && canvas.offsetParent != null;
+    },
+    ensureStatusChart() {
+      if (this.statusView !== 'chart' || !this.taskGroup || this.taskGroup.totalCount === 0) {
+        this.destroyStatusChart();
+        return;
+      }
+      const canvas = this.$refs.statusPieChart;
+      if (!canvas || !this.isChartCanvasReady(canvas)) return;
+      const Chart = typeof window !== 'undefined' && window.Chart;
+      if (!Chart) return;
+      const data = this.pieChartData;
+      if (this.statusChart) {
+        try {
+          this.statusChart.data.labels = data.labels;
+          this.statusChart.data.datasets[0].data = data.datasets[0].data;
+          this.statusChart.update('none');
+        } catch (_) {
+          this.destroyStatusChart();
+        }
+        return;
+      }
+      try {
+        this.statusChart = new Chart(canvas, {
+          type: 'doughnut',
+          data,
+          options: {
+            responsive: false,
+            maintainAspectRatio: false,
+            animation: false,
+            layout: {
+              padding: 8
+            },
+            onClick: (_evt, elements) => {
+              if (elements && elements.length > 0) {
+                const status = STATUS_ORDER[elements[0].index];
+                this.$nextTick(() => this.filterByStatus(status));
+              }
+            },
+            plugins: {
+              legend: {
+                display: true,
+                position: 'bottom'
+              }
+            }
+          }
+        });
+      } catch (_) {
+        this.statusChart = null;
+      }
+    },
+    statusLabel(status) {
+      return status.charAt(0).toUpperCase() + status.slice(1).replace('_', ' ');
+    },
+    getStatusPillClass(status) {
+      const classes = {
+        pending: 'bg-yellow-200 text-yellow-900 ring-2 ring-yellow-500',
+        succeeded: 'bg-green-200 text-green-900 ring-2 ring-green-500',
+        failed: 'bg-red-200 text-red-900 ring-2 ring-red-500',
+        cancelled: 'bg-gray-200 text-gray-900 ring-2 ring-gray-500'
+      };
+      return classes[status] || 'bg-slate-200 text-slate-900 ring-2 ring-slate-500';
+    },
     getStatusColor(status) {
       if (status === 'succeeded') {
         return 'bg-green-100 text-green-800';
@@ -7979,15 +8405,35 @@ module.exports = app => app.component('task-details', {
       this.$emit('task-cancelled');
     },
     filterByStatus(status) {
-      // If clicking the same status, clear the filter
-      if (this.currentFilter === status) {
-        this.$emit('update:currentFilter', null);
+      const next = this.currentFilter === status ? null : status;
+      this.currentFilter = next;
+      const query = { ...this.$route.query };
+      if (next) query.status = next;
+      else delete query.status;
+      this.$router.replace({ path: this.$route.path, query });
+    },
+    clearFilter() {
+      this.currentFilter = null;
+      const query = { ...this.$route.query };
+      delete query.status;
+      this.$router.replace({ path: this.$route.path, query });
+    },
+    goBack() {
+      if (this.backTo) {
+        if (window.history.length > 1) {
+          window.history.back();
+        } else {
+          this.$router.push(this.backTo);
+        }
       } else {
-        this.$emit('update:currentFilter', status);
+        this.$emit('back');
       }
     },
-    clearFilter() {
-      this.$emit('update:currentFilter', null);
+    taskDetailRoute(task) {
+      const id = String(task.id || task._id);
+      const path = `/tasks/${encodeURIComponent(this.taskGroup.name || '')}/${id}`;
+      const query = this.currentFilter ? { status: this.currentFilter } : {};
+      return { path, query };
     },
     showRescheduleConfirmation(task) {
       this.selectedTask = task;
@@ -8087,11 +8533,14 @@ module.exports = app => app.component('task-details', {
 
   },
   mounted() {
-    // Check if the task group was already filtered when passed from parent
     if (this.taskGroup.filteredStatus && !this.currentFilter) {
-      this.$emit('update:currentFilter', this.taskGroup.filteredStatus);
+      this.currentFilter = this.taskGroup.filteredStatus;
+      this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, status: this.taskGroup.filteredStatus } });
     }
   },
+  beforeUnmount() {
+    this.destroyStatusChart();
+  },
   template: template
 });
 
@@ -8115,11 +8564,12 @@ module.exports = app => app.component('tasks', {
     status: 'init',
     tasks: [],
     groupedTasks: {},
-    selectedRange: 'today',
+    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' },
@@ -8138,10 +8588,6 @@ module.exports = app => app.component('tasks', {
     ],
     searchQuery: '',
     searchTimeout: null,
-    // Task details view state
-    showTaskDetails: false,
-    selectedTaskGroup: null,
-    taskDetailsFilter: null,
     // Create task modal state
     showCreateTaskModal: false,
     newTask: {
@@ -8177,28 +8623,10 @@ module.exports = app => app.component('tasks', {
       this.groupedTasks = groupedTasks;
     },
     openTaskGroupDetails(group) {
-      this.selectedTaskGroup = group;
-      this.showTaskDetails = true;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}` });
     },
     openTaskGroupDetailsWithFilter(group, status) {
-      // Create a filtered version of the task group with only the specified status
-      const filteredGroup = {
-        ...group,
-        tasks: group.tasks.filter(task => task.status === status),
-        filteredStatus: status
-      };
-      this.selectedTaskGroup = filteredGroup;
-      this.taskDetailsFilter = status;
-      this.showTaskDetails = true;
-    },
-    async onTaskCancelled() {
-      // Refresh the task data when a task is cancelled
-      await this.getTasks();
-    },
-    hideTaskDetails() {
-      this.showTaskDetails = false;
-      this.selectedTaskGroup = null;
-      this.taskDetailsFilter = null;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query: status ? { status } : {} });
     },
     async onTaskCreated() {
       // Refresh the task data when a new task is created
@@ -8362,6 +8790,11 @@ module.exports = app => app.component('tasks', {
       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);
@@ -8880,6 +9313,12 @@ var map = {
 	"./splash/splash": "./frontend/src/splash/splash.js",
 	"./splash/splash.html": "./frontend/src/splash/splash.html",
 	"./splash/splash.js": "./frontend/src/splash/splash.js",
+	"./task-by-name/task-by-name": "./frontend/src/task-by-name/task-by-name.js",
+	"./task-by-name/task-by-name.html": "./frontend/src/task-by-name/task-by-name.html",
+	"./task-by-name/task-by-name.js": "./frontend/src/task-by-name/task-by-name.js",
+	"./task-single/task-single": "./frontend/src/task-single/task-single.js",
+	"./task-single/task-single.html": "./frontend/src/task-single/task-single.html",
+	"./task-single/task-single.js": "./frontend/src/task-single/task-single.js",
 	"./tasks/task-details/task-details": "./frontend/src/tasks/task-details/task-details.js",
 	"./tasks/task-details/task-details.html": "./frontend/src/tasks/task-details/task-details.html",
 	"./tasks/task-details/task-details.js": "./frontend/src/tasks/task-details/task-details.js",
@@ -8983,7 +9422,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _vue_shared__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/reactivity v3.5.27
+* @vue/reactivity v3.5.29
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -8995,6 +9434,7 @@ function warn(msg, ...args) {
 
 let activeEffectScope;
 class EffectScope {
+  // TODO isolatedDeclarations "__v_skip"
   constructor(detached = false) {
     this.detached = detached;
     /**
@@ -9014,6 +9454,7 @@ class EffectScope {
      */
     this.cleanups = [];
     this._isPaused = false;
+    this.__v_skip = true;
     this.parent = activeEffectScope;
     if (!detached && activeEffectScope) {
       this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -11121,7 +11562,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_reactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/reactivity */ "./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
 /* harmony import */ var _vue_shared__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/runtime-core v3.5.27
+* @vue/runtime-core v3.5.29
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -12326,7 +12767,22 @@ function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }
 function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
   o: { nextSibling, parentNode, querySelector, insert, createText }
 }, hydrateChildren) {
-  function hydrateDisabledTeleport(node2, vnode2, targetStart, targetAnchor) {
+  function hydrateAnchor(target2, targetNode) {
+    let targetAnchor = targetNode;
+    while (targetAnchor) {
+      if (targetAnchor && targetAnchor.nodeType === 8) {
+        if (targetAnchor.data === "teleport start anchor") {
+          vnode.targetStart = targetAnchor;
+        } else if (targetAnchor.data === "teleport anchor") {
+          vnode.targetAnchor = targetAnchor;
+          target2._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+          break;
+        }
+      }
+      targetAnchor = nextSibling(targetAnchor);
+    }
+  }
+  function hydrateDisabledTeleport(node2, vnode2) {
     vnode2.anchor = hydrateChildren(
       nextSibling(node2),
       vnode2,
@@ -12336,8 +12792,6 @@ function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScope
       slotScopeIds,
       optimized
     );
-    vnode2.targetStart = targetStart;
-    vnode2.targetAnchor = targetAnchor;
   }
   const target = vnode.target = resolveTarget(
     vnode.props,
@@ -12348,27 +12802,22 @@ function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScope
     const targetNode = target._lpa || target.firstChild;
     if (vnode.shapeFlag & 16) {
       if (disabled) {
-        hydrateDisabledTeleport(
-          node,
-          vnode,
-          targetNode,
-          targetNode && nextSibling(targetNode)
-        );
+        hydrateDisabledTeleport(node, vnode);
+        hydrateAnchor(target, targetNode);
+        if (!vnode.targetAnchor) {
+          prepareAnchor(
+            target,
+            vnode,
+            createText,
+            insert,
+            // if target is the same as the main view, insert anchors before current node
+            // to avoid hydrating mismatch
+            parentNode(node) === target ? node : null
+          );
+        }
       } else {
         vnode.anchor = nextSibling(node);
-        let targetAnchor = targetNode;
-        while (targetAnchor) {
-          if (targetAnchor && targetAnchor.nodeType === 8) {
-            if (targetAnchor.data === "teleport start anchor") {
-              vnode.targetStart = targetAnchor;
-            } else if (targetAnchor.data === "teleport anchor") {
-              vnode.targetAnchor = targetAnchor;
-              target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
-              break;
-            }
-          }
-          targetAnchor = nextSibling(targetAnchor);
-        }
+        hydrateAnchor(target, targetNode);
         if (!vnode.targetAnchor) {
           prepareAnchor(target, vnode, createText, insert);
         }
@@ -12386,7 +12835,9 @@ function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScope
     updateCssVars(vnode, disabled);
   } else if (disabled) {
     if (vnode.shapeFlag & 16) {
-      hydrateDisabledTeleport(node, vnode, node, nextSibling(node));
+      hydrateDisabledTeleport(node, vnode);
+      vnode.targetStart = node;
+      vnode.targetAnchor = nextSibling(node);
     }
   }
   return vnode.anchor && nextSibling(vnode.anchor);
@@ -12410,13 +12861,13 @@ function updateCssVars(vnode, isDisabled) {
     ctx.ut();
   }
 }
-function prepareAnchor(target, vnode, createText, insert) {
+function prepareAnchor(target, vnode, createText, insert, anchor = null) {
   const targetStart = vnode.targetStart = createText("");
   const targetAnchor = vnode.targetAnchor = createText("");
   targetStart[TeleportEndKey] = targetAnchor;
   if (target) {
-    insert(targetStart, target);
-    insert(targetAnchor, target);
+    insert(targetStart, target, anchor);
+    insert(targetAnchor, target, anchor);
   }
   return targetAnchor;
 }
@@ -12640,6 +13091,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
       callHook(hook, [el]);
     },
     enter(el) {
+      if (leavingVNodesCache[key] === vnode) return;
       let hook = onEnter;
       let afterHook = onAfterEnter;
       let cancelHook = onEnterCancelled;
@@ -12653,7 +13105,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
         }
       }
       let called = false;
-      const done = el[enterCbKey] = (cancelled) => {
+      el[enterCbKey] = (cancelled) => {
         if (called) return;
         called = true;
         if (cancelled) {
@@ -12666,6 +13118,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
         }
         el[enterCbKey] = void 0;
       };
+      const done = el[enterCbKey].bind(null, false);
       if (hook) {
         callAsyncHook(hook, [el, done]);
       } else {
@@ -12685,7 +13138,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
       }
       callHook(onBeforeLeave, [el]);
       let called = false;
-      const done = el[leaveCbKey] = (cancelled) => {
+      el[leaveCbKey] = (cancelled) => {
         if (called) return;
         called = true;
         remove();
@@ -12699,6 +13152,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
           delete leavingVNodesCache[key2];
         }
       };
+      const done = el[leaveCbKey].bind(null, false);
       leavingVNodesCache[key2] = vnode;
       if (onLeave) {
         callAsyncHook(onLeave, [el, done]);
@@ -12811,8 +13265,7 @@ function useTemplateRef(key) {
   const r = (0,_vue_reactivity__WEBPACK_IMPORTED_MODULE_0__.shallowRef)(null);
   if (i) {
     const refs = i.refs === _vue_shared__WEBPACK_IMPORTED_MODULE_1__.EMPTY_OBJ ? i.refs = {} : i.refs;
-    let desc;
-    if ( true && (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
+    if ( true && isTemplateRefKey(refs, key)) {
       warn$1(`useTemplateRef('${key}') already exists.`);
     } else {
       Object.defineProperty(refs, key, {
@@ -12832,6 +13285,10 @@ function useTemplateRef(key) {
   }
   return ret;
 }
+function isTemplateRefKey(refs, key) {
+  let desc;
+  return !!((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable);
+}
 
 const pendingSetRefMap = /* @__PURE__ */ new WeakMap();
 function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
@@ -12877,10 +13334,19 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
         return false;
       }
     }
+    if (isTemplateRefKey(refs, key)) {
+      return false;
+    }
     return (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.hasOwn)(rawSetupState, key);
   };
-  const canSetRef = (ref2) => {
-    return  false || !knownTemplateRefs.has(ref2);
+  const canSetRef = (ref2, key) => {
+    if ( true && knownTemplateRefs.has(ref2)) {
+      return false;
+    }
+    if (key && isTemplateRefKey(refs, key)) {
+      return false;
+    }
+    return true;
   };
   if (oldRef != null && oldRef !== ref) {
     invalidatePendingSetRef(oldRawRef);
@@ -12890,10 +13356,10 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
         setupState[oldRef] = null;
       }
     } else if ((0,_vue_reactivity__WEBPACK_IMPORTED_MODULE_0__.isRef)(oldRef)) {
-      if (canSetRef(oldRef)) {
+      const oldRawRefAtom = oldRawRef;
+      if (canSetRef(oldRef, oldRawRefAtom.k)) {
         oldRef.value = null;
       }
-      const oldRawRefAtom = oldRawRef;
       if (oldRawRefAtom.k) refs[oldRawRefAtom.k] = null;
     }
   }
@@ -12917,7 +13383,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
                 }
               } else {
                 const newVal = [refValue];
-                if (canSetRef(ref)) {
+                if (canSetRef(ref, rawRef.k)) {
                   ref.value = newVal;
                 }
                 if (rawRef.k) refs[rawRef.k] = newVal;
@@ -12932,7 +13398,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
             setupState[ref] = value;
           }
         } else if (_isRef) {
-          if (canSetRef(ref)) {
+          if (canSetRef(ref, rawRef.k)) {
             ref.value = value;
           }
           if (rawRef.k) refs[rawRef.k] = value;
@@ -14726,13 +15192,24 @@ function withAsyncContext(getAwaitable) {
   }
   let awaitable = getAwaitable();
   unsetCurrentInstance();
+  const cleanup = () => {
+    if (getCurrentInstance() !== ctx) ctx.scope.off();
+    unsetCurrentInstance();
+  };
   if ((0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isPromise)(awaitable)) {
     awaitable = awaitable.catch((e) => {
       setCurrentInstance(ctx);
+      Promise.resolve().then(() => Promise.resolve().then(cleanup));
       throw e;
     });
   }
-  return [awaitable, () => setCurrentInstance(ctx)];
+  return [
+    awaitable,
+    () => {
+      setCurrentInstance(ctx);
+      Promise.resolve().then(cleanup);
+    }
+  ];
 }
 
 function createDuplicateChecker() {
@@ -15800,7 +16277,7 @@ function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
       const dynamicProps = nextVNode.dynamicProps;
       for (let i = 0; i < dynamicProps.length; i++) {
         const key = dynamicProps[i];
-        if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) {
+        if (hasPropValueChanged(nextProps, prevProps, key) && !isEmitListener(emits, key)) {
           return true;
         }
       }
@@ -15831,12 +16308,20 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
   }
   for (let i = 0; i < nextKeys.length; i++) {
     const key = nextKeys[i];
-    if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) {
+    if (hasPropValueChanged(nextProps, prevProps, key) && !isEmitListener(emitsOptions, key)) {
       return true;
     }
   }
   return false;
 }
+function hasPropValueChanged(nextProps, prevProps, key) {
+  const nextProp = nextProps[key];
+  const prevProp = prevProps[key];
+  if (key === "style" && (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isObject)(nextProp) && (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isObject)(prevProp)) {
+    return !(0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.looseEqual)(nextProp, prevProp);
+  }
+  return nextProp !== prevProp;
+}
 function updateHOCHostEl({ vnode, parent }, el) {
   while (parent) {
     const root = parent.subTree;
@@ -16567,15 +17052,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     } else {
       const el = n2.el = n1.el;
       if (n2.children !== n1.children) {
-        if ( true && isHmrUpdating && n2.patchFlag === -1 && "__elIndex" in n1) {
-          const childNodes = container.childNodes;
-          const newChild = hostCreateText(n2.children);
-          const oldChild = childNodes[n2.__elIndex = n1.__elIndex];
-          hostInsert(newChild, container, oldChild);
-          hostRemove(oldChild);
-        } else {
-          hostSetText(el, n2.children);
-        }
+        hostSetText(el, n2.children);
       }
     }
   };
@@ -16651,7 +17128,7 @@ function baseCreateRenderer(options, createHydrationFns) {
         optimized
       );
     } else {
-      const customElement = !!(n1.el && n1.el._isVueCE) ? n1.el : null;
+      const customElement = n1.el && n1.el._isVueCE ? n1.el : null;
       try {
         if (customElement) {
           customElement._beginPatch();
@@ -17132,8 +17609,7 @@ function baseCreateRenderer(options, createHydrationFns) {
             hydrateSubTree();
           }
         } else {
-          if (root.ce && // @ts-expect-error _def is private
-          root.ce._def.shadowRoot !== false) {
+          if (root.ce && root.ce._hasShadowRoot()) {
             root.ce._injectChildStyle(type);
           }
           if (true) {
@@ -17188,9 +17664,9 @@ function baseCreateRenderer(options, createHydrationFns) {
               updateComponentPreRender(instance, next, optimized);
             }
             nonHydratedAsyncRoot.asyncDep.then(() => {
-              if (!instance.isUnmounted) {
-                componentUpdateFn();
-              }
+              queuePostRenderEffect(() => {
+                if (!instance.isUnmounted) update();
+              }, parentSuspense);
             });
             return;
           }
@@ -17887,12 +18363,10 @@ function traverseStaticChildren(n1, n2, shallow = false) {
           traverseStaticChildren(c1, c2);
       }
       if (c2.type === Text) {
-        if (c2.patchFlag !== -1) {
-          c2.el = c1.el;
-        } else {
-          c2.__elIndex = i + // take fragment start anchor into account
-          (n1.type === Fragment ? 1 : 0);
+        if (c2.patchFlag === -1) {
+          c2 = ch2[i] = cloneIfMounted(c2);
         }
+        c2.el = c1.el;
       }
       if (c2.type === Comment && !c2.el) {
         c2.el = c1.el;
@@ -19620,7 +20094,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.27";
+const version = "3.5.29";
 const warn =  true ? warn$1 : 0;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools =  true ? devtools$1 : 0;
@@ -19831,7 +20305,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_runtime_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/runtime-core */ "./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
 /* harmony import */ var _vue_runtime_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/runtime-dom v3.5.27
+* @vue/runtime-dom v3.5.29
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -21091,6 +21565,12 @@ class VueElement extends BaseClass {
       this._update();
     }
   }
+  /**
+   * @internal
+   */
+  _hasShadowRoot() {
+    return this._def.shadowRoot !== false;
+  }
   /**
    * @internal
    */
@@ -21225,10 +21705,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
                 instance
               )
             );
-            positionMap.set(child, {
-              left: child.el.offsetLeft,
-              top: child.el.offsetTop
-            });
+            positionMap.set(child, getPosition(child.el));
           }
         }
       }
@@ -21259,10 +21736,7 @@ function callPendingCbs(c) {
   }
 }
 function recordPosition(c) {
-  newPositionMap.set(c, {
-    left: c.el.offsetLeft,
-    top: c.el.offsetTop
-  });
+  newPositionMap.set(c, getPosition(c.el));
 }
 function applyTranslation(c) {
   const oldPos = positionMap.get(c);
@@ -21270,12 +21744,29 @@ function applyTranslation(c) {
   const dx = oldPos.left - newPos.left;
   const dy = oldPos.top - newPos.top;
   if (dx || dy) {
-    const s = c.el.style;
-    s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
+    const el = c.el;
+    const s = el.style;
+    const rect = el.getBoundingClientRect();
+    let scaleX = 1;
+    let scaleY = 1;
+    if (el.offsetWidth) scaleX = rect.width / el.offsetWidth;
+    if (el.offsetHeight) scaleY = rect.height / el.offsetHeight;
+    if (!Number.isFinite(scaleX) || scaleX === 0) scaleX = 1;
+    if (!Number.isFinite(scaleY) || scaleY === 0) scaleY = 1;
+    if (Math.abs(scaleX - 1) < 0.01) scaleX = 1;
+    if (Math.abs(scaleY - 1) < 0.01) scaleY = 1;
+    s.transform = s.webkitTransform = `translate(${dx / scaleX}px,${dy / scaleY}px)`;
     s.transitionDuration = "0s";
     return c;
   }
 }
+function getPosition(el) {
+  const rect = el.getBoundingClientRect();
+  return {
+    left: rect.left,
+    top: rect.top
+  };
+}
 function hasCSSTransform(el, root, moveClass) {
   const clone = el.cloneNode();
   const _vtc = el[vtcKey];
@@ -21586,6 +22077,7 @@ const modifierGuards = {
   exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
 };
 const withModifiers = (fn, modifiers) => {
+  if (!fn) return fn;
   const cache = fn._withMods || (fn._withMods = {});
   const cacheKey = modifiers.join(".");
   return cache[cacheKey] || (cache[cacheKey] = ((event, ...args) => {
@@ -21837,7 +22329,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   toTypeString: () => (/* binding */ toTypeString)
 /* harmony export */ });
 /**
-* @vue/shared v3.5.27
+* @vue/shared v3.5.29
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -23084,7 +23576,7 @@ module.exports = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.toUTF8 = exports.getBigInt64LE = exports.getFloat64LE = exports.getInt32LE = exports.UUID = exports.Timestamp = exports.serialize = exports.ObjectId = exports.MinKey = exports.MaxKey = exports.Long = exports.Int32 = exports.EJSON = exports.Double = exports.deserialize = exports.Decimal128 = exports.DBRef = exports.Code = exports.calculateObjectSize = exports.BSONType = exports.BSONSymbol = exports.BSONRegExp = exports.BSONError = exports.BSON = exports.Binary = void 0;
+exports.toUTF8 = exports.getBigInt64LE = exports.getFloat64LE = exports.getInt32LE = exports.UUID = exports.Timestamp = exports.serialize = exports.ObjectId = exports.NumberUtils = exports.MinKey = exports.MaxKey = exports.Long = exports.Int32 = exports.EJSON = exports.Double = exports.deserialize = exports.Decimal128 = exports.DBRef = exports.Code = exports.calculateObjectSize = exports.BSONType = exports.BSONSymbol = exports.BSONRegExp = exports.BSONError = exports.BSON = exports.Binary = void 0;
 exports.parseToElementsToArray = parseToElementsToArray;
 exports.pluckBSONSerializeOptions = pluckBSONSerializeOptions;
 exports.resolveBSONOptions = resolveBSONOptions;
@@ -23109,6 +23601,7 @@ Object.defineProperty(exports, "Int32", ({ enumerable: true, get: function () {
 Object.defineProperty(exports, "Long", ({ enumerable: true, get: function () { return bson_2.Long; } }));
 Object.defineProperty(exports, "MaxKey", ({ enumerable: true, get: function () { return bson_2.MaxKey; } }));
 Object.defineProperty(exports, "MinKey", ({ enumerable: true, get: function () { return bson_2.MinKey; } }));
+Object.defineProperty(exports, "NumberUtils", ({ enumerable: true, get: function () { return bson_2.NumberUtils; } }));
 Object.defineProperty(exports, "ObjectId", ({ enumerable: true, get: function () { return bson_2.ObjectId; } }));
 Object.defineProperty(exports, "serialize", ({ enumerable: true, get: function () { return bson_2.serialize; } }));
 Object.defineProperty(exports, "Timestamp", ({ enumerable: true, get: function () { return bson_2.Timestamp; } }));
@@ -23774,7 +24267,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_runtime_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/runtime-dom */ "./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
 /* harmony import */ var _vue_runtime_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/runtime-dom */ "./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js");
 /**
-* vue v3.5.27
+* vue v3.5.29
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -24928,7 +25421,7 @@ module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-en
 (module) {
 
 "use strict";
-module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div\n    class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\"\n    @click=\"hideSidebar = false\"\n    v-show=\"hideSidebar\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <button\n    class=\"fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white\"\n    :class=\"hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'\"\n    @click=\"toggleShareThread\"\n    :disabled=\"!hasWorkspace || !chatThreadId || sharingThread\"\n    aria-label=\"Share thread with workspace\"\n    title=\"Share thread with workspace\"\n  >\n    <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n    <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-1 ml-2 font-bold\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-full\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"w-full p-2 hover:bg-ultramarine-100 cursor-pointer text-sm text-gray-700\"\n        :class=\"{ 'bg-ultramarine-200 text-gray-900': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col bg-slate-50\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <div v-if=\"chatMessages?.length === 0\">\n        <div class=\"flex items-center w-full h-full justify-center py-3 mb-4\">\n          <p class=\"mx-4 font-bold text-gray-900\">\n            Ask Mongoose Studio to analyze your data or generate a script\n          </p>\n        </div>\n      </div>\n      <ul role=\"list\" class=\"space-y-4\" v-else>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\" :target-dashboard-id=\"currentThread?.dashboardId\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          :placeholder=\"sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm\"\n          :disabled=\"sendingMessage\"\n          rows=\"2\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
+module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <button\n    type=\"button\"\n    class=\"fixed top-[65px] left-0 cursor-pointer bg-gray-100 rounded-r-md z-10 p-1 lg:hidden\"\n    @click=\"hideSidebar = false\"\n    v-show=\"hideSidebar !== false\"\n    aria-label=\"Open chat history\"\n    title=\"Open chat history\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"w-5 h-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </button>\n  <button\n    class=\"fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white\"\n    :class=\"hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'\"\n    @click=\"toggleShareThread\"\n    :disabled=\"!hasWorkspace || !chatThreadId || sharingThread\"\n    aria-label=\"Share thread with workspace\"\n    title=\"Share thread with workspace\"\n  >\n    <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n    <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside\n    class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-transform duration-300 ease-in-out z-20 w-64 fixed lg:relative\"\n    :class=\"hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:hidden' : '-translate-x-full lg:translate-x-0'\"\n    style=\"z-index: 10000\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-1 ml-2 font-bold\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none lg:hidden\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-full\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"w-full p-2 hover:bg-ultramarine-100 cursor-pointer text-sm text-gray-700\"\n        :class=\"{ 'bg-ultramarine-200 text-gray-900': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col bg-slate-50\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <div v-if=\"chatMessages?.length === 0\">\n        <div class=\"flex items-center w-full h-full justify-center py-3 mb-4\">\n          <p class=\"mx-4 font-bold text-gray-900\">\n            Ask Mongoose Studio to analyze your data or generate a script\n          </p>\n        </div>\n      </div>\n      <ul role=\"list\" class=\"space-y-4\" v-else>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\" :target-dashboard-id=\"currentThread?.dashboardId\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          :placeholder=\"sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm\"\n          :disabled=\"sendingMessage\"\n          rows=\"2\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
 
 /***/ },
 
@@ -25214,7 +25707,7 @@ module.exports = ".document .document-menu {\n  display: flex;\n  position: stic
 (module) {
 
 "use strict";
-module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none\"\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=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none\"\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=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\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\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n    <execute-script\n      :visible=\"scriptDrawerOpen\"\n      :model=\"model\"\n      :document-id=\"documentId\"\n      :editting=\"editting\"\n      @close=\"closeScriptDrawer\"\n      @refresh=\"handleScriptRefresh\"\n    ></execute-script>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none\"\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=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none\"\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=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\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\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n    <execute-script\n      :visible=\"scriptDrawerOpen\"\n      :model=\"model\"\n      :document-id=\"documentId\"\n      :editting=\"editting\"\n      @close=\"closeScriptDrawer\"\n      @refresh=\"handleScriptRefresh\"\n    ></execute-script>\n    <div\n      v-if=\"keyboardShortcuts.length > 0\"\n      class=\"fixed bottom-4 left-4 z-40 group\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Keyboard shortcuts\"\n        title=\"Keyboard shortcuts\"\n        class=\"rounded-full border border-slate-300 bg-white p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"2.5\" y=\"6.5\" width=\"19\" height=\"11\" rx=\"2\" stroke-width=\"1.5\"></rect>\n          <path d=\"M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n        <div\n          v-for=\"shortcut in keyboardShortcuts\"\n          :key=\"shortcut.command + shortcut.description\"\n          class=\"flex items-center justify-between gap-3 text-xs\"\n        >\n          <span class=\"font-mono font-semibold text-slate-50\">{{shortcut.command}}</span>\n          <span class=\"text-slate-300\">{{shortcut.description}}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -25522,7 +26015,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 (module) {
 
 "use strict";
-module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-1 ml-2 font-bold\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7 p-1\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold text-gray-900' : 'hover:bg-ultramarine-50'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents bg-slate-50\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\" style=\"z-index: 1000\">\n      <div class=\"documents-menu bg-slate-50\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <div class=\"relative\" v-show=\"!selectMultiple\" ref=\"actionsMenuContainer\" @keyup.esc.prevent=\"closeActionsMenu\">\n            <button\n              @click=\"toggleActionsMenu\"\n              type=\"button\"\n              aria-label=\"More actions\"\n              class=\"rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showActionsMenu\"\n              class=\"absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20\"\n            >\n              <div class=\"py-1\">\n                <button\n                  @click=\"shouldShowExportModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Export\n                </button>\n                <button\n                  @click=\"shouldShowCreateModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Create\n                </button>\n                <button\n                  @click=\"openFieldSelection(); showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Projection\n                </button>\n                <button\n                  @click=\"openIndexModal\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Indexes\n                </button>\n                <button\n                  @click=\"openCollectionInfo\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Collection Info\n                </button>\n                <button\n                  @click=\"findOldestDocument\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Find oldest document\n                </button>\n              </div>\n            </div>\n          </div>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('map')\"\n              :disabled=\"geoJsonFields.length === 0\"\n              type=\"button\"\n              :title=\"geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10\"\n              :class=\"[\n                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-gray-100' : 'text-gray-400 hover:bg-gray-50',\n                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-white' : '')\n              ]\">\n              <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z\" />\n              </svg>\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead class=\"bg-slate-50\">\n          <th v-for=\"path in filteredPaths\" @click=\"addPathFilter(path.path)\" class=\"cursor-pointer p-3\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" class=\"bg-white hover:bg-slate-50\">\n            <td v-for=\"schemaPath in filteredPaths\" class=\"p-3 cursor-pointer\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-2 p-1 mt-1\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors rounded-md border border-slate-100',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-white'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'map'\" class=\"flex flex-col h-full\">\n        <div class=\"p-2 bg-white border-b flex items-center gap-2\">\n          <label class=\"text-sm font-medium text-gray-700\">GeoJSON Field:</label>\n          <select\n            :value=\"selectedGeoField\"\n            @change=\"setSelectedGeoField($event.target.value)\"\n            class=\"rounded-md border border-gray-300 py-1 px-2 text-sm focus:border-ultramarine-500 focus:ring-ultramarine-500\"\n          >\n            <option v-for=\"field in geoJsonFields\" :key=\"field.path\" :value=\"field.path\">\n              {{ field.label }}\n            </option>\n          </select>\n          <async-button\n            @click=\"loadMoreDocuments\"\n            :disabled=\"loadedAllDocs\"\n            type=\"button\"\n            class=\"rounded px-2 py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            :class=\"loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-ultramarine-600 hover:bg-ultramarine-500'\"\n          >\n            Load more\n          </async-button>\n        </div>\n        <div class=\"flex-1 min-h-[400px]\" ref=\"modelsMap\"></div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold flex items-center gap-2\">\n              <div>{{ index.name }}</div>\n              <div v-if=\"isTTLIndex(index)\" class=\"rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700\">\n                TTL: {{ formatTTL(index.expireAfterSeconds) }}\n              </div>\n            </div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCollectionInfoModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCollectionInfoModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Collection Info</div>\n      <div v-if=\"!collectionInfo\" class=\"text-gray-600\">Loading collection details...</div>\n      <div v-else class=\"space-y-3\">\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Documents</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.documentCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Indexes</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.indexCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Index Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Storage Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.size) }}</div>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <div class=\"flex justify-between gap-4\">\n            <div class=\"font-semibold text-gray-700\">Collation</div>\n            <div class=\"text-gray-900\">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>\n          </div>\n          <div v-if=\"collectionInfo.hasCollation\" class=\"rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto\">\n            <pre class=\"whitespace-pre-wrap\">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>\n          </div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Capped</div>\n          <div class=\"text-gray-900\">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-1 ml-2 font-bold\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7 p-1\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"flex items-center gap-2 rounded-md py-2 pr-2 pl-2 text-sm text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold text-gray-900' : 'hover:bg-ultramarine-50'\">\n                <span class=\"truncate\">{{model}}</span>\n                <span\n                  v-if=\"modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel\"\n                  class=\"ml-auto text-xs text-gray-500 bg-gray-100 rounded-md px-1 py-[2px]\"\n                >\n                  {{formatCompactCount(modelDocumentCounts[model])}}\n                </span>\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents bg-slate-50\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\" style=\"z-index: 1000\">\n      <div class=\"documents-menu bg-slate-50\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500\"\n            >\n            Delete\n          </button>\n          <div class=\"relative\" v-show=\"!selectMultiple\" ref=\"actionsMenuContainer\" @keyup.esc.prevent=\"closeActionsMenu\">\n            <button\n              @click=\"toggleActionsMenu\"\n              type=\"button\"\n              aria-label=\"More actions\"\n              class=\"rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showActionsMenu\"\n              class=\"absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20\"\n            >\n              <div class=\"py-1\">\n                <button\n                  @click=\"shouldShowExportModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Export\n                </button>\n                <button\n                  @click=\"shouldShowCreateModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Create\n                </button>\n                <button\n                  @click=\"openFieldSelection(); showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Projection\n                </button>\n                <button\n                  @click=\"openIndexModal\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Indexes\n                </button>\n                <button\n                  @click=\"openCollectionInfo\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Collection Info\n                </button>\n                <button\n                  @click=\"findOldestDocument\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Find oldest document\n                </button>\n              </div>\n            </div>\n          </div>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('map')\"\n              :disabled=\"geoJsonFields.length === 0\"\n              type=\"button\"\n              :title=\"geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10\"\n              :class=\"[\n                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-gray-100' : 'text-gray-400 hover:bg-gray-50',\n                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-white' : '')\n              ]\">\n              <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z\" />\n              </svg>\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead class=\"bg-slate-50\">\n          <th v-for=\"path in filteredPaths\" @click=\"addPathFilter(path.path)\" class=\"cursor-pointer p-3\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" class=\"bg-white hover:bg-slate-50\">\n            <td v-for=\"schemaPath in filteredPaths\" class=\"p-3 cursor-pointer\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-2 p-1 mt-1\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors rounded-md border border-slate-100',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-white'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'map'\" class=\"flex flex-col h-full\">\n        <div class=\"p-2 bg-white border-b flex items-center gap-2\">\n          <label class=\"text-sm font-medium text-gray-700\">GeoJSON Field:</label>\n          <select\n            :value=\"selectedGeoField\"\n            @change=\"setSelectedGeoField($event.target.value)\"\n            class=\"rounded-md border border-gray-300 py-1 px-2 text-sm focus:border-ultramarine-500 focus:ring-ultramarine-500\"\n          >\n            <option v-for=\"field in geoJsonFields\" :key=\"field.path\" :value=\"field.path\">\n              {{ field.label }}\n            </option>\n          </select>\n          <async-button\n            @click=\"loadMoreDocuments\"\n            :disabled=\"loadedAllDocs\"\n            type=\"button\"\n            class=\"rounded px-2 py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            :class=\"loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-ultramarine-600 hover:bg-ultramarine-500'\"\n          >\n            Load more\n          </async-button>\n        </div>\n        <div class=\"flex-1 min-h-[400px]\" ref=\"modelsMap\"></div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold flex items-center gap-2\">\n              <div>{{ index.name }}</div>\n              <div v-if=\"isTTLIndex(index)\" class=\"rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700\">\n                TTL: {{ formatTTL(index.expireAfterSeconds) }}\n              </div>\n            </div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCollectionInfoModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCollectionInfoModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Collection Info</div>\n      <div v-if=\"!collectionInfo\" class=\"text-gray-600\">Loading collection details...</div>\n      <div v-else class=\"space-y-3\">\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Documents</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.documentCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Indexes</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.indexCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Index Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Storage Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.size) }}</div>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <div class=\"flex justify-between gap-4\">\n            <div class=\"font-semibold text-gray-700\">Collation</div>\n            <div class=\"text-gray-900\">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>\n          </div>\n          <div v-if=\"collectionInfo.hasCollation\" class=\"rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto\">\n            <pre class=\"whitespace-pre-wrap\">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>\n          </div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Capped</div>\n          <div class=\"text-gray-900\">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -25559,6 +26052,28 @@ module.exports = "<div class=\"w-full h-full flex items-center justify-center\">
 
 /***/ },
 
+/***/ "./frontend/src/task-by-name/task-by-name.html"
+/*!*****************************************************!*\
+  !*** ./frontend/src/task-by-name/task-by-name.html ***!
+  \*****************************************************/
+(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";
+
+/***/ },
+
+/***/ "./frontend/src/task-single/task-single.html"
+/*!***************************************************!*\
+  !*** ./frontend/src/task-single/task-single.html ***!
+  \***************************************************/
+(module) {
+
+"use strict";
+module.exports = "<div class=\"p-4 space-y-6\">\n  <div v-if=\"status === 'init'\">\n    <img src=\"images/loader.gif\" alt=\"Loading\" />\n  </div>\n  <div v-else-if=\"status === 'error'\" class=\"text-red-600\">\n    {{ errorMessage }}\n  </div>\n  <div v-else-if=\"status === 'notfound'\" class=\"text-gray-600\">\n    Task not found.\n  </div>\n  <div v-else-if=\"task\" class=\"max-w-4xl\">\n    <button @click=\"goBack\" class=\"text-gray-500 hover:text-gray-700 mb-4 flex items-center gap-1\">\n      <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path>\n      </svg>\n      Back to {{ task.name }}\n    </button>\n    <h1 class=\"text-2xl font-bold text-gray-700 mb-1\">{{ task.name }}</h1>\n    <p class=\"text-gray-500 mb-6\">Task details</p>\n\n    <div class=\"bg-white rounded-lg shadow p-6 md:p-8\">\n      <div class=\"flex items-center gap-3 mb-6\">\n        <span class=\"text-sm font-medium text-gray-900\">ID: {{ task.id }}</span>\n        <span\n          class=\"text-xs px-2 py-1 rounded-full font-medium\"\n          :class=\"getStatusColor(task.status)\"\n        >\n          {{ task?.status }}\n        </span>\n      </div>\n\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\n        <div>\n          <label class=\"block text-sm font-medium text-gray-700 mb-1\">Scheduled At</label>\n          <div class=\"text-sm text-gray-900\">{{ formatDate(task.scheduledAt) }}</div>\n        </div>\n        <div v-if=\"task?.startedAt\">\n          <label class=\"block text-sm font-medium text-gray-700 mb-1\">Started At</label>\n          <div class=\"text-sm text-gray-900\">{{ formatDate(task.startedAt) }}</div>\n        </div>\n        <div v-if=\"task?.completedAt\">\n          <label class=\"block text-sm font-medium text-gray-700 mb-1\">Completed At</label>\n          <div class=\"text-sm text-gray-900\">{{ formatDate(task.completedAt) }}</div>\n        </div>\n      </div>\n\n      <div v-if=\"task?.params\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-gray-700 mb-2\">Params</label>\n        <div class=\"bg-gray-50 rounded-md p-4\">\n          <list-json :value=\"task.params\"></list-json>\n        </div>\n      </div>\n\n      <div v-if=\"task?.result\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-gray-700 mb-2\">Result</label>\n        <div class=\"bg-gray-50 rounded-md p-4\">\n          <list-json :value=\"task.result\"></list-json>\n        </div>\n      </div>\n\n      <div v-if=\"task?.error\" class=\"mb-6\">\n        <label class=\"block text-sm font-medium text-gray-700 mb-2\">Error</label>\n        <div class=\"bg-gray-50 rounded-md p-4\">\n          <list-json :value=\"task.error\"></list-json>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap gap-3 pt-4 border-t border-gray-200\">\n        <button\n          @click=\"showRescheduleConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n          :disabled=\"task.status === 'in_progress'\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          Reschedule\n        </button>\n        <button\n          @click=\"showRunConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed\"\n          :disabled=\"task.status === 'in_progress'\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 3l14 9-14 9V3z\"></path>\n          </svg>\n          Run Now\n        </button>\n        <button\n          v-if=\"task.status === 'pending'\"\n          @click=\"showCancelConfirmation(task)\"\n          class=\"flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n          </svg>\n          Cancel Task\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Reschedule Modal -->\n  <modal v-if=\"showRescheduleModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRescheduleModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-gray-900 mb-4\">Reschedule Task</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Reschedule task <strong>{{ selectedTask?.id }}</strong>?</p>\n        <p class=\"text-sm text-gray-500 mb-4\">This will reset the task's status and schedule it to run again.</p>\n        <label for=\"newScheduledTime\" class=\"block text-sm font-medium text-gray-700 mb-2\">New Scheduled Time</label>\n        <input\n          id=\"newScheduledTime\"\n          v-model=\"newScheduledTime\"\n          type=\"datetime-local\"\n          class=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-4\"\n        />\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmRescheduleTask\" class=\"flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 font-medium\">Reschedule</button>\n          <button @click=\"showRescheduleModal = false\" class=\"flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Cancel</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <!-- Run Modal -->\n  <modal v-if=\"showRunModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showRunModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-gray-900 mb-4\">Run Task Now</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Run task <strong>{{ selectedTask?.id }}</strong> immediately?</p>\n        <p class=\"text-sm text-gray-500 mb-4\">This will execute the task right away, bypassing its scheduled time.</p>\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmRunTask\" class=\"flex-1 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 font-medium\">Run Now</button>\n          <button @click=\"showRunModal = false\" class=\"flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Cancel</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <!-- Cancel Task Modal -->\n  <modal v-if=\"showCancelModal\" containerClass=\"!max-w-md\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showCancelModal = false\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n      <div class=\"p-6\">\n        <h3 class=\"text-lg font-medium text-gray-900 mb-4\">Cancel Task</h3>\n        <p class=\"text-sm text-gray-600 mb-2\">Cancel task <strong>{{ selectedTask?.id }}</strong>?</p>\n        <p class=\"text-sm text-gray-500 mb-4\">This will permanently cancel the task and it cannot be undone.</p>\n        <div class=\"flex gap-3\">\n          <button @click=\"confirmCancelTask\" class=\"flex-1 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium\">Cancel Task</button>\n          <button @click=\"showCancelModal = false\" class=\"flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium\">Keep Task</button>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+
+/***/ },
+
 /***/ "./frontend/src/tasks/task-details/task-details.html"
 /*!***********************************************************!*\
   !*** ./frontend/src/tasks/task-details/task-details.html ***!
@@ -25566,7 +26081,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 class=\"flex items-center justify-between\">\n        <div>\n            <button @click=\"$emit('back')\" class=\"text-gray-500 hover:text-gray-700 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                Back to Task Groups\n            </button>\n            <h1 class=\"text-2xl font-bold text-gray-700\">{{ taskGroup.name }}</h1>\n            <p class=\"text-gray-500\">Total: {{ taskGroup.totalCount }} tasks</p>\n        </div>\n\n      </div>\n\n        <!-- Status Summary -->\n       <div 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-gray-50 border border-gray-200 rounded-md p-3 text-center hover:bg-gray-100 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-gray-700\">{{ taskGroup.statusCounts.cancelled || 0 }}</div>\n         </button>\n       </div>\n\n        <!-- Task List -->\n       <div class=\"bg-white rounded-lg shadow\">\n         <div class=\"px-6 py-4 border-b border-gray-200 flex items-center justify-between\">\n           <h2 class=\"text-lg font-semibold text-gray-700\">\n             Individual Tasks\n             <span v-if=\"currentFilter\" class=\"text-sm font-normal text-gray-500 ml-2\">\n               (Filtered by {{ currentFilter }})\n             </span>\n           </h2>\n           <button \n             v-if=\"currentFilter\"\n             @click=\"clearFilter\"\n             class=\"text-sm text-ultramarine-600 hover:text-ultramarine-700 font-medium\"\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-gray-900\">Task ID: {{ task.id }}</span>\n                  <span\n                    class=\"text-xs px-2 py-1 rounded-full font-medium\"\n                    :class=\"getStatusColor(task.status)\"\n                  >\n                    {{ task.status }}\n                  </span>\n                </div>\n                \n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n                  <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Scheduled At</label>\n                    <div class=\"text-sm text-gray-900\">{{ formatDate(task.scheduledAt) }}</div>\n                  </div>\n                  <div v-if=\"task.startedAt\">\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Started At</label>\n                    <div class=\"text-sm text-gray-900\">{{ formatDate(task.startedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.completedAt\">\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Completed At</label>\n                    <div class=\"text-sm text-gray-900\">{{ formatDate(task.completedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.error\">\n                    <label class=\"block text-sm font-medium text-gray-700 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-gray-700 mb-2\">Parameters</label>\n                  <div class=\"bg-gray-50 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-gray-900\">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-gray-500 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-gray-700 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-gray-300 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-gray-700 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-gray-900\">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-gray-500 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-gray-700 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-gray-900\">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-gray-500 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-gray-700 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 @click=\"goBack\" class=\"text-gray-500 hover:text-gray-700 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-gray-700\">{{ taskGroup.name }}</h1>\n            <p class=\"text-gray-500\">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-gray-700\">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-ultramarine-600 text-white border-ultramarine-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'\"\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-ultramarine-600 text-white border-ultramarine-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'\"\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-gray-50 border border-gray-200 rounded-md p-3 text-center hover:bg-gray-100 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-gray-700\">{{ 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-white border border-gray-200 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-gray-500 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-gray-100 text-gray-500 hover:bg-gray-200'\"\n               @click=\"filterByStatus(status)\"\n             >\n               {{ statusLabel(status) }}\n             </button>\n           </div>\n         </div>\n       </div>\n\n        <!-- Task List -->\n       <div class=\"bg-white rounded-lg shadow\">\n        <div class=\"px-6 py-6 border-b border-gray-200 flex items-center justify-between bg-gray-50\">\n          <h2 class=\"text-xl font-bold text-gray-900\">\n            Individual Tasks\n            <span v-if=\"currentFilter\" class=\"ml-3 text-base font-semibold text-ultramarine-700\">\n              (Filtered by {{ currentFilter }})\n            </span>\n          </h2>\n          <button \n            v-if=\"currentFilter\"\n            @click=\"clearFilter\"\n            class=\"text-sm font-semibold text-ultramarine-600 hover:text-ultramarine-700\"\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-gray-900\">Task ID: {{ task.id }}</span>\n                  <router-link\n                    v-if=\"backTo\"\n                    :to=\"taskDetailRoute(task)\"\n                    class=\"text-sm text-ultramarine-600 hover:text-ultramarine-700 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-gray-700 mb-1\">Scheduled At</label>\n                    <div class=\"text-sm text-gray-900\">{{ formatDate(task.scheduledAt) }}</div>\n                  </div>\n                  <div v-if=\"task.startedAt\">\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Started At</label>\n                    <div class=\"text-sm text-gray-900\">{{ formatDate(task.startedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.completedAt\">\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Completed At</label>\n                    <div class=\"text-sm text-gray-900\">{{ formatDate(task.completedAt) }}</div>\n                  </div>\n                  <div v-if=\"task.error\">\n                    <label class=\"block text-sm font-medium text-gray-700 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-gray-700 mb-2\">Parameters</label>\n                  <div class=\"bg-gray-50 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-gray-900\">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-gray-500 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-gray-700 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-gray-300 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-gray-700 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-gray-900\">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-gray-500 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-gray-700 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-gray-900\">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-gray-500 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-gray-700 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";
 
 /***/ },
 
@@ -25588,7 +26103,7 @@ module.exports = "";
 (module) {
 
 "use strict";
-module.exports = "<div class=\"p-4 space-y-6\">\n         <!-- Task Details View -->\n     <task-details \n         v-if=\"showTaskDetails && selectedTaskGroup\"\n         :task-group=\"selectedTaskGroup\"\n         :current-filter=\"taskDetailsFilter\"\n         @back=\"hideTaskDetails\"\n         @task-created=\"onTaskCreated\"\n         @task-cancelled=\"onTaskCancelled\"\n         @update:current-filter=\"taskDetailsFilter = $event\"\n     ></task-details>\n\n    <!-- Main Tasks View -->\n    <div v-else>\n        <h1 class=\"text-2xl font-bold text-gray-700 mb-4\">Task Overview</h1>\n        <div v-if=\"status == 'init'\">\n            <img src=\"images/loader.gif\" />\n        </div>\n        <!-- Task List -->\n        <div class=\"bg-white p-4 rounded-lg shadow\" v-if=\"status == 'loaded'\">\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\">\n                    <option v-for=\"option in dateFilters\" :key=\"option.value\" :value=\"option.value\">\n                    {{ option.label }}\n                    </option>\n                </select>\n            </div>\n            <div class=\"mb-4\">\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Filter by Status:</label>\n                <select v-model=\"selectedStatus\" @change=\"getTasks\" class=\"border-gray-300 rounded-md shadow-sm w-full p-2\">\n                    <option v-for=\"option in statusFilters\" :key=\"option.value\" :value=\"option.value\">\n                    {{ option.label }}\n                    </option>\n                </select>\n            </div>\n            <div class=\"mb-4\">\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Search by Task Name:</label>\n                <input \n                    v-model=\"searchQuery\" \n                    type=\"text\" \n                    @input=\"onSearchInput\"\n                    class=\"border-gray-300 rounded-md shadow-sm w-full p-2\"\n                    placeholder=\"Enter task name to search...\"\n                >\n            </div>\n            <div class=\"mb-4\">\n                <button\n                  @click=\"resetFilters\"\n                  class=\"w-full bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition\"\n                >\n                  Reset Filters\n                </button>\n            </div>\n            <div class=\"mb-6\">\n                <button\n                  @click=\"openCreateTaskModal\"\n                  class=\"w-full bg-ultramarine-600 text-white hover:bg-ultramarine-700 font-medium py-2 px-4 rounded-md transition\"\n                >\n                  Create New Task\n                </button>\n            </div>\n              <!-- Summary Section -->\n            <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n                <button \n                    @click=\"setStatusFilter('pending')\"\n                    :class=\"getStatusColor('pending') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-yellow-200 hover:border-yellow-300'\"\n                >\n                    <div class=\"text-sm\">Scheduled</div>\n                    <div class=\"text-2xl font-bold\">{{pendingCount}}</div>\n                </button>\n                <button \n                    @click=\"setStatusFilter('succeeded')\"\n                    :class=\"getStatusColor('succeeded') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-green-200 hover:border-green-300'\"\n                >\n                    <div class=\"text-sm\">Completed</div>\n                    <div class=\"text-2xl font-bold\">{{succeededCount}}</div>\n                </button>\n                <button \n                    @click=\"setStatusFilter('failed')\"\n                    :class=\"getStatusColor('failed') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-red-200 hover:border-red-300'\"\n                >\n                    <div class=\"text-sm\">Failed</div>\n                    <div class=\"text-2xl font-bold\">{{failedCount}}</div>\n                </button>\n                <button \n                    @click=\"setStatusFilter('cancelled')\"\n                    :class=\"getStatusColor('cancelled') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-gray-200 hover:border-gray-300'\"\n                >\n                    <div class=\"text-sm\">Cancelled</div>\n                    <div class=\"text-2xl font-bold\">{{cancelledCount}}</div>\n                </button>\n            </div>\n            \n            <!-- Grouped Task List -->\n            <div class=\"mt-6\">\n                <h2 class=\"text-lg font-semibold text-gray-700 mb-4\">Tasks by Name</h2>\n                <ul class=\"divide-y divide-gray-200\">\n                    <li v-for=\"group in tasksByName\" :key=\"group.name\" class=\"p-4 group hover:border hover:rounded-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200\">\n                        <div class=\"flex items-center justify-between mb-3 \">\n                            <div class=\"flex-1 cursor-pointer\" @click=\"openTaskGroupDetails(group)\">\n                                <div class=\"flex items-center gap-2\">\n                                    <div class=\"font-medium text-lg group-hover:text-ultramarine-600 transition-colors\">{{ group.name }}</div>\n                                    <svg class=\"w-4 h-4 text-gray-400 group-hover:text-ultramarine-600 transition-colors\" 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                                </div>\n                                <div class=\"text-sm text-gray-500 group-hover:text-gray-700 transition-colors\">Total: {{ group.totalCount }} tasks</div>\n                                <div class=\"text-xs text-ultramarine-600 opacity-0 group-hover:opacity-100 transition-opacity mt-1\">\n                                    Click to view details\n                                </div>\n                            </div>\n                            <div class=\"text-sm text-gray-500\">\n                                Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}\n                            </div>\n                        </div>\n                        \n                        <!-- Status Counts -->\n                        <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'pending')\"\n                                class=\"bg-yellow-50 border border-yellow-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-yellow-300\"\n                            >\n                                <div class=\"text-xs text-yellow-600 font-medium\">Pending</div>\n                                <div class=\"text-lg font-bold text-yellow-700\">{{ group.statusCounts.pending || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'succeeded')\"\n                                class=\"bg-green-50 border border-green-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-green-300\"\n                            >\n                                <div class=\"text-xs text-green-600 font-medium\">Succeeded</div>\n                                <div class=\"text-lg font-bold text-green-700\">{{ group.statusCounts.succeeded || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'failed')\"\n                                class=\"bg-red-50 border border-red-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-red-300\"\n                            >\n                                <div class=\"text-xs text-red-600 font-medium\">Failed</div>\n                                <div class=\"text-lg font-bold text-red-700\">{{ group.statusCounts.failed || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'cancelled')\"\n                                class=\"bg-gray-50 border border-gray-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-gray-300\"\n                            >\n                                <div class=\"text-xs text-gray-600 font-medium\">Cancelled</div>\n                                <div class=\"text-lg font-bold text-gray-700\">{{ group.statusCounts.cancelled || 0 }}</div>\n                            </button>\n                        </div>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n\n    <!-- Create Task Modal -->\n    <modal v-if=\"showCreateTaskModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"closeCreateTaskModal\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"space-y-4\">\n                <h3 class=\"text-lg font-semibold text-gray-700 mb-4\">Create New Task</h3>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Task Name:</label>\n                    <input \n                        v-model=\"newTask.name\" \n                        type=\"text\" \n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                        placeholder=\"Enter task name\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Scheduled Time:</label>\n                    <input \n                        v-model=\"newTask.scheduledAt\" \n                        type=\"datetime-local\" \n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Parameters (JSON):</label>\n                    <textarea \n                        ref=\"parametersEditor\"\n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                        placeholder='{\"key\": \"value\"}'\n                    ></textarea>\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Repeat Interval (ms):</label>\n                    <input \n                        v-model=\"newTask.repeatInterval\" \n                        type=\"number\" \n                        min=\"0\"\n                        step=\"1000\"\n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                        placeholder=\"0 for no repetition\"\n                    >\n                    <p class=\"text-xs text-gray-500 mt-1\">Enter 0 or leave empty for no repetition. Use 1000 for 1 second, 60000 for 1 minute, etc.</p>\n                </div>\n                \n                <div class=\"flex gap-2 pt-4\">\n                    <button \n                        @click=\"createTask\" \n                        class=\"flex-1 bg-ultramarine-600 text-white px-4 py-2 rounded-md hover:bg-ultramarine-700\"\n                    >\n                        Create Task\n                    </button>\n                    <button \n                         @click=\"closeCreateTaskModal\" \n                         class=\"flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400\"\n                     >\n                         Cancel\n                     </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n</div>\n";
+module.exports = "<div class=\"p-4 space-y-6\">\n    <div>\n        <h1 class=\"text-2xl font-bold text-gray-700 mb-4\">Task Overview</h1>\n        <div v-if=\"status == 'init'\">\n            <img src=\"images/loader.gif\" />\n        </div>\n        <!-- Task List -->\n        <div class=\"bg-white p-4 rounded-lg shadow\" v-if=\"status == 'loaded'\">\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\">\n                    <option v-for=\"option in dateFilters\" :key=\"option.value\" :value=\"option.value\">\n                    {{ option.label }}\n                    </option>\n                </select>\n            </div>\n            <div class=\"mb-4\">\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Filter by Status:</label>\n                <select v-model=\"selectedStatus\" @change=\"getTasks\" class=\"border-gray-300 rounded-md shadow-sm w-full p-2\">\n                    <option v-for=\"option in statusFilters\" :key=\"option.value\" :value=\"option.value\">\n                    {{ option.label }}\n                    </option>\n                </select>\n            </div>\n            <div class=\"mb-4\">\n                <label class=\"block text-sm font-medium text-gray-700 mb-1\">Search by Task Name:</label>\n                <input \n                    v-model=\"searchQuery\" \n                    type=\"text\" \n                    @input=\"onSearchInput\"\n                    class=\"border-gray-300 rounded-md shadow-sm w-full p-2\"\n                    placeholder=\"Enter task name to search...\"\n                >\n            </div>\n            <div class=\"mb-4\">\n                <button\n                  @click=\"resetFilters\"\n                  class=\"w-full bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition\"\n                >\n                  Reset Filters\n                </button>\n            </div>\n            <div class=\"mb-6\">\n                <button\n                  @click=\"openCreateTaskModal\"\n                  class=\"w-full bg-ultramarine-600 text-white hover:bg-ultramarine-700 font-medium py-2 px-4 rounded-md transition\"\n                >\n                  Create New Task\n                </button>\n            </div>\n              <!-- Summary Section -->\n            <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n                <button \n                    @click=\"setStatusFilter('pending')\"\n                    :class=\"getStatusColor('pending') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-yellow-200 hover:border-yellow-300'\"\n                >\n                    <div class=\"text-sm\">Scheduled</div>\n                    <div class=\"text-2xl font-bold\">{{pendingCount}}</div>\n                </button>\n                <button \n                    @click=\"setStatusFilter('succeeded')\"\n                    :class=\"getStatusColor('succeeded') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-green-200 hover:border-green-300'\"\n                >\n                    <div class=\"text-sm\">Completed</div>\n                    <div class=\"text-2xl font-bold\">{{succeededCount}}</div>\n                </button>\n                <button \n                    @click=\"setStatusFilter('failed')\"\n                    :class=\"getStatusColor('failed') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-red-200 hover:border-red-300'\"\n                >\n                    <div class=\"text-sm\">Failed</div>\n                    <div class=\"text-2xl font-bold\">{{failedCount}}</div>\n                </button>\n                <button \n                    @click=\"setStatusFilter('cancelled')\"\n                    :class=\"getStatusColor('cancelled') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-gray-200 hover:border-gray-300'\"\n                >\n                    <div class=\"text-sm\">Cancelled</div>\n                    <div class=\"text-2xl font-bold\">{{cancelledCount}}</div>\n                </button>\n            </div>\n            \n            <!-- Grouped Task List -->\n            <div class=\"mt-6\">\n                <h2 class=\"text-lg font-semibold text-gray-700 mb-4\">Tasks by Name</h2>\n                <ul class=\"divide-y divide-gray-200\">\n                    <li v-for=\"group in tasksByName\" :key=\"group.name\" class=\"p-4 group hover:border hover:rounded-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200\">\n                        <div class=\"flex items-center justify-between mb-3 \">\n                            <div class=\"flex-1 cursor-pointer\" @click=\"openTaskGroupDetails(group)\">\n                                <div class=\"flex items-center gap-2\">\n                                    <div class=\"font-medium text-lg group-hover:text-ultramarine-600 transition-colors\">{{ group.name }}</div>\n                                    <svg class=\"w-4 h-4 text-gray-400 group-hover:text-ultramarine-600 transition-colors\" 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                                </div>\n                                <div class=\"text-sm text-gray-500 group-hover:text-gray-700 transition-colors\">Total: {{ group.totalCount }} tasks</div>\n                                <div class=\"text-xs text-ultramarine-600 opacity-0 group-hover:opacity-100 transition-opacity mt-1\">\n                                    Click to view details\n                                </div>\n                            </div>\n                            <div class=\"text-sm text-gray-500\">\n                                Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}\n                            </div>\n                        </div>\n                        \n                        <!-- Status Counts -->\n                        <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'pending')\"\n                                class=\"bg-yellow-50 border border-yellow-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-yellow-300\"\n                            >\n                                <div class=\"text-xs text-yellow-600 font-medium\">Pending</div>\n                                <div class=\"text-lg font-bold text-yellow-700\">{{ group.statusCounts.pending || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'succeeded')\"\n                                class=\"bg-green-50 border border-green-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-green-300\"\n                            >\n                                <div class=\"text-xs text-green-600 font-medium\">Succeeded</div>\n                                <div class=\"text-lg font-bold text-green-700\">{{ group.statusCounts.succeeded || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'failed')\"\n                                class=\"bg-red-50 border border-red-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-red-300\"\n                            >\n                                <div class=\"text-xs text-red-600 font-medium\">Failed</div>\n                                <div class=\"text-lg font-bold text-red-700\">{{ group.statusCounts.failed || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'cancelled')\"\n                                class=\"bg-gray-50 border border-gray-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-gray-300\"\n                            >\n                                <div class=\"text-xs text-gray-600 font-medium\">Cancelled</div>\n                                <div class=\"text-lg font-bold text-gray-700\">{{ group.statusCounts.cancelled || 0 }}</div>\n                            </button>\n                        </div>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n\n    <!-- Create Task Modal -->\n    <modal v-if=\"showCreateTaskModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n        <template #body>\n            <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"closeCreateTaskModal\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n            <div class=\"space-y-4\">\n                <h3 class=\"text-lg font-semibold text-gray-700 mb-4\">Create New Task</h3>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Task Name:</label>\n                    <input \n                        v-model=\"newTask.name\" \n                        type=\"text\" \n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                        placeholder=\"Enter task name\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Scheduled Time:</label>\n                    <input \n                        v-model=\"newTask.scheduledAt\" \n                        type=\"datetime-local\" \n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Parameters (JSON):</label>\n                    <textarea \n                        ref=\"parametersEditor\"\n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                        placeholder='{\"key\": \"value\"}'\n                    ></textarea>\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-gray-700 mb-1\">Repeat Interval (ms):</label>\n                    <input \n                        v-model=\"newTask.repeatInterval\" \n                        type=\"number\" \n                        min=\"0\"\n                        step=\"1000\"\n                        class=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500\"\n                        placeholder=\"0 for no repetition\"\n                    >\n                    <p class=\"text-xs text-gray-500 mt-1\">Enter 0 or leave empty for no repetition. Use 1000 for 1 second, 60000 for 1 minute, etc.</p>\n                </div>\n                \n                <div class=\"flex gap-2 pt-4\">\n                    <button \n                        @click=\"createTask\" \n                        class=\"flex-1 bg-ultramarine-600 text-white px-4 py-2 rounded-md hover:bg-ultramarine-700\"\n                    >\n                        Create Task\n                    </button>\n                    <button \n                         @click=\"closeCreateTaskModal\" \n                         class=\"flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400\"\n                     >\n                         Cancel\n                     </button>\n                </div>\n            </div>\n        </template>\n    </modal>\n</div>\n";
 
 /***/ },
 
@@ -36902,7 +37417,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.11","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","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","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.2.13","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","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"}}');
 
 /***/ }
 
@@ -36918,12 +37433,6 @@ module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version"
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
-/******/ 		// Check if module exists (development only)
-/******/ 		if (__webpack_modules__[moduleId] === undefined) {
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
-/******/ 			e.code = 'MODULE_NOT_FOUND';
-/******/ 			throw e;
-/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {
 /******/ 			// no module.id needed
@@ -36932,6 +37441,12 @@ module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version"
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
+/******/ 		if (!(moduleId in __webpack_modules__)) {
+/******/ 			delete __webpack_module_cache__[moduleId];
+/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			e.code = 'MODULE_NOT_FOUND';
+/******/ 			throw e;
+/******/ 		}
 /******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 /******/ 	
 /******/ 		// Return the exports of the module