@mongoosejs/studio 0.2.12 → 0.2.13

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

@@ -0,0 +1,15 @@
+<div class="p-4 space-y-6">
+  <div v-if="status === 'init'">
+    <img src="images/loader.gif" alt="Loading" />
+  </div>
+  <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>
+</div>

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

@@ -0,0 +1,78 @@
+'use strict';
+
+// 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');
+
+function buildTaskGroup(name, tasks) {
+  const statusCounts = { pending: 0, succeeded: 0, failed: 0, cancelled: 0, in_progress: 0, unknown: 0 };
+  let lastRun = null;
+  tasks.forEach(task => {
+    const status = task.status || 'unknown';
+    if (Object.prototype.hasOwnProperty.call(statusCounts, status)) {
+      statusCounts[status]++;
+    } else {
+      statusCounts.unknown++;
+    }
+    const taskTime = new Date(task.scheduledAt || task.createdAt || 0);
+    if (!lastRun || taskTime > lastRun) lastRun = taskTime;
+  });
+  return {
+    name,
+    tasks,
+    statusCounts,
+    totalCount: tasks.length,
+    lastRun
+  };
+}
+
+module.exports = app => app.component('task-by-name', {
+  template,
+  data: () => ({
+    status: 'init',
+    taskGroup: null,
+    errorMessage: ''
+  }),
+  computed: {
+    taskName() {
+      return this.$route.params.name || '';
+    }
+  },
+  watch: {
+    taskName: {
+      immediate: true,
+      handler() {
+        this.loadTasks();
+      }
+    }
+  },
+  methods: {
+    async loadTasks() {
+      if (!this.taskName) return;
+      this.status = 'init';
+      this.taskGroup = null;
+      this.errorMessage = '';
+      const start = new Date();
+      start.setHours(start.getHours() - 1);
+      const end = new Date();
+      try {
+        const { tasks } = await api.Task.getTasks({
+          name: this.taskName,
+          start,
+          end
+        });
+        this.taskGroup = buildTaskGroup(this.taskName, tasks);
+        this.status = 'loaded';
+      } catch (err) {
+        this.status = 'error';
+        this.errorMessage = err?.response?.data?.message || err.message || 'Failed to load tasks';
+      }
+    },
+    async onTaskCreated() {
+      await this.loadTasks();
+    },
+    async onTaskCancelled() {
+      await this.loadTasks();
+    }
+  }
+});

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

@@ -0,0 +1,157 @@
+<div class="p-4 space-y-6">
+  <div v-if="status === 'init'">
+    <img src="images/loader.gif" alt="Loading" />
+  </div>
+  <div v-else-if="status === 'error'" class="text-red-600">
+    {{ errorMessage }}
+  </div>
+  <div v-else-if="status === 'notfound'" class="text-gray-600">
+    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">
+      <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>
+
+    <div class="bg-white 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-xs px-2 py-1 rounded-full font-medium"
+          :class="getStatusColor(task.status)"
+        >
+          {{ task?.status }}
+        </span>
+      </div>
+
+      <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>
+        </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>
+        </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>
+        </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">
+          <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">
+          <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">
+          <list-json :value="task.error"></list-json>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-200">
+        <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"
+          :disabled="task.status === 'in_progress'"
+        >
+          <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          Reschedule
+        </button>
+        <button
+          @click="showRunConfirmation(task)"
+          class="flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="task.status === 'in_progress'"
+        >
+          <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="M5 3l14 9-14 9V3z"></path>
+          </svg>
+          Run Now
+        </button>
+        <button
+          v-if="task.status === 'pending'"
+          @click="showCancelConfirmation(task)"
+          class="flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700"
+        >
+          <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="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+          Cancel Task
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Reschedule Modal -->
+  <modal v-if="showRescheduleModal" containerClass="!max-w-md">
+    <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>
+        <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>
+        <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"
+        />
+        <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>
+        </div>
+      </div>
+    </template>
+  </modal>
+
+  <!-- Run Modal -->
+  <modal v-if="showRunModal" containerClass="!max-w-md">
+    <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>
+        <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>
+        <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>
+        </div>
+      </div>
+    </template>
+  </modal>
+
+  <!-- Cancel Task Modal -->
+  <modal v-if="showCancelModal" containerClass="!max-w-md">
+    <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>
+        <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>
+        <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>
+        </div>
+      </div>
+    </template>
+  </modal>
+</div>

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

