@mongoosejs/studio 0.2.9 → 0.2.11

package/frontend/src/document/execute-script/execute-script.js

@@ -0,0 +1,142 @@
+'use strict';
+
+const api = require('../../api');
+const template = require('./execute-script.html');
+const appendCSS = require('../../appendCSS');
+
+appendCSS(require('./execute-script.css'));
+
+module.exports = app => app.component('execute-script', {
+  template,
+  props: ['model', 'documentId', 'editting', 'visible'],
+  data() {
+    return {
+      scriptText: '',
+      scriptResult: null,
+      scriptLogs: '',
+      scriptError: null,
+      scriptHasRun: false,
+      scriptRunning: false,
+      scriptEditor: null,
+      isOpen: false,
+      isClosing: false
+    };
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.isOpen = true;
+        this.isClosing = false;
+      } else if (this.isOpen) {
+        this.isClosing = true;
+        this.destroyScriptEditor();
+        setTimeout(() => {
+          this.isOpen = false;
+          this.isClosing = false;
+        }, 200);
+      }
+    },
+    isOpen(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.initializeScriptEditor();
+        });
+      }
+    }
+  },
+  mounted() {
+    if (this.visible) {
+      this.isOpen = true;
+    }
+  },
+  beforeDestroy() {
+    this.destroyScriptEditor();
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    initializeScriptEditor() {
+      if (!this.$refs.scriptEditor || this.scriptEditor || typeof CodeMirror === 'undefined') {
+        return;
+      }
+
+      this.$refs.scriptEditor.value = this.scriptText;
+      this.scriptEditor = CodeMirror.fromTextArea(this.$refs.scriptEditor, {
+        mode: 'javascript',
+        lineNumbers: true,
+        lineWrapping: true
+      });
+      this.scriptEditor.on('change', () => {
+        this.scriptText = this.scriptEditor.getValue();
+      });
+    },
+    destroyScriptEditor() {
+      if (this.scriptEditor) {
+        this.scriptEditor.toTextArea();
+        this.scriptEditor = null;
+      }
+    },
+    updateScriptText(event) {
+      this.scriptText = event.target.value;
+    },
+    clearScript() {
+      this.scriptText = '';
+      this.scriptResult = null;
+      this.scriptLogs = '';
+      this.scriptError = null;
+      this.scriptHasRun = false;
+      if (this.scriptEditor) {
+        this.scriptEditor.setValue('');
+      }
+    },
+    formatScriptOutput(value) {
+      if (value === undefined) {
+        return 'undefined';
+      }
+      if (value === null) {
+        return 'null';
+      }
+      if (typeof value === 'string') {
+        return value;
+      }
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch (err) {
+        return String(value);
+      }
+    },
+    async runDocumentScript() {
+      const scriptToRun = (this.scriptEditor ? this.scriptEditor.getValue() : this.scriptText || '').trim();
+      if (!scriptToRun) {
+        this.$toast.error('Script cannot be empty.');
+        return;
+      }
+
+      this.scriptRunning = true;
+      this.scriptError = null;
+      this.scriptHasRun = false;
+      try {
+        const { result, logs } = await api.Model.executeDocumentScript({
+          model: this.model,
+          documentId: this.documentId,
+          script: scriptToRun
+        });
+        this.scriptText = scriptToRun;
+        if (this.scriptEditor) {
+          this.scriptEditor.setValue(scriptToRun);
+        }
+        this.scriptResult = result;
+        this.scriptLogs = logs;
+        this.scriptHasRun = true;
+        this.$emit('refresh');
+        this.$toast.success('Script executed successfully!');
+      } catch (err) {
+        this.scriptError = err?.message || String(err);
+        this.$toast.error('Script execution failed.');
+      } finally {
+        this.scriptRunning = false;
+      }
+    }
+  }
+});

package/frontend/src/index.js

@@ -11,7 +11,7 @@ const api = require('./api');
 const format = require('./format');
 const arrayUtils = require('./array-utils');
 const mothership = require('./mothership');
-const { routes } = require('./routes');
+const { routes, hasAccess } = require('./routes');
 const Toast = require('vue-toastification').default;
 const { useToast } = require('vue-toastification');
 const appendCSS = require('./appendCSS');
