@mongoosejs/studio 0.3.5 → 0.3.7

package/frontend/public/tw.css

@@ -719,10 +719,6 @@ video {
   right: 0.5rem;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -1224,6 +1220,10 @@ video {
   width: 1rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-44 {
   width: 11rem;
 }
@@ -1240,6 +1240,10 @@ video {
   width: 13rem;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -3064,14 +3068,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:rounded-lg:hover {
-  border-radius: 0.5rem;
-}
-
-.hover\:border:hover {
-  border-width: 1px;
-}
-
 .hover\:border-edge-strong:hover {
   border-color: var(--color-edge-strong);
 }
@@ -3328,6 +3324,11 @@ video {
   color: var(--color-primary);
 }
 
+.hover\:text-red-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
 .hover\:text-slate-700:hover {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));
@@ -3616,10 +3617,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.group:hover .group-hover\:text-content-secondary {
-  color: var(--color-content-secondary);
-}
-
 .group:hover .group-hover\:text-primary {
   color: var(--color-primary);
 }
@@ -3795,6 +3792,12 @@ video {
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 :is(:where(.dark) .dark\:bg-shark-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(33 37 41 / var(--tw-bg-opacity));

package/frontend/src/api.js

@@ -191,6 +191,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);
     },
@@ -531,6 +534,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);
     },

package/frontend/src/chat/chat.html

@@ -10,17 +10,6 @@
       <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
     </svg>
   </button>
-  <button
-    class="fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-surface"
-    :class="hasWorkspace ? 'text-content-secondary hover:bg-muted' : 'text-gray-300 cursor-not-allowed bg-page'"
-    @click="toggleShareThread"
-    :disabled="!hasWorkspace || !chatThreadId || sharingThread"
-    aria-label="Share thread with workspace"
-    title="Share thread with workspace"
-  >
-    <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>
-    <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>
-  </button>
   <!-- Sidebar: Chat Threads -->
   <aside
     class="bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col"
@@ -84,6 +73,18 @@
           <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
         </svg>
       </button>
+      <button
+        type="button"
+        @click="hasWorkspace ? toggleShareThread() : (showProUpgradeModal = true)"
+        class="rounded p-1.5"
+        :class="hasWorkspace && chatThreadId ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : !hasWorkspace ? 'text-gray-400 hover:text-gray-600 hover:bg-muted' : 'text-gray-300 cursor-not-allowed'"
+        :disabled="hasWorkspace && !chatThreadId"
+        aria-label="Share thread with workspace"
+        :title="'Share thread with workspace' + (!hasWorkspace ? ' (requires a pro workspace)' : !chatThreadId ? ': Open a thread first!' : '')"
+      >
+        <svg v-if="hasWorkspace" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z"/></svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z"/></svg>
+      </button>
     </div>
   </aside>
 
@@ -118,7 +119,7 @@
           @input="adjustTextareaHeight"
           @keydown.enter.exact.prevent="handleEnter"
         ></textarea>
-        <button class="bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600" :disabled="sendingMessage">
+        <button class="bg-primary hover:bg-primary-hover text-white px-4 h-[42px] rounded disabled:bg-gray-600" :disabled="sendingMessage">
           <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <g>
               <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
@@ -132,4 +133,10 @@
       </form>
     </div>
   </main>
+
+  <pro-upgrade-modal
+    :show="showProUpgradeModal"
+    feature-description="Sharing threads lets you collaborate with your team by sharing chat threads within your workspace."
+    @close="showProUpgradeModal = false"
+  ></pro-upgrade-modal>
 </div>

package/frontend/src/chat/chat.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const api = require('../api');
+const getCurrentDateTimeContext = require('../getCurrentDateTimeContext');
 const template = require('./chat.html');
 
 module.exports = {
@@ -15,7 +16,8 @@ module.exports = {
     chatMessages: [],
     hideSidebar: null,
     sharingThread: false,
-    threadSearch: ''
+    threadSearch: '',
+    showProUpgradeModal: false
   }),
   methods: {
     async sendMessage() {
@@ -44,7 +46,11 @@ module.exports = {
           }
         });
 