@@ -0,0 +1,116 @@
+'use strict';
+
+// Page: one task by id. Dedicated single-task detail UI (not the list).
+const template = require('./task-single.html');
+const api = require('../api');
+
+module.exports = app => app.component('task-single', {
+  template,
+  data: () => ({
+    status: 'init',
+    task: null,
+    errorMessage: '',
+    showRescheduleModal: false,
+    showRunModal: false,
+    showCancelModal: false,
+    selectedTask: null,
+    newScheduledTime: ''
+  }),
+  computed: {
+    taskId() {
+      return this.$route.params.id || '';
+    },
+    taskByNamePath() {
+      const name = this.task?.name ?? this.$route.params.name ?? '';
+      const path = `/tasks/${encodeURIComponent(name || '')}`;
+      const query = this.$route.query?.status ? { status: this.$route.query.status } : {};
+      return { path, query };
+    },
+  },
+  watch: {
+    '$route.params': {
+      deep: true,
+      handler() {
+        this.loadTask();
+      }
+    }
+  },
+  methods: {
+    getStatusColor(status) {
+      if (status === 'succeeded') return 'bg-green-100 text-green-800';
+      if (status === 'pending') return 'bg-yellow-100 text-yellow-800';
+      if (status === 'cancelled') return 'bg-gray-100 text-gray-800';
+      if (status === 'failed') return 'bg-red-100 text-red-800';
+      if (status === 'in_progress') return 'bg-blue-100 text-blue-800';
+      return 'bg-slate-100 text-slate-800';
+    },
+    formatDate(dateString) {
+      if (!dateString) return 'N/A';
+      return new Date(dateString).toLocaleString();
+    },
+    async loadTask() {
+      if (!this.taskId) return;
+      this.status = 'init';
+      this.task = null;
+      this.errorMessage = '';
+      try {
+        const { doc } = await api.Model.getDocument({ model: 'Task', documentId: this.taskId });
+        this.task = doc;
+        this.status = 'loaded';
+      } catch (err) {
+        const status = err?.response?.status;
+        const notFound = status === 404 || err?.response?.data?.name === 'DocumentNotFoundError';
+        this.status = notFound ? 'notfound' : 'error';
+        this.errorMessage = notFound ? '' : (err?.response?.data?.message || err.message || 'Failed to load task');
+      }
+    },
+    showRescheduleConfirmation(task) {
+      this.selectedTask = task;
+      const defaultTime = new Date();
+      defaultTime.setHours(defaultTime.getHours() + 1);
+      this.newScheduledTime = defaultTime.toISOString().slice(0, 16);
+      this.showRescheduleModal = true;
+    },
+    showRunConfirmation(task) {
+      this.selectedTask = task;
+      this.showRunModal = true;
+    },
+    showCancelConfirmation(task) {
+      this.selectedTask = task;
+      this.showCancelModal = true;
+    },
+    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();
+    },
+    async confirmRunTask() {
+      await api.Task.runTask({ taskId: this.selectedTask.id });
+      this.$toast.success({ title: 'Task Started', text: `Task ${this.selectedTask.id} is now running`, type: 'success' });
+      this.showRunModal = false;
+      this.selectedTask = null;
+      await this.loadTask();
+    },
+    goBack() {
+      if (window.history.length > 1) {
+        window.history.back();
+      } else {
+        this.$router.push(this.taskByNamePath);
+      }
+    },
+    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();
+    }
+  },
+  mounted() {
+    this.loadTask();
+  }
+});

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

@@ -1,11 +1,11 @@
 <div class="p-4 space-y-6">
     <div class="flex items-center justify-between">
         <div>
-            <button @click="$emit('back')" class="text-gray-500 hover:text-gray-700 mb-2">
+            <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>
-                Back to Task Groups
+                {{ backLabel }}
             </button>
             <h1 class="text-2xl font-bold text-gray-700">{{ taskGroup.name }}</h1>
             <p class="text-gray-500">Total: {{ taskGroup.totalCount }} tasks</p>
@@ -14,64 +14,115 @@
       </div>
 
         <!-- Status Summary -->