@@ -130,8 +130,12 @@ app.component('app-component', {
           const { user, roles } = await mothership.me();
 
           try {
-            const { nodeEnv } = await api.status();
+            const [{ nodeEnv }, { modelSchemaPaths }] = await Promise.all([
+              api.status(),
+              api.Model.listModels()
+            ]);
             this.nodeEnv = nodeEnv;
+            this.modelSchemaPaths = modelSchemaPaths;
           } catch (err) {
             this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
             this.status = 'loaded';
@@ -144,8 +148,12 @@ app.component('app-component', {
       }
     } else {
       try {
-        const { nodeEnv } = await api.status();
+        const [{ nodeEnv }, { modelSchemaPaths }] = await Promise.all([
+          api.status(),
+          api.Model.listModels()
+        ]);
         this.nodeEnv = nodeEnv;
+        this.modelSchemaPaths = modelSchemaPaths;
       } catch (err) {
         this.authError = 'Error connecting to Mongoose Studio API: ' + (err.response?.data?.message ?? err.message);
       }
@@ -159,8 +167,9 @@ app.component('app-component', {
     const status = Vue.ref('init');
     const nodeEnv = Vue.ref(null);
     const authError = Vue.ref(null);
+    const modelSchemaPaths = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles, status, nodeEnv, authError });
+    const state = Vue.reactive({ user, roles, status, nodeEnv, authError, modelSchemaPaths });
     Vue.provide('state', state);
 
     return state;
@@ -176,6 +185,41 @@ const router = VueRouter.createRouter({
   }))
 });
 
+// Add global navigation guard
+router.beforeEach((to, from, next) => {
+  // Skip auth check for authorized (public) routes
+  if (to.meta.authorized) {
+    next();
+    return;
+  }
+
+  // Get roles from the app state
+  const roles = window.state?.roles;
+
+  // Check if user has access to the route
+  if (!hasAccess(roles, to.name)) {
+    // Find all routes the user has access to
+    const allowedRoutes = routes.filter(route => hasAccess(roles, route.name));
+
+    // If user has no allowed routes, redirect to splash/login
+    if (allowedRoutes.length === 0) {
+      next({ name: 'root' });
+      return;
+    }
+
+    // Redirect to first allowed route
+    const firstAllowedRoute = allowedRoutes[0].name;
+    next({ name: firstAllowedRoute });
+    return;
+  }
+
+  if (to.name === 'root' && roles && roles[0] === 'dashboards') {
+    return next({ name: 'dashboards' });
+  }
+
+  next();
+});
+
 router.beforeEach((to, from, next) => {
   if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
     return next({ name: 'dashboards' });

package/frontend/src/navbar/navbar.html

@@ -32,7 +32,7 @@
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
         :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
-      <span v-else class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed">
+      <span v-else class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 cursor-not-allowed">
         Dashboards
         <svg class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
@@ -48,6 +48,12 @@
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
         </svg>
       </span>
+      <a
+      :href="hasTaskVisualizer"
+      class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+      :class="taskView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">
+      Tasks
+      </a>
       <a
         href="https://studio.mongoosejs.io/docs"
         target="_blank"
@@ -75,7 +81,14 @@
           </button>
         </div>
 
-        <div v-if="showFlyout" class="absolute right-0 z-[100] top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+        <div
+          v-if="showFlyout"
+          class="absolute right-0 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="user-menu-button"
+          style="z-index: 10000"
+          tabindex="-1">
           <router-link to="/team" v-if="hasAccess(roles, 'team')" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Team</router-link>
           <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" tabindex="-1" id="user-menu-item-2">
             Team

package/frontend/src/navbar/navbar.js

@@ -41,6 +41,9 @@ module.exports = app => app.component('navbar', {
     chatView() {
       return ['chat index', 'chat'].includes(this.$route.name);
     },
+    taskView() {
+      return ['tasks'].includes(this.$route.name);
+    },
     routeName() {
       return this.$route.name;
     },
@@ -55,6 +58,14 @@ module.exports = app => app.component('navbar', {
     },
     defaultRoute() {
       return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
+    },
+    hasTaskVisualizer() {
+      if (window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer) {
+        return '#/tasks';
+      } else {
+        return 'https://www.npmjs.com/package/@mongoosejs/task';
+      }
+     
     }
   },
   methods: {

package/frontend/src/routes.js

@@ -9,7 +9,7 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
-const allowedRoutesForLocalDev = ['document', 'root', 'chat'];
+const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model'];
 
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
@@ -33,7 +33,7 @@ module.exports = {
       name: 'model',
       component: 'models',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
@@ -41,7 +41,7 @@ module.exports = {
       name: 'document',
       component: 'document',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
@@ -49,7 +49,7 @@ module.exports = {
       name: 'dashboards',
       component: 'dashboards',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
@@ -57,13 +57,21 @@ module.exports = {
       name: 'dashboard',
       component: 'dashboard',
       meta: {
-        authorized: true
+        authorized: false
       }
     },
     {
       path: '/team',
       name: 'team',
       component: 'team',
+      meta: {
+        authorized: false
+      }
+    },
+    {
+      path: '/tasks',
+      name: 'tasks',
+      component: 'tasks',
       meta: {
         authorized: true
       }

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

@@ -0,0 +1,284 @@
+<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">
+                <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
+            </button>
+            <h1 class="text-2xl font-bold text-gray-700">{{ taskGroup.name }}</h1>
+            <p class="text-gray-500">Total: {{ taskGroup.totalCount }} tasks</p>
+        </div>
+
+      </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>
+           <button 
+             v-if="currentFilter"
+             @click="clearFilter"
+             class="text-sm text-ultramarine-600 hover:text-ultramarine-700 font-medium"
+           >
+             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>
+                  <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-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>
+                  </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 v-if="task.error">
+                    <label class="block text-sm font-medium text-gray-700 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">
+                    <pre class="text-sm text-gray-800 whitespace-pre-wrap">{{ JSON.stringify(task.parameters, null, 2) }}</pre>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="flex flex-col gap-3 ml-6">
+                <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 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                  :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 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                  :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 transform hover:scale-105 transition-all duration-200 shadow-md hover:shadow-lg"
+                >
+                  <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
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <!-- Reschedule Confirmation 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">
+                <div class="flex items-center mb-4">
+                    <div class="flex-shrink-0">
+                        <svg class="w-6 h-6 text-blue-600" 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>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-lg font-medium text-gray-900">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">
+                        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">
+                            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"
+                            required
+                        />
+                    </div>
+                </div>
+                <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 Task Confirmation 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">
+                <div class="flex items-center mb-4">
+                    <div class="flex-shrink-0">
+                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-lg font-medium text-gray-900">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">
+                        This will execute the task right away, bypassing its scheduled time.
+                    </p>
+                </div>
+                <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 Confirmation 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">
+                <div class="flex items-center mb-4">
+                    <div class="flex-shrink-0">
+                        <svg class="w-6 h-6 text-red-600" 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>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-lg font-medium text-gray-900">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">
+                        This will permanently cancel the task and it cannot be undone.
+                    </p>
+                </div>
+                <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>
+