@mongoosejs/studio 0.2.13 → 0.3.1

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

@@ -3,6 +3,7 @@
 // Page: all tasks with a given name. Reuses task-details to render the list (many tasks).
 const template = require('./task-by-name.html');
 const api = require('../api');
+const { DATE_FILTERS, DATE_FILTER_VALUES, getDateRangeForRange } = require('../_util/dateRange');
 
 function buildTaskGroup(name, tasks) {
   const statusCounts = { pending: 0, succeeded: 0, failed: 0, cancelled: 0, in_progress: 0, unknown: 0 };
@@ -26,44 +27,118 @@ function buildTaskGroup(name, tasks) {
   };
 }
 
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+
 module.exports = app => app.component('task-by-name', {
   template,
   data: () => ({
     status: 'init',
     taskGroup: null,
-    errorMessage: ''
+    errorMessage: '',
+    selectedRange: 'last_hour',
+    start: null,
+    end: null,
+    dateFilters: DATE_FILTERS,
+    page: 1,
+    pageSize: 50,
+    numDocs: 0,
+    pageSizeOptions: PAGE_SIZE_OPTIONS,
+    _loadId: 0,
+    _lastQueryFilters: null
   }),
   computed: {
     taskName() {
       return this.$route.params.name || '';
     }
   },
+  created() {
+    const fromQuery = this.$route.query.dateRange;
+    this.selectedRange = (fromQuery && DATE_FILTER_VALUES.includes(fromQuery)) ? fromQuery : 'last_hour';
+    if (!this.$route.query.dateRange) {
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, dateRange: this.selectedRange }
+      });
+    }
+  },
   watch: {
     taskName: {
       immediate: true,
       handler() {
+        this.page = 1;
         this.loadTasks();
       }
+    },
+    '$route.query': {
+      handler(query) {
+        const dateRange = query.dateRange;
+        if (dateRange && DATE_FILTER_VALUES.includes(dateRange) && this.selectedRange !== dateRange) {
+          this.selectedRange = dateRange;
+        }
+        const effectiveDateRange = (dateRange && DATE_FILTER_VALUES.includes(dateRange)) ? dateRange : (this.selectedRange || 'last_hour');
+        const effectiveStatus = query.status ?? '';
+        const key = `${effectiveDateRange}|${effectiveStatus}`;
+        if (this._lastQueryFilters === key) return;
+        this.page = 1;
+        this.loadTasks();
+      },
+      deep: true
     }
   },
   methods: {
+    updateDateRange() {
+      this.page = 1;
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, dateRange: this.selectedRange }
+      });
+    },
+    goToPage(page) {
+      const maxPage = Math.max(1, Math.ceil(this.numDocs / this.pageSize));
+      const next = Math.max(1, Math.min(page, maxPage));
+      if (next === this.page) return;
+      this.page = next;
+      this.loadTasks();
+    },
+    onPageSizeChange() {
+      this.page = 1;
+      this.loadTasks();
+    },
     async loadTasks() {
       if (!this.taskName) return;
+      const loadId = ++this._loadId;
       this.status = 'init';
       this.taskGroup = null;
       this.errorMessage = '';
-      const start = new Date();
-      start.setHours(start.getHours() - 1);
-      const end = new Date();
+      const dateRangeFromQuery = this.$route.query.dateRange;
+      const dateRange = (dateRangeFromQuery && DATE_FILTER_VALUES.includes(dateRangeFromQuery))
+        ? dateRangeFromQuery
+        : (this.selectedRange || 'last_hour');
+      this.selectedRange = dateRange;
+      const { start, end } = getDateRangeForRange(dateRange);
+      this.start = start;
+      this.end = end;
+      const skip = (this.page - 1) * this.pageSize;
+      const params = {
+        name: this.taskName,
+        start: start instanceof Date ? start.toISOString() : start,
+        end: end instanceof Date ? end.toISOString() : end,
+        skip,
+        limit: this.pageSize
+      };
+      const statusFromQuery = this.$route.query.status;
+      if (statusFromQuery) params.status = statusFromQuery;
+      this._lastQueryFilters = `${dateRange}|${statusFromQuery ?? ''}`;
       try {
-        const { tasks } = await api.Task.getTasks({
-          name: this.taskName,
-          start,
-          end
-        });
+        const { tasks, numDocs, statusCounts } = await api.Task.getTasks(params);
+        if (loadId !== this._loadId) return;
+        this.numDocs = numDocs ?? tasks.length;
         this.taskGroup = buildTaskGroup(this.taskName, tasks);
+        this.taskGroup.totalCount = this.numDocs;
+        if (statusCounts) this.taskGroup.statusCounts = statusCounts;
         this.status = 'loaded';
       } catch (err) {
+        if (loadId !== this._loadId) return;
         this.status = 'error';
         this.errorMessage = err?.response?.data?.message || err.message || 'Failed to load tasks';
       }

package/frontend/src/task-single/task-single.html

@@ -9,18 +9,18 @@
     Task not found.
   </div>
   <div v-else-if="task" class="max-w-4xl">
-    <button @click="goBack" class="text-gray-500 hover:text-gray-700 mb-4 flex items-center gap-1">
+    <button @click="goBack" class="text-content-tertiary hover:text-content-secondary mb-4 flex items-center gap-1">
       <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.name }}
     </button>