-       <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
-         <button 
-           @click="filterByStatus('pending')"
-           class="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-center hover:bg-yellow-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-yellow-400': currentFilter === 'pending' }"
-         >
-           <div class="text-xs text-yellow-600 font-medium">Pending</div>
-           <div class="text-lg font-bold text-yellow-700">{{ taskGroup.statusCounts.pending || 0 }}</div>
-         </button>
-         <button 
-           @click="filterByStatus('succeeded')"
-           class="bg-green-50 border border-green-200 rounded-md p-3 text-center hover:bg-green-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-green-400': currentFilter === 'succeeded' }"
-         >
-           <div class="text-xs text-green-600 font-medium">Succeeded</div>
-           <div class="text-lg font-bold text-green-700">{{ taskGroup.statusCounts.succeeded || 0 }}</div>
-         </button>
-         <button 
-           @click="filterByStatus('failed')"
-           class="bg-red-50 border border-red-200 rounded-md p-3 text-center hover:bg-red-100 transition-colors cursor-pointer"
-           :class="{ 'ring-2 ring-red-400': currentFilter === 'failed' }"
-         >
-           <div class="text-xs text-red-600 font-medium">Failed</div>
-           <div class="text-lg font-bold text-red-700">{{ taskGroup.statusCounts.failed || 0 }}</div>
-         </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="{ '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>
-         </button>
-       </div>
-
-        <!-- Task List -->
-       <div class="bg-white rounded-lg shadow">
-         <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-           <h2 class="text-lg font-semibold text-gray-700">
-             Individual Tasks
-             <span v-if="currentFilter" class="text-sm font-normal text-gray-500 ml-2">
-               (Filtered by {{ currentFilter }})
-             </span>
-           </h2>
+       <div class="space-y-3">
+         <div class="flex items-center justify-between">
+           <span class="text-sm font-medium text-gray-700">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'"
+             >
+               Summary
+             </button>
+             <button
+               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'"
+             >
+               Chart
+             </button>
+           </div>
+         </div>
+         <!-- Summary view -->
+         <div v-show="statusView === 'summary'" class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+           <button 
+             @click="filterByStatus('pending')"
+             class="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-center hover:bg-yellow-100 transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-yellow-400': currentFilter === 'pending' }"
+           >
+             <div class="text-xs text-yellow-600 font-medium">Pending</div>
+             <div class="text-lg font-bold text-yellow-700">{{ taskGroup.statusCounts.pending || 0 }}</div>
+           </button>
+           <button 
+             @click="filterByStatus('succeeded')"
+             class="bg-green-50 border border-green-200 rounded-md p-3 text-center hover:bg-green-100 transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-green-400': currentFilter === 'succeeded' }"
+           >
+             <div class="text-xs text-green-600 font-medium">Succeeded</div>
+             <div class="text-lg font-bold text-green-700">{{ taskGroup.statusCounts.succeeded || 0 }}</div>
+           </button>
            <button 
-             v-if="currentFilter"
-             @click="clearFilter"
-             class="text-sm text-ultramarine-600 hover:text-ultramarine-700 font-medium"
+             @click="filterByStatus('failed')"
+             class="bg-red-50 border border-red-200 rounded-md p-3 text-center hover:bg-red-100 transition-colors cursor-pointer"
+             :class="{ 'ring-2 ring-red-400': currentFilter === 'failed' }"
            >
-             Show All
+             <div class="text-xs text-red-600 font-medium">Failed</div>
+             <div class="text-lg font-bold text-red-700">{{ taskGroup.statusCounts.failed || 0 }}</div>
+           </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="{ '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>
            </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-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>
+           <!-- 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
+               v-for="status in statusOrderForDisplay"
+               :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'"
+               @click="filterByStatus(status)"
+             >
+               {{ statusLabel(status) }}
+             </button>
+           </div>
+         </div>
+       </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">
+            Individual Tasks
+            <span v-if="currentFilter" class="ml-3 text-base font-semibold text-ultramarine-700">
+              (Filtered by {{ currentFilter }})
+            </span>
+          </h2>
+          <button 
+            v-if="currentFilter"
+            @click="clearFilter"
+            class="text-sm font-semibold text-ultramarine-600 hover:text-ultramarine-700"
+          >
+            Show All
+          </button>
+        </div>
         <div class="divide-y divide-gray-200">
           <div v-for="task in sortedTasks" :key="task.id" class="p-6">
             <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>
+                  <router-link
+                    v-if="backTo"
+                    :to="taskDetailRoute(task)"
+                    class="text-sm text-ultramarine-600 hover:text-ultramarine-700 font-medium"
+                  >
+                    View details
+                  </router-link>
                   <span
                     class="text-xs px-2 py-1 rounded-full font-medium"
                     :class="getStatusColor(task.status)"