@mongoosejs/studio 0.2.13 → 0.3.1

package/frontend/src/tasks/tasks.html

@@ -1,41 +1,41 @@
 <div class="p-4 space-y-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-700 mb-4">Task Overview</h1>
+        <h1 class="text-2xl font-bold text-content-secondary mb-4">Task Overview</h1>
         <div v-if="status == 'init'">
             <img src="images/loader.gif" />
         </div>
         <!-- Task List -->
-        <div class="bg-white p-4 rounded-lg shadow" v-if="status == 'loaded'">
+        <div class="bg-surface p-4 rounded-lg shadow" v-if="status == 'loaded'">
             <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Date:</label>
-                <select v-model="selectedRange" @change="updateDateRange" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                <label class="block text-sm font-medium text-content-secondary mb-1">Filter by Date:</label>
+                <select v-model="selectedRange" @change="updateDateRange" class="border-edge-strong rounded-md shadow-sm w-full p-2">
                     <option v-for="option in dateFilters" :key="option.value" :value="option.value">
                     {{ option.label }}
                     </option>
                 </select>
             </div>
             <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Status:</label>
-                <select v-model="selectedStatus" @change="getTasks" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                <label class="block text-sm font-medium text-content-secondary mb-1">Filter by Status:</label>
+                <select v-model="selectedStatus" @change="getTasks" class="border-edge-strong rounded-md shadow-sm w-full p-2">
                     <option v-for="option in statusFilters" :key="option.value" :value="option.value">
                     {{ option.label }}
                     </option>
                 </select>
             </div>
             <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Search by Task Name:</label>
+                <label class="block text-sm font-medium text-content-secondary mb-1">Search by Task Name:</label>
                 <input 
                     v-model="searchQuery" 
                     type="text" 
                     @input="onSearchInput"
-                    class="border-gray-300 rounded-md shadow-sm w-full p-2"
+                    class="border-edge-strong rounded-md shadow-sm w-full p-2"
                     placeholder="Enter task name to search..."
                 >
             </div>
             <div class="mb-4">
                 <button
                   @click="resetFilters"
-                  class="w-full bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition"
+                  class="w-full bg-gray-200 text-content-secondary hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition"
                 >
                   Reset Filters
                 </button>
@@ -43,7 +43,7 @@
             <div class="mb-6">
                 <button
                   @click="openCreateTaskModal"
-                  class="w-full bg-ultramarine-600 text-white hover:bg-ultramarine-700 font-medium py-2 px-4 rounded-md transition"
+                  class="w-full bg-primary text-primary-text hover:bg-primary-hover font-medium py-2 px-4 rounded-md transition"
                 >
                   Create New Task
                 </button>
@@ -73,7 +73,7 @@
                 </button>
                 <button 
                     @click="setStatusFilter('cancelled')"
-                    :class="getStatusColor('cancelled') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-gray-200 hover:border-gray-300'"
+                    :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'"
                 >
                     <div class="text-sm">Cancelled</div>
                     <div class="text-2xl font-bold">{{cancelledCount}}</div>
@@ -82,23 +82,23 @@
             
             <!-- Grouped Task List -->
             <div class="mt-6">
-                <h2 class="text-lg font-semibold text-gray-700 mb-4">Tasks by Name</h2>
+                <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-ultramarine-600 transition-colors">{{ group.name }}</div>
-                                    <svg class="w-4 h-4 text-gray-400 group-hover:text-ultramarine-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <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">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                     </svg>
                                 </div>
-                                <div class="text-sm text-gray-500 group-hover:text-gray-700 transition-colors">Total: {{ group.totalCount }} tasks</div>
-                                <div class="text-xs text-ultramarine-600 opacity-0 group-hover:opacity-100 transition-opacity mt-1">
+                                <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>
-                            <div class="text-sm text-gray-500">
+                            <div class="text-sm text-content-tertiary">
                                 Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
                             </div>
                         </div>
@@ -128,10 +128,10 @@
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'cancelled')"
-                                class="bg-gray-50 border border-gray-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-gray-300"
+                                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-gray-700">{{ group.statusCounts.cancelled || 0 }}</div>
+                                <div class="text-lg font-bold text-content-secondary">{{ group.statusCounts.cancelled || 0 }}</div>
                             </button>
                         </div>
                     </li>
