@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/splash/splash.html

@@ -1,7 +1,7 @@
 <div class="w-full h-full flex items-center justify-center">
   <div class="text-center">
-    <div class="rounded-full bg-gray-100 p-6 inline-block">
-      <img src="images/logo.svg" class="w-48 h-48">
+    <div class="rounded-full bg-muted p-6 inline-block">
+      <img src="images/mongoose-studio.svg" class="w-48 h-48">
     </div>
     <div class="text-lg mt-2 font-bold">
       Mongoose Studio
@@ -9,7 +9,7 @@
     <div v-if="loading" class="mt-2">
       <img src="images/loader.gif" class="inline w-16 h-16">
     </div>
-    <div class="mt-2 text-gray-700" v-if="!loading">
+    <div class="mt-2 text-content-secondary" v-if="!loading">
       {{workspaceName}}
     </div>
     <div class="mt-4 flex gap-4 justify-center" v-if="!loading">
@@ -17,7 +17,7 @@
         <async-button
           type="button"
           @click="loginWithGithub"
-          class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:bg-gray-500">
+          class="rounded bg-primary px-2 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:bg-page0">
           <svg viewBox="0 0 98 98" class="inline mr-1" height="1.5em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
           Login With GitHub
         </async-button>
@@ -26,7 +26,7 @@
         <async-button
           type="button"
           @click="loginWithGoogle"
-          class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:bg-gray-500">
+          class="rounded bg-primary px-2 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:bg-page0">
           <svg class="inline" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path fill="#fff" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#fff" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fff" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#fff" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg>
           Login With Google
         </async-button>

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">
+            <button @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-gray-700">{{ taskGroup.name }}</h1>
-            <p class="text-gray-500">Total: {{ taskGroup.totalCount }} tasks</p>
+            <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

@@ -80,7 +80,7 @@ module.exports = app => app.component('task-details', {
           requestAnimationFrame(() => this.ensureStatusChart());
         });
       }
-    },
+    }
   },
   methods: {
     destroyStatusChart() {
@@ -117,6 +117,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 +140,8 @@ module.exports = app => app.component('task-details', {
             plugins: {
               legend: {
                 display: true,
-                position: 'bottom'
+                position: 'bottom',
+                ...(legendColor && { labels: { color: legendColor } })
               }
             }
           }