@mongoosejs/studio 0.3.0 → 0.3.2

package/frontend/public/tw.css

@@ -1260,6 +1260,10 @@ video {
   min-width: 220px;
 }
 
+.min-w-\[7rem\] {
+  min-width: 7rem;
+}
+
 .min-w-\[80px\] {
   min-width: 80px;
 }
@@ -1280,6 +1284,10 @@ video {
   max-width: 64rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1300,6 +1308,10 @@ video {
   max-width: 36rem;
 }
 
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1332,6 +1344,16 @@ video {
   flex-grow: 1;
 }
 
+.border-separate {
+  border-collapse: separate;
+}
+
+.border-spacing-0 {
+  --tw-border-spacing-x: 0px;
+  --tw-border-spacing-y: 0px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
 .origin-top-right {
   transform-origin: top right;
 }
@@ -1762,6 +1784,16 @@ video {
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .border-green-200 {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity));
@@ -2033,6 +2065,11 @@ video {
   background-color: rgb(202 56 56 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
@@ -2253,6 +2290,10 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -2484,6 +2525,11 @@ video {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -2695,6 +2741,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[0_-4px_6px_-1px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
+  --tw-shadow: 0 -4px 6px -1px rgba(0,0,0,0.1);
+  --tw-shadow-colored: 0 -4px 6px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2974,6 +3026,11 @@ video {
   border-color: var(--color-edge-strong);
 }
 
+.hover\:border-gray-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .hover\:border-green-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
@@ -3039,6 +3096,11 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -3203,6 +3265,11 @@ video {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-800:hover {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -3266,6 +3333,11 @@ video {
   border-color: transparent;
 }
 
+.focus\:border-ultramarine-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 83 255 / var(--tw-border-opacity));
+}
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -3346,6 +3418,11 @@ video {
   --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-ultramarine-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 83 255 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-offset-0:focus {
   --tw-ring-offset-width: 0px;
 }
@@ -3461,6 +3538,11 @@ video {
   opacity: 0.5;
 }
 
+.disabled\:hover\:bg-white:hover:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .group:focus-within .group-focus-within\:pointer-events-auto {
   pointer-events: auto;
 }

package/frontend/src/_util/dateRange.js

@@ -0,0 +1,82 @@
+'use strict';
+
+const DATE_FILTERS = [
+  { 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' }
+];
+
+const DATE_FILTER_VALUES = DATE_FILTERS.map(f => f.value);
+
+/**
+ * Returns { start, end } Date objects for a given range key (e.g. 'last_hour', 'today').
+ * Month ranges use UTC boundaries.
+ * @param {string} selectedRange - One of DATE_FILTER_VALUES
+ * @returns {{ start: Date, end: Date }}
+ */
+function getDateRangeForRange(selectedRange) {
+  const now = new Date();
+  let start, end;
+  switch (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(now);
+      start.setDate(start.getDate() - 1);
+      start.setHours(0, 0, 0, 0);
+      end = new Date(start);
+      end.setHours(23, 59, 59, 999);
+      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': {
+      const y = now.getUTCFullYear();
+      const m = now.getUTCMonth();
+      start = new Date(Date.UTC(y, m, 1, 0, 0, 0, 0));
+      end = new Date(Date.UTC(y, m + 1, 0, 23, 59, 59, 999));
+      break;
+    }
+    case 'lastMonth': {
+      const y = now.getUTCFullYear();
+      const m = now.getUTCMonth();
+      start = new Date(Date.UTC(y, m - 1, 1, 0, 0, 0, 0));
+      end = new Date(Date.UTC(y, m, 0, 23, 59, 59, 999));
+      break;
+    }
+    default:
+      start = new Date();
+      start.setHours(start.getHours() - 1);
+      end = new Date();
+      break;
+  }
+  return { start, end };
+}
+
+module.exports = {
+  DATE_FILTERS,
+  DATE_FILTER_VALUES,
+  getDateRangeForRange
+};

package/frontend/src/ace-editor/ace-editor.js

@@ -80,6 +80,12 @@ module.exports = app => app.component('ace-editor', {
     }
   },
   methods: {
+    getValue() {
+      if (this.editor) {
+        return this.editor.getValue();
+      }
+      return this.modelValue !== '' ? this.modelValue : this.value;
+    },
     setValue(val) {
       if (this.editor) {
         this.editor.setValue(val ?? '', -1);

package/frontend/src/api.js

@@ -185,6 +185,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTasks: function getTasks(params) {
       return client.post('', { action: 'Task.getTasks', ...params }).then(res => res.data);
     },
+    getTaskOverview: function getTaskOverview(params) {
+      return client.post('', { action: 'Task.getTaskOverview', ...params }).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('', { action: 'Task.rescheduleTask', ...params }).then(res => res.data);
     },
@@ -519,6 +522,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getTasks: function getTasks(params) {
       return client.post('/Task/getTasks', params).then(res => res.data);
     },
+    getTaskOverview: function getTaskOverview(params) {
+      return client.post('/Task/getTaskOverview', params).then(res => res.data);
+    },
     rescheduleTask: function rescheduleTask(params) {
       return client.post('/Task/rescheduleTask', params).then(res => res.data);
     },

package/frontend/src/chat/chat-message-script/chat-message-script.html

@@ -23,13 +23,6 @@
       Output
     </button>
     <div class="ml-auto mr-1 flex items-center">
-      <button
-        v-if="activeTab === 'output' && isChartOutput"
-        class="px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
-        @click="exportChartPNG"
-        title="Export PNG">
-        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.2em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
-      </button>
       <button
         v-if="activeTab === 'output'"
         class="px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
@@ -116,9 +109,11 @@
   </div>
 
   <div class="p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative" v-show="activeTab === 'output'">
-    <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" ref="chartOutput" />
-    <dashboard-map v-else-if="message.executionResult?.output?.$featureCollection" :value="message.executionResult?.output" />
-    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>
+    <dashboard-result
+      v-if="message.executionResult?.output != null"
+      :result="message.executionResult.output">
+    </dashboard-result>
+    <pre v-else>No output</pre>
 
     <div v-if="message.executionResult?.logs?.length" class="mt-3 pt-3 border-t border-edge">
       <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Console</div>
@@ -130,12 +125,12 @@
     <template #body>
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showDetailModal = false;">&times;</div>
       <div class="h-full overflow-auto">
-        <dashboard-chart v-if="message.executionResult?.output?.$chart" :value="message.executionResult?.output" :responsive="true" />
-        <dashboard-map
-          v-else-if="message.executionResult?.output?.$featureCollection"
-          :value="message.executionResult?.output"
-          height="80vh" />
-        <pre v-else class="whitespace-pre-wrap">{{ message.executionResult?.output || 'No output' }}</pre>
+        <dashboard-result
+          v-if="message.executionResult?.output != null"
+          :result="message.executionResult.output"
+          :fullscreen="true">
+        </dashboard-result>
+        <pre v-else class="whitespace-pre-wrap">No output</pre>
       </div>
     </template>
   </modal>

package/frontend/src/chat/chat-message-script/chat-message-script.js

@@ -30,15 +30,9 @@ module.exports = app => app.component('chat-message-script', {
     },
     canOverwriteDashboard() {
       return !!this.targetDashboardId;
-    },
-    isChartOutput() {
-      return !!this.message.executionResult?.output?.$chart;
     }
   },
   methods: {
-    exportChartPNG() {
-      this.$refs.chartOutput?.exportPNG?.();
-    },
     async executeScript() {
       const scriptToRun = this.isEditing ? this.editedScript : this.script;
       this.editedScript = scriptToRun;

package/frontend/src/chat/chat.js

@@ -192,6 +192,8 @@ module.exports = {
     }
   },
   async mounted() {
+    window.pageState = this;
+
     this.chatThreadId = this.threadId;
     const { chatThreads } = await api.ChatThread.listChatThreads();
     this.chatThreads = chatThreads;

package/frontend/src/dashboard/dashboard.js

@@ -28,6 +28,13 @@ module.exports = {
       this.showEditor = !this.showEditor;
     },
     async updateCode(update) {
+      if (!update?.doc) {
+        const message = update?.error?.message || 'Dashboard update failed';
+        console.error(update?.error || new Error(message));
+        this.$toast.error(message);
+        return;
+      }
+
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
@@ -52,7 +59,9 @@ module.exports = {
           this.dashboardResults.unshift({ error: { message: error.message || 'Evaluation failed' }, finishedEvaluatingAt: new Date() });
         }
       } catch (err) {
-        this.$toast.error(err?.response?.data?.message || err?.message || 'Dashboard evaluation failed');
+        const message = err?.response?.data?.message || err?.message || 'Dashboard evaluation failed';
+        console.error(err || new Error(message));
+        this.$toast.error(message);
       } finally {
         this.status = 'loaded';
       }
@@ -148,7 +157,9 @@ module.exports = {
       return this.dashboardResults.length > 0 ? this.dashboardResults[0] : null;
     }
   },
-  mounted: async function() {
+  mounted: async function () {
+    window.pageState = this;
+
     document.addEventListener('click', this.handleDocumentClick);
     this.showEditor = this.$route.query.edit;
     await this.loadInitial();

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -6,7 +6,7 @@ const template = require('./edit-dashboard.html');
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
-  emits: ['close'],
+  emits: ['close', 'update'],
   data: function() {
     return {
       status: 'loaded',
@@ -27,7 +27,7 @@ module.exports = app => app.component('edit-dashboard', {
     async updateCode() {
       this.status = 'loading';
       try {
-        const codeToSave = this.$refs.codeEditor ? this.$refs.codeEditor.getValue() : this.editCode;
+        const codeToSave = this.$refs.codeEditor?.getValue ? this.$refs.codeEditor.getValue() : this.editCode;
         const { doc } = await api.Dashboard.updateDashboard({
           dashboardId: this.dashboardId,
           code: codeToSave,
@@ -43,7 +43,8 @@ module.exports = app => app.component('edit-dashboard', {
         this.$toast.success('Dashboard updated!');
         this.closeEditor();
       } catch (err) {
-        this.$emit('update', { error: { message: err.message } });
+        const message = err?.response?.data?.message || err?.message || 'Dashboard update failed';
+        this.$emit('update', { error: { message } });
       } finally {
         this.status = 'loaded';
       }

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

@@ -34,6 +34,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$grid) {
         return 'dashboard-grid';
       }
+      if (value.$table) {
+        return 'dashboard-table';
+      }
       return 'dashboard-object';
     }
   }

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

@@ -0,0 +1,34 @@
+<div class="overflow-x-auto">
+  <table class="min-w-full border-separate border-spacing-0">
+    <thead v-if="hasColumns" class="bg-slate-50">
+      <tr>
+        <th
+          v-for="(column, index) in columns"
+          :key="'column-' + index"
+          class="bg-slate-50 p-3 text-left text-sm font-semibold text-content border-b border-edge"
+        >
+          {{ column }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, rowIndex) in rows" :key="'row-' + rowIndex" class="bg-surface hover:bg-slate-50">
+        <td
+          v-for="(cell, columnIndex) in row"
+          :key="'cell-' + rowIndex + '-' + columnIndex"
+          class="p-3 text-sm text-content border-b border-edge"
+        >
+          {{ displayValue(cell) }}
+        </td>
+      </tr>
+      <tr v-if="!hasRows">
+        <td
+          :colspan="Math.max(columns.length, 1)"
+          class="p-3 text-sm text-content-tertiary border-b border-edge"
+        >
+          No rows
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,37 @@
+'use strict';
+
+const template = require('./dashboard-table.html');
+
+module.exports = app => app.component('dashboard-table', {
+  template,
+  props: ['value'],
+  computed: {
+    columns() {
+      return Array.isArray(this.value?.$table?.columns) ? this.value.$table.columns : [];
+    },
+    rows() {
+      return Array.isArray(this.value?.$table?.rows) ? this.value.$table.rows : [];
+    },
+    hasColumns() {
+      return this.columns.length > 0;
+    },
+    hasRows() {
+      return this.rows.length > 0;
+    }
+  },
+  methods: {
+    displayValue(cell) {
+      if (cell == null) {
+        return '';
+      }
+      if (typeof cell === 'object') {
+        try {
+          return JSON.stringify(cell);
+        } catch (err) {
+          return String(cell);
+        }
+      }
+      return String(cell);
+    }
+  }
+});

package/frontend/src/models/models.js

@@ -65,6 +65,7 @@ module.exports = app => app.component('models', {
   }),
   created() {
     this.currentModel = this.model;
+    this.setSearchTextFromRoute();
     this.loadOutputPreference();
     this.loadSelectedGeoField();
     this.loadRecentlyViewedModels();
@@ -78,6 +79,7 @@ module.exports = app => app.component('models', {
     this.destroyMap();
   },
   async mounted() {
+    window.pageState = this;
     this.onScroll = () => this.checkIfScrolledToBottom();
     document.addEventListener('scroll', this.onScroll, true);
     this.onPopState = () => this.initSearchFromUrl();
@@ -101,6 +103,7 @@ module.exports = app => app.component('models', {
       }
     };
     document.addEventListener('keydown', this.onCtrlP, true);
+    this.query = Object.assign({}, this.$route.query);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
     await this.loadModelCounts();
@@ -483,14 +486,17 @@ module.exports = app => app.component('models', {
 
       return params;
     },
-    async initSearchFromUrl() {
-      this.status = 'loading';
-      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+    setSearchTextFromRoute() {
       if (this.$route.query?.search) {
         this.searchText = this.$route.query.search;
       } else {
         this.searchText = '';
       }
+    },
+    async initSearchFromUrl() {
+      this.status = 'loading';
+      this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
+      this.setSearchTextFromRoute();
       if (this.$route.query?.sort) {
         const sort = eval(`(${this.$route.query.sort})`);
         const path = Object.keys(sort)[0];

package/frontend/src/navbar/navbar.js

@@ -17,7 +17,8 @@ module.exports = app => app.component('navbar', {
     showFlyout: false,
     darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark'
   }),
-  mounted: function() {
+  mounted: function () {
+    window.navbar = this;
     const mobileMenuMask = document.querySelector('#mobile-menu-mask');
     const mobileMenu = document.querySelector('#mobile-menu');
     const openBtn = document.querySelector('#open-mobile-menu');
@@ -71,7 +72,7 @@ module.exports = app => app.component('navbar', {
       } else {
         return 'https://www.npmjs.com/package/@mongoosejs/task';
       }
-     
+
     }
   },
   methods: {

package/frontend/src/task-by-name/task-by-name.html

@@ -5,11 +5,81 @@
   <div v-else-if="status === 'error'" class="text-red-600">
     {{ errorMessage }}
   </div>
-  <task-details
-    v-else-if="taskGroup"
-    :task-group="taskGroup"
-    :back-to="{ name: 'tasks' }"
-    @task-created="onTaskCreated"
-    @task-cancelled="onTaskCancelled"
-  ></task-details>
+  <template v-else-if="taskGroup">
+    <div class="pb-24">
+      <router-link :to="{ name: 'tasks' }" class="inline-flex items-center gap-1 text-gray-500 hover:text-gray-700 mb-4">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+        </svg>
+        Back to Task Groups
+      </router-link>
+      <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 max-w-xs">
+          <option v-for="option in dateFilters" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+      <task-details
+        :task-group="taskGroup"
+        :back-to="{ name: 'tasks' }"
+        :show-back-button="false"
+        @task-created="onTaskCreated"
+        @task-cancelled="onTaskCancelled"
+      ></task-details>
+    </div>
+    <div
+      v-if="numDocs > 0"
+      class="fixed bottom-0 left-0 right-0 z-10 px-4 py-4 bg-white border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-4 max-w-6xl mx-auto">
+        <div class="flex items-center gap-6">
+          <p class="text-sm text-gray-600">
+            <span class="font-medium text-gray-900">{{ Math.min((page - 1) * pageSize + 1, numDocs) }}–{{ Math.min(page * pageSize, numDocs) }}</span>
+            <span class="mx-1">of</span>
+            <span class="font-medium text-gray-900">{{ numDocs }}</span>
+            <span class="ml-1 text-gray-500">tasks</span>
+          </p>
+          <div class="flex items-center gap-2">
+            <label class="text-sm font-medium text-gray-700">Per page</label>
+            <select
+              v-model.number="pageSize"
+              @change="onPageSizeChange"
+              class="border border-gray-300 rounded-md shadow-sm px-3 py-2 text-sm text-gray-700 bg-white hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:border-ultramarine-500"
+            >
+              <option v-for="n in pageSizeOptions" :key="n" :value="n">{{ n }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            :disabled="page <= 1"
+            @click="goToPage(page - 1)"
+            class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:border-gray-400"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+            </svg>
+            Previous
+          </button>
+          <span class="px-4 py-2 text-sm text-gray-600 min-w-[7rem] text-center">
+            Page <span class="font-semibold text-gray-900">{{ page }}</span> of <span class="font-semibold text-gray-900">{{ Math.max(1, Math.ceil(numDocs / pageSize)) }}</span>
+          </span>
+          <button
+            type="button"
+            :disabled="page >= Math.ceil(numDocs / pageSize)"
+            @click="goToPage(page + 1)"
+            class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:border-gray-400"
+          >
+            Next
+            <svg class="w-4 h-4" 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>
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
 </div>