@@ -145,59 +145,60 @@
         <template #body>
             <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="closeCreateTaskModal" role="button" aria-label="Close modal">&times;</div>
             <div class="space-y-4">
-                <h3 class="text-lg font-semibold text-gray-700 mb-4">Create New Task</h3>
+                <h3 class="text-lg font-semibold text-content-secondary mb-4">Create New Task</h3>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Task Name:</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Task Name:</label>
                     <input 
                         v-model="newTask.name" 
                         type="text" 
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        class="w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                         placeholder="Enter task name"
                     >
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Scheduled Time:</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Scheduled Time:</label>
                     <input 
                         v-model="newTask.scheduledAt" 
                         type="datetime-local" 
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        class="w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                     >
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Parameters (JSON):</label>
-                    <textarea 
-                        ref="parametersEditor"
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
-                        placeholder='{"key": "value"}'
-                    ></textarea>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Parameters (JSON):</label>
+                    <ace-editor
+                        v-model="newTask.parameters"
+                        mode="json"
+                        :line-numbers="true"
+                        class="min-h-[120px]"
+                    />
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Repeat Interval (ms):</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Repeat Interval (ms):</label>
                     <input 
                         v-model="newTask.repeatInterval" 
                         type="number" 
                         min="0"
                         step="1000"
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        class="w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                         placeholder="0 for no repetition"
                     >
-                    <p class="text-xs text-gray-500 mt-1">Enter 0 or leave empty for no repetition. Use 1000 for 1 second, 60000 for 1 minute, etc.</p>
+                    <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>
                 </div>
                 
                 <div class="flex gap-2 pt-4">
                     <button 
                         @click="createTask" 
-                        class="flex-1 bg-ultramarine-600 text-white px-4 py-2 rounded-md hover:bg-ultramarine-700"
+                        class="flex-1 bg-primary text-primary-text px-4 py-2 rounded-md hover:bg-primary-hover"
                     >
                         Create Task
                     </button>
                     <button 
                          @click="closeCreateTaskModal" 
-                         class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400"
+                         class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400"
                      >
                          Cancel
                      </button>

package/frontend/src/tasks/tasks.js

@@ -2,25 +2,17 @@
 
 const template = require('./tasks.html');
 const api = require('../api');