-    <h1 class="text-2xl font-bold text-gray-700 mb-1">{{ task.name }}</h1>
-    <p class="text-gray-500 mb-6">Task details</p>
+    <h1 class="text-2xl font-bold text-content-secondary mb-1">{{ task.name }}</h1>
+    <p class="text-content-tertiary mb-6">Task details</p>
 
-    <div class="bg-white rounded-lg shadow p-6 md:p-8">
+    <div class="bg-surface rounded-lg shadow p-6 md:p-8">
       <div class="flex items-center gap-3 mb-6">
-        <span class="text-sm font-medium text-gray-900">ID: {{ task.id }}</span>
+        <span class="text-sm font-medium text-content">ID: {{ task.id }}</span>
         <span
           class="text-xs px-2 py-1 rounded-full font-medium"
           :class="getStatusColor(task.status)"
@@ -31,41 +31,41 @@
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
         <div>
-          <label class="block text-sm font-medium text-gray-700 mb-1">Scheduled At</label>
-          <div class="text-sm text-gray-900">{{ formatDate(task.scheduledAt) }}</div>
+          <label class="block text-sm font-medium text-content-secondary mb-1">Scheduled At</label>
+          <div class="text-sm text-content">{{ formatDate(task.scheduledAt) }}</div>
         </div>
         <div v-if="task?.startedAt">
-          <label class="block text-sm font-medium text-gray-700 mb-1">Started At</label>
-          <div class="text-sm text-gray-900">{{ formatDate(task.startedAt) }}</div>
+          <label class="block text-sm font-medium text-content-secondary mb-1">Started At</label>
+          <div class="text-sm text-content">{{ formatDate(task.startedAt) }}</div>
         </div>
         <div v-if="task?.completedAt">
-          <label class="block text-sm font-medium text-gray-700 mb-1">Completed At</label>
-          <div class="text-sm text-gray-900">{{ formatDate(task.completedAt) }}</div>
+          <label class="block text-sm font-medium text-content-secondary mb-1">Completed At</label>
+          <div class="text-sm text-content">{{ formatDate(task.completedAt) }}</div>
         </div>
       </div>
 
       <div v-if="task?.params" class="mb-6">
-        <label class="block text-sm font-medium text-gray-700 mb-2">Params</label>
-        <div class="bg-gray-50 rounded-md p-4">
+        <label class="block text-sm font-medium text-content-secondary mb-2">Params</label>
+        <div class="bg-page rounded-md p-4">
           <list-json :value="task.params"></list-json>
         </div>
       </div>
 
       <div v-if="task?.result" class="mb-6">
-        <label class="block text-sm font-medium text-gray-700 mb-2">Result</label>
-        <div class="bg-gray-50 rounded-md p-4">
+        <label class="block text-sm font-medium text-content-secondary mb-2">Result</label>
+        <div class="bg-page rounded-md p-4">
           <list-json :value="task.result"></list-json>
         </div>
       </div>
 
       <div v-if="task?.error" class="mb-6">
-        <label class="block text-sm font-medium text-gray-700 mb-2">Error</label>
-        <div class="bg-gray-50 rounded-md p-4">
+        <label class="block text-sm font-medium text-content-secondary mb-2">Error</label>
+        <div class="bg-page rounded-md p-4">
           <list-json :value="task.error"></list-json>
         </div>
       </div>
 
