@mongoosejs/studio 0.3.6 → 0.3.7

package/frontend/public/app.js

@@ -814,6 +814,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTaskOverview: function getTaskOverview(params) {
       return client.post('', { action: 'Task.getTaskOverview', ...params }).then(res => res.data);
     },
+    getTasksOverTime: function getTasksOverTime(params) {
+      return client.post('', { action: 'Task.getTasksOverTime', ...params }).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('', { action: 'Task.rescheduleTask', ...params }).then(res => res.data);
     },
@@ -1154,6 +1157,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTaskOverview: function getTaskOverview(params) {
       return client.post('/Task/getTaskOverview', params).then(res => res.data);
     },
+    getTasksOverTime: function getTasksOverTime(params) {
+      return client.post('/Task/getTasksOverTime', params).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('/Task/rescheduleTask', params).then(res => res.data);
     },
@@ -2442,16 +2448,28 @@ module.exports = app => app.component('dashboard-primitive', {
   props: ['value'],
   computed: {
     header() {
-      if (this.value != null && this.value.$primitive.header) {
+      if (this.value != null && this.value.$primitive?.header) {
         return this.value.$primitive.header;
       }
       return null;
     },
     displayValue() {
       if (this.value != null && this.value.$primitive) {
+        if (this.value.$primitive.value === null) {
+          return 'null';
+        }
         return this.value.$primitive.value;
       }
+      if (this.value === null) {
+        return 'null';
+      }
       return this.value;
+    },
+    displayClass() {
+      if (this.value == null) {
+        return 'text-content-tertiary';
+      }
+      return null;
     }
   }
 });
@@ -2520,6 +2538,7 @@ module.exports = app => app.component('dashboard-result', {
 (module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
+/* global Blob, URL, document */
 
 
 const template = __webpack_require__(/*! ./dashboard-table.html */ "./frontend/src/dashboard-result/dashboard-table/dashboard-table.html");
@@ -2527,6 +2546,11 @@ const template = __webpack_require__(/*! ./dashboard-table.html */ "./frontend/s
 module.exports = app => app.component('dashboard-table', {
   template,
   props: ['value'],
+  data() {
+    return {
+      showDropdown: false
+    };
+  },
   computed: {
     columns() {
       return Array.isArray(this.value?.$table?.columns) ? this.value.$table.columns : [];
@@ -2542,6 +2566,46 @@ module.exports = app => app.component('dashboard-table', {
     }
   },
   methods: {
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown;
+    },
+    handleBodyClick(event) {
+      const dropdownRefs = this.$refs.dropdown;
+      const dropdowns = Array.isArray(dropdownRefs) ? dropdownRefs : [dropdownRefs];
+      const hasClickInsideDropdown = dropdowns
+        .filter(dropdown => dropdown && typeof dropdown.contains === 'function')
+        .some(dropdown => dropdown.contains(event.target));
+
+      if (!hasClickInsideDropdown) {
+        this.showDropdown = false;
+      }
+    },
+    neutralizeCsvCell(cell) {
+      const value = this.displayValue(cell);
+      return /^\s*[=+\-@]/.test(value) ? `'${value}` : value;
+    },
+    escapeCsvCell(cell) {
+      const escapedCell = this.neutralizeCsvCell(cell).replaceAll('"', '""');
+      return `"${escapedCell}"`;
+    },
+    downloadCsv() {
+      const header = this.columns.map(this.escapeCsvCell).join(',');
+      const rows = this.rows
+        .map(row => row.map(this.escapeCsvCell).join(','))
+        .join('\n');
+
+      const csv = [header, rows].filter(v => v.length > 0).join('\n');
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement('a');
+      anchor.href = url;
+      anchor.download = 'table.csv';
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(url);
+      this.$toast.success('CSV downloaded!');
+    },
     displayValue(cell) {
       if (cell == null) {
         return '';
@@ -2555,6 +2619,12 @@ module.exports = app => app.component('dashboard-table', {
       }
       return String(cell);
     }
+  },
+  mounted() {
+    document.body.addEventListener('click', this.handleBodyClick);
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.handleBodyClick);
   }
 });
 
@@ -2940,6 +3010,140 @@ module.exports = app => app.component('detail-array', {
   }
 });
 
+/***/ },
+
+/***/ "./frontend/src/detail-date/detail-date.js"
+/*!*************************************************!*\
+  !*** ./frontend/src/detail-date/detail-date.js ***!
+  \*************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./detail-date.html */ "./frontend/src/detail-date/detail-date.html");
+
+module.exports = app => app.component('detail-date', {
+  template,
+  props: ['value', 'viewMode'],
+  emits: ['updated'],
+  watch: {
+    displayValue: {
+      immediate: true,
+      handler(val) {
+        this.$emit('updated', val);
+      }
+    }
+  },
+  computed: {
+    format() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.format;
+      }
+      return this.viewMode;
+    },
+    timezone() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.timezone || '';
+      }
+      return '';
+    },
+    parsedDate() {
+      if (this.value == null) {
+        return null;
+      }
+      const date = new Date(this.value);
+      return Number.isNaN(date.getTime()) ? null : date;
+    },
+    displayValue() {
+      if (this.value == null) {
+        return String(this.value);
+      }
+      if (!this.parsedDate) {
+        return 'Invalid Date';
+      }
+      return this.formatDateForDisplay(this.parsedDate);
+    }
+  },
+  methods: {
+    formatDateForDisplay(date) {
+      if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+        return 'Invalid Date';
+      }
+
+      if (this.format === 'utc_iso') {
+        return date.toISOString();
+      }
+
+      if (this.format === 'local_browser') {
+        return date.toLocaleString();
+      }
+
+      if (this.format === 'unix_ms') {
+        return String(date.getTime());
+      }
+
+      if (this.format === 'unix_seconds') {
+        return String(Math.floor(date.getTime() / 1000));
+      }
+
+      if (this.format === 'duration_relative') {
+        return this.formatRelativeDuration(date);
+      }
+
+      if (this.format === 'custom_tz') {
+        return this.formatCustomTimezone(date);
+      }
+
+      return date.toISOString();
+    },
+    formatRelativeDuration(date) {
+      const diffMs = date.getTime() - Date.now();
+      const absMs = Math.abs(diffMs);
+      const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+      const units = [
+        { unit: 'year', ms: 365 * 24 * 60 * 60 * 1000 },
+        { unit: 'month', ms: 30 * 24 * 60 * 60 * 1000 },
+        { unit: 'day', ms: 24 * 60 * 60 * 1000 },
+        { unit: 'hour', ms: 60 * 60 * 1000 },
+        { unit: 'minute', ms: 60 * 1000 },
+        { unit: 'second', ms: 1000 }
+      ];
+
+      for (const { unit, ms } of units) {
+        if (absMs >= ms || unit === 'second') {
+          const value = Math.round(diffMs / ms);
+          return rtf.format(value, unit);
+        }
+      }
+
+      return 'now';
+    },
+    formatCustomTimezone(date) {
+      const tz = (this.timezone || '').trim();
+      if (!tz) {
+        return `${date.toISOString()} (enter an IANA timezone)`;
+      }
+
+      try {
+        return new Intl.DateTimeFormat(undefined, {
+          timeZone: tz,
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        }).format(date);
+      } catch (err) {
+        return `Invalid timezone: ${tz}`;
+      }
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/detail-default/detail-default.js"
@@ -4064,6 +4268,58 @@ module.exports = app => app.component('detail-default', {
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js"
+/*!**************************************************************************************!*\
+  !*** ./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js ***!
+  \**************************************************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./date-view-mode-picker.html */ "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html");
+
+module.exports = app => app.component('date-view-mode-picker', {
+  template,
+  props: ['viewMode', 'path'],
+  emits: ['update:viewMode'],
+  computed: {
+    format() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.format;
+      }
+      return this.viewMode;
+    },
+    timezone() {
+      if (this.viewMode != null && typeof this.viewMode === 'object') {
+        return this.viewMode.timezone || '';
+      }
+      return '';
+    },
+    timezoneDatalistId() {
+      return `timezone-options-${String(this.path?.path || '').replace(/[^a-zA-Z0-9_-]/g, '-')}`;
+    },
+    timezones() {
+      return Intl.supportedValuesOf('timeZone');
+    }
+  },
+  methods: {
+    onFormatChange(newFormat) {
+      if (newFormat === 'custom_tz') {
+        this.$emit('update:viewMode', { format: 'custom_tz', timezone: this.timezone });
+      } else {
+        this.$emit('update:viewMode', newFormat);
+      }
+    },
+    onTimezoneChange(newTimezone) {
+      this.$emit('update:viewMode', { format: 'custom_tz', timezone: newTimezone });
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/document-details/document-details.js"
@@ -4528,11 +4784,15 @@ const appendCSS = __webpack_require__(/*! ../../appendCSS */ "./frontend/src/app
 
 appendCSS(__webpack_require__(/*! ./document-property.css */ "./frontend/src/document-details/document-property/document-property.css"));
 
+const UNSET = Symbol('unset');
+
 module.exports = app => app.component('document-property', {
   template,
   data: function() {
     return {
       dateType: 'picker', // picker, iso
+      dateViewMode: 'utc_iso',
+      renderedValue: UNSET,
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
       detailViewMode: 'text',
@@ -4549,8 +4809,14 @@ module.exports = app => app.component('document-property', {
   },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
+    isDatePath() {
+      return this.path?.instance === 'Date';
+    },
+    rawValue() {
+      return this.getValueForPath(this.path.path);
+    },
     valueAsString() {
-      const value = this.getValueForPath(this.path.path);
+      const value = this.renderedValue !== UNSET ? this.renderedValue : this.rawValue;
       if (value == null) {
         return String(value);
       }
@@ -4682,6 +4948,9 @@ module.exports = app => app.component('document-property', {
       if (schemaPath.instance === 'Array') {
         return 'detail-array';
       }
+      if (schemaPath.instance === 'Date') {
+        return 'detail-date';
+      }
       return 'detail-default';
     },
     getEditComponentForPath(path) {
@@ -9751,6 +10020,39 @@ const template = __webpack_require__(/*! ./tasks.html */ "./frontend/src/tasks/t
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const { DATE_FILTERS, getDateRangeForRange } = __webpack_require__(/*! ../_util/dateRange */ "./frontend/src/_util/dateRange.js");
 
+/** Returns the bucket size in ms for the given date range. */
+function getBucketSizeMs(range) {
+  switch (range) {
+    case 'last_hour': return 5 * 60 * 1000;        // 5 minutes
+    case 'today':
+    case 'yesterday': return 60 * 60 * 1000;        // 1 hour
+    case 'thisWeek':
+    case 'lastWeek': return 24 * 60 * 60 * 1000;    // 1 day
+    case 'thisMonth':
+    case 'lastMonth': return 24 * 60 * 60 * 1000;   // 1 day
+    default: return 5 * 60 * 1000;
+  }
+}
+
+/** Formats a bucket timestamp for the x-axis label based on the date range. */
+function formatBucketLabel(timestamp, range) {
+  const date = new Date(timestamp);
+  switch (range) {
+    case 'last_hour':
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    case 'today':
+    case 'yesterday':
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    case 'thisWeek':
+    case 'lastWeek':
+    case 'thisMonth':
+    case 'lastMonth':
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    default:
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+}
+
 module.exports = app => app.component('tasks', {
   data: () => ({
     status: 'init',
@@ -9778,10 +10080,22 @@ module.exports = app => app.component('tasks', {
       scheduledAt: '',
       parameters: '',
       repeatInterval: ''
-    }
+    },
+    // Chart over time
+    overTimeChart: null,
+    overTimeBuckets: [],
+    // Toggled with v-if on the canvas so Chart.js is torn down and remounted on
+    // filter changes. Updating Chart.js in place during a big Vue re-render was
+    // freezing the page (dropdowns unresponsive, chart stale).
+    showOverTimeChart: true
   }),
   methods: {
     async getTasks() {
+      // Hide chart canvas + teardown Chart.js immediately on filter changes
+      // (see showOverTimeChart + v-if on the canvas in tasks.html).
+      this.showOverTimeChart = false;
+      this.destroyOverTimeChart();
+
       const params = {};
       if (this.selectedStatus == 'all') {
         params.status = null;
@@ -9800,9 +10114,105 @@ module.exports = app => app.component('tasks', {
         params.name = this.searchQuery.trim();
       }
 
-      const { statusCounts, tasksByName } = await api.Task.getTaskOverview(params);
-      this.statusCounts = statusCounts || this.statusCounts;
-      this.tasksByName = tasksByName || [];
+      const [overviewResult, overTimeResult] = await Promise.all([
+        api.Task.getTaskOverview(params),
+        api.Task.getTasksOverTime({
+          start: params.start,
+          end: params.end,
+          bucketSizeMs: getBucketSizeMs(this.selectedRange)
+        })
+      ]);
+
+      this.statusCounts = overviewResult.statusCounts || this.statusCounts;
+      this.tasksByName = overviewResult.tasksByName || [];
+      this.overTimeBuckets = overTimeResult || [];
+      if (this.overTimeBuckets.length === 0) {
+        this.showOverTimeChart = false;
+        this.destroyOverTimeChart();
+      } else {
+        this.showOverTimeChart = true;
+        await this.$nextTick();
+        this.renderOverTimeChart();
+      }
+    },
+
+    /** Build or update the stacked bar chart showing tasks over time. */
+    renderOverTimeChart() {
+      const Chart = typeof window !== 'undefined' && window.Chart;
+      if (!Chart) {
+        throw new Error('Chart.js not found');
+      }
+      const canvas = this.$refs.overTimeChart;
+      if (!canvas || typeof canvas.getContext !== 'function') return;
+
+      const buckets = this.overTimeBuckets;
+      const labels = buckets.map(b => formatBucketLabel(b.timestamp, this.selectedRange));
+      const succeeded = buckets.map(b => b.succeeded || 0);
+      const failed = buckets.map(b => b.failed || 0);
+      const cancelled = buckets.map(b => b.cancelled || 0);
+
+      const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+      const tickColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.6)';
+      const gridColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
+
+      const chartData = {
+        labels,
+        datasets: [
+          { label: 'Succeeded', data: succeeded, backgroundColor: '#22c55e', stack: 'tasks' },
+          { label: 'Failed', data: failed, backgroundColor: '#ef4444', stack: 'tasks' },
+          { label: 'Cancelled', data: cancelled, backgroundColor: '#6b7280', stack: 'tasks' }
+        ]
+      };
+
+      if (this.overTimeChart) {
+        try {
+          this.overTimeChart.data.labels = labels;
+          this.overTimeChart.data.datasets[0].data = succeeded;
+          this.overTimeChart.data.datasets[1].data = failed;
+          this.overTimeChart.data.datasets[2].data = cancelled;
+          this.overTimeChart.update('none');
+        } finally {
+          this.destroyOverTimeChart();
+        }
+      }
+
+      this.overTimeChart = new Chart(canvas, {
+        type: 'bar',
+        data: chartData,
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          animation: false,
+          scales: {
+            x: {
+              stacked: true,
+              ticks: { color: tickColor, maxRotation: 45, minRotation: 0 },
+              grid: { color: gridColor }
+            },
+            y: {
+              stacked: true,
+              beginAtZero: true,
+              ticks: { color: tickColor, precision: 0 },
+              grid: { color: gridColor }
+            }
+          },
+          plugins: {
+            legend: {
+              display: true,
+              position: 'top',
+              labels: { color: tickColor }
+            },
+            tooltip: { mode: 'index', intersect: false }
+          }
+        }
+      });
+    },
+
+    destroyOverTimeChart() {
+      if (this.overTimeChart) {
+        this.overTimeChart.destroy();
+        this.overTimeChart = null;
+      }
     },
     openTaskGroupDetails(group) {
       const query = { dateRange: this.selectedRange || 'last_hour' };
@@ -9978,11 +10388,23 @@ module.exports = app => app.component('tasks', {
     }
   },
   mounted: async function() {
+    // Load initial data while showing the loader state.
     await this.updateDateRange();
-    await this.getTasks();
+
+    // Once data is loaded, switch to the main view.
     this.status = 'loaded';
+    await this.$nextTick();
+
+    // Ensure the chart renders now that the canvas exists in the DOM.
+    if (this.showOverTimeChart && this.overTimeBuckets.length > 0) {
+      this.renderOverTimeChart();
+    }
+
     this.setDefaultCreateTaskValues();
   },
+  beforeUnmount() {
+    this.destroyOverTimeChart();
+  },
   template: template
 });
 
@@ -10285,9 +10707,15 @@ var map = {
 	"./detail-array/detail-array": "./frontend/src/detail-array/detail-array.js",
 	"./detail-array/detail-array.html": "./frontend/src/detail-array/detail-array.html",
 	"./detail-array/detail-array.js": "./frontend/src/detail-array/detail-array.js",
+	"./detail-date/detail-date": "./frontend/src/detail-date/detail-date.js",
+	"./detail-date/detail-date.html": "./frontend/src/detail-date/detail-date.html",
+	"./detail-date/detail-date.js": "./frontend/src/detail-date/detail-date.js",
 	"./detail-default/detail-default": "./frontend/src/detail-default/detail-default.js",
 	"./detail-default/detail-default.html": "./frontend/src/detail-default/detail-default.html",
 	"./detail-default/detail-default.js": "./frontend/src/detail-default/detail-default.js",
+	"./document-details/date-view-mode-picker/date-view-mode-picker": "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js",
+	"./document-details/date-view-mode-picker/date-view-mode-picker.html": "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html",
+	"./document-details/date-view-mode-picker/date-view-mode-picker.js": "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js",
 	"./document-details/document-details": "./frontend/src/document-details/document-details.js",
 	"./document-details/document-details.css": "./frontend/src/document-details/document-details.css",
 	"./document-details/document-details.html": "./frontend/src/document-details/document-details.html",
@@ -10506,7 +10934,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.31
+* @vue/reactivity v3.5.32
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -12653,7 +13081,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.31
+* @vue/runtime-core v3.5.32
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -13600,6 +14028,7 @@ function createPathGetter(ctx, path) {
   };
 }
 
+const pendingMounts = /* @__PURE__ */ new WeakMap();
 const TeleportEndKey = /* @__PURE__ */ Symbol("_vte");
 const isTeleport = (type) => type.__isTeleport;
 const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === "");
@@ -13641,91 +14070,86 @@ const TeleportImpl = {
       o: { insert, querySelector, createText, createComment }
     } = internals;
     const disabled = isTeleportDisabled(n2.props);
-    let { shapeFlag, children, dynamicChildren } = n2;
+    let { dynamicChildren } = n2;
     if ( true && isHmrUpdating) {
       optimized = false;
       dynamicChildren = null;
     }
+    const mount = (vnode, container2, anchor2) => {
+      if (vnode.shapeFlag & 16) {
+        mountChildren(
+          vnode.children,
+          container2,
+          anchor2,
+          parentComponent,
+          parentSuspense,
+          namespace,
+          slotScopeIds,
+          optimized
+        );
+      }
+    };
+    const mountToTarget = (vnode = n2) => {
+      const disabled2 = isTeleportDisabled(vnode.props);
+      const target = vnode.target = resolveTarget(vnode.props, querySelector);
+      const targetAnchor = prepareAnchor(target, vnode, createText, insert);
+      if (target) {
+        if (namespace !== "svg" && isTargetSVG(target)) {
+          namespace = "svg";
+        } else if (namespace !== "mathml" && isTargetMathML(target)) {
+          namespace = "mathml";
+        }
+        if (parentComponent && parentComponent.isCE) {
+          (parentComponent.ce._teleportTargets || (parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
+        }
+        if (!disabled2) {
+          mount(vnode, target, targetAnchor);
+          updateCssVars(vnode, false);
+        }
+      } else if ( true && !disabled2) {
+        warn$1("Invalid Teleport target on mount:", target, `(${typeof target})`);
+      }
+    };
+    const queuePendingMount = (vnode) => {
+      const mountJob = () => {
+        if (pendingMounts.get(vnode) !== mountJob) return;
+        pendingMounts.delete(vnode);
+        if (isTeleportDisabled(vnode.props)) {
+          mount(vnode, container, vnode.anchor);
+          updateCssVars(vnode, true);
+        }
+        mountToTarget(vnode);
+      };
+      pendingMounts.set(vnode, mountJob);
+      queuePostRenderEffect(mountJob, parentSuspense);
+    };
     if (n1 == null) {
       const placeholder = n2.el =  true ? createComment("teleport start") : 0;
       const mainAnchor = n2.anchor =  true ? createComment("teleport end") : 0;
       insert(placeholder, container, anchor);
       insert(mainAnchor, container, anchor);
-      const mount = (container2, anchor2) => {
-        if (shapeFlag & 16) {
-          mountChildren(
-            children,
-            container2,
-            anchor2,
-            parentComponent,
-            parentSuspense,
-            namespace,
-            slotScopeIds,
-            optimized
-          );
-        }
-      };
-      const mountToTarget = () => {
-        const target = n2.target = resolveTarget(n2.props, querySelector);
-        const targetAnchor = prepareAnchor(target, n2, createText, insert);
-        if (target) {
-          if (namespace !== "svg" && isTargetSVG(target)) {
-            namespace = "svg";
-          } else if (namespace !== "mathml" && isTargetMathML(target)) {
-            namespace = "mathml";
-          }
-          if (parentComponent && parentComponent.isCE) {
-            (parentComponent.ce._teleportTargets || (parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
-          }
-          if (!disabled) {
-            mount(target, targetAnchor);
-            updateCssVars(n2, false);
-          }
-        } else if ( true && !disabled) {
-          warn$1(
-            "Invalid Teleport target on mount:",
-            target,
-            `(${typeof target})`
-          );
-        }
-      };
+      if (isTeleportDeferred(n2.props) || parentSuspense && parentSuspense.pendingBranch) {
+        queuePendingMount(n2);
+        return;
+      }
       if (disabled) {
-        mount(container, mainAnchor);
+        mount(n2, container, mainAnchor);
         updateCssVars(n2, true);
       }
-      if (isTeleportDeferred(n2.props) || parentSuspense && parentSuspense.pendingBranch) {
-        n2.el.__isMounted = false;
-        queuePostRenderEffect(() => {
-          if (n2.el.__isMounted !== false) return;
-          mountToTarget();
-          delete n2.el.__isMounted;
-        }, parentSuspense);
-      } else {
-        mountToTarget();
-      }
+      mountToTarget();
     } else {
       n2.el = n1.el;
-      n2.targetStart = n1.targetStart;
       const mainAnchor = n2.anchor = n1.anchor;
-      const target = n2.target = n1.target;
-      const targetAnchor = n2.targetAnchor = n1.targetAnchor;
-      if (n1.el.__isMounted === false) {
-        queuePostRenderEffect(() => {
-          TeleportImpl.process(
-            n1,
-            n2,
-            container,
-            anchor,
-            parentComponent,
-            parentSuspense,
-            namespace,
-            slotScopeIds,
-            optimized,
-            internals
-          );
-        }, parentSuspense);
+      const pendingMount = pendingMounts.get(n1);
+      if (pendingMount) {
+        pendingMount.flags |= 8;
+        pendingMounts.delete(n1);
+        queuePendingMount(n2);
         return;
       }
+      n2.targetStart = n1.targetStart;
+      const target = n2.target = n1.target;
+      const targetAnchor = n2.targetAnchor = n1.targetAnchor;
       const wasDisabled = isTeleportDisabled(n1.props);
       const currentContainer = wasDisabled ? container : target;
       const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
@@ -13816,13 +14240,19 @@ const TeleportImpl = {
       target,
       props
     } = vnode;
+    let shouldRemove = doRemove || !isTeleportDisabled(props);
+    const pendingMount = pendingMounts.get(vnode);
+    if (pendingMount) {
+      pendingMount.flags |= 8;
+      pendingMounts.delete(vnode);
+      shouldRemove = false;
+    }
     if (target) {
       hostRemove(targetStart);
       hostRemove(targetAnchor);
     }
     doRemove && hostRemove(anchor);
     if (shapeFlag & 16) {
-      const shouldRemove = doRemove || !isTeleportDisabled(props);
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
         unmount(
@@ -20031,6 +20461,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
         if (instance.isUnmounted || suspense.isUnmounted || suspense.pendingId !== instance.suspenseId) {
           return;
         }
+        unsetCurrentInstance();
         instance.asyncResolved = true;
         const { vnode: vnode2 } = instance;
         if (true) {
@@ -21237,7 +21668,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.31";
+const version = "3.5.32";
 const warn =  true ? warn$1 : 0;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools =  true ? devtools$1 : 0;
@@ -21448,7 +21879,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.31
+* @vue/runtime-dom v3.5.32
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -23520,7 +23951,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   toTypeString: () => (/* binding */ toTypeString)
 /* harmony export */ });
 /**
-* @vue/shared v3.5.31
+* @vue/shared v3.5.32
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -49188,7 +49619,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.31
+* vue v3.5.32
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -50474,7 +50905,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 (module) {
 
 "use strict";
-module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl p-2\">\n    {{displayValue}}\n  </div>\n</div>";
+module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl p-2\" :class=\"displayClass\">\n    {{displayValue}}\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -50485,7 +50916,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 (module) {
 
 "use strict";
-module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=\"el in result\" :key=\"el._id || el.finishedEvaluatingAt\">\n      <component\n        class=\"bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n        :is=\"getComponentForValue(el)\"\n        :value=\"el\">\n      </component>\n    </div>\n  </div>\n  <div v-else>\n    <component\n      class=\"bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n      :is=\"getComponentForValue(result)\"\n      :value=\"result\"\n      :fullscreen=\"fullscreen\"\n      @fullscreen=\"$emit('fullscreen')\">\n    </component>\n  </div>\n  <div class=\"text-right text-sm text-content-secondary mt-1\" v-if=\"finishedEvaluatingAt && !fullscreen\">\n    Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}\n  </div>\n</div>\n";
+module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=\"(el, index) in result\">\n      <component\n        class=\"bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n        :is=\"getComponentForValue(el)\"\n        :value=\"el\">\n      </component>\n    </div>\n  </div>\n  <div v-else>\n    <component\n      class=\"bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n      :is=\"getComponentForValue(result)\"\n      :value=\"result\"\n      :fullscreen=\"fullscreen\"\n      @fullscreen=\"$emit('fullscreen')\">\n    </component>\n  </div>\n  <div class=\"text-right text-sm text-content-secondary mt-1\" v-if=\"finishedEvaluatingAt && !fullscreen\">\n    Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -50496,7 +50927,7 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 (module) {
 
 "use strict";
-module.exports = "<div class=\"overflow-x-auto\">\n  <table class=\"min-w-full border-separate border-spacing-0\">\n    <thead v-if=\"hasColumns\" class=\"bg-slate-50\">\n      <tr>\n        <th\n          v-for=\"(column, index) in columns\"\n          :key=\"'column-' + index\"\n          class=\"bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge\"\n        >\n          {{ column }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr v-for=\"(row, rowIndex) in rows\" :key=\"'row-' + rowIndex\" class=\"bg-surface hover:bg-slate-50\">\n        <td\n          v-for=\"(cell, columnIndex) in row\"\n          :key=\"'cell-' + rowIndex + '-' + columnIndex\"\n          class=\"p-3 text-sm text-content border-b border-edge\"\n        >\n          {{ displayValue(cell) }}\n        </td>\n      </tr>\n      <tr v-if=\"!hasRows\">\n        <td\n          :colspan=\"Math.max(columns.length, 1)\"\n          class=\"p-3 text-sm text-content-tertiary border-b border-edge\"\n        >\n          No rows\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n";
+module.exports = "<div class=\"overflow-x-auto\">\n  <table class=\"min-w-full border-separate border-spacing-0\">\n    <thead v-if=\"hasColumns\" class=\"bg-slate-50\">\n      <tr>\n        <th\n          v-for=\"(column, index) in columns\"\n          :key=\"'column-' + index\"\n          class=\"bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge\"\n        >\n          <div v-if=\"index === columns.length - 1\" class=\"relative flex items-center gap-2 w-full\" ref=\"dropdown\">\n            <span class=\"min-w-0 flex-1\">{{ column }}</span>\n            <button\n              @click.stop=\"toggleDropdown\"\n              class=\"ml-auto rounded p-1 text-content-secondary hover:bg-muted hover:text-content\"\n              aria-label=\"Table actions\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showDropdown\"\n              class=\"absolute right-0 top-full z-10 mt-2 w-56 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n              <button\n                class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n                @click=\"downloadCsv(); showDropdown = false\">\n                Download as CSV\n              </button>\n            </div>\n          </div>\n          <template v-else>{{ column }}</template>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr v-for=\"(row, rowIndex) in rows\" :key=\"'row-' + rowIndex\" class=\"bg-surface hover:bg-slate-50\">\n        <td\n          v-for=\"(cell, columnIndex) in row\"\n          :key=\"'cell-' + rowIndex + '-' + columnIndex\"\n          class=\"p-3 text-sm text-content border-b border-edge\"\n        >\n          {{ displayValue(cell) }}\n        </td>\n      </tr>\n      <tr v-if=\"!hasRows\">\n        <td\n          :colspan=\"Math.max(columns.length, 1)\"\n          class=\"p-3 text-sm text-content-tertiary border-b border-edge\"\n        >\n          No rows\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n";
 
 /***/ },
 
@@ -50555,6 +50986,17 @@ module.exports = "<div class=\"w-full\">\n  <div v-if=\"!arrayValue || arrayValu
 
 /***/ },
 
+/***/ "./frontend/src/detail-date/detail-date.html"
+/*!***************************************************!*\
+  !*** ./frontend/src/detail-date/detail-date.html ***!
+  \***************************************************/
+(module) {
+
+"use strict";
+module.exports = "<pre class=\"w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0\">{{displayValue}}</pre>\n";
+
+/***/ },
+
 /***/ "./frontend/src/detail-default/detail-default.html"
 /*!*********************************************************!*\
   !*** ./frontend/src/detail-default/detail-default.html ***!
@@ -50566,6 +51008,17 @@ module.exports = "<div class=\"w-full\">\n  <pre v-if=\"!isGeoJsonGeometry || !m
 
 /***/ },
 
+/***/ "./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html"
+/*!****************************************************************************************!*\
+  !*** ./frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html ***!
+  \****************************************************************************************/
+(module) {
+
+"use strict";
+module.exports = "<div class=\"flex items-center gap-2\" @click.stop>\n  <select\n    :value=\"format\"\n    @input=\"onFormatChange($event.target.value)\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1\"\n  >\n    <option value=\"utc_iso\">UTC (ISO)</option>\n    <option value=\"local_browser\">Local (Browser)</option>\n    <option value=\"unix_ms\">Unix (ms)</option>\n    <option value=\"unix_seconds\">Unix (seconds)</option>\n    <option value=\"duration_relative\">Duration relative to now</option>\n    <option value=\"custom_tz\">Custom TZ...</option>\n  </select>\n  <input\n    v-if=\"format === 'custom_tz'\"\n    :value=\"timezone\"\n    @input=\"onTimezoneChange($event.target.value.trim())\"\n    :list=\"timezoneDatalistId\"\n    type=\"text\"\n    placeholder=\"America/New_York\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1 w-40\"\n  >\n  <datalist v-if=\"format === 'custom_tz'\" :id=\"timezoneDatalistId\">\n    <option v-for=\"tz in timezones\" :key=\"tz\" :value=\"tz\"></option>\n  </datalist>\n</div>\n";
+
+/***/ },
+
 /***/ "./frontend/src/document-details/document-details.css"
 /*!************************************************************!*\
   !*** ./frontend/src/document-details/document-details.css ***!
@@ -50606,7 +51059,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 (module) {
 
 "use strict";
-module.exports = "<div class=\"border border-edge bg-surface rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-content-tertiary mr-2 transition-transform duration-200\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-content\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-content-tertiary\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :view-mode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <!-- Special handling for truncated arrays -->\n      <div v-if=\"isArray && shouldShowTruncated\" class=\"w-full\">\n        <div class=\"mt-2\">\n          <div\n            v-for=\"(item, index) in truncatedArrayItems\"\n            :key=\"index\"\n            class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600\">\n            <div class=\"absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600\">{{ index }}</div>\n            <div v-if=\"arrayUtils.isObjectItem(item)\" class=\"flex flex-col gap-1 mt-1 px-2\">\n              <div\n                v-for=\"key in arrayUtils.getItemKeys(item)\"\n                :key=\"key\"\n                class=\"flex items-start gap-2 text-xs font-mono\">\n                <span class=\"font-semibold text-gray-600 flex-shrink-0 min-w-[80px]\">{{ key }}:</span>\n                <span class=\"text-gray-800 break-words whitespace-pre-wrap flex-1\">{{ arrayUtils.formatItemValue(item, key) }}</span>\n              </div>\n            </div>\n            <div v-else class=\"text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1\">{{ arrayUtils.formatValue(item) }}</div>\n          </div>\n          <div class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100\">\n            <div class=\"text-xs py-1.5 px-2 font-mono text-content-tertiary italic break-words whitespace-pre-wrap mt-1\">\n              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}\n            </div>\n          </div>\n        </div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show all {{ arrayValue.length }} items\n        </button>\n      </div>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-content-secondary whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"getValueForPath(path.path)\"\n          :view-mode=\"detailViewMode\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"getValueForPath(path.path)\"\n          :view-mode=\"detailViewMode\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"border border-edge bg-surface rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-content-tertiary mr-2 transition-transform duration-200\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-content\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-content-tertiary\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <date-view-mode-picker\n        v-if=\"isDatePath\"\n        :viewMode=\"dateViewMode\"\n        :path=\"path\"\n        @update:viewMode=\"dateViewMode = $event\"\n      ></date-view-mode-picker>\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :viewMode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <!-- Special handling for truncated arrays -->\n      <div v-if=\"isArray && shouldShowTruncated\" class=\"w-full\">\n        <div class=\"mt-2\">\n          <div\n            v-for=\"(item, index) in truncatedArrayItems\"\n            :key=\"index\"\n            class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600\">\n            <div class=\"absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600\">{{ index }}</div>\n            <div v-if=\"arrayUtils.isObjectItem(item)\" class=\"flex flex-col gap-1 mt-1 px-2\">\n              <div\n                v-for=\"key in arrayUtils.getItemKeys(item)\"\n                :key=\"key\"\n                class=\"flex items-start gap-2 text-xs font-mono\">\n                <span class=\"font-semibold text-gray-600 flex-shrink-0 min-w-[80px]\">{{ key }}:</span>\n                <span class=\"text-gray-800 break-words whitespace-pre-wrap flex-1\">{{ arrayUtils.formatItemValue(item, key) }}</span>\n              </div>\n            </div>\n            <div v-else class=\"text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1\">{{ arrayUtils.formatValue(item) }}</div>\n          </div>\n          <div class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100\">\n            <div class=\"text-xs py-1.5 px-2 font-mono text-content-tertiary italic break-words whitespace-pre-wrap mt-1\">\n              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}\n            </div>\n          </div>\n        </div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show all {{ arrayValue.length }} items\n        </button>\n      </div>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-content-secondary whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"isDatePath ? dateViewMode : detailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"isDatePath ? dateViewMode : detailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -51068,7 +51521,7 @@ module.exports = "";
 (module) {
 
 "use strict";
-module.exports = "<div class=\"p-4 space-y-6\">\n    <div>\n        <h1 class=\"text-2xl font-bold text-content-secondary 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-surface p-4 rounded-lg shadow\" v-if=\"status == 'loaded'\">\n            <div class=\"mb-4\">\n                <label class=\"block text-sm font-medium text-content-secondary mb-1\">Filter by Date:</label>\n                <select v-model=\"selectedRange\" @change=\"updateDateRange\" class=\"border-edge-strong 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-content-secondary mb-1\">Filter by Status:</label>\n                <select v-model=\"selectedStatus\" @change=\"getTasks\" class=\"border-edge-strong 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-content-secondary mb-1\">Search by Task Name:</label>\n                <input \n                    v-model=\"searchQuery\" \n                    type=\"text\" \n                    @input=\"onSearchInput\"\n                    class=\"border-edge-strong 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-content-secondary 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-primary text-primary-text hover:bg-primary-hover 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-edge hover:border-edge-strong'\"\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-content-secondary 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-primary transition-colors\">{{ group.name }}</div>\n                                    <svg class=\"w-4 h-4 text-gray-400 group-hover:text-primary 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-content-tertiary group-hover:text-content-secondary transition-colors\">Total: {{ group.totalCount }} tasks</div>\n                                <div class=\"text-xs text-primary 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-content-tertiary\">\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-page border border-edge rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-edge-strong\"\n                            >\n                                <div class=\"text-xs text-gray-600 font-medium\">Cancelled</div>\n                                <div class=\"text-lg font-bold text-content-secondary\">{{ 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-content-secondary mb-4\">Create New Task</h3>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Task Name:</label>\n                    <input \n                        v-model=\"newTask.name\" \n                        type=\"text\" \n                        class=\"w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n                        placeholder=\"Enter task name\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Scheduled Time:</label>\n                    <input \n                        v-model=\"newTask.scheduledAt\" \n                        type=\"datetime-local\" \n                        class=\"w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Parameters (JSON):</label>\n                    <ace-editor\n                        v-model=\"newTask.parameters\"\n                        mode=\"json\"\n                        :line-numbers=\"true\"\n                        class=\"min-h-[120px]\"\n                    />\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary 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-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n                        placeholder=\"0 for no repetition\"\n                    >\n                    <p class=\"text-xs text-content-tertiary 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-primary text-primary-text px-4 py-2 rounded-md hover:bg-primary-hover\"\n                    >\n                        Create Task\n                    </button>\n                    <button \n                         @click=\"closeCreateTaskModal\" \n                         class=\"flex-1 bg-gray-300 text-content-secondary 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-content-secondary 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-surface p-4 rounded-lg shadow\" v-if=\"status == 'loaded'\">\n            <div class=\"mb-4\">\n                <label class=\"block text-sm font-medium text-content-secondary mb-1\">Filter by Date:</label>\n                <select v-model=\"selectedRange\" @change=\"updateDateRange\" class=\"border-edge-strong 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-content-secondary mb-1\">Filter by Status:</label>\n                <select v-model=\"selectedStatus\" @change=\"getTasks\" class=\"border-edge-strong 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-content-secondary mb-1\">Search by Task Name:</label>\n                <input \n                    v-model=\"searchQuery\" \n                    type=\"text\" \n                    @input=\"onSearchInput\"\n                    class=\"border-edge-strong 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-content-secondary 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-primary text-primary-text hover:bg-primary-hover 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-edge hover:border-edge-strong'\"\n                >\n                    <div class=\"text-sm\">Cancelled</div>\n                    <div class=\"text-2xl font-bold\">{{cancelledCount}}</div>\n                </button>\n            </div>\n\n            <!-- Tasks Over Time Chart -->\n            <!--\n              Canvas is gated by showOverTimeChart (v-if) so Chart.js is destroyed\n              and the DOM node is removed before each refresh. In-place Chart.js\n              updates during Vue re-renders from filter changes could freeze the UI\n              (dropdowns stuck, chart not updating). See tasks.js getTasks().\n            -->\n            <div class=\"mt-6\">\n                <h2 class=\"text-lg font-semibold text-content-secondary mb-3\">Tasks Over Time</h2>\n                <div class=\"bg-page border border-edge rounded-lg p-4\" style=\"height: 260px;\">\n                    <canvas v-if=\"showOverTimeChart && overTimeBuckets.length > 0\" ref=\"overTimeChart\" style=\"width:100%;height:100%;\"></canvas>\n                    <div v-else class=\"flex items-center justify-center h-full text-content-tertiary text-sm\">\n                        No task activity in the selected window\n                    </div>\n                </div>\n            </div>\n            \n            <!-- Grouped Task List -->\n            <div class=\"mt-6\">\n                <h2 class=\"text-lg font-semibold text-content-secondary mb-4\">Tasks by Name</h2>\n                <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4\">\n                    <div v-for=\"group in tasksByName\" :key=\"group.name\" class=\"border border-edge rounded-lg p-4 group hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200\">\n                        <div class=\"flex items-start justify-between mb-3\">\n                            <div class=\"flex-1 cursor-pointer min-w-0 mr-2\" @click=\"openTaskGroupDetails(group)\">\n                                <div class=\"flex items-center gap-1\">\n                                    <div class=\"font-medium text-sm group-hover:text-primary transition-colors truncate\">{{ group.name }}</div>\n                                    <svg class=\"w-3 h-3 text-gray-400 group-hover:text-primary transition-colors flex-shrink-0\" 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-xs text-content-tertiary\">Total: {{ group.totalCount }} tasks</div>\n                            </div>\n                            <div class=\"text-xs text-content-tertiary flex-shrink-0\">\n                                {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}\n                            </div>\n                        </div>\n                        \n                        <!-- Status Counts -->\n                        <div class=\"grid grid-cols-2 gap-1.5\">\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-base 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-base 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-base font-bold text-red-700\">{{ group.statusCounts.failed || 0 }}</div>\n                            </button>\n                            <button \n                                @click.stop=\"openTaskGroupDetailsWithFilter(group, 'cancelled')\"\n                                class=\"bg-page border border-edge rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-edge-strong\"\n                            >\n                                <div class=\"text-xs text-gray-600 font-medium\">Cancelled</div>\n                                <div class=\"text-base font-bold text-content-secondary\">{{ group.statusCounts.cancelled || 0 }}</div>\n                            </button>\n                        </div>\n                    </div>\n                </div>\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-content-secondary mb-4\">Create New Task</h3>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Task Name:</label>\n                    <input \n                        v-model=\"newTask.name\" \n                        type=\"text\" \n                        class=\"w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n                        placeholder=\"Enter task name\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Scheduled Time:</label>\n                    <input \n                        v-model=\"newTask.scheduledAt\" \n                        type=\"datetime-local\" \n                        class=\"w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n                    >\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary mb-1\">Parameters (JSON):</label>\n                    <ace-editor\n                        v-model=\"newTask.parameters\"\n                        mode=\"json\"\n                        :line-numbers=\"true\"\n                        class=\"min-h-[120px]\"\n                    />\n                </div>\n                \n                <div>\n                    <label class=\"block text-sm font-medium text-content-secondary 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-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary\"\n                        placeholder=\"0 for no repetition\"\n                    >\n                    <p class=\"text-xs text-content-tertiary 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-primary text-primary-text px-4 py-2 rounded-md hover:bg-primary-hover\"\n                    >\n                        Create Task\n                    </button>\n                    <button \n                         @click=\"closeCreateTaskModal\" \n                         class=\"flex-1 bg-gray-300 text-content-secondary 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";
 
 /***/ },
 
@@ -62382,7 +62835,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.3.6","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ace-builds":"^1.43.6","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","regexp.escape":"^2.0.1","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","time-commando":"1.0.1","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.3.7","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ace-builds":"^1.43.6","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","regexp.escape":"^2.0.1","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","time-commando":"1.0.1","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js"}}');
 
 /***/ }