+const { DATE_FILTERS, getDateRangeForRange } = require('../_util/dateRange');
 
 module.exports = app => app.component('tasks', {
   data: () => ({
     status: 'init',
-    tasks: [],
-    groupedTasks: {},
+    statusCounts: { pending: 0, succeeded: 0, failed: 0, cancelled: 0 },
+    tasksByName: [],
     selectedRange: 'last_hour',
     start: null,
     end: null,
-    dateFilters: [
-      { value: 'all', label: 'All Time' },
-      { value: 'last_hour', label: 'Last Hour' },
-      { value: 'today', label: 'Today' },
-      { value: 'yesterday', label: 'Yesterday' },
-      { value: 'thisWeek', label: 'This Week' },
-      { value: 'lastWeek', label: 'Last Week' },
-      { value: 'thisMonth', label: 'This Month' },
-      { value: 'lastMonth', label: 'Last Month' }
-    ],
+    dateFilters: DATE_FILTERS,
     selectedStatus: 'all',
     statusFilters: [
       { label: 'All', value: 'all' },
@@ -39,8 +31,7 @@ module.exports = app => app.component('tasks', {
       scheduledAt: '',
       parameters: '',
       repeatInterval: ''
-    },
-    parametersEditor: null
+    }
   }),
   methods: {
     async getTasks() {
@@ -51,26 +42,31 @@ module.exports = app => app.component('tasks', {
         params.status = this.selectedStatus;
       }
 
-      if (this.start && this.end) {
-        params.start = this.start;
-        params.end = this.end;
-      } else if (this.start) {
-        params.start = this.start;
+      if (this.start != null && this.end != null) {
+        params.start = this.start instanceof Date ? this.start.toISOString() : this.start;
+        params.end = this.end instanceof Date ? this.end.toISOString() : this.end;
+      } else if (this.start != null) {
+        params.start = this.start instanceof Date ? this.start.toISOString() : this.start;
       }
 
       if (this.searchQuery.trim()) {
         params.name = this.searchQuery.trim();
       }
 
-      const { tasks, groupedTasks } = await api.Task.getTasks(params);
-      this.tasks = tasks;
-      this.groupedTasks = groupedTasks;
+      const { statusCounts, tasksByName } = await api.Task.getTaskOverview(params);
+      this.statusCounts = statusCounts || this.statusCounts;
+      this.tasksByName = tasksByName || [];
     },
     openTaskGroupDetails(group) {
-      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}` });
+      const query = { dateRange: this.selectedRange || 'last_hour' };
+      if (this.selectedStatus && this.selectedStatus !== 'all') query.status = this.selectedStatus;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query });
     },
     openTaskGroupDetailsWithFilter(group, status) {
-      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query: status ? { status } : {} });
+      const query = { dateRange: this.selectedRange || 'last_hour' };
+      if (status) query.status = status;
+      else if (this.selectedStatus && this.selectedStatus !== 'all') query.status = this.selectedStatus;
+      this.$router.push({ path: `/tasks/${encodeURIComponent(group.name || '')}`, query });
     },
     async onTaskCreated() {
       // Refresh the task data when a new task is created
@@ -83,7 +79,7 @@ module.exports = app => app.component('tasks', {
     async createTask() {
       try {
         let parameters = {};
-        const parametersText = this.parametersEditor ? this.parametersEditor.getValue() : '';
+        const parametersText = this.newTask.parameters || '';
         if (parametersText.trim()) {
           try {
             parameters = JSON.parse(parametersText);
@@ -160,9 +156,6 @@ module.exports = app => app.component('tasks', {
         parameters: '',
         repeatInterval: ''
       };
-      if (this.parametersEditor) {
-        this.parametersEditor.setValue('');
-      }
     },
     setDefaultCreateTaskValues() {
       // Set default scheduled time to 1 hour from now
@@ -175,21 +168,8 @@ module.exports = app => app.component('tasks', {
       this.resetCreateTaskForm();
       this.setDefaultCreateTaskValues();
     },
-    initializeParametersEditor() {
-      if (this.$refs.parametersEditor && !this.parametersEditor) {
-        this.parametersEditor = CodeMirror.fromTextArea(this.$refs.parametersEditor, {
-          mode: 'javascript',
-          lineNumbers: true,
-          smartIndent: false,
-          theme: 'default'
-        });
-      }
-    },
     openCreateTaskModal() {
       this.showCreateTaskModal = true;
-      this.$nextTick(() => {
-        this.initializeParametersEditor();
-      });
     },
     getStatusColor(status) {
       if (status === 'succeeded') {
@@ -230,114 +210,24 @@ module.exports = app => app.component('tasks', {
       }, 300);
     },
     async updateDateRange() {
-      const now = new Date();
-      let start, end;
-
-      switch (this.selectedRange) {
-        case 'last_hour':
-          start = new Date();
-          start.setHours(start.getHours() - 1);
-          end = new Date();
-          break;
-        case 'today':
-          start = new Date();
-          start.setHours(0, 0, 0, 0);
-          end = new Date();
-          end.setHours(23, 59, 59, 999);
-          break;
-        case 'yesterday':
-          start = new Date();
-          start.setDate(start.getDate() - 1);
-          start.setHours(0, 0, 0, 0);
-          end = new Date();
-          break;
-        case 'thisWeek':
-          start = new Date(now.getTime() - (7 * 86400000));
-          start.setHours(0, 0, 0, 0);
-          end = new Date();
-          end.setHours(23, 59, 59, 999);
-          break;
-        case 'lastWeek':
-          start = new Date(now.getTime() - (14 * 86400000));
-          start.setHours(0, 0, 0, 0);
-          end = new Date(now.getTime() - (7 * 86400000));
-          end.setHours(23, 59, 59, 999);
-          break;
-        case 'thisMonth':
-          start = new Date(now.getFullYear(), now.getMonth(), 1);
-          end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
-          break;
-        case 'lastMonth':
-          start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-          end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
-          break;
-        case 'all':
-        default:
-          this.start = null;
-          this.end = null;
-          break;
-      }
-
+      const { start, end } = getDateRangeForRange(this.selectedRange);
       this.start = start;
       this.end = end;
-
       await this.getTasks();
     }
   },
   computed: {
-    tasksByName() {
-      const groups = {};
-
-      // Process tasks from groupedTasks to create name-based groups
-      Object.entries(this.groupedTasks).forEach(([status, tasks]) => {
-        tasks.forEach(task => {
-          if (!groups[task.name]) {
-            groups[task.name] = {
-              name: task.name,
-              tasks: [],
-              statusCounts: {
-                pending: 0,
-                succeeded: 0,
-                failed: 0,
-                cancelled: 0
-              },
-              totalCount: 0,
-              lastRun: null
-            };
-          }
-
-          groups[task.name].tasks.push(task);
-          groups[task.name].totalCount++;
-
-          // Count status using the status from groupedTasks
-          if (groups[task.name].statusCounts.hasOwnProperty(status)) {
-            groups[task.name].statusCounts[status]++;
-          }
-
-          // Track last run time
-          const taskTime = new Date(task.scheduledAt || task.createdAt || 0);
-          if (!groups[task.name].lastRun || taskTime > new Date(groups[task.name].lastRun)) {
-            groups[task.name].lastRun = taskTime;
-          }
-        });
-      });
-
-      // Convert to array and sort alphabetically by name
-      return Object.values(groups).sort((a, b) => {
-        return a.name.localeCompare(b.name);
-      });
+    pendingCount() {
+      return this.statusCounts.pending || 0;
     },
     succeededCount() {
-      return this.groupedTasks.succeeded ? this.groupedTasks.succeeded.length : 0;
+      return this.statusCounts.succeeded || 0;
     },
     failedCount() {
-      return this.groupedTasks.failed ? this.groupedTasks.failed.length : 0;
+      return this.statusCounts.failed || 0;
     },
     cancelledCount() {
-      return this.groupedTasks.cancelled ? this.groupedTasks.cancelled.length : 0;
-    },
-    pendingCount() {
-      return this.groupedTasks.pending ? this.groupedTasks.pending.length : 0;
+      return this.statusCounts.cancelled || 0;
     }
   },
   mounted: async function() {
@@ -346,11 +236,5 @@ module.exports = app => app.component('tasks', {
     this.status = 'loaded';
     this.setDefaultCreateTaskValues();
   },
-  beforeDestroy() {
-    if (this.parametersEditor) {
-      this.parametersEditor.toTextArea();
-    }
-  },
-
   template: template
 });

package/frontend/src/team/new-invitation/new-invitation.html

@@ -5,33 +5,33 @@
     </div>
 
     <div>
-      <label for="githubUsername" class="block text-sm/6 font-medium text-gray-900">GitHub Username</label>
+      <label for="githubUsername" class="block text-sm/6 font-medium text-content">GitHub Username</label>
       <div class="mt-2">
-        <input type="githubUsername" name="githubUsername" id="githubUsername" v-model="githubUsername" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="johnsmith12">
+        <input type="githubUsername" name="githubUsername" id="githubUsername" v-model="githubUsername" class="block w-full rounded-md bg-surface px-3 py-1.5 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6" placeholder="johnsmith12">
       </div>
     </div>
 
     <div>
-      <label for="email" class="block text-sm/6 font-medium text-gray-900">Email (Optional)</label>
+      <label for="email" class="block text-sm/6 font-medium text-content">Email (Optional)</label>
       <div class="mt-2">
-        <input type="email" name="email" id="email" v-model="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="you@example.com">
+        <input type="email" name="email" id="email" v-model="email" class="block w-full rounded-md bg-surface px-3 py-1.5 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6" placeholder="you@example.com">
       </div>
     </div>
 
     <div>
-      <label for="location" class="block text-sm/6 font-medium text-gray-900">Role</label>
+      <label for="location" class="block text-sm/6 font-medium text-content">Role</label>
       <div class="mt-2 grid grid-cols-1">
-        <select id="role" :disabled="tier == null" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+        <select id="role" :disabled="tier == null" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-surface py-1.5 pl-3 pr-8 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
           <option value="admin">Admin</option>
           <option value="member">Member</option>
           <option value="readonly">Read-only</option>
           <option value="dashboards">Dashboards Only</option>
         </select>
-        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-content-tertiary sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
           <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
         </svg>
       </div>
-      <div v-if="tier == null" class="text-sm text-gray-700">
+      <div v-if="tier == null" class="text-sm text-content-secondary">
         You can only invite "Dashboards Only" users until you set up a subscription.
       </div>
     </div>