-      <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-200">
+      <div class="flex flex-wrap gap-3 pt-4 border-t border-edge">
         <button
           @click="showRescheduleConfirmation(task)"
           class="flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -105,19 +105,19 @@
     <template #body>
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showRescheduleModal = false" role="button" aria-label="Close modal">&times;</div>
       <div class="p-6">
-        <h3 class="text-lg font-medium text-gray-900 mb-4">Reschedule Task</h3>
+        <h3 class="text-lg font-medium text-content mb-4">Reschedule Task</h3>
         <p class="text-sm text-gray-600 mb-2">Reschedule task <strong>{{ selectedTask?.id }}</strong>?</p>
-        <p class="text-sm text-gray-500 mb-4">This will reset the task's status and schedule it to run again.</p>
-        <label for="newScheduledTime" class="block text-sm font-medium text-gray-700 mb-2">New Scheduled Time</label>
+        <p class="text-sm text-content-tertiary mb-4">This will reset the task's status and schedule it to run again.</p>
+        <label for="newScheduledTime" class="block text-sm font-medium text-content-secondary mb-2">New Scheduled Time</label>
         <input
           id="newScheduledTime"
           v-model="newScheduledTime"
           type="datetime-local"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-4"
+          class="w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-4"
         />
         <div class="flex gap-3">
           <button @click="confirmRescheduleTask" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 font-medium">Reschedule</button>
-          <button @click="showRescheduleModal = false" class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Cancel</button>
+          <button @click="showRescheduleModal = false" class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Cancel</button>
         </div>
       </div>
     </template>
@@ -128,12 +128,12 @@
     <template #body>
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showRunModal = false" role="button" aria-label="Close modal">&times;</div>
       <div class="p-6">
-        <h3 class="text-lg font-medium text-gray-900 mb-4">Run Task Now</h3>
+        <h3 class="text-lg font-medium text-content mb-4">Run Task Now</h3>
         <p class="text-sm text-gray-600 mb-2">Run task <strong>{{ selectedTask?.id }}</strong> immediately?</p>
-        <p class="text-sm text-gray-500 mb-4">This will execute the task right away, bypassing its scheduled time.</p>
+        <p class="text-sm text-content-tertiary mb-4">This will execute the task right away, bypassing its scheduled time.</p>
         <div class="flex gap-3">
           <button @click="confirmRunTask" class="flex-1 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 font-medium">Run Now</button>
-          <button @click="showRunModal = false" class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Cancel</button>
+          <button @click="showRunModal = false" class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Cancel</button>
         </div>
       </div>
     </template>
@@ -144,12 +144,12 @@
     <template #body>
       <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showCancelModal = false" role="button" aria-label="Close modal">&times;</div>
       <div class="p-6">
-        <h3 class="text-lg font-medium text-gray-900 mb-4">Cancel Task</h3>
+        <h3 class="text-lg font-medium text-content mb-4">Cancel Task</h3>
         <p class="text-sm text-gray-600 mb-2">Cancel task <strong>{{ selectedTask?.id }}</strong>?</p>
-        <p class="text-sm text-gray-500 mb-4">This will permanently cancel the task and it cannot be undone.</p>
+        <p class="text-sm text-content-tertiary mb-4">This will permanently cancel the task and it cannot be undone.</p>
         <div class="flex gap-3">
           <button @click="confirmCancelTask" class="flex-1 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium">Cancel Task</button>
-          <button @click="showCancelModal = false" class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Keep Task</button>
+          <button @click="showCancelModal = false" class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Keep Task</button>
         </div>
       </div>
     </template>

package/frontend/src/task-single/task-single.js