-        const params = { chatThreadId: this.chatThreadId, content };
+        const params = {
+          chatThreadId: this.chatThreadId,
+          content,
+          currentDateTime: getCurrentDateTimeContext()
+        };
         let userChatMessage = null;
         let assistantChatMessage = null;
         for await (const event of api.ChatThread.streamChatMessage(params)) {
@@ -151,7 +157,7 @@ module.exports = {
     },
     async toggleShareThread() {
       if (!this.chatThreadId || !this.hasWorkspace) {
-        return;
+        throw new Error('Cannot share thread: chatThreadId or hasWorkspace is missing');
       }
       this.sharingThread = true;
       try {

package/frontend/src/create-document/create-document.js

@@ -11,6 +11,7 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 });
 
 const appendCSS = require('../appendCSS');
+const getCurrentDateTimeContext = require('../getCurrentDateTimeContext');
 
 appendCSS(require('./create-document.css'));
 
@@ -49,7 +50,8 @@ module.exports = app => app.component('create-document', {
         for await (const event of api.Model.streamChatMessage({
           model: this.currentModel,
           content: prompt,
-          documentData: this.aiOriginalDocument
+          documentData: this.aiOriginalDocument,
+          currentDateTime: getCurrentDateTimeContext()
         })) {
           if (event?.textPart) {
             this.aiSuggestion += event.textPart;

package/frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.html

@@ -2,7 +2,7 @@
   <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
     {{header}}
   </div>
-  <div class="text-xl p-2">
+  <div class="text-xl p-2" :class="displayClass">
     {{displayValue}}
   </div>
-</div>
+</div>

package/frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.js

@@ -9,16 +9,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;
     }
   }
 });

package/frontend/src/dashboard-result/dashboard-result.html

@@ -1,6 +1,6 @@
 <div>
   <div v-if="Array.isArray(result)">
-    <div v-for="el in result" :key="el._id || el.finishedEvaluatingAt">
+    <div v-for="(el, index) in result">
       <component
         class="bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
         :is="getComponentForValue(el)"

package/frontend/src/dashboard-result/dashboard-table/dashboard-table.html

@@ -7,7 +7,27 @@
           :key="'column-' + index"
           class="bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge"
         >
-          {{ column }}
+          <div v-if="index === columns.length - 1" class="relative flex items-center gap-2 w-full" ref="dropdown">
+            <span class="min-w-0 flex-1">{{ column }}</span>
+            <button
+              @click.stop="toggleDropdown"
+              class="ml-auto rounded p-1 text-content-secondary hover:bg-muted hover:text-content"
+              aria-label="Table actions">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <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" />
+              </svg>
+            </button>
+            <div
+              v-if="showDropdown"
+              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">
+              <button
+                class="block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted"
+                @click="downloadCsv(); showDropdown = false">
+                Download as CSV
+              </button>
+            </div>
+          </div>
+          <template v-else>{{ column }}</template>
         </th>
       </tr>
     </thead>

package/frontend/src/dashboard-result/dashboard-table/dashboard-table.js

@@ -1,3 +1,4 @@
+/* global Blob, URL, document */
 'use strict';
 
 const template = require('./dashboard-table.html');
@@ -5,6 +6,11 @@ const template = require('./dashboard-table.html');
 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 : [];
@@ -20,6 +26,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 '';
@@ -33,5 +79,11 @@ module.exports = app => app.component('dashboard-table', {
       }
       return String(cell);
     }
+  },
+  mounted() {
+    document.body.addEventListener('click', this.handleBodyClick);
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.handleBodyClick);
   }
 });

package/frontend/src/detail-date/detail-date.html

@@ -0,0 +1 @@
+<pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0">{{displayValue}}</pre>

package/frontend/src/detail-date/detail-date.js

@@ -0,0 +1,123 @@
+'use strict';
+
+const template = require('./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}`;
+      }
+    }
+  }
+});

package/frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.html

@@ -0,0 +1,26 @@
+<div class="flex items-center gap-2" @click.stop>
+  <select
+    :value="format"
+    @input="onFormatChange($event.target.value)"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
+  >
+    <option value="utc_iso">UTC (ISO)</option>
+    <option value="local_browser">Local (Browser)</option>
+    <option value="unix_ms">Unix (ms)</option>
+    <option value="unix_seconds">Unix (seconds)</option>
+    <option value="duration_relative">Duration relative to now</option>
+    <option value="custom_tz">Custom TZ...</option>
+  </select>
+  <input
+    v-if="format === 'custom_tz'"
+    :value="timezone"
+    @input="onTimezoneChange($event.target.value.trim())"
+    :list="timezoneDatalistId"
+    type="text"
+    placeholder="America/New_York"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1 w-40"
+  >
+  <datalist v-if="format === 'custom_tz'" :id="timezoneDatalistId">
+    <option v-for="tz in timezones" :key="tz" :value="tz"></option>
+  </datalist>
+</div>

package/frontend/src/document-details/date-view-mode-picker/date-view-mode-picker.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const template = require('./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 });
+    }
+  }
+});

package/frontend/src/document-details/document-property/document-property.html

@@ -70,6 +70,12 @@
       </div>
     </div>
     <div class="flex items-center gap-2">
+      <date-view-mode-picker
+        v-if="isDatePath"
+        :viewMode="dateViewMode"
+        :path="path"
+        @update:viewMode="dateViewMode = $event"
+      ></date-view-mode-picker>
       <button
         type="button"
         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"
@@ -125,7 +131,7 @@
         v-if="isGeoJsonGeometry"
         :is="getComponentForPath(path)"
         :value="getEditValueForPath(path)"
-        :view-mode="detailViewMode"
+        :viewMode="detailViewMode"
         :on-change="handleInputChange"
         >
       </component>
@@ -195,8 +201,9 @@
       <div v-else-if="needsTruncation && isValueExpanded" class="relative">
         <component
           :is="getComponentForPath(path)"
-          :value="getValueForPath(path.path)"
-          :view-mode="detailViewMode"></component>
+          :value="rawValue"
+          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          @updated="renderedValue = $event"></component>
         <button
           @click="toggleValueExpansion"
           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"
@@ -211,8 +218,9 @@
       <div v-else>
         <component
           :is="getComponentForPath(path)"
-          :value="getValueForPath(path.path)"
-          :view-mode="detailViewMode"></component>
+          :value="rawValue"
+          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          @updated="renderedValue = $event"></component>
       </div>
     </div>
   </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -10,11 +10,15 @@ const appendCSS = require('../../appendCSS');
 
 appendCSS(require('./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',
@@ -31,8 +35,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);
       }
@@ -164,6 +174,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) {

package/frontend/src/getCurrentDateTimeContext.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const time = require('time-commando');
+
+module.exports = function getCurrentDateTimeContext() {
+  const date = time.now();
+  const components = [
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds()
+  ].map(num => num.toString().padStart(2, '0'));
+  const [yyyy, mm, dd, hh, mi, ss] = components;
+  return `${yyyy}-${mm}-${dd}T${hh}:${mi}:${ss}`;
+};