@mongoosejs/studio 0.3.5 → 0.3.7

package/frontend/src/list-json/list-json.js

@@ -28,13 +28,6 @@ module.exports = app => app.component('list-json', {
       topLevelExpanded: false
     };
   },
-  watch: {
-    value: {
-      handler() {
-        this.resetCollapse();
-      }
-    }
-  },
   created() {
     this.resetCollapse();
     for (const field of this.expandedFields) {

package/frontend/src/modal/modal.js

@@ -7,5 +7,29 @@ appendCSS(require('./modal.css'));
 
 module.exports = app => app.component('modal', {
   template,
-  props: ['containerClass']
+  props: ['containerClass'],
+  mounted() {
+    window.addEventListener('keydown', this.onEscape);
+  },
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.onEscape);
+  },
+  methods: {
+    onEscape(event) {
+      if (event.key !== 'Escape') {
+        return;
+      }
+
+      const modalMasks = Array.from(document.querySelectorAll('.modal-mask'));
+      const currentMask = this.$el?.classList?.contains('modal-mask') ? this.$el : this.$el?.querySelector('.modal-mask') || this.$el;
+      const isTopMostModal = modalMasks.length > 0 && modalMasks[modalMasks.length - 1] === currentMask;
+
+      if (!isTopMostModal) {
+        return;
+      }
+
+      const closeButton = currentMask.querySelector('.modal-exit, [data-modal-close]');
+      closeButton?.click();
+    }
+  }
 });

package/frontend/src/models/document-search/document-search.js

@@ -41,6 +41,9 @@ module.exports = app => app.component('document-search', {
   created() {
     this.buildAutocompleteTrie();
   },
+  mounted() {
+    this.$refs.searchInput.focus();
+  },
   methods: {
     emitSearch() {
       this.$emit('input', this.searchText);

package/frontend/src/models/models.html

@@ -280,6 +280,24 @@
         <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md" role="alert">
           <span class="block font-bold">Error</span>
           <span class="block">{{ error }}</span>
+          <span class="block mt-2">
+            Need help?
+            <a
+              href="https://discord.gg/P3YCfKYxpy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline font-medium text-red-800 hover:text-red-900"
+            >Ask in Discord</a>
+            or
+            <a
+              href="https://github.com/mongoosejs/studio/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline font-medium text-red-800 hover:text-red-900"
+            >
+              open a GitHub issue.
+            </a>
+          </span>
         </div>
       </div>
       <div v-else-if="outputType === 'table'" class="flex-1 min-h-0 flex flex-col overflow-hidden">
@@ -442,13 +460,15 @@
             selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-surface'
           ]"
         >
-          <button
-            type="button"
+          <router-link
             class="absolute top-2 right-2 z-10 inline-flex items-center rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-text shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-            @click.stop="openDocument(document)"
+            :to="{ path: '/model/' + currentModel + '/document/' + document._id, query: $route.query }"
+            target="_blank"
+            rel="noopener noreferrer"
+            @click.stop
           >
-            Open this Document
-          </button>
+            Open
+          </router-link>
           <list-json :value="filterDocument(document)" :references="referenceMap">
           </list-json>
         </div>

package/frontend/src/models/models.js

@@ -261,7 +261,7 @@ module.exports = app => app.component('models', {
   computed: {
     referenceMap() {
       const map = {};
-      for (const path of this.filteredPaths) {
+      for (const path of this.schemaPaths) {
         if (path?.ref) {
           map[path.path] = path.ref;
         }

package/frontend/src/navbar/navbar.html

@@ -42,7 +42,8 @@
       </svg>
     </span>
     <a
-      :href="hasTaskVisualizer"
+      v-if="hasTaskVisualizer"
+      href="#/tasks"
       class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
       :class="taskView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">
       Tasks
@@ -210,6 +211,10 @@
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
         </svg>
       </span>
+      <a v-if="hasTaskVisualizer"
+        href="#/tasks"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="taskView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Tasks</a>
       <div v-if="!user && hasAPIKey" class="mt-4">
         <button
           type="button"

package/frontend/src/navbar/navbar.js

@@ -67,12 +67,7 @@ module.exports = app => app.component('navbar', {
       return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     },
     hasTaskVisualizer() {
-      if (window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer) {
-        return '#/tasks';
-      } else {
-        return 'https://www.npmjs.com/package/@mongoosejs/task';
-      }
-
+      return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
     }
   },
   methods: {

package/frontend/src/pro-upgrade-modal/pro-upgrade-modal.html

@@ -0,0 +1,38 @@
+<modal v-if="show" containerClass="!max-w-md">
+  <template v-slot:body>
+    <div @keydown.esc="$emit('close')" tabindex="0" ref="overlay">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-semibold text-gray-900">Pro Feature</h3>
+        <button
+          type="button"
+          @click="$emit('close')"
+          class="text-gray-400 hover:text-gray-600 cursor-pointer"
+          aria-label="Close"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <p class="text-gray-600 mb-6">
+        {{ featureDescription }} Upgrade to a Pro workspace to unlock this feature.
+      </p>
+      <div class="flex justify-end gap-3">
+        <button
+          type="button"
+          @click="$emit('close')"
+          class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 cursor-pointer"
+        >
+          Cancel
+        </button>
+        <a
+          href="https://studio.mongoosejs.io/pro"
+          target="_blank"
+          class="px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-hover inline-flex items-center"
+        >
+          Upgrade to Pro
+        </a>
+      </div>
+    </div>
+  </template>
+</modal>

package/frontend/src/pro-upgrade-modal/pro-upgrade-modal.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const template = require('./pro-upgrade-modal.html');
+
+module.exports = app => app.component('pro-upgrade-modal', {
+  template,
+  props: {
+    show: { type: Boolean, default: false },
+    featureDescription: { type: String, default: 'This feature is available on the Pro plan.' }
+  },
+  emits: ['close'],
+  watch: {
+    show(val) {
+      if (val) {
+        this.$nextTick(() => {
+          if (this.$refs.overlay) {
+            this.$refs.overlay.focus();
+          }
+        });
+      }
+    }
+  }
+});

package/frontend/src/tasks/tasks.html

@@ -79,63 +79,77 @@
                     <div class="text-2xl font-bold">{{cancelledCount}}</div>
                 </button>
             </div>
+
+            <!-- Tasks Over Time Chart -->
+            <!--
+              Canvas is gated by showOverTimeChart (v-if) so Chart.js is destroyed
+              and the DOM node is removed before each refresh. In-place Chart.js
+              updates during Vue re-renders from filter changes could freeze the UI
+              (dropdowns stuck, chart not updating). See tasks.js getTasks().
+            -->
+            <div class="mt-6">
+                <h2 class="text-lg font-semibold text-content-secondary mb-3">Tasks Over Time</h2>
+                <div class="bg-page border border-edge rounded-lg p-4" style="height: 260px;">
+                    <canvas v-if="showOverTimeChart && overTimeBuckets.length > 0" ref="overTimeChart" style="width:100%;height:100%;"></canvas>
+                    <div v-else class="flex items-center justify-center h-full text-content-tertiary text-sm">
+                        No task activity in the selected window
+                    </div>
+                </div>
+            </div>
             
             <!-- Grouped Task List -->
             <div class="mt-6">
                 <h2 class="text-lg font-semibold text-content-secondary mb-4">Tasks by Name</h2>
-                <ul class="divide-y divide-gray-200">
-                    <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">
-                        <div class="flex items-center justify-between mb-3 ">
-                            <div class="flex-1 cursor-pointer" @click="openTaskGroupDetails(group)">
-                                <div class="flex items-center gap-2">
-                                    <div class="font-medium text-lg group-hover:text-primary transition-colors">{{ group.name }}</div>
-                                    <svg class="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                    <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">
+                        <div class="flex items-start justify-between mb-3">
+                            <div class="flex-1 cursor-pointer min-w-0 mr-2" @click="openTaskGroupDetails(group)">
+                                <div class="flex items-center gap-1">
+                                    <div class="font-medium text-sm group-hover:text-primary transition-colors truncate">{{ group.name }}</div>
+                                    <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">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                     </svg>
                                 </div>
-                                <div class="text-sm text-content-tertiary group-hover:text-content-secondary transition-colors">Total: {{ group.totalCount }} tasks</div>
-                                <div class="text-xs text-primary opacity-0 group-hover:opacity-100 transition-opacity mt-1">
-                                    Click to view details
-                                </div>
+                                <div class="text-xs text-content-tertiary">Total: {{ group.totalCount }} tasks</div>
                             </div>
-                            <div class="text-sm text-content-tertiary">
-                                Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
+                            <div class="text-xs text-content-tertiary flex-shrink-0">
+                                {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
                             </div>
                         </div>
                         
                         <!-- Status Counts -->
-                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                        <div class="grid grid-cols-2 gap-1.5">
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'pending')"
                                 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"
                             >
                                 <div class="text-xs text-yellow-600 font-medium">Pending</div>
-                                <div class="text-lg font-bold text-yellow-700">{{ group.statusCounts.pending || 0 }}</div>
+                                <div class="text-base font-bold text-yellow-700">{{ group.statusCounts.pending || 0 }}</div>
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'succeeded')"
                                 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"
                             >
                                 <div class="text-xs text-green-600 font-medium">Succeeded</div>
-                                <div class="text-lg font-bold text-green-700">{{ group.statusCounts.succeeded || 0 }}</div>
+                                <div class="text-base font-bold text-green-700">{{ group.statusCounts.succeeded || 0 }}</div>
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'failed')"
                                 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"
                             >
                                 <div class="text-xs text-red-600 font-medium">Failed</div>
-                                <div class="text-lg font-bold text-red-700">{{ group.statusCounts.failed || 0 }}</div>
+                                <div class="text-base font-bold text-red-700">{{ group.statusCounts.failed || 0 }}</div>
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'cancelled')"
                                 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"
                             >
                                 <div class="text-xs text-gray-600 font-medium">Cancelled</div>
-                                <div class="text-lg font-bold text-content-secondary">{{ group.statusCounts.cancelled || 0 }}</div>
+                                <div class="text-base font-bold text-content-secondary">{{ group.statusCounts.cancelled || 0 }}</div>
                             </button>
                         </div>
-                    </li>
-                </ul>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

package/frontend/src/tasks/tasks.js

@@ -4,6 +4,39 @@ const template = require('./tasks.html');
 const api = require('../api');
 const { DATE_FILTERS, getDateRangeForRange } = require('../_util/dateRange');
 
+/** 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',
@@ -31,10 +64,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;
@@ -53,9 +98,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' };
@@ -231,10 +372,22 @@ 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
 });

package/local.js

@@ -29,7 +29,8 @@ async function run() {
       __watch: process.env.WATCH,
       _mothershipUrl: 'http://localhost:7777/.netlify/functions',
       apiKey: 'TACO',
-      openAIAPIKey: process.env.OPENAI_API_KEY
+      openAIAPIKey: process.env.OPENAI_API_KEY,
+      googleGeminiAPIKey: process.env.GEMINI_API_KEY
     })
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.3.5",
+  "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": {
@@ -25,6 +25,7 @@
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
     "webpack": "5.x",
+    "time-commando": "1.0.1",
     "xss": "^1.0.15"
   },
   "peerDependencies": {