@@ -25,7 +25,7 @@ module.exports = app => app.component('task-single', {
       const path = `/tasks/${encodeURIComponent(name || '')}`;
       const query = this.$route.query?.status ? { status: this.$route.query.status } : {};
       return { path, query };
-    },
+    }
   },
   watch: {
     '$route.params': {
@@ -82,11 +82,11 @@ module.exports = app => app.component('task-single', {
     async confirmRescheduleTask() {
       if (!this.newScheduledTime) return;
       await api.Task.rescheduleTask({ taskId: this.selectedTask.id, scheduledAt: this.newScheduledTime });
-        this.$toast.success({ title: 'Task Rescheduled', text: `Task ${this.selectedTask.id} has been rescheduled`,  });
-        this.showRescheduleModal = false;
-        this.selectedTask = null;
-        this.newScheduledTime = '';
-        await this.loadTask();
+      this.$toast.success({ title: 'Task Rescheduled', text: `Task ${this.selectedTask.id} has been rescheduled` });
+      this.showRescheduleModal = false;
+      this.selectedTask = null;
+      this.newScheduledTime = '';
+      await this.loadTask();
     },
     async confirmRunTask() {
       await api.Task.runTask({ taskId: this.selectedTask.id });
@@ -104,10 +104,10 @@ module.exports = app => app.component('task-single', {
     },
     async confirmCancelTask() {
       await api.Task.cancelTask({ taskId: this.selectedTask.id });
-        this.$toast.success({ title: 'Task Cancelled', text: `Task ${this.selectedTask.id} has been cancelled` });
-        this.showCancelModal = false;
-        this.selectedTask = null;
-        this.goBack();
+      this.$toast.success({ title: 'Task Cancelled', text: `Task ${this.selectedTask.id} has been cancelled` });
+      this.showCancelModal = false;
+      this.selectedTask = null;
+      this.goBack();
     }
   },
   mounted() {

package/frontend/src/tasks/task-details/task-details.html

@@ -1,14 +1,14 @@
 <div class="p-4 space-y-6">
     <div class="flex items-center justify-between">
         <div>
-            <button @click="goBack" class="text-gray-500 hover:text-gray-700 mb-2">
-                <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>
-                {{ backLabel }}
-            </button>
-            <h1 class="text-2xl font-bold text-gray-700">{{ taskGroup.name }}</h1>
-            <p class="text-gray-500">Total: {{ taskGroup.totalCount }} tasks</p>
+          <button v-if="showBackButton" @click="goBack" class="text-content-tertiary hover:text-content-secondary mb-2">
+            <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>
+            {{ backLabel }}
+          </button>
+          <h1 class="text-2xl font-bold text-content-secondary">{{ taskGroup.name }}</h1>
+          <p class="text-content-tertiary">Total: {{ taskGroup.totalCount }} tasks</p>
         </div>
 
       </div>
@@ -16,13 +16,13 @@
         <!-- Status Summary -->
        <div class="space-y-3">
          <div class="flex items-center justify-between">
-           <span class="text-sm font-medium text-gray-700">Status</span>
+           <span class="text-sm font-medium text-content-secondary">Status</span>
            <div class="flex rounded-md shadow-sm" role="group">
              <button
                type="button"
                @click="statusView = 'summary'"
                class="px-3 py-1.5 text-sm font-medium rounded-l-md border transition-colors"
-               :class="statusView === 'summary' ? 'bg-ultramarine-600 text-white border-ultramarine-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
+               :class="statusView === 'summary' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'"
              >
                Summary
              </button>
@@ -30,7 +30,7 @@
                type="button"
                @click="statusView = 'chart'"
                class="px-3 py-1.5 text-sm font-medium rounded-r-md border border-l-0 transition-colors"
-               :class="statusView === 'chart' ? 'bg-ultramarine-600 text-white border-ultramarine-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'"
+               :class="statusView === 'chart' ? 'bg-primary text-primary-text border-primary' : 'bg-surface text-content-secondary border-edge-strong hover:bg-page'"
              >
                Chart
              </button>
@@ -64,19 +64,19 @@
            </button>
            <button 
              @click="filterByStatus('cancelled')"
-             class="bg-gray-50 border border-gray-200 rounded-md p-3 text-center hover:bg-gray-100 transition-colors cursor-pointer"
+             class="bg-page border border-edge rounded-md p-3 text-center hover:bg-muted transition-colors cursor-pointer"
              :class="{ 'ring-2 ring-gray-400': currentFilter === 'cancelled' }"
            >
              <div class="text-xs text-gray-600 font-medium">Cancelled</div>
-             <div class="text-lg font-bold text-gray-700">{{ taskGroup.statusCounts.cancelled || 0 }}</div>
+             <div class="text-lg font-bold text-content-secondary">{{ taskGroup.statusCounts.cancelled || 0 }}</div>
            </button>
          </div>
          <!-- Chart view -->
-         <div v-show="statusView === 'chart'" class="flex flex-col items-center justify-center bg-white border border-gray-200 rounded-lg p-4 gap-3" style="min-height: 280px;">
+         <div v-show="statusView === 'chart'" class="flex flex-col items-center justify-center bg-surface border border-edge rounded-lg p-4 gap-3" style="min-height: 280px;">
            <div v-if="taskGroup.totalCount > 0" class="w-[240px] h-[240px] shrink-0">
              <canvas ref="statusPieChart" width="240" height="240" class="block"></canvas>
            </div>
-           <p v-else class="text-gray-500 text-sm py-8">No tasks to display</p>
+           <p v-else class="text-content-tertiary text-sm py-8">No tasks to display</p>
            <!-- Selection labels: show which segment is selected (click to filter) -->
            <div v-if="taskGroup.totalCount > 0" class="flex flex-wrap justify-center gap-2">
              <button
@@ -84,7 +84,7 @@
                :key="status"
                type="button"
                class="text-xs px-2 py-1 rounded-full font-medium transition-all cursor-pointer"
-               :class="currentFilter === status ? getStatusPillClass(status) : 'bg-gray-100 text-gray-500 hover:bg-gray-200'"
+               :class="currentFilter === status ? getStatusPillClass(status) : 'bg-muted text-content-tertiary hover:bg-muted'"
                @click="filterByStatus(status)"
              >
                {{ statusLabel(status) }}
@@ -94,18 +94,18 @@
        </div>
 
         <!-- Task List -->
-       <div class="bg-white rounded-lg shadow">
-        <div class="px-6 py-6 border-b border-gray-200 flex items-center justify-between bg-gray-50">
-          <h2 class="text-xl font-bold text-gray-900">
+       <div class="bg-surface rounded-lg shadow">
+        <div class="px-6 py-6 border-b border-edge flex items-center justify-between bg-page">
+          <h2 class="text-xl font-bold text-content">
             Individual Tasks
-            <span v-if="currentFilter" class="ml-3 text-base font-semibold text-ultramarine-700">
+            <span v-if="currentFilter" class="ml-3 text-base font-semibold text-primary">
               (Filtered by {{ currentFilter }})
             </span>
           </h2>
           <button 
             v-if="currentFilter"
             @click="clearFilter"
-            class="text-sm font-semibold text-ultramarine-600 hover:text-ultramarine-700"
+            class="text-sm font-semibold text-primary hover:text-primary"
           >
             Show All
           </button>
@@ -115,11 +115,11 @@
             <div class="flex items-start justify-between">
               <div class="flex-1">
                 <div class="flex items-center gap-3 mb-2">
-                  <span class="text-sm font-medium text-gray-900">Task ID: {{ task.id }}</span>
+                  <span class="text-sm font-medium text-content">Task ID: {{ task.id }}</span>
                   <router-link
                     v-if="backTo"
                     :to="taskDetailRoute(task)"
-                    class="text-sm text-ultramarine-600 hover:text-ultramarine-700 font-medium"
+                    class="text-sm text-primary hover:text-primary font-medium"
                   >
                     View details
                   </router-link>
@@ -133,27 +133,27 @@
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                   <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Scheduled At</label>
-                    <div class="text-sm text-gray-900">{{ formatDate(task.scheduledAt) }}</div>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Scheduled At</label>
+                    <div class="text-sm text-content">{{ formatDate(task.scheduledAt) }}</div>
                   </div>
                   <div v-if="task.startedAt">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Started At</label>
-                    <div class="text-sm text-gray-900">{{ formatDate(task.startedAt) }}</div>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Started At</label>
+                    <div class="text-sm text-content">{{ formatDate(task.startedAt) }}</div>
                   </div>
                   <div v-if="task.completedAt">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Completed At</label>
-                    <div class="text-sm text-gray-900">{{ formatDate(task.completedAt) }}</div>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Completed At</label>
+                    <div class="text-sm text-content">{{ formatDate(task.completedAt) }}</div>
                   </div>
                   <div v-if="task.error">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Error</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Error</label>
                     <div class="text-sm text-red-600">{{ task.error }}</div>
                   </div>
                 </div>
 
                 <!-- Task Parameters -->
                 <div v-if="task.parameters && Object.keys(task.parameters).length > 0">
-                  <label class="block text-sm font-medium text-gray-700 mb-2">Parameters</label>
-                  <div class="bg-gray-50 rounded-md p-3">
+                  <label class="block text-sm font-medium text-content-secondary mb-2">Parameters</label>
+                  <div class="bg-page rounded-md p-3">
                     <pre class="text-sm text-gray-800 whitespace-pre-wrap">{{ JSON.stringify(task.parameters, null, 2) }}</pre>
                   </div>
                 </div>
@@ -208,26 +208,26 @@
                         </svg>
                     </div>
                     <div class="ml-3">
-                        <h3 class="text-lg font-medium text-gray-900">Reschedule Task</h3>
+                        <h3 class="text-lg font-medium text-content">Reschedule Task</h3>
                     </div>
                 </div>
                 <div class="mb-4">
                     <p class="text-sm text-gray-600">
                         Are you sure you want to reschedule task <strong>{{ selectedTask?.id }}</strong>?
                     </p>
-                    <p class="text-sm text-gray-500 mt-2">
+                    <p class="text-sm text-content-tertiary mt-2">
                         This will reset the task's status and schedule it to run again.
                     </p>
                     
                     <div class="mt-4">
-                        <label for="newScheduledTime" class="block text-sm font-medium text-gray-700 mb-2">
+                        <label for="newScheduledTime" class="block text-sm font-medium text-content-secondary mb-2">
                             New Scheduled Time
                         </label>
                         <input
                             id="newScheduledTime"
                             v-model="newScheduledTime"
                             type="datetime-local"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                            class="w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                             required
                         />
                     </div>
@@ -241,7 +241,7 @@
                     </button>
                     <button 
                         @click="showRescheduleModal = false"
-                        class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
+                        class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
                     >
                         Cancel
                     </button>
@@ -262,14 +262,14 @@
                         </svg>
                     </div>
                     <div class="ml-3">
-                        <h3 class="text-lg font-medium text-gray-900">Run Task Now</h3>
+                        <h3 class="text-lg font-medium text-content">Run Task Now</h3>
                     </div>
                 </div>
                 <div class="mb-4">
                     <p class="text-sm text-gray-600">
                         Are you sure you want to run task <strong>{{ selectedTask?.id }}</strong> immediately?
                     </p>
-                    <p class="text-sm text-gray-500 mt-2">
+                    <p class="text-sm text-content-tertiary mt-2">
                         This will execute the task right away, bypassing its scheduled time.
                     </p>
                 </div>
@@ -282,7 +282,7 @@
                     </button>
                     <button 
                         @click="showRunModal = false"
-                        class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
+                        class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
                     >
                         Cancel
                     </button>
@@ -303,14 +303,14 @@
                         </svg>
                     </div>
                     <div class="ml-3">
-                        <h3 class="text-lg font-medium text-gray-900">Cancel Task</h3>
+                        <h3 class="text-lg font-medium text-content">Cancel Task</h3>
                     </div>
                 </div>
                 <div class="mb-4">
                     <p class="text-sm text-gray-600">
                         Are you sure you want to cancel task <strong>{{ selectedTask?.id }}</strong>?
                     </p>
-                    <p class="text-sm text-gray-500 mt-2">
+                    <p class="text-sm text-content-tertiary mt-2">
                         This will permanently cancel the task and it cannot be undone.
                     </p>
                 </div>
@@ -323,7 +323,7 @@
                     </button>
                     <button 
                         @click="showCancelModal = false"
-                        class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
+                        class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium"
                     >
                         Keep Task
                     </button>

package/frontend/src/tasks/task-details/task-details.js

@@ -10,7 +10,8 @@ const PIE_HOVER = ['#ca8a04', '#16a34a', '#dc2626', '#4b5563'];
 module.exports = app => app.component('task-details', {
   props: {
     taskGroup: { type: Object, required: true },
-    backTo: { type: Object, default: null }
+    backTo: { type: Object, default: null },
+    showBackButton: { type: Boolean, default: true }
   },
   data: () => ({
     currentFilter: null,
@@ -80,7 +81,7 @@ module.exports = app => app.component('task-details', {
           requestAnimationFrame(() => this.ensureStatusChart());
         });
       }
-    },
+    }
   },
   methods: {
     destroyStatusChart() {
@@ -117,6 +118,10 @@ module.exports = app => app.component('task-details', {
         return;
       }
       try {
+        const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+        const legendColor = isDark
+          ? (getComputedStyle(document.documentElement).getPropertyValue('--studio-text-primary')?.trim() || 'rgba(255,255,255,0.9)')
+          : undefined;
         this.statusChart = new Chart(canvas, {
           type: 'doughnut',
           data,
@@ -136,7 +141,8 @@ module.exports = app => app.component('task-details', {
             plugins: {
               legend: {
                 display: true,
-                position: 'bottom'
+                position: 'bottom',
+                ...(legendColor && { labels: { color: legendColor } })
               }
             